@spzxg/cli-ui 0.6.2 → 0.6.5

package/src/operator/node/shared.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import type { Priority, Status } from "./protocol/types";
+import { Icon, AgentMark } from "./icons";
+import { SCLS, SLABEL, AWAIT_LABEL } from "./types";
+
+export function StatusDot({ status, running, awaiting, lg }: { status: Status; running?: boolean; awaiting?: boolean; lg?: boolean }) {
+  // Signal language (mission-control): "needs your input" is an alert coral, a
+  // *live* working session is blue (both pulse to draw the eye), and an idle
+  // status falls back to its base color. Awaiting wins over running — a turn
+  // parked on a question is technically live but it's really waiting on you.
+  const cls = awaiting ? "c" : running ? "b" : SCLS[status];
+  return (
+    <span
+      className={`sdot ${cls} ${lg ? "lg" : ""} ${awaiting || running ? "pulse" : ""}`}
+      title={awaiting ? AWAIT_LABEL : running ? "运行中" : SLABEL[status]}
+    />
+  );
+}
+
+export function PriPill({ p }: { p: Priority }) {
+  const map: Record<Priority, string> = { hi: "高", med: "中", lo: "低" };
+  return <span className={`pri ${p}`}>{map[p]}</span>;
+}
+
+export function SearchBar({ value, onChange, placeholder }: { value: string; onChange: (v: string) => void; placeholder: string }) {
+  return (
+    <div className="search-bar">
+      <span className="search-ic">{Icon.search()}</span>
+      <input
+        className="search-input" value={value} placeholder={placeholder} spellCheck={false}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={(e) => { if (e.key === "Escape" && value) { e.stopPropagation(); onChange(""); } }}
+      />
+      {value && <button className="search-clear" title="清除搜索" onClick={() => onChange("")}>{Icon.x()}</button>}
+    </div>
+  );
+}
+
+// Chat avatar. The assistant side wears the brand mark of the agent the task
+// actually runs on (Claude / Codex), so a transcript says at a glance who wrote
+// it; an unknown or missing agent id falls back to the generic bolt.
+export function Avatar({ who, agent }: { who: "user" | "cc"; agent?: string | null }) {
+  if (who === "user") return <span className="av you">A</span>;
+  const mark = agent ? AgentMark[agent] : undefined;
+  return <span className={`av cc${mark ? ` ${agent}` : ""}`}>{mark ? mark() : Icon.bolt()}</span>;
+}
+
+// Which agent driver a task runs under (Claude Code / Codex …). Hidden when only
+// one agent is available (nothing to disambiguate) so single-agent workspaces
+// stay clutter-free. `multi` is passed by the caller from the agents bundle.
+export function AgentBadge({ label, multi }: { label: string; multi: boolean }) {
+  if (!multi) return null;
+  return <span className="agent-badge" title={`运行于 ${label}`}>{label}</span>;
+}
+
+// ---- async-state primitives (pair with the .spinner/.load-note/.skel/.err-note
+// styles in globals.css) — every panel that fetches uses these, so loading and
+// error presentation stays uniform across the app. ----
+
+export function Spinner({ size }: { size?: number }) {
+  return <span className="spinner" role="status" aria-label="加载中" style={size ? { width: size, height: size } : undefined} />;
+}
+
+// Standard "we're fetching" line: spinner + quiet text. Replaces bare "Loading…".
+export function LoadNote({ children, style }: { children: React.ReactNode; style?: React.CSSProperties }) {
+  return <div className="load-note" style={style}><Spinner size={13} />{children}</div>;
+}
+
+// One shimmer bar. Compose a few for card/list/transcript skeletons.
+export function Skel({ w, h = 10, r, style }: { w: number | string; h?: number; r?: number | string; style?: React.CSSProperties }) {
+  return <span className="skel" aria-hidden style={{ width: w, height: h, ...(r !== undefined ? { borderRadius: r } : null), ...style }} />;
+}
+
+// Recoverable-error line: the message plus an inline Retry when the caller can
+// simply refetch. Same warm-red voice as transcript system errors.
+export function ErrNote({ children, onRetry, retryLabel = "重试", style }: {
+  children: React.ReactNode; onRetry?: () => void; retryLabel?: string; style?: React.CSSProperties;
+}) {
+  return (
+    <div className="err-note" style={style}>
+      <span className="err-msg">⚠ {children}</span>
+      {onRetry && <button className="btn btn-line btn-sm" onClick={onRetry}>{Icon.restore()} {retryLabel}</button>}
+    </div>
+  );
+}
+
+// One shared accessible popover for the full workspace and standalone controls.
+export { Popover } from "../../ui/Popover";

