Fix #470: Add AgCombobox to SDUI codegen

v2/docs/sdui-architecture.md

@@ -104,7 +104,7 @@ flowchart LR
 
 ### Skipped components
 
-Components in `skipComponents` are excluded from all generated output because they require controlled runtime state that cannot be expressed in a static node graph. Current exclusions: `Collapsible`, `Combobox`, `Menu`, `Pagination`, `ScrollProgress`, `ScrollToButton`, `Sidebar`, `SidebarNav`, `Slider`, `Toast`, `VisuallyHidden`.
+Components in `skipComponents` are excluded from all generated output because they require controlled runtime state that cannot be expressed in a static node graph. Current exclusions: `Collapsible`, `Flex`, `Menu`, `Sidebar`, `SidebarNav`, `ScrollProgress`, `ScrollToButton`, `Toast`, `VisuallyHidden`.
 
 ---
 
@@ -277,11 +277,6 @@ v2/
     demo-lit/                Lit Vite demonstration app
     demo-vue/                Vue Vite demonstration app
 
-    examples/
-      sdui-react/            Minimal scaffolded React SDUI example
-      sdui-lit/              Minimal scaffolded Lit SDUI example
-      sdui-vue/              Minimal scaffolded Vue SDUI example
-
   docs/                      Developer guides (this file lives here)
     sdui-architecture.md
     schema-coverage.md

v2/sdui/DEV-WORKFLOW.md

@@ -153,3 +153,80 @@ Lit is not affected (direct property binding in the renderer template).
 - [ ] `cd v2/sdui/schema && npm run build` if the schema types changed
 - [ ] Restart the demo dev server
 - [ ] If something still looks stale: `rm -rf node_modules/.vite` in the demo, then restart
+
+---
+
+## Manual verification checklist
+
+Run these to spot-check the full SDUI stack after a significant change or when returning
+to the codebase after a gap. All commands assume you are in the repo root.
+
+### 1. Schema unit tests
+
+```bash
+cd v2/sdui/schema && npm test
+```
+Expected: **43 tests pass.** Covers Zod schema validation for every component.
+
+### 2. Renderer unit tests — all three frameworks
+
+```bash
+cd v2/sdui/renderers/react && npm test
+cd v2/sdui/renderers/vue   && npm test
+cd v2/sdui/renderers/lit   && npm test
+```
+Expected: **14 / 14 / 16 tests pass** respectively. Ignore Lit dev-mode stderr warnings
+in the Lit suite — they are pre-existing jsdom noise, not failures.
+
+### 3. Fixture validation + accessibility
+
+```bash
+cd v2/sdui/demo && npm test
+```
+Expected: **44 tests pass** across `fixtures.spec.ts`, `a11y.spec.ts`, and `toHtml.spec.ts`.
+`fixtures.spec.ts` calls `validateGraph()` on every variation in `fixtureBank` and on
+`pickerFixture`. Adding a new workflow to `fixtureBank` is automatically covered with no
+test code changes required.
+
+### 4. Codegen consistency (mirrors CI)
+
+```bash
+cd v2/sdui/schema && npm run check-codegen
+```
+Expected: `check-codegen: all 7 files are up to date.`
+Fails if any generated file (`schema.ts`, `types.ts`, `index.ts`, the three renderers, or
+`agnosticui-schema.json`) is out of sync with what codegen would produce. Fix by running
+`npm run codegen` (and `npm run codegen -- --emit-schema-json` for the JSON artifact), then
+committing the regenerated files.
+
+### 5. Visual spot-check — React demo
+
+```bash
+cd v2/sdui/demo && npm run dev
+```
+Open the printed localhost URL. Use the workflow picker to exercise each card. Key things
+to verify:
+- Clicking **Regenerate** streams a new fixture variation into the renderer.
+- Selecting a workflow option and clicking the action button (Submit / Apply / etc.)
+  transitions to the confirmation fixture.
+- The **Node array** collapsible panel shows the live JSON for the current render.
+- The **Combobox** workflow demonstrates single-select (variation 1) and multi-select with
+  tag overflow (variation 2, `multiple` + `closeOnSelect: false` + `maxOptionsVisible: 2`).
+
+### 6. Visual spot-check — Vue and Lit demos
+
+```bash
+cd v2/sdui/demo-vue && npm run dev   # separate terminal
+cd v2/sdui/demo-lit && npm run dev   # separate terminal
+```
+Same spot-check steps as the React demo. The fixture data is identical (shared imports from
+`v2/sdui/demo/src/fixtures/`); only the renderer differs. Verify the same Combobox workflow
+works in each framework.
+
+### 7. Confirm legacy examples are gone
+
+```bash
+ls v2/sdui/
+```
+Expected directories: `demo  demo-lit  demo-llm  demo-vue  renderers  schema` plus the
+markdown files. No `examples/` directory.

v2/sdui/demo/src/fixtures/index.ts

@@ -127,6 +127,50 @@ export const fixtureBank: Record<string, AgNode[][]> = {
       { id: 'pc5-cta-secondary-label', component: 'AgText', text: 'View all plans' },
     ],
   ],
