diff --git a/packages/paperclip-runner/.gitignore b/packages/paperclip-runner/.gitignore new file mode 100644 index 00000000000..cb98e73ffe5 --- /dev/null +++ b/packages/paperclip-runner/.gitignore @@ -0,0 +1,3 @@ +/dist-browser/ +/playwright-report/ +/test-results/ diff --git a/packages/paperclip-runner/devtools/browser/index.html b/packages/paperclip-runner/devtools/browser/index.html new file mode 100644 index 00000000000..301dbcf965f --- /dev/null +++ b/packages/paperclip-runner/devtools/browser/index.html @@ -0,0 +1,13 @@ + + + + + + + Paperclip Runner · PRP Static Replay + + +
+ + + diff --git a/packages/paperclip-runner/devtools/browser/playwright.config.ts b/packages/paperclip-runner/devtools/browser/playwright.config.ts new file mode 100644 index 00000000000..0eb2bc3a5c6 --- /dev/null +++ b/packages/paperclip-runner/devtools/browser/playwright.config.ts @@ -0,0 +1,20 @@ +import { defineConfig } from "@playwright/test"; + +export default defineConfig({ + testDir: ".", + testMatch: "static-replay.spec.ts", + fullyParallel: false, + workers: 1, + reporter: "line", + use: { + baseURL: "http://127.0.0.1:4179", + viewport: { width: 1440, height: 1000 }, + }, + webServer: { + command: + "pnpm exec vite preview --config vite.config.ts --host 127.0.0.1 --port 4179", + url: "http://127.0.0.1:4179", + reuseExistingServer: false, + timeout: 30_000, + }, +}); diff --git a/packages/paperclip-runner/devtools/browser/src/App.tsx b/packages/paperclip-runner/devtools/browser/src/App.tsx new file mode 100644 index 00000000000..9d202fc5260 --- /dev/null +++ b/packages/paperclip-runner/devtools/browser/src/App.tsx @@ -0,0 +1,229 @@ +import { useMemo, useState } from "react"; + +import { replayPhase1FixtureText } from "../../../src/tracer/phase1-replay"; +import type { SessionSnapshot } from "../../../src/reducer/session-reducer"; +import { Badge } from "./components/ui/badge"; +import { Button } from "./components/ui/button"; +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "./components/ui/card"; +import { Textarea } from "./components/ui/textarea"; + +const fixtureFiles = import.meta.glob( + "../../../protocol/fixtures/phase-01/*.json", + { eager: true, query: "?raw", import: "default" }, +) as Record; + +const fixtureOrder = [ + "happy-path", + "failed-run", + "interrupted-run", + "duplicate-event", + "source-gap", + "unknown-optional-fields", + "unsupported-required-version", +]; + +interface BrowserFixture { + key: string; + label: string; + source: string; +} + +const browserFixtures = Object.entries(fixtureFiles) + .map(([path, source]): BrowserFixture => { + const key = path.split("/").at(-1)?.replace(/\.json$/, "") ?? path; + const parsed = JSON.parse(source) as { name?: string }; + return { key, label: parsed.name ?? key, source }; + }) + .sort((left, right) => fixtureOrder.indexOf(left.key) - fixtureOrder.indexOf(right.key)); + +function terminalTone(snapshot: SessionSnapshot) { + if (snapshot.integrity === "gap_detected") { + return "warning" as const; + } + if (snapshot.terminal?.runTerminalState === "succeeded") { + return "success" as const; + } + if (snapshot.terminal?.runTerminalState === "failed") { + return "danger" as const; + } + return "neutral" as const; +} + +function SnapshotSummary({ snapshot }: { snapshot: SessionSnapshot }) { + return ( + <> +
+
+

Final session snapshot

+

{snapshot.fixtureName}

+
+ + {snapshot.integrity === "gap_detected" + ? "Gap detected" + : (snapshot.terminal?.runTerminalState ?? snapshot.runPhase)} + +
+ +
+
+
Run
+
{snapshot.identity.runId}
+
+
+
Session
+
{snapshot.identity.normalizedSessionId}
+
+
+
Turn
+
{snapshot.terminal?.turnTerminalState ?? snapshot.turnState}
+
+
+
Events
+
{snapshot.timeline.length}
+
+
+ + {snapshot.proposedResult ? ( +
+ Reported {snapshot.proposedResult.reportedWorkDisposition} +

{snapshot.proposedResult.summary}

+
+ ) : null} + + {snapshot.gaps.length > 0 ? ( +
+ Missing source sequence {snapshot.gaps.flatMap((gap) => gap.missing).join(", ")}. + Replay remains inspectable but is not complete. +
+ ) : null} + +
+

Ordered timeline

+ {snapshot.duplicateEventIds.length} duplicate events ignored +
+
    + {snapshot.timeline.map((event) => ( +
  1. + +
    +
    + {event.eventType} + +
    +

    {event.summary}

    +
    +
    2. + ))} +
+ +
+ Inspect snapshot JSON + 
{JSON.stringify(snapshot, null, 2)}
+
+ + ); +} + +export function App() { + const defaultFixture = browserFixtures[0]; + if (defaultFixture === undefined) { + throw new Error("No Phase 1 fixtures were bundled"); + } + const [selectedFixture, setSelectedFixture] = useState(defaultFixture.key); + const [source, setSource] = useState(defaultFixture.source); + const [replay, setReplay] = useState(() => replayPhase1FixtureText(defaultFixture.source)); + const selected = useMemo( + () => browserFixtures.find((fixture) => fixture.key === selectedFixture), + [selectedFixture], + ); + + function chooseFixture(key: string) { + const fixture = browserFixtures.find((candidate) => candidate.key === key); + if (fixture === undefined) { + return; + } + setSelectedFixture(key); + setSource(fixture.source); + setReplay(replayPhase1FixtureText(fixture.source)); + } + + return ( +
+
+
+

Paperclip Runner Protocol · Phase 1

+

Static session replay

+

+ Validate an editable PRP fixture and reduce its ordered events with the same + contract used by the CLI. +

+
+ Standalone · no Paperclip core +
+ +
+ + + Fixture input + + Choose a conformance case or edit the JSON, then validate and replay it. + + + + + + +