spiracha 1.5.0 → 2.1.0

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

@@ -0,0 +1,150 @@
+import type { ClaudeCodeSessionSummary } from '@spiracha/lib/claude-code-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, formatTokens } from '#/lib/formatters';
+
+type ClaudeCodeSessionsTableProps = {
+    onDeleteSession: (session: ClaudeCodeSessionSummary) => void;
+    onDeleteSessions: (sessionIds: string[]) => void;
+    onExportSession: (session: ClaudeCodeSessionSummary) => void;
+    onExportSessions: (sessionIds: string[]) => void;
+    sessions: ClaudeCodeSessionSummary[];
+};
+
+const columnHelper = createColumnHelper<ClaudeCodeSessionSummary>();
+const defaultSorting: SortingState = [{ desc: true, id: 'lastActive' }];
+
+const columns = (
+    onDeleteSession: (session: ClaudeCodeSessionSummary) => void,
+    onExportSession: (session: ClaudeCodeSessionSummary) => 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="/claude-code-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('model', {
+            cell: (info) => <span className="text-sm">{info.getValue() ?? 'unknown'}</span>,
+            header: 'Model',
+        }),
+        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('totalTokens', {
+            cell: (info) => (
+                <span className="whitespace-nowrap font-mono text-sm">{formatTokens(info.getValue())}</span>
+            ),
+            header: 'Tokens',
+        }),
+        columnHelper.accessor('version', {
+            cell: (info) => <span className="font-mono text-sm">{info.getValue() ?? 'unknown'}</span>,
+            header: 'Version',
+        }),
+        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 function ClaudeCodeSessionsTable({
+    onDeleteSession,
+    onDeleteSessions,
+    onExportSession,
+    onExportSessions,
+    sessions,
+}: ClaudeCodeSessionsTableProps) {
+    const tableColumns = useMemo(() => columns(onDeleteSession, onExportSession), [onDeleteSession, onExportSession]);
+
+    return (
+        <DataTable
+            columns={tableColumns}
+            data={sessions}
+            emptyMessage="No Claude Code sessions match the current workspace filter."
+            enableRowSelection
+            getRowId={(row) => row.sessionId}
+            initialSorting={defaultSorting}
+            renderToolbar={({ clearSelection, selectedRows }) => {
+                const selectedSessionIds = selectedRows.map((row) => row.sessionId);
+                const hasEmptySelection = selectedRows.some((row) => row.renderablePartCount === 0);
+                return (
+                    <SelectionActionsToolbar
+                        clearSelection={clearSelection}
+                        exportDisabled={hasEmptySelection}
+                        itemLabel="session"
+                        selectedCount={selectedRows.length}
+                        onDeleteSelected={() => onDeleteSessions(selectedSessionIds)}
+                        onExportSelected={() => onExportSessions(selectedSessionIds)}
+                    />
+                );
+            }}
+        />
+    );
+}

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

@@ -0,0 +1,57 @@
+import type { ClaudeCodeWorkspaceGroup } from '@spiracha/lib/claude-code-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 ClaudeCodeWorkspacesTableProps = {
+    workspaces: ClaudeCodeWorkspaceGroup[];
+};
+
+const columnHelper = createColumnHelper<ClaudeCodeWorkspaceGroup>();
+
+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="/claude-code/$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: 'Tool calls',
+    }),
+    columnHelper.accessor('lastActiveAtMs', {
+        cell: (info) => (
+            <span className="whitespace-nowrap text-sm" suppressHydrationWarning>
+                {formatDateTime(info.getValue())}
+            </span>
+        ),
+        header: 'Last active',
+    }),
+] as const;
+
+export function ClaudeCodeWorkspacesTable({ workspaces }: ClaudeCodeWorkspacesTableProps) {
+    return (
+        <DataTable
+            columns={columns}
+            data={workspaces}
+            emptyMessage="No Claude Code workspaces match the current search."
+        />
+    );
+}

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

