opencode-mask-j0k3r-dev-rgl 2.0.15 → 2.0.17

package/components.tsx

@@ -1,6 +1,7 @@
 // @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 { Cfg } from "./config"
 import { getOSName, getProviders } from "./detection"
 import {
@@ -48,7 +49,6 @@ export const HomeLogo = (props: { theme: TuiThemeCurrent }) => {
 }
 
 // ─── Progress bar helper ──────────────────────────────────────────────────────
-// Renders a ASCII bar like: [████░░░░░░] 40%
 const ProgressBar = (props: {
   value: number      // 0–100
   width?: number
@@ -83,32 +83,52 @@ export const SidebarArch = (props: {
   mcpItems?: ReadonlyArray<TuiSidebarMcpItem>
   lspItems?: ReadonlyArray<TuiSidebarLspItem>
   todos?: ReadonlyArray<TuiSidebarTodoItem>
+  messages?: ReadonlyArray<Message>
 }) => {
   if (!props.config.show_sidebar) return null
 
   const t = props.theme
 
-  // ── Stats ─────────────────────────────────────────────────────────────────
+  // ── Files ─────────────────────────────────────────────────────────────────
   const files = props.files ?? []
-  const todos = props.todos ?? []
-  const mcpItems = props.mcpItems ?? []
-  const lspItems = props.lspItems ?? []
-
   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
   const totalTodos = todos.length
   const todoPct = totalTodos > 0 ? Math.round((doneTodos / totalTodos) * 100) : 0
 
+  // ── MCP ───────────────────────────────────────────────────────────────────
+  const mcpItems = props.mcpItems ?? []
   const mcpConnected = mcpItems.filter(m => m.status === "connected").length
   const mcpTotal = mcpItems.length
   const mcpPct = mcpTotal > 0 ? Math.round((mcpConnected / mcpTotal) * 100) : 0
 
+  // ── LSP ───────────────────────────────────────────────────────────────────
+  const lspItems = props.lspItems ?? []
   const lspActive = lspItems.filter(l => l.status === "idle" || l.status === "running").length
   const lspTotal = lspItems.length
 
+  // ── Tokens & Cost — sumados de los AssistantMessages ─────────────────────
+  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 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).
+  const CONTEXT_LIMIT = 200_000
+  const contextPct = Math.min(100, Math.round((totalTokens / CONTEXT_LIMIT) * 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 %
+  const ctxColor = contextPct < 50 ? "#00e5a0" : contextPct < 80 ? "#ffd166" : "#ff2d78"
+
   return (
     <box flexDirection="column" alignItems="center">
 
@@ -130,62 +150,57 @@ export const SidebarArch = (props: {
         </box>
       )}
 
-      {/* Files changed bar */}
-      {totalChanges > 0 && (
+      {/* ── Context (tokens + % used + cost) ── */}
+      {totalTokens > 0 && (
         <box flexDirection="column" 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.textMuted}>tokens</text>
+          </box>
+          <ProgressBar value={contextPct} width={12} fillColor={ctxColor} emptyColor="#3a3a3a" theme={t} />
+
+          {/* % used */}
           <box flexDirection="row" gap={1}>
-            <text fg={t.textMuted}>files</text>
-            <text fg={t.textMuted}>{files.length}</text>
+            <text fg={ctxColor}>{contextPct}%</text>
+            <text fg={t.textMuted}>used</text>
           </box>
-          <box flexDirection="row" gap={0}>
-            <text fg="#00e5a0">+{totalAdditions} </text>
-            <text fg="#ff2d78">-{totalDeletions}</text>
+          <ProgressBar value={contextPct} width={12} 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>
-          <ProgressBar
-            value={totalChanges > 0 ? Math.min(100, (totalAdditions / totalChanges) * 100) : 0}
-            width={12}
-            fillColor="#00e5a0"
-            emptyColor="#ff2d78"
-            theme={t}
-          />
+          <ProgressBar value={Math.min(100, totalCost * 100)} width={12} fillColor="#ffd166" emptyColor="#3a3a3a" theme={t} />
         </box>
       )}
 
-      {/* Todos bar */}
+      {/* ── Todos ── */}
       {totalTodos > 0 && (
         <box flexDirection="column" marginTop={1}>
           <box flexDirection="row" gap={1}>
             <text fg={t.textMuted}>todos</text>
-            <text fg={t.textMuted}>{doneTodos}/{totalTodos}</text>
+            <text fg={t.text}>{doneTodos}/{totalTodos}</text>
           </box>
-          <ProgressBar
-            value={todoPct}
-            width={12}
-            fillColor="#9d4edd"
-            emptyColor="#3a3a3a"
-            theme={t}
-          />
+          <ProgressBar value={todoPct} width={12} fillColor="#9d4edd" emptyColor="#3a3a3a" theme={t} />
         </box>
       )}
 
-      {/* MCP bar */}
+      {/* ── MCP ── */}
       {mcpTotal > 0 && (
         <box flexDirection="column" marginTop={1}>
           <box flexDirection="row" gap={1}>
             <text fg={t.textMuted}>mcp</text>
-            <text fg={t.textMuted}>{mcpConnected}/{mcpTotal}</text>
+            <text fg={t.text}>{mcpConnected}/{mcpTotal}</text>
           </box>
-          <ProgressBar
-            value={mcpPct}
-            width={12}
-            fillColor="#00c8ff"
-            emptyColor="#3a3a3a"
-            theme={t}
-          />
+          <ProgressBar value={mcpPct} width={12} fillColor="#00c8ff" emptyColor="#3a3a3a" theme={t} />
         </box>
       )}
 
-      {/* LSP status */}
+      {/* ── LSP ── */}
       {lspTotal > 0 && (
         <box flexDirection="row" gap={1} marginTop={1}>
           <text fg={t.textMuted}>lsp</text>

package/package.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "https://json.schemastore.org/package.json",
 	"name": "opencode-mask-j0k3r-dev-rgl",
-	"version": "2.0.15",
+	"version": "2.0.17",
 	"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

@@ -44,6 +44,7 @@ const tui: TuiPlugin = async (api, options) => {
         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()
 
@@ -55,6 +56,7 @@ const tui: TuiPlugin = async (api, options) => {
             branch={branch}
             files={files}
             todos={todos}
+            messages={messages}
             mcpItems={mcpItems}
             lspItems={lspItems}
           />