@toolkit-cli/toolkode 1.3.7

package/src/cli/cmd/tui/context/tui-config.tsx

@@ -0,0 +1,9 @@
+import { TuiConfig } from "@/config/tui"
+import { createSimpleContext } from "./helper"
+
+export const { use: useTuiConfig, provider: TuiConfigProvider } = createSimpleContext({
+  name: "TuiConfig",
+  init: (props: { config: TuiConfig.Info }) => {
+    return props.config
+  },
+})

package/src/cli/cmd/tui/event.ts

@@ -0,0 +1,49 @@
+import { BusEvent } from "@/bus/bus-event"
+import { Bus } from "@/bus"
+import { SessionID } from "@/session/schema"
+import z from "zod"
+
+export const TuiEvent = {
+  PromptAppend: BusEvent.define("tui.prompt.append", z.object({ text: z.string() })),
+  CommandExecute: BusEvent.define(
+    "tui.command.execute",
+    z.object({
+      command: z.union([
+        z.enum([
+          "session.list",
+          "session.new",
+          "session.share",
+          "session.interrupt",
+          "session.compact",
+          "session.page.up",
+          "session.page.down",
+          "session.line.up",
+          "session.line.down",
+          "session.half.page.up",
+          "session.half.page.down",
+          "session.first",
+          "session.last",
+          "prompt.clear",
+          "prompt.submit",
+          "agent.cycle",
+        ]),
+        z.string(),
+      ]),
+    }),
+  ),
+  ToastShow: BusEvent.define(
+    "tui.toast.show",
+    z.object({
+      title: z.string().optional(),
+      message: z.string(),
+      variant: z.enum(["info", "success", "warning", "error"]),
+      duration: z.number().default(5000).optional().describe("Duration in milliseconds"),
+    }),
+  ),
+  SessionSelect: BusEvent.define(
+    "tui.session.select",
+    z.object({
+      sessionID: SessionID.zod.describe("Session ID to navigate to"),
+    }),
+  ),
+}

package/src/cli/cmd/tui/feature-plugins/home/tips-view.tsx

