opencode-sidechat 1.0.0

package/README.md

@@ -0,0 +1,70 @@
+# OpenCode SideChat
+
+Floating side-chat panel for quick queries while your main session runs. Opens at the bottom-right corner of the TUI via `Alt+N`. Uses a separate agent with read-only tools and no access to main-session context.
+
+## Install
+
+Add the path to your `~/.config/opencode/tui.json`:
+
+```json
+["E:/CodeProjects/opencode-sidechat"]
+```
+
+On first launch, the plugin creates `~/.config/opencode/sidechat.jsonc` with defaults. Edit that file to change settings.
+
+## Usage
+
+| Key | Action |
+|---|---|
+| `Alt+N` | Toggle panel |
+| `Alt+C` | Clear chat / new session |
+| `Alt+T` | Toggle thinking blocks |
+| `Tab` | Change model |
+
+Commands: `/side`, `/side-clear`, `/side-model`.
+
+## Configuration
+
+All settings live in `~/.config/opencode/sidechat.jsonc`:
+
+```jsonc
+{
+  "model": "opencode/deepseek-v4-flash-free",
+  "systemPrompt": "You are a casual side assistant. Answer concisely and directly.",
+  "keybind": "alt+n",
+  "clearKeybind": "alt+c",
+  "thinkToggleKeybind": "alt+t",
+  "allowedTools": ["glob", "grep", "list", "read", "webfetch", "websearch"],
+  "width": 70,
+  "transcriptHeight": 20,
+  "tokenLimit": 45000,
+  "think": {
+    "defaultState": "collapsed",
+    "showSummary": false
+  }
+}
+```
+
+## Security
+
+The side agent is deny-by-default for tool access. Only tools listed in `allowedTools` are granted. The side agent cannot see your main session, its files, or its conversation history. It operates as an isolated session with a minimal system prompt.
+
+## Build
+
+```sh
+npm install
+npx tsc --noEmit      # typecheck
+```
+
+## Files
+
+```
+src/
+├── index.tsx           # plugin entry, slot/event wiring
+├── config.ts           # sidechat.jsonc read + defaults
+├── constants.ts        # command names, tool allowlist
+├── session.ts          # session lifecycle, model picker
+├── types.ts            # config + state types
+└── components/
+    └── SideChat.tsx    # UI: transcript, input, hint bar
+```

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "opencode-sidechat",
+  "version": "1.0.0",
+  "description": "Floating side-chat panel for quick queries alongside your main opencode session",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SquirrelRat/OpenCode-SideChat.git"
+  },
+  "author": "SquirrelRat",
+  "license": "MIT",
+  "exports": {
+    "./tui": "./src/index.tsx"
+  },
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@opencode-ai/plugin": ">=1.14.48",
+    "@opencode-ai/sdk": ">=1.14.48",
+    "@opentui/core": "^0.2.6",
+    "@opentui/keymap": "^0.2.6",
+    "@opentui/solid": "^0.2.6",
+    "solid-js": "^1.9.12"
+  },
+  "devDependencies": {
+    "@types/node": "^25.9.1",
+    "typescript": "^5.9.3"
+  }
+}

package/src/components/SideChat.tsx