package/src/operator/node/transcriptModel.ts

@@ -0,0 +1,129 @@
+// Pure helpers behind the live transcript (useTaskStream + SessionView), kept
+// free of React so they can be unit-tested. The rules they encode exist for
+// long tasks: thousands of messages, megabytes of tool output.
+
+import type { ToolData } from "./protocol/types";
+import type { Msg } from "./types";
+import { buildSessions } from "./format";
+
+/** Messages the live view's snapshot carries (GET /messages?tail=N). */
+export const SNAPSHOT_TAIL = 300;
+/** Older messages fetched per page from /history. */
+export const HISTORY_PAGE = 300;
+/** Transcript rows kept in the DOM while following the newest output. */
+export const RENDER_WINDOW = 120;
+/** Rows revealed per step when scrolling back (or forward again). */
+export const RENDER_STEP = 80;
+/** Most rows ever in the DOM at once; the far end is dropped beyond this. */
+export const RENDER_MAX = 360;
+/**
+ * Transcripts one tab keeps in memory: the open task plus the most recently
+ * left ones (switching back to those shows at once). Each kept one is trimmed
+ * to a snapshot's size when left (trimToTail), so on real node data this is
+ * ~10 MB typical, well under 100 MB at worst. Per tab: several tabs on the
+ * same task each keep their own.
+ */
+export const KEEP_TRANSCRIPTS = 30;
+
+/**
+ * A transcript the tab is leaving, brought back to what a fresh snapshot holds
+ * (the newest `tail` messages; `older` grows by what was dropped), so a task
+ * read far back doesn't keep thousands of messages around in the background.
+ * Returns the input untouched when it is already that small.
+ */
+export function trimToTail(msgs: Msg[], older: number, tail = SNAPSHOT_TAIL): { msgs: Msg[]; older: number } {
+  const queued = msgs.filter((m) => m.role === "queued");
+  const rest = msgs.filter((m) => m.role !== "queued");
+  if (rest.length <= tail) return { msgs, older };
+  return { msgs: [...rest.slice(rest.length - tail), ...queued], older: older + rest.length - tail };
+}
+
+/** The tab's kept-transcript order after opening `id`, and which tasks fall out. */
+export function touchRecent(recent: string[], id: string, keep = KEEP_TRANSCRIPTS): { recent: string[]; evicted: string[] } {
+  const next = [id, ...recent.filter((t) => t !== id)];
+  return { recent: next.slice(0, keep), evicted: next.slice(keep) };
+}
+
+// Parsed tool payloads, cached per message object. Message objects are replaced
+// whenever their content changes, so a cached entry can never go stale, and the
+// transcript stops re-parsing every tool row's JSON on each live event.
+const toolCache = new WeakMap<Msg, ToolData>();
+/** The tool card behind a "tool" message. Read-only: never mutate the result. */
+export function toolDataOf(m: Msg): ToolData {
+  let data = toolCache.get(m);
+  if (!data) {
+    try { data = JSON.parse(m.content) as ToolData; } catch { data = { title: m.content }; }
+    toolCache.set(m, data);
+  }
+  return data;
+}
+
+/** Index of the message with this id, searching from the newest end (where live updates land). */
+export function indexFromEnd(arr: Msg[], id: string): number {
+  for (let i = arr.length - 1; i >= 0; i--) if (arr[i].id === id) return i;
+  return -1;
+}
+
+/** True when an AskUserQuestion card near the end is still unanswered. */
+export function hasOpenAsk(messages: Msg[], scan = 400): boolean {
+  for (let i = messages.length - 1, n = 0; i >= 0 && n < scan; i--, n++) {
+    const m = messages[i];
+    if (m.role !== "tool") continue;
+    const d = toolDataOf(m);
+    if (d.ask && !d.ask.answers) return true;
+  }
+  return false;
+}
+
+/**
+ * Apply a (re)connect snapshot to what the tab already holds.
+ *
+ * - Unchanged messages keep their object identity, so memoized rows don't
+ *   re-render (and re-parse their markdown) on every reconnect.
+ * - Older pages the user already scrolled in are kept when the snapshot's tail
+ *   still overlaps them; `older` is reduced by what was kept.
+ */
+export function mergeSnapshot(prev: Msg[] | undefined, committed: Msg[], queued: Msg[], older: number): { msgs: Msg[]; older: number } {
+  const byId = new Map<string, Msg>();
+  for (const m of prev ?? []) byId.set(m.id, m);
+  const reuse = (m: Msg): Msg => {
+    const p = byId.get(m.id);
+    if (!p || p.role !== m.role || p.content !== m.content || p.generation !== m.generation) return m;
+    return p.ts === m.ts ? p : { ...p, ts: m.ts };
+  };
+  const fresh = committed.map(reuse);
+  let kept: Msg[] = [];
+  if (prev && fresh.length && older > 0) {
+    const at = prev.findIndex((m) => m.id === fresh[0].id);
+    // Only persisted rows (they carry ts) — local notices died with the old view.
+    if (at > 0) kept = prev.slice(0, at).filter((m) => m.role !== "queued" && m.ts != null);
+  }
+  return { msgs: [...kept, ...fresh, ...queued.map(reuse)], older: Math.max(0, older - kept.length) };
+}
+
+export type TranscriptItem =
+  | { kind: "label"; key: string; n: number; current: boolean }
+  | { kind: "break"; key: string; summary: string }
+  | { kind: "msg"; key: string; m: Msg; initial: boolean; hideWho: boolean };
+
+/**
+ * The transcript as a flat row list (session labels, /clear breaks, messages),
+ * so the view can render any window of it. `hasOlder`: earlier messages aren't
+ * loaded yet, so the first loaded one is not necessarily its session's opener.
+ */
+export function buildTranscriptItems(messages: Msg[], hasOlder: boolean): TranscriptItem[] {
+  const sessions = buildSessions(messages);
+  const items: TranscriptItem[] = [];
+  sessions.forEach((s, si) => {
+    if (si > 0 && s.summaryBefore) items.push({ kind: "break", key: `b-${s.n}`, summary: s.summaryBefore });
+    items.push({ kind: "label", key: `s-${s.n}`, n: s.n, current: si === sessions.length - 1 });
+    s.messages.forEach((m, mi) => {
+      const prev = s.messages[mi - 1];
+      // collapse the repeated agent header across an assistant run (text → tool → text)
+      const hideWho = m.role === "assistant" && !!prev && (prev.role === "assistant" || prev.role === "tool");
+      const initial = mi === 0 && m.role === "user" && !(si === 0 && hasOlder);
+      items.push({ kind: "msg", key: m.id, m, initial, hideWho });
+    });
+  });
+  return items;
+}

