refactor

Author: spoons-and-mirrors

packages/opencode/src/cli/cmd/tui/component/dialog-status.tsx

@@ -11,6 +11,36 @@ export function DialogStatus() {
 
   const enabledFormatters = createMemo(() => sync.data.formatter.filter((f) => f.enabled))
 
+  const plugins = createMemo(() => {
+    const pluginList = sync.data.config.plugin ?? []
+    return pluginList.map((plugin) => {
+      if (plugin.startsWith("file://")) {
+        const path = plugin.replace("file://", "")
+        const parts = path.split("/")
+        const filename = parts.pop() || path
+
+        // If it's a file with extension (like index.ts or workflow.ts)
+        if (filename.includes(".")) {
+          const basename = filename.split(".")[0]
+          // If the basename is generic (like "index"), use the parent directory name
+          if (basename === "index") {
+            const dirname = parts.pop()
+            const name = dirname || basename
+            return { raw: plugin, name, type: "local" as const }
+          }
+          // Otherwise use the basename without extension (like "workflow" from "workflow.ts")
+          return { raw: plugin, name: basename, type: "local" as const }
+        }
+
+        return { raw: plugin, name: filename, type: "local" as const }
+      }
+      const lastAtIndex = plugin.lastIndexOf("@")
+      const name = lastAtIndex > 0 ? plugin.substring(0, lastAtIndex) : plugin
+      const version = lastAtIndex > 0 ? plugin.substring(lastAtIndex + 1) : "latest"
+      return { raw: plugin, name, version, type: "npm" as const }
+    })
+  })
+
   return (
     <box paddingLeft={2} paddingRight={2} gap={1} paddingBottom={1}>
       <box flexDirection="row" justifyContent="space-between">
@@ -99,6 +129,31 @@ export function DialogStatus() {
           </For>
         </box>
       </Show>
+      <Show when={plugins().length > 0} fallback={<text fg={theme.text}>No Plugins</text>}>
+        <box>
+          <text fg={theme.text}>{plugins().length} Plugins</text>
+          <For each={plugins()}>
+            {(item) => (
+              <box flexDirection="row" gap={1}>
+                <text
+                  flexShrink={0}
+                  style={{
+                    fg: theme.success,
+                  }}
+                >
+                  •
+                </text>
+                <text wrapMode="word" fg={theme.text}>
+                  <b>{item.name}</b>
+                  <Show when={item.type === "npm" && item.version}>
+                    <span style={{ fg: theme.textMuted }}> @{item.version}</span>
+                  </Show>
+                </text>
+              </box>
+            )}
+          </For>
+        </box>
+      </Show>
     </box>
   )
 }

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

@@ -19,34 +19,23 @@ export function Home() {
     return Object.values(sync.data.mcp).some((x) => x.status === "failed")
   })
 
-  const plugins = createMemo(() => (sync.data.config.plugin ?? []).length)
-
   const Hint = (
-    <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>
+    <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>
   )
 
   let prompt: PromptRef