spiracha 1.5.0 → 2.1.0

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

@@ -0,0 +1,344 @@
+import type { ThreadEvent, ThreadTranscriptStats } from '@spiracha/lib/codex-browser-types';
+import type { QoderSessionTranscript } from '@spiracha/lib/qoder-exporter-types';
+import { useMutation, useSuspenseQuery } from '@tanstack/react-query';
+import { createFileRoute, Link } from '@tanstack/react-router';
+import { Download } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { Breadcrumbs } from '#/components/breadcrumbs';
+import { ExportDialog } from '#/components/export-dialog';
+import { JsonPanel } from '#/components/json-panel';
+import { LoadingPanel } from '#/components/loading-panel';
+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 { 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';
+import { downloadTextFile, downloadUrlFile } from '#/lib/download';
+import { formatDateTime, formatList, formatNumber } from '#/lib/formatters';
+import { qoderSessionDetailQueryOptions } from '#/lib/qoder-queries';
+import { exportQoderSessionFn } from '#/lib/qoder-server';
+import { getQoderThreadTranscriptStats, qoderTranscriptToThreadEvents } from '#/lib/qoder-transcript-events';
+
+type ExportDialogOptions = {
+    includeCommentary: boolean;
+    includeMetadata: boolean;
+    includeTools: boolean;
+    outputFormat: 'md' | 'txt';
+    zipArchive: boolean;
+};
+
+type TranscriptControlsProps = {
+    rawJsonDisabled?: boolean;
+    showCommentary: boolean;
+    showExtraEvents: boolean;
+    showRawJson: boolean;
+    showToolCalls: boolean;
+    showUserMessages: boolean;
+    onShowCommentaryChange: (checked: boolean) => void;
+    onShowExtraEventsChange: (checked: boolean) => void;
+    onShowRawJsonChange: (checked: boolean) => void;
+    onShowToolCallsChange: (checked: boolean) => void;
+    onShowUserMessagesChange: (checked: boolean) => void;
+};
+
+const QoderSessionDetailErrorComponent = ({ error }: { error: Error }) => {
+    return <ReloadErrorPanel description={error.message} title="Failed to load Qoder session" />;
+};
+
+const buildSessionMetadata = (detail: QoderSessionTranscript) => [
+    { label: 'Session ID', value: <span data-mono="true">{detail.session.sessionId}</span> },
+    { label: 'Task ID', value: detail.session.taskId ?? 'unknown' },
+    { label: 'Request ID', value: detail.session.requestId ?? 'unknown' },
+    {
+        label: 'Workspace',
+        value: (
+            <Link
+                className="text-[var(--accent)]"
+                params={{ workspaceKey: detail.session.workspaceKey }}
+                to="/qoder/$workspaceKey"
+            >
+                {detail.session.workspaceLabel}
+            </Link>
+        ),
+    },
+    { label: 'Worktree', value: detail.session.worktree },
+    { label: 'Workspace data ID', value: detail.session.workspaceStorageId ?? 'unknown' },
+    { label: 'State file', value: detail.session.sourceStatePath ?? 'unknown' },
+    { label: 'Status', value: detail.session.status ?? 'unknown' },
+    { 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: <span suppressHydrationWarning>{formatDateTime(detail.session.createdAtMs)}</span>,
+    },
+    {
+        label: 'Last active',
+        value: <span suppressHydrationWarning>{formatDateTime(detail.session.lastActiveAtMs)}</span>,
+    },
+];
+
+const buildTranscriptStatsItems = (
+    detail: QoderSessionTranscript,
+    events: ThreadEvent[],
+    stats: ThreadTranscriptStats,
+) => [
+    { label: 'Event kinds', value: formatList([...new Set(events.map((event) => event.kind))]) },
+    { label: 'Messages', value: formatNumber(stats.messageCount) },
+    { label: 'User messages', value: formatNumber(stats.userMessageCount) },
+    { label: 'Assistant messages', value: formatNumber(stats.assistantMessageCount) },
+    { label: 'Final answers', value: formatNumber(stats.finalAnswerCount) },
+    { label: 'File operations', value: formatNumber(detail.session.fileOperationCount) },
+    { label: 'Snapshots', value: formatNumber(detail.session.snapshotFileCount) },
+    { label: 'Renderable parts', value: formatNumber(detail.renderablePartCount) },
+];
+
+const QoderTranscriptControls = ({
+    rawJsonDisabled = false,
+    showCommentary,
+    showExtraEvents,
+    showRawJson,
+    showToolCalls,
+    showUserMessages,
+    onShowCommentaryChange,
+    onShowExtraEventsChange,
+    onShowRawJsonChange,
+    onShowToolCallsChange,
+    onShowUserMessagesChange,
+}: TranscriptControlsProps) => {
+    return (
+        <div className="flex flex-wrap gap-4 rounded-xl border border-[var(--border)] bg-[var(--panel)] px-4 py-3 shadow-[var(--panel-shadow)]">
+            <div className="flex items-center gap-2 text-sm">
+                <Checkbox
+                    checked={showToolCalls}
+                    id="qoder-transcript-show-tool-calls"
+                    onCheckedChange={(checked) => onShowToolCallsChange(checked === true)}
+                />
+                <label htmlFor="qoder-transcript-show-tool-calls">Show tool calls</label>
+            </div>
+            <div className="flex items-center gap-2 text-sm">
+                <Checkbox
+                    checked={showCommentary}
+                    id="qoder-transcript-show-commentary"
+                    onCheckedChange={(checked) => onShowCommentaryChange(checked === true)}
+                />
+                <label htmlFor="qoder-transcript-show-commentary">Show commentary</label>
+            </div>
+            <div className="flex items-center gap-2 text-sm">
+                <Checkbox
+                    checked={showExtraEvents}
+                    id="qoder-transcript-show-extra-events"
+                    onCheckedChange={(checked) => onShowExtraEventsChange(checked === true)}
+                />
+                <label htmlFor="qoder-transcript-show-extra-events">Show extra events</label>
+            </div>
+            <div className="flex items-center gap-2 text-sm">
+                <Checkbox
+                    checked={showRawJson}
+                    disabled={rawJsonDisabled}
+                    id="qoder-transcript-show-raw-json"
+                    onCheckedChange={(checked) => onShowRawJsonChange(checked === true)}
+                />
+                <label htmlFor="qoder-transcript-show-raw-json">Raw JSON</label>
+            </div>
+            <div className="flex items-center gap-2 text-sm">
+                <Checkbox
+                    checked={showUserMessages}
+                    id="qoder-transcript-show-user-messages"
+                    onCheckedChange={(checked) => onShowUserMessagesChange(checked === true)}
+                />
+                <label htmlFor="qoder-transcript-show-user-messages">User</label>
+            </div>
+        </div>
+    );
+};
+
+const QoderRawPanels = ({ detail, events }: { detail: QoderSessionTranscript; events: ThreadEvent[] }) => {
+    return (
+        <div className="space-y-4">
+            <JsonPanel title="Session summary" value={detail.session} />
+            <JsonPanel title="Qoder entries" value={detail.entries} />
+            <JsonPanel title="Raw Qoder session" value={detail.rawSession} />
+            <JsonPanel title="Transcript events" value={events} />
+        </div>
+    );
+};
+
+const QoderSessionDetailPage = () => {
+    const detail = useSuspenseQuery(qoderSessionDetailQueryOptions(Route.useParams().sessionId)).data;
+    const [pendingExport, setPendingExport] = useState(false);
+    const [showToolCalls, setShowToolCalls] = useState(false);
+    const [showCommentary, setShowCommentary] = useState(false);
+    const [showExtraEvents, setShowExtraEvents] = useState(false);
+    const [showRawJson, setShowRawJson] = useState(false);
+    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';
+
+    const exportSessionMutation = useMutation({
+        mutationFn: async (options: ExportDialogOptions) => {
+            const download = await exportQoderSessionFn({
+                data: {
+                    includeCommentary: options.includeCommentary,
+                    includeMetadata: options.includeMetadata,
+                    includeTools: options.includeTools,
+                    outputFormat: options.outputFormat,
+                    sessionId: detail.session.sessionId,
+                    zipArchive: options.zipArchive,
+                },
+            });
+            if (download.mode === 'download') {
+                downloadTextFile(download.fileName, download.content, download.mimeType);
+                return;
+            }
+
+            await downloadUrlFile(download.fileName, download.downloadUrl);
+        },
+        onSuccess: () => {
+            setPendingExport(false);
+        },
+    });
+
+    return (
+        <div className="space-y-6">
+            <PageHeader
+                actions={
+                    <Button
+                        className="rounded-full"
+                        type="button"
+                        variant="outline"
+                        onClick={() => setPendingExport(true)}
+                    >
+                        <Download className="mr-2 size-4" />
+                        Export
+                    </Button>
+                }
+                breadcrumb={
+                    <Breadcrumbs
+                        items={[
+                            { label: 'Qoder', to: '/qoder' },
+                            {
+                                label: detail.session.workspaceLabel,
+                                params: { workspaceKey: detail.session.workspaceKey },
+                                to: '/qoder/$workspaceKey',
+                            },
+                            { label: detail.session.title },
+                        ]}
+                    />
+                }
+                eyebrow="Qoder session"
+                subtitle="Session detail for the selected Qoder local history entry and local state."
+                title={detail.session.title}
+            />
+
+            <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
+                <MetricCard label="Prompts" value={formatNumber(detail.session.messageCount)} />
+                <MetricCard label="File ops" value={formatNumber(detail.session.fileOperationCount)} />
+                <MetricCard label="Snapshots" value={formatNumber(detail.session.snapshotFileCount)} />
+                <MetricCard label="Model" value={modelLabel} />
+            </div>
+
+            <Tabs className="space-y-4" defaultValue="transcript">
+                <TabsList className="grid w-fit min-w-[24rem] grid-cols-3 rounded-full border border-[var(--border)] bg-[var(--panel)] p-1">
+                    <TabsTrigger className="rounded-full px-5 text-sm" value="transcript">
+                        Transcript
+                    </TabsTrigger>
+                    <TabsTrigger className="rounded-full px-5 text-sm" value="metadata">
+                        Metadata
+                    </TabsTrigger>
+                    <TabsTrigger className="rounded-full px-5 text-sm" value="raw">
+                        Raw
+                    </TabsTrigger>
+                </TabsList>
+
+                <TabsContent className="space-y-3" value="transcript">
+                    <QoderTranscriptControls
+                        rawJsonDisabled={transcriptEvents.length === 0}
+                        showCommentary={showCommentary}
+                        showExtraEvents={showExtraEvents}
+                        showRawJson={showRawJson}
+                        showToolCalls={showToolCalls}
+                        showUserMessages={showUserMessages}
+                        onShowCommentaryChange={setShowCommentary}
+                        onShowExtraEventsChange={setShowExtraEvents}
+                        onShowRawJsonChange={setShowRawJson}
+                        onShowToolCallsChange={setShowToolCalls}
+                        onShowUserMessagesChange={setShowUserMessages}
+                    />
+                    {transcriptEvents.length > 0 ? (
+                        <TranscriptView
+                            assistantModel={modelLabel}
+                            events={transcriptEvents}
+                            projectPath={detail.session.worktree}
+                            showCommentary={showCommentary}
+                            showExtraEvents={showExtraEvents}
+                            showRawJson={showRawJson}
+                            showToolCalls={showToolCalls}
+                            showUserMessages={showUserMessages}
+                        />
+                    ) : (
+                        <section className="rounded-[1.6rem] border border-[var(--border)] bg-[var(--panel)] p-5 shadow-[var(--panel-shadow)]">
+                            <h3 className="font-semibold text-[var(--muted-foreground)] text-sm uppercase tracking-[0.18em]">
+                                Transcript
+                            </h3>
+                            <p className="mt-4 text-[var(--muted-foreground)] text-sm">
+                                No renderable Qoder transcript content was found for this session.
+                            </p>
+                        </section>
+                    )}
+                </TabsContent>
+
+                <TabsContent value="metadata">
+                    <div className="grid gap-4 xl:grid-cols-[0.95fr_1.05fr]">
+                        <MetadataSection items={buildSessionMetadata(detail)} title="Session metadata" />
+                        <MetadataSection
+                            items={buildTranscriptStatsItems(detail, transcriptEvents, transcriptStats)}
+                            title="Transcript stats"
+                        />
+                    </div>
+                </TabsContent>
+
+                <TabsContent value="raw">
+                    <QoderRawPanels detail={detail} events={transcriptEvents} />
+                </TabsContent>
+            </Tabs>
+
+            <ExportDialog
+                errorMessage={
+                    exportSessionMutation.isError
+                        ? exportSessionMutation.error instanceof Error
+                            ? exportSessionMutation.error.message
+                            : 'Export failed'
+                        : null
+                }
+                open={pendingExport}
+                pending={exportSessionMutation.isPending}
+                title={`Export ${detail.session.title}`}
+                onExport={(options) => exportSessionMutation.mutate(options)}
+                onOpenChange={(open) => {
+                    setPendingExport(open);
+                    if (!open) {
+                        exportSessionMutation.reset();
+                    }
+                }}
+            />
+        </div>
+    );
+};
+
+export const Route = createFileRoute('/qoder-sessions/$sessionId')({
+    component: QoderSessionDetailPage,
+    errorComponent: QoderSessionDetailErrorComponent,
+    loader: ({ context, params }) =>
+        context.queryClient.ensureQueryData(qoderSessionDetailQueryOptions(params.sessionId)),
+    pendingComponent: () => (
+        <LoadingPanel
+            description="Loading the Qoder transcript, file operations, and session metadata."
+            title="Loading session"
+        />
+    ),
+});

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

@@ -0,0 +1,186 @@
+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, useMemo, useState } from 'react';
+import { ExportDialog } from '#/components/export-dialog';
+import { ListSearchInput } from '#/components/list-search-input';
+import { LoadingPanel } from '#/components/loading-panel';
+import { PageHeader } from '#/components/page-header';
+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, exportQoderSessionsFn } from '#/lib/qoder-server';
+import { matchesTextQuery } from '#/lib/text-filter';
+
+type ExportDialogOptions = {
+    includeCommentary: boolean;
+    includeMetadata: boolean;
+    includeTools: boolean;
+    outputFormat: 'md' | 'txt';
+    zipArchive: boolean;
+};
+
+type PendingSessionExport = {
+    label: string;
+    sessionIds: string[];
+};
+
+const findWorkspaceOrThrow = (workspaces: QoderWorkspaceGroup[], workspaceKey: string) => {
+    const workspace = workspaces.find((candidate) => candidate.key === workspaceKey);
+    if (!workspace) {
+        throw new Error(`Qoder workspace not found: ${workspaceKey}`);
+    }
+
+    return workspace;
+};
+
+const QoderWorkspaceErrorComponent = ({ error }: { error: Error }) => {
+    return <ReloadErrorPanel description={error.message} title="Failed to load Qoder workspace" />;
+};
+
+const QoderWorkspacePage = () => {
+    const params = Route.useParams();
+    const workspaces = useSuspenseQuery(qoderWorkspacesQueryOptions()).data;
+    const workspace = findWorkspaceOrThrow(workspaces, params.workspaceKey);
+    const sessions = useSuspenseQuery(qoderSessionsQueryOptions(workspace.key)).data;
+    const [searchInput, setSearchInput] = useState('');
+    const [pendingExport, setPendingExport] = useState<PendingSessionExport | null>(null);
+    const deferredSearch = useDeferredValue(searchInput);
+
+    const exportMutation = useMutation({
+        mutationFn: async (options: ExportDialogOptions) => {
+            if (!pendingExport) {
+                throw new Error('No Qoder session selected for export');
+            }
+
+            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;
+            }
+
+            await downloadUrlFile(download.fileName, download.downloadUrl);
+        },
+        onSuccess: () => {
+            setPendingExport(null);
+        },
+    });
+
+    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">
+            <PageHeader
+                actions={
+                    <ListSearchInput
+                        placeholder="Search session title, id, status, or request"
+                        value={searchInput}
+                        onValueChange={setSearchInput}
+                    />
+                }
+                eyebrow="Qoder workspace"
+                subtitle="Inspect local Qoder prompts, session metadata, and file-operation history."
+                title={workspace.label}
+            />
+
+            <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.label}` : 'Export session'}
+                onExport={(options) => exportMutation.mutate(options)}
+                onOpenChange={(open) => {
+                    if (!open) {
+                        setPendingExport(null);
+                        exportMutation.reset();
+                    }
+                }}
+            />
+
+            {exportMutation.isError ? (
+                <p className="text-[var(--destructive)] text-sm">
+                    {exportMutation.error instanceof Error ? exportMutation.error.message : 'Session export failed'}
+                </p>
+            ) : null}
+        </div>
+    );
+};
+
+export const Route = createFileRoute('/qoder/$workspaceKey')({
+    component: QoderWorkspacePage,
+    errorComponent: QoderWorkspaceErrorComponent,
+    loader: async ({ context, params }) => {
+        const workspaces = await context.queryClient.ensureQueryData(qoderWorkspacesQueryOptions());
+        findWorkspaceOrThrow(workspaces, params.workspaceKey);
+        await context.queryClient.ensureQueryData(qoderSessionsQueryOptions(params.workspaceKey));
+    },
+    pendingComponent: () => (
+        <LoadingPanel description="Loading Qoder sessions and local metadata." title="Loading workspace" />
+    ),
+});

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

@@ -0,0 +1,48 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { createFileRoute } from '@tanstack/react-router';
+import { useDeferredValue, useState } from 'react';
+import { ListSearchInput } from '#/components/list-search-input';
+import { PageHeader } from '#/components/page-header';
+import { QoderWorkspacesTable } from '#/components/qoder-workspaces-table';
+import { ReloadErrorPanel } from '#/components/reload-error-panel';
+import { qoderWorkspacesQueryOptions } from '#/lib/qoder-queries';
+import { matchesTextQuery } from '#/lib/text-filter';
+
+const QoderErrorComponent = ({ error }: { error: Error }) => {
+    return <ReloadErrorPanel description={error.message} title="Failed to load Qoder workspaces" />;
+};
+
+const QoderPage = () => {
+    const workspaces = useSuspenseQuery(qoderWorkspacesQueryOptions()).data;
+    const [searchInput, setSearchInput] = useState('');
+    const deferredSearch = useDeferredValue(searchInput);
+
+    const visibleWorkspaces = workspaces.filter((workspace) =>
+        matchesTextQuery(deferredSearch, [workspace.label, workspace.worktree, workspace.key]),
+    );
+
+    return (
+        <div className="space-y-6">
+            <PageHeader
+                actions={
+                    <ListSearchInput
+                        placeholder="Search workspace name or path"
+                        value={searchInput}
+                        onValueChange={setSearchInput}
+                    />
+                }
+                eyebrow="Inventory"
+                subtitle="Workspace groups are derived from local Qoder history and workspace data."
+                title="Qoder"
+            />
+
+            <QoderWorkspacesTable workspaces={visibleWorkspaces} />
+        </div>
+    );
+};
+
+export const Route = createFileRoute('/qoder/')({
+    component: QoderPage,
+    errorComponent: QoderErrorComponent,
+    loader: ({ context }) => context.queryClient.ensureQueryData(qoderWorkspacesQueryOptions()),
+});

package/apps/ui/src/routes/settings.tsx

@@ -0,0 +1,91 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { Settings2 } from 'lucide-react';
+import { PageHeader } from '#/components/page-header';
+import { Checkbox } from '#/components/ui/checkbox';
+import { useSettings } from '#/lib/settings-store';
+
+export const Route = createFileRoute('/settings')({
+    component: SettingsPage,
+});
+
+function SettingsPage() {
+    const { settings, updateSetting } = useSettings();
+
+    return (
+        <div className="space-y-6">
+            <PageHeader
+                eyebrow="Configuration"
+                subtitle="Control how paths and usernames appear in transcript messages."
+                title="Settings"
+            />
+
+            <section className="rounded-[1.6rem] border border-[var(--border)] bg-[var(--panel)] p-5 shadow-[var(--panel-shadow)]">
+                <h3 className="flex items-center gap-2 font-semibold text-[var(--muted-foreground)] text-xs uppercase tracking-[0.18em]">
+                    <Settings2 className="size-3.5" />
+                    Privacy
+                </h3>
+
+                <div className="mt-5 space-y-5">
+                    <div className="flex items-center gap-3">
+                        <Checkbox
+                            checked={settings.redactUsername}
+                            id="redact-username"
+                            onCheckedChange={(checked) => updateSetting('redactUsername', checked === true)}
+                        />
+                        <div className="min-w-0">
+                            <label
+                                className="cursor-pointer font-medium text-sm leading-none"
+                                htmlFor="redact-username"
+                            >
+                                Redact Username
+                            </label>
+                            <p className="mt-1.5 text-[var(--muted-foreground)] text-xs leading-5">
+                                Replaces{' '}
+                                <code className="rounded bg-[var(--code-background)] px-1 py-0.5 font-mono text-[var(--code-foreground)]">
+                                    /Users/[username]/
+                                </code>{' '}
+                                with{' '}
+                                <code className="rounded bg-[var(--code-background)] px-1 py-0.5 font-mono text-[var(--code-foreground)]">
+                                    ~/
+                                </code>{' '}
+                                in all transcript messages.
+                            </p>
+                        </div>
+                    </div>
+
+                    <div className="flex items-center gap-3">
+                        <Checkbox
+                            checked={settings.convertToProjectRoot}
+                            id="convert-project-root"
+                            onCheckedChange={(checked) => updateSetting('convertToProjectRoot', checked === true)}
+                        />
+                        <div className="min-w-0">
+                            <label
+                                className="cursor-pointer font-medium text-sm leading-none"
+                                htmlFor="convert-project-root"
+                            >
+                                Convert Absolute Paths to Project Root
+                            </label>
+                            <p className="mt-1.5 text-[var(--muted-foreground)] text-xs leading-5">
+                                Converts the current thread or project cwd from{' '}
+                                <code className="rounded bg-[var(--code-background)] px-1 py-0.5 font-mono text-[var(--code-foreground)]">
+                                    /Users/[username]/workspace/[projectname]/
+                                </code>{' '}
+                                to project-root-relative paths, so{' '}
+                                <code className="rounded bg-[var(--code-background)] px-1 py-0.5 font-mono text-[var(--code-foreground)]">
+                                    /Users/jane/workspace/myapp/src/index.ts
+                                </code>{' '}
+                                appear as{' '}
+                                <code className="rounded bg-[var(--code-background)] px-1 py-0.5 font-mono text-[var(--code-foreground)]">
+                                    src/index.ts
+                                </code>
+                                . If Redact Username is also enabled, remaining absolute paths outside the project root
+                                are redacted afterward.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    );
+}