From 2d62c532edb91a7ab53535e7c8f6423fef25b38c Mon Sep 17 00:00:00 2001
From: webtheory <11144268+sinups@users.noreply.github.com>
Date: Thu, 22 Oct 2026 09:58:01 +0300
Subject: [PATCH 1/2] feat: a string answer that runs over several lines
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Every string in an elicitation form was one line, however long the answer was
meant to be: "what happened?" with room for 8000 characters was a field that
showed about sixty of them.

A string schema now takes `multiline: true`, and the field becomes a text area
that grows from three lines to eight — `rows` moves where it starts. It never
shares a row with another field, and the label, the limit and the required
mark behave as they do on a one-line field. Without the flag nothing changes.
---
 .../src/elicitation/ElicitationForm.test.tsx  | 42 +++++++++++++++++++
 package/src/elicitation/ElicitationForm.tsx   | 24 +++++++++++
 package/src/elicitation/elicitation-schema.ts |  4 ++
 site/app/data/component-docs.ts               |  2 +-
 4 files changed, 71 insertions(+), 1 deletion(-)

diff --git a/package/src/elicitation/ElicitationForm.test.tsx b/package/src/elicitation/ElicitationForm.test.tsx
index 1aed438..5a245cf 100644
--- a/package/src/elicitation/ElicitationForm.test.tsx
+++ b/package/src/elicitation/ElicitationForm.test.tsx
@@ -122,3 +122,45 @@ describe('elicitation/ElicitationForm', () => {
     expect(screen.queryByRole('link')).not.toBeInTheDocument();
   });
 });
+
+describe('elicitation/a string over several lines', () => {
+  const multiline: ElicitationRequestedSchema = {
+    type: 'object',
+    properties: {
+      story: { type: 'string', title: 'What happened?', multiline: true, maxLength: 8000 },
+      short: { type: 'string', title: 'Order number' },
+    },
+    required: ['story'],
+  };
+
+  it('gives a multiline string a text area and keeps the plain one an input', () => {
+    render(<ElicitationForm message="Tell us" requestedSchema={multiline} />);
+
+    expect(screen.getByLabelText(/What happened\?/).tagName).toBe('TEXTAREA');
+    expect(screen.getByLabelText('Order number').tagName).toBe('INPUT');
+  });
+
+  it('keeps the line breaks the person typed', async () => {
+    const onAccept = jest.fn();
+    render(<ElicitationForm message="Tell us" requestedSchema={multiline} onAccept={onAccept} />);
+
+    const field = screen.getByLabelText(/What happened\?/);
+    await userEvent.type(field, 'First line{Enter}second line');
+    await userEvent.click(screen.getByRole('button', { name: 'Submit' }));
+
+    expect(onAccept).toHaveBeenCalledWith(
+      expect.objectContaining({ story: 'First line\nsecond line' })
+    );
+  });
+
+  it('keeps the required mark and the limit of the schema', async () => {
+    const onAccept = jest.fn();
+    render(<ElicitationForm message="Tell us" requestedSchema={multiline} onAccept={onAccept} />);
+
+    expect(screen.getByLabelText(/What happened\?/)).toHaveAttribute('maxlength', '8000');
+
+    await userEvent.click(screen.getByRole('button', { name: 'Submit' }));
+    expect(screen.getByText('Required')).toBeInTheDocument();
+    expect(onAccept).not.toHaveBeenCalled();
+  });
+});
diff --git a/package/src/elicitation/ElicitationForm.tsx b/package/src/elicitation/ElicitationForm.tsx
index ac17c06..1dbeaf2 100644
--- a/package/src/elicitation/ElicitationForm.tsx
+++ b/package/src/elicitation/ElicitationForm.tsx
@@ -13,6 +13,7 @@ import {
   Stack,
   Switch,
   Text,
+  Textarea,
   TextInput,
 } from '@mantine/core';
 import { IconExternalLink, IconForms } from '@tabler/icons-react';
