code-coordinator 0.5.46__py3-none-any.whl

coord/dashboard/webapp/src/components/MobileKeyBar.tsx

@@ -0,0 +1,280 @@
+/**
+ * MobileKeyBar — the bottom-half input surface for driving the interactive
+ * `claude` TUI from a phone (#1070, part of epic #1064). Sits below
+ * `Terminal`'s xterm pane and sends the byte sequences a mobile soft-keyboard
+ * makes painful to reach: Esc, arrows, Ctrl-C, Tab, `/`, plus a line-input
+ * field for typing a command and submitting it.
+ *
+ * This component knows nothing about WebSockets or xterm -- it just calls
+ * `onSend(bytes)` with a raw string (one JS char per terminal byte, e.g.
+ * `'\x1b[A'` for Up) and `onControl(action)` for copy-mode control frames,
+ * leaving the actual write-to-PTY / JSON-frame plumbing to the caller
+ * (`Terminal.tsx`'s `sendRaw` / `sendControl`, same path `term.onData` uses).
+ *
+ * ## Scroll mode (#1299)
+ *
+ * Tapping **Scroll** enters a server-driven copy-mode (via
+ * `{"type":"copy-mode","action":"enter"}`) so the user can scroll back through
+ * tmux pane history from the phone without needing access to the prefix key or
+ * tmux's copy-mode key bindings. While in scroll mode:
+ *   - An unmistakable **SCROLL** badge makes the current mode obvious.
+ *   - The normal key rows are replaced by Page Up / Page Down / Top / Bottom
+ *     controls and an Exit button.
+ *   - Submitting the line-input sends `exit` first so the text lands in the
+ *     live pane, not in tmux's copy-mode search.
+ *
+ * `connectionKey` is incremented by `Terminal.tsx` on every WebSocket open
+ * (including reconnects). A reconnect resets copy-mode server-side (a fresh
+ * `tmux attach-session` starts outside copy-mode), so the component resets the
+ * scroll toggle on `connectionKey` change so the badge always reflects reality.
+ *
+ * Multi-line submission to `claude` needs bracketed paste + a settle delay +
+ * a *separate* trailing `\r` (see the #425/#426 PTY-submission notes) -- out
+ * of scope here. The line-input only ever sends a single line followed by
+ * `\r`, matching the issue's "get single-line + Enter solid first" guidance.
+ *
+ * Every soft key is a `type="button"` with `onMouseDown` preventing the
+ * default focus change, so tapping a key never blurs the line-input field --
+ * if the phone's native keyboard is up because the user is mid-line, a
+ * Ctrl-C or arrow tap shouldn't dismiss it.
+ */
+import { useEffect, useState, type FormEvent, type ReactNode } from 'react'
+import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight, CornerDownLeft } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+/** Escape / control byte sequences a real terminal would emit for these keys. */
+export const KEY_BYTES = {
+  escape: '\x1b',
+  up: '\x1b[A',
+  down: '\x1b[B',
+  right: '\x1b[C',
+  left: '\x1b[D',
+  enter: '\r',
+  ctrlC: '\x03',
+  tab: '\x09',
+  slash: '/',
+} as const
+
+export interface MobileKeyBarProps {
+  /** Send raw bytes (as a JS string) down the terminal's input path. */
+  onSend: (data: string) => void
+  /** Send a copy-mode control action (e.g. "enter", "page-up") to the server. */
+  onControl: (action: string) => void
+  /**
+   * Incremented by `Terminal.tsx` on every WebSocket open (initial connect and
+   * reconnects). A change signals that server-side copy-mode state has been
+   * cleared, so the component resets its scroll toggle to avoid a stale badge.
+   */
+  connectionKey?: number
+}
+
+interface SoftKeyProps {
+  ariaLabel: string
+  bytes: string
+  onSend: (data: string) => void
+  className?: string
+  children: ReactNode
+}
+
+function SoftKey({ ariaLabel, bytes, onSend, className, children }: SoftKeyProps) {
+  return (
+    <button
+      type="button"
+      aria-label={ariaLabel}
+      onMouseDown={(e) => e.preventDefault()}
+      onClick={() => onSend(bytes)}
+      className={cn(
+        'flex items-center justify-center rounded-md border border-border bg-card py-3',
+        'text-sm font-medium text-foreground active:bg-accent',
+        className,
+      )}
+    >
+      {children}
+    </button>
+  )
+}
+
+interface ControlKeyProps {
+  ariaLabel: string
+  action: string
+  onControl: (action: string) => void
+  className?: string
+  children: ReactNode
+}
+
+function ControlKey({ ariaLabel, action, onControl, className, children }: ControlKeyProps) {
+  return (
+    <button
+      type="button"
+      aria-label={ariaLabel}
+      onMouseDown={(e) => e.preventDefault()}
+      onClick={() => onControl(action)}
+      className={cn(
+        'flex items-center justify-center rounded-md border border-border bg-card py-3',
+        'text-sm font-medium text-foreground active:bg-accent',
+        className,
+      )}
+    >
+      {children}
+    </button>
+  )
+}
+
+export default function MobileKeyBar({ onSend, onControl, connectionKey }: MobileKeyBarProps) {
+  const [line, setLine] = useState('')
+  const [scrollMode, setScrollMode] = useState(false)
+
+  // Reset scroll toggle whenever the WebSocket reconnects. A fresh
+  // `tmux attach-session` always starts outside copy-mode, so a stale
+  // "SCROLL" badge would lie about the server's real state.
+  useEffect(() => {
+    setScrollMode(false)
+  }, [connectionKey])
+
+  const enterScroll = () => {
+    setScrollMode(true)
+    onControl('enter')
+  }
+
+  const exitScroll = () => {
+    setScrollMode(false)
+    onControl('exit')
+  }
+
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault()
+    if (!line) return
+    // If we're in scroll mode, exit copy-mode first so the typed text lands in
+    // the live pane rather than tmux's copy-mode search buffer.
+    if (scrollMode) {
+      onControl('exit')
+      setScrollMode(false)
+    }
+    onSend(line + KEY_BYTES.enter)
+    setLine('')
+  }
+
+  return (
+    <div className="flex h-full flex-col justify-end gap-2 px-2 py-2" data-testid="mobile-key-bar">
+      {scrollMode ? (
+        // ── Scroll mode: copy-mode controls ──────────────────────────────────
+        <>
+          {/* Badge — always visible so the user knows where taps are going. */}
+          <div
+            role="status"
+            aria-label="Scroll mode active"
+            className="flex items-center justify-center rounded-md bg-primary px-3 py-1 text-xs font-bold uppercase tracking-widest text-primary-foreground"
+          >
+            SCROLL
+          </div>
+
+          {/* Scrollback navigation row */}
+          <div className="grid grid-cols-4 gap-2">
+            <ControlKey ariaLabel="Page Up" action="page-up" onControl={onControl}>
+              Pg Up
+            </ControlKey>
+            <ControlKey ariaLabel="Page Down" action="page-down" onControl={onControl}>
+              Pg Dn
+            </ControlKey>
+            <ControlKey ariaLabel="Top" action="top" onControl={onControl}>
+              Top
+            </ControlKey>
+            <ControlKey ariaLabel="Bottom" action="bottom" onControl={onControl}>
+              Bottom
+            </ControlKey>
+          </div>
+
+          {/* Exit scroll mode */}
+          <button
+            type="button"
+            aria-label="Exit Scroll"
+            onMouseDown={(e) => e.preventDefault()}
+            onClick={exitScroll}
+            className={cn(
+              'flex w-full items-center justify-center rounded-md border border-primary py-3',
+              'text-sm font-medium text-primary active:bg-accent',
+            )}
+          >
+            Exit Scroll
+          </button>
+        </>
+      ) : (
+        // ── Normal mode: standard key rows + Scroll toggle ───────────────────
+        <>
+          <div className="grid grid-cols-4 gap-2">
+            <SoftKey ariaLabel="Escape" bytes={KEY_BYTES.escape} onSend={onSend}>
+              Esc
+            </SoftKey>
+            <SoftKey ariaLabel="Tab" bytes={KEY_BYTES.tab} onSend={onSend}>
+              Tab
+            </SoftKey>
+            <SoftKey ariaLabel="Ctrl-C" bytes={KEY_BYTES.ctrlC} onSend={onSend}>
+              Ctrl-C
+            </SoftKey>
+            <SoftKey ariaLabel="Slash" bytes={KEY_BYTES.slash} onSend={onSend}>
+              /
+            </SoftKey>
+          </div>
+
+          <div className="grid grid-cols-4 gap-2">
+            <SoftKey ariaLabel="Left" bytes={KEY_BYTES.left} onSend={onSend}>
+              <ArrowLeft size={18} />
+            </SoftKey>
+            <SoftKey ariaLabel="Up" bytes={KEY_BYTES.up} onSend={onSend}>
+              <ArrowUp size={18} />
+            </SoftKey>
+            <SoftKey ariaLabel="Down" bytes={KEY_BYTES.down} onSend={onSend}>
+              <ArrowDown size={18} />
+            </SoftKey>
+            <SoftKey ariaLabel="Right" bytes={KEY_BYTES.right} onSend={onSend}>
+              <ArrowRight size={18} />
+            </SoftKey>
+          </div>
+
+          {/* Scroll toggle — enters copy-mode for pane history (#1299). */}
+          <button
+            type="button"
+            aria-label="Scroll"
+            onMouseDown={(e) => e.preventDefault()}
+            onClick={enterScroll}
+            className={cn(
+              'flex w-full items-center justify-center rounded-md border border-border bg-card py-3',
+              'text-sm font-medium text-foreground active:bg-accent',
+            )}
+          >
+            Scroll
+          </button>
+        </>
+      )}
+
+      <SoftKey ariaLabel="Enter" bytes={KEY_BYTES.enter} onSend={onSend} className="w-full gap-2">
+        <CornerDownLeft size={16} />
+        Enter
+      </SoftKey>
+
+      <form onSubmit={handleSubmit} className="flex gap-2">
+        <input
+          type="text"
+          value={line}
+          onChange={(e) => setLine(e.target.value)}
+          placeholder="Type a command…"
+          aria-label="Command line"
+          inputMode="text"
+          enterKeyHint="send"
+          autoCapitalize="off"
+          autoCorrect="off"
+          autoComplete="off"
+          spellCheck={false}
+          className="min-w-0 flex-1 rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary"
+        />
+        <button
+          type="submit"
+          aria-label="Send line"
+          className="shrink-0 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground active:opacity-80"
+        >
+          Send
+        </button>
+      </form>
+    </div>
+  )
+}

