diff --git a/PUBLIC_EXPORT_MANIFEST.json b/PUBLIC_EXPORT_MANIFEST.json
index 45fd74a6..624d4c57 100644
--- a/PUBLIC_EXPORT_MANIFEST.json
+++ b/PUBLIC_EXPORT_MANIFEST.json
@@ -4003,10 +4003,10 @@
       "sha256": "f44aae70d7a18a2c5b0f90467951f611bc861ba228f32d56cbb1683c5e5facda"
     },
     {
-      "bytes": 56823,
+      "bytes": 61226,
       "mode": "100644",
       "path": "apps/synth_desktop/src/renderer/src/components/ReportsPage.tsx",
-      "sha256": "b8f4bfe17d008d59227d1cde173f5d472bd8dc186ad64f9c2fa9bb0e4f2a2f48"
+      "sha256": "6ec108fb175076e170c184fab74764366af5fe728424f90a68a3d74942c97a99"
     },
     {
       "bytes": 4739,
@@ -5011,10 +5011,10 @@
       "sha256": "b97bc591fffb8a9d354a39125ed955238190831b3935e2113cb9162c596f99fe"
     },
     {
-      "bytes": 341534,
+      "bytes": 341847,
       "mode": "100644",
       "path": "apps/synth_desktop/src/renderer/src/styles/app.css",
-      "sha256": "40b9bdf29dfecfae768716dd91eb0522ae1d7a547b319b9085ad6222b4d3fabf"
+      "sha256": "ff8e3ba8cb60cf7a26f4ce0cced369dac078d6649d86f4c7efeefb2c4b53af98"
     },
     {
       "bytes": 1855,
@@ -5671,10 +5671,10 @@
       "sha256": "5ebd8decfd3ddaa2f4704ec9aacdec81fa8877a7595f4c28f37a3d27b74dd23d"
     },
     {
-      "bytes": 14906,
+      "bytes": 15197,
       "mode": "100644",
       "path": "packages/workshop-visuals/components/agent_trace.v1/AgentTraceInspector.tsx",
-      "sha256": "77fc520f81d97b7813db72c12a6ce7f409ed5309902a2653aa817dda27cc2b25"
+      "sha256": "2c3d852c8cfcc705d9bba203b6da6dc4ec5eb95433f13b86eca9af24b2ebfcc6"
     },
     {
       "bytes": 3753,
@@ -5707,10 +5707,10 @@
       "sha256": "c229cfb751271e0bfa77e4819eb51d5ddbf8540032c525b1095fb60c6c8e988d"
     },
     {
-      "bytes": 19977,
+      "bytes": 20277,
       "mode": "100644",
       "path": "packages/workshop-visuals/components/agent_trace.v1/TraceViews.tsx",
-      "sha256": "d566793902e5fbe49a6e1aec56554cd1b00f8d4999a15047a602b3972714557d"
+      "sha256": "6dcf7671faea00baf255843658603cb3947fc99b04cc42eacb0366cb4d9d54fc"
     },
     {
       "bytes": 2042,
@@ -7690,7 +7690,7 @@
   "policySha256": "f5ef8fbb4560ee9e401c26c94da6f6189732be76291915027bd7ee3f5f5684dd",
   "schema": "workshop.public-export-manifest.v1",
   "source": {
-    "commit": "b39c7f686cb51522179a3c938d1ab7756026c89c",
-    "tree": "bb76f53df76aa90e60f8565b52d6e1700497b8f5"
+    "commit": "7ef1b6fb69770e997e8e62c6d9cacffbd26d06b5",
+    "tree": "76ea0cabbe5a32ded58158131ae1c1e3e5a6e4b8"
   }
 }