@@ -0,0 +1,348 @@
+/** @jsxImportSource @opentui/solid */
+import { createMemo, For } from "solid-js";
+import type { InputRenderable } from "@opentui/core";
+import { THINKING_TEXT } from "../constants";
+import type { OverlayState } from "../types";
+
+const MAX_VISIBLE_MESSAGES = 20;
+
+function renderInlineMarkdown(text: string) {
+  const parts: Array<{ type: string; text: string }> = [];
+  let remaining = text;
+
+  while (remaining.length > 0) {
+    if (remaining.startsWith("`")) {
+      const end = remaining.indexOf("`", 1);
+      if (end === -1) {
+        parts.push({ type: "text", text: remaining });
+        break;
+      }
+      parts.push({ type: "code", text: remaining.slice(1, end) });
+      remaining = remaining.slice(end + 1);
+    } else if (remaining.startsWith("**")) {
+      const end = remaining.indexOf("**", 2);
+      if (end === -1) {
+        parts.push({ type: "text", text: remaining });
+        break;
+      }
+      parts.push({ type: "bold", text: remaining.slice(2, end) });
+      remaining = remaining.slice(end + 2);
+    } else if (remaining.startsWith("*") && !remaining.startsWith("**")) {
+      const end = remaining.indexOf("*", 1);
+      if (end === -1) {
+        parts.push({ type: "text", text: remaining });
+        break;
+      }
+      parts.push({ type: "italic", text: remaining.slice(1, end) });
+      remaining = remaining.slice(end + 1);
+    } else if (remaining.startsWith("[") && remaining.includes("](")) {
+      const closeBracket = remaining.indexOf("](");
+      const closeParen = remaining.indexOf(")", closeBracket);
+      if (closeParen === -1) {
+        parts.push({ type: "text", text: remaining });
+        break;
+      }
+      parts.push({ type: "text", text: remaining.slice(1, closeBracket) });
+      remaining = remaining.slice(closeParen + 1);
+    } else {
+      const nextSpecial = searchSpecialChar(remaining);
+      if (nextSpecial === -1) {
+        parts.push({ type: "text", text: remaining });
+        break;
+      }
+      if (nextSpecial > 0) {
+        parts.push({ type: "text", text: remaining.slice(0, nextSpecial) });
+      }
+      remaining = remaining.slice(nextSpecial);
+    }
+  }
+
+  return parts;
+}
+
+function searchSpecialChar(text: string): number {
+  for (let i = 0; i < text.length; i++) {
+    const c = text[i];
+    if (c === "`" || c === "*" || (c === "[" && text.includes("](", i))) {
+      return i;
+    }
+  }
+  return -1;
+}
+
+export function SideChat(props: OverlayState & { width: number; transcriptHeight: number; tokenLimit: number }) {
+  const theme = props.api.theme.current;
+  let input: InputRenderable | undefined;
+  let inputValue = "";
+
+  const panelWidth = props.width;
+  const contentWidth = props.width - 4;
+
+  const msgs = createMemo(() => {
+    const messages = props.state.entries
+      .map((entry) => {
+        const textParts: string[] = [];
+        const reasoning: Array<{ id: string; text: string }> = [];
+
+        for (const p of entry.parts) {
+          if (p.type === "text") {
+            if (p.text.trim()) textParts.push(p.text.trim());
+          } else if (p.type === "reasoning") {
+            if (p.text) reasoning.push({ id: p.id, text: p.text });
+          }
+        }
+
+        if (textParts.length === 0 && reasoning.length === 0) return null;
+
+        return {
+          id: entry.info.id,
+          role: entry.info.role as "user" | "assistant",
+          text: textParts.join("\n"),
+          reasoning,
+        };
+      })
+      .filter((m): m is NonNullable<typeof m> => m !== null)
+      .slice(-MAX_VISIBLE_MESSAGES);
+
+    if (props.state.loading && props.state.streamingAnswer) {
+      const streaming = props.state.streamingAnswer.trim();
+      const last = messages[messages.length - 1];
+      const lastText = last?.role === "assistant" ? last.text : "";
+      if (streaming && streaming !== lastText) {
+        messages.push({
+          id: "__streaming__",
+          role: "assistant",
+          text: streaming,
+          reasoning: [],
+        });
+      }
+    }
+
+    return messages;
+  });
+
+  const ctxLabel = createMemo(() => {
+    const n = props.state.tokenCount ?? 0;
+    if (n <= 0) return "";
+    const current = n >= 1000 ? (n / 1000).toFixed(1) + "k" : String(n);
+    const limit = props.tokenLimit >= 1000 ? (props.tokenLimit / 1000).toFixed(0) + "k" : String(props.tokenLimit);
+    return current + "/" + limit + " ctx";
+  });
+
+  const shortModelName = createMemo(() => {
+    const name = props.modelName;
+    const parts = name.split("/");
+    return parts.length >= 2 ? parts[parts.length - 1] : name;
+  });
+
+  const renderThinking = (r: { id: string; text: string }) => {
+    if (!props.thinkCollapsed) {
+      return (
+        <box flexDirection="column">
+          <text fg={theme.textMuted}>
+            {"▼ thinking:"}
+          </text>
+          <text fg={theme.textMuted}>{r.text}</text>
+        </box>
+      );
+    }
+
+    const label = props.thinkConfig.showSummary
+      ? "▶ thinking: " + r.text.slice(0, 60).replace(/\n/g, " ") + (r.text.length > 60 ? "..." : "")
+      : "▶ thinking (" + r.text.length + " chars)";
+
+    return <text fg={theme.textMuted}>{label}</text>;
+  };
+
+  return (
+    <box
+      position="absolute"
+      bottom={0}
+      right={0}
+    >
+      <box
+        width={panelWidth}
+        flexDirection="column"
+        border={true}
+        borderColor={theme.borderActive}
+        backgroundColor={theme.backgroundPanel}
+      >
+        <box
+          flexDirection="row"
+          justifyContent="space-between"
+          alignItems="center"
+          paddingTop={1}
+          paddingLeft={1}
+          paddingRight={1}
+        >
+          <box flexDirection="row" gap={1} alignItems="center">
+            <box paddingLeft={1} paddingRight={1} backgroundColor={theme.accent}>
+              <text fg={theme.background}>
+                <b>{"SideChat"}</b>
+              </text>
+            </box>
+            <text fg={theme.success}>
+              <b>{"[f]"}</b>
+            </text>
+          </box>
+          <box flexDirection="row" gap={1} alignItems="center">
+            <text fg={theme.textMuted}>{shortModelName()}</text>
+            {ctxLabel() ? (
+              <text fg={theme.textMuted}>{ctxLabel()}</text>
+            ) : (
+              <text>{""}</text>
+            )}
+          </box>
+        </box>
+
+        <box paddingLeft={1} paddingRight={1}>
+          <scrollbox
+            scrollY={true}
+            stickyScroll={true}
+            stickyStart="bottom"
+            height={props.transcriptHeight}
+            width={contentWidth}
+          >
+            <box flexDirection="column" gap={1} paddingTop={1} paddingBottom={1} width={contentWidth - 2}>
+              {msgs().length > 0 ? (
+                msgs().map((msg) => (
+                  <box flexDirection="column" gap={0}>
+                    <text fg={msg.role === "assistant" ? theme.secondary : theme.text}>
+                      <b>{msg.role === "assistant" ? "A:" : "You:"}</b>
+                    </text>
+                    {msg.reasoning.map((r) => renderThinking(r))}
+                    {msg.text ? (
+                      <box flexDirection="column">
+                        <RenderMarkdown text={msg.text} theme={theme} />
+                      </box>
+                    ) : (
+                      <text>{""}</text>
+                    )}
+                  </box>
+                ))
+              ) : props.state.loading ? (
+                <text fg={theme.textMuted}>{THINKING_TEXT}</text>
+              ) : (
+                <text>{""}</text>
+              )}
+              {props.state.error ? (
+                <text fg={theme.error}>{"Error: " + String(props.state.error)}</text>
+              ) : (
+                <text>{""}</text>
+              )}
+            </box>
+          </scrollbox>
+        </box>
+
+        <box paddingLeft={1} paddingRight={1}>
+          <input
+            ref={(node) => { input = node; props.onInput?.(node); }}
+            width={contentWidth}
+            placeholder={props.state.loading ? "..." : ">"}
+            textColor={theme.text}
+            placeholderColor={theme.textMuted}
+            backgroundColor={theme.backgroundElement}
+            focusedTextColor={theme.text}
+            cursorColor={theme.primary}
+            focusedBackgroundColor={theme.backgroundElement}
+            onInput={(value) => {
+              inputValue = value;
+            }}
+            onSubmit={() => {
+              const submitted = (input?.value ?? inputValue).trim();
+              if (!submitted || props.state.loading) return;
+              if (!props.onSubmit(submitted)) return;
+              inputValue = "";
+              if (input) input.value = "";
+            }}
+          />
+        </box>
+
+        <box
+          flexDirection="row"
+          gap={1}
+          paddingTop={0}
+          paddingBottom={1}
+          paddingLeft={1}
+          paddingRight={1}
+          alignItems="center"
+        >
+          <text fg={theme.secondary}><b>{"Alt+C"}</b></text>
+          <text fg={theme.primary}>{"Clear"}</text>
+          <text fg={theme.textMuted}>{"·"}</text>
+          <text fg={theme.secondary}><b>{"Alt+T"}</b></text>
+          <text fg={theme.primary}>{"Thinking"}</text>
+          <text fg={theme.textMuted}>{props.thinkCollapsed ? "" : "(on)"}</text>
+          <text fg={theme.textMuted}>{"·"}</text>
+          <text fg={theme.secondary}><b>{"Tab"}</b></text>
+          <text fg={theme.primary}>{"Model"}</text>
+        </box>
+      </box>
+    </box>
+  );
+}
+
+function RenderMarkdown(props: { text: string; theme: import("@opencode-ai/plugin/tui").TuiThemeCurrent }) {
+  const lines = createMemo(() => {
+    const text = props.text;
+    const result: Array<{ type: "line" | "codeblock"; parts: Array<{ type: string; text: string }>; codeText?: string }> = [];
+    let inCodeBlock = false;
+    let codeBuffer = "";
+
+    for (const line of text.split("\n")) {
+      if (line.startsWith("```")) {
+        if (inCodeBlock) {
+          result.push({ type: "codeblock", parts: [], codeText: codeBuffer });
+          codeBuffer = "";
+        }
+        inCodeBlock = !inCodeBlock;
+        continue;
+      }
+      if (inCodeBlock) {
+        codeBuffer += (codeBuffer ? "\n" : "") + line;
+        continue;
+      }
+
+      const parts = renderInlineMarkdown(line);
+      result.push({ type: "line", parts });
+    }
+
+    if (inCodeBlock && codeBuffer) {
+      result.push({ type: "codeblock", parts: [], codeText: codeBuffer });
+    }
+
+    return result;
+  });
+
+  const t = props.theme;
+
+  return (
+    <For each={lines()}>
+      {(block) => {
+        if (block.type === "codeblock") {
+          return (
+            <box
+              backgroundColor={t.backgroundElement}
+              paddingLeft={1}
+              paddingRight={1}
+            >
+              <text fg={t.markdownCode}>{block.codeText}</text>
+            </box>
+          );
+        }
+        return (
+          <box flexDirection="row" flexWrap="wrap" gap={0}>
+              <For each={block.parts}>
+                {(part) => {
+                  if (part.type === "bold") return <text><b>{part.text}</b></text>;
+                  if (part.type === "italic") return <text><i>{part.text}</i></text>;
+                  if (part.type === "code") return <text fg={t.markdownCode}>{part.text}</text>;
+                  return <text>{part.text}</text>;
+                }}
+              </For>
+          </box>
+        );
+      }}
+    </For>
+  );
+}

