feat(tui): add Activity Bar + Panels as extensible plugin

packages/opencode/src/cli/cmd/tui/feature-plugins/activity-bar/index.tsx

@@ -0,0 +1,84 @@
+import type { TuiPlugin, TuiPluginApi, TuiPluginModule } from "@mimo-ai/plugin/tui"
+import { For, Show, createMemo } from "solid-js"
+import { PANELS, getPanelComponent } from "./panels"
+
+const id = "activity-bar-panels"
+
+function ActivityBarIcons(props: {
+  api: TuiPluginApi
+  session_id: string
+  active_panels: string[]
+  on_toggle: (panel_id: string) => void
+}) {
+  const theme = () => props.api.theme.current
+  const isActive = (id: string) => props.active_panels.includes(id)
+
+  return (
+    <For each={PANELS}>
+      {(panel) => (
+        <box
+          width={3}
+          height={1}
+          alignItems="center"
+          justifyContent="center"
+          onMouseDown={() => props.on_toggle(panel.id)}
+        >
+          <text
+            fg={isActive(panel.id) ? theme().primary : theme().textMuted}
+          >
+            {panel.icon}
+          </text>
+        </box>
+      )}
+    </For>
+  )
+}
+
+function SidebarPanelContent(props: {
+  api: TuiPluginApi
+  session_id: string
+  panel_id: string
+}) {
+  const panelDef = getPanelComponent(props.panel_id)
+  if (!panelDef) return null
+
+  return (
+    <box flexDirection="column" gap={1} paddingBottom={1}>
+      {panelDef.component(props.api, props.session_id)}
+    </box>
+  )
+}
+
+const tui: TuiPlugin = async (api) => {
+  api.slots.register({
+    order: 100,
+    slots: {
+      activity_bar(_ctx, props) {
+        return (
+          <ActivityBarIcons
+            api={api}
+            session_id={props.session_id}
+            active_panels={props.active_panels}
+            on_toggle={props.on_toggle}
+          />
+        )
+      },
+      sidebar_panel(_ctx, props) {
+        return (
+          <SidebarPanelContent
+            api={api}
+            session_id={props.session_id}
+            panel_id={props.panel_id}
+          />
+        )
+      },
+    },
+  })
+}
+
+const plugin: TuiPluginModule & { id: string } = {
+  id,
+  tui,
+}
+
+export default plugin

packages/opencode/src/cli/cmd/tui/feature-plugins/activity-bar/panels.tsx

