@stigmer/react 3.12.1 → 3.12.2

package/src/execution/MessageEntry.tsx

@@ -20,6 +20,7 @@ import {
 import { PlanDocumentMessage } from "./PlanDocumentMessage.js";
 import { useRenderTracer } from "../internal/dev/index.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
+import { useCopyFeedback } from "../internal/useCopyFeedback.js";
 
 /** Props for {@link MessageEntry}. */
 export interface MessageEntryProps {
@@ -192,29 +193,29 @@ function HumanMessage({
         />
       )}
       <p className="stg:text-sm stg:text-foreground stg:whitespace-pre-wrap">{content}</p>
-      {onEdit && (
-        <Tooltip>
-          <TooltipTrigger
-            render={
-              <button
-                type="button"
-                onClick={onEdit}
-                aria-label="Edit message"
-                className={cn(
-                  "stg:absolute stg:-top-2.5 stg:-right-2.5 stg:inline-flex stg:h-7 stg:w-7 stg:items-center stg:justify-center stg:rounded-full",
-                  "stg:border stg:border-border stg:bg-card stg:text-muted-foreground stg:shadow-sm stg:transition",
-                  "stg:hover:text-foreground stg:hover:bg-accent-hover",
-                  "stg:opacity-0 stg:group-hover:opacity-100 stg:focus-visible:opacity-100",
-                  "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
-                )}
-              />
-            }
-          >
-            <EditIcon />
-          </TooltipTrigger>
-          <TooltipContent side="top">Edit</TooltipContent>
-        </Tooltip>
-      )}
+      {/* The hover-revealed action cluster on the bubble's shoulder: copy is
+          always offered (the message text is the content), edit only when the
+          host wired the callback. */}
+      <div className="stg:absolute stg:-top-2.5 stg:-right-2.5 stg:flex stg:gap-1">
+        <CopyMessageButton text={content} variant="bubble" />
+        {onEdit && (
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <button
+                  type="button"
+                  onClick={onEdit}
+                  aria-label="Edit message"
+                  className={BUBBLE_ACTION_CLASSES}
+                />
+              }
+            >
+              <EditIcon />
+            </TooltipTrigger>
+            <TooltipContent side="top">Edit</TooltipContent>
+          </Tooltip>
+        )}
+      </div>
     </div>
   );
 }
