code-coordinator 0.5.46__py3-none-any.whl

coord/dashboard/webapp/src/shell/breakpoints.ts

@@ -0,0 +1,87 @@
+/**
+ * Responsive breakpoints for the app shell (#1547).
+ *
+ * Three modes, not two — the story asks explicitly that mid widths "degrade
+ * sensibly rather than snapping between two extremes":
+ *
+ *   narrow  (< 768px)      the phone app, preserved verbatim: one column,
+ *                          bottom nav, drill-in navigation.
+ *   medium  (768–1023px)   rail collapses to its 60px icon strip, the list
+ *                          keeps the whole content column, and the detail
+ *                          arrives as an overlay above it (still a drill-in,
+ *                          just without losing the list underneath).
+ *   wide    (>= 1024px)    the `SidebarView` twin: rail + list + detail, all
+ *                          three visible at once.
+ *
+ * The story's stated wide threshold is 1024px and the Gate-A mock
+ * (docs/mocks/web/pipeline-wide.html) switches to its bottom-row layout at
+ * 900px. Those aren't in conflict once there are three modes: 1024 is where
+ * the third column appears, and the phone layout is kept for genuinely
+ * phone-sized viewports (< 768) rather than for every tablet.
+ *
+ * Default when `matchMedia` is unavailable (jsdom, SSR) is `narrow` — the
+ * conservative choice, since that's the layout that is in daily use and the
+ * one every pre-existing component test was written against.
+ */
+import { useEffect, useState } from 'react'
+
+export const BREAKPOINT_MEDIUM_PX = 768
+export const BREAKPOINT_WIDE_PX = 1024
+
+export type ShellMode = 'narrow' | 'medium' | 'wide'
+
+const WIDE_QUERY = `(min-width: ${BREAKPOINT_WIDE_PX}px)`
+const MEDIUM_QUERY = `(min-width: ${BREAKPOINT_MEDIUM_PX}px)`
+
+function readMode(): ShellMode {
+  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+    return 'narrow'
+  }
+  if (window.matchMedia(WIDE_QUERY).matches) return 'wide'
+  if (window.matchMedia(MEDIUM_QUERY).matches) return 'medium'
+  return 'narrow'
+}
+
+/**
+ * Current shell mode, recomputed whenever either breakpoint is crossed.
+ *
+ * The initial value is computed synchronously in the `useState` initialiser
+ * (not in an effect) so a wide browser's very first paint is already the wide
+ * layout — no one-frame flash of the phone app on a 32" monitor.
+ */
+export function useShellMode(): ShellMode {
+  const [mode, setMode] = useState<ShellMode>(readMode)
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return
+
+    const wide = window.matchMedia(WIDE_QUERY)
+    const medium = window.matchMedia(MEDIUM_QUERY)
+    const sync = () => setMode(readMode())
+
+    // Re-sync once on mount: between the render-time read above and this
+    // effect, the viewport may have changed (or matchMedia may have been
+    // stubbed in late, as the test setup does).
+    sync()
+
+    // `addListener`/`removeListener` are the deprecated MediaQueryList API;
+    // some of the older WebKit builds this PWA is installed on (iOS < 14)
+    // never got `addEventListener` on MediaQueryList, so fall back.
+    const subscribe = (mql: MediaQueryList) => {
+      if (typeof mql.addEventListener === 'function') {
+        mql.addEventListener('change', sync)
+        return () => mql.removeEventListener('change', sync)
+      }
+      if (typeof mql.addListener === 'function') {
+        mql.addListener(sync)
+        return () => mql.removeListener(sync)
+      }
+      return () => {}
+    }
+
+    const unsubscribes = [subscribe(wide), subscribe(medium)]
+    return () => unsubscribes.forEach((fn) => fn())
+  }, [])
+
+  return mode
+}

coord/dashboard/webapp/src/shell/railItems.ts

