plugin-gentleman 1.1.4 → 1.1.5

package/README.md

@@ -1,5 +1,13 @@
 # Plugin Gentleman
 
+<p align="center">
+  <img src="./public/images/Mostacho.png" alt="Mostacho home preview" width="48%" />
+</p>
+
+<p align="center">
+  <img src="./public/images/Mustachi.png" alt="Mustachi sidebar preview" width="48%" />
+</p>
+
 > **For the Gentleman Programming community** — Bringing Mustachi, our beloved mascot, into your OpenCode terminal.
 
 An OpenCode TUI plugin crafted for the Gentleman Programming community. Mustachi, the official mascot of Gentleman Programming, now accompanies you through your coding sessions with visual flair and environment awareness:

package/components.tsx

@@ -16,32 +16,152 @@ import {
 } from "./ascii-frames"
 import { busyPhrases } from "./phrases"
 
+export type SemanticZone = "monocle" | "eyes" | "mustache" | "tongue" | "unknown"
+
+export function getZoneColor(zone: SemanticZone | string, theme?: TuiThemeCurrent): string {
+  switch (zone) {
+    case "monocle":
+      return theme?.accent || zoneColors.monocle
+    case "eyes":
+      return theme?.primary || zoneColors.eyes
+    case "mustache":
+      return theme?.secondary || zoneColors.mustache
+    case "tongue":
+      return theme?.warning || zoneColors.tongue
+    default:
+      return theme?.textMuted || zoneColors.mustache
+  }
+}
+
+const toNumber = (value: unknown): number => {
+  if (typeof value !== "number") return 0
+  if (!Number.isFinite(value)) return 0
+  return value
+}
+
+const formatTokens = (tokens: number): string => {
+  const value = Math.max(0, toNumber(tokens))
+  if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`
+  if (value >= 1_000) return `${(value / 1_000).toFixed(1)}K`
+  return `${Math.round(value)}`
+}
+
+const formatCost = (cost: number): string => {
+  const value = Math.max(0, toNumber(cost))
+  return `$${value.toFixed(2)}`
+}
+
+const getPct = (value: number, total: number): number => {
+  const safeValue = Math.max(0, toNumber(value))
+  const safeTotal = Math.max(0, toNumber(total))
+  if (!safeTotal) return 0
+  return Math.min(100, Math.round((safeValue / safeTotal) * 100))
+}
+
+const getMessageRole = (message: any): string => {
+  return (
+    message?.role ??
+    message?.message?.role ??
+    message?.author?.role ??
+    ""
+  )
+}
+
+const getTokenUsage = (message: any): any => {
+  return message?.tokenUsage ?? message?.usage ?? message?.tokens ?? message?.token_usage ?? {}
+}
+
+const hasTokenData = (message: any): boolean => {
+  const usage = getTokenUsage(message)
+  return (
+    typeof message?.tokens === "number" ||
+    typeof message?.total_tokens === "number" ||
+    typeof usage?.total === "number" ||
+    typeof usage?.total_tokens === "number" ||
+    typeof usage?.input === "number" ||
+    typeof usage?.input_tokens === "number" ||
+    typeof usage?.prompt_tokens === "number" ||
+    typeof usage?.output === "number" ||
+    typeof usage?.output_tokens === "number" ||
+    typeof usage?.completion_tokens === "number"
+  )
+}
+
+const getContextTokens = (message: any): number => {
+  const usage = getTokenUsage(message)
+  const direct = toNumber(message?.tokens)
+  if (direct > 0) return direct
+
+  const total = toNumber(usage?.total || usage?.total_tokens || message?.total_tokens)
+  if (total > 0) return total
+
+  const input = toNumber(usage?.input || usage?.input_tokens || usage?.prompt_tokens)
+  const output = toNumber(usage?.output || usage?.output_tokens || usage?.completion_tokens)
+  return Math.max(0, input + output)
+}
+
+const getMessageCost = (message: any): number => {
+  const usage = getTokenUsage(message)
+  return Math.max(
+    0,
+    toNumber(
+      message?.cost_usd ??
+      message?.cost ??
+      message?.total_cost ??
+      usage?.cost ??
+      usage?.cost_usd,
+    ),
+  )
+}
+
+const ProgressBar = (props: {
+  theme?: TuiThemeCurrent
+  totalTokens: number
+  totalCost: number
+  contextLimit?: number
+}) => {
+  const safeLimit = Math.max(0, toNumber(props.contextLimit))
+  const usagePct = getPct(props.totalTokens, safeLimit)
+  const barWidth = 18
+  const filled = Math.round((usagePct / 100) * barWidth)
+  const bar = `${"█".repeat(filled)}${"▒".repeat(Math.max(0, barWidth - filled))}`
+
+  return (
+    <box flexDirection="column" alignItems="center" marginTop={1}>
+      <text fg={props.theme?.textMuted ?? zoneColors.mustache}>Tokens: {formatTokens(props.totalTokens)}</text>
+      <text fg={props.theme?.accent ?? zoneColors.monocle}>Usage: {usagePct}% {bar}</text>
+      <text fg={props.theme?.textMuted ?? zoneColors.mustache}>Cost: {formatCost(props.totalCost)}</text>
+    </box>
+  )
+}
+
 // Home logo: Mustache-only (simple and prominent) with grayscale gradient
 export const HomeLogo = (props: { theme: TuiThemeCurrent }) => {
-  // Grayscale palette for better TUI readability
-  const lightGray = "#C0C0C0"   // Light gray for highlights
-  const midGray = "#808080"      // Mid gray for main body
-  const darkGray = "#505050"     // Dark gray for shadows
+  const topTone = getZoneColor("monocle", props.theme)
+  const midTone = getZoneColor("eyes", props.theme)
+  const bottomTone = getZoneColor("mustache", props.theme)
+  const mutedBranding = props.theme?.textMuted ?? "#888888"
+  const primaryBranding = props.theme?.primary ?? "#FFFFFF"
 
   return (
     <box flexDirection="column" alignItems="center">
-      {/* Mustache with grayscale gradient for depth */}
+      {/* Mustache with theme-reactive gradient for depth */}
       {mustachiMustacheOnly.map((line, idx) => {
         const totalLines = mustachiMustacheOnly.length
-        let color = midGray
+        let color = midTone
         if (idx < totalLines / 3) {
-          color = lightGray  // Top highlight
+          color = topTone  // Top highlight
         } else if (idx >= (2 * totalLines) / 3) {
-          color = darkGray   // Bottom shadow
+          color = bottomTone   // Bottom shadow
         }
         return <text fg={color}>{line.padEnd(61, " ")}</text>
       })}
 
       {/* OpenCode branding */}
       <box flexDirection="row" gap={0} marginTop={1}>
-        <text fg={props.theme.textMuted} dimColor={true}>╭ </text>
-        <text fg={props.theme.primary} bold={true}> O p e n C o d e </text>
-        <text fg={props.theme.textMuted} dimColor={true}> ╮</text>
+        <text fg={mutedBranding} dimColor={true}>╭ </text>
+        <text fg={primaryBranding} bold={true}> O p e n C o d e </text>
+        <text fg={mutedBranding} dimColor={true}> ╮</text>
       </box>
 
       <text> </text>
@@ -50,7 +170,14 @@ export const HomeLogo = (props: { theme: TuiThemeCurrent }) => {
 }
 
 // Sidebar: Full Mustachi face with progressive animations (semantic zone colors)
-export const SidebarMustachi = (props: { theme: TuiThemeCurrent; config: Cfg; isBusy?: boolean }) => {
+export const SidebarMustachi = (props: {
+  theme: TuiThemeCurrent
+  config: Cfg
+  isBusy?: boolean
+  branch?: string
+  getMessages?: () => any[]
+  contextLimit?: number
+}) => {
   const [pupilIndex, setPupilIndex] = createSignal(0)
   const [blinkFrame, setBlinkFrame] = createSignal(0)
   const [tongueFrame, setTongueFrame] = createSignal(0)
@@ -228,18 +355,39 @@ export const SidebarMustachi = (props: { theme: TuiThemeCurrent; config: Cfg; is
     return lines
   }
 
+  const branchLabel = props.branch?.trim()
+  const messages = props.getMessages?.() ?? []
+  const assistantMessages = messages.filter((message: any) => getMessageRole(message) === "assistant")
+
+  const lastAssistantWithTokens = [...assistantMessages].reverse().find((message: any) => hasTokenData(message))
+  const contextTokens = getContextTokens(lastAssistantWithTokens)
+  const totalCost = assistantMessages.reduce((sum: number, message: any) => sum + getMessageCost(message), 0)
+
   return (
     <box flexDirection="column" alignItems="center">
       {/* Full Mustachi face with semantic zone colors */}
       {buildFace().map(({ content, zone }) => {
-        const color = zoneColors[zone as keyof typeof zoneColors] || zoneColors.mustache
+        const color = getZoneColor(zone, props.theme)
         const paddedLine = content.padEnd(27, " ")
         return <text fg={color}>{paddedLine}</text>
       })}
 
+      {branchLabel && (
+        <text fg={props.theme?.textMuted ?? zoneColors.mustache}>⎇ {branchLabel}</text>
+      )}
+
+      {props.config.show_metrics && (
+        <ProgressBar
+          theme={props.theme}
+          totalTokens={contextTokens}
+          totalCost={totalCost}
+          contextLimit={props.contextLimit}
+        />
+      )}
+
       {/* Display a single busy phrase for the current expressive cycle */}
       {busyPhrase() && (
-        <text fg={props.theme.warning}>{busyPhrase()}</text>
+        <text fg={props.theme?.warning ?? zoneColors.tongue}>{busyPhrase()}</text>
       )}
 
       <text> </text>

package/config.ts

@@ -7,6 +7,7 @@ export type Cfg = {
   show_detected: boolean
   show_os: boolean
   show_providers: boolean
+  show_metrics: boolean
   animations: boolean
 }
 
@@ -34,6 +35,7 @@ export const cfg = (opts: Record<string, unknown> | undefined): Cfg => {
     show_detected: bool(opts?.show_detected, true),
     show_os: bool(opts?.show_os, true),
     show_providers: bool(opts?.show_providers, true),
+    show_metrics: bool(opts?.show_metrics, true),
     animations: bool(opts?.animations, true),
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "plugin-gentleman",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "OpenCode TUI plugin featuring Mustachi - an animated ASCII mascot with eyes, mustache, and optional motivational phrases during busy states",
   "type": "module",
   "exports": {
@@ -55,4 +55,4 @@
   "bugs": {
     "url": "https://github.com/IrrealV/plugin-gentleman/issues"
   }
-}
+}

package/phrases.ts

@@ -55,4 +55,24 @@ export const busyPhrases = [
   "Debugging: ser el detective en una novela de crimen donde también sos el asesino",
   "¡Todo compila! (pero no hace lo que debería)",
   "Si depurar es quitar bugs, programar debe ser ponerlos",
+  "Esto va más lento que tortuga con asma, pero va",
+  "¿Qué hace una abeja en el gimnasio? Zum-ba",
+  "Estoy más ocupado que mozo en Día de la Madre",
+  "¿Qué le dice una pared a otra? Nos vemos en la esquina",
+  "Más despacio que caracol con resaca... pero seguro",
+  "¿Cómo se despiden los químicos? Ácido un placer",
+  "Va tomando forma, como puré instantáneo",
+  "¿Qué hace un pez? Nada",
+  "No es lentitud, es suspenso de alta calidad",
+  "¿Cuál es el colmo de un jardinero? Que siempre lo dejen plantado",
+  "Estoy acomodando los patitos en fila",
+  "¿Qué le dice el 0 al 8? Lindo cinturón",
+  "Esto sale calentito, como medialuna de panadería",
+  "¿Cómo maldice un pollito a otro? Caldito seas",
+  "Un cachito más y queda pipí cucú",
+  "¿Cuál es el café más peligroso? El ex-preso",
+  "Más firme que televisor de bar en la final",
+  "¿Qué le dijo una impresora a otra? ¿Esa hoja es tuya o es impresión mía?",
+  "Estoy cerrando con moñito, bancame un toque",
+  "¿Cuál es el colmo de un electricista? No encontrar su corriente de trabajo",
 ]

package/tui.tsx

@@ -61,7 +61,19 @@ const tui: TuiPlugin = async (api, options) => {
         return <DetectedEnv theme={ctx.theme.current} providers={api.state.provider} config={value()} />
       },
       sidebar_content(ctx) {
-        return <SidebarMustachi theme={ctx.theme.current} config={value()} isBusy={isBusy()} />
+        // Extract sessionID from ctx.value parameter
+        const sessionID = ctx.value?.sessionID
+        
+        return (
+          <SidebarMustachi 
+            theme={ctx.theme.current} 
+            config={value()} 
+            isBusy={isBusy()}
+            branch={api.state.vcs?.branch}
+            getMessages={() => sessionID ? api.state.session.messages(sessionID) : []}
+            contextLimit={1_000_000}
+          />
+        )
       },
     },
   })