the preview and the editor are a pair

`1 | 1 | 1` became `1 | [1 | 1]`, and the nesting is the whole difference.

Three siblings means every divider sits between two of them: widening the editor took from the preview,
and dragging the nav re-proportioned all three. Three panels that could only be sized against each
other.

Nested, the outer divider moves the nav against THE WORK and the inner one splits the work between
looking and changing. Those are the two questions somebody actually has — "give me more room" and "I
need more of the controls right now" — and each is one drag that leaves the other answer alone.

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

web/layout.ts

@@ -1,19 +1,33 @@
 import type { LayoutNode } from 'officerdev';
 
 /**
- * A nav down the left, whatever it selects beside it.
+ * A nav down the left, and beside it the pair that does the work.
  *
- * Two panels rather than three: `plugins/proxy-manager` puts a chat across the bottom, and this does
- * not, because there is no fofos skill for an agent to use yet. A chat panel with nothing to tell the
- * agent about the site would be a third of the screen spent on a general-purpose conversation that is
- * better had in the chat screen. Worth adding on the day this plugin ships a `skills/` directory.
+ * ── Why the preview and the editor are a GROUP ──
  *
- * The nav is the narrow one: nine rows of two short lines, and nothing in it grows.
+ * They were three siblings — nav, preview, editor — and the nesting is the whole difference. With three
+ * in a row every divider is between two of them, so widening the editor took from the preview and
+ * dragging the nav re-proportioned all three: three panels that can only be sized against each other.
  *
- * The editor is a COLUMN and not a drawer under the preview, which is where it used to be. A drawer
- * takes its height from the thing being edited — choosing a spacing shrank the page you were choosing
- * it for, and on a laptop two dropdowns cost a third of the frame. The preview stays whole and the
- * controls sit where a workspace puts controls.
+ * Nested, the outer divider moves the nav against THE WORK, and the inner one splits the work between
+ * looking and changing. Those are the two questions somebody actually has — "give me more room to
+ * work" and "I need more of the controls right now" — and each is now one drag that leaves the other
+ * answer alone.
+ *
+ * ── The nav is the narrow one ──
+ *
+ * Nine rows of two short lines, and nothing in it grows.
+ *
+ * ── The editor is a column, not a drawer ──
+ *
+ * It was under the preview and took its height from it: choosing a spacing shrank the page you were
+ * choosing it for, and on a laptop two dropdowns cost a third of the frame. The workspace already knows
+ * how to size and move panels — a drawer was a second, worse layout system living inside one.
+ *
+ * ── Still no chat panel ──
+ *
+ * `plugins/proxy-manager` puts one across the bottom and this does not, because there is no fofos skill
+ * for an agent to use yet. Worth adding on the day this plugin ships a `skills/` directory.
  */
 export const defaultLayout: LayoutNode = {
   type: 'group',
@@ -21,7 +35,17 @@ export const defaultLayout: LayoutNode = {
   direction: 'horizontal',
   children: [
     { node: { type: 'panel', id: 'fofos-admin-nav', appType: 'fofos-admin-nav' }, size: 22 },
-    { node: { type: 'panel', id: 'fofos-admin-detail', appType: 'fofos-admin-detail' }, size: 54 },
-    { node: { type: 'panel', id: 'fofos-admin-editor', appType: 'fofos-admin-editor' }, size: 24 },
+    {
+      node: {
+        type: 'group',
+        id: 'fofos-admin-work',
+        direction: 'horizontal',
+        children: [
+          { node: { type: 'panel', id: 'fofos-admin-detail', appType: 'fofos-admin-detail' }, size: 70 },
+          { node: { type: 'panel', id: 'fofos-admin-editor', appType: 'fofos-admin-editor' }, size: 30 },
+        ],
+      },
+      size: 78,
+    },
   ],
 };