@gntik-ai/templates 0.0.0-stage → 0.5.0

package/src/prompt-playground/Page.tsx

@@ -0,0 +1,254 @@
+import { PromptEditor, type PromptRunInput } from '@gntik-ai/blocks';
+import { DiffEditor, type MonacoLoader } from '@gntik-ai/editor';
+import { Plus, X } from '@gntik-ai/icons';
+import {
+  Badge,
+  Button,
+  CanvasLayout,
+  Grid,
+  HStack,
+  IconButton,
+  ListInput,
+  Section,
+  SimpleSelect,
+  Stack,
+  Switch,
+  type BreadcrumbItem,
+  type ListInputPair,
+  type ListInputRow,
+} from '@gntik-ai/ui';
+import { useState } from 'react';
+import { ConsoleShell, type ConsoleShellProps } from '../shared/ConsoleShell';
+import {
+  playgroundBreadcrumbs,
+  playgroundDefaultColumns,
+  playgroundModels,
+  playgroundPrompt,
+  playgroundVariables,
+  sampleOutput,
+  simulateGenerate,
+  type PlaygroundModel,
+  type PlaygroundOutput,
+} from './data';
+
+export interface PromptPlaygroundProps {
+  title: string;
+  /** Initial prompt (system, user, temperature, max tokens). */
+  prompt: { system: string; user: string; temperature: number; maxTokens: number };
+  /** Initial shared variables (ListInput rows); non-empty values override the editor's own fields. */
+  variables: ListInputPair[];
+  models: PlaygroundModel[];
+  /** Model ids of the initial columns (2–3). */
+  defaultColumns: string[];
+  /** Runs the prompt on one model. Defaults to a simulated answer. */
+  onGenerate: (model: string, input: PromptRunInput) => PlaygroundOutput | Promise<PlaygroundOutput>;
+  /** Monaco loader for the diff view (self-hosting, tests). */
+  loader: MonacoLoader;
+  breadcrumbs: BreadcrumbItem[];
+  currentHref: string;
+  /** ConsoleShell props (app nav, user, workspaces, sidebar footer, topbar…). */
+  shell: Omit<ConsoleShellProps, 'children'>;
+}
+
+const MAX_COLUMNS = 3;
+
+interface Column {
+  id: number;
+  model: string;
+  output?: PlaygroundOutput;
+  error?: string;
+}
+
+/**
+ * Prompt playground. CanvasLayout `embedded` inside ConsoleShell: the playground is a console
+ * tool people jump in and out of (from a trace, an evaluation), so the app nav stays; the
+ * canvas layout still gives it the editor chrome (top bar, variables palette). PromptEditor
+ * runs the prompt on 2–3 model columns side by side; "Diff" compares each column against the
+ * first one in a DiffEditor.
+ */
+export default function PromptPlaygroundPage(props: Partial<PromptPlaygroundProps>) {
+  const {
+    title = playgroundPrompt.title,
+    prompt = playgroundPrompt,
+    variables = playgroundVariables,
+    models = playgroundModels,
+    defaultColumns = playgroundDefaultColumns,
+    onGenerate = simulateGenerate,
+    loader,
+    breadcrumbs = playgroundBreadcrumbs,
+    currentHref = '/prompts',
+    shell,
+  } = props;
+  const [rows, setRows] = useState<ListInputRow[] | undefined>(undefined);
+  const [columns, setColumns] = useState<Column[]>(() =>
+    defaultColumns.slice(0, MAX_COLUMNS).map((model, id) => ({ id, model, output: sampleOutput(model) })),
+  );
+  const [nextId, setNextId] = useState(defaultColumns.length);
+  const [diff, setDiff] = useState(false);
+  const [status, setStatus] = useState('');
+
+  const shared = Object.fromEntries(
+    (rows ?? variables).filter((r) => r.key.trim() && r.value.trim()).map((r) => [r.key.trim(), r.value]),
+  );
+  const modelItems = models.map((m) => ({ value: m.id, label: m.label }));
+  const labelOf = (id: string) => models.find((m) => m.id === id)?.label ?? id;
+  const baseline = columns[0];
+
+  const run = async (input: PromptRunInput) => {
+    const merged: PromptRunInput = { ...input, variables: { ...input.variables, ...shared } };
+    setStatus(`Running on ${columns.length} models…`);
+    const results = await Promise.all(
+      columns.map(async (c) => {
+        try {
+          return { id: c.id, output: await onGenerate(c.model, merged) };
+        } catch (e) {
+          return { id: c.id, error: e instanceof Error ? e.message : 'The model did not answer.' };
+        }
+      }),
+    );
+    setColumns((cols) => cols.map((c) => ({ ...c, ...results.find((r) => r.id === c.id) })));
+    setStatus(`Finished on ${results.length} models.`);
+  };
+
+  const addColumn = () => {
+    const model = models.find((m) => !columns.some((c) => c.model === m.id))?.id ?? models[0]?.id ?? '';
+    setColumns((cols) => [...cols, { id: nextId, model }]);
+    setNextId((n) => n + 1);
+  };
+
+  return (
+    <ConsoleShell breadcrumbs={breadcrumbs} currentHref={currentHref} {...shell}>
+      <CanvasLayout
+        embedded
+        mainId="playground-canvas"
+        mainLabel={`${title} playground`}
+        smallScreenNotice={null}
+        paletteLabel="Variables"
+        palette={
+          <Stack gap={2}>
+            <p className="text-[12px] text-muted-foreground">
+              Shared by every model column. Paste KEY=value lines to add several.
+            </p>
+            <ListInput
+              label="Prompt variables"
+              defaultValue={variables}
+              onValueChange={setRows}
+              uniqueKeys
+              keyPlaceholder="name"
+              valuePlaceholder="value"
+            />
+          </Stack>
+        }
+        header={
+          <>
+            <div className="flex min-w-0 flex-1 items-center gap-3">
+              <h1 className="truncate text-[14px] font-semibold text-foreground">{title}</h1>
+              <Badge size="sm">Playground</Badge>
+              <p aria-live="polite" className="hidden truncate text-[12px] text-muted-foreground sm:block">
+                {status}
+              </p>
+            </div>
+            <Switch label="Diff" checked={diff} onCheckedChange={setDiff} disabled={columns.length < 2} />
+          </>
+        }
+      >
+        <div className="h-full overflow-y-auto p-3 sm:p-4">
+          <Stack gap={4}>
+            <PromptEditor
+              titleAs="h2"
+              title="Prompt"
+              defaultSystem={prompt.system}
+              defaultUser={prompt.user}
+              defaultVariables={Object.fromEntries(variables.map((v) => [v.key, v.value]))}
+              defaultTemperature={prompt.temperature}
+              defaultMaxTokens={prompt.maxTokens}
+              onRun={run}
+            />
+            <Section
+              title="Outputs"
+              headingLevel="h2"
+              description={
+                diff && baseline ? `Changes against ${labelOf(baseline.model)}.` : 'Each column runs the same prompt.'
+              }
+              actions={
+                <Button
+                  size="sm"
+                  variant="secondary"
+                  icon={Plus}
+                  disabled={columns.length >= MAX_COLUMNS}
+                  onClick={addColumn}
+                >
+                  Add model
+                </Button>
+              }
+            >
+              <Grid cols={{ base: 1, md: columns.length >= 3 ? 3 : 2 }} gap={3}>
+                {columns.map((c, i) => (
+                  <Section
+                    key={c.id}
+                    variant="card"
+                    padding="sm"
+                    headingLevel="h3"
+                    title={`Column ${i + 1}: ${labelOf(c.model)}`}
+                    actions={
+                      columns.length > 2 && (
+                        <IconButton
+                          size="sm"
+                          icon={X}
+                          label={`Remove column ${i + 1}`}
+                          onClick={() => setColumns((cols) => cols.filter((x) => x.id !== c.id))}
+                        />
+                      )
+                    }
+                  >
+                    <Stack gap={3}>
+                      <SimpleSelect
+                        aria-label={`Model for column ${i + 1}`}
+                        size="sm"
+                        items={modelItems}
+                        value={c.model}
+                        onValueChange={(model) =>
+                          model && setColumns((cols) => cols.map((x) => (x.id === c.id ? { id: x.id, model } : x)))
+                        }
+                      />
+                      {c.error ? (
+                        <p className="text-[12.5px] text-destructive-text">{c.error}</p>
+                      ) : !c.output ? (
+                        <p className="text-[12.5px] text-muted-foreground">
+                          Run the prompt to see this model&apos;s answer.
+                        </p>
+                      ) : diff && i > 0 && baseline?.output ? (
+                        <DiffEditor
+                          original={baseline.output.text}
+                          modified={c.output.text}
+                          sideBySide={false}
+                          height={220}
+                          aria-label={`${labelOf(c.model)} compared with ${labelOf(baseline.model)}`}
+                          loader={loader}
+                        />
+                      ) : (
+                        <p className="text-[13px] leading-relaxed whitespace-pre-wrap text-foreground">
+                          {c.output.text}
+                        </p>
+                      )}
+                      {c.output && (
+                        <HStack gap={2} wrap>
+                          <Badge size="sm" className="font-mono">
+                            {c.output.latencyMs} ms
+                          </Badge>
+                          <Badge size="sm" className="font-mono">
+                            {c.output.outputTokens} tokens
+                          </Badge>
+                        </HStack>
+                      )}
+                    </Stack>
+                  </Section>
+                ))}
+              </Grid>
+            </Section>
+          </Stack>
+        </div>
+      </CanvasLayout>
+    </ConsoleShell>
+  );
+}

