spiracha 2.0.0 → 2.1.0

package/README.md

@@ -7,7 +7,7 @@
 [![license](https://img.shields.io/npm/l/spiracha)](LICENSE.md)
 [![runtime](https://img.shields.io/badge/runtime-Bun-000000?logo=bun)](https://bun.sh)
 
-Spiracha is a local TanStack Start app for browsing and exporting agent conversation history from Codex, Claude Code, Kiro, Qoder, Cursor, Antigravity, and OpenCode.
+Spiracha is a local TanStack Start app for browsing and exporting agent conversation history from Codex, Claude Code, Grok, Kiro, Qoder, Cursor, Antigravity, and OpenCode.
 
 The legacy CLI, MCP server, and Codex plugin surfaces have been removed in the 2.0 hard cut. Spiracha now exposes the UI and a stable local data API; client-specific workflows such as review collection belong in the client that calls the API.
 
@@ -54,11 +54,16 @@ GET  /api/v1/conversations?cwd=/absolute/project&include_messages=true
 POST /api/v1/conversation-query
 GET  /api/v1/conversations/:source/:id
 GET  /api/v1/conversations/:source/:id/export
+DELETE /api/v1/conversations/:source/:id
+POST /api/v1/conversations/delete
+POST /api/v1/conversations/export
 GET  /api/v1/resolve?ref=<url-or-deeplink>
 ```
 
 The default list selector is `last_final_answer`, which keeps `fgh --collect` style clients fast and small. Use `message_selector=all` when a client needs the full normalized thread.
 
+Batch delete requires an explicit source and ID list. It returns `deletedIds`, `missingIds`, and a result for each requested ID, so partial success is represented in a `200` response body. Batch export also requires an explicit source and ID list, but is atomic: any missing ID returns an error instead of a partial archive.
+
 Example:
 
 ```bash

package/apps/ui/README.md

@@ -1,6 +1,6 @@
 # Spiracha UI
 
-The browser UI for browsing local Codex, Claude Code, Kiro, Qoder, Cursor, Antigravity, and OpenCode history, inspecting transcript details, exporting chats, and analyzing Codex usage patterns.
+The browser UI for browsing local Codex, Claude Code, Grok, Kiro, Qoder, Cursor, Antigravity, and OpenCode history, inspecting transcript details, exporting chats, and analyzing Codex usage patterns.
 
 ## Stack
 
@@ -18,9 +18,11 @@ The browser UI for browsing local Codex, Claude Code, Kiro, Qoder, Cursor, Antig
 - lists derived Codex projects from the Codex SQLite database
 - lists Codex threads within a project in chronological order
 - shows Codex thread timelines, tool calls, metadata, and raw event context
-- exports Codex, Claude Code, Kiro, Qoder, Cursor, and OpenCode sessions or threads as Markdown, plain text, or optional zip archives with optional metadata, commentary, and tool-call inclusion
+- exports Codex, Claude Code, Grok, Kiro, Qoder, Cursor, and OpenCode sessions or threads as Markdown, plain text, or optional zip archives with optional metadata, commentary, and tool-call inclusion
 - lists Claude Code workspaces and sessions from local `~/.claude/projects` JSONL files
 - shows dedicated Claude Code session detail pages with reasoning, tool calls, token metadata, and export actions
+- lists Grok workspaces and sessions from local Grok session archives
+- shows dedicated Grok session detail pages with compacted-history recovery, tool calls, metadata, export, and delete actions
 - lists Kiro workspaces and sessions from local Kiro workspace session files
 - shows dedicated Kiro session detail pages with image attachments, prompt logs, execution-derived tool calls, metadata, and export actions
 - lists Qoder workspaces and sessions from local Qoder history and checkpoint storage
@@ -67,9 +69,15 @@ Runtime configuration is intentionally small:
 - `SPIRACHA_ANALYTICS_TRANSCRIPT_CONCURRENCY`
   - Optional positive integer for Codex analytics transcript parsing concurrency.
   - Defaults to `8`.
+- `SPIRACHA_TRANSCRIPT_LOAD_CONCURRENCY`
+  - Optional positive integer for detail-page transcript loading concurrency across sources.
+  - Defaults to `3` and is capped at `16` to protect the server from excessive parallel disk and database work.
 - `SPIRACHA_CLAUDE_CODE_PROJECTS_DIR`
   - Optional absolute path to the Claude Code projects directory.
   - If unset, Spiracha reads `${SPIRACHA_CLAUDE_CODE_DATA_DIR:-~/.claude}/projects`. `SPIRACHA_CLAUDE_CODE_DIR` and `SPIRACHA_CLAUDE_HOME` are also accepted aliases for the Claude Code data directory.
+- `SPIRACHA_GROK_SESSIONS_DIR`
+  - Optional path to the Grok sessions directory.
+  - If unset, Spiracha reads `${SPIRACHA_GROK_HOME:-~/.grok}/sessions`. `SPIRACHA_GROK_DIR` is accepted as a Grok home-directory alias.
 - `SPIRACHA_KIRO_WORKSPACE_SESSIONS_DIR`
   - Optional absolute path to the Kiro workspace sessions directory.
   - If unset, Spiracha reads `${SPIRACHA_KIRO_DATA_DIR:-~/Library/Application Support/Kiro/User/globalStorage/kiro.kiroagent}/workspace-sessions`. `SPIRACHA_KIRO_AGENT_DIR` and `SPIRACHA_KIRO_DIR` are also accepted aliases for the Kiro data directory.
@@ -82,6 +90,9 @@ Runtime configuration is intentionally small:
 - `SPIRACHA_OPENCODE_DB`
   - Optional absolute path to the OpenCode SQLite database.
   - If unset, Spiracha reads `${SPIRACHA_OPENCODE_DATA_DIR:-${XDG_DATA_HOME:-~/.local/share}/opencode}/opencode.db`. `SPIRACHA_OPENCODE_DIR` is also accepted as an OpenCode data-directory alias.
+- `SPIRACHA_OPENCODE_DB_CONCURRENCY`
+  - Optional positive integer for concurrent OpenCode database reads.
+  - Defaults to `2`.
 - `SPIRACHA_CURSOR_USER_DIR`
   - Optional absolute path to Cursor's `User` directory.
   - If unset, Spiracha reads the platform default Cursor user-data directory.
@@ -100,6 +111,7 @@ Default source locations:
 | --- | --- | --- |
 | Codex | shared Codex DB probe list | `SPIRACHA_CODEX_DB` |
 | Claude Code | `~/.claude/projects` | `SPIRACHA_CLAUDE_CODE_PROJECTS_DIR` |
+| Grok | `~/.grok/sessions` | `SPIRACHA_GROK_SESSIONS_DIR`, `SPIRACHA_GROK_HOME` |
 | Kiro | `~/Library/Application Support/Kiro/User/globalStorage/kiro.kiroagent/workspace-sessions` | `SPIRACHA_KIRO_WORKSPACE_SESSIONS_DIR` |
 | Qoder | `~/Library/Application Support/Qoder/User/globalStorage/state.vscdb` + `~/Library/Application Support/Qoder/User/workspaceStorage` | `SPIRACHA_QODER_GLOBAL_STATE_DB`, `SPIRACHA_QODER_WORKSPACE_STORAGE_DIR` |
 | Cursor | `~/Library/Application Support/Cursor/User` on macOS | `SPIRACHA_CURSOR_USER_DIR`, `SPIRACHA_CURSOR_PROJECTS_DIR` |
@@ -125,6 +137,12 @@ Transcript detail pages expose the same display controls across sources: user me
   - Claude Code workspace session listing
 - `/claude-code-sessions/$sessionId`
   - Claude Code session detail and export
+- `/grok`
+  - Grok workspace inventory and search
+- `/grok/$workspaceKey`
+  - Grok workspace session listing
+- `/grok-sessions/$sessionId`
+  - Grok session detail, export, and delete
 - `/kiro`
   - Kiro workspace inventory and search
 - `/kiro/$workspaceKey`

package/apps/ui/package.json

@@ -3,8 +3,8 @@
         "@tailwindcss/vite": "4.3.1",
         "@tanstack/match-sorter-utils": "8.19.4",
         "@tanstack/react-devtools": "0.10.5",
-        "@tanstack/react-query": "5.101.0",
-        "@tanstack/react-query-devtools": "5.101.0",
+        "@tanstack/react-query": "5.101.2",
+        "@tanstack/react-query-devtools": "5.101.2",
         "@tanstack/react-router": "1.170.15",
         "@tanstack/react-router-devtools": "1.167.0",
         "@tanstack/react-router-ssr-query": "1.167.1",

package/apps/ui/src/components/antigravity-conversations-table.tsx

@@ -1,10 +1,12 @@
 import type { AntigravityConversation } from '@spiracha/lib/antigravity-exporter-types';
 import type { AntigravityDecryptionState } from '@spiracha/lib/antigravity-keychain';
 import { Link } from '@tanstack/react-router';
+import type { SortingState } from '@tanstack/react-table';
 import { createColumnHelper } from '@tanstack/react-table';
-import { Download, LockKeyhole, MoreHorizontal, ScrollText } from 'lucide-react';
+import { Download, LockKeyhole, MoreHorizontal, ScrollText, Trash2 } from 'lucide-react';
 import { useMemo } from 'react';
 import { DataTable } from '#/components/data-table';
+import { SelectionActionsToolbar } from '#/components/selection-actions-toolbar';
 import { Badge } from '#/components/ui/badge';
 import { Button } from '#/components/ui/button';
 import {
@@ -24,8 +26,11 @@ import { formatBytes, formatDateTime, formatNumber } from '#/lib/formatters';
 type AntigravityConversationsTableProps = {
     conversations: AntigravityConversation[];
     decryptionState: AntigravityDecryptionState | null;
+    onDeleteConversation: (conversation: AntigravityConversation) => void;
+    onDeleteConversations: (conversationIds: string[]) => void;
     onExportArtifacts: (conversation: AntigravityConversation) => void;
     onExportConversation: (conversation: AntigravityConversation) => void;
+    onExportConversations: (conversationIds: string[]) => void;
 };
 
 type ConversationExportState = {
@@ -34,10 +39,10 @@ type ConversationExportState = {
     hasTranscript: boolean;
     lockedTranscript: boolean;
     showConversationAction: boolean;
-    showActions: boolean;
 };
 
 const columnHelper = createColumnHelper<AntigravityConversation>();
+const defaultSorting: SortingState = [{ desc: true, id: 'updatedAt' }];
 
 const getConversationExportState = (
     conversation: AntigravityConversation,
@@ -56,7 +61,6 @@ const getConversationExportState = (
         hasArtifacts,
         hasTranscript,
         lockedTranscript,
-        showActions: showConversationAction || hasArtifacts,
         showConversationAction,
     };
 };
@@ -74,8 +78,17 @@ const getTranscriptLabel = (
     return `${source} · ${status}`;
 };
 
+const getConversationSizeLabel = (conversation: AntigravityConversation): string => {
+    if (conversation.totalBytes > 0) {
+        return formatBytes(conversation.totalBytes);
+    }
+
+    return conversation.summaryPath ? 'Summary' : formatBytes(conversation.totalBytes);
+};
+
 const columns = (
     decryptionState: AntigravityDecryptionState | null,
+    onDeleteConversation: (conversation: AntigravityConversation) => void,
     onExportConversation: (conversation: AntigravityConversation) => void,
     onExportArtifacts: (conversation: AntigravityConversation) => void,
 ) =>
@@ -110,6 +123,7 @@ const columns = (
                 </span>
             ),
             header: 'Updated',
+            id: 'updatedAt',
         }),
         columnHelper.display({
             cell: (info) => {
@@ -130,17 +144,13 @@ const columns = (
             cell: (info) => <span className="font-mono text-sm">{formatNumber(info.getValue())}</span>,
             header: 'Artifacts',
         }),
-        columnHelper.accessor('conversationBytes', {
-            cell: (info) => <span className="font-mono text-sm">{formatBytes(info.getValue())}</span>,
+        columnHelper.accessor('totalBytes', {
+            cell: (info) => <span className="font-mono text-sm">{getConversationSizeLabel(info.row.original)}</span>,
             header: 'Size',
         }),
         columnHelper.display({
             cell: (info) => {
                 const exportState = getConversationExportState(info.row.original, decryptionState);
-                if (!exportState.showActions) {
-                    return <span className="text-[var(--muted-foreground)] text-sm">No export</span>;
-                }
-
                 return (
                     <DropdownMenu>
                         <DropdownMenuTrigger asChild>
@@ -176,6 +186,13 @@ const columns = (
                                     Export artifacts
                                 </DropdownMenuItem>
                             ) : null}
+                            <DropdownMenuItem
+                                className="text-[var(--destructive)]"
+                                onClick={() => onDeleteConversation(info.row.original)}
+                            >
+                                <Trash2 className="mr-2 size-4" />
+                                Delete conversation
+                            </DropdownMenuItem>
                         </DropdownMenuContent>
                     </DropdownMenu>
                 );
@@ -188,12 +205,15 @@ const columns = (
 export function AntigravityConversationsTable({
     conversations,
     decryptionState,
+    onDeleteConversation,
+    onDeleteConversations,
     onExportArtifacts,
     onExportConversation,
+    onExportConversations,
 }: AntigravityConversationsTableProps) {
     const tableColumns = useMemo(
-        () => columns(decryptionState, onExportConversation, onExportArtifacts),
-        [decryptionState, onExportArtifacts, onExportConversation],
+        () => columns(decryptionState, onDeleteConversation, onExportConversation, onExportArtifacts),
+        [decryptionState, onDeleteConversation, onExportArtifacts, onExportConversation],
     );
 
     return (
@@ -201,6 +221,25 @@ export function AntigravityConversationsTable({
             columns={tableColumns}
             data={conversations}
             emptyMessage="No Antigravity conversations match the current workspace filter."
+            enableRowSelection
+            getRowId={(row) => row.conversationId}
+            initialSorting={defaultSorting}
+            renderToolbar={({ clearSelection, selectedRows }) => {
+                const selectedConversationIds = selectedRows.map((row) => row.conversationId);
+                const hasNonExportableSelection = selectedRows.some(
+                    (row) => !getConversationExportState(row, decryptionState).canExportConversation,
+                );
+                return (
+                    <SelectionActionsToolbar
+                        clearSelection={clearSelection}
+                        exportDisabled={hasNonExportableSelection}
+                        itemLabel="conversation"
+                        selectedCount={selectedRows.length}
+                        onDeleteSelected={() => onDeleteConversations(selectedConversationIds)}
+                        onExportSelected={() => onExportConversations(selectedConversationIds)}
+                    />
+                );
+            }}
         />
     );
 }

package/apps/ui/src/components/antigravity-workspaces-table.tsx

@@ -38,7 +38,7 @@ const columns = [
         cell: (info) => <span className="font-mono text-sm">{formatNumber(info.getValue())}</span>,
         header: 'Artifacts',
     }),
-    columnHelper.accessor('conversationBytes', {
+    columnHelper.accessor('totalBytes', {
         cell: (info) => <span className="font-mono text-sm">{formatBytes(info.getValue())}</span>,
         header: 'Size',
     }),

package/apps/ui/src/components/app-shell.tsx

@@ -32,6 +32,7 @@ const navItems: readonly NavItem[] = [
         label: 'Claude Code',
         to: '/claude-code',
     },
+    { activePrefixes: ['/grok', '/grok-sessions'], icon: Bot, label: 'Grok', to: '/grok' },
     { activePrefixes: ['/kiro', '/kiro-sessions'], icon: BrainCircuit, label: 'Kiro', to: '/kiro' },
     { activePrefixes: ['/qoder', '/qoder-sessions'], icon: Workflow, label: 'Qoder', to: '/qoder' },
     {

package/apps/ui/src/components/breadcrumbs.tsx

@@ -5,11 +5,15 @@ import type { ReactNode } from 'react';
 type BreadcrumbItem =
     | {
           label: string;
+          title?: string;
+          truncate?: boolean;
       }
     | {
           label: string;
           params?: Record<string, string>;
+          title?: string;
           to: string;
+          truncate?: boolean;
       };
 
 type BreadcrumbsProps = {
@@ -20,27 +24,41 @@ const isLinkItem = (item: BreadcrumbItem): item is Extract<BreadcrumbItem, { to:
     return 'to' in item;
 };
 
+const classNames = (...values: string[]) => values.filter(Boolean).join(' ');
+
 export const Breadcrumbs = ({ items }: BreadcrumbsProps) => {
     return (
         <nav aria-label="Breadcrumb" className="flex flex-wrap items-center gap-1 text-sm">
             {items.map((item, index) => {
+                const title = item.title ?? (item.truncate ? item.label : undefined);
+                const truncateClassName = item.truncate
+                    ? 'inline-block max-w-[min(34rem,62vw)] truncate align-bottom'
+                    : '';
                 const content: ReactNode = isLinkItem(item) ? (
                     <Link
-                        className="text-[var(--muted-foreground)] transition hover:text-[var(--foreground)]"
+                        className={classNames(
+                            truncateClassName,
+                            'text-[var(--muted-foreground)] transition hover:text-[var(--foreground)]',
+                        )}
                         params={item.params}
+                        title={title}
                         to={item.to}
                     >
                         {item.label}
                     </Link>
                 ) : (
-                    <span aria-current="page" className="font-medium text-[var(--foreground)]">
+                    <span
+                        aria-current="page"
+                        className={classNames(truncateClassName, 'font-medium text-[var(--foreground)]')}
+                        title={title}
+                    >
                         {item.label}
                     </span>
                 );
 
                 return (
                     <div
-                        className="flex items-center gap-1"
+                        className="flex min-w-0 items-center gap-1"
                         key={isLinkItem(item) ? `${item.label}-${item.to}-${index}` : `${item.label}-current-${index}`}
                     >
                         {index > 0 ? <ChevronRight className="size-3.5 text-[var(--muted-foreground)]" /> : null}

package/apps/ui/src/components/claude-code-sessions-table.tsx

@@ -2,9 +2,10 @@ import type { ClaudeCodeSessionSummary } from '@spiracha/lib/claude-code-exporte
 import { Link } from '@tanstack/react-router';
 import type { SortingState } from '@tanstack/react-table';
 import { createColumnHelper } from '@tanstack/react-table';
-import { Download, MoreHorizontal } from 'lucide-react';
+import { Download, MoreHorizontal, Trash2 } from 'lucide-react';
 import { useMemo } from 'react';
 import { DataTable } from '#/components/data-table';
+import { SelectionActionsToolbar } from '#/components/selection-actions-toolbar';
 import { Button } from '#/components/ui/button';
 import {
     DropdownMenu,
@@ -15,14 +16,20 @@ import {
 import { formatDateTime, formatNumber, formatTokens } from '#/lib/formatters';
 
 type ClaudeCodeSessionsTableProps = {
+    onDeleteSession: (session: ClaudeCodeSessionSummary) => void;
+    onDeleteSessions: (sessionIds: string[]) => void;
     onExportSession: (session: ClaudeCodeSessionSummary) => void;
+    onExportSessions: (sessionIds: string[]) => void;
     sessions: ClaudeCodeSessionSummary[];
 };
 
 const columnHelper = createColumnHelper<ClaudeCodeSessionSummary>();
 const defaultSorting: SortingState = [{ desc: true, id: 'lastActive' }];
 
-const columns = (onExportSession: (session: ClaudeCodeSessionSummary) => void) =>
+const columns = (
+    onDeleteSession: (session: ClaudeCodeSessionSummary) => void,
+    onExportSession: (session: ClaudeCodeSessionSummary) => void,
+) =>
     [
         columnHelper.accessor('title', {
             cell: (info) => (
@@ -39,8 +46,8 @@ const columns = (onExportSession: (session: ClaudeCodeSessionSummary) => void) =
         }),
         columnHelper.accessor('lastActiveAtMs', {
             cell: (info) => (
-                <span className="whitespace-nowrap text-sm">
-                    {formatDateTime(info.getValue(), { timeZone: 'UTC' })}
+                <span className="whitespace-nowrap text-sm" suppressHydrationWarning>
+                    {formatDateTime(info.getValue())}
                 </span>
             ),
             header: 'Updated',
@@ -91,6 +98,13 @@ const columns = (onExportSession: (session: ClaudeCodeSessionSummary) => void) =
                             <Download className="mr-2 size-4" />
                             Export session
                         </DropdownMenuItem>
+                        <DropdownMenuItem
+                            className="text-[var(--destructive)]"
+                            onClick={() => onDeleteSession(info.row.original)}
+                        >
+                            <Trash2 className="mr-2 size-4" />
+                            Delete session
+                        </DropdownMenuItem>
                     </DropdownMenuContent>
                 </DropdownMenu>
             ),
@@ -100,15 +114,37 @@ const columns = (onExportSession: (session: ClaudeCodeSessionSummary) => void) =
         }),
     ] as const;
 
-export function ClaudeCodeSessionsTable({ onExportSession, sessions }: ClaudeCodeSessionsTableProps) {
-    const tableColumns = useMemo(() => columns(onExportSession), [onExportSession]);
+export function ClaudeCodeSessionsTable({
+    onDeleteSession,
+    onDeleteSessions,
+    onExportSession,
+    onExportSessions,
+    sessions,
+}: ClaudeCodeSessionsTableProps) {
+    const tableColumns = useMemo(() => columns(onDeleteSession, onExportSession), [onDeleteSession, onExportSession]);
 
     return (
         <DataTable
             columns={tableColumns}
             data={sessions}
             emptyMessage="No Claude Code sessions match the current workspace filter."
+            enableRowSelection
+            getRowId={(row) => row.sessionId}
             initialSorting={defaultSorting}
+            renderToolbar={({ clearSelection, selectedRows }) => {
+                const selectedSessionIds = selectedRows.map((row) => row.sessionId);
+                const hasEmptySelection = selectedRows.some((row) => row.renderablePartCount === 0);
+                return (
+                    <SelectionActionsToolbar
+                        clearSelection={clearSelection}
+                        exportDisabled={hasEmptySelection}
+                        itemLabel="session"
+                        selectedCount={selectedRows.length}
+                        onDeleteSelected={() => onDeleteSessions(selectedSessionIds)}
+                        onExportSelected={() => onExportSessions(selectedSessionIds)}
+                    />
+                );
+            }}
         />
     );
 }

package/apps/ui/src/components/claude-code-workspaces-table.tsx

@@ -38,7 +38,9 @@ const columns = [
     }),
     columnHelper.accessor('lastActiveAtMs', {
         cell: (info) => (
-            <span className="whitespace-nowrap text-sm">{formatDateTime(info.getValue(), { timeZone: 'UTC' })}</span>
+            <span className="whitespace-nowrap text-sm" suppressHydrationWarning>
+                {formatDateTime(info.getValue())}
+            </span>
         ),
         header: 'Last active',
     }),

package/apps/ui/src/components/cursor-threads-table.tsx

@@ -2,9 +2,10 @@ import type { CursorThreadSummary } from '@spiracha/lib/cursor-exporter-types';
 import { Link } from '@tanstack/react-router';
 import type { SortingState } from '@tanstack/react-table';
 import { createColumnHelper } from '@tanstack/react-table';
-import { Download, MoreHorizontal, Trash2, X } from 'lucide-react';
+import { Download, MoreHorizontal, Trash2 } from 'lucide-react';
 import { useMemo } from 'react';
 import { DataTable } from '#/components/data-table';
+import { SelectionActionsToolbar } from '#/components/selection-actions-toolbar';
 import { Button } from '#/components/ui/button';
 import {
     DropdownMenu,
@@ -133,55 +134,17 @@ export const CursorThreadsTable = ({
             getRowId={(row) => row.composerId}
             initialSorting={defaultSorting}
             renderToolbar={({ clearSelection, selectedRows }) => {
-                if (selectedRows.length === 0) {
-                    return (
-                        <p className="text-[var(--muted-foreground)] text-sm">
-                            Select threads to export or delete them in a batch.
-                        </p>
-                    );
-                }
-
                 const selectedComposerIds = selectedRows.map((row) => row.composerId);
                 const hasEmptySelection = selectedRows.some((row) => row.bubbleCount === 0);
                 return (
-                    <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-                        <p className="text-sm">
-                            {selectedRows.length} thread{selectedRows.length === 1 ? '' : 's'} selected
-                        </p>
-                        <div className="flex flex-wrap gap-2">
-                            <Button
-                                className="rounded-full"
-                                disabled={hasEmptySelection}
-                                size="sm"
-                                type="button"
-                                variant="outline"
-                                onClick={() => onExportThreads(selectedComposerIds)}
-                            >
-                                <Download className="mr-2 size-4" />
-                                Export selected threads
-                            </Button>
-                            <Button
-                                className="rounded-full border-[var(--destructive)]/20 text-[var(--destructive)]"
-                                size="sm"
-                                type="button"
-                                variant="outline"
-                                onClick={() => onDeleteThreads(selectedComposerIds)}
-                            >
-                                <Trash2 className="mr-2 size-4" />
-                                Delete selected threads
-                            </Button>
-                            <Button
-                                className="rounded-full"
-                                size="sm"
-                                type="button"
-                                variant="ghost"
-                                onClick={clearSelection}
-                            >
-                                <X className="mr-2 size-4" />
-                                Clear selection
-                            </Button>
-                        </div>
-                    </div>
+                    <SelectionActionsToolbar
+                        clearSelection={clearSelection}
+                        exportDisabled={hasEmptySelection}
+                        itemLabel="thread"
+                        selectedCount={selectedRows.length}
+                        onDeleteSelected={() => onDeleteThreads(selectedComposerIds)}
+                        onExportSelected={() => onExportThreads(selectedComposerIds)}
+                    />
                 );
             }}
         />

package/apps/ui/src/components/data-table.tsx

@@ -9,7 +9,7 @@ import {
     useReactTable,
 } from '@tanstack/react-table';
 import { ArrowDownUp } from 'lucide-react';
-import { type MouseEvent, type ReactNode, useRef, useState } from 'react';
+import { type ReactNode, useRef, useState } from 'react';
 import { Checkbox } from '#/components/ui/checkbox';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '#/components/ui/table';
 import { cn } from '#/lib/utils';
@@ -79,6 +79,7 @@ export function DataTable<TData>({
     const [sorting, setSorting] = useState<SortingState>(initialSorting);
     const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
     const lastSelectedRowIdRef = useRef<string | null>(null);
+    const pendingShiftSelectionRowIdRef = useRef<string | null>(null);
 
     const updateSelectionForRow = (rowId: string, checked: boolean, shiftKey: boolean) => {
         const visibleRowIds = table.getRowModel().rows.map((row) => row.id);
@@ -101,17 +102,18 @@ export function DataTable<TData>({
             <Checkbox
                 aria-label={`Select row ${row.id}`}
                 checked={row.getIsSelected()}
-                onClick={(event: MouseEvent<HTMLButtonElement>) => {
+                onPointerDown={(event) => {
                     event.stopPropagation();
-                    event.preventDefault();
-                    updateSelectionForRow(row.id, !row.getIsSelected(), event.shiftKey);
+                    pendingShiftSelectionRowIdRef.current = event.shiftKey ? row.id : null;
                 }}
                 onCheckedChange={(checked) => {
                     if (typeof checked !== 'boolean') {
                         return;
                     }
 
-                    updateSelectionForRow(row.id, checked, false);
+                    const shiftKey = pendingShiftSelectionRowIdRef.current === row.id;
+                    pendingShiftSelectionRowIdRef.current = null;
+                    updateSelectionForRow(row.id, checked, shiftKey);
                 }}
             />
         ),

package/apps/ui/src/components/export-dialog.tsx

@@ -79,18 +79,8 @@ export function ExportDialog({
                                 <SelectValue placeholder="Choose a format" />
                             </SelectTrigger>
                             <SelectContent className="border-[var(--border)] bg-[var(--panel)] text-[var(--foreground)] shadow-[var(--panel-shadow)]">
-                                <SelectItem
-                                    className="focus:bg-[var(--panel-secondary)] focus:text-[var(--foreground)] data-[highlighted]:bg-[var(--panel-secondary)] data-[highlighted]:text-[var(--foreground)]"
-                                    value="md"
-                                >
-                                    Markdown (.md)
-                                </SelectItem>
-                                <SelectItem
-                                    className="focus:bg-[var(--panel-secondary)] focus:text-[var(--foreground)] data-[highlighted]:bg-[var(--panel-secondary)] data-[highlighted]:text-[var(--foreground)]"
-                                    value="txt"
-                                >
-                                    Plain text (.txt)
-                                </SelectItem>
+                                <SelectItem value="md">Markdown (.md)</SelectItem>
+                                <SelectItem value="txt">Plain text (.txt)</SelectItem>
                             </SelectContent>
                         </Select>
                     </div>