package/src/config.ts

@@ -0,0 +1,189 @@
+import { existsSync, readFileSync, writeFileSync, mkdirSync } from "node:fs";
+import { join } from "node:path";
+import { homedir } from "node:os";
+import {
+  DEFAULT_ALLOWED_TOOLS,
+  DEFAULT_TOKEN_LIMIT,
+  DEFAULT_KEYBIND,
+  DEFAULT_CLEAR_KEYBIND,
+  DEFAULT_THINK_TOGGLE_KEYBIND,
+  DEFAULT_WIDTH,
+  DEFAULT_TRANSCRIPT_HEIGHT,
+  DEFAULT_SYSTEM_PROMPT,
+} from "./constants";
+import type { SideConfig, ThinkConfig } from "./types";
+
+const CONFIG_FILENAME = "sidechat.jsonc";
+
+function configDir(): string {
+  const xdg = process.env.XDG_CONFIG_HOME;
+  if (xdg) return join(xdg, "opencode");
+  return join(homedir(), ".config", "opencode");
+}
+
+function configPath(): string {
+  return join(configDir(), CONFIG_FILENAME);
+}
+
+function stripJsoncComments(text: string): string {
+  let result = "";
+  let i = 0;
+  let inString = false;
+  while (i < text.length) {
+    const ch = text[i];
+    if (inString) {
+      result += ch;
+      if (ch === "\\" && i + 1 < text.length) {
+        i += 1;
+        result += text[i];
+      } else if (ch === '"') {
+        inString = false;
+      }
+    } else {
+      if (ch === '"') {
+        inString = true;
+        result += ch;
+      } else if (ch === "/" && i + 1 < text.length && text[i + 1] === "/") {
+        while (i < text.length && text[i] !== "\n") i += 1;
+        continue;
+      } else if (ch === "/" && i + 1 < text.length && text[i + 1] === "*") {
+        i += 2;
+        while (i + 1 < text.length && !(text[i] === "*" && text[i + 1] === "/")) i += 1;
+        i += 2;
+        continue;
+      } else {
+        result += ch;
+      }
+    }
+    i += 1;
+  }
+  return result;
+}
+
+function stripTrailingCommas(text: string): string {
+  let result = "";
+  let i = 0;
+  let inString = false;
+  while (i < text.length) {
+    const ch = text[i];
+    if (inString) {
+      result += ch;
+      if (ch === "\\" && i + 1 < text.length) {
+        i += 1;
+        result += text[i];
+      } else if (ch === '"') {
+        inString = false;
+      }
+      i += 1;
+      continue;
+    }
+
+    if (ch === '"') {
+      inString = true;
+      result += ch;
+      i += 1;
+      continue;
+    }
+
+    if (ch === ",") {
+      let j = i + 1;
+      while (j < text.length && /\s/.test(text[j])) j += 1;
+      if (text[j] === "}" || text[j] === "]") {
+        i += 1;
+        continue;
+      }
+    }
+
+    result += ch;
+    i += 1;
+  }
+  return result;
+}
+
+function generateDefaultConfig(): string {
+  const defaultAllowedTools = JSON.stringify(DEFAULT_ALLOWED_TOOLS);
+  return `{
+  // OpenCode SideChat Configuration
+  "model": "opencode/deepseek-v4-flash-free",
+  "systemPrompt": ${JSON.stringify(DEFAULT_SYSTEM_PROMPT)},
+  "keybind": "alt+n",
+  "clearKeybind": "alt+c",
+  "thinkToggleKeybind": "alt+t",
+  "allowedTools": ${defaultAllowedTools},
+  "width": ${DEFAULT_WIDTH},
+  "transcriptHeight": ${DEFAULT_TRANSCRIPT_HEIGHT},
+  "tokenLimit": ${DEFAULT_TOKEN_LIMIT},
+  "think": {
+    "defaultState": "collapsed",
+    "showSummary": false
+  }
+}
+`;
+}
+
+function ensureConfigFile(): void {
+  const dir = configDir();
+  const path = configPath();
+  try {
+    if (!existsSync(dir)) mkdirSync(dir, { recursive: true });
+    if (!existsSync(path)) writeFileSync(path, generateDefaultConfig(), "utf-8");
+  } catch {}
+}
+
+export function loadConfig(): SideConfig {
+  ensureConfigFile();
+
+  let raw: Record<string, unknown> = {};
+  try {
+    const text = readFileSync(configPath(), "utf-8");
+    const json = stripTrailingCommas(stripJsoncComments(text));
+    const parsed = JSON.parse(json);
+    if (parsed && typeof parsed === "object") raw = parsed as Record<string, unknown>;
+  } catch {}
+
+  return {
+    model: parseStringOrNull(raw.model),
+    systemPrompt: parseString(raw.systemPrompt, DEFAULT_SYSTEM_PROMPT),
+    tokenLimit: parsePositiveNumber(raw.tokenLimit, DEFAULT_TOKEN_LIMIT),
+    keybind: parseKeybind(raw.keybind, DEFAULT_KEYBIND),
+    clearKeybind: parseKeybind(raw.clearKeybind, DEFAULT_CLEAR_KEYBIND),
+    thinkToggleKeybind: parseKeybind(raw.thinkToggleKeybind, DEFAULT_THINK_TOGGLE_KEYBIND),
+    allowedTools: parseAllowedTools(raw.allowedTools),
+    width: parsePositiveNumber(raw.width, DEFAULT_WIDTH),
+    transcriptHeight: parsePositiveNumber(raw.transcriptHeight, DEFAULT_TRANSCRIPT_HEIGHT),
+    think: parseThinkConfig(raw.think),
+  };
+}
+
+function parseStringOrNull(value: unknown): string | null {
+  return typeof value === "string" && value.trim() ? value.trim() : null;
+}
+
+function parseString(value: unknown, fallback: string): string {
+  return typeof value === "string" && value.trim() ? value.trim() : fallback;
+}
+
+function parsePositiveNumber(value: unknown, fallback: number) {
+  return typeof value === "number" && Number.isFinite(value) && value > 0
+    ? Math.floor(value)
+    : fallback;
+}
+
+function parseKeybind(value: unknown, fallback: string): string | false {
+  if (value === false || value === "none") return false;
+  return typeof value === "string" && value.trim() ? value.trim() : fallback;
+}
+
+function parseAllowedTools(value: unknown): string[] | null {
+  if (!Array.isArray(value)) return null;
+  return value.every((item) => typeof item === "string") ? value : null;
+}
+
+function parseThinkConfig(value: unknown): ThinkConfig {
+  if (!value || typeof value !== "object") return { defaultState: "collapsed", showSummary: false };
+  const obj = value as Record<string, unknown>;
+  return {
+    defaultState: obj.defaultState === "expanded" ? "expanded" : "collapsed",
+    showSummary: obj.showSummary === true,
+  };
+}

