ompchamber 3.4.0 → 3.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ompchamber",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "Developer web console and diagnostic chamber for AI Oh-My-Pi — Elysia + Preact on Bun.",
   "license": "UNLICENSED",
   "author": "Wijanarko Putra Rajeb <wijanarko.rajeb@gmail.com>",

package/src/client/components/common/session-actions-menu/index.tsx

@@ -0,0 +1,201 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * One overflow menu for a session row, shared by the desktop sidebar and the
+ * mobile one.
+ *
+ * The row used to carry its actions as side-by-side hover icons (rename,
+ * archive, delete). That does not scale: three icons cost roughly a third of
+ * the title's width in the 268px sidebar, and every action added from here
+ * takes another slice. One trigger whose contents grow is the shape that
+ * survives the next action.
+ *
+ * Two ways in, one menu out:
+ *   - the `⋯` button, which is the discoverable affordance;
+ *   - a right-click anywhere on the row, which is the accelerator. Both are
+ *     wired by the row component through `useRowMenu`.
+ *
+ * The menu positions itself from its OWN measured size. The item list is
+ * conditional (a pending `new-…` chat has no Rename or Delete), so a constant
+ * height would put the last row off-screen at the viewport edge — the same
+ * class of bug the file explorer's context menu works around with hand-tuned
+ * numbers.
+ */
+
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
+import type { TargetedMouseEvent } from 'preact';
+import { createPortal } from 'preact/compat';
+import { Archive, ArchiveRestore, Pencil, Trash2 } from 'lucide-preact';
+
+/** Viewport coordinates the menu hangs off, plus which edge it aligns to. */
+export interface MenuAnchor {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+  /**
+   * `end` hangs the menu's right edge off the anchor's — what a row's overflow
+   * button expects, since it sits at the row's end. `start` puts the menu's
+   * left edge at the anchor's, so a context-menu click opens away from the
+   * pointer rather than under it.
+   */
+  align: 'start' | 'end';
+}
+
+export interface RowMenuHandle {
+  /** Non-null while the menu is open. */
+  anchor: MenuAnchor | null;
+  /** Open below the clicked element (the `⋯` button). */
+  openBelow: (event: TargetedMouseEvent<HTMLElement>) => void;
+  /** Open at the pointer (a right-click on the row). */
+  openAtCursor: (event: TargetedMouseEvent<HTMLElement>) => void;
+  close: () => void;
+}
+
+/** Anchor state for one row's overflow menu. */
+export function useRowMenu(): RowMenuHandle {
+  const [anchor, setAnchor] = useState<MenuAnchor | null>(null);
+
+  const openBelow = useCallback((event: TargetedMouseEvent<HTMLElement>) => {
+    event.preventDefault();
+    // The row underneath selects the session on click; opening its menu is not
+    // a selection.
+    event.stopPropagation();
+    const rect = event.currentTarget.getBoundingClientRect();
+    setAnchor({ top: rect.top, right: rect.right, bottom: rect.bottom, left: rect.left, align: 'end' });
+  }, []);
+
+  const openAtCursor = useCallback((event: TargetedMouseEvent<HTMLElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const { clientX, clientY } = event;
+    setAnchor({ top: clientY, right: clientX, bottom: clientY, left: clientX, align: 'start' });
+  }, []);
+
+  const close = useCallback(() => setAnchor(null), []);
+
+  return { anchor, openBelow, openAtCursor, close };
+}
+
+export interface SessionActionsMenuProps {
+  anchor: MenuAnchor;
+  isArchived?: boolean;
+  /** Omitted when the row cannot be renamed (a pending `new-…` chat). */
+  onRename?: () => void;
+  onArchive?: () => void;
+  onDelete?: () => void;
+  onClose: () => void;
+}
+
+export function SessionActionsMenu({
+  anchor,
+  isArchived = false,
+  onRename,
+  onArchive,
+  onDelete,
+  onClose,
+}: SessionActionsMenuProps) {
+  const menuRef = useRef<HTMLDivElement>(null);
+  const [pos, setPos] = useState<{ top: number; left: number } | null>(null);
+
+  useLayoutEffect(() => {
+    const el = menuRef.current;
+    if (!el) return;
+    const { width, height } = el.getBoundingClientRect();
+    const margin = 8;
+    const below = anchor.bottom + 4;
+    // Flip above the trigger rather than overflowing the bottom edge.
+    const top = below + height + margin <= window.innerHeight
+      ? below
+      : Math.max(margin, anchor.top - height - 4);
+    const desiredLeft = anchor.align === 'end' ? anchor.right - width : anchor.left;
+    setPos({
+      top,
+      left: Math.max(margin, Math.min(desiredLeft, window.innerWidth - width - margin)),
+    });
+  }, [anchor]);
+
+  useEffect(() => {
+    const onKeyDown = (e: globalThis.KeyboardEvent) => {
+      if (e.key !== 'Escape') return;
+      e.preventDefault();
+      onClose();
+    };
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [onClose]);
+
+  // Every item closes the menu first: Rename opens an inline editor in the row,
+  // and leaving the menu over it would cover the input.
+  const run = (action?: () => void) => () => {
+    onClose();
+    action?.();
+  };
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-[70]"
+      onClick={onClose}
+      onContextMenu={(e) => {
+        e.preventDefault();
+        onClose();
+      }}
+    >
+      <div
+        ref={menuRef}
+        role="menu"
+        aria-label="Session actions"
+        style={{
+          top: pos?.top ?? anchor.bottom + 4,
+          left: pos?.left ?? anchor.left,
+          // Hidden for the single pre-measure render; `useLayoutEffect` settles
+          // the position before the browser paints, so this never flashes.
+          visibility: pos ? 'visible' : 'hidden',
+        }}
+        className="fixed z-[70] w-44 bg-paper border border-ink/15 rounded-lg shadow-xl py-1 text-xs text-ink font-sans"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {onRename && (
+          <button
+            type="button"
+            role="menuitem"
+            onClick={run(onRename)}
+            className="w-full text-left px-3 py-1.5 hover:bg-ink/5 flex items-center gap-2 transition-colors cursor-pointer"
+          >
+            <Pencil size={12} className="text-ink/60" />
+            <span>Rename</span>
+          </button>
+        )}
+        {onArchive && (
+          <button
+            type="button"
+            role="menuitem"
+            onClick={run(onArchive)}
+            className="w-full text-left px-3 py-1.5 hover:bg-ink/5 flex items-center gap-2 transition-colors cursor-pointer"
+          >
+            {isArchived
+              ? <ArchiveRestore size={12} className="text-ink/60" />
+              : <Archive size={12} className="text-ink/60" />}
+            <span>{isArchived ? 'Unarchive' : 'Archive'}</span>
+          </button>
+        )}
+        {(onRename || onArchive) && onDelete && <div className="my-1 border-t border-ink/10" />}
+        {onDelete && (
+          <button
+            type="button"
+            role="menuitem"
+            onClick={run(onDelete)}
+            className="w-full text-left px-3 py-1.5 hover:bg-error/10 text-error flex items-center gap-2 transition-colors cursor-pointer"
+          >
+            <Trash2 size={12} className="text-error" />
+            <span>Delete</span>
+          </button>
+        )}
+      </div>
+    </div>,
+    document.body,
+  );
+}

