V48 Gate 3 (implementation-only): one-row explained telemetry title-lines + 'While <Pipeline>' processing sentence

Live-QA UX refinements to the synthesis telemetry log + processing indicator
(client-side display only — the streamed contract and F19's two formal row
kinds are unchanged):

- Processing sentence: 'While Depositing, during Discovery, Depository Search
  Agent is Trying, by Reasoning over Context · 6s since last update'.
  * 'While <Depositing|Reading>, ' prefix from the pipeline mode — explicit
    page prop preferred, falling back to the mode latched from the stream's
    'synthesize-asset-packs'/'mode' store (stamped onto rows by the activity
    builder), no prefix when unknown.
  * prepare_concise_context reads 'Context' in the SENTENCE
    (FAILSAFE_SENTENCE_NAMES); the PILL keeps 'Prepare Concise Context'.
  * Agent names trim their pipeline prefix client-side (shared
    trimPipelineAgentName): CamelCase 'Deposit'/'Read', kebab 'deposit-', and
    'setup:'-style namespace prefixes — used by BOTH the title-line agent pill
    and the sentence.
- Title-line pills: ONE inline wrapping row of all five pills (phase, agent,
  step, failsafe, generation, + tool) replacing the top/bottom split, in
  compact, desktop, and narrow layouts; corner icon + expand-arrow line kept;
  failsafe repair badges ('… · stitch ×N'/'chunk N'/'sum') preserved.
- Rich tooltips on EVERY title-line element (corner icon + each pill) via
  TelemetryExplainerTrigger reusing BitcodeInlineExplainer's placement/portal
  machinery with the pill itself as the hover/focus trigger; two sections per
  tooltip (generic per-type copy + specific per-value copy) in the new
  telemetry-pill-explainers module with graceful fallbacks.
- Each expanded row's Details/Raw Data JSON gets a copy button (pretty-printed
  exact payload) reusing the copyTextToClipboard insecure-context fallback.
- Activity builder additionally exposes the latched mode + the CURRENT
  call-chain (latestContext) for page-level header trackers.
- Display formatting extracted to execution-telemetry-format.ts; RunClock
  (m:ss / h:mm:ss) added for the page header's total-run-time clock.
- Tests: stale sentence pins updated to the trimmed/prefixed phrasing; new
  pipelineExecutionLogTelemetryUx suite (registered in jest.config.cjs) covers
  the trim helper, sentence prefix + composition, failsafe naming, clock
  format, mode latch, and the pill row.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: geraldarthurdavis

uapi/app/terminal/terminal-run-activity.ts

