spawnfile 0.1.24 → 0.1.27

package/dist/training/viewer/cockpit/responsive.js

@@ -0,0 +1,86 @@
+/** Viewport ownership and narrow-screen layout; data panels scroll internally. */
+export const cockpitResponsiveStyles = `
+/* Keep the console frame fixed. Only data panes own overflow. */
+.view-pane { min-height: 0; height: 100%; overflow: auto; padding-top: 9px; }
+.view-pane[data-view-pane="overview"] { overflow: hidden; padding-top: 0; }
+.metric-view { height: 100%; min-height: 0; display: grid; grid-template-rows: auto minmax(180px, 270px) minmax(145px, 1fr); gap: 22px; }
+.cockpit-main { overflow: hidden; padding-top: 0; }
+.chart-grid { min-height: 0; }
+.chart-grid .panel { min-height: 0; overflow: visible; }
+.convergence-panel .panel-body { display: flex; flex-direction: column; min-height: 0; padding-bottom: 4px; }
+.chart-wrap { flex: 1; min-height: 0; }
+.chart-svg { height: 100%; min-height: 0; overflow: hidden; }
+.comparison-panel .panel-body { overflow: auto; }
+.chart-caption { flex-shrink: 0; padding: 8px 12px; }
+.matrix-panel { min-height: 0; display: flex; }
+.matrix-body { min-height: 0; display: flex; flex-direction: column; width: 100%; padding-top: 12px; }
+.matrix-body > .scroll { flex: 1; min-height: 0; overflow: auto; }
+.matrix-body .panel-footer { flex-shrink: 0; padding: 7px 12px; }
+.matrix-table thead { position: sticky; top: 0; background: var(--bg); z-index: 1; }
+.matrix-table th, .matrix-table td { padding: 7px 12px; }
+@media (max-height: 700px) {
+  .view-pane[data-view-pane="overview"] { overflow: auto; }
+  .metric-view { height: auto; min-height: 100%; grid-template-rows: max-content max-content minmax(145px, 1fr); }
+  .chart-grid { min-height: min-content; }
+  .convergence-panel .panel-body { flex: none; min-height: min-content; }
+  .chart-wrap { flex: none; height: 140px; min-height: 140px; }
+}
+@media (min-width: 901px) and (max-height: 700px) {
+  .sidebar { gap: 12px; }
+  .sidebar > section { min-height: 60px; }
+  .sidebar > section > .panel-body { padding: 10px 10px 6px; gap: 6px; }
+  .sidebar .panel-footer { padding: 6px 10px; }
+  .sidebar > nav > .panel-body { padding: 12px 8px; gap: 4px; }
+  .sidebar .nav-item { padding: 3px; }
+}
+@media (max-width: 900px) {
+  .workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 18px; padding: 16px 12px 10px; }
+  .sidebar { display: block; overflow: hidden; padding: 9px 1px 1px; margin: -9px -1px -1px; }
+  .sidebar > section { display: none; }
+  .sidebar nav .panel-body { flex-direction: row; padding: 10px 8px 7px; gap: 6px; }
+  .sidebar .nav-item { justify-content: center; padding: 6px; }
+  .nav-count { display: none; }
+  .top-title { max-width: 34ch; }
+  .chart-grid { grid-template-columns: minmax(0, 1.7fr) minmax(210px, 1fr); gap: 14px; }
+  .details-grid { grid-template-columns: minmax(0, 1fr); }
+}
+@media (max-width: 600px) {
+  .topbar { min-height: 50px; gap: 6px; padding: 8px 10px; }
+  .brand { gap: 5px; }
+  .top-title { display: none; }
+  .header-actions { gap: 6px; flex-wrap: nowrap; }
+  .refresh-button { padding: 4px 6px; }
+  .workspace { padding: 14px 7px 6px; gap: 15px; }
+  .sidebar .panel-title { display: none; }
+  .sidebar .nav-item { padding: 4px 2px; }
+  .sidebar nav .panel-body { padding: 5px; }
+  .view-pane[data-view-pane="overview"] { overflow: auto; }
+  .metric-view { height: auto; min-height: 100%; gap: 16px; grid-template-rows: max-content max-content minmax(145px, 1fr); }
+  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
+  .metric-card { padding: 7px 6px; }
+  .metric-label { letter-spacing: 0; }
+  .metric-value { margin: 4px 0; }
+  .metric-note { line-height: 1.35; }
+  .chart-grid { min-height: min-content; grid-template-columns: minmax(0, 1fr); grid-template-rows: max-content max-content; gap: 16px; }
+  .convergence-panel .panel-body { flex: none; min-height: min-content; }
+  .chart-wrap { flex: none; height: 140px; min-height: 140px; }
+  .panel-body { padding: 14px 10px 6px; }
+  .chart-controls { gap: 5px; flex-wrap: nowrap; }
+  .chart-select { padding: 3px; max-width: 54%; }
+  .chart-legend { margin-top: 5px; gap: 12px; }
+  .chart-caption { padding: 5px 8px; line-height: 1.35; }
+  .comparison-panel .panel-body { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+  .comparison-panel .eyebrow, .comparison-panel .chart-caption { display: none; }
+  .comparison-title { grid-column: 1 / -1; margin: 0; }
+  .score-row { margin: 0; }
+  .matrix-body .panel-footer { line-height: 1.3; padding: 4px 7px; }
+  .matrix-table th, .matrix-table td { padding: 5px 7px; }
+  .statusbar { padding: 6px 9px; gap: 4px; }
+  .status-group { gap: 8px; }
+  .statusbar .status-group:last-child > span:first-child { display: none; }
+}
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { scroll-behavior: auto !important; }
+}
+`;
+//# sourceMappingURL=responsive.js.map

package/dist/training/viewer/cockpit/responsive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive.js","sourceRoot":"","sources":["../../../../src/training/viewer/cockpit/responsive.ts"],"names":[],"mappings":"AAAA,kFAAkF;AAClF,MAAM,CAAC,MAAM,uBAAuB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmFtC,CAAC"}

package/dist/training/viewer/cockpit/styles.d.ts

