Hare
c78f7f7d80
Use content digests, key fingerprints, binding and trust identities, immutable mutation receipts, and observation tokens instead of state-update ordinals across API, storage, Runtime, and Web contracts. Preserve historical replay and secret material through frozen migrations; preflight uncertain removals before cutover, resume provisioning receipts, validate encrypted migration candidates, and align fresh/upgraded schemas. Include reviewed regression fixes, generated artifacts, and validation evidence.
347 lines
13 KiB
TypeScript
347 lines
13 KiB
TypeScript
// Development-only visual evidence over the real Workers route and loopback
|
|
// HTTP fixtures. No Backend/Runtime/account/grant state is mutated.
|
|
// Run from root: deno run --config tools/web-ux/deno.json -A tools/web-ux/drive-grants/visual-review.ts after
|
|
import { chromium } from "npm:playwright@1.59.1";
|
|
import { startOwnedProcesses, stopOwnedProcesses } from "../src/processes.ts";
|
|
const root = new URL("../../../", import.meta.url).pathname;
|
|
const run = Deno.args[0] ?? "after";
|
|
const before = run === "before";
|
|
const out = `${root}target/web-ux/t724-drive-grants/${run}`;
|
|
const listener = Deno.listen({ hostname: "127.0.0.1", port: 0 });
|
|
const port = (listener.addr as Deno.NetAddr).port;
|
|
listener.close();
|
|
const baseUrl = `http://127.0.0.1:${port}`;
|
|
const processes = await startOwnedProcesses(
|
|
[{
|
|
id: "vite",
|
|
command: "deno",
|
|
args: ["task", "dev", "--host", "127.0.0.1", "--port", String(port)],
|
|
cwd: `${root}web/workspace`,
|
|
readyUrl: baseUrl,
|
|
}],
|
|
import.meta.url,
|
|
`${out}/logs`,
|
|
[],
|
|
);
|
|
const worker = {
|
|
runtime_id: "runtime-a",
|
|
worker_id: "worker-a",
|
|
resource_key: "W-1",
|
|
host_id: "host-a",
|
|
display_name: "Documentation Worker",
|
|
label: "Worker",
|
|
profile: "builtin:coder",
|
|
tags: [],
|
|
workspace: {
|
|
visibility: "workspace",
|
|
identity: "space",
|
|
workspace_id: "space",
|
|
},
|
|
availability: "observed",
|
|
state: "stopped",
|
|
pinned: false,
|
|
retention_state: "normal",
|
|
implementation: { kind: "runtime", display_hint: "Runtime Worker" },
|
|
workdir_attachments: [],
|
|
diagnostics: [],
|
|
restore_observation_token: "observation-1",
|
|
};
|
|
const grant = {
|
|
grant_id: "1",
|
|
workspace_id: "space",
|
|
runtime_id: "runtime-a",
|
|
worker_id: "worker-a",
|
|
access: "read_only",
|
|
revoked: false,
|
|
created_by: "fixture-owner",
|
|
created_at: "2026-10-09",
|
|
revoked_by: null,
|
|
revoked_at: null,
|
|
};
|
|
const browser = await chromium.launch({ headless: true });
|
|
const longWorker = {
|
|
...worker,
|
|
runtime_id: `runtime-${"r".repeat(140)}`,
|
|
worker_id: `worker-${"w".repeat(140)}`,
|
|
display_name:
|
|
"Documentation and distributed development Worker with a long display name for international documentation review",
|
|
};
|
|
const captures: unknown[] = [];
|
|
try {
|
|
for (const persona of ["owner", "non-owner"]) {
|
|
for (const theme of ["light", "dark"] as const) {
|
|
for (const width of [1440, 768, 390]) {
|
|
const context = await browser.newContext({
|
|
viewport: { width, height: 900 },
|
|
colorScheme: theme,
|
|
reducedMotion: "reduce",
|
|
});
|
|
try {
|
|
const page = await context.newPage();
|
|
const errors: string[] = [];
|
|
page.on("pageerror", (error) => errors.push(error.message));
|
|
page.on("console", (message) => {
|
|
if (message.type() === "error") errors.push(message.text());
|
|
});
|
|
page.on("requestfailed", (request) =>
|
|
errors.push(
|
|
`${request.method()} ${
|
|
new URL(request.url()).pathname
|
|
}: ${request.failure()?.errorText}`,
|
|
));
|
|
let state = "active";
|
|
await page.routeWebSocket("**/api/w/space/protocol/ws", () => {});
|
|
await page.route("**/api/**", async (route) => {
|
|
const url = new URL(route.request().url()), path = url.pathname;
|
|
if (!path.startsWith("/api/")) {
|
|
return await route.continue();
|
|
}
|
|
const owner = persona === "owner";
|
|
let body: unknown;
|
|
if (path === "/api/workspaces") {
|
|
body = [{
|
|
workspace_id: "space",
|
|
display_name: "Drive review",
|
|
owner_account_id: "fixture-owner",
|
|
state: "active",
|
|
created_at: "2026-01-01",
|
|
updated_at: "2026-01-01",
|
|
}];
|
|
} else if (path.endsWith("/workspace")) {
|
|
body = {
|
|
workspace_id: "space",
|
|
display_name: "Drive review",
|
|
record_authority: "fixture",
|
|
schema_version: 1,
|
|
auth: {
|
|
Passkey: {
|
|
rp_id: "127.0.0.1",
|
|
origin: baseUrl,
|
|
public_base_url: baseUrl,
|
|
cookie_name: "fixture",
|
|
},
|
|
},
|
|
permissions: {
|
|
manage_repositories: owner,
|
|
manage_secrets: owner,
|
|
manage_runtimes: owner,
|
|
delete_workspace: owner,
|
|
},
|
|
extension_points: {
|
|
store: "fixture",
|
|
event_stream: {
|
|
status: "ready",
|
|
note: "fixture",
|
|
diagnostics: [],
|
|
},
|
|
host_worker_bridge: {
|
|
status: "ready",
|
|
note: "fixture",
|
|
diagnostics: [],
|
|
},
|
|
companion_console: {
|
|
status: "ready",
|
|
note: "fixture",
|
|
diagnostics: [],
|
|
},
|
|
},
|
|
};
|
|
} else if (path.endsWith("/workers")) {
|
|
body = {
|
|
workspace_id: "space",
|
|
limit: 100,
|
|
source: "fixture",
|
|
diagnostics: [],
|
|
items: [state === "long" ? longWorker : worker],
|
|
};
|
|
} else if (path.endsWith("/repositories")) {
|
|
body = {
|
|
workspace_id: "space",
|
|
items: [],
|
|
source: "fixture",
|
|
diagnostics: [],
|
|
};
|
|
} else if (path.endsWith("/cleanup-plan")) {
|
|
body = {
|
|
workspace_id: "space",
|
|
generated_at: "2026-10-09",
|
|
runtime_id: "runtime-a",
|
|
digest: "digest-1",
|
|
diagnostics: [],
|
|
workdirs: [],
|
|
workers: [],
|
|
};
|
|
} else if (path.endsWith("/drive/grants")) {
|
|
if (state === "loading") {
|
|
await new Promise<void>((resolve) => {
|
|
release = resolve;
|
|
});
|
|
}
|
|
if (state === "error") {
|
|
await route.fulfill({
|
|
status: 503,
|
|
json: {
|
|
code: "storage_unavailable",
|
|
classification: "not_committed",
|
|
message: `Drive storage unavailable. ${
|
|
"A long diagnostic requiring readable wrapping and an explicit refresh action. "
|
|
.repeat(12)
|
|
}`,
|
|
},
|
|
});
|
|
return;
|
|
}
|
|
body = {
|
|
grants: state === "empty" ? [] : [{
|
|
...grant,
|
|
runtime_id: state === "long" ? longWorker.runtime_id : worker.runtime_id,
|
|
worker_id: state === "long" ? longWorker.worker_id : worker.worker_id,
|
|
}],
|
|
next_after: null,
|
|
};
|
|
} else if (path.endsWith("/working-directories")) {
|
|
body = { workspace_id: "space", items: [], diagnostics: [] };
|
|
} else {
|
|
errors.push(`Unmatched fixture ${path}`);
|
|
body = {};
|
|
}
|
|
await route.fulfill({ json: body });
|
|
});
|
|
let release: (() => void) | undefined;
|
|
const response = await page.goto(`${baseUrl}/w/space/workers`);
|
|
await page.getByRole("heading", { name: "Workers", exact: true })
|
|
.waitFor().catch(async (cause) => {
|
|
console.log(errors, await page.locator("body").innerText());
|
|
throw cause;
|
|
});
|
|
await page.getByText("Documentation Worker", { exact: true }).first()
|
|
.waitFor().catch(async (cause) => {
|
|
console.log(errors, await page.locator("body").innerText());
|
|
throw cause;
|
|
});
|
|
async function capture(name: string) {
|
|
await Deno.mkdir(out, { recursive: true });
|
|
const filename = `${persona}-${theme}-${width}-${name}.png`;
|
|
const screenshot = await page.screenshot({
|
|
path: `${out}/${filename}`,
|
|
fullPage: true,
|
|
});
|
|
if (!before && persona === "owner") {
|
|
const clipped = await page.locator(".drive-grants").evaluate((
|
|
element,
|
|
) =>
|
|
[...element.querySelectorAll("button, select, summary")].some(
|
|
(control) => {
|
|
const box = control.getBoundingClientRect();
|
|
return box.left < 0 ||
|
|
box.right > element.ownerDocument.defaultView!.innerWidth;
|
|
},
|
|
)
|
|
);
|
|
if (clipped) {
|
|
throw new Error(
|
|
`Grant control clipped: ${persona} ${theme} ${width} ${name}`,
|
|
);
|
|
}
|
|
await page.locator(".drive-grants").screenshot({
|
|
path: `${out}/grants-${filename}`,
|
|
});
|
|
}
|
|
captures.push({
|
|
persona,
|
|
theme,
|
|
width,
|
|
state: name,
|
|
path: filename,
|
|
sha256: await sha256(screenshot),
|
|
documentStatus: response?.status(),
|
|
errors: [...errors],
|
|
visibleErrors: await page.locator("[role=alert]")
|
|
.allTextContents(),
|
|
overflow: await page.evaluate("document.documentElement.scrollWidth > innerWidth"),
|
|
accessibility: await page.locator("main").ariaSnapshot(),
|
|
});
|
|
}
|
|
if (before || !ownerPersona(persona)) await capture("workers");
|
|
else {
|
|
await page.getByRole("combobox", { name: "Worker", exact: true })
|
|
.selectOption(JSON.stringify(["runtime-a", "worker-a"]));
|
|
await page.getByRole("button", { name: "Revoke Drive grant 1" })
|
|
.waitFor();
|
|
await capture("active");
|
|
state = "empty";
|
|
await page.getByRole("button", { name: "Refresh grants" }).click();
|
|
await page.getByText("No active Drive grants for this Worker.")
|
|
.waitFor();
|
|
await page.getByRole("button", { name: "Add Drive grant" }).click();
|
|
await capture("empty-form");
|
|
state = "error";
|
|
await page.getByRole("button", { name: "Refresh grants" }).click();
|
|
await page.getByRole("alert").waitFor();
|
|
await capture("error");
|
|
state = "loading";
|
|
await page.getByRole("button", { name: "Refresh grants" }).click();
|
|
await page.getByText("Loading all grant pages…").waitFor();
|
|
await capture("loading");
|
|
release?.();
|
|
}
|
|
state = "long";
|
|
await page.reload();
|
|
await page.getByText(longWorker.display_name, { exact: true }).first()
|
|
.waitFor();
|
|
if (!before && persona === "owner") {
|
|
await page.getByRole("combobox", { name: "Worker", exact: true })
|
|
.selectOption(
|
|
JSON.stringify([longWorker.runtime_id, longWorker.worker_id]),
|
|
);
|
|
await page.getByRole("button", { name: "Revoke Drive grant 1" })
|
|
.waitFor();
|
|
await page.getByText("Worker identity", { exact: true }).click();
|
|
}
|
|
await capture("long-values");
|
|
} finally {
|
|
await context.close();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
const pageSource = await Deno.readFile(
|
|
`${root}web/workspace/src/routes/w/[workspaceId]/workers/+page.svelte`,
|
|
);
|
|
const componentSource = await Deno.readFile(
|
|
`${root}web/workspace/src/lib/workspace/drive-grants/WorkerDriveGrants.svelte`,
|
|
);
|
|
const apiSource = await Deno.readFile(
|
|
`${root}web/workspace/src/lib/workspace/drive-grants/api.ts`,
|
|
);
|
|
await Deno.writeTextFile(
|
|
`${out}/review-context.json`,
|
|
JSON.stringify(
|
|
{
|
|
scenario: "real Workers route, loopback authoritative API projections",
|
|
run,
|
|
browserVersion: browser.version(),
|
|
workersPageSha256: await sha256(pageSource),
|
|
componentSha256: await sha256(componentSource),
|
|
apiSha256: await sha256(apiSource),
|
|
captures,
|
|
},
|
|
null,
|
|
2,
|
|
),
|
|
);
|
|
console.log(`Visual evidence: ${out}`);
|
|
} finally {
|
|
await browser.close();
|
|
await stopOwnedProcesses(processes);
|
|
}
|
|
function ownerPersona(persona: string) {
|
|
return persona === "owner";
|
|
}
|
|
async function sha256(bytes: Uint8Array) {
|
|
return [...new Uint8Array(await crypto.subtle.digest("SHA-256", Uint8Array.from(bytes).buffer))]
|
|
.map((
|
|
byte,
|
|
) => byte.toString(16).padStart(2, "0")).join("");
|
|
}
|