opencode-agent-dock 0.1.0 → 1.0.1

package/README.md

@@ -1,102 +1,84 @@
 # opencode-agent-dock
 
-> Status: **skeleton / work-in-progress**. Architecture and wiring are in place;
-> the verify-items below remain before it renders live subagents correctly.
+[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
+[![OpenCode Plugin](https://img.shields.io/badge/OpenCode-Plugin-green.svg)](https://opencode.ai)
+[![npm version](https://img.shields.io/npm/v/opencode-agent-dock.svg)](https://www.npmjs.com/package/opencode-agent-dock)
+[![GitHub repo](https://img.shields.io/badge/repo-arttttt%2Fopencode--agent--dock-181717?logo=github)](https://github.com/arttttt/opencode-agent-dock)
 
-An [OpenCode](https://opencode.ai) **TUI plugin** that adds a **Claude-Code-style
-bottom panel** grouping the current session's **subagents** — with select,
-switch, and open-session. Not in the right sidebar: rendered in the `app_bottom`
-slot, which sits below the active route in the session view.
+An [OpenCode](https://opencode.ai) **TUI plugin** that adds a **Claude-Code-style bottom panel** of your running **subagents** — visible at a glance under the prompt, with inline keyboard navigation to browse them collapsed and open any one.
+
+Subagents normally only surface inline in the chat, and the chat scrolls away from where they were spawned. `opencode-agent-dock` keeps the active session's subagents pinned to the bottom of the screen, each with its status, elapsed time and token spend.
+
+## How it works
 
 ```
-▸ ● general-purpose  Verify error-tile reactivity and guards   3m 25s
-  ○ explore          Audit round-3 test quality                 45s
-  ✓ librarian        Lookup JWT docs
+active session route
+  ↓
+resolve current session
+  ├─ parent session → client.session.children() → keep the RUNNING ones
+  └─ subagent session → pin the one currently in focus (panel stays up)
+  ↓
+app_bottom slot renders the roster:  ● title  elapsed · tokens
+  ↓
+navigation: keymap.intercept catches ↑/↓/Enter BEFORE the prompt textarea
+            (the same mechanism opencode uses for copy-on-select), so while the
+            dock is focused the prompt is "locked" and arrows move the cursor
 ```
 
-## Why
+## Features
 
-Subagents only surface inside the chat, and the chat scrolls away from where
-they were spawned. The existing opencode subagent plugins put their list in the
-**right sidebar** and are heavy. This plugin targets the **bottom** (like Claude
-Code's agent panel) and stays as a single lean plugin.
+- **Persistent bottom panel** — running subagents stay visible under the prompt (Claude-Code-style: plain rows, no panel chrome).
+- **Per-subagent telemetry** — status glyph, elapsed time and total token usage on every row.
+- **Inline keyboard navigation** — browse the list collapsed, `Enter` opens the selected subagent's session.
+- **Stays visible inside a subagent** — the focused subagent is highlighted; native `←/→` between siblings updates it live.
+- **Self-cleaning** — finished/cancelled subagents drop out of the panel automatically; it hides when there are none.
+- **Escape stays native** — `Esc` is never hijacked, so it still cancels subagents.
 
 ## Install
 
-TUI plugins are configured in `tui.json`. Add the plugin, then restart OpenCode:
+This is a **TUI plugin**, so it is configured in `tui.json` (not `opencode.json`):
 
 ```jsonc
-// ~/.config/opencode/tui.json
+// ~/.config/opencode/tui.json  (user)  or  .opencode/tui.json  (project)
 {
+  "$schema": "https://opencode.ai/tui.json",
   "plugin": ["opencode-agent-dock"]
 }
 ```
 
-Local development:
-
-```jsonc
-{
-  "plugin": [["file:///absolute/path/to/opencode-agent-dock/src/index.tsx"]]
-}
-```
+Restart OpenCode after adding it.
 
 ## Keybindings
 
 | Key | Action |
 | --- | --- |
-| `alt+a` | Focus the dock |
-| `k` / `j` | Previous / next subagent |
-| `enter` | Open the selected subagent's session |
-| `esc` | Leave the dock |
-
-## Architecture
+| `ctrl+x` `v`  — or `/subagents` | Focus the dock (toggle) |
+| `↑` / `↓` | Previous / next subagent |
+| `Enter` | Open the selected subagent's session |
+| `↑` from the first row, or `ctrl+x` `v` again | Leave the dock |
+| `Esc` | _(native)_ cancel subagents |
 
-Clean Architecture, by analogy with
-[`opencode-auto-vision`](https://github.com/arttttt/opencode-auto-vision):
-dependencies point inward, the domain is pure, and the only thing that knows
-about the opencode SDK / TUI API is the composition root + adapters.
+The toggle key (`<leader>v`) can be remapped in `tui.json` under the `agent-dock.toggle` command if you prefer a different one.
 
-```
-src/
-  domain.ts                              pure: Subagent, selection math, formatting
-  ports.ts                               SubagentStore, SessionNavigator, Logger
-  sdk.ts                                 SDK Session/SessionStatus -> domain Subagent
-  constants.ts                           plugin id, slot name, keybinds, limits
-  adapters/
-    opencode-subagent-store.ts           SubagentStore via client.session.children + events
-    opencode-navigator.ts                SessionNavigator via route.navigate
-    opencode-logger.ts                   Logger via client.app.log
-  view/
-    Dock.tsx                             Solid render into the app_bottom slot
-  index.tsx                              composition root + tui entry ({ id, tui })
-```
-
-### Data flow
-
-`api.route.current` resolves the active parent session →
-`client.session.children({ sessionID })` returns its child sessions → each is
-projected to a domain `Subagent` and status is read from
-`api.state.session.status(id)` → `Dock` renders rows in `app_bottom`.
-Selection is owned by the root; `enter` calls `route.navigate("session", …)`.
-
-## Verify before release
-
-- [ ] `client.session.children` response shape (`result.data`) and namespace.
-- [ ] `Session.time.created` field name for elapsed-time origin.
-- [ ] `app_bottom` slot `SolidPlugin` shape from `@opentui/solid` (cast today).
-- [ ] Focus handling: pushing `agent-dock` mode reliably captures `j/k/enter`.
-- [ ] Map terminal subagent states to `done` vs `error` (status `undefined` is
-      treated as `done` for now).
+> Why a toggle and not bare `↓`? In the parent session the prompt textarea captures arrow keys, and a plugin cannot blur the host prompt. `keymap.intercept` runs before the textarea, so once the dock is focused the arrows are ours. `↓` itself is also the prompt's history key, which made it an unreliable trigger.
 
 ## Develop
 
 ```sh
 npm install
+npm test        # builds dist/, then vitest: domain unit tests + the packed tarball loaded as OpenCode loads it
 npm run typecheck
 ```
 
-OpenCode runs on Bun and loads `.ts`/`.tsx` natively, so there is no build step
-for local file-plugin use.
+The package ships `dist/`, compiled by `npm run build` with the same Solid transform OpenCode applies to local plugins. Raw `.tsx` can't ship: OpenCode compiles none of the files under `node_modules`, where an npm install lives (1.0.0 shipped `src/` and never loaded from npm).
+
+For local development a file plugin needs no build, since it is not under `node_modules`:
+
+```jsonc
+{ "plugin": [["file:///absolute/path/to/opencode-agent-dock/src/index.tsx"]] }
+```
+
+CI runs the typecheck and tests on every pull request and every push to `main`.
 
 ## License
 

package/dist/adapters/opencode-logger.js

@@ -0,0 +1,17 @@
+// Adapter — Logger over the opencode client app log endpoint.
+
+import { SERVICE } from "../constants.js";
+export function createLogger(client) {
+  const write = (level, message) => {
+    client.app.log({
+      service: SERVICE,
+      level,
+      message
+    }).catch(() => {});
+  };
+  return {
+    info: m => write("info", m),
+    warn: m => write("warn", m),
+    error: m => write("error", m)
+  };
+}

package/{src/adapters/opencode-subagent-store.ts → dist/adapters/opencode-subagent-store.js}

@@ -8,50 +8,30 @@
 //     the panel; native left/right between siblings updates it). `activeId`
 //     exposes that focused id for highlighting.
 
-import type { Session } from "@opencode-ai/sdk/v2";
-import type { TuiPluginApi } from "@opencode-ai/plugin/tui";
-import type { Subagent } from "../domain.js";
 import { sortSubagents } from "../domain.js";
 import { projectSubagent } from "../sdk.js";
-import type { Logger, SubagentStore } from "../ports.js";
 import { LIMITS } from "../constants.js";
-
-type ChildrenClient = {
-  session: {
-    children(parameters: {
-      sessionID: string;
-      directory?: string;
-      workspace?: string;
-    }): Promise<unknown>;
-  };
-};
-
-function extractSessions(result: unknown): Session[] {
-  const data = (result as { data?: unknown } | null | undefined)?.data;
-  return Array.isArray(data) ? (data as Session[]) : [];
+function extractSessions(result) {
+  const data = result?.data;
+  return Array.isArray(data) ? data : [];
 }
-
-function isArchived(session: Session): boolean {
+function isArchived(session) {
   const archived = session.time.archived;
   return typeof archived === "number" && archived > 0;
 }
-
-export function createSubagentStore(api: TuiPluginApi, log: Logger): SubagentStore {
-  const client = api.client as unknown as ChildrenClient;
-  const listeners = new Set<() => void>();
-  let cache: Subagent[] = [];
-  let activeId: string | undefined;
-
-  const emit = (): void => {
+export function createSubagentStore(api, log) {
+  const client = api.client;
+  const listeners = new Set();
+  let cache = [];
+  let activeId;
+  const emit = () => {
     for (const handler of listeners) handler();
   };
-
-  const resolveCurrent = (): string | undefined => {
-    const current = api.route.current as { name: string; params?: { sessionID?: string } };
+  const resolveCurrent = () => {
+    const current = api.route.current;
     return current.name === "session" ? current.params?.sessionID : undefined;
   };
-
-  const refresh = async (): Promise<void> => {
+  const refresh = async () => {
     const currentId = resolveCurrent();
     if (!currentId) {
       if (cache.length !== 0 || activeId !== undefined) {
@@ -72,14 +52,11 @@ export function createSubagentStore(api: TuiPluginApi, log: Logger): SubagentSto
         activeId = currentId;
       } else {
         // Parent session: list running children.
-        const result = await client.session.children({ sessionID: currentId });
+        const result = await client.session.children({
+          sessionID: currentId
+        });
         const sessions = extractSessions(result);
-        cache = sortSubagents(
-          sessions
-            .filter((item) => !isArchived(item))
-            .map((item) => projectSubagent(item, api.state.session.status(item.id)))
-            .filter((subagent) => subagent.status === "running"),
-        ).slice(0, LIMITS.maxRows);
+        cache = sortSubagents(sessions.filter(item => !isArchived(item)).map(item => projectSubagent(item, api.state.session.status(item.id))).filter(subagent => subagent.status === "running")).slice(0, LIMITS.maxRows);
         activeId = undefined;
       }
       emit();
@@ -87,41 +64,29 @@ export function createSubagentStore(api: TuiPluginApi, log: Logger): SubagentSto
       log.error(`dock refresh failed: ${error instanceof Error ? error.message : String(error)}`);
     }
   };
-
   void refresh();
   const interval = setInterval(() => void refresh(), LIMITS.pollMs);
-
-  const subscribe = api.event.on as unknown as (
-    type: string,
-    handler: () => void,
-  ) => () => void;
-  const unsubs = [
-    subscribe("session.created", () => void refresh()),
-    subscribe("session.idle", () => void refresh()),
-    subscribe("session.updated", () => void refresh()),
-    subscribe("session.removed", () => void refresh()),
-  ];
-
+  const subscribe = api.event.on;
+  const unsubs = [subscribe("session.created", () => void refresh()), subscribe("session.idle", () => void refresh()), subscribe("session.updated", () => void refresh()), subscribe("session.removed", () => void refresh())];
   api.lifecycle.onDispose(() => {
     clearInterval(interval);
     for (const unsub of unsubs) unsub();
   });
-
   return {
-    get parentSessionId(): string | undefined {
+    get parentSessionId() {
       return resolveCurrent();
     },
-    get activeId(): string | undefined {
+    get activeId() {
       return activeId;
     },
-    snapshot(): Subagent[] {
+    snapshot() {
       return cache;
     },
-    onChange(handler: () => void): () => void {
+    onChange(handler) {
       listeners.add(handler);
       return () => {
         listeners.delete(handler);
       };
-    },
+    }
   };
 }

package/{src/constants.ts → dist/constants.js}

@@ -2,9 +2,8 @@
 
 export const PLUGIN_ID = "arttttt.agent-dock";
 export const SERVICE = "agent-dock";
-
 export const LIMITS = {
   labelMax: 48,
   maxRows: 50,
-  pollMs: 300,
-} as const;
+  pollMs: 300
+};

package/{src/domain.ts → dist/domain.js}

@@ -1,54 +1,34 @@
 // Domain — pure policy. No IO, no SDK, no Solid. Fully unit-testable.
 
-export type SubagentStatus = "running" | "idle" | "done" | "error";
-
 /** Neutral projection of a child session. SDK-shape mapping lives in sdk.ts. */
-export type Subagent = {
-  id: string;
-  title: string;
-  status: SubagentStatus;
-  startedAt: number;
-  model?: string;
-  tokens?: number;
-};
 
 /** View-model row derived from a Subagent at a point in time. */
-export type DockRow = {
-  subagent: Subagent;
-  glyph: string;
-  label: string;
-  meta: string;
-};
 
-const STATUS_GLYPH: Record<SubagentStatus, string> = {
+const STATUS_GLYPH = {
   running: "●",
   idle: "○",
   done: "✓",
-  error: "✗",
+  error: "✗"
 };
-
-const STATUS_RANK: Record<SubagentStatus, number> = {
+const STATUS_RANK = {
   running: 0,
   idle: 1,
   done: 2,
-  error: 3,
+  error: 3
 };
-
-export function sortSubagents(list: readonly Subagent[]): Subagent[] {
+export function sortSubagents(list) {
   return [...list].sort((a, b) => {
     const r = STATUS_RANK[a.status] - STATUS_RANK[b.status];
     return r !== 0 ? r : b.startedAt - a.startedAt;
   });
 }
-
-export function clampSelection(index: number, length: number): number {
+export function clampSelection(index, length) {
   if (length <= 0) return 0;
   if (index < 0) return 0;
   if (index >= length) return length - 1;
   return index;
 }
-
-export function formatElapsed(startedAt: number, now: number = Date.now()): string {
+export function formatElapsed(startedAt, now = Date.now()) {
   const seconds = Math.max(0, Math.floor((now - startedAt) / 1000));
   if (seconds < 60) return `${seconds}s`;
   const minutes = Math.floor(seconds / 60);
@@ -57,31 +37,27 @@ export function formatElapsed(startedAt: number, now: number = Date.now()): stri
   const hours = Math.floor(minutes / 60);
   return `${hours}h ${String(minutes % 60).padStart(2, "0")}m`;
 }
-
-export function formatTokens(tokens: number | undefined): string {
+export function formatTokens(tokens) {
   if (tokens === undefined || tokens <= 0) return "";
   if (tokens < 1000) return `${tokens}`;
   return `${(tokens / 1000).toFixed(1)}k`;
 }
-
-export function truncate(text: string, max: number): string {
+export function truncate(text, max) {
   const trimmed = text.trim();
   if (trimmed.length <= max) return trimmed;
   return trimmed.slice(0, Math.max(0, max - 1)).trimEnd() + "…";
 }
-
-export function isTerminal(status: SubagentStatus): boolean {
+export function isTerminal(status) {
   return status === "done" || status === "error";
 }
-
-export function toRow(subagent: Subagent, now: number, labelMax: number): DockRow {
-  const meta: string[] = [];
+export function toRow(subagent, now, labelMax) {
+  const meta = [];
   if (!isTerminal(subagent.status)) meta.push(formatElapsed(subagent.startedAt, now));
   if (subagent.tokens !== undefined) meta.push(formatTokens(subagent.tokens));
   return {
     subagent,
     glyph: STATUS_GLYPH[subagent.status],
     label: truncate(subagent.title || subagent.id, labelMax),
-    meta: meta.join(" \u00b7 "),
+    meta: meta.join(" \u00b7 ")
   };
 }

package/{src/index.tsx → dist/index.js}

@@ -1,3 +1,4 @@
+import { createComponent as _$createComponent } from "@opentui/solid";
 /** @jsxImportSource @opentui/solid */
 // Composition root.
 //
@@ -13,29 +14,19 @@
 // Toggle: `<leader>v` (ctrl+x then v) or `/subagents` — ctrl+x itself is left
 // untouched (it is opencode's leader key).
 
-import type { TuiPlugin, TuiPluginModule, TuiSlotPlugin } from "@opencode-ai/plugin/tui";
 import { createSignal } from "solid-js";
 import { PLUGIN_ID } from "./constants.js";
 import { clampSelection } from "./domain.js";
 import { createSubagentStore } from "./adapters/opencode-subagent-store.js";
 import { createLogger } from "./adapters/opencode-logger.js";
 import { Dock } from "./view/Dock.js";
-
-type InterceptEvent = {
-  name?: string;
-  ctrl?: boolean;
-  preventDefault: () => void;
-  stopPropagation: () => void;
-};
-
-const tui: TuiPlugin = async (api) => {
+const tui = async api => {
   const log = createLogger(api.client);
   const store = createSubagentStore(api, log);
   log.info("agent-dock initialized");
-
   const [selection, setSelection] = createSignal(0);
   const [focused, setFocused] = createSignal(false);
-  const [activeId, setActiveId] = createSignal<string | undefined>(undefined);
+  const [activeId, setActiveId] = createSignal(undefined);
 
   // Mirror the store's active id + keep selection in range as rows change; leave
   // the dock if the roster empties.
@@ -49,25 +40,27 @@ const tui: TuiPlugin = async (api) => {
     const clamped = clampSelection(selection(), rows.length);
     if (clamped !== selection()) setSelection(clamped);
   });
-
-  const slot: TuiSlotPlugin = {
+  const slot = {
     slots: {
-      app_bottom: (ctx) => {
+      app_bottom: ctx => {
         const tone = ctx.theme.current;
-        return (
-          <Dock
-            store={store}
-            selection={selection}
-            focused={focused}
-            activeId={activeId}
-            colors={{ text: tone.text, muted: tone.textMuted, accent: tone.primary }}
-          />
-        );
-      },
-    },
+        return _$createComponent(Dock, {
+          store: store,
+          selection: selection,
+          focused: focused,
+          activeId: activeId,
+          get colors() {
+            return {
+              text: tone.text,
+              muted: tone.textMuted,
+              accent: tone.primary
+            };
+          }
+        });
+      }
+    }
   };
   api.slots.register(slot);
-
   const enterDock = () => {
     if (store.snapshot().length === 0) return;
     setSelection(0);
@@ -78,66 +71,65 @@ const tui: TuiPlugin = async (api) => {
   };
 
   // Inline navigation: intercept arrows/enter while the dock is focused.
-  api.keymap.intercept(
-    "key",
-    ({ event }) => {
-      if (!focused()) return;
-      const ev = event as InterceptEvent;
-      const rows = store.snapshot();
-      if (rows.length === 0) {
-        exitDock();
-        return;
-      }
-      switch (ev.name) {
-        case "up":
-          if (selection() <= 0) exitDock();
-          else setSelection((current) => current - 1);
-          ev.preventDefault();
-          ev.stopPropagation();
-          break;
-        case "down":
-          setSelection((current) => clampSelection(current + 1, rows.length));
-          ev.preventDefault();
-          ev.stopPropagation();
-          break;
-        case "return": {
+  api.keymap.intercept("key", ({
+    event
+  }) => {
+    if (!focused()) return;
+    const rows = store.snapshot();
+    if (rows.length === 0) {
+      exitDock();
+      return;
+    }
+    switch (event.name) {
+      case "up":
+        if (selection() <= 0) exitDock();else setSelection(current => current - 1);
+        event.preventDefault();
+        event.stopPropagation();
+        break;
+      case "down":
+        setSelection(current => clampSelection(current + 1, rows.length));
+        event.preventDefault();
+        event.stopPropagation();
+        break;
+      case "return":
+        {
           const target = rows[clampSelection(selection(), rows.length)];
           if (target) {
             exitDock();
-            api.route.navigate("session", { sessionID: target.id });
+            api.route.navigate("session", {
+              sessionID: target.id
+            });
           }
-          ev.preventDefault();
-          ev.stopPropagation();
+          event.preventDefault();
+          event.stopPropagation();
           break;
         }
-      }
-    },
-    { priority: 1 },
-  );
-
+    }
+  }, {
+    priority: 1
+  });
   api.keymap.registerLayer({
     mode: "base",
-    commands: [
-      {
-        name: "agent-dock.toggle",
-        title: "Subagents",
-        category: "Plugin",
-        namespace: "palette",
-        slashName: "subagents",
-        desc: "Focus the subagent dock to navigate it",
-        run: () => {
-          if (focused()) exitDock();
-          else enterDock();
-        },
-      },
-    ],
-    bindings: [{ key: "<leader>v", cmd: "agent-dock.toggle", desc: "Navigate subagents" }],
+    commands: [{
+      name: "agent-dock.toggle",
+      title: "Subagents",
+      category: "Plugin",
+      namespace: "palette",
+      slashName: "subagents",
+      desc: "Focus the subagent dock to navigate it",
+      run: () => {
+        if (focused()) exitDock();else enterDock();
+      }
+    }],
+    bindings: [{
+      key: "<leader>v",
+      cmd: "agent-dock.toggle",
+      desc: "Navigate subagents"
+    }]
   });
 };
-
-const plugin: TuiPluginModule & { id: string } = {
+const plugin = {
   id: PLUGIN_ID,
-  tui,
+  tui
 };
-
 export default plugin;

package/dist/ports.js

@@ -0,0 +1 @@
+export {};

package/{src/sdk.ts → dist/sdk.js}

@@ -1,10 +1,7 @@
 // SDK boundary — the only place that knows about @opencode-ai/sdk shapes.
 // Projects SDK Session/SessionStatus into the neutral domain Subagent.
 
-import type { Session, SessionStatus } from "@opencode-ai/sdk/v2";
-import type { Subagent, SubagentStatus } from "./domain.js";
-
-export function statusFromSessionStatus(status: SessionStatus | undefined): SubagentStatus {
+export function statusFromSessionStatus(status) {
   switch (status?.type) {
     case "busy":
     case "retry":
@@ -15,20 +12,18 @@ export function statusFromSessionStatus(status: SessionStatus | undefined): Suba
       return "done";
   }
 }
-
-function totalTokens(tokens: Session["tokens"] | undefined): number | undefined {
+function totalTokens(tokens) {
   if (!tokens) return undefined;
   const total = tokens.input + tokens.output + tokens.reasoning + tokens.cache.read + tokens.cache.write;
   return total > 0 ? total : undefined;
 }
-
-export function projectSubagent(session: Session, status: SessionStatus | undefined): Subagent {
+export function projectSubagent(session, status) {
   return {
     id: session.id,
     title: session.title || session.agent || "subagent",
     status: statusFromSessionStatus(status),
     startedAt: session.time.created,
     model: session.model?.id,
-    tokens: totalTokens(session.tokens),
+    tokens: totalTokens(session.tokens)
   };
 }

package/dist/view/Dock.js

@@ -0,0 +1,88 @@
+import { effect as _$effect } from "@opentui/solid";
+import { insertNode as _$insertNode } from "@opentui/solid";
+import { memo as _$memo } from "@opentui/solid";
+import { insert as _$insert } from "@opentui/solid";
+import { createComponent as _$createComponent } from "@opentui/solid";
+import { setProp as _$setProp } from "@opentui/solid";
+import { createElement as _$createElement } from "@opentui/solid";
+/** @jsxImportSource @opentui/solid */
+// View — the persistent bottom panel (app_bottom slot). Claude-Code-style:
+// plain text rows under the prompt, no panel chrome. Stays visible in both the
+// parent session (running subagents) and inside a subagent (the focused one,
+// highlighted via `activeId`). When the dock is focused for inline navigation,
+// the selected row gets a `▸` cursor.
+//
+// Reactivity: `selection`, `focused`, `activeId` are real Solid signals (owned
+// by the composition root), so per-row selected/active checks are tracked
+// directly — no signal-reading hacks. The rows memo additionally reads the
+// `version` signal (bumped on every store change) so elapsed times stay fresh.
+
+import { For, Show, createMemo, createSignal, onCleanup } from "solid-js";
+import { toRow } from "../domain.js";
+import { LIMITS } from "../constants.js";
+export function Dock(props) {
+  // The store emits on every refresh (data change + elapsed tick), which bumps
+  // `version` and re-runs the rows memo. No separate timer needed here.
+  const [version, setVersion] = createSignal(0);
+  const unsubscribe = props.store.onChange(() => setVersion(value => value + 1));
+  onCleanup(unsubscribe);
+  const rows = createMemo(() => {
+    version();
+    const now = Date.now();
+    return props.store.snapshot().map(subagent => toRow(subagent, now, LIMITS.labelMax));
+  });
+  return _$createComponent(Show, {
+    get when() {
+      return rows().length > 0;
+    },
+    get children() {
+      var _el$ = _$createElement("box");
+      _$setProp(_el$, "flexDirection", "column");
+      _$setProp(_el$, "paddingLeft", 2);
+      _$setProp(_el$, "paddingRight", 2);
+      _$insert(_el$, _$createComponent(For, {
+        get each() {
+          return rows();
+        },
+        children: (row, index) => {
+          const selected = () => props.focused() && index() === props.selection();
+          const active = () => props.activeId() === row.subagent.id;
+          const hot = () => selected() || active();
+          return (() => {
+            var _el$2 = _$createElement("text"),
+              _el$3 = _$createElement("span"),
+              _el$4 = _$createElement("span"),
+              _el$5 = _$createElement("span");
+            _$insertNode(_el$2, _el$3);
+            _$insertNode(_el$2, _el$4);
+            _$insertNode(_el$2, _el$5);
+            _$insert(_el$3, () => selected() ? "\u25b8 " : "  ");
+            _$insert(_el$4, () => row.glyph);
+            _$insert(_el$5, () => ` ${row.label}${row.meta ? "  " + row.meta : ""}`);
+            _$effect(_p$ => {
+              var _v$ = {
+                  fg: hot() ? props.colors.accent : props.colors.muted
+                },
+                _v$2 = {
+                  fg: row.subagent.status === "running" ? props.colors.accent : props.colors.muted
+                },
+                _v$3 = {
+                  fg: hot() ? props.colors.text : props.colors.muted
+                };
+              _v$ !== _p$.e && (_p$.e = _$setProp(_el$3, "style", _v$, _p$.e));
+              _v$2 !== _p$.t && (_p$.t = _$setProp(_el$4, "style", _v$2, _p$.t));
+              _v$3 !== _p$.a && (_p$.a = _$setProp(_el$5, "style", _v$3, _p$.a));
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined,
+              a: undefined
+            });
+            return _el$2;
+          })();
+        }
+      }));
+      return _el$;
+    }
+  });
+}

package/package.json

@@ -1,19 +1,23 @@
 {
   "name": "opencode-agent-dock",
-  "version": "0.1.0",
-  "description": "OpenCode TUI plugin — a Claude-Code-style bottom panel that groups the current session's subagents, with select / switch / open-session.",
+  "version": "1.0.1",
+  "description": "OpenCode TUI plugin — a Claude-Code-style bottom panel of running subagents with inline keyboard navigation.",
   "type": "module",
   "exports": {
     "./tui": {
-      "import": "./src/index.tsx"
+      "import": "./dist/index.js"
     }
   },
   "files": [
-    "src",
+    "dist",
     "README.md",
     "LICENSE"
   ],
   "scripts": {
+    "build": "node scripts/build.mjs",
+    "prepack": "npm run build",
+    "pretest": "npm run build",
+    "test": "vitest run",
     "typecheck": "tsc --noEmit",
     "format": "prettier --write \"src/**/*.{ts,tsx}\"",
     "format:check": "prettier --check \"src/**/*.{ts,tsx}\""
@@ -37,30 +41,30 @@
   "bugs": {
     "url": "https://github.com/arttttt/opencode-agent-dock/issues"
   },
-  "dependencies": {
-    "@opencode-ai/plugin": "^1.18.4",
-    "@opencode-ai/sdk": "^1.18.4"
-  },
   "peerDependencies": {
-    "@opentui/core": ">=0.4.5",
-    "@opentui/keymap": ">=0.4.5",
+    "@opencode-ai/plugin": ">=1.18.0",
+    "@opencode-ai/sdk": ">=1.18.0",
     "@opentui/solid": ">=0.4.5"
   },
   "peerDependenciesMeta": {
-    "@opentui/core": { "optional": true },
-    "@opentui/keymap": { "optional": true },
-    "@opentui/solid": { "optional": true }
+    "@opentui/solid": {
+      "optional": true
+    }
   },
   "devDependencies": {
+    "@babel/core": "7.28.0",
+    "@babel/preset-typescript": "7.27.1",
     "@opencode-ai/plugin": "^1.18.4",
     "@opencode-ai/sdk": "^1.18.4",
     "@opentui/core": ">=0.4.5",
-    "@opentui/keymap": ">=0.4.5",
     "@opentui/solid": ">=0.4.5",
     "@types/bun": "latest",
+    "babel-preset-solid": "1.9.12",
+    "bun": "^1.4.4",
     "prettier": "^3.8.1",
     "solid-js": "^1.9.0",
-    "typescript": "^5.7.0"
+    "typescript": "^5.7.0",
+    "vitest": "^2.1.0"
   },
   "engines": {
     "opencode": "^1.18.0"

package/src/adapters/opencode-logger.ts

@@ -1,18 +0,0 @@
-// Adapter — Logger over the opencode client app log endpoint.
-
-import type { OpencodeClient } from "@opencode-ai/sdk/v2";
-import type { Logger } from "../ports.js";
-import { SERVICE } from "../constants.js";
-
-export function createLogger(client: OpencodeClient): Logger {
-  const write = (level: "info" | "warn" | "error", message: string): void => {
-    client.app
-      .log({ service: SERVICE, level, message })
-      .catch(() => {});
-  };
-  return {
-    info: (m) => write("info", m),
-    warn: (m) => write("warn", m),
-    error: (m) => write("error", m),
-  };
-}

package/src/ports.ts

@@ -1,24 +0,0 @@
-// Ports — abstractions the application layer depends on.
-// (Dependency Inversion: high-level policy depends on these contracts, not on
-// concrete IO or the opencode SDK. Adapters in src/adapters implement them.)
-
-import type { Subagent } from "./domain.js";
-
-/** Source of the current session's subagents. */
-export interface SubagentStore {
-  /** The session whose subagents we render (the active session route). */
-  readonly parentSessionId: string | undefined;
-  /** When the active route is a subagent session — its id, so the panel can
-   * highlight the one currently in focus. Undefined in the parent session. */
-  readonly activeId: string | undefined;
-  /** Snapshot of subagents, already sorted and capped for display. */
-  snapshot(): Subagent[];
-  /** Subscribe to store changes; returns an unsubscribe function. */
-  onChange(handler: () => void): () => void;
-}
-
-export interface Logger {
-  info(message: string): void;
-  warn(message: string): void;
-  error(message: string): void;
-}

package/src/view/Dock.tsx

@@ -1,72 +0,0 @@
-/** @jsxImportSource @opentui/solid */
-// View — the persistent bottom panel (app_bottom slot). Claude-Code-style:
-// plain text rows under the prompt, no panel chrome. Stays visible in both the
-// parent session (running subagents) and inside a subagent (the focused one,
-// highlighted via `activeId`). When the dock is focused for inline navigation,
-// the selected row gets a `▸` cursor.
-//
-// Reactivity: `selection`, `focused`, `activeId` are real Solid signals (owned
-// by the composition root), so per-row selected/active checks are tracked
-// directly — no signal-reading hacks. The rows memo additionally reads the
-// `version` signal (bumped on every store change) so elapsed times stay fresh.
-
-import { For, Show, createMemo, createSignal, onCleanup, type JSX } from "solid-js";
-import type { RGBA } from "@opentui/core";
-import type { SubagentStore } from "../ports.js";
-import { toRow } from "../domain.js";
-import { LIMITS } from "../constants.js";
-
-export type DockColors = {
-  text: RGBA | string;
-  muted: RGBA | string;
-  accent: RGBA | string;
-};
-
-export type DockProps = {
-  store: SubagentStore;
-  selection: () => number;
-  focused: () => boolean;
-  activeId: () => string | undefined;
-  colors: DockColors;
-};
-
-export function Dock(props: DockProps): JSX.Element {
-  // The store emits on every refresh (data change + elapsed tick), which bumps
-  // `version` and re-runs the rows memo. No separate timer needed here.
-  const [version, setVersion] = createSignal(0);
-  const unsubscribe = props.store.onChange(() => setVersion((value) => value + 1));
-  onCleanup(unsubscribe);
-
-  const rows = createMemo(() => {
-    version();
-    const now = Date.now();
-    return props.store.snapshot().map((subagent) => toRow(subagent, now, LIMITS.labelMax));
-  });
-
-  return (
-    <Show when={rows().length > 0}>
-      <box flexDirection="column" paddingLeft={2} paddingRight={2}>
-        <For each={rows()}>
-          {(row, index) => {
-            const selected = () => props.focused() && index() === props.selection();
-            const active = () => props.activeId() === row.subagent.id;
-            const hot = () => selected() || active();
-            return (
-              <text>
-                <span style={{ fg: hot() ? props.colors.accent : props.colors.muted }}>
-                  {selected() ? "\u25b8 " : "  "}
-                </span>
-                <span style={{ fg: row.subagent.status === "running" ? props.colors.accent : props.colors.muted }}>
-                  {row.glyph}
-                </span>
-                <span style={{ fg: hot() ? props.colors.text : props.colors.muted }}>
-                  {` ${row.label}${row.meta ? "  " + row.meta : ""}`}
-                </span>
-              </text>
-            );
-          }}
-        </For>
-      </box>
-    </Show>
-  );
-}