@gntik-ai/templates 0.0.0-stage → 0.5.0

package/src/public-hub/Source.test.ts

@@ -0,0 +1,54 @@
+import { readdirSync, readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import process from 'node:process';
+
+// Source is a public contract here: consumers must be able to re-theme every style.
+const namedColours =
+  'aliceblue antiquewhite aqua aquamarine azure beige bisque black blanchedalmond blue blueviolet brown burlywood cadetblue chartreuse chocolate coral cornflowerblue cornsilk crimson cyan darkblue darkcyan darkgoldenrod darkgray darkgreen darkgrey darkkhaki darkmagenta darkolivegreen darkorange darkorchid darkred darksalmon darkseagreen darkslateblue darkslategray darkslategrey darkturquoise darkviolet deeppink deepskyblue dimgray dimgrey dodgerblue firebrick floralwhite forestgreen fuchsia gainsboro ghostwhite gold goldenrod gray green greenyellow grey honeydew hotpink indianred indigo ivory khaki lavender lavenderblush lawngreen lemonchiffon lightblue lightcoral lightcyan lightgoldenrodyellow lightgray lightgreen lightgrey lightpink lightsalmon lightseagreen lightskyblue lightslategray lightslategrey lightsteelblue lightyellow lime limegreen linen magenta maroon mediumaquamarine mediumblue mediumorchid mediumpurple mediumseagreen mediumslateblue mediumspringgreen mediumturquoise mediumvioletred midnightblue mintcream mistyrose moccasin navajowhite navy oldlace olive olivedrab orange orangered orchid palegoldenrod palegreen paleturquoise palevioletred papayawhip peachpuff peru pink plum powderblue purple rebeccapurple red rosybrown royalblue saddlebrown salmon sandybrown seagreen seashell sienna silver skyblue slateblue slategray slategrey snow springgreen steelblue tan teal thistle tomato turquoise violet wheat white whitesmoke yellow yellowgreen'
+    .split(' ')
+    .join('|');
+const forbidden = [
+  /[\w:-]+-\[[^\]]+\]/, // Tailwind arbitrary values and variants
+  /\bstyle\s*(?:=|:)/,
+  /#[\da-f]{3,8}\b/i,
+  /\b(?:rgba?|hsla?|hwb|oklch|oklab|lab|lch|color)\s*\(/i,
+  /\b\d*\.?\d+(?:px|rem|em)\b/i,
+  new RegExp(`(?:['"\x60]|:\\s*)(?:${namedColours})(?:['"\x60]|\\s*[;}])`, 'i'),
+  new RegExp(
+    `\\b(?:bg|text|border|ring|outline|fill|stroke|shadow|divide|decoration)-(?:${namedColours})(?:-\\d+)?\\b`,
+    'i',
+  ),
+  /\bdark:|\bbg-(?:gradient|linear|radial|conic)-|\bglow\b/,
+];
+
+const violations = (source: string) => forbidden.filter((rule) => rule.test(source)).map(String);
+const sources = (directory: string): string[] =>
+  readdirSync(directory, { withFileTypes: true }).flatMap((entry) => {
+    const path = join(directory, entry.name);
+    return entry.isDirectory() ? sources(path) : /\.(?:tsx?|css)$/.test(path) && !/\.test\./.test(path) ? [path] : [];
+  });
+
+describe('public-hub token-only source contract', () => {
+  it.each([
+    'className="w-[42px]"',
+    'style={{ color: "red" }}',
+    // eslint-disable-next-line no-restricted-syntax -- Negative fixture verifies rejection of literal colours.
+    'color: #abc;',
+    'color: rgb(1 2 3);',
+    'color: hsl(1 2% 3%);',
+    'color: rebeccapurple;',
+    // eslint-disable-next-line no-restricted-syntax -- Negative fixture verifies rejection of palette classes.
+    'className="text-white"',
+    'width: 2px;',
+    'padding: 1rem;',
+    'border-radius: .5em;',
+  ])('rejects prohibited styling: %s', (source) => {
+    expect(violations(source).length).toBeGreaterThan(0);
+  });
+
+  it('uses only kit classes and spacing scales across every template source and example', () => {
+    const files = sources(join(process.cwd(), 'src/public-hub'));
+    expect(files.length).toBeGreaterThan(3);
+    for (const file of files) expect(violations(readFileSync(file, 'utf8')), file).toEqual([]);
+  });
+});

package/src/public-hub/data.ts

@@ -0,0 +1,24 @@
+/** Product-agnostic English copy; optional content is supplied explicitly. */
+export const publicHubCopy = {
+  title: 'Welcome',
+  primaryAction: { label: 'Sign in', href: '#sign-in' },
+};
+
+export const publicHubFixture = {
+  ...publicHubCopy,
+  eyebrow: 'Start here',
+  description: 'Choose how to continue to your workspace.',
+  cards: [
+    {
+      title: 'Your workspace',
+      body: 'Keep your projects and resources together.',
+    },
+    {
+      title: 'Your team',
+      body: 'Share your work and collaborate with others.',
+    },
+  ],
+  secondaryAction: { label: 'Create an account', href: '#sign-up' },
+  tertiaryLink: { label: 'Recover access', href: '#recovery' },
+  footer: 'Need help? Contact your account administrator.',
+};

package/src/public-hub/examples/Dark.tsx

@@ -0,0 +1,11 @@
+import { ThemeProvider } from '@gntik-ai/ui';
+import PublicHubPage from '../Page';
+import { publicHubFixture } from '../data';
+
+export default function Dark() {
+  return (
+    <ThemeProvider defaultMode="dark" storageKey={null}>
+      <PublicHubPage {...publicHubFixture} />
+    </ThemeProvider>
+  );
+}

package/src/public-hub/examples/Full.tsx

@@ -0,0 +1,6 @@
+import PublicHubPage from '../Page';
+import { publicHubFixture } from '../data';
+
+export default function Full() {
+  return <PublicHubPage {...publicHubFixture} />;
+}

package/src/public-hub/examples/HighContrast.tsx

@@ -0,0 +1,11 @@
+import { ThemeProvider } from '@gntik-ai/ui';
+import PublicHubPage from '../Page';
+import { publicHubFixture } from '../data';
+
+export default function HighContrast() {
+  return (
+    <ThemeProvider defaultMode="high_contrast" storageKey={null}>
+      <PublicHubPage {...publicHubFixture} />
+    </ThemeProvider>
+  );
+}

package/src/public-hub/examples/Light.tsx

@@ -0,0 +1,11 @@
+import { ThemeProvider } from '@gntik-ai/ui';
+import PublicHubPage from '../Page';
+import { publicHubFixture } from '../data';
+
+export default function Light() {
+  return (
+    <ThemeProvider defaultMode="light" storageKey={null}>
+      <PublicHubPage {...publicHubFixture} />
+    </ThemeProvider>
+  );
+}

package/src/public-hub/examples/Loading.tsx

@@ -0,0 +1,6 @@
+import PublicHubPage from '../Page';
+import { publicHubFixture } from '../data';
+
+export default function Loading() {
+  return <PublicHubPage {...publicHubFixture} loading />;
+}

package/src/public-hub/examples/Minimal.tsx

@@ -0,0 +1,5 @@
+import PublicHubPage from '../Page';
+
+export default function Minimal() {
+  return <PublicHubPage />;
+}

package/src/public-hub/examples/MinimalLoading.tsx

@@ -0,0 +1,5 @@
+import PublicHubPage from '../Page';
+
+export default function MinimalLoading() {
+  return <PublicHubPage loading />;
+}

package/src/public-hub/template.meta.ts

@@ -0,0 +1,60 @@
+import type { TemplateMeta } from '../meta';
+
+export const meta = {
+  name: 'Public hub',
+  family: 'Auth',
+  priority: 'P1',
+  status: 'stable',
+  description: `Unauthenticated entry hub on AuthLayout full-bleed with PageHeader, explanatory cards and navigation actions. Use public-hub instead of landing for an account entry point without a marketing hero or screenshot; use sign-in-card for a single sign-in form. Recommend 2 to 4 cards; any number is supported. Cards use the kit sm breakpoint: one column below sm, two from sm. ARIA: a section labelled by the text span inside the single PageHeader h1, h2 card headings and a ul/li card list. The title span owns the aria-labelledby target id in server HTML and after hydration; PageHeader has no heading-id prop. Loading replaces content with decorative kit Skeletons in an aria-busy section named by loadingLabel. Keyboard: Tab and Shift+Tab move through the primary, secondary and tertiary links in visual order; Enter follows href and invokes onClick, with visible focus and no trap. AuthLayout retains its skip link, named "Skip to main content", before the content in both states. The PageHeader title inherits truncation for long titles.
+
+## Props
+
+| Prop | Type | Default / behaviour |
+| --- | --- | --- |
+| eyebrow | string | Omitted; optional Badge before PageHeader |
+| title | string | Welcome; PageHeader h1 |
+| description | string | Omitted; PageHeader description |
+| cards | { title: string; body: string }[] | Omitted; explanatory list with h2 headings |
+| primaryAction | { label: string; href: string; onClick?: MouseEventHandler<HTMLAnchorElement> } | Sign in, #sign-in; Button rendered as an anchor |
+| secondaryAction | Same action shape | Omitted; secondary Button rendered as an anchor |
+| tertiaryLink | Same action shape | Omitted; one kit Link |
+| footer | string | Omitted; Separator then supporting Text |
+| loading | boolean | false; replaces header, cards and actions; hides eyebrow/footer copy |
+| logo | ReactNode | Active preset logo from AuthLayout |
+| loadingLabel | string | Loading; accessible name of the busy section |
+
+Optional content has no default fixtures and creates no empty wrappers; an empty cards array also renders no list. Without footer there is no separator. Preview fixtures: public-hub--full, public-hub--minimal, public-hub--loading and public-hub--minimal-loading.
+
+## Theme examples
+
+Import ThemeProvider from @gntik-ai/ui and PublicHubPage from @gntik-ai/templates. Pass account routes and copy as props. Each theme supports the same full, minimal and loading composition.
+
+\`\`\`tsx
+<ThemeProvider defaultMode="dark" storageKey={null}>
+  <PublicHubPage title="Welcome" primaryAction={{ label: 'Sign in', href: '/sign-in' }} />
+</ThemeProvider>
+\`\`\`
+
+\`\`\`tsx
+<ThemeProvider defaultMode="light" storageKey={null}>
+  <PublicHubPage title="Welcome" primaryAction={{ label: 'Sign in', href: '/sign-in' }} />
+</ThemeProvider>
+\`\`\`
+
+\`\`\`tsx
+<ThemeProvider defaultMode="high_contrast" storageKey={null}>
+  <PublicHubPage title="Welcome" primaryAction={{ label: 'Sign in', href: '/sign-in' }} />
+</ThemeProvider>
+\`\`\``,
+  layout: 'AuthLayout',
+  blocks: ['page-header'],
+  pattern:
+    'Named section (aria-labelledby points to the title span inside the PageHeader h1, including in server HTML); h2 card headings in a ul/li list. Loading: aria-busy=true and aria-label=loadingLabel, with decorative Skeletons and no content links or headings.',
+  keyboard: [
+    [
+      'Tab / Shift+Tab',
+      'Move through primary, secondary and tertiary navigation links in reading order, after the AuthLayout skip link named "Skip to main content"; focus is visible and can leave the page.',
+    ],
+    ['Enter', 'Follow the focused anchor href and invoke its optional onClick handler.'],
+  ],
+} satisfies TemplateMeta & { pattern: string; keyboard: [string, string][] };

package/src/reset-password/Page.test.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../test/a11y';
+import ResetPasswordPage from './Page';
+
+describe('ResetPasswordPage', () => {
+  it('renders the new-password form', async () => {
+    const { container } = render(<ResetPasswordPage />);
+    expect(screen.getByRole('main')).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 1, name: 'Set a new password' })).toBeInTheDocument();
+    await expectNoAxeViolations(container);
+  });
+
+  it('saves the password and continues from the success state', async () => {
+    const onSubmit = vi.fn();
+    const onContinue = vi.fn();
+    const { container } = render(<ResetPasswordPage onSubmit={onSubmit} onContinue={onContinue} />);
+    await userEvent.type(screen.getByLabelText('New password'), 'a-much-longer-pass');
+    await userEvent.type(screen.getByLabelText('Confirm password'), 'a-much-longer-pass');
+    await userEvent.click(screen.getByRole('button', { name: 'Update password' }));
+    expect(onSubmit).toHaveBeenCalledWith('a-much-longer-pass');
+    expect(await screen.findByRole('heading', { level: 1, name: 'Password updated' })).toBeInTheDocument();
+    await userEvent.click(screen.getByRole('button', { name: 'Continue to sign in' }));
+    expect(onContinue).toHaveBeenCalledOnce();
+    await expectNoAxeViolations(container);
+  });
+});

