@gntik-ai/templates 0.0.0-stage → 0.5.0

package/src/model-providers/Page.tsx

@@ -0,0 +1,198 @@
+import { ModelKeysList, type ModelKey } from '@gntik-ai/blocks';
+import { Plus } from '@gntik-ai/icons';
+import {
+  Button,
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Field,
+  FieldDescription,
+  FieldLabel,
+  Input,
+  Meter,
+  PasswordInput,
+  Section,
+  SimpleSelect,
+  Stack,
+} from '@gntik-ai/ui';
+import { useState, type FormEvent } from 'react';
+import { SettingsFrame, type SettingsFrameOptions } from '../settings-profile/SettingsFrame';
+import {
+  maskSecret,
+  modelProvidersNavItem,
+  providerKeys,
+  providerOptions,
+  providerUsageLimits,
+  type NewModelKeyInput,
+  type ProviderUsageLimit,
+} from './data';
+
+export interface ModelProvidersProps extends SettingsFrameOptions {
+  keys: ModelKey[];
+  limits: ProviderUsageLimit[];
+  providers: Array<{ value: string; label: string }>;
+  /** Tests a key (the "Test" button); resolve true when the provider answered. */
+  onTest: (key: ModelKey) => Promise<boolean> | boolean;
+  onRevoke: (key: ModelKey) => void;
+  /** Stores a new key and returns it masked. Defaults to a local, untested entry. */
+  onAddKey: (input: NewModelKeyInput) => ModelKey | Promise<ModelKey>;
+}
+
+const EMPTY: NewModelKeyInput = { name: '', provider: '', endpoint: '', secret: '' };
+
+/**
+ * Model provider settings: SettingsFrame (shared settings nav + a "Model providers" item) with
+ * the ModelKeysList (masked keys, test connection, revoke), an add-key dialog and the usage
+ * limits as Meters.
+ */
+export default function ModelProvidersPage({
+  keys: initialKeys = providerKeys,
+  limits = providerUsageLimits,
+  providers = providerOptions,
+  onTest,
+  onRevoke,
+  onAddKey,
+  extraNavItems = [],
+  ...frame
+}: Partial<ModelProvidersProps>) {
+  const [keys, setKeys] = useState(initialKeys);
+  const [open, setOpen] = useState(false);
+  const [draft, setDraft] = useState(EMPTY);
+  const [submitted, setSubmitted] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const needsEndpoint = draft.provider === 'openai-compatible' || draft.provider === 'self-hosted';
+  const invalid = {
+    name: !draft.name.trim(),
+    provider: !draft.provider,
+    endpoint: needsEndpoint && !/^https?:\/\/\S+$/.test(draft.endpoint.trim()),
+    secret: draft.secret.trim().length < 8,
+  };
+  const set = (key: keyof NewModelKeyInput) => (value: string | null) =>
+    setDraft((d) => ({ ...d, [key]: value ?? '' }));
+
+  const openDialog = () => {
+    setDraft(EMPTY);
+    setSubmitted(false);
+    setOpen(true);
+  };
+
+  const submit = async (event: FormEvent) => {
+    event.preventDefault();
+    setSubmitted(true);
+    if (Object.values(invalid).some(Boolean)) return;
+    setSaving(true);
+    try {
+      const input = { ...draft, endpoint: needsEndpoint ? draft.endpoint.trim() : '' };
+      const created = onAddKey
+        ? await onAddKey(input)
+        : {
+            id: `key-${keys.length + 1}`,
+            name: input.name.trim(),
+            provider: input.provider,
+            endpoint: input.endpoint || undefined,
+            maskedKey: maskSecret(input.secret),
+            status: 'untested' as const,
+          };
+      setKeys((list) => [...list, created]);
+      setOpen(false);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <SettingsFrame
+      page="model-providers"
+      extraNavItems={[modelProvidersNavItem, ...extraNavItems.filter((i) => i.id !== modelProvidersNavItem.id)]}
+      description="Connect the model providers your assistants call. Keys are encrypted at rest and only shown masked."
+      actions={[{ label: 'Add provider key', icon: Plus, variant: 'primary', onClick: openDialog }]}
+      {...frame}
+    >
+      <Stack gap={6}>
+        <ModelKeysList titleAs="h2" title="Provider keys" keys={keys} onTest={onTest} onRevoke={onRevoke} />
+        <Section
+          variant="card"
+          headingLevel="h2"
+          title="Usage limits"
+          description="Workspace-wide caps across every provider key."
+        >
+          <Stack gap={5}>
+            {limits.map((l) => (
+              <Meter
+                key={l.id}
+                label={l.label}
+                value={l.value}
+                max={l.max}
+                valueLabel={l.valueLabel}
+                aria-valuetext={l.valueLabel}
+                note={l.note}
+              />
+            ))}
+          </Stack>
+        </Section>
+      </Stack>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent>
+          <form onSubmit={(e) => void submit(e)} noValidate>
+            <DialogHeader>
+              <DialogTitle>Add provider key</DialogTitle>
+              <DialogDescription>The key is stored encrypted; you will not be able to see it again.</DialogDescription>
+            </DialogHeader>
+            <DialogBody>
+              <Stack gap={4}>
+                <Field invalid={submitted && invalid.name}>
+                  <FieldLabel required>Name</FieldLabel>
+                  <Input value={draft.name} onValueChange={set('name')} placeholder="Production" />
+                </Field>
+                <SimpleSelect
+                  label="Provider"
+                  items={providers}
+                  value={draft.provider || null}
+                  onValueChange={set('provider')}
+                  placeholder="Choose a provider…"
+                />
+                {needsEndpoint && (
+                  <Field invalid={submitted && invalid.endpoint}>
+                    <FieldLabel required>Endpoint URL</FieldLabel>
+                    <Input
+                      type="url"
+                      value={draft.endpoint}
+                      onValueChange={set('endpoint')}
+                      placeholder="https://llm-gateway.internal/v1"
+                      className="font-mono"
+                    />
+                  </Field>
+                )}
+                <Field invalid={submitted && invalid.secret}>
+                  <FieldLabel required>API key</FieldLabel>
+                  <PasswordInput
+                    value={draft.secret}
+                    onValueChange={set('secret')}
+                    autoComplete="off"
+                    className="font-mono"
+                  />
+                  <FieldDescription>At least 8 characters. Test the connection after adding it.</FieldDescription>
+                </Field>
+                {submitted && invalid.provider && (
+                  <p className="text-[12.5px] text-destructive-text">Choose a provider.</p>
+                )}
+              </Stack>
+            </DialogBody>
+            <DialogFooter>
+              <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                Cancel
+              </Button>
+              <Button type="submit" loading={saving}>
+                Add key
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+    </SettingsFrame>
+  );
+}

package/src/model-providers/data.ts

@@ -0,0 +1,101 @@
+import type { ModelKey } from '@gntik-ai/blocks';
+import { Cpu } from '@gntik-ai/icons';
+import type { SettingsNavExtraItem } from '../settings-profile/settings-nav';
+
+/** Nav entry this page adds to the shared settings nav (id `model-providers`). */
+export const modelProvidersNavItem: SettingsNavExtraItem = {
+  id: 'model-providers',
+  label: 'Model providers',
+  icon: Cpu,
+  group: 'Workspace',
+};
+
+/** A usage limit shown as a Meter (monthly tokens, spend, rate). */
+export interface ProviderUsageLimit {
+  id: string;
+  label: string;
+  value: number;
+  max: number;
+  /** Visible value text, e.g. "31.2M / 50M tokens". */
+  valueLabel: string;
+  /** Helper line under the bar. */
+  note?: string;
+}
+
+/** What the add-key dialog collects; the secret never comes back to the UI. */
+export interface NewModelKeyInput {
+  name: string;
+  provider: string;
+  endpoint: string;
+  secret: string;
+}
+
+export const providerOptions = [
+  { value: 'Provider A', label: 'Provider A' },
+  { value: 'Provider B', label: 'Provider B' },
+  { value: 'openai-compatible', label: 'OpenAI-compatible endpoint' },
+  { value: 'self-hosted', label: 'Self-hosted' },
+];
+
+export const providerKeys: ModelKey[] = [
+  {
+    id: 'k1',
+    name: 'Production',
+    provider: 'Provider A',
+    maskedKey: 'pa-…4f2a',
+    status: 'connected',
+    lastUsed: '3 min ago',
+  },
+  {
+    id: 'k2',
+    name: 'Evaluations',
+    provider: 'Provider B',
+    maskedKey: 'pb-…a913',
+    status: 'connected',
+    lastUsed: '1 h ago',
+  },
+  {
+    id: 'k3',
+    name: 'Gateway',
+    provider: 'openai-compatible',
+    endpoint: 'https://llm-gateway.internal/v1',
+    maskedKey: 'sk-…9c01',
+    status: 'untested',
+  },
+  {
+    id: 'k4',
+    name: 'On-prem cluster',
+    provider: 'self-hosted',
+    endpoint: 'http://10.0.4.12:8000/v1',
+    maskedKey: 'tok-…77de',
+    status: 'failing',
+    lastUsed: '2 days ago',
+  },
+];
+
+export const providerUsageLimits: ProviderUsageLimit[] = [
+  {
+    id: 'tokens',
+    label: 'Tokens this month',
+    value: 31_200_000,
+    max: 50_000_000,
+    valueLabel: '31.2M / 50M',
+    note: 'Resets on the 1st of each month.',
+  },
+  {
+    id: 'spend',
+    label: 'Spend this month',
+    value: 412,
+    max: 500,
+    valueLabel: '$412 / $500',
+    note: 'Requests are blocked when the cap is reached.',
+  },
+  { id: 'rate', label: 'Peak requests per minute', value: 540, max: 600, valueLabel: '540 / 600 rpm' },
+];
+
+/** Masks a secret for display: provider prefix + last four characters. */
+export function maskSecret(secret: string) {
+  const trimmed = secret.trim();
+  const prefix = trimmed.match(/^[a-z]+-/i)?.[0] ?? '';
+  return `${prefix}…${trimmed.slice(-4)}`;
+}

package/src/model-providers/template.meta.ts

@@ -0,0 +1,12 @@
+import type { TemplateMeta } from '../meta';
+
+export const meta: TemplateMeta = {
+  name: 'Model providers settings',
+  family: 'AI',
+  priority: 'P3',
+  status: 'experimental',
+  description:
+    'Settings page (shared settings nav plus a "Model providers" item) with the ModelKeysList — masked keys, test connection, confirmed revoke — an add-key dialog (provider, endpoint for compatible / self-hosted, secret) and workspace usage limits as Meters.',
+  layout: 'SettingsLayout',
+  blocks: ['app-sidebar', 'app-topbar', 'page-header', 'model-keys-list'],
+};

package/src/notification-inbox/Page.test.tsx

@@ -0,0 +1,49 @@
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../test/a11y';
+import { LinkProvider } from '@gntik-ai/ui';
+import type { ComponentPropsWithRef } from 'react';
+import NotificationInboxPage from './Page';
+
+describe('NotificationInboxPage', () => {
+  it('renders the console, the inbox list and the empty detail', { timeout: 15000 }, async () => {
+    render(<NotificationInboxPage />);
+    expect(screen.getByRole('main')).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 1, name: 'Notifications' })).toBeInTheDocument();
+    const list = screen.getByRole('list', { name: 'Notifications' });
+    expect(within(list).getAllByRole('button')).toHaveLength(6);
+    expect(screen.getByRole('heading', { name: 'Select a notification' })).toBeInTheDocument();
+    await expectNoAxeViolations();
+  });
+
+  it('opens a notification, marks it read and filters by unread', { timeout: 15000 }, async () => {
+    const onReadChange = vi.fn();
+    render(<NotificationInboxPage onReadChange={onReadChange} />);
+    const list = screen.getByRole('list', { name: 'Notifications' });
+    await userEvent.click(within(list).getByRole('button', { name: /Budget alert/ }));
+    expect(screen.getByRole('heading', { level: 2, name: 'Budget alert: api-gateway at 97%' })).toBeInTheDocument();
+    expect(onReadChange).toHaveBeenCalledWith('ntf_01', true);
+
+    await userEvent.click(screen.getByRole('button', { name: /^Unread/ }));
+    const unread = screen.getByRole('list', { name: 'Notifications' });
+    expect(within(unread).getAllByRole('button')).toHaveLength(2);
+
+    await userEvent.click(screen.getAllByRole('button', { name: 'Mark all as read' })[0]!);
+    expect(screen.getByRole('heading', { name: 'You’re all caught up' })).toBeInTheDocument();
+  });
+
+  it('Open goes through the LinkProvider router link', { timeout: 15000 }, async () => {
+    const RouterLink = ({ href, ...props }: ComponentPropsWithRef<'a'>) => <a data-router="" href={href} {...props} />;
+    render(
+      <LinkProvider component={RouterLink}>
+        <NotificationInboxPage defaultSelectedId="ntf_01" />
+      </LinkProvider>,
+    );
+    const list = screen.getByRole('list', { name: 'Notifications' });
+    await userEvent.click(within(list).getByRole('button', { name: /Budget alert/ }));
+    const open = screen.getByRole('button', { name: 'Open' });
+    expect(open.tagName).toBe('A');
+    expect(open).toHaveAttribute('data-router');
+    expect(open.getAttribute('href')).toBeTruthy();
+  });
+});