@@ -0,0 +1,2 @@
+/** Local cockpit shell and data graphics, following the Moltnet console system. */
+export declare const cockpitStyles = "\n.activity-measurements { flex-shrink: 0; }\n:root {\n  color-scheme: dark;\n  --font-control: 12px;\n  --font-body: 13px;\n  --font-heading: 16px;\n  --font-metric: 24px;\n  --bg: #0b0b0b;\n  --surface: #111111;\n  --ink: #f3eee7;\n  --sub: #d1c7b8;\n  --mute: #a59d94;\n  --faint: #6b6560;\n  --green: #3ddc84;\n  --cyan: #00e5cc;\n  --coral: #d4604a;\n  --line: rgba(61, 220, 132, .45);\n  --line-soft: rgba(61, 220, 132, .18);\n  --tint: rgba(61, 220, 132, .06);\n  font: var(--font-body)/1.5 \"JetBrains Mono\", \"SF Mono\", Menlo, \"Cascadia Code\", Consolas, ui-monospace, monospace;\n  background: var(--bg);\n  color: var(--ink);\n}\n* { box-sizing: border-box; min-width: 0; }\nhtml, body { margin: 0; height: 100vh; height: 100dvh; overflow: hidden; }\nbody { -webkit-font-smoothing: antialiased; }\nh1, h2, h3, p { margin: 0; }\na { color: inherit; text-underline-offset: 3px; }\nbutton, select, input { font: inherit; color: inherit; }\nbutton, select, summary { cursor: pointer; }\nbutton, select { border: 1px solid var(--line-soft); background: var(--surface); }\nbutton:focus-visible, select:focus-visible, a:focus-visible, summary:focus-visible {\n  outline: 2px solid var(--cyan);\n  outline-offset: 3px;\n}\nbutton:hover, select:hover { border-color: var(--green); }\ninput { accent-color: var(--green); }\n::selection { background: var(--green); color: var(--bg); }\n[hidden] { display: none !important; }\n* { scrollbar-width: thin; scrollbar-color: var(--line-soft) transparent; }\n.shell {\n  height: 100vh;\n  height: 100dvh;\n  overflow: hidden;\n  display: grid;\n  grid-template-rows: auto minmax(0, 1fr) auto;\n}\n.topbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 20px;\n  min-height: 58px;\n  padding: 12px 20px;\n  border-bottom: 1px solid rgba(255, 255, 255, .07);\n}\n.brand, .header-actions, .status-group, .chart-legend, .cost-legend {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n.brand { color: var(--green); font-weight: 700; letter-spacing: .16em; }\n.brand-mark { font-size: var(--font-heading); line-height: 1; }\n.top-title { color: var(--sub); font-weight: 400; letter-spacing: 0; }\n.header-actions { flex-wrap: wrap; justify-content: flex-end; font-size: var(--font-control); }\n.badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  padding: 3px 8px;\n  border: 1px solid currentColor;\n  border-radius: 3px;\n  color: var(--mute);\n  font-size: var(--font-control);\n  letter-spacing: .08em;\n  text-transform: uppercase;\n}\n.good, .positive, .pass { color: var(--green); }\n.warn, .bad, .negative, .fail { color: var(--coral); }\n.muted, .neutral, .unknown { color: var(--mute); }\n.faint { color: var(--faint); }\n.dot {\n  display: inline-block;\n  flex: 0 0 auto;\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: currentColor;\n}\n.refresh-button { padding: 6px 10px; border-radius: 3px; color: var(--green); }\n.workspace {\n  display: grid;\n  grid-template-columns: 236px minmax(0, 1fr);\n  gap: 18px;\n  min-height: 0;\n  padding: 20px 18px 14px;\n  overflow: hidden;\n}\n.sidebar {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  font-size: var(--font-control);\n  min-height: 0;\n  overflow: hidden;\n  padding: 10px 1px 2px;\n  margin-top: -10px;\n}\n.panel {\n  position: relative;\n  border: 1px solid var(--line);\n  border-radius: 4px;\n  background: var(--bg);\n  scroll-margin-top: 12px;\n}\n.panel-title {\n  position: absolute;\n  top: -9px;\n  left: 14px;\n  max-width: calc(100% - 28px);\n  padding: 0 8px;\n  background: var(--bg);\n  color: var(--green);\n  font-size: var(--font-control);\n  font-weight: 400;\n  letter-spacing: .12em;\n  line-height: 16px;\n  text-transform: uppercase;\n}\n.panel-title::before { content: \"[ \"; }\n.panel-title::after { content: \" ]\"; }\n.panel-body { padding: 21px 16px 16px; }\n.panel-footer, .chart-caption {\n  padding: 10px 16px;\n  border-top: 1px dashed rgba(255, 255, 255, .08);\n  color: var(--mute);\n  font-size: var(--font-control);\n}\n.sidebar .panel-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 12px 10px; }\n.sidebar > section { min-height: 72px; flex: 1 1 0; overflow: auto; }\n.sidebar > section > .panel-title { position: sticky; top: 0; margin: 0 8px; padding: 0 6px; z-index: 1; }\n.sidebar > section > .panel-body { overflow: visible; }\n.sidebar > nav { flex-shrink: 0; }\n.sidebar > nav > .panel-body { overflow: visible; gap: 6px; }\n.sidebar .nav-item { padding: 4px; font-size: var(--font-control); }\n.experiment-label { font-size: var(--font-control); line-height: 1.55; overflow-wrap: anywhere; }\n.sidebar .muted, .sidebar .mono-id { font-size: var(--font-control); }\n.nav-item {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 12px;\n  padding: 10px;\n  border: 1px solid transparent;\n  border-radius: 3px;\n  color: var(--sub);\n  text-decoration: none;\n}\n.nav-item:hover, .nav-item.active { border-color: var(--line-soft); background: var(--tint); color: var(--green); }\n.nav-count { color: var(--mute); font-size: var(--font-control); font-variant-numeric: tabular-nums; }\n.cockpit-main {\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  min-height: 0;\n  overflow: auto;\n  padding: 0 5px 6px 1px;\n}\n.view-pane, .metric-view { display: flex; flex-direction: column; gap: 24px; }\n.top-title { max-width: 48ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.nav-item { width: 100%; background: transparent; text-align: left; }\n.budget-row { display: flex; justify-content: space-between; gap: 12px; }\n.comparison-title { margin: 8px 0 25px; font-size: var(--font-heading); font-weight: 400; }\n.matrix-body { padding-top: 16px; }\n.trial-button { border: 0; background: none; text-align: left; padding: 0; color: var(--sub); }\n.trial-button:hover { color: var(--green); }\n.detail-drawer { flex-shrink: 0; }\n.inspector .compact-table td { overflow-wrap: anywhere; max-width: 32ch; }\n.inspector .panel, .metric-view > .panel, .chart-grid > .panel { flex-shrink: 0; }\n.overview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }\n.eyebrow, .metric-label { color: var(--mute); font-size: var(--font-control); letter-spacing: .12em; text-transform: uppercase; }\n.outcome-title {\n  margin-top: 5px;\n  font-size: var(--font-heading);\n  font-weight: 500;\n  letter-spacing: 0;\n  line-height: 1.3;\n  overflow-wrap: anywhere;\n}\n.outcome-detail { margin-top: 7px; color: var(--sub); font-size: var(--font-control); max-width: 75ch; overflow-wrap: anywhere; }\n.metric-grid {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: 12px;\n}\n.metric-card {\n  padding: 14px 16px 12px;\n  border: 1px solid var(--line-soft);\n  border-radius: 3px;\n  background: var(--surface);\n}\n.metric-value {\n  margin: 6px 0 4px;\n  font-size: var(--font-metric);\n  font-weight: 500;\n  line-height: 1.2;\n  letter-spacing: -.05em;\n  font-variant-numeric: tabular-nums;\n  overflow-wrap: anywhere;\n}\n.metric-note { color: var(--mute); font-size: var(--font-control); overflow-wrap: anywhere; }\n.chart-grid {\n  display: grid;\n  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);\n  gap: 18px;\n}\n.convergence-panel, .comparison-panel { display: flex; flex-direction: column; }\n.convergence-panel .panel-body, .comparison-panel .panel-body { flex: 1; }\n.chart-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }\n.segmented { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line-soft); border-radius: 3px; }\n.segmented button { border: 0; border-radius: 2px; padding: 4px 8px; color: var(--mute); font-size: var(--font-control); }\n.segmented [aria-pressed=\"true\"] { background: var(--tint); color: var(--green); }\n.chart-select { max-width: 100%; padding: 5px 8px; border-radius: 3px; font-size: var(--font-control); }\n.chart-legend { flex-wrap: wrap; gap: 16px; margin-top: 14px; color: var(--sub); font-size: var(--font-control); }\n.legend-key { display: inline-flex; align-items: center; gap: 7px; }\n.legend-key::before { content: \"\"; width: 16px; border-top: 2px solid currentColor; }\n.legend-key.train { color: var(--green); }\n.legend-key.validation { color: var(--cyan); }\n.chart-wrap { margin-top: 10px; }\n.chart-svg { display: block; width: 100%; height: auto; overflow: visible; }\n.chart-gridline { stroke: rgba(255, 255, 255, .08); stroke-dasharray: 3 5; }\n.chart-axis { stroke: var(--faint); stroke-width: 1; }\n.chart-tick { fill: var(--mute); font-size: var(--font-control); font-family: inherit; }\n.chart-train, .chart-validation { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }\n.chart-train { stroke: var(--green); }\ntext.chart-train { fill: var(--green); stroke: none; }\ntext.chart-validation { fill: var(--cyan); stroke: none; }\n.chart-validation { stroke: var(--cyan); }\nline.chart-validation { stroke-dasharray: 6 4; }\n.chart-point { fill: var(--bg); stroke: var(--green); stroke-width: 2; }\n.chart-point.validation { stroke: var(--cyan); }\n.chart-point[data-selected=\"true\"] { fill: var(--cyan); stroke: var(--bg); stroke-width: 3; }\n.chart-area { fill: rgba(61, 220, 132, .07); stroke: none; }\n.chart-caption { margin-top: auto; line-height: 1.6; }\n.score-row {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) 64px;\n  align-items: center;\n  gap: 8px 10px;\n  margin: 0 0 20px;\n}\n.score-name { color: var(--sub); font-size: var(--font-control); overflow-wrap: anywhere; }\n.score-track { width: 100%; grid-column: 1; height: 9px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .06); }\n.score-fill { fill: var(--cyan); }\n.score-fill[data-phase=\"baseline\"] { fill: var(--faint); }\n.score-fill[data-phase=\"train\"] { fill: var(--green); }\n.score-number { grid-column: 2; grid-row: 1 / span 2; text-align: right; font-size: var(--font-metric); font-variant-numeric: tabular-nums; }\n.scroll { max-width: 100%; overflow-x: auto; }\n.matrix-table, .compact-table { width: 100%; border-collapse: collapse; font-size: var(--font-control); }\nth, td { padding: 10px 12px; text-align: left; vertical-align: middle; border-bottom: 1px solid rgba(255, 255, 255, .07); }\nth { color: var(--mute); font-size: var(--font-control); font-weight: 400; letter-spacing: .06em; text-transform: uppercase; }\ntbody tr:last-child td { border-bottom: 0; }\ntbody tr:hover { background: var(--tint); }\n.matrix-table th:not(:first-child), .matrix-table td:not(:first-child) { text-align: center; white-space: nowrap; }\n.matrix-table .case-label { max-width: 260px; }\n.case-label { color: var(--sub); overflow-wrap: anywhere; }\n.mono-id { color: var(--mute); font-size: var(--font-control); overflow-wrap: anywhere; }\n.status-cell {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  min-width: 46px;\n  padding: 3px 7px;\n  border-radius: 3px;\n  font-size: var(--font-control);\n}\n.status-cell.pass { background: rgba(61, 220, 132, .1); }\n.status-cell.fail { background: rgba(212, 96, 74, .12); }\n.status-cell.unknown { border: 1px dashed rgba(165, 157, 148, .35); }\n.detail-drawer { border: 1px solid var(--line-soft); border-radius: 3px; }\n.detail-drawer > summary { padding: 12px 14px; color: var(--sub); }\n.detail-drawer[open] > summary { border-bottom: 1px solid var(--line-soft); color: var(--green); }\n.details-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 16px; }\n.inspector { overflow-wrap: anywhere; }\n.inspector h3 { margin-bottom: 10px; color: var(--green); font-size: var(--font-heading); font-weight: 400; }\n.inspector ul { padding-left: 18px; }\n.inspector li { margin: 8px 0; }\n.inspector p { margin: 8px 0; }\n.compact-table { font-size: var(--font-control); }\n.compact-table th, .compact-table td { padding: 8px 10px; }\n.cost-panel .metric-grid { margin-bottom: 16px; }\n.cost-stack { display: flex; height: 16px; gap: 3px; margin: 14px 0; overflow: hidden; border-radius: 2px; background: var(--surface); }\n.cost-stack { width: 100%; }\n.cost-segment { fill: var(--green); stroke: var(--bg); stroke-width: .3; }\n.cost-segment[data-role=\"optimizer\"] { fill: var(--cyan); }\n.cost-segment[data-role=\"judge\"] { fill: var(--coral); }\n.cost-legend { display: grid; gap: 10px; }\n.cost-legend > div { display: grid; grid-template-columns: 16px 1fr auto auto; gap: 12px; }\n.legend-key[data-role=\"subject\"] { color: var(--green); }\n.legend-key[data-role=\"judge\"] { color: var(--coral); }\n.legend-key[data-role=\"optimizer\"] { color: var(--cyan); }\n.cost-legend { flex-wrap: wrap; color: var(--sub); font-size: var(--font-control); }\n.statusbar {\n  display: flex;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  gap: 8px 22px;\n  padding: 8px 20px;\n  border-top: 1px solid rgba(255, 255, 255, .07);\n  color: var(--mute);\n  font-size: var(--font-control);\n  font-variant-numeric: tabular-nums;\n}\n.status-group { flex-wrap: wrap; gap: 18px; }\n.status-value { color: var(--sub); }\n.empty-state {\n  display: grid;\n  place-content: center;\n  gap: 8px;\n  min-height: 180px;\n  padding: 24px;\n  text-align: center;\n  color: var(--mute);\n}\n.empty-state strong { color: var(--sub); font-weight: 400; }\n.screen-reader-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n@media (max-width: 1150px) {\n  .workspace { grid-template-columns: 210px minmax(0, 1fr); gap: 14px; padding-right: 12px; padding-left: 12px; }\n  .chart-grid { grid-template-columns: minmax(0, 1.6fr) minmax(230px, 1fr); gap: 14px; }\n  .metric-card { padding: 12px; }\n  .brand { flex-wrap: wrap; gap: 8px; }\n  .top-title { font-size: var(--font-control); }\n}\n\n/* Keep the console frame fixed. Only data panes own overflow. */\n.view-pane { min-height: 0; height: 100%; overflow: auto; padding-top: 9px; }\n.view-pane[data-view-pane=\"overview\"] { overflow: hidden; padding-top: 0; }\n.metric-view { height: 100%; min-height: 0; display: grid; grid-template-rows: auto minmax(180px, 270px) minmax(145px, 1fr); gap: 22px; }\n.cockpit-main { overflow: hidden; padding-top: 0; }\n.chart-grid { min-height: 0; }\n.chart-grid .panel { min-height: 0; overflow: visible; }\n.convergence-panel .panel-body { display: flex; flex-direction: column; min-height: 0; padding-bottom: 4px; }\n.chart-wrap { flex: 1; min-height: 0; }\n.chart-svg { height: 100%; min-height: 0; overflow: hidden; }\n.comparison-panel .panel-body { overflow: auto; }\n.chart-caption { flex-shrink: 0; padding: 8px 12px; }\n.matrix-panel { min-height: 0; display: flex; }\n.matrix-body { min-height: 0; display: flex; flex-direction: column; width: 100%; padding-top: 12px; }\n.matrix-body > .scroll { flex: 1; min-height: 0; overflow: auto; }\n.matrix-body .panel-footer { flex-shrink: 0; padding: 7px 12px; }\n.matrix-table thead { position: sticky; top: 0; background: var(--bg); z-index: 1; }\n.matrix-table th, .matrix-table td { padding: 7px 12px; }\n@media (max-height: 700px) {\n  .view-pane[data-view-pane=\"overview\"] { overflow: auto; }\n  .metric-view { height: auto; min-height: 100%; grid-template-rows: max-content max-content minmax(145px, 1fr); }\n  .chart-grid { min-height: min-content; }\n  .convergence-panel .panel-body { flex: none; min-height: min-content; }\n  .chart-wrap { flex: none; height: 140px; min-height: 140px; }\n}\n@media (min-width: 901px) and (max-height: 700px) {\n  .sidebar { gap: 12px; }\n  .sidebar > section { min-height: 60px; }\n  .sidebar > section > .panel-body { padding: 10px 10px 6px; gap: 6px; }\n  .sidebar .panel-footer { padding: 6px 10px; }\n  .sidebar > nav > .panel-body { padding: 12px 8px; gap: 4px; }\n  .sidebar .nav-item { padding: 3px; }\n}\n@media (max-width: 900px) {\n  .workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 18px; padding: 16px 12px 10px; }\n  .sidebar { display: block; overflow: hidden; padding: 9px 1px 1px; margin: -9px -1px -1px; }\n  .sidebar > section { display: none; }\n  .sidebar nav .panel-body { flex-direction: row; padding: 10px 8px 7px; gap: 6px; }\n  .sidebar .nav-item { justify-content: center; padding: 6px; }\n  .nav-count { display: none; }\n  .top-title { max-width: 34ch; }\n  .chart-grid { grid-template-columns: minmax(0, 1.7fr) minmax(210px, 1fr); gap: 14px; }\n  .details-grid { grid-template-columns: minmax(0, 1fr); }\n}\n@media (max-width: 600px) {\n  .topbar { min-height: 50px; gap: 6px; padding: 8px 10px; }\n  .brand { gap: 5px; }\n  .top-title { display: none; }\n  .header-actions { gap: 6px; flex-wrap: nowrap; }\n  .refresh-button { padding: 4px 6px; }\n  .workspace { padding: 14px 7px 6px; gap: 15px; }\n  .sidebar .panel-title { display: none; }\n  .sidebar .nav-item { padding: 4px 2px; }\n  .sidebar nav .panel-body { padding: 5px; }\n  .view-pane[data-view-pane=\"overview\"] { overflow: auto; }\n  .metric-view { height: auto; min-height: 100%; gap: 16px; grid-template-rows: max-content max-content minmax(145px, 1fr); }\n  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }\n  .metric-card { padding: 7px 6px; }\n  .metric-label { letter-spacing: 0; }\n  .metric-value { margin: 4px 0; }\n  .metric-note { line-height: 1.35; }\n  .chart-grid { min-height: min-content; grid-template-columns: minmax(0, 1fr); grid-template-rows: max-content max-content; gap: 16px; }\n  .convergence-panel .panel-body { flex: none; min-height: min-content; }\n  .chart-wrap { flex: none; height: 140px; min-height: 140px; }\n  .panel-body { padding: 14px 10px 6px; }\n  .chart-controls { gap: 5px; flex-wrap: nowrap; }\n  .chart-select { padding: 3px; max-width: 54%; }\n  .chart-legend { margin-top: 5px; gap: 12px; }\n  .chart-caption { padding: 5px 8px; line-height: 1.35; }\n  .comparison-panel .panel-body { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }\n  .comparison-panel .eyebrow, .comparison-panel .chart-caption { display: none; }\n  .comparison-title { grid-column: 1 / -1; margin: 0; }\n  .score-row { margin: 0; }\n  .matrix-body .panel-footer { line-height: 1.3; padding: 4px 7px; }\n  .matrix-table th, .matrix-table td { padding: 5px 7px; }\n  .statusbar { padding: 6px 9px; gap: 4px; }\n  .status-group { gap: 8px; }\n  .statusbar .status-group:last-child > span:first-child { display: none; }\n}\n@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after { scroll-behavior: auto !important; }\n}\n\n";

