@gntik-ai/templates 0.0.0-stage → 0.5.0

package/package.json

@@ -1,6 +1,67 @@
 {
   "name": "@gntik-ai/templates",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.5.0",
+  "description": "gntik-ui page templates: complete product pages (auth, dashboard, resources, settings, system) on the kit layouts and blocks.",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "dist",
+    "src"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json",
+    "./styles.css": "./src/styles.css"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gntik-ai/gntik-ui.git",
+    "directory": "packages/templates"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "@gntik-ai/blocks": "0.5.0",
+    "@gntik-ai/charts": "0.5.0",
+    "@gntik-ai/chat": "0.5.0",
+    "@gntik-ai/editor": "0.5.0",
+    "@gntik-ai/flow": "0.5.0",
+    "@gntik-ai/icons": "0.5.0",
+    "@gntik-ai/tokens": "0.2.1",
+    "@gntik-ai/ui": "0.5.0",
+    "lucide-react": "^1.48.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.7",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "axe-core": "^4.13.0",
+    "jsdom": "^30.1.1",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "tsdown": "^0.23.0",
+    "typescript": "~6.0.3",
+    "vitest": "^5.0.2"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run"
+  }
 }

package/src/accept-invitation/Page.test.tsx

@@ -0,0 +1,40 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../test/a11y';
+import AcceptInvitationPage from './Page';
+
+describe('AcceptInvitationPage', () => {
+  it('renders the inviter, workspace and role', async () => {
+    const { container } = render(<AcceptInvitationPage />);
+    expect(screen.getByRole('main')).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 1, name: 'Join Acme Industries' })).toBeInTheDocument();
+    expect(screen.getByText('Priya Raman')).toBeInTheDocument();
+    expect(screen.getByText('Developer')).toBeInTheDocument();
+    await expectNoAxeViolations(container);
+  });
+
+  it('joins the workspace', async () => {
+    const onAccept = vi.fn();
+    const onOpenWorkspace = vi.fn();
+    const { container } = render(<AcceptInvitationPage onAccept={onAccept} onOpenWorkspace={onOpenWorkspace} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Join Acme Industries' }));
+    expect(onAccept).toHaveBeenCalledOnce();
+    expect(await screen.findByRole('heading', { level: 1, name: 'Welcome to Acme Industries' })).toBeInTheDocument();
+    expect(screen.getByRole('status')).toHaveTextContent('You joined Acme Industries.');
+    await userEvent.click(screen.getByRole('button', { name: 'Open workspace' }));
+    expect(onOpenWorkspace).toHaveBeenCalledOnce();
+    await expectNoAxeViolations(container);
+  });
+
+  it('declines, and keeps the card on failure', async () => {
+    const onDecline = vi
+      .fn()
+      .mockRejectedValueOnce(new Error('The invitation has expired.'))
+      .mockResolvedValueOnce(undefined);
+    render(<AcceptInvitationPage onDecline={onDecline} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Decline' }));
+    expect(await screen.findByText('The invitation has expired.')).toBeInTheDocument();
+    await userEvent.click(screen.getByRole('button', { name: 'Decline' }));
+    expect(await screen.findByRole('heading', { level: 1, name: 'No problem' })).toBeInTheDocument();
+  });
+});

package/src/accept-invitation/Page.tsx

