spiracha 1.5.0 → 2.1.0

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

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

package/apps/ui/src/components/json-panel.tsx

@@ -0,0 +1,17 @@
+type JsonPanelProps = {
+    title: string;
+    value: unknown;
+};
+
+export function JsonPanel({ title, value }: JsonPanelProps) {
+    return (
+        <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]">
+                {title}
+            </h3>
+            <pre className="mt-4 overflow-x-auto rounded-2xl border border-[var(--border)] bg-[var(--code-background)] p-4 text-[var(--code-foreground)] text-xs leading-5">
+                {JSON.stringify(value, null, 2)}
+            </pre>
+        </section>
+    );
+}

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

@@ -0,0 +1,148 @@
+import type { KiroSessionSummary } from '@spiracha/lib/kiro-exporter-types';
+import { Link } from '@tanstack/react-router';
+import type { SortingState } from '@tanstack/react-table';
+import { createColumnHelper } from '@tanstack/react-table';
+import { Download, MoreHorizontal, 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 KiroSessionsTableProps = {
+    onDeleteSession: (session: KiroSessionSummary) => void;
+    onDeleteSessions: (sessionIds: string[]) => void;
+    onExportSession: (session: KiroSessionSummary) => void;
+    onExportSessions: (sessionIds: string[]) => void;
+    sessions: KiroSessionSummary[];
+};
+
+const columnHelper = createColumnHelper<KiroSessionSummary>();
+const defaultSorting: SortingState = [{ desc: true, id: 'lastActive' }];
+
+const columns = (
+    onDeleteSession: (session: KiroSessionSummary) => void,
+    onExportSession: (session: KiroSessionSummary) => 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="/kiro-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('selectedModel', {
+            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('imageCount', {
+            cell: (info) => <span className="font-mono text-sm">{formatNumber(info.getValue())}</span>,
+            header: 'Images',
+        }),
+        columnHelper.accessor('promptLogCount', {
+            cell: (info) => <span className="font-mono text-sm">{formatNumber(info.getValue())}</span>,
+            header: 'Prompt logs',
+        }),
+        columnHelper.accessor('sessionType', {
+            cell: (info) => <span className="font-mono text-sm">{info.getValue() ?? 'unknown'}</span>,
+            header: 'Type',
+        }),
+        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 KiroSessionsTable = ({
+    onDeleteSession,
+    onDeleteSessions,
+    onExportSession,
+    onExportSessions,
+    sessions,
+}: KiroSessionsTableProps) => {
+    const tableColumns = useMemo(() => columns(onDeleteSession, onExportSession), [onDeleteSession, onExportSession]);
+
+    return (
+        <DataTable
+            columns={tableColumns}
+            data={sessions}
+            emptyMessage="No Kiro sessions match the current workspace filter."
+            enableRowSelection
+            getRowId={(row) => row.sessionId}
+            initialSorting={defaultSorting}
+            renderToolbar={({ clearSelection, selectedRows }) => {
+                const selectedSessionIds = selectedRows.map((row) => row.sessionId);
+                const hasEmptySelection = selectedRows.some((row) => row.renderablePartCount === 0);
+                return (
+                    <SelectionActionsToolbar
+                        clearSelection={clearSelection}
+                        exportDisabled={hasEmptySelection}
+                        itemLabel="session"
+                        selectedCount={selectedRows.length}
+                        onDeleteSelected={() => onDeleteSessions(selectedSessionIds)}
+                        onExportSelected={() => onExportSessions(selectedSessionIds)}
+                    />
+                );
+            }}
+        />
+    );
+};

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

@@ -0,0 +1,53 @@
+import type { KiroWorkspaceGroup } from '@spiracha/lib/kiro-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 KiroWorkspacesTableProps = {
+    workspaces: KiroWorkspaceGroup[];
+};
+
+const columnHelper = createColumnHelper<KiroWorkspaceGroup>();
+
+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="/kiro/$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('imageCount', {
+        cell: (info) => <span className="font-mono text-sm">{formatNumber(info.getValue())}</span>,
+        header: 'Images',
+    }),
+    columnHelper.accessor('lastActiveAtMs', {
+        cell: (info) => (
+            <span className="whitespace-nowrap text-sm" suppressHydrationWarning>
+                {formatDateTime(info.getValue())}
+            </span>
+        ),
+        header: 'Last active',
+    }),
+] as const;
+
+export const KiroWorkspacesTable = ({ workspaces }: KiroWorkspacesTableProps) => {
+    return (
+        <DataTable columns={columns} data={workspaces} emptyMessage="No Kiro workspaces match the current search." />
+    );
+};

