tidaldb/tests/e2e/demo/support/proof-panel.ts
jordan 15f6b11187 test(e2e): Playwright evidence harness for the deploy-verification runbook
Turns docs/runbooks/deploy-verification.md from prose into 32 executable checks
against the live orchard9-k3sf cluster, and it found real defects on its first
run — including in the runbook it verifies.

WHY PLAYWRIGHT, HONESTLY
tidalDB serves zero HTML (no text/html, no Html(), 10 JSON routes), so this uses
Playwright in three distinct roles rather than pretending there is a UI:
  * request fixture as a real HTTP client for DNS/TLS/auth/quorum/404;
  * a browser for the only genuine screens in the chain, Grafana;
  * a test harness for cluster-plane checks with no HTTP surface, shelling out
    to kubectl and attaching the real transcript as evidence.

WHAT IT CAUGHT
  * The runbook asserted the operator/data credential split was "not active yet
    - requires an image roll". globalSetup read the live image and the live
    secret; a probe returned data->403, admin->200. It had been enforcing the
    whole time. Section 9 rewritten. (BUG-001)
  * docs/ops/grafana-tidaldb.json shipped datasource uid ${DS_PROMETHEUS} - a
    Grafana export-for-sharing placeholder with no __inputs block to resolve it.
    Under ConfigMap provisioning every panel queried a datasource that did not
    exist, so the whole board was blank. The API said "loaded" and I had only
    ever checked the API. 41 refs fixed here, 58 across the fleet ConfigMap,
    which was also blanking the postgres and redis dashboards. (BUG-007)
  * Stat panels used calcs "lastNonNull". Grafana's reducer is "lastNotNull", so
    no value was ever computed and Cluster health / Reseed pending / Indexed
    vectors rendered as empty boxes. I chased panel width and then panel height
    before comparing against a working stat panel elsewhere in the same Grafana.
    A spelling error wearing a layout bug's clothes. (BUG-009)
  * The namespace variable defaulted to All, so cluster panels silently included
    tidaldb-586b544c8-vpkmw from the superseded standalone deployment. Latency
    legends read "p50 p50 p50" with no way to tell the nodes apart. Both fixed.
  * "5xx ratio" rendered "No data" as large green text - at a glance a healthy
    value. And Fleet state gave three fields one shared green threshold, so
    reseed_required=1 would have shown GREEN during the exact incident the panel
    exists to surface. Split into three panels with per-field mappings.
  * tidalctl cluster-status exits 2 on a FULLY CONVERGED cluster, because the
    aggregated endpoint reports healthy peers as region=null applied=0
    reachable=false. The runbook claimed `cluster-status && deploy` was a safe
    gate; that claim came from an exit code masked by a shell pipeline. The gate
    can never pass here. Documented, test pins it, engine defect recorded.
    (BUG-005)
  * The deployed image writes ANSI colour into container logs, which the
    collector stores verbatim. Already fixed in logging.rs, not yet rolled;
    pinned as a tripwire. (BUG-006)
  * The runbook's own backup command sorted ALL backups by timestamp and
    selected a restore-canary run: 20 items, one volume, a meaningless pass.
    Now filters on the schedule label the freshness alert actually watches.

DEFECTS FOUND BY LOOKING AT THE SCREENS
Six of the first eight captures were slop and were fixed, not promoted:
230-350px of dead space; a verdict that rendered "exit code 2" in green; the
1600x1800 dashboard scaled into 16:9 until illegible (now clipped to the
evidence band using real element bounds); the dream beat whose caption described
a contradiction the image did not show (now a purpose-built capture holding the
committed doc text, the running image, and the live 403/200 side by side); and a
one-frame blink to bare background at every scene boundary, because Remotion
Sequences do not overlap and both scenes sat at opacity 0 on the boundary frame.

TRIPWIRES IN THE HONEST DIRECTION
Three tests assert what is ABSENT - zero tidaldb_http_* families, JSON_LOGS
unset, plain-text logs - and each carries the message "good news, roll the
runbook section from pending to live". The metric-absence test also asserts the
baseline family count, so "absent" cannot pass for "the scrape failed". That is
the drift that made section 9 stale in the first place.

