feat(showcase): Monaco-based Artifact Workbench

[ProfRandom92]

Summary

Adds a polished Monaco-based Artifact Workbench to the Comptextv7 showcase. Reviewers can inspect compact replay artifacts in a read-only JSON editor with a structured summary panel — without storing giant raw prompts, without a database, and without any external API calls.

---

Changed Files

File	Change
showcase/app/package.json	Added @monaco-editor/react ^4.7.0 and monaco-editor ^0.52.2
showcase/app/src/main.tsx	Added Workbench nav item + #workbench section using ArtifactWorkbench
showcase/app/src/components/ArtifactCodePanel.tsx	New — read-only Monaco editor, dark theme, minimap off, wordWrap on
showcase/app/src/components/ArtifactWorkbench.tsx	New — three-panel workbench: left rail (artifact list) · center (Monaco viewer) · right (summary)
showcase/app/src/lib/sampleArtifacts.ts	New — deterministic static sample artifacts shaped like v1-alpha.1; no Date.now, no Math.random, no rawPrompt
tests/test_artifact_workbench_showcase.py	New — pytest static structure tests for all new files

---

What Was Added

ArtifactCodePanel.tsx

• Wraps @monaco-editor/react <Editor>
• readOnly = true by default
• Supports language prop: json | markdown | typescript | plaintext
• Supports height prop
• theme="vs-dark", minimap disabled, wordWrap on
• No filesystem access, no external API calls, no editable mode unless readOnly={false} is explicitly passed

ArtifactWorkbench.tsx

• Left rail: lists all sampleArtifacts, selection via useState
• Center: ArtifactCodePanel renders pretty-printed deterministic JSON of selected artifact
• Right panel: displays artifactId, schemaVersion, artifactHash (truncated with full value on hover), executionId, fingerprint count, validationStatus badge, latestMode, triggeredWindows, unmappedStepIds, full timelineSummary
• Styled: charcoal/slate backgrounds (#0d1117, #0a0e17), muted blue accent (#3b82f6), thin #1e2533 borders, no neon, no glow

sampleArtifacts.ts

• Three fully-typed deterministic sample artifacts
• IDs: artifact-c7-001 (pass), artifact-c7-002 (warn), artifact-c7-003 (fail)
• All required fields: artifactId, schemaVersion, executionId, createdAt, manifest, timelineSummary, compressionSignals, referenceIndex, eventFingerprints, artifactHash
• No Date.now, no Math.random, no rawPrompt

test_artifact_workbench_showcase.py

• 35 pytest tests across 4 classes
• TestSampleArtifacts: required fields present, no Date.now, no Math.random, no rawPrompt
• TestArtifactCodePanel: uses Monaco, read-only default, no external fetch, minimap disabled
• TestArtifactWorkbench: three panels via data-testid, all summary fields, useState selection, JSON.stringify for pretty-print, no rawPrompt
• TestMainIntegration: #workbench section present, existing sections intact
• No new test framework; existing pytest approach used

---

Validation

Note: These commands are intended to be run locally from the repo root after npm install in showcase/app. They were not executed in this automated PR context and no claims of pass/fail are made.

Commands to verify:

npm run layout
npm run typecheck
npm run build
npm test
npm run check

Known pre-run requirement: npm install must be run in showcase/app to fetch @monaco-editor/react and monaco-editor before typecheck and build will pass.

---

Risks

• monaco-editor adds ~2–4 MB to the Vite build bundle. This is expected and acceptable for a showcase; no tree-shaking optimization was applied.
• @monaco-editor/react ^4.7.0 requires React 16.8+; the repo uses React 19 ✓
• The prettyJson helper uses Object.keys sort for deterministic output; deeply nested object key ordering is stable for the current sampleArtifacts shape.
• package-lock.json is not updated in this PR — it must be regenerated locally via npm install in showcase/app.

---

Next

• Run npm install && npm run build in showcase/app locally to regenerate package-lock.json and confirm bundle size
• Consider adding a vite-plugin-monaco-editor or @monaco-editor/loader CDN config if bundle size is a concern
• Future: wire ArtifactWorkbench to real committed artifact JSON files from artifacts/replay/ once the schema stabilizes

[netlify]

✅ Deploy Preview for comptext-v7 ready!

Name	Link
🔨 Latest commit	eb6fa43
🔍 Latest deploy log	https://app.netlify.com/projects/comptext-v7/deploys/6a09bde5ef770700089fff2f
😎 Deploy Preview	https://deploy-preview-96--comptext-v7.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
comptextv7	Ready	Preview, Comment	May 17, 2026 1:09pm

[gemini-code-assist]

Code Review

This pull request introduces an 'Artifact Workbench' to the showcase application, enabling users to inspect compressed replay artifacts through a three-panel interface. Key additions include a Monaco-based code panel, a workbench component for navigation and summaries, and static sample data. The reviewer feedback highlights several opportunities for improvement: optimizing performance using useMemo, hardening the JSON serialization logic against null values, replacing hardcoded CSS heights with more flexible Flexbox layouts, and addressing the brittleness of the Python-based static validation tests by suggesting a move toward AST-based or component-level testing.

[gemini-code-assist]

The prettyJson function is currently fragile. It will throw a TypeError if value is null or undefined because Object.keys requires an object. Additionally, the current sorting logic only applies to top-level keys. For a more robust deterministic output, consider adding a type guard and ensuring it always returns a string.

function prettyJson(value: unknown): string {
  if (value === null || value === undefined || typeof value !== 'object') {
    return JSON.stringify(value, null, 2) ?? '';
  }
  const keys = Object.keys(value as Record<string, unknown>).sort();
  return JSON.stringify(value, keys, 2);
}

[gemini-code-assist]

The current testing strategy of parsing TypeScript source files as raw text to assert structural properties is extremely brittle. Minor changes in code formatting, such as switching between single and double quotes or adjusting indentation, will cause these tests to fail despite the logic being correct. Consider using a proper AST-based linter or component-level unit tests (e.g., using Vitest/React Testing Library) for better long-term maintainability.