package/src/reset-password/Page.tsx

@@ -0,0 +1,46 @@
+import { ResetPasswordForm } from '@gntik-ai/blocks';
+import { AuthLayout, Link } from '@gntik-ai/ui';
+import type { ReactNode } from 'react';
+import { resetPasswordSample } from './data';
+
+export interface ResetPasswordPageProps {
+  /** Saves the new password. A returned promise shows the loading state; a rejection shows in the alert. */
+  onSubmit: (password: string) => void | Promise<void>;
+  /** "Continue to sign in" from the success state. */
+  onContinue: () => void;
+  error: string | null;
+  minPasswordLength: number;
+  signInHref: string;
+  logo: ReactNode;
+}
+
+/** Card new-password step: AuthLayout `card` + ResetPasswordForm (form → success). */
+export default function ResetPasswordPage({
+  onSubmit,
+  onContinue,
+  error,
+  minPasswordLength = resetPasswordSample.minPasswordLength,
+  signInHref = resetPasswordSample.signInHref,
+  logo,
+}: Partial<ResetPasswordPageProps>) {
+  return (
+    <AuthLayout
+      fullScreen
+      variant="card"
+      logo={logo}
+      skipLinkLabel="Skip to password form"
+      footer={
+        <>
+          Remembered it? <Link href={signInHref}>Back to sign in</Link>
+        </>
+      }
+    >
+      <ResetPasswordForm
+        onSubmit={onSubmit}
+        onContinue={onContinue}
+        error={error}
+        minPasswordLength={minPasswordLength}
+      />
+    </AuthLayout>
+  );
+}

