Files pane: stop the phantom conflicts, keep the pane's place, wrap and prettify (#22)

* Files pane: stop the phantom conflicts, keep the pane's place, wrap and format

Three things, all from using it.

**"Changed on disk" when nothing had changed.** The save precondition compared
mtime, and /data is a FUSE bucket mount that rewrites mtime when it syncs an
object — measured here drifting 5.8s on a file nobody touched, well past the 1s
tolerance. So every save eventually refused itself. The precondition is now the
file's content: preview hands out a short sha1 (`tag`) of the bytes it read, the
save carries it back as `base`, and the write is refused only if the bytes moved
on. Immune to whatever the mount does with timestamps, and it still catches the
case it exists for — an agent writing the file under an open buffer.

**The pane forgot everything when it went off screen.** Switching a tile to
another session unmounted it, which threw away the folder you were in, the file
you had open, and anything you had typed. State lives in filesMemory.ts now,
keyed by session: read on mount, written as it changes, mirrored to localStorage
so it also survives a reload of the whole app. Come back and the buffer is still
there, still marked unsaved, with the disk untouched.

**Wrap and Format.** JSON arrives from agents as one enormous line: Wrap turns it
into a paragraph (a reading preference, sticky across files and reloads), Format
re-indents it in the buffer and leaves saving to you. Format appears only for
.json you can edit, and says where the parse broke on a half-written one.

Two bugs found while testing, both mine:

- Adopting a kept buffer ran on every render, not once per file. ⌘S fires two
handlers (the editor's keymap and the pane's); the first cleared the buffer,
the render in between put it back with the tag from before the write, and the
second handler saved a stale base — so a file reported itself changed on disk
one moment after being saved. Restore is once per path now, and flush() is
single-flight so a double trigger lands on the same save.
- A failed Format set the file's status to 'error', which counts as unsaved: a
parse complaint made a clean file look dirty and put the unsaved-changes dialog
in the way of closing it. It has its own slot now.

Endpoint checks: preview carries a tag · save with a good tag after the mtime
jumps 37s → 200 (was 409) · save on a tag that moved → 409 · no base → 200 ·
a bogus mtime param with a good tag → 200.

Browser: switch away and back — file, buffer and dirty dot all survive, disk
clean; same after a full reload; ⌘S issues exactly one write; breadcrumb returns
to workspaces/ws/deep/inner instead of the root; Wrap stops a long line
overflowing and carries to the next file and across a reload; Format takes
packed.json from 1 line to 13 without touching disk, saves as valid JSON, and on
broken.json reports "Expected double-quoted property name in JSON at position 15"
while leaving the file alone.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

* Files pane: call it Prettify

"Format" doesn't say what it will do to your file — it could as easily mean
reformat, convert, or overwrite. Prettify is what this operation is called
everywhere JSON is handled, so it needs no explaining.

Renamed through the handle too (prettify / prettifyError), so the code and the
button agree. Behaviour is untouched: still .json only, still edits the buffer
and leaves saving to you, still reports where the parse broke.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>

server/src/index.js

@@ -4,6 +4,7 @@ import path from 'node:path';
 import fs from 'node:fs';
 import { URL, fileURLToPath } from 'node:url';
 import { execFile } from 'node:child_process';