@@ -0,0 +1,128 @@
+import type { TuiPluginApi } from "@mimo-ai/plugin/tui"
+import { createMemo, For, Show } from "solid-js"
+
+interface PanelDef {
+  id: string
+  icon: string
+  label: string
+  component: (api: TuiPluginApi, session_id: string) => any
+}
+
+function FileExplorerPanel(api: TuiPluginApi, session_id: string) {
+  const theme = () => api.theme.current
+  const files = createMemo(() => api.state.session.diff(session_id))
+
+  return (
+    <box flexDirection="column" gap={1}>
+      <text fg={theme().text}><b>  File Explorer</b></text>
+      <Show when={files().length > 0}>
+        <For each={files()}>
+          {(file) => (
+            <box flexDirection="row" gap={1}>
+              <text fg={theme().textMuted}>{file.file}</text>
+              <Show when={file.additions}>
+                <text fg={theme().diffAdded}>+{file.additions}</text>
+              </Show>
+              <Show when={file.deletions}>
+                <text fg={theme().diffRemoved}>-{file.deletions}</text>
+              </Show>
+            </box>
+          )}
+        </For>
+      </Show>
+    </box>
+  )
+}
+
+function TasksPanel(api: TuiPluginApi, session_id: string) {
+  const theme = () => api.theme.current
+  const tasks = createMemo(() => api.state.session.task(session_id))
+
+  return (
+    <box flexDirection="column" gap={1}>
+      <text fg={theme().text}><b>  Tasks</b></text>
+      <Show when={tasks().length > 0}>
+        <For each={tasks()}>
+          {(task) => (
+            <box flexDirection="column">
+              <text fg={theme().text}>{task.summary || "Untitled"}</text>
+              <text fg={theme().textMuted}>  {task.status} {task.id}</text>
+            </box>
+          )}
+        </For>
+      </Show>
+    </box>
+  )
+}
+
+function TodoPanel(api: TuiPluginApi, session_id: string) {
+  const theme = () => api.theme.current
+  const todos = createMemo(() => api.state.session.todo(session_id))
+
+  return (
+    <box flexDirection="column" gap={1}>
+      <text fg={theme().text}><b>  Todo</b></text>
+      <Show when={todos().length > 0}>
+        <For each={todos()}>
+          {(todo) => (
+            <text fg={theme().text}>
+              {todo.status === "completed" ? "✓" : "○"} {todo.content}
+            </text>
+          )}
+        </For>
+      </Show>
+    </box>
+  )
+}
+
+function McpPanel(api: TuiPluginApi, session_id: string) {
+  const theme = () => api.theme.current
+  const mcp = createMemo(() => api.state.mcp())
+
+  return (
+    <box flexDirection="column" gap={1}>
+      <text fg={theme().text}><b>  MCP Servers</b></text>
+      <Show when={mcp().length > 0}>
+        <For each={mcp()}>
+          {(server) => (
+            <text fg={theme().text}>
+              {server.status === "connected" ? "●" : "○"} {server.name}
+            </text>
+          )}
+        </For>
+      </Show>
+    </box>
+  )
+}
+
+function LspPanel(api: TuiPluginApi, session_id: string) {
+  const theme = () => api.theme.current
+  const lsp = createMemo(() => api.state.lsp())
+
+  return (
+    <box flexDirection="column" gap={1}>
+      <text fg={theme().text}><b>  LSP Servers</b></text>
+      <Show when={lsp().length > 0}>
+        <For each={lsp()}>
+          {(server) => (
+            <text fg={theme().text}>
+              {server.status === "connected" ? "●" : "○"} {server.id}
+            </text>
+          )}
+        </For>
+      </Show>
+    </box>
+  )
+}
+
+export const PANELS: PanelDef[] = [
+  { id: "files", icon: " ", label: "File Explorer", component: FileExplorerPanel },
+  { id: "tasks", icon: " ", label: "Tasks", component: TasksPanel },
+  { id: "todo", icon: "✓", label: "Todo", component: TodoPanel },
+  { id: "mcp", icon: " ", label: "MCP Servers", component: McpPanel },
+  { id: "lsp", icon: " ", label: "LSP Servers", component: LspPanel },
+]
+
+export function getPanelComponent(id: string): PanelDef | undefined {
+  return PANELS.find(p => p.id === id)
+}

packages/opencode/src/cli/cmd/tui/feature-plugins/sidebar/panels.tsx

