code-coordinator 0.5.46__py3-none-any.whl

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

@@ -0,0 +1,33 @@
+/**
+ * Whole-app 404 (#1548) — what a URL that matches no route in the tree at
+ * all renders, e.g. a typo'd path or a link to a feature that was removed.
+ *
+ * Distinct from `Detail`'s own not-found state (a syntactically valid
+ * `/pipeline/:repo/:issue` whose issue isn't in today's pipeline — a *stale*
+ * link, not an *unknown* one): that one already exists per-item and knows
+ * the repo/issue it failed to find. This one is the catch-all `*` route
+ * inside `ShellLayout`, so it still renders inside the shell (rail, status
+ * bar) rather than a blank document — "a real not-found state, not a blank
+ * panel or a crash" per the story's acceptance criteria.
+ */
+import { Compass } from 'lucide-react'
+import { Link } from 'react-router-dom'
+import { paths } from '@/routes/paths'
+
+export function RouteNotFound() {
+  return (
+    <div className="flex h-full flex-col items-center justify-center gap-3 px-6 py-12 text-center">
+      <Compass className="h-7 w-7 text-faint" aria-hidden="true" />
+      <p className="text-sm font-medium text-foreground">Page not found</p>
+      <p className="max-w-xs text-xs text-muted-foreground">
+        There's nothing at this address.
+      </p>
+      <Link
+        to={paths.pipeline()}
+        className="mt-1 rounded-full border border-border px-3 py-1 text-xs text-muted-foreground hover:text-foreground"
+      >
+        Go to Pipeline
+      </Link>
+    </div>
+  )
+}

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

@@ -0,0 +1,147 @@
+/**
+ * ShellLayout (#1547, routed by #1548) — the react-router *layout route*
+ * that composes the shell, and the single place that decides what goes in
+ * which slot.
+ *
+ * The composition is deliberately boring, because that is the acceptance
+ * criterion: there is no `isMobile ? <PhoneHome/> : <DesktopHome/>`. `list`
+ * and `detail` are computed once and handed to `AppShell` unchanged; the only
+ * thing `mode` decides is where they land and which of them is mounted.
+ *
+ * The detail slot is `<Outlet/>` — so the child route (`/pipeline` ->
+ * `EmptyDetail`, `/pipeline/:repo/:issue[/:tab]` -> `Detail`,
+ * `/sessions/:id` -> `SessionDetail`, an unbuilt panel's own path ->
+ * `ComingSoon`, anything else -> `RouteNotFound`) fills it.
+ *
+ * The rail selection is derived from the URL (`shellViewFromPath`), not from
+ * persisted state: that was the explicit deferral #1547 made ("routing and
+ * deep links are the next story"), and this *is* that story. A URL is now
+ * the single source of truth for "what view am I looking at" — reload,
+ * bookmark, paste into Slack, browser back — all of it falls out of normal
+ * router behaviour instead of a second, URL-independent state machine that
+ * could disagree with the address bar.
+ */
+import { Outlet, useLocation, useMatch, useNavigate } from 'react-router-dom'
+import { useCallback, type ReactNode } from 'react'
+import { useQuery } from '@tanstack/react-query'
+
+import Home from '@/components/Home'
+import SessionsList from '@/components/SessionsList'
+import { fetchPipeline, fetchSessions } from '@/api/client'
+import { isActive, needsMe } from '@/lib/pipeline'
+import { RAIL_VIEW_PATH, shellViewFromPath } from '@/routes/paths'
+import { AppShell } from './AppShell'
+import { ActivityRail } from './ActivityRail'
+import { ComingSoon } from './ComingSoon'
+import { RouteNotFound } from './RouteNotFound'
+import { StatusBar } from './StatusBar'
+import { useShellMode } from './breakpoints'
+import { useShellState, type ShellView } from './shellState'
+import { useRegionFocus, type ShellRegion } from './useRegionFocus'
+
+const ATTENTION_VIEWS: ReadonlySet<ShellView> = new Set<ShellView>(['pipeline'])
+
+export function ShellLayout() {
+  const mode = useShellMode()
+  const shell = useShellState()
+  const navigate = useNavigate()
+  const location = useLocation()
+
+  // Which rail entry the current URL belongs to — `null` for a path with no
+  // owning view (an unmatched route; root `/` never reaches here, see
+  // `App.tsx`'s redirect).
+  const currentView = shellViewFromPath(location.pathname)
+
+  // The detail slot is "active" (narrow: shown instead of the list; medium:
+  // overlaid on it) exactly when the route names a specific item — a
+  // pipeline issue (with or without a tab segment) or a session. Matched
+  // explicitly rather than inferred from `currentView`, because "there is an
+  // Outlet route that fills the detail slot" and "which rail item is lit up"
+  // are genuinely different questions once there's more than one detail-
+  // capable list.
+  const pipelineItemMatch = useMatch('/pipeline/:repo/:issue')
+  const pipelineItemTabMatch = useMatch('/pipeline/:repo/:issue/:tab')
+  const sessionItemMatch = useMatch('/sessions/:id')
+  const detailActive = !!(pipelineItemMatch || pipelineItemTabMatch || sessionItemMatch)
+
+  // Same query keys the panels use, so this is a cache read, not a second
+  // fetch (see main.tsx: staleTime Infinity + SSE-driven invalidation).
+  const { data: pipeline } = useQuery({ queryKey: ['pipeline'], queryFn: fetchPipeline })
+  const { data: sessions } = useQuery({ queryKey: ['sessions'], queryFn: fetchSessions })
+
+  const inFlight = pipeline?.filter(isActive).length
+  const attention = pipeline?.some(needsMe) ?? false
+  // `machine` is nullable on SessionInfo (a session on a host the roster
+  // hasn't resolved yet) — a `null` in the status bar would render as an empty
+  // segment between two separators.
+  const machines = sessions
+    ? Array.from(new Set(sessions.map((s) => s.machine).filter((m): m is string => !!m))).sort()
+    : []
+
+  // Kept in step with AppShell's own `showList` / `showDetail` — F6 must not
+  // offer a region that isn't mounted.
+  const listMounted = mode === 'narrow' ? !detailActive : !(mode === 'wide' && shell.listCollapsed)
+  const detailMounted = mode === 'wide' || detailActive
+
+  // F6 must skip regions that aren't on screen — cycling into an unmounted
+  // container would silently drop focus to <body>.
+  const visibleRegions: ShellRegion[] = [
+    'rail' as const,
+    ...(listMounted ? (['list'] as const) : []),
+    ...(detailMounted ? (['detail'] as const) : []),
+  ]
+  const { focusedRegion, registerRegion } = useRegionFocus(visibleRegions)
+
+  const handleSelectView = useCallback(
+    (view: ShellView) => {
+      const path = RAIL_VIEW_PATH[view]
+      // Every 'ready' rail entry has a path; a 'soon' entry never reaches
+      // here (ActivityRail doesn't wire onClick for it). The guard is for
+      // type honesty (`RAIL_VIEW_PATH` is a `Partial`), not a real runtime case.
+      if (path) navigate(path)
+    },
+    [navigate],
+  )
+
+  let list: ReactNode
+  if (currentView === 'pipeline') {
+    list = <Home />
+  } else if (currentView === 'sessions') {
+    list = <SessionsList />
+  } else if (currentView === null) {
+    list = <RouteNotFound />
+  } else {
+    list = <ComingSoon view={currentView} />
+  }
+
+  return (
+    <AppShell
+      mode={mode}
+      railCollapsed={shell.railCollapsed}
+      listCollapsed={shell.listCollapsed}
+      listWidthPx={shell.listWidthPx}
+      onListWidthChange={shell.setListWidthPx}
+      detailActive={detailActive}
+      registerRegion={registerRegion}
+      focusedRegion={focusedRegion}
+      rail={
+        <ActivityRail
+          mode={mode}
+          collapsed={shell.railCollapsed}
+          view={currentView}
+          onSelect={handleSelectView}
+          onToggleCollapsed={shell.toggleRail}
+          listCollapsed={shell.listCollapsed}
+          onToggleList={shell.toggleList}
+          counts={{ pipeline: inFlight, sessions: sessions?.length }}
+          attentionViews={attention ? ATTENTION_VIEWS : undefined}
+          regionRef={registerRegion('rail')}
+          regionFocused={focusedRegion === 'rail'}
+        />
+      }
+      list={list}
+      detail={<Outlet />}
+      status={<StatusBar inFlight={inFlight} sessions={sessions?.length} machines={machines} />}
+    />
+  )
+}

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