coord/dashboard/webapp/src/components/PanelHeader.tsx

@@ -0,0 +1,59 @@
+/**
+ * The list panel's head (#1547) — the mock's `.panel-title`: view name, a
+ * mono count of what the machine is tracking, and a slot on the right for
+ * whatever the panel wants to say about its own freshness.
+ *
+ * The `co` mark is narrow-only (`md:hidden`, and Tailwind's `md` is 768px —
+ * the same value as `BREAKPOINT_MEDIUM_PX`). On narrow the rail is a bottom
+ * icon row with no head, so without this the phone would lose the app's
+ * identity entirely; from 768px up the rail head carries it and a second mark
+ * here would just be a duplicate.
+ *
+ * The theme toggle (#1551) is narrow-only for the same reason and by the same
+ * mechanism: `docs/mocks/web/pipeline-narrow.html`'s per-view topbar carries
+ * its own Theme icon-button (`id="theme"`) because the bottom nav has no room
+ * for it — narrow's rail deliberately shows only `ready` nav entries
+ * (`ActivityRail.tsx`) and a dimmed un-tappable settings-style control there
+ * would eat thumb real estate. From 768px up the rail foot already has
+ * "Theme" (`ActivityRail.tsx`), so this one is `md:hidden` — CSS `display:
+ * none`, which Playwright's (and every screen reader's) accessibility-tree
+ * role queries already exclude, exactly like the `co` mark above — never two
+ * "Switch to … theme" buttons live in the tree at once.
+ */
+import type { ReactNode } from 'react'
+import { ThemeToggle } from '@/components/ui/theme-toggle'
+
+export interface PanelHeaderProps {
+  title: string
+  /** Mono count shown after the title; omitted when undefined. */
+  count?: number
+  /** Word after the count, e.g. "tracked" → `7 tracked`. */
+  countLabel?: string
+  /** Right-hand slot (freshness, refresh pulse, …). */
+  children?: ReactNode
+}
+
+export function PanelHeader({ title, count, countLabel = 'tracked', children }: PanelHeaderProps) {
+  return (
+    <header className="mb-4 flex items-center gap-2.5">
+      <span
+        aria-hidden="true"
+        className="grid h-[22px] w-[22px] flex-none place-items-center rounded-md bg-gradient-to-br from-brand to-brand-dim font-mono text-[.62rem] font-bold tracking-[-.02em] text-[#0b1013] md:hidden"
+      >
+        co
+      </span>
+      <h1 className="text-step-1 font-semibold tracking-[-.01em] text-foreground">{title}</h1>
+      {count != null && (
+        <span className="font-mono text-[.75rem] text-faint">
+          {count} {countLabel}
+        </span>
+      )}
+      <div className="ml-auto flex items-center gap-2">
+        {children}
+        <div className="md:hidden">
+          <ThemeToggle />
+        </div>
+      </div>
+    </header>
+  )
+}

