spiracha 1.5.0 → 2.1.0

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

@@ -0,0 +1,243 @@
+import {
+    type ColumnDef,
+    flexRender,
+    getCoreRowModel,
+    getFilteredRowModel,
+    getSortedRowModel,
+    type RowSelectionState,
+    type SortingState,
+    useReactTable,
+} from '@tanstack/react-table';
+import { ArrowDownUp } from 'lucide-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';
+
+type DataTableProps<TData> = {
+    className?: string;
+    columns: ReadonlyArray<ColumnDef<TData, any>>;
+    data: TData[];
+    emptyMessage: string;
+    enableRowSelection?: boolean;
+    getRowId?: (row: TData, index: number) => string;
+    initialSorting?: SortingState;
+    onRowClick?: (row: TData) => void;
+    renderToolbar?: (input: { clearSelection: () => void; selectedRows: TData[] }) => ReactNode;
+};
+
+const getSortIndicator = (value: false | 'asc' | 'desc') => {
+    if (value === 'asc') {
+        return '↑';
+    }
+
+    if (value === 'desc') {
+        return '↓';
+    }
+
+    return <ArrowDownUp className="size-3" />;
+};
+
+const getRangeRowIds = (visibleRowIds: string[], anchorRowId: string, targetRowId: string) => {
+    const anchorIndex = visibleRowIds.indexOf(anchorRowId);
+    const targetIndex = visibleRowIds.indexOf(targetRowId);
+
+    if (anchorIndex === -1 || targetIndex === -1) {
+        return null;
+    }
+
+    const [startIndex, endIndex] = anchorIndex <= targetIndex ? [anchorIndex, targetIndex] : [targetIndex, anchorIndex];
+    return visibleRowIds.slice(startIndex, endIndex + 1);
+};
+
+const applySelectionState = (selection: RowSelectionState, rowIds: string[], checked: boolean) => {
+    const nextSelection = { ...selection };
+
+    for (const rowId of rowIds) {
+        if (checked) {
+            nextSelection[rowId] = true;
+            continue;
+        }
+
+        delete nextSelection[rowId];
+    }
+
+    return nextSelection;
+};
+
+export function DataTable<TData>({
+    className,
+    columns,
+    data,
+    emptyMessage,
+    enableRowSelection = false,
+    getRowId,
+    initialSorting = [],
+    onRowClick,
+    renderToolbar,
+}: DataTableProps<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);
+
+        if (shiftKey && lastSelectedRowIdRef.current) {
+            const rangeRowIds = getRangeRowIds(visibleRowIds, lastSelectedRowIdRef.current, rowId);
+            if (rangeRowIds) {
+                setRowSelection(applySelectionState(rowSelection, rangeRowIds, checked));
+                lastSelectedRowIdRef.current = rowId;
+                return;
+            }
+        }
+
+        setRowSelection(applySelectionState(rowSelection, [rowId], checked));
+        lastSelectedRowIdRef.current = rowId;
+    };
+
+    const selectionColumn: ColumnDef<TData, any> = {
+        cell: ({ row }) => (
+            <Checkbox
+                aria-label={`Select row ${row.id}`}
+                checked={row.getIsSelected()}
+                onPointerDown={(event) => {
+                    event.stopPropagation();
+                    pendingShiftSelectionRowIdRef.current = event.shiftKey ? row.id : null;
+                }}
+                onCheckedChange={(checked) => {
+                    if (typeof checked !== 'boolean') {
+                        return;
+                    }
+
+                    const shiftKey = pendingShiftSelectionRowIdRef.current === row.id;
+                    pendingShiftSelectionRowIdRef.current = null;
+                    updateSelectionForRow(row.id, checked, shiftKey);
+                }}
+            />
+        ),
+        enableSorting: false,
+        header: ({ table }) => (
+            <Checkbox
+                aria-label="Select all rows"
+                checked={
+                    table.getIsAllPageRowsSelected()
+                        ? true
+                        : table.getIsSomePageRowsSelected()
+                          ? 'indeterminate'
+                          : false
+                }
+                onCheckedChange={(checked) => table.toggleAllPageRowsSelected(checked === true)}
+            />
+        ),
+        id: 'select',
+    };
+    const tableColumns = enableRowSelection ? [selectionColumn, ...columns] : [...columns];
+    const table = useReactTable({
+        autoResetPageIndex: false,
+        columns: tableColumns,
+        data,
+        enableRowSelection,
+        enableSortingRemoval: false,
+        getCoreRowModel: getCoreRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        getRowId,
+        getSortedRowModel: getSortedRowModel(),
+        onRowSelectionChange: setRowSelection,
+        onSortingChange: setSorting,
+        sortDescFirst: false,
+        state: {
+            rowSelection,
+            sorting,
+        },
+    });
+    const selectedRows = table.getSelectedRowModel().rows.map((row) => row.original);
+
+    return (
+        <div
+            className={cn(
+                'w-full overflow-x-auto rounded-[1.5rem] border border-[var(--border)] bg-[var(--panel)]',
+                className,
+            )}
+        >
+            {renderToolbar ? (
+                <div className="border-[var(--border)] border-b px-4 py-3">
+                    {renderToolbar({
+                        clearSelection: () => setRowSelection({}),
+                        selectedRows,
+                    })}
+                </div>
+            ) : null}
+            <Table className="min-w-full">
+                <TableHeader className="bg-[var(--panel-secondary)]">
+                    {table.getHeaderGroups().map((headerGroup) => (
+                        <TableRow key={headerGroup.id} className="border-[var(--border)] hover:bg-transparent">
+                            {headerGroup.headers.map((header) => (
+                                <TableHead
+                                    key={header.id}
+                                    className="h-10 whitespace-nowrap px-4 font-semibold text-[11px] text-[var(--muted-foreground)] uppercase tracking-[0.18em]"
+                                >
+                                    {header.isPlaceholder ? null : header.column.getCanSort() ? (
+                                        <button
+                                            className="inline-flex items-center gap-1.5 text-left"
+                                            type="button"
+                                            onClick={header.column.getToggleSortingHandler()}
+                                        >
+                                            <span>
+                                                {flexRender(header.column.columnDef.header, header.getContext())}
+                                            </span>
+                                            <span aria-hidden="true" className="text-[10px]">
+                                                {getSortIndicator(header.column.getIsSorted())}
+                                            </span>
+                                        </button>
+                                    ) : (
+                                        flexRender(header.column.columnDef.header, header.getContext())
+                                    )}
+                                </TableHead>
+                            ))}
+                        </TableRow>
+                    ))}
+                </TableHeader>
+                <TableBody>
+                    {table.getRowModel().rows.length === 0 ? (
+                        <TableRow className="border-[var(--border)]">
+                            <TableCell
+                                className="px-4 py-10 text-center text-[var(--muted-foreground)] text-sm"
+                                colSpan={tableColumns.length}
+                            >
+                                {emptyMessage}
+                            </TableCell>
+                        </TableRow>
+                    ) : (
+                        table.getRowModel().rows.map((row) => {
+                            const clickable = Boolean(onRowClick);
+
+                            return (
+                                <TableRow
+                                    key={row.id}
+                                    className={cn(
+                                        'border-[var(--border)] hover:bg-[var(--panel-secondary)]/75',
+                                        clickable ? 'cursor-pointer' : '',
+                                    )}
+                                    onClick={() => {
+                                        if (!onRowClick) {
+                                            return;
+                                        }
+                                        onRowClick(row.original);
+                                    }}
+                                >
+                                    {row.getVisibleCells().map((cell) => (
+                                        <TableCell key={cell.id} className="px-4 py-2.5 align-top">
+                                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                        </TableCell>
+                                    ))}
+                                </TableRow>
+                            );
+                        })
+                    )}
+                </TableBody>
+            </Table>
+        </div>
+    );
+}

