Files, open beside the conversation

A third side panel, built the way the terminal is and filled the way the
inspector is: tabs holding open files. Project files over SFTP in an agent
chat; notes, skills, knowledge documents, this chat's text attachments and its
own scratch document everywhere. Read with pygments, edited in a plain
textarea, saved with a conflict check.

A bug found on the way in, and the reason this needed its own read path.
`ssh.read_file` ends in `clean_output`, which strips ANSI escapes and decodes
with errors="replace" -- right for the output of a command, and fatal for an
editor: open a file containing an escape byte, press Save, and you have
silently rewritten it with the escapes gone and every undecodable byte replaced
by U+FFFD. `read_text`/`write_text` decode strictly, report binary rather than
mangling it, carry an mtime:size token for a file that moved underneath, and
refuse an oversize write rather than truncating -- `write_file` truncates
because a model is told how many bytes it wrote, and somebody pressing Save is
not. The model-facing pair is untouched: what it returns is a contract a model
has been shown. A truncated read opens read-only for the mirror-image reason.

Six sources go through one dispatch table, for the reason tool_labels.py is a
table: six independently written permission checks is how one ends up written
slightly differently, and that failure looks like editing somebody else's note.

A save on a project file bypasses agent/policy.py, which makes it the fourth
documented exception to "the modes do not govern the keyboard" and the first
that writes. Same argument as the terminal panel -- whoever owns the credential
could write the file with scp -- but the consequence is larger and is now said
out loud rather than left to be inferred.

The model opens tabs from the file tools it was already calling, so no new
schema and no tokens. It never brings one to the front: an agent reads forty
files in a long reply, and taking the screen each time would drag somebody
through all of them and lose any edit in progress. Only the strip is streamed,
guarded on truthiness so the frame can never blank itself -- an empty one would
close every open tab, the approval card you could press twice with the sign
reversed. Both halves are settled on the server, which is why canvas.js needs
no guard against a swap at all.

No vendored editor. CodeMirror 6 needs a bundler, which is hard rule 1;
CodeMirror 5 would be a larger payload than xterm on every page, and xterm is
the one heavy dependency precisely because it loads only where it can be used.
So: server-rendered highlighting for reading, a textarea for writing, and the
panel says there is no colour while you type rather than pretending.

Also here: a scratch document per chat, with `scratch_write` at RISK_READ on
plan_update's argument, and a test pinning the three numbers that decide a
panel's width -- LAYOUT_BOUNDS drops an unknown variable silently, so a panel
missing from it has a drag handle that works and forgets.

Driven under a DOM stub and against the running application.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

src/lembas/web/static/css/app.css

@@ -588,7 +588,8 @@ body.is-resizing {
   cursor: col-resize;
   user-select: none;
 }
