@gntik-ai/blocks 0.0.0-stage → 0.6.0

package/src/ai/ModelKeysList/ModelKeysList.test.tsx

@@ -0,0 +1,44 @@
+import { act, render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { ModelKeysList } from './ModelKeysList';
+
+const row = (name: string) => screen.getByText(name).closest('li') as HTMLElement;
+
+describe('ModelKeysList', () => {
+  it('lists keys masked, with provider and status', async () => {
+    render(<ModelKeysList onAdd={() => {}} />);
+    expect(screen.getByRole('region', { name: 'Model provider keys' })).toBeInTheDocument();
+    expect(within(row('Production')).getByText('pa-…4f2a')).toBeInTheDocument();
+    expect(within(row('Gateway')).getByText('Untested')).toBeInTheDocument();
+    expect(within(row('On-prem cluster')).getByText('Failing')).toBeInTheDocument();
+    expect(screen.getByText(/openai-compatible/)).toBeInTheDocument();
+    await expectNoAxeViolations();
+  });
+
+  it('tests a connection with a spinner, then shows the result', async () => {
+    const user = userEvent.setup();
+    let resolve: (ok: boolean) => void = () => {};
+    const onTest = vi.fn(() => new Promise<boolean>((r) => (resolve = r)));
+    render(<ModelKeysList onTest={onTest} />);
+    await user.click(screen.getByRole('button', { name: 'Test Gateway' }));
+    const busy = screen.getByRole('button', { name: 'Testing Gateway' });
+    expect(busy).toHaveAttribute('aria-busy', 'true');
+    expect(busy.querySelector('svg.animate-spin')).not.toBeNull();
+    await act(async () => resolve(true));
+    expect(within(row('Gateway')).getByText('Connected')).toBeInTheDocument();
+    expect(screen.getByText('Gateway: connection OK')).toBeInTheDocument();
+  });
+
+  it('revokes a key after confirming in an alert dialog', async () => {
+    const user = userEvent.setup();
+    const onRevoke = vi.fn();
+    render(<ModelKeysList onRevoke={onRevoke} />);
+    await user.click(screen.getByRole('button', { name: 'Revoke Production' }));
+    const dialog = await screen.findByRole('alertdialog', { name: 'Revoke “Production”?' });
+    await user.click(within(dialog).getByRole('button', { name: 'Revoke key' }));
+    expect(onRevoke).toHaveBeenCalledWith(expect.objectContaining({ id: 'k1' }));
+    expect(within(row('Production')).getByText('Revoked')).toBeInTheDocument();
+    expect(within(row('Production')).queryByRole('button')).not.toBeInTheDocument();
+  });
+});

package/src/ai/ModelKeysList/ModelKeysList.tsx

@@ -0,0 +1,203 @@
+import { useEffect, useId, useRef, useState } from 'react';
+import { KeyRound, Plus, PlugZap, Trash2 } from '@gntik-ai/icons';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  Button,
+  Card,
+  CardAction,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  EmptyState,
+  Spinner,
+  StatusTag,
+  cn,
+  type StatusDefinition,
+} from '@gntik-ai/ui';
+import { modelKeys, type ModelKey, type ModelKeyStatus } from './fixtures';
+
+export type { ModelKey, ModelKeyStatus } from './fixtures';
+
+export const MODEL_KEY_STATUSES: Record<ModelKeyStatus, StatusDefinition> = {
+  connected: { label: 'Connected', tone: 'success' },
+  failing: { label: 'Failing', tone: 'destructive' },
+  untested: { label: 'Untested', tone: 'neutral' },
+  revoked: { label: 'Revoked', tone: 'neutral' },
+};
+
+export interface ModelKeysListProps {
+  keys?: ModelKey[];
+  title?: string;
+  /** Tests a key; resolve true when the provider answered. Defaults to a simulated check. */
+  onTest?: (key: ModelKey) => Promise<boolean> | boolean;
+  /** Called after the revoke is confirmed. */
+  onRevoke?: (key: ModelKey) => void;
+  /** Shows an "Add key" button. */
+  onAdd?: () => void;
+  /** Heading level of the title, to fit the page outline (default h3). */
+  titleAs?: 'h2' | 'h3' | 'h4';
+  className?: string;
+}
+
+const simulateTest = (key: ModelKey) =>
+  new Promise<boolean>((resolve) => setTimeout(() => resolve(key.status !== 'failing'), 900));
+
+/** Provider keys with masked secrets, connection tests and confirmed revocation. */
+export function ModelKeysList({
+  keys = modelKeys,
+  title = 'Model provider keys',
+  onTest = simulateTest,
+  onRevoke,
+  onAdd,
+  titleAs = 'h3',
+  className,
+}: ModelKeysListProps) {
+  const titleId = useId();
+  const [statuses, setStatuses] = useState<Record<string, ModelKeyStatus>>({});
+  const [testing, setTesting] = useState<Record<string, boolean>>({});
+  const [announcement, setAnnouncement] = useState('');
+  const mounted = useRef(true);
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+
+  const statusOf = (k: ModelKey) => statuses[k.id] ?? k.status;
+
+  const test = async (key: ModelKey) => {
+    setTesting((t) => ({ ...t, [key.id]: true }));
+    setAnnouncement(`Testing ${key.name}…`);
+    let ok = false;
+    try {
+      ok = await onTest(key);
+    } catch {
+      ok = false;
+    }
+    if (!mounted.current) return;
+    setTesting((t) => ({ ...t, [key.id]: false }));
+    setStatuses((s) => ({ ...s, [key.id]: ok ? 'connected' : 'failing' }));
+    setAnnouncement(ok ? `${key.name}: connection OK` : `${key.name}: connection failed`);
+  };
+
+  const revoke = (key: ModelKey) => {
+    setStatuses((s) => ({ ...s, [key.id]: 'revoked' }));
+    setAnnouncement(`${key.name} revoked`);
+    onRevoke?.(key);
+  };
+
+  return (
+    <Card className={cn('w-full', className)} aria-labelledby={titleId} role="region">
+      <CardHeader divided>
+        <div>
+          <CardTitle as={titleAs} id={titleId}>
+            {title}
+          </CardTitle>
+          <CardDescription>Keys are stored encrypted and only shown masked.</CardDescription>
+        </div>
+        {onAdd && (
+          <CardAction>
+            <Button size="sm" icon={Plus} onClick={onAdd}>
+              Add key
+            </Button>
+          </CardAction>
+        )}
+      </CardHeader>
+      {keys.length === 0 ? (
+        <EmptyState
+          icon={KeyRound}
+          title="No provider keys"
+          description="Add a key to let assistants call a model provider."
+        />
+      ) : (
+        <ul aria-labelledby={titleId} className="divide-y divide-border">
+          {keys.map((key) => {
+            const status = statusOf(key);
+            const revoked = status === 'revoked';
+            const busy = testing[key.id] ?? false;
+            return (
+              <li
+                key={key.id}
+                className={cn('flex flex-col gap-3 px-4 py-3 sm:flex-row sm:items-center', revoked && 'opacity-60')}
+              >
+                <div className="flex min-w-0 flex-1 items-center gap-3">
+                  <span className="grid size-9 shrink-0 place-items-center rounded-lg bg-secondary text-muted-foreground">
+                    <KeyRound size={16} aria-hidden />
+                  </span>
+                  <div className="min-w-0">
+                    <p className="flex flex-wrap items-center gap-2">
+                      <span className="text-[13px] font-medium text-foreground">{key.name}</span>
+                      <StatusTag size="sm" status={status} statuses={MODEL_KEY_STATUSES} />
+                    </p>
+                    <p className="truncate text-[12px] text-muted-foreground">
+                      {key.provider}
+                      {key.endpoint && <span className="font-mono"> · {key.endpoint}</span>}
+                    </p>
+                  </div>
+                </div>
+                <div className="flex items-center gap-3 sm:justify-end">
+                  <code className="rounded bg-secondary px-1.5 py-0.5 font-mono text-[11.5px] text-foreground">
+                    {key.maskedKey}
+                  </code>
+                  {key.lastUsed && (
+                    <span className="hidden text-[11.5px] text-muted-foreground md:inline">Used {key.lastUsed}</span>
+                  )}
+                  {!revoked && (
+                    <div className="ms-auto flex items-center gap-1.5 sm:ms-0">
+                      <Button
+                        variant="secondary"
+                        size="sm"
+                        aria-label={busy ? `Testing ${key.name}` : `Test ${key.name}`}
+                        aria-busy={busy || undefined}
+                        disabled={busy}
+                        focusableWhenDisabled
+                        onClick={() => void test(key)}
+                      >
+                        {busy ? <Spinner size={14} /> : <PlugZap size={14} aria-hidden />}
+                        {busy ? 'Testing…' : 'Test'}
+                      </Button>
+                      <AlertDialog>
+                        <AlertDialogTrigger
+                          render={<Button variant="ghost" size="sm" icon={Trash2} aria-label={`Revoke ${key.name}`} />}
+                        >
+                          Revoke
+                        </AlertDialogTrigger>
+                        <AlertDialogContent>
+                          <AlertDialogHeader tone="destructive">
+                            <AlertDialogTitle>Revoke “{key.name}”?</AlertDialogTitle>
+                            <AlertDialogDescription>
+                              Requests that use this {key.provider} key will fail immediately. You can add a new key at
+                              any time.
+                            </AlertDialogDescription>
+                          </AlertDialogHeader>
+                          <AlertDialogFooter>
+                            <AlertDialogCancel>Cancel</AlertDialogCancel>
+                            <AlertDialogAction icon={Trash2} onClick={() => revoke(key)}>
+                              Revoke key
+                            </AlertDialogAction>
+                          </AlertDialogFooter>
+                        </AlertDialogContent>
+                      </AlertDialog>
+                    </div>
+                  )}
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+      <p aria-live="polite" className="sr-only">
+        {announcement}
+      </p>
+    </Card>
+  );
+}

package/src/ai/ModelKeysList/block.meta.ts

@@ -0,0 +1,10 @@
+import type { BlockMeta } from '../../meta';
+
+export const meta: BlockMeta = {
+  name: 'Model keys list',
+  family: 'ai',
+  status: 'beta',
+  description:
+    'Model provider keys with masked secrets and status: test the connection (spinner while it runs, result announced) and revoke behind a confirmation dialog.',
+  uses: ['Card', 'StatusTag', 'Button', 'Spinner', 'AlertDialog', 'EmptyState'],
+};

package/src/ai/ModelKeysList/fixtures.ts

@@ -0,0 +1,44 @@
+export type ModelKeyStatus = 'connected' | 'failing' | 'untested' | 'revoked';
+
+export interface ModelKey {
+  id: string;
+  /** Display name, e.g. "Production". */
+  name: string;
+  /** Provider or protocol, e.g. "Provider A", "openai-compatible", "self-hosted". */
+  provider: string;
+  /** Base URL for compatible or self-hosted endpoints. */
+  endpoint?: string;
+  /** Masked secret, e.g. "sk-…4f2a". Never pass the full key to the UI. */
+  maskedKey: string;
+  status: ModelKeyStatus;
+  /** Relative last-use time, e.g. "3 min ago". */
+  lastUsed?: string;
+}
+
+export const modelKeys: ModelKey[] = [
+  {
+    id: 'k1',
+    name: 'Production',
+    provider: 'Provider A',
+    maskedKey: 'pa-…4f2a',
+    status: 'connected',
+    lastUsed: '3 min ago',
+  },
+  {
+    id: 'k2',
+    name: 'Gateway',
+    provider: 'openai-compatible',
+    endpoint: 'https://llm-gateway.internal/v1',
+    maskedKey: 'sk-…9c01',
+    status: 'untested',
+  },
+  {
+    id: 'k3',
+    name: 'On-prem cluster',
+    provider: 'self-hosted',
+    endpoint: 'http://10.0.4.12:8000/v1',
+    maskedKey: 'tok-…77de',
+    status: 'failing',
+    lastUsed: '2 days ago',
+  },
+];

package/src/ai/PromptEditor/PromptEditor.test.tsx

@@ -0,0 +1,97 @@
+import { act, fireEvent, render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import ControlledVariables from './examples/controlled-variables';
+import { PromptEditor, extractPromptVariables } from './PromptEditor';
+
+const chips = () =>
+  within(screen.getByRole('list', { name: 'Detected variables' }))
+    .getAllByRole('listitem')
+    .map((li) => li.textContent);
+
+describe('PromptEditor', () => {
+  it('renders prompts, detected variables and parameters', async () => {
+    render(<PromptEditor />);
+    expect((screen.getByRole('textbox', { name: 'System prompt' }) as HTMLTextAreaElement).value).toContain(
+      '{{company}}',
+    );
+    expect(chips()).toEqual(['company', 'language', 'ticket']);
+    expect(screen.getByText('1 variable has no value')).toBeInTheDocument();
+    expect(screen.getByRole('slider', { name: 'Temperature' })).toHaveValue('0.7');
+    expect(screen.getByRole('spinbutton', { name: 'Max tokens' })).toHaveValue(1024);
+    await expectNoAxeViolations();
+  });
+
+  it('detects new variables and runs with the resolved input', async () => {
+    const user = userEvent.setup();
+    let finish: () => void = () => {};
+    const onRun = vi.fn(() => new Promise<void>((r) => (finish = r)));
+    render(<PromptEditor onRun={onRun} />);
+    fireEvent.change(screen.getByRole('textbox', { name: /User prompt/ }), {
+      target: { value: 'Reply to {{customer}} about {{ticket}}' },
+    });
+    expect(chips()).toEqual(['company', 'language', 'customer', 'ticket']);
+    await user.type(screen.getByRole('textbox', { name: 'customer' }), 'Ada');
+    await user.type(screen.getByRole('textbox', { name: 'ticket' }), 'Login fails');
+    await user.click(screen.getByRole('button', { name: 'Run' }));
+    expect(onRun).toHaveBeenCalledWith({
+      system: expect.stringContaining('{{company}}'),
+      user: 'Reply to {{customer}} about {{ticket}}',
+      variables: { company: 'Northwind', language: 'English', customer: 'Ada', ticket: 'Login fails' },
+      temperature: 0.7,
+      maxTokens: 1024,
+    });
+    expect(screen.getByRole('button', { name: 'Running…' })).toHaveAttribute('aria-busy', 'true');
+    await act(async () => finish());
+    expect(screen.getByRole('button', { name: 'Run' })).toBeEnabled();
+  });
+
+  it('blocks Run on an empty user prompt or invalid max tokens', () => {
+    render(<PromptEditor defaultUser="" />);
+    expect(screen.getByRole('button', { name: 'Run' })).toBeDisabled();
+    expect(extractPromptVariables('{{ a }} {{b.c}} {{a}}')).toEqual(['a', 'b.c']);
+  });
+
+  it('supports controlled variables', async () => {
+    const user = userEvent.setup();
+    const onVariablesChange = vi.fn();
+    const onRun = vi.fn();
+    const { rerender } = render(
+      <PromptEditor
+        variables={{ company: 'Acme', language: 'French', ticket: 'T-1' }}
+        onVariablesChange={onVariablesChange}
+        onRun={onRun}
+      />,
+    );
+    const company = screen.getByRole('textbox', { name: 'company' });
+    expect(company).toHaveValue('Acme');
+    await user.type(company, 'x');
+    expect(onVariablesChange).toHaveBeenLastCalledWith({ company: 'Acmex', language: 'French', ticket: 'T-1' });
+    // Controlled: the parent has not updated the value.
+    expect(company).toHaveValue('Acme');
+    rerender(
+      <PromptEditor
+        variables={{ company: 'Globex', language: 'French', ticket: 'T-1' }}
+        onVariablesChange={onVariablesChange}
+        onRun={onRun}
+      />,
+    );
+    expect(company).toHaveValue('Globex');
+    await user.click(screen.getByRole('button', { name: 'Run' }));
+    expect(onRun).toHaveBeenCalledWith(
+      expect.objectContaining({ variables: { company: 'Globex', language: 'French', ticket: 'T-1' } }),
+    );
+  });
+
+  it('controlled example: the page fills a variable', async () => {
+    const user = userEvent.setup();
+    render(<ControlledVariables />);
+    expect(screen.getByText('1 variable has no value')).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: 'Fill from sample ticket' }));
+    expect(screen.getByRole('textbox', { name: 'ticket' })).toHaveValue('Cannot reset my password');
+    expect(screen.queryByText('1 variable has no value')).toBeNull();
+    await user.type(screen.getByRole('textbox', { name: 'company' }), ' Inc');
+    expect(screen.getByRole('textbox', { name: 'company' })).toHaveValue('Acme Inc');
+    await expectNoAxeViolations();
+  });
+});

package/src/ai/PromptEditor/PromptEditor.tsx

@@ -0,0 +1,202 @@
+import { useId, useState } from 'react';
+import { Braces, Play } from '@gntik-ai/icons';
+import { Button, Field, FieldDescription, FieldLabel, Input, Slider, Textarea, Token, cn } from '@gntik-ai/ui';
+import { promptDefaults } from './fixtures';
+
+export interface PromptRunInput {
+  system: string;
+  user: string;
+  /** Values for every variable found in the prompts (missing ones are empty strings). */
+  variables: Record<string, string>;
+  temperature: number;
+  maxTokens: number;
+}
+
+export interface PromptEditorProps {
+  title?: string;
+  defaultSystem?: string;
+  defaultUser?: string;
+  /** Initial variable values (uncontrolled). */
+  defaultVariables?: Record<string, string>;
+  /** Variable values (controlled). Pair with `onVariablesChange`. */
+  variables?: Readonly<Record<string, string>>;
+  /** Called with every variable value (all keys kept) when one changes. */
+  onVariablesChange?: (variables: Record<string, string>) => void;
+  defaultTemperature?: number;
+  defaultMaxTokens?: number;
+  /** Upper bound of the max-tokens input. */
+  maxTokensLimit?: number;
+  /** Called on Run; return a promise to show the running state until it settles. */
+  onRun?: (input: PromptRunInput) => void | Promise<unknown>;
+  /** Heading level of the title, to fit the page outline (default h3); inner headings use the next level. */
+  titleAs?: 'h2' | 'h3' | 'h4';
+  className?: string;
+}
+
+const VARIABLE = /\{\{\s*([A-Za-z_][\w.]*)\s*\}\}/g;
+
+/** Unique `{{variable}}` names, in order of appearance. */
+export function extractPromptVariables(...texts: string[]): string[] {
+  const seen = new Set<string>();
+  for (const text of texts) for (const m of text.matchAll(VARIABLE)) if (m[1]) seen.add(m[1]);
+  return [...seen];
+}
+
+const estimateTokens = (text: string) => Math.ceil(text.length / 4);
+
+/** Prompt playground: system + user prompts, detected variables, parameters and Run. */
+export function PromptEditor({
+  title = 'Prompt',
+  defaultSystem = promptDefaults.system,
+  defaultUser = promptDefaults.user,
+  defaultVariables = promptDefaults.variables,
+  variables: variablesProp,
+  onVariablesChange,
+  defaultTemperature = promptDefaults.temperature,
+  defaultMaxTokens = promptDefaults.maxTokens,
+  maxTokensLimit = 8192,
+  onRun,
+  titleAs: TitleTag = 'h3',
+  className,
+}: PromptEditorProps) {
+  const SubTag = TitleTag === 'h2' ? 'h3' : TitleTag === 'h3' ? 'h4' : 'h5';
+  const titleId = useId();
+  const [system, setSystem] = useState(defaultSystem);
+  const [user, setUser] = useState(defaultUser);
+  const [innerValues, setInnerValues] = useState<Record<string, string>>(defaultVariables);
+  const values: Readonly<Record<string, string>> = variablesProp ?? innerValues;
+  const setValue = (name: string, value: string) => {
+    const next = { ...values, [name]: value };
+    setInnerValues(next);
+    onVariablesChange?.(next);
+  };
+  const [temperature, setTemperature] = useState(defaultTemperature);
+  const [maxTokens, setMaxTokens] = useState(String(defaultMaxTokens));
+  const [running, setRunning] = useState(false);
+
+  const variables = extractPromptVariables(system, user);
+  const missing = variables.filter((v) => !values[v]?.trim());
+  const maxTokensNumber = Number(maxTokens);
+  const maxTokensInvalid =
+    !Number.isInteger(maxTokensNumber) || maxTokensNumber < 1 || maxTokensNumber > maxTokensLimit;
+  const canRun = user.trim().length > 0 && !maxTokensInvalid && !running;
+
+  const run = () => {
+    if (!canRun) return;
+    const result = onRun?.({
+      system,
+      user,
+      variables: Object.fromEntries(variables.map((v) => [v, values[v] ?? ''])),
+      temperature,
+      maxTokens: maxTokensNumber,
+    });
+    if (result && typeof (result as Promise<unknown>).then === 'function') {
+      setRunning(true);
+      void (result as Promise<unknown>).finally(() => setRunning(false));
+    }
+  };
+
+  return (
+    <section
+      aria-labelledby={titleId}
+      className={cn('overflow-hidden rounded-lg border border-border bg-card shadow-sm', className)}
+    >
+      <header className="flex items-center justify-between gap-3 border-b border-border bg-secondary/35 px-4 py-2.5">
+        <TitleTag id={titleId} className="text-[13.5px] font-semibold text-foreground">
+          {title}
+        </TitleTag>
+        <Button size="sm" icon={Play} loading={running} disabled={!canRun && !running} onClick={run}>
+          {running ? 'Running…' : 'Run'}
+        </Button>
+      </header>
+      <div className="grid md:grid-cols-[minmax(0,1fr)_272px]">
+        <div className="flex flex-col gap-4 p-4">
+          <Field>
+            <FieldLabel>System prompt</FieldLabel>
+            <Textarea rows={4} value={system} onValueChange={setSystem} className="font-mono text-[12.5px]" />
+            <FieldDescription>~{estimateTokens(system)} tokens</FieldDescription>
+          </Field>
+          <Field>
+            <FieldLabel required>User prompt</FieldLabel>
+            <Textarea
+              rows={6}
+              value={user}
+              onValueChange={setUser}
+              invalid={user.trim().length === 0}
+              className="font-mono text-[12.5px]"
+            />
+            <FieldDescription>
+              ~{estimateTokens(user)} tokens · use <code className="font-mono">{'{{name}}'}</code> for variables
+            </FieldDescription>
+          </Field>
+        </div>
+        <div className="flex flex-col gap-5 border-t border-border bg-secondary/20 p-4 md:border-t-0 md:border-s">
+          <div>
+            <SubTag className="text-[12px] font-semibold tracking-wide text-muted-foreground uppercase">
+              Variables
+            </SubTag>
+            {variables.length === 0 ? (
+              <p className="mt-2 text-[12.5px] text-muted-foreground">No variables in the prompts.</p>
+            ) : (
+              <>
+                <ul aria-label="Detected variables" className="mt-2 flex flex-wrap gap-1.5">
+                  {variables.map((v) => (
+                    <li key={v}>
+                      <Token
+                        size="sm"
+                        tone={values[v]?.trim() ? 'primary' : 'warning'}
+                        icon={<Braces size={12} aria-hidden />}
+                        label={v}
+                      />
+                    </li>
+                  ))}
+                </ul>
+                <div className="mt-3 flex flex-col gap-2.5">
+                  {variables.map((v) => (
+                    <Field key={v}>
+                      <FieldLabel className="font-mono text-[12px]">{v}</FieldLabel>
+                      <Input size="sm" value={values[v] ?? ''} onValueChange={(next) => setValue(v, String(next))} />
+                    </Field>
+                  ))}
+                </div>
+                {missing.length > 0 && (
+                  <p className="mt-2 text-[12px] text-warning-text">
+                    {missing.length} {missing.length === 1 ? 'variable has' : 'variables have'} no value
+                  </p>
+                )}
+              </>
+            )}
+          </div>
+          <div className="flex flex-col gap-4">
+            <SubTag className="text-[12px] font-semibold tracking-wide text-muted-foreground uppercase">
+              Parameters
+            </SubTag>
+            <Slider
+              label="Temperature"
+              showValue
+              min={0}
+              max={2}
+              step={0.1}
+              value={temperature}
+              onValueChange={(v) => setTemperature(Array.isArray(v) ? (v[0] ?? 0) : v)}
+            />
+            <Field invalid={maxTokensInvalid}>
+              <FieldLabel>Max tokens</FieldLabel>
+              <Input
+                size="sm"
+                type="number"
+                min={1}
+                max={maxTokensLimit}
+                step={1}
+                value={maxTokens}
+                onValueChange={(v) => setMaxTokens(String(v))}
+                invalid={maxTokensInvalid}
+              />
+              <FieldDescription>1 – {maxTokensLimit.toLocaleString('en-US')}</FieldDescription>
+            </Field>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/ai/PromptEditor/block.meta.ts

@@ -0,0 +1,10 @@
+import type { BlockMeta } from '../../meta';
+
+export const meta: BlockMeta = {
+  name: 'Prompt editor',
+  family: 'ai',
+  status: 'beta',
+  description:
+    'System and user prompt editors that detect {{variables}} as chips with value inputs, plus temperature and max-token parameters and a Run action. Variable values can be controlled (variables, onVariablesChange).',
+  uses: ['Textarea', 'Token', 'Field', 'Input', 'Slider', 'Button'],
+};

package/src/ai/PromptEditor/examples/controlled-variables.tsx

@@ -0,0 +1,23 @@
+import { useState } from 'react';
+import { PromptEditor } from '../PromptEditor';
+
+/** The page owns the variable values, e.g. to fill them from a selected dataset row. */
+export default function ControlledVariablesPromptEditor() {
+  const [variables, setVariables] = useState<Record<string, string>>({
+    company: 'Acme',
+    language: 'English',
+    ticket: '',
+  });
+  return (
+    <div className="flex flex-col gap-2">
+      <button
+        type="button"
+        onClick={() => setVariables((prev) => ({ ...prev, ticket: 'Cannot reset my password' }))}
+        className="self-start text-[12.5px] text-primary-text underline underline-offset-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring"
+      >
+        Fill from sample ticket
+      </button>
+      <PromptEditor variables={variables} onVariablesChange={setVariables} />
+    </div>
+  );
+}

package/src/ai/PromptEditor/fixtures.ts

@@ -0,0 +1,12 @@
+export const promptDefaults = {
+  system:
+    'You are a concise assistant for {{company}}. Answer in {{language}} and cite the source document when you use one.',
+  user: 'Summarise the ticket below in three bullet points and suggest a next step.\n\n{{ticket}}',
+  variables: {
+    company: 'Northwind',
+    language: 'English',
+    ticket: '',
+  } as Record<string, string>,
+  temperature: 0.7,
+  maxTokens: 1024,
+};