spiracha 2.0.0 → 2.1.0

package/apps/ui/src/routes/opencode.$workspaceKey.tsx

@@ -1,17 +1,26 @@
 import type { OpenCodeSessionSummary, OpenCodeWorkspaceGroup } from '@spiracha/lib/opencode-exporter-types';
-import { useMutation, useSuspenseQuery } from '@tanstack/react-query';
-import { createFileRoute } from '@tanstack/react-router';
-import { useDeferredValue, useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { Trash2 } from 'lucide-react';
+import { useDeferredValue, useMemo, useState } from 'react';
+import { DeleteConfirmDialog } from '#/components/delete-confirm-dialog';
 import { ExportDialog } from '#/components/export-dialog';
 import { ListSearchInput } from '#/components/list-search-input';
 import { LoadingPanel } from '#/components/loading-panel';
 import { OpenCodeSessionsTable } from '#/components/opencode-sessions-table';
 import { PageHeader } from '#/components/page-header';
 import { ReloadErrorPanel } from '#/components/reload-error-panel';
+import { Button } from '#/components/ui/button';
 import { downloadTextFile, downloadUrlFile } from '#/lib/download';
 import { openCodeSessionsQueryOptions, openCodeWorkspacesQueryOptions } from '#/lib/opencode-queries';
-import { exportOpenCodeSessionFn } from '#/lib/opencode-server';
+import {
+    deleteOpenCodeSessionFn,
+    deleteOpenCodeSessionsFn,
+    exportOpenCodeSessionFn,
+    exportOpenCodeSessionsFn,
+} from '#/lib/opencode-server';
 import { matchesTextQuery } from '#/lib/text-filter';
+import { isWorkspaceEmptiedByDelete } from '#/lib/workspace-delete-navigation';
 
 type ExportDialogOptions = {
     includeCommentary: boolean;
@@ -21,23 +30,62 @@ type ExportDialogOptions = {
     zipArchive: boolean;
 };
 
-const findWorkspaceOrThrow = (workspaces: OpenCodeWorkspaceGroup[], workspaceKey: string) => {
-    const workspace = workspaces.find((candidate) => candidate.key === workspaceKey);
-    if (!workspace) {
-        throw new Error(`OpenCode workspace not found: ${workspaceKey}`);
+type PendingSessionDelete = {
+    scope: 'all' | 'selected';
+    sessions: OpenCodeSessionSummary[];
+};
+
+type PendingSessionExport = {
+    label: string;
+    sessionIds: string[];
+};
+
+const buildSessionExport = (selectedSessions: OpenCodeSessionSummary[]): PendingSessionExport => ({
+    label: selectedSessions.length === 1 ? selectedSessions[0]!.title : `${selectedSessions.length} selected sessions`,
+    sessionIds: selectedSessions.map((session) => session.sessionId),
+});
+
+const getDeleteConfirmLabel = (pendingDelete: PendingSessionDelete | null, isPending: boolean) => {
+    if (isPending) {
+        return 'Deleting...';
+    }
+
+    if (pendingDelete?.scope === 'all') {
+        return 'Delete all';
+    }
+
+    return pendingDelete && pendingDelete.sessions.length > 1 ? 'Delete sessions' : 'Delete session';
+};
+
+const getDeleteDescription = (pendingDelete: PendingSessionDelete | null) => {
+    if (!pendingDelete) {
+        return 'Permanently delete the selected OpenCode sessions from the database.';
     }
 
-    return workspace;
+    if (pendingDelete.scope === 'all') {
+        return `Permanently delete all ${pendingDelete.sessions.length} OpenCode sessions in this workspace from the database, including child sessions, messages, and parts.`;
+    }
+
+    if (pendingDelete.sessions.length === 1) {
+        return `Permanently delete "${pendingDelete.sessions[0]!.title}" from OpenCode history. This removes the session, child sessions, messages, and parts from the OpenCode database.`;
+    }
+
+    return `Permanently delete ${pendingDelete.sessions.length} selected OpenCode sessions from the database, including child sessions, messages, and parts.`;
+};
+
+const getDeleteTitle = (pendingDelete: PendingSessionDelete | null) => {
+    if (pendingDelete?.scope === 'all') {
+        return `Delete all ${pendingDelete.sessions.length} OpenCode sessions?`;
+    }
+
+    return pendingDelete && pendingDelete.sessions.length > 1
+        ? `Delete ${pendingDelete.sessions.length} OpenCode sessions?`
+        : 'Delete this OpenCode session?';
 };
 
 export const Route = createFileRoute('/opencode/$workspaceKey')({
     component: OpenCodeWorkspacePage,
     errorComponent: OpenCodeWorkspaceErrorComponent,
-    loader: async ({ context, params }) => {
-        const workspaces = await context.queryClient.ensureQueryData(openCodeWorkspacesQueryOptions());
-        findWorkspaceOrThrow(workspaces, params.workspaceKey);
-        await context.queryClient.ensureQueryData(openCodeSessionsQueryOptions(params.workspaceKey));
-    },
     pendingComponent: () => (
         <LoadingPanel description="Loading OpenCode sessions and transcript metadata." title="Loading workspace" />
     ),
@@ -47,13 +95,52 @@ function OpenCodeWorkspaceErrorComponent({ error }: { error: Error }) {
     return <ReloadErrorPanel description={error.message} title="Failed to load OpenCode workspace" />;
 }
 
+const toError = (error: unknown) => (error instanceof Error ? error : new Error(String(error)));
+
 function OpenCodeWorkspacePage() {
     const params = Route.useParams();
-    const workspaces = useSuspenseQuery(openCodeWorkspacesQueryOptions()).data;
-    const workspace = findWorkspaceOrThrow(workspaces, params.workspaceKey);
-    const sessions = useSuspenseQuery(openCodeSessionsQueryOptions(workspace.key)).data;
+    const workspacesQuery = useQuery(openCodeWorkspacesQueryOptions());
+    const workspaces = workspacesQuery.data ?? [];
+    const workspace = workspaces.find((candidate) => candidate.key === params.workspaceKey) ?? null;
+    const sessionsQuery = useQuery(openCodeSessionsQueryOptions(workspace?.key ?? null));
+
+    if (workspacesQuery.isLoading || (workspace && sessionsQuery.isLoading)) {
+        return (
+            <LoadingPanel description="Loading OpenCode sessions and transcript metadata." title="Loading workspace" />
+        );
+    }
+
+    if (workspacesQuery.isError) {
+        return <OpenCodeWorkspaceErrorComponent error={toError(workspacesQuery.error)} />;
+    }
+
+    if (!workspace) {
+        return (
+            <OpenCodeWorkspaceErrorComponent
+                error={new Error(`OpenCode workspace not found: ${params.workspaceKey}`)}
+            />
+        );
+    }
+
+    if (sessionsQuery.isError) {
+        return <OpenCodeWorkspaceErrorComponent error={toError(sessionsQuery.error)} />;
+    }
+
+    return <OpenCodeWorkspaceContent sessions={sessionsQuery.data ?? []} workspace={workspace} />;
+}
+
+function OpenCodeWorkspaceContent({
+    sessions,
+    workspace,
+}: {
+    sessions: OpenCodeSessionSummary[];
+    workspace: OpenCodeWorkspaceGroup;
+}) {
+    const navigate = useNavigate({ from: Route.fullPath });
+    const queryClient = useQueryClient();
     const [searchInput, setSearchInput] = useState('');
-    const [pendingExport, setPendingExport] = useState<OpenCodeSessionSummary | null>(null);
+    const [pendingDelete, setPendingDelete] = useState<PendingSessionDelete | null>(null);
+    const [pendingExport, setPendingExport] = useState<PendingSessionExport | null>(null);
     const deferredSearch = useDeferredValue(searchInput);
 
     const exportMutation = useMutation({
@@ -62,16 +149,28 @@ function OpenCodeWorkspacePage() {
                 throw new Error('No OpenCode session selected for export');
             }
 
-            const download = await exportOpenCodeSessionFn({
-                data: {
-                    includeCommentary: options.includeCommentary,
-                    includeMetadata: options.includeMetadata,
-                    includeTools: options.includeTools,
-                    outputFormat: options.outputFormat,
-                    sessionId: pendingExport.sessionId,
-                    zipArchive: options.zipArchive,
-                },
-            });
+            const download =
+                pendingExport.sessionIds.length === 1
+                    ? await exportOpenCodeSessionFn({
+                          data: {
+                              includeCommentary: options.includeCommentary,
+                              includeMetadata: options.includeMetadata,
+                              includeTools: options.includeTools,
+                              outputFormat: options.outputFormat,
+                              sessionId: pendingExport.sessionIds[0]!,
+                              zipArchive: options.zipArchive,
+                          },
+                      })
+                    : await exportOpenCodeSessionsFn({
+                          data: {
+                              includeCommentary: options.includeCommentary,
+                              includeMetadata: options.includeMetadata,
+                              includeTools: options.includeTools,
+                              outputFormat: options.outputFormat,
+                              sessionIds: pendingExport.sessionIds,
+                              zipArchive: options.zipArchive,
+                          },
+                      });
             if (download.mode === 'download') {
                 downloadTextFile(download.fileName, download.content, download.mimeType);
                 return;
@@ -84,38 +183,106 @@ function OpenCodeWorkspacePage() {
         },
     });
 
-    const visibleSessions = sessions.filter((session) =>
-        matchesTextQuery(deferredSearch, [
-            session.title,
-            session.sessionId,
-            session.slug,
-            session.agent,
-            session.modelLabel,
-            session.directory,
-        ]),
+    const deleteMutation = useMutation({
+        mutationFn: async (sessionIds: string[]) =>
+            sessionIds.length === 1
+                ? deleteOpenCodeSessionFn({ data: { sessionId: sessionIds[0]! } })
+                : deleteOpenCodeSessionsFn({ data: { sessionIds } }),
+        onSuccess: async (_result, sessionIds) => {
+            const workspaceEmptied = isWorkspaceEmptiedByDelete(sessions, sessionIds, (session) => session.sessionId);
+            setPendingDelete(null);
+            if (workspaceEmptied) {
+                await navigate({ to: '/opencode' });
+            }
+
+            await Promise.all([
+                queryClient.invalidateQueries({ queryKey: ['opencode-workspaces'] }),
+                queryClient.invalidateQueries({ queryKey: ['opencode-sessions', workspace.key] }),
+                ...sessionIds.map((sessionId) =>
+                    queryClient.invalidateQueries({ queryKey: ['opencode-session', sessionId] }),
+                ),
+            ]);
+        },
+    });
+
+    const visibleSessions = useMemo(
+        () =>
+            sessions.filter((session) =>
+                matchesTextQuery(deferredSearch, [
+                    session.title,
+                    session.sessionId,
+                    session.slug,
+                    session.agent,
+                    session.modelLabel,
+                    session.directory,
+                ]),
+            ),
+        [deferredSearch, sessions],
+    );
+    const visibleSessionsById = useMemo(
+        () => new Map(visibleSessions.map((session) => [session.sessionId, session])),
+        [visibleSessions],
     );
+    const lookupSelectedSessions = (sessionIds: string[]) =>
+        sessionIds
+            .map((sessionId) => visibleSessionsById.get(sessionId) ?? null)
+            .filter((session): session is OpenCodeSessionSummary => session !== null);
+    const openExportForSessions = (selectedSessions: OpenCodeSessionSummary[]) => {
+        if (selectedSessions.length === 0) {
+            return;
+        }
+
+        setPendingExport(buildSessionExport(selectedSessions));
+    };
+    const openDeleteForSessions = (
+        selectedSessions: OpenCodeSessionSummary[],
+        scope: PendingSessionDelete['scope'],
+    ) => {
+        if (selectedSessions.length > 0) {
+            setPendingDelete({ scope, sessions: selectedSessions });
+        }
+    };
 
     return (
         <div className="space-y-6">
             <PageHeader
                 actions={
-                    <ListSearchInput
-                        placeholder="Search session title, id, model, or agent"
-                        value={searchInput}
-                        onValueChange={setSearchInput}
-                    />
+                    <div className="flex flex-col gap-2 sm:flex-row">
+                        <Button
+                            className="rounded-full"
+                            disabled={deleteMutation.isPending || sessions.length === 0}
+                            type="button"
+                            variant="destructive"
+                            onClick={() => openDeleteForSessions(sessions, 'all')}
+                        >
+                            <Trash2 className="size-4" />
+                            Delete all
+                        </Button>
+                        <ListSearchInput
+                            placeholder="Search session title, id, model, or agent"
+                            value={searchInput}
+                            onValueChange={setSearchInput}
+                        />
+                    </div>
                 }
                 eyebrow="OpenCode workspace"
                 subtitle="Inspect local OpenCode sessions, transcript parts, tool calls, reasoning, token totals, and exportable conversation text."
                 title={workspace.label}
             />
 
-            <OpenCodeSessionsTable sessions={visibleSessions} onExportSession={setPendingExport} />
+            <OpenCodeSessionsTable
+                sessions={visibleSessions}
+                onDeleteSession={(session) => openDeleteForSessions([session], 'selected')}
+                onDeleteSessions={(sessionIds) => openDeleteForSessions(lookupSelectedSessions(sessionIds), 'selected')}
+                onExportSession={(session) => openExportForSessions([session])}
+                onExportSessions={(sessionIds) => openExportForSessions(lookupSelectedSessions(sessionIds))}
+            />
 
             <ExportDialog
+                forceZipArchive={pendingExport ? pendingExport.sessionIds.length > 1 : false}
                 open={pendingExport !== null}
                 pending={exportMutation.isPending}
-                title={pendingExport ? `Export ${pendingExport.title}` : 'Export session'}
+                title={pendingExport ? `Export ${pendingExport.label}` : 'Export session'}
                 onExport={(options) => exportMutation.mutate(options)}
                 onOpenChange={(open) => {
                     if (!open) {
@@ -130,6 +297,31 @@ function OpenCodeWorkspacePage() {
                     {exportMutation.error instanceof Error ? exportMutation.error.message : 'Session export failed'}
                 </p>
             ) : null}
+
+            <DeleteConfirmDialog
+                confirmLabel={getDeleteConfirmLabel(pendingDelete, deleteMutation.isPending)}
+                description={getDeleteDescription(pendingDelete)}
+                errorMessage={
+                    deleteMutation.isError
+                        ? deleteMutation.error instanceof Error
+                            ? deleteMutation.error.message
+                            : 'Session delete failed'
+                        : null
+                }
+                open={pendingDelete !== null}
+                title={getDeleteTitle(pendingDelete)}
+                onConfirm={() => {
+                    if (pendingDelete) {
+                        deleteMutation.mutate(pendingDelete.sessions.map((session) => session.sessionId));
+                    }
+                }}
+                onOpenChange={(open) => {
+                    if (!open) {
+                        setPendingDelete(null);
+                        deleteMutation.reset();
+                    }
+                }}
+            />
         </div>
     );
 }

package/apps/ui/src/routes/opencode.index.tsx

@@ -1,7 +1,8 @@
-import { useSuspenseQuery } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 import { createFileRoute } from '@tanstack/react-router';
 import { useDeferredValue, useState } from 'react';
 import { ListSearchInput } from '#/components/list-search-input';
+import { LoadingPanel } from '#/components/loading-panel';
 import { OpenCodeWorkspacesTable } from '#/components/opencode-workspaces-table';
 import { PageHeader } from '#/components/page-header';
 import { ReloadErrorPanel } from '#/components/reload-error-panel';
@@ -12,15 +13,28 @@ const OpenCodeErrorComponent = ({ error }: { error: Error }) => {
     return <ReloadErrorPanel description={error.message} title="Failed to load OpenCode workspaces" />;
 };
 
+const toError = (error: unknown) => (error instanceof Error ? error : new Error(String(error)));
+
 const OpenCodePage = () => {
-    const workspaces = useSuspenseQuery(openCodeWorkspacesQueryOptions()).data;
+    const workspacesQuery = useQuery(openCodeWorkspacesQueryOptions());
     const [searchInput, setSearchInput] = useState('');
     const deferredSearch = useDeferredValue(searchInput);
+    const workspaces = workspacesQuery.data ?? [];
 
     const visibleWorkspaces = workspaces.filter((workspace) =>
         matchesTextQuery(deferredSearch, [workspace.label, workspace.worktree, workspace.key, workspace.projectId]),
     );
 
+    if (workspacesQuery.isLoading) {
+        return (
+            <LoadingPanel description="Loading OpenCode workspaces and database metadata." title="Loading OpenCode" />
+        );
+    }
+
+    if (workspacesQuery.isError) {
+        return <OpenCodeErrorComponent error={toError(workspacesQuery.error)} />;
+    }
+
     return (
         <div className="space-y-6">
             <PageHeader
@@ -44,5 +58,4 @@ const OpenCodePage = () => {
 export const Route = createFileRoute('/opencode/')({
     component: OpenCodePage,
     errorComponent: OpenCodeErrorComponent,
-    loader: ({ context }) => context.queryClient.ensureQueryData(openCodeWorkspacesQueryOptions()),
 });

package/apps/ui/src/routes/qoder-sessions.$sessionId.tsx

@@ -12,7 +12,7 @@ import { MetadataSection } from '#/components/metadata-section';
 import { MetricCard } from '#/components/metric-card';
 import { PageHeader } from '#/components/page-header';
 import { ReloadErrorPanel } from '#/components/reload-error-panel';
-import { TranscriptView } from '#/components/transcript-view';
+import { DEFAULT_SHOW_USER_MESSAGES, TranscriptView } from '#/components/transcript-view';
 import { Button } from '#/components/ui/button';
 import { Checkbox } from '#/components/ui/checkbox';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '#/components/ui/tabs';
@@ -71,10 +71,13 @@ const buildSessionMetadata = (detail: QoderSessionTranscript) => [
     { label: 'Model', value: detail.session.model ?? 'unknown' },
     { label: 'Execution mode', value: detail.session.executionMode ?? 'unknown' },
     { label: 'Agent class', value: detail.session.agentClass ?? 'unknown' },
-    { label: 'Created', value: formatDateTime(detail.session.createdAtMs) },
+    {
+        label: 'Created',
+        value: <span suppressHydrationWarning>{formatDateTime(detail.session.createdAtMs)}</span>,
+    },
     {
         label: 'Last active',
-        value: formatDateTime(detail.session.lastActiveAtMs),
+        value: <span suppressHydrationWarning>{formatDateTime(detail.session.lastActiveAtMs)}</span>,
     },
 ];
 
@@ -171,7 +174,7 @@ const QoderSessionDetailPage = () => {
     const [showCommentary, setShowCommentary] = useState(false);
     const [showExtraEvents, setShowExtraEvents] = useState(false);
     const [showRawJson, setShowRawJson] = useState(false);
-    const [showUserMessages, setShowUserMessages] = useState(true);
+    const [showUserMessages, setShowUserMessages] = useState(DEFAULT_SHOW_USER_MESSAGES);
     const transcriptEvents = useMemo(() => qoderTranscriptToThreadEvents(detail), [detail]);
     const transcriptStats = useMemo(() => getQoderThreadTranscriptStats(transcriptEvents), [transcriptEvents]);
     const modelLabel = detail.session.model ?? 'Qoder';

package/apps/ui/src/routes/qoder.$workspaceKey.tsx

@@ -1,7 +1,7 @@
 import type { QoderSessionSummary, QoderWorkspaceGroup } from '@spiracha/lib/qoder-exporter-types';
 import { useMutation, useSuspenseQuery } from '@tanstack/react-query';
 import { createFileRoute } from '@tanstack/react-router';
-import { useDeferredValue, useState } from 'react';
+import { useDeferredValue, useMemo, useState } from 'react';
 import { ExportDialog } from '#/components/export-dialog';
 import { ListSearchInput } from '#/components/list-search-input';
 import { LoadingPanel } from '#/components/loading-panel';
@@ -10,7 +10,7 @@ import { QoderSessionsTable } from '#/components/qoder-sessions-table';
 import { ReloadErrorPanel } from '#/components/reload-error-panel';
 import { downloadTextFile, downloadUrlFile } from '#/lib/download';
 import { qoderSessionsQueryOptions, qoderWorkspacesQueryOptions } from '#/lib/qoder-queries';
-import { exportQoderSessionFn } from '#/lib/qoder-server';
+import { exportQoderSessionFn, exportQoderSessionsFn } from '#/lib/qoder-server';
 import { matchesTextQuery } from '#/lib/text-filter';
 
 type ExportDialogOptions = {
@@ -21,6 +21,11 @@ type ExportDialogOptions = {
     zipArchive: boolean;
 };
 
+type PendingSessionExport = {
+    label: string;
+    sessionIds: string[];
+};
+
 const findWorkspaceOrThrow = (workspaces: QoderWorkspaceGroup[], workspaceKey: string) => {
     const workspace = workspaces.find((candidate) => candidate.key === workspaceKey);
     if (!workspace) {
@@ -40,7 +45,7 @@ const QoderWorkspacePage = () => {
     const workspace = findWorkspaceOrThrow(workspaces, params.workspaceKey);
     const sessions = useSuspenseQuery(qoderSessionsQueryOptions(workspace.key)).data;
     const [searchInput, setSearchInput] = useState('');
-    const [pendingExport, setPendingExport] = useState<QoderSessionSummary | null>(null);
+    const [pendingExport, setPendingExport] = useState<PendingSessionExport | null>(null);
     const deferredSearch = useDeferredValue(searchInput);
 
     const exportMutation = useMutation({
@@ -49,16 +54,28 @@ const QoderWorkspacePage = () => {
                 throw new Error('No Qoder session selected for export');
             }
 
-            const download = await exportQoderSessionFn({
-                data: {
-                    includeCommentary: options.includeCommentary,
-                    includeMetadata: options.includeMetadata,
-                    includeTools: options.includeTools,
-                    outputFormat: options.outputFormat,
-                    sessionId: pendingExport.sessionId,
-                    zipArchive: options.zipArchive,
-                },
-            });
+            const download =
+                pendingExport.sessionIds.length === 1
+                    ? await exportQoderSessionFn({
+                          data: {
+                              includeCommentary: options.includeCommentary,
+                              includeMetadata: options.includeMetadata,
+                              includeTools: options.includeTools,
+                              outputFormat: options.outputFormat,
+                              sessionId: pendingExport.sessionIds[0]!,
+                              zipArchive: options.zipArchive,
+                          },
+                      })
+                    : await exportQoderSessionsFn({
+                          data: {
+                              includeCommentary: options.includeCommentary,
+                              includeMetadata: options.includeMetadata,
+                              includeTools: options.includeTools,
+                              outputFormat: options.outputFormat,
+                              sessionIds: pendingExport.sessionIds,
+                              zipArchive: options.zipArchive,
+                          },
+                      });
             if (download.mode === 'download') {
                 downloadTextFile(download.fileName, download.content, download.mimeType);
                 return;
@@ -71,20 +88,45 @@ const QoderWorkspacePage = () => {
         },
     });
 
-    const visibleSessions = sessions.filter((session) =>
-        matchesTextQuery(deferredSearch, [
-            session.title,
-            session.sessionId,
-            session.taskId,
-            session.requestId,
-            session.model,
-            session.status,
-            session.executionMode,
-            session.agentClass,
-            session.query,
-            session.sourceStatePath,
-        ]),
+    const visibleSessions = useMemo(
+        () =>
+            sessions.filter((session) =>
+                matchesTextQuery(deferredSearch, [
+                    session.title,
+                    session.sessionId,
+                    session.taskId,
+                    session.requestId,
+                    session.model,
+                    session.status,
+                    session.executionMode,
+                    session.agentClass,
+                    session.query,
+                    session.sourceStatePath,
+                ]),
+            ),
+        [deferredSearch, sessions],
+    );
+    const visibleSessionsById = useMemo(
+        () => new Map(visibleSessions.map((session) => [session.sessionId, session])),
+        [visibleSessions],
     );
+    const lookupSelectedSessions = (sessionIds: string[]) =>
+        sessionIds
+            .map((sessionId) => visibleSessionsById.get(sessionId) ?? null)
+            .filter((session): session is QoderSessionSummary => session !== null);
+    const openExportForSessions = (selectedSessions: QoderSessionSummary[]) => {
+        if (selectedSessions.length === 0) {
+            return;
+        }
+
+        setPendingExport({
+            label:
+                selectedSessions.length === 1
+                    ? selectedSessions[0]!.title
+                    : `${selectedSessions.length} selected sessions`,
+            sessionIds: selectedSessions.map((session) => session.sessionId),
+        });
+    };
 
     return (
         <div className="space-y-6">
@@ -101,12 +143,17 @@ const QoderWorkspacePage = () => {
                 title={workspace.label}
             />
 
-            <QoderSessionsTable sessions={visibleSessions} onExportSession={setPendingExport} />
+            <QoderSessionsTable
+                sessions={visibleSessions}
+                onExportSession={(session) => openExportForSessions([session])}
+                onExportSessions={(sessionIds) => openExportForSessions(lookupSelectedSessions(sessionIds))}
+            />
 
             <ExportDialog
+                forceZipArchive={pendingExport ? pendingExport.sessionIds.length > 1 : false}
                 open={pendingExport !== null}
                 pending={exportMutation.isPending}
-                title={pendingExport ? `Export ${pendingExport.title}` : 'Export session'}
+                title={pendingExport ? `Export ${pendingExport.label}` : 'Export session'}
                 onExport={(options) => exportMutation.mutate(options)}
                 onOpenChange={(open) => {
                     if (!open) {