-body.is-resizing .terminal__screen { pointer-events: none; }
+body.is-resizing .terminal__screen,
+body.is-resizing .canvas__body { pointer-events: none; }
 
 @media (max-width: 64rem) {
   /* A full-height overlay has no edge to drag, and no room to spare. */
@@ -644,14 +645,179 @@ body.is-resizing .terminal__screen { pointer-events: none; }
 .terminal__last:empty { display: none; }
 .terminal__message--error { color: var(--danger); }
 
+/* --- The canvas panel ------------------------------------------------------
+   The same shape as the terminal beside it: a fixed-width column that hides
+   with the `hidden` attribute, and shares .panel-head and .panel-resize. It
+   sits nearest the conversation, being the widest and the one most likely to
+   be read alongside it. */
+.canvas {
+  width: var(--canvas-width);
+  min-width: var(--canvas-width-min);
+  max-width: 80vw;
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  position: relative;
+  background: var(--bg-sunken);
+  border-left: 1px solid var(--border);
+}
+.canvas__inner {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1;
+}
+/* Where the file came from, beside its name. Shrinks and truncates rather than
+   pushing the close button off the end. */
+.canvas__where {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--ink-faint);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  font-weight: 400;
+}
+
+/* One row, always. It scrolls sideways rather than wrapping -- the same rule
+   the composer's toolbar is built around, and for the same reason: a strip
+   that wraps to three lines takes the file with it. */
+.canvas__tabs {
+  display: flex;
+  flex: none;
+  gap: var(--sp-1);
+  padding: var(--sp-1) var(--sp-2);
+  overflow-x: auto;
+  scrollbar-width: thin;
+  border-bottom: 1px solid var(--border);
+}
+.canvas__tab {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  max-width: 14rem;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  transition: background var(--transition-fast);
+}
+.canvas__tab:hover { background: var(--surface); }
+.canvas__tab.is-active { background: var(--surface-raised); }
+.canvas__tab-open {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sp-1);
+  min-width: 0;
+  height: var(--control-h-sm);
+  padding: 0 var(--sp-1) 0 var(--sp-2);
+  border: 0;
+  background: none;
+  color: var(--ink-muted);
+  font-size: var(--text-xs);
+  cursor: pointer;
+}
+.canvas__tab.is-active .canvas__tab-open { color: var(--ink); }
+.canvas__tab-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* Unsaved. A dot rather than a colour alone, which nobody can see in a theme
+   they did not choose. */
+.canvas__tab-dot {
+  flex: none;
+  width: 6px;
+  height: 6px;
+  border-radius: var(--radius-full);
+  background: var(--accent);
+}
+.canvas__tab-close {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 var(--sp-1);
+  border: 0;
+  background: none;
+  color: var(--ink-faint);
+  cursor: pointer;
+}
+.canvas__tab-close:hover { color: var(--ink); }
+
+/* One row, and the path box is the only thing allowed to shrink -- the same
+   arrangement the composer's toolbar is built around. */
+.canvas__open {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  flex: none;
+  padding: var(--sp-2) var(--sp-3);
+  border-bottom: 1px solid var(--border);
+}
+.canvas__open-form { display: flex; gap: var(--sp-2); min-width: 0; flex: 1; }
+.canvas__path {
+  min-width: 0;
+  flex: 1;
+  height: var(--control-h-sm);
+  font-size: var(--text-xs);
+}
+
+.canvas__body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: var(--sp-3);
+}
+.canvas__doc { display: flex; flex-direction: column; gap: var(--sp-2); }
+.canvas__actions { display: flex; align-items: center; gap: var(--sp-2); }
+.canvas__hint, .canvas__empty, .canvas__note {
+  color: var(--ink-faint);
+  font-size: var(--text-xs);
+}
+.canvas__note { display: flex; align-items: center; gap: var(--sp-2); }
+.canvas__code {
+  margin: 0;
+  padding: var(--sp-3);
+  border-radius: var(--radius-sm);
+  background: var(--code-bg);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  line-height: 1.6;
+  white-space: pre;
+  overflow-x: auto;
+}
+.canvas__form { display: flex; flex-direction: column; gap: var(--sp-2); }
+/* No highlighting while typing, and the panel says so rather than pretending.
+   A mirror behind this would be the composer's trick at two thousand lines,
+   laying the buffer out twice on every keystroke. */
+.canvas__editor {
+  width: 100%;
+  min-height: 24rem;
+  padding: var(--sp-3);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--code-bg);
+  color: var(--ink);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  line-height: 1.6;
+  white-space: pre;
+  overflow-wrap: normal;
+  resize: vertical;
+}
+.canvas__conflict { display: flex; flex-direction: column; gap: var(--sp-3); }
+.canvas__theirs summary { cursor: pointer; font-size: var(--text-xs); }
+
 @media (max-width: 64rem) {
-  .terminal {
+  .terminal,
+  .canvas {
     position: fixed;
     inset: 0 0 0 auto;
-    width: min(var(--terminal-width), 100vw);
     z-index: var(--z-panel);
     box-shadow: var(--shadow-lg);
   }
+  .terminal { width: min(var(--terminal-width), 100vw); }
+  .canvas { width: min(var(--canvas-width), 100vw); }
 }
 
 .topbar {

src/lembas/web/static/css/tokens.css

@@ -72,6 +72,13 @@
      re-wraps everything a program prints. */
   --terminal-width: 34rem;
   --terminal-width-min: 24rem;
+  /* Wider again: a source line is longer than eighty columns once nothing is
+     re-wrapping it, and this one holds prose as well. The minimum is 24rem =
+     384px and must equal both `data-resize-min` in chat/_canvas.html and the
+     lower bound in api/preferences.py:LAYOUT_BOUNDS -- a width outside those
+     bounds is silently dropped, so the three are pinned equal by a test. */
+  --canvas-width: 40rem;
+  --canvas-width-min: 24rem;
   --thread-max-width: 48rem;
   --header-height: 3.5rem;