@hienlh/ppm 0.23.8 → 0.23.10

package/src/web/components/chat/agent-session-window-content.tsx

@@ -0,0 +1,133 @@
+/**
+ * Floating-window body replaying one agent's or teammate's work session, live.
+ *
+ * Generalised from the old team-member-only window: any card (an Agent/Task tool call) or
+ * named teammate streams through the same hub subscription (`useAgentSessionStream`), so a
+ * running background agent, a resumed SendMessage teammate and an old finished session all
+ * render through the same steps view. Nested Agent rows inside the stream stay expanded
+ * inline — `variant="window"` on `SubagentChildren` is what stops a nested Agent card from
+ * trying to open a second window for work this window is already the live view of.
+ */
+import { useMemo, useState } from "react";
+import { ChevronDown, ChevronRight, Loader2 } from "@/lib/icons";
+import { cn } from "@/lib/utils";
+import { useAgentSessionStream } from "@/hooks/use-agent-session-stream";
+import { usePrefersCoarsePointer } from "@/components/os-explorer/use-coarse-long-press";
+import { formatStepCount } from "@/lib/agent-step-summary";
+import { fallbackKey, useAgentSessionFallbackStore } from "./agent-session-fallback-store";
+import type { WindowContentProps } from "@/components/floating-window/window-content-registry";
+import type { AgentTranscriptProviderId, AgentTranscriptSourceKind } from "../../../shared/agent-transcript-protocol";
+import type { ChatEvent } from "../../../types/chat";
+import { SubagentChildren } from "./tool-cards";
+
+/** Payload a window or sheet opens an agent/teammate session with — the identity the hub
+ *  subscribes on, plus display-only extras the opener already knows. */
+export interface AgentSessionWindowPayload {
+  projectName: string;
+  providerId: AgentTranscriptProviderId;
+  sessionId: string;
+  source: AgentTranscriptSourceKind;
+  /** Window/sheet title — the opener names it (member handle, card description, …). */
+  title?: string;
+  /** The Agent/Task tool call's own prompt, shown as a collapsible header for a card source. */
+  prompt?: string;
+}
+
+function stepCount(events: ChatEvent[]): number {
+  return events.filter((e) => e.type === "tool_use").length;
+}
+
+type Status = "loading" | "running" | "failed" | "done";
+
+function StatusBadge({ status }: { status: Status }) {
+  if (status === "loading") return null;
+  if (status === "running") {
+    return (
+      <span className="flex items-center gap-1 text-[10px] text-primary shrink-0">
+        <Loader2 className="size-2.5 animate-spin" /> running
+      </span>
+    );
+  }
+  if (status === "failed") return <span className="text-[10px] text-error shrink-0">failed</span>;
+  return <span className="text-[10px] text-success shrink-0">done</span>;
+}
+
+export default function AgentSessionWindowContent({ payload }: WindowContentProps) {
+  const p = (payload ?? {}) as unknown as AgentSessionWindowPayload;
+  const key = p.sessionId ? fallbackKey(p.sessionId, p.source) : "";
+  const fallbackEvents = useAgentSessionFallbackStore((s) => (key ? s.entries[key] : undefined));
+  const { events, available, running, loading, error } = useAgentSessionStream({
+    projectName: p.projectName,
+    providerId: p.providerId,
+    sessionId: p.sessionId,
+    source: p.source,
+    fallbackEvents,
+  });
+  const [promptOpen, setPromptOpen] = useState(false);
+  // Touch needs the 44px minimum even at desktop window width; a mouse does not.
+  const coarse = usePrefersCoarsePointer();
+
+  const steps = useMemo(() => stepCount(events), [events]);
+  // Best-effort only: the transcript carries no explicit terminal marker of its own, so a
+  // stream that stopped ("running" went false) on an error result is read as failed.
+  const tail = events[events.length - 1];
+  const tailFailed = !running && !!tail && tail.type === "tool_result" && !!tail.isError;
+  const status: Status = loading ? "loading" : running ? "running" : tailFailed ? "failed" : "done";
+
+  return (
+    <div className="flex flex-col h-full min-h-0 bg-surface @container">
+      <div className="flex items-center gap-2 px-3 py-1.5 border-b border-border/30 shrink-0">
+        <span className="truncate text-xs font-medium">{p.title ?? "Agent session"}</span>
+        {events.length > 0 && <span className="text-[10px] text-text-subtle shrink-0">{formatStepCount(steps)}</span>}
+        <StatusBadge status={status} />
+        {!available && !loading && (
+          <span
+            className="ml-auto text-[10px] text-text-subtle shrink-0"
+            title="No live transcript for this session — showing steps already held in memory"
+          >
+            offline
+          </span>
+        )}
+      </div>
+
+      {!!p.prompt && (
+        <div className="border-b border-border/30 shrink-0">
+          <button
+            type="button"
+            onClick={() => setPromptOpen((v) => !v)}
+            className={cn(
+              "flex w-full items-center gap-1.5 px-3 py-1.5 text-[11px] text-text-subtle hover:text-foreground",
+              coarse ? "min-h-[44px]" : "min-h-[28px]",
+            )}
+          >
+            {promptOpen ? <ChevronDown className="size-3" /> : <ChevronRight className="size-3" />}
+            Prompt
+          </button>
+          {promptOpen && (
+            <div className="px-3 pb-2 text-[11px] text-text-secondary whitespace-pre-wrap select-text">
+              {p.prompt}
+            </div>
+          )}
+        </div>
+      )}
+
+      {loading && events.length === 0 ? (
+        <div className="flex-1 flex items-center justify-center gap-2 text-xs text-text-subtle">
+          <Loader2 className="size-3 animate-spin" />
+          Loading session…
+        </div>
+      ) : events.length === 0 ? (
+        <div className="flex-1 flex items-center justify-center text-xs text-text-subtle px-4 text-center">
+          {error ? "Could not load this session" : "No recorded steps"}
+        </div>
+      ) : (
+        <SubagentChildren
+          events={events}
+          projectName={p.projectName}
+          variant="window"
+          className="flex-1 min-h-0 overflow-y-auto px-3 py-2 space-y-1"
+        />
+      )}
+    </div>
+  );
+}