@@ -0,0 +1,105 @@
+/**
+ * The activity rail's contents (#1547).
+ *
+ * "Panels not yet built are visibly *coming*, not silently absent — the rail
+ * is the program's own progress bar." So this list is the whole planned M-W1
+ * surface, and each entry carries its own truth about whether it exists yet.
+ * A `'soon'` entry renders dimmed with a `soon` pill and is not activatable
+ * (the Gate-A mock, docs/mocks/web/pipeline-wide.html, gives them
+ * `opacity:.42` and `cursor:default`); flipping one to `'ready'` when its
+ * story lands is a one-line change here plus a case in `ShellLayout`.
+ *
+ * Grouping follows the mock exactly: an ungrouped top block, then Flow, then
+ * Insight, with Theme / Settings / Collapse pinned to the rail foot.
+ */
+import {
+  BarChart3,
+  GitMerge,
+  LayoutDashboard,
+  Milestone,
+  ScrollText,
+  Server,
+  SquareTerminal,
+  Terminal,
+  Workflow,
+  type LucideIcon,
+} from 'lucide-react'
+
+import type { ShellView } from './shellState'
+
+export type RailItemStatus = 'ready' | 'soon'
+
+export interface RailItem {
+  id: ShellView
+  label: string
+  icon: LucideIcon
+  status: RailItemStatus
+  /** Group heading this item sits under; `undefined` = the top block. */
+  group?: string
+  /** Shown on hover / in the `soon` pill's tooltip. */
+  hint?: string
+}
+
+export const RAIL_ITEMS: readonly RailItem[] = [
+  { id: 'pipeline', label: 'Pipeline', icon: Workflow, status: 'ready' },
+  { id: 'board', label: 'Board', icon: LayoutDashboard, status: 'soon', hint: 'Board panel — M-W2' },
+  { id: 'sessions', label: 'Sessions', icon: SquareTerminal, status: 'ready' },
+  {
+    id: 'terminal',
+    label: 'Terminal',
+    icon: Terminal,
+    status: 'soon',
+    hint: 'Standalone terminal panel — open one from Sessions for now',
+  },
+  { id: 'machines', label: 'Machines', icon: Server, status: 'soon', hint: 'Machines panel — M-W2' },
+
+  {
+    id: 'merge-queue',
+    label: 'Merge queue',
+    icon: GitMerge,
+    status: 'soon',
+    group: 'Flow',
+    hint: 'Merge queue panel — M-W2',
+  },
+  {
+    id: 'milestones',
+    label: 'Milestones',
+    icon: Milestone,
+    status: 'soon',
+    group: 'Flow',
+    hint: 'Milestone DAG — M-W3',
+  },
+
+  {
+    id: 'audit',
+    label: 'Audit',
+    icon: ScrollText,
+    status: 'soon',
+    group: 'Insight',
+    hint: 'Audit trail — milestone #33',
+  },
+  {
+    id: 'spend',
+    label: 'Spend',
+    icon: BarChart3,
+    status: 'soon',
+    group: 'Insight',
+    hint: 'Spend & time observability — milestone #37',
+  },
+] as const
+
+/**
+ * Rail items in render order, split into their heading groups. Computed once
+ * at module scope: `RAIL_ITEMS` is a constant, so recomputing per render would
+ * be pure waste and would break `React.memo` on any consumer.
+ */
+export const RAIL_GROUPS: ReadonlyArray<{ heading?: string; items: RailItem[] }> =
+  RAIL_ITEMS.reduce<Array<{ heading?: string; items: RailItem[] }>>((groups, item) => {
+    const last = groups[groups.length - 1]
+    if (last && last.heading === item.group) {
+      last.items.push(item)
+    } else {
+      groups.push({ heading: item.group, items: [item] })
+    }
+    return groups
+  }, [])

coord/dashboard/webapp/src/shell/shellState.ts

