code-coordinator 0.5.46__py3-none-any.whl

coord/dashboard/webapp/src/shell/ActivityRail.tsx

@@ -0,0 +1,335 @@
+/**
+ * Activity rail (#1547) — the coord-tui `SidebarView` twin, and the *same*
+ * component at every viewport.
+ *
+ * Three presentations, one component and one item list (`railItems.ts`):
+ *   wide      216px labelled column, grouped, with counts and a rail foot.
+ *   collapsed 60px icon strip (labels, counts, group headings and the
+ *             wordmark all drop out; icons centre).
+ *   narrow    a bottom row of icon-over-label tabs. Only `ready` entries
+ *             appear — a phone's bottom nav is thumb real estate, and a
+ *             dimmed un-tappable "soon" item there is noise, not a progress
+ *             bar. On wide there is room for the whole programme, so the
+ *             whole programme shows.
+ *
+ * Matches docs/mocks/web/pipeline-wide.html: the selected item takes the
+ * accent wash plus a 3px accent bar on its leading edge, `soon` items sit at
+ * ~42% opacity behind a `soon` pill, and counts are mono (a value the machine
+ * owns) — amber-washed when the count is something needing a human.
+ */
+import {
+  ChevronLeft,
+  ChevronRight,
+  Moon,
+  PanelLeftClose,
+  PanelLeftOpen,
+  Settings2,
+  Sun,
+} from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { useTheme } from '@/components/ui/theme-provider'
+import type { ShellMode } from './breakpoints'
+import { RAIL_GROUPS, type RailItem } from './railItems'
+import type { ShellView } from './shellState'
+
+export interface ActivityRailProps {
+  mode: ShellMode
+  collapsed: boolean
+  /** `null` when the current URL doesn't belong to any rail view (#1548) —
+   * e.g. a genuinely unknown route. Nothing in the rail lights up rather
+   * than falling back to a view that isn't actually selected. */
+  view: ShellView | null
+  onSelect: (view: ShellView) => void
+  onToggleCollapsed: () => void
+  /** Wide only: whether the list column is minimised away. */
+  listCollapsed?: boolean
+  onToggleList?: () => void
+  /** Badge counts by view; absent or 0 renders no badge. */
+  counts?: Partial<Record<ShellView, number>>
+  /** Views whose count should read as "needs a human" (amber, not grey). */
+  attentionViews?: ReadonlySet<ShellView>
+  /** F6 region registration — see `useRegionFocus`. */
+  regionRef?: (el: HTMLElement | null) => void
+  /** True while F6 last landed here; draws the region ring. */
+  regionFocused?: boolean
+}
+
+const navItemBase =
+  'relative flex w-full items-center rounded-sm text-left text-step-0 ' +
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0'
+
+function NavItem({
+  item,
+  mode,
+  collapsed,
+  selected,
+  count,
+  attention,
+  onSelect,
+}: {
+  item: RailItem
+  mode: ShellMode
+  collapsed: boolean
+  selected: boolean
+  count?: number
+  attention?: boolean
+  onSelect: (view: ShellView) => void
+}) {
+  const soon = item.status === 'soon'
+  const Icon = item.icon
+  const narrow = mode === 'narrow'
+
+  return (
+    <button
+      type="button"
+      // A `soon` entry is a signpost, not a control: `aria-disabled` (rather
+      // than `disabled`) keeps it reachable by a screen reader reading the
+      // rail as a table of contents, while the no-op handler and
+      // `cursor-default` keep it inert to a mouse.
+      aria-disabled={soon || undefined}
+      aria-current={selected ? 'page' : undefined}
+      title={item.hint ?? item.label}
+      onClick={soon ? undefined : () => onSelect(item.id)}
+      className={cn(
+        navItemBase,
+        narrow
+          ? 'min-w-[60px] flex-1 flex-col justify-center gap-0.5 px-1 py-1.5'
+          : 'gap-2.5 px-2 py-1.5',
+        collapsed && !narrow && 'justify-center px-0 py-2',
+        soon
+          ? 'cursor-default text-muted-foreground opacity-40 hover:opacity-70'
+          : 'text-muted-foreground hover:bg-surface-2 hover:text-foreground',
+        selected && !narrow && 'bg-brand-wash text-brand hover:bg-brand-wash hover:text-brand',
+        selected && narrow && 'text-brand',
+      )}
+    >
+      {/* Leading accent bar on the selected row — mock's `.nav-item::before`.
+          Suppressed on narrow, where the mock drops it too. */}
+      {selected && !narrow && (
+        <span
+          aria-hidden="true"
+          className="absolute -left-2 top-1/2 h-[17px] w-[3px] -translate-y-1/2 rounded-r-[3px] bg-brand"
+        />
+      )}
+      <Icon className={cn('shrink-0', narrow ? 'h-[19px] w-[19px]' : 'h-[17px] w-[17px]')} aria-hidden="true" />
+      {(!collapsed || narrow) && (
+        <span
+          className={cn(
+            'overflow-hidden text-ellipsis whitespace-nowrap',
+            narrow ? 'text-[.6rem] leading-tight' : 'min-w-0 flex-1',
+          )}
+        >
+          {item.label}
+        </span>
+      )}
+      {!collapsed && !narrow && soon && (
+        <span className="shrink-0 rounded-full border border-line-strong px-1 text-[.58rem] uppercase tracking-[.06em] text-faint">
+          soon
+        </span>
+      )}
+      {!collapsed && !narrow && !soon && count != null && count > 0 && (
+        <span
+          className={cn(
+            'rounded-full px-1.5 font-mono text-[.7rem]',
+            attention ? 'bg-attn-wash text-attn' : 'bg-surface-2 text-faint',
+          )}
+        >
+          {count}
+        </span>
+      )}
+    </button>
+  )
+}
+
+export function ActivityRail({
+  mode,
+  collapsed,
+  view,
+  onSelect,
+  onToggleCollapsed,
+  listCollapsed,
+  onToggleList,
+  counts,
+  attentionViews,
+  regionRef,
+  regionFocused,
+}: ActivityRailProps) {
+  const { theme, toggleTheme } = useTheme()
+  const narrow = mode === 'narrow'
+  // On medium the rail is *always* the icon strip: there isn't room for both
+  // a labelled rail and a usable content column, and letting the persisted
+  // `collapsed=false` win there is exactly the "snapping between two
+  // extremes" the story asks us to avoid.
+  const iconOnly = mode === 'medium' || (mode === 'wide' && collapsed)
+
+  const groups = narrow
+    ? [{ heading: undefined, items: RAIL_GROUPS.flatMap((g) => g.items).filter((i) => i.status === 'ready') }]
+    : RAIL_GROUPS
+
+  return (
+    <nav
+      ref={regionRef}
+      tabIndex={-1}
+      data-region="rail"
+      aria-label="Views"
+      className={cn(
+        'flex h-full w-full min-w-0 overflow-hidden bg-surface outline-none',
+        narrow
+          ? 'flex-row border-t border-border pb-[env(safe-area-inset-bottom,0px)]'
+          : 'flex-col border-r border-border',
+        regionFocused && 'ring-1 ring-inset ring-ring',
+      )}
+    >
+      {!narrow && (
+        <div
+          className={cn(
+            'flex items-center gap-[9px] border-b border-border',
+            iconOnly ? 'justify-center px-0 py-3' : 'px-3.5 pb-3 pt-3.5',
+          )}
+        >
+          <span
+            aria-hidden="true"
+            className="grid h-[26px] w-[26px] flex-none place-items-center rounded-[7px] bg-gradient-to-br from-brand to-brand-dim font-mono text-[.72rem] font-bold tracking-[-.02em] text-[#0b1013]"
+          >
+            co
+          </span>
+          {!iconOnly && (
+            <span className="whitespace-nowrap font-semibold tracking-[-.01em]">
+              coord <span className="font-normal text-muted-foreground">web</span>
+            </span>
+          )}
+        </div>
+      )}
+
+      <div
+        className={cn(
+          'flex',
+          narrow
+            ? 'w-full flex-row justify-around gap-0 overflow-x-auto px-0 py-1'
+            : 'flex-1 flex-col gap-px overflow-y-auto px-2 py-2.5',
+        )}
+      >
+        {groups.map((group, groupIndex) => (
+          <div
+            key={group.heading ?? `group-${groupIndex}`}
+            className={cn('flex', narrow ? 'w-full flex-row justify-around' : 'flex-col gap-px')}
+          >
+            {group.heading && !iconOnly && !narrow && (
+              <div className="whitespace-nowrap px-2.5 pb-[5px] pt-3.5 text-[.66rem] font-semibold uppercase tracking-[.09em] text-faint">
+                {group.heading}
+              </div>
+            )}
+            {group.items.map((item) => (
+              <NavItem
+                key={item.id}
+                item={item}
+                mode={mode}
+                collapsed={iconOnly}
+                selected={item.id === view}
+                count={counts?.[item.id]}
+                attention={attentionViews?.has(item.id)}
+                onSelect={onSelect}
+              />
+            ))}
+          </div>
+        ))}
+      </div>
+
+      {!narrow && (
+        <div className="flex flex-col gap-px border-t border-border px-2 py-2.5">
+          <button
+            type="button"
+            onClick={toggleTheme}
+            title={theme === 'dark' ? 'Switch to light theme' : 'Switch to dark theme'}
+            aria-label={theme === 'dark' ? 'Switch to light theme' : 'Switch to dark theme'}
+            className={cn(
+              navItemBase,
+              'gap-[11px] px-2.5 py-1.5 text-muted-foreground hover:bg-surface-2 hover:text-foreground',
+              iconOnly && 'justify-center px-0 py-2',
+            )}
+          >
+            {theme === 'dark' ? (
+              <Sun className="h-[17px] w-[17px] shrink-0" aria-hidden="true" />
+            ) : (
+              <Moon className="h-[17px] w-[17px] shrink-0" aria-hidden="true" />
+            )}
+            {!iconOnly && <span className="flex-1 text-left">Theme</span>}
+          </button>
+
+          <button
+            type="button"
+            aria-disabled="true"
+            title="Settings panel — M-W3"
+            className={cn(
+              navItemBase,
+              'cursor-default gap-[11px] px-2.5 py-1.5 text-muted-foreground opacity-40 hover:opacity-70',
+              iconOnly && 'justify-center px-0 py-2',
+            )}
+          >
+            <Settings2 className="h-[17px] w-[17px] shrink-0" aria-hidden="true" />
+            {!iconOnly && (
+              <>
+                <span className="flex-1 text-left">Settings</span>
+                <span className="rounded-full border border-line-strong px-[5px] text-[.6rem] uppercase tracking-[.06em] text-faint">
+                  soon
+                </span>
+              </>
+            )}
+          </button>
+
+          {/* The mock puts "minimise list" in the panel head; it lives here
+              instead so it can't collide with whatever a panel chooses to put
+              in its own header, and so the way back (expand) is in the same
+              place as the way out. Wide-only: it's the only mode with a third
+              column to give the space to. */}
+          {mode === 'wide' && onToggleList && (
+            <button
+              type="button"
+              onClick={onToggleList}
+              aria-label={listCollapsed ? 'Show list panel' : 'Minimize list panel'}
+              aria-pressed={!!listCollapsed}
+              title={listCollapsed ? 'Show list panel' : 'Minimize list panel'}
+              className={cn(
+                navItemBase,
+                'gap-[11px] px-2.5 py-1.5 text-muted-foreground hover:bg-surface-2 hover:text-foreground',
+                collapsed && 'justify-center px-0 py-2',
+              )}
+            >
+              {listCollapsed ? (
+                <PanelLeftOpen className="h-[17px] w-[17px] shrink-0" aria-hidden="true" />
+              ) : (
+                <PanelLeftClose className="h-[17px] w-[17px] shrink-0" aria-hidden="true" />
+              )}
+              {!collapsed && <span className="flex-1 text-left">{listCollapsed ? 'Show list' : 'Hide list'}</span>}
+            </button>
+          )}
+
+          {/* Medium pins the rail to icons, so offering a toggle there would
+              be a button that does nothing. */}
+          {mode === 'wide' && (
+            <button
+              type="button"
+              onClick={onToggleCollapsed}
+              aria-label={collapsed ? 'Expand rail' : 'Collapse rail'}
+              aria-expanded={!collapsed}
+              title={collapsed ? 'Expand rail' : 'Collapse rail'}
+              className={cn(
+                navItemBase,
+                'gap-[11px] px-2.5 py-1.5 text-muted-foreground hover:bg-surface-2 hover:text-foreground',
+                collapsed && 'justify-center px-0 py-2',
+              )}
+            >
+              {collapsed ? (
+                <ChevronRight className="h-[17px] w-[17px] shrink-0" aria-hidden="true" />
+              ) : (
+                <ChevronLeft className="h-[17px] w-[17px] shrink-0" aria-hidden="true" />
+              )}
+              {!collapsed && <span className="flex-1 text-left">Collapse</span>}
+            </button>
+          )}
+        </div>
+      )}
+    </nav>
+  )
+}

