@brainpilot/web 0.0.6 → 0.0.8

package/src/__tests__/sidebarResize.test.ts

@@ -0,0 +1,46 @@
+import { describe, it, expect } from "vitest";
+import {
+  resolveResize,
+  MIN_SIDEBAR_WIDTH,
+  MAX_SIDEBAR_WIDTH,
+  COLLAPSE_THRESHOLD,
+  DEFAULT_SIDEBAR_WIDTH,
+} from "../components/shell/sidebarResize";
+
+// #159 — drag-to-collapse geometry. The monorepo has no jsdom, so the real
+// pointer-drag is exercised by DesktopShell at runtime; here we pin the pure
+// decision: when does a drag collapse the rail, and how is width clamped.
+describe("resolveResize — #159 drag-to-collapse", () => {
+  it("collapses when dragged at/below the collapse threshold", () => {
+    expect(resolveResize(COLLAPSE_THRESHOLD).collapse).toBe(true);
+    expect(resolveResize(COLLAPSE_THRESHOLD - 1).collapse).toBe(true);
+    expect(resolveResize(0).collapse).toBe(true);
+    expect(resolveResize(-50).collapse).toBe(true); // dragged past the left edge
+  });
+
+  it("does NOT collapse between the threshold and the minimum (buffer zone)", () => {
+    // Sitting at the min width is a normal narrow drag, not a collapse intent.
+    expect(resolveResize(MIN_SIDEBAR_WIDTH).collapse).toBe(false);
+    expect(resolveResize(COLLAPSE_THRESHOLD + 1).collapse).toBe(false);
+    expect(resolveResize(200).collapse).toBe(false);
+  });
+
+  it("clamps expanded width into [MIN, MAX]", () => {
+    // Above threshold but below min → clamp up to min (still expanded).
+    expect(resolveResize(190)).toEqual({ width: MIN_SIDEBAR_WIDTH, collapse: false });
+    // In range → passthrough.
+    expect(resolveResize(300)).toEqual({ width: 300, collapse: false });
+    // Above max → clamp down.
+    expect(resolveResize(999)).toEqual({ width: MAX_SIDEBAR_WIDTH, collapse: false });
+  });
+
+  it("threshold sits below the minimum so a min-width drag never collapses", () => {
+    expect(COLLAPSE_THRESHOLD).toBeLessThan(MIN_SIDEBAR_WIDTH);
+  });
+
+  it("default restore width is a valid expanded width", () => {
+    expect(DEFAULT_SIDEBAR_WIDTH).toBeGreaterThanOrEqual(MIN_SIDEBAR_WIDTH);
+    expect(DEFAULT_SIDEBAR_WIDTH).toBeLessThanOrEqual(MAX_SIDEBAR_WIDTH);
+    expect(resolveResize(DEFAULT_SIDEBAR_WIDTH).collapse).toBe(false);
+  });
+});

package/src/components/chat/ComposerSendTools.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+
+/**
+ * ComposerSendTools — presentational layout for the composer's right-hand send
+ * cluster (model picker + send button). Extracted from PromptComposer so the
+ * cluster can be rendered in isolation under react-dom/server (the monorepo has
+ * no jsdom/@testing-library). The stateful pieces — the model `CustomSelect`
+ * with its async onChange, the `ComposerSendButton` — are built by the parent
+ * and passed in as nodes; this component owns only the wrapper markup.
+ *
+ * #160: the file-upload (Paperclip) button used to live here and was removed —
+ * file upload was never a supported feature (it depended on a sandbox that the
+ * local non-Docker mode never provides). ComposerSendTools.test.tsx asserts the
+ * rendered cluster contains no file input, guarding against it creeping back.
+ */
+export function ComposerSendTools({
+  modelSelect,
+  sendButton,
+}: {
+  /** The model picker node (parent builds the stateful CustomSelect). */
+  modelSelect: ReactNode;
+  /** The send button node. */
+  sendButton: ReactNode;
+}) {
+  return (
+    <div className="composer__send-tools">
+      {modelSelect}
+      {sendButton}
+    </div>
+  );
+}