@@ -0,0 +1,174 @@
+/**
+ * Persisted shell geometry (#1547, trimmed by #1548).
+ *
+ * "Panel sizes survive a reload" is an acceptance criterion, so geometry
+ * lives in one localStorage blob under a single key, written on every change
+ * and read once at mount. Reads and writes are individually guarded:
+ * `localStorage` throws outright in Safari private browsing and in lockdown
+ * modes, and a shell that refuses to render because it couldn't remember a
+ * panel width would be a worse bug than forgetting the width. Same posture
+ * (and same key prefix) as `ui/theme-provider.tsx`.
+ *
+ * The *selected view* used to live here too, decoupled from the URL on
+ * purpose because routing was explicitly the next story. #1548 is that
+ * story: the rail selection, the selected pipeline item and the selected
+ * session are now derived from the URL (see `src/routes/paths.ts`'s
+ * `shellViewFromPath`) so they are addressable, bookmarkable and survive a
+ * reload *because the URL does* — no separate persistence needed, and none
+ * left here to go stale against a bookmarked link. What's left is exactly
+ * the class of state the story says must *not* leak into the URL: panel
+ * geometry that has no meaning to anyone reading the link over your
+ * shoulder.
+ */
+import { useCallback, useState } from 'react'
+
+export const SHELL_STORAGE_KEY = 'coord-web-shell'
+
+/** Every entry the activity rail can show, built or not. */
+export type ShellView =
+  | 'pipeline'
+  | 'board'
+  | 'sessions'
+  | 'terminal'
+  | 'machines'
+  | 'merge-queue'
+  | 'milestones'
+  | 'audit'
+  | 'spend'
+  | 'settings'
+
+export const LIST_WIDTH_MIN_PX = 260
+export const LIST_WIDTH_MAX_PX = 640
+export const LIST_WIDTH_DEFAULT_PX = 360
+
+export const RAIL_WIDTH_PX = 216
+export const RAIL_WIDTH_COLLAPSED_PX = 60
+
+export interface ShellState {
+  railCollapsed: boolean
+  listCollapsed: boolean
+  listWidthPx: number
+}
+
+const DEFAULT_STATE: ShellState = {
+  railCollapsed: false,
+  listCollapsed: false,
+  listWidthPx: LIST_WIDTH_DEFAULT_PX,
+}
+
+export function clampListWidth(px: number): number {
+  if (!Number.isFinite(px)) return LIST_WIDTH_DEFAULT_PX
+  return Math.min(LIST_WIDTH_MAX_PX, Math.max(LIST_WIDTH_MIN_PX, Math.round(px)))
+}
+
+/**
+ * Parse a persisted blob field-by-field rather than trusting its shape.
+ * The key is user-writable (devtools) and, more practically, will be read by
+ * future builds after this schema grows — an unknown or half-written value
+ * must degrade to the default, never to `NaN` grid columns.
+ *
+ * A blob written by a pre-#1548 build still has a `view` field in it — it's
+ * simply ignored below rather than special-cased, the same way any other
+ * stale/unknown key would be.
+ */
+export function parseShellState(raw: string | null): ShellState {
+  if (!raw) return DEFAULT_STATE
+  let parsed: unknown
+  try {
+    parsed = JSON.parse(raw)
+  } catch {
+    return DEFAULT_STATE
+  }
+  if (typeof parsed !== 'object' || parsed === null) return DEFAULT_STATE
+  const obj = parsed as Record<string, unknown>
+
+  return {
+    railCollapsed:
+      typeof obj.railCollapsed === 'boolean' ? obj.railCollapsed : DEFAULT_STATE.railCollapsed,
+    listCollapsed:
+      typeof obj.listCollapsed === 'boolean' ? obj.listCollapsed : DEFAULT_STATE.listCollapsed,
+    listWidthPx:
+      typeof obj.listWidthPx === 'number'
+        ? clampListWidth(obj.listWidthPx)
+        : DEFAULT_STATE.listWidthPx,
+  }
+}
+
+function readShellState(): ShellState {
+  if (typeof window === 'undefined') return DEFAULT_STATE
+  try {
+    return parseShellState(window.localStorage.getItem(SHELL_STORAGE_KEY))
+  } catch {
+    return DEFAULT_STATE
+  }
+}
+
+function writeShellState(state: ShellState): void {
+  if (typeof window === 'undefined') return
+  try {
+    window.localStorage.setItem(SHELL_STORAGE_KEY, JSON.stringify(state))
+  } catch {
+    // Persistence is a nice-to-have; the layout still applies this session.
+  }
+}
+
+export interface UseShellState extends ShellState {
+  setRailCollapsed: (collapsed: boolean) => void
+  toggleRail: () => void
+  setListCollapsed: (collapsed: boolean) => void
+  toggleList: () => void
+  setListWidthPx: (px: number) => void
+}
+
+export function useShellState(): UseShellState {
+  const [state, setState] = useState<ShellState>(readShellState)
+
+  const update = useCallback((patch: Partial<ShellState>) => {
+    setState((prev) => {
+      const next = { ...prev, ...patch }
+      // Cheap identity guard: a pointer-drag resize fires many times a second
+      // and would otherwise re-render (and re-serialise) on every no-op move.
+      if (
+        next.railCollapsed === prev.railCollapsed &&
+        next.listCollapsed === prev.listCollapsed &&
+        next.listWidthPx === prev.listWidthPx
+      ) {
+        return prev
+      }
+      writeShellState(next)
+      return next
+    })
+  }, [])
+
+  return {
+    ...state,
+    setRailCollapsed: useCallback(
+      (railCollapsed: boolean) => update({ railCollapsed }),
+      [update],
+    ),
+    toggleRail: useCallback(
+      () => setState((prev) => {
+        const next = { ...prev, railCollapsed: !prev.railCollapsed }
+        writeShellState(next)
+        return next
+      }),
+      [],
+    ),
+    setListCollapsed: useCallback(
+      (listCollapsed: boolean) => update({ listCollapsed }),
+      [update],
+    ),
+    toggleList: useCallback(
+      () => setState((prev) => {
+        const next = { ...prev, listCollapsed: !prev.listCollapsed }
+        writeShellState(next)
+        return next
+      }),
+      [],
+    ),
+    setListWidthPx: useCallback(
+      (px: number) => update({ listWidthPx: clampListWidth(px) }),
+      [update],
+    ),
+  }
+}

