opencode-system-metrics-tui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 HexaRevenant
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,246 @@
+# OpenCode System Metrics TUI
+
+OpenCode TUI plugin that adds live CPU, RAM, GPU, GPU VRAM, temperature, and network metrics to the `sidebar_content` slot.
+
+The README is available in **Español**, **English**, and **Português**.
+
+---
+
+## Español
+
+### Características
+
+- CPU: utilización y temperatura.
+- RAM: memoria usada, total y porcentaje.
+- GPU: utilización y temperatura.
+- GPU VRAM: memoria usada, total y porcentaje.
+- Red: velocidad de descarga y subida en tiempo real.
+- Actualización cada 2 segundos.
+- Colores compatibles con el tema activo de OpenCode.
+- Iconos Hack Nerd Font con fallback Unicode.
+- Soporte para Linux, macOS y Windows cuando el sistema expone las métricas.
+
+### Requisitos
+
+- OpenCode `1.18.29` o posterior con soporte para plugins TUI.
+- Node.js 18 o superior.
+- Bun para compilar el plugin.
+
+### Instalación local
+
+```bash
+npm install
+npm run build
+npm run install-font
+opencode
+```
+
+`npm run install-font` instala **Hack Nerd Font** únicamente para el usuario actual. No se ejecuta automáticamente durante `npm install` y solicita confirmación antes de descargar la fuente oficial.
+
+Comandos adicionales:
+
+```bash
+npm run install-font -- --check  # comprobar sin descargar
+npm run install-font -- --yes    # instalar sin confirmación interactiva
+```
+
+### Hack Nerd Font
+
+Se recomienda seleccionar **Hack Nerd Font Mono** en la configuración de la terminal. El instalador utiliza la distribución oficial de [Nerd Fonts](https://www.nerdfonts.com/) y descarga los archivos desde el [repositorio oficial de Hack](https://github.com/ryanoasis/nerd-fonts/tree/master/patched-fonts/Hack).
+
+La fuente se instala solo para el usuario actual:
+
+- Linux: `~/.local/share/fonts`
+- macOS: `~/Library/Fonts`
+- Windows: `%LOCALAPPDATA%\\Microsoft\\Windows\\Fonts`
+
+Después de instalarla, selecciona **Hack Nerd Font Mono** en la terminal y reinicia la terminal y OpenCode. Si no se selecciona una Nerd Font, el plugin usa iconos Unicode de fallback.
+
+### Publicación e instalación desde npm
+
+Antes de publicar, cambia el nombre del paquete en `package.json` por un nombre disponible en tu cuenta u organización npm:
+
+```bash
+npm run build
+npm publish --access public
+```
+
+En otro equipo:
+
+```bash
+opencode plugin opencode-system-metrics-tui
+```
+
+El instalador de OpenCode configura el plugin TUI automáticamente. Reinicia OpenCode después de instalarlo.
+
+### Verificación
+
+```bash
+npm test
+npm run typecheck
+npm run build
+```
+
+---
+
+## English
+
+### Features
+
+- CPU: utilization and temperature.
+- RAM: used memory, total memory, and percentage.
+- GPU: utilization and temperature.
+- GPU VRAM: used memory, total memory, and percentage.
+- Network: live download and upload speeds.
+- Refreshes every 2 seconds.
+- Uses the active OpenCode theme colors.
+- Hack Nerd Font icons with Unicode fallback.
+- Supports Linux, macOS, and Windows when the operating system exposes the metrics.
+
+### Requirements
+
+- OpenCode `1.18.29` or newer with TUI plugin support.
+- Node.js 18 or newer.
+- Bun to build the plugin.
+
+### Local installation
+
+```bash
+npm install
+npm run build
+npm run install-font
+opencode
+```
+
+`npm run install-font` installs **Hack Nerd Font** for the current user only. It is not executed automatically by `npm install` and asks for confirmation before downloading the official font.
+
+Extra commands:
+
+```bash
+npm run install-font -- --check  # check without downloading
+npm run install-font -- --yes    # install without an interactive prompt
+```
+
+### Hack Nerd Font
+
+Select **Hack Nerd Font Mono** in your terminal settings. The installer uses the official [Nerd Fonts](https://www.nerdfonts.com/) distribution and downloads files from the [official Hack repository](https://github.com/ryanoasis/nerd-fonts/tree/master/patched-fonts/Hack).
+
+The font is installed for the current user only:
+
+- Linux: `~/.local/share/fonts`
+- macOS: `~/Library/Fonts`
+- Windows: `%LOCALAPPDATA%\\Microsoft\\Windows\\Fonts`
+
+After installation, select **Hack Nerd Font Mono** in the terminal and restart the terminal and OpenCode. If a Nerd Font is not selected, the plugin uses Unicode fallback icons.
+
+### Publishing and npm installation
+
+Before publishing, change the package name in `package.json` to a name available in your npm account or organization:
+
+```bash
+npm run build
+npm publish --access public
+```
+
+On another machine:
+
+```bash
+opencode plugin opencode-system-metrics-tui
+```
+
+The OpenCode installer configures the TUI plugin automatically. Restart OpenCode after installation.
+
+### Verification
+
+```bash
+npm test
+npm run typecheck
+npm run build
+```
+
+---
+
+## Português
+
+### Funcionalidades
+
+- CPU: utilização e temperatura.
+- RAM: memória usada, total e porcentagem.
+- GPU: utilização e temperatura.
+- GPU VRAM: memória usada, total e porcentagem.
+- Rede: velocidades de download e upload em tempo real.
+- Atualização a cada 2 segundos.
+- Usa as cores do tema ativo do OpenCode.
+- Ícones Hack Nerd Font com fallback Unicode.
+- Suporte para Linux, macOS e Windows quando o sistema disponibiliza as métricas.
+
+### Requisitos
+
+- OpenCode `1.18.29` ou posterior com suporte a plugins TUI.
+- Node.js 18 ou superior.
+- Bun para compilar o plugin.
+
+### Instalação local
+
+```bash
+npm install
+npm run build
+npm run install-font
+opencode
+```
+
+`npm run install-font` instala a **Hack Nerd Font** somente para o usuário atual. O comando não é executado automaticamente durante `npm install` e pede confirmação antes de baixar a fonte oficial.
+
+Comandos adicionais:
+
+```bash
+npm run install-font -- --check  # verificar sem baixar
+npm run install-font -- --yes    # instalar sem confirmação interativa
+```
+
+### Hack Nerd Font
+
+Selecione **Hack Nerd Font Mono** nas configurações do terminal. O instalador usa a distribuição oficial da [Nerd Fonts](https://www.nerdfonts.com/) e baixa os arquivos do [repositório oficial da Hack](https://github.com/ryanoasis/nerd-fonts/tree/master/patched-fonts/Hack).
+
+A fonte é instalada somente para o usuário atual:
+
+- Linux: `~/.local/share/fonts`
+- macOS: `~/Library/Fonts`
+- Windows: `%LOCALAPPDATA%\\Microsoft\\Windows\\Fonts`
+
+Depois da instalação, selecione **Hack Nerd Font Mono** no terminal e reinicie o terminal e o OpenCode. Se uma Nerd Font não estiver selecionada, o plugin usará ícones Unicode de fallback.
+
+### Publicação e instalação pelo npm
+
+Antes de publicar, altere o nome do pacote em `package.json` para um nome disponível na sua conta ou organização npm:
+
+```bash
+npm run build
+npm publish --access public
+```
+
+Em outro computador:
+
+```bash
+opencode plugin opencode-system-metrics-tui
+```
+
+O instalador do OpenCode configura o plugin TUI automaticamente. Reinicie o OpenCode após a instalação.
+
+### Verificação
+
+```bash
+npm test
+npm run typecheck
+npm run build
+```
+
+---
+
+## License
+
+This plugin is released under the [MIT License](LICENSE). The Hack Nerd Font files are third-party assets; see the [official Hack Nerd Fonts repository](https://github.com/ryanoasis/nerd-fonts/tree/master/patched-fonts/Hack) for their applicable license and notices.
+
+Este plugin está publicado bajo la [licencia MIT](LICENSE). Los archivos Hack Nerd Font son recursos de terceros; consulta el [repositorio oficial](https://github.com/ryanoasis/nerd-fonts/tree/master/patched-fonts/Hack) para conocer su licencia y avisos.
+
+Este plugin é distribuído sob a [licença MIT](LICENSE). Os arquivos Hack Nerd Font são recursos de terceiros; consulte o [repositório oficial](https://github.com/ryanoasis/nerd-fonts/tree/master/patched-fonts/Hack) para obter a licença e os avisos aplicáveis.

package/dist/tui.d.ts

@@ -0,0 +1,7 @@
+import { TuiPluginModule } from '@opencode-ai/plugin/tui';
+
+declare const plugin: TuiPluginModule & {
+    id: string;
+};
+
+export { plugin as default };

package/dist/tui.js

@@ -0,0 +1,381 @@
+// @bun
+// src/tui.tsx
+import { createComponent as _$createComponent } from "@opentui/solid";
+import { effect as _$effect } from "@opentui/solid";
+import { createTextNode as _$createTextNode } from "@opentui/solid";
+import { insertNode as _$insertNode } from "@opentui/solid";
+import { insert as _$insert } from "@opentui/solid";
+import { setProp as _$setProp } from "@opentui/solid";
+import { createElement as _$createElement } from "@opentui/solid";
+import { createSignal, onCleanup, onMount } from "solid-js";
+import { TextAttributes } from "@opentui/core";
+
+// src/format.ts
+var BYTES_PER_GIB = 1024 ** 3;
+function formatPercent(value) {
+  return value === null || !Number.isFinite(value) ? "\u2014" : `${Math.round(value)}%`;
+}
+function formatTemperature(value) {
+  return value === null || !Number.isFinite(value) ? "\u2014" : `${Math.round(value)}\xB0C`;
+}
+function formatGiB(bytes) {
+  if (bytes === null || !Number.isFinite(bytes))
+    return "\u2014";
+  return `${(bytes / BYTES_PER_GIB).toFixed(1)} GiB`;
+}
+function formatRate(bytesPerSecond) {
+  if (bytesPerSecond === null || !Number.isFinite(bytesPerSecond))
+    return "\u2014";
+  const units = ["B/s", "KiB/s", "MiB/s", "GiB/s"];
+  let value = Math.max(0, bytesPerSecond);
+  let unit = 0;
+  while (value >= 1024 && unit < units.length - 1) {
+    value /= 1024;
+    unit += 1;
+  }
+  return `${value < 10 && unit > 0 ? value.toFixed(1) : Math.round(value)} ${units[unit]}`;
+}
+
+// src/metrics.ts
+import si from "systeminformation";
+var previousNetwork;
+var unavailable = {
+  cpuPercent: null,
+  memoryUsedBytes: null,
+  memoryTotalBytes: null,
+  memoryPercent: null,
+  gpuPercent: null,
+  cpuTemperatureCelsius: null,
+  gpuTemperatureCelsius: null,
+  gpuMemoryUsedBytes: null,
+  gpuMemoryTotalBytes: null,
+  gpuMemoryPercent: null,
+  downloadBytesPerSecond: null,
+  uploadBytesPerSecond: null
+};
+function finite(value) {
+  return typeof value === "number" && Number.isFinite(value) ? value : null;
+}
+async function withTimeout(promise, timeoutMs) {
+  let timeout;
+  try {
+    return await Promise.race([
+      promise,
+      new Promise((_, reject) => {
+        timeout = setTimeout(() => reject(new Error("metric timeout")), timeoutMs);
+      })
+    ]);
+  } finally {
+    if (timeout !== undefined)
+      clearTimeout(timeout);
+  }
+}
+async function readMetrics() {
+  const [load, memory] = await Promise.allSettled([
+    si.currentLoad(),
+    si.mem()
+  ]);
+  const [temperature, graphics, network] = await Promise.allSettled([
+    withTimeout(si.cpuTemperature(), 1500),
+    withTimeout(si.graphics(), 1500),
+    withTimeout(si.networkStats("*"), 1500)
+  ]);
+  const cpuPercent = load.status === "fulfilled" ? finite(load.value.currentLoad) : null;
+  const memoryTotalBytes = memory.status === "fulfilled" ? finite(memory.value.total) : null;
+  const memoryAvailableBytes = memory.status === "fulfilled" ? finite(memory.value.available) : null;
+  const memoryUsedBytes = memoryTotalBytes !== null && memoryAvailableBytes !== null ? Math.max(0, memoryTotalBytes - memoryAvailableBytes) : memory.status === "fulfilled" ? finite(memory.value.used) : null;
+  const memoryPercent = memoryUsedBytes !== null && memoryTotalBytes !== null && memoryTotalBytes > 0 ? memoryUsedBytes / memoryTotalBytes * 100 : null;
+  let gpuPercent = null;
+  let gpuTemperatureCelsius = null;
+  let gpuMemoryUsedBytes = null;
+  let gpuMemoryTotalBytes = null;
+  let gpuMemoryPercent = null;
+  if (graphics.status === "fulfilled") {
+    const controller = graphics.value.controllers.map((item) => {
+      const utilization = finite(item.utilizationGpu);
+      const temperature = finite(item.temperatureGpu);
+      const memoryUsed = finite(item.memoryUsed);
+      const memoryTotal = finite(item.memoryTotal);
+      const hasMemory = memoryUsed !== null && memoryTotal !== null && memoryTotal > 0;
+      return { item, utilization, temperature, memoryUsed, memoryTotal, hasMemory };
+    }).filter(({ utilization, temperature, hasMemory }) => utilization !== null || temperature !== null || hasMemory).sort((left, right) => {
+      const score = (value) => (value.hasMemory ? 2 : 0) + (value.utilization !== null ? 1 : 0);
+      const scoreDifference = score(right) - score(left);
+      if (scoreDifference !== 0)
+        return scoreDifference;
+      return (right.utilization ?? -Infinity) - (left.utilization ?? -Infinity);
+    })[0];
+    if (controller !== undefined) {
+      gpuPercent = controller.utilization ?? (controller.hasMemory ? 0 : null);
+      gpuTemperatureCelsius = controller.temperature;
+      if (controller.hasMemory) {
+        gpuMemoryUsedBytes = controller.memoryUsed * 1024 ** 2;
+        gpuMemoryTotalBytes = controller.memoryTotal * 1024 ** 2;
+        gpuMemoryPercent = controller.memoryUsed / controller.memoryTotal * 100;
+      }
+    }
+  }
+  let downloadBytesPerSecond = null;
+  let uploadBytesPerSecond = null;
+  if (network.status === "fulfilled") {
+    const samples = network.value;
+    const timestamp = Date.now();
+    const rx = samples.reduce((total, item) => total + (finite(item.rx_bytes) ?? 0), 0);
+    const tx = samples.reduce((total, item) => total + (finite(item.tx_bytes) ?? 0), 0);
+    if (previousNetwork !== undefined) {
+      const seconds = Math.max((timestamp - previousNetwork.timestamp) / 1000, 0.001);
+      downloadBytesPerSecond = Math.max(0, rx - previousNetwork.rx) / seconds;
+      uploadBytesPerSecond = Math.max(0, tx - previousNetwork.tx) / seconds;
+    }
+    previousNetwork = { timestamp, rx, tx };
+  }
+  return {
+    ...unavailable,
+    cpuPercent,
+    memoryUsedBytes,
+    memoryTotalBytes,
+    memoryPercent,
+    gpuPercent,
+    cpuTemperatureCelsius: temperature.status === "fulfilled" ? finite(temperature.value.main) ?? finite(temperature.value.max) : null,
+    gpuTemperatureCelsius,
+    gpuMemoryUsedBytes,
+    gpuMemoryTotalBytes,
+    gpuMemoryPercent,
+    downloadBytesPerSecond,
+    uploadBytesPerSecond
+  };
+}
+
+// src/font.ts
+import { existsSync, readdirSync } from "fs";
+import { homedir } from "os";
+import { join as posixJoin, win32 } from "path";
+var FONT_FILE_PATTERN = /^HackNerdFont(?:Mono|Propo|Console)?-[A-Za-z0-9-]+\.(?:ttf|otf)$/i;
+function getFontDirectories(platform, home = homedir(), env = process.env) {
+  if (platform === "darwin")
+    return [posixJoin(home, "Library", "Fonts"), "/Library/Fonts", "/System/Library/Fonts"];
+  if (platform === "win32") {
+    const localAppData = env.LOCALAPPDATA ?? win32.join(home, "AppData", "Local");
+    const windows = env.WINDIR ?? "C:\\Windows";
+    return [win32.join(localAppData, "Microsoft", "Windows", "Fonts"), win32.join(windows, "Fonts")];
+  }
+  return [posixJoin(home, ".local", "share", "fonts"), posixJoin(home, ".fonts"), "/usr/local/share/fonts", "/usr/share/fonts"];
+}
+function isHackNerdFontFile(fileName) {
+  return FONT_FILE_PATTERN.test(fileName);
+}
+function hasHackNerdFont(platform = process.platform, home = homedir(), env = process.env) {
+  const containsFont = (directory) => {
+    if (!existsSync(directory))
+      return false;
+    try {
+      return readdirSync(directory, { withFileTypes: true }).some((entry) => {
+        const path = platform === "win32" ? win32.join(directory, entry.name) : posixJoin(directory, entry.name);
+        return entry.isFile() ? isHackNerdFontFile(entry.name) : entry.isDirectory() && containsFont(path);
+      });
+    } catch {
+      return false;
+    }
+  };
+  return getFontDirectories(platform, home, env).some(containsFont);
+}
+var nerdFontIcons = {
+  title: "\uDB80\uDF79",
+  cpu: "\uDB83\uDEE0",
+  ram: "\uDB81\uDE1A",
+  gpu: "\uDB82\uDCAE",
+  vram: "\uDB80\uDF5B",
+  thermometer: "\uF2C7",
+  network: "\uDB81\uDEF3"
+};
+var unicodeIcons = { title: "\u25A6", cpu: "\u25A3", ram: "\u25A4", gpu: "\u25C6", vram: "\u25C8", thermometer: "\u2668", network: "\u21C5" };
+function getMetricIcons(useNerdFont) {
+  return useNerdFont ? nerdFontIcons : unicodeIcons;
+}
+
+// src/tui.tsx
+var REFRESH_INTERVAL_MS = 2000;
+var icons = getMetricIcons(hasHackNerdFont());
+function systemMetricsTitle() {
+  const locale = process.env.LC_ALL ?? process.env.LANGUAGE?.split(":")[0] ?? process.env.LANG ?? Intl.DateTimeFormat().resolvedOptions().locale;
+  const language = locale.split(/[-_.]/)[0].toLowerCase();
+  return {
+    de: "Systemmetriken",
+    es: "M\xE9tricas del sistema",
+    fr: "M\xE9triques syst\xE8me",
+    it: "Metriche di sistema",
+    pt: "M\xE9tricas do sistema"
+  }[language] ?? "System metrics";
+}
+function MetricsPanel(props) {
+  const [metrics, setMetrics] = createSignal({
+    cpuPercent: null,
+    memoryUsedBytes: null,
+    memoryTotalBytes: null,
+    memoryPercent: null,
+    gpuPercent: null,
+    cpuTemperatureCelsius: null,
+    gpuTemperatureCelsius: null,
+    gpuMemoryUsedBytes: null,
+    gpuMemoryTotalBytes: null,
+    gpuMemoryPercent: null,
+    downloadBytesPerSecond: null,
+    uploadBytesPerSecond: null
+  });
+  let refreshing = false;
+  const refresh = async () => {
+    if (refreshing)
+      return;
+    refreshing = true;
+    try {
+      setMetrics(await readMetrics());
+    } finally {
+      refreshing = false;
+    }
+  };
+  let timer;
+  onMount(() => {
+    refresh();
+    timer = setInterval(() => void refresh(), REFRESH_INTERVAL_MS);
+  });
+  onCleanup(() => {
+    if (timer !== undefined)
+      clearInterval(timer);
+  });
+  return (() => {
+    var _el$ = _$createElement("box"), _el$2 = _$createElement("text"), _el$3 = _$createTextNode(` `), _el$4 = _$createElement("box"), _el$5 = _$createElement("text"), _el$6 = _$createElement("text"), _el$8 = _$createElement("text"), _el$9 = _$createTextNode(` \xB7 `), _el$0 = _$createTextNode(` `), _el$1 = _$createElement("box"), _el$10 = _$createElement("text"), _el$11 = _$createElement("text"), _el$13 = _$createElement("text"), _el$14 = _$createTextNode(` / `), _el$15 = _$createTextNode(` (`), _el$16 = _$createTextNode(`)`), _el$17 = _$createElement("box"), _el$18 = _$createElement("text"), _el$19 = _$createElement("text"), _el$21 = _$createElement("text"), _el$22 = _$createTextNode(` \xB7 `), _el$23 = _$createTextNode(` `), _el$24 = _$createElement("box"), _el$25 = _$createElement("text"), _el$26 = _$createElement("text"), _el$28 = _$createElement("text"), _el$29 = _$createTextNode(` / `), _el$30 = _$createTextNode(` (`), _el$31 = _$createTextNode(`)`), _el$32 = _$createElement("box"), _el$33 = _$createElement("text"), _el$34 = _$createElement("text"), _el$36 = _$createElement("text"), _el$37 = _$createTextNode(`\u2193 `), _el$38 = _$createTextNode(` \u2191 `);
+    _$insertNode(_el$, _el$2);
+    _$insertNode(_el$, _el$4);
+    _$insertNode(_el$, _el$1);
+    _$insertNode(_el$, _el$17);
+    _$insertNode(_el$, _el$24);
+    _$insertNode(_el$, _el$32);
+    _$setProp(_el$, "flexDirection", "column");
+    _$setProp(_el$, "paddingLeft", 0);
+    _$setProp(_el$, "paddingRight", 0);
+    _$insertNode(_el$2, _el$3);
+    _$insert(_el$2, () => icons.title, _el$3);
+    _$insert(_el$2, systemMetricsTitle, null);
+    _$insertNode(_el$4, _el$5);
+    _$insertNode(_el$4, _el$6);
+    _$insertNode(_el$4, _el$8);
+    _$setProp(_el$4, "flexDirection", "row");
+    _$insert(_el$5, () => icons.cpu);
+    _$insertNode(_el$6, _$createTextNode(` CPU `));
+    _$insertNode(_el$8, _el$9);
+    _$insertNode(_el$8, _el$0);
+    _$insert(_el$8, () => formatPercent(metrics().cpuPercent), _el$9);
+    _$insert(_el$8, () => icons.thermometer, _el$0);
+    _$insert(_el$8, () => formatTemperature(metrics().cpuTemperatureCelsius), null);
+    _$insertNode(_el$1, _el$10);
+    _$insertNode(_el$1, _el$11);
+    _$insertNode(_el$1, _el$13);
+    _$setProp(_el$1, "flexDirection", "row");
+    _$insert(_el$10, () => icons.ram);
+    _$insertNode(_el$11, _$createTextNode(` RAM `));
+    _$insertNode(_el$13, _el$14);
+    _$insertNode(_el$13, _el$15);
+    _$insertNode(_el$13, _el$16);
+    _$insert(_el$13, () => formatGiB(metrics().memoryUsedBytes), _el$14);
+    _$insert(_el$13, () => formatGiB(metrics().memoryTotalBytes), _el$15);
+    _$insert(_el$13, () => formatPercent(metrics().memoryPercent), _el$16);
+    _$insertNode(_el$17, _el$18);
+    _$insertNode(_el$17, _el$19);
+    _$insertNode(_el$17, _el$21);
+    _$setProp(_el$17, "flexDirection", "row");
+    _$insert(_el$18, () => icons.gpu);
+    _$insertNode(_el$19, _$createTextNode(` GPU `));
+    _$insertNode(_el$21, _el$22);
+    _$insertNode(_el$21, _el$23);
+    _$insert(_el$21, () => formatPercent(metrics().gpuPercent), _el$22);
+    _$insert(_el$21, () => icons.thermometer, _el$23);
+    _$insert(_el$21, () => formatTemperature(metrics().gpuTemperatureCelsius), null);
+    _$insertNode(_el$24, _el$25);
+    _$insertNode(_el$24, _el$26);
+    _$insertNode(_el$24, _el$28);
+    _$setProp(_el$24, "flexDirection", "row");
+    _$insert(_el$25, () => icons.vram);
+    _$insertNode(_el$26, _$createTextNode(` GPU VRAM `));
+    _$insertNode(_el$28, _el$29);
+    _$insertNode(_el$28, _el$30);
+    _$insertNode(_el$28, _el$31);
+    _$insert(_el$28, () => formatGiB(metrics().gpuMemoryUsedBytes), _el$29);
+    _$insert(_el$28, () => formatGiB(metrics().gpuMemoryTotalBytes), _el$30);
+    _$insert(_el$28, () => formatPercent(metrics().gpuMemoryPercent), _el$31);
+    _$insertNode(_el$32, _el$33);
+    _$insertNode(_el$32, _el$34);
+    _$insertNode(_el$32, _el$36);
+    _$setProp(_el$32, "flexDirection", "row");
+    _$insert(_el$33, () => icons.network);
+    _$insertNode(_el$34, _$createTextNode(` NET `));
+    _$insertNode(_el$36, _el$37);
+    _$insertNode(_el$36, _el$38);
+    _$insert(_el$36, () => formatRate(metrics().downloadBytesPerSecond), _el$38);
+    _$insert(_el$36, () => formatRate(metrics().uploadBytesPerSecond), null);
+    _$effect((_p$) => {
+      var _v$ = props.theme.text, _v$2 = TextAttributes.BOLD, _v$3 = props.theme.success, _v$4 = props.theme.text, _v$5 = props.theme.textMuted, _v$6 = props.theme.success, _v$7 = props.theme.text, _v$8 = props.theme.textMuted, _v$9 = props.theme.success, _v$0 = props.theme.text, _v$1 = props.theme.textMuted, _v$10 = props.theme.success, _v$11 = props.theme.text, _v$12 = props.theme.textMuted, _v$13 = props.theme.success, _v$14 = props.theme.text, _v$15 = props.theme.textMuted;
+      _v$ !== _p$.e && (_p$.e = _$setProp(_el$2, "fg", _v$, _p$.e));
+      _v$2 !== _p$.t && (_p$.t = _$setProp(_el$2, "attributes", _v$2, _p$.t));
+      _v$3 !== _p$.a && (_p$.a = _$setProp(_el$5, "fg", _v$3, _p$.a));
+      _v$4 !== _p$.o && (_p$.o = _$setProp(_el$6, "fg", _v$4, _p$.o));
+      _v$5 !== _p$.i && (_p$.i = _$setProp(_el$8, "fg", _v$5, _p$.i));
+      _v$6 !== _p$.n && (_p$.n = _$setProp(_el$10, "fg", _v$6, _p$.n));
+      _v$7 !== _p$.s && (_p$.s = _$setProp(_el$11, "fg", _v$7, _p$.s));
+      _v$8 !== _p$.h && (_p$.h = _$setProp(_el$13, "fg", _v$8, _p$.h));
+      _v$9 !== _p$.r && (_p$.r = _$setProp(_el$18, "fg", _v$9, _p$.r));
+      _v$0 !== _p$.d && (_p$.d = _$setProp(_el$19, "fg", _v$0, _p$.d));
+      _v$1 !== _p$.l && (_p$.l = _$setProp(_el$21, "fg", _v$1, _p$.l));
+      _v$10 !== _p$.u && (_p$.u = _$setProp(_el$25, "fg", _v$10, _p$.u));
+      _v$11 !== _p$.c && (_p$.c = _$setProp(_el$26, "fg", _v$11, _p$.c));
+      _v$12 !== _p$.w && (_p$.w = _$setProp(_el$28, "fg", _v$12, _p$.w));
+      _v$13 !== _p$.m && (_p$.m = _$setProp(_el$33, "fg", _v$13, _p$.m));
+      _v$14 !== _p$.f && (_p$.f = _$setProp(_el$34, "fg", _v$14, _p$.f));
+      _v$15 !== _p$.y && (_p$.y = _$setProp(_el$36, "fg", _v$15, _p$.y));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined,
+      n: undefined,
+      s: undefined,
+      h: undefined,
+      r: undefined,
+      d: undefined,
+      l: undefined,
+      u: undefined,
+      c: undefined,
+      w: undefined,
+      m: undefined,
+      f: undefined,
+      y: undefined
+    });
+    return _el$;
+  })();
+}
+var tui = async (api, options) => {
+  if (options?.enabled === false)
+    return;
+  api.slots.register({
+    order: 250,
+    slots: {
+      sidebar_content(_context, props) {
+        props.session_id;
+        return _$createComponent(MetricsPanel, {
+          get theme() {
+            return _context.theme.current;
+          }
+        });
+      }
+    }
+  });
+};
+var plugin = {
+  id: "opencode-monitor.system-metrics",
+  tui
+};
+var tui_default = plugin;
+export {
+  tui_default as default
+};

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "opencode-system-metrics-tui",
+  "version": "0.1.0",
+  "description": "OpenCode TUI sidebar plugin for live system metrics",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    "./tui": {
+      "types": "./dist/tui.d.ts",
+      "import": "./dist/tui.js"
+    }
+  },
+  "files": [
+    "dist",
+    "scripts",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "bun scripts/build.ts && tsc --emitDeclarationOnly --declaration --outDir dist",
+    "test": "tsx --test test/format.test.ts",
+    "typecheck": "tsc --noEmit",
+    "install-font": "tsx scripts/install-hack-font.ts"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "@opentui/core": "^0.5.10",
+    "@opentui/solid": "^0.5.10",
+    "solid-js": "^1.9.12",
+    "systeminformation": "^5.33.8"
+  },
+  "devDependencies": {
+    "@opencode-ai/plugin": "^1.18.29",
+    "@types/node": "^22.10.5",
+    "tsx": "^4.19.2",
+    "typescript": "^5.7.3"
+  }
+}

package/scripts/build.ts

@@ -0,0 +1,16 @@
+import solidPlugin from "@opentui/solid/bun-plugin"
+
+const result = await Bun.build({
+  entrypoints: ["src/tui.tsx"],
+  outdir: "dist",
+  target: "bun",
+  format: "esm",
+  plugins: [solidPlugin],
+  external: ["@opencode-ai/plugin/tui", "@opentui/core", "@opentui/solid", "solid-js", "systeminformation"],
+  naming: "tui.js",
+})
+
+if (!result.success) {
+  console.error(result.logs)
+  process.exit(1)
+}

package/scripts/install-hack-font.ts

@@ -0,0 +1,90 @@
+import { cp, mkdir, mkdtemp, readdir, rm, writeFile } from "node:fs/promises"
+import { homedir, tmpdir } from "node:os"
+import { basename, join } from "node:path"
+import { execFile as execFileCallback } from "node:child_process"
+import { promisify } from "node:util"
+import { getFontDirectories, hasHackNerdFont, isHackNerdFontFile, type SupportedPlatform } from "../src/font.js"
+
+const execFile = promisify(execFileCallback)
+const RELEASE_URL = "https://github.com/ryanoasis/nerd-fonts/releases/download/v3.4.0/Hack.zip"
+
+function printHelp(): void {
+  console.log(`Install Hack Nerd Font for the current user.
+
+Usage:
+  npm run install-font          Ask before downloading and installing
+  npm run install-font --check  Detect only; never downloads or changes files
+  npm run install-font --help   Show this help
+  npm run install-font --yes    Skip the download confirmation`)
+}
+
+async function confirm(): Promise<boolean> {
+  if (!process.stdin.isTTY) return false
+  process.stdout.write("Download Hack Nerd Font from the official Nerd Fonts release? [y/N] ")
+  for await (const chunk of process.stdin) return /^y(es)?$/i.test(String(chunk).trim())
+  return false
+}
+
+async function findFontFiles(directory: string): Promise<string[]> {
+  const files: string[] = []
+  for (const entry of await readdir(directory, { withFileTypes: true })) {
+    const path = join(directory, entry.name)
+    if (entry.isDirectory()) files.push(...(await findFontFiles(path)))
+    else if (entry.isFile() && isHackNerdFontFile(entry.name)) files.push(path)
+  }
+  return files
+}
+
+async function extractZip(zipPath: string, destination: string, platform: SupportedPlatform): Promise<void> {
+  try {
+    if (platform === "win32") {
+      await execFile("powershell.exe", ["-NoProfile", "-NonInteractive", "-Command", "Expand-Archive -LiteralPath $args[0] -DestinationPath $args[1] -Force", zipPath, destination])
+    } else {
+      await execFile("unzip", ["-q", "-o", zipPath, "-d", destination])
+    }
+  } catch (error) {
+    throw new Error(`Could not extract the ZIP archive. Install unzip (Linux/macOS) or use PowerShell (Windows). ${error instanceof Error ? error.message : String(error)}`)
+  }
+}
+
+async function registerWindowsFonts(fontFiles: string[]): Promise<void> {
+  const script = "$key='HKCU:\\Software\\Microsoft\\Windows NT\\CurrentVersion\\Fonts'; New-Item -Path $key -Force | Out-Null; foreach ($font in $args) { New-ItemProperty -Path $key -Name ([IO.Path]::GetFileNameWithoutExtension($font)) -Value $font -PropertyType String -Force | Out-Null }"
+  await execFile("powershell.exe", ["-NoProfile", "-NonInteractive", "-Command", script, ...fontFiles])
+}
+
+async function install(): Promise<void> {
+  const platform = process.platform as SupportedPlatform
+  const supportedPlatforms: SupportedPlatform[] = ["linux", "darwin", "win32"]
+  if (!supportedPlatforms.includes(platform)) throw new Error(`Unsupported platform: ${process.platform}`)
+  if (hasHackNerdFont(platform)) return console.log("Hack Nerd Font is already installed; nothing to do.")
+  if (!(process.argv.includes("--yes") || (await confirm()))) return console.log("Installation cancelled. Use --yes to confirm non-interactively.")
+
+  const temporaryDirectory = await mkdtemp(join(tmpdir(), "opencode-monitor-font-"))
+  try {
+    console.log(`Downloading ${RELEASE_URL}`)
+    const response = await fetch(RELEASE_URL)
+    if (!response.ok) throw new Error(`Download failed with HTTP ${response.status} ${response.statusText}`)
+    const zipPath = join(temporaryDirectory, "Hack.zip")
+    await writeFile(zipPath, Buffer.from(await response.arrayBuffer()))
+    const extractedDirectory = join(temporaryDirectory, "extracted")
+    await mkdir(extractedDirectory)
+    await extractZip(zipPath, extractedDirectory, platform)
+    const fontFiles = await findFontFiles(extractedDirectory)
+    if (fontFiles.length === 0) throw new Error("The downloaded archive did not contain Hack Nerd Font files.")
+    const targetDirectory = getFontDirectories(platform)[0]
+    await mkdir(targetDirectory, { recursive: true })
+    const installedFiles = fontFiles.map((file) => join(targetDirectory, basename(file)))
+    for (let index = 0; index < fontFiles.length; index += 1) await cp(fontFiles[index], installedFiles[index], { force: true })
+    if (platform === "win32") {
+      try { await registerWindowsFonts(installedFiles) }
+      catch { console.warn("Fonts were copied, but Windows font registration failed. Select Hack Nerd Font in the terminal manually.") }
+    }
+    console.log(`Installed ${fontFiles.length} font files in ${targetDirectory}. Select Hack Nerd Font in your terminal and restart OpenCode.`)
+  } finally {
+    await rm(temporaryDirectory, { recursive: true, force: true })
+  }
+}
+
+if (process.argv.includes("--help")) printHelp()
+else if (process.argv.includes("--check")) console.log(hasHackNerdFont() ? "Hack Nerd Font is installed." : "Hack Nerd Font is not installed.")
+else install().catch((error: unknown) => { console.error(`Hack Nerd Font installation could not be completed: ${error instanceof Error ? error.message : String(error)}`); process.exitCode = 1 })