@circuitwall/jarela 2.2.1 → 2.4.0

package/components/chat/useThreadActivity.test.tsx

@@ -0,0 +1,113 @@
+// @vitest-environment jsdom
+import { act, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { ThreadActivity } from "@/api/types";
+
+const mocks = vi.hoisted(() => ({ activity: vi.fn(), getThread: vi.fn() }));
+
+vi.mock("@/api/client", () => ({
+  api: {
+    threads: {
+      activity: (...args: unknown[]) => mocks.activity(...args),
+      get: (...args: unknown[]) => mocks.getThread(...args),
+    },
+  },
+}));
+
+const { useThreadActivity } = await import("./useThreadActivity");
+
+const idle: ThreadActivity = { run: null, queue_depth: 0, compaction: null, busy: false };
+const running: ThreadActivity = {
+  run: { phase: "thinking", label: "Thinking…", started_at: 1, agent_id: "a" },
+  queue_depth: 1,
+  compaction: null,
+  busy: true,
+};
+const compacting: ThreadActivity = {
+  run: null,
+  queue_depth: 0,
+  compaction: { kind: "manual", boundary_seq: 4, started_at: 1, deadline_at: 2 },
+  busy: true,
+};
+
+function metaApplier() {
+  return {
+    setHotSince: vi.fn(), setHotSinceSeq: vi.fn(), setWarmSummary: vi.fn(), setWarmSummaryBefore: vi.fn(),
+    setWarmSummaryBeforeSeq: vi.fn(), setWarmSummaryComputedAt: vi.fn(), setWarmSummarySourceMessages: vi.fn(),
+    setWarmSummarySourceChars: vi.fn(), setContextWindowTokens: vi.fn(), setWarmSummaryPending: vi.fn(),
+    setCompactionPending: vi.fn(), setManualCompactionPending: vi.fn(), setWarmSummaryTopics: vi.fn(),
+    setWarmChannelSummaries: vi.fn(),
+  };
+}
+
+async function tick(ms: number) {
+  await act(async () => { await vi.advanceTimersByTimeAsync(ms); });
+}
+
+describe("useThreadActivity", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    mocks.activity.mockReset();
+    mocks.getThread.mockReset();
+    mocks.getThread.mockResolvedValue({ messages: [], has_more: false });
+  });
+  afterEach(() => vi.useRealTimers());
+
+  it("attaches to a run started elsewhere when this client is not streaming", async () => {
+    mocks.activity.mockResolvedValue(running);
+    const attach = vi.fn().mockResolvedValue(undefined);
+    renderHook(() => useThreadActivity({
+      threadId: "t1", attach, isLive: () => false, lastSettledAt: () => 0, metaApplier: metaApplier(),
+    }));
+    await tick(1_500);
+    expect(attach).toHaveBeenCalledWith("t1");
+  });
+
+  it("does not attach while it owns a stream or right after one settled", async () => {
+    mocks.activity.mockResolvedValue(running);
+    const attach = vi.fn().mockResolvedValue(undefined);
+    let live = true;
+    renderHook(() => useThreadActivity({
+      threadId: "t1", attach, isLive: () => live, lastSettledAt: () => Date.now(), metaApplier: metaApplier(),
+    }));
+    await tick(1_500);
+    live = false;
+    await tick(1_500);
+    expect(attach).not.toHaveBeenCalled();
+  });
+
+  it("restores compaction flags and refreshes metadata once compaction ends", async () => {
+    mocks.activity.mockResolvedValueOnce(compacting).mockResolvedValue(idle);
+    const meta = metaApplier();
+    const { result } = renderHook(() => useThreadActivity({
+      threadId: "t1", attach: vi.fn(), isLive: () => false, lastSettledAt: () => 0, metaApplier: meta,
+    }));
+    await tick(1_500);
+    expect(result.current?.compaction?.kind).toBe("manual");
+    expect(meta.setCompactionPending).toHaveBeenCalledWith(true);
+    expect(meta.setManualCompactionPending).toHaveBeenCalledWith(true);
+    await tick(1_500);
+    expect(mocks.getThread).toHaveBeenCalledWith("t1", { limit: 1 });
+    expect(meta.setManualCompactionPending).toHaveBeenLastCalledWith(false);
+  });
+
+  it("clears compaction flags even if the metadata refresh fails", async () => {
+    mocks.activity.mockResolvedValueOnce(compacting).mockResolvedValue(idle);
+    mocks.getThread.mockRejectedValue(new Error("offline"));
+    const meta = metaApplier();
+    renderHook(() => useThreadActivity({
+      threadId: "t1", attach: vi.fn(), isLive: () => false, lastSettledAt: () => 0, metaApplier: meta,
+    }));
+    await tick(3_000);
+    expect(meta.setManualCompactionPending).toHaveBeenLastCalledWith(false);
+    expect(meta.setCompactionPending).toHaveBeenLastCalledWith(false);
+  });
+
+  it("does not poll without a thread", async () => {
+    renderHook(() => useThreadActivity({
+      threadId: null, attach: vi.fn(), isLive: () => false, lastSettledAt: () => 0, metaApplier: metaApplier(),
+    }));
+    await tick(10_000);
+    expect(mocks.activity).not.toHaveBeenCalled();
+  });
+});

