@gntik-ai/templates 0.0.0-stage → 0.6.0

package/src/create-workspace/Page.tsx

@@ -0,0 +1,227 @@
+import { PricingTable, type PricingTier, type RoleOption } from '@gntik-ai/blocks';
+import { Globe } from '@gntik-ai/icons';
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+  Heading,
+  Input,
+  Logo,
+  SelectableCard,
+  SelectableCardGroup,
+  SimpleSelect,
+  Stack,
+  Text,
+  TokenInput,
+  WizardLayout,
+  type StepItem,
+} from '@gntik-ai/ui';
+import { useId, useState, type ReactNode } from 'react';
+import {
+  EMAIL_RE,
+  slugify,
+  workspaceInitialValues,
+  workspacePlans,
+  workspaceRegions,
+  workspaceRoles,
+  workspaceSteps,
+  type WorkspaceRegion,
+  type WorkspaceValues,
+} from './data';
+
+export interface CreateWorkspaceProps {
+  steps: StepItem[];
+  initialValues: WorkspaceValues;
+  regions: readonly WorkspaceRegion[];
+  plans: readonly PricingTier[];
+  roles: readonly RoleOption[];
+  /** Host shown before the slug, e.g. "app.example.com/". */
+  addressPrefix: string;
+  maxInvites: number;
+  /** Called on the last step with the slug; return a promise to show the loading state. */
+  onFinish: (values: WorkspaceValues & { slug: string }) => void | Promise<void>;
+  onExit: () => void;
+  onStepChange: (index: number) => void;
+}
+
+function StepIntro({ id, title, children }: { id: string; title: string; children?: ReactNode }) {
+  return (
+    <Stack gap={1}>
+      <Heading level={1} id={id} size="lg">
+        {title}
+      </Heading>
+      {children && <Text variant="supporting">{children}</Text>}
+    </Stack>
+  );
+}
+
+const emailError = (token: string) => (EMAIL_RE.test(token) ? null : `${token} is not a valid email address`);
+
+/** Workspace onboarding: name and region as selectable cards, the plan as a selectable PricingTable, then inline invitations. */
+export default function CreateWorkspacePage({
+  steps = workspaceSteps,
+  initialValues = workspaceInitialValues,
+  regions = workspaceRegions,
+  plans = workspacePlans,
+  roles = workspaceRoles,
+  addressPrefix = 'app.example.com/',
+  maxInvites = 20,
+  onFinish,
+  onExit,
+  onStepChange,
+}: Partial<CreateWorkspaceProps>) {
+  const id = useId();
+  const [step, setStep] = useState(0);
+  const [values, setValues] = useState(initialValues);
+  const [touched, setTouched] = useState(false);
+  const [finishing, setFinishing] = useState(false);
+  const [status, setStatus] = useState('');
+  const set = <K extends keyof WorkspaceValues>(key: K, value: WorkspaceValues[K]) =>
+    setValues((v) => ({ ...v, [key]: value }));
+
+  const slug = slugify(values.name);
+  const nameValid = values.name.trim().length >= 2 && slug.length > 0;
+  const invalidInvites = values.invites.filter((e) => emailError(e)).length;
+  const go = (index: number) => {
+    setStep(index);
+    onStepChange?.(index);
+  };
+  const finish = async () => {
+    setFinishing(true);
+    try {
+      await onFinish?.({ ...values, slug });
+      setStatus(`Workspace “${values.name}” created`);
+    } finally {
+      setFinishing(false);
+    }
+  };
+
+  return (
+    <WizardLayout
+      fullScreen
+      logo={<Logo size={22} />}
+      title="Create a workspace"
+      steps={steps}
+      current={step}
+      onStepChange={go}
+      nextDisabled={(step === 0 && !nameValid) || (step === 3 && invalidInvites > 0)}
+      nextLoading={finishing}
+      finishLabel={values.invites.length > 0 ? 'Create and invite' : 'Create workspace'}
+      onFinish={() => void finish()}
+      onExit={onExit}
+      exitTitle="Leave workspace setup?"
+      exitDescription="The workspace has not been created yet. Your answers will be discarded."
+      footerStart={<span aria-live="polite">{status}</span>}
+    >
+      {step === 0 && (
+        <section aria-labelledby={`${id}-name`}>
+          <Stack gap={6}>
+            <StepIntro id={`${id}-name`} title="Name your workspace">
+              A workspace holds your projects, members and billing.
+            </StepIntro>
+            <Field invalid={touched && !nameValid}>
+              <FieldLabel required>Workspace name</FieldLabel>
+              <Input
+                required
+                value={values.name}
+                onValueChange={(v) => set('name', v)}
+                onBlur={() => setTouched(true)}
+                placeholder="Acme Inc."
+              />
+              <FieldDescription>
+                Address:{' '}
+                <span className="font-mono text-foreground">
+                  {addressPrefix}
+                  {slug || 'your-workspace'}
+                </span>
+              </FieldDescription>
+              <FieldError match={touched && !nameValid}>Enter at least two characters.</FieldError>
+            </Field>
+          </Stack>
+        </section>
+      )}
+      {step === 1 && (
+        <section aria-labelledby={`${id}-region`}>
+          <Stack gap={6}>
+            <StepIntro id={`${id}-region`} title="Where should your data live?">
+              Projects in this workspace run and store data in this region.
+            </StepIntro>
+            <SelectableCardGroup
+              aria-labelledby={`${id}-region`}
+              value={values.region}
+              onValueChange={(v) => set('region', v)}
+              columns={1}
+            >
+              {regions.map((r) => (
+                <SelectableCard
+                  key={r.value}
+                  value={r.value}
+                  title={r.title}
+                  description={r.description}
+                  meta={r.meta}
+                  icon={<Globe size={18} aria-hidden />}
+                />
+              ))}
+            </SelectableCardGroup>
+          </Stack>
+        </section>
+      )}
+      {step === 2 && (
+        <section aria-labelledby={`${id}-plan`}>
+          <Stack gap={6}>
+            <StepIntro id={`${id}-plan`} title="Pick a plan">
+              Change or cancel at any time from Billing.
+            </StepIntro>
+            <PricingTable
+              className="p-0 sm:p-0"
+              tiers={[...plans]}
+              title={null}
+              eyebrow={null}
+              description={null}
+              aria-labelledby={`${id}-plan`}
+              headingLevel="h2"
+              showCycleToggle={false}
+              columns={1}
+              selectable
+              value={values.plan}
+              onValueChange={(v) => set('plan', v)}
+            />
+          </Stack>
+        </section>
+      )}
+      {step === 3 && (
+        <section aria-labelledby={`${id}-invite`}>
+          <Stack gap={6}>
+            <StepIntro id={`${id}-invite`} title="Invite your team">
+              Optional: you can invite people later from Members.
+            </StepIntro>
+            <Field invalid={invalidInvites > 0}>
+              <FieldLabel>Email addresses</FieldLabel>
+              <TokenInput
+                value={values.invites}
+                onValueChange={(v) => set('invites', v)}
+                validate={emailError}
+                maxItems={maxInvites}
+                placeholder="name@company.com"
+                listLabel="Invited addresses"
+                invalid={invalidInvites > 0}
+              />
+              <FieldDescription>Separate addresses with commas or Enter.</FieldDescription>
+              <FieldError match={invalidInvites > 0}>
+                Fix {invalidInvites} invalid {invalidInvites === 1 ? 'address' : 'addresses'}.
+              </FieldError>
+            </Field>
+            <SimpleSelect
+              label="Role"
+              items={roles.map(({ value, label }) => ({ value, label }))}
+              value={values.role}
+              onValueChange={(v) => v && set('role', v)}
+              className="w-full sm:max-w-xs"
+            />
+          </Stack>
+        </section>
+      )}
+    </WizardLayout>
+  );
+}

