@gntik-ai/templates 0.0.0-stage → 0.6.0

package/src/messaging/Page.tsx

@@ -0,0 +1,236 @@
+import { PageHeader } from '@gntik-ai/blocks';
+import { ChatComposer, ChatMessage } from '@gntik-ai/chat';
+import { MessagesSquare, SquarePen } from '@gntik-ai/icons';
+import {
+  Avatar,
+  AvatarGroup,
+  Badge,
+  EmptyState,
+  Heading,
+  Page,
+  SplitLayout,
+  Text,
+  Thumbnail,
+  ThumbnailList,
+  Timestamp,
+  TooltipProvider,
+  cn,
+  type BreadcrumbItem,
+} from '@gntik-ai/ui';
+import { useId, useState } from 'react';
+import { ConsoleShell, type ConsoleShellProps } from '../shared/ConsoleShell';
+import {
+  conversations as sampleConversations,
+  messagingBreadcrumbs,
+  type Conversation,
+  type MessageAttachment,
+} from './data';
+
+export interface MessagingProps {
+  conversations: Conversation[];
+  defaultConversationId: string | null;
+  /** Name shown on the current user's messages. */
+  currentUser: string;
+  /** Called with the text and attachments; the page appends the message locally. */
+  onSend: (conversationId: string, text: string, attachments: MessageAttachment[]) => void;
+  onNewConversation: () => void;
+  breadcrumbs: BreadcrumbItem[];
+  currentHref: string;
+  shell: Omit<ConsoleShellProps, 'children'>;
+}
+
+/** Team messaging: SplitLayout conversation list → thread of ChatMessages with Thumbnail attachments and a ChatComposer. */
+export default function MessagingPage(props: Partial<MessagingProps>) {
+  const {
+    conversations: initial = sampleConversations,
+    defaultConversationId = null,
+    currentUser = 'You',
+    onSend,
+    onNewConversation,
+    breadcrumbs = messagingBreadcrumbs,
+    currentHref = '/messages',
+    shell,
+  } = props;
+  const [items, setItems] = useState(initial);
+  const [selectedId, setSelectedId] = useState<string | null>(defaultConversationId);
+  const [showDetail, setShowDetail] = useState(defaultConversationId != null);
+  const [pending, setPending] = useState<MessageAttachment[]>([]);
+  const ids = useId();
+  const selected = items.find((c) => c.id === selectedId) ?? null;
+
+  const openConversation = (id: string) => {
+    setSelectedId(id);
+    setShowDetail(true);
+    setPending([]);
+    setItems((list) => list.map((c) => (c.id === id ? { ...c, unread: 0 } : c)));
+  };
+  const send = (text: string) => {
+    if (!selected) return;
+    const at = new Date();
+    const attachments = pending;
+    setItems((list) =>
+      list.map((c) =>
+        c.id === selected.id
+          ? {
+              ...c,
+              messages: [
+                ...c.messages,
+                { id: `m-${at.getTime()}`, author: currentUser, mine: true, text, at, attachments },
+              ],
+            }
+          : c,
+      ),
+    );
+    setPending([]);
+    onSend?.(selected.id, text, attachments);
+  };
+
+  const list = (
+    <ul aria-label="Conversations" className="flex flex-col gap-0.5 p-2">
+      {items.map((c) => {
+        const last = c.messages[c.messages.length - 1];
+        return (
+          <li key={c.id}>
+            <button
+              type="button"
+              aria-current={c.id === selectedId ? 'true' : undefined}
+              onClick={() => openConversation(c.id)}
+              className="flex w-full items-start gap-3 rounded-lg px-3 py-2.5 text-start hover:bg-accent/55 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring aria-[current=true]:bg-accent"
+            >
+              <Avatar size="sm" name={c.title} aria-hidden />
+              <span className="min-w-0 flex-1">
+                <span className="flex items-baseline gap-2">
+                  <span
+                    className={cn(
+                      'min-w-0 flex-1 truncate text-[13px] text-foreground',
+                      c.unread > 0 && 'font-semibold',
+                    )}
+                  >
+                    {c.title}
+                  </span>
+                  {last && <Timestamp value={last.at} tooltip={false} className="shrink-0 font-mono text-[11px]" />}
+                </span>
+                <span className="mt-0.5 flex items-center gap-2">
+                  <span className="min-w-0 flex-1 truncate text-[12px] text-muted-foreground">
+                    {last ? `${last.mine ? 'You' : last.author.split(' ')[0]}: ${last.text}` : 'No messages yet'}
+                  </span>
+                  {c.unread > 0 && (
+                    <Badge tone="primary" size="sm">
+                      {c.unread}
+                      <span className="sr-only"> unread</span>
+                    </Badge>
+                  )}
+                </span>
+              </span>
+            </button>
+          </li>
+        );
+      })}
+    </ul>
+  );
+
+  const detail = selected ? (
+    <section aria-labelledby={`${ids}-title`} className="flex h-full min-h-0 flex-col">
+      <header className="flex items-center gap-3 border-b border-border px-5 py-3">
+        <div className="min-w-0 flex-1">
+          <Heading id={`${ids}-title`} level={2} size="xs" truncate>
+            {selected.title}
+          </Heading>
+          <Text variant="caption" tone="muted" truncate>
+            {selected.participants.join(', ')}
+          </Text>
+        </div>
+        <AvatarGroup size="xs" max={3} label="Participants">
+          {selected.participants.map((p) => (
+            <Avatar key={p} name={p} />
+          ))}
+        </AvatarGroup>
+      </header>
+      <div
+        role="log"
+        aria-label={`Messages in ${selected.title}`}
+        className="flex min-h-0 flex-1 flex-col gap-5 overflow-y-auto px-5 py-5"
+      >
+        {selected.messages.map((m) => (
+          <ChatMessage
+            key={m.id}
+            role={m.mine ? 'user' : 'assistant'}
+            author={m.mine ? currentUser : m.author}
+            avatar={m.mine ? undefined : <Avatar size="sm" name={m.author} aria-hidden />}
+            timestamp={m.at}
+          >
+            {m.text}
+            {m.attachments && m.attachments.length > 0 && (
+              <ThumbnailList aria-label={`Attachments from ${m.author}`} className="mt-2">
+                {m.attachments.map((a) => (
+                  <Thumbnail key={a.id} name={a.name} size={a.size} type={a.type} src={a.src} />
+                ))}
+              </ThumbnailList>
+            )}
+          </ChatMessage>
+        ))}
+      </div>
+      <div className="border-t border-border p-3">
+        <ChatComposer
+          label={`Message ${selected.title}`}
+          placeholder={`Message ${selected.title}…`}
+          onSubmit={send}
+          attachments={pending.map(({ id, name, size }) => ({ id, name, size }))}
+          onAttach={(files) =>
+            setPending((p) => [
+              ...p,
+              ...files.map((f, i) => ({
+                id: `${f.name}-${Date.now()}-${i}`,
+                name: f.name,
+                size: f.size,
+                type: f.type || undefined,
+              })),
+            ])
+          }
+          onRemoveAttachment={(id) => setPending((p) => p.filter((a) => a.id !== id))}
+        />
+      </div>
+    </section>
+  ) : (
+    <EmptyState
+      icon={MessagesSquare}
+      size="sm"
+      titleAs="h2"
+      className="mx-auto mt-16"
+      title="Select a conversation"
+      description="Messages and files show up here."
+    />
+  );
+
+  return (
+    <ConsoleShell breadcrumbs={breadcrumbs} currentHref={currentHref} {...shell}>
+      <Page
+        width="full"
+        header={
+          <PageHeader
+            breadcrumbs={null}
+            title="Messages"
+            description="Direct and group conversations with your workspace."
+            status=""
+            meta={[]}
+            tabs={null}
+            actions={[{ label: 'New message', icon: SquarePen, onClick: onNewConversation }]}
+          />
+        }
+      >
+        <TooltipProvider>
+          <div className="h-[680px] min-h-0 overflow-hidden rounded-xl border border-border">
+            <SplitLayout
+              listLabel="Conversations"
+              detailLabel="Conversation"
+              showDetail={showDetail}
+              onShowDetailChange={setShowDetail}
+              list={list}
+              detail={detail}
+            />
+          </div>
+        </TooltipProvider>
+      </Page>
+    </ConsoleShell>
+  );
+}

