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 lines
338
339
340
341
342
343
344
345
346
347
353
354
355
356
357
358
359
360
361
362
363
364
365
366
337 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 lines
338
339
340
341
342
343
344
345
346
347
353
354
355
356
357
358
359
360
361
362
363
364
365
366
337 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 lines
9039
9040
9041
9042
9043
9044
9045
9046
9047
9048
9049
9358 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 lines
9359
9360
9361
9362
9363
9364
9365
9366
9367
9368
9369
9370
9371
9372
9373
9374
9375
9376
9358 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 lines
4078
4079
4080
4081
4082
4083
4084
4085
4086
4087
4088
4089
4090
19 unmodified lines
4122
4123
4124
4125
4126
4127
4128
4077 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 lines
4078
4079
4080
4081
4082
4083
4084
4085
4086
4087
4088
4089
4090
19 unmodified lines
4122
4123
4124
4125
4126
4127
4128
4077 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 lines
769
770
771
772
773
774
1290 unmodified lines
2065
2066
2067
2068
2069
2070
768 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 lines
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
1290 unmodified lines
2092
2093
2094
2095
2096
2097
2098
2099
2100
2101
2102
2103
2104
2105
2106
2107
2108
2109
768 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.