package/src/constants.ts

@@ -0,0 +1,45 @@
+export const PLUGIN_ID = "local.opencode-sidechat";
+
+export const CMD_TOGGLE_FOCUS = "sidechat.toggle-focus";
+export const CMD_CLEAR = "sidechat.clear";
+export const CMD_CHANGE_MODEL = "sidechat.change-model";
+export const CMD_TOGGLE_THINK = "sidechat.toggle-think";
+
+export const DEFAULT_KEYBIND = "alt+n";
+export const DEFAULT_CLEAR_KEYBIND = "alt+c";
+export const DEFAULT_THINK_TOGGLE_KEYBIND = "alt+t";
+export const DEFAULT_TOKEN_LIMIT = 45_000;
+export const DEFAULT_WIDTH = 70;
+export const DEFAULT_TRANSCRIPT_HEIGHT = 20;
+
+export const DEFAULT_SYSTEM_PROMPT =
+  "You are a casual side assistant. Answer concisely and directly. Use tools only when helpful.";
+
+export const THINKING_TEXT = "...";
+
+export const SAFE_TOOLS: Record<string, true> = {
+  glob: true,
+  grep: true,
+  list: true,
+  read: true,
+  websearch: true,
+  webfetch: true,
+};
+
+export const DEFAULT_ALLOWED_TOOLS = Object.keys(SAFE_TOOLS);
+
+export const ADDITIONAL_PERMISSION_IDS = [
+  "edit",
+  "bash",
+  "task",
+  "external_directory",
+  "todowrite",
+  "question",
+  "websearch",
+  "codesearch",
+  "repo_clone",
+  "repo_overview",
+  "lsp",
+  "doom_loop",
+  "skill",
+];