@@ -0,0 +1,152 @@
+import { For } from "solid-js"
+import { DEFAULT_THEMES, useTheme } from "@tui/context/theme"
+
+const themeCount = Object.keys(DEFAULT_THEMES).length
+const themeTip = `Use {highlight}/themes{/highlight} or {highlight}Ctrl+X T{/highlight} to switch between ${themeCount} built-in themes`
+
+type TipPart = { text: string; highlight: boolean }
+
+function parse(tip: string): TipPart[] {
+  const parts: TipPart[] = []
+  const regex = /\{highlight\}(.*?)\{\/highlight\}/g
+  const found = Array.from(tip.matchAll(regex))
+  const state = found.reduce(
+    (acc, match) => {
+      const start = match.index ?? 0
+      if (start > acc.index) {
+        acc.parts.push({ text: tip.slice(acc.index, start), highlight: false })
+      }
+      acc.parts.push({ text: match[1], highlight: true })
+      acc.index = start + match[0].length
+      return acc
+    },
+    { parts, index: 0 },
+  )
+
+  if (state.index < tip.length) {
+    parts.push({ text: tip.slice(state.index), highlight: false })
+  }
+
+  return parts
+}
+
+export function Tips() {
+  const theme = useTheme().theme
+  const parts = parse(TIPS[Math.floor(Math.random() * TIPS.length)])
+
+  return (
+    <box flexDirection="row" maxWidth="100%">
+      <text flexShrink={0} style={{ fg: theme.warning }}>
+        ● Tip{" "}
+      </text>
+      <text flexShrink={1}>
+        <For each={parts}>
+          {(part) => <span style={{ fg: part.highlight ? theme.text : theme.textMuted }}>{part.text}</span>}
+        </For>
+      </text>
+    </box>
+  )
+}
+
+const TIPS = [
+  "Type {highlight}@{/highlight} followed by a filename to fuzzy search and attach files",
+  "Start a message with {highlight}!{/highlight} to run shell commands directly (e.g., {highlight}!ls -la{/highlight})",
+  "Press {highlight}Tab{/highlight} to cycle between Build and Plan agents",
+  "Use {highlight}/undo{/highlight} to revert the last message and file changes",
+  "Use {highlight}/redo{/highlight} to restore previously undone messages and file changes",
+  "Run {highlight}/share{/highlight} to create a public link to your conversation at toolkode.com",
+  "Drag and drop images into the terminal to add them as context",
+  "Press {highlight}Ctrl+V{/highlight} to paste images from your clipboard into the prompt",
+  "Press {highlight}Ctrl+X E{/highlight} or {highlight}/editor{/highlight} to compose messages in your external editor",
+  "Run {highlight}/init{/highlight} to auto-generate project rules based on your codebase",
+  "Run {highlight}/models{/highlight} or {highlight}Ctrl+X M{/highlight} to see and switch between available AI models",
+  themeTip,
+  "Press {highlight}Ctrl+X N{/highlight} or {highlight}/new{/highlight} to start a fresh conversation session",
+  "Use {highlight}/sessions{/highlight} or {highlight}Ctrl+X L{/highlight} to list and continue previous conversations",
+  "Run {highlight}/compact{/highlight} to summarize long sessions near context limits",
+  "Press {highlight}Ctrl+X X{/highlight} or {highlight}/export{/highlight} to save the conversation as Markdown",
+  "Press {highlight}Ctrl+X Y{/highlight} to copy the assistant's last message to clipboard",
+  "Press {highlight}Ctrl+P{/highlight} to see all available actions and commands",
+  "Run {highlight}/connect{/highlight} to add API keys for 75+ supported LLM providers",
+  "The leader key is {highlight}Ctrl+X{/highlight}; combine with other keys for quick actions",
+  "Press {highlight}F2{/highlight} to quickly switch between recently used models",
+  "Press {highlight}Ctrl+X B{/highlight} to show/hide the sidebar panel",
+  "Use {highlight}PageUp{/highlight}/{highlight}PageDown{/highlight} to navigate through conversation history",
+  "Press {highlight}Ctrl+G{/highlight} or {highlight}Home{/highlight} to jump to the beginning of the conversation",
+  "Press {highlight}Ctrl+Alt+G{/highlight} or {highlight}End{/highlight} to jump to the most recent message",
+  "Press {highlight}Shift+Enter{/highlight} or {highlight}Ctrl+J{/highlight} to add newlines in your prompt",
+  "Press {highlight}Ctrl+C{/highlight} when typing to clear the input field",
+  "Press {highlight}Escape{/highlight} to stop the AI mid-response",
+  "Switch to {highlight}Plan{/highlight} agent to get suggestions without making actual changes",
+  "Use {highlight}@agent-name{/highlight} in prompts to invoke specialized subagents",
+  "Press {highlight}Ctrl+X Right/Left{/highlight} to cycle through parent and child sessions",
+  "Create {highlight}toolkode.json{/highlight} for server settings and {highlight}tui.json{/highlight} for TUI settings",
+  "Place TUI settings in {highlight}~/.config/toolkode/tui.json{/highlight} for global config",
+  "Add {highlight}$schema{/highlight} to your config for autocomplete in your editor",
+  "Configure {highlight}model{/highlight} in config to set your default model",
+  "Override any keybind in {highlight}tui.json{/highlight} via the {highlight}keybinds{/highlight} section",
+  "Set any keybind to {highlight}none{/highlight} to disable it completely",
+  "Configure local or remote MCP servers in the {highlight}mcp{/highlight} config section",
+  "Toolkode auto-handles OAuth for remote MCP servers requiring auth",
+  "Add {highlight}.md{/highlight} files to {highlight}.toolkode/command/{/highlight} to define reusable custom prompts",
+  "Use {highlight}$ARGUMENTS{/highlight}, {highlight}$1{/highlight}, {highlight}$2{/highlight} in custom commands for dynamic input",
+  "Use backticks in commands to inject shell output (e.g., {highlight}`git status`{/highlight})",
+  "Add {highlight}.md{/highlight} files to {highlight}.toolkode/agent/{/highlight} for specialized AI personas",
+  "Configure per-agent permissions for {highlight}edit{/highlight}, {highlight}bash{/highlight}, and {highlight}webfetch{/highlight} tools",
+  'Use patterns like {highlight}"git *": "allow"{/highlight} for granular bash permissions',
+  'Set {highlight}"rm -rf *": "deny"{/highlight} to block destructive commands',
+  'Configure {highlight}"git push": "ask"{/highlight} to require approval before pushing',
+  "Toolkode auto-formats files using prettier, gofmt, ruff, and more",
+  'Set {highlight}"formatter": false{/highlight} in config to disable all auto-formatting',
+  "Define custom formatter commands with file extensions in config",
+  "Toolkode uses LSP servers for intelligent code analysis",
+  "Create {highlight}.ts{/highlight} files in {highlight}.toolkode/tools/{/highlight} to define new LLM tools",
+  "Tool definitions can invoke scripts written in Python, Go, etc",
+  "Add {highlight}.ts{/highlight} files to {highlight}.toolkode/plugin/{/highlight} for event hooks",
+  "Use plugins to send OS notifications when sessions complete",
+  "Create a plugin to prevent Toolkode from reading sensitive files",
+  "Use {highlight}toolkode run{/highlight} for non-interactive scripting",
+  "Use {highlight}toolkode --continue{/highlight} to resume the last session",
+  "Use {highlight}toolkode run -f file.ts{/highlight} to attach files via CLI",
+  "Use {highlight}--format json{/highlight} for machine-readable output in scripts",
+  "Run {highlight}toolkode serve{/highlight} for headless API access to Toolkode",
+  "Use {highlight}toolkode run --attach{/highlight} to connect to a running server",
+  "Run {highlight}toolkode upgrade{/highlight} to update to the latest version",
+  "Run {highlight}toolkode auth list{/highlight} to see all configured providers",
+  "Run {highlight}toolkode agent create{/highlight} for guided agent creation",
+  "Use {highlight}/toolkode{/highlight} in GitHub issues/PRs to trigger AI actions",
+  "Run {highlight}toolkode github install{/highlight} to set up the GitHub workflow",
+  "Comment {highlight}/toolkode fix this{/highlight} on issues to auto-create PRs",
+  "Comment {highlight}/oc{/highlight} on PR code lines for targeted code reviews",
+  'Use {highlight}"theme": "system"{/highlight} to match your terminal\'s colors',
+  "Create JSON theme files in {highlight}.toolkode/themes/{/highlight} directory",
+  "Themes support dark/light variants for both modes",
+  "Reference ANSI colors 0-255 in custom themes",
+  "Use {highlight}{env:VAR_NAME}{/highlight} syntax to reference environment variables in config",
+  "Use {highlight}{file:path}{/highlight} to include file contents in config values",
+  "Use {highlight}instructions{/highlight} in config to load additional rules files",
+  "Set agent {highlight}temperature{/highlight} from 0.0 (focused) to 1.0 (creative)",
+  "Configure {highlight}steps{/highlight} to limit agentic iterations per request",
+  'Set {highlight}"tools": {"bash": false}{/highlight} to disable specific tools',
+  'Set {highlight}"mcp_*": false{/highlight} to disable all tools from an MCP server',
+  "Override global tool settings per agent configuration",
+  'Set {highlight}"share": "auto"{/highlight} to automatically share all sessions',
+  'Set {highlight}"share": "disabled"{/highlight} to prevent any session sharing',
+  "Run {highlight}/unshare{/highlight} to remove a session from public access",
+  "Permission {highlight}doom_loop{/highlight} prevents infinite tool call loops",
+  "Permission {highlight}external_directory{/highlight} protects files outside project",
+  "Run {highlight}toolkode debug config{/highlight} to troubleshoot configuration",
+  "Use {highlight}--print-logs{/highlight} flag to see detailed logs in stderr",
+  "Press {highlight}Ctrl+X G{/highlight} or {highlight}/timeline{/highlight} to jump to specific messages",
+  "Press {highlight}Ctrl+X H{/highlight} to toggle code block visibility in messages",
+  "Press {highlight}Ctrl+X S{/highlight} or {highlight}/status{/highlight} to see system status info",
+  "Enable {highlight}scroll_acceleration{/highlight} in {highlight}tui.json{/highlight} for smooth macOS-style scrolling",
+  "Toggle username display in chat via command palette ({highlight}Ctrl+P{/highlight})",
+  "Run {highlight}docker run -it --rm ghcr.io/toolkit-llm/toolkode{/highlight} for containerized use",
+  "Use {highlight}/connect{/highlight} with Toolkode Pro for curated, tested models",
+  "Commit your project's {highlight}AGENTS.md{/highlight} file to Git for team sharing",
+  "Use {highlight}/review{/highlight} to review uncommitted changes, branches, or PRs",
+  "Run {highlight}/help{/highlight} or {highlight}Ctrl+X H{/highlight} to show the help dialog",
+  "Use {highlight}/rename{/highlight} to rename the current session",
+  "Press {highlight}Ctrl+Z{/highlight} to suspend the terminal and return to your shell",
+]

