diff --git a/packages/opencode/src/cli/cmd/tui/feature-plugins/activity-bar/index.tsx b/packages/opencode/src/cli/cmd/tui/feature-plugins/activity-bar/index.tsx
new file mode 100644
index 00000000..8ad68a8e
--- /dev/null
+++ b/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
diff --git a/packages/opencode/src/cli/cmd/tui/feature-plugins/activity-bar/panels.tsx b/packages/opencode/src/cli/cmd/tui/feature-plugins/activity-bar/panels.tsx
new file mode 100644
index 00000000..512b653e
--- /dev/null
+++ b/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)
+}
diff --git a/packages/opencode/src/cli/cmd/tui/feature-plugins/sidebar/panels.tsx b/packages/opencode/src/cli/cmd/tui/feature-plugins/sidebar/panels.tsx
new file mode 100644
index 00000000..05e7789c
--- /dev/null
+++ b/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
diff --git a/packages/opencode/src/cli/cmd/tui/plugin/internal.ts b/packages/opencode/src/cli/cmd/tui/plugin/internal.ts
index 1b6cd996..eb485d91 100644
--- a/packages/opencode/src/cli/cmd/tui/plugin/internal.ts
+++ b/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,
 ]
diff --git a/packages/opencode/src/cli/cmd/tui/routes/session/activity-bar.tsx b/packages/opencode/src/cli/cmd/tui/routes/session/activity-bar.tsx
new file mode 100644
index 00000000..b890f432
--- /dev/null
+++ b/packages/opencode/src/cli/cmd/tui/routes/session/activity-bar.tsx
@@ -0,0 +1,81 @@
+import { For, Show, createMemo } from "solid-js"
+import { useTheme } from "../../context/theme"
+import { TuiPluginRuntime } from "../../plugin"
+
+export type PanelID = string
+
+interface PanelDef {
+  id: PanelID
+  icon: string
+  label: string
+}
+
+const BUILTIN_PANELS: PanelDef[] = [
+  { id: "files", icon: " ", label: "File Explorer" },
+  { id: "tasks", icon: " ", label: "Tasks" },
+  { id: "todo", icon: "✓", label: "Todo" },
+  { id: "mcp", icon: " ", label: "MCP Servers" },
+  { id: "lsp", icon: " ", label: "LSP Servers" },
+]
+
+export function ActivityBar(props: {
+  sessionID: string
+  activePanels: PanelID[]
+  onTogglePanel: (panel: PanelID) => void
+  visible: boolean
+  onToggle: () => void
+}) {
+  const { theme } = useTheme()
+
+  const isActive = (id: PanelID) => props.activePanels.includes(id)
+
+  return (
+    <Show when={props.visible}>
+      <box
+        width={3}
+        height="100%"
+        backgroundColor={theme.backgroundPanel}
+        flexDirection="column"
+        justifyContent="space-between"
+        paddingTop={1}
+        paddingBottom={1}
+      >
+        <box gap={1} alignItems="center">
+          <TuiPluginRuntime.Slot
+            name="activity_bar"
+            session_id={props.sessionID}
+            active_panels={props.activePanels}
+            on_toggle={props.onTogglePanel}
+          >
+            <For each={BUILTIN_PANELS}>
+              {(panel) => (
+                <box
+                  width={3}
+                  height={1}
+                  alignItems="center"
+                  justifyContent="center"
+                  onMouseDown={() => props.onTogglePanel(panel.id)}
+                >
+                  <text
+                    fg={isActive(panel.id) ? theme.primary : theme.textMuted}
+                  >
+                    {panel.icon}
+                  </text>
+                </box>
+              )}
+            </For>
+          </TuiPluginRuntime.Slot>
+        </box>
+
+        <box alignItems="center" onMouseDown={props.onToggle}>
+          <text fg={theme.textMuted}>
+            {props.visible ? "◁" : "▷"}
+          </text>
+        </box>
+      </box>
+    </Show>
+  )
+}
+
+export { BUILTIN_PANELS }
+export type { PanelDef }
diff --git a/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx b/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx
index c2a6f525..ec9394d7 100644
--- a/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx
+++ b/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx
@@ -64,6 +64,7 @@ import { DialogTimeline } from "./dialog-timeline"
 import { DialogForkFromTimeline } from "./dialog-fork-from-timeline"
 import { DialogSessionRename } from "../../component/dialog-session-rename"
 import { Sidebar } from "./sidebar"