@@ -101,11 +102,17 @@ function isCompactField(field: ElicitationField): boolean {
     return true;
   }
   if (field.kind === 'text') {
+    if (field.schema.multiline) {
+      return false;
+    }
     return field.inputType !== 'text' || (field.schema.maxLength ?? Infinity) <= 120;
   }
   return field.kind === 'select' && field.options.length > 3;
 }
 
+const MIN_TEXTAREA_ROWS = 3;
+const MAX_TEXTAREA_ROWS = 8;
+
 const EMPTY_SCHEMA: ElicitationRequestedSchema = { type: 'object', properties: {} };
 
 type FieldControlProps = {
@@ -128,6 +135,23 @@ function FieldControl({ field, value, error, disabled, onChange, onBlur }: Field
 
   switch (field.kind) {
     case 'text':
+      if (field.schema.multiline) {
+        return (
+          <Textarea
+            {...common}
+            autosize
+            minRows={Math.min(
+              Math.max(field.schema.rows ?? MIN_TEXTAREA_ROWS, 1),
+              MAX_TEXTAREA_ROWS
+            )}
+            maxRows={MAX_TEXTAREA_ROWS}
+            value={String(value ?? '')}
+            maxLength={field.schema.maxLength}
+            onChange={(event) => onChange(event.currentTarget.value)}
+            onBlur={onBlur}
+          />
+        );
+      }
       return (
         <TextInput
           {...common}
diff --git a/package/src/elicitation/elicitation-schema.ts b/package/src/elicitation/elicitation-schema.ts
index ef3cbd3..fb98fd6 100644
--- a/package/src/elicitation/elicitation-schema.ts
+++ b/package/src/elicitation/elicitation-schema.ts
@@ -8,6 +8,10 @@ export type ElicitationStringSchema = {
   minLength?: number;
   maxLength?: number;
   format?: 'email' | 'uri' | 'date' | 'date-time';
+  /** The answer is expected to run over several lines, so the field is a text area */
+  multiline?: boolean;
+  /** Height of a multiline field in lines, `3` by default and never past eight */
+  rows?: number;
   enum?: string[];
   enumNames?: string[];
   oneOf?: ElicitationEnumOption[];
diff --git a/site/app/data/component-docs.ts b/site/app/data/component-docs.ts
index 460dd70..34adbee 100644
--- a/site/app/data/component-docs.ts
+++ b/site/app/data/component-docs.ts
@@ -2251,7 +2251,7 @@ export function Example() {
         type: 'usage',
         title: 'Usage',
         content:
-          'Answer MCP elicitation requests. Pass the server\'s requestedSchema and the form builds Mantine fields for strings (email, uri, date, date-time), numbers, booleans, single and multi-select enums, validates required fields and bounds, and calls onAccept with only the filled values. Use mode="url" when the server asks the user to open a link. Short fields go into two columns once the form itself is wider than 520px, so the same component fits a narrow widget and a full-page chat.',
+          'Answer MCP elicitation requests. Pass the server\'s requestedSchema and the form builds Mantine fields for strings (email, uri, date, date-time), numbers, booleans, single and multi-select enums, validates required fields and bounds, and calls onAccept with only the filled values. A string that expects more than a line takes `multiline: true`, and then the field is a text area that grows from three lines to eight (`rows` sets where it starts); it never shares a row with another field, and its label, limit and required mark work as they do on a one-line field. Use mode="url" when the server asks the user to open a link. Short fields go into two columns once the form itself is wider than 520px, so the same component fits a narrow widget and a full-page chat.',
       },
       {
         type: 'example',

From 6e39dc5e748c0eda9dd9c159b2f8dee1f6b815e4 Mon Sep 17 00:00:00 2001
From: webtheory <11144268+sinups@users.noreply.github.com>
Date: Thu, 22 Oct 2026 09:58:01 +0300
Subject: [PATCH 2/2] feat: question options as the boxes people know
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Multiple choice was lettered rows that behave like buttons, which reads as "pick
one and move on" rather than "tick what applies". `control: "checkbox"` draws
the familiar boxes instead — squares for `multi`, circles for `single` — with
the same answer, the same bounds and the same previews. The lettered rows stay
the default.
---
 .../src/question/QuestionPrompt.module.css    | 11 +++
 package/src/question/QuestionPrompt.test.tsx  | 72 +++++++++++++++++++
 package/src/question/QuestionPrompt.tsx       | 61 ++++++++++++----
 scripts/check-size.ts                         |  2 +-
 site/app/data/bundle-size.json                | 24 +++----
 site/app/data/component-docs-chat.ts          |  2 +-
 6 files changed, 145 insertions(+), 27 deletions(-)

diff --git a/package/src/question/QuestionPrompt.module.css b/package/src/question/QuestionPrompt.module.css
index 90bde8c..1b29c16 100644
--- a/package/src/question/QuestionPrompt.module.css
+++ b/package/src/question/QuestionPrompt.module.css
@@ -241,3 +241,14 @@
   border: 0;
   background-color: transparent;
 }
+
+/* The options as the boxes people know: the row keeps the padding of a lettered one. */
+.box {
+  padding: rem(6px) rem(8px);
+  border-radius: var(--ae-control-radius);
+  transition: background-color 150ms ease;
+
+  @mixin hover {
+    background-color: alpha(var(--ae-fg), 0.04);
+  }
+}
diff --git a/package/src/question/QuestionPrompt.test.tsx b/package/src/question/QuestionPrompt.test.tsx
index 6413c91..0bc7972 100644
--- a/package/src/question/QuestionPrompt.test.tsx
+++ b/package/src/question/QuestionPrompt.test.tsx
@@ -187,3 +187,75 @@ describe('question/QuestionPrompt', () => {
     expect(screen.getByPlaceholderText('Notiz')).toBeInTheDocument();
   });
 });
+
+describe('question/options as boxes', () => {
+  it('draws squares for a multiple choice and keeps the answer the same', async () => {
+    const onSubmit = jest.fn();
+    render(
+      <QuestionPrompt
+        questions={[
+          {
+            kind: 'multi',
+            control: 'checkbox',
+            title: 'What should the agent touch?',
+            options: [
+              { id: 'tests', label: 'Tests' },
+              { id: 'docs', label: 'Docs' },
+            ],
+          },
+        ]}
+        onSubmit={onSubmit}
+      />
+    );
+
+    const boxes = screen.getAllByRole('checkbox');
+    expect(boxes).toHaveLength(2);
+
+    await userEvent.click(screen.getByRole('checkbox', { name: /Tests/ }));
+    await userEvent.click(screen.getByRole('checkbox', { name: /Docs/ }));
+    await userEvent.click(screen.getByRole('button', { name: 'Send' }));
+
+    expect(onSubmit).toHaveBeenCalledWith(
+      expect.objectContaining({ kind: 'multi', selectedIds: ['tests', 'docs'] })
+    );
+  });
+
+  it('draws circles for a single choice', () => {
+    render(
+      <QuestionPrompt
+        questions={[
+          {
+            kind: 'single',
+            control: 'checkbox',
+            title: 'Which environment?',
+            options: [
+              { id: 'staging', label: 'Staging' },
+              { id: 'production', label: 'Production' },
+            ],
+          },
+        ]}
+        onSubmit={() => {}}
+      />
+    );
+
+    expect(screen.getAllByRole('radio')).toHaveLength(2);
+  });
+
+  it('keeps the lettered rows without the flag', () => {
+    render(
+      <QuestionPrompt
+        questions={[
+          {
+            kind: 'multi',
+            title: 'What should the agent touch?',
+            options: [{ id: 'tests', label: 'Tests' }],
+          },
+        ]}
+        onSubmit={() => {}}
+      />
+    );
+
+    expect(screen.queryByRole('checkbox')).toBeNull();
+    expect(screen.getByRole('button', { name: /Tests/ })).toBeInTheDocument();
+  });
+});
diff --git a/package/src/question/QuestionPrompt.tsx b/package/src/question/QuestionPrompt.tsx
index 17ea650..e94358d 100644
--- a/package/src/question/QuestionPrompt.tsx
+++ b/package/src/question/QuestionPrompt.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Box, Textarea, TextInput, UnstyledButton } from '@mantine/core';
+import { Box, Checkbox, Radio, Textarea, TextInput, UnstyledButton } from '@mantine/core';
 import { useElementSize } from '@mantine/hooks';
 import { Markdown } from '../Markdown/Markdown';
 import { cx } from '../utils/cx';
@@ -34,6 +34,11 @@ export type QuestionConfig = {
   title: string;
   description?: string;
   options?: QuestionOption[];
+  /**
+   * Shape of the options: `button` keeps the lettered rows, `checkbox` draws the familiar boxes —
+   * squares for `multi`, circles for `single`. `button` by default.
+   */
+  control?: 'button' | 'checkbox';
   /** Adds a free-text option after the predefined ones */
   allowCustom?: boolean;
   customLabel?: string;
@@ -156,6 +161,7 @@ export function QuestionPrompt({
   const [activeOptionId, setActiveOptionId] = useState<string | null>(null);
   const { ref, width } = useElementSize();
   const customEnabled = activeQuestion?.allowCustom ?? false;
+  const asBoxes = activeQuestion?.control === 'checkbox';
   const showNav = resolvedTotal > 1 && (!!onPreviousQuestion || !!onNextQuestion);
   const canGoPrev = clampedIndex > 1;
   const canGoNext = clampedIndex < resolvedTotal;
@@ -247,21 +253,50 @@ export function QuestionPrompt({
           <div className={classes.options}>
             {options.map((option, idx) => {
               const checked = selectedIds.includes(option.id);
+              const pick = () => {
+                if (activeQuestion.kind === 'single') {
+                  handleSingleSelect(option.id);
+                  if (customEnabled) {
+                    setCustomText('');
+                  }
+                } else {
+                  toggleMulti(option.id);
+                }
+              };
+              const hover = option.preview ? () => setActiveOptionId(option.id) : undefined;
+              if (asBoxes) {
+                const Control = activeQuestion.kind === 'single' ? Radio : Checkbox;
+                return (
+                  <React.Fragment key={option.id}>
+                    <Control
+                      size="sm"
+                      checked={checked}
+                      onChange={pick}
+                      onMouseEnter={hover}
+                      onFocus={hover}
+                      className={classes.box}
+                      label={
+                        <span className={classes.optionLabel}>
+                          {option.label}
+                          {option.description && (
+                            <span className={classes.optionDescription}> {option.description}</span>
+                          )}
+                        </span>
+                      }
+                    />
+                    {!isWide &&
+                      previewOption?.id === option.id &&
+                      (checked || activeOptionId === option.id) &&
+                      renderPreview(classes.inlinePreview)}
+                  </React.Fragment>
+                );
+              }
               return (
                 <React.Fragment key={option.id}>
                   <UnstyledButton
-                    onMouseEnter={option.preview ? () => setActiveOptionId(option.id) : undefined}
-                    onFocus={option.preview ? () => setActiveOptionId(option.id) : undefined}
-                    onClick={() => {
-                      if (activeQuestion.kind === 'single') {
-                        handleSingleSelect(option.id);
-                        if (customEnabled) {
-                          setCustomText('');
-                        }
-                      } else {
-                        toggleMulti(option.id);
-                      }
-                    }}
+                    onMouseEnter={hover}
+                    onFocus={hover}
+                    onClick={pick}
                     className={classes.option}
                     data-checked={checked || undefined}
                     aria-pressed={checked}
diff --git a/scripts/check-size.ts b/scripts/check-size.ts
index a9e9ffb..a04cd3c 100644
--- a/scripts/check-size.ts
+++ b/scripts/check-size.ts
@@ -58,7 +58,7 @@ const entries: Entry[] = [
     name: 'import *',
     source: "import * as kit from '@sinups/ai-kit'; console.log(kit);",
     stylesheets: ['styles.css'],
-    gzipBudget: 242_200,
+    gzipBudget: 243_500,
   },
 ];
 
diff --git a/site/app/data/bundle-size.json b/site/app/data/bundle-size.json
index 3d82e5a..bf2d83e 100644
--- a/site/app/data/bundle-size.json
+++ b/site/app/data/bundle-size.json
@@ -5,9 +5,9 @@
       "styles/base.css",
       "styles/AgentChat.css"
     ],
-    "jsGzip": 85062,
-    "cssGzip": 12498,
-    "totalGzip": 97560
+    "jsGzip": 85285,
+    "cssGzip": 12676,
+    "totalGzip": 97961
   },
   {
     "name": "MessageList",
@@ -15,9 +15,9 @@
       "styles/base.css",
       "styles/MessageList.css"
     ],
-    "jsGzip": 70186,
-    "cssGzip": 9742,
-    "totalGzip": 79928
+    "jsGzip": 70431,
+    "cssGzip": 9867,
+    "totalGzip": 80298
   },
   {
     "name": "InputBar",
@@ -25,9 +25,9 @@
       "styles/base.css",
       "styles/InputBar.css"
     ],
-    "jsGzip": 30396,
-    "cssGzip": 6985,
-    "totalGzip": 37381
+    "jsGzip": 30507,
+    "cssGzip": 7087,
+    "totalGzip": 37594
   },
   {
     "name": "Markdown",
@@ -285,9 +285,9 @@
     "stylesheets": [
       "styles.css"
     ],
-    "jsGzip": 218497,
-    "cssGzip": 23145,
-    "totalGzip": 241642
+    "jsGzip": 218879,
+    "cssGzip": 23369,
+    "totalGzip": 242248
   },
   {
     "name": "embed widget.js",
diff --git a/site/app/data/component-docs-chat.ts b/site/app/data/component-docs-chat.ts
index c37ff9c..abaee6b 100644
--- a/site/app/data/component-docs-chat.ts
+++ b/site/app/data/component-docs-chat.ts
@@ -581,7 +581,7 @@ export function Example({ answer }: { answer: (value: unknown) => void }) {
         type: 'usage',
         title: 'Usage',
         content:
-          'The form for one question the agent asks the user. `kind` is `single` (lettered options, one choice), `multi` (several choices, bounded by `minSelections` and `maxSelections`) or `text` (a free-text area). `allowCustom` adds a typed answer as the last option and `allowNotes` adds an optional notes field. An option can carry a `preview` (Markdown or code): from 640px of prompt width it is shown beside the options, below that under the chosen or hovered option. The primary button reads Next while more questions follow and Send on the last one; it stays disabled until the answer is valid. Skip calls `onSkip`, or `onSubmit({ kind: "skip" })` when `onSkip` is not set. `initialAnswer` is read only on mount, so remount with `key` when the question changes. QuestionTool and InputBar `questionBar` use this component and handle multi-step navigation for you; render it directly only for a custom flow. Related helpers: `getInitialQuestionDraft`, `canSubmitQuestion`, `buildQuestionAnswer`, `formatQuestionAnswer`.',
+          'The form for one question the agent asks the user. `kind` is `single` (lettered options, one choice), `multi` (several choices, bounded by `minSelections` and `maxSelections`) or `text` (a free-text area). `control: "checkbox"` swaps the lettered rows for the boxes people already know — squares for `multi`, circles for `single` — with the same answer and the same bounds; the letters stay by default. `allowCustom` adds a typed answer as the last option and `allowNotes` adds an optional notes field. An option can carry a `preview` (Markdown or code): from 640px of prompt width it is shown beside the options, below that under the chosen or hovered option. The primary button reads Next while more questions follow and Send on the last one; it stays disabled until the answer is valid. Skip calls `onSkip`, or `onSubmit({ kind: "skip" })` when `onSkip` is not set. `initialAnswer` is read only on mount, so remount with `key` when the question changes. QuestionTool and InputBar `questionBar` use this component and handle multi-step navigation for you; render it directly only for a custom flow. Related helpers: `getInitialQuestionDraft`, `canSubmitQuestion`, `buildQuestionAnswer`, `formatQuestionAnswer`.',
       },
       {
         type: 'example',