pantheon-opencode 1.1.1-beta.7 → 1.1.1-beta.8

package/src/plugins/tui/dist/tui.tsx

@@ -3,30 +3,11 @@
 /** @jsxImportSource @opentui/solid */
 
 import type { TuiPlugin, TuiPluginApi, TuiPluginModule } from '@opencode-ai/plugin/tui'
-import { createMemo, createSignal, createResource, For, Show } from 'solid-js'
+import { createMemo, createSignal, For, Show } from 'solid-js'
 
-async function readPantheonVersion(api: TuiPluginApi): Promise<string> {
-  try {
-    const worktree = ((api.state as any).path?.worktree ?? '') as string
-    const filePath = worktree ? `${worktree}/package.json` : 'package.json'
-    const result = await api.client.file.read({ query: { path: filePath } })
-    const content = typeof result.content === 'string' ? result.content : String(result.content ?? '')
-    const match = content.match(/"version":\s*"([^"]+)"/)
-    if (match?.[1]) return match[1]
-  } catch { /* fall through */ }
+/* ─── Constants ─────────────────────────────────────────── */
 
-  try {
-    const proc = (api as any).client?.process
-    if (typeof proc?.exec === 'function') {
-      const result = await proc.exec({ command: 'git', args: ['describe', '--tags', '--always'] })
-      const stdout = (result.stdout ?? result.output ?? '') as string
-      const tag = stdout.trim().replace(/^v/, '')
-      if (tag) return tag
-    }
-  } catch { /* fall through */ }
-
-  return '1.0.1'
-}
+const BAR_WIDTH = 20
 
 const COMMANDS = [
   { name: '/pantheon', desc: 'Council synthesis' },
@@ -59,15 +40,110 @@ const AGENTS = [
   { name: 'talos', tier: 'fast' as const, role: 'Hotfixes' },
 ] as const
 
+/* ─── Helpers ───────────────────────────────────────────── */
+
 function safeNum(v: unknown): number {
   return typeof v === 'number' && Number.isFinite(v) ? v : 0
 }
 
+function fmtInt(n: number): string {
+  return Intl.NumberFormat('en-US').format(Math.max(0, Math.round(n)))
+}
+
+function fmtCost(v: number): string {
+  if (v <= 0) return ''
+  if (v < 0.01) return '<$0.01'
+  return `$${v.toFixed(2)}`
+}
+
+function msgTokens(msg: any): number {
+  const t = msg?.tokens ?? msg?.info?.tokens ?? {}
+  return safeNum(t.input) + safeNum(t.output) + safeNum(t.reasoning)
+    + safeNum(t?.cache?.read) + safeNum(t?.cache?.write)
+}
+
+function msgCost(src: any): number {
+  for (const c of [src?.cost, src?.info?.cost, src?.usage?.cost]) {
+    if (typeof c === 'number' && c > 0) return c
+  }
+  return 0
+}
+
+function buildBar(pct: number): string {
+  const clamped = Math.max(0, Math.min(100, pct))
+  const filled = Math.max(0, Math.min(BAR_WIDTH, Math.round((clamped / 100) * BAR_WIDTH)))
+  return '█'.repeat(filled) + '░'.repeat(BAR_WIDTH - filled)
+}
+
+/* ─── Context Bar ──────────────────────────────────────────
+ * Inspired by streetturtle/opencode-better-sidebar (context-progress)
+ * Shows: progress bar, token usage / limit, session cost
+ * Always visible at the top of the sidebar                      */
+
+function ContextBar(props: { api: TuiPluginApi; sessionID: string }) {
+  const messages = createMemo((): any[] => {
+    try { return (props.api.state.session as any).messages(props.sessionID) ?? [] }
+    catch { return [] }
+  })
+
+  const usage = createMemo(() => {
+    const msgs = messages()
+    const lastAssistant = [...msgs].reverse().find((m: any) => {
+      const role = m?.role ?? m?.info?.role
+      return role === 'assistant' && safeNum(m?.tokens?.output) > 0
+    })
+    if (!lastAssistant) return null
+
+    const tokens = msgTokens(lastAssistant)
+    const pid = lastAssistant?.providerID ?? lastAssistant?.info?.providerID
+    const mid = lastAssistant?.modelID ?? lastAssistant?.info?.modelID
+    const provider = pid
+      ? ((props.api.state as any).provider ?? []).find((p: any) => p.id === pid)
+      : null
+    const ctxLimit = safeNum(provider?.models?.[mid ?? '']?.limit?.context)
+    const limit = ctxLimit > 0 ? ctxLimit : 128000
+    return { tokens, limit, percent: ctxLimit > 0 ? Math.round((tokens / ctxLimit) * 100) : 0 }
+  })
+
+  const totalCost = createMemo(() => {
+    const state = ((props.api.state as any).session)?.get?.(props.sessionID)
+    const fromState = msgCost(state)
+    if (fromState > 0) return fromState
+    return messages().reduce((sum: number, m: any) => sum + msgCost(m), 0)
+  })
+
+  const theme = () => props.api.theme.current
+
+  return (
+    <Show when={usage()}>
+      {(u) => {
+        const pct = u().percent
+        const c = theme()
+        const barColor = pct >= 90 ? c.error : pct >= 70 ? c.warning : c.accent
+        const costStr = fmtCost(totalCost())
+        return (
+          <box flexDirection="column">
+            <box flexDirection="row" gap={1}>
+              <text fg={c.text} attributes={{ bold: true }}>Context</text>
+              <text fg={barColor}>{buildBar(pct)}</text>
+              <text fg={barColor}>{`${pct}%`}</text>
+            </box>
+            <text fg={c.textMuted}>
+              {`${fmtInt(u().tokens)} / ${fmtInt(u().limit)} tok${costStr ? `  ${costStr}` : ''}`}
+            </text>
+          </box>
+        )
+      }}
+    </Show>
+  )
+}
+
+/* ─── Main Sidebar View ──────────────────────────────────── */
+
 function View(props: { api: TuiPluginApi; sessionID: string; version: string }) {
   const [showCommands, setShowCommands] = createSignal(false)
   const [showAgents, setShowAgents] = createSignal(false)
   const [showConfig, setShowConfig] = createSignal(false)
-  const [showMemory, setShowMemory] = createSignal(false)
   const [showSubagents, setShowSubagents] = createSignal(false)
 
   const theme = () => props.api.theme.current
@@ -76,166 +152,149 @@ function View(props: { api: TuiPluginApi; sessionID: string; version: string })
     props.api.state.vcs?.branch ? `\u2387 ${props.api.state.vcs.branch}` : null,
   )
 
-  const configInfo = createMemo(() => {
+  const sessionCount = createMemo(() => {
+    try { return props.api.state.session.count() } catch { return 0 }
+  })
+
+  const memoryCount = createMemo(() => {
+    const mem = (props.api.state as any).memory
+    return safeNum(mem?.entries) || safeNum(mem?.count)
+  })
+
+  const configSummary = createMemo(() => {
     const cfg = (props.api.state as any).config
     if (!cfg) return null
     return {
-      plugins: Array.isArray(cfg.plugin) ? cfg.plugin : [],
       mcpCount: cfg.mcp ? Object.keys(cfg.mcp).length : 0,
+      pluginCount: Array.isArray(cfg.plugin) ? cfg.plugin.length : 0,
       autoCompaction: cfg.compaction?.auto === true,
     }
   })
 
-  const memoryInfo = createMemo(() => {
-    const mem = (props.api.state as any).memory
-    if (mem) {
-      const entries = safeNum(mem?.entries) || safeNum(mem?.count)
-      return entries > 0 ? { entries } : null
-    }
-    return null
-  })
-
-  const [subagents] = createResource(
-    () => showSubagents(),
-    async () => {
-      try {
-        const proc = (props.api as any).client?.process
-        if (typeof proc?.exec !== 'function') return null
-        const result = await proc.exec({
-          command: 'opencode',
-          args: ['session', 'list', '--format', 'json'],
-          timeoutMs: 5000,
-        })
-        const stdout = (result.stdout ?? result.output ?? '') as string
-        const sessions = JSON.parse(stdout)
-        if (!Array.isArray(sessions)) return null
-        return sessions
-          .filter((s: any) => s.id !== props.sessionID)
-          .sort((a: any, b: any) => (b.updated ?? 0) - (a.updated ?? 0))
-          .slice(0, 10)
-      } catch { return null }
-    },
-  )
+  const HR = () => <text fg={theme().textMuted}>{'\u2500'.repeat(28)}</text>
 
   return (
     <box flexDirection="column" width="100%">
-      {/* Header */}
+      {/* ── Header ── */}
       <text fg={theme().accent} attributes={{ bold: true }}>
         {`Pantheon v${props.version}`}
       </text>
-
       <Show when={branch()}>
-        {(b) => (<box marginTop={1}><text fg={theme().textMuted}>{b()}</text></box>)}
+        {(b) => <text fg={theme().textMuted}>{b()}</text>}
       </Show>
 
-      {/* Subagents */}
-      <box marginTop={0} onMouseDown={() => setShowSubagents((x) => !x)}>
+      <HR />
+
+      {/* ── Context Bar (always visible) ── */}
+      <ContextBar api={props.api} sessionID={props.sessionID} />
+
+      <HR />
+
+      {/* ── Subagents ── */}
+      <box onMouseDown={() => setShowSubagents((x) => !x)}>
         <text fg={theme().text} attributes={{ bold: true }}>
           {`${showSubagents() ? '\u25bc' : '\u25b6'} Subagents`}
         </text>
-        <text fg={theme().textMuted}>{` (${String(props.api.state.session.count())})`}</text>
+        <text fg={theme().textMuted}>{` (${String(sessionCount())})`}</text>
       </box>
-
       <Show when={showSubagents()}>
-        <Show when={subagents()} fallback={<box marginLeft={1}><text fg={theme().textMuted}>{`sessions: ${String(props.api.state.session.count())}`}</text></box>}>
-          {(sessions) => (
-            <Show when={sessions().length > 0} fallback={<box marginLeft={1}><text fg={theme().textMuted}>(idle)</text></box>}>
-              <box marginLeft={1} flexDirection="column">
-                <For each={sessions().slice(0, 5)}>
-                  {(s: any) => (
-                    <text fg={theme().textMuted}>{`${s.id.slice(0, 8)}... ${s.title?.slice(0, 30) ?? ''}`}</text>
-                  )}
-                </For>
-              </box>
-            </Show>
-          )}
-        </Show>
+        <box marginLeft={1}>
+          <text fg={theme().textMuted}>{`Active sessions: ${String(sessionCount())}`}</text>
+        </box>
       </Show>
 
-      {/* Commands */}
-      <box marginTop={0} onMouseDown={() => setShowCommands((x) => !x)}>
+      {/* ── Commands ── */}
+      <box onMouseDown={() => setShowCommands((x) => !x)}>
         <text fg={theme().text} attributes={{ bold: true }}>
           {`${showCommands() ? '\u25bc' : '\u25b6'} Commands`}
         </text>
         <text fg={theme().textMuted}>{` (${String(COMMANDS.length)})`}</text>
       </box>
-
       <Show when={showCommands()}>
-        <For each={COMMANDS}>
-          {(cmd) => (
-            <box marginLeft={1} onMouseDown={(e) => {
-              e.stopPropagation()
-              try {
-                const cmdApi = (props.api as any).command
-                const cmdName = cmd.name.replace('/', '')
-                if (cmdApi?.trigger?.(cmdName)) return
-              } catch {}
-              props.api.ui?.toast?.({ title: 'Command', message: `Type ${cmd.name} in chat` })
-            }}>
-              <text fg={cmd.name === '/pantheon' ? theme().accent : theme().textMuted}>{cmd.name}</text>
-              <text fg={theme().textMuted}>{` — ${cmd.desc}`}</text>
-            </box>
-          )}
-        </For>
+        <box marginLeft={1} flexDirection="column">
+          <For each={COMMANDS}>
+            {(cmd) => (
+              <box onMouseDown={(e) => {
+                e.stopPropagation()
+                try {
+                  const cmdApi = (props.api as any).command
+                  const cmdName = cmd.name.replace('/', '')
+                  if (cmdApi?.trigger?.(cmdName)) return
+                } catch { /* fall through to toast */ }
+                props.api.ui?.toast?.({ title: 'Command', message: `Type ${cmd.name} in chat` })
+              }}>
+                <text fg={cmd.name === '/pantheon' ? theme().accent : theme().textMuted}>
+                  {cmd.name}
+                </text>
+                <text fg={theme().textMuted}>{` \u2014 ${cmd.desc}`}</text>
+              </box>
+            )}
+          </For>
+        </box>
       </Show>
 
-      {/* Agents */}
-      <box marginTop={0} onMouseDown={() => setShowAgents((x) => !x)}>
+      {/* ── Agents ── */}
+      <box onMouseDown={() => setShowAgents((x) => !x)}>
         <text fg={theme().text} attributes={{ bold: true }}>
           {`${showAgents() ? '\u25bc' : '\u25b6'} Agents`}
         </text>
         <text fg={theme().textMuted}>{` (${String(AGENTS.length)})`}</text>
       </box>
-
       <Show when={showAgents()}>
-        <For each={AGENTS}>
-          {(agent) => (
-            <box marginLeft={1}>
-              <text fg={agent.tier === 'premium' ? theme().accent : theme().textMuted}>
-                {`${agent.tier === 'premium' ? '\u2726 ' : '\u00b7 '}${agent.name}`}
-              </text>
-              <text fg={theme().textMuted}>{` — ${agent.role}`}</text>
-            </box>
-          )}
-        </For>
+        <box marginLeft={1} flexDirection="column">
+          <For each={AGENTS}>
+            {(agent) => (
+              <box>
+                <text fg={agent.tier === 'premium' ? theme().accent : theme().textMuted}>
+                  {`${agent.tier === 'premium' ? '\u2726 ' : '\u00b7 '}${agent.name}`}
+                </text>
+                <text fg={theme().textMuted}>{` \u2014 ${agent.role}`}</text>
+              </box>
+            )}
+          </For>
+        </box>
       </Show>
 
-      {/* Config */}
-      <box marginTop={0} onMouseDown={() => setShowConfig((x) => !x)}>
+      {/* ── Config ── */}
+      <box onMouseDown={() => setShowConfig((x) => !x)}>
         <text fg={theme().text} attributes={{ bold: true }}>
           {`${showConfig() ? '\u25bc' : '\u25b6'} Config`}
         </text>
       </box>
-
       <Show when={showConfig()}>
-        <Show when={configInfo()} fallback={<box marginLeft={1}><text fg={theme().textMuted}>(no config data)</text></box>}>
+        <Show when={configSummary()} fallback={<box marginLeft={1}><text fg={theme().textMuted}>No config data</text></box>}>
           {(cfg) => (
             <box marginLeft={1} flexDirection="column">
-              <text fg={theme().textMuted}>{`MCP servers: ${String(cfg().mcpCount)}`}</text>
+              <text fg={theme().textMuted}>{`MCP servers: ${String(cfg().mcpCount)}  Plugins: ${String(cfg().pluginCount)}`}</text>
               <text fg={theme().textMuted}>{`Auto-compaction: ${cfg().autoCompaction ? 'ON' : 'OFF'}`}</text>
             </box>
           )}
         </Show>
       </Show>
 
-      {/* Memory */}
-      <box marginTop={0} onMouseDown={() => setShowMemory((x) => !x)}>
-        <text fg={theme().text} attributes={{ bold: true }}>
-          {`${showMemory() ? '\u25bc' : '\u25b6'} Memory`}
+      {/* ── Memory (always visible summary) ── */}
+      <box marginTop={1}>
+        <text fg={theme().textMuted}>
+          {`Memory: ${memoryCount() > 0 ? `${fmtInt(memoryCount())} entries` : '0 entries'}`}
         </text>
       </box>
-
-      <Show when={showMemory()}>
-        <Show when={memoryInfo()} fallback={<box marginLeft={1}><text fg={theme().textMuted}>(no data)</text></box>}>
-          {(mem) => (<box marginLeft={1}><text fg={theme().textMuted}>{`Entries: ${String(mem().entries)}`}</text></box>)}
-        </Show>
-      </Show>
     </box>
   )
 }
 
+/* ─── Plugin Registration ────────────────────────────────── */
+
 const tui: TuiPlugin = async (api, _options, _meta) => {
-  const version = await readPantheonVersion(api)
+  let version = '5.0.0'
+  try {
+    const wt = ((api.state as any).path?.worktree ?? '') as string
+    const fp = wt ? `${wt}/package.json` : 'package.json'
+    const result = await api.client.file.read({ query: { path: fp } })
+    const content = String(result?.content ?? '')
+    const match = content.match(/"version":\s*"([^"]+)"/)
+    if (match?.[1]) version = match[1]
+  } catch { /* use default */ }
+
   api.slots.register({
     order: 900,
     slots: {