@hienlh/ppm 0.18.2 → 0.18.3

package/src/web/components/os-explorer/upload/collect-dropped-entries.ts

@@ -0,0 +1,81 @@
+/**
+ * Turns an OS `Files` drop (or a picked `FileList`) into a flat list of `{file, relativePath}`
+ * pairs, walking nested folders when the browser exposes `webkitGetAsEntry`. Falls back to a
+ * flat `dataTransfer.files` list — no relative path beyond the bare name — on a browser that
+ * never implemented the entries API.
+ */
+
+export interface DroppedEntry {
+  file: File;
+  /** Forward-slash path relative to the drop target, including the file's own name. A flat
+   *  drop (no folder) is just the bare file name. */
+  relativePath: string;
+}
+
+/**
+ * Reject directory traversal and normalise separators. A dropped folder's real
+ * `FileSystemEntry.fullPath` never contains `..`, but a rebuilt/spoofed `DataTransfer` (or a
+ * test) might, and this is the one seam every path this module produces passes through.
+ * Returns `null` when nothing safe is left (empty, or only `..`/`.` segments).
+ */
+export function sanitizeRelativePath(raw: string): string | null {
+  const unified = raw.replace(/\\/g, "/").replace(/^\/+/, "");
+  const segments = unified.split("/").filter((segment) => segment.length > 0 && segment !== ".");
+  if (segments.length === 0 || segments.some((segment) => segment === "..")) return null;
+  return segments.join("/");
+}
+
+function readEntryAsFile(entry: FileSystemFileEntry): Promise<File> {
+  return new Promise((resolve, reject) => entry.file(resolve, reject));
+}
+
+/** `readEntries` only ever returns one batch per call — the empty batch that signals the end
+ *  is itself the loop's exit condition, not a sentinel value. */
+function readAllEntries(reader: FileSystemDirectoryReader): Promise<FileSystemEntry[]> {
+  return new Promise((resolve, reject) => {
+    const all: FileSystemEntry[] = [];
+    const readNextBatch = () => {
+      reader.readEntries((batch) => {
+        if (batch.length === 0) { resolve(all); return; }
+        all.push(...batch);
+        readNextBatch();
+      }, reject);
+    };
+    readNextBatch();
+  });
+}
+
+async function walk(entry: FileSystemEntry, out: DroppedEntry[]): Promise<void> {
+  if (entry.isFile) {
+    const relativePath = sanitizeRelativePath(entry.fullPath);
+    if (!relativePath) return;
+    out.push({ file: await readEntryAsFile(entry as FileSystemFileEntry), relativePath });
+    return;
+  }
+  if (entry.isDirectory) {
+    const reader = (entry as FileSystemDirectoryEntry).createReader();
+    for (const child of await readAllEntries(reader)) await walk(child, out);
+  }
+}
+
+/** Entry point: prefers the entries API (nested folders survive), falls back to a flat list. */
+export async function collectDroppedEntries(dataTransfer: DataTransfer): Promise<DroppedEntry[]> {
+  const entries = Array.from(dataTransfer.items ?? [])
+    .filter((item) => item.kind === "file" && typeof item.webkitGetAsEntry === "function")
+    .map((item) => item.webkitGetAsEntry())
+    .filter((entry): entry is FileSystemEntry => entry != null);
+
+  if (entries.length > 0) {
+    const out: DroppedEntry[] = [];
+    for (const entry of entries) await walk(entry, out);
+    return out;
+  }
+
+  // No entries API (or every item resolved to null) — flat files only, no folder structure.
+  const flat: DroppedEntry[] = [];
+  for (const file of Array.from(dataTransfer.files)) {
+    const relativePath = sanitizeRelativePath(file.name);
+    if (relativePath) flat.push({ file, relativePath });
+  }
+  return flat;
+}

package/src/web/components/os-explorer/upload/upload-queue.ts