package/src/web/components/chat/chat-history-bar.tsx

@@ -669,6 +669,7 @@ export function ChatHistoryBar({
             messages={teamMessages ?? []}
             sessionId={sessionId}
             projectName={projectName}
+            providerId={providerId}
           />
         </div>
       )}

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

@@ -1,4 +1,4 @@
-import { useState, useCallback, useRef, useEffect } from "react";
+import { useState, useCallback, useRef, useEffect, useMemo } from "react";
 import { Loader2, Upload, X } from "@/lib/icons";
 import { toast } from "sonner";
 import { api, projectUrl } from "@/lib/api-client";
@@ -17,7 +17,8 @@ import { useChatAccountClaim } from "@/hooks/use-chat-account-claim";
 import { startPrepare, getPrepare, isPrepared, forgetPrepare } from "@/lib/new-chat-prepare-client";
 import { MessageList } from "./message-list";
 import { BackgroundCommandBar } from "./background-command-bar";
-import { TeamWorkingBar } from "./team-working-bar";
+import { RunningAgentsBar } from "./running-agents-bar";
+import { AgentSessionProvider, normalizeProviderId } from "./agent-session-context";
 import { McpSignInBar } from "@/components/mcp-auth/mcp-sign-in-bar";
 import { useTeamActivityFeed } from "@/hooks/use-team-activity-feed";
 import { MessageInput, type ChatAttachment, type MessagePriority } from "./message-input";
@@ -446,6 +447,13 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
   const primaryTeam = teamActivity?.teamNames?.[0] ?? "";
   const { members: teamMembers } = useTeamActivityFeed(primaryTeam, !!primaryTeam);
 