@@ -0,0 +1,132 @@
+import type { TuiPlugin, TuiPluginApi, TuiPluginModule } from "@mimo-ai/plugin/tui"
+import { createMemo, For, Show, createSignal } from "solid-js"
+
+const id = "mimocode-sidebar-panels"
+
+interface PanelDef {
+  id: string
+  icon: string
+  label: string
+}
+
+const PANELS: PanelDef[] = [
+  { id: "files", icon: " ", label: "File Explorer" },
+  { id: "skills", icon: "⚡", label: "Skills" },
+  { id: "plugins", icon: " ", label: "Plugins" },
+  { id: "sessions", icon: " ", label: "Sessions" },
+  { id: "model", icon: " ", label: "Model" },
+]
+
+function PanelSection(props: {
+  api: TuiPluginApi
+  panel: PanelDef
+  session_id: string
+}) {
+  const [open, setOpen] = createSignal(true)
+  const theme = () => props.api.theme.current
+
+  const content = createMemo(() => {
+    switch (props.panel.id) {
+      case "files":
+        return props.api.state.session.diff(props.session_id)
+      case "skills":
+        return props.api.state.session.skill?.() ?? []
+      case "plugins":
+        return props.api.state.session.plugin?.() ?? []
+      case "sessions":
+        return Object.values(props.api.state.session ?? {})
+      case "model":
+        return props.api.state.session.model?.() ?? []
+      default:
+        return []
+    }
+  })
+
+  const hasContent = createMemo(() => {
+    const c = content()
+    return Array.isArray(c) ? c.length > 0 : !!c
+  })
+
+  return (
+    <Show when={hasContent()}>
+      <box flexDirection="column" gap={1} paddingBottom={1}>
+        <box
+          flexDirection="row"
+          gap={1}
+          onMouseDown={() => setOpen((x) => !x)}
+        >
+          <text fg={theme().text}>{open() ? "▼" : "▶"}</text>
+          <text fg={theme().text}>
+            <b>{props.panel.icon} {props.panel.label}</b>
+          </text>
+        </box>
+        <Show when={open()}>
+          <box paddingLeft={2}>
+            {props.panel.id === "files" && (
+              <For each={content() as Array<{ file: string; additions: number; deletions: number }>}>
+                {(item) => (
+                  <box flexDirection="row" gap={1}>
+                    <text fg={theme().textMuted}>{item.file}</text>
+                    <Show when={item.additions}>
+                      <text fg={theme().diffAdded}>+{item.additions}</text>
+                    </Show>
+                    <Show when={item.deletions}>
+                      <text fg={theme().diffRemoved}>-{item.deletions}</text>
+                    </Show>
+                  </box>
+                )}
+              </For>
+            )}
+            {props.panel.id === "sessions" && (
+              <For each={Object.values(content() as Record<string, { title?: string; id: string }>)}>
+                {(session) => (
+                  <box flexDirection="column">
+                    <text fg={theme().text}>{session.title || "Untitled"}</text>
+                    <text fg={theme().textMuted}>  {session.id.slice(0, 8)}</text>
+                  </box>
+                )}
+              </For>
+            )}
+            {props.panel.id === "model" && (
+              <text fg={theme().text}>
+                {(content() as { name?: string })?.name || "No model"}
+              </text>
+            )}
+          </box>
+        </Show>
+      </box>
+    </Show>
+  )
+}
+
+function View(props: { api: TuiPluginApi; session_id: string }) {
+  const theme = () => props.api.theme.current
+
+  return (
+    <box flexDirection="column" gap={1}>
+      <For each={PANELS}>
+        {(panel) => (
+          <PanelSection api={props.api} panel={panel} session_id={props.session_id} />
+        )}
+      </For>
+    </box>
+  )
+}
+
+const tui: TuiPlugin = async (api) => {
+  api.slots.register({
+    order: 100,
+    slots: {
+      sidebar_content(_ctx, props) {
+        return <View api={api} session_id={props.session_id} />
+      },
+    },
+  })
+}
+
+const plugin: TuiPluginModule & { id: string } = {
+  id,
+  tui,
+}
+
+export default plugin

packages/opencode/src/cli/cmd/tui/plugin/internal.ts

@@ -10,6 +10,8 @@ import SidebarTask from "../feature-plugins/sidebar/task"
 import SidebarTodo from "../feature-plugins/sidebar/todo"
 import SidebarFiles from "../feature-plugins/sidebar/files"
 import SidebarFooter from "../feature-plugins/sidebar/footer"
+import SidebarPanels from "../feature-plugins/sidebar/panels"
+import ActivityBarPanels from "../feature-plugins/activity-bar"
 import PluginManager from "../feature-plugins/system/plugins"
 import type { TuiPlugin, TuiPluginModule } from "@mimo-ai/plugin/tui"
 
@@ -31,5 +33,7 @@ export const INTERNAL_TUI_PLUGINS: InternalTuiPlugin[] = [
   SidebarTodo,
   SidebarFiles,
   SidebarFooter,
+  SidebarPanels,
+  ActivityBarPanels,
   PluginManager,
 ]