package/dist/training/viewer/cockpit/styles.js

@@ -0,0 +1,349 @@
+import { cockpitResponsiveStyles } from './responsive.js';
+/** Local cockpit shell and data graphics, following the Moltnet console system. */
+export const cockpitStyles = `
+.activity-measurements { flex-shrink: 0; }
+:root {
+  color-scheme: dark;
+  --font-control: 12px;
+  --font-body: 13px;
+  --font-heading: 16px;
+  --font-metric: 24px;
+  --bg: #0b0b0b;
+  --surface: #111111;
+  --ink: #f3eee7;
+  --sub: #d1c7b8;
+  --mute: #a59d94;
+  --faint: #6b6560;
+  --green: #3ddc84;
+  --cyan: #00e5cc;
+  --coral: #d4604a;
+  --line: rgba(61, 220, 132, .45);
+  --line-soft: rgba(61, 220, 132, .18);
+  --tint: rgba(61, 220, 132, .06);
+  font: var(--font-body)/1.5 "JetBrains Mono", "SF Mono", Menlo, "Cascadia Code", Consolas, ui-monospace, monospace;
+  background: var(--bg);
+  color: var(--ink);
+}
+* { box-sizing: border-box; min-width: 0; }
+html, body { margin: 0; height: 100vh; height: 100dvh; overflow: hidden; }
+body { -webkit-font-smoothing: antialiased; }
+h1, h2, h3, p { margin: 0; }
+a { color: inherit; text-underline-offset: 3px; }
+button, select, input { font: inherit; color: inherit; }
+button, select, summary { cursor: pointer; }
+button, select { border: 1px solid var(--line-soft); background: var(--surface); }
+button:focus-visible, select:focus-visible, a:focus-visible, summary:focus-visible {
+  outline: 2px solid var(--cyan);
+  outline-offset: 3px;
+}
+button:hover, select:hover { border-color: var(--green); }
+input { accent-color: var(--green); }
+::selection { background: var(--green); color: var(--bg); }
+[hidden] { display: none !important; }
+* { scrollbar-width: thin; scrollbar-color: var(--line-soft) transparent; }
+.shell {
+  height: 100vh;
+  height: 100dvh;
+  overflow: hidden;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+}
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  min-height: 58px;
+  padding: 12px 20px;
+  border-bottom: 1px solid rgba(255, 255, 255, .07);
+}
+.brand, .header-actions, .status-group, .chart-legend, .cost-legend {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.brand { color: var(--green); font-weight: 700; letter-spacing: .16em; }
+.brand-mark { font-size: var(--font-heading); line-height: 1; }
+.top-title { color: var(--sub); font-weight: 400; letter-spacing: 0; }
+.header-actions { flex-wrap: wrap; justify-content: flex-end; font-size: var(--font-control); }
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 3px 8px;
+  border: 1px solid currentColor;
+  border-radius: 3px;
+  color: var(--mute);
+  font-size: var(--font-control);
+  letter-spacing: .08em;
+  text-transform: uppercase;
+}
+.good, .positive, .pass { color: var(--green); }
+.warn, .bad, .negative, .fail { color: var(--coral); }
+.muted, .neutral, .unknown { color: var(--mute); }
+.faint { color: var(--faint); }
+.dot {
+  display: inline-block;
+  flex: 0 0 auto;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+}
+.refresh-button { padding: 6px 10px; border-radius: 3px; color: var(--green); }
+.workspace {
+  display: grid;
+  grid-template-columns: 236px minmax(0, 1fr);
+  gap: 18px;
+  min-height: 0;
+  padding: 20px 18px 14px;
+  overflow: hidden;
+}
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  font-size: var(--font-control);
+  min-height: 0;
+  overflow: hidden;
+  padding: 10px 1px 2px;
+  margin-top: -10px;
+}
+.panel {
+  position: relative;
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  background: var(--bg);
+  scroll-margin-top: 12px;
+}
+.panel-title {
+  position: absolute;
+  top: -9px;
+  left: 14px;
+  max-width: calc(100% - 28px);
+  padding: 0 8px;
+  background: var(--bg);
+  color: var(--green);
+  font-size: var(--font-control);
+  font-weight: 400;
+  letter-spacing: .12em;
+  line-height: 16px;
+  text-transform: uppercase;
+}
+.panel-title::before { content: "[ "; }
+.panel-title::after { content: " ]"; }
+.panel-body { padding: 21px 16px 16px; }
+.panel-footer, .chart-caption {
+  padding: 10px 16px;
+  border-top: 1px dashed rgba(255, 255, 255, .08);
+  color: var(--mute);
+  font-size: var(--font-control);
+}
+.sidebar .panel-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 12px 10px; }
+.sidebar > section { min-height: 72px; flex: 1 1 0; overflow: auto; }
+.sidebar > section > .panel-title { position: sticky; top: 0; margin: 0 8px; padding: 0 6px; z-index: 1; }
+.sidebar > section > .panel-body { overflow: visible; }
+.sidebar > nav { flex-shrink: 0; }
+.sidebar > nav > .panel-body { overflow: visible; gap: 6px; }
+.sidebar .nav-item { padding: 4px; font-size: var(--font-control); }
+.experiment-label { font-size: var(--font-control); line-height: 1.55; overflow-wrap: anywhere; }
+.sidebar .muted, .sidebar .mono-id { font-size: var(--font-control); }
+.nav-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  padding: 10px;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  color: var(--sub);
+  text-decoration: none;
+}
+.nav-item:hover, .nav-item.active { border-color: var(--line-soft); background: var(--tint); color: var(--green); }
+.nav-count { color: var(--mute); font-size: var(--font-control); font-variant-numeric: tabular-nums; }
+.cockpit-main {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  min-height: 0;
+  overflow: auto;
+  padding: 0 5px 6px 1px;
+}
+.view-pane, .metric-view { display: flex; flex-direction: column; gap: 24px; }
+.top-title { max-width: 48ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.nav-item { width: 100%; background: transparent; text-align: left; }
+.budget-row { display: flex; justify-content: space-between; gap: 12px; }
+.comparison-title { margin: 8px 0 25px; font-size: var(--font-heading); font-weight: 400; }
+.matrix-body { padding-top: 16px; }
+.trial-button { border: 0; background: none; text-align: left; padding: 0; color: var(--sub); }
+.trial-button:hover { color: var(--green); }
+.detail-drawer { flex-shrink: 0; }
+.inspector .compact-table td { overflow-wrap: anywhere; max-width: 32ch; }
+.inspector .panel, .metric-view > .panel, .chart-grid > .panel { flex-shrink: 0; }
+.overview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
+.eyebrow, .metric-label { color: var(--mute); font-size: var(--font-control); letter-spacing: .12em; text-transform: uppercase; }
+.outcome-title {
+  margin-top: 5px;
+  font-size: var(--font-heading);
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.3;
+  overflow-wrap: anywhere;
+}
+.outcome-detail { margin-top: 7px; color: var(--sub); font-size: var(--font-control); max-width: 75ch; overflow-wrap: anywhere; }
+.metric-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+}
+.metric-card {
+  padding: 14px 16px 12px;
+  border: 1px solid var(--line-soft);
+  border-radius: 3px;
+  background: var(--surface);
+}
+.metric-value {
+  margin: 6px 0 4px;
+  font-size: var(--font-metric);
+  font-weight: 500;
+  line-height: 1.2;
+  letter-spacing: -.05em;
+  font-variant-numeric: tabular-nums;
+  overflow-wrap: anywhere;
+}
+.metric-note { color: var(--mute); font-size: var(--font-control); overflow-wrap: anywhere; }
+.chart-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
+  gap: 18px;
+}
+.convergence-panel, .comparison-panel { display: flex; flex-direction: column; }
+.convergence-panel .panel-body, .comparison-panel .panel-body { flex: 1; }
+.chart-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
+.segmented { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line-soft); border-radius: 3px; }
+.segmented button { border: 0; border-radius: 2px; padding: 4px 8px; color: var(--mute); font-size: var(--font-control); }
+.segmented [aria-pressed="true"] { background: var(--tint); color: var(--green); }
+.chart-select { max-width: 100%; padding: 5px 8px; border-radius: 3px; font-size: var(--font-control); }
+.chart-legend { flex-wrap: wrap; gap: 16px; margin-top: 14px; color: var(--sub); font-size: var(--font-control); }
+.legend-key { display: inline-flex; align-items: center; gap: 7px; }
+.legend-key::before { content: ""; width: 16px; border-top: 2px solid currentColor; }
+.legend-key.train { color: var(--green); }
+.legend-key.validation { color: var(--cyan); }
+.chart-wrap { margin-top: 10px; }
+.chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
+.chart-gridline { stroke: rgba(255, 255, 255, .08); stroke-dasharray: 3 5; }
+.chart-axis { stroke: var(--faint); stroke-width: 1; }
+.chart-tick { fill: var(--mute); font-size: var(--font-control); font-family: inherit; }
+.chart-train, .chart-validation { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
+.chart-train { stroke: var(--green); }
+text.chart-train { fill: var(--green); stroke: none; }
+text.chart-validation { fill: var(--cyan); stroke: none; }
+.chart-validation { stroke: var(--cyan); }
+line.chart-validation { stroke-dasharray: 6 4; }
+.chart-point { fill: var(--bg); stroke: var(--green); stroke-width: 2; }
+.chart-point.validation { stroke: var(--cyan); }
+.chart-point[data-selected="true"] { fill: var(--cyan); stroke: var(--bg); stroke-width: 3; }
+.chart-area { fill: rgba(61, 220, 132, .07); stroke: none; }
+.chart-caption { margin-top: auto; line-height: 1.6; }
+.score-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 64px;
+  align-items: center;
+  gap: 8px 10px;
+  margin: 0 0 20px;
+}
+.score-name { color: var(--sub); font-size: var(--font-control); overflow-wrap: anywhere; }
+.score-track { width: 100%; grid-column: 1; height: 9px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .06); }
+.score-fill { fill: var(--cyan); }
+.score-fill[data-phase="baseline"] { fill: var(--faint); }
+.score-fill[data-phase="train"] { fill: var(--green); }
+.score-number { grid-column: 2; grid-row: 1 / span 2; text-align: right; font-size: var(--font-metric); font-variant-numeric: tabular-nums; }
+.scroll { max-width: 100%; overflow-x: auto; }
+.matrix-table, .compact-table { width: 100%; border-collapse: collapse; font-size: var(--font-control); }
+th, td { padding: 10px 12px; text-align: left; vertical-align: middle; border-bottom: 1px solid rgba(255, 255, 255, .07); }
+th { color: var(--mute); font-size: var(--font-control); font-weight: 400; letter-spacing: .06em; text-transform: uppercase; }
+tbody tr:last-child td { border-bottom: 0; }
+tbody tr:hover { background: var(--tint); }
+.matrix-table th:not(:first-child), .matrix-table td:not(:first-child) { text-align: center; white-space: nowrap; }
+.matrix-table .case-label { max-width: 260px; }
+.case-label { color: var(--sub); overflow-wrap: anywhere; }
+.mono-id { color: var(--mute); font-size: var(--font-control); overflow-wrap: anywhere; }
+.status-cell {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 46px;
+  padding: 3px 7px;
+  border-radius: 3px;
+  font-size: var(--font-control);
+}
+.status-cell.pass { background: rgba(61, 220, 132, .1); }
+.status-cell.fail { background: rgba(212, 96, 74, .12); }
+.status-cell.unknown { border: 1px dashed rgba(165, 157, 148, .35); }
+.detail-drawer { border: 1px solid var(--line-soft); border-radius: 3px; }
+.detail-drawer > summary { padding: 12px 14px; color: var(--sub); }
+.detail-drawer[open] > summary { border-bottom: 1px solid var(--line-soft); color: var(--green); }
+.details-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 16px; }
+.inspector { overflow-wrap: anywhere; }
+.inspector h3 { margin-bottom: 10px; color: var(--green); font-size: var(--font-heading); font-weight: 400; }
+.inspector ul { padding-left: 18px; }
+.inspector li { margin: 8px 0; }
+.inspector p { margin: 8px 0; }
+.compact-table { font-size: var(--font-control); }
+.compact-table th, .compact-table td { padding: 8px 10px; }
+.cost-panel .metric-grid { margin-bottom: 16px; }
+.cost-stack { display: flex; height: 16px; gap: 3px; margin: 14px 0; overflow: hidden; border-radius: 2px; background: var(--surface); }
+.cost-stack { width: 100%; }
+.cost-segment { fill: var(--green); stroke: var(--bg); stroke-width: .3; }
+.cost-segment[data-role="optimizer"] { fill: var(--cyan); }
+.cost-segment[data-role="judge"] { fill: var(--coral); }
+.cost-legend { display: grid; gap: 10px; }
+.cost-legend > div { display: grid; grid-template-columns: 16px 1fr auto auto; gap: 12px; }
+.legend-key[data-role="subject"] { color: var(--green); }
+.legend-key[data-role="judge"] { color: var(--coral); }
+.legend-key[data-role="optimizer"] { color: var(--cyan); }
+.cost-legend { flex-wrap: wrap; color: var(--sub); font-size: var(--font-control); }
+.statusbar {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 8px 22px;
+  padding: 8px 20px;
+  border-top: 1px solid rgba(255, 255, 255, .07);
+  color: var(--mute);
+  font-size: var(--font-control);
+  font-variant-numeric: tabular-nums;
+}
+.status-group { flex-wrap: wrap; gap: 18px; }
+.status-value { color: var(--sub); }
+.empty-state {
+  display: grid;
+  place-content: center;
+  gap: 8px;
+  min-height: 180px;
+  padding: 24px;
+  text-align: center;
+  color: var(--mute);
+}
+.empty-state strong { color: var(--sub); font-weight: 400; }
+.screen-reader-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+@media (max-width: 1150px) {
+  .workspace { grid-template-columns: 210px minmax(0, 1fr); gap: 14px; padding-right: 12px; padding-left: 12px; }
+  .chart-grid { grid-template-columns: minmax(0, 1.6fr) minmax(230px, 1fr); gap: 14px; }
+  .metric-card { padding: 12px; }
+  .brand { flex-wrap: wrap; gap: 8px; }
+  .top-title { font-size: var(--font-control); }
+}
+${cockpitResponsiveStyles}
+`;
+//# sourceMappingURL=styles.js.map

