mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-21 10:36:27 +03:00
Refresh the Impeccable product experience
Rework the landing page proof, steering demo, feature grid, slop catalog, detector coverage, theming, Live workflow, and responsive behavior.\n\nAI-assisted implementation by OpenAI Codex.
This commit is contained in:
Paul Bakaus
@@ -38,8 +38,8 @@ const { activeNav } = Astro.props;
|
||||
type="button"
|
||||
class="theme-toggle"
|
||||
data-theme-toggle
|
||||
aria-label="Theme: auto, matching your system. Click to switch to light mode."
|
||||
title="Theme: auto (matches system)"
|
||||
aria-label="Theme: dark. Click to switch to light mode."
|
||||
title="Theme: dark"
|
||||
>
|
||||
<svg class="theme-toggle-icon--auto" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true">
|
||||
<circle cx="12" cy="12" r="9"/>
|
||||
|
||||
@@ -1,47 +1,12 @@
|
||||
---
|
||||
const proofs = [
|
||||
{
|
||||
id: 'polish',
|
||||
command: '/polish',
|
||||
label: 'Remove the tells',
|
||||
summary: 'Three AI defaults removed',
|
||||
callouts: [
|
||||
{ label: 'Pulsing status', y: '25%' },
|
||||
{ label: 'Italic serif', y: '48%' },
|
||||
{ label: 'Claude beige', y: '76%' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'distill',
|
||||
command: '/distill',
|
||||
label: 'Find the hierarchy',
|
||||
summary: 'Seven containers flattened',
|
||||
callouts: [
|
||||
{ label: 'Cards in cards', y: '28%' },
|
||||
{ label: 'Everything equal', y: '52%' },
|
||||
{ label: 'Status-chip soup', y: '77%' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'clarify',
|
||||
command: '/clarify',
|
||||
label: 'Make the task obvious',
|
||||
summary: 'One clear decision remains',
|
||||
callouts: [
|
||||
{ label: 'Vague headline', y: '28%' },
|
||||
{ label: 'Every field at once', y: '54%' },
|
||||
{ label: 'Generic CTA', y: '78%' },
|
||||
],
|
||||
},
|
||||
{ id: 'polish', command: '/polish', label: 'Remove the tells' },
|
||||
{ id: 'distill', command: '/distill', label: 'Find the hierarchy' },
|
||||
{ id: 'clarify', command: '/clarify', label: 'Make the task obvious' },
|
||||
];
|
||||
---
|
||||
|
||||
<section class="hero-proof" data-hero-proof aria-label="Impeccable command before and after examples">
|
||||
<div class="hero-proof-topline">
|
||||
<span class="hero-proof-result" data-hero-proof-result aria-live="polite">{proofs[0].summary}</span>
|
||||
<span class="hero-proof-instruction">Drag to compare</span>
|
||||
</div>
|
||||
|
||||
<div class="hero-proof-stage">
|
||||
{proofs.map((proof, index) => (
|
||||
<div
|
||||
@@ -50,62 +15,82 @@ const proofs = [
|
||||
role="tabpanel"
|
||||
aria-labelledby={`hero-proof-tab-${proof.id}`}
|
||||
data-proof-panel={proof.id}
|
||||
data-summary={proof.summary}
|
||||
hidden={index !== 0}
|
||||
>
|
||||
<div class="hero-proof-layer hero-proof-layer--before">
|
||||
<span class="hero-proof-state hero-proof-state--before">AI default</span>
|
||||
<span class="hero-proof-side-label hero-proof-side-label--before">Before</span>
|
||||
|
||||
<div class={`hero-proof-canvas hero-proof-canvas--${proof.id}`} aria-hidden="true">
|
||||
{proof.id === 'polish' && (
|
||||
<article class="proof-polish proof-polish--before">
|
||||
<header class="proof-polish-head">
|
||||
<span class="proof-polish-pulse"><i></i> AI-powered</span>
|
||||
<span class="proof-polish-menu">•••</span>
|
||||
<span class="proof-polish-sprint">Launch / 14</span>
|
||||
<span class="proof-polish-pulse">
|
||||
<i></i> On track
|
||||
</span>
|
||||
</header>
|
||||
<div class="proof-polish-body">
|
||||
<span class="proof-polish-kicker">Built for modern teams</span>
|
||||
<h3>Beautifully <em>crafted</em> for the future of work.</h3>
|
||||
<p>Manage projects, share updates, and keep everyone aligned in one place.</p>
|
||||
<span class="proof-polish-cta">Get started</span>
|
||||
<span class="proof-polish-kicker">
|
||||
Release planning
|
||||
<span class="proof-annotation">AI kicker</span>
|
||||
</span>
|
||||
<div class="proof-polish-heading">
|
||||
<h3>Ship the <em>launch plan</em> by Friday.</h3>
|
||||
<span class="proof-annotation">Italic serif</span>
|
||||
</div>
|
||||
<p>Owners, dependencies, and decisions in one view.</p>
|
||||
<div class="proof-polish-progress"><i></i></div>
|
||||
<footer><span>8 of 11 decisions closed</span><b>Review plan →</b></footer>
|
||||
<span class="proof-annotation proof-annotation--surface">AI beige</span>
|
||||
</div>
|
||||
</article>
|
||||
)}
|
||||
|
||||
{proof.id === 'distill' && (
|
||||
<article class="proof-distill proof-distill--before">
|
||||
<header><strong>Analytics overview</strong><span>Live</span></header>
|
||||
<header>
|
||||
<strong>Analytics overview</strong>
|
||||
<span class="proof-distill-live">
|
||||
Live
|
||||
<span class="proof-annotation">Status-chip soup</span>
|
||||
</span>
|
||||
</header>
|
||||
<div class="proof-distill-grid">
|
||||
<div><small>Revenue</small><b>$84.2k</b><i>+12%</i></div>
|
||||
<div><small>Orders</small><b>1,248</b><i>+8%</i></div>
|
||||
<div><small>Visitors</small><b>18.4k</b><i>+21%</i></div>
|
||||
<div><small>Conversion</small><b>3.8%</b><i>+4%</i></div>
|
||||
<span class="proof-annotation">Everything equal</span>
|
||||
</div>
|
||||
<div class="proof-distill-nested">
|
||||
<span>Weekly performance</span><div><i></i><i></i><i></i></div>
|
||||
<span class="proof-annotation">Cards in cards</span>
|
||||
</div>
|
||||
<div class="proof-distill-nested"><span>Weekly performance</span><div><i></i><i></i><i></i></div></div>
|
||||
</article>
|
||||
)}
|
||||
|
||||
{proof.id === 'clarify' && (
|
||||
<article class="proof-clarify proof-clarify--before">
|
||||
<header><span>Get started</span><small>All fields required</small></header>
|
||||
<h3>Unlock your potential today</h3>
|
||||
<div class="proof-clarify-fields"><i></i><i></i><i></i><i></i></div>
|
||||
<span class="proof-clarify-cta">Continue</span>
|
||||
<div class="proof-clarify-heading">
|
||||
<h3>Unlock your potential today</h3>
|
||||
<span class="proof-annotation">Vague headline</span>
|
||||
</div>
|
||||
<div class="proof-clarify-fields">
|
||||
<i>Acme Labs</i><i>Product lead</i><i>Activation</i><i>This quarter</i>
|
||||
<span class="proof-annotation">Too many fields</span>
|
||||
</div>
|
||||
<span class="proof-clarify-cta">
|
||||
Continue
|
||||
<span class="proof-annotation">Generic CTA</span>
|
||||
</span>
|
||||
</article>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div class="hero-proof-callouts" aria-hidden="true">
|
||||
{proof.callouts.map((callout) => (
|
||||
<span class="hero-proof-callout" style={`--callout-y: ${callout.y};`}>
|
||||
{callout.label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-proof-layer hero-proof-layer--after">
|
||||
<span class="hero-proof-state hero-proof-state--after">With Impeccable</span>
|
||||
<span class="hero-proof-side-label hero-proof-side-label--after">After</span>
|
||||
|
||||
<div class={`hero-proof-canvas hero-proof-canvas--${proof.id}`} aria-hidden="true">
|
||||
{proof.id === 'polish' && (
|
||||
@@ -115,7 +100,6 @@ const proofs = [
|
||||
<span class="proof-polish-track">On track</span>
|
||||
</header>
|
||||
<div class="proof-polish-body">
|
||||
<span class="proof-polish-kicker">Release planning</span>
|
||||
<h3>Ship the launch plan by Friday.</h3>
|
||||
<p>Owners, dependencies, and decisions in one view.</p>
|
||||
<div class="proof-polish-progress"><i></i></div>
|
||||
@@ -149,8 +133,8 @@ const proofs = [
|
||||
<input
|
||||
class="hero-proof-range"
|
||||
type="range"
|
||||
min="18"
|
||||
max="82"
|
||||
min="0"
|
||||
max="100"
|
||||
value="54"
|
||||
aria-label={`Reveal the improved ${proof.command} example`}
|
||||
data-proof-range
|
||||
@@ -167,12 +151,12 @@ const proofs = [
|
||||
class:list={['hero-proof-tab', { 'is-active': index === 0 }]}
|
||||
id={`hero-proof-tab-${proof.id}`}
|
||||
aria-controls={`hero-proof-panel-${proof.id}`}
|
||||
aria-label={`${proof.command} ${proof.label}`}
|
||||
aria-selected={index === 0 ? 'true' : 'false'}
|
||||
tabindex={index === 0 ? 0 : -1}
|
||||
data-proof-tab={proof.id}
|
||||
>
|
||||
<span class="hero-proof-command">{proof.command}</span>
|
||||
<span class="hero-proof-tab-label">{proof.label}</span>
|
||||
{proof.command}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -1,136 +0,0 @@
|
||||
---
|
||||
import '../styles/live-ui-gallery.css';
|
||||
import { LIVE_COMMANDS } from '../../skill/scripts/live/vocabulary.mjs';
|
||||
|
||||
const STATE_GROUPS = [
|
||||
{
|
||||
label: 'Global chrome',
|
||||
states: [
|
||||
['global-ready', 'Ready'],
|
||||
['global-disconnected', 'Agent disconnected'],
|
||||
['global-foreground', 'Codex CLI fallback'],
|
||||
['global-tools', 'Detect + DESIGN.md'],
|
||||
['steer-expanded', 'Steer composing'],
|
||||
['steer-processing', 'Steer processing'],
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Selection',
|
||||
states: [
|
||||
['configure-replace', 'Configure selection'],
|
||||
['action-picker', 'Action picker'],
|
||||
['configure-listening', 'Voice input'],
|
||||
['configure-locked', 'Apply locked'],
|
||||
['annotation', 'Annotations'],
|
||||
['insert-placeholder', 'Insert placeholder'],
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Generation + review',
|
||||
states: [
|
||||
['generating', 'Generating'],
|
||||
['generation-recovery', 'Recovery'],
|
||||
['cycling-progressive', 'Variant 1 arrived'],
|
||||
['cycling-second', 'Variant 2 arrived'],
|
||||
['tune-open', 'Tune panel'],
|
||||
['applying', 'Applying variant'],
|
||||
['confirmed', 'Variant applied'],
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Copy + support',
|
||||
states: [
|
||||
['edit-copy', 'Edit copy'],
|
||||
['copy-pending', 'Copy edits pending'],
|
||||
['copy-applying', 'Copy edits applying'],
|
||||
['copy-attention', 'Apply needs attention'],
|
||||
['design-panel', 'DESIGN.md panel'],
|
||||
['toast-error', 'Error toast'],
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const statePayload = STATE_GROUPS.flatMap((group) =>
|
||||
group.states.map(([key, label]) => ({ key, label, group: group.label })),
|
||||
);
|
||||
const commandPayload = JSON.stringify(LIVE_COMMANDS).replace(/</g, '\\u003c');
|
||||
const statesJson = JSON.stringify(statePayload).replace(/</g, '\\u003c');
|
||||
---
|
||||
|
||||
<!--
|
||||
Dev-only, embeddable state harness for Impeccable Live. The chrome mirrors:
|
||||
- skill/scripts/live-browser.js (standalone browser UI and exact wording)
|
||||
- skill/scripts/live/ui-core.mjs (surface/state inventory)
|
||||
- skill/scripts/live/vocabulary.mjs (canonical command labels and SVGs)
|
||||
|
||||
Production Live deliberately uses the same dark Neo Kinpaku chrome on light
|
||||
and dark host pages (barPaletteForTheme, live-browser.js). The two columns
|
||||
below therefore vary the host canvas, not the chrome palette.
|
||||
-->
|
||||
<section class="live-ui-gallery" data-live-ui-gallery data-dev-only="true" aria-label="Live UI state inspector">
|
||||
<header class="live-ui-gallery__header" data-live-ui-gallery-controls>
|
||||
<div class="live-ui-gallery__state-readout" aria-live="polite" aria-atomic="true">
|
||||
<span data-gallery-state-group>Global chrome</span>
|
||||
<strong data-gallery-state-label>Ready</strong>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="live-ui-gallery__control-panel"
|
||||
aria-label="Gallery controls"
|
||||
aria-keyshortcuts="ArrowLeft ArrowRight Home End"
|
||||
>
|
||||
<label class="live-ui-gallery__sr-only" for="live-ui-gallery-state">State</label>
|
||||
<div class="live-ui-gallery__select-row">
|
||||
<button type="button" class="live-ui-gallery__step" data-gallery-step="-1" aria-label="Previous state">←</button>
|
||||
<select id="live-ui-gallery-state" data-gallery-state aria-controls="live-ui-gallery-light-stage live-ui-gallery-dark-stage">
|
||||
{STATE_GROUPS.map((group) => (
|
||||
<optgroup label={group.label}>
|
||||
{group.states.map(([key, label]) => <option value={key}>{label}</option>)}
|
||||
</optgroup>
|
||||
))}
|
||||
</select>
|
||||
<button type="button" class="live-ui-gallery__step" data-gallery-step="1" aria-label="Next state">→</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="live-ui-gallery__quick-nav" aria-label="Quick state selection">
|
||||
{STATE_GROUPS.map((group) => (
|
||||
<div class="live-ui-gallery__quick-group">
|
||||
<span>{group.label}</span>
|
||||
<div>
|
||||
{group.states.map(([key, label]) => (
|
||||
<button type="button" data-gallery-state-button={key}>{label}</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="live-ui-gallery__previews" data-live-ui-gallery-workspace>
|
||||
<section class="live-ui-gallery__preview" aria-labelledby="live-ui-gallery-light-title">
|
||||
<header>
|
||||
<span class="live-ui-gallery__theme-dot" aria-hidden="true"></span>
|
||||
<h3 id="live-ui-gallery-light-title">Light host</h3>
|
||||
<code>host: light</code>
|
||||
</header>
|
||||
<div id="live-ui-gallery-light-stage" class="live-ui-stage is-light" data-live-gallery-preview="light"></div>
|
||||
</section>
|
||||
|
||||
<section class="live-ui-gallery__preview" aria-labelledby="live-ui-gallery-dark-title">
|
||||
<header>
|
||||
<span class="live-ui-gallery__theme-dot" aria-hidden="true"></span>
|
||||
<h3 id="live-ui-gallery-dark-title">Dark host</h3>
|
||||
<code>host: dark</code>
|
||||
</header>
|
||||
<div id="live-ui-gallery-dark-stage" class="live-ui-stage is-dark" data-live-gallery-preview="dark"></div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script is:inline type="application/json" data-live-gallery-states set:html={statesJson}></script>
|
||||
<script is:inline type="application/json" data-live-gallery-vocabulary set:html={commandPayload}></script>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
import '../scripts/live-ui-gallery.js';
|
||||
</script>
|
||||
@@ -1,16 +1,24 @@
|
||||
<section class="slop-teaser-section slop-pattern-section" id="slop" aria-labelledby="slop-pattern-title">
|
||||
<section
|
||||
class="slop-teaser-section slop-pattern-section"
|
||||
id="slop"
|
||||
aria-labelledby="slop-pattern-title"
|
||||
data-slop-scan
|
||||
data-detector="on"
|
||||
>
|
||||
<header class="slop-pattern-head">
|
||||
<div>
|
||||
<h2 id="slop-pattern-title" class="slop-teaser-title">AI has a house style. Impeccable knows the tells.</h2>
|
||||
<h2 id="slop-pattern-title" class="slop-teaser-title">Detects and removes AI slop.</h2>
|
||||
<p class="slop-teaser-body">
|
||||
The defaults move. The pattern is the same: the model reaches for whatever currently signals
|
||||
“taste” without asking whether it belongs. Impeccable catches those reflexes before they become your design.
|
||||
59 checks catch the defaults agents keep reaching for before they become your design.
|
||||
</p>
|
||||
</div>
|
||||
<div class="slop-pattern-actions">
|
||||
<span class="slop-pattern-count"><strong>59</strong> detector checks</span>
|
||||
<button class="slop-scan-control" type="button" aria-pressed="true" data-slop-scan-button>
|
||||
<span class="slop-scan-control-dot" aria-hidden="true"></span>
|
||||
<span data-slop-scan-label>Detector on</span>
|
||||
</button>
|
||||
<a class="ks-button ks-button-secondary" href="/slop">
|
||||
Open the full gallery
|
||||
Explore all 59
|
||||
<span class="ks-button-arrow" aria-hidden="true">
|
||||
<svg viewBox="0 0 16 8" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
|
||||
<path d="M0 4h14M10 0l4 4-4 4"/>
|
||||
@@ -20,80 +28,150 @@
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="slop-pattern-board">
|
||||
<article class="slop-pattern-item slop-pattern-item--wide">
|
||||
<div class="slop-pattern-specimen slop-pattern-specimen--serif" aria-hidden="true">
|
||||
<span class="slop-pattern-kicker">A quieter way to work</span>
|
||||
<span class="slop-pattern-serif-line">Beautifully <em>crafted</em><br />for modern teams.</span>
|
||||
</div>
|
||||
<div class="slop-pattern-meta">
|
||||
<span class="slop-pattern-index">Typography · detected</span>
|
||||
<h3>Italic serif hero</h3>
|
||||
<p>Instrument Serif and its neighbors became the shortcut for tasteful AI output.</p>
|
||||
</div>
|
||||
</article>
|
||||
<div class="slop-pattern-board" aria-label="Interactive gallery of detected AI design patterns">
|
||||
<a
|
||||
class="slop-pattern-item slop-pattern-item--serif"
|
||||
href="/slop#rule-italic-serif-display"
|
||||
aria-label="View rule: Italic serif display headline on an AI beige palette"
|
||||
style="--scan-order: 0"
|
||||
>
|
||||
<span class="slop-pattern-specimen slop-pattern-specimen--serif" aria-hidden="true">
|
||||
<span class="slop-target slop-target--serif" data-label="AI beige + serif">
|
||||
Beautifully <em>crafted</em><br />for modern teams.
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<article class="slop-pattern-item">
|
||||
<div class="slop-pattern-specimen slop-pattern-specimen--beige" aria-hidden="true">
|
||||
<span class="slop-beige-wordmark">Claude & Co.</span>
|
||||
<span class="slop-beige-copy">Soft, tasteful, safely indistinct.</span>
|
||||
<span class="slop-beige-button">Begin</span>
|
||||
</div>
|
||||
<div class="slop-pattern-meta">
|
||||
<span class="slop-pattern-index">Color · detected</span>
|
||||
<h3>Claude beige</h3>
|
||||
<p>Warm tinted paper is now the safe AI surface, chosen before the product has a palette.</p>
|
||||
</div>
|
||||
</article>
|
||||
<a
|
||||
class="slop-pattern-item slop-pattern-item--soft-card"
|
||||
href="/slop#rule-generic-drop-shadows"
|
||||
aria-label="View rule: Rounded rectangles with generic drop shadows"
|
||||
style="--scan-order: 1"
|
||||
>
|
||||
<span class="slop-pattern-specimen slop-pattern-specimen--soft-card" aria-hidden="true">
|
||||
<span class="slop-target slop-target--soft-card" data-label="Soft rounded card">
|
||||
<span class="slop-soft-card-icon">✦</span>
|
||||
<strong>Everything in one place</strong>
|
||||
<span class="slop-soft-card-copy">Plan, create, and collaborate with ease.</span>
|
||||
<span class="slop-soft-card-action">Get started <i>→</i></span>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<article class="slop-pattern-item">
|
||||
<div class="slop-pattern-specimen slop-pattern-specimen--sidetab" aria-hidden="true">
|
||||
<div class="slop-side-card">
|
||||
<a
|
||||
class="slop-pattern-item slop-pattern-item--sidetab"
|
||||
href="/slop#rule-side-tab"
|
||||
aria-label="View rule: Side-tab accent border"
|
||||
style="--scan-order: 2"
|
||||
>
|
||||
<span class="slop-pattern-specimen slop-pattern-specimen--sidetab" aria-hidden="true">
|
||||
<span class="slop-target slop-target--sidetab" data-label="Side-tab border">
|
||||
<strong>Performance insight</strong>
|
||||
<span>Your conversion rate is up 12% this week.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slop-pattern-meta">
|
||||
<span class="slop-pattern-index">Visual detail · detected</span>
|
||||
<h3>Side-tab border</h3>
|
||||
<p>A thick colored stripe on a rounded card remains one of the clearest generated-UI tells.</p>
|
||||
</div>
|
||||
</article>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<article class="slop-pattern-item">
|
||||
<div class="slop-pattern-specimen slop-pattern-specimen--pulse" aria-hidden="true">
|
||||
<div class="slop-pulse-status">
|
||||
<span class="slop-pulse-dot"></span>
|
||||
<span>AI is thinking</span>
|
||||
</div>
|
||||
<div class="slop-pulse-lines"><i></i><i></i><i></i></div>
|
||||
</div>
|
||||
<div class="slop-pattern-meta">
|
||||
<span class="slop-pattern-index">Motion · detected</span>
|
||||
<h3>Pulsing status dot</h3>
|
||||
<p>Decorative pulse implies live state even when nothing is changing.</p>
|
||||
</div>
|
||||
</article>
|
||||
<a
|
||||
class="slop-pattern-item slop-pattern-item--eyebrow"
|
||||
href="/slop#rule-hero-eyebrow-chip"
|
||||
aria-label="View rule: Hero eyebrow pill chip"
|
||||
style="--scan-order: 3"
|
||||
>
|
||||
<span class="slop-pattern-specimen slop-pattern-specimen--eyebrow" aria-hidden="true">
|
||||
<span class="slop-target slop-target--eyebrow" data-label="Eyebrow chip">
|
||||
<span class="slop-eyebrow-chip">Introducing</span>
|
||||
<strong>The operating system<br />for modern teams.</strong>
|
||||
<span>Everything you need to move faster.</span>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<article class="slop-pattern-item slop-pattern-item--wide">
|
||||
<div class="slop-pattern-specimen slop-pattern-specimen--nested" aria-hidden="true">
|
||||
<div class="slop-nested-shell">
|
||||
<a
|
||||
class="slop-pattern-item slop-pattern-item--pulse"
|
||||
href="/slop#section-motion"
|
||||
aria-label="View rule: Decorative pulsing status dot"
|
||||
style="--scan-order: 4"
|
||||
>
|
||||
<span class="slop-pattern-specimen slop-pattern-specimen--pulse" aria-hidden="true">
|
||||
<span class="slop-target slop-target--pulse" data-label="Pulsing status dot">
|
||||
<span class="slop-pulse-status"><i class="slop-pulse-dot"></i> AI is thinking</span>
|
||||
<span class="slop-pulse-lines"><i></i><i></i><i></i></span>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a
|
||||
class="slop-pattern-item slop-pattern-item--nested"
|
||||
href="/slop#rule-nested-cards"
|
||||
aria-label="View rule: Nested cards"
|
||||
style="--scan-order: 5"
|
||||
>
|
||||
<span class="slop-pattern-specimen slop-pattern-specimen--nested" aria-hidden="true">
|
||||
<span class="slop-target slop-target--nested" data-label="Cards in cards">
|
||||
<span>Workspace</span>
|
||||
<div class="slop-nested-card">
|
||||
<span class="slop-nested-card">
|
||||
<span>Overview</span>
|
||||
<div class="slop-nested-card slop-nested-card--inner">Card inside card inside card.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slop-pattern-meta">
|
||||
<span class="slop-pattern-index">Layout · detected</span>
|
||||
<h3>Nested cards</h3>
|
||||
<p>Containers become the hierarchy because the model never made one with type, space, or rhythm.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<span class="slop-nested-card slop-nested-card--inner">Card inside card inside card.</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<footer class="slop-pattern-foot">
|
||||
<p><code>npx impeccable detect src/</code> catches deterministic tells. <a href="/docs/critique">/critique</a> adds the design review.</p>
|
||||
</footer>
|
||||
<a
|
||||
class="slop-pattern-item slop-pattern-item--icons"
|
||||
href="/slop#rule-icon-tile-stack"
|
||||
aria-label="View rule: Icon tile stacked above heading"
|
||||
style="--scan-order: 6"
|
||||
>
|
||||
<span class="slop-pattern-specimen slop-pattern-specimen--icons" aria-hidden="true">
|
||||
<span class="slop-target slop-target--icons" data-label="Identical icon tiles">
|
||||
<span><i>✦</i><b>Automate</b><small>Move faster.</small></span>
|
||||
<span><i>⌁</i><b>Integrate</b><small>Work smarter.</small></span>
|
||||
<span><i>↗</i><b>Scale</b><small>Grow together.</small></span>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a
|
||||
class="slop-pattern-item slop-pattern-item--markers"
|
||||
href="/slop#rule-numbered-section-markers"
|
||||
aria-label="View rule: Numbered section markers"
|
||||
style="--scan-order: 7"
|
||||
>
|
||||
<span class="slop-pattern-specimen slop-pattern-specimen--markers" aria-hidden="true">
|
||||
<span class="slop-target slop-target--markers" data-label="Numbered section labels">
|
||||
<span><b>01</b> Discover</span>
|
||||
<span><b>02</b> Design</span>
|
||||
<span><b>03</b> Deliver</span>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
const setupSlopDetectors = () => {
|
||||
document.querySelectorAll<HTMLElement>('[data-slop-scan]').forEach((root) => {
|
||||
if (root.dataset.scanReady === 'true') return;
|
||||
root.dataset.scanReady = 'true';
|
||||
|
||||
const button = root.querySelector<HTMLButtonElement>('[data-slop-scan-button]');
|
||||
const label = root.querySelector<HTMLElement>('[data-slop-scan-label]');
|
||||
if (!button || !label) return;
|
||||
|
||||
const setDetector = (active: boolean) => {
|
||||
root.dataset.detector = active ? 'on' : 'off';
|
||||
button.setAttribute('aria-pressed', String(active));
|
||||
label.textContent = active ? 'Detector on' : 'Detector off';
|
||||
};
|
||||
|
||||
button.addEventListener('click', () => {
|
||||
setDetector(button.getAttribute('aria-pressed') !== 'true');
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
setupSlopDetectors();
|
||||
document.addEventListener('astro:page-load', setupSlopDetectors);
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
---
|
||||
const {
|
||||
rule,
|
||||
visual,
|
||||
layer = 'cli',
|
||||
description = rule.description,
|
||||
categoryLabel = rule.category === 'slop' ? 'AI slop' : 'Quality',
|
||||
category = rule.category,
|
||||
skillHref = rule.skillSection ? `/docs/impeccable#section-${rule.skillSection.toLowerCase().replace(/\s*&\s*/g, '-').replace(/\s+/g, '-')}` : '/detector',
|
||||
linkLabel = rule.skillSection ? 'See in /impeccable' : 'Inspect the detector',
|
||||
} = Astro.props;
|
||||
|
||||
const layerLabel = layer === 'browser' ? 'Browser' : 'CLI';
|
||||
const layerTitle = layer === 'browser'
|
||||
? 'Deterministic, but requires rendered browser layout.'
|
||||
: 'Deterministic. Runs from npx impeccable detect on source files.';
|
||||
---
|
||||
|
||||
<article class="rule-card" id={`rule-${rule.id}`} data-layer={layer}>
|
||||
<div class="rule-card-visual" aria-hidden="true">
|
||||
<div class="rule-card-visual-inner" set:html={visual} />
|
||||
</div>
|
||||
<div class="rule-card-body">
|
||||
<div class="rule-card-head">
|
||||
<span class="rule-card-category" data-category={category}>{categoryLabel}</span>
|
||||
<span class="rule-card-layer" data-layer={layer} title={layerTitle}>{layerLabel}</span>
|
||||
{rule.gated && <span class="rule-card-layer" data-layer="optin" title={`Off by default. Enable with --${rule.gated}.`}>opt-in</span>}
|
||||
</div>
|
||||
<h3 class="rule-card-name">{rule.name}</h3>
|
||||
<p class="rule-card-desc">{description}</p>
|
||||
<a class="rule-card-skill-link" href={skillHref}>{linkLabel}</a>
|
||||
</div>
|
||||
</article>
|
||||
@@ -1,20 +0,0 @@
|
||||
export const liveAnnotatedResult = {
|
||||
generatedAt: '2026-07-13T00:16:44.377Z',
|
||||
fixture: 'vite8-react-brand-fidelity',
|
||||
provider: 'Anthropic',
|
||||
model: 'Claude Haiku 4.5',
|
||||
runs: 1,
|
||||
delivery: 'progressive',
|
||||
evidence: {
|
||||
screenshot: true,
|
||||
comments: 1,
|
||||
strokes: 1,
|
||||
},
|
||||
firstReviewableMs: 1264.75,
|
||||
allVariantsMs: 7422.78,
|
||||
impeccableOverheadMs: 119.94,
|
||||
serverPickupMs: 49.69,
|
||||
firstWriteMs: 7.72,
|
||||
finalWriteMs: 5.95,
|
||||
resetClean: true,
|
||||
} as const;
|
||||
@@ -1,160 +0,0 @@
|
||||
export const liveCodexWorkerResult = {
|
||||
generatedAt: '2026-07-13T20:01:08.415Z',
|
||||
codexVersion: '0.144.0-alpha.4',
|
||||
transport: 'stdio JSONL',
|
||||
model: 'GPT-5.6-Sol',
|
||||
effort: 'medium',
|
||||
profile: 'quality',
|
||||
defaultInCodex: true,
|
||||
prewarmReturnMs: 87.26,
|
||||
coldWorkerReadyMs: 656.82,
|
||||
timings: {
|
||||
coldHandshakeMs: 36.83,
|
||||
coldThreadStartMs: 400.19,
|
||||
turnStartResponseMs: 0.45,
|
||||
wakeToTurnStartedMs: 1.47,
|
||||
trivialTurnCompletedMs: 2060.18,
|
||||
},
|
||||
protocolProbe: 'GPT-5.3-Codex-Spark · low',
|
||||
quality: {
|
||||
tasks: ['bolder', 'polish'],
|
||||
runs: 4,
|
||||
passed: 4,
|
||||
medianGenerationMs: 34339,
|
||||
p95GenerationMs: 42780.1,
|
||||
averageScores: {
|
||||
commandFidelity: 8,
|
||||
brandAndSystemFidelity: 8.5,
|
||||
frontendQuality: 7.5,
|
||||
taskCompletion: 7.75,
|
||||
},
|
||||
sparkControlPassed: 1,
|
||||
sparkControlRuns: 2,
|
||||
sparkMedianGenerationMs: 16470.5,
|
||||
},
|
||||
architectureComparison: {
|
||||
directFirstUsableMs: 64649.73,
|
||||
coldAppServerFirstUsableMs: 35591.71,
|
||||
warmAppServerFirstUsableMs: 34931.08,
|
||||
directQualityPassed: 4,
|
||||
directQualityRuns: 4,
|
||||
warmQualityPassed: 4,
|
||||
warmQualityRuns: 4,
|
||||
annotatedQualityPassed: 3,
|
||||
annotatedQualityRuns: 3,
|
||||
coldInputTokens: 41066,
|
||||
coldOutputTokens: 2148,
|
||||
warmRepeatInputTokens: 46973,
|
||||
warmRepeatCachedInputTokens: 38656,
|
||||
warmRepeatCacheRate: 0.823,
|
||||
},
|
||||
productionBrowser: {
|
||||
runs: 1,
|
||||
selectedTarget: 'article.offer-card',
|
||||
firstVariantMs: 29682.58,
|
||||
firstVariantP95Ms: 29682.58,
|
||||
secondVariantMs: 54597.81,
|
||||
allVariantsMs: 102182.9,
|
||||
allVariantsP95Ms: 102182.9,
|
||||
firstToSecondMs: 24915.23,
|
||||
secondToAllMs: 47585.09,
|
||||
serverPickupMs: 76.82,
|
||||
sourcePreflightMs: 45,
|
||||
validationMs: 9.33,
|
||||
},
|
||||
fullSourceControl: {
|
||||
runs: 1,
|
||||
selectedTarget: 'article.offer-card',
|
||||
firstVariantMs: 28823.47,
|
||||
secondVariantMs: 72698.01,
|
||||
allVariantsMs: 145234.51,
|
||||
firstToSecondMs: 43874.54,
|
||||
},
|
||||
sourceDeltaExperiment: {
|
||||
runs: 5,
|
||||
fullSourceFirstVariantMs: 34177.39,
|
||||
deltaFirstVariantMs: 28074.92,
|
||||
firstVariantImprovement: 0.1786,
|
||||
baselineFirstToSecondMs: 43874.54,
|
||||
deltaFirstToSecondMs: 24624.41,
|
||||
secondVariantImprovement: 0.4388,
|
||||
finalDeltaAllVariantsMs: 102182.9,
|
||||
status: 'Enabled for all Codex source-mode phases',
|
||||
},
|
||||
earlyAcceptVerified: {
|
||||
runs: 1,
|
||||
acceptedVariant: 2,
|
||||
sourceCommitted: true,
|
||||
followupCleanupPassed: true,
|
||||
acceptToResetMs: 238.18,
|
||||
acceptToNextGoDispatchMs: 831.36,
|
||||
acceptToNextFirstVariantMs: 16938.05,
|
||||
controlNextFirstVariantMs: 42969.34,
|
||||
nextFirstImprovement: 0.6058,
|
||||
},
|
||||
standbyExperiment: {
|
||||
controlFirstVariantMs: 33283.06,
|
||||
prewarmedFirstVariantMs: 35049.12,
|
||||
controlNextFirstVariantMs: 42969.34,
|
||||
prewarmedNextFirstVariantMs: 50920.73,
|
||||
status: 'Rejected: slower under app-server contention',
|
||||
},
|
||||
twoCheckpointControl: {
|
||||
runs: 1,
|
||||
selectedTarget: 'article.offer-card',
|
||||
firstVariantMs: 48437.46,
|
||||
secondVariantMs: 139587.21,
|
||||
allVariantsMs: 139587.21,
|
||||
variants: 3,
|
||||
passed: 2,
|
||||
},
|
||||
transportBaseline: {
|
||||
runs: 5,
|
||||
selectedTarget: 'h2.offer-card__title',
|
||||
firstVariantMs: 19283,
|
||||
firstVariantP95Ms: 20412,
|
||||
allVariantsMs: 52795,
|
||||
allVariantsP95Ms: 55115,
|
||||
variants: 9,
|
||||
calibratedPassed: 3,
|
||||
},
|
||||
renderedQuality: {
|
||||
runs: 1,
|
||||
variants: 3,
|
||||
passed: 2,
|
||||
commandFidelity: 6.67,
|
||||
brandFidelity: 7.67,
|
||||
renderQuality: 6.67,
|
||||
taskCompletion: 6.33,
|
||||
variant1Passed: true,
|
||||
variant3Passed: true,
|
||||
},
|
||||
calibratedHeadingQuality: {
|
||||
runs: 3,
|
||||
variants: 9,
|
||||
passed: 3,
|
||||
commandFidelity: 6.11,
|
||||
brandFidelity: 6.44,
|
||||
renderQuality: 5.78,
|
||||
taskCompletion: 5.56,
|
||||
},
|
||||
atomicExperiment: {
|
||||
runs: 1,
|
||||
firstVariantMs: 40225,
|
||||
allVariantsMs: 40227,
|
||||
variants: 3,
|
||||
passed: 1,
|
||||
status: 'Opt-in experiment',
|
||||
},
|
||||
annotatedBrowser: {
|
||||
runs: 2,
|
||||
firstVariantMs: 14316.21,
|
||||
allVariantsMs: 45424.24,
|
||||
comments: 1,
|
||||
strokes: 1,
|
||||
screenshotAttached: true,
|
||||
},
|
||||
result: '4/4 full-task quality gate',
|
||||
passed: true,
|
||||
architecture: 'A dedicated persistent Live app-server connection and worker thread with native Impeccable skill, sub-command, project context, and annotation-image inputs. Every source-mode variant publishes through an independently validated fenced delta; the final delta adds deferred parameter manifests without rewriting prior output. Accept interrupts unfinished variants; cleanup stays on the foreground control lane while the next generation starts independently.',
|
||||
} as const;
|
||||
@@ -1,17 +0,0 @@
|
||||
export const liveControlResult = {
|
||||
generatedAt: '2026-07-12T03:17:04.109Z',
|
||||
fixture: 'vite8-react-plain',
|
||||
runs: 5,
|
||||
acceptToPicking: {
|
||||
medianMs: 1,
|
||||
p95Ms: 2.8,
|
||||
},
|
||||
nextGoToPickup: {
|
||||
medianMs: 48,
|
||||
p95Ms: 50.6,
|
||||
},
|
||||
automation: {
|
||||
acceptToPickingMedianMs: 266,
|
||||
nextGoToPickupMedianMs: 864,
|
||||
},
|
||||
};
|
||||
@@ -1,29 +0,0 @@
|
||||
export const liveFrameworkResults = [
|
||||
{
|
||||
framework: 'Vite + React',
|
||||
runs: 5,
|
||||
acceptMedianMs: 1,
|
||||
acceptP95Ms: 2.8,
|
||||
nextPickupMedianMs: 48,
|
||||
nextPickupP95Ms: 50.6,
|
||||
status: 'Progressive E2E proven',
|
||||
},
|
||||
{
|
||||
framework: 'SvelteKit',
|
||||
runs: 5,
|
||||
acceptMedianMs: 2,
|
||||
acceptP95Ms: 2,
|
||||
nextPickupMedianMs: 315,
|
||||
nextPickupP95Ms: 342,
|
||||
status: 'Progressive E2E proven',
|
||||
},
|
||||
{
|
||||
framework: 'Nuxt 4 + Vue 3',
|
||||
runs: 1,
|
||||
acceptMedianMs: 143,
|
||||
acceptP95Ms: 143,
|
||||
nextPickupMedianMs: 116,
|
||||
nextPickupP95Ms: 116,
|
||||
status: 'Core + progressive E2E proven',
|
||||
},
|
||||
];
|
||||
@@ -1,126 +0,0 @@
|
||||
export const harnessPaths = [
|
||||
{
|
||||
name: 'Dedicated app-server worker',
|
||||
harness: 'Codex · isolated persistent thread',
|
||||
pickup: '1.47 ms turn wake',
|
||||
tradeoff: 'A separate Live-owned Sol thread generates while the control supervisor keeps polling. Full context protects design quality; cold readiness measured 657 ms and happens during Live initialization.',
|
||||
status: 'Codex default · gated',
|
||||
statusTone: 'ready',
|
||||
source: 'https://learn.chatgpt.com/docs/app-server',
|
||||
},
|
||||
{
|
||||
name: 'Foreground terminal supervisor',
|
||||
harness: 'Codex desktop · unified exec session',
|
||||
pickup: 'Concurrent shell work proven',
|
||||
tradeoff: 'A yielded foreground process keeps running while other commands execute, but new output still needs an explicit session read; it does not wake a finished model turn by itself.',
|
||||
status: 'Useful within active turn',
|
||||
statusTone: 'measure',
|
||||
source: 'https://learn.chatgpt.com/docs/app-server#api-overview',
|
||||
},
|
||||
{
|
||||
name: 'Native generation subagent',
|
||||
harness: 'Codex desktop · portable fallback',
|
||||
pickup: 'Main turn must dispatch it',
|
||||
tradeoff: 'Low-effort compact handoff is safe and fenced, but it cannot start after the desktop task has gone idle.',
|
||||
status: 'Current fallback',
|
||||
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: 'Run a dedicated Codex worker — shipped',
|
||||
evidence: 'Matched full tasks reached usable output in 34.9 s warm app-server versus 64.6 s direct, with both paths passing 4/4. Live now returns from prewarm in 87 ms while the worker finishes initializing alongside page startup.',
|
||||
move: 'Keep one Live-owned app-server connection and isolated Sol/medium thread. Attach the skill, sub-command, project context, source neighborhood, and annotation image.',
|
||||
expected: 'Removes main-turn availability from generation without trading away brand fidelity.',
|
||||
confidence: 'Production browser + full-task gate',
|
||||
},
|
||||
{
|
||||
rank: 2,
|
||||
title: 'Accept any arrived variant — shipped',
|
||||
evidence: 'A verified Vite/React + Sol run committed variant 2 to source, returned the page in 238 ms, and dispatched the next Go in 831 ms. The next first variant arrived in 16.9 s versus the 43.0 s control, a 60.6% reduction.',
|
||||
move: 'Durably fence generation on Accept/Discard, rotate the canceled generation thread, prioritize control events, and keep a separate poll supervisor active.',
|
||||
expected: 'Removes the full-set wait and keeps the page interactive while canceled work unwinds.',
|
||||
confidence: 'Production browser',
|
||||
},
|
||||
{
|
||||
rank: 3,
|
||||
title: 'Send every source variant as a fenced delta — shipped',
|
||||
evidence: 'Across five Sol/medium samples, first review was 28.1 s median versus the 34.2 s full-source control. Variant 2 followed 24.6 s later versus 43.9 s, and the guarded all-delta run completed in 102.2 s with 2/3 rendered variants passing and 7.7/10 average brand fidelity.',
|
||||
move: 'Keep the full skill, plan, project context, and source evidence, but return only each new variant’s markup, scoped CSS, and the final deferred parameter manifest. The supervisor validates and merges each delta without exposing prior output to rewrites.',
|
||||
expected: 'Shrinks every model response while preserving full design context and immutable review checkpoints.',
|
||||
confidence: 'Production browser + rendered gate',
|
||||
},
|
||||
{
|
||||
rank: 4,
|
||||
title: 'Dispatch first, capture second — shipped',
|
||||
evidence: 'Plain click-handler → generate fetch is 2.2 ms median; end-to-end model-free latency fell from 916 ms to 414 ms.',
|
||||
move: 'Unannotated picks dispatch before off-path shader capture. Annotated picks still upload their visual evidence before dispatch.',
|
||||
expected: 'Removes screenshot work from the common critical path.',
|
||||
confidence: 'Ten-run browser benchmark',
|
||||
},
|
||||
{
|
||||
rank: 5,
|
||||
title: 'Preflight source locally — shipped',
|
||||
evidence: 'The production worker resolved and wrapped the selected React source in 52 ms before the model turn.',
|
||||
move: 'Attach durable scaffold metadata to the queued event. Every harness reuses it; discovery failures preserve the existing agent-driven fallback.',
|
||||
expected: 'Removes one deterministic source-discovery tool round trip from every successful generation.',
|
||||
confidence: 'Production browser',
|
||||
},
|
||||
{
|
||||
rank: 6,
|
||||
title: 'Generate knobs after pixels — shipped',
|
||||
evidence: 'The first progressive write intentionally carries no parameter manifest; tune controls arrive with the complete variant set.',
|
||||
move: 'Plan parameter axes with the trio, but defer their manifests and CSS branches until the final delivery edit.',
|
||||
expected: 'Keeps parameter output off the first-reviewable critical path without shrinking the final tuning surface.',
|
||||
confidence: 'Protocol shipped',
|
||||
},
|
||||
{
|
||||
rank: 7,
|
||||
title: 'Acknowledge first, clean up off-path — shipped',
|
||||
evidence: 'The production page returned to Pick in 197 ms. Cleanup is durably enqueued before acknowledgement, and replayed Accept events are idempotent after a worker or network failure.',
|
||||
move: 'Persist the Accept receipt, enqueue carbonize cleanup before replying, then let the poll supervisor lease new work while cleanup stays source-locked.',
|
||||
expected: 'Preserves immediate interaction without leaving temporary Live source behind.',
|
||||
confidence: 'Production browser + build control',
|
||||
},
|
||||
{
|
||||
rank: 8,
|
||||
title: 'Reject speculative model warmup — decided',
|
||||
evidence: 'A prewarmed spare thread made first review slower (35.0 s vs 33.3 s) and the post-Accept next result slower (50.9 s vs 43.0 s). The app-server workload contended instead of hiding latency.',
|
||||
move: 'Do not spend model work before a real generation request. Keep cold thread rotation for cancellation safety and optimize the requested output itself.',
|
||||
expected: 'Avoids extra tokens, contention, and initialization work that did not improve the user-visible path.',
|
||||
confidence: 'Matched production A/B',
|
||||
},
|
||||
{
|
||||
rank: 9,
|
||||
title: 'Keep atomic delivery as an opt-in experiment',
|
||||
evidence: 'One production Sol/medium run completed all three variants in 40.2 s versus 56.1 s progressive median, but delayed first review by about 18 s and only 1/3 rendered variants passed.',
|
||||
move: 'Expose atomic in the benchmark and configuration surface, but do not make it the Codex default until repeated rendered runs clear the same quality gate.',
|
||||
expected: 'Preserves a promising full-set path without regressing the default first-review experience.',
|
||||
confidence: 'One production run · needs replication',
|
||||
},
|
||||
];
|
||||
|
||||
export const currentHarnessProbe = {
|
||||
testedAt: '2026-07-13',
|
||||
surface: 'Codex desktop unified exec',
|
||||
delayedOutputMs: 250,
|
||||
processExitMs: null,
|
||||
parallelCommandMs: 0.01,
|
||||
parallelWorkSucceeded: true,
|
||||
backgroundChildSurvivedShellExit: false,
|
||||
requiresExplicitSessionRead: true,
|
||||
surfacedAutomatically: false,
|
||||
result: 'A yielded foreground poller kept producing output while a separate command completed immediately. A traditional shell-backgrounded child did not survive shell exit. Output still required an explicit session read and did not proactively wake a finished turn.',
|
||||
};
|
||||
@@ -1,14 +0,0 @@
|
||||
export const liveInitResult = {
|
||||
generatedAt: '2026-07-11T19:39:09-07:00',
|
||||
fixture: 'vite8-react-plain',
|
||||
runs: 10,
|
||||
baselineColdMedianMs: 327.25,
|
||||
cold: {
|
||||
medianMs: 153.03,
|
||||
p95Ms: 155.74,
|
||||
},
|
||||
warm: {
|
||||
medianMs: 72.8,
|
||||
p95Ms: 75.4,
|
||||
},
|
||||
};
|
||||
@@ -1,794 +0,0 @@
|
||||
{
|
||||
"schemaVersion": 1,
|
||||
"generatedAt": "2026-07-12T00:14:29.714Z",
|
||||
"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
|
||||
},
|
||||
{
|
||||
"schemaVersion": 1,
|
||||
"generatedAt": "2026-07-12T00:14:09.714Z",
|
||||
"benchmark": {
|
||||
"fixture": "vite8-react-plain",
|
||||
"agent": "fake",
|
||||
"provider": "deterministic",
|
||||
"model": null,
|
||||
"scenario": "plain",
|
||||
"variants": 3,
|
||||
"delivery": "atomic"
|
||||
},
|
||||
"setup": {
|
||||
"dependencies": 689.2,
|
||||
"liveServer": 236.71,
|
||||
"injection": 29.09,
|
||||
"devServer": 541.5,
|
||||
"pageLoad": 94.45,
|
||||
"handshake": 263.64
|
||||
},
|
||||
"summary": {
|
||||
"count": 7,
|
||||
"metrics": {
|
||||
"browserPreparationMs": {
|
||||
"median": 311.53,
|
||||
"p95": 825.97,
|
||||
"min": 307.22,
|
||||
"max": 827.73
|
||||
},
|
||||
"browserDispatchMs": {
|
||||
"median": 2.2,
|
||||
"p95": 5.26,
|
||||
"min": 2,
|
||||
"max": 6.4
|
||||
},
|
||||
"automationClickMs": {
|
||||
"median": 309.33,
|
||||
"p95": 820.89,
|
||||
"min": 305.22,
|
||||
"max": 821.33
|
||||
},
|
||||
"serverPickupMs": {
|
||||
"median": 2.23,
|
||||
"p95": 6.44,
|
||||
"min": 0.96,
|
||||
"max": 7.69
|
||||
},
|
||||
"goToAgentMs": {
|
||||
"median": 313.51,
|
||||
"p95": 832.1,
|
||||
"min": 309.45,
|
||||
"max": 835.42
|
||||
},
|
||||
"scaffoldMs": {
|
||||
"median": 54.19,
|
||||
"p95": 54.74,
|
||||
"min": 51.07,
|
||||
"max": 54.85
|
||||
},
|
||||
"generationMs": {
|
||||
"median": 0.03,
|
||||
"p95": 0.16,
|
||||
"min": 0.03,
|
||||
"max": 0.19
|
||||
},
|
||||
"writeMs": {
|
||||
"median": 0.42,
|
||||
"p95": 0.69,
|
||||
"min": 0.38,
|
||||
"max": 0.77
|
||||
},
|
||||
"writeToFirstVariantMs": {
|
||||
"median": 44.39,
|
||||
"p95": 76.33,
|
||||
"min": 41.73,
|
||||
"max": 86.24
|
||||
},
|
||||
"replyMs": {
|
||||
"median": 2.01,
|
||||
"p95": 2.97,
|
||||
"min": 1.95,
|
||||
"max": 3.26
|
||||
},
|
||||
"goToFirstVariantMs": {
|
||||
"median": 414.2,
|
||||
"p95": 960.68,
|
||||
"min": 409.19,
|
||||
"max": 973.99
|
||||
},
|
||||
"goToAllVariantsMs": {
|
||||
"median": 416.61,
|
||||
"p95": 962.65,
|
||||
"min": 410.41,
|
||||
"max": 976.22
|
||||
},
|
||||
"deliveryGapMs": {
|
||||
"median": 1.26,
|
||||
"p95": 2.36,
|
||||
"min": 1.2,
|
||||
"max": 2.41
|
||||
},
|
||||
"impeccableOverheadMs": {
|
||||
"median": 414.17,
|
||||
"p95": 960.53,
|
||||
"min": 409.15,
|
||||
"max": 973.8
|
||||
}
|
||||
}
|
||||
},
|
||||
"runs": [
|
||||
{
|
||||
"iteration": 1,
|
||||
"scenario": "plain",
|
||||
"eventId": "9bbde352",
|
||||
"browserPreparationMs": 827.73,
|
||||
"browserDispatchMs": 6.4,
|
||||
"automationClickMs": 821.33,
|
||||
"serverPickupMs": 7.69,
|
||||
"goToAgentMs": 835.42,
|
||||
"scaffoldMs": 51.07,
|
||||
"generationMs": 0.19,
|
||||
"writeMs": 0.77,
|
||||
"writeToFirstVariantMs": 86.24,
|
||||
"replyMs": 3.26,
|
||||
"goToFirstVariantMs": 973.99,
|
||||
"goToAllVariantsMs": 976.22,
|
||||
"deliveryGapMs": 2.24,
|
||||
"impeccableOverheadMs": 973.8
|
||||
},
|
||||
{
|
||||
"iteration": 2,
|
||||
"scenario": "plain",
|
||||
"eventId": "f21d7bba",
|
||||
"browserPreparationMs": 821.86,
|
||||
"browserDispatchMs": 2,
|
||||
"automationClickMs": 819.86,
|
||||
"serverPickupMs": 0.96,
|
||||
"goToAgentMs": 822.82,
|
||||
"scaffoldMs": 53.02,
|
||||
"generationMs": 0.08,
|
||||
"writeMs": 0.39,
|
||||
"writeToFirstVariantMs": 53.22,
|
||||
"replyMs": 2.15,
|
||||
"goToFirstVariantMs": 929.64,
|
||||
"goToAllVariantsMs": 930.99,
|
||||
"deliveryGapMs": 1.35,
|
||||
"impeccableOverheadMs": 929.56
|
||||
},
|
||||
{
|
||||
"iteration": 3,
|
||||
"scenario": "plain",
|
||||
"eventId": "8641ce90",
|
||||
"browserPreparationMs": 310.72,
|
||||
"browserDispatchMs": 2.6,
|
||||
"automationClickMs": 308.12,
|
||||
"serverPickupMs": 2.37,
|
||||
"goToAgentMs": 313.09,
|
||||
"scaffoldMs": 53.46,
|
||||
"generationMs": 0.03,
|
||||
"writeMs": 0.42,
|
||||
"writeToFirstVariantMs": 43.16,
|
||||
"replyMs": 2.3,
|
||||
"goToFirstVariantMs": 410.21,
|
||||
"goToAllVariantsMs": 411.41,
|
||||
"deliveryGapMs": 1.2,
|
||||
"impeccableOverheadMs": 410.18
|
||||
},
|
||||
{
|
||||
"iteration": 4,
|
||||
"scenario": "plain",
|
||||
"eventId": "bde64b84",
|
||||
"browserPreparationMs": 311.14,
|
||||
"browserDispatchMs": 2.3,
|
||||
"automationClickMs": 308.84,
|
||||
"serverPickupMs": 1.75,
|
||||
"goToAgentMs": 312.88,
|
||||
"scaffoldMs": 54.47,
|
||||
"generationMs": 0.03,
|
||||
"writeMs": 0.49,
|
||||
"writeToFirstVariantMs": 43.77,
|
||||
"replyMs": 2.01,
|
||||
"goToFirstVariantMs": 411.69,
|
||||
"goToAllVariantsMs": 412.95,
|
||||
"deliveryGapMs": 1.26,
|
||||
"impeccableOverheadMs": 411.66
|
||||
},
|
||||
{
|
||||
"iteration": 5,
|
||||
"scenario": "plain",
|
||||
"eventId": "9198fca0",
|
||||
"browserPreparationMs": 307.22,
|
||||
"browserDispatchMs": 2,
|
||||
"automationClickMs": 305.22,
|
||||
"serverPickupMs": 2.23,
|
||||
"goToAgentMs": 309.45,
|
||||
"scaffoldMs": 54.85,
|
||||
"generationMs": 0.04,
|
||||
"writeMs": 0.42,
|
||||
"writeToFirstVariantMs": 44.39,
|
||||
"replyMs": 2.01,
|
||||
"goToFirstVariantMs": 409.19,
|
||||
"goToAllVariantsMs": 410.41,
|
||||
"deliveryGapMs": 1.22,
|
||||
"impeccableOverheadMs": 409.15
|
||||
},
|
||||
{
|
||||
"iteration": 6,
|
||||
"scenario": "plain",
|
||||
"eventId": "c4273708",
|
||||
"browserPreparationMs": 820.82,
|
||||
"browserDispatchMs": 2.1,
|
||||
"automationClickMs": 818.72,
|
||||
"serverPickupMs": 3.53,
|
||||
"goToAgentMs": 824.35,
|
||||
"scaffoldMs": 54.43,
|
||||
"generationMs": 0.03,
|
||||
"writeMs": 0.41,
|
||||
"writeToFirstVariantMs": 41.73,
|
||||
"replyMs": 1.95,
|
||||
"goToFirstVariantMs": 920.98,
|
||||
"goToAllVariantsMs": 922.2,
|
||||
"deliveryGapMs": 1.22,
|
||||
"impeccableOverheadMs": 920.95
|
||||
},
|
||||
{
|
||||
"iteration": 7,
|
||||
"scenario": "plain",
|
||||
"eventId": "ffed990a",
|
||||
"browserPreparationMs": 311.53,
|
||||
"browserDispatchMs": 2.2,
|
||||
"automationClickMs": 309.33,
|
||||
"serverPickupMs": 1.98,
|
||||
"goToAgentMs": 313.51,
|
||||
"scaffoldMs": 54.19,
|
||||
"generationMs": 0.03,
|
||||
"writeMs": 0.38,
|
||||
"writeToFirstVariantMs": 46.06,
|
||||
"replyMs": 2.01,
|
||||
"goToFirstVariantMs": 414.2,
|
||||
"goToAllVariantsMs": 416.61,
|
||||
"deliveryGapMs": 2.41,
|
||||
"impeccableOverheadMs": 414.17
|
||||
}
|
||||
],
|
||||
"harnessProbe": null
|
||||
},
|
||||
{
|
||||
"schemaVersion": 1,
|
||||
"generatedAt": "2026-07-12T00:14:29.712Z",
|
||||
"benchmark": {
|
||||
"fixture": "vite8-react-plain",
|
||||
"agent": "fake",
|
||||
"provider": "deterministic",
|
||||
"model": null,
|
||||
"scenario": "annotated",
|
||||
"variants": 3,
|
||||
"delivery": "atomic"
|
||||
},
|
||||
"setup": {
|
||||
"dependencies": 679.81,
|
||||
"liveServer": 236.59,
|
||||
"injection": 28.58,
|
||||
"devServer": 518.43,
|
||||
"pageLoad": 148.21,
|
||||
"handshake": 263.27
|
||||
},
|
||||
"summary": {
|
||||
"count": 3,
|
||||
"metrics": {
|
||||
"browserPreparationMs": {
|
||||
"median": 349.77,
|
||||
"p95": 402.2,
|
||||
"min": 347.72,
|
||||
"max": 408.03
|
||||
},
|
||||
"browserDispatchMs": {
|
||||
"median": 46.7,
|
||||
"p95": 99.35,
|
||||
"min": 44.9,
|
||||
"max": 105.2
|
||||
},
|
||||
"automationClickMs": {
|
||||
"median": 302.83,
|
||||
"p95": 303.05,
|
||||
"min": 302.82,
|
||||
"max": 303.07
|
||||
},
|
||||
"serverPickupMs": {
|
||||
"median": 0.84,
|
||||
"p95": 2.84,
|
||||
"min": 0.81,
|
||||
"max": 3.06
|
||||
},
|
||||
"goToAgentMs": {
|
||||
"median": 350.61,
|
||||
"p95": 405.04,
|
||||
"min": 348.53,
|
||||
"max": 411.09
|
||||
},
|
||||
"scaffoldMs": {
|
||||
"median": 42.51,
|
||||
"p95": 43.57,
|
||||
"min": 37.9,
|
||||
"max": 43.69
|
||||
},
|
||||
"generationMs": {
|
||||
"median": 0.08,
|
||||
"p95": 0.17,
|
||||
"min": 0.03,
|
||||
"max": 0.18
|
||||
},
|
||||
"writeMs": {
|
||||
"median": 0.55,
|
||||
"p95": 0.68,
|
||||
"min": 0.38,
|
||||
"max": 0.7
|
||||
},
|
||||
"writeToFirstVariantMs": {
|
||||
"median": 31.94,
|
||||
"p95": 91.06,
|
||||
"min": 28.16,
|
||||
"max": 97.63
|
||||
},
|
||||
"replyMs": {
|
||||
"median": 2.15,
|
||||
"p95": 2.99,
|
||||
"min": 1.64,
|
||||
"max": 3.08
|
||||
},
|
||||
"goToFirstVariantMs": {
|
||||
"median": 423.69,
|
||||
"p95": 535.33,
|
||||
"min": 422.9,
|
||||
"max": 547.73
|
||||
},
|
||||
"goToAllVariantsMs": {
|
||||
"median": 424.9,
|
||||
"p95": 537.87,
|
||||
"min": 424.06,
|
||||
"max": 550.42
|
||||
},
|
||||
"deliveryGapMs": {
|
||||
"median": 1.21,
|
||||
"p95": 2.54,
|
||||
"min": 1.16,
|
||||
"max": 2.69
|
||||
},
|
||||
"impeccableOverheadMs": {
|
||||
"median": 423.61,
|
||||
"p95": 535.16,
|
||||
"min": 422.87,
|
||||
"max": 547.55
|
||||
}
|
||||
}
|
||||
},
|
||||
"runs": [
|
||||
{
|
||||
"iteration": 1,
|
||||
"scenario": "annotated",
|
||||
"eventId": "700d0eea",
|
||||
"browserPreparationMs": 408.03,
|
||||
"browserDispatchMs": 105.2,
|
||||
"automationClickMs": 302.83,
|
||||
"serverPickupMs": 3.06,
|
||||
"goToAgentMs": 411.09,
|
||||
"scaffoldMs": 37.9,
|
||||
"generationMs": 0.18,
|
||||
"writeMs": 0.7,
|
||||
"writeToFirstVariantMs": 97.63,
|
||||
"replyMs": 3.08,
|
||||
"goToFirstVariantMs": 547.73,
|
||||
"goToAllVariantsMs": 550.42,
|
||||
"deliveryGapMs": 2.69,
|
||||
"impeccableOverheadMs": 547.55
|
||||
},
|
||||
{
|
||||
"iteration": 2,
|
||||
"scenario": "annotated",
|
||||
"eventId": "fc262897",
|
||||
"browserPreparationMs": 347.72,
|
||||
"browserDispatchMs": 44.9,
|
||||
"automationClickMs": 302.82,
|
||||
"serverPickupMs": 0.81,
|
||||
"goToAgentMs": 348.53,
|
||||
"scaffoldMs": 42.51,
|
||||
"generationMs": 0.08,
|
||||
"writeMs": 0.55,
|
||||
"writeToFirstVariantMs": 31.94,
|
||||
"replyMs": 1.64,
|
||||
"goToFirstVariantMs": 423.69,
|
||||
"goToAllVariantsMs": 424.9,
|
||||
"deliveryGapMs": 1.21,
|
||||
"impeccableOverheadMs": 423.61
|
||||
},
|
||||
{
|
||||
"iteration": 3,
|
||||
"scenario": "annotated",
|
||||
"eventId": "6dda2190",
|
||||
"browserPreparationMs": 349.77,
|
||||
"browserDispatchMs": 46.7,
|
||||
"automationClickMs": 303.07,
|
||||
"serverPickupMs": 0.84,
|
||||
"goToAgentMs": 350.61,
|
||||
"scaffoldMs": 43.69,
|
||||
"generationMs": 0.03,
|
||||
"writeMs": 0.38,
|
||||
"writeToFirstVariantMs": 28.16,
|
||||
"replyMs": 2.15,
|
||||
"goToFirstVariantMs": 422.9,
|
||||
"goToAllVariantsMs": 424.06,
|
||||
"deliveryGapMs": 1.16,
|
||||
"impeccableOverheadMs": 422.87
|
||||
}
|
||||
],
|
||||
"harnessProbe": null
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
export const progressiveDeliveryResult = {
|
||||
generatedAt: '2026-07-11T18:41:20-07:00',
|
||||
runs: 5,
|
||||
benchmark: {
|
||||
agent: 'llm',
|
||||
provider: 'Anthropic',
|
||||
model: 'Claude Haiku 4.5',
|
||||
fixture: 'vite8-react-plain',
|
||||
promptMode: 'synthetic-element-contract',
|
||||
},
|
||||
atomic: {
|
||||
medianFirstMs: 3674.74,
|
||||
p95FirstMs: 7262.77,
|
||||
medianAllMs: 3677.16,
|
||||
firstMs: [3674.74, 3324.98, 3431.78, 4041.59, 8068.07],
|
||||
allMs: [3677.16, 3327.62, 3433.45, 4045.33, 8070.09],
|
||||
},
|
||||
progressive: {
|
||||
medianFirstMs: 1306.33,
|
||||
p95FirstMs: 1594.93,
|
||||
medianAllMs: 4445.29,
|
||||
firstMs: [1642, 1205.54, 1406.66, 1306.33, 1112.19],
|
||||
allMs: [4770.53, 3127.94, 5037.59, 4031.08, 4445.29],
|
||||
},
|
||||
};
|
||||
@@ -1,85 +0,0 @@
|
||||
const candidate = (
|
||||
firstMedianMs: number | null,
|
||||
firstP95Ms: number | null,
|
||||
allMedianMs: number | null,
|
||||
allP95Ms: number | null,
|
||||
passedRuns: number,
|
||||
costUsd: number,
|
||||
) => ({
|
||||
firstMedianMs,
|
||||
firstP95Ms,
|
||||
allMedianMs,
|
||||
allP95Ms,
|
||||
passedRuns,
|
||||
totalRuns: 5,
|
||||
costUsd,
|
||||
reliable: passedRuns === 5,
|
||||
});
|
||||
|
||||
export const liveProviderResult = {
|
||||
generatedAt: '2026-07-13T01:11:49.054Z',
|
||||
fixture: 'vite8-react-brand-fidelity',
|
||||
runsPerCandidate: 5,
|
||||
statisticallyStable: true,
|
||||
strategies: ['atomic-full', 'progressive-full', 'progressive-compact', 'parallel-compact'],
|
||||
cleanupControl: {
|
||||
providerIndependent: true,
|
||||
acceptToCleanPickingMs: 172.19,
|
||||
productionBuildMs: 383.51,
|
||||
markerFree: true,
|
||||
browserClean: true,
|
||||
consoleErrors: 0,
|
||||
passed: true,
|
||||
},
|
||||
providers: [
|
||||
{
|
||||
provider: 'Anthropic',
|
||||
model: 'Claude Sonnet 4.6',
|
||||
effort: 'low',
|
||||
atomic: candidate(57168.08, 64787.41, 57168.08, 64787.41, 4, 0.882555),
|
||||
progressiveFull: candidate(18623.04, 21744.52, 40591.04, 57284.19, 3, 1.35405),
|
||||
progressiveCompact: candidate(16387.92, 17641.08, 41505.32, 46789.53, 5, 0.386004),
|
||||
parallelCompact: candidate(10567.09, 10755.49, 19805.73, 20156.03, 3, 0.424566),
|
||||
recommendation: 'Progressive compact is the only 5/5 candidate; use atomic only as a compatibility fallback.',
|
||||
},
|
||||
{
|
||||
provider: 'OpenAI',
|
||||
model: 'GPT-5.5',
|
||||
effort: 'low',
|
||||
atomic: candidate(27266.19, 31780.17, 27266.19, 31780.17, 5, 0.602296),
|
||||
progressiveFull: candidate(12681.34, 14283.56, 36102.57, 41957.05, 5, 0.713001),
|
||||
progressiveCompact: candidate(11777.98, 13334.92, 28867.61, 35691.27, 5, 0.48768),
|
||||
parallelCompact: candidate(11846.01, 13551.87, 16211.64, 19043.63, 5, 0.614395),
|
||||
recommendation: 'Progressive compact wins first review and cost; parallel compact wins full-set completion.',
|
||||
},
|
||||
{
|
||||
provider: 'Google',
|
||||
model: 'Gemini 3.1 Flash-Lite',
|
||||
effort: 'minimal (provider default)',
|
||||
atomic: candidate(6579.06, 6579.06, 6579.06, 6579.06, 1, 0.034123),
|
||||
progressiveFull: candidate(null, null, null, null, 0, 0.023667),
|
||||
progressiveCompact: candidate(3063.57, 3069.15, 5357.76, 5368.13, 3, 0.015316),
|
||||
parallelCompact: candidate(1635.05, 1973.83, 2193.7, 3576.19, 5, 0.020824),
|
||||
recommendation: 'Parallel compact is the only 5/5 candidate and the clear production path.',
|
||||
},
|
||||
],
|
||||
totals: {
|
||||
runs: 60,
|
||||
passingRuns: 44,
|
||||
apiCalls: 160,
|
||||
retries: 47,
|
||||
rejectedResponses: 64,
|
||||
estimatedCostUsd: 5.558477,
|
||||
},
|
||||
gate: {
|
||||
dimensions: ['brand', 'component', 'token', 'copy', 'source', 'accept-cleanup'],
|
||||
minimumOverall: 0.9,
|
||||
minimumDimension: 0.75,
|
||||
},
|
||||
recommendation: {
|
||||
codexDefault: 'progressive-compact',
|
||||
googleDefault: 'parallel-compact',
|
||||
portableFallback: 'atomic-full',
|
||||
rationale: 'Choose per provider and harness. Compact progressive is the reliable first-review winner for OpenAI and Anthropic; parallel compact is required for Gemini reliability. Harnesses without measured progressive publication retain atomic delivery.',
|
||||
},
|
||||
} as const;
|
||||
@@ -69,7 +69,7 @@ const resolvedOgDescription = ogDescription || description;
|
||||
try {
|
||||
var t = localStorage.getItem('impeccable-theme');
|
||||
var root = document.documentElement;
|
||||
var pref = (t === 'light' || t === 'dark') ? t : 'auto';
|
||||
var pref = (t === 'light' || t === 'dark' || t === 'auto') ? t : 'dark';
|
||||
var resolved = pref === 'auto'
|
||||
? (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark')
|
||||
: pref;
|
||||
|
||||
+148
-133
@@ -53,7 +53,7 @@ import '../styles/testimonials.css';
|
||||
<div class="hero-rebuild-art" aria-hidden="true"></div>
|
||||
<div class="hero-rebuild-container">
|
||||
<div class="hero-rebuild-left">
|
||||
<h1 class="hero-rebuild-title">The missing design vocabulary for agents and their humans.</h1>
|
||||
<h1 class="hero-rebuild-title">The missing design vocabulary for agents.</h1>
|
||||
|
||||
<p class="hero-rebuild-body">
|
||||
Impeccable stops AI-generated interfaces from collapsing into the same tells. It teaches
|
||||
@@ -133,46 +133,98 @@ import '../styles/testimonials.css';
|
||||
|
||||
<section class="language-steering" aria-labelledby="language-steering-title">
|
||||
<header class="language-steering-head">
|
||||
<h3 id="language-steering-title">One language. Two ways to steer.</h3>
|
||||
<p>Type the command in chat, or point at the exact element on your live page. Both carry the same project context into the same production code.</p>
|
||||
<h3 id="language-steering-title">Give direction in chat. Refine the result on the page.</h3>
|
||||
<p>Every change lands in your source.</p>
|
||||
</header>
|
||||
|
||||
<div class="language-steering-grid">
|
||||
<article class="language-steering-chat">
|
||||
<header class="language-method-head">
|
||||
<span class="language-method-number">01</span>
|
||||
<div>
|
||||
<h4>In chat</h4>
|
||||
<p>Name the intervention and keep moving.</p>
|
||||
</div>
|
||||
</header>
|
||||
<div class="steering-desktop" data-steering-desktop data-mobile-pane="agent">
|
||||
<div class="steering-desktop-bar">
|
||||
<span class="steering-window-controls" aria-hidden="true"><i></i><i></i><i></i></span>
|
||||
<span class="steering-desktop-context">main</span>
|
||||
<span class="steering-desktop-brand"><i aria-hidden="true"></i> Claudex Cocursor</span>
|
||||
</div>
|
||||
|
||||
<div class="chat-proof" aria-label="Example Impeccable chat exchange">
|
||||
<div class="chat-proof-user">
|
||||
<span>You</span>
|
||||
<p><code>/polish</code> the pricing page. Keep our sharp corners and sober palette. Remove the AI tells.</p>
|
||||
</div>
|
||||
<div class="chat-proof-agent">
|
||||
<span>Agent</span>
|
||||
<div class="chat-proof-scan">
|
||||
<p><strong>DESIGN.md loaded</strong><small>Existing system preserved</small></p>
|
||||
<p><strong>4 tells found</strong><small>Beige surface · italic serif · side-tab · pulsing dot</small></p>
|
||||
<p><strong>Written to source</strong><small>0 detector findings</small></p>
|
||||
<div class="steering-mobile-tabs" role="tablist" aria-label="Steering demo view">
|
||||
<button type="button" role="tab" class="is-active" data-steering-mobile-tab="agent" aria-selected="true">Agent thread</button>
|
||||
<button type="button" role="tab" data-steering-mobile-tab="browser" aria-selected="false">In-app browser</button>
|
||||
</div>
|
||||
|
||||
<div class="steering-desktop-panes">
|
||||
<article class="steering-pane steering-agent" tabindex="0" data-steering-pane="agent">
|
||||
<header class="steering-pane-head">
|
||||
<span class="steering-pane-title"><i aria-hidden="true"></i> Agent thread</span>
|
||||
<span class="steering-pane-meta">Working tree</span>
|
||||
</header>
|
||||
|
||||
<div class="steering-thread" data-steering-thread aria-label="Example Impeccable agent thread">
|
||||
<div class="steering-thread-scene" data-steering-thread-scene="polish">
|
||||
<div class="steering-thread-user">
|
||||
<span>You</span>
|
||||
<p><code>/impeccable <span data-steering-active-command>polish</span></code> the pricing page. Keep our sharp corners and sober palette. Remove the AI tells.</p>
|
||||
</div>
|
||||
|
||||
<div class="steering-thread-agent" aria-live="polite">
|
||||
<span>Agent</span>
|
||||
<p data-steering-agent-copy>I’ll polish the page within its existing design system, then run the detector before I hand it back.</p>
|
||||
<div class="steering-hook-log">
|
||||
<p><i aria-hidden="true">↳</i><strong>DESIGN.md loaded</strong><small>Existing system preserved</small></p>
|
||||
<p><i aria-hidden="true">↳</i><strong>4 tells found</strong><small>AI beige · italic serif · side-tab · pulsing dot</small></p>
|
||||
<p><i aria-hidden="true">✓</i><strong>Written to source</strong><small>0 detector findings</small></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="steering-thread-scene steering-thread-scene--live" data-steering-thread-scene="live">
|
||||
<div class="steering-thread-user">
|
||||
<span>You</span>
|
||||
<p><code>/impeccable live</code></p>
|
||||
</div>
|
||||
|
||||
<div class="steering-thread-agent">
|
||||
<span>Agent</span>
|
||||
<p>Starting Live Mode against the running app. I’ll open the page, then wait for element picks and page-level steering.</p>
|
||||
<div class="steering-hook-log">
|
||||
<p><i aria-hidden="true">↳</i><strong>Live helper started</strong><small>Picker injected into the app</small></p>
|
||||
<p><i aria-hidden="true">↳</i><strong>localhost:3000 opened</strong><small>Production source connected</small></p>
|
||||
<p><i aria-hidden="true">●</i><strong>Waiting for input</strong><small>Pick an element or steer the whole page</small></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="language-steering-live">
|
||||
<header class="language-method-head">
|
||||
<span class="language-method-number">02</span>
|
||||
<div>
|
||||
<h4>Live on the page</h4>
|
||||
<p>Pick, annotate, compare variants, and accept one into source.</p>
|
||||
<div class="steering-composer-wrap">
|
||||
<div class="steering-command-menu" aria-label="Impeccable commands">
|
||||
<div class="steering-command-query"><span>/impeccable</span><small>Choose a command</small></div>
|
||||
<button type="button" class="is-active" data-steering-command="polish" data-agent-copy="I’ll polish the page within its existing design system, then run the detector before I hand it back." aria-pressed="true"><strong>polish</strong><span>Final quality pass</span><kbd>↵</kbd></button>
|
||||
<button type="button" data-steering-command="audit" data-agent-copy="I’ll audit the page for accessibility, responsive behavior, and production quality." aria-pressed="false"><strong>audit</strong><span>Production quality</span><kbd>↵</kbd></button>
|
||||
<button type="button" data-steering-command="typeset" data-agent-copy="I’ll clarify the type hierarchy while preserving the project’s existing fonts and tokens." aria-pressed="false"><strong>typeset</strong><span>Typography hierarchy</span><kbd>↵</kbd></button>
|
||||
<button type="button" data-steering-command="distill" data-agent-copy="I’ll remove nonessential UI and make the primary task unmistakable." aria-pressed="false"><strong>distill</strong><span>Strip to the essence</span><kbd>↵</kbd></button>
|
||||
</div>
|
||||
<button type="button" class="steering-composer" aria-label="Choose an Impeccable command">
|
||||
<span class="steering-composer-plus" aria-hidden="true">+</span>
|
||||
<p><code>/impeccable <span data-steering-active-command data-steering-composer-command>polish</span></code><span class="steering-composer-caret" aria-hidden="true"></span></p>
|
||||
<span class="steering-composer-send" aria-hidden="true">↑</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<LiveSteeringDemo />
|
||||
</article>
|
||||
</article>
|
||||
|
||||
<article class="steering-pane steering-browser" tabindex="0" data-steering-pane="browser">
|
||||
<header class="steering-pane-head">
|
||||
<span class="steering-pane-title"><i aria-hidden="true"></i> Browser</span>
|
||||
<span class="steering-pane-meta">Live preview</span>
|
||||
</header>
|
||||
<div class="steering-browser-toolbar" aria-hidden="true">
|
||||
<span class="steering-browser-nav">
|
||||
<i><svg viewBox="0 0 16 16"><path d="m9.75 3.5-4.5 4.5 4.5 4.5M5.5 8h6.25" /></svg></i>
|
||||
<i><svg viewBox="0 0 16 16"><path d="m6.25 3.5 4.5 4.5-4.5 4.5M10.5 8H4.25" /></svg></i>
|
||||
<i><svg viewBox="0 0 16 16"><path d="M12.5 6A5 5 0 1 0 13 9M12.5 3.5V6H10" /></svg></i>
|
||||
</span>
|
||||
<span class="steering-browser-address"><i></i> localhost:3000</span>
|
||||
<span class="steering-browser-open"><svg viewBox="0 0 16 16"><path d="M9 3h4v4M13 3 7.5 8.5M12 9.5V13H3V4h3.5" /></svg></span>
|
||||
</div>
|
||||
<LiveSteeringDemo />
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
@@ -237,8 +289,8 @@ import '../styles/testimonials.css';
|
||||
<span class="why-productmd-v">SREs on call, reading fast, often in the dark.</span>
|
||||
</div>
|
||||
<div class="why-productmd-field">
|
||||
<span class="why-productmd-k">Register</span>
|
||||
<span class="why-productmd-v">Product. Design serves the task.</span>
|
||||
<span class="why-productmd-k">Mode</span>
|
||||
<span class="why-productmd-v">Operate. Design serves the task.</span>
|
||||
</div>
|
||||
<div class="why-productmd-field">
|
||||
<span class="why-productmd-k">Brand voice</span>
|
||||
@@ -302,26 +354,31 @@ import '../styles/testimonials.css';
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- T4: wide. Tuned to the agent you use. -->
|
||||
<!-- T4: wide. V4 creative direction, shown through a real case. -->
|
||||
<article class="ks-bento-tile ks-bento-tile--span-8 why-panel--vizfirst" id="why-tuned">
|
||||
<span class="ks-bento-num" data-color="patina">04</span>
|
||||
<h3 class="why-panel-title">Tuned to the agent you actually use.</h3>
|
||||
<p class="why-panel-body">Plays to each agent's strengths and around its weaknesses. Below: Codex used image generation to draft Neo Mirai before <code>/impeccable craft</code> turned it into shipped code.</p>
|
||||
<h3 class="why-panel-title">Gives capable models a point of view.</h3>
|
||||
<p class="why-panel-body">V4 turns real project material into an ownable surface concept, then holds the build to it. Below: the Neo Mirai case.</p>
|
||||
<div class="why-visual why-visual--vizfirst">
|
||||
<div class="why-direction-rail">
|
||||
<span><i>Mode</i> Persuade</span>
|
||||
<span><i>Concept</i> A cultural dispatch from the near future</span>
|
||||
<span class="why-direction-locked"><i>Direction contract</i> Locked</span>
|
||||
</div>
|
||||
<figure class="why-vz-plate why-vz-plate--hifi">
|
||||
<span class="why-vz-plate-kind">01 · Visualize</span>
|
||||
<span class="why-vz-plate-kind">01 · Visual probe</span>
|
||||
<a class="why-vz-plate-frame" href="/cases/neo-mirai" aria-label="Read the Neo Mirai case study">
|
||||
<img src="assets/openai_image_2_hifi.jpg" alt="Auto-generated hi-fi landing-page mock in editorial warm-paper style." loading="lazy" width="864" height="1821" />
|
||||
</a>
|
||||
</figure>
|
||||
<figure class="why-vz-plate why-vz-plate--brand">
|
||||
<span class="why-vz-plate-kind">02 · Shape</span>
|
||||
<span class="why-vz-plate-kind">02 · Direction</span>
|
||||
<a class="why-vz-plate-frame" href="/cases/neo-mirai" aria-label="Read the Neo Mirai case study">
|
||||
<img src="assets/openai_image_2_brand.jpg" alt="Auto-generated brand toolkit: identity lockups, palette, type, icon system, and application mocks for a fictional AI design conference." loading="lazy" width="1536" height="1024" />
|
||||
</a>
|
||||
</figure>
|
||||
<figure class="why-vz-plate why-vz-plate--live">
|
||||
<span class="why-vz-plate-kind">03 · Live build</span>
|
||||
<span class="why-vz-plate-kind">03 · Shipped surface</span>
|
||||
<a class="why-vz-plate-frame" href="/neo-mirai/" aria-label="Open the Neo Mirai live build">
|
||||
<img src="assets/cases/neo-mirai/live-fold.png" alt="Finished Neo Mirai website hero and agenda, implemented from the generated conference mock." loading="lazy" width="1440" height="1100" />
|
||||
</a>
|
||||
@@ -330,119 +387,77 @@ import '../styles/testimonials.css';
|
||||
<p class="why-panel-meta"><a href="/cases/neo-mirai">Read the case →</a> · <a href="/neo-mirai/">Open the live build →</a></p>
|
||||
</article>
|
||||
|
||||
<!-- T5: medium. Brand vs Product registers. -->
|
||||
<article class="ks-bento-tile ks-bento-tile--span-6" id="why-registers">
|
||||
<!-- T5: medium. Surface modes replace the old brand/product registers. -->
|
||||
<article class="ks-bento-tile ks-bento-tile--span-6" id="why-modes">
|
||||
<span class="ks-bento-num" data-color="kinpaku">05</span>
|
||||
<h3 class="why-panel-title">Brand work is not product UI.</h3>
|
||||
<p class="why-panel-body">A landing page and a dashboard play by different rules. Impeccable runs in two registers, <em>brand</em> or <em>product</em>, and every command knows which.</p>
|
||||
<h3 class="why-panel-title">Knows what the surface is for.</h3>
|
||||
<p class="why-panel-body">A landing page should persuade. A dashboard should help someone work. Impeccable names the mode before it designs.</p>
|
||||
|
||||
<div class="why-visual why-visual--registers">
|
||||
<div class="why-register why-register--brand">
|
||||
<span class="why-register-label">Brand mode</span>
|
||||
<div class="why-register-mock why-register-mock--brand">
|
||||
<span class="why-brand-hero-mono">Issue 04</span>
|
||||
<div class="why-brand-hero-title"><em>Shape</em> the story.</div>
|
||||
<div class="why-visual why-visual--modes">
|
||||
<div class="why-mode-card why-mode-card--persuade">
|
||||
<div class="why-mode-head"><strong>Persuade</strong><span>Win attention</span></div>
|
||||
<div class="why-mode-preview" aria-hidden="true">
|
||||
<span class="why-mode-kicker">A sharp idea</span>
|
||||
<b>Make it<br />unmissable.</b>
|
||||
<i>See the story</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="why-register why-register--product">
|
||||
<span class="why-register-label">Product mode</span>
|
||||
<div class="why-register-mock why-register-mock--product">
|
||||
<div class="why-product-row"><span class="why-product-k">Users</span><span class="why-product-v">12,482</span></div>
|
||||
<div class="why-product-row"><span class="why-product-k">Active now</span><span class="why-product-v">1,207</span></div>
|
||||
<div class="why-product-row"><span class="why-product-k">Conversion</span><span class="why-product-v">4.8%</span></div>
|
||||
<div class="why-mode-card why-mode-card--operate">
|
||||
<div class="why-mode-head"><strong>Operate</strong><span>Complete a task</span></div>
|
||||
<div class="why-mode-preview" aria-hidden="true">
|
||||
<span class="why-mode-toolbar"></span>
|
||||
<span class="why-mode-data"><i></i><i></i><i></i></span>
|
||||
<span class="why-mode-action">Resolve</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="why-mode-card why-mode-card--read">
|
||||
<div class="why-mode-head"><strong>Read</strong><span>Build understanding</span></div>
|
||||
<div class="why-mode-preview" aria-hidden="true">
|
||||
<b>A clear argument.</b>
|
||||
<span class="why-mode-copy"><i></i><i></i><i></i><i></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="why-mode-card why-mode-card--experience">
|
||||
<div class="why-mode-head"><strong>Experience</strong><span>Let the work lead</span></div>
|
||||
<div class="why-mode-preview" aria-hidden="true">
|
||||
<span class="why-mode-art"></span>
|
||||
<b>NEO<br />MIRAI</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
<!-- T6: medium. CI/CD-ready. -->
|
||||
<!-- T6: medium. Hooks keep the detector in the agent loop; CI is
|
||||
the final gate rather than the whole story. -->
|
||||
<article class="ks-bento-tile ks-bento-tile--span-6" id="why-ci">
|
||||
<span class="ks-bento-num" data-color="patina">06</span>
|
||||
<h3 class="why-panel-title">Block slop before it ships.</h3>
|
||||
<p class="why-panel-body">A detector you can wire into PR checks. 59 deterministic rules, no LLM, exit codes the build can read.</p>
|
||||
<p class="why-panel-body">Hooks inspect each UI edit and send findings straight back to the agent. The same detector can fail a PR.</p>
|
||||
<div class="why-visual why-visual--ci">
|
||||
<div class="why-ci-window">
|
||||
<div class="why-ci-header">
|
||||
<span class="why-ci-branch">feat/pricing-page</span>
|
||||
<span class="why-ci-status why-ci-status--fail">✗ failing</span>
|
||||
<span class="why-ci-branch">Edit · Hero.tsx</span>
|
||||
<span class="why-ci-status why-ci-status--hook">hook active</span>
|
||||
</div>
|
||||
<div class="why-ci-body">
|
||||
<div class="why-ci-line"><span class="why-ci-cmd">$</span> npx impeccable detect src/</div>
|
||||
<div class="why-ci-issue"><span class="why-ci-x">✗</span> <code>src/Hero.tsx:42</code> gradient-text</div>
|
||||
<div class="why-ci-issue"><span class="why-ci-x">✗</span> <code>src/Card.tsx:8</code> side-stripe-border</div>
|
||||
<div class="why-ci-issue"><span class="why-ci-x">✗</span> <code>src/Button.tsx:17</code> ai-color-palette</div>
|
||||
<div class="why-ci-summary">3 anti-patterns · exit 1</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- T7: wide. Live Mode showcase. The old standalone "Design in
|
||||
production" section collapsed into this bento beat. -->
|
||||
<article class="ks-bento-tile ks-bento-tile--span-8" id="why-live">
|
||||
<span class="ks-bento-num" data-color="kinpaku">07</span>
|
||||
<h3 class="why-panel-title">Iterate in your live app. <span class="why-panel-badge">BETA</span></h3>
|
||||
<p class="why-panel-body">Pick any element in your running dev server, leave a comment or a stroke, hit Go. Three production-quality variants swap in via your framework's HMR.</p>
|
||||
<div class="why-visual why-visual--live">
|
||||
<div class="why-live-frame">
|
||||
<div class="why-live-chrome">
|
||||
<span class="why-live-dot"></span><span class="why-live-dot"></span><span class="why-live-dot"></span>
|
||||
<span class="why-live-url">localhost:3000</span>
|
||||
</div>
|
||||
<div class="why-live-stage">
|
||||
<div class="why-live-pick">
|
||||
<span class="why-live-pick-tag">section.hero</span>
|
||||
<span class="why-live-pick-note">more elegant<span class="why-live-pick-caret"></span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="why-live-ctx live-demo-ctx" data-phase="configuring">
|
||||
<div class="live-demo-ctx-row live-demo-ctx-row--configure">
|
||||
<div class="live-demo-ctx-command">
|
||||
<span class="live-demo-ctx-input"><span class="live-demo-ctx-selection">h1</span><span class="live-demo-ctx-caret"></span></span>
|
||||
<div class="why-ci-body why-hook-loop">
|
||||
<div class="why-hook-step">
|
||||
<span class="why-hook-mark">1</span>
|
||||
<span><strong>Edit lands</strong><small>Agent updates the hero.</small></span>
|
||||
</div>
|
||||
<div class="live-demo-ctx-trailing">
|
||||
<div class="live-demo-ctx-modifiers">
|
||||
<span class="live-demo-ctx-action">bolder<span class="live-demo-ctx-action-caret" aria-hidden="true">▾</span></span>
|
||||
<span class="live-demo-ctx-count">×3</span>
|
||||
</div>
|
||||
<div class="live-demo-ctx-actions">
|
||||
<span class="live-demo-ctx-voice" aria-hidden="true">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" x2="12" y1="19" y2="22"></line></svg>
|
||||
</span>
|
||||
<span class="live-demo-ctx-go" aria-hidden="true">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="why-hook-step why-hook-step--found">
|
||||
<span class="why-hook-mark">2</span>
|
||||
<span><strong>Hook returns two findings</strong><small>AI beige · clipped label</small></span>
|
||||
</div>
|
||||
<div class="why-hook-step why-hook-step--clean">
|
||||
<span class="why-hook-mark">✓</span>
|
||||
<span><strong>Agent corrects the file</strong><small>Second pass: clean</small></span>
|
||||
</div>
|
||||
<div class="why-ci-summary"><span>Deep stop audit</span><strong>0 findings · PR ready</strong></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="why-panel-meta"><a href="/live-mode">See how Live Mode works →</a></p>
|
||||
</article>
|
||||
|
||||
<!-- T8: narrow. Accept writes to source. Pairs with T7 as the
|
||||
"writes back" beat that separates Live Mode from a mock. -->
|
||||
<article class="ks-bento-tile ks-bento-tile--span-4" id="why-writes">
|
||||
<span class="ks-bento-num" data-color="patina">08</span>
|
||||
<h3 class="why-panel-title">Accept writes to source.</h3>
|
||||
<p class="why-panel-body">Variants land in your real file as an ordinary edit, not a throwaway mock. A diff you can review, commit, or undo.</p>
|
||||
<div class="why-visual why-visual--writes">
|
||||
<div class="why-writes-card">
|
||||
<div class="why-writes-head">
|
||||
<span class="why-writes-check">✓</span>
|
||||
<span class="why-writes-label">Wrote</span>
|
||||
<span class="why-writes-file">src/Hero.astro</span>
|
||||
</div>
|
||||
<div class="why-writes-diff">
|
||||
<div class="why-writes-line why-writes-line--del">- "Welcome to Our Hotel"</div>
|
||||
<div class="why-writes-line why-writes-line--add">+ "Where the coast forgets time"</div>
|
||||
<div class="why-writes-line why-writes-line--del">- "Book Now"</div>
|
||||
<div class="why-writes-line why-writes-line--add">+ "Reserve your stay"</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="why-panel-meta"><a href="/detector">Explore the detector lab →</a></p>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,540 +0,0 @@
|
||||
---
|
||||
import Base from '../../layouts/Base.astro';
|
||||
import LiveUiGallery from '../../components/LiveUiGallery.astro';
|
||||
import benchmarkData from '../../data/live-performance.json';
|
||||
import { currentHarnessProbe, harnessPaths, liveExperiments } from '../../data/live-harnesses';
|
||||
import { progressiveDeliveryResult } from '../../data/live-progressive-result';
|
||||
import { liveInitResult } from '../../data/live-init-result';
|
||||
import { liveControlResult } from '../../data/live-control-result';
|
||||
import { liveFrameworkResults } from '../../data/live-framework-results';
|
||||
import { liveProviderResult } from '../../data/live-provider-result';
|
||||
import { liveCodexWorkerResult } from '../../data/live-codex-worker-result';
|
||||
import { liveAnnotatedResult } from '../../data/live-annotated-result';
|
||||
import '../../styles/sub-pages.css';
|
||||
import '../../styles/live-performance.css';
|
||||
import '../../styles/live-lab-workbench.css';
|
||||
|
||||
const reports = 'reports' in benchmarkData ? benchmarkData.reports : [benchmarkData];
|
||||
const plainReports = reports.filter(report => report.benchmark.scenario === 'plain' && report.benchmark.agent === 'fake');
|
||||
const annotatedReports = reports.filter(report => report.benchmark.scenario === 'annotated' && report.benchmark.agent === 'fake');
|
||||
const baseline = plainReports[0] || reports[0];
|
||||
const plain = plainReports.at(-1) || baseline;
|
||||
const annotated = annotatedReports.at(-1);
|
||||
const metric = (name: string) => plain.summary.metrics[name]?.median || 0;
|
||||
const protocolFloor = metric('goToFirstVariantMs');
|
||||
const baselineFloor = baseline.summary.metrics.goToFirstVariantMs?.median || protocolFloor;
|
||||
const browserDispatch = metric('browserDispatchMs');
|
||||
const automationClick = metric('automationClickMs');
|
||||
const baselineAutomationClick = baseline.summary.metrics.automationClickMs?.median ?? automationClick;
|
||||
const serverPickup = metric('serverPickupMs');
|
||||
const scaffold = metric('scaffoldMs');
|
||||
const writeAndRender = metric('writeMs') + metric('writeToFirstVariantMs');
|
||||
const productFloor = Math.max(0, protocolFloor - automationClick);
|
||||
const baselineProductFloor = Math.max(0, baselineFloor - baselineAutomationClick);
|
||||
const improvement = baselineFloor ? Math.max(0, 1 - (protocolFloor / baselineFloor)) : 0;
|
||||
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 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: 'Playwright actionability', value: automationClick, tone: 'capture' },
|
||||
{ name: 'Live dispatch + pickup', value: browserDispatch + serverPickup, tone: 'pickup' },
|
||||
{ name: 'Source scaffold', value: scaffold, tone: 'scaffold' },
|
||||
{ name: 'Write + browser settle', value: writeAndRender, tone: 'render' },
|
||||
];
|
||||
const progressiveGain = 1 - (
|
||||
progressiveDeliveryResult.progressive.medianFirstMs
|
||||
/ progressiveDeliveryResult.atomic.medianFirstMs
|
||||
);
|
||||
const progressiveP95Gain = 1 - (
|
||||
progressiveDeliveryResult.progressive.p95FirstMs
|
||||
/ progressiveDeliveryResult.atomic.p95FirstMs
|
||||
);
|
||||
const progressiveAllDelta = (
|
||||
progressiveDeliveryResult.progressive.medianAllMs
|
||||
- progressiveDeliveryResult.atomic.medianAllMs
|
||||
);
|
||||
const initGain = 1 - (liveInitResult.cold.medianMs / liveInitResult.baselineColdMedianMs);
|
||||
const providerColumns = [
|
||||
{ key: 'atomic', label: 'Atomic full' },
|
||||
{ key: 'progressiveFull', label: 'Progressive full' },
|
||||
{ key: 'progressiveCompact', label: 'Progressive compact' },
|
||||
{ key: 'parallelCompact', label: 'Parallel compact' },
|
||||
] as const;
|
||||
---
|
||||
|
||||
<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 live-lab-page"
|
||||
mainClass="live-performance-main live-lab-main-shell"
|
||||
noIndex
|
||||
hideHeader
|
||||
hideFooter
|
||||
>
|
||||
<section class="live-lab-workbench" aria-label="Live performance workbench" data-live-lab-workbench>
|
||||
<aside class="live-lab-nav" aria-label="Live lab navigation">
|
||||
<div class="live-lab-nav-head">
|
||||
<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>
|
||||
<h1>Live Lab</h1>
|
||||
<p>Measure Live and inspect its interface.</p>
|
||||
</div>
|
||||
<nav class="live-lab-nav-scroll" aria-label="Workbench views">
|
||||
<div class="live-lab-nav-group">
|
||||
<h2>Views</h2>
|
||||
<div class="live-lab-nav-list">
|
||||
<button type="button" data-lab-view="overview" aria-pressed="true">Performance</button>
|
||||
<button type="button" data-lab-view="providers" aria-pressed="false">Providers</button>
|
||||
<button type="button" data-lab-view="harness" aria-pressed="false">Harnesses</button>
|
||||
<button type="button" data-lab-view="ui" aria-pressed="false">UI states</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<div class="live-lab-workspace">
|
||||
<header class="live-lab-toolbar">
|
||||
<div>
|
||||
<h2 data-lab-view-title>Performance</h2>
|
||||
<p data-lab-view-summary>Where Live spends time before the first usable variant.</p>
|
||||
</div>
|
||||
<div class="live-lab-toolbar-actions">
|
||||
<button type="button" data-lab-reset data-lab-view-action="overview">Reset simulator</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="live-lab-workspace-scroll">
|
||||
<div class="live-lab-content-grid">
|
||||
<article
|
||||
class="live-performance live-lab-canvas"
|
||||
data-live-performance
|
||||
data-protocol-floor={baselineProductFloor}
|
||||
data-overlap-floor={productFloor}
|
||||
>
|
||||
<header class="live-performance-hero ks-section" data-lab-panel="overview">
|
||||
<p class="live-performance-kicker">Click → first usable variant</p>
|
||||
<h1><span>{displayMs(protocolFloor)}</span> Live overhead</h1>
|
||||
<p class="live-performance-lede">
|
||||
Down {(improvement * 100).toFixed(1)}% from {displayMs(baselineFloor)} on the same fixture. Browser dispatch takes {displayMs(browserDispatch)} median.
|
||||
</p>
|
||||
<dl class="live-lab-run-stats" aria-label="Latest Live run stages">
|
||||
<div><dt>Browser dispatch</dt><dd>{displayMs(browserDispatch)}</dd></div>
|
||||
<div><dt>Server pickup</dt><dd>{displayMs(serverPickup)}</dd></div>
|
||||
<div><dt>Source scaffold</dt><dd>{displayMs(scaffold)}</dd></div>
|
||||
<div><dt>Write + settle</dt><dd>{displayMs(writeAndRender)}</dd></div>
|
||||
</dl>
|
||||
</header>
|
||||
|
||||
<section class="live-performance-section ks-section" aria-labelledby="critical-path-title" data-lab-panel="overview">
|
||||
<div class="live-performance-section-head">
|
||||
<div>
|
||||
<p class="live-performance-label">Click → first usable variant</p>
|
||||
<h2 id="critical-path-title">Where the time goes</h2>
|
||||
</div>
|
||||
<p>Median product overhead with model time removed.</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">The same model-free benchmark improved from {displayMs(baselineFloor)} to {displayMs(protocolFloor)} median.</desc>
|
||||
<text class="latency-major-label" x="24" y="42">Before · capture blocks dispatch</text>
|
||||
<rect class="latency-segment is-capture" x="24" y="54" width="952" height="42"></rect>
|
||||
<text class="latency-major-value" x="44" y="82">{displayMs(baselineFloor)}</text>
|
||||
<text class="latency-major-label" x="24" y="128">After · dispatch precedes capture</text>
|
||||
<rect class="latency-segment is-scaffold" x="24" y="140" width={optimizedTapeWidth} height="42"></rect>
|
||||
<text class="latency-major-value" x="44" y="168">{displayMs(protocolFloor)}</text>
|
||||
<path class="latency-bracket" d={`M${24 + optimizedTapeWidth} 184 V194 H976 V184`}></path>
|
||||
<text class="latency-remainder-label" x="976" y="210" text-anchor="end">−{(improvement * 100).toFixed(1)}% · same fixture and deterministic agent</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 live-finding-card--quiet" role="note">
|
||||
<strong>Capture no longer blocks Go</strong>
|
||||
<p>Plain selections dispatch immediately. Annotated selections still upload the screenshot first because the model needs it.</p>
|
||||
</div>
|
||||
<p class="table-scroll-hint" aria-hidden="true">Scroll horizontally to compare →</p>
|
||||
<div class="harness-table-wrap" tabindex="0" aria-label="Scrollable framework performance comparison">
|
||||
<table class="harness-table">
|
||||
<caption class="sr-only">Progressive Live performance by framework</caption>
|
||||
<thead><tr><th>Framework</th><th>Accept → Pick</th><th>Next Go → pickup</th><th>Proof</th></tr></thead>
|
||||
<tbody>
|
||||
{liveFrameworkResults.map(result => (
|
||||
<tr>
|
||||
<td><strong>{result.framework}</strong><span>{result.runs} real {result.runs === 1 ? 'run' : 'runs'}</span></td>
|
||||
<td><strong>{displayMs(result.acceptMedianMs)}</strong><span>p95 {displayMs(result.acceptP95Ms)}</span></td>
|
||||
<td><strong>{displayMs(result.nextPickupMedianMs)}</strong><span>p95 {displayMs(result.nextPickupP95Ms)}</span></td>
|
||||
<td><span class="ks-tag">{result.status}</span></td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="live-performance-section ks-section" aria-labelledby="progressive-title" data-lab-panel="overview">
|
||||
<div class="live-performance-section-head">
|
||||
<div>
|
||||
<p class="live-performance-label">Progressive delivery · Codex path</p>
|
||||
<h2 id="progressive-title">Variant 1 arrives first</h2>
|
||||
</div>
|
||||
<p>Review or accept the first result while later variants continue generating.</p>
|
||||
</div>
|
||||
<div
|
||||
class="scenario-comparison"
|
||||
role="img"
|
||||
aria-label={`Atomic first variant ${displayMs(progressiveDeliveryResult.atomic.medianFirstMs)}; progressive first variant ${displayMs(progressiveDeliveryResult.progressive.medianFirstMs)}`}
|
||||
>
|
||||
<div class="scenario-row">
|
||||
<div class="scenario-label"><strong>Atomic</strong><span>Wait for the full set</span></div>
|
||||
<div class="scenario-track"><span class="is-plain" style="--scenario-width:100%"></span></div>
|
||||
<output>{displayMs(progressiveDeliveryResult.atomic.medianFirstMs)}</output>
|
||||
</div>
|
||||
<div class="scenario-row">
|
||||
<div class="scenario-label"><strong>Progressive</strong><span>Show variant 1, finish in parallel</span></div>
|
||||
<div class="scenario-track"><span class="is-annotated" style={`--scenario-width:${(1 - progressiveGain) * 100}%`}></span></div>
|
||||
<output>{displayMs(progressiveDeliveryResult.progressive.medianFirstMs)}</output>
|
||||
</div>
|
||||
</div>
|
||||
<div class="live-performance-finding live-finding-card--quiet" role="note">
|
||||
<strong>Measured improvement</strong>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
<div class="live-performance-finding live-finding-card--quiet" role="note">
|
||||
<strong>Control lane</strong>
|
||||
<p>
|
||||
Across {liveControlResult.runs} real Vite/React runs, Accept dispatch → picker-ready is {displayMs(liveControlResult.acceptToPicking.medianMs)} median / {displayMs(liveControlResult.acceptToPicking.p95Ms)} p95.
|
||||
A second Go reaches the poll supervisor in {displayMs(liveControlResult.nextGoToPickup.medianMs)} median / {displayMs(liveControlResult.nextGoToPickup.p95Ms)} p95 while the canceled worker unwinds.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="live-performance-section ks-section" aria-labelledby="provider-title" data-lab-panel="providers">
|
||||
<div class="live-performance-section-head">
|
||||
<div>
|
||||
<p class="live-performance-label">Paid provider matrix · five runs per candidate</p>
|
||||
<h2 id="provider-title">Choose delivery per provider</h2>
|
||||
</div>
|
||||
<p>Sixty strict-gated runs. Brand, component, token, copy, source, and cleanup fidelity must all pass.</p>
|
||||
</div>
|
||||
<p class="table-scroll-hint" aria-hidden="true">Scroll horizontally to compare →</p>
|
||||
<div class="harness-table-wrap" tabindex="0" aria-label="Scrollable provider strategy comparison">
|
||||
<table class="harness-table">
|
||||
<caption class="sr-only">Paid Live generation strategy results by provider</caption>
|
||||
<thead><tr><th>Provider</th>{providerColumns.map(column => <th>{column.label}</th>)}</tr></thead>
|
||||
<tbody>
|
||||
{liveProviderResult.providers.map(result => (
|
||||
<tr>
|
||||
<td><strong>{result.provider}</strong><span>{result.model} · {result.effort}</span><span>{result.recommendation}</span></td>
|
||||
{providerColumns.map(column => {
|
||||
const candidate = result[column.key];
|
||||
return (
|
||||
<td>
|
||||
<strong>{candidate.firstMedianMs === null ? 'No valid run' : `${displayMs(candidate.firstMedianMs)} first`}</strong>
|
||||
<span>{candidate.passedRuns}/5 pass{candidate.firstP95Ms === null ? '' : ` · p95 ${displayMs(candidate.firstP95Ms)}`}</span>
|
||||
<span>{candidate.allMedianMs === null ? 'full set unavailable' : `${displayMs(candidate.allMedianMs)} all`}</span>
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="live-performance-finding live-finding-card--quiet" role="note">
|
||||
<strong>Decision</strong>
|
||||
<p>
|
||||
Codex/OpenAI defaults to progressive compact: 5/5 passed, it had the fastest first review, and it cost less than the other OpenAI splits. Anthropic also keeps progressive compact because it was the only 5/5 candidate. Gemini uses parallel compact; every other Gemini strategy failed the reliability gate. Unmeasured harnesses retain atomic delivery.
|
||||
</p>
|
||||
</div>
|
||||
<p class="live-performance-caption">
|
||||
Provider matrix cost: ${liveProviderResult.totals.estimatedCostUsd.toFixed(2)} across {liveProviderResult.totals.apiCalls} calls, including {liveProviderResult.totals.retries} retries. {liveProviderResult.totals.passingRuns}/{liveProviderResult.totals.runs} runs passed the strict gate. Accept → clean Pick/build control passed in {displayMs(liveProviderResult.cleanupControl.acceptToCleanPickingMs)} with zero console errors or Live markers.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="live-performance-section ks-section" aria-labelledby="init-title" data-lab-panel="overview">
|
||||
<div class="live-performance-section-head">
|
||||
<div>
|
||||
<p class="live-performance-label">Configured cold initialization</p>
|
||||
<h2 id="init-title">Cold setup takes {displayMs(liveInitResult.cold.medianMs)}</h2>
|
||||
</div>
|
||||
<p>Ten isolated starts. App dependency installation and dev-server startup are excluded.</p>
|
||||
</div>
|
||||
<div class="scenario-comparison" role="img" aria-label={`Cold initialization improved from ${displayMs(liveInitResult.baselineColdMedianMs)} to ${displayMs(liveInitResult.cold.medianMs)} median`}>
|
||||
<div class="scenario-row">
|
||||
<div class="scenario-label"><strong>Before</strong><span>200 ms readiness polling floor</span></div>
|
||||
<div class="scenario-track"><span class="is-plain" style="--scenario-width:100%"></span></div>
|
||||
<output>{displayMs(liveInitResult.baselineColdMedianMs)}</output>
|
||||
</div>
|
||||
<div class="scenario-row">
|
||||
<div class="scenario-label"><strong>Cold now</strong><span>5 ms readiness polling</span></div>
|
||||
<div class="scenario-track"><span class="is-annotated" style={`--scenario-width:${(1 - initGain) * 100}%`}></span></div>
|
||||
<output>{displayMs(liveInitResult.cold.medianMs)}</output>
|
||||
</div>
|
||||
<div class="scenario-row">
|
||||
<div class="scenario-label"><strong>Warm now</strong><span>Reuse the running helper</span></div>
|
||||
<div class="scenario-track"><span class="is-control" style={`--scenario-width:${(liveInitResult.warm.medianMs / liveInitResult.baselineColdMedianMs) * 100}%`}></span></div>
|
||||
<output>{displayMs(liveInitResult.warm.medianMs)}</output>
|
||||
</div>
|
||||
</div>
|
||||
<div class="live-performance-finding live-finding-card--quiet" role="note">
|
||||
<strong>Initialization result</strong>
|
||||
<p>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)}.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="live-performance-section ks-section" aria-labelledby="paths-title" data-lab-panel="providers">
|
||||
<div class="live-performance-section-head">
|
||||
<div>
|
||||
<p class="live-performance-label">Before / after / control</p>
|
||||
<h2 id="paths-title">Plain selections skip capture</h2>
|
||||
</div>
|
||||
<p>The annotated path remains a control: its screenshot must reach the agent before generation starts.</p>
|
||||
</div>
|
||||
<div class="scenario-comparison" role="img" aria-label={`Baseline ${displayMs(baselineFloor)}; optimized plain path ${displayMs(protocolFloor)}; annotated control ${displayMs(annotatedFloor)}`}>
|
||||
<div class="scenario-row">
|
||||
<div class="scenario-label"><strong>Before</strong><span>Plain pick, capture first</span></div>
|
||||
<div class="scenario-track"><span class="is-plain" style={`--scenario-width:${(baselineFloor / maxScenarioFloor) * 100}%`}></span></div>
|
||||
<output>{displayMs(baselineFloor)}</output>
|
||||
</div>
|
||||
<div class="scenario-row">
|
||||
<div class="scenario-label"><strong>After</strong><span>Plain pick, dispatch first</span></div>
|
||||
<div class="scenario-track"><span class="is-annotated" style={`--scenario-width:${(protocolFloor / maxScenarioFloor) * 100}%`}></span></div>
|
||||
<output>{displayMs(protocolFloor)}</output>
|
||||
</div>
|
||||
<div class="scenario-row">
|
||||
<div class="scenario-label"><strong>Annotated control</strong><span>Pin + stroke + upload</span></div>
|
||||
<div class="scenario-track"><span class="is-control" style={`--scenario-width:${(annotatedFloor / maxScenarioFloor) * 100}%`}></span></div>
|
||||
<output>{displayMs(annotatedFloor)}</output>
|
||||
</div>
|
||||
</div>
|
||||
<p class="live-performance-caption">Median protocol measurements: {baseline.summary.count} before runs, {plain.summary.count} optimized runs, {annotated?.summary.count || 0} annotated controls. Browser and filesystem caches were warm.</p>
|
||||
<div class="live-performance-finding live-finding-card--quiet" role="note">
|
||||
<strong>Annotated model proof</strong>
|
||||
<p>
|
||||
{liveAnnotatedResult.provider} {liveAnnotatedResult.model} received a real screenshot, {liveAnnotatedResult.evidence.comments} comment, and {liveAnnotatedResult.evidence.strokes} stroke.
|
||||
First review arrived in {displayMs(liveAnnotatedResult.firstReviewableMs)} with {displayMs(liveAnnotatedResult.impeccableOverheadMs)} of measured Impeccable overhead; all variants arrived in {displayMs(liveAnnotatedResult.allVariantsMs)} and teardown returned to clean source.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="live-performance-section live-simulator-section ks-section" aria-labelledby="simulator-title" data-lab-panel="overview">
|
||||
<div class="live-performance-section-head">
|
||||
<div>
|
||||
<p class="live-performance-label">Latency simulator</p>
|
||||
<h2 id="simulator-title">Compare model and product time</h2>
|
||||
</div>
|
||||
<p>Move model time to compare the old floor with the optimized product-side estimate.</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>Before optimization</span>
|
||||
<strong data-current-total>15.9 s</strong>
|
||||
<small>model + measured floor, normalized by matched actionability control</small>
|
||||
</div>
|
||||
<div>
|
||||
<span>Current optimized path</span>
|
||||
<strong data-overlap-total>15.1 s</strong>
|
||||
<small>model + measured floor, normalized by matched actionability control</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="live-lab-ui-panel" data-lab-panel="ui" aria-label="Live UI state gallery">
|
||||
<LiveUiGallery />
|
||||
</section>
|
||||
|
||||
<section class="live-performance-section ks-section" aria-labelledby="harness-title" data-lab-panel="harness">
|
||||
<div class="live-performance-section-head">
|
||||
<div>
|
||||
<p class="live-performance-label">Harness delivery</p>
|
||||
<h2 id="harness-title">Compare worker wake paths</h2>
|
||||
</div>
|
||||
<p>Measure pickup before choosing architecture. Fast models cannot help while no model is running.</p>
|
||||
</div>
|
||||
<p class="table-scroll-hint" aria-hidden="true">Scroll horizontally to compare →</p>
|
||||
<div class="harness-table-wrap" tabindex="0" aria-label="Scrollable harness delivery comparison">
|
||||
<table class="harness-table">
|
||||
<caption class="sr-only">Live event delivery paths by agent harness</caption>
|
||||
<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>
|
||||
<div class="live-performance-finding live-finding-card--quiet" role="note">
|
||||
<strong>Dedicated Codex worker</strong>
|
||||
<p>
|
||||
With the target proven as <code>{liveCodexWorkerResult.productionBrowser.selectedTarget}</code>, fenced deltas delivered first review in {displayMs(liveCodexWorkerResult.sourceDeltaExperiment.deltaFirstVariantMs)} median and cut the variant-2 gap by {(liveCodexWorkerResult.sourceDeltaExperiment.secondVariantImprovement * 100).toFixed(1)}%. Accepting variant 2 while variant 3 was pending committed it to source, returned the page in {displayMs(liveCodexWorkerResult.earlyAcceptVerified.acceptToResetMs)}, and produced the next first variant in {displayMs(liveCodexWorkerResult.earlyAcceptVerified.acceptToNextFirstVariantMs)}.
|
||||
</p>
|
||||
</div>
|
||||
<p class="table-scroll-hint" aria-hidden="true">Scroll horizontally to compare →</p>
|
||||
<div class="harness-table-wrap" tabindex="0" aria-label="Scrollable production delivery evidence">
|
||||
<table class="harness-table">
|
||||
<caption class="sr-only">Production Codex delivery candidates and quality evidence</caption>
|
||||
<thead><tr><th>Candidate</th><th>Variant 1</th><th>Variant 2</th><th>Full set</th><th>Rendered gate</th><th>Decision</th></tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Root · all deltas</strong><span>{liveCodexWorkerResult.productionBrowser.runs} guarded Sol/medium run</span></td>
|
||||
<td><strong>{displayMs(liveCodexWorkerResult.productionBrowser.firstVariantMs)}</strong><span>p95 {displayMs(liveCodexWorkerResult.productionBrowser.firstVariantP95Ms)}</span></td>
|
||||
<td><strong>{displayMs(liveCodexWorkerResult.productionBrowser.secondVariantMs)}</strong><span>independently acceptable</span></td>
|
||||
<td><strong>{displayMs(liveCodexWorkerResult.productionBrowser.allVariantsMs)}</strong><span>p95 {displayMs(liveCodexWorkerResult.productionBrowser.allVariantsP95Ms)}</span></td>
|
||||
<td><strong>{liveCodexWorkerResult.renderedQuality.passed}/{liveCodexWorkerResult.renderedQuality.variants} passed</strong><span>{liveCodexWorkerResult.renderedQuality.brandFidelity.toFixed(1)}/10 brand fidelity</span></td>
|
||||
<td><span class="ks-tag" data-tone="ready">Default · immutable deltas</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Root · full source</strong><span>{liveCodexWorkerResult.fullSourceControl.runs} Sol/medium control</span></td>
|
||||
<td><strong>{displayMs(liveCodexWorkerResult.fullSourceControl.firstVariantMs)}</strong><span>same full-card target</span></td>
|
||||
<td><strong>{displayMs(liveCodexWorkerResult.fullSourceControl.secondVariantMs)}</strong><span>{displayMs(liveCodexWorkerResult.fullSourceControl.firstToSecondMs)} after v1</span></td>
|
||||
<td><strong>{displayMs(liveCodexWorkerResult.fullSourceControl.allVariantsMs)}</strong><span>three full-source turns</span></td>
|
||||
<td><strong>1/3</strong><span>production /bolder variants</span></td>
|
||||
<td><span class="ks-tag is-neutral" data-tone="measure">Control · slower v2</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Root · 1 → 3</strong><span>{liveCodexWorkerResult.twoCheckpointControl.runs} Sol/medium control</span></td>
|
||||
<td><strong>{displayMs(liveCodexWorkerResult.twoCheckpointControl.firstVariantMs)}</strong><span>full-card task</span></td>
|
||||
<td><strong>{displayMs(liveCodexWorkerResult.twoCheckpointControl.secondVariantMs)}</strong><span>arrives with variant 3</span></td>
|
||||
<td><strong>{displayMs(liveCodexWorkerResult.twoCheckpointControl.allVariantsMs)}</strong><span>two turns</span></td>
|
||||
<td><strong>{liveCodexWorkerResult.twoCheckpointControl.passed}/{liveCodexWorkerResult.twoCheckpointControl.variants}</strong><span>production /bolder variants</span></td>
|
||||
<td><span class="ks-tag is-neutral" data-tone="measure">Control · slower review</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Heading transport</strong><span>{liveCodexWorkerResult.transportBaseline.runs} Sol/medium runs</span></td>
|
||||
<td><strong>{displayMs(liveCodexWorkerResult.transportBaseline.firstVariantMs)}</strong><span>p95 {displayMs(liveCodexWorkerResult.transportBaseline.firstVariantP95Ms)}</span></td>
|
||||
<td><strong>{displayMs(liveCodexWorkerResult.transportBaseline.allVariantsMs)}</strong><span>legacy 1 → 3 path</span></td>
|
||||
<td><strong>{displayMs(liveCodexWorkerResult.transportBaseline.allVariantsMs)}</strong><span>title-only target</span></td>
|
||||
<td><strong>{liveCodexWorkerResult.transportBaseline.calibratedPassed}/{liveCodexWorkerResult.transportBaseline.variants}</strong><span>recalibrated screenshots</span></td>
|
||||
<td><span class="ks-tag is-neutral" data-tone="measure">Transport evidence only</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p class="live-performance-caption">Root-task samples prove target identity in the posted Generate payload. Speculative standby warmup was rejected: it slowed the next result to {displayMs(liveCodexWorkerResult.standbyExperiment.prewarmedNextFirstVariantMs)} versus {displayMs(liveCodexWorkerResult.standbyExperiment.controlNextFirstVariantMs)}. The next gate is consistent 3/3 rendered quality; server pickup is already {displayMs(liveCodexWorkerResult.productionBrowser.serverPickupMs)} and post-Accept next review is down to {displayMs(liveCodexWorkerResult.earlyAcceptVerified.acceptToNextFirstVariantMs)}.</p>
|
||||
</section>
|
||||
|
||||
<section class="live-performance-section live-experiments-section ks-section" aria-labelledby="experiments-title" data-lab-panel="harness">
|
||||
<div class="live-performance-section-head">
|
||||
<div>
|
||||
<p class="live-performance-label">Evidence-ranked decisions</p>
|
||||
<h2 id="experiments-title">Decisions and open bets</h2>
|
||||
</div>
|
||||
<p>Shipped paths, rejected compromises, and unproven architectural bets are labeled separately.</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" data-lab-panel="harness">
|
||||
<h2 id="method-title">How results are measured</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.
|
||||
Add <code>--agent=codex --action=bolder</code> to run the production app-server worker, <code>--accept-first</code> to measure Accept → next Go, <code>--render-quality</code> for screenshot evidence, or <code>--delivery=atomic</code> for the opt-in atomic candidate.
|
||||
<code>node scripts/benchmark-live-init.mjs --iterations 10</code> measures configured cold and warm helper initialization separately.
|
||||
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>
|
||||
|
||||
<aside class="live-lab-diagnostics" aria-label="Current view summary">
|
||||
<section class="live-lab-diagnostic-panel" data-lab-context="overview">
|
||||
<header><h2>Current run</h2></header>
|
||||
<dl>
|
||||
<div><dt>Go → first</dt><dd>{displayMs(protocolFloor)}</dd></div>
|
||||
<div><dt>Dispatch</dt><dd>{displayMs(browserDispatch)}</dd></div>
|
||||
<div><dt>Scaffold</dt><dd>{displayMs(scaffold)}</dd></div>
|
||||
<div><dt>Accept → Pick</dt><dd>{displayMs(liveControlResult.acceptToPicking.medianMs)}</dd></div>
|
||||
</dl>
|
||||
</section>
|
||||
<section class="live-lab-diagnostic-panel" data-lab-context="providers" hidden>
|
||||
<header><h2>Recommended delivery</h2></header>
|
||||
<ul class="live-lab-strategy-list">
|
||||
<li><strong>Codex / OpenAI</strong><span>progressive compact</span></li>
|
||||
<li><strong>Anthropic</strong><span>progressive compact</span></li>
|
||||
<li><strong>Gemini</strong><span>parallel compact</span></li>
|
||||
<li><strong>Unmeasured harness</strong><span>atomic fallback</span></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="live-lab-diagnostic-panel" data-lab-context="harness" hidden>
|
||||
<header><h2>Dedicated Codex worker</h2></header>
|
||||
<dl>
|
||||
<div><dt>First review</dt><dd>{displayMs(liveCodexWorkerResult.productionBrowser.firstVariantMs)}</dd></div>
|
||||
<div><dt>Second review</dt><dd>{displayMs(liveCodexWorkerResult.productionBrowser.secondVariantMs)}</dd></div>
|
||||
<div><dt>v1 → v2</dt><dd>{displayMs(liveCodexWorkerResult.productionBrowser.firstToSecondMs)}</dd></div>
|
||||
<div><dt>All variants</dt><dd>{displayMs(liveCodexWorkerResult.productionBrowser.allVariantsMs)}</dd></div>
|
||||
<div><dt>Accept → page ready</dt><dd>{displayMs(liveCodexWorkerResult.earlyAcceptVerified.acceptToResetMs)}</dd></div>
|
||||
<div><dt>Accept → next Go</dt><dd>{displayMs(liveCodexWorkerResult.earlyAcceptVerified.acceptToNextGoDispatchMs)}</dd></div>
|
||||
<div><dt>Accept → next review</dt><dd>{displayMs(liveCodexWorkerResult.earlyAcceptVerified.acceptToNextFirstVariantMs)}</dd></div>
|
||||
<div><dt>Live returns</dt><dd>{displayMs(liveCodexWorkerResult.prewarmReturnMs)}</dd></div>
|
||||
<div><dt>Worker ready</dt><dd>{displayMs(liveCodexWorkerResult.coldWorkerReadyMs)}</dd></div>
|
||||
<div><dt>Rendered gate</dt><dd>{liveCodexWorkerResult.renderedQuality.passed}/{liveCodexWorkerResult.renderedQuality.variants}</dd></div>
|
||||
</dl>
|
||||
<p>Every source variant now arrives through an immutable fenced delta. Early Accept is source-verified and the next review is 60.6% faster; consistent 3/3 rendered quality remains the next gate.</p>
|
||||
</section>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
import { initLivePerformance } from '../../scripts/live-performance.js';
|
||||
import { initLiveLabWorkbench } from '../../scripts/live-lab-workbench.js';
|
||||
initLivePerformance();
|
||||
initLiveLabWorkbench();
|
||||
</script>
|
||||
</Base>
|
||||
@@ -1,3 +0,0 @@
|
||||
---
|
||||
return Astro.redirect('/live-mode', 301);
|
||||
---
|
||||
+147
-18
@@ -1,12 +1,88 @@
|
||||
---
|
||||
import Base from '../../layouts/Base.astro';
|
||||
import SlopRuleCard from '../../components/SlopRuleCard.astro';
|
||||
import '../../styles/sub-pages.css';
|
||||
import '../../styles/slop-kinpaku.css';
|
||||
import { ANTIPATTERNS } from '../../../cli/engine/registry/antipatterns.mjs';
|
||||
|
||||
const CRITIQUE_ONLY_COUNT = 5;
|
||||
const DETECTOR_RULE_COUNT = ANTIPATTERNS.length;
|
||||
const TOTAL_PATTERN_COUNT = DETECTOR_RULE_COUNT + CRITIQUE_ONLY_COUNT;
|
||||
const GATED_RULE_COUNT = ANTIPATTERNS.filter((rule) => rule.gated).length;
|
||||
const CATALOG_RULE_IDS = {
|
||||
designSystem: ['design-system-font', 'design-system-color', 'design-system-radius', 'design-system-font-size'],
|
||||
visualDetails: ['codex-grid-background'],
|
||||
colorContrast: ['radial-halo'],
|
||||
layoutSpace: ['numbered-section-labels', 'edge-flush-cards', 'text-occlusion', 'first-viewport-column-overflow', 'heading-rhythm'],
|
||||
motion: ['pulsing-dot', 'blinking-cursor', 'marquee'],
|
||||
copy: ['repeated-container-text'],
|
||||
imagery: ['shape-assembled-illustration'],
|
||||
generalQuality: ['script-error', 'content-hidden-at-rest'],
|
||||
};
|
||||
|
||||
const CATALOG_RULE_LAYERS = {
|
||||
'blinking-cursor': 'browser',
|
||||
'script-error': 'browser',
|
||||
'content-hidden-at-rest': 'browser',
|
||||
'edge-flush-cards': 'browser',
|
||||
'text-occlusion': 'browser',
|
||||
'first-viewport-column-overflow': 'browser',
|
||||
'heading-rhythm': 'browser',
|
||||
};
|
||||
|
||||
const CATALOG_RULE_VISUALS = {
|
||||
'pulsing-dot': `<div class="catalog-rule-demo catalog-rule-demo--center"><span style="width:12px;height:12px;border-radius:50%;background:#20a37a;box-shadow:0 0 0 7px rgba(32,163,122,.14),0 0 0 14px rgba(32,163,122,.06)"></span><span style="font:600 12px system-ui;color:#222">Systems operational</span></div>`,
|
||||
'blinking-cursor': `<div class="catalog-rule-demo catalog-rule-demo--terminal"><span>> Building the future</span><b style="display:inline-block;width:8px;height:18px;background:#d4a72c;margin-left:4px"></b></div>`,
|
||||
'shape-assembled-illustration': `<div class="catalog-rule-demo catalog-rule-demo--center"><svg width="150" height="86" viewBox="0 0 150 86" fill="none"><rect x="20" y="38" width="52" height="34" rx="8" fill="#eadfce"/><circle cx="46" cy="32" r="19" fill="#d4a72c"/><path d="M77 71c8-28 23-42 46-42v42H77Z" fill="#5c9b8f"/><circle cx="113" cy="20" r="8" fill="#222"/></svg></div>`,
|
||||
'radial-halo': `<div class="catalog-rule-demo" style="background:radial-gradient(circle at 50% 45%,rgba(130,92,246,.62),rgba(130,92,246,0) 58%),#101014;color:#fff;display:grid;place-items:center;font:600 16px system-ui">Ambient glow</div>`,
|
||||
'marquee': `<div class="catalog-rule-demo catalog-rule-demo--marquee"><span>NORTHWIND HALCYON MERIDIAN FIELDNOTE NORTHWIND</span></div>`,
|
||||
'numbered-section-labels': `<div class="catalog-rule-demo catalog-rule-demo--numbers"><span><i>01</i>Discover</span><span><i>02</i>Design</span><span><i>03</i>Deliver</span></div>`,
|
||||
'script-error': `<div class="catalog-rule-demo catalog-rule-demo--console"><span>Uncaught TypeError</span><small>Cannot read properties of null</small><code>app.js:42:17</code></div>`,
|
||||
'content-hidden-at-rest': `<div class="catalog-rule-demo catalog-rule-demo--hidden"><strong>Visible heading</strong><span>Most of this page never leaves opacity: 0.</span><span>Reveal handler did not run.</span></div>`,
|
||||
'edge-flush-cards': `<div class="catalog-rule-demo catalog-rule-demo--scroller"><span></span><span></span><span></span></div>`,
|
||||
'text-occlusion': `<div class="catalog-rule-demo catalog-rule-demo--occlusion"><strong>Words should stay readable.</strong><span></span></div>`,
|
||||
'first-viewport-column-overflow': `<div class="catalog-rule-demo catalog-rule-demo--columns"><span></span><span></span></div>`,
|
||||
'heading-rhythm': `<div class="catalog-rule-demo catalog-rule-demo--rhythm"><p></p><h4>New section</h4><span></span><span></span></div>`,
|
||||
'repeated-container-text': `<div class="catalog-rule-demo catalog-rule-demo--repeat"><strong>Ready</strong><span>Ready</span><button>Ready</button></div>`,
|
||||
'design-system-font': `<div class="catalog-rule-demo catalog-rule-demo--token"><span>Typography</span><strong style="font-family:Georgia,serif">Aa</strong><code>Comic Sans MS</code><i>outside DESIGN.md</i></div>`,
|
||||
'design-system-color': `<div class="catalog-rule-demo catalog-rule-demo--swatches"><span style="background:#d4a72c"></span><span style="background:#5c9b8f"></span><span class="is-outlier" style="background:#b026ff"></span></div>`,
|
||||
'design-system-radius': `<div class="catalog-rule-demo catalog-rule-demo--radius"><span style="border-radius:4px">4</span><span style="border-radius:8px">8</span><span class="is-outlier" style="border-radius:28px">28</span></div>`,
|
||||
'design-system-font-size': `<div class="catalog-rule-demo catalog-rule-demo--scale"><span>14</span><span>16</span><span>24</span><b>19</b></div>`,
|
||||
'codex-grid-background': `<div class="catalog-rule-demo" style="background-image:linear-gradient(rgba(70,80,90,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(70,80,90,.16) 1px,transparent 1px);background-size:18px 18px;display:grid;place-items:center"><span style="background:#fff;border:1px solid #ddd;padding:9px 14px;font:600 12px system-ui;color:#222">Decorative grid</span></div>`,
|
||||
};
|
||||
|
||||
const CATALOG_RULE_COPY = {
|
||||
'pulsing-dot': 'A decorative pulse makes static status look live. Animate only when the data is changing.',
|
||||
'blinking-cursor': 'A fake caret makes non-editable hero copy look like a terminal. Let real inputs own the cursor.',
|
||||
'shape-assembled-illustration': 'Hero art assembled from generic SVG shapes reads like placeholder clip art. Use real illustration, photography, or a purposeful graphic.',
|
||||
'radial-halo': 'A saturated radial glow on a dark page is a familiar generated-UI shortcut. Use a deliberate surface instead.',
|
||||
'marquee': 'Continuous auto-scroll demands attention and hides content. Let people read at their own pace.',
|
||||
'numbered-section-labels': 'Tiny numbers repeated beside headings imitate editorial structure without adding it. Let hierarchy and rhythm sequence the page.',
|
||||
'script-error': 'An uncaught load error can break interactions and hide content. Fix it before judging the interface.',
|
||||
'content-hidden-at-rest': 'Reveal code left much of the page invisible. Ship content visible, then enhance its entrance.',
|
||||
'edge-flush-cards': 'Scroller cards lose one edge because the panel has no matching inset. Keep both gutters consistent.',
|
||||
'text-occlusion': 'An opaque layer covers readable text. Move the layer or give the text clear space.',
|
||||
'first-viewport-column-overflow': 'One opening column runs far past its neighbor, leaving dead space. Balance the columns or continue below the row.',
|
||||
'heading-rhythm': 'A heading sits closer to the previous block than its own content. Give it more space above than below.',
|
||||
'repeated-container-text': 'The same label appears in several slots of one card. Keep it once, where it matters.',
|
||||
'design-system-font': 'A font falls outside the documented type system. Use an approved face or update DESIGN.md.',
|
||||
'design-system-color': 'A literal color falls outside the documented palette. Use a token or make the addition intentional.',
|
||||
'design-system-radius': 'A corner radius falls outside the documented shape scale. Use a token or update the system.',
|
||||
'design-system-font-size': 'A font size falls between documented type steps. Use the scale or add a deliberate new step.',
|
||||
'codex-grid-background': 'A decorative grid covers a surface without supporting a canvas, map, or measurement task. Use product structure or a plain field.',
|
||||
};
|
||||
|
||||
const catalogRules = Object.fromEntries(
|
||||
Object.entries(CATALOG_RULE_IDS).map(([section, ids]) => [
|
||||
section,
|
||||
ids.map((id) => ANTIPATTERNS.find((rule) => rule.id === id)).filter(Boolean),
|
||||
]),
|
||||
);
|
||||
---
|
||||
|
||||
<Base
|
||||
title="Slop | Impeccable"
|
||||
description="46 patterns that mark an interface as AI-generated, plus the live detection overlay that catches them in place. The rule catalog behind npx impeccable detect, the browser extension, and /impeccable critique."
|
||||
description={`${TOTAL_PATTERN_COUNT} patterns that mark an interface as AI-generated or poorly built, including all ${DETECTOR_RULE_COUNT} deterministic detector rules.`}
|
||||
activeNav="slop"
|
||||
canonicalPath="/slop"
|
||||
bodyClass="sub-page skills-layout-page slop-page slop-kinpaku kinpaku-chrome"
|
||||
@@ -26,16 +102,17 @@ import '../../styles/slop-kinpaku.css';
|
||||
<li><a href="#see-it"><span>See it</span></a></li>
|
||||
<li><a href="#try-it-live"><span>Try it live</span><span class="anti-patterns-sidebar-count">11</span></a></li>
|
||||
<li>
|
||||
<a href="#catalog"><span>The catalog</span><span class="anti-patterns-sidebar-count">46</span></a>
|
||||
<a href="#catalog"><span>The catalog</span><span class="anti-patterns-sidebar-count">{TOTAL_PATTERN_COUNT}</span></a>
|
||||
<ul class="slop-sidebar-sublist">
|
||||
<li><a href="#section-visual-details"><span>Visual Details</span><span class="anti-patterns-sidebar-count">7</span></a></li>
|
||||
<li><a href="#section-design-system"><span>Your design system</span><span class="anti-patterns-sidebar-count">4</span></a></li>
|
||||
<li><a href="#section-visual-details"><span>Visual Details</span><span class="anti-patterns-sidebar-count">8</span></a></li>
|
||||
<li><a href="#section-typography"><span>Typography</span><span class="anti-patterns-sidebar-count">10</span></a></li>
|
||||
<li><a href="#section-color-contrast"><span>Color & Contrast</span><span class="anti-patterns-sidebar-count">5</span></a></li>
|
||||
<li><a href="#section-layout-space"><span>Layout & Space</span><span class="anti-patterns-sidebar-count">8</span></a></li>
|
||||
<li><a href="#section-motion"><span>Motion</span><span class="anti-patterns-sidebar-count">3</span></a></li>
|
||||
<li><a href="#section-copy"><span>Copy</span><span class="anti-patterns-sidebar-count">4</span></a></li>
|
||||
<li><a href="#section-imagery"><span>Imagery</span><span class="anti-patterns-sidebar-count">1</span></a></li>
|
||||
<li><a href="#section-general-quality"><span>General quality</span><span class="anti-patterns-sidebar-count">8</span></a></li>
|
||||
<li><a href="#section-color-contrast"><span>Color & Contrast</span><span class="anti-patterns-sidebar-count">6</span></a></li>
|
||||
<li><a href="#section-layout-space"><span>Layout & Space</span><span class="anti-patterns-sidebar-count">13</span></a></li>
|
||||
<li><a href="#section-motion"><span>Motion</span><span class="anti-patterns-sidebar-count">6</span></a></li>
|
||||
<li><a href="#section-copy"><span>Copy</span><span class="anti-patterns-sidebar-count">5</span></a></li>
|
||||
<li><a href="#section-imagery"><span>Imagery</span><span class="anti-patterns-sidebar-count">2</span></a></li>
|
||||
<li><a href="#section-general-quality"><span>General quality</span><span class="anti-patterns-sidebar-count">10</span></a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#run-it"><span>Run it yourself</span></a></li>
|
||||
@@ -48,7 +125,7 @@ import '../../styles/slop-kinpaku.css';
|
||||
<div class="anti-patterns-content slop-content">
|
||||
<header class="anti-patterns-header slop-header">
|
||||
<h1 class="sub-page-title">Slop</h1>
|
||||
<p class="sub-page-lede">46 patterns that mark an interface as AI-generated, and the detection overlay that catches them in place. Watch it flag them live, try it on 11 synthetic specimens, or browse the full catalog. 41 rules run deterministically (<code>npx impeccable detect</code> or the browser extension), 4 of them opt-in provider tells behind <code>--gpt</code> / <code>--gemini</code>; 5 need <a href="/docs/critique">/impeccable critique</a>'s LLM review pass.</p>
|
||||
<p class="sub-page-lede">{TOTAL_PATTERN_COUNT} patterns that expose AI defaults and production defects. Watch the overlay, try it on 11 synthetic specimens, or browse the catalog. The detector now covers {DETECTOR_RULE_COUNT} rules across source and rendered pages; {GATED_RULE_COUNT} provider-specific tells are opt-in. Five broader judgments remain in <a href="/docs/critique">/impeccable critique</a>.</p>
|
||||
</header>
|
||||
|
||||
<section class="slop-section slop-then-now" id="see-it" aria-label="Detection overlay demo">
|
||||
@@ -65,7 +142,7 @@ import '../../styles/slop-kinpaku.css';
|
||||
<span class="visual-mode-preview-dot red"></span>
|
||||
<span class="visual-mode-preview-dot yellow"></span>
|
||||
<span class="visual-mode-preview-dot green"></span>
|
||||
<span class="visual-mode-preview-title" data-title-2022="Purple gradients, glassmorphism, neon glow" data-title-2026="Fraunces, warm cream, editorial restraint">Purple gradients, glassmorphism, neon glow</span>
|
||||
<span class="visual-mode-preview-title" data-title-2022="Purple gradients, glassmorphism, neon glow" data-title-2026="AI beige, editorial scaffolding, decorative motion">Purple gradients, glassmorphism, neon glow</span>
|
||||
</div>
|
||||
<iframe src="/antipattern-examples/old-slop-2022.html" class="visual-mode-frame slop-era-frame" data-era="2022" loading="lazy" title="Impeccable overlay on 2022-era AI slop"></iframe>
|
||||
<iframe src="/antipattern-examples/new-slop-2026.html" class="visual-mode-frame slop-era-frame" data-era="2026" loading="lazy" title="Impeccable overlay on 2026-era AI slop" style="display:none"></iframe>
|
||||
@@ -216,13 +293,41 @@ import '../../styles/slop-kinpaku.css';
|
||||
|
||||
<div class="anti-patterns-sections">
|
||||
|
||||
<section class="anti-patterns-section anti-patterns-section--personalized" id="section-design-system">
|
||||
<header class="anti-patterns-section-header">
|
||||
<div>
|
||||
<h3 class="anti-patterns-section-title">Your design system</h3>
|
||||
<p class="anti-patterns-section-lede">With a DESIGN.md in your project, Impeccable catches visual choices that drift from your own fonts, colors, type scale, and corner radii. <a href="/detector">See how personalized detection works.</a></p>
|
||||
</div>
|
||||
<p class="anti-patterns-section-count">4 rules</p>
|
||||
</header>
|
||||
<div class="rule-card-grid">
|
||||
{catalogRules.designSystem.map((rule) => (
|
||||
<SlopRuleCard
|
||||
rule={rule}
|
||||
visual={CATALOG_RULE_VISUALS[rule.id]}
|
||||
layer={CATALOG_RULE_LAYERS[rule.id] || 'cli'}
|
||||
description={CATALOG_RULE_COPY[rule.id]}
|
||||
category="personalized"
|
||||
categoryLabel="Personalized"
|
||||
skillHref="/detector"
|
||||
linkLabel="Inspect the detector"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="anti-patterns-section" id="section-visual-details">
|
||||
<header class="anti-patterns-section-header">
|
||||
<h3 class="anti-patterns-section-title">Visual Details</h3>
|
||||
<p class="anti-patterns-section-count">7 rules</p>
|
||||
<p class="anti-patterns-section-count">8 rules</p>
|
||||
</header>
|
||||
<div class="rule-card-grid">
|
||||
|
||||
{catalogRules.visualDetails.map((rule) => (
|
||||
<SlopRuleCard rule={rule} visual={CATALOG_RULE_VISUALS[rule.id]} layer={CATALOG_RULE_LAYERS[rule.id] || 'cli'} description={CATALOG_RULE_COPY[rule.id]} />
|
||||
))}
|
||||
|
||||
<article class="rule-card" id="rule-border-accent-on-rounded" data-layer="cli">
|
||||
<div class="rule-card-visual" aria-hidden="true"><div class="rule-card-visual-inner"><div style="background: #fff; border: 2px solid oklch(60% 0.22 290); border-radius: 16px; padding: 14px 18px; width: 220px; font-family: system-ui, sans-serif; font-size: 13px; color: #111;"><div style="font-weight: 600;">Rounded card</div><div style="color: #666; font-size: 12px;">Thick colored border clashes with the radius.</div></div></div></div>
|
||||
<div class="rule-card-body">
|
||||
@@ -458,10 +563,14 @@ import '../../styles/slop-kinpaku.css';
|
||||
<section class="anti-patterns-section" id="section-color-contrast">
|
||||
<header class="anti-patterns-section-header">
|
||||
<h3 class="anti-patterns-section-title">Color & Contrast</h3>
|
||||
<p class="anti-patterns-section-count">5 rules</p>
|
||||
<p class="anti-patterns-section-count">6 rules</p>
|
||||
</header>
|
||||
<div class="rule-card-grid">
|
||||
|
||||
{catalogRules.colorContrast.map((rule) => (
|
||||
<SlopRuleCard rule={rule} visual={CATALOG_RULE_VISUALS[rule.id]} layer={CATALOG_RULE_LAYERS[rule.id] || 'cli'} description={CATALOG_RULE_COPY[rule.id]} />
|
||||
))}
|
||||
|
||||
<article class="rule-card" id="rule-ai-color-palette" data-layer="cli">
|
||||
<div class="rule-card-visual" aria-hidden="true"><div class="rule-card-visual-inner"><div style="display: flex; gap: 6px;"><div style="width: 44px; height: 44px; border-radius: 6px; background: oklch(60% 0.22 265);"></div><div style="width: 44px; height: 44px; border-radius: 6px; background: oklch(62% 0.25 300);"></div><div style="width: 44px; height: 44px; border-radius: 6px; background: oklch(64% 0.25 340);"></div><div style="width: 44px; height: 44px; border-radius: 6px; background: oklch(70% 0.20 200);"></div></div></div></div>
|
||||
<div class="rule-card-body">
|
||||
@@ -532,10 +641,14 @@ import '../../styles/slop-kinpaku.css';
|
||||
<section class="anti-patterns-section" id="section-layout-space">
|
||||
<header class="anti-patterns-section-header">
|
||||
<h3 class="anti-patterns-section-title">Layout & Space</h3>
|
||||
<p class="anti-patterns-section-count">8 rules</p>
|
||||
<p class="anti-patterns-section-count">13 rules</p>
|
||||
</header>
|
||||
<div class="rule-card-grid">
|
||||
|
||||
{catalogRules.layoutSpace.map((rule) => (
|
||||
<SlopRuleCard rule={rule} visual={CATALOG_RULE_VISUALS[rule.id]} layer={CATALOG_RULE_LAYERS[rule.id] || 'cli'} description={CATALOG_RULE_COPY[rule.id]} />
|
||||
))}
|
||||
|
||||
<article class="rule-card" id="rule-hero-metric-layout" data-layer="llm">
|
||||
<div class="rule-card-visual" aria-hidden="true"><div class="rule-card-visual-inner"><div style="font-family: system-ui, sans-serif; text-align: left;"><div style="font-size: 42px; font-weight: 800; background: linear-gradient(135deg, oklch(65% 0.25 265), oklch(65% 0.25 340)); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1;">10M+</div><div style="font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 2px;">Active users</div><div style="display: flex; gap: 14px; margin-top: 10px; font-size: 10px; color: #555;"><span><strong>99.9%</strong> uptime</span><span><strong>200ms</strong> p50</span></div></div></div></div>
|
||||
<div class="rule-card-body">
|
||||
@@ -644,10 +757,14 @@ import '../../styles/slop-kinpaku.css';
|
||||
<section class="anti-patterns-section" id="section-motion">
|
||||
<header class="anti-patterns-section-header">
|
||||
<h3 class="anti-patterns-section-title">Motion</h3>
|
||||
<p class="anti-patterns-section-count">3 rules</p>
|
||||
<p class="anti-patterns-section-count">6 rules</p>
|
||||
</header>
|
||||
<div class="rule-card-grid">
|
||||
|
||||
{catalogRules.motion.map((rule) => (
|
||||
<SlopRuleCard rule={rule} visual={CATALOG_RULE_VISUALS[rule.id]} layer={CATALOG_RULE_LAYERS[rule.id] || 'cli'} description={CATALOG_RULE_COPY[rule.id]} />
|
||||
))}
|
||||
|
||||
<article class="rule-card" id="rule-bounce-easing" data-layer="cli">
|
||||
<div class="rule-card-visual" aria-hidden="true"><div class="rule-card-visual-inner"><div style="font-family: system-ui, sans-serif; display: flex; flex-direction: column; align-items: center; gap: 8px;"><div style="background: #fff; border: 1px solid #d8d4cc; border-radius: 8px; padding: 11px 16px; box-shadow: 0 10px 26px rgba(0,0,0,0.14); font-size: 12px; font-weight: 600; color: #111; animation: elasticpop 1.8s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;">Confirm action</div><div style="font-size: 11px; color: #888;">A dialog that springs in with overshoot.</div><style>@keyframes elasticpop { 0% { transform: scale(0.4); opacity: 0; } 45% { transform: scale(1.12); opacity: 1; } 65% { transform: scale(0.96); } 82%,100% { transform: scale(1); opacity: 1; } }</style></div></div></div>
|
||||
<div class="rule-card-body">
|
||||
@@ -692,10 +809,14 @@ import '../../styles/slop-kinpaku.css';
|
||||
<section class="anti-patterns-section" id="section-copy">
|
||||
<header class="anti-patterns-section-header">
|
||||
<h3 class="anti-patterns-section-title">Copy</h3>
|
||||
<p class="anti-patterns-section-count">4 rules</p>
|
||||
<p class="anti-patterns-section-count">5 rules</p>
|
||||
</header>
|
||||
<div class="rule-card-grid">
|
||||
|
||||
{catalogRules.copy.map((rule) => (
|
||||
<SlopRuleCard rule={rule} visual={CATALOG_RULE_VISUALS[rule.id]} layer={CATALOG_RULE_LAYERS[rule.id] || 'cli'} description={CATALOG_RULE_COPY[rule.id]} />
|
||||
))}
|
||||
|
||||
<article class="rule-card" id="rule-em-dash-overuse" data-layer="cli">
|
||||
<div class="rule-card-visual" aria-hidden="true"><div class="rule-card-visual-inner"><div style="font-family: Georgia, serif; font-size: 13px; color: #111; line-height: 1.6; max-width: 230px;">It works <span style="color: oklch(58% 0.15 35);">—</span> really well <span style="color: oklch(58% 0.15 35);">—</span> for teams <span style="color: oklch(58% 0.15 35);">—</span> of any size <span style="color: oklch(58% 0.15 35);">—</span> anywhere.</div></div></div>
|
||||
<div class="rule-card-body">
|
||||
@@ -753,10 +874,14 @@ import '../../styles/slop-kinpaku.css';
|
||||
<section class="anti-patterns-section" id="section-imagery">
|
||||
<header class="anti-patterns-section-header">
|
||||
<h3 class="anti-patterns-section-title">Imagery</h3>
|
||||
<p class="anti-patterns-section-count">1 rule</p>
|
||||
<p class="anti-patterns-section-count">2 rules</p>
|
||||
</header>
|
||||
<div class="rule-card-grid">
|
||||
|
||||
{catalogRules.imagery.map((rule) => (
|
||||
<SlopRuleCard rule={rule} visual={CATALOG_RULE_VISUALS[rule.id]} layer={CATALOG_RULE_LAYERS[rule.id] || 'cli'} description={CATALOG_RULE_COPY[rule.id]} />
|
||||
))}
|
||||
|
||||
<article class="rule-card" id="rule-broken-image" data-layer="cli">
|
||||
<div class="rule-card-visual" aria-hidden="true"><div class="rule-card-visual-inner"><div style="font-family: system-ui, sans-serif;"><div style="width: 120px; height: 80px; border: 1px solid #d8d4cc; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: #f5f3ef; color: #b3ada3;"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 16l5-5 4 4 3-3 6 6"/><path d="M3 21L21 3"/></svg></div><div style="font-size: 10px; color: #888; margin-top: 6px;">Empty or missing src ships broken.</div></div></div></div>
|
||||
<div class="rule-card-body">
|
||||
@@ -774,10 +899,14 @@ import '../../styles/slop-kinpaku.css';
|
||||
<section class="anti-patterns-section" id="section-general-quality">
|
||||
<header class="anti-patterns-section-header">
|
||||
<h3 class="anti-patterns-section-title">General quality</h3>
|
||||
<p class="anti-patterns-section-count">8 rules</p>
|
||||
<p class="anti-patterns-section-count">10 rules</p>
|
||||
</header>
|
||||
<div class="rule-card-grid">
|
||||
|
||||
{catalogRules.generalQuality.map((rule) => (
|
||||
<SlopRuleCard rule={rule} visual={CATALOG_RULE_VISUALS[rule.id]} layer={CATALOG_RULE_LAYERS[rule.id] || 'cli'} description={CATALOG_RULE_COPY[rule.id]} />
|
||||
))}
|
||||
|
||||
<article class="rule-card" id="rule-cramped-padding" data-layer="browser">
|
||||
<div class="rule-card-visual" aria-hidden="true"><div class="rule-card-visual-inner"><div style="font-family: system-ui, sans-serif;"><button style="background: #111; color: #fff; border: none; border-radius: 4px; padding: 2px 6px; font-size: 13px; font-weight: 500;">Buy now</button> <span style="color: #555; font-size: 12px; margin-left: 8px;">2px vertical padding.</span></div></div></div>
|
||||
<div class="rule-card-body">
|
||||
|
||||
@@ -51,6 +51,7 @@
|
||||
display: inline-block; width: 8px; height: 8px;
|
||||
background: var(--accent); border-radius: 50%;
|
||||
margin-right: 8px; vertical-align: middle;
|
||||
animation: pulse-status 1.8s ease-in-out infinite;
|
||||
}
|
||||
.nav-links { display: flex; gap: 28px; font-size: 14px; }
|
||||
.nav-links a { color: var(--soft); text-decoration: none; }
|
||||
@@ -64,7 +65,12 @@
|
||||
|
||||
/* Hero */
|
||||
.hero {
|
||||
background: linear-gradient(180deg, var(--cream) 0%, var(--peach) 100%);
|
||||
background-image:
|
||||
radial-gradient(circle at 50% 42%, rgba(200, 85, 43, 0.2), rgba(200, 85, 43, 0) 55%),
|
||||
linear-gradient(rgba(91, 79, 68, 0.08) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(91, 79, 68, 0.08) 1px, transparent 1px),
|
||||
linear-gradient(180deg, var(--cream) 0%, var(--peach) 100%);
|
||||
background-size: auto, 32px 32px, 32px 32px, auto;
|
||||
padding: 120px 32px 140px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
@@ -88,6 +94,22 @@
|
||||
margin: 0 auto 28px;
|
||||
}
|
||||
.h1 em { font-style: italic; color: var(--accent-deep); }
|
||||
.fake-cursor {
|
||||
display: inline-block;
|
||||
width: 9px;
|
||||
height: 0.82em;
|
||||
margin-left: 10px;
|
||||
background: var(--accent-deep);
|
||||
animation: blink-cursor 0.9s steps(2, end) infinite;
|
||||
}
|
||||
.section-number {
|
||||
display: block;
|
||||
margin-bottom: 12px;
|
||||
color: var(--accent-deep);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.18em;
|
||||
}
|
||||
.lede {
|
||||
font-size: 20px;
|
||||
color: var(--soft);
|
||||
@@ -123,6 +145,10 @@
|
||||
flex-wrap: wrap; gap: 32px;
|
||||
font-family: 'Fraunces', Georgia, serif;
|
||||
font-style: italic; font-size: 22px; color: var(--soft);
|
||||
width: max-content;
|
||||
max-width: none;
|
||||
flex-wrap: nowrap;
|
||||
animation: logo-marquee 12s linear infinite;
|
||||
}
|
||||
|
||||
/* Features */
|
||||
@@ -216,6 +242,20 @@
|
||||
border-top: 1px solid var(--line);
|
||||
background: var(--cream);
|
||||
}
|
||||
|
||||
@keyframes pulse-status {
|
||||
50% { opacity: 0.5; transform: scale(1.22); }
|
||||
}
|
||||
@keyframes blink-cursor {
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
@keyframes logo-marquee {
|
||||
to { transform: translateX(-35%); }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.logo-dot, .fake-cursor, .logos-inner { animation: none; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -242,8 +282,9 @@
|
||||
|
||||
|
||||
<section class="hero">
|
||||
<span class="section-number">01</span>
|
||||
<div class="eyebrow">AI-native workflows</div>
|
||||
<h1 class="h1">Build faster with <em>intelligent</em> workflows for modern teams</h1>
|
||||
<h1 class="h1">Build faster with <em>intelligent</em> workflows for modern teams<span class="fake-cursor" aria-hidden="true"></span></h1>
|
||||
<p class="lede">The all-in-one platform that helps product teams ship better software in record time. Powered by AI, designed for humans.</p>
|
||||
<div class="ctas">
|
||||
<a href="#" class="btn btn-primary">Start free trial →</a>
|
||||
@@ -269,6 +310,7 @@
|
||||
|
||||
<section class="features">
|
||||
<div class="features-head">
|
||||
<span class="section-number">02</span>
|
||||
<h2>Everything you need to ship great products</h2>
|
||||
<p>One platform. Endless possibilities. Built for teams who care about craft.</p>
|
||||
</div>
|
||||
@@ -295,6 +337,7 @@
|
||||
|
||||
|
||||
<section class="cta-section">
|
||||
<span class="section-number">03</span>
|
||||
<h2>Ready to transform how your team builds?</h2>
|
||||
<p>Join thousands of teams already shipping faster with Lumina.</p>
|
||||
<a href="#" class="btn btn-primary">Start your free trial →</a>
|
||||
|
||||
+120
-1
@@ -246,14 +246,26 @@ function initHeroProof() {
|
||||
const tabs = Array.from(root.querySelectorAll("[data-proof-tab]"));
|
||||
const panels = Array.from(root.querySelectorAll("[data-proof-panel]"));
|
||||
const result = root.querySelector("[data-hero-proof-result]");
|
||||
const positionUpdates = new Map();
|
||||
if (!tabs.length || !panels.length) return;
|
||||
|
||||
panels.forEach((panel) => {
|
||||
const range = panel.querySelector("[data-proof-range]");
|
||||
if (!range) return;
|
||||
const updatePosition = () => {
|
||||
panel.style.setProperty("--proof-position", `${range.value}%`);
|
||||
const position = Number(range.value);
|
||||
panel.style.setProperty("--proof-position", `${position}%`);
|
||||
if (panel.hidden) return;
|
||||
|
||||
const panelRect = panel.getBoundingClientRect();
|
||||
const seamX = panelRect.left + panelRect.width * position / 100;
|
||||
panel.querySelectorAll(".hero-proof-layer--before .proof-annotation").forEach((annotation) => {
|
||||
const target = annotation.parentElement;
|
||||
const targetX = target?.getBoundingClientRect().left ?? panelRect.left;
|
||||
annotation.classList.toggle("is-concealed", position <= 0 || targetX >= seamX);
|
||||
});
|
||||
};
|
||||
positionUpdates.set(panel, updatePosition);
|
||||
range.addEventListener("input", updatePosition);
|
||||
updatePosition();
|
||||
});
|
||||
@@ -274,10 +286,16 @@ function initHeroProof() {
|
||||
panel.classList.toggle("is-active", active);
|
||||
panel.hidden = !active;
|
||||
});
|
||||
positionUpdates.get(nextPanel)?.();
|
||||
if (result) result.textContent = nextPanel.dataset.summary || "Example updated";
|
||||
if (moveFocus) nextTab.focus();
|
||||
};
|
||||
|
||||
window.addEventListener("resize", () => {
|
||||
const activePanel = panels.find((panel) => !panel.hidden);
|
||||
if (activePanel) positionUpdates.get(activePanel)?.();
|
||||
}, { passive: true });
|
||||
|
||||
tabs.forEach((tab, index) => {
|
||||
tab.addEventListener("click", () => activate(index));
|
||||
tab.addEventListener("keydown", (event) => {
|
||||
@@ -306,6 +324,7 @@ function init() {
|
||||
initSectionNav();
|
||||
initWhyTabs();
|
||||
initLanguageTabs();
|
||||
initSteeringDesktop();
|
||||
initLiveDemo();
|
||||
initGbarPageChat();
|
||||
loadContent();
|
||||
@@ -313,6 +332,106 @@ function init() {
|
||||
document.body.classList.add("loaded");
|
||||
}
|
||||
|
||||
function initSteeringDesktop() {
|
||||
const desktop = document.querySelector('[data-steering-desktop]');
|
||||
if (!desktop) return;
|
||||
|
||||
const mobileTabs = Array.from(desktop.querySelectorAll('[data-steering-mobile-tab]'));
|
||||
const commandButtons = Array.from(desktop.querySelectorAll('[data-steering-command]'));
|
||||
const activeCommands = Array.from(desktop.querySelectorAll('[data-steering-active-command]'));
|
||||
const agentCopy = desktop.querySelector('[data-steering-agent-copy]');
|
||||
const agentThread = desktop.querySelector('[data-steering-thread]');
|
||||
const agentPane = desktop.querySelector('[data-steering-pane="agent"]');
|
||||
const browserPane = desktop.querySelector('[data-steering-pane="browser"]');
|
||||
const liveDemo = desktop.querySelector('.language-live-demo');
|
||||
const polishScene = desktop.querySelector('[data-steering-thread-scene="polish"]');
|
||||
const liveScene = desktop.querySelector('[data-steering-thread-scene="live"]');
|
||||
const composerCommand = desktop.querySelector('[data-steering-composer-command]');
|
||||
const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
|
||||
const mobileLayout = window.matchMedia('(max-width: 760px)');
|
||||
|
||||
const selectedCommand = () => commandButtons.find((button) => button.classList.contains('is-active'))?.dataset.steeringCommand || 'polish';
|
||||
const setBrowserUiQuiet = (quiet) => {
|
||||
desktop.dataset.steeringBrowserUi = quiet ? 'quiet' : 'live';
|
||||
if (!liveDemo) return;
|
||||
liveDemo.toggleAttribute('inert', quiet);
|
||||
if (quiet) liveDemo.setAttribute('aria-hidden', 'true');
|
||||
else liveDemo.removeAttribute('aria-hidden');
|
||||
liveDemo.dispatchEvent(new CustomEvent('steering-demo-quiet', { detail: { quiet } }));
|
||||
};
|
||||
const showThreadScene = (scene) => {
|
||||
if (!agentThread || !polishScene || !liveScene) return;
|
||||
const target = scene === 'live' ? liveScene : polishScene;
|
||||
agentThread.scrollTo({
|
||||
top: Math.max(0, target.offsetTop - polishScene.offsetTop),
|
||||
behavior: reducedMotion.matches ? 'auto' : 'smooth',
|
||||
});
|
||||
if (composerCommand) composerCommand.textContent = scene === 'live' ? 'live' : selectedCommand();
|
||||
};
|
||||
|
||||
mobileTabs.forEach((tab) => {
|
||||
tab.addEventListener('click', () => {
|
||||
const pane = tab.dataset.steeringMobileTab;
|
||||
desktop.dataset.mobilePane = pane;
|
||||
showThreadScene(pane === 'browser' ? 'live' : 'polish');
|
||||
setBrowserUiQuiet(pane === 'agent');
|
||||
mobileTabs.forEach((item) => {
|
||||
const selected = item === tab;
|
||||
item.classList.toggle('is-active', selected);
|
||||
item.setAttribute('aria-selected', selected ? 'true' : 'false');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
if (agentPane) {
|
||||
agentPane.addEventListener('pointerenter', () => {
|
||||
if (!mobileLayout.matches) setBrowserUiQuiet(true);
|
||||
});
|
||||
agentPane.addEventListener('pointerleave', () => {
|
||||
if (!mobileLayout.matches) setBrowserUiQuiet(false);
|
||||
});
|
||||
agentPane.addEventListener('focusin', () => setBrowserUiQuiet(true));
|
||||
agentPane.addEventListener('focusout', (event) => {
|
||||
if (!agentPane.contains(event.relatedTarget)) setBrowserUiQuiet(false);
|
||||
});
|
||||
}
|
||||
|
||||
if (browserPane) {
|
||||
browserPane.addEventListener('pointerenter', () => {
|
||||
if (mobileLayout.matches) return;
|
||||
setBrowserUiQuiet(false);
|
||||
showThreadScene('live');
|
||||
});
|
||||
browserPane.addEventListener('pointerleave', () => {
|
||||
if (!mobileLayout.matches) showThreadScene('polish');
|
||||
});
|
||||
browserPane.addEventListener('focusin', () => {
|
||||
setBrowserUiQuiet(false);
|
||||
showThreadScene('live');
|
||||
});
|
||||
browserPane.addEventListener('focusout', (event) => {
|
||||
if (!browserPane.contains(event.relatedTarget)) showThreadScene('polish');
|
||||
});
|
||||
}
|
||||
|
||||
if (mobileLayout.matches && desktop.dataset.mobilePane === 'agent') {
|
||||
setBrowserUiQuiet(true);
|
||||
}
|
||||
|
||||
commandButtons.forEach((button) => {
|
||||
button.addEventListener('click', () => {
|
||||
const command = button.dataset.steeringCommand;
|
||||
commandButtons.forEach((item) => {
|
||||
const selected = item === button;
|
||||
item.classList.toggle('is-active', selected);
|
||||
item.setAttribute('aria-pressed', selected ? 'true' : 'false');
|
||||
});
|
||||
activeCommands.forEach((item) => { item.textContent = command; });
|
||||
if (agentCopy && button.dataset.agentCopy) agentCopy.textContent = button.dataset.agentCopy;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function initLanguageTabs() {
|
||||
const toggle = document.querySelector('.language-view-toggle');
|
||||
if (!toggle) return;
|
||||
|
||||
@@ -182,12 +182,13 @@ export function initLiveDemo() {
|
||||
if (text && captionLabel) captionLabel.textContent = text;
|
||||
};
|
||||
|
||||
const typeInto = (el, text, duration) => new Promise((resolve) => {
|
||||
const typeInto = (el, text, duration, token) => new Promise((resolve) => {
|
||||
if (!el) return resolve();
|
||||
el.textContent = '';
|
||||
const per = Math.max(30, Math.floor(duration / text.length));
|
||||
let i = 0;
|
||||
const tick = () => {
|
||||
if (token !== cancelToken) return resolve();
|
||||
if (i >= text.length) return resolve();
|
||||
el.textContent += text[i++];
|
||||
setTimeout(tick, per);
|
||||
@@ -195,7 +196,7 @@ export function initLiveDemo() {
|
||||
tick();
|
||||
});
|
||||
|
||||
const step = async (s) => {
|
||||
const step = async (s, token) => {
|
||||
switch (s.action) {
|
||||
case 'cursor-show':
|
||||
moveCursor(target, -120, 40);
|
||||
@@ -255,7 +256,7 @@ export function initLiveDemo() {
|
||||
break;
|
||||
case 'type-note':
|
||||
annotations.classList.add('is-note-visible');
|
||||
await typeInto(noteText, s.text, 800);
|
||||
await typeInto(noteText, s.text, 800, token);
|
||||
break;
|
||||
case 'hold':
|
||||
break;
|
||||
@@ -290,19 +291,27 @@ export function initLiveDemo() {
|
||||
|
||||
let running = false;
|
||||
let cancelToken = 0;
|
||||
let timelineIndex = 0;
|
||||
let hasStarted = false;
|
||||
let inView = false;
|
||||
let quiet = root.closest('[data-steering-desktop]')?.dataset.steeringBrowserUi === 'quiet';
|
||||
const sleep = (ms, token) => new Promise((resolve) => setTimeout(() => resolve(token === cancelToken), ms));
|
||||
|
||||
const run = async () => {
|
||||
if (running) return;
|
||||
if (running || quiet || !inView) return;
|
||||
running = true;
|
||||
const myToken = ++cancelToken;
|
||||
while (running && myToken === cancelToken) {
|
||||
if (!hasStarted) {
|
||||
reset();
|
||||
for (const s of timeline) {
|
||||
const stillMe = await sleep(s.dt, myToken);
|
||||
if (!stillMe || !running) return;
|
||||
await step(s);
|
||||
}
|
||||
hasStarted = true;
|
||||
}
|
||||
while (running && myToken === cancelToken) {
|
||||
const s = timeline[timelineIndex];
|
||||
const stillMe = await sleep(s.dt, myToken);
|
||||
if (!stillMe || !running) return;
|
||||
await step(s, myToken);
|
||||
if (myToken !== cancelToken || !running) return;
|
||||
timelineIndex = (timelineIndex + 1) % timeline.length;
|
||||
}
|
||||
};
|
||||
|
||||
@@ -322,9 +331,16 @@ export function initLiveDemo() {
|
||||
return;
|
||||
}
|
||||
|
||||
root.addEventListener('steering-demo-quiet', (event) => {
|
||||
quiet = event.detail?.quiet === true;
|
||||
if (quiet) stop();
|
||||
else if (inView) run();
|
||||
});
|
||||
|
||||
const io = new IntersectionObserver((entries) => {
|
||||
entries.forEach((e) => {
|
||||
if (e.isIntersecting) run();
|
||||
inView = e.isIntersecting;
|
||||
if (inView && !quiet) run();
|
||||
else stop();
|
||||
});
|
||||
}, { threshold: 0.35 });
|
||||
|
||||
@@ -1,70 +0,0 @@
|
||||
const VIEW_COPY = {
|
||||
overview: {
|
||||
title: 'Performance',
|
||||
summary: 'Where Live spends time before the first usable variant.',
|
||||
},
|
||||
providers: {
|
||||
title: 'Providers',
|
||||
summary: 'Compare generation speed, reliability, and delivery strategy.',
|
||||
},
|
||||
harness: {
|
||||
title: 'Harnesses',
|
||||
summary: 'Review worker architecture and the optimizations that survived testing.',
|
||||
},
|
||||
ui: {
|
||||
title: 'UI states',
|
||||
summary: 'Inspect every Live state on light and dark hosts.',
|
||||
},
|
||||
};
|
||||
|
||||
export function initLiveLabWorkbench(root = document) {
|
||||
const workbench = root.querySelector('[data-live-lab-workbench]');
|
||||
if (!workbench || workbench.dataset.initialized === 'true') return;
|
||||
workbench.dataset.initialized = 'true';
|
||||
|
||||
const buttons = [...workbench.querySelectorAll('[data-lab-view]')];
|
||||
const panels = [...workbench.querySelectorAll('[data-lab-panel]')];
|
||||
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');
|
||||
|
||||
const setView = (requested, { updateHash = true } = {}) => {
|
||||
const view = VIEW_COPY[requested] ? requested : 'overview';
|
||||
for (const button of buttons) {
|
||||
button.setAttribute('aria-pressed', String(button.dataset.labView === view));
|
||||
}
|
||||
for (const panel of panels) {
|
||||
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 (title) title.textContent = VIEW_COPY[view].title;
|
||||
if (summary) summary.textContent = VIEW_COPY[view].summary;
|
||||
if (scroller) scroller.scrollTop = 0;
|
||||
if (updateHash && window.location.hash !== `#${view}`) {
|
||||
window.history.replaceState(null, '', `#${view}`);
|
||||
}
|
||||
};
|
||||
|
||||
for (const button of buttons) {
|
||||
button.addEventListener('click', () => setView(button.dataset.labView));
|
||||
}
|
||||
|
||||
workbench.querySelector('[data-lab-reset]')?.addEventListener('click', () => {
|
||||
const slider = workbench.querySelector('[data-model-latency]');
|
||||
if (!(slider instanceof HTMLInputElement)) return;
|
||||
slider.value = '15000';
|
||||
slider.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
setView('overview');
|
||||
});
|
||||
|
||||
window.addEventListener('hashchange', () => setView(window.location.hash.slice(1), { updateHash: false }));
|
||||
setView(window.location.hash.slice(1) || 'overview', { updateHash: false });
|
||||
}
|
||||
@@ -1,31 +0,0 @@
|
||||
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();
|
||||
}
|
||||
|
||||
@@ -1,520 +0,0 @@
|
||||
/*
|
||||
* Dev-only Impeccable Live state gallery.
|
||||
*
|
||||
* This is a static state harness, not a second implementation of Live. It
|
||||
* mirrors the exact chrome vocabulary and state wording from:
|
||||
* skill/scripts/live-browser.js
|
||||
* skill/scripts/live/ui-core.mjs
|
||||
* Command labels/icons are injected by LiveUiGallery.astro from the canonical
|
||||
* skill/scripts/live/vocabulary.mjs export.
|
||||
*/
|
||||
|
||||
const ICONS = Object.freeze({
|
||||
pick: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="22" y1="12" x2="18" y2="12"/><line x1="6" y1="12" x2="2" y2="12"/><line x1="12" y1="6" x2="12" y2="2"/><line x1="12" y1="22" x2="12" y2="18"/></svg>',
|
||||
insert: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14"/><path d="M5 12h14"/></svg>',
|
||||
detect: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>',
|
||||
chat: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>',
|
||||
voice: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>',
|
||||
submit: '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>',
|
||||
tune: '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><line x1="4" y1="8" x2="20" y2="8"/><circle cx="14" cy="8" r="2.4" fill="currentColor" stroke="none"/><line x1="4" y1="16" x2="20" y2="16"/><circle cx="10" cy="16" r="2.4" fill="currentColor" stroke="none"/></svg>',
|
||||
edit: '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>',
|
||||
trash: '<svg width="12" height="12" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 4h8"/><path d="M5 4V3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v1"/><path d="M4 4l.5 7a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1L10 4"/></svg>',
|
||||
exit: '<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><line x1="3" y1="3" x2="11" y2="11"/><line x1="11" y1="3" x2="3" y2="11"/></svg>',
|
||||
});
|
||||
|
||||
function parseJson(root, selector, fallback = []) {
|
||||
try {
|
||||
return JSON.parse(root.querySelector(selector)?.textContent || '[]');
|
||||
} catch {
|
||||
return fallback;
|
||||
}
|
||||
}
|
||||
|
||||
function escapeHtml(value) {
|
||||
return String(value ?? '')
|
||||
.replaceAll('&', '&')
|
||||
.replaceAll('<', '<')
|
||||
.replaceAll('>', '>')
|
||||
.replaceAll('"', '"')
|
||||
.replaceAll("'", ''');
|
||||
}
|
||||
|
||||
function brandMark() {
|
||||
return '<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><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 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"/></svg>';
|
||||
}
|
||||
|
||||
function designMark() {
|
||||
return '<span class="lvg-design-mark" aria-hidden="true"><i></i><i></i><i></i><i></i></span>';
|
||||
}
|
||||
|
||||
function hostPage({ edited = false, insert = false } = {}) {
|
||||
return `
|
||||
<div class="lvg-host-page${insert ? ' has-insert' : ''}">
|
||||
<p class="lvg-host-kicker">Northstar field journal · Edition 08</p>
|
||||
<article class="lvg-host-target"${edited ? ' data-edited="true"' : ''}>
|
||||
<h4>${edited ? 'Useful observations, refined.' : 'Useful observations from the long way around.'}</h4>
|
||||
<p>Four routes, annotated maps, and practical details for unhurried weekends.</p>
|
||||
</article>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function selectionOutline() {
|
||||
return '<div class="lvg-selection-outline" aria-hidden="true"></div>';
|
||||
}
|
||||
|
||||
function dots({ arrived = 0, visible = 0, expected = 3, clickable = false } = {}) {
|
||||
let html = '<span class="lvg-dots" aria-label="Variant progress">';
|
||||
for (let index = 1; index <= expected; index += 1) {
|
||||
const active = index === visible;
|
||||
const pending = index > arrived;
|
||||
const className = `lvg-dot${active ? ' is-active' : ''}${pending ? ' is-pending' : ''}`;
|
||||
if (clickable && !pending) {
|
||||
const target = index === 1 ? 'cycling-progressive' : 'cycling-second';
|
||||
html += `<button type="button" class="${className}" data-gallery-go="${target}" aria-label="Show variant ${index}"${active ? ' aria-current="true"' : ''}></button>`;
|
||||
} else {
|
||||
html += `<i class="${className}" aria-hidden="true"></i>`;
|
||||
}
|
||||
}
|
||||
return html + '</span>';
|
||||
}
|
||||
|
||||
function configureBar({ actionLabel, count, listening = false, locked = false, insert = false, picker = '' } = {}) {
|
||||
const inputValue = insert
|
||||
? 'Add a compact proof strip'
|
||||
: listening
|
||||
? 'Tighten the hierarchy'
|
||||
: locked
|
||||
? ''
|
||||
: 'Make this feel more confident';
|
||||
const actionControl = insert ? '' : `
|
||||
<button type="button" class="lvg-configure-modifier" data-gallery-go="action-picker" aria-haspopup="listbox" aria-expanded="${picker ? 'true' : 'false'}">
|
||||
${escapeHtml(actionLabel)} <span aria-hidden="true">▾</span>
|
||||
</button>`;
|
||||
return `
|
||||
<div class="lvg-live-context is-configure${picker ? ' has-picker' : ''}"${locked ? ' data-locked="true"' : ''}>
|
||||
<div class="lvg-configure-row">
|
||||
<div class="lvg-configure-input-shell">
|
||||
<button type="button" class="lvg-selection-pill" data-gallery-go="global-ready" aria-label="Clear selection">${insert ? 'slot' : 'article'}</button>
|
||||
<input class="lvg-configure-input" aria-label="${insert ? 'Describe the new element' : 'Describe the change'}" value="${escapeHtml(inputValue)}"${locked ? ' placeholder="apply is running..." disabled' : ''} />
|
||||
</div>
|
||||
<div class="lvg-configure-trailing">
|
||||
<div class="lvg-configure-modifiers">
|
||||
${actionControl}
|
||||
<button type="button" class="lvg-configure-modifier is-count" data-gallery-count aria-label="Change variant count">×${count}</button>
|
||||
</div>
|
||||
<button type="button" class="lvg-configure-voice" data-gallery-go="${listening ? 'configure-replace' : 'configure-listening'}" aria-label="${listening ? 'Stop voice input' : 'Voice input'}" aria-pressed="${listening}">${ICONS.voice}</button>
|
||||
<button type="button" class="lvg-configure-submit" data-gallery-go="generating" aria-label="${insert ? 'Create variants' : 'Generate variants'}">${ICONS.submit}</button>
|
||||
</div>
|
||||
</div>
|
||||
${picker}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function actionPicker(commands, selectedAction) {
|
||||
return `
|
||||
<div class="lvg-action-picker" role="listbox" aria-label="Design action">
|
||||
<div class="lvg-action-grid">
|
||||
${commands.map((command) => `
|
||||
<button type="button" class="lvg-action-chip" role="option" data-gallery-action="${escapeHtml(command.value)}" aria-pressed="${command.value === selectedAction}">
|
||||
<span>${command.icon}</span><span>${escapeHtml(command.label)}</span>
|
||||
</button>`).join('')}
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function generatingBar(recovery = false, actionLabel = 'Freeform') {
|
||||
return `
|
||||
<div class="lvg-live-context">
|
||||
<div class="lvg-generation-row">
|
||||
<span class="lvg-generation-label">${escapeHtml(actionLabel)}</span>
|
||||
${dots({ expected: 3 })}
|
||||
<span class="lvg-generation-status">${recovery ? 'Variants ready. Reveal the selected element to resume.' : 'Source ready. Generating...'}</span>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function tuneButton(open) {
|
||||
return `
|
||||
<button type="button" class="lvg-tune-button" data-gallery-go="${open ? 'cycling-second' : 'tune-open'}" aria-expanded="${open}">
|
||||
${ICONS.tune}<span>Tune</span><span class="lvg-tune-badge">3</span>
|
||||
</button>`;
|
||||
}
|
||||
|
||||
function cyclingBar({ arrived = 1, visible = 1, tune = false } = {}) {
|
||||
const remaining = 3 - arrived;
|
||||
return `
|
||||
<div class="lvg-live-context${tune ? ' has-tune' : ''}">
|
||||
<div class="lvg-cycling-row">
|
||||
<button type="button" class="lvg-nav-button" data-gallery-go="cycling-progressive" aria-label="Previous variant"${visible <= 1 ? ' disabled' : ''}>←</button>
|
||||
${dots({ arrived, visible, expected: 3, clickable: true })}
|
||||
<span class="lvg-variant-counter">${visible}/3</span>
|
||||
<button type="button" class="lvg-nav-button" data-gallery-go="cycling-second" aria-label="Next variant"${visible >= arrived ? ' disabled' : ''}>→</button>
|
||||
${tuneButton(tune)}
|
||||
<span class="lvg-cycling-spacer"></span>
|
||||
${remaining > 0 ? `<span class="lvg-arrival-progress">${remaining} more arriving...</span>` : ''}
|
||||
<button type="button" class="lvg-accept" data-gallery-go="applying">✓ Accept</button>
|
||||
<button type="button" class="lvg-discard" data-gallery-go="global-ready" aria-label="Discard all variants" title="Discard all variants">✕</button>
|
||||
</div>
|
||||
${tune ? tunePanel() : ''}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function tunePanel() {
|
||||
return `
|
||||
<div class="lvg-tune-panel">
|
||||
<div class="lvg-tune-grid">
|
||||
<div class="lvg-param">
|
||||
<div class="lvg-param-header"><strong>Color amount</strong><output data-gallery-range-output>0.60</output></div>
|
||||
<input type="range" min="0" max="1" step="0.05" value="0.6" data-gallery-range aria-label="Color amount" />
|
||||
</div>
|
||||
<div class="lvg-param">
|
||||
<div class="lvg-param-header"><strong>Density</strong><output data-gallery-density-output>Snug</output></div>
|
||||
<div class="lvg-param-steps" role="group" aria-label="Density">
|
||||
<button type="button" data-gallery-density="Airy" aria-pressed="false">Airy</button>
|
||||
<button type="button" data-gallery-density="Snug" aria-pressed="true">Snug</button>
|
||||
<button type="button" data-gallery-density="Packed" aria-pressed="false">Packed</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lvg-param">
|
||||
<div class="lvg-param-header"><strong>Motion</strong><output data-gallery-toggle-output>Off</output></div>
|
||||
<button type="button" class="lvg-param-toggle" data-gallery-param-toggle aria-label="Motion" aria-pressed="false"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function statusBar(kind) {
|
||||
if (kind === 'confirmed') {
|
||||
return '<div class="lvg-live-context is-confirmed"><div class="lvg-status-row"><span aria-hidden="true">✓</span><span>Variant applied</span></div></div>';
|
||||
}
|
||||
return '<div class="lvg-live-context"><div class="lvg-status-row"><i class="lvg-spinner" aria-hidden="true"></i><span>Applying variant...</span></div></div>';
|
||||
}
|
||||
|
||||
function editBadge(editing = false) {
|
||||
if (!editing) {
|
||||
return `<div class="lvg-edit-badge"><button type="button" class="is-icon" data-gallery-go="edit-copy" aria-label="Edit copy" title="Edit copy">${ICONS.edit}</button></div>`;
|
||||
}
|
||||
return '<div class="lvg-edit-badge"><button type="button" data-gallery-go="configure-replace">Cancel</button><button type="button" class="is-primary" data-gallery-go="copy-pending">Save</button></div>';
|
||||
}
|
||||
|
||||
function annotationLayer() {
|
||||
return `
|
||||
<div class="lvg-annotation-layer">
|
||||
<svg viewBox="0 0 404 150" aria-hidden="true"><path d="M44 106 C82 74, 136 83, 175 105 S267 135, 322 90"/></svg>
|
||||
<button type="button" class="lvg-annotation-clear" data-gallery-go="configure-replace">Clear</button>
|
||||
<div class="lvg-annotation-pin"><span>Keep this line on one row</span></div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function pendingDock(kind) {
|
||||
if (kind === 'attention') {
|
||||
return `
|
||||
<div class="lvg-pending-dock">
|
||||
<button type="button" class="lvg-pending-pill" disabled>Apply needs attention</button>
|
||||
<button type="button" class="lvg-pending-decision is-primary" data-gallery-go="copy-applying">Keep fixing</button>
|
||||
<button type="button" class="lvg-pending-decision" data-gallery-go="copy-pending">Rollback</button>
|
||||
</div>`;
|
||||
}
|
||||
const applying = kind === 'applying';
|
||||
return `
|
||||
<div class="lvg-pending-dock">
|
||||
<button type="button" class="lvg-pending-pill" data-gallery-go="${applying ? 'copy-attention' : 'copy-applying'}" aria-busy="${applying}"${applying ? ' disabled' : ''}>
|
||||
${applying ? '<i class="lvg-pending-spinner" aria-hidden="true"></i><span>Applying 3 copy edits</span>' : '<span>Apply copy edits</span><span class="lvg-pending-count">3</span>'}
|
||||
</button>
|
||||
<button type="button" class="lvg-pending-trash" data-gallery-go="global-ready" aria-label="Discard copy edits on this page">${ICONS.trash}</button>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function designPanel(tab = 'visual') {
|
||||
const raw = tab === 'raw';
|
||||
return `
|
||||
<aside class="lvg-design-panel" aria-label="DESIGN.md panel">
|
||||
<header class="lvg-design-header">
|
||||
<span class="lvg-design-title">DESIGN.md</span>
|
||||
<div class="lvg-design-tabs" role="tablist" aria-label="Design system view">
|
||||
<button type="button" role="tab" data-gallery-design-tab="visual" aria-selected="${!raw}">Visual</button>
|
||||
<button type="button" role="tab" data-gallery-design-tab="raw" aria-selected="${raw}">Raw</button>
|
||||
</div>
|
||||
<button type="button" class="lvg-design-close" data-gallery-go="global-tools" aria-label="Close panel">✕</button>
|
||||
</header>
|
||||
<div class="lvg-design-body">
|
||||
${raw ? `
|
||||
<div class="lvg-design-tile">
|
||||
<div class="lvg-design-meta"><strong>Neo Kinpaku</strong><span>Raw</span></div>
|
||||
<p class="lvg-design-copy"># Design System: Impeccable<br><br>Dark lacquer, kinpaku gold, and precise technical geometry.</p>
|
||||
</div>` : `
|
||||
<div class="lvg-design-tile">
|
||||
<div class="lvg-design-meta"><strong>Kinpaku Gold</strong><span>Primary</span></div>
|
||||
<div class="lvg-design-swatch"></div>
|
||||
<p class="lvg-design-copy">Primary accent for commitment, active controls, and the Impeccable mark.</p>
|
||||
</div>
|
||||
<div class="lvg-design-tile">
|
||||
<div class="lvg-design-meta"><strong>Display</strong><span>Typography</span></div>
|
||||
<p class="lvg-design-type">Useful observations</p>
|
||||
<p class="lvg-design-copy">Alumni Sans · precise, light, and deliberately geometric.</p>
|
||||
</div>`}
|
||||
</div>
|
||||
</aside>`;
|
||||
}
|
||||
|
||||
function globalBar({ connected = true, workerFallback = false, active = 'pick', steer = 'collapsed', detectCount = 0, designActive = false } = {}) {
|
||||
const modeButton = (key, icon, label, target, extra = '') => {
|
||||
const isActive = active === key || (key === 'design' && designActive);
|
||||
return `<button type="button" class="lvg-global-mode" data-active="${isActive}" data-gallery-go="${target}" aria-label="${escapeHtml(label)}">${icon}${isActive ? `<span>${escapeHtml(label)}</span>` : ''}${extra}</button>`;
|
||||
};
|
||||
const steerHtml = steer === 'processing'
|
||||
? `<div class="lvg-steer" data-expanded="true" data-processing="true" aria-busy="true" aria-label="Processing steer request"><span class="lvg-steer-icon">${ICONS.chat}</span><span class="lvg-steer-dots" aria-hidden="true"><i></i><i></i><i></i></span></div>`
|
||||
: steer === 'expanded'
|
||||
? `<div class="lvg-steer" data-expanded="true"><span class="lvg-steer-icon">${ICONS.chat}</span><input type="text" value="Make the page hierarchy more decisive" data-gallery-steer-input aria-label="Steer the page"/><button type="button" class="lvg-steer-voice" aria-label="Voice input">${ICONS.voice}</button></div>`
|
||||
: `<button type="button" class="lvg-steer" data-gallery-go="steer-expanded" aria-label="Steer the page"><span class="lvg-steer-icon">${ICONS.chat}</span><span class="lvg-steer-hint">Steer</span><span class="lvg-steer-voice">${ICONS.voice}</span></button>`;
|
||||
|
||||
return `
|
||||
<div class="lvg-live-global">
|
||||
<span class="lvg-live-brand" data-connected="${connected}" data-worker-fallback="${workerFallback}" role="img" aria-label="Impeccable live mode${!connected ? ' - agent not polling' : workerFallback ? ' - using foreground generation' : ''}">
|
||||
${brandMark()}${connected && !workerFallback ? '' : '<i class="lvg-agent-dot" aria-hidden="true"></i>'}
|
||||
</span>
|
||||
<div class="lvg-global-inner">
|
||||
${modeButton('pick', ICONS.pick, 'Pick', 'configure-replace')}
|
||||
${modeButton('insert', ICONS.insert, 'Insert', 'insert-placeholder')}
|
||||
${modeButton('detect', ICONS.detect, 'Detect', 'global-tools', detectCount ? `<span class="lvg-detect-badge">${detectCount}</span>` : '')}
|
||||
${modeButton('design', designMark(), 'DESIGN.md', 'design-panel')}
|
||||
${steerHtml}
|
||||
<span class="lvg-global-divider" aria-hidden="true"></span>
|
||||
<button type="button" class="lvg-global-exit" data-gallery-go="global-ready" aria-label="Exit live mode" title="Exit live mode">${ICONS.exit}</button>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function sceneFor(state, context) {
|
||||
const actionLabel = context.commands.find((command) => command.value === context.selectedAction)?.label || 'Freeform';
|
||||
const commonGlobal = (opts = {}) => globalBar({ active: 'pick', ...opts });
|
||||
switch (state) {
|
||||
case 'global-disconnected':
|
||||
return hostPage() + '<div class="lvg-agent-tooltip" role="tooltip">Agent disconnected - run live-poll.mjs to connect</div>' + commonGlobal({ connected: false });
|
||||
case 'global-foreground':
|
||||
return hostPage()
|
||||
+ '<div class="lvg-live-toast" role="status">Codex CLI is unavailable. Live is using the main agent, so generation may take longer. Install the CLI, run codex login, then restart Live.</div>'
|
||||
+ commonGlobal({ workerFallback: true });
|
||||
case 'global-tools':
|
||||
return hostPage() + commonGlobal({ active: 'detect', detectCount: 7, designActive: true });
|
||||
case 'steer-expanded':
|
||||
return hostPage() + commonGlobal({ steer: 'expanded' });
|
||||
case 'steer-processing':
|
||||
return hostPage() + commonGlobal({ steer: 'processing' });
|
||||
case 'configure-replace':
|
||||
return hostPage() + selectionOutline() + editBadge(false) + configureBar({ actionLabel, count: context.count }) + commonGlobal();
|
||||
case 'action-picker':
|
||||
return hostPage() + selectionOutline() + editBadge(false) + configureBar({ actionLabel, count: context.count, picker: actionPicker(context.commands, context.selectedAction) }) + commonGlobal();
|
||||
case 'configure-listening':
|
||||
return hostPage() + selectionOutline() + editBadge(false) + configureBar({ actionLabel, count: context.count, listening: true }) + commonGlobal();
|
||||
case 'configure-locked':
|
||||
return hostPage({ edited: true }) + selectionOutline() + editBadge(false) + configureBar({ actionLabel, count: context.count, locked: true }) + pendingDock('applying') + commonGlobal();
|
||||
case 'annotation':
|
||||
return hostPage() + selectionOutline() + annotationLayer() + configureBar({ actionLabel, count: context.count }) + commonGlobal();
|
||||
case 'insert-placeholder':
|
||||
return hostPage({ insert: true }) + '<div class="lvg-insert-placeholder" aria-label="Insert placeholder"></div>' + configureBar({ count: context.count, insert: true }) + globalBar({ active: 'insert' });
|
||||
case 'generating':
|
||||
return hostPage() + selectionOutline() + generatingBar(false, actionLabel) + commonGlobal();
|
||||
case 'generation-recovery':
|
||||
return hostPage() + generatingBar(true, actionLabel) + commonGlobal();
|
||||
case 'cycling-progressive':
|
||||
return hostPage() + selectionOutline() + cyclingBar({ arrived: 1, visible: 1 }) + commonGlobal();
|
||||
case 'cycling-second':
|
||||
return hostPage() + selectionOutline() + cyclingBar({ arrived: 2, visible: 2 }) + commonGlobal();
|
||||
case 'tune-open':
|
||||
return hostPage() + selectionOutline() + cyclingBar({ arrived: 3, visible: 2, tune: true }) + commonGlobal();
|
||||
case 'applying':
|
||||
return hostPage() + selectionOutline() + statusBar('applying') + commonGlobal();
|
||||
case 'confirmed':
|
||||
return hostPage({ edited: true }) + statusBar('confirmed') + commonGlobal();
|
||||
case 'edit-copy':
|
||||
return hostPage({ edited: true }) + selectionOutline() + editBadge(true) + configureBar({ actionLabel, count: context.count }) + commonGlobal();
|
||||
case 'copy-pending':
|
||||
return hostPage({ edited: true }) + pendingDock('pending') + commonGlobal();
|
||||
case 'copy-applying':
|
||||
return hostPage({ edited: true }) + pendingDock('applying') + commonGlobal();
|
||||
case 'copy-attention':
|
||||
return hostPage({ edited: true }) + pendingDock('attention') + commonGlobal();
|
||||
case 'design-panel':
|
||||
return hostPage() + designPanel(context.designTab) + globalBar({ active: 'design', designActive: true });
|
||||
case 'toast-error':
|
||||
return hostPage() + '<div class="lvg-live-toast" role="alert">No variants were mounted. Please try again.</div>' + commonGlobal();
|
||||
case 'global-ready':
|
||||
default:
|
||||
return hostPage() + commonGlobal();
|
||||
}
|
||||
}
|
||||
|
||||
function initLiveUiGallery(root) {
|
||||
if (!root || root.dataset.galleryReady === 'true') return;
|
||||
root.dataset.galleryReady = 'true';
|
||||
|
||||
const states = parseJson(root, '[data-live-gallery-states]');
|
||||
const commands = parseJson(root, '[data-live-gallery-vocabulary]');
|
||||
if (states.length === 0 || commands.length === 0) return;
|
||||
|
||||
const select = root.querySelector('[data-gallery-state]');
|
||||
const groupReadout = root.querySelector('[data-gallery-state-group]');
|
||||
const labelReadout = root.querySelector('[data-gallery-state-label]');
|
||||
const quickNav = root.querySelector('.live-ui-gallery__quick-nav');
|
||||
const previews = [...root.querySelectorAll('[data-live-gallery-preview]')];
|
||||
let selectedAction = 'impeccable';
|
||||
let count = 3;
|
||||
let designTab = 'visual';
|
||||
|
||||
const stateIndex = (key) => Math.max(0, states.findIndex((state) => state.key === key));
|
||||
const currentState = () => select?.value || states[0].key;
|
||||
|
||||
function render(nextState = currentState(), { focusSelect = false } = {}) {
|
||||
const state = states[stateIndex(nextState)] || states[0];
|
||||
if (select) select.value = state.key;
|
||||
if (groupReadout) groupReadout.textContent = state.group;
|
||||
if (labelReadout) labelReadout.textContent = state.label;
|
||||
|
||||
let activeStateButton = null;
|
||||
root.querySelectorAll('[data-gallery-state-button]').forEach((button) => {
|
||||
const active = button.dataset.galleryStateButton === state.key;
|
||||
button.setAttribute('aria-current', active ? 'true' : 'false');
|
||||
if (active) activeStateButton = button;
|
||||
});
|
||||
|
||||
for (const preview of previews) {
|
||||
preview.dataset.galleryState = state.key;
|
||||
preview.setAttribute('aria-label', `${preview.dataset.liveGalleryPreview} host — ${state.label}`);
|
||||
preview.innerHTML = sceneFor(state.key, { commands, selectedAction, count, designTab });
|
||||
}
|
||||
|
||||
if (quickNav && activeStateButton) {
|
||||
requestAnimationFrame(() => {
|
||||
const navRect = quickNav.getBoundingClientRect();
|
||||
const buttonRect = activeStateButton.getBoundingClientRect();
|
||||
if (buttonRect.left < navRect.left) quickNav.scrollLeft -= navRect.left - buttonRect.left + 8;
|
||||
if (buttonRect.right > navRect.right) quickNav.scrollLeft += buttonRect.right - navRect.right + 8;
|
||||
});
|
||||
}
|
||||
if (focusSelect) select?.focus();
|
||||
}
|
||||
|
||||
function step(delta) {
|
||||
const next = (stateIndex(currentState()) + delta + states.length) % states.length;
|
||||
render(states[next].key, { focusSelect: true });
|
||||
}
|
||||
|
||||
select?.addEventListener('change', () => render(select.value));
|
||||
|
||||
root.addEventListener('click', (event) => {
|
||||
const stepButton = event.target.closest('[data-gallery-step]');
|
||||
if (stepButton) {
|
||||
step(Number(stepButton.dataset.galleryStep) || 1);
|
||||
return;
|
||||
}
|
||||
|
||||
const stateButton = event.target.closest('[data-gallery-state-button]');
|
||||
if (stateButton) {
|
||||
render(stateButton.dataset.galleryStateButton);
|
||||
return;
|
||||
}
|
||||
|
||||
const actionButton = event.target.closest('[data-gallery-action]');
|
||||
if (actionButton) {
|
||||
selectedAction = actionButton.dataset.galleryAction || 'impeccable';
|
||||
render('configure-replace');
|
||||
return;
|
||||
}
|
||||
|
||||
const countButton = event.target.closest('[data-gallery-count]');
|
||||
if (countButton) {
|
||||
count = count >= 4 ? 1 : count + 1;
|
||||
render(currentState());
|
||||
return;
|
||||
}
|
||||
|
||||
const densityButton = event.target.closest('[data-gallery-density]');
|
||||
if (densityButton) {
|
||||
const value = densityButton.dataset.galleryDensity;
|
||||
root.querySelectorAll('[data-gallery-density]').forEach((button) => {
|
||||
button.setAttribute('aria-pressed', button.dataset.galleryDensity === value ? 'true' : 'false');
|
||||
});
|
||||
root.querySelectorAll('[data-gallery-density-output]').forEach((output) => { output.textContent = value; });
|
||||
return;
|
||||
}
|
||||
|
||||
const toggleButton = event.target.closest('[data-gallery-param-toggle]');
|
||||
if (toggleButton) {
|
||||
const next = toggleButton.getAttribute('aria-pressed') !== 'true';
|
||||
root.querySelectorAll('[data-gallery-param-toggle]').forEach((button) => button.setAttribute('aria-pressed', String(next)));
|
||||
root.querySelectorAll('[data-gallery-toggle-output]').forEach((output) => { output.textContent = next ? 'On' : 'Off'; });
|
||||
return;
|
||||
}
|
||||
|
||||
const designTabButton = event.target.closest('[data-gallery-design-tab]');
|
||||
if (designTabButton) {
|
||||
designTab = designTabButton.dataset.galleryDesignTab === 'raw' ? 'raw' : 'visual';
|
||||
render('design-panel');
|
||||
return;
|
||||
}
|
||||
|
||||
const trigger = event.target.closest('[data-gallery-go]');
|
||||
if (trigger && !trigger.disabled) render(trigger.dataset.galleryGo);
|
||||
});
|
||||
|
||||
root.addEventListener('input', (event) => {
|
||||
const range = event.target.closest('[data-gallery-range]');
|
||||
if (!range) return;
|
||||
const value = Number(range.value).toFixed(2);
|
||||
root.querySelectorAll('[data-gallery-range]').forEach((input) => { if (input !== range) input.value = range.value; });
|
||||
root.querySelectorAll('[data-gallery-range-output]').forEach((output) => { output.textContent = value; });
|
||||
});
|
||||
|
||||
root.addEventListener('keydown', (event) => {
|
||||
if (event.target.matches('[data-gallery-steer-input]') && event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
render('steer-processing');
|
||||
return;
|
||||
}
|
||||
|
||||
const stateButton = event.target.closest('[data-gallery-state-button]');
|
||||
if (stateButton && ['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) {
|
||||
event.preventDefault();
|
||||
const current = stateIndex(stateButton.dataset.galleryStateButton);
|
||||
const next = event.key === 'Home'
|
||||
? 0
|
||||
: event.key === 'End'
|
||||
? states.length - 1
|
||||
: (current + (event.key === 'ArrowLeft' ? -1 : 1) + states.length) % states.length;
|
||||
render(states[next].key);
|
||||
root.querySelector(`[data-gallery-state-button="${states[next].key}"]`)?.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
const panel = event.target.closest('.live-ui-gallery__control-panel');
|
||||
if (!panel || event.target.matches('input')) return;
|
||||
if (event.key === 'ArrowLeft') {
|
||||
event.preventDefault();
|
||||
step(-1);
|
||||
} else if (event.key === 'ArrowRight') {
|
||||
event.preventDefault();
|
||||
step(1);
|
||||
} else if (event.key === 'Home') {
|
||||
event.preventDefault();
|
||||
render(states[0].key, { focusSelect: true });
|
||||
} else if (event.key === 'End') {
|
||||
event.preventDefault();
|
||||
render(states[states.length - 1].key, { focusSelect: true });
|
||||
}
|
||||
});
|
||||
|
||||
render(states[0].key);
|
||||
}
|
||||
|
||||
function initLiveUiGalleries() {
|
||||
document.querySelectorAll('[data-live-ui-gallery]').forEach(initLiveUiGallery);
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initLiveUiGalleries, { once: true });
|
||||
} else {
|
||||
initLiveUiGalleries();
|
||||
}
|
||||
|
||||
document.addEventListener('astro:page-load', initLiveUiGalleries);
|
||||
+10
-11
@@ -1,17 +1,16 @@
|
||||
// Theme switcher — three-way: auto / light / dark with localStorage persistence.
|
||||
// "auto" (the default) inherits from the OS via prefers-color-scheme and is only
|
||||
// overridden once the user clicks the toggle. Clicking cycles auto → light → dark → auto.
|
||||
// Theme switcher — three-way: dark / light / auto with localStorage persistence.
|
||||
// Dark is the first-visit default. Auto remains an explicit choice and follows
|
||||
// the OS via prefers-color-scheme. Clicking cycles dark → light → auto → dark.
|
||||
|
||||
const STORAGE_KEY = 'impeccable-theme';
|
||||
|
||||
export function getStoredPref() {
|
||||
const v = localStorage.getItem(STORAGE_KEY);
|
||||
return v === 'light' || v === 'dark' ? v : 'auto';
|
||||
return v === 'light' || v === 'dark' || v === 'auto' ? v : 'dark';
|
||||
}
|
||||
|
||||
export function setStoredPref(pref) {
|
||||
if (pref === 'auto') localStorage.removeItem(STORAGE_KEY);
|
||||
else localStorage.setItem(STORAGE_KEY, pref);
|
||||
localStorage.setItem(STORAGE_KEY, pref);
|
||||
}
|
||||
|
||||
function systemTheme() {
|
||||
@@ -25,9 +24,9 @@ export function resolveTheme(pref) {
|
||||
}
|
||||
|
||||
const LABELS = {
|
||||
auto: 'Theme: auto, matching your system. Click to switch to light mode.',
|
||||
light: 'Theme: light. Click to switch to dark mode.',
|
||||
dark: 'Theme: dark. Click to switch back to auto.',
|
||||
dark: 'Theme: dark. Click to switch to light mode.',
|
||||
light: 'Theme: light. Click to switch to auto mode.',
|
||||
auto: 'Theme: auto, matching your system. Click to switch to dark mode.',
|
||||
};
|
||||
|
||||
const TITLES = {
|
||||
@@ -55,8 +54,8 @@ export function applyTheme(pref) {
|
||||
});
|
||||
}
|
||||
|
||||
function nextPref(pref) {
|
||||
return pref === 'auto' ? 'light' : pref === 'light' ? 'dark' : 'auto';
|
||||
export function nextPref(pref) {
|
||||
return pref === 'dark' ? 'light' : pref === 'light' ? 'auto' : 'dark';
|
||||
}
|
||||
|
||||
export function initThemeToggle() {
|
||||
|
||||
@@ -945,7 +945,7 @@
|
||||
align-self: start;
|
||||
padding: 8px 14px;
|
||||
background: var(--ks-kinpaku);
|
||||
color: var(--ks-lacquer-deep);
|
||||
color: var(--ks-dark-ink);
|
||||
border: 0;
|
||||
border-radius: 2px;
|
||||
font-family: var(--ks-font);
|
||||
@@ -1000,7 +1000,7 @@
|
||||
}
|
||||
.designing-kinpaku .docs-viz-live-ctx-accept {
|
||||
background: var(--ks-kinpaku);
|
||||
color: var(--ks-lacquer-deep);
|
||||
color: var(--ks-dark-ink);
|
||||
border-radius: 3px;
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -1361,7 +1361,7 @@
|
||||
justify-self: end;
|
||||
padding: 8px 18px;
|
||||
background: var(--ks-kinpaku);
|
||||
color: var(--ks-lacquer-deep);
|
||||
color: var(--ks-dark-ink);
|
||||
border-radius: 2px;
|
||||
font-family: var(--ks-font);
|
||||
font-size: 0.9rem;
|
||||
|
||||
@@ -177,7 +177,7 @@
|
||||
.detector-fixture-button[aria-pressed="true"] {
|
||||
background: var(--ks-kinpaku);
|
||||
border-color: var(--ks-kinpaku);
|
||||
color: var(--ks-lacquer-deep);
|
||||
color: var(--ks-dark-ink);
|
||||
}
|
||||
|
||||
.detector-fixture-button span:first-child {
|
||||
@@ -280,7 +280,7 @@
|
||||
.detector-preview-actions button[data-rerun-browser] {
|
||||
background: var(--ks-kinpaku);
|
||||
border-color: var(--ks-kinpaku);
|
||||
color: var(--ks-lacquer-deep);
|
||||
color: var(--ks-dark-ink);
|
||||
}
|
||||
|
||||
.detector-preview-actions button[data-rerun-browser]:hover {
|
||||
|
||||
@@ -1400,7 +1400,7 @@ html.light .docs-kinpaku .prose .code-block code {
|
||||
.docs-kinpaku .code-block-copy.is-copied {
|
||||
opacity: 1;
|
||||
border-color: var(--ks-kinpaku);
|
||||
color: var(--ks-lacquer-deep);
|
||||
color: var(--ks-dark-ink);
|
||||
background: var(--ks-kinpaku);
|
||||
}
|
||||
|
||||
|
||||
@@ -3181,7 +3181,7 @@
|
||||
}
|
||||
|
||||
.neon-case-primary {
|
||||
color: var(--ks-lacquer-deep);
|
||||
color: var(--ks-dark-ink);
|
||||
background: var(--ks-kinpaku);
|
||||
border-color: var(--ks-kinpaku);
|
||||
}
|
||||
|
||||
@@ -113,7 +113,7 @@
|
||||
|
||||
.home-kinpaku .skip-link {
|
||||
background: var(--ks-patina);
|
||||
color: var(--ks-lacquer-deep);
|
||||
color: var(--ks-dark-ink);
|
||||
border: 1px solid var(--ks-patina);
|
||||
border-radius: 4px;
|
||||
}
|
||||
@@ -478,7 +478,7 @@
|
||||
padding: 0 38px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 2px;
|
||||
color: var(--ks-lacquer-deep);
|
||||
color: var(--ks-dark-ink);
|
||||
background:
|
||||
linear-gradient(90deg, oklch(95% 0.04 84 / 0.36), oklch(78% 0.12 82 / 0.72)),
|
||||
url("/assets/neo-kinpaku/kinpaku-gold-leaf.png") center / 160% auto;
|
||||
@@ -520,7 +520,7 @@
|
||||
.home-kinpaku .hero-cta-combined:hover,
|
||||
.home-kinpaku .btn-primary:hover,
|
||||
.home-kinpaku .install-tool-cta:hover {
|
||||
color: var(--ks-lacquer-deep);
|
||||
color: var(--ks-dark-ink);
|
||||
background:
|
||||
linear-gradient(90deg, oklch(98% 0.035 84 / 0.38), oklch(78% 0.12 82 / 0.58)),
|
||||
url("/assets/neo-kinpaku/kinpaku-gold-leaf.png") 60% 46% / 140% auto;
|
||||
@@ -805,7 +805,7 @@
|
||||
|
||||
.home-kinpaku .impeccable-button {
|
||||
background: var(--ks-kinpaku);
|
||||
color: var(--ks-lacquer-deep);
|
||||
color: var(--ks-dark-ink);
|
||||
}
|
||||
|
||||
.home-kinpaku .split-labels {
|
||||
@@ -858,7 +858,7 @@
|
||||
|
||||
.home-kinpaku .section-nav-item.is-active .section-nav-num,
|
||||
.home-kinpaku .section-nav-item.is-active .section-nav-label {
|
||||
color: var(--ks-lacquer-deep);
|
||||
color: var(--ks-dark-ink);
|
||||
}
|
||||
|
||||
/* Sections sit on clean lacquer. The earlier faded radial gold wash
|
||||
@@ -961,7 +961,7 @@
|
||||
|
||||
.home-kinpaku .language-view-tab.is-active {
|
||||
background: var(--ks-kinpaku);
|
||||
color: var(--ks-lacquer-deep);
|
||||
color: var(--ks-dark-ink);
|
||||
}
|
||||
|
||||
/* Divider accent follows the section's category identity (the same gold/teal
|
||||
@@ -1347,7 +1347,7 @@
|
||||
|
||||
.home-kinpaku :is(.spread-demo-area, .terminal-preview, .mobile-demo-area) .demo-split-comparison button[style*="#4F46E5"] {
|
||||
background: linear-gradient(180deg, var(--demo-purple), var(--demo-purple-soft)) !important;
|
||||
color: var(--ks-lacquer-deep) !important;
|
||||
color: var(--ks-dark-ink) !important;
|
||||
}
|
||||
|
||||
.home-kinpaku :is(.spread-demo-area, .terminal-preview, .mobile-demo-area) .demo-split-comparison [style*="border: 1px solid #ddd"],
|
||||
@@ -2202,7 +2202,7 @@
|
||||
}
|
||||
|
||||
.home-kinpaku .why-dm-comp-chip--primary {
|
||||
color: var(--ks-lacquer-deep);
|
||||
color: var(--ks-dark-ink);
|
||||
border-color: var(--ks-kinpaku);
|
||||
background:
|
||||
linear-gradient(90deg, oklch(95% 0.04 84 / 0.34), oklch(78% 0.12 82 / 0.72)),
|
||||
@@ -2413,7 +2413,7 @@
|
||||
}
|
||||
|
||||
.home-kinpaku .why-visual--v2 .v2-new-bar {
|
||||
color: var(--ks-lacquer-deep);
|
||||
color: var(--ks-dark-ink);
|
||||
border-radius: 999px;
|
||||
background: var(--ks-kinpaku);
|
||||
box-shadow: 0 12px 28px oklch(78% 0.12 82 / 0.16);
|
||||
@@ -2427,7 +2427,7 @@
|
||||
|
||||
.home-kinpaku .patterns-tab:hover,
|
||||
.home-kinpaku .patterns-tab.is-active {
|
||||
color: var(--ks-lacquer-deep);
|
||||
color: var(--ks-dark-ink);
|
||||
background: var(--ks-kinpaku);
|
||||
border-color: var(--ks-kinpaku);
|
||||
}
|
||||
@@ -2505,7 +2505,7 @@
|
||||
|
||||
.home-kinpaku .live-demo-card button {
|
||||
background: var(--ks-kinpaku);
|
||||
color: var(--ks-lacquer-deep);
|
||||
color: var(--ks-dark-ink);
|
||||
}
|
||||
|
||||
.home-kinpaku .live-demo-card--v2,
|
||||
@@ -2616,7 +2616,7 @@
|
||||
}
|
||||
|
||||
.home-kinpaku .install-path-step {
|
||||
color: var(--ks-lacquer-deep);
|
||||
color: var(--ks-dark-ink);
|
||||
background: var(--ks-kinpaku);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@@ -48,6 +48,13 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
/* Follow the same capped page rail as .site-content and the hero. The
|
||||
max() only matters beyond the 1500px content cap; at ordinary widths it
|
||||
resolves to the shared responsive gutter. */
|
||||
padding-inline: max(
|
||||
clamp(22px, 4vw, 56px),
|
||||
calc((100vw - 1500px) / 2 + 56px)
|
||||
);
|
||||
background: oklch(8% 0.006 95 / calc(0.72 * var(--hp)));
|
||||
border-bottom: 1px solid oklch(78% 0.12 82 / calc(0.18 * var(--hp)));
|
||||
-webkit-backdrop-filter: saturate(calc(1 + 0.3 * var(--hp))) blur(calc(16px * var(--hp)));
|
||||
@@ -73,7 +80,7 @@
|
||||
z-index: 1;
|
||||
max-width: 1500px;
|
||||
margin: 0 auto;
|
||||
padding: 0 56px;
|
||||
padding: 0 clamp(22px, 4vw, 56px);
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
|
||||
@@ -248,7 +255,7 @@
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
.hero-rebuild { padding: 108px 36px 80px; } /* keep top clear of the fixed header */
|
||||
.hero-rebuild { padding: 108px 0 80px; } /* keep top clear of the fixed header */
|
||||
/* minmax(0, 1fr), not 1fr: a plain 1fr track has an `auto` (min-content)
|
||||
floor, so the demo's 460px-wide browser frame held the column wider than a
|
||||
phone viewport and the hero clipped. minmax(0,…) lets it shrink and the
|
||||
@@ -259,11 +266,7 @@
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.hero-rebuild { padding: 92px 24px 64px; } /* clear the compact mobile header */
|
||||
/* The hero's 24px gutter is the mobile margin now; the container's desktop
|
||||
56px padding stacked on top of it (160px of chrome) starved the content and
|
||||
forced the grid track wider than the viewport. Drop it on mobile. */
|
||||
.hero-rebuild-container { padding-left: 0; padding-right: 0; }
|
||||
.hero-rebuild { padding: 92px 0 64px; } /* clear the compact mobile header */
|
||||
/* Title keeps its design-system clamp (floors at 3.4rem ≈ 54px here): the
|
||||
Alumni Sans display face is narrow, so "interfaces" stays well within a
|
||||
320px+ viewport. No mobile shrink — at 54px against 16.8px body it holds a
|
||||
|
||||
+1632
-398
File diff suppressed because it is too large
Load Diff
@@ -147,7 +147,7 @@
|
||||
anchor resets like `.kinpaku-system-page a { color: inherit }` (0,1,1).
|
||||
Use class="ks-button ks-button-primary" — both classes required. */
|
||||
.ks-button.ks-button-primary {
|
||||
color: var(--ks-lacquer-deep);
|
||||
color: var(--ks-dark-ink);
|
||||
background: var(--ks-kinpaku);
|
||||
border-color: var(--ks-kinpaku);
|
||||
}
|
||||
@@ -155,7 +155,7 @@
|
||||
.ks-button.ks-button-primary:hover {
|
||||
background: var(--ks-kinpaku-pale);
|
||||
border-color: var(--ks-kinpaku-pale);
|
||||
color: var(--ks-lacquer-deep);
|
||||
color: var(--ks-dark-ink);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
@@ -325,7 +325,7 @@
|
||||
top: 2px;
|
||||
width: 5px;
|
||||
height: 9px;
|
||||
border: solid var(--ks-lacquer-deep);
|
||||
border: solid var(--ks-dark-ink);
|
||||
border-width: 0 1.5px 1.5px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
@@ -1487,7 +1487,7 @@
|
||||
.home-kinpaku .live-demo-ctx-accept,
|
||||
.live-mode-kinpaku .live-demo-ctx-accept {
|
||||
background: var(--ks-kinpaku);
|
||||
color: var(--ks-lacquer-deep);
|
||||
color: var(--ks-dark-ink);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@@ -1629,7 +1629,7 @@
|
||||
.home-kinpaku .live-demo-comment,
|
||||
.live-mode-kinpaku .live-demo-comment {
|
||||
background: var(--ks-kinpaku);
|
||||
color: var(--ks-lacquer-deep);
|
||||
color: var(--ks-dark-ink);
|
||||
}
|
||||
|
||||
.home-kinpaku .live-demo-stroke,
|
||||
|
||||
@@ -27,6 +27,7 @@
|
||||
--ks-kinpaku-pale: oklch(86% 0.07 84); /* hover lift, pale fills */
|
||||
--ks-kinpaku-rich: oklch(77% 0.13 82); /* active CTA, severity-medium */
|
||||
--ks-kinpaku-deep: oklch(61% 0.085 78); /* borders against the brand */
|
||||
--ks-dark-ink: oklch(14% 0.018 95); /* foreground on gold; never theme-remapped */
|
||||
|
||||
/* Verdigris patina. The secondary accent — state, signal, selection. */
|
||||
--ks-patina: oklch(70% 0.12 188); /* secondary accent */
|
||||
|
||||
@@ -694,7 +694,7 @@ html.light .designing-kinpaku .docs-viz-live-kicker {
|
||||
}
|
||||
|
||||
html.light .designing-kinpaku .docs-viz-live-btn {
|
||||
color: var(--ks-lacquer-deep);
|
||||
color: var(--ks-dark-ink);
|
||||
}
|
||||
|
||||
html.light .designing-kinpaku .docs-viz-live-ctx,
|
||||
@@ -718,7 +718,7 @@ html.light .designing-kinpaku .docs-viz-live-gbar-btn.is-active svg {
|
||||
}
|
||||
|
||||
html.light .designing-kinpaku .docs-viz-live-ctx-accept {
|
||||
color: var(--ks-lacquer-deep);
|
||||
color: var(--ks-dark-ink);
|
||||
}
|
||||
|
||||
html.light .designing-kinpaku .designing-surface-cmd,
|
||||
|
||||
@@ -1,523 +0,0 @@
|
||||
/* Live Lab workbench: detector-style navigation, active workspace, diagnostics. */
|
||||
|
||||
.live-lab-page {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.live-lab-main-shell,
|
||||
.live-lab-workbench,
|
||||
.live-lab-workspace {
|
||||
height: 100vh;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.live-lab-workbench {
|
||||
--live-lab-sidebar: 264px;
|
||||
background: var(--ks-lacquer);
|
||||
}
|
||||
|
||||
.live-lab-nav {
|
||||
position: fixed;
|
||||
inset: 0 auto 0 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: var(--live-lab-sidebar);
|
||||
border-right: 1px solid var(--ks-rule);
|
||||
background: var(--ks-lacquer-deep);
|
||||
}
|
||||
|
||||
.live-lab-nav-head {
|
||||
flex-shrink: 0;
|
||||
padding: var(--spacing-md);
|
||||
border-bottom: 1px solid var(--ks-rule);
|
||||
}
|
||||
|
||||
.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: 1rem;
|
||||
letter-spacing: 0.16em;
|
||||
}
|
||||
|
||||
.live-lab-nav-head h1 {
|
||||
margin: var(--spacing-md) 0 0;
|
||||
color: var(--ks-champagne);
|
||||
font-family: var(--ks-font);
|
||||
font-size: var(--ks-type-title-size);
|
||||
font-weight: 600;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.live-lab-nav-head > p {
|
||||
margin: 6px 0 0;
|
||||
color: var(--ks-text-muted);
|
||||
font-size: var(--ks-type-body-size);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.live-lab-panel-label,
|
||||
.live-lab-nav-group h2,
|
||||
.live-lab-diagnostic-panel dt {
|
||||
color: var(--ks-text-muted);
|
||||
font-family: var(--ks-mono);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.live-lab-nav-scroll {
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
padding-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.live-lab-nav-group {
|
||||
padding: var(--spacing-sm);
|
||||
border-bottom: 1px solid var(--ks-rule);
|
||||
}
|
||||
|
||||
.live-lab-nav-group h2 {
|
||||
margin: 0;
|
||||
color: var(--ks-kinpaku-deep);
|
||||
letter-spacing: 0.2em;
|
||||
}
|
||||
|
||||
.live-lab-nav-list {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.live-lab-nav-list button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-height: 40px;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
color: var(--ks-text-muted);
|
||||
font: 500 0.875rem/1.3 var(--ks-font);
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.live-lab-nav-list button:hover {
|
||||
background: var(--ks-graphite);
|
||||
color: var(--ks-champagne);
|
||||
}
|
||||
|
||||
.live-lab-nav-list button:focus-visible {
|
||||
outline: 2px solid var(--ks-kinpaku);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.live-lab-nav-list button[aria-pressed='true'] {
|
||||
border-color: var(--ks-kinpaku);
|
||||
background: var(--ks-kinpaku);
|
||||
color: var(--ks-lacquer-deep);
|
||||
}
|
||||
|
||||
.live-lab-workspace {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
margin-left: var(--live-lab-sidebar);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.live-lab-toolbar {
|
||||
position: relative;
|
||||
z-index: 8;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
justify-content: space-between;
|
||||
gap: var(--spacing-md);
|
||||
align-items: center;
|
||||
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: 0;
|
||||
color: var(--ks-champagne);
|
||||
font: 600 1rem/1.2 var(--ks-font);
|
||||
}
|
||||
|
||||
.live-lab-toolbar p:not(.live-lab-panel-label) {
|
||||
margin: 4px 0 0;
|
||||
color: var(--ks-text-muted);
|
||||
font-size: var(--ks-type-body-size);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.live-lab-toolbar-actions {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.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-rule-strong);
|
||||
border-radius: 2px;
|
||||
background: transparent;
|
||||
color: var(--ks-kinpaku);
|
||||
font-size: var(--ks-type-body-size);
|
||||
font-weight: 600;
|
||||
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 {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.live-lab-content-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 280px;
|
||||
gap: var(--spacing-sm);
|
||||
align-items: start;
|
||||
padding: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.live-lab-canvas,
|
||||
.live-lab-diagnostic-panel {
|
||||
min-width: 0;
|
||||
border: 1px solid var(--ks-rule);
|
||||
background: var(--ks-lacquer-raised);
|
||||
}
|
||||
|
||||
.live-lab-ui-panel {
|
||||
min-width: 0;
|
||||
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;
|
||||
}
|
||||
|
||||
.live-lab-canvas [hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.live-lab-canvas .ks-section {
|
||||
width: auto;
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
padding-right: clamp(20px, 3vw, 40px);
|
||||
padding-left: clamp(20px, 3vw, 40px);
|
||||
}
|
||||
|
||||
.live-lab-canvas .live-performance-hero {
|
||||
padding-top: clamp(32px, 5vw, 56px);
|
||||
padding-bottom: clamp(32px, 5vw, 56px);
|
||||
}
|
||||
|
||||
.live-lab-canvas .live-performance-hero::after {
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.live-lab-canvas .live-performance-hero h1 {
|
||||
max-width: 720px;
|
||||
margin-top: 14px;
|
||||
font-family: var(--ks-font);
|
||||
font-size: var(--ks-type-headline-size);
|
||||
font-weight: 600;
|
||||
line-height: var(--ks-type-headline-line);
|
||||
}
|
||||
|
||||
.live-lab-canvas .live-performance-lede {
|
||||
margin-top: 24px;
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.live-lab-run-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
margin: 28px 0 0;
|
||||
border: 1px solid var(--ks-rule);
|
||||
}
|
||||
|
||||
.live-lab-run-stats div {
|
||||
min-width: 0;
|
||||
padding: var(--spacing-sm);
|
||||
border-right: 1px solid var(--ks-rule);
|
||||
}
|
||||
|
||||
.live-lab-run-stats div:last-child { border-right: 0; }
|
||||
|
||||
.live-lab-run-stats dt {
|
||||
color: var(--ks-text-muted);
|
||||
font: 500 var(--ks-type-eyebrow-size)/1.4 var(--ks-mono);
|
||||
letter-spacing: var(--ks-type-eyebrow-track);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.live-lab-run-stats dd {
|
||||
margin: 6px 0 0;
|
||||
color: var(--ks-champagne);
|
||||
font-size: var(--ks-type-title-size);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.live-lab-canvas .live-performance-meta {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.live-lab-canvas .live-performance-section {
|
||||
padding-top: clamp(30px, 4vw, 52px);
|
||||
padding-bottom: clamp(30px, 4vw, 52px);
|
||||
}
|
||||
|
||||
.live-lab-canvas .live-performance-section-head {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(220px, 360px);
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.live-lab-canvas .live-performance-section-head h2,
|
||||
.live-lab-canvas .live-performance-method h2 {
|
||||
margin-top: 8px;
|
||||
font-size: clamp(1.65rem, 3vw, 2.6rem);
|
||||
}
|
||||
|
||||
.live-lab-canvas .latency-tape,
|
||||
.live-lab-canvas .scenario-comparison,
|
||||
.live-lab-canvas .harness-table-wrap,
|
||||
.live-lab-canvas .experiment-list,
|
||||
.live-lab-canvas .live-simulator {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.live-lab-canvas .live-performance-finding {
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.live-lab-canvas .live-performance-method {
|
||||
gap: 28px;
|
||||
padding-top: 36px;
|
||||
padding-bottom: 36px;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.live-lab-diagnostics {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
display: grid;
|
||||
gap: var(--spacing-sm);
|
||||
max-height: calc(100vh - 106px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.live-lab-diagnostic-panel {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.live-lab-diagnostic-panel header {
|
||||
padding: var(--spacing-sm);
|
||||
border-bottom: 1px solid var(--ks-rule);
|
||||
}
|
||||
|
||||
.live-lab-diagnostic-panel dl {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.live-lab-diagnostic-panel dl div {
|
||||
padding: var(--spacing-sm);
|
||||
border-right: 1px solid var(--ks-rule);
|
||||
border-bottom: 1px solid var(--ks-rule);
|
||||
}
|
||||
|
||||
.live-lab-diagnostic-panel dl div:nth-child(2n) { border-right: 0; }
|
||||
|
||||
.live-lab-diagnostic-panel dd {
|
||||
margin: 5px 0 0;
|
||||
color: var(--ks-champagne);
|
||||
font-size: var(--ks-type-title-size);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.live-lab-diagnostic-panel > p {
|
||||
margin: 0;
|
||||
padding: var(--spacing-sm);
|
||||
color: var(--ks-text-muted);
|
||||
font-size: var(--ks-type-body-size);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.live-lab-strategy-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.live-lab-strategy-list li {
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
padding: 11px var(--spacing-sm);
|
||||
border-bottom: 1px solid var(--ks-rule);
|
||||
}
|
||||
|
||||
.live-lab-strategy-list strong {
|
||||
color: var(--ks-champagne);
|
||||
font-size: var(--ks-type-body-size);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.live-lab-strategy-list span {
|
||||
color: var(--ks-patina);
|
||||
font: 0.75rem/1.4 var(--ks-mono);
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.live-lab-workbench { --live-lab-sidebar: 244px; }
|
||||
.live-lab-content-grid { grid-template-columns: minmax(0, 1fr); }
|
||||
.live-lab-diagnostics {
|
||||
position: static;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.live-lab-page { overflow: auto; }
|
||||
|
||||
.live-lab-main-shell,
|
||||
.live-lab-workbench,
|
||||
.live-lab-workspace {
|
||||
height: auto;
|
||||
min-height: 100vh;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.live-lab-nav {
|
||||
position: static;
|
||||
width: auto;
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid var(--ks-rule);
|
||||
}
|
||||
|
||||
.live-lab-nav-scroll {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.live-lab-workspace { margin-left: 0; }
|
||||
.live-lab-workspace-scroll { overflow: visible; }
|
||||
|
||||
.live-lab-toolbar {
|
||||
position: static;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.live-lab-diagnostics { grid-template-columns: 1fr; }
|
||||
.live-lab-canvas .live-performance-section-head { grid-template-columns: 1fr; }
|
||||
.live-lab-run-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.live-lab-run-stats div:nth-child(2) { border-right: 0; }
|
||||
.live-lab-run-stats div:nth-child(-n + 2) { border-bottom: 1px solid var(--ks-rule); }
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.live-lab-diagnostic-panel dl,
|
||||
.live-lab-nav-scroll,
|
||||
.live-lab-run-stats {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.live-lab-summary-grid div,
|
||||
.live-lab-diagnostic-panel dl div,
|
||||
.live-lab-run-stats div {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.live-lab-toolbar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.live-lab-toolbar-actions {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.live-lab-content-grid {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.live-lab-canvas,
|
||||
.live-lab-diagnostic-panel {
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.live-lab-status i { animation: none; }
|
||||
}
|
||||
@@ -385,7 +385,7 @@
|
||||
|
||||
.live-mode-kinpaku .live-demo-card--v2 button {
|
||||
background: var(--ks-kinpaku);
|
||||
color: var(--ks-lacquer-deep);
|
||||
color: var(--ks-dark-ink);
|
||||
}
|
||||
|
||||
.live-mode-kinpaku .live-demo-card--v3 {
|
||||
@@ -558,7 +558,7 @@
|
||||
|
||||
.live-mode-kinpaku .live-mode-stage-viz .docs-viz-picker-pin {
|
||||
background: var(--ks-kinpaku);
|
||||
color: var(--ks-lacquer-deep);
|
||||
color: var(--ks-dark-ink);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,741 +0,0 @@
|
||||
.live-performance-page {
|
||||
background: var(--ks-lacquer);
|
||||
color: var(--ks-text);
|
||||
}
|
||||
|
||||
html.light .live-performance-page {
|
||||
--ks-kinpaku: var(--ks-kinpaku-deep);
|
||||
--ks-patina: var(--ks-patina-deep);
|
||||
--ks-code-cmd: var(--ks-link-on-paper);
|
||||
--ks-text-faint: var(--ks-text-muted);
|
||||
}
|
||||
|
||||
.live-performance-page .sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.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 {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 44px;
|
||||
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-finding-card--quiet {
|
||||
grid-template-columns: 112px minmax(0, 1fr);
|
||||
gap: 22px;
|
||||
padding: 22px 24px;
|
||||
border: 1px solid var(--ks-rule);
|
||||
border-radius: 6px;
|
||||
background: var(--ks-lacquer-raised);
|
||||
}
|
||||
|
||||
.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-track .is-control { background: var(--ks-graphite-2); }
|
||||
|
||||
.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-wrap:focus-visible {
|
||||
outline: 2px solid var(--ks-patina);
|
||||
outline-offset: 4px;
|
||||
}
|
||||
|
||||
.table-scroll-hint {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.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-page {
|
||||
--ks-type-eyebrow-size: var(--ks-type-body-size);
|
||||
--ks-type-mono-size: var(--ks-type-body-size);
|
||||
}
|
||||
|
||||
.live-performance-meta {
|
||||
font-size: var(--ks-type-body-size);
|
||||
}
|
||||
|
||||
.live-performance-page .ks-tag,
|
||||
.live-performance-method code {
|
||||
font-size: var(--ks-type-body-size);
|
||||
}
|
||||
|
||||
.table-scroll-hint {
|
||||
display: block;
|
||||
margin: 44px 0 -32px;
|
||||
color: var(--ks-text-muted);
|
||||
font-family: var(--ks-mono);
|
||||
font-size: var(--ks-type-body-size);
|
||||
}
|
||||
|
||||
.harness-table-wrap {
|
||||
margin-top: 44px;
|
||||
padding-bottom: 8px;
|
||||
scrollbar-color: var(--ks-patina) var(--ks-graphite);
|
||||
}
|
||||
|
||||
.harness-table-wrap::after {
|
||||
position: sticky;
|
||||
right: 0;
|
||||
display: block;
|
||||
width: 36px;
|
||||
height: 3px;
|
||||
margin-top: -3px;
|
||||
margin-left: auto;
|
||||
background: var(--ks-patina);
|
||||
content: '';
|
||||
}
|
||||
|
||||
.harness-table a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 44px;
|
||||
padding-inline: 3px;
|
||||
}
|
||||
|
||||
.live-simulator input[type='range'] {
|
||||
min-height: 44px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -383,7 +383,7 @@
|
||||
|
||||
.slop-kinpaku .slop-era-tab.is-active {
|
||||
background: var(--ks-kinpaku);
|
||||
color: var(--ks-lacquer-deep);
|
||||
color: var(--ks-dark-ink);
|
||||
}
|
||||
|
||||
.slop-kinpaku .slop-era-toggle--ink {
|
||||
@@ -544,7 +544,7 @@
|
||||
|
||||
|
||||
/* ============================================================================
|
||||
7. THE CATALOG — 8 categories, each a plinth of rule tiles
|
||||
7. THE CATALOG — 9 categories, including personalized design-system checks
|
||||
============================================================================ */
|
||||
|
||||
.slop-kinpaku .slop-catalog-header {
|
||||
@@ -703,12 +703,44 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.slop-kinpaku .anti-patterns-section {
|
||||
scroll-margin-top: 112px;
|
||||
}
|
||||
|
||||
.slop-kinpaku .anti-patterns-section--personalized .anti-patterns-section-header {
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.slop-kinpaku .anti-patterns-section--personalized {
|
||||
padding: clamp(18px, 2.5vw, 28px);
|
||||
background: linear-gradient(135deg, oklch(78% 0.12 82 / 0.09), transparent 58%);
|
||||
border: 1px solid oklch(74% 0.09 82 / 0.34);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.slop-kinpaku .anti-patterns-section-lede {
|
||||
max-width: 72ch;
|
||||
margin: 7px 0 0;
|
||||
color: var(--ks-text-muted);
|
||||
font-size: 0.86rem;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.slop-kinpaku .anti-patterns-section-lede a {
|
||||
color: var(--ks-kinpaku);
|
||||
text-decoration: underline;
|
||||
text-decoration-color: oklch(78% 0.12 82 / 0.36);
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
/* Rule cards — independent specimens per category. Each card is
|
||||
self-contained; no wrapping plinth. The category section header above
|
||||
provides all the grouping context the cards need. */
|
||||
.slop-kinpaku .rule-card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
@@ -759,6 +791,80 @@
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Compact specimens for cataloged detector rules. */
|
||||
.slop-kinpaku .catalog-rule-demo { width: 100%; height: 100%; color: #222; }
|
||||
.slop-kinpaku .catalog-rule-demo--center { display: flex; align-items: center; justify-content: center; gap: 22px; }
|
||||
.slop-kinpaku .catalog-rule-demo--pulse > span:first-child { animation: catalog-rule-pulse 1.5s ease-in-out infinite; }
|
||||
.slop-kinpaku .catalog-rule-demo--terminal { display: flex; align-items: center; justify-content: center; background: #111318; color: #e9edf2; font: 13px ui-monospace, monospace; }
|
||||
.slop-kinpaku .catalog-rule-demo--terminal b { animation: catalog-rule-blink 0.9s steps(2, end) infinite; }
|
||||
.slop-kinpaku .catalog-rule-demo--marquee { display: flex; align-items: center; overflow: hidden; background: #f3eee5; color: #39342e; font: 600 15px Georgia, serif; white-space: nowrap; }
|
||||
.slop-kinpaku .catalog-rule-demo--marquee span { animation: catalog-rule-marquee 8s linear infinite; }
|
||||
.slop-kinpaku .catalog-rule-demo--numbers { display: grid; align-content: center; gap: 10px; padding: 26px 52px; font: 600 13px system-ui, sans-serif; }
|
||||
.slop-kinpaku .catalog-rule-demo--numbers span { display: grid; grid-template-columns: 36px 1fr; align-items: baseline; padding-bottom: 6px; border-bottom: 1px solid #ddd6ca; }
|
||||
.slop-kinpaku .catalog-rule-demo--numbers i { color: #b28620; font: normal 10px ui-monospace, monospace; letter-spacing: 0.12em; }
|
||||
.slop-kinpaku .catalog-rule-demo--console { display: grid; align-content: center; gap: 6px; padding: 26px 34px; background: #17191d; color: #f27070; font-family: ui-monospace, monospace; }
|
||||
.slop-kinpaku .catalog-rule-demo--console small { color: #d5d7dc; }
|
||||
.slop-kinpaku .catalog-rule-demo--console code { color: #9096a0; }
|
||||
.slop-kinpaku .catalog-rule-demo--hidden { display: grid; align-content: center; gap: 9px; padding: 28px 38px; font: 13px system-ui, sans-serif; }
|
||||
.slop-kinpaku .catalog-rule-demo--hidden strong { font-size: 17px; }
|
||||
.slop-kinpaku .catalog-rule-demo--hidden span { opacity: 0.08; }
|
||||
.slop-kinpaku .catalog-rule-demo--scroller { display: flex; align-items: center; gap: 12px; overflow: hidden; padding-left: 28px; background: #eee9df; }
|
||||
.slop-kinpaku .catalog-rule-demo--scroller span { flex: 0 0 112px; height: 94px; border: 1px solid #d4ccbf; border-radius: 14px; background: #fff; }
|
||||
.slop-kinpaku .catalog-rule-demo--occlusion { position: relative; display: grid; place-items: center; overflow: hidden; font: 700 23px system-ui, sans-serif; }
|
||||
.slop-kinpaku .catalog-rule-demo--occlusion span { position: absolute; top: 40px; right: 26px; width: 46%; height: 72px; background: #d5a92d; transform: rotate(-4deg); }
|
||||
.slop-kinpaku .catalog-rule-demo--columns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; overflow: hidden; padding: 20px 42px; }
|
||||
.slop-kinpaku .catalog-rule-demo--columns span { border: 1px solid #d6cec2; background: repeating-linear-gradient(#fff 0 12px, #e8e2d8 12px 14px); }
|
||||
.slop-kinpaku .catalog-rule-demo--columns span:first-child { height: 220px; }
|
||||
.slop-kinpaku .catalog-rule-demo--columns span:last-child { height: 72px; }
|
||||
.slop-kinpaku .catalog-rule-demo--rhythm { display: grid; align-content: center; padding: 24px 42px; }
|
||||
.slop-kinpaku .catalog-rule-demo--rhythm p { width: 82%; height: 25px; margin: 0 0 3px; background: repeating-linear-gradient(#cfc8bc 0 3px, transparent 3px 8px); }
|
||||
.slop-kinpaku .catalog-rule-demo--rhythm h4 { margin: 0 0 21px; font: 700 18px system-ui, sans-serif; }
|
||||
.slop-kinpaku .catalog-rule-demo--rhythm span { width: 100%; height: 4px; margin-bottom: 7px; background: #d8d1c6; }
|
||||
.slop-kinpaku .catalog-rule-demo--rhythm span:last-child { width: 68%; }
|
||||
.slop-kinpaku .catalog-rule-demo--repeat { display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr 1fr; align-items: center; gap: 8px 24px; padding: 26px 42px; font: 13px system-ui, sans-serif; }
|
||||
.slop-kinpaku .catalog-rule-demo--repeat strong { font-size: 18px; }
|
||||
.slop-kinpaku .catalog-rule-demo--repeat button { grid-row: 1 / 3; grid-column: 2; padding: 8px 13px; border: 0; background: #222; color: #fff; }
|
||||
.slop-kinpaku .catalog-rule-demo--token { display: grid; grid-template-columns: auto 1fr; align-content: center; gap: 5px 18px; padding: 24px 38px; font-family: system-ui, sans-serif; }
|
||||
.slop-kinpaku .catalog-rule-demo--token > span { grid-column: 1 / -1; color: #777; font-size: 11px; }
|
||||
.slop-kinpaku .catalog-rule-demo--token strong { grid-row: 2 / 4; font-size: 46px; font-weight: 400; }
|
||||
.slop-kinpaku .catalog-rule-demo--token code { color: #b026ff; }
|
||||
.slop-kinpaku .catalog-rule-demo--token i { color: #a24040; font-size: 11px; }
|
||||
.slop-kinpaku .catalog-rule-demo--swatches,
|
||||
.slop-kinpaku .catalog-rule-demo--radius,
|
||||
.slop-kinpaku .catalog-rule-demo--scale { display: flex; align-items: center; justify-content: center; gap: 14px; }
|
||||
.slop-kinpaku .catalog-rule-demo--swatches span { width: 58px; height: 72px; border: 1px solid #d2cabf; }
|
||||
.slop-kinpaku .catalog-rule-demo .is-outlier { outline: 2px solid #a24040; outline-offset: 3px; }
|
||||
.slop-kinpaku .catalog-rule-demo--radius span { display: grid; width: 62px; height: 62px; place-items: center; border: 1px solid #cfc7bc; background: #fff; font: 11px ui-monospace, monospace; }
|
||||
.slop-kinpaku .catalog-rule-demo--scale span,
|
||||
.slop-kinpaku .catalog-rule-demo--scale b { display: grid; place-items: center; color: #555; font-family: ui-monospace, monospace; }
|
||||
.slop-kinpaku .catalog-rule-demo--scale span:nth-child(1) { font-size: 14px; }
|
||||
.slop-kinpaku .catalog-rule-demo--scale span:nth-child(2) { font-size: 16px; }
|
||||
.slop-kinpaku .catalog-rule-demo--scale span:nth-child(3) { font-size: 24px; }
|
||||
.slop-kinpaku .catalog-rule-demo--scale b { padding: 7px; outline: 2px solid #a24040; color: #a24040; font-size: 19px; }
|
||||
|
||||
@keyframes catalog-rule-pulse { 50% { opacity: 0.72; transform: scale(1.18); } }
|
||||
@keyframes catalog-rule-blink { 50% { opacity: 0; } }
|
||||
@keyframes catalog-rule-marquee { to { transform: translateX(-45%); } }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.slop-kinpaku .catalog-rule-demo--pulse > span:first-child,
|
||||
.slop-kinpaku .catalog-rule-demo--terminal b,
|
||||
.slop-kinpaku .catalog-rule-demo--marquee span { animation: none; }
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.slop-kinpaku .anti-patterns-section--personalized {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.slop-kinpaku .anti-patterns-section--personalized .anti-patterns-section-header {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.slop-kinpaku .catalog-rule-demo--numbers { padding-inline: 28px; }
|
||||
}
|
||||
|
||||
.slop-kinpaku .rule-card-body {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
@@ -805,6 +911,12 @@
|
||||
border-color: oklch(70% 0.12 188 / 0.30);
|
||||
}
|
||||
|
||||
.slop-kinpaku .rule-card-category[data-category="personalized"] {
|
||||
color: var(--ks-kinpaku);
|
||||
background: oklch(78% 0.12 82 / 0.10);
|
||||
border-color: oklch(78% 0.12 82 / 0.34);
|
||||
}
|
||||
|
||||
.slop-kinpaku .rule-card-layer[data-layer="cli"] {
|
||||
color: var(--ks-kinpaku);
|
||||
background: oklch(78% 0.12 82 / 0.10);
|
||||
|
||||
Reference in New Issue
Block a user