@@ -0,0 +1,152 @@
+import type { CursorThreadSummary } from '@spiracha/lib/cursor-exporter-types';
+import { Link } from '@tanstack/react-router';
+import type { SortingState } from '@tanstack/react-table';
+import { createColumnHelper } from '@tanstack/react-table';
+import { Download, MoreHorizontal, Trash2 } 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 { formatBytes, formatDateTime, formatNumber } from '#/lib/formatters';
+
+type CursorThreadsTableProps = {
+    onDeleteThread: (thread: CursorThreadSummary) => void;
+    onDeleteThreads: (composerIds: string[]) => void;
+    onExportThread: (thread: CursorThreadSummary) => void;
+    onExportThreads: (composerIds: string[]) => void;
+    threads: CursorThreadSummary[];
+};
+
+const columnHelper = createColumnHelper<CursorThreadSummary>();
+const defaultSorting: SortingState = [{ desc: true, id: 'updatedAt' }];
+
+const columns = (
+    onDeleteThread: (thread: CursorThreadSummary) => void,
+    onExportThread: (thread: CursorThreadSummary) => void,
+) =>
+    [
+        columnHelper.accessor('name', {
+            cell: (info) => (
+                <Link
+                    className="block w-[16rem] max-w-[20rem] space-y-1 rounded-md outline-none transition hover:opacity-80 focus-visible:ring-2 focus-visible:ring-[var(--accent)] lg:w-auto"
+                    params={{ composerId: info.row.original.composerId }}
+                    to="/cursor-threads/$composerId"
+                >
+                    <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.mode ? `${info.row.original.mode} · ` : ''}
+                        {info.row.original.composerId}
+                    </p>
+                </Link>
+            ),
+            header: 'Thread',
+        }),
+        columnHelper.accessor('lastUpdatedAtMs', {
+            cell: (info) => (
+                <span className="whitespace-nowrap text-sm" suppressHydrationWarning>
+                    {formatDateTime(info.getValue())}
+                </span>
+            ),
+            header: 'Updated',
+            id: 'updatedAt',
+        }),
+        columnHelper.accessor('createdAtMs', {
+            cell: (info) => (
+                <span className="whitespace-nowrap text-sm" suppressHydrationWarning>
+                    {formatDateTime(info.getValue())}
+                </span>
+            ),
+            header: 'Created',
+            id: 'createdAt',
+        }),
+        columnHelper.accessor('mode', {
+            cell: (info) => <span className="font-mono text-sm">{info.getValue() ?? 'unknown'}</span>,
+            header: 'Mode',
+        }),
+        columnHelper.accessor('bubbleCount', {
+            cell: (info) => <span className="font-mono text-sm">{formatNumber(info.getValue())}</span>,
+            header: 'Messages',
+        }),
+        columnHelper.accessor('bubbleBytes', {
+            cell: (info) => <span className="font-mono text-sm">{formatBytes(info.getValue())}</span>,
+            header: 'Size',
+        }),
+        columnHelper.display({
+            cell: (info) => (
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <Button
+                            aria-label={`Actions for ${info.row.original.name}`}
+                            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.bubbleCount === 0}
+                            onClick={() => onExportThread(info.row.original)}
+                        >
+                            <Download className="mr-2 size-4" />
+                            Export thread
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                            className="text-[var(--destructive)]"
+                            onClick={() => onDeleteThread(info.row.original)}
+                        >
+                            <Trash2 className="mr-2 size-4" />
+                            Delete thread
+                        </DropdownMenuItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            ),
+            enableSorting: false,
+            header: '',
+            id: 'actions',
+        }),
+    ] as const;
+
+export const CursorThreadsTable = ({
+    onDeleteThread,
+    onDeleteThreads,
+    onExportThread,
+    onExportThreads,
+    threads,
+}: CursorThreadsTableProps) => {
+    const tableColumns = useMemo(() => columns(onDeleteThread, onExportThread), [onDeleteThread, onExportThread]);
+
+    return (
+        <DataTable
+            columns={tableColumns}
+            data={threads}
+            emptyMessage="No Cursor threads match the current workspace filter."
+            enableRowSelection
+            getRowId={(row) => row.composerId}
+            initialSorting={defaultSorting}
+            renderToolbar={({ clearSelection, selectedRows }) => {
+                const selectedComposerIds = selectedRows.map((row) => row.composerId);
+                const hasEmptySelection = selectedRows.some((row) => row.bubbleCount === 0);
+                return (
+                    <SelectionActionsToolbar
+                        clearSelection={clearSelection}
+                        exportDisabled={hasEmptySelection}
+                        itemLabel="thread"
+                        selectedCount={selectedRows.length}
+                        onDeleteSelected={() => onDeleteThreads(selectedComposerIds)}
+                        onExportSelected={() => onExportThreads(selectedComposerIds)}
+                    />
+                );
+            }}
+        />
+    );
+};

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