@@ -0,0 +1,46 @@
+/**
+ * Shell status bar (#1547) — the mock's `.statusbar`, promoted from inside
+ * `.main` to a full-width foot row so it is one element at every breakpoint
+ * instead of appearing and disappearing with the detail column.
+ *
+ * It is also now the app's *only* `ConnectionBadge`. It used to be rendered
+ * once per screen (Home and Detail each had their own); with wide showing both
+ * at once that would be two live-region `role="status"` nodes saying the same
+ * thing, which is noise for a screen reader and an ambiguous locator for a
+ * test.
+ *
+ * Everything else here is mono, because everything else here is a value the
+ * machine owns. Nothing is invented: counts come from the same React-Query
+ * caches the panels read, and a figure with no data source (the mock's
+ * "$14.82 today") is simply absent until Spend lands.
+ */
+import { ConnectionBadge } from '@/components/ConnectionBadge'
+
+export interface StatusBarProps {
+  /** Pipeline items not yet merged. */
+  inFlight?: number
+  /** Live interactive sessions. */
+  sessions?: number
+  /** Distinct machines those sessions are on. */
+  machines?: string[]
+}
+
+export function StatusBar({ inFlight, sessions, machines }: StatusBarProps) {
+  return (
+    <footer
+      aria-label="Status"
+      className="flex items-center gap-4 overflow-x-auto whitespace-nowrap border-t border-border bg-surface px-3 py-1.5 font-mono text-[.69rem] text-faint md:px-5"
+    >
+      <ConnectionBadge />
+      {inFlight != null && <span>{inFlight} in flight</span>}
+      {sessions != null && (
+        <span>
+          {sessions} {sessions === 1 ? 'session' : 'sessions'}
+        </span>
+      )}
+      {machines && machines.length > 0 && (
+        <span className="hidden md:inline">{machines.join(' · ')}</span>
+      )}
+    </footer>
+  )
+}