package/src/cli/cmd/tui/feature-plugins/home/tips.tsx

@@ -0,0 +1,50 @@
+import type { TuiPlugin, TuiPluginModule } from "@toolkit-cli/plugin/tui"
+import { createMemo, Show } from "solid-js"
+import { Tips } from "./tips-view"
+
+const id = "internal:home-tips"
+
+function View(props: { show: boolean }) {
+  return (
+    <box height={2} minHeight={0} width="100%" maxWidth={75} alignItems="center" paddingTop={1} flexShrink={1}>
+      <Show when={props.show}>
+        <Tips />
+      </Show>
+    </box>
+  )
+}
+
+const tui: TuiPlugin = async (api) => {
+  api.command.register(() => [
+    {
+      title: api.kv.get("tips_hidden", false) ? "Show tips" : "Hide tips",
+      value: "tips.toggle",
+      keybind: "tips_toggle",
+      category: "System",
+      hidden: api.route.current.name !== "home",
+      onSelect() {
+        api.kv.set("tips_hidden", !api.kv.get("tips_hidden", false))
+        api.ui.dialog.clear()
+      },
+    },
+  ])
+
+  api.slots.register({
+    order: 100,
+    slots: {
+      home_bottom() {
+        const hidden = createMemo(() => api.kv.get("tips_hidden", true)) // hidden by default — clean center
+        const first = createMemo(() => api.state.session.count() === 0)
+        const show = createMemo(() => !first() && !hidden())
+        return <View show={show()} />
+      },
+    },
+  })
+}
+
+const plugin: TuiPluginModule & { id: string } = {
+  id,
+  tui,
+}
+
+export default plugin