package/src/create-workspace/data.ts

@@ -0,0 +1,61 @@
+import { memberRoles, samplePricingTiers, type PricingTier, type RoleOption } from '@gntik-ai/blocks';
+import type { StepItem } from '@gntik-ai/ui';
+
+export interface WorkspaceValues {
+  name: string;
+  region: string;
+  plan: string;
+  invites: string[];
+  role: string;
+}
+
+export interface WorkspaceRegion {
+  value: string;
+  title: string;
+  description: string;
+  meta: string;
+}
+
+export const workspaceSteps: StepItem[] = [
+  { id: 'name', label: 'Workspace' },
+  { id: 'region', label: 'Region' },
+  { id: 'plan', label: 'Plan' },
+  { id: 'invite', label: 'Invite' },
+];
+
+export const workspaceRegions: WorkspaceRegion[] = [
+  { value: 'eu', title: 'Europe', description: 'Frankfurt and Ireland', meta: 'GDPR data residency' },
+  { value: 'us', title: 'United States', description: 'Virginia and Oregon', meta: 'Lowest latency in the Americas' },
+  { value: 'ap', title: 'Asia Pacific', description: 'Mumbai and Singapore', meta: 'Lowest latency in Asia' },
+];
+
+export const workspacePlans: PricingTier[] = samplePricingTiers;
+export const workspaceRoles: RoleOption[] = memberRoles;
+
+export const workspaceInitialValues: WorkspaceValues = {
+  name: '',
+  region: 'eu',
+  plan: 'team',
+  invites: [],
+  role: 'member',
+};
+
+export const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+/** URL-safe slug for the workspace address. */
+export const slugify = (name: string) =>
+  name
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '');
+
+const usd = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 });
+
+/** "$49 / month", "Free" or "Custom pricing". */
+export const planPrice = (tier: PricingTier) =>
+  tier.priceMonthly == null
+    ? 'Custom pricing'
+    : tier.priceMonthly === 0
+      ? 'Free'
+      : `${usd.format(tier.priceMonthly)} / month`;