@@ -0,0 +1,79 @@
+/**
+ * Bounded-concurrency runner for a batch of uploads, aggregating byte-level progress across
+ * every in-flight job (not just completed ones) so one large file streaming for a while does
+ * not make the overall percentage look stuck.
+ *
+ * Pure and DOM-free on purpose — `job.run` is the only place XHR/fetch appears, so this file
+ * is unit-testable without a browser.
+ */
+
+export interface UploadJob<T> {
+  id: string;
+  /** Byte size, for weighting this job's share of the aggregate progress. */
+  size: number;
+  run(onProgress: (bytesLoaded: number) => void): Promise<T>;
+}
+
+export interface UploadQueueProgress {
+  completed: number;
+  total: number;
+  bytesLoaded: number;
+  bytesTotal: number;
+}
+
+export interface UploadQueueResult<T> {
+  id: string;
+  ok: boolean;
+  value?: T;
+  error?: unknown;
+}
+
+/**
+ * Runs `jobs` with at most `concurrency` in flight at once. Results are returned in the same
+ * order as `jobs`, regardless of which finished first — callers that report per-file outcomes
+ * need that order to line up with what they queued.
+ */
+export async function runUploadQueue<T>(
+  jobs: UploadJob<T>[],
+  concurrency: number,
+  onProgress: (progress: UploadQueueProgress) => void,
+): Promise<UploadQueueResult<T>[]> {
+  const bytesTotal = jobs.reduce((sum, job) => sum + job.size, 0);
+  const loaded = new Array<number>(jobs.length).fill(0);
+  const results = new Array<UploadQueueResult<T>>(jobs.length);
+  let completed = 0;
+
+  const report = () => {
+    onProgress({
+      completed,
+      total: jobs.length,
+      bytesLoaded: loaded.reduce((sum, n) => sum + n, 0),
+      bytesTotal,
+    });
+  };
+
+  let nextIndex = 0;
+  async function worker(): Promise<void> {
+    for (;;) {
+      const index = nextIndex++;
+      if (index >= jobs.length) return;
+      const job = jobs[index]!;
+      try {
+        const value = await job.run((bytesLoaded) => {
+          loaded[index] = bytesLoaded;
+          report();
+        });
+        results[index] = { id: job.id, ok: true, value };
+      } catch (error) {
+        results[index] = { id: job.id, ok: false, error };
+      }
+      loaded[index] = job.size;
+      completed++;
+      report();
+    }
+  }
+
+  const workerCount = Math.max(1, Math.min(concurrency, jobs.length));
+  await Promise.all(Array.from({ length: workerCount }, worker));
+  return results;
+}

package/src/web/components/os-explorer/upload/use-upload-picker.tsx

@@ -0,0 +1,74 @@
+/**
+ * Backs the toolbar/context-menu/mobile "Upload…" actions: a hidden native file input the
+ * button clicks programmatically, so the browser's own picker chrome is used instead of a
+ * custom one. A second hidden input with the non-standard `webkitdirectory` attribute gives
+ * folder uploads on the browsers that support it (Chromium, Safari) — Firefox never
+ * implemented it, and `supportsFolderPicker` is what lets a caller hide that trigger there
+ * instead of offering a picker that silently behaves like a flat file picker.
+ */
+
+import { useRef, type ChangeEvent, type ReactNode } from "react";
+import type { DroppedEntry } from "./collect-dropped-entries";
+
+export interface UploadPicker {
+  supportsFolderPicker: boolean;
+  openFilePicker(): void;
+  openFolderPicker(): void;
+  /** Render this once anywhere in the tree — the inputs are visually hidden. */
+  inputs: ReactNode;
+}
+
+/** Non-standard but present on Chromium/WebKit's `<input>`; absent from the DOM lib types. */
+interface DirectoryPickerInputProps {
+  webkitdirectory?: string;
+}
+
+export function useUploadPicker(onFiles: (entries: DroppedEntry[]) => void): UploadPicker {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const folderInputRef = useRef<HTMLInputElement>(null);
+  const supportsFolderPicker =
+    typeof document !== "undefined" && "webkitdirectory" in document.createElement("input");
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    // Clears the value so picking the exact same file/folder again still fires `onChange`.
+    e.target.value = "";
+    if (!files || files.length === 0) return;
+    const entries: DroppedEntry[] = Array.from(files).map((file) => ({
+      file,
+      // The folder picker sets `webkitRelativePath` ("folder/sub/file.txt"); a plain file
+      // picker leaves it empty, so the bare name is the relative path.
+      relativePath: (file as File & { webkitRelativePath?: string }).webkitRelativePath || file.name,
+    }));
+    onFiles(entries);
+  };
+
+  return {
+    supportsFolderPicker,
+    openFilePicker: () => fileInputRef.current?.click(),
+    openFolderPicker: () => folderInputRef.current?.click(),
+    inputs: (
+      <>
+        <input
+          ref={fileInputRef}
+          type="file"
+          multiple
+          hidden
+          onChange={handleChange}
+          data-testid="explorer-upload-file-input"
+        />
+        {supportsFolderPicker && (
+          <input
+            ref={folderInputRef}
+            {...({ webkitdirectory: "" } satisfies DirectoryPickerInputProps)}
+            type="file"
+            multiple
+            hidden
+            onChange={handleChange}
+            data-testid="explorer-upload-folder-input"
+          />
+        )}
+      </>
+    ),
+  };
+}