package/dist/training/viewer/cockpit/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/training/viewer/cockpit/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,mFAAmF;AACnF,MAAM,CAAC,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwV3B,uBAAuB;CACxB,CAAC"}

package/dist/training/viewer/costs.d.ts

@@ -0,0 +1,4 @@
+import type { CostReport, TrainingCostPlan } from '../experiments/costs/index.js';
+import type { ViewerCosts } from './types.js';
+/** Explicit accounting fields only. Never expose raw warnings, call IDs, usage sources or legacy evidence. */
+export declare function projectCosts(costs?: CostReport, plan?: TrainingCostPlan, hiddenTrials?: ReadonlySet<string>): ViewerCosts | undefined;

package/dist/training/viewer/costs.js

@@ -0,0 +1,81 @@
+function priceSource(price) {
+    if (price === null)
+        return null;
+    let source = null;
+    try {
+        const url = new URL(price.source);
+        if (url.protocol === 'https:' && !url.username && !url.password)
+            source = url.href;
+    }
+    catch { /* Non-URL catalog sources remain unavailable as links. */ }
+    return { checkedAt: price.checkedAt, source };
+}
+function tokens(usage) {
+    if (usage === null)
+        return null;
+    let invalid = false;
+    const count = (value) => {
+        if (value === undefined || value === null)
+            return null;
+        if (!Number.isSafeInteger(value) || value < 0) {
+            invalid = true;
+            return null;
+        }
+        return value;
+    };
+    const projected = { inputTokens: count(usage.inputTokens), cachedInputTokens: count(usage.cachedInputTokens),
+        cacheWriteInputTokens: count(usage.cacheWriteInputTokens), cacheWrite5mInputTokens: count(usage.cacheWrite5mInputTokens),
+        cacheWrite1hInputTokens: count(usage.cacheWrite1hInputTokens), outputTokens: count(usage.outputTokens),
+        reasoningTokens: count(usage.reasoningTokens) };
+    return { ...projected, invalid };
+}
+/** Explicit accounting fields only. Never expose raw warnings, call IDs, usage sources or legacy evidence. */
+export function projectCosts(costs, plan, hiddenTrials = new Set()) {
+    if (costs === undefined && plan === undefined)
+        return undefined;
+    const entries = costs?.entries.map(entry => hiddenTrials.has(entry.trialId ?? '') ? { ...entry,
+        name: entry.role, model: null, requestedModel: undefined, providerId: undefined, responseRoute: null,
+        valuation: { ...entry.valuation, price: null } } : entry);
+    const groups = hiddenTrials.size && entries ? anonymousGroups(entries) : costs?.groups;
+    return {
+        ...(plan === undefined ? {} : { planned: { total: plan.apiEquivalentUsd, knownSubtotal: plan.pricedSubtotalUsd,
+                coverage: plan.coverage, lines: plan.lines.map(line => ({ role: line.role, name: line.name, phase: line.phase,
+                    model: line.model, provider: line.provider ?? null, plannedCalls: line.plannedCalls,
+                    amount: line.apiEquivalentUsd, price: priceSource(line.price) })) } }),
+        ...(costs === undefined ? {} : { observed: { total: costs.apiEquivalentUsd, knownSubtotal: costs.knownSubtotalUsd,
+                completeness: costs.completeness, usageCoverage: costs.usageCoverage,
+                groups: groups.map(group => ({ role: group.role, name: group.name, entryCount: group.entryCount,
+                    amount: group.apiEquivalentUsd, knownSubtotal: group.knownSubtotalUsd })),
+                lines: entries.map(entry => ({ role: entry.role, name: entry.name, model: entry.model,
+                    requestedModel: entry.requestedModel ?? null, modelBasis: entry.modelBasis, provider: entry.providerId ?? null,
+                    route: entry.responseRoute ?? null, outcome: entry.outcome, usage: tokens(entry.usage),
+                    valuationStatus: entry.valuation.status, amount: entry.valuation.apiEquivalentUsd,
+                    price: priceSource(entry.valuation.price) })) } }),
+    };
+}
+/** Regroup projected accounting labels without exposing hidden case/model identities. */
+function anonymousGroups(entries) {
+    const groups = new Map();
+    for (const entry of entries) {
+        const key = JSON.stringify([entry.role, entry.name]);
+        const group = groups.get(key) ?? { role: entry.role, name: entry.name, entryCount: 0, models: [],
+            apiEquivalentUsd: { low: 0, high: 0 }, knownSubtotalUsd: { low: 0, high: 0 }, completeness: 'complete' };
+        group.entryCount++;
+        const amount = entry.valuation.apiEquivalentUsd;
+        if (amount) {
+            group.knownSubtotalUsd.low += amount.low;
+            group.knownSubtotalUsd.high += amount.high;
+            if (group.apiEquivalentUsd) {
+                group.apiEquivalentUsd.low += amount.low;
+                group.apiEquivalentUsd.high += amount.high;
+            }
+        }
+        else {
+            group.apiEquivalentUsd = null;
+            group.completeness = 'incomplete';
+        }
+        groups.set(key, group);
+    }
+    return [...groups.values()];
+}
+//# sourceMappingURL=costs.js.map