@@ -0,0 +1,153 @@
+import { AuthHeader } from '@gntik-ai/blocks';
+import { Alert, AuthLayout, Avatar, Badge, Button, Link, Separator, Stack, Text } from '@gntik-ai/ui';
+import { useState, type ReactNode } from 'react';
+import { sampleInvitation, type Invitation } from './data';
+
+export interface AcceptInvitationPageProps {
+  invitation: Invitation;
+  /** Joins the workspace. A returned promise shows the loading state; a rejection shows in the alert. */
+  onAccept: () => void | Promise<void>;
+  /** Declines the invitation. */
+  onDecline: () => void | Promise<void>;
+  /** From the joined state. */
+  onOpenWorkspace: () => void;
+  switchAccountHref: string;
+  logo: ReactNode;
+}
+
+type Outcome = 'pending' | 'accepted' | 'declined';
+
+/** Card invitation: inviter, workspace, role → Join / Decline. */
+export default function AcceptInvitationPage({
+  invitation = sampleInvitation,
+  onAccept,
+  onDecline,
+  onOpenWorkspace,
+  switchAccountHref = '#switch-account',
+  logo,
+}: Partial<AcceptInvitationPageProps>) {
+  const [outcome, setOutcome] = useState<Outcome>('pending');
+  const [busy, setBusy] = useState<'accept' | 'decline' | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const { workspace, role, roleDescription, memberCount, inviter, inviteeEmail, expiresIn } = invitation;
+
+  const act = async (kind: 'accept' | 'decline') => {
+    setError(null);
+    setBusy(kind);
+    try {
+      await (kind === 'accept' ? onAccept?.() : onDecline?.());
+      setOutcome(kind === 'accept' ? 'accepted' : 'declined');
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Something went wrong. Try again.');
+    }
+    setBusy(null);
+  };
+
+  const body =
+    outcome === 'accepted' ? (
+      <Stack gap={2}>
+        <AuthHeader
+          eyebrow="Invitation accepted"
+          title={`Welcome to ${workspace}`}
+          description={`You joined as ${role}. ${inviter.name} has been notified.`}
+        />
+        <Button size="lg" className="w-full" onClick={onOpenWorkspace}>
+          Open workspace
+        </Button>
+      </Stack>
+    ) : outcome === 'declined' ? (
+      <AuthHeader
+        className="mb-0"
+        eyebrow="Invitation declined"
+        title="No problem"
+        description={`You declined the invitation to ${workspace}. ${inviter.name} can invite you again at any time.`}
+      />
+    ) : (
+      <>
+        <AuthHeader
+          eyebrow="Invitation"
+          title={`Join ${workspace}`}
+          description={`${inviter.name} invited you to collaborate. This invitation expires in ${expiresIn}.`}
+        />
+        <Stack gap={5}>
+          {error && <Alert tone="destructive" description={error} />}
+          <Stack direction="row" align="center" gap={3}>
+            <Avatar name={inviter.name} src={inviter.avatarUrl} size="md" aria-hidden />
+            <Stack gap={0}>
+              <Text variant="label">{inviter.name}</Text>
+              <Text variant="caption">{inviter.email}</Text>
+            </Stack>
+          </Stack>
+          <Separator />
+          <Stack as="dl" gap={3}>
+            <Stack direction="row" justify="between" align="center" gap={4}>
+              <Text as="dt" variant="supporting" tone="muted">
+                Workspace
+              </Text>
+              <Text as="dd" variant="label">
+                {workspace}
+              </Text>
+            </Stack>
+            <Stack direction="row" justify="between" align="center" gap={4}>
+              <Text as="dt" variant="supporting" tone="muted">
+                Role
+              </Text>
+              <Text as="dd" variant="label">
+                <Badge tone="primary">{role}</Badge>
+              </Text>
+            </Stack>
+            <Stack direction="row" justify="between" align="center" gap={4}>
+              <Text as="dt" variant="supporting" tone="muted">
+                Members
+              </Text>
+              <Text as="dd" variant="label">
+                {memberCount}
+              </Text>
+            </Stack>
+          </Stack>
+          <Text variant="caption">{roleDescription}</Text>
+          <Stack gap={2}>
+            <Button
+              size="lg"
+              className="w-full"
+              loading={busy === 'accept'}
+              disabled={busy === 'decline'}
+              onClick={() => void act('accept')}
+            >
+              Join {workspace}
+            </Button>
+            <Button
+              variant="ghost"
+              size="lg"
+              className="w-full"
+              loading={busy === 'decline'}
+              disabled={busy === 'accept'}
+              onClick={() => void act('decline')}
+            >
+              Decline
+            </Button>
+          </Stack>
+        </Stack>
+      </>
+    );
+
+  return (
+    <AuthLayout
+      fullScreen
+      variant="card"
+      logo={logo}
+      skipLinkLabel="Skip to invitation"
+      footer={
+        <>
+          Signed in as <span className="font-medium text-foreground">{inviteeEmail}</span>.{' '}
+          <Link href={switchAccountHref}>Not you?</Link>
+        </>
+      }
+    >
+      {body}
+      <span role="status" className="sr-only">
+        {outcome === 'accepted' ? `You joined ${workspace}.` : outcome === 'declined' ? 'Invitation declined.' : ''}
+      </span>
+    </AuthLayout>
+  );
+}

package/src/accept-invitation/data.ts

