Skip to content

fix(desktop): publish consolidated Reports and trace UX source #114

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JoshuaPurtell merged 1 commit into from
Sep 10, 2026
Merged

fix(desktop): publish consolidated Reports and trace UX source #114

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions PUBLIC_EXPORT_MANIFEST.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -7690,7 +7690,7 @@
"policySha256": "f5ef8fbb4560ee9e401c26c94da6f6189732be76291915027bd7ee3f5f5684dd",
"schema": "workshop.public-export-manifest.v1",
"source": {
"commit": "b39c7f686cb51522179a3c938d1ab7756026c89c",
"tree": "bb76f53df76aa90e60f8565b52d6e1700497b8f5"
"commit": "7ef1b6fb69770e997e8e62c6d9cacffbd26d06b5",
"tree": "76ea0cabbe5a32ded58158131ae1c1e3e5a6e4b8"
}
}
95 changes: 78 additions & 17 deletions apps/synth_desktop/src/renderer/src/components/ReportsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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("");
Expand Down Expand Up @@ -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[]>([]);
Expand All @@ -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;
Expand Down Expand Up @@ -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") {
Expand Down Expand Up @@ -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 = {
Expand All @@ -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() {
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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"));
Expand All @@ -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>
)}
Expand Down Expand Up @@ -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) => (
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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) => (
Expand Down
15 changes: 15 additions & 0 deletions apps/synth_desktop/src/renderer/src/styles/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
Expand Down
7 changes: 4 additions & 3 deletions packages/workshop-visuals/components/agent_trace.v1/AgentTraceInspector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -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>;
}

Expand Down
Loading
Loading