Regression config uses workers:1 and retries:0 deliberately: a live-cluster
check that only passes on the second attempt has told you something true.

Verified: 32 passed (46.8s); 9 demo captures each asserting before photographing;
tsc clean; render 82.05s 1920x1080 h264, 0 empty frames across 10 boundaries;
every promoted image inspected individually and judged perfect; walk-the-render
ledger complete with no fails.
2026-08-23 14:03:29 -06:00

242 lines
8.3 KiB
TypeScript

/**
* Renders REAL captured command output into a legible proof image.
*
* This is a presentation layer over evidence, never a substitute for it. Every
* line rendered here was produced by a command that actually ran against the
* live cluster in this same test run — the text is passed through verbatim and
* HTML-escaped, never composed or edited. The header states the exact command
* so a viewer can re-run it.
*
* Why render terminal output at all: tidalDB has no operator web UI, so most of
* the runbook's evidence is stdout. A screenshot of a terminal is the honest way
* to show that to someone, and for this audience — an operator, judged at Kyle
* Kingsbury's bar — real command output IS the credibility signal. The
* alternative would be inventing a UI that does not exist.
*/
import { createHash } from 'node:crypto';
import { mkdir, writeFile } from 'node:fs/promises';
import { dirname, join } from 'node:path';
import type { Page, TestInfo } from '@playwright/test';
import { redact } from '../../support/env';
export const CAPTURE_WIDTH = 1600;
export const CAPTURE_HEIGHT = 900;
/** Where the demo capture run writes its images before review. */
export const CAPTURE_DIR = join('test-results', 'demo-captures');
export type ProofLine = {
/** The command exactly as executed. */
command: string;
/** Its verbatim output. */
output: string;
/** What this line proves, in the viewer's vocabulary. */
verdict?: string;
/** Marks a deliberately-negative result (a refusal that should happen). */
negative?: boolean;
};
export type ProofPanel = {
captureId: string;
capabilityId: string;
title: string;
/** One sentence: what an operator learns from this screen. */
subtitle: string;
blocks: ProofLine[];
/** Optional footer, e.g. an explicit caveat. */
footnote?: string;
};
export type CaptureRecord = {
id: string;
capabilityId: string;
testId: string;
file: string;
expected: string;
businessPurpose: string;
personas: string[];
width: number;
height: number;
contentHash: string;
audienceVerdict: 'pending' | 'perfect' | 'acceptable-with-note' | 'slop';
auditStatus: 'pending' | 'pass' | 'fail';
};
const escapeHtml = (value: string): string =>
value
.replace(/&/g, '&')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;');
/**
* Terminal-styled document. Colours are limited to three roles — command,
* output, verdict — so nothing on screen implies a meaning it does not have. A
* refusal that is SUPPOSED to happen is marked as expected rather than red,
* because a red screen in a verification demo reads as a failure.
*/
function panelHtml(panel: ProofPanel): string {
const blocks = panel.blocks
.map((block) => {
const verdict = block.verdict
? `<div class="verdict ${block.negative ? 'expected' : 'good'}">${escapeHtml(
block.verdict,
)}</div>`
: '';
return `
<section class="block">
<div class="cmd"><span class="prompt">$</span> ${escapeHtml(block.command)}</div>
<pre class="out">${escapeHtml(block.output.trimEnd())}</pre>
${verdict}
</section>`;
})
.join('\n');
return `<!doctype html>
<html><head><meta charset="utf-8"><style>
:root {
--bg: #0d1117; --panel: #131922; --line: #222c3a;
--text: #d6deeb; --dim: #7c8ba1;
--cmd: #79c0ff; --good: #56d364; --expected: #d29922;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: ${CAPTURE_WIDTH}px; height: ${CAPTURE_HEIGHT}px; }
body {
background: var(--bg); color: var(--text);
font: 15px/1.55 ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
padding: 44px 56px; display: flex; flex-direction: column;
}
header { border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 24px; }
h1 {
margin: 0 0 8px; font-size: 30px; letter-spacing: -0.2px; font-weight: 650;
font-family: ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
}
.sub {
margin: 0; color: var(--dim); font-size: 16px; max-width: 1150px;
font-family: ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
}
/* flex:1 + centred: a sparse panel reads as a composed slide instead of a
page that ran out of content, which is how 230-350px of dead space looked
on five of the first eight captures. */
.blocks {
display: flex; flex-direction: column; gap: 18px; overflow: hidden;
flex: 1; justify-content: center;
}
.block { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; }
.cmd { color: var(--cmd); font-size: 14px; margin-bottom: 10px; word-break: break-all; }
.prompt { color: var(--dim); margin-right: 8px; }
pre.out {
margin: 0; white-space: pre-wrap; word-break: break-word;
font-size: 14.5px; line-height: 1.5; color: var(--text);
}
.verdict {
margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line);
font-size: 14.5px; font-weight: 600;
font-family: ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
}
.verdict.good { color: var(--good); }
.verdict.expected { color: var(--expected); }
footer {
margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line);
color: var(--dim); font-size: 13.5px;
font-family: ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
}
</style></head>
<body>
<header>
<h1>${escapeHtml(panel.title)}</h1>
<p class="sub">${escapeHtml(panel.subtitle)}</p>
</header>
<div class="blocks">${blocks}</div>
${panel.footnote ? `<footer>${escapeHtml(panel.footnote)}</footer>` : ''}
</body></html>`;
}
/**
* Render a proof panel and write it as a named capture.
*
* Secrets are redacted on the way in, so a bearer token can never reach an
* image even if a caller passes raw output through.
*/
export async function captureProofPanel(
page: Page,
testInfo: TestInfo,
panel: ProofPanel,
meta: { expected: string; businessPurpose: string; personas: string[] },
): Promise<CaptureRecord> {
const safe: ProofPanel = {
...panel,
blocks: panel.blocks.map((block) => ({
...block,
command: redact(block.command),
output: redact(block.output),
})),
};
await page.setViewportSize({ width: CAPTURE_WIDTH, height: CAPTURE_HEIGHT });
await page.setContent(panelHtml(safe), { waitUntil: 'load' });
await page.evaluate(() => document.fonts.ready);
const file = join(CAPTURE_DIR, `${panel.captureId}.png`);
await mkdir(dirname(file), { recursive: true });
const buffer = await page.screenshot({ path: file });
return {
id: panel.captureId,
capabilityId: panel.capabilityId,
testId: `${testInfo.titlePath.join(' :: ')}`,
file: `captures/${panel.captureId}.png`,
expected: meta.expected,
businessPurpose: meta.businessPurpose,
personas: meta.personas,
width: CAPTURE_WIDTH,
height: CAPTURE_HEIGHT,
contentHash: `sha256:${createHash('sha256').update(buffer).digest('hex')}`,
audienceVerdict: 'pending',
auditStatus: 'pending',
};
}
/** Record an already-taken screenshot (e.g. a real browser surface). */
export async function recordScreenshot(
buffer: Buffer,
testInfo: TestInfo,
spec: {
captureId: string;
capabilityId: string;
expected: string;
businessPurpose: string;
personas: string[];
width: number;
height: number;
},
): Promise<CaptureRecord> {
const file = join(CAPTURE_DIR, `${spec.captureId}.png`);
await mkdir(dirname(file), { recursive: true });
await writeFile(file, buffer);
return {
id: spec.captureId,
capabilityId: spec.capabilityId,
testId: `${testInfo.titlePath.join(' :: ')}`,
file: `captures/${spec.captureId}.png`,
expected: spec.expected,
businessPurpose: spec.businessPurpose,
personas: spec.personas,
width: spec.width,
height: spec.height,
contentHash: `sha256:${createHash('sha256').update(buffer).digest('hex')}`,
audienceVerdict: 'pending',
auditStatus: 'pending',
};
}
/** Append capture records to the run manifest for later promotion. */
export async function writeManifestFragment(
name: string,
records: CaptureRecord[],
): Promise<void> {
const file = join(CAPTURE_DIR, `manifest-${name}.json`);
await mkdir(dirname(file), { recursive: true });
await writeFile(file, `${JSON.stringify(records, null, 2)}\n`);
}