@stigmer/react 3.0.9-dev.20260616060535 → 3.1.0

package/src/execution/ToolCallDetail.tsx

@@ -3,17 +3,31 @@
 import type { ToolCall } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
 import type { ToolResultView } from "@stigmer/sdk";
 import { cn } from "@stigmer/theme";
+import { BoundedContent } from "../internal/BoundedContent";
 import { McpToolDetail } from "./McpToolDetail";
 import { ToolArgsView } from "./ToolArgsView";
 import { ResultView } from "./ResultView";
 import { useToolPresentation } from "./tool-presenter";
 import type { ToolCategory } from "./tool-categories";
 import { CollapsiblePre } from "./tool-rendering-primitives";
+import {
+  describeApprovalPolicySource,
+  isInformativePolicySource,
+} from "./approval-provenance";
 
 /** Props for {@link ToolCallDetail}. */
 export interface ToolCallDetailProps {
   /** The tool call to render in detail. */
   readonly toolCall: ToolCall;
+  /**
+   * Whether the owning row's header truncated the primary argument (the search
+   * query / list path). A header-owned layout fact: when `true`, the search/list
+   * body restates the full, wrapping value so a long query is reachable without
+   * relying on the hover tooltip; when `false` (the default) the header already
+   * shows the value in full, so the body does not repeat it. Only the
+   * search/list branch consumes it.
+   */
+  readonly primaryArgTruncated?: boolean;
   /** Additional CSS class names for the root container. */
   readonly className?: string;
 }