+  // Identity every Agent/Task card's one-line summary reads to open its session window —
+  // memoized so a card's context read doesn't churn on every unrelated re-render.
+  const agentSessionIdentity = useMemo(
+    () => ({ projectName, providerId: normalizeProviderId(providerId), sessionId: sessionId ?? "" }),
+    [projectName, providerId, sessionId],
+  );
+
   // Auto-clear notification badge when this tab is active and document is visible.
   // Checks ALL panels (not just focused) so split-panel scenarios also clear.
   useEffect(() => {
@@ -1085,6 +1093,7 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
   }, []);
 
   return (
+    <AgentSessionProvider value={agentSessionIdentity}>
     <div
       data-onboarding="chat"
       className="flex flex-col h-full relative"
@@ -1163,8 +1172,15 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
         bashPartialOutput={bashPartialOutput}
       />}
 
-      {/* Teammates still working — pinned here so it is the last thing under the conversation */}
-      <TeamWorkingBar teamName={primaryTeam} members={teamMembers} projectName={projectName} />
+      {/* Agents still working — pinned here so it is the last thing under the conversation */}
+      <RunningAgentsBar
+        projectName={projectName}
+        providerId={agentSessionIdentity.providerId}
+        sessionId={sessionId}
+        messages={messages}
+        teamName={primaryTeam}
+        teamMembers={teamMembers}
+      />
 
       {/* MCP servers this session cannot use until someone signs in */}
       <McpSignInBar key={sessionId ?? "draft"} needsAuth={mcpNeedsAuth} projectName={projectName || undefined} />
@@ -1287,5 +1303,6 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
 
       {/* Bug report popup is now global — see BugReportPopup in app.tsx */}
     </div>
+    </AgentSessionProvider>
   );
 }

package/src/web/components/chat/codex-usage-panel.tsx

@@ -12,7 +12,7 @@
  * all — so the quota rows follow what the account actually reports.
  */
 
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, useRef } from "react";
 import { Loader2 } from "@/lib/icons";
 import { api } from "@/lib/api-client";
 import { AccountCard } from "@/components/settings/accounts/account-card";