@@ -0,0 +1,140 @@
+import type { CursorWorkspaceGroup } from '@spiracha/lib/cursor-exporter-types';
+import { Link } from '@tanstack/react-router';
+import { createColumnHelper } from '@tanstack/react-table';
+import { MoreHorizontal, RefreshCcw, Trash2 } from 'lucide-react';
+import { DataTable } from '#/components/data-table';
+import { Badge } from '#/components/ui/badge';
+import { Button } from '#/components/ui/button';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '#/components/ui/dropdown-menu';
+import { formatDateTime, formatNumber } from '#/lib/formatters';
+
+type CursorWorkspacesTableProps = {
+    onDeleteWorkspace: (workspace: CursorWorkspaceGroup) => void;
+    onRecoverWorkspace: (workspace: CursorWorkspaceGroup) => void;
+    workspaces: CursorWorkspaceGroup[];
+};
+
+const columnHelper = createColumnHelper<CursorWorkspaceGroup>();
+
+const getWorkspaceLocation = (workspace: CursorWorkspaceGroup) => workspace.folders[0] ?? workspace.uri;
+
+const getWorkspaceStorageLabel = (workspace: CursorWorkspaceGroup) => {
+    if (workspace.buckets.length === 0) {
+        return 'File history';
+    }
+
+    return `${formatNumber(workspace.buckets.length)} bucket${workspace.buckets.length === 1 ? '' : 's'}`;
+};
+
+const getWorkspaceStateLabel = (workspace: CursorWorkspaceGroup) => {
+    if (workspace.needsRecovery) {
+        return 'Recovery available';
+    }
+
+    if (workspace.buckets.length === 0) {
+        return 'Activity only';
+    }
+
+    return 'Current';
+};
+
+const columns = (
+    onDeleteWorkspace: (workspace: CursorWorkspaceGroup) => void,
+    onRecoverWorkspace: (workspace: CursorWorkspaceGroup) => void,
+) =>
+    [
+        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="/cursor/$workspaceKey"
+                >
+                    <div className="flex items-center gap-2">
+                        <p className="truncate font-medium underline-offset-2 hover:underline">{info.getValue()}</p>
+                        {info.row.original.needsRecovery ? <Badge variant="outline">recover</Badge> : null}
+                    </div>
+                    <p className="truncate text-[var(--muted-foreground)] text-xs">
+                        {getWorkspaceLocation(info.row.original)}
+                    </p>
+                </Link>
+            ),
+            header: 'Workspace',
+        }),
+        columnHelper.accessor('threadCount', {
+            cell: (info) => <span className="font-mono text-sm">{formatNumber(info.getValue())}</span>,
+            header: 'Threads',
+        }),
+        columnHelper.display({
+            cell: (info) => <span className="text-sm">{getWorkspaceStorageLabel(info.row.original)}</span>,
+            header: 'Storage',
+            id: 'storage',
+        }),
+        columnHelper.display({
+            cell: (info) => <span className="text-sm">{getWorkspaceStateLabel(info.row.original)}</span>,
+            header: 'State',
+            id: 'state',
+        }),
+        columnHelper.accessor('lastActiveMs', {
+            cell: (info) => (
+                <span className="whitespace-nowrap text-sm" suppressHydrationWarning>
+                    {formatDateTime(info.getValue())}
+                </span>
+            ),
+            header: 'Last updated',
+        }),
+        columnHelper.display({
+            cell: (info) => (
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <Button
+                            aria-label={`Actions for ${info.row.original.label}`}
+                            className="rounded-full"
+                            size="icon"
+                            type="button"
+                            variant="ghost"
+                            onClick={(event) => event.stopPropagation()}
+                        >
+                            <MoreHorizontal className="size-4" />
+                        </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                        {info.row.original.needsRecovery ? (
+                            <DropdownMenuItem onClick={() => onRecoverWorkspace(info.row.original)}>
+                                <RefreshCcw className="mr-2 size-4" />
+                                Recover workspace
+                            </DropdownMenuItem>
+                        ) : null}
+                        <DropdownMenuItem
+                            className="text-[var(--destructive)]"
+                            onClick={() => onDeleteWorkspace(info.row.original)}
+                        >
+                            <Trash2 className="mr-2 size-4" />
+                            Delete workspace
+                        </DropdownMenuItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            ),
+            header: '',
+            id: 'actions',
+        }),
+    ] as const;
+
+export const CursorWorkspacesTable = ({
+    onDeleteWorkspace,
+    onRecoverWorkspace,
+    workspaces,
+}: CursorWorkspacesTableProps) => {
+    return (
+        <DataTable
+            columns={columns(onDeleteWorkspace, onRecoverWorkspace)}
+            data={workspaces}
+            emptyMessage="No Cursor workspaces match the current search."
+        />
+    );
+};