package/src/index.tsx

@@ -0,0 +1,379 @@
+/** @jsxImportSource @opentui/solid */
+import type { TuiPlugin, TuiPluginModule } from "@opencode-ai/plugin/tui";
+import { createSignal, Show } from "solid-js";
+import { loadConfig } from "./config";
+import { SideChat } from "./components/SideChat";
+import {
+  CMD_TOGGLE_FOCUS,
+  CMD_CLEAR,
+  CMD_CHANGE_MODEL,
+  CMD_TOGGLE_THINK,
+  PLUGIN_ID,
+} from "./constants";
+import {
+  getAvailableToolIDs,
+  resolveAllowedTools,
+  buildToolSelection,
+  buildPermissionRules,
+  buildSideSystemPrompt,
+  resolveModel,
+  formatPreference,
+  openModelPicker,
+  getErrorMessage,
+} from "./session";
+import type { SideDialogState, ModelPreference } from "./types";
+
+const SIDE_AGENT = "general";
+
+const tui: TuiPlugin = async (api, _options) => {
+  const config = loadConfig();
+  const keybind = config.keybind;
+  const clearKeybind = config.clearKeybind;
+  const thinkToggleKeybind = config.thinkToggleKeybind;
+
+  const [state, setState] = createSignal<SideDialogState>({
+    entries: [],
+    streamingAnswer: "",
+    loading: false,
+    error: undefined,
+    tokenCount: 0,
+  }, { equals: false });
+
+  const [tempSessionID, setTempSessionID] = createSignal<string | undefined>(undefined);
+  const [selectedModel, setSelectedModel] = createSignal<ModelPreference>(undefined);
+  const [visible, setVisible] = createSignal(false);
+  const [thinkCollapsed, setThinkCollapsed] = createSignal(config.think.defaultState === "collapsed");
+
+  let overlayInput: { focus: () => void } | undefined;
+  let unsubscribers: Array<() => void> = [];
+  let sessionInitPromise: Promise<string | undefined> | undefined;
+
+  const getModelName = () =>
+    formatPreference(
+      selectedModel() ?? resolveModel(config.model, state().entries, api).model,
+    );
+
+  const clearListeners = () => {
+    while (unsubscribers.length > 0) {
+      try { unsubscribers.pop()?.(); } catch {}
+    }
+  };
+
+  const refreshSession = () => {
+    const sid = tempSessionID();
+    if (!sid) return;
+    try {
+      const messages = api.state.session.messages(sid);
+      const entries: SideDialogState["entries"] = [];
+      let tokenCount = 0;
+      for (const info of messages) {
+        entries.push({ info, parts: [...api.state.part(info.id)] });
+        if (info.role === "assistant") {
+          tokenCount += (info.tokens?.input ?? 0) + (info.tokens?.output ?? 0);
+        }
+      }
+      setState((s) => ({ ...s, entries, tokenCount }));
+    } catch {}
+  };
+
+  const buildSystemPrompt = async () => {
+    const toolIDs = await getAvailableToolIDs(api);
+    const resolvedTools = resolveAllowedTools(config.allowedTools, toolIDs);
+    return {
+      system: buildSideSystemPrompt(config.systemPrompt, resolvedTools),
+      toolIDs,
+      resolvedTools,
+      tools: buildToolSelection(toolIDs, resolvedTools),
+      permission: buildPermissionRules(toolIDs, resolvedTools),
+    };
+  };
+
+  const initSession = async (): Promise<string | undefined> => {
+    clearListeners();
+
+    try {
+      const { permission } = await buildSystemPrompt();
+
+      const created = await api.client.session.create(
+        {
+          title: "side chat",
+          directory: api.state.path.directory,
+          agent: SIDE_AGENT,
+          permission,
+        },
+        { throwOnError: true },
+      );
+
+      const sid = created.data.id;
+      setTempSessionID(sid);
+
+      unsubscribers.push(
+        api.event.on("session.idle", (event) => {
+          if (event.properties.sessionID !== sid) return;
+          refreshSession();
+          setState((s) => ({
+            ...s,
+            loading: false,
+            streamingAnswer: "",
+          }));
+        }),
+      );
+
+      unsubscribers.push(
+        api.event.on("message.updated", (event) => {
+          if (event.properties.sessionID !== sid) return;
+          refreshSession();
+        }),
+      );
+
+      unsubscribers.push(
+        api.event.on("message.part.delta", (event) => {
+          if (
+            event.properties.sessionID !== sid ||
+            event.properties.field !== "text"
+          ) return;
+          setState((s) => ({
+            ...s,
+            streamingAnswer: s.streamingAnswer + event.properties.delta,
+          }));
+        }),
+      );
+
+      unsubscribers.push(
+        api.event.on("message.part.updated", (event) => {
+          if (event.properties.sessionID !== sid) return;
+          refreshSession();
+        }),
+      );
+
+      unsubscribers.push(
+        api.event.on("session.error", (event) => {
+          if (event.properties.sessionID !== sid) return;
+          setState((s) => ({
+            ...s,
+            error: getErrorMessage(event.properties.error),
+            loading: false,
+          }));
+        }),
+      );
+
+      setState((s) => ({ ...s, sessionReady: true, error: undefined }));
+      return sid;
+    } catch (cause) {
+      const msg = getErrorMessage(cause);
+      setState((s) => ({ ...s, error: msg, sessionReady: false }));
+      return undefined;
+    }
+  };
+
+  const ensureSession = (): Promise<string | undefined> => {
+    if (tempSessionID()) return Promise.resolve(tempSessionID());
+    if (!sessionInitPromise) sessionInitPromise = initSession();
+    return sessionInitPromise;
+  };
+
+  const destroySession = async () => {
+    const sid = tempSessionID();
+    if (!sid) return;
+    setTempSessionID(undefined);
+    clearListeners();
+    try {
+      await api.client.session.abort(
+        { sessionID: sid },
+        { throwOnError: true },
+      );
+    } catch {}
+    try {
+      await api.client.session.delete(
+        { sessionID: sid },
+        { throwOnError: true },
+      );
+    } catch {}
+  };
+
+  const handleSubmit = (text: string): boolean => {
+    if (state().loading) return false;
+
+    void ensureSession().then((sid) => {
+      if (!sid) {
+        setState((s) => ({
+          ...s,
+          error: "Failed to create session.",
+          loading: false,
+        }));
+        return;
+      }
+
+      setState((s) => ({
+        ...s,
+        error: undefined,
+        loading: true,
+        streamingAnswer: "",
+      }));
+
+      void (async () => {
+        try {
+          const { system, tools } = await buildSystemPrompt();
+          const resolved =
+            selectedModel() ??
+            resolveModel(config.model, state().entries, api).model;
+
+          await api.client.session.promptAsync(
+            {
+              sessionID: sid,
+              system,
+              agent: SIDE_AGENT,
+              tools,
+              parts: [{ type: "text", text }],
+              ...(resolved.model ? { model: resolved.model } : {}),
+              ...(resolved.variant ? { variant: resolved.variant } : {}),
+            },
+            { throwOnError: true },
+          );
+        } catch (cause) {
+          setState((s) => ({
+            ...s,
+            error: getErrorMessage(cause),
+            loading: false,
+          }));
+        }
+      })();
+    });
+
+    return true;
+  };
+
+  const handleClear = async () => {
+    await destroySession();
+    setState({
+      entries: [],
+      streamingAnswer: "",
+      loading: false,
+      error: undefined,
+      tokenCount: 0,
+    });
+    sessionInitPromise = undefined;
+    setThinkCollapsed(config.think.defaultState === "collapsed");
+    await ensureSession();
+    setVisible(true);
+    setTimeout(() => overlayInput?.focus(), 0);
+  };
+
+  const handleToggle = () => {
+    const currentRoute = api.route.current;
+    if (currentRoute.name !== "session") return;
+    setVisible((prev) => {
+      if (!prev) setTimeout(() => overlayInput?.focus(), 0);
+      return !prev;
+    });
+  };
+
+  const handleToggleThink = () => {
+    setThinkCollapsed((prev) => !prev);
+  };
+
+  const handleChangeModel = () => {
+    const currentRoute = api.route.current;
+    if (currentRoute.name !== "session") return;
+    openModelPicker(api, config, selectedModel(), (model) => {
+      setSelectedModel(model);
+    });
+  };
+
+  api.lifecycle.onDispose(() => {
+    clearListeners();
+    void destroySession();
+  });
+
+  api.slots.register({
+    slots: {
+      app: () => (
+        <Show when={visible()}>
+          <SideChat
+            api={api}
+            modelName={getModelName()}
+            state={state()}
+            width={config.width}
+            transcriptHeight={config.transcriptHeight}
+            tokenLimit={config.tokenLimit}
+            thinkCollapsed={thinkCollapsed()}
+            thinkConfig={config.think}
+            onInput={(node) => { overlayInput = node; }}
+            onChangeModel={handleChangeModel}
+            onSubmit={handleSubmit}
+          />
+        </Show>
+      ),
+    },
+  });
+
+  api.keymap.registerLayer({
+    commands: [
+      {
+        namespace: "palette",
+        name: CMD_TOGGLE_FOCUS,
+        title: "side",
+        desc: "Open/side chat overlay",
+        category: "Plugin",
+        slashName: "side",
+        enabled: () => api.route.current.name === "session",
+        run: () => handleToggle(),
+      },
+      {
+        namespace: "palette",
+        name: CMD_CLEAR,
+        title: "side clear",
+        desc: "Clear the side chat conversation",
+        category: "Plugin",
+        slashName: "side-clear",
+        enabled: () => api.route.current.name === "session",
+        run: () => void handleClear(),
+      },
+      {
+        namespace: "palette",
+        name: CMD_CHANGE_MODEL,
+        title: "side model",
+        desc: "Change the side chat model",
+        category: "Plugin",
+        slashName: "side-model",
+        enabled: () => api.route.current.name === "session",
+        run: () => handleChangeModel(),
+      },
+    ],
+    bindings: [
+      ...(keybind !== false
+        ? [{
+            key: keybind,
+            cmd: CMD_TOGGLE_FOCUS,
+            desc: "Toggle side chat",
+          }]
+        : []),
+    ],
+  });
+
+  api.keymap.registerLayer({
+    priority: 1000,
+    enabled: () => visible(),
+    commands: [
+      { name: CMD_CLEAR, run: () => void handleClear() },
+      { name: CMD_CHANGE_MODEL, run: () => handleChangeModel() },
+      { name: CMD_TOGGLE_THINK, run: () => handleToggleThink() },
+    ],
+    bindings: [
+      ...(clearKeybind !== false
+        ? [{ key: clearKeybind, cmd: CMD_CLEAR }]
+        : []),
+      ...(thinkToggleKeybind !== false
+        ? [{ key: thinkToggleKeybind, cmd: CMD_TOGGLE_THINK }]
+        : []),
+      { key: "tab", cmd: CMD_CHANGE_MODEL },
+    ],
+  });
+};
+
+const plugin: TuiPluginModule & { id: string } = {
+  id: PLUGIN_ID,
+  tui,
+};
+
+export default plugin;