package/src/create-workspace/template.meta.ts

@@ -0,0 +1,12 @@
+import type { TemplateMeta } from '../meta';
+
+export const meta: TemplateMeta = {
+  name: 'Create workspace',
+  family: 'Onboarding',
+  priority: 'P2',
+  status: 'beta',
+  description:
+    'Workspace onboarding wizard: name with address preview, data region and plan as selectable cards, and inline team invitations with email chips and a role.',
+  layout: 'WizardLayout',
+  blocks: [],
+};

package/src/data-explorer/Page.test.tsx

@@ -0,0 +1,45 @@
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../test/a11y';
+import DataExplorerPage from './Page';
+import { explorerRows, generateExplorerRows } from './data';
+
+const small = generateExplorerRows(300);
+
+describe('DataExplorerPage', () => {
+  it('renders the query bar and the table over 10k rows', { timeout: 20000 }, async () => {
+    render(<DataExplorerPage />);
+    expect(explorerRows).toHaveLength(10_000);
+    expect(screen.getByRole('main')).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 1, name: 'Data explorer' })).toBeInTheDocument();
+    expect(screen.getByText('10,000 of 10,000 rows')).toBeInTheDocument();
+    const table = screen.getByRole('table', { name: 'request_logs rows' });
+    expect(within(table).getAllByRole('row')).toHaveLength(51);
+    await expectNoAxeViolations();
+  });
+
+  it('filters with a typed PowerSearch term', { timeout: 15000 }, async () => {
+    render(<DataExplorerPage rows={small} />);
+    await userEvent.click(screen.getByRole('combobox', { name: 'Filter request_logs' }));
+    await userEvent.keyboard('status>=500{Enter}');
+    const expected = small.filter((r) => r.status >= 500).length;
+    expect(screen.getByText(`${expected} of 300 rows`)).toBeInTheDocument();
+  });
+
+  it('chooses columns and inspects a row', { timeout: 15000 }, async () => {
+    render(<DataExplorerPage rows={small} />);
+    await userEvent.click(screen.getAllByRole('button', { name: 'Columns' })[0]!);
+    const dialog = await screen.findByRole('dialog');
+    await userEvent.click(within(dialog).getByRole('option', { name: /Region/ }));
+    await userEvent.click(within(dialog).getByRole('button', { name: 'Add checked' }));
+    await userEvent.click(within(dialog).getByRole('button', { name: 'Apply' }));
+    const table = screen.getByRole('table', { name: 'request_logs rows' });
+    expect(within(table).getByRole('columnheader', { name: /Region/ })).toBeInTheDocument();
+
+    const first = small[0]!;
+    await userEvent.click(within(table).getByRole('button', { name: new RegExp(`${first.id}`) }));
+    await userEvent.click(await screen.findByRole('menuitem', { name: 'Inspect row' }));
+    const drawer = await screen.findByRole('dialog');
+    expect(within(drawer).getByRole('tree', { name: `Row ${first.id}` })).toHaveTextContent(first.userAgent);
+  });
+});

package/src/data-explorer/Page.tsx