package/apps/ui/src/components/delete-confirm-dialog.tsx

@@ -0,0 +1,88 @@
+import { useEffect, useId, useState } from 'react';
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from '#/components/ui/alert-dialog';
+import { Checkbox } from '#/components/ui/checkbox';
+
+type DeleteConfirmDialogProps = {
+    confirmLabel?: string;
+    defaultDeleteSessionFiles?: boolean;
+    description: string;
+    errorMessage?: string | null;
+    open: boolean;
+    showDeleteSessionFilesOption?: boolean;
+    title: string;
+    onConfirm: (options: { deleteSessionFiles: boolean }) => void;
+    onOpenChange: (open: boolean) => void;
+};
+
+export function DeleteConfirmDialog({
+    confirmLabel = 'Delete',
+    defaultDeleteSessionFiles = false,
+    description,
+    errorMessage = null,
+    open,
+    showDeleteSessionFilesOption = false,
+    title,
+    onConfirm,
+    onOpenChange,
+}: DeleteConfirmDialogProps) {
+    const checkboxId = useId();
+    const checkboxDescriptionId = useId();
+    const [deleteSessionFiles, setDeleteSessionFiles] = useState(defaultDeleteSessionFiles);
+
+    useEffect(() => {
+        if (!open) {
+            setDeleteSessionFiles(defaultDeleteSessionFiles);
+        }
+    }, [defaultDeleteSessionFiles, open]);
+
+    return (
+        <AlertDialog open={open} onOpenChange={onOpenChange}>
+            <AlertDialogContent className="border-[var(--border)] bg-[var(--panel)] text-[var(--foreground)]">
+                <AlertDialogHeader>
+                    <AlertDialogTitle>{title}</AlertDialogTitle>
+                    <AlertDialogDescription className="text-[var(--muted-foreground)]">
+                        {description}
+                    </AlertDialogDescription>
+                </AlertDialogHeader>
+                {showDeleteSessionFilesOption ? (
+                    <div className="flex items-start gap-3 rounded-xl border border-[var(--border)] bg-[var(--background)]/70 px-4 py-3 text-sm">
+                        <Checkbox
+                            aria-label="Delete Session files"
+                            aria-describedby={checkboxDescriptionId}
+                            checked={deleteSessionFiles}
+                            id={checkboxId}
+                            onCheckedChange={(checked) => setDeleteSessionFiles(checked === true)}
+                        />
+                        <span className="space-y-1">
+                            <label className="block font-medium" htmlFor={checkboxId}>
+                                Delete Session files
+                            </label>
+                            <span className="block text-[var(--muted-foreground)] text-xs" id={checkboxDescriptionId}>
+                                Remove the rollout JSONL from disk as well, so Codex cannot backfill this thread later.
+                            </span>
+                        </span>
+                    </div>
+                ) : null}
+                {errorMessage ? <p className="text-[var(--destructive)] text-sm">{errorMessage}</p> : null}
+                <AlertDialogFooter>
+                    <AlertDialogCancel className="border-[var(--border)]">Cancel</AlertDialogCancel>
+                    <AlertDialogAction
+                        className="bg-[var(--destructive)] text-[var(--destructive-foreground)] hover:bg-[var(--destructive)]/90"
+                        onClick={() => onConfirm({ deleteSessionFiles })}
+                    >
+                        {confirmLabel}
+                    </AlertDialogAction>
+                </AlertDialogFooter>
+            </AlertDialogContent>
+        </AlertDialog>
+    );
+}

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

