Put the source in the URL and drop the global status bar

Selecting a source from a bar at the top meant every page was implicitly
scoped to a hidden bit of state. The source is now a route parameter:
/sources lists them, /sources/:name owns the source, and Import, Rules,
Mappings, Records, and Pivot are tabs beneath it. Sources.jsx split into
SourceList and SourceDetail, with Section and SampleTable extracted so
the create dialog and the detail page share them.

The detail page is grouped into titled panels — Connection, Fields and
view, Sample rows, Maintenance, Delete — rather than one flat form.

Two new top-level pages, following how Monarch separates these:

- Import, because importing is frequent and configuring a source is not.
  Every source in one list, with a sync button for bank feeds.
- Bridge, because one SimpleFIN credential covers every account, so
  connection state belongs in one place rather than per source. Loads
  only when asked, since it queries SimpleFIN, and totals the balances.

The dark mode toggle lived in the status bar and moved to the sidebar.
The out-of-sync and reprocess banners are unchanged.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01G2HFeU5neCKagTnmA6o9Tu

ui/src/App.jsx

@@ -1,10 +1,13 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, createElement } from 'react'
-import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
+import { BrowserRouter, Routes, Route, Navigate, useParams } from 'react-router-dom'
 import { api, setCredentials, clearCredentials } from './api'
-import StatusBar from './components/StatusBar.jsx'
 import Sidebar from './components/Sidebar.jsx'
+import SourceTabs from './components/SourceTabs.jsx'
 import Login from './pages/Login'
-import Sources from './pages/Sources'
+import SourceList from './pages/SourceList'
+import SourceDetail from './pages/SourceDetail'
+import Bridge from './pages/Bridge'
+import ImportHub from './pages/ImportHub'
 import Import from './pages/Import'
 import Rules from './pages/Rules'
 import Mappings from './pages/Mappings'
@@ -14,13 +17,24 @@ import Pivot from './pages/Pivot'
 import Remap from './pages/Remap'
 import Stacks from './pages/Stacks'
 
