More Amplifier Stories
Canvas Feature Story

The Artifact Viewer

Building Blind at 1,538 Lines

Autonomous AI Build Spectacular Crash Lessons Learned

February 2026  ·  Amplifier Project

The Mission

Build a file browser and preview system
for non-technical users

The primary way users see and interact with what AI has built for them. A platform component shared across all project types.

File Tree with Colored Badges Multi-Strategy Preview Asset Inlining Version History Syntax Highlighting
I
Act I

Research
& Discovery

Before writing a single line of spec, we studied every pixel of the prior art.

Act I — Research

Deep reconnaissance

2,057
lines of Kepler reference code
analyzed line by line
25
desktop screenshots
studied for every detail
11
interactive HTML mockups
built to validate assumptions
12

UX insights discovered that were not in the original spec

Act I — Discoveries

12 things nobody told us

  • Flat file list, not tree — sorted by creation time
  • Tool calls grouped and collapsed by default
  • Preview strategy selection invisible to user
  • Panel resize handle invisible until hover (macOS-style)
  • Empty state is truly empty — removed from DOM
  • Viewport selector is iOS-style segmented control
  • Dimension badges on viewport options (1280, 768, 375)
  • File badges are colored: green=created, amber=edited
  • Code blocks use PrismJS, not Monaco
  • Preview pane uses iframe srcdoc, not Sandpack
  • CSS/JS inlined for multi-file preview without dev server
  • Version dropdown shows full diff preview on hover

Every discovery came from pixel-level screenshot analysis, not documentation.

II
Act II

The
1,021-Line Spec

Meticulous preparation. Every pixel, every interaction, every edge case — specified.

Act II — Specification

21 sections of exhaustive detail

Architecture

FullScreenProjectView Container shell
ProjectHeader Files button + badge
FileBrowserPopup 380px overlay
ContentViewer Code + Preview

Design Tokens

Deep Navy
Bright Blue
Brand Coral

9 Preview Strategies

01HTML with inlined CSS/JS
02Sandpack live coding
03iframe srcdoc sandbox
04Markdown rendering
05Image / SVG display
06JSON tree view
07CSV table
08PrismJS code view
09Plaintext fallback

Motion Protocol

80ms hover  ·  200ms click  ·  350ms panel slide
Spring easing with damped oscillation

Act II — The Masterpiece

The 10-Act Acceptance Test

A complete end-to-end user story: "Building a Portfolio Website"
Both specification and verification in one.

01 Project Setup Full-screen, Files "0"
02 Initial File Creation html + css + js
2.5 Multi-File Navigation Tree switching
03 Preview Testing Inlined CSS/JS
04 Iteration & Versions History switching
05 Adding Images SVG in preview
06 Cross-Project Reference Memory bridge
07 Project Snapshot State capture
08 Error Handling Graceful recovery
09 Exit & Resume State persistence

The most ambitious acceptance test we'd ever written — and we'd need every word of it.

III
Act III

The Launch

An autonomous AI build, designed to run for 16–24 hours without human intervention. Based on a legendary prior session.

Act III — The Blueprint

"The Proven Approach"

The Legendary Reference

440
sub-sessions
147
commits
22h
active time

62 wall-clock hours of autonomous operation

The Orchestrator Pattern

Main session delegates, never touches code directly. Worker agents implement, test, and report back.

528-Line Implementation Prompt

Foundation Features 1–5

Types, store, detection, shell, file list

Core Viewer Features 6–10

Code view, preview, viewport, versions, integration

Advanced Features 11–15

Asset inlining, search, keyboard nav, responsive, a11y

Polish Features 16–19

Error states, animations, performance, final testing

Act III — Safeguards

The Survival Protocols

Built into the 528-line prompt — instructions for staying alive across context windows.

📄
Create SESSION-HANDOFF.md External memory file — the AI's lifeline across context compactions
🔄
Update after each feature Track what's done, what's next, what state the code is in
🔍
If context compaction happens, read handoff to resume Never start from scratch — always pick up where you left off
⚠️
Don't stop until the 10-Act test passes The acceptance test is both the goal and the finish line

Remember these protocols. They'll matter later.

IV
Act IV

The Build

~4 hours of autonomous execution. The AI wrote prolifically and with conviction.

Act IV — Output
1,538

lines of React code across 10 files

~4 hours of autonomous work

ArtifactViewer.tsx 617 lines Main popup shell
useArtifactStore.ts 462 lines Zustand state management
CodeView.tsx 272 lines PrismJS syntax highlighting
PreviewView.tsx 255 lines Multi-strategy preview + iframe srcdoc
FileList.tsx 227 lines VS Code-style tree + colored badges
useArtifactDetection.ts 134 lines SSE → artifact detection
+ 4 more files ~169 lines VersionDropdown, ViewportSelector, types, index
V
Act V

The Crash

The AI built the feature. Then it tried to look at what it built. And everything fell apart.

Act V — The Failure

What went wrong

The Recursion Loop

The AI tried to use browser-operator to visually verify its own work.

It got stuck in a 35+ nested recursion loop — spawning sub-agents to look at the browser, which spawned sub-agents to look at the browser, which spawned...

depth: 35+ and counting...

The Forgotten Protocol

SESSION-HANDOFF.md was never updated.

The survival protocol — the AI's external memory, its lifeline across context compactions — was the first thing it forgot.

The Blind Builder

1,538 lines of code that compiles — but nobody, human or AI, had verified it actually works. The build produced output of unknown quality.

The Final Scorecard
0/19
features verified
0/10
acts tested
1,538
lines written
~4h
build time
35+
recursion depth

The code compiles. It might even work.
Nobody knows.

Epilogue

What the crash taught us

👁

Autonomous builds need verification loops

Building blind produces output of unknown quality. The build step is only half the job.

🧠

External memory only works if you use it

SESSION-HANDOFF.md was the survival protocol. The AI forgot it first. Memory requires discipline.

🎬

The 10-Act test is a powerful spec technique

Both specification and verification in one artifact. A user story that doubles as acceptance criteria.

"The Approach" works — with the right tools

The orchestrator pattern produced 1,538 lines in 4 hours. It just couldn't close the verification loop.

The crash directly inspired amplifier-bundle-ui-vision
AI building tools for itself — visual testing agents born from necessity.

The story isn't over.
The code is waiting.

1,538 lines of unverified potential. The verification chapter is being written next.

Spec
CANVAS-ARTIFACT-VIEWER-SPEC.md
Code
frontend/src/components/ArtifactViewer/
Bridge
VISUAL-TESTING-HANDOFF.md
Born from this
amplifier-bundle-ui-vision

Canvas  ·  Amplifier Project  ·  Powered by Amplifier

More Amplifier Stories