opencode-localhost 0.1.0

package/src/tui/index.tsx

@@ -0,0 +1,145 @@
+import { createEffect, For, Show } from "solid-js"
+import { Hardware, Provider, Model, hardwareRows, usePanelData } from "./panel.tsx"
+import { openSetup } from "./setup.tsx"
+
+/**
+ * The TUI half.
+ *
+ * Two slots, one component, two arrangements:
+ *   home_bottom      always on screen, so it is also where a fresh install is
+ *                    told what is missing
+ *   sidebar_content  stacked, during a session
+ *
+ * The hardware grid is the same width in both, so it is genuinely one
+ * component rather than two layouts to keep in sync.
+ */
+
+/**
+ * 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.
+ */
+const HARDWARE_WIDTH = 30
+const PROVIDER_WIDTH = 18
+const MODEL_WIDTH = 23
+
+/** One `│` per row, so the rule spans the whole block rather than its first line. */
+function Divider(props: { color: string; rows: number }) {
+  const lines = () => Array.from({ length: Math.max(1, props.rows) })
+  return (
+    <box width={3} flexShrink={0} flexDirection="column">
+      <For each={lines()}>{() => <text fg={props.color}> │ </text>}</For>
+    </box>
+  )
+}
+
+/** 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")
+}
+
+/**
+ * Ask opencode to re-read its config, so a provider that was not ready at
+ * startup appears without restarting.
+ *
+ * opencode's TUI binds SIGUSR2 to a config invalidate + instance dispose, and
+ * a TUI plugin runs inside that same process — so it can signal itself. This
+ * is the only reload path opencode exposes; there is no endpoint for it.
+ *
+ * Only fired from the home screen. The reload disposes live instances, which
+ * is fine before you start working and rude in the middle of a session.
+ */
+function requestReload(api: any): boolean {
+  if (api.route?.current?.name !== "home") return false
+  try {
+    process.kill(process.pid, "SIGUSR2")
+    return true
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Once the backend is up but opencode has not picked it up, reload — once.
+ * 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 }) {
+  let fired = false
+  createEffect(() => {
+    const ready = data().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
+      if (data().registered) fired = false
+      return
+    }
+    if (fired) return
+    fired = requestReload(api)
+  })
+}
+
+function HomePanel(props: { api: any }) {
+  const theme = () => props.api.theme.current
+  const data = usePanelData(registered(props.api))
+  useAutoReload(props.api, data)
+  return (
+    <box width="100%" maxWidth={75} flexDirection="row" flexShrink={0} paddingTop={1}>
+      <box width={HARDWARE_WIDTH} flexShrink={0} flexDirection="column">
+        <Hardware theme={theme()} data={data()} />
+      </box>
+      <Divider color={theme().border} rows={hardwareRows(data()) + 1} />
+      <box width={PROVIDER_WIDTH} flexShrink={0} flexDirection="column">
+        <Provider theme={theme()} data={data()} />
+      </box>
+      <Divider color={theme().border} rows={hardwareRows(data()) + 1} />
+      <box width={MODEL_WIDTH} flexShrink={0} flexDirection="column">
+        <Model theme={theme()} data={data()} />
+      </box>
+    </box>
+  )
+}
+
+function SidebarPanel(props: { api: any }) {
+  const theme = () => props.api.theme.current
+  const data = usePanelData(registered(props.api))
+  return (
+    <box flexDirection="column">
+      <Hardware theme={theme()} data={data()} />
+      <box height={1} />
+      <Provider theme={theme()} data={data()} stacked />
+      <box height={1} />
+      <Show when={data().status.state === "running"}>
+        <Model theme={theme()} data={data()} stacked />
+      </Show>
+    </box>
+  )
+}
+
+const tui = async (api: any) => {
+  // Setup lives behind a command rather than in the strip: the strip answers
+  // "is it working", this answers "where is everything".
+  api.command?.register(() => [
+    {
+      title: "Local models: setup",
+      value: "localhost.setup",
+      category: "Provider",
+      slash: { name: "localhost" },
+      onSelect: () => openSetup(api),
+    },
+  ])
+
+  api.slots.register({
+    order: 350,
+    slots: {
+      home_bottom() {
+        return <HomePanel api={api} />
+      },
+      sidebar_content() {
+        return <SidebarPanel api={api} />
+      },
+    },
+  })
+}
+
+export default { id: "opencode-localhost-tui", tui }

package/src/tui/panel.tsx