package/src/prompt-playground/data.ts

@@ -0,0 +1,68 @@
+import type { PromptRunInput } from '@gntik-ai/blocks';
+import type { BreadcrumbItem, ListInputPair } from '@gntik-ai/ui';
+
+/** A model the playground can compare. */
+export interface PlaygroundModel {
+  id: string;
+  label: string;
+}
+
+/** One model's answer to a run. */
+export interface PlaygroundOutput {
+  text: string;
+  latencyMs: number;
+  outputTokens: number;
+}
+
+export const playgroundModels: PlaygroundModel[] = [
+  { id: 'general-large', label: 'general-large' },
+  { id: 'general-small', label: 'general-small' },
+  { id: 'reasoning-medium', label: 'reasoning-medium' },
+  { id: 'self-hosted-8b', label: 'self-hosted-8b' },
+];
+
+export const playgroundDefaultColumns = ['general-large', 'general-small'];
+
+export const playgroundPrompt = {
+  title: 'Ticket summary',
+  system: 'You are a concise support assistant for {{company}}. Answer in {{language}}.',
+  user: 'Summarise the ticket below in three bullet points and suggest a next step.\n\n{{ticket}}',
+  temperature: 0.4,
+  maxTokens: 512,
+};
+
+/** Shared variable values applied to every column (they override the editor's own fields). */
+export const playgroundVariables: ListInputPair[] = [
+  { key: 'company', value: 'Northwind' },
+  { key: 'language', value: 'English' },
+  { key: 'ticket', value: 'Customer cannot export invoices as CSV since the last release; the button spins forever.' },
+];
+
+export const playgroundBreadcrumbs: BreadcrumbItem[] = [
+  { label: 'Prompts', href: '/prompts' },
+  { label: 'ticket-summary', mono: true },
+];
+
+const SAMPLE_OUTPUTS: Record<string, string> = {
+  'general-large':
+    '- Invoice CSV export hangs since the latest release.\n- The export button keeps spinning and no file is produced.\n- Affects the billing area for at least one customer.\nNext step: reproduce on staging and check the export job logs.',
+  'general-small':
+    '- CSV export of invoices is broken.\n- The export button keeps spinning and no file is produced.\n- Started after the last release.\nNext step: roll back the export change.',
+  'reasoning-medium':
+    '- Invoice CSV export hangs since the latest release.\n- The spinner suggests the export request never completes.\n- Likely a regression in the export job.\nNext step: compare export job logs before and after the release.',
+  'self-hosted-8b': '- Export to CSV not working.\n- Button spins.\n- Since release.\nNext step: investigate.',
+};
+
+/** Sample output of a model before the first run (or for a model without a sample). */
+export function sampleOutput(model: string): PlaygroundOutput {
+  const text = SAMPLE_OUTPUTS[model] ?? SAMPLE_OUTPUTS['general-small'] ?? '';
+  return { text, latencyMs: 600 + ((model.length * 97) % 900), outputTokens: Math.round(text.length / 4) };
+}
+
+/** Simulated generation: the sample output, prefixed with the resolved variables. */
+export function simulateGenerate(model: string, input: PromptRunInput): Promise<PlaygroundOutput> {
+  const out = sampleOutput(model);
+  const company = input.variables.company?.trim();
+  const text = company ? `${out.text}\n(${company}, temperature ${input.temperature})` : out.text;
+  return new Promise((resolve) => setTimeout(() => resolve({ ...out, text }), 400));
+}