+import crypto from 'node:crypto';
 import express from 'express';
 import { WebSocketServer } from 'ws';
 import {
@@ -1324,6 +1325,9 @@ app.get('/api/files/:id/preview', async (req, res) => {
   const meta = {
     path: path.relative(root, f), name: path.basename(f), size: st.size, mtime: st.mtimeMs,
     kind, mime: mimeOf(f, kind === 'trace' ? 'text' : kind), harness,
+    // Only for files small enough to edit — which is exactly the set that can be
+    // saved, so nothing is hashed that could never be written back.
+    tag: st.size <= TEXT_MAX ? contentTag(f) : null,
   };
   // A trace still carries its raw text, so the Source toggle has something to
   // show without a second round trip.
@@ -1372,10 +1376,10 @@ app.get('/api/files/:id/download', (req, res) => {
 
 // Save an edited text file.
 //
-// Two guards earn their keep here. First, `mtime`: agents are writing these very
-// files while a tab sits open on one, so a save carries the mtime the editor
-// loaded and is refused if the file moved on — losing an agent's work to a
-// stale buffer is worse than making someone reload. Second, only files we could
+// Two guards earn their keep here. First, `base`: agents are writing these very
+// files while a tab sits open on one, so a save carries the content tag the
+// editor loaded and is refused if the file moved on — losing an agent's work to
+// a stale buffer is worse than making someone reload. Second, only files we could
 // show WHOLE are writable: the preview serves the first 512 KB of a big file, and
 // saving that back would silently truncate the rest.
 app.put('/api/files/:id/write', express.text({ limit: '8mb', type: '*/*' }), (req, res) => {
@@ -1393,8 +1397,8 @@ app.put('/api/files/:id/write', express.text({ limit: '8mb', type: '*/*' }), (re
   if (st.size > TEXT_MAX) {
     return res.status(413).json({ error: 'too big to edit — only the first part was loaded' });
   }
-  const expected = Number(req.query.mtime || 0);
-  if (expected && Math.abs(st.mtimeMs - expected) > 1000) {
+  const base = String(req.query.base || '');
+  if (base && base !== contentTag(f)) {
     return res.status(409).json({ error: 'changed on disk since you opened it', mtime: st.mtimeMs });
   }
   const text = typeof req.body === 'string' ? req.body : '';
@@ -1411,9 +1415,22 @@ app.put('/api/files/:id/write', express.text({ limit: '8mb', type: '*/*' }), (re
     return res.status(500).json({ error: String((e && e.message) || e) });
   }
   const after = fs.statSync(f);
-  res.json({ ok: true, size: after.size, mtime: after.mtimeMs });
+  res.json({ ok: true, size: after.size, mtime: after.mtimeMs, tag: contentTag(f) });
 });
 
+// What the editor's save is checked against. NOT mtime: /data is a FUSE bucket
+// mount that rewrites a file's mtime when it syncs the object — measured drifting
+// 5.8s with nobody touching the file — so an mtime precondition refuses honest
+// saves all day. The content is the thing we actually care about: same bytes as
+// when the editor loaded means nobody else got in.
+function contentTag(file) {
+  try {
+    return crypto.createHash('sha1').update(fs.readFileSync(file)).digest('hex').slice(0, 16);
+  } catch {
+    return null;
+  }
+}
+
 // Folders something else depends on: an agent's own workspace and the shared
 // skills dir. Renaming or deleting those out from under a running agent breaks
 // its cwd, so the pane refuses. Returns a label to say WHY, or null if it's fair

web/src/api.ts

@@ -165,6 +165,8 @@ export interface FileEntry { name: string; dir: boolean; size: number; mtime: nu
 export interface FileListing { path: string; root: string; entries: FileEntry[]; }
 export interface FilePreview {
   path: string; name: string; size: number; mtime: number; kind: FileKind; mime: string;
+  /** Content tag a save is checked against — null for files too big to edit. */
+  tag?: string | null;
   text?: string; truncated?: boolean; reason?: string;
   /** kind==='trace': which harness wrote it (claude, codex, …). */
   harness?: string | null;
@@ -223,10 +225,13 @@ export const deleteEntry = (id: string, p: string) =>
 export const downloadUrl = (id: string, p: string) =>
   `/api/files/${id}/download?path=${encodeURIComponent(p)}`;
 
-// Save an edited text file. `mtime` is the one the editor loaded: the server
-// refuses the write if the file changed underneath (an agent edited it too).
-export const writeFile = async (id: string, p: string, text: string, mtime: number): Promise<{ size: number; mtime: number }> => {
-  const r = await fetch(`/api/files/${id}/write?path=${encodeURIComponent(p)}&mtime=${mtime}`, {
+// Save an edited text file. `base` is the content tag the editor loaded: the
+// server refuses the write if the file's bytes moved on since (an agent edited
+// it too). Deliberately NOT mtime — the bucket mount rewrites that on its own
+// when it syncs an object, which made every save look like a conflict.
+export const writeFile = async (id: string, p: string, text: string, base: string | null): Promise<{ size: number; mtime: number; tag: string | null }> => {
+  const q = base ? `&base=${encodeURIComponent(base)}` : '';
+  const r = await fetch(`/api/files/${id}/write?path=${encodeURIComponent(p)}${q}`, {
     method: 'PUT', headers: { 'content-type': 'text/plain; charset=utf-8' }, body: text,
   });
   // Unlike the rest of the API, a failed save has something worth reading in it

web/src/components/CodeView.tsx

@@ -41,9 +41,11 @@ export type CodeViewProps = {
   onSave?: () => void;
   /** Light/dark, so the editor's own chrome matches the app. */
   theme: 'light' | 'dark';
+  /** Soft-wrap long lines instead of scrolling sideways. */
+  wrap?: boolean;
 };
 
-export default function CodeView({ text, name, editable, onChange, onSave, theme }: CodeViewProps) {
+export default function CodeView({ text, name, editable, onChange, onSave, theme, wrap = false }: CodeViewProps) {
   const host = useRef<HTMLDivElement | null>(null);
   const view = useRef<any>(null);
   const core = useRef<CM | null>(null);
@@ -68,6 +70,7 @@ export default function CodeView({ text, name, editable, onChange, onSave, theme
         doc: text,
         name,
         editable,
+        wrap,
         theme,
         onChange: (v: string) => cbs.current.onChange?.(v),
         onSave: () => cbs.current.onSave?.(),
@@ -92,6 +95,7 @@ export default function CodeView({ text, name, editable, onChange, onSave, theme
   }, [text]);
 
   useEffect(() => { if (view.current) core.current?.setEditable(view.current, editable); }, [editable]);
+  useEffect(() => { if (view.current) core.current?.setWrap(view.current, wrap); }, [wrap]);
   useEffect(() => { if (view.current) core.current?.setTheme(view.current, theme); }, [theme]);
 
   return (

web/src/components/FilesPane.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { recall, remember, readWrap, writeWrap } from './filesMemory';
 import type { Session } from '../types';
 import * as api from '../api';
 import type { FileEntry, FileKind, FilePreview } from '../api';
@@ -467,7 +468,11 @@ function useTheme(): 'light' | 'dark' {
   return theme;
 }
 
-type ViewInfo = { meta: FilePreview | null; extra: string[]; edit?: SaveState; trace?: TraceInfo };
+type ViewInfo = {
+  meta: FilePreview | null; extra: string[]; edit?: SaveState; trace?: TraceInfo;
+  /** True when a text surface is on screen, so wrapping means something. */
+  showWrap?: boolean;
+};
 
 // What a rendered trace needs from the pane's info strip: the same chips and
 // prompt navigation the Trace pane puts in its own header.
@@ -500,6 +505,13 @@ export type SaveState = {
   conflict: boolean;
   reload: () => void;
   overwrite: () => void;
+  /** Soft-wrap long lines — a reading preference, sticky across files. */
+  wrap: boolean;
+  setWrap: (on: boolean) => void;
+  /** Re-indent JSON in the buffer. Absent unless the open file is JSON. */
+  prettify?: () => void;
+  /** Why the last Prettify didn't happen. Not a save failure — nothing is dirty. */
+  prettifyError?: string | null;
 };
 
 // The viewer for one file. Kinds it can't render fall back to an honest
@@ -522,19 +534,42 @@ function FileView({ sessionId, path, zoom, raw, scripts, onInfo, onSaved }: {
 
   // Editing state. `draft` is null until the first keystroke: the editor is
   // always writable, but a file nobody touched has nothing to save.
-  const [draft, setDraft] = useState<string | null>(null);
-  const [status, setStatus] = useState<SaveState['status']>('clean');
+  const [wrap, setWrapPref] = useState(readWrap);
+  const [draft, setDraft] = useState<string | null>(() => {
+    const kept = recall(sessionId).draft;
+    return kept && kept.path === path ? kept.text : null;
+  });
+  const [status, setStatus] = useState<SaveState['status']>(() => {
+    const kept = recall(sessionId).draft;
+    return kept && kept.path === path ? 'dirty' : 'clean';
+  });
   const [saveErr, setSaveErr] = useState<string | null>(null);
   const [conflict, setConflict] = useState(false);
   // The buffer waiting to be written, if any. There is no timer: these files
   // have no undo and no git behind them, so nothing reaches disk until it is
   // asked for.
-  const pending = useRef<{ text: string; mtime: number } | null>(null);
+  const pending = useRef<{ text: string; base: string | null } | null>(null);
+  // Adopt a kept buffer ONCE per file. Re-checking on every render resurrected
+  // it mid-save — ⌘S fires two handlers (the editor's keymap and the pane's), the
+  // first cleared `pending` and the render in between put it back with the tag it
+  // had before the write, so the second handler saved a stale base and the file
+  // reported itself changed on disk one moment after being saved.
+  const restoredFor = useRef<string | null>(null);
+  if (restoredFor.current !== path) {
+    restoredFor.current = path;
+    const kept = recall(sessionId).draft;
+    pending.current = kept && kept.path === path ? { text: kept.text, base: kept.base } : null;
+  }
 
   useEffect(() => {
     let alive = true;
     setMeta(null); setErr(null); setSource(null); setDims(null); setPages(null);
-    setDraft(null); setSaveErr(null); setConflict(false); setStatus('clean');
+    setSaveErr(null); setConflict(false); setFmtErr(null);
+    // A buffer kept across a pane switch survives the reload of its own file —
+    // dropping it here is exactly the loss this is meant to prevent.
+    const kept = recall(sessionId).draft;
+    if (kept && kept.path === path) { setDraft(kept.text); setStatus('dirty'); }
+    else { setDraft(null); setStatus('clean'); }
     setTraceHead(null); setTraceQuery('');
     api.previewFile(sessionId, path)
       .then((m) => { if (alive) setMeta(m); })
@@ -597,15 +632,21 @@ function FileView({ sessionId, path, zoom, raw, scripts, onInfo, onSaved }: {
   // Resolves true when the file on disk matches the buffer — which "save and
   // close" needs, so a failed write keeps the dialog up instead of closing over
   // the error.
-  const flush = useCallback(async (force = false): Promise<boolean> => {
+  const inflight = useRef<Promise<boolean> | null>(null);
+  const flush = useCallback((force = false): Promise<boolean> => {
+    // One write at a time. Two callers land on the same save rather than racing
+    // each other into a conflict of their own making.
+    if (inflight.current) return inflight.current;
     const job = pending.current;
-    if (!job) return true;               // nothing outstanding
+    if (!job) return Promise.resolve(true);   // nothing outstanding
     pending.current = null;
     setStatus('saving'); setSaveErr(null);
+    const run = async (): Promise<boolean> => {
     try {
-      const after = await api.writeFile(sessionId, path, job.text, force ? 0 : job.mtime);
+      const after = await api.writeFile(sessionId, path, job.text, force ? null : job.base);
       setConflict(false);
-      setMeta((m) => (m ? { ...m, text: m.kind === 'html' ? m.text : job.text, size: after.size, mtime: after.mtime } : m));
+      setMeta((m) => (m ? { ...m, text: m.kind === 'html' ? m.text : job.text, size: after.size, mtime: after.mtime, tag: after.tag } : m));
+      remember(sessionId, { draft: null });
       if (kindRef.current === 'html') setSource(job.text);
       setStatus('saved');
       onSaved?.();
@@ -620,6 +661,10 @@ function FileView({ sessionId, path, zoom, raw, scripts, onInfo, onSaved }: {
       setStatus('error');
       return false;
     }
+    };
+    const p = run().finally(() => { inflight.current = null; });
+    inflight.current = p;
+    return p;
   }, [sessionId, path, onSaved]);
 
   // Typing only fills the buffer. Writing it is a decision, taken with the Save
@@ -628,9 +673,13 @@ function FileView({ sessionId, path, zoom, raw, scripts, onInfo, onSaved }: {
   const onEdit = useCallback((next: string) => {
     setDraft(next);
     if (!canEdit || !meta) return;
-    pending.current = { text: next, mtime: meta.mtime };
+    const base = meta.tag ?? null;
+    pending.current = { text: next, base };
+    // Held outside the component so switching this tile to another session — or
+    // reloading the app — doesn't take the buffer with it.
+    remember(sessionId, { draft: { path, text: next, base } });
     setStatus((st) => (st === 'error' ? st : 'dirty'));   // keep a failure visible
-  }, [canEdit, meta]);
+  }, [canEdit, meta, sessionId, path]);
 
   // Switching files abandons an unsaved buffer, so the pane asks before it lets
   // that happen (see leaveView).
@@ -642,12 +691,34 @@ function FileView({ sessionId, path, zoom, raw, scripts, onInfo, onSaved }: {
     return () => clearTimeout(t);
   }, [status]);
 
+  // JSON arrives from agents as one enormous line more often than not, which is
+  // unreadable either way: wrap turns it into a paragraph, Prettify gives it
+  // structure. Both are offered; neither writes anything on its own.
+  const isJson = /\.json$/i.test(meta?.name || '');
+  // Kept apart from saveErr on purpose: "this isn't valid JSON" is a complaint
+  // about a button press, not an unsaved buffer, and must not make the file look
+  // dirty or stand in the way of closing it.
+  const [fmtErr, setFmtErr] = useState<string | null>(null);
+  const prettify = useCallback(() => {
+    const src = draft ?? saved;
+    try {
+      const next = `${JSON.stringify(JSON.parse(src), null, 2)}\n`;
+      if (next !== src) onEdit(next);
+      setFmtErr(null);
+    } catch (e: any) {
+      // Say where it broke — "Expected double-quoted property name at position
+      // 15" is the useful half of this feature when a file is half-written.
+      setFmtErr(`not valid JSON — ${String(e?.message || e).replace(/^JSON\.parse: /, '')}`);
+    }
+  }, [draft, saved, onEdit]);
+
   const edit = useMemo<SaveState>(() => ({
     can: canEdit,
     save: () => flush(),
     saveNow: (force = false) => flush(force),
     discard: () => {
       pending.current = null;
+      remember(sessionId, { draft: null });
       setDraft(null); setSaveErr(null); setStatus('clean');
     },
     // Only worth saying when editing was plausible and isn't: nobody expects to
@@ -658,6 +729,7 @@ function FileView({ sessionId, path, zoom, raw, scripts, onInfo, onSaved }: {
     conflict,
     reload: () => {
       pending.current = null;
+      remember(sessionId, { draft: null });
       setDraft(null); setSaveErr(null); setConflict(false); setStatus('clean');
       setTraceHead(null); setTraceQuery('');
       setMeta(null);
@@ -667,7 +739,12 @@ function FileView({ sessionId, path, zoom, raw, scripts, onInfo, onSaved }: {
       }
     },
     overwrite: () => flush(true),
-  }), [canEdit, editKind, meta?.truncated, status, saveErr, conflict, flush, sessionId, path]);
+    wrap,
+    setWrap: (on: boolean) => { setWrapPref(on); writeWrap(on); },
+    prettify: isJson && canEdit ? prettify : undefined,
+    prettifyError: fmtErr,
+  }), [canEdit, editKind, meta?.truncated, status, saveErr, conflict, flush, sessionId, path,
+       wrap, isJson, prettify, fmtErr]);
 
   const traceInfo = useMemo<TraceInfo | undefined>(() => (meta?.kind === 'trace' && !raw ? {
     harnessLabel: traceHead?.harnessLabel,
@@ -682,7 +759,12 @@ function FileView({ sessionId, path, zoom, raw, scripts, onInfo, onSaved }: {
   const traceSrc = useCallback<TraceSource>(
     (offset, limit) => api.getFileTracePage(sessionId, path, offset, limit), [sessionId, path]);
 
-  useEffect(() => { onInfo({ meta, extra, edit, trace: traceInfo }); }, [meta, extra, edit, traceInfo, onInfo]);
+  // Rendered markdown and a rendered trace do their own wrapping; the toggle is
+  // for the surfaces that actually scroll sideways.
+  const showWrap = !!meta && (meta.kind === 'text'
+    || ((meta.kind === 'markdown' || meta.kind === 'html' || meta.kind === 'trace') && raw));
+  useEffect(() => { onInfo({ meta, extra, edit, trace: traceInfo, showWrap }); },
+    [meta, extra, edit, traceInfo, showWrap, onInfo]);
 
   if (err) return <div className="fv-empty">Could not open this file.<div className="fv-sub">{err}</div></div>;
   if (!meta) return <div className="fv-empty">Loading…</div>;
@@ -691,6 +773,7 @@ function FileView({ sessionId, path, zoom, raw, scripts, onInfo, onSaved }: {
   const code = (text: string) => (
     <CodeView
       text={text} name={meta.name} theme={theme}
+      wrap={wrap}
       editable={canEdit}
       onChange={onEdit}
       onSave={() => flush()}   // ⌘S still works; it just beats the timer
@@ -791,13 +874,15 @@ export default function FilesPane({
   onFocus?: () => void;
   onClose: () => void;
 }) {
-  const [root, setRoot] = useState('');
+  // Where this pane was when it last went off screen. Read once, at mount.
+  const kept = useMemo(() => recall(session.id), [session.id]);
+  const [root, setRoot] = useState(kept.root);
   const [rootLabel, setRootLabel] = useState('workspace');
   const [busy, setBusy] = useState(false);
   const [dragOver, setDragOver] = useState(false);
   const [reloadKey, setReloadKey] = useState(0);
-  const [sort, setSort] = useState<Sort>(DEFAULT_SORT);
-  const [viewing, setViewing] = useState<string | null>(null);
+  const [sort, setSort] = useState<Sort>(kept.sort ?? DEFAULT_SORT);
+  const [viewing, setViewing] = useState<string | null>(kept.viewing);
   const [info, setInfo] = useState<ViewInfo>({ meta: null, extra: [] });
   const [raw, setRaw] = useState(false);          // markdown/html: show the source
   const [scripts, setScripts] = useState(false);  // html: run the page's own JS
@@ -809,13 +894,20 @@ export default function FilesPane({
   const [moving, setMoving] = useState<Moving | null>(null);
   // Where new folders, new files and uploads land: the folder you last clicked,
   // falling back to the one the breadcrumb names.
-  const [target, setTarget] = useState<string | null>(null);
+  const [target, setTarget] = useState<string | null>(kept.target);
   const [acting, setActing] = useState(false);
   const [actErr, setActErr] = useState<string | null>(null);
   const paneRef = useRef<HTMLDivElement | null>(null);
 
   const dir = useDir(session.id, root, reloadKey);
 
+  // Coming back to a pane should put you where you left it, not at the top of
+  // the workspace — the folder you were in, the file you were reading, and the
+  // way you had it sorted.
+  useEffect(() => {
+    remember(session.id, { root, viewing, target, sort });
+  }, [session.id, root, viewing, target, sort]);
+
   useEffect(() => { api.listFiles(session.id, '').then((r) => setRootLabel(r.root)).catch(() => {}); }, [session.id]);
   // Entering a preview focuses the pane, so Esc walks back out without a
   // window-wide key handler stealing keys from the other panes. Every file opens
@@ -1051,6 +1143,25 @@ export default function FilesPane({
                 )}
               </span>
             ) : null}
+            {edit?.prettifyError && <span className="fi-err" title={edit.prettifyError}>{edit.prettifyError}</span>}
+            {edit?.can && edit.prettify && (
+              <button
+                className="mini-btn" onClick={edit.prettify}
+                title="Re-indent this JSON in the buffer — it still needs saving"
+              >
+                Prettify
+              </button>
+            )}
+            {info.showWrap && edit && (
+              <button
+                className={`mini-btn${edit.wrap ? ' on' : ''}`}
+                onClick={() => edit.setWrap(!edit.wrap)}
+                title={edit.wrap ? 'Long lines are wrapped — click to let them run' : 'Wrap long lines'}
+                aria-pressed={edit.wrap}
+              >
+                Wrap
+              </button>
+            )}
             {edit && !edit.can && edit.why && (
               <span className="fi-stat fi-extra" title={edit.why}>read-only</span>
             )}

web/src/components/cm-core.ts

@@ -132,6 +132,7 @@ async function languageFor(name: string): Promise<Extension | null> {
 const langComp = new Compartment();
 const editComp = new Compartment();
 const themeComp = new Compartment();
+const wrapComp = new Compartment();
 
 export type EditorHandle = EditorView & { __compartments?: never };
 
@@ -140,6 +141,7 @@ export function createEditor(opts: {
   doc: string;
   name: string;
   editable: boolean;
+  wrap: boolean;
   theme: 'light' | 'dark';
   onChange: (next: string) => void;
   onSave: () => void;
@@ -153,6 +155,7 @@ export function createEditor(opts: {
   const state = EditorState.create({
     doc: opts.doc,
     extensions: [
+      wrapComp.of(opts.wrap ? EditorView.lineWrapping : []),
       lineNumbers(),
       foldGutter(),
       highlightSpecialChars(),
@@ -200,6 +203,10 @@ export function setDoc(view: EditorView, text: string) {
   }
 }
 
+export function setWrap(view: EditorView, wrap: boolean) {
+  view.dispatch({ effects: wrapComp.reconfigure(wrap ? EditorView.lineWrapping : []) });
+}
+
 export function setEditable(view: EditorView, editable: boolean) {
   view.dispatch({
     effects: editComp.reconfigure([EditorView.editable.of(editable), EditorState.readOnly.of(!editable)]),

web/src/components/filesMemory.ts

@@ -0,0 +1,77 @@
+// What a Files pane remembers when it isn't on screen.
+//
+// The pane unmounts whenever its tile shows something else, so without this
+// every switch away threw out where you were AND anything you had typed — you
+// came back to the workspace root with an empty editor. State lives here
+// instead, keyed by session, and the pane reads it back on mount.
+//
+// The in-memory map is what makes a pane switch lossless. localStorage is the
+// second line: it also survives a reload of the whole app, which is the other
+// way people lose a buffer they never asked to lose.
+
+export interface Draft {
+  path: string;
+  text: string;
+  /** Content tag the buffer was based on — see contentTag() on the server. */
+  base: string | null;
+}
+
+export interface FilesMemory {
+  root: string;
+  viewing: string | null;
+  target: string | null;
+  sort?: { key: 'name' | 'size' | 'time'; desc: boolean };
+  draft: Draft | null;
+}
+
+const EMPTY: FilesMemory = { root: '', viewing: null, target: null, draft: null };
+
+// A buffer big enough to be worth keeping is still small next to the 5 MB
+// localStorage budget; past this the in-memory copy alone carries it, so a pane
+// switch is still safe and only a full reload loses it.
+const DRAFT_MAX = 256 * 1024;
+
+const mem = new Map<string, FilesMemory>();
+const key = (id: string) => `am.files.${id}`;
+
+export function recall(id: string): FilesMemory {
+  const held = mem.get(id);
+  if (held) return held;
+  try {
+    const raw = localStorage.getItem(key(id));
+    if (raw) {
+      const parsed = { ...EMPTY, ...JSON.parse(raw) } as FilesMemory;
+      mem.set(id, parsed);
+      return parsed;
+    }
+  } catch {
+    // corrupt or unavailable storage is not worth failing a pane over
+  }
+  return EMPTY;
+}
+
+export function remember(id: string, patch: Partial<FilesMemory>) {
+  const next = { ...recall(id), ...patch };
+  mem.set(id, next);
+  try {
+    const forDisk = next.draft && next.draft.text.length > DRAFT_MAX ? { ...next, draft: null } : next;
+    localStorage.setItem(key(id), JSON.stringify(forDisk));
+  } catch {
+    // over quota, or private mode: memory still has it
+  }
+}
+
+export function forget(id: string) {
+  mem.delete(id);
+  try { localStorage.removeItem(key(id)); } catch {}
+}
+
+// One sticky preference rather than a per-file one: wrapping is about how you
+// like to read, not about the file in front of you.
+const WRAP = 'am.files.wrap';
+export const readWrap = (): boolean => {
+  try { return localStorage.getItem(WRAP) === '1'; } catch { return false; }
+};
+export const writeWrap = (on: boolean) => {
+  try { localStorage.setItem(WRAP, on ? '1' : '0'); } catch {}
+};

web/src/styles.css

@@ -722,6 +722,7 @@ body {
 .mini-btn.danger { background: var(--danger); color: #fff; border-color: transparent; }
 .mini-btn.danger:disabled { opacity: .5; }
 /* the one obvious action in a group — Create, Save and close */
+.mini-btn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
 .mini-btn.primary { background: var(--accent); color: var(--accent-fg); border-color: transparent; }
 .mini-btn.primary:disabled { opacity: .45; }
 .tree-row.selected { background: color-mix(in srgb, var(--accent) 14%, transparent); }