mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-18 17:16:46 +03:00
skill v4.0.0-alpha.8: four visitor modes replace the brand/product bifurcation
Field report: impeccable SaaS-ified a developer docs page; the Opus galleries showed the same on an album page. Root cause: two registers force every surface into persuade-or-operate grammar. The register section now names the visitor's mode first (Persuade / Operate / Read / Experience) with mode-borrowing called out as the canonical failure, and PRODUCT.md's register field maps as family (brand = Persuade + Experience, product = Operate + Read) for compatibility. Read mode: comprehension deliverable, navigable structure, chrome out of the way. Experience mode: the artifact leads at every screen size. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
co-authored by
Claude Fable 5
Claude Fable 5
parent
2e71facb59
commit
bf2dd7ec13
@@ -0,0 +1,114 @@
|
||||
export const harnessPaths = [
|
||||
{
|
||||
name: 'Foreground long-poll',
|
||||
harness: 'Codex desktop · observed',
|
||||
pickup: 'Immediate when the turn is blocked',
|
||||
tradeoff: 'Reliable, but Live occupies the main agent and inherits its model speed.',
|
||||
status: 'Baseline',
|
||||
statusTone: 'ready',
|
||||
},
|
||||
{
|
||||
name: 'Background terminal + watcher',
|
||||
harness: 'Codex app-server · available primitives',
|
||||
pickup: 'Not yet measured end-to-end',
|
||||
tradeoff: 'The app-server exposes output notifications and fs.watch, but a watcher still has to wake model work quickly.',
|
||||
status: 'Benchmark next',
|
||||
statusTone: 'measure',
|
||||
source: 'https://learn.chatgpt.com/docs/app-server#api-overview',
|
||||
},
|
||||
{
|
||||
name: 'Warm variant producer',
|
||||
harness: 'Codex custom agent',
|
||||
pickup: 'Spawn/resume cost unknown',
|
||||
tradeoff: 'Can pin a faster model and lower reasoning, but fresh context and handoff can erase the gain unless the agent stays warm.',
|
||||
status: 'Prototype',
|
||||
statusTone: 'prototype',
|
||||
source: 'https://learn.chatgpt.com/docs/agent-configuration/subagents',
|
||||
},
|
||||
{
|
||||
name: 'Background variant producer',
|
||||
harness: 'Claude Code subagent',
|
||||
pickup: 'Supported; measure per version',
|
||||
tradeoff: 'Model, effort, background execution, and resume are configurable. Preserve the current main-thread path as fallback.',
|
||||
status: 'Cross-harness control',
|
||||
statusTone: 'control',
|
||||
source: 'https://code.claude.com/docs/en/sub-agents',
|
||||
},
|
||||
];
|
||||
|
||||
export const liveExperiments = [
|
||||
{
|
||||
rank: 1,
|
||||
title: 'Dispatch first, capture second',
|
||||
evidence: 'The plain path spends 828 ms before the generate POST leaves the browser.',
|
||||
move: 'For unannotated picks, post the event immediately and run shader capture in parallel. Keep annotated capture on the blocking path until the protocol can attach evidence later.',
|
||||
expected: 'Removes up to 90% of the measured model-free floor on the common path.',
|
||||
confidence: 'Measured',
|
||||
},
|
||||
{
|
||||
rank: 2,
|
||||
title: 'Reveal variants progressively',
|
||||
evidence: 'First and all variants arrive together today; the measured delivery gap is only the observer settling time.',
|
||||
move: 'Give each variant its own ready event or preview file. Reveal variant 1 as soon as it validates while the remaining variants continue.',
|
||||
expected: 'Large perceived win whenever generation is the dominant stage.',
|
||||
confidence: 'Protocol change',
|
||||
},
|
||||
{
|
||||
rank: 3,
|
||||
title: 'Keep a harness-native producer warm',
|
||||
evidence: 'Codex and Claude can assign a different model to a custom subagent; both support continuing agent state.',
|
||||
move: 'Resume one narrow Live producer with a compact contract, low reasoning, and source-write tools only. Quality-gate its output before preview.',
|
||||
expected: 'Reduces model latency without forcing the user to change the main conversation model.',
|
||||
confidence: 'Needs spawn/resume benchmark',
|
||||
},
|
||||
{
|
||||
rank: 4,
|
||||
title: 'Move context work into the selection dwell',
|
||||
evidence: 'The existing prefetch event was disabled because quick Go clicks paid an extra harness round trip.',
|
||||
move: 'Debounce selection, then resolve the source file, style mode, token summary, and identity lock locally. Cancel or reuse the result on Go without queueing a model turn.',
|
||||
expected: 'Shortens scaffold and prompt preparation while keeping quick clicks cheap.',
|
||||
confidence: 'Low-risk prototype',
|
||||
},
|
||||
{
|
||||
rank: 5,
|
||||
title: 'Generate knobs after pixels',
|
||||
evidence: 'Parameter manifests are authored in the same response as every variant even though the first job is visual comparison.',
|
||||
move: 'Render validated variants first. Infer coarse CSS knobs locally or ask the producer for parameters only for the visible/selected variant.',
|
||||
expected: 'Cuts output tokens and lets the first useful preview land sooner.',
|
||||
confidence: 'Quality experiment',
|
||||
},
|
||||
{
|
||||
rank: 6,
|
||||
title: 'Parallelize variant ideas, centralize writes',
|
||||
evidence: 'Modern harnesses can run several specialized agents concurrently, but shared-file edits create coordination risk.',
|
||||
move: 'Have workers return one structured variant each; one coordinator validates and performs the only source write. Stream the first valid result.',
|
||||
expected: 'Lower time to first option and stronger diversity at higher token cost.',
|
||||
confidence: 'Expensive experiment',
|
||||
},
|
||||
{
|
||||
rank: 7,
|
||||
title: 'Trim and cache the producer contract',
|
||||
evidence: 'The full Live reference is large and stable; only a small slice is needed for one generate event.',
|
||||
move: 'Compile a provider-specific generation contract, keep the stable prefix cacheable, and attach only the action reference plus picked-element context.',
|
||||
expected: 'Lower prefill latency and cost, especially for fresh subagents.',
|
||||
confidence: 'Harness-specific',
|
||||
},
|
||||
{
|
||||
rank: 8,
|
||||
title: 'Wake on the journal, not terminal stdout',
|
||||
evidence: 'Codex app-server exposes fs.watch and process output notifications, while this desktop probe still required an explicit terminal read.',
|
||||
move: 'Benchmark a plugin/app-server bridge that watches the durable Live journal and starts or steers a dedicated turn directly.',
|
||||
expected: 'Frees the main turn if watcher-to-turn startup beats foreground polling.',
|
||||
confidence: 'Architectural bet',
|
||||
},
|
||||
];
|
||||
|
||||
export const currentHarnessProbe = {
|
||||
testedAt: '2026-07-11',
|
||||
surface: 'Codex desktop unified exec',
|
||||
delayedOutputMs: 3000,
|
||||
processExitMs: 4000,
|
||||
surfacedAutomatically: false,
|
||||
result: 'The sentinel appeared only after an explicit session read; no app terminal was attached.',
|
||||
};
|
||||
|
||||
@@ -0,0 +1,378 @@
|
||||
{
|
||||
"schemaVersion": 1,
|
||||
"generatedAt": "2026-07-11T23:46:48.581Z",
|
||||
"reports": [
|
||||
{
|
||||
"schemaVersion": 1,
|
||||
"generatedAt": "2026-07-11T23:46:32.205Z",
|
||||
"benchmark": {
|
||||
"fixture": "vite8-react-plain",
|
||||
"agent": "fake",
|
||||
"provider": "deterministic",
|
||||
"model": null,
|
||||
"scenario": "plain",
|
||||
"variants": 3,
|
||||
"delivery": "atomic"
|
||||
},
|
||||
"setup": {
|
||||
"dependencies": 750.27,
|
||||
"liveServer": 241.02,
|
||||
"injection": 25.24,
|
||||
"devServer": 521.01,
|
||||
"pageLoad": 101.88,
|
||||
"handshake": 263.84
|
||||
},
|
||||
"summary": {
|
||||
"count": 7,
|
||||
"metrics": {
|
||||
"browserPreparationMs": {
|
||||
"median": 828.36,
|
||||
"p95": 834.77,
|
||||
"min": 826.16,
|
||||
"max": 836.91
|
||||
},
|
||||
"serverPickupMs": {
|
||||
"median": 0.8,
|
||||
"p95": 2.57,
|
||||
"min": 0.58,
|
||||
"max": 3.25
|
||||
},
|
||||
"goToAgentMs": {
|
||||
"median": 829.06,
|
||||
"p95": 837.29,
|
||||
"min": 826.75,
|
||||
"max": 840.16
|
||||
},
|
||||
"scaffoldMs": {
|
||||
"median": 40.99,
|
||||
"p95": 45.12,
|
||||
"min": 40.21,
|
||||
"max": 46.46
|
||||
},
|
||||
"generationMs": {
|
||||
"median": 0.04,
|
||||
"p95": 0.16,
|
||||
"min": 0.03,
|
||||
"max": 0.19
|
||||
},
|
||||
"writeMs": {
|
||||
"median": 0.38,
|
||||
"p95": 0.7,
|
||||
"min": 0.33,
|
||||
"max": 0.75
|
||||
},
|
||||
"writeToFirstVariantMs": {
|
||||
"median": 46.82,
|
||||
"p95": 67.96,
|
||||
"min": 35.43,
|
||||
"max": 74.14
|
||||
},
|
||||
"replyMs": {
|
||||
"median": 2.24,
|
||||
"p95": 3.3,
|
||||
"min": 1.23,
|
||||
"max": 3.69
|
||||
},
|
||||
"goToFirstVariantMs": {
|
||||
"median": 916.31,
|
||||
"p95": 950.62,
|
||||
"min": 906.84,
|
||||
"max": 961.99
|
||||
},
|
||||
"goToAllVariantsMs": {
|
||||
"median": 917.33,
|
||||
"p95": 954.93,
|
||||
"min": 908.06,
|
||||
"max": 966
|
||||
},
|
||||
"deliveryGapMs": {
|
||||
"median": 1.28,
|
||||
"p95": 4.71,
|
||||
"min": 1.02,
|
||||
"max": 5.01
|
||||
},
|
||||
"impeccableOverheadMs": {
|
||||
"median": 916.28,
|
||||
"p95": 950.47,
|
||||
"min": 906.76,
|
||||
"max": 961.8
|
||||
}
|
||||
}
|
||||
},
|
||||
"runs": [
|
||||
{
|
||||
"iteration": 1,
|
||||
"scenario": "plain",
|
||||
"eventId": "6a9e48dd",
|
||||
"browserPreparationMs": 836.91,
|
||||
"serverPickupMs": 3.25,
|
||||
"goToAgentMs": 840.16,
|
||||
"scaffoldMs": 46.46,
|
||||
"generationMs": 0.19,
|
||||
"writeMs": 0.75,
|
||||
"writeToFirstVariantMs": 74.14,
|
||||
"replyMs": 3.69,
|
||||
"goToFirstVariantMs": 961.99,
|
||||
"goToAllVariantsMs": 966,
|
||||
"deliveryGapMs": 4.01,
|
||||
"impeccableOverheadMs": 961.8
|
||||
},
|
||||
{
|
||||
"iteration": 2,
|
||||
"scenario": "plain",
|
||||
"eventId": "79334eff",
|
||||
"browserPreparationMs": 829.79,
|
||||
"serverPickupMs": 0.8,
|
||||
"goToAgentMs": 830.59,
|
||||
"scaffoldMs": 40.29,
|
||||
"generationMs": 0.08,
|
||||
"writeMs": 0.36,
|
||||
"writeToFirstVariantMs": 35.43,
|
||||
"replyMs": 1.23,
|
||||
"goToFirstVariantMs": 906.84,
|
||||
"goToAllVariantsMs": 908.06,
|
||||
"deliveryGapMs": 1.23,
|
||||
"impeccableOverheadMs": 906.76
|
||||
},
|
||||
{
|
||||
"iteration": 3,
|
||||
"scenario": "plain",
|
||||
"eventId": "e90cfb27",
|
||||
"browserPreparationMs": 829.35,
|
||||
"serverPickupMs": 0.99,
|
||||
"goToAgentMs": 830.34,
|
||||
"scaffoldMs": 40.21,
|
||||
"generationMs": 0.03,
|
||||
"writeMs": 0.58,
|
||||
"writeToFirstVariantMs": 42.74,
|
||||
"replyMs": 2.38,
|
||||
"goToFirstVariantMs": 913.95,
|
||||
"goToAllVariantsMs": 915.28,
|
||||
"deliveryGapMs": 1.33,
|
||||
"impeccableOverheadMs": 913.92
|
||||
},
|
||||
{
|
||||
"iteration": 4,
|
||||
"scenario": "plain",
|
||||
"eventId": "3fef871d",
|
||||
"browserPreparationMs": 826.16,
|
||||
"serverPickupMs": 0.58,
|
||||
"goToAgentMs": 826.75,
|
||||
"scaffoldMs": 41.99,
|
||||
"generationMs": 0.04,
|
||||
"writeMs": 0.4,
|
||||
"writeToFirstVariantMs": 44.86,
|
||||
"replyMs": 2.05,
|
||||
"goToFirstVariantMs": 914.08,
|
||||
"goToAllVariantsMs": 915.21,
|
||||
"deliveryGapMs": 1.13,
|
||||
"impeccableOverheadMs": 914.04
|
||||
},
|
||||
{
|
||||
"iteration": 5,
|
||||
"scenario": "plain",
|
||||
"eventId": "d67ced1d",
|
||||
"browserPreparationMs": 828.36,
|
||||
"serverPickupMs": 0.7,
|
||||
"goToAgentMs": 829.06,
|
||||
"scaffoldMs": 41.55,
|
||||
"generationMs": 0.04,
|
||||
"writeMs": 0.38,
|
||||
"writeToFirstVariantMs": 53.03,
|
||||
"replyMs": 2.24,
|
||||
"goToFirstVariantMs": 924.09,
|
||||
"goToAllVariantsMs": 929.1,
|
||||
"deliveryGapMs": 5.01,
|
||||
"impeccableOverheadMs": 924.05
|
||||
},
|
||||
{
|
||||
"iteration": 6,
|
||||
"scenario": "plain",
|
||||
"eventId": "8ec42ed8",
|
||||
"browserPreparationMs": 827.68,
|
||||
"serverPickupMs": 0.86,
|
||||
"goToAgentMs": 828.54,
|
||||
"scaffoldMs": 40.55,
|
||||
"generationMs": 0.03,
|
||||
"writeMs": 0.34,
|
||||
"writeToFirstVariantMs": 46.82,
|
||||
"replyMs": 2.3,
|
||||
"goToFirstVariantMs": 916.31,
|
||||
"goToAllVariantsMs": 917.33,
|
||||
"deliveryGapMs": 1.02,
|
||||
"impeccableOverheadMs": 916.28
|
||||
},
|
||||
{
|
||||
"iteration": 7,
|
||||
"scenario": "plain",
|
||||
"eventId": "545113b0",
|
||||
"browserPreparationMs": 826.45,
|
||||
"serverPickupMs": 0.62,
|
||||
"goToAgentMs": 827.07,
|
||||
"scaffoldMs": 40.99,
|
||||
"generationMs": 0.03,
|
||||
"writeMs": 0.33,
|
||||
"writeToFirstVariantMs": 53.55,
|
||||
"replyMs": 2.15,
|
||||
"goToFirstVariantMs": 921.99,
|
||||
"goToAllVariantsMs": 923.27,
|
||||
"deliveryGapMs": 1.28,
|
||||
"impeccableOverheadMs": 921.96
|
||||
}
|
||||
],
|
||||
"harnessProbe": null
|
||||
},
|
||||
{
|
||||
"schemaVersion": 1,
|
||||
"generatedAt": "2026-07-11T23:46:48.580Z",
|
||||
"benchmark": {
|
||||
"fixture": "vite8-react-plain",
|
||||
"agent": "fake",
|
||||
"provider": "deterministic",
|
||||
"model": null,
|
||||
"scenario": "annotated",
|
||||
"variants": 3,
|
||||
"delivery": "atomic"
|
||||
},
|
||||
"setup": {
|
||||
"dependencies": 766.31,
|
||||
"liveServer": 241.6,
|
||||
"injection": 24.86,
|
||||
"devServer": 521.99,
|
||||
"pageLoad": 100.94,
|
||||
"handshake": 264.71
|
||||
},
|
||||
"summary": {
|
||||
"count": 3,
|
||||
"metrics": {
|
||||
"browserPreparationMs": {
|
||||
"median": 334.98,
|
||||
"p95": 359.15,
|
||||
"min": 330.18,
|
||||
"max": 361.84
|
||||
},
|
||||
"serverPickupMs": {
|
||||
"median": 0.77,
|
||||
"p95": 3.12,
|
||||
"min": 0.42,
|
||||
"max": 3.38
|
||||
},
|
||||
"goToAgentMs": {
|
||||
"median": 335.4,
|
||||
"p95": 359.89,
|
||||
"min": 333.55,
|
||||
"max": 362.61
|
||||
},
|
||||
"scaffoldMs": {
|
||||
"median": 41.47,
|
||||
"p95": 41.93,
|
||||
"min": 41.03,
|
||||
"max": 41.98
|
||||
},
|
||||
"generationMs": {
|
||||
"median": 0.09,
|
||||
"p95": 0.16,
|
||||
"min": 0.04,
|
||||
"max": 0.17
|
||||
},
|
||||
"writeMs": {
|
||||
"median": 0.42,
|
||||
"p95": 0.61,
|
||||
"min": 0.37,
|
||||
"max": 0.63
|
||||
},
|
||||
"writeToFirstVariantMs": {
|
||||
"median": 53.51,
|
||||
"p95": 104.9,
|
||||
"min": 26.56,
|
||||
"max": 110.61
|
||||
},
|
||||
"replyMs": {
|
||||
"median": 2.52,
|
||||
"p95": 3.22,
|
||||
"min": 2.08,
|
||||
"max": 3.3
|
||||
},
|
||||
"goToFirstVariantMs": {
|
||||
"median": 430.97,
|
||||
"p95": 481.59,
|
||||
"min": 430.64,
|
||||
"max": 487.21
|
||||
},
|
||||
"goToAllVariantsMs": {
|
||||
"median": 432.3,
|
||||
"p95": 485.66,
|
||||
"min": 431.85,
|
||||
"max": 491.59
|
||||
},
|
||||
"deliveryGapMs": {
|
||||
"median": 1.32,
|
||||
"p95": 4.08,
|
||||
"min": 1.21,
|
||||
"max": 4.39
|
||||
},
|
||||
"impeccableOverheadMs": {
|
||||
"median": 430.88,
|
||||
"p95": 481.42,
|
||||
"min": 430.6,
|
||||
"max": 487.04
|
||||
}
|
||||
}
|
||||
},
|
||||
"runs": [
|
||||
{
|
||||
"iteration": 1,
|
||||
"scenario": "annotated",
|
||||
"eventId": "e767f0ce",
|
||||
"browserPreparationMs": 330.18,
|
||||
"serverPickupMs": 3.38,
|
||||
"goToAgentMs": 333.55,
|
||||
"scaffoldMs": 41.98,
|
||||
"generationMs": 0.17,
|
||||
"writeMs": 0.63,
|
||||
"writeToFirstVariantMs": 110.61,
|
||||
"replyMs": 3.3,
|
||||
"goToFirstVariantMs": 487.21,
|
||||
"goToAllVariantsMs": 491.59,
|
||||
"deliveryGapMs": 4.39,
|
||||
"impeccableOverheadMs": 487.04
|
||||
},
|
||||
{
|
||||
"iteration": 2,
|
||||
"scenario": "annotated",
|
||||
"eventId": "5aca9e96",
|
||||
"browserPreparationMs": 334.98,
|
||||
"serverPickupMs": 0.42,
|
||||
"goToAgentMs": 335.4,
|
||||
"scaffoldMs": 41.47,
|
||||
"generationMs": 0.09,
|
||||
"writeMs": 0.42,
|
||||
"writeToFirstVariantMs": 53.51,
|
||||
"replyMs": 2.08,
|
||||
"goToFirstVariantMs": 430.97,
|
||||
"goToAllVariantsMs": 432.3,
|
||||
"deliveryGapMs": 1.32,
|
||||
"impeccableOverheadMs": 430.88
|
||||
},
|
||||
{
|
||||
"iteration": 3,
|
||||
"scenario": "annotated",
|
||||
"eventId": "72cfa915",
|
||||
"browserPreparationMs": 361.84,
|
||||
"serverPickupMs": 0.77,
|
||||
"goToAgentMs": 362.61,
|
||||
"scaffoldMs": 41.03,
|
||||
"generationMs": 0.04,
|
||||
"writeMs": 0.37,
|
||||
"writeToFirstVariantMs": 26.56,
|
||||
"replyMs": 2.52,
|
||||
"goToFirstVariantMs": 430.64,
|
||||
"goToAllVariantsMs": 431.85,
|
||||
"deliveryGapMs": 1.21,
|
||||
"impeccableOverheadMs": 430.6
|
||||
}
|
||||
],
|
||||
"harnessProbe": null
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,251 @@
|
||||
---
|
||||
import Base from '../../layouts/Base.astro';
|
||||
import benchmarkData from '../../data/live-performance.json';
|
||||
import { currentHarnessProbe, harnessPaths, liveExperiments } from '../../data/live-harnesses';
|
||||
import '../../styles/sub-pages.css';
|
||||
import '../../styles/live-performance.css';
|
||||
|
||||
const reports = 'reports' in benchmarkData ? benchmarkData.reports : [benchmarkData];
|
||||
const plain = reports.find(report => report.benchmark.scenario === 'plain' && report.benchmark.agent === 'fake') || reports[0];
|
||||
const annotated = reports.find(report => report.benchmark.scenario === 'annotated' && report.benchmark.agent === 'fake');
|
||||
const metric = (name: string) => plain.summary.metrics[name]?.median || 0;
|
||||
const protocolFloor = metric('goToFirstVariantMs');
|
||||
const browserPreparation = metric('browserPreparationMs');
|
||||
const serverPickup = metric('serverPickupMs');
|
||||
const scaffold = metric('scaffoldMs');
|
||||
const writeAndRender = metric('writeMs') + metric('writeToFirstVariantMs');
|
||||
const overlapFloor = Math.max(0, protocolFloor - browserPreparation);
|
||||
const preparationShare = protocolFloor ? (browserPreparation / protocolFloor) * 100 : 0;
|
||||
const annotatedFloor = annotated?.summary.metrics.goToFirstVariantMs?.median || 0;
|
||||
const maxScenarioFloor = Math.max(protocolFloor, annotatedFloor, 1);
|
||||
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';
|
||||
return `${Math.round(value)} ms`;
|
||||
};
|
||||
|
||||
const stageData = [
|
||||
{ name: 'Browser preparation', value: browserPreparation, tone: 'capture' },
|
||||
{ name: 'Server pickup', value: serverPickup, tone: 'pickup' },
|
||||
{ name: 'Source scaffold', value: scaffold, tone: 'scaffold' },
|
||||
{ name: 'Write + browser settle', value: writeAndRender, tone: 'render' },
|
||||
];
|
||||
---
|
||||
|
||||
<Base
|
||||
title="Live Latency Lab | Impeccable"
|
||||
description="Measured latency for Impeccable Live, from Go to the first usable variant."
|
||||
bodyClass="sub-page live-performance-page"
|
||||
mainClass="live-performance-main"
|
||||
noIndex
|
||||
hideHeader
|
||||
hideFooter
|
||||
>
|
||||
<header class="live-lab-header">
|
||||
<a class="live-lab-brand ks-brand" href="/live" aria-label="Back to Live Mode">
|
||||
<span class="ks-mark" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M5 2.5 L13.5 2.5 L5.5 21.5 L5 21.5 Q2.5 21.5 2.5 19 L2.5 5 Q2.5 2.5 5 2.5 Z"></path>
|
||||
<path d="M16.5 2.5 L19 2.5 Q21.5 2.5 21.5 5 L21.5 19 Q21.5 21.5 19 21.5 L8.5 21.5 Z"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="ks-wordmark">Impeccable</span>
|
||||
</a>
|
||||
<div>
|
||||
<strong>Live Latency Lab</strong>
|
||||
<span>Development benchmark</span>
|
||||
</div>
|
||||
</header>
|
||||
<article
|
||||
class="live-performance"
|
||||
data-live-performance
|
||||
data-protocol-floor={protocolFloor}
|
||||
data-overlap-floor={overlapFloor}
|
||||
>
|
||||
<header class="live-performance-hero ks-section">
|
||||
<p class="live-performance-kicker">Live latency lab · protocol baseline</p>
|
||||
<h1>The wait starts<br /><span>before the model.</span></h1>
|
||||
<p class="live-performance-lede">
|
||||
With generation removed, Go still takes {displayMs(protocolFloor)} to show the first variant.
|
||||
{' '}{preparationShare.toFixed(1)}% of that time passes before the generate event leaves the browser.
|
||||
</p>
|
||||
<div class="live-performance-meta" aria-label="Benchmark context">
|
||||
<span>{plain.summary.count} warm runs</span>
|
||||
<span>{plain.benchmark.fixture}</span>
|
||||
<span>Local Chromium</span>
|
||||
<span>{generatedDate}</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="live-performance-section ks-section" aria-labelledby="critical-path-title">
|
||||
<div class="live-performance-section-head">
|
||||
<div>
|
||||
<p class="live-performance-label">Click → first usable variant</p>
|
||||
<h2 id="critical-path-title">The measured critical path</h2>
|
||||
</div>
|
||||
<p>Median values. Deterministic generation isolates Impeccable’s own floor.</p>
|
||||
</div>
|
||||
|
||||
<div class="latency-tape">
|
||||
<svg viewBox="0 0 1000 214" role="img" aria-labelledby="latency-title latency-desc">
|
||||
<title id="latency-title">Impeccable Live model-free latency timeline</title>
|
||||
<desc id="latency-desc">A 916 millisecond timeline dominated by 828 milliseconds of browser preparation before the generate request.</desc>
|
||||
<line class="latency-axis" x1="24" y1="112" x2="976" y2="112"></line>
|
||||
<g class="latency-ticks" aria-hidden="true">
|
||||
<line x1="24" y1="102" x2="24" y2="124"></line>
|
||||
<line x1="284" y1="106" x2="284" y2="120"></line>
|
||||
<line x1="544" y1="106" x2="544" y2="120"></line>
|
||||
<line x1="804" y1="106" x2="804" y2="120"></line>
|
||||
<line x1="976" y1="102" x2="976" y2="124"></line>
|
||||
</g>
|
||||
<rect class="latency-segment is-capture" x="24" y="88" width="860" height="48"></rect>
|
||||
<rect class="latency-segment is-pickup" x="884" y="88" width="2" height="48"></rect>
|
||||
<rect class="latency-segment is-scaffold" x="886" y="88" width="43" height="48"></rect>
|
||||
<rect class="latency-segment is-render" x="929" y="88" width="47" height="48"></rect>
|
||||
<text class="latency-major-label" x="44" y="75">Browser prepares capture</text>
|
||||
<text class="latency-major-value" x="44" y="118">{displayMs(browserPreparation)}</text>
|
||||
<text class="latency-remainder-label" x="974" y="166" text-anchor="end">everything after dispatch · {displayMs(overlapFloor)}</text>
|
||||
<path class="latency-bracket" d="M884 148 V158 H976 V148"></path>
|
||||
<text class="latency-axis-label" x="24" y="194">Go</text>
|
||||
<text class="latency-axis-label" x="976" y="194" text-anchor="end">First variant</text>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<ol class="latency-stage-list" aria-label="Critical path stages">
|
||||
{stageData.map((stage, index) => (
|
||||
<li data-tone={stage.tone}>
|
||||
<span>{String(index + 1).padStart(2, '0')}</span>
|
||||
<strong>{stage.name}</strong>
|
||||
<em>{displayMs(stage.value)}</em>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
|
||||
<div class="live-performance-finding" role="note">
|
||||
<strong>Finding 01</strong>
|
||||
<p>The browser captures the selected element for the generating shader even when no annotations need to reach the model. That capture blocks event dispatch.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="live-performance-section ks-section" aria-labelledby="paths-title">
|
||||
<div class="live-performance-section-head">
|
||||
<div>
|
||||
<p class="live-performance-label">Capture paths</p>
|
||||
<h2 id="paths-title">Annotation state changes the floor</h2>
|
||||
</div>
|
||||
<p>The difference is repeatable enough to investigate, not yet explained enough to optimize against.</p>
|
||||
</div>
|
||||
<div class="scenario-comparison" role="img" aria-label={`Plain path ${displayMs(protocolFloor)}; annotated path ${displayMs(annotatedFloor)}`}>
|
||||
<div class="scenario-row">
|
||||
<div class="scenario-label"><strong>Plain pick</strong><span>No comments or strokes</span></div>
|
||||
<div class="scenario-track"><span class="is-plain" style={`--scenario-width:${(protocolFloor / maxScenarioFloor) * 100}%`}></span></div>
|
||||
<output>{displayMs(protocolFloor)}</output>
|
||||
</div>
|
||||
<div class="scenario-row">
|
||||
<div class="scenario-label"><strong>Annotated pick</strong><span>Pin + stroke + upload</span></div>
|
||||
<div class="scenario-track"><span class="is-annotated" style={`--scenario-width:${(annotatedFloor / maxScenarioFloor) * 100}%`}></span></div>
|
||||
<output>{displayMs(annotatedFloor)}</output>
|
||||
</div>
|
||||
</div>
|
||||
<p class="live-performance-caption">Protocol-only measurements: {plain.summary.count} plain runs, {annotated?.summary.count || 0} annotated runs. Browser and filesystem caches were warm.</p>
|
||||
</section>
|
||||
|
||||
<section class="live-performance-section live-simulator-section ks-section" aria-labelledby="simulator-title">
|
||||
<div class="live-performance-section-head">
|
||||
<div>
|
||||
<p class="live-performance-label">Latency simulator</p>
|
||||
<h2 id="simulator-title">Model speed does not erase fixed overhead</h2>
|
||||
</div>
|
||||
<p>Move the model time. The protocol floor stays put.</p>
|
||||
</div>
|
||||
<div class="live-simulator">
|
||||
<label for="model-latency">Model generates all variants <output data-model-value>15 s</output></label>
|
||||
<input id="model-latency" data-model-latency type="range" min="0" max="60000" step="500" value="15000" />
|
||||
<div class="simulator-results" aria-live="polite">
|
||||
<div>
|
||||
<span>Current atomic path</span>
|
||||
<strong data-current-total>15.9 s</strong>
|
||||
<small>model + measured protocol floor</small>
|
||||
</div>
|
||||
<div>
|
||||
<span>Capture fully overlapped</span>
|
||||
<strong data-overlap-total>15.1 s</strong>
|
||||
<small>best-case projection, not a measured target</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="live-performance-section ks-section" aria-labelledby="harness-title">
|
||||
<div class="live-performance-section-head">
|
||||
<div>
|
||||
<p class="live-performance-label">Harness delivery</p>
|
||||
<h2 id="harness-title">Four ways to wake the work</h2>
|
||||
</div>
|
||||
<p>Measure pickup before choosing architecture. Fast models cannot help while no model is running.</p>
|
||||
</div>
|
||||
<div class="harness-table-wrap">
|
||||
<table class="harness-table">
|
||||
<thead><tr><th>Path</th><th>Pickup</th><th>Tradeoff</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
{harnessPaths.map(path => (
|
||||
<tr>
|
||||
<td><strong>{path.name}</strong><span>{path.harness}</span></td>
|
||||
<td>{path.pickup}</td>
|
||||
<td>{path.tradeoff}{path.source && <> <a href={path.source}>Docs</a></>}</td>
|
||||
<td><span class="ks-tag is-neutral" data-tone={path.statusTone}>{path.status}</span></td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="live-performance-finding is-probe" role="note">
|
||||
<strong>Harness probe</strong>
|
||||
<p>{currentHarnessProbe.surface}: {currentHarnessProbe.result}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="live-performance-section live-experiments-section ks-section" aria-labelledby="experiments-title">
|
||||
<div class="live-performance-section-head">
|
||||
<div>
|
||||
<p class="live-performance-label">Evidence-ranked backlog</p>
|
||||
<h2 id="experiments-title">What to test next</h2>
|
||||
</div>
|
||||
<p>Actual latency first, perceived latency second, architectural bets last.</p>
|
||||
</div>
|
||||
<ol class="experiment-list">
|
||||
{liveExperiments.map(experiment => (
|
||||
<li>
|
||||
<span class="experiment-rank">{String(experiment.rank).padStart(2, '0')}</span>
|
||||
<div class="experiment-body">
|
||||
<header><h3>{experiment.title}</h3><span>{experiment.confidence}</span></header>
|
||||
<p>{experiment.move}</p>
|
||||
<dl>
|
||||
<div><dt>Evidence</dt><dd>{experiment.evidence}</dd></div>
|
||||
<div><dt>Expected</dt><dd>{experiment.expected}</dd></div>
|
||||
</dl>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
<section class="live-performance-method ks-section" aria-labelledby="method-title">
|
||||
<h2 id="method-title">Measurement contract</h2>
|
||||
<p>
|
||||
<code>bun run bench:live</code> boots a real framework fixture and Chromium, drives Pick → Go → Cycle,
|
||||
and records browser preparation, server pickup, scaffold, generation, write, and render boundaries.
|
||||
The deterministic agent makes Impeccable overhead visible; model-backed runs remain opt-in because they send fixture context to an external provider.
|
||||
</p>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<script>
|
||||
import { initLivePerformance } from '../../scripts/live-performance.js';
|
||||
initLivePerformance();
|
||||
</script>
|
||||
</Base>
|
||||
@@ -0,0 +1,3 @@
|
||||
---
|
||||
return Astro.redirect('/live-mode', 301);
|
||||
---
|
||||
@@ -0,0 +1,31 @@
|
||||
export function initLivePerformance() {
|
||||
const root = document.querySelector('[data-live-performance]');
|
||||
if (!root) return;
|
||||
|
||||
const slider = root.querySelector('[data-model-latency]');
|
||||
const modelValue = root.querySelector('[data-model-value]');
|
||||
const currentValue = root.querySelector('[data-current-total]');
|
||||
const overlapValue = root.querySelector('[data-overlap-total]');
|
||||
if (!slider || !modelValue || !currentValue || !overlapValue) return;
|
||||
|
||||
const protocolFloor = Number(root.dataset.protocolFloor || 0);
|
||||
const overlapFloor = Number(root.dataset.overlapFloor || 0);
|
||||
const formatter = new Intl.NumberFormat('en-US', { maximumFractionDigits: 1 });
|
||||
|
||||
const display = (milliseconds) => {
|
||||
if (milliseconds >= 1000) return `${formatter.format(milliseconds / 1000)} s`;
|
||||
return `${Math.round(milliseconds)} ms`;
|
||||
};
|
||||
|
||||
const render = () => {
|
||||
const modelMs = Number(slider.value);
|
||||
modelValue.textContent = display(modelMs);
|
||||
currentValue.textContent = display(modelMs + protocolFloor);
|
||||
overlapValue.textContent = display(modelMs + overlapFloor);
|
||||
slider.setAttribute('aria-valuetext', display(modelMs));
|
||||
};
|
||||
|
||||
slider.addEventListener('input', render);
|
||||
render();
|
||||
}
|
||||
|
||||
@@ -0,0 +1,648 @@
|
||||
.live-performance-page {
|
||||
background: var(--ks-lacquer);
|
||||
color: var(--ks-text);
|
||||
}
|
||||
|
||||
.live-performance-main {
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.live-lab-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: var(--spacing-md);
|
||||
align-items: center;
|
||||
min-height: 68px;
|
||||
padding: 12px max(24px, calc((100vw - 1320px) / 2));
|
||||
border-bottom: 1px solid var(--ks-rule);
|
||||
background: var(--ks-lacquer-deep);
|
||||
}
|
||||
|
||||
.live-lab-brand {
|
||||
color: var(--ks-kinpaku);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.live-lab-brand .ks-mark {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.live-lab-brand .ks-mark svg {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.live-lab-brand .ks-wordmark {
|
||||
font-size: var(--ks-type-wordmark-size);
|
||||
letter-spacing: var(--ks-type-wordmark-track);
|
||||
}
|
||||
|
||||
.live-lab-header > div {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.live-lab-header strong {
|
||||
color: var(--ks-champagne);
|
||||
font-size: var(--ks-type-body-size);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.live-lab-header > div span {
|
||||
color: var(--ks-text-faint);
|
||||
font-family: var(--ks-mono);
|
||||
font-size: var(--ks-type-eyebrow-size);
|
||||
letter-spacing: var(--ks-type-eyebrow-track);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.live-performance {
|
||||
padding-bottom: clamp(80px, 10vw, 144px);
|
||||
}
|
||||
|
||||
.live-performance-hero {
|
||||
position: relative;
|
||||
padding-top: clamp(96px, 13vw, 176px);
|
||||
padding-bottom: clamp(72px, 10vw, 136px);
|
||||
}
|
||||
|
||||
.live-performance-hero::after {
|
||||
position: absolute;
|
||||
right: max(24px, calc((100vw - 1320px) / 2));
|
||||
bottom: 0;
|
||||
left: max(24px, calc((100vw - 1320px) / 2));
|
||||
height: 1px;
|
||||
background: var(--ks-rule);
|
||||
content: '';
|
||||
}
|
||||
|
||||
.live-performance-kicker,
|
||||
.live-performance-label {
|
||||
margin: 0;
|
||||
color: var(--ks-patina);
|
||||
font-family: var(--ks-mono);
|
||||
font-size: var(--ks-type-eyebrow-size);
|
||||
font-weight: 500;
|
||||
letter-spacing: var(--ks-type-eyebrow-track);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.live-performance-hero h1 {
|
||||
max-width: 1050px;
|
||||
margin: 24px 0 0;
|
||||
color: var(--ks-champagne);
|
||||
font-family: var(--ks-font-display);
|
||||
font-size: var(--ks-type-display-size);
|
||||
font-weight: 100;
|
||||
letter-spacing: -0.01em;
|
||||
line-height: 0.88;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.live-performance-hero h1 span {
|
||||
color: var(--ks-kinpaku);
|
||||
}
|
||||
|
||||
.live-performance-lede {
|
||||
max-width: 64ch;
|
||||
margin: 38px 0 0;
|
||||
color: var(--ks-text-muted);
|
||||
font-size: clamp(1.05rem, 1.6vw, 1.35rem);
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.live-performance-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px 24px;
|
||||
margin-top: 42px;
|
||||
color: var(--ks-text-faint);
|
||||
font-family: var(--ks-mono);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.live-performance-meta span:not(:last-child)::after {
|
||||
margin-left: 24px;
|
||||
color: var(--ks-kinpaku-deep);
|
||||
content: '—';
|
||||
}
|
||||
|
||||
.live-performance-section {
|
||||
padding-top: clamp(72px, 9vw, 120px);
|
||||
padding-bottom: clamp(72px, 9vw, 120px);
|
||||
border-bottom: 1px solid var(--ks-rule);
|
||||
}
|
||||
|
||||
.live-performance-section-head {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(240px, 440px);
|
||||
gap: clamp(32px, 8vw, 120px);
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.live-performance-section-head h2,
|
||||
.live-performance-method h2 {
|
||||
max-width: 760px;
|
||||
margin: 12px 0 0;
|
||||
color: var(--ks-champagne);
|
||||
font-family: var(--ks-font-display);
|
||||
font-size: var(--ks-type-headline-size);
|
||||
font-weight: var(--ks-type-headline-weight);
|
||||
line-height: var(--ks-type-headline-line);
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.live-performance-section-head > p {
|
||||
margin: 0;
|
||||
color: var(--ks-text-muted);
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.latency-tape {
|
||||
margin-top: clamp(48px, 7vw, 88px);
|
||||
border-bottom: 1px solid var(--ks-rule);
|
||||
}
|
||||
|
||||
.latency-tape svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.latency-axis,
|
||||
.latency-ticks line {
|
||||
stroke: var(--ks-rule);
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.latency-segment.is-capture { fill: var(--ks-kinpaku); }
|
||||
.latency-segment.is-pickup { fill: var(--ks-vermilion); }
|
||||
.latency-segment.is-scaffold { fill: var(--ks-patina); }
|
||||
.latency-segment.is-render { fill: var(--ks-graphite-2); }
|
||||
|
||||
.latency-major-label,
|
||||
.latency-remainder-label,
|
||||
.latency-axis-label {
|
||||
fill: var(--ks-text-muted);
|
||||
font-family: var(--ks-mono);
|
||||
font-size: var(--ks-type-mono-size);
|
||||
}
|
||||
|
||||
.latency-major-value {
|
||||
fill: var(--ks-lacquer-deep);
|
||||
font-family: var(--ks-font);
|
||||
font-size: var(--ks-type-title-size);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.latency-bracket {
|
||||
fill: none;
|
||||
stroke: var(--ks-patina);
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.latency-stage-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.latency-stage-list li {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
gap: 6px 12px;
|
||||
min-width: 0;
|
||||
padding: 20px 18px 22px 0;
|
||||
border-right: 1px solid var(--ks-rule);
|
||||
}
|
||||
|
||||
.latency-stage-list li:not(:first-child) { padding-left: 18px; }
|
||||
.latency-stage-list li:last-child { border-right: 0; }
|
||||
|
||||
.latency-stage-list li > span {
|
||||
grid-row: 1 / span 2;
|
||||
color: var(--ks-code-cmd);
|
||||
font-family: var(--ks-mono);
|
||||
font-size: var(--ks-type-eyebrow-size);
|
||||
}
|
||||
|
||||
.latency-stage-list strong {
|
||||
color: var(--ks-champagne);
|
||||
font-size: var(--ks-type-body-size);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.latency-stage-list em {
|
||||
color: var(--ks-text-muted);
|
||||
font-family: var(--ks-mono);
|
||||
font-size: var(--ks-type-mono-size);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.live-performance-finding {
|
||||
display: grid;
|
||||
grid-template-columns: 140px minmax(0, 1fr);
|
||||
gap: 24px;
|
||||
margin-top: 48px;
|
||||
padding: 22px 0;
|
||||
border-top: 1px solid var(--ks-kinpaku-deep);
|
||||
border-bottom: 1px solid var(--ks-kinpaku-deep);
|
||||
}
|
||||
|
||||
.live-performance-finding strong {
|
||||
color: var(--ks-code-cmd);
|
||||
font-family: var(--ks-mono);
|
||||
font-size: var(--ks-type-mono-size);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.live-performance-finding p {
|
||||
max-width: 74ch;
|
||||
margin: 0;
|
||||
color: var(--ks-text);
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.live-performance-finding.is-probe {
|
||||
border-color: var(--ks-patina-deep);
|
||||
}
|
||||
|
||||
.live-performance-finding.is-probe strong { color: var(--ks-patina); }
|
||||
|
||||
.scenario-comparison {
|
||||
display: grid;
|
||||
gap: 24px;
|
||||
margin-top: clamp(48px, 7vw, 80px);
|
||||
}
|
||||
|
||||
.scenario-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(160px, 220px) minmax(0, 1fr) 86px;
|
||||
gap: 24px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.scenario-label {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.scenario-label strong {
|
||||
color: var(--ks-champagne);
|
||||
font-size: var(--ks-type-body-size);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.scenario-label span,
|
||||
.live-performance-caption {
|
||||
color: var(--ks-text-faint);
|
||||
font-size: var(--ks-type-mono-size);
|
||||
}
|
||||
|
||||
.scenario-track {
|
||||
height: 18px;
|
||||
background: var(--ks-graphite);
|
||||
}
|
||||
|
||||
.scenario-track span {
|
||||
display: block;
|
||||
width: var(--scenario-width);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.scenario-track .is-plain { background: var(--ks-kinpaku); }
|
||||
.scenario-track .is-annotated { background: var(--ks-patina); }
|
||||
|
||||
.scenario-row output {
|
||||
color: var(--ks-champagne);
|
||||
font-family: var(--ks-mono);
|
||||
font-size: var(--ks-type-mono-size);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.live-performance-caption {
|
||||
margin: 24px 0 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.live-simulator {
|
||||
margin-top: clamp(48px, 7vw, 80px);
|
||||
padding: clamp(24px, 4vw, 48px);
|
||||
background: var(--ks-lacquer-deep);
|
||||
border: 1px solid var(--ks-rule);
|
||||
}
|
||||
|
||||
.live-simulator > label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
color: var(--ks-champagne);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.live-simulator > label output {
|
||||
color: var(--ks-kinpaku);
|
||||
font-family: var(--ks-mono);
|
||||
}
|
||||
|
||||
.live-simulator input[type='range'] {
|
||||
width: 100%;
|
||||
margin: 30px 0 0;
|
||||
accent-color: var(--ks-kinpaku);
|
||||
}
|
||||
|
||||
.simulator-results {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
margin-top: 34px;
|
||||
border-top: 1px solid var(--ks-rule);
|
||||
}
|
||||
|
||||
.simulator-results > div {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
padding: 28px 28px 0 0;
|
||||
}
|
||||
|
||||
.simulator-results > div + div {
|
||||
padding-left: 28px;
|
||||
border-left: 1px solid var(--ks-rule);
|
||||
}
|
||||
|
||||
.simulator-results span {
|
||||
color: var(--ks-text-muted);
|
||||
font-size: var(--ks-type-body-size);
|
||||
}
|
||||
|
||||
.simulator-results strong {
|
||||
color: var(--ks-champagne);
|
||||
font-family: var(--ks-font-display);
|
||||
font-size: var(--ks-type-display-size);
|
||||
font-weight: 300;
|
||||
line-height: 0.9;
|
||||
}
|
||||
|
||||
.simulator-results small {
|
||||
color: var(--ks-text-faint);
|
||||
font-size: var(--ks-type-mono-size);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.harness-table-wrap {
|
||||
margin-top: clamp(48px, 7vw, 80px);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.harness-table {
|
||||
width: 100%;
|
||||
min-width: 840px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.harness-table th {
|
||||
padding: 0 18px 14px 0;
|
||||
border-bottom: 1px solid var(--ks-kinpaku-deep);
|
||||
color: var(--ks-text-faint);
|
||||
font-family: var(--ks-mono);
|
||||
font-size: var(--ks-type-eyebrow-size);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.12em;
|
||||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.harness-table td {
|
||||
padding: 22px 18px 22px 0;
|
||||
border-bottom: 1px solid var(--ks-rule);
|
||||
color: var(--ks-text-muted);
|
||||
font-size: var(--ks-type-body-size);
|
||||
line-height: 1.55;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.harness-table td:first-child {
|
||||
width: 23%;
|
||||
}
|
||||
|
||||
.harness-table td:nth-child(2) {
|
||||
width: 20%;
|
||||
color: var(--ks-text);
|
||||
}
|
||||
|
||||
.harness-table td:last-child {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.harness-table td strong,
|
||||
.harness-table td span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.harness-table td strong {
|
||||
color: var(--ks-champagne);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.harness-table td:first-child span {
|
||||
margin-top: 5px;
|
||||
color: var(--ks-text-faint);
|
||||
font-size: var(--ks-type-mono-size);
|
||||
}
|
||||
|
||||
.harness-table a {
|
||||
color: var(--ks-patina);
|
||||
}
|
||||
|
||||
.harness-table .ks-tag {
|
||||
display: inline-flex;
|
||||
width: fit-content;
|
||||
color: var(--ks-text);
|
||||
}
|
||||
|
||||
.experiment-list {
|
||||
margin: clamp(48px, 7vw, 80px) 0 0;
|
||||
padding: 0;
|
||||
border-top: 1px solid var(--ks-kinpaku-deep);
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.experiment-list > li {
|
||||
display: grid;
|
||||
grid-template-columns: 72px minmax(0, 1fr);
|
||||
border-bottom: 1px solid var(--ks-rule);
|
||||
}
|
||||
|
||||
.experiment-rank {
|
||||
padding-top: 27px;
|
||||
color: var(--ks-code-cmd);
|
||||
font-family: var(--ks-mono);
|
||||
font-size: var(--ks-type-mono-size);
|
||||
}
|
||||
|
||||
.experiment-body {
|
||||
padding: 24px 0 28px;
|
||||
}
|
||||
|
||||
.experiment-body header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.experiment-body h3 {
|
||||
margin: 0;
|
||||
color: var(--ks-champagne);
|
||||
font-size: var(--ks-type-title-size);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.experiment-body header span {
|
||||
color: var(--ks-patina);
|
||||
font-family: var(--ks-mono);
|
||||
font-size: var(--ks-type-eyebrow-size);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.experiment-body > p {
|
||||
max-width: 80ch;
|
||||
margin: 12px 0 0;
|
||||
color: var(--ks-text);
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.experiment-body dl {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 24px;
|
||||
margin: 20px 0 0;
|
||||
}
|
||||
|
||||
.experiment-body dl div {
|
||||
display: grid;
|
||||
grid-template-columns: 72px minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.experiment-body dt {
|
||||
color: var(--ks-text-faint);
|
||||
font-family: var(--ks-mono);
|
||||
font-size: var(--ks-type-eyebrow-size);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.experiment-body dd {
|
||||
margin: 0;
|
||||
color: var(--ks-text-muted);
|
||||
font-size: var(--ks-type-body-size);
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.live-performance-method {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
|
||||
gap: clamp(32px, 8vw, 120px);
|
||||
padding-top: clamp(72px, 9vw, 120px);
|
||||
}
|
||||
|
||||
.live-performance-method h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.live-performance-method p {
|
||||
max-width: 72ch;
|
||||
margin: 0;
|
||||
color: var(--ks-text-muted);
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.live-performance-section-head,
|
||||
.live-performance-method {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.latency-stage-list {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.latency-stage-list li:nth-child(2) { border-right: 0; }
|
||||
.latency-stage-list li:nth-child(n + 3) { border-top: 1px solid var(--ks-rule); }
|
||||
.latency-stage-list li:nth-child(3) { padding-left: 0; }
|
||||
|
||||
.scenario-row {
|
||||
grid-template-columns: minmax(130px, 180px) minmax(0, 1fr) 76px;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.experiment-body dl {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.live-performance-hero h1 {
|
||||
font-size: var(--ks-type-display-size);
|
||||
}
|
||||
|
||||
.live-performance-meta span:not(:last-child)::after { display: none; }
|
||||
|
||||
.latency-tape {
|
||||
margin-right: -12px;
|
||||
margin-left: -12px;
|
||||
}
|
||||
|
||||
.latency-stage-list {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.latency-stage-list li,
|
||||
.latency-stage-list li:not(:first-child),
|
||||
.latency-stage-list li:nth-child(3) {
|
||||
padding: 16px 0;
|
||||
border-top: 1px solid var(--ks-rule);
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.scenario-row {
|
||||
grid-template-columns: minmax(0, 1fr) 70px;
|
||||
}
|
||||
|
||||
.scenario-label { grid-column: 1 / -1; }
|
||||
|
||||
.simulator-results {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.simulator-results > div + div {
|
||||
margin-top: 24px;
|
||||
padding: 24px 0 0;
|
||||
border-top: 1px solid var(--ks-rule);
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.experiment-list > li {
|
||||
grid-template-columns: 46px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.experiment-body header {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.live-performance-page * {
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user