package/src/reset-password/data.ts

@@ -0,0 +1,5 @@
+/** Sample policy for the new password. */
+export const resetPasswordSample = {
+  minPasswordLength: 12,
+  signInHref: '#sign-in',
+};

package/src/reset-password/template.meta.ts

@@ -0,0 +1,12 @@
+import type { TemplateMeta } from '../meta';
+
+export const meta: TemplateMeta = {
+  name: 'Reset password',
+  family: 'Auth',
+  priority: 'P1',
+  status: 'stable',
+  description:
+    'Centred card new-password step: password with a strength meter and confirmation, then a success state that continues to sign in.',
+  layout: 'AuthLayout',
+  blocks: ['reset-password-form'],
+};

package/src/resource-detail/Page.test.tsx

@@ -0,0 +1,260 @@
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../test/a11y';
+import { DEPLOYMENT_DETAILS, DEPLOYMENT_EVENTS } from '@gntik-ai/blocks';
+import ResourceDetailPage from './Page';
+import { detailActivity, detailDangerActions } from './data';
+
+describe('ResourceDetailPage', () => {
+  it('omits read-only history even when editable events are supplied', { timeout: 15000 }, async () => {
+    const { container } = render(<ResourceDetailPage readOnly name="Resource record" events={DEPLOYMENT_EVENTS} />);
+    expect(screen.queryByRole('heading', { name: 'Status history' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('list', { name: 'Status history' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('region', { name: 'Status history' })).not.toBeInTheDocument();
+    expect(within(screen.getByRole('main')).queryByRole('definition')).not.toBeInTheDocument();
+    expect(container.querySelector('time')).toBeNull();
+    await expectNoAxeViolations(container);
+  });
+
+  it('honors explicit read-only header props and the Edit handler', { timeout: 15000 }, async () => {
+    const onAction = vi.fn();
+    const onEditDetails = vi.fn();
+    const { container } = render(
+      <ResourceDetailPage
+        readOnly
+        name="Resource record"
+        description="An explicit description."
+        overviewDescription="Explicit detail copy."
+        meta={[{ label: 'Identifier', value: 'record_42' }]}
+        actions={[{ label: 'Inspect resource', onClick: onAction }]}
+        onEditDetails={onEditDetails}
+      />,
+    );
+    expect(screen.getByText('An explicit description.')).toBeInTheDocument();
+    expect(screen.getByText('Explicit detail copy.')).toBeInTheDocument();
+    expect(screen.getByText('record_42')).toBeInTheDocument();
+    // Both responsive header action copies are visible to jsdom without layout CSS.
+    await userEvent.click(screen.getAllByRole('button', { name: 'Inspect resource' })[0]!);
+    await userEvent.click(screen.getByRole('button', { name: 'Edit' }));
+    expect(onAction).toHaveBeenCalledOnce();
+    expect(onEditDetails).toHaveBeenCalledOnce();
+    await expectNoAxeViolations(container);
+  });
+
+  it('ignores read-only history in the editable default', { timeout: 15000 }, async () => {
+    const { container } = render(<ResourceDetailPage history={[]} />);
+    expect(screen.getAllByRole('tab')).toHaveLength(3);
+    expect(screen.getByRole('list', { name: 'Status history' })).toBeInTheDocument();
+    expect(screen.queryByRole('heading', { name: 'No status history' })).not.toBeInTheDocument();
+    await expectNoAxeViolations(container);
+  });
+
+  it('models table detail without a history card or editable tabs', { timeout: 15000 }, async () => {
+    const { default: TableDetail } = await import('./examples/postgres-table-detail');
+    const { container } = render(<TableDetail />);
+    expect(screen.getByRole('heading', { level: 1, name: 'Table detail' })).toBeInTheDocument();
+    expect(screen.getByText('id, title, created_at')).toBeInTheDocument();
+    expect(screen.queryByRole('heading', { name: 'Status history' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('list', { name: 'Status history' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('region', { name: 'Status history' })).not.toBeInTheDocument();
+    expect(screen.getAllByRole('tab')).toHaveLength(1);
+    await expectNoAxeViolations(container);
+  });
+
+  it('models realtime configuration without a history card or editable tabs', { timeout: 15000 }, async () => {
+    const { default: RealtimeConfiguration } = await import('./examples/realtime-configuration');
+    const { container } = render(<RealtimeConfiguration />);
+    expect(screen.getByRole('heading', { level: 1, name: 'Realtime configuration' })).toBeInTheDocument();
+    expect(screen.getByText('workspace_42')).toBeInTheDocument();
+    expect(screen.queryByRole('heading', { name: 'Status history' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('list', { name: 'Status history' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('region', { name: 'Status history' })).not.toBeInTheDocument();
+    expect(screen.getAllByRole('tab')).toHaveLength(1);
+    await expectNoAxeViolations(container);
+  });
+
+  it('models a runtime without a transition as explicit empty history', { timeout: 15000 }, async () => {
+    const { default: RuntimeWithoutTransition } = await import('./examples/runtime-without-transition');
+    const { container } = render(<RuntimeWithoutTransition />);
+    expect(screen.getByRole('region', { name: 'Status history' })).toHaveTextContent('No status history');
+    expect(within(screen.getByRole('main')).queryByRole('listitem')).not.toBeInTheDocument();
+    expect(container.querySelector('time')).toBeNull();
+    await expectNoAxeViolations(container);
+  });
+
+  it('models a runtime transition with one event and no invented actor', { timeout: 15000 }, async () => {
+    const { default: RuntimeWithTransition } = await import('./examples/runtime-with-transition');
+    const { container } = render(<RuntimeWithTransition />);
+    const list = screen.getByRole('list', { name: 'Status history' });
+    expect(within(list).getAllByRole('listitem')).toHaveLength(1);
+    expect(within(list).getByText('Ready')).toBeInTheDocument();
+    expect(list.querySelectorAll('time')).toHaveLength(1);
+    expect(list.querySelector('time')).toHaveAttribute('datetime', '2026-05-01T10:00:00.000Z');
+    expect(list).not.toHaveTextContent('by ');
+    await expectNoAxeViolations(container);
+  });
+
+  it('shows every supplied read-only event without collapsing or adding actors', { timeout: 15000 }, async () => {
+    const history = [
+      { id: '1', status: 'Ready', tone: 'success' as const, title: 'Runtime ready', at: '2026-05-01T10:00:00Z' },
+      { id: '2', status: 'Starting', tone: 'info' as const, title: 'Runtime starting', at: '2026-05-01T09:00:00Z' },
+      {
+        id: '3',
+        status: 'Scheduled',
+        tone: 'neutral' as const,
+        title: 'Runtime scheduled',
+        at: '2026-05-01T08:00:00Z',
+      },
+      { id: '4', status: 'Pending', tone: 'warning' as const, title: 'Runtime pending', at: '2026-05-01T07:00:00Z' },
+      {
+        id: '5',
+        status: 'Requested',
+        tone: 'neutral' as const,
+        title: 'Runtime requested',
+        at: '2026-05-01T06:00:00Z',
+      },
+    ];
+    const { container } = render(<ResourceDetailPage readOnly name="Function runtime" history={history} />);
+    const list = screen.getByRole('list', { name: 'Status history' });
+    expect(within(list).getAllByRole('listitem')).toHaveLength(5);
+    expect(list.querySelectorAll('time')).toHaveLength(5);
+    expect(list).not.toHaveTextContent('by ');
+    expect(screen.queryByRole('button', { name: /earlier/ })).not.toBeInTheDocument();
+    await expectNoAxeViolations(container);
+  });
+
+  it('renders the named empty state for explicit empty read-only history', { timeout: 15000 }, async () => {
+    const { container } = render(<ResourceDetailPage readOnly name="Function runtime" history={[]} />);
+    expect(screen.getByRole('heading', { level: 2, name: 'Status history' })).toBeInTheDocument();
+    const emptyTitle = screen.getByRole('heading', { name: 'No status history' });
+    expect(emptyTitle.closest('[role="region"]')).toHaveAccessibleName('Status history');
+    expect(screen.queryByRole('list', { name: 'Status history' })).not.toBeInTheDocument();
+    expect(within(screen.getByRole('main')).queryByRole('listitem')).not.toBeInTheDocument();
+    expect(container.querySelector('time')).toBeNull();
+    for (const event of DEPLOYMENT_EVENTS) {
+      expect(container).not.toHaveTextContent(event.title);
+    }
+    await expectNoAxeViolations(container);
+  });
+
+  it('uses only explicit resource data in read-only mode', { timeout: 15000 }, async () => {
+    const { container } = render(
+      <ResourceDetailPage
+        readOnly
+        name="Resource record"
+        status="active"
+        details={[{ id: 'identifier', label: 'Identifier', value: 'record_42' }]}
+      />,
+    );
+    const main = screen.getByRole('main');
+    expect(within(main).getByRole('heading', { level: 1, name: 'Resource record' })).toBeInTheDocument();
+    expect(within(main).getByText('active')).toBeInTheDocument();
+    expect(within(main).getByText('record_42')).toBeInTheDocument();
+    const header = main.querySelector('header');
+    expect(header).not.toBeNull();
+    expect(header?.querySelector('dl')).toBeNull();
+    expect(header?.querySelector('button')).toBeNull();
+    expect(screen.queryByRole('button', { name: 'Edit' })).not.toBeInTheDocument();
+    for (const text of [
+      'orders-api',
+      'eu-west-1',
+      'View logs',
+      'Redeploy',
+      'Settings of this deployment.',
+      'Settings of this resource.',
+      'Public REST API for orders, carts and checkout.',
+    ]) {
+      expect(container).not.toHaveTextContent(text);
+    }
+    for (const item of DEPLOYMENT_DETAILS) {
+      if (item.value) expect(container).not.toHaveTextContent(item.value);
+    }
+    for (const event of DEPLOYMENT_EVENTS) {
+      for (const text of [event.status, event.title, event.description, event.actor]) {
+        if (text) expect(main).not.toHaveTextContent(text);
+      }
+    }
+    await expectNoAxeViolations(container);
+  });
+
+  it('keeps only Overview in read-only mode and ignores editable inputs', { timeout: 15000 }, async () => {
+    const onTabChange = vi.fn();
+    const onSaveSettings = vi.fn();
+    const { container } = render(
+      <ResourceDetailPage
+        readOnly
+        name="Function runtime"
+        activity={detailActivity}
+        dangerActions={detailDangerActions}
+        onSaveSettings={onSaveSettings}
+        defaultTab="settings"
+        onTabChange={onTabChange}
+      />,
+    );
+    const tablist = screen.getByRole('tablist', { name: 'Resource sections' });
+    expect(within(tablist).getAllByRole('tab')).toHaveLength(1);
+    const overview = within(tablist).getByRole('tab', { name: 'Overview' });
+    expect(overview).toHaveAttribute('aria-selected', 'true');
+    expect(screen.queryByRole('tab', { name: 'Activity' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('tab', { name: 'Settings' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Save changes' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('heading', { name: 'Danger zone' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('region', { name: 'Activity, newest first' })).not.toBeInTheDocument();
+    screen.getByRole('main').focus();
+    await userEvent.tab();
+    expect(overview).toHaveFocus();
+    await userEvent.keyboard('{ArrowRight}{Enter}{ArrowLeft}{Enter}{Home}{End}');
+    expect(overview).toHaveFocus();
+    expect(onTabChange).not.toHaveBeenCalledWith('activity');
+    expect(onTabChange).not.toHaveBeenCalledWith('settings');
+    expect(onSaveSettings).not.toHaveBeenCalled();
+    await expectNoAxeViolations(container);
+  });
+
+  it('renders the header with status and the overview tab', { timeout: 15000 }, async () => {
+    const { container } = render(<ResourceDetailPage />);
+    expect(screen.getByRole('main')).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 1, name: 'orders-api' })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: 'Overview' })).toHaveAttribute('aria-selected', 'true');
+    expect(screen.getByRole('heading', { level: 2, name: 'Configuration' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 2, name: 'Status history' })).toBeInTheDocument();
+    expect(screen.getByRole('list', { name: 'Status history' })).toBeInTheDocument();
+    await expectNoAxeViolations(container);
+  });
+
+  it('switches to Activity with the keyboard', { timeout: 15000 }, async () => {
+    const onTabChange = vi.fn();
+    render(<ResourceDetailPage onTabChange={onTabChange} />);
+    await userEvent.click(screen.getByRole('tab', { name: 'Overview' }));
+    await userEvent.keyboard('{ArrowRight}{Enter}');
+    expect(onTabChange).toHaveBeenCalledWith('activity');
+    expect(screen.getByRole('region', { name: 'Activity, newest first' })).toBeInTheDocument();
+  });
+
+  it('saves the settings form and shows the danger zone', { timeout: 15000 }, async () => {
+    const onSaveSettings = vi.fn();
+    const { container } = render(<ResourceDetailPage defaultTab="settings" onSaveSettings={onSaveSettings} />);
+    const save = screen.getByRole('button', { name: 'Save changes' });
+    expect(save).toBeDisabled();
+    const nameInput = screen.getByRole('textbox', { name: /Name/ });
+    await userEvent.clear(nameInput);
+    await userEvent.type(nameInput, 'orders-api-v2');
+    await userEvent.click(save);
+    expect(onSaveSettings).toHaveBeenCalledWith(expect.objectContaining({ name: 'orders-api-v2' }));
+    expect(screen.getByRole('heading', { name: 'Danger zone' })).toBeInTheDocument();
+    await expectNoAxeViolations(container);
+  });
+
+  it('takes the Overview card copy from props', { timeout: 15000 }, () => {
+    render(
+      <ResourceDetailPage
+        overviewTitle="Function settings"
+        overviewDescription="Runtime and limits."
+        historyTitle="Deploy history"
+      />,
+    );
+    expect(screen.getByRole('heading', { level: 2, name: 'Function settings' })).toBeInTheDocument();
+    expect(screen.getByText('Runtime and limits.')).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 2, name: 'Deploy history' })).toBeInTheDocument();
+  });
+});