package/src/session.ts

@@ -0,0 +1,257 @@
+import type { TuiPluginApi, TuiDialogSelectOption } from "@opencode-ai/plugin/tui";
+import type { PermissionRuleset } from "@opencode-ai/sdk/v2";
+import { DEFAULT_ALLOWED_TOOLS, ADDITIONAL_PERMISSION_IDS } from "./constants";
+import type { SideConfig, SessionEntry, ResolvedModel, ModelPreference } from "./types";
+
+export type ModelSource = "config" | "session" | "unknown";
+
+export type ResolvedModelWithSource = {
+  model: ResolvedModel;
+  source: ModelSource;
+};
+
+export function resolveModel(
+  modelOverride: string | null,
+  entries: SessionEntry[],
+  api: TuiPluginApi,
+): ResolvedModelWithSource {
+  if (modelOverride) {
+    const parsed = parseModelOverride(modelOverride);
+    if (parsed) return { model: { model: parsed }, source: "config" };
+  }
+
+  let assistantFallback: ResolvedModel | undefined;
+
+  for (let index = entries.length - 1; index >= 0; index -= 1) {
+    const { info } = entries[index];
+    if (info.role === "user") {
+      return {
+        model: {
+          model: {
+            providerID: info.model.providerID,
+            modelID: info.model.modelID,
+          },
+          variant: info.model.variant,
+        },
+        source: "session",
+      };
+    }
+    if (!assistantFallback) {
+      assistantFallback = {
+        model: {
+          providerID: info.providerID,
+          modelID: info.modelID,
+        },
+        variant: info.variant,
+      };
+    }
+  }
+
+  if (assistantFallback) return { model: assistantFallback, source: "session" };
+
+  const sessionModel = api.state.config.model;
+  if (sessionModel) {
+    const parts = sessionModel.split("/");
+    if (parts.length >= 2) {
+      return {
+        model: { model: { providerID: parts[0], modelID: parts.slice(1).join("/") } },
+        source: "session",
+      };
+    }
+  }
+
+  return { model: {}, source: "unknown" };
+}
+
+export function parseModelOverride(value: string) {
+  const [providerID, ...rest] = value.split("/");
+  const modelID = rest.join("/");
+  if (!providerID || !modelID) return undefined;
+  return { providerID, modelID };
+}
+
+export function formatResolvedModel(resolved: ResolvedModel) {
+  if (!resolved.model) return "default";
+  const base = `${resolved.model.providerID}/${resolved.model.modelID}`;
+  return resolved.variant ? `${base} (${resolved.variant})` : base;
+}
+
+export function formatPreference(preference: ModelPreference): string {
+  if (!preference) return "default";
+  return formatResolvedModel(preference);
+}
+
+export async function getAvailableToolIDs(api: TuiPluginApi): Promise<string[]> {
+  try {
+    const result = await api.client.tool.ids(
+      { directory: api.state.path.directory },
+      { throwOnError: true },
+    );
+    if (
+      Array.isArray(result.data) &&
+      result.data.every((item: unknown) => typeof item === "string")
+    ) {
+      return result.data;
+    }
+  } catch {}
+
+  return DEFAULT_ALLOWED_TOOLS;
+}
+
+export function resolveAllowedTools(
+  allowedTools: string[] | null,
+  availableToolIDs: string[],
+): string[] {
+  if (allowedTools === null) return DEFAULT_ALLOWED_TOOLS;
+  if (allowedTools.includes("*")) return [...availableToolIDs];
+  return allowedTools;
+}
+
+export function buildToolSelection(toolIDs: string[], allowedTools: string[]) {
+  return Object.fromEntries(
+    toolIDs.map((toolID) => [toolID, allowedTools.includes(toolID)]),
+  );
+}
+
+export function buildPermissionRules(
+  toolIDs: string[],
+  allowedTools: string[],
+): PermissionRuleset {
+  const permissionIDs = [
+    ...new Set([...toolIDs, ...ADDITIONAL_PERMISSION_IDS]),
+  ];
+  return permissionIDs.map((permission) => ({
+    permission,
+    pattern: "*",
+    action: allowedTools.includes(permission) ? "allow" : "deny",
+  }));
+}
+
+export function buildSideSystemPrompt(systemPrompt: string, allowedTools: string[]) {
+  if (allowedTools.length === 0) {
+    return `${systemPrompt} No tools are available.`;
+  }
+
+  return `${systemPrompt} Available tools: ${allowedTools.join(", ")}.`;
+}
+
+export function openModelPicker(
+  api: TuiPluginApi,
+  config: SideConfig,
+  currentPreference: ModelPreference,
+  onSelect: (model: ModelPreference) => void,
+) {
+  const { model: defaultModel, source: defaultSource } = resolveModel(
+    config.model,
+    [],
+    api,
+  );
+  const options = buildModelOptions(api, defaultModel, defaultSource);
+
+  api.ui.dialog.setSize("large");
+  api.ui.dialog.replace(() =>
+    api.ui.DialogSelect<{ type: "default" } | { type: "model"; model: NonNullable<ResolvedModel["model"]>; variant?: string }>({
+      title: "side chat model",
+      placeholder: "Select model for side chat",
+      options,
+      onSelect: (option) => {
+        if (option.value.type === "default") {
+          onSelect(undefined);
+          api.ui.toast({
+            variant: "success",
+            message: "side chat model reset to default.",
+          });
+        } else {
+          onSelect({
+            model: option.value.model,
+            variant: option.value.variant,
+          });
+          api.ui.toast({
+            variant: "success",
+            message: `side chat model set to ${formatResolvedModel({
+              model: option.value.model,
+              variant: option.value.variant,
+            })}.`,
+          });
+        }
+        api.ui.dialog.clear();
+      },
+    }),
+  );
+}
+
+function buildModelOptions(
+  api: TuiPluginApi,
+  defaultModel: ResolvedModel,
+  defaultSource: ModelSource,
+): TuiDialogSelectOption<
+  { type: "default" } | { type: "model"; model: NonNullable<ResolvedModel["model"]>; variant?: string }
+>[] {
+  const providers = [...api.state.provider].sort((left, right) =>
+    left.name.localeCompare(right.name),
+  );
+
+  const defaultModelName = defaultModel.model
+    ? providers
+        .find((p) => p.id === defaultModel.model!.providerID)
+        ?.models[defaultModel.model!.modelID]?.name ||
+      defaultModel.model!.modelID
+    : "default";
+
+  const sourceLabel: Record<ModelSource, string> = {
+    config: "config",
+    session: "main session",
+    unknown: "unknown",
+  };
+
+  const options: TuiDialogSelectOption<
+    { type: "default" } | { type: "model"; model: NonNullable<ResolvedModel["model"]>; variant?: string }
+  >[] = [
+    {
+      title: defaultModelName + (defaultModel.variant ? ` (${defaultModel.variant})` : ""),
+      value: { type: "default" },
+      description: `${formatResolvedModel(defaultModel)}`,
+      category: `Default [${sourceLabel[defaultSource]}]`,
+    },
+  ];
+
+  for (const provider of providers) {
+    const models = Object.values(provider.models).sort((left, right) =>
+      left.name.localeCompare(right.name),
+    );
+    for (const model of models) {
+      const resolved = {
+        providerID: model.providerID,
+        modelID: model.id,
+      };
+      options.push({
+        title: model.name || model.id,
+        value: { type: "model", model: resolved },
+        description: `${provider.id}/${model.id}`,
+        category: provider.name,
+      });
+
+      for (const variant of Object.keys(model.variants ?? {}).sort()) {
+        options.push({
+          title: `${model.name || model.id} (${variant})`,
+          value: { type: "model", model: resolved, variant },
+          description: `${provider.id}/${model.id}`,
+          category: provider.name,
+        });
+      }
+    }
+  }
+
+  return options;
+}
+
+export function getErrorMessage(cause: unknown): string {
+  if (cause instanceof Error && cause.message) return cause.message;
+  if (cause && typeof cause === "object") {
+    const data = "data" in cause
+      ? (cause as { data?: { message?: unknown } }).data
+      : undefined;
+    if (data && typeof data.message === "string" && data.message) return data.message;
+  }
+  return "An error occurred.";
+}