package/src/web/components/os-explorer/views/column-row.tsx

@@ -36,7 +36,9 @@ export function ColumnRow({ entry, selected, currentDir, hasClipboard, isPinned,
   // Column view has no multi-select — a drag always carries just this one entry.
   // Spring-load is Column view's own drill-in gesture (`onSelect` already navigates for a
   // directory), so a rested hover reaches a deep folder without dropping first.
-  const dnd = useEntryRowDnd({ entry, dragPaths: [entry.path], run: actions.transferInto, springLoad: onSelect });
+  const dnd = useEntryRowDnd({
+    entry, dragPaths: [entry.path], run: actions.transferInto, springLoad: onSelect, onFiles: actions.uploadInto,
+  });
   return (
     <ContextMenu>
       <ContextMenuTrigger asChild>

package/src/web/components/os-explorer/views/column-view-column.tsx

@@ -61,7 +61,12 @@ export function ColumnViewColumn({
   // The column's own empty area is a drop target for its own directory — dropping below the
   // last row of an ancestor column moves/copies into that ancestor, not just the deepest one.
   // Mobile's single full-width column never gets one: no drag source can ever start on touch.
-  const backgroundDrop = usePathDropTarget({ targetDir: path, run: actions.transferInto, disabled: fullWidth });
+  const backgroundDrop = usePathDropTarget({
+    targetDir: path,
+    run: actions.transferInto,
+    onFiles: actions.uploadInto,
+    disabled: fullWidth,
+  });
 
   return (
     <div

package/src/web/components/os-explorer/views/icons-view-tile.tsx

@@ -42,7 +42,7 @@ export const IconsViewTile = memo(function IconsViewTile(props: IconsViewTilePro
   // A drag carries whatever a context menu would act on: the selection when this tile is
   // part of it, otherwise just this tile.
   const dragPaths = useMemo(() => menuTargets.map((target) => target.path), [menuTargets]);
-  const dnd = useEntryRowDnd({ entry, dragPaths, run: actions.transferInto });
+  const dnd = useEntryRowDnd({ entry, dragPaths, run: actions.transferInto, onFiles: actions.uploadInto });
   return (
     <ContextMenu>
       <ContextMenuTrigger asChild>

package/src/web/components/os-explorer/views/icons-view.tsx

@@ -76,7 +76,11 @@ export function IconsView({
   const creating = slice.inlineEdit?.kind === "new-file" || slice.inlineEdit?.kind === "new-folder";
   // The view background is the current directory itself — a tile already claims the drop
   // (and stops the event) when it is a directory, so this only ever fires over empty space.
-  const backgroundDrop = usePathDropTarget({ targetDir: slice.path, run: actions.transferInto });
+  const backgroundDrop = usePathDropTarget({
+    targetDir: slice.path,
+    run: actions.transferInto,
+    onFiles: actions.uploadInto,
+  });
 
   const onGridKeyDown = (event: KeyboardEvent) => {
     if (event.altKey || event.ctrlKey || event.metaKey) return;

package/src/web/components/os-explorer/views/list-row.tsx

@@ -44,7 +44,7 @@ export const ListRow = memo(function ListRow(props: ListRowProps) {
   // A drag carries whatever a context menu would act on: the selection when this row is part
   // of it, otherwise just this row.
   const dragPaths = useMemo(() => menuTargets.map((target) => target.path), [menuTargets]);
-  const dnd = useEntryRowDnd({ entry, dragPaths, run: actions.transferInto });
+  const dnd = useEntryRowDnd({ entry, dragPaths, run: actions.transferInto, onFiles: actions.uploadInto });
   return (
     <ContextMenu>
       <ContextMenuTrigger asChild>

package/src/web/components/os-explorer/views/list-view.tsx

@@ -62,7 +62,11 @@ export function ListView({
   const creating = slice.inlineEdit?.kind === "new-file" || slice.inlineEdit?.kind === "new-folder";
   // The view background is the current directory itself — a row already claims the drop
   // (and stops the event) when it is a directory, so this only ever fires over empty space.
-  const backgroundDrop = usePathDropTarget({ targetDir: slice.path, run: actions.transferInto });
+  const backgroundDrop = usePathDropTarget({
+    targetDir: slice.path,
+    run: actions.transferInto,
+    onFiles: actions.uploadInto,
+  });
 
   const toggleSort = (key: SortKey) =>
     setPrefs({ sort: { key, dir: sort.key === key && sort.dir === "asc" ? "desc" : "asc" } });

package/src/web/components/shared/markdown-code-block.tsx

@@ -1,8 +1,8 @@
 import { useState, useEffect, useRef, type ReactNode } from "react";
 import { useMdContext, FILE_EXT_RE, GLOB_CHARS_RE } from "./markdown-context";
-import { useTabStore } from "@/stores/tab-store";
 import { highlightToHtml, highlightSync, getActiveShikiTheme } from "@/theme/adapters/shiki-adapter";
 import { copyToClipboard } from "@/lib/clipboard";
+import { runInTerminal } from "@/lib/run-in-terminal";
 
 /**
  * Shiki-highlighted HTML for a code block. Returns null while streaming or
@@ -64,7 +64,6 @@ function hastToText(node: any): string {
 /** Pre — code block wrapper with mermaid detection, Shiki highlighting, action buttons */
 export function MdPre({ children, node, ...rest }: any) {
   const { codeActions, projectName, isStreaming } = useMdContext();
-  const openTab = useTabStore((s) => s.openTab);
 
   const codeNode = node?.children?.[0];
   const langClass = (codeNode?.properties?.className ?? []).find((c: string) => c.startsWith("language-"));
@@ -92,12 +91,9 @@ export function MdPre({ children, node, ...rest }: any) {
           <ActionBtn title="Copy" icon={<CopyIcon />} activeIcon={<CheckIcon />} onClick={() => void copyToClipboard(text)} />
           {isBash && projectName && (
             <ActionBtn
-              title="Run in terminal"
+              title="Send to terminal"
               icon={<PlayIcon />}
-              onClick={() => {
-                void copyToClipboard(text.replace(/^\$\s*/gm, ""));
-                openTab({ type: "terminal", title: "Terminal", metadata: { projectName }, projectId: projectName, closable: true });
-              }}
+              onClick={() => runInTerminal(text, projectName)}
             />
           )}
         </div>

package/src/web/components/terminal/terminal-tab.tsx

@@ -1,13 +1,14 @@
 import { useRef, useEffect, useState, useCallback, memo } from "react";
 import { useTerminal } from "@/hooks/use-terminal";
 import { useTerminalTouchSelection } from "@/hooks/use-terminal-touch-selection";
+import { useTerminalCommandQueue } from "@/hooks/use-terminal-command-queue";
+import { sendToChat } from "@/lib/send-to-chat";
 import { cn } from "@/lib/utils";
 import { copyToClipboard } from "@/lib/clipboard";
 import { RotateCcw, MessageSquare } from "lucide-react";
 import "@xterm/xterm/css/xterm.css";
 import { toast } from "sonner";
 
-import { usePanelStore } from "@/stores/panel-store";
 import { TerminalMobileToolbar } from "./terminal-mobile-toolbar";
 import { TerminalLinksSheet } from "./terminal-links-sheet";
 
@@ -19,9 +20,10 @@ interface TerminalTabProps {
 export const TerminalTab = memo(function TerminalTab({ metadata, tabId }: TerminalTabProps) {
   const sessionId = (metadata?.sessionId as string) ?? "new";
   const projectName = metadata?.projectName as string | undefined;
+  const cwd = metadata?.cwd as string | undefined;
   const containerRef = useRef<HTMLDivElement>(null);
 
-  const { connected, reconnecting, exited, sendData, getSelection, getLastCommandOutput, getBufferUrls, restart } = useTerminal({ sessionId, projectName, containerRef, tabId });
+  const { connected, reconnecting, exited, shellReady, sendData, getSelection, getLastCommandOutput, getLastCommand, getBufferUrls, restart } = useTerminal({ sessionId, projectName, cwd, containerRef, tabId });
   const [ctrlMode, setCtrlMode] = useState(false);
   const [selectMode, setSelectMode] = useState(false);
   const [linksOpen, setLinksOpen] = useState(false);
@@ -35,6 +37,10 @@ export const TerminalTab = memo(function TerminalTab({ metadata, tabId }: Termin
     termElement?.focus();
   }, []);
 
+  // "Run in terminal" (chat code blocks) types its command in here, waiting for
+  // the shell to finish booting first.
+  useTerminalCommandQueue({ tabId, metadata, shellReady, sendData, focusTerminal, containerRef });
+
   // Raising the soft keyboard needs focus() to run inside a gesture the browser
   // recognises, and xterm's own mousedown handling does not reliably qualify.
   // Capture-phase `touchend` runs before xterm's handlers and is unambiguously a
@@ -100,33 +106,21 @@ export const TerminalTab = memo(function TerminalTab({ metadata, tabId }: Termin
     }
   }, [sendData, focusTerminal]);
 
+  // Output without the command that produced it reads as an orphan in chat, so the
+  // prompt line goes along with it. A selection is sent verbatim — the user already
+  // picked exactly what they meant.
   const handleSendToChat = useCallback(() => {
     const selection = getSelection();
-    const text = selection || getLastCommandOutput();
-    if (!text.trim()) return;
-    const codeBlock = "```bash\n" + text + "\n```";
+    const body = selection || getLastCommandOutput();
+    if (!body.trim()) return;
+    const command = selection ? "" : getLastCommand();
+    const transcript = command ? `${command}\n${body}` : body;
+    const codeBlock = "```bash\n" + transcript + "\n```";
     const label = selection ? "Terminal selection" : "Terminal output";
 
-    // Try to inject into an already-open chat tab as attachment chip
-    let handled = false;
-    const handler = () => { handled = true; };
-    window.addEventListener("ppm:send-to-chat:ack", handler, { once: true });
-    window.dispatchEvent(new CustomEvent("ppm:send-to-chat", { detail: { text: codeBlock, label, projectName } }));
-    window.removeEventListener("ppm:send-to-chat:ack", handler);
-
-    if (handled) {
-      toast.success("Sent to chat", { duration: 1500 });
-    } else {
-      // No chat tab mounted — open a new one with the content as initialValue
-      usePanelStore.getState().openTab({
-        type: "chat",
-        title: "Chat",
-        projectId: null,
-        metadata: { projectName, pendingMessage: codeBlock },
-        closable: true,
-      });
-    }
-  }, [getSelection, getLastCommandOutput, projectName]);
+    sendToChat({ text: codeBlock, label, projectName });
+    toast.success("Sent to chat", { duration: 1500 });
+  }, [getSelection, getLastCommandOutput, getLastCommand, projectName]);
 
   const isMobile = typeof window !== "undefined" && "ontouchstart" in window;
 

package/src/web/hooks/use-chat.ts

@@ -7,6 +7,7 @@ import { usePanelStore } from "@/stores/panel-store";
 import { playNotificationSound } from "@/lib/notification-sounds";
 import { toast } from "sonner";
 import type { ChatMessage, ChatEvent } from "../../types/chat";
+import type { BackgroundAgentStatus } from "../../shared/background-agent-status";
 import type { ChatWsServerMessage, SessionPhase, BackgroundShell, VersionGroup } from "../../types/api";
 import { useBackgroundOutputStore } from "../stores/background-output-store";
 
@@ -210,6 +211,22 @@ export function useChat(sessionId: string | null, providerId = "claude", project
     updateTeamActivity();
   }, [updateTeamActivity]);
 
+  /** Merge a team's on-disk message history into the activity buffer. */
+  const loadTeamDetail = useCallback(async (teamName: string) => {
+    try {
+      const res = await api.get<any>(`/api/teams/${encodeURIComponent(teamName)}`);
+      if (!res?.messages) return;
+      const existing = teamActivityRef.current.messages;
+      const newMsgs = (res.messages as any[]).filter(
+        (m: any) => !existing.some((e) => e.timestamp === m.timestamp && e.from === m.from)
+      );
+      existing.push(...newMsgs);
+      existing.sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime());
+      if (existing.length > 500) existing.splice(0, existing.length - 500);
+      updateTeamActivity();
+    } catch { /* team deleted or unreadable */ }
+  }, [updateTeamActivity]);
+
   // Derived state
   const isStreaming = phase !== "idle";
 
@@ -316,6 +333,37 @@ export function useChat(sessionId: string | null, providerId = "claude", project
     }
   }, [flushMessages]);
 
+  /**
+   * Stamp a backgrounded Agent/Task card with its terminal state.
+   *
+   * The card may live in either half of the transcript: the streaming buffer when the agent
+   * finishes inside the turn that spawned it, or a finalized message when it outlives that
+   * turn — which is the common case, and the one that used to leave a green check on a
+   * still-running agent.
+   */
+  const markSubagentStatus = useCallback((toolUseId: string, status: BackgroundAgentStatus) => {
+    const isTarget = (e: ChatEvent) =>
+      e.type === "tool_use" && (e.tool === "Agent" || e.tool === "Task") && (e as any).toolUseId === toolUseId;
+
+    const idx = streamingEventsRef.current.findIndex(isTarget);
+    if (idx !== -1) {
+      streamingEventsRef.current[idx] = { ...streamingEventsRef.current[idx]!, bgStatus: status } as ChatEvent;
+      syncMessages();
+      return;
+    }
+
+    setMessages((prev) => {
+      let mi = -1;
+      for (let i = prev.length - 1; i >= 0; i--) {
+        if (prev[i]!.events?.some(isTarget)) { mi = i; break; }
+      }
+      if (mi === -1) return prev;
+      const msg = prev[mi]!;
+      const events = msg.events!.map((e) => (isTarget(e) ? { ...e, bgStatus: status } as ChatEvent : e));
+      return [...prev.slice(0, mi), { ...msg, events }, ...prev.slice(mi + 1)];
+    });
+  }, [syncMessages]);
+
   /** Process a single stream event — reused by live events and turn_events replay */
   const processStreamEvent = useCallback((data: unknown) => {
     const ev = data as any;
@@ -536,20 +584,8 @@ export function useChat(sessionId: string | null, providerId = "claude", project
         const teamName = ev.teamName as string;
         if (teamName) {
           teamActivityRef.current.teamNames.add(teamName);
-          // Fetch full team data from REST
-          api.get<any>(`/api/teams/${encodeURIComponent(teamName)}`).then((res: any) => {
-            if (res?.messages) {
-              const existing = teamActivityRef.current.messages;
-              const newMsgs = (res.messages as any[]).filter(
-                (m: any) => !existing.some((e) => e.timestamp === m.timestamp && e.from === m.from)
-              );
-              existing.push(...newMsgs);
-              existing.sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime());
-              if (existing.length > 500) existing.splice(0, existing.length - 500);
-            }
-            updateTeamActivity();
-          }).catch(() => {});
           updateTeamActivity();
+          void loadTeamDetail(teamName);
         }
         break;
       }
@@ -593,6 +629,15 @@ export function useChat(sessionId: string | null, providerId = "claude", project
         break;
       }
 
+      case "subagent_status": {
+        // A backgrounded Agent finished. Its card has shown a spinner since the launch ack
+        // (see isAsyncAgentLaunchAck) — stamp the terminal state so it can settle.
+        const tuId = ev.toolUseId as string | undefined;
+        const status = ev.status as BackgroundAgentStatus | undefined;
+        if (tuId && status) markSubagentStatus(tuId, status);
+        break;
+      }
+
       case "background_registry": {
         const shells = (ev.shells as BackgroundShell[]) ?? [];
         backgroundShellsRef.current = shells;
@@ -656,7 +701,7 @@ export function useChat(sessionId: string | null, providerId = "claude", project
         break;
       }
     }
-  }, [routeToParent, routeToFinalizedParent, syncMessages]);
+  }, [routeToParent, routeToFinalizedParent, syncMessages, markSubagentStatus, updateTeamActivity, loadTeamDetail]);
 
   const handleMessage = useCallback((event: MessageEvent) => {
     let data: ChatWsServerMessage;
@@ -914,6 +959,23 @@ export function useChat(sessionId: string | null, providerId = "claude", project
     setTeamActivity(EMPTY_TEAM_ACTIVITY);
     setTeamMessages([]);
 
+    // Rehydrate the team from disk. team_detected only arrives live and its replay
+    // buffer is cleared at every turn boundary, so without this a reload — or any
+    // later turn — drops the team UI even while the team is still running.
+    if (sessionId) {
+      api.get<any[]>("/api/teams").then((teams) => {
+        if (cancelled || !Array.isArray(teams)) return;
+        // Only the team named after this session. The global list carries other
+        // sessions' teams and nothing on disk attributes those to a session, so
+        // matching by name is what keeps one session's team out of another's UI.
+        const mine = teams.filter((t: any) => (t?.name ?? t?.team_name) === sessionId);
+        if (mine.length === 0) return;
+        teamActivityRef.current.teamNames.add(sessionId);
+        updateTeamActivity();
+        void loadTeamDetail(sessionId);
+      }).catch(() => {});
+    }
+
     // Snapshot the previous session's message ids. On a same-tab session swap
     // (edit→fork / version switch) a queued send may append optimistic + live
     // streaming messages BEFORE this history fetch resolves. We drop exactly the
@@ -970,7 +1032,7 @@ export function useChat(sessionId: string | null, providerId = "claude", project
     return () => {
       cancelled = true;
     };
-  }, [sessionId, providerId, projectName]);
+  }, [sessionId, providerId, projectName, updateTeamActivity, loadTeamDetail]);
 
   const sendMessage = useCallback(
     (content: string, opts?: { permissionMode?: string; priority?: 'now' | 'next' | 'later'; images?: Array<{ data: string; mediaType: string }> }) => {

package/src/web/hooks/use-team-activity-feed.ts

@@ -0,0 +1,92 @@
+/**
+ * Poll a team's per-member activity while the panel is open.
+ *
+ * The team inboxes cannot say who is working — every member reads "active"
+ * forever there. `/api/teams/:name/activity` derives it from the agent
+ * transcripts instead, and also returns the replies teammates sent back, which
+ * no inbox holds. Polling only runs while `enabled`, so a closed panel costs
+ * nothing.
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { api } from "@/lib/api-client";
+
+/** Fast enough that a working teammate looks live, slow enough to stay cheap. */
+const POLL_INTERVAL_MS = 5_000;
+
+export type MemberWorkState = "working" | "paused" | "no-transcript";
+
+export interface TeamMemberActivity {
+  name: string;
+  workState: MemberWorkState;
+  agentType?: string;
+  model?: string;
+  description?: string;
+  toolUseId?: string;
+  startedAt?: string;
+  lastEventAt?: string;
+  lastTool?: string;
+  lastToolArg?: string;
+  lastNarrative?: string;
+  sizeBytes: number;
+}
+
+export interface OutboundTeamMessage {
+  from: string;
+  to: string;
+  text: string;
+  summary?: string;
+  timestamp: string;
+}
+
+export interface TeamActivityFeed {
+  members: TeamMemberActivity[];
+  outbound: OutboundTeamMessage[];
+  loading: boolean;
+  /** Re-fetch now, for the panel's refresh button. */
+  refresh: () => void;
+}
+
+export function useTeamActivityFeed(teamName: string, enabled: boolean): TeamActivityFeed {
+  const [members, setMembers] = useState<TeamMemberActivity[]>([]);
+  const [outbound, setOutbound] = useState<OutboundTeamMessage[]>([]);
+  const [loading, setLoading] = useState(false);
+  // Survives re-renders so a poll that resolves after teardown is discarded.
+  const cancelledRef = useRef(false);
+
+  const fetchActivity = useCallback(async (team: string) => {
+    if (!team) return;
+    setLoading(true);
+    try {
+      const res = await api.get<{ members?: TeamMemberActivity[]; outbound?: OutboundTeamMessage[] }>(
+        `/api/teams/${encodeURIComponent(team)}/activity`,
+      );
+      if (cancelledRef.current) return;
+      setMembers(res?.members ?? []);
+      setOutbound(res?.outbound ?? []);
+    } catch {
+      /* keep the last good snapshot rather than blanking the list */
+    } finally {
+      if (!cancelledRef.current) setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    cancelledRef.current = false;
+    if (!enabled || !teamName) {
+      // Drop the previous team's rows so a reopen never shows stale members.
+      setMembers([]);
+      setOutbound([]);
+      return () => { cancelledRef.current = true; };
+    }
+    void fetchActivity(teamName);
+    const timer = setInterval(() => void fetchActivity(teamName), POLL_INTERVAL_MS);
+    return () => {
+      cancelledRef.current = true;
+      clearInterval(timer);
+    };
+  }, [teamName, enabled, fetchActivity]);
+
+  const refresh = useCallback(() => void fetchActivity(teamName), [fetchActivity, teamName]);
+  return { members, outbound, loading, refresh };
+}