@nxisai/agent-harness 0.4.0 → 0.5.0

package/dist/ui/tailwind.generated.js

@@ -1,3 +1,3 @@
 /* GENERATED by scripts/css-to-ts.mjs — do not edit. Source: src/ui/agent.tw.css */
-export const TAILWIND_CSS = "/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:\"Inter\", system-ui, sans-serif;--font-mono:\"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, monospace;--color-white:#fff;--spacing:.25rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--font-weight-medium:500;--leading-normal:1.5;--leading-relaxed:1.625;--radius-sm:.25rem;--radius-md:.375rem;--radius-2xl:1rem;--shadow-sm:0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;--ease-in-out:cubic-bezier(.4, 0, .2, 1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-bg:#fff;--color-surface:#f5f7fb;--color-border-hair:#e4e9f2;--color-ink:#0f172a;--color-ink-2:#475569;--color-ink-3:#8a97ac;--color-blue:#2563eb;--color-blue-strong:#1d4ed8;--color-blue-tint:#eef3ff;--color-green-strong:#16a34a;--color-red:#b91c1c;--font-display:\"Manrope\", system-ui, sans-serif;--radius-card:14px}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.invisible{visibility:hidden}.visible{visibility:visible}.fixed{position:fixed}.static{position:static}.sticky{position:sticky}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mt-1{margin-top:var(--spacing)}.block{display:block}.contents{display:contents}.flex{display:flex}.hidden{display:none}.inline{display:inline}.table{display:table}.w-full{width:100%}.max-w-\\[76\\%\\]{max-width:76%}.max-w-\\[420px\\]{max-width:420px}.flex-shrink{flex-shrink:1}.border-collapse{border-collapse:collapse}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.resize{resize:both}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.gap-1{gap:var(--spacing)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.self-end{align-self:flex-end}.self-start{align-self:flex-start}.self-stretch{align-self:stretch}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-card{border-radius:var(--radius-card)}.rounded-br-md{border-bottom-right-radius:var(--radius-md)}.rounded-bl-md{border-bottom-left-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-border-hair{border-color:var(--color-border-hair)}.border-red{border-color:var(--color-red)}.border-red\\/25{border-color:#b91c1c40}@supports (color:color-mix(in lab, red, red)){.border-red\\/25{border-color:color-mix(in oklab, var(--color-red) 25%, transparent)}}.bg-blue{background-color:var(--color-blue)}.bg-surface{background-color:var(--color-surface)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-3\\.5{padding-inline:calc(var(--spacing) * 3.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.font-mono{font-family:var(--font-mono)}.font-sans{font-family:var(--font-sans)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-\\[11px\\]{font-size:11px}.text-\\[13px\\]{font-size:13px}.leading-normal{--tw-leading:var(--leading-normal);line-height:var(--leading-normal)}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.tracking-\\[0\\.14em\\]{--tw-tracking:.14em;letter-spacing:.14em}.break-words{overflow-wrap:break-word}.whitespace-pre-wrap{white-space:pre-wrap}.text-green-strong{color:var(--color-green-strong)}.text-ink{color:var(--color-ink)}.text-ink-2{color:var(--color-ink-2)}.text-red{color:var(--color-red)}.text-white{color:var(--color-white)}.uppercase{text-transform:uppercase}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-resting{--tw-shadow:0 1px 2px var(--tw-shadow-color,#0f172a0d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow\\/border{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.\\!ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor)!important;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)!important}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}}@property --tw-rotate-x{syntax:\"*\";inherits:false}@property --tw-rotate-y{syntax:\"*\";inherits:false}@property --tw-rotate-z{syntax:\"*\";inherits:false}@property --tw-skew-x{syntax:\"*\";inherits:false}@property --tw-skew-y{syntax:\"*\";inherits:false}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-tracking{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-blur{syntax:\"*\";inherits:false}@property --tw-brightness{syntax:\"*\";inherits:false}@property --tw-contrast{syntax:\"*\";inherits:false}@property --tw-grayscale{syntax:\"*\";inherits:false}@property --tw-hue-rotate{syntax:\"*\";inherits:false}@property --tw-invert{syntax:\"*\";inherits:false}@property --tw-opacity{syntax:\"*\";inherits:false}@property --tw-saturate{syntax:\"*\";inherits:false}@property --tw-sepia{syntax:\"*\";inherits:false}@property --tw-drop-shadow{syntax:\"*\";inherits:false}@property --tw-drop-shadow-color{syntax:\"*\";inherits:false}@property --tw-drop-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:\"*\";inherits:false}@property --tw-ease{syntax:\"*\";inherits:false}";
+export const TAILWIND_CSS = "/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:\"Inter\", system-ui, sans-serif;--font-mono:\"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, monospace;--color-white:#fff;--spacing:.25rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--font-weight-medium:500;--leading-normal:1.5;--leading-relaxed:1.625;--radius-sm:.25rem;--radius-md:.375rem;--radius-2xl:1rem;--shadow-sm:0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;--ease-in-out:cubic-bezier(.4, 0, .2, 1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-bg:#fff;--color-surface:#f5f7fb;--color-border-hair:#e4e9f2;--color-ink:#0f172a;--color-ink-2:#475569;--color-ink-3:#8a97ac;--color-blue:#2563eb;--color-blue-strong:#1d4ed8;--color-blue-tint:#eef3ff;--color-green-strong:#16a34a;--color-red:#b91c1c;--font-display:\"Manrope\", system-ui, sans-serif;--radius-card:14px}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.invisible{visibility:hidden}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mt-1{margin-top:var(--spacing)}.block{display:block}.contents{display:contents}.flex{display:flex}.hidden{display:none}.inline{display:inline}.table{display:table}.w-full{width:100%}.max-w-\\[76\\%\\]{max-width:76%}.max-w-\\[420px\\]{max-width:420px}.flex-shrink{flex-shrink:1}.border-collapse{border-collapse:collapse}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.resize{resize:both}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.gap-1{gap:var(--spacing)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.self-end{align-self:flex-end}.self-start{align-self:flex-start}.self-stretch{align-self:stretch}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-card{border-radius:var(--radius-card)}.rounded-br-md{border-bottom-right-radius:var(--radius-md)}.rounded-bl-md{border-bottom-left-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-border-hair{border-color:var(--color-border-hair)}.border-red{border-color:var(--color-red)}.border-red\\/25{border-color:#b91c1c40}@supports (color:color-mix(in lab, red, red)){.border-red\\/25{border-color:color-mix(in oklab, var(--color-red) 25%, transparent)}}.bg-blue{background-color:var(--color-blue)}.bg-surface{background-color:var(--color-surface)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-3\\.5{padding-inline:calc(var(--spacing) * 3.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.font-mono{font-family:var(--font-mono)}.font-sans{font-family:var(--font-sans)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-\\[11px\\]{font-size:11px}.text-\\[13px\\]{font-size:13px}.leading-normal{--tw-leading:var(--leading-normal);line-height:var(--leading-normal)}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.tracking-\\[0\\.14em\\]{--tw-tracking:.14em;letter-spacing:.14em}.break-words{overflow-wrap:break-word}.whitespace-pre-wrap{white-space:pre-wrap}.text-green-strong{color:var(--color-green-strong)}.text-ink{color:var(--color-ink)}.text-ink-2{color:var(--color-ink-2)}.text-red{color:var(--color-red)}.text-white{color:var(--color-white)}.uppercase{text-transform:uppercase}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-resting{--tw-shadow:0 1px 2px var(--tw-shadow-color,#0f172a0d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow\\/border{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.\\!ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor)!important;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)!important}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}}@property --tw-rotate-x{syntax:\"*\";inherits:false}@property --tw-rotate-y{syntax:\"*\";inherits:false}@property --tw-rotate-z{syntax:\"*\";inherits:false}@property --tw-skew-x{syntax:\"*\";inherits:false}@property --tw-skew-y{syntax:\"*\";inherits:false}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-tracking{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-blur{syntax:\"*\";inherits:false}@property --tw-brightness{syntax:\"*\";inherits:false}@property --tw-contrast{syntax:\"*\";inherits:false}@property --tw-grayscale{syntax:\"*\";inherits:false}@property --tw-hue-rotate{syntax:\"*\";inherits:false}@property --tw-invert{syntax:\"*\";inherits:false}@property --tw-opacity{syntax:\"*\";inherits:false}@property --tw-saturate{syntax:\"*\";inherits:false}@property --tw-sepia{syntax:\"*\";inherits:false}@property --tw-drop-shadow{syntax:\"*\";inherits:false}@property --tw-drop-shadow-color{syntax:\"*\";inherits:false}@property --tw-drop-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:\"*\";inherits:false}@property --tw-ease{syntax:\"*\";inherits:false}";
 //# sourceMappingURL=tailwind.generated.js.map