coord/dashboard/webapp/src/shell/AppShell.tsx

@@ -0,0 +1,276 @@
+/**
+ * AppShell (#1547) — the responsive frame every panel hangs off.
+ *
+ * One CSS grid, three compositions, driven entirely by `mode` (see
+ * `breakpoints.ts`). The slots are `ReactNode` props rather than a forked
+ * component tree: `ShellLayout` passes the *same* list node and the *same*
+ * detail node at every viewport, and this file decides only where they land
+ * and which of them is on screen.
+ *
+ *   wide     rail | list | detail, three columns, status bar spanning the
+ *            foot. The list/detail boundary is a draggable separator.
+ *   medium   rail | content. The detail arrives as an overlay sheet in the
+ *            same grid cell as the list, so a drill-in doesn't cost you the
+ *            list you drilled in from.
+ *   narrow   one column, status bar, then the rail as a bottom row. Exactly
+ *            one of list/detail is mounted — this is the phone app's
+ *            drill-in, and mounting both would duplicate every row's text in
+ *            the accessibility tree.
+ *
+ * Mirrors docs/mocks/web/pipeline-wide.html's `.app` grid, including its
+ * `data-rail` / `data-panel` state attributes (kept as real DOM attributes:
+ * they are what an acceptance spec asserts layout state against without
+ * having to measure pixels).
+ */
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  type CSSProperties,
+  type KeyboardEvent as ReactKeyboardEvent,
+  type PointerEvent as ReactPointerEvent,
+  type ReactNode,
+} from 'react'
+
+import { cn } from '@/lib/utils'
+import type { ShellMode } from './breakpoints'
+import {
+  LIST_WIDTH_MAX_PX,
+  LIST_WIDTH_MIN_PX,
+  RAIL_WIDTH_COLLAPSED_PX,
+  RAIL_WIDTH_PX,
+  clampListWidth,
+} from './shellState'
+import type { ShellRegion } from './useRegionFocus'
+
+/** Keyboard resize step for the separator (Shift = coarse). */
+const RESIZE_STEP_PX = 16
+const RESIZE_STEP_COARSE_PX = 64
+
+/**
+ * `inert` isn't in React 18's JSX attribute types (it landed in React 19), but
+ * React does forward unknown lowercase string attributes to the DOM, and every
+ * browser that ships `inert` honours the empty-string form. This is the only
+ * thing that stops Tab from walking into the list hidden *behind* the medium
+ * overlay — `aria-hidden` alone hides it from a screen reader while leaving it
+ * in the tab order, which is the worse of the two failure modes.
+ */
+const INERT_PROPS = { inert: '' } as unknown as Record<string, string>
+
+export interface AppShellProps {
+  mode: ShellMode
+  railCollapsed: boolean
+  listCollapsed: boolean
+  listWidthPx: number
+  onListWidthChange: (px: number) => void
+  /** True when a detail item is selected (on narrow: show detail, hide list). */
+  detailActive: boolean
+  rail: ReactNode
+  list: ReactNode
+  detail: ReactNode
+  status: ReactNode
+  registerRegion: (region: ShellRegion) => (el: HTMLElement | null) => void
+  focusedRegion: ShellRegion | null
+}
+
+export function AppShell({
+  mode,
+  railCollapsed,
+  listCollapsed,
+  listWidthPx,
+  onListWidthChange,
+  detailActive,
+  rail,
+  list,
+  detail,
+  status,
+  registerRegion,
+  focusedRegion,
+}: AppShellProps) {
+  const narrow = mode === 'narrow'
+  const wide = mode === 'wide'
+  // Medium pins the rail to its icon strip regardless of the persisted flag —
+  // see ActivityRail for why.
+  const railPx = wide && !railCollapsed ? RAIL_WIDTH_PX : RAIL_WIDTH_COLLAPSED_PX
+
+  // Wide is the only mode with a third column to give away, so it's the only
+  // mode where "minimise the list" means anything.
+  const listHidden = wide && listCollapsed
+  const showList = narrow ? !detailActive : !listHidden
+  // Wide is the only mode with a column reserved for the detail, so it's the
+  // only one that mounts the "nothing selected" placeholder. On medium the
+  // detail shares the list's grid cell — mounting it unselected would paint an
+  // opaque placeholder straight over the list.
+  const showDetail = wide || detailActive
+  // On medium the detail sheet sits *on top of* the list in the same cell.
+  const detailOverlays = mode === 'medium' && detailActive
+
+  const gridStyle: CSSProperties = narrow
+    ? { gridTemplateColumns: 'minmax(0,1fr)', gridTemplateRows: 'minmax(0,1fr) auto auto' }
+    : {
+        gridTemplateColumns: wide
+          ? `${railPx}px ${listHidden ? 0 : listWidthPx}px minmax(0,1fr)`
+          : `${railPx}px minmax(0,1fr)`,
+        gridTemplateRows: 'minmax(0,1fr) auto',
+      }
+
+  const railStyle: CSSProperties = narrow
+    ? { gridColumn: 1, gridRow: 3 }
+    : { gridColumn: 1, gridRow: 1 }
+  const listStyle: CSSProperties = narrow ? { gridColumn: 1, gridRow: 1 } : { gridColumn: 2, gridRow: 1 }
+  const detailStyle: CSSProperties = narrow
+    ? { gridColumn: 1, gridRow: 1 }
+    : { gridColumn: wide ? 3 : 2, gridRow: 1 }
+  const statusStyle: CSSProperties = narrow
+    ? { gridColumn: 1, gridRow: 2 }
+    : { gridColumn: '1 / -1', gridRow: 2 }
+
+  // ── separator drag ────────────────────────────────────────────────────────
+  const dragRef = useRef<{ startX: number; startWidth: number } | null>(null)
+
+  const onPointerDown = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      // Ignore secondary buttons: a right-click drag would otherwise capture
+      // the pointer and never see a matching pointerup.
+      if (event.button !== 0) return
+      event.preventDefault()
+      event.currentTarget.setPointerCapture(event.pointerId)
+      dragRef.current = { startX: event.clientX, startWidth: listWidthPx }
+      // A col-resize drag that paints half the issue list blue looks broken,
+      // and the cursor must not flicker back to `text` when the pointer
+      // leaves the 7px handle mid-drag.
+      document.body.style.setProperty('user-select', 'none')
+      document.body.style.setProperty('cursor', 'col-resize')
+    },
+    [listWidthPx],
+  )
+
+  const onPointerMove = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      const drag = dragRef.current
+      if (!drag) return
+      onListWidthChange(clampListWidth(drag.startWidth + (event.clientX - drag.startX)))
+    },
+    [onListWidthChange],
+  )
+
+  const endDrag = useCallback((event: ReactPointerEvent<HTMLDivElement>) => {
+    if (!dragRef.current) return
+    dragRef.current = null
+    document.body.style.removeProperty('user-select')
+    document.body.style.removeProperty('cursor')
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId)
+    }
+  }, [])
+
+  const onSeparatorKeyDown = useCallback(
+    (event: ReactKeyboardEvent<HTMLDivElement>) => {
+      const step = event.shiftKey ? RESIZE_STEP_COARSE_PX : RESIZE_STEP_PX
+      switch (event.key) {
+        case 'ArrowLeft':
+          event.preventDefault()
+          onListWidthChange(listWidthPx - step)
+          break
+        case 'ArrowRight':
+          event.preventDefault()
+          onListWidthChange(listWidthPx + step)
+          break
+        case 'Home':
+          event.preventDefault()
+          onListWidthChange(LIST_WIDTH_MIN_PX)
+          break
+        case 'End':
+          event.preventDefault()
+          onListWidthChange(LIST_WIDTH_MAX_PX)
+          break
+        default:
+          break
+      }
+    },
+    [listWidthPx, onListWidthChange],
+  )
+
+  // Unmounting (or dropping out of wide) mid-drag would otherwise strand the
+  // document in `user-select: none; cursor: col-resize` forever.
+  useEffect(
+    () => () => {
+      document.body.style.removeProperty('user-select')
+      document.body.style.removeProperty('cursor')
+    },
+    [],
+  )
+
+  return (
+    <div
+      className="grid h-screen w-full overflow-hidden bg-background text-foreground [height:100dvh]"
+      style={gridStyle}
+      data-shell-mode={mode}
+      data-rail={narrow ? 'bottom' : !wide || railCollapsed ? 'collapsed' : 'expanded'}
+      data-panel={listHidden ? 'collapsed' : 'expanded'}
+      data-detail={detailActive ? 'active' : 'empty'}
+    >
+      <div style={railStyle} className="min-w-0 overflow-hidden">
+        {rail}
+      </div>
+
+      {showList && (
+        <section
+          ref={registerRegion('list')}
+          tabIndex={-1}
+          data-region="list"
+          aria-label="List"
+          aria-hidden={detailOverlays || undefined}
+          {...(detailOverlays ? INERT_PROPS : {})}
+          style={listStyle}
+          className={cn(
+            'relative flex min-w-0 flex-col overflow-hidden bg-background outline-none',
+            !narrow && 'border-r border-border',
+            focusedRegion === 'list' && 'ring-1 ring-inset ring-ring',
+          )}
+        >
+          <div className="min-h-0 flex-1 overflow-y-auto">{list}</div>
+
+          {wide && (
+            <div
+              role="separator"
+              aria-orientation="vertical"
+              aria-label="Resize list panel"
+              aria-valuenow={listWidthPx}
+              aria-valuemin={LIST_WIDTH_MIN_PX}
+              aria-valuemax={LIST_WIDTH_MAX_PX}
+              tabIndex={0}
+              onPointerDown={onPointerDown}
+              onPointerMove={onPointerMove}
+              onPointerUp={endDrag}
+              onPointerCancel={endDrag}
+              onKeyDown={onSeparatorKeyDown}
+              className="absolute -right-[3px] bottom-0 top-0 z-20 w-[7px] cursor-col-resize touch-none bg-transparent transition-colors hover:bg-brand/40 focus-visible:bg-brand/60 focus-visible:outline-none"
+            />
+          )}
+        </section>
+      )}
+
+      {showDetail && (
+        <main
+          ref={registerRegion('detail')}
+          tabIndex={-1}
+          data-region="detail"
+          aria-label="Detail"
+          style={detailStyle}
+          className={cn(
+            'flex min-w-0 flex-col overflow-hidden bg-background outline-none',
+            detailOverlays && 'z-10 border-l border-border shadow-elevation',
+            focusedRegion === 'detail' && 'ring-1 ring-inset ring-ring',
+          )}
+        >
+          <div className="min-h-0 flex-1 overflow-y-auto">{detail}</div>
+        </main>
+      )}
+
+      <div style={statusStyle} className="min-w-0">
+        {status}
+      </div>
+    </div>
+  )
+}

