Sparkboard

Overview

Sparkboard is an AI-driven kanban dashboard where the columns aren't a status metaphor — they're a workflow. Moving a card to In Progress kicks off a Claude run whose output streams live into a side panel. When Claude finishes, you review a diff, optionally launch a multi-device preview with annotations, and approve. Approval fires a real action: file write, clipboard copy, webhook.

The framing in the original spec is the right one-liner: not a passive task tracker — the board does the work.

The problem

Most "AI productivity" tools treat the model as a chat sidebar bolted onto an existing surface. The chat gets you a draft; you copy-paste it somewhere else; the loop is implicit, ad hoc, and lossy across sessions. The tool forgets what you've already approved, what you've rejected and why, what context every new request should inherit.

The opportunity was to make the model a first-class actor in the workflow instead of a sidebar: a five-column flow where each transition has a real behavior, the diff is the review surface, and approval is the action.

Audience

• Developers and builders who already work with AI assistants daily and want a dedicated surface for it instead of a chat window.
• Self-hosters who prefer to run their own tooling — Sparkboard stores state on local disk (no DB), uses the Anthropic SDK directly, and is designed to deploy behind a Cloudflare Tunnel.

What I built

The board's five columns each have a defined trigger and behavior:

• To Do — cards created manually, by Claude, or imported. Resting state.
• In Progress — drop here to start a Claude run. Output streams live into the right panel.
• Review — when Claude finishes, the panel shows a side-by-side diff. Approve, preview, revise, or reject.
• Preview — "Launch Preview" opens a sandboxed render in multi-device frames; you can annotate.
• Completed — approval fires the implementation action and archives the card with snapshots.

Layout has four zones:

• Left rail (220px): project switcher, filters, search, tag manager, settings.
• Center board (~55%): five kanban columns, drag-and-drop via @dnd-kit.
• Right panel (~45%): Claude live output — four modes (streaming, diff review, preview, idle).
• Preview overlay (full viewport): infinite canvas with multi-device frames and annotation history.

Product decisions

• JSON file storage on disk, no database. Sparkboard is single-user and self-hosted by design; SQLite would be the next step if and when multi-user becomes a real requirement, but the simpler thing wins until then.
• Custom server.js, not next start. Streaming responses, server-sent events, and the live-output side panel need control over the response lifecycle that the default Next.js production server doesn't expose cleanly.
• Security infrastructure as Phase 0, not as an afterthought. bcrypt, csrf-csrf, jose (JWT), isomorphic-dompurify, full Playwright e2e coverage. The board executes real actions on approval — that's the wrong surface to bolt auth onto later.
• Phased build with an explicit "stale-fast" snapshot doc. The wiki page for build status declares itself stale by design and points to tasks/todo.md in the repo as the live tracker. The build is structured into ten phases (0–9), with [PARALLEL] and [SEQUENTIAL] tags so a lead agent can dispatch sub-agents safely.
• Preview mode as a distinct phase. Multi-device frames + annotations + QR-code mobile preview is non-trivial enough to be Phases 4 and 6 on their own. The MVP doesn't need it; the product story doesn't work without it eventually.

Technical architecture

• Frontend: Next.js 16 with Turbopack dev, React 19, Tailwind v4, Zustand for state, Biome for lint + format.
• AI integration: Anthropic SDK (@anthropic-ai/sdk) directly. Output streams server-sent into the right panel.
• Storage: plain JSON files on local disk. No database in the MVP.
• Server: custom server.js rather than next start, to keep control of the streaming response and the action-fire lifecycle.
• Security: bcrypt for credentials, csrf-csrf for cross-site protection, jose for JWTs, isomorphic-dompurify for any HTML that reaches the DOM. Playwright covers the e2e flows and also captures screenshots for visual regression.
• Drag-and-drop: @dnd-kit.
• Preview: sandboxed render in device frames; full-viewport overlay.

Design and brand

The design guide lives at docs/design-guide.md in the repo and is the single source of truth for product behavior — color, spacing, the four right-panel modes (streaming, diff review, preview, idle), and the device-frame styling for preview mode. The aesthetic target is a calm developer surface: heavy use of monospace for the streaming output, restrained chrome around the board, and the diff view as the visual centerpiece during review.

Current status

• Pre-deploy / active build. Repo extracted from a parent monorepo into a standalone project; one commit at the time of extraction.
• Phases 0–2 largely built — security infrastructure ~89% done, static board ~79%, Claude draft panel ~80%.
• Phases 3–9 not started: Context Intelligence (the largest unstarted phase, feeds everything after it), Preview Mode, Annotations, Multi-Device Preview, Power Features, Implementation Actions, optional Watchdog.
• Target host, domain, and tunnel decisions still open. The infrastructure pattern from KinGrove and SetOff (LXC + Cloudflare Tunnel) is the obvious default.

What I would do next

• Close the remaining Phase 0/1/2 items — final security audit pass, the ~24 board polish + edge-case tasks, the ~10 Claude streaming tasks.
• Pick a target host and tunnel, run the first deploy. The build is far enough along that "I can see my own board on a real URL" should not wait on the Phase 3 work.
• Start Phase 3 (Context Intelligence) once deployed. This is the system that makes Claude runs aware of prior cards, prior approvals, and the shape of the project — the multiplier on every later phase.

Proof

• A board screenshot and a Claude-streaming side-panel screenshot are still being prepared for this page.
• The architecture diagram (column flow → action fire → archive) will land here alongside the screenshots.