package/src/types.ts

@@ -0,0 +1,54 @@
+import type { TuiPluginApi } from "@opencode-ai/plugin/tui";
+import type { Message, Part } from "@opencode-ai/sdk/v2";
+
+export type ThinkConfig = {
+  defaultState: "collapsed" | "expanded";
+  showSummary: boolean;
+};
+
+export type SideConfig = {
+  model: string | null;
+  systemPrompt: string;
+  tokenLimit: number;
+  keybind: string | false;
+  clearKeybind: string | false;
+  thinkToggleKeybind: string | false;
+  allowedTools: string[] | null;
+  width: number;
+  transcriptHeight: number;
+  think: ThinkConfig;
+};
+
+export type SessionEntry = {
+  info: Message;
+  parts: Part[];
+};
+
+export type ResolvedModel = {
+  model?: {
+    providerID: string;
+    modelID: string;
+  };
+  variant?: string;
+};
+
+export type ModelPreference = ResolvedModel | undefined;
+
+export type SideDialogState = {
+  entries: SessionEntry[];
+  streamingAnswer: string;
+  loading: boolean;
+  error?: string;
+  tokenCount: number;
+};
+
+export type OverlayState = {
+  api: TuiPluginApi;
+  modelName: string;
+  state: SideDialogState;
+  thinkCollapsed: boolean;
+  thinkConfig: ThinkConfig;
+  onInput?: (input: { focus: () => void } | undefined) => void;
+  onChangeModel: () => void;
+  onSubmit: (value: string) => boolean;
+};