model-compare-opencode-plugin 0.1.1 → 0.1.3

package/README.md

@@ -82,7 +82,7 @@ Commands:
 | `return` | select the highlighted row (picks dialog: switch to that priority) |
 | `esc` | close the dialog |
 
-Both dialogs need an open session — with none, a toast explains and nothing else happens. The TUI has no `/use-best` keybinding: the slash command already covers switching.
+Both dialogs open anywhere — including the opening screen, where no session exists yet. There, picking a row (a priority in the picks dialog, a model in the report) creates a new session already bound to that model and opens it; merely opening a dialog never creates a session. With a session open, a pick switches that session as before. The TUI has no `/use-best` keybinding: the slash command already covers switching.
 
 Status: the footer shows `MC: balanced → <pick>` (balanced only — `disabled`/`unavailable`/`(fallback)` as applicable; all three priorities live in the picks dialog). Toasts announce `/use-best` outcomes and pick changes — never for the first observation after load. Headless, all feedback is synthetic transcript messages at the next turn.
 

package/dist/tui.js

@@ -3,6 +3,7 @@
 // header for why the published package ships precompiled JSX.
 import { createComponent as _$createComponent } from "@opentui/solid";
 import { memo as _$memo } from "@opentui/solid";
+import { use as _$use } from "@opentui/solid";
 import { createTextNode as _$createTextNode } from "@opentui/solid";
 import { insertNode as _$insertNode } from "@opentui/solid";
 import { setProp as _$setProp } from "@opentui/solid";
@@ -19,12 +20,17 @@ import { createElement as _$createElement } from "@opentui/solid";
 //     names current, so the registry IS the state; no messaging involved);
 //   * the picks dialog (alt+m): a select over the three priorities —
 //     choosing one switches the session to it, with the same decision logic
-//     as the server command;
+//     as the server command; with no session open (the opening screen)
+//     choosing one CREATES a session already bound to that alias and opens
+//     it, so the shortcuts work from the first keystroke (merely OPENING a
+//     dialog never creates a session);
 //   * the report dialog (alt+shift+m): the /model-compare command emits its
 //     structured report as an RPC event, and this half opens it as a
 //     selectable dialog (selecting a ranked model switches straight to it) —
 //     one command serves both worlds, so no TUI duplicate of the server
-//     command exists;
+//     command exists; with no session open the report is fetched directly
+//     over the plugin's RPC (no session command to post it to) and a pick
+//     creates a session bound to that model;
 //   * a toast when a pick flips (at most one per changed priority per
 //     reload, and never for the first observation after load).
 //
@@ -52,6 +58,7 @@ import { TextAttributes, RGBA } from "@opentui/core";
 import { createEffect, createMemo, createRoot, createSignal } from "solid-js";
 import { ALIAS_PROVIDER, PRIORITIES, alignedPriority, aliasId, pickOf, pickFromName, readAliasViews, statusLine, useBestDecision, useBestNotice, useBestRefusal } from "../src/opencode/usebest";
 import { sanitizeCatalogText } from "../src/opencode/commands";
+import { ModelCompare } from "../src/rpc";
 const TOAST_MS = 6_000;
 const RESYNC_MS = 30_000;
 
@@ -71,6 +78,11 @@ const REPORT_EVENT = "rpc.model-compare.report";
 // and arming a new dialog closes whatever is still armed first.
 let dialogGeneration = 0;
 let armedClose = null;