coord/dashboard/webapp/src/shell/useRegionFocus.ts

@@ -0,0 +1,95 @@
+/**
+ * Keyboard region cycling for the shell (#1547) — the web-idiomatic answer to
+ * coord-tui's `FocusedRegion` / Ctrl-W.
+ *
+ * The binding is **F6 / Shift+F6**, which is the long-standing platform
+ * convention for "move to the next pane" (Firefox and Chrome both use it to
+ * cycle browser panes, VS Code uses it for editor groups, and Windows uses it
+ * app-wide). It is also, unusually for a function key, safe: no browser
+ * assigns F6 to anything that a web page stealing it would break, and it
+ * doesn't collide with a text field the way a Ctrl-letter chord does — so the
+ * handler doesn't need to special-case typing in the list panel's filter box.
+ *
+ * Focus lands on the *region container* (each is `tabIndex={-1}` with an
+ * accessible name), not on the first control inside it. That's the standard
+ * landmark-navigation behaviour: a screen reader announces the region you
+ * arrived in, and a plain Tab from there walks into its controls.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+export type ShellRegion = 'rail' | 'list' | 'detail'
+
+export interface UseRegionFocus {
+  /** The region focus was last moved to via F6, for a visible ring. */
+  focusedRegion: ShellRegion | null
+  /** Ref callback factory: `ref={registerRegion('list')}`. */
+  registerRegion: (region: ShellRegion) => (el: HTMLElement | null) => void
+  /** Programmatic move (used by the resize handle's Escape, and by tests). */
+  focusRegion: (region: ShellRegion) => void
+}
+
+/**
+ * @param visibleRegions Regions currently on screen, in visual order. Regions
+ *   omitted here are skipped by F6 — on narrow only one of list/detail exists
+ *   at a time, and cycling into a `display:none` container would silently drop
+ *   focus to `<body>`.
+ */
+export function useRegionFocus(visibleRegions: ShellRegion[]): UseRegionFocus {
+  const elements = useRef<Partial<Record<ShellRegion, HTMLElement | null>>>({})
+  const [focusedRegion, setFocusedRegion] = useState<ShellRegion | null>(null)
+
+  // The keydown listener is attached once; reading the order through a ref
+  // keeps it from being torn down and rebuilt on every layout change.
+  const orderRef = useRef(visibleRegions)
+  orderRef.current = visibleRegions
+
+  const registerRegion = useCallback(
+    (region: ShellRegion) => (el: HTMLElement | null) => {
+      elements.current[region] = el
+    },
+    [],
+  )
+
+  const focusRegion = useCallback((region: ShellRegion) => {
+    const el = elements.current[region]
+    if (!el) return
+    el.focus()
+    setFocusedRegion(region)
+  }, [])
+
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== 'F6') return
+      const order = orderRef.current
+      if (order.length === 0) return
+
+      // Where are we now? Prefer the region that actually contains
+      // `document.activeElement` over the last F6 target, so an F6 after a
+      // mouse click continues from where the user is rather than from where
+      // the keyboard last was.
+      const active = document.activeElement as HTMLElement | null
+      let currentIndex = order.findIndex((region) => {
+        const el = elements.current[region]
+        return !!el && !!active && el.contains(active)
+      })
+      if (currentIndex === -1) currentIndex = order.indexOf(focusedRegion as ShellRegion)
+
+      const step = event.shiftKey ? -1 : 1
+      // `currentIndex === -1` (focus is outside every region) + step 1 lands
+      // on index 0, which is the intended "enter the shell at the rail".
+      const nextIndex = (currentIndex + step + order.length) % order.length
+      const next = order[nextIndex]
+      const el = elements.current[next]
+      if (!el) return
+
+      event.preventDefault()
+      el.focus()
+      setFocusedRegion(next)
+    }
+
+    window.addEventListener('keydown', onKeyDown)
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [focusedRegion])
+
+  return { focusedRegion, registerRegion, focusRegion }
+}