package/src/messaging/data.ts

@@ -0,0 +1,118 @@
+import type { BreadcrumbItem } from '@gntik-ai/ui';
+
+export interface MessageAttachment {
+  id: string;
+  name: string;
+  size?: number;
+  type?: string;
+  /** Image preview URL. */
+  src?: string;
+}
+
+export interface DirectMessage {
+  id: string;
+  author: string;
+  /** Sent by the current user (right-aligned bubble). */
+  mine?: boolean;
+  text: string;
+  at: Date;
+  attachments?: MessageAttachment[];
+}
+
+export interface Conversation {
+  id: string;
+  title: string;
+  /** Other participants' names. */
+  participants: string[];
+  unread: number;
+  messages: DirectMessage[];
+}
+
+export const messagingBreadcrumbs: BreadcrumbItem[] = [
+  { label: 'Acme Industries', href: '/overview' },
+  { label: 'Messages' },
+];
+
+const MIN = 60_000;
+const NOW = Date.now();
+
+/** Neutral illustration: shapes at low opacity in the default fill, readable in every theme. */
+const PREVIEW =
+  'data:image/svg+xml;utf8,' +
+  encodeURIComponent(
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 120"><rect width="160" height="120" fill-opacity="0.08"/><circle cx="118" cy="34" r="14" fill-opacity="0.22"/><path d="M0 120 L52 58 L92 100 L118 76 L160 120 Z" fill-opacity="0.3"/></svg>',
+  );
+
+export const conversations: Conversation[] = [
+  {
+    id: 'c-release',
+    title: 'Release 2.14',
+    participants: ['Priya Natarajan', 'Marcus Chen'],
+    unread: 2,
+    messages: [
+      {
+        id: 'm1',
+        author: 'Priya Natarajan',
+        text: 'Deploy gates are green on staging. Sharing the dashboard before we promote.',
+        at: new Date(NOW - 42 * MIN),
+        attachments: [{ id: 'a1', name: 'staging-dashboard.png', size: 482_000, type: 'image/png', src: PREVIEW }],
+      },
+      {
+        id: 'm2',
+        author: 'You',
+        mine: true,
+        text: 'Looks good. Any open incidents on the gateway?',
+        at: new Date(NOW - 38 * MIN),
+      },
+      {
+        id: 'm3',
+        author: 'Marcus Chen',
+        text: 'None since Tuesday. Runbook attached in case we need to roll back.',
+        at: new Date(NOW - 12 * MIN),
+        attachments: [{ id: 'a2', name: 'rollback-runbook.pdf', size: 236_000, type: 'application/pdf' }],
+      },
+      {
+        id: 'm4',
+        author: 'Priya Natarajan',
+        text: 'Promoting at 15:00 unless someone objects.',
+        at: new Date(NOW - 5 * MIN),
+      },
+    ],
+  },
+  {
+    id: 'c-billing',
+    title: 'Ana Souza',
+    participants: ['Ana Souza'],
+    unread: 0,
+    messages: [
+      {
+        id: 'm1',
+        author: 'Ana Souza',
+        text: 'Can you check the September invoice? The seat count looks off by two.',
+        at: new Date(NOW - 3 * 60 * MIN),
+        attachments: [{ id: 'a1', name: 'invoice-2026-09.csv', size: 18_400, type: 'text/csv' }],
+      },
+      {
+        id: 'm2',
+        author: 'You',
+        mine: true,
+        text: 'Two guests were counted as members. I’ll ask billing for a credit.',
+        at: new Date(NOW - 170 * MIN),
+      },
+    ],
+  },
+  {
+    id: 'c-onboarding',
+    title: 'Onboarding squad',
+    participants: ['Jordan Lee', 'Grace Hall', 'Linus Park'],
+    unread: 0,
+    messages: [
+      {
+        id: 'm1',
+        author: 'Jordan Lee',
+        text: 'New checklist is live. Completion went from 41% to 63% in the first week.',
+        at: new Date(NOW - 2 * 24 * 60 * MIN),
+      },
+    ],
+  },
+];