@@ -0,0 +1,247 @@
+import { DataTable, NoResultsEmpty, PageHeader, type DataTableColumn } from '@gntik-ai/blocks';
+import { Braces, Columns3, Download } from '@gntik-ai/icons';
+import {
+  Button,
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Drawer,
+  DrawerBody,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+  JsonViewer,
+  Page,
+  PowerSearch,
+  StatusTag,
+  TransferList,
+  emptyPowerSearchQuery,
+  formatPowerSearch,
+  matchPowerSearch,
+  type BreadcrumbItem,
+  type PowerSearchField,
+  type PowerSearchQuery,
+  type TransferListItem,
+} from '@gntik-ai/ui';
+import { useMemo, useState } from 'react';
+import { ConsoleShell, type ConsoleShellProps } from '../shared/ConsoleShell';
+import {
+  explorerBreadcrumbs,
+  explorerColumns,
+  explorerDefaultColumns,
+  explorerFields,
+  explorerRows,
+  type ExplorerField,
+  type ExplorerRow,
+} from './data';
+
+export interface DataExplorerProps {
+  title: string;
+  /** Dataset name shown in the description, e.g. "request_logs". */
+  dataset: string;
+  rows: ExplorerRow[];
+  /** PowerSearch fields (structured filters) of the dataset. */
+  fields: PowerSearchField<ExplorerField>[];
+  /** Columns the chooser offers, in default order. */
+  columns: Array<TransferListItem & { value: ExplorerField }>;
+  /** Visible columns initially, in order. */
+  defaultColumns: ExplorerField[];
+  /** Initial query (e.g. from the URL). */
+  defaultQuery: PowerSearchQuery<ExplorerField>;
+  /** Receives the filtered rows and visible columns; hidden when omitted. */
+  onExport: (rows: ExplorerRow[], columns: ExplorerField[]) => void;
+  breadcrumbs: BreadcrumbItem[];
+  currentHref: string;
+  /** ConsoleShell props (app nav, user, workspaces, sidebar footer, topbar…). */
+  shell: Omit<ConsoleShellProps, 'children'>;
+}
+
+const statusKey = (code: number) => (code >= 500 ? 'failed' : code >= 400 ? 'degraded' : 'succeeded');
+
+function cellFor(field: ExplorerField): DataTableColumn<ExplorerRow>['cell'] {
+  if (field === 'status') return (r) => <StatusTag size="sm" status={statusKey(r.status)} label={String(r.status)} />;
+  if (field === 'durationMs') return (r) => `${r.durationMs} ms`;
+  if (field === 'bytes') return (r) => `${(r.bytes / 1024).toFixed(1)} KB`;
+  return undefined;
+}
+
+/**
+ * Data explorer: ConsoleShell + Page with a PowerSearch over a 10k-row DataTable (client
+ * filtering, sorting and pagination), a column chooser (TransferList in a Dialog: show, hide
+ * and reorder) and a row inspector (Drawer + JsonViewer).
+ */
+export default function DataExplorerPage(props: Partial<DataExplorerProps>) {
+  const {
+    title = 'Data explorer',
+    dataset = 'request_logs',
+    rows = explorerRows,
+    fields = explorerFields,
+    columns: columnItems = explorerColumns,
+    defaultColumns = explorerDefaultColumns,
+    defaultQuery,
+    onExport,
+    breadcrumbs = explorerBreadcrumbs,
+    currentHref = '/data',
+    shell,
+  } = props;
+  const [query, setQuery] = useState<PowerSearchQuery<ExplorerField>>(
+    () => defaultQuery ?? emptyPowerSearchQuery<ExplorerField>(),
+  );
+  const [visible, setVisible] = useState<string[]>(defaultColumns);
+  const [draftColumns, setDraftColumns] = useState<string[]>(defaultColumns);
+  const [chooserOpen, setChooserOpen] = useState(false);
+  const [inspected, setInspected] = useState<ExplorerRow | null>(null);
+  const filtered = useMemo(
+    () => (query.terms.length ? rows.filter((r) => matchPowerSearch(query, r)) : rows),
+    [rows, query],
+  );
+
+  const columns: DataTableColumn<ExplorerRow>[] = visible.flatMap((id) => {
+    const item = columnItems.find((c) => c.value === id);
+    if (!item) return [];
+    const field = item.value;
+    const numeric = field === 'durationMs' || field === 'bytes';
+    return [
+      {
+        id: field,
+        header: item.label,
+        accessor: (r: ExplorerRow) => r[field],
+        cell: cellFor(field),
+        sortable: true,
+        variant: numeric ? 'numeric' : field === 'timestamp' || field === 'path' ? 'mono' : undefined,
+      } satisfies DataTableColumn<ExplorerRow>,
+    ];
+  });
+
+  const actions = [
+    {
+      label: 'Columns',
+      icon: Columns3,
+      variant: 'secondary' as const,
+      onClick: () => {
+        setDraftColumns(visible);
+        setChooserOpen(true);
+      },
+    },
+    ...(onExport
+      ? [
+          {
+            label: 'Export',
+            icon: Download,
+            variant: 'primary' as const,
+            onClick: () => onExport(filtered, visible as ExplorerField[]),
+          },
+        ]
+      : []),
+  ];
+
+  return (
+    <ConsoleShell breadcrumbs={breadcrumbs} currentHref={currentHref} {...shell}>
+      <Page
+        width="full"
+        header={
+          <PageHeader
+            breadcrumbs={null}
+            title={title}
+            description={
+              <>
+                Query <span className="font-mono">{dataset}</span>: type <span className="font-mono">field=value</span>,
+                comparisons like <span className="font-mono">duration&gt;500</span> or free text.
+              </>
+            }
+            status=""
+            meta={[]}
+            tabs={null}
+            actions={actions}
+          />
+        }
+      >
+        <PowerSearch<ExplorerField>
+          aria-label={`Filter ${dataset}`}
+          fields={fields}
+          value={query}
+          onValueChange={setQuery}
+          placeholder="Filter rows…"
+        />
+        <DataTable<ExplorerRow>
+          caption={`${dataset} rows`}
+          rows={filtered}
+          columns={columns}
+          getRowLabel={(r) => r.id}
+          defaultSort={{ columnId: 'timestamp', direction: 'descending' }}
+          defaultDensity="compact"
+          defaultPageSize={50}
+          pageSizeOptions={[25, 50, 100]}
+          showColumnMenu={false}
+          toolbar={
+            <p aria-live="polite" className="text-[12.5px] text-muted-foreground">
+              {filtered.length.toLocaleString('en-US')} of {rows.length.toLocaleString('en-US')} rows
+              {query.terms.length > 0 && <span className="ms-2 font-mono">{formatPowerSearch(query)}</span>}
+            </p>
+          }
+          rowActions={(r) => [{ label: 'Inspect row', icon: Braces, onSelect: () => setInspected(r) }]}
+          emptyState={
+            <NoResultsEmpty
+              entity="rows"
+              query={formatPowerSearch(query)}
+              filterCount={0}
+              onClearSearch={() => setQuery(emptyPowerSearchQuery<ExplorerField>())}
+            />
+          }
+        />
+      </Page>
+      <Dialog open={chooserOpen} onOpenChange={setChooserOpen}>
+        <DialogContent size="xl">
+          <DialogHeader>
+            <DialogTitle>Columns</DialogTitle>
+            <DialogDescription>Choose the visible columns and their order (Alt+↑/↓ reorders).</DialogDescription>
+          </DialogHeader>
+          <DialogBody>
+            <TransferList
+              items={columnItems}
+              value={draftColumns}
+              onValueChange={setDraftColumns}
+              reorderable
+              titles={{ available: 'Hidden', selected: 'Visible' }}
+              height={280}
+            />
+          </DialogBody>
+          <DialogFooter>
+            <Button variant="secondary" onClick={() => setChooserOpen(false)}>
+              Cancel
+            </Button>
+            <Button
+              disabled={draftColumns.length === 0}
+              onClick={() => {
+                setVisible(draftColumns);
+                setChooserOpen(false);
+              }}
+            >
+              Apply
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+      <Drawer open={inspected !== null} onOpenChange={(open) => !open && setInspected(null)}>
+        <DrawerContent size="md">
+          {inspected && (
+            <>
+              <DrawerHeader>
+                <DrawerTitle className="font-mono">{inspected.id}</DrawerTitle>
+                <DrawerDescription>Every field of the row, including hidden columns.</DrawerDescription>
+              </DrawerHeader>
+              <DrawerBody>
+                <JsonViewer key={inspected.id} data={inspected} label={`Row ${inspected.id}`} />
+              </DrawerBody>
+            </>
+          )}
+        </DrawerContent>
+      </Drawer>
+    </ConsoleShell>
+  );
+}