+// Source-scoped pages still take a `source` prop; this reads it off the URL so
+// they didn't all need rewriting when selection moved out of the status bar.
+function ScopedToSource({ component, ...props }) {
+  const { name } = useParams()
+  return createElement(component, { source: name, ...props })
+}
+
+// Pivot doubles as the stack viewer; a stack in the URL takes precedence there
+function StackPivot() {
+  const { name } = useParams()
+  return <Pivot source={name} selectedStack={name} setSelectedStack={() => {}} />
+}
+
 export default function App() {
   const [authed, setAuthed] = useState(false)
   const [loginUser, setLoginUser] = useState('')
   const [sources, setSources] = useState([])
-  const [stacks, setStacks] = useState([])
   const [source, setSource] = useState(() => localStorage.getItem('selectedSource') || '')
-  const [selectedStack, setSelectedStack] = useState(null)
   const [sidebarExpanded, setSidebarExpanded] = useState(() => localStorage.getItem('df_sidebar') !== 'collapsed')
   // Sets of names whose dfv view is out of sync with current definitions
   const [staleSources, setStaleSources] = useState(new Set())
@@ -37,7 +51,6 @@ export default function App() {
     if (!source && s.length > 0) setSource(s[0].name)
     setAuthed(true)
     setLoginUser(user)
-    api.getStacks().then(setStacks).catch(() => {})
   }
 
   function handleLogout() {
@@ -47,17 +60,11 @@ export default function App() {
     setAuthed(false)
     setLoginUser('')
     setSources([])
-    setStacks([])
-    setSelectedStack(null)
     setStaleSources(new Set())
     setStaleStacks(new Set())
     setReprocessSources(new Set())
   }
 
-  function refreshStacks() {
-    api.getStacks().then(setStacks).catch(() => {})
-  }
-
   // Load initial stale state from DB once on login
   useEffect(() => {
     if (!authed) return
@@ -136,11 +143,6 @@ export default function App() {
 
         {/* Main */}
         <div className="flex-1 overflow-hidden flex flex-col min-w-0">
-          <StatusBar
-            sources={sources} source={source} setSource={setSource}
-            stacks={stacks} selectedStack={selectedStack} setSelectedStack={setSelectedStack}
-          />
-
           {(staleSources.size > 0 || staleStacks.size > 0) && (
             <div className="bg-amber-50 border-b border-amber-200 px-4 py-1.5 text-xs text-amber-800 flex flex-wrap items-center gap-x-3 gap-y-1">
               <span className="font-medium">View out of sync:</span>
@@ -192,14 +194,22 @@ export default function App() {
           <div className="flex-1 overflow-auto">
             <Routes>
               <Route path="/" element={<Navigate to="/sources" replace />} />
-              <Route path="/sources" element={<Sources source={source} sources={sources} setSources={setSources} setSource={setSource} />} />
+
-              <Route path="/import" element={<Import source={source} />} />
+              <Route path="/sources" element={<SourceList sources={sources} setSources={setSources} setSource={setSource} />} />
-              <Route path="/rules" element={<Rules source={source} onStale={markSourceStale} />} />
+              <Route path="/sources/:name" element={<SourceTabs sources={sources} />}>
-              <Route path="/mappings" element={<Mappings source={source} onNeedsReprocess={markNeedsReprocess} />} />
+                <Route index element={<SourceDetail sources={sources} setSources={setSources} />} />
+                <Route path="import" element={<ScopedToSource component={Import} />} />
+                <Route path="rules" element={<ScopedToSource component={Rules} onStale={markSourceStale} />} />
+                <Route path="mappings" element={<ScopedToSource component={Mappings} onNeedsReprocess={markNeedsReprocess} />} />
+                <Route path="records" element={<ScopedToSource component={Records} />} />
+                <Route path="pivot" element={<ScopedToSource component={Pivot} />} />
+              </Route>
+
+              <Route path="/import" element={<ImportHub sources={sources} />} />
+              <Route path="/bridge" element={<Bridge sources={sources} />} />
+              <Route path="/stacks" element={<Stacks sources={sources} onStackStale={markStackStale} onStackViewGenerated={clearStackStale} />} />
+              <Route path="/stacks/:name/pivot" element={<StackPivot />} />
               <Route path="/remap" element={<Remap />} />
-              <Route path="/records" element={<Records source={source} />} />
-              <Route path="/pivot" element={<Pivot source={source} selectedStack={selectedStack} setSelectedStack={setSelectedStack} />} />
-              <Route path="/stacks" element={<Stacks sources={sources} onStackStale={markStackStale} onStackViewGenerated={clearStackStale} onStacksChange={refreshStacks} />} />
               <Route path="/log" element={<Log />} />
             </Routes>
           </div>

ui/src/components/SampleTable.jsx

@@ -0,0 +1,28 @@
+// Compact preview of raw record values — used by the source detail page and by
+// the create dialog when a CSV or bank feed is sampled
+export default function SampleTable({ rows }) {
+  if (!rows || rows.length === 0) return null
+  const cols = Object.keys(rows[0])
+  return (
+    <div className="overflow-auto border border-gray-100 rounded bg-gray-50 max-h-36">
+      <table className="text-xs w-full">
+        <thead>
+          <tr className="text-left text-gray-400 border-b border-gray-100 bg-gray-50 sticky top-0">
+            {cols.map(c => <th key={c} className="px-2 py-1 font-medium whitespace-nowrap">{c}</th>)}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row, i) => (
+            <tr key={i} className="border-t border-gray-100">
+              {cols.map(c => (
+                <td key={c} className="px-2 py-1 whitespace-nowrap text-gray-600 max-w-32 truncate font-mono">
+                  {row[c] == null ? <span className="text-gray-300">—</span> : String(row[c])}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}

ui/src/components/Section.jsx

@@ -0,0 +1,13 @@
+// One titled panel per job, so setup, schema, and destructive actions read as
+// separate things rather than one flat form
+export default function Section({ title, description, children }) {
+  return (
+    <section className="bg-white border border-gray-200 rounded p-4">
+      <h2 className="text-sm font-semibold text-gray-700">{title}</h2>
+      {description
+        ? <p className="text-xs text-gray-400 mt-0.5 mb-3">{description}</p>
+        : <div className="mb-3" />}
+      {children}
+    </section>
+  )
+}

ui/src/components/Sidebar.jsx

@@ -1,4 +1,5 @@
 import { NavLink } from 'react-router-dom'
+import useTheme from '../theme.jsx'
 
 const NAV = [
   {
@@ -24,25 +25,14 @@ const NAV = [
     ),
   },
   {
-    to: '/rules',
+    to: '/bridge',
-    label: 'Rules',
+    label: 'Bridge',
     icon: (
       <svg width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
-        <polyline points="6,7 2,10 6,13"/>
+        <path d="M2 13a8 8 0 0 1 16 0"/>
-        <polyline points="14,7 18,10 14,13"/>
+        <line x1="2" y1="13" x2="18" y2="13"/>
-        <line x1="12" y1="4" x2="8" y2="16"/>
+        <line x1="7" y1="13" x2="7" y2="9"/>
-      </svg>
+        <line x1="13" y1="13" x2="13" y2="9"/>
-    ),
-  },
-  {
-    to: '/mappings',
-    label: 'Mappings',
-    icon: (
-      <svg width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
-        <line x1="2" y1="7" x2="12" y2="7"/>
-        <polyline points="9,4 12,7 9,10"/>
-        <line x1="8" y1="13" x2="18" y2="13"/>
-        <polyline points="11,10 14,13 11,16"/>
       </svg>
     ),
   },
@@ -58,29 +48,6 @@ const NAV = [
       </svg>
     ),
   },
-  {
-    to: '/records',
-    label: 'Records',
-    icon: (
-      <svg width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
-        <rect x="2" y="3" width="16" height="14" rx="1.5"/>
-        <line x1="2" y1="8" x2="18" y2="8"/>
-        <line x1="7" y1="8" x2="7" y2="17"/>
-      </svg>
-    ),
-  },
-  {
-    to: '/pivot',
-    label: 'Pivot',
-    icon: (
-      <svg width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
-        <rect x="2" y="2" width="7" height="7" rx="1"/>
-        <rect x="11" y="2" width="7" height="7" rx="1"/>
-        <rect x="2" y="11" width="7" height="7" rx="1"/>
-        <rect x="11" y="11" width="7" height="7" rx="1"/>
-      </svg>
-    ),
-  },
   {
     to: '/stacks',
     label: 'Stacks',
@@ -105,6 +72,8 @@ const NAV = [
 ]
 
 export default function Sidebar({ expanded, setExpanded, loginUser, onLogout }) {
+  const { dark, setDark } = useTheme()
+
   return (
     <div
       className="bg-white border-r border-gray-200 flex flex-col shrink-0 overflow-hidden transition-all duration-150"
@@ -157,6 +126,37 @@ export default function Sidebar({ expanded, setExpanded, loginUser, onLogout })
         ))}
       </nav>
 
+      {/* Theme */}
+      <div className="border-t border-gray-100 px-3 py-2 shrink-0">
+        <button
+          onClick={() => setDark(d => !d)}
+          title={dark ? 'Switch to light mode' : 'Switch to dark mode'}
+          className="flex items-center gap-2.5 w-full rounded px-1 py-1 text-gray-500 hover:bg-gray-100 hover:text-gray-800"
+        >
+          <span className="shrink-0">
+            {dark ? (
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <circle cx="12" cy="12" r="4"/>
+                <line x1="12" y1="2" x2="12" y2="5"/><line x1="12" y1="19" x2="12" y2="22"/>
+                <line x1="4.93" y1="4.93" x2="7.05" y2="7.05"/><line x1="16.95" y1="16.95" x2="19.07" y2="19.07"/>
+                <line x1="2" y1="12" x2="5" y2="12"/><line x1="19" y1="12" x2="22" y2="12"/>
+                <line x1="4.93" y1="19.07" x2="7.05" y2="16.95"/><line x1="16.95" y1="7.05" x2="19.07" y2="4.93"/>
+              </svg>
+            ) : (
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+              </svg>
+            )}
+          </span>
+          <span
+            className="text-sm whitespace-nowrap transition-opacity duration-100"
+            style={{ opacity: expanded ? 1 : 0, pointerEvents: expanded ? 'auto' : 'none', width: expanded ? 'auto' : 0, overflow: 'hidden' }}
+          >
+            {dark ? 'Light mode' : 'Dark mode'}
+          </span>
+        </button>
+      </div>
+
       {/* User / logout */}
       <div className="border-t border-gray-100 px-3 py-2.5 flex items-center gap-2 shrink-0 overflow-hidden">
         <div

ui/src/components/SourceTabs.jsx

@@ -0,0 +1,58 @@
+import { NavLink, Outlet, useParams, Link } from 'react-router-dom'
+
+// Everything scoped to one source lives under /sources/:name, so the source is
+// in the URL rather than in a global selector.
+const TABS = [
+  { to: '', label: 'Setup', end: true },
+  { to: 'import', label: 'Import' },
+  { to: 'rules', label: 'Rules' },
+  { to: 'mappings', label: 'Mappings' },
+  { to: 'records', label: 'Records' },
+  { to: 'pivot', label: 'Pivot' },
+]
+
+export default function SourceTabs({ sources }) {
+  const { name } = useParams()
+  const sourceObj = sources.find(s => s.name === name)
+  const base = `/sources/${encodeURIComponent(name)}`
+
+  return (
+    <div className="flex flex-col h-full min-h-0">
+      <div className="px-6 pt-5 shrink-0">
+        <div className="flex items-center gap-3">
+          <Link to="/sources" className="text-xs text-gray-400 hover:text-gray-600">Sources</Link>
+          <span className="text-gray-300 text-xs">/</span>
+          <h1 className="text-xl font-semibold text-gray-800">{name}</h1>
+          {sourceObj?.config?.simplefin?.account_id && (
+            <span className="text-xs bg-blue-50 text-blue-600 border border-blue-100 rounded px-1.5 py-0.5">
+              bank feed
+            </span>
+          )}
+        </div>
+
+        <nav className="flex gap-1 mt-3 border-b border-gray-200">
+          {TABS.map(({ to, label, end }) => (
+            <NavLink
+              key={label}
+              to={to ? `${base}/${to}` : base}
+              end={end}
+              className={({ isActive }) =>
+                `text-sm px-3 py-1.5 -mb-px border-b-2 ${
+                  isActive
+                    ? 'border-blue-500 text-blue-600 font-medium'
+                    : 'border-transparent text-gray-500 hover:text-gray-700'
+                }`
+              }
+            >
+              {label}
+            </NavLink>
+          ))}
+        </nav>
+      </div>
+
+      <div className="flex-1 overflow-auto min-h-0">
+        <Outlet />
+      </div>
+    </div>
+  )
+}

ui/src/components/StatusBar.jsx

@@ -1,73 +0,0 @@
-import { NavLink } from 'react-router-dom'
-import useTheme from '../theme.jsx'
-
-export default function StatusBar({ sources = [], source, setSource, stacks = [], selectedStack, setSelectedStack }) {
-  const { dark, setDark } = useTheme()
-
-  return (
-    <div className="bg-white border-b border-gray-200 px-3 h-9 flex items-center gap-3 shrink-0 text-xs">
-      <span className="text-gray-400">Source</span>
-      <select
-        value={source || ''}
-        onChange={e => setSource(e.target.value)}
-        disabled={sources.length === 0}
-        className="border border-gray-200 rounded px-2 py-0.5 bg-white focus:outline-none focus:border-blue-400"
-      >
-        {sources.length === 0
-          ? <option value="">— no sources —</option>
-          : sources.map(s => <option key={s.name} value={s.name}>{s.name}</option>)}
-      </select>
-      <NavLink
-        to="/sources?new=1"
-        className="text-blue-400 hover:text-blue-600 leading-none"
-        title="New source"
-      >+</NavLink>
-
-      {stacks.length > 0 && (
-        <>
-          <span className="text-gray-200">|</span>
-          <span className="text-gray-400">Stacks</span>
-          {stacks.map(s => (
-            <button
-              key={s.name}
-              onClick={() => setSelectedStack(n => n === s.name ? null : s.name)}
-              className={`rounded px-2 py-0.5 border transition-colors ${
-                selectedStack === s.name
-                  ? 'bg-purple-50 border-purple-300 text-purple-700'
-                  : 'bg-white border-gray-200 text-gray-500 hover:border-gray-400'
-              }`}
-            >
-              {s.name}
-            </button>
-          ))}
-        </>
-      )}
-
-      <div className="ml-auto">
-        <button
-          onClick={() => setDark(d => !d)}
-          className="w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 text-gray-500"
-          title={dark ? 'Switch to light mode' : 'Switch to dark mode'}
-        >
-          {dark ? (
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <circle cx="12" cy="12" r="4"/>
-              <line x1="12" y1="2" x2="12" y2="5"/>
-              <line x1="12" y1="19" x2="12" y2="22"/>
-              <line x1="4.93" y1="4.93" x2="7.05" y2="7.05"/>
-              <line x1="16.95" y1="16.95" x2="19.07" y2="19.07"/>
-              <line x1="2" y1="12" x2="5" y2="12"/>
-              <line x1="19" y1="12" x2="22" y2="12"/>
-              <line x1="4.93" y1="19.07" x2="7.05" y2="16.95"/>
-              <line x1="16.95" y1="7.05" x2="19.07" y2="4.93"/>
-            </svg>
-          ) : (
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
-            </svg>
-          )}
-        </button>
-      </div>
-    </div>
-  )
-}

ui/src/pages/Bridge.jsx

@@ -0,0 +1,111 @@
+import { useState } from 'react'
+import { Link } from 'react-router-dom'
+import { api } from '../api'
+import Section from '../components/Section.jsx'
+
+// One SimpleFIN bridge covers every linked bank account, so connection state is
+// a bridge-level concern rather than something to hunt for source by source.
+export default function Bridge({ sources }) {
+  const [accounts, setAccounts] = useState(null)
+  const [errors, setErrors] = useState([])
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+
+  async function load() {
+    setLoading(true)
+    setError('')
+    try {
+      const res = await api.getSimpleFinAccounts()
+      setAccounts(res.accounts || [])
+      setErrors(res.errors || [])
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  // Which source, if any, pulls from each account
+  const sourceFor = (accountId) =>
+    sources.find(s => s.config?.simplefin?.account_id === accountId)
+
+  const total = (accounts || []).reduce((sum, a) => sum + (parseFloat(a.balance) || 0), 0)
+
+  return (
+    <div className="p-6 max-w-5xl space-y-4">
+      <div className="flex items-center justify-between mb-2">
+        <h1 className="text-xl font-semibold text-gray-800">Bridge</h1>
+        <button
+          onClick={load}
+          disabled={loading}
+          className="text-sm border border-gray-300 rounded px-3 py-1.5 text-gray-600 hover:bg-gray-50 hover:border-gray-400 disabled:opacity-50"
+        >
+          {loading ? 'Refreshing…' : 'Refresh'}
+        </button>
+      </div>
+
+      {error && (
+        <Section title="Not connected" description="Claim a setup token with manage.py option 10, then restart the service.">
+          <p className="text-xs text-red-500">{error}</p>
+        </Section>
+      )}
+
+      {errors.length > 0 && (
+        <div className="bg-orange-50 border border-orange-200 rounded p-3 text-xs text-orange-700 space-y-1">
+          {errors.map((e, i) => <div key={i}>{e}</div>)}
+        </div>
+      )}
+
+      {!accounts && !loading && !error && (
+        <p className="text-sm text-gray-400">Click Refresh to load balances from SimpleFIN.</p>
+      )}
+
+      {accounts && (
+        <Section
+          title="SimpleFIN accounts"
+          description="Every account behind the bridge credential, and which source pulls from it."
+        >
+          <table className="w-full text-xs">
+            <thead>
+              <tr className="text-left text-gray-400 border-b border-gray-100">
+                <th className="pb-1 font-medium">Account</th>
+                <th className="pb-1 font-medium">Institution</th>
+                <th className="pb-1 font-medium text-right">Balance</th>
+                <th className="pb-1 pl-4 font-medium">As of</th>
+                <th className="pb-1 font-medium">Source</th>
+              </tr>
+            </thead>
+            <tbody>
+              {accounts.map(a => {
+                const src = sourceFor(a.id)
+                return (
+                  <tr key={a.id} className="border-t border-gray-50">
+                    <td className="py-1.5 text-gray-700">{a.name}</td>
+                    <td className="py-1.5 text-gray-500">{a.organization}</td>
+                    <td className="py-1.5 text-right font-mono text-gray-700">{a.balance}</td>
+                    <td className="py-1.5 pl-4 text-gray-400">{a.balance_date}</td>
+                    <td className="py-1.5">
+                      {src
+                        ? <Link to={`/sources/${encodeURIComponent(src.name)}`} className="text-blue-500 hover:text-blue-700">{src.name}</Link>
+                        : <span className="text-gray-300">not linked</span>}
+                    </td>
+                  </tr>
+                )
+              })}
+            </tbody>
+            <tfoot>
+              <tr className="border-t border-gray-200">
+                <td className="pt-2 text-gray-600 font-medium" colSpan={2}>Total</td>
+                <td className="pt-2 text-right font-mono font-medium text-gray-800">
+                  {total.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+                </td>
+                <td colSpan={2}></td>
+              </tr>
+            </tfoot>
+          </table>
+          {accounts.length === 0 && <p className="text-xs text-gray-400">No accounts returned.</p>}
+        </Section>
+      )}
+    </div>
+  )
+}

ui/src/pages/ImportHub.jsx

@@ -0,0 +1,129 @@
+import { useState, useEffect } from 'react'
+import { Link } from 'react-router-dom'
+import { api } from '../api'
+
+// Importing is the frequent job; configuring a source is the rare one. This is
+// the top-level entry point for the frequent one — every source in one place,
+// with a sync button for anything on a bank feed.
+export default function ImportHub({ sources }) {
+  const [stats, setStats] = useState({})       // name -> stats
+  const [lastImport, setLastImport] = useState({})  // name -> ISO timestamp
+  const [busy, setBusy] = useState('')
+  const [results, setResults] = useState({})   // name -> message
+  const [errors, setErrors] = useState({})     // name -> message
+
+  useEffect(() => {
+    let cancelled = false
+    Promise.all(sources.map(s =>
+      api.getStats(s.name).then(st => [s.name, st]).catch(() => [s.name, null])
+    )).then(pairs => {
+      if (!cancelled) setStats(Object.fromEntries(pairs))
+    })
+    api.getAllImportLog().then(log => {
+      if (cancelled) return
+      const latest = {}
+      for (const entry of log) {
+        if (!latest[entry.source_name] || entry.imported_at > latest[entry.source_name]) {
+          latest[entry.source_name] = entry.imported_at
+        }
+      }
+      setLastImport(latest)
+    }).catch(() => {})
+    return () => { cancelled = true }
+  }, [sources])
+
+  async function sync(name) {
+    setBusy(name)
+    setErrors(e => ({ ...e, [name]: '' }))
+    setResults(r => ({ ...r, [name]: '' }))
+    try {
+      const res = await api.syncSimpleFin(name, { days: 10 })
+      setResults(r => ({
+        ...r,
+        [name]: `${res.imported} imported, ${res.duplicates} already had` +
+                (res.errors?.length ? ` — ${res.errors.join('; ')}` : ''),
+      }))
+      api.getStats(name).then(st => setStats(s => ({ ...s, [name]: st }))).catch(() => {})
+      api.getAllImportLog().then(log => {
+        const entry = log.find(l => l.source_name === name)
+        if (entry) setLastImport(l => ({ ...l, [name]: entry.imported_at }))
+      }).catch(() => {})
+    } catch (err) {
+      setErrors(e => ({ ...e, [name]: err.message }))
+    } finally {
+      setBusy('')
+    }
+  }
+
+  const feeds = sources.filter(s => s.config?.simplefin?.account_id)
+  const manual = sources.filter(s => !s.config?.simplefin?.account_id)
+
+  function Row({ s, isFeed }) {
+    const st = stats[s.name]
+    const when = lastImport[s.name]
+    return (
+      <div className="px-4 py-3 flex items-center gap-3 flex-wrap">
+        <div className="flex-1 min-w-40">
+          <Link to={`/sources/${encodeURIComponent(s.name)}/import`}
+            className="text-sm font-medium text-gray-800 hover:text-blue-600">
+            {s.name}
+          </Link>
+          <div className="text-xs text-gray-400">
+            {st ? `${st.total_records} records` : '—'}
+            {st && Number(st.pending_records) > 0 && ` · ${st.pending_records} untransformed`}
+            {when && ` · last import ${new Date(when).toLocaleDateString()}`}
+          </div>
+        </div>
+
+        {results[s.name] && <span className="text-xs text-green-600">{results[s.name]}</span>}
+        {errors[s.name] && <span className="text-xs text-red-500">{errors[s.name]}</span>}
+
+        {isFeed ? (
+          <button
+            onClick={() => sync(s.name)}
+            disabled={busy === s.name}
+            className="text-sm bg-blue-600 text-white px-3 py-1.5 rounded hover:bg-blue-700 disabled:opacity-50"
+          >
+            {busy === s.name ? 'Syncing…' : 'Sync'}
+          </button>
+        ) : (
+          <Link to={`/sources/${encodeURIComponent(s.name)}/import`}
+            className="text-sm border border-gray-300 rounded px-3 py-1.5 text-gray-600 hover:bg-gray-50 hover:border-gray-400">
+            Upload CSV
+          </Link>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className="p-6 max-w-4xl space-y-6">
+      <h1 className="text-xl font-semibold text-gray-800">Import</h1>
+
+      {feeds.length > 0 && (
+        <div>
+          <h2 className="text-sm font-semibold text-gray-700 mb-2">Bank feeds</h2>
+          <div className="bg-white border border-gray-200 rounded divide-y divide-gray-100">
+            {feeds.map(s => <Row key={s.name} s={s} isFeed />)}
+          </div>
+          <p className="text-xs text-gray-400 mt-1">Syncs pull the last 10 days; use a source&rsquo;s Import tab to backfill further.</p>
+        </div>
+      )}
+
+      {manual.length > 0 && (
+        <div>
+          <h2 className="text-sm font-semibold text-gray-700 mb-2">CSV sources</h2>
+          <div className="bg-white border border-gray-200 rounded divide-y divide-gray-100">
+            {manual.map(s => <Row key={s.name} s={s} isFeed={false} />)}
+          </div>
+        </div>
+      )}
+
+      {sources.length === 0 && <p className="text-sm text-gray-400">No sources yet.</p>}
+
+      <Link to="/log" className="inline-block text-xs text-blue-500 hover:text-blue-700">
+        Full import history →
+      </Link>
+    </div>
+  )
+}

ui/src/pages/SourceDetail.jsx

@@ -0,0 +1,424 @@
+import { useState, useEffect } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+import { api } from '../api'
+import Section from '../components/Section.jsx'
+import SampleTable from '../components/SampleTable.jsx'
+
+const FIELD_TYPES = ['text', 'numeric', 'date']
+
+export default function SourceDetail({ sources, setSources }) {
+  const { name: source } = useParams()
+  const navigate = useNavigate()
+  const [constraintFields, setConstraintFields] = useState('')
+  const [globalPicklist, setGlobalPicklist] = useState(true)
+  const [schemaFields, setSchemaFields] = useState([])
+  const [stats, setStats] = useState(null)
+  const [sampleRows, setSampleRows] = useState([])
+  const [saving, setSaving] = useState(false)
+  const [reprocessing, setReprocessing] = useState(false)
+  const [generating, setGenerating] = useState(false)
+  const [result, setResult] = useState('')
+  const [error, setError] = useState('')
+  const [viewName, setViewName] = useState('')
+  const [availableFields, setAvailableFields] = useState([])
+  const [fieldSort, setFieldSort] = useState({ col: 'key', dir: 'asc' })
+  const [bridgeAccounts, setBridgeAccounts] = useState(null)
+  const [bridgeLoading, setBridgeLoading] = useState(false)
+  const [bridgeError, setBridgeError] = useState('')
+
+  const sourceObj = sources.find(s => s.name === source)
+
+  useEffect(() => {
+    if (!sourceObj) return
+    setConstraintFields(sourceObj.constraint_fields?.join(', ') || '')
+    setGlobalPicklist(sourceObj.global_picklist !== false)
+    setSchemaFields((sourceObj.config?.fields || []).map((f, i) => ({ seq: i + 1, ...f })))
+    setViewName(sourceObj.config?.fields?.length ? `dfv.${sourceObj.name}` : '')
+    setResult('')
+    setError('')
+    setStats(null)
+    setAvailableFields([])
+    setSampleRows([])
+    setBridgeAccounts(null)
+    setBridgeError('')
+    api.getStats(sourceObj.name).then(setStats).catch(() => {})
+    api.getFields(sourceObj.name).then(setAvailableFields).catch(() => {})
+    api.getRecords(sourceObj.name, 50).then(rows => setSampleRows(rows.map(r => r.data).filter(Boolean))).catch(() => {})
+  }, [source, sourceObj?.name])
+
+
+  async function handleSave(e) {
+    e.preventDefault()
+    setSaving(true)
+    setError('')
+    try {
+      const constraint_fields = constraintFields.split(',').map(s => s.trim()).filter(Boolean)
+      const fields = [...schemaFields.filter(f => f.name)].sort((a, b) => (a.seq ?? 0) - (b.seq ?? 0))
+      const config = { ...(sourceObj.config || {}), fields }
+      await api.updateSource(sourceObj.name, { constraint_fields, config, global_picklist: globalPicklist })
+      if (fields.length > 0) {
+        const res = await api.generateView(sourceObj.name)
+        if (res.success) setViewName(res.view)
+      }
+      const updated = await api.getSources()
+      setSources(updated)
+      setResult('Saved.')
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  async function handleGenerateView() {
+    setGenerating(true)
+    setResult('')
+    setError('')
+    try {
+      const constraint_fields = constraintFields.split(',').map(s => s.trim()).filter(Boolean)
+      const fields = [...schemaFields.filter(f => f.name)].sort((a, b) => (a.seq ?? 0) - (b.seq ?? 0))
+      const config = { ...(sourceObj.config || {}), fields }
+      await api.updateSource(sourceObj.name, { constraint_fields, config, global_picklist: globalPicklist })
+      const res = await api.generateView(sourceObj.name)
+      if (res.success) {
+        setViewName(res.view)
+        setResult(`View created: ${res.view}`)
+      } else {
+        setError(res.error)
+      }
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setGenerating(false)
+    }
+  }
+
+  async function handleReprocess() {
+    if (!confirm(`Reprocess all records for "${sourceObj.name}"? This will clear and reapply all transformations.`)) return
+    setReprocessing(true)
+    setResult('')
+    setError('')
+    try {
+      const res = await api.reprocess(sourceObj.name)
+      setResult(`Reprocessed ${res.transformed} records.`)
+      api.getStats(sourceObj.name).then(setStats).catch(() => {})
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setReprocessing(false)
+    }
+  }
+
+  async function handleDelete() {
+    if (!confirm(`Delete source "${sourceObj.name}" and all its data?`)) return
+    try {
+      await api.deleteSource(sourceObj.name)
+      setSources(await api.getSources())
+      navigate('/sources')
+    } catch (err) {
+      alert(err.message)
+    }
+  }
+
+  // The bridge is an external call, so accounts are fetched on demand rather
+  // than on every visit to this page.
+  async function loadBridgeAccounts() {
+    setBridgeLoading(true)
+    setBridgeError('')
+    try {
+      const res = await api.getSimpleFinAccounts()
+      setBridgeAccounts(res.accounts || [])
+      if (res.errors?.length) setBridgeError(res.errors.join('; '))
+    } catch (err) {
+      setBridgeError(err.message)
+    } finally {
+      setBridgeLoading(false)
+    }
+  }
+
+  // Writes only config — constraint_fields and global_picklist are left NULL so
+  // update_source keeps whatever is already stored.
+  async function handleLinkAccount(accountId) {
+    setError('')
+    setResult('')
+    try {
+      const config = { ...(sourceObj.config || {}) }
+      if (accountId) {
+        config.simplefin = { ...(config.simplefin || {}), account_id: accountId }
+      } else {
+        delete config.simplefin
+      }
+      await api.updateSource(sourceObj.name, { config })
+      setSources(await api.getSources())
+      setResult(accountId ? 'Account linked.' : 'Account unlinked.')
+    } catch (err) {
+      setError(err.message)
+    }
+  }
+
+  if (!sourceObj) return <div className="p-6 text-sm text-gray-400">Source not found.</div>
+
+  return (
+    <div className="p-6 max-w-5xl space-y-4">
+          {stats && (
+            <div className="flex gap-4 text-xs">
+              <span className="text-gray-500"><span className="font-medium text-gray-800">{stats.total_records}</span> total</span>
+              <span className="text-gray-500"><span className="font-medium text-gray-800">{stats.transformed_records}</span> transformed</span>
+              <span className="text-gray-500"><span className="font-medium text-gray-800">{stats.pending_records}</span> pending</span>
+            </div>
+          )}
+
+          {/* Bank feed — link this source to a SimpleFIN account */}
+          <Section
+            title="Connection"
+            description="Where this source gets its data. Unlinked sources are filled by CSV upload on the Import page."
+          >
+            <div className="flex items-center gap-3 flex-wrap">
+              {bridgeAccounts === null ? (
+                <>
+                  <span className="text-xs text-gray-500 font-mono">
+                    {sourceObj.config?.simplefin?.account_id || 'not linked'}
+                  </span>
+                  <button
+                    onClick={loadBridgeAccounts}
+                    disabled={bridgeLoading}
+                    className="text-xs border border-gray-300 rounded px-2 py-1 text-gray-600 hover:bg-gray-50 hover:border-gray-400 disabled:opacity-50"
+                  >
+                    {bridgeLoading ? 'Loading…' : sourceObj.config?.simplefin?.account_id ? 'Change' : 'Link SimpleFIN account'}
+                  </button>
+                </>
+              ) : (
+                <select
+                  value={sourceObj.config?.simplefin?.account_id || ''}
+                  onChange={e => handleLinkAccount(e.target.value)}
+                  className="text-xs border border-gray-200 rounded px-2 py-1 bg-white text-gray-700"
+                >
+                  <option value="">Not linked</option>
+                  {bridgeAccounts.map(a => (
+                    <option key={a.id} value={a.id}>
+                      {a.name}{a.organization ? ` — ${a.organization}` : ''}{a.balance ? ` (${a.balance})` : ''}
+                    </option>
+                  ))}
+                </select>
+              )}
+            </div>
+
+            {bridgeError && <p className="text-xs text-orange-600 mt-1">{bridgeError}</p>}
+
+            {/* Dedupe depends on the transaction id being the constraint key */}
+            {sourceObj.config?.simplefin?.account_id
+              && sourceObj.constraint_fields?.join(',') !== 'id' && (
+              <p className="text-xs text-orange-600 mt-1">
+                Constraint fields are “{sourceObj.constraint_fields?.join(', ') || 'none'}” — a
+                bank feed should use “id” so re-syncs don’t duplicate rows.
+              </p>
+            )}
+          </Section>
+
+          {/* Unified field table */}
+          {availableFields.length > 0 && (
+            <Section
+              title="Fields and view"
+              description="Every field seen in this source's records. Tick which identify a row for deduplication, and which become columns in the generated view."
+            >
+              <table className="w-full text-xs">
+                <thead>
+                  <tr className="text-left text-gray-400 border-b border-gray-100">
+                    {[
+                      { col: 'key', label: 'Key' },
+                      { col: 'origin', label: 'Origin' },
+                      { col: 'type', label: 'Type' },
+                      { col: 'constraint', label: 'Constraint', center: true },
+                      { col: 'inview', label: 'In view', center: true },
+                      { col: 'seq', label: 'Seq', center: true },
+                    ].map(({ col, label, center }) => (
+                      <th
+                        key={col}
+                        onClick={() => setFieldSort(s => ({ col, dir: s.col === col && s.dir === 'asc' ? 'desc' : 'asc' }))}
+                        className={`pb-1 font-medium cursor-pointer select-none hover:text-gray-600 ${center ? 'text-center' : ''}`}
+                      >
+                        {label}
+                        <span className="ml-1 text-gray-300">
+                          {fieldSort.col === col ? (fieldSort.dir === 'asc' ? '▲' : '▼') : '⇅'}
+                        </span>
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody>
+                  {[...availableFields].sort((a, b) => {
+                    const constraintList = constraintFields.split(',').map(s => s.trim())
+                    const aSchema = schemaFields.find(sf => sf.name === a.key)
+                    const bSchema = schemaFields.find(sf => sf.name === b.key)
+                    let av, bv
+                    if (fieldSort.col === 'key') { av = a.key; bv = b.key }
+                    else if (fieldSort.col === 'origin') { av = a.origins.join(','); bv = b.origins.join(',') }
+                    else if (fieldSort.col === 'type') { av = aSchema?.type || ''; bv = bSchema?.type || '' }
+                    else if (fieldSort.col === 'constraint') { av = constraintList.includes(a.key) ? 0 : 1; bv = constraintList.includes(b.key) ? 0 : 1 }
+                    else if (fieldSort.col === 'inview') { av = aSchema ? 0 : 1; bv = bSchema ? 0 : 1 }
+                    else if (fieldSort.col === 'seq') { av = aSchema?.seq ?? 999; bv = bSchema?.seq ?? 999 }
+                    if (av < bv) return fieldSort.dir === 'asc' ? -1 : 1
+                    if (av > bv) return fieldSort.dir === 'asc' ? 1 : -1
+                    return 0
+                  }).map(f => {
+                    const isRaw = f.origins.includes('raw')
+                    const constraintChecked = constraintFields.split(',').map(s => s.trim()).includes(f.key)
+                    const schemaEntry = schemaFields.find(sf => sf.name === f.key)
+                    const inView = !!schemaEntry
+                    return (
+                      <tr key={f.key} className="border-t border-gray-50">
+                        <td className="py-1 font-mono text-gray-700">{f.key}</td>
+                        <td className="py-1 text-gray-400">{f.origins.join(', ')}</td>
+                        <td className="py-1">
+                          {inView && (
+                            <div className="flex gap-1 items-center">
+                              <select
+                                className="border border-gray-200 rounded px-1 py-0.5 text-xs focus:outline-none focus:border-blue-400"
+                                value={schemaEntry.type}
+                                onChange={e => setSchemaFields(sf =>
+                                  sf.map(s => s.name === f.key ? { ...s, type: e.target.value } : s)
+                                )}
+                              >
+                                {FIELD_TYPES.map(t => <option key={t} value={t}>{t}</option>)}
+                              </select>
+                              <input
+                                className="border border-gray-200 rounded px-1 py-0.5 text-xs font-mono w-32 focus:outline-none focus:border-blue-400"
+                                value={schemaEntry.expression || ''}
+                                placeholder="{field} * {sign}"
+                                onChange={e => setSchemaFields(sf =>
+                                  sf.map(s => s.name === f.key ? { ...s, expression: e.target.value || undefined } : s)
+                                )}
+                              />
+                            </div>
+                          )}
+                        </td>
+                        <td className="py-1 text-center">
+                          {isRaw && (
+                            <input
+                              type="checkbox"
+                              checked={constraintChecked}
+                              onChange={e => {
+                                const current = constraintFields.split(',').map(s => s.trim()).filter(Boolean)
+                                const next = e.target.checked
+                                  ? [...current, f.key]
+                                  : current.filter(k => k !== f.key)
+                                setConstraintFields(next.join(', '))
+                              }}
+                            />
+                          )}
+                        </td>
+                        <td className="py-1 text-center">
+                          <input
+                            type="checkbox"
+                            checked={inView}
+                            onChange={e => {
+                              if (e.target.checked) {
+                                const nextSeq = schemaFields.length > 0
+                                  ? Math.max(...schemaFields.map(s => s.seq ?? 0)) + 1
+                                  : 1
+                                setSchemaFields(sf => [...sf, { name: f.key, type: 'text', seq: nextSeq }])
+                              } else {
+                                setSchemaFields(sf => sf.filter(s => s.name !== f.key))
+                              }
+                            }}
+                          />
+                        </td>
+                        <td className="py-1 text-center">
+                          {inView && (
+                            <input
+                              type="number"
+                              className="w-12 border border-gray-200 rounded px-1 py-0.5 text-xs text-center focus:outline-none focus:border-blue-400"
+                              value={schemaEntry.seq ?? ''}
+                              onChange={e => setSchemaFields(sf =>
+                                sf.map(s => s.name === f.key ? { ...s, seq: parseInt(e.target.value) || 0 } : s)
+                              )}
+                            />
+                          )}
+                        </td>
+                      </tr>
+                    )
+                  })}
+                </tbody>
+              </table>
+
+              <div className="flex items-center gap-3 pt-3 mt-2 border-t border-gray-100 flex-wrap">
+                <label className="flex items-center gap-1.5 text-xs text-gray-500 cursor-pointer">
+                  <input type="checkbox" checked={globalPicklist} onChange={e => setGlobalPicklist(e.target.checked)} />
+                  Global picklist
+                </label>
+                <form onSubmit={handleSave}>
+                  <button type="submit" disabled={saving}
+                    className="text-sm bg-blue-600 text-white px-3 py-1.5 rounded hover:bg-blue-700 disabled:opacity-50">
+                    {saving ? 'Saving…' : 'Save'}
+                  </button>
+                </form>
+                {schemaFields.length > 0 && (
+                  <>
+                    <button
+                      onClick={handleGenerateView}
+                      disabled={generating}
+                      className="text-xs bg-green-600 text-white px-2 py-1.5 rounded hover:bg-green-700 disabled:opacity-50"
+                    >
+                      {generating ? 'Generating…' : 'Generate view'}
+                    </button>
+                    {viewName && (
+                      <code className="text-xs bg-gray-100 px-2 py-1 rounded text-gray-600">{viewName}</code>
+                    )}
+                  </>
+                )}
+              </div>
+            </Section>
+          )}
+
+          {/* Save button when no fields loaded yet */}
+          {availableFields.length === 0 && (
+            <Section
+              title="Fields and view"
+              description="No fields yet — they are discovered from imported records. Import or sync data first."
+            >
+              <div className="flex items-center gap-3">
+                <label className="flex items-center gap-1.5 text-xs text-gray-500 cursor-pointer">
+                  <input type="checkbox" checked={globalPicklist} onChange={e => setGlobalPicklist(e.target.checked)} />
+                  Global picklist
+                </label>
+                <form onSubmit={handleSave}>
+                  <button type="submit" disabled={saving}
+                    className="text-sm bg-blue-600 text-white px-3 py-1.5 rounded hover:bg-blue-700 disabled:opacity-50">
+                    {saving ? 'Saving…' : 'Save'}
+                  </button>
+                </form>
+              </div>
+            </Section>
+          )}
+
+          {sampleRows.length > 0 && (
+            <Section title="Sample rows" description="The most recent imported records, as stored.">
+              <SampleTable rows={sampleRows} />
+            </Section>
+          )}
+
+          <Section title="Maintenance">
+            <div className="flex items-center gap-3">
+              <button
+                onClick={handleReprocess}
+                disabled={reprocessing}
+                className="text-sm bg-orange-500 text-white px-3 py-1.5 rounded hover:bg-orange-600 disabled:opacity-50"
+              >
+                {reprocessing ? 'Reprocessing…' : 'Reprocess all records'}
+              </button>
+              <span className="text-xs text-gray-400">Clears and reruns all transformation rules</span>
+            </div>
+          </Section>
+
+          {result && <p className="text-xs text-green-600">{result}</p>}
+          {error && <p className="text-xs text-red-500">{error}</p>}
+
+          <Section title="Delete source" description="Removes the source and every record, rule, and mapping belonging to it.">
+            <button onClick={handleDelete}
+              className="text-sm border border-red-200 text-red-500 px-3 py-1.5 rounded hover:bg-red-50 hover:border-red-300">
+              Delete source
+            </button>
+          </Section>
+    </div>
+  )
+}

ui/src/pages/SourceList.jsx

@@ -0,0 +1,388 @@
+import { useState, useRef } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { api } from '../api'
+import SampleTable from '../components/SampleTable.jsx'
+
+const FIELD_TYPES = ['text', 'numeric', 'date']
+
+// Ticked into the view by default when a bank feed sample contains them
+const FEED_DEFAULT_VIEW = ['date', 'description', 'payee', 'amount']
+
+export default function SourceList({ sources, setSources, setSource }) {
+  const navigate = useNavigate()
+  const [creating, setCreating] = useState(false)
+  const [form, setForm] = useState({ name: '', constraint_fields: '', fields: [], schema: [], importSample: true })
+  const [createError, setCreateError] = useState('')
+  const [createLoading, setCreateLoading] = useState(false)
+  const [csvFileName, setCsvFileName] = useState('')
+  const [bridgeAccounts, setBridgeAccounts] = useState(null)
+  const [bridgeLoading, setBridgeLoading] = useState(false)
+  const [bridgeError, setBridgeError] = useState('')
+  const [sampleInfo, setSampleInfo] = useState(null)
+  const fileRef = useRef()
+
+  async function loadBridgeAccounts() {
+    setBridgeLoading(true)
+    setBridgeError('')
+    try {
+      const res = await api.getSimpleFinAccounts()
+      setBridgeAccounts(res.accounts || [])
+      if (res.errors?.length) setBridgeError(res.errors.join('; '))
+    } catch (err) {
+      setBridgeError(err.message)
+    } finally {
+      setBridgeLoading(false)
+    }
+  }
+
+  // Writes only config — constraint_fields and global_picklist are left NULL so
+  // update_source keeps whatever is already stored.
+  async function handleSelectFeedAccount(accountId) {
+    if (!accountId) {
+      // Clearing the feed only resets fields we populated, not a loaded CSV
+      setForm(f => csvFileName ? { ...f, simplefin_account_id: '' } : {
+        ...f, simplefin_account_id: '', fields: [], schema: [], constraint_fields: '', sampleRows: [],
+      })
+      setSampleInfo(null)
+      return
+    }
+
+    setForm(f => ({ ...f, simplefin_account_id: accountId }))
+    setBridgeLoading(true)
+    setBridgeError('')
+    try {
+      const res = await api.getSimpleFinSample(accountId)
+      const names = res.fields.map(f => f.name)
+      setSampleInfo({ fetched: res.fetched, fields: res.fields.length })
+      if (res.errors?.length) setBridgeError(res.errors.join('; '))
+      setForm(f => ({
+        ...f,
+        fields: res.fields,
+        sampleRows: res.sampleRows || [],
+        schema: FEED_DEFAULT_VIEW.filter(n => names.includes(n)).map((name, i) => ({
+          name, type: res.fields.find(sf => sf.name === name).type, seq: i + 1,
+        })),
+        // Only default the constraint if the sample actually has an id
+        constraint_fields: f.constraint_fields || (names.includes('id') ? 'id' : ''),
+      }))
+    } catch (err) {
+      setBridgeError(err.message)
+    } finally {
+      setBridgeLoading(false)
+    }
+  }
+
+  async function handleSuggest(e) {
+    const file = e.target.files[0]
+    if (!file) return
+    setCsvFileName(file.name)
+    try {
+      const suggestion = await api.suggestSource(file)
+      setForm(f => ({
+        ...f,
+        fields: suggestion.fields,
+        constraint_fields: '',
+        schema: suggestion.fields.map(f => ({ name: f.name, type: f.type, seq: suggestion.fields.indexOf(f) + 1 })),
+        sampleRows: suggestion.sampleRows || []
+      }))
+    } catch (err) {
+      setCreateError(err.message)
+    }
+  }
+
+  async function handleCreate(e) {
+    e.preventDefault()
+    setCreateError('')
+    const constraintArr = form.constraint_fields.split(',').map(s => s.trim()).filter(Boolean)
+    if (!form.name || constraintArr.length === 0) {
+      setCreateError('Name and at least one constraint field required')
+      return
+    }
+    setCreateLoading(true)
+    try {
+      const config = form.schema.length > 0 ? { fields: form.schema } : {}
+      if (form.simplefin_account_id) {
+        config.simplefin = { account_id: form.simplefin_account_id }
+      }
+      await api.createSource({ name: form.name, constraint_fields: constraintArr, config, global_picklist: form.global_picklist !== false })
+      if (form.schema.length > 0) {
+        await api.generateView(form.name)
+      }
+      if (form.importSample && fileRef.current?.files[0]) {
+        await api.importCSV(form.name, fileRef.current.files[0])
+      }
+      const updated = await api.getSources()
+      setSources(updated)
+      setSource(form.name)
+      setForm({ name: '', constraint_fields: '', fields: [], schema: [], importSample: true, simplefin_account_id: '' })
+      setCreating(false)
+    } catch (err) {
+      setCreateError(err.message)
+    } finally {
+      setCreateLoading(false)
+    }
+  }
+
+  return (
+    <div className="p-6 max-w-5xl">
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-xl font-semibold text-gray-800">Sources</h1>
+        {!creating && (
+          <button
+            onClick={() => { setCreating(true); setCreateError('') }}
+            className="text-sm bg-blue-600 text-white px-3 py-1.5 rounded hover:bg-blue-700"
+          >
+            New source
+          </button>
+        )}
+      </div>
+
+      {!creating && sources.length === 0 && (
+        <p className="text-sm text-gray-400">No sources yet. Create one to get started.</p>
+      )}
+
+      {!creating && sources.length > 0 && (
+        <div className="bg-white border border-gray-200 rounded divide-y divide-gray-100">
+          {sources.map(s => (
+            <button
+              key={s.name}
+              onClick={() => { setSource(s.name); navigate(`/sources/${encodeURIComponent(s.name)}`) }}
+              className="w-full text-left px-4 py-3 hover:bg-gray-50 flex items-center gap-3"
+            >
+              <span className="text-sm font-medium text-gray-800 flex-1">{s.name}</span>
+              {s.config?.simplefin?.account_id && (
+                <span className="text-xs bg-blue-50 text-blue-600 border border-blue-100 rounded px-1.5 py-0.5">
+                  bank feed
+                </span>
+              )}
+              <span className="text-xs text-gray-400">
+                {(s.constraint_fields || []).join(', ') || 'no constraint'}
+              </span>
+              <span className="text-gray-300">›</span>
+            </button>
+          ))}
+        </div>
+      )}
+
+      {creating && (
+        <div className="bg-white border border-gray-200 rounded p-4">
+          <h2 className="text-sm font-semibold text-gray-700 mb-3">New source</h2>
+
+          <div className="mb-4">
+            <input type="file" accept=".csv" ref={fileRef} onChange={handleSuggest} className="hidden" />
+            <button
+              type="button"
+              onClick={() => fileRef.current?.click()}
+              className="text-sm border border-gray-300 rounded px-3 py-1.5 text-gray-600 hover:bg-gray-50 hover:border-gray-400"
+            >
+              {csvFileName || 'Choose CSV…'}
+            </button>
+          </div>
+
+          <form onSubmit={handleCreate} className="space-y-3">
+            <div>
+              <label className="text-xs text-gray-500 block mb-1">Source name</label>
+              <input
+                className="w-full border border-gray-200 rounded px-3 py-1.5 text-sm focus:outline-none focus:border-blue-400"
+                value={form.name}
+                onChange={e => setForm(f => ({ ...f, name: e.target.value }))}
+                placeholder="e.g. chase, dcard"
+              />
+            </div>
+
+            {/* Bank feed — optional; picking an account defaults the constraint
+                field to the transaction id, which is what dedupe needs */}
+            <div>
+              <label className="text-xs text-gray-500 block mb-1">Bank feed (optional)</label>
+              <div className="flex items-center gap-3 flex-wrap">
+                {bridgeAccounts === null ? (
+                  <button
+                    type="button"
+                    onClick={loadBridgeAccounts}
+                    disabled={bridgeLoading}
+                    className="text-sm border border-gray-300 rounded px-3 py-1.5 text-gray-600 hover:bg-gray-50 hover:border-gray-400 disabled:opacity-50"
+                  >
+                    {bridgeLoading ? 'Loading…' : 'Link SimpleFIN account…'}
+                  </button>
+                ) : (
+                  <select
+                    value={form.simplefin_account_id || ''}
+                    onChange={e => handleSelectFeedAccount(e.target.value)}
+                    className="text-sm border border-gray-200 rounded px-3 py-1.5 bg-white text-gray-700"
+                  >
+                    <option value="">No bank feed — CSV import</option>
+                    {bridgeAccounts.map(a => (
+                      <option key={a.id} value={a.id}>
+                        {a.name}{a.organization ? ` — ${a.organization}` : ''}{a.balance ? ` (${a.balance})` : ''}
+                      </option>
+                    ))}
+                  </select>
+                )}
+              </div>
+              {bridgeError && <p className="text-xs text-orange-600 mt-1">{bridgeError}</p>}
+
+              {form.simplefin_account_id && sampleInfo && (
+                <div className="mt-2 bg-blue-50 border border-blue-100 rounded p-3 text-xs text-gray-600 space-y-1">
+                  <p>
+                    Read {sampleInfo.fetched} transaction{sampleInfo.fetched === 1 ? '' : 's'} from this
+                    account and found {sampleInfo.fields} field{sampleInfo.fields === 1 ? '' : 's'}.
+                    The table below lists what this account actually returns — fields it never sends
+                    won&rsquo;t appear.
+                  </p>
+                  {form.constraint_fields === 'id' && (
+                    <p>
+                      <span className="font-mono text-gray-700">id</span> is checked as the constraint
+                      field because it is SimpleFIN&rsquo;s own transaction identifier. Syncs pull an
+                      overlapping window of days, so the same transaction arrives more than once —
+                      matching on <span className="font-mono text-gray-700">id</span> skips the repeats
+                      while still keeping genuinely separate charges that share a date, amount, and
+                      description.
+                    </p>
+                  )}
+                  {sampleInfo.fetched === 0 && (
+                    <p className="text-orange-600">
+                      No transactions came back, so there was nothing to infer fields from. Sync first,
+                      then set the fields up here.
+                    </p>
+                  )}
+                </div>
+              )}
+            </div>
+
+            {form.fields.length > 0 && (
+              <div className="pt-2 border-t border-gray-100 space-y-2">
+                <table className="w-full text-xs">
+                  <thead>
+                    <tr className="text-left text-gray-400 border-b border-gray-100">
+                      <th className="pb-1 font-medium">Key</th>
+                      <th className="pb-1 font-medium">Type</th>
+                      <th className="pb-1 font-medium text-center">Constraint</th>
+                      <th className="pb-1 font-medium text-center">In view</th>
+                      <th className="pb-1 font-medium text-center">Seq</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {form.fields.map(f => {
+                      const schemaEntry = form.schema.find(s => s.name === f.name)
+                      const inView = !!schemaEntry
+                      const currentType = schemaEntry?.type || f.type
+                      return (
+                        <tr key={f.name} className="border-t border-gray-50">
+                          <td className="py-1 font-mono text-gray-700">{f.name}</td>
+                          <td className="py-1">
+                            {inView && (
+                              <select
+                                className="border border-gray-200 rounded px-1 py-0.5 text-xs focus:outline-none focus:border-blue-400"
+                                value={currentType}
+                                onChange={e => setForm(ff => ({
+                                  ...ff,
+                                  schema: ff.schema.map(s => s.name === f.name ? { ...s, type: e.target.value } : s)
+                                }))}
+                              >
+                                {FIELD_TYPES.map(t => <option key={t} value={t}>{t}</option>)}
+                              </select>
+                            )}
+                          </td>
+                          <td className="py-1 text-center">
+                            <input
+                              type="checkbox"
+                              checked={form.constraint_fields.split(',').map(s => s.trim()).includes(f.name)}
+                              onChange={e => {
+                                const current = form.constraint_fields.split(',').map(s => s.trim()).filter(Boolean)
+                                const next = e.target.checked
+                                  ? [...current, f.name]
+                                  : current.filter(n => n !== f.name)
+                                setForm(ff => ({ ...ff, constraint_fields: next.join(', ') }))
+                              }}
+                            />
+                          </td>
+                          <td className="py-1 text-center">
+                            <input
+                              type="checkbox"
+                              checked={inView}
+                              onChange={e => {
+                                if (e.target.checked) {
+                                  const nextSeq = form.schema.length > 0
+                                    ? Math.max(...form.schema.map(s => s.seq ?? 0)) + 1
+                                    : 1
+                                  setForm(ff => ({ ...ff, schema: [...ff.schema, { name: f.name, type: f.type, seq: nextSeq }] }))
+                                } else {
+                                  setForm(ff => ({ ...ff, schema: ff.schema.filter(s => s.name !== f.name) }))
+                                }
+                              }}
+                            />
+                          </td>
+                          <td className="py-1 text-center">
+                            {inView && (
+                              <input
+                                type="number"
+                                className="w-12 border border-gray-200 rounded px-1 py-0.5 text-xs text-center focus:outline-none focus:border-blue-400"
+                                value={schemaEntry.seq ?? ''}
+                                onChange={e => setForm(ff => ({
+                                  ...ff,
+                                  schema: ff.schema.map(s => s.name === f.name ? { ...s, seq: parseInt(e.target.value) || 0 } : s)
+                                }))}
+                              />
+                            )}
+                          </td>
+                        </tr>
+                      )
+                    })}
+                  </tbody>
+                </table>
+                <SampleTable rows={form.sampleRows || []} />
+              </div>
+            )}
+
+            {form.fields.length === 0 && (
+              <div>
+                <label className="text-xs text-gray-500 block mb-1">Constraint fields (comma-separated)</label>
+                <input
+                  className="w-full border border-gray-200 rounded px-3 py-1.5 text-sm focus:outline-none focus:border-blue-400"
+                  value={form.constraint_fields}
+                  onChange={e => setForm(f => ({ ...f, constraint_fields: e.target.value }))}
+                  placeholder="e.g. date, amount, description"
+                />
+              </div>
+            )}
+
+            <div className="flex gap-4">
+              <label className="flex items-center gap-1.5 text-xs text-gray-500 cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={form.global_picklist !== false}
+                  onChange={e => setForm(f => ({ ...f, global_picklist: e.target.checked }))}
+                />
+                Global picklist
+              </label>
+              {form.fields.length > 0 && (
+                <label className="flex items-center gap-1.5 text-xs text-gray-500 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={form.importSample !== false}
+                    onChange={e => setForm(f => ({ ...f, importSample: e.target.checked }))}
+                  />
+                  Import sample data
+                </label>
+              )}
+            </div>
+
+            {createError && <p className="text-xs text-red-500">{createError}</p>}
+
+            <div className="flex gap-2">
+              <button type="submit" disabled={createLoading}
+                className="text-sm bg-blue-600 text-white px-3 py-1.5 rounded hover:bg-blue-700 disabled:opacity-50">
+                {createLoading ? 'Creating…' : 'Create'}
+              </button>
+              <button type="button"
+                onClick={() => { setCreating(false); setCreateError(''); setForm({ name: '', constraint_fields: '', fields: [], schema: [] }) }}
+                className="text-sm text-gray-500 px-3 py-1.5 rounded hover:bg-gray-100">
+                Cancel
+              </button>
+            </div>
+          </form>
+        </div>
+      )}
+    </div>
+  )
+}

ui/src/pages/Sources.jsx

@@ -1,780 +0,0 @@
-import { useState, useEffect, useRef } from 'react'
-import { useSearchParams } from 'react-router-dom'
-import { api } from '../api'
-
-const FIELD_TYPES = ['text', 'numeric', 'date']
-
-// Ticked into the view by default when a bank feed sample contains them
-const FEED_DEFAULT_VIEW = ['date', 'description', 'payee', 'amount']
-
-function SampleTable({ rows }) {
-  if (!rows || rows.length === 0) return null
-  const cols = Object.keys(rows[0])
-  return (
-    <div className="overflow-auto border border-gray-100 rounded bg-gray-50 max-h-36">
-      <table className="text-xs w-full">
-        <thead>
-          <tr className="text-left text-gray-400 border-b border-gray-100 bg-gray-50 sticky top-0">
-            {cols.map(c => <th key={c} className="px-2 py-1 font-medium whitespace-nowrap">{c}</th>)}
-          </tr>
-        </thead>
-        <tbody>
-          {rows.map((row, i) => (
-            <tr key={i} className="border-t border-gray-100">
-              {cols.map(c => (
-                <td key={c} className="px-2 py-1 whitespace-nowrap text-gray-600 max-w-32 truncate font-mono">
-                  {row[c] == null ? <span className="text-gray-300">—</span> : String(row[c])}
-                </td>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  )
-}
-
-export default function Sources({ source, sources, setSources, setSource }) {
-  const [constraintFields, setConstraintFields] = useState('')
-  const [globalPicklist, setGlobalPicklist] = useState(true)
-  const [schemaFields, setSchemaFields] = useState([])
-  const [stats, setStats] = useState(null)
-  const [sampleRows, setSampleRows] = useState([])
-  const [saving, setSaving] = useState(false)
-  const [reprocessing, setReprocessing] = useState(false)
-  const [generating, setGenerating] = useState(false)
-  const [result, setResult] = useState('')
-  const [error, setError] = useState('')
-  const [viewName, setViewName] = useState('')
-  const [availableFields, setAvailableFields] = useState([])
-  const [fieldSort, setFieldSort] = useState({ col: 'key', dir: 'asc' })
-  const [creating, setCreating] = useState(false)
-  const [form, setForm] = useState({ name: '', constraint_fields: '', fields: [], schema: [], importSample: true })
-  const [createError, setCreateError] = useState('')
-  const [createLoading, setCreateLoading] = useState(false)
-  const [csvFileName, setCsvFileName] = useState('')
-  const [bridgeAccounts, setBridgeAccounts] = useState(null)
-  const [bridgeLoading, setBridgeLoading] = useState(false)
-  const [bridgeError, setBridgeError] = useState('')
-  const [sampleInfo, setSampleInfo] = useState(null)
-  const fileRef = useRef()
-
-  const [searchParams, setSearchParams] = useSearchParams()
-  const sourceObj = sources.find(s => s.name === source)
-
-  useEffect(() => {
-    if (searchParams.get('new') === '1') {
-      setCreating(true)
-      setSearchParams({})
-    }
-  }, [searchParams])
-
-  useEffect(() => {
-    if (!sourceObj) return
-    setConstraintFields(sourceObj.constraint_fields?.join(', ') || '')
-    setGlobalPicklist(sourceObj.global_picklist !== false)
-    setSchemaFields((sourceObj.config?.fields || []).map((f, i) => ({ seq: i + 1, ...f })))
-    setViewName(sourceObj.config?.fields?.length ? `dfv.${sourceObj.name}` : '')
-    setResult('')
-    setError('')
-    setStats(null)
-    setAvailableFields([])
-    setSampleRows([])
-    setBridgeAccounts(null)
-    setBridgeError('')
-    api.getStats(sourceObj.name).then(setStats).catch(() => {})
-    api.getFields(sourceObj.name).then(setAvailableFields).catch(() => {})
-    api.getRecords(sourceObj.name, 50).then(rows => setSampleRows(rows.map(r => r.data).filter(Boolean))).catch(() => {})
-  }, [source, sourceObj?.name])
-
-  async function handleSave(e) {
-    e.preventDefault()
-    setSaving(true)
-    setError('')
-    try {
-      const constraint_fields = constraintFields.split(',').map(s => s.trim()).filter(Boolean)
-      const fields = [...schemaFields.filter(f => f.name)].sort((a, b) => (a.seq ?? 0) - (b.seq ?? 0))
-      const config = { ...(sourceObj.config || {}), fields }
-      await api.updateSource(sourceObj.name, { constraint_fields, config, global_picklist: globalPicklist })
-      if (fields.length > 0) {
-        const res = await api.generateView(sourceObj.name)
-        if (res.success) setViewName(res.view)
-      }
-      const updated = await api.getSources()
-      setSources(updated)
-      setResult('Saved.')
-    } catch (err) {
-      setError(err.message)
-    } finally {
-      setSaving(false)
-    }
-  }
-
-  async function handleGenerateView() {
-    setGenerating(true)
-    setResult('')
-    setError('')
-    try {
-      const constraint_fields = constraintFields.split(',').map(s => s.trim()).filter(Boolean)
-      const fields = [...schemaFields.filter(f => f.name)].sort((a, b) => (a.seq ?? 0) - (b.seq ?? 0))
-      const config = { ...(sourceObj.config || {}), fields }
-      await api.updateSource(sourceObj.name, { constraint_fields, config, global_picklist: globalPicklist })
-      const res = await api.generateView(sourceObj.name)
-      if (res.success) {
-        setViewName(res.view)
-        setResult(`View created: ${res.view}`)
-      } else {
-        setError(res.error)
-      }
-    } catch (err) {
-      setError(err.message)
-    } finally {
-      setGenerating(false)
-    }
-  }
-
-  async function handleReprocess() {
-    if (!confirm(`Reprocess all records for "${sourceObj.name}"? This will clear and reapply all transformations.`)) return
-    setReprocessing(true)
-    setResult('')
-    setError('')
-    try {
-      const res = await api.reprocess(sourceObj.name)
-      setResult(`Reprocessed ${res.transformed} records.`)
-      api.getStats(sourceObj.name).then(setStats).catch(() => {})
-    } catch (err) {
-      setError(err.message)
-    } finally {
-      setReprocessing(false)
-    }
-  }
-
-  async function handleDelete() {
-    if (!confirm(`Delete source "${sourceObj.name}" and all its data?`)) return
-    try {
-      await api.deleteSource(sourceObj.name)
-      const updated = await api.getSources()
-      setSources(updated)
-      if (updated.length > 0) setSource(updated[0].name)
-      else setSource('')
-    } catch (err) {
-      alert(err.message)
-    }
-  }
-
-  // The bridge is an external call, so accounts are fetched on demand rather
-  // than on every visit to this page.
-  async function loadBridgeAccounts() {
-    setBridgeLoading(true)
-    setBridgeError('')
-    try {
-      const res = await api.getSimpleFinAccounts()
-      setBridgeAccounts(res.accounts || [])
-      if (res.errors?.length) setBridgeError(res.errors.join('; '))
-    } catch (err) {
-      setBridgeError(err.message)
-    } finally {
-      setBridgeLoading(false)
-    }
-  }
-
-  // Writes only config — constraint_fields and global_picklist are left NULL so
-  // update_source keeps whatever is already stored.
-  async function handleLinkAccount(accountId) {
-    setError('')
-    setResult('')
-    try {
-      const config = { ...(sourceObj.config || {}) }
-      if (accountId) {
-        config.simplefin = { ...(config.simplefin || {}), account_id: accountId }
-      } else {
-        delete config.simplefin
-      }
-      await api.updateSource(sourceObj.name, { config })
-      setSources(await api.getSources())
-      setResult(accountId ? 'Account linked.' : 'Account unlinked.')
-    } catch (err) {
-      setError(err.message)
-    }
-  }
-
-  // Picking a feed account samples its real transactions and fills the field
-  // table from them — the same path a CSV takes through /suggest.
-  async function handleSelectFeedAccount(accountId) {
-    if (!accountId) {
-      // Clearing the feed only resets fields we populated, not a loaded CSV
-      setForm(f => csvFileName ? { ...f, simplefin_account_id: '' } : {
-        ...f, simplefin_account_id: '', fields: [], schema: [], constraint_fields: '', sampleRows: [],
-      })
-      setSampleInfo(null)
-      return
-    }
-
-    setForm(f => ({ ...f, simplefin_account_id: accountId }))
-    setBridgeLoading(true)
-    setBridgeError('')
-    try {
-      const res = await api.getSimpleFinSample(accountId)
-      const names = res.fields.map(f => f.name)
-      setSampleInfo({ fetched: res.fetched, fields: res.fields.length })
-      if (res.errors?.length) setBridgeError(res.errors.join('; '))
-      setForm(f => ({
-        ...f,
-        fields: res.fields,
-        sampleRows: res.sampleRows || [],
-        schema: FEED_DEFAULT_VIEW.filter(n => names.includes(n)).map((name, i) => ({
-          name, type: res.fields.find(sf => sf.name === name).type, seq: i + 1,
-        })),
-        // Only default the constraint if the sample actually has an id
-        constraint_fields: f.constraint_fields || (names.includes('id') ? 'id' : ''),
-      }))
-    } catch (err) {
-      setBridgeError(err.message)
-    } finally {
-      setBridgeLoading(false)
-    }
-  }
-
-  async function handleSuggest(e) {
-    const file = e.target.files[0]
-    if (!file) return
-    setCsvFileName(file.name)
-    try {
-      const suggestion = await api.suggestSource(file)
-      setForm(f => ({
-        ...f,
-        fields: suggestion.fields,
-        constraint_fields: '',
-        schema: suggestion.fields.map(f => ({ name: f.name, type: f.type, seq: suggestion.fields.indexOf(f) + 1 })),
-        sampleRows: suggestion.sampleRows || []
-      }))
-    } catch (err) {
-      setCreateError(err.message)
-    }
-  }
-
-  async function handleCreate(e) {
-    e.preventDefault()
-    setCreateError('')
-    const constraintArr = form.constraint_fields.split(',').map(s => s.trim()).filter(Boolean)
-    if (!form.name || constraintArr.length === 0) {
-      setCreateError('Name and at least one constraint field required')
-      return
-    }
-    setCreateLoading(true)
-    try {
-      const config = form.schema.length > 0 ? { fields: form.schema } : {}
-      if (form.simplefin_account_id) {
-        config.simplefin = { account_id: form.simplefin_account_id }
-      }
-      await api.createSource({ name: form.name, constraint_fields: constraintArr, config, global_picklist: form.global_picklist !== false })
-      if (form.schema.length > 0) {
-        await api.generateView(form.name)
-      }
-      if (form.importSample && fileRef.current?.files[0]) {
-        await api.importCSV(form.name, fileRef.current.files[0])
-      }
-      const updated = await api.getSources()
-      setSources(updated)
-      setSource(form.name)
-      setForm({ name: '', constraint_fields: '', fields: [], schema: [], importSample: true, simplefin_account_id: '' })
-      setCreating(false)
-    } catch (err) {
-      setCreateError(err.message)
-    } finally {
-      setCreateLoading(false)
-    }
-  }
-
-  return (
-    <div className="p-6 max-w-5xl">
-      <div className="flex items-center justify-between mb-6">
-        <h1 className="text-xl font-semibold text-gray-800">
-          {sourceObj ? sourceObj.name : 'Sources'}
-        </h1>
-        <button
-          onClick={() => { setCreating(true); setCreateError('') }}
-          className="text-sm bg-blue-600 text-white px-3 py-1.5 rounded hover:bg-blue-700"
-        >
-          New source
-        </button>
-      </div>
-
-      {/* No source selected */}
-      {!sourceObj && !creating && (
-        <p className="text-sm text-gray-400">No sources yet. Create one to get started.</p>
-      )}
-
-      {/* Source detail */}
-      {sourceObj && !creating && (
-        <div className="space-y-4">
-          {/* Stats */}
-          {stats && (
-            <div className="flex gap-4 text-xs">
-              <span className="text-gray-500"><span className="font-medium text-gray-800">{stats.total_records}</span> total</span>
-              <span className="text-gray-500"><span className="font-medium text-gray-800">{stats.transformed_records}</span> transformed</span>
-              <span className="text-gray-500"><span className="font-medium text-gray-800">{stats.pending_records}</span> pending</span>
-            </div>
-          )}
-
-          {/* Bank feed — link this source to a SimpleFIN account */}
-          <div className="pt-2 border-t border-gray-100">
-            <div className="flex items-center gap-3 flex-wrap">
-              <div className="text-xs font-medium text-gray-600">Bank feed</div>
-
-              {bridgeAccounts === null ? (
-                <>
-                  <span className="text-xs text-gray-500 font-mono">
-                    {sourceObj.config?.simplefin?.account_id || 'not linked'}
-                  </span>
-                  <button
-                    onClick={loadBridgeAccounts}
-                    disabled={bridgeLoading}
-                    className="text-xs border border-gray-300 rounded px-2 py-1 text-gray-600 hover:bg-gray-50 hover:border-gray-400 disabled:opacity-50"
-                  >
-                    {bridgeLoading ? 'Loading…' : sourceObj.config?.simplefin?.account_id ? 'Change' : 'Link SimpleFIN account'}
-                  </button>
-                </>
-              ) : (
-                <select
-                  value={sourceObj.config?.simplefin?.account_id || ''}
-                  onChange={e => handleLinkAccount(e.target.value)}
-                  className="text-xs border border-gray-200 rounded px-2 py-1 bg-white text-gray-700"
-                >
-                  <option value="">Not linked</option>
-                  {bridgeAccounts.map(a => (
-                    <option key={a.id} value={a.id}>
-                      {a.name}{a.organization ? ` — ${a.organization}` : ''}{a.balance ? ` (${a.balance})` : ''}
-                    </option>
-                  ))}
-                </select>
-              )}
-            </div>
-
-            {bridgeError && <p className="text-xs text-orange-600 mt-1">{bridgeError}</p>}
-
-            {/* Dedupe depends on the transaction id being the constraint key */}
-            {sourceObj.config?.simplefin?.account_id
-              && sourceObj.constraint_fields?.join(',') !== 'id' && (
-              <p className="text-xs text-orange-600 mt-1">
-                Constraint fields are “{sourceObj.constraint_fields?.join(', ') || 'none'}” — a
-                bank feed should use “id” so re-syncs don’t duplicate rows.
-              </p>
-            )}
-          </div>
-
-          {/* Unified field table */}
-          {availableFields.length > 0 && (
-            <div className="pt-2 border-t border-gray-100 space-y-2">
-              <table className="w-full text-xs">
-                <thead>
-                  <tr className="text-left text-gray-400 border-b border-gray-100">
-                    {[
-                      { col: 'key', label: 'Key' },
-                      { col: 'origin', label: 'Origin' },
-                      { col: 'type', label: 'Type' },
-                      { col: 'constraint', label: 'Constraint', center: true },
-                      { col: 'inview', label: 'In view', center: true },
-                      { col: 'seq', label: 'Seq', center: true },
-                    ].map(({ col, label, center }) => (
-                      <th
-                        key={col}
-                        onClick={() => setFieldSort(s => ({ col, dir: s.col === col && s.dir === 'asc' ? 'desc' : 'asc' }))}
-                        className={`pb-1 font-medium cursor-pointer select-none hover:text-gray-600 ${center ? 'text-center' : ''}`}
-                      >
-                        {label}
-                        <span className="ml-1 text-gray-300">
-                          {fieldSort.col === col ? (fieldSort.dir === 'asc' ? '▲' : '▼') : '⇅'}
-                        </span>
-                      </th>
-                    ))}
-                  </tr>
-                </thead>
-                <tbody>
-                  {[...availableFields].sort((a, b) => {
-                    const constraintList = constraintFields.split(',').map(s => s.trim())
-                    const aSchema = schemaFields.find(sf => sf.name === a.key)
-                    const bSchema = schemaFields.find(sf => sf.name === b.key)
-                    let av, bv
-                    if (fieldSort.col === 'key') { av = a.key; bv = b.key }
-                    else if (fieldSort.col === 'origin') { av = a.origins.join(','); bv = b.origins.join(',') }
-                    else if (fieldSort.col === 'type') { av = aSchema?.type || ''; bv = bSchema?.type || '' }
-                    else if (fieldSort.col === 'constraint') { av = constraintList.includes(a.key) ? 0 : 1; bv = constraintList.includes(b.key) ? 0 : 1 }
-                    else if (fieldSort.col === 'inview') { av = aSchema ? 0 : 1; bv = bSchema ? 0 : 1 }
-                    else if (fieldSort.col === 'seq') { av = aSchema?.seq ?? 999; bv = bSchema?.seq ?? 999 }
-                    if (av < bv) return fieldSort.dir === 'asc' ? -1 : 1
-                    if (av > bv) return fieldSort.dir === 'asc' ? 1 : -1
-                    return 0
-                  }).map(f => {
-                    const isRaw = f.origins.includes('raw')
-                    const constraintChecked = constraintFields.split(',').map(s => s.trim()).includes(f.key)
-                    const schemaEntry = schemaFields.find(sf => sf.name === f.key)
-                    const inView = !!schemaEntry
-                    return (
-                      <tr key={f.key} className="border-t border-gray-50">
-                        <td className="py-1 font-mono text-gray-700">{f.key}</td>
-                        <td className="py-1 text-gray-400">{f.origins.join(', ')}</td>
-                        <td className="py-1">
-                          {inView && (
-                            <div className="flex gap-1 items-center">
-                              <select
-                                className="border border-gray-200 rounded px-1 py-0.5 text-xs focus:outline-none focus:border-blue-400"
-                                value={schemaEntry.type}
-                                onChange={e => setSchemaFields(sf =>
-                                  sf.map(s => s.name === f.key ? { ...s, type: e.target.value } : s)
-                                )}
-                              >
-                                {FIELD_TYPES.map(t => <option key={t} value={t}>{t}</option>)}
-                              </select>
-                              <input
-                                className="border border-gray-200 rounded px-1 py-0.5 text-xs font-mono w-32 focus:outline-none focus:border-blue-400"
-                                value={schemaEntry.expression || ''}
-                                placeholder="{field} * {sign}"
-                                onChange={e => setSchemaFields(sf =>
-                                  sf.map(s => s.name === f.key ? { ...s, expression: e.target.value || undefined } : s)
-                                )}
-                              />
-                            </div>
-                          )}
-                        </td>
-                        <td className="py-1 text-center">
-                          {isRaw && (
-                            <input
-                              type="checkbox"
-                              checked={constraintChecked}
-                              onChange={e => {
-                                const current = constraintFields.split(',').map(s => s.trim()).filter(Boolean)
-                                const next = e.target.checked
-                                  ? [...current, f.key]
-                                  : current.filter(k => k !== f.key)
-                                setConstraintFields(next.join(', '))
-                              }}
-                            />
-                          )}
-                        </td>
-                        <td className="py-1 text-center">
-                          <input
-                            type="checkbox"
-                            checked={inView}
-                            onChange={e => {
-                              if (e.target.checked) {
-                                const nextSeq = schemaFields.length > 0
-                                  ? Math.max(...schemaFields.map(s => s.seq ?? 0)) + 1
-                                  : 1
-                                setSchemaFields(sf => [...sf, { name: f.key, type: 'text', seq: nextSeq }])
-                              } else {
-                                setSchemaFields(sf => sf.filter(s => s.name !== f.key))
-                              }
-                            }}
-                          />
-                        </td>
-                        <td className="py-1 text-center">
-                          {inView && (
-                            <input
-                              type="number"
-                              className="w-12 border border-gray-200 rounded px-1 py-0.5 text-xs text-center focus:outline-none focus:border-blue-400"
-                              value={schemaEntry.seq ?? ''}
-                              onChange={e => setSchemaFields(sf =>
-                                sf.map(s => s.name === f.key ? { ...s, seq: parseInt(e.target.value) || 0 } : s)
-                              )}
-                            />
-                          )}
-                        </td>
-                      </tr>
-                    )
-                  })}
-                </tbody>
-              </table>
-
-              <div className="flex items-center gap-3 pt-1 flex-wrap">
-                <label className="flex items-center gap-1.5 text-xs text-gray-500 cursor-pointer">
-                  <input type="checkbox" checked={globalPicklist} onChange={e => setGlobalPicklist(e.target.checked)} />
-                  Global picklist
-                </label>
-                <form onSubmit={handleSave}>
-                  <button type="submit" disabled={saving}
-                    className="text-sm bg-blue-600 text-white px-3 py-1.5 rounded hover:bg-blue-700 disabled:opacity-50">
-                    {saving ? 'Saving…' : 'Save'}
-                  </button>
-                </form>
-                {schemaFields.length > 0 && (
-                  <>
-                    <button
-                      onClick={handleGenerateView}
-                      disabled={generating}
-                      className="text-xs bg-green-600 text-white px-2 py-1.5 rounded hover:bg-green-700 disabled:opacity-50"
-                    >
-                      {generating ? 'Generating…' : 'Generate view'}
-                    </button>
-                    {viewName && (
-                      <code className="text-xs bg-gray-100 px-2 py-1 rounded text-gray-600">{viewName}</code>
-                    )}
-                  </>
-                )}
-              </div>
-              <SampleTable rows={sampleRows} />
-            </div>
-          )}
-
-          {/* Save button when no fields loaded yet */}
-          {availableFields.length === 0 && (
-            <div className="flex items-center gap-3">
-              <label className="flex items-center gap-1.5 text-xs text-gray-500 cursor-pointer">
-                <input type="checkbox" checked={globalPicklist} onChange={e => setGlobalPicklist(e.target.checked)} />
-                Global picklist
-              </label>
-              <form onSubmit={handleSave}>
-                <button type="submit" disabled={saving}
-                  className="text-sm bg-blue-600 text-white px-3 py-1.5 rounded hover:bg-blue-700 disabled:opacity-50">
-                  {saving ? 'Saving…' : 'Save'}
-                </button>
-              </form>
-            </div>
-          )}
-
-          {/* Reprocess */}
-          <div className="flex items-center gap-3 pt-2 border-t border-gray-100">
-            <button
-              onClick={handleReprocess}
-              disabled={reprocessing}
-              className="text-sm bg-orange-500 text-white px-3 py-1.5 rounded hover:bg-orange-600 disabled:opacity-50"
-            >
-              {reprocessing ? 'Reprocessing…' : 'Reprocess all records'}
-            </button>
-            <span className="text-xs text-gray-400">Clears and reruns all transformation rules</span>
-          </div>
-
-          {result && <p className="text-xs text-green-600">{result}</p>}
-          {error && <p className="text-xs text-red-500">{error}</p>}
-
-          <div className="pt-2 border-t border-gray-100">
-            <button onClick={handleDelete} className="text-xs text-red-400 hover:text-red-600">
-              Delete source
-            </button>
-          </div>
-        </div>
-      )}
-
-      {/* Create form */}
-      {creating && (
-        <div className="bg-white border border-gray-200 rounded p-4">
-          <h2 className="text-sm font-semibold text-gray-700 mb-3">New source</h2>
-
-          <div className="mb-4">
-            <input type="file" accept=".csv" ref={fileRef} onChange={handleSuggest} className="hidden" />
-            <button
-              type="button"
-              onClick={() => fileRef.current?.click()}
-              className="text-sm border border-gray-300 rounded px-3 py-1.5 text-gray-600 hover:bg-gray-50 hover:border-gray-400"
-            >
-              {csvFileName || 'Choose CSV…'}
-            </button>
-          </div>
-
-          <form onSubmit={handleCreate} className="space-y-3">
-            <div>
-              <label className="text-xs text-gray-500 block mb-1">Source name</label>
-              <input
-                className="w-full border border-gray-200 rounded px-3 py-1.5 text-sm focus:outline-none focus:border-blue-400"
-                value={form.name}
-                onChange={e => setForm(f => ({ ...f, name: e.target.value }))}
-                placeholder="e.g. chase, dcard"
-              />
-            </div>
-
-            {/* Bank feed — optional; picking an account defaults the constraint
-                field to the transaction id, which is what dedupe needs */}
-            <div>
-              <label className="text-xs text-gray-500 block mb-1">Bank feed (optional)</label>
-              <div className="flex items-center gap-3 flex-wrap">
-                {bridgeAccounts === null ? (
-                  <button
-                    type="button"
-                    onClick={loadBridgeAccounts}
-                    disabled={bridgeLoading}
-                    className="text-sm border border-gray-300 rounded px-3 py-1.5 text-gray-600 hover:bg-gray-50 hover:border-gray-400 disabled:opacity-50"
-                  >
-                    {bridgeLoading ? 'Loading…' : 'Link SimpleFIN account…'}
-                  </button>
-                ) : (
-                  <select
-                    value={form.simplefin_account_id || ''}
-                    onChange={e => handleSelectFeedAccount(e.target.value)}
-                    className="text-sm border border-gray-200 rounded px-3 py-1.5 bg-white text-gray-700"
-                  >
-                    <option value="">No bank feed — CSV import</option>
-                    {bridgeAccounts.map(a => (
-                      <option key={a.id} value={a.id}>
-                        {a.name}{a.organization ? ` — ${a.organization}` : ''}{a.balance ? ` (${a.balance})` : ''}
-                      </option>
-                    ))}
-                  </select>
-                )}
-              </div>
-              {bridgeError && <p className="text-xs text-orange-600 mt-1">{bridgeError}</p>}
-
-              {form.simplefin_account_id && sampleInfo && (
-                <div className="mt-2 bg-blue-50 border border-blue-100 rounded p-3 text-xs text-gray-600 space-y-1">
-                  <p>
-                    Read {sampleInfo.fetched} transaction{sampleInfo.fetched === 1 ? '' : 's'} from this
-                    account and found {sampleInfo.fields} field{sampleInfo.fields === 1 ? '' : 's'}.
-                    The table below lists what this account actually returns — fields it never sends
-                    won&rsquo;t appear.
-                  </p>
-                  {form.constraint_fields === 'id' && (
-                    <p>
-                      <span className="font-mono text-gray-700">id</span> is checked as the constraint
-                      field because it is SimpleFIN&rsquo;s own transaction identifier. Syncs pull an
-                      overlapping window of days, so the same transaction arrives more than once —
-                      matching on <span className="font-mono text-gray-700">id</span> skips the repeats
-                      while still keeping genuinely separate charges that share a date, amount, and
-                      description.
-                    </p>
-                  )}
-                  {sampleInfo.fetched === 0 && (
-                    <p className="text-orange-600">
-                      No transactions came back, so there was nothing to infer fields from. Sync first,
-                      then set the fields up here.
-                    </p>
-                  )}
-                </div>
-              )}
-            </div>
-
-            {form.fields.length > 0 && (
-              <div className="pt-2 border-t border-gray-100 space-y-2">
-                <table className="w-full text-xs">
-                  <thead>
-                    <tr className="text-left text-gray-400 border-b border-gray-100">
-                      <th className="pb-1 font-medium">Key</th>
-                      <th className="pb-1 font-medium">Type</th>
-                      <th className="pb-1 font-medium text-center">Constraint</th>
-                      <th className="pb-1 font-medium text-center">In view</th>
-                      <th className="pb-1 font-medium text-center">Seq</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {form.fields.map(f => {
-                      const schemaEntry = form.schema.find(s => s.name === f.name)
-                      const inView = !!schemaEntry
-                      const currentType = schemaEntry?.type || f.type
-                      return (
-                        <tr key={f.name} className="border-t border-gray-50">
-                          <td className="py-1 font-mono text-gray-700">{f.name}</td>
-                          <td className="py-1">
-                            {inView && (
-                              <select
-                                className="border border-gray-200 rounded px-1 py-0.5 text-xs focus:outline-none focus:border-blue-400"
-                                value={currentType}
-                                onChange={e => setForm(ff => ({
-                                  ...ff,
-                                  schema: ff.schema.map(s => s.name === f.name ? { ...s, type: e.target.value } : s)
-                                }))}
-                              >
-                                {FIELD_TYPES.map(t => <option key={t} value={t}>{t}</option>)}
-                              </select>
-                            )}
-                          </td>
-                          <td className="py-1 text-center">
-                            <input
-                              type="checkbox"
-                              checked={form.constraint_fields.split(',').map(s => s.trim()).includes(f.name)}
-                              onChange={e => {
-                                const current = form.constraint_fields.split(',').map(s => s.trim()).filter(Boolean)
-                                const next = e.target.checked
-                                  ? [...current, f.name]
-                                  : current.filter(n => n !== f.name)
-                                setForm(ff => ({ ...ff, constraint_fields: next.join(', ') }))
-                              }}
-                            />
-                          </td>
-                          <td className="py-1 text-center">
-                            <input
-                              type="checkbox"
-                              checked={inView}
-                              onChange={e => {
-                                if (e.target.checked) {
-                                  const nextSeq = form.schema.length > 0
-                                    ? Math.max(...form.schema.map(s => s.seq ?? 0)) + 1
-                                    : 1
-                                  setForm(ff => ({ ...ff, schema: [...ff.schema, { name: f.name, type: f.type, seq: nextSeq }] }))
-                                } else {
-                                  setForm(ff => ({ ...ff, schema: ff.schema.filter(s => s.name !== f.name) }))
-                                }
-                              }}
-                            />
-                          </td>
-                          <td className="py-1 text-center">
-                            {inView && (
-                              <input
-                                type="number"
-                                className="w-12 border border-gray-200 rounded px-1 py-0.5 text-xs text-center focus:outline-none focus:border-blue-400"
-                                value={schemaEntry.seq ?? ''}
-                                onChange={e => setForm(ff => ({
-                                  ...ff,
-                                  schema: ff.schema.map(s => s.name === f.name ? { ...s, seq: parseInt(e.target.value) || 0 } : s)
-                                }))}
-                              />
-                            )}
-                          </td>
-                        </tr>
-                      )
-                    })}
-                  </tbody>
-                </table>
-                <SampleTable rows={form.sampleRows || []} />
-              </div>
-            )}
-
-            {form.fields.length === 0 && (
-              <div>
-                <label className="text-xs text-gray-500 block mb-1">Constraint fields (comma-separated)</label>
-                <input
-                  className="w-full border border-gray-200 rounded px-3 py-1.5 text-sm focus:outline-none focus:border-blue-400"
-                  value={form.constraint_fields}
-                  onChange={e => setForm(f => ({ ...f, constraint_fields: e.target.value }))}
-                  placeholder="e.g. date, amount, description"
-                />
-              </div>
-            )}
-
-            <div className="flex gap-4">
-              <label className="flex items-center gap-1.5 text-xs text-gray-500 cursor-pointer">
-                <input
-                  type="checkbox"
-                  checked={form.global_picklist !== false}
-                  onChange={e => setForm(f => ({ ...f, global_picklist: e.target.checked }))}
-                />
-                Global picklist
-              </label>
-              {form.fields.length > 0 && (
-                <label className="flex items-center gap-1.5 text-xs text-gray-500 cursor-pointer">
-                  <input
-                    type="checkbox"
-                    checked={form.importSample !== false}
-                    onChange={e => setForm(f => ({ ...f, importSample: e.target.checked }))}
-                  />
-                  Import sample data
-                </label>
-              )}
-            </div>
-
-            {createError && <p className="text-xs text-red-500">{createError}</p>}
-
-            <div className="flex gap-2">
-              <button type="submit" disabled={createLoading}
-                className="text-sm bg-blue-600 text-white px-3 py-1.5 rounded hover:bg-blue-700 disabled:opacity-50">
-                {createLoading ? 'Creating…' : 'Create'}
-              </button>
-              <button type="button"
-                onClick={() => { setCreating(false); setCreateError(''); setForm({ name: '', constraint_fields: '', fields: [], schema: [] }) }}
-                className="text-sm text-gray-500 px-3 py-1.5 rounded hover:bg-gray-100">
-                Cancel
-              </button>
-            </div>
-          </form>
-        </div>
-      )}
-    </div>
-  )
-}

ui/src/pages/Stacks.jsx

@@ -1,3 +1,4 @@
+import { Link } from 'react-router-dom'
 import { useState, useEffect, useRef } from 'react'
 import { api } from '../api'
 import { format as formatSql } from 'sql-formatter'
@@ -754,6 +755,9 @@ export default function Stacks({ sources, onStackStale, onStackViewGenerated, on
             className={`flex items-center gap-2 px-3 py-1.5 rounded border cursor-pointer text-xs group transition-colors ${selected === s.name ? 'border-blue-300 bg-blue-50 text-blue-700' : 'border-gray-200 bg-white text-gray-600 hover:border-gray-300 hover:bg-gray-50'}`}>
             <span className="font-medium">{s.label || s.name}</span>
             <span className="text-gray-400">{s.source_count}s</span>
+            <Link to={`/stacks/${encodeURIComponent(s.name)}/pivot`}
+              onClick={e => e.stopPropagation()}
+              className="opacity-0 group-hover:opacity-100 text-blue-400 hover:text-blue-600">pivot</Link>
             <button onClick={e => { e.stopPropagation(); deleteStack(s.name) }}
               className="opacity-0 group-hover:opacity-100 text-red-300 hover:text-red-500 leading-none">✕</button>
           </div>