opencode-mask-j0k3r-dev-rgl 2.0.19 → 2.0.21

package/components.tsx

@@ -1,7 +1,6 @@
 // @ts-nocheck
 /** @jsxImportSource @opentui/solid */
-import type { TuiThemeCurrent, TuiSidebarFileItem, TuiSidebarMcpItem, TuiSidebarLspItem, TuiSidebarTodoItem } from "@opencode-ai/plugin/tui"
-import type { Message } from "@opencode-ai/sdk/v2"
+import type { TuiThemeCurrent, TuiSidebarMcpItem, TuiSidebarLspItem, TuiSidebarTodoItem } from "@opencode-ai/plugin/tui"
 import type { Cfg } from "./config"
 import { getOSName, getProviders } from "./detection"
 import {
@@ -77,24 +76,18 @@ const ProgressBar = (props: {
 export const SidebarArch = (props: {
   theme: TuiThemeCurrent
   config: Cfg
-  sessionID?: string
   branch?: string
-  files?: ReadonlyArray<TuiSidebarFileItem>
   mcpItems?: ReadonlyArray<TuiSidebarMcpItem>
   lspItems?: ReadonlyArray<TuiSidebarLspItem>
   todos?: ReadonlyArray<TuiSidebarTodoItem>
-  messages?: ReadonlyArray<Message>
+  contextTokens: number
+  contextCost: number
+  contextLimit: number
 }) => {
   if (!props.config.show_sidebar) return null
 
   const t = props.theme
 
-  // ── Files ─────────────────────────────────────────────────────────────────
-  const files = props.files ?? []
-  const totalAdditions = files.reduce((s, f) => s + f.additions, 0)
-  const totalDeletions = files.reduce((s, f) => s + f.deletions, 0)
-  const totalChanges = totalAdditions + totalDeletions
-
   // ── Todos ─────────────────────────────────────────────────────────────────
   const todos = props.todos ?? []
   const doneTodos = todos.filter(t => t.status === "completed").length
@@ -112,20 +105,11 @@ export const SidebarArch = (props: {
   const lspActive = lspItems.filter(l => l.status === "idle" || l.status === "running").length
   const lspTotal = lspItems.length
 
-  // ── Tokens & Cost ─────────────────────────────────────────────────────────
-  // El contexto = input máximo entre todos los mensajes asistente
-  // (el input crece conforme el contexto se acumula; el mayor = el más reciente sustancial)
-  const messages = props.messages ?? []
-  const assistantMsgs = messages.filter(m => m.role === "assistant")
-  const contextTokens = assistantMsgs.reduce((max, m) => Math.max(max, m.tokens?.input ?? 0), 0)
-  const totalCost = assistantMsgs.reduce((s, m) => s + (m.cost ?? 0), 0)
-
-  // % used: OpenCode lo calcula internamente con el context window del modelo.
-  // Inferimos el límite desde los datos disponibles: si tenemos tokens y %,
-  // podemos intentar inferirlo. Sin esa info, usamos 1M (Claude 3.5/Gemini 1.5).
-  const CONTEXT_LIMIT = 1_000_000
-  const contextPct = Math.min(100, Math.round((contextTokens / CONTEXT_LIMIT) * 100))
-  // El % de costo: escalamos $1.00 = 100%
+  // ── Context — valores ya calculados en tui.tsx via eventos ────────────────
+  const contextTokens = props.contextTokens
+  const totalCost = props.contextCost
+  const contextLimit = props.contextLimit
+  const contextPct = Math.min(100, Math.round((contextTokens / contextLimit) * 100))
   const costPct = Math.min(100, Math.round(totalCost * 100))
 
   const fmtTokens = (n: number) => n >= 1000 ? `${(n / 1000).toFixed(1)}k` : `${n}`

package/package.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "https://json.schemastore.org/package.json",
 	"name": "opencode-mask-j0k3r-dev-rgl",
-	"version": "2.0.19",
+	"version": "2.0.21",
 	"description": "Arch Linux TUI mask for OpenCode — hot pink theme with prominent ASCII logo and j0k3r-dev-rgl@latest legend",
 	"type": "module",
 	"exports": {

package/tui.tsx

@@ -1,6 +1,7 @@
 // @ts-nocheck
 /** @jsxImportSource @opentui/solid */
 import type { TuiPlugin, TuiPluginModule } from "@opencode-ai/plugin/tui"
+import { createSignal } from "solid-js"
 import { cfg } from "./config"
 import { HomeLogo, SidebarArch, DetectedEnv } from "./components"
 
@@ -15,36 +16,91 @@ const tui: TuiPlugin = async (api, options) => {
   const boot = cfg(rec(options))
   if (!boot.enabled) return
 
-  // Theme setup (wrapped in try-catch)
+  // Theme setup
   try {
     await api.theme.install("./themes/j0k3r-dev-rgl.json")
-    if (boot.set_theme) {
-      api.theme.set(boot.theme)
-    }
+    if (boot.set_theme) api.theme.set(boot.theme)
   } catch (error) {
     console.error("[j0k3r-dev-rgl] Theme setup failed:", error)
   }
 
+  // ── Reactive context tracker via events ──────────────────────────────────
+  // sessionID → { tokens, cost }
+  type CtxStats = { tokens: number; cost: number }
+  const ctxStore = new Map<string, CtxStats>()
+  const msgCostTracker = new Map<string, number>() // `sid:msgId` → cost
+
+  const [ctxTick, setCtxTick] = createSignal(0)
+
+  api.event.on("message.updated", (event) => {
+    const msg = event.properties as any
+    if (!msg || msg.role !== "assistant") return
+
+    // Buscar sessionID en todos los campos posibles del mensaje
+    const sid = msg.sessionID ?? msg.session_id ?? msg.parentID ?? null
+    if (!sid) return
+
+    // Tokens: intentamos todos los campos posibles y tomamos el mayor
+    const t = msg.tokens ?? {}
+    const tokens = Math.max(
+      t.input ?? 0,
+      t.total ?? 0,
+      (t.input ?? 0) + (t.output ?? 0),
+    )
+
+    // Costo: rastreamos por mensaje para no acumular en updates repetidos
+    const msgId = msg.id ?? msg.messageID ?? `${sid}-${Date.now()}`
+    msgCostTracker.set(`${sid}:${msgId}`, msg.cost ?? 0)
+
+    const cost = Array.from(msgCostTracker.entries())
+      .filter(([k]) => k.startsWith(`${sid}:`))
+      .reduce((s, [, v]) => s + v, 0)
+
+    const prev = ctxStore.get(sid) ?? { tokens: 0, cost: 0 }
+    ctxStore.set(sid, { tokens: Math.max(prev.tokens, tokens), cost })
+
+    setCtxTick(v => v + 1)
+  })
+
+  // Resolver context window real del modelo activo
+  const getContextLimit = (): number => {
+    try {
+      const modelStr = api.state.config?.model ?? ""
+      const [providerID, modelID] = modelStr.split("/")
+      const provider = api.state.provider.find(p => p.id === providerID)
+      const model = provider?.models?.[modelID]
+      if (model?.limit?.context) return model.limit.context
+    } catch (_) {}
+    return 1_000_000
+  }
+
   // Slot registration
   api.slots.register({
     slots: {
-      // Home screen: large Arch logo + j0k3r-dev-rgl@latest legend
       home_logo(ctx) {
         return <HomeLogo theme={ctx.theme.current} />
       },
 
-      // Below the prompt: environment detection
       home_bottom(ctx) {
         return <DetectedEnv theme={ctx.theme.current} providers={api.state.provider} config={boot} />
       },
 
-      // Sidebar: Arch logo + live stats with progress bars
       sidebar_content(ctx, value) {
         const sessionID = value?.session_id
+
+        // Registrar sesión en el tracker si es nueva
+        if (sessionID && !ctxStore.has(sessionID)) {
+          ctxStore.set(sessionID, { tokens: 0, cost: 0 })
+        }
+
+        // Suscribirse a la señal reactiva
+        const _ = ctxTick()
+        const stats = sessionID
+          ? (ctxStore.get(sessionID) ?? { tokens: 0, cost: 0 })
+          : { tokens: 0, cost: 0 }
+
         const branch = api.state.vcs?.branch
-        const files = sessionID ? api.state.session.diff(sessionID) : []
         const todos = sessionID ? api.state.session.todo(sessionID) : []
-        const messages = sessionID ? api.state.session.messages(sessionID) : []
         const mcpItems = api.state.mcp()
         const lspItems = api.state.lsp()
 
@@ -52,18 +108,17 @@ const tui: TuiPlugin = async (api, options) => {
           <SidebarArch
             theme={ctx.theme.current}
             config={boot}
-            sessionID={sessionID}
             branch={branch}
-            files={files}
             todos={todos}
-            messages={messages}
             mcpItems={mcpItems}
             lspItems={lspItems}
+            contextTokens={stats.tokens}
+            contextCost={stats.cost}
+            contextLimit={getContextLimit()}
           />
         )
       },
 
-      // Prompt bar right side: session info
       session_prompt_right(ctx, value) {
         const t = ctx.theme.current
         return (