termdock 1.4.361 → 1.4.362

package/dist/server/shared/chatFullUICatalog.js

@@ -0,0 +1,561 @@
+export const chatFullUISpec = {
+    "root": "Stack",
+    "components": {
+        "Card": {
+            "signature": "Card(children: (TextContent | MarkDownRenderer | CardHeader | Callout | TextCallout | CodeBlock | Image | ImageBlock | ImageGallery | Separator | HorizontalBarChart | RadarChart | PieChart | RadialChart | SingleStackedBarChart | ScatterChart | AreaChart | BarChart | LineChart | Table | TagBlock | Form | Buttons | IconButton | Steps | InlineHeader | EntityList | EditableTable | SnippetCardBlock | OverviewCardBlock | ContextCardBlock | CompositeCardBlock | VisualCardBlock | Tabs | Carousel | Stack)[], variant?: \"card\" | \"sunk\" | \"clear\", direction?: \"row\" | \"column\", gap?: \"none\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"2xl\", align?: \"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\", justify?: \"start\" | \"center\" | \"end\" | \"between\" | \"around\" | \"evenly\", wrap?: boolean)",
+            "description": "Styled container. variant: \"card\" (default, elevated) | \"sunk\" (recessed) | \"clear\" (transparent). Always full width. Accepts all Stack flex params (default: direction \"column\"). Cards flex to share space in row/wrap layouts."
+        },
+        "CardHeader": {
+            "signature": "CardHeader(title?: string, subtitle?: string)",
+            "description": "Header with optional title and subtitle"
+        },
+        "TextContent": {
+            "signature": "TextContent(text: string, size?: \"small\" | \"default\" | \"large\" | \"small-heavy\" | \"large-heavy\")",
+            "description": "Text block. Supports markdown. Optional size: \"small\" | \"default\" | \"large\" | \"small-heavy\" | \"large-heavy\"."
+        },
+        "MarkDownRenderer": {
+            "signature": "MarkDownRenderer(textMarkdown: string, variant?: \"clear\" | \"card\" | \"sunk\")",
+            "description": "Renders markdown text with optional container variant"
+        },
+        "Callout": {
+            "signature": "Callout(variant: \"info\" | \"warning\" | \"error\" | \"success\" | \"neutral\", title: string, description: string, visible?: $binding<boolean>)",
+            "description": "Callout banner. Optional visible is a reactive $boolean — auto-dismisses after 3s by setting $visible to false."
+        },
+        "TextCallout": {
+            "signature": "TextCallout(variant?: \"neutral\" | \"info\" | \"warning\" | \"success\" | \"danger\", title?: string, description?: string)",
+            "description": "Text callout with variant, title, and description"
+        },
+        "Image": {
+            "signature": "Image(alt: string, src?: string)",
+            "description": "Image with alt text and optional URL"
+        },
+        "ImageBlock": {
+            "signature": "ImageBlock(src: string, alt?: string)",
+            "description": "Image block with loading state"
+        },
+        "ImageGallery": {
+            "signature": "ImageGallery(images: {src: string, alt?: string, details?: string}[])",
+            "description": "Gallery grid of images with modal preview"
+        },
+        "CodeBlock": {
+            "signature": "CodeBlock(language: string, codeString: string)",
+            "description": "Syntax-highlighted code block"
+        },
+        "InlineHeader": {
+            "signature": "InlineHeader(heading: string, description?: string)",
+            "description": "Compact section heading with an optional one-line description, for use inside cards."
+        },
+        "Table": {
+            "signature": "Table(columns: Col[])",
+            "description": "Data table — column-oriented. Each Col holds its own data array."
+        },
+        "Col": {
+            "signature": "Col(label: string, data: any, type?: \"string\" | \"number\" | \"action\")",
+            "description": "Column definition — holds label + data array"
+        },
+        "EditableTable": {
+            "signature": "EditableTable(name?: string, columns?: {type: \"text\" | \"number\" | \"date-single\" | \"select\" | \"url\", key?: string, header?: string, width?: number, options?: {value: string, label: string}[]}[], data?: {id: string, values: (string | number)[]}[])",
+            "description": "Spreadsheet-like table whose cells the user can edit inline (text, number, url, date, select columns); edits are saved back as a form field"
+        },
+        "BarChart": {
+            "signature": "BarChart(labels: string[], series: Series[], variant?: \"grouped\" | \"stacked\", xLabel?: string, yLabel?: string, height?: number)",
+            "description": "Vertical bars; use for comparing values across categories with one or more series"
+        },
+        "LineChart": {
+            "signature": "LineChart(labels: string[], series: Series[], variant?: \"linear\" | \"natural\" | \"step\", xLabel?: string, yLabel?: string, height?: number)",
+            "description": "Lines over categories; use for trends and continuous data over time"
+        },
+        "AreaChart": {
+            "signature": "AreaChart(labels: string[], series: Series[], variant?: \"linear\" | \"natural\" | \"step\", xLabel?: string, yLabel?: string, height?: number)",
+            "description": "Filled area under lines; use for cumulative totals or volume trends over time"
+        },
+        "RadarChart": {
+            "signature": "RadarChart(labels: string[], series: Series[])",
+            "description": "Spider/web chart; use for comparing multiple variables across one or more entities"
+        },
+        "HorizontalBarChart": {
+            "signature": "HorizontalBarChart(labels: string[], series: Series[], variant?: \"grouped\" | \"stacked\", xLabel?: string, yLabel?: string)",
+            "description": "Horizontal bars; prefer when category labels are long or for ranked lists"
+        },
+        "Series": {
+            "signature": "Series(category: string, values: number[])",
+            "description": "One data series"
+        },
+        "PieChart": {
+            "signature": "PieChart(labels: string[], values: number[], variant?: \"pie\" | \"donut\", appearance?: \"circular\" | \"semiCircular\")",
+            "description": "Circular slices; use plucked arrays: PieChart(data.categories, data.values)"
+        },
+        "RadialChart": {
+            "signature": "RadialChart(labels: string[], values: number[])",
+            "description": "Radial bars; use plucked arrays: RadialChart(data.categories, data.values)"
+        },
+        "SingleStackedBarChart": {
+            "signature": "SingleStackedBarChart(labels: string[], values: number[])",
+            "description": "Single horizontal stacked bar; use plucked arrays: SingleStackedBarChart(data.categories, data.values)"
+        },
+        "Slice": {
+            "signature": "Slice(category: string, value: number)",
+            "description": "One slice with label and numeric value"
+        },
+        "ScatterChart": {
+            "signature": "ScatterChart(datasets: ScatterSeries[], xLabel?: string, yLabel?: string)",
+            "description": "X/Y scatter plot; use for correlations, distributions, and clustering"
+        },
+        "ScatterSeries": {
+            "signature": "ScatterSeries(name: string, points: Point[])",
+            "description": "Named dataset"
+        },
+        "Point": {
+            "signature": "Point(x: number, y: number, z?: number)",
+            "description": "Data point with numeric coordinates"
+        },
+        "Form": {
+            "signature": "Form(name: string, buttons: Buttons, fields?: FormControl[])",
+            "description": "Form container with fields and explicit action buttons"
+        },
+        "FormControl": {
+            "signature": "FormControl(label: string, input: Input | TextArea | Select | DatePicker | Slider | CheckBoxGroup | RadioGroup | Chips | OptionCards, hint?: string)",
+            "description": "Field with label, input component, and optional hint text"
+        },
+        "Label": {
+            "signature": "Label(text: string)",
+            "description": "Text label"
+        },
+        "Input": {
+            "signature": "Input(name: string, placeholder?: string, type?: \"text\" | \"email\" | \"password\" | \"number\" | \"url\", rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<string>)",
+            "description": ""
+        },
+        "TextArea": {
+            "signature": "TextArea(name: string, placeholder?: string, rows?: number, rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<string>)",
+            "description": ""
+        },
+        "Select": {
+            "signature": "Select(name: string, items: SelectItem[], placeholder?: string, rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<string>, size?: \"small\" | \"medium\" | \"large\")",
+            "description": ""
+        },
+        "SelectItem": {
+            "signature": "SelectItem(value: string, label: string)",
+            "description": "Option for Select"
+        },
+        "DatePicker": {
+            "signature": "DatePicker(name: string, mode?: \"single\" | \"range\", rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<any>)",
+            "description": ""
+        },
+        "Slider": {
+            "signature": "Slider(name: string, variant: \"continuous\" | \"discrete\", min: number, max: number, step?: number, defaultValue?: number[], label?: string, rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<number[]>)",
+            "description": "Numeric slider input; supports continuous and discrete (stepped) variants"
+        },
+        "CheckBoxGroup": {
+            "signature": "CheckBoxGroup(name: string, items: CheckBoxItem[], rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<Record<string, boolean>>)",
+            "description": ""
+        },
+        "CheckBoxItem": {
+            "signature": "CheckBoxItem(label: string, description: string, name: string, defaultChecked?: boolean)",
+            "description": ""
+        },
+        "RadioGroup": {
+            "signature": "RadioGroup(name: string, items: RadioItem[], defaultValue?: string, rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<string>)",
+            "description": ""
+        },
+        "RadioItem": {
+            "signature": "RadioItem(label: string, description: string, value: string)",
+            "description": ""
+        },
+        "SwitchGroup": {
+            "signature": "SwitchGroup(name: string, items: SwitchItem[], variant?: \"clear\" | \"card\" | \"sunk\", value?: $binding<Record<string, boolean>>)",
+            "description": "Group of switch toggles"
+        },
+        "SwitchItem": {
+            "signature": "SwitchItem(label?: string, description?: string, name: string, defaultChecked?: boolean)",
+            "description": "Individual switch toggle"
+        },
+        "ChipItem": {
+            "signature": "ChipItem(value: string, label: string, icon?: Icon, disabled?: boolean)",
+            "description": "A single selectable chip inside a Chips group, with a value, label and optional icon."
+        },
+        "Chips": {
+            "signature": "Chips(name: string, type?: \"single\" | \"multiple\", items?: ChipItem[], rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, defaultValue?: string | string[])",
+            "description": "A form field of compact selectable chips for choosing one or many short options; the selection is stored under `name`."
+        },
+        "OptionCard": {
+            "signature": "OptionCard(value: string, title: string, subtitle?: string, topContent?: Icon | Image, disabled?: boolean)",
+            "description": "A single selectable card inside an OptionCards group, with a value, title, optional subtitle and an optional Icon or Image on top."
+        },
+        "OptionCards": {
+            "signature": "OptionCards(name: string, type?: \"single\" | \"multiple\", items?: OptionCard[], rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, defaultValue?: string | string[])",
+            "description": "A form field of selectable cards (title, optional subtitle, optional icon or image) laid out in a responsive grid for choosing one or many options; the selection is stored under `name`."
+        },
+        "Button": {
+            "signature": "Button(label: string, action?: ActionExpression, variant?: \"primary\" | \"secondary\" | \"tertiary\", type?: \"normal\" | \"destructive\", size?: \"extra-small\" | \"small\" | \"medium\" | \"large\")",
+            "description": "Clickable button"
+        },
+        "Buttons": {
+            "signature": "Buttons(buttons: Button[], direction?: \"row\" | \"column\")",
+            "description": "Group of Button components. direction: \"row\" (default) | \"column\"."
+        },
+        "IconButton": {
+            "signature": "IconButton(name: string, icon: Icon, action?: ActionExpression, variant?: \"primary\" | \"secondary\" | \"tertiary\", size?: \"extra-small\" | \"small\" | \"medium\" | \"large\", shape?: \"square\" | \"circle\")",
+            "description": "Icon-only button. name is the accessible label and the action label; icon is an Icon; action fires on click."
+        },
+        "Stack": {
+            "signature": "Stack(children: any[], direction?: \"row\" | \"column\", gap?: \"none\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"2xl\", align?: \"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\", justify?: \"start\" | \"center\" | \"end\" | \"between\" | \"around\" | \"evenly\", wrap?: boolean)",
+            "description": "Flex container. direction: \"row\"|\"column\" (default \"column\"). gap: \"none\"|\"xs\"|\"s\"|\"m\"|\"l\"|\"xl\"|\"2xl\" (default \"m\"). align: \"start\"|\"center\"|\"end\"|\"stretch\"|\"baseline\". justify: \"start\"|\"center\"|\"end\"|\"between\"|\"around\"|\"evenly\"."
+        },
+        "Tabs": {
+            "signature": "Tabs(items: TabItem[])",
+            "description": "Tabbed container"
+        },
+        "TabItem": {
+            "signature": "TabItem(value: string, trigger: string, content: (TextContent | MarkDownRenderer | CardHeader | Callout | TextCallout | CodeBlock | Image | ImageBlock | ImageGallery | Separator | HorizontalBarChart | RadarChart | PieChart | RadialChart | SingleStackedBarChart | ScatterChart | AreaChart | BarChart | LineChart | Table | TagBlock | Form | Buttons | IconButton | Steps | InlineHeader | EntityList | EditableTable | SnippetCardBlock | OverviewCardBlock | ContextCardBlock | CompositeCardBlock | VisualCardBlock)[])",
+            "description": "value is unique id, trigger is tab label, content is array of components"
+        },
+        "Accordion": {
+            "signature": "Accordion(items: AccordionItem[])",
+            "description": "Collapsible sections"
+        },
+        "AccordionItem": {
+            "signature": "AccordionItem(value: string, trigger: string, content: (TextContent | MarkDownRenderer | CardHeader | Callout | TextCallout | CodeBlock | Image | ImageBlock | ImageGallery | Separator | HorizontalBarChart | RadarChart | PieChart | RadialChart | SingleStackedBarChart | ScatterChart | AreaChart | BarChart | LineChart | Table | TagBlock | Form | Buttons | IconButton | Steps | InlineHeader | EntityList | EditableTable | SnippetCardBlock | OverviewCardBlock | ContextCardBlock | CompositeCardBlock | VisualCardBlock)[])",
+            "description": "value is unique id, trigger is section title"
+        },
+        "Steps": {
+            "signature": "Steps(items: StepsItem[])",
+            "description": "Step-by-step guide"
+        },
+        "StepsItem": {
+            "signature": "StepsItem(title: string, details: string)",
+            "description": "title and details text for one step"
+        },
+        "Carousel": {
+            "signature": "Carousel(children: (TextContent | MarkDownRenderer | CardHeader | Callout | TextCallout | CodeBlock | Image | ImageBlock | ImageGallery | Separator | HorizontalBarChart | RadarChart | PieChart | RadialChart | SingleStackedBarChart | ScatterChart | AreaChart | BarChart | LineChart | Table | TagBlock | Form | Buttons | IconButton | Steps | InlineHeader | EntityList | EditableTable | SnippetCardBlock | OverviewCardBlock | ContextCardBlock | CompositeCardBlock | VisualCardBlock)[][], variant?: \"card\" | \"sunk\")",
+            "description": "Horizontal scrollable carousel"
+        },
+        "Separator": {
+            "signature": "Separator(orientation?: \"horizontal\" | \"vertical\", decorative?: boolean)",
+            "description": "Visual divider between content sections"
+        },
+        "TagBlock": {
+            "signature": "TagBlock(tags: string[], size?: \"sm\" | \"md\" | \"lg\")",
+            "description": "tags is an array of strings; optional size sm | md | lg"
+        },
+        "Tag": {
+            "signature": "Tag(text: string, icon?: Icon, size?: \"sm\" | \"md\" | \"lg\", variant?: \"neutral\" | \"info\" | \"success\" | \"warning\" | \"danger\")",
+            "description": "Styled tag/badge with optional Icon and variant"
+        },
+        "Icon": {
+            "signature": "Icon(name: string, category?: string)",
+            "description": "A lucide icon by kebab-case name (e.g. 'circle-check'). Optional category picks a topical fallback when the name doesn't resolve."
+        },
+        "EntityList": {
+            "signature": "EntityList(rows?: {left: string, right: string, rightVariant?: \"text\" | \"number\"}[], size?: \"small\" | \"default\", header?: {left: string, right: string, rightVariant?: \"text\" | \"number\"}, footer?: {left: string, right: string, rightVariant?: \"text\" | \"number\"})",
+            "description": "Two-column key/value rows (left label, right value). size 'default' supports optional header and footer rows; rightVariant 'number' uses tabular numbers."
+        },
+        "ListBlock": {
+            "signature": "ListBlock(items: ListItem[], variant?: \"number\" | \"image\", size?: \"default\" | \"small\")",
+            "description": "A list of items with number or image indicators. Each item can optionally have an action. size small renders a compact list."
+        },
+        "ListItem": {
+            "signature": "ListItem(title: string, subtitle?: string, image?: {src: string, alt: string}, actionLabel?: string, action?: ActionExpression)",
+            "description": "Item in a ListBlock — displays a title with an optional subtitle and image. When action is provided, the item becomes clickable."
+        },
+        "Text": {
+            "signature": "Text(variant?: \"text\" | \"number\", value: string, subtext?: string, subtextVariant?: \"text\" | \"number\" | \"metric\", size?: \"xs\" | \"sm\" | \"md\" | \"lg\")",
+            "description": "Plain text line with optional subtext. variant 'number' uses tabular number styling; subtextVariant 'metric' colors a leading +/- subtext green/red."
+        },
+        "BoldText": {
+            "signature": "BoldText(variant?: \"text\" | \"number\", value: string, subtext?: string, subtextVariant?: \"text\" | \"number\" | \"metric\", size?: \"xs\" | \"sm\" | \"md\" | \"lg\")",
+            "description": "Emphasized (bold) text line with optional subtext. variant 'number' uses tabular number styling; subtextVariant 'metric' colors a leading +/- subtext green/red."
+        },
+        "IconText": {
+            "signature": "IconText(icon: Icon, iconVariant?: \"neutral\" | \"info\" | \"success\" | \"warning\" | \"danger\" | \"inverted\" | \"filled\" | \"soft\", iconSize?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"sm\" | \"md\" | \"lg\", title: string, subtitle?: string, bold?: boolean, layout?: \"horizontal\" | \"vertical\")",
+            "description": "An icon badge with a title and optional subtitle, laid out horizontally or vertically. iconVariant sets the badge color."
+        },
+        "ImageText": {
+            "signature": "ImageText(src: string, alt?: string, title: string, subtitle?: string, bold?: boolean, layout?: \"horizontal\" | \"vertical\", imageSize?: number)",
+            "description": "A small square image (thumbnail/avatar) with a title and optional subtitle. src must be a real image URL."
+        },
+        "ImageTextLarge": {
+            "signature": "ImageTextLarge(src: string, alt?: string, title: string, subtitle?: string, bold?: boolean)",
+            "description": "A full-width banner image above a bold title and optional subtitle. src must be a real image URL."
+        },
+        "MetricIndicatorInline": {
+            "signature": "MetricIndicatorInline(value: string, subtext?: string, trend?: {direction: \"up\" | \"down\", value: number})",
+            "description": "Headline metric value with an optional +/- percentage trend and subtext, all on one line."
+        },
+        "MetricIndicatorWithStrikethrough": {
+            "signature": "MetricIndicatorWithStrikethrough(value: string, subtext?: string, previousValue?: string, trend?: {direction: \"up\" | \"down\", value: number})",
+            "description": "Headline metric value with an optional struck-through previousValue, a +/- percentage trend, and subtext below."
+        },
+        "SnippetCardItem": {
+            "signature": "SnippetCardItem(id?: string, lhs: IconText | ImageText, rhs?: Text | BoldText)",
+            "description": "One row-style snippet card: a label on the left (IconText or ImageText) and an optional value on the right (Text or BoldText)."
+        },
+        "SnippetCardBlock": {
+            "signature": "SnippetCardBlock(items: SnippetCardItem[], layout?: \"grid\", responsive?: boolean, action?: ActionExpression, gap?: number | string)",
+            "description": "A responsive grid of compact label/value cards (2 per row) for showing several short facts side by side; optionally clickable with a shared action."
+        },
+        "OverviewCardItem": {
+            "signature": "OverviewCardItem(id?: string, top: IconText | ImageText | Text, bottom?: MetricIndicatorInline)",
+            "description": "One overview card: a heading slot at the top (IconText, ImageText or Text) and an optional MetricIndicatorInline at the bottom."
+        },
+        "OverviewCardBlock": {
+            "signature": "OverviewCardBlock(items: OverviewCardItem[], layout?: \"grid\" | \"carousel\", responsive?: boolean, action?: ActionExpression, gap?: number | string)",
+            "description": "A grid or horizontal carousel of compact overview cards, each with a heading (icon/image/text) on top and an inline metric below; optionally clickable with a shared action."
+        },
+        "ContextCardItem": {
+            "signature": "ContextCardItem(id?: string, title: string | Tag, body?: string, bgColor?: \"gray\", bgImageSrc?: string, bgImageAlt?: string)",
+            "description": "A single card inside a ContextCardBlock: a title (plain string or Tag), an optional markdown body, and an optional gray tint or background image."
+        },
+        "ContextCardBlock": {
+            "signature": "ContextCardBlock(items: ContextCardItem[], layout?: \"grid\" | \"carousel\", responsive?: boolean, action?: ActionExpression, gap?: number | string)",
+            "description": "A grid or carousel of compact tinted context cards (title or tag plus a short bold body); an optional action makes every card clickable."
+        },
+        "CompositeCardItem": {
+            "signature": "CompositeCardItem(id?: string, header?: IconText | ImageText | ImageTextLarge | Text | Image, body?: (Text | BoldText | MetricIndicatorInline | IconText | Image | AreaChart | BarChart | LineChart | ListBlock | TagBlock | EntityList)[], footer?: {price?: BoldText | MetricIndicatorWithStrikethrough, button?: Button})",
+            "description": "A single card inside a CompositeCardBlock: an optional header (icon/image/text), a stack of body elements (text, metrics, charts, lists, tags), and an optional price/button footer."
+        },
+        "CompositeCardBlock": {
+            "signature": "CompositeCardBlock(items: CompositeCardItem[], layout?: \"grid\" | \"carousel\", responsive?: boolean, action?: ActionExpression, gap?: number | string)",
+            "description": "A two-per-row grid or carousel of rich cards, each with an optional header, stacked body content (text, metrics, charts, lists, tags) and a price/button footer; an optional action makes every card clickable."
+        },
+        "VisualCardItem": {
+            "signature": "VisualCardItem(body: BoldText, id?: string, bgImageSrc?: string, tag?: Tag, bgImageAlt?: string)",
+            "description": "A single photo-first card inside a VisualCardBlock: a BoldText body panel, an optional Tag, and a background image (bgImageSrc must be a real URL; bgImageAlt is its alt text)."
+        },
+        "VisualCardBlock": {
+            "signature": "VisualCardBlock(items: VisualCardItem[], layout?: \"grid\" | \"carousel\", responsive?: boolean, action?: ActionExpression, gap?: number | string)",
+            "description": "A grid or carousel of photo-first cards: a full-bleed background image with a tag on top and a bold text panel at the bottom; an optional action makes every card clickable."
+        },
+        "Modal": {
+            "signature": "Modal(title: string, open?: $binding<boolean>, children: (TextContent | MarkDownRenderer | CardHeader | Callout | TextCallout | CodeBlock | Image | ImageBlock | ImageGallery | Separator | HorizontalBarChart | RadarChart | PieChart | RadialChart | SingleStackedBarChart | ScatterChart | AreaChart | BarChart | LineChart | Table | TagBlock | Form | Buttons | IconButton | Steps | InlineHeader | EntityList | EditableTable | SnippetCardBlock | OverviewCardBlock | ContextCardBlock | CompositeCardBlock | VisualCardBlock)[], size?: \"sm\" | \"md\" | \"lg\")",
+            "description": "Modal dialog. open is a reactive $boolean binding — set to true to open, X/Escape/backdrop auto-closes. Put Form with buttons inside children."
+        }
+    },
+    "componentGroups": [
+        {
+            "name": "Layout",
+            "components": [
+                "Stack",
+                "Tabs",
+                "TabItem",
+                "Accordion",
+                "AccordionItem",
+                "Steps",
+                "StepsItem",
+                "Carousel",
+                "Separator",
+                "Modal"
+            ],
+            "notes": [
+                "- For grid-like layouts, use Stack with direction \"row\" and wrap set to true.",
+                "- Prefer justify \"start\" (or omit justify) with wrap=true for stable columns instead of uneven gutters.",
+                "- Use nested Stacks when you need explicit rows/sections.",
+                "- Show/hide sections: $editId != \"\" ? Card([editForm]) : null",
+                "- Modal: Modal(\"Title\", $showModal, [content]) — $showModal is boolean, X/Escape auto-closes. Put Form with its own buttons inside children.",
+                "- Use Tabs for alternative views (chart types, data sections) — no $variable needed",
+                "- Shared filter across Tabs: same $days binding in Query args works across all TabItems"
+            ]
+        },
+        {
+            "name": "Content",
+            "components": [
+                "Card",
+                "CardHeader",
+                "TextContent",
+                "MarkDownRenderer",
+                "Callout",
+                "TextCallout",
+                "Image",
+                "ImageBlock",
+                "ImageGallery",
+                "CodeBlock",
+                "InlineHeader"
+            ],
+            "notes": [
+                "- InlineHeader is a compact heading + description pair for labelling a block (lighter than CardHeader).",
+                "- Use Cards to group related KPIs or sections. Stack with direction \"row\" for side-by-side layouts.",
+                "- Success toast: Callout(\"success\", \"Saved\", \"Done.\", $showSuccess) — use @Set($showSuccess, true) in save action, auto-dismisses after 3s. For errors: result.status == \"error\" ? Callout(\"error\", \"Failed\", result.error) : null",
+                "- KPI card: Card([TextContent(\"Label\", \"small\"), TextContent(\"\" + @Count(@Filter(data.rows, \"field\", \"==\", \"value\")), \"large-heavy\")])"
+            ]
+        },
+        {
+            "name": "Tables",
+            "components": [
+                "Table",
+                "Col",
+                "EditableTable"
+            ],
+            "notes": [
+                "- EditableTable lets the user edit cells inline. Give it a unique name, columns of { type, key, header } with type one of text | number | date-single | select | url (select also needs options: [{ value, label }]).",
+                "- data is an array of { id, values } rows where values are ordered positionally to match columns. Edited data is submitted when the user clicks Save Changes.",
+                "- Table is COLUMN-oriented: Table([Col(\"Label\", dataArray), Col(\"Count\", countArray, \"number\")]). Use array pluck for data: data.rows.fieldName",
+                "- Col data can be component arrays for styled cells: Col(\"Status\", @Each(data.rows, \"item\", Tag(item.status, null, \"sm\", item.status == \"open\" ? \"success\" : \"danger\")))",
+                "- Row actions: Col(\"Actions\", @Each(data.rows, \"t\", Button(\"Edit\", Action([@Set($showEdit, true), @Set($editId, t.id)]))))",
+                "- Sortable: sorted = @Sort(data.rows, $sortField, \"desc\"). Bind $sortField to Select. Use sorted.fieldName for Col data",
+                "- Searchable: filtered = @Filter(data.rows, \"title\", \"contains\", $search). Bind $search to Input",
+                "- Chain sort + filter: filtered = @Filter(...) then sorted = @Sort(filtered, ...) — use sorted for both Table and Charts",
+                "- Empty state: @Count(data.rows) > 0 ? Table([...]) : TextContent(\"No data yet\")"
+            ]
+        },
+        {
+            "name": "Charts (2D)",
+            "components": [
+                "BarChart",
+                "LineChart",
+                "AreaChart",
+                "RadarChart",
+                "HorizontalBarChart",
+                "Series"
+            ],
+            "notes": [
+                "- Charts accept column arrays: LineChart(labels, [Series(\"Name\", values)]). Use array pluck: LineChart(data.rows.day, [Series(\"Views\", data.rows.views)])",
+                "- Use Cards to wrap charts with CardHeader for titled sections",
+                "- Chart + Table from same source: use @Sort or @Filter result for both LineChart and Table Col data",
+                "- Multiple chart views: use Tabs — Tabs([TabItem(\"line\", \"Line\", [LineChart(...)]), TabItem(\"bar\", \"Bar\", [BarChart(...)])])"
+            ]
+        },
+        {
+            "name": "Charts (1D)",
+            "components": [
+                "PieChart",
+                "RadialChart",
+                "SingleStackedBarChart",
+                "Slice"
+            ],
+            "notes": [
+                "- PieChart and BarChart need NUMBERS, not objects. For list data, use @Count(@Filter(...)) to aggregate:",
+                "- PieChart from list: `PieChart([\"Low\", \"Med\", \"High\"], [@Count(@Filter(data.rows, \"priority\", \"==\", \"low\")), @Count(@Filter(data.rows, \"priority\", \"==\", \"medium\")), @Count(@Filter(data.rows, \"priority\", \"==\", \"high\"))], \"donut\")`",
+                "- KPI from count: `TextContent(\"\" + @Count(@Filter(data.rows, \"status\", \"==\", \"open\")), \"large-heavy\")`"
+            ]
+        },
+        {
+            "name": "Charts (Scatter)",
+            "components": [
+                "ScatterChart",
+                "ScatterSeries",
+                "Point"
+            ]
+        },
+        {
+            "name": "Forms",
+            "components": [
+                "Form",
+                "FormControl",
+                "Label",
+                "Input",
+                "TextArea",
+                "Select",
+                "SelectItem",
+                "DatePicker",
+                "Slider",
+                "CheckBoxGroup",
+                "CheckBoxItem",
+                "RadioGroup",
+                "RadioItem",
+                "SwitchGroup",
+                "SwitchItem",
+                "Chips",
+                "ChipItem",
+                "OptionCards",
+                "OptionCard"
+            ],
+            "notes": [
+                "- Chips: compact single/multiple selection pills. Use ChipItem references for each option.",
+                "- OptionCards: larger selectable cards with title, subtitle and an optional Icon or Image on top. Use OptionCard references for each option.",
+                "- For Form fields, define EACH FormControl as its own reference — do NOT inline all controls in one array. This allows progressive field-by-field streaming.",
+                "- NEVER nest Form inside Form — each Form should be a standalone container.",
+                "- Form requires explicit buttons. Always pass a Buttons(...) reference as the third Form argument.",
+                "- rules is an optional object: {required: true, email: true, minLength: 8, maxLength: 100}",
+                "- Available rules: required, email, min, max, minLength, maxLength, pattern, url, numeric",
+                "- The renderer shows error messages automatically — do NOT generate error text in the UI",
+                "- Conditional fields: $country == \"US\" ? stateField : $country == \"UK\" ? postcodeField : addressField",
+                "- Edit form in Modal: Modal(\"Edit\", $showEdit, [Form(\"edit\", Buttons([saveBtn, cancelBtn]), [fields...])]). Save button should include @Set($showEdit, false) to close modal."
+            ]
+        },
+        {
+            "name": "Buttons",
+            "components": [
+                "Button",
+                "Buttons",
+                "IconButton"
+            ],
+            "notes": [
+                "- Icon renders a lucide icon by kebab-case name; it is also used as the icon of IconButton, IconText and OptionCard.",
+                "- Toggle in @Each: @Each(rows, \"t\", Button(t.status == \"open\" ? \"Close\" : \"Reopen\", Action([...])))"
+            ]
+        },
+        {
+            "name": "Data Display",
+            "components": [
+                "TagBlock",
+                "Tag",
+                "Icon",
+                "EntityList",
+                "ListBlock",
+                "ListItem"
+            ],
+            "notes": [
+                "- Color-mapped Tag: Tag(value, null, \"sm\", value == \"high\" ? \"danger\" : value == \"medium\" ? \"warning\" : \"neutral\")",
+                "- EntityList is a compact two-column list of { left, right } rows (e.g. name / value). size='default' also supports a header and footer row; size='small' does not.",
+                "- ListBlock is a numbered or image list of ListItem references. An action on ListItem is optional."
+            ]
+        },
+        {
+            "name": "Cards",
+            "components": [
+                "SnippetCardBlock",
+                "SnippetCardItem",
+                "OverviewCardBlock",
+                "OverviewCardItem",
+                "ContextCardBlock",
+                "ContextCardItem",
+                "CompositeCardBlock",
+                "CompositeCardItem",
+                "VisualCardBlock",
+                "VisualCardItem",
+                "Text",
+                "BoldText",
+                "IconText",
+                "ImageText",
+                "ImageTextLarge",
+                "MetricIndicatorInline",
+                "MetricIndicatorWithStrikethrough"
+            ],
+            "notes": [
+                "- Card blocks lay out 2+ items in a responsive grid (or carousel where supported). Every item in a block must have the same structure.",
+                "- SnippetCardItem: small card with lhs (IconText | ImageText) and optional rhs (Text | BoldText) — good for key/value facts.",
+                "- OverviewCardItem: small card with top (IconText | ImageText | Text) and optional bottom MetricIndicatorInline — good for KPIs.",
+                "- ContextCardItem: medium card with a title (string or Tag), body text and optional background image — good for summaries.",
+                "- CompositeCardItem: rich card with header, body array (Text, BoldText, MetricIndicatorInline, IconText, Image, charts, ListBlock, TagBlock, EntityList) and footer (price + Button) — good for products/offers.",
+                "- VisualCardItem: image-first card with a BoldText body and optional Tag.",
+                "- Text / BoldText / IconText / ImageText / ImageTextLarge / MetricIndicator* are the inline building blocks used INSIDE card items; do not place them directly in the root Card."
+            ]
+        }
+    ]
+};
+export const chatFullUIOptions = {
+    "examples": [
+        "Example 1 — Table (column-oriented):\n\nroot = Stack([title, tbl])\ntitle = TextContent(\"Top Languages\", \"large-heavy\")\ntbl = Table([Col(\"Language\", langs), Col(\"Users (M)\", users), Col(\"Year\", years)])\nlangs = [\"Python\", \"JavaScript\", \"Java\", \"TypeScript\", \"Go\"]\nusers = [15.7, 14.2, 12.1, 8.5, 5.2]\nyears = [1991, 1995, 1995, 2012, 2009]",
+        "Example 2 — Bar chart:\n\nroot = Stack([title, chart])\ntitle = TextContent(\"Q4 Revenue\", \"large-heavy\")\nchart = BarChart(labels, [s1, s2], \"grouped\")\nlabels = [\"Oct\", \"Nov\", \"Dec\"]\ns1 = Series(\"Product A\", [120, 150, 180])\ns2 = Series(\"Product B\", [90, 110, 140])",
+        "Example 3 — Form with validation:\n\nroot = Stack([title, form])\ntitle = TextContent(\"Contact Us\", \"large-heavy\")\nform = Form(\"contact\", btns, [nameField, emailField, countryField, msgField])\nnameField = FormControl(\"Name\", Input(\"name\", \"Your name\", \"text\", { required: true, minLength: 2 }))\nemailField = FormControl(\"Email\", Input(\"email\", \"you@example.com\", \"email\", { required: true, email: true }))\ncountryField = FormControl(\"Country\", Select(\"country\", countryOpts, \"Select...\", { required: true }))\nmsgField = FormControl(\"Message\", TextArea(\"message\", \"Tell us more...\", 4, { required: true, minLength: 10 }))\ncountryOpts = [SelectItem(\"us\", \"United States\"), SelectItem(\"uk\", \"United Kingdom\"), SelectItem(\"de\", \"Germany\")]\nbtns = Buttons([Button(\"Submit\", @ToAssistant(\"Submit\"), \"primary\"), Button(\"Cancel\", @ToAssistant(\"Cancel\"), \"secondary\")])",
+        "Example 4 — Tabs with mixed content:\n\nroot = Stack([title, tabs])\ntitle = TextContent(\"React vs Vue\", \"large-heavy\")\ntabs = Tabs([tabReact, tabVue])\ntabReact = TabItem(\"react\", \"React\", reactContent)\ntabVue = TabItem(\"vue\", \"Vue\", vueContent)\nreactContent = [TextContent(\"React is a library by Meta for building UIs.\"), Callout(\"info\", \"Note\", \"React uses JSX syntax.\")]\nvueContent = [TextContent(\"Vue is a progressive framework by Evan You.\"), Callout(\"success\", \"Tip\", \"Vue has a gentle learning curve.\")]",
+        "Example 5 — KPI and product cards:\n\nroot = Stack([kpiHeader, kpiBlock, productsHeader, productCards])\nkpiHeader = InlineHeader(\"This Month\", \"Key account metrics\")\nkpiBlock = SnippetCardBlock([kpi1, kpi2, kpi3])\nkpi1 = SnippetCardItem(\"revenue\", kpi1lhs, kpi1rhs)\nkpi1lhs = IconText(kpi1icon, \"neutral\", \"m\", \"Revenue\", \"Month to date\", false, \"horizontal\")\nkpi1icon = Icon(\"circle-dollar-sign\", \"finance\")\nkpi1rhs = BoldText(\"number\", \"$48,200\", \"+8.1%\", \"metric\")\nkpi2 = SnippetCardItem(\"active-users\", kpi2lhs, kpi2rhs)\nkpi2lhs = IconText(kpi2icon, \"neutral\", \"m\", \"Active Users\", \"This month\", false, \"horizontal\")\nkpi2icon = Icon(\"users\", \"people\")\nkpi2rhs = BoldText(\"number\", \"1,204\", \"+3.4%\", \"metric\")\nkpi3 = SnippetCardItem(\"churn\", kpi3lhs, kpi3rhs)\nkpi3lhs = IconText(kpi3icon, \"neutral\", \"m\", \"Churn\", \"This month\", false, \"horizontal\")\nkpi3icon = Icon(\"user-minus\", \"people\")\nkpi3rhs = BoldText(\"number\", \"1.8%\", \"-0.3%\", \"metric\")\nproductsHeader = InlineHeader(\"Top Products\", \"By units sold\")\nproductCards = CompositeCardBlock([p1, p2])\np1 = CompositeCardItem(\"widget-pro\", p1header, [p1body], p1footer)\np1header = IconText(p1icon, \"neutral\", \"m\", \"Widget Pro\", \"Best seller\", true, \"horizontal\")\np1icon = Icon(\"package\", \"shopping\")\np1body = MetricIndicatorInline(\"2,410 units\", \"Sold this month\", { direction: \"up\", value: 12 })\np1footer = { price: BoldText(\"text\", \"$29.00\"), button: p1btn }\np1btn = Button(\"View Details\", @ToAssistant(\"Show details for Widget Pro\"), \"secondary\")\np2 = CompositeCardItem(\"widget-mini\", p2header, [p2body], p2footer)\np2header = IconText(p2icon, \"neutral\", \"m\", \"Widget Mini\", \"New arrival\", true, \"horizontal\")\np2icon = Icon(\"box\", \"shopping\")\np2body = MetricIndicatorInline(\"980 units\", \"Sold this month\", { direction: \"up\", value: 4 })\np2footer = { price: BoldText(\"text\", \"$14.00\"), button: p2btn }\np2btn = Button(\"View Details\", @ToAssistant(\"Show details for Widget Mini\"), \"secondary\")",
+        "Example 6 — Editable table and a selection form:\n\nroot = Stack([tableHeader, editTable, formHeader, prefsForm])\ntableHeader = InlineHeader(\"Team Roster\", \"Click a cell to edit\")\neditTable = EditableTable(\"roster\", [colName, colRole, colStart], [row1, row2])\ncolName = { type: \"text\", key: \"name\", header: \"Name\" }\ncolRole = { type: \"select\", key: \"role\", header: \"Role\", options: [roleEng, roleDesign] }\nroleEng = { value: \"eng\", label: \"Engineering\" }\nroleDesign = { value: \"design\", label: \"Design\" }\ncolStart = { type: \"date-single\", key: \"start\", header: \"Start Date\" }\nrow1 = { id: \"1\", values: [\"Alex Kim\", \"eng\", \"2024-01-15\"] }\nrow2 = { id: \"2\", values: [\"Jamie Lee\", \"design\", \"2024-03-02\"] }\nformHeader = InlineHeader(\"Preferences\", \"Tell us how you like to work\")\nprefsForm = Form(\"prefs\", formButtons, [fc1, fc2])\nfc1 = FormControl(\"Working Style\", styleCards, \"Pick the one that fits best\")\nstyleCards = OptionCards(\"style\", \"single\", [style1, style2])\nstyle1 = OptionCard(\"focused\", \"Deep Focus\", \"Long uninterrupted blocks\", style1icon)\nstyle1icon = Icon(\"target\", \"tools\")\nstyle2 = OptionCard(\"collab\", \"Collaborative\", \"Frequent pairing and syncs\", style2icon)\nstyle2icon = Icon(\"users\", \"people\")\nfc2 = FormControl(\"Tools\", toolChips, \"Select all that apply\")\ntoolChips = Chips(\"tools\", \"multiple\", [tool1, tool2, tool3])\ntool1 = ChipItem(\"figma\", \"Figma\", tool1icon)\ntool1icon = Icon(\"figma\", \"design\")\ntool2 = ChipItem(\"slack\", \"Slack\", tool2icon)\ntool2icon = Icon(\"message-square\", \"communication\")\ntool3 = ChipItem(\"notion\", \"Notion\", tool3icon)\ntool3icon = Icon(\"notebook\", \"text\")\nformButtons = Buttons([Button(\"Save\", @ToAssistant(\"Save preferences\"), \"primary\")])"
+    ],
+    "additionalRules": [
+        "When asked about data, generate realistic/plausible data",
+        "For grid-like layouts, use Stack with direction \"row\" and wrap=true. Avoid justify=\"between\" unless you specifically want large gutters.",
+        "For forms, define one FormControl reference per field so controls can stream progressively.",
+        "For forms, always provide the second Form argument with Buttons(...) actions: Form(name, buttons, fields).",
+        "Never nest Form inside Form.",
+        "Use @Reset($var1, $var2) after form submit to restore defaults — not @Set($var, \"\")",
+        "Multi-query refresh: Action([@Run(mutation), @Run(query1), @Run(query2), @Reset(...)])",
+        "$variables are reactive: changing via Select or @Set re-evaluates all Queries and expressions referencing them",
+        "Use existing components (Tabs, Accordion, Modal) before inventing ternary show/hide patterns",
+        "Card blocks (SnippetCardBlock, OverviewCardBlock, ContextCardBlock, CompositeCardBlock, VisualCardBlock) need at least 2 items; every item in a block must have the same structure.",
+        "Text / BoldText / IconText / ImageText / ImageTextLarge / MetricIndicatorInline / MetricIndicatorWithStrikethrough are inline building blocks used INSIDE card items — do not place them directly in a Stack or Card.",
+        "EntityList size='small' (no header/footer) is only for use inside a CompositeCardItem body; use size='default' everywhere else.",
+        "Image URLs must be real (from a tool result or the user) — never invent or template an image URL.",
+        "Always pass a category to Icon — it enables a topical fallback when the exact icon name is unavailable.",
+        "EditableTable requires the consuming app to persist edits — use it only when the user or app explicitly asks for an editable table; default to Table for read-only data."
+    ]
+};

