UI: show plugin count in footer

Author: spoons-and-mirrors

packages/opencode/src/cli/cmd/tui/app.tsx

@@ -2,7 +2,18 @@ import { render, useKeyboard, useRenderer, useTerminalDimensions } from "@opentu
 import { Clipboard } from "@tui/util/clipboard"
 import { TextAttributes } from "@opentui/core"
 import { RouteProvider, useRoute } from "@tui/context/route"
-import { Switch, Match, createEffect, untrack, ErrorBoundary, createSignal, onMount, batch } from "solid-js"
+import {
+  Switch,
+  Match,
+  Show,
+  createEffect,
+  untrack,
+  ErrorBoundary,
+  createSignal,
+  onMount,
+  batch,
+  createMemo,
+} from "solid-js"
 import { Installation } from "@/installation"
 import { Global } from "@/global"
 import { DialogProvider, useDialog } from "@tui/ui/dialog"
@@ -29,6 +40,7 @@ import { TuiEvent } from "./event"
 import { KVProvider, useKV } from "./context/kv"
 import { Provider } from "@/provider/provider"
 import { ArgsProvider, useArgs, type Args } from "./context/args"
+import { Locale } from "@/util/locale"
 
 async function getTerminalBackgroundColor(): Promise<"dark" | "light"> {
   // can't set raw mode if not a TTY
@@ -455,7 +467,7 @@ function App() {
           <text fg={theme.textMuted} paddingRight={1}>
             tab
           </text>
-          <text fg={local.agent.color(local.agent.current().name)}>{""}</text>
+          <text fg={local.agent.color(local.agent.current().name)}>{"\ue0b2"}</text>
           <text bg={local.agent.color(local.agent.current().name)} fg={theme.background} wrapMode={undefined}>
             <span style={{ bold: true }}> {local.agent.current().name.toUpperCase()}</span>
             <span> AGENT </span>

packages/opencode/src/cli/cmd/tui/routes/home.tsx

@@ -19,23 +19,34 @@ export function Home() {
     return Object.values(sync.data.mcp).some((x) => x.status === "failed")
   })
 
+  const plugins = createMemo(() => (sync.data.config.plugin ?? []).length)
+
   const Hint = (
-    <Show when={Object.keys(sync.data.mcp).length > 0}>
-      <box flexShrink={0} flexDirection="row" gap={1}>
-        <text fg={theme.text}>
-          <Switch>
-            <Match when={mcpError()}>
-              <span style={{ fg: theme.error }}>•</span> mcp errors{" "}
-              <span style={{ fg: theme.textMuted }}>ctrl+x s</span>
-            </Match>
-            <Match when={true}>
-              <span style={{ fg: theme.success }}>•</span>{" "}
-              {Locale.pluralize(Object.values(sync.data.mcp).length, "{} mcp server", "{} mcp servers")}
-            </Match>
-          </Switch>
-        </text>
-      </box>
-    </Show>
+    <box flexShrink={0} flexDirection="column" gap={0}>
+      <Show when={Object.keys(sync.data.mcp).length > 0}>
+        <box flexDirection="row" gap={1}>
+          <text fg={theme.text}>
+            <Switch>
+              <Match when={mcpError()}>
+                <span style={{ fg: theme.error }}>•</span> mcp errors{" "}
+                <span style={{ fg: theme.textMuted }}>ctrl+x s</span>
+              </Match>
+              <Match when={true}>
+                <span style={{ fg: theme.success }}>•</span>{" "}
+                {Locale.pluralize(Object.values(sync.data.mcp).length, "{} mcp server", "{} mcp servers")}
+              </Match>
+            </Switch>
+          </text>
+        </box>
+      </Show>
+      <Show when={plugins() > 0}>
+        <box flexDirection="row" gap={1}>
+          <text fg={theme.text}>
+            <span style={{ fg: theme.success }}>•</span> {Locale.pluralize(plugins(), "{} plugin", "{} plugins")}
+          </text>
+        </box>
+      </Show>
+    </box>
   )
 
   let prompt: PromptRef