@@ -0,0 +1,22 @@
+/** Sample invitation: who invited whom, to which workspace and with what role. */
+export interface Invitation {
+  workspace: string;
+  role: string;
+  /** What the role can do, in one line. */
+  roleDescription: string;
+  memberCount: number;
+  inviter: { name: string; email: string; avatarUrl?: string };
+  /** Signed-in (or invited) email. */
+  inviteeEmail: string;
+  expiresIn: string;
+}
+
+export const sampleInvitation: Invitation = {
+  workspace: 'Acme Industries',
+  role: 'Developer',
+  roleDescription: 'Create projects, deploy to staging and view usage.',
+  memberCount: 24,
+  inviter: { name: 'Priya Raman', email: 'priya@acme.example' },
+  inviteeEmail: 'dana@example.com',
+  expiresIn: '6 days',
+};

package/src/accept-invitation/template.meta.ts

@@ -0,0 +1,12 @@
+import type { TemplateMeta } from '../meta';
+
+export const meta: TemplateMeta = {
+  name: 'Accept invitation',
+  family: 'Auth',
+  priority: 'P2',
+  status: 'beta',
+  description:
+    'Centred card invitation: inviter, workspace, role and member count, the invited email with a switch-account link, and Join / Decline with result states.',
+  layout: 'AuthLayout',
+  blocks: [],
+};

package/src/assistant-chat/Page.test.tsx

@@ -0,0 +1,51 @@
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { expectNoAxeViolations } from '../test/a11y';
+import AssistantChatPage from './Page';
+import { assistantReply, assistantTool, chunkReply } from './data';
+
+const total = assistantTool.durationMs + (chunkReply(assistantReply).length + 2) * 30;
+
+describe('AssistantChatPage', () => {
+  it('renders the console with the empty conversation', { timeout: 15000 }, async () => {
+    render(<AssistantChatPage />);
+    expect(screen.getByRole('main')).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 1, name: 'Assistant' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'How can I help?' })).toBeInTheDocument();
+    expect(screen.getByRole('textbox', { name: 'Message' })).toBeInTheDocument();
+    await expectNoAxeViolations();
+  });
+
+  describe('with fake timers', () => {
+    beforeEach(() => vi.useFakeTimers());
+    afterEach(() => vi.useRealTimers());
+
+    it('streams a reply with a tool call and sources after a suggestion', { timeout: 15000 }, () => {
+      const onSend = vi.fn();
+      render(<AssistantChatPage onSend={onSend} />);
+      fireEvent.click(screen.getByRole('button', { name: /Summarise this week/ }));
+      expect(onSend).toHaveBeenCalledWith('Summarise this week’s deployments');
+      expect(screen.getByRole('button', { name: /list_deployments/ })).toHaveTextContent('Running');
+      act(() => vi.advanceTimersByTime(total));
+      expect(screen.getByRole('button', { name: /list_deployments/ })).toHaveTextContent('Succeeded');
+      expect(screen.getByRole('table')).toBeInTheDocument();
+      expect(screen.getAllByRole('region', { name: 'Sources' }).length).toBeGreaterThan(0);
+    });
+
+    it('Stop ends the stream and unmounting clears pending timers', { timeout: 15000 }, () => {
+      const { unmount } = render(<AssistantChatPage />);
+      const box = screen.getByRole('textbox', { name: 'Message' });
+      fireEvent.change(box, { target: { value: 'How are deployments going?' } });
+      fireEvent.keyDown(box, { key: 'Enter' });
+      act(() => vi.advanceTimersByTime(assistantTool.durationMs + 90));
+      fireEvent.click(screen.getByRole('button', { name: 'Stop generating' }));
+      expect(screen.getByRole('button', { name: 'Send message' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /list_deployments/ })).toHaveTextContent('Succeeded');
+
+      fireEvent.change(box, { target: { value: 'And invoices?' } });
+      fireEvent.keyDown(box, { key: 'Enter' });
+      const pending = vi.getTimerCount();
+      unmount();
+      expect(vi.getTimerCount()).toBeLessThanOrEqual(pending - chunkReply(assistantReply).length);
+    });
+  });
+});

package/src/assistant-chat/Page.tsx

