From 470a9a27e1c7b75ae9844f014c349404a26a7dd9 Mon Sep 17 00:00:00 2001
From: Investor Flow Build <build@investor-flow.local>
Date: Tue, 11 Aug 2026 22:53:54 -0400
Subject: [PATCH] fix: confluence autocomplete editable + consistent styling

- Remove value prop from SymbolAutocomplete (was making input read-only)
- Use inputClassName with app design tokens (bg-surface-sunken, border-line,
  rounded-lg) to match SymbolHeader and other pages
- Make symbol input, watchlist input, and rack select all use same
  border/radius/padding/font-size tokens
- Both panels now consistent with each other and the rest of the app
---
 app/src/components/ConfluencePanel.tsx | 20 +++++++++++---------
 app/src/components/CorridorPanel.tsx   | 22 ++++++++++++----------
 2 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/app/src/components/ConfluencePanel.tsx b/app/src/components/ConfluencePanel.tsx
index 03018b1..6af6c44 100644
--- a/app/src/components/ConfluencePanel.tsx
+++ b/app/src/components/ConfluencePanel.tsx
@@ -118,22 +118,24 @@ export function ConfluencePanel() {
 
       {/* Header */}
       <div className="flex flex-wrap items-end gap-4">
-        <div className="w-48">
+        <div>
           <label className="block text-xs text-fg-muted mb-1">Symbol</label>
-          <SymbolAutocomplete
-            onPick={pickSymbol}
-            onSubmitRaw={(raw) => pickSymbol(raw.toUpperCase())}
-            value={symbol}
-            placeholder="Search symbol…"
-            ariaLabel="Select symbol for slot picture"
-          />
+          <div className="relative w-48">
+            <SymbolAutocomplete
+              onPick={pickSymbol}
+              onSubmitRaw={(raw) => pickSymbol(raw.toUpperCase())}
+              placeholder="Search symbol…"
+              ariaLabel="Select symbol for slot picture"
+              inputClassName="w-full bg-surface-sunken border border-line rounded-lg px-3 py-1.5 text-xs text-fg placeholder:text-fg-muted focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent"
+            />
+          </div>
         </div>
         <div>
           <label className="block text-xs text-fg-muted mb-1">Rack</label>
           <select
             value={rackId ?? ''}
             onChange={(e) => setSelectedRackId(e.target.value || null)}
-            className="rounded bg-bg-secondary border border-fg-muted/20 px-2 py-1.5 text-sm text-fg min-w-[180px]"
+            className="rounded-lg bg-surface-sunken border border-line px-3 py-1.5 text-xs text-fg min-w-[180px] focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent"
           >
             {racks.system.map((r) => (
               <option key={r.id} value={r.id}>{r.name}</option>
diff --git a/app/src/components/CorridorPanel.tsx b/app/src/components/CorridorPanel.tsx
index f40ef0e..af554ca 100644
--- a/app/src/components/CorridorPanel.tsx
+++ b/app/src/components/CorridorPanel.tsx
@@ -176,15 +176,17 @@ export function CorridorPanel() {
 
       {/* Header: symbol + watchlist */}
       <div className="flex flex-wrap items-end gap-4">
-        <div className="w-48">
+        <div>
           <label className="block text-xs text-fg-muted mb-1">Symbol</label>
-          <SymbolAutocomplete
-            onPick={pickSymbol}
-            onSubmitRaw={(raw) => pickSymbol(raw.toUpperCase())}
-            value={symbol}
-            placeholder="Search symbol…"
-            ariaLabel="Select symbol for corridor"
-          />
+          <div className="relative w-48">
+            <SymbolAutocomplete
+              onPick={pickSymbol}
+              onSubmitRaw={(raw) => pickSymbol(raw.toUpperCase())}
+              placeholder="Search symbol…"
+              ariaLabel="Select symbol for corridor"
+              inputClassName="w-full bg-surface-sunken border border-line rounded-lg px-3 py-1.5 text-xs text-fg placeholder:text-fg-muted focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent"
+            />
+          </div>
         </div>
         <div>
           <label className="block text-xs text-fg-muted mb-1">Watchlist</label>
@@ -194,13 +196,13 @@ export function CorridorPanel() {
               value={addInput}
               onChange={(e) => setAddInput(e.target.value.toUpperCase().trim())}
               placeholder="TICKER"
-              className="w-28 rounded bg-bg-secondary border border-fg-muted/20 px-2 py-1.5 text-sm text-fg"
+              className="w-28 rounded-lg bg-surface-sunken border border-line px-3 py-1.5 text-xs text-fg placeholder:text-fg-muted focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent"
               maxLength={12}
               onKeyDown={(e) => { if (e.key === 'Enter') addToWatchlist(); }}
             />
             <button
               onClick={addToWatchlist}
-              className="rounded bg-bg-secondary border border-fg-muted/30 px-3 py-1.5 text-xs text-fg hover:border-fg-muted/60"
+              className="rounded-lg bg-surface-sunken border border-line px-3 py-1.5 text-xs text-fg hover:border-accent transition-colors"
             >
               Add
             </button>