feat: premium Claude-style UI for HITL approval cards and autonomous result screen

web/src/components/ApprovalCard.tsx

@@ -18,8 +18,16 @@ interface Props {
     isSubmitting: boolean;
 }
 
-function fmt(name: string): string {
-    return name.replace(/_/g, ' ');
+const STAGE_ICONS: Record<string, string> = {
+    INIT: '⚙', SPEC: '◈', RTL_GEN: '⌨', RTL_FIX: '◪',
+    VERIFICATION: '◉', FORMAL_VERIFY: '◈', COVERAGE_CHECK: '◎',
+    REGRESSION: '↺', SDC_GEN: '⧗', FLOORPLAN: '▣',
+    HARDENING: '⬡', CONVERGENCE_REVIEW: '◎', ECO_PATCH: '⟴',
+    SIGNOFF: '✓', SUCCESS: '✦', FAIL: '✗',
+};
+
+function fmtStage(name: string): string {
+    return name.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
 }
 
 export const ApprovalCard: React.FC<Props> = ({ data, onApprove, onReject, isSubmitting }) => {
@@ -27,7 +35,10 @@ export const ApprovalCard: React.FC<Props> = ({ data, onApprove, onReject, isSub
     const [feedback, setFeedback] = useState('');
 
     const hasWarnings = data.warnings && data.warnings.length > 0;
-    const hasErrors = data.decisions?.some(d => /error|fail/i.test(d));
+    const hasErrors = data.decisions?.some((d: string) => /error|fail/i.test(d));
+    const artifactCount = data.artifacts?.length || 0;
+    const hasNext = data.next_stage_name && data.next_stage_name !== 'DONE';
+    const icon = STAGE_ICONS[data.stage_name] || '◆';
 
     const handleReject = () => {
         onReject(feedback);
@@ -36,72 +47,71 @@ export const ApprovalCard: React.FC<Props> = ({ data, onApprove, onReject, isSub
     };
 
     return (
-        <div className="hitl-approval">
-            {/* Main single-line content */}
-            <div className="hitl-approval-row">
-                <div className="hitl-approval-left">
-                    {(hasWarnings || hasErrors) && (
-                        <span
-                            className={`hitl-approval-dot ${hasErrors ? 'hitl-dot--error' : 'hitl-dot--warn'}`}
-                        />
-                    )}
-                    <span className="hitl-approval-stage">{fmt(data.stage_name)}</span>
-                </div>
-                <p className="hitl-approval-summary">
-                    {data.summary || `${fmt(data.stage_name)} completed successfully.`}
-                </p>
-                <div className="hitl-approval-actions">
-                    {!showFeedback && (
-                        <button className="hitl-fb-link" onClick={() => setShowFeedback(true)}>
-                            give feedback
-                        </button>
-                    )}
-                    <button
-                        className="hitl-continue"
-                        onClick={onApprove}
-                        disabled={isSubmitting}
-                    >
-                        {isSubmitting ? 'Continuing…' : 'Continue →'}
-                    </button>
+        <div className={`ac-card ${hasErrors ? 'ac-card--error' : hasWarnings ? 'ac-card--warn' : 'ac-card--ok'}`}>
+
+            {/* Header — stage identity */}
+            <div className="ac-header">
+                <div className="ac-stage-id">
+                    <span className="ac-stage-symbol">{icon}</span>
+                    <span className="ac-stage-label">{fmtStage(data.stage_name)}</span>
+                    {hasErrors && <span className="ac-badge ac-badge--error">Issue detected</span>}
+                    {!hasErrors && hasWarnings && <span className="ac-badge ac-badge--warn">Warning</span>}
                 </div>
+                {artifactCount > 0 && (
+                    <span className="ac-artifact-pill">
+                        {artifactCount} artifact{artifactCount !== 1 ? 's' : ''}
+                    </span>
+                )}
             </div>
 
-            {/* Inline feedback field */}
-            {showFeedback && (
-                <div className="hitl-approval-feedback">
-                    <input
-                        className="hitl-fb-input"
-                        type="text"
-                        placeholder="What should the agent do differently?"
-                        value={feedback}
-                        onChange={e => setFeedback(e.target.value)}
-                        autoFocus
-                        onKeyDown={e => {
-                            if (e.key === 'Enter') handleReject();
-                            if (e.key === 'Escape') {
-                                setShowFeedback(false);
-                                setFeedback('');
-                            }
-                        }}
-                    />
-                    <button
-                        className="hitl-reject-pill"
-                        onClick={handleReject}
-                        disabled={isSubmitting}
-                    >
-                        {isSubmitting ? 'Rejecting…' : 'Reject'}
-                    </button>
-                    <button
-                        className="hitl-fb-cancel"
-                        onClick={() => {
-                            setShowFeedback(false);
-                            setFeedback('');
-                        }}
-                    >
-                        ×
-                    </button>
+            {/* Summary — primary content */}
+            <p className="ac-summary">
+                {data.summary || `${fmtStage(data.stage_name)} completed successfully.`}
+            </p>
+
+            {/* Next stage preview */}
+            {hasNext && data.next_stage_preview && (
+                <div className="ac-next-hint">
+                    <span className="ac-next-arrow">↓</span>
+                    <span className="ac-next-text">{data.next_stage_preview}</span>
                 </div>
             )}
+
+            {/* Action footer */}
+            <div className="ac-footer">
+                {!showFeedback ? (
+                    <>
+                        <button className="ac-give-feedback" onClick={() => setShowFeedback(true)}>
+                            Give feedback
+                        </button>
+                        <button className="ac-continue-btn" onClick={onApprove} disabled={isSubmitting}>
+                            {isSubmitting ? 'Continuing…' : 'Continue'}
+                            {!isSubmitting && <span className="ac-chevron">→</span>}
+                        </button>
+                    </>
+                ) : (
+                    <div className="ac-feedback-row">
+                        <input
+                            className="ac-feedback-input"
+                            type="text"
+                            placeholder="What should the agent do differently?"
+                            value={feedback}
+                            onChange={e => setFeedback(e.target.value)}
+                            autoFocus
+                            onKeyDown={e => {
+                                if (e.key === 'Enter') handleReject();
+                                if (e.key === 'Escape') { setShowFeedback(false); setFeedback(''); }
+                            }}
+                        />
+                        <button className="ac-reject-btn" onClick={handleReject} disabled={isSubmitting}>
+                            {isSubmitting ? 'Sending…' : 'Reject & redirect'}
+                        </button>
+                        <button className="ac-cancel-btn" onClick={() => { setShowFeedback(false); setFeedback(''); }}>
+                            Cancel
+                        </button>
+                    </div>
+                )}
+            </div>
         </div>
     );
 };

web/src/components/ChipSummary.tsx

@@ -9,6 +9,291 @@ interface Props {
     onReset: () => void;
 }
 
+function StatCell({ label, value, warn }: { label: string; value: any; warn?: boolean }) {
+    return (
+        <div className="cs-stat">
+            <span className={`cs-stat-value${warn ? ' cs-stat-value--warn' : ''}`}>
+                {value ?? '—'}
+            </span>
+            <span className="cs-stat-label">{label}</span>
+        </div>
+    );
+}
+
+function CheckRow({ label, passed, detail }: { label: string; passed: boolean | null; detail?: string }) {
+    const status = passed === true ? 'pass' : passed === false ? 'fail' : 'skip';
+    return (
+        <div className="cs-check-row">
+            <span className={`cs-check-icon cs-check-icon--${status}`}>
+                {status === 'pass' ? '✓' : status === 'fail' ? '✕' : '–'}
+            </span>
+            <div className="cs-check-body">
+                <span className="cs-check-label">{label}</span>
+                {detail && <span className="cs-check-detail">{detail}</span>}
+            </div>
+        </div>
+    );
+}
+
+export const ChipSummary: React.FC<Props> = ({ designName, result, jobStatus, events, onReset }) => {
+    const success = jobStatus === 'done';
+    const metrics = result?.metrics || {};
+    const convergence = result?.convergence_history || [];
+    const spec = result?.spec || '';
+    const rtlSnippet = result?.rtl_snippet || '';
+    const strategy = result?.strategy || '';
+    const buildTimeSec = result?.build_time_s || 0;
+    const buildTimeMin = Math.round(buildTimeSec / 60);
+    const coverage = result?.coverage || {};
+    const formalResult = result?.formal_result || '';
+    const signoffResult = result?.signoff_result || '';
+
+    const selfHeal = result?.self_heal || {
+        stage_exception_count: events.filter(e => /stage .* exception/i.test(e?.message || '')).length,
+        formal_regen_count: events.filter(e => /regenerating sva/i.test(e?.message || '')).length,
+        coverage_best_restore_count: events.filter(e => /restoring best testbench/i.test(e?.message || '')).length,
+        coverage_regression_reject_count: events.filter(e => /regressed coverage/i.test(e?.message || '')).length,
+        deterministic_tb_fallback_count: events.filter(e => /deterministic tb fallback/i.test(e?.message || '')).length,
+    };
+
+    const checkpointCount = events.filter(e => e.type === 'transition' || e.type === 'checkpoint').length;
+    const syntaxPassed = events.some(e => /syntax.*pass|lint.*clean/i.test(e?.message || ''));
+    const simPassed = events.some(e => /test passed|simulation.*pass/i.test(e?.message || ''));
+    const formalPassed = formalResult ? /pass|success/i.test(formalResult) : events.some(e => /formal.*pass/i.test(e?.message || ''));
+    const coveragePassed = events.some(e => /coverage passed/i.test(e?.message || ''));
+    const signoffPassed = signoffResult ? /pass|success/i.test(signoffResult) : null;
+    const lineCov = coverage?.line || coverage?.line_pct;
+    const branchCov = coverage?.branch || coverage?.branch_pct;
+
+    const totalHealActions =
+        (selfHeal.stage_exception_count || 0) +
+        (selfHeal.formal_regen_count || 0) +
+        (selfHeal.coverage_best_restore_count || 0) +
+        (selfHeal.coverage_regression_reject_count || 0) +
+        (selfHeal.deterministic_tb_fallback_count || 0);
+
+    const hasMetrics = metrics.wns !== undefined || metrics.area || metrics.power || metrics.gate_count;
+    const failureExplanation = result?.failure_explanation;
+    const failureSuggestion = result?.failure_suggestion;
+
+    return (
+        <div className="cs-root">
+
+            {/* ── Banner ─────────────────────────────── */}
+            <motion.div
+                className={`cs-banner ${success ? 'cs-banner--success' : 'cs-banner--fail'}`}
+                initial={{ opacity: 0, y: -8 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.35 }}
+            >
+                <div className="cs-banner-dot" />
+                <div className="cs-banner-body">
+                    <h1 className="cs-banner-title">
+                        {success ? `${designName} is ready` : 'Build stopped'}
+                    </h1>
+                    <p className="cs-banner-sub">
+                        {success
+                            ? [
+                                buildTimeMin > 0 ? `${buildTimeMin} min` : null,
+                                checkpointCount > 0 ? `${checkpointCount} checkpoints passed` : null,
+                                strategy || null,
+                              ].filter(Boolean).join(' · ')
+                            : `${designName} · Review the log below for details`
+                        }
+                    </p>
+                </div>
+            </motion.div>
+
+            {/* ── Silicon Metrics ─────────────────────── */}
+            {success && hasMetrics && (
+                <div className="cs-section">
+                    <h2 className="cs-section-title">Silicon Metrics</h2>
+                    <div className="cs-stats-row">
+                        <StatCell
+                            label="Worst negative slack"
+                            value={metrics.wns !== undefined ? `${metrics.wns} ns` : null}
+                            warn={metrics.wns !== undefined && metrics.wns < 0}
+                        />
+                        <div className="cs-stat-divider" />
+                        <StatCell label="Die area" value={metrics.area} />
+                        <div className="cs-stat-divider" />
+                        <StatCell label="Total power" value={metrics.power} />
+                        <div className="cs-stat-divider" />
+                        <StatCell label="Gate count" value={metrics.gate_count} />
+                    </div>
+                </div>
+            )}
+
+            {/* ── Verification ────────────────────────── */}
+            <div className="cs-section">
+                <h2 className="cs-section-title">Verification</h2>
+                <div className="cs-checks">
+                    <CheckRow
+                        label="RTL syntax & lint"
+                        passed={syntaxPassed || null}
+                        detail={syntaxPassed ? 'Clean — Verilator lint-only' : undefined}
+                    />
+                    <CheckRow
+                        label="Functional simulation"
+                        passed={simPassed || null}
+                        detail={simPassed ? 'TEST PASSED' : undefined}
+                    />
+                    <CheckRow
+                        label="Formal property verification"
+                        passed={formalPassed}
+                        detail={formalResult ? formalResult.substring(0, 60) : undefined}
+                    />
+                    <CheckRow
+                        label="Coverage closure"
+                        passed={coveragePassed || null}
+                        detail={lineCov ? `Line ${lineCov}%${branchCov ? ` · Branch ${branchCov}%` : ''}` : undefined}
+                    />
+                    <CheckRow
+                        label="DRC / LVS signoff"
+                        passed={signoffPassed}
+                        detail={signoffResult ? signoffResult.substring(0, 60) : (success ? 'Physical checks completed' : undefined)}
+                    />
+                </div>
+            </div>
+
+            {/* ── Self-Healing ────────────────────────── */}
+            {totalHealActions > 0 && (
+                <div className="cs-section">
+                    <h2 className="cs-section-title">Self-Healing Activity</h2>
+                    <div className="cs-heal-list">
+                        {selfHeal.stage_exception_count > 0 && (
+                            <div className="cs-heal-item">
+                                Stage exception guards
+                                <span className="cs-heal-count">{selfHeal.stage_exception_count}×</span>
+                            </div>
+                        )}
+                        {selfHeal.formal_regen_count > 0 && (
+                            <div className="cs-heal-item">
+                                Formal SVA regeneration
+                                <span className="cs-heal-count">{selfHeal.formal_regen_count}×</span>
+                            </div>
+                        )}
+                        {selfHeal.coverage_regression_reject_count > 0 && (
+                            <div className="cs-heal-item">
+                                Testbench regression rejections
+                                <span className="cs-heal-count">{selfHeal.coverage_regression_reject_count}×</span>
+                            </div>
+                        )}
+                        {selfHeal.coverage_best_restore_count > 0 && (
+                            <div className="cs-heal-item">
+                                Best testbench restores
+                                <span className="cs-heal-count">{selfHeal.coverage_best_restore_count}×</span>
+                            </div>
+                        )}
+                        {selfHeal.deterministic_tb_fallback_count > 0 && (
+                            <div className="cs-heal-item">
+                                Deterministic testbench fallbacks
+                                <span className="cs-heal-count">{selfHeal.deterministic_tb_fallback_count}×</span>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            )}
+
+            {/* ── Architecture Spec ───────────────────── */}
+            {spec && (
+                <div className="cs-section">
+                    <h2 className="cs-section-title">Architecture Specification</h2>
+                    <div className="cs-code-block">
+                        <pre className="cs-pre cs-pre--prose">
+                            {spec.substring(0, 1200)}{spec.length > 1200 ? '\n…' : ''}
+                        </pre>
+                    </div>
+                </div>
+            )}
+
+            {/* ── RTL Preview ─────────────────────────── */}
+            {rtlSnippet && (
+                <div className="cs-section">
+                    <h2 className="cs-section-title">RTL Preview</h2>
+                    <div className="cs-code-block cs-code-block--dark">
+                        <pre className="cs-pre cs-pre--code">
+                            {rtlSnippet.substring(0, 1200)}{rtlSnippet.length > 1200 ? '\n// …' : ''}
+                        </pre>
+                    </div>
+                </div>
+            )}
+
+            {/* ── Convergence History ─────────────────── */}
+            {convergence.length > 0 && (
+                <div className="cs-section">
+                    <h2 className="cs-section-title">Convergence History</h2>
+                    <div className="cs-table-wrap">
+                        <table className="cs-table">
+                            <thead>
+                                <tr>
+                                    <th>Iter</th><th>WNS (ns)</th><th>TNS (ns)</th>
+                                    <th>Congestion %</th><th>Area (µm²)</th><th>Power (W)</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {convergence.slice(-5).map((s: any, i: number) => (
+                                    <tr key={i}>
+                                        <td>{s.iteration}</td>
+                                        <td data-good={s.wns >= 0 ? 'true' : 'false'}>{s.wns?.toFixed(3)}</td>
+                                        <td>{s.tns?.toFixed(3)}</td>
+                                        <td>{s.congestion?.toFixed(2)}</td>
+                                        <td>{s.area_um2?.toFixed(0)}</td>
+                                        <td>{s.power_w?.toExponential(2)}</td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            )}
+
+            {/* ── Failure Detail ──────────────────────── */}
+            {!success && (failureExplanation || result?.error) && (
+                <div className="cs-section">
+                    <h2 className="cs-section-title">What went wrong</h2>
+                    {failureExplanation && (
+                        <p className="cs-fail-explanation">{failureExplanation}</p>
+                    )}
+                    {failureSuggestion && (
+                        <p className="cs-fail-suggestion">
+                            <span className="cs-fail-suggestion-label">Try:</span>
+                            {failureSuggestion}
+                        </p>
+                    )}
+                    {result?.error && !failureExplanation && (
+                        <div className="cs-code-block">
+                            <pre className="cs-pre cs-pre--error">
+                                {String(result.error).substring(0, 500)}
+                            </pre>
+                        </div>
+                    )}
+                </div>
+            )}
+
+            {/* ── Actions ─────────────────────────────── */}
+            <div className="cs-actions">
+                <motion.button
+                    className="cs-reset-btn"
+                    onClick={onReset}
+                    whileHover={{ scale: 1.02 }}
+                    whileTap={{ scale: 0.98 }}
+                >
+                    Build another chip
+                </motion.button>
+            </div>
+        </div>
+    );
+};
+
+interface Props {
+    designName: string;
+    result: any;
+    jobStatus: string;
+    events: any[];
+    onReset: () => void;
+}
+
 function MetricCard({ label, value, icon, color }: { label: string; value: any; icon: string; color: string }) {
     return (
         <motion.div

web/src/hitl.css

@@ -1600,3 +1600,225 @@
         text-align: center;
     }
 }
+
+
+/* ════════════════════════════════════════════════════════════════════
+   APPROVAL CARD  (ac-*)
+   Premium, minimal — stage checkpoint card with next-step context
+   ════════════════════════════════════════════════════════════════════ */
+
+.ac-card {
+    position: relative;
+    background: var(--bg-elevated);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    padding: 1.125rem 1.25rem 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.625rem;
+    padding-left: 1.5rem; /* space for accent bar */
+}
+
+.ac-card::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 12%;
+    bottom: 12%;
+    width: 3px;
+    border-radius: 0 2px 2px 0;
+    transition: background 200ms;
+}
+
+.ac-card--ok::before    { background: var(--green); }
+.ac-card--warn::before  { background: var(--amber); }
+.ac-card--error::before { background: var(--red); }
+
+/* Header */
+.ac-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+}
+
+.ac-stage-id {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+}
+
+.ac-stage-symbol {
+    font-size: 0.6875rem;
+    color: var(--text-tertiary);
+    line-height: 1;
+}
+
+.ac-stage-label {
+    font-size: 0.6875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.09em;
+    color: var(--text-secondary);
+}
+
+.ac-badge {
+    font-size: 0.625rem;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    padding: 0.125rem 0.4375rem;
+    border-radius: 4px;
+}
+
+.ac-badge--warn  { background: rgba(212,124,58,0.1);  color: var(--amber); }
+.ac-badge--error { background: rgba(192,57,43,0.1);   color: var(--red);   }
+
+.ac-artifact-pill {
+    font-size: 0.6875rem;
+    color: var(--text-tertiary);
+    font-family: 'JetBrains Mono', monospace;
+    white-space: nowrap;
+}
+
+/* Summary */
+.ac-summary {
+    font-size: 0.875rem;
+    line-height: 1.65;
+    color: var(--text-primary);
+    margin: 0;
+}
+
+/* Next stage hint */
+.ac-next-hint {
+    display: flex;
+    align-items: baseline;
+    gap: 0.375rem;
+    font-size: 0.775rem;
+    color: var(--text-tertiary);
+    padding: 0.5rem 0 0.125rem;
+    border-top: 1px solid var(--border-subtle);
+}
+
+.ac-next-arrow {
+    font-size: 0.75rem;
+    opacity: 0.5;
+    flex-shrink: 0;
+}
+
+.ac-next-text {
+    line-height: 1.45;
+}
+
+/* Footer */
+.ac-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.625rem;
+    padding-top: 0.5rem;
+    border-top: 1px solid var(--border-subtle);
+}
+
+.ac-give-feedback {
+    background: none;
+    border: none;
+    font-family: inherit;
+    font-size: 0.775rem;
+    color: var(--text-tertiary);
+    cursor: pointer;
+    padding: 0;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    transition: color 120ms;
+    margin-right: auto;
+}
+
+.ac-give-feedback:hover { color: var(--text-secondary); }
+
+.ac-continue-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    background: var(--green);
+    color: #fff;
+    border: none;
+    font-family: inherit;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    padding: 0.4375rem 1rem;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: opacity 150ms, transform 150ms;
+    letter-spacing: 0.01em;
+}
+
+.ac-continue-btn:hover:not(:disabled) {
+    opacity: 0.88;
+    transform: translateY(-1px);
+}
+
+.ac-continue-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.ac-chevron {
+    font-size: 0.9rem;
+    line-height: 1;
+    opacity: 0.85;
+}
+
+/* Feedback row */
+.ac-feedback-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+}
+
+.ac-feedback-input {
+    flex: 1;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 0.375rem 0.625rem;
+    font-family: inherit;
+    font-size: 0.8125rem;
+    color: var(--text-primary);
+    outline: none;
+    transition: border-color 150ms;
+}
+
+.ac-feedback-input:focus         { border-color: var(--text-secondary); }
+.ac-feedback-input::placeholder  { color: var(--text-tertiary); }
+
+.ac-reject-btn {
+    background: transparent;
+    border: 1px solid rgba(192,57,43,0.3);
+    color: var(--red);
+    font-family: inherit;
+    font-size: 0.775rem;
+    font-weight: 500;
+    padding: 0.375rem 0.75rem;
+    border-radius: 6px;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: all 120ms;
+}
+
+.ac-reject-btn:hover:not(:disabled) { background: rgba(192,57,43,0.05); border-color: var(--red); }
+.ac-reject-btn:disabled             { opacity: 0.5; cursor: not-allowed; }
+
+.ac-cancel-btn {
+    background: none;
+    border: none;
+    font-family: inherit;
+    font-size: 0.775rem;
+    color: var(--text-tertiary);
+    cursor: pointer;
+    padding: 0.375rem 0.25rem;
+    transition: color 120ms;
+}
+
+.ac-cancel-btn:hover { color: var(--text-secondary); }

web/src/index.css

@@ -2631,3 +2631,351 @@ body {
   }
 }
 
+
+/* ════════════════════════════════════════════════════════════════════
+   CHIP SUMMARY  (cs-*)
+   Premium result screen — clean, editorial, minimal
+   ════════════════════════════════════════════════════════════════════ */
+
+.cs-root {
+  padding: 2rem 2.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  max-width: 860px;
+  margin: 0 auto;
+}
+
+/* ── Banner ─────────────────────────────────────── */
+.cs-banner {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  padding: 1.25rem 1.5rem;
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  background: var(--bg-card);
+}
+
+.cs-banner--success {
+  border-color: rgba(74, 124, 89, 0.28);
+  background: rgba(74, 124, 89, 0.04);
+}
+
+.cs-banner--fail {
+  border-color: rgba(192, 57, 43, 0.22);
+  background: rgba(192, 57, 43, 0.03);
+}
+
+.cs-banner-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  margin-top: 0.45rem;
+}
+
+.cs-banner--success .cs-banner-dot {
+  background: #4a7c59;
+  box-shadow: 0 0 0 3px rgba(74, 124, 89, 0.15);
+}
+
+.cs-banner--fail .cs-banner-dot {
+  background: #c0392b;
+  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
+}
+
+.cs-banner-body { flex: 1; min-width: 0; }
+
+.cs-banner-title {
+  font-size: 1.1875rem;
+  font-weight: 600;
+  color: var(--text);
+  margin: 0 0 0.3rem;
+  line-height: 1.3;
+}
+
+.cs-banner-sub {
+  font-size: 0.8125rem;
+  color: var(--text-mid);
+  margin: 0;
+  line-height: 1.5;
+}
+
+/* ── Section ─────────────────────────────────────── */
+.cs-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.cs-section-title {
+  font-size: 0.6875rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--text-dim);
+  margin: 0;
+  padding-bottom: 0.625rem;
+  border-bottom: 1px solid var(--border);
+}
+
+/* ── Stats Row ───────────────────────────────────── */
+.cs-stats-row {
+  display: flex;
+  align-items: stretch;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.cs-stat {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  padding: 1rem 1.25rem;
+}
+
+.cs-stat-divider {
+  width: 1px;
+  background: var(--border);
+  flex-shrink: 0;
+  margin: 0.75rem 0;
+}
+
+.cs-stat-value {
+  font-size: 1.0625rem;
+  font-weight: 600;
+  color: var(--text);
+  font-family: 'Fira Code', 'JetBrains Mono', monospace;
+  line-height: 1.2;
+}
+
+.cs-stat-value--warn { color: var(--warn); }
+
+.cs-stat-label {
+  font-size: 0.7rem;
+  color: var(--text-dim);
+  font-weight: 500;
+  line-height: 1.3;
+}
+
+/* ── Verification Checks ─────────────────────────── */
+.cs-checks {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  overflow: hidden;
+  background: var(--bg-card);
+}
+
+.cs-check-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.7rem 1rem;
+  border-bottom: 1px solid var(--border);
+  transition: background 120ms;
+}
+
+.cs-check-row:last-child  { border-bottom: none; }
+.cs-check-row:hover       { background: var(--bg-hover); }
+
+.cs-check-icon {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.625rem;
+  font-weight: 800;
+  flex-shrink: 0;
+}
+
+.cs-check-icon--pass { background: rgba(74,124,89,0.1);  color: #4a7c59; border: 1px solid rgba(74,124,89,0.2);  }
+.cs-check-icon--fail { background: rgba(192,57,43,0.08); color: #c0392b; border: 1px solid rgba(192,57,43,0.15); }
+.cs-check-icon--skip { background: rgba(0,0,0,0.03);     color: var(--text-dim); border: 1px solid var(--border); }
+
+.cs-check-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
+
+.cs-check-label {
+  font-size: 0.8375rem;
+  font-weight: 500;
+  color: var(--text);
+}
+
+.cs-check-detail {
+  font-size: 0.725rem;
+  color: var(--text-dim);
+  font-family: 'Fira Code', monospace;
+}
+
+/* ── Self-Healing ────────────────────────────────── */
+.cs-heal-list {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.cs-heal-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.575rem 0.875rem;
+  font-size: 0.8125rem;
+  color: var(--text-mid);
+  border-bottom: 1px solid var(--border);
+}
+
+.cs-heal-item:last-child { border-bottom: none; }
+
+.cs-heal-count {
+  font-family: 'Fira Code', monospace;
+  font-size: 0.75rem;
+  color: var(--text-dim);
+  font-weight: 600;
+}
+
+/* ── Code Blocks ─────────────────────────────────── */
+.cs-code-block {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.cs-code-block--dark {
+  background: #1a1917;
+  border-color: #2d2b28;
+}
+
+.cs-pre {
+  margin: 0;
+  padding: 1rem 1.125rem;
+  overflow: auto;
+  max-height: 220px;
+  font-size: 0.775rem;
+  line-height: 1.6;
+}
+
+.cs-pre--prose {
+  font-family: inherit;
+  color: var(--text);
+  background: var(--bg);
+  white-space: pre-wrap;
+}
+
+.cs-pre--code {
+  font-family: 'Fira Code', 'JetBrains Mono', monospace;
+  color: #e2ddd8;
+  background: #1a1917;
+  white-space: pre;
+}
+
+.cs-pre--error {
+  font-family: 'Fira Code', monospace;
+  color: #c0392b;
+  background: rgba(192, 57, 43, 0.04);
+  white-space: pre-wrap;
+}
+
+/* ── Convergence Table ───────────────────────────── */
+.cs-table-wrap {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  overflow: auto;
+}
+
+.cs-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.775rem;
+}
+
+.cs-table th {
+  background: var(--bg);
+  color: var(--text-dim);
+  padding: 0.5rem 0.875rem;
+  text-align: left;
+  border-bottom: 1px solid var(--border);
+  font-size: 0.6875rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.cs-table td {
+  color: var(--text);
+  padding: 0.4375rem 0.875rem;
+  border-bottom: 1px solid var(--border);
+  font-family: 'Fira Code', monospace;
+}
+
+.cs-table tr:last-child td           { border-bottom: none; }
+.cs-table tbody tr:hover td          { background: var(--bg-hover); }
+.cs-table td[data-good="false"]      { color: #c0392b; }
+.cs-table td[data-good="true"]       { color: #4a7c59; }
+
+/* ── Failure Detail ──────────────────────────────── */
+.cs-fail-explanation {
+  font-size: 0.875rem;
+  line-height: 1.65;
+  color: var(--text);
+  margin: 0 0 0.625rem;
+}
+
+.cs-fail-suggestion {
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: var(--text-mid);
+  margin: 0;
+  display: flex;
+  gap: 0.375rem;
+}
+
+.cs-fail-suggestion-label {
+  font-weight: 600;
+  color: var(--text-dim);
+  flex-shrink: 0;
+}
+
+/* ── Actions ─────────────────────────────────────── */
+.cs-actions {
+  display: flex;
+  justify-content: center;
+  padding: 0.5rem 0 2.5rem;
+}
+
+.cs-reset-btn {
+  background: var(--accent);
+  color: #fff;
+  border: none;
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  padding: 0.625rem 1.75rem;
+  border-radius: 8px;
+  cursor: pointer;
+  letter-spacing: 0.01em;
+  box-shadow: 0 1px 4px rgba(201, 100, 62, 0.2);
+  transition: opacity 150ms, transform 150ms, box-shadow 150ms;
+}
+
+.cs-reset-btn:hover {
+  opacity: 0.9;
+  transform: translateY(-1px);
+  box-shadow: 0 3px 10px rgba(201, 100, 62, 0.28);
+}
+
+/* ── Responsive ─────────────────────────────────── */
+@media (max-width: 640px) {
+  .cs-root         { padding: 1.25rem 1rem; gap: 1.5rem; }
+  .cs-stats-row    { flex-direction: column; }
+  .cs-stat-divider { width: auto; height: 1px; margin: 0; }
+}
+