package/dist/training/viewer/costs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"costs.js","sourceRoot":"","sources":["../../../src/training/viewer/costs.ts"],"names":[],"mappings":"AAIA,SAAS,WAAW,CAAC,KAAwB;IAC3C,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO,IAAI,CAAC;IAChC,IAAI,MAAM,GAAkB,IAAI,CAAC;IACjC,IAAI,CAAC;QACH,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAClC,IAAI,GAAG,CAAC,QAAQ,KAAK,QAAQ,IAAI,CAAC,GAAG,CAAC,QAAQ,IAAI,CAAC,GAAG,CAAC,QAAQ;YAAE,MAAM,GAAG,GAAG,CAAC,IAAI,CAAC;IACrF,CAAC;IAAC,MAAM,CAAC,CAAC,0DAA0D,CAAC,CAAC;IACtE,OAAO,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,MAAM,EAAE,CAAC;AAChD,CAAC;AAED,SAAS,MAAM,CAAC,KAAmB;IACjC,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO,IAAI,CAAC;IAChC,IAAI,OAAO,GAAG,KAAK,CAAC;IACpB,MAAM,KAAK,GAAG,CAAC,KAAgC,EAAE,EAAE;QACjD,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI;YAAE,OAAO,IAAI,CAAC;QACvD,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;YAAC,OAAO,GAAG,IAAI,CAAC;YAAC,OAAO,IAAI,CAAC;QAAC,CAAC;QAC/E,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IACF,MAAM,SAAS,GAAG,EAAE,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,EAAE,iBAAiB,EAAE,KAAK,CAAC,KAAK,CAAC,iBAAiB,CAAC;QAC1G,qBAAqB,EAAE,KAAK,CAAC,KAAK,CAAC,qBAAqB,CAAC,EAAE,uBAAuB,EAAE,KAAK,CAAC,KAAK,CAAC,uBAAuB,CAAC;QACxH,uBAAuB,EAAE,KAAK,CAAC,KAAK,CAAC,uBAAuB,CAAC,EAAE,YAAY,EAAE,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC;QACtG,eAAe,EAAE,KAAK,CAAC,KAAK,CAAC,eAAe,CAAC,EAAE,CAAC;IAClD,OAAO,EAAE,GAAG,SAAS,EAAE,OAAO,EAAE,CAAC;AACnC,CAAC;AAED,8GAA8G;AAC9G,MAAM,UAAU,YAAY,CAAC,KAAkB,EAAE,IAAuB,EAAE,eAAoC,IAAI,GAAG,EAAE;IACrH,IAAI,KAAK,KAAK,SAAS,IAAI,IAAI,KAAK,SAAS;QAAE,OAAO,SAAS,CAAC;IAChE,MAAM,OAAO,GAAG,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,KAAK;QAC5F,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,aAAa,EAAE,IAAI;QACpG,SAAS,EAAE,EAAE,GAAG,KAAK,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,MAAM,GAAG,YAAY,CAAC,IAAI,IAAI,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC;IACvF,OAAO;QACL,GAAG,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,aAAa,EAAE,IAAI,CAAC,iBAAiB;gBAC5G,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK;oBAC3G,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,EAAE,YAAY,EAAE,IAAI,CAAC,YAAY;oBACnF,MAAM,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;QAC1E,GAAG,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,gBAAgB,EAAE,aAAa,EAAE,KAAK,CAAC,gBAAgB;gBAC/G,YAAY,EAAE,KAAK,CAAC,YAAY,EAAE,aAAa,EAAE,KAAK,CAAC,aAAa;gBACpE,MAAM,EAAE,MAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU;oBAC9F,MAAM,EAAE,KAAK,CAAC,gBAAgB,EAAE,aAAa,EAAE,KAAK,CAAC,gBAAgB,EAAE,CAAC,CAAC;gBAC3E,KAAK,EAAE,OAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK;oBACpF,cAAc,EAAE,KAAK,CAAC,cAAc,IAAI,IAAI,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,QAAQ,EAAE,KAAK,CAAC,UAAU,IAAI,IAAI;oBAC9G,KAAK,EAAE,KAAK,CAAC,aAAa,IAAI,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC;oBACtF,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB;oBACjF,KAAK,EAAE,WAAW,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;KACvD,CAAC;AACJ,CAAC;AAED,yFAAyF;AACzF,SAAS,eAAe,CAAC,OAA8B;IACrD,MAAM,MAAM,GAAG,IAAI,GAAG,EAAwC,CAAC;IAC/D,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE,CAAC;QAC5B,MAAM,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;QACrD,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE;YAC9F,gBAAgB,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,gBAAgB,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,YAAY,EAAE,UAAU,EAAE,CAAC;QAC3G,KAAK,CAAC,UAAU,EAAE,CAAC;QACnB,MAAM,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC;QAChD,IAAI,MAAM,EAAE,CAAC;YACX,KAAK,CAAC,gBAAgB,CAAC,GAAG,IAAI,MAAM,CAAC,GAAG,CAAC;YAAC,KAAK,CAAC,gBAAgB,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI,CAAC;YACrF,IAAI,KAAK,CAAC,gBAAgB,EAAE,CAAC;gBAAC,KAAK,CAAC,gBAAgB,CAAC,GAAG,IAAI,MAAM,CAAC,GAAG,CAAC;gBAAC,KAAK,CAAC,gBAAgB,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI,CAAC;YAAC,CAAC;QACvH,CAAC;aAAM,CAAC;YAAC,KAAK,CAAC,gBAAgB,GAAG,IAAI,CAAC;YAAC,KAAK,CAAC,YAAY,GAAG,YAAY,CAAC;QAAC,CAAC;QAC5E,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;IACzB,CAAC;IACD,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC;AAC9B,CAAC"}

