@soyjuanpiece/jpcode 1.0.1 → 2.0.1

package/README.md

@@ -1,11 +1,13 @@
-# JpCode
+# JpCode v2
 
-**JpCode** es la CLI de [opencode](https://opencode.ai) con identidad visual propia:
-banner JPCODE, tema oscuro estilo Claude, y comandos extra. No es un fork: el motor
-es opencode real (siempre actualizado), este paquete solo cambia cómo se ve y añade
-funciones. Por eso el free tier y todos los providers funcionan normal.
+**JpCode** es un CLI propio con diseño inspirado en Claude Code, potenciado
+nativamente por el motor de [opencode](https://opencode.ai): tu interfaz, su
+inteligencia.
 
-![jpcode](https://img.shields.io/badge/CLI-JpCode-blueviolet) ![npm](https://img.shields.io/npm/v/@soyjuanpiece/jpcode)
+A diferencia de la v1 (que era un tema sobre el TUI de opencode), la v2 es un
+**cliente independiente**: lanza el motor opencode como backend local y le habla
+por su API/SDK oficial. Sin `tui.json`, sin parches — funciona igual en Windows,
+macOS y Linux.
 
 ## Instalación
 
@@ -13,32 +15,40 @@ funciones. Por eso el free tier y todos los providers funcionan normal.
 npm install -g @soyjuanpiece/jpcode
 ```
 
-Después corre:
+## Uso
 
 ```bash
-jpcode
+jpcode                  # REPL interactivo
+jpcode "explica esto"   # respuesta one-shot
+jpcode --version
 ```
 
-El comando `jpcode` queda disponible globalmente (los paquetes con scope instalan
-sus bins sin el prefijo `@scope/`). También puedes seguir invocando `opencode`
-directamente: el plugin y el tema quedan registrados en tu `tui.json`.
+Comandos dentro del REPL:
 
-## Qué añade sobre opencode
+- `/new` — sesión nueva
+- `/clear` — limpiar pantalla
+- `/help` — ayuda
+- `/exit` — salir
 
-- **Banner JPCODE** — wordmark de 6 filas con gradiente vertical + panel de info
-  (versión, modelo, directorio).
-- **Layout apilado** — en terminales estrechas (<80 columnas) el wordmark pasa
-  encima del panel en vez de ocultarse; <100 columnas se oculta el hint de `/model`.
-- **Tema `claude`** — tema oscuro de alto contraste incluido.
-- **`/cost`** — coste y tokens agregados (sesión actual o todas): total, input,
-  output, reasoning, cache read/write, duración y número de sesiones.
-- **`/memory`** — vista con preview de `AGENTS.md` y `CLAUDE.md` del proyecto.
+## Requisitos
 
-## Actualizaciones
+El motor opencode se instala automáticamente como dependencia (npm `opencode-ai`).
+También funciona si ya lo tienes global. La sesión usa tus providers configurados
+en opencode (`opencode.json` / `~/.config/opencode/`), incluyendo el free tier de
+OpenCode Zen con `OPENCODE_API_KEY=public`.
 
-Como el motor es opencode real, `opencode upgrade` (o reinstalar este paquete)
-actualiza todo sin perder tu diseño ni tus comandos.
+## Arquitectura
+
+```
+┌──────────────────┐    SDK/HTTP nativo    ┌──────────────────┐
+│   jpcode CLI     │ ────────────────────▶ │  motor opencode  │──▶ providers
+│  (tu diseño)     │ ◀──────────────────── │  (server local)  │    (zen, etc.)
+└──────────────────┘      eventos SSE      └──────────────────┘
+```
+
+- Interfaz: 100% jpcode (banner, prompt, streaming de texto)
+- Motor: 100% opencode (sesiones, tools, providers, free tier)
 
 ## Licencia
 
-MIT — opencode es MIT y este paquete también.
+MIT

package/bin/jpcode.mjs

@@ -1,88 +1,299 @@
 #!/usr/bin/env node
-// JpCode launcher: asegura que el plugin/tema estén registrados y executa el
-// motor opencode (instalado como dependencia de este paquete).
-import { createRequire } from "node:module"
-import { existsSync } from "node:fs"
-import { spawnSync } from "node:child_process"
+// JpCode v2 — CLI propio con diseño estilo Claude Code.
+// Motor: opencode real, arrancado como backend local y consumido por SDK nativo.
+import readline from "node:readline"
+import { spawn, spawnSync } from "node:child_process"
 import path from "node:path"
 import os from "node:os"
+import { existsSync } from "node:fs"
 import { fileURLToPath } from "node:url"
+import { createOpencodeClient } from "@opencode-ai/sdk"
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+// ---------------------------------------------------------------------------
+// Branding
+// ---------------------------------------------------------------------------
+
+const C = {
+  accent: (s) => `\x1b[38;5;214m${s}\x1b[0m`, // naranja Claude
+  dim: (s) => `\x1b[2m${s}\x1b[0m`,
+  bold: (s) => `\x1b[1m${s}\x1b[0m`,
+  green: (s) => `\x1b[32m${s}\x1b[0m`,
+  red: (s) => `\x1b[31m${s}\x1b[0m`,
+  cyan: (s) => `\x1b[36m${s}\x1b[0m`,
+}
 
-const require = createRequire(import.meta.url)
-const pkgRoot = path.dirname(path.dirname(fileURLToPath(import.meta.url)))
-const pluginDir = path.join(pkgRoot, "plugin")
+const BANNER = [
+  "     ▄▄ ▄▄▄▄▄▄   ▄▄▄▄▄▄  ▄▄▄▄▄▄  ▄▄▄▄▄▄▄",
+  "     ██║██╔══██╗██╔════╝██╔═══██╗██╔══██╗██╔════╝",
+  "     ██║██████╔╝██║     ██║   ██║██║  ██║█████╗",
+  "██   ██║██╔═══╝ ██║     ██║   ██║██║  ██║██╔══╝",
+  "╚█████╔╝██║     ╚██████╔╝██████╔╝██████╔╝███████╗",
+  " ╚════╝ ╚═╝      ╚═════╝ ╚═════╝ ╚═════╝ ╚══════╝",
+]
 
-function packageDir() {
+function printBanner(sub) {
+  console.log("")
+  for (const [i, line] of BANNER.entries()) {
+    console.log(C.accent(line) + C.dim(i === 1 ? `   >_ JpCode ${sub ?? ""}` : ""))
+  }
+  console.log("")
+}
+
+// ---------------------------------------------------------------------------
+// Motor opencode como backend
+// ---------------------------------------------------------------------------
+
+async function findEngineBinary() {
+  // 1) junto a este paquete (dependencia npm opencode-ai)
   try {
-    return path.dirname(require.resolve("opencode-ai/package.json"))
-  } catch {
-    return null
+    const req = (await import("node:module")).createRequire(import.meta.url)
+    const pkgDir = path.dirname(req.resolve("opencode-ai/package.json"))
+    const exe = process.platform === "win32" ? "opencode.exe" : "opencode"
+    const p = path.join(pkgDir, "bin", exe)
+    if (existsSync(p)) return p
+  } catch {}
+  // 2) binario global en PATH
+  const which = spawnSync(process.platform === "win32" ? "where" : "which", ["opencode"], { encoding: "utf8" })
+  if (which.status === 0 && which.stdout.trim().split(/\r?\n/)[0]) return which.stdout.trim().split(/\r?\n/)[0]
+  return null
+}
+
+async function startEngine() {
+  const bin = await findEngineBinary()
+  if (!bin) {
+    console.error(C.red("✗ No encontré el motor opencode."))
+    console.error("  Instálalo con: npm i -g opencode-ai   (o reinstala @soyjuanpiece/jpcode)")
+    process.exit(1)
+  }
+
+  const port = 14000 + Math.floor(Math.random() * 20000)
+  const child = spawn(bin, ["serve", "--port", String(port), "--hostname", "127.0.0.1"], {
+    stdio: ["ignore", "pipe", "pipe"],
+    env: { ...process.env },
+  })
+  child.stdout.on("data", () => {}) // "opencode server listening on ..."
+  child.stderr.on("data", (d) => process.env.JPCODE_DEBUG && console.error(C.dim(String(d))))
+
+  const base = `http://127.0.0.1:${port}`
+  // esperar a que responda. /global/health es un endpoint finito (los events
+  // son SSE infinitos y colgarían el fetch sin timeout).
+  for (let i = 0; i < 120; i++) {
+    try {
+      const r = await fetch(`${base}/global/health`, { signal: AbortSignal.timeout(2000) }).catch(() => null)
+      if (r?.ok) return { base, child }
+    } catch {}
+    await new Promise((r) => setTimeout(r, 250))
   }
+  console.error(C.red("✗ El motor opencode no respondió a tiempo."))
+  child.kill()
+  process.exit(1)
 }
 
-function tuiConfigPath() {
-  const base =
-    process.env.XDG_CONFIG_HOME ||
-    path.join(os.homedir(), ".config")
-  return path.join(base, "opencode", "tui.json")
+// ---------------------------------------------------------------------------
+// Cliente SDK hacia el motor
+// ---------------------------------------------------------------------------
+
+async function makeClient(base) {
+  const { createOpencodeClient } = await import("@opencode-ai/sdk")
+  return createOpencodeClient({ baseUrl: base, directory: process.cwd() })
 }
 
-// Registra el plugin embebido de JpCode en el tui.json del usuario (una vez).
-// Usa ruta absoluta plana: es el formato de path-plugin que opencode reconoce
-// en todos los OS (file:/X o file:C:\ no cumplen el check file:// del loader).
-// Limpia entradas rotas de versiones anteriores y respeta plugins del usuario.
-function ensurePluginRegistered() {
-  try {
-    const { readFileSync, writeFileSync, mkdirSync } = require("node:fs")
-    const cfgPath = tuiConfigPath()
-    let cfg = {}
-    if (existsSync(cfgPath)) {
-      cfg = JSON.parse(readFileSync(cfgPath, "utf8"))
+// ---------------------------------------------------------------------------
+// Streaming: escucha eventos del server y pinta deltas de texto
+// ---------------------------------------------------------------------------
+
+function watchEvents(base, handlers) {
+  const ctrl = new AbortController()
+  ;(async () => {
+    try {
+      const res = await fetch(`${base}/event`, { signal: ctrl.signal })
+      const reader = res.body.getReader()
+      const dec = new TextDecoder()
+      let buf = ""
+      while (true) {
+        const { done, value } = await reader.read()
+        if (done) break
+        buf += dec.decode(value, { stream: true })
+        const lines = buf.split("\n")
+        buf = lines.pop() ?? ""
+        for (const line of lines) {
+          const t = line.trim()
+          if (!t.startsWith("data:")) continue
+          try {
+            const evt = JSON.parse(t.slice(5).trim())
+            handlers.onEvent?.(evt)
+          } catch {}
+        }
+      }
+    } catch (e) {
+      if (!ctrl.signal.aborted) handlers.onError?.(e)
     }
-    const stale = new Set([
-      `file:${pluginDir}`,
-      `file:${pluginDir.replace(/\\/g, "/")}`,
-      `file://${pluginDir}`,
-      `file:///${pluginDir.replace(/\\/g, "/")}`,
-    ])
-    const plugins = (Array.isArray(cfg.plugin) ? cfg.plugin : []).filter(
-      (p) => typeof p !== "string" || !stale.has(p),
-    )
-    if (!plugins.includes(pluginDir)) plugins.push(pluginDir)
-    const next = { ...cfg, plugin: plugins }
-    if (!next.theme) next.theme = "claude"
-    mkdirSync(path.dirname(cfgPath), { recursive: true })
-    writeFileSync(cfgPath, JSON.stringify(next, null, 2) + "\n")
-  } catch {
-    // nunca bloquear el launch por un problema de config
-  }
+  })()
+  return ctrl
 }
 
-const dir = packageDir()
-const binName = process.platform === "win32" ? "opencode.exe" : "opencode"
-const candidates = dir
-  ? [path.join(dir, "bin", binName)]
-  : []
-
-let bin = candidates.find((p) => existsSync(p))
-if (!bin) {
-  // fallback: opencode en PATH (instalado por otros medios)
-  const which = spawnSync("which", ["opencode"], { encoding: "utf8" })
-  if (which.status === 0 && which.stdout.trim()) {
-    bin = which.stdout.trim()
+// ---------------------------------------------------------------------------
+// Modo interactivo
+// ---------------------------------------------------------------------------
+
+async function interactive(client, base) {
+  printBanner("v2.0.0")
+  console.log(C.dim("  motor: opencode nativo · ctrl+c para salir · /help para comandos"))
+  console.log("")
+
+  let sessionID = null
+  let busy = false
+  let currentText = ""
+  let lastRendered = 0
+
+  const events = watchEvents(base, {
+    onEvent: (evt) => {
+      const type = evt?.type
+      if (type === "message.part.updated") {
+        const part = evt.properties?.part
+        if (part?.type === "text" && part.sessionID === sessionID) {
+          currentText = part.text ?? ""
+          // render incremental: solo la última línea crece
+          const sinceLast = currentText.slice(lastRendered)
+          if (sinceLast) {
+            process.stdout.write(sinceLast)
+            lastRendered = currentText.length
+          }
+        }
+      }
+      if (type === "session.idle" && evt.properties?.sessionID === sessionID) {
+        busy = false
+      }
+    },
+  })
+
+  const rl = readline.createInterface({ input: process.stdin, output: process.stdout, prompt: C.cyan("❯ ") })
+  rl.prompt(true)
+
+  rl.on("line", async (line) => {
+    const input = line.trim()
+    if (busy) { console.log(C.dim("  (esperando respuesta del modelo…)")); rl.prompt(true); return }
+    if (!input) { rl.prompt(true); return }
+
+    // comandos
+    if (input === "/help") {
+      console.log(C.dim("  /new sesión nueva · /model ver modelo · /clear limpiar · /exit salir"))
+      rl.prompt(true)
+      return
+    }
+    if (input === "/new") {
+      sessionID = null
+      console.log(C.dim("  ✓ sesión nueva"))
+      rl.prompt(true)
+      return
+    }
+    if (input === "/clear") {
+      console.clear()
+      printBanner("v2.0.0")
+      rl.prompt(true)
+      return
+    }
+    if (input === "/exit" || input === "/quit") { cleanup(); return }
+    if (input.startsWith("/model")) {
+      console.log(C.dim("  usa el comando /models dentro del TUI de opencode o define default_model en opencode.json"))
+      rl.prompt(true)
+      return
+    }
+
+    // prompt normal
+    busy = true
+    currentText = ""
+    lastRendered = 0
+    try {
+      if (!sessionID) {
+        const s = await client.session.create()
+        sessionID = s.data?.id
+      }
+      await client.session.prompt({
+        path: { id: sessionID },
+        body: { parts: [{ type: "text", text: input }] },
+      })
+      // el texto llegó vía eventos; esperar a idle
+      await new Promise((resolve) => {
+        const iv = setInterval(() => { if (!busy) { clearInterval(iv); resolve() } }, 100)
+      })
+      console.log("")
+    } catch (e) {
+      console.log(C.red(`  ✗ ${e?.message ?? e}`))
+    }
+    busy = false
+    rl.prompt(true)
+  })
+
+  rl.on("close", () => cleanup())
+  function cleanup() {
+    events.abort()
+    try { client.child?.kill?.() } catch {}
+    try { process.kill(process.pid, "SIGTERM") } catch {}
+    process.exit(0)
   }
 }
 
-ensurePluginRegistered()
+// ---------------------------------------------------------------------------
+// Modo one-shot: jpcode "pregunta"
+// ---------------------------------------------------------------------------
 
-if (!bin) {
-  console.error("jpcode: no se encontró el motor opencode.")
-  console.error("Instálalo con: npm i -g opencode-ai  (o reinstala @soyjuanpiece/jpcode)")
-  process.exit(1)
+async function oneShot(client, base, prompt) {
+  const s = await client.session.create()
+  const sessionID = s.data?.id
+
+  let done
+  const events = watchEvents(base, {
+    onEvent: (evt) => {
+      if (evt?.type === "message.part.updated") {
+        const part = evt.properties?.part
+        if (part?.type === "text" && part.sessionID === sessionID) process.stdout.write(part.text ?? "")
+      }
+      if (evt?.type === "session.idle" && evt.properties?.sessionID === sessionID) done?.()
+    },
+  })
+
+  const idle = new Promise((resolve) => { done = resolve })
+  const response = await client.session.prompt({
+    path: { id: sessionID },
+    body: { parts: [{ type: "text", text: prompt }] },
+  })
+  // el SDK responde cuando el turno termina; los events ya pintaron el texto.
+  await Promise.race([idle, new Promise((r) => setTimeout(r, 3000))])
+  events.abort()
+  console.log("")
 }
 
-const result = spawnSync(bin, process.argv.slice(2), {
-  stdio: "inherit",
-  env: process.env,
+// ---------------------------------------------------------------------------
+// main
+// ---------------------------------------------------------------------------
+
+async function main() {
+  const args = process.argv.slice(2)
+  if (args.includes("--help") || args.includes("-h")) {
+    printBanner("v2.0.0")
+    console.log("  jpcode              REPL interactivo")
+    console.log("  jpcode \"pregunta\"   respuesta one-shot")
+    console.log("  jpcode --version    versión")
+    process.exit(0)
+  }
+  if (args.includes("--version") || args.includes("-v")) {
+    console.log("2.0.0")
+    process.exit(0)
+  }
+
+  const engine = await startEngine()
+  const client = await makeClient(engine.base)
+  client.child = engine.child
+
+  const prompt = args.filter((a) => !a.startsWith("-")).join(" ").trim()
+  if (prompt) await oneShot(client, engine.base, prompt)
+  else await interactive(client, engine.base)
+}
+
+main().catch((e) => {
+  console.error(C.red(`✗ ${e?.message ?? e}`))
+  process.exit(1)
 })
-process.exit(result.status ?? 0)

package/package.json

@@ -1,37 +1,36 @@
 {
   "name": "@soyjuanpiece/jpcode",
-  "version": "1.0.1",
-  "description": "JpCode — la CLI de opencode con identidad visual propia: banner JPCODE, tema claude, /cost, /memory y layout adaptativo. Motor opencode real, solo rediseñado por fuera.",
+  "version": "2.0.1",
+  "description": "JpCode — CLI propio con diseño estilo Claude Code, potenciado nativamente por el motor opencode. Tu interfaz, su inteligencia.",
   "type": "module",
   "license": "MIT",
   "author": "SoyJuanPiece",
-  "keywords": [
-    "opencode",
-    "opencode-plugin",
-    "jpcode",
-    "tui",
-    "cli",
-    "ai",
-    "coding-agent",
-    "terminal"
-  ],
   "bin": {
     "jpcode": "./bin/jpcode.mjs"
   },
   "files": [
     "bin/",
-    "plugin/",
+    "src/",
     "README.md",
     "LICENSE"
   ],
-  "scripts": {
-    "postinstall": "node bin/install-plugin.mjs"
-  },
   "dependencies": {
+    "@opencode-ai/sdk": "^1.18.32",
     "opencode-ai": "^1.18.32"
   },
+  "engines": {
+    "node": ">=18"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/SoyJuanPiece/jpcode.git"
-  }
+  },
+  "keywords": [
+    "jpcode",
+    "cli",
+    "ai",
+    "coding-agent",
+    "opencode",
+    "terminal"
+  ]
 }

package/bin/install-plugin.mjs

@@ -1,38 +0,0 @@
-#!/usr/bin/env node
-// Postinstall: registra el plugin JpCode en el tui.json del usuario para que
-// `opencode` también lo cargue si se invoca directamente. Idempotente.
-// Usa ruta absoluta plana (formato que el loader de opencode reconoce como
-// path-plugin en todos los OS) y limpia entradas rotas de versiones previas.
-import { existsSync, readFileSync, writeFileSync, mkdirSync } from "node:fs"
-import path from "node:path"
-import os from "node:os"
-import { fileURLToPath } from "node:url"
-
-try {
-  const base =
-    process.env.XDG_CONFIG_HOME || path.join(os.homedir(), ".config")
-  const cfgPath = path.join(base, "opencode", "tui.json")
-  let cfg = {}
-  if (existsSync(cfgPath)) {
-    cfg = JSON.parse(readFileSync(cfgPath, "utf8"))
-  }
-  const pkgRoot = path.dirname(path.dirname(fileURLToPath(import.meta.url)))
-  const pluginDir = path.join(pkgRoot, "plugin")
-  const stale = new Set([
-    `file:${pluginDir}`,
-    `file:${pluginDir.replace(/\\/g, "/")}`,
-    `file://${pluginDir}`,
-    `file:///${pluginDir.replace(/\\/g, "/")}`,
-  ])
-  const plugins = (Array.isArray(cfg.plugin) ? cfg.plugin : []).filter(
-    (p) => typeof p !== "string" || !stale.has(p),
-  )
-  if (!plugins.includes(pluginDir)) plugins.push(pluginDir)
-  const next = { ...cfg, plugin: plugins }
-  if (!next.theme) next.theme = "claude"
-  mkdirSync(path.dirname(cfgPath), { recursive: true })
-  writeFileSync(cfgPath, JSON.stringify(next, null, 2) + "\n")
-  console.log("jpcode: plugin y tema claude registrados en tui.json ✓")
-} catch {
-  // silencioso: el launcher también lo registra al arrancar
-}

package/plugin/package.json

@@ -1,21 +0,0 @@
-{
-  "name": "jpcode-plugin",
-  "version": "1.0.0",
-  "description": "Identidad visual JpCode y funciones extra para el cliente opencode: banner, tema, /cost, /memory y modo apilado en terminales estrechos.",
-  "type": "module",
-  "license": "MIT",
-  "exports": {
-    "./tui": {
-      "import": "./tui.tsx"
-    }
-  },
-  "oc-themes": [
-    "themes/*.json"
-  ],
-  "peerDependencies": {
-    "@opencode-ai/plugin": ">=1.17.0",
-    "@opentui/core": ">=0.3.4",
-    "@opentui/solid": ">=0.3.4",
-    "solid-js": ">=1.9.0"
-  }
-}

package/plugin/themes/claude.json

@@ -1,250 +0,0 @@
-{
-  "$schema": "https://opencode.ai/theme.json",
-  "defs": {
-    "claudeBg": "#262624",
-    "claudeBgPanel": "#1f1e1d",
-    "claudeBgElement": "#33322f",
-    "claudeText": "#f4f3ee",
-    "claudeTextMuted": "#9a9a94",
-    "claudeOrange": "#d97757",
-    "claudeOrangeLight": "#e8a487",
-    "claudeOrangeDark": "#bd5d3a",
-    "claudeSecondary": "#7b9bbf",
-    "claudeAccent": "#c3b7a5",
-    "claudeRed": "#e5484d",
-    "claudeOrangeWarning": "#d9a558",
-    "claudeGreen": "#5bb98b",
-    "claudeCyan": "#6ba5a0",
-    "claudeYellow": "#d9a558",
-    "claudeBorder": "#4a4a46",
-    "claudeBorderActive": "#6b6b64",
-    "claudeBorderSubtle": "#3a3a36",
-    "claudeStep8": "#8a8a82",
-    "claudeDiffAdded": "#5bb98b",
-    "claudeDiffRemoved": "#e5484d",
-    "claudeDiffContext": "#8a8a82",
-    "claudeDiffAddedBg": "#22322a",
-    "claudeDiffRemovedBg": "#372426",
-    "claudeDiffContextBg": "#1f1e1d",
-    "claudeDiffLineNumber": "#6b6b64",
-    "claudeDiffAddedLineNumberBg": "#1c2b23",
-    "claudeDiffRemovedLineNumberBg": "#2e1f21",
-    "claudeLightBg": "#faf9f5",
-    "claudeLightBgPanel": "#f0eee6",
-    "claudeLightBgElement": "#e5e2d9",
-    "claudeLightText": "#1f1e1d",
-    "claudeLightTextMuted": "#74726b",
-    "claudeLightOrange": "#bd5d3a",
-    "claudeLightSecondary": "#4a7295",
-    "claudeLightAccent": "#8b6f47",
-    "claudeLightRed": "#c53030",
-    "claudeLightGreen": "#2d7a55",
-    "claudeLightCyan": "#3a7a75",
-    "claudeLightYellow": "#8b6f2f",
-    "claudeLightBorder": "#c9c6ba",
-    "claudeLightBorderActive": "#a5a296",
-    "claudeLightBorderSubtle": "#d9d6ca"
-  },
-  "theme": {
-    "primary": {
-      "dark": "claudeOrange",
-      "light": "claudeLightOrange"
-    },
-    "secondary": {
-      "dark": "claudeSecondary",
-      "light": "claudeLightSecondary"
-    },
-    "accent": {
-      "dark": "claudeAccent",
-      "light": "claudeLightAccent"
-    },
-    "error": {
-      "dark": "claudeRed",
-      "light": "claudeLightRed"
-    },
-    "warning": {
-      "dark": "claudeOrangeWarning",
-      "light": "claudeLightYellow"
-    },
-    "success": {
-      "dark": "claudeGreen",
-      "light": "claudeLightGreen"
-    },
-    "info": {
-      "dark": "claudeCyan",
-      "light": "claudeLightCyan"
-    },
-    "text": {
-      "dark": "claudeText",
-      "light": "claudeLightText"
-    },
-    "textMuted": {
-      "dark": "claudeTextMuted",
-      "light": "claudeLightTextMuted"
-    },
-    "background": {
-      "dark": "claudeBg",
-      "light": "claudeLightBg"
-    },
-    "backgroundPanel": {
-      "dark": "claudeBgPanel",
-      "light": "claudeLightBgPanel"
-    },
-    "backgroundElement": {
-      "dark": "claudeBgElement",
-      "light": "claudeLightBgElement"
-    },
-    "border": {
-      "dark": "claudeBorder",
-      "light": "claudeLightBorder"
-    },
-    "borderActive": {
-      "dark": "claudeBorderActive",
-      "light": "claudeLightBorderActive"
-    },
-    "borderSubtle": {
-      "dark": "claudeBorderSubtle",
-      "light": "claudeLightBorderSubtle"
-    },
-    "diffAdded": {
-      "dark": "claudeDiffAdded",
-      "light": "claudeLightGreen"
-    },
-    "diffRemoved": {
-      "dark": "claudeDiffRemoved",
-      "light": "claudeLightRed"
-    },
-    "diffContext": {
-      "dark": "claudeDiffContext",
-      "light": "claudeLightTextMuted"
-    },
-    "diffHunkHeader": {
-      "dark": "claudeDiffContext",
-      "light": "claudeLightTextMuted"
-    },
-    "diffHighlightAdded": {
-      "dark": "#7fd4a8",
-      "light": "#2d7a55"
-    },
-    "diffHighlightRemoved": {
-      "dark": "#f07178",
-      "light": "#c53030"
-    },
-    "diffAddedBg": {
-      "dark": "claudeDiffAddedBg",
-      "light": "#dcedd5"
-    },
-    "diffRemovedBg": {
-      "dark": "claudeDiffRemovedBg",
-      "light": "#f7d8db"
-    },
-    "diffContextBg": {
-      "dark": "claudeDiffContextBg",
-      "light": "claudeLightBgPanel"
-    },
-    "diffLineNumber": {
-      "dark": "claudeDiffLineNumber",
-      "light": "#a5a296"
-    },
-    "diffAddedLineNumberBg": {
-      "dark": "claudeDiffAddedLineNumberBg",
-      "light": "#c5d5c5"
-    },
-    "diffRemovedLineNumberBg": {
-      "dark": "claudeDiffRemovedLineNumberBg",
-      "light": "#e7c8cb"
-    },
-    "markdownText": {
-      "dark": "claudeText",
-      "light": "claudeLightText"
-    },
-    "markdownHeading": {
-      "dark": "claudeOrange",
-      "light": "claudeLightOrange"
-    },
-    "markdownLink": {
-      "dark": "claudeOrangeLight",
-      "light": "claudeLightOrange"
-    },
-    "markdownLinkText": {
-      "dark": "claudeCyan",
-      "light": "claudeLightCyan"
-    },
-    "markdownCode": {
-      "dark": "claudeGreen",
-      "light": "claudeLightGreen"
-    },
-    "markdownBlockQuote": {
-      "dark": "claudeYellow",
-      "light": "claudeLightYellow"
-    },
-    "markdownEmph": {
-      "dark": "claudeYellow",
-      "light": "claudeLightYellow"
-    },
-    "markdownStrong": {
-      "dark": "claudeOrange",
-      "light": "claudeLightOrange"
-    },
-    "markdownHorizontalRule": {
-      "dark": "claudeTextMuted",
-      "light": "claudeLightTextMuted"
-    },
-    "markdownListItem": {
-      "dark": "claudeOrange",
-      "light": "claudeLightOrange"
-    },
-    "markdownListEnumeration": {
-      "dark": "claudeCyan",
-      "light": "claudeLightCyan"
-    },
-    "markdownImage": {
-      "dark": "claudeOrange",
-      "light": "claudeLightOrange"
-    },
-    "markdownImageText": {
-      "dark": "claudeCyan",
-      "light": "claudeLightCyan"
-    },
-    "markdownCodeBlock": {
-      "dark": "claudeText",
-      "light": "claudeLightText"
-    },
-    "syntaxComment": {
-      "dark": "#7a7970",
-      "light": "#8a887d"
-    },
-    "syntaxKeyword": {
-      "dark": "#c3b7a5",
-      "light": "#8b6f47"
-    },
-    "syntaxFunction": {
-      "dark": "claudeOrangeLight",
-      "light": "claudeLightOrange"
-    },
-    "syntaxVariable": {
-      "dark": "#e8c4a8",
-      "light": "#9a5030"
-    },
-    "syntaxString": {
-      "dark": "#a3c9a8",
-      "light": "#2d7a55"
-    },
-    "syntaxNumber": {
-      "dark": "#d9a558",
-      "light": "#8b6f2f"
-    },
-    "syntaxType": {
-      "dark": "claudeSecondary",
-      "light": "claudeLightSecondary"
-    },
-    "syntaxOperator": {
-      "dark": "claudeCyan",
-      "light": "claudeLightCyan"
-    },
-    "syntaxPunctuation": {
-      "dark": "claudeText",
-      "light": "claudeLightText"
-    }
-  }
-}

package/plugin/tui.tsx

@@ -1,389 +0,0 @@
-/** @jsxImportSource @opentui/solid */
-import { RGBA, TextAttributes } from "@opentui/core"
-import { useTerminalDimensions } from "@opentui/solid"
-import { For, Show, createMemo, createResource, createSignal, onMount } from "solid-js"
-import type { TuiPlugin, TuiPluginApi, TuiPluginModule, TuiTheme } from "@opencode-ai/plugin/tui"
-import os from "node:os"
-import path from "node:path"
-
-// JPCODE wordmark, ported from jpcode packages/cli/src/ui/components/AsciiArt.ts
-const LEFT = ["", "", "", "", "", ""]
-const RIGHT = [
-  "     ▄▄ ▄▄▄▄▄▄   ▄▄▄▄▄▄  ▄▄▄▄▄▄  ▄▄▄▄▄▄  ▄▄▄▄▄▄▄",
-  "     ██║██╔══██╗██╔════╝██╔═══██╗██╔══██╗██╔════╝",
-  "     ██║██████╔╝██║     ██║   ██║██║  ██║█████╗",
-  "██   ██║██╔═══╝ ██║     ██║   ██║██║  ██║██╔══╝",
-  "╚█████╔╝██║     ╚██████╗╚██████╔╝██████╔╝███████╗",
-  " ╚════╝ ╚═╝      ╚═════╝ ╚═════╝ ╚═════╝ ╚══════╝",
-]
-
-// jpcode appends U+FE0E (VS15) to every East Asian Ambiguous glyph so CJK
-// terminals measure them as 1 column (packages/cli/src/ui/constants.ts). That
-// trick is Ink-specific: OpenTUI counts the variation selector as its own cell
-// and the wordmark gains a space between every glyph. Verified empirically, so
-// the glyphs ship bare and width handling is left to the renderer.
-function tint(base: RGBA, overlay: RGBA, alpha: number): RGBA {
-  return RGBA.fromInts(
-    Math.round((base.r + (overlay.r - base.r) * alpha) * 255),
-    Math.round((base.g + (overlay.g - base.g) * alpha) * 255),
-    Math.round((base.b + (overlay.b - base.b) * alpha) * 255),
-  )
-}
-
-const STACK_WIDTH = 80
-const HINT_MIN_WIDTH = 100
-
-function Logo(props: { api: TuiPluginApi }) {
-  const rowColor = (index: number, fg: RGBA): RGBA => {
-    const top = tint(fg, RGBA.fromInts(255, 255, 255), 0.35)
-    const bottom = tint(fg, RGBA.fromInts(0, 0, 0), 0.4)
-    return tint(top, bottom, index / (LEFT.length - 1))
-  }
-
-  const line = (source: string, fg: RGBA, bold: boolean) => {
-    const shadow = tint(props.api.theme.current.background, fg, 0.25)
-    const attrs = bold ? TextAttributes.BOLD : undefined
-    return Array.from(source).map((char) => {
-      if (char === "_") return <text fg={fg} bg={shadow} attributes={attrs} selectable={false}> </text>
-      if (char === "^") return <text fg={fg} bg={shadow} attributes={attrs} selectable={false}>▀</text>
-      if (char === "~") return <text fg={shadow} attributes={attrs} selectable={false}>▀</text>
-      if (char === ",") return <text fg={shadow} attributes={attrs} selectable={false}>▄</text>
-      return <text fg={fg} attributes={attrs} selectable={false}>{char}</text>
-    })
-  }
-
-  return (
-    <box flexShrink={0}>
-      <For each={LEFT}>
-        {(row, index) => (
-          <box flexDirection="row" gap={1}>
-            <box flexDirection="row">{line(row, rowColor(index(), props.api.theme.current.textMuted), false)}</box>
-            <box flexDirection="row">{line(RIGHT[index()], rowColor(index(), props.api.theme.current.text), true)}</box>
-          </box>
-        )}
-      </For>
-    </box>
-  )
-}
-
-type ModelInfo = { provider: string; model: string }
-
-type ModelRef = { providerID?: string; modelID?: string }
-
-// api.state.session.messages() only returns messages for the *active* session
-// (verified: a non-active session with 4633 messages in the db yields 0), so on
-// the home route we read the model store the TUI itself writes. recent[0] is the
-// most recently used model, matching the model shown on the prompt line.
-async function readModelStore(): Promise<ModelRef | undefined> {
-  const file = path.join(process.env.XDG_STATE_HOME ?? path.join(os.homedir(), ".local", "state"), "opencode", "model.json")
-  const raw = await Bun.file(file)
-    .text()
-    .catch(() => "")
-  if (!raw) return undefined
-  try {
-    const recent = (JSON.parse(raw) as { recent?: ModelRef[] }).recent
-    const first = recent?.[0]
-    return first?.providerID && first.modelID ? { providerID: first.providerID, modelID: first.modelID } : undefined
-  } catch {
-    return undefined
-  }
-}
-
-function useModelInfo(api: TuiPluginApi) {
-  const [store] = createResource(readModelStore)
-
-  return createMemo<ModelInfo | undefined>(() => {
-    const resolve = (ref: ModelRef | undefined) => {
-      if (!ref?.providerID || !ref.modelID) return undefined
-      const provider = api.state.provider.find((p) => p.id === ref.providerID)
-      return {
-        provider: ref.providerID === "opencode" ? "JpCode Zen" : (provider?.name ?? ref.providerID),
-        model: provider?.models?.[ref.modelID]?.name ?? ref.modelID,
-      }
-    }
-
-    const route = api.route.current
-    if (route.name === "session") {
-      const direct = resolve(
-        api.state.session.messages(route.params.sessionID).findLast((m) => m.role === "assistant") as
-          | ModelRef
-          | undefined,
-      )
-      if (direct) return direct
-    }
-
-    const configured = api.state.config.model ?? api.state.config.agent?.build?.model
-    if (configured) {
-      const slash = configured.indexOf("/")
-      if (slash !== -1) return resolve({ providerID: configured.slice(0, slash), modelID: configured.slice(slash + 1) })
-      return { provider: "", model: configured }
-    }
-
-    return resolve(store())
-  })
-}
-
-function InfoPanel(props: { api: TuiPluginApi; width: number }) {
-  const info = useModelInfo(props.api)
-  return (
-    <box
-      flexGrow={1}
-      flexShrink={1}
-      flexDirection="column"
-      border
-      borderStyle="single"
-      borderColor={props.api.theme.current.border}
-      paddingLeft={1}
-      paddingRight={1}
-      maxWidth={60}
-    >
-      <box flexDirection="row">
-        <text attributes={TextAttributes.BOLD} fg={props.api.theme.current.primary}>{">_ JpCode"}</text>
-        <text fg={props.api.theme.current.textMuted}> (v{props.api.app.version})</text>
-      </box>
-      <text fg={props.api.theme.current.textMuted}> </text>
-      <box flexDirection="row">
-        <Show when={info()}>
-          <text fg={props.api.theme.current.textMuted}>{info()!.provider} | {info()!.model}</text>
-        </Show>
-        <Show when={props.width === 0 || props.width >= HINT_MIN_WIDTH}>
-          <text fg={props.api.theme.current.textMuted}> (/model to change)</text>
-        </Show>
-      </box>
-      <text fg={props.api.theme.current.textMuted}>{props.api.state.path.directory}</text>
-    </box>
-  )
-}
-
-// home_logo slot. Stacks the wordmark above the info panel on narrow terminals
-// (same row -> column flip as jpcode Header.tsx) instead of hiding the logo.
-function Header(props: { api: TuiPluginApi; theme: TuiTheme }) {
-  const dims = useTerminalDimensions()
-  const width = () => dims().width
-  const stacked = () => width() > 0 && width() < STACK_WIDTH
-  return (
-    <Show when={props.theme.ready} fallback={<box height={6} />}>
-      <Show
-        when={stacked()}
-        fallback={
-          <box flexDirection="row" justifyContent="flex-start" alignItems="center" width="100%" gap={2}>
-            <Logo api={props.api} />
-            <InfoPanel api={props.api} width={width()} />
-          </box>
-        }
-      >
-        <box flexDirection="column" width="100%">
-          <Logo api={props.api} />
-          <InfoPanel api={props.api} width={width()} />
-        </box>
-      </Show>
-    </Show>
-  )
-}
-
-const money = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })
-
-function duration(ms: number) {
-  if (ms < 1000) return `${ms}ms`
-  const s = Math.floor(ms / 1000)
-  if (s < 60) return `${s}s`
-  const m = Math.floor(s / 60)
-  if (m < 60) return `${m}m ${s % 60}s`
-  return `${Math.floor(m / 60)}h ${m % 60}m`
-}
-
-type Totals = {
-  cost: number
-  input: number
-  output: number
-  reasoning: number
-  cacheRead: number
-  cacheWrite: number
-  span: number
-  count: number
-}
-
-function openCost(api: TuiPluginApi) {
-  const Dialog = api.ui.Dialog
-  const route = api.route.current
-
-  const [data] = createResource(async () => {
-    const all = (await api.client.session.list({}).then((r) => r.data ?? [])) as {
-      id: string
-      cost?: number
-      tokens?: { input?: number; output?: number; reasoning?: number; cache?: { read?: number; write?: number } }
-      time: { created: number; updated: number }
-    }[]
-    const sessions = route.name === "session" ? all.filter((s) => s.id === route.params.sessionID) : all
-    const totals: Totals = {
-      cost: 0, input: 0, output: 0, reasoning: 0, cacheRead: 0, cacheWrite: 0, span: 0, count: sessions.length,
-    }
-    for (const s of sessions) {
-      totals.cost += s.cost ?? 0
-      totals.input += s.tokens?.input ?? 0
-      totals.output += s.tokens?.output ?? 0
-      totals.reasoning += s.tokens?.reasoning ?? 0
-      totals.cacheRead += s.tokens?.cache?.read ?? 0
-      totals.cacheWrite += s.tokens?.cache?.write ?? 0
-    }
-    if (sessions.length) {
-      totals.span = Math.max(...sessions.map((s) => s.time.updated)) - Math.min(...sessions.map((s) => s.time.created))
-    }
-    return totals
-  })
-
-  const rows = createMemo(() => {
-    const t = data()
-    if (!t) return []
-    return [
-      { label: "Total cost", value: money.format(t.cost) },
-      { label: "Input tokens", value: t.input.toLocaleString() },
-      { label: "Output tokens", value: t.output.toLocaleString() },
-      { label: "Reasoning tokens", value: t.reasoning.toLocaleString() },
-      { label: "Cache read", value: t.cacheRead.toLocaleString() },
-      { label: "Cache write", value: t.cacheWrite.toLocaleString() },
-      { label: "Duration", value: duration(t.span) },
-      { label: "Sessions", value: t.count.toLocaleString() },
-    ]
-  })
-
-  api.ui.dialog.setSize("medium")
-  api.ui.dialog.replace(() => (
-    <Dialog onClose={() => api.ui.dialog.clear()}>
-      <box paddingLeft={2} paddingRight={2} gap={1} paddingBottom={1} width="100%">
-        <box flexDirection="row" justifyContent="space-between">
-          <text attributes={TextAttributes.BOLD} fg={api.theme.current.text}>Cost</text>
-          <text fg={api.theme.current.textMuted} onMouseUp={() => api.ui.dialog.clear()}>esc</text>
-        </box>
-        <Show when={data()} fallback={<text fg={api.theme.current.textMuted}>Loading...</text>}>
-          <For each={rows()}>
-            {(row) => (
-              <box flexDirection="row" justifyContent="space-between" width="100%">
-                <text fg={api.theme.current.textMuted}>{row.label}</text>
-                <text fg={api.theme.current.text}>{row.value}</text>
-              </box>
-            )}
-          </For>
-        </Show>
-      </box>
-    </Dialog>
-  ))
-}
-
-type MemoryFile = { label: string; filepath: string }
-
-function openMemory(api: TuiPluginApi) {
-  const Dialog = api.ui.Dialog
-  const cwd = api.state.path.directory
-  const worktree = api.state.path.worktree
-
-  const files = createMemo<MemoryFile[]>(() => {
-    const result: MemoryFile[] = [
-      { label: "Project rules", filepath: path.join(cwd, "AGENTS.md") },
-      { label: "Project memory", filepath: path.join(cwd, "CLAUDE.md") },
-      { label: "User memory", filepath: path.join(os.homedir(), ".config", "opencode", "AGENTS.md") },
-    ]
-    if (worktree && worktree !== cwd) {
-      result.unshift({ label: "Worktree rules", filepath: path.join(worktree, "AGENTS.md") })
-    }
-    return result
-  })
-
-  const [contents, setContents] = createSignal<Record<string, string>>({})
-  const [selected, setSelected] = createSignal(0)
-
-  onMount(async () => {
-    const next: Record<string, string> = {}
-    for (const file of files()) {
-      next[file.filepath] = await api.client.file
-        .read({ path: file.filepath })
-        .then((res) => res.data?.content ?? "")
-        .catch(() => "")
-    }
-    setContents(next)
-  })
-
-  const preview = createMemo(() => {
-    const file = files()[selected()]
-    if (!file) return ""
-    const content = contents()[file.filepath]
-    if (content === undefined) return "Loading..."
-    if (content.trim() === "") return "(empty - edit this file to add project instructions)"
-    return content
-  })
-
-  api.ui.dialog.setSize("large")
-  api.ui.dialog.replace(() => (
-    <Dialog onClose={() => api.ui.dialog.clear()}>
-      <box paddingLeft={2} paddingRight={2} gap={1} paddingBottom={1} width="100%">
-        <box flexDirection="row" justifyContent="space-between">
-          <text attributes={TextAttributes.BOLD} fg={api.theme.current.text}>Memory</text>
-          <text fg={api.theme.current.textMuted} onMouseUp={() => api.ui.dialog.clear()}>esc</text>
-        </box>
-        <box flexDirection="row" gap={2}>
-          <box flexDirection="column" flexShrink={0}>
-            <For each={files()}>
-              {(file, index) => (
-                <box flexDirection="row" gap={1}>
-                  <text fg={index() === selected() ? api.theme.current.primary : api.theme.current.textMuted}>
-                    {index() === selected() ? "●" : "○"}
-                  </text>
-                  <text
-                    fg={index() === selected() ? api.theme.current.text : api.theme.current.textMuted}
-                    onMouseUp={() => setSelected(index())}
-                  >
-                    {file.label}
-                  </text>
-                </box>
-              )}
-            </For>
-          </box>
-          <box
-            flexGrow={1}
-            backgroundColor={api.theme.current.backgroundPanel}
-            paddingTop={1}
-            paddingBottom={1}
-            paddingLeft={2}
-            paddingRight={2}
-          >
-            <text fg={api.theme.current.text}>{preview()}</text>
-          </box>
-        </box>
-      </box>
-    </Dialog>
-  ))
-}
-
-const tui: TuiPlugin = async (api) => {
-  api.slots.register({
-    order: 10,
-    slots: {
-      home_logo: (ctx) => <Header api={api} theme={ctx.theme} />,
-    },
-  })
-
-  api.keymap.registerLayer({
-    commands: [
-      {
-        name: "jpcode.cost",
-        title: "Show cost and usage",
-        category: "JpCode",
-        namespace: "palette",
-        slashName: "cost",
-        run: () => openCost(api),
-      },
-      {
-        name: "jpcode.memory",
-        title: "Show project memory files",
-        category: "JpCode",
-        namespace: "palette",
-        slashName: "memory",
-        run: () => openMemory(api),
-      },
-    ],
-  })
-}
-
-const plugin: TuiPluginModule & { id: string } = { id: "jpcode", tui }
-
-export default plugin