package/src/components/chat/MessageStream.tsx

@@ -166,6 +166,11 @@ function MessageStreamImpl({
     const apply = () => {
       const n = stackRef.current;
       if (!n) return;
+      // #133 — force an instant jump for the restore. The container CSS no
+      // longer sets `scroll-behavior: smooth`, but pin it locally too so a
+      // future global rule (or an inherited one) can never turn this restore
+      // into a visible top-to-bottom replay through the history.
+      n.style.scrollBehavior = "auto";
       n.scrollTop = resolveScrollTop(mem, n.scrollHeight);
     };
     apply();
@@ -190,6 +195,8 @@ function MessageStreamImpl({
     if (!node || !isPinnedRef.current) {
       return;
     }
+    // #133 — pinned-bottom live append also jumps instantly (no smooth replay).
+    node.style.scrollBehavior = "auto";
     node.scrollTop = node.scrollHeight;
   }, [messages, autoScroll]);
 

package/src/components/chat/PromptComposer.tsx

@@ -1,4 +1,4 @@
-import { Bot, Paperclip, Square, X } from "lucide-react";
+import { Bot, Square } from "lucide-react";
 import { FormEvent, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import type { ProviderProfile } from "../../contracts/backend";
 import { useSandbox } from "../../contexts/SandboxContext";
@@ -13,6 +13,7 @@ import { CustomSelect } from "../primitives/CustomSelect";
 import { IconButton } from "../primitives/IconButton";
 import { ComposerInput } from "./ComposerInput";
 import { ComposerSendButton } from "./ComposerSendButton";
+import { ComposerSendTools } from "./ComposerSendTools";
 import { MessageStream } from "./MessageStream";
 
 export function PromptComposer() {
@@ -33,11 +34,6 @@ export function PromptComposer() {
   const commandsRef = useRef<HTMLDivElement | null>(null);
   const menuRef = useRef<HTMLDivElement | null>(null);
   const [menuPos, setMenuPos] = useState<{ top: number; left: number } | null>(null);
-  // #47: file upload — names of files uploaded into the workspace this turn,
-  // shown as removable chips and announced to the agent on send.
-  const fileInputRef = useRef<HTMLInputElement | null>(null);
-  const [attachments, setAttachments] = useState<string[]>([]);
-  const [uploading, setUploading] = useState(false);
   const { status: sandboxStatus, currentSandbox, reloadConfig } = useSandbox();
   const [composerError, setComposerError] = useState<string | null>(null);
   const { currentSession, messages, isSending, error, sendPrompt, isConnected, isDraft, agents, runActive, agentFilters, interruptCurrent, respondToInput, messageFilters } = useSessions();
@@ -224,50 +220,17 @@ export function PromptComposer() {
       return;
     }
     draftStore.set(sessionId, "");
-    // #47: if files were uploaded this turn, prepend a notice so the agent knows
-    // they exist in its workspace and can `read` them. Cleared after send.
-    const notice =
-      attachments.length > 0 ? `${t("chat.upload.notice", { names: attachments.join(", ") })}\n\n` : "";
-    const sentAttachments = attachments;
-    if (attachments.length > 0) setAttachments([]);
     // Carry the chosen provider/model so a freshly-created session records its
     // per-session selection (no-op for an already-running session).
-    const ok = await sendPrompt(`${notice}${content}`, {
+    const ok = await sendPrompt(content, {
       providerId: activeProvider?.id,
       modelId: selectedModel || undefined,
     });
     // #106: a failed/timed-out send must not silently eat the user's input.
-    // Restore the draft (and attachment chips) so they can retry without
-    // retyping. Only restore if they haven't already started typing again.
-    if (!ok) {
-      if (draftStore.get(sessionId).trim().length === 0) {
-        draftStore.set(sessionId, content);
-      }
-      if (sentAttachments.length > 0) {
-        setAttachments((prev) => (prev.length === 0 ? sentAttachments : prev));
-      }
-    }
-  };
-
-  // #47: upload the chosen files into the session workspace, then track their
-  // names as chips. Uses the current sandbox/session id (single-user: same id).
-  const handleFilesChosen = async (files: FileList | null) => {
-    if (!files || files.length === 0) return;
-    const sandboxId = currentSandbox?.id;
-    if (!sandboxId) return;
-    setUploading(true);
-    setComposerError(null);
-    try {
-      for (const file of Array.from(files)) {
-        await api.sandbox.uploadFile(sandboxId, file.name, file);
-        setAttachments((prev) => (prev.includes(file.name) ? prev : [...prev, file.name]));
-      }
-    } catch (e) {
-      const msg = e instanceof Error ? e.message : String(e);
-      setComposerError(t("chat.upload.failed", { msg }));
-    } finally {
-      setUploading(false);
-      if (fileInputRef.current) fileInputRef.current.value = ""; // allow re-selecting the same file
+    // Restore the draft so they can retry without retyping. Only restore if they
+    // haven't already started typing again.
+    if (!ok && draftStore.get(sessionId).trim().length === 0) {
+      draftStore.set(sessionId, content);
     }
   };
 
@@ -325,26 +288,6 @@ export function PromptComposer() {
             ariaLabel={t("chat.srAsk")}
           />
 
-          {attachments.length > 0 || uploading ? (
-            <div className="composer__attachments" aria-label={t("chat.aria.attachFile")}>
-              {attachments.map((name) => (
-                <span className="composer__chip" key={name}>
-                  <Paperclip size={12} />
-                  <span className="composer__chip-name">{name}</span>
-                  <button
-                    type="button"
-                    className="composer__chip-remove"
-                    aria-label={t("chat.aria.removeAttachment")}
-                    onClick={() => setAttachments((prev) => prev.filter((n) => n !== name))}
-                  >
-                    <X size={12} />
-                  </button>
-                </span>
-              ))}
-              {uploading ? <span className="composer__chip composer__chip--pending">{t("chat.upload.uploading")}</span> : null}
-            </div>
-          ) : null}
-
           <div className="composer__toolbar">
             <div className="composer__tools">
               {/*
@@ -389,76 +332,64 @@ export function PromptComposer() {
               )}
             </div>
 
-            <div className="composer__send-tools">
-              <CustomSelect
-                ariaLabel={t("chat.modelPlaceholder")}
-                className="model-select"
-                disabled={!currentSandbox || !activeProvider || activeProvider.models.length === 0}
-                onChange={async (model) => {
-                  setSelectedModel(model);
-                  setComposerError(null);
-                  try {
-                    await api.settings.update({ model });
-                  } catch (e) {
-                    const msg = e instanceof Error ? e.message : String(e);
-                    console.error("Failed to save model selection", e);
-                    setComposerError(t("chat.error.saveModel", { msg }));
-                    return;
-                  }
-                  try {
-                    await reloadConfig();
-                  } catch (e) {
-                    const msg = e instanceof Error ? e.message : String(e);
-                    console.error("Failed to reload config after model change", e);
-                    setComposerError(t("chat.error.reloadConfig", { msg }));
-                  }
-                }}
-                options={activeProvider?.models.map((model) => {
-                  const mh = activeProvider.modelHealth?.find((m) => m.model === model);
-                  const status = mh?.status ?? "unknown";
-                  return {
-                    value: model,
-                    label: model,
-                    indicator: (
-                      <span
-                        className={`model-status-dot model-status-dot--${status}`}
-                        title={mh?.error ?? status}
-                      />
-                    ),
-                  };
-                }) ?? []}
-                placeholder={t("chat.modelPlaceholder")}
-                title={activeProvider ? t("chat.providerTitle", { name: activeProvider.name }) : t("chat.noActiveProvider")}
-                value={selectedModel}
-              />
-              {/*
-                issue #47: 语音输入 (Mic) has no capture/permission flow yet —
-                hidden until implemented. The chat.aria.voice i18n key is kept.
-                Re-add the Mic lucide import when restoring this.
-              <IconButton label={t("chat.aria.voice")}>
-                <Mic size={17} />
-              </IconButton>
-              */}
-              <input
-                ref={fileInputRef}
-                type="file"
-                multiple
-                style={{ display: "none" }}
-                onChange={(e) => void handleFilesChosen(e.target.files)}
-              />
-              <IconButton
-                label={t("chat.aria.attachFile")}
-                onClick={() => fileInputRef.current?.click()}
-                disabled={uploading || !currentSandbox}
-              >
-                <Paperclip size={17} />
-              </IconButton>
-              <ComposerSendButton
-                sessionId={sessionId}
-                canSend={canSend}
-                label={t("chat.aria.send")}
-              />
-            </div>
+            {/*
+              issue #47: 语音输入 (Mic) had no capture/permission flow and was
+              never shipped; #160 removed the file-upload (Paperclip) button that
+              also lived in this cluster (upload was never a supported feature).
+              The send cluster is now just the model picker + send button.
+            */}
+            <ComposerSendTools
+              modelSelect={
+                <CustomSelect
+                  ariaLabel={t("chat.modelPlaceholder")}
+                  className="model-select"
+                  disabled={!currentSandbox || !activeProvider || activeProvider.models.length === 0}
+                  onChange={async (model) => {
+                    setSelectedModel(model);
+                    setComposerError(null);
+                    try {
+                      await api.settings.update({ model });
+                    } catch (e) {
+                      const msg = e instanceof Error ? e.message : String(e);
+                      console.error("Failed to save model selection", e);
+                      setComposerError(t("chat.error.saveModel", { msg }));
+                      return;
+                    }
+                    try {
+                      await reloadConfig();
+                    } catch (e) {
+                      const msg = e instanceof Error ? e.message : String(e);
+                      console.error("Failed to reload config after model change", e);
+                      setComposerError(t("chat.error.reloadConfig", { msg }));
+                    }
+                  }}
+                  options={activeProvider?.models.map((model) => {
+                    const mh = activeProvider.modelHealth?.find((m) => m.model === model);
+                    const status = mh?.status ?? "unknown";
+                    return {
+                      value: model,
+                      label: model,
+                      indicator: (
+                        <span
+                          className={`model-status-dot model-status-dot--${status}`}
+                          title={mh?.error ?? status}
+                        />
+                      ),
+                    };
+                  }) ?? []}
+                  placeholder={t("chat.modelPlaceholder")}
+                  title={activeProvider ? t("chat.providerTitle", { name: activeProvider.name }) : t("chat.noActiveProvider")}
+                  value={selectedModel}
+                />
+              }
+              sendButton={
+                <ComposerSendButton
+                  sessionId={sessionId}
+                  canSend={canSend}
+                  label={t("chat.aria.send")}
+                />
+              }
+            />
           </div>
 
         </form>

package/src/components/demo/DemoView.tsx

@@ -55,15 +55,22 @@ function basename(path: string): string {
  *
  * Keep: user prompts; assistant/system plain-text replies from ANY agent;
  * error and system_message bubbles (the agent-attributed warnings/alerts the
- * live Chat shows). Drop: reasoning, tool calls/results, hook diagnostics, and
- * the interactive ask_user / auto_retry cards (the reasoning graph on the right
- * tells the internal story, and the cards have no meaning in a read-only
- * replay), plus NO-RENDER placeholders and empties.
+ * live Chat shows), plus answered ask_user cards (the question + the user's
+ * answer are a user-facing decision point, issue #132 — rendered read-only by
+ * AskUserCard since DemoView passes no onAskUserSubmit). Drop: reasoning, tool
+ * calls/results, hook diagnostics, the auto_retry card and UNANSWERED ask_user
+ * prompts (no meaning in a read-only replay), plus NO-RENDER placeholders and
+ * empties.
  */
 export function isDemoConversational(m: ChatMessage): boolean {
   if (m.role === "user") {
     return !!m.content?.trim();
   }
+  // Answered ask_user: keep as a read-only Q&A step. Unanswered prompts have no
+  // meaning in a replay and are dropped.
+  if (m.kind === "ask_user") {
+    return m.askUser?.answer !== undefined;
+  }
   // Agent-attributed warnings/errors the live Chat surfaces as standalone
   // bubbles. system_message carries its own payload; error carries content.
   if (m.kind === "system_message") {

package/src/components/shell/DesktopShell.tsx

@@ -17,16 +17,20 @@ import { SandboxStatus } from "./SandboxStatus";
 import { Sidebar } from "../sidebar/Sidebar";
 import { DiskQuotaWarningDialog } from "../quota/DiskQuotaWarningDialog";
 import { DiskQuotaCriticalDialog } from "../quota/DiskQuotaCriticalDialog";
-
-const MIN_SIDEBAR_WIDTH = 220;
-const MAX_SIDEBAR_WIDTH = 420;
+import { DEFAULT_SIDEBAR_WIDTH, resolveResize } from "./sidebarResize";
 
 export function DesktopShell() {
   const { isAuthReady } = useAuth();
   const { currentSandbox, operation, error, stats } = useSandbox();
-  const { currentSession, currentView, isRefreshingMessages, refreshMessages, setCurrentView } = useSessions();
+  const { currentSession, currentView, isRefreshingMessages, refreshMessages, setCurrentView, traceUnread } = useSessions();
   const t = useT();
-  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
+  // #131 — the sidebar collapses to an icon rail either manually (user toggle)
+  // or automatically at narrow widths. Both feed the same `isCollapsed` state so
+  // the collapsed rail's session popover trigger is available in both cases. A
+  // manual toggle wins until the viewport crosses the breakpoint again.
+  const [userCollapsed, setUserCollapsed] = useState<boolean | null>(null);
+  const [isNarrow, setIsNarrow] = useState(false);
+  const isSidebarCollapsed = userCollapsed ?? isNarrow;
   const [activePage, setActivePage] = useState<"workspace" | "demo">("workspace");
   // Bumped on every sidebar "Live Demo" click so DemoView returns to its
   // session-selection landing even when the demo page is already open (#111).
@@ -49,6 +53,21 @@ export function DesktopShell() {
     }
   }, [operation]);
 
+  // #131 — track the narrow breakpoint. Crossing it resets the manual override
+  // so the layout follows the viewport again (a user who manually expanded on a
+  // wide screen still gets the auto-rail when they shrink the window, and vice
+  // versa). 860px matches the existing responsive rail breakpoint in global.css.
+  useEffect(() => {
+    const mql = window.matchMedia("(max-width: 860px)");
+    const apply = () => {
+      setIsNarrow(mql.matches);
+      setUserCollapsed(null);
+    };
+    setIsNarrow(mql.matches);
+    mql.addEventListener("change", apply);
+    return () => mql.removeEventListener("change", apply);
+  }, []);
+
   // Show warning dialog once per page session when disk usage is >= 90% but < 100%
   useEffect(() => {
     const percent = stats?.disk.percentOfQuota ?? 0;
@@ -66,12 +85,21 @@ export function DesktopShell() {
         return;
       }
 
+      // #159 — drag the edge left past the collapse threshold and the rail snaps
+      // to the icon rail; otherwise apply the clamped expanded width. resolveResize
+      // owns the geometry (pure + unit-tested in sidebarResize.test.ts).
       const delta = event.clientX - sidebarResizeRef.current.pointerX;
-      const nextWidth = Math.max(
-        MIN_SIDEBAR_WIDTH,
-        Math.min(MAX_SIDEBAR_WIDTH, sidebarResizeRef.current.width + delta),
-      );
-      setSidebarWidth(nextWidth);
+      const outcome = resolveResize(sidebarResizeRef.current.width + delta);
+      if (outcome.collapse) {
+        setUserCollapsed(true);
+        sidebarResizeRef.current = null;
+        setIsSidebarResizing(false);
+        // Restore a sensible width so expanding again (toggle / drag) isn't stuck
+        // at the collapsed remnant.
+        setSidebarWidth(DEFAULT_SIDEBAR_WIDTH);
+        return;
+      }
+      setSidebarWidth(outcome.width);
     };
 
     const handlePointerUp = () => {
@@ -128,7 +156,7 @@ export function DesktopShell() {
           sidebarResizeRef.current = { pointerX, width: sidebarWidth };
           setIsSidebarResizing(true);
         }}
-        onToggle={() => setIsSidebarCollapsed((current) => !current)}
+        onToggle={() => setUserCollapsed(!isSidebarCollapsed)}
       />
 
       {activePage === "demo" ? (
@@ -189,7 +217,7 @@ export function DesktopShell() {
               </button>
               <button
                 aria-selected={currentView === "trace"}
-                className={currentView === "trace" ? "is-active" : ""}
+                className={`workspace-view-tab--badged ${currentView === "trace" ? "is-active" : ""}`}
                 onClick={() => setCurrentView("trace")}
                 role="tab"
                 title={t("shell.view.trace")}
@@ -197,6 +225,15 @@ export function DesktopShell() {
               >
                 <GitBranch size={14} />
                 <span className="sr-only">{t("shell.view.trace")}</span>
+                {/* #134 — quiet unread dot: trace changed for this session and
+                    the user hasn't opened the Trace view since. Cleared on open. */}
+                {traceUnread && currentView !== "trace" ? (
+                  <span
+                    className="workspace-view-tab__badge"
+                    aria-label={t("shell.view.traceUpdated")}
+                    role="status"
+                  />
+                ) : null}
               </button>
             </div>
             {currentView === "chat" ? (

package/src/components/shell/sidebarResize.ts

@@ -0,0 +1,49 @@
+/**
+ * sidebarResize.ts — pure geometry for the sidebar resize→collapse interaction
+ * (#159). Kept free of React so it can be unit-tested without jsdom (the
+ * monorepo has no jsdom/@testing-library; DesktopShell drives the real
+ * pointer events, these helpers decide the numbers).
+ *
+ * Behaviour: while dragging the sidebar's right edge leftward, once the would-be
+ * width crosses a collapse threshold that sits *below* the normal minimum, the
+ * rail snaps to the collapsed icon rail (rather than refusing to shrink past the
+ * minimum, which is what made drag-to-collapse impossible before #159).
+ */
+
+/** Normal drag bounds — the sidebar clamps here while it stays expanded. */
+export const MIN_SIDEBAR_WIDTH = 220;
+export const MAX_SIDEBAR_WIDTH = 420;
+
+/**
+ * Drag the edge below this (well under MIN, giving a deliberate "drag past the
+ * min a bit more" buffer so a normal min-width drag doesn't accidentally
+ * collapse) and the rail snaps shut.
+ */
+export const COLLAPSE_THRESHOLD = 160;
+
+/** Width the rail restores to when it expands again (matches the default). */
+export const DEFAULT_SIDEBAR_WIDTH = 268;
+
+export interface ResizeOutcome {
+  /** Clamped width to apply while expanded (ignored when collapse is true). */
+  width: number;
+  /** True when the drag has gone narrow enough to collapse to the icon rail. */
+  collapse: boolean;
+}
+
+/**
+ * Given the drag's raw proposed width (start width + pointer delta), decide
+ * whether to collapse and, if not, the clamped expanded width.
+ *
+ * - proposed <= COLLAPSE_THRESHOLD → collapse.
+ * - otherwise clamp into [MIN, MAX].
+ */
+export function resolveResize(proposedWidth: number): ResizeOutcome {
+  if (proposedWidth <= COLLAPSE_THRESHOLD) {
+    return { width: MIN_SIDEBAR_WIDTH, collapse: true };
+  }
+  return {
+    width: Math.max(MIN_SIDEBAR_WIDTH, Math.min(MAX_SIDEBAR_WIDTH, proposedWidth)),
+    collapse: false,
+  };
+}

package/src/components/sidebar/SessionList.tsx

@@ -0,0 +1,127 @@
+import { Check, MessageCircle, PenLine, Search, Trash2, X } from "lucide-react";
+import { FormEvent, useState } from "react";
+import type { Session } from "../../contracts/backend";
+import { useT } from "../../i18n/useT";
+import { IconButton } from "../primitives/IconButton";
+
+type SessionListProps = {
+  sessions: Session[];
+  currentId: string | undefined;
+  isLoading: boolean;
+  /** Select an existing session (callers also switch to the workspace page). */
+  onSelect: (sessionId: string) => void;
+  /** Rename a session by id. */
+  onRename: (sessionId: string, title: string) => void | Promise<void>;
+  /** Delete a session by id. */
+  onDelete: (sessionId: string) => void | Promise<void>;
+  /** Open the search dialog. */
+  onOpenSearch: () => void;
+};
+
+/**
+ * #131 — the conversation list, extracted from Sidebar so the same markup and
+ * rename/delete affordances render both inline (expanded sidebar) and inside
+ * the icon-rail session popover. Owns only its transient edit/confirm UI state;
+ * the session data and mutations are passed in by the host.
+ */
+export function SessionList({
+  sessions,
+  currentId,
+  isLoading,
+  onSelect,
+  onRename,
+  onDelete,
+  onOpenSearch,
+}: SessionListProps) {
+  const t = useT();
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editingTitle, setEditingTitle] = useState("");
+  const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null);
+
+  const submitRename = async (event: FormEvent) => {
+    event.preventDefault();
+    if (!editingId || !editingTitle.trim()) {
+      setEditingId(null);
+      return;
+    }
+    await onRename(editingId, editingTitle.trim());
+    setEditingId(null);
+  };
+
+  return (
+    <div className="conversation-stack">
+      <button className="conversation-search-trigger" onClick={onOpenSearch} type="button">
+        <Search size={14} />
+        <span>{t("sidebar.search")}</span>
+      </button>
+      <p className="muted-label">
+        {isLoading ? t("sidebar.loading") : t("sidebar.sessionCount", { count: sessions.length })}
+      </p>
+      {sessions.length === 0 && !isLoading ? <p className="sidebar-empty">{t("sidebar.empty")}</p> : null}
+      {sessions.map((session) => {
+        const isEditing = editingId === session.id;
+        const isConfirming = confirmDeleteId === session.id;
+        return (
+          <div className={`conversation-item ${currentId === session.id ? "is-active" : ""}`} key={session.id}>
+            {isEditing ? (
+              <form className="conversation-edit" onSubmit={submitRename}>
+                <input
+                  autoFocus
+                  onChange={(event) => setEditingTitle(event.target.value)}
+                  value={editingTitle}
+                />
+                <IconButton label={t("sidebar.aria.saveTitle")} type="submit">
+                  <Check size={14} />
+                </IconButton>
+                <IconButton label={t("sidebar.aria.cancelRename")} onClick={() => setEditingId(null)}>
+                  <X size={14} />
+                </IconButton>
+              </form>
+            ) : (
+              <>
+                <button className="conversation-row" onClick={() => onSelect(session.id)} type="button">
+                  <MessageCircle size={16} />
+                  <span>{session.title}</span>
+                  <small>{new Date(session.updatedAt).toLocaleDateString()}</small>
+                </button>
+                <div className="conversation-actions">
+                  {isConfirming ? (
+                    <>
+                      <IconButton
+                        label={t("sidebar.aria.confirmDelete")}
+                        onClick={() => {
+                          void onDelete(session.id);
+                          setConfirmDeleteId(null);
+                        }}
+                      >
+                        <Check size={14} />
+                      </IconButton>
+                      <IconButton label={t("sidebar.aria.cancelDelete")} onClick={() => setConfirmDeleteId(null)}>
+                        <X size={14} />
+                      </IconButton>
+                    </>
+                  ) : (
+                    <>
+                      <IconButton
+                        label={t("sidebar.aria.rename")}
+                        onClick={() => {
+                          setEditingId(session.id);
+                          setEditingTitle(session.title);
+                        }}
+                      >
+                        <PenLine size={14} />
+                      </IconButton>
+                      <IconButton label={t("sidebar.aria.delete")} onClick={() => setConfirmDeleteId(session.id)}>
+                        <Trash2 size={14} />
+                      </IconButton>
+                    </>
+                  )}
+                </div>
+              </>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}