plugin-gentleman 1.1.4 → 1.1.6

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

@@ -1,9 +1,9 @@
 // @ts-nocheck
 /** @jsxImportSource @opentui/solid */
 import type { TuiThemeCurrent } from "@opencode-ai/plugin/tui"
-import { createSignal, onCleanup, createEffect } from "solid-js"
+import { createSignal, onCleanup, createEffect, createMemo } from "solid-js"
 import type { Cfg } from "./config"
-import { getOSName, getProviders } from "./detection"
+import { detectPrimaryStackContext, getOSName, getProviders, type DetectedStack } from "./detection"
 import {
   pupilPositionFrames,
   eyeSquinted,
@@ -14,34 +14,230 @@ import {
   mustachiMustacheOnly,
   zoneColors,
 } from "./ascii-frames"
-import { busyPhrases } from "./phrases"
+import { pickBusyPhrase } 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 ellipsize = (value: string, maxLength: number): string => {
+  if (value.length <= maxLength) return value
+  if (maxLength <= 3) return value.slice(0, maxLength)
+  return `${value.slice(0, maxLength - 3)}...`
+}
+
+const resolveProp = <T,>(value: T | (() => T) | undefined): T | undefined => {
+  if (typeof value === "function") {
+    return (value as () => T)()
+  }
+  return value
+}
+
+const rightEyeStackMark: Record<DetectedStack, string> = {
+  react: "R",
+  angular: "A",
+  vue: "V",
+  node: "N",
+  go: "G",
+  python: "P",
+  dotnet: "D",
+  svelte: "S",
+  nextjs: "X",
+  rust: "U",
+}
+
+const replaceCharAt = (line: string, index: number, value: string): string => {
+  if (index < 0 || index >= line.length) return line
+  return `${line.slice(0, index)}${value}${line.slice(index + 1)}`
+}
+
+const applyRightEyeContextualMark = (frame: string[], stack: DetectedStack | undefined): string[] => {
+  if (!stack) return frame
+  const marker = rightEyeStackMark[stack]
+  if (!marker) return frame
+
+  return frame.map((line, idx) => {
+    if (idx < 2 || idx > 3) return line
+    return replaceCharAt(line, 20, marker)
+  })
+}
+
+type MustachiVisualState = "idle" | "thinking" | "working"
+
+const getRuntimeVisualHint = (runtimeContext: any): MustachiVisualState | undefined => {
+  try {
+    const runtime = runtimeContext?.runtime ?? runtimeContext
+    const status = String(runtime?.status ?? runtime?.state ?? runtime?.phase ?? "").toLowerCase()
+    const runningSignal = runtime?.running ?? runtimeContext?.session?.running
+
+    if (runningSignal === true) return "working"
+    if (status.includes("work") || status.includes("run") || status.includes("load") || status.includes("generat")) {
+      return "working"
+    }
+    if (status.includes("think") || status.includes("reason") || status.includes("plan")) {
+      return "thinking"
+    }
+    return
+  } catch {
+    return
+  }
+}
+
+const resolveVisualState = (input: {
+  isBusy: boolean
+  runtimeHint?: MustachiVisualState
+  expressiveCycle: boolean
+}): MustachiVisualState => {
+  if (input.isBusy || input.runtimeHint === "working") return "working"
+  if (input.expressiveCycle || input.runtimeHint === "thinking") return "thinking"
+  return "idle"
+}
+
+const ProgressBar = (props: {
+  theme?: TuiThemeCurrent
+  totalTokens: number
+  totalCost: number
+  contextLimit?: number
+}) => {
+  const safeLimit = Math.max(0, toNumber(props.contextLimit))
+  const hasContextLimit = safeLimit > 0
+  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>
+      {hasContextLimit && (
+        <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,16 +246,44 @@ 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
+  providers?: ReadonlyArray<{ id: string; name: string }>
+  branch?: string | (() => string | undefined)
+  getMessages?: () => any[]
+  runtimeContext?: any | (() => any)
+  contextLimit?: number | (() => number | undefined)
+}) => {
   const [pupilIndex, setPupilIndex] = createSignal(0)
   const [blinkFrame, setBlinkFrame] = createSignal(0)
   const [tongueFrame, setTongueFrame] = createSignal(0)
   const [busyPhrase, setBusyPhrase] = createSignal("")
   const [expressiveCycle, setExpressiveCycle] = createSignal(false)
+  const [phraseCycle, setPhraseCycle] = createSignal(0)
+
+  const detectedStack = createMemo(() => {
+    return detectPrimaryStackContext({
+      providers: props.providers,
+      runtimeContext: resolveProp(props.runtimeContext),
+      messages: props.getMessages?.(),
+    })
+  })
+
+  const runtimeHint = createMemo(() => getRuntimeVisualHint(resolveProp(props.runtimeContext)))
+
+  const visualState = createMemo<MustachiVisualState>(() => {
+    return resolveVisualState({
+      isBusy: !!props.isBusy,
+      runtimeHint: runtimeHint(),
+      expressiveCycle: expressiveCycle(),
+    })
+  })
 
   // Animation: pupil movement (look around) - random transitions, not a sequence
   createEffect(() => {
-    if (!props.config.animations || props.isBusy || expressiveCycle()) {
+    if (!props.config.animations || visualState() !== "idle") {
       setPupilIndex(0)
       return
     }
@@ -83,17 +307,22 @@ export const SidebarMustachi = (props: { theme: TuiThemeCurrent; config: Cfg; is
   createEffect(() => {
     if (!props.config.animations) return
 
-    const blinkSequence = async () => {
+    const timeoutIds = new Set<NodeJS.Timeout>()
+    const schedule = (fn: () => void, delay: number) => {
+      const timeoutId = setTimeout(() => {
+        timeoutIds.delete(timeoutId)
+        fn()
+      }, delay)
+      timeoutIds.add(timeoutId)
+    }
+
+    const blinkSequence = () => {
       // Open -> half -> closed -> half -> open (normal eyelid motion)
       setBlinkFrame(0)
-      await new Promise(r => setTimeout(r, 100))
-      setBlinkFrame(1)
-      await new Promise(r => setTimeout(r, 80))
-      setBlinkFrame(2)
-      await new Promise(r => setTimeout(r, 80))
-      setBlinkFrame(1)
-      await new Promise(r => setTimeout(r, 80))
-      setBlinkFrame(0)
+      schedule(() => setBlinkFrame(1), 100)
+      schedule(() => setBlinkFrame(2), 180)
+      schedule(() => setBlinkFrame(1), 260)
+      schedule(() => setBlinkFrame(0), 340)
     }
 
     const interval = setInterval(() => {
@@ -104,7 +333,13 @@ export const SidebarMustachi = (props: { theme: TuiThemeCurrent; config: Cfg; is
       }
     }, 2000)  // Natural cadence: check every 2s for blink
 
-    onCleanup(() => clearInterval(interval))
+    onCleanup(() => {
+      clearInterval(interval)
+      for (const timeoutId of timeoutIds) {
+        clearTimeout(timeoutId)
+      }
+      timeoutIds.clear()
+    })
   })
 
   // Busy/expressive state animation: tongue + single rotating phrase
@@ -117,7 +352,7 @@ export const SidebarMustachi = (props: { theme: TuiThemeCurrent; config: Cfg; is
       return
     }
 
-    const shouldShowExpression = props.isBusy || expressiveCycle()
+    const shouldShowExpression = visualState() !== "idle"
 
     if (!shouldShowExpression) {
       setTongueFrame(0)
@@ -136,13 +371,13 @@ export const SidebarMustachi = (props: { theme: TuiThemeCurrent; config: Cfg; is
     }
     tongueTimeoutId = setTimeout(growTongue, 200)
 
-    // Pick a single random phrase for this expressive cycle/state
-    const pickRandomPhrase = () => {
-      const randomIndex = Math.floor(Math.random() * busyPhrases.length)
-      return busyPhrases[randomIndex]
-    }
-
-    setBusyPhrase(pickRandomPhrase())
+    const nextCycle = phraseCycle() + 1
+    setPhraseCycle(nextCycle)
+    setBusyPhrase(previous => pickBusyPhrase({
+      framework: detectedStack(),
+      cycle: nextCycle,
+      previous,
+    }))
 
     onCleanup(() => {
       if (tongueTimeoutId !== undefined) {
@@ -155,6 +390,7 @@ export const SidebarMustachi = (props: { theme: TuiThemeCurrent; config: Cfg; is
   // This ensures tongue + phrases are visibly demonstrated even if runtime busy state is unreliable
   createEffect(() => {
     if (!props.config.animations || props.isBusy) return
+    if (runtimeHint() === "working" || runtimeHint() === "thinking") return
 
     let cycleEndTimeout: NodeJS.Timeout | undefined
 
@@ -167,8 +403,8 @@ export const SidebarMustachi = (props: { theme: TuiThemeCurrent; config: Cfg; is
       }, 8000)
     }
 
-    // First cycle after 30-45s, then every 45-60s (calm, occasional expressiveness)
-    const firstDelay = 30000 + Math.random() * 15000
+    // First cycle after 45-60s, then every 45-60s (calm, occasional expressiveness)
+    const firstDelay = 45000 + Math.random() * 15000
     const firstTimeout = setTimeout(triggerExpressiveCycle, firstDelay)
 
     const interval = setInterval(() => {
@@ -194,7 +430,7 @@ export const SidebarMustachi = (props: { theme: TuiThemeCurrent; config: Cfg; is
     let eyeFrame = pupilPositionFrames[pupilIndex()]
 
     // Apply squint if busy/expressive
-    if (props.isBusy || expressiveCycle()) {
+    if (visualState() !== "idle") {
       eyeFrame = eyeSquinted
     }
 
@@ -203,6 +439,8 @@ export const SidebarMustachi = (props: { theme: TuiThemeCurrent; config: Cfg; is
       eyeFrame = eyeBlinkHalf
     } else if (blinkFrame() === 2) {
       eyeFrame = eyeBlinkClosed
+    } else {
+      eyeFrame = applyRightEyeContextualMark(eyeFrame, detectedStack())
     }
 
     // Add eyes with zone metadata
@@ -218,7 +456,7 @@ export const SidebarMustachi = (props: { theme: TuiThemeCurrent; config: Cfg; is
     })
 
     // Add tongue if expressive (mark as tongue zone for pink color)
-    if ((props.isBusy || expressiveCycle()) && tongueFrame() > 0) {
+    if (visualState() !== "idle" && tongueFrame() > 0) {
       const tongueLines = tongueFrames[tongueFrame()]
       tongueLines.forEach(line => {
         lines.push({ content: line, zone: "tongue" })
@@ -228,18 +466,53 @@ export const SidebarMustachi = (props: { theme: TuiThemeCurrent; config: Cfg; is
     return lines
   }
 
+  const branchLabel = createMemo(() => {
+    const value = resolveProp(props.branch)?.trim()
+    if (!value) return ""
+    return ellipsize(value, 24)
+  })
+
+  const resolvedContextLimit = createMemo(() => resolveProp(props.contextLimit))
+
+  const assistantMessages = createMemo(() => {
+    const messages = props.getMessages?.() ?? []
+    return messages.filter((message: any) => getMessageRole(message) === "assistant")
+  })
+
+  const contextTokens = createMemo(() => {
+    const lastAssistantWithTokens = [...assistantMessages()].reverse().find((message: any) => hasTokenData(message))
+    return getContextTokens(lastAssistantWithTokens)
+  })
+
+  const totalCost = createMemo(() => {
+    return 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={resolvedContextLimit()}
+        />
+      )}
+
       {/* 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/detection.ts

@@ -2,6 +2,18 @@
 
 import { readFileSync } from "node:fs"
 
+export type DetectedStack =
+  | "react"
+  | "angular"
+  | "vue"
+  | "node"
+  | "go"
+  | "python"
+  | "dotnet"
+  | "svelte"
+  | "nextjs"
+  | "rust"
+
 // Helper to detect OS name
 export const getOSName = (): string => {
   try {
@@ -59,3 +71,110 @@ export const getProviders = (providers: ReadonlyArray<{ id: string; name: string
   // Return compact comma-separated list
   return Array.from(names).sort().join(", ")
 }
+
+type StackDetectionInput = {
+  providers?: ReadonlyArray<{ id: string; name: string }>
+  runtimeContext?: any
+  messages?: any[]
+}
+
+const stackRules: Record<DetectedStack, RegExp[]> = {
+  react: [/\breact\b/, /\btsx\b/, /\bjsx\b/],
+  angular: [/\bangular\b/, /\bnx\b/],
+  vue: [/\bvue\b/, /\bnuxt\b/],
+  node: [/\bnode\b/, /\bnodejs\b/, /\bexpress\b/, /\bnestjs\b/],
+  go: [/\bgolang\b/, /\bgo\s+mod\b/, /\bgo\.sum\b/, /\bgin\b/, /\bfiber\b/],
+  python: [/\bpython\b/, /\.py\b/, /\bdjango\b/, /\bfastapi\b/],
+  dotnet: [/\.net\b/, /\bdotnet\b/, /\bc#\b/, /\basp\.net\b/],
+  svelte: [/\bsvelte\b/, /\bsveltekit\b/],
+  nextjs: [/\bnext\.js\b/, /\bnextjs\b/],
+  rust: [/\brust\b/, /\baxum\b/, /\bactix\b/],
+}
+
+const stackPriority: DetectedStack[] = [
+  "nextjs",
+  "react",
+  "angular",
+  "vue",
+  "svelte",
+  "node",
+  "go",
+  "python",
+  "dotnet",
+  "rust",
+]
+
+const pushHint = (bucket: string[], value: unknown) => {
+  if (typeof value === "string" && value.trim()) {
+    bucket.push(value.toLowerCase())
+  }
+}
+
+const extractText = (value: unknown): string => {
+  if (typeof value === "string") return value
+  if (Array.isArray(value)) {
+    return value.map(item => extractText(item)).filter(Boolean).join(" ")
+  }
+  if (value && typeof value === "object") {
+    const item = value as Record<string, unknown>
+    return [extractText(item.text), extractText(item.content), extractText(item.value)]
+      .filter(Boolean)
+      .join(" ")
+  }
+  return ""
+}
+
+export const detectPrimaryStackContext = (input: StackDetectionInput): DetectedStack | undefined => {
+  try {
+    const hints: string[] = []
+    const runtime = input.runtimeContext
+    const model = runtime?.model ?? runtime?.runtime?.model
+    const metadata = runtime?.metadata ?? runtime?.runtime?.metadata
+
+    for (const provider of input.providers ?? []) {
+      pushHint(hints, provider.id)
+      pushHint(hints, provider.name)
+    }
+
+    pushHint(hints, model?.id)
+    pushHint(hints, model?.name)
+    pushHint(hints, runtime?.provider)
+    pushHint(hints, metadata?.framework)
+    pushHint(hints, metadata?.stack)
+    pushHint(hints, metadata?.language)
+
+    const recentMessages = (input.messages ?? []).slice(-6)
+    for (const message of recentMessages) {
+      pushHint(hints, message?.model)
+      pushHint(hints, message?.provider)
+      pushHint(hints, extractText(message?.content))
+      pushHint(hints, extractText(message?.message?.content))
+    }
+
+    if (!hints.length) return
+
+    const scores = new Map<DetectedStack, number>()
+    const corpus = hints.join(" ")
+    for (const stack of stackPriority) {
+      let score = 0
+      for (const pattern of stackRules[stack]) {
+        if (pattern.test(corpus)) score += 1
+      }
+      if (score > 0) scores.set(stack, score)
+    }
+
+    let best: DetectedStack | undefined
+    let bestScore = 0
+    for (const stack of stackPriority) {
+      const score = scores.get(stack) ?? 0
+      if (score > bestScore) {
+        best = stack
+        bestScore = score
+      }
+    }
+
+    return best
+  } catch {
+    return
+  }
+}

package/package.json

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

package/phrases.ts

@@ -1,6 +1,8 @@
 // Motivational phrases for busy/loading state
 // Add new phrases here to expand the library
 
+import type { DetectedStack } from "./detection"
+
 export const busyPhrases = [
   // Original classics
   "Ponete las pilas, hermano...",
@@ -55,4 +57,105 @@ 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",
 ]
+
+export const frameworkBusyPhrases: Partial<Record<DetectedStack, string[]>> = {
+  react: [
+    "Ajustando hooks y estado...",
+    "Renderizando componentes con onda...",
+    "Sincronizando props y efectos...",
+  ],
+  angular: [
+    "Ordenando módulos y providers...",
+    "Inyectando dependencias como relojito...",
+    "Acomodando el template de Angular...",
+  ],
+  vue: [
+    "Ajustando refs y reactividad...",
+    "Cocinando un composable fino...",
+    "Vue está pensando en voz baja...",
+  ],
+  node: [
+    "Encolando eventos del loop...",
+    "Levantando handlers de Node...",
+    "Conectando rutas del backend...",
+  ],
+  go: [
+    "Compilando goroutines con paciencia...",
+    "Ajustando canales y concurrencia...",
+    "Go está afilando la respuesta...",
+  ],
+  python: [
+    "Ordenando imports y scripts...",
+    "Entrenando al snake para correr más...",
+    "Ajustando funciones con estilo Python...",
+  ],
+  dotnet: [
+    "Alineando servicios de .NET...",
+    "Puliendo capas con C#...",
+    "Ensamblando pipeline de ASP.NET...",
+  ],
+  svelte: [
+    "Svelte está reaccionando en silencio...",
+    "Ajustando stores y transiciones...",
+    "Compilando magia liviana...",
+  ],
+  nextjs: [
+    "Pre-renderizando rutas de Next...",
+    "Ajustando server components...",
+    "Hidratando la app con elegancia...",
+  ],
+  rust: [
+    "Prestando atención al borrow checker...",
+    "Afinando ownership sin piedad...",
+    "Oxidando bugs, una línea a la vez...",
+  ],
+}
+
+const hashSeed = (value: string): number => {
+  let hash = 0
+  for (let i = 0; i < value.length; i++) {
+    hash = (hash * 31 + value.charCodeAt(i)) >>> 0
+  }
+  return hash
+}
+
+export const pickBusyPhrase = (input: {
+  framework?: DetectedStack
+  cycle: number
+  previous?: string
+}): string => {
+  const frameworkPool = input.framework ? frameworkBusyPhrases[input.framework] : undefined
+  const pool = frameworkPool && frameworkPool.length > 0 ? [...frameworkPool, ...busyPhrases] : busyPhrases
+
+  if (!pool.length) return ""
+
+  const seed = hashSeed(input.framework || "generic")
+  let index = Math.abs(seed + input.cycle * 7) % pool.length
+
+  if (pool.length > 1 && input.previous && pool[index] === input.previous) {
+    index = (index + 1) % pool.length
+  }
+
+  return pool[index]
+}

package/tui.tsx

@@ -12,6 +12,29 @@ const rec = (value: unknown) => {
   return Object.fromEntries(Object.entries(value))
 }
 
+const toNumber = (value: unknown): number | undefined => {
+  if (typeof value !== "number") return
+  if (!Number.isFinite(value) || value <= 0) return
+  return value
+}
+
+const getContextLimitFromRuntime = (ctxValue: any): number | undefined => {
+  const runtimeMetadata = ctxValue?.runtime?.metadata
+  const metadata = ctxValue?.metadata
+  const model = ctxValue?.model
+
+  return (
+    toNumber(runtimeMetadata?.contextLimit) ??
+    toNumber(runtimeMetadata?.context_limit) ??
+    toNumber(metadata?.contextLimit) ??
+    toNumber(metadata?.context_limit) ??
+    toNumber(model?.contextLimit) ??
+    toNumber(model?.context_limit) ??
+    toNumber(ctxValue?.contextLimit) ??
+    toNumber(ctxValue?.context_limit)
+  )
+}
+
 const tui: TuiPlugin = async (api, options) => {
   const boot = cfg(rec(options))
   if (!boot.enabled) return
@@ -61,7 +84,21 @@ 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()} />
+        return (
+          <SidebarMustachi 
+            theme={ctx.theme.current} 
+            config={value()} 
+            isBusy={isBusy()}
+            providers={api.state.provider}
+            branch={() => api.state.vcs?.branch}
+            getMessages={() => {
+              const sessionID = ctx.value?.sessionID
+              return sessionID ? api.state.session.messages(sessionID) : []
+            }}
+            runtimeContext={() => ctx.value}
+            contextLimit={() => getContextLimitFromRuntime(ctx.value)}
+          />
+        )
       },
     },
   })