package/dist/server/shared/chatPresentation.js

@@ -1,6 +1,6 @@
 /** TD reply body stays readable to old clients; rich content is an explicit,
  * versioned opt-in, never guessed from terminal output or ordinary code fences. */
-export const CHAT_UI_VERSION = 1;
+export const CHAT_UI_VERSION = 2;
 const record = (value) => !!value && typeof value === 'object' && !Array.isArray(value);
 export function chatPresentation(content, metadata) {
     if (!record(metadata?.openui))
@@ -9,9 +9,10 @@ export function chatPresentation(content, metadata) {
         const body = JSON.parse(content);
         if (!record(body) || typeof body.text !== 'string' || !body.text.trim() || body.text.length > 32000)
             return { content: '这条回复暂时无法显示，请让对方重新发送文字说明。' };
-        if (metadata.openui.version !== CHAT_UI_VERSION || typeof body.ui !== 'string' || !body.ui.trim() || body.ui.length > 64000)
+        if ((metadata.openui.version !== 1 && metadata.openui.version !== CHAT_UI_VERSION) || typeof body.ui !== 'string' || !body.ui.trim() || body.ui.length > 64000)
             return { content: body.text };
-        return { content: body.text, ui: { version: CHAT_UI_VERSION, code: body.ui } };
+        return { content: body.text, ui: metadata.openui.version === 1 ? { version: 1, code: body.ui }
+                : { version: 2, code: body.ui, streaming: metadata.openui.streaming === true, revision: Number.isSafeInteger(metadata.openui.revision) ? Number(metadata.openui.revision) : 0 } };
     }
     catch {
         return { content: '这条回复暂时无法显示，请让对方重新发送文字说明。' };