spiracha 2.0.0 → 2.2.0

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

@@ -1,4 +1,4 @@
-import { useEffect, useId, useState } from 'react';
+import { useEffect, useId, useRef, useState } from 'react';
 import { Button } from '#/components/ui/button';
 import { Checkbox } from '#/components/ui/checkbox';
 import {
@@ -10,6 +10,8 @@ import {
     DialogTitle,
 } from '#/components/ui/dialog';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '#/components/ui/select';
+import type { ExportDialogOptions } from '#/lib/export-options';
+import { useSettings } from '#/lib/settings-store';
 
 type ExportDialogProps = {
     disabled?: boolean;
@@ -17,14 +19,10 @@ type ExportDialogProps = {
     forceZipArchive?: boolean;
     open: boolean;
     pending?: boolean;
+    showCommentaryOption?: boolean;
+    showToolsOption?: boolean;
     title?: string;
-    onExport: (options: {
-        includeCommentary: boolean;
-        includeMetadata: boolean;
-        includeTools: boolean;
-        outputFormat: 'md' | 'txt';
-        zipArchive: boolean;
-    }) => void;
+    onExport: (options: ExportDialogOptions) => void;
     onOpenChange: (open: boolean) => void;
 };
 
@@ -34,27 +32,49 @@ export function ExportDialog({
     forceZipArchive = false,
     open,
     pending = false,
+    showCommentaryOption = true,
+    showToolsOption = true,
     title = 'Export thread',
     onExport,
     onOpenChange,
 }: ExportDialogProps) {
-    const [outputFormat, setOutputFormat] = useState<'md' | 'txt'>('md');
-    const [includeMetadata, setIncludeMetadata] = useState(true);
-    const [includeCommentary, setIncludeCommentary] = useState(false);
-    const [includeTools, setIncludeTools] = useState(true);
-    const [zipArchive, setZipArchive] = useState(false);
-    const effectiveZipArchive = forceZipArchive || zipArchive;
+    const { settings, updateSetting } = useSettings();
+    const [options, setOptions] = useState<ExportDialogOptions>(settings.exportDefaults);
+    const [submitted, setSubmitted] = useState(false);
+    const submissionInProgress = useRef(false);
+    const previousPending = useRef(pending);
+    const effectiveZipArchive = forceZipArchive || options.zipArchive;
     const zipDescriptionId = useId();
 
     useEffect(() => {
         if (!open) {
-            setOutputFormat('md');
-            setIncludeMetadata(true);
-            setIncludeCommentary(false);
-            setIncludeTools(true);
-            setZipArchive(false);
+            setOptions(settings.exportDefaults);
+            setSubmitted(false);
+            submissionInProgress.current = false;
         }
-    }, [open]);
+    }, [open, settings.exportDefaults]);
+
+    useEffect(() => {
+        if ((previousPending.current && !pending) || errorMessage) {
+            setSubmitted(false);
+            submissionInProgress.current = false;
+        }
+        previousPending.current = pending;
+    }, [errorMessage, pending]);
+
+    const updateOption = <K extends keyof ExportDialogOptions>(key: K, value: ExportDialogOptions[K]) => {
+        setOptions((current) => ({ ...current, [key]: value }));
+    };
+
+    const submitExport = () => {
+        if (submissionInProgress.current) {
+            return;
+        }
+        submissionInProgress.current = true;
+        setSubmitted(true);
+        updateSetting('exportDefaults', options);
+        onExport({ ...options, zipArchive: effectiveZipArchive });
+    };
 
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
@@ -62,7 +82,7 @@ export function ExportDialog({
                 <DialogHeader>
                     <DialogTitle>{title}</DialogTitle>
                     <DialogDescription className="text-[var(--muted-foreground)]">
-                        Choose the transcript format and whether the export includes tool calls.
+                        Choose the transcript format and export options.
                     </DialogDescription>
                 </DialogHeader>
 
@@ -71,7 +91,10 @@ export function ExportDialog({
                         <label className="font-medium text-sm" htmlFor="output-format">
                             Output format
                         </label>
-                        <Select value={outputFormat} onValueChange={(value) => setOutputFormat(value as 'md' | 'txt')}>
+                        <Select
+                            value={options.outputFormat}
+                            onValueChange={(value) => updateOption('outputFormat', value as 'md' | 'txt')}
+                        >
                             <SelectTrigger
                                 id="output-format"
                                 className="border-[var(--border)] bg-[var(--panel-secondary)] text-[var(--foreground)]"
@@ -79,18 +102,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>
@@ -98,8 +111,8 @@ export function ExportDialog({
                     <div className="flex items-center gap-3 rounded-2xl border border-[var(--border)] bg-[var(--panel-secondary)] p-3">
                         <Checkbox
                             aria-label="Include metadata"
-                            checked={includeMetadata}
-                            onCheckedChange={(checked) => setIncludeMetadata(checked === true)}
+                            checked={options.includeMetadata}
+                            onCheckedChange={(checked) => updateOption('includeMetadata', checked === true)}
                         />
                         <span className="space-y-1">
                             <span className="block font-medium text-sm">Include metadata</span>
@@ -109,33 +122,37 @@ export function ExportDialog({
                         </span>
                     </div>
 
-                    <div className="flex items-center gap-3 rounded-2xl border border-[var(--border)] bg-[var(--panel-secondary)] p-3">
-                        <Checkbox
-                            aria-label="Include commentary"
-                            checked={includeCommentary}
-                            onCheckedChange={(checked) => setIncludeCommentary(checked === true)}
-                        />
-                        <span className="space-y-1">
-                            <span className="block font-medium text-sm">Include commentary</span>
-                            <span className="block text-[var(--muted-foreground)] text-sm">
-                                Includes assistant commentary-phase updates in the exported transcript.
+                    {showCommentaryOption ? (
+                        <div className="flex items-center gap-3 rounded-2xl border border-[var(--border)] bg-[var(--panel-secondary)] p-3">
+                            <Checkbox
+                                aria-label="Include commentary"
+                                checked={options.includeCommentary}
+                                onCheckedChange={(checked) => updateOption('includeCommentary', checked === true)}
+                            />
+                            <span className="space-y-1">
+                                <span className="block font-medium text-sm">Include commentary</span>
+                                <span className="block text-[var(--muted-foreground)] text-sm">
+                                    Includes assistant commentary-phase updates in the exported transcript.
+                                </span>
                             </span>
-                        </span>
-                    </div>
+                        </div>
+                    ) : null}
 
-                    <div className="flex items-center gap-3 rounded-2xl border border-[var(--border)] bg-[var(--panel-secondary)] p-3">
-                        <Checkbox
-                            aria-label="Include tool calls"
-                            checked={includeTools}
-                            onCheckedChange={(checked) => setIncludeTools(checked === true)}
-                        />
-                        <span className="space-y-1">
-                            <span className="block font-medium text-sm">Include tool calls</span>
-                            <span className="block text-[var(--muted-foreground)] text-sm">
-                                Includes tool-call summaries and tool-output summaries in the export.
+                    {showToolsOption ? (
+                        <div className="flex items-center gap-3 rounded-2xl border border-[var(--border)] bg-[var(--panel-secondary)] p-3">
+                            <Checkbox
+                                aria-label="Include tool calls"
+                                checked={options.includeTools}
+                                onCheckedChange={(checked) => updateOption('includeTools', checked === true)}
+                            />
+                            <span className="space-y-1">
+                                <span className="block font-medium text-sm">Include tool calls</span>
+                                <span className="block text-[var(--muted-foreground)] text-sm">
+                                    Includes tool-call summaries and tool-output summaries in the export.
+                                </span>
                             </span>
-                        </span>
-                    </div>
+                        </div>
+                    ) : null}
 
                     <div className="flex items-center gap-3 rounded-2xl border border-[var(--border)] bg-[var(--panel-secondary)] p-3">
                         <Checkbox
@@ -143,7 +160,7 @@ export function ExportDialog({
                             aria-describedby={zipDescriptionId}
                             checked={effectiveZipArchive}
                             disabled={forceZipArchive}
-                            onCheckedChange={(checked) => setZipArchive(checked === true)}
+                            onCheckedChange={(checked) => updateOption('zipArchive', checked === true)}
                         />
                         <span className="space-y-1">
                             <span className="block font-medium text-sm">Zip archive</span>
@@ -162,19 +179,7 @@ export function ExportDialog({
                     <Button className="rounded-full" variant="outline" onClick={() => onOpenChange(false)}>
                         Cancel
                     </Button>
-                    <Button
-                        className="rounded-full"
-                        disabled={pending || disabled}
-                        onClick={() =>
-                            onExport({
-                                includeCommentary,
-                                includeMetadata,
-                                includeTools,
-                                outputFormat,
-                                zipArchive: effectiveZipArchive,
-                            })
-                        }
-                    >
+                    <Button className="rounded-full" disabled={pending || disabled || submitted} onClick={submitExport}>
                         {pending ? 'Exporting...' : 'Download export'}
                     </Button>
                 </DialogFooter>

package/apps/ui/src/components/grok-sessions-table.tsx

@@ -0,0 +1,146 @@
+import type { GrokSessionSummary } from '@spiracha/lib/grok-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 } 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,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '#/components/ui/dropdown-menu';
+import { formatDateTime, formatNumber } from '#/lib/formatters';
+
+type GrokSessionsTableProps = {
+    onDeleteSession: (session: GrokSessionSummary) => void;
+    onDeleteSessions: (sessionIds: string[]) => void;
+    onExportSession: (session: GrokSessionSummary) => void;
+    onExportSessions: (sessionIds: string[]) => void;
+    sessions: GrokSessionSummary[];
+};
+
+const columnHelper = createColumnHelper<GrokSessionSummary>();
+const defaultSorting: SortingState = [{ desc: true, id: 'lastActive' }];
+
+const columns = (
+    onDeleteSession: (session: GrokSessionSummary) => void,
+    onExportSession: (session: GrokSessionSummary) => void,
+) =>
+    [
+        columnHelper.accessor('title', {
+            cell: (info) => (
+                <Link
+                    className="block w-[16rem] max-w-[22rem] space-y-1 rounded-md outline-none transition hover:opacity-80 focus-visible:ring-2 focus-visible:ring-[var(--accent)] lg:w-auto"
+                    params={{ sessionId: info.row.original.sessionId }}
+                    to="/grok-sessions/$sessionId"
+                >
+                    <p className="truncate font-medium underline-offset-2 hover:underline">{info.getValue()}</p>
+                    <p className="truncate text-[var(--muted-foreground)] text-xs">{info.row.original.sessionId}</p>
+                </Link>
+            ),
+            header: 'Session',
+        }),
+        columnHelper.accessor('lastActiveAtMs', {
+            cell: (info) => (
+                <span className="whitespace-nowrap text-sm" suppressHydrationWarning>
+                    {formatDateTime(info.getValue())}
+                </span>
+            ),
+            header: 'Updated',
+            id: 'lastActive',
+        }),
+        columnHelper.accessor('modelLabel', {
+            cell: (info) => (
+                <span className="text-sm">{info.getValue() ?? info.row.original.currentModelId ?? 'unknown'}</span>
+            ),
+            header: 'Model',
+        }),
+        columnHelper.accessor('agentName', {
+            cell: (info) => <span className="font-mono text-sm">{info.getValue() ?? 'unknown'}</span>,
+            header: 'Agent',
+        }),
+        columnHelper.accessor('messageCount', {
+            cell: (info) => <span className="font-mono text-sm">{formatNumber(info.getValue())}</span>,
+            header: 'Messages',
+        }),
+        columnHelper.accessor('toolCallCount', {
+            cell: (info) => <span className="font-mono text-sm">{formatNumber(info.getValue())}</span>,
+            header: 'Tools',
+        }),
+        columnHelper.display({
+            cell: (info) => (
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <Button
+                            aria-label={`Actions for ${info.row.original.title}`}
+                            className="rounded-full"
+                            size="icon"
+                            type="button"
+                            variant="ghost"
+                            onClick={(event) => event.stopPropagation()}
+                        >
+                            <MoreHorizontal className="size-4" />
+                        </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                        <DropdownMenuItem
+                            disabled={info.row.original.renderablePartCount === 0}
+                            onClick={() => onExportSession(info.row.original)}
+                        >
+                            <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>
+            ),
+            enableSorting: false,
+            header: '',
+            id: 'actions',
+        }),
+    ] as const;
+
+export const GrokSessionsTable = ({
+    onDeleteSession,
+    onDeleteSessions,
+    onExportSession,
+    onExportSessions,
+    sessions,
+}: GrokSessionsTableProps) => {
+    const tableColumns = useMemo(() => columns(onDeleteSession, onExportSession), [onDeleteSession, onExportSession]);
+
+    return (
+        <DataTable
+            columns={tableColumns}
+            data={sessions}
+            emptyMessage="No Grok 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/grok-workspaces-table.tsx

@@ -0,0 +1,53 @@
+import type { GrokWorkspaceGroup } from '@spiracha/lib/grok-exporter-types';
+import { Link } from '@tanstack/react-router';
+import { createColumnHelper } from '@tanstack/react-table';
+import { DataTable } from '#/components/data-table';
+import { formatDateTime, formatNumber } from '#/lib/formatters';
+
+type GrokWorkspacesTableProps = {
+    workspaces: GrokWorkspaceGroup[];
+};
+
+const columnHelper = createColumnHelper<GrokWorkspaceGroup>();
+
+const columns = [
+    columnHelper.accessor('label', {
+        cell: (info) => (
+            <Link
+                className="block w-[16rem] max-w-[22rem] space-y-1 rounded-md outline-none transition hover:opacity-80 focus-visible:ring-2 focus-visible:ring-[var(--accent)] lg:w-auto"
+                params={{ workspaceKey: info.row.original.key }}
+                to="/grok/$workspaceKey"
+            >
+                <p className="truncate font-medium underline-offset-2 hover:underline">{info.getValue()}</p>
+                <p className="truncate text-[var(--muted-foreground)] text-xs">{info.row.original.worktree}</p>
+            </Link>
+        ),
+        header: 'Workspace',
+    }),
+    columnHelper.accessor('sessionCount', {
+        cell: (info) => <span className="font-mono text-sm">{formatNumber(info.getValue())}</span>,
+        header: 'Sessions',
+    }),
+    columnHelper.accessor('messageCount', {
+        cell: (info) => <span className="font-mono text-sm">{formatNumber(info.getValue())}</span>,
+        header: 'Messages',
+    }),
+    columnHelper.accessor('toolCallCount', {
+        cell: (info) => <span className="font-mono text-sm">{formatNumber(info.getValue())}</span>,
+        header: 'Tools',
+    }),
+    columnHelper.accessor('lastActiveAtMs', {
+        cell: (info) => (
+            <span className="whitespace-nowrap text-sm" suppressHydrationWarning>
+                {formatDateTime(info.getValue())}
+            </span>
+        ),
+        header: 'Last updated',
+    }),
+] as const;
+
+export const GrokWorkspacesTable = ({ workspaces }: GrokWorkspacesTableProps) => {
+    return (
+        <DataTable columns={columns} data={workspaces} emptyMessage="No Grok workspaces match the current search." />
+    );
+};

package/apps/ui/src/components/kiro-sessions-table.tsx

@@ -2,9 +2,10 @@ import type { KiroSessionSummary } from '@spiracha/lib/kiro-exporter-types';
 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 } from '#/lib/formatters';
 
 type KiroSessionsTableProps = {
+    onDeleteSession: (session: KiroSessionSummary) => void;
+    onDeleteSessions: (sessionIds: string[]) => void;
     onExportSession: (session: KiroSessionSummary) => void;
+    onExportSessions: (sessionIds: string[]) => void;
     sessions: KiroSessionSummary[];
 };
 
 const columnHelper = createColumnHelper<KiroSessionSummary>();
 const defaultSorting: SortingState = [{ desc: true, id: 'lastActive' }];
 
-const columns = (onExportSession: (session: KiroSessionSummary) => void) =>
+const columns = (
+    onDeleteSession: (session: KiroSessionSummary) => void,
+    onExportSession: (session: KiroSessionSummary) => void,
+) =>
     [
         columnHelper.accessor('title', {
             cell: (info) => (
@@ -89,6 +96,13 @@ const columns = (onExportSession: (session: KiroSessionSummary) => 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>
             ),
@@ -98,15 +112,37 @@ const columns = (onExportSession: (session: KiroSessionSummary) => void) =>
         }),
     ] as const;
 
-export const KiroSessionsTable = ({ onExportSession, sessions }: KiroSessionsTableProps) => {
-    const tableColumns = useMemo(() => columns(onExportSession), [onExportSession]);
+export const KiroSessionsTable = ({
+    onDeleteSession,
+    onDeleteSessions,
+    onExportSession,
+    onExportSessions,
+    sessions,
+}: KiroSessionsTableProps) => {
+    const tableColumns = useMemo(() => columns(onDeleteSession, onExportSession), [onDeleteSession, onExportSession]);
 
     return (
         <DataTable
             columns={tableColumns}
             data={sessions}
             emptyMessage="No Kiro 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/opencode-sessions-table.tsx

@@ -2,9 +2,10 @@ import type { OpenCodeSessionSummary } from '@spiracha/lib/opencode-exporter-typ
 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 { Badge } from '#/components/ui/badge';
 import { Button } from '#/components/ui/button';
 import {
@@ -16,7 +17,10 @@ import {
 import { formatDateTime, formatNumber, formatTokens } from '#/lib/formatters';
 
 type OpenCodeSessionsTableProps = {
+    onDeleteSession: (session: OpenCodeSessionSummary) => void;
+    onDeleteSessions: (sessionIds: string[]) => void;
     onExportSession: (session: OpenCodeSessionSummary) => void;
+    onExportSessions: (sessionIds: string[]) => void;
     sessions: OpenCodeSessionSummary[];
 };
 
@@ -31,7 +35,10 @@ const formatCost = (value: number) => {
     return `$${value.toFixed(value < 0.01 ? 4 : 2)}`;
 };
 
-const columns = (onExportSession: (session: OpenCodeSessionSummary) => void) =>
+const columns = (
+    onDeleteSession: (session: OpenCodeSessionSummary) => void,
+    onExportSession: (session: OpenCodeSessionSummary) => void,
+) =>
     [
         columnHelper.accessor('title', {
             cell: (info) => (
@@ -105,6 +112,13 @@ const columns = (onExportSession: (session: OpenCodeSessionSummary) => 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>
             ),
@@ -114,15 +128,37 @@ const columns = (onExportSession: (session: OpenCodeSessionSummary) => void) =>
         }),
     ] as const;
 
-export const OpenCodeSessionsTable = ({ onExportSession, sessions }: OpenCodeSessionsTableProps) => {
-    const tableColumns = useMemo(() => columns(onExportSession), [onExportSession]);
+export const OpenCodeSessionsTable = ({
+    onDeleteSession,
+    onDeleteSessions,
+    onExportSession,
+    onExportSessions,
+    sessions,
+}: OpenCodeSessionsTableProps) => {
+    const tableColumns = useMemo(() => columns(onDeleteSession, onExportSession), [onDeleteSession, onExportSession]);
 
     return (
         <DataTable
             columns={tableColumns}
             data={sessions}
             emptyMessage="No OpenCode 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/page-header.tsx

@@ -5,10 +5,12 @@ type PageHeaderProps = {
     breadcrumb?: ReactNode;
     eyebrow?: string;
     subtitle?: string;
-    title: string;
+    title?: string;
 };
 
 export function PageHeader({ actions, breadcrumb, eyebrow, subtitle, title }: PageHeaderProps) {
+    const hasHeading = Boolean(title || subtitle);
+
     return (
         <div className="flex flex-col gap-4 border-[var(--border)] border-b pb-5 sm:flex-row sm:items-end sm:justify-between">
             <div className="space-y-2">
@@ -18,14 +20,18 @@ export function PageHeader({ actions, breadcrumb, eyebrow, subtitle, title }: Pa
                         {eyebrow}
                     </p>
                 ) : null}
-                <div>
-                    <h2 className="font-semibold text-2xl tracking-[-0.03em] sm:text-[2rem]">{title}</h2>
-                    {subtitle ? (
-                        <p className="mt-2 max-w-[60rem] whitespace-pre-wrap break-words text-[var(--muted-foreground)] text-sm">
-                            {subtitle}
-                        </p>
-                    ) : null}
-                </div>
+                {hasHeading ? (
+                    <div>
+                        {title ? (
+                            <h2 className="font-semibold text-2xl tracking-[-0.03em] sm:text-[2rem]">{title}</h2>
+                        ) : null}
+                        {subtitle ? (
+                            <p className="mt-2 max-w-[60rem] whitespace-pre-wrap break-words text-[var(--muted-foreground)] text-sm">
+                                {subtitle}
+                            </p>
+                        ) : null}
+                    </div>
+                ) : null}
             </div>
             {actions ? <div className="flex flex-wrap items-center gap-2">{actions}</div> : null}
         </div>