package/src/cli/cmd/tui/feature-plugins/sidebar/agents-panel.tsx

@@ -0,0 +1,95 @@
+import type { TuiPlugin, TuiPluginApi, TuiPluginModule } from "@toolkit-cli/plugin/tui"
+import { createMemo, createSignal, For, Show, onCleanup } from "solid-js"
+
+const id = "internal:sidebar-agents"
+
+interface SubAgent {
+  id: string
+  title: string
+  status: "busy" | "idle" | "error"
+}
+
+function truncate(s: string, max: number): string {
+  return s.length > max ? s.slice(0, max - 1) + "…" : s
+}
+
+function parseAgentType(title: string): string {
+  const match = title.match(/@(\w[\w-]*)/)
+  return match ? match[1] : "agent"
+}
+
+function View(props: { api: TuiPluginApi; session_id: string }) {
+  const theme = () => props.api.theme.current
+  const msg = createMemo(() => props.api.state.session.messages(props.session_id))
+  const [subAgents, setSubAgents] = createSignal<SubAgent[]>([])
+
+  const agentCount = createMemo(() => {
+    const agents = new Set<string>()
+    for (const m of msg()) {
+      if (m.role === "assistant" && m.agent) agents.add(m.agent)
+    }
+    return agents.size
+  })
+
+  const status = createMemo(() => {
+    const s = props.api.state.session.status(props.session_id)
+    return s?.type === "busy" ? "running" : "idle"
+  })
+
+  const timer = setInterval(async () => {
+    try {
+      const res = await props.api.client.session.list()
+      if (res.error || !res.data) return
+      const sessions = Array.isArray(res.data) ? res.data : []
+      const children = sessions.filter((s: any) => s.parentID === props.session_id)
+      const agents: SubAgent[] = children.map((s: any) => {
+        const st = props.api.state.session.status(s.id)
+        return {
+          id: s.id,
+          title: s.title || "subagent",
+          status: st?.type === "busy" ? "busy" : "idle",
+        }
+      })
+      setSubAgents(agents)
+    } catch {}
+  }, 3000)
+  onCleanup(() => clearInterval(timer))
+
+  return (
+    <box>
+      <text fg={theme().text}>
+        <b>Agents</b>
+      </text>
+      <text fg={theme().textMuted}>
+        <span style={{ fg: status() === "running" ? theme().warning : theme().success }}>●</span>{" "}
+        {status() === "running" ? "Running" : "Idle"}
+        {"  "}{agentCount()} active
+      </text>
+      <Show when={subAgents().length > 0}>
+        <For each={subAgents()}>
+          {(agent) => (
+            <text fg={theme().textMuted}>
+              <span style={{ fg: agent.status === "busy" ? theme().warning : theme().textMuted }}>●</span>{" "}
+              <span style={{ fg: theme().text }}>{parseAgentType(agent.title)}</span>{" "}
+              {truncate(agent.title.replace(/@\w[\w-]*\s*subagent\s*/i, "").trim() || agent.title, 24)}
+            </text>
+          )}
+        </For>
+      </Show>
+    </box>
+  )
+}
+
+const tui: TuiPlugin = async (api) => {
+  api.slots.register({
+    order: 150,
+    slots: {
+      sidebar_content(_ctx, props) {
+        return <View api={api} session_id={props.session_id} />
+      },
+    },
+  })
+}
+
+const plugin: TuiPluginModule & { id: string } = { id, tui }
+export default plugin