package/components/chat/useThreadActivity.ts

@@ -0,0 +1,94 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import { api } from "@/api/client";
+import type { ThreadActivity } from "@/api/types";
+import { applyThreadMeta, type ThreadMetaApplier } from "./chat-helpers";
+
+const BUSY_POLL_MS = 1_500;
+const IDLE_POLL_MS = 5_000;
+// A run's stream ends a moment before the registry marks it finished; a
+// snapshot inside this window may still report the run that just ended.
+const SETTLE_GRACE_MS = 2_000;
+
+interface Params {
+  threadId: string | null;
+  attach: (threadId: string) => Promise<unknown>;
+  /** Synchronous: does this client already own a live stream? */
+  isLive: () => boolean;
+  /** Epoch ms when this client's last stream settled. */
+  lastSettledAt: () => number;
+  metaApplier: ThreadMetaApplier;
+}
+
+/**
+ * Poll what the thread is doing on the server and keep the chat in step:
+ * re-attach to a turn started elsewhere (scheduler, watcher, bridge, another
+ * device), restore compaction flags after a remount, and refresh the thread
+ * metadata once a compaction finishes.
+ */
+export function useThreadActivity({ threadId, attach, isLive, lastSettledAt, metaApplier }: Params): ThreadActivity | null {
+  const [activity, setActivity] = useState<ThreadActivity | null>(null);
+  const deps = useRef({ attach, isLive, lastSettledAt, metaApplier });
+  deps.current = { attach, isLive, lastSettledAt, metaApplier };
+
+  useEffect(() => {
+    setActivity(null);
+    if (!threadId) return;
+    let cancelled = false;
+    let timer: number | null = null;
+    let hadCompaction = false;
+
+    const schedule = (ms: number) => {
+      if (!cancelled) timer = window.setTimeout(tick, ms);
+    };
+
+    async function tick() {
+      if (cancelled || !threadId) return;
+      if (typeof document !== "undefined" && document.hidden) { schedule(IDLE_POLL_MS); return; }
+      let next: ThreadActivity;
+      try {
+        next = await api.threads.activity(threadId);
+      } catch {
+        schedule(IDLE_POLL_MS);
+        return;
+      }
+      if (cancelled) return;
+      setActivity(next);
+      const d = deps.current;
+
+      const serverRunning = next.run !== null || next.queue_depth > 0;
+      const recentlySettled = Date.now() - d.lastSettledAt() < SETTLE_GRACE_MS;
+      if (serverRunning && !d.isLive() && !recentlySettled) {
+        d.attach(threadId).catch(() => { /* best-effort */ });
+      }
+
+      if (next.compaction) {
+        if (next.compaction.kind !== "refresh") d.metaApplier.setCompactionPending?.(true);
+        if (next.compaction.kind === "manual") d.metaApplier.setManualCompactionPending?.(true);
+        hadCompaction = true;
+      } else if (hadCompaction) {
+        hadCompaction = false;
+        // The compaction just finished. Clear the flags from the snapshot
+        // itself so a failed refresh below can't leave the chat locked, then
+        // pull the new boundary and recap.
+        d.metaApplier.setCompactionPending?.(false);
+        d.metaApplier.setManualCompactionPending?.(false);
+        api.threads.get(threadId, { limit: 1 })
+          .then((meta) => { if (!cancelled) applyThreadMeta(deps.current.metaApplier, meta); })
+          .catch(() => { /* next poll retries */ });
+      }
+
+      schedule(next.busy ? BUSY_POLL_MS : IDLE_POLL_MS);
+    }
+
+    // The thread load attaches to any in-flight run itself; give it a beat
+    // so this poller doesn't race it with a second attach.
+    schedule(BUSY_POLL_MS);
+    return () => {
+      cancelled = true;
+      if (timer !== null) window.clearTimeout(timer);
+    };
+  }, [threadId]);
+
+  return activity;
+}

