@soyjuanpiece/jpcode 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 jpcode contributors
+
+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,44 @@
+# JpCode
+
+**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](https://img.shields.io/badge/CLI-JpCode-blueviolet) ![npm](https://img.shields.io/npm/v/@soyjuanpiece/jpcode)
+
+## Instalación
+
+```bash
+npm install -g @soyjuanpiece/jpcode
+```
+
+Después corre:
+
+```bash
+jpcode
+```
+
+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`.
+
+## Qué añade sobre opencode
+
+- **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.
+
+## Actualizaciones
+
+Como el motor es opencode real, `opencode upgrade` (o reinstalar este paquete)
+actualiza todo sin perder tu diseño ni tus comandos.
+
+## Licencia
+
+MIT — opencode es MIT y este paquete también.

package/bin/install-plugin.mjs

@@ -0,0 +1,30 @@
+#!/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.
+import { existsSync, readFileSync, writeFileSync, mkdirSync } from "node:fs"
+import path from "node:path"
+import os from "node:os"
+
+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 pluginDir = path.join(
+    path.dirname(new URL(import.meta.url).pathname),
+    "..",
+    "plugin",
+  )
+  const plugins = new Set(Array.isArray(cfg.plugin) ? cfg.plugin : [])
+  plugins.add(`file:${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/bin/jpcode.mjs

@@ -0,0 +1,75 @@
+#!/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, readFileSync, writeFileSync, mkdirSync } from "node:fs"
+import { spawnSync } from "node:child_process"
+import path from "node:path"
+import os from "node:os"
+
+const require = createRequire(import.meta.url)
+
+function packageDir() {
+  try {
+    return path.dirname(require.resolve("opencode-ai/package.json"))
+  } catch {
+    return null
+  }
+}
+
+function tuiConfigPath() {
+  const base =
+    process.env.XDG_CONFIG_HOME ||
+    path.join(os.homedir(), ".config")
+  return path.join(base, "opencode", "tui.json")
+}
+
+// Registra el plugin embebido de JpCode en el tui.json del usuario (una vez).
+// No toca ninguna otra clave: si el usuario ya tiene plugins/tema, se respetan.
+function ensurePluginRegistered() {
+  try {
+    const cfgPath = tuiConfigPath()
+    let cfg = {}
+    if (existsSync(cfgPath)) {
+      cfg = JSON.parse(readFileSync(cfgPath, "utf8"))
+    }
+    const pluginDir = path.join(path.dirname(new URL(import.meta.url).pathname), "..", "plugin")
+    const plugins = new Set(Array.isArray(cfg.plugin) ? cfg.plugin : [])
+    plugins.add(`file:${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
+  }
+}
+
+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()
+  }
+}
+
+ensurePluginRegistered()
+
+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)
+}
+
+const result = spawnSync(bin, process.argv.slice(2), {
+  stdio: "inherit",
+  env: process.env,
+})
+process.exit(result.status ?? 0)

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@soyjuanpiece/jpcode",
+  "version": "1.0.0",
+  "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.",
+  "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/",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "postinstall": "node bin/install-plugin.mjs"
+  },
+  "dependencies": {
+    "opencode-ai": "^1.18.32"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SoyJuanPiece/jpcode.git"
+  }
+}

package/plugin/package.json

@@ -0,0 +1,21 @@
+{
+  "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

@@ -0,0 +1,250 @@
+{
+  "$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

@@ -0,0 +1,389 @@
+/** @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