opencode-mask-j0k3r-dev-rgl 2.0.16 → 2.0.18

package/components.tsx

@@ -112,21 +112,32 @@ export const SidebarArch = (props: {
   const lspActive = lspItems.filter(l => l.status === "idle" || l.status === "running").length
   const lspTotal = lspItems.length
 
-  // ── Tokens & Cost — sumados de los AssistantMessages ─────────────────────
+  // ── Tokens & Cost ─────────────────────────────────────────────────────────
+  // El contexto actual = tokens del ÚLTIMO mensaje asistente (input acumulado)
+  // El costo = suma de todos los mensajes de la sesión
   const messages = props.messages ?? []
   const assistantMsgs = messages.filter(m => m.role === "assistant")
-  const totalTokens = assistantMsgs.reduce((s, m) => s + (m.tokens?.total ?? (m.tokens?.input ?? 0) + (m.tokens?.output ?? 0)), 0)
+  const lastMsg = assistantMsgs[assistantMsgs.length - 1]
+  const contextTokens = lastMsg?.tokens?.input ?? 0
   const totalCost = assistantMsgs.reduce((s, m) => s + (m.cost ?? 0), 0)
 
-  // Context window: OpenCode muestra "% used" basado en el modelo.
-  // Usamos 200_000 como referencia (Claude 3.5 Sonnet / GPT-4o max).
+  // % used: inferido del input del último mensaje vs su límite de contexto
+  // OpenCode lo calcula internamente; usamos input/(input+output) del último msg
+  // como aproximación del % relativo al context window del modelo
+  const lastInput = lastMsg?.tokens?.input ?? 0
+  const lastOutput = lastMsg?.tokens?.output ?? 0
+  const lastTotal = lastInput + lastOutput
+  // Estimamos el limit del modelo: si el input representa el contexto acumulado,
+  // el % es proporcional. Usamos 200k como referencia estándar.
   const CONTEXT_LIMIT = 200_000
-  const contextPct = Math.min(100, Math.round((totalTokens / CONTEXT_LIMIT) * 100))
+  const contextPct = Math.min(100, Math.round((contextTokens / CONTEXT_LIMIT) * 100))
+  // El % de costo: escalamos $1.00 = 100%
+  const costPct = Math.min(100, Math.round(totalCost * 100))
 
   const fmtTokens = (n: number) => n >= 1000 ? `${(n / 1000).toFixed(1)}k` : `${n}`
   const fmtCost = (n: number) => `$${n.toFixed(2)}`
 
-  // Color del context bar: verde → amarillo → rojo según el %
+  // Color: verde → amarillo → rojo según el %
   const ctxColor = contextPct < 50 ? "#00e5a0" : contextPct < 80 ? "#ffd166" : "#ff2d78"
 
   return (
@@ -150,44 +161,31 @@ export const SidebarArch = (props: {
         </box>
       )}
 
-      {/* ── Context (tokens + cost) ── */}
-      {totalTokens > 0 && (
-        <box flexDirection="column" marginTop={1}>
+      {/* ── Context (tokens + % used + cost) ── */}
+      {contextTokens > 0 && (
+        <box flexDirection="column" alignItems="center" marginTop={1}>
           <text fg={t.textMuted} bold={true}>Context</text>
+
+          {/* tokens */}
           <box flexDirection="row" gap={1}>
-            <text fg={t.text}>{fmtTokens(totalTokens)}</text>
+            <text fg={t.text}>{fmtTokens(contextTokens)}</text>
             <text fg={t.textMuted}>tokens</text>
           </box>
-          <ProgressBar value={contextPct} width={12} fillColor={ctxColor} emptyColor="#3a3a3a" theme={t} />
+          <ProgressBar value={contextPct} width={18} fillColor={ctxColor} emptyColor="#3a3a3a" theme={t} />
+
+          {/* % used */}
           <box flexDirection="row" gap={1}>
             <text fg={ctxColor}>{contextPct}%</text>
             <text fg={t.textMuted}>used</text>
           </box>
+          <ProgressBar value={contextPct} width={18} fillColor={ctxColor} emptyColor="#3a3a3a" theme={t} />
+
+          {/* $ spent */}
           <box flexDirection="row" gap={1}>
             <text fg="#ffd166">{fmtCost(totalCost)}</text>
             <text fg={t.textMuted}>spent</text>
           </box>
-        </box>
-      )}
-
-      {/* ── Files changed ── */}
-      {totalChanges > 0 && (
-        <box flexDirection="column" marginTop={1}>
-          <box flexDirection="row" gap={1}>
-            <text fg={t.textMuted}>files</text>
-            <text fg={t.text}>{files.length}</text>
-          </box>
-          <box flexDirection="row" gap={0}>
-            <text fg="#00e5a0">+{totalAdditions} </text>
-            <text fg="#ff2d78">-{totalDeletions}</text>
-          </box>
-          <ProgressBar
-            value={totalChanges > 0 ? Math.min(100, (totalAdditions / totalChanges) * 100) : 0}
-            width={12}
-            fillColor="#00e5a0"
-            emptyColor="#ff2d78"
-            theme={t}
-          />
+          <ProgressBar value={costPct} width={18} fillColor="#ffd166" emptyColor="#3a3a3a" theme={t} />
         </box>
       )}
 

package/package.json

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