@@ -22,6 +22,24 @@ export interface TerminalRunActivitySnapshot {
   error: string | null;
   latestWorkUpdate: any | null;
   iterationUpdates: any[];
+  /**
+   * The synthesis pipeline mode latched from the stream (the
+   * 'synthesize-asset-packs' namespace 'mode' store carries 'deposit'|'read').
+   * Null until the store event arrives.
+   */
+  mode: 'deposit' | 'read' | null;
+  /**
+   * The CURRENT active call-chain: the rolling Phase→Agent→Step→Failsafe→
+   * Generation context after the last streamed event — drives live header
+   * trackers without re-parsing the log.
+   */
+  latestContext: {
+    phase: string | null;
+    agent: string | null;
+    step: string | null;
+    failsafe: string | null;
+    generation: string | null;
+  } | null;
 }
 
 export type MockRunActivitySnapshot = {
@@ -182,6 +200,10 @@ export function buildTerminalRunActivityFromEvents(
   const rollingContext: ExecContext = {};
   const toolByNode = new Map<string, { name?: string; input?: unknown }>();
   let rowSeq = 0;
+  // Pipeline mode latched from the 'synthesize-asset-packs'/'mode' store —
+  // stamped onto subsequent rows (the processing indicator's 'While
+  // Depositing, …' prefix fallback) and surfaced on the snapshot.
+  let pipelineMode: 'deposit' | 'read' | null = null;
 
   const pushRow = (displayText: string, enriched: any) => {
     const text = toSafeSingleLine(displayText);
@@ -194,14 +216,21 @@ export function buildTerminalRunActivityFromEvents(
     outputDetails[rowKey] = enriched;
   };
 
-  const stampExecutionState = (state: ExecContext, payload: any, extra?: Record<string, unknown>) => ({
-    ...payload,
-    executionState: { ...state, ...(extra || {}) },
-    status: {
-      ...(payload?.status && typeof payload.status === 'object' ? payload.status : {}),
-      executionState: { ...state, ...(extra || {}) },
-    },
-  });
+  const stampExecutionState = (state: ExecContext, payload: any, extra?: Record<string, unknown>) => {
+    const stamped = {
+      ...state,
+      ...(pipelineMode ? { pipelineMode } : {}),
+      ...(extra || {}),
+    };
+    return {
+      ...payload,
+      executionState: stamped,
+      status: {
+        ...(payload?.status && typeof payload.status === 'object' ? payload.status : {}),
+        executionState: stamped,
+      },
+    };
+  };
 
   // Failsafe-repair markers derived from the execution path: a stitch-repair
   // generation runs under a 'stitch-<N>-gen-*' segment, a chunk task
@@ -244,6 +273,12 @@ export function buildTerminalRunActivityFromEvents(
     const ns = String(payload?.namespace || '');
     const key = String(payload?.key || '');
     const nodeId = String(payload?.executionNodeId || '');
+
+    // Latch the synthesis pipeline mode ('deposit' | 'read') from its store.
+    if (ns === 'synthesize-asset-packs' && key === 'mode' && typeof payload?.data === 'string') {
+      const candidate = payload.data.trim().toLowerCase();
+      if (candidate === 'deposit' || candidate === 'read') pipelineMode = candidate;
+    }
     if ((ns === 'tool' || ns === 'tools') && nodeId) {
       if (key === 'name' && typeof payload?.data === 'string') {
         const acc = toolByNode.get(nodeId) || {};
@@ -299,6 +334,10 @@ export function buildTerminalRunActivityFromEvents(
 
   const latestStatusEvent = statusEvents[statusEvents.length - 1];
 
+  const hasLatestContext = Boolean(
+    rollingContext.phase || rollingContext.agent || rollingContext.step,
+  );
+
   return {
     output: outputLines.join('\n'),
     outputDetails,
@@ -310,6 +349,16 @@ export function buildTerminalRunActivityFromEvents(
     error: streamError || errorEvent?.event?.message || errorEvent?.event?.error || null,
     latestWorkUpdate,
     iterationUpdates: Array.from(normalizedIterationUpdates.values()),
+    mode: pipelineMode,
+    latestContext: hasLatestContext
+      ? {
+        phase: rollingContext.phase ?? null,
+        agent: rollingContext.agent ?? null,
+        step: rollingContext.step ?? null,
+        failsafe: rollingContext.failsafe ?? null,
+        generation: rollingContext.generation ?? null,
+      }
+      : null,
   };
 }
 
@@ -339,5 +388,7 @@ export function buildTerminalRunActivityFromMock(
     error: snapshot.error ?? null,
     latestWorkUpdate: snapshot.latestWorkUpdate ?? null,
     iterationUpdates: snapshot.iterationUpdates || [],
+    mode: null,
+    latestContext: null,
   };
 }

uapi/components/base/bitcode/execution/BitcodeInlineExplainer.tsx

@@ -6,9 +6,9 @@ import { createPortal } from 'react-dom';
 import { cn } from '@bitcode/styling';
 import type { BitcodeExplainer } from './bitcode-transaction-types';
 
-type TooltipSide = 'top' | 'bottom';
+export type TooltipSide = 'top' | 'bottom';
 
-interface TooltipPlacement {
+export interface TooltipPlacement {
   side: TooltipSide;
   left: number;
   width: number;
@@ -46,7 +46,7 @@ function clamp(value: number, min: number, max: number) {
   return Math.min(Math.max(value, min), max);
 }
 
-function resolveExplainerPlacement(trigger: HTMLElement, preferredSide: TooltipSide): TooltipPlacement {
+export function resolveExplainerPlacement(trigger: HTMLElement, preferredSide: TooltipSide): TooltipPlacement {
   if (typeof window === 'undefined') {
     return {
       side: preferredSide,
@@ -110,7 +110,7 @@ function resolveExplainerPlacement(trigger: HTMLElement, preferredSide: TooltipS
   };
 }
 
-function tooltipPositionStyle(placement: TooltipPlacement): React.CSSProperties {
+export function tooltipPositionStyle(placement: TooltipPlacement): React.CSSProperties {
   return {
     left: placement.left,
     width: placement.width,
@@ -119,7 +119,7 @@ function tooltipPositionStyle(placement: TooltipPlacement): React.CSSProperties
   };
 }
 
-function tooltipArrowClassName({ side }: TooltipPlacement) {
+export function tooltipArrowClassName({ side }: TooltipPlacement) {
   const sideClassName =
     side === 'bottom'
       ? '-top-[7px] border-x-[7px] border-b-[7px] border-x-transparent border-b-[rgba(4,8,18,0.98)]'

uapi/components/base/bitcode/execution/ExecutionContextPillRow.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import React from 'react';
+
+import { PathPill, type PillType } from './PathPill';
+import { TelemetryExplainerTrigger } from './TelemetryExplainerTrigger';
+import { getTelemetryPillExplainer } from './telemetry-pill-explainers';
+import {
+  formatFailsafeName,
+  formatGenerationName,
+  normalizePhaseName,
+  normalizeStepName,
+  trimPipelineAgentName,
+  type SynthesisPipelineMode,
+} from './execution-telemetry-format';
+
+export interface ExecutionContextPillRowProps {
+  phase?: string | null;
+  agent?: string | null;
+  step?: string | null;
+  failsafe?: string | null;
+  generation?: string | null;
+  tool?: string | null;
+  /** Failsafe-repair markers rendered as pill badges ('… · stitch ×N'). */
+  stitchIteration?: number;
+  chunkIndex?: number;
+  chunkSum?: boolean;
+  /** Pipeline mode, when known — sharpens the phase tooltip copy. */
+  mode?: SynthesisPipelineMode | string | null;
+  className?: string;
+}
+
+/**
+ * Badge real failsafe-handling work on the pill label: 'stitch ×N' marks the
+ * Nth stitch repair; 'chunk N' a chunk task generation; 'sum' the chunk
+ * summing generation. Absent markers = the non-triggering path.
+ */
+export function buildFailsafePillLabel(args: {
+  failsafe: string;
+  stitchIteration?: number;
+  chunkIndex?: number;
+  chunkSum?: boolean;
+}): string {
+  let label = formatFailsafeName(args.failsafe);
+  if (typeof args.stitchIteration === 'number' && args.stitchIteration > 0) {
+    label = `${label} · stitch ×${args.stitchIteration}`;
+  } else if (args.chunkSum) {
+    label = `${label} · sum`;
+  } else if (typeof args.chunkIndex === 'number') {
+    label = `${label} · chunk ${args.chunkIndex}`;
+  }
+  return label;
+}
+
+/**
+ * ONE inline, wrapping row of call-chain pills in canonical order — phase,
+ * agent, step, failsafe, generation (+ tool) — each wrapped as a rich-tooltip
+ * trigger. Used by the log title-lines and by /deposit's live header tracker
+ * so the call chain always reads identically.
+ */
+export function ExecutionContextPillRow({
+  phase,
+  agent,
+  step,
+  failsafe,
+  generation,
+  tool,
+  stitchIteration,
+  chunkIndex,
+  chunkSum,
+  mode,
+  className = '',
+}: ExecutionContextPillRowProps) {
+  const pills: { type: PillType; label: string; raw: string }[] = [];
+  if (phase) pills.push({ type: 'phase', label: normalizePhaseName(phase) || phase, raw: phase });
+  if (agent) pills.push({ type: 'agent', label: trimPipelineAgentName(agent), raw: agent });
+  if (step) pills.push({ type: 'step', label: normalizeStepName(step), raw: step });
+  if (failsafe) {
+    pills.push({
+      type: 'failsafe',
+      label: buildFailsafePillLabel({ failsafe, stitchIteration, chunkIndex, chunkSum }),
+      raw: failsafe,
+    });
+  }
+  if (generation) pills.push({ type: 'generation', label: formatGenerationName(generation), raw: generation });
+  if (tool) pills.push({ type: 'tool', label: tool, raw: tool });
+
+  if (pills.length === 0) return null;
+
+  return (
+    <div className={`flex min-w-0 flex-wrap items-center gap-1 ${className}`}>
+      {pills.map((pill) => (
+        <TelemetryExplainerTrigger
+          key={pill.type}
+          explainer={getTelemetryPillExplainer(pill.type, pill.raw, mode)}
+        >
+          <PathPill type={pill.type} label={pill.label} />
+        </TelemetryExplainerTrigger>
+      ))}
+    </div>
+  );
+}

uapi/components/base/bitcode/execution/RunClock.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+
+/**
+ * Format an elapsed duration as a run clock: 'm:ss' under an hour
+ * ('0:07', '4:53'), 'h:mm:ss' from one hour up ('1:04:09'). Negative and
+ * non-finite inputs clamp to '0:00'. Pure + exported for unit testing.
+ */
+export function formatRunClock(elapsedMs: number): string {
+  const totalSeconds = Number.isFinite(elapsedMs) ? Math.max(0, Math.floor(elapsedMs / 1000)) : 0;
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+  const two = (n: number) => String(n).padStart(2, '0');
+  return hours > 0 ? `${hours}:${two(minutes)}:${two(seconds)}` : `${minutes}:${two(seconds)}`;
+}
+
+interface RunClockProps {
+  /** Run start (ms since epoch) — typically the first event's created_at. */
+  startedAtMs: number | null;
+  /** Ticks once a second while true; freezes when it flips false. */
+  running: boolean;
+  /** Optional authoritative end (e.g. the completion event's created_at). */
+  endedAtMs?: number | null;
+  className?: string;
+}
+
+/**
+ * TOTAL RUN TIME clock: ticks once a second while the run is processing and
+ * freezes on completion/error (at `endedAtMs` when known, else at the last
+ * tick).
+ */
+export function RunClock({ startedAtMs, running, endedAtMs, className = '' }: RunClockProps) {
+  const [nowMs, setNowMs] = useState(() => Date.now());
+
+  useEffect(() => {
+    if (!running) return;
+    setNowMs(Date.now());
+    const id = setInterval(() => setNowMs(Date.now()), 1000);
+    return () => clearInterval(id);
+  }, [running]);
+
+  if (startedAtMs === null || !Number.isFinite(startedAtMs)) return null;
+
+  const endMs = running ? nowMs : endedAtMs ?? nowMs;
+  return (
+    <span className={`tabular-nums ${className}`} data-testid="telemetry-run-clock" title="Total run time">
+      {formatRunClock(endMs - startedAtMs)}
+    </span>
+  );
+}