Canvas mode and the console drawer
Answer me with artifact · 2026-10-28 15:39

New version 0.5.10

You have 0.5.5. Found when this page was made.

What's new:

Run in a terminal:

npx skills update answer-me-with-html -y

Or tell your agent:

Update answer-me-with-html
See what's new

Canvas mode and the console drawer

A

1 Where they stand today

Both came from an earlier version of the product, before Code had panes, Terminal mode and the List · Grid · Deck overview.

Console drawer Canvas mode
What it is A bottom drawer with 11 tabs An infinite canvas of tiles: terminals, Terminal bots, sessions, previews, diffs, notes and the Factory graph
Where it was meant for The whole platform at first, then only Code Code only (the workspace as a live Factory graph)
State now Turned off since 2026-10-27, so nothing reaches it On: the ⋮ → Canvas mode menu and the top-right canvas button
Code size About 20 files About 1,300 lines, plus around 20 tile components

Two leftovers still point at the drawer, and both do nothing now:

  • the browser agent's "open drawer" call;
  • the QA smoke check.

The drawer's background collectors (Output, Problems, Ports) only ran while it was mounted. That means nothing is collecting that data now.

B

2 Console drawer: where each tab goes

Most of its tabs already have a newer home.

Tab Already covered by Plan
Terminals Terminal mode Done
Changes Changes pane, and the Changes card in Session details Done
Plan Progress card in Session details Done
Tasks Tasks pane Done
Artifacts Artifacts pane, and Artifacts in the rail Done
Usage Composer usage meter and rail meter Done
Problems Nothing New Problems pane
Output and Runs Nothing One new Runs pane (each run with its output)
Ports Nothing A "running servers" list inside the Browser pane
Factory (Mission Control) Partly the Factory graph in Canvas mode Follows the canvas decision below

Then:

  • delete the drawer and its store;
  • fix the two dead callers;
  • move the collectors to run with Code.

These are all panes, so they reach the phone and PWA through the existing phone panes menu.

What do we do with the console drawer?
C

3 Canvas mode: options

Canvas mode overlaps with the new pieces:

  • its terminals and bots are now Terminal mode;
  • its previews and diffs are now panes;
  • its session tiles are now the overview's Grid and Deck.

Only three things are its own: free placement on a board, notes, and the Factory graph (who spawned what, which bot works which step).

Option What changes
A. Canvas becomes the overview's 4th layout List · Grid · Deck · Canvas, for threads and for terminal sessions. One place to see everything, plus the Factory graph. The ⋮ menu item and the top-right canvas button go away.
B. Keep it as a separate mode It stays as it is. It still repeats panes and Terminal mode, and keeps two ways in.
C. Retire it Delete it. The Factory graph moves to Bot mode's Factory view. Notes are dropped.
What do we do with Canvas mode?
D

4 Order of work after you pick

  1. Drawer cleanup: dead callers fixed, collectors moved to run with Code, drawer deleted.
  2. New panes: Problems, Runs, and Ports inside Browser, on Desktop, the phone and the PWA.
  3. Canvas, as you pick:
    • A: add Canvas to the layout switch and remove the old entry points;
    • C: delete it.
  4. Docs and the dependency map in the same PRs, then one Desktop build.
E

5 Your idea: the drawer becomes the system monitor

Move the Factory graph out of Canvas into the drawer, and make the drawer the live view of everything running. I think this is the better plan. It gives each place one job:

Place Scope Holds
Panes One session Changes, Files, Browser, Tasks, Transcript…
Session details One session Progress, outputs, context
Drawer (system monitor) The whole platform, every mode What runs right now, across sessions and computers

Drawer tabs:

  • Graph: the Factory graph from Canvas, live (who spawned what, which bot is on which step, status colours).
  • Running: terminals, Terminal bots, dev servers and their ports, and background tasks, each with stop and open buttons.
  • Runs: agent turns, commands and DAG runs, with their output.
  • Problems: typecheck, lint and test failures.

How you reach it:

  • Desktop: a live indicator at the bottom of the rail ("● 3 running") opens it, in every mode.
  • Phone and PWA: the same indicator opens it as a sheet.

What it changes:

  • Canvas mode loses its last unique part, so we retire it. Its free board and notes go; the Factory graph lives on in the drawer.
  • The collectors run all the time, not only while the drawer is open, so the indicator count is always right.
  • The old Code-only tabs (Terminals, Changes, Plan, Tasks, Artifacts, Usage) stay out, because panes and the rail already have them.
Build the drawer as the system monitor and retire Canvas mode?
Where does the drawer open from?
F

6 What it looks like

Built on the app's real theme. Click the tabs, ● 3 running in the rail, and the stop and open buttons.

React · Desktop: Code with the system drawer open
React · Phone and PWA: the same drawer as a sheet

What the mockups show:

  • The rail indicator shows how many things are running and how many problems there are. Click it to open or close the drawer, in any mode.
  • The drawer sits above the prompt and is labelled SYSTEM. Its tabs are Graph, Running, Runs and Problems. It shows everything on this computer and the cloud, not just the session you're in.
  • Graph is Canvas mode's Factory graph: the project, its steps, which bot works each step, and the shell they spawned.
  • Running lists each item with Open and Stop. A dev server's Open shows it in the Browser pane.
  • Phone and PWA: the count pill in the header opens the same four tabs as a bottom sheet. On the phone, Graph becomes an indented tree because a wide graph doesn't fit.
G

7 Research: what else belongs in the drawer

I compared about 30 products in four groups:

  • cloud coding agents: Cursor, Claude Code, Codex, Devin, Copilot, Jules;
  • local agent managers: Conductor, Warp, Zed;
  • IDE panels: VS Code, JetBrains, Docker;
  • agent-monitoring tools: LangSmith, Temporal, Airflow.

What I found:

  • No product lets you approve from one list across all sessions. The pattern everywhere is a "Needs input" group sorted to the top, but you still have to open each session to answer. Claude Code cloud sessions can even expire while waiting for an approval.
  • No product ships a graph of who spawned what. The closest is an indented sub-agent tree. Our Factory graph would be ahead of everyone.
  • No product lists typecheck, lint and test failures across sessions. The nearest is PR CI status.
  • Too many tabs crowd the panel. VS Code's five tabs already overlap at narrow widths, so about four is the limit.

Recommended drawer:

Part Holds
Needs you (new, first) Every approval and question from every bot, with who asks, how long it has waited, and Approve, Deny or Reply right there
Running Bots, terminals, dev servers and ports, background tasks and computers, with Open and Stop. A List / Graph switch shows the Factory graph. Next up lists the next scheduled routines.
Runs History: agent turns, commands and Factory runs, with status, time, model, tokens and cost. A Factory run opens as its graph.
Problems Typecheck, lint and test failures, plus stuck runs, crashes, spend-cap stops and "no bot available"
Header strip Plan usage, spend today against the cap, and agent slots in use
  • Rail indicator: reads "2 need you · 5 running · 1 problem". Each part opens its own tab. Only "need you" and "problem" are coloured, and the drawer never opens by itself.
  • Phone and PWA: one list with filter chips. Needs-you cards sit on top with large Approve and Deny buttons. The graph becomes a tree, and push notifications fire for approvals and failures.
  • Leave out:
    • a Notifications tab: Runs is the history and Needs you is the inbox;
    • a generic Output tab: logs open from each item;
    • raw OS processes;
    • usage trend charts, which go on a separate page;
    • per-session panes, which stay where they are.
Which drawer tab set do we build?