From a22053b818efe5518600244f3cd1bebb0c2090cb Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Sun, 12 Jul 2026 18:49:00 -0700 Subject: [PATCH] Clarify the Live Lab workbench AI-assisted: OpenAI Codex. --- site/pages/live-lab/index.astro | 95 +++++++------------- site/scripts/live-lab-workbench.js | 37 ++++---- site/styles/live-lab-workbench.css | 139 +++++++++++++---------------- 3 files changed, 111 insertions(+), 160 deletions(-) diff --git a/site/pages/live-lab/index.astro b/site/pages/live-lab/index.astro index d767a95b7..a94dc2786 100644 --- a/site/pages/live-lab/index.astro +++ b/site/pages/live-lab/index.astro @@ -35,10 +35,6 @@ const improvement = baselineFloor ? Math.max(0, 1 - (protocolFloor / baselineFlo const annotatedFloor = annotated?.summary.metrics.goToFirstVariantMs?.median || 0; const maxScenarioFloor = Math.max(baselineFloor, protocolFloor, annotatedFloor, 1); const optimizedTapeWidth = Math.max(12, (protocolFloor / baselineFloor) * 952); -const generatedDate = new Date(plain.generatedAt).toLocaleDateString('en-US', { - month: 'short', day: 'numeric', year: 'numeric', -}); - const displayMs = (value: number) => { if (value >= 1000) return `${(value / 1000).toFixed(value >= 10_000 ? 1 : 2)} s`; if (value < 1) return '<1 ms'; @@ -94,31 +90,16 @@ const providerColumns = [ Impeccable

Live Lab

-

Internal performance, harness, and UI state workbench.

-
-
Product floor
{displayMs(protocolFloor)}
-
Accept clean
{displayMs(liveProviderResult.cleanupControl.acceptToCleanPickingMs)}
-
Worker wake
{displayMs(liveCodexWorkerResult.timings.wakeToTurnStartedMs)}
-
Provider pass
{liveProviderResult.totals.passingRuns}/{liveProviderResult.totals.runs}
-
+

Measure Live and inspect its interface.

@@ -127,13 +108,11 @@ const providerColumns = [
-

Runtime overview

-

Critical path and interaction latency

-

Model-free product overhead, progressive review, initialization, and the latency simulator.

+

Performance

+

Where Live spends time before the first usable variant.

- benchmarks loaded - Open Live +
@@ -146,10 +125,10 @@ const providerColumns = [ data-overlap-floor={productFloor} >
-

Latest matched run · first usable variant

-

{displayMs(protocolFloor)} product floor

+

Click → first usable variant

+

{displayMs(protocolFloor)} Live overhead

- Down {(improvement * 100).toFixed(1)}% from {displayMs(baselineFloor)} on the same fixture. Generate dispatch now starts in {displayMs(browserDispatch)} median. + Down {(improvement * 100).toFixed(1)}% from {displayMs(baselineFloor)} on the same fixture. Browser dispatch takes {displayMs(browserDispatch)} median.

Browser dispatch
{displayMs(browserDispatch)}
@@ -157,21 +136,15 @@ const providerColumns = [
Source scaffold
{displayMs(scaffold)}
Write + settle
{displayMs(writeAndRender)}
-
- {plain.summary.count} warm runs - {plain.benchmark.fixture} - Local Chromium - {generatedDate} -

Click → first usable variant

-

The critical path moved

+

Where the time goes

-

Median values. Deterministic generation isolates Impeccable’s own floor.

+

Median product overhead with model time removed.

@@ -200,8 +173,8 @@ const providerColumns = [
- Result 01 -

Unannotated requests wait only for the helper to accept the event. Shader capture continues off-path; annotated requests still capture and upload first because the screenshot is semantic input.

+ Capture no longer blocks Go +

Plain selections dispatch immediately. Annotated selections still upload the screenshot first because the model needs it.

@@ -226,9 +199,9 @@ const providerColumns = [

Progressive delivery · Codex path

-

Review starts before generation ends

+

Variant 1 arrives first

-

Variant 1 becomes reviewable and acceptable immediately. Accept fences the old worker, releases the picker, and lets the poll supervisor lease the next Go while later variants unwind.

+

Review or accept the first result while later variants continue generating.

- Result 02 + Measured improvement

Median first-reviewable latency fell {(progressiveGain * 100).toFixed(1)}%; p95 fell {(progressiveP95Gain * 100).toFixed(1)}%. Full-set completion changed by {progressiveAllDelta.toFixed(1)} ms. This is a five-run model-backed comparison using {progressiveDeliveryResult.benchmark.provider} {progressiveDeliveryResult.benchmark.model} and a sanitized synthetic heading contract. @@ -266,7 +239,7 @@ const providerColumns = [

Paid provider matrix · five runs per candidate

-

The right split depends on the provider

+

Choose delivery per provider

Sixty strict-gated runs. Brand, component, token, copy, source, and cleanup fidelity must all pass.

@@ -309,7 +282,7 @@ const providerColumns = [

Configured cold initialization

-

The helper stopped sleeping

+

Cold setup takes {displayMs(liveInitResult.cold.medianMs)}

Ten isolated starts. App dependency installation and dev-server startup are excluded.

@@ -331,7 +304,7 @@ const providerColumns = [
- Result 03 + Initialization result

Cold median fell {(initGain * 100).toFixed(1)}% to {displayMs(liveInitResult.cold.medianMs)}; p95 is {displayMs(liveInitResult.cold.p95Ms)}. Warm median is {displayMs(liveInitResult.warm.medianMs)}.

@@ -340,7 +313,7 @@ const providerColumns = [

Before / after / control

-

The common path is decisively faster

+

Plain selections skip capture

The annotated path remains a control: its screenshot must reach the agent before generation starts.

@@ -375,7 +348,7 @@ const providerColumns = [

Latency simulator

-

The gain survives slower models

+

Compare model and product time

Move model time to compare the old floor with the optimized product-side estimate.

@@ -405,7 +378,7 @@ const providerColumns = [

Harness delivery

-

Four ways to wake the work

+

Compare worker wake paths

Measure pickup before choosing architecture. Fast models cannot help while no model is running.

@@ -442,7 +415,7 @@ const providerColumns = [

Evidence-ranked decisions

-

What survived testing

+

Decisions and open bets

Shipped paths, rejected compromises, and unproven architectural bets are labeled separately.

@@ -464,7 +437,7 @@ const providerColumns = [
-

Measurement contract

+

How results are measured

bun run bench:live boots a real framework fixture and Chromium, drives Pick → Go → Cycle, and records browser preparation, server pickup, scaffold, generation, write, and render boundaries. @@ -474,9 +447,9 @@ const providerColumns = [

-
diff --git a/site/scripts/live-lab-workbench.js b/site/scripts/live-lab-workbench.js index 045cbd43d..f004e930e 100644 --- a/site/scripts/live-lab-workbench.js +++ b/site/scripts/live-lab-workbench.js @@ -1,28 +1,19 @@ const VIEW_COPY = { overview: { - kicker: 'Runtime overview', - title: 'Critical path and interaction latency', - summary: 'Model-free product overhead, progressive review, initialization, and the latency simulator.', + title: 'Performance', + summary: 'Where Live spends time before the first usable variant.', }, providers: { - kicker: 'Generation strategy', - title: 'Provider reliability and review latency', - summary: 'Five-run strict gates across full, compact, progressive, and parallel delivery.', + title: 'Providers', + summary: 'Compare generation speed, reliability, and delivery strategy.', }, harness: { - kicker: 'Harness architecture', - title: 'Control lanes, worker wake, and tested decisions', - summary: 'Foreground fallback, dedicated Codex worker evidence, and the ideas that survived testing.', + title: 'Harnesses', + summary: 'Review worker architecture and the optimizations that survived testing.', }, ui: { - kicker: 'Live chrome gallery', - title: 'Every Live UI state without a running session', - summary: 'Trigger and compare the real control states in light and dark mode.', - }, - all: { - kicker: 'Complete evidence', - title: 'All Live measurements and UI fixtures', - summary: 'The full workbench in one scrollable surface.', + title: 'UI states', + summary: 'Inspect every Live state on light and dark hosts.', }, }; @@ -33,7 +24,8 @@ export function initLiveLabWorkbench(root = document) { const buttons = [...workbench.querySelectorAll('[data-lab-view]')]; const panels = [...workbench.querySelectorAll('[data-lab-panel]')]; - const kicker = workbench.querySelector('[data-lab-view-kicker]'); + const contexts = [...workbench.querySelectorAll('[data-lab-context]')]; + const actions = [...workbench.querySelectorAll('[data-lab-view-action]')]; const title = workbench.querySelector('[data-lab-view-title]'); const summary = workbench.querySelector('[data-lab-view-summary]'); const scroller = workbench.querySelector('.live-lab-workspace-scroll'); @@ -44,10 +36,15 @@ export function initLiveLabWorkbench(root = document) { button.setAttribute('aria-pressed', String(button.dataset.labView === view)); } for (const panel of panels) { - panel.hidden = view !== 'all' && panel.dataset.labPanel !== view; + panel.hidden = panel.dataset.labPanel !== view; + } + for (const context of contexts) { + context.hidden = context.dataset.labContext !== view; + } + for (const action of actions) { + action.hidden = action.dataset.labViewAction !== view; } workbench.dataset.activeView = view; - if (kicker) kicker.textContent = VIEW_COPY[view].kicker; if (title) title.textContent = VIEW_COPY[view].title; if (summary) summary.textContent = VIEW_COPY[view].summary; if (scroller) scroller.scrollTop = 0; diff --git a/site/styles/live-lab-workbench.css b/site/styles/live-lab-workbench.css index 16bb2046e..76d57d6b6 100644 --- a/site/styles/live-lab-workbench.css +++ b/site/styles/live-lab-workbench.css @@ -12,7 +12,7 @@ } .live-lab-workbench { - --live-lab-sidebar: 300px; + --live-lab-sidebar: 264px; background: var(--ks-lacquer); } @@ -61,25 +61,6 @@ font-size: var(--ks-type-body-size); line-height: 1.5; } - -.live-lab-summary-grid { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - margin: var(--spacing-md) 0 0; - border: 1px solid var(--ks-rule); -} - -.live-lab-summary-grid div { - min-width: 0; - padding: 10px; - border-right: 1px solid var(--ks-rule); - border-bottom: 1px solid var(--ks-rule); -} - -.live-lab-summary-grid div:nth-child(2n) { border-right: 0; } -.live-lab-summary-grid div:nth-last-child(-n + 2) { border-bottom: 0; } - -.live-lab-summary-grid dt, .live-lab-panel-label, .live-lab-nav-group h2, .live-lab-diagnostic-panel dt { @@ -91,14 +72,6 @@ text-transform: uppercase; } -.live-lab-summary-grid dd { - margin: 4px 0 0; - color: var(--ks-champagne); - font-size: 1rem; - font-weight: 600; - line-height: 1.15; -} - .live-lab-nav-scroll { min-height: 0; overflow: auto; @@ -116,19 +89,14 @@ letter-spacing: 0.2em; } -.live-lab-nav-list, -.live-lab-action-list { +.live-lab-nav-list { display: grid; gap: 4px; margin-top: 10px; } -.live-lab-nav-list button, -.live-lab-action-list button, -.live-lab-action-list a { - display: grid; - grid-template-columns: minmax(0, 1fr) auto; - gap: 12px; +.live-lab-nav-list button { + display: flex; align-items: center; width: 100%; min-height: 40px; @@ -143,21 +111,12 @@ cursor: pointer; } -.live-lab-action-list button, -.live-lab-action-list a { - grid-template-columns: 1fr; -} - -.live-lab-nav-list button:hover, -.live-lab-action-list button:hover, -.live-lab-action-list a:hover { +.live-lab-nav-list button:hover { background: var(--ks-graphite); color: var(--ks-champagne); } -.live-lab-nav-list button:focus-visible, -.live-lab-action-list button:focus-visible, -.live-lab-action-list a:focus-visible { +.live-lab-nav-list button:focus-visible { outline: 2px solid var(--ks-kinpaku); outline-offset: 2px; } @@ -168,12 +127,6 @@ color: var(--ks-lacquer-deep); } -.live-lab-nav-list button span:last-child { - font-family: var(--ks-mono); - font-size: 0.75rem; - opacity: 0.72; -} - .live-lab-workspace { display: flex; flex-direction: column; @@ -190,15 +143,15 @@ justify-content: space-between; gap: var(--spacing-md); align-items: center; - min-height: 80px; - padding: 12px var(--spacing-md); + min-height: 68px; + padding: 10px var(--spacing-md); border-bottom: 1px solid var(--ks-rule); background: var(--ks-lacquer-deep); } .live-lab-toolbar h2, .live-lab-diagnostic-panel h2 { - margin: 2px 0 0; + margin: 0; color: var(--ks-champagne); font: 600 1rem/1.2 var(--ks-font); } @@ -217,34 +170,29 @@ align-items: center; } -.live-lab-status { - display: inline-flex; - gap: 7px; - align-items: center; - color: var(--ks-text-muted); - font: 0.75rem/1.2 var(--ks-mono); -} - -.live-lab-status i { - width: 7px; - height: 7px; - border-radius: 50%; - background: var(--ks-patina); -} - -.live-lab-toolbar-actions a { +.live-lab-toolbar-actions button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 16px; - border: 1px solid var(--ks-kinpaku); + border: 1px solid var(--ks-rule-strong); border-radius: 2px; - background: var(--ks-kinpaku); - color: var(--ks-lacquer-deep); + background: transparent; + color: var(--ks-kinpaku); font-size: var(--ks-type-body-size); font-weight: 600; - text-decoration: none; + cursor: pointer; +} + +.live-lab-toolbar-actions button:hover { + background: var(--ks-kinpaku); + color: var(--ks-lacquer-deep); +} + +.live-lab-toolbar-actions button:focus-visible { + outline: 2px solid var(--ks-kinpaku); + outline-offset: 2px; } .live-lab-workspace-scroll { @@ -255,7 +203,7 @@ .live-lab-content-grid { display: grid; - grid-template-columns: minmax(0, 1fr) 300px; + grid-template-columns: minmax(0, 1fr) 280px; gap: var(--spacing-sm); align-items: start; padding: var(--spacing-sm); @@ -273,6 +221,40 @@ padding: clamp(24px, 4vw, 48px); } +.live-lab-workbench[data-active-view='ui'] .live-lab-workspace-scroll { + overflow: hidden; +} + +.live-lab-workbench[data-active-view='ui'] .live-lab-content-grid { + grid-template-columns: minmax(0, 1fr); + height: 100%; + padding: 0; +} + +.live-lab-workbench[data-active-view='ui'] .live-lab-canvas, +.live-lab-workbench[data-active-view='ui'] .live-lab-ui-panel { + height: 100%; + min-height: 0; +} + +.live-lab-workbench[data-active-view='ui'] .live-lab-canvas { + overflow: hidden; + border: 0; +} + +.live-lab-workbench[data-active-view='ui'] .live-lab-ui-panel { + padding: 0; +} + +.live-lab-workbench[data-active-view='ui'] .live-lab-diagnostics { + display: none; +} + +.live-lab-diagnostic-panel[hidden], +.live-lab-toolbar-actions [hidden] { + display: none; +} + .live-lab-canvas { padding-bottom: 0; } @@ -454,7 +436,7 @@ } @media (max-width: 1180px) { - .live-lab-workbench { --live-lab-sidebar: 270px; } + .live-lab-workbench { --live-lab-sidebar: 244px; } .live-lab-content-grid { grid-template-columns: minmax(0, 1fr); } .live-lab-diagnostics { position: static; @@ -504,7 +486,6 @@ } @media (max-width: 560px) { - .live-lab-summary-grid, .live-lab-diagnostic-panel dl, .live-lab-nav-scroll, .live-lab-run-stats {