package/dist/ui/tailwind.generated.js.map

@@ -1 +1 @@
-{"version":3,"file":"tailwind.generated.js","sourceRoot":"","sources":["../../src/ui/tailwind.generated.ts"],"names":[],"mappings":"AAAA,mFAAmF;AACnF,MAAM,CAAC,MAAM,YAAY,GAAG,44ZAA44Z,CAAC"}
+{"version":3,"file":"tailwind.generated.js","sourceRoot":"","sources":["../../src/ui/tailwind.generated.ts"],"names":[],"mappings":"AAAA,mFAAmF;AACnF,MAAM,CAAC,MAAM,YAAY,GAAG,o8ZAAo8Z,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nxisai/agent-harness",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "An on-device agent for the browser: a tool-calling harness over WebMCP and remote MCP, plus a drop-in chat UI. Decides whether to run a tool, ask for what's missing, or confirm before writing.",
   "type": "module",
   "main": "./dist/index.js",
@@ -25,6 +25,7 @@
   },
   "files": [
     "dist",
+    "src",
     "docs/remote-providers.md",
     "docs/*.svg",
     "README.md",

package/src/a2ui/cards.ts

@@ -0,0 +1,177 @@
+/**
+ * Renders typed-retrieval results as A2UI cards.
+ *
+ * The component count is fixed regardless of how many results there are: one
+ * result and twelve emit the same components, differing only in the data at
+ * `/results`. A result arriving late is therefore a data-model patch rather
+ * than new components, which keeps rendering incremental.
+ *
+ * Conditionality lives in the data rather than the components, so an entity
+ * with no rating simply has fewer entries. The basic catalog has no conditional
+ * rendering and none is needed.
+ */
+
+import type { A2uiMessage } from './emit.js';
+
+const CATALOG = 'https://a2ui.org/specification/v1_0/catalogs/basic/catalog.json';
+
+interface Component { id: string; component: string; [prop: string]: unknown }
+
+/** One label and value line on a result card. */
+export interface CardRow { label: string; value: string }
+/** A short pill shown on a result card. */
+export interface CardTag { label: string }
+/** One record, in the shape a result card renders. */
+export interface ResultCardData {
+  title: string;
+  sub: string;
+  tags: CardTag[];
+  rows: CardRow[];
+}
+
+const str = (v: unknown): string => (v == null ? '' : String(Array.isArray(v) ? v[0] : v));
+
+const humanize = (s: string): string =>
+  s.replace(/([a-z0-9])([A-Z])/g, '$1 $2').replace(/[_-]+/g, ' ')
+   .replace(/^\w/, c => c.toUpperCase());
+
+/**
+ * Normalise one schema.org entity into flat card data.
+ *
+ * Mirrors `_entityCard` in agent-fullscreen.ts, with the same
+ * title/type/rating rules and 4-row cap, so the A2UI surface and inline card show
+ * the same thing. If this ships, the two should share one implementation rather
+ * than drift; this copy exists to keep the sketch self-contained.
+ */
+export function toCardData(entity: Record<string, unknown>): ResultCardData {
+  const title = str(entity.name ?? entity.title ?? entity.headline ?? entity['@id'] ?? 'Result');
+  const tags: CardTag[] = [];
+
+  const rawType = entity['@type'];
+  if (rawType) tags.push({ label: humanize(str(rawType)) });
+
+  const ar = entity.aggregateRating as Record<string, unknown> | undefined;
+  if (ar && typeof ar === 'object' && ar.ratingValue != null) {
+    const stars = '★'.repeat(Math.max(1, Math.min(5, Math.round(Number(ar.ratingValue) || 0))));
+    tags.push({
+      label: ar.reviewCount != null
+        ? `${stars} ${str(ar.ratingValue)} · ${str(ar.reviewCount)}`
+        : `${stars} ${str(ar.ratingValue)}`,
+    });
+  }
+
+  // 24/7 is only ever implied by round-the-clock opening hours.
+  const hours = entity.openingHoursSpecification;
+  if (Array.isArray(hours) && hours.some(h =>
+    h && typeof h === 'object'
+    && String((h as Record<string, unknown>).opens) === '00:00'
+    && String((h as Record<string, unknown>).closes) === '23:59')) {
+    tags.push({ label: '24/7' });
+  }
+
+  const desc = str(entity.description).trim();
+  const sub = desc.length > 150 ? desc.slice(0, 147) + '…' : desc;
+
+  const rows: CardRow[] = [];
+  const push = (label: string, value: unknown) => {
+    const v = str(value).trim();
+    if (v && rows.length < 4 && !rows.some(r => r.label === label)) {
+      rows.push({ label, value: v.length > 90 ? v.slice(0, 87) + '…' : v });
+    }
+  };
+
+  const addr = entity.address as Record<string, unknown> | undefined;
+  if (addr && typeof addr === 'object') {
+    const parts = [addr.streetAddress, addr.addressLocality, addr.addressRegion]
+      .filter(Boolean).map(str);
+    if (parts.length) push('Address', parts.join(', '));
+  }
+  for (const key of ['telephone', 'email', 'url']) {
+    const v = entity[key];
+    if (typeof v === 'string' || typeof v === 'number') {
+      push(humanize(key === 'url' ? 'website' : key), v);
+    }
+  }
+
+  return { title, sub, tags, rows };
+}
+
+/** Fixed component set — independent of how many results there are. */
+function cardComponents(heading: string): Component[] {
+  return [
+    { id: 'root', component: 'Column', children: ['heading', 'results'] },
+    { id: 'heading', component: 'Text', text: heading, variant: 'body' },
+
+    // Outer list: one Card per entry in /results
+    { id: 'results', component: 'List',
+      children: { path: '/results', componentId: 'card_tpl' }, direction: 'vertical' },
+    { id: 'card_tpl', component: 'Card', child: 'card_body' },
+    { id: 'card_body', component: 'Column', children: ['card_title', 'card_tags', 'card_sub', 'card_rows'] },
+    // No bold: `weight` in this catalog is a flex weight (number), and Text
+    // offers only variant caption/body. Title emphasis is not expressible in
+    // the basic catalog: it needs a custom catalog or renderer styling.
+    { id: 'card_title', component: 'Text', text: '${title}', variant: 'body' },
+
+    // Relative paths resolve inside the current item's scope.
+    { id: 'card_tags', component: 'List',
+      children: { path: 'tags', componentId: 'tag_tpl' }, direction: 'horizontal' },
+    { id: 'tag_tpl', component: 'Text', text: '${label}', variant: 'caption' },
+
+    { id: 'card_sub', component: 'Text', text: '${sub}', variant: 'caption' },
+
+    { id: 'card_rows', component: 'List',
+      children: { path: 'rows', componentId: 'row_tpl' }, direction: 'vertical' },
+    { id: 'row_tpl', component: 'Row', children: ['row_label', 'row_value'] },
+    { id: 'row_label', component: 'Text', text: '${label}', variant: 'caption' },
+    { id: 'row_value', component: 'Text', text: '${value}', variant: 'caption' },
+  ];
+}
+
+/**
+ * Build a surface from card data that has already been normalised.
+ *
+ * agent-fullscreen has its own `_entityCard`, and it is the one that decides
+ * what a card shows. Taking its output rather than re-deriving from entities
+ * keeps the A2UI surface and the legacy inline card identical by construction.
+ */
+export function emitCardsSurface(
+  heading: string,
+  results: ResultCardData[],
+  surfaceId = 'results'
+): A2uiMessage[] {
+  return [{
+    version: 'v1.0',
+    createSurface: {
+      surfaceId, catalogId: CATALOG,
+      components: cardComponents(heading),
+      dataModel: { results: results.slice(0, 12) },
+    },
+  }];
+}
+
+/**
+ * Build the A2UI messages for a set of results.
+ *
+ * @returns The messages to render, as one surface.
+ */
+export function emitResultsSurface(
+  toolName: string,
+  entities: Record<string, unknown>[],
+  surfaceId = 'results'
+): A2uiMessage[] {
+  const results = entities.slice(0, 12).map(toCardData);
+  const heading = results.length
+    ? `${humanize(toolName)} — ${results.length} result${results.length === 1 ? '' : 's'}`
+    : `${humanize(toolName)} — no results`;
+  return emitCardsSurface(heading, results, surfaceId);
+}
+
+/** A late-arriving result appends to the list; no components are re-sent. */
+export function emitAppendResult(
+  surfaceId: string, index: number, entity: Record<string, unknown>
+): A2uiMessage {
+  return {
+    version: 'v1.0',
+    updateDataModel: { surfaceId, path: `/results/${index}`, value: toCardData(entity) },
+  };
+}

package/src/a2ui/emit.ts

@@ -0,0 +1,147 @@
+/**
+ * Turns a parsed WebMCP action into an A2UI message stream.
+ *
+ * The model never authors A2UI: it picks a tool and fills parameters, and this
+ * deterministic code writes every envelope. Asking a small model to produce
+ * nested JSON with JSON Pointers and catalog constraints would be the least
+ * reliable part of an in-browser A2UI setup, and this avoids it.
+ *
+ * Transport is a function call, since the agent and renderer share a JavaScript
+ * context, which satisfies A2UI's ordered-delivery requirement for free.
+ *
+ * @module
+ */
+
+import type { NxisAction, NxisPropertyValueSpecification } from '../webmcp-contract.js';
+
+const CATALOG = 'https://a2ui.org/specification/v1_0/catalogs/basic/catalog.json';
+
+/** One component in the adjacency list. */
+interface Component {
+  id: string;
+  component: string;
+  [prop: string]: unknown;
+}
+
+/** One A2UI protocol message, authored against the v1.0 spec. */
+export interface A2uiMessage {
+  version: 'v1.0';
+  [key: string]: unknown;
+}
+
+/**
+ * A leading option that carries no label and reads as a prompt ("Select…",
+ * "Choose a service…") is the HTML `<option>` placeholder convention, not a
+ * real choice. A2UI has no placeholder slot on ChoicePicker, so it becomes the
+ * label and is dropped from `options`, since otherwise the agent can submit
+ * "Choose a service…" as a literal answer.
+ */
+function splitPlaceholder(
+  options: NonNullable<NxisPropertyValueSpecification['nxis:valueOption']>
+): { placeholder?: string; rest: typeof options } {
+  const [first, ...rest] = options;
+  const looksLikePrompt = first && !first.name && /[…:]\s*$/.test(first.value);
+  return looksLikePrompt
+    ? { placeholder: first.value, rest }
+    : { rest: options };
+}
+
+/** Map one PropertyValueSpecification to a component, or null if it is data-only. */
+function fieldComponent(pvs: NxisPropertyValueSpecification): Component | null {
+  const id = `field_${pvs.valueName}`;
+  const path = { path: `/form/${pvs.valueName}` };
+  const label = pvs.description ?? pvs.valueName;
+
+  // A prefilled field with no description is context the form carries, not
+  // something to ask a human about. It stays in the data model and is submitted;
+  // it just gets no component. `business` is exactly this.
+  if (!pvs.description && pvs.defaultValue !== undefined) return null;
+
+  if (pvs['nxis:valueOption']?.length) {
+    const { placeholder, rest } = splitPlaceholder(pvs['nxis:valueOption']);
+    return {
+      id,
+      component: 'ChoicePicker',
+      label: placeholder ? `${label} — ${placeholder}` : label,
+      variant: 'mutuallyExclusive',
+      options: rest.map((o: { name?: string; value: string }) => ({ label: o.name ?? o.value, value: o.value })),
+      value: path,
+    };
+  }
+
+  // valueMaxLength is absent on this action, so long-text is inferred from the
+  // field name. Crude, but wrong only in that a textarea renders as one line.
+  const longText = /description|message|notes|details/.test(pvs.valueName);
+  return {
+    id,
+    component: 'TextField',
+    label,
+    variant: longText ? 'longText' : 'shortText',
+    value: path,
+  };
+}
+
+/**
+ * Build the full message stream for an action.
+ *
+ * @param action  - parsed action from nxis.js `readActions()`
+ * @param prefill - values already known (the device-local profile), keyed by valueName
+ */
+export function emitActionSurface(
+  action: NxisAction,
+  prefill: Record<string, unknown> = {}
+): A2uiMessage[] {
+  const fields = action.input ?? [];
+
+  // Data model first: every field, whether or not it gets a component.
+  const dataModel: Record<string, unknown> = {};
+  for (const pvs of fields) {
+    dataModel[pvs.valueName] =
+      prefill[pvs.valueName] ?? pvs.defaultValue ?? '';
+  }
+
+  const fieldComponents: Component[] = fields
+    .map(fieldComponent)
+    .filter((c: Component | null): c is Component => c !== null);
+
+  const components: Component[] = [
+    // Inline components are cards. See stepper.ts.
+    { id: 'root', component: 'Card', child: 'body' },
+    { id: 'body', component: 'Column', children: [
+      'heading', ...fieldComponents.map((c: Component) => c.id), 'submit',
+    ] },
+    { id: 'heading', component: 'Text', text: action.description ?? action.name, variant: 'body' },
+    ...fieldComponents,
+    { id: 'submit_label', component: 'Text', text: 'Submit' },
+    {
+      id: 'submit',
+      component: 'Button',
+      child: 'submit_label',
+      variant: 'primary',
+      // The event name carries the action @id, so the handler knows which
+      // WebMCP tool to invoke without a second lookup.
+      action: { event: { name: 'nxis.submit', context: { actionId: action['@id'] } } },
+    },
+  ];
+
+  const surfaceId = `action_${action.name}`;
+
+  return [
+    {
+      version: 'v1.0',
+      createSurface: { surfaceId, catalogId: CATALOG, components, dataModel: { form: dataModel } },
+    },
+  ];
+}
+
+/**
+ * Values the agent infers mid-conversation arrive as data-model patches rather
+ * than a rebuilt surface, so the form updates under the user without losing
+ * focus or anything they have already typed.
+ */
+export function emitPrefill(surfaceId: string, valueName: string, value: unknown): A2uiMessage {
+  return {
+    version: 'v1.0',
+    updateDataModel: { surfaceId, path: `/form/${valueName}`, value },
+  };
+}

package/src/a2ui/form.ts

@@ -0,0 +1,117 @@
+/**
+ * Builds an A2UI form from a tool's JSON Schema.
+ *
+ * The general counterpart to `emit.ts`, which starts from a WebMCP action
+ * extracted from page JSON-LD. This one starts from the schema that remote MCP
+ * tools expose and that {@link toolSchema} normalises to, producing the same
+ * output surface from a different input.
+ *
+ * @module
+ */
+
+import type { JsonSchema } from '../types.js';
+import type { A2uiMessage } from './emit.js';
+
+const CATALOG = 'https://a2ui.org/specification/v1_0/catalogs/basic/catalog.json';
+
+interface Component { id: string; component: string; [prop: string]: unknown }
+
+const humanize = (s: string): string =>
+  s.replace(/([a-z0-9])([A-Z])/g, '$1 $2').replace(/[_-]+/g, ' ')
+   .replace(/^\w/, c => c.toUpperCase());
+
+/** Enum values may be bare scalars or {const,title}-style objects. */
+function enumOptions(values: unknown[]): { label: string; value: string }[] {
+  return values.map(v => {
+    if (v && typeof v === 'object') {
+      const o = v as Record<string, unknown>;
+      const value = String(o.const ?? o.value ?? '');
+      return { label: String(o.title ?? o.name ?? value), value };
+    }
+    return { label: humanize(String(v)), value: String(v) };
+  });
+}
+
+function fieldComponent(key: string, spec: JsonSchema, required: boolean): Component {
+  const id = `f_${key}`;
+  const path = { path: `/form/${key}` };
+  // The required marker is part of the label, since the basic catalog has no
+  // requiredness of its own. Validation stays with the caller regardless.
+  const label = `${spec.description || humanize(key)}${required ? ' *' : ''}`;
+
+  const enumValues = spec.enum ?? spec.items?.enum;
+  if (Array.isArray(enumValues) && enumValues.length) {
+    return {
+      id, component: 'ChoicePicker', label,
+      variant: spec.type === 'array' ? 'multipleSelection' : 'mutuallyExclusive',
+      options: enumOptions(enumValues),
+      value: path,
+    };
+  }
+
+  if (spec.type === 'boolean') return { id, component: 'CheckBox', label, value: path };
+
+  const variant =
+    spec.type === 'number' || spec.type === 'integer' ? 'number'
+    : spec.format === 'password' ? 'obscured'
+    : /description|message|notes|details|body/.test(key) ? 'longText'
+    : 'shortText';
+
+  return { id, component: 'TextField', label, variant, value: path };
+}
+
+/**
+ * Build the form surface for a tool.
+ *
+ * Submit and Cancel dispatch action events carrying the tool name, so one
+ * handler can serve every form without tracking which surface is live.
+ */
+export function emitToolForm(
+  toolName: string,
+  description: string,
+  schema: JsonSchema,
+  values: Record<string, unknown> = {},
+  surfaceId = 'toolform',
+): A2uiMessage[] {
+  const props = schema.properties ?? {};
+  const required = new Set(schema.required ?? []);
+
+  const fields = Object.entries(props).map(([key, spec]) =>
+    fieldComponent(key, spec ?? {}, required.has(key)));
+
+  // Seed by type: a CheckBox bound to '' is not merely empty, it is the wrong
+  // type for the component and does not round-trip through the data model.
+  const dataModel: Record<string, unknown> = {};
+  for (const [key, spec] of Object.entries(props)) {
+    const fallback = spec?.type === 'boolean' ? false
+      : spec?.type === 'number' || spec?.type === 'integer' ? null
+      : '';
+    dataModel[key] = values[key] ?? fallback;
+  }
+
+  const components: Component[] = [
+    // Inline components are cards. See stepper.ts.
+    { id: 'root', component: 'Card', child: 'body' },
+    { id: 'body', component: 'Column',
+      children: ['eyebrow', 'title', ...(description ? ['desc'] : []), ...fields.map(f => f.id), 'actions'] },
+    { id: 'eyebrow', component: 'Text', text: 'DETAILS NEEDED', variant: 'caption' },
+    // Body, not a heading: markdown headings would pick up
+    // --a2ui-font-family-title, but only with a MarkdownRenderer in context.
+    // Without one the raw "###" is printed. See stepper.ts.
+    { id: 'title', component: 'Text', text: humanize(toolName), variant: 'body' },
+    ...(description ? [{ id: 'desc', component: 'Text', text: description, variant: 'caption' }] : []),
+    ...fields,
+    { id: 'actions', component: 'Row', children: ['cancel', 'submit'], justify: 'end' },
+    { id: 'cancel_label', component: 'Text', text: 'Cancel' },
+    { id: 'cancel', component: 'Button', child: 'cancel_label',
+      action: { event: { name: 'nxis.cancel', context: { tool: toolName } } } },
+    { id: 'submit_label', component: 'Text', text: 'Submit' },
+    { id: 'submit', component: 'Button', child: 'submit_label', variant: 'primary',
+      action: { event: { name: 'nxis.submit', context: { tool: toolName } } } },
+  ];
+
+  return [{
+    version: 'v1.0',
+    createSurface: { surfaceId, catalogId: CATALOG, components, dataModel: { form: dataModel } },
+  }];
+}

package/src/a2ui/host.ts

@@ -0,0 +1,73 @@
+/**
+ * Mounts A2UI messages into a container element.
+ *
+ * Wraps the emit, downgrade, process and mount sequence every A2UI surface
+ * needs, so callers deal in messages and a container rather than in message
+ * processor lifecycles.
+ *
+ * Works inside a shadow root, since `<a2ui-surface>` is a custom element and
+ * upgrades wherever it is appended.
+ *
+ * @module
+ */
+
+import { MessageProcessor } from '@a2ui/web_core/v0_9';
+import { basicCatalog } from '@a2ui/lit/v0_9';
+import '@a2ui/lit/v0_9';
+
+import type { A2uiMessage } from './emit.js';
+import { toV09 } from './to-v09.js';
+
+/** A live A2UI surface, and the handle used to tear it down. */
+export interface MountedSurface {
+  /** The processor, for reading the live data model or sending further messages. */
+  processor: any;
+  /** The mounted custom element. */
+  element: HTMLElement;
+  /** Current value of one top-level data-model key on this surface. */
+  read(key: string): unknown;
+  /** Push a v1.0 message (e.g. a prefill patch) into the live surface. */
+  send(messages: A2uiMessage[]): void;
+  dispose(): void;
+}
+
+/**
+ * Render `messages` into `container`.
+ *
+ * @param onAction - Called when the renderer dispatches a button action. The
+ * event carries whatever `action.event.context` the emitter attached.
+ */
+export function mountSurface(
+  container: HTMLElement,
+  messages: A2uiMessage[],
+  onAction?: (event: any) => void,
+): MountedSurface | null {
+  const processor = new MessageProcessor(
+    [basicCatalog as any],
+    (event: any) => onAction?.(event),
+  );
+
+  processor.processMessages(toV09(messages) as any);
+
+  // One surface per mount; the first is the one just created.
+  const first = processor.model.surfacesMap.entries().next();
+  if (first.done) return null;
+  const [, surface] = first.value as [string, unknown];
+
+  const element = document.createElement('a2ui-surface') as any;
+  element.surface = surface;
+  container.appendChild(element);
+
+  return {
+    processor,
+    element,
+    // DataModel exposes get(path); reading the surface's own model avoids
+    // depending on the sendDataModel flag that getClientDataModel requires.
+    read: (key: string) => (surface as any)?.dataModel?.get(`/${key}`),
+    send: (msgs: A2uiMessage[]) => processor.processMessages(toV09(msgs) as any),
+    dispose: () => {
+      element.remove();
+      (processor as any).dispose?.();
+    },
+  };
+}

package/src/a2ui/index.ts

@@ -0,0 +1,22 @@
+/**
+ * A2UI surface emitters.
+ *
+ * Turn a tool's schema, a clarification plan, or typed-retrieval results into
+ * A2UI messages, for rendering through an A2UI renderer rather than the
+ * packaged element.
+ *
+ * Messages are authored against the v1.0 spec and downgraded by {@link toV09}
+ * before rendering, since published renderers support v0.9 and earlier.
+ *
+ * @module
+ */
+export { emitActionSurface, emitPrefill } from './emit.js';
+export type { A2uiMessage } from './emit.js';
+export { emitToolForm } from './form.js';
+export { emitAsk, emitStep, emitConfirm } from './stepper.js';
+export { emitCardsSurface, emitResultsSurface, emitAppendResult, toCardData } from './cards.js';
+export type { ResultCardData, CardRow, CardTag } from './cards.js';
+export { mountSurface } from './host.js';
+export type { MountedSurface } from './host.js';
+export { toV09 } from './to-v09.js';
+export { A2UI_THEME_CSS, NXIS_PRIMARY } from './theme.js';