@hienlh/ppm 0.18.1 → 0.18.3

package/src/web/components/chat/send-message-card.tsx

@@ -0,0 +1,134 @@
+/**
+ * Card surfaces for the SendMessage tool (agent teams / cross-session peers).
+ *
+ * Rendered by `tool-cards.tsx`; the payload shaping lives in `send-message-parse.ts`.
+ * The design mirrors the team activity panel — same badge vocabulary, an explicit
+ * recipient, and prose rendered as prose — so a peer message reads as a message
+ * instead of a JSON dump.
+ */
+import { useState } from "react";
+import { ArrowRight, Code, Clock, CheckCircle2, XCircle } from "lucide-react";
+import { MiniMarkdown } from "./mini-markdown";
+import { TYPE_BADGES } from "./team-message-badges";
+import { normalizeSendMessage, parseSendMessageResult } from "./send-message-parse";
+
+/** Badge for a message kind. Ordinary prose gets no badge — the icon already says "message". */
+function KindBadge({ kind }: { kind: string }) {
+  if (kind === "message") return null;
+  const badge = TYPE_BADGES[kind];
+  return (
+    <span className={`inline-block rounded px-1.5 py-0.5 text-[10px] ${badge?.className ?? "bg-panel-2 text-text-3"}`}>
+      {badge?.label ?? kind}
+    </span>
+  );
+}
+
+/**
+ * One-line header: who it went to plus the author's own label for the row. Falls back
+ * to the first line of the body, which is exactly what the recipient previews.
+ */
+export function SendMessageSummary({ name, input }: { name: string; input: Record<string, unknown> }) {
+  const msg = normalizeSendMessage(input);
+  const raw = msg.summary || msg.firstLine || (msg.protocol ? msg.kind : "");
+  // The header is a single truncating line; cap the text so a long first line cannot
+  // push the status icons out of view on a narrow screen.
+  const label = raw.length > 72 ? `${raw.slice(0, 72)}…` : raw;
+  // No leading icon here: the card's chip already carries the Send glyph.
+  return (
+    <>
+      {name}{" "}
+      <span className="text-text-subtle">
+        <ArrowRight className="size-3 inline" /> {msg.to || "unknown"}
+        {label ? ` · ${label}` : ""}
+      </span>
+      {msg.notifyWhenIdle && <Clock className="size-3 inline ml-1 text-text-3" />}
+    </>
+  );
+}
+
+/** Expanded body: recipient row, then the message itself. */
+export function SendMessageDetails({ input }: { input: Record<string, unknown> }) {
+  const msg = normalizeSendMessage(input);
+  return (
+    <div className="space-y-1.5">
+      <div className="flex flex-wrap items-center gap-1.5">
+        <span className="text-text-subtle">To</span>
+        <span className="font-medium text-text-primary">{msg.to || "unknown"}</span>
+        <KindBadge kind={msg.kind} />
+        {msg.notifyWhenIdle && (
+          <span className="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] bg-panel-2 text-text-3">
+            <Clock className="size-3" /> notify when idle
+          </span>
+        )}
+      </div>
+
+      {/* The summary is not repeated here — the collapsed header already shows it. */}
+      {!!msg.text && <MiniMarkdown content={msg.text} maxHeight="max-h-40" />}
+
+      {msg.protocol && (
+        <div className="space-y-0.5 text-text-secondary">
+          {msg.protocol.approve != null && (
+            <p>
+              {msg.protocol.approve ? "Approved" : "Rejected"}
+              {msg.protocol.request_id ? (
+                <span className="text-text-subtle font-mono"> · {msg.protocol.request_id}</span>
+              ) : null}
+            </p>
+          )}
+          {!!msg.protocol.reason && <p className="text-text-subtle">{msg.protocol.reason}</p>}
+          {!!msg.protocol.feedback && <p className="text-text-subtle">{msg.protocol.feedback}</p>}
+        </div>
+      )}
+
+      {msg.extras.length > 0 && (
+        <div className="space-y-0.5">
+          {msg.extras.map((e) => (
+            <p key={e.key} className="text-text-subtle">
+              <span className="font-mono">{e.key}</span>: {e.value}
+            </p>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Delivery status. The runtime answers with JSON nested inside JSON, so it collapses
+ * to a single status line with the raw payload kept one click away.
+ */
+export function SendMessageOutcomeView({ output }: { output: string }) {
+  const [showRaw, setShowRaw] = useState(false);
+  const outcome = parseSendMessageResult(output);
+  if (!outcome) return null;
+
+  return (
+    <div className="border-t border-border pt-1.5 space-y-1">
+      <div className="flex items-center gap-1.5 flex-wrap">
+        {outcome.ok ? (
+          <CheckCircle2 className="size-3 text-success shrink-0" />
+        ) : (
+          <XCircle className="size-3 text-error shrink-0" />
+        )}
+        <span className={outcome.ok ? "text-success" : "text-error"}>
+          {outcome.ok ? "Delivered" : "Not delivered"}
+        </span>
+        {!!outcome.detail && <span className="text-text-subtle">· {outcome.detail}</span>}
+        {!!outcome.ref && <span className="text-text-3 font-mono text-[10px]">[{outcome.ref}]</span>}
+      </div>
+      <button
+        type="button"
+        onClick={() => setShowRaw(!showRaw)}
+        className="flex items-center gap-1 text-[10px] text-text-subtle hover:text-text-secondary transition-colors"
+      >
+        <Code className="size-3" />
+        {showRaw ? "Hide" : "Show"} raw
+      </button>
+      {showRaw && (
+        <pre className="overflow-x-auto text-text-subtle font-mono max-h-40 whitespace-pre-wrap break-all text-[10px]">
+          {output}
+        </pre>
+      )}
+    </div>
+  );
+}

package/src/web/components/chat/send-message-parse.ts

@@ -0,0 +1,159 @@
+/**
+ * Normalisation for the SendMessage tool (agent teams / cross-session peers).
+ *
+ * Two things make the raw tool input unfit to render directly:
+ *
+ * 1. The canonical schema is `{ to, message, summary?, notify_when_idle? }`, but older
+ *    team instructions taught a `{ type, recipient, content }` shape. Agents that were
+ *    told both send both, so the same text arrives twice in one payload.
+ * 2. `message` is either plain text or a protocol object (shutdown / plan approval),
+ *    and the object form also shows up as a JSON *string* when a teammate relays it.
+ *
+ * Everything here is pure so the card stays a thin renderer.
+ */
+
+/** Protocol payloads a teammate can send instead of prose. */
+export interface SendMessageProtocol {
+  type: string;
+  request_id?: string;
+  approve?: boolean;
+  reason?: string;
+  feedback?: string;
+}
+
+export interface NormalizedSendMessage {
+  /** Recipient name — canonical `to`, falling back to the legacy `recipient`. */
+  to: string;
+  /** Author-side label for this row; never transmitted to the recipient. */
+  summary?: string;
+  /** Prose body. Empty when the message is a protocol payload. */
+  text: string;
+  /** First non-empty line of `text` — the only part the recipient previews. */
+  firstLine: string;
+  /** Set when the message is a protocol payload rather than prose. */
+  protocol?: SendMessageProtocol;
+  /** Message kind, used for the badge. `"message"` for ordinary prose. */
+  kind: string;
+  /** Recipient was asked to report back when it next goes idle. */
+  notifyWhenIdle: boolean;
+  /** Unrecognised keys, so a future schema field is surfaced instead of swallowed. */
+  extras: Array<{ key: string; value: string }>;
+}
+
+/** Keys the card renders explicitly — everything else becomes an `extras` row. */
+const KNOWN_KEYS = new Set([
+  "to",
+  "message",
+  "summary",
+  "notify_when_idle",
+  // Legacy aliases from earlier team instructions.
+  "recipient",
+  "content",
+  "type",
+]);
+
+const str = (v: unknown): string => (typeof v === "string" ? v : v == null ? "" : String(v));
+
+/** Protocol object if `v` looks like one (`{ type: string, ... }`), else null. */
+function asProtocol(v: unknown): SendMessageProtocol | null {
+  if (!v || typeof v !== "object" || Array.isArray(v)) return null;
+  const p = v as Record<string, unknown>;
+  if (typeof p.type !== "string" || !p.type) return null;
+  return {
+    type: p.type,
+    request_id: typeof p.request_id === "string" ? p.request_id : undefined,
+    approve: typeof p.approve === "boolean" ? p.approve : undefined,
+    reason: typeof p.reason === "string" ? p.reason : undefined,
+    feedback: typeof p.feedback === "string" ? p.feedback : undefined,
+  };
+}
+
+/** Same check for a body that arrived as a JSON string. */
+function protocolFromJsonText(text: string): SendMessageProtocol | null {
+  const trimmed = text.trim();
+  if (!trimmed.startsWith("{")) return null;
+  try {
+    return asProtocol(JSON.parse(trimmed));
+  } catch {
+    return null;
+  }
+}
+
+export function normalizeSendMessage(input: Record<string, unknown>): NormalizedSendMessage {
+  const to = str(input.to) || str(input.recipient);
+  // Canonical field wins; `content` only fills in when `message` is absent. When both
+  // are present they are the duplicate described above — the legacy copy is often a
+  // truncated prefix, so keeping it would only add noise.
+  const rawBody = input.message ?? input.content;
+  const protocol = asProtocol(rawBody) ?? protocolFromJsonText(str(rawBody));
+  const text = protocol ? "" : str(rawBody);
+  const legacyType = str(input.type);
+  const kind = protocol?.type || (legacyType && legacyType !== "message" ? legacyType : "message");
+  const summary = str(input.summary).trim();
+
+  const extras = Object.entries(input)
+    .filter(([key]) => !KNOWN_KEYS.has(key))
+    .map(([key, value]) => ({
+      key,
+      value: typeof value === "string" ? value : (JSON.stringify(value) ?? ""),
+    }));
+
+  return {
+    to,
+    summary: summary || undefined,
+    text,
+    firstLine: text.split("\n").map((l) => l.trim()).find((l) => l.length > 0) ?? "",
+    protocol: protocol ?? undefined,
+    kind,
+    notifyWhenIdle: input.notify_when_idle === true,
+    extras,
+  };
+}
+
+/** What the tool result says happened to the message. */
+export interface SendMessageOutcome {
+  ok: boolean;
+  /** Human-readable detail, e.g. "Resuming agent dev-p1". */
+  detail?: string;
+  /** Peer name the runtime resolved the send to. */
+  peer?: string;
+  /** Disambiguating ref of that peer, when the runtime pinned one. */
+  ref?: string;
+}
+
+/**
+ * Unwrap the tool result. The SDK returns `[{ type: "text", text }]` where `text` is
+ * itself the JSON status object, so a raw dump shows JSON inside JSON. Returns null
+ * when the shape is anything else, so the caller can fall back to raw output.
+ */
+export function parseSendMessageResult(output: string): SendMessageOutcome | null {
+  if (!output) return null;
+  let payload: unknown;
+  try {
+    payload = JSON.parse(output);
+  } catch {
+    return null;
+  }
+  if (Array.isArray(payload)) {
+    const textBlock = payload.find(
+      (b) => b && typeof b === "object" && (b as Record<string, unknown>).type === "text"
+    ) as Record<string, unknown> | undefined;
+    const inner = str(textBlock?.text);
+    if (!inner) return null;
+    try {
+      payload = JSON.parse(inner);
+    } catch {
+      return null;
+    }
+  }
+  if (!payload || typeof payload !== "object" || Array.isArray(payload)) return null;
+  const o = payload as Record<string, unknown>;
+  if (typeof o.success !== "boolean") return null;
+  const pin = (o.pin && typeof o.pin === "object" ? o.pin : null) as Record<string, unknown> | null;
+  return {
+    ok: o.success,
+    detail: str(o.message) || str(o.error) || undefined,
+    peer: pin ? str(pin.name) || undefined : undefined,
+    ref: pin ? str(pin.ref) || undefined : undefined,
+  };
+}

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

@@ -1,33 +1,43 @@
-import { useState, useRef, useEffect, useCallback } from "react";
+/**
+ * Agent-team panel: the team's roster and its conversation, as two tabs.
+ *
+ * They are deliberately not one scroll. A team runs ~20 members and produces a
+ * long conversation, so a single list pushed the roster — the part that answers
+ * "who is working right now" — off screen the moment messages accumulated.
+ */
+
+import { useState, useEffect, useMemo, useCallback } from "react";
 import { RefreshCw } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { api } from "@/lib/api-client";
 import type { TeamMessageItem } from "@/hooks/use-chat";
+import { useTeamActivityFeed } from "@/hooks/use-team-activity-feed";
+import { useWindowStore } from "@/components/floating-window/window-store";
+import { usePrefersCoarsePointer } from "@/components/os-explorer/use-coarse-long-press";
+import { TeamMemberList } from "./team-member-list";
+import { TeamMessageList } from "./team-message-list";
+
+type TeamTab = "members" | "messages";
 
 interface TeamActivityPanelProps {
   teamNames: string[];
   messages: TeamMessageItem[];
+  /** Current session id — the implicit team is named after it */
+  sessionId?: string | null;
+  /** Passed to a member window so its steps resolve project-relative paths. */
+  projectName?: string;
 }
 
-const STATUS_COLORS: Record<string, string> = {
-  active: "bg-success",
-  idle: "bg-warning",
-  shutdown: "bg-text-3",
-};
-
-const TYPE_BADGES: Record<string, { label: string; className: string }> = {
-  task_assignment: { label: "task", className: "bg-primary/20 text-primary" },
-  idle_notification: { label: "idle", className: "bg-warning/20 text-warning" },
-  completion: { label: "done", className: "bg-success/20 text-success" },
-  shutdown_request: { label: "shutdown", className: "bg-error/20 text-error" },
-  shutdown_approved: { label: "shutdown ✓", className: "bg-text-3/20 text-text-3" },
-};
+/** Implicit teams are named after the session, which is an unreadable uuid. */
+function teamLabel(name: string, sessionId?: string | null): string {
+  return name === sessionId ? "Team (current session)" : name;
+}
 
-export function TeamActivityPanel({ teamNames, messages }: TeamActivityPanelProps) {
+export function TeamActivityPanel({ teamNames, messages, sessionId, projectName }: TeamActivityPanelProps) {
   const [selectedTeam, setSelectedTeam] = useState(teamNames[0] ?? "");
-  const [members, setMembers] = useState<any[]>([]);
-  const [loading, setLoading] = useState(false);
-  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const [tab, setTab] = useState<TeamTab>("members");
+  const openWindow = useWindowStore((s) => s.open);
+  // Touch needs the 44px minimum even at desktop width; a mouse does not.
+  const coarse = usePrefersCoarsePointer();
 
   // Sync selected team when teamNames changes
   useEffect(() => {
@@ -36,32 +46,48 @@ export function TeamActivityPanel({ teamNames, messages }: TeamActivityPanelProp
     }
   }, [teamNames, selectedTeam]);
 
-  const fetchTeamDetail = useCallback(async (name: string) => {
-    setLoading(true);
-    try {
-      const detail = await api.get<any>(`/api/teams/${encodeURIComponent(name)}`);
-      setMembers(detail?.members ?? []);
-    } catch { setMembers([]); }
-    setLoading(false);
-  }, []);
+  // The panel only renders while open, so mounting is the right poll gate.
+  const { members, outbound, loading, refresh } = useTeamActivityFeed(selectedTeam, Boolean(selectedTeam));
 
-  // Fetch members on mount and tab switch
-  useEffect(() => {
-    if (selectedTeam) fetchTeamDetail(selectedTeam);
-  }, [selectedTeam, fetchTeamDetail]);
+  const openMemberSession = useCallback(
+    (memberName: string) => {
+      openWindow("team-member", { teamName: selectedTeam, memberName, projectName });
+    },
+    [openWindow, selectedTeam, projectName],
+  );
 
-  // Auto-scroll messages
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messages.length]);
+  /**
+   * Inbox messages are lead → member only. A teammate's own reports live in its
+   * transcript as SendMessage calls, so both directions are merged here — without
+   * it the panel shows tasks going out and nothing ever coming back.
+   */
+  const displayMessages = useMemo(() => {
+    const replies = outbound.map((m) => ({
+      from: m.from,
+      to: m.to,
+      text: m.text,
+      timestamp: m.timestamp,
+      ...(m.summary ? { summary: m.summary } : {}),
+    })) as TeamMessageItem[];
+    return [...messages, ...replies]
+      .sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime())
+      .slice(-200);
+  }, [messages, outbound]);
 
-  const displayMessages = messages.slice(-200);
+  const workingCount = members.filter((m) => m.workState === "working").length;
+
+  const tabClass = (active: boolean) =>
+    cn(
+      "flex items-center gap-1.5 px-2.5 rounded-md text-[11px] whitespace-nowrap transition-colors",
+      coarse ? "min-h-[44px]" : "py-1",
+      active ? "bg-primary/10 text-primary font-medium" : "text-text-subtle hover:text-text-primary",
+    );
 
   return (
-    <div className="space-y-0">
-      {/* Team tabs + refresh */}
-      <div className="flex items-center gap-1 mb-2">
-        <div className="flex items-center gap-1 overflow-x-auto min-w-0 flex-1">
+    <div className="flex flex-col min-h-0">
+      {/* Team selector — only meaningful when a session tracks more than one team */}
+      {teamNames.length > 1 && (
+        <div className="flex items-center gap-1 overflow-x-auto min-w-0 mb-1.5">
           {teamNames.map((name) => (
             <button
               key={name}
@@ -70,100 +96,60 @@ export function TeamActivityPanel({ teamNames, messages }: TeamActivityPanelProp
                 "px-2 py-0.5 text-[11px] rounded-md whitespace-nowrap transition-colors",
                 selectedTeam === name
                   ? "bg-primary/10 text-primary font-medium"
-                  : "text-text-subtle hover:text-text-primary"
+                  : "text-text-subtle hover:text-text-primary",
               )}
             >
-              {name}
+              {teamLabel(name, sessionId)}
             </button>
           ))}
         </div>
+      )}
+
+      {/* Members / Messages tabs + refresh */}
+      <div className="flex items-center gap-1 mb-1.5 shrink-0" role="tablist">
+        <button
+          role="tab"
+          aria-selected={tab === "members"}
+          onClick={() => setTab("members")}
+          className={tabClass(tab === "members")}
+        >
+          <span>Members</span>
+          <span className="text-text-subtle">{members.length}</span>
+          {workingCount > 0 && (
+            <span className="flex items-center gap-1 text-success">
+              <span className="size-1.5 rounded-full bg-success animate-pulse" />
+              {workingCount}
+            </span>
+          )}
+        </button>
         <button
-          onClick={() => selectedTeam && fetchTeamDetail(selectedTeam)}
-          className="text-text-subtle hover:text-foreground p-1 shrink-0"
+          role="tab"
+          aria-selected={tab === "messages"}
+          onClick={() => setTab("messages")}
+          className={tabClass(tab === "messages")}
+        >
+          <span>Messages</span>
+          <span className="text-text-subtle">{displayMessages.length}</span>
+        </button>
+        <button
+          onClick={refresh}
+          className={cn("ml-auto text-text-subtle hover:text-foreground shrink-0", coarse ? "p-3" : "p-1")}
           aria-label="Refresh"
         >
           <RefreshCw className={cn("size-3", loading && "animate-spin")} />
         </button>
       </div>
 
-      {/* Members */}
-      {members.length > 0 && (
-        <div className="pb-2 mb-2 border-b border-border/30">
-          <div className="text-[10px] text-text-subtle uppercase tracking-wider mb-1">Members</div>
-          <div className="space-y-1">
-            {members.map((m: any) => (
-              <div key={m.name} className="flex items-center gap-2 text-xs">
-                <span className={cn("size-1.5 rounded-full shrink-0", STATUS_COLORS[m.status] ?? "bg-text-3")} />
-                <span className="font-medium truncate">{m.name}</span>
-                {m.model && m.model !== "unknown" && (
-                  <span className="text-text-subtle text-[10px]">({m.model})</span>
-                )}
-                <span className="ml-auto text-text-subtle text-[10px]">{m.status}</span>
-              </div>
-            ))}
-          </div>
-        </div>
+      {tab === "members" ? (
+        <TeamMemberList
+          members={members}
+          loading={loading}
+          onOpenMember={openMemberSession}
+          className="max-h-56"
+        />
+      ) : (
+        <TeamMessageList messages={displayMessages} className="max-h-56" />
       )}
-
-      {/* Messages */}
-      <div className="max-h-40 overflow-y-auto">
-        {displayMessages.length === 0 ? (
-          <p className="text-xs text-text-subtle text-center py-2">No messages yet</p>
-        ) : (
-          <div className="space-y-2">
-            {displayMessages.map((msg, i) => {
-              const badge = msg.parsedType ? TYPE_BADGES[msg.parsedType] : null;
-              const time = formatTime(msg.timestamp);
-              return (
-                <div key={`${msg.timestamp}-${i}`} className="text-xs">
-                  <div className="flex items-center gap-1 text-text-subtle">
-                    <span className="font-medium" style={safeColor(msg.color)}>
-                      {msg.from}
-                    </span>
-                    <span>→</span>
-                    <span>{msg.to}</span>
-                    <span className="ml-auto text-[10px]">{time}</span>
-                  </div>
-                  <div className="mt-0.5 text-foreground/90 break-words">
-                    {badge && (
-                      <span className={cn("inline-block px-1 py-0 rounded text-[9px] mr-1", badge.className)}>
-                        {badge.label}
-                      </span>
-                    )}
-                    {msg.summary ?? truncateText(msg.text)}
-                  </div>
-                </div>
-              );
-            })}
-            <div ref={messagesEndRef} />
-          </div>
-        )}
-      </div>
     </div>
   );
 }
-
-function formatTime(timestamp: string): string {
-  try {
-    const d = new Date(timestamp);
-    return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" });
-  } catch { return ""; }
-}
-
-/** Sanitize color value to prevent CSS injection */
-function safeColor(color?: string): React.CSSProperties | undefined {
-  if (!color) return undefined;
-  if (/^#[0-9a-fA-F]{3,8}$/.test(color) || /^[a-zA-Z]{3,20}$/.test(color)) {
-    return { color };
-  }
-  return undefined;
-}
-
-function truncateText(text: string, max = 120): string {
-  if (!text) return "";
-  try {
-    const parsed = JSON.parse(text);
-    return parsed.summary ?? parsed.text ?? text.slice(0, max);
-  } catch {}
-  return text.length > max ? text.slice(0, max) + "..." : text;
-}

package/src/web/components/chat/team-member-activity-row.tsx

@@ -0,0 +1,92 @@
+/**
+ * One teammate row: who it is, whether it is working, and what it is doing.
+ *
+ * The status dot is driven by `workState` (derived from transcript writes), not
+ * by the inbox — an inbox-derived status reads "active" for every member forever,
+ * which is exactly the display that made it impossible to tell who was running.
+ */
+
+import { Loader2, ChevronRight } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { TeamMemberActivity } from "@/hooks/use-team-activity-feed";
+
+interface TeamMemberActivityRowProps {
+  member: TeamMemberActivity;
+  /** Opens the teammate's full work session. */
+  onOpen: (name: string) => void;
+}
+
+const STATE_LABEL: Record<string, string> = {
+  working: "working",
+  paused: "paused",
+  "no-transcript": "no session",
+};
+
+/** Trailing agent-type segment — `ak-engineer:tester` reads as `tester`. */
+function shortAgentType(agentType?: string): string | undefined {
+  if (!agentType) return undefined;
+  const tail = agentType.split(":").pop();
+  return tail && tail !== "general-purpose" ? tail : agentType;
+}
+
+/** `1h 4m` / `12m` / `45s` — compact enough for a dense row. */
+export function formatDuration(fromIso?: string, toIso?: string): string | undefined {
+  if (!fromIso) return undefined;
+  const from = new Date(fromIso).getTime();
+  const to = toIso ? new Date(toIso).getTime() : Date.now();
+  if (!Number.isFinite(from) || !Number.isFinite(to) || to < from) return undefined;
+  const totalSeconds = Math.floor((to - from) / 1000);
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  if (hours > 0) return `${hours}h ${minutes}m`;
+  if (minutes > 0) return `${minutes}m`;
+  return `${totalSeconds}s`;
+}
+
+/** Best one-line answer to "what is it doing" from the transcript tail. */
+function currentStep(member: TeamMemberActivity): string | undefined {
+  if (member.lastTool) {
+    return member.lastToolArg ? `${member.lastTool}: ${member.lastToolArg}` : member.lastTool;
+  }
+  return member.lastNarrative ?? member.description;
+}
+
+export function TeamMemberActivityRow({ member, onOpen }: TeamMemberActivityRowProps) {
+  const working = member.workState === "working";
+  const step = currentStep(member);
+  const elapsed = formatDuration(member.startedAt, working ? undefined : member.lastEventAt);
+  const agentType = shortAgentType(member.agentType);
+
+  return (
+    <button
+      type="button"
+      onClick={() => onOpen(member.name)}
+      // 44px min height keeps the row a valid touch target on mobile.
+      className="w-full text-left min-h-[44px] px-1.5 py-1 rounded-md hover:bg-surface-elevated transition-colors group"
+    >
+      <div className="flex items-center gap-2 text-xs">
+        {working ? (
+          <Loader2 className="size-3 shrink-0 animate-spin text-success" />
+        ) : (
+          <span
+            className={cn(
+              "size-1.5 rounded-full shrink-0",
+              member.workState === "paused" ? "bg-warning" : "bg-text-3",
+            )}
+          />
+        )}
+        <span className="font-medium truncate">{member.name}</span>
+        {agentType && <span className="text-text-subtle text-[10px] truncate">{agentType}</span>}
+        {member.model && <span className="text-text-subtle text-[10px]">({member.model})</span>}
+        <span className="ml-auto flex items-center gap-1 shrink-0 text-[10px] text-text-subtle">
+          {elapsed && <span>{elapsed}</span>}
+          <span className={cn(working && "text-success")}>{STATE_LABEL[member.workState]}</span>
+          <ChevronRight className="size-3 opacity-0 group-hover:opacity-100 transition-opacity" />
+        </span>
+      </div>
+      {step && (
+        <div className="mt-0.5 pl-5 text-[11px] text-text-subtle truncate font-mono">{step}</div>
+      )}
+    </button>
+  );
+}