Implementation Turn Document

# Redesign Home Around the Command Deck

The home route now uses a production command-deck layout inspired by `/mock1`, backed by `useTerminal()` state and existing live panes instead of static mock rows.

Created 2026-05-28 05:06 EDT Beads issue islandflow-ddm Tests passed Build passed

## Summary

Reworked `/` into the main Islandflow command deck with a compact command header, real ticker rail, options tape, price and flow chart, alerts, feed health, inferred dark activity, event context, and replay or mode rail. Focused `/options` and `/news` routes remain structurally intact.

## Changes Made

- Expanded the home route feature map so the command deck subscribes to options, equities, flow, news, alerts, smart-money, inferred-dark, equity-join, candle, and overlay data.
- Added home-only components in `apps/web/app/terminal.tsx`: `CommandDeckHeader`, `TickerRail`, `FeedHealthPane`, `EventContextPane`, and `HomeReplayRail`.
- Replaced the previous home grid with a mock1-inspired production layout that reuses `OptionsPane`, `ChartPane`, `AlertsPane`, and `DarkPane`.
- Added `.command-deck-*` CSS classes in `apps/web/app/globals.css` and left existing `.mock-*` classes available for reference mock routes.
- Changed the chart canvas palette from the previous light canvas to the terminal dark surface so empty and error states no longer flash a bright panel inside the deck.

## Context

`/mock1` was the visual reference: dense operational layout, ticker rail, compact pane headers, and evidence-first sequencing. The implementation keeps that structure but uses production state and pane behavior. No backend API contracts, runtime dependencies, or `@islandflow/types` schemas were changed.

## Important Implementation Details

- The ticker rail derives symbols from active filters, equity prints, option prints, smart-money events, and news stories, then falls back to the chart ticker.
- Home pane empty states remain explicit when infrastructure is absent, for example options still says to start ingest-options and the chart reports fetch or service state.
- The mobile command-deck order prioritizes alerts, chart, options, context, replay or status, feed health, then dark activity.
- Red and green states are still paired with text labels such as `Connected`, `Disconnected`, `Up`, and `Down`.
- The in-app Browser backend was unavailable, so visual checks used Playwright Chromium screenshots against a local Next dev server on port 3001.

## Relevant Diff Snippets

The snippets below were rendered with `@pierre/diffs/ssr` using `preloadPatchDiff`. They focus on the route feature expansion, production command-deck composition, dark chart palette, and responsive command-deck CSS.

apps/web/app/terminal.tsx
-6+6

    337 unmodified lines338339340341342343344345346347353354355356357358359360361362363364365366337 unmodified lines    case "/":    default:      return {        options: false,        nbbo: false,        equities: true,        flow: false,        news: true,        alerts: true,        smartMoney: true,        showOptionsPane: false,        showEquitiesPane: true,        showFlowPane: false,        showNewsPane: true,        showAlertsPane: true,        showClassifierPane: false,        showDarkPane: false,        showChartPane: true,        showFocusPane: false,        showReplayConsole: false,        needsClassifierDecor: false,        needsAlertEvidencePrefetch: true,        needsDarkUnderlying: true      };337 unmodified lines338339340341342343344345346347353354355356357358359360361362363364365366337 unmodified lines    case "/":    default:      return {        options: true,        nbbo: false,        equities: true,        flow: true,        news: true,        alerts: true,        smartMoney: true,        showOptionsPane: true,        showEquitiesPane: true,        showFlowPane: true,        showNewsPane: true,        showAlertsPane: true,        showClassifierPane: false,        showDarkPane: true,        showChartPane: true,        showFocusPane: false,        showReplayConsole: false,        needsClassifierDecor: true,        needsAlertEvidencePrefetch: true,        needsDarkUnderlying: true      };

apps/web/app/terminal.tsx
-5+12

    9358 unmodified lines903990409041904290439044904590469047904890499358 unmodified lines  const state = useTerminal();  return (    <PageFrame title="Home">      <div className="page-grid page-grid-home">        <ChartPane state={state} />        <EquitiesPane state={state} />        <NewsPane state={state} limit={6} />        <AlertsPane state={state} withStrip />      </div>    </PageFrame>  );9358 unmodified lines9359936093619362936393649365936693679368936993709371937293739374937593769358 unmodified lines  const state = useTerminal();  return (    <PageFrame title="Home">      <div className="command-deck-shell">        <CommandDeckHeader state={state} />        <TickerRail state={state} />        <div className="command-deck-grid">          <OptionsPane state={state} limit={14} />          <ChartPane state={state} title="Price / Flow" />          <AlertsPane state={state} limit={8} withStrip className="command-signals-pane" />          <FeedHealthPane state={state} />          <DarkPane state={state} limit={8} className="command-dark-pane" />          <EventContextPane state={state} />          <HomeReplayRail state={state} />        </div>      </div>    </PageFrame>  );

