model-compare-opencode-plugin 0.1.1 → 0.3.0

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,
@@ -62,7 +68,8 @@ import {
   type AliasView,
 } from "./opencode/usebest"
 import type { ReportEntry } from "./opencode/commands"
-import { sanitizeCatalogText } from "./opencode/commands"
+import { lastResponseLine, sanitizeCatalogText } from "./opencode/commands"
+import { ModelCompare } from "./rpc"
 
 const TOAST_MS = 6_000
 const RESYNC_MS = 30_000
@@ -74,6 +81,11 @@ const PACKAGE_FRAGMENT = "model-compare-opencode-plugin"
 // The RPC event the /model-compare command emits (see src/rpc.ts; the wire
 // name is prefixed with the RPC's id).
 const REPORT_EVENT = "rpc.model-compare.report"
+// The event the runtime hook emits once per session when it would have
+// steered a request but has no steering data (no catalog source) — the Q2
+// fallback's runtime notification. The toast copy below is the whole message.
+const CANNOT_STEER_EVENT = "rpc.model-compare.cannotSteer"
+const CANNOT_STEER_COPY = "cannot steer this session; OpenRouter default routing applies"
 
 // The list dialogs' lifecycle token (see showListDialog): a module-scope
 // generation counter, bumped every time a dialog is armed, plus the armed