package/src/prompt-playground/template.meta.ts

@@ -0,0 +1,12 @@
+import type { TemplateMeta } from '../meta';
+
+export const meta: TemplateMeta = {
+  name: 'Prompt playground',
+  family: 'AI',
+  priority: 'P3',
+  status: 'experimental',
+  description:
+    'Prompt playground inside the console (CanvasLayout embedded in ConsoleShell, so the app nav stays): shared variables in a ListInput palette, the PromptEditor, and 2–3 model columns side by side with a Diff switch that compares each column against the first in a DiffEditor.',
+  layout: 'CanvasLayout',
+  blocks: ['app-sidebar', 'app-topbar', 'prompt-editor'],
+};

package/src/public-hub/Page.test.tsx

@@ -0,0 +1,176 @@
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ThemeProvider } from '@gntik-ai/ui';
+import { renderToString } from 'react-dom/server';
+import { expectNoAxeViolations } from '../test/a11y';
+import PublicHubPage from './Page';
+
+// Public seam: the rendered page's content order and accessible document outline.
+const full = {
+  eyebrow: 'Start here',
+  title: 'Welcome',
+  description: 'Choose how to continue.',
+  cards: [
+    { title: 'Your workspace', body: 'Keep your work together.' },
+    { title: 'Your team', body: 'Collaborate with others.' },
+  ],
+  primaryAction: { label: 'Sign in', href: '#sign-in' },
+  secondaryAction: { label: 'Create an account', href: '#sign-up' },
+  tertiaryLink: { label: 'Recover access', href: '#recovery' },
+  footer: 'Contact support for help.',
+};
+
+describe('PublicHubPage', () => {
+  it('names the region from its page heading in server HTML before hydration', () => {
+    const container = document.createElement('div');
+    container.innerHTML = renderToString(<PublicHubPage {...full} />);
+    document.body.append(container);
+    try {
+      const region = within(container).getByRole('region', { name: full.title });
+      const heading = within(region).getByRole('heading', { level: 1, name: full.title });
+      const labelId = region.getAttribute('aria-labelledby');
+      expect(labelId).toBeTruthy();
+      const label = document.getElementById(labelId!);
+      expect(label).toHaveTextContent(full.title);
+      expect(heading.contains(label)).toBe(true);
+    } finally {
+      container.remove();
+    }
+  });
+
+  it('renders the full hub in reading order with a single labelled page heading', () => {
+    const { container } = render(<PublicHubPage {...full} />);
+    const heading = screen.getByRole('heading', { level: 1, name: full.title });
+    const region = screen.getByRole('region', { name: full.title });
+    const titleLabel = within(heading).getByText(full.title);
+    expect(titleLabel.id).not.toBe('');
+    expect(region).toHaveAttribute('aria-labelledby', titleLabel.id);
+    expect(container.querySelectorAll('h1')).toHaveLength(1);
+    expect(
+      within(region)
+        .getAllByRole('heading', { level: 2 })
+        .map((h) => h.textContent),
+    ).toEqual(['Your workspace', 'Your team']);
+    const list = within(region).getByRole('list');
+    expect(list.tagName).toBe('UL');
+    expect(within(list).getAllByRole('listitem')).toHaveLength(2);
+    expect(list).toHaveClass('grid-cols-1', 'sm:grid-cols-2');
+    const ordered = [
+      screen.getByText(full.eyebrow),
+      heading,
+      screen.getByText(full.description),
+      list,
+      screen.getByRole('link', { name: 'Sign in' }),
+      screen.getByRole('link', { name: 'Create an account' }),
+      screen.getByRole('link', { name: 'Recover access' }),
+      screen.getByRole('separator'),
+      screen.getByText(full.footer),
+    ];
+    ordered.slice(1).forEach((element, index) => {
+      expect(ordered[index]!.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    });
+    expect(region.querySelectorAll('header')).toHaveLength(1);
+    expect(within(region).queryByRole('navigation')).not.toBeInTheDocument();
+    expect(within(region).queryByRole('tablist')).not.toBeInTheDocument();
+    expect(region.querySelector('dl')).toBeNull();
+    for (const card of full.cards) expect(within(list).getByText(card.body)).toBeVisible();
+    expect(within(region).queryByRole('button')).not.toBeInTheDocument();
+    expect(container.querySelector('img')).toBeNull();
+  });
+
+  it('replaces the full content with decorative kit skeletons in a named busy region', () => {
+    const { rerender } = render(<PublicHubPage {...full} loading />);
+    const region = screen.getByRole('region', { name: 'Loading' });
+    expect(region).toHaveAttribute('aria-busy', 'true');
+    expect(region).not.toHaveAttribute('aria-labelledby');
+    expect(within(region).queryByRole('heading')).not.toBeInTheDocument();
+    expect(within(region).queryByRole('link')).not.toBeInTheDocument();
+    expect(within(region).queryByRole('separator')).not.toBeInTheDocument();
+    expect(within(region).queryByText(full.eyebrow)).not.toBeInTheDocument();
+    expect(within(region).queryByText(full.footer)).not.toBeInTheDocument();
+    expect(region.querySelector('[aria-hidden="true"]')).toBeInTheDocument();
+    rerender(<PublicHubPage loading loadingLabel="Loading account access" />);
+    const minimal = screen.getByRole('region', {
+      name: 'Loading account access',
+    });
+    expect(minimal.querySelector('[aria-hidden="true"]')).toBeInTheDocument();
+    expect(within(minimal).queryByRole('list')).not.toBeInTheDocument();
+    rerender(<PublicHubPage {...full} />);
+    expect(screen.getByRole('region', { name: full.title })).not.toHaveAttribute('aria-busy');
+  });
+
+  for (const optional of ['eyebrow', 'description', 'cards', 'secondaryAction', 'tertiaryLink', 'footer'] as const) {
+    it(`omits ${optional} without an empty replacement`, () => {
+      render(<PublicHubPage {...full} {...{ [optional]: undefined }} />);
+      const region = screen.getByRole('region', { name: full.title });
+      if (optional === 'cards') {
+        expect(within(region).queryByRole('list')).not.toBeInTheDocument();
+        expect(within(region).queryByRole('heading', { level: 2 })).not.toBeInTheDocument();
+      } else if (optional === 'secondaryAction' || optional === 'tertiaryLink') {
+        expect(within(region).queryByRole('link', { name: full[optional].label })).not.toBeInTheDocument();
+      } else {
+        expect(within(region).queryByText(full[optional])).not.toBeInTheDocument();
+      }
+      if (optional === 'footer') expect(within(region).queryByRole('separator')).not.toBeInTheDocument();
+      const emptyWrappers = [...region.querySelectorAll('div:empty, ul:empty, li:empty')].filter(
+        (element) => element.getAttribute('role') !== 'separator',
+      );
+      expect(emptyWrappers).toHaveLength(0);
+    });
+  }
+
+  it('renders the minimal fixture and no list for an empty card array', () => {
+    render(<PublicHubPage cards={[]} logo={<span>Example mark</span>} />);
+    const region = screen.getByRole('region', { name: 'Welcome' });
+    expect(within(region).getAllByRole('link')).toHaveLength(1);
+    expect(within(region).queryByRole('list')).not.toBeInTheDocument();
+    expect(within(region).queryByRole('separator')).not.toBeInTheDocument();
+    expect(region.querySelectorAll('div:empty, ul:empty, li:empty')).toHaveLength(0);
+    expect(screen.getByText('Example mark')).toBeInTheDocument();
+  });
+
+  it('tabs through navigation links in order, activates each with Enter, and leaves the page', async () => {
+    const user = userEvent.setup();
+    const actions = [full.primaryAction, full.secondaryAction, full.tertiaryLink].map((action) => ({
+      ...action,
+      onClick: vi.fn((event) => event.preventDefault()),
+    }));
+    render(
+      <>
+        <PublicHubPage {...full} primaryAction={actions[0]} secondaryAction={actions[1]} tertiaryLink={actions[2]} />
+        <a href="#after">After hub</a>
+      </>,
+    );
+    await user.tab();
+    expect(screen.getByRole('link', { name: 'Skip to main content' })).toHaveFocus();
+    for (const action of actions) {
+      await user.tab();
+      const link = screen.getByRole('link', { name: action.label });
+      expect(link.tagName).toBe('A');
+      expect(link).toHaveAttribute('href', action.href);
+      expect(link).toHaveFocus();
+      await user.keyboard('{Enter}');
+      expect(action.onClick).toHaveBeenCalledOnce();
+    }
+    await user.tab();
+    expect(screen.getByRole('link', { name: 'After hub' })).toHaveFocus();
+    await user.tab({ shift: true });
+    expect(screen.getByRole('link', { name: 'Recover access' })).toHaveFocus();
+  });
+});
+
+// Theme × fixture × loading matrix exercises the real composition, with no kit mocks.
+for (const theme of ['dark', 'light', 'high_contrast'] as const) {
+  for (const fixture of ['full', 'minimal'] as const) {
+    for (const loading of [false, true]) {
+      it(`axe: ${theme} / ${fixture} / loading=${loading}`, async () => {
+        const { container } = render(
+          <ThemeProvider defaultMode={theme} storageKey={null}>
+            <PublicHubPage {...(fixture === 'full' ? full : {})} loading={loading} />
+          </ThemeProvider>,
+        );
+        await expectNoAxeViolations(container);
+      });
+    }
+  }
+}

package/src/public-hub/Page.tsx

@@ -0,0 +1,125 @@
+import { PageHeader } from '@gntik-ai/blocks';
+import { AuthLayout, Badge, Button, Card, CardTitle, Grid, Link, Separator, Skeleton, Text } from '@gntik-ai/ui';
+import { useId, type MouseEventHandler, type ReactNode } from 'react';
+import { publicHubCopy } from './data';
+
+export interface PublicHubAction {
+  label: string;
+  href: string;
+  onClick?: MouseEventHandler<HTMLAnchorElement>;
+}
+
+export interface PublicHubPageProps {
+  eyebrow?: string;
+  title: string;
+  description?: string;
+  cards?: { title: string; body: string }[];
+  primaryAction: PublicHubAction;
+  secondaryAction?: PublicHubAction;
+  tertiaryLink?: PublicHubAction;
+  footer?: string;
+  loading?: boolean;
+  logo?: ReactNode;
+  loadingLabel?: string;
+}
+
+/** Unauthenticated entry hub; optional content stays absent unless supplied. */
+export default function PublicHubPage({
+  eyebrow,
+  title = publicHubCopy.title,
+  description,
+  cards,
+  primaryAction = publicHubCopy.primaryAction,
+  secondaryAction,
+  tertiaryLink,
+  footer,
+  logo,
+  loading = false,
+  loadingLabel = 'Loading',
+}: Partial<PublicHubPageProps>) {
+  const titleId = useId();
+  return (
+    <AuthLayout variant="full-bleed" fullScreen logo={logo} skipLinkLabel="Skip to main content">
+      <section
+        aria-labelledby={loading ? undefined : titleId}
+        aria-label={loading ? loadingLabel : undefined}
+        aria-busy={loading || undefined}
+        className="flex min-w-0 flex-col gap-6 break-words"
+      >
+        {eyebrow && (loading ? <Skeleton className="h-5 w-24" /> : <Badge className="self-start">{eyebrow}</Badge>)}
+        {loading ? (
+          <div className="flex flex-col gap-3">
+            <Skeleton className="h-8 w-2/3" />
+            {description && <Skeleton shape="text" lines={2} />}
+          </div>
+        ) : (
+          <PageHeader
+            breadcrumbs={null}
+            status=""
+            meta={[]}
+            actions={[]}
+            tabs={null}
+            title={<span id={titleId}>{title}</span>}
+            description={description ?? null}
+          />
+        )}
+        {cards && cards.length > 0 && (
+          <Grid as="ul" cols={{ base: 1, sm: 2 }} gap={4}>
+            {cards.map((card, index) => (
+              <li key={index} className="min-w-0">
+                {loading ? (
+                  <Skeleton className="h-32 w-full" />
+                ) : (
+                  <Card className="flex h-full min-w-0 flex-col gap-3 p-4">
+                    <CardTitle as="h2">{card.title}</CardTitle>
+                    <Text variant="supporting">{card.body}</Text>
+                  </Card>
+                )}
+              </li>
+            ))}
+          </Grid>
+        )}
+        <div className="flex min-w-0 flex-col items-start gap-3">
+          {loading ? (
+            <Skeleton className="h-9 w-32" />
+          ) : (
+            <Button
+              nativeButton={false}
+              role="link"
+              render={<a href={primaryAction.href} onClick={primaryAction.onClick} />}
+            >
+              {primaryAction.label}
+            </Button>
+          )}
+          {secondaryAction &&
+            (loading ? (
+              <Skeleton className="h-9 w-40" />
+            ) : (
+              <Button
+                variant="secondary"
+                nativeButton={false}
+                role="link"
+                render={<a href={secondaryAction.href} onClick={secondaryAction.onClick} />}
+              >
+                {secondaryAction.label}
+              </Button>
+            ))}
+          {tertiaryLink &&
+            (loading ? (
+              <Skeleton className="h-5 w-32" />
+            ) : (
+              <Link href={tertiaryLink.href} onClick={tertiaryLink.onClick}>
+                {tertiaryLink.label}
+              </Link>
+            ))}
+        </div>
+        {!loading && footer && (
+          <>
+            <Separator />
+            <Text variant="supporting">{footer}</Text>
+          </>
+        )}
+      </section>
+    </AuthLayout>
+  );
+}