opencode-localhost 0.1.0 → 0.7.0

package/README.md

@@ -26,14 +26,27 @@ opencode loads server-side and TUI plugins separately, so it goes in two files.
 
 ```jsonc
 // ~/.config/opencode/opencode.jsonc
-{ "plugin": ["opencode-localhost"] }
+{ "plugin": ["/absolute/path/to/opencode-localhost"] }
 ```
 
 ```jsonc
 // ~/.config/opencode/tui.jsonc
-{ "plugin": ["opencode-localhost"] }
+{ "plugin": ["/absolute/path/to/opencode-localhost"] }
 ```
 
+```sh
+git clone https://github.com/dushyant30suthar/opencode-localhost
+cd opencode-localhost && bun install
+```
+
+**Why a path and not the package name?** On opencode 1.18.5, a TUI plugin
+installed by name never loads. opencode resolves an npm plugin against the
+wrapper `package.json` it generates in `~/.cache/opencode/packages/<name>@latest/`,
+which has no `exports` field — so `exports["./tui"]` is never found and the TUI
+half is skipped silently. The server half survives on a fallback path, which
+makes it look like the provider works but the panel is broken. Referencing the
+package by path avoids that resolution entirely.
+
 Start opencode. The panel appears under the prompt and tells you what is still
 missing.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opencode-localhost",
-  "version": "0.1.0",
+  "version": "0.7.0",
   "description": "Run local models in opencode. llama.cpp as a provider, with live GPU, VRAM and CPU telemetry in the sidebar.",
   "keywords": [
     "opencode",
@@ -32,26 +32,16 @@
     "README.md",
     "LICENSE"
   ],
-  "peerDependencies": {
-    "@opentui/solid": ">=0.4.5",
-    "solid-js": ">=1.9.0"
-  },
-  "peerDependenciesMeta": {
-    "@opentui/solid": {
-      "optional": true
-    },
-    "solid-js": {
-      "optional": true
-    }
-  },
   "devDependencies": {
     "@opencode-ai/plugin": "^1.18.4",
-    "@opentui/solid": "^0.4.5",
     "@types/node": "^26.1.1",
-    "solid-js": "^1.9.0",
     "typescript": "^7.0.2"
   },
   "engines": {
     "node": ">=22"
+  },
+  "dependencies": {
+    "@opentui/solid": "^0.4.5",
+    "solid-js": "^1.9.0"
   }
 }

package/src/server/backend.ts

@@ -1,4 +1,4 @@
-import type { ProviderStatus } from "../shared/types.ts"
+import type { LoadEvent, LoadedModel, ProviderStatus } from "../shared/types.ts"
 
 /**
  * What every backend implements. llama.cpp today; vLLM and OpenVINO are new
@@ -22,8 +22,16 @@ export type DiscoveredModel = {
 
 export interface Backend {
   readonly id: string
+
+  /** Short, for the panel — everything there is local, so no prefix. */
   readonly name: string
 
+  /**
+   * How it appears in opencode's provider list, where it sits beside cloud
+   * providers and several engines should group together.
+   */
+  readonly providerName: string
+
   /** Never throws. "unconfigured" is a normal answer on a fresh install. */
   status(): Promise<ProviderStatus>
 
@@ -33,6 +41,19 @@ export interface Backend {
   /** Idempotent: starts the server only if it is not already answering. */
   start(): Promise<ProviderStatus>
 
+  /** Stops a server we started. Never touches one we did not spawn. */
+  stop(): Promise<boolean>
+
+  /** What the server currently holds, if anything. Undefined when it is down. */
+  loaded(): Promise<LoadedModel | undefined>
+
+  /**
+   * Live load progress. Polling cannot see this: a model streaming into VRAM
+   * takes tens of seconds and the REST listing only flips from unloaded to
+   * loaded at the end. Returns an unsubscribe.
+   */
+  watch(onEvent: (event: LoadEvent) => void): () => void
+
   baseURL(): string
   apiKey(): string | undefined
 }

package/src/server/index.ts

