create-kai 0.1.0

package/dist/templates/react/src/index.css

@@ -0,0 +1,111 @@
+html,
+body,
+#root {
+  height: 100%;
+  margin: 0;
+}
+
+body {
+  font-family: system-ui, -apple-system, sans-serif;
+}
+
+/* Full-height workspace shell. Colors come from the kit's --color-* tokens, which
+   flip to dark under the `.dark` class we toggle on `.app`. <kai-resizable> fills
+   this box (its `:host` is `height:100%`) and owns the sidebar | main split, the
+   panel widths, and the draggable divider. */
+.app {
+  height: 100dvh;
+  background: var(--color-background);
+  color: var(--color-foreground);
+}
+
+/* The sidebar is its own surface: `--color-muted` sits a step off `--color-background`
+   in both themes (near-white grey in light, a shade lighter than the base in dark). That
+   #f4f4f5-on-white step is subtle, so a 1px right border marks the at-rest sidebar | main
+   division: <kai-resizable>'s `line` handle is transparent at rest and only tints on
+   hover/drag, so the boundary has to come from the panel itself. The border uses
+   `var(--color-border)`, which now tracks the shell's light/dark tokens because the parent
+   <ResizableItem theme={theme}> forwards the theme (a light hairline in light mode, dark in
+   dark). `box-sizing: border-box` keeps the 1px inside the 280px item so it doesn't shift
+   the content width. Collapse is handled by the parent <ResizableItem collapsed> (the panel
+   + its divider drop out), so the old `.sidebar.collapsed` rule is gone. */
+.sidebar {
+  background: var(--color-muted);
+  border-right: 1px solid var(--color-border);
+  box-sizing: border-box;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.sidebar > * {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  height: 100%;
+}
+
+.bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.bar-left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.brand {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-muted-foreground);
+}
+
+/* <kai-thread> scrolls internally and centers its own fixed-width column, so the
+   host just needs to fill the remaining height of the main flex column. */
+.thread {
+  flex: 1;
+  min-height: 0;
+}
+
+/* No top divider above the input — the composer floats against the thread. Extra
+   bottom padding lifts the input + hint off the viewport edge. */
+.composer {
+  padding: 0.75rem 1rem 1.5rem;
+}
+
+/* Match the composer to the centered message column above it. */
+.composer > * {
+  display: block;
+  width: 100%;
+  max-width: 48rem;
+  margin: 0 auto;
+}
+
+/* Muted, centered helper line under the input pointing out the / and @ triggers. */
+.composer-hint {
+  margin: 0.5rem auto 0;
+  font-size: 0.75rem;
+  text-align: center;
+  color: var(--color-muted-foreground);
+}
+
+.composer-hint kbd {
+  font-family: inherit;
+  font-size: 0.6875rem;
+  padding: 0.05rem 0.3rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(--color-border);
+  background: var(--color-muted);
+  color: var(--color-foreground);
+}

package/dist/templates/react/src/main.tsx

@@ -0,0 +1,15 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import '@kitn.ai/ui/elements'; // register the kai-* custom elements
+import '@kitn.ai/ui/theme.tokens.css'; // plain --color-* tokens for the shell (NOT the tailwind source)
+import './index.css';
+import App from './App';
+
+const root = document.getElementById('root');
+if (!root) throw new Error('Root element not found');
+
+createRoot(root).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/dist/templates/react/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/dist/templates/react/tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* React JSX */
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/dist/templates/react/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/dist/templates/react/tsconfig.node.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "types": ["node"],
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/dist/templates/react/vite.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// `@kitn.ai/ui` is linked into this example via `workspace:*`, so it resolves
+// through node_modules + the package's `exports` map exactly like a published
+// consumer would — no aliases needed. Build the kit first (`nx build ui`).
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: { port: 5173 },
+});

package/dist/templates/solid/_gitignore

@@ -0,0 +1,6 @@
+node_modules/
+dist/
+.env
+.env.local
+*.log
+.DS_Store

package/dist/templates/solid/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>@kitn.ai/ui SolidJS example</title>
+    <!-- No favicon on purpose: this is your app, so the branding is yours. Add one to public/ and link it here. -->
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