@@ -0,0 +1,273 @@
+import { PageHeader } from '@gntik-ai/blocks';
+import {
+  ChatAnnouncer,
+  ChatComposer,
+  ChatLayout,
+  ChatMessage,
+  CitationList,
+  Markdown,
+  SuggestionChips,
+  ToolCallCard,
+  type ChatFeedback,
+  type ChatRole,
+  type CitationSource,
+  type Suggestion,
+  type ToolCallStatus,
+} from '@gntik-ai/chat';
+import { SquarePen } from '@gntik-ai/icons';
+import { Page, TooltipProvider, type BreadcrumbItem } from '@gntik-ai/ui';
+import { useEffect, useRef, useState } from 'react';
+import { ConsoleShell, type ConsoleShellProps } from '../shared/ConsoleShell';
+import {
+  assistantBreadcrumbs,
+  assistantReply,
+  assistantSources,
+  assistantSuggestions,
+  assistantTool,
+  chunkReply,
+  type AssistantTool,
+} from './data';
+
+interface Turn {
+  id: number;
+  role: ChatRole;
+  text: string;
+  time: Date;
+  streaming?: boolean;
+  tool?: { status: ToolCallStatus; durationMs?: number };
+  sources?: boolean;
+  feedback?: ChatFeedback;
+}
+
+export interface AssistantChatProps {
+  title: string;
+  suggestions: Suggestion[];
+  /** Sources cited under the reply and listed in the details panel. */
+  sources: CitationSource[];
+  /** Mock tool call run before each reply. */
+  tool: AssistantTool;
+  /** Mock reply (markdown), streamed in chunks. */
+  reply: string;
+  /** Milliseconds between streamed chunks. */
+  tickMs: number;
+  /** Show the details panel. */
+  withPanel: boolean;
+  /** Called with each prompt the user sends. */
+  onSend: (text: string) => void;
+  onFeedback: (feedback: ChatFeedback) => void;
+  breadcrumbs: BreadcrumbItem[];
+  currentHref: string;
+  /** ConsoleShell props (app nav, user, workspaces, sidebar footer, topbar…). */
+  shell: Omit<ConsoleShellProps, 'children'>;
+}
+
+/** Assistant chat: ConsoleShell + Page + ChatLayout with a mock-streamed reply (timers cleared on Stop and unmount). */
+export default function AssistantChatPage(props: Partial<AssistantChatProps>) {
+  const {
+    title = 'Assistant',
+    suggestions = assistantSuggestions,
+    sources = assistantSources,
+    tool = assistantTool,
+    reply = assistantReply,
+    tickMs = 30,
+    withPanel = true,
+    onSend,
+    onFeedback,
+    breadcrumbs = assistantBreadcrumbs,
+    currentHref = '/assistant',
+    shell,
+  } = props;
+  const [turns, setTurns] = useState<Turn[]>([]);
+  const [streaming, setStreaming] = useState(false);
+  const nextId = useRef(1);
+  const [timers] = useState(() => new Set<ReturnType<typeof setTimeout>>());
+
+  const clearTimers = () => {
+    timers.forEach((t) => clearTimeout(t));
+    timers.clear();
+  };
+  useEffect(
+    () => () => {
+      timers.forEach((t) => clearTimeout(t));
+      timers.clear();
+    },
+    [timers],
+  );
+  const later = (fn: () => void, ms: number) => {
+    const t = setTimeout(() => {
+      timers.delete(t);
+      fn();
+    }, ms);
+    timers.add(t);
+  };
+
+  const patch = (id: number, fn: (t: Turn) => Turn) => setTurns((ts) => ts.map((t) => (t.id === id ? fn(t) : t)));
+
+  const respond = () => {
+    clearTimers();
+    const toolId = nextId.current++;
+    const replyId = nextId.current++;
+    const now = new Date();
+    setStreaming(true);
+    setTurns((ts) => [
+      ...ts,
+      { id: toolId, role: 'tool', text: '', time: now, tool: { status: 'running' } },
+      { id: replyId, role: 'assistant', text: '', time: now, streaming: true },
+    ]);
+    const pieces = chunkReply(reply);
+    const startAt = tool.durationMs;
+    later(() => patch(toolId, (t) => ({ ...t, tool: { status: 'succeeded', durationMs: tool.durationMs } })), startAt);
+    pieces.forEach((piece, i) =>
+      later(() => patch(replyId, (t) => ({ ...t, text: t.text + piece })), startAt + (i + 1) * tickMs),
+    );
+    later(
+      () => {
+        patch(replyId, (t) => ({ ...t, streaming: false, sources: true }));
+        setStreaming(false);
+      },
+      startAt + (pieces.length + 1) * tickMs,
+    );
+  };
+
+  const send = (text: string) => {
+    setTurns((ts) => [...ts, { id: nextId.current++, role: 'user', text, time: new Date() }]);
+    onSend?.(text);
+    respond();
+  };
+
+  const stop = () => {
+    clearTimers();
+    setTurns((ts) =>
+      ts.map((t) =>
+        t.streaming
+          ? { ...t, streaming: false }
+          : t.tool?.status === 'running'
+            ? { ...t, tool: { status: 'failed', durationMs: 0 } }
+            : t,
+      ),
+    );
+    setStreaming(false);
+  };
+
+  const retry = (id: number) => {
+    setTurns((ts) => {
+      const at = ts.findIndex((t) => t.id === id);
+      // Drop the reply and the tool call that preceded it.
+      const cut = at > 0 && ts[at - 1]?.role === 'tool' ? at - 1 : at;
+      return ts.slice(0, cut);
+    });
+    respond();
+  };
+
+  const newConversation = () => {
+    clearTimers();
+    setTurns([]);
+    setStreaming(false);
+  };
+
+  const lastReply = [...turns].reverse().find((t) => t.role === 'assistant' && !t.streaming)?.text;
+
+  return (
+    <ConsoleShell breadcrumbs={breadcrumbs} currentHref={currentHref} {...shell}>
+      <Page
+        width="full"
+        header={
+          <PageHeader
+            breadcrumbs={null}
+            title={title}
+            description="Ask about projects, deployments, invoices and members. Answers cite their sources."
+            status=""
+            meta={[]}
+            tabs={null}
+            actions={[
+              {
+                label: 'New conversation',
+                icon: SquarePen,
+                variant: 'secondary',
+                disabled: turns.length === 0,
+                onClick: newConversation,
+              },
+            ]}
+          />
+        }
+      >
+        <TooltipProvider>
+          <div className="h-[680px] min-h-0 overflow-hidden rounded-xl border border-border">
+            <ChatLayout
+              header={
+                <h2 className="px-4 py-3 text-[13px] font-semibold text-foreground">
+                  {turns.length === 0 ? 'New conversation' : 'Conversation'}
+                </h2>
+              }
+              panel={
+                withPanel ? (
+                  <div className="flex flex-col gap-4 p-4 text-[13px]">
+                    <div>
+                      <h2 className="font-semibold text-foreground">Details</h2>
+                      <p className="mt-1 text-muted-foreground">
+                        Read access to projects, deployments, invoices and members in this workspace.
+                      </p>
+                    </div>
+                    <CitationList sources={sources} heading="Context sources" />
+                  </div>
+                ) : undefined
+              }
+              composer={<ChatComposer onSubmit={send} streaming={streaming} onStop={stop} maxLength={4000} />}
+            >
+              {turns.length === 0 && (
+                <div className="flex flex-col gap-5 pt-10">
+                  <h3 className="text-center text-[20px] font-semibold tracking-tight text-foreground">
+                    How can I help?
+                  </h3>
+                  <SuggestionChips suggestions={suggestions} onSelect={send} />
+                </div>
+              )}
+              {turns.map((t) => {
+                if (t.role === 'tool' && t.tool) {
+                  return (
+                    <ChatMessage key={t.id} role="tool" author="Tool" timestamp={t.time}>
+                      <ToolCallCard
+                        name={tool.name}
+                        status={t.tool.status}
+                        durationMs={t.tool.durationMs}
+                        args={tool.args}
+                        result={t.tool.status === 'succeeded' ? tool.result : undefined}
+                        error={t.tool.status === 'failed' ? 'Stopped by the user.' : undefined}
+                      />
+                    </ChatMessage>
+                  );
+                }
+                if (t.role === 'assistant') {
+                  return (
+                    <ChatMessage
+                      key={t.id}
+                      role="assistant"
+                      timestamp={t.time}
+                      streaming={t.streaming}
+                      copyText={t.text}
+                      onRetry={streaming ? undefined : () => retry(t.id)}
+                      feedback={t.feedback ?? null}
+                      onFeedback={(f) => {
+                        patch(t.id, (x) => ({ ...x, feedback: f }));
+                        onFeedback?.(f);
+                      }}
+                    >
+                      {t.text && <Markdown streaming={t.streaming}>{t.text}</Markdown>}
+                      {t.sources && <CitationList sources={sources} className="mt-3" />}
+                    </ChatMessage>
+                  );
+                }
+                return (
+                  <ChatMessage key={t.id} role={t.role} timestamp={t.time}>
+                    {t.text}
+                  </ChatMessage>
+                );
+              })}
+              <ChatAnnouncer streaming={streaming} lastReply={lastReply} />
+            </ChatLayout>
+          </div>
+        </TooltipProvider>
+      </Page>
+    </ConsoleShell>
+  );
+}