Add in-app docs pane

e2e/docs.spec.ts

@@ -0,0 +1,21 @@
+import { expect, test } from "@playwright/test";
+import { loadApp } from "./helpers";
+
+test.describe("Docs pane", () => {
+  test("opens docs from the sidebar and switches sections", async ({ page }) => {
+    await loadApp(page);
+
+    await page.getByTestId("docs-button").click();
+
+    const docsPane = page.getByTestId("docs-pane");
+    await expect(docsPane).toBeVisible({ timeout: 3_000 });
+    await expect(docsPane.getByRole("heading", { level: 2, name: "Agents" })).toBeVisible();
+
+    await page.getByRole("button", { name: "Repo Tools" }).click();
+    await expect(docsPane.getByRole("heading", { level: 2, name: "Repo Tools" })).toBeVisible();
+    await expect(docsPane.getByRole("heading", { level: 3, name: "Defining tools" })).toBeVisible();
+
+    await page.getByRole("button", { name: "Close" }).click();
+    await expect(docsPane).not.toBeVisible({ timeout: 3_000 });
+  });
+});

web/src/App.tsx

@@ -5,6 +5,7 @@ import { ClipboardAddon } from "@xterm/addon-clipboard";
 import "@xterm/xterm/css/xterm.css";
 import { AgentSidebar, AgentSidebarContent } from "@/components/app/agent-sidebar";
 import { AppHeader } from "@/components/app/app-header";
+import { DocsPane } from "@/components/app/docs-pane";
 import { SettingsPane } from "@/components/app/settings-pane";
 import { CreateAgentDialog } from "@/components/app/create-agent-dialog";
 import { DeleteAgentDialog } from "@/components/app/delete-agent-dialog";
@@ -179,6 +180,7 @@ export function App(): JSX.Element {
   const [statusMessage, setStatusMessage] = useState("Starting...");
 
   const [settingsPaneOpen, setSettingsPaneOpen] = useState(false);
+  const [docsPaneOpen, setDocsPaneOpen] = useState(false);
   const [createOpen, setCreateOpen] = useState(false);
   const [createName, setCreateName] = useState("");
   const [createCwd, setCreateCwd] = useState(() => readLastUsedCwd());
@@ -1418,7 +1420,8 @@ export function App(): JSX.Element {
             overflowAgentId={overflowAgentId}
             setLeftOpen={setLeftOpen}
             onOpenCreateDialog={openCreateDialog}
-                        onOpenSettings={() => setSettingsPaneOpen(true)}
+            onOpenDocs={() => setDocsPaneOpen(true)}
+            onOpenSettings={() => setSettingsPaneOpen(true)}
             setOverflowAgentId={setOverflowAgentId}
             setDeleteTarget={setDeleteTarget}
             setDeleteConfirmOpen={setDeleteConfirmOpen}
@@ -1516,6 +1519,7 @@ export function App(): JSX.Element {
             selectedAgentId={selectedAgentId}
             overflowAgentId={overflowAgentId}
             onOpenCreateDialog={() => { setMobileLeftOpen(false); openCreateDialog(); }}
+            onOpenDocs={() => { setMobileLeftOpen(false); setDocsPaneOpen(true); }}
             onOpenSettings={() => { setMobileLeftOpen(false); setSettingsPaneOpen(true); }}
             setOverflowAgentId={setOverflowAgentId}
             setDeleteTarget={setDeleteTarget}
@@ -1588,6 +1592,7 @@ export function App(): JSX.Element {
         onDelete={deleteAgent}
       />
 
+      <DocsPane open={docsPaneOpen} onClose={() => setDocsPaneOpen(false)} />
       <SettingsPane open={settingsPaneOpen} onClose={() => setSettingsPaneOpen(false)} />
 
       <MediaLightbox

web/src/components/app/agent-sidebar.tsx

@@ -1,5 +1,6 @@
 import {
   AlertTriangle,
+  BookOpenText,
   ChevronLeft,
   EllipsisVertical,
   FolderGit2,
@@ -27,6 +28,7 @@ type AgentSidebarSharedProps = {
   selectedAgentId: string | null;
   overflowAgentId: string | null;
   onOpenCreateDialog: () => void;
+  onOpenDocs: () => void;
   onOpenSettings: () => void;
   setOverflowAgentId: (value: string | null | ((current: string | null) => string | null)) => void;
   setDeleteTarget: (agent: Agent | null) => void;
@@ -58,6 +60,7 @@ export function AgentSidebarContent({
   selectedAgentId,
   overflowAgentId,
   onOpenCreateDialog,
+  onOpenDocs,
   onOpenSettings,
   setOverflowAgentId,
   setDeleteTarget,
@@ -421,10 +424,18 @@ export function AgentSidebarContent({
         </TooltipProvider>
       </div>
       <div className="border-t border-border px-3 pb-[max(0.5rem,env(safe-area-inset-bottom))]">
+        <button
+          onClick={onOpenDocs}
+          data-testid="docs-button"
+          className="flex w-full items-center gap-2 pt-4 text-sm text-muted-foreground transition-colors hover:text-foreground md:pt-2.5 md:text-xs"
+        >
+          <BookOpenText className="h-4 w-4 md:h-3.5 md:w-3.5" />
+          Docs
+        </button>
         <button
           onClick={onOpenSettings}
           data-testid="settings-button"
-          className="flex w-full items-center gap-2 py-4 md:py-2.5 text-sm md:text-xs text-muted-foreground transition-colors hover:text-foreground"
+          className="flex w-full items-center gap-2 py-4 text-sm text-muted-foreground transition-colors hover:text-foreground md:py-2.5 md:text-xs"
         >
           <Settings className="h-4 w-4 md:h-3.5 md:w-3.5" />
           Settings