@@ -83,11 +95,129 @@ 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,
+      },
+    ]
+  })
+}
+
+// The report payload's footer capture (the last-response line and the alt+e
+// toast's data), defensively normalized at the trust boundary like the
+// entries: anything but a well-shaped object — or one without an endpoint —
+// degrades to null (no capture), never a placeholder line.
+function toCapture(raw: unknown): { endpoint: string; model: string; downgrade: boolean } | null {
+  if (typeof raw !== "object" || raw === null) return null
+  const capture = raw as { endpoint?: unknown; model?: unknown; downgrade?: unknown }
+  if (typeof capture.endpoint !== "string" || capture.endpoint === "") return null
+  return {
+    endpoint: capture.endpoint,
+    // The Task-5 handoff: a capture may carry an empty model (a response
+    // whose provider had no model id) — carried as-is, and the footer omits
+    // the model part rather than rendering an empty slot.
+    model: typeof capture.model === "string" ? capture.model : "",
+    downgrade: capture.downgrade === true,
+  }
+}
+
+// The footer's steering note, defensively normalized: anything but a
+// non-empty string means the note does not render (no steering data).
+function toSteeringNote(raw: unknown): string | null {
+  return typeof raw === "string" && raw !== "" ? raw : null
+}
+
 export default Plugin.define({
   id: "model-compare-tui",
   async setup(context) {
@@ -97,6 +227,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
@@ -116,6 +265,8 @@ export default Plugin.define({
       sessionID: string
       age: string | null
       entries: ReportEntry[]
+      capture: { endpoint: string; model: string; downgrade: boolean } | null
+      steeringNote: string | null
     } | null>(null)
 
     // The registry view, reactive: OpenCode's data layer updates the list
@@ -177,27 +328,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 +377,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 +409,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
@@ -253,7 +418,15 @@ export default Plugin.define({
       pick: () => void
     } | null>(null)
 
-    function showListDialog(title: string, rows: ListRow[], onPick: (value: string) => void): void {
+    function showListDialog(
+      title: string,
+      rows: ListRow[],
+      onPick: (value: string) => void,
+      // The footer's extra lines (the report dialog's steering note and
+      // last-response line), rendered muted ABOVE the Details line. Absent
+      // for the other dialogs (the picks dialog carries no footer lines).
+      footerLines: string[] = [],
+    ): void {
       const selectable = rows.filter((row) => row.value !== undefined)
       if (selectable.length === 0) {
         notify("nothing to select", "error")
@@ -289,14 +462,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 +539,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 +554,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 +571,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 +594,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,21 +642,32 @@ export default Plugin.define({
                   )
                 })
               })()}
-            </box>
+            </scrollbox>
+            {footerLines.map((line) => (
+              <box paddingLeft={4}>
+                <text fg={muted}>{line}</text>
+              </box>
+            ))}
             <box paddingLeft={4}>
-              <text fg={muted}>Details: https://canonical.github.io/model-compare</text>
+              <text fg={muted}>Details: https://model-compare.dev</text>
             </box>
           </box>
         ),
         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,9 +690,17 @@ 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[]
+      // The footer (design §Steering visibility, the user's option C): the
+      // steering note above the last-response line, both omitted when their
+      // data is absent — never a placeholder.
+      capture: { endpoint: string; model: string; downgrade: boolean } | null
+      steeringNote: string | null
     }): void {
       if (data.entries.length === 0) {
         notify("no ranking data available yet", "error")
@@ -494,10 +767,30 @@ export default Plugin.define({
           })
         }
       }
+      // The report dialog's footer (design §Decisions, option C): the
+      // steering note ABOVE the last-response line, both omitted when their
+      // data is absent — never a placeholder line.
+      const footerLines: string[] = []
+      if (data.steeringNote !== null) footerLines.push(data.steeringNote)
+      const lastResponse = lastResponseLine(data.capture)
+      if (lastResponse !== null) footerLines.push(lastResponse)
       showListDialog(
         `Model Compare — top 5 (data age: ${data.age ?? "unknown"})`,
         rows,
-        (id) => void switchToModel(data.sessionID, id),
+        (id) => {
+          const sessionID = data.sessionID
+          if (sessionID !== null) {
+            void switchToModel(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)}`,
+          )
+        },
+        footerLines,
       )
     }
 
@@ -510,7 +803,13 @@ export default Plugin.define({
       const event = details as {
         type?: unknown
         location?: { directory?: unknown }
-        data?: { sessionID?: unknown; age?: unknown; entries?: unknown }
+        data?: {
+          sessionID?: unknown
+          age?: unknown
+          entries?: unknown
+          capture?: unknown
+          steeringNote?: unknown
+        }
       }
       if (event.type !== REPORT_EVENT) return
       if (
@@ -522,40 +821,49 @@ 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).
+      // in-tree effect opens the dialog (see pendingReport above). The
+      // footer's fields ride the payload like the entries (defensively
+      // normalized at this trust boundary).
       setPendingReport({
         sessionID: eventSessionID,
         age: typeof data.age === "string" ? data.age : null,
         entries,
+        capture: toCapture(data.capture),
+        steeringNote: toSteeringNote(data.steeringNote),
       })
     })
 
+    // The cannot-steer fallback (Task 6): the runtime hook emits this event
+    // once per session when a steerable alias request finds no steering data
+    // (no catalog source). The TUI surfaces it as a toast with the exact
+    // fallback copy; headless shows nothing — like every TUI-coupled surface.
+    // Scoped exactly like the report listener: a foreign directory's session
+    // is never viewable here, and only the CURRENTLY viewed session toasts.
+    // Trade-off: a cannotSteer notice for a same-project background session
+    // (or a session the user isn't currently viewing) is dropped forever —
+    // the emit is once-per-session — but noise from unopened sessions is the
+    // worse failure; the notice is about the session the user interacts with.
+    const offCannotSteerEvent = context.data.listen(({ details }) => {
+      const event = details as {
+        type?: unknown
+        location?: { directory?: unknown }
+        data?: { sessionID?: unknown }
+      }
+      if (event.type !== CANNOT_STEER_EVENT) return
+      if (
+        typeof event.location?.directory === "string" &&
+        here !== undefined &&
+        event.location.directory !== here
+      )
+        return
+      const data = event.data
+      if (typeof data?.sessionID !== "string" || data.sessionID !== currentSessionID()) return
+      notify(CANNOT_STEER_COPY)
+    })
+
     createRoot((dispose) => {
       disposeRoot = dispose
 
@@ -628,29 +936,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,18 +965,74 @@ 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; capture?: unknown; steeringNote?: unknown }
+            | undefined
+          showReportDialog({
+            sessionID: null,
+            age: typeof data?.age === "string" ? data.age : null,
+            entries: toReportEntries(data?.entries),
+            capture: toCapture(data?.capture),
+            steeringNote: toSteeringNote(data?.steeringNote),
+          })
         } catch (error) {
           notify(`report failed: ${error instanceof Error ? error.message : String(error)}`, "error")
         }
       },
     }
 
+    // The served-endpoint toast (design §Steering visibility): alt+e toasts
+    // the CURRENT session's last response's served endpoint, looked up
+    // through the report RPC's footer fields (the capture record rides the
+    // established report payload path). The copy is exact — normal:
+    // "last response served by <endpoint>"; downgrade (the served provider
+    // matched none of the applied steering order): "! served by <endpoint> —
+    // not in steering order"; nothing toasts when nothing was captured for
+    // the session (and with no session open there is nothing to look up).
+    const endpointCommand: KeymapCommand = {
+      id: "model-compare.endpoint",
+      title: "Last served endpoint",
+      group: "Model Compare",
+      bind: "alt+e",
+      palette: true,
+      run: async () => {
+        const sessionID = currentSessionID()
+        if (sessionID === null) return
+        try {
+          const report: unknown = await context.client.rpc(ModelCompare).report(
+            { sessionID },
+            here === undefined ? undefined : { location: { directory: here } },
+          )
+          const capture = toCapture((report as { capture?: unknown } | undefined)?.capture)
+          if (capture === null) return
+          // F-20: the endpoint is response data — flattened for the toast.
+          notify(
+            capture.downgrade
+              ? `! served by ${sanitizeCatalogText(capture.endpoint)} — not in steering order`
+              : `last response served by ${sanitizeCatalogText(capture.endpoint)}`,
+          )
+        } catch (error) {
+          notify(
+            `endpoint lookup failed: ${error instanceof Error ? error.message : String(error)}`,
+            "error",
+          )
+        }
+      },
+    }
+
     // The palette-only use-best: the immediate-toast variant. The SLASH
     // surface is left to the server command (one entry everywhere); the
     // palette is TUI-layer territory, where this variant's instant feedback
@@ -751,7 +1113,7 @@ export default Plugin.define({
         try {
           context.keymap.layer(() => ({
             mode: "global",
-            commands: [useBestCommand, picksCommand, reportCommand],
+            commands: [useBestCommand, picksCommand, reportCommand, endpointCommand],
           }))
         } catch (error) {
           layerFailure("the model-compare keymap layer", error)
@@ -761,8 +1123,15 @@ 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()
+      offCannotSteerEvent()
       disposeRoot()
       disposeAppSlot()
       disposeHomeFooter()