coord/dashboard/webapp/src/test-setup.ts

@@ -0,0 +1,41 @@
+import '@testing-library/jest-dom'
+
+// jsdom doesn't implement matchMedia (https://github.com/jsdom/jsdom/issues/3522).
+// xterm.js's CoreBrowserService queries it (devicePixelRatio change listener) as
+// soon as a Terminal is opened, which crashes every Terminal-pane test (#1068)
+// without this stub.
+if (typeof window !== 'undefined' && !window.matchMedia) {
+  window.matchMedia = (query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => false,
+  })
+}
+
+// jsdom's canvas is stubbed (no `canvas` npm package installed) -- getContext('2d')
+// logs a noisy "Not implemented" jsdom error and returns undefined either way.
+// xterm.js already handles a missing 2D context gracefully (its color helper
+// falls back to manual CSS-color parsing), so short-circuit straight to that
+// path and skip the console noise.
+if (typeof HTMLCanvasElement !== 'undefined') {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- matching the DOM lib's overload surface isn't worth it for a test-only stub
+  HTMLCanvasElement.prototype.getContext = (() => null) as any
+}
+
+// jsdom doesn't implement ResizeObserver (https://github.com/jsdom/jsdom/issues/3368).
+// Terminal.tsx uses it to watch the pane container for layout shifts that
+// window.resize misses (e.g. MobileKeyBar height changes, safe-area adjustments).
+// A no-op stub prevents "ResizeObserver is not defined" crashes in every
+// Terminal test while preserving real behaviour in a real browser.
+if (typeof globalThis.ResizeObserver === 'undefined') {
+  globalThis.ResizeObserver = class ResizeObserver {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+}

coord/dashboard/webapp/src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-pwa/client" />

coord/dashboard/webapp/tailwind.config.js

@@ -0,0 +1,140 @@
+import animate from 'tailwindcss-animate'
+
+/**
+ * Tailwind config for coord web's design-token layer (#1546).
+ *
+ * Colour values are plain CSS custom properties (hex / rgba), NOT the
+ * `hsl(var(--x))` triplets shadcn/ui's default template uses -- the token
+ * seed this builds on (docs/mocks/web/_tokens.css) is authored in hex, and
+ * re-deriving HSL triplets from it would be one more place for the real
+ * theme to drift from the settled mocks. `var(--x)` works as a Tailwind
+ * colour value exactly like `hsl(var(--x))` does; only the storage format
+ * differs.
+ *
+ * Two colour vocabularies coexist deliberately:
+ *  - the shadcn semantic slots (background/foreground/card/primary/...)
+ *    that ui/* primitives and existing components (PipelineCard,
+ *    ConnectionBadge, MobileKeyBar) already consume, so migrating the token
+ *    values underneath them is a one-file change;
+ *  - the raw mock palette (ground/surface/line/brand/pass/attn/fail/idle/
+ *    faint) exposed under its own names for new primitives and the gallery,
+ *    matching docs/mocks/web/_tokens.css exactly.
+ *
+ * `accent` is kept pointed at the neutral hover/press surface (its existing
+ * meaning -- see MobileKeyBar's `active:bg-accent`) rather than repointed at
+ * the mock's cyan "work is happening" colour, which would have silently
+ * recoloured every existing pressed-state highlight. The cyan lives under
+ * `brand` instead (`--accent` the CSS custom property, to match the mock's
+ * own naming) and drives `ring`/`primary`, matching the mocks' focus and
+ * primary-button treatment.
+ */
+export default {
+  darkMode: ['selector', '[data-theme="dark"]'],
+  content: ['./index.html', './src/**/*.{ts,tsx,js,jsx}'],
+  theme: {
+    container: {
+      center: true,
+      padding: '2rem',
+    },
+    extend: {
+      colors: {
+        border: 'var(--border)',
+        input: 'var(--input)',
+        ring: 'var(--ring)',
+        background: 'var(--background)',
+        foreground: 'var(--foreground)',
+        primary: {
+          DEFAULT: 'var(--primary)',
+          foreground: 'var(--primary-foreground)',
+        },
+        secondary: {
+          DEFAULT: 'var(--secondary)',
+          foreground: 'var(--secondary-foreground)',
+        },
+        destructive: {
+          DEFAULT: 'var(--destructive)',
+          foreground: 'var(--destructive-foreground)',
+        },
+        muted: {
+          DEFAULT: 'var(--muted)',
+          foreground: 'var(--muted-foreground)',
+        },
+        accent: {
+          DEFAULT: 'var(--accent-surface)',
+          foreground: 'var(--accent-surface-foreground)',
+        },
+        card: {
+          DEFAULT: 'var(--card)',
+          foreground: 'var(--card-foreground)',
+        },
+        popover: {
+          DEFAULT: 'var(--popover)',
+          foreground: 'var(--popover-foreground)',
+        },
+
+        // ── raw mock palette (docs/mocks/web/_tokens.css) ────────────────
+        ground: 'var(--ground)',
+        surface: {
+          DEFAULT: 'var(--surface)',
+          2: 'var(--surface-2)',
+          3: 'var(--surface-3)',
+        },
+        line: {
+          DEFAULT: 'var(--line)',
+          strong: 'var(--line-strong)',
+        },
+        faint: 'var(--text-faint)',
+        brand: {
+          DEFAULT: 'var(--accent)',
+          dim: 'var(--accent-dim)',
+          wash: 'var(--accent-wash)',
+        },
+        pass: {
+          DEFAULT: 'var(--pass)',
+          wash: 'var(--pass-wash)',
+        },
+        attn: {
+          DEFAULT: 'var(--attn)',
+          wash: 'var(--attn-wash)',
+        },
+        fail: {
+          DEFAULT: 'var(--fail)',
+          wash: 'var(--fail-wash)',
+        },
+        idle: {
+          DEFAULT: 'var(--idle)',
+          wash: 'var(--idle-wash)',
+        },
+      },
+      fontFamily: {
+        sans: ['var(--font-ui)'],
+        mono: ['var(--font-mono)'],
+      },
+      fontSize: {
+        'step--1': 'var(--step--1)',
+        'step-0': 'var(--step-0)',
+        'step-1': 'var(--step-1)',
+        'step-2': 'var(--step-2)',
+        'step-3': 'var(--step-3)',
+      },
+      borderRadius: {
+        sm: 'var(--r-sm)',
+        md: 'var(--r-md)',
+        lg: 'var(--r-lg)',
+      },
+      boxShadow: {
+        elevation: '0 18px 44px -12px rgba(0,0,0,.66)',
+      },
+      keyframes: {
+        'pulse-ring': {
+          '0%, 100%': { opacity: 1, boxShadow: '0 0 0 0 var(--accent-wash)' },
+          '50%': { opacity: 0.55, boxShadow: '0 0 0 6px transparent' },
+        },
+      },
+      animation: {
+        'pulse-ring': 'pulse-ring 2s ease-in-out infinite',
+      },
+    },
+  },
+  plugins: [animate],
+}

coord/dashboard/webapp/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

coord/dashboard/webapp/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}