package/src/client/components/common/session-delete-modal/index.tsx

@@ -0,0 +1,128 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useEffect } from 'preact/hooks';
+import { AlertTriangle, Loader2, Trash2 } from 'lucide-preact';
+import { Modal } from '@/client/components/common/Modal';
+import type { SessionItemData } from '@/shared/types';
+
+export interface SessionDeleteModalProps {
+  /** The session awaiting confirmation, or null when the dialog is closed. */
+  session: SessionItemData | null;
+  /** True while the DELETE request is in flight. */
+  isDeleting: boolean;
+  /** Why the server refused, shown in place of the warning strip. */
+  error: string | null;
+  onClose: () => void;
+  onConfirm: () => void;
+}
+
+/**
+ * Confirmation for deleting a session.
+ *
+ * The dialog names what actually disappears — the transcript on disk, the
+ * subagent transcripts beside it, the side questions asked in it, and the
+ * chamber's own rows for it — because none of it is recoverable from the UI.
+ * That is the whole difference between this button and the archive button next
+ * to it, and a bare "Delete?" would leave the user guessing which one they
+ * pressed.
+ *
+ * A refusal is rendered INSIDE the dialog rather than as a toast: the reasons
+ * the server gives (the session is mid-run, or the chat has not been created
+ * yet) are actionable, and the user is standing in the place where they act on
+ * them.
+ */
+export function SessionDeleteModal({
+  session,
+  isDeleting,
+  error,
+  onClose,
+  onConfirm,
+}: SessionDeleteModalProps) {
+  useEffect(() => {
+    // No dismissing mid-delete: the dialog resolves itself on success, and an
+    // early close would let a second delete be queued against a stale row.
+    const handler = (e: globalThis.KeyboardEvent) => {
+      if (e.key !== 'Escape' || isDeleting) return;
+      e.preventDefault();
+      onClose();
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [onClose, isDeleting]);
+
+  if (!session) return null;
+
+  return (
+    <Modal
+      onClose={isDeleting ? () => {} : onClose}
+      zClass="z-[70]"
+      maxWidthClass="max-w-[460px]"
+      header={
+        <div className="flex items-center gap-3 min-w-0">
+          <Trash2 size={16} className="text-error shrink-0" />
+          <div className="min-w-0">
+            <h2 className="text-sm font-semibold text-ink">Delete session?</h2>
+            <p className="text-[11px] text-ink/50 truncate">{session.title}</p>
+          </div>
+        </div>
+      }
+      footer={
+        <div className="flex items-center justify-end gap-2 px-5 py-3.5 border-t border-ink/10">
+          <button
+            type="button"
+            onClick={onClose}
+            disabled={isDeleting}
+            className="px-3.5 py-1.5 rounded-md border border-ink/20 text-xs font-medium text-ink hover:bg-ink/5 transition-colors cursor-pointer disabled:opacity-50"
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={onConfirm}
+            disabled={isDeleting}
+            className="px-3.5 py-1.5 rounded-md bg-error text-canvas text-xs font-medium hover:opacity-90 transition-opacity cursor-pointer disabled:opacity-50 flex items-center gap-1.5"
+          >
+            {isDeleting ? (
+              <>
+                <Loader2 size={13} className="animate-spin" />
+                <span>Deleting...</span>
+              </>
+            ) : (
+              <>
+                <Trash2 size={13} />
+                <span>Delete session</span>
+              </>
+            )}
+          </button>
+        </div>
+      }
+    >
+      <div className="px-5 py-4 space-y-3">
+        <ul className="text-[11.5px] leading-relaxed text-ink/70 space-y-1.5">
+          <li>
+            Its transcript is removed from{' '}
+            <span className="font-mono text-ink">~/.omp/agent/sessions</span> — the conversation is
+            gone from the sidebar and from oh-my-pi.
+          </li>
+          <li>The subagent transcripts and any side questions asked in it are removed with it.</li>
+          <li>Its queued messages, archive state, and saved panel layout go too.</li>
+        </ul>
+
+        {error ? (
+          <div className="flex items-start gap-2 px-3 py-2 rounded-md border border-error/30 bg-error/5 text-[11px] text-ink/75">
+            <AlertTriangle size={13} className="mt-0.5 shrink-0 text-error" />
+            <span>{error}</span>
+          </div>
+        ) : (
+          <div className="flex items-start gap-2 px-3 py-2 rounded-md border border-error/30 bg-error/5 text-[11px] text-ink/75">
+            <AlertTriangle size={13} className="mt-0.5 shrink-0 text-error" />
+            <span>This cannot be undone from the UI. Archive it instead to keep the transcript.</span>
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+}

package/src/client/components/layout/session-sidebar/CategoryItem.tsx

@@ -5,6 +5,8 @@ import { useFetcher } from '@/client/lib/router/fetcher';
 import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
 import { useShowMore } from '@/client/hooks/ui/show-more';
 import { useWorkspaceFolderActions } from '@/client/hooks/workspace/workspace-folder-actions';
+import { useSessionDelete } from '@/client/hooks/workspace/session-delete';
+import { SessionDeleteModal } from '@/client/components/common/session-delete-modal';
 import { SessionItem } from '@/client/components/layout/session-sidebar/SessionItem';
 import { SubagentList } from '@/client/components/common/subagent-list';
 import { WorkspaceOptionsMenu } from '@/client/components/common/workspace-options-menu';
@@ -58,6 +60,7 @@ export function Category({
     handleArchive,
     handleRename,
   } = useWorkspaceFolderActions(folder, refresh);
+  const sessionDelete = useSessionDelete();
 
   // Desktop's expand toggle keeps its own fetcher: unlike pin/delete it
   // dispatches on the *response* (not immediately) and carries no folderId.
@@ -203,6 +206,13 @@ export function Category({
                   awaitingInput={Boolean(session.awaitingInput)}
                   onClick={() => onSelectSession(session.id)}
                   onArchive={() => handleArchive(session)}
+                  onDelete={
+                    // A pending `new-…` chat has no transcript anywhere yet —
+                    // there is nothing to delete, and the server refuses it.
+                    String(session.id).startsWith('new-')
+                      ? undefined
+                      : () => sessionDelete.requestDelete(session)
+                  }
                   onRename={String(session.id).startsWith('new-') ? undefined : (name) => void handleRename(session, name)}
                   expandable={hasSubagents}
                   hasSubagents={hasSubagents}
@@ -236,6 +246,14 @@ export function Category({
           )}
         </div>
       )}
+
+      <SessionDeleteModal
+        session={sessionDelete.pending}
+        isDeleting={sessionDelete.isDeleting}
+        error={sessionDelete.error}
+        onClose={sessionDelete.cancelDelete}
+        onConfirm={() => void sessionDelete.confirmDelete()}
+      />
     </div>
   );
 }

package/src/client/components/layout/session-sidebar/SessionItem.tsx

@@ -1,6 +1,7 @@
 import type { TargetedMouseEvent } from 'preact';
-import { Archive, ArchiveRestore, Check, ChevronDown, ChevronRight, CircleQuestionMark, Loader2, Pencil } from 'lucide-preact';
+import { Check, ChevronDown, ChevronRight, CircleQuestionMark, Loader2, MoreHorizontal } from 'lucide-preact';
 import { useInlineRename } from '@/client/hooks/ui/inline-rename';
+import { SessionActionsMenu, useRowMenu } from '@/client/components/common/session-actions-menu';
 
 export interface SessionItemProps {
   title: string;
@@ -11,6 +12,9 @@ export interface SessionItemProps {
   awaitingInput?: boolean;
   onClick?: () => void;
   onArchive?: () => void;
+  /** Omitted for a session that cannot be deleted yet (a pending `new-…` chat,
+   *  which has no transcript anywhere). */
+  onDelete?: () => void;
   onRename?: (name: string) => void;
   expandable?: boolean;
   isExpanded?: boolean;
@@ -26,6 +30,7 @@ export function SessionItem({
   awaitingInput = false,
   onClick,
   onArchive,
+  onDelete,
   onRename,
   expandable = false,
   isExpanded = false,
@@ -51,116 +56,121 @@ export function SessionItem({
     handleKeyDown,
     handleBlur,
   } = useInlineRename(title, onRename);
+  // One trigger for every row action; also reachable by right-clicking the row.
+  const menu = useRowMenu();
+  const hasActions = Boolean(onRename || onArchive || onDelete);
 
   return (
-    <div
-      onClick={isEditing ? undefined : onClick}
-      className={`group/item relative flex items-center w-full rounded-lg px-2 py-1.5 cursor-pointer text-xs transition-colors select-none ${
-        isActive
-          ? 'bg-ink/10 font-medium text-ink'
-          : 'text-ink/75 hover:text-ink hover:bg-ink/5'
-      }`}
-    >
-      {/* One 16px slot owns both icons — never two side by side. A live run
-          signal (blocked question, run spinner) holds the slot; otherwise the
-          chevron is pinned, collapsed or expanded. While the signal holds it,
-          hovering hands the slot to the chevron so the roster stays reachable
-          mid-run.
-          Both layers are pointer-inert for the opposite state: the toggle
-          while hidden, the status glyph ALWAYS (it is painted after the
-          toggle, so without that it wins the hit test over the revealed
-          chevron and every click on a badged row selects the session instead
-          of expanding it). */}
-      <span className="relative w-4 h-4 shrink-0">
-        {showChevron && onToggleExpand && (
-          <button
-            type="button"
-            onClick={(e) => {
-              e.stopPropagation();
-              onToggleExpand(e);
-            }}
-            title={isExpanded ? 'Collapse subagents' : 'Expand subagents'}
-            aria-expanded={isExpanded}
-            className={`peer absolute inset-0 flex items-center justify-center rounded cursor-pointer transition-opacity ${
-              chevronPinned
-                ? 'text-ink/60 hover:text-ink'
-                : 'text-ink/40 hover:text-ink pointer-events-none opacity-0 group-hover/item:pointer-events-auto group-hover/item:opacity-100 focus-visible:opacity-100'
-            }`}
-          >
-            {isExpanded ? <ChevronDown size={13} /> : <ChevronRight size={13} />}
-          </button>
-        )}
-        {showStatus && (
-          <span
-            className={`pointer-events-none absolute inset-0 flex items-center justify-center text-ink/60 transition-opacity ${
-              showChevron ? 'group-hover/item:opacity-0 peer-focus-visible:opacity-0' : ''
-            }`}
-          >
-            {/* Waiting on an answer outranks the run spinner: the spinner says
-                work is happening, the question mark says it is YOUR turn. */}
-            {awaitingInput ? (
-              <CircleQuestionMark size={12} className="animate-pulse text-ink/80" />
-            ) : status === 'stream' ? (
-              <Loader2 size={12} className="animate-spin" />
-            ) : (
-              <Check size={12} />
-            )}
-          </span>
-        )}
-      </span>
-
-      {/* Gap between icon and text */}
-      <span className="w-2 shrink-0" />
-
-      {/* Session Title - aligned straight with Folder Name */}
-      {isEditing ? (
-        <input
-          ref={inputRef}
-          autoFocus
-          value={draft}
-          onChange={(e) => setDraft(e.currentTarget.value)}
-          onClick={(e) => e.stopPropagation()}
-          onKeyDown={handleKeyDown}
-          onBlur={handleBlur}
-          className="flex-1 min-w-0 bg-paper border border-ink/25 rounded px-1 py-0.5 text-xs text-ink outline-none focus:border-ink/50"
-        />
-      ) : (
-        <span className="flex-1 min-w-0 truncate leading-snug">
-          {title.charAt(0).toUpperCase() + title.slice(1)}
-        </span>
-      )}
-
-      {/* Quick Actions: Rename / Archive on Hover */}
-      {!isEditing && (onRename || onArchive) && (
-        <div className="absolute right-1.5 top-1/2 -translate-y-1/2 flex items-center gap-0.5 opacity-0 group-hover/item:opacity-100 transition-opacity">
-          {onRename && (
+    <>
+      <div
+        onClick={isEditing ? undefined : onClick}
+        onContextMenu={hasActions && !isEditing ? menu.openAtCursor : undefined}
+        className={`group/item relative flex items-center w-full rounded-lg px-2 py-1.5 cursor-pointer text-xs transition-colors select-none ${
+          isActive
+            ? 'bg-ink/10 font-medium text-ink'
+            : 'text-ink/75 hover:text-ink hover:bg-ink/5'
+        }`}
+      >
+        {/* One 16px slot owns both icons — never two side by side. A live run
+            signal (blocked question, run spinner) holds the slot; otherwise the
+            chevron is pinned, collapsed or expanded. While the signal holds it,
+            hovering hands the slot to the chevron so the roster stays reachable
+            mid-run.
+            Both layers are pointer-inert for the opposite state: the toggle
+            while hidden, the status glyph ALWAYS (it is painted after the
+            toggle, so without that it wins the hit test over the revealed
+            chevron and every click on a badged row selects the session instead
+            of expanding it). */}
+        <span className="relative w-4 h-4 shrink-0">
+          {showChevron && onToggleExpand && (
             <button
               type="button"
               onClick={(e) => {
                 e.stopPropagation();
-                startRename();
+                onToggleExpand(e);
               }}
-              title="Rename session"
-              className="p-1 text-ink/40 hover:text-ink bg-paper/90 hover:bg-ink/10 rounded shadow-xs cursor-pointer"
+              title={isExpanded ? 'Collapse subagents' : 'Expand subagents'}
+              aria-expanded={isExpanded}
+              className={`peer absolute inset-0 flex items-center justify-center rounded cursor-pointer transition-opacity ${
+                chevronPinned
+                  ? 'text-ink/60 hover:text-ink'
+                  : 'text-ink/40 hover:text-ink pointer-events-none opacity-0 group-hover/item:pointer-events-auto group-hover/item:opacity-100 focus-visible:opacity-100'
+              }`}
             >
-              <Pencil size={12} />
+              {isExpanded ? <ChevronDown size={13} /> : <ChevronRight size={13} />}
             </button>
           )}
-          {onArchive && (
-            <button
-              type="button"
-              onClick={(e) => {
-                e.stopPropagation();
-                onArchive();
-              }}
-              title={isArchived ? 'Unarchive session' : 'Archive session'}
-              className="p-1 text-ink/40 hover:text-ink bg-paper/90 hover:bg-ink/10 rounded shadow-xs cursor-pointer"
+          {showStatus && (
+            <span
+              className={`pointer-events-none absolute inset-0 flex items-center justify-center text-ink/60 transition-opacity ${
+                showChevron ? 'group-hover/item:opacity-0 peer-focus-visible:opacity-0' : ''
+              }`}
             >
-              {isArchived ? <ArchiveRestore size={12} /> : <Archive size={12} />}
-            </button>
+              {/* Waiting on an answer outranks the run spinner: the spinner says
+                  work is happening, the question mark says it is YOUR turn. */}
+              {awaitingInput ? (
+                <CircleQuestionMark size={12} className="animate-pulse text-ink/80" />
+              ) : status === 'stream' ? (
+                <Loader2 size={12} className="animate-spin" />
+              ) : (
+                <Check size={12} />
+              )}
+            </span>
           )}
-        </div>
+        </span>
+
+        {/* Gap between icon and text */}
+        <span className="w-2 shrink-0" />
+
+        {/* Session Title - aligned straight with Folder Name */}
+        {isEditing ? (
+          <input
+            ref={inputRef}
+            autoFocus
+            value={draft}
+            onChange={(e) => setDraft(e.currentTarget.value)}
+            onClick={(e) => e.stopPropagation()}
+            onKeyDown={handleKeyDown}
+            onBlur={handleBlur}
+            className="flex-1 min-w-0 bg-paper border border-ink/25 rounded px-1 py-0.5 text-xs text-ink outline-none focus:border-ink/50"
+          />
+        ) : (
+          <span className="flex-1 min-w-0 truncate leading-snug">
+            {title.charAt(0).toUpperCase() + title.slice(1)}
+          </span>
+        )}
+
+        {/* One trigger, whatever the row can do. The three side-by-side hover
+            icons this replaced cost a third of the title's width in a 268px
+            sidebar, and each further action took another slice — the menu grows
+            instead. Revealed on hover/focus; a right-click anywhere on the row
+            opens the same menu. */}
+        {!isEditing && hasActions && (
+          <button
+            type="button"
+            onClick={menu.openBelow}
+            title="Session actions"
+            aria-label="Session actions"
+            aria-haspopup="menu"
+            aria-expanded={menu.anchor !== null}
+            className="shrink-0 p-1 text-ink/40 hover:text-ink hover:bg-ink/10 rounded cursor-pointer transition-opacity opacity-0 group-hover/item:opacity-100 focus-visible:opacity-100"
+          >
+            <MoreHorizontal size={14} />
+          </button>
+        )}
+
+      </div>
+
+      {menu.anchor && (
+        <SessionActionsMenu
+          anchor={menu.anchor}
+          isArchived={isArchived}
+          onRename={onRename ? startRename : undefined}
+          onArchive={onArchive}
+          onDelete={onDelete}
+          onClose={menu.close}
+        />
       )}
-    </div>
+    </>
   );
 }

package/src/client/components/mobile/mobile-session-sidebar/Item.tsx

@@ -7,6 +7,8 @@ import { WorkspaceOptionsMenu } from '@/client/components/common/workspace-optio
 import { useShowMore } from '@/client/hooks/ui/show-more';
 import { useExpandedSessions } from '@/client/hooks/workspace/expanded-sessions';
 import { useWorkspaceFolderActions } from '@/client/hooks/workspace/workspace-folder-actions';
+import { useSessionDelete } from '@/client/hooks/workspace/session-delete';
+import { SessionDeleteModal } from '@/client/components/common/session-delete-modal';
 import { getProjectIcon } from '@/shared/lib/workspace/project-icon';
 import { relativeTimeAgo } from '@/shared/lib/workspace/relative-time';
 import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
@@ -53,6 +55,7 @@ export function MobileSessionCategory({
     handleArchive,
     handleRename,
   } = useWorkspaceFolderActions(folder, refresh);
+  const sessionDelete = useSessionDelete();
 
   useOnClickOutside(menuRef, () => {
     setShowMenu(false);
@@ -195,6 +198,13 @@ export function MobileSessionCategory({
                   onToggleExpand={() => toggleSession(sessionKey)}
                   onSelect={() => onSelectSession(session.id)}
                   onArchive={() => handleArchive(session)}
+                  onDelete={
+                    // A pending `new-…` chat has no transcript anywhere yet —
+                    // there is nothing to delete, and the server refuses it.
+                    sessionKey.startsWith('new-')
+                      ? undefined
+                      : () => sessionDelete.requestDelete(session)
+                  }
                   onRename={sessionKey.startsWith('new-') ? undefined : (name) => void handleRename(session, name)}
                 />
                 {isRosterOpen && (
@@ -216,6 +226,14 @@ export function MobileSessionCategory({
           )}
         </div>
       )}
+
+      <SessionDeleteModal
+        session={sessionDelete.pending}
+        isDeleting={sessionDelete.isDeleting}
+        error={sessionDelete.error}
+        onClose={sessionDelete.cancelDelete}
+        onConfirm={() => void sessionDelete.confirmDelete()}
+      />
     </div>
   );
 }