package/src/messaging/template.meta.ts

@@ -0,0 +1,12 @@
+import type { TemplateMeta } from '../meta';
+
+export const meta: TemplateMeta = {
+  name: 'Messaging',
+  family: 'Work',
+  priority: 'P3',
+  status: 'experimental',
+  description:
+    'Team messaging in the console: SplitLayout conversation list (unread counts, last message) → thread of ChatMessages with Thumbnail attachments, participants AvatarGroup, and a ChatComposer with file attachments; Back on small screens.',
+  layout: 'SidebarLayout · Page · SplitLayout',
+  blocks: ['app-sidebar', 'app-topbar', 'page-header'],
+};

package/src/meta.ts

@@ -0,0 +1,24 @@
+/** Metadata contract for a page template: packages/templates/src/<id>/template.meta.ts. */
+export interface TemplateMeta {
+  /** Display name, e.g. "Home dashboard". */
+  name: string;
+  family:
+    | 'Shells'
+    | 'Auth'
+    | 'Onboarding'
+    | 'Overview'
+    | 'Resources'
+    | 'Work'
+    | 'Settings'
+    | 'System'
+    | 'AI'
+    | 'Builders'
+    | 'Help';
+  priority: 'P1' | 'P2' | 'P3';
+  status: 'stable' | 'beta' | 'experimental';
+  description: string;
+  /** Layout it is built on, e.g. "SidebarLayout". */
+  layout: string;
+  /** Blocks it composes (ids from kit-registry.json). */
+  blocks: string[];
+}

