Feature Journey · Case Study

Canvas Platform · Feb 2026

The Canvas
Platform Trilogy

3 Phases · 10 Sessions · 3 Crashes · Zero Work Lost
A two-day architectural overhaul with Amplifier

Feb 20–21, 2026 · amplifier-stories · amplifier-team

TL;DR

The one-paragraph version.

Over two days we executed a 3-phase architectural overhaul of Canvas's project type system. The goal: replace per-plugin render logic with a true platform shell every project type could share.

Phase 1 cleaned the foundation — removed 2 dead project types, renamed 5 others, added grouped UI, cleared orphaned DB records. Phase 2 was the structural shift — CanvasCard became the engine, plugins became pure config objects, ~850 lines of infrastructure deleted. Phase 3 built the fullscreen experience — a two-zone FullscreenCard replaced the legacy TerminalView monolith, and session logic was extracted into a single useProjectSession hook shared by both cards. CanvasCard: 319 → 83 lines.

All of it driven by amplifier-bundle-superpowers: design → plan → subagent TDD execution, one task at a time. A mid-session laptop crash at Task 6 of 14 cost zero time — the session-analyst recovered exact state in seconds. The submit-pr skill fixed 3 CI rounds autonomously before merging.

Result: 4 PRs merged, 2,508 tests passing, 0 dead plugin files, and a platform where adding a new project type takes one config object. Delivered across 10 sessions over 49 hours — 3 of which crashed — with 162 agent delegations and zero work lost.

The Starting Point

Canvas had grown organically.

Each project type owned its own rendering. Hooks were duplicated. The fullscreen experience was a monolith nobody wanted to touch.

The problems

CanvasCard.tsx — 319 lines, 6 inline hooks, a full send pipeline baked in
Each plugin registered cardBody, headerActions, contextProvider — duplicated per type
Two dead project types (amplifier-canvas, artifact-viewer) still loading
Fullscreen = legacy TerminalView monolith, sharing nothing with card-mode rendering
Auto-naming worked for some types and silently failed for others

The Plan

Three phases.
Each one shippable.

Phase 1

Clean Before You Build

Remove dead types, rename for clarity, add grouping. Make the codebase honest before touching architecture.

Phase 2

Platform Takes the Wheel

CanvasCard owns all rendering. Plugins become pure config objects. ~850 lines of plugin infrastructure deleted.

Phase 3
The Fullscreen Experience
A modern two-zone FullscreenCard replaces TerminalView. Session logic extracted into one shared hook.

Rule: every phase merges to main independently. No long-lived branches.

Phase 1 · PR #60

Cleanup, Rename, Regroup

Before

7 project types including 2 dead ones
Confusing names: "Agent Chat" vs "Amplifier Agent Chat"
Flat dropdown with no grouping
Orphaned projects lingering in the database

After

5 clean project types, 2 removed
Unambiguous names: "Agent Chat (Claude)", "Agent Chat (Amplifier)"
Grouped dropdown: Chat / Developer Tools
DB migration 022 removes orphaned projects

38

Files Changed

+1,663

Lines Added

−1,011

Lines Removed

Phase 2 · PR #62 · Merged Feb 20

The Platform Card Shell

The biggest structural shift. CanvasCard becomes the engine. Plugins hand over their components.

Plugins used to own

cardBody — full render logic per type
headerActions — per-plugin buttons
contextProvider — per-plugin React context
~850 lines of infrastructure across the plugin layer

Now plugins are

Pure config: id, name, archetype, icon
archetype: 'chat' | 'terminal' drives all behavior
Auto-naming works for ALL 5 project types
2,479 frontend + 188 backend tests passing

55

Files Changed

+4,934

Lines Added

−3,025

Lines Removed

Day 2 · Phase 3 · Task 6 of 14

The laptop died.

⚡ Mid-session crash

Phase 3 was underway — the 14-task plan being executed step by step, TDD-style. Task 6 had just been committed: the useProjectSession hook, composing four sub-hooks into one. 317 conversation turns in, the machine went dark.

↩ Recovery in seconds

Amplifier's session-analyst located session 41247b95, read the event log, identified the last commit (9b2d4aea), and mapped exactly which tasks were done (T1, T3, T6) vs remaining (T2, T4, T5, T7–T14). No re-investigation. No lost context. Resumed at T2 immediately.

The Toolkit · amplifier-bundle-superpowers

Human orchestrated.
Agents executed.

Built on amplifier-bundle-superpowers — Jesse Vincent's battle-tested Superpowers methodology (43k+ ★) brought natively to Amplifier.

The Workflow

/brainstorm → design the three phases
/write-plan → 14-task plan with every code block included
/execute-plan → subagent-driven-development recipe
Per task: RED → GREEN → REFACTOR → commit
submit-pr skill → autonomous CI loop to merge

162 Delegations · 14 Agent Types

