From f95b4c5b6ecbf3f1729f360ad182a19c37430172 Mon Sep 17 00:00:00 2001
From: forthfate <forthfate@naver.com>
Date: Mon, 14 Sep 2026 18:12:30 +0900
Subject: [PATCH 01/14] feat: title-case workflow phase labels

---
 frontend/src/features/evaluations/page.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/features/evaluations/page.tsx b/frontend/src/features/evaluations/page.tsx
index 0ebe158..62145b7 100644
--- a/frontend/src/features/evaluations/page.tsx
+++ b/frontend/src/features/evaluations/page.tsx
@@ -44,6 +44,8 @@ const phases = [
   "after_each",
   "after_all",
 ] as const;
+const phaseLabel = (phase: string) =>
+  phase.replaceAll("_", " ").replace(/\b\w/g, (letter) => letter.toUpperCase());
 const time = (locale: Locale, value?: string) =>
   value
     ? new Intl.DateTimeFormat(intlLocales[locale], {
@@ -287,7 +289,9 @@ export function EvaluationsPage({
     if (run.status === "succeeded") return l.complete;
     if (run.status === "cancelled") return l.cancelled;
     if (run.status === "failed") return l.failed;
-    return run.current_phase === "waiting" ? l.waiting : (run.current_phase ?? "—");
+    return run.current_phase === "waiting"
+      ? l.waiting
+      : (run.current_phase ? phaseLabel(run.current_phase) : "—");
   };
   const builds = useMemo(
     () => [
@@ -888,7 +892,7 @@ export function EvaluationsPage({
                 </option>
                 {availablePhases.map((phase) => (
                   <option key={phase} value={phase}>
-                    {phase}
+                    {phaseLabel(phase)}
                   </option>
                 ))}
                 <option value="waiting">{l.waiting}</option>
@@ -1036,7 +1040,7 @@ export function EvaluationsPage({
                     className={phaseTab === phase ? "active" : ""}
                     onClick={() => setPhaseTab(phase)}
                   >
-                    {phase}
+                    {phaseLabel(phase)}
                   </button>
                 ))}
               </div>

From 833c29d8b98f85c8800bd64478155fb450d0f074 Mon Sep 17 00:00:00 2001
From: forthfate <forthfate@naver.com>
Date: Mon, 14 Sep 2026 18:31:20 +0900
Subject: [PATCH 02/14] feat: refine run detail observability panels

---
 frontend/src/features/evaluations/page.tsx    |  5 ++-
 .../evaluations/run-detail-log-panels.tsx     |  7 ++--
 .../evaluations/run-detail-result-panel.tsx   |  4 +--
 .../run-detail-supervisor-panel.tsx           | 34 +++----------------
 .../evaluations/run-detail-telemetry-tree.tsx | 28 +++++++++++++++
 frontend/src/theme-overrides.css              |  5 ++-
 6 files changed, 46 insertions(+), 37 deletions(-)
 create mode 100644 frontend/src/features/evaluations/run-detail-telemetry-tree.tsx

diff --git a/frontend/src/features/evaluations/page.tsx b/frontend/src/features/evaluations/page.tsx
index 62145b7..2a71533 100644
--- a/frontend/src/features/evaluations/page.tsx
+++ b/frontend/src/features/evaluations/page.tsx
@@ -1061,6 +1061,10 @@ export function EvaluationsPage({
                 empty={l.noLogs}
                 orbitLogs={l.orbitLogs}
                 targetLogs={l.targetLogs}
+                telemetry={telemetry}
+                openTelemetryTrace={l.openTelemetryTrace}
+                loadingOpenTelemetryTrace={l.loadingOpenTelemetryTrace}
+                noOpenTelemetrySpans={l.noOpenTelemetrySpans}
               />
             </RunDetailTabPanel>
           )}
@@ -1106,7 +1110,6 @@ export function EvaluationsPage({
               <SupervisorPanel
                 record={translateSupervisorRecord(supervision)}
                 l={l}
-                telemetry={telemetry}
                 renderLineOutput={(value) => <LineNumberedOutput value={value} />}
               />
             </RunDetailTabPanel>
diff --git a/frontend/src/features/evaluations/run-detail-log-panels.tsx b/frontend/src/features/evaluations/run-detail-log-panels.tsx
index 7758100..3a6d9f1 100644
--- a/frontend/src/features/evaluations/run-detail-log-panels.tsx
+++ b/frontend/src/features/evaluations/run-detail-log-panels.tsx
@@ -1,5 +1,6 @@
-import type { RunStepResult } from "../../domain/models";
+import type { RunStepResult, RunTelemetry } from "../../domain/models";
 import { intlLocales, type Locale } from "../../locales";
+import { TelemetryTree } from "./run-detail-telemetry-tree";
 
 const time = (locale: Locale, value?: string) => value ? new Intl.DateTimeFormat(intlLocales[locale], { dateStyle: "medium", timeStyle: "medium" }).format(new Date(value)) : "—";
 const stepLogLines = (step: RunStepResult) => step.log_lines?.length ? step.log_lines.map(({ timestamp, value }) => ({ value, timestamp })) : (step.output ?? step.error ?? "—").split("\n").map((value) => ({ value, timestamp: step.ended_at ?? step.started_at }));
@@ -18,11 +19,11 @@ export function WorkflowLogPanel({ steps, locale, empty }: { steps: RunStepResul
   return <div className="console-output workflow-log-output">{visibleSteps.length ? visibleSteps.map((step, index) => <section key={`${step.step_id}-${index}`}>{step.result && <BrowserEvidence result={step.result} />}{(step.log_lines?.length || step.output || step.error) && <TimestampedLogOutput locale={locale} lines={stepLogLines(step)} />}</section>) : <p className="hint">{empty}</p>}</div>;
 }
 
-export function CombinedLogPanel({ steps, locale, empty, orbitLogs, targetLogs }: { steps: RunStepResult[]; locale: Locale; empty: string; orbitLogs: string; targetLogs: string }) {
+export function CombinedLogPanel({ steps, locale, empty, orbitLogs, targetLogs, telemetry, openTelemetryTrace, loadingOpenTelemetryTrace, noOpenTelemetrySpans }: { steps: RunStepResult[]; locale: Locale; empty: string; orbitLogs: string; targetLogs: string; telemetry?: RunTelemetry; openTelemetryTrace?: string; loadingOpenTelemetryTrace?: string; noOpenTelemetrySpans?: string }) {
   const logSteps = steps.filter((step) => step.output || step.error);
   const targetLines = steps.flatMap((step) => step.target_logs ?? []).map((entry) => ({
     timestamp: entry.timestamp,
     value: `[${entry.level ?? "info"}]${entry.source ? ` ${entry.source}` : ""} ${entry.message}`,
   }));
-  return <div className="console-output"><section><h3>{orbitLogs}</h3>{logSteps.length ? <TimestampedLogOutput lines={logSteps.flatMap(stepLogLines)} locale={locale} /> : <p className="hint">{empty}</p>}</section><section><h3>{targetLogs}</h3>{targetLines.length ? <TimestampedLogOutput lines={targetLines} locale={locale} /> : <p className="hint">{empty}</p>}</section></div>;
+  return <div className="console-output combined-log-output"><section><h3>{orbitLogs}</h3>{logSteps.length ? <TimestampedLogOutput lines={logSteps.flatMap(stepLogLines)} locale={locale} /> : <p className="hint">{empty}</p>}</section><section><h3>{targetLogs}</h3>{targetLines.length ? <TimestampedLogOutput lines={targetLines} locale={locale} /> : <p className="hint">{empty}</p>}</section><section><h3>{openTelemetryTrace}</h3><TelemetryTree telemetry={telemetry} loading={loadingOpenTelemetryTrace} empty={noOpenTelemetrySpans} /></section></div>;
 }
diff --git a/frontend/src/features/evaluations/run-detail-result-panel.tsx b/frontend/src/features/evaluations/run-detail-result-panel.tsx
index 41596c2..7fd8695 100644
--- a/frontend/src/features/evaluations/run-detail-result-panel.tsx
+++ b/frontend/src/features/evaluations/run-detail-result-panel.tsx
@@ -13,7 +13,7 @@ type BehaviorTrace = {
 const time = (locale: Locale, value?: string) => value ? new Intl.DateTimeFormat(intlLocales[locale], { dateStyle: "medium", timeStyle: "medium" }).format(new Date(value)) : "—";
 
 function ResultList({ items, kind, locale, empty }: { items: RecordItem[]; kind: "improvement" | "issue"; locale: Locale; empty: string }) {
-  return <div className="result-items">{items.length ? items.map((item, index) => {
+  return <div className="result-items result-items--scrollable">{items.length ? items.map((item, index) => {
     const status = String(item.status ?? "—"), severity = String(item.severity ?? "—"), reportedAt = typeof item.reported_at === "string" ? item.reported_at : undefined;
     return <article className="result-row" key={index}><time className="result-row__time">{time(locale, reportedAt)}</time><div className="result-row__body"><strong>{String(item.title ?? "—")}</strong><p>{String(kind === "improvement" ? (item.rationale ?? "—") : (item.evidence ?? "—"))}</p></div><div className="result-row__metrics"><span><small>Iteration</small><b>#{String(item.__iteration ?? "—")}</b></span>{kind === "improvement" ? <><span><small>Status</small><b className={`decision decision--${status}`}>{status}</b></span><span><small>Score</small><b>{String(item.effect_score ?? item.score ?? "—")}</b></span><span><small>Attempted</small><b>{item.attempted === true || status === "adopted" ? "Yes" : "No"}</b></span></> : <><span><small>Severity</small><b className={`decision decision--${severity}`}>{severity}</b></span><span><small>Status</small><b className={`decision decision--${status}`}>{status}</b></span></>}</div></article>;
   }) : <p className="hint result-empty">{empty}</p>}</div>;
@@ -49,5 +49,5 @@ export function EvaluationResultPanel({ error, records, summaries, improvements,
     ];
     return fields.filter((field): field is [string | undefined, string] => Boolean(field[1]));
   };
-  return <>{error}{records.length ? <>{summaries.length > 0 && <section className="result-behavior-summaries"><h3>{l.observedBehavior}</h3><div className="result-items">{summaries.map((item) => <article className="result-row result-behavior-trace" key={item.iteration}><time className="result-row__time">{time(locale, item.recordedAt)}</time><div className="result-row__body">{traceFields(item).length ? <><dl>{traceFields(item).map(([label, value]) => <div key={label}><dt>{label}</dt><dd>{value}</dd></div>)}</dl>{evidenceIteration === item.iteration && item.trace?.evidence && <section className="result-trace-evidence"><strong>{l.traceEvidence}</strong><p>{item.trace.evidence}</p></section>}</> : <p>{item.summary}</p>}</div><div className="result-row__metrics"><span><small>Iteration</small><b>#{item.iteration}</b></span>{item.trace?.evidence && <button className="ghost icon-button" type="button" aria-label={evidenceIteration === item.iteration ? l.hideEvidence : l.viewEvidence} title={evidenceIteration === item.iteration ? l.hideEvidence : l.viewEvidence} onClick={() => setEvidenceIteration((current) => current === item.iteration ? null : item.iteration)}><FileSearch size={16} /></button>}</div></article>)}</div></section>}<section><h3>{l.proposals}</h3><ResultList locale={locale} kind="improvement" items={improvements} empty={l.noResults ?? ""} /></section><section><h3>{l.issues}</h3><ResultList locale={locale} kind="issue" items={issues} empty={l.noResults ?? ""} /></section></> : <p className="hint result-empty">{l.noMatchingResults}</p>}</>;
+  return <>{error}{records.length ? <>{summaries.length > 0 && <section className="result-behavior-summaries"><h3>{l.observedBehavior}</h3><div className="result-items result-items--scrollable">{summaries.map((item) => <article className="result-row result-behavior-trace" key={item.iteration}><time className="result-row__time">{time(locale, item.recordedAt)}</time><div className="result-row__body">{traceFields(item).length ? <><dl>{traceFields(item).map(([label, value]) => <div key={label}><dt>{label}</dt><dd>{value}</dd></div>)}</dl>{evidenceIteration === item.iteration && item.trace?.evidence && <section className="result-trace-evidence"><strong>{l.traceEvidence}</strong><p>{item.trace.evidence}</p></section>}</> : <p>{item.summary}</p>}</div><div className="result-row__metrics"><span><small>Iteration</small><b>#{item.iteration}</b></span>{item.trace?.evidence && <button className="ghost icon-button" type="button" aria-label={evidenceIteration === item.iteration ? l.hideEvidence : l.viewEvidence} title={evidenceIteration === item.iteration ? l.hideEvidence : l.viewEvidence} onClick={() => setEvidenceIteration((current) => current === item.iteration ? null : item.iteration)}><FileSearch size={16} /></button>}</div></article>)}</div></section>}<section><h3>{l.proposals}</h3><ResultList locale={locale} kind="improvement" items={improvements} empty={l.noResults ?? ""} /></section><section><h3>{l.issues}</h3><ResultList locale={locale} kind="issue" items={issues} empty={l.noResults ?? ""} /></section></> : <p className="hint result-empty">{l.noMatchingResults}</p>}</>;
 }
diff --git a/frontend/src/features/evaluations/run-detail-supervisor-panel.tsx b/frontend/src/features/evaluations/run-detail-supervisor-panel.tsx
index 6ec4864..79b2222 100644
--- a/frontend/src/features/evaluations/run-detail-supervisor-panel.tsx
+++ b/frontend/src/features/evaluations/run-detail-supervisor-panel.tsx
@@ -1,36 +1,10 @@
-import { useMemo, useState, type ReactNode } from "react";
-import type { RunTelemetry, SupervisorRecord, TelemetrySpan } from "../../domain/models";
+import type { ReactNode } from "react";
+import type { SupervisorRecord } from "../../domain/models";
 import { StatusBadge } from "../../components/ui/status-badge";
 
 type Messages = Record<string, string | undefined>;
 
-function telemetryValue(value: unknown) {
-  return typeof value === "string" ? value : JSON.stringify(value);
-}
-
-function duration(span: TelemetrySpan) {
-  if (!span.startTime || !span.endTime || span.endTime < span.startTime) return undefined;
-  return `${((span.endTime - span.startTime) / 1_000_000).toFixed(1)} ms`;
-}
-
-function TelemetryTree({ telemetry, l }: { telemetry?: RunTelemetry; l: Messages }) {
-  const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
-  const tree = useMemo(() => {
-    const spans = telemetry?.spans ?? [], children = new Map<string, TelemetrySpan[]>(), known = new Set(spans.map((span) => span.spanId));
-    for (const span of spans) if (span.parentSpanId && known.has(span.parentSpanId)) children.set(span.parentSpanId, [...(children.get(span.parentSpanId) ?? []), span]);
-    return { roots: spans.filter((span) => !span.parentSpanId || !known.has(span.parentSpanId)), children };
-  }, [telemetry]);
-  if (!telemetry) return <p className="hint">{l.loadingOpenTelemetryTrace}</p>;
-  if (!tree.roots.length) return <p className="hint">{l.noOpenTelemetrySpans}</p>;
-  const render = (span: TelemetrySpan): ReactNode => {
-    const children = tree.children.get(span.spanId) ?? [], expandable = children.length > 0, isCollapsed = collapsed.has(span.spanId), attributes = Object.entries(span.attributes ?? {}), events = span.events ?? [];
-    const summary = [span.status || "UNSET", duration(span), ...events.map((event) => event.name)].filter(Boolean).join(" · ");
-    return <li key={span.spanId}><button type="button" className="trace-node" disabled={!expandable} onClick={() => { if (!expandable) return; setCollapsed((current) => { const next = new Set(current); if (isCollapsed) next.delete(span.spanId); else next.add(span.spanId); return next; }); }}><span className={`trace-status trace-status--${span.status === "ERROR" ? "error" : "ok"}`} /><div><strong>{expandable ? `${isCollapsed ? "▸" : "▾"} ${span.name}` : span.name}</strong><small>{summary}</small></div></button>{!isCollapsed && (attributes.length > 0 || events.some((event) => Object.keys(event.attributes ?? {}).length > 0)) && <dl className="trace-details">{attributes.map(([key, value]) => <div key={key}><dt>{key}</dt><dd>{telemetryValue(value)}</dd></div>)}{events.flatMap((event) => Object.entries(event.attributes ?? {}).map(([key, value]) => <div key={`${event.name}.${key}`}><dt>{event.name} · {key}</dt><dd>{telemetryValue(value)}</dd></div>))}</dl>}{expandable && !isCollapsed && <ul>{children.map(render)}</ul>}</li>;
-  };
-  return <ul className="telemetry-tree">{tree.roots.map(render)}</ul>;
-}
-
-export function SupervisorPanel({ record, l, telemetry, renderLineOutput }: { record?: SupervisorRecord; l: Messages; telemetry?: RunTelemetry; renderLineOutput: (value: string) => ReactNode }) {
+export function SupervisorPanel({ record, l, renderLineOutput }: { record?: SupervisorRecord; l: Messages; renderLineOutput: (value: string) => ReactNode }) {
   const response = record?.response;
-  return <div className="supervisor-output"><section><div className="supervisor-output__head"><strong>{l.supervisorPrompt}</strong><StatusBadge value={record?.status ?? "pending"} label={record?.status ?? "pending"} /></div>{renderLineOutput(record?.prompt || l.noSupervisorPrompt || "")}</section><section><strong>{l.supervisorResponse}</strong>{response ? renderLineOutput(JSON.stringify(response, null, 2)) : <p>{record?.error || l.supervisorWaiting}</p>}</section><section><strong>{l.openTelemetryTrace}</strong><TelemetryTree telemetry={telemetry} l={l} /></section></div>;
+  return <div className="supervisor-output"><section><div className="supervisor-output__head"><strong>{l.supervisorPrompt}</strong><StatusBadge value={record?.status ?? "pending"} label={record?.status ?? "pending"} /></div>{renderLineOutput(record?.prompt || l.noSupervisorPrompt || "")}</section><section><strong>{l.supervisorResponse}</strong>{response ? renderLineOutput(JSON.stringify(response, null, 2)) : <p>{record?.error || l.supervisorWaiting}</p>}</section></div>;
 }
diff --git a/frontend/src/features/evaluations/run-detail-telemetry-tree.tsx b/frontend/src/features/evaluations/run-detail-telemetry-tree.tsx
new file mode 100644
index 0000000..58a8c09
--- /dev/null
+++ b/frontend/src/features/evaluations/run-detail-telemetry-tree.tsx
@@ -0,0 +1,28 @@
+import { useMemo, useState, type ReactNode } from "react";
+import type { RunTelemetry, TelemetrySpan } from "../../domain/models";
+
+function telemetryValue(value: unknown) {
+  return typeof value === "string" ? value : JSON.stringify(value);
+}
+
+function duration(span: TelemetrySpan) {
+  if (!span.startTime || !span.endTime || span.endTime < span.startTime) return undefined;
+  return `${((span.endTime - span.startTime) / 1_000_000).toFixed(1)} ms`;
+}
+
+export function TelemetryTree({ telemetry, loading, empty }: { telemetry?: RunTelemetry; loading?: string; empty?: string }) {
+  const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
+  const tree = useMemo(() => {
+    const spans = telemetry?.spans ?? [], children = new Map<string, TelemetrySpan[]>(), known = new Set(spans.map((span) => span.spanId));
+    for (const span of spans) if (span.parentSpanId && known.has(span.parentSpanId)) children.set(span.parentSpanId, [...(children.get(span.parentSpanId) ?? []), span]);
+    return { roots: spans.filter((span) => !span.parentSpanId || !known.has(span.parentSpanId)), children };
+  }, [telemetry]);
+  if (!telemetry) return <p className="hint">{loading}</p>;
+  if (!tree.roots.length) return <p className="hint">{empty}</p>;
+  const render = (span: TelemetrySpan): ReactNode => {
+    const children = tree.children.get(span.spanId) ?? [], expandable = children.length > 0, isCollapsed = collapsed.has(span.spanId), attributes = Object.entries(span.attributes ?? {}), events = span.events ?? [];
+    const summary = [span.status || "UNSET", duration(span), ...events.map((event) => event.name)].filter(Boolean).join(" · ");
+    return <li key={span.spanId}><button type="button" className="trace-node" disabled={!expandable} onClick={() => { if (!expandable) return; setCollapsed((current) => { const next = new Set(current); if (isCollapsed) next.delete(span.spanId); else next.add(span.spanId); return next; }); }}><span className={`trace-status trace-status--${span.status === "ERROR" ? "error" : "ok"}`} /><div><strong>{expandable ? `${isCollapsed ? "▸" : "▾"} ${span.name}` : span.name}</strong><small>{summary}</small></div></button>{!isCollapsed && (attributes.length > 0 || events.some((event) => Object.keys(event.attributes ?? {}).length > 0)) && <dl className="trace-details">{attributes.map(([key, value]) => <div key={key}><dt>{key}</dt><dd>{telemetryValue(value)}</dd></div>)}{events.flatMap((event) => Object.entries(event.attributes ?? {}).map(([key, value]) => <div key={`${event.name}.${key}`}><dt>{event.name} · {key}</dt><dd>{telemetryValue(value)}</dd></div>))}</dl>}{expandable && !isCollapsed && <ul>{children.map(render)}</ul>}</li>;
+  };
+  return <ul className="telemetry-tree">{tree.roots.map(render)}</ul>;
+}
diff --git a/frontend/src/theme-overrides.css b/frontend/src/theme-overrides.css
index 5b4ee04..3d7cb20 100644
--- a/frontend/src/theme-overrides.css
+++ b/frontend/src/theme-overrides.css
@@ -88,7 +88,7 @@ footer { display:flex; align-items:center; justify-content:space-between; margin
 .chat-tools-popover { position:fixed; z-index:40; display:grid; width:296px; gap:10px; padding:14px; border:1px solid var(--line); border-radius:10px; color:var(--text); background:var(--surface); box-shadow:0 16px 42px rgb(0 0 0 / .35); font-size:12px; }.chat-tools-popover > strong { font-size:13px; }.chat-tools-popover > p { margin:0; padding:7px 9px; border-radius:6px; color:var(--muted); background:var(--surface-raised); font-size:11px; }.chat-tools-popover > label { display:grid; gap:5px; color:var(--muted); }.chat-tools-popover input:not([type="checkbox"]) { width:100%; box-sizing:border-box; font:inherit; }.chat-tools-popover .chat-tool-popover-toggle { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--line); color:var(--text); }.chat-tools-popover > div { display:flex; justify-content:flex-end; gap:8px; padding-top:2px; }
 .chat-assistant { resize:both; min-width:320px; min-height:360px; max-width:calc(100vw - 24px); max-height:calc(100vh - 24px); }.chat-pane { display:grid; grid-row:2 / 5; grid-template-rows:auto minmax(0,1fr) auto; min-height:0; }.chat-pane--hidden { display:none; }.assistant-terminal { display:none; }.assistant-terminal--active { display:block; }
 .chat-message--assistant > :first-child { margin-top:0; }.chat-message--assistant > :last-child { margin-bottom:0; }.chat-message--assistant h1,.chat-message--assistant h2,.chat-message--assistant h3 { margin:12px 0 7px; font-size:13px; }.chat-message--assistant p,.chat-message--assistant ul,.chat-message--assistant ol { margin:8px 0; }.chat-message--assistant ul,.chat-message--assistant ol { padding-left:18px; }.chat-message--assistant a { color:var(--accent); }.chat-message--assistant pre { overflow:auto; margin:9px 0; padding:9px; border-radius:6px; background:var(--bg); font:10px/1.55 'DM Mono',monospace; }.chat-message--assistant code { font:10px 'DM Mono',monospace; }.chat-message--assistant :not(pre) > code { padding:2px 4px; border-radius:4px; background:var(--bg); }.chat-message--assistant table { display:block; max-width:100%; overflow:auto; border-collapse:collapse; }.chat-message--assistant th,.chat-message--assistant td { padding:5px 7px; border:1px solid var(--line); text-align:left; }
-.run-detail-trigger { border:0; padding:0; color:inherit; background:transparent; text-align:left; cursor:pointer; }.run-detail { position:fixed; z-index:15; top:0; right:0; width:min(560px,100vw); height:100vh; overflow:auto; padding:24px; border-left:1px solid var(--line); background:var(--surface); box-shadow:-16px 0 48px rgb(0 0 0 / .35); }.run-detail header { margin-bottom:18px; }.run-tabs { display:flex; gap:6px; border-bottom:1px solid var(--line); }.run-tabs button { border:0; border-bottom:2px solid transparent; padding:10px 12px; color:var(--muted); background:transparent; }.run-tabs button.active { border-color:var(--accent); color:var(--text); }.console-output section { padding:14px 0; border-bottom:1px solid var(--line); }.console-output small { display:block; color:var(--muted); margin:4px 0; }.line-numbered-output { max-width:100%; overflow:auto; padding:8px 0; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--text); font:11px/1.55 'DM Mono',monospace; }.line-numbered-output > div { display:grid; grid-template-columns:46px minmax(0,1fr); min-width:max-content; }.line-numbered-output span { padding:0 10px; border-right:1px solid var(--line); color:var(--muted); text-align:right; user-select:none; }.line-numbered-output code { min-width:0; padding:0 12px; color:inherit; white-space:pre; }.supervisor-translation-action { display:flex; justify-content:flex-end; margin-bottom:10px; }.supervisor-output { display:grid; gap:16px; max-height:min(510px,calc(100vh - 310px)); overflow:auto; padding:18px 8px 0 0; }.supervisor-output section { display:grid; gap:8px; }.supervisor-output__head { display:flex; align-items:center; justify-content:space-between; gap:12px; }.supervisor-output p { margin:0; color:var(--muted); }
+.run-detail-trigger { border:0; padding:0; color:inherit; background:transparent; text-align:left; cursor:pointer; }.run-detail { position:fixed; z-index:15; top:0; right:0; width:min(560px,100vw); height:100vh; overflow:auto; padding:24px; border-left:1px solid var(--line); background:var(--surface); box-shadow:-16px 0 48px rgb(0 0 0 / .35); }.run-detail header { margin-bottom:18px; }.run-tabs { display:flex; gap:6px; border-bottom:1px solid var(--line); }.run-tabs button { border:0; border-bottom:2px solid transparent; padding:10px 12px; color:var(--muted); background:transparent; }.run-tabs button.active { border-color:var(--accent); color:var(--text); }.console-output section { padding:14px 0; border-bottom:1px solid var(--line); }.console-output small { display:block; color:var(--muted); margin:4px 0; }.line-numbered-output { max-width:100%; overflow:auto; padding:8px 0; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--text); font:11px/1.55 'DM Mono',monospace; }.line-numbered-output > div { display:grid; grid-template-columns:46px minmax(0,1fr); min-width:max-content; }.line-numbered-output span { padding:0 10px; border-right:1px solid var(--line); color:var(--muted); text-align:right; user-select:none; }.line-numbered-output code { min-width:0; padding:0 12px; color:inherit; white-space:pre; }.supervisor-translation-action { display:flex; justify-content:flex-end; margin-bottom:10px; }.supervisor-output { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:0; }.supervisor-output section { display:grid; grid-template-rows:auto minmax(0,1fr); gap:8px; height:clamp(260px,calc(100vh - 390px),460px); min-height:0; padding:12px; border:1px solid var(--line); border-radius:8px; background:var(--surface-raised); }.supervisor-output .line-numbered-output { min-height:0; }.supervisor-output__head { display:flex; align-items:center; justify-content:space-between; gap:12px; }.supervisor-output p { margin:0; overflow:auto; color:var(--muted); } @media(max-width:760px){.supervisor-output { grid-template-columns:1fr; }.supervisor-output section { height:300px; }}
 .iteration-navigator { display:flex; align-items:center; justify-content:flex-end; gap:6px; min-height:48px; border-bottom:1px solid var(--line); }.iteration-navigator select { width:auto; min-width:76px; height:30px; padding:0 28px 0 10px; font:11px 'DM Mono',monospace; }.iteration-navigator .icon-button { display:grid; width:30px; height:30px; place-items:center; padding:0; }.iteration-navigator .icon-button:disabled { cursor:not-allowed; opacity:.4; }
 .app-settings { display:grid; grid-template-columns:1fr; gap:0; }.app-settings + .app-settings { margin-top:16px; }.setting-row { display:flex !important; align-items:center; justify-content:space-between; gap:24px; padding:18px 0; border-top:1px solid var(--line); }.setting-row span { display:grid; gap:5px; }.setting-row strong { color:var(--text); }.setting-row select { min-width:220px; }.setting-actions { display:flex; align-items:center; gap:8px; }.setting-actions .approve { white-space:nowrap; }
 @media (max-width:900px) { .build-form,.profile-form { grid-template-columns:1fr; } }
@@ -133,6 +133,9 @@ footer { display:flex; align-items:center; justify-content:space-between; margin
 select option[value="docker"] { display:none; }
 .sidebar-toggle { position:absolute; top:35px; right:20px; z-index:1; display:grid; width:30px; height:30px; padding:0; place-items:center; border:0; border-radius:8px; color:var(--muted); background:transparent; transition:color .15s ease,background .15s ease; }.sidebar-toggle:hover,.sidebar-toggle:focus-visible { color:var(--text); background:var(--surface-raised); outline:0; }
 main > aside,main > .content { transition:width .2s ease,margin-left .2s ease,padding .2s ease; } main.sidebar-collapsed > aside { width:76px; padding-inline:12px; } main.sidebar-collapsed > .content { width:calc(100% - 76px); margin-left:76px; } main.sidebar-collapsed .sidebar-toggle { display:none; } main.sidebar-collapsed .brand { justify-content:center; margin-inline:0; } .brand--expand { border:0; padding:0; background:transparent; cursor:pointer; } .brand--expand:hover,.brand--expand:focus-visible { color:var(--text); outline:0; } main.sidebar-collapsed .brand > div,main.sidebar-collapsed .nav-label { display:none; } main.sidebar-collapsed nav button { position:relative; justify-content:center; padding-inline:0; } main.sidebar-collapsed .nav-run-count { position:absolute; top:3px; right:3px; min-width:16px; height:16px; padding-inline:3px; font-size:8px; }
+.run-result { max-height:none; overflow:visible; padding:18px 0 0; }.run-result h3 { margin:0; }.result-panels { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px; }.result-panel { display:grid; grid-template-rows:auto minmax(0,1fr); gap:8px; height:clamp(260px,calc(100vh - 390px),460px); min-height:0; padding:12px; border:1px solid var(--line); border-radius:8px; background:var(--surface-raised); }.result-panel .result-items { min-height:0; overflow:auto; padding-right:4px; }.combined-log-output { display:grid; grid-template-columns:1fr; grid-template-rows:repeat(3,minmax(0,1fr)); gap:0; height:min(510px,calc(100vh - 310px)); max-height:none; overflow:visible; padding-right:8px; }.combined-log-output section { display:grid; grid-template-rows:auto minmax(0,1fr); gap:8px; min-height:0; height:auto; padding:14px 0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; }.combined-log-output section:last-child { border-bottom:0; }.combined-log-output section h3 { margin:0 0 10px; font-size:13px; }.combined-log-output .timestamped-log-output,.combined-log-output .telemetry-tree { min-height:0; overflow:auto; }.combined-log-output .hint { margin:0; overflow:auto; }.supervisor-output { grid-template-columns:1fr; grid-template-rows:repeat(2,minmax(0,1fr)); gap:16px; height:min(510px,calc(100vh - 310px)); padding:18px 8px 0 0; overflow:visible; }.supervisor-output section { height:auto; padding:0; border:0; border-radius:0; background:transparent; } @media(max-width:720px){.result-panels { grid-template-columns:1fr; }.result-panel { height:300px; }.combined-log-output { height:min(510px,calc(100vh - 310px)); }.combined-log-output section { height:auto; }.supervisor-output { height:min(510px,calc(100vh - 310px)); }.supervisor-output section { height:auto; }}
+.run-result { max-height:none; overflow:visible; padding:18px 8px 0 0; }.run-result h3 { margin:0 0 10px; }.result-items--scrollable { max-height:150px; overflow:auto; padding-right:4px; }.combined-log-output { display:block; height:auto; max-height:none; overflow:visible; padding-right:8px; }.combined-log-output section { display:block; min-height:0; height:auto; padding:14px 0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; }.combined-log-output section:last-child { border-bottom:0; }.combined-log-output section h3 { margin:0 0 10px; font-size:13px; }.combined-log-output .timestamped-log-output,.combined-log-output .telemetry-tree { max-height:160px; min-height:0; overflow:auto; }.combined-log-output .hint { margin:0; }.supervisor-output { grid-template-columns:1fr; grid-template-rows:repeat(2,minmax(0,1fr)); gap:16px; height:min(510px,calc(100vh - 310px)); padding:18px 8px 0 0; overflow:visible; }.supervisor-output section { height:auto; padding:0; border:0; border-radius:0; background:transparent; }
+.result-items--scrollable { max-height:225px; }.combined-log-output .timestamped-log-output,.combined-log-output .telemetry-tree { max-height:240px; }.supervisor-output { height:min(765px,calc(100vh - 310px)); }
 @media (prefers-reduced-motion:reduce) { main > aside,main > .content { transition:none; } }
 .runner-template-picker { display:grid; gap:14px; }.runner-template-picker__head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }.runner-template-picker__head .hint { margin:0; }.template-picker-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }.runner-template-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.runner-template-card { display:grid; gap:9px; min-height:160px; padding:16px; border:1px solid var(--line); border-radius:9px; color:var(--text); text-align:left; background:var(--bg); cursor:pointer; }.runner-template-card:hover { border-color:var(--accent); background:var(--surface-raised); }.runner-template-card span,.runner-template-card small { color:var(--muted); font-size:11px; line-height:1.55; }.runner-template-selection { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:12px; border:1px solid color-mix(in srgb,var(--accent) 50%,var(--line)); border-radius:8px; background:color-mix(in srgb,var(--accent) 8%,var(--bg)); }.runner-template-selection > div { display:grid; gap:4px; min-width:0; }.runner-template-selection small,.runner-template-selection span { color:var(--muted); font-size:11px; }.runner-template-selection strong { font-size:13px; }.runner-template-selection span { line-height:1.45; }.runner-template-selection button { flex:none; }.runner-source { display:grid; gap:8px; color:var(--text); font-size:12px; }.runner-source textarea { min-height:440px; resize:vertical; font:12px/1.55 'DM Mono',monospace; tab-size:2; }
 .runner-template-card small { display:none; }

From 6ec6a4fa6cbb7e886cbef1e4b8ea7421f4cc4555 Mon Sep 17 00:00:00 2001
From: forthfate <forthfate@naver.com>
Date: Mon, 14 Sep 2026 18:39:21 +0900
Subject: [PATCH 03/14] fix: localize run and asset notifications

---
 frontend/src/features/assets/page.tsx   |  4 ++--
 frontend/src/features/builds/page.tsx   |  6 +++---
 frontend/src/features/settings/page.tsx |  2 +-
 frontend/src/locales/index.ts           |  9 ++++++++-
 frontend/src/locales/languages/en.json  | 12 +++++++++++-
 frontend/src/locales/languages/ja.json  | 12 +++++++++++-
 frontend/src/locales/languages/ko.json  | 12 +++++++++++-
 frontend/src/main.tsx                   |  6 +++---
 8 files changed, 50 insertions(+), 13 deletions(-)

diff --git a/frontend/src/features/assets/page.tsx b/frontend/src/features/assets/page.tsx
index bd44204..274a4e6 100644
--- a/frontend/src/features/assets/page.tsx
+++ b/frontend/src/features/assets/page.tsx
@@ -1639,9 +1639,9 @@ function EnvironmentCatalog({
       }
       setKind(null);
       await onRefresh();
-      pushToast("Asset saved", "success");
+      pushToast(t.assetSaved, "success");
     } catch (error) {
-      pushToast(error instanceof Error ? error.message : "Asset save failed");
+      pushToast(error instanceof Error ? error.message : t.assetSaveFailed);
     }
   };
   const help = fieldHelp[locale], sectionDetails = localeMessages<Record<string, string>>(locale, "sectionDetails");
diff --git a/frontend/src/features/builds/page.tsx b/frontend/src/features/builds/page.tsx
index 0155ea9..3d59262 100644
--- a/frontend/src/features/builds/page.tsx
+++ b/frontend/src/features/builds/page.tsx
@@ -642,7 +642,7 @@ function Quick({
       await create(item.id, v);
       close();
     } catch (e) {
-      setError(e instanceof Error ? e.message : "Creation failed");
+      setError(e instanceof Error ? e.message : t.creationFailed);
     } finally {
       setBusy(false);
     }
@@ -844,7 +844,7 @@ export function BuildsPage(props: {
       .then(setTestRun)
       .catch((error) =>
         setError(
-          error instanceof Error ? error.message : "Test failed to start",
+          error instanceof Error ? error.message : ui.testFailedToStart,
         ),
       );
   };
@@ -891,7 +891,7 @@ export function BuildsPage(props: {
       });
       setItems(await api("/api/quick-starts"));
     } catch (e) {
-      setError(e instanceof Error ? e.message : "Import failed");
+      setError(e instanceof Error ? e.message : ui.importFailed);
     }
   };
   const cols: Column<Build>[] = [
diff --git a/frontend/src/features/settings/page.tsx b/frontend/src/features/settings/page.tsx
index 6f01ace..9017b4d 100644
--- a/frontend/src/features/settings/page.tsx
+++ b/frontend/src/features/settings/page.tsx
@@ -76,7 +76,7 @@ export function SettingsPage({
         setPrompt(values.manager_prompt_template);
         setChatProfile(values.chat_model_profile_name);
       })
-      .catch(() => pushToast("Unable to load operational prompt."));
+      .catch(() => pushToast(locales[locale].ui.operationalPromptLoadFailed));
   }, [locale, pushToast]);
   useEffect(() => {
     let mounted = true;
diff --git a/frontend/src/locales/index.ts b/frontend/src/locales/index.ts
index d464495..5dcc227 100644
--- a/frontend/src/locales/index.ts
+++ b/frontend/src/locales/index.ts
@@ -14,7 +14,14 @@ const interpolate = (template: string, value: number) => template.replace(/\{(?:
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const hydrateMessages = (messages: Record<string, any>) => ({
   ...messages,
-  ui: { ...messages.ui, itemsPerPageValue: (size: number) => interpolate(messages.ui.itemsPerPageValue, size) },
+  ui: {
+    ...messages.ui,
+    itemsPerPageValue: (size: number) => interpolate(messages.ui.itemsPerPageValue, size),
+    runsDeleted: (count: number) =>
+      count === 1 ? messages.ui.runDeleted : interpolate(messages.ui.runsDeleted, count),
+    settingsTestSucceeded: (response: string) =>
+      messages.ui.settingsTestSucceeded.replace("{response}", response),
+  },
   runUi: {
     ...messages.runUi,
     selected: (count: number) => interpolate(messages.runUi.selected, count),
diff --git a/frontend/src/locales/languages/en.json b/frontend/src/locales/languages/en.json
index b817ab0..65ed231 100644
--- a/frontend/src/locales/languages/en.json
+++ b/frontend/src/locales/languages/en.json
@@ -445,6 +445,14 @@
       "buildDeleted": "Build deleted",
       "quickStartCreated": "Quick Start created its assets and a build",
       "assetDeleted": "Asset deleted",
+      "runDeleted": "Run deleted",
+      "runsDeleted": "{count} runs deleted",
+      "settingsTestSucceeded": "Test succeeded: {response}",
+      "evaluationRetryStarted": "Evaluation retry started.",
+      "creationFailed": "Creation failed",
+      "testFailedToStart": "Test failed to start",
+      "importFailed": "Import failed",
+      "operationalPromptLoadFailed": "Unable to load operational prompt.",
       "apiConnectionFailed": "API connection failed."
     },
     "runUi": {
@@ -540,7 +548,9 @@
       "library": "Browser library path (optional)",
       "repository": "Repository",
       "baseUrl": "Browser base URL (optional)",
-      "promptPath": "Improvement target prompt file path (Native Improvement Cycle only)"
+      "promptPath": "Improvement target prompt file path (Native Improvement Cycle only)",
+      "assetSaved": "Asset saved",
+      "assetSaveFailed": "Asset save failed"
     },
     "improvementPage": {
       "improvement": "Improvement",
diff --git a/frontend/src/locales/languages/ja.json b/frontend/src/locales/languages/ja.json
index 8fc7f1a..a7bfefd 100644
--- a/frontend/src/locales/languages/ja.json
+++ b/frontend/src/locales/languages/ja.json
@@ -444,6 +444,14 @@
       "buildDeleted": "ビルドを削除しました",
       "quickStartCreated": "クイックスタートがアセットとビルドを作成しました",
       "assetDeleted": "アセットを削除しました",
+      "runDeleted": "実行を削除しました",
+      "runsDeleted": "{count} 件の実行を削除しました",
+      "settingsTestSucceeded": "テストに成功しました: {response}",
+      "evaluationRetryStarted": "実行の再試行を開始しました。",
+      "creationFailed": "作成に失敗しました",
+      "testFailedToStart": "テストを開始できませんでした",
+      "importFailed": "インポートに失敗しました",
+      "operationalPromptLoadFailed": "運用プロンプトを読み込めませんでした。",
       "apiConnectionFailed": "API 接続に失敗しました。"
     },
     "runUi": {
@@ -539,7 +547,9 @@
       "library": "ブラウザーライブラリパス（任意）",
       "repository": "リポジトリ",
       "baseUrl": "ブラウザー基本 URL（任意）",
-      "promptPath": "改善対象プロンプトファイルパス（Native Improvement Cycle 専用）"
+      "promptPath": "改善対象プロンプトファイルパス（Native Improvement Cycle 専用）",
+      "assetSaved": "アセットを保存しました",
+      "assetSaveFailed": "アセットを保存できませんでした"
     },
     "improvementPage": {
       "improvement": "改善",
diff --git a/frontend/src/locales/languages/ko.json b/frontend/src/locales/languages/ko.json
index c10b73c..43243c3 100644
--- a/frontend/src/locales/languages/ko.json
+++ b/frontend/src/locales/languages/ko.json
@@ -444,6 +444,14 @@
       "buildDeleted": "빌드를 삭제했습니다",
       "quickStartCreated": "퀵 스타트가 자산과 빌드를 생성했습니다",
       "assetDeleted": "자산을 삭제했습니다",
+      "runDeleted": "실행을 삭제했습니다",
+      "runsDeleted": "{count}개의 실행을 삭제했습니다",
+      "settingsTestSucceeded": "테스트에 성공했습니다: {response}",
+      "evaluationRetryStarted": "실행 재시도를 시작했습니다.",
+      "creationFailed": "생성에 실패했습니다",
+      "testFailedToStart": "테스트를 시작하지 못했습니다",
+      "importFailed": "가져오기에 실패했습니다",
+      "operationalPromptLoadFailed": "운영 프롬프트를 불러오지 못했습니다.",
       "apiConnectionFailed": "API 연결에 실패했습니다."
     },
     "runUi": {
@@ -539,7 +547,9 @@
       "library": "브라우저 라이브러리 경로 (선택)",
       "repository": "저장소",
       "baseUrl": "브라우저 기본 URL (선택)",
-      "promptPath": "개선 대상 프롬프트 파일 경로 (Native Improvement Cycle 전용)"
+      "promptPath": "개선 대상 프롬프트 파일 경로 (Native Improvement Cycle 전용)",
+      "assetSaved": "자산을 저장했습니다",
+      "assetSaveFailed": "자산을 저장하지 못했습니다"
     },
     "improvementPage": {
       "improvement": "개선",
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 7167c2b..134fd22 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -108,7 +108,7 @@ export default function App() {
     api<{ response: string }>("/api/settings/hello", "POST", room.settings)
       .then((r) => {
         room.setSettingsTested(true);
-        room.setNotice(`Test succeeded: ${r.response}`, "success");
+        room.setNotice(ui.settingsTestSucceeded(r.response), "success");
       })
       .catch((e) => room.setNotice(e.message));
   const stop = () =>
@@ -132,7 +132,7 @@ export default function App() {
   const retryRun = (id: string, restartFromFirst: boolean) =>
     api(`/api/runs/${id}/retry`, "POST", { restart_from_first: restartFromFirst })
       .then(() => {
-        room.setNotice("Evaluation retry started.", "warning");
+        room.setNotice(ui.evaluationRetryStarted, "warning");
         room.refresh();
       })
       .catch((e) => room.setNotice(e.message));
@@ -142,7 +142,7 @@ export default function App() {
     )
       .then(() => {
         room.setNotice(
-          `${ids.length} run${ids.length === 1 ? "" : "s"} deleted`,
+          ui.runsDeleted(ids.length),
           "success",
         );
         return room.refresh();

From d67b11150ab7e0438f835d4ffbe1ea0b8128c59f Mon Sep 17 00:00:00 2001
From: forthfate <forthfate@naver.com>
Date: Mon, 14 Sep 2026 18:41:34 +0900
Subject: [PATCH 04/14] refactor: simplify run selection actions

---
 frontend/src/features/evaluations/page.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/features/evaluations/page.tsx b/frontend/src/features/evaluations/page.tsx
index 2a71533..d110f9f 100644
--- a/frontend/src/features/evaluations/page.tsx
+++ b/frontend/src/features/evaluations/page.tsx
@@ -919,7 +919,6 @@ export function EvaluationsPage({
       </div>
       <div className="run-history-actions">
         <span>{ui.selected(selectedRunIds.size)}</span>
-        <button className="ghost" onClick={() => setSelectedRunIds(new Set())} disabled={!selectedRunIds.size}>{ui.deselect}</button>
         <button className="icon-button danger" aria-label={ui.deleteSelected} title={ui.deleteSelected} onClick={deleteSelected} disabled={!selectedRunIds.size}><Trash2 size={15}/></button>
       </div>
       <DataTable

From 4661ed6cadfdc0d4da66d5a8437f6745f6db6e78 Mon Sep 17 00:00:00 2001
From: forthfate <forthfate@naver.com>
Date: Mon, 14 Sep 2026 18:44:13 +0900
Subject: [PATCH 05/14] fix: localize feedback and constrain stored state

---
 frontend/src/theme-overrides.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/theme-overrides.css b/frontend/src/theme-overrides.css
index 3d7cb20..d58705b 100644
--- a/frontend/src/theme-overrides.css
+++ b/frontend/src/theme-overrides.css
@@ -55,7 +55,7 @@ footer { display:flex; align-items:center; justify-content:space-between; margin
 .iteration-trends__head { display:flex; align-items:center; justify-content:space-between; gap:12px; }.iteration-trends__head label { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:11px; }.iteration-trends__head h3 { margin:0; }.iteration-trends__head select { width:auto; max-width:320px; } @media(max-width:720px){.iteration-trends__head { align-items:flex-start; flex-direction:column; }}
 .analytics-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.analytics-chart { min-width:0; padding:14px; border:1px solid var(--line); border-radius:8px; background:var(--bg); }.analytics-chart h3 { margin:0 0 12px; font-size:12px; }.analytics-chart .recharts-cartesian-axis-tick-value,.analytics-chart .recharts-legend-item-text { fill:var(--muted)!important; font-size:10px; }.analytics-chart .recharts-tooltip-wrapper { color:#182132; }.chart-select { display:flex; justify-content:flex-end; margin:-31px 0 10px; }.chart-select label { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:11px; }.chart-select select { width:auto; max-width:320px; } @media(max-width:720px){.analytics-grid { grid-template-columns:1fr; }.chart-select { justify-content:flex-start; margin:0 0 10px; }}
 .improvements-build-selector { display:flex; justify-content:flex-end; margin-bottom:16px; }.improvements-build-selector label { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:11px; }.improvements-build-selector select { width:auto; max-width:360px; } @media(max-width:720px){.improvements-build-selector { justify-content:flex-start; }}
-.stored-state { display:grid; gap:12px; margin-bottom:16px; }.stored-state .panel-head { margin:0; }.stored-state__list { display:grid; gap:10px; }.stored-state__list article { display:grid; gap:10px; padding:12px; border:1px solid var(--line); border-radius:8px; background:var(--bg); }.stored-state__list header { display:flex; align-items:center; justify-content:space-between; gap:12px; }.stored-state__list header small { color:var(--muted); font:10px 'DM Mono',monospace; }.stored-state__personas { display:grid; gap:6px; }.stored-state__personas > div { display:grid; grid-template-columns:minmax(130px,.8fr) minmax(150px,1fr) minmax(0,2fr); gap:10px; padding:8px 10px; border-radius:6px; background:var(--surface-raised); font-size:11px; }.stored-state__personas span { overflow:hidden; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; }.stored-state details { color:var(--muted); font-size:11px; }.stored-state summary { cursor:pointer; }.stored-state pre { max-height:280px; overflow:auto; margin:8px 0 0; padding:10px; border-radius:6px; color:var(--text); background:var(--surface-raised); font:10px/1.55 'DM Mono',monospace; } @media(max-width:720px){.stored-state__personas > div { grid-template-columns:1fr; gap:4px; }}
+.stored-state { display:grid; gap:12px; min-width:0; margin-bottom:16px; }.stored-state .panel-head { margin:0; }.stored-state__list { display:grid; min-width:0; gap:10px; }.stored-state__list article { display:grid; min-width:0; gap:10px; padding:12px; border:1px solid var(--line); border-radius:8px; background:var(--bg); }.stored-state__list header { display:flex; align-items:center; justify-content:space-between; gap:12px; }.stored-state__list header small { color:var(--muted); font:10px 'DM Mono',monospace; }.stored-state__personas { display:grid; min-width:0; gap:6px; }.stored-state__personas > div { display:grid; grid-template-columns:minmax(130px,.8fr) minmax(150px,1fr) minmax(0,2fr); gap:10px; padding:8px 10px; border-radius:6px; background:var(--surface-raised); font-size:11px; }.stored-state__personas span { overflow:hidden; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; }.stored-state details { min-width:0; color:var(--muted); font-size:11px; }.stored-state summary { cursor:pointer; }.stored-state pre { box-sizing:border-box; width:100%; max-height:280px; min-width:0; overflow:auto; margin:8px 0 0; padding:10px; border-radius:6px; color:var(--text); background:var(--surface-raised); font:10px/1.55 'DM Mono',monospace; } @media(max-width:720px){.stored-state__personas > div { grid-template-columns:1fr; gap:4px; }}
 .cycle-interventions { display:grid; gap:12px; }.cycle-interventions > .hint { margin:0; }.intervention-list { display:grid; gap:10px; }.intervention-list article { display:grid; gap:9px; padding:14px; border:1px solid var(--line); border-radius:8px; background:var(--bg); }.intervention-list header { display:flex; justify-content:space-between; gap:12px; }.intervention-list header div { display:grid; gap:5px; }.intervention-list small { color:var(--muted); font-size:10px; }.intervention-list p { margin:0; color:var(--muted); line-height:1.55; }.intervention-list dl { display:flex; gap:20px; margin:0; }.intervention-list dl div { display:grid; gap:3px; }.intervention-list dt { color:var(--muted); font-size:9px; text-transform:uppercase; }.intervention-list dd { margin:0; font:11px 'DM Mono',monospace; }.intervention-list pre { margin:0; padding:9px; overflow:auto; border-radius:6px; background:var(--surface-raised); color:#8fb8ff; font:11px/1.5 'DM Mono',monospace; white-space:pre-wrap; }
 .proposal-history { display:grid; gap:14px; }.proposal-history .panel-head { margin-bottom:3px; }.proposal-history .hint { max-width:650px; }.proposal-filters { display:flex; gap:8px; flex-wrap:wrap; }.proposal-filters select { width:auto; max-width:230px; }.proposal-summary { display:flex; gap:8px; flex-wrap:wrap; }.proposal-summary span { display:flex; align-items:baseline; gap:6px; padding:8px 10px; border:1px solid var(--line); border-radius:7px; color:var(--muted); background:var(--bg); font-size:10px; }.proposal-summary b { color:var(--text); font:600 16px 'DM Mono',monospace; }.proposal-list { display:grid; border-top:1px solid var(--line); }.proposal-row { display:flex; justify-content:space-between; gap:14px; width:100%; padding:13px 2px; border:0; border-bottom:1px solid var(--line); color:var(--text); background:transparent; text-align:left; }.proposal-row:hover { background:var(--surface-raised); }.proposal-row > div:first-child { display:grid; min-width:0; gap:4px; }.proposal-row small,.proposal-row span { color:var(--muted); font-size:10px; }.proposal-row strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }.proposal-row__meta { display:grid; justify-items:end; align-content:center; gap:6px; white-space:nowrap; }.modal--proposal-detail { width:min(760px,100%); }.proposal-detail { display:grid; gap:18px; }.proposal-detail__summary { display:flex; align-items:center; gap:10px; flex-wrap:wrap; color:var(--muted); font:10px 'DM Mono',monospace; }.proposal-detail section { display:grid; gap:8px; }.proposal-detail h3 { margin:0; font-size:12px; }.proposal-detail p { margin:0; color:var(--muted); font-size:12px; line-height:1.6; }.proposal-detail pre { margin:0; padding:10px; overflow:auto; border-radius:7px; background:var(--bg); color:#8fb8ff; font:11px/1.55 'DM Mono',monospace; white-space:pre-wrap; }.proposal-detail dl { display:flex; flex-wrap:wrap; gap:16px; margin:0; }.proposal-detail dl div { display:grid; min-width:120px; gap:3px; }.proposal-detail dt { color:var(--muted); font-size:9px; text-transform:uppercase; }.proposal-detail dd { max-width:480px; margin:0; overflow-wrap:anywhere; font:11px 'DM Mono',monospace; }.proposal-timeline { display:grid; gap:9px; margin:0; padding:0; list-style:none; }.proposal-timeline li { display:flex; align-items:center; gap:10px; padding-left:10px; border-left:2px solid var(--line); }.proposal-timeline li > div { display:grid; gap:3px; }.proposal-timeline strong { font-size:11px; }.proposal-timeline small { color:var(--muted); font-size:10px; } @media(max-width:720px){.proposal-history .trend-head { align-items:stretch; }.proposal-filters select { width:100%; max-width:none; }.proposal-row { align-items:flex-start; flex-direction:column; }.proposal-row__meta { justify-items:start; }.proposal-detail__summary { align-items:flex-start; flex-direction:column; }}
 .panel-title-action .panel-head { flex:1; }.panel-title-action__copy { flex:1; min-width:0; }.section-description { margin:5px 0 0; }.panel-title-action:has(.section-description) { margin-bottom:12px; }.panel-head:has(+ .section-description) { margin-bottom:0; }.panel-head + .section-description { margin:5px 0 12px; }.panel-title-action .approve { display:flex; align-items:center; gap:5px; white-space:nowrap; }

From bb2a40417ab369b120fd243462782a3efe861a49 Mon Sep 17 00:00:00 2001
From: forthfate <forthfate@naver.com>
Date: Mon, 14 Sep 2026 18:49:24 +0900
Subject: [PATCH 06/14] feat: render stored persona state as a tree

---
 frontend/src/features/improvements/page.tsx | 18 +++++++++++++-----
 frontend/src/theme-overrides.css            |  1 +
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/frontend/src/features/improvements/page.tsx b/frontend/src/features/improvements/page.tsx
index 7a9334c..dc3265a 100644
--- a/frontend/src/features/improvements/page.tsx
+++ b/frontend/src/features/improvements/page.tsx
@@ -785,6 +785,15 @@ function StoredState({
       .then(setStates)
       .catch(() => setStates([]));
   }, [buildId]);
+  const renderStateValue = (value: unknown, label?: string): ReactNode => {
+    if (Array.isArray(value)) {
+      return <details className="stored-state__tree-node" open={label === "journey_handoff"}><summary>{label ?? "Array"}<small>{value.length} items</small></summary><ul>{value.map((item, index) => <li key={index}>{renderStateValue(item, String(index))}</li>)}</ul></details>;
+    }
+    if (value && typeof value === "object") {
+      return <details className="stored-state__tree-node" open={label === "journey_handoff"}><summary>{label ?? "Object"}<small>{Object.keys(value as Record<string, unknown>).length} fields</small></summary><ul>{Object.entries(value as Record<string, unknown>).map(([key, item]) => <li key={key}>{renderStateValue(item, key)}</li>)}</ul></details>;
+    }
+    return <span className="stored-state__tree-leaf"><strong>{label}</strong><code>{value === null ? "null" : String(value)}</code></span>;
+  };
   return (
     <section className="panel stored-state">
       <PanelHeader title={t.storedState} description={t.storedStateHint} />
@@ -808,11 +817,10 @@ function StoredState({
                         ? value as Record<string, unknown>
                         : {};
                       return (
-                        <div key={persona}>
-                          <strong>{persona}</strong>
-                          <span>{String(record.last_action_at ?? "—")}</span>
-                          <span>{String(record.next_check ?? record.last_summary ?? "—")}</span>
-                        </div>
+                        <details className="stored-state__persona" key={persona}>
+                          <summary><strong>{persona}</strong><span>{String(record.last_action_at ?? "—")}</span><span>{String(record.active ?? "—")}</span></summary>
+                          <div className="stored-state__tree"><ul className="stored-state__tree-root">{Object.entries(record).map(([key, item]) => <li key={key}>{renderStateValue(item, key)}</li>)}</ul></div>
+                        </details>
                       );
                     })}
                   </div>
diff --git a/frontend/src/theme-overrides.css b/frontend/src/theme-overrides.css
index d58705b..e6f4910 100644
--- a/frontend/src/theme-overrides.css
+++ b/frontend/src/theme-overrides.css
@@ -56,6 +56,7 @@ footer { display:flex; align-items:center; justify-content:space-between; margin
 .analytics-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.analytics-chart { min-width:0; padding:14px; border:1px solid var(--line); border-radius:8px; background:var(--bg); }.analytics-chart h3 { margin:0 0 12px; font-size:12px; }.analytics-chart .recharts-cartesian-axis-tick-value,.analytics-chart .recharts-legend-item-text { fill:var(--muted)!important; font-size:10px; }.analytics-chart .recharts-tooltip-wrapper { color:#182132; }.chart-select { display:flex; justify-content:flex-end; margin:-31px 0 10px; }.chart-select label { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:11px; }.chart-select select { width:auto; max-width:320px; } @media(max-width:720px){.analytics-grid { grid-template-columns:1fr; }.chart-select { justify-content:flex-start; margin:0 0 10px; }}
 .improvements-build-selector { display:flex; justify-content:flex-end; margin-bottom:16px; }.improvements-build-selector label { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:11px; }.improvements-build-selector select { width:auto; max-width:360px; } @media(max-width:720px){.improvements-build-selector { justify-content:flex-start; }}
 .stored-state { display:grid; gap:12px; min-width:0; margin-bottom:16px; }.stored-state .panel-head { margin:0; }.stored-state__list { display:grid; min-width:0; gap:10px; }.stored-state__list article { display:grid; min-width:0; gap:10px; padding:12px; border:1px solid var(--line); border-radius:8px; background:var(--bg); }.stored-state__list header { display:flex; align-items:center; justify-content:space-between; gap:12px; }.stored-state__list header small { color:var(--muted); font:10px 'DM Mono',monospace; }.stored-state__personas { display:grid; min-width:0; gap:6px; }.stored-state__personas > div { display:grid; grid-template-columns:minmax(130px,.8fr) minmax(150px,1fr) minmax(0,2fr); gap:10px; padding:8px 10px; border-radius:6px; background:var(--surface-raised); font-size:11px; }.stored-state__personas span { overflow:hidden; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; }.stored-state details { min-width:0; color:var(--muted); font-size:11px; }.stored-state summary { cursor:pointer; }.stored-state pre { box-sizing:border-box; width:100%; max-height:280px; min-width:0; overflow:auto; margin:8px 0 0; padding:10px; border-radius:6px; color:var(--text); background:var(--surface-raised); font:10px/1.55 'DM Mono',monospace; } @media(max-width:720px){.stored-state__personas > div { grid-template-columns:1fr; gap:4px; }}
+.stored-state__persona { padding:8px 10px; border-radius:6px; background:var(--surface-raised); }.stored-state__persona > summary { display:grid; grid-template-columns:minmax(130px,.8fr) minmax(150px,1fr) minmax(0,1fr); gap:10px; align-items:center; }.stored-state__persona > summary span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.stored-state__tree { min-width:0; margin:9px 0 0 12px; padding-left:12px; border-left:1px solid var(--line); }.stored-state__tree-root { display:grid; gap:4px; margin:0; padding:0; list-style:none; }.stored-state__tree-node { margin:5px 0; }.stored-state__tree-node > summary { display:flex; justify-content:space-between; gap:10px; }.stored-state__tree-node > summary small { color:var(--muted); }.stored-state__tree-node ul { display:grid; gap:4px; margin:5px 0 0 12px; padding-left:12px; border-left:1px solid var(--line); list-style:none; }.stored-state__tree-leaf { display:grid; grid-template-columns:minmax(120px,.7fr) minmax(0,2fr); gap:10px; padding:4px 0; }.stored-state__tree-leaf code { min-width:0; overflow-wrap:anywhere; color:var(--text); white-space:pre-wrap; } @media(max-width:720px){.stored-state__persona > summary,.stored-state__tree-leaf { grid-template-columns:1fr; gap:4px; }}
 .cycle-interventions { display:grid; gap:12px; }.cycle-interventions > .hint { margin:0; }.intervention-list { display:grid; gap:10px; }.intervention-list article { display:grid; gap:9px; padding:14px; border:1px solid var(--line); border-radius:8px; background:var(--bg); }.intervention-list header { display:flex; justify-content:space-between; gap:12px; }.intervention-list header div { display:grid; gap:5px; }.intervention-list small { color:var(--muted); font-size:10px; }.intervention-list p { margin:0; color:var(--muted); line-height:1.55; }.intervention-list dl { display:flex; gap:20px; margin:0; }.intervention-list dl div { display:grid; gap:3px; }.intervention-list dt { color:var(--muted); font-size:9px; text-transform:uppercase; }.intervention-list dd { margin:0; font:11px 'DM Mono',monospace; }.intervention-list pre { margin:0; padding:9px; overflow:auto; border-radius:6px; background:var(--surface-raised); color:#8fb8ff; font:11px/1.5 'DM Mono',monospace; white-space:pre-wrap; }
 .proposal-history { display:grid; gap:14px; }.proposal-history .panel-head { margin-bottom:3px; }.proposal-history .hint { max-width:650px; }.proposal-filters { display:flex; gap:8px; flex-wrap:wrap; }.proposal-filters select { width:auto; max-width:230px; }.proposal-summary { display:flex; gap:8px; flex-wrap:wrap; }.proposal-summary span { display:flex; align-items:baseline; gap:6px; padding:8px 10px; border:1px solid var(--line); border-radius:7px; color:var(--muted); background:var(--bg); font-size:10px; }.proposal-summary b { color:var(--text); font:600 16px 'DM Mono',monospace; }.proposal-list { display:grid; border-top:1px solid var(--line); }.proposal-row { display:flex; justify-content:space-between; gap:14px; width:100%; padding:13px 2px; border:0; border-bottom:1px solid var(--line); color:var(--text); background:transparent; text-align:left; }.proposal-row:hover { background:var(--surface-raised); }.proposal-row > div:first-child { display:grid; min-width:0; gap:4px; }.proposal-row small,.proposal-row span { color:var(--muted); font-size:10px; }.proposal-row strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }.proposal-row__meta { display:grid; justify-items:end; align-content:center; gap:6px; white-space:nowrap; }.modal--proposal-detail { width:min(760px,100%); }.proposal-detail { display:grid; gap:18px; }.proposal-detail__summary { display:flex; align-items:center; gap:10px; flex-wrap:wrap; color:var(--muted); font:10px 'DM Mono',monospace; }.proposal-detail section { display:grid; gap:8px; }.proposal-detail h3 { margin:0; font-size:12px; }.proposal-detail p { margin:0; color:var(--muted); font-size:12px; line-height:1.6; }.proposal-detail pre { margin:0; padding:10px; overflow:auto; border-radius:7px; background:var(--bg); color:#8fb8ff; font:11px/1.55 'DM Mono',monospace; white-space:pre-wrap; }.proposal-detail dl { display:flex; flex-wrap:wrap; gap:16px; margin:0; }.proposal-detail dl div { display:grid; min-width:120px; gap:3px; }.proposal-detail dt { color:var(--muted); font-size:9px; text-transform:uppercase; }.proposal-detail dd { max-width:480px; margin:0; overflow-wrap:anywhere; font:11px 'DM Mono',monospace; }.proposal-timeline { display:grid; gap:9px; margin:0; padding:0; list-style:none; }.proposal-timeline li { display:flex; align-items:center; gap:10px; padding-left:10px; border-left:2px solid var(--line); }.proposal-timeline li > div { display:grid; gap:3px; }.proposal-timeline strong { font-size:11px; }.proposal-timeline small { color:var(--muted); font-size:10px; } @media(max-width:720px){.proposal-history .trend-head { align-items:stretch; }.proposal-filters select { width:100%; max-width:none; }.proposal-row { align-items:flex-start; flex-direction:column; }.proposal-row__meta { justify-items:start; }.proposal-detail__summary { align-items:flex-start; flex-direction:column; }}
 .panel-title-action .panel-head { flex:1; }.panel-title-action__copy { flex:1; min-width:0; }.section-description { margin:5px 0 0; }.panel-title-action:has(.section-description) { margin-bottom:12px; }.panel-head:has(+ .section-description) { margin-bottom:0; }.panel-head + .section-description { margin:5px 0 12px; }.panel-title-action .approve { display:flex; align-items:center; gap:5px; white-space:nowrap; }

From 53141a1db341341707bed651d170dbfb07fe6f14 Mon Sep 17 00:00:00 2001
From: forthfate <forthfate@naver.com>
Date: Mon, 14 Sep 2026 18:56:49 +0900
Subject: [PATCH 07/14] feat: split build creation into guided steps

---
 frontend/src/features/builds/page.tsx  | 30 ++++++++++++++++++--------
 frontend/src/locales/languages/en.json |  4 ++++
 frontend/src/locales/languages/ja.json |  4 ++++
 frontend/src/locales/languages/ko.json |  4 ++++
 4 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/frontend/src/features/builds/page.tsx b/frontend/src/features/builds/page.tsx
index 3d59262..deefa17 100644
--- a/frontend/src/features/builds/page.tsx
+++ b/frontend/src/features/builds/page.tsx
@@ -85,6 +85,10 @@ export type ProfileFormCopy = {
   modelDeployment: LabelCopy;
 };
 type BuildWizardCopy = {
+  basics: string;
+  evaluationSetup: string;
+  schedule: string;
+  decisionPolicy: string;
   buildId: LabelCopy;
   buildName: LabelCopy;
   runner: LabelCopy;
@@ -356,7 +360,7 @@ function Direct({
   return (
     <div className="build-wizard">
       <ol className="wizard-steps">
-        {[t.common.build, t.evaluation.criteria, t.ui.review].map(
+        {[copy.basics, copy.evaluationSetup, copy.schedule, copy.decisionPolicy, t.ui.review].map(
           (x, i) => (
             <li key={x} className={step === i + 1 ? "current" : ""}>
               <button onClick={() => setStep(i + 1)}>
@@ -380,6 +384,12 @@ function Direct({
               onChange={(e) => setD({ ...d, name: e.target.value })}
             />
           </Field>
+          <Field label={copy.purpose.label} description={copy.purpose.hint}>
+            <textarea
+              value={d.purpose}
+              onChange={(e) => setD({ ...d, purpose: e.target.value })}
+            />
+          </Field>
           <Field label={copy.runner.label} description={copy.runner.hint}>
             <select
               value={d.runner_id}
@@ -435,12 +445,6 @@ function Direct({
               ))}
             </select>
           </Field>
-          <Field label={copy.purpose.label} description={copy.purpose.hint}>
-            <textarea
-              value={d.purpose}
-              onChange={(e) => setD({ ...d, purpose: e.target.value })}
-            />
-          </Field>
         </div>
       )}
       {step === 2 && (
@@ -491,6 +495,10 @@ function Direct({
               ))}
             </select>
           </Field>
+        </div>
+      )}
+      {step === 3 && (
+        <div className="modal-form">
           <Field label={copy.timezone.label} description={copy.timezone.hint}>
             <input
               value={d.timezone}
@@ -526,6 +534,10 @@ function Direct({
             <label className="build-schedule-toggle"><input type="checkbox" checked={d.schedule_enabled} onChange={(e) => setD({ ...d, schedule_enabled: e.target.checked })} /> {scheduleCopy.enable}</label>
             {d.schedule_enabled && <div className="build-schedule-fields"><div className="build-schedule-days">{scheduleCopy.days.map((day, index) => <label key={day}><input type="checkbox" checked={d.schedule_weekdays.includes(index)} onChange={() => setD({ ...d, schedule_weekdays: d.schedule_weekdays.includes(index) ? d.schedule_weekdays.filter((value) => value !== index) : [...d.schedule_weekdays, index] })} />{day}</label>)}</div><label>{scheduleCopy.start}<input type="time" value={d.schedule_start_time} onChange={(e) => setD({ ...d, schedule_start_time: e.target.value })} /></label><label>{scheduleCopy.end}<input type="time" value={d.schedule_end_time} onChange={(e) => setD({ ...d, schedule_end_time: e.target.value })} /></label></div>}
           </Field>
+        </div>
+      )}
+      {step === 4 && (
+        <div className="modal-form">
           <Field label={copy.iterationStrategy.label} description={copy.iterationStrategy.hint}>
             <select value={d.iteration_strategy} onChange={(e) => setD({ ...d, iteration_strategy: e.target.value as Draft["iteration_strategy"] })}>
               <option value="linear">{copy.iterationStrategyLinear}</option>
@@ -569,7 +581,7 @@ function Direct({
           </Field>
         </div>
       )}
-      {step === 3 && (
+      {step === 5 && (
         <div className="wizard-review">
           <p>{t.ui.review}</p>
           <dl>
@@ -587,7 +599,7 @@ function Direct({
             {t.ui.back}
           </button>
         )}
-        {step < 3 ? (
+        {step < 5 ? (
           <button className="approve" onClick={() => setStep(step + 1)}>
             {copy.next}
             <ChevronRight size={15} />
diff --git a/frontend/src/locales/languages/en.json b/frontend/src/locales/languages/en.json
index 65ed231..f9a5a3e 100644
--- a/frontend/src/locales/languages/en.json
+++ b/frontend/src/locales/languages/en.json
@@ -138,6 +138,10 @@
       }
     },
     "buildWizard": {
+      "basics": "Build basics",
+      "evaluationSetup": "Evaluation setup",
+      "schedule": "Schedule & cadence",
+      "decisionPolicy": "Decision policy",
       "buildId": {
         "label": "Build ID",
         "hint": "A stable identifier used by the API and run history."
diff --git a/frontend/src/locales/languages/ja.json b/frontend/src/locales/languages/ja.json
index a7bfefd..d422304 100644
--- a/frontend/src/locales/languages/ja.json
+++ b/frontend/src/locales/languages/ja.json
@@ -137,6 +137,10 @@
       }
     },
     "buildWizard": {
+      "basics": "ビルドの基本情報",
+      "evaluationSetup": "評価の構成",
+      "schedule": "スケジュールと繰り返し",
+      "decisionPolicy": "判断ポリシー",
       "buildId": {
         "label": "ビルド ID",
         "hint": "API と実行履歴で使用する安定した識別子です。"
diff --git a/frontend/src/locales/languages/ko.json b/frontend/src/locales/languages/ko.json
index 43243c3..a7fd349 100644
--- a/frontend/src/locales/languages/ko.json
+++ b/frontend/src/locales/languages/ko.json
@@ -137,6 +137,10 @@
       }
     },
     "buildWizard": {
+      "basics": "빌드 기본 정보",
+      "evaluationSetup": "평가 구성",
+      "schedule": "일정 및 반복",
+      "decisionPolicy": "판단 정책",
       "buildId": {
         "label": "빌드 ID",
         "hint": "API와 실행 이력에서 사용하는 안정적인 식별자입니다."

From c1ce36dc10156c8fab66eb685e51f45c1fa457a1 Mon Sep 17 00:00:00 2001
From: forthfate <forthfate@naver.com>
Date: Mon, 14 Sep 2026 19:03:35 +0900
Subject: [PATCH 08/14] refactor: streamline build configuration dialogs

---
 frontend/src/features/assets/page.tsx  |  1 -
 frontend/src/features/builds/page.tsx  | 15 ++-------------
 frontend/src/locales/languages/en.json |  4 ++++
 frontend/src/locales/languages/ja.json |  4 ++++
 frontend/src/locales/languages/ko.json |  4 ++++
 frontend/src/theme-overrides.css       |  2 +-
 6 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/frontend/src/features/assets/page.tsx b/frontend/src/features/assets/page.tsx
index 274a4e6..48dd5e3 100644
--- a/frontend/src/features/assets/page.tsx
+++ b/frontend/src/features/assets/page.tsx
@@ -772,7 +772,6 @@ export function ProfileCatalog({
           test={test}
           save={saveProfile}
           tested={tested}
-          onClose={() => setOpen(false)}
           t={locales[locale].evaluation}
           help={copy.profileForm}
         />
diff --git a/frontend/src/features/builds/page.tsx b/frontend/src/features/builds/page.tsx
index deefa17..b0da72f 100644
--- a/frontend/src/features/builds/page.tsx
+++ b/frontend/src/features/builds/page.tsx
@@ -102,6 +102,7 @@ type BuildWizardCopy = {
   timezone: LabelCopy;
   repeatInterval: LabelCopy;
   iterationTiming: LabelCopy;
+  overrunPolicy: LabelCopy;
   iterationTimingAfterCompletion: string;
   iterationTimingFixed: string;
   iterationTimingWait: string;
@@ -228,7 +229,6 @@ export function ProfileForm({
   test,
   save,
   tested,
-  onClose,
   t,
   help,
 }: {
@@ -237,7 +237,6 @@ export function ProfileForm({
   test: () => void;
   save: () => void;
   tested: boolean;
-  onClose: () => void;
   t: typeof locales.en.evaluation;
   help: ProfileFormCopy;
 }) {
@@ -313,9 +312,6 @@ export function ProfileForm({
         </>
       )}
       <div className="modal-actions">
-        <button className="ghost" onClick={onClose}>
-          {t.cancel}
-        </button>
         <button className="ghost" onClick={test}>
           <Bot size={15} />
           {t.test}
@@ -338,7 +334,6 @@ function Direct({
   executions,
   targets,
   onSave,
-  onClose,
   locale,
 }: {
   d: Draft;
@@ -350,7 +345,6 @@ function Direct({
   executions: ExecutionEnvironment[];
   targets: TargetEnvironment[];
   onSave: () => void;
-  onClose: () => void;
   locale: Locale;
 }) {
   const t = locales[locale],
@@ -519,8 +513,8 @@ function Direct({
           </Field>
           <Field label={copy.iterationTiming.label} description={copy.iterationTiming.hint}>
             <select value={d.cadence_mode} onChange={(e) => setD({ ...d, cadence_mode: e.target.value as Draft["cadence_mode"] })}><option value="after_completion">{copy.iterationTimingAfterCompletion}</option><option value="fixed">{copy.iterationTimingFixed}</option></select>
-            {d.cadence_mode === "fixed" && <select value={d.overrun_policy} onChange={(e) => setD({ ...d, overrun_policy: e.target.value as Draft["overrun_policy"] })}><option value="wait">{copy.iterationTimingWait}</option><option value="interrupt_eval">{copy.iterationTimingInterrupt}</option></select>}
           </Field>
+          {d.cadence_mode === "fixed" && <Field label={copy.overrunPolicy.label} description={copy.overrunPolicy.hint}><select value={d.overrun_policy} onChange={(e) => setD({ ...d, overrun_policy: e.target.value as Draft["overrun_policy"] })}><option value="wait">{copy.iterationTimingWait}</option><option value="interrupt_eval">{copy.iterationTimingInterrupt}</option></select></Field>}
           <Field label={copy.runLimit.label} description={copy.runLimit.hint}>
             <input
               type="number"
@@ -583,7 +577,6 @@ function Direct({
       )}
       {step === 5 && (
         <div className="wizard-review">
-          <p>{t.ui.review}</p>
           <dl>
             <dt>{copy.name}</dt>
             <dd>{d.name || "—"}</dd>
@@ -609,9 +602,6 @@ function Direct({
             {t.ui.save}
           </button>
         )}
-        <button className="ghost" onClick={onClose}>
-          {t.ui.cancel}
-        </button>
       </div>
     </div>
   );
@@ -1187,7 +1177,6 @@ export function BuildsPage(props: {
             executions={executionEnvironments}
             targets={targetEnvironments}
             onSave={save}
-            onClose={() => setOpen(false)}
             locale={locale}
           />
         )}
diff --git a/frontend/src/locales/languages/en.json b/frontend/src/locales/languages/en.json
index f9a5a3e..5bad97d 100644
--- a/frontend/src/locales/languages/en.json
+++ b/frontend/src/locales/languages/en.json
@@ -195,6 +195,10 @@
         "label": "Iteration timing",
         "hint": "Choose whether the interval begins after completion or stays on a fixed clock."
       },
+      "overrunPolicy": {
+        "label": "Overrun policy",
+        "hint": "Choose what happens when an evaluation is still running at the next fixed interval."
+      },
       "iterationTimingAfterCompletion": "Wait after completion",
       "iterationTimingFixed": "Fixed interval",
       "iterationTimingWait": "Start as soon as the current work finishes",
diff --git a/frontend/src/locales/languages/ja.json b/frontend/src/locales/languages/ja.json
index d422304..27e129c 100644
--- a/frontend/src/locales/languages/ja.json
+++ b/frontend/src/locales/languages/ja.json
@@ -194,6 +194,10 @@
         "label": "反復実行のタイミング",
         "hint": "前の実行の完了後に間隔を開始するか、固定時刻を基準に実行するかを選択します。"
       },
+      "overrunPolicy": {
+        "label": "実行超過時の処理",
+        "hint": "次の固定間隔になっても評価が実行中の場合の処理を選択します。"
+      },
       "iterationTimingAfterCompletion": "完了後に待機",
       "iterationTimingFixed": "固定間隔",
       "iterationTimingWait": "現在の作業が終わり次第開始",
diff --git a/frontend/src/locales/languages/ko.json b/frontend/src/locales/languages/ko.json
index a7fd349..4fa0676 100644
--- a/frontend/src/locales/languages/ko.json
+++ b/frontend/src/locales/languages/ko.json
@@ -194,6 +194,10 @@
         "label": "반복 실행 시점",
         "hint": "이전 실행이 끝난 뒤 간격을 시작할지, 고정된 시각 기준으로 실행할지 선택합니다."
       },
+      "overrunPolicy": {
+        "label": "실행 초과 처리",
+        "hint": "다음 고정 간격 시점에도 평가가 실행 중일 때의 처리 방식을 선택합니다."
+      },
       "iterationTimingAfterCompletion": "완료 후 대기",
       "iterationTimingFixed": "고정 간격",
       "iterationTimingWait": "현재 작업이 끝나는 즉시 시작",
diff --git a/frontend/src/theme-overrides.css b/frontend/src/theme-overrides.css
index e6f4910..ed34b89 100644
--- a/frontend/src/theme-overrides.css
+++ b/frontend/src/theme-overrides.css
@@ -45,7 +45,7 @@ footer { display:flex; align-items:center; justify-content:space-between; margin
 .build-form { grid-template-columns:1fr; }.modal-setting-row { display:grid; grid-template-columns:180px minmax(0,1fr); align-items:center; gap:18px; padding:11px 0; border-bottom:1px solid var(--line); color:var(--text); font-size:12px; }.modal-setting-row textarea { min-height:150px; resize:vertical; }.build-approval-toggle { display:flex; align-items:center; gap:7px; }.prompt-changes { display:grid; gap:12px; }.prompt-changes > section { overflow:hidden; border:1px solid var(--line); border-radius:8px; background:var(--surface-raised); }.prompt-version-navigator { display:flex; align-items:center; justify-content:center; gap:10px; }.prompt-version-navigator span { min-width:94px; color:var(--muted); font:11px 'DM Mono',monospace; text-align:center; }.prompt-changes__head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-bottom:1px solid var(--line); }.prompt-changes__head div { display:grid; gap:3px; min-width:0; }.prompt-changes__head small { overflow:hidden; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; }.prompt-change-meta,.prompt-changes > section > .hint { margin:0; padding:10px 12px; color:var(--muted); font:11px 'DM Mono',monospace; }.prompt-diff { max-height:340px; overflow:auto; margin:0; color:var(--text); background:var(--bg); font:11px/1.6 'DM Mono',monospace; }.prompt-diff__row { display:grid; grid-template-columns:46px 46px 22px minmax(max-content,1fr); min-width:max-content; }.prompt-diff__line-number { padding:0 10px; border-right:1px solid var(--line); color:var(--muted); text-align:right; user-select:none; }.prompt-diff__marker { padding:0 7px; color:var(--muted); text-align:center; user-select:none; }.prompt-diff__row code { min-width:0; padding-right:12px; color:inherit; white-space:pre; }.prompt-diff__row--added { color:#c5edbd; background:#203c2a; }.prompt-diff__row--added .prompt-diff__line-number,.prompt-diff__row--added .prompt-diff__marker { border-color:rgb(142 211 132 / .22); color:#a9db9d; }.prompt-diff__row--removed { color:#ffc2bb; background:#492a2a; }.prompt-diff__row--removed .prompt-diff__line-number,.prompt-diff__row--removed .prompt-diff__marker { border-color:rgb(235 142 132 / .24); color:#efaaa1; }.prompt-diff::selection { background:color-mix(in srgb,var(--accent) 35%,transparent); }
 .commit-changes { display:grid; gap:10px; max-height:min(510px,calc(100vh - 310px)); overflow:auto; padding-right:8px; }.commit-changes > section { display:grid; gap:12px; overflow:hidden; padding:14px; border:1px solid var(--line); border-radius:8px; background:var(--surface-raised); }.commit-changes__head { display:grid; gap:4px; }.commit-changes__head strong { font:600 12px 'DM Mono',monospace; }.commit-changes__head small,.commit-changes__group > small,.commit-changes__artifact { color:var(--muted); font:10px 'DM Mono',monospace; }.commit-changes__group { display:grid; gap:6px; }.commit-changes ul { display:grid; gap:4px; margin:0; padding:0; list-style:none; }.commit-changes li { display:flex; gap:9px; min-width:0; padding:7px 9px; border-radius:5px; background:var(--bg); font-size:11px; }.commit-changes li code { flex:none; color:var(--accent); font:10px 'DM Mono',monospace; }.commit-changes li span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.commit-changes__artifact { margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.commit-changes__artifact code { color:var(--text); }.commit-diff { border:1px solid var(--line); border-radius:6px; }.commit-diff__meta { min-width:max-content; padding:0 12px; color:var(--muted); background:var(--surface); }.commit-diff__meta code { white-space:pre; }
 .modal-hint,.modal-actions { grid-column:1/-1; }.modal-hint { margin:4px 0 0; color:var(--muted); font-size:11px; }.modal-actions { display:flex; justify-content:flex-end; gap:9px; padding-top:12px; border-top:1px solid var(--line); }.modal-actions button { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
-.wizard-steps { display:flex; list-style:none; gap:12px; margin:0 0 20px; padding:0; color:var(--muted); font-size:11px; }.wizard-steps .current { color:var(--accent); font-weight:700; }.wizard-steps .done { color:var(--text); }.build-source-list { display:grid; gap:8px; max-height:150px; overflow:auto; }.build-source-list label { display:flex; align-items:center; gap:8px; color:var(--text); }.wizard-review dl { display:grid; grid-template-columns:160px 1fr; gap:12px; margin:0 0 20px; }.wizard-review dt { color:var(--muted); }.wizard-review dd { margin:0; overflow-wrap:anywhere; }
+.wizard-steps { display:flex; list-style:none; gap:12px; margin:0 0 20px; padding:0; color:var(--muted); font-size:11px; }.wizard-steps .current { color:var(--accent); font-weight:700; }.build-source-list { display:grid; gap:8px; max-height:150px; overflow:auto; }.build-source-list label { display:flex; align-items:center; gap:8px; color:var(--text); }.wizard-review dl { display:grid; grid-template-columns:180px minmax(0,1fr); gap:18px; margin:0 0 20px; font-size:12px; }.wizard-review dt { color:var(--muted); }.wizard-review dd { margin:0; overflow-wrap:anywhere; }
 .wizard-steps button { border:0; padding:0; color:inherit; background:transparent; font:inherit; cursor:pointer; }.wizard-steps button:hover,.wizard-steps button:focus-visible { color:var(--accent); outline:0; text-decoration:underline; text-underline-offset:3px; }
 .remote-executor-fields { display:grid; gap:10px; }.http-headers { display:grid; gap:8px; padding:12px; border:1px solid var(--line); border-radius:8px; }.http-headers > div { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) 28px; gap:8px; }.http-headers > button { justify-self:start; }
 .modal:has(.workflow-editor) { width:min(1120px,100%); }.pipeline-yaml-editor { display:grid; gap:10px; width:100%; }.pipeline-yaml-editor .hint { margin:0; }.pipeline-yaml-editor .cm-editor { border:1px solid var(--line); border-radius:8px; overflow:hidden; }.pipeline-yaml-editor .cm-editor:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent); }.pipeline-yaml-editor .cm-scroller { font:12px/1.6 'DM Mono',monospace; }

From bb09f44e73c61ad76acc2807cafeb8dc9a8a624f Mon Sep 17 00:00:00 2001
From: forthfate <forthfate@naver.com>
Date: Mon, 14 Sep 2026 19:07:39 +0900
Subject: [PATCH 09/14] refactor: unify run labels and build controls

---
 frontend/src/components/ui/status-badge.tsx | 2 +-
 frontend/src/features/evaluations/page.tsx  | 6 +-----
 frontend/src/theme-overrides.css            | 2 +-
 3 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/ui/status-badge.tsx b/frontend/src/components/ui/status-badge.tsx
index b85a0f3..16879b8 100644
--- a/frontend/src/components/ui/status-badge.tsx
+++ b/frontend/src/components/ui/status-badge.tsx
@@ -1 +1 @@
-export function StatusBadge({value,label}:{value:string;label?:string}){const style=({succeeded:'good',running:'run',awaiting_approval:'wait',failed:'bad',committed:'good',evaluating:'run',enabled:'good',accepted:'good',applied:'good',rejected:'bad',proposed:'wait'}[value]??'muted');return <span className={`badge ${style}`}>{label??value}</span>}
+export function StatusBadge({value,label}:{value:string;label?:string}){const style=({queued:'wait',succeeded:'good',running:'run',awaiting_approval:'wait',failed:'bad',cancelled:'bad',committed:'good',evaluating:'run',enabled:'good',accepted:'good',applied:'good',rejected:'bad',proposed:'wait'}[value]??'muted');return <span className={`badge ${style}`}>{label??value}</span>}
diff --git a/frontend/src/features/evaluations/page.tsx b/frontend/src/features/evaluations/page.tsx
index d110f9f..48b5c16 100644
--- a/frontend/src/features/evaluations/page.tsx
+++ b/frontend/src/features/evaluations/page.tsx
@@ -489,11 +489,7 @@ export function EvaluationsPage({
     {
       id: "phase",
       header: t.phase,
-      render: (r) => (
-        <span className={`run-phase run-phase--${r.status}`}>
-          {finalPhase(r)}
-        </span>
-      ),
+      render: (r) => <StatusBadge value={r.status} label={finalPhase(r)} />,
       sortValue: (r) => finalPhase(r),
     },
     { id: "pid", header: t.pid, render: (r) => r.pid ?? r.last_pid ?? "—", sortValue: (r) => r.pid ?? r.last_pid ?? -1 },
diff --git a/frontend/src/theme-overrides.css b/frontend/src/theme-overrides.css
index ed34b89..abab810 100644
--- a/frontend/src/theme-overrides.css
+++ b/frontend/src/theme-overrides.css
@@ -108,7 +108,7 @@ footer { display:flex; align-items:center; justify-content:space-between; margin
 .tr--interactive { cursor:pointer; }
 .build-table .tr--interactive:hover,.active-evaluation-table .tr--interactive:hover { background:var(--surface-raised); }
 .active-evaluation-table { display:block; max-width:100%; overflow-x:auto; overflow-y:hidden; overscroll-behavior-inline:contain; -webkit-overflow-scrolling:touch; }.active-evaluation-table .tr { min-width:1240px; width:100%; }.active-evaluation-table .tr > span { min-width:0; padding-inline:6px; }.active-evaluation-table .tr > span:nth-child(n+3) { justify-content:center; }
-.modal--run-detail { width:min(1080px,100%); overflow-y:auto; overflow-x:hidden; }.modal--run-detail .modal-header { flex:none; }.run-detail-evaluation { display:flex; align-items:baseline; gap:9px; min-width:0; margin:0 0 14px; }.run-detail-evaluation strong { overflow:hidden; min-width:0; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }.run-detail-evaluation code { flex:none; color:var(--muted); font:10px 'DM Mono',monospace; }.run-detail-summary { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-bottom:20px; }.run-detail-summary > div { display:grid; gap:5px; min-width:0; padding:11px; border:1px solid var(--line); border-radius:8px; background:var(--bg); }.run-detail-summary small,.evaluation-summary small { color:var(--muted); font-size:10px; }.run-detail-summary strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }.run-phase { font:600 11px 'DM Mono',monospace; }.content .tr span.run-phase--queued,.content .tr span.run-phase--awaiting_approval { color:#f1d292; }.content .tr span.run-phase--running { color:#8cc8ff; }.content .tr span.run-phase--succeeded { color:#bce989; }.content .tr span.run-phase--failed,.content .tr span.run-phase--cancelled { color:#eaa89f; }.console-output { max-height:min(510px,calc(100vh - 310px)); overflow:auto; padding-right:8px; }.run-result { display:grid; gap:16px; max-height:min(510px,calc(100vh - 310px)); overflow:auto; padding:18px 8px 0 0; }.run-result h3 { margin:0 0 10px; font-size:13px; }.result-filter-trigger { position:relative; display:flex; justify-content:flex-start; }.result-translation-action { margin-left:auto; }.result-filter-popover { right:auto; left:0; }.result-filter-range { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.result-filter-range label { display:grid; gap:7px; color:var(--muted); font-size:10px; }.result-filter-range input { min-width:0; min-height:36px; padding:8px 10px; border-radius:7px; }.result-iterations { display:grid; gap:14px; }.result-iteration { display:grid; gap:16px; padding:14px; border:1px solid var(--line); border-radius:9px; background:var(--surface-raised); }.result-iteration > header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:12px; border-bottom:1px solid var(--line); }.result-iteration > header > strong { font:600 12px 'DM Mono',monospace; }.result-iteration > header > span { display:flex; align-items:center; gap:8px; }.result-iteration > header small { color:var(--muted); font-size:10px; }.result-iteration > header > span > b:last-child { font:11px 'DM Mono',monospace; }.evaluation-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:14px; border:1px solid var(--line); border-radius:8px; background:var(--bg); }.evaluation-summary > div { display:grid; gap:4px; }.evaluation-summary strong { font-size:18px; }.evaluation-summary span,.evaluation-summary p,.result-items p,.result-items small { color:var(--muted); font-size:11px; }.evaluation-summary p { grid-column:1/-1; margin:0; line-height:1.6; }.result-items { display:grid; gap:8px; }.result-items article { padding:12px; border:1px solid var(--line); border-radius:8px; background:var(--bg); }.result-row { display:grid; grid-template-columns:124px minmax(0,1fr) auto; gap:14px; align-items:start; }.result-row__time { color:var(--muted); font:10px/1.45 'DM Mono',monospace; }.result-row__body { min-width:0; }.result-row__body strong { display:block; font-size:12px; }.result-items p { margin:7px 0 0; line-height:1.55; }.result-row__metrics { display:flex; gap:13px; align-items:start; }.result-row__metrics > span { display:grid; gap:4px; min-width:52px; }.result-row__metrics small { font:9px 'DM Mono',monospace; text-transform:uppercase; }.result-row__metrics b:not(.decision) { font:11px 'DM Mono',monospace; }.decision { width:max-content; border-radius:999px; padding:3px 7px; color:var(--text); background:var(--surface-raised); font:500 9px 'DM Mono',monospace; text-transform:uppercase; }.decision--adopted,.decision--approved,.decision--low { color:#bce989; background:#283d29; }.decision--rejected,.decision--critical { color:#eaa89f; background:#402624; }.decision--medium,.decision--pending { color:#f1d292; background:#403420; } @media(max-width:720px){.result-row { grid-template-columns:1fr; gap:8px; }.result-row__metrics { flex-wrap:wrap; }.result-row__time { order:2; }.result-row__metrics { order:3; }.result-iteration > header { align-items:flex-start; flex-direction:column; }.result-filter-popover { right:auto; left:0; }}
+.modal--run-detail { width:min(1080px,100%); overflow-y:auto; overflow-x:hidden; }.modal--run-detail .modal-header { flex:none; }.run-detail-evaluation { display:flex; align-items:baseline; gap:9px; min-width:0; margin:0 0 14px; }.run-detail-evaluation strong { overflow:hidden; min-width:0; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }.run-detail-evaluation code { flex:none; color:var(--muted); font:10px 'DM Mono',monospace; }.run-detail-summary { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-bottom:20px; }.run-detail-summary > div { display:grid; gap:5px; min-width:0; padding:11px; border:1px solid var(--line); border-radius:8px; background:var(--bg); }.run-detail-summary small,.evaluation-summary small { color:var(--muted); font-size:10px; }.run-detail-summary strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }.console-output { max-height:min(510px,calc(100vh - 310px)); overflow:auto; padding-right:8px; }.run-result { display:grid; gap:16px; max-height:min(510px,calc(100vh - 310px)); overflow:auto; padding:18px 8px 0 0; }.run-result h3 { margin:0 0 10px; font-size:13px; }.result-filter-trigger { position:relative; display:flex; justify-content:flex-start; }.result-translation-action { margin-left:auto; }.result-filter-popover { right:auto; left:0; }.result-filter-range { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.result-filter-range label { display:grid; gap:7px; color:var(--muted); font-size:10px; }.result-filter-range input { min-width:0; min-height:36px; padding:8px 10px; border-radius:7px; }.result-iterations { display:grid; gap:14px; }.result-iteration { display:grid; gap:16px; padding:14px; border:1px solid var(--line); border-radius:9px; background:var(--surface-raised); }.result-iteration > header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:12px; border-bottom:1px solid var(--line); }.result-iteration > header > strong { font:600 12px 'DM Mono',monospace; }.result-iteration > header > span { display:flex; align-items:center; gap:8px; }.result-iteration > header small { color:var(--muted); font-size:10px; }.result-iteration > header > span > b:last-child { font:11px 'DM Mono',monospace; }.evaluation-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:14px; border:1px solid var(--line); border-radius:8px; background:var(--bg); }.evaluation-summary > div { display:grid; gap:4px; }.evaluation-summary strong { font-size:18px; }.evaluation-summary span,.evaluation-summary p,.result-items p,.result-items small { color:var(--muted); font-size:11px; }.evaluation-summary p { grid-column:1/-1; margin:0; line-height:1.6; }.result-items { display:grid; gap:8px; }.result-items article { padding:12px; border:1px solid var(--line); border-radius:8px; background:var(--bg); }.result-row { display:grid; grid-template-columns:124px minmax(0,1fr) auto; gap:14px; align-items:start; }.result-row__time { color:var(--muted); font:10px/1.45 'DM Mono',monospace; }.result-row__body { min-width:0; }.result-row__body strong { display:block; font-size:12px; }.result-items p { margin:7px 0 0; line-height:1.55; }.result-row__metrics { display:flex; gap:13px; align-items:start; }.result-row__metrics > span { display:grid; gap:4px; min-width:52px; }.result-row__metrics small { font:9px 'DM Mono',monospace; text-transform:uppercase; }.result-row__metrics b:not(.decision) { font:11px 'DM Mono',monospace; }.decision { width:max-content; border-radius:999px; padding:3px 7px; color:var(--text); background:var(--surface-raised); font:500 9px 'DM Mono',monospace; text-transform:uppercase; }.decision--adopted,.decision--approved,.decision--low { color:#bce989; background:#283d29; }.decision--rejected,.decision--critical { color:#eaa89f; background:#402624; }.decision--medium,.decision--pending { color:#f1d292; background:#403420; } @media(max-width:720px){.result-row { grid-template-columns:1fr; gap:8px; }.result-row__metrics { flex-wrap:wrap; }.result-row__time { order:2; }.result-row__metrics { order:3; }.result-iteration > header { align-items:flex-start; flex-direction:column; }.result-filter-popover { right:auto; left:0; }}
 .modal--confirm { width:min(420px,100%); }.confirm-description { margin:0; color:var(--muted); font-size:13px; line-height:1.6; }
 .result-behavior-summaries { display:grid; gap:8px; }
 .result-behavior-trace dl { display:grid; gap:10px; margin:0; }.result-behavior-trace dl > div { display:grid; gap:3px; }.result-behavior-trace dt { color:var(--muted); font:9px 'DM Mono',monospace; text-transform:uppercase; }.result-behavior-trace dd { margin:0; font-size:12px; line-height:1.55; }

From 8ac9027ce9046c1bcf7fa7ffd8d9e5cf52b1fafd Mon Sep 17 00:00:00 2001
From: forthfate <forthfate@naver.com>
Date: Mon, 14 Sep 2026 19:09:06 +0900
Subject: [PATCH 10/14] refactor: align run detail phase badge

---
 frontend/src/features/evaluations/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/features/evaluations/page.tsx b/frontend/src/features/evaluations/page.tsx
index 48b5c16..cfcb930 100644
--- a/frontend/src/features/evaluations/page.tsx
+++ b/frontend/src/features/evaluations/page.tsx
@@ -972,7 +972,7 @@ export function EvaluationsPage({
             </div>
             <div>
               <small>{l.phase}</small>
-              <strong>{finalPhase(selected)}</strong>
+              <StatusBadge value={selected.status} label={finalPhase(selected)} />
             </div>
             <div>
               <small>{t.elapsed}</small>

From a98f4ec81952877c2aa91c3512bb4ed172ddf833 Mon Sep 17 00:00:00 2001
From: forthfate <forthfate@naver.com>
Date: Mon, 14 Sep 2026 19:20:58 +0900
Subject: [PATCH 11/14] feat: add cycle improvement time ranges

---
 backend/app/main.py                         |  3 ++-
 frontend/src/features/improvements/page.tsx | 15 +++++++++++++--
 frontend/src/locales/languages/en.json      |  1 +
 frontend/src/locales/languages/ja.json      |  1 +
 frontend/src/locales/languages/ko.json      |  1 +
 frontend/src/theme-overrides.css            |  2 +-
 6 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/backend/app/main.py b/backend/app/main.py
index 503585f..4e5a09e 100644
--- a/backend/app/main.py
+++ b/backend/app/main.py
@@ -994,6 +994,7 @@ def template_translation_v1(values: TemplateTranslationRequest):
 
 class CycleAnalysisRequest(BaseModel):
     build_id: str = Field(min_length=1, max_length=200)
+    hours: int = Field(default=720, ge=1, le=8760)
     locale: str | None = Field(
         default=None, min_length=2, max_length=35, pattern=r"^[A-Za-z]{2,3}(?:-[A-Za-z0-9]{2,8})*$"
     )
@@ -1006,7 +1007,7 @@ def analyze_cycle(values: CycleAnalysisRequest):
     if not profile_name:
         raise HTTPException(409, "Select a System AI model in Settings first.")
     configured = profile(store.profiles(), profile_name)
-    analytics = store.improvement_analytics(720)
+    analytics = store.improvement_analytics(values.hours)
     trend = next(
         (item for item in analytics["iteration_trends"] if item["build_id"] == values.build_id),
         None,
diff --git a/frontend/src/features/improvements/page.tsx b/frontend/src/features/improvements/page.tsx
index dc3265a..0f36523 100644
--- a/frontend/src/features/improvements/page.tsx
+++ b/frontend/src/features/improvements/page.tsx
@@ -688,14 +688,15 @@ function CycleImprovementAI({
   const [data, setData] = useState<ImprovementAnalytics>(),
     [analysis, setAnalysis] = useState(""),
     [loading, setLoading] = useState(false),
+    [hours, setHours] = useState(720),
     t = locales[locale].cycle;
   useEffect(() => {
-    api<ImprovementAnalytics>("/api/improvement-analytics?hours=720")
+    api<ImprovementAnalytics>(`/api/improvement-analytics?hours=${hours}`)
       .then((next) => {
         setData(next);
       })
       .catch(() => setData(undefined));
-  }, []);
+  }, [hours]);
   const trend = data?.iteration_trends.find((item) => item.build_id === build),
     scores = (trend?.points ?? [])
       .map((item) => item.score)
@@ -713,6 +714,7 @@ function CycleImprovementAI({
     api<{ response: string }>("/api/cycle-improvements/analyze", "POST", {
       build_id: build,
       locale,
+      hours,
     })
       .then((result) => setAnalysis(result.response))
       .catch((error) => setAnalysis(error.message))
@@ -724,6 +726,15 @@ function CycleImprovementAI({
         <PanelHeader
           title={<SectionInfo title={t.title} description={t.titleHint} />}
         />
+        <label>
+          {t.range}
+          <select value={hours} onChange={(event) => setHours(Number(event.target.value))}>
+            <option value={24}>24h</option>
+            <option value={72}>3d</option>
+            <option value={168}>7d</option>
+            <option value={720}>30d</option>
+          </select>
+        </label>
       </div>
       <p className="hint">{t.description}</p>
       {build && (
diff --git a/frontend/src/locales/languages/en.json b/frontend/src/locales/languages/en.json
index 5bad97d..ea6b769 100644
--- a/frontend/src/locales/languages/en.json
+++ b/frontend/src/locales/languages/en.json
@@ -388,6 +388,7 @@
     "cycle": {
       "title": "Cycle Improvement AI",
       "build": "Build",
+      "range": "Range",
       "description": "Diagnose the selected build’s PDCA flow, proposal decisions, and score trend together.",
       "titleHint": "Diagnose the selected build’s PDCA flow and operating bottlenecks.",
       "health": "Cycle health",
diff --git a/frontend/src/locales/languages/ja.json b/frontend/src/locales/languages/ja.json
index 27e129c..e81472a 100644
--- a/frontend/src/locales/languages/ja.json
+++ b/frontend/src/locales/languages/ja.json
@@ -387,6 +387,7 @@
     "cycle": {
       "title": "サイクル改善AI",
       "build": "ビルド",
+      "range": "期間",
       "description": "選択したビルドの PDCA フロー、提案判断、スコア推移をまとめて診断します。",
       "titleHint": "選択したビルドの PDCA フローと運用上のボトルネックを診断します。",
       "health": "サイクルの健全性",
diff --git a/frontend/src/locales/languages/ko.json b/frontend/src/locales/languages/ko.json
index 4fa0676..0008712 100644
--- a/frontend/src/locales/languages/ko.json
+++ b/frontend/src/locales/languages/ko.json
@@ -387,6 +387,7 @@
     "cycle": {
       "title": "사이클 개선 AI",
       "build": "빌드",
+      "range": "기간",
       "description": "선택한 빌드의 PDCA 흐름, 제안 결정, 점수 추세를 함께 진단합니다.",
       "titleHint": "선택한 빌드의 PDCA 흐름과 운영 병목을 진단합니다.",
       "health": "사이클 건강도",
diff --git a/frontend/src/theme-overrides.css b/frontend/src/theme-overrides.css
index abab810..758cb45 100644
--- a/frontend/src/theme-overrides.css
+++ b/frontend/src/theme-overrides.css
@@ -114,7 +114,7 @@ footer { display:flex; align-items:center; justify-content:space-between; margin
 .result-behavior-trace dl { display:grid; gap:10px; margin:0; }.result-behavior-trace dl > div { display:grid; gap:3px; }.result-behavior-trace dt { color:var(--muted); font:9px 'DM Mono',monospace; text-transform:uppercase; }.result-behavior-trace dd { margin:0; font-size:12px; line-height:1.55; }
 .proposal-tree { display:grid; gap:10px; margin-top:16px; }.proposal-tree details { min-width:0; border-left:1px solid var(--line); }.proposal-tree summary { display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; list-style:none; }.proposal-tree summary::-webkit-details-marker { display:none; }.proposal-tree summary::before { content:'▸'; margin-right:8px; color:var(--muted); }.proposal-tree details[open] > summary::before { content:'▾'; }.proposal-tree__build { padding:12px; border:1px solid var(--line)!important; border-radius:8px; background:var(--bg); }.proposal-tree__build > summary > strong { font-size:13px; }.proposal-tree summary small { color:var(--muted); font:10px 'DM Mono',monospace; }.proposal-tree__run { margin:10px 0 0 11px; padding:10px 0 0 13px; }.proposal-tree__run > summary { justify-content:flex-start; }.proposal-tree__run > summary span,.proposal-tree__iteration > summary span { display:grid; gap:3px; }.proposal-tree__run > summary strong { font-size:11px; }.proposal-tree__iteration { margin:9px 0 0 11px; padding:9px 0 0 13px; }.proposal-tree__iteration > summary { padding:8px 10px; border:1px solid var(--line); border-radius:7px; background:var(--surface-raised); }.proposal-tree__iteration > div { display:grid; gap:6px; margin:7px 0 0 12px; }.proposal-tree__item { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:10px; border:1px solid var(--line); border-radius:7px; color:var(--text); background:var(--surface); text-align:left; }.proposal-tree__item:hover { border-color:var(--accent); background:var(--surface-raised); }.proposal-tree__item > span { display:grid; gap:3px; min-width:0; }.proposal-tree__item strong { overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.proposal-tree__item small { color:var(--muted); font-size:10px; }
 .proposal-tree__iteration-meta,.proposal-tree__item-meta { display:flex!important; align-items:center; gap:8px; flex:none; }.proposal-tree__score { padding:3px 6px; border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line)); border-radius:999px; color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--bg)); font:600 10px 'DM Mono',monospace; white-space:nowrap; }
-.cycle-interventions__head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }.cycle-interventions__head .panel-head { margin:0; }.cycle-interventions__head label { display:grid; gap:6px; color:var(--muted); font-size:10px; }.cycle-interventions__head select { min-width:220px; }.cycle-health { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:16px 0; }.cycle-health article { display:grid; gap:5px; padding:12px; border:1px solid var(--line); border-radius:8px; background:var(--bg); }.cycle-health small { color:var(--muted); font-size:10px; }.cycle-health strong { font:600 14px 'DM Mono',monospace; }.cycle-ai-action { display:grid; gap:10px; margin:16px 0; }.cycle-ai-action .approve { justify-self:start; }.cycle-ai-action pre { max-height:340px; overflow:auto; margin:0; padding:12px; border:1px solid var(--line); border-radius:8px; background:var(--bg); white-space:pre-wrap; font:11px/1.6 'DM Mono',monospace; } @media(max-width:720px){.cycle-interventions__head { flex-direction:column; }.cycle-interventions__head select { min-width:0; }.cycle-health { grid-template-columns:1fr; }}
+.cycle-interventions__head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }.cycle-interventions__head .panel-head { margin:0; }.cycle-interventions__head label { display:flex!important; align-items:center; gap:8px; color:var(--muted); font-size:11px; white-space:nowrap; }.cycle-interventions__head select { width:auto; min-width:76px; }.cycle-health { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:16px 0; }.cycle-health article { display:grid; gap:5px; padding:12px; border:1px solid var(--line); border-radius:8px; background:var(--bg); }.cycle-health small { color:var(--muted); font-size:10px; }.cycle-health strong { font:600 14px 'DM Mono',monospace; }.cycle-ai-action { display:grid; gap:10px; margin:16px 0; }.cycle-ai-action .approve { justify-self:start; }.cycle-ai-action pre { max-height:340px; overflow:auto; margin:0; padding:12px; border:1px solid var(--line); border-radius:8px; background:var(--bg); white-space:pre-wrap; font:11px/1.6 'DM Mono',monospace; } @media(max-width:720px){.cycle-interventions__head { flex-direction:column; }.cycle-interventions__head select { min-width:76px; }.cycle-health { grid-template-columns:1fr; }}
 .cycle-ai-response { max-height:340px; overflow:auto; padding:14px; border:1px solid var(--line); border-radius:8px; background:var(--bg); font-size:12px; line-height:1.65; }.cycle-ai-response > :first-child { margin-top:0; }.cycle-ai-response > :last-child { margin-bottom:0; }.cycle-ai-response h1,.cycle-ai-response h2,.cycle-ai-response h3 { margin:14px 0 7px; font-size:13px; }.cycle-ai-response p,.cycle-ai-response ul,.cycle-ai-response ol { margin:8px 0; }.cycle-ai-response ul,.cycle-ai-response ol { padding-left:20px; }.cycle-ai-response code { font:10px 'DM Mono',monospace; }.cycle-ai-response pre { overflow:auto; padding:9px; border-radius:6px; background:var(--surface-raised); }
 .catalog-list { display:grid; gap:6px; max-height:360px; overflow-y:auto; overscroll-behavior:contain; }.catalog-row { width:100%; display:grid; min-height:28px; gap:4px; padding:0; border:0; border-top:1px solid var(--line); color:var(--text); background:transparent; text-align:left; }.catalog-row:first-child { border-top:0; }.catalog-row:hover { color:var(--accent); background:var(--surface-raised); }.catalog-row strong { font-size:12px; }.catalog-row span { color:var(--muted); font-size:11px; }.catalog-empty { margin:0; padding:14px 6px; color:var(--muted); font-size:12px; line-height:1.55; border-top:1px solid var(--line); }
 .catalog-list__header { position:sticky; top:0; z-index:1; display:grid; min-height:28px; grid-template-columns:minmax(0,1fr) 140px 56px; align-items:center; gap:8px; padding:0 6px; border-bottom:1px solid var(--line); background:var(--surface); }.catalog-list__header button,.catalog-list__header > span { display:inline-flex; align-items:center; gap:4px; padding:0; border:0; color:var(--muted); background:transparent; font:10px 'DM Mono',monospace; text-transform:uppercase; text-align:left; }.catalog-list__header button { cursor:pointer; }.catalog-list__header button:hover { color:var(--accent); }

From ecd8a95ec1147713a605b2583ed83428581fca7d Mon Sep 17 00:00:00 2001
From: forthfate <forthfate@naver.com>
Date: Mon, 14 Sep 2026 19:26:08 +0900
Subject: [PATCH 12/14] feat: add persona journey evidence viewers

---
 backend/orbit_sdk.py                          |  4 +--
 frontend/src/features/evaluations/page.tsx    |  2 ++
 .../evaluations/run-detail-result-panel.tsx   | 32 ++++++++++++++++---
 frontend/src/locales/languages/en.json        |  4 +++
 frontend/src/locales/languages/ja.json        |  4 +++
 frontend/src/locales/languages/ko.json        |  4 +++
 frontend/src/theme-overrides.css              |  1 +
 7 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/backend/orbit_sdk.py b/backend/orbit_sdk.py
index 25f4b7d..f9e8fda 100644
--- a/backend/orbit_sdk.py
+++ b/backend/orbit_sdk.py
@@ -1633,7 +1633,7 @@ def playwright_journey(self, cases: list[dict[str, object]] | None = None) -> di
             cases: Optional fixed cases to run. The build's selected cases are used when omitted.
 
         Returns:
-            Per-case pass/fail evidence, screenshots, and artifact directory metadata.
+            Per-case pass/fail evidence, screenshots, page HTML, and artifact directory metadata.
         """
         build = self.build
         base_url = str(
@@ -1664,7 +1664,7 @@ def playwright_journey(self, cases: list[dict[str, object]] | None = None) -> di
         }
         script = r"""const fs=require('fs'); const { chromium }=require(process.argv[1]); const input=JSON.parse(process.argv[2]);
 (async()=>{const launch={headless:input.headless}; if(input.executablePath)launch.executablePath=input.executablePath; else if(process.env.SIM_BROWSER_BIN)launch.executablePath=process.env.SIM_BROWSER_BIN; const browser=await chromium.launch(launch); const results=[];
-for(const item of input.cases){const page=await browser.newPage();const path=String(item.path||'/');const url=new URL(path,input.baseUrl).toString();const id=String(item.id||'case').replace(/[^a-zA-Z0-9_-]/g,'-');const screenshot=`${input.artifacts}/${id}.png`;try{await page.goto(url,{waitUntil:'domcontentloaded',timeout:30000});const expected=String(item.expected_text||'').trim();const passed=!expected||await page.getByText(expected,{exact:false}).first().isVisible({timeout:5000});await page.screenshot({path:screenshot,fullPage:true});results.push({id:item.id,name:item.name,url,passed,expected_text:expected,screenshot});}catch(error){try{await page.screenshot({path:screenshot,fullPage:true});}catch{}results.push({id:item.id,name:item.name,url,passed:false,error:String(error),screenshot});}finally{await page.close();}}
+for(const item of input.cases){const page=await browser.newPage();const path=String(item.path||'/');const url=new URL(path,input.baseUrl).toString();const id=String(item.id||'case').replace(/[^a-zA-Z0-9_-]/g,'-');const screenshot=`${input.artifacts}/${id}.png`;const html=`${input.artifacts}/${id}.html`;try{await page.goto(url,{waitUntil:'domcontentloaded',timeout:30000});const expected=String(item.expected_text||'').trim();const passed=!expected||await page.getByText(expected,{exact:false}).first().isVisible({timeout:5000});await page.screenshot({path:screenshot,fullPage:true});await fs.promises.writeFile(html,await page.content());results.push({id:item.id,name:item.name,url,passed,expected_text:expected,screenshot,html});}catch(error){try{await page.screenshot({path:screenshot,fullPage:true});await fs.promises.writeFile(html,await page.content());}catch{}results.push({id:item.id,name:item.name,url,passed:false,error:String(error),screenshot,html});}finally{await page.close();}}
 await browser.close(); console.log(JSON.stringify({base_url:input.baseUrl,results}));})().catch(error=>{console.error(error);process.exit(1)});"""
         environment = dict(self.environment)
         library_path = str(build.get("browser_library_path", "")).strip()
diff --git a/frontend/src/features/evaluations/page.tsx b/frontend/src/features/evaluations/page.tsx
index cfcb930..847eb02 100644
--- a/frontend/src/features/evaluations/page.tsx
+++ b/frontend/src/features/evaluations/page.tsx
@@ -1296,6 +1296,8 @@ export function EvaluationsPage({
                 error={resultTranslations.error && <small className="hint">{translationCopy.failed}</small>}
                 records={resultRecords}
                 summaries={resultBehaviorTraces}
+                runId={selected.id}
+                steps={steps}
                 improvements={resultImprovements}
                 issues={resultIssues}
                 l={l}
diff --git a/frontend/src/features/evaluations/run-detail-result-panel.tsx b/frontend/src/features/evaluations/run-detail-result-panel.tsx
index 7fd8695..c13b044 100644
--- a/frontend/src/features/evaluations/run-detail-result-panel.tsx
+++ b/frontend/src/features/evaluations/run-detail-result-panel.tsx
@@ -1,5 +1,7 @@
 import { useState, type ReactNode } from "react";
-import { FileSearch } from "lucide-react";
+import { CodeXml, Image } from "lucide-react";
+import type { RunStepResult } from "../../domain/models";
+import { Modal } from "../../components/ui/modal";
 import { intlLocales, type Locale } from "../../locales";
 
 type Messages = Record<string, string | undefined>;
@@ -10,8 +12,28 @@ type BehaviorTrace = {
   summary?: string;
   trace?: { persona_goal?: string; current_action?: string; decision?: string; next_action?: string; evidence?: string; expectation?: string; interpretation?: string; impact?: string; next_step?: string; purpose?: string; rationale?: string; observation?: string };
 };
+type EvidenceArtifact = { id?: string; name?: string; screenshot?: string; html?: string };
 const time = (locale: Locale, value?: string) => value ? new Intl.DateTimeFormat(intlLocales[locale], { dateStyle: "medium", timeStyle: "medium" }).format(new Date(value)) : "—";
 
+function browserJourney(result?: Record<string, unknown>) {
+  if (!result) return undefined;
+  const direct = result.browser_journey;
+  if (direct && typeof direct === "object") return direct as { results?: EvidenceArtifact[] };
+  for (const key of ["user_journey", "improvement_cycle"]) {
+    const cycle = result[key];
+    if (!cycle || typeof cycle !== "object") continue;
+    const evidence = (cycle as { evidence?: unknown }).evidence;
+    if (evidence && typeof evidence === "object") return evidence as { results?: EvidenceArtifact[] };
+  }
+  return undefined;
+}
+
+function artifactUrl(runId: string, iteration: number, path: string) {
+  const normalized = path.replaceAll("\\", "/"), marker = `/loop-${iteration}/`;
+  const relative = normalized.includes(marker) ? normalized.split(marker).at(-1)! : normalized.split("/").at(-1)!;
+  return `/api/runs/${encodeURIComponent(runId)}/artifacts/${iteration}/${relative.split("/").map(encodeURIComponent).join("/")}`;
+}
+
 function ResultList({ items, kind, locale, empty }: { items: RecordItem[]; kind: "improvement" | "issue"; locale: Locale; empty: string }) {
   return <div className="result-items result-items--scrollable">{items.length ? items.map((item, index) => {
     const status = String(item.status ?? "—"), severity = String(item.severity ?? "—"), reportedAt = typeof item.reported_at === "string" ? item.reported_at : undefined;
@@ -19,8 +41,8 @@ function ResultList({ items, kind, locale, empty }: { items: RecordItem[]; kind:
   }) : <p className="hint result-empty">{empty}</p>}</div>;
 }
 
-export function EvaluationResultPanel({ error, records, summaries, improvements, issues, l, locale }: { error?: ReactNode; records: unknown[]; summaries: BehaviorTrace[]; improvements: RecordItem[]; issues: RecordItem[]; l: Messages; locale: Locale }) {
-  const [evidenceIteration, setEvidenceIteration] = useState<number | null>(null);
+export function EvaluationResultPanel({ error, records, summaries, steps, runId, improvements, issues, l, locale }: { error?: ReactNode; records: unknown[]; summaries: BehaviorTrace[]; steps: RunStepResult[]; runId: string; improvements: RecordItem[]; issues: RecordItem[]; l: Messages; locale: Locale }) {
+  const [evidenceModal, setEvidenceModal] = useState<{ kind: "image" | "html"; artifacts: EvidenceArtifact[]; iteration: number } | null>(null);
   const traceFields = (item: BehaviorTrace) => {
     if (!item.trace) return [];
     const trace = item.trace;
@@ -49,5 +71,7 @@ export function EvaluationResultPanel({ error, records, summaries, improvements,
     ];
     return fields.filter((field): field is [string | undefined, string] => Boolean(field[1]));
   };
-  return <>{error}{records.length ? <>{summaries.length > 0 && <section className="result-behavior-summaries"><h3>{l.observedBehavior}</h3><div className="result-items result-items--scrollable">{summaries.map((item) => <article className="result-row result-behavior-trace" key={item.iteration}><time className="result-row__time">{time(locale, item.recordedAt)}</time><div className="result-row__body">{traceFields(item).length ? <><dl>{traceFields(item).map(([label, value]) => <div key={label}><dt>{label}</dt><dd>{value}</dd></div>)}</dl>{evidenceIteration === item.iteration && item.trace?.evidence && <section className="result-trace-evidence"><strong>{l.traceEvidence}</strong><p>{item.trace.evidence}</p></section>}</> : <p>{item.summary}</p>}</div><div className="result-row__metrics"><span><small>Iteration</small><b>#{item.iteration}</b></span>{item.trace?.evidence && <button className="ghost icon-button" type="button" aria-label={evidenceIteration === item.iteration ? l.hideEvidence : l.viewEvidence} title={evidenceIteration === item.iteration ? l.hideEvidence : l.viewEvidence} onClick={() => setEvidenceIteration((current) => current === item.iteration ? null : item.iteration)}><FileSearch size={16} /></button>}</div></article>)}</div></section>}<section><h3>{l.proposals}</h3><ResultList locale={locale} kind="improvement" items={improvements} empty={l.noResults ?? ""} /></section><section><h3>{l.issues}</h3><ResultList locale={locale} kind="issue" items={issues} empty={l.noResults ?? ""} /></section></> : <p className="hint result-empty">{l.noMatchingResults}</p>}</>;
+  const artifactsFor = (iteration: number) => steps.filter((step) => step.loop_index === iteration).flatMap((step) => browserJourney(step.result)?.results ?? []);
+  const modalArtifacts = evidenceModal?.artifacts.filter((artifact) => evidenceModal.kind === "image" ? Boolean(artifact.screenshot) : Boolean(artifact.html)) ?? [];
+  return <>{error}{records.length ? <>{summaries.length > 0 && <section className="result-behavior-summaries"><h3>{l.observedBehavior}</h3><div className="result-items result-items--scrollable">{summaries.map((item) => { const artifacts = artifactsFor(item.iteration), imageArtifacts = artifacts.filter((artifact) => artifact.screenshot), htmlArtifacts = artifacts.filter((artifact) => artifact.html); return <article className="result-row result-behavior-trace" key={item.iteration}><time className="result-row__time">{time(locale, item.recordedAt)}</time><div className="result-row__body">{traceFields(item).length ? <dl>{traceFields(item).map(([label, value]) => <div key={label}><dt>{label}</dt><dd>{value}</dd></div>)}</dl> : <p>{item.summary}</p>}</div><div className="result-row__metrics"><span><small>Iteration</small><b>#{item.iteration}</b></span><button className="ghost icon-button" type="button" disabled={!imageArtifacts.length} aria-label={l.viewImageEvidence} title={l.viewImageEvidence} onClick={() => setEvidenceModal({ kind: "image", artifacts: imageArtifacts, iteration: item.iteration })}><Image size={16} /></button><button className="ghost icon-button" type="button" disabled={!htmlArtifacts.length} aria-label={l.viewHtmlEvidence} title={l.viewHtmlEvidence} onClick={() => setEvidenceModal({ kind: "html", artifacts: htmlArtifacts, iteration: item.iteration })}><CodeXml size={16} /></button></div></article>; })}</div></section>}<section><h3>{l.proposals}</h3><ResultList locale={locale} kind="improvement" items={improvements} empty={l.noResults ?? ""} /></section><section><h3>{l.issues}</h3><ResultList locale={locale} kind="issue" items={issues} empty={l.noResults ?? ""} /></section></> : <p className="hint result-empty">{l.noMatchingResults}</p>}<Modal open={Boolean(evidenceModal)} title={evidenceModal?.kind === "image" ? l.imageEvidence ?? "" : l.htmlEvidence ?? ""} onClose={() => setEvidenceModal(null)} className="modal--evidence">{modalArtifacts.map((artifact, index) => <figure className="persona-evidence" key={`${artifact.id ?? index}-${evidenceModal?.kind}`}><figcaption>{artifact.name ?? artifact.id ?? `#${index + 1}`}</figcaption>{evidenceModal?.kind === "image" ? <img src={artifactUrl(runId, evidenceModal.iteration, artifact.screenshot!)} alt={artifact.name ?? artifact.id ?? ""} /> : <iframe title={artifact.name ?? artifact.id ?? `#${index + 1}`} sandbox="" src={artifactUrl(runId, evidenceModal!.iteration, artifact.html!)} />}</figure>)}</Modal></>;
 }
diff --git a/frontend/src/locales/languages/en.json b/frontend/src/locales/languages/en.json
index ea6b769..565f4e9 100644
--- a/frontend/src/locales/languages/en.json
+++ b/frontend/src/locales/languages/en.json
@@ -692,6 +692,10 @@
       "traceNextStep": "Next journey step",
       "viewEvidence": "View evidence",
       "hideEvidence": "Hide evidence",
+      "viewImageEvidence": "View image evidence",
+      "viewHtmlEvidence": "View HTML evidence",
+      "imageEvidence": "Image evidence",
+      "htmlEvidence": "HTML evidence",
       "tracePurpose": "Purpose",
       "traceRationale": "Rationale",
       "traceObservation": "Observation",
diff --git a/frontend/src/locales/languages/ja.json b/frontend/src/locales/languages/ja.json
index e81472a..a15f2cf 100644
--- a/frontend/src/locales/languages/ja.json
+++ b/frontend/src/locales/languages/ja.json
@@ -691,6 +691,10 @@
       "traceNextStep": "次のジャーニー",
       "viewEvidence": "証拠を見る",
       "hideEvidence": "証拠を隠す",
+      "viewImageEvidence": "画像の証拠を見る",
+      "viewHtmlEvidence": "HTMLの証拠を見る",
+      "imageEvidence": "画像の証拠",
+      "htmlEvidence": "HTMLの証拠",
       "tracePurpose": "目的",
       "traceRationale": "根拠",
       "traceObservation": "観測",
diff --git a/frontend/src/locales/languages/ko.json b/frontend/src/locales/languages/ko.json
index 0008712..8e3e585 100644
--- a/frontend/src/locales/languages/ko.json
+++ b/frontend/src/locales/languages/ko.json
@@ -691,6 +691,10 @@
       "traceNextStep": "다음 여정",
       "viewEvidence": "증거 보기",
       "hideEvidence": "증거 숨기기",
+      "viewImageEvidence": "이미지 증거 보기",
+      "viewHtmlEvidence": "HTML 증거 보기",
+      "imageEvidence": "이미지 증거",
+      "htmlEvidence": "HTML 증거",
       "tracePurpose": "목적",
       "traceRationale": "근거",
       "traceObservation": "관찰",
diff --git a/frontend/src/theme-overrides.css b/frontend/src/theme-overrides.css
index 758cb45..5976c05 100644
--- a/frontend/src/theme-overrides.css
+++ b/frontend/src/theme-overrides.css
@@ -111,6 +111,7 @@ footer { display:flex; align-items:center; justify-content:space-between; margin
 .modal--run-detail { width:min(1080px,100%); overflow-y:auto; overflow-x:hidden; }.modal--run-detail .modal-header { flex:none; }.run-detail-evaluation { display:flex; align-items:baseline; gap:9px; min-width:0; margin:0 0 14px; }.run-detail-evaluation strong { overflow:hidden; min-width:0; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }.run-detail-evaluation code { flex:none; color:var(--muted); font:10px 'DM Mono',monospace; }.run-detail-summary { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-bottom:20px; }.run-detail-summary > div { display:grid; gap:5px; min-width:0; padding:11px; border:1px solid var(--line); border-radius:8px; background:var(--bg); }.run-detail-summary small,.evaluation-summary small { color:var(--muted); font-size:10px; }.run-detail-summary strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }.console-output { max-height:min(510px,calc(100vh - 310px)); overflow:auto; padding-right:8px; }.run-result { display:grid; gap:16px; max-height:min(510px,calc(100vh - 310px)); overflow:auto; padding:18px 8px 0 0; }.run-result h3 { margin:0 0 10px; font-size:13px; }.result-filter-trigger { position:relative; display:flex; justify-content:flex-start; }.result-translation-action { margin-left:auto; }.result-filter-popover { right:auto; left:0; }.result-filter-range { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.result-filter-range label { display:grid; gap:7px; color:var(--muted); font-size:10px; }.result-filter-range input { min-width:0; min-height:36px; padding:8px 10px; border-radius:7px; }.result-iterations { display:grid; gap:14px; }.result-iteration { display:grid; gap:16px; padding:14px; border:1px solid var(--line); border-radius:9px; background:var(--surface-raised); }.result-iteration > header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:12px; border-bottom:1px solid var(--line); }.result-iteration > header > strong { font:600 12px 'DM Mono',monospace; }.result-iteration > header > span { display:flex; align-items:center; gap:8px; }.result-iteration > header small { color:var(--muted); font-size:10px; }.result-iteration > header > span > b:last-child { font:11px 'DM Mono',monospace; }.evaluation-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:14px; border:1px solid var(--line); border-radius:8px; background:var(--bg); }.evaluation-summary > div { display:grid; gap:4px; }.evaluation-summary strong { font-size:18px; }.evaluation-summary span,.evaluation-summary p,.result-items p,.result-items small { color:var(--muted); font-size:11px; }.evaluation-summary p { grid-column:1/-1; margin:0; line-height:1.6; }.result-items { display:grid; gap:8px; }.result-items article { padding:12px; border:1px solid var(--line); border-radius:8px; background:var(--bg); }.result-row { display:grid; grid-template-columns:124px minmax(0,1fr) auto; gap:14px; align-items:start; }.result-row__time { color:var(--muted); font:10px/1.45 'DM Mono',monospace; }.result-row__body { min-width:0; }.result-row__body strong { display:block; font-size:12px; }.result-items p { margin:7px 0 0; line-height:1.55; }.result-row__metrics { display:flex; gap:13px; align-items:start; }.result-row__metrics > span { display:grid; gap:4px; min-width:52px; }.result-row__metrics small { font:9px 'DM Mono',monospace; text-transform:uppercase; }.result-row__metrics b:not(.decision) { font:11px 'DM Mono',monospace; }.decision { width:max-content; border-radius:999px; padding:3px 7px; color:var(--text); background:var(--surface-raised); font:500 9px 'DM Mono',monospace; text-transform:uppercase; }.decision--adopted,.decision--approved,.decision--low { color:#bce989; background:#283d29; }.decision--rejected,.decision--critical { color:#eaa89f; background:#402624; }.decision--medium,.decision--pending { color:#f1d292; background:#403420; } @media(max-width:720px){.result-row { grid-template-columns:1fr; gap:8px; }.result-row__metrics { flex-wrap:wrap; }.result-row__time { order:2; }.result-row__metrics { order:3; }.result-iteration > header { align-items:flex-start; flex-direction:column; }.result-filter-popover { right:auto; left:0; }}
 .modal--confirm { width:min(420px,100%); }.confirm-description { margin:0; color:var(--muted); font-size:13px; line-height:1.6; }
 .result-behavior-summaries { display:grid; gap:8px; }
+.modal--evidence { width:min(1040px,100%); }.persona-evidence { display:grid; gap:8px; margin:0 0 18px; }.persona-evidence:last-child { margin-bottom:0; }.persona-evidence figcaption { color:var(--muted); font:11px 'DM Mono',monospace; }.persona-evidence img,.persona-evidence iframe { display:block; width:100%; min-height:520px; max-height:calc(100vh - 190px); border:1px solid var(--line); border-radius:8px; background:white; object-fit:contain; } .persona-evidence iframe { background:var(--surface); }
 .result-behavior-trace dl { display:grid; gap:10px; margin:0; }.result-behavior-trace dl > div { display:grid; gap:3px; }.result-behavior-trace dt { color:var(--muted); font:9px 'DM Mono',monospace; text-transform:uppercase; }.result-behavior-trace dd { margin:0; font-size:12px; line-height:1.55; }
 .proposal-tree { display:grid; gap:10px; margin-top:16px; }.proposal-tree details { min-width:0; border-left:1px solid var(--line); }.proposal-tree summary { display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; list-style:none; }.proposal-tree summary::-webkit-details-marker { display:none; }.proposal-tree summary::before { content:'▸'; margin-right:8px; color:var(--muted); }.proposal-tree details[open] > summary::before { content:'▾'; }.proposal-tree__build { padding:12px; border:1px solid var(--line)!important; border-radius:8px; background:var(--bg); }.proposal-tree__build > summary > strong { font-size:13px; }.proposal-tree summary small { color:var(--muted); font:10px 'DM Mono',monospace; }.proposal-tree__run { margin:10px 0 0 11px; padding:10px 0 0 13px; }.proposal-tree__run > summary { justify-content:flex-start; }.proposal-tree__run > summary span,.proposal-tree__iteration > summary span { display:grid; gap:3px; }.proposal-tree__run > summary strong { font-size:11px; }.proposal-tree__iteration { margin:9px 0 0 11px; padding:9px 0 0 13px; }.proposal-tree__iteration > summary { padding:8px 10px; border:1px solid var(--line); border-radius:7px; background:var(--surface-raised); }.proposal-tree__iteration > div { display:grid; gap:6px; margin:7px 0 0 12px; }.proposal-tree__item { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:10px; border:1px solid var(--line); border-radius:7px; color:var(--text); background:var(--surface); text-align:left; }.proposal-tree__item:hover { border-color:var(--accent); background:var(--surface-raised); }.proposal-tree__item > span { display:grid; gap:3px; min-width:0; }.proposal-tree__item strong { overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.proposal-tree__item small { color:var(--muted); font-size:10px; }
 .proposal-tree__iteration-meta,.proposal-tree__item-meta { display:flex!important; align-items:center; gap:8px; flex:none; }.proposal-tree__score { padding:3px 6px; border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line)); border-radius:999px; color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--bg)); font:600 10px 'DM Mono',monospace; white-space:nowrap; }

From 95eb4445d32646f6bfa5645f54a6d1825b6dcef4 Mon Sep 17 00:00:00 2001
From: forthfate <forthfate@naver.com>
Date: Mon, 14 Sep 2026 19:35:58 +0900
Subject: [PATCH 13/14] feat: preview runner workflow graphs

---
 backend/app/main.py                          |  9 ++++
 backend/app/store.py                         | 17 +++++-
 frontend/src/components/ui/python-editor.tsx |  3 +-
 frontend/src/features/assets/page.tsx        | 54 +++++++++++++++-----
 frontend/src/locales/languages/en.json       |  3 ++
 frontend/src/locales/languages/ja.json       |  3 ++
 frontend/src/locales/languages/ko.json       |  3 ++
 frontend/src/theme-overrides.css             |  1 +
 8 files changed, 79 insertions(+), 14 deletions(-)

diff --git a/backend/app/main.py b/backend/app/main.py
index 4e5a09e..3e7eb31 100644
--- a/backend/app/main.py
+++ b/backend/app/main.py
@@ -444,6 +444,10 @@ class RunnerAssetCreate(RunnerAssetUpdate):
     template_id: str = Field(default="custom", max_length=64)
 
 
+class RunnerGraphPreview(BaseModel):
+    source: str = Field(min_length=1, max_length=100_000)
+
+
 class RunnerTemplateValues(BaseModel):
     id: str = Field(pattern=r"^[a-z][a-z0-9-]{2,63}$")
     name: str = Field(min_length=1, max_length=120)
@@ -505,6 +509,11 @@ def runners():
     return store.runners()
 
 
+@app.post("/api/runners/preview-graph")
+def preview_runner_graph(values: RunnerGraphPreview):
+    return safely(lambda: store.preview_runner_graph(values.source))
+
+
 @app.post("/api/runners")
 def create_runner(values: RunnerAssetCreate):
     return safely(lambda: store.create_runner(values.model_dump()))
diff --git a/backend/app/store.py b/backend/app/store.py
index 1ec42e3..78f989a 100644
--- a/backend/app/store.py
+++ b/backend/app/store.py
@@ -9,6 +9,7 @@
 import signal
 import subprocess
 import sys
+import tempfile
 import threading
 import time
 import uuid
@@ -2386,6 +2387,20 @@ def _runner_graph_definition(
         self, runner_id: str, repository: str | None, runner_version: int | None = None
     ) -> dict[str, Any] | None:
         """Read the runner's optional visual-workflow declaration safely."""
+        return self._runner_graph_from_entry(self._runner_entry_path(runner_id, runner_version), repository)
+
+    def preview_runner_graph(self, source: str) -> dict[str, Any] | None:
+        """Build a visual workflow from unsaved runner source without retaining it."""
+        source = self._canonicalize_runner_source(source)
+        compile(source, "runner-preview.py", "exec")
+        with tempfile.TemporaryDirectory(prefix="orbit-runner-graph-") as directory:
+            entry = Path(directory) / "runner.py"
+            entry.write_text(source, encoding="utf-8")
+            return self._runner_graph_from_entry(entry, None)
+
+    @staticmethod
+    def _runner_graph_from_entry(entry: Path, repository: str | None) -> dict[str, Any] | None:
+        """Execute one runner's graph-only entrypoint and validate its response."""
         environment = os.environ.copy()
         environment["PYTHONPATH"] = str(ROOT / "backend") + (
             os.pathsep + environment["PYTHONPATH"] if environment.get("PYTHONPATH") else ""
@@ -2394,7 +2409,7 @@ def _runner_graph_definition(
         environment["ORBIT_APP_DATA"] = str(APP_DATA)
         try:
             result = subprocess.run(
-                [sys.executable, str(self._runner_entry_path(runner_id, runner_version)), "--graph"],
+                [sys.executable, str(entry), "--graph"],
                 cwd=repository or ROOT,
                 text=True,
                 stdout=subprocess.PIPE,
diff --git a/frontend/src/components/ui/python-editor.tsx b/frontend/src/components/ui/python-editor.tsx
index 8623ea9..14f950e 100644
--- a/frontend/src/components/ui/python-editor.tsx
+++ b/frontend/src/components/ui/python-editor.tsx
@@ -3,7 +3,7 @@ import { python } from '@codemirror/lang-python'
 import { oneDark } from '@codemirror/theme-one-dark'
 import { EditorView } from '@codemirror/view'
 
-export function PythonEditor({value,onChange,ariaLabel}:{value:string;onChange:(value:string)=>void;ariaLabel:string}){
+export function PythonEditor({value,onChange,onBlur,ariaLabel}:{value:string;onChange:(value:string)=>void;onBlur?:()=>void;ariaLabel:string}){
   return <CodeMirror
     aria-label={ariaLabel}
     value={value}
@@ -13,6 +13,7 @@ export function PythonEditor({value,onChange,ariaLabel}:{value:string;onChange:(
     // letting one line widen the editor and push the save action off screen.
     extensions={[python(),EditorView.lineWrapping]}
     onChange={onChange}
+    onBlur={onBlur}
     basicSetup={{lineNumbers:true,highlightActiveLine:true,bracketMatching:true,foldGutter:true}}
   />
 }
diff --git a/frontend/src/features/assets/page.tsx b/frontend/src/features/assets/page.tsx
index 48dd5e3..fc631a4 100644
--- a/frontend/src/features/assets/page.tsx
+++ b/frontend/src/features/assets/page.tsx
@@ -21,6 +21,7 @@ import type {
   TargetTestCaseSet,
   TestCase,
   Workflow,
+  WorkflowGraphDefinition,
   WorkflowStep,
 } from "../../domain/models";
 import {
@@ -35,6 +36,7 @@ import { ConfirmDialog } from "../../components/ui/confirm-dialog";
 import { PanelHeader } from "../../components/ui/page-header";
 import { SectionInfo } from "../../components/ui/section-info";
 import { PythonEditor } from "../../components/ui/python-editor";
+import { WorkflowGraph } from "../../components/workflow-graph";
 import { YamlEditor } from "../../components/ui/yaml-editor";
 import { api } from "../../services/api";
 import { useTemplateTranslations } from "../../services/use-template-translation";
@@ -377,8 +379,17 @@ function RunnerModal({
   const [templates, setTemplates] = useState<RunnerTemplate[]>([]),
     [draft, setDraft] = useState<RunnerAsset | undefined>(editing ?? undefined),
     [selectedVersion, setSelectedVersion] = useState<number | null>(editing?.version ?? null),
-    [notice, setNotice] = useState("");
+    [notice, setNotice] = useState(""),
+    [editorTab, setEditorTab] = useState<"code" | "graph">("code"),
+    [workflowGraph, setWorkflowGraph] = useState<WorkflowGraphDefinition | null>(null),
+    [graphSource, setGraphSource] = useState(""),
+    [graphLoading, setGraphLoading] = useState(false),
+    [graphError, setGraphError] = useState("");
   const importInput = useRef<HTMLInputElement>(null);
+  const draftSource = useRef(draft?.source ?? ""), graphInFlight = useRef<string | null>(null);
+  useEffect(() => {
+    draftSource.current = draft?.source ?? "";
+  }, [draft?.source]);
   useEffect(() => {
     if (!editing)
       api<RunnerTemplate[]>("/api/runner-templates")
@@ -398,6 +409,27 @@ function RunnerModal({
     setDraft(undefined);
     setNotice("");
   };
+  const refreshWorkflowGraph = (source = draft?.source ?? "") => {
+    if (!source || source === graphSource || source === graphInFlight.current) return;
+    graphInFlight.current = source;
+    setGraphLoading(true);
+    setGraphError("");
+    api<WorkflowGraphDefinition | null>("/api/runners/preview-graph", "POST", { source })
+      .then((graph) => {
+        if (draftSource.current !== source) return;
+        setWorkflowGraph(graph);
+        setGraphSource(source);
+      })
+      .catch((error) => {
+        if (draftSource.current === source) setGraphError(error.message);
+      })
+      .finally(() => {
+        if (graphInFlight.current === source) {
+          graphInFlight.current = null;
+          setGraphLoading(false);
+        }
+      });
+  };
   const importTemplate = async (file: File | undefined) => {
     if (!file) return;
     try {
@@ -587,17 +619,15 @@ function RunnerModal({
           </label>
         )}
         {!editing && <p className="hint">{copy.initialVersion}</p>}
-        <label className="runner-source">
-          <FieldLabel
-            label={copy.source}
-            description={fieldHelp[locale].source}
-          />
-          <PythonEditor
-            ariaLabel={copy.source}
-            value={draft.source}
-            onChange={(source) => setDraft({ ...draft, source })}
-          />
-        </label>
+        <div className="runner-editor-tabs" role="tablist" aria-label={copy.source}>
+          <button className={editorTab === "code" ? "selected" : ""} role="tab" aria-selected={editorTab === "code"} type="button" onClick={() => setEditorTab("code")}><SectionInfo title={copy.source} description={fieldHelp[locale].source} /></button>
+          <button className={editorTab === "graph" ? "selected" : ""} role="tab" aria-selected={editorTab === "graph"} type="button" onClick={() => { setEditorTab("graph"); refreshWorkflowGraph(); }}>{copy.workflowGraph}</button>
+        </div>
+        {editorTab === "code" ? <div className="runner-source">
+          <PythonEditor ariaLabel={copy.source} value={draft.source} onChange={(source) => setDraft({ ...draft, source })} onBlur={() => refreshWorkflowGraph()} />
+        </div> : <section className="runner-workflow-graph">
+          {graphLoading ? <p className="hint">{copy.loadingGraph}</p> : workflowGraph?.nodes.length ? <WorkflowGraph nodes={workflowGraph.nodes} edges={workflowGraph.edges} /> : <p className="hint">{graphError || copy.noWorkflowGraph}</p>}
+        </section>}
         <div className="modal-actions">
           {notice && <small className="hint">{notice}</small>}
           <button className="ghost" type="button" onClick={() => save(true)}>
diff --git a/frontend/src/locales/languages/en.json b/frontend/src/locales/languages/en.json
index 565f4e9..5066941 100644
--- a/frontend/src/locales/languages/en.json
+++ b/frontend/src/locales/languages/en.json
@@ -538,6 +538,9 @@
       "current": "current",
       "initialVersion": "New runners are created as v1.",
       "source": "Runner code",
+      "workflowGraph": "Workflow graph",
+      "loadingGraph": "Building workflow graph...",
+      "noWorkflowGraph": "This runner has no declared workflow to display.",
       "saveAndOpen": "Save and open in VS Code",
       "save": "Save runner",
       "delete": "Delete"
diff --git a/frontend/src/locales/languages/ja.json b/frontend/src/locales/languages/ja.json
index a15f2cf..07e4498 100644
--- a/frontend/src/locales/languages/ja.json
+++ b/frontend/src/locales/languages/ja.json
@@ -537,6 +537,9 @@
       "current": "現在",
       "initialVersion": "新しいランナーは v1 として作成されます。",
       "source": "ランナーコード",
+      "workflowGraph": "ワークフローグラフ",
+      "loadingGraph": "ワークフローグラフを作成しています...",
+      "noWorkflowGraph": "このランナーには表示する宣言済みワークフローがありません。",
       "saveAndOpen": "保存して VS Code で開く",
       "save": "ランナーを保存",
       "delete": "削除"
diff --git a/frontend/src/locales/languages/ko.json b/frontend/src/locales/languages/ko.json
index 8e3e585..4202b0f 100644
--- a/frontend/src/locales/languages/ko.json
+++ b/frontend/src/locales/languages/ko.json
@@ -537,6 +537,9 @@
       "current": "현재",
       "initialVersion": "새 러너는 v1으로 생성됩니다.",
       "source": "러너 코드",
+      "workflowGraph": "워크플로우 그래프",
+      "loadingGraph": "워크플로우 그래프를 생성하는 중...",
+      "noWorkflowGraph": "이 러너에는 표시할 선언된 워크플로우가 없습니다.",
       "saveAndOpen": "저장 후 VS Code에서 열기",
       "save": "러너 저장",
       "delete": "삭제"
diff --git a/frontend/src/theme-overrides.css b/frontend/src/theme-overrides.css
index 5976c05..4f8a6f6 100644
--- a/frontend/src/theme-overrides.css
+++ b/frontend/src/theme-overrides.css
@@ -140,6 +140,7 @@ main > aside,main > .content { transition:width .2s ease,margin-left .2s ease,pa
 .result-items--scrollable { max-height:225px; }.combined-log-output .timestamped-log-output,.combined-log-output .telemetry-tree { max-height:240px; }.supervisor-output { height:min(765px,calc(100vh - 310px)); }
 @media (prefers-reduced-motion:reduce) { main > aside,main > .content { transition:none; } }
 .runner-template-picker { display:grid; gap:14px; }.runner-template-picker__head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }.runner-template-picker__head .hint { margin:0; }.template-picker-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }.runner-template-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.runner-template-card { display:grid; gap:9px; min-height:160px; padding:16px; border:1px solid var(--line); border-radius:9px; color:var(--text); text-align:left; background:var(--bg); cursor:pointer; }.runner-template-card:hover { border-color:var(--accent); background:var(--surface-raised); }.runner-template-card span,.runner-template-card small { color:var(--muted); font-size:11px; line-height:1.55; }.runner-template-selection { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:12px; border:1px solid color-mix(in srgb,var(--accent) 50%,var(--line)); border-radius:8px; background:color-mix(in srgb,var(--accent) 8%,var(--bg)); }.runner-template-selection > div { display:grid; gap:4px; min-width:0; }.runner-template-selection small,.runner-template-selection span { color:var(--muted); font-size:11px; }.runner-template-selection strong { font-size:13px; }.runner-template-selection span { line-height:1.45; }.runner-template-selection button { flex:none; }.runner-source { display:grid; gap:8px; color:var(--text); font-size:12px; }.runner-source textarea { min-height:440px; resize:vertical; font:12px/1.55 'DM Mono',monospace; tab-size:2; }
+.runner-editor-tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); }.runner-editor-tabs button { border:0; border-bottom:2px solid transparent; padding:8px 10px; color:var(--muted); background:transparent; font-size:12px; }.runner-editor-tabs button:hover,.runner-editor-tabs button.selected { border-bottom-color:var(--accent); color:var(--text); }.runner-workflow-graph { min-height:378px; }.runner-workflow-graph .hint { margin:0; padding:12px 0; }
 .runner-template-card small { display:none; }
 .catalog-row__created { color:var(--muted); font:10px 'DM Mono',monospace; }
 .skeleton { display:block; border-radius:5px; background:linear-gradient(90deg,var(--surface-raised) 25%,color-mix(in srgb,var(--muted) 18%,var(--surface-raised)) 50%,var(--surface-raised) 75%); background-size:200% 100%; animation:skeleton-shimmer 1.4s ease-in-out infinite; }.catalog-skeleton { display:grid; grid-template-columns:minmax(0,1fr) 180px; gap:7px 14px; padding:13px 4px; border-top:1px solid var(--line); }.catalog-skeleton__title { height:12px; }.catalog-skeleton__detail { height:10px; align-self:center; } @keyframes skeleton-shimmer { to { background-position:-200% 0; } } @media(prefers-reduced-motion:reduce) { .skeleton { animation:none; } }

From 3e003729b168f30a8627170bb009f0ab5a76a390 Mon Sep 17 00:00:00 2001
From: forthfate <forthfate@naver.com>
Date: Mon, 14 Sep 2026 19:39:43 +0900
Subject: [PATCH 14/14] feat: add empty runner template

---
 frontend/src/features/assets/page.tsx  | 11 +++++++++--
 frontend/src/locales/languages/en.json |  2 ++
 frontend/src/locales/languages/ja.json |  2 ++
 frontend/src/locales/languages/ko.json |  2 ++
 frontend/src/theme-overrides.css       |  2 +-
 5 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/frontend/src/features/assets/page.tsx b/frontend/src/features/assets/page.tsx
index fc631a4..237bf00 100644
--- a/frontend/src/features/assets/page.tsx
+++ b/frontend/src/features/assets/page.tsx
@@ -387,6 +387,13 @@ function RunnerModal({
     [graphError, setGraphError] = useState("");
   const importInput = useRef<HTMLInputElement>(null);
   const draftSource = useRef(draft?.source ?? ""), graphInFlight = useRef<string | null>(null);
+  const emptyTemplate: RunnerTemplate = {
+    id: "empty",
+    name: copy.empty,
+    description: copy.emptyDescription,
+    source: "from orbit_sdk import runner\n\n\n@runner.phase(\"before_all\")\ndef before_all(ctx):\n    pass\n\n\n@runner.phase(\"before_each\")\ndef before_each(ctx):\n    pass\n\n\n@runner.phase(\"execute\")\ndef execute(ctx):\n    pass\n\n\n@runner.phase(\"verify\")\ndef verify(ctx):\n    pass\n\n\n@runner.phase(\"after_each\")\ndef after_each(ctx):\n    pass\n\n\n@runner.phase(\"after_all\")\ndef after_all(ctx):\n    pass\n\n\nif __name__ == \"__main__\":\n    runner.main()\n",
+  };
+  const templateOptions = [emptyTemplate, ...templates];
   useEffect(() => {
     draftSource.current = draft?.source ?? "";
   }, [draft?.source]);
@@ -530,7 +537,7 @@ function RunnerModal({
             </div>
           </div>
           <div className="runner-template-grid">
-            {templates.map((template) => (
+            {templateOptions.map((template) => (
               <RunnerTemplateCard
                 key={template.id}
                 template={template}
@@ -546,7 +553,7 @@ function RunnerModal({
         {notice && <small className="hint">{notice}</small>}
       </Modal>
     );
-  const selectedTemplate = templates.find(
+  const selectedTemplate = templateOptions.find(
     (template) => template.id === draft.template_id,
   );
   const versions = editing?.versions ?? [];
diff --git a/frontend/src/locales/languages/en.json b/frontend/src/locales/languages/en.json
index 5066941..dbcf73b 100644
--- a/frontend/src/locales/languages/en.json
+++ b/frontend/src/locales/languages/en.json
@@ -530,6 +530,8 @@
       "importFailed": "Template import failed",
       "basedOn": "Based on template",
       "changeTemplate": "Change template",
+      "empty": "Empty",
+      "emptyDescription": "Start with an empty six-phase runner.",
       "id": "ID",
       "name": "Name",
       "description": "Description",
diff --git a/frontend/src/locales/languages/ja.json b/frontend/src/locales/languages/ja.json
index 07e4498..afb9f7d 100644
--- a/frontend/src/locales/languages/ja.json
+++ b/frontend/src/locales/languages/ja.json
@@ -529,6 +529,8 @@
       "importFailed": "テンプレートをインポートできませんでした",
       "basedOn": "テンプレートに基づく",
       "changeTemplate": "テンプレートを変更",
+      "empty": "Empty",
+      "emptyDescription": "空の6フェーズランナーから始めます。",
       "id": "ID",
       "name": "名前",
       "description": "説明",
diff --git a/frontend/src/locales/languages/ko.json b/frontend/src/locales/languages/ko.json
index 4202b0f..e015075 100644
--- a/frontend/src/locales/languages/ko.json
+++ b/frontend/src/locales/languages/ko.json
@@ -529,6 +529,8 @@
       "importFailed": "템플릿을 가져오지 못했습니다",
       "basedOn": "기반 템플릿",
       "changeTemplate": "템플릿 변경",
+      "empty": "Empty",
+      "emptyDescription": "비어 있는 6단계 러너로 시작합니다.",
       "id": "ID",
       "name": "이름",
       "description": "설명",
diff --git a/frontend/src/theme-overrides.css b/frontend/src/theme-overrides.css
index 4f8a6f6..9e2492e 100644
--- a/frontend/src/theme-overrides.css
+++ b/frontend/src/theme-overrides.css
@@ -139,7 +139,7 @@ main > aside,main > .content { transition:width .2s ease,margin-left .2s ease,pa
 .run-result { max-height:none; overflow:visible; padding:18px 8px 0 0; }.run-result h3 { margin:0 0 10px; }.result-items--scrollable { max-height:150px; overflow:auto; padding-right:4px; }.combined-log-output { display:block; height:auto; max-height:none; overflow:visible; padding-right:8px; }.combined-log-output section { display:block; min-height:0; height:auto; padding:14px 0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; }.combined-log-output section:last-child { border-bottom:0; }.combined-log-output section h3 { margin:0 0 10px; font-size:13px; }.combined-log-output .timestamped-log-output,.combined-log-output .telemetry-tree { max-height:160px; min-height:0; overflow:auto; }.combined-log-output .hint { margin:0; }.supervisor-output { grid-template-columns:1fr; grid-template-rows:repeat(2,minmax(0,1fr)); gap:16px; height:min(510px,calc(100vh - 310px)); padding:18px 8px 0 0; overflow:visible; }.supervisor-output section { height:auto; padding:0; border:0; border-radius:0; background:transparent; }
 .result-items--scrollable { max-height:225px; }.combined-log-output .timestamped-log-output,.combined-log-output .telemetry-tree { max-height:240px; }.supervisor-output { height:min(765px,calc(100vh - 310px)); }
 @media (prefers-reduced-motion:reduce) { main > aside,main > .content { transition:none; } }
-.runner-template-picker { display:grid; gap:14px; }.runner-template-picker__head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }.runner-template-picker__head .hint { margin:0; }.template-picker-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }.runner-template-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.runner-template-card { display:grid; gap:9px; min-height:160px; padding:16px; border:1px solid var(--line); border-radius:9px; color:var(--text); text-align:left; background:var(--bg); cursor:pointer; }.runner-template-card:hover { border-color:var(--accent); background:var(--surface-raised); }.runner-template-card span,.runner-template-card small { color:var(--muted); font-size:11px; line-height:1.55; }.runner-template-selection { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:12px; border:1px solid color-mix(in srgb,var(--accent) 50%,var(--line)); border-radius:8px; background:color-mix(in srgb,var(--accent) 8%,var(--bg)); }.runner-template-selection > div { display:grid; gap:4px; min-width:0; }.runner-template-selection small,.runner-template-selection span { color:var(--muted); font-size:11px; }.runner-template-selection strong { font-size:13px; }.runner-template-selection span { line-height:1.45; }.runner-template-selection button { flex:none; }.runner-source { display:grid; gap:8px; color:var(--text); font-size:12px; }.runner-source textarea { min-height:440px; resize:vertical; font:12px/1.55 'DM Mono',monospace; tab-size:2; }
+.runner-template-picker { display:grid; gap:14px; }.runner-template-picker__head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }.runner-template-picker__head .hint { margin:0; }.template-picker-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }.runner-template-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; max-height:332px; overflow-y:auto; overscroll-behavior:contain; padding-right:8px; }.runner-template-card { display:grid; gap:9px; min-height:160px; padding:16px; border:1px solid var(--line); border-radius:9px; color:var(--text); background:var(--bg); text-align:left; cursor:pointer; }.runner-template-card:hover { border-color:var(--accent); background:var(--surface-raised); }.runner-template-card span,.runner-template-card small { color:var(--muted); font-size:11px; line-height:1.55; }.runner-template-selection { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:12px; border:1px solid color-mix(in srgb,var(--accent) 50%,var(--line)); border-radius:8px; background:color-mix(in srgb,var(--accent) 8%,var(--bg)); }.runner-template-selection > div { display:grid; gap:4px; min-width:0; }.runner-template-selection small,.runner-template-selection span { color:var(--muted); font-size:11px; }.runner-template-selection strong { font-size:13px; }.runner-template-selection span { line-height:1.45; }.runner-template-selection button { flex:none; }.runner-source { display:grid; gap:8px; color:var(--text); font-size:12px; }.runner-source textarea { min-height:440px; resize:vertical; font:12px/1.55 'DM Mono',monospace; tab-size:2; }
 .runner-editor-tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); }.runner-editor-tabs button { border:0; border-bottom:2px solid transparent; padding:8px 10px; color:var(--muted); background:transparent; font-size:12px; }.runner-editor-tabs button:hover,.runner-editor-tabs button.selected { border-bottom-color:var(--accent); color:var(--text); }.runner-workflow-graph { min-height:378px; }.runner-workflow-graph .hint { margin:0; padding:12px 0; }
 .runner-template-card small { display:none; }
 .catalog-row__created { color:var(--muted); font:10px 'DM Mono',monospace; }