@hachej/boring-agent 0.1.12 → 0.1.14

package/README.md

@@ -1,82 +1,282 @@
-# @boring/agent
+# @hachej/boring-agent
 
-Agent runtime and chat UI for boring-ui apps.
+<div align="center">
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![npm](https://img.shields.io/npm/v/@hachej/boring-agent.svg)](https://www.npmjs.com/package/@hachej/boring-agent)
+
+</div>
+
+A pane-embeddable coding agent with three execution modes behind one interface. Ships as a standalone CLI (`npx @hachej/boring-agent`) and composes into any app shell.
 
 ```bash
-pnpm add @boring/agent
+npx @hachej/boring-agent
 ```
 
 ---
 
-## What it provides
+## TL;DR
+
+**The Problem**: You want a coding agent in the browser — but also as a CLI — and you need it to run your code somewhere safe (or not). Existing solutions force you into one deployment model and one UI.
+
+**The Solution**: One package that ships a full LLM agent loop, tool catalog, and chat UI — with swappable execution backends. Same agent, same tools, same UI. Three modes. Zero config to start.
+
+### Why Use @hachej/boring-agent?
+
+| Feature | What It Does |
+|---------|--------------|
+| **Three execution modes** | `direct` (no isolation, macOS dev) / `local` (bwrap sandbox) / `vercel-sandbox` (Firecracker microVM) |
+| **CLI + embeddable** | `npx @hachej/boring-agent` works standalone; `<ChatPanel />` composes into any layout |
+| **7 standard tools** | `bash`, `read`, `write`, `edit`, `find`, `grep`, `ls` — ported from pi-coding-agent |
+| **Workspace-agnostic FS** | `Workspace` interface — agent tools and HTTP routes share the same filesystem view |
+| **Session management** | List, create, switch, delete sessions with streamed history hydration |
+| **UI bridge** | Agent opens files, panels, and surfaces in the workbench via typed commands |
+| **Model picker + thinking toggle** | Inline in the composer — switch models and reasoning depth per message |
+
+### Quick Example
+
+```bash
+# Start the agent in your current directory — zero setup
+npx @hachej/boring-agent
+
+# Or run with a specific workspace root
+BORING_AGENT_WORKSPACE_ROOT=/path/to/project npx @hachej/boring-agent
+
+# Set the API key
+ANTHROPIC_API_KEY=sk-ant-... npx @hachej/boring-agent
+
+# Run in local sandbox mode (Linux + bubblewrap)
+BORING_AGENT_MODE=local npx @hachej/boring-agent
+```
+
+In the browser chat, try:
+```
+read the README and summarize it
+find all TypeScript files that import "react"
+write a test for src/utils.ts
+```
+
+---
+
+## Architecture
+
+```
+┌─────────────────────────────────────┐
+│         Chat UI (browser)           │
+│  Composer · Messages · SessionBar    │
+└──────────────────┬──────────────────┘
+                   │ UIMessage stream (SSE)
+┌──────────────────▼──────────────────┐
+│          Agent Harness              │
+│  (pi-coding-agent loop)             │
+└──────────────────┬──────────────────┘
+                   │ AgentTool[]
+┌──────────────────▼──────────────────┐
+│         Tool Catalog                │
+│  bash · read · write · edit         │
+│  find · grep · ls                   │
+└──────┬──────────────┬───────────────┘
+       │              │
+┌──────▼─────┐ ┌──────▼─────┐
+│ Workspace   │ │  Sandbox   │
+│ (fs ops)   │ │  (exec)    │
+│ read/write │ │  bwrap     │
+│ readdir    │ │  vercel    │
+└────────────┘ └────────────┘
+```
+
+**Two layers, clear boundary:**
+
+- **Layer 1 (Core runtime):** `AgentHarness` · `Catalog` · `Workspace` · `Sandbox` — interfaces locked; adapters swap per mode.
+- **Layer 2 (Integration):** `SessionStore` · `UiBridge` · `Provisioning` — replaceable plumbing, independent evolution.
+
+### Execution Modes
+
+| Mode | Workspace | Sandbox | Isolation | Use Case |
+|------|-----------|---------|-----------|----------|
+| `direct` | `NodeWorkspace` | `DirectSandbox` | None | macOS/Windows dev, quick tests |
+| `local` | `NodeWorkspace` | `BwrapSandbox` | bwrap process jail | Linux deployments, safer default |
+| `vercel-sandbox` | `VercelSandboxWorkspace` | `VercelSandboxExec` | Firecracker microVM | Multi-tenant, remote execution |
 
-- **Agent runtime** — LLM conversation loop with streaming, tool calling, and three execution modes
-- **Tool catalog** — `bash`, `read`, `write`, `edit`, `grep`, `find`, `ls` and more
-- **Chat UI** — embeddable `ChatPanel` React component
+**Pairing invariant:** Workspace + Sandbox must target the same filesystem substrate. The adapter factory enforces this at construction — mismatched pairs are impossible.
 
 ---
 
-## Execution modes
+## Installation
+
+```bash
+# npm
+npm install @hachej/boring-agent
+
+# pnpm
+pnpm add @hachej/boring-agent
+
+# standalone (no install needed)
+npx @hachej/boring-agent
+```
 
-| Mode | Isolation | Typical use |
-|---|---|---|
-| `direct` | None | Local dev |
-| `local` | `bwrap` process isolation | Safer Linux deployments |
-| `vercel-sandbox` | Firecracker microVM | Multi-tenant / remote |
+### From Source
+
+```bash
+git clone https://github.com/hachej/boring-ui.git
+cd boring-ui
+pnpm install
+pnpm --filter @hachej/boring-agent build
+```
 
 ---
 
-## Quickstart
+## Quick Start
+
+### 1. As a CLI
+
+```bash
+# Set your API key
+export ANTHROPIC_API_KEY=sk-ant-...
+
+# Run in your project directory
+cd /path/to/project
+npx @hachej/boring-agent
+```
+
+Opens `http://localhost:5200` with a full agent workspace pointed at your cwd.
+
+### 2. Embedded in an App
+
+**Server:**
+
+```ts
+import { createAgentApp } from "@hachej/boring-agent/server"
+
+const app = await createAgentApp({
+  mode: "local",              // "direct" | "local" | "vercel-sandbox"
+  workspaceRoot: process.cwd(),
+  apiBaseUrl: "http://localhost:3000",
+})
+await app.listen({ port: 3001 })
+```
+
+**Frontend:**
 
 ```tsx
-import { ChatPanel } from "@boring/agent"
-import { WorkspaceProvider, IdeLayout } from "@boring/workspace"
+import { ChatPanel, useAgentChat } from "@hachej/boring-agent"
+import "@hachej/boring-agent/front/styles.css"
+
+function App() {
+  return <ChatPanel apiBaseUrl="http://localhost:3000" />
+}
+```
+
+### 3. Composed with Workspace
 
-export function App() {
+```tsx
+import { WorkspaceProvider, IdeLayout } from "@hachej/boring-workspace"
+import { ChatPanel } from "@hachej/boring-agent"
+
+function App() {
   return (
-    <WorkspaceProvider chatPanel={ChatPanel}>
+    <WorkspaceProvider chatPanel={ChatPanel} workspaceId="proj-1">
       <IdeLayout />
     </WorkspaceProvider>
   )
 }
 ```
 
-Server:
+---
 
-```ts
-import { createAgentApp } from "@boring/agent/server"
+## Package Surfaces
 
-const app = await createAgentApp({ mode: "local", workspaceRoot: process.cwd() })
-await app.listen({ port: 3001 })
-```
+| Import | Environment | What You Get |
+|--------|-------------|--------------|
+| `@hachej/boring-agent` | Browser | `ChatPanel`, `SessionToolbar`, primitives, hooks, `theme.css` |
+| `@hachej/boring-agent/server` | Node | `createAgentApp`, routes, harness, sandbox, workspace adapters |
+| `@hachej/boring-agent/front` | Browser | Frontend-specific (same as top-level, explicit subpath) |
+| `@hachej/boring-agent/shared` | Any | `AgentHarness`, `Workspace`, `Sandbox`, `AgentTool`, `SessionStore` interfaces |
+| `@hachej/boring-agent/front/styles.css` | Browser | CSS custom properties for theming |
+| `@hachej/boring-agent/eval` | Node | Evaluation toolkit for agent behavior |
 
 ---
 
-## Model config
+## Configuration
 
-```bash
-ANTHROPIC_API_KEY=sk-ant-...
-BORING_AGENT_DEFAULT_MODEL_PROVIDER=anthropic
-BORING_AGENT_DEFAULT_MODEL_ID=claude-sonnet-4-6
+### Environment Variables
+
+| Variable | Required | Default | Description |
+|----------|----------|---------|-------------|
+| `ANTHROPIC_API_KEY` | Yes | — | Anthropic API key for Claude |
+| `BORING_AGENT_MODE` | No | `direct` | `direct`, `local`, or `vercel-sandbox` |
+| `BORING_AGENT_WORKSPACE_ROOT` | No | `.` | Root directory for workspace |
+| `BORING_AGENT_DEFAULT_MODEL_PROVIDER` | No | `anthropic` | Default model provider |
+| `BORING_AGENT_DEFAULT_MODEL_ID` | No | `claude-sonnet-4-6` | Default model ID |
+| `VERCEL_OIDC_TOKEN` | Remote only | — | Required for `vercel-sandbox` mode |
+| `PORT` | No | `5200` | Server port |
+| `HOST` | No | `localhost` | Server host |
+
+### Config File
+
+`boring.app.toml` (optional, for embedded mode):
+
+```toml
+[runtime]
+mode = "local"           # direct | local | vercel-sandbox
+
+[model]
+default_provider = "anthropic"
+default_id = "claude-sonnet-4-6"
 ```
 
 ---
 
-## Package surfaces
+## Troubleshooting
 
-```ts
-import { ChatPanel } from "@boring/agent"           // React chat UI
-import { ... } from "@boring/agent/server"          // Node/server entry
-import { ... } from "@boring/agent/front"           // Frontend-only
-import { ... } from "@boring/agent/shared"          // Platform-agnostic contracts
-```
+| Error | Cause | Fix |
+|-------|-------|-----|
+| `ANTHROPIC_API_KEY not set` | Missing API key | `export ANTHROPIC_API_KEY=sk-ant-...` |
+| `bwrap not found` (local mode) | bubblewrap not installed | `sudo apt install bubblewrap` (Debian/Ubuntu) |
+| `port already in use` | Port 5200 occupied | `PORT=5201 npx @hachej/boring-agent` |
+| `workspace root not found` | Invalid `BORING_AGENT_WORKSPACE_ROOT` | Point to an existing directory |
+| `Vercel sandbox auth failed` (remote mode) | Missing/invalid OIDC token | Set `VERCEL_OIDC_TOKEN` |
+| `model provider not supported` | Unknown provider in config | Use `anthropic` (only supported provider in v1) |
+
+---
+
+## Limitations
+
+- **Single model provider**: Only Anthropic (Claude) is supported in v1. The harness interface is designed to accept others, but only `anthropic` is wired.
+- **No multi-user auth**: The agent is single-workspace-per-instance. Multi-user auth, billing, and workspace CRUD belong to `@hachej/boring-core`.
+- **No git UI**: The agent runs git via `bash`, but there's no status bar, diff pane, or branch picker. When git UI lands, thin routes will be added.
+- **Plugin loading is local-only**: Pi plugins load in the backend Node process. They're disabled in `vercel-sandbox` mode for security.
+- **No browser-agent mode yet**: The `AgentHarness` interface has a `placement: "browser"` option, but no browser harness is implemented.
+- **No MCP tool integration**: Not in scope for v1.
+
+---
+
+## FAQ
+
+**Q: What's the difference between `direct` and `local` mode?**  
+A: `direct` runs bash commands with no sandbox — the agent has full access to your machine. `local` wraps commands in bubblewrap (`bwrap`), which provides filesystem and process isolation on Linux. Use `direct` for macOS dev; use `local` on Linux servers.
+
+**Q: Can I use OpenAI or other model providers?**  
+A: Not in v1. Only Anthropic's Claude is wired up. The harness interface is provider-agnostic — community PRs for other providers are welcome.
+
+**Q: How do sessions persist?**  
+A: Via pi-coding-agent's JSONL session files under `${workdir}/.pi/sessions/`. The `PiSessionStore` reads and manages lifecycle. SQLite and IndexedDB implementations are planned.
+
+**Q: Can I add custom tools to the agent?**  
+A: Yes. Use the `CatalogDeps` pattern to build tools that bind to `Workspace` and `Sandbox`. For pi-native tools, register them via pi's extension system (`pi.extensions` in config). In `vercel-sandbox` mode, extensions are disabled.
+
+**Q: What's the UI bridge for?**  
+A: It lets the agent programmatically open files, panels, and surfaces in the workbench. The agent calls `exec_ui({ kind: "openFile", params: { path: "src/index.ts" } })` and the panel opens. It's a typed pubsub bus between backend and frontend.
+
+**Q: How does stream resumption work?**  
+A: The server wraps the harness's event stream in a per-turn ring buffer. Disconnected clients reconnect via `GET /api/v1/agent/chat/:sessionId/:turnId?cursor=<n>`. If the turn completed, it replays from `SessionStore`.
+
+---
+
+*About Contributions:* Please don't take this the wrong way, but I do not accept outside contributions for any of my projects. I simply don't have the mental bandwidth to review anything, and it's my name on the thing, so I'm responsible for any problems it causes; thus, the risk-reward is highly asymmetric from my perspective. I'd also have to worry about other "stakeholders," which seems unwise for tools I mostly make for myself for free. Feel free to submit issues, and even PRs if you want to illustrate a proposed fix, but know I won't merge them directly. Instead, I'll have Claude or Codex review submissions via `gh` and independently decide whether and how to address them. Bug reports in particular are welcome. Sorry if this offends, but I want to avoid wasted time and hurt feelings. I understand this isn't in sync with the prevailing open-source ethos that seeks community contributions, but it's the only way I can move at this velocity and keep my sanity.
 
 ---
 
-## Part of [boring-ui](https://github.com/hachej/boring-ui)
+## License
 
-| Package | Role |
-|---|---|
-| `@boring/core` | DB, auth, app factory |
-| `@boring/workspace` | Plugin system, layouts |
-| `@boring/agent` | Agent runtime + tools |
+MIT

package/dist/DebugDrawer-MCYZ4AWZ.js

@@ -0,0 +1,6 @@
+import {
+  DebugDrawer
+} from "./chunk-MMJA3QON.js";
+export {
+  DebugDrawer
+};

package/dist/chunk-F3CE5CNW.js

@@ -0,0 +1,38 @@
+// src/shared/tool-ui.ts
+function isRecord(value) {
+  return typeof value === "object" && value !== null;
+}
+function isToolUiMetadata(value) {
+  if (!isRecord(value)) return false;
+  return (value.rendererId === void 0 || typeof value.rendererId === "string") && (value.displayGroup === void 0 || typeof value.displayGroup === "string") && (value.icon === void 0 || typeof value.icon === "string");
+}
+function extractToolUiMetadata(output) {
+  if (!isRecord(output)) return void 0;
+  const details = output.details;
+  if (!isRecord(details)) return void 0;
+  if (isToolUiMetadata(details.ui)) return details.ui;
+  if (typeof details.uiKind === "string") {
+    return {
+      rendererId: details.uiKind,
+      details
+    };
+  }
+  return void 0;
+}
+
+// src/shared/capabilities.ts
+var DEFAULT_AGENT_RUNTIME_CAPABILITIES = {
+  nativeFollowUp: false,
+  aiSdkOwnsHistory: true
+};
+var PI_AGENT_RUNTIME_CAPABILITIES = {
+  nativeFollowUp: true,
+  aiSdkOwnsHistory: false
+};
+
+export {
+  isToolUiMetadata,
+  extractToolUiMetadata,
+  DEFAULT_AGENT_RUNTIME_CAPABILITIES,
+  PI_AGENT_RUNTIME_CAPABILITIES
+};

package/dist/chunk-MMJA3QON.js

@@ -0,0 +1,295 @@
+// src/front/DebugDrawer.tsx
+import { useCallback, useEffect, useRef, useState } from "react";
+
+// src/front/lib/index.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/front/DebugDrawer.tsx
+import { Button, IconButton, Tabs, TabsContent, TabsList, TabsTrigger } from "@hachej/boring-ui-kit";
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  CopyIcon,
+  RefreshCwIcon
+} from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function CopyButton({ value, label }) {
+  const [copied, setCopied] = useState(false);
+  const onCopy = useCallback(() => {
+    const writeText = navigator.clipboard?.writeText?.bind(navigator.clipboard);
+    if (!writeText) return;
+    void writeText(value).then(() => {
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1200);
+    });
+  }, [value]);
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      type: "button",
+      variant: "ghost",
+      size: "icon-xs",
+      onClick: onCopy,
+      className: "text-muted-foreground/60",
+      "aria-label": label,
+      title: label,
+      children: copied ? /* @__PURE__ */ jsx(CheckIcon, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(CopyIcon, { className: "h-3 w-3" })
+    }
+  );
+}
+function DebugValue({ label, value }) {
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-border/40 bg-muted/20 p-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium uppercase tracking-[0.16em] text-muted-foreground/80", children: label }),
+      /* @__PURE__ */ jsx(CopyButton, { value, label: `Copy ${label}` })
+    ] }),
+    /* @__PURE__ */ jsx("code", { className: "block break-all font-mono text-[11px] leading-relaxed text-foreground dark:text-zinc-100", children: value })
+  ] });
+}
+function SessionTab({ sessionId }) {
+  const resumeCommand = `pi --session ${sessionId}`;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 overflow-auto p-3 text-[11px] text-muted-foreground dark:text-zinc-300", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-muted-foreground dark:text-zinc-300", children: "This web chat is backed by a pi session. Use the id below from the workspace root to resume the same conversation in a terminal." }),
+    /* @__PURE__ */ jsx(DebugValue, { label: "Pi session id", value: sessionId }),
+    /* @__PURE__ */ jsx(DebugValue, { label: "Resume command", value: resumeCommand }),
+    /* @__PURE__ */ jsxs("p", { className: "rounded-md border border-border/30 bg-muted/10 p-2 text-[10px] leading-relaxed text-muted-foreground/75 dark:text-zinc-300", children: [
+      "Tip: ",
+      /* @__PURE__ */ jsx("code", { className: "font-mono text-foreground/80", children: "pi --continue" }),
+      " ",
+      "opens the most recent session for the current working directory. The explicit command above targets this session directly."
+    ] })
+  ] });
+}
+var RETRY_DELAY_MS = 2500;
+var MAX_RETRIES = 20;
+function SystemPromptTab({
+  sessionId,
+  requestHeaders
+}) {
+  const [state, setState] = useState({ kind: "loading" });
+  const [retryKey, setRetryKey] = useState(0);
+  const retryCount = useRef(0);
+  const refresh = useCallback(() => {
+    retryCount.current = 0;
+    setRetryKey((k) => k + 1);
+  }, []);
+  useEffect(() => {
+    let aborted = false;
+    let retryTimer = null;
+    setState({ kind: "loading" });
+    const opts = requestHeaders ? { headers: requestHeaders } : void 0;
+    fetch(`/api/v1/agent/sessions/${encodeURIComponent(sessionId)}/system-prompt`, opts).then(async (res) => {
+      if (aborted) return;
+      if (res.ok) {
+        const payload2 = await res.json();
+        if (typeof payload2.systemPrompt === "string") {
+          retryCount.current = 0;
+          setState({ kind: "ok", text: payload2.systemPrompt });
+          return;
+        }
+      }
+      const payload = await res.json().catch(() => null);
+      const reason = payload?.error?.message ?? `HTTP ${res.status}`;
+      if (res.status === 404 && retryCount.current < MAX_RETRIES) {
+        setState({ kind: "empty", reason });
+        retryTimer = setTimeout(() => {
+          if (!aborted) {
+            retryCount.current++;
+            setRetryKey((k) => k + 1);
+          }
+        }, RETRY_DELAY_MS);
+      } else {
+        setState(res.status === 404 ? { kind: "empty", reason } : { kind: "error", reason });
+      }
+    }).catch((err) => {
+      if (!aborted) setState({ kind: "error", reason: err instanceof Error ? err.message : String(err) });
+    });
+    return () => {
+      aborted = true;
+      if (retryTimer) clearTimeout(retryTimer);
+    };
+  }, [sessionId, requestHeaders, retryKey]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full min-h-0", children: [
+    /* @__PURE__ */ jsxs("div", { className: "shrink-0 flex items-center justify-between px-3 pt-2 pb-1 border-b border-border/40", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground/80 font-mono", children: state.kind === "ok" ? `${state.text.length.toLocaleString()} chars` : state.kind === "loading" ? "loading\u2026" : state.kind === "empty" ? `waiting for session \xB7 retry ${retryCount.current}/${MAX_RETRIES}` : "error" }),
+      state.kind !== "loading" && /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon-xs",
+          onClick: refresh,
+          className: "text-muted-foreground/60",
+          "aria-label": "Refresh system prompt",
+          children: /* @__PURE__ */ jsx(RefreshCwIcon, { className: "h-3 w-3" })
+        }
+      )
+    ] }),
+    (state.kind === "loading" || state.kind === "empty") && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground p-3", children: state.kind === "loading" ? "Loading\u2026" : state.reason }),
+    state.kind === "error" && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-destructive p-3", children: state.reason }),
+    state.kind === "ok" && /* @__PURE__ */ jsx("pre", { className: "flex-1 overflow-auto px-3 py-2 font-mono text-[11px] leading-relaxed text-foreground whitespace-pre-wrap break-words", children: state.text })
+  ] });
+}
+function partSummary(part) {
+  const p = part;
+  const type = p?.type ?? "?";
+  if (type === "text") {
+    const text = String(p.text ?? "");
+    return text.slice(0, 80) + (text.length > 80 ? "\u2026" : "");
+  }
+  if (type === "tool-invocation") {
+    const inv = p.toolInvocation;
+    const state = String(inv?.state ?? "");
+    return `${inv?.toolName ?? "?"}() \xB7 ${state}`;
+  }
+  if (type === "reasoning") {
+    const text = String(p.text ?? p.reasoning ?? "");
+    return text.slice(0, 80) + (text.length > 80 ? "\u2026" : "");
+  }
+  return type;
+}
+function flattenMessages(messages) {
+  const out = [];
+  for (let mi = 0; mi < messages.length; mi++) {
+    const msg = messages[mi];
+    const msgAny = msg;
+    const time = msgAny.createdAt ? new Date(msgAny.createdAt).toISOString().slice(11, 23) : null;
+    for (let pi = 0; pi < msg.parts.length; pi++) {
+      const part = msg.parts[pi];
+      out.push({
+        msgId: msg.id,
+        msgIndex: mi,
+        role: msg.role,
+        time,
+        partIndex: pi,
+        partType: part?.type ?? "unknown",
+        part
+      });
+    }
+  }
+  return out;
+}
+function MessagesTab({ messages }) {
+  const parts = flattenMessages(messages);
+  const [expanded, setExpanded] = useState(null);
+  const bottomRef = useRef(null);
+  const prevCount = useRef(parts.length);
+  useEffect(() => {
+    if (parts.length !== prevCount.current) {
+      bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+      prevCount.current = parts.length;
+    }
+  }, [parts.length]);
+  if (parts.length === 0) {
+    return /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground p-3", children: "No messages yet." });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full min-h-0", children: [
+    /* @__PURE__ */ jsxs("div", { className: "shrink-0 px-3 pt-2 pb-1 text-[10px] text-muted-foreground/80 font-mono border-b border-border/40", children: [
+      messages.length,
+      " msg \xB7 ",
+      parts.length,
+      " parts"
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-auto", children: [
+      parts.map((fp) => {
+        const key = `${fp.msgId}:${fp.partIndex}`;
+        const open = expanded === key;
+        return /* @__PURE__ */ jsxs("div", { className: "border-b border-border/30 last:border-0", children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              onClick: () => setExpanded(open ? null : key),
+              className: "h-auto w-full justify-start gap-1.5 rounded-none px-2 py-1.5 text-left",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "mt-0.5 shrink-0 text-muted-foreground/40", children: open ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3" }) }),
+                /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] shrink-0 w-20", children: fp.time ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60", children: fp.time }) : /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground/30", children: [
+                  "m",
+                  fp.msgIndex
+                ] }) }),
+                /* @__PURE__ */ jsx("span", { className: cn(
+                  "shrink-0 font-mono text-[10px] w-14",
+                  fp.role === "user" ? "text-accent" : "text-muted-foreground"
+                ), children: fp.role }),
+                /* @__PURE__ */ jsx("span", { className: "shrink-0 font-mono text-[10px] text-muted-foreground/60 w-24", children: fp.partType }),
+                /* @__PURE__ */ jsx("span", { className: "flex-1 min-w-0 font-mono text-[11px] text-foreground truncate", children: partSummary(fp.part) })
+              ]
+            }
+          ),
+          open && /* @__PURE__ */ jsx("pre", { className: "px-3 pb-2 font-mono text-[10px] leading-relaxed text-foreground/80 whitespace-pre-wrap break-words bg-muted/20", children: JSON.stringify(fp.part, null, 2) })
+        ] }, key);
+      }),
+      /* @__PURE__ */ jsx("div", { ref: bottomRef })
+    ] })
+  ] });
+}
+var TABS = [
+  { id: "session", label: "Session" },
+  { id: "prompt", label: "System prompt" },
+  { id: "messages", label: "Messages" }
+];
+var MIN_WIDTH = 280;
+var MAX_WIDTH = 800;
+function DebugDrawer({ sessionId, messages, requestHeaders, width, onWidthChange }) {
+  const [tab, setTab] = useState("session");
+  const onDragStart = useCallback((e) => {
+    e.preventDefault();
+    const startX = e.clientX;
+    const startW = width;
+    const onMove = (ev) => {
+      const delta = startX - ev.clientX;
+      onWidthChange(Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, startW + delta)));
+    };
+    const onUp = () => {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    };
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+  }, [width, onWidthChange]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        onMouseDown: onDragStart,
+        className: "w-1 shrink-0 cursor-col-resize hover:bg-accent/40 active:bg-accent/60 transition-colors",
+        "aria-hidden": true
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "aside",
+      {
+        style: { width },
+        className: cn(
+          "flex h-full shrink-0 flex-col border-l border-border/60",
+          "bg-[oklch(from_var(--background)_calc(l-0.01)_c_h)]"
+        ),
+        children: /* @__PURE__ */ jsxs(Tabs, { value: tab, onValueChange: (next) => setTab(next), className: "flex flex-col flex-1 min-h-0 overflow-hidden", children: [
+          /* @__PURE__ */ jsx("header", { className: "flex shrink-0 items-center gap-0 border-b border-border/60 px-1", children: /* @__PURE__ */ jsx(TabsList, { variant: "line", className: "h-auto gap-0 p-0 w-full", children: TABS.map(({ id, label }) => /* @__PURE__ */ jsx(
+            TabsTrigger,
+            {
+              value: id,
+              className: "h-8 flex-none px-3 py-2 text-[11px] font-medium data-[state=active]:after:bg-[color:var(--accent)]",
+              children: label
+            },
+            id
+          )) }) }),
+          /* @__PURE__ */ jsx(TabsContent, { value: "session", forceMount: true, className: "flex flex-col flex-1 min-h-0 overflow-hidden data-[state=inactive]:hidden", children: /* @__PURE__ */ jsx(SessionTab, { sessionId }) }),
+          /* @__PURE__ */ jsx(TabsContent, { value: "prompt", forceMount: true, className: "flex flex-col flex-1 min-h-0 overflow-hidden data-[state=inactive]:hidden", children: /* @__PURE__ */ jsx(SystemPromptTab, { sessionId, requestHeaders }) }),
+          /* @__PURE__ */ jsx(TabsContent, { value: "messages", forceMount: true, className: "flex flex-col flex-1 min-h-0 overflow-hidden data-[state=inactive]:hidden", children: /* @__PURE__ */ jsx(MessagesTab, { messages }) })
+        ] })
+      }
+    )
+  ] });
+}
+
+export {
+  cn,
+  DebugDrawer
+};