plugin-gentleman 1.1.3 → 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:
@@ -98,7 +106,7 @@ The ASCII representation features:
 - **Eyes** that blink and look in 8 directions (center, up, down, left, right, and 4 diagonals) *(sidebar only)*
 - **Mustache** rendered in grayscale gradient on home screen, semantic zone colors in sidebar
 - **Tongue** that appears during busy states or periodic expressive cycles *(sidebar only)*
-- **Motivational phrases** in Rioplatense Spanish style — single random phrase rotating every 3s *(sidebar only)*
+- **Motivational phrases** in Rioplatense Spanish style — one random phrase per expressive cycle *(sidebar only)*
 
 **Example phrases during busy states:**
 - *"Ponete las pilas, hermano..."*
@@ -126,7 +134,7 @@ The ASCII representation features:
 **Busy/Expressive State** *(when `animations: true`)*
 - Tongue appears when OpenCode is processing
 - Eyes squint during expressive state
-- Single motivational phrase rotating every 3 seconds (36+ phrase library)
+- A single motivational phrase is chosen for each expressive cycle or busy state (36+ phrase library)
 - Active during detected busy states OR periodic expressive cycles
 
 **Expressive Cycle Fallback** *(when `animations: true`)*
@@ -407,7 +415,7 @@ All animation intervals are in `components.tsx`:
 - **Look-around interval:** Currently 3000ms (3s)
 - **Blink interval:** Currently 2000ms with 35% chance (~5-6s average)
 - **Blink frame timing:** Currently 80-100ms per frame progression
-- **Phrase rotation:** Currently 3000ms (3s) during expressive state
+- **Phrase selection:** One random phrase per expressive cycle or busy state
 - **Expressive cycle timing:** First cycle at 30-45s, then every 45-60s
 - **Expressive cycle duration:** Currently 8000ms (8s)
 

package/ascii-frames.ts

@@ -48,7 +48,7 @@ export const eyeNeutralRight = [
 
 export const eyeNeutralUpLeft = [
   "     █████       █████     ",  // 27 chars
-  "   ██  ░░██   ██░░░░░██   ",  // 27 chars - hollow pupil up-left
+  "   ██  ░░██   ███░░░░██   ",  // 27 chars - hollow pupil up-left
   "  ██   ░░░░██ ██░░░░░░░██  ",  // 27 chars - hollow pupil up-left
   "  ██░░░░░░░██ ██░░░░░░░██  ",  // 27 chars
   "██ ██░░░░░██   ██░░░░░██ ██",  // 27 chars
@@ -56,7 +56,7 @@ export const eyeNeutralUpLeft = [
 
 export const eyeNeutralUpRight = [
   "     ██████      █████     ",  // 27 chars
-  "   ██░░░  ██  ██░░░░░██   ",  // 27 chars - hollow pupil up-right
+  "   ██░░░  ██  ███░░░░██   ",  // 27 chars - hollow pupil up-right
   "  ██░░░░   ██ ██░░░░░░░██  ",  // 27 chars - hollow pupil up-right
   "  ██░░░░░░░██ ██░░░░░░░██  ",  // 27 chars
   "██ ██░░░░░██   ██░░░░░██ ██",  // 27 chars

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)
@@ -136,7 +263,7 @@ export const SidebarMustachi = (props: { theme: TuiThemeCurrent; config: Cfg; is
     }
     tongueTimeoutId = setTimeout(growTongue, 200)
 
-    // Pick a random phrase and rotate through the library
+    // Pick a single random phrase for this expressive cycle/state
     const pickRandomPhrase = () => {
       const randomIndex = Math.floor(Math.random() * busyPhrases.length)
       return busyPhrases[randomIndex]
@@ -144,12 +271,7 @@ export const SidebarMustachi = (props: { theme: TuiThemeCurrent; config: Cfg; is
 
     setBusyPhrase(pickRandomPhrase())
 
-    const interval = setInterval(() => {
-      setBusyPhrase(pickRandomPhrase())
-    }, 3000)
-
     onCleanup(() => {
-      clearInterval(interval)
       if (tongueTimeoutId !== undefined) {
         clearTimeout(tongueTimeoutId)
       }
@@ -233,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>
       })}
 
-      {/* Display single busy phrase if loading */}
+      {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.3",
+  "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}
+          />
+        )
       },
     },
   })