@hienlh/ppm 0.23.13 → 0.23.15

package/src/web/components/chat/db-execute-approval-card.tsx

@@ -0,0 +1,100 @@
+import { useState } from "react";
+import { ShieldAlert } from "@/lib/icons";
+import { Input } from "@/components/ui/input";
+import { api } from "@/lib/api-client";
+import { DB_TYPE_LABELS } from "../../../shared/db-types";
+import { selfCommitNote, type DbApprovalAnswer, type DbExecuteApprovalInput } from "../../../shared/db-ai-tools";
+
+/**
+ * The prompt for a change the AI asked to make with `db_execute`: the connection, the AI's reason
+ * and the exact SQL, run once if the user types PPM's password.
+ *
+ * The answer goes over HTTP rather than the chat socket, so a wrong password is answered here
+ * while the card stays, and the password never travels in the socket's broadcasts. The card
+ * leaves when `approval_resolved` arrives, on every device showing the chat.
+ */
+export function DbExecuteApprovalCard({ requestId, input }: { requestId: string; input: DbExecuteApprovalInput }) {
+  const [password, setPassword] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const canApprove = !busy && (!input.passwordRequired || password.length > 0);
+  const selfCommit = selfCommitNote(input.dbType, input.sql);
+
+  const answer = async (approved: boolean) => {
+    setBusy(true);
+    setError(null);
+    const body: DbApprovalAnswer = approved && input.passwordRequired ? { approved, password } : { approved };
+    try {
+      await api.post(`/api/db/ai-approvals/${encodeURIComponent(requestId)}`, body);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="rounded-lg border-2 border-warning/40 bg-warning/10 p-3 space-y-2 select-text">
+      <div className="flex items-center gap-2 text-warning text-sm font-medium">
+        <ShieldAlert className="size-4" />
+        <span>Approve a database change</span>
+      </div>
+      <div className="flex flex-wrap items-center gap-1.5 text-xs">
+        {input.color && <span className="size-2.5 rounded-full shrink-0" style={{ backgroundColor: input.color }} />}
+        <span className="font-medium text-text-primary">{input.connectionName}</span>
+        {input.database && <span className="font-mono text-text-secondary">/ {input.database}</span>}
+        <span className="text-text-subtle">{DB_TYPE_LABELS[input.dbType] ?? input.dbType}{input.group ? ` · ${input.group}` : ""}</span>
+        {input.readonly && (
+          <span className="rounded px-1.5 py-0.5 text-[10px] bg-panel-2 text-text-3">readonly — lifted for this script only</span>
+        )}
+      </div>
+      {input.reason && <p className="text-xs text-text-primary whitespace-pre-wrap">{input.reason}</p>}
+      <pre className="text-xs font-mono text-text-secondary overflow-auto max-h-64 whitespace-pre-wrap break-all bg-background rounded p-2 border border-border">
+        {input.sql}
+      </pre>
+      <p className="text-[11px] text-text-subtle">
+        Runs once, in one transaction.
+        {input.expectedRows != null && ` Rolled back unless exactly ${input.expectedRows} row${input.expectedRows === 1 ? "" : "s"} change.`}
+      </p>
+      {selfCommit && <p className="text-[11px] text-warning">{selfCommit}</p>}
+      <form
+        className="flex flex-col gap-2 md:flex-row md:items-center"
+        onSubmit={(e) => {
+          e.preventDefault();
+          if (canApprove) void answer(true);
+        }}
+      >
+        {input.passwordRequired && (
+          <Input
+            type="password"
+            autoComplete="current-password"
+            placeholder="PPM password"
+            aria-label="PPM password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            aria-invalid={!!error}
+            disabled={busy}
+            className="h-11 md:h-8 md:max-w-56"
+          />
+        )}
+        <div className="flex gap-2">
+          <button
+            type="submit"
+            disabled={!canApprove}
+            className="flex-1 md:flex-none h-11 md:h-8 px-4 rounded bg-warning text-white text-xs font-medium hover:bg-warning/80 transition-colors disabled:opacity-50"
+          >
+            Run once
+          </button>
+          <button
+            type="button"
+            disabled={busy}
+            onClick={() => void answer(false)}
+            className="flex-1 md:flex-none h-11 md:h-8 px-4 rounded border border-border text-text-primary text-xs font-medium hover:bg-panel-2 transition-colors disabled:opacity-50"
+          >
+            Decline
+          </button>
+        </div>
+      </form>
+      {error && <p className="text-xs text-error">{error}</p>}
+    </div>
+  );
+}

package/src/web/components/chat/db-tool-card.tsx

@@ -0,0 +1,42 @@
+/**
+ * Card surfaces for PPM's database tools (`db_query`, `open_query`, `db_execute`).
+ *
+ * Rendered by `tool-cards.tsx`; the call is read by `@/lib/db-tool-call`. The header names the
+ * connection and, for a change, the AI's reason: that is what the user approved. The SQL itself
+ * is in the expanded body, in full.
+ */
+import { DB_EXECUTE_TOOL } from "../../../shared/db-ai-tools";
+import { DB_TOOL_LABELS, type DbToolCall } from "@/lib/db-tool-call";
+
+const firstLine = (text: string) => text.split("\n").find((l) => l.trim())?.trim() ?? "";
+const cap = (text: string, max: number) => (text.length > max ? `${text.slice(0, max)}…` : text);
+
+/** One-line header: what the tool does, on which connection, and its reason or first SQL line. */
+export function DbToolSummary({ call }: { call: DbToolCall }) {
+  const detail = call.tool === DB_EXECUTE_TOOL && call.reason ? call.reason : firstLine(call.sql);
+  return (
+    <>
+      {DB_TOOL_LABELS[call.tool]}{" "}
+      <span className="text-text-primary">{call.connection}{call.database ? ` / ${call.database}` : ""}</span>
+      {detail && <span className={`text-text-subtle${detail === call.reason ? "" : " font-mono"}`}> · {cap(detail, 60)}</span>}
+    </>
+  );
+}
+
+/** Expanded body: connection, the reason the user read, the SQL, and the row count it expects. */
+export function DbToolDetails({ call }: { call: DbToolCall }) {
+  return (
+    <div className="space-y-1">
+      <p className="flex flex-wrap items-center gap-1.5">
+        <span className="text-text-subtle">Connection</span>
+        <span className="font-medium text-text-primary">{call.connection}</span>
+        {call.database && <span className="text-text-subtle">database <span className="font-mono text-text-secondary">{call.database}</span></span>}
+      </p>
+      {call.reason && <p className="text-text-secondary italic">{call.reason}</p>}
+      <pre className="font-mono text-text-secondary overflow-auto max-h-60 whitespace-pre-wrap break-all">{call.sql}</pre>
+      {call.expectedRows != null && (
+        <p className="text-text-subtle">Expected rows changed: <span className="text-text-secondary">{call.expectedRows}</span></p>
+      )}
+    </div>
+  );
+}

package/src/web/components/chat/device-tool-card.tsx

@@ -0,0 +1,45 @@
+/**
+ * Card surfaces for the tab server's tools that take no file: `open_url`, `read_terminal` and
+ * `run_in_terminal`. Rendered by `tool-cards.tsx`; the call is read by `@/lib/tab-tool-call`.
+ * The command `run_in_terminal` typed is shown in full: it is what the user's Enter runs.
+ */
+import { OPEN_URL_TOOL, RUN_IN_TERMINAL_TOOL } from "../../../shared/tab-open-protocol";
+import type { DeviceToolCall } from "@/lib/tab-tool-call";
+
+const cap = (text: string, max: number) => (text.length > max ? `${text.slice(0, max)}…` : text);
+
+/** One-line header: what the tool did, and to what. */
+export function DeviceToolSummary({ call }: { call: DeviceToolCall }) {
+  if (call.tool === OPEN_URL_TOOL) {
+    return <>Open app <span className="font-mono text-text-subtle">{cap(call.url.replace(/^https?:\/\//, ""), 60)}</span></>;
+  }
+  if (call.tool === RUN_IN_TERMINAL_TOOL) {
+    return <>Type in terminal <span className="font-mono text-text-subtle">{cap(call.command, 60)}</span></>;
+  }
+  return (
+    <>
+      Read terminal
+      {call.terminal && <span className="font-mono text-text-subtle"> {call.terminal}</span>}
+      {call.lines && <span className="text-text-subtle"> · {call.lines} lines</span>}
+    </>
+  );
+}
+
+/** Expanded body: the address, the terminal read, or the command typed and where. */
+export function DeviceToolDetails({ call }: { call: DeviceToolCall }) {
+  if (call.tool === OPEN_URL_TOOL) return <p className="font-mono text-text-secondary break-all">{call.url}</p>;
+  if (call.tool === RUN_IN_TERMINAL_TOOL) {
+    return (
+      <div className="space-y-1">
+        <pre className="font-mono text-text-secondary overflow-x-auto whitespace-pre-wrap break-all">{call.command}</pre>
+        {call.cwd && <p className="text-text-subtle">in <span className="font-mono text-text-secondary break-all">{call.cwd}</span></p>}
+      </div>
+    );
+  }
+  return (
+    <p className="text-text-subtle">
+      {call.terminal ? <>Terminal <span className="font-mono text-text-secondary">{call.terminal}</span></> : "The chat's terminals"}
+      {call.lines ? `, last ${call.lines} lines` : ""}
+    </p>
+  );
+}

package/src/web/components/chat/message-input.tsx

@@ -1124,9 +1124,11 @@ export const MessageInput = memo(function MessageInput({
         {/* Desktop: chips row (permission + model) then a single input row
             (paperclip | textarea | mic | send) — design PPMWorkspace composer. */}
         <div className="hidden md:block">
-          <div className="flex flex-wrap items-center gap-1.5 px-2.5 pt-2.5">
+          {/* Wraps on a wide chat; on a narrow one (`@max-[420px]/chat`) stays one line, the
+              permission chip down to its icon and the model chip giving way first. */}
+          <div className="flex flex-wrap items-center gap-1.5 px-2.5 pt-2.5 @max-[420px]/chat:flex-nowrap">
             {/* Mode indicator chip */}
-            {!configurationPending && <div className="relative">
+            {!configurationPending && <div className="relative shrink-0">
               <ModeChip
                 mode={permissionMode ?? "bypassPermissions"}
                 onClick={() => setModeSelectorOpen((v) => !v)}
@@ -1237,11 +1239,12 @@ function ModeChip({ mode, onClick }: { mode: string; onClick: () => void }) {
     <button
       type="button"
       onClick={(e) => { e.stopPropagation(); onClick(); }}
-      className="inline-flex items-center gap-1.5 px-[9px] py-1 rounded-full text-[11.5px] text-text-2 bg-panel-2 border border-border-soft hover:text-text-primary hover:border-border transition-colors"
+      className="inline-flex items-center gap-1.5 px-[9px] py-1 rounded-full text-[11.5px] text-text-2 bg-panel-2 border border-border-soft hover:text-text-primary hover:border-border transition-colors @max-[420px]/chat:px-[7px]"
       aria-label={`Permission mode: ${label}`}
+      title={`Permission mode: ${label}`}
     >
       <Icon className="size-3" />
-      <span className="max-w-[100px] truncate">{label}</span>
+      <span className="max-w-[100px] truncate @max-[420px]/chat:hidden">{label}</span>
     </button>
   );
 }
@@ -1267,12 +1270,12 @@ function PriorityToggle({ value, onChange }: { value: MessagePriority; onChange:
     <button
       type="button"
       onClick={(e) => { e.stopPropagation(); cycle(); }}
-      className="inline-flex items-center gap-1.5 px-[9px] py-1 rounded-full text-[11.5px] text-text-2 bg-panel-2 border border-border-soft hover:text-text-primary hover:border-border transition-colors"
+      className="inline-flex shrink-0 items-center gap-1.5 px-[9px] py-1 rounded-full text-[11.5px] text-text-2 bg-panel-2 border border-border-soft hover:text-text-primary hover:border-border transition-colors @max-[420px]/chat:px-[7px]"
       aria-label={`Message priority: ${current.label}`}
       title={`Priority: ${current.label} (click to cycle)`}
     >
       <Icon className="size-3" />
-      <span>{current.label}</span>
+      <span className="@max-[420px]/chat:hidden">{current.label}</span>
     </button>
   );
 }

package/src/web/components/chat/message-list.tsx

@@ -41,6 +41,8 @@ import { ChatWelcome } from "./chat-welcome";
 import { ChatScrollNav } from "./chat-scroll-nav";
 import type { VersionGroup } from "../../../types/api";
 import { QuestionCard } from "./question-card";
+import { DbExecuteApprovalCard } from "./db-execute-approval-card";
+import { dbExecuteApprovalInput } from "../../../shared/db-ai-tools";
 import type { Question } from "./question-card";
 import { GALLERY_ROOT_ATTR } from "@/lib/image-gallery";
 
@@ -198,6 +200,7 @@ export function MessageList({
   // The approval card + "thinking…" indicator ride at the end, inside the scrolled
   // content so stick-to-bottom keeps them in view.
   const hasTrailing = !!pendingApproval || isStreaming;
+  const dbApproval = pendingApproval ? dbExecuteApprovalInput(pendingApproval.tool, pendingApproval.input) : null;
 
   // Mirror the lib's scroll-element ref into state so effects/nav re-run when the
   // scroll container mounts late (it appears only after the loading screen).
@@ -626,7 +629,9 @@ export function MessageList({
               {pendingApproval && (
                 pendingApproval.tool === "AskUserQuestion"
                   ? <AskUserQuestionCard approval={pendingApproval} onRespond={onApprovalResponse} />
-                  : <ApprovalCard approval={pendingApproval} onRespond={onApprovalResponse} />
+                  : dbApproval
+                    ? <DbExecuteApprovalCard requestId={pendingApproval.requestId} input={dbApproval} />
+                    : <ApprovalCard approval={pendingApproval} onRespond={onApprovalResponse} />
               )}
               {isStreaming && <ThinkingIndicator lastMessage={messages[messages.length - 1]} phase={phase} elapsed={connectingElapsed} statusMessage={compactStatus === "compacting" ? "Compacting messages..." : statusMessage} />}
             </div>

package/src/web/components/chat/message-markdown.tsx

@@ -20,14 +20,17 @@ function stripTeammateMessages(text: string): string {
   return text.replace(TEAMMATE_MSG_RE, "").replace(/\n{3,}/g, "\n\n").trim();
 }
 
-/** Wrapper: delegates to shared MarkdownRenderer with code actions enabled */
-export function MarkdownContent({ content, projectName, isStreaming }: { content: string; projectName?: string; isStreaming?: boolean }) {
+/**
+ * Wrapper: delegates to shared MarkdownRenderer with code actions enabled. `rawHtml={false}`
+ * for content that came from a system tag rather than from the user or the model.
+ */
+export function MarkdownContent({ content, projectName, isStreaming, rawHtml }: { content: string; projectName?: string; isStreaming?: boolean; rawHtml?: boolean }) {
   const cleaned = stripTeammateMessages(content);
   if (!cleaned) return null;
   return (
     <RenderErrorBoundary fallbackContent={cleaned}>
       <Suspense fallback={<div className="animate-pulse h-4 bg-muted rounded" />}>
-        <MarkdownRenderer content={cleaned} projectName={projectName} codeActions isStreaming={isStreaming} />
+        <MarkdownRenderer content={cleaned} projectName={projectName} codeActions isStreaming={isStreaming} rawHtml={rawHtml} />
       </Suspense>
     </RenderErrorBoundary>
   );

package/src/web/components/chat/message-user-bubble.tsx

@@ -297,7 +297,8 @@ function TaskNotificationBadge({ content }: { content: string }) {
           {outputFile && <FilePathChip path={outputFile} />}
           {result && (
             <div className="text-[11px] text-text-subtle/80 max-h-60 overflow-y-auto leading-relaxed">
-              <MarkdownContent content={result} />
+              {/* Raw HTML off: anyone's text can arrive wrapped in this tag, an iframe srcdoc included. */}
+              <MarkdownContent content={result} rawHtml={false} />
             </div>
           )}
         </div>

package/src/web/components/chat/model-thinking-selector.tsx

@@ -3,6 +3,7 @@ import { Check, Sparkles, Brain } from "@/lib/icons";
 import { api, projectUrl } from "@/lib/api-client";
 import { useIsMobile } from "@/hooks/use-is-mobile";
 import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
+import { modelDisplayName } from "@/lib/model-display-name";
 import { EFFORT_OPTIONS, chipLabel } from "./model-thinking-selector-helpers";
 
 interface ModelOption {
@@ -107,7 +108,7 @@ export function ModelThinkingSelector({
   }, [open, isMobile]);
 
   const current = models.find((m) => m.value === model);
-  const modelDisplay = current ? shortLabel(current.label) : model ? shortLabel(model) : "Model";
+  const modelDisplay = current ? shortLabel(current.label) : model ? modelDisplayName(model) : "Model";
   const effortValue = effort ?? DEFAULT_EFFORT;
   const showModelList = models.length > 0 || Boolean(modelStatus);
   const chipText = chipLabel(modelDisplay, effortValue);
@@ -163,7 +164,8 @@ export function ModelThinkingSelector({
   );
 
   return (
-    <div className="relative">
+    // `min-w-0` + `max-w-full`: in a narrow composer this is the chip that gives way.
+    <div className="relative min-w-0">
       <button
         type="button"
         disabled={disabled}
@@ -171,12 +173,12 @@ export function ModelThinkingSelector({
           e.stopPropagation();
           if (!disabled) setOpen((v) => !v);
         }}
-        className="inline-flex items-center gap-1.5 px-[9px] py-1 rounded-full text-[11.5px] text-primary bg-accent-wash border border-accent-wash-border hover:brightness-110 transition-[filter] disabled:opacity-50 disabled:cursor-default"
+        className="inline-flex max-w-full items-center gap-1.5 px-[9px] py-1 rounded-full text-[11.5px] text-primary bg-accent-wash border border-accent-wash-border hover:brightness-110 transition-[filter] disabled:opacity-50 disabled:cursor-default"
         aria-label={`Model ${modelDisplay}, effort ${effortValue}${thinking ? ", thinking on" : ""}`}
         title={disabled ? "Can't change while running" : chipText}
       >
         <Sparkles className="h-3.5 w-3.5 shrink-0" />
-        <span className="max-w-[140px] truncate">{chipText}</span>
+        <span className="min-w-0 max-w-[140px] truncate">{chipText}</span>
         {thinking && <Brain className="h-3 w-3 shrink-0" />}
       </button>
 

package/src/web/components/chat/prompt-cache-chip.tsx

@@ -55,7 +55,7 @@ export function PromptCacheChip({ promptCache }: { promptCache: PromptCacheState
         <span
           // Same shape as `ModeChip` and `PriorityToggle` beside it; only the colour carries
           // the state, and only once the cache is gone — a countdown still running is not news.
-          className={`inline-flex items-center gap-1.5 px-[9px] py-1 rounded-full text-[11.5px] border transition-colors ${
+          className={`inline-flex shrink-0 items-center gap-1.5 px-[9px] py-1 rounded-full text-[11.5px] border transition-colors ${
             cold
               ? "text-error border-error/40 bg-error/10"
               : "text-text-2 bg-panel-2 border-border-soft"

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

@@ -1,27 +1,34 @@
 /**
- * Every agent that is really still working, pinned under the conversation.
+ * Every agent that is really still working, summarised in one line 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.
+ * 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.
+ * 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.
  *
- * From `FOLD_FROM` agents on, the list scrolls inside about three rows under an
- * "N agents running" header that folds it away — open on desktop, folded on a
- * phone. Unbounded, a session fanning out to a dozen agents pushed the
- * conversation off the screen.
+ * However many agents run, the bar is one line — avatars, "N agents running · N done"
+ * and the first agent's current step — that opens a list capped at three rows which
+ * scrolls inside itself, so a session fanning out to a dozen agents cannot push the
+ * conversation off the screen. With a single agent there is nothing to list: the line is
+ * that agent and opens its session directly. A finished agent stays on the list while
+ * one launched beside it still runs.
  */
-import { useId, useMemo, useState } from "react";
-import { Bot, ChevronRight, Users } from "@/lib/icons";
+import { useEffect, useId, useMemo, useState } from "react";
+import { Bot, ChevronRight, ChevronUp } from "@/lib/icons";
 import { useAgentActivity } from "@/hooks/use-agent-activity";
-import { useIsMobile } from "@/hooks/use-is-mobile";
 import type { TeamMemberActivity } from "@/hooks/use-team-activity-feed";
-import { buildRunningRows, findCardLabel } from "@/lib/running-agent-rows";
+import {
+  buildRunningRows,
+  findCardLabel,
+  finishedSiblingRows,
+  type RunningAgentRow,
+} 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";
@@ -40,88 +47,169 @@ interface RunningAgentsBarProps {
   teamMembers: TeamMemberActivity[];
 }
 
-/** From this many rows on, the list gets a header to fold it under and stops growing. */
-export const FOLD_FROM = 4;
+/** Avatars drawn before the rest collapse into "+N". */
+const MAX_AVATARS = 3;
+
+/** What a row shows, resolved once from the hub row and the chat's own card. */
+interface AgentView {
+  row: RunningAgentRow;
+  name: string;
+  prompt?: string;
+  step?: string;
+  elapsed?: string;
+}
 
 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 runningRows = useMemo(() => buildRunningRows(running, teamMembers), [running, teamMembers]);
+  const doneRows = useMemo(() => finishedSiblingRows(messages, runningRows), [messages, runningRows]);
+  // Labels scan the whole transcript; the elapsed tick re-renders every second, so read them
+  // only when the transcript or the rows change.
+  const labels = useMemo(() => new Map(
+    [...runningRows, ...doneRows].filter((r) => r.cardId).map((r) => [r.cardId!, findCardLabel(messages, r.cardId!)]),
+  ), [messages, runningRows, doneRows]);
   const coarse = usePrefersCoarsePointer();
-  const rowHeight = coarse ? "min-h-[44px]" : "min-h-[36px]";
-  const isMobile = useIsMobile();
-  const [open, setOpen] = useState(!isMobile);
+  const [open, setOpen] = useState(false);
   const listId = useId();
+  useElapsedTick(runningRows.length > 0);
+
+  const total = runningRows.length + doneRows.length;
+  const single = total === 1;
+  // A batch that shrinks to one agent, or ends, has no list left to keep open; the next
+  // batch starts collapsed rather than inheriting this one's state.
+  useEffect(() => { if (total <= 1) setOpen(false); }, [total]);
+
+  if (!sessionId || runningRows.length === 0) return null;
+
+  const view = (row: RunningAgentRow): AgentView => {
+    const label = row.cardId ? labels.get(row.cardId) : null;
+    const name = row.memberName ?? label?.handle ?? (label?.description || "Agent");
+    const startedAt = row.startedAt ?? label?.launchedAt;
+    return {
+      row,
+      name,
+      prompt: label?.description || undefined,
+      step: row.lastStep ?? shortAgentType(row.agentType),
+      elapsed: row.done || !startedAt ? undefined : formatDuration(startedAt),
+    };
+  };
+  const views = [...runningRows, ...doneRows].map(view);
+  const lead = views[0]!;
+
+  const openView = (v: AgentView) => openAgentSession({
+    projectName,
+    providerId,
+    sessionId,
+    source: v.row.cardId ? { kind: "card", cardId: v.row.cardId } : { kind: "member", teamName, memberName: v.row.memberName! },
+    title: `Session — ${v.name}`,
+    prompt: v.prompt,
+  });
 
-  if (!sessionId || rows.length === 0) return null;
-  const foldable = rows.length >= FOLD_FROM;
+  const summaryCls = cn(
+    "flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-text-2 transition-colors md:px-3.5 can-hover:hover:bg-panel-2",
+    coarse ? "min-h-11" : "min-h-10",
+  );
 
   return (
-    <div className="shrink-0 border-t border-border bg-surface-elevated/60 px-2 py-1.5 space-y-1">
-      {foldable && (
+    <div className="shrink-0 border-t border-border bg-panel">
+      {single ? (
+        <button type="button" onClick={() => openView(lead)} className={summaryCls} title={`Open ${lead.name}'s session`}>
+          <LiveDot done={false} />
+          <span className="min-w-0 shrink truncate font-semibold text-text">{lead.name}</span>
+          {!!lead.step && <span className="hidden min-w-0 flex-1 truncate font-mono text-text-3 sm:block">{lead.step}</span>}
+          {!!lead.elapsed && <span className="ml-auto shrink-0 font-mono text-[11px] text-text-3">{lead.elapsed}</span>}
+          <ChevronRight className="size-3.5 shrink-0 text-text-3" />
+        </button>
+      ) : (
         <button
           type="button"
           onClick={() => setOpen(!open)}
           aria-expanded={open}
-          aria-controls={listId}
-          className={cn("flex w-full items-center gap-2 rounded px-1 text-left text-xs hover:bg-surface transition-colors", rowHeight)}
+          aria-controls={open ? listId : undefined}
+          className={summaryCls}
         >
-          <ChevronRight className={cn("size-3.5 shrink-0 text-text-subtle transition-transform", open && "rotate-90")} />
-          <span className="font-medium text-text-primary">{rows.length} agents running</span>
+          <LiveDot done={false} />
+          <AvatarStack count={total} />
+          <span className="flex-1 whitespace-nowrap font-semibold text-text sm:flex-none">
+            {runningRows.length} {runningRows.length === 1 ? "agent" : "agents"} running
+          </span>
+          {doneRows.length > 0 && <span className="whitespace-nowrap text-text-3">· {doneRows.length} done</span>}
+          <span className="hidden min-w-0 flex-1 truncate text-text-3 sm:block">
+            — <b className="font-medium text-text-2">{lead.name}</b>
+            {!!lead.step && <> · <span className="font-mono">{lead.step}</span></>}
+          </span>
+          <ChevronUp
+            className={cn("size-3.5 shrink-0 text-text-3 transition-transform motion-reduce:transition-none", open && "rotate-180")}
+          />
         </button>
       )}
-      {(!foldable || open) && (
-        <div
-          id={listId}
-          // Three rows (two at touch height) and most of the next, so the list visibly scrolls.
-          className={cn("space-y-1", foldable && "overflow-y-auto", foldable && (coarse ? "max-h-32" : "max-h-36"))}
-        >
-          {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 (
+      {!single && open && (
+        // 44px rows: three of them and the list stops growing.
+        <ul id={listId} className="max-h-[140px] list-none overflow-y-auto overscroll-contain px-2 pb-2">
+          {views.map((v) => (
+            <li key={v.row.key}>
               <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",
-                  rowHeight,
-                )}
-                title={name ? `Open ${name}'s session` : "Open agent session"}
+                onClick={() => openView(v)}
+                className="flex w-full min-h-11 items-center gap-2.5 rounded-xl px-2 py-1 text-left text-text transition-colors can-hover:hover:bg-panel-2"
+                title={`Open ${v.name}'s 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}
+                <LiveDot done={!!v.row.done} />
+                <span className="flex min-w-0 flex-1 flex-col gap-px">
+                  <span className={cn("truncate text-[13px] font-medium", v.row.done && "text-text-2")}>{v.name}</span>
+                  <span className={cn("truncate font-mono text-[11px]", v.row.failed ? "text-error" : "text-text-3")}>
+                    {v.row.failed ? "Failed" : v.row.done ? "Finished" : v.step ?? "Starting…"}
                   </span>
-                )}
-                {!!elapsed && <span className="ml-auto shrink-0 text-text-3 font-mono">{elapsed}</span>}
+                </span>
+                {!!v.elapsed && <span className="shrink-0 font-mono text-[11px] text-text-3">{v.elapsed}</span>}
               </button>
-            );
-          })}
-        </div>
+            </li>
+          ))}
+        </ul>
       )}
     </div>
   );
 }
+
+/** Pulsing dot while running; a still grey one once finished. */
+function LiveDot({ done }: { done: boolean }) {
+  return (
+    <span className="relative flex size-2 shrink-0">
+      {!done && <span className="absolute inline-flex size-full animate-ping rounded-full bg-success opacity-55 motion-reduce:animate-none" />}
+      <span className={cn("relative inline-flex size-2 rounded-full", done ? "bg-text-3" : "bg-success")} />
+    </span>
+  );
+}
+
+function AvatarStack({ count }: { count: number }) {
+  const shown = Math.min(count, MAX_AVATARS);
+  return (
+    <span className="flex shrink-0 items-center" aria-hidden="true">
+      {Array.from({ length: shown }, (_, i) => (
+        <span
+          key={i}
+          className="-ml-1.5 grid size-5 place-items-center rounded-full border-2 border-panel bg-accent-2/15 text-accent-2 first:ml-0"
+        >
+          <Bot className="size-3" />
+        </span>
+      ))}
+      {count > MAX_AVATARS && (
+        <span className="-ml-1.5 grid size-5 place-items-center rounded-full border-2 border-panel bg-panel-2 text-[10px] font-semibold text-text-2">
+          +{count - MAX_AVATARS}
+        </span>
+      )}
+    </span>
+  );
+}
+
+/** Re-render once a second while something runs, so elapsed times keep counting. */
+function useElapsedTick(active: boolean): void {
+  const [, setTick] = useState(0);
+  useEffect(() => {
+    if (!active) return;
+    const id = setInterval(() => setTick((t) => t + 1), 1000);
+    return () => clearInterval(id);
+  }, [active]);
+}