@@ -39,12 +53,22 @@ export interface ToolCallDetailProps {
  * <ToolCallDetail toolCall={toolCall} />
  * ```
  */
-export function ToolCallDetail({ toolCall, className }: ToolCallDetailProps) {
-  const { category, result } = useToolPresentation(toolCall);
+export function ToolCallDetail({
+  toolCall,
+  primaryArgTruncated = false,
+  className,
+}: ToolCallDetailProps) {
+  const { category, result, primaryArg } = useToolPresentation(toolCall);
 
   return (
     <div className={cn("space-y-2 text-xs", className)}>
-      <CategoryDetail toolCall={toolCall} category={category} result={result} />
+      <CategoryDetail
+        toolCall={toolCall}
+        category={category}
+        result={result}
+        primaryArg={primaryArg}
+        primaryArgTruncated={primaryArgTruncated}
+      />
     </div>
   );
 }
@@ -52,19 +76,26 @@ export function ToolCallDetail({ toolCall, className }: ToolCallDetailProps) {
 // ---------------------------------------------------------------------------
 // Category composition
 //
-// Each category composes from three parts: MetadataRow (duration, slug),
-// ToolArgsView (the input), and ResultView (the effect). The combination is
-// chosen to be informative without duplication.
+// Invariant: the owning row header owns the METADATA (icon, label, file name,
+// ± stats, MCP slug, status, duration); the detail body owns the CONTENT — the
+// ToolArgsView input and the ResultView effect — plus, at most, a
+// ProvenanceNote when the authorization provenance is genuinely informative.
+// The body never restates header metadata. Each category picks the input/effect
+// combination that is informative without duplication.
 // ---------------------------------------------------------------------------
 
 function CategoryDetail({
   toolCall,
   category,
   result,
+  primaryArg,
+  primaryArgTruncated,
 }: {
   toolCall: ToolCall;
   category: ToolCategory;
   result: ToolResultView;
+  primaryArg: string | null;
+  primaryArgTruncated: boolean;
 }) {
   const args = <ArgsSection toolCall={toolCall} />;
 
@@ -75,34 +106,87 @@ function CategoryDetail({
     case "mcp":
       return <McpToolDetail toolCall={toolCall} />;
 
+    case "search":
+    case "list":
+      // The query/path is the input; the matches are the effect. The owning row
+      // header already shows the query (truncated, with a hover tooltip), so the
+      // body does NOT restate it as a redundant "Pattern:" row — it shows the
+      // full, wrapping value only when the header truncated it (a long query),
+      // then the result. This is the search/list analog of the edit branch's
+      // "the diff already names the file" de-duplication.
+      return (
+        <>
+          <ProvenanceNote toolCall={toolCall} />
+          {primaryArgTruncated && primaryArg && (
+            <SearchQueryBlock category={category} value={primaryArg} />
+          )}
+          {/* The owning row header shows the count (summarizeResultView), so the
+              body suppresses it (showStats={false}) and shows only the matches
+              plus, when capped, a truncation note. */}
+          <ResultView view={result} showStats={false} />
+        </>
+      );
+
     case "edit":
+    case "write":
       // The diff already names the file and quantifies the change, so it stands
-      // alone — showing the new content as an argument would duplicate it.
+      // alone — showing the written content as an argument would duplicate it. A
+      // write whose capture is unavailable degrades to a `file` result here
+      // (ResultView shows the content), so the input is never lost. The owning
+      // row already names the file, so the body suppresses the path.
+      //
+      // The diff is the one tool body with no internal truncation of its own, so
+      // it is bounded by the shared BoundedContent budget (the same clamp the
+      // approval gate diff uses) — a large or still-streaming edit shows a
+      // consistent, scannable window with one in-place reveal, never the whole
+      // file. Every other category's body self-truncates (terminal / text via
+      // CollapsiblePre), so only edit/write wrap here — never double-bound.
       return (
         <>
-          <MetadataRow toolCall={toolCall} />
-          <ResultView view={result} />
+          <ProvenanceNote toolCall={toolCall} />
+          <BoundedContent cursorTarget="tool-detail-expand">
+            <ResultView view={result} showFileName={false} showStats={false} />
+          </BoundedContent>
         </>
       );
 
     case "read":
-    case "write":
     case "delete":
-      // The input is the point (path, or path + written content). Only surface a
+      // The input is the point (path, or path for a delete). Only surface a
       // result body when it carries new information — i.e. an error.
       return (
         <>
-          <MetadataRow toolCall={toolCall} />
+          <ProvenanceNote toolCall={toolCall} />
           {args}
           {result.type === "error" && <ResultView view={result} />}
         </>
       );
 
+    case "shell":
+      // The result IS a terminal session (command + output in one block via
+      // ResultView's terminal view), so a separate args box would just restate
+      // the command line the session already leads with. The exception is a
+      // hard tool failure (TOOL_CALL_FAILED → error view, which has no command):
+      // show the command (args) alongside the error so it is never lost.
+      return (
+        <>
+          <ProvenanceNote toolCall={toolCall} />
+          {result.type === "error" ? (
+            <>
+              {args}
+              <ResultView view={result} />
+            </>
+          ) : (
+            <ResultView view={result} />
+          )}
+        </>
+      );
+
     default:
-      // shell, search, list, fetch, web-search, unknown: input + effect.
+      // fetch, web-search, unknown: input + effect.
       return (
         <>
-          <MetadataRow toolCall={toolCall} />
+          <ProvenanceNote toolCall={toolCall} />
           {args}
           <ResultView view={result} />
         </>
@@ -110,6 +194,27 @@ function CategoryDetail({
   }
 }
 
+// The full, wrapping query (search) or path (list), shown in the body only when
+// the owning row's header truncated it — so a long value is reachable without
+// hovering, without restating a short value the header already shows in full.
+function SearchQueryBlock({
+  category,
+  value,
+}: {
+  category: ToolCategory;
+  value: string;
+}) {
+  const label = category === "list" ? "Path" : "Query";
+  return (
+    <div className="space-y-1">
+      <span className="font-medium text-muted-foreground">{label}</span>
+      <code className="block whitespace-pre-wrap break-words rounded bg-muted px-1.5 py-0.5 font-mono text-foreground">
+        {value}
+      </code>
+    </div>
+  );
+}
+
 function ArgsSection({ toolCall }: { toolCall: ToolCall }) {
   return (
     <ToolArgsView
@@ -140,20 +245,26 @@ function ThinkToolDetail({ toolCall }: { toolCall: ToolCall }) {
 // Shared sub-components
 // ---------------------------------------------------------------------------
 
-function MetadataRow({ toolCall }: { toolCall: ToolCall }) {
-  const duration = formatDuration(toolCall.startedAt, toolCall.completedAt);
-  const hasMetadata = toolCall.mcpServerSlug || duration;
-  if (!hasMetadata) return null;
+// The detail body's only metadata. Duration and the MCP slug live in the owning
+// row header (ToolCallItem / ApprovalCardHeader), so the body never restates
+// them; it surfaces the authorization provenance the runner stamped onto the
+// call (approval_policy_source) ONLY when it is genuinely informative — an
+// explicit override, a server-marked destructive tighten, or a post-hoc
+// lease/bypass that cleared it. The everyday "this category just needs approval"
+// default and legacy UNSPECIFIED are noise, so they render nothing, mirroring
+// the approval gate's smart-suppress (isInformativePolicySource).
+function ProvenanceNote({ toolCall }: { toolCall: ToolCall }) {
+  if (!isInformativePolicySource(toolCall.approvalPolicySource)) return null;
+  const provenance = describeApprovalPolicySource(toolCall.approvalPolicySource);
+  if (!provenance) return null;
 
   return (
-    <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-muted-foreground">
-      {toolCall.mcpServerSlug && (
-        <span className="rounded bg-muted px-1.5 py-0.5 font-mono">
-          {toolCall.mcpServerSlug}
-        </span>
-      )}
-      {duration && <span>{duration}</span>}
-    </div>
+    <p
+      className="text-[11px] italic text-muted-foreground"
+      title={provenance}
+    >
+      {provenance}
+    </p>
   );
 }
 

package/src/execution/ToolCallGroup.tsx

@@ -1,16 +1,14 @@
 "use client";
 
-import { memo, useEffect, useMemo, useRef, useState } from "react";
+import { memo, useMemo } from "react";
 import type { ToolCall } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
 import type { SubAgentExecution } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/subagent_pb";
-import {
-  ApprovalAction,
-  ToolCallStatus,
-} from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
 import { cn } from "@stigmer/theme";
 import { useRenderTracer } from "../internal/dev";
 import { ToolCallItem } from "./ToolCallItem";
-import { resolveToolCategoryFromCall, extractPrimaryArg } from "./tool-categories";
+import { ToolRunGroup } from "./ToolRunGroup";
+import { segmentToolCalls } from "./segment-tool-calls";
+import { isCollapsedToolCall } from "./tool-categories";
 
 /** Props for {@link ToolCallGroup}. */
 export interface ToolCallGroupProps {
@@ -24,114 +22,24 @@ export interface ToolCallGroupProps {
    */
   readonly subAgentExecutions?: readonly SubAgentExecution[];
   /**
-   * Custom summary formatter. Receives the tool calls and returns a
-   * display string. When omitted, the component uses a default that
-   * shows the tool name for single calls and a count for multiple.
+   * Custom label formatter for a folded run chip (e.g. a run of reads).
+   * Receives the run's tool calls and returns the chip's collapsed label.
+   *
+   * NOTE: the unit of summary moved from the *turn* to the *run*. This used to
+   * label the whole turn ("Ran 3 tools"); since the turn no longer collapses,
+   * it now labels each {@link ToolRunGroup} chip. The signature is unchanged.
    */
   readonly formatSummary?: (toolCalls: readonly ToolCall[]) => string;
   /**
-   * Initial expansion state. Defaults to `false`.
+   * @deprecated No-op. The turn no longer collapses as a unit — rows persist
+   * and only repetitive runs fold (see {@link ToolRunGroup}). Kept for
+   * back-compat so existing call sites keep type-checking.
    */
   readonly defaultExpanded?: boolean;
   /** Additional CSS class names for the root container. */
   readonly className?: string;
 }
 
-type AggregateStatus = "running" | "waiting" | "failed" | "completed" | "pending";
-
-function isResolvedApproval(tc: ToolCall): boolean {
-  return (
-    tc.approvalAction === ApprovalAction.APPROVE ||
-    tc.approvalAction === ApprovalAction.SKIP ||
-    tc.approvalAction === ApprovalAction.REJECT
-  );
-}
-
-function deriveAggregateStatus(toolCalls: readonly ToolCall[]): AggregateStatus {
-  let hasRunning = false;
-  let hasWaiting = false;
-  let hasFailed = false;
-  let allTerminal = true;
-
-  for (const tc of toolCalls) {
-    switch (tc.status) {
-      case ToolCallStatus.TOOL_CALL_RUNNING:
-        hasRunning = true;
-        allTerminal = false;
-        break;
-      case ToolCallStatus.TOOL_CALL_WAITING_APPROVAL:
-        if (isResolvedApproval(tc)) {
-          break;
-        }
-        hasWaiting = true;
-        allTerminal = false;
-        break;
-      case ToolCallStatus.TOOL_CALL_FAILED:
-        hasFailed = true;
-        break;
-      case ToolCallStatus.TOOL_CALL_COMPLETED:
-      case ToolCallStatus.TOOL_CALL_SKIPPED:
-        break;
-      default:
-        allTerminal = false;
-        break;
-    }
-  }
-
-  if (hasRunning) return "running";
-  if (hasWaiting) return "waiting";
-  if (hasFailed) return "failed";
-  if (allTerminal) return "completed";
-  return "pending";
-}
-
-function defaultFormatSummary(
-  toolCalls: readonly ToolCall[],
-  status: AggregateStatus,
-): string {
-  if (toolCalls.length === 1) {
-    const tc = toolCalls[0];
-    const cat = resolveToolCategoryFromCall(tc);
-    const primary = extractPrimaryArg(tc);
-    if (primary) {
-      const truncated =
-        primary.length > 60 ? primary.slice(0, 57) + "\u2026" : primary;
-      return `${cat.label}: ${truncated}`;
-    }
-    return cat.label;
-  }
-
-  const noun = toolCalls.length === 1 ? "tool" : "tools";
-  switch (status) {
-    case "running":
-      return `Running ${toolCalls.length} ${noun}`;
-    case "waiting":
-      return "Waiting for approval";
-    case "failed":
-      return `Ran ${toolCalls.length} ${noun} (with errors)`;
-    case "completed":
-      return `Ran ${toolCalls.length} ${noun}`;
-    case "pending":
-      return `${toolCalls.length} ${noun} pending`;
-  }
-}
-
-const STATUS_ICON: Record<AggregateStatus, () => React.JSX.Element> = {
-  running: SpinnerIcon,
-  waiting: ClockIcon,
-  failed: XCircleIcon,
-  completed: CheckCircleIcon,
-  pending: DotIcon,
-};
-
-const STATUS_COLOR: Record<AggregateStatus, string> = {
-  running: "text-foreground",
-  waiting: "text-warning",
-  failed: "text-destructive",
-  completed: "text-success",
-  pending: "text-muted-foreground",
-};
-
 /**
  * Shallow comparison for `ToolCallGroupProps`.
  *
@@ -159,23 +67,28 @@ export function toolCallGroupPropsEqual(
 }
 
 /**
- * Renders a summary line for a group of tool calls from a single
- * AI turn. Click to expand and see individual tool calls.
+ * Renders one AI turn's tool activity as a **persistent-row timeline** rather
+ * than a collapsible "Ran N tools" box. Each call stays visible after it
+ * settles, so completed work is never hidden behind a pill — the thread reads
+ * like a virtual human at work.
  *
- * Two-level progressive disclosure:
- * 1. **Collapsed** — aggregate status icon + summary label.
- * 2. **Expanded** — list of {@link ToolCallItem} rows, each
- *    expandable to show detail (args, result, error, timing) or
- *    a nested sub-agent thread.
+ * The turn is segmented by {@link segmentToolCalls}:
+ * - high-signal calls (edits, shell, MCP, sub-agents, …) render as persistent
+ *   {@link ToolCallItem} rows; a content-bearing call shows its body inline
+ *   (no card chevron), bounded by a single in-place reveal;
+ * - runs of consecutive low-signal same-category calls (read / list / search)
+ *   fold into one collapsible {@link ToolRunGroup} chip — the *only* collapse,
+ *   because that is the only genuine noise.
  *
- * Default summaries use active-voice phrasing ("Ran 3 tools",
- * "Running 2 tools") with category-aware labels for single tools
- * (e.g., "Shell: ls -la /tmp"). Platform builders can override
- * via the `formatSummary` prop.
+ * The rows are clustered under a light left rail (the neutral counterpart to
+ * {@link SubAgentSection}'s primary-tinted rail for delegated work), keeping a
+ * turn's tools visually associated with their AI message without a tab that
+ * hides things.
  *
- * Wrapped in `React.memo` with a custom comparator that checks
- * `toolCalls` elements by reference (structural sharing keeps
- * individual `ToolCall` objects stable for unchanged calls).
+ * Wrapped in `React.memo` with a custom comparator that checks `toolCalls`
+ * elements by reference (structural sharing keeps individual `ToolCall` objects
+ * stable for unchanged calls), so settled rows skip re-renders while siblings
+ * stream (DD-009/010).
  *
  * @example
  * ```tsx
@@ -186,30 +99,23 @@ export const ToolCallGroup = memo(function ToolCallGroup({
   toolCalls,
   subAgentExecutions,
   formatSummary,
-  defaultExpanded = false,
   className,
 }: ToolCallGroupProps) {
   useRenderTracer("ToolCallGroup", { toolCallCount: toolCalls.length });
 
-  const status = deriveAggregateStatus(toolCalls);
-  const isActive = status === "running" || status === "pending" || status === "waiting";
-
-  const [expanded, setExpanded] = useState(defaultExpanded || isActive);
-  const userToggledRef = useRef(false);
-
-  useEffect(() => {
-    if (userToggledRef.current) return;
-    if (isActive) {
-      setExpanded(true);
-    } else {
-      setExpanded(false);
-    }
-  }, [isActive]);
+  // Drop runner-collapsed duplicates (a superseded same-turn denial twin of an
+  // approval gate) so one gated resource renders one card, not two. The blanked
+  // twin is kept in the persisted transcript (the backend's append-only guard
+  // forbids dropping it); it is simply not drawn.
+  const visibleToolCalls = useMemo(
+    () => toolCalls.filter((tc) => !isCollapsedToolCall(tc)),
+    [toolCalls],
+  );
 
-  const handleToggle = () => {
-    userToggledRef.current = true;
-    setExpanded((v) => !v);
-  };
+  const segments = useMemo(
+    () => segmentToolCalls(visibleToolCalls),
+    [visibleToolCalls],
+  );
 
   const subAgentMap = useMemo(() => {
     if (!subAgentExecutions || subAgentExecutions.length === 0) return null;
@@ -220,174 +126,40 @@ export const ToolCallGroup = memo(function ToolCallGroup({
     return map;
   }, [subAgentExecutions]);
 
-  if (toolCalls.length === 0) return null;
+  if (visibleToolCalls.length === 0) return null;
 
-  const summary = formatSummary
-    ? formatSummary(toolCalls)
-    : defaultFormatSummary(toolCalls, status);
-  const Icon = STATUS_ICON[status];
-  const ariaLabel = `${summary}, ${status}`;
+  const ariaLabel = `${visibleToolCalls.length} tool ${visibleToolCalls.length === 1 ? "call" : "calls"}`;
 
   return (
     <div
       role="group"
       aria-label={ariaLabel}
+      data-cursor-target="tool-call-group"
       className={cn(
-        "rounded-md border border-border bg-muted-faint",
+        // Cursor-style: each tool call (and folded run chip) is its own
+        // self-contained card; the turn's tools stack with a small gap between
+        // them rather than sharing a left rail, so the thread reads as a column
+        // of discrete cards.
+        "flex flex-col gap-2",
         className,
       )}
     >
-      {/* Summary trigger */}
-      <button
-        type="button"
-        aria-expanded={expanded}
-        onClick={handleToggle}
-        className={cn(
-          "flex w-full items-center gap-2 px-2.5 py-1.5 text-left text-xs text-muted-foreground transition-colors",
-          "hover:bg-muted-subtle",
-          "cursor-pointer",
-        )}
-      >
-        <span className={cn("shrink-0", STATUS_COLOR[status])} aria-hidden="true">
-          <Icon />
-        </span>
-        <span className="min-w-0 flex-1 truncate">{summary}</span>
-        <ChevronIcon expanded={expanded} />
-      </button>
-
-      {/* Expanded tool call list — CSS grid-rows animation */}
-      <div
-        className={cn(
-          "grid transition-[grid-template-rows] duration-150 ease-out",
-          expanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]",
-        )}
-      >
-        <div className="overflow-hidden">
-          {expanded && (
-            <div className="border-t border-border-muted">
-              {toolCalls.map((tc) => (
-                <ToolCallItem
-                  key={tc.id || tc.name}
-                  toolCall={tc}
-                  subAgentExecution={subAgentMap?.get(tc.id) ?? null}
-                />
-              ))}
-            </div>
-          )}
-        </div>
-      </div>
+      {segments.map((segment) =>
+        segment.kind === "run" ? (
+          <ToolRunGroup
+            key={segment.key}
+            category={segment.category}
+            toolCalls={segment.toolCalls}
+            formatLabel={formatSummary}
+          />
+        ) : (
+          <ToolCallItem
+            key={segment.key}
+            toolCall={segment.toolCall}
+            subAgentExecution={subAgentMap?.get(segment.toolCall.id) ?? null}
+          />
+        ),
+      )}
     </div>
   );
 }, toolCallGroupPropsEqual);
-
-// ---------------------------------------------------------------------------
-// Inline SVG icons — same as SP1, kept inline for SDK independence
-// ---------------------------------------------------------------------------
-
-function SpinnerIcon() {
-  return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      className="animate-spin"
-    >
-      <path
-        d="M6 1.5A4.5 4.5 0 1 1 1.5 6"
-        strokeLinecap="round"
-      />
-    </svg>
-  );
-}
-
-function ClockIcon() {
-  return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <circle cx="6" cy="6" r="4.5" />
-      <path d="M6 3.5V6L7.5 7.5" />
-    </svg>
-  );
-}
-
-function CheckCircleIcon() {
-  return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <circle cx="6" cy="6" r="4.5" />
-      <path d="M4 6L5.5 7.5L8 4.5" />
-    </svg>
-  );
-}
-
-function XCircleIcon() {
-  return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <circle cx="6" cy="6" r="4.5" />
-      <path d="M4.5 4.5L7.5 7.5M7.5 4.5L4.5 7.5" />
-    </svg>
-  );
-}
-
-function DotIcon() {
-  return (
-    <svg
-      width="8"
-      height="8"
-      viewBox="0 0 8 8"
-      fill="currentColor"
-    >
-      <circle cx="4" cy="4" r="3" />
-    </svg>
-  );
-}
-
-function ChevronIcon({ expanded }: { expanded: boolean }) {
-  return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className={cn(
-        "shrink-0 text-muted-foreground transition-transform duration-150",
-        expanded && "rotate-90",
-      )}
-      aria-hidden="true"
-    >
-      <path d="M4.5 2.5L7.5 6L4.5 9.5" />
-    </svg>
-  );
-}