@agentprojectcontext/apx 1.20.0 → 1.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agentprojectcontext/apx",
-  "version": "1.20.0",
+  "version": "1.21.0",
   "description": "APX — unified CLI + daemon for the Agent Project Context (APC) standard.",
   "publishConfig": {
     "access": "public"
@@ -10,13 +10,11 @@
   "bin": {
     "apx": "./src/cli/index.js",
     "apx-daemon": "./src/daemon/index.js",
-    "apx-mcp": "./src/mcp/index.js",
-    "apx-ng": "./dist/cli/index.js"
+    "apx-mcp": "./src/mcp/index.js"
   },
   "files": [
     "src/",
     "skills/",
-    "dist/",
     "README.md"
   ],
   "engines": {
@@ -26,9 +24,6 @@
     "start": "node src/daemon/index.js",
     "smoke": "node src/daemon/smoke.js",
     "test": "node --test --test-reporter=spec tests/*.test.js",
-    "build": "node scripts/build-cli.js",
-    "build:watch": "node scripts/build-cli.js --watch",
-    "typecheck": "tsc --noEmit -p tsconfig.cli.json",
     "upgrade": "pnpm install && pnpm add -g .",
     "prepack": "node scripts/sync-apc-skill.js",
     "postinstall": "node src/cli/postinstall.js"
@@ -36,50 +31,23 @@
   "packageManager": "pnpm@10.25.0",
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.29.0",
-    "@opentui/core": "^0.2.8",
-    "@opentui/keymap": "^0.2.8",
-    "@opentui/solid": "^0.2.8",
-    "@solid-primitives/event-bus": "^1.1.3",
-    "@solid-primitives/keyboard": "^1.3.5",
-    "@solid-primitives/scheduled": "^1.5.3",
-    "ansi-regex": "^6.2.2",
     "chalk": "^5.6.2",
     "cli-cursor": "^5.0.0",
-    "cli-sound": "^1.1.3",
-    "clipboardy": "^5.3.1",
     "cron-parser": "^5.5.0",
-    "effect": "^3.21.2",
     "express": "^4.21.0",
-    "fuzzysort": "^3.1.0",
-    "jsonc-parser": "^3.3.1",
-    "node-fetch": "^3.3.2",
-    "open": "^11.0.0",
-    "opentui-spinner": "^0.0.6",
-    "react": "^19.2.6",
-    "remeda": "^2.34.1",
-    "semver": "^7.8.0",
-    "solid-js": "^1.9.12",
-    "strip-ansi": "^7.2.0",
-    "yargs": "^18.0.0",
-    "zod": "^3.25.76"
+    "node-fetch": "^3.3.2"
   },
   "optionalDependencies": {
     "fast-glob": "^3.3.2",
-    "puppeteer": "^22.0.0",
-    "ws": "^8.18.0"
+    "puppeteer": "^22.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.29.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@types/node": "^25.7.0",
-    "@types/yargs": "^17.0.35",
-    "babel-preset-solid": "^1.9.12",
     "better-sqlite3": "^11.3.0",
     "conventional-changelog-conventionalcommits": "^9.3.1",
-    "electron": "^33.4.11",
     "esbuild": "^0.28.0",
-    "esbuild-plugin-solid": "^0.6.0",
     "typescript": "^6.0.3"
   },
   "keywords": [
@@ -94,7 +62,6 @@
   "pnpm": {
     "onlyBuiltDependencies": [
       "better-sqlite3",
-      "electron",
       "puppeteer"
     ]
   },

package/src/tui/_shims/cli-logo.ts

@@ -2,17 +2,19 @@ export type LogoShape = { left: string[]; right: string[] }
 
 export const logo: LogoShape = {
   left: [
-    "   _    ___ __  __",
-    "  /_\\  | _ \\\\ \\/ /",
-    " / _ \\ |  _/ >  < ",
-    "/_/ \\_\\|_|  /_/\\_\\",
+    "              ",
+    "█▀▀█ █▀▀█ █▄▄█",
+    "█^^█ █__█ _██_",
+    "█__█ █▀▀▀ █▀▀█",
   ],
   right: [
-    "  ___   ___   ___   ___ ",
-    " / __| / _ \\ |   \\ | __|",
-    "| (__ | (_) || |) || _| ",
-    " \\___| \\___/ |___/ |___|",
+    "             ▄     ",
+    "█▀▀▀ █▀▀█ █▀▀█ █▀▀█",
+    "█___ █__█ █__█ █^^^",
+    "▀▀▀▀ ▀▀▀▀ ▀▀▀▀ ▀▀▀▀",
   ],
 }
 
 export const go = logo
+
+export const marks = "_^~,"

package/src/tui/_shims/opencode-any.ts

@@ -96,8 +96,8 @@ export const cmd: any = {}
 export const withTimeout: any = (fn: any) => fn
 export const withNetworkOptions: any = () => {}
 export const resolveNetworkOptionsNoConfig: any = () => ({})
-export const displayCharAt: any = () => ""
-export const mentionTriggerIndex: any = () => -1
+export const displayCharAt: any = () => undefined
+export const mentionTriggerIndex: any = () => undefined
 export const installPlugin: any = () => {}
 export const patchPluginConfig: any = () => {}
 export const readPluginManifest: any = () => ({})

package/src/tui/_shims/prompt-display.ts

@@ -0,0 +1,45 @@
+// Shim for opencode's `@/cli/cmd/prompt-display`.
+// Ported verbatim from opencode so the prompt autocomplete behaves correctly:
+// the catch-all shim used to stub `mentionTriggerIndex` as `() => -1`, which is
+// `!== undefined` and therefore opened the "@" autocomplete on every keystroke,
+// swallowing Enter / Tab / Ctrl+P.
+
+const graphemes = new Intl.Segmenter(undefined, { granularity: "grapheme" })
+
+function displayOffsetIndex(value: string, offset: number) {
+  if (offset <= 0) return 0
+
+  let width = 0
+  for (const part of graphemes.segment(value)) {
+    const next = width + Bun.stringWidth(part.segment)
+    if (next > offset) return part.index
+    width = next
+  }
+
+  return value.length
+}
+
+export function displaySlice(value: string, start = 0, end = Bun.stringWidth(value)) {
+  return value.slice(displayOffsetIndex(value, start), displayOffsetIndex(value, end))
+}
+
+export function displayCharAt(value: string, offset: number) {
+  let width = 0
+  for (const part of graphemes.segment(value)) {
+    const next = width + Bun.stringWidth(part.segment)
+    if (offset === width || offset < next) return part.segment
+    width = next
+  }
+}
+
+export function mentionTriggerIndex(value: string, offset = Bun.stringWidth(value)) {
+  const text = displaySlice(value, 0, offset)
+  const index = text.lastIndexOf("@")
+  if (index === -1) return
+
+  const before = index === 0 ? undefined : text[index - 1]
+  const query = text.slice(index)
+  if ((before === undefined || /\s/.test(before)) && !/\s/.test(query)) {
+    return Bun.stringWidth(text.slice(0, index))
+  }
+}

package/src/tui/_shims/util-locale.ts

@@ -1,10 +1,104 @@
+// Shim for opencode's `@/util/locale`.
+// Ported verbatim from opencode — the previous stub was missing `truncate`,
+// `truncateLeft`, `time`, `datetime`, `duration`, etc., which crashed the
+// command palette dialog (`Locale.truncate is not a function`).
+
+function titlecase(str: string) {
+  return str.replace(/\b\w/g, (c) => c.toUpperCase())
+}
+
+function time(input: number): string {
+  const date = new Date(input)
+  return date.toLocaleTimeString(undefined, { timeStyle: "short" })
+}
+
+function datetime(input: number): string {
+  const date = new Date(input)
+  const localTime = time(input)
+  const localDate = date.toLocaleDateString()
+  return `${localTime} · ${localDate}`
+}
+
+function todayTimeOrDateTime(input: number): string {
+  const date = new Date(input)
+  const now = new Date()
+  const isToday =
+    date.getFullYear() === now.getFullYear() && date.getMonth() === now.getMonth() && date.getDate() === now.getDate()
+
+  if (isToday) {
+    return time(input)
+  } else {
+    return datetime(input)
+  }
+}
+
+function number(num: number): string {
+  if (num >= 1000000) {
+    return (num / 1000000).toFixed(1) + "M"
+  } else if (num >= 1000) {
+    return (num / 1000).toFixed(1) + "K"
+  }
+  return num.toString()
+}
+
+function duration(input: number) {
+  if (input < 1000) {
+    return `${input}ms`
+  }
+  if (input < 60000) {
+    return `${(input / 1000).toFixed(1)}s`
+  }
+  if (input < 3600000) {
+    const minutes = Math.floor(input / 60000)
+    const seconds = Math.floor((input % 60000) / 1000)
+    return `${minutes}m ${seconds}s`
+  }
+  if (input < 86400000) {
+    const hours = Math.floor(input / 3600000)
+    const minutes = Math.floor((input % 3600000) / 60000)
+    return `${hours}h ${minutes}m`
+  }
+  const hours = Math.floor(input / 3600000)
+  const days = Math.floor((input % 3600000) / 86400000)
+  return `${days}d ${hours}h`
+}
+
+function truncate(str: string, len: number): string {
+  if (str.length <= len) return str
+  return str.slice(0, len - 1) + "…"
+}
+
+function truncateLeft(str: string, len: number): string {
+  if (str.length <= len) return str
+  return "…" + str.slice(-(len - 1))
+}
+
+function truncateMiddle(str: string, maxLength: number = 35): string {
+  if (str.length <= maxLength) return str
+
+  const ellipsis = "…"
+  const keepStart = Math.ceil((maxLength - ellipsis.length) / 2)
+  const keepEnd = Math.floor((maxLength - ellipsis.length) / 2)
+
+  return str.slice(0, keepStart) + ellipsis + str.slice(-keepEnd)
+}
+
+function pluralize(count: number, singular: string, plural: string): string {
+  const template = count === 1 ? singular : plural
+  return template.replace("{}", count.toString())
+}
+
 export const Locale = {
+  titlecase,
+  time,
+  datetime,
+  todayTimeOrDateTime,
+  number,
+  duration,
+  truncate,
+  truncateLeft,
+  truncateMiddle,
+  pluralize,
+  // legacy alias kept for any callers expecting `format`
   format: (n: number) => String(n),
-  number: (n: number) => n.toLocaleString(),
-  titlecase: (s: string) => s.charAt(0).toUpperCase() + s.slice(1),
-  truncateMiddle: (s: string, maxLen: number): string => {
-    if (s.length <= maxLen) return s
-    const half = Math.floor((maxLen - 3) / 2)
-    return s.slice(0, half) + "..." + s.slice(s.length - half)
-  },
 }

package/src/tui/context/sdk-apx.tsx

@@ -18,6 +18,7 @@ function readToken(): string {
 
 export type ApxEvent =
   | { type: "session.created"; sessionID: string }
+  | { type: "user"; sessionID: string; text: string }
   | { type: "chunk"; sessionID: string; chunk: string }
   | { type: "final"; sessionID: string; text: string; usage?: { input_tokens: number; output_tokens: number } }
   | { type: "error"; sessionID: string; error: string }
@@ -54,13 +55,29 @@ export const { use: useSDK, provider: SDKProvider } = createSimpleContext({
       prompt: string,
       previousMessages: Array<{ role: string; content: string }> = [],
     ) {
+      // Do NOT send `model` — the super-agent owns its model (configured at the
+      // system level in ~/.apx/config.json). Overriding it from the TUI would
+      // bypass that single source of truth. `props.model` is kept only for
+      // display in the sidebar.
       const res = await fetch(`${props.url}/projects/${props.pid}/super-agent/chat/stream`, {
         method: "POST",
         headers: headers(),
-        body: JSON.stringify({ prompt, model: props.model, previousMessages }),
+        body: JSON.stringify({ prompt, previousMessages }),
         signal: abort.signal,
       })
-      if (!res.ok || !res.body) throw new Error(`stream error: ${res.status}`)
+      if (!res.ok || !res.body) {
+        // Surface the daemon's actual error message (e.g. {"error":"project not found"})
+        // instead of a bare status code.
+        let detail = ""
+        try {
+          const body = await res.text()
+          const parsed = JSON.parse(body)
+          detail = parsed?.error ?? body
+        } catch {
+          /* non-JSON / empty body */
+        }
+        throw new Error(detail ? `${detail} (HTTP ${res.status})` : `stream error: ${res.status}`)
+      }
       const reader = res.body.getReader()
       const dec = new TextDecoder()
       let buf = ""
@@ -90,20 +107,11 @@ export const { use: useSDK, provider: SDKProvider } = createSimpleContext({
       }
     }
 
+    // The APX daemon has no generic "create session" route — a chat turn is
+    // streamed directly through /super-agent/chat/stream. The TUI still needs a
+    // stable session id to group messages, so we mint one locally.
     async function createSession(): Promise<string> {
-      const token = readToken()
-      const res = await fetch(`${props.url}/projects/${props.pid}/sessions`, {
-        method: "POST",
-        headers: {
-          "content-type": "application/json",
-          ...(token ? { authorization: `Bearer ${token}` } : {}),
-        },
-        body: JSON.stringify({}),
-        signal: abort.signal,
-      })
-      if (!res.ok) throw new Error(`createSession: ${res.status}`)
-      const data = await res.json()
-      return (data as any).id as string
+      return `apx-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`
     }
 
     function runShell(sessionID: string, command: string, cwd: string = process.cwd()): Promise<{ shellID: string; exitCode: number | null }> {
@@ -170,7 +178,26 @@ export const { use: useSDK, provider: SDKProvider } = createSimpleContext({
         delete: async (_opts: any) => ({ data: undefined }),
         fork: async (_opts: any) => ({ data: undefined, error: new Error("not supported") }),
         abort: async (_opts: any) => {},
-        prompt: async (_opts: any) => {},
+        // Called by the opencode home prompt on submit. Extract the text from
+        // the message parts, surface it as a user bubble, then stream the reply.
+        prompt: async (opts: any) => {
+          const sid: string = opts?.sessionID || (await createSession())
+          const text = ((opts?.parts ?? []) as any[])
+            .filter((p) => p && p.type === "text" && typeof p.text === "string")
+            .map((p) => p.text)
+            .join("\n")
+            .trim()
+          if (!text) return { data: undefined }
+          emitter.emit("event", { type: "user", sessionID: sid, text })
+          void streamChat(sid, text).catch((err) => {
+            emitter.emit("event", {
+              type: "error",
+              sessionID: sid,
+              error: err instanceof Error ? err.message : String(err),
+            })
+          })
+          return { data: { id: sid } }
+        },
         shell: async (opts: { sessionID?: string; command?: string; cwd?: string }) => {
           if (!opts?.command) return { data: undefined }
           const sid = opts.sessionID || (await createSession())

package/src/tui/context/sync-apx.tsx

@@ -35,16 +35,45 @@ export const { use: useApxSync, provider: ApxSyncProvider } = createSimpleContex
       messages: Record<string, ApxMessage[]>
       currentSessionID: string | undefined
       previousMessages: Array<{ role: string; content: string }>
+      usage: { input: number; output: number }
     }>({
       status: "loading",
       sessions: [],
       messages: {},
       currentSessionID: undefined,
       previousMessages: [],
+      usage: { input: 0, output: 0 },
     })
 
     // Listen to APX stream events
     sdk.event.on("event", (ev: ApxEvent) => {
+      if (ev.type === "user") {
+        const e = ev
+        batch(() => {
+          setStore(
+            "messages",
+            produce((draft) => {
+              ;(draft[e.sessionID] ??= []).push({
+                id: `user-${Date.now()}`,
+                sessionID: e.sessionID,
+                role: "user",
+                text: e.text,
+              })
+            }),
+          )
+          setStore("previousMessages", (prev) => [...prev, { role: "user", content: e.text }])
+          setStore("currentSessionID", e.sessionID)
+          setStore(
+            "sessions",
+            produce((draft) => {
+              if (!draft.some((s) => s.id === e.sessionID)) {
+                draft.unshift({ id: e.sessionID, title: e.text.slice(0, 60) || "New session" })
+              }
+            }),
+          )
+        })
+      }
+
       if (ev.type === "chunk") {
         const e = ev
         setStore(
@@ -74,13 +103,30 @@ export const { use: useApxSync, provider: ApxSyncProvider } = createSimpleContex
           produce((draft) => {
             const msgs = (draft[e.sessionID] ??= [])
             const last = msgs[msgs.length - 1]
-            if (last?.role === "assistant") {
+            if (last?.role === "assistant" && last.streaming) {
+              // A streaming bubble already exists (chunk events arrived) — finalize it.
               last.text = e.text
               last.streaming = false
+            } else {
+              // The super-agent delivers the whole reply in `final` with no
+              // preceding chunks — create the assistant bubble here.
+              msgs.push({
+                id: `msg-${Date.now()}`,
+                sessionID: e.sessionID,
+                role: "assistant",
+                text: e.text,
+                streaming: false,
+              })
             }
           }),
         )
         setStore("previousMessages", (prev) => [...prev, { role: "assistant", content: e.text }])
+        if (e.usage) {
+          setStore("usage", (u) => ({
+            input: u.input + (e.usage?.input_tokens ?? 0),
+            output: u.output + (e.usage?.output_tokens ?? 0),
+          }))
+        }
       }
 
       if (ev.type === "shell.start") {

package/src/tui/context/sync.tsx

@@ -7,6 +7,7 @@
  */
 import { createSimpleContext } from "./helper"
 import { useApxSync } from "./sync-apx"
+import { useArgs } from "./args"
 import { onMount } from "solid-js"
 
 // Re-export useApxSync as useSync for compatibility
@@ -14,25 +15,59 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
   name: "Sync",
   init: () => {
     const apx = useApxSync()
+    const args = useArgs()
 
     onMount(() => {
       // APX sync already loads sessions in its own onMount
     })
 
+    // APX has a single configured super-agent (passed via --agent). The opencode
+    // TUI expects `data.agent` to be a non-empty list, otherwise the prompt has
+    // no "current agent" and Enter silently refuses to submit.
+    const apxAgent = () => ({
+      name: args.agent || "apx",
+      mode: "primary" as const,
+      hidden: false,
+      description: "APX super-agent",
+    })
+
+    // APX uses freeform model strings and resolves the model server-side from
+    // the CLI `--model` arg. The opencode TUI, however, refuses to submit unless
+    // `local.model.current()` resolves to a model that exists in some provider.
+    // Expose a synthetic provider containing the configured model so model
+    // resolution / validation passes. The values are cosmetic — the daemon
+    // ignores them and uses the CLI model string directly.
+    const apxModelKey = () => args.model || "apx-default"
+    const apxProvider = () => ({
+      id: "apx",
+      name: "APX",
+      models: {
+        [apxModelKey()]: {
+          id: apxModelKey(),
+          name: apxModelKey(),
+          capabilities: { reasoning: false },
+        },
+      },
+    })
+
     // Return a compatible object that matches the shape expected by existing TUI components
     return {
       data: {
         get status() {
           return apx.status
         },
-        // Provider fields (APX has no providers — return stubs)
-        provider: [] as any[],
+        // Provider fields — synthetic single provider wrapping the APX model.
+        get provider() {
+          return [apxProvider()] as any[]
+        },
         provider_default: {} as Record<string, string>,
         provider_next: { all: [], default: {}, connected: [] } as any,
         provider_auth: {} as Record<string, any[]>,
         console_state: { switchableOrgCount: 0 } as any,
-        // Agent fields — empty for APX (agent is configured via CLI args)
-        agent: [] as any[],
+        // Agent fields — APX exposes the single configured super-agent.
+        get agent() {
+          return [apxAgent()] as any[]
+        },
         command: [] as any[],
         // Session-related — delegate to APX
         get session() {

package/src/tui/routes/session/index.tsx

@@ -3,9 +3,9 @@
  *
  * A self-contained chat interface that streams messages through the APX daemon
  * using the APX sync context. The complex opencode session view is replaced with
- * a simple but functional chat layout.
+ * a simple but functional chat layout, plus an APX-tailored sidebar.
  */
-import { For, Show, createMemo, createSignal, onCleanup, onMount } from "solid-js"
+import { For, Show, createMemo, createSignal, onCleanup } from "solid-js"
 import { TextareaRenderable } from "@opentui/core"
 import { useTerminalDimensions } from "@opentui/solid"
 import { useTheme } from "@tui/context/theme"
@@ -15,6 +15,20 @@ import { useToast, Toast } from "@tui/ui/toast"
 import { useExit } from "@tui/context/exit"
 import { usePromptRef } from "@tui/context/prompt"
 import type { ApxMessage } from "@tui/context/sync-apx"
+import { SidebarApx } from "./sidebar-apx"
+
+/** Split a daemon error like "fetch failed (trace: abc-123)" into message + trace. */
+function parseError(raw: string): { message: string; trace?: string; hint?: string } {
+  const m = raw.match(/^([\s\S]*?)\s*\(trace:\s*([^)]+)\)\s*$/)
+  const message = (m ? m[1] : raw).trim()
+  const trace = m ? m[2].trim() : undefined
+  let hint: string | undefined
+  if (/fetch failed/i.test(message))
+    hint = "No se pudo contactar el modelo. Verificá que el proveedor esté disponible (p. ej. Ollama corriendo)."
+  else if (/not enabled/i.test(message)) hint = "El super-agent está deshabilitado en ~/.apx/config.json."
+  else if (/\b401\b|unauthorized|api[_ ]?key/i.test(message)) hint = "Revisá la API key del proveedor en ~/.apx/config.json."
+  return { message, trace, hint }
+}
 
 function UserBubble(props: { msg: ApxMessage }) {
   const { theme } = useTheme()
@@ -30,18 +44,51 @@ function UserBubble(props: { msg: ApxMessage }) {
   )
 }
 
-function AssistantBubble(props: { msg: ApxMessage }) {
+function ErrorBubble(props: { msg: ApxMessage }) {
   const { theme } = useTheme()
-  const hasText = () => props.msg.text.length > 0
+  const parsed = createMemo(() => parseError(props.msg.text))
+  return (
+    <box flexDirection="column" marginBottom={1} paddingLeft={2} paddingRight={2}>
+      <text color={theme.error} bold>
+        ⚠ Error
+      </text>
+      <text color={theme.error} wrap>
+        {parsed().message}
+      </text>
+      <Show when={parsed().hint}>
+        {(hint) => (
+          <text color={theme.textMuted} wrap>
+            {hint()}
+          </text>
+        )}
+      </Show>
+      <Show when={parsed().trace}>
+        {(trace) => <text color={theme.textMuted}>trace: {trace()}</text>}
+      </Show>
+    </box>
+  )
+}
+
+function AssistantBubble(props: { msg: ApxMessage }) {
+  const { theme, syntax } = useTheme()
+  const hasText = () => props.msg.text.trim().length > 0
   return (
     <box flexDirection="column" marginBottom={1} paddingLeft={2} paddingRight={2}>
       <text color={theme.success} bold>
         {props.msg.streaming ? "Assistant ▸" : "Assistant"}
       </text>
       <Show when={hasText()} fallback={<text color={theme.textMuted}>…</text>}>
-        <text color={props.msg.error ? theme.error : theme.text} wrap>
-          {props.msg.text}
-        </text>
+        <box flexShrink={0}>
+          <code
+            filetype="markdown"
+            drawUnstyledText={false}
+            streaming={props.msg.streaming ?? false}
+            syntaxStyle={syntax()}
+            content={props.msg.text.trim()}
+            conceal={true}
+            fg={theme.text}
+          />
+        </box>
       </Show>
     </box>
   )
@@ -66,10 +113,7 @@ function ShellBubble(props: { msg: ApxMessage }) {
       <text color={theme.warning ?? theme.primary} bold>
         {header()}
       </text>
-      <text
-        color={props.msg.exitCode && props.msg.exitCode !== 0 ? theme.error : theme.text}
-        wrap
-      >
+      <text color={props.msg.exitCode && props.msg.exitCode !== 0 ? theme.error : theme.text} wrap>
         {body()}
       </text>
     </box>
@@ -152,68 +196,77 @@ export function Session() {
 
   return (
     <box flexDirection="column" flexGrow={1} width={dims().width} height={dims().height}>
-      {/* Message list */}
-      <scrollbox
-        flexGrow={1}
-        stickyScroll
-        stickyStart="bottom"
-        verticalScrollbarOptions={{ visible: true }}
-      >
-        <box flexDirection="column" width={dims().width}>
-          <Show
-            when={messages().length > 0}
-            fallback={
-              <box paddingLeft={2} paddingTop={2}>
+      <box flexDirection="row" flexGrow={1} minHeight={0}>
+        {/* Chat column */}
+        <box flexDirection="column" flexGrow={1} minWidth={0}>
+          {/* Message list */}
+          <scrollbox
+            flexGrow={1}
+            stickyScroll
+            stickyStart="bottom"
+            verticalScrollbarOptions={{ visible: true }}
+          >
+            <box flexDirection="column">
+              <Show
+                when={messages().length > 0}
+                fallback={
+                  <box paddingLeft={2} paddingTop={2}>
+                    <text color={theme.textMuted} italic>
+                      Type a message to chat, or prefix with ! to run a shell command (e.g. !ls).
+                    </text>
+                  </box>
+                }
+              >
+                <For each={messages()}>
+                  {(msg) => {
+                    if (msg.role === "user") return <UserBubble msg={msg} />
+                    if (msg.role === "shell") return <ShellBubble msg={msg} />
+                    if (msg.error) return <ErrorBubble msg={msg} />
+                    return <AssistantBubble msg={msg} />
+                  }}
+                </For>
+              </Show>
+              <box height={1} />
+            </box>
+          </scrollbox>
+
+          {/* Input area */}
+          <box
+            flexShrink={0}
+            flexDirection="column"
+            borderTop={1}
+            borderColor={theme.border}
+            backgroundColor={theme.backgroundElement}
+          >
+            <box paddingLeft={2} paddingRight={2} paddingTop={1}>
+              <textarea
+                ref={(r: TextareaRenderable) => {
+                  inputEl = r
+                  promptRef.set(makeRef(r))
+                }}
+                placeholder={sending() ? "Waiting for response…" : "Ask anything... (prefix ! to run shell, e.g. !ls)"}
+                placeholderColor={theme.textMuted}
+                textColor={theme.text}
+                focusedTextColor={theme.text}
+                minHeight={1}
+                maxHeight={6}
+                onSubmit={() => {
+                  setTimeout(() => setTimeout(() => handleSubmit(), 0), 0)
+                }}
+              />
+            </box>
+            <box height={1} paddingLeft={2} paddingRight={2} justifyContent="space-between" flexDirection="row">
+              <Show when={sending()} fallback={<text color={theme.textMuted}>enter send · ! shell · exit quit</text>}>
                 <text color={theme.textMuted} italic>
-                  Type a message to chat, or prefix with ! to run a shell command (e.g. !ls).
+                  Streaming…
                 </text>
-              </box>
-            }
-          >
-            <For each={messages()}>
-              {(msg) => {
-                if (msg.role === "user") return <UserBubble msg={msg} />
-                if (msg.role === "shell") return <ShellBubble msg={msg} />
-                return <AssistantBubble msg={msg} />
-              }}
-            </For>
-          </Show>
-          <box height={1} />
-        </box>
-      </scrollbox>
-
-      {/* Input area */}
-      <box
-        flexShrink={0}
-        flexDirection="column"
-        borderTop={1}
-        borderColor={theme.border}
-        backgroundColor={theme.backgroundElement}
-      >
-        <box paddingLeft={2} paddingRight={2} paddingTop={1}>
-          <textarea
-            ref={(r: TextareaRenderable) => {
-              inputEl = r
-              promptRef.set(makeRef(r))
-            }}
-            placeholder={sending() ? "Waiting for response…" : "Ask anything... (prefix ! to run shell, e.g. !ls)"}
-            placeholderColor={theme.textMuted}
-            textColor={theme.text}
-            focusedTextColor={theme.text}
-            minHeight={1}
-            maxHeight={6}
-            onSubmit={() => {
-              setTimeout(() => setTimeout(() => handleSubmit(), 0), 0)
-            }}
-          />
-        </box>
-        <box height={1} paddingLeft={2} paddingRight={2}>
-          <Show when={sending()}>
-            <text color={theme.textMuted} italic>
-              Streaming…
-            </text>
-          </Show>
+              </Show>
+            </box>
+          </box>
         </box>
+
+        {/* Sidebar */}
+        <SidebarApx sessionID={sessionID()} />
       </box>
       <Toast />
     </box>

package/src/tui/routes/session/sidebar-apx.tsx

@@ -0,0 +1,90 @@
+/**
+ * APX session sidebar.
+ *
+ * A self-contained panel tailored to APX data (session, agent, model, token
+ * usage, working directory). Replaces opencode's plugin-driven sidebar.tsx,
+ * which depends on feature plugins APX does not ship.
+ */
+import { createMemo, Show } from "solid-js"
+import { useTheme } from "@tui/context/theme"
+import { useApxSync } from "@tui/context/sync-apx"
+import { useSDK } from "@tui/context/sdk-apx"
+import pkg from "../../../../package.json"
+
+function titlecase(value: string) {
+  if (!value) return value
+  return value.charAt(0).toUpperCase() + value.slice(1)
+}
+
+function Section(props: { title: string; children: any }) {
+  const { theme } = useTheme()
+  return (
+    <box flexDirection="column" flexShrink={0} marginBottom={1}>
+      <text fg={theme.text}>
+        <b>{props.title}</b>
+      </text>
+      {props.children}
+    </box>
+  )
+}
+
+export function SidebarApx(props: { sessionID: string }) {
+  const { theme } = useTheme()
+  const sync = useApxSync()
+  const sdk = useSDK()
+
+  const session = createMemo(() => sync.session.get(props.sessionID))
+  const messages = createMemo(() => sync.session.messages(props.sessionID))
+  const usage = createMemo(() => sync.data.usage)
+  const totalTokens = createMemo(() => usage().input + usage().output)
+
+  return (
+    <box
+      backgroundColor={theme.backgroundPanel}
+      width={40}
+      height="100%"
+      flexShrink={0}
+      flexDirection="column"
+      paddingTop={1}
+      paddingBottom={1}
+      paddingLeft={2}
+      paddingRight={2}
+    >
+      <box flexGrow={1} flexDirection="column">
+        <Section title="Sesión">
+          <text fg={theme.textMuted}>{session()?.title || "chat local"}</text>
+        </Section>
+
+        <Section title="Agente">
+          <text fg={theme.textMuted}>{titlecase(sdk.agent)}</text>
+        </Section>
+
+        <Section title="Modelo">
+          <text fg={theme.textMuted} wrap>
+            {sdk.model}
+          </text>
+        </Section>
+
+        <Section title="Contexto">
+          <text fg={theme.textMuted}>{totalTokens().toLocaleString()} tokens</text>
+          <text fg={theme.textMuted}>
+            {usage().input.toLocaleString()} in · {usage().output.toLocaleString()} out
+          </text>
+          <text fg={theme.textMuted}>{messages().length} mensajes</text>
+        </Section>
+
+        <Section title="Directorio">
+          <text fg={theme.textMuted} wrap>
+            {process.cwd()}
+          </text>
+        </Section>
+      </box>
+
+      <box flexShrink={0} paddingTop={1}>
+        <text fg={theme.textMuted}>
+          <span style={{ fg: theme.success }}>•</span> <b>APX</b> <span>{pkg.version}</span>
+        </text>
+      </box>
+    </box>
+  )
+}

package/src/tui/tsconfig.json

@@ -23,6 +23,7 @@
       "@/snapshot": ["./_shims/snapshot.ts"],
       "@/config/console-state": ["./_shims/config-console-state.ts"],
       "@/cli/error": ["./_shims/cli-error.ts"],
+      "@/cli/cmd/prompt-display": ["./_shims/prompt-display.ts"],
       "@/cli/logo": ["./_shims/cli-logo.ts"],
       "@/cli/ui.ts": ["./_shims/cli-ui.ts"],
       "@/cli/ui": ["./_shims/cli-ui.ts"],