@@ -269,7 +270,7 @@ function AiMessage({
       role="article"
       aria-label="AI response"
       aria-busy={isStreaming}
-      className={cn("stg:px-4 stg:py-3", className)}
+      className={cn("stg:group stg:px-4 stg:py-3", className)}
     >
       <div className="stgm-prose">
         <Streamdown
@@ -280,10 +281,118 @@ function AiMessage({
           {markdown}
         </Streamdown>
       </div>
+      {/* The quiet per-message actions row (issue #278). Height is reserved
+          whenever it renders, so the hover reveal never shifts the prose; it
+          appears only once the message settles — a streaming message's text
+          is still changing, so a copy would race the content. Copies the
+          display markdown (fence-unwrapped), i.e. what the reader sees. */}
+      {!isStreaming && markdown.trim().length > 0 && (
+        <div className="stg:mt-1 stg:flex stg:h-6 stg:items-center">
+          <CopyMessageButton text={markdown} variant="quiet" />
+        </div>
+      )}
     </div>
   );
 }
 
+// ---------------------------------------------------------------------------
+// Per-message copy affordance (issue #278)
+// ---------------------------------------------------------------------------
+
+// The floating circular action on a human bubble's shoulder — shared by the
+// copy and edit buttons so the cluster reads as one control family.
+const BUBBLE_ACTION_CLASSES = cn(
+  "stg:inline-flex stg:h-7 stg:w-7 stg:items-center stg:justify-center stg:rounded-full",
+  "stg:border stg:border-border stg:bg-card stg:text-muted-foreground stg:shadow-sm stg:transition",
+  "stg:hover:text-foreground stg:hover:bg-accent-hover",
+  "stg:opacity-0 stg:group-hover:opacity-100 stg:focus-visible:opacity-100",
+  "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+);
+
+// The quiet in-flow variant for AI prose: no border or fill, one contrast
+// step below the reading text (`muted-foreground-subtle`, rising to
+// `muted-foreground` on hover) — findable when wanted, invisible while
+// reading. The same hover/focus reveal keeps both variants keyboard-reachable.
+const QUIET_ACTION_CLASSES = cn(
+  "stg:inline-flex stg:h-6 stg:w-6 stg:items-center stg:justify-center stg:rounded-md",
+  "stg:text-muted-foreground-subtle stg:transition",
+  "stg:hover:text-muted-foreground stg:hover:bg-accent-hover",
+  "stg:opacity-0 stg:group-hover:opacity-100 stg:focus-visible:opacity-100",
+  "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+);
+
+/**
+ * The per-message copy control: writes the message's text to the clipboard
+ * and flips to a check for the feedback window. `variant` selects the visual
+ * home — `"bubble"` joins the human bubble's floating action cluster,
+ * `"quiet"` sits in the AI message's reserved actions row.
+ */
+function CopyMessageButton({
+  text,
+  variant,
+}: {
+  text: string;
+  variant: "bubble" | "quiet";
+}) {
+  const { copy, copied } = useCopyFeedback();
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <button
+            type="button"
+            onClick={() => void copy(text)}
+            aria-label={copied ? "Copied" : "Copy message"}
+            className={
+              variant === "bubble" ? BUBBLE_ACTION_CLASSES : QUIET_ACTION_CLASSES
+            }
+          />
+        }
+      >
+        {copied ? <CheckIcon /> : <CopyMessageIcon />}
+      </TooltipTrigger>
+      <TooltipContent side="top">{copied ? "Copied" : "Copy"}</TooltipContent>
+    </Tooltip>
+  );
+}
+
+function CopyMessageIcon() {
+  return (
+    <svg
+      width="13"
+      height="13"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <rect x="9" y="9" width="13" height="13" rx="2" />
+      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+    </svg>
+  );
+}
+
+function CheckIcon() {
+  return (
+    <svg
+      width="13"
+      height="13"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M20 6 9 17l-5-5" />
+    </svg>
+  );
+}
+
 const THINKING_PREVIEW_LENGTH = 80;
 
 function ThinkingMessage({
@@ -320,7 +429,9 @@ function ThinkingMessage({
         )}
       >
         <ThinkingIcon isStreaming={isStreaming} />
-        <span className="stg:min-w-0 stg:truncate">
+        {/* Live reasoning carries the ambient-liveness sweep (stigmer#277) —
+            the words themselves signal activity, not just the icon. */}
+        <span className={cn("stg:min-w-0 stg:truncate", isStreaming && "stgm-shimmer-label")}>
           {isStreaming && !hasContent
             ? "Thinking..."
             : expanded

package/src/execution/MessageThread.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { lazy, memo, Suspense, useCallback, useMemo, useState, type ComponentType } from "react";
+import { lazy, memo, Suspense, useCallback, useMemo, type ComponentType } from "react";
 import { create } from "@bufbuild/protobuf";
 import type { AgentExecution } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/api_pb";
 import type { AgentMessage, ToolCall } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
@@ -16,6 +16,8 @@ import {
   FileChangeSetStatus,
   InteractionMode,
   MessageType,
+  SubAgentStatus,
+  ToolCallStatus,
 } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
 import type { WorkspaceEntry } from "@stigmer/protos/ai/stigmer/agentic/session/v1/workspace_pb";
 import { displayFileChangeSets } from "@stigmer/sdk";
@@ -27,7 +29,12 @@ import { ToolCallGroup } from "./ToolCallGroup.js";
 import { SubAgentSection } from "./SubAgentSection.js";
 import { ExecutionPhaseBadge } from "./ExecutionPhaseBadge.js";
 import { SetupProgress, type SetupProgressProps } from "./SetupProgress.js";
+import {
+  LivenessStatusLine,
+  type LivenessStatusLineProps,
+} from "./LivenessStatusLine.js";
 import { ApprovalCard, type ApprovalCardProps } from "./ApprovalCard.js";
+import { ExecutionErrorNotice, type ExecutionErrorNoticeProps } from "./ExecutionErrorNotice.js";
 import { FileReviewCard } from "./FileReviewCard.js";
 import { SummarizationCard } from "./SummarizationCard.js";
 import { PlanCompletionCard, type PlanCompletionCardProps } from "./PlanCompletionCard.js";
@@ -106,6 +113,20 @@ export interface MessageThreadSlots {
   readonly PlanStreamingCard?: ComponentType<PlanStreamingCardProps>;
   /** Pre-first-token setup / "Thinking…" indicator. */
   readonly SetupProgress?: ComponentType<SetupProgressProps>;
+  /**
+   * The terminal execution-failure notice. Receives the raw server-reported
+   * reason and the retry wiring, so a host can turn the failure into its own
+   * recovery moment (classify the reason, offer an alternate engine, link
+   * support) instead of the built-in Show more / Retry treatment.
+   */
+  readonly ExecutionErrorNotice?: ComponentType<ExecutionErrorNoticeProps>;
+  /**
+   * The ambient-liveness status line at the thread's tail while the active
+   * execution is live between visible events (stigmer#277). Override to
+   * supply a host-voiced label or richer treatment; the emission policy
+   * (when the line appears at all) stays with the thread.
+   */
+  readonly LivenessStatusLine?: ComponentType<LivenessStatusLineProps>;
 }
 
 /** Props for {@link MessageThread}. */
@@ -400,6 +421,16 @@ export type ThreadItem =
       readonly planTitle?: string;
       /** Length of the plan text streamed so far (drives the live size). */
       readonly planSize: number;
+    }
+  | {
+      /**
+       * The ambient-liveness status line at the thread's tail (stigmer#277):
+       * emitted while the active execution is IN_PROGRESS with no running
+       * tool call, no live sub-agent, and no pending approval — the quiet
+       * stretches where the screen would otherwise be completely still.
+       */
+      readonly kind: "liveness";
+      readonly key: string;
     };
 
 /**
@@ -426,6 +457,30 @@ function hasStartedResponding(execution: AgentExecution): boolean {
   });
 }
 
+/**
+ * True while the active execution already shows a live signal of its own
+ * somewhere in the thread — a RUNNING tool call (its row's label carries the
+ * shimmer) or an in-flight sub-agent (its section carries a live indicator).
+ * Suppresses the bottom liveness line: one ambient signal at a time, riding
+ * the words closest to the actual activity.
+ */
+function hasVisiblyRunningActivity(execution: AgentExecution): boolean {
+  for (const sub of execution.status?.subAgentExecutions ?? []) {
+    if (
+      sub.status === SubAgentStatus.SUB_AGENT_IN_PROGRESS ||
+      sub.status === SubAgentStatus.SUB_AGENT_PENDING
+    ) {
+      return true;
+    }
+  }
+  for (const msg of execution.status?.messages ?? []) {
+    for (const tc of msg.toolCalls) {
+      if (tc.status === ToolCallStatus.TOOL_CALL_RUNNING) return true;
+    }
+  }
+  return false;
+}
+
 /**
  * True for an execution that ran in Plan mode and completed — the only kind of
  * execution that has a reviewable plan (streaming/failed/terminated Plan turns
@@ -1026,6 +1081,26 @@ export function buildThreadItems(
   // edit row, never appended at the thread tail. Pending decision bars are
   // not thread items at all: they live in the composer-docked FileReviewDock.
 
+  // The ambient-liveness line (stigmer#277): the thread's tail is never a
+  // dead frame while the agent is alive. Emitted only when
+  //  - the execution is IN_PROGRESS (phase-driven, DD-009 — WAITING/PAUSED
+  //    mean the agent is NOT working, and shimmering there would lie),
+  //  - it is past the pre-first-content window (setup-progress owns that),
+  //  - nothing else on screen carries its own live signal (a running tool
+  //    row or live sub-agent — one ambient signal at a time), and
+  //  - no approval is pending (the gate card is the louder, truthful state).
+  // Model-generation gaps between tool calls — the exact moments users doubt
+  // the agent — are precisely what remains.
+  if (
+    activeStreamExecution &&
+    hasStartedResponding(activeStreamExecution) &&
+    activeStreamExecution.status?.phase === ExecutionPhase.EXECUTION_IN_PROGRESS &&
+    (activeStreamExecution.status.pendingApprovals?.length ?? 0) === 0 &&
+    !hasVisiblyRunningActivity(activeStreamExecution)
+  ) {
+    items.push({ kind: "liveness", key: "liveness-status" });
+  }
+
   if (pendingUserMessage) {
     // A FAILED send never created an execution, so an existing execution with
     // identical text (e.g. two build attempts of the same plan — both
@@ -1489,14 +1564,16 @@ export function ThreadItemRenderer({
           <ExecutionPhaseBadge phase={item.phase} />
         </div>
       );
-    case "execution-error":
+    case "execution-error": {
+      const ErrorNotice = slots?.ExecutionErrorNotice ?? ExecutionErrorNotice;
       return (
-        <ExecutionErrorNotice
+        <ErrorNotice
           error={item.error}
           retryMessage={item.retryMessage}
           onRetry={onRetryExecution}
         />
       );
+    }
     case "approval-request":
       return (
         <ApprovalCardRow
@@ -1521,6 +1598,10 @@ export function ThreadItemRenderer({
     }
     case "context-compacted":
       return <SummarizationCard event={item.event} />;
+    case "liveness": {
+      const Liveness = slots?.LivenessStatusLine ?? LivenessStatusLine;
+      return <Liveness />;
+    }
     case "todos": {
       const Todos = slots?.TodoCard ?? TodoCard;
       return <Todos todos={item.todos} className="stg:mx-4" TodoRow={slots?.TodoRow} />;
@@ -1624,86 +1705,6 @@ function FailedUserMessage({
   );
 }
 
-// ---------------------------------------------------------------------------
-// ExecutionErrorNotice — server failure reason for a terminal-failed execution
-// ---------------------------------------------------------------------------
-
-/**
- * Recognizes a recoverable *interruption* (worker reaped / heartbeat timeout /
- * stall) as opposed to a genuine application failure. The runner stamps these
- * with a stable signature ("[StallTimeoutError]", "Execution interrupted",
- * "Retry or resume."), and the workflow auto-resumes them while recovery cycles
- * remain; by the time one reaches the UI as terminal it is resumable from the
- * session's persisted harness_state_id rather than a dead end.
- */
-function isInterruptedError(error: string): boolean {
-  return /\[StallTimeoutError\]|execution interrupted|retry or resume/i.test(error);
-}
-
-/**
- * Renders the server-reported failure reason (`AgentExecutionStatus.error`)
- * for an execution that died — typically before producing any messages. The
- * reason can be a long Temporal error, so it is clamped by default with a
- * Show more / Show less toggle.
- *
- * A genuine failure renders as a destructive alert with a Retry. A *recoverable
- * interruption* renders as a neutral notice with a Resume — both resend the
- * originating message, which the server continues from the session's persisted
- * harness_state_id (the same data path; the framing differs so an interruption
- * never looks like a dead-end crash).
- */
-function ExecutionErrorNotice({
-  error,
-  retryMessage,
-  onRetry,
-}: {
-  error: string;
-  retryMessage?: string;
-  onRetry?: (message: string) => void;
-}) {
-  const [expanded, setExpanded] = useState(false);
-  const canRetry = !!onRetry && !!retryMessage;
-  const interrupted = isInterruptedError(error);
-
-  return (
-    <div
-      role={interrupted ? "status" : "alert"}
-      className={cn(
-        "stg:mx-4 stg:flex stg:flex-col stg:gap-1.5 stg:rounded-md stg:px-3 stg:py-2",
-        interrupted ? "stg:bg-muted" : "stg:bg-destructive-subtle",
-      )}
-    >
-      <p
-        className={cn(
-          "stg:text-xs stg:whitespace-pre-wrap stg:break-words",
-          interrupted ? "stg:text-foreground" : "stg:text-destructive",
-          !expanded && "stg:line-clamp-3",
-        )}
-      >
-        {error}
-      </p>
-      <div className="stg:flex stg:items-center stg:gap-3 stg:text-xs">
-        <button
-          type="button"
-          onClick={() => setExpanded((v) => !v)}
-          className="stg:font-medium stg:text-muted-foreground stg:underline-offset-2 stg:hover:underline stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring"
-        >
-          {expanded ? "Show less" : "Show more"}
-        </button>
-        {canRetry && (
-          <button
-            type="button"
-            onClick={() => onRetry!(retryMessage!)}
-            className="stg:font-medium stg:text-foreground stg:underline-offset-2 stg:hover:underline stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring"
-          >
-            {interrupted ? "Resume" : "Retry"}
-          </button>
-        )}
-      </div>
-    </div>
-  );
-}
-
 // ---------------------------------------------------------------------------
 // ApprovalCardRow — stabilizes the onSubmit callback for React.memo
 // ---------------------------------------------------------------------------

package/src/execution/SetupProgress.tsx

@@ -145,7 +145,11 @@ export const SetupProgress = memo(function SetupProgress({
       className={cn("stg:flex stg:items-center stg:gap-2.5 stg:px-4 stg:py-2", className)}
     >
       <PulseIndicator />
-      <span className="stg:text-sm stg:text-muted-foreground stg:animate-in stg:fade-in stg:duration-300">
+      {/* The setup/thinking label carries the ambient-liveness sweep
+          (stigmer#277): this indicator only exists while the execution is
+          live, so it always shimmers. The shimmer class owns `color`,
+          replacing the static muted utility. */}
+      <span className="stg:text-sm stg:animate-in stg:fade-in stg:duration-300 stgm-shimmer-label">
         {currentMessage}
       </span>
     </div>

package/src/execution/SubAgentSection.tsx

@@ -12,7 +12,7 @@ import { useRenderTracer } from "../internal/dev/index.js";
 import { useAutoDisclosure } from "../internal/useAutoDisclosure.js";
 import { useElapsedSince, formatElapsed } from "../internal/useElapsedSince.js";
 import { cn } from "@stigmer/theme";
-import { formatDuration } from "./ToolCallDetail.js";
+import { formatHeaderDuration } from "./ToolCallDetail.js";
 import { MessageEntry } from "./MessageEntry.js";
 import { ToolCallGroup } from "./ToolCallGroup.js";
 import { ApprovalContext } from "./ApprovalContext.js";
@@ -23,6 +23,7 @@ import {
   findActiveTodo,
   todoCompletionSummary,
 } from "./TodoList.js";
+import { SpinnerIcon } from "../internal/thread-card/glyphs.js";
 
 /** Props for {@link SubAgentSection}. */
 export interface SubAgentSectionProps {
@@ -80,7 +81,10 @@ export const SubAgentSection = memo(function SubAgentSection({
 }: SubAgentSectionProps) {
   useRenderTracer("SubAgentSection", { status: sub.status, name: sub.name });
 
-  const duration = formatDuration(sub.startedAt, sub.completedAt);
+  // Header chip threshold (>= 1s) shared with ToolCallItem — a sub-second
+  // sub-agent is noise by the same rule, and the two row kinds must speak
+  // one duration vocabulary.
+  const duration = formatHeaderDuration(sub.startedAt, sub.completedAt);
   const statusInfo = SUB_AGENT_STATUS_MAP[sub.status];
   const StatusIcon = statusInfo.icon;
   const isFailed = sub.status === SubAgentStatus.SUB_AGENT_FAILED;
@@ -206,7 +210,7 @@ function CollapsibleCard({
         <span className="stg:min-w-0 stg:flex-1 stg:truncate">{displayLabel}</span>
         {isRunning && (
           <span className="stg:shrink-0 stg:text-muted-foreground" aria-hidden="true">
-            <SpinnerIcon />
+            <SpinnerIcon size={12} />
           </span>
         )}
         <span
@@ -482,7 +486,8 @@ const SUB_AGENT_STATUS_MAP: Record<SubAgentStatus, SubAgentStatusInfo> = {
     label: "Running",
     colorClass: "stg:text-foreground",
     badgeClass: "stg:bg-muted stg:text-foreground",
-    icon: SpinnerIcon,
+    // Sized up to match this map's 12px siblings (the glyph defaults to 10).
+    icon: () => <SpinnerIcon size={12} />,
   },
   [SubAgentStatus.SUB_AGENT_COMPLETED]: {
     label: "Completed",
@@ -508,22 +513,6 @@ const SUB_AGENT_STATUS_MAP: Record<SubAgentStatus, SubAgentStatusInfo> = {
 // Inline SVG icons
 // ---------------------------------------------------------------------------
 
-function SpinnerIcon() {
-  return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      className="stg:animate-spin"
-    >
-      <path d="M6 1.5A4.5 4.5 0 1 1 1.5 6" strokeLinecap="round" />
-    </svg>
-  );
-}
-
 function CheckCircleIcon() {
   return (
     <svg

package/src/execution/TerminalSession.tsx

@@ -75,17 +75,104 @@ export function TerminalSession({
       {stderr && (
         <CollapsiblePre content={normalize(stderr)} className="stg:text-destructive" />
       )}
-      {failed && (
-        <div>
-          <span className="stg:sr-only">Command exited with code {exitCode}</span>
-          <span
-            aria-hidden="true"
-            className="stg:inline-block stg:rounded stg:bg-destructive-subtle stg:px-1 stg:py-0.5 stg:text-[10px] stg:font-medium stg:leading-none stg:tabular-nums stg:text-destructive"
-          >
-            exit {exitCode}
-          </span>
-        </div>
+      {failed && <ExitBadge exitCode={exitCode} />}
+    </div>
+  );
+}
+
+/** How many trailing output lines a collapsed terminal tail keeps visible. */
+const TAIL_LINE_LIMIT = 3;
+
+/** Props for {@link TerminalTail}. */
+export interface TerminalTailProps {
+  /** The command that was run, shown as the `$ <command>` prompt line. */
+  readonly command?: string;
+  /** Standard output. */
+  readonly stdout?: string;
+  /** Standard error. */
+  readonly stderr?: string;
+  /** Process exit code. A non-zero code renders a trailing `exit N` badge. */
+  readonly exitCode?: number;
+  /** Additional CSS class names for the root container. */
+  readonly className?: string;
+}
+
+/**
+ * The collapsed teaser of a settled terminal session: the `$ command` prompt
+ * line plus a dimmed tail of the last few output lines — enough to see at a
+ * glance that the command ran and what it printed last, without the full
+ * output competing with the conversation.
+ *
+ * The reduced contrast is deliberate and load-bearing: the tail is *context*,
+ * not content, so it renders one contrast step below the reading text
+ * (`muted-foreground`), while the command — the user-relevant intent — keeps
+ * full contrast. stderr is not colored here for the same reason; the full
+ * session (one disclosure away) restores the destructive treatment.
+ *
+ * Rendered by the tool-call row's `"tail"` disclosure state (see
+ * {@link ToolCallItem}); the row's header chevron is the expand control, so
+ * this component is presentation-only.
+ */
+export function TerminalTail({
+  command,
+  stdout,
+  stderr,
+  exitCode,
+  className,
+}: TerminalTailProps) {
+  const normalize = useSandboxNormalize();
+  const failed = exitCode !== undefined && exitCode !== 0;
+
+  // One combined stream, in the order the full session renders it. Trailing
+  // whitespace is trimmed so an ending newline doesn't blank the last slot.
+  const combined = [stdout, stderr]
+    .filter((s): s is string => Boolean(s))
+    .join("\n")
+    .replace(/\s+$/, "");
+  const lines = combined ? normalize(combined).split("\n") : [];
+  const tail = lines.slice(-TAIL_LINE_LIMIT);
+  const hiddenCount = lines.length - tail.length;
+
+  return (
+    <div
+      data-cursor-target="terminal-tail"
+      className={cn(
+        "stg:space-y-1 stg:rounded-md stg:border stg:border-border stg:bg-muted-subtle stg:p-2.5 stg:font-mono stg:text-xs",
+        className,
       )}
+    >
+      {command && (
+        <pre className="stg:whitespace-pre-wrap stg:break-words stg:text-foreground">
+          <span className="stg:select-none stg:text-muted-foreground">$ </span>
+          {normalize(command)}
+        </pre>
+      )}
+      {tail.length > 0 && (
+        <pre className="stg:whitespace-pre-wrap stg:break-words stg:text-muted-foreground">
+          {hiddenCount > 0 && (
+            <span className="stg:block stg:select-none stg:text-muted-foreground-subtle">
+              … +{hiddenCount} {hiddenCount === 1 ? "line" : "lines"}
+            </span>
+          )}
+          {tail.join("\n")}
+        </pre>
+      )}
+      {failed && <ExitBadge exitCode={exitCode} />}
+    </div>
+  );
+}
+
+/** The `exit N` failure badge, shared by the full session and the tail. */
+function ExitBadge({ exitCode }: { exitCode?: number }) {
+  return (
+    <div>
+      <span className="stg:sr-only">Command exited with code {exitCode}</span>
+      <span
+        aria-hidden="true"
+        className="stg:inline-block stg:rounded stg:bg-destructive-subtle stg:px-1 stg:py-0.5 stg:text-[10px] stg:font-medium stg:leading-none stg:tabular-nums stg:text-destructive"
+      >
+        exit {exitCode}
+      </span>
     </div>
   );
 }

package/src/execution/ToolCallDetail.tsx

@@ -347,3 +347,22 @@ export function formatDuration(
   const seconds = Math.round((ms % 60_000) / 1000);
   return seconds > 0 ? `${minutes}m ${seconds}s` : `${minutes}m`;
 }
+
+/**
+ * {@link formatDuration} for header duration chips: returns `null` below one
+ * second. A duration chip earns its place only when it carries information —
+ * a `4ms` chip on a directory listing draws the eye to the least interesting
+ * row in the thread (stigmer#274), so sub-second work renders no chip at all.
+ * `formatDuration` itself stays exact — it is public API with consumers that
+ * want the precise value.
+ */
+export function formatHeaderDuration(
+  startedAt: string,
+  completedAt: string,
+): string | null {
+  const formatted = formatDuration(startedAt, completedAt);
+  // Exactly the sub-second arm of formatDuration ("123ms"); every other arm
+  // is >= 1s by construction.
+  if (formatted === null || formatted.endsWith("ms")) return null;
+  return formatted;
+}