package/src/mfa/Page.test.tsx

@@ -0,0 +1,22 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../test/a11y';
+import MfaChallengePage from './Page';
+
+describe('MfaChallengePage', () => {
+  it('renders the code step in a card', async () => {
+    const { container } = render(<MfaChallengePage />);
+    expect(screen.getByRole('main')).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 1, name: 'Enter your verification code' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Resend code in 30s' })).toBeDisabled();
+    await expectNoAxeViolations(container);
+  });
+
+  it('auto-submits a complete code', async () => {
+    const onVerify = vi.fn();
+    render(<MfaChallengePage onVerify={onVerify} />);
+    await userEvent.click(screen.getAllByRole('textbox')[0]!);
+    await userEvent.keyboard('482913');
+    expect(onVerify).toHaveBeenCalledWith('482913', 'code');
+  });
+});

package/src/mfa/Page.tsx

@@ -0,0 +1,45 @@
+import { MfaChallenge, type MfaMethod } from '@gntik-ai/blocks';
+import { AuthLayout } from '@gntik-ai/ui';
+import type { ReactNode } from 'react';
+import { mfaChallengeSample } from './data';
+
+export interface MfaChallengePageProps {
+  /** Verifies the code. A returned promise shows the loading state; a rejection shows in the alert. */
+  onVerify: (code: string, method: MfaMethod) => void | Promise<void>;
+  /** Sends a new code. */
+  onResend: () => void | Promise<void>;
+  /** "Back to sign in". */
+  onCancel: () => void;
+  /** Where the code was sent; `null` for authenticator apps. */
+  destination: string | null;
+  resendCooldown: number;
+  length: 6 | 8;
+  error: string | null;
+  logo: ReactNode;
+}
+
+/** Card second-factor step: AuthLayout `card` + MfaChallenge. */
+export default function MfaChallengePage({
+  onVerify,
+  onResend = () => {},
+  onCancel = () => {},
+  destination = mfaChallengeSample.destination,
+  resendCooldown = mfaChallengeSample.resendCooldown,
+  length = mfaChallengeSample.length,
+  error,
+  logo,
+}: Partial<MfaChallengePageProps>) {
+  return (
+    <AuthLayout fullScreen variant="card" logo={logo} skipLinkLabel="Skip to verification form">
+      <MfaChallenge
+        onVerify={onVerify}
+        onResend={onResend}
+        onCancel={onCancel}
+        destination={destination ?? undefined}
+        resendCooldown={resendCooldown}
+        length={length}
+        error={error}
+      />
+    </AuthLayout>
+  );
+}