@@ -0,0 +1,275 @@
+import { createMemo, createSignal, createEffect, onCleanup, For, Show } from "solid-js"
+import type { GpuStat, 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"
+
+/**
+ * The panel: hardware, then provider, then 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.
+ */
+
+const POLL_MS = 2_000
+const MIB_PER_GIB = 1024
+
+type Theme = Record<string, any>
+
+function gib(mib: number) {
+  return (mib / MIB_PER_GIB).toFixed(1)
+}
+
+/** Memory is an alarm when it is nearly full; compute never is. */
+function memoryColor(theme: Theme, used: number, total: number) {
+  if (total <= 0) return theme.text
+  const ratio = used / total
+  if (ratio >= 0.97) return theme.error
+  if (ratio >= 0.9) return theme.warning
+  return theme.text
+}
+
+const GLYPH: Record<ProviderStatus["state"], string> = {
+  running: "●",
+  starting: "◐",
+  stopped: "○",
+  failed: "✕",
+  unconfigured: "✕",
+}
+
+function statusColor(theme: Theme, state: ProviderStatus["state"]) {
+  if (state === "running") return theme.success
+  if (state === "starting") return theme.warning
+  if (state === "failed" || state === "unconfigured") return theme.error
+  return theme.textMuted
+}
+
+/** The word always accompanies the glyph, so state never depends on colour. */
+function statusWord(status: ProviderStatus) {
+  switch (status.state) {
+    case "running":
+      return "running"
+    case "starting":
+      return "starting"
+    case "stopped":
+      return "stopped"
+    case "failed":
+      return "failed"
+    case "unconfigured":
+      return status.missing === "binary" ? "no binary" : "not set up"
+  }
+}
+
+function DeviceRow(props: {
+  theme: Theme
+  label: string
+  stat: GpuStat | SystemStat
+  labelWidth: number
+  memWidth: number
+  pctWidth: number
+}) {
+  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.text}>
+        {(props.stat.utilization === undefined ? "—" : `${props.stat.utilization}%`).padStart(props.pctWidth)}
+      </text>
+    </box>
+  )
+}
+
+/** Rows the hardware grid will render, so the divider can match its height. */
+export function hardwareRows(data: PanelData) {
+  return data.gpus.length + (data.memory ? 1 : 0)
+}
+
+export function Hardware(props: { theme: Theme; data: PanelData }) {
+  const rows = createMemo(() => {
+    const out: { label: string; stat: GpuStat | SystemStat }[] = []
+    for (const gpu of props.data.gpus) out.push({ label: `GPU${gpu.index}`, stat: gpu })
+    if (props.data.memory) out.push({ label: "CPU", stat: props.data.memory })
+    return out
+  })
+  return (
+    <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}>{"memory".padStart(11)}</text>
+          <text fg={props.theme.textMuted}>{"compute".padStart(10)}</text>
+        </box>
+        <For each={rows()}>
+          {(row) => (
+            <DeviceRow theme={props.theme} label={row.label} stat={row.stat} labelWidth={6} memWidth={14} pctWidth={10} />
+          )}
+        </For>
+      </box>
+    </Show>
+  )
+}
+
+export function Provider(props: { theme: Theme; data: PanelData; stacked?: boolean }) {
+  const status = () => props.data.status
+  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>
+      <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$/, "")}
+        </text>
+      </Show>
+      <Show when={"message" in status()}>
+        <text fg={props.theme.textMuted} wrapMode="none">
+          {(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
+        </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>
+      </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)
+  })
+  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) => (
+          <text fg={props.theme.textMuted} wrapMode="none">
+            {line}
+          </text>
+        )}
+      </For>
+    </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: [],
+  })
+
+  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,
+    }))
+  }
+
+  createEffect(() => {
+    void refresh()
+    const timer = setInterval(() => void refresh(), POLL_MS)
+    onCleanup(() => clearInterval(timer))
+  })
+
+  return data
+}
+
+/**
+ * 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)}`,
+    }
+  }
+  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}` } : {},
+    })
+    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
+}

package/src/tui/setup.tsx

@@ -0,0 +1,150 @@
+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"
+
+/**
+ * Setup, kept separate from the status strip.
+ *
+ * The strip answers "is it working right now". This answers "where is
+ * everything" — a different question, asked at a different time, and cramming
+ * both into three narrow columns is what made the unconfigured state unreadable.
+ *
+ * Built from DialogSelect and DialogPrompt rather than a hand-rolled screen, so
+ * filtering, keyboard navigation and theming come from opencode itself.
+ */
+
+type Row = {
+  title: string
+  description?: string
+  run?: () => void | Promise<void>
+}
+
+const OK = "✓"
+const MISSING = "✗"
+
+async function isFile(file: string): Promise<boolean> {
+  const stat = await fs.stat(file).catch(() => undefined)
+  return !!stat?.isFile()
+}
+
+async function backendRow(spec: BackendSpec, api: any, reopen: () => void): Promise<Row> {
+  if (!supported(spec)) {
+    return {
+      title: `${MISSING} ${spec.name}`,
+      description: "Apple Silicon only",
+      run: () => api.ui.toast({ message: `${spec.name} requires macOS on Apple Silicon`, variant: "info" }),
+    }
+  }
+  if (!spec.implemented) {
+    const found = await allOnPath(spec.binary)
+    return {
+      title: `${found.length > 0 ? OK : MISSING} ${spec.name}`,
+      description: found.length > 0 ? `installed, not supported yet` : `not installed — ${spec.install}`,
+      run: () =>
+        api.ui.toast({
+          message: found.length > 0 ? `${spec.name} support is not implemented yet` : spec.install,
+          variant: "info",
+        }),
+    }
+  }
+
+  // llama.cpp: the configured path wins, otherwise whatever is on $PATH
+  const settings = await Server.load()
+  const configured = settings.bin && (await isFile(settings.bin)) ? settings.bin : undefined
+  const found = await allOnPath(spec.binary)
+  const active = configured ?? found[0]
+
+  return {
+    title: `${active ? OK : MISSING} ${spec.name}`,
+    description: active ? collapseHome(active) : `not found — ${spec.install}`,
+    run: () => chooseBinary(api, spec, found, active, reopen),
+  }
+}
+
+/**
+ * Several llama.cpp builds commonly coexist — a tuned local build plus a
+ * release binary — so this offers the ones it found and always allows typing
+ * a path, rather than assuming the first hit on $PATH is the wanted one.
+ */
+function chooseBinary(api: any, spec: BackendSpec, found: string[], active: string | undefined, reopen: () => void) {
+  const options = [
+    ...found.map((file) => ({
+      title: collapseHome(file),
+      value: file,
+      description: file === active ? "in use" : undefined,
+    })),
+    { title: "Enter a path…", value: "__custom__", description: `e.g. a local build of ${spec.binary}` },
+  ]
+  api.ui.dialog.replace(() => (
+    <api.ui.DialogSelect
+      title={`${spec.name} binary`}
+      options={options}
+      current={active}
+      onSelect={(option: { value: string }) => {
+        if (option.value === "__custom__") return promptPath(api, "Path to " + spec.binary, active ?? "", "bin", reopen)
+        void Server.update("bin", option.value).then(reopen)
+      }}
+    />
+  ))
+}
+
+function promptPath(api: any, title: string, value: string, key: "bin" | "models-dir", reopen: () => void) {
+  api.ui.dialog.replace(() => (
+    <api.ui.DialogPrompt
+      title={title}
+      value={collapseHome(value)}
+      placeholder="~/..."
+      onConfirm={(next: string) => {
+        const resolved = expand(next)
+        if (!resolved) return reopen()
+        void Server.update(key, resolved).then(reopen)
+      }}
+      onCancel={reopen}
+    />
+  ))
+}
+
+async function rows(api: any, reopen: () => void): Promise<Row[]> {
+  const settings = await Server.load()
+  const out: Row[] = []
+
+  for (const spec of BACKENDS) out.push(await backendRow(spec, api, reopen))
+
+  const dir = settings.modelsDir
+  const exists = dir ? await fs.stat(dir).then((s) => s.isDirectory()).catch(() => false) : false
+  out.push({
+    title: `${exists ? OK : MISSING} Models directory`,
+    description: dir ? `${collapseHome(dir)}${exists ? "" : " — not found"}` : "not set — required",
+    run: () => promptPath(api, "Models directory", dir, "models-dir", reopen),
+  })
+
+  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" }),
+  })
+
+  return out
+}
+
+export function openSetup(api: any) {
+  const reopen = () => openSetup(api)
+  void rows(api, reopen).then((list) => {
+    api.ui.dialog.replace(() => (
+      <api.ui.DialogSelect
+        title="Local models — setup"
+        options={list.map((row) => ({
+          title: row.title,
+          value: row.title,
+          description: row.description,
+        }))}
+        onSelect={(option: { value: string }) => {
+          const row = list.find((item) => item.title === option.value)
+          if (!row?.run) return
+          void row.run()
+        }}
+      />
+    ))
+  })
+}

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "Preserve",
+    "moduleResolution": "bundler",
+    "lib": ["ESNext"],
+    "jsx": "preserve",
+    "jsxImportSource": "@opentui/solid",
+    "types": ["node"],
+    "strict": true,
+    "noUncheckedIndexedAccess": false,
+    "skipLibCheck": true,
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
+    "verbatimModuleSyntax": true
+  },
+  "include": ["src"]
+}