refine command deck header

.beads/issues.jsonl

@@ -27,6 +27,7 @@
 {"_type":"issue","id":"islandflow-ayo","title":"Drop stale backlog events from live fanout","description":"Follow-up to live freshness rollout: /ws/live was still fanning out stale backlog events for freshness-gated channels, which kept tape panes in Live feed behind despite active synthetic ingest. Gate fanout and cache ingest by freshness for options/nbbo/equities/flow.","status":"closed","priority":1,"issue_type":"bug","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-04-28T21:26:39Z","created_by":"dirtydishes","updated_at":"2026-04-28T21:26:44Z","started_at":"2026-04-28T21:26:44Z","closed_at":"2026-04-28T21:26:44Z","close_reason":"Completed","dependency_count":0,"dependent_count":0,"comment_count":0}
 {"_type":"issue","id":"islandflow-0v6","title":"Fix tape freshness, NBBO coverage, pause controls, and filter popup","description":"Implement the tape fixes requested for synthetic options notional sizing, strict live freshness, live-mode pause/resume behavior, stronger NBBO snapshot coverage, and moving flow filters behind a popup. Includes server-side live cache changes, web terminal state/UI changes, and tests for synthetic pricing, live snapshot freshness/NBBO retention, and live pause/filter interactions.","status":"closed","priority":1,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-04-28T21:02:52Z","created_by":"dirtydishes","updated_at":"2026-04-28T21:13:38Z","started_at":"2026-04-28T21:02:57Z","closed_at":"2026-04-28T21:13:38Z","close_reason":"Completed","dependency_count":0,"dependent_count":0,"comment_count":0}
 {"_type":"issue","id":"islandflow-e4r","title":"Implement smart-money flow filtering and synthetic firehose modes","description":"Implement the approved multi-surface plan for named synthetic market profiles, options raw-vs-signal filtering, live/API filter contracts, Tape page client-side flow filters, firehose-readiness improvements, tests, and README updates.","status":"closed","priority":1,"issue_type":"feature","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-04-28T20:10:49Z","created_by":"dirtydishes","updated_at":"2026-04-28T20:29:29Z","started_at":"2026-04-28T20:10:53Z","closed_at":"2026-04-28T20:29:29Z","close_reason":"Implemented synthetic market profiles, options signal-path filtering, signal-aware API/replay contracts, Tape page filters, tests, and README updates. Follow-up tracked in islandflow-biq.","dependency_count":0,"dependent_count":0,"comment_count":0}
+{"_type":"issue","id":"islandflow-9ns","title":"Refine command deck header","description":"Simplify the overview command deck header after live visual iteration, keeping live status, last tick, replay switching, and active filter controls prominent at the top of the page.","status":"closed","priority":2,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-06-06T11:30:15Z","created_by":"dirtydishes","updated_at":"2026-06-06T11:32:07Z","started_at":"2026-06-06T11:30:25Z","closed_at":"2026-06-06T11:32:07Z","close_reason":"accepted compact command deck header from live iteration, added active filter chips with hover clear controls, and validated web build/tests","dependency_count":0,"dependent_count":0,"comment_count":0}
 {"_type":"issue","id":"islandflow-xmi","title":"Resolve conflicts in PR 45","description":"Resolve the merge conflicts blocking Forgejo PR 45, validate the affected code paths, and push the reconciled branch back to Forgejo.","status":"closed","priority":2,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-06-06T03:33:52Z","created_by":"dirtydishes","updated_at":"2026-06-06T03:35:16Z","started_at":"2026-06-06T03:33:58Z","closed_at":"2026-06-06T03:35:16Z","close_reason":"Resolved the PR 45 merge conflict in .beads/issues.jsonl and validated the reconciled tracker file.","dependency_count":0,"dependent_count":0,"comment_count":0}
 {"_type":"issue","id":"islandflow-8a6","title":"verify github pages token for docs mirror","description":"The docs mirror workflow now publishes islandflow/docs into dirtydishes/dirtydishes.github.io, but the GitHub Actions secret DOCS_PAGES_TOKEN must exist and have permission to push to that Pages repository. Verify the secret is configured and manually run the Publish Docs workflow after the mirror branch lands.","notes":"Direct manual publish to dirtydishes/dirtydishes.github.io succeeded on 2026-06-01 and https://dirtydishes.github.io/islandflow/docs/ returned HTTP 200. Remaining work is to verify DOCS_PAGES_TOKEN so the islandflow docs mirror workflow can publish future updates automatically.","status":"open","priority":2,"issue_type":"task","owner":"dishes@dpdrm.com","created_at":"2026-05-31T22:12:27Z","created_by":"dirtydishes","updated_at":"2026-06-01T13:45:34Z","dependency_count":0,"dependent_count":0,"comment_count":0}
 {"_type":"issue","id":"islandflow-5jt","title":"Add anatomy reference page","description":"Create a standalone docs/anatomy.html reference explaining how prints move through ingest, tape, flow packets, smart-money events, classifier hits, and alerts, including diagrams.","status":"closed","priority":2,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-05-31T21:20:34Z","created_by":"dirtydishes","updated_at":"2026-05-31T21:25:54Z","started_at":"2026-05-31T21:20:44Z","closed_at":"2026-05-31T21:25:54Z","close_reason":"Added the standalone anatomy reference page and linked it from the docs index.","dependency_count":0,"dependent_count":0,"comment_count":0}

apps/web/app/globals.css

@@ -854,6 +854,118 @@ h3 {
   flex-wrap: wrap;
 }
 
+.compact-command-bar {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 8px;
+  padding: 10px 12px;
+  border-radius: 10px;
+  background: linear-gradient(180deg, oklch(0.17 0.013 250 / 0.95), oklch(0.13 0.011 250 / 0.95));
+}
+
+.compact-command-topline,
+.compact-command-context {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.compact-command-title,
+.compact-command-controls,
+.compact-command-context {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.compact-command-title span,
+.compact-command-context > span {
+  color: var(--text-faint);
+  font-family: var(--font-mono), monospace;
+  font-size: 0.68rem;
+  letter-spacing: 0.12em;
+  text-transform: lowercase;
+}
+
+.compact-command-title strong {
+  color: var(--text);
+  font-family: var(--font-display), sans-serif;
+  font-size: 1.05rem;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+.compact-command-context strong {
+  color: var(--text);
+  font-family: var(--font-mono), monospace;
+  font-size: 0.8rem;
+}
+
+.command-filter-tooltip {
+  position: relative;
+  min-width: 0;
+  max-width: min(360px, 38vw);
+  min-height: 32px;
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 5px 8px 5px 10px;
+  border: 1px solid var(--border-strong);
+  border-radius: 999px;
+  background: oklch(0.78 0.12 74 / 0.09);
+  color: var(--text);
+  font-family: var(--font-mono), monospace;
+  font-size: 0.68rem;
+  text-transform: uppercase;
+}
+
+.command-filter-tooltip span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.command-filter-tooltip button {
+  width: 20px;
+  height: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 999px;
+  background: oklch(0.97 0.008 250 / 0.08);
+  color: var(--text-dim);
+  cursor: pointer;
+  font-family: var(--font-mono), monospace;
+  font-size: 0.62rem;
+  opacity: 0;
+  transform: translateX(3px);
+  transition:
+    background-color 150ms ease,
+    color 150ms ease,
+    opacity 150ms ease,
+    transform 150ms ease;
+}
+
+.command-filter-tooltip:hover button,
+.command-filter-tooltip:focus-within button {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.command-filter-tooltip button:hover,
+.command-filter-tooltip button:focus-visible {
+  background: oklch(0.78 0.12 74 / 0.17);
+  color: var(--text);
+  outline: none;
+}
+
 .command-chip {
   min-height: 32px;
   display: inline-flex;
@@ -2477,6 +2589,7 @@ h3 {
   .interval-button,
   .overlay-toggle,
   .drawer-close,
+  .command-filter-tooltip button,
   .status-inline-counter,
   .missed-count,
   .synthetic-control-gear {
@@ -2506,6 +2619,10 @@ h3 {
     grid-template-columns: minmax(220px, 0.8fr) minmax(240px, 1fr);
   }
 
+  .compact-command-topline {
+    justify-content: flex-start;
+  }
+
   .command-deck-controls {
     grid-column: 1 / -1;
     justify-content: flex-start;
@@ -2674,6 +2791,20 @@ h3 {
     justify-content: center;
   }
 
+  .compact-command-bar .command-chip,
+  .compact-command-bar .terminal-button,
+  .command-filter-tooltip {
+    width: auto;
+    max-width: 100%;
+    justify-content: center;
+  }
+
+  .compact-command-topline,
+  .compact-command-context {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
   .command-ticker-track {
     grid-auto-columns: minmax(164px, 78vw);
   }

apps/web/app/terminal.tsx

@@ -8738,34 +8738,59 @@ const buildCommandDeckTickers = (state: TerminalState): CommandDeckTicker[] => {
 
 const CommandDeckHeader = ({ state }: { state: TerminalState }) => {
   const focus = state.activeTickers.length > 0 ? state.activeTickers.join(", ") : state.chartTicker;
-  const selected = state.selectedInstrumentLabel ?? "No contract lock";
+  const activeTickerFilter = state.filterInput.trim();
+  const activeContractFilter =
+    state.selectedInstrument?.kind === "option-contract" ? state.selectedInstrumentLabel : null;
   const connectionLabel =
     state.mode === "live" ? statusLabel(state.liveSession.status, false, state.mode) : "Replay";
 
   return (
-    <header className="command-deck-header" aria-label="Command deck context">
-      <div className="command-deck-brand">
-        <span className="command-deck-mark" aria-hidden="true" />
-        <div>
-          <span className="command-deck-kicker">islandflow</span>
-          <h2>Command Deck</h2>
+    <header className="command-deck-header compact-command-bar" aria-label="Command deck context">
+      <div className="compact-command-topline">
+        <div className="compact-command-title">
+          <span>islandflow</span>
+          <strong>Command Deck</strong>
+        </div>
+        <div className="compact-command-controls" aria-label="Active command deck controls">
+          <span className={`command-chip command-chip-${state.liveSession.status}`}>
+            {state.mode === "live" ? "Live" : "Replay"}: {connectionLabel}
+          </span>
+          <span className="command-chip">
+            Last {state.lastSeen ? formatTime(state.lastSeen) : "waiting"}
+          </span>
+          <button className="terminal-button" type="button" onClick={state.toggleMode}>
+            {state.mode === "live" ? "Switch to Replay" : "Switch to Live"}
+          </button>
         </div>
       </div>
-      <div className="command-deck-brief">
+      <div className="compact-command-context">
         <span>Evidence console</span>
         <strong>{focus}</strong>
-        <span>{selected}</span>
-      </div>
-      <div className="command-deck-controls" aria-label="Active command deck controls">
-        <span className={`command-chip command-chip-${state.liveSession.status}`}>
-          {state.mode === "live" ? "Live" : "Replay"}: {connectionLabel}
-        </span>
-        <span className="command-chip">
-          Last {state.lastSeen ? formatTime(state.lastSeen) : "waiting"}
-        </span>
-        <button className="terminal-button" type="button" onClick={state.toggleMode}>
-          {state.mode === "live" ? "Switch to Replay" : "Switch to Live"}
-        </button>
+        {activeContractFilter ? (
+          <span className="command-filter-tooltip">
+            <span>{activeContractFilter}</span>
+            <button
+              aria-label="Clear contract filter"
+              type="button"
+              onClick={() => state.setSelectedInstrument(null)}
+            >
+              X
+            </button>
+          </span>
+        ) : activeTickerFilter.length > 0 ? (
+          <span className="command-filter-tooltip">
+            <span>Ticker: {activeTickerFilter}</span>
+            <button
+              aria-label="Clear ticker filter"
+              type="button"
+              onClick={() => state.setFilterInput("")}
+            >
+              X
+            </button>
+          </span>
+        ) : (
+          <span>No active filter</span>
+        )}
       </div>
     </header>
   );