fix(console): fleets.toml/agents.toml editor fills to the window bottom

console/src/main.ts

@@ -400,6 +400,18 @@ function showEditorError(msg: string | null): void {
   editorError.hidden = !msg;
 }
 
+// Fill the editor down to the window's bottom edge (Brett: it capped at a
+// fixed height with a chunk of blank space below) instead of a flat number —
+// the space above it (the Fleets row's height) isn't constant, so this is
+// measured live rather than hard-coded. No-ops while the editor is closed;
+// wired to `resize` once at boot below since the window is resizable.
+function syncEditorHeight(): void {
+  if (!editorMount || !editorSection || editorSection.hidden) return;
+  const top = editorMount.getBoundingClientRect().top;
+  const h = Math.max(200, window.innerHeight - top - 16);
+  editorMount.style.setProperty("--cfg-editor-h", `${h}px`);
+}
+
 async function openEditor(target: EditorTarget): Promise<void> {
   if (!editorSection || !editorMount) return;
   editorTarget = target;
@@ -436,6 +448,7 @@ async function openEditor(target: EditorTarget): Promise<void> {
     }),
   });
   editorSection.hidden = false;
+  syncEditorHeight();
   editorView.focus();
 }
 
@@ -943,6 +956,25 @@ async function boot(): Promise<void> {
     syncTopbarHeight();
     new ResizeObserver(syncTopbarHeight).observe(topbarEl);
   }
+  // The Fleets column and the Agent chat column used to size to their own
+  // content, so a short Fleets list ended up visibly shorter than the taller
+  // chat panel (Brett). `--drilldown-row-h` floors the row's height at the
+  // window's bottom edge; `align-items: stretch` (styles.css) then makes both
+  // columns match it. `.drilldown-row`'s own top is fixed (topbar height +
+  // `.content`'s padding, neither content-dependent), so this only needs
+  // `resize`, not a ResizeObserver on the row itself.
+  const drilldownRowEl = document.getElementById("drilldown-row");
+  const syncDrilldownHeight = (): void => {
+    if (!drilldownRowEl) return;
+    const top = drilldownRowEl.getBoundingClientRect().top;
+    const h = Math.max(200, window.innerHeight - top - 16);
+    drilldownRowEl.style.setProperty("--drilldown-row-h", `${h}px`);
+  };
+  syncDrilldownHeight();
+  window.addEventListener("resize", syncDrilldownHeight);
+  // Keep the fleets.toml/agents.toml editor filling the window as it's
+  // resized (`syncEditorHeight` no-ops while closed).
+  window.addEventListener("resize", syncEditorHeight);
   setupUpdater();
   await startCore();
   // Debug drawer's Config tab: pin the oab-mcp target (cluster/profile/region →

console/src/styles.css

@@ -188,9 +188,16 @@ body {
    instead of squeezing. ---- */
 .drilldown-row {
   display: flex;
-  align-items: flex-start;
+  /* Was flex-start — the Fleets column (short: just a card list) and the
+     Agent chat column (tall: min-height'd chat log) never matched height,
+     leaving Fleets looking stubby next to a lot of blank page below it
+     (Brett). `stretch` + a live-measured floor (`--drilldown-row-h`, same
+     pattern as `--topbar-h`/`--cfg-editor-h`) makes both columns match and
+     reach the window's bottom edge when their content is shorter than that. */
+  align-items: stretch;
   gap: 0;
   margin: 0 0 16px;
+  min-height: var(--drilldown-row-h, auto);
 }
 /* Nothing toggles `hidden` on this element today (deploy.ts used to; it now
    hides `#config`/`#fleet-detail` in place instead, see deploy.ts), but the
@@ -203,6 +210,24 @@ body {
 .drilldown-main {
   flex: 1 1 0;
   min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+/* Whichever of #config/#fleet-detail/#deploy-wrap is showing (the others are
+   `[hidden]`) grows to fill the stretched column instead of sitting short at
+   the top. */
+.drilldown-main > * {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+/* Same equal-specificity trap as `.debug-drawer[hidden]`/`.deploy-identity
+   [hidden]` above — `.drilldown-main > *` and the UA `[hidden]` rule tie, and
+   the later author rule wins, so a hidden sibling would render as an empty
+   flex box instead of disappearing without this. */
+.drilldown-main > *[hidden] {
+  display: none;
 }
 /* Drag handle between the two columns — mousedown/move/up wiring lives in
    main.ts (src/splitPane.ts owns the pure clamp/persist logic). Widening
@@ -244,10 +269,21 @@ body {
 }
 .drilldown-side > .chat-wrap {
   margin: 0;
+  /* Absorbs whatever extra height `align-items: stretch` (above) gives the
+     column beyond #remote's + the chat log's own natural size — otherwise
+     that space is just blank flex-gap below the chat, not inside it. */
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
 }
 .drilldown-side > .chat-wrap .chat-log {
+  flex: 1 1 auto;
   min-height: 240px;
-  max-height: 560px;
+  /* Cancels the base rule's 340px cap (still in effect for the agent
+     console's own embedded chat, which isn't in a stretched column) — the
+     row's own `min-height` is the real ceiling now. */
+  max-height: none;
 }
 @media (max-width: 860px) {
   .drilldown-row {
@@ -571,10 +607,10 @@ button.act:disabled {
 
 /* ---- Fleets screen (ADR #19: the "declare" side; ADR #83: promoted from a
    sidebar panel to the console's top-level screen — Slice 1) ---- */
-.config-wrap {
-  margin: 0 0 16px;
-}
 .config {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
   border: 1px solid var(--border);
   border-radius: 6px;
   background: var(--panel);
@@ -798,7 +834,12 @@ button.act:disabled {
   font-size: 13px;
 }
 .cfg-editor-mount .cm-editor {
-  max-height: 320px;
+  /* Fills down to the window's bottom edge instead of capping at a fixed
+     height with blank space below it — `--cfg-editor-h` is measured in
+     main.ts (`syncEditorHeight`), same live-measurement pattern as
+     `--topbar-h`, since the window is resizable and the space above the
+     editor (Fleets row height, etc.) isn't constant. */
+  height: var(--cfg-editor-h, 320px);
 }
 .cfg-editor-error {
   margin-top: 6px;
@@ -1272,7 +1313,9 @@ button.act:disabled {
 }
 
 /* ---- Deploy action panel (ADR #83 slice 5: `[+ New fleet]` / `[+ Add
-   instance]`) — replaces .drilldown-row while open. ---------------------- */
+   instance]`) — replaces #config/#fleet-detail in `.drilldown-main` while
+   open (deploy.ts), so it inherits the fill-the-column treatment from
+   `.drilldown-main > *` above for free. ---------------------- */
 .deploy-wrap {
   margin: 0 0 12px;
   padding: 14px;