package/src/cli/cmd/tui/feature-plugins/sidebar/btw-panel.tsx

@@ -0,0 +1,105 @@
+import type { TuiPlugin, TuiPluginApi, TuiPluginModule } from "@toolkit-cli/plugin/tui"
+import { createMemo, createSignal, For, Show, onCleanup } from "solid-js"
+
+const id = "internal:sidebar-btw"
+
+function View(props: { api: TuiPluginApi; session_id: string }) {
+  const theme = () => props.api.theme.current
+  const [polling, setPolling] = createSignal(false)
+
+  const history = createMemo(() => (props.api.kv.get("btw_history") as Array<{ q: string; a: string }>) || [])
+  const loading = createMemo(() => props.api.kv.get("btw_loading") as boolean)
+  const hasHistory = createMemo(() => history().length > 0)
+
+  // Poll for btw response — messages are {info, parts}[] format
+  const timer = setInterval(async () => {
+    const btwSessionID = props.api.kv.get("btw_session_id") as string | undefined
+    if (!btwSessionID || !loading() || polling()) return
+
+    setPolling(true)
+    try {
+      const res = await props.api.client.session.messages({ sessionID: btwSessionID })
+      if (res.error || !res.data) { setPolling(false); return }
+
+      const msgs = Array.isArray(res.data) ? res.data : []
+
+      // Find last completed assistant message
+      // Response format: {info: {role, time, ...}, parts: [{type, text, ...}]}
+      for (let i = msgs.length - 1; i >= 0; i--) {
+        const m = msgs[i] as any
+        const info = m.info ?? m // handle both {info, parts} and flat formats
+        const parts = m.parts ?? []
+
+        if (info.role !== "assistant") continue
+        if (!info.time?.completed) continue
+
+        // Extract text from parts
+        const textParts = parts.filter((p: any) => p.type === "text" && p.text?.trim())
+        if (textParts.length > 0) {
+          updateAnswer(textParts.map((p: any) => p.text.trim()).join("\n"))
+          break
+        }
+      }
+    } catch {
+      // ignore polling errors
+    } finally {
+      setPolling(false)
+    }
+  }, 1500)
+
+  function updateAnswer(text: string) {
+    const h = [...history()]
+    if (h.length > 0 && !h[h.length - 1].a) {
+      h[h.length - 1].a = text
+      props.api.kv.set("btw_history", h)
+      props.api.kv.set("btw_loading", false)
+    }
+  }
+
+  onCleanup(() => clearInterval(timer))
+
+  return (
+    <box>
+      <text fg={theme().primary}><b>/ask</b></text>
+      <Show when={hasHistory()} fallback={
+        <box>
+          <text fg={theme().textMuted}>Side conversation.</text>
+          <text fg={theme().textMuted}>
+            <span style={{ fg: theme().text }}>/ask</span> question
+          </text>
+        </box>
+      }>
+        <For each={history().slice(-3)}>
+          {(item) => (
+            <box paddingTop={1}>
+              <text fg={theme().primary}>&gt; {item.q}</text>
+              <Show when={item.a}>
+                <text fg={theme().text}>{item.a.length > 400 ? item.a.slice(0, 397) + "..." : item.a}</text>
+              </Show>
+            </box>
+          )}
+        </For>
+        <Show when={loading()}>
+          <text fg={theme().warning} paddingTop={1}>thinking...</text>
+        </Show>
+        <text fg={theme().textMuted} paddingTop={1}>
+          <span style={{ fg: theme().text }}>/ask clear</span> to reset
+        </text>
+      </Show>
+    </box>
+  )
+}
+
+const tui: TuiPlugin = async (api) => {
+  api.slots.register({
+    order: 450,
+    slots: {
+      sidebar_content(_ctx, props) {
+        return <View api={api} session_id={props.session_id} />
+      },
+    },
+  })
+}
+
+const plugin: TuiPluginModule & { id: string } = { id, tui }
+export default plugin