package/dist/training/viewer/from-trials.d.ts

@@ -0,0 +1,33 @@
+import type { CandidateManifest } from '../candidates/index.js';
+import { type TrialReport, type TrainingReport, type ComparisonReport } from '../experiments/index.js';
+import type { DspyResult } from '../optimization/index.js';
+import type { CostReport, TrainingCostPlan } from '../experiments/costs/index.js';
+import type { RescoreReport } from '../experiments/replay/index.js';
+import type { ViewerData } from './types.js';
+export interface TrialProjectionOptions {
+    id: string;
+    title: string;
+    phase: ViewerData['experiment']['phase'];
+    status: string;
+    updatedAt: string;
+    cases: ViewerData['cases'];
+    baseline: CandidateManifest;
+    trials: readonly TrialReport[];
+    comparison?: {
+        candidate: CandidateManifest;
+        name: string;
+    };
+    optimizer?: DspyResult;
+    budget?: {
+        maxMetricCalls: number;
+        maxProposals: number;
+    };
+    costs?: CostReport;
+    costPlan?: TrainingCostPlan;
+    rescores?: readonly RescoreReport[];
+    scoring?: TrainingReport['scoring'];
+}
+/** Observable presentation fields only: never subject output, prompts, context, tool args/results or judge reasons. */
+export declare function projectTrials(options: TrialProjectionOptions): ViewerData;
+export declare function projectTrainingReport(report: TrainingReport, budget?: TrialProjectionOptions['budget']): ViewerData;
+export declare function projectComparisonReport(report: ComparisonReport): ViewerData;