@@ -68,29 +68,47 @@ export function CodexUsagePanel({ onClose, usage, onReload, onSelectAccount, sel
   const [selectingId, setSelectingId] = useState<string | null>(null);
   const [togglingId, setTogglingId] = useState<string | null>(null);
   const [panelError, setPanelError] = useState<string | null>(null);
+  const requestRef = useRef(0);
+  const refreshingRef = useRef(false);
   /** The signed-out account whose "Sign in again" chip was pressed. */
   const [signInAgain, setSignInAgain] = useState<CodexAccount | null>(null);
 
   const load = useCallback(async () => {
+    if (refreshingRef.current) return;
+    const request = ++requestRef.current;
     setLoading(true);
     try {
       const d = await api.get<{ accounts: CodexAccount[] }>("/api/codex-accounts");
+      if (request !== requestRef.current) return;
       setAccounts(d.accounts);
       const u = await api.get<Record<string, Usage>>("/api/codex-accounts/usage");
-      setUsages(u);
-    } catch { /* ignore */ } finally { setLoading(false); }
+      if (request === requestRef.current) setUsages(u);
+    } catch { /* ignore */ } finally {
+      if (request === requestRef.current) setLoading(false);
+    }
   }, []);
-  useEffect(() => { load(); }, [load]);
+  useEffect(() => {
+    void load();
+    // The server refreshes quota every five minutes. Keep open cards in sync
+    // by re-reading its cache on the same cadence as the chat header.
+    const timer = setInterval(() => { void load(); }, 120_000);
+    return () => { clearInterval(timer); ++requestRef.current; };
+  }, [load]);
 
   const reload = useCallback(async () => {
+    const request = ++requestRef.current;
+    refreshingRef.current = true;
     setLoading(true);
     try {
-      // Unlike the account-list endpoint, the chat refresh carries refresh=1
-      // and invalidates Codex's five-minute provider-usage cache first.
+      // The chat refresh carries refresh=1 and fetches every Codex account
+      // live before this cached account-list read.
       await onReload?.();
       const u = await api.get<Record<string, Usage>>("/api/codex-accounts/usage");
-      setUsages(u);
-    } catch { /* retain the last successful reading */ } finally { setLoading(false); }
+      if (request === requestRef.current) setUsages(u);
+    } catch { /* retain the last successful reading */ } finally {
+      refreshingRef.current = false;
+      if (request === requestRef.current) setLoading(false);
+    }
   }, [onReload]);
 
   /**

package/src/web/components/chat/running-agents-bar.tsx

@@ -0,0 +1,93 @@
+/**
+ * Every agent that is really still working, pinned under the conversation.
+ *
+ * Replaces `TeamWorkingBar`: that bar only ever knew about named teammates
+ * polled over REST. This one also lists a backgrounded agent and one resumed
+ * by SendMessage (which writes no new card at all) — anything the transcript
+ * hub's `agent-activity` feed reports as recently written to disk, merged with
+ * the team panel's richer per-member poll for agent type / elapsed time.
+ *
+ * Liveness is entirely disk-derived on the server, never from chat state in
+ * memory, so a replayed old session shows nothing here even though its cards
+ * are still in the transcript.
+ */
+import { useMemo } from "react";
+import { Bot, Users } from "@/lib/icons";
+import { useAgentActivity } from "@/hooks/use-agent-activity";
+import type { TeamMemberActivity } from "@/hooks/use-team-activity-feed";
+import { buildRunningRows, findCardLabel } from "@/lib/running-agent-rows";
+import { formatDuration, shortAgentType } from "./team-member-activity-format";
+import { useOpenAgentSession } from "./use-open-agent-session";
+import { usePrefersCoarsePointer } from "@/components/os-explorer/use-coarse-long-press";
+import { cn } from "@/lib/utils";
+import type { ChatMessage } from "../../../types/chat";
+import type { AgentTranscriptProviderId } from "../../../shared/agent-transcript-protocol";
+
+interface RunningAgentsBarProps {
+  projectName: string;
+  providerId: AgentTranscriptProviderId;
+  sessionId: string | null;
+  /** For labelling a card row from what the chat already knows about it. */
+  messages: ChatMessage[];
+  /** The session's implicit team name, for a member row's `source`. */
+  teamName: string;
+  teamMembers: TeamMemberActivity[];
+}
+
+export function RunningAgentsBar({ projectName, providerId, sessionId, messages, teamName, teamMembers }: RunningAgentsBarProps) {
+  const running = useAgentActivity({ projectName, providerId, sessionId });
+  const openAgentSession = useOpenAgentSession();
+  const rows = useMemo(() => buildRunningRows(running, teamMembers), [running, teamMembers]);
+  // Touch needs the 44px minimum even at desktop width; a mouse keeps the tighter 36px row.
+  const coarse = usePrefersCoarsePointer();
+
+  if (!sessionId || rows.length === 0) return null;
+
+  return (
+    <div className="shrink-0 border-t border-border bg-surface-elevated/60 px-2 py-1.5 space-y-1">
+      {rows.map((row) => {
+        const label = row.cardId ? findCardLabel(messages, row.cardId) : null;
+        const name = row.memberName ?? label?.handle ?? null;
+        const description = label?.description || (row.cardId ? "Agent" : row.memberName!);
+        const elapsed = row.startedAt ? formatDuration(row.startedAt) : undefined;
+        const agentType = shortAgentType(row.agentType);
+
+        return (
+          <button
+            key={row.key}
+            type="button"
+            onClick={() => openAgentSession({
+              projectName,
+              providerId,
+              sessionId,
+              source: row.cardId ? { kind: "card", cardId: row.cardId } : { kind: "member", teamName, memberName: row.memberName! },
+              title: name ? `Session — ${name}` : "Agent session",
+              prompt: label?.description,
+            })}
+            className={cn(
+              "flex w-full items-center gap-2 rounded px-1 py-1.5 text-left text-xs hover:bg-surface transition-colors",
+              coarse ? "min-h-[44px]" : "min-h-[36px]",
+            )}
+            title={name ? `Open ${name}'s session` : "Open agent session"}
+          >
+            <span className="relative flex size-2 shrink-0">
+              <span className="absolute inline-flex size-full animate-ping rounded-full bg-emerald-400 opacity-60" />
+              <span className="relative inline-flex size-2 rounded-full bg-emerald-500" />
+            </span>
+            {row.memberName
+              ? <Users className="size-3.5 shrink-0 text-accent-2" />
+              : <Bot className="size-3.5 shrink-0 text-primary" />}
+            <span className="font-medium text-text-primary shrink-0">{name ?? description}</span>
+            {!!agentType && <span className="text-text-3 shrink-0 hidden sm:inline">{agentType}</span>}
+            {!!row.lastStep && (
+              <span className="flex-1 truncate text-text-subtle" title={row.lastStep}>
+                {row.lastStep}
+              </span>
+            )}
+            {!!elapsed && <span className="ml-auto shrink-0 text-text-3 font-mono">{elapsed}</span>}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/web/components/chat/team-activity-panel.tsx

@@ -11,7 +11,8 @@ import { RefreshCw } from "@/lib/icons";
 import { cn } from "@/lib/utils";
 import type { TeamMessageItem } from "@/hooks/use-chat";
 import { useTeamActivityFeed } from "@/hooks/use-team-activity-feed";
-import { useOpenTeamMember } from "./use-open-team-member";
+import { useOpenAgentSession } from "./use-open-agent-session";
+import { normalizeProviderId } from "./agent-session-context";
 import { usePrefersCoarsePointer } from "@/components/os-explorer/use-coarse-long-press";
 import { TeamMemberList } from "./team-member-list";
 import { TeamMessageList } from "./team-message-list";
@@ -25,6 +26,9 @@ interface TeamActivityPanelProps {
   sessionId?: string | null;
   /** Passed to a member window so its steps resolve project-relative paths. */
   projectName?: string;
+  /** Which provider's hub to subscribe the session window on — forwarded by
+   *  `chat-history-bar.tsx` from the chat's own `providerId`; defaults to Claude when absent. */
+  providerId?: string;
 }
 
 /** Implicit teams are named after the session, which is an unreadable uuid. */
@@ -32,10 +36,10 @@ function teamLabel(name: string, sessionId?: string | null): string {
   return name === sessionId ? "Team (current session)" : name;
 }
 
-export function TeamActivityPanel({ teamNames, messages, sessionId, projectName }: TeamActivityPanelProps) {
+export function TeamActivityPanel({ teamNames, messages, sessionId, projectName, providerId }: TeamActivityPanelProps) {
   const [selectedTeam, setSelectedTeam] = useState(teamNames[0] ?? "");
   const [tab, setTab] = useState<TeamTab>("members");
-  const openMember = useOpenTeamMember();
+  const openAgentSession = useOpenAgentSession();
   // Touch needs the 44px minimum even at desktop width; a mouse does not.
   const coarse = usePrefersCoarsePointer();
 
@@ -51,9 +55,19 @@ export function TeamActivityPanel({ teamNames, messages, sessionId, projectName
 
   const openMemberSession = useCallback(
     (memberName: string) => {
-      openMember({ teamName: selectedTeam, memberName, projectName });
+      // A team name is not a session id — the hub's per-session subscription would name a
+      // session that never exists and fail ownership. Without the real id there is nothing
+      // to open (no worse than the old handle lookup, which had the same gap).
+      if (!sessionId) return;
+      openAgentSession({
+        projectName: projectName ?? "",
+        providerId: normalizeProviderId(providerId),
+        sessionId,
+        source: { kind: "member", teamName: selectedTeam, memberName },
+        title: `Session — ${memberName}`,
+      });
     },
-    [openMember, selectedTeam, projectName],
+    [openAgentSession, selectedTeam, projectName, providerId, sessionId],
   );
 
   /**

package/src/web/components/chat/tool-cards.tsx

@@ -101,6 +101,10 @@ import { isImageExtension } from "../../../shared/image-extensions";
 import { resultHasImagePlaceholder } from "../../../shared/tool-result-content";
 import { isAsyncAgentLaunchAck } from "../../../shared/background-agent-status";
 import { ToolImagePreview } from "./tool-image-preview";
+import { AgentCardSummary, type AgentCardStatus } from "./agent-card-summary";
+import { useOpenAgentSession } from "./use-open-agent-session";
+import { useAgentSessionContext, normalizeProviderId } from "./agent-session-context";
+import { agentStepInfo, formatStepCount, mergeFallbackEvents } from "@/lib/agent-step-summary";
 
 /** Extract tool name and input from a ChatEvent */
 function extractToolInfo(tool: ChatEvent): { toolName: string; input: Record<string, unknown> } {
@@ -145,12 +149,18 @@ export function ToolCard({
   completed,
   projectName,
   bashPartialOutput,
+  variant = "chat",
 }: {
   tool: ChatEvent;
   result?: ChatEvent;
   completed?: boolean;
   projectName?: string;
   bashPartialOutput?: React.RefObject<Map<string, BashPartialEntry>>;
+  /** "window" inside an agent-session window: a nested Agent/Task card must keep expanding
+   *  inline there (the window already *is* the live view of that work) rather than opening
+   *  a second window — the chat's own one-line summary branch below only fires for the
+   *  default `"chat"` variant. */
+  variant?: "chat" | "window";
 }) {
   const [expanded, setExpanded] = useState(() => {
     // Edit/MultiEdit cards open by default so the inline diff is visible without
@@ -162,6 +172,11 @@ export function ToolCard({
     // so show it without requiring a click.
     return !!imageReadPath(tool);
   });
+  // Called unconditionally (Rules of Hooks) even for tool types that never reach the
+  // subagent-summary branch below — cheap, and `variant`/tool type are stable for the
+  // life of one ToolCard instance, same as the `tool.type === "error"` early return above.
+  const openAgentSession = useOpenAgentSession();
+  const agentSessionIdentity = useAgentSessionContext();
 
   if (tool.type === "error") {
     return (
@@ -209,6 +224,45 @@ export function ToolCard({
 
   // Read partial output for streaming Bash/PowerShell tools
   const toolUseId = tool.type === "tool_use" ? (tool as any).toolUseId as string | undefined : undefined;
+
+  // In chat, every Agent/Task card — named teammates included — is one line that opens the
+  // live session window/sheet rather than expanding inline; `variant="window"` (the window's
+  // own nested-card rendering) keeps today's inline expansion below instead.
+  if (isSubagent && variant === "chat" && tool.type === "tool_use") {
+    const handle = addressableAgentName(toolName, input);
+    const description = handle ? "" : truncate(String((input as any).description ?? (input as any).prompt ?? ""), 60);
+    const { stepCount, lastStep } = agentStepInfo(tool);
+    const status: AgentCardStatus = (isError || bgFailed) ? "error" : isDone ? "done" : "running";
+    const cardId = toolUseId ?? "";
+    // No provider gave this card a real session identity (the group-chat transcript viewer
+    // has none) — a synthetic id the hub can never resolve still lets the card open, just
+    // straight into memory-only mode via the fallback events below.
+    const identity = agentSessionIdentity ?? {
+      projectName: projectName ?? "",
+      providerId: normalizeProviderId(undefined),
+      sessionId: `local:${cardId || "card"}`,
+    };
+    const fallbackEvents = mergeFallbackEvents(tool.children ?? [], tool.recentChildren ?? []);
+    return (
+      <AgentCardSummary
+        handle={handle}
+        description={description}
+        stepCount={stepCount}
+        lastStep={lastStep}
+        status={status}
+        bgRunning={bgRunning}
+        onOpen={() => openAgentSession({
+          projectName: identity.projectName,
+          providerId: identity.providerId,
+          sessionId: identity.sessionId,
+          source: { kind: "card", cardId },
+          title: handle ? `Session — ${handle}` : (description || "Agent session"),
+          prompt: String((input as any).prompt ?? (input as any).description ?? ""),
+        }, fallbackEvents)}
+      />
+    );
+  }
+
   const partial = (toolName === "Bash" || toolName === "PowerShell") && !hasResult && toolUseId
     ? bashPartialOutput?.current?.get(toolUseId)
     : undefined;
@@ -256,7 +310,7 @@ export function ToolCard({
             <span className="text-[10px] text-warning">{partial!.lineCount} line{partial!.lineCount !== 1 ? "s" : ""} streaming…</span>
           )}
           {hasChildren && !isStreamingBash && (
-            <span className="text-[10px] text-text-3 font-mono">{children!.length} steps</span>
+            <span className="text-[10px] text-text-3 font-mono">{formatStepCount(children!.length)}</span>
           )}
           {bgRunning && (
             <span className="text-[10px] text-primary">running…</span>
@@ -283,7 +337,7 @@ export function ToolCard({
           {partial && <StreamingBashOutput content={partial.content} lineCount={partial.lineCount} />}
           {/* Subagent children: render nested tool events */}
           {hasChildren && (
-            <SubagentChildren events={children!} projectName={projectName} />
+            <SubagentChildren events={children!} projectName={projectName} variant={variant} />
           )}
           {imagePath && (
             <ToolImagePreview filePath={imagePath} projectName={projectName ?? ""} />
@@ -753,7 +807,13 @@ function CollapsibleOutput({ output }: { output: string }) {
  *  session with the same step rendering the inline Agent card uses.
  *  `className` overrides the container so a full-height surface can drop the
  *  card's fixed max-height. */
-export function SubagentChildren({ events, projectName, className }: { events: ChatEvent[]; projectName?: string; className?: string }) {
+export function SubagentChildren({ events, projectName, className, variant = "chat" }: {
+  events: ChatEvent[];
+  projectName?: string;
+  className?: string;
+  /** Forwarded to every child `ToolCard` — see its own doc comment. */
+  variant?: "chat" | "window";
+}) {
   // Group children similar to InterleavedEvents: pair tool_use + tool_result, merge text
   type ChildGroup =
     | { kind: "text"; content: string }
@@ -806,7 +866,16 @@ export function SubagentChildren({ events, projectName, className }: { events: C
             </div>
           );
         }
-        return <ToolCard key={`sc-${i}`} tool={g.tool} result={g.result} completed={!!(g.result)} projectName={projectName} />;
+        return (
+          <ToolCard
+            key={`sc-${i}`}
+            tool={g.tool}
+            result={g.result}
+            completed={!!(g.result)}
+            projectName={projectName}
+            variant={variant}
+          />
+        );
       })}
     </div>
   );

package/src/web/components/chat/use-open-agent-session.ts

@@ -0,0 +1,83 @@
+/**
+ * Opening an agent's or teammate's work session, on whichever presentation the device has.
+ *
+ * `WindowLayer` renders nothing below the `md` breakpoint, so `openWindow("agent-session")`
+ * is a silent no-op on a phone — the tap looked broken. Desktop keeps the floating window,
+ * spawning portrait top-right; mobile gets the full-screen sheet. Both host the same content.
+ *
+ * Every session opens by its own `(sessionId, source)` identity: a second open for the one
+ * already showing focuses that window instead of spawning a duplicate. At the window cap the
+ * oldest *agent-session* window is replaced — not some unrelated window the user is still
+ * using — and if there is no agent-session window to replace, the open is refused instead of
+ * silently evicting something else (focus-and-do-nothing would be worse).
+ *
+ * The returned callback reads the window store via `getState()` at call time rather than
+ * subscribing to it with the `useWindowStore(selector)` hook form: every `ToolCard` in every
+ * mounted chat tab calls this hook unconditionally (Bash/Read cards too, not just Agent/Task),
+ * and a window-store subscription there re-rendered all of them on every drag/resize frame of
+ * any floating window, anywhere — dragging a window made every chat tab's tool cards repaint.
+ * The callback only ever needs the *current* windows at the moment a card is tapped, never a
+ * live view of them.
+ */
+import { useCallback } from "react";
+import { toast } from "sonner";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import { useWindowStore } from "@/components/floating-window/window-store";
+import { MAX_WINDOWS, portraitSpawnRect } from "@/components/floating-window/window-geometry";
+import type { ChatEvent } from "../../../types/chat";
+import type { AgentSessionWindowPayload } from "./agent-session-window-content";
+import { useAgentSessionSheetStore } from "./agent-session-sheet-store";
+import { fallbackKey, setFallbackEvents } from "./agent-session-fallback-store";
+
+function samePayloadSource(
+  a: Record<string, unknown> | undefined,
+  b: AgentSessionWindowPayload,
+): boolean {
+  const p = a as Partial<AgentSessionWindowPayload> | undefined;
+  if (typeof p?.sessionId !== "string" || !p.source) return false;
+  return fallbackKey(p.sessionId, p.source) === fallbackKey(b.sessionId, b.source);
+}
+
+/** Callback that opens a session the right way for this viewport and the current windows. */
+export function useOpenAgentSession(): (payload: AgentSessionWindowPayload, fallbackEvents?: ChatEvent[]) => void {
+  const isMobile = useIsMobile();
+  const openSheet = useAgentSessionSheetStore((s) => s.open);
+
+  return useCallback(
+    (payload: AgentSessionWindowPayload, fallbackEvents?: ChatEvent[]) => {
+      if (!payload.sessionId) return; // nothing the hub can stream without a session id
+
+      if (fallbackEvents) {
+        setFallbackEvents(fallbackKey(payload.sessionId, payload.source), fallbackEvents);
+      }
+
+      if (isMobile) {
+        openSheet(payload);
+        return;
+      }
+
+      const store = useWindowStore.getState();
+      const asRecord = payload as unknown as Record<string, unknown>;
+      const all = Object.values(store.windows);
+      const existing = all.find((w) => w.kind === "agent-session" && samePayloadSource(w.payload, payload));
+      if (existing) {
+        store.focus(existing.id);
+        return;
+      }
+
+      if (all.length >= MAX_WINDOWS) {
+        const agentWindows = all.filter((w) => w.kind === "agent-session").sort((a, b) => a.rank - b.rank);
+        if (agentWindows.length === 0) {
+          toast.error("Too many windows open", { description: "Close one to open this session." });
+          return;
+        }
+        store.close(agentWindows[0]!.id);
+      }
+
+      const afterClose = Object.values(useWindowStore.getState().windows);
+      const rect = portraitSpawnRect(afterClose.map((w) => w.rect), useWindowStore.getState().bounds);
+      useWindowStore.getState().open("agent-session", asRecord, rect);
+    },
+    [isMobile, openSheet],
+  );
+}

package/src/web/components/floating-window/window-content-registry.ts

@@ -19,7 +19,7 @@ export interface WindowContentProps {
 
 export const WINDOW_CONTENT: Record<WindowKind, LazyExoticComponent<ComponentType<WindowContentProps>>> = {
   explorer: lazy(() => import("@/components/os-explorer/explorer-window-content")),
-  "team-member": lazy(() => import("@/components/chat/team-member-window-content")),
+  "agent-session": lazy(() => import("@/components/chat/agent-session-window-content")),
   "system-monitor": lazy(() => import("@/components/system/system-monitor-window-content")),
   "tab-host": lazy(() => import("./tab-host-window-content")),
   "remote-desktop": lazy(() => import("@/components/remote-desktop/remote-desktop-window-content")),
@@ -30,10 +30,9 @@ export const WINDOW_CONTENT: Record<WindowKind, LazyExoticComponent<ComponentTyp
 export function windowTitle(kind: WindowKind, payload?: Record<string, unknown>): string {
   const explicit = payload?.title;
   if (typeof explicit === "string" && explicit.trim()) return explicit;
-  if (kind === "team-member") {
-    const member = payload?.memberName;
-    return typeof member === "string" && member ? `Session — ${member}` : "Team member";
-  }
+  // Every agent-session window is opened with an explicit title (member name or card
+  // description) by its opener, so this only fires for a malformed/legacy payload.
+  if (kind === "agent-session") return "Agent session";
   if (kind === "system-monitor") return "System Monitor";
   if (kind === "remote-desktop") return "Remote Desktop";
   if (kind === "settings") return "Settings";