@brainpilot/web 0.0.5 → 0.0.7

package/src/components/session/TraceNodeDetail.tsx

@@ -1,6 +1,7 @@
 import { AlertTriangle, ArrowRight, Box, Clock3, FileText, GitBranch, Timer, Wrench } from "lucide-react";
 import { TraceNode } from "../../contracts/backend";
 import { TranslateVars } from "../../i18n/translate";
+import { formatToolName } from "../../utils/toolDisplay";
 import {
   artifactLabels,
   formatDuration,
@@ -13,11 +14,13 @@ import {
 
 interface TraceNodeDetailProps {
   node: TraceNode | null;
+  nodes?: TraceNode[];
   onSelectNode: (id: string) => void;
   /** When provided, artifact rows become buttons that focus that file. */
   onSelectArtifact?: (path: string) => void;
   /** Currently focused artifact path (for highlight). */
   activeArtifactPath?: string | null;
+  formatKind?: (kind: string) => string;
   t: (key: string, vars?: TranslateVars) => string;
 }
 
@@ -26,11 +29,31 @@ interface TraceNodeDetailProps {
  * TracePanel so the live trace view and the demo replay share it. In the demo
  * an `onSelectArtifact` handler wires artifact rows to the file preview.
  */
-export function TraceNodeDetail({ node, onSelectNode, onSelectArtifact, activeArtifactPath, t }: TraceNodeDetailProps) {
+export function TraceNodeDetail({ node, nodes, onSelectNode, onSelectArtifact, activeArtifactPath, formatKind, t }: TraceNodeDetailProps) {
   if (!node) {
-    return <p>No trace node selected.</p>;
+    return <p>{t("trace.node.noneSelected")}</p>;
   }
   const statusKey = getStatusLabelKey(node.status);
+  const nodeById = new Map((nodes ?? []).map((item) => [item.id, item]));
+  const kind = getNodeKind(node);
+  const kindLabel = formatKind?.(kind) ?? kind;
+  const parentLabel = (id: string) =>
+    nodeById.get(id)?.title || t("trace.node.parentFallback");
+  const childNodes = node.childIds
+    .map((id) => ({ id, title: nodeById.get(id)?.title }))
+    .filter((item) => item.title);
+  const metrics = [
+    node.durationMs !== undefined
+      ? { key: "duration", icon: <Timer size={13} />, label: formatDuration(node.durationMs) }
+      : null,
+    node.toolCalls.length > 0
+      ? { key: "tools", icon: <Wrench size={13} />, label: t("trace.node.tools", { count: node.toolCalls.length }) }
+      : null,
+    node.artifacts.length > 0
+      ? { key: "artifacts", icon: <Box size={13} />, label: t("trace.node.artifacts", { count: node.artifacts.length }) }
+      : null,
+  ].filter((item): item is { key: string; icon: JSX.Element; label: string } => item !== null);
+
   return (
     <>
       <div className="trace-detail__title">
@@ -41,9 +64,13 @@ export function TraceNodeDetail({ node, onSelectNode, onSelectArtifact, activeAr
         </span>
       </div>
       <div className="trace-detail__badges">
-        <span>{node.id}</span>
-        <span>{getNodeKind(node)}</span>
-        <span>{node.agent || "agent unknown"}</span>
+        <span title={kind}>{kindLabel}</span>
+        {node.agent ? <span>{node.agent}</span> : null}
+        {node.metadata?.auto ? (
+          <span className="trace-detail__badge--auto" title={t("trace.node.autoTitle")}>
+            {t("trace.node.auto")}
+          </span>
+        ) : null}
       </div>
       <p>{node.summary || node.description || node.content || "No summary recorded."}</p>
       {node.reason ? (
@@ -58,19 +85,21 @@ export function TraceNodeDetail({ node, onSelectNode, onSelectArtifact, activeAr
           <p>{node.context}</p>
         </section>
       ) : null}
-      <div className="trace-detail__metrics">
-        <span><Timer size={13} /> {formatDuration(node.durationMs)}</span>
-        <span><Wrench size={13} /> {node.toolCalls.length} tools</span>
-        <span><Box size={13} /> {node.artifacts.length} artifacts</span>
-      </div>
+      {metrics.length > 0 ? (
+        <div className="trace-detail__metrics">
+          {metrics.map((metric) => (
+            <span key={metric.key}>{metric.icon} {metric.label}</span>
+          ))}
+        </div>
+      ) : null}
       {node.parents.length > 0 ? (
         <section className="trace-detail__section">
-          <h4><GitBranch size={13} /> Dependencies</h4>
+          <h4><GitBranch size={13} /> {t("trace.node.dependencies")}</h4>
           <div className="trace-relation-list">
             {node.parents.map((parent) => (
-              <button key={parent.id} onClick={() => onSelectNode(parent.id)} type="button">
-                <strong>{parent.id}</strong>
-                <span>{relationLabels[parent.relation || ""] || parent.relation || "parent"}{parent.edgeType ? ` · ${parent.edgeType}` : ""}</span>
+              <button key={parent.id} onClick={() => onSelectNode(parent.id)} title={parent.id} type="button">
+                <strong>{parentLabel(parent.id)}</strong>
+                <span>{relationLabels[parent.relation || ""] || parent.relation || "parent"}</span>
                 {parent.explanation ? <small>{parent.explanation}</small> : null}
               </button>
             ))}
@@ -79,21 +108,21 @@ export function TraceNodeDetail({ node, onSelectNode, onSelectArtifact, activeAr
       ) : null}
       {node.toolCalls.length > 0 ? (
         <section className="trace-detail__section">
-          <h4><Wrench size={13} /> Tool Calls</h4>
+          <h4><Wrench size={13} /> {t("trace.node.toolCalls")}</h4>
           <div className="trace-chip-list">
-            {node.toolCalls.map((tool) => <span key={tool}>{tool}</span>)}
+            {node.toolCalls.map((tool) => <span key={tool} title={tool}>{formatToolName(tool)}</span>)}
           </div>
         </section>
       ) : null}
       {node.errorMessage ? (
         <section className="trace-detail__section trace-detail__section--error">
-          <h4><AlertTriangle size={13} /> Error</h4>
+          <h4><AlertTriangle size={13} /> {t("trace.node.error")}</h4>
           <p>{node.errorMessage}</p>
         </section>
       ) : null}
       {node.artifacts.length > 0 ? (
         <section className="trace-detail__section">
-          <h4><Box size={13} /> Artifacts</h4>
+          <h4><Box size={13} /> {t("trace.node.artifactsTitle")}</h4>
           <div className="trace-artifact-list">
             {node.artifacts.map((artifact) => {
               const label = artifactLabels[artifact.type || ""] || artifact.type || "file";
@@ -125,16 +154,24 @@ export function TraceNodeDetail({ node, onSelectNode, onSelectArtifact, activeAr
         </section>
       ) : null}
       <section className="trace-detail__section">
-        <h4><Clock3 size={13} /> Timeline</h4>
+        <h4><Clock3 size={13} /> {t("trace.node.timeline")}</h4>
         <dl>
           <div>
-            <dt>Created</dt>
+            <dt>{t("trace.node.created")}</dt>
             <dd>{formatTime(node.timestamp?.createdAt || node.createdAt)}</dd>
           </div>
-          <div>
-            <dt>Children</dt>
-            <dd>{node.childIds.join(", ") || "-"}</dd>
-          </div>
+          {childNodes.length > 0 ? (
+            <div>
+              <dt>{t("trace.node.children")}</dt>
+              <dd className="trace-detail__children">
+                {childNodes.map((child) => (
+                  <button key={child.id} onClick={() => onSelectNode(child.id)} title={child.id} type="button">
+                    {child.title}
+                  </button>
+                ))}
+              </dd>
+            </div>
+          ) : null}
         </dl>
       </section>
     </>

package/src/components/session/agentNetworkShared.ts

@@ -13,6 +13,7 @@ import {
   GitBranch,
   Microscope,
   PenLine,
+  ShieldCheck,
   Sparkles,
   UserRoundCog,
   Wrench,
@@ -92,6 +93,13 @@ export const AGENT_PROFILES: Record<string, AgentProfile> = {
     accent: "warning",
     defaultTools: ["Read", "Write", "Grep", "Bash", "send_message"],
   },
+  auditor: {
+    displayName: "Auditor",
+    role: "profile.auditor.role",
+    description: "profile.auditor.desc",
+    accent: "danger",
+    defaultTools: ["Read", "Grep", "Bash", "Write", "send_message", "record_trace"],
+  },
   user: {
     displayName: "You",
     role: "profile.user.role",
@@ -127,6 +135,7 @@ export const BUILTIN_AGENT_NAMES = [
   "experimentalist",
   "engineer",
   "writer",
+  "auditor",
 ] as const;
 
 /* --------------------------------------------------------------------------
@@ -278,6 +287,7 @@ export function getAgentIcon(name: string) {
   if (normalized.includes("experiment")) return Microscope;
   if (normalized.includes("engineer")) return Wrench;
   if (normalized.includes("writer")) return PenLine;
+  if (normalized.includes("audit")) return ShieldCheck;
   if (normalized.includes("idea") || normalized.includes("creat")) return Sparkles;
   return Bot;
 }

package/src/components/session/traceLayout.ts

@@ -31,6 +31,35 @@ export function getNodeKind(node: TraceNode): string {
   return node.nodeType || node.type || "step";
 }
 
+export function getNodeKindLabelKey(kind: string): string | null {
+  switch (kind) {
+    case "task":
+      return "trace.kind.task";
+    case "trace":
+      return "trace.kind.trace";
+    case "action":
+      return "trace.kind.action";
+    case "observation":
+      return "trace.kind.observation";
+    case "decision":
+      return "trace.kind.decision";
+    case "milestone":
+      return "trace.kind.milestone";
+    case "validation":
+      return "trace.kind.validation";
+    case "audit":
+      return "trace.kind.audit";
+    case "writing":
+      return "trace.kind.writing";
+    case "research":
+      return "trace.kind.research";
+    case "step":
+      return "trace.kind.step";
+    default:
+      return null;
+  }
+}
+
 export function truncateNodeTitle(title?: string, maxUnits = 26): string {
   if (!title) {
     return "";
@@ -65,6 +94,9 @@ export const relationLabels: Record<string, string> = {
   used: "used",
   produced: "produced",
   comparison_with: "compared with",
+  follows: "then",
+  depends_on: "depends on",
+  parent: "parent",
 };
 
 export const artifactLabels: Record<string, string> = {

package/src/components/settings/SettingsDialog.tsx

@@ -1,7 +1,7 @@
 import { FormEvent, useEffect, useState } from "react";
 import { Check, Eye, EyeOff, Loader2, Plug, Plus, Settings, SlidersHorizontal, Trash2, UserRound, X } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
-import type { McpServerEntry, ProviderProfile } from "../../contracts/backend";
+import type { McpServerEntry, ProviderProfile, ProviderApi } from "../../contracts/backend";
 import { useAuth } from "../../contexts/AuthContext";
 import { usePreferences } from "../../contexts/PreferencesContext";
 import { useT } from "../../i18n/useT";
@@ -26,6 +26,7 @@ const tabs: Array<{ id: SettingsTab; labelKey: string; icon: LucideIcon }> = [
 const DEFAULT_PROVIDER_FORM = {
   name: "",
   baseUrl: "https://api.anthropic.com",
+  api: "anthropic-messages" as ProviderApi,
   apiKey: "",
   apiKeyMasked: "",
   models: ["claude-opus-4-6"],
@@ -184,6 +185,7 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
         ? await api.providers.update(editingProviderId, {
             name: providerForm.name,
             baseUrl: providerForm.baseUrl,
+            api: providerForm.api,
             ...(providerForm.apiKey ? { apiKey: providerForm.apiKey } : {}),
             models,
             iconColor: providerForm.iconColor,
@@ -192,6 +194,7 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
         : await api.providers.create({
             name: providerForm.name,
             baseUrl: providerForm.baseUrl,
+            api: providerForm.api,
             apiKey: providerForm.apiKey,
             models,
             iconColor: providerForm.iconColor,
@@ -214,6 +217,7 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
     setProviderForm({
       name: provider.name,
       baseUrl: provider.baseUrl,
+      api: provider.api,
       apiKey: "",
       apiKeyMasked: provider.apiKeyMasked || "",
       models: provider.models.length ? provider.models : [""],
@@ -562,6 +566,20 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
                 <span>{t("settings.providerForm.baseUrl")}</span>
                 <input placeholder="https://api.anthropic.com" required value={providerForm.baseUrl} onChange={(event) => setProviderForm({ ...providerForm, baseUrl: event.target.value })} />
               </label>
+              <div className="provider-form__field">
+                <span>{t("settings.providerForm.protocol")}</span>
+                <CustomSelect
+                  ariaLabel={t("settings.providerForm.protocolAria")}
+                  onChange={(value) => setProviderForm({ ...providerForm, api: value as ProviderApi })}
+                  options={[
+                    { label: "Anthropic Messages", value: "anthropic-messages" },
+                    { label: "OpenAI Completions", value: "openai-completions" },
+                    { label: "OpenAI Responses", value: "openai-responses" },
+                    { label: "Azure OpenAI Responses", value: "azure-openai-responses" },
+                  ]}
+                  value={providerForm.api}
+                />
+              </div>
               <label className="provider-form__key">
                 <span>{t("settings.providerForm.apiKey")} {editingProviderId ? t("settings.providerForm.apiKeyKeep") : ""}</span>
                 <input

package/src/components/shell/DesktopShell.tsx

@@ -4,6 +4,7 @@ import { useAuth } from "../../contexts/AuthContext";
 import { useSandbox } from "../../contexts/SandboxContext";
 import { useSessions } from "../../contexts/SessionContext";
 import { useT } from "../../i18n/useT";
+import { runtimeConfig } from "../../config";
 import { PromptComposer } from "../chat/PromptComposer";
 import { DemoView } from "../demo/DemoView";
 import { FileSidebar } from "../files/FileSidebar";
@@ -23,10 +24,19 @@ const MAX_SIDEBAR_WIDTH = 420;
 export function DesktopShell() {
   const { isAuthReady } = useAuth();
   const { currentSandbox, operation, error, stats } = useSandbox();
-  const { currentSession, currentView, messages, 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).
+  const [demoResetSignal, setDemoResetSignal] = useState(0);
   const [sidebarWidth, setSidebarWidth] = useState(268);
   const [isSidebarResizing, setIsSidebarResizing] = useState(false);
   const [isSearchOpen, setIsSearchOpen] = useState(false);
@@ -45,6 +55,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;
@@ -109,7 +134,10 @@ export function DesktopShell() {
       <Sidebar
         isCollapsed={isSidebarCollapsed}
         activePage={activePage}
-        onOpenDemo={() => setActivePage("demo")}
+        onOpenDemo={() => {
+          setActivePage("demo");
+          setDemoResetSignal((n) => n + 1);
+        }}
         onGoWorkspace={() => setActivePage("workspace")}
         onOpenSettings={() => setIsSettingsOpen(true)}
         onOpenSearch={() => setIsSearchOpen(true)}
@@ -121,11 +149,11 @@ export function DesktopShell() {
           sidebarResizeRef.current = { pointerX, width: sidebarWidth };
           setIsSidebarResizing(true);
         }}
-        onToggle={() => setIsSidebarCollapsed((current) => !current)}
+        onToggle={() => setUserCollapsed(!isSidebarCollapsed)}
       />
 
       {activePage === "demo" ? (
-        <DemoView />
+        <DemoView resetSignal={demoResetSignal} />
       ) : (
       <main
         className={`workspace ${isFilesOpen ? "workspace--files-open" : ""} ${
@@ -136,47 +164,69 @@ export function DesktopShell() {
       >
         <header className="workspace-toolbar" aria-label={t("shell.aria.toolbarActions")}>
           <div className="session-title" aria-label={t("shell.aria.activeSession")}>
-            <span className="session-title__label">{t("shell.sessionLabel")}</span>
+            {/* #105: foreground the human-readable session title (same source as
+                the sidebar). The id is debug-only metadata now — surfaced as a
+                hover tooltip + muted short id, never the primary label. Falls
+                back to `Session <id8>` when the title is missing. */}
+            <span
+              className="session-title__name"
+              title={currentSession?.id ?? undefined}
+            >
+              {currentSession?.title ||
+                (currentSession?.id
+                  ? `${t("shell.sessionLabel")} ${currentSession.id.slice(0, 8)}`
+                  : t("shell.defaultWorkspace"))}
+            </span>
             {currentSession?.id ? (
               <span className="session-title__id">{currentSession.id.slice(0, 8)}</span>
             ) : null}
-            {messages.length === 0 ? (
-              <span className="session-title__name">
-                {currentSession?.title || t("shell.defaultWorkspace")}
-              </span>
-            ) : null}
           </div>
           <div className="workspace-toolbar__actions">
-            <div className="workspace-view-tabs" role="tablist" aria-label={t("shell.aria.viewTabs")}>
+            {/* #104: icon-only nav. The label stays in the DOM (visually
+                hidden) so it remains the button's accessible name, and `title`
+                gives a hover/focus tooltip — no separate aria-label needed. */}
+            <div className="workspace-view-tabs workspace-view-tabs--icon-only" role="tablist" aria-label={t("shell.aria.viewTabs")}>
               <button
                 aria-selected={currentView === "chat"}
                 className={currentView === "chat" ? "is-active" : ""}
                 onClick={() => setCurrentView("chat")}
                 role="tab"
+                title={t("shell.view.chat")}
                 type="button"
               >
                 <MessageSquare size={14} />
-                <span>{t("shell.view.chat")}</span>
+                <span className="sr-only">{t("shell.view.chat")}</span>
               </button>
               <button
                 aria-selected={currentView === "agents"}
                 className={currentView === "agents" ? "is-active" : ""}
                 onClick={() => setCurrentView("agents")}
                 role="tab"
+                title={t("shell.view.agents")}
                 type="button"
               >
                 <Bot size={14} />
-                <span>{t("shell.view.agents")}</span>
+                <span className="sr-only">{t("shell.view.agents")}</span>
               </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")}
                 type="button"
               >
                 <GitBranch size={14} />
-                <span>{t("shell.view.trace")}</span>
+                <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" ? (
@@ -188,7 +238,12 @@ export function DesktopShell() {
                 <RefreshCw size={14} />
               </IconButton>
             ) : null}
-            <SandboxStatus />
+            {/* #100: in local single-user mode there is no Docker sandbox to
+                inspect — the runtime IS the workspace, so the Sandbox status
+                popover would only show empty container metrics and read like a
+                fault. Hide it here; downstream multi-user Docker builds set
+                VITE_LOCAL_MODE=0 and keep the real container UI. */}
+            {runtimeConfig.localMode ? null : <SandboxStatus />}
             <IconButton
               aria-pressed={isFilesOpen}
               className={isFilesOpen ? "is-active" : ""}

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>
+  );
+}