+import { ActivityBar, type PanelID } from "./activity-bar"
 import { SubagentFooter } from "./subagent-footer.tsx"
 import { DialogSubagent } from "./dialog-subagent.tsx"
 import { Flag } from "@/flag/flag"
@@ -181,15 +182,22 @@ export function Session() {
   const [showGenericToolOutput, setShowGenericToolOutput] = kv.signal("generic_tool_output_visibility", false)
 
   const wide = createMemo(() => dimensions().width > 120)
+  const [activePanels, setActivePanels] = createSignal<PanelID[]>([])
+  const togglePanel = (panel: PanelID) => {
+    setActivePanels((prev) =>
+      prev.includes(panel) ? prev.filter((p) => p !== panel) : [...prev, panel]
+    )
+  }
   const sidebarVisible = createMemo(() => {
     if (session()?.parentID) return false
     if (currentAgentID() !== "main") return false
     if (sidebarOpen()) return true
+    if (activePanels().length > 0) return true
     if (sidebar() === "auto" && wide()) return true
     return false
   })
   const showTimestamps = createMemo(() => timestamps() === "show")
-  const contentWidth = createMemo(() => dimensions().width - (sidebarVisible() ? 42 : 0) - 4)
+  const contentWidth = createMemo(() => dimensions().width - (sidebarVisible() ? 45 : 0) - 4)
   const providers = createMemo(() => Model.index(sync.data.provider))
 
   const scrollAcceleration = createMemo(() => getScrollAcceleration(tuiConfig))
@@ -1216,9 +1224,23 @@ export function Session() {
           <Toast />
         </box>
         <Show when={sidebarVisible()}>
+          <ActivityBar
+            sessionID={route.sessionID}
+            activePanels={activePanels()}
+            onTogglePanel={togglePanel}
+            visible={sidebarVisible()}
+            onToggle={() => {
+              batch(() => {
+                const isVisible = sidebarVisible()
+                setSidebar(() => (isVisible ? "hide" : "auto"))
+                setSidebarOpen(!isVisible)
+                if (isVisible) setActivePanels([])
+              })
+            }}
+          />
           <Switch>
             <Match when={wide()}>
-              <Sidebar sessionID={route.sessionID} />
+              <Sidebar sessionID={route.sessionID} activePanels={activePanels()} />
             </Match>
             <Match when={!wide()}>
               <box
@@ -1230,7 +1252,7 @@ export function Session() {
                 alignItems="flex-end"
                 backgroundColor={RGBA.fromInts(0, 0, 0, 70)}
               >
-                <Sidebar sessionID={route.sessionID} />
+                <Sidebar sessionID={route.sessionID} activePanels={activePanels()} />
               </box>
             </Match>
           </Switch>
diff --git a/packages/opencode/src/cli/cmd/tui/routes/session/panels/file-explorer.tsx b/packages/opencode/src/cli/cmd/tui/routes/session/panels/file-explorer.tsx
new file mode 100644
index 00000000..04451b92
--- /dev/null
+++ b/packages/opencode/src/cli/cmd/tui/routes/session/panels/file-explorer.tsx
@@ -0,0 +1,73 @@
+import { createMemo, createSignal, For, Show } from "solid-js"
+import { useTheme } from "../../../context/theme"
+import { useDirectory } from "@tui/context/directory"
+import fs from "fs/promises"
+import path from "path"
+
+interface FileEntry {
+  name: string
+  isDirectory: boolean
+  children?: FileEntry[]
+  expanded?: boolean
+}
+
+export function FileExplorerPanel() {
+  const { theme } = useTheme()
+  const directory = useDirectory()
+  const [files, setFiles] = createSignal<FileEntry[]>([])
+  const [loading, setLoading] = createSignal(true)
+
+  const loadDir = async (dirPath: string): Promise<FileEntry[]> => {
+    try {
+      const entries = await fs.readdir(dirPath, { withFileTypes: true })
+      const result: FileEntry[] = []
+      for (const entry of entries) {
+        if (entry.name.startsWith(".")) continue
+        if (entry.name === "node_modules") continue
+        result.push({
+          name: entry.name,
+          isDirectory: entry.isDirectory(),
+        })
+      }
+      return result.sort((a, b) => {
+        if (a.isDirectory !== b.isDirectory) return a.isDirectory ? -1 : 1
+        return a.name.localeCompare(b.name)
+      })
+    } catch {
+      return []
+    }
+  }
+
+  createMemo(async () => {
+    const dir = directory().split(":")[0].replace("~", process.env.HOME || "")
+    const entries = await loadDir(dir)
+    setFiles(entries)
+    setLoading(false)
+  })
+
+  return (
+    <box flexDirection="column" gap={1}>
+      <text fg={theme.text}>
+        <b>File Explorer</b>
+      </text>
+      <text fg={theme.textMuted}>{directory()}</text>
+      <Show when={!loading()}>
+        <For each={files()}>
+          {(entry) => (
+            <box flexDirection="row" gap={1}>
+              <text fg={theme.textMuted}>
+                {entry.isDirectory ? " " : " "}
+              </text>
+              <text fg={entry.isDirectory ? theme.primary : theme.text}>
+                {entry.name}
+              </text>
+            </box>
+          )}
+        </For>
+      </Show>
+      <Show when={loading()}>
+        <text fg={theme.textMuted}>Loading...</text>
+      </Show>
+    </box>
+  )
+}
diff --git a/packages/opencode/src/cli/cmd/tui/routes/session/panels/index.ts b/packages/opencode/src/cli/cmd/tui/routes/session/panels/index.ts
new file mode 100644
index 00000000..b311c337
--- /dev/null
+++ b/packages/opencode/src/cli/cmd/tui/routes/session/panels/index.ts
@@ -0,0 +1,5 @@
+export { FileExplorerPanel } from "./file-explorer"
+export { TasksPanel } from "./tasks"
+export { TodoPanel } from "./todo"
+export { McpPanel } from "./mcp"
+export { LspPanel } from "./lsp"
diff --git a/packages/opencode/src/cli/cmd/tui/routes/session/panels/lsp.tsx b/packages/opencode/src/cli/cmd/tui/routes/session/panels/lsp.tsx
new file mode 100644
index 00000000..4c376f8b
--- /dev/null
+++ b/packages/opencode/src/cli/cmd/tui/routes/session/panels/lsp.tsx
@@ -0,0 +1,39 @@
+import { createMemo, For, Show } from "solid-js"
+import { useTheme } from "../../../context/theme"
+import { useSync } from "@tui/context/sync"
+
+interface LspServer {
+  id: string
+  root: string
+  status: string
+}
+
+export function LspPanel() {
+  const { theme } = useTheme()
+  const sync = useSync()
+
+  const servers = createMemo(() => {
+    return sync.data.lsp.map((item) => ({
+      id: item.id,
+      root: item.root,
+      status: item.status,
+    }))
+  })
+
+  return (
+    <box flexDirection="column" gap={1}>
+      <text fg={theme.text}>
+        <b>LSP Servers</b>
+      </text>
+      <Show when={servers().length > 0}>
+        <For each={servers()}>
+          {(server) => (
+            <text fg={theme.text}>
+              {server.status === "connected" ? "●" : "○"} {server.id}
+            </text>
+          )}
+        </For>
+      </Show>
+    </box>
+  )
+}
diff --git a/packages/opencode/src/cli/cmd/tui/routes/session/panels/mcp.tsx b/packages/opencode/src/cli/cmd/tui/routes/session/panels/mcp.tsx
new file mode 100644
index 00000000..2b002f8b
--- /dev/null
+++ b/packages/opencode/src/cli/cmd/tui/routes/session/panels/mcp.tsx
@@ -0,0 +1,41 @@
+import { createMemo, For, Show } from "solid-js"
+import { useTheme } from "../../../context/theme"
+import { useSync } from "@tui/context/sync"
+
+interface McpServer {
+  name: string
+  status: string
+  error?: string
+}
+
+export function McpPanel() {
+  const { theme } = useTheme()
+  const sync = useSync()
+
+  const servers = createMemo(() => {
+    return Object.entries(sync.data.mcp)
+      .sort(([a], [b]) => a.localeCompare(b))
+      .map(([name, item]) => ({
+        name,
+        status: item.status,
+        error: item.status === "failed" ? item.error : undefined,
+      }))
+  })
+
+  return (
+    <box flexDirection="column" gap={1}>
+      <text fg={theme.text}>
+        <b>MCP Servers</b>
+      </text>
+      <Show when={servers().length > 0}>
+        <For each={servers()}>
+          {(server) => (
+            <text fg={theme.text}>
+              {server.status === "connected" ? "●" : "○"} {server.name}
+            </text>
+          )}
+        </For>
+      </Show>
+    </box>
+  )
+}
diff --git a/packages/opencode/src/cli/cmd/tui/routes/session/panels/model.tsx b/packages/opencode/src/cli/cmd/tui/routes/session/panels/model.tsx
new file mode 100644
index 00000000..f9601099
--- /dev/null
+++ b/packages/opencode/src/cli/cmd/tui/routes/session/panels/model.tsx
@@ -0,0 +1,27 @@
+import { createMemo, For, Show } from "solid-js"
+import { useTheme } from "@tui/context/theme"
+import { useSync } from "@tui/context/sync"
+
+export function ModelPanel() {
+  const { theme } = useTheme()
+  const sync = useSync()
+
+  const model = createMemo(() => sync.data.model)
+
+  return (
+    <box flexDirection="column" gap={1}>
+      <text fg={theme.text}>
+        <b>Model</b>
+      </text>
+      <Show when={model()}>
+        <box flexDirection="column" gap={0}>
+          <text fg={theme.text}>{model()!.name || "Unknown"}</text>
+          <text fg={theme.textMuted}>  {model()!.provider || ""}</text>
+        </box>
+      </Show>
+      <Show when={!model()}>
+        <text fg={theme.textMuted}>No model selected</text>
+      </Show>
+    </box>
+  )
+}
diff --git a/packages/opencode/src/cli/cmd/tui/routes/session/panels/plugins.tsx b/packages/opencode/src/cli/cmd/tui/routes/session/panels/plugins.tsx
new file mode 100644
index 00000000..68f990fa
--- /dev/null
+++ b/packages/opencode/src/cli/cmd/tui/routes/session/panels/plugins.tsx
@@ -0,0 +1,42 @@
+import { createMemo, For } from "solid-js"
+import { useTheme } from "@tui/context/theme"
+
+interface Plugin {
+  name: string
+  version: string
+  enabled: boolean
+}
+
+export function PluginsPanel() {
+  const { theme } = useTheme()
+
+  const plugins = createMemo<Plugin[]>(() => {
+    return [
+      { name: "opencode-puter-auth", version: "1.0.0", enabled: true },
+      { name: "@zenobius/opencode-skillful", version: "1.2.0", enabled: true },
+      { name: "@opencode-manager/memory", version: "0.9.0", enabled: true },
+      { name: "work-checkpoints", version: "1.0.0", enabled: false },
+    ]
+  })
+
+  return (
+    <box flexDirection="column" gap={1}>
+      <text fg={theme.text}>
+        <b>Plugins</b>
+      </text>
+      <For each={plugins()}>
+        {(plugin) => (
+          <box flexDirection="column" gap={0}>
+            <box flexDirection="row" gap={1} justifyContent="space-between">
+              <text fg={theme.text}>{plugin.name}</text>
+              <text fg={plugin.enabled ? theme.success : theme.textMuted}>
+                {plugin.enabled ? "●" : "○"}
+              </text>
+            </box>
+            <text fg={theme.textMuted}>  v{plugin.version}</text>
+          </box>
+        )}
+      </For>
+    </box>
+  )
+}
diff --git a/packages/opencode/src/cli/cmd/tui/routes/session/panels/sessions.tsx b/packages/opencode/src/cli/cmd/tui/routes/session/panels/sessions.tsx
new file mode 100644
index 00000000..65f236c8
--- /dev/null
+++ b/packages/opencode/src/cli/cmd/tui/routes/session/panels/sessions.tsx
@@ -0,0 +1,33 @@
+import { createMemo, For, Show } from "solid-js"
+import { useTheme } from "@tui/context/theme"
+import { useSync } from "@tui/context/sync"
+
+export function SessionsPanel() {
+  const { theme } = useTheme()
+  const sync = useSync()
+
+  const sessions = createMemo(() => {
+    return Object.values(sync.data.session ?? {})
+  })
+
+  return (
+    <box flexDirection="column" gap={1}>
+      <text fg={theme.text}>
+        <b>Sessions</b>
+      </text>
+      <Show when={sessions().length > 0}>
+        <For each={sessions()}>
+          {(session) => (
+            <box flexDirection="column" gap={0}>
+              <text fg={theme.text}>{session.title || "Untitled"}</text>
+              <text fg={theme.textMuted}>  {session.id.slice(0, 8)}</text>
+            </box>
+          )}
+        </For>
+      </Show>
+      <Show when={sessions().length === 0}>
+        <text fg={theme.textMuted}>No sessions</text>
+      </Show>
+    </box>
+  )
+}
diff --git a/packages/opencode/src/cli/cmd/tui/routes/session/panels/skills.tsx b/packages/opencode/src/cli/cmd/tui/routes/session/panels/skills.tsx
new file mode 100644
index 00000000..01cd9d89
--- /dev/null
+++ b/packages/opencode/src/cli/cmd/tui/routes/session/panels/skills.tsx
@@ -0,0 +1,39 @@
+import { createMemo, For, Show } from "solid-js"
+import { useTheme } from "@tui/context/theme"
+
+interface Skill {
+  name: string
+  description: string
+  enabled: boolean
+}
+
+export function SkillsPanel() {
+  const { theme } = useTheme()
+
+  const skills = createMemo<Skill[]>(() => {
+    return [
+      { name: "brainstorming", description: "Creative work planning", enabled: true },
+      { name: "systematic-debugging", description: "Bug investigation", enabled: true },
+      { name: "test-driven-development", description: "TDD workflow", enabled: false },
+      { name: "writing-plans", description: "Implementation planning", enabled: true },
+    ]
+  })
+
+  return (
+    <box flexDirection="column" gap={1}>
+      <text fg={theme.text}>
+        <b>Skills</b>
+      </text>
+      <For each={skills()}>
+        {(skill) => (
+          <box flexDirection="row" gap={1} justifyContent="space-between">
+            <text fg={theme.text}>{skill.name}</text>
+            <text fg={skill.enabled ? theme.success : theme.textMuted}>
+              {skill.enabled ? "●" : "○"}
+            </text>
+          </box>
+        )}
+      </For>
+    </box>
+  )
+}
diff --git a/packages/opencode/src/cli/cmd/tui/routes/session/panels/tasks.tsx b/packages/opencode/src/cli/cmd/tui/routes/session/panels/tasks.tsx
new file mode 100644
index 00000000..e4aebf29
--- /dev/null
+++ b/packages/opencode/src/cli/cmd/tui/routes/session/panels/tasks.tsx
@@ -0,0 +1,42 @@
+import { createMemo, For, Show } from "solid-js"
+import { useTheme } from "../../../context/theme"
+import { useSync } from "@tui/context/sync"
+
+interface Task {
+  id: string
+  status: string
+  summary: string
+  owner?: string
+  ended_at?: string
+}
+
+export function TasksPanel() {
+  const { theme } = useTheme()
+  const sync = useSync()
+
+  const tasks = createMemo(() => {
+    const sessionData = sync.data.session
+    if (!sessionData) return []
+    return Object.values(sessionData).flatMap((session: any) => 
+      sync.data.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>
+  )
+}
diff --git a/packages/opencode/src/cli/cmd/tui/routes/session/panels/todo.tsx b/packages/opencode/src/cli/cmd/tui/routes/session/panels/todo.tsx
new file mode 100644
index 00000000..e0aa1dc9
--- /dev/null
+++ b/packages/opencode/src/cli/cmd/tui/routes/session/panels/todo.tsx
@@ -0,0 +1,38 @@
+import { createMemo, For, Show } from "solid-js"
+import { useTheme } from "../../../context/theme"
+import { useSync } from "@tui/context/sync"
+
+interface TodoItem {
+  content: string
+  status: string
+}
+
+export function TodoPanel() {
+  const { theme } = useTheme()
+  const sync = useSync()
+
+  const todos = createMemo(() => {
+    const sessionData = sync.data.session
+    if (!sessionData) return []
+    return Object.values(sessionData).flatMap((session: any) => 
+      sync.data.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>
+  )
+}
diff --git a/packages/opencode/src/cli/cmd/tui/routes/session/sidebar.tsx b/packages/opencode/src/cli/cmd/tui/routes/session/sidebar.tsx
index 6d92752e..9525f4d5 100644
--- a/packages/opencode/src/cli/cmd/tui/routes/session/sidebar.tsx
+++ b/packages/opencode/src/cli/cmd/tui/routes/session/sidebar.tsx
@@ -1,14 +1,33 @@
 import { useProject } from "@tui/context/project"
 import { useSync } from "@tui/context/sync"
-import { createMemo, Show } from "solid-js"
+import { createMemo, For, Show } from "solid-js"
 import { useTheme } from "../../context/theme"
 import { useTuiConfig } from "../../context/tui-config"
 import { InstallationChannel, InstallationVersion } from "@/installation/version"
 import { TuiPluginRuntime } from "../../plugin"
-
 import { getScrollAcceleration } from "../../util/scroll"
+import type { PanelID } from "./activity-bar"
+import {
+  FileExplorerPanel,
+  TasksPanel,
+  TodoPanel,
+  McpPanel,
+  LspPanel,
+} from "./panels"
+
+const PANEL_COMPONENTS: Record<string, () => any> = {
+  files: FileExplorerPanel,
+  tasks: TasksPanel,
+  todo: TodoPanel,
+  mcp: McpPanel,
+  lsp: LspPanel,
+}
 
-export function Sidebar(props: { sessionID: string; overlay?: boolean }) {
+export function Sidebar(props: {
+  sessionID: string
+  overlay?: boolean
+  activePanels?: PanelID[]
+}) {
   const project = useProject()
   const sync = useSync()
   const { theme } = useTheme()
@@ -27,6 +46,7 @@ export function Sidebar(props: { sessionID: string; overlay?: boolean }) {
     return `${info.type}: ${info.name}`
   }
   const scrollAcceleration = createMemo(() => getScrollAcceleration(tuiConfig))
+  const hasActivePanels = () => (props.activePanels?.length ?? 0) > 0
 
   return (
     <Show when={session()}>
@@ -51,37 +71,77 @@ export function Sidebar(props: { sessionID: string; overlay?: boolean }) {
           }}
         >
           <box flexShrink={0} gap={1} paddingRight={1}>
-            <TuiPluginRuntime.Slot
-              name="sidebar_title"
-              mode="single_winner"
-              session_id={props.sessionID}
-              title={session()!.title}
-              share_url={session()!.share?.url}
-            >
-              <box paddingRight={1}>
-                <text fg={theme.text}>
-                  <b>{session()!.title}</b>
-                </text>
-                <Show when={InstallationChannel !== "latest"}>
-                  <text fg={theme.textMuted}>{props.sessionID}</text>
-                </Show>
-                <Show when={session()!.workspaceID}>
-                  <text fg={theme.textMuted}>
-                    <span style={{ fg: workspaceStatus() === "connected" ? theme.success : theme.error }}>●</span>{" "}
-                    {workspaceLabel()}
+            <Show when={hasActivePanels()}>
+              <For each={props.activePanels!}>
+                {(panelId) => {
+                  const Component = PANEL_COMPONENTS[panelId]
+                  if (Component) {
+                    return (
+                      <box flexDirection="column" gap={1} paddingBottom={1}>
+                        <Component />
+                      </box>
+                    )
+                  }
+                  return (
+                    <TuiPluginRuntime.Slot
+                      name="sidebar_panel"
+                      session_id={props.sessionID}
+                      panel_id={panelId}
+                    />
+                  )
+                }}
+              </For>
+            </Show>
+
+            <Show when={!hasActivePanels()}>
+              <TuiPluginRuntime.Slot
+                name="sidebar_title"
+                mode="single_winner"
+                session_id={props.sessionID}
+                title={session()!.title}
+                share_url={session()!.share?.url}
+              >
+                <box paddingRight={1}>
+                  <text fg={theme.text}>
+                    <b>{session()!.title}</b>
                   </text>
-                </Show>
-                <Show when={session()!.share?.url}>
-                  <text fg={theme.textMuted}>{session()!.share!.url}</text>
-                </Show>
-              </box>
-            </TuiPluginRuntime.Slot>
-            <TuiPluginRuntime.Slot name="sidebar_content" session_id={props.sessionID} />
+                  <Show when={InstallationChannel !== "latest"}>
+                    <text fg={theme.textMuted}>{props.sessionID}</text>
+                  </Show>
+                  <Show when={session()!.workspaceID}>
+                    <text fg={theme.textMuted}>
+                      <span
+                        style={{
+                          fg:
+                            workspaceStatus() === "connected"
+                              ? theme.success
+                              : theme.error,
+                        }}
+                      >
+                        ●
+                      </span>{" "}
+                      {workspaceLabel()}
+                    </text>
+                  </Show>
+                  <Show when={session()!.share?.url}>
+                    <text fg={theme.textMuted}>{session()!.share!.url}</text>
+                  </Show>
+                </box>
+              </TuiPluginRuntime.Slot>
+              <TuiPluginRuntime.Slot
+                name="sidebar_content"
+                session_id={props.sessionID}
+              />
+            </Show>
           </box>
         </scrollbox>
 
         <box flexShrink={0} gap={1} paddingTop={1}>
-          <TuiPluginRuntime.Slot name="sidebar_footer" mode="single_winner" session_id={props.sessionID}>
+          <TuiPluginRuntime.Slot
+            name="sidebar_footer"
+            mode="single_winner"
+            session_id={props.sessionID}
+          >
             <text fg={theme.textMuted}>
               <span style={{ fg: theme.success }}>•</span> <b>Open</b>
               <span style={{ fg: theme.text }}>
diff --git a/packages/plugin/src/tui.ts b/packages/plugin/src/tui.ts
index a7c4b551..a327c1e2 100644
--- a/packages/plugin/src/tui.ts
+++ b/packages/plugin/src/tui.ts
@@ -376,6 +376,15 @@ export type TuiHostSlotMap = {
   sidebar_footer: {
     session_id: string
   }
+  activity_bar: {
+    session_id: string
+    active_panels: string[]
+    on_toggle: (panel_id: string) => void
+  }
+  sidebar_panel: {
+    session_id: string
+    panel_id: string
+  }
 }
 
 export type TuiSlotMap<Slots extends Record<string, object> = {}> = TuiHostSlotMap & Slots