coord/dashboard/webapp/src/components/PipelineCard.tsx

@@ -0,0 +1,168 @@
+/**
+ * PipelineCard — a phone-friendly card for one in-flight pipeline item.
+ *
+ * Shows: issue title, repo + issue number, stage chips (work→test→review→merge),
+ * machine name, and an overall status badge.
+ */
+import { cn } from '@/lib/utils'
+import { type PipelineView, type PipelineStage } from '@/api/client'
+
+// ── Stage display helpers ─────────────────────────────────────────────────────
+
+/**
+ * Map the internal stage name from pipeline.py to the user-facing label.
+ * Work Order matches the TUI: Work → Test → Review → Merge.
+ */
+const STAGE_LABEL: Record<string, string> = {
+  coding: 'work',
+  smoke:  'test',
+  review: 'review',
+  merge:  'merge',
+}
+
+/**
+ * Fine-grained `current_stage` values that indicate the pipeline is currently
+ * running (i.e. a subprocess is in progress — no human action required yet).
+ */
+const RUNNING_STAGES = new Set([
+  'coding',
+  'review_running',
+  'smoke_running',
+  'merging',
+])
+
+/**
+ * Fine-grained `current_stage` values that are terminal failures or need
+ * human attention before the pipeline can advance.
+ */
+const FAILED_STAGES = new Set([
+  'failed',
+  'review_failed',
+  'smoke_failed',
+])
+
+/** Return Tailwind classes for a single stage chip. */
+function stageChipClass(stage: PipelineStage, currentStage: string): string {
+  const base = 'rounded px-1.5 py-0.5 text-xs font-medium'
+
+  if (stage.is_current) {
+    // Active stage — colour by failure vs running
+    if (FAILED_STAGES.has(currentStage)) {
+      return cn(base, 'bg-destructive text-destructive-foreground')
+    }
+    return cn(base, 'bg-primary text-primary-foreground')
+  }
+
+  switch (stage.status) {
+    case 'completed':
+      return cn(base, 'bg-green-700 text-white')
+    case 'skipped':
+      return cn(base, 'border border-border text-muted-foreground opacity-40')
+    default:
+      // "waiting"
+      return cn(base, 'border border-border text-muted-foreground')
+  }
+}
+
+// ── Overall status badge ──────────────────────────────────────────────────────
+
+interface StatusInfo {
+  label: string
+  className: string
+}
+
+/** Map fine-grained current_stage to a human badge + colour. */
+function stageStatusInfo(currentStage: string): StatusInfo {
+  if (RUNNING_STAGES.has(currentStage)) {
+    return { label: 'running', className: 'bg-primary text-primary-foreground' }
+  }
+  if (FAILED_STAGES.has(currentStage)) {
+    return { label: 'failed', className: 'bg-destructive text-destructive-foreground' }
+  }
+  switch (currentStage) {
+    case 'merged':
+      return { label: 'merged', className: 'bg-green-700 text-white' }
+    case 'merge_ready':
+      return { label: 'mergeable', className: 'bg-yellow-600 text-black' }
+    case 'review_done':
+      return { label: 'review ✓', className: 'bg-yellow-600 text-black' }
+    case 'smoke_passed':
+      return { label: 'test ✓', className: 'bg-yellow-600 text-black' }
+    case 'done':
+      return { label: 'work done', className: 'bg-yellow-600 text-black' }
+    default:
+      return { label: currentStage.replace(/_/g, ' '), className: 'bg-secondary text-secondary-foreground' }
+  }
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+export interface PipelineCardProps {
+  view: PipelineView
+  onClick: () => void
+  /**
+   * This row's item is the one open in the detail panel (#1547).
+   *
+   * Only ever true on a viewport wide enough to show list and detail at once —
+   * on a phone the detail replaces the list, so there is nothing to mark. The
+   * treatment is the mock's `.row[aria-selected="true"]`: an accent bar on the
+   * leading edge plus a stronger border, never a fill, because the accent
+   * means "work is happening here" and a selected row hasn't earned it.
+   */
+  selected?: boolean
+}
+
+export function PipelineCard({ view, onClick, selected }: PipelineCardProps) {
+  const { label: statusLabel, className: statusClass } = stageStatusInfo(view.current_stage)
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-current={selected ? 'true' : undefined}
+      className={cn(
+        'relative w-full overflow-hidden rounded-lg border border-border bg-card p-4 text-left shadow-sm transition-colors active:bg-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+        selected && 'border-line-strong before:absolute before:inset-y-2 before:left-0 before:w-[2px] before:rounded-r-sm before:bg-brand before:content-[\'\']',
+      )}
+    >
+      {/* Top row: issue title + status badge */}
+      <div className="flex items-start justify-between gap-3">
+        <p className="flex-1 truncate text-sm font-medium text-card-foreground">
+          {view.issue_title}
+        </p>
+        <span
+          className={cn(
+            'shrink-0 rounded-full px-2 py-0.5 text-xs font-semibold',
+            statusClass,
+          )}
+        >
+          {statusLabel}
+        </span>
+      </div>
+
+      {/* Second row: repo#N + machine */}
+      <p className="mt-1 text-xs text-muted-foreground">
+        {view.repo_name} <span className="font-mono">#{view.issue_number}</span>
+        {' · '}
+        {view.machine_name}
+      </p>
+
+      {/* Stage chips */}
+      <div className="mt-3 flex flex-wrap gap-1.5">
+        {view.stages.map((stage) => (
+          <span
+            key={stage.name}
+            className={stageChipClass(stage, view.current_stage)}
+          >
+            {STAGE_LABEL[stage.name] ?? stage.name}
+          </span>
+        ))}
+      </div>
+
+      {/* Review findings pending indicator */}
+      {view.review_findings_pending && (
+        <p className="mt-2 text-xs text-yellow-500">⚠ Review findings not yet posted</p>
+      )}
+    </button>
+  )
+}

coord/dashboard/webapp/src/components/SessionCard.tsx

@@ -0,0 +1,99 @@
+/**
+ * SessionCard — a phone-friendly card for one live coord-* interactive
+ * tmux session (#1066's `GET /api/sessions`). Tapping navigates to the
+ * `/terminal/:sessionId` take-over view (#1065's `/ws/terminal/{id}` bridge).
+ */
+import { cn } from '@/lib/utils'
+import { type SessionInfo } from '@/api/client'
+
+interface StatusInfo {
+  label: string
+  className: string
+}
+
+/**
+ * Human-facing label for the session's assignment type
+ * (`session.stage` is literally `Assignment.type`, e.g. "work"/"smoke"/
+ * "review"/"conflict-fix"/"fix"/"plan"/... — see `server.py`'s
+ * `"stage": assignment.type if assignment else None`).
+ *
+ * This is deliberately its own map, not `PipelineCard`'s `STAGE_LABEL` —
+ * that one is keyed by `pipeline.py`'s *derived* stage names ("coding",
+ * "merge", ...), which only accidentally overlap with real `Assignment.type`
+ * values on "smoke" and "review" (#1276 review). There is no literal
+ * `type="merge"`; both the automated #241 rebase-conflict worker and the
+ * interactive `--merge-of` session dispatch as `type="conflict-fix"`, so
+ * that's translated to the "merge" label users expect here.
+ */
+const ASSIGNMENT_TYPE_LABEL: Record<string, string> = {
+  smoke: 'test',
+  review: 'review',
+  'conflict-fix': 'merge',
+}
+
+function stageLabel(stage: string): string {
+  return ASSIGNMENT_TYPE_LABEL[stage] ?? stage
+}
+
+/** Badge reflecting whether the session is live/attached/ended. */
+function sessionStatusInfo(session: SessionInfo): StatusInfo {
+  if (session.pane_dead) {
+    return { label: 'ended', className: 'bg-secondary text-secondary-foreground' }
+  }
+  if (session.attached) {
+    return { label: 'attached', className: 'bg-yellow-600 text-black' }
+  }
+  return { label: 'live', className: 'bg-primary text-primary-foreground' }
+}
+
+export interface SessionCardProps {
+  session: SessionInfo
+  onClick: () => void
+}
+
+export function SessionCard({ session, onClick }: SessionCardProps) {
+  const { label: statusLabel, className: statusClass } = sessionStatusInfo(session)
+  const title = session.issue_title ?? session.session_name
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="w-full rounded-lg border border-border bg-card p-4 text-left shadow-sm transition-colors active:bg-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    >
+      {/* Top row: title + assignment-type chip (when resolvable) + status badge */}
+      <div className="flex items-start justify-between gap-3">
+        <p className="flex-1 truncate text-sm font-medium text-card-foreground">
+          {title}
+        </p>
+        <div className="flex shrink-0 items-center gap-1.5">
+          {session.stage && (
+            <span className="rounded border border-border px-1.5 py-0.5 text-xs font-medium text-muted-foreground">
+              {stageLabel(session.stage)}
+            </span>
+          )}
+          <span
+            className={cn(
+              'rounded-full px-2 py-0.5 text-xs font-semibold',
+              statusClass,
+            )}
+          >
+            {statusLabel}
+          </span>
+        </div>
+      </div>
+
+      {/* Second row: repo#N + machine, when the session maps to a tracked assignment */}
+      {(session.repo || session.machine) && (
+        <p className="mt-1 text-xs text-muted-foreground">
+          {session.repo}
+          {session.issue !== null && (
+            <span className="font-mono"> #{session.issue}</span>
+          )}
+          {session.repo && session.machine && ' · '}
+          {session.machine}
+        </p>
+      )}
+    </button>
+  )
+}