diff --git a/apps/synth_desktop/src/renderer/src/components/ReportsPage.tsx b/apps/synth_desktop/src/renderer/src/components/ReportsPage.tsx
index 5b17727c..a29051dd 100644
--- a/apps/synth_desktop/src/renderer/src/components/ReportsPage.tsx
+++ b/apps/synth_desktop/src/renderer/src/components/ReportsPage.tsx
@@ -1,5 +1,5 @@
 // @ts-nocheck — P0-1 generated protocol is stricter than prior handwritten DTOs; UI follow-up is out of specta-cutover file ownership.
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
 import { readReportDraft, writeReportDraft, type ReportDraft } from "../runtime/reportDrafts";
 import { bridges } from "../runtime/desktopBridge";
 import TraceInspector from "@synth/visual-templates/analysis/trace.rollout_inspector.v1/shell";
@@ -190,6 +190,17 @@ function traceEntries(block: ReportBlock | undefined): ReportTraceEntry[] {
 	return [];
 }
 
+function ReportTracePreview({ entry }: { entry: ReportTraceEntry }) {
+	const [open, setOpen] = useState(false);
+	const previewId = useId();
+	return <section>
+		<button type="button" aria-expanded={open} aria-controls={previewId} onClick={() => setOpen(!open)}>
+			{open ? "Hide attached trace" : "Inspect attached trace"}
+		</button>
+		<div id={previewId}>{open ? <TraceInspector title={entry.label} projection={entry.projection as never} /> : null}</div>
+	</section>;
+}
+
 export function ReportsPage({ onBack, initialReportId }: Props) {
 	const [tab, setTab] = useState<Tab>("all");
 	const [search, setSearch] = useState("");
@@ -221,6 +232,34 @@ export function ReportsPage({ onBack, initialReportId }: Props) {
 	const [comments, setComments] = useState<ReportComment[]>([]);
 	const [commentBody, setCommentBody] = useState("");
 	const [traceDigest, setTraceDigest] = useState("");
+	const traceAttachInFlight = useRef(false);
+	const [tracePickerOpen, setTracePickerOpen] = useState(false);
+	const tracePickerId = useId();
+	const [traceCatalog, setTraceCatalog] = useState<Array<{ digest: string; title: string; createdAt: string }>>([]);
+	const [traceCatalogStatus, setTraceCatalogStatus] = useState("");
+	useEffect(() => {
+		if (!tracePickerOpen) return;
+		let cancelled = false;
+		setTraceCatalog([]);
+		setTraceCatalogStatus("Loading retained traces…");
+		const timer = window.setTimeout(() => {
+			cancelled = true;
+			setTraceCatalogStatus("Trace catalog did not respond within 10 seconds. Close and reopen to retry, or paste a known digest.");
+		}, 10000);
+		void (async () => {
+			try {
+				if (!bridges.inventory) throw new Error("Trace catalog is unavailable in this environment.");
+				const inventory = await bridges.inventory.listTraces();
+				if (cancelled) return;
+				const rows = [...new Map(inventory.filter(row => typeof row.digest === "string" && row.digest.trim()).map(row => [row.digest, row])).values()];
+				setTraceCatalog(rows.slice(0, 100));
+				setTraceCatalogStatus(rows.length > 100 ? "Showing the first 100 traces. Paste a digest for another trace." : rows.length ? "Choose a trace, then attach it to this report." : "No retained traces yet. Record or import a trace before attaching evidence.");
+			} catch (reason) {
+				if (!cancelled) setTraceCatalogStatus(reportSurfaceError(reason));
+			} finally { window.clearTimeout(timer); }
+		})();
+		return () => { cancelled = true; window.clearTimeout(timer); };
+	}, [tracePickerOpen]);
 	const [traceLabel, setTraceLabel] = useState("");
 	const [selectedTraceIndex, setSelectedTraceIndex] = useState(0);
 	const [visibilityRequests, setVisibilityRequests] = useState<ReportVisibilityRequest[]>([]);
@@ -245,7 +284,7 @@ export function ReportsPage({ onBack, initialReportId }: Props) {
 	const saveInFlight = useRef(false);
 
 	async function load(reportId?: string | null, background = false) {
-		if (background && (loadInFlight.current || saveInFlight.current)) return;
+		if (background && (loadInFlight.current || saveInFlight.current || traceAttachInFlight.current)) return;
 		const generation = ++loadGeneration.current;
 		loadInFlight.current = true;
 		const bridge = bridges.reports;
@@ -372,7 +411,7 @@ export function ReportsPage({ onBack, initialReportId }: Props) {
 	}
 
 	async function saveDraft() {
-		if (!selected || !revision || saveInFlight.current) return null;
+		if (!selected || !revision || saveInFlight.current || traceAttachInFlight.current) return null;
 		saveInFlight.current = true;
 		const blocks: ReportBlock[] = revision.blocks.map((block) => {
 			if (block.anchor === "findings") {
@@ -625,10 +664,16 @@ export function ReportsPage({ onBack, initialReportId }: Props) {
 	}
 
 	async function attachTrace() {
-		if (!selected || !revision || !traceDigest.trim()) return;
+		if (!selected || !revision || sealedBundle || dirty || !traceDigest.trim() || traceAttachInFlight.current || saveInFlight.current) return;
+		traceAttachInFlight.current = true;
+		const generation = loadGeneration.current;
+		const isCurrent = () => generation === loadGeneration.current && activeDraft.current.reportId === selected.id;
 		setSaveStatus("saving");
 		try {
+			if (!bridges.inventory || !bridges.reports) throw new Error("Trace attachment requires Synth Desktop.");
 			const resolved = await bridges.inventory!.resolveTraceProjection(traceDigest.trim(), "rollout-inspector");
+			if (!isCurrent()) return;
+			if (activeDraft.current.dirty) throw new Error("Save your draft changes before attaching trace evidence.");
 			const existing = revision.blocks.find((block) => block.kind === "report.trace-v5.v1");
 			const traces = traceEntries(existing);
 			const entry: ReportTraceEntry = {
@@ -654,15 +699,20 @@ export function ReportsPage({ onBack, initialReportId }: Props) {
 			const blocks = existing
 				? revision.blocks.map((block) => (block.kind === "report.trace-v5.v1" ? traceBlock : block))
 				: [...revision.blocks, traceBlock];
-			await bridges.reports!.update(selected.id, { expectedRevision: revision.revision, blocks });
+			const saved = await bridges.reports!.update(selected.id, { expectedRevision: revision.revision, blocks });
+			const pending = readReportDraft(selected.id);
+			if (pending) writeReportDraft(selected.id, { ...pending, base: { ...revision, revision: saved.currentRevision, blocks } });
+			if (!isCurrent()) return;
 			setTraceDigest("");
 			setTraceLabel("");
 			setSelectedTraceIndex(Math.max(nextTraces.length - 1, 0));
 			await load(selected.id);
 		} catch (reason) {
-			setSaveStatus("error");
-			setError(reportSurfaceError(reason));
-		}
+			if (isCurrent()) {
+				setSaveStatus("error");
+				setError(reportSurfaceError(reason));
+			}
+		} finally { traceAttachInFlight.current = false; }
 	}
 
 	async function addComment() {
@@ -807,9 +857,9 @@ export function ReportsPage({ onBack, initialReportId }: Props) {
 								/>
 								<p>{selected.status} · {readerRevision.schemaVersion} · rev {readerRevision.revision}</p>
 								<p className="reports-provenance" data-testid="reports-save-status" role="status">
-									{saveStatus === "saving" ? "Saving" : saveStatus === "error" ? "Error" : `Saved · rev ${readerRevision.revision}`}
+									{saveStatus === "saving" ? "Saving" : saveStatus === "error" ? "Error" : dirty ? "Unsaved changes" : `Saved · rev ${readerRevision.revision}`}
 								</p>
-								<p className="reports-provenance">Edits save automatically.</p>
+								<p className="reports-provenance">Draft edits are retained in this session. Use Save draft to commit them.</p>
 							</div>
 							<div className="reports-actions">
 								<button type="button" onClick={() => void saveDraft()} disabled={Boolean(sealedBundle) || !dirty || saveStatus === "saving"}>Save draft</button>
@@ -1010,9 +1060,20 @@ export function ReportsPage({ onBack, initialReportId }: Props) {
 						<section id="traces" className="reports-section" data-testid="reports-traces">
 							<h2>{readerRevision.blocks.find((block) => block.kind === "report.trace-v5.v1")?.title || "Trace evidence"}</h2>
 							<div className="reports-inline-form">
-								<input value={traceDigest} onChange={(event) => setTraceDigest(event.target.value)} placeholder="Trace digest (sha256:…)" disabled={Boolean(sealedBundle)} />
-								<input value={traceLabel} onChange={(event) => setTraceLabel(event.target.value)} placeholder="Label (OSS-20B · seed 0)" disabled={Boolean(sealedBundle)} />
-								<button type="button" data-testid="reports-attach-trace" onClick={() => void attachTrace()} disabled={Boolean(sealedBundle)}>Attach Trace V5</button>
+								<button type="button" aria-expanded={tracePickerOpen} aria-controls={tracePickerId} onClick={() => setTracePickerOpen(!tracePickerOpen)} disabled={Boolean(sealedBundle)}>Choose retained trace</button>
+								{tracePickerOpen ? <section id={tracePickerId} aria-label="Retained trace picker">
+									<p role="status">{traceCatalogStatus}</p>
+									<select aria-label="Available retained traces" disabled={Boolean(sealedBundle) || saveStatus === "saving"} value={traceCatalog.some(row => row.digest === traceDigest) ? traceDigest : ""} onChange={event => {
+										const row = traceCatalog.find(row => row.digest === event.target.value);
+										if (row) { setTraceDigest(row.digest); setTraceLabel(row.title); }
+									}}>
+										<option value="">Select a trace</option>
+										{traceCatalog.map(row => <option key={row.digest} value={row.digest}>{row.title || "Untitled trace"} · {row.createdAt} · {row.digest.slice(-8)}</option>)}
+									</select>
+								</section> : null}
+								<input value={traceDigest} onChange={(event) => setTraceDigest(event.target.value)} aria-label="Retained trace digest" placeholder="Trace digest (sha256:…)" disabled={Boolean(sealedBundle) || saveStatus === "saving"} />
+								<input value={traceLabel} onChange={(event) => setTraceLabel(event.target.value)} aria-label="Trace evidence label" placeholder="Describe this trace" disabled={Boolean(sealedBundle) || saveStatus === "saving"} />
+								<button type="button" data-testid="reports-attach-trace" onClick={() => void attachTrace()} disabled={Boolean(sealedBundle) || dirty || !traceDigest.trim() || saveStatus === "saving"} title={dirty ? "Save your draft changes before attaching trace evidence" : undefined}>Attach trace</button>
 							</div>
 							{(() => {
 								const traces = traceEntries(readerRevision.blocks.find((block) => block.kind === "report.trace-v5.v1"));
@@ -1035,7 +1096,7 @@ export function ReportsPage({ onBack, initialReportId }: Props) {
 											</label>
 										) : null}
 										{selected?.projection ? (
-											<TraceInspector title={selected.label} projection={selected.projection as never} />
+											<ReportTracePreview key={`${selectedId}:${selected.traceDigest || selected.traceId}`} entry={selected} />
 										) : (
 											<p className="reports-missing">{MISSING}</p>
 										)}
@@ -1085,7 +1146,7 @@ export function ReportsPage({ onBack, initialReportId }: Props) {
 							<p className="reports-missing">Comments overlay the sealed revision and do not change its digest.</p>
 							<div className="reports-inline-form">
 								<input value={commentBody} onChange={(event) => setCommentBody(event.target.value)} placeholder="Add a private review comment" />
-								<button type="button" onClick={() => void addComment()}>Add comment</button>
+								<button type="button" onClick={() => void addComment()} disabled={!commentBody.trim()}>Add comment</button>
 							</div>
 							<ol className="reports-log">
 								{comments.map((comment) => (
@@ -1113,7 +1174,7 @@ export function ReportsPage({ onBack, initialReportId }: Props) {
 							</header>
 							<div className="reports-inline-form">
 								<input value={experimentTitle} onChange={(event) => setExperimentTitle(event.target.value)} placeholder="Experiment title or exp_…" disabled={Boolean(sealedBundle)} />
-								<button type="button" onClick={() => void addExperiment()} disabled={Boolean(sealedBundle)}>Add record</button>
+								<button type="button" onClick={() => void addExperiment()} disabled={Boolean(sealedBundle) || !experimentTitle.trim()}>Add record</button>
 							</div>
 							{appendixView === "ledger" ? (
 								<table className="reports-table">
@@ -1184,7 +1245,7 @@ export function ReportsPage({ onBack, initialReportId }: Props) {
 							<div className="reports-inline-form">
 								<input value={logTitle} onChange={(event) => setLogTitle(event.target.value)} placeholder="Log title" disabled={Boolean(sealedBundle)} />
 								<input value={logBody} onChange={(event) => setLogBody(event.target.value)} placeholder="What happened" disabled={Boolean(sealedBundle)} />
-								<button type="button" onClick={() => void appendLog()} disabled={Boolean(sealedBundle)}>Append entry</button>
+								<button type="button" onClick={() => void appendLog()} disabled={Boolean(sealedBundle) || !logTitle.trim() || !logBody.trim()}>Append entry</button>
 							</div>
 							<ol className="reports-log">
 								{(logView === "decisions" ? log.filter((entry) => decisionKinds.has(entry.entryKind)) : log).map((entry) => (
diff --git a/apps/synth_desktop/src/renderer/src/styles/app.css b/apps/synth_desktop/src/renderer/src/styles/app.css
index 47a70c40..d4a9745e 100644
--- a/apps/synth_desktop/src/renderer/src/styles/app.css
+++ b/apps/synth_desktop/src/renderer/src/styles/app.css
@@ -10303,6 +10303,8 @@ html.visual-expanded .sidebar {
 .reports-field,
 .reports-section {
 	display: grid;
+	grid-template-columns: minmax(0, 1fr);
+	min-width: 0;
 	gap: 8px;
 	margin-top: 16px;
 }
@@ -10364,11 +10366,24 @@ html.visual-expanded .sidebar {
 }
 .reports-trace-inspector {
 	display: grid;
+	grid-template-columns: minmax(0, 1fr);
+	min-width: 0;
 	gap: 12px;
 	padding: 12px;
 	border: 1px solid var(--color-border);
 	background: var(--color-surface);
 }
+.reports-trace-inspector > *,
+.reports-inline-form > * {
+	min-width: 0;
+	max-width: 100%;
+}
+.reports-layout .visuals-card-main {
+	display: grid;
+	gap: 4px;
+	text-align: left;
+	overflow-wrap: anywhere;
+}
 .reports-lineage {
 	display: grid;
 	gap: 10px;
diff --git a/packages/workshop-visuals/components/agent_trace.v1/AgentTraceInspector.tsx b/packages/workshop-visuals/components/agent_trace.v1/AgentTraceInspector.tsx
index 46608a5b..2d8e9a49 100644
--- a/packages/workshop-visuals/components/agent_trace.v1/AgentTraceInspector.tsx
+++ b/packages/workshop-visuals/components/agent_trace.v1/AgentTraceInspector.tsx
@@ -57,7 +57,7 @@ export function AgentTraceInspector({ projection, actorId, onActorChange, cursor
   const [view, setView] = useVisualState<string>(`${scope}.view`,initialView);
   const previousFilter=useRef(`${actor}:${section}:${query}`);
   useEffect(() => { const filter=`${actor}:${section}:${query}`;if(filter!==previousFilter.current){previousFilter.current=filter;setLimit(60);} }, [actor, section, query]);
-  useEffect(() => { if (selection) { setSection('rollout'); setQuery(''); setPin(''); } }, [selection?.itemId, selection?.revision]);
+  useEffect(() => { if (selection) { setSection('events'); setQuery(''); changeActor('all'); } }, [selection?.itemId, selection?.revision]);
   const filtered = useMemo(() => items.filter(item => {
     const family = eventFamily(item);
     const inSection = section === 'events' || (section === 'messages' ? family === 'message' : section === 'evidence' ? family === 'reward' || family === 'annotation' : family !== 'annotation');
@@ -92,11 +92,12 @@ export function AgentTraceInspector({ projection, actorId, onActorChange, cursor
     </div>
     <div className="ati-toolbar" aria-label="Agent roster">{agents.map(lane => <button key={lane.lane_id} style={{borderLeft:`4px solid ${lane.color ?? '#547c92'}`}} aria-pressed={actor === lane.actor_id} onClick={() => changeActor(lane.actor_id!)}>{agentName(lane.actor_id!)}</button>)}</div>
     <div className="ati-toolbar"><label>Agent <select aria-label="Trace agent" value={actor} onChange={e => { changeActor(e.target.value); }}><option value="all">All agents</option>{lanes.map(l => <option key={l.lane_id} value={l.actor_id ?? l.lane_id}>{l.display_name ?? l.lane_id} {l.role ? `· ${l.role}` : ''}</option>)}</select></label>
-      <label>Compare <select aria-label="Compare agent" value={pin} onChange={e => setPin(e.target.value)}><option value="">None</option>{lanes.filter(l => l.actor_id !== actor).map(l => <option key={l.lane_id} value={l.actor_id ?? l.lane_id}>{l.display_name ?? l.lane_id}</option>)}</select></label>
+      <label>Compare <select aria-label="Compare agent" disabled={actor === 'all'} title={actor === 'all' ? 'Select one agent before comparing' : 'Compare with another agent'} value={actor === 'all' ? '' : pin} onChange={e => setPin(e.target.value)}><option value="">None</option>{lanes.filter(l => l.actor_id !== actor).map(l => <option key={l.lane_id} value={l.actor_id ?? l.lane_id}>{l.display_name ?? l.lane_id}</option>)}</select></label>
+      {actor === 'all' ? <span className="ati-muted">Select one agent before comparing.</span> : null}
       <input aria-label="Search agent trace" placeholder="Search messages, tools, rewards…" value={query} onChange={e => setQuery(e.target.value)}/></div>
     <p className="ati-muted">{items.length} recorded items · {projection.state ?? 'Unknown state'}{cursorMs != null ? ` · replay ${time(cursorMs)}` : ''}. History retained while scrubbing.</p>
     {projection.losses?.length ? <details><summary>Capture coverage</summary>{projection.losses.map(loss => <p key={loss}>{loss}</p>)}</details> : null}
-    <div className={`ati-columns ${pin ? 'ati-compare' : ''}`}><div>{laneContent(actor)}</div>{pin && <div><strong>{lanes.find(l => l.actor_id === pin)?.display_name}</strong>{laneContent(pin)}</div>}</div>
+    <div className={`ati-columns ${pin && actor !== 'all' ? 'ati-compare' : ''}`}><div>{laneContent(actor)}</div>{pin && actor !== 'all' && <div><strong>{lanes.find(l => l.actor_id === pin)?.display_name}</strong>{laneContent(pin)}</div>}</div>
   </section>;
 }
 
diff --git a/packages/workshop-visuals/components/agent_trace.v1/TraceViews.tsx b/packages/workshop-visuals/components/agent_trace.v1/TraceViews.tsx
index 7aca7b5e..b5f93256 100644
--- a/packages/workshop-visuals/components/agent_trace.v1/TraceViews.tsx
+++ b/packages/workshop-visuals/components/agent_trace.v1/TraceViews.tsx
@@ -116,7 +116,7 @@ export function GeneralTraceView({ projection, items = projection.items ?? [], v
   const attached = (item: TraceItem) => notes.filter(note => annotationMatches(note, item, projection));
   const active = (item: TraceItem) => attached(item).filter(note => !superseded.has(note.id));
   const focused = !full && extension?.filterItems ? extension.filterItems(items) : items;
-  const rows = items.filter(item => full || focused.includes(item) || active(item).length > 0 || item.item_id === selectedId).filter(item => item.kind !== 'evidence.annotation' &&
+  const rows = items.filter(item => full || focused.includes(item) || active(item).length > 0 || item.item_id === selectedId).filter(item => (item.kind !== 'evidence.annotation' || item.item_id === selectedId) &&
     (full || !/^(eval\.|media\.|policy\.finished)/.test(item.kind) || active(item).length > 0) && (!onlyAnnotated || active(item).length > 0));
   const base = extension?.base ?? view;
   const groups = base === 'general' || full ? rows.map(item => ({ id: item.item_id, items: [item] })) : extension?.groupItems?.(rows) ?? decisionGroups(rows);
@@ -129,7 +129,7 @@ export function GeneralTraceView({ projection, items = projection.items ?? [], v
     if (row) setSelectedId(row.item.item_id);
   }, [cursorMs, projection.trace_id]);
   useEffect(() => {
-    if (selection && items.some(item => item.item_id === selection.itemId)) { setSelectedId(selection.itemId); setFollow(true); }
+    if (selection && items.some(item => item.item_id === selection.itemId)) { setSelectedId(selection.itemId); setFollow(true); setFull(true); setOnlyAnnotated(false); }
   }, [selection?.itemId, selection?.revision]);
   useEffect(() => {
     if (!selectedId || !follow) return;
@@ -156,6 +156,8 @@ export function GeneralTraceView({ projection, items = projection.items ?? [], v
   }
   function jump(direction: number) { const index = markers.findIndex(item => item.item_id === selectedId); const next = index < 0 ? (direction > 0 ? 0 : markers.length - 1) : index + direction; if (markers[next]) choose(markers[next]); }
   const Content = base === 'codex' ? CodexContent : base === 'react' ? ReActContent : GeneralContent;
+  const extensionContext = extension?.renderContext?.(selected);
+  const showNotes = notes.length > 0 || Boolean(context) || Boolean(extensionContext);
   return <section className="atv" data-trace-view={extension?.id ?? base}>
     <style>{`.atv{font:13px/1.5 system-ui;min-width:0}.atv button{font:inherit;cursor:pointer}.atv-controls,.atv-header{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.atv-controls{margin:8px 0}.atv-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,28%);gap:16px}.atv-transcript{max-height:650px;overflow:auto}.atv-turn{border-top:1px solid #a0a0a055;padding:10px 0}.atv-item{padding:6px 8px;border-left:3px solid transparent;overflow-wrap:anywhere}.atv-item[aria-current=true]{border-color:#327f69;background:#327f690c}.atv-header{justify-content:space-between;color:var(--sv-text-muted,#667468)}.atv-text{font:12px/1.6 ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere;max-height:240px;overflow:auto;margin:8px 0}.atv-note{padding:10px;margin:8px 0;border:1px solid #ba963c77;border-radius:6px}.atv-note p{margin:5px 0}.atv-item p{margin:5px 0}.atv-item>button{padding:3px 6px;font-size:11px}.atv-item details{margin-top:4px}.atv-item a{font-size:11px}.atv-item .atv-header{font-size:11px}.atv-note small{opacity:.75}.atv-notes{border-left:1px solid #a0a0a055;padding-left:12px;max-height:650px;overflow:auto}.atv details{margin-top:8px}.atv-timeline{display:flex;gap:4px;overflow:auto;padding:8px 0}.atv-timeline button{flex-shrink:0;font-size:11px}.atv-timeline button[aria-current=true]{background:#327f69;color:white}.atv h4{margin:0 0 8px}@container(max-width:650px){.atv-layout{grid-template-columns:1fr}.atv-notes{border-left:0;padding-left:0}}`}</style>
     <div className="atv-controls">
@@ -168,7 +170,7 @@ export function GeneralTraceView({ projection, items = projection.items ?? [], v
       <small>{rows.length} items · {notes.filter(note => !superseded.has(note.id)).length} current annotations</small>
     </div>
     <nav className="atv-timeline" aria-label="Trace event timeline" onScroll={e => scrubTimeline(e.currentTarget)}>{markers.map(item => <button key={item.item_id} data-marker-id={item.item_id} style={{borderTop:`3px solid ${projection.lanes?.find(lane => lane.actor_id === item.actor_id)?.color ?? '#547c92'}`}} type="button" aria-current={selectedId === item.item_id} title={item.kind} onClick={() => { markerClickUntil.current = performance.now() + 200; choose(item); }}>{projection.lanes?.find(lane => lane.actor_id === item.actor_id)?.display_name ?? item.detail?.native_actor_id ?? item.actor_id ?? 'Shared'} · {elapsed(eventTime(item, projection.items ?? [])) || 'untimed'} {item.detail?.result?.success === false ? '✕ ' : ''}{eventLabel(item)}{active(item).length ? ` · ${active(item).length} notes` : ''}</button>)}</nav>
-    <div className="atv-layout">
+    <div className="atv-layout" style={!showNotes ? { gridTemplateColumns: 'minmax(0,1fr)' } : undefined}>
       <div className="atv-transcript" ref={transcript}>
         {!groups.length && <p>No matching trace items.</p>}
         {groups.slice(0, limit).map((group, index) => <section className="atv-turn" key={group.id}>
@@ -185,16 +187,16 @@ export function GeneralTraceView({ projection, items = projection.items ?? [], v
         </section>)}
         {groups.length > limit && <button type="button" onClick={() => setLimit(n => n + 60)}>Show next 60</button>}
       </div>
-      <aside className="atv-notes" aria-label="Trace annotations">
+      {showNotes ? <aside className="atv-notes" aria-label="Trace annotations">
         {context}
-        {extension?.renderContext?.(selected)}
+        {extensionContext}
         <h4>{selected ? `Annotations · ${selected.title ?? selected.kind}` : 'Annotations'}</h4>
         {!selected && <p>Select a trace item or annotation marker to inspect its notes.</p>}
         {selected && attached(selected).length === 0 && <p>No annotations on this item.</p>}
         {selected && attached(selected).filter(note => !superseded.has(note.id)).map(note => <AnnotationNote key={note.id} annotation={note} superseded={false} onOpen={onOpenAnnotation}/>)}
         {selected && attached(selected).some(note => superseded.has(note.id)) && <details><summary>Superseded annotation history</summary>{attached(selected).filter(note => superseded.has(note.id)).map(note => <AnnotationNote key={note.id} annotation={note} superseded={true}/>)}</details>}
         {unresolved.length > 0 && <details><summary>{unresolved.length} unresolved annotation targets</summary><p>These targets are absent from this projection or refer to a different trace version.</p>{unresolved.map(note => <AnnotationNote key={note.id} annotation={note} superseded={superseded.has(note.id)} onOpen={onOpenAnnotation}/>)}</details>}
-      </aside>
+      </aside> : null}
     </div>
   </section>;
 }