+
+  'combobox-demo': [
+    // variation 1 — single-select department filter
+    [
+      { id: 'cb1-heading',       component: 'AgText',     text: 'Find opportunities',                         el: 'h2' },
+      { id: 'cb1-sub',           component: 'AgText',     text: 'Filter by department to see matching roles.', el: 'p' },
+      { id: 'cb1-divider',       component: 'AgDivider' },
+      { id: 'cb1-dept',          component: 'AgCombobox', label: 'Department', placeholder: 'Search departments…', filterMode: 'contains',
+        options: [
+          { value: 'engineering', label: 'Engineering' },
+          { value: 'design',      label: 'Design' },
+          { value: 'product',     label: 'Product' },
+          { value: 'marketing',   label: 'Marketing' },
+          { value: 'sales',       label: 'Sales' },
+          { value: 'support',     label: 'Customer Support' },
+        ],
+        on_change: 'COMBOBOX_CHANGE',
+      },
+      { id: 'cb1-submit',        component: 'AgButton',   variant: 'primary', shape: 'rounded', fullWidth: true, on_click: 'APPLY_FILTER', children: ['cb1-submit-label'] },
+      { id: 'cb1-submit-label',  component: 'AgText',     text: 'Apply filter' },
+    ],
+    // variation 2 — multi-select skills filter
+    [
+      { id: 'cb2-heading',       component: 'AgText',     text: 'Filter by skills',                                el: 'h2' },
+      { id: 'cb2-sub',           component: 'AgText',     text: 'Select one or more skills to narrow your search.', el: 'p' },
+      { id: 'cb2-divider',       component: 'AgDivider' },
+      { id: 'cb2-skills',        component: 'AgCombobox', label: 'Skills', placeholder: 'Search skills…', filterMode: 'contains',
+        multiple: true, closeOnSelect: false, maxOptionsVisible: 2,
+        options: [
+          { value: 'react',      label: 'React' },
+          { value: 'vue',        label: 'Vue' },
+          { value: 'typescript', label: 'TypeScript' },
+          { value: 'python',     label: 'Python' },
+          { value: 'go',         label: 'Go' },
+          { value: 'rust',       label: 'Rust' },
+          { value: 'graphql',    label: 'GraphQL' },
+          { value: 'postgres',   label: 'PostgreSQL' },
+        ],
+        on_change: 'COMBOBOX_CHANGE',
+      },
+      { id: 'cb2-submit',        component: 'AgButton',   variant: 'primary', shape: 'rounded', fullWidth: true, on_click: 'APPLY_FILTER', children: ['cb2-submit-label'] },
+      { id: 'cb2-submit-label',  component: 'AgText',     text: 'Search roles' },
+    ],
+  ],
 };
 
 // Step-2 confirmation fixtures — single screens shown after an action fires.
@@ -207,6 +251,14 @@ export const confirmFixtures: Record<string, AgNode[]> = {
 
   // ── /Account-setup wizard ────────────────────────────────────────────────
 
+  'combobox-confirm': [
+    { id: 'cb-ok-alert',    component: 'AgAlert',  variant: 'success', bordered: true, rounded: true, children: ['cb-ok-alert-text'] },
+    { id: 'cb-ok-alert-text', component: 'AgText', text: 'Filters applied! Showing matching results.' },
+    { id: 'cb-ok-card',    component: 'AgCard',   shadow: true, rounded: 'md', children: ['cb-ok-heading', 'cb-ok-body'] },
+    { id: 'cb-ok-heading', component: 'AgText',   text: 'Results ready', el: 'h2' },
+    { id: 'cb-ok-body',    component: 'AgText',   text: 'In a real app the selected values arrive in the on_change payload and can drive the next server render.', el: 'p' },
+  ],
+
   'pricing-plans': [
     { id: 'pl-heading',    component: 'AgText',   text: 'All plans', el: 'h2' },
     { id: 'pl-divider',    component: 'AgDivider' },
@@ -246,6 +298,9 @@ export const workflowActions: Record<string, Record<string, string>> = {
     START_TRIAL: 'pricing-trial-confirm',
     VIEW_PLANS:  'pricing-plans',
   },
+  'combobox-demo': {
+    APPLY_FILTER: 'combobox-confirm',
+  },
 };
 
 export function pickVariation(workflow: string): AgNode[] {

v2/sdui/demo/src/fixtures/picker.ts

@@ -8,7 +8,7 @@ export const pickerFixture: AgNode[] = [
     name: 'workflow',
     legend: 'Choose a workflow to generate',
     on_change: 'workflow-select',
-    children: ['card-wizard', 'card-contact', 'card-pricing', 'card-questionnaire', 'card-collapsible'],
+    children: ['card-wizard', 'card-contact', 'card-pricing', 'card-questionnaire', 'card-collapsible', 'card-combobox'],
   },
   {
     id: 'card-wizard',
@@ -105,4 +105,23 @@ export const pickerFixture: AgNode[] = [
     text: 'Accordion · slider value tracking · controlled state via on_toggle and on_change',
     el: 'p',
   },
+  {
+    id: 'card-combobox',
+    component: 'AgSelectionCard',
+    value: 'combobox-demo',
+    label: 'Combobox',
+    children: ['card-combobox-title', 'card-combobox-desc'],
+  },
+  {
+    id: 'card-combobox-title',
+    component: 'AgText',
+    text: 'Combobox',
+    el: 'p',
+  },
+  {
+    id: 'card-combobox-desc',
+    component: 'AgText',
+    text: 'Single-select · multi-select · on_change dispatch',
+    el: 'p',
+  },
 ];