opencode-mask-j0k3r-dev-rgl 2.0.20 → 2.0.22

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,14 +76,13 @@ 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>
-  contextLimit?: number
+  contextTokens: number
+  contextCost: number
+  contextLimit: number
 }) => {
   if (!props.config.show_sidebar) return null
 
@@ -107,14 +105,10 @@ export const SidebarArch = (props: {
   const lspActive = lspItems.filter(l => l.status === "idle" || l.status === "running").length
   const lspTotal = lspItems.length
 
-  // ── Tokens & Cost ─────────────────────────────────────────────────────────
-  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)
-
-  // context window real del modelo via api.state.provider → model.limit.context
-  const contextLimit = props.contextLimit ?? 1_000_000
+  // ── 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))
 
@@ -145,9 +139,8 @@ export const SidebarArch = (props: {
         </box>
       )}
 
-      {/* ── Context (tokens + % used + cost) ── */}
-      {contextTokens > 0 && (
-        <box flexDirection="column" alignItems="center" marginTop={1}>
+      {/* ── Context (tokens + % used + cost) ── siempre visible */}
+      <box flexDirection="column" alignItems="center" marginTop={1}>
           <text fg={t.textMuted} bold={true}>Context</text>
 
           {/* tokens */}
@@ -170,8 +163,7 @@ export const SidebarArch = (props: {
             <text fg={t.textMuted}>spent</text>
           </box>
           <ProgressBar value={costPct} width={18} fillColor="#ffd166" emptyColor="#3a3a3a" theme={t} />
-        </box>
-      )}
+      </box>
 
       {/* ── Todos ── */}
       {totalTodos > 0 && (

package/package.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "https://json.schemastore.org/package.json",
 	"name": "opencode-mask-j0k3r-dev-rgl",
-	"version": "2.0.20",
+	"version": "2.0.22",
 	"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,68 +16,116 @@ 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)
+
+  let debugLogged = false
+  api.event.on("message.updated", (event) => {
+    // Debug: loguear estructura completa la primera vez
+    if (!debugLogged) {
+      debugLogged = true
+      const propsKeys = Object.keys((event as any).properties ?? {}).join(",")
+      const infoKeys = Object.keys(((event as any).properties?.info ?? (event as any).properties) ?? {}).join(",")
+      console.error("[j0k3r-mask] event.properties keys:", propsKeys)
+      console.error("[j0k3r-mask] info/msg keys:", infoKeys)
+      console.error("[j0k3r-mask] full event:", JSON.stringify(event).slice(0, 800))
+      api.ui.toast({ variant: "info", message: `props: ${propsKeys} | info: ${infoKeys}`, duration: 8000 })
+    }
+
+    // Intentar ambas estructuras: { properties: { info: Message } } o { properties: Message }
+    const props = (event as any).properties
+    const msg = props?.info ?? props
+    if (!msg || msg.role !== "assistant") return
+
+    const sid: string | undefined = msg.sessionID
+    if (!sid) return
+
+    const t = msg.tokens ?? {}
+    const tokens = t.input ?? 0
+    const msgId: string = msg.id ?? `${sid}-unknown`
+    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 })
+
+    console.error(`[j0k3r-mask] sid=${sid} tokens=${tokens} cost=${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()
 
-        // Resolver el context window real del modelo activo
-        // api.state.config.model = "providerID/modelID"
-        // api.state.provider = ReadonlyArray<Provider> donde Provider.models[modelID].limit.context
-        let contextLimit: number | undefined
-        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) contextLimit = model.limit.context
-        } catch (_) {}
-
         return (
           <SidebarArch
             theme={ctx.theme.current}
             config={boot}
-            sessionID={sessionID}
             branch={branch}
-            files={files}
             todos={todos}
-            messages={messages}
             mcpItems={mcpItems}
             lspItems={lspItems}
-            contextLimit={contextLimit}
+            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 (