package/src/cli/cmd/tui/feature-plugins/sidebar/commands-panel.tsx

@@ -0,0 +1,40 @@
+import type { TuiPlugin, TuiPluginApi, TuiPluginModule } from "@toolkit-cli/plugin/tui"
+import { createMemo, Show } from "solid-js"
+
+const id = "internal:sidebar-commands"
+
+function View(props: { api: TuiPluginApi }) {
+  const theme = () => props.api.theme.current
+
+  const mcpCount = createMemo(() => props.api.state.mcp().length)
+
+  return (
+    <box>
+      <text fg={theme().primary}><b>Commands</b></text>
+      <Show when={mcpCount() > 0}>
+        <text fg={theme().textMuted}>
+          {mcpCount()} MCP servers
+        </text>
+      </Show>
+      <text fg={theme().textMuted}>
+        <span style={{ fg: theme().text }}>ctrl+p</span> palette
+        {"  "}
+        <span style={{ fg: theme().text }}>/</span> slash
+      </text>
+    </box>
+  )
+}
+
+const tui: TuiPlugin = async (api) => {
+  api.slots.register({
+    order: 175,
+    slots: {
+      sidebar_content(_ctx) {
+        return <View api={api} />
+      },
+    },
+  })
+}
+
+const plugin: TuiPluginModule & { id: string } = { id, tui }
+export default plugin