apps/web/app/terminal.tsx
-10+10

    4077 unmodified lines407840794080408140824083408440854086408740884089409019 unmodified lines41224123412441254126412741284077 unmodified lines      height,      layout: {        background: { color: "#fffdf7" },        textColor: "#4e3e25"      },      grid: {        vertLines: { color: "rgba(82, 64, 36, 0.12)" },        horzLines: { color: "rgba(82, 64, 36, 0.12)" }      },      crosshair: {        vertLine: { color: "rgba(47, 109, 79, 0.35)" },        horzLine: { color: "rgba(47, 109, 79, 0.35)" }      },19 unmodified lines    const series = chart.addCandlestickSeries({      upColor: "#2f6d4f",      downColor: "#c46f2a",      borderVisible: false,      wickUpColor: "#2f6d4f",      wickDownColor: "#c46f2a"    });4077 unmodified lines407840794080408140824083408440854086408740884089409019 unmodified lines41224123412441254126412741284077 unmodified lines      height,      layout: {        background: { color: "#0d141b" },        textColor: "#90a0b2"      },      grid: {        vertLines: { color: "rgba(144, 160, 178, 0.12)" },        horzLines: { color: "rgba(144, 160, 178, 0.12)" }      },      crosshair: {        vertLine: { color: "rgba(245, 166, 35, 0.32)" },        horzLine: { color: "rgba(245, 166, 35, 0.32)" }      },19 unmodified lines    const series = chart.addCandlestickSeries({      upColor: "#25c17a",      downColor: "#ff6b5f",      borderVisible: false,      wickUpColor: "#25c17a",      wickDownColor: "#ff6b5f"    });

apps/web/app/globals.css
+40

    768 unmodified lines7697707717727737741290 unmodified lines206520662067206820692070768 unmodified lines  grid-column: 1 / -1;}
    .terminal-pane {  min-width: 0;  height: 100%;1290 unmodified lines    min-height: 0;  }
      .terminal-topbar {    align-items: center;    justify-content: space-between;768 unmodified lines7697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018021290 unmodified lines209220932094209520962097209820992100210121022103210421052106210721082109768 unmodified lines  grid-column: 1 / -1;}
    .command-deck-shell {  display: grid;  gap: 12px;}
    .command-deck-header {  min-width: 0;  display: grid;  grid-template-columns: minmax(220px, 0.8fr) minmax(260px, 1fr) auto;  gap: 14px;  align-items: center;  padding: 13px 14px;  border: 1px solid var(--border);  border-radius: 12px;  background: linear-gradient(180deg, oklch(0.18 0.013 250 / 0.96), oklch(0.145 0.012 250 / 0.96));}
    .command-deck-grid {  display: grid;  grid-template-columns: minmax(360px, 1.12fr) minmax(420px, 1.38fr) minmax(300px, 0.9fr);  grid-template-areas:    "tape chart signals"    "feed dark context"    "replay replay replay";  gap: 10px;  align-items: stretch;}
    .terminal-pane {  min-width: 0;  height: 100%;1290 unmodified lines    min-height: 0;  }
      .command-deck-grid {    grid-template-columns: minmax(0, 1fr);    grid-template-areas:      "signals"      "chart"      "tape"      "context"      "replay"      "feed"      "dark";  }
      .terminal-topbar {    align-items: center;    justify-content: space-between;

## Expected Impact for End-Users

Users landing on Islandflow now see the operational cockpit first: live symbol focus, signal context, options flow, chart state, feed health, inferred dark activity, and replay or mode context are visible without jumping between focused workspaces. The specialized options and news workflows are still available for deeper work.

## Validation

- Passed: `bun test`, 250 tests, 0 failures.
- Passed: `bun --cwd=apps/web run build`.
- Checked: Playwright Chromium screenshots for `/` desktop and mobile, `/options`, `/news`, and `/mock1`.
- Checked: `/signals` redirects to `/` and `/tape` redirects to `/options` with local HTTP checks; route tests cover `/charts` and `/replay` redirects too.
- Note: Visual checks were performed without backend market services running, so empty and error states were validated rather than live populated rows.

## Issues, Limitations, and Mitigations

- The chart can show a fetch error when the candle API is unavailable; the pane remains framed and visibly explains the state.
- The feed health pane reflects frontend tape state and subscription status, not a deep backend diagnostics endpoint.
- The existing local port 3000 server returned 500 during verification, so a separate Next dev server was run on port 3001 and stopped afterward.
- The in-app Browser plugin listed no available browser instances; Playwright Chromium was installed into the user tool cache for fallback screenshots.

## Follow-up Work

- Consider adding a dedicated pure helper test for command-deck ticker derivation if the rail grows more behavior.
- Wire feed health to richer backend diagnostics if operators need per-provider latency and throughput in production.
- Expose more explicit chart service status if candle fetch failures should distinguish service down, empty data, and network errors.