package/components/chat/useThreadData.ts

@@ -1,8 +1,8 @@
 "use client";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { api } from "@/api/client";
-import type { Message, SummaryTopicSegment } from "@/api/types";
-import { applyThreadMeta, type SystemNotice, type ThreadMetaApplier } from "./chat-helpers";
+import type { Message, SummaryTopicSegment, WarmChannelSummary } from "@/api/types";
+import { applyThreadMeta, type ThreadMetaApplier } from "./chat-helpers";
 
 interface Params {
   threadId: string | null;
@@ -13,9 +13,6 @@ export interface ThreadDataApi {
   messages: Message[];
   setMessages: React.Dispatch<React.SetStateAction<Message[]>>;
   messagesRef: React.MutableRefObject<Message[]>;
-  notices: SystemNotice[];
-  setNotices: React.Dispatch<React.SetStateAction<SystemNotice[]>>;
-  addNotice: (text: string) => void;
   hasMore: boolean;
   setHasMore: React.Dispatch<React.SetStateAction<boolean>>;
   loadingMore: boolean;
@@ -30,8 +27,10 @@ export interface ThreadDataApi {
   warmSummarySourceMessages: number | null;
   warmSummarySourceChars: number | null;
   warmSummaryTopics: SummaryTopicSegment[] | null;
+  warmChannelSummaries: WarmChannelSummary[];
   warmSummaryPending: boolean;
   compactionPending: boolean;
+  manualCompactionPending: boolean;
   contextWindowTokens: number | null;
   metaApplier: ThreadMetaApplier;
   loadOlder: () => Promise<void>;
@@ -40,7 +39,6 @@ export interface ThreadDataApi {
 
 export function useThreadData({ threadId, attach }: Params): ThreadDataApi {
   const [messages, setMessages] = useState<Message[]>([]);
-  const [notices, setNotices] = useState<SystemNotice[]>([]);
   const [hasMore, setHasMore] = useState(false);
   const [loadingMore, setLoadingMore] = useState(false);
   const [messagesLoading, setMessagesLoading] = useState(false);
@@ -54,8 +52,10 @@ export function useThreadData({ threadId, attach }: Params): ThreadDataApi {
   const [warmSummarySourceMessages, setWarmSummarySourceMessages] = useState<number | null>(null);
   const [warmSummarySourceChars, setWarmSummarySourceChars] = useState<number | null>(null);
   const [warmSummaryTopics, setWarmSummaryTopics] = useState<SummaryTopicSegment[] | null>(null);
+  const [warmChannelSummaries, setWarmChannelSummaries] = useState<WarmChannelSummary[]>([]);
   const [warmSummaryPending, setWarmSummaryPending] = useState(false);
   const [compactionPending, setCompactionPending] = useState(false);
+  const [manualCompactionPending, setManualCompactionPending] = useState(false);
   const [contextWindowTokens, setContextWindowTokens] = useState<number | null>(null);
 
   const messagesRef = useRef<Message[]>([]);
@@ -66,18 +66,13 @@ export function useThreadData({ threadId, attach }: Params): ThreadDataApi {
     setHotSince, setHotSinceSeq, setWarmSummary, setWarmSummaryBefore, setWarmSummaryBeforeSeq,
     setWarmSummaryComputedAt, setWarmSummarySourceMessages,
     setWarmSummarySourceChars, setContextWindowTokens, setWarmSummaryPending,
-    setCompactionPending, setWarmSummaryTopics,
+    setCompactionPending, setManualCompactionPending, setWarmSummaryTopics, setWarmChannelSummaries,
   };
 
-  const addNotice = useCallback((text: string) => {
-    setNotices((p) => [...p, { id: `notice-${Date.now()}`, text }]);
-  }, []);
-
   useEffect(() => {
     if (!threadId) {
       setMetadataThreadId(null);
       setMessages([]);
-      setNotices([]);
       setHasMore(false);
       setMessagesLoading(false);
       setHotSince(null);
@@ -89,8 +84,10 @@ export function useThreadData({ threadId, attach }: Params): ThreadDataApi {
       setWarmSummarySourceMessages(null);
       setWarmSummarySourceChars(null);
       setWarmSummaryTopics(null);
+      setWarmChannelSummaries([]);
       setWarmSummaryPending(false);
       setCompactionPending(false);
+      setManualCompactionPending(false);
       setContextWindowTokens(null);
       return;
     }
@@ -108,8 +105,10 @@ export function useThreadData({ threadId, attach }: Params): ThreadDataApi {
     setWarmSummarySourceMessages(null);
     setWarmSummarySourceChars(null);
     setWarmSummaryTopics(null);
+    setWarmChannelSummaries([]);
     setWarmSummaryPending(false);
     setCompactionPending(false);
+    setManualCompactionPending(false);
     setContextWindowTokens(null);
     api.threads.get(threadId).then((d) => {
       if (cancelled) return;
@@ -150,6 +149,7 @@ export function useThreadData({ threadId, attach }: Params): ThreadDataApi {
       setWarmSummarySourceMessages(updated.warm_summary_source_messages);
       setWarmSummarySourceChars(updated.warm_summary_source_chars);
       setWarmSummaryTopics(updated.warm_summary_topics);
+      setWarmChannelSummaries(updated.warm_channel_summaries ?? []);
       setCompactionPending(updated.pending_hot_since_seq != null);
       const summaryFresh = updated.hot_since_seq != null
         && updated.warm_summary_before_seq === updated.hot_since_seq;
@@ -167,7 +167,7 @@ export function useThreadData({ threadId, attach }: Params): ThreadDataApi {
     if (!threadId) return;
     const summaryFresh = hotSinceSeq !== null && warmSummaryBeforeSeq === hotSinceSeq;
     const summaryStale = warmSummaryPending && hotSinceSeq !== null && !summaryFresh;
-    if (!summaryStale && !compactionPending) {
+    if (!summaryStale && !compactionPending && !manualCompactionPending) {
       if (warmSummaryPending && hotSinceSeq !== null && summaryFresh) setWarmSummaryPending(false);
       return;
     }
@@ -190,7 +190,7 @@ export function useThreadData({ threadId, attach }: Params): ThreadDataApi {
       window.clearInterval(timer);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [threadId, warmSummaryPending, compactionPending, hotSince, hotSinceSeq, warmSummaryBefore, warmSummaryBeforeSeq]);
+  }, [threadId, warmSummaryPending, compactionPending, manualCompactionPending, hotSince, hotSinceSeq, warmSummaryBefore, warmSummaryBeforeSeq]);
 
   const loadOlder = useCallback(async () => {
     if (!threadId || loadingMore || !hasMore || messages.length === 0) return;
@@ -211,13 +211,13 @@ export function useThreadData({ threadId, attach }: Params): ThreadDataApi {
   }, [threadId, loadingMore, hasMore, messages.length]);
 
   return {
-    messages, setMessages, messagesRef, notices, setNotices, addNotice,
+    messages, setMessages, messagesRef,
     hasMore, setHasMore, loadingMore, messagesLoading,
     hotSince: metadataMatchesThread ? hotSince : null,
     hotSinceSeq: metadataMatchesThread ? hotSinceSeq : null,
     hotSinceSeqForRun: metadataMatchesThread ? hotSinceSeq : undefined,
     warmSummary, warmSummaryBefore, warmSummaryBeforeSeq, warmSummaryComputedAt,
-    warmSummarySourceMessages, warmSummarySourceChars, warmSummaryTopics, warmSummaryPending, compactionPending, contextWindowTokens,
+    warmSummarySourceMessages, warmSummarySourceChars, warmSummaryTopics, warmChannelSummaries, warmSummaryPending, compactionPending, manualCompactionPending, contextWindowTokens,
     metaApplier, loadOlder, setContextPin,
   };
 }

package/components/chat/workflow-step-retry.ts

@@ -0,0 +1,25 @@
+import { createContext, useContext } from "react";
+
+export interface WorkflowStepRetryRequest {
+  workflowId: string;
+  itemId: string;
+  label: string;
+}
+
+/** Sends a retry request for one workflow step; null when the surface cannot send messages. */
+export const WorkflowStepRetryContext = createContext<((request: WorkflowStepRetryRequest) => void) | null>(null);
+
+export function useWorkflowStepRetry() {
+  return useContext(WorkflowStepRetryContext);
+}
+
+export function workflowStepRetryMessage({ workflowId, itemId, label }: WorkflowStepRetryRequest): string {
+  const progressUpdate = workflowId === "version_adoption"
+    ? `Call \`workflow_progress\` with \`workflow_id: "version_adoption"\`, \`item_id: "${itemId}"\`, and \`status: "checking"\``
+    : `Call \`workflow_progress\` for workflow \`${workflowId}\` with the complete items snapshot, setting this step to \`checking\``;
+  return [
+    `Retry workflow step "${label}" (item \`${itemId}\`) in workflow \`${workflowId}\`.`,
+    `${progressUpdate}, then redo the step from its stated input and run its validation again.`,
+    "Finally mark it `done` with newly observed `validation_evidence`, or `needs_attention` with the reason. Leave the other steps unchanged.",
+  ].join(" ");
+}

package/components/integrations/NetworkSection.tsx

@@ -243,12 +243,12 @@ export function NetworkSection() {
             {mode !== "off" && (
               <>
                 <label className="block text-xs text-fg-subtle">
-                  No proxy (comma-separated, optional)
+                  No proxy (comma-separated, optional; localhost is always direct)
                   <input
                     type="text"
                     value={noProxy}
                     onChange={(e) => setNoProxy(e.target.value)}
-                    placeholder="localhost,127.0.0.1,.internal"
+                    placeholder=".internal,corp.example"
                     className="mt-1 w-full px-2 py-1.5 text-sm rounded border border-border bg-surface-3 text-fg font-mono"
                   />
                 </label>

package/components/ui/BootScreen.tsx

@@ -344,6 +344,20 @@ export function BootScreen({ agents, agentsLoaded, activeAgentId, onPickAgent, s
     }
   }
 
+  async function handleAdoptionItemRetry(itemId: string) {
+    if (adoptionBusy || adoption?.status === "running") return;
+    setAdoptionBusy("retry");
+    try {
+      const next = await api.lifecycle.adoption.retryItem(itemId);
+      setAdoption(next);
+      adoptionRunStartedRef.current = null;
+    } catch {
+      setAdoption((prev) => prev ? { ...prev, error: "Could not retry that step." } : prev);
+    } finally {
+      setAdoptionBusy(null);
+    }
+  }
+
   // The agent rendered in the centered tile. During `loading` and
   // `pick` it's the default (so the user sees the same artwork as soon
   // as agents resolve). During `opening` it's whatever was picked.
@@ -539,6 +553,9 @@ export function BootScreen({ agents, agentsLoaded, activeAgentId, onPickAgent, s
               summary={adoptionLiveLabel ?? adoption.summary}
               items={adoption.checklist}
               error={adoption.error}
+              onRetryItem={(item) => void handleAdoptionItemRetry(item.id)}
+              canRetryItem={(item) => item.id !== "fetch-changes"}
+              retryDisabled={adoptionBusy !== null || adoption.status === "running"}
             >
                 {adoption.status === "done" && (
                   <p className="mt-2 rounded-lg border border-border/50 bg-surface px-2 py-1 text-[10px] leading-snug text-fg-muted">

package/components/ui/WorkflowChecklist.tsx

@@ -1,4 +1,4 @@
-import { AlertTriangle, Check, LoaderCircle, Minus } from "lucide-react";
+import { AlertTriangle, Check, LoaderCircle, Minus, RotateCcw } from "lucide-react";
 import type { ReactNode } from "react";
 
 export type WorkflowChecklistStatus = "pending" | "checking" | "done" | "needs_attention" | "skipped";
@@ -12,6 +12,8 @@ export interface WorkflowChecklistItemView {
   output?: string;
   validation?: string;
   validation_evidence?: string;
+  /** Times this step has been started; shown when greater than one. */
+  attempts?: number;
 }
 
 interface Props {
@@ -22,9 +24,25 @@ interface Props {
   items: WorkflowChecklistItemView[];
   error?: string | null;
   compact?: boolean;
+  /** Retries a single finished or failed step; omitted hides the per-step retry button. */
+  onRetryItem?: (item: WorkflowChecklistItemView) => void;
+  canRetryItem?: (item: WorkflowChecklistItemView) => boolean;
+  retryDisabled?: boolean;
   children?: ReactNode;
 }
 
+const RETRYABLE_STATUSES: ReadonlySet<WorkflowChecklistStatus> = new Set(["done", "needs_attention", "skipped"]);
+
+export function isWorkflowItemRetryable(item: WorkflowChecklistItemView): boolean {
+  return RETRYABLE_STATUSES.has(item.status);
+}
+
+function statusLabel(status: WorkflowChecklistStatus): string {
+  if (status === "done") return "verified";
+  if (status === "needs_attention") return "needs attention";
+  return status;
+}
+
 function StatusIcon({ status }: { status: WorkflowChecklistStatus }) {
   if (status === "done") return <Check className="h-3 w-3" aria-hidden />;
   if (status === "checking") return <LoaderCircle className="h-3 w-3 animate-spin" aria-hidden />;
@@ -41,12 +59,19 @@ function statusClass(status: WorkflowChecklistStatus): string {
   return "border-border/60 bg-surface text-fg-faint";
 }
 
-export function WorkflowChecklist({ eyebrow, title, phaseLabel, summary, items, error, compact = false, children }: Props) {
+function itemTooltip(item: WorkflowChecklistItemView): string {
+  const note = item.status === "done" ? item.validation_evidence : item.reason;
+  return note ? `${item.label}\n${statusLabel(item.status)}: ${note}` : item.label;
+}
+
+export function WorkflowChecklist({ eyebrow, title, phaseLabel, summary, items, error, compact = false, onRetryItem, canRetryItem, retryDisabled = false, children }: Props) {
   return (
     <div className={compact ? "flex flex-col gap-1.5" : "absolute inset-x-0 top-0 flex flex-col gap-2 transition-opacity duration-300"}>
-      <p className="text-[10px] text-fg-faint uppercase tracking-wider text-center">
-        {eyebrow}
-      </p>
+      {!compact && (
+        <p className="text-[10px] text-fg-faint uppercase tracking-wider text-center">
+          {eyebrow}
+        </p>
+      )}
       <div className={compact
         ? "w-full rounded border border-border/40 bg-surface/60 px-2 py-1.5 text-left"
         : "w-full rounded-xl border border-border/60 bg-surface-2/70 px-3 py-2 text-left shadow-lg shadow-black/5"}>
@@ -56,39 +81,52 @@ export function WorkflowChecklist({ eyebrow, title, phaseLabel, summary, items,
             {phaseLabel}
           </span>
         </div>
-        <p className="mt-1 text-[11px] leading-snug text-fg-muted line-clamp-2">
-          {summary}
-        </p>
-        <div className={compact
-          ? "mt-1.5 flex max-h-32 flex-col gap-1 overflow-y-auto pr-1"
+        {!compact && summary && (
+          <p className="mt-1 text-[11px] leading-snug text-fg-muted line-clamp-2">
+            {summary}
+          </p>
+        )}
+        <ul className={compact
+          ? "mt-1.5 flex max-h-48 flex-col gap-0.5 overflow-y-auto pr-1"
           : "mt-2 flex max-h-32 flex-col gap-1 overflow-y-auto pr-1"}>
-          {items.map((item) => (
-            <div key={item.id} className={compact
-              ? "rounded border border-border/30 bg-surface-2/40 px-1.5 py-1 text-[10px] leading-tight text-fg-muted"
-              : "text-[10px] leading-tight text-fg-muted"}>
-              <div className="flex items-start gap-1.5">
+          {items.map((item) => {
+            const retryable = !!onRetryItem && isWorkflowItemRetryable(item) && (canRetryItem ? canRetryItem(item) : true);
+            return (
+              <li key={item.id} className="group flex items-center gap-1.5 text-[10px] leading-tight text-fg-muted">
                 <span
-                  aria-label={item.status}
-                  className={["mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded border", statusClass(item.status)].join(" ")}
+                  role="img"
+                  aria-label={statusLabel(item.status)}
+                  className={["flex h-4 w-4 shrink-0 items-center justify-center rounded border", statusClass(item.status)].join(" ")}
                 >
                   <StatusIcon status={item.status} />
                 </span>
-                <span className={compact ? "min-w-0 flex-1 truncate" : "line-clamp-2"} title={item.label}>{item.label}</span>
-              </div>
-              {(item.input || item.output || item.validation || item.validation_evidence) && (
-                <details className="mt-1 pl-5">
-                  <summary className="cursor-pointer text-fg-faint">Step contract</summary>
-                  <dl className="mt-1 grid grid-cols-[auto_minmax(0,1fr)] gap-x-2 gap-y-1">
-                    {item.input && <><dt className="text-fg-faint">Input</dt><dd className="break-words">{item.input}</dd></>}
-                    {item.output && <><dt className="text-fg-faint">Output</dt><dd className="break-words">{item.output}</dd></>}
-                    {item.validation && <><dt className="text-fg-faint">Validation</dt><dd className="break-words">{item.validation}</dd></>}
-                    {item.validation_evidence && <><dt className="text-fg-faint">Evidence</dt><dd className="break-words">{item.validation_evidence}</dd></>}
-                  </dl>
-                </details>
-              )}
-            </div>
-          ))}
-        </div>
+                <span className={compact ? "min-w-0 flex-1 truncate" : "min-w-0 flex-1 line-clamp-2"} title={itemTooltip(item)}>
+                  {item.label}
+                </span>
+                {(item.attempts ?? 0) > 1 && (
+                  <span className="shrink-0 text-[9px] tabular-nums text-fg-faint" title={`Attempt ${item.attempts}`}>
+                    attempt {item.attempts}
+                  </span>
+                )}
+                {retryable && (
+                  <button
+                    type="button"
+                    onClick={() => onRetryItem(item)}
+                    disabled={retryDisabled}
+                    aria-label={`Retry ${item.label}`}
+                    title={`Retry ${item.label}`}
+                    className={[
+                      "flex h-4 w-4 shrink-0 items-center justify-center rounded text-fg-faint hover:bg-surface-3 hover:text-fg disabled:opacity-40",
+                      item.status === "needs_attention" ? "" : "opacity-0 focus:opacity-100 group-hover:opacity-100",
+                    ].join(" ")}
+                  >
+                    <RotateCcw className="h-3 w-3" aria-hidden />
+                  </button>
+                )}
+              </li>
+            );
+          })}
+        </ul>
         {error && (
           <p className="mt-2 text-[10px] leading-tight text-red-400">{error}</p>
         )}

package/hooks/useSSE.ts

@@ -32,6 +32,10 @@ type UseSSECommands = {
   ) => Promise<{ accepted: boolean }>;
   stop: () => void;
   attach: (threadId: string) => Promise<void>;
+  /** True from the moment start()/attach() opens a stream until it settles. */
+  isLive: () => boolean;
+  /** Epoch ms when the last stream settled (0 if none yet). */
+  lastSettledAt: () => number;
   clearStreamingContent: () => void;
   clearToolEvents: () => void;
   // ADR-0080 — arm with the steering message's id before the PATCH so a
@@ -228,6 +232,18 @@ export function useSSE(onDone?: () => void): UnifiedHookResult<UseSSEState, UseS
   // Cleared on every new start()/attach().
   const [authError, setAuthError] = useState<AuthError>(null);
   const abortRef = useRef<AbortController | null>(null);
+  // Synchronous view of whether start()/attach() owns a live stream, and when
+  // the last one settled. React's `streaming` lags a render behind, so the
+  // activity poller reads this to avoid aborting a stream that just opened
+  // or re-attaching a run whose stream has only just ended.
+  const liveRef = useRef<{ busy: boolean; settledAt: number }>({ busy: false, settledAt: 0 });
+  const markLive = useCallback(() => { liveRef.current.busy = true; }, []);
+  const markSettled = useCallback((ctrl: AbortController | null) => {
+    if (ctrl && abortRef.current !== ctrl) return;
+    liveRef.current = { busy: false, settledAt: Date.now() };
+  }, []);
+  const isLive = useCallback(() => liveRef.current.busy, []);
+  const lastSettledAt = useCallback(() => liveRef.current.settledAt, []);
   const threadIdRef = useRef<string | null>(null);
   // ADR-0080 — id of the steering message currently armed for a possible
   // continuation break, or null. Set eagerly (before the steer PATCH
@@ -379,6 +395,7 @@ export function useSSE(onDone?: () => void): UnifiedHookResult<UseSSEState, UseS
     abortRef.current?.abort();
     const ctrl = new AbortController();
     abortRef.current = ctrl;
+    markLive();
     threadIdRef.current = threadId;
     resetBuffer();
     setStreaming(true);
@@ -424,8 +441,9 @@ export function useSSE(onDone?: () => void): UnifiedHookResult<UseSSEState, UseS
       // them.
       setStreaming(false);
       closeActivity();
+      markSettled(ctrl);
     }
-  }, [closeActivity, consume, openActivity, resetBuffer]);
+  }, [closeActivity, consume, markLive, markSettled, openActivity, resetBuffer]);
 
   // Stop the active run. Three-part: (1) tell the server to abort the
   // agent stream so the LangGraph loop unwinds; (2) tear down local
@@ -448,9 +466,10 @@ export function useSSE(onDone?: () => void): UnifiedHookResult<UseSSEState, UseS
     // start()/attach() — same pattern as the `done` branch in consume().
     closeActivity();
     abortRef.current?.abort();
+    markSettled(null);
     steeredContinuationIdRef.current = null;
     onDone?.();
-  }, [closeActivity, flushPending, onDone]);
+  }, [closeActivity, flushPending, markSettled, onDone]);
 
   // Attach to an in-flight run for the given thread (server-side run kept
   // going because the user switched away, or because this is a fresh
@@ -463,6 +482,7 @@ export function useSSE(onDone?: () => void): UnifiedHookResult<UseSSEState, UseS
     abortRef.current?.abort();
     const ctrl = new AbortController();
     abortRef.current = ctrl;
+    markLive();
     threadIdRef.current = threadId;
     resetBuffer();
     setStreaming(true);
@@ -491,8 +511,9 @@ export function useSSE(onDone?: () => void): UnifiedHookResult<UseSSEState, UseS
       // hangs in the composer and the "Reconnecting…" badge never clears.
       setStreaming(false);
       closeActivity();
+      markSettled(ctrl);
     }
-  }, [closeActivity, consume, onDone, openActivity, resetBuffer]);
+  }, [closeActivity, consume, markLive, markSettled, onDone, openActivity, resetBuffer]);
 
   // Called by the consumer after a refetch lands, so the streaming bubble
   // gets swapped for the persisted assistant message in a single render.
@@ -529,6 +550,8 @@ export function useSSE(onDone?: () => void): UnifiedHookResult<UseSSEState, UseS
     start,
     stop,
     attach,
+    isLive,
+    lastSettledAt,
     clearStreamingContent,
     clearToolEvents,
     armSteeredContinuation,
@@ -549,6 +572,8 @@ export function useSSE(onDone?: () => void): UnifiedHookResult<UseSSEState, UseS
     start,
     stop,
     attach,
+    isLive,
+    lastSettledAt,
     clearStreamingContent,
     clearToolEvents,
     armSteeredContinuation,