package/apps/ui/src/components/list-search-input.tsx

@@ -0,0 +1,18 @@
+import { Input } from '#/components/ui/input';
+
+type ListSearchInputProps = {
+    placeholder: string;
+    value: string;
+    onValueChange: (value: string) => void;
+};
+
+export function ListSearchInput({ placeholder, value, onValueChange }: ListSearchInputProps) {
+    return (
+        <Input
+            className="h-10 w-full rounded-full border-[var(--border)] bg-[var(--panel)] px-4 sm:w-[20rem]"
+            placeholder={placeholder}
+            value={value}
+            onChange={(event) => onValueChange(event.target.value)}
+        />
+    );
+}

package/apps/ui/src/components/loading-panel.tsx

@@ -0,0 +1,23 @@
+import { Loader2 } from 'lucide-react';
+
+type LoadingPanelProps = {
+    description?: string;
+    title?: string;
+};
+
+export function LoadingPanel({
+    description = 'Fetching local data. Larger workspaces can take a moment.',
+    title = 'Loading',
+}: LoadingPanelProps) {
+    return (
+        <div className="rounded-[1.6rem] border border-[var(--border)] bg-[var(--panel)] px-6 py-10 text-center shadow-[var(--panel-shadow)]">
+            <div className="flex justify-center">
+                <div className="rounded-full border border-[var(--border)] bg-[var(--panel-secondary)] p-3">
+                    <Loader2 className="size-5 animate-spin text-[var(--accent)]" />
+                </div>
+            </div>
+            <p className="mt-4 font-medium text-sm">{title}</p>
+            <p className="mt-2 text-[var(--muted-foreground)] text-sm">{description}</p>
+        </div>
+    );
+}

package/apps/ui/src/components/metadata-section.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+
+type MetadataItem = {
+    label: string;
+    value: ReactNode;
+};
+
+type MetadataSectionProps = {
+    items: MetadataItem[];
+    title: string;
+};
+
+export function MetadataSection({ items, title }: MetadataSectionProps) {
+    return (
+        <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]">
+                {title}
+            </h3>
+            <dl className="mt-4 space-y-3">
+                {items.map((item) => (
+                    <div key={item.label} className="grid gap-1 sm:grid-cols-[11rem_1fr] sm:items-start">
+                        <dt className="font-medium text-[var(--muted-foreground)] text-xs uppercase tracking-[0.14em]">
+                            {item.label}
+                        </dt>
+                        <dd className="min-w-0 text-sm leading-6">{item.value}</dd>
+                    </div>
+                ))}
+            </dl>
+        </section>
+    );
+}

package/apps/ui/src/components/metric-card.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+
+type MetricCardProps = {
+    helper?: string;
+    label: string;
+    value: ReactNode;
+};
+
+export function MetricCard({ helper, label, value }: MetricCardProps) {
+    return (
+        <div className="rounded-2xl border border-[var(--border)] bg-[var(--panel)] p-4 shadow-[var(--panel-shadow)]">
+            <p className="font-semibold text-[10px] text-[var(--muted-foreground)] uppercase tracking-[0.18em]">
+                {label}
+            </p>
+            <p className="mt-2 truncate font-semibold text-lg tracking-[-0.03em]">{value}</p>
+            {helper ? <p className="mt-1.5 text-[var(--muted-foreground)] text-xs">{helper}</p> : null}
+        </div>
+    );
+}

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

