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

package/components.tsx

@@ -1,6 +1,7 @@
 // @ts-nocheck
 /** @jsxImportSource @opentui/solid */
-import type { TuiThemeCurrent } from "@opencode-ai/plugin/tui"
+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 {
@@ -17,14 +18,12 @@ export const HomeLogo = (props: { theme: TuiThemeCurrent }) => {
 
   return (
     <box flexDirection="column" alignItems="center">
-      {/* Arch Linux logo — zone-colored */}
       {archLogoHome.map((line, i) => {
         const zone = homeLogoZones[i]
         const color = zoneColors[zone] || t.primary
         return <text fg={color}>{line}</text>
       })}
 
-      {/* Legend: j0k3r-dev-rgl@latest */}
       <text> </text>
       <box flexDirection="row" gap={0}>
         <text fg="#ff2d78" bold={true}>j0k3r</text>
@@ -36,7 +35,6 @@ export const HomeLogo = (props: { theme: TuiThemeCurrent }) => {
         <text fg="#ffd166" bold={true}>latest</text>
       </box>
 
-      {/* Subtle separator */}
       <box flexDirection="row" gap={0} marginTop={1}>
         <text fg={t.textMuted} dimColor={true}>╭ </text>
         <text fg={t.textMuted}>arch linux </text>
@@ -50,21 +48,179 @@ export const HomeLogo = (props: { theme: TuiThemeCurrent }) => {
   )
 }
 
-// ─── Sidebar: Compact Arch logo ──────────────────────────────────────────────
-export const SidebarArch = (props: { theme: TuiThemeCurrent; config: Cfg }) => {
+// ─── Progress bar helper ──────────────────────────────────────────────────────
+const ProgressBar = (props: {
+  value: number      // 0–100
+  width?: number
+  fillColor: string
+  emptyColor: string
+  theme: TuiThemeCurrent
+}) => {
+  const width = props.width ?? 12
+  const pct = Math.max(0, Math.min(100, props.value))
+  const filled = Math.round((pct / 100) * width)
+  const empty = width - filled
+  const fill = "█".repeat(filled)
+  const trail = "░".repeat(empty)
+
+  return (
+    <box flexDirection="row" gap={0}>
+      <text fg={props.theme.textMuted}>[</text>
+      <text fg={props.fillColor}>{fill}</text>
+      <text fg={props.emptyColor}>{trail}</text>
+      <text fg={props.theme.textMuted}>]</text>
+    </box>
+  )
+}
+
+// ─── Sidebar: Arch logo + stats panel ────────────────────────────────────────
+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>
+}) => {
   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
+  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">
-      {/* Compact Arch logo — zone-colored */}
+
+      {/* Mini Arch logo */}
       {archLogoSidebar.map((line, i) => {
         const zone = sidebarLogoZones[i]
-        const color = zoneColors[zone] || props.theme.primary
+        const color = zoneColors[zone] || t.primary
         return <text fg={color}>{line}</text>
       })}
 
-      {/* Compact label */}
-      <text fg={props.theme.textMuted}>j0k3r@latest</text>
+      <text fg={t.textMuted}>j0k3r@latest</text>
+      <text> </text>
+
+      {/* Git branch */}
+      {props.branch && (
+        <box flexDirection="row" gap={1}>
+          <text fg="#ffd166">⎇</text>
+          <text fg={t.text}>{props.branch}</text>
+        </box>
+      )}
+
+      {/* ── Context (tokens + cost) ── */}
+      {totalTokens > 0 && (
+        <box flexDirection="column" marginTop={1}>
+          <text fg={t.textMuted} bold={true}>Context</text>
+          <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} />
+          <box flexDirection="row" gap={1}>
+            <text fg={ctxColor}>{contextPct}%</text>
+            <text fg={t.textMuted}>used</text>
+          </box>
+          <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}
+          />
+        </box>
+      )}
+
+      {/* ── Todos ── */}
+      {totalTodos > 0 && (
+        <box flexDirection="column" marginTop={1}>
+          <box flexDirection="row" gap={1}>
+            <text fg={t.textMuted}>todos</text>
+            <text fg={t.text}>{doneTodos}/{totalTodos}</text>
+          </box>
+          <ProgressBar value={todoPct} width={12} fillColor="#9d4edd" emptyColor="#3a3a3a" theme={t} />
+        </box>
+      )}
+
+      {/* ── MCP ── */}
+      {mcpTotal > 0 && (
+        <box flexDirection="column" marginTop={1}>
+          <box flexDirection="row" gap={1}>
+            <text fg={t.textMuted}>mcp</text>
+            <text fg={t.text}>{mcpConnected}/{mcpTotal}</text>
+          </box>
+          <ProgressBar value={mcpPct} width={12} fillColor="#00c8ff" emptyColor="#3a3a3a" theme={t} />
+        </box>
+      )}
+
+      {/* ── LSP ── */}
+      {lspTotal > 0 && (
+        <box flexDirection="row" gap={1} marginTop={1}>
+          <text fg={t.textMuted}>lsp</text>
+          <text fg={lspActive > 0 ? "#00e5a0" : "#555555"}>{lspActive}/{lspTotal}</text>
+        </box>
+      )}
+
       <text> </text>
     </box>
   )

package/package.json

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

@@ -38,9 +38,29 @@ const tui: TuiPlugin = async (api, options) => {
         return <DetectedEnv theme={ctx.theme.current} providers={api.state.provider} config={boot} />
       },
 
-      // Sidebar: compact Arch logo
-      sidebar_content(ctx) {
-        return <SidebarArch theme={ctx.theme.current} config={boot} />
+      // Sidebar: Arch logo + live stats with progress bars
+      sidebar_content(ctx, value) {
+        const sessionID = value?.session_id
+        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()
+
+        return (
+          <SidebarArch
+            theme={ctx.theme.current}
+            config={boot}
+            sessionID={sessionID}
+            branch={branch}
+            files={files}
+            todos={todos}
+            messages={messages}
+            mcpItems={mcpItems}
+            lspItems={lspItems}
+          />
+        )
       },
 
       // Prompt bar right side: session info