package/src/operator/node/types.ts

@@ -0,0 +1,296 @@
+// Client-side shapes + UI constants shared across the orchestrator modules.
+// Pure data only (no React / no Icon) so any module can import freely.
+import type { Priority, Status } from "./protocol/types";
+import type { InternalUsageEstimate } from "./protocol/internalUsage";
+export type { InternalUsageEstimate };
+
+// ---------- client shapes ----------
+export interface ProjectRow {
+  id: string;
+  name: string;
+  icon: string;
+  sub: string;
+  color: string;
+  context: string;
+  repo_path: string;
+  branch: string;
+  dev_command: string;
+  setup_command: string;
+  test_command: string;
+  default_agent: string; // agent driver new tasks in this project default to (lib/agents/registry.ts)
+  send_context: number; // 1 = new tasks default to sending the saved project context to the agent
+  port: number;
+  deprecated: number;
+  seeded: number; // 1 = built-in "Welcome" tutorial project (coach marks + post-merge nudge)
+  task_count: number;
+  last_activity: number;
+  awaiting_count: number; // in-progress tasks waiting on the user (across this project)
+  cost_usd: number; // cumulative dollar spend across all this project's tasks
+}
+export interface TaskRow {
+  parent_task_id?: string|null; fork_commit?: string; fork_source_title?: string; fork_context?: string; fork_group_id?: string; work_branch?: string; created_at?: number;
+  id: string;
+  project_id: string;
+  title: string;
+  description: string;
+  priority: Priority;
+  status: Status;
+  suggested: number;
+  agent: string; // agent driver this task's sessions run under (lib/agents/); fixed for the task's life
+  send_context: number; // 1 = sessions get the saved project context (seeded from the project setting)
+  model: string | null;
+  resolved_model: string | null;
+  reasoning: string | null; // thinking preset; null = inherit default
+  permission_mode: string | null; // run permission; null = bypassPermissions (default)
+  session_id: string | null;
+  worktree_path: string; // isolated git worktree this task runs in ("" = not created yet — appears on the first turn)
+  pr_url: string; // GitHub PR opened from this task's branch ("" = none yet)
+  generation: number;
+  started: number;
+  running: number;
+  awaiting_input: number;
+  updated_at: number;
+  cost_usd: number; // cumulative dollar spend across all turns of this task
+  total_tokens: number; // cumulative tokens (input+output+cache) across all turns
+  cache_read_tokens: number; // of that total, context re-read from the prompt cache (~10% of input price)
+  cache_creation_tokens: number; // of that total, context written INTO the cache (fresh work)
+  depends_on: string[]; // task ids this task is blocked by until they're done
+  auto_start: number; // 1 = start automatically when the last unfinished blocker is marked done
+  context_tokens: number; // latest turn's input-side tokens ≈ current context-window occupancy
+  context_pct: number; // context_tokens as a percent (0–100) of the model's window
+}
+// A single row in the titlebar "need you" dropdown: an awaiting task plus enough
+// of its project to label and color it. Mirrors lib/store.ts listNeedsYou().
+export interface NeedsYouRow {
+  id: string;
+  project_id: string;
+  title: string;
+  project_name: string;
+  project_color: string;
+  project_icon: string;
+  waiting_since: number;
+}
+// A row in the ⌘K palette's session search: any real task across the active
+// projects plus enough of its project to label it. Mirrors lib/store.ts
+// listAllTasksLite().
+export interface PaletteTaskRow {
+  id: string;
+  project_id: string;
+  title: string;
+  status: Status;
+  running: number;
+  awaiting_input: number;
+  updated_at: number;
+  project_name: string;
+  project_color: string;
+  project_icon: string;
+}
+export interface Msg {
+  id: string;
+  // "queued" is a client-only role: a follow-up the user typed mid-turn that's
+  // parked (in pending_messages) until the current turn ends. Not a persisted
+  // message role — it never lands in the `messages` table.
+  role: "user" | "assistant" | "tool" | "system" | "session_break" | "queued";
+  content: string;
+  generation: number;
+  toolId?: string; // tool_use id, for merging the tool_result that arrives later
+  ts?: number; // created_at of the persisted row (ms epoch); absent on synthetic ids
+}
+export interface ProjectSession {
+  id: string;
+  task_id: string;
+  task_title: string;
+  task_status: Status;
+  generation: number;
+  claude_session_id: string | null;
+  started_at: number;
+  ended_at: number | null;
+  message_count: number;
+}
+export interface RecapInfo {
+  recap: string | null;
+  recap_at: number;
+  hasHistory: boolean;
+  stale: boolean;
+  needsRecap: boolean;
+  generating: boolean;
+  lastActivity: number;
+  // Client-side only: set when the fetch/generate failed, so the landing pane
+  // can offer a retry instead of silently showing nothing.
+  error?: string;
+}
+
+// Divergence status for the reopened-task sync banner (GET /api/tasks/:id/sync).
+export interface SyncStatusResp {
+  isolated: boolean;
+  baseBranch?: string;
+  behind?: number;
+  ahead?: number;
+  isDirty?: boolean;
+  canFastForward?: boolean;
+  clean?: boolean;
+  conflicts?: string[];
+}
+
+export type FsListing = { path: string; parent: string | null; home: string; entries: { name: string; path: string }[] };
+
+// ---------- GitHub onboarding shapes ----------
+export type GhStatusT = { installed: boolean; authenticated: boolean; login: string | null };
+export type GhLoginT = { status: "idle" | "starting" | "awaiting" | "success" | "error"; code: string | null; url: string | null; user: string | null; error: string | null };
+export type GhRepoT = { nameWithOwner: string; description: string; isPrivate: boolean; updatedAt: string };
+
+// ---------- first-run onboarding wizard shapes ----------
+export type OnbStep = "connect" | "verify";
+export type OnboardingT = {
+  complete: boolean;
+  step: OnbStep;
+  method: "subscription" | "api_key" | null;
+  account: { email: string | null; plan: string | null } | null;
+};
+export type ClaudeLoginT = {
+  status: "idle" | "starting" | "awaiting" | "submitting" | "success" | "error";
+  url: string | null;
+  email: string | null;
+  plan: string | null;
+  error: string | null;
+  log: string;
+};
+export type ClaudeVerifyT = {
+  connected: boolean;
+  email: string | null;
+  plan: string | null;
+  method: string | null;
+  provider?: string | null;
+  error: string | null;
+};
+
+// ---------- multi-agent connect (GET /api/agents + /api/agents/[id]/*) ----------
+// Mirrors the server's AgentCapabilities + per-agent connection state. Used by
+// the Settings "Agents" surface to render connect cards and gray out agents that
+// aren't wired up. Only the fields the client reads are typed here.
+export type AgentCapabilitiesT = {
+  apiKeyHint: string | null;
+  loginStyle: "paste_code" | "device_code";
+  supportsBedrock?: boolean;
+  loginHint?: string;
+  supportsProviderAuth?: boolean;
+};
+export type AgentInfoT = {
+  id: string;
+  label: string;
+  provider?: string | null;
+  // The active provider's credentials can be refreshed from the UI (AWS SSO
+  // device-code flow) — shows the refresh button in the Bedrock connect card.
+  providerRefresh?: boolean;
+  capabilities: AgentCapabilitiesT;
+  connected: boolean;
+  /** The CLI exists on the server machine (GET /api/agents); absent = unknown. */
+  installed?: boolean;
+  account: { email: string | null; plan: string | null; method: "subscription" | "api_key" | "bedrock" | "compatible" } | null;
+  authBroken?: AgentAuthBrokenT | null;
+};
+// Connected, but its login stopped working mid-flight (see lib/authFailure.ts).
+// `reason` is the provider's own error text; `at` is when it was first seen.
+export type AgentAuthBrokenT = { at: number; reason: string };
+export type AgentsResponseT = { default: string; agents: AgentInfoT[]; utility?: UtilityAgentT };
+// Which agent actually runs the app's project-scoped internal jobs (recaps,
+// context drafts), resolved connected-first on the server (lib/agents/oneshots).
+// `id: null` = nothing connected; `fallback` = the configured agent isn't
+// connected, so a different one is standing in.
+export type UtilityAgentT = { id: string | null; configured: string; fallback: boolean };
+export type AgentLoginT = ClaudeLoginT & { code?: string | null };
+
+// ---------- status maps (DB status -> design's r/a/g classes + labels) ----------
+export const SCLS: Record<Status, "r" | "a" | "g" | "h" | "x"> = { not_started: "r", in_progress: "a", on_hold: "h", done: "g", cancelled: "x" };
+export const SLABEL: Record<Status, string> = { not_started: "未开始", in_progress: "进行中", on_hold: "已搁置", done: "已完成", cancelled: "已取消" };
+export const AWAIT_LABEL = "需要你处理";
+export const SSUB: Record<Status, string> = { not_started: "尚未开始会话", in_progress: "会话进行中或已暂停", on_hold: "已暂停 — 稍后继续", done: "工作完成 / 已合并", cancelled: "已放弃 — 不会再继续" };
+export const STATUSES: Status[] = ["not_started", "in_progress", "on_hold", "done", "cancelled"];
+export const PLABEL: Record<Priority, string> = { hi: "高", med: "中", lo: "低" };
+export const PRIORITIES: Priority[] = ["hi", "med", "lo"];
+
+// ---------- agent capability descriptors (mirrors lib/agents/types.ts) ----------
+// The run controls are no longer hardcoded per agent: each driver ships a
+// capability descriptor (models / reasoning / permission modes it supports, plus
+// feature flags) served by GET /api/agents. The client renders every picker from
+// this data, so a task's controls always match the agent it runs under.
+export interface AgentModelOption { value: string; label: string; sub: string; contextWindow: number; group?: string }
+export interface AgentPickerOption { value: string; label: string; sub: string }
+export interface AgentCapabilities {
+  models: AgentModelOption[];
+  reasoningOptions: AgentPickerOption[];
+  permissionModes: AgentPickerOption[];
+  supportsAsks: boolean;      // can surface interactive ask cards mid-turn
+  supportsMcpTools: boolean;  // can mount the orchestrator MCP tools
+  reportsCostUsd: boolean;    // usage carries a real dollar cost (not just tokens)
+  costIsEstimated: boolean;   // cost is estimated from tokens × API prices — show with ~
+  supportsResume: boolean;    // turns can resume a prior session/thread id
+  supportsCustomModels?: boolean;
+  supportsBedrock?: boolean;
+}
+// How this agent is signed in. "subscription" (a Max/Pro or ChatGPT login) means
+// turns draw on plan quota and cost no marginal money, so a dollar figure is an
+// API-PRICE EQUIVALENT rather than a charge; "api_key" means it really is billed.
+// Mirrors lib/agents/connections.ts AgentConnection; null when not connected.
+export interface AgentAccount { email: string | null; plan: string | null; method: "subscription" | "api_key" | "bedrock" | "compatible" }
+// `installed` = this agent's CLI exists on the server machine. Independent of
+// `authenticated` (credentials): an uninstalled agent can't run however well
+// it's connected, and no Connect flow fixes it. Optional so an older payload
+// (or a test fixture) reads as "unknown", which callers treat as installed.
+export interface AgentInfo { defaults?: { model?: string|null; reasoning?: string|null; permission_mode?: string|null }; id: string; label: string; provider?: string | null; capabilities: AgentCapabilities; authenticated: boolean; installed?: boolean; account?: AgentAccount | null; authBroken?: AgentAuthBrokenT | null }
+export interface AgentsBundle { default: string; agents: AgentInfo[]; utility?: UtilityAgentT }
+export const EMPTY_AGENTS: AgentsBundle = { default: "claude", agents: [] };
+
+// A picker option list. `value: null` is the synthetic "Default" head — it
+// persists as null in tasks.model/reasoning/permission_mode, inheriting the
+// app-level (agent-scoped) default, then the driver's built-in.
+export type PickerOption = { value: string | null; label: string; sub: string; group?: string };
+const DEFAULT_HEAD: PickerOption = { value: null, label: "默认", sub: "沿用智能体的默认设置" };
+const withDefault = (opts: PickerOption[]): PickerOption[] => [DEFAULT_HEAD, ...opts];
+// Build each picker's option list from a driver's capabilities. Undefined caps
+// (agent metadata not loaded yet) yields just the Default head.
+export const modelOptions = (caps?: AgentCapabilities): PickerOption[] => withDefault(caps?.models ?? []);
+export const reasoningOptions = (caps?: AgentCapabilities): PickerOption[] => withDefault(caps?.reasoningOptions ?? []);
+export const permissionOptions = (caps?: AgentCapabilities): PickerOption[] => withDefault(caps?.permissionModes ?? []);
+
+// Lightweight filter box for the project & task lists — only worth showing once a
+// list grows past SEARCH_MIN, so small workspaces stay clutter-free.
+export const SEARCH_MIN = 6;
+
+// How a project's tasks render: the grouped list (middle column + chat), or
+// the full-workspace kanban board. Persisted alongside the other prefs.
+export type TaskView = "list" | "board";
+
+// Which surface fills the work area (the right two columns). "workspace" is the
+// normal tasks+session view; "settings" replaces it with the app settings shell;
+// "insights" with the usage/analytics dashboard. Mirrored into the URL
+// (?view=settings / ?view=insights) so it's deep-linkable + refresh-stable,
+// consistent with how project/task selection is persisted.
+export type View = "workspace" | "settings" | "insights";
+// Purely cosmetic, client-only look-and-feel prefs (the "Appearance" panel).
+export interface Appearance { theme: "light" | "dark"; density: string; }
+export const DEFAULT_APPEARANCE: Appearance = { theme: "dark", density: "1" };
+
+// App-level preferences (distinct from Appearance, which is purely cosmetic). These
+// are personal/client-only so they live in the same localStorage store as Appearance;
+// if shared/server config is ever needed, a `settings` table in lib/db.ts keyed by
+// name would be the place. Keep this a flat object with sensible defaults so new
+// settings are a one-line addition here + a field in SettingsView.
+export interface Settings {
+  // The app nudges you to /clear when a session's context window crosses EITHER
+  // of these — a percentage of the window, or an absolute token count. The paired
+  // "Recommend /clear when context is high" feature reads these.
+  clearThresholdPct: number;    // 0–100, % of the context window
+  clearThresholdTokens: number; // absolute token count
+}
+export const DEFAULT_SETTINGS: Settings = { clearThresholdPct: 75, clearThresholdTokens: 150_000 };
+
+// Persisted sidebar layout — column widths and collapsed (hidden) state, so the
+// user can carve out more room for the chat and have it stick across reloads.
+// Exception: the projects column always opens collapsed (a slim rail you click
+// to expand) — usePrefs ignores its persisted state on load.
+export interface Layout { projW: number; taskW: number; railW: number; projCollapsed: boolean; taskCollapsed: boolean; railCollapsed: boolean; }
+export const DEFAULT_LAYOUT: Layout = { projW: 236, taskW: 352, railW: 430, projCollapsed: true, taskCollapsed: false, railCollapsed: false };
+export const PROJ_W = { min: 170, max: 460 };
+export const TASK_W = { min: 240, max: 620 };
+export const RAIL_W = { min: 320, max: 760 };

