feat(studio): line Performance intervals up with the retained conversation

The Conversation pane shipped in dd71048 without its stylesheet or the
Sessions-side reuse, so it rendered unstyled and the two surfaces still
drew the same event list twice. Restore both, and make the pairing real.

Correspondence was keyed on the recorded invocation id, which does not
survive into a Session projection: tool-activity.mjs reduces every call
to a step index (A1, A2, ...) on purpose, so the timing and dialogue
readings shared no key and every call rendered unlinked. Both readings
do take a call's start instant from the same record, so carry that
instant through the projection as startedAtMs and pair on it. Verified
against a live workspace: 257 retained calls, 257 exact millisecond
matches, and 291/291 calls linked in the pane.

Selecting a call reveals its interval and its source records; selecting
an interval scrolls the conversation to the call that produced it. A
Session with timing but no retained conversation states that absence
instead of reading as a failed request.

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

Author: phodal

packages/harness-studio/scripts/inspector-workspace-provider.mjs

@@ -209,6 +209,11 @@ function debuggerProjection(summary, identity) {
       input: safeDetail(call.detail) || "Input not retained in the privacy-safe Inspector projection.",
       output: safeDetail(call.output) || (call.status === "failed" ? "Inspector observed a failed call." : "Result payload not retained in the summary projection."),
       duration: Number.isFinite(call.durationMs) ? `${call.durationMs} ms` : "not retained",
+      // Invocation ids are deliberately reduced to a step index before they
+      // reach this projection, so the observed start instant is the only key
+      // that still identifies this call in another reading of the same
+      // evidence. It is the record's own timestamp, not new information.
+      ...(Number.isFinite(call.startedAt) ? { startedAtMs: Math.round(call.startedAt) } : {}),
       ...(resource === undefined ? {} : { resource }),
     }));
     events.push(debuggerEvent({

packages/harness-studio/src/app/App.tsx

@@ -18,6 +18,7 @@ import { MemoryView } from "./MemoryView.js";
 import { ExperimentView } from "./experiment/ExperimentView.js";
 import { GitHistoryView } from "./GitHistoryView.js";
 import { RunView } from "./run/RunView.js";
+import { SessionTranscript } from "./session/SessionTranscript.js";
 import {
   isArtifactCatalogResponse,
   type ArtifactDescriptor,
@@ -1152,7 +1153,7 @@ function SessionDetail({ session, artifactContext }: { session: DebuggerSession;
                 onDoubleClick={() => openArtifact(artifact)}
               ><span><strong>{artifact.label}</strong><small>{artifact.format.toUpperCase()} · {t("detail.exactRevision", { id: artifact.revision.id.slice(0, 18) })}</small></span><em>{artifact.renderer.status === "ready" ? artifact.renderer.label : t("detail.previewUnavailable")}</em></button></li>)}</ul>}
         </section>
-        <ol className="session-event-rows">{session.events.map((event) => <li key={event.id}><time>{event.timestamp}</time><span><strong>{event.phase} · {event.title}</strong><small>{event.summary}</small></span>{event.toolCalls && <em>{event.toolCalls.map((tool) => tool.name).join(", ")}</em>}</li>)}</ol>
+        <SessionTranscript events={session.events} />
       </section>
       <aside className="session-artifact-preview" aria-label={t("detail.artifactViewAria")}>
         {activeArtifact === undefined || artifactContext == null

packages/harness-studio/src/app/performance/SessionPerformanceWorkspace.tsx

@@ -98,14 +98,14 @@ export default function SessionPerformanceWorkspace({ config, dateRange }: { con
   // The recorded invocation id is the only key both projections share, so it is
   // what makes a timing interval and a retained call the same observation.
   const spansByCall = useMemo(() => {
-    const index = new Map<string, string>();
+    const index = new Map<number, string>();
     for (const span of detail?.spans ?? []) {
-      const call = span.facts.toolCallId;
-      if (typeof call === 'string' && call !== '' && !index.has(call)) index.set(call, span.id);
+      if (!['tool', 'shell', 'subagent'].includes(span.kind) || span.startMs === null) continue;
+      if (!index.has(span.startMs)) index.set(span.startMs, span.id);
     }
     return index;
   }, [detail]);
-  const activeCallId = typeof selectedSpan?.facts.toolCallId === 'string' ? selectedSpan.facts.toolCallId : undefined;
+  const activeCallStartMs = selectedSpan?.startMs ?? undefined;
   const toggleTranscript = (): void => setTranscriptOpen(open => { saveFilter('transcript', open ? '' : 'open'); return !open; });
   const start = selectedTurn?.startMs ?? detail?.session.firstSeenMs ?? 0;
   const end = selectedTurn?.endMs ?? detail?.session.lastActivityMs ?? detail?.session.lastSeenMs ?? start;
@@ -159,9 +159,9 @@ export default function SessionPerformanceWorkspace({ config, dateRange }: { con
       </main>
       {transcriptShown && <SessionTranscriptPane
         sessionId={selectedId}
-        {...(activeCallId === undefined ? {} : { activeToolCallId: activeCallId })}
-        linkedToolCallIds={new Set(spansByCall.keys())}
-        onSelectToolCall={id => { const span = spansByCall.get(id); if (span) selectSpan(span); }}
+        {...(activeCallStartMs === undefined ? {} : { activeCallStartMs })}
+        linkedCallStartMs={new Set(spansByCall.keys())}
+        onSelectCall={at => { const span = spansByCall.get(at); if (span) selectSpan(span); }}
         onClose={toggleTranscript}
       />}
       {selectedSpan && <aside className="performance-evidence" aria-label={t('evidence')} tabIndex={-1} ref={evidenceRef} onKeyDown={event => { if (event.key === 'Escape') { event.preventDefault(); closeEvidence(); } }}>

packages/harness-studio/src/app/performance/SessionTranscriptPane.tsx

@@ -12,9 +12,9 @@ import type { DebuggerSession } from '../../contracts/debugger-session.js';
  */
 export function SessionTranscriptPane(props: {
   sessionId: string;
-  activeToolCallId?: string;
-  linkedToolCallIds: ReadonlySet<string>;
-  onSelectToolCall: (toolCallId: string) => void;
+  activeCallStartMs?: number;
+  linkedCallStartMs: ReadonlySet<number>;
+  onSelectCall: (startedAtMs: number) => void;
   onClose: () => void;
 }): React.JSX.Element {
   const { t } = useTranslation('performance');
@@ -45,9 +45,9 @@ export function SessionTranscriptPane(props: {
           <p className="performance-note">{t('transcriptSummary', { agent: session.agent, events: session.events.length })}</p>
           <SessionTranscript
             events={session.events}
-            {...(props.activeToolCallId === undefined ? {} : { activeToolCallId: props.activeToolCallId })}
-            linkedToolCallIds={props.linkedToolCallIds}
-            onSelectToolCall={props.onSelectToolCall}
+            {...(props.activeCallStartMs === undefined ? {} : { activeCallStartMs: props.activeCallStartMs })}
+            linkedCallStartMs={props.linkedCallStartMs}
+            onSelectCall={props.onSelectCall}
           />
         </>}
   </aside>;

packages/harness-studio/src/app/session/SessionTranscript.tsx

@@ -7,52 +7,45 @@ import type { DebuggerEvent } from "../../contracts/debugger-session.js";
  *
  * Timing and dialogue are two projections of one Session, so this list is the
  * single place either surface renders it. A call the reader selected elsewhere
- * is addressed by the invocation id both projections recorded, which is why a
- * timing interval and the message that produced it line up exactly instead of
- * being matched by position or by a clock.
+ * is addressed by the instant the evidence recorded for it: invocation ids are
+ * reduced to a step index before a Session is projected, while both readings
+ * take the start instant from the same record, so it lines a call up with its
+ * interval exactly rather than by position or by tool name.
  */
 export function SessionTranscript(props: {
   events: DebuggerEvent[];
-  /** Recorded invocation id to reveal; scrolled into view when it changes. */
-  activeToolCallId?: string;
-  onSelectToolCall?: (toolCallId: string) => void;
-  /** Invocation ids this reader can follow back to a timing interval. */
-  linkedToolCallIds?: ReadonlySet<string>;
+  /** Recorded start instant to reveal; scrolled into view when it changes. */
+  activeCallStartMs?: number;
+  onSelectCall?: (startedAtMs: number) => void;
+  /** Start instants this reader can follow back to a timing interval. */
+  linkedCallStartMs?: ReadonlySet<number>;
 }): React.JSX.Element {
   const { t } = useTranslation("sessions");
   const active = useRef<HTMLLIElement>(null);
   useEffect(() => {
-    if (props.activeToolCallId === undefined) return;
+    if (props.activeCallStartMs === undefined) return;
     active.current?.scrollIntoView({ block: "center", behavior: "smooth" });
-  }, [props.activeToolCallId]);
+  }, [props.activeCallStartMs]);
   return <ol className="session-event-rows">{props.events.map((event) => {
     const calls = event.toolCalls ?? [];
-    const matched = calls.some((call) => toolCallIds(call).includes(props.activeToolCallId ?? ""));
-    return <li key={event.id} ref={matched ? active : undefined} aria-current={matched ? "true" : undefined} className={matched ? "matched" : undefined}>
+    const matched = calls.some((call) => call.startedAtMs !== undefined && call.startedAtMs === props.activeCallStartMs);
+    return <li key={event.id} ref={matched ? active : undefined} aria-current={matched ? "true" : undefined}>
       <time>{event.timestamp}</time>
       <span><strong>{event.phase} · {event.title}</strong><small>{event.summary}</small></span>
       {calls.length > 0 && <em className="session-event-calls">{calls.map((call) => {
-        const ids = toolCallIds(call);
-        const linked = props.onSelectToolCall !== undefined && ids.some((id) => props.linkedToolCallIds?.has(id) ?? false);
-        const current = ids.includes(props.activeToolCallId ?? "");
+        const at = call.startedAtMs;
+        const linked = props.onSelectCall !== undefined && at !== undefined && (props.linkedCallStartMs?.has(at) ?? false);
         return linked
           ? <button
             key={call.id}
             type="button"
             className="session-event-call"
-            aria-pressed={current}
+            aria-pressed={at === props.activeCallStartMs}
             aria-label={t("transcript.revealTiming", { name: call.name })}
-            onClick={() => props.onSelectToolCall?.(ids.find((id) => props.linkedToolCallIds?.has(id)) ?? call.id)}
+            onClick={() => props.onSelectCall?.(at)}
           >{call.name}</button>
           : <span key={call.id} className="session-event-call">{call.name}</span>;
       })}</em>}
     </li>;
   })}</ol>;
 }
-
-/** A projection may keep the recorded id, a per-resource copy of it, or both. */
-export function toolCallIds(call: { id: string; sourceCallId?: string }): string[] {
-  return call.sourceCallId === undefined || call.sourceCallId === call.id
-    ? [call.id]
-    : [call.sourceCallId, call.id];
-}

packages/harness-studio/src/app/styles/performance.css

@@ -63,7 +63,22 @@ body.performance-resizing, body.performance-resizing * { user-select: none; }
 .performance-evidence pre { white-space: pre-wrap; overflow-wrap: anywhere; }
 .performance-state { padding: var(--space-xl); color: var(--color-text-muted); }
 
-@media (max-width: 1200px) { .performance-catalog { flex-basis: 230px; } .performance-has-evidence .performance-catalog { display: none; } .performance-totals { grid-template-columns: repeat(2,minmax(0,1fr)); } }
+/* The retained conversation beside its own timing. It is a reading surface, not
+   a second control column, so it keeps the Session list's own row rhythm and
+   marks the matched call rather than restyling the list around it. */
+.performance-transcript { flex: 0 0 420px; min-width: 0; display: flex; flex-direction: column; overflow: auto; border-left: 1px solid var(--color-border); background: var(--color-panel); }
+.performance-transcript > .performance-toolbar { position: sticky; top: 0; z-index: 1; padding: var(--space-md); border-bottom: 1px solid var(--color-border); background: var(--color-panel); }
+.performance-transcript > .performance-note { margin: 0; padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-border); }
+.performance-transcript .session-event-rows { flex: 1; }
+.performance-transcript .session-event-rows li[aria-current="true"] { background: var(--color-surface-selected); box-shadow: inset 2px 0 var(--color-primary); }
+.session-event-calls { display: flex; flex-wrap: wrap; gap: var(--space-xs); justify-content: flex-end; }
+.session-event-call { padding: 0 var(--space-xs); font-size: var(--type-meta-size); color: var(--color-text-muted); background: transparent; border: 1px solid transparent; border-radius: var(--radius-xs); }
+button.session-event-call { cursor: pointer; color: var(--color-text); border-color: var(--color-border-strong); }
+button.session-event-call:hover { background: var(--color-surface-hover); }
+button.session-event-call[aria-pressed="true"] { color: var(--color-primary); border-color: var(--color-primary); }
+
+@media (max-width: 1400px) { .performance-has-transcript.performance-has-evidence .performance-catalog { display: none; } }
+@media (max-width: 1200px) { .performance-catalog { flex-basis: 230px; } .performance-has-evidence .performance-catalog { display: none; } .performance-totals { grid-template-columns: repeat(2,minmax(0,1fr)); } .performance-transcript { flex-basis: 340px; } }
 @media (max-width: 700px) {
   .performance-sash { display: none; }
   .performance-header { padding: var(--space-md); align-items: start; }
@@ -75,6 +90,9 @@ body.performance-resizing, body.performance-resizing * { user-select: none; }
   .performance-has-session .performance-analysis { display: block; }
   .performance-has-evidence .performance-catalog, .performance-has-evidence .performance-analysis { display: none; }
   .performance-evidence { flex: 1; border: 0; }
+  .performance-has-transcript .performance-catalog { display: none; }
+  .performance-has-transcript.performance-has-evidence .performance-transcript { display: none; }
+  .performance-transcript { flex: 1; border: 0; }
   .performance-back, .performance-evidence-back { display: inline-flex; margin-bottom: var(--space-md); }
   .performance-span { grid-template-columns: minmax(90px,1fr) minmax(40px,0.7fr) 65px; }
   .performance-pager { flex-wrap: wrap; }

packages/harness-studio/src/contracts/debugger-session.ts

@@ -13,6 +13,8 @@ export interface DebuggerToolCall {
   input: string;
   output: string;
   duration: string;
+  /** Observed start instant, when the evidence recorded one. */
+  startedAtMs?: number;
   resource?: string;
 }