package/dist/templates/solid/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@kitn.ai/ui-example-solid",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@kitn.ai/ui": "workspace:*",
+    "solid-js": "^1.9.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.2.2",
+    "tailwindcss": "^4.2.2",
+    "typescript": "^5.5.0",
+    "vite": "^6.0.0",
+    "vite-plugin-solid": "^2.11.0"
+  }
+}

package/dist/templates/solid/src/App.tsx

@@ -0,0 +1,151 @@
+import { createMemo, createSignal, Show } from 'solid-js';
+import {
+  Button,
+  ChatConfig,
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '@kitn.ai/ui/solid';
+import { partsToText } from '@kitn.ai/ui/state';
+import { readOpenAIStream } from '@kitn.ai/ui/wire';
+import { CONVERSATIONS, GROUPS, SUGGESTIONS, THREADS, mockResponse, newId } from './chat-data';
+import { createChat } from './lib/chat';
+import { createConversations } from './lib/conversations';
+import type { Theme } from './lib/types';
+import { Composer } from './components/Composer';
+import { Sidebar } from './components/Sidebar';
+import { ThemeToggle } from './components/ThemeToggle';
+import { ThreadView } from './components/ThreadView';
+
+/**
+ * A mini chat **workspace composed by hand** from @kitn.ai/ui — to show how the
+ * pieces fit together (vs. dropping in one batteries-included `<kai-chat>`):
+ *
+ *   <ResizablePanelGroup>/<ResizablePanel>  — the draggable sidebar | main split
+ *   <ConversationList>  — the sidebar rail (see components/Sidebar.tsx)
+ *   <ChatContainer> + <Message>/<MessageBody>  — the scrolling thread
+ *                                                (components/ThreadView.tsx)
+ *   <PromptInput>       — the composer at the bottom (components/Composer.tsx)
+ *
+ * WHAT MAKES THIS ONE DIFFERENT FROM THE OTHER STARTERS. The React, Vue, Svelte,
+ * Angular and vanilla starters consume the `kai-*` WEB COMPONENTS — one custom
+ * element per region, with arrays set as JS properties. This one imports the
+ * SolidJS components DIRECTLY from `@kitn.ai/ui/solid`, because Solid is the
+ * kit's authored layer: there is no shadow root, no custom-element registration,
+ * and no property-vs-attribute question. The thread is spelled out as components
+ * rather than hidden behind `<kai-thread>`, which is the whole reason to read
+ * this one. Import from `@kitn.ai/ui/solid` and never the root entry — `/solid`
+ * is a strict superset, and the root ships none of the Solid catalog.
+ *
+ * The pieces are split into `components/` (the UI subcomponents + the example's
+ * own icons) and `lib/` (`createChat` owns the message array + streaming,
+ * `createConversations` the conversation stash). `lib/` rather than React's
+ * `hooks/`, and `createX` rather than `useX`, because that is what these are in
+ * Solid — they run ONCE and hand back accessors, so calling them hooks would
+ * name a React lifecycle Solid does not have. Same shape as the Svelte starter's
+ * `lib/`.
+ *
+ * Swap `mockResponse(text)` for a real `fetch` to ship a real app.
+ */
+export default function App() {
+  const [theme, setTheme] = createSignal<Theme>('dark');
+  const [collapsed, setCollapsed] = createSignal(false);
+  const chat = createChat(THREADS[CONVERSATIONS[0].id] ?? []);
+  const conversations = createConversations(chat, CONVERSATIONS);
+
+  // Suggestions are a first-turn affordance: they fall away once the thread is
+  // underway rather than sitting under a long conversation.
+  const suggestions = createMemo(() => (chat.messages().length <= 1 ? SUGGESTIONS : []));
+
+  const activeTitle = createMemo(
+    () => conversations.conversations().find((c) => c.id === conversations.activeId())?.title ?? '',
+  );
+
+  async function send(raw: string) {
+    const text = raw.trim();
+    if (!text) return;
+    // The Composer already cleared its own input; here we just append the user
+    // message and stream the (mock) assistant reply.
+    chat.append({ id: newId(), role: 'user', parts: [{ type: 'text', text }] });
+    const stream = chat.streamAssistant();
+    // NO BACKEND AND NO PROVIDER. mockResponse() yields canned SSE frames that
+    // go through the SAME reader a real model's response would, so this preview
+    // exercises the real path. To go live, only this one expression changes —
+    // `mockResponse(text)` becomes a POST to your route, with
+    // toOpenAIMessages(chat.messages()) as the body. The line below stays.
+    await readOpenAIStream(mockResponse(text), stream);
+    stream.done();
+  }
+
+  /**
+   * Regenerate: drop the assistant turn (and anything after it), then re-send
+   * the user turn that preceded it through the same path above. Re-running
+   * `send` rather than patching the old message in place is what keeps this
+   * honest — a regenerated reply goes over the same wire as a first one.
+   */
+  function regenerate(assistantId: string) {
+    if (chat.loading()) return;
+    const all = chat.messages();
+    const at = all.findIndex((m) => m.id === assistantId);
+    if (at < 0) return;
+    const prompt = all.slice(0, at).reverse().find((m) => m.role === 'user');
+    if (!prompt) return;
+    // Truncate to just before the prompt: `send` re-appends it.
+    chat.setMessages(all.slice(0, all.indexOf(prompt)));
+    void send(partsToText(prompt.parts));
+  }
+
+  return (
+    <ChatConfig>
+      {/* The kit declares every --color-* token twice and flips the set under a
+          `.dark` ancestor (`@custom-variant dark (&:is(.dark *))` in theme.css),
+          so one class on the shell themes the components AND your own chrome. */}
+      <div class={`h-screen w-full overflow-hidden bg-background${theme() === 'dark' ? ' dark' : ''}`}>
+        <ResizablePanelGroup orientation="horizontal">
+          <Show when={!collapsed()}>
+            <ResizablePanel defaultSize="280px" minSize="220px" maxSize="420px">
+              <Sidebar
+                groups={GROUPS}
+                conversations={conversations.conversations}
+                activeId={conversations.activeId}
+                onSelect={conversations.selectConversation}
+                onNewChat={conversations.newChat}
+                onToggleSidebar={() => setCollapsed(true)}
+              />
+            </ResizablePanel>
+            <ResizableHandle handle="line" />
+          </Show>
+
+          <ResizablePanel>
+            <main class="flex h-full flex-1 flex-col overflow-hidden">
+              <header class="flex h-14 shrink-0 items-center justify-between border-b border-border px-5">
+                <div class="flex items-center gap-2">
+                  <Show when={collapsed()}>
+                    <Button variant="ghost" size="icon-sm" onClick={() => setCollapsed(false)}>
+                      <span aria-hidden>☰</span>
+                      <span class="sr-only">Show sidebar</span>
+                    </Button>
+                  </Show>
+                  <span class="text-sm font-semibold text-foreground">{activeTitle()}</span>
+                </div>
+                <div class="flex items-center gap-3">
+                  <span class="hidden text-xs text-muted-foreground sm:inline">
+                    @kitn.ai/ui · composed chat
+                  </span>
+                  <ThemeToggle
+                    theme={theme}
+                    onToggle={() => setTheme((t) => (t === 'light' ? 'dark' : 'light'))}
+                  />
+                </div>
+              </header>
+
+              <ThreadView messages={chat.messages} onRegenerate={regenerate} />
+
+              <Composer loading={chat.loading} suggestions={suggestions} onSubmit={send} />
+            </main>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+    </ChatConfig>
+  );
+}

package/dist/templates/solid/src/chat-data.ts

@@ -0,0 +1,234 @@
+// Self-contained sample data + the kit's shared mock responder — no backend.
+//
+// The seeded threads and the conversation rail live here so `App.tsx` reads as
+// composition rather than as a wall of fixture data. Mirrors
+// `examples/starters/react/src/chat-data.ts`; the types are the kit's own, taken
+// from `@kitn.ai/ui/solid` rather than redeclared, because a Solid app renders
+// the components directly and so already has them.
+import type {
+  ChatMessage,
+  ChatMessageAction,
+  ConversationGroup,
+  ConversationSummary,
+} from '@kitn.ai/ui/solid';
+import { createMockResponder } from '@kitn.ai/ui/state';
+
+export function newId(): string {
+  return typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function'
+    ? crypto.randomUUID()
+    : 'id-' + Math.random().toString(36).slice(2);
+}
+
+const iso = (daysAgo = 0) => new Date(Date.now() - daysAgo * 86_400_000).toISOString();
+
+const scope = { type: 'document' as const };
+
+export const GROUPS: ConversationGroup[] = [
+  { id: 'today', name: 'Today', sortOrder: 0, createdAt: iso(0) },
+  { id: 'yesterday', name: 'Yesterday', sortOrder: 1, createdAt: iso(1) },
+];
+
+export const CONVERSATIONS: ConversationSummary[] = [
+  {
+    id: 'c1',
+    title: 'SolidJS signals vs React hooks',
+    groupId: 'today',
+    scope,
+    messageCount: 6,
+    lastMessageAt: iso(0),
+    updatedAt: iso(0),
+  },
+  {
+    id: 'c2',
+    title: 'Composing your own chat',
+    groupId: 'today',
+    scope,
+    messageCount: 2,
+    lastMessageAt: iso(0),
+    updatedAt: iso(0),
+  },
+  {
+    id: 'c3',
+    title: 'Theming + dark mode',
+    groupId: 'yesterday',
+    scope,
+    messageCount: 2,
+    lastMessageAt: iso(1),
+    updatedAt: iso(1),
+  },
+];
+
+/** The action bar under every assistant message. Built-in names; `<MessageBody>`
+ *  renders the buttons and reports clicks through `onAction`. */
+export const ASSISTANT_ACTIONS: ChatMessageAction[] = ['copy', 'like', 'dislike', 'regenerate'];
+
+/**
+ * The in-memory conversation stash, keyed by conversation id.
+ *
+ * `createConversations` swaps the OPEN thread out to here and the picked one in,
+ * so switching conversations does not lose what was already streamed. A real app
+ * replaces this object with a fetch.
+ *
+ * The `c1` thread deliberately ends on a message carrying REASONING and a TOOL
+ * part before its text. A message is an ordered list of parts, not a string, and
+ * `<MessageBody>` renders each kind in place — flattening to text silently drops
+ * both. The mock responder streams text only (it produces an OpenAI-shaped wire,
+ * and that wire carries text deltas), so a seeded turn is what keeps the other
+ * two part kinds on screen.
+ */
+export const THREADS: Record<string, ChatMessage[]> = {
+  c1: [
+    {
+      id: 'c1u1',
+      role: 'user',
+      parts: [{ type: 'text', text: 'How does SolidJS reactivity differ from React hooks?' }],
+    },
+    {
+      id: 'c1a1',
+      role: 'assistant',
+      parts: [
+        {
+          type: 'text',
+          text: `**SolidJS** takes a fundamentally different approach to reactivity.
+
+### Signals vs useState
+
+In SolidJS, signals are **fine-grained reactive primitives** — when a signal updates, only the DOM nodes that read it are updated; no virtual DOM diff required.
+
+\`\`\`tsx
+// SolidJS — runs once, DOM updates surgically
+const [count, setCount] = createSignal(0);
+return <p>{count()}</p>; // only this text node re-renders
+
+// React — entire component re-renders
+const [count, setCount] = useState(0);
+return <p>{count}</p>; // whole function re-executes
+\`\`\`
+
+### Key differences
+
+1. **No re-renders** — SolidJS components run once; only reactive expressions update
+2. **No dependency arrays** — \`createEffect\` auto-tracks dependencies
+3. **No stale closures** — signals are getter functions, always current`,
+        },
+      ],
+    },
+    {
+      id: 'c1u2',
+      role: 'user',
+      parts: [{ type: 'text', text: "What's the signature of createResource?" }],
+    },
+    {
+      id: 'c1a2',
+      role: 'assistant',
+      parts: [
+        {
+          type: 'reasoning',
+          text: "They want the exact signature, not a paraphrase. I should look it up in the reference rather than recall it — the fetcher's second argument changed in 1.5 and I'd rather not guess.",
+          label: 'Thinking',
+        },
+        {
+          type: 'tool',
+          tool: {
+            type: 'search_docs',
+            kind: 'search',
+            state: 'output-available',
+            toolCallId: 'call_docs_1',
+            input: { query: 'createResource signature', version: '1.9' },
+            output: {
+              top: 'solidjs.com/docs/latest/api#createresource',
+              excerpt:
+                'createResource(source?, fetcher, options?) => [Resource, { mutate, refetch }]',
+            },
+          },
+        },
+        {
+          type: 'text',
+          text: `\`createResource\` returns a resource accessor plus an actions object.
+
+\`\`\`ts
+const [data, { mutate, refetch }] = createResource(source, fetcher);
+
+// data()        — the value, or undefined while pending
+// data.loading  — boolean
+// data.error    — the thrown error, if any
+\`\`\`
+
+Omit \`source\` for a fetch that runs once; pass a signal to re-fetch whenever it changes.`,
+        },
+      ],
+    },
+  ],
+  c2: [
+    {
+      id: 'c2u',
+      role: 'user',
+      parts: [
+        { type: 'text', text: 'How do I build my own chat instead of dropping in `<kai-chat>`?' },
+      ],
+    },
+    {
+      id: 'c2a',
+      role: 'assistant',
+      parts: [
+        {
+          type: 'text',
+          text: 'Put a `<Message>` per item inside a `<ChatContainer>`, hand each one\'s `parts` to `<MessageBody>`, and wire a `<PromptInput>` below it to append + stream. That is exactly what this example does — read `App.tsx`, then `components/ThreadView.tsx`.',
+        },
+      ],
+    },
+  ],
+  c3: [
+    { id: 'c3u', role: 'user', parts: [{ type: 'text', text: 'How does dark mode work?' }] },
+    {
+      id: 'c3a',
+      role: 'assistant',
+      parts: [
+        {
+          type: 'text',
+          text: "The kit ships a `.dark` class variant: `theme.css` declares every `--color-*` token twice, and `@custom-variant dark (&:is(.dark *))` flips the whole tree under it. Drive the class from app state — toggle it with the button top-right — and both the kit's components and your own chrome follow.",
+        },
+      ],
+    },
+  ],
+};
+
+export const SUGGESTIONS = [
+  'How do SolidJS stores work?',
+  'SolidJS TypeScript tips',
+  'Show me some markdown',
+];
+
+// The replies the mock cycles through, one per turn. Markdown-rich on purpose:
+// the thread renders markdown, code blocks and blockquotes, so the canned
+// replies exercise that instead of only proving text arrives.
+//
+// The first one says it is a mock in words. That is the WEAKEST of the
+// responder's tells and the only one a real model could imitate, which is
+// exactly why it is not the only one — the rest are on the wire.
+const MOCK_REPLIES = [
+  "This reply streams token-by-token from the kit's own mock responder — no API key, no backend, no provider was contacted. Replace `mockResponse(text)` with a real model call (Anthropic, OpenAI, your own endpoint) to ship a real app.",
+  'SolidJS **stores** are deeply reactive objects — good for shared state:\n\n```ts\nimport { createStore } from "solid-js/store";\n\nconst [state, setState] = createStore({ count: 0, user: { name: "Alice" } });\n\n// Fine-grained: only what reads state.count re-runs\nsetState("count", (c) => c + 1);\nsetState("user", "name", "Bob");\n```\n\nFor global state, wrap a store in `createContext` + `useContext`.',
+  'I render **bold**, *italic*, `inline code`, lists, and code blocks:\n\n```ts\nconst stream = chat.streamAssistant();\nawait readOpenAIStream(mockResponse(text), stream);\nstream.done();\n```\n\n> Blockquotes too.',
+  "This chat is **composed by hand** out of the SolidJS components: `<ConversationList>` for the sidebar, a `<Message>` + `<MessageBody>` per turn inside `<ChatContainer>`, and `<PromptInput>` at the bottom — all wired with `createSignal`. Swap `mockResponse(text)` for your own model call and you're shipping.",
+];
+
+/**
+ * The kit's own mock responder, shared with the `kai` MCP scaffolder and
+ * `create-kai` so there is ONE implementation of this and not seven.
+ *
+ * It yields canned SSE frames in the OpenAI chat-completions shape, which
+ * `readOpenAIStream` parses exactly as it parses a real provider's. So this
+ * no-backend preview runs the kit's REAL streaming path — the SSE reader, the
+ * part folding, all of it — rather than a hand-rolled loop that merely
+ * resembles it. Going live then changes one expression, not the handler.
+ *
+ * It also cannot be mistaken for a real turn: the stream opens with a
+ * `: kai-mock` SSE comment, every frame carries a `_kai_mock` field, `model`
+ * reports as `kai-mock` (no provider serves that, so an echoed mock frame is
+ * rejected upstream rather than quietly believed), and usage is all zeros.
+ *
+ * MODULE scope, not per-send: the responder owns the cursor into the replies
+ * above, so rebuilding it each turn would answer with the first one forever.
+ */
+export const mockResponse = createMockResponder({ replies: MOCK_REPLIES });