package/src/data-explorer/data.ts

@@ -0,0 +1,94 @@
+import type { BreadcrumbItem, PowerSearchField, TransferListItem } from '@gntik-ai/ui';
+
+/** One request log row of the sample dataset. */
+export interface ExplorerRow {
+  id: string;
+  timestamp: string;
+  project: string;
+  region: string;
+  method: string;
+  path: string;
+  status: number;
+  durationMs: number;
+  bytes: number;
+  userAgent: string;
+}
+
+export type ExplorerField = Exclude<keyof ExplorerRow, 'id'>;
+
+const PROJECTS = ['web-app', 'billing-api', 'auth-service', 'search-indexer', 'reports'];
+const REGIONS = ['eu-west', 'us-east', 'ap-south'];
+const METHODS = ['GET', 'GET', 'GET', 'POST', 'PUT', 'DELETE'];
+const PATHS = ['/v1/projects', '/v1/projects/:id', '/v1/invoices', '/v1/search', '/v1/sessions', '/v1/exports'];
+const STATUSES = [200, 200, 200, 200, 201, 204, 304, 400, 404, 429, 500, 503];
+const AGENTS = ['web/4.2', 'cli/1.8', 'sdk-js/3.1', 'sdk-py/2.0'];
+
+/** Deterministic pseudo-random sample of `count` request rows (newest first). */
+export function generateExplorerRows(count = 10_000, end = Date.UTC(2026, 4, 4, 12)): ExplorerRow[] {
+  let seed = 7;
+  const rand = () => {
+    seed = (seed * 1_103_515_245 + 12_345) % 2_147_483_648;
+    return seed / 2_147_483_648;
+  };
+  const pick = <T>(list: readonly T[]) => list[Math.floor(rand() * list.length)] as T;
+  return Array.from({ length: count }, (_, i) => {
+    const status = pick(STATUSES);
+    return {
+      id: `req_${String(count - i).padStart(5, '0')}`,
+      timestamp: new Date(end - i * 37_000).toISOString(),
+      project: pick(PROJECTS),
+      region: pick(REGIONS),
+      method: pick(METHODS),
+      path: pick(PATHS),
+      status,
+      durationMs: Math.round((status >= 500 ? 900 : 40) + rand() * 600),
+      bytes: Math.round(200 + rand() * 48_000),
+      userAgent: pick(AGENTS),
+    };
+  });
+}
+
+export const explorerRows: ExplorerRow[] = generateExplorerRows();
+
+export const explorerFields: PowerSearchField<ExplorerField>[] = [
+  {
+    key: 'status',
+    label: 'status',
+    type: 'number',
+    values: ['200', '201', '204', '304', '400', '404', '429', '500', '503'],
+    description: 'HTTP status',
+  },
+  { key: 'project', label: 'project', type: 'enum', values: PROJECTS },
+  { key: 'region', label: 'region', type: 'enum', values: REGIONS },
+  { key: 'method', label: 'method', type: 'enum', values: ['GET', 'POST', 'PUT', 'DELETE'] },
+  { key: 'path', label: 'path', values: PATHS },
+  { key: 'durationMs', label: 'duration', type: 'number', description: 'Milliseconds' },
+  { key: 'bytes', label: 'bytes', type: 'number', description: 'Response size' },
+  { key: 'userAgent', label: 'agent', values: AGENTS },
+];
+
+export const explorerColumns: Array<TransferListItem & { value: ExplorerField }> = [
+  { value: 'timestamp', label: 'Time', description: 'When the request arrived (UTC)' },
+  { value: 'method', label: 'Method' },
+  { value: 'path', label: 'Path', description: 'Route template' },
+  { value: 'status', label: 'Status', description: 'HTTP status code' },
+  { value: 'durationMs', label: 'Duration', description: 'Milliseconds' },
+  { value: 'project', label: 'Project' },
+  { value: 'region', label: 'Region' },
+  { value: 'bytes', label: 'Size', description: 'Response bytes' },
+  { value: 'userAgent', label: 'Client', description: 'User agent' },
+];
+
+export const explorerDefaultColumns: ExplorerField[] = [
+  'timestamp',
+  'method',
+  'path',
+  'status',
+  'durationMs',
+  'project',
+];
+
+export const explorerBreadcrumbs: BreadcrumbItem[] = [
+  { label: 'Data', href: '/data' },
+  { label: 'request_logs', mono: true },
+];