+// The armed dialog's reveal hook (see showListDialog): its own
+// revealOnFrame, exposed module-scope so the setup-scope resize handler can
+// re-reveal the cursor when a resize re-caps the row area under it. Set
+// when a dialog is armed, cleared by its close() alongside armedClose.
+let armedReveal = null;
 function StatusLine(props) {
   return (() => {
     var _el$ = _$createElement("text");
@@ -79,6 +91,73 @@ function StatusLine(props) {
     return _el$;
   })();
 }
+
+// One list-dialog row (see showListDialog).
+
+// The rows' ONE height rule, shared by three places that must agree or the
+// scroll lands on the wrong line: the rows' JSX (the heading's blank line
+// above), rowOffset's arithmetic and the row-area cap's content measure. A
+// header-line row renders as its text ONLY — the JSX checks headerLine
+// before heading — so a row carrying both fields counts the way it renders,
+// never as both. Every other row is one line except the second and later
+// headings, which carry one blank line above (the palette's heading
+// recipe).
+function isHeadingRow(row) {
+  return row.headerLine === undefined && row.heading !== undefined;
+}
+function rowLines(row, headingsSoFar) {
+  return isHeadingRow(row) && headingsSoFar > 0 ? 2 : 1;
+}
+// The rows' total LINE count (not their row count — heading blanks are
+// content too); `upto` measures the first rows alone, which is how rowOffset
+// gets a row's y within the content.
+function rowsHeight(rows, upto = rows.length) {
+  let y = 0;
+  let headings = 0;
+  for (let k = 0; k < upto; k++) {
+    const row = rows[k];
+    y += rowLines(row, headings);
+    if (isHeadingRow(row)) headings += 1;
+  }
+  return y;
+}
+
+// The list dialogs' row-area cap, the host command palette's own formula:
+// min(content LINES, floor(terminal height / 2) - 6) — the first argument is
+// rowsHeight(rows), never the rows' count, or the cap clips tail rows even
+// on a roomy terminal (with the scrollbar hidden). The host's dialog layer
+// caps nothing itself and anchors UNcentered dialogs a quarter viewport
+// down — without this cap an uncapped list overflows the viewport at large
+// font sizes (the report dialog did exactly that). Exported for the unit
+// rig.
+export function cappedRowsHeight(contentLines, terminalHeight) {
+  return Math.min(contentLines, Math.max(1, Math.floor(terminalHeight / 2) - 6));
+}
+
+// One report entry's defensive normalization, shared by the two paths that
+// carry report data across a trust boundary (the /model-compare command's
+// event and the TUI's direct RPC call): an entry missing any identity field
+// is dropped, every other field falls back to its neutral value.
+function toReportEntries(raw) {
+  if (!Array.isArray(raw)) return [];
+  return raw.flatMap(item => {
+    const entry = item;
+    if (typeof entry?.id !== "string" || typeof entry?.value !== "string" || typeof entry?.priority !== "string") return [];
+    return [{
+      priority: entry.priority,
+      rank: typeof entry.rank === "number" ? entry.rank : null,
+      // The F-20 split (see ReportEntry): `id` sanitized for display,
+      // `value` the raw catalog id for switching.
+      id: entry.id,
+      value: entry.value,
+      score: typeof entry.score === "string" ? entry.score : "-",
+      quality: typeof entry.quality === "string" ? entry.quality : "-",
+      price: typeof entry.price === "string" ? entry.price : "-",
+      current: entry.current === true,
+      fromFallback: entry.fromFallback === true
+    }];
+  });
+}
 export default Plugin.define({
   id: "model-compare-tui",
   async setup(context) {
@@ -90,6 +169,28 @@ export default Plugin.define({
       variant,
       duration: TOAST_MS
     });
+
+    // The terminal's size, reactive: the renderer emits "resize" carrying the
+    // fresh dimensions, and the dialogs' row-area caps must track font-size
+    // and window changes the way the host's own dialogs do (the palette caps
+    // its list at a fraction of the viewport; the dialog layer gives plugin
+    // dialogs no cap of their own). Detached in the returned cleanup.
+    const [terminalSize, setTerminalSize] = createSignal({
+      width: context.renderer.width,
+      height: context.renderer.height
+    });
+    const onRendererResize = (width, height) => {
+      setTerminalSize({
+        width,
+        height
+      });
+      // A resize re-caps the armed dialog's row area under its cursor: the
+      // reveal re-runs on the next frame (see showListDialog's
+      // revealOnFrame) or a shrunken viewport can leave the cursor below
+      // the fold until the next key move.
+      armedReveal?.(false);
+    };
+    context.renderer.on("resize", onRendererResize);
     let disposeRoot = () => {};
     // The three slot disposers (the two footers and the app slot below):
     // slots claimed but never released survive the plugin's unload and keep
@@ -155,21 +256,29 @@ export default Plugin.define({
       return "balanced";
     }
 
-    // Switch the current session to one of the plugin's aliases — the shared
-    // decision chain behind /use-best, the palette command and the picks
-    // dialog's selection.
+    // Switch to one of the plugin's aliases — the shared decision chain
+    // behind /use-best, the palette command and the picks dialog's
+    // selection. With a session open it switches THAT session; with none
+    // (the opening screen) it creates a session already bound to the alias
+    // and opens it — the pick is the session's starting model. A disabled
+    // alias refuses before anything is created.
     async function switchToPriority(priority) {
+      const views = aliases();
+      if (!views.some(view => view.priority === priority && view.enabled)) {
+        notify(useBestRefusal(priority), "error");
+        return;
+      }
+      const view = views.find(item => item.priority === priority);
+      const notice = useBestNotice(priority, view?.modelID ?? pickFromName(view?.name ?? ""));
       const sessionID = currentSessionID();
       if (sessionID === null) {
-        notify("Open a session first", "error");
+        await createSessionOnModel({
+          providerID: ALIAS_PROVIDER,
+          id: aliasId(priority)
+        }, notice);
         return;
       }
       try {
-        const views = aliases();
-        if (!views.some(view => view.priority === priority && view.enabled)) {
-          notify(useBestRefusal(priority), "error");
-          return;
-        }
         await context.client.session.switchModel({
           sessionID,
           model: {
@@ -177,8 +286,7 @@ export default Plugin.define({
             id: aliasId(priority)
           }
         });
-        const view = views.find(item => item.priority === priority);
-        notify(useBestNotice(priority, view?.modelID ?? pickFromName(view?.name ?? "")));
+        notify(notice);
       } catch (error) {
         notify(`use-best failed: ${error instanceof Error ? error.message : String(error)}`, "error");
       }
@@ -203,6 +311,27 @@ export default Plugin.define({
       }
     }
 
+    // No session open (the opening screen's pick paths): create one already
+    // bound to the given model and navigate into it. Returns whether the
+    // session came up; a failure is toasted and nothing else happens — no
+    // half-open session to clean up.
+    async function createSessionOnModel(model, success) {
+      try {
+        const session = await context.client.session.create({
+          model
+        });
+        context.ui.router.navigate({
+          type: "session",
+          sessionID: session.id
+        });
+        notify(success);
+        return true;
+      } catch (error) {
+        notify(`could not open a session: ${error instanceof Error ? error.message : String(error)}`, "error");
+        return false;
+      }
+    }
+
     // The custom list dialog. The host's `dialog.select` (SDK 2.0.16
     // runtime) renders one GROUPED box per category with one cursor each —
     // its search flattening (verified against main) does not exist in this
@@ -250,14 +379,72 @@ export default Plugin.define({
       // never updated — the cursor sat on row 1 however many times the
       // keymap moved the internal index; observed live, 2026-10-11).
       const [cursor, setCursor] = createSignal(initial);
+      // The scrollbox that carries the rows (see the JSX below); its ref
+      // lands when the host renders the dialog. The cursor's row is kept in
+      // view with the native lists' look-ahead: the content scrolls as soon
+      // as the cursor comes within three lines of an edge, and the cursor
+      // only touches an edge line when the content ends (the scroll clamps
+      // at its maximum).
+      //
+      // The row offsets are pure ARITHMETIC, not renderable geometry —
+      // rowsHeight (module scope) is the ONE row-height rule the rows' JSX
+      // and the row-area cap share. Reading the host's .y was tried and is
+      // unreliable across the plugin boundary — it reported the scrollbox's
+      // own position for every row — while scrollTop/scrollHeight/height
+      // behave as plain numbers.
+      let listScroll;
+      let pendingReveal;
+      const rowOffset = index => rowsHeight(rows, index);
+      const reveal = center => {
+        const box = listScroll;
+        if (box === undefined) return;
+        const top = rowOffset(rows.indexOf(selectable[cursor()]));
+        const max = Math.max(0, box.scrollHeight - box.height);
+        // The look-ahead band, clamped to the window: at box.height <= 3 the
+        // three-line margin degenerates to plain ensure-visible (the row
+        // lands ON a window line instead of the overscroll an unclamped
+        // `box.height - 4` produced once it went negative — cap values of
+        // 1-3 are exactly what large font sizes reach).
+        const band = Math.min(3, Math.max(0, box.height - 1));
+        // Keep the row on-screen whatever the branch: the row's line must
+        // stay within [scrollTop, scrollTop + box.height - 1].
+        const visible = target => Math.min(top, Math.max(top - box.height + 1, target));
+        let target = box.scrollTop;
+        if (center) target = top - Math.floor(box.height / 2);else if (top - box.scrollTop > box.height - 1 - band) target = visible(top - (box.height - 1 - band));else if (top - box.scrollTop < band) target = visible(top - band);
+        box.scrollTo(Math.max(0, Math.min(target, max)));
+      };
+      // Positions exist only after a layout frame, so the reveal defers to
+      // the next rendered frame (the palette's own once(FRAME) +
+      // requestRender() pattern) rather than racing the renderer inside the
+      // key handler.
+      const revealOnFrame = center => {
+        if (pendingReveal !== undefined) context.renderer.off("frame", pendingReveal);
+        const run = () => {
+          pendingReveal = undefined;
+          if (!alive) return;
+          reveal(center);
+        };
+        pendingReveal = run;
+        context.renderer.once("frame", run);
+        context.renderer.requestRender();
+      };
       const close = () => {
         if (!alive) return;
         alive = false;
+        // A pending frame reveal is THIS dialog's alone: cancel it here or
+        // the once("frame") listener (and its closure over the rows)
+        // outlives the dialog — it self-guarded on `alive`, but leaked until
+        // the next frame.
+        if (pendingReveal !== undefined) {
+          context.renderer.off("frame", pendingReveal);
+          pendingReveal = undefined;
+        }
         // A newer dialog was armed since this one: its own close owns the
-        // shared state (the keymap layer, the host dialog) now — clearing
-        // here would kill ITS keyboard and surface.
+        // shared state (the keymap layer, the host dialog, the reveal hook)
+        // now — clearing here would kill ITS keyboard and surface.
         if (generation !== dialogGeneration) return;
         armedClose = null;
+        armedReveal = null;
         setListKeys(null);
         context.ui.dialog.clear();
       };
@@ -266,6 +453,10 @@ export default Plugin.define({
       // first is the last (the command palette's behavior).
       const move = delta => {
         setCursor((cursor() + delta + selectable.length) % selectable.length);
+        // Frame-deferred like every reveal — and it CANCELS a pending one,
+        // so the preselected row's open-time centering can never land after
+        // the user has already moved the cursor off it.
+        revealOnFrame(false);
       };
       const pick = () => {
         const row = selectable[cursor()];
@@ -277,6 +468,7 @@ export default Plugin.define({
       // slot below); it registers on the next reactive run. This dialog is
       // now the armed one (the lifecycle token above).
       armedClose = close;
+      armedReveal = revealOnFrame;
       setListKeys({
         move,
         pick
@@ -289,7 +481,7 @@ export default Plugin.define({
           _el$3 = _$createElement("box"),
           _el$4 = _$createElement("text"),
           _el$5 = _$createElement("text"),
-          _el$7 = _$createElement("box"),
+          _el$7 = _$createElement("scrollbox"),
           _el$8 = _$createElement("box"),
           _el$9 = _$createElement("text");
         _$insertNode(_el$2, _el$3);
@@ -309,9 +501,18 @@ export default Plugin.define({
         _$insertNode(_el$5, _$createTextNode(`esc`));
         _$setProp(_el$5, "fg", muted);
         _$setProp(_el$5, "onMouseUp", () => close());
+        _$use(element => {
+          listScroll = element;
+          // The report's preselected row (the current pick) opens
+          // centered in the scrollbox: scheduled from the ref, so the
+          // frame it waits for is the one that lays these rows out.
+          if (initial > 0) revealOnFrame(true);
+        }, _el$7);
         _$setProp(_el$7, "paddingLeft", 1);
         _$setProp(_el$7, "paddingRight", 1);
-        _$setProp(_el$7, "flexDirection", "column");
+        _$setProp(_el$7, "scrollbarOptions", {
+          visible: false
+        });
         _$insert(_el$7, () => {
           let headings = 0;
           return rows.map(row => {
@@ -327,14 +528,17 @@ export default Plugin.define({
             }
             if (row.heading !== undefined) {
               // The palette's heading recipe: accent hue, bold, one
-              // blank line above every heading but the first. Flush
-              // with the title: 1 (list inset) + 3 = 4.
+              // blank line above every heading but the first — the
+              // blank is rowLines' call (the ONE row-height rule the
+              // offsets and the cap share), not a second copy of its
+              // condition. Flush with the title: 1 (list inset) + 3 = 4.
+              const paddingTop = rowLines(row, headings) - 1;
               headings += 1;
               return (() => {
                 var _el$10 = _$createElement("box"),
                   _el$11 = _$createElement("text");
                 _$insertNode(_el$10, _el$11);
-                _$setProp(_el$10, "paddingTop", headings > 1 ? 1 : 0);
+                _$setProp(_el$10, "paddingTop", paddingTop);
                 _$setProp(_el$10, "paddingLeft", 3);
                 _$setProp(_el$11, "fg", accent);
                 _$insert(_el$11, () => row.heading);
@@ -394,16 +598,34 @@ export default Plugin.define({
         _$setProp(_el$8, "paddingLeft", 4);
         _$insertNode(_el$9, _$createTextNode(`Details: https://canonical.github.io/model-compare`));
         _$setProp(_el$9, "fg", muted);
-        _$effect(_$p => _$setProp(_el$4, "attributes", TextAttributes.BOLD, _$p));
+        _$effect(_p$ => {
+          var _v$ = TextAttributes.BOLD,
+            _v$2 = cappedRowsHeight(rowsHeight(rows), terminalSize().height);
+          _v$ !== _p$.e && (_p$.e = _$setProp(_el$4, "attributes", _v$, _p$.e));
+          _v$2 !== _p$.t && (_p$.t = _$setProp(_el$7, "maxHeight", _v$2, _p$.t));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
         return _el$2;
       })(), close);
+      // The palette's presentation: vertically centered at the medium width.
+      // The size/centered state persists across dialogs (the host's own set
+      // it on every open), so the explicit set also clears a stale xlarge a
+      // host dialog may have left behind.
+      context.ui.dialog.set({
+        size: "medium",
+        centered: true
+      });
     }
 
     // The picks dialog: the three priorities, one cursor, palette styling.
     // A snapshot at open time; unavailable priorities are dimmed — the
     // cursor still reaches them, and choosing one is refused with a toast
     // (switchToPriority's guard). Choosing an available priority switches
-    // the session to it.
+    // the session to it — or, with no session open, creates one bound to
+    // it (the opening screen's path; opening the dialog never does).
     function showPicksDialog() {
       const views = aliases();
       const rows = PRIORITIES.map(priority => {
@@ -479,7 +701,18 @@ export default Plugin.define({
           });
         }
       }
-      showListDialog(`Model Compare — top 5 (data age: ${data.age ?? "unknown"})`, rows, id => void switchToModel(data.sessionID, id));
+      showListDialog(`Model Compare — top 5 (data age: ${data.age ?? "unknown"})`, rows, id => {
+        if (data.sessionID !== null) {
+          void switchToModel(data.sessionID, id);
+          return;
+        }
+        // The opening screen: the pick becomes a NEW session's model —
+        // the same concrete model the in-session path switches to.
+        void createSessionOnModel({
+          providerID: ALIAS_PROVIDER,
+          id
+        }, `switched to openrouter/${sanitizeCatalogText(id)}`);
+      });
     }
 
     // The report dialog rides the /model-compare command's RPC event: ONE
@@ -496,23 +729,7 @@ export default Plugin.define({
       const data = event.data;
       if (typeof data?.sessionID !== "string" || data.sessionID !== currentSessionID()) return;
       if (!Array.isArray(data.entries)) return;
-      const entries = data.entries.flatMap(raw => {
-        const entry = raw;
-        if (typeof entry?.id !== "string" || typeof entry?.value !== "string" || typeof entry?.priority !== "string") return [];
-        return [{
-          priority: entry.priority,
-          rank: typeof entry.rank === "number" ? entry.rank : null,
-          // The F-20 split (see ReportEntry): `id` sanitized for display,
-          // `value` the raw catalog id for switching.
-          id: entry.id,
-          value: entry.value,
-          score: typeof entry.score === "string" ? entry.score : "-",
-          quality: typeof entry.quality === "string" ? entry.quality : "-",
-          price: typeof entry.price === "string" ? entry.price : "-",
-          current: entry.current === true,
-          fromFallback: entry.fromFallback === true
-        }];
-      });
+      const entries = toReportEntries(data.entries);
       const eventSessionID = data.sessionID;
       // Ownerless callback: park the report on the signal — the app slot's
       // in-tree effect opens the dialog (see pendingReport above).
@@ -599,29 +816,27 @@ export default Plugin.define({
 
     // The picks dialog's command. No slash: /use-best already covers the
     // switching surface (the server command is slash-routable; the TUI's
-    // duplicate of it was removed for exactly that reason).
+    // duplicate of it was removed for exactly that reason). The dialog opens
+    // everywhere — with no session it shows the current picks, and only
+    // picking one creates a session bound to it (switchToPriority).
     const picksCommand = {
       id: "model-compare.picks",
       title: "Model-compare top picks",
       group: "Model Compare",
       bind: "alt+m",
       palette: true,
-      run: () => {
-        if (currentSessionID() === null) {
-          notify("no session yet — submit any prompt to create one; picking a priority switches that session", "error");
-          return;
-        }
-        showPicksDialog();
-      }
+      run: () => showPicksDialog()
     };
 
-    // The report command: posts the server's /model-compare command, whose
-    // RPC event opens the selectable report dialog here (and the transcript
-    // keeps the notice). A session is required: the dialog's whole point is
-    // switching a session's model, and with no session open there is
-    // nothing to switch — the pinned runtime (2.0.16) exposes no composer-
-    // model setter to plugins, so there is nothing to change either. The
-    // refusal says why and how.
+    // The report command: with a session open it posts the server's
+    // /model-compare command, whose RPC event opens the selectable report
+    // dialog here (and the transcript keeps the notice). With no session
+    // (the opening screen) there is nothing to post to, so the report is
+    // fetched straight from the plugin's report RPC — same builder, same
+    // entries — and picking a model creates a session bound to it (there is
+    // no composer-model setter to change instead; verified against the
+    // pinned runtime). The refusal-free opening also keeps the footer's
+    // status line honest: the shortcuts always DO something.
     const reportCommand = {
       id: "model-compare.report",
       title: "Model-compare report",
@@ -630,15 +845,29 @@ export default Plugin.define({
       palette: true,
       run: async () => {
         const sessionID = currentSessionID();
-        if (sessionID === null) {
-          notify("no session yet — submit any prompt to create one; a report pick switches that session", "error");
+        if (sessionID !== null) {
+          try {
+            await context.client.session.command({
+              sessionID,
+              name: "model-compare",
+              text: ""
+            });
+          } catch (error) {
+            notify(`report failed: ${error instanceof Error ? error.message : String(error)}`, "error");
+          }
           return;
         }
         try {
-          await context.client.session.command({
-            sessionID,
-            name: "model-compare",
-            text: ""
+          const report = await context.client.rpc(ModelCompare).report({}, here === undefined ? undefined : {
+            location: {
+              directory: here
+            }
+          });
+          const data = report;
+          showReportDialog({
+            sessionID: null,
+            age: typeof data?.age === "string" ? data.age : null,
+            entries: toReportEntries(data?.entries)
           });
         } catch (error) {
           notify(`report failed: ${error instanceof Error ? error.message : String(error)}`, "error");
@@ -730,7 +959,13 @@ export default Plugin.define({
       }
     });
     return () => {
+      // Disarm whatever dialog is still armed FIRST: its pending frame
+      // reveal and modal keyboard must not outlive the plugin (the
+      // module-scope armedClose/armedReveal survive setup's cleanup
+      // otherwise).
+      armedClose?.();
       if (resyncTimer !== undefined) clearInterval(resyncTimer);
+      context.renderer.off("resize", onRendererResize);
       offReportEvent();
       disposeRoot();
       disposeAppSlot();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "model-compare-opencode-plugin",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "OpenCode plugin that switches OpenRouter model aliases to the best value-for-money pick from canonical/model-compare's ranking (balanced, price, quality).",
   "keywords": [
     "opencode",

package/src/tui.tsx

@@ -8,12 +8,17 @@
 //     names current, so the registry IS the state; no messaging involved);
 //   * the picks dialog (alt+m): a select over the three priorities —
 //     choosing one switches the session to it, with the same decision logic
-//     as the server command;
+//     as the server command; with no session open (the opening screen)
+//     choosing one CREATES a session already bound to that alias and opens
+//     it, so the shortcuts work from the first keystroke (merely OPENING a
+//     dialog never creates a session);
 //   * the report dialog (alt+shift+m): the /model-compare command emits its
 //     structured report as an RPC event, and this half opens it as a
 //     selectable dialog (selecting a ranked model switches straight to it) —
 //     one command serves both worlds, so no TUI duplicate of the server
-//     command exists;
+//     command exists; with no session open the report is fetched directly
+//     over the plugin's RPC (no session command to post it to) and a pick
+//     creates a session bound to that model;
 //   * a toast when a pick flips (at most one per changed priority per
 //     reload, and never for the first observation after load).
 //
@@ -39,6 +44,7 @@ import { TextAttributes, RGBA } from "@opentui/core"
 // the package's solid-js JSX augmentation without a runtime import — the TUI
 // host already provides the runtime side.
 import type { JSX } from "@opentui/solid"
+import type { ScrollBoxRenderable } from "@opentui/core"
 import {
   createEffect,
   createMemo,
@@ -63,6 +69,7 @@ import {
 } from "./opencode/usebest"
 import type { ReportEntry } from "./opencode/commands"
 import { sanitizeCatalogText } from "./opencode/commands"
+import { ModelCompare } from "./rpc"
 
 const TOAST_MS = 6_000
 const RESYNC_MS = 30_000
@@ -83,11 +90,105 @@ const REPORT_EVENT = "rpc.model-compare.report"
 // and arming a new dialog closes whatever is still armed first.
 let dialogGeneration = 0
 let armedClose: (() => void) | null = null
+// The armed dialog's reveal hook (see showListDialog): its own
+// revealOnFrame, exposed module-scope so the setup-scope resize handler can
+// re-reveal the cursor when a resize re-caps the row area under it. Set
+// when a dialog is armed, cleared by its close() alongside armedClose.
+let armedReveal: ((center: boolean) => void) | null = null
 
 function StatusLine(props: { line: () => string; fg?: string }) {
   return <text fg={props.fg}>{props.line()}</text>
 }
 
+// One list-dialog row (see showListDialog).
+type ListRow = {
+  // Section headings render in the palette's category color, and are
+  // skipped by the cursor.
+  heading?: string
+  // A pre-built column-header line (the report table): dim, skipped by
+  // the cursor, and never gets a blank line above it.
+  headerLine?: string
+  label: string
+  // Trailing dim right-justified columns (the report table); when
+  // present, label renders in its own span so the two tones can differ.
+  columns?: string
+  selected?: string
+  value?: string
+  dim?: boolean
+}
+
+// The rows' ONE height rule, shared by three places that must agree or the
+// scroll lands on the wrong line: the rows' JSX (the heading's blank line
+// above), rowOffset's arithmetic and the row-area cap's content measure. A
+// header-line row renders as its text ONLY — the JSX checks headerLine
+// before heading — so a row carrying both fields counts the way it renders,
+// never as both. Every other row is one line except the second and later
+// headings, which carry one blank line above (the palette's heading
+// recipe).
+function isHeadingRow(row: ListRow): boolean {
+  return row.headerLine === undefined && row.heading !== undefined
+}
+function rowLines(row: ListRow, headingsSoFar: number): number {
+  return isHeadingRow(row) && headingsSoFar > 0 ? 2 : 1
+}
+// The rows' total LINE count (not their row count — heading blanks are
+// content too); `upto` measures the first rows alone, which is how rowOffset
+// gets a row's y within the content.
+function rowsHeight(rows: readonly ListRow[], upto: number = rows.length): number {
+  let y = 0
+  let headings = 0
+  for (let k = 0; k < upto; k++) {
+    const row = rows[k]!
+    y += rowLines(row, headings)
+    if (isHeadingRow(row)) headings += 1
+  }
+  return y
+}
+
+// The list dialogs' row-area cap, the host command palette's own formula:
+// min(content LINES, floor(terminal height / 2) - 6) — the first argument is
+// rowsHeight(rows), never the rows' count, or the cap clips tail rows even
+// on a roomy terminal (with the scrollbar hidden). The host's dialog layer
+// caps nothing itself and anchors UNcentered dialogs a quarter viewport
+// down — without this cap an uncapped list overflows the viewport at large
+// font sizes (the report dialog did exactly that). Exported for the unit
+// rig.
+export function cappedRowsHeight(contentLines: number, terminalHeight: number): number {
+  return Math.min(contentLines, Math.max(1, Math.floor(terminalHeight / 2) - 6))
+}
+
+// One report entry's defensive normalization, shared by the two paths that
+// carry report data across a trust boundary (the /model-compare command's
+// event and the TUI's direct RPC call): an entry missing any identity field
+// is dropped, every other field falls back to its neutral value.
+function toReportEntries(raw: unknown): ReportEntry[] {
+  if (!Array.isArray(raw)) return []
+  return raw.flatMap((item): ReportEntry[] => {
+    const entry = item as Partial<ReportEntry>
+    if (
+      typeof entry?.id !== "string" ||
+      typeof entry?.value !== "string" ||
+      typeof entry?.priority !== "string"
+    )
+      return []
+    return [
+      {
+        priority: entry.priority as Priority,
+        rank: typeof entry.rank === "number" ? entry.rank : null,
+        // The F-20 split (see ReportEntry): `id` sanitized for display,
+        // `value` the raw catalog id for switching.
+        id: entry.id,
+        value: entry.value,
+        score: typeof entry.score === "string" ? entry.score : "-",
+        quality: typeof entry.quality === "string" ? entry.quality : "-",
+        price: typeof entry.price === "string" ? entry.price : "-",
+        current: entry.current === true,
+        fromFallback: entry.fromFallback === true,
+      },
+    ]
+  })
+}
+
 export default Plugin.define({
   id: "model-compare-tui",
   async setup(context) {
@@ -97,6 +198,25 @@ export default Plugin.define({
     const notify = (message: string, variant: "success" | "error" = "success") =>
       context.ui.toast.show({ title: "model-compare", message, variant, duration: TOAST_MS })
 
+    // The terminal's size, reactive: the renderer emits "resize" carrying the
+    // fresh dimensions, and the dialogs' row-area caps must track font-size
+    // and window changes the way the host's own dialogs do (the palette caps
+    // its list at a fraction of the viewport; the dialog layer gives plugin
+    // dialogs no cap of their own). Detached in the returned cleanup.
+    const [terminalSize, setTerminalSize] = createSignal({
+      width: context.renderer.width,
+      height: context.renderer.height,
+    })
+    const onRendererResize = (width: number, height: number) => {
+      setTerminalSize({ width, height })
+      // A resize re-caps the armed dialog's row area under its cursor: the
+      // reveal re-runs on the next frame (see showListDialog's
+      // revealOnFrame) or a shrunken viewport can leave the cursor below
+      // the fold until the next key move.
+      armedReveal?.(false)
+    }
+    context.renderer.on("resize", onRendererResize)
+
     let disposeRoot = () => {}
     // The three slot disposers (the two footers and the app slot below):
     // slots claimed but never released survive the plugin's unload and keep
@@ -177,27 +297,34 @@ export default Plugin.define({
       return "balanced"
     }
 
-    // Switch the current session to one of the plugin's aliases — the shared
-    // decision chain behind /use-best, the palette command and the picks
-    // dialog's selection.
+    // Switch to one of the plugin's aliases — the shared decision chain
+    // behind /use-best, the palette command and the picks dialog's
+    // selection. With a session open it switches THAT session; with none
+    // (the opening screen) it creates a session already bound to the alias
+    // and opens it — the pick is the session's starting model. A disabled
+    // alias refuses before anything is created.
     async function switchToPriority(priority: Priority): Promise<void> {
+      const views = aliases()
+      if (!views.some((view) => view.priority === priority && view.enabled)) {
+        notify(useBestRefusal(priority), "error")
+        return
+      }
+      const view = views.find((item) => item.priority === priority)
+      const notice = useBestNotice(priority, view?.modelID ?? pickFromName(view?.name ?? ""))
       const sessionID = currentSessionID()
       if (sessionID === null) {
-        notify("Open a session first", "error")
+        await createSessionOnModel(
+          { providerID: ALIAS_PROVIDER, id: aliasId(priority) },
+          notice,
+        )
         return
       }
       try {
-        const views = aliases()
-        if (!views.some((view) => view.priority === priority && view.enabled)) {
-          notify(useBestRefusal(priority), "error")
-          return
-        }
         await context.client.session.switchModel({
           sessionID,
           model: { providerID: ALIAS_PROVIDER, id: aliasId(priority) },
         })
-        const view = views.find((item) => item.priority === priority)
-        notify(useBestNotice(priority, view?.modelID ?? pickFromName(view?.name ?? "")))
+        notify(notice)
       } catch (error) {
         notify(`use-best failed: ${error instanceof Error ? error.message : String(error)}`, "error")
       }
@@ -219,6 +346,28 @@ export default Plugin.define({
       }
     }
 
+    // No session open (the opening screen's pick paths): create one already
+    // bound to the given model and navigate into it. Returns whether the
+    // session came up; a failure is toasted and nothing else happens — no
+    // half-open session to clean up.
+    async function createSessionOnModel(
+      model: { providerID: string; id: string },
+      success: string,
+    ): Promise<boolean> {
+      try {
+        const session = await context.client.session.create({ model })
+        context.ui.router.navigate({ type: "session", sessionID: session.id })
+        notify(success)
+        return true
+      } catch (error) {
+        notify(
+          `could not open a session: ${error instanceof Error ? error.message : String(error)}`,
+          "error",
+        )
+        return false
+      }
+    }
+
     // The custom list dialog. The host's `dialog.select` (SDK 2.0.16
     // runtime) renders one GROUPED box per category with one cursor each —
     // its search flattening (verified against main) does not exist in this
@@ -229,21 +378,6 @@ export default Plugin.define({
     // render closure (context-less — "Keymap.Provider is missing", the same
     // trap as setup scope), so the app slot's IN-TREE effect registers it
     // while `listKeys` is armed, and the host unmounts it with the dialog.
-    type ListRow = {
-      // Section headings render in the palette's category color, and are
-      // skipped by the cursor.
-      heading?: string
-      // A pre-built column-header line (the report table): dim, skipped by
-      // the cursor, and never gets a blank line above it.
-      headerLine?: string
-      label: string
-      // Trailing dim right-justified columns (the report table); when
-      // present, label renders in its own span so the two tones can differ.
-      columns?: string
-      selected?: string
-      value?: string
-      dim?: boolean
-    }
 
     // The keymap layer hand-off (see showListDialog): set while a list
     // dialog is open, cleared on close; the app slot's in-tree effect maps
@@ -289,14 +423,75 @@ export default Plugin.define({
       // never updated — the cursor sat on row 1 however many times the
       // keymap moved the internal index; observed live, 2026-10-11).
       const [cursor, setCursor] = createSignal(initial)
+      // The scrollbox that carries the rows (see the JSX below); its ref
+      // lands when the host renders the dialog. The cursor's row is kept in
+      // view with the native lists' look-ahead: the content scrolls as soon
+      // as the cursor comes within three lines of an edge, and the cursor
+      // only touches an edge line when the content ends (the scroll clamps
+      // at its maximum).
+      //
+      // The row offsets are pure ARITHMETIC, not renderable geometry —
+      // rowsHeight (module scope) is the ONE row-height rule the rows' JSX
+      // and the row-area cap share. Reading the host's .y was tried and is
+      // unreliable across the plugin boundary — it reported the scrollbox's
+      // own position for every row — while scrollTop/scrollHeight/height
+      // behave as plain numbers.
+      let listScroll: ScrollBoxRenderable | undefined
+      let pendingReveal: (() => void) | undefined
+      const rowOffset = (index: number): number => rowsHeight(rows, index)
+      const reveal = (center: boolean) => {
+        const box = listScroll
+        if (box === undefined) return
+        const top = rowOffset(rows.indexOf(selectable[cursor()]))
+        const max = Math.max(0, box.scrollHeight - box.height)
+        // The look-ahead band, clamped to the window: at box.height <= 3 the
+        // three-line margin degenerates to plain ensure-visible (the row
+        // lands ON a window line instead of the overscroll an unclamped
+        // `box.height - 4` produced once it went negative — cap values of
+        // 1-3 are exactly what large font sizes reach).
+        const band = Math.min(3, Math.max(0, box.height - 1))
+        // Keep the row on-screen whatever the branch: the row's line must
+        // stay within [scrollTop, scrollTop + box.height - 1].
+        const visible = (target: number): number =>
+          Math.min(top, Math.max(top - box.height + 1, target))
+        let target = box.scrollTop
+        if (center) target = top - Math.floor(box.height / 2)
+        else if (top - box.scrollTop > box.height - 1 - band) target = visible(top - (box.height - 1 - band))
+        else if (top - box.scrollTop < band) target = visible(top - band)
+        box.scrollTo(Math.max(0, Math.min(target, max)))
+      }
+      // Positions exist only after a layout frame, so the reveal defers to
+      // the next rendered frame (the palette's own once(FRAME) +
+      // requestRender() pattern) rather than racing the renderer inside the
+      // key handler.
+      const revealOnFrame = (center: boolean) => {
+        if (pendingReveal !== undefined) context.renderer.off("frame", pendingReveal)
+        const run = () => {
+          pendingReveal = undefined
+          if (!alive) return
+          reveal(center)
+        }
+        pendingReveal = run
+        context.renderer.once("frame", run)
+        context.renderer.requestRender()
+      }
       const close = () => {
         if (!alive) return
         alive = false
+        // A pending frame reveal is THIS dialog's alone: cancel it here or
+        // the once("frame") listener (and its closure over the rows)
+        // outlives the dialog — it self-guarded on `alive`, but leaked until
+        // the next frame.
+        if (pendingReveal !== undefined) {
+          context.renderer.off("frame", pendingReveal)
+          pendingReveal = undefined
+        }
         // A newer dialog was armed since this one: its own close owns the
-        // shared state (the keymap layer, the host dialog) now — clearing
-        // here would kill ITS keyboard and surface.
+        // shared state (the keymap layer, the host dialog, the reveal hook)
+        // now — clearing here would kill ITS keyboard and surface.
         if (generation !== dialogGeneration) return
         armedClose = null
+        armedReveal = null
         setListKeys(null)
         context.ui.dialog.clear()
       }
@@ -305,6 +500,10 @@ export default Plugin.define({
       // first is the last (the command palette's behavior).
       const move = (delta: number) => {
         setCursor((cursor() + delta + selectable.length) % selectable.length)
+        // Frame-deferred like every reveal — and it CANCELS a pending one,
+        // so the preselected row's open-time centering can never land after
+        // the user has already moved the cursor off it.
+        revealOnFrame(false)
       }
       const pick = () => {
         const row = selectable[cursor()]
@@ -316,6 +515,7 @@ export default Plugin.define({
       // slot below); it registers on the next reactive run. This dialog is
       // now the armed one (the lifecycle token above).
       armedClose = close
+      armedReveal = revealOnFrame
       setListKeys({ move, pick })
 
       context.ui.dialog.show(
@@ -332,7 +532,19 @@ export default Plugin.define({
                 esc
               </text>
             </box>
-            <box paddingLeft={1} paddingRight={1} flexDirection="column">
+            <scrollbox
+              ref={(element) => {
+                listScroll = element
+                // The report's preselected row (the current pick) opens
+                // centered in the scrollbox: scheduled from the ref, so the
+                // frame it waits for is the one that lays these rows out.
+                if (initial > 0) revealOnFrame(true)
+              }}
+              maxHeight={cappedRowsHeight(rowsHeight(rows), terminalSize().height)}
+              paddingLeft={1}
+              paddingRight={1}
+              scrollbarOptions={{ visible: false }}
+            >
               {(() => {
                 let headings = 0
                 return rows.map((row) => {
@@ -343,11 +555,14 @@ export default Plugin.define({
                   }
                   if (row.heading !== undefined) {
                     // The palette's heading recipe: accent hue, bold, one
-                    // blank line above every heading but the first. Flush
-                    // with the title: 1 (list inset) + 3 = 4.
+                    // blank line above every heading but the first — the
+                    // blank is rowLines' call (the ONE row-height rule the
+                    // offsets and the cap share), not a second copy of its
+                    // condition. Flush with the title: 1 (list inset) + 3 = 4.
+                    const paddingTop = rowLines(row, headings) - 1
                     headings += 1
                     return (
-                      <box paddingTop={headings > 1 ? 1 : 0} paddingLeft={3}>
+                      <box paddingTop={paddingTop} paddingLeft={3}>
                         <text fg={accent} attributes={TextAttributes.BOLD}>
                           {row.heading}
                         </text>
@@ -388,7 +603,7 @@ export default Plugin.define({
                   )
                 })
               })()}
-            </box>
+            </scrollbox>
             <box paddingLeft={4}>
               <text fg={muted}>Details: https://canonical.github.io/model-compare</text>
             </box>
@@ -396,13 +611,19 @@ export default Plugin.define({
         ),
         close,
       )
+      // The palette's presentation: vertically centered at the medium width.
+      // The size/centered state persists across dialogs (the host's own set
+      // it on every open), so the explicit set also clears a stale xlarge a
+      // host dialog may have left behind.
+      context.ui.dialog.set({ size: "medium", centered: true })
     }
 
     // The picks dialog: the three priorities, one cursor, palette styling.
     // A snapshot at open time; unavailable priorities are dimmed — the
     // cursor still reaches them, and choosing one is refused with a toast
     // (switchToPriority's guard). Choosing an available priority switches
-    // the session to it.
+    // the session to it — or, with no session open, creates one bound to
+    // it (the opening screen's path; opening the dialog never does).
     function showPicksDialog(): void {
       const views = aliases()
       const rows: ListRow[] = PRIORITIES.map((priority) => {
@@ -425,7 +646,10 @@ export default Plugin.define({
     // model switches straight to it. Empty entries mean the command had no
     // ranking data.
     function showReportDialog(data: {
-      sessionID: string
+      // The session the report belongs to — null when the dialog was opened
+      // with no session (the opening screen's direct-RPC path); a pick then
+      // creates a session bound to the chosen model instead of switching.
+      sessionID: string | null
       age: string | null
       entries: ReportEntry[]
     }): void {
@@ -497,7 +721,18 @@ export default Plugin.define({
       showListDialog(
         `Model Compare — top 5 (data age: ${data.age ?? "unknown"})`,
         rows,
-        (id) => void switchToModel(data.sessionID, id),
+        (id) => {
+          if (data.sessionID !== null) {
+            void switchToModel(data.sessionID, id)
+            return
+          }
+          // The opening screen: the pick becomes a NEW session's model —
+          // the same concrete model the in-session path switches to.
+          void createSessionOnModel(
+            { providerID: ALIAS_PROVIDER, id },
+            `switched to openrouter/${sanitizeCatalogText(id)}`,
+          )
+        },
       )
     }
 
@@ -522,30 +757,7 @@ export default Plugin.define({
       const data = event.data
       if (typeof data?.sessionID !== "string" || data.sessionID !== currentSessionID()) return
       if (!Array.isArray(data.entries)) return
-      const entries = data.entries.flatMap((raw): ReportEntry[] => {
-        const entry = raw as Partial<ReportEntry>
-        if (
-          typeof entry?.id !== "string" ||
-          typeof entry?.value !== "string" ||
-          typeof entry?.priority !== "string"
-        )
-          return []
-        return [
-          {
-            priority: entry.priority as Priority,
-            rank: typeof entry.rank === "number" ? entry.rank : null,
-            // The F-20 split (see ReportEntry): `id` sanitized for display,
-            // `value` the raw catalog id for switching.
-            id: entry.id,
-            value: entry.value,
-            score: typeof entry.score === "string" ? entry.score : "-",
-            quality: typeof entry.quality === "string" ? entry.quality : "-",
-            price: typeof entry.price === "string" ? entry.price : "-",
-            current: entry.current === true,
-            fromFallback: entry.fromFallback === true,
-          },
-        ]
-      })
+      const entries = toReportEntries(data.entries)
       const eventSessionID = data.sessionID
       // Ownerless callback: park the report on the signal — the app slot's
       // in-tree effect opens the dialog (see pendingReport above).
@@ -628,29 +840,27 @@ export default Plugin.define({
 
     // The picks dialog's command. No slash: /use-best already covers the
     // switching surface (the server command is slash-routable; the TUI's
-    // duplicate of it was removed for exactly that reason).
+    // duplicate of it was removed for exactly that reason). The dialog opens
+    // everywhere — with no session it shows the current picks, and only
+    // picking one creates a session bound to it (switchToPriority).
     const picksCommand: KeymapCommand = {
       id: "model-compare.picks",
       title: "Model-compare top picks",
       group: "Model Compare",
       bind: "alt+m",
       palette: true,
-      run: () => {
-        if (currentSessionID() === null) {
-          notify("no session yet — submit any prompt to create one; picking a priority switches that session", "error")
-          return
-        }
-        showPicksDialog()
-      },
+      run: () => showPicksDialog(),
     }
 
-    // The report command: posts the server's /model-compare command, whose
-    // RPC event opens the selectable report dialog here (and the transcript
-    // keeps the notice). A session is required: the dialog's whole point is
-    // switching a session's model, and with no session open there is
-    // nothing to switch — the pinned runtime (2.0.16) exposes no composer-
-    // model setter to plugins, so there is nothing to change either. The
-    // refusal says why and how.
+    // The report command: with a session open it posts the server's
+    // /model-compare command, whose RPC event opens the selectable report
+    // dialog here (and the transcript keeps the notice). With no session
+    // (the opening screen) there is nothing to post to, so the report is
+    // fetched straight from the plugin's report RPC — same builder, same
+    // entries — and picking a model creates a session bound to it (there is
+    // no composer-model setter to change instead; verified against the
+    // pinned runtime). The refusal-free opening also keeps the footer's
+    // status line honest: the shortcuts always DO something.
     const reportCommand: KeymapCommand = {
       id: "model-compare.report",
       title: "Model-compare report",
@@ -659,12 +869,25 @@ export default Plugin.define({
       palette: true,
       run: async () => {
         const sessionID = currentSessionID()
-        if (sessionID === null) {
-          notify("no session yet — submit any prompt to create one; a report pick switches that session", "error")
+        if (sessionID !== null) {
+          try {
+            await context.client.session.command({ sessionID, name: "model-compare", text: "" })
+          } catch (error) {
+            notify(`report failed: ${error instanceof Error ? error.message : String(error)}`, "error")
+          }
           return
         }
         try {
-          await context.client.session.command({ sessionID, name: "model-compare", text: "" })
+          const report: unknown = await context.client.rpc(ModelCompare).report(
+            {},
+            here === undefined ? undefined : { location: { directory: here } },
+          )
+          const data = report as { age?: unknown; entries?: unknown } | undefined
+          showReportDialog({
+            sessionID: null,
+            age: typeof data?.age === "string" ? data.age : null,
+            entries: toReportEntries(data?.entries),
+          })
         } catch (error) {
           notify(`report failed: ${error instanceof Error ? error.message : String(error)}`, "error")
         }
@@ -761,7 +984,13 @@ export default Plugin.define({
     })
 
     return () => {
+      // Disarm whatever dialog is still armed FIRST: its pending frame
+      // reveal and modal keyboard must not outlive the plugin (the
+      // module-scope armedClose/armedReveal survive setup's cleanup
+      // otherwise).
+      armedClose?.()
       if (resyncTimer !== undefined) clearInterval(resyncTimer)
+      context.renderer.off("resize", onRendererResize)
       offReportEvent()
       disposeRoot()
       disposeAppSlot()