plugin-gentleman 1.1.5 → 1.1.6

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,7 +14,7 @@ import {
   mustachiMustacheOnly,
   zoneColors,
 } from "./ascii-frames"
-import { busyPhrases } from "./phrases"
+import { pickBusyPhrase } from "./phrases"
 
 export type SemanticZone = "monocle" | "eyes" | "mustache" | "tongue" | "unknown"
 
@@ -114,6 +114,79 @@ const getMessageCost = (message: any): number => {
   )
 }
 
+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
@@ -121,6 +194,7 @@ const ProgressBar = (props: {
   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)
@@ -129,7 +203,9 @@ const ProgressBar = (props: {
   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>
+      {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>
   )
@@ -174,19 +250,40 @@ export const SidebarMustachi = (props: {
   theme: TuiThemeCurrent
   config: Cfg
   isBusy?: boolean
-  branch?: string
+  providers?: ReadonlyArray<{ id: string; name: string }>
+  branch?: string | (() => string | undefined)
   getMessages?: () => any[]
-  contextLimit?: number
+  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
     }
@@ -210,17 +307,22 @@ export const SidebarMustachi = (props: {
   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(() => {
@@ -231,7 +333,13 @@ export const SidebarMustachi = (props: {
       }
     }, 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
@@ -244,7 +352,7 @@ export const SidebarMustachi = (props: {
       return
     }
 
-    const shouldShowExpression = props.isBusy || expressiveCycle()
+    const shouldShowExpression = visualState() !== "idle"
 
     if (!shouldShowExpression) {
       setTongueFrame(0)
@@ -263,13 +371,13 @@ export const SidebarMustachi = (props: {
     }
     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) {
@@ -282,6 +390,7 @@ export const SidebarMustachi = (props: {
   // 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
 
@@ -294,8 +403,8 @@ export const SidebarMustachi = (props: {
       }, 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(() => {
@@ -321,7 +430,7 @@ export const SidebarMustachi = (props: {
     let eyeFrame = pupilPositionFrames[pupilIndex()]
 
     // Apply squint if busy/expressive
-    if (props.isBusy || expressiveCycle()) {
+    if (visualState() !== "idle") {
       eyeFrame = eyeSquinted
     }
 
@@ -330,6 +439,8 @@ export const SidebarMustachi = (props: {
       eyeFrame = eyeBlinkHalf
     } else if (blinkFrame() === 2) {
       eyeFrame = eyeBlinkClosed
+    } else {
+      eyeFrame = applyRightEyeContextualMark(eyeFrame, detectedStack())
     }
 
     // Add eyes with zone metadata
@@ -345,7 +456,7 @@ export const SidebarMustachi = (props: {
     })
 
     // 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" })
@@ -355,13 +466,27 @@ export const SidebarMustachi = (props: {
     return lines
   }
 
-  const branchLabel = props.branch?.trim()
-  const messages = props.getMessages?.() ?? []
-  const assistantMessages = messages.filter((message: any) => getMessageRole(message) === "assistant")
+  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 lastAssistantWithTokens = [...assistantMessages].reverse().find((message: any) => hasTokenData(message))
-  const contextTokens = getContextTokens(lastAssistantWithTokens)
-  const totalCost = assistantMessages.reduce((sum: number, message: any) => sum + getMessageCost(message), 0)
+  const totalCost = createMemo(() => {
+    return assistantMessages().reduce((sum: number, message: any) => sum + getMessageCost(message), 0)
+  })
 
   return (
     <box flexDirection="column" alignItems="center">
@@ -372,16 +497,16 @@ export const SidebarMustachi = (props: {
         return <text fg={color}>{paddedLine}</text>
       })}
 
-      {branchLabel && (
-        <text fg={props.theme?.textMuted ?? zoneColors.mustache}>⎇ {branchLabel}</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}
+          totalTokens={contextTokens()}
+          totalCost={totalCost()}
+          contextLimit={resolvedContextLimit()}
         />
       )}
 

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.5",
+  "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
       }
     }

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...",
@@ -76,3 +78,84 @@ export const busyPhrases = [
   "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,17 +84,19 @@ const tui: TuiPlugin = async (api, options) => {
         return <DetectedEnv theme={ctx.theme.current} providers={api.state.provider} config={value()} />
       },
       sidebar_content(ctx) {
-        // 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}
+            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)}
           />
         )
       },