package/src/mfa/data.ts

@@ -0,0 +1,6 @@
+/** Sample destination and timing for the second-factor step. */
+export const mfaChallengeSample = {
+  destination: 'd•••@example.com',
+  resendCooldown: 30,
+  length: 6 as const,
+};

package/src/mfa/template.meta.ts

@@ -0,0 +1,12 @@
+import type { TemplateMeta } from '../meta';
+
+export const meta: TemplateMeta = {
+  name: 'Two-step verification',
+  family: 'Auth',
+  priority: 'P1',
+  status: 'stable',
+  description:
+    'Centred card second-factor step: one-time code that auto-submits, backup-code fallback, resend with countdown and a way back to sign in.',
+  layout: 'AuthLayout',
+  blocks: ['mfa-challenge'],
+};

package/src/model-providers/Page.test.tsx

@@ -0,0 +1,58 @@
+import { render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../test/a11y';
+import ModelProvidersPage from './Page';
+
+describe('ModelProvidersPage', () => {
+  it('renders the settings nav item, provider keys and usage limits', { timeout: 15000 }, async () => {
+    render(<ModelProvidersPage />);
+    expect(screen.getByRole('main')).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 1, name: 'Model providers' })).toBeInTheDocument();
+    expect(
+      screen.getAllByRole('button', { name: /Model providers/ }).some((b) => b.getAttribute('aria-current') === 'page'),
+    ).toBe(true);
+    expect(screen.getByRole('heading', { level: 2, name: 'Provider keys' })).toBeInTheDocument();
+    expect(screen.getByRole('meter', { name: 'Spend this month' })).toBeInTheDocument();
+    await expectNoAxeViolations();
+  });
+
+  it('tests a connection through onTest', { timeout: 15000 }, async () => {
+    const onTest = vi.fn(() => Promise.resolve(false));
+    render(<ModelProvidersPage onTest={onTest} />);
+    const list = screen.getByRole('region', { name: 'Provider keys' });
+    const row = within(list).getByText('Gateway').closest('li')!;
+    await userEvent.click(within(row).getByRole('button', { name: /Test/ }));
+    expect(onTest).toHaveBeenCalledWith(expect.objectContaining({ id: 'k3' }));
+    await waitFor(() => expect(within(row).getByText('Failing')).toBeInTheDocument());
+  });
+
+  it('adds a key from the dialog after validation', { timeout: 15000 }, async () => {
+    const onAddKey = vi.fn((input: { name: string; provider: string }) => ({
+      id: 'new',
+      name: input.name,
+      provider: input.provider,
+      maskedKey: 'pa-…wxyz',
+      status: 'untested' as const,
+    }));
+    render(<ModelProvidersPage onAddKey={onAddKey} />);
+    await userEvent.click(screen.getAllByRole('button', { name: 'Add provider key' })[0]!);
+    const dialog = await screen.findByRole('dialog');
+    await userEvent.click(within(dialog).getByRole('button', { name: 'Add key' }));
+    expect(onAddKey).not.toHaveBeenCalled();
+    expect(within(dialog).getByText('Choose a provider.')).toBeInTheDocument();
+    await userEvent.type(within(dialog).getByRole('textbox', { name: /Name/ }), 'Staging');
+    await userEvent.click(within(dialog).getByRole('combobox', { name: 'Provider' }));
+    await userEvent.click(await screen.findByRole('option', { name: 'Provider B' }));
+    await userEvent.type(within(dialog).getByLabelText(/API key/), 'pb-secret-1234');
+    await userEvent.click(within(dialog).getByRole('button', { name: 'Add key' }));
+    await waitFor(() =>
+      expect(onAddKey).toHaveBeenCalledWith({
+        name: 'Staging',
+        provider: 'Provider B',
+        endpoint: '',
+        secret: 'pb-secret-1234',
+      }),
+    );
+    expect(await screen.findByText('Staging')).toBeInTheDocument();
+  });
+});