package/src/notification-inbox/Page.tsx

@@ -0,0 +1,237 @@
+import { PageHeader } from '@gntik-ai/blocks';
+import { Archive, BellOff, CheckCheck, ExternalLink, MailOpen } from '@gntik-ai/icons';
+import {
+  Badge,
+  Button,
+  EmptyState,
+  Link,
+  Page,
+  SplitLayout,
+  StatusDot,
+  Timestamp,
+  Toggle,
+  ToggleGroup,
+  cn,
+  type BreadcrumbItem,
+  useI18n,
+} from '@gntik-ai/ui';
+import { useId, useState } from 'react';
+import { ConsoleShell, type ConsoleShellProps } from '../shared/ConsoleShell';
+import { inboxBreadcrumbs, inboxCategoryLabels, inboxNotifications, type InboxNotification } from './data';
+
+export type InboxFilter = 'all' | 'unread' | 'mention';
+
+export interface NotificationInboxProps {
+  /** Initial notifications, newest first. The page keeps read/archived state locally. */
+  notifications: InboxNotification[];
+  defaultFilter: InboxFilter;
+  /** Initially selected notification (defaults to the first one). */
+  defaultSelectedId: string | null;
+  onReadChange: (id: string, read: boolean) => void;
+  onArchive: (id: string) => void;
+  onMarkAllRead: () => void;
+  breadcrumbs: BreadcrumbItem[];
+  currentHref: string;
+  /** ConsoleShell props (app nav, user, workspaces, sidebar footer, topbar…). */
+  shell: Omit<ConsoleShellProps, 'children'>;
+}
+
+const FILTERS: Array<{ value: InboxFilter; label: string }> = [
+  { value: 'all', label: 'All' },
+  { value: 'unread', label: 'Unread' },
+  { value: 'mention', label: 'Mentions' },
+];
+
+const matches = (n: InboxNotification, filter: InboxFilter) =>
+  filter === 'all' ? true : filter === 'unread' ? !n.read : n.category === filter;
+
+/** Notification inbox: ConsoleShell + Page + SplitLayout (filtered list → detail, Back below lg). */
+export default function NotificationInboxPage(props: Partial<NotificationInboxProps>) {
+  const { t } = useI18n();
+  const {
+    notifications: initial = inboxNotifications,
+    defaultFilter = 'all',
+    defaultSelectedId,
+    onReadChange,
+    onArchive,
+    onMarkAllRead,
+    breadcrumbs = inboxBreadcrumbs,
+    currentHref = '/notifications',
+    shell,
+  } = props;
+  const [items, setItems] = useState(initial);
+  const [filter, setFilter] = useState<InboxFilter>(defaultFilter);
+  const [selectedId, setSelectedId] = useState<string | null>(defaultSelectedId ?? null);
+  const [showDetail, setShowDetail] = useState(false);
+  const titleId = useId();
+
+  const visible = items.filter((n) => matches(n, filter));
+  const selected = items.find((n) => n.id === selectedId) ?? null;
+  const unread = items.filter((n) => !n.read).length;
+
+  const setRead = (id: string, read: boolean) => {
+    setItems((list) => list.map((n) => (n.id === id ? { ...n, read } : n)));
+    onReadChange?.(id, read);
+  };
+  const open = (n: InboxNotification) => {
+    setSelectedId(n.id);
+    setShowDetail(true);
+    if (!n.read) setRead(n.id, true);
+  };
+  const archive = (id: string) => {
+    setItems((list) => list.filter((n) => n.id !== id));
+    setSelectedId(null);
+    setShowDetail(false);
+    onArchive?.(id);
+  };
+  const markAllRead = () => {
+    setItems((list) => list.map((n) => ({ ...n, read: true })));
+    onMarkAllRead?.();
+  };
+
+  const list =
+    visible.length === 0 ? (
+      <EmptyState
+        icon={BellOff}
+        size="sm"
+        className="mx-auto mt-8"
+        title={filter === 'unread' ? 'You’re all caught up' : 'Nothing here yet'}
+        description={filter === 'unread' ? t('notifications.empty') : 'Try another filter.'}
+      />
+    ) : (
+      <ul aria-label={t('common.notifications')} className="flex flex-col gap-0.5 p-2">
+        {visible.map((n) => (
+          <li key={n.id}>
+            <button
+              type="button"
+              aria-current={n.id === selectedId ? 'true' : undefined}
+              onClick={() => open(n)}
+              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"
+            >
+              <span className="mt-1.5 flex w-2 shrink-0 justify-center">
+                {!n.read && <StatusDot tone={n.tone} aria-hidden />}
+              </span>
+              <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', !n.read && 'font-semibold')}
+                  >
+                    {n.title}
+                  </span>
+                  <Timestamp value={n.time} tooltip={false} className="shrink-0 font-mono text-[11px]" />
+                </span>
+                <span className="mt-0.5 block truncate text-[12px] text-muted-foreground">{n.preview}</span>
+                {!n.read && <span className="sr-only">Unread</span>}
+              </span>
+            </button>
+          </li>
+        ))}
+      </ul>
+    );
+
+  const detail = selected ? (
+    <article aria-labelledby={titleId} className="flex flex-col gap-5 p-5 sm:p-6">
+      <div className="flex flex-wrap items-center gap-2">
+        <Badge tone="neutral" variant="outline">
+          {inboxCategoryLabels[selected.category]}
+        </Badge>
+        <span className="text-[12.5px] text-muted-foreground">
+          From <span className="font-medium text-foreground">{selected.from}</span> ·{' '}
+          <Timestamp value={selected.time} format="absolute" className="font-mono text-[12px]" />
+        </span>
+      </div>
+      <h2 id={titleId} className="text-[18px] font-semibold tracking-tight text-foreground">
+        {selected.title}
+      </h2>
+      <div className="flex max-w-2xl flex-col gap-3 text-[13.5px] leading-6 text-foreground">
+        {selected.body.map((p) => (
+          <p key={p}>{p}</p>
+        ))}
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        {selected.href && (
+          <Button
+            trailingIcon={ExternalLink}
+            render={<Link href={selected.href} tone="inherit" underline="none" />}
+            nativeButton={false}
+          >
+            Open
+          </Button>
+        )}
+        <Button variant="secondary" icon={MailOpen} onClick={() => setRead(selected.id, false)}>
+          Mark as unread
+        </Button>
+        <Button variant="ghost" icon={Archive} onClick={() => archive(selected.id)}>
+          Archive
+        </Button>
+      </div>
+    </article>
+  ) : (
+    <EmptyState
+      icon={MailOpen}
+      size="sm"
+      titleAs="h2"
+      className="mx-auto mt-16"
+      title="Select a notification"
+      description="Its details show up here."
+    />
+  );
+
+  return (
+    <ConsoleShell breadcrumbs={breadcrumbs} currentHref={currentHref} {...shell}>
+      <Page
+        width="full"
+        header={
+          <PageHeader
+            breadcrumbs={null}
+            title="Notifications"
+            description="Mentions, deployments, billing and access requests across your workspace."
+            status=""
+            meta={[]}
+            tabs={null}
+            actions={[
+              {
+                label: 'Mark all as read',
+                icon: CheckCheck,
+                variant: 'secondary',
+                disabled: unread === 0,
+                onClick: markAllRead,
+              },
+            ]}
+          />
+        }
+      >
+        <div className="h-[640px] min-h-0 overflow-hidden rounded-xl border border-border">
+          <SplitLayout
+            listLabel="Inbox"
+            detailLabel="Notification"
+            showDetail={showDetail}
+            onShowDetailChange={setShowDetail}
+            listHeader={
+              <ToggleGroup
+                aria-label="Filter notifications"
+                size="sm"
+                value={[filter]}
+                onValueChange={(v) => {
+                  const next = v[0];
+                  if (next === 'all' || next === 'unread' || next === 'mention') setFilter(next);
+                }}
+              >
+                {FILTERS.map((f) => (
+                  <Toggle key={f.value} value={f.value}>
+                    {f.label}
+                    {f.value === 'unread' && unread > 0 && (
+                      <span className="font-mono text-[10.5px] text-muted-foreground">{unread}</span>
+                    )}
+                  </Toggle>
+                ))}
+              </ToggleGroup>
+            }
+            list={list}
+            detail={detail}
+          />
+        </div>
+      </Page>
+    </ConsoleShell>
+  );
+}