implementer ×54 — TDD execution, one task at a time
explorer ×28 — codebase reconnaissance
code-quality-reviewer ×23 — caught issues before CI did
git-ops ×18 — commits, PRs, CI monitoring
spec-reviewer ×15 — verified each task matched the plan
session-analyst ×2 — crash recovery, zero work lost

Phase 3 · PR #65 · Merged Feb 21

14 tasks. TDD-driven.
All 11 remaining completed post-crash.

useProjectSession
4 hooks → 1 shared hook. Both CanvasCard and FullscreenCard consume it. CanvasCard: 319 → 83 lines (−74%).

FullscreenCard
Two-zone layout: header + left conversation pane + toggleable right panel (Preview or Files). Panel state persisted per project in Zustand.

Plugin API Simplification

Removed cardBody/headerActions/contextProvider. Added fullscreenHeaderActions? slot. AmplifierStatsButton fills it for Amplifier Chat.

Notification Dots + E2E

Dots on Files/Preview buttons when new content arrives; clear on open. 5 Playwright E2E tests cover the full fullscreen flow.

Architecture · Before vs After

One hook. One card.
One path to fullscreen.

Before

onCardFullscreenEnter → setView('terminal')
App renders legacy TerminalView monolith
TerminalView owned layout, hooks, message input — everything
Shared nothing with card-mode rendering
CanvasCard: 319 lines, 6 inline hooks, full send pipeline

After

onCardFullscreenEnter → setView('fullscreen')
App renders FullscreenCard
Both cards share useProjectSession — one source of truth
TerminalView retained only for terminal-mode projects
CanvasCard: 83 lines, zero inline hooks

Merge · submit-pr skill

Four CI rounds.
Zero human interventions.

❌

Round 1 — oxfmt formatting6 Phase 3 files failed the formatter. Fixed autonomously and pushed.

❌

Round 2 — Claude Code Reviewconsole.error in App.tsx onClose → structured logger + try/catch. Fixed autonomously.

❌

Round 3 — Claude Code ReviewTemplate literal in logger.error → structured metadata field. Fixed autonomously.

✅

Round 4 — All checks greenQuality Gate + Claude Code Review both pass. Auto-merge triggered. PR #65 lands on main.

Results

By the numbers.

Metric	Before	After
CanvasCard size	319 lines, 6 inline hooks	83 lines, 0 inline hooks
Plugin interface	cardBody, headerActions, contextProvider	icon, archetype, fullscreenHeaderActions?
Fullscreen path	TerminalView monolith	FullscreenCard (two-zone)
Dead plugin files	~12 unreferenced components	0
Unit tests passing	~2,300 (Phase 2 baseline)	2,508
PRs merged to main	—	4 (Phase 2, Phase 3, infra, docs)

Impact · Future Velocity

What the next engineer inherits.

The refactor wasn't about cleaning up the past. It was about making the future fast.

Scenario	Before Phase 3	After Phase 3
Add a new project type	New `cardBody` + `headerActions` + `contextProvider` + context file	One config object, 5 fields
Add a fullscreen panel	Fork the TerminalView monolith	Add a `PanelView` option + one component
Change session send logic	Edit 3+ components independently	Edit `useProjectSession` once
Refactor confidently	Manual testing across all project types	2,508 tests catch regressions instantly
Plugin infrastructure debt	~850 lines across cardBody / headerActions / providers	Deleted. Gone. Not your problem.

Lessons

What made it work.

1

Phase-gate everything

Each phase merged independently. Phase 2 shipped without Phase 3 started. Reduces blast radius, tightens feedback loops.
2

Session state is recoverable

The crash cost zero work. The session-analyst found the session, last commit, and next task in seconds. Nothing re-discovered manually.
3

Write the plan with the code inside it

The Phase 3 plan included every code block. Post-crash, an implementer agent could execute tasks from the plan alone with no ambient context needed.
4

CI failures are inputs, not blockers

submit-pr treated each CI failure as a spec. Downloaded artifacts, analyzed, fixed, pushed. Merge was inevitable.

Sources & Methodology

Research Methodology

Data as of: February 21, 2026 · Status: Active — merged to main on amplifier-stories

Verified from source:

PR stats (additions, deletions, files) via GitHub API — PRs #60, #62, #65, #70
CanvasCard line count (319 → 83) from implementer agent report, Phase 3 Task 7
Test count (2,508) from pnpm test runner output at Phase 3 completion
CI round descriptions from submit-pr skill execution log (4 rounds, 3 autonomous fixes)
Crash timing and task state from session-analyst output, session ID 41247b95

Estimates & gaps:

Pre-Phase-2 test count (~2,300) is approximate — not measured at exact baseline
Phase 1 (PR #60) was open/pending merge at time of writing
"~12 dead plugin files" combines Phase 2 + Phase 3 deletions; Phase 2 count inferred from PR description

Canvas Platform · Feb 2026

The canvas is
a real platform now.

Every project type renders through the same shell. Session logic lives in one hook. Fullscreen is a first-class experience.

−74%

CanvasCard lines

2,508

Tests passing

0

Dead plugin files

Built with Amplifier

The CanvasPlatform Trilogy