@@ -0,0 +1,174 @@
+import { useEffect, useId, useState } from 'react';
+import { Button } from '#/components/ui/button';
+import { Checkbox } from '#/components/ui/checkbox';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '#/components/ui/dialog';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '#/components/ui/select';
+
+type ExportDialogProps = {
+    disabled?: boolean;
+    errorMessage?: string | null;
+    forceZipArchive?: boolean;
+    open: boolean;
+    pending?: boolean;
+    title?: string;
+    onExport: (options: {
+        includeCommentary: boolean;
+        includeMetadata: boolean;
+        includeTools: boolean;
+        outputFormat: 'md' | 'txt';
+        zipArchive: boolean;
+    }) => void;
+    onOpenChange: (open: boolean) => void;
+};
+
+export function ExportDialog({
+    disabled = false,
+    errorMessage = null,
+    forceZipArchive = false,
+    open,
+    pending = false,
+    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 zipDescriptionId = useId();
+
+    useEffect(() => {
+        if (!open) {
+            setOutputFormat('md');
+            setIncludeMetadata(true);
+            setIncludeCommentary(false);
+            setIncludeTools(true);
+            setZipArchive(false);
+        }
+    }, [open]);
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="border-[var(--border)] bg-[var(--panel)] text-[var(--foreground)]">
+                <DialogHeader>
+                    <DialogTitle>{title}</DialogTitle>
+                    <DialogDescription className="text-[var(--muted-foreground)]">
+                        Choose the transcript format and whether the export includes tool calls.
+                    </DialogDescription>
+                </DialogHeader>
+
+                <div className="space-y-5 py-2">
+                    <div className="space-y-2">
+                        <label className="font-medium text-sm" htmlFor="output-format">
+                            Output format
+                        </label>
+                        <Select value={outputFormat} onValueChange={(value) => setOutputFormat(value as 'md' | 'txt')}>
+                            <SelectTrigger
+                                id="output-format"
+                                className="border-[var(--border)] bg-[var(--panel-secondary)] text-[var(--foreground)]"
+                            >
+                                <SelectValue placeholder="Choose a format" />
+                            </SelectTrigger>
+                            <SelectContent className="border-[var(--border)] bg-[var(--panel)] text-[var(--foreground)] shadow-[var(--panel-shadow)]">
+                                <SelectItem value="md">Markdown (.md)</SelectItem>
+                                <SelectItem value="txt">Plain text (.txt)</SelectItem>
+                            </SelectContent>
+                        </Select>
+                    </div>
+
+                    <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)}
+                        />
+                        <span className="space-y-1">
+                            <span className="block font-medium text-sm">Include metadata</span>
+                            <span className="block text-[var(--muted-foreground)] text-sm">
+                                Includes the chat metadata section at the top of the exported transcript.
+                            </span>
+                        </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.
+                            </span>
+                        </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 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.
+                            </span>
+                        </span>
+                    </div>
+
+                    <div className="flex items-center gap-3 rounded-2xl border border-[var(--border)] bg-[var(--panel-secondary)] p-3">
+                        <Checkbox
+                            aria-label="Zip archive"
+                            aria-describedby={zipDescriptionId}
+                            checked={effectiveZipArchive}
+                            disabled={forceZipArchive}
+                            onCheckedChange={(checked) => setZipArchive(checked === true)}
+                        />
+                        <span className="space-y-1">
+                            <span className="block font-medium text-sm">Zip archive</span>
+                            <span className="block text-[var(--muted-foreground)] text-sm" id={zipDescriptionId}>
+                                {forceZipArchive
+                                    ? 'Required when exporting multiple threads.'
+                                    : 'Downloads the exported transcript inside a .zip archive.'}
+                            </span>
+                        </span>
+                    </div>
+                </div>
+
+                {errorMessage ? <p className="text-[var(--destructive)] text-sm">{errorMessage}</p> : null}
+
+                <DialogFooter>
+                    <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,
+                            })
+                        }
+                    >
+                        {pending ? 'Exporting...' : 'Download export'}
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}

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)}
+                    />
+                );
+            }}
+        />
+    );
+};