package/src/cli/cmd/tui/feature-plugins/sidebar/context.tsx

@@ -0,0 +1,63 @@
+import type { AssistantMessage } from "@toolkit-cli/sdk/v2"
+import type { TuiPlugin, TuiPluginApi, TuiPluginModule } from "@toolkit-cli/plugin/tui"
+import { createMemo } from "solid-js"
+
+const id = "internal:sidebar-context"
+
+const money = new Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: "USD",
+})
+
+function View(props: { api: TuiPluginApi; session_id: string }) {
+  const theme = () => props.api.theme.current
+  const msg = createMemo(() => props.api.state.session.messages(props.session_id))
+  const cost = createMemo(() => msg().reduce((sum, item) => sum + (item.role === "assistant" ? item.cost : 0), 0))
+
+  const state = createMemo(() => {
+    const last = msg().findLast((item): item is AssistantMessage => item.role === "assistant" && item.tokens.output > 0)
+    if (!last) {
+      return {
+        tokens: 0,
+        percent: null,
+      }
+    }
+
+    const tokens =
+      last.tokens.input + last.tokens.output + last.tokens.reasoning + last.tokens.cache.read + last.tokens.cache.write
+    const model = props.api.state.provider.find((item) => item.id === last.providerID)?.models[last.modelID]
+    return {
+      tokens,
+      percent: model?.limit.context ? Math.round((tokens / model.limit.context) * 100) : null,
+    }
+  })
+
+  return (
+    <box>
+      <text fg={theme().text}>
+        <b>Context</b>
+      </text>
+      <text fg={theme().textMuted}>{state().tokens.toLocaleString()} tokens</text>
+      <text fg={theme().textMuted}>{state().percent ?? 0}% used</text>
+      <text fg={theme().textMuted}>{money.format(cost())} spent</text>
+    </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

package/src/cli/cmd/tui/feature-plugins/sidebar/files.tsx

@@ -0,0 +1,62 @@
+import type { TuiPlugin, TuiPluginApi, TuiPluginModule } from "@toolkit-cli/plugin/tui"
+import { createMemo, For, Show, createSignal } from "solid-js"
+
+const id = "internal:sidebar-files"
+
+function View(props: { api: TuiPluginApi; session_id: string }) {
+  const [open, setOpen] = createSignal(true)
+  const theme = () => props.api.theme.current
+  const list = createMemo(() => props.api.state.session.diff(props.session_id))
+
+  return (
+    <Show when={list().length > 0}>
+      <box>
+        <box flexDirection="row" gap={1} onMouseDown={() => list().length > 2 && setOpen((x) => !x)}>
+          <Show when={list().length > 2}>
+            <text fg={theme().text}>{open() ? "▼" : "▶"}</text>
+          </Show>
+          <text fg={theme().text}>
+            <b>Modified Files</b>
+          </text>
+        </box>
+        <Show when={list().length <= 2 || open()}>
+          <For each={list()}>
+            {(item) => (
+              <box flexDirection="row" gap={1} justifyContent="space-between">
+                <text fg={theme().textMuted} wrapMode="none">
+                  {item.file}
+                </text>
+                <box flexDirection="row" gap={1} flexShrink={0}>
+                  <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>
+              </box>
+            )}
+          </For>
+        </Show>
+      </box>
+    </Show>
+  )
+}
+
+const tui: TuiPlugin = async (api) => {
+  api.slots.register({
+    order: 500,
+    slots: {
+      sidebar_content(_ctx, props) {
+        return <View api={api} session_id={props.session_id} />
+      },
+    },
+  })
+}
+
+const plugin: TuiPluginModule & { id: string } = {
+  id,
+  tui,
+}
+
+export default plugin