@@ -22,7 +22,7 @@ const sampling = new Map<string, Record<string, number>>()
 
 function providerEntry(backend: Backend, models: DiscoveredModel[]) {
   return {
-    name: `${backend.name} (local)`,
+    name: backend.providerName,
     api: backend.baseURL(),
     npm: "@ai-sdk/openai-compatible",
     options: {
@@ -50,17 +50,12 @@ async function register(input: any) {
     // unconfigured or missing binary: contribute nothing. The panel explains why.
     if (!status || status.state === "unconfigured" || status.state === "failed") continue
 
-    // Not up yet: start it in the background and register nothing this run.
+    // Configured is enough. The models exist on disk whether or not a server
+    // happens to be up, and a picker that stays empty until you find and press
+    // [start] is indistinguishable from the plugin not working at all.
     //
-    // Awaiting here would stall opencode's startup for as long as the server
-    // takes to answer — once on a fresh setup, and on *every* launch if the
-    // server is failing to start. opencode reads its config once per instance
-    // and exposes no way to re-read it, so the provider genuinely cannot appear
-    // until the next launch; the panel says so rather than leaving it silent.
-    if (status.state !== "running") {
-      void backend.start().catch(() => {})
-      continue
-    }
+    // Nothing is spawned here: the server comes up on the first request, in
+    // chat.params below.
 
     const models = await backend.models().catch(() => [])
     if (models.length === 0) continue
@@ -83,7 +78,14 @@ const server = async () => ({
 
   "chat.params": async (input: any, output: any) => {
     const providerID = input?.model?.providerID
-    if (!BACKENDS.some((backend) => backend.id === providerID)) return
+    const backend = BACKENDS.find((item) => item.id === providerID)
+    if (!backend) return
+
+    // Bring the engine up if this is the first request against it. Sending a
+    // message is a clear enough signal of intent — the objection was to
+    // spawning a server at launch, not to starting one you are about to use.
+    const status = await backend.status().catch(() => undefined)
+    if (status && status.state === "stopped") await backend.start().catch(() => {})
     const values = sampling.get(`${providerID}/${input?.model?.id}`)
     if (!values) return
     // opencode names three of these directly and passes the rest through options

package/src/server/llamacpp/index.ts

@@ -2,7 +2,7 @@ import fs from "fs/promises"
 import path from "path"
 import { spawn } from "child_process"
 import { stateDir, collapseHome } from "../../shared/paths.ts"
-import type { ProviderStatus } from "../../shared/types.ts"
+import type { LoadEvent, LoadedModel, ProviderStatus } from "../../shared/types.ts"
 import type { Backend, DiscoveredModel } from "../backend.ts"
 import * as Server from "./server-ini.ts"
 import * as Models from "./models-ini.ts"
@@ -176,12 +176,171 @@ export function create(): Backend {
     }
   }
 
+  /**
+   * Stop the server we spawned. Checks /proc before signalling so a recycled
+   * pid is never killed, and only kills a process that is actually
+   * llama-server — the pidfile outlives crashes and reboots.
+   */
+  async function stop(): Promise<boolean> {
+    const raw = await fs.readFile(PID_FILE, "utf8").catch(() => "")
+    const pid = Number.parseInt(raw.trim(), 10)
+    if (!Number.isFinite(pid) || pid <= 0) return false
+    const exe = await fs.readlink(`/proc/${pid}/exe`).catch(() => "")
+    if (!exe.includes("llama-server")) {
+      await fs.rm(PID_FILE, { force: true }).catch(() => {})
+      return false
+    }
+    try {
+      process.kill(pid, "SIGTERM")
+    } catch {
+      return false
+    }
+    for (let i = 0; i < 40; i++) {
+      try {
+        process.kill(pid, 0)
+      } catch {
+        break
+      }
+      await new Promise((resolve) => setTimeout(resolve, 250))
+    }
+    try {
+      process.kill(pid, "SIGKILL")
+    } catch {
+      // already gone
+    }
+    await fs.rm(PID_FILE, { force: true }).catch(() => {})
+    return true
+  }
+
+  /** llama-server reports its launch flags as a flat argv array. */
+  function argsOf(argv: unknown): Record<string, string> {
+    if (!Array.isArray(argv)) return {}
+    const out: Record<string, string> = {}
+    for (let i = 0; i < argv.length; i++) {
+      const token = String(argv[i])
+      if (!token.startsWith("--")) continue
+      const next = argv[i + 1]
+      if (next === undefined || String(next).startsWith("--")) continue
+      out[token.slice(2)] = String(next)
+    }
+    return out
+  }
+
+  async function loaded(): Promise<LoadedModel | undefined> {
+    const cfg = await config()
+    try {
+      const res = await fetch(`${baseURL()}/models`, {
+        signal: AbortSignal.timeout(PROBE_TIMEOUT),
+        headers: cfg.apiKey ? { Authorization: `Bearer ${cfg.apiKey}` } : {},
+      })
+      if (!res.ok) return undefined
+      const body: any = await res.json()
+      const entries: any[] = Array.isArray(body?.data) ? body.data : []
+      // llama-server reports state as status.value: "loaded" | "unloaded" |
+      // "loading". Every preset carries args, so matching on args alone picked
+      // whichever model sorted first rather than the one actually loaded.
+      const active =
+        entries.find((entry) => entry?.status?.value === "loading") ??
+        entries.find((entry) => entry?.status?.value === "loaded")
+      if (!active) return undefined
+      // llama-server reports load progress as {stages, current, value} while
+      // weights stream in; value is 0-1 for the stage named by `current`
+      return {
+        id: String(active.id ?? ""),
+        args: argsOf(active?.status?.args),
+        loading: active?.status?.value === "loading",
+      }
+    } catch {
+      return undefined
+    }
+  }
+
+  /**
+   * Stream model state from /models/sse. The REST listing only flips from
+   * unloaded to loaded at the very end, so a thirty-second load looks like a
+   * hang unless we read this.
+   *
+   * Captured from a real load: one "model_status" frame announces the load,
+   * then ~20 "status_change" frames carry the progress, ending with
+   * status "loaded". The outgoing model gets its own "unloaded" frame.
+   *
+   *   data: {"model":"...","event":"status_change",
+   *          "data":{"status":"loading",
+   *                  "progress":{"stages":["text_model"],"current":"text_model","value":0.19}}}
+   */
+  function watch(onEvent: (event: LoadEvent) => void): () => void {
+    const controller = new AbortController()
+    let stopped = false
+
+    const connect = async () => {
+      while (!stopped) {
+        try {
+          const cfg = await config()
+          const host = cfg.host === "0.0.0.0" ? "127.0.0.1" : cfg.host
+          const res = await fetch(`http://${host}:${cfg.port}/models/sse`, {
+            signal: controller.signal,
+            headers: cfg.apiKey ? { Authorization: `Bearer ${cfg.apiKey}` } : {},
+          })
+          if (!res.ok || !res.body) throw new Error("no stream")
+          const reader = res.body.getReader()
+          const decoder = new TextDecoder()
+          let buffer = ""
+          while (!stopped) {
+            const { done, value } = await reader.read()
+            if (done) break
+            buffer += decoder.decode(value, { stream: true })
+            // frames are separated by a blank line; keep any partial tail
+            const frames = buffer.split("\n\n")
+            buffer = frames.pop() ?? ""
+            for (const frame of frames) {
+              const line = frame.split("\n").find((item) => item.startsWith("data:"))
+              if (!line) continue
+              try {
+                const payload = JSON.parse(line.slice(5).trim())
+                // progress rides on status_change; model_status only announces
+                // the start. Filtering to model_status dropped every update.
+                const kind = payload?.event
+                if (kind && kind !== "model_status" && kind !== "status_change") continue
+                const body = payload?.data ?? {}
+                const progress = body?.progress
+                onEvent({
+                  model: String(payload?.model ?? ""),
+                  loading: body?.status === "loading",
+                  failed: body?.status === "failed" || body?.status === "error",
+                  loaded: body?.status === "loaded",
+                  progress: typeof progress?.value === "number" ? progress.value : undefined,
+                  stage: typeof progress?.current === "string" ? progress.current : undefined,
+                })
+              } catch {
+                // a malformed frame is not worth tearing the stream down for
+              }
+            }
+          }
+        } catch {
+          // server down or restarted; wait before reconnecting
+        }
+        if (stopped) return
+        await new Promise((resolve) => setTimeout(resolve, 2_000))
+      }
+    }
+
+    void connect()
+    return () => {
+      stopped = true
+      controller.abort()
+    }
+  }
+
   return {
     id: Server.BACKEND,
     name: "llama.cpp",
+    providerName: "Localhost-llama.cpp",
     status,
     models,
     start,
+    stop,
+    loaded,
+    watch,
     baseURL,
     apiKey: () => settings?.apiKey || undefined,
   }

package/src/server/llamacpp/models-ini.ts

@@ -1,7 +1,7 @@
 import fs from "fs/promises"
 import path from "path"
 import * as Ini from "../../shared/ini.ts"
-import { configDir } from "../../shared/paths.ts"
+import { configDir, expandHome } from "../../shared/paths.ts"
 import type { LocalModel } from "./discover.ts"
 
 /**
@@ -86,12 +86,29 @@ export type SyncResult = {
 export async function sync(models: LocalModel[]): Promise<SyncResult> {
   const existing = await fs.readFile(FILE, "utf8").catch(() => "")
   const doc = Ini.parse(existing)
+  // llama-server opens these paths literally — it does not expand `~`, so a
+  // hand-written `model = ~/...` fails with "failed to open GGUF file". This is
+  // the one case where an existing section is rewritten, because leaving it
+  // alone means the model silently never loads.
+  let rewrote = false
+  for (const item of doc.sections) {
+    for (const key of ["model", "mmproj"] as const) {
+      const raw = Ini.get(item, key)?.trim()
+      if (!raw || !raw.startsWith("~")) continue
+      Ini.set(item, key, expandHome(raw))
+      rewrote = true
+    }
+  }
   const names = new Set(doc.sections.map((item) => item.name))
 
+  // Compare expanded paths. Hand-written sections routinely use `~/...` while
+  // discovery always produces absolute paths; comparing the raw strings makes
+  // an already-tuned model look new, and appends a default 32k section beside
+  // it that then wins — silently replacing tuned settings.
   const byFile = new Map<string, string>()
   for (const item of doc.sections) {
     const file = Ini.get(item, "model")?.trim()
-    if (file) byFile.set(file, item.name)
+    if (file) byFile.set(expandHome(file), item.name)
   }
 
   const added: string[] = []
@@ -110,7 +127,8 @@ export async function sync(models: LocalModel[]): Promise<SyncResult> {
     added.push(section({ ...model, id }))
   }
 
-  const body = existing.trim().length > 0 ? existing.replace(/\s+$/, "") : HEADER
+  const source = rewrote ? Ini.serialize(doc) : existing
+  const body = source.trim().length > 0 ? source.replace(/\s+$/, "") : HEADER
   const next = added.length > 0 ? [body, "", added.join("\n\n"), ""].join("\n") : body + "\n"
 
   await fs.mkdir(path.dirname(FILE), { recursive: true }).catch(() => {})

package/src/shared/types.ts

@@ -21,6 +21,19 @@ export type LoadedModel = {
   loading?: boolean
   /** 0-1 while weights stream in. */
   progress?: number
+  /** Which stage is streaming, e.g. "text_model" or "mmproj". */
+  stage?: string
+}
+
+/** A model changing state, streamed while it loads. */
+export type LoadEvent = {
+  model: string
+  loading: boolean
+  loaded?: boolean
+  failed?: boolean
+  /** 0-1 for the stage named below. */
+  progress?: number
+  stage?: string
 }
 
 /**
@@ -34,18 +47,26 @@ export type ProviderStatus =
   | { state: "running"; endpoint: string; loaded?: LoadedModel }
   | { state: "failed"; message: string; hint?: string }
 
-export type PanelData = {
-  backend: { id: string; name: string }
+/** One engine. A machine can have several, each its own opencode provider. */
+export type BackendPanel = {
+  id: string
+  name: string
   status: ProviderStatus
+  loaded?: LoadedModel
+}
+
+export type PanelData = {
   /**
-   * Whether opencode has actually picked up the provider. False while the
-   * server is up but opencode has not re-read its config — the one case where
-   * a restart is genuinely required, so the panel has to say so.
+   * Only backends the user has actually configured. Listing every engine we
+   * know about would put three dead rows on screen forever; /localhost is
+   * where the full list with install state lives.
    */
+  backends: BackendPanel[]
+  /** Whether opencode has picked any of these up as providers yet. */
   registered?: boolean
+  /** Shared: one GPU pool no matter how many engines are installed. */
   gpus: GpuStat[]
   memory?: SystemStat
-  cpu?: SystemStat
   /** Tokens per second, while generating. */
   throughput?: number
 }

package/src/tui/backends.ts

@@ -0,0 +1,14 @@
+import { create as llamacpp } from "../server/llamacpp/index.ts"
+import type { Backend } from "../server/backend.ts"
+
+/**
+ * The engines this TUI half talks to, shared so the panel, the setup screen
+ * and the commands all see the same instances and the same busy state.
+ *
+ * A machine can have several; each is its own opencode provider.
+ */
+export const BACKENDS: Backend[] = [llamacpp()]
+
+export function backendById(id: string): Backend | undefined {
+  return BACKENDS.find((backend) => backend.id === id)
+}

package/src/tui/index.tsx

@@ -1,6 +1,42 @@
-import { createEffect, For, Show } from "solid-js"
+import { createEffect, createSignal, For, Show } from "solid-js"
 import { Hardware, Provider, Model, hardwareRows, usePanelData } from "./panel.tsx"
 import { openSetup } from "./setup.tsx"
+import { BACKENDS, backendById } from "./backends.ts"
+
+/**
+ * Shared so the strip, the sidebar and the command all show the same busy
+ * state — start can take twenty seconds and three views disagreeing about
+ * whether it is running looks broken.
+ */
+const [busy, setBusy] = createSignal<string | undefined>(undefined)
+
+/**
+ * opencode's own model picker, rather than a second one of ours: selecting a
+ * model is TUI-local state a plugin cannot write, so a custom list could show
+ * models but never switch to one.
+ */
+function openModelPicker(api: any) {
+  try {
+    api.keymap.dispatchCommand("model.list")
+  } catch {
+    api.ui.toast({ message: "could not open the model picker", variant: "error" })
+  }
+}
+
+async function toggleServer(id: string) {
+  if (busy()) return
+  const backend = backendById(id)
+  if (!backend) return
+  setBusy(id)
+  try {
+    const status = await backend.status()
+    await (status.state === "running" ? backend.stop() : backend.start())
+  } catch {
+    // status reflects whatever actually happened on the next poll
+  } finally {
+    setBusy(undefined)
+  }
+}
 
 /**
  * The TUI half.
@@ -15,13 +51,17 @@ import { openSetup } from "./setup.tsx"
  */
 
 /**
- * Columns are fixed and flexShrink is off. Without this the row collapses
- * under its own content in a narrow terminal and the three sections overprint
- * each other. Total is 74, matching opencode's default prompt width of 75.
+ * Hardware and provider are fixed and cannot shrink — without that the row
+ * collapses under its own content and the sections overprint each other.
+ *
+ * MODEL takes whatever is left rather than a fixed width, and wraps: model ids
+ * carry a publisher prefix ("lmstudio-community/Qwen3.6-35B-A3B-GGUF"), which a
+ * fixed column truncated at exactly the identifying part. The strip keeps the
+ * prompt's 75-column max so it stays centred with everything else on the home
+ * screen — full width made it hug the left edge while the prompt stayed centred.
  */
-const HARDWARE_WIDTH = 30
-const PROVIDER_WIDTH = 18
-const MODEL_WIDTH = 23
+const HARDWARE_WIDTH = 28
+const PROVIDER_WIDTH = 17
 
 /** One `│` per row, so the rule spans the whole block rather than its first line. */
 function Divider(props: { color: string; rows: number }) {
@@ -35,7 +75,8 @@ function Divider(props: { color: string; rows: number }) {
 
 /** opencode exposes the providers it loaded, which is how we detect the gap. */
 function registered(api: any) {
-  return () => (api.state?.provider ?? []).some((item: any) => item?.id === "llamacpp")
+  const known = new Set(BACKENDS.map((backend) => backend.id))
+  return () => (api.state?.provider ?? []).some((item: any) => known.has(item?.id))
 }
 
 /**
@@ -64,10 +105,10 @@ function requestReload(api: any): boolean {
  * Guarded because the reload is asynchronous: without it, every poll before
  * the provider list refreshes would fire another signal.
  */
-function useAutoReload(api: any, data: () => { status: { state: string }; registered?: boolean }) {
+function useAutoReload(api: any, data: () => { backends: { status: { state: string } }[]; registered?: boolean }) {
   let fired = false
   createEffect(() => {
-    const ready = data().status.state === "running"
+    const ready = data().backends.some((backend) => backend.status.state === "running")
     if (!ready || data().registered !== false) {
       // reset once opencode has caught up, so a later restart of the backend
       // can trigger exactly one more reload
@@ -90,11 +131,11 @@ function HomePanel(props: { api: any }) {
       </box>
       <Divider color={theme().border} rows={hardwareRows(data()) + 1} />
       <box width={PROVIDER_WIDTH} flexShrink={0} flexDirection="column">
-        <Provider theme={theme()} data={data()} />
+        <Provider theme={theme()} data={data()} busy={busy()} onToggle={(id) => void toggleServer(id)} />
       </box>
       <Divider color={theme().border} rows={hardwareRows(data()) + 1} />
-      <box width={MODEL_WIDTH} flexShrink={0} flexDirection="column">
-        <Model theme={theme()} data={data()} />
+      <box flexGrow={1} minWidth={20} flexDirection="column">
+        <Model theme={theme()} data={data()} onChange={() => openModelPicker(props.api)} />
       </box>
     </box>
   )
@@ -107,11 +148,9 @@ function SidebarPanel(props: { api: any }) {
     <box flexDirection="column">
       <Hardware theme={theme()} data={data()} />
       <box height={1} />
-      <Provider theme={theme()} data={data()} stacked />
+      <Provider theme={theme()} data={data()} stacked busy={busy()} onToggle={(id) => void toggleServer(id)} />
       <box height={1} />
-      <Show when={data().status.state === "running"}>
-        <Model theme={theme()} data={data()} stacked />
-      </Show>
+      <Model theme={theme()} data={data()} stacked onChange={() => openModelPicker(props.api)} />
     </box>
   )
 }
@@ -127,6 +166,19 @@ const tui = async (api: any) => {
       slash: { name: "localhost" },
       onSelect: () => openSetup(api),
     },
+    {
+      // keyboard route to the same action: tab is opencode's agent cycler, so
+      // the panel cannot be tabbed into. This is bindable and in ctrl+p.
+      title: "Local models: start/stop server",
+      value: "localhost.server.toggle",
+      category: "Provider",
+      onSelect: () => {
+        // with one engine this is unambiguous; with several the setup screen
+        // is where you pick which, so this acts on the first configured one
+        const first = BACKENDS[0]
+        if (first) void toggleServer(first.id)
+      },
+    },
   ])
 
   api.slots.register({

package/src/tui/panel.tsx

@@ -1,19 +1,24 @@
-import { createMemo, createSignal, createEffect, onCleanup, For, Show } from "solid-js"
-import type { GpuStat, PanelData, ProviderStatus, SystemStat } from "../shared/types.ts"
+import { createMemo, createSignal, createEffect, onCleanup, untrack, For, Show } from "solid-js"
+import type { BackendPanel, GpuStat, LoadEvent, PanelData, ProviderStatus, SystemStat } from "../shared/types.ts"
 import { gpus } from "./hardware/nvidia.ts"
 import { system } from "./hardware/system.ts"
-import * as Server from "../server/llamacpp/server-ini.ts"
-import { collapseHome } from "../shared/paths.ts"
+import { BACKENDS } from "./backends.ts"
 
 /**
- * The panel: hardware, then provider, then model.
+ * Three sections: hardware, provider, model.
  *
- * Rows are built as fixed-width cells and padded explicitly rather than laid
- * out with flex, because in a monospace grid padStart/padEnd is what actually
- * guarantees the columns line up.
+ * Hardware is one fixed block because the GPUs are shared no matter how many
+ * engines are installed. PROVIDER is the section that multiplies — one entry
+ * per configured engine. MODEL describes what is actually loaded, naming the
+ * engine only when more than one holds something.
+ *
+ * Rows are padded explicitly rather than laid out with flex: in a monospace
+ * grid padStart/padEnd is what actually makes the columns line up.
  */
 
 const POLL_MS = 2_000
+/** While weights stream in, 2s makes the bar jump in visible steps. */
+const POLL_LOADING_MS = 500
 const MIB_PER_GIB = 1024
 
 type Theme = Record<string, any>
@@ -62,30 +67,21 @@ function statusWord(status: ProviderStatus) {
   }
 }
 
-function DeviceRow(props: {
-  theme: Theme
-  label: string
-  stat: GpuStat | SystemStat
-  labelWidth: number
-  memWidth: number
-  pctWidth: number
-}) {
+function DeviceRow(props: { theme: Theme; label: string; stat: GpuStat | SystemStat }) {
   const used = () => props.stat.usedMiB
   const total = () => props.stat.totalMiB
   return (
     <box flexDirection="row">
-      <text fg={props.theme.textMuted}>{props.label.padEnd(props.labelWidth)}</text>
-      <text fg={memoryColor(props.theme, used(), total())}>
-        {`${gib(used())}/${gib(total())}G`.padStart(props.memWidth)}
-      </text>
+      <text fg={props.theme.textMuted}>{props.label.padEnd(5)}</text>
+      <text fg={memoryColor(props.theme, used(), total())}>{`${gib(used())}/${gib(total())}G`.padStart(14)}</text>
       <text fg={props.theme.text}>
-        {(props.stat.utilization === undefined ? "—" : `${props.stat.utilization}%`).padStart(props.pctWidth)}
+        {(props.stat.utilization === undefined ? "—" : `${props.stat.utilization}%`).padStart(9)}
       </text>
     </box>
   )
 }
 
-/** Rows the hardware grid will render, so the divider can match its height. */
+/** Rows the hardware grid renders, so the divider can match its height. */
 export function hardwareRows(data: PanelData) {
   return data.gpus.length + (data.memory ? 1 : 0)
 }
@@ -101,175 +97,259 @@ export function Hardware(props: { theme: Theme; data: PanelData }) {
     <Show when={rows().length > 0}>
       <box flexDirection="column">
         <box flexDirection="row">
-          <text fg={props.theme.textMuted}>{"HARDWARE".padEnd(9)}</text>
+          <text fg={props.theme.textMuted}>{"HARDWARE".padEnd(8)}</text>
           <text fg={props.theme.textMuted}>{"memory".padStart(11)}</text>
-          <text fg={props.theme.textMuted}>{"compute".padStart(10)}</text>
+          <text fg={props.theme.textMuted}>{"compute".padStart(9)}</text>
         </box>
-        <For each={rows()}>
-          {(row) => (
-            <DeviceRow theme={props.theme} label={row.label} stat={row.stat} labelWidth={6} memWidth={14} pctWidth={10} />
-          )}
-        </For>
+        <For each={rows()}>{(row) => <DeviceRow theme={props.theme} label={row.label} stat={row.stat} />}</For>
       </box>
     </Show>
   )
 }
 
-export function Provider(props: { theme: Theme; data: PanelData; stacked?: boolean }) {
-  const status = () => props.data.status
+function endpointOf(status: ProviderStatus) {
+  if (status.state !== "running") return undefined
+  return status.endpoint.replace(/^https?:\/\//, "").replace(/\/v1$/, "")
+}
+
+/** Two lines per engine: name, then state or endpoint, then the control. */
+function ProviderEntry(props: { theme: Theme; backend: BackendPanel; busy?: boolean; onToggle?: (id: string) => void }) {
+  const status = () => props.backend.status
+  const actionable = () => status().state === "running" || status().state === "stopped"
   return (
     <box flexDirection="column">
-      <Show when={props.stacked}>
-        <text fg={props.theme.textMuted}>PROVIDER</text>
-      </Show>
-      <text fg={props.theme.text} wrapMode="none">
-        {props.data.backend.name}
+      <text fg={props.theme.text} wrapMode="word">
+        {props.backend.name}
       </text>
       <box flexDirection="row">
         <text fg={statusColor(props.theme, status().state)}>{`${GLYPH[status().state]} `}</text>
-        <text fg={props.theme.text} wrapMode="none">
-          {statusWord(status())}
-        </text>
-      </box>
-      <Show when={status().state === "running" && "endpoint" in status()}>
         <text fg={props.theme.textMuted} wrapMode="none">
-          {(status() as { endpoint: string }).endpoint.replace(/^https?:\/\//, "").replace(/\/v1$/, "")}
+          {endpointOf(status()) ?? statusWord(status())}
         </text>
-      </Show>
+      </box>
       <Show when={"message" in status()}>
-        <text fg={props.theme.textMuted} wrapMode="none">
+        <text fg={props.theme.textMuted} wrapMode="word">
           {(status() as { message: string }).message}
         </text>
       </Show>
-      {/* the file path is only useful where there is room to read it */}
-      <Show when={status().state === "running" && props.data.registered === false}>
-        <text fg={props.theme.warning} wrapMode="none">
-          restart opencode
+      <Show when={props.onToggle && actionable()}>
+        <text
+          fg={props.busy ? props.theme.textMuted : props.theme.primary}
+          wrapMode="none"
+          onMouseUp={() => !props.busy && props.onToggle?.(props.backend.id)}
+        >
+          {props.busy ? "…working" : status().state === "running" ? "[stop]" : "[start]"}
         </text>
       </Show>
-      <Show when={props.stacked && "hint" in status() && (status() as { hint?: string }).hint}>
-        <text fg={props.theme.textMuted} wrapMode="word">
-          {(status() as { hint: string }).hint}
-        </text>
+    </box>
+  )
+}
+
+export function Provider(props: {
+  theme: Theme
+  data: PanelData
+  stacked?: boolean
+  busy?: string
+  onToggle?: (id: string) => void
+}) {
+  return (
+    <box flexDirection="column">
+      <Show when={props.stacked}>
+        <text fg={props.theme.textMuted}>PROVIDER</text>
+      </Show>
+      <Show
+        when={props.data.backends.length > 0}
+        fallback={
+          <text fg={props.theme.textMuted} wrapMode="word">
+            nothing configured — /localhost
+          </text>
+        }
+      >
+        <For each={props.data.backends}>
+          {(backend) => (
+            <ProviderEntry
+              theme={props.theme}
+              backend={backend}
+              busy={props.busy === backend.id}
+              onToggle={props.onToggle}
+            />
+          )}
+        </For>
       </Show>
     </box>
   )
 }
 
-export function Model(props: { theme: Theme; data: PanelData; stacked?: boolean }) {
-  const loaded = () => (props.data.status.state === "running" ? props.data.status.loaded : undefined)
-  const detail = createMemo(() => {
-    const model = loaded()
-    if (!model) return []
-    const args = model.args
-    const parts: string[] = []
-    if (args["ctx-size"]) parts.push(`${args["ctx-size"]} ctx`)
-    if (args["cache-type-k"]) parts.push(`${args["cache-type-k"]} KV`)
-    const second: string[] = []
-    if (args["gpu-layers"]) second.push(`ngl ${args["gpu-layers"]}`)
-    if (args["tensor-split"]) second.push(`split ${args["tensor-split"]}`)
-    if (props.data.throughput) second.push(`${props.data.throughput.toFixed(1)} tok/s`)
-    return [parts.join(" · "), second.join(" · ")].filter(Boolean)
-  })
+/** A tenth-width bar: enough to read at a glance, cheap in a 25-column column. */
+function bar(fraction: number) {
+  const filled = Math.max(0, Math.min(10, Math.round(fraction * 10)))
+  return "█".repeat(filled) + "░".repeat(10 - filled)
+}
+
+function detailOf(backend: BackendPanel, throughput?: number) {
+  const model = backend.loaded
+  if (!model) return []
+  // while weights stream in there are no launch flags to report yet, and the
+  // thing worth showing is how far along it is
+  if (model.loading) {
+    // Measured: llama-server reports 0% for ~9s while it allocates, then runs
+    // 0->100% in about 3s. A bar pinned at 0% for nine seconds reads as hung,
+    // so say what it is actually doing until there is progress to show.
+    const pct = model.progress === undefined ? undefined : Math.round(model.progress * 100)
+    const line = !pct ? "allocating…" : `${bar(model.progress!)} ${pct}%`
+    return [line, model.stage ?? ""].filter(Boolean)
+  }
+  const args = model.args
+  const first: string[] = []
+  if (args["ctx-size"]) first.push(`${args["ctx-size"]} ctx`)
+  if (args["cache-type-k"]) first.push(`${args["cache-type-k"]} KV`)
+  const second: string[] = []
+  if (args["gpu-layers"]) second.push(`ngl ${args["gpu-layers"]}`)
+  if (args["tensor-split"]) second.push(`split ${args["tensor-split"]}`)
+  if (throughput) second.push(`${throughput.toFixed(1)} tok/s`)
+  return [first.join(" · "), second.join(" · ")].filter(Boolean)
+}
+
+export function Model(props: { theme: Theme; data: PanelData; stacked?: boolean; onChange?: () => void }) {
+  const withModel = createMemo(() => props.data.backends.filter((backend) => backend.loaded))
+  // the engine name is only worth repeating when more than one holds something
+  const grouped = createMemo(() => withModel().length > 1)
   return (
     <box flexDirection="column">
       <Show when={props.stacked}>
         <text fg={props.theme.textMuted}>MODEL</text>
       </Show>
-      <text fg={props.theme.text} wrapMode="none">
-        {loaded()?.id ?? "no model loaded"}
-      </text>
-      <For each={detail()}>
-        {(line) => (
+      <Show
+        when={withModel().length > 0}
+        fallback={
           <text fg={props.theme.textMuted} wrapMode="none">
-            {line}
+            no model loaded
           </text>
-        )}
-      </For>
+        }
+      >
+        <For each={withModel()}>
+          {(backend) => (
+            <box flexDirection="column">
+              <Show when={grouped()}>
+                <text fg={props.theme.textMuted} wrapMode="none">
+                  {backend.name}
+                </text>
+              </Show>
+              {/* ids carry a publisher prefix; wrap rather than truncate */}
+              <text
+                fg={backend.loaded!.loading ? props.theme.warning : props.theme.text}
+                wrapMode="word"
+                onMouseUp={() => props.onChange?.()}
+              >
+                {backend.loaded!.loading ? `◐ ${backend.loaded!.id}` : backend.loaded!.id}
+              </text>
+              <For each={detailOf(backend, props.data.throughput)}>
+                {(line) => (
+                  <text fg={props.theme.textMuted} wrapMode="word">
+                    {line}
+                  </text>
+                )}
+              </For>
+            </box>
+          )}
+        </For>
+      </Show>
+      <Show when={props.onChange}>
+        <text fg={props.theme.primary} wrapMode="none" onMouseUp={() => props.onChange?.()}>
+          [change]
+        </text>
+      </Show>
     </box>
   )
 }
 
-/** Polls only while mounted, so a hidden panel costs nothing. */
-export function usePanelData(isRegistered?: () => boolean) {
-  const [data, setData] = createSignal<PanelData>({
-    backend: { id: "llamacpp", name: "llama.cpp" },
-    status: { state: "stopped" },
-    gpus: [],
+// One source of truth for every mount. The home strip and the session sidebar
+// are separate components, so a per-component hook meant two polling loops, two
+// SSE subscriptions and two nvidia-smi calls whenever both were alive.
+const [data, setData] = createSignal<PanelData>({ backends: [], gpus: [] })
+// live load progress, keyed by backend id. Polling cannot see this: the REST
+// listing only flips unloaded -> loaded once the model is already up.
+const [live, setLive] = createSignal<Record<string, LoadEvent>>({})
+let mounted = 0
+let stopPolling: (() => void) | undefined
+let stopWatching: (() => void) | undefined
+let registeredCheck: (() => boolean) | undefined
+
+async function refresh() {
+  const [gpuStats, sysStat] = await Promise.all([gpus().catch(() => []), system().catch(() => undefined)])
+  const backends = await Promise.all(
+    BACKENDS.map(async (backend) => {
+      const status = await backend.status().catch<ProviderStatus>(() => ({ state: "stopped" }))
+      const polled = status.state === "running" ? await backend.loaded().catch(() => undefined) : undefined
+      const event = live()[backend.id]
+      // a load in flight is only visible on the stream, and it names the
+      // incoming model before the listing has caught up
+      const loaded =
+        event?.loading === true
+          ? { id: event.model || polled?.id || "", args: polled?.args ?? {}, ...event }
+          : polled
+      return { id: backend.id, name: backend.name, status, loaded }
+    }),
+  )
+  // an engine with no binary or no models directory is not configured;
+  // carrying it on screen forever is noise, and /localhost lists them all
+  setData({
+    backends: backends.filter((backend) => backend.status.state !== "unconfigured"),
+    gpus: gpuStats,
+    memory: sysStat,
+    registered: registeredCheck?.() ?? true,
   })
+}
 
-  async function refresh() {
-    const [gpuStats, sysStat] = await Promise.all([gpus().catch(() => []), system().catch(() => undefined)])
-    const status = await probe().catch<ProviderStatus>(() => ({ state: "stopped" }))
-    setData((current) => ({
-      ...current,
-      gpus: gpuStats,
-      memory: sysStat,
-      status,
-      registered: isRegistered?.() ?? true,
-    }))
+function startPolling() {
+  let stopped = false
+  let timer: ReturnType<typeof setTimeout> | undefined
+  const tick = async () => {
+    await refresh()
+    if (stopped) return
+    const loading =
+      Object.values(untrack(live)).some((event) => event.loading) ||
+      untrack(data).backends.some((backend) => backend.loaded?.loading)
+    timer = setTimeout(tick, loading ? POLL_LOADING_MS : POLL_MS)
   }
+  void tick()
+  return () => {
+    stopped = true
+    if (timer) clearTimeout(timer)
+  }
+}
 
-  createEffect(() => {
-    void refresh()
-    const timer = setInterval(() => void refresh(), POLL_MS)
-    onCleanup(() => clearInterval(timer))
-  })
-
-  return data
+function startWatching() {
+  const stops = BACKENDS.map((backend) =>
+    backend.watch((event) => {
+      setLive((current) => ({ ...current, [backend.id]: event }))
+      // the stream is the only timely signal; fold it in immediately rather
+      // than waiting for the next poll tick
+      void refresh()
+    }),
+  )
+  return () => stops.forEach((stop) => stop())
 }
 
-/**
- * The TUI half reads the backend directly rather than asking opencode, because
- * a server plugin cannot expose endpoints for it to ask. Documented limitation:
- * this breaks if the TUI ever runs on a different machine from the server.
- */
-async function probe(): Promise<ProviderStatus> {
-  const cfg = await Server.load()
-  if (!cfg.modelsDir) {
-    return {
-      state: "unconfigured",
-      missing: "models-dir",
-      message: "models-dir not set",
-      hint: `set it in ${collapseHome(Server.FILE)}`,
+/** Shared across mounts: the first mount starts the work, the last stops it. */
+export function usePanelData(isRegistered?: () => boolean) {
+  if (isRegistered) registeredCheck = isRegistered
+
+  createEffect(() => {
+    mounted++
+    if (mounted === 1) {
+      stopPolling = startPolling()
+      stopWatching = startWatching()
     }
-  }
-  const host = cfg.host === "0.0.0.0" ? "127.0.0.1" : cfg.host
-  const baseURL = `http://${host}:${cfg.port}/v1`
-  try {
-    const res = await fetch(`${baseURL}/models`, {
-      signal: AbortSignal.timeout(1_500),
-      headers: cfg.apiKey ? { Authorization: `Bearer ${cfg.apiKey}` } : {},
+    onCleanup(() => {
+      mounted--
+      if (mounted > 0) return
+      stopPolling?.()
+      stopWatching?.()
+      stopPolling = undefined
+      stopWatching = undefined
     })
-    if (!res.ok) return { state: "stopped" }
-    const body: any = await res.json()
-    const entries: any[] = Array.isArray(body?.data) ? body.data : []
-    const active = entries.find((entry) => entry?.status?.args || entry?.status?.status === "loading")
-    if (!active) return { state: "running", endpoint: baseURL }
-    return {
-      state: "running",
-      endpoint: baseURL,
-      loaded: {
-        id: String(active.id ?? ""),
-        args: argsOf(active?.status?.args),
-        loading: active?.status?.status === "loading",
-      },
-    }
-  } catch {
-    return { state: "stopped" }
-  }
-}
+  })
 
-/** llama-server reports its launch flags as a flat argv array. */
-function argsOf(argv: unknown): Record<string, string> {
-  if (!Array.isArray(argv)) return {}
-  const out: Record<string, string> = {}
-  for (let i = 0; i < argv.length; i++) {
-    const token = String(argv[i])
-    if (!token.startsWith("--")) continue
-    const next = argv[i + 1]
-    if (next === undefined || String(next).startsWith("--")) continue
-    out[token.slice(2)] = String(next)
-  }
-  return out
+  return data
 }

package/src/tui/setup.tsx

@@ -2,6 +2,9 @@ import fs from "fs/promises"
 import { BACKENDS, allOnPath, expand, supported, type BackendSpec } from "../shared/backends.ts"
 import { collapseHome } from "../shared/paths.ts"
 import * as Server from "../server/llamacpp/server-ini.ts"
+import { BACKENDS as ENGINES } from "./backends.ts"
+
+const backend = ENGINES[0]!
 
 /**
  * Setup, kept separate from the status strip.
@@ -119,12 +122,22 @@ async function rows(api: any, reopen: () => void): Promise<Row[]> {
     run: () => promptPath(api, "Models directory", dir, "models-dir", reopen),
   })
 
+  const status = await backend.status().catch(() => undefined)
+  const running = status?.state === "running"
+
+  // the action is on the row itself — selecting it starts or stops, rather
+  // than opening a submenu to find the one obvious thing to do
   out.push({
-    title: "  Server",
-    description: `${settings.host}:${settings.port} · ${settings.apiKey ? "api-key set" : "no api-key"}`,
-    run: () => api.ui.toast({ message: `Edit ${collapseHome(Server.FILE)}`, variant: "info" }),
+    title: running ? "● Server running   [stop]" : "○ Server stopped   [start]",
+    description: `${settings.host}:${settings.port}`,
+    run: async () => {
+      api.ui.toast({ message: running ? "stopping…" : "starting…", variant: "info" })
+      await (running ? backend.stop() : backend.start()).catch(() => {})
+      reopen()
+    },
   })
 
+
   return out
 }