package/src/operator/node/useGlobalEvents.ts

@@ -0,0 +1,97 @@
+"use client";
+
+import { useEffect, useRef, type MutableRefObject } from "react";
+import type { GlobalWireEvent } from "./protocol/events";
+import { jget } from "./api";
+import { openLive } from "./liveStream";
+import type { ProjectRow, TaskRow } from "./types";
+
+// One always-open EventSource on GET /api/events: coarse lifecycle events for
+// EVERY task across EVERY project (turn started / awaiting input / answered /
+// suggestion created / turn ended / mutation-route settles and deletions).
+// This is what clears spinners and updates
+// the "needs you" badges for tasks whose transcript stream isn't open — only
+// the selected task has one (useTaskStream) — replacing the old 10s poll.
+export function useGlobalEvents({ selProjRef, setTaskRunning, setTasks, setProjects, loadTasks, reconcileRunning, refreshAgents }: {
+  selProjRef: MutableRefObject<string | null>;
+  setTaskRunning: (id: string, on: boolean) => void;
+  setTasks: React.Dispatch<React.SetStateAction<TaskRow[]>>;
+  setProjects: React.Dispatch<React.SetStateAction<ProjectRow[]>>;
+  loadTasks: (projectId: string, selectFirst?: boolean) => Promise<void>;
+  reconcileRunning: () => Promise<void>;
+  refreshAgents: () => Promise<void>;
+}) {
+  // Apply one lifecycle event. The payload is a fresh snapshot of the task
+  // row's running/awaiting_input/status (read after the runner persisted it),
+  // so applying it is idempotent — overlaps with the selected task's own
+  // stream, which fires for the same boundaries, are harmless.
+  const handle = (ev: GlobalWireEvent) => {
+    // An agent's login died or came back. Refetch the shared agents bundle
+    // rather than patching state locally, so the reconnect banner, the Settings
+    // cards, and the New-task picker all read one server-side truth. Rare event
+    // (once per outage), so the extra fetch costs nothing.
+    if (ev.type === "agent_auth") { void refreshAgents(); return; }
+    // A task was hard-deleted (possibly in another tab — in this one the local
+    // removal already happened, so the replay is a no-op). Drop it and adopt
+    // the recomputed project badge the event carries; there's no row left to
+    // re-fetch.
+    if (ev.type === "task_deleted") {
+      setTaskRunning(ev.taskId, false);
+      setTasks((prev) => prev.filter((t) => t.id !== ev.taskId));
+      setProjects((prev) => prev.map((p) => (p.id === ev.projectId ? { ...p, awaiting_count: ev.awaiting_count } : p)));
+      return;
+    }
+    if (ev.type !== "task") return;
+    setTaskRunning(ev.taskId, ev.running);
+    setTasks((prev) => prev.map((t) => {
+      if (t.id !== ev.taskId) return t;
+      // A launch publishes turn_started before the agent session opens, i.e.
+      // while the row's status is still "not_started" — don't regress a task
+      // the client already optimistically flipped to in_progress; the session-
+      // open event re-fires turn_started with the settled status moments later.
+      const status = ev.running && ev.status === "not_started" && t.status === "in_progress" ? t.status : ev.status;
+      return { ...t, running: ev.running ? 1 : 0, awaiting_input: ev.awaiting_input ? 1 : 0, status };
+    }));
+    // Project badge + titlebar pill: the event carries the project's fresh
+    // awaiting count, so no /api/projects refetch is needed.
+    setProjects((prev) => prev.map((p) => (p.id === ev.projectId ? { ...p, awaiting_count: ev.awaiting_count } : p)));
+    // A suggested task was created (by a turn in that project) — surface it in
+    // the Suggested tray right away if that project is on screen.
+    if ((ev.event === "suggested" || ev.event === "task_created") && selProjRef.current === ev.projectId) void loadTasks(ev.projectId, false);
+  };
+  // Route through a ref so the EventSource effect never re-subscribes.
+  const handleRef = useRef(handle);
+  useEffect(() => { handleRef.current = handle; });
+
+  useEffect(() => {
+    let opens = 0;
+    const onOpen = () => {
+      // This stream is a live tail with no snapshot: anything published while
+      // we were disconnected (laptop sleep, tunnel drop) is gone. On every
+      // REconnect, refetch the authoritative lists once to catch up. The first
+      // open is skipped — boot() and the project-selection effect already load
+      // them. reconcileRunning drains the running set fleet-wide: a turn_end
+      // missed while dark, on a task in a project we've navigated away from,
+      // is invisible to the two refetches below (they only cover the selected
+      // project's rows) and would leave that spinner stuck forever.
+      opens += 1;
+      if (opens === 1) return;
+      jget<ProjectRow[]>("/api/projects").then(setProjects).catch(() => {});
+      if (selProjRef.current) void loadTasks(selProjRef.current, false);
+      void reconcileRunning();
+      // An agent_auth event fired while we were dark would be lost (this stream
+      // is a live tail), leaving a stale banner — or none when the login is in
+      // fact dead. The bundle carries the persisted flag, so refetch it too.
+      void refreshAgents();
+    };
+    // Over the tab's shared live socket (./liveStream), not its own EventSource.
+    const sub = openLive("/api/events", {
+      onOpen,
+      onMessage: (data) => {
+        try { handleRef.current(JSON.parse(data) as GlobalWireEvent); } catch {}
+      },
+    });
+    return () => sub.close();
+    // All deps are stable (a ref, a setState, []-memoized callbacks).
+  }, [selProjRef, setProjects, loadTasks, reconcileRunning, refreshAgents]);
+}