coord/dashboard/webapp/src/shell/ComingSoon.tsx

@@ -0,0 +1,33 @@
+/**
+ * The list panel's content for a rail-listed view that has a route (#1548
+ * asks for "placeholders for the panels M-W5+ will add") but no panel yet —
+ * Board, Machines, Merge queue, Milestones, Audit, Spend, Settings.
+ *
+ * These routes exist for exactly one reason: so a link to `/board` or
+ * `/spend` is a real, bookmarkable, not-found-free address today, and
+ * swapping this placeholder for the real panel later is a one-line change in
+ * `App.tsx`, not a new route. The rail itself already marks these `'soon'`
+ * (see `railItems.ts`) and won't navigate here on a click — this is what a
+ * *typed or pasted* link to one of them lands on in the meantime.
+ */
+import { RAIL_ITEMS } from './railItems'
+import type { ShellView } from './shellState'
+
+export interface ComingSoonProps {
+  view: ShellView
+}
+
+export function ComingSoon({ view }: ComingSoonProps) {
+  const item = RAIL_ITEMS.find((i) => i.id === view)
+  const Icon = item?.icon
+
+  return (
+    <div className="flex h-full flex-col items-center justify-center gap-3 px-6 py-12 text-center">
+      {Icon && <Icon className="h-7 w-7 text-faint" aria-hidden="true" />}
+      <p className="text-sm font-medium text-foreground">{item?.label ?? 'Coming soon'}</p>
+      <p className="max-w-xs text-xs text-muted-foreground">
+        {item?.hint ?? 'This panel is not built yet.'}
+      </p>
+    </div>
+  )
+}

coord/dashboard/webapp/src/shell/EmptyDetail.tsx

@@ -0,0 +1,26 @@
+/**
+ * What the wide layout's detail column shows before anything is selected
+ * (#1547).
+ *
+ * Only ever rendered on wide/medium: on narrow the shell mounts the list
+ * *instead of* the detail, so there is no "nothing selected" state to fill.
+ * It doubles as the shell's one piece of keyboard-affordance signage — F6 is
+ * discoverable nowhere else, and this is the emptiest surface in the app.
+ */
+import { MousePointerClick } from 'lucide-react'
+
+export function EmptyDetail() {
+  return (
+    <div className="flex h-full flex-col items-center justify-center gap-3 px-6 py-12 text-center">
+      <MousePointerClick className="h-7 w-7 text-faint" aria-hidden="true" />
+      <p className="text-sm font-medium text-foreground">Nothing selected</p>
+      <p className="max-w-xs text-xs text-muted-foreground">
+        Pick an item from the list to see its stages, worker and actions here.
+      </p>
+      <p className="text-xs text-faint">
+        <kbd className="rounded border border-line-strong px-1 font-mono text-[.7rem]">F6</kbd>{' '}
+        cycles rail → list → detail
+      </p>
+    </div>
+  )
+}