@@ -0,0 +1,164 @@
+import type { OpenCodeSessionSummary } from '@spiracha/lib/opencode-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 { Badge } from '#/components/ui/badge';
+import { Button } from '#/components/ui/button';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '#/components/ui/dropdown-menu';
+import { formatDateTime, formatNumber, formatTokens } from '#/lib/formatters';
+
+type OpenCodeSessionsTableProps = {
+    onDeleteSession: (session: OpenCodeSessionSummary) => void;
+    onDeleteSessions: (sessionIds: string[]) => void;
+    onExportSession: (session: OpenCodeSessionSummary) => void;
+    onExportSessions: (sessionIds: string[]) => void;
+    sessions: OpenCodeSessionSummary[];
+};
+
+const columnHelper = createColumnHelper<OpenCodeSessionSummary>();
+const defaultSorting: SortingState = [{ desc: true, id: 'updatedAt' }];
+
+const formatCost = (value: number) => {
+    if (value <= 0) {
+        return '$0';
+    }
+
+    return `$${value.toFixed(value < 0.01 ? 4 : 2)}`;
+};
+
+const columns = (
+    onDeleteSession: (session: OpenCodeSessionSummary) => void,
+    onExportSession: (session: OpenCodeSessionSummary) => 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="/opencode-sessions/$sessionId"
+                >
+                    <div className="flex items-center gap-2">
+                        <p className="truncate font-medium underline-offset-2 hover:underline">{info.getValue()}</p>
+                        {info.row.original.archivedAtMs ? <Badge variant="outline">archived</Badge> : null}
+                    </div>
+                    <p className="truncate text-[var(--muted-foreground)] text-xs">
+                        {info.row.original.slug} · {info.row.original.sessionId}
+                    </p>
+                </Link>
+            ),
+            header: 'Session',
+        }),
+        columnHelper.accessor('lastUpdatedAtMs', {
+            cell: (info) => (
+                <span className="whitespace-nowrap text-sm" suppressHydrationWarning>
+                    {formatDateTime(info.getValue())}
+                </span>
+            ),
+            header: 'Updated',
+            id: 'updatedAt',
+        }),
+        columnHelper.accessor('agent', {
+            cell: (info) => <span className="font-mono text-sm">{info.getValue() ?? 'unknown'}</span>,
+            header: 'Agent',
+        }),
+        columnHelper.accessor('modelLabel', {
+            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('totalTokens', {
+            cell: (info) => (
+                <span className="whitespace-nowrap font-mono text-sm">{formatTokens(info.getValue())}</span>
+            ),
+            header: 'Tokens',
+        }),
+        columnHelper.accessor('cost', {
+            cell: (info) => <span className="font-mono text-sm">{formatCost(info.getValue())}</span>,
+            header: 'Cost',
+        }),
+        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 OpenCodeSessionsTable = ({
+    onDeleteSession,
+    onDeleteSessions,
+    onExportSession,
+    onExportSessions,
+    sessions,
+}: OpenCodeSessionsTableProps) => {
+    const tableColumns = useMemo(() => columns(onDeleteSession, onExportSession), [onDeleteSession, onExportSession]);
+
+    return (
+        <DataTable
+            columns={tableColumns}
+            data={sessions}
+            emptyMessage="No OpenCode sessions match the current workspace filter."
+            enableRowSelection
+            getRowId={(row) => row.sessionId}
+            initialSorting={defaultSorting}
+            renderToolbar={({ clearSelection, selectedRows }) => {
+                const selectedSessionIds = selectedRows.map((row) => row.sessionId);
+                const hasEmptySelection = selectedRows.some((row) => row.renderablePartCount === 0);
+                return (
+                    <SelectionActionsToolbar
+                        clearSelection={clearSelection}
+                        exportDisabled={hasEmptySelection}
+                        itemLabel="session"
+                        selectedCount={selectedRows.length}
+                        onDeleteSelected={() => onDeleteSessions(selectedSessionIds)}
+                        onExportSelected={() => onExportSessions(selectedSessionIds)}
+                    />
+                );
+            }}
+        />
+    );
+};

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

@@ -0,0 +1,57 @@
+import type { OpenCodeWorkspaceGroup } from '@spiracha/lib/opencode-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 OpenCodeWorkspacesTableProps = {
+    workspaces: OpenCodeWorkspaceGroup[];
+};
+
+const columnHelper = createColumnHelper<OpenCodeWorkspaceGroup>();
+
+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="/opencode/$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('partCount', {
+        cell: (info) => <span className="font-mono text-sm">{formatNumber(info.getValue())}</span>,
+        header: 'Parts',
+    }),
+    columnHelper.accessor('lastActiveMs', {
+        cell: (info) => (
+            <span className="whitespace-nowrap text-sm" suppressHydrationWarning>
+                {formatDateTime(info.getValue())}
+            </span>
+        ),
+        header: 'Last updated',
+    }),
+] as const;
+
+export const OpenCodeWorkspacesTable = ({ workspaces }: OpenCodeWorkspacesTableProps) => {
+    return (
+        <DataTable
+            columns={columns}
+            data={workspaces}
+            emptyMessage="No OpenCode workspaces match the current search."
+        />
+    );
+};

package/apps/ui/src/components/page-header.tsx

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