Spaces:

saivivek6
/

AdaptiveUI_UX

Running

App Files Files Community

saivivek6 commited on 3 days ago

Commit

669d696

1 Parent(s): abd3ca3

Deploy: components-only (no HTML), 33 chart kinds incl 3D/rose/tree, HTML export, robustness + no-fabrication/no-JSON-leak (rebuilt dist)

Browse files

Files changed (28) hide show

vivek/.gitignore +3 -0
vivek/backend/combined_prompt.py +44 -301
vivek/backend/config.py +1 -1
vivek/backend/server.py +16 -108
vivek/frontend-vue/dist/assets/ActionRow-B9EJZ-NA.js +0 -1
vivek/frontend-vue/dist/assets/ActionRow-D2v3mo3f.js +1 -0
vivek/frontend-vue/dist/assets/ChartBlock-CdTvHCQ6.js +0 -0
vivek/frontend-vue/dist/assets/ChartBlock-zIyaBwdN.js +0 -1
vivek/frontend-vue/dist/assets/index-39HK7jxF.css +0 -0
vivek/frontend-vue/dist/assets/{index-DxH9q0Bt.js → index-DE9MARTs.js} +0 -0
vivek/frontend-vue/dist/assets/index-yy7aehFb.css +0 -0
vivek/frontend-vue/dist/index.html +2 -2
vivek/frontend-vue/package-lock.json +19 -0
vivek/frontend-vue/package.json +1 -0
vivek/frontend-vue/src/components/AnalyticsPanel.vue +1 -1
vivek/frontend-vue/src/components/LiveWidgetFrame.vue +0 -111
vivek/frontend-vue/src/components/LiveWidgetSchema.vue +0 -213
vivek/frontend-vue/src/components/WidgetRegistryRenderer.vue +114 -27
vivek/frontend-vue/src/components/WidgetSchemaChart.vue +5 -507
vivek/frontend-vue/src/components/widgets/ActionRow.vue +9 -2
vivek/frontend-vue/src/lib/analyticsStore.ts +6 -6
vivek/frontend-vue/src/lib/echartsOption.ts +727 -0
vivek/frontend-vue/src/lib/exportWidgetHtml.ts +264 -0
vivek/frontend-vue/src/lib/progressiveWidget.ts +0 -25
vivek/frontend-vue/src/pages/Analytics.vue +4 -4
vivek/frontend-vue/src/pages/Chat.vue +92 -168
vivek/frontend-vue/src/widget-registry.json +33 -5
vivek/strategies.json +1 -1

vivek/.gitignore CHANGED Viewed

@@ -30,3 +30,6 @@ Thumbs.db
 # adaptiveui.sqlite3 is tracked for GitHub (demo_vivek). Do not push that branch to
 # Hugging Face origin — their hook rejects binary sqlite in git.

 # adaptiveui.sqlite3 is tracked for GitHub (demo_vivek). Do not push that branch to
 # Hugging Face origin — their hook rejects binary sqlite in git.
+# Binary vector store (regenerable; never commit)
+rag_finance/chroma_db/

vivek/backend/combined_prompt.py CHANGED Viewed

@@ -23,7 +23,6 @@ from pathlib import Path
 from typing import Any, Tuple
 from . import config
-from .widget_prompt import inject_design_system
 def strip_widget_markdown_fences(raw: str) -> str:
@@ -191,12 +190,23 @@ def _chart_has_data(chart: dict[str, Any]) -> bool:
         return _nonempty_list(chart.get("boxes"))
     if kind in {"sankey", "graph"}:
         return _nonempty_list(chart.get("links"))
-    if kind in {"pie", "donut", "funnel", "treemap", "sunburst", "waterfall", "gauge"}:
         if _nonempty_list(chart.get("items")):
             return True
         s = chart.get("series")
         return isinstance(s, list) and any(isinstance(x, dict) and x.get("values") for x in s)
     # line | bar | hbar | area | scatter | bubble | stacked | combo | histogram | radar
     s = chart.get("series")
     return isinstance(s, list) and any(
         isinstance(x, dict) and isinstance(x.get("values"), list) and len(x.get("values")) for x in s
@@ -308,41 +318,6 @@ def widget_schema_json_is_valid(schema_str: str) -> bool:
     return isinstance(o, dict) and isinstance(o.get("layout"), list)
-def extract_embeddable_html_document(raw: str) -> str | None:
-    """
-    If the model put HTML/JS widgets inside <WIDGET> while WIDGET_MODE=json, return a full HTML
-    document suitable for inject_design_system + iframe. Otherwise None.
-    """
-    s = strip_widget_markdown_fences((raw or "").strip())
-    if not s or "<" not in s or ">" not in s:
-        return None
-    st = s.lstrip()
-    if st.startswith("{") and "<div" not in s.lower() and "<html" not in s.lower():
-        return None
-    low = s.lower()
-    if "<html" in low or "<!doctype" in low:
-        return re.sub(r"<!DOCTYPE[^>]*>", "", s, flags=re.IGNORECASE).strip()
-    if any(
-        tag in low
-        for tag in (
-            "<script",
-            "<body",
-            "<div",
-            "<canvas",
-            "<iframe",
-            "<form",
-            "<input",
-            "<button",
-            "<style",
-        )
-    ):
-        inner = re.sub(r"<!DOCTYPE[^>]*>", "", s, flags=re.IGNORECASE).strip()
-        if "<html" not in inner.lower():
-            return f"<html><head></head><body>{inner}</body></html>"
-        return inner
-    return None
 def finalize_widget_schema_json(raw: str) -> str:
     """
     Normalize model output for the Vue renderer: strip fences, extract JSON, coerce layout.
@@ -397,7 +372,8 @@ Honoring an explicitly requested chart type:
 - Never pretend an unsupported type is supported, and never relabel a different chart as the requested type.
 Interactivity:
-- Use action_row buttons to request follow-ups via intent strings (e.g., "explain_methodology", "show_risks").
 - OUTPUT JSON ONLY. Never output HTML, <script>, <style>, <canvas>, raw markup, or code inside <WIDGET> — only the JSON schema above. There is no HTML mode.
 - If something cannot be expressed with the supported block types (e.g. a playable game, live sliders), DO NOT invent HTML — return <WIDGET></WIDGET> (empty) and explain in <RESPONSE> instead. Never dump raw index arrays like `[0,1,2]`.
 - For photographs, diagrams, or icons, use the `image` block with a valid https:// URL or a data: URI. Combine `image` with `text`, `chart`, and `table` blocks as needed.
@@ -416,12 +392,24 @@ Dynamic layout (JSON) — avoid static, single-block dashboards:
 _REGISTRY_JSON_PATH = Path(__file__).resolve().parent.parent / "frontend-vue" / "src" / "widget-registry.json"
 _JSON_RULE_PREAMBLE = """WIDGET JSON SCHEMA MODE (WIDGET_MODE=json):
 - The content inside <WIDGET> MUST be valid JSON (no markdown fences, no comments).
 - Root object: { "version": "1.0", "layout": [ ... ] }
 - layout is an ordered array of blocks (top-to-bottom).
 - Supported block types ONLY (do not invent new ones):"""
 _JSON_RULE_TRAILER = """
 Data grounding (STRICT — the widget must mirror your <RESPONSE>):
 - Use ONLY the exact numbers and labels stated in your <RESPONSE>. Do NOT invent values, round differently, or add labels/values not written in <RESPONSE>.
 - For category charts, "x_categories" MUST be the exact entity/segment names you named in <RESPONSE> (e.g. "Data Center", "Gaming") — NEVER 0, 1, 2. Each series value MUST equal the number in <RESPONSE>, aligned to those categories.
@@ -434,7 +422,8 @@ Honoring an explicitly requested chart type:
 - Never pretend an unsupported type is supported, and never relabel a different chart as the requested type.
 Interactivity:
-- Use action_row buttons to request follow-ups via intent strings (e.g., "explain_methodology", "show_risks").
 - OUTPUT JSON ONLY. Never output HTML, <script>, <style>, <canvas>, raw markup, or code inside <WIDGET> — only the JSON schema above. There is no HTML mode.
 - If something cannot be expressed with the supported block types (e.g. a playable game, live sliders), DO NOT invent HTML — return <WIDGET></WIDGET> (empty) and explain in <RESPONSE> instead. Never dump raw index arrays like `[0,1,2]`.
 - For photographs, diagrams, or icons, use the `image` block with a valid https:// URL or a data: URI. Combine `image` with `text`, `chart`, and `table` blocks as needed.
@@ -471,61 +460,6 @@ def build_json_widget_rule() -> str:
         return _JSON_WIDGET_RULE.strip()
-# ── Design system injected into combined output ────────────────────────────
-_DESIGN_SYSTEM_REMINDER = """
-A CSS design system is pre-injected into every widget iframe. Use ONLY these variables:
---bg, --bg2, --bg3 (backgrounds)  --text, --text2, --text3 (text)
---border, --border2 (borders)     --accent, --accent-bg, --accent-b (blue)
---success, --success-bg (green)   --warn, --warn-bg (amber)
---danger, --danger-bg (red)       --radius, --radius-sm, --radius-pill
-Pre-built CSS classes (use them directly, no need to redefine):
-.card .raised .card-title .tabs .tab .panel .search .pills .pill
-.ctrl-row .ctrl-lbl .ctrl-val .btn-group .btn .ask-btn
-.badge .b-blue .b-green .b-amber .b-red .b-gray
-.metric-grid .metric .metric-lbl .metric-val
-.progress-wrap .progress-bar .result-box .result-lbl .result-val .result-sub
-.step-row .step-num .step-title .step-desc .count-lbl .empty
-"""
-_SENDPROMPT_RULE = """
-Always define and use this exact bridge function inside <WIDGET>:
-  function sendPrompt(t){window.parent.postMessage({type:"streamlit:setComponentValue",value:t},"*");}
-Every clickable card, row, chip, and button must call sendPrompt with a specific, contextual message.
-"""
-_REACTIVE_RUNTIME_RULE = """
-Universal reactive mini-app contract (follow for every widget):
-- Your widget MUST follow this exact execution model:
-  1) Define:
-     - const data = ...      // embedded data derived ONLY from user/context and your <RESPONSE>
-     - const state = {...}   // ALL user inputs (sliders/filters/selections). Initial values must match exact numbers you used in <RESPONSE>.
-  2) Implement:
-     - function compute(state, data) { return {...} }  // pure transforms: filter/aggregate/calc/sort. No network.
-     - function render() { const c = compute(state, data); ... update DOM + chart + table from c ... }
-  3) On load: always call render() once so the widget is never empty.
-  4) On interaction: update state -> call render() immediately (instant UX; never call the LLM on slider drag).
-  5) sendPrompt: ONLY when new knowledge/data is required. Include current state in the prompt.
-Charts:
-- Use any public chart/library CDN from cdnjs.cloudflare.com, cdn.jsdelivr.net, unpkg.com, or cdn.plot.ly.
-- Chart backgrounds must be transparent for iframe embedding.
-- ECharts (preferred): https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js
-- Plotly, D3, Chart.js, ApexCharts, and other public viz libraries are allowed.
-Forbidden (never include):
-- fetch / XMLHttpRequest / WebSocket
-- eval / new Function
-"""
-_DYNAMIC_WIDGET_UX_RULE = """
-Dynamic, responsive widgets (not static posters):
-- Layout: use flex/grid with wrap, minmax(), and clamp() so content reflows when the iframe is narrow or wide. Prefer fluid widths (%, fr, max-width) over fixed pixel widths for main columns.
-- Motion & feedback: add CSS transitions on hover/focus for cards, buttons, and controls; subtle transform (translateY) on hover where it aids affordance. Enable chart library animation (e.g. ECharts animation / animationDuration) so series draw in smoothly.
-- Interactivity: expose meaningful controls — tabs, toggles, filters, sliders, dataZoom/brush on charts when data density warrants it. When state changes, re-render charts/tables immediately (same reactive pattern as sliders).
-- Depth: combine visuals (chart + KPI strip + short table + optional image/diagram) when the answer benefits; vary structure by use case instead of repeating one template every turn.
-"""
 _OUTPUT_CONTRACT_STRICT = """
 OUTPUT CONTRACT (STRICT — MUST FOLLOW)
@@ -545,85 +479,6 @@ Rules:
 If you fail to follow this contract, the system will break.
 """
-_LIBRARIES_RULE = """
-Allowed libraries for <WIDGET> — use any public CDN from cdnjs.cloudflare.com, cdn.jsdelivr.net, unpkg.com, or cdn.plot.ly.
-Use whichever library produces the best visual for the use case. You may combine libraries (e.g. ECharts + Tabulator).
-Recommended (pick the best fit):
-- ECharts: https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js
-- Plotly.js: https://cdn.plot.ly/plotly-2.30.0.min.js
-- D3.js: https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js
-- Chart.js: https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js
-- ApexCharts: https://cdn.jsdelivr.net/npm/apexcharts
-- Tabulator (tables): https://cdn.jsdelivr.net/npm/tabulator-tables/dist/js/tabulator.min.js + CSS
-- Mermaid (flowcharts, sequence diagrams): https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js
-- Three.js (simple 3D): https://cdn.jsdelivr.net/npm/three/build/three.min.js
-You may use any other public library from these CDNs. Choose the library that creates the best, most accurate visualization.
-Color + theming baseline (applies to every engine):
-- Always define a JS palette (array of hex colors) and apply it explicitly to series/marks.
-- Detect dark mode with: const dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-- Explicitly set: axis label color, grid line color, legend text color, and tooltip styling.
-Library choice guidance (use the best fit; do not force the same layout every time):
-- Time-series trends (date/time x-axis, >=5 points): ECharts line/area + tooltip + subtle dataZoom.
-- Categorical rankings (categories with numeric values): ECharts horizontal bar + click-to-filter + cross-filter table.
-- Composition/share: stacked bars (or 100% stacked) with tooltip value + %; pie/donut only when 3–5 short categories.
-- Distributions:
-  - if you have raw samples: histogram-like bins
-  - if you only have summary stats: do not invent bins; use KPI tiles + short explanation.
-- Correlation/relationship (x-y pairs): ECharts scatter; highlight outliers.
-- Hierarchies: treemap only when parent/child is explicit; otherwise use grouped table.
-- Many series: avoid clutter; use small multiples or series toggles (do not plot >6 lines by default).
-- Tables: Tabulator always for scan/sort/filter when it helps (rows > 8 or user asked for a breakdown).
-- Prose/conceptual answers with no extractable dataset: still generate a widget using illustrative/mock data and label it clearly (e.g. "Example", "Illustrative", "Mock data").
-Engine-specific rendering requirements:
-- ECharts: option.backgroundColor must be 'transparent'; set textStyle/axis/grid colors from theme.
-- Plotly: set paper_bgcolor/plot_bgcolor to 'rgba(0,0,0,0)'; set layout.font.color and layout.colorway=palette.
-- D3: create SVG with responsive sizing; set tooltip styles; apply palette for strokes/fills.
-"""
-_ANALYTICS_DEFAULTS_RULE = """
-Dashboard decision policy (data-driven; do this internally—do not output the reasoning):
-1) DATASET EXTRACTION:
-   - Prefer data from: (a) user request/context, (b) numeric values in <RESPONSE>.
-   - If sufficient data exists, use it. If not, use illustrative/mock data — but you MUST clearly label it (e.g. "Example data", "Mock data", "Illustrative") in the widget title or a visible subtitle.
-2) DATA-SHAPE DETECTION:
-   - Determine shape: time-series, categorical ranking, composition, distribution, correlation, hierarchy, steps/process, or other.
-3) WIDGET WARRANT:
-   - Generate a widget wherever there is possibility. If extractable data exists, use it.
-   - If no extractable dataset (or too few points): use illustrative/mock data and clearly label it (e.g. "Example data", "Mock data", "Illustrative"). Do NOT return empty <WIDGET></WIDGET> when a chart/calculator/table would help.
-4) BI LAYOUT (only when warranted):
-   - KPI row (3–6 tiles) → optional Controls row → Primary visualization → optional detail table → Insights (2–4).
-5) CROSS-VIEW INTERACTION:
-   - Any filter/control must update KPIs + chart + table from the SAME filtered dataset.
-6) DRILLDOWN LOOP:
-   - Click chart mark / legend / table row → sendPrompt('...') with clicked entity + metric + relevant time window (if present) + current filter summary.
-7) INSIGHT RULE:
-   - Insights must be computed from the dataset in JS (or computed from extracted values). Do not write obvious generic commentary.
-"""
-_COLOR_THEMING_RULE = """
-Color & theming (best-in-class readability + polish):
-- You may choose ANY colors, but they MUST remain readable and “enterprise clean”.
-- Detect dark mode with: const dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-- Create theme tokens in JS:
-  - text = dark ? '#e8eaf4' : '#111318'
-  - text2 = dark ? '#8d93aa' : '#5a5f72'
-  - grid = dark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.06)'
-  - border = dark ? 'rgba(255,255,255,0.10)' : 'rgba(0,0,0,0.10)'
-- Define palette in JS (hex array) and use it explicitly.
-- Deterministic category coloring:
-  - Build `colorMap` from category keys to palette entries (stable ordering).
-  - Reuse the same `colorMap` for KPIs and chart series/marks.
-- Selection/interaction states:
-  - Hover: subtle opacity/brightness change
-  - Selected: stronger accent (thicker stroke/line), not neon
-- Grid/labels must always be visible: explicitly set label/text/grid colors for the chart engine.
-"""
 # Strict bandit primitive: extra lines for <RESPONSE> when STRICT_PRIMITIVES is on (prompt-only).
 _STRICT_PRIMITIVE_EXTRAS: dict[str, str] = {
     "structured_bullets": (
@@ -647,8 +502,8 @@ _STRICT_PRIMITIVE_EXTRAS: dict[str, str] = {
         "No section titles, bullets, or paragraphs outside the table. Do not put JSON in <RESPONSE>."
     ),
     "visualization": (
-        "Output ONLY one markdown fenced code block (triple backticks). Inside: ASCII bar chart (#) and/or "
-        "aligned text columns. Do not put raw JSON in <RESPONSE>. No prose outside that single code block."
     ),
 }
@@ -704,7 +559,6 @@ def build_combined_system_prompt(
     format_rule: str,
     primitive_extra_context: str,
     user_message: str,
-    widget_required: bool = True,
     forbidden_components: list[str] | None = None,
     required_components: list[str] | None = None,
 ) -> str:
@@ -765,58 +619,12 @@ The user's message is only a greeting, thanks, acknowledgement, or goodbye.
 ═══════════════════════════════════════════════════════
 """
-    widget_mode = getattr(config, "WIDGET_MODE", "json").strip().lower()
-    widget_format_line = (
-        "Complete self-contained HTML document for the interactive widget"
-        if widget_mode != "json"
-        else "JSON UI schema ONLY (no HTML) for the widget"
-    )
-    widget_rules_header = (
-        "WIDGET RULES — for the HTML inside <WIDGET>"
-        if widget_mode != "json"
-        else "WIDGET RULES — for the JSON schema inside <WIDGET>"
-    )
-    widget_requirement_block = (
-        "WIDGET REQUIRED for this user turn: return a NON-EMPTY widget."
-        if widget_required
-        else "WIDGET OPTIONAL for this user turn: return <WIDGET></WIDGET> if the turn is better as text-only."
-    )
-    widget_rules_body = (
-        f"""- Hard output contract (never violate):
-  - You MUST output BOTH tags exactly once: <RESPONSE>...</RESPONSE> and <WIDGET>...</WIDGET>.
-  - Never omit <WIDGET> tags. For text-only turns, output `<WIDGET></WIDGET>`.
-- {widget_requirement_block}
-- Choose the UI based on the content in <RESPONSE> (data-driven). Do not follow any fixed template.
-- IMPORTANT: In HTML mode, the content inside <WIDGET> MUST be HTML (not JSON). It must contain opening <html> and closing </html>.
-- Return a COMPLETE, self-contained HTML document (opening <html> to closing </html>).
-- Inline ALL CSS in <style> and ALL JS in <script>. External files: use any public CDN (cdnjs, jsdelivr, unpkg, cdn.plot.ly) for charts, tables, and other libraries.
-- Visuals — use freely when they clarify the answer: <img> (https:// or data:image/...), inline <svg>, <figure>/<figcaption>, <picture>, <canvas> for drawings, and background-image in CSS (url() to https or data URIs). For diagrams/flowcharts you may embed SVG markup or use canvas/D3/Mermaid via CDN. Attribute image sources when the license requires it.
-- {_LIBRARIES_RULE.strip()}
-- {_ANALYTICS_DEFAULTS_RULE.strip()}
-- {_COLOR_THEMING_RULE.strip()}
-- No frameworks (React/Vue/jQuery). Plain HTML + CSS + JS only.
-- body background must be transparent (background:transparent!important).
-- No position:fixed anywhere.
-- Wrap content in <div class="widget-root">.
-- No markdown fences/backticks inside <WIDGET>. Use ONLY raw HTML/CSS/JS.
-- Always call your main render/calc function once on page load so output is never empty (e.g., call `init()` or `render()` at the end of <script>).
-- Charts/tables must be drawn from the embedded dataset immediately after the first render call.
-- {_DYNAMIC_WIDGET_UX_RULE.strip()}
-- Slider/input changes → local calc() only (never sendPrompt on drag).
-- Slider initial values MUST match the exact numbers in your <RESPONSE>. Never invent defaults.
-- Use 0.5px solid borders — never 1px solid.
-- UI (HTML/CSS): use CSS variables only (no hardcoded hex/rgb). Charts (ECharts/Plotly/Chart.js): you MAY use hex colors in JS configs for palettes/series.
-- NO EMOJIS — never use emojis in widgets or labels. Use text only.
-- Neat and clean for any data: light backgrounds (#F5F5F5, #F2F2F2), clear typography, generous spacing. Minimal, professional layout. No decorative icons or clutter.
-{_REACTIVE_RUNTIME_RULE}
-{_DESIGN_SYSTEM_REMINDER}
-{_SENDPROMPT_RULE}"""
-        if widget_mode != "json"
-        else build_json_widget_rule()
-    )
     combined_max_tokens = getattr(config, "COMBINED_MAX_TOKENS", 7500)
     token_limit_block = f"""
@@ -826,49 +634,14 @@ TOKEN LIMIT — you have ~{combined_max_tokens} tokens total for <RESPONSE> + <W
 - For comparison tables in <RESPONSE>: keep focused so the widget has room. Both must fit.
 """
-    return f"""You are an expert AI assistant with rich, dynamic interactive output — widgets should feel alive, responsive, and tailored to each question (not repetitive templates).
 {social_turn_banner}
 Output style: No emojis. Neat, clean, professional — in both <RESPONSE> text and <WIDGET>.
 {token_limit_block}
 {_OUTPUT_CONTRACT_STRICT}
-For every response you produce TWO sections in one generation.
-The widget block may be empty for text-only turns where interactivity is not helpful.
-CRITICAL — Never describe a widget you do not generate. If your <RESPONSE> mentions "the dashboard below", "interactive chart", "explore visually", or anything that implies a visualization exists, you MUST output a complete, non-empty <WIDGET>. Do NOT say "the dashboard below" if you return empty <WIDGET></WIDGET>. Either generate the full widget HTML or do not mention it in the text at all.
-Only return an EMPTY widget block (<WIDGET></WIDGET>) when the turn is not “widget-worthy”:
-- greetings (hi, hello, hey), acknowledgements (thanks, ok, got it), goodbyes (bye, goodbye), pure chit-chat — on these turns do NOT apply the bandit Strategy/Rule to <RESPONSE>; use a short natural reply
-- conceptual Q&A with no dataset/comparison/actionable metrics
-- planning/roadmap/implementation-step requests where prose is the primary output
-Infer from the user's question and your <RESPONSE> content whether a widget would help. If your <RESPONSE> has structure, numbers, comparisons, or decision support, generate the best-fit widget.
-Widget warrant decision checklist:
-- Generate NON-EMPTY widget if the user asks for charts, dashboard, analytics, comparison, trends, KPIs, forecasting, ranking, tabular breakdown, numeric exploration, diagrams, illustrations, or images that support the answer.
-- Generate NON-EMPTY widget if your response includes measurable values that benefit from visual or interactive interpretation.
-- Return EMPTY widget for pure explanation/definition/planning where a chart would be decorative noise.
-Understand the user's intent. When the question implies visualization, calculation, comparison, or learning, generate a NON-EMPTY <WIDGET>.
-Chart/visual selection — pick the right type for the data and use case:
-| Data / use case | Best widget type | Library |
-|-----------------|------------------|---------|
-| Time-series, trends | Line or area chart | ECharts, Plotly, Chart.js |
-| Categorical comparison | Bar chart (horizontal) | ECharts, Chart.js, ApexCharts |
-| Part of whole | Pie, donut, stacked bar | ECharts, Chart.js |
-| Correlation, x-y | Scatter plot | ECharts, Plotly, D3 |
-| Adjustable numbers, formulas | Interactive calculator with sliders | Plain JS + Chart.js/ECharts |
-| Rows > 8, breakdown | Tabulator table | Tabulator |
-| KPI metrics | KPI tiles + optional chart | CSS + ECharts |
-| Process, flow | Diagram, sankey, funnel | D3, ECharts |
-| Photo, illustration, icon | <img> / inline SVG / image block (JSON) | https or data URI |
-Libraries: ECharts (cdn.jsdelivr.net/npm/echarts), Plotly (cdn.plot.ly), Chart.js (cdnjs), Tabulator (tabulator.info). Pick what fits.
-One chart vs multiple: Use one chart/widget when it suffices. Add more only when each adds distinct value. Never duplicate the same data in multiple chart types.
-CRITICAL — Complete the widget: Never truncate or stop mid-generation. The <WIDGET> must be a complete, functional HTML document. If space is tight, shorten <RESPONSE> — the widget must always finish.
 ═══════════════════════════════════════════════════════
 OUTPUT FORMAT — always use exactly this structure
 ═══════════════════════════════════════════════════════
@@ -885,35 +658,18 @@ RESPONSE FORMAT RULE — {response_rule_line}
 Strategy: {strategy_id}
 Rule: {format_rule}
 Do not mention this rule. Do not add <WIDGET> inside <RESPONSE>.
 CRITICAL — Primitives vs Widget (never confuse these):
 - The Strategy/Rule above applies ONLY to <RESPONSE> (text format: bullets, table, prose, etc.). It does NOT constrain <WIDGET>.
-- <WIDGET> is SEPARATE and INDEPENDENT. Generate a widget wherever there is possibility, based on content — never skip a widget because the text format is "table" or "prose". Widget choice (chart, calculator, table) depends on content, not on the primitive.
 ═══════════════════════════════════════════════════════
 {widget_rules_header}
 ═══════════════════════════════════════════════════════
 {widget_rules_body}
 {widget_block}
-{constraint_block}
-═══════════════════════════════════════════════════════
-DATA GROUNDING — most critical quality rule
-═══════════════════════════════════════════════════════
-Every entity, name, number, ticker, percentage shown in the widget MUST come from either:
-  - the numeric values you extracted from the user request/context, OR
-  - the numeric values present in your <RESPONSE>, OR
-  - (for educational/concept demos only) reasonable illustrative values you choose (e.g. P=1000, r=5%, t=10 for compound interest).
-- Use meaningful labels (Principal, Rate, Years). When using mock data, clearly label it (e.g. "Example", "Mock data").
-- When real data is missing: you MAY use illustrative/mock data; label it clearly in the widget.
-- Prefer data from <RESPONSE> or user context; when unavailable, use mock/illustrative data and label it.
-- When using mock/illustrative data (dates, tickers, values), label it clearly “e.g. Example data, Mock data”.
-═══════════════════════════════���═══════════════════════
-sendPrompt specificity — always specific, never generic
-═══════════════════════════════════════════════════════
-GOOD: sendPrompt('What are the risks of VTI at 0.03% expense ratio?')
-BAD:  sendPrompt('Tell me more')
-BAD:  sendPrompt('Click for details')
-"""
 def build_combined_user_prompt(
@@ -963,23 +719,10 @@ def parse_combined_output(raw: str) -> Tuple[str, str]:
         else:
             response_text = raw.strip()
-    # Extract <WIDGET>...</WIDGET>
     widget_match = re.search(r"<WIDGET>(.*?)</WIDGET>", raw, re.DOTALL | re.IGNORECASE)
     if widget_match:
         raw_widget = widget_match.group(1).strip()
-        widget_mode = getattr(config, "WIDGET_MODE", "json").strip().lower()
-        if widget_mode == "json":
-            widget_payload = finalize_widget_schema_json(raw_widget)
-        else:
-            # HTML mode: strip markdown fences if model wrapped widget in ```...```
-            if "```" in raw_widget:
-                fence = re.search(r"```(?:json|html)?\s*(.*?)```", raw_widget, re.DOTALL | re.IGNORECASE)
-                raw_widget = fence.group(1).strip() if fence else re.sub(r"```\w*", "", raw_widget).strip()
-            if "<" in raw_widget and ">" in raw_widget:
-                if "<html" not in raw_widget.lower():
-                    raw_widget = f"<html><head></head><body>{raw_widget}</body></html>"
-                raw_widget = re.sub(r"<!DOCTYPE[^>]*>", "", raw_widget, flags=re.IGNORECASE).strip()
-                widget_payload = inject_design_system(raw_widget)
     return response_text, widget_payload

 from typing import Any, Tuple
 from . import config
 def strip_widget_markdown_fences(raw: str) -> str:
         return _nonempty_list(chart.get("boxes"))
     if kind in {"sankey", "graph"}:
         return _nonempty_list(chart.get("links"))
+    if kind in {"tree", "mindmap", "org", "orgchart"}:
+        # Accept the same variants the renderer reads: root | tree | data | top-level node | items.
+        root = chart.get("root") or chart.get("tree") or chart.get("data")
+        if isinstance(root, list):
+            root = root[0] if root else None
+        if isinstance(root, dict) and (root.get("name") or root.get("label") or root.get("children")):
+            return True
+        if chart.get("name") or _nonempty_list(chart.get("children")) or _nonempty_list(chart.get("items")):
+            return True
+        return False
+    if kind in {"pie", "donut", "funnel", "treemap", "sunburst", "waterfall", "gauge", "rose"}:
         if _nonempty_list(chart.get("items")):
             return True
         s = chart.get("series")
         return isinstance(s, list) and any(isinstance(x, dict) and x.get("values") for x in s)
     # line | bar | hbar | area | scatter | bubble | stacked | combo | histogram | radar
+    # | timeseries | polar | parallel | themeriver | scatter3d | bar3d | line3d
     s = chart.get("series")
     return isinstance(s, list) and any(
         isinstance(x, dict) and isinstance(x.get("values"), list) and len(x.get("values")) for x in s
     return isinstance(o, dict) and isinstance(o.get("layout"), list)
 def finalize_widget_schema_json(raw: str) -> str:
     """
     Normalize model output for the Vue renderer: strip fences, extract JSON, coerce layout.
 - Never pretend an unsupported type is supported, and never relabel a different chart as the requested type.
 Interactivity:
+- action_row buttons are VISUALS-ONLY: each button must only offer to redraw the data ALREADY shown as a different supported chart kind (e.g. "Show as bar chart", "View as treemap", "Show as pie", "View as horizontal bars"). The button label is sent back as the next prompt, so it must be something you can definitely do with the data on screen.
+- NEVER add action buttons that need data you may not have: no new tickers/companies, no new time periods, no "compare X vs Y", no growth/peers/forecasts, no "explain ...". If no alternative chart kind fits the data, omit the action_row.
 - OUTPUT JSON ONLY. Never output HTML, <script>, <style>, <canvas>, raw markup, or code inside <WIDGET> — only the JSON schema above. There is no HTML mode.
 - If something cannot be expressed with the supported block types (e.g. a playable game, live sliders), DO NOT invent HTML — return <WIDGET></WIDGET> (empty) and explain in <RESPONSE> instead. Never dump raw index arrays like `[0,1,2]`.
 - For photographs, diagrams, or icons, use the `image` block with a valid https:// URL or a data: URI. Combine `image` with `text`, `chart`, and `table` blocks as needed.
 _REGISTRY_JSON_PATH = Path(__file__).resolve().parent.parent / "frontend-vue" / "src" / "widget-registry.json"
 _JSON_RULE_PREAMBLE = """WIDGET JSON SCHEMA MODE (WIDGET_MODE=json):
+- WIDGET WARRANT (decide for yourself — there is no keyword trigger):
+  Include a NON-EMPTY widget ONLY IF both are true: (1) a visual materially helps (a comparison of
+  several numbers, a trend, a breakdown/share, a flow, or a matrix), AND (2) you can populate it with
+  real values from your <RESPONSE> using the supported block types below. If you cannot build it from
+  the allowed blocks (or there is no concrete data), return <WIDGET></WIDGET> (empty) and say so in
+  <RESPONSE>. Do NOT chart a single number, a definition, a yes/no, or an opinion.
 - The content inside <WIDGET> MUST be valid JSON (no markdown fences, no comments).
 - Root object: { "version": "1.0", "layout": [ ... ] }
 - layout is an ordered array of blocks (top-to-bottom).
 - Supported block types ONLY (do not invent new ones):"""
 _JSON_RULE_TRAILER = """
+NO FABRICATED DATA (most important — applies to <RESPONSE> and <WIDGET>):
+- If you do NOT actually have the real figures to answer (e.g. live or historical stock prices, a fund's daily returns, exact financials you are not sure of), DO NOT invent, estimate, or use "illustrative"/"mock"/"example"/"est." data, and DO NOT draw a widget.
+- In that case: say plainly in <RESPONSE> that you do not have that specific data, suggest what the user could provide or ask instead, and return <WIDGET></WIDGET> (empty).
+- NEVER label a chart or value "mock", "illustrative", "estimated", or "example" — if it is not real, do not render it. A widget must only ever show real, known values.
+- Educational math demos (e.g. compound-interest with user-given P/r/t) are fine because the user supplied the inputs; market data you don't have is NOT.
 Data grounding (STRICT — the widget must mirror your <RESPONSE>):
 - Use ONLY the exact numbers and labels stated in your <RESPONSE>. Do NOT invent values, round differently, or add labels/values not written in <RESPONSE>.
 - For category charts, "x_categories" MUST be the exact entity/segment names you named in <RESPONSE> (e.g. "Data Center", "Gaming") — NEVER 0, 1, 2. Each series value MUST equal the number in <RESPONSE>, aligned to those categories.
 - Never pretend an unsupported type is supported, and never relabel a different chart as the requested type.
 Interactivity:
+- action_row buttons are VISUALS-ONLY: each button must only offer to redraw the data ALREADY shown as a different supported chart kind (e.g. "Show as bar chart", "View as treemap", "Show as pie", "View as horizontal bars"). The button label is sent back as the next prompt, so it must be something you can definitely do with the data on screen.
+- NEVER add action buttons that need data you may not have: no new tickers/companies, no new time periods, no "compare X vs Y", no growth/peers/forecasts, no "explain ...". If no alternative chart kind fits the data, omit the action_row.
 - OUTPUT JSON ONLY. Never output HTML, <script>, <style>, <canvas>, raw markup, or code inside <WIDGET> — only the JSON schema above. There is no HTML mode.
 - If something cannot be expressed with the supported block types (e.g. a playable game, live sliders), DO NOT invent HTML — return <WIDGET></WIDGET> (empty) and explain in <RESPONSE> instead. Never dump raw index arrays like `[0,1,2]`.
 - For photographs, diagrams, or icons, use the `image` block with a valid https:// URL or a data: URI. Combine `image` with `text`, `chart`, and `table` blocks as needed.
         return _JSON_WIDGET_RULE.strip()
 _OUTPUT_CONTRACT_STRICT = """
 OUTPUT CONTRACT (STRICT — MUST FOLLOW)
 If you fail to follow this contract, the system will break.
 """
 # Strict bandit primitive: extra lines for <RESPONSE> when STRICT_PRIMITIVES is on (prompt-only).
 _STRICT_PRIMITIVE_EXTRAS: dict[str, str] = {
     "structured_bullets": (
         "No section titles, bullets, or paragraphs outside the table. Do not put JSON in <RESPONSE>."
     ),
     "visualization": (
+        "Write a brief 1-2 sentence lead-in only. The <WIDGET> carries the actual visual. "
+        "NEVER draw ASCII charts, tree diagrams (├──), or text-art, and never put code blocks or JSON in <RESPONSE>."
     ),
 }
     format_rule: str,
     primitive_extra_context: str,
     user_message: str,
     forbidden_components: list[str] | None = None,
     required_components: list[str] | None = None,
 ) -> str:
 ═══════════════════════════════════════════════════════
 """
+    # Components-only / JSON schema mode is the only mode. The widget vocabulary,
+    # warrant rubric, strict grounding, and decline rules all come from the registry
+    # (build_json_widget_rule → widget-registry.json). No HTML, no external libraries.
+    widget_format_line = "JSON UI schema ONLY (no HTML) for the widget"
+    widget_rules_header = "WIDGET RULES — for the JSON schema inside <WIDGET>"
+    widget_rules_body = build_json_widget_rule()
     combined_max_tokens = getattr(config, "COMBINED_MAX_TOKENS", 7500)
     token_limit_block = f"""
 - For comparison tables in <RESPONSE>: keep focused so the widget has room. Both must fit.
 """
+    return f"""You are an expert AI assistant. Each turn you produce a written answer AND an OPTIONAL interactive widget built ONLY from a fixed set of UI components defined below — there is NO HTML and NO external charting libraries.
 {social_turn_banner}
 Output style: No emojis. Neat, clean, professional — in both <RESPONSE> text and <WIDGET>.
 {token_limit_block}
 {_OUTPUT_CONTRACT_STRICT}
+For every turn you produce TWO sections in one generation: the <RESPONSE> text first, then the <WIDGET>. The widget may be empty when a visual is not warranted (see WIDGET WARRANT below). Never describe a widget you did not produce (e.g. don't write "the dashboard below" and then return an empty widget).
 ═══════════════════════════════════════════════════════
 OUTPUT FORMAT — always use exactly this structure
 ═══════════════════════════════════════════════════════
 Strategy: {strategy_id}
 Rule: {format_rule}
 Do not mention this rule. Do not add <WIDGET> inside <RESPONSE>.
+<RESPONSE> is prose for the user — NEVER put JSON, a widget schema, block objects, or code fences in it. All structured data goes ONLY inside <WIDGET>.
+NEVER draw visuals as text in <RESPONSE>: no ASCII charts/bars, no tree drawings (├──, └──), no aligned-column tables-as-art. The <WIDGET> is the ONLY place a visualization lives. For a hierarchy/mind map, put it in a chart block with "kind":"tree"|"mindmap"|"org" and a "root", not as text.
 CRITICAL — Primitives vs Widget (never confuse these):
 - The Strategy/Rule above applies ONLY to <RESPONSE> (text format: bullets, table, prose, etc.). It does NOT constrain <WIDGET>.
+- <WIDGET> is SEPARATE and INDEPENDENT. Widget choice depends on the content of your <RESPONSE>, not on the text format.
 ═══════════════════════════════════════════════════════
 {widget_rules_header}
 ═══════════════════════════════════════════════════════
 {widget_rules_body}
 {widget_block}
+{constraint_block}"""
 def build_combined_user_prompt(
         else:
             response_text = raw.strip()
+    # Extract <WIDGET>...</WIDGET> — JSON schema only (no HTML mode).
     widget_match = re.search(r"<WIDGET>(.*?)</WIDGET>", raw, re.DOTALL | re.IGNORECASE)
     if widget_match:
         raw_widget = widget_match.group(1).strip()
+        widget_payload = finalize_widget_schema_json(raw_widget)
     return response_text, widget_payload

vivek/backend/config.py CHANGED Viewed

@@ -89,7 +89,7 @@ DEFAULT_STRATEGIES = {
     "step_by_step":       "Numbered list of 3-6 steps only.",
     # NEW
     "comparison_table":   "Return a single MARKDOWN TABLE only. Use columns that help compare options (e.g., Option | Pros | Cons | Best for). No bullets outside the table.",
-    "visualization":      "Return a simple TEXT visualization only (ASCII bar chart or small table-of-values). Put it in a fenced code block. No extra prose outside the code block.",
 }
 # Module-level strategy state (may be overwritten by `reload_strategies()`).

     "step_by_step":       "Numbered list of 3-6 steps only.",
     # NEW
     "comparison_table":   "Return a single MARKDOWN TABLE only. Use columns that help compare options (e.g., Option | Pros | Cons | Best for). No bullets outside the table.",
+    "visualization":      "Write a brief 1-2 sentence lead-in that frames what the visual shows. The chart/widget carries the visualization. NEVER draw ASCII charts, tree diagrams, or text-art in the response.",
 }
 # Module-level strategy state (may be overwritten by `reload_strategies()`).

vivek/backend/server.py CHANGED Viewed

@@ -44,7 +44,6 @@ from . import config, llm
 from .combined_prompt import (
     build_combined_system_prompt,
     build_combined_user_prompt,
-    extract_embeddable_html_document,
     finalize_widget_schema_json,
     is_social_or_greeting_turn,
     parse_combined_output,
@@ -68,7 +67,6 @@ from .utils import (
     fast_valence,
     negative_strength,
 )
-from .widget_prompt import estimate_widget_height, inject_design_system
 from .widget_stream import parse_combined_stream
@@ -144,24 +142,6 @@ def sse_pack(evt: dict) -> str:
     return f"data: {json.dumps(evt, ensure_ascii=False)}\n\n"
-def _looks_truncated_widget_html(html: str) -> bool:
-    if not html:
-        return True
-    lower = html.lower()
-    if lower.count("<style") > lower.count("</style>"):
-        return True
-    if lower.count("<script") > lower.count("</script>"):
-        return True
-    if lower.count("<body") > lower.count("</body>"):
-        return True
-    if lower.count("<html") > lower.count("</html>"):
-        return True
-    import re as _re
-    if _re.search(r"[<{(]$", html.strip()):
-        return True
-    return False
 def _json_layout_is_only_numeric_index_arrays(schema_str: str) -> bool:
     """
     Detect bogus JSON widgets where every block is text like '[0,1,2]' (e.g. tic-tac-toe
@@ -207,42 +187,11 @@ def _dispatch_json_mode_widget(widget_payload_raw: str) -> tuple[str, str, int,
     return finalized, "", 0, "json_schema_invalid"
-def _should_generate_widget(message: str) -> bool:
-    """Lightweight intent gate so small-talk / explainers do not force widgets."""
-    import re as _re
-    text = (message or "").strip().lower()
-    if not text:
-        return False
-    low_signal = {"hi", "hello", "hey", "thanks", "thank you", "ok", "okay", "got it", "cool"}
-    if text in low_signal:
-        return False
-    widget_triggers = (
-        "chart", "graph", "plot", "dashboard", "table", "compare", "comparison",
-        "trend", "timeseries", "time series", "distribution", "heatmap", "scatter",
-        "pie", "bar", "line", "kpi", "analytics", "analyze", "analysis", "forecast",
-        "breakdown", "report", "visualize", "visualise", "show me", "insight", "metrics",
-        "tic tac", "tic-tac", "tictac", "game", "playable", "simulator", "write code",
-        "html page", "mini app", "calculator app",
-    )
-    if any(t in text for t in widget_triggers):
-        return True
-    text_only_intents = (
-        "explain", "what is", "why", "how does", "difference between", "define",
-        "summarize", "summarise", "plan", "roadmap", "steps", "implementation plan",
-    )
-    if any(t in text for t in text_only_intents):
-        return False
-    has_numeric_cue = bool(_re.search(r"\b\d+(\.\d+)?%?\b", text))
-    has_time_cue = any(t in text for t in ("daily", "weekly", "monthly", "quarterly", "yearly", "over time", "timeline"))
-    has_compare_cue = any(t in text for t in ("vs", "versus", "compare", "top", "rank", "distribution"))
-    if has_numeric_cue and (has_time_cue or has_compare_cue):
-        return True
-    return False
 # ---------------------------------------------------------------------------
@@ -888,7 +837,6 @@ def _build_adaptive_prompt(uid: str, msg: str):
     )
     format_rule = config.STRATEGIES.get(strat, "Be helpful and clear.")
-    widget_required = _should_generate_widget(msg)
     prim_block = ""
     if _is_admin_user(uid):
@@ -908,7 +856,6 @@ def _build_adaptive_prompt(uid: str, msg: str):
         format_rule=format_rule,
         primitive_extra_context=(getattr(config, "SKILLS_CONTENT", "") or "") + prim_block,
         user_message=msg,
-        widget_required=widget_required,
         forbidden_components=None,
         required_components=None,
     )
@@ -918,7 +865,7 @@ def _build_adaptive_prompt(uid: str, msg: str):
         "user": user, "ev": ev, "auto_detected": auto_detected, "auto_r": auto_r,
         "explicit": explicit, "force_explore": force_explore,
         "strat": strat, "scores": scores, "x": x, "prev": prev,
-        "format_rule": format_rule, "widget_required": widget_required,
         "combined_system": combined_system, "combined_prompt": combined_prompt,
     }
@@ -1006,39 +953,20 @@ def chat(req: ChatReq, bg: BackgroundTasks, user_id: str = Depends(require_user_
         response = raw_combined.strip()
     response = _maybe_enforce_primitive(msg, ctx["strat"], response)
-    widget_html = ""
     widget_schema = ""
     widget_height = 0
     widget_debug = ""
-    widget_mode = getattr(config, "WIDGET_MODE", "json").strip().lower()
     raw_preview = ""
     if widget_payload_raw:
-        if widget_mode == "json":
-            widget_schema, widget_html, widget_height, tag = _dispatch_json_mode_widget(widget_payload_raw)
-            widget_debug = tag or ""
-        else:
-            if _looks_truncated_widget_html(widget_payload_raw):
-                widget_debug = "combined_widget_truncated"
-            else:
-                widget_html = widget_payload_raw
-                widget_height = estimate_widget_height(widget_payload_raw)
-                widget_debug = "combined_widget_ok"
     else:
-        widget_debug = "combined_no_schema" if widget_mode == "json" else "combined_no_widget_tag"
         raw_preview = (raw_combined or "")[:800]
-        if widget_mode != "json" and ctx["widget_required"]:
-            placeholder = (
-                "<html><head></head><body>"
-                "<div class='widget-root card'><div class='card-title'>Interactive widget</div>"
-                "<div class='empty'>No widget returned.</div></div>"
-                "</body></html>"
-            )
-            widget_html = inject_design_system(placeholder)
-            widget_height = estimate_widget_height(widget_html)
-            widget_debug = "fallback_widget_generated"
-        elif not ctx["widget_required"]:
-            widget_debug = "widget_skipped_by_intent"
     user = ctx["user"]
     user["history"].append({"user": msg, "assistant": response})
@@ -1115,11 +1043,10 @@ def chat_stream(req: ChatReq, bg: BackgroundTasks, user_id: str = Depends(requir
             "auto_reason": ev["reason"],
         })
-        widget_html = ""
         widget_schema = ""
         widget_height = 0
         widget_debug = ""
-        widget_mode = getattr(config, "WIDGET_MODE", "json").strip().lower()
         raw_preview = ""
         response = ""
         mode = adapt_mode
@@ -1191,29 +1118,10 @@ def chat_stream(req: ChatReq, bg: BackgroundTasks, user_id: str = Depends(requir
             else:
                 raise RuntimeError("Unsupported ADAPTIVE_LLM_MODE (expected openai_compat or anthropic)")
-            # Finalize widget payload for the canonical 'done' event.
             if widget_payload_raw:
-                if widget_mode == "json":
-                    widget_schema, widget_html, widget_height, tag = _dispatch_json_mode_widget(widget_payload_raw)
-                    widget_debug = tag or ""
-                else:
-                    import re as _re
-                    raw_widget = widget_payload_raw
-                    if "```" in raw_widget:
-                        fence = _re.search(r"```(?:json|html)?\s*(.*?)```", raw_widget, _re.DOTALL | _re.IGNORECASE)
-                        raw_widget = fence.group(1).strip() if fence else _re.sub(r"```\w*", "", raw_widget).strip()
-                    if "<" in raw_widget and ">" in raw_widget:
-                        if "<html" not in raw_widget.lower():
-                            raw_widget = f"<html><head></head><body>{raw_widget}</body></html>"
-                        raw_widget = _re.sub(r"<!DOCTYPE[^>]*>", "", raw_widget, flags=_re.IGNORECASE).strip()
-                        widget_payload_raw = inject_design_system(raw_widget)
-                        if _looks_truncated_widget_html(widget_payload_raw):
-                            widget_debug = "stream_widget_truncated"
-                        else:
-                            widget_html = widget_payload_raw
-                            widget_height = estimate_widget_height(widget_html)
-            if widget_mode != "json" and not widget_html:
-                widget_debug = widget_debug or "no_widget"
             if not response and not widget_payload_raw:
                 response = "(No content)"

 from .combined_prompt import (
     build_combined_system_prompt,
     build_combined_user_prompt,
     finalize_widget_schema_json,
     is_social_or_greeting_turn,
     parse_combined_output,
     fast_valence,
     negative_strength,
 )
 from .widget_stream import parse_combined_stream
     return f"data: {json.dumps(evt, ensure_ascii=False)}\n\n"
 def _json_layout_is_only_numeric_index_arrays(schema_str: str) -> bool:
     """
     Detect bogus JSON widgets where every block is text like '[0,1,2]' (e.g. tic-tac-toe
     return finalized, "", 0, "json_schema_invalid"
+# NOTE: widget generation is NOT gated by keyword matching. The synthesizer LLM
+# decides per turn whether a widget helps AND whether it can populate it with real
+# values using the allowed block types (see the warrant rubric in combined_prompt).
+# A keyword list both over-fires ("bar exam") and misses ("how has revenue moved?"),
+# and it can't know whether the data exists to fill a chart — the model can.
 # ---------------------------------------------------------------------------
     )
     format_rule = config.STRATEGIES.get(strat, "Be helpful and clear.")
     prim_block = ""
     if _is_admin_user(uid):
         format_rule=format_rule,
         primitive_extra_context=(getattr(config, "SKILLS_CONTENT", "") or "") + prim_block,
         user_message=msg,
         forbidden_components=None,
         required_components=None,
     )
         "user": user, "ev": ev, "auto_detected": auto_detected, "auto_r": auto_r,
         "explicit": explicit, "force_explore": force_explore,
         "strat": strat, "scores": scores, "x": x, "prev": prev,
+        "format_rule": format_rule,
         "combined_system": combined_system, "combined_prompt": combined_prompt,
     }
         response = raw_combined.strip()
     response = _maybe_enforce_primitive(msg, ctx["strat"], response)
+    widget_html = ""  # components-only: always empty; kept for payload/DB compatibility
     widget_schema = ""
     widget_height = 0
     widget_debug = ""
     raw_preview = ""
     if widget_payload_raw:
+        widget_schema, widget_html, widget_height, tag = _dispatch_json_mode_widget(widget_payload_raw)
+        widget_debug = tag or ""
     else:
+        # No <WIDGET> payload — the model judged this turn better as text-only (or declined).
+        # That is a valid outcome; render prose with no widget card.
+        widget_debug = "combined_no_schema"
         raw_preview = (raw_combined or "")[:800]
     user = ctx["user"]
     user["history"].append({"user": msg, "assistant": response})
             "auto_reason": ev["reason"],
         })
+        widget_html = ""  # components-only: always empty; kept for payload/DB compatibility
         widget_schema = ""
         widget_height = 0
         widget_debug = ""
         raw_preview = ""
         response = ""
         mode = adapt_mode
             else:
                 raise RuntimeError("Unsupported ADAPTIVE_LLM_MODE (expected openai_compat or anthropic)")
+            # Finalize widget payload for the canonical 'done' event (JSON schema only).
             if widget_payload_raw:
+                widget_schema, widget_html, widget_height, tag = _dispatch_json_mode_widget(widget_payload_raw)
+                widget_debug = tag or ""
             if not response and not widget_payload_raw:
                 response = "(No content)"

vivek/frontend-vue/dist/assets/ActionRow-B9EJZ-NA.js DELETED Viewed

@@ -1 +0,0 @@

- import{G as e,M as t,P as n,f as r,h as i,i as a,jt as o,u as s,v as c}from"./runtime-core.esm-bundler-olIhRSij.js";import{n as l}from"./index-DxH9q0Bt.js";var u={class:`flex flex-wrap gap-2`},d=c({__name:`ActionRow`,props:{block:{}},setup(c){return(d,f)=>(t(),r(`div`,u,[(t(!0),r(a,null,n(c.block.buttons||[],(n,r)=>(t(),s(l,{key:r,type:`button`,variant:`outline`,size:`sm`,disabled:``,title:n.intent?`Intent: ${n.intent}`:void 0},{default:e(()=>[i(o(n.label||`Action`),1)]),_:2},1032,[`title`]))),128))]))}});export{d as default};

vivek/frontend-vue/dist/assets/ActionRow-D2v3mo3f.js ADDED Viewed

	@@ -0,0 +1 @@

+ import{G as e,M as t,P as n,f as r,h as i,i as a,jt as o,u as s,v as c}from"./runtime-core.esm-bundler-olIhRSij.js";import{tr as l}from"./index-DE9MARTs.js";var u={class:`flex flex-wrap gap-2`},d=c({__name:`ActionRow`,props:{block:{}},emits:[`action`],setup(c,{emit:d}){let f=d;function p(e){let t=String(e.label||e.intent||``).trim();t&&f(`action`,t)}return(d,f)=>(t(),r(`div`,u,[(t(!0),r(a,null,n(c.block.buttons||[],(n,r)=>(t(),s(l,{key:r,type:`button`,variant:`outline`,size:`sm`,title:n.intent?`Ask: ${n.label||n.intent}`:void 0,onClick:e=>p(n)},{default:e(()=>[i(o(n.label||`Action`),1)]),_:2},1032,[`title`,`onClick`]))),128))]))}});export{d as default};

vivek/frontend-vue/dist/assets/ChartBlock-CdTvHCQ6.js ADDED Viewed

The diff for this file is too large to render. See raw diff

vivek/frontend-vue/dist/assets/ChartBlock-zIyaBwdN.js DELETED Viewed

	@@ -1 +0,0 @@
1	- import{M as e,u as t,v as n}from"./runtime-core.esm-bundler-olIhRSij.js";import{t as r}from"./index-DxH9q0Bt.js";var i=n({__name:`ChartBlock`,props:{block:{}},setup(n){let i=n;return(n,a)=>(e(),t(r,{title:i.block.title,chart:i.block.chart\|\|{}},null,8,[`title`,`chart`]))}});export{i as default};

vivek/frontend-vue/dist/assets/index-39HK7jxF.css DELETED Viewed

The diff for this file is too large to render. See raw diff

vivek/frontend-vue/dist/assets/{index-DxH9q0Bt.js → index-DE9MARTs.js} RENAMED Viewed

The diff for this file is too large to render. See raw diff

vivek/frontend-vue/dist/assets/index-yy7aehFb.css ADDED Viewed

The diff for this file is too large to render. See raw diff

vivek/frontend-vue/dist/index.html CHANGED Viewed

@@ -5,9 +5,9 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>frontend-vue</title>
-    <script type="module" crossorigin src="/assets/index-DxH9q0Bt.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/runtime-core.esm-bundler-olIhRSij.js">
-    <link rel="stylesheet" crossorigin href="/assets/index-39HK7jxF.css">
   </head>
   <body>
     <div id="app"></div>

     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>frontend-vue</title>
+    <script type="module" crossorigin src="/assets/index-DE9MARTs.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/runtime-core.esm-bundler-olIhRSij.js">
+    <link rel="stylesheet" crossorigin href="/assets/index-yy7aehFb.css">
   </head>
   <body>
     <div id="app"></div>

vivek/frontend-vue/package-lock.json CHANGED Viewed

@@ -15,6 +15,7 @@
         "clsx": "^2.1.1",
         "dompurify": "^3.3.3",
         "echarts": "^6.0.0",
         "gsap": "^3.14.2",
         "lucide-vue-next": "^1.0.0",
         "markdown-it": "^14.1.1",
@@ -1390,6 +1391,11 @@
         "url": "https://polar.sh/cva"
       }
     },
     "node_modules/clsx": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -1445,6 +1451,19 @@
         "zrender": "6.0.0"
       }
     },
     "node_modules/echarts/node_modules/tslib": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",

         "clsx": "^2.1.1",
         "dompurify": "^3.3.3",
         "echarts": "^6.0.0",
+        "echarts-gl": "^2.1.0",
         "gsap": "^3.14.2",
         "lucide-vue-next": "^1.0.0",
         "markdown-it": "^14.1.1",
         "url": "https://polar.sh/cva"
       }
     },
+    "node_modules/claygl": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/claygl/-/claygl-1.3.0.tgz",
+      "integrity": "sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ=="
+    },
     "node_modules/clsx": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
         "zrender": "6.0.0"
       }
     },
+    "node_modules/echarts-gl": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/echarts-gl/-/echarts-gl-2.1.0.tgz",
+      "integrity": "sha512-GxzAPTYJyOANbu7InkdGV7QLLpVyuQWNvN1yyEEIiqgM11ilAO2OkvPNgRdf854R9ZPt/C1HAgjO8Udrj61lOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "claygl": "^1.2.1",
+        "zrender": "^5.1.1 || ^6.0.0"
+      },
+      "peerDependencies": {
+        "echarts": "^5.1.2 || ^6.0.0"
+      }
+    },
     "node_modules/echarts/node_modules/tslib": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",

vivek/frontend-vue/package.json CHANGED Viewed

@@ -16,6 +16,7 @@
     "clsx": "^2.1.1",
     "dompurify": "^3.3.3",
     "echarts": "^6.0.0",
     "gsap": "^3.14.2",
     "lucide-vue-next": "^1.0.0",
     "markdown-it": "^14.1.1",

     "clsx": "^2.1.1",
     "dompurify": "^3.3.3",
     "echarts": "^6.0.0",
+    "echarts-gl": "^2.1.0",
     "gsap": "^3.14.2",
     "lucide-vue-next": "^1.0.0",
     "markdown-it": "^14.1.1",

vivek/frontend-vue/src/components/AnalyticsPanel.vue CHANGED Viewed

@@ -26,7 +26,7 @@ const rewardWindowSize = 50
 const metrics = computed(() => {
   const done = analyticsState.doneEvents
-  const widgetRenderedCount = done.filter((d) => (d.widgetHtml ?? '').trim().length > 0).length
   const widgetTotal = done.length
   return {

 const metrics = computed(() => {
   const done = analyticsState.doneEvents
+  const widgetRenderedCount = done.filter((d) => (d.widgetSchema ?? '').trim().length > 0).length
   const widgetTotal = done.length
   return {

vivek/frontend-vue/src/components/LiveWidgetFrame.vue DELETED Viewed

@@ -1,111 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-import { buildProgressiveHtmlDoc } from '@/lib/progressiveWidget'
-/**
- * Progressive iframe renderer for HTML-mode widgets. While content streams,
- * srcdoc is updated at a throttled rate (~120ms) so the browser re-renders
- * without flickering. When `finalized` goes true, we swap to the polished
- * final HTML so design-system injection + truncation fixes take effect.
- */
-const props = defineProps<{
-  rawStream: string
-  finalHtml?: string
-  finalized: boolean
-  height?: number
-}>()
-const throttledDoc = ref('')
-let lastWrite = 0
-let pendingTimer: ReturnType<typeof setTimeout> | null = null
-function scheduleWrite(next: string) {
-  const now = Date.now()
-  const THROTTLE_MS = 120
-  if (now - lastWrite >= THROTTLE_MS) {
-    throttledDoc.value = next
-    lastWrite = now
-    return
-  }
-  if (pendingTimer) clearTimeout(pendingTimer)
-  pendingTimer = setTimeout(() => {
-    throttledDoc.value = next
-    lastWrite = Date.now()
-    pendingTimer = null
-  }, THROTTLE_MS - (now - lastWrite))
-}
-watch(
-  () => [props.rawStream, props.finalized, props.finalHtml],
-  () => {
-    if (props.finalized && props.finalHtml) {
-      throttledDoc.value = props.finalHtml
-      return
-    }
-    const doc = buildProgressiveHtmlDoc(props.rawStream)
-    if (doc) scheduleWrite(doc)
-  },
-  { immediate: true },
-)
-const frameHeight = computed(() => {
-  const raw = Number(props.height || 420)
-  if (!Number.isFinite(raw)) return 420
-  return Math.min(Math.max(raw, 300), 520)
-})
-</script>
-<template>
-  <div class="relative w-full">
-    <iframe
-      v-if="throttledDoc"
-      :srcdoc="throttledDoc"
-      sandbox="allow-scripts allow-same-origin"
-      class="w-full widget-frame border-0"
-      :style="{ height: `${frameHeight}px`, maxHeight: '56vh' }"
-    />
-    <div
-      v-else
-      class="w-full rounded-xl border bg-muted/20 skeleton"
-      :style="{ height: `${frameHeight}px`, maxHeight: '56vh' }"
-    />
-    <div
-      v-if="!finalized"
-      class="absolute top-2 right-2 text-[10px] px-2 py-1 rounded-full bg-cyan-500/90 text-white shadow-md flex items-center gap-1.5"
-    >
-      <span class="relative flex h-1.5 w-1.5">
-        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-white opacity-75" />
-        <span class="relative inline-flex rounded-full h-1.5 w-1.5 bg-white" />
-      </span>
-      streaming
-    </div>
-  </div>
-</template>
-<style scoped>
-.skeleton {
-  position: relative;
-  overflow: hidden;
-  background: hsl(var(--muted) / 0.3);
-}
-.skeleton::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(
-    90deg,
-    transparent 0%,
-    hsl(var(--muted) / 0.6) 50%,
-    transparent 100%
-  );
-  animation: shimmerSweep 1.4s linear infinite;
-}
-@keyframes shimmerSweep {
-  0% {
-    transform: translateX(-100%);
-  }
-  100% {
-    transform: translateX(100%);
-  }
-}
-</style>

vivek/frontend-vue/src/components/LiveWidgetSchema.vue DELETED Viewed

@@ -1,213 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { Motion } from '@motionone/vue'
-import Button from '@/components/ui/Button.vue'
-import WidgetSchemaChart from '@/components/WidgetSchemaChart.vue'
-import { parseProgressiveWidgetSchema, type WidgetBlock } from '@/lib/progressiveWidget'
-/**
- * Renders widget blocks progressively as JSON streams in. Each block fades up
- * independently (Claude-artifact style) and we show a soft "pending" block for
- * whichever block the model is currently generating.
- */
-const props = defineProps<{
-  rawStream: string
-  finalized?: boolean
-}>()
-const state = computed(() => parseProgressiveWidgetSchema(props.rawStream))
-const blocks = computed<WidgetBlock[]>(() => state.value.blocks)
-const pendingType = computed<string | null>(() => (props.finalized ? null : state.value.pendingBlockHint))
-function pendingLabel(t: string | null): string {
-  if (!t) return 'Building block'
-  const labels: Record<string, string> = {
-    text: 'Writing narrative',
-    kpi_row: 'Preparing KPIs',
-    chart: 'Rendering chart',
-    image: 'Loading image',
-    table: 'Composing table',
-    action_row: 'Wiring actions',
-  }
-  return labels[t] || `Building ${t}`
-}
-</script>
-<template>
-  <div class="live-widget space-y-3 text-sm">
-    <template v-for="(block, i) in blocks" :key="`lw-${i}`">
-      <Motion
-        tag="div"
-        :initial="{ opacity: 0, y: 8, scale: 0.985 }"
-        :animate="{ opacity: 1, y: 0, scale: 1 }"
-        :transition="{ duration: 0.32, easing: [0.16, 1, 0.3, 1] }"
-      >
-        <div v-if="block.type === 'text'" class="whitespace-pre-wrap leading-relaxed">
-          {{ (block as { content?: string }).content || '' }}
-        </div>
-        <div v-else-if="block.type === 'kpi_row'" class="grid grid-cols-2 sm:grid-cols-3 gap-2">
-          <div
-            v-for="(it, j) in (block as { items?: { label?: string; value?: string; tone?: string }[] }).items || []"
-            :key="j"
-            class="rounded-xl border bg-card px-3 py-2 shadow-sm"
-          >
-            <div class="text-[10px] text-muted-foreground uppercase tracking-wide">{{ it.label }}</div>
-            <div
-              class="text-lg font-semibold mt-0.5"
-              :class="{
-                'text-emerald-600 dark:text-emerald-400': it.tone === 'positive',
-                'text-red-600 dark:text-red-400': it.tone === 'negative',
-              }"
-            >
-              {{ it.value }}
-            </div>
-          </div>
-        </div>
-        <WidgetSchemaChart
-          v-else-if="block.type === 'chart'"
-          :title="(block as { title?: string }).title"
-          :chart="(block as { chart?: Record<string, unknown> }).chart as any || {}"
-        />
-        <div v-else-if="block.type === 'image'" class="rounded-xl border bg-card overflow-hidden shadow-sm">
-          <div
-            v-if="(block as { title?: string }).title"
-            class="px-3 py-2 border-b text-xs font-medium"
-          >
-            {{ (block as { title?: string }).title }}
-          </div>
-          <div class="p-2 flex justify-center bg-muted/15">
-            <img
-              :src="(block as { src?: string }).src || ''"
-              :alt="(block as { alt?: string }).alt || 'Widget image'"
-              class="max-w-full max-h-[min(420px,55vh)] rounded-lg object-contain"
-              loading="lazy"
-              referrerpolicy="no-referrer"
-            />
-          </div>
-        </div>
-        <div v-else-if="block.type === 'table'" class="rounded-xl border bg-card overflow-hidden">
-          <div v-if="(block as { title?: string }).title" class="px-3 py-2 border-b text-xs font-medium">
-            {{ (block as { title?: string }).title }}
-          </div>
-          <div class="overflow-x-auto">
-            <table class="w-full text-xs">
-              <thead v-if="(block as { columns?: string[] }).columns?.length">
-                <tr>
-                  <th
-                    v-for="(c, ci) in (block as { columns?: string[] }).columns"
-                    :key="ci"
-                    class="text-left px-3 py-2 border-b bg-muted/40 font-medium"
-                  >
-                    {{ c }}
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="(row, ri) in (block as { rows?: unknown[][] }).rows || []" :key="ri">
-                  <td v-for="(cell, ci) in row" :key="ci" class="px-3 py-1.5 border-b border-border/60">
-                    {{ cell }}
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-        <div v-else-if="block.type === 'action_row'" class="flex flex-wrap gap-2">
-          <Button
-            v-for="(b, bi) in (block as { buttons?: { label?: string; intent?: string }[] }).buttons || []"
-            :key="bi"
-            type="button"
-            variant="outline"
-            size="sm"
-            disabled
-            :title="(b as { intent?: string }).intent ? `Intent: ${(b as { intent?: string }).intent}` : undefined"
-          >
-            {{ b.label || 'Action' }}
-          </Button>
-        </div>
-        <div v-else class="rounded-lg border border-dashed border-muted-foreground/30 bg-muted/20 px-3 py-2 text-xs whitespace-pre-wrap">
-          {{ JSON.stringify(block, null, 2) }}
-        </div>
-      </Motion>
-    </template>
-    <Transition
-      enter-active-class="transition-all duration-300 ease-out"
-      enter-from-class="opacity-0 translate-y-1"
-      enter-to-class="opacity-100 translate-y-0"
-      leave-active-class="transition-all duration-200 ease-in"
-      leave-from-class="opacity-100 translate-y-0"
-      leave-to-class="opacity-0 -translate-y-1"
-    >
-      <div
-        v-if="pendingType"
-        class="pending-block rounded-xl border border-cyan-500/30 bg-cyan-500/5 dark:bg-cyan-950/25 px-3 py-2 flex items-center gap-3"
-      >
-        <span class="relative flex h-2.5 w-2.5 shrink-0">
-          <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-cyan-400 opacity-60" />
-          <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-cyan-500" />
-        </span>
-        <span class="text-[12px] font-medium text-cyan-900 dark:text-cyan-100">
-          {{ pendingLabel(pendingType) }}…
-        </span>
-        <div class="shimmer flex-1 h-1.5 rounded-full bg-muted/40" />
-      </div>
-    </Transition>
-    <div v-if="!blocks.length && !pendingType" class="skeleton-stack space-y-2">
-      <div class="skeleton h-6 w-2/3 rounded-lg" />
-      <div class="skeleton h-20 w-full rounded-xl" />
-      <div class="skeleton h-4 w-1/2 rounded" />
-    </div>
-  </div>
-</template>
-<style scoped>
-.shimmer {
-  position: relative;
-  overflow: hidden;
-}
-.shimmer::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(
-    90deg,
-    transparent 0%,
-    rgba(6, 182, 212, 0.35) 50%,
-    transparent 100%
-  );
-  animation: shimmerSweep 1.3s linear infinite;
-}
-.skeleton {
-  position: relative;
-  overflow: hidden;
-  background: hsl(var(--muted) / 0.45);
-}
-.skeleton::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(
-    90deg,
-    transparent 0%,
-    hsl(var(--muted) / 0.75) 50%,
-    transparent 100%
-  );
-  animation: shimmerSweep 1.4s linear infinite;
-}
-@keyframes shimmerSweep {
-  0% {
-    transform: translateX(-100%);
-  }
-  100% {
-    transform: translateX(100%);
-  }
-}
-</style>

vivek/frontend-vue/src/components/WidgetRegistryRenderer.vue CHANGED Viewed

@@ -13,13 +13,17 @@ import Button from '@/components/ui/Button.vue'
 import { ArrowDownTrayIcon } from '@/components/icons'
 import { resolveWidget } from '@/lib/widgetRegistry'
 import { normalizeWidgetBlock } from '@/lib/progressiveWidget'
 import { downloadTextAsFile, prettifyJsonIfPossible } from '@/lib/downloadFile'
 import { showToast } from '@/lib/toast'
 const props = withDefaults(
-  defineProps<{ jsonStr: string; downloadBase?: string; showDownload?: boolean }>(),
-  { showDownload: true },
 )
 type Block = Record<string, unknown> & { type?: string }
@@ -29,22 +33,87 @@ function stripFences(s: string): string {
   return s.replace(/```\w*/g, '').trim()
 }
 function parseLayout(raw: string): Block[] | null {
   let s = String(raw || '').trim()
   if (!s) return null
   if (s.includes('```')) s = stripFences(s)
-  let parsed: unknown
   try {
     parsed = JSON.parse(s)
   } catch {
     const i = s.indexOf('{')
     const j = s.lastIndexOf('}')
-    if (i < 0 || j <= i) return null
-    try {
-      parsed = JSON.parse(s.slice(i, j + 1))
-    } catch {
-      return null
     }
   }
@@ -56,17 +125,14 @@ function parseLayout(raw: string): Block[] | null {
     layout = o.layout ?? o.blocks ?? o.components
     if (!Array.isArray(layout) && typeof o.type === 'string') layout = [o]
   }
-  if (!Array.isArray(layout)) return null
-  const normalized = (layout as unknown[]).map((b) => normalizeWidgetBlock(b)) as Block[]
-  // Drop bare numeric-array text blocks (e.g. tic-tac-toe win lines "[0,1,2]") — not real content.
-  const NUMERIC_ARRAY_RE = /^\s*\[\s*-?\d+(\.\d+)?(\s*,\s*-?\d+(\.\d+)?)*\s*\]\s*$/
-  return normalized.filter(
-    (b) =>
-      !(
-        String(b.type || '').toLowerCase() === 'text' &&
-        NUMERIC_ARRAY_RE.test(String((b as { content?: string }).content ?? ''))
-      ),
-  )
 }
 const parsed = computed(() => parseLayout(props.jsonStr))
@@ -95,20 +161,41 @@ function downloadJson() {
   }
   downloadTextAsFile(prettifyJsonIfPossible(raw), `${downloadStem()}.json`, 'application/json;charset=utf-8')
 }
 </script>
 <template>
   <div class="space-y-2">
-    <div v-if="showDownload && hasRaw" class="flex justify-end">
       <Button
         type="button"
         variant="outline"
         size="sm"
-        class="h-7 px-2"
         title="Download widget schema as JSON"
         @click="downloadJson"
       >
-        <ArrowDownTrayIcon class="h-3.5 w-3.5" />
       </Button>
     </div>
@@ -125,6 +212,7 @@ function downloadJson() {
             :is="resolve(block.type)!.component"
             v-if="resolve(block.type)"
             :block="block"
           />
           <div
             v-else
@@ -142,14 +230,13 @@ function downloadJson() {
       </template>
     </div>
     <div
-      v-else-if="parseFailed"
       class="rounded-lg border border-dashed border-amber-500/40 bg-amber-500/5 px-3 py-3 text-xs text-muted-foreground"
     >
-      <p class="font-medium text-foreground/90 mb-1">Could not parse widget JSON</p>
-      <pre class="max-h-48 overflow-auto whitespace-pre-wrap break-all text-[10px] leading-snug">{{
-        props.jsonStr.slice(0, 2000)
-      }}</pre>
     </div>
   </div>
 </template>

 import { ArrowDownTrayIcon } from '@/components/icons'
 import { resolveWidget } from '@/lib/widgetRegistry'
 import { normalizeWidgetBlock } from '@/lib/progressiveWidget'
+import { chartHasRenderableData } from '@/lib/echartsOption'
 import { downloadTextAsFile, prettifyJsonIfPossible } from '@/lib/downloadFile'
+import { widgetToHtml } from '@/lib/exportWidgetHtml'
 import { showToast } from '@/lib/toast'
 const props = withDefaults(
+  defineProps<{ jsonStr: string; downloadBase?: string; showDownload?: boolean; streaming?: boolean }>(),
+  { showDownload: true, streaming: false },
 )
+// Bubbles up action_row button clicks (the follow-up prompt text) to the chat.
+const emit = defineEmits<{ (e: 'action', text: string): void }>()
 type Block = Record<string, unknown> & { type?: string }
   return s.replace(/```\w*/g, '').trim()
 }
+/**
+ * Salvage complete block objects from a truncated/invalid layout string.
+ * Walks the `layout` array brace-by-brace (string-aware) and keeps every fully
+ * closed `{...}` object that has a `type`. A cut-off final object is dropped.
+ * This guarantees we NEVER fall back to dumping raw JSON to the user.
+ */
+function salvageBlocks(s: string): Block[] {
+  const li = s.search(/"(?:layout|blocks|components)"\s*:\s*\[/)
+  let start = li >= 0 ? s.indexOf('[', li) + 1 : s.indexOf('[')
+  if (start <= 0) return []
+  const out: Block[] = []
+  const n = s.length
+  let i = start
+  while (i < n) {
+    while (i < n && s[i] !== '{') {
+      if (s[i] === ']') return out
+      i++
+    }
+    if (i >= n) break
+    let depth = 0
+    let inStr = false
+    let esc = false
+    let j = i
+    for (; j < n; j++) {
+      const ch = s[j]
+      if (inStr) {
+        if (esc) esc = false
+        else if (ch === '\\') esc = true
+        else if (ch === '"') inStr = false
+      } else if (ch === '"') inStr = true
+      else if (ch === '{') depth++
+      else if (ch === '}') {
+        depth--
+        if (depth === 0) {
+          j++
+          break
+        }
+      }
+    }
+    if (depth !== 0) break // incomplete (truncated) object → stop salvaging
+    try {
+      const o = JSON.parse(s.slice(i, j))
+      if (o && typeof o === 'object' && typeof o.type === 'string') out.push(o as Block)
+    } catch {
+      /* skip unparseable element */
+    }
+    i = j
+  }
+  return out
+}
+function finalizeBlocks(layout: unknown[]): Block[] {
+  const normalized = layout.map((b) => normalizeWidgetBlock(b)) as Block[]
+  // Drop bare numeric-array text blocks (e.g. tic-tac-toe win lines "[0,1,2]") — not real content.
+  const NUMERIC_ARRAY_RE = /^\s*\[\s*-?\d+(\.\d+)?(\s*,\s*-?\d+(\.\d+)?)*\s*\]\s*$/
+  return normalized.filter((b) => {
+    const type = String(b.type || '').toLowerCase()
+    // Never show an empty chart card — drop charts with no renderable data outright.
+    if (type === 'chart' && !chartHasRenderableData((b as { chart?: any }).chart || {})) return false
+    if (type === 'text' && NUMERIC_ARRAY_RE.test(String((b as { content?: string }).content ?? ''))) return false
+    return true
+  })
+}
 function parseLayout(raw: string): Block[] | null {
   let s = String(raw || '').trim()
   if (!s) return null
   if (s.includes('```')) s = stripFences(s)
+  let parsed: unknown = null
   try {
     parsed = JSON.parse(s)
   } catch {
     const i = s.indexOf('{')
     const j = s.lastIndexOf('}')
+    if (i >= 0 && j > i) {
+      try {
+        parsed = JSON.parse(s.slice(i, j + 1))
+      } catch {
+        parsed = null
+      }
     }
   }
     layout = o.layout ?? o.blocks ?? o.components
     if (!Array.isArray(layout) && typeof o.type === 'string') layout = [o]
   }
+  if (Array.isArray(layout)) return finalizeBlocks(layout as unknown[])
+  // Clean parse failed (likely truncated stream) — salvage whatever complete blocks exist
+  // instead of dumping raw JSON to the user.
+  const salvaged = salvageBlocks(s)
+  if (salvaged.length) return finalizeBlocks(salvaged)
+  return null
 }
 const parsed = computed(() => parseLayout(props.jsonStr))
   }
   downloadTextAsFile(prettifyJsonIfPossible(raw), `${downloadStem()}.json`, 'application/json;charset=utf-8')
 }
+function downloadHtml() {
+  const raw = String(props.jsonStr || '').trim()
+  if (!raw) {
+    showToast({ title: 'Nothing to download', message: 'Widget is empty.' })
+    return
+  }
+  // Deterministic, no LLM: same JSON the renderer uses → self-contained interactive HTML.
+  const html = widgetToHtml(raw, downloadStem())
+  downloadTextAsFile(html, `${downloadStem()}.html`, 'text/html;charset=utf-8')
+}
 </script>
 <template>
   <div class="space-y-2">
+    <div v-if="showDownload && hasRaw" class="flex justify-end gap-1.5">
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        class="h-7 px-2 text-[11px]"
+        title="Download as a self-contained interactive HTML file"
+        @click="downloadHtml"
+      >
+        <ArrowDownTrayIcon class="h-3.5 w-3.5" /> HTML
+      </Button>
       <Button
         type="button"
         variant="outline"
         size="sm"
+        class="h-7 px-2 text-[11px]"
         title="Download widget schema as JSON"
         @click="downloadJson"
       >
+        <ArrowDownTrayIcon class="h-3.5 w-3.5" /> JSON
       </Button>
     </div>
             :is="resolve(block.type)!.component"
             v-if="resolve(block.type)"
             :block="block"
+            @action="(t: string) => emit('action', t)"
           />
           <div
             v-else
       </template>
     </div>
+    <!-- While streaming, stay quiet until the first block completes (panel header shows "building live"). -->
     <div
+      v-else-if="parseFailed && !streaming"
       class="rounded-lg border border-dashed border-amber-500/40 bg-amber-500/5 px-3 py-3 text-xs text-muted-foreground"
     >
+      <!-- Never dump raw JSON to the user — show a friendly note only. -->
+      The widget couldn’t be built for this answer. Try rephrasing or ask again.
     </div>
   </div>
 </template>

vivek/frontend-vue/src/components/WidgetSchemaChart.vue CHANGED Viewed

@@ -1,527 +1,25 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref, watch, computed, nextTick } from 'vue'
 import * as echarts from 'echarts'
 import { ArrowDownTrayIcon } from '@/components/icons'
-type Series = { name?: string; color?: string; kind?: string; values?: (number | number[])[] }
 const props = defineProps<{
   title?: string
-  chart: {
-    kind?: string
-    x_label?: string
-    y_label?: string
-    max?: number
-    // heatmap / matrix
-    x_labels?: string[]
-    y_labels?: string[]
-    categories?: string[]
-    labels?: string[]
-    matrix?: number[][]
-    // cartesian (line/bar/area/scatter/hbar/stacked/combo/bubble) + radar
-    series?: Series[]
-    x_categories?: string[]
-    // pie / donut / funnel / gauge / treemap / sunburst
-    items?: { label?: string; name?: string; value?: number }[]
-    // candlestick: [open, close, low, high] per category
-    candles?: (number | string)[][]
-    // boxplot: [min, q1, median, q3, max] per category
-    boxes?: (number | string)[][]
-    // sankey / graph
-    nodes?: ({ name?: string } | string)[]
-    links?: { source?: string | number; target?: string | number; value?: number }[]
-  }
 }>()
 const rootEl = ref<HTMLDivElement | null>(null)
 let chart: echarts.ECharts | null = null
-// Named colors the LLM may use; anything else (e.g. a hex string) passes through.
-const COLOR_MAP: Record<string, string> = {
-  blue: '#3b82f6',
-  orange: '#f97316',
-  green: '#22c55e',
-  red: '#ef4444',
-  purple: '#a855f7',
-  teal: '#14b8a6',
-  yellow: '#eab308',
-  pink: '#ec4899',
-  indigo: '#4f46e5',
-  cyan: '#0891b2',
-  gray: '#64748b',
-}
-// Fallback palette when the LLM does not specify a color for a series.
-const PALETTE = ['#3b82f6', '#f97316', '#22c55e', '#ef4444', '#a855f7', '#14b8a6', '#eab308', '#ec4899']
-// Semantic tokens for meaning-bearing series (gains vs. losses, etc.)
-const POSITIVE = '#16a34a'
-const NEGATIVE = '#dc2626'
-// Honor the LLM-chosen color (named or hex); fall back to the palette by index.
-function resolveColor(c?: string, i = 0): string {
-  if (!c) return PALETTE[i % PALETTE.length]
-  return COLOR_MAP[c.toLowerCase()] || c
-}
 const kind = computed(() => String(props.chart?.kind || 'line').toLowerCase())
-function _toNum(v: unknown): number | null {
-  if (typeof v === 'number') return Number.isFinite(v) ? v : null
-  if (typeof v === 'string') {
-    const m = v.replace(/,/g, '').match(/-?\d+(\.\d+)?/) // "$47.5B" → 47.5, "—" → null
-    return m ? parseFloat(m[0]) : null
-  }
-  return null
-}
-function cartesianSeries() {
-  const raw = props.chart?.series || []
-  return raw
-    .map((s, i) => {
-      const vals = Array.isArray(s.values) ? s.values : []
-      let pts: [number, number | null][] = []
-      if (vals.length && !Array.isArray(vals[0])) {
-        // plain values (numbers OR strings like "$47.5B"/"—") aligned to x_categories;
-        // keep position (null = gap) so values line up with the categories.
-        pts = (vals as unknown[]).map((v, j) => [j, _toNum(v)])
-      } else {
-        pts = (vals as unknown[])
-          .filter((p) => Array.isArray(p) && (p as unknown[]).length >= 2)
-          .map((p) => [(_toNum((p as unknown[])[0]) ?? 0), _toNum((p as unknown[])[1])] as [number, number | null])
-      }
-      return { name: s.name || `Series ${i + 1}`, color: resolveColor(s.color, i), kind: s.kind, points: pts }
-    })
-    .filter((s) => s.points.some((p) => p[1] != null)) // keep series with ≥1 real value
-}
-function heatmapData() {
-  const xs = props.chart?.x_labels || props.chart?.categories || props.chart?.labels || []
-  const ys = props.chart?.y_labels || props.chart?.categories || props.chart?.labels || []
-  const m = props.chart?.matrix
-  const data: [number, number, number][] = []
-  let vmin = Infinity
-  let vmax = -Infinity
-  if (Array.isArray(m)) {
-    for (let r = 0; r < m.length; r++) {
-      const row = Array.isArray(m[r]) ? m[r] : []
-      for (let c = 0; c < row.length; c++) {
-        const v = Number(row[c])
-        if (!Number.isFinite(v)) continue
-        data.push([c, r, v])
-        if (v < vmin) vmin = v
-        if (v > vmax) vmax = v
-      }
-    }
-  }
-  if (!Number.isFinite(vmin)) {
-    vmin = 0
-    vmax = 1
-  }
-  return { xs, ys, data, vmin, vmax }
-}
-function pieData() {
-  const items = props.chart?.items || []
-  if (items.length) {
-    return items.map((it, i) => ({ name: it.label || it.name || `Item ${i + 1}`, value: _toNum(it.value) ?? 0 }))
-  }
-  const s = (props.chart?.series || [])[0]
-  if (s?.values?.length) {
-    const cats = props.chart?.x_categories
-    return s.values.map((p, i) => ({
-      name: cats?.[i] ?? String(i + 1),
-      value: _toNum(Array.isArray(p) ? p[1] : p) ?? 0,
-    }))
-  }
-  return []
-}
-function radarData() {
-  const cats = props.chart?.x_categories || props.chart?.categories || props.chart?.labels || []
-  const series = cartesianSeries()
-  const allVals = series.flatMap((s) => s.points.map((p) => p[1])).filter((v): v is number => v != null)
-  const max = allVals.length ? Math.max(...allVals) * 1.1 : 1
-  const names = cats.length ? cats : (series[0]?.points.map((_, i) => `#${i + 1}`) || [])
-  const indicator = names.map((name) => ({ name, max }))
-  const data = series.map((s) => ({ name: s.name, value: s.points.map((p) => p[1] ?? 0) }))
-  return { indicator, data }
-}
-function gaugeData() {
-  const d = pieData()
-  let value = 0
-  let name = props.title || 'Value'
-  if (d.length) {
-    value = d[0].value
-    name = d[0].name
-  } else {
-    const s = cartesianSeries()[0]
-    const last = s?.points[s.points.length - 1]
-    if (last && last[1] != null) value = last[1]
-  }
-  const max = Number(props.chart?.max) || (value >= 0 && value <= 100 ? 100 : value * 1.3 || 1)
-  return { value, name, max }
-}
-function hasRenderableData(): boolean {
-  const k = kind.value
-  const c = props.chart || {}
-  if (k === 'heatmap') return heatmapData().data.length > 0
-  if (k === 'candlestick') return Array.isArray(c.candles) && c.candles.length > 0
-  if (k === 'boxplot') return Array.isArray(c.boxes) && c.boxes.length > 0
-  if (k === 'sankey' || k === 'graph') return Array.isArray(c.links) && c.links.length > 0
-  if (k === 'treemap' || k === 'sunburst') return (c.items?.length || 0) > 0 || pieData().length > 0
-  if (k === 'pie' || k === 'donut' || k === 'funnel' || k === 'waterfall') return pieData().length > 0
-  if (k === 'gauge') return pieData().length > 0 || cartesianSeries().length > 0
-  return cartesianSeries().length > 0
-}
-const renderable = computed(() => hasRenderableData())
 function buildOption(): echarts.EChartsOption {
   const dark = typeof matchMedia !== 'undefined' && matchMedia('(prefers-color-scheme: dark)').matches
-  const tc = dark ? '#8d93aa' : '#5a5f72'
-  const k = kind.value
-  if (k === 'heatmap') {
-    const { xs, ys, data, vmin, vmax } = heatmapData()
-    const absMax = Math.max(Math.abs(vmin), Math.abs(vmax)) || 1
-    const symmetric = vmin < 0 // correlation-style data spans negatives → diverging scale
-    return {
-      animation: true,
-      backgroundColor: 'transparent',
-      textStyle: { color: tc, fontSize: 11 },
-      tooltip: {
-        position: 'top',
-        formatter: (p: any) =>
-          `${ys[p.value?.[1]] ?? ''} × ${xs[p.value?.[0]] ?? ''}: ${Number(p.value?.[2]).toFixed(2)}`,
-      },
-      grid: { left: 60, right: 20, top: 16, bottom: 64, containLabel: true },
-      xAxis: {
-        type: 'category',
-        data: xs,
-        splitArea: { show: true },
-        axisLabel: { fontSize: 10, rotate: xs.length > 5 ? 30 : 0 },
-      },
-      yAxis: { type: 'category', data: ys, splitArea: { show: true }, axisLabel: { fontSize: 10 } },
-      visualMap: {
-        min: symmetric ? -absMax : vmin,
-        max: symmetric ? absMax : vmax,
-        calculable: true,
-        orient: 'horizontal',
-        left: 'center',
-        bottom: 0,
-        itemHeight: 80,
-        textStyle: { color: tc, fontSize: 10 },
-        inRange: { color: symmetric ? ['#ef4444', '#f8fafc', '#3b82f6'] : ['#dbeafe', '#3b82f6', '#1e3a8a'] },
-      },
-      series: [
-        {
-          type: 'heatmap',
-          data,
-          label: {
-            show: xs.length <= 10 && ys.length <= 10,
-            fontSize: 10,
-            formatter: (p: any) => (typeof p.value?.[2] === 'number' ? p.value[2].toFixed(2) : ''),
-          },
-          emphasis: { itemStyle: { shadowBlur: 8, shadowColor: 'rgba(0,0,0,0.3)' } },
-        },
-      ],
-    }
-  }
-  if (k === 'pie' || k === 'donut') {
-    const d = pieData()
-    return {
-      animation: true,
-      backgroundColor: 'transparent',
-      textStyle: { color: tc, fontSize: 11 },
-      tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
-      legend: { bottom: 0, textStyle: { color: tc, fontSize: 10 } },
-      series: [
-        {
-          type: 'pie',
-          radius: k === 'donut' ? ['42%', '70%'] : '65%',
-          center: ['50%', '46%'],
-          data: d.map((x, i) => ({ ...x, itemStyle: { color: PALETTE[i % PALETTE.length] } })),
-          label: { fontSize: 10, color: tc },
-        },
-      ],
-    }
-  }
-  if (k === 'funnel') {
-    const d = pieData()
-    return {
-      animation: true,
-      backgroundColor: 'transparent',
-      textStyle: { color: tc, fontSize: 11 },
-      tooltip: { trigger: 'item', formatter: '{b}: {c}' },
-      legend: { bottom: 0, textStyle: { color: tc, fontSize: 10 } },
-      series: [
-        {
-          type: 'funnel',
-          left: '10%',
-          right: '10%',
-          top: 20,
-          bottom: 40,
-          sort: 'descending',
-          gap: 2,
-          label: { show: true, position: 'inside', fontSize: 10 },
-          data: d.map((x, i) => ({ ...x, itemStyle: { color: PALETTE[i % PALETTE.length] } })),
-        },
-      ],
-    }
-  }
-  if (k === 'gauge') {
-    const g = gaugeData()
-    return {
-      animation: true,
-      backgroundColor: 'transparent',
-      series: [
-        {
-          type: 'gauge',
-          min: 0,
-          max: g.max,
-          progress: { show: true, width: 14 },
-          axisLine: { lineStyle: { width: 14 } },
-          axisLabel: { fontSize: 9, color: tc },
-          detail: { valueAnimation: true, fontSize: 22, color: tc, formatter: '{value}' },
-          data: [{ value: Number(g.value.toFixed(2)), name: g.name }],
-          title: { fontSize: 11, color: tc },
-        },
-      ],
-    }
-  }
-  if (k === 'radar') {
-    const { indicator, data } = radarData()
-    return {
-      animation: true,
-      backgroundColor: 'transparent',
-      textStyle: { color: tc, fontSize: 11 },
-      tooltip: { trigger: 'item' },
-      legend: data.length > 1 ? { bottom: 0, textStyle: { color: tc, fontSize: 10 } } : undefined,
-      radar: { indicator, axisName: { fontSize: 10, color: tc }, splitLine: { lineStyle: { opacity: 0.3 } } },
-      series: [
-        {
-          type: 'radar',
-          data: data.map((s, i) => ({
-            ...s,
-            areaStyle: { opacity: 0.12, color: PALETTE[i % PALETTE.length] },
-            lineStyle: { color: PALETTE[i % PALETTE.length] },
-            itemStyle: { color: PALETTE[i % PALETTE.length] },
-          })),
-        },
-      ],
-    }
-  }
-  if (k === 'candlestick') {
-    const cats = props.chart?.x_categories || []
-    const data = (props.chart?.candles || []).map((c) => (Array.isArray(c) ? c.slice(0, 4).map((v) => _toNum(v) ?? 0) : []))
-    return {
-      backgroundColor: 'transparent',
-      textStyle: { color: tc, fontSize: 11 },
-      tooltip: { trigger: 'axis' },
-      grid: { left: 48, right: 16, top: 20, bottom: 56, containLabel: true },
-      xAxis: { type: 'category', data: cats, axisLabel: { fontSize: 10 } },
-      yAxis: { type: 'value', scale: true, splitLine: { lineStyle: { opacity: 0.2 } } },
-      dataZoom: [{ type: 'inside' }, { type: 'slider', height: 16, bottom: 8 }],
-      series: [
-        {
-          type: 'candlestick',
-          data,
-          itemStyle: { color: POSITIVE, color0: NEGATIVE, borderColor: POSITIVE, borderColor0: NEGATIVE },
-        },
-      ],
-    }
-  }
-  if (k === 'boxplot') {
-    const cats = props.chart?.x_categories || []
-    const data = (props.chart?.boxes || []).map((b) => (Array.isArray(b) ? b.slice(0, 5).map((v) => _toNum(v) ?? 0) : []))
-    return {
-      backgroundColor: 'transparent',
-      textStyle: { color: tc, fontSize: 11 },
-      tooltip: { trigger: 'item' },
-      grid: { left: 48, right: 16, top: 20, bottom: 40, containLabel: true },
-      xAxis: { type: 'category', data: cats, axisLabel: { fontSize: 10 } },
-      yAxis: { type: 'value', scale: true, splitLine: { lineStyle: { opacity: 0.2 } } },
-      series: [{ type: 'boxplot', data, itemStyle: { color: 'rgba(59,130,246,0.25)', borderColor: '#3b82f6' } }],
-    }
-  }
-  if (k === 'treemap' || k === 'sunburst') {
-    const src = props.chart?.items?.length
-      ? props.chart.items.map((it, i) => ({ name: it.label || it.name || `Item ${i + 1}`, value: _toNum(it.value) ?? 0 }))
-      : pieData()
-    const d = src.map((x, i) => ({ ...x, itemStyle: { color: PALETTE[i % PALETTE.length] } }))
-    return {
-      backgroundColor: 'transparent',
-      textStyle: { color: tc, fontSize: 11 },
-      tooltip: { trigger: 'item', formatter: '{b}: {c}' },
-      series: [
-        k === 'sunburst'
-          ? { type: 'sunburst', data: d, radius: [0, '92%'], label: { fontSize: 10 } }
-          : { type: 'treemap', data: d, breadcrumb: { show: false }, roam: false, label: { fontSize: 11 } },
-      ],
-    }
-  }
-  if (k === 'sankey' || k === 'graph') {
-    const nodes = (props.chart?.nodes || []).map((n) => ({ name: typeof n === 'string' ? n : n.name || '' }))
-    const links = (props.chart?.links || []).map((l) => ({ source: l.source, target: l.target, value: _toNum(l.value) ?? 1 }))
-    const named = new Set(nodes.map((n) => n.name))
-    for (const l of links) {
-      for (const e of [l.source, l.target]) {
-        const s = String(e)
-        if (e != null && !named.has(s)) {
-          nodes.push({ name: s })
-          named.add(s)
-        }
-      }
-    }
-    return {
-      backgroundColor: 'transparent',
-      textStyle: { color: tc, fontSize: 11 },
-      tooltip: { trigger: 'item' },
-      series: [
-        k === 'graph'
-          ? { type: 'graph', layout: 'force', roam: true, data: nodes, links, label: { show: true, fontSize: 10 }, force: { repulsion: 140 } }
-          : { type: 'sankey', data: nodes, links, label: { fontSize: 10, color: tc }, emphasis: { focus: 'adjacency' }, lineStyle: { color: 'gradient', opacity: 0.5 } },
-      ],
-    }
-  }
-  if (k === 'waterfall') {
-    const pts = pieData()
-    const cats = pts.map((p) => p.name)
-    const base: (number | string)[] = []
-    const inc: (number | string)[] = []
-    const dec: (number | string)[] = []
-    let run = 0
-    for (const p of pts) {
-      const v = Number(p.value) || 0
-      if (v >= 0) {
-        base.push(run); inc.push(v); dec.push('-')
-      } else {
-        base.push(run + v); inc.push('-'); dec.push(-v)
-      }
-      run += v
-    }
-    return {
-      backgroundColor: 'transparent',
-      textStyle: { color: tc, fontSize: 11 },
-      tooltip: { trigger: 'axis' },
-      grid: { left: 48, right: 16, top: 20, bottom: 40, containLabel: true },
-      xAxis: { type: 'category', data: cats, axisLabel: { fontSize: 10, rotate: cats.length > 6 ? 30 : 0 } },
-      yAxis: { type: 'value', splitLine: { lineStyle: { opacity: 0.2 } } },
-      series: [
-        { type: 'bar', stack: 'wf', itemStyle: { color: 'transparent' }, emphasis: { itemStyle: { color: 'transparent' } }, data: base },
-        { type: 'bar', stack: 'wf', name: 'Increase', itemStyle: { color: POSITIVE }, data: inc },
-        { type: 'bar', stack: 'wf', name: 'Decrease', itemStyle: { color: NEGATIVE }, data: dec },
-      ],
-    }
-  }
-  if (k === 'bubble') {
-    const eb = (props.chart?.series || []).map((s, i) => ({
-      name: s.name || `Series ${i + 1}`,
-      type: 'scatter' as const,
-      data: (Array.isArray(s.values) ? s.values : [])
-        .filter((v) => Array.isArray(v) && (v as number[]).length >= 2)
-        .map((v) => (v as number[]).map((x) => _toNum(x) ?? 0)),
-      symbolSize: (val: number[]) => Math.max(8, Math.sqrt(Math.abs(Number(val?.[2]) || 1)) * 5),
-      itemStyle: { color: PALETTE[i % PALETTE.length], opacity: 0.7 },
-    }))
-    return {
-      backgroundColor: 'transparent',
-      textStyle: { color: tc, fontSize: 11 },
-      tooltip: { trigger: 'item' },
-      legend: eb.length > 1 ? { bottom: 0, textStyle: { color: tc, fontSize: 10 } } : undefined,
-      grid: { left: 48, right: 24, top: 20, bottom: 40, containLabel: true },
-      xAxis: { type: 'value', name: props.chart?.x_label || '', nameLocation: 'middle', nameGap: 26, splitLine: { lineStyle: { opacity: 0.2 } } },
-      yAxis: { type: 'value', name: props.chart?.y_label || '', nameLocation: 'middle', nameGap: 36, splitLine: { lineStyle: { opacity: 0.2 } } },
-      series: eb,
-    }
-  }
-  // cartesian family: line / bar / hbar / area / scatter / stacked / combo / histogram
-  const series = cartesianSeries()
-  const isHBar = k === 'hbar' || k === 'horizontal-bar' || k === 'horizontal_bar'
-  const isStacked = k === 'stacked' || k === 'stacked-bar' || k === 'stacked_bar'
-  const isCombo = k === 'combo'
-  const isBar = k === 'bar' || k === 'histogram' || isStacked || isHBar
-  const isScatter = k === 'scatter' || k === 'bubble'
-  const isArea = k === 'area'
-  // Category axis (e.g. "Q1 2023") when x_categories provided; else numeric.
-  const cats = props.chart?.x_categories
-  const useCat = Array.isArray(cats) && cats.length > 0
-  const eSeries = series.map((s, i) => {
-    const seriesType = (
-      isCombo ? (s.kind === 'line' ? 'line' : s.kind === 'bar' ? 'bar' : i === 0 ? 'bar' : 'line')
-      : isBar ? 'bar'
-      : isScatter ? 'scatter'
-      : 'line'
-    ) as 'bar' | 'scatter' | 'line'
-    const asLine = seriesType === 'line'
-    return {
-      name: s.name,
-      type: seriesType,
-      data: useCat ? s.points.map((p) => p[1]) : s.points,
-      stack: isStacked ? 'total' : undefined,
-      smooth: asLine,
-      showSymbol: seriesType === 'scatter' || asLine,
-      symbolSize: seriesType === 'scatter' ? 10 : 6,
-      itemStyle: { color: s.color },
-      areaStyle: isArea && asLine ? { opacity: 0.18, color: s.color } : undefined,
-      lineStyle: asLine ? { width: 2 } : undefined,
-      emphasis: { focus: 'series' as const },
-      animationDuration: 900,
-      animationEasing: 'cubicOut' as const,
-    }
-  })
-  const legendNames = series.map((s) => s.name)
-  const valueAxis = {
-    type: 'value' as const,
-    name: (isHBar ? props.chart?.x_label : props.chart?.y_label) || '',
-    nameLocation: 'middle' as const,
-    nameGap: 36,
-    splitLine: { show: true, lineStyle: { opacity: 0.2 } },
-  }
-  const catAxis = useCat
-    ? {
-        type: 'category' as const,
-        data: cats,
-        name: (isHBar ? props.chart?.y_label : props.chart?.x_label) || '',
-        nameLocation: 'middle' as const,
-        nameGap: 30,
-        axisLabel: { fontSize: 10, rotate: !isHBar && (cats as string[]).length > 6 ? 30 : 0 },
-      }
-    : {
-        type: 'value' as const,
-        name: (isHBar ? props.chart?.y_label : props.chart?.x_label) || '',
-        nameLocation: 'middle' as const,
-        nameGap: 28,
-        splitLine: { show: true, lineStyle: { opacity: 0.2 } },
-      }
-  return {
-    animation: true,
-    animationDuration: 1100,
-    backgroundColor: 'transparent',
-    textStyle: { color: tc, fontSize: 11 },
-    grid: { left: 48, right: 24, top: 36, bottom: 40, containLabel: true },
-    tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } },
-    legend: legendNames.length > 1 ? { data: legendNames, bottom: 0, textStyle: { color: tc, fontSize: 10 } } : undefined,
-    xAxis: isHBar ? valueAxis : catAxis,
-    yAxis: isHBar ? catAxis : valueAxis,
-    series: eSeries,
-  }
 }
 function resize() {

 <script setup lang="ts">
 import { onMounted, onUnmounted, ref, watch, computed, nextTick } from 'vue'
 import * as echarts from 'echarts'
+import 'echarts-gl' // registers 3D series: scatter3D / bar3D / line3D / surface
 import { ArrowDownTrayIcon } from '@/components/icons'
+import { buildEChartsOption, chartHasRenderableData, type ChartSpec } from '@/lib/echartsOption'
 const props = defineProps<{
   title?: string
+  chart: ChartSpec
 }>()
 const rootEl = ref<HTMLDivElement | null>(null)
 let chart: echarts.ECharts | null = null
 const kind = computed(() => String(props.chart?.kind || 'line').toLowerCase())
+const renderable = computed(() => chartHasRenderableData(props.chart))
 function buildOption(): echarts.EChartsOption {
   const dark = typeof matchMedia !== 'undefined' && matchMedia('(prefers-color-scheme: dark)').matches
+  return buildEChartsOption(props.chart, props.title || '', { dark })
 }
 function resize() {

vivek/frontend-vue/src/components/widgets/ActionRow.vue CHANGED Viewed

@@ -2,6 +2,13 @@
 import Button from '@/components/ui/Button.vue'
 defineProps<{ block: { buttons?: { label?: string; intent?: string }[] } }>()
 </script>
 <template>
@@ -12,8 +19,8 @@ defineProps<{ block: { buttons?: { label?: string; intent?: string }[] } }>()
       type="button"
       variant="outline"
       size="sm"
-      disabled
-      :title="b.intent ? `Intent: ${b.intent}` : undefined"
     >
       {{ b.label || 'Action' }}
     </Button>

 import Button from '@/components/ui/Button.vue'
 defineProps<{ block: { buttons?: { label?: string; intent?: string }[] } }>()
+const emit = defineEmits<{ (e: 'action', text: string): void }>()
+function click(b: { label?: string; intent?: string }) {
+  // Send the human-readable label as the follow-up prompt (fall back to the intent code).
+  const text = String(b.label || b.intent || '').trim()
+  if (text) emit('action', text)
+}
 </script>
 <template>
       type="button"
       variant="outline"
       size="sm"
+      :title="b.intent ? `Ask: ${b.label || b.intent}` : undefined"
+      @click="click(b)"
     >
       {{ b.label || 'Action' }}
     </Button>

vivek/frontend-vue/src/lib/analyticsStore.ts CHANGED Viewed

@@ -4,7 +4,7 @@ export type DoneEventForAnalytics = {
   ts: number
   strategy: string
   elapsed: number | null | undefined
-  widgetHtml: string
 }
 export type RewardEventForAnalytics = {
@@ -32,15 +32,15 @@ const MAX_EVENTS = 300
 export function ingestDone(evt: {
   strategy: string
   elapsed?: number | null
-  widget_html?: string
-  widgetHtml?: string
 }) {
-  const widgetHtml = (evt.widgetHtml ?? evt.widget_html ?? '') as string
   analyticsState.doneEvents.push({
     ts: Date.now(),
     strategy: evt.strategy,
     elapsed: evt.elapsed,
-    widgetHtml,
   })
   if (analyticsState.doneEvents.length > MAX_EVENTS) {
     analyticsState.doneEvents.splice(0, analyticsState.doneEvents.length - MAX_EVENTS)
@@ -63,7 +63,7 @@ export function ingestReward(evt: { strategy: string; reward: number; predictedR
 export function computeWidgetRenderRate(): number {
   const ds = analyticsState.doneEvents
   if (!ds.length) return 0
-  const withWidgets = ds.filter((d) => (d.widgetHtml ?? '').trim().length > 0).length
   return withWidgets / ds.length
 }

   ts: number
   strategy: string
   elapsed: number | null | undefined
+  widgetSchema: string
 }
 export type RewardEventForAnalytics = {
 export function ingestDone(evt: {
   strategy: string
   elapsed?: number | null
+  widget_schema?: string
+  widgetSchema?: string
 }) {
+  const widgetSchema = (evt.widgetSchema ?? evt.widget_schema ?? '') as string
   analyticsState.doneEvents.push({
     ts: Date.now(),
     strategy: evt.strategy,
     elapsed: evt.elapsed,
+    widgetSchema,
   })
   if (analyticsState.doneEvents.length > MAX_EVENTS) {
     analyticsState.doneEvents.splice(0, analyticsState.doneEvents.length - MAX_EVENTS)
 export function computeWidgetRenderRate(): number {
   const ds = analyticsState.doneEvents
   if (!ds.length) return 0
+  const withWidgets = ds.filter((d) => (d.widgetSchema ?? '').trim().length > 0).length
   return withWidgets / ds.length
 }

vivek/frontend-vue/src/lib/echartsOption.ts ADDED Viewed

	@@ -0,0 +1,727 @@

+/**
+ * Shared ECharts option builder — the SINGLE source for chart configuration.
+ *
+ * Used by:
+ *   - WidgetSchemaChart.vue (live interactive render)
+ *   - exportWidgetHtml.ts    (standalone HTML export)
+ *
+ * Pure functions only (no Vue, no DOM): given the chart spec + a `dark` flag,
+ * return the ECharts `option`. This guarantees the exported HTML matches what
+ * the user sees on screen.
+ */
+import type { EChartsOption } from 'echarts'
+export type ChartSeries = { name?: string; color?: string; kind?: string; values?: (number | number[])[] }
+export type TreeNodeSpec = { name?: string; label?: string; value?: number; children?: TreeNodeSpec[] }
+export type ChartSpec = {
+  kind?: string
+  x_label?: string
+  y_label?: string
+  max?: number
+  x_labels?: string[]
+  y_labels?: string[]
+  categories?: string[]
+  labels?: string[]
+  matrix?: number[][]
+  series?: ChartSeries[]
+  x_categories?: string[]
+  items?: { label?: string; name?: string; value?: number }[]
+  // tree / mindmap / org: a single hierarchical root
+  root?: TreeNodeSpec
+  candles?: (number | string)[][]
+  boxes?: (number | string)[][]
+  nodes?: ({ name?: string } | string)[]
+  links?: { source?: string | number; target?: string | number; value?: number }[]
+}
+const COLOR_MAP: Record<string, string> = {
+  blue: '#3b82f6',
+  orange: '#f97316',
+  green: '#22c55e',
+  red: '#ef4444',
+  purple: '#a855f7',
+  teal: '#14b8a6',
+  yellow: '#eab308',
+  pink: '#ec4899',
+  indigo: '#4f46e5',
+  cyan: '#0891b2',
+  gray: '#64748b',
+}
+const PALETTE = ['#3b82f6', '#f97316', '#22c55e', '#ef4444', '#a855f7', '#14b8a6', '#eab308', '#ec4899']
+const POSITIVE = '#16a34a'
+const NEGATIVE = '#dc2626'
+function resolveColor(c?: string, i = 0): string {
+  if (!c) return PALETTE[i % PALETTE.length]
+  return COLOR_MAP[c.toLowerCase()] || c
+}
+function toNum(v: unknown): number | null {
+  if (typeof v === 'number') return Number.isFinite(v) ? v : null
+  if (typeof v === 'string') {
+    const m = v.replace(/,/g, '').match(/-?\d+(\.\d+)?/)
+    return m ? parseFloat(m[0]) : null
+  }
+  return null
+}
+function chartKind(chart: ChartSpec): string {
+  return String(chart?.kind || 'line').toLowerCase()
+}
+function cartesianSeries(chart: ChartSpec) {
+  const raw = chart?.series || []
+  return raw
+    .map((s, i) => {
+      const vals = Array.isArray(s.values) ? s.values : []
+      let pts: [number, number | null][] = []
+      if (vals.length && !Array.isArray(vals[0])) {
+        pts = (vals as unknown[]).map((v, j) => [j, toNum(v)])
+      } else {
+        pts = (vals as unknown[])
+          .filter((p) => Array.isArray(p) && (p as unknown[]).length >= 2)
+          .map((p) => [(toNum((p as unknown[])[0]) ?? 0), toNum((p as unknown[])[1])] as [number, number | null])
+      }
+      return { name: s.name || `Series ${i + 1}`, color: resolveColor(s.color, i), kind: s.kind, points: pts }
+    })
+    .filter((s) => s.points.some((p) => p[1] != null))
+}
+function heatmapData(chart: ChartSpec) {
+  const xs = chart?.x_labels || chart?.categories || chart?.labels || []
+  const ys = chart?.y_labels || chart?.categories || chart?.labels || []
+  const m = chart?.matrix
+  const data: [number, number, number][] = []
+  let vmin = Infinity
+  let vmax = -Infinity
+  if (Array.isArray(m)) {
+    for (let r = 0; r < m.length; r++) {
+      const row = Array.isArray(m[r]) ? m[r] : []
+      for (let c = 0; c < row.length; c++) {
+        const v = Number(row[c])
+        if (!Number.isFinite(v)) continue
+        data.push([c, r, v])
+        if (v < vmin) vmin = v
+        if (v > vmax) vmax = v
+      }
+    }
+  }
+  if (!Number.isFinite(vmin)) {
+    vmin = 0
+    vmax = 1
+  }
+  return { xs, ys, data, vmin, vmax }
+}
+function pieData(chart: ChartSpec) {
+  const items = chart?.items || []
+  if (items.length) {
+    return items.map((it, i) => ({ name: it.label || it.name || `Item ${i + 1}`, value: toNum(it.value) ?? 0 }))
+  }
+  const s = (chart?.series || [])[0]
+  if (s?.values?.length) {
+    const cats = chart?.x_categories
+    return s.values.map((p, i) => ({
+      name: cats?.[i] ?? String(i + 1),
+      value: toNum(Array.isArray(p) ? p[1] : p) ?? 0,
+    }))
+  }
+  return []
+}
+function radarData(chart: ChartSpec) {
+  const cats = chart?.x_categories || chart?.categories || chart?.labels || []
+  const series = cartesianSeries(chart)
+  const allVals = series.flatMap((s) => s.points.map((p) => p[1])).filter((v): v is number => v != null)
+  const max = allVals.length ? Math.max(...allVals) * 1.1 : 1
+  const names = cats.length ? cats : series[0]?.points.map((_, i) => `#${i + 1}`) || []
+  const indicator = names.map((name) => ({ name, max }))
+  const data = series.map((s) => ({ name: s.name, value: s.points.map((p) => p[1] ?? 0) }))
+  return { indicator, data }
+}
+function gaugeData(chart: ChartSpec, title: string) {
+  const d = pieData(chart)
+  let value = 0
+  let name = title || 'Value'
+  if (d.length) {
+    value = d[0].value
+    name = d[0].name
+  } else {
+    const s = cartesianSeries(chart)[0]
+    const last = s?.points[s.points.length - 1]
+    if (last && last[1] != null) value = last[1]
+  }
+  const max = Number(chart?.max) || (value >= 0 && value <= 100 ? 100 : value * 1.3 || 1)
+  return { value, name, max }
+}
+/** 3D series: each series' values are [x, y, z] triples. */
+function series3d(chart: ChartSpec) {
+  return (chart?.series || [])
+    .map((s, i) => ({
+      name: s.name || `Series ${i + 1}`,
+      color: resolveColor(s.color, i),
+      data: (Array.isArray(s.values) ? s.values : [])
+        .filter((v) => Array.isArray(v) && (v as number[]).length >= 3)
+        .map((v) => (v as number[]).slice(0, 3).map((x) => toNum(x) ?? 0)),
+    }))
+    .filter((s) => s.data.length > 0)
+}
+/** Normalize a hierarchical node (tree/mindmap/org): ensure `name`, recurse `children`. */
+function normalizeTreeNode(n: TreeNodeSpec | undefined, depth = 0): { name: string; value?: number; children?: any[] } | null {
+  if (!n || typeof n !== 'object' || depth > 8) return null
+  const name = String(n.name || n.label || '').trim()
+  const kids = Array.isArray(n.children)
+    ? n.children.map((c) => normalizeTreeNode(c, depth + 1)).filter(Boolean)
+    : []
+  if (!name && kids.length === 0) return null
+  const out: { name: string; value?: number; children?: any[] } = { name: name || '·' }
+  if (typeof n.value === 'number') out.value = n.value
+  if (kids.length) out.children = kids
+  return out
+}
+function treeRoot(chart: ChartSpec) {
+  const c = chart as ChartSpec & { tree?: TreeNodeSpec; data?: unknown; children?: TreeNodeSpec[]; name?: string }
+  // Accept common variants the model may emit: root | tree | data | a top-level node | items as children.
+  let raw: TreeNodeSpec | undefined = c.root || c.tree
+  if (!raw && c.data && typeof c.data === 'object') raw = (Array.isArray(c.data) ? c.data[0] : c.data) as TreeNodeSpec
+  if (!raw && (c.name || c.children)) raw = { name: c.name, children: c.children }
+  if (!raw && Array.isArray(chart?.items) && chart.items.length) {
+    raw = { name: '', children: chart.items.map((it) => ({ name: it.label || it.name, value: it.value })) }
+  }
+  return normalizeTreeNode(raw)
+}
+const GL_KINDS = new Set(['scatter3d', 'bar3d', 'line3d'])
+export function isGlKind(kind?: string): boolean {
+  return GL_KINDS.has(String(kind || '').toLowerCase())
+}
+export function chartHasRenderableData(chart: ChartSpec): boolean {
+  const k = chartKind(chart)
+  const c = chart || {}
+  if (k === 'heatmap') return heatmapData(chart).data.length > 0
+  if (k === 'candlestick') return Array.isArray(c.candles) && c.candles.length > 0
+  if (k === 'boxplot') return Array.isArray(c.boxes) && c.boxes.length > 0
+  if (k === 'sankey' || k === 'graph') return Array.isArray(c.links) && c.links.length > 0
+  if (k === 'treemap' || k === 'sunburst') return (c.items?.length || 0) > 0 || pieData(chart).length > 0
+  if (k === 'pie' || k === 'donut' || k === 'funnel' || k === 'waterfall' || k === 'rose') return pieData(chart).length > 0
+  if (k === 'tree' || k === 'mindmap' || k === 'org' || k === 'orgchart') return treeRoot(chart) != null
+  if (k === 'scatter3d' || k === 'bar3d' || k === 'line3d') return series3d(chart).length > 0
+  if (k === 'gauge') return pieData(chart).length > 0 || cartesianSeries(chart).length > 0
+  return cartesianSeries(chart).length > 0
+}
+export function buildEChartsOption(chart: ChartSpec, title = '', opts: { dark?: boolean } = {}): EChartsOption {
+  const dark = !!opts.dark
+  const tc = dark ? '#8d93aa' : '#5a5f72'
+  const k = chartKind(chart)
+  if (k === 'heatmap') {
+    const { xs, ys, data, vmin, vmax } = heatmapData(chart)
+    const absMax = Math.max(Math.abs(vmin), Math.abs(vmax)) || 1
+    const symmetric = vmin < 0
+    return {
+      animation: true,
+      backgroundColor: 'transparent',
+      textStyle: { color: tc, fontSize: 11 },
+      tooltip: {
+        position: 'top',
+        formatter: (p: any) =>
+          `${ys[p.value?.[1]] ?? ''} × ${xs[p.value?.[0]] ?? ''}: ${Number(p.value?.[2]).toFixed(2)}`,
+      },
+      grid: { left: 60, right: 20, top: 16, bottom: 64, containLabel: true },
+      xAxis: {
+        type: 'category',
+        data: xs,
+        splitArea: { show: true },
+        axisLabel: { fontSize: 10, rotate: xs.length > 5 ? 30 : 0 },
+      },
+      yAxis: { type: 'category', data: ys, splitArea: { show: true }, axisLabel: { fontSize: 10 } },
+      visualMap: {
+        min: symmetric ? -absMax : vmin,
+        max: symmetric ? absMax : vmax,
+        calculable: true,
+        orient: 'horizontal',
+        left: 'center',
+        bottom: 0,
+        itemHeight: 80,
+        textStyle: { color: tc, fontSize: 10 },
+        inRange: { color: symmetric ? ['#ef4444', '#f8fafc', '#3b82f6'] : ['#dbeafe', '#3b82f6', '#1e3a8a'] },
+      },
+      series: [
+        {
+          type: 'heatmap',
+          data,
+          label: {
+            show: xs.length <= 10 && ys.length <= 10,
+            fontSize: 10,
+            formatter: (p: any) => (typeof p.value?.[2] === 'number' ? p.value[2].toFixed(2) : ''),
+          },
+          emphasis: { itemStyle: { shadowBlur: 8, shadowColor: 'rgba(0,0,0,0.3)' } },
+        },
+      ],
+    }
+  }
+  if (k === 'pie' || k === 'donut') {
+    const d = pieData(chart)
+    return {
+      animation: true,
+      backgroundColor: 'transparent',
+      textStyle: { color: tc, fontSize: 11 },
+      tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
+      legend: { bottom: 0, textStyle: { color: tc, fontSize: 10 } },
+      series: [
+        {
+          type: 'pie',
+          radius: k === 'donut' ? ['42%', '70%'] : '65%',
+          center: ['50%', '46%'],
+          data: d.map((x, i) => ({ ...x, itemStyle: { color: PALETTE[i % PALETTE.length] } })),
+          label: { fontSize: 10, color: tc },
+        },
+      ],
+    }
+  }
+  if (k === 'funnel') {
+    const d = pieData(chart)
+    return {
+      animation: true,
+      backgroundColor: 'transparent',
+      textStyle: { color: tc, fontSize: 11 },
+      tooltip: { trigger: 'item', formatter: '{b}: {c}' },
+      legend: { bottom: 0, textStyle: { color: tc, fontSize: 10 } },
+      series: [
+        {
+          type: 'funnel',
+          left: '10%',
+          right: '10%',
+          top: 20,
+          bottom: 40,
+          sort: 'descending',
+          gap: 2,
+          label: { show: true, position: 'inside', fontSize: 10 },
+          data: d.map((x, i) => ({ ...x, itemStyle: { color: PALETTE[i % PALETTE.length] } })),
+        },
+      ],
+    }
+  }
+  if (k === 'gauge') {
+    const g = gaugeData(chart, title)
+    return {
+      animation: true,
+      backgroundColor: 'transparent',
+      series: [
+        {
+          type: 'gauge',
+          min: 0,
+          max: g.max,
+          progress: { show: true, width: 14 },
+          axisLine: { lineStyle: { width: 14 } },
+          axisLabel: { fontSize: 9, color: tc },
+          detail: { valueAnimation: true, fontSize: 22, color: tc, formatter: '{value}' },
+          data: [{ value: Number(g.value.toFixed(2)), name: g.name }],
+          title: { fontSize: 11, color: tc },
+        },
+      ],
+    }
+  }
+  if (k === 'radar') {
+    const { indicator, data } = radarData(chart)
+    return {
+      animation: true,
+      backgroundColor: 'transparent',
+      textStyle: { color: tc, fontSize: 11 },
+      tooltip: { trigger: 'item' },
+      legend: data.length > 1 ? { bottom: 0, textStyle: { color: tc, fontSize: 10 } } : undefined,
+      radar: { indicator, axisName: { fontSize: 10, color: tc }, splitLine: { lineStyle: { opacity: 0.3 } } },
+      series: [
+        {
+          type: 'radar',
+          data: data.map((s, i) => ({
+            ...s,
+            areaStyle: { opacity: 0.12, color: PALETTE[i % PALETTE.length] },
+            lineStyle: { color: PALETTE[i % PALETTE.length] },
+            itemStyle: { color: PALETTE[i % PALETTE.length] },
+          })),
+        },
+      ],
+    }
+  }
+  if (k === 'candlestick') {
+    const cats = chart?.x_categories || []
+    const data = (chart?.candles || []).map((c) => (Array.isArray(c) ? c.slice(0, 4).map((v) => toNum(v) ?? 0) : []))
+    return {
+      backgroundColor: 'transparent',
+      textStyle: { color: tc, fontSize: 11 },
+      tooltip: { trigger: 'axis' },
+      grid: { left: 48, right: 16, top: 20, bottom: 56, containLabel: true },
+      xAxis: { type: 'category', data: cats, axisLabel: { fontSize: 10 } },
+      yAxis: { type: 'value', scale: true, splitLine: { lineStyle: { opacity: 0.2 } } },
+      dataZoom: [{ type: 'inside' }, { type: 'slider', height: 16, bottom: 8 }],
+      series: [
+        {
+          type: 'candlestick',
+          data,
+          itemStyle: { color: POSITIVE, color0: NEGATIVE, borderColor: POSITIVE, borderColor0: NEGATIVE },
+        },
+      ],
+    }
+  }
+  if (k === 'boxplot') {
+    const cats = chart?.x_categories || []
+    const data = (chart?.boxes || []).map((b) => (Array.isArray(b) ? b.slice(0, 5).map((v) => toNum(v) ?? 0) : []))
+    return {
+      backgroundColor: 'transparent',
+      textStyle: { color: tc, fontSize: 11 },
+      tooltip: { trigger: 'item' },
+      grid: { left: 48, right: 16, top: 20, bottom: 40, containLabel: true },
+      xAxis: { type: 'category', data: cats, axisLabel: { fontSize: 10 } },
+      yAxis: { type: 'value', scale: true, splitLine: { lineStyle: { opacity: 0.2 } } },
+      series: [{ type: 'boxplot', data, itemStyle: { color: 'rgba(59,130,246,0.25)', borderColor: '#3b82f6' } }],
+    }
+  }
+  if (k === 'treemap' || k === 'sunburst') {
+    const src = chart?.items?.length
+      ? chart.items.map((it, i) => ({ name: it.label || it.name || `Item ${i + 1}`, value: toNum(it.value) ?? 0 }))
+      : pieData(chart)
+    const d = src.map((x, i) => ({ ...x, itemStyle: { color: PALETTE[i % PALETTE.length] } }))
+    return {
+      backgroundColor: 'transparent',
+      textStyle: { color: tc, fontSize: 11 },
+      tooltip: { trigger: 'item', formatter: '{b}: {c}' },
+      series: [
+        k === 'sunburst'
+          ? { type: 'sunburst', data: d, radius: [0, '92%'], label: { fontSize: 10 } }
+          : { type: 'treemap', data: d, breadcrumb: { show: false }, roam: false, label: { fontSize: 11 } },
+      ],
+    }
+  }
+  if (k === 'sankey' || k === 'graph') {
+    const nodes = (chart?.nodes || []).map((n) => ({ name: typeof n === 'string' ? n : n.name || '' }))
+    const links = (chart?.links || []).map((l) => ({ source: l.source, target: l.target, value: toNum(l.value) ?? 1 }))
+    const named = new Set(nodes.map((n) => n.name))
+    for (const l of links) {
+      for (const e of [l.source, l.target]) {
+        const s = String(e)
+        if (e != null && !named.has(s)) {
+          nodes.push({ name: s })
+          named.add(s)
+        }
+      }
+    }
+    return {
+      backgroundColor: 'transparent',
+      textStyle: { color: tc, fontSize: 11 },
+      tooltip: { trigger: 'item' },
+      series: [
+        k === 'graph'
+          ? { type: 'graph', layout: 'force', roam: true, data: nodes, links, label: { show: true, fontSize: 10 }, force: { repulsion: 140 } }
+          : { type: 'sankey', data: nodes, links, label: { fontSize: 10, color: tc }, emphasis: { focus: 'adjacency' }, lineStyle: { color: 'gradient', opacity: 0.5 } },
+      ],
+    }
+  }
+  if (k === 'waterfall') {
+    const pts = pieData(chart)
+    const cats = pts.map((p) => p.name)
+    const base: (number | string)[] = []
+    const inc: (number | string)[] = []
+    const dec: (number | string)[] = []
+    let run = 0
+    for (const p of pts) {
+      const v = Number(p.value) || 0
+      if (v >= 0) {
+        base.push(run)
+        inc.push(v)
+        dec.push('-')
+      } else {
+        base.push(run + v)
+        inc.push('-')
+        dec.push(-v)
+      }
+      run += v
+    }
+    return {
+      backgroundColor: 'transparent',
+      textStyle: { color: tc, fontSize: 11 },
+      tooltip: { trigger: 'axis' },
+      grid: { left: 48, right: 16, top: 20, bottom: 40, containLabel: true },
+      xAxis: { type: 'category', data: cats, axisLabel: { fontSize: 10, rotate: cats.length > 6 ? 30 : 0 } },
+      yAxis: { type: 'value', splitLine: { lineStyle: { opacity: 0.2 } } },
+      series: [
+        { type: 'bar', stack: 'wf', itemStyle: { color: 'transparent' }, emphasis: { itemStyle: { color: 'transparent' } }, data: base },
+        { type: 'bar', stack: 'wf', name: 'Increase', itemStyle: { color: POSITIVE }, data: inc },
+        { type: 'bar', stack: 'wf', name: 'Decrease', itemStyle: { color: NEGATIVE }, data: dec },
+      ],
+    }
+  }
+  if (k === 'bubble') {
+    const eb = (chart?.series || []).map((s, i) => ({
+      name: s.name || `Series ${i + 1}`,
+      type: 'scatter' as const,
+      data: (Array.isArray(s.values) ? s.values : [])
+        .filter((v) => Array.isArray(v) && (v as number[]).length >= 2)
+        .map((v) => (v as number[]).map((x) => toNum(x) ?? 0)),
+      symbolSize: (val: number[]) => Math.max(8, Math.sqrt(Math.abs(Number(val?.[2]) || 1)) * 5),
+      itemStyle: { color: PALETTE[i % PALETTE.length], opacity: 0.7 },
+    }))
+    return {
+      backgroundColor: 'transparent',
+      textStyle: { color: tc, fontSize: 11 },
+      tooltip: { trigger: 'item' },
+      legend: eb.length > 1 ? { bottom: 0, textStyle: { color: tc, fontSize: 10 } } : undefined,
+      grid: { left: 48, right: 24, top: 20, bottom: 40, containLabel: true },
+      xAxis: { type: 'value', name: chart?.x_label || '', nameLocation: 'middle', nameGap: 26, splitLine: { lineStyle: { opacity: 0.2 } } },
+      yAxis: { type: 'value', name: chart?.y_label || '', nameLocation: 'middle', nameGap: 36, splitLine: { lineStyle: { opacity: 0.2 } } },
+      series: eb,
+    }
+  }
+  if (k === 'rose') {
+    // Nightingale rose ("pizza") — pie with variable-radius slices.
+    const d = pieData(chart)
+    return {
+      animation: true,
+      backgroundColor: 'transparent',
+      textStyle: { color: tc, fontSize: 11 },
+      tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
+      legend: { bottom: 0, textStyle: { color: tc, fontSize: 10 } },
+      series: [
+        {
+          type: 'pie',
+          radius: ['18%', '72%'],
+          center: ['50%', '46%'],
+          roseType: 'area',
+          itemStyle: { borderRadius: 4 },
+          data: d.map((x, i) => ({ ...x, itemStyle: { color: PALETTE[i % PALETTE.length] } })),
+          label: { fontSize: 10, color: tc },
+        },
+      ],
+    }
+  }
+  if (k === 'polar') {
+    // Polar bar — categorical bars wrapped around a circle.
+    const s = cartesianSeries(chart)
+    const cats = chart?.x_categories || s[0]?.points.map((_, i) => `#${i + 1}`) || []
+    return {
+      animation: true,
+      backgroundColor: 'transparent',
+      textStyle: { color: tc, fontSize: 11 },
+      tooltip: { trigger: 'item' },
+      legend: s.length > 1 ? { bottom: 0, textStyle: { color: tc, fontSize: 10 } } : undefined,
+      polar: { radius: ['12%', '72%'] },
+      angleAxis: { type: 'category', data: cats, axisLabel: { fontSize: 10 } },
+      radiusAxis: { axisLabel: { fontSize: 9 } },
+      series: s.map((ss, i) => ({
+        type: 'bar',
+        coordinateSystem: 'polar',
+        name: ss.name,
+        data: ss.points.map((p) => p[1]),
+        itemStyle: { color: ss.color || PALETTE[i % PALETTE.length] },
+      })),
+    } as EChartsOption
+  }
+  if (k === 'parallel') {
+    // Parallel coordinates — one polyline per series across the x_categories dimensions.
+    const s = cartesianSeries(chart)
+    const dims = chart?.x_categories || s[0]?.points.map((_, i) => `Dim ${i + 1}`) || []
+    return {
+      animation: true,
+      backgroundColor: 'transparent',
+      textStyle: { color: tc, fontSize: 11 },
+      tooltip: {},
+      legend: s.length > 1 ? { bottom: 0, textStyle: { color: tc, fontSize: 10 } } : undefined,
+      parallelAxis: dims.map((name, i) => ({ dim: i, name, nameTextStyle: { fontSize: 10 } })),
+      parallel: { left: 60, right: 40, top: 30, bottom: 40 },
+      series: s.map((ss, i) => ({
+        type: 'parallel',
+        name: ss.name,
+        lineStyle: { width: 2, opacity: 0.6, color: ss.color || PALETTE[i % PALETTE.length] },
+        data: [ss.points.map((p) => p[1] ?? 0)],
+      })),
+    } as EChartsOption
+  }
+  if (k === 'themeriver') {
+    // Streamgraph — series.values aligned to x_categories → [time, value, name] triples.
+    const cats = chart?.x_categories || []
+    const data: [string, number, string][] = []
+    for (const s of chart?.series || []) {
+      const name = s.name || 'series'
+      const vals = Array.isArray(s.values) ? s.values : []
+      vals.forEach((v, i) => {
+        const t = cats[i] ?? String(i)
+        data.push([t, toNum(Array.isArray(v) ? v[1] : v) ?? 0, name])
+      })
+    }
+    return {
+      backgroundColor: 'transparent',
+      textStyle: { color: tc, fontSize: 11 },
+      tooltip: { trigger: 'axis', axisPointer: { type: 'line' } },
+      legend: { bottom: 0, textStyle: { color: tc, fontSize: 10 } },
+      singleAxis: { type: 'category', data: cats, top: 20, bottom: 56, axisLabel: { fontSize: 10 } },
+      series: [{ type: 'themeRiver', data, label: { show: false }, emphasis: { focus: 'self' } }],
+    } as EChartsOption
+  }
+  if (k === 'scatter3d' || k === 'bar3d' || k === 'line3d') {
+    const s3 = series3d(chart)
+    const glType = k === 'bar3d' ? 'bar3D' : k === 'line3d' ? 'line3D' : 'scatter3D'
+    return {
+      backgroundColor: 'transparent',
+      tooltip: {},
+      xAxis3D: { type: 'value', name: chart?.x_label || 'X', nameTextStyle: { color: tc } },
+      yAxis3D: { type: 'value', name: chart?.y_label || 'Y', nameTextStyle: { color: tc } },
+      zAxis3D: { type: 'value', name: 'Z', nameTextStyle: { color: tc } },
+      grid3D: {
+        boxWidth: 100,
+        boxDepth: 100,
+        axisLabel: { textStyle: { color: tc, fontSize: 9 } },
+        viewControl: { autoRotate: false, distance: 220 },
+        light: { main: { intensity: 1.2 }, ambient: { intensity: 0.3 } },
+      },
+      series: s3.map((ss, i) => ({
+        type: glType,
+        name: ss.name,
+        data: ss.data,
+        symbolSize: 10,
+        itemStyle: { color: ss.color || PALETTE[i % PALETTE.length], opacity: glType === 'scatter3D' ? 0.85 : 1 },
+        shading: glType === 'bar3D' ? 'lambert' : undefined,
+        lineStyle: glType === 'line3D' ? { width: 3 } : undefined,
+      })),
+    } as unknown as EChartsOption
+  }
+  if (k === 'tree' || k === 'mindmap' || k === 'org' || k === 'orgchart') {
+    const root = treeRoot(chart) || { name: '·' }
+    const radial = k === 'mindmap'
+    const topDown = k === 'org' || k === 'orgchart'
+    return {
+      backgroundColor: 'transparent',
+      textStyle: { color: tc, fontSize: 11 },
+      tooltip: { trigger: 'item', triggerOn: 'mousemove' },
+      series: [
+        {
+          type: 'tree',
+          data: [root],
+          layout: radial ? 'radial' : 'orthogonal',
+          orient: topDown ? 'TB' : 'LR',
+          roam: true,
+          symbol: 'circle',
+          symbolSize: 9,
+          itemStyle: { color: PALETTE[0] },
+          lineStyle: { color: dark ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.2)', width: 1.2, curveness: radial ? 0.3 : 0.5 },
+          label: {
+            position: radial ? 'right' : topDown ? 'top' : 'left',
+            verticalAlign: 'middle',
+            align: radial ? 'left' : topDown ? 'center' : 'right',
+            fontSize: 11,
+            color: tc,
+          },
+          leaves: { label: { position: topDown ? 'bottom' : 'right', align: topDown ? 'center' : 'left' } },
+          expandAndCollapse: true,
+          initialTreeDepth: -1,
+          animationDuration: 600,
+        },
+      ],
+    } as EChartsOption
+  }
+  // cartesian family: line / bar / hbar / area / scatter / stacked / combo / histogram / timeseries
+  const series = cartesianSeries(chart)
+  const isHBar = k === 'hbar' || k === 'horizontal-bar' || k === 'horizontal_bar'
+  const isStacked = k === 'stacked' || k === 'stacked-bar' || k === 'stacked_bar'
+  const isCombo = k === 'combo'
+  const isBar = k === 'bar' || k === 'histogram' || isStacked || isHBar
+  const isScatter = k === 'scatter' || k === 'bubble'
+  const isArea = k === 'area' || k === 'timeseries'
+  const cats = chart?.x_categories
+  const useCat = Array.isArray(cats) && cats.length > 0
+  const eSeries = series.map((s, i) => {
+    const seriesType = (
+      isCombo ? (s.kind === 'line' ? 'line' : s.kind === 'bar' ? 'bar' : i === 0 ? 'bar' : 'line')
+      : isBar ? 'bar'
+      : isScatter ? 'scatter'
+      : 'line'
+    ) as 'bar' | 'scatter' | 'line'
+    const asLine = seriesType === 'line'
+    return {
+      name: s.name,
+      type: seriesType,
+      data: useCat ? s.points.map((p) => p[1]) : s.points,
+      stack: isStacked ? 'total' : undefined,
+      smooth: asLine,
+      showSymbol: seriesType === 'scatter' || asLine,
+      symbolSize: seriesType === 'scatter' ? 10 : 6,
+      itemStyle: { color: s.color },
+      areaStyle: isArea && asLine ? { opacity: 0.18, color: s.color } : undefined,
+      lineStyle: asLine ? { width: 2 } : undefined,
+      emphasis: { focus: 'series' as const },
+      animationDuration: 900,
+      animationEasing: 'cubicOut' as const,
+    }
+  })
+  const legendNames = series.map((s) => s.name)
+  const valueAxis = {
+    type: 'value' as const,
+    name: (isHBar ? chart?.x_label : chart?.y_label) || '',
+    nameLocation: 'middle' as const,
+    nameGap: 36,
+    splitLine: { show: true, lineStyle: { opacity: 0.2 } },
+  }
+  const catAxis = useCat
+    ? {
+        type: 'category' as const,
+        data: cats,
+        name: (isHBar ? chart?.y_label : chart?.x_label) || '',
+        nameLocation: 'middle' as const,
+        nameGap: 30,
+        axisLabel: { fontSize: 10, rotate: !isHBar && (cats as string[]).length > 6 ? 30 : 0 },
+      }
+    : {
+        type: 'value' as const,
+        name: (isHBar ? chart?.y_label : chart?.x_label) || '',
+        nameLocation: 'middle' as const,
+        nameGap: 28,
+        splitLine: { show: true, lineStyle: { opacity: 0.2 } },
+      }
+  // Interactive timeseries: zoom/pan for time-oriented line/area, especially with many points.
+  const wantsZoom =
+    !isHBar &&
+    !isScatter &&
+    (k === 'timeseries' || ((k === 'line' || k === 'area') && useCat && (cats as string[]).length > 10))
+  return {
+    animation: true,
+    animationDuration: 1100,
+    backgroundColor: 'transparent',
+    textStyle: { color: tc, fontSize: 11 },
+    grid: { left: 48, right: 24, top: 36, bottom: wantsZoom ? 64 : 40, containLabel: true },
+    tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } },
+    legend: legendNames.length > 1 ? { data: legendNames, bottom: 0, textStyle: { color: tc, fontSize: 10 } } : undefined,
+    dataZoom: wantsZoom ? [{ type: 'inside' }, { type: 'slider', height: 16, bottom: 8 }] : undefined,
+    xAxis: isHBar ? valueAxis : catAxis,
+    yAxis: isHBar ? catAxis : valueAxis,
+    series: eSeries,
+  }
+}

vivek/frontend-vue/src/lib/exportWidgetHtml.ts ADDED Viewed

	@@ -0,0 +1,264 @@

+/**
+ * Deterministic widget → standalone HTML exporter.
+ *
+ * NO LLM involved. Given the same widget JSON the renderer uses, this emits a
+ * self-contained .html file:
+ *   - text/kpi_row/table/stat_card/progress/badge_row/image/action_row → plain HTML + inline CSS
+ *   - chart → a <div> + the ECharts `option` (built by the SHARED buildEChartsOption)
+ *             initialized via the ECharts CDN, so charts stay fully interactive offline.
+ *
+ * Functions in the option (custom formatters) are dropped during serialization;
+ * ECharts falls back to sensible defaults, keeping the export robust.
+ */
+import { buildEChartsOption, isGlKind, type ChartSpec } from '@/lib/echartsOption'
+const ECHARTS_CDN = 'https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js'
+const ECHARTS_GL_CDN = 'https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js'
+type Block = Record<string, unknown> & { type?: string }
+function esc(v: unknown): string {
+  return String(v ?? '')
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+/** Serialize an ECharts option to a JS literal, dropping function values. */
+function serializeOption(option: unknown): string {
+  return JSON.stringify(option, (_k, v) => (typeof v === 'function' ? undefined : v))
+}
+function parseLayout(raw: string): Block[] {
+  let s = String(raw || '').trim()
+  if (!s) return []
+  const fence = s.match(/```(?:json)?\s*([\s\S]*?)```/i)
+  if (fence) s = fence[1].trim()
+  let parsed: unknown
+  try {
+    parsed = JSON.parse(s)
+  } catch {
+    const i = s.indexOf('{')
+    const j = s.lastIndexOf('}')
+    if (i < 0 || j <= i) return []
+    try {
+      parsed = JSON.parse(s.slice(i, j + 1))
+    } catch {
+      return []
+    }
+  }
+  let layout: unknown
+  if (Array.isArray(parsed)) layout = parsed
+  else if (parsed && typeof parsed === 'object') {
+    const o = parsed as Record<string, unknown>
+    layout = o.layout ?? o.blocks ?? o.components
+    if (!Array.isArray(layout) && typeof o.type === 'string') layout = [o]
+  }
+  return Array.isArray(layout) ? (layout as Block[]) : []
+}
+const TONE_HEX: Record<string, string> = {
+  positive: '#16a34a',
+  success: '#16a34a',
+  negative: '#dc2626',
+  danger: '#dc2626',
+  warning: '#d97706',
+  info: '#2563eb',
+  neutral: '#475569',
+  default: '#475569',
+}
+const BAR_HEX: Record<string, string> = {
+  emerald: '#10b981',
+  amber: '#f59e0b',
+  red: '#ef4444',
+  cyan: '#06b6d4',
+  indigo: '#6366f1',
+}
+type ChartEntry = { id: string; option: string; gl: boolean }
+/** Render one block to HTML. Charts push their option into `charts` and return a placeholder div. */
+function renderBlock(block: Block, idx: number, charts: ChartEntry[]): string {
+  const type = String(block.type || '').toLowerCase()
+  if (type === 'text') {
+    return `<p class="ws-text">${esc((block as { content?: string }).content)}</p>`
+  }
+  if (type === 'kpi_row') {
+    const items = (block.items as { label?: string; value?: string; tone?: string }[]) || []
+    const cells = items
+      .map(
+        (it) =>
+          `<div class="ws-kpi"><div class="ws-kpi-val" style="color:${TONE_HEX[it.tone || 'neutral'] || '#111'}">${esc(it.value)}</div><div class="ws-kpi-lbl">${esc(it.label)}</div></div>`,
+      )
+      .join('')
+    return `<div class="ws-kpi-row">${cells}</div>`
+  }
+  if (type === 'stat_card') {
+    const items = (block.items as { label?: string; value?: string; subtext?: string; tone?: string }[]) || []
+    const cells = items
+      .map(
+        (it) =>
+          `<div class="ws-stat"><div class="ws-stat-lbl">${esc(it.label)}</div><div class="ws-stat-val" style="color:${TONE_HEX[it.tone || 'default'] || '#111'}">${esc(it.value)}</div>${it.subtext ? `<div class="ws-stat-sub">${esc(it.subtext)}</div>` : ''}</div>`,
+      )
+      .join('')
+    return `<div class="ws-stat-grid">${cells}</div>`
+  }
+  if (type === 'progress') {
+    const items = (block.items as { label?: string; value?: number; max?: number; tone?: string }[]) || []
+    const rows = items
+      .map((it) => {
+        const max = Number(it.max) || 100
+        const pct = Math.max(0, Math.min(100, ((Number(it.value) || 0) / max) * 100))
+        const color = BAR_HEX[it.tone || 'indigo'] || '#6366f1'
+        const showPct = !it.max || it.max === 100
+        return `<div class="ws-prog"><div class="ws-prog-head"><span>${esc(it.label)}</span><span>${esc(it.value)}${showPct ? '%' : ''}</span></div><div class="ws-prog-track"><div class="ws-prog-fill" style="width:${pct}%;background:${color}"></div></div></div>`
+      })
+      .join('')
+    return `<div class="ws-prog-list">${rows}</div>`
+  }
+  if (type === 'badge_row') {
+    const items = (block.items as { label?: string; tone?: string }[]) || []
+    const pills = items
+      .map((it) => {
+        const c = TONE_HEX[it.tone || 'default'] || '#475569'
+        return `<span class="ws-badge" style="color:${c};border-color:${c}33;background:${c}14">${esc(it.label)}</span>`
+      })
+      .join('')
+    return `<div class="ws-badge-row">${pills}</div>`
+  }
+  if (type === 'table') {
+    const cols = (block.columns as unknown[]) || []
+    const rows = (block.rows as unknown[][]) || []
+    const head = `<tr>${cols.map((c) => `<th>${esc(c)}</th>`).join('')}</tr>`
+    const body = rows.map((r) => `<tr>${(Array.isArray(r) ? r : [r]).map((c) => `<td>${esc(c)}</td>`).join('')}</tr>`).join('')
+    const title = (block as { title?: string }).title
+    return `${title ? `<div class="ws-h">${esc(title)}</div>` : ''}<table class="ws-table"><thead>${head}</thead><tbody>${body}</tbody></table>`
+  }
+  if (type === 'action_row') {
+    const buttons = (block.buttons as { label?: string }[]) || []
+    const btns = buttons.map((b) => `<button class="ws-action" type="button" disabled>${esc(b.label)}</button>`).join('')
+    return `<div class="ws-action-row">${btns}</div>`
+  }
+  if (type === 'image') {
+    const b = block as { src?: string; alt?: string; caption?: string; fit?: string }
+    if (!b.src) return ''
+    const fit = b.fit === 'cover' ? 'cover' : 'contain'
+    return `<figure class="ws-fig"><img src="${esc(b.src)}" alt="${esc(b.alt)}" style="object-fit:${fit}" />${b.caption ? `<figcaption>${esc(b.caption)}</figcaption>` : ''}</figure>`
+  }
+  if (type === 'chart') {
+    const chart = (block.chart as ChartSpec) || {}
+    const title = (block as { title?: string }).title || ''
+    const id = `ws-chart-${idx}`
+    const gl = isGlKind(chart.kind)
+    try {
+      const option = buildEChartsOption(chart, title, { dark: false })
+      charts.push({ id, option: serializeOption(option), gl })
+      const cls = gl ? 'ws-chart ws-chart-3d' : 'ws-chart'
+      return `<div class="ws-chart-wrap">${title ? `<div class="ws-h">${esc(title)}</div>` : ''}<div id="${id}" class="${cls}"></div></div>`
+    } catch {
+      return `<div class="ws-note">Chart could not be exported.</div>`
+    }
+  }
+  // Unknown block type — show nothing (kept consistent with the renderer's fail-safe).
+  return ''
+}
+const STYLES = `
+*{box-sizing:border-box}
+body{margin:0;background:#f7f8fa;color:#111318;font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;padding:24px}
+.ws-doc{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
+.ws-card{background:#fff;border:1px solid #e6e8ec;border-radius:14px;padding:16px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
+.ws-text{margin:0;color:#2b2f38}
+.ws-h{font-weight:600;font-size:13px;margin-bottom:8px}
+.ws-kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
+.ws-kpi{border:1px solid #eef0f3;border-radius:10px;padding:10px 12px}
+.ws-kpi-val{font-size:20px;font-weight:700}
+.ws-kpi-lbl{font-size:12px;color:#6b7280;margin-top:2px}
+.ws-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
+.ws-stat{border:1px solid #eef0f3;border-radius:12px;padding:14px}
+.ws-stat-lbl{font-size:12px;color:#6b7280}
+.ws-stat-val{font-size:24px;font-weight:700;margin-top:4px}
+.ws-stat-sub{font-size:12px;color:#9aa1ad;margin-top:2px}
+.ws-prog-list{display:flex;flex-direction:column;gap:12px}
+.ws-prog-head{display:flex;justify-content:space-between;font-size:12px;color:#6b7280;margin-bottom:4px}
+.ws-prog-track{height:8px;background:#eef0f3;border-radius:99px;overflow:hidden}
+.ws-prog-fill{height:100%;border-radius:99px}
+.ws-badge-row{display:flex;flex-wrap:wrap;gap:8px}
+.ws-badge{font-size:12px;font-weight:500;padding:3px 10px;border-radius:99px;border:1px solid}
+.ws-table{width:100%;border-collapse:collapse;font-size:13px}
+.ws-table th,.ws-table td{text-align:left;padding:8px 10px;border-bottom:1px solid #eef0f3}
+.ws-table th{color:#6b7280;font-weight:600;background:#fafbfc}
+.ws-action-row{display:flex;flex-wrap:wrap;gap:8px}
+.ws-action{font-size:13px;padding:6px 12px;border:1px solid #d7dae0;border-radius:8px;background:#fff;color:#475569}
+.ws-fig{margin:0}
+.ws-fig img{width:100%;max-height:420px;border-radius:10px}
+.ws-fig figcaption{font-size:12px;color:#9aa1ad;margin-top:6px;text-align:center}
+.ws-chart{width:100%;height:380px}
+.ws-chart-3d{height:460px}
+.ws-note{font-size:12px;color:#9aa1ad}
+.ws-footer{text-align:center;font-size:11px;color:#b3b9c4;margin-top:6px}
+`
+/** Build a complete, self-contained, interactive HTML document from widget JSON. */
+export function widgetToHtml(jsonStr: string, title = 'Widget'): string {
+  const blocks = parseLayout(jsonStr)
+  const charts: ChartEntry[] = []
+  const body = blocks
+    .map((b, i) => {
+      const inner = renderBlock(b, i, charts)
+      return inner ? `<section class="ws-card">${inner}</section>` : ''
+    })
+    .filter(Boolean)
+    .join('\n')
+  const needsGl = charts.some((c) => c.gl)
+  const initScript = charts.length
+    ? `<script src="${ECHARTS_CDN}"></script>
+${needsGl ? `<script src="${ECHARTS_GL_CDN}"></script>` : ''}
+<script>
+(function(){
+  function init(){
+    if(!window.echarts){return;}
+    var defs=${JSON.stringify(charts.map((c) => c.id))};
+    var opts=[${charts.map((c) => c.option).join(',')}];
+    defs.forEach(function(id,i){
+      var el=document.getElementById(id);
+      if(!el)return;
+      var chart=echarts.init(el);
+      chart.setOption(opts[i]);
+      window.addEventListener('resize',function(){chart.resize();});
+    });
+  }
+  if(document.readyState!=='loading')init();else document.addEventListener('DOMContentLoaded',init);
+})();
+</script>`
+    : ''
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>${esc(title)}</title>
+<style>${STYLES}</style>
+</head>
+<body>
+<div class="ws-doc">
+${body}
+<div class="ws-footer">Exported widget · interactive charts via ECharts</div>
+</div>
+${initScript}
+</body>
+</html>`
+}

vivek/frontend-vue/src/lib/progressiveWidget.ts CHANGED Viewed

@@ -242,28 +242,3 @@ function extractBlocksFromIndex(cleaned: string, idx: number): ProgressiveSchema
     totalSoFar: blocks.length + (pendingType ? 1 : 0),
   }
 }
-/**
- * For HTML-mode streaming, rebuild the iframe srcdoc periodically. We ensure
- * unclosed tags get a best-effort close so the in-progress paint doesn't show
- * broken markup.
- */
-export function buildProgressiveHtmlDoc(raw: string): string {
-  if (!raw || !raw.trim()) return ''
-  let s = raw
-  const fenceOpen = s.match(/```(?:json|html)?\s*([\s\S]*?)(?:```|$)/i)
-  if (fenceOpen && fenceOpen[1]) s = fenceOpen[1]
-  s = s.replace(/```[\w-]*$/, '').trim()
-  if (!s) return ''
-  const lower = s.toLowerCase()
-  if (!lower.includes('<html')) {
-    // Wrap partial body into a minimal doc so iframes don't show default pages.
-    s = `<html><head><meta charset="utf-8"></head><body>${s}</body></html>`
-  }
-  // Best-effort close for common dangling tags.
-  if (lower.includes('<body') && !lower.includes('</body>')) s += '</body>'
-  if (lower.includes('<html') && !lower.includes('</html>')) s += '</html>'
-  return s
-}

     totalSoFar: blocks.length + (pendingType ? 1 : 0),
   }
 }

vivek/frontend-vue/src/pages/Analytics.vue CHANGED Viewed

@@ -69,8 +69,8 @@ const metrics = computed(() => {
   const avgLatency = latencyVals.length ? latencyVals.reduce((a, b) => a + b, 0) / latencyVals.length : null
   const positives = rewards.filter((r) => r.reward >= 1).length
   const rewardRate = rewards.length ? positives / rewards.length : null
-  const widgetRate = done.length ? done.filter((d) => (d.widgetHtml ?? '').trim().length > 0).length / done.length : 0
-  const withWidget = done.filter((d) => (d.widgetHtml ?? '').trim().length > 0).length
   return {
     totalResponses: done.length,
@@ -132,7 +132,7 @@ const previousMetrics = computed(() => {
     .filter((x): x is number => x != null)
   const avgLatency = latVals.length ? latVals.reduce((a, b) => a + b, 0) / latVals.length : null
   const rewardRate = rewards.length ? rewards.filter((r) => r.reward >= 1).length / rewards.length : null
-  const widgetRate = done.length ? done.filter((d) => (d.widgetHtml ?? '').trim().length > 0).length / done.length : null
   return {
     totalResponses: done.length,
     totalRewards: rewards.length,
@@ -462,7 +462,7 @@ function updateCharts() {
     true,
   )
-  const withWidget = done.filter((d) => (d.widgetHtml ?? '').trim().length > 0).length
   const withoutWidget = done.length - withWidget
   const jsonSchemaCount = 0
   widgetSplitChart.setOption(

   const avgLatency = latencyVals.length ? latencyVals.reduce((a, b) => a + b, 0) / latencyVals.length : null
   const positives = rewards.filter((r) => r.reward >= 1).length
   const rewardRate = rewards.length ? positives / rewards.length : null
+  const widgetRate = done.length ? done.filter((d) => (d.widgetSchema ?? '').trim().length > 0).length / done.length : 0
+  const withWidget = done.filter((d) => (d.widgetSchema ?? '').trim().length > 0).length
   return {
     totalResponses: done.length,
     .filter((x): x is number => x != null)
   const avgLatency = latVals.length ? latVals.reduce((a, b) => a + b, 0) / latVals.length : null
   const rewardRate = rewards.length ? rewards.filter((r) => r.reward >= 1).length / rewards.length : null
+  const widgetRate = done.length ? done.filter((d) => (d.widgetSchema ?? '').trim().length > 0).length / done.length : null
   return {
     totalResponses: done.length,
     totalRewards: rewards.length,
     true,
   )
+  const withWidget = done.filter((d) => (d.widgetSchema ?? '').trim().length > 0).length
   const withoutWidget = done.length - withWidget
   const jsonSchemaCount = 0
   widgetSplitChart.setOption(

vivek/frontend-vue/src/pages/Chat.vue CHANGED Viewed

@@ -8,8 +8,6 @@ import Button from '@/components/ui/Button.vue'
 import PreferenceModal from '@/components/PreferenceModal.vue'
 import TechPanels from '@/components/TechPanels.vue'
 import WidgetSchemaRenderer from '@/components/WidgetRegistryRenderer.vue'
-import LiveWidgetSchema from '@/components/LiveWidgetSchema.vue'
-import LiveWidgetFrame from '@/components/LiveWidgetFrame.vue'
 import { getAccessToken, clearAccessToken } from '@/lib/auth'
 import { ingestDone, ingestReward } from '@/lib/analyticsStore'
 import {
@@ -86,43 +84,10 @@ function schemaIsOnlyNumericTupleText(wSch: string): boolean {
   }
 }
-function streamLooksLikeSubstantialHtml(s: string): boolean {
-  const low = s.toLowerCase()
-  if (low.includes('<!doctype') || low.includes('<html')) return true
-  return (
-    low.includes('<div') &&
-    (low.includes('<script') || low.includes('onclick=') || low.includes('<button'))
-  )
-}
-function extractHtmlDocumentFromStream(s: string): string {
-  const low = s.toLowerCase()
-  const iDoc = low.indexOf('<!doctype')
-  const iHtml = low.indexOf('<html')
-  let i = iDoc >= 0 ? iDoc : iHtml
-  if (i < 0) {
-    const div = low.indexOf('<div')
-    if (div < 0) return ''
-    i = div
-  }
-  const end = low.lastIndexOf('</html>')
-  if (end >= i && end >= 0) return s.slice(i, end + '</html>'.length)
-  return s.slice(i)
-}
-/** Drop useless index-array "widgets"; pull real HTML from the raw stream if the model mixed outputs. */
 function recoverWidgetFromStreamIfDegenerate(cur: ChatMessage) {
-  const stream = String(cur.widgetStream || '').trim()
   const sch = String(cur.widgetSchema || '').trim()
-  if (!schemaIsOnlyNumericTupleText(sch)) return
-  cur.widgetSchema = ''
-  if (String(cur.widgetHtml || '').trim()) return
-  if (!stream || !streamLooksLikeSubstantialHtml(stream)) return
-  const html = extractHtmlDocumentFromStream(stream).trim()
-  if (html) {
-    cur.widgetHtml = html
-    cur.widgetMode = 'html'
-  }
 }
 const isStreaming = ref(false)
@@ -136,12 +101,11 @@ type ChatMessage = {
   content: string
   strategy?: string
   xVec?: number[]
-  widgetHtml?: string
   widgetSchema?: string
   widgetHeight?: number
   widgetStream?: string
   widgetStreaming?: boolean
-  widgetMode?: 'json' | 'html' | ''
   rewardUsedUp?: boolean
   rewardUsedDown?: boolean
 }
@@ -151,7 +115,6 @@ type ChatApiSuccess = {
   response?: string
   strategy?: string
   x_vec?: unknown[]
-  widget_html?: string
   widget_schema?: string
   widget_height?: number
   instruction?: string
@@ -429,7 +392,6 @@ async function runChatFallback(text: string, idx: number): Promise<boolean> {
   )
   cur.strategy = typeof payload.strategy === 'string' ? payload.strategy : String(payload.strategy ?? '')
   cur.xVec = Array.isArray(payload.x_vec) ? payload.x_vec.map((n: unknown) => Number(n)) : []
-  cur.widgetHtml = typeof payload.widget_html === 'string' ? payload.widget_html : ''
   cur.widgetSchema = typeof payload.widget_schema === 'string' ? payload.widget_schema : ''
   if (schemaIsOnlyNumericTupleText(cur.widgetSchema)) cur.widgetSchema = ''
   cur.widgetHeight = payload.widget_height ? Number(payload.widget_height) : 420
@@ -466,7 +428,7 @@ async function runChatFallback(text: string, idx: number): Promise<boolean> {
   ingestDone({
     strategy: payload.strategy ?? 'unknown',
     elapsed: payload.elapsed,
-    widget_html: payload.widget_html ?? '',
   })
   return true
 }
@@ -524,8 +486,7 @@ function handleSseEvent(evt: Record<string, unknown>, idx: number) {
       cur.widgetStreaming = true
       if (!cur.widgetMode) {
         const preview = cur.widgetStream.slice(0, 400).trim().toLowerCase()
-        if (preview.startsWith('<') || preview.startsWith('<!doctype')) cur.widgetMode = 'html'
-        else if (preview.startsWith('{') || preview.startsWith('[') || preview.startsWith('```json')) cur.widgetMode = 'json'
       }
       requestAdaptiveAutoScroll()
     }
@@ -539,7 +500,6 @@ function handleSseEvent(evt: Record<string, unknown>, idx: number) {
     const e = evt as {
       response?: string
       strategy?: string
-      widget_html?: string
       widget_schema?: string
       widget_height?: number
       x_vec?: number[]
@@ -555,32 +515,20 @@ function handleSseEvent(evt: Record<string, unknown>, idx: number) {
     }
     cur.content = cleanAssistantText(e.response ?? cur.content)
     cur.strategy = e.strategy ?? cur.strategy
-    const wHtml = typeof e.widget_html === 'string' ? e.widget_html.trim() : ''
-    const wSch = typeof e.widget_schema === 'string' ? e.widget_schema.trim() : ''
-    cur.widgetHtml = wHtml
-    cur.widgetSchema = wSch
     cur.widgetHeight = e.widget_height ? Number(e.widget_height) : 420
     cur.widgetStreaming = false
     recoverWidgetFromStreamIfDegenerate(cur)
-    // If the server omits or clears finalized widget fields but we already streamed
-    // payload into `widgetStream`, promote that stream into the final slot. Otherwise
-    // the live panel hides (widgetStreaming=false) and the final iframe/schema panel
-    // never mounts — looks like the widget "disappeared" after completion.
     const stream = String(cur.widgetStream || '').trim()
-    if (!cur.widgetHtml && !cur.widgetSchema && stream) {
-      let mode = cur.widgetMode || ''
-      if (!mode) {
-        const preview = stream.slice(0, 400).trim().toLowerCase()
-        if (preview.startsWith('<') || preview.startsWith('<!doctype')) mode = 'html'
-        else if (preview.startsWith('{') || preview.startsWith('[') || preview.startsWith('```json')) mode = 'json'
-      }
-      if (mode === 'html') cur.widgetHtml = stream
-      else if (!schemaIsOnlyNumericTupleText(stream)) cur.widgetSchema = stream
-      if (mode && (cur.widgetHtml || cur.widgetSchema)) cur.widgetMode = mode as 'json' | 'html' | ''
     }
-    if (!cur.widgetHtml?.trim() && !cur.widgetSchema?.trim()) cur.widgetMode = ''
     cur.xVec = Array.isArray(e.x_vec) ? e.x_vec.map((n) => Number(n)) : []
     cur.rewardUsedUp = false
     cur.rewardUsedDown = false
@@ -618,11 +566,19 @@ function handleSseEvent(evt: Record<string, unknown>, idx: number) {
     ingestDone({
       strategy: e.strategy ?? cur.strategy ?? 'unknown',
       elapsed: e.elapsed,
-      widget_html: e.widget_html ?? '',
     })
   }
 }
 async function onSend() {
   const token = getAccessToken()
   if (!token) {
@@ -721,22 +677,13 @@ async function onSend() {
         if (evt.type === 'done') {
           finalized = true
           const cur = messages.value[idx]
-          // Redundant safety: promote streamed widget if done payload left both empty.
-          const wHtml = typeof (evt as { widget_html?: string }).widget_html === 'string' ? (evt as { widget_html: string }).widget_html.trim() : ''
           const wSch = typeof (evt as { widget_schema?: string }).widget_schema === 'string' ? (evt as { widget_schema: string }).widget_schema.trim() : ''
           const stream = String(cur.widgetStream || '').trim()
-          if (!wHtml && !wSch && stream) {
-            let mode = cur.widgetMode || ''
-            if (!mode) {
-              const preview = stream.slice(0, 400).trim().toLowerCase()
-              if (preview.startsWith('<') || preview.startsWith('<!doctype')) mode = 'html'
-              else if (preview.startsWith('{') || preview.startsWith('[') || preview.startsWith('```json')) mode = 'json'
-            }
-            if (mode === 'html') cur.widgetHtml = stream
-            else if (!schemaIsOnlyNumericTupleText(stream)) cur.widgetSchema = stream
-            if (mode && (cur.widgetHtml || cur.widgetSchema)) cur.widgetMode = mode as 'json' | 'html' | ''
           }
-          if (!cur.widgetHtml?.trim() && !cur.widgetSchema?.trim()) cur.widgetMode = ''
           recoverWidgetFromStreamIfDegenerate(cur)
         }
       }
@@ -773,13 +720,11 @@ async function onSend() {
 type HistoryPair = {
   user: string
   assistant: string
-  widget_html?: string
   widget_schema?: string
   widget_height?: number
 }
 function assistantFromHistoryPair(p: HistoryPair): ChatMessage {
-  const wHtml = String(p.widget_html ?? '').trim()
   const wSch = String(p.widget_schema ?? '').trim()
   const wh = Number(p.widget_height) || 420
   const base: ChatMessage = {
@@ -787,10 +732,7 @@ function assistantFromHistoryPair(p: HistoryPair): ChatMessage {
     content: cleanAssistantText(p.assistant),
     widgetHeight: wh,
   }
-  if (wHtml) {
-    base.widgetHtml = wHtml
-    base.widgetMode = 'html'
-  } else if (wSch && !schemaIsOnlyNumericTupleText(wSch)) {
     base.widgetSchema = wSch
     base.widgetMode = 'json'
   }
@@ -902,10 +844,59 @@ watch(isStreaming, (v) => {
   else killAnimationsOf(streamPulseEl.value)
 })
 function cleanAssistantText(raw: string | undefined | null) {
   const s = String(raw ?? '')
   const noWidgetBlock = s.replace(/<WIDGET>[\s\S]*?<\/WIDGET>/gi, '')
-  return noWidgetBlock.replace(/<\/?WIDGET>/gi, '').trim()
 }
 /**
@@ -957,26 +948,11 @@ function onAdaptiveScroll() {
   adaptiveStickToBottom.value = isNearBottom(adaptiveScrollEl.value)
 }
-function widgetFrameHeight(height?: number): number {
-  const raw = Number(height || 420)
-  if (!Number.isFinite(raw)) return 420
-  return Math.min(Math.max(raw, 300), 520)
-}
 function widgetDownloadBase(m: ChatMessage, idx: number): string {
   const part = (m.strategy || 'adaptive').replace(/[^a-zA-Z0-9_-]+/g, '-').replace(/^-|-$/g, '').slice(0, 32) || 'widget'
   return `widget-${part}-${idx + 1}`
 }
-function downloadWidgetHtml(html: string, base: string) {
-  const body = String(html || '').trim()
-  if (!body) {
-    showToast({ title: 'Nothing to download', message: 'Widget HTML is empty.' })
-    return
-  }
-  downloadTextAsFile(body, `${base}.html`, 'text/html;charset=utf-8')
-}
 function downloadWidgetJson(jsonStr: string, base: string) {
   const body = prettifyJsonIfPossible(String(jsonStr || '').trim())
   if (!body) {
@@ -986,27 +962,13 @@ function downloadWidgetJson(jsonStr: string, base: string) {
   downloadTextAsFile(body, `${base}.json`, 'application/json;charset=utf-8')
 }
-function effectiveStreamWidgetMode(m: ChatMessage): 'html' | 'json' {
-  if (m.widgetMode === 'html') return 'html'
-  if (m.widgetMode === 'json') return 'json'
-  const preview = String(m.widgetStream || '').slice(0, 400).trim().toLowerCase()
-  if (preview.startsWith('<') || preview.startsWith('<!doctype')) return 'html'
-  return 'json'
-}
 function downloadLiveWidgetDraft(m: ChatMessage, idx: number) {
   const stream = String(m.widgetStream || '').trim()
   if (!stream) {
     showToast({ title: 'Nothing to download', message: 'Widget is still loading.' })
     return
   }
-  const base = `${widgetDownloadBase(m, idx)}-draft`
-  if (effectiveStreamWidgetMode(m) === 'html') downloadWidgetHtml(stream, base)
-  else downloadWidgetJson(stream, base)
-}
-function downloadFinalWidgetHtml(m: ChatMessage, idx: number) {
-  downloadWidgetHtml(m.widgetHtml || '', widgetDownloadBase(m, idx))
 }
 </script>
@@ -1153,10 +1115,10 @@ function downloadFinalWidgetHtml(m: ChatMessage, idx: number) {
                     </div>
                   </template>
                   <template v-else-if="m.role === 'assistant' && assistantStreamPlain(idx)">
-                    <div class="whitespace-pre-wrap">{{ m.content }}</div>
                   </template>
                   <template v-else-if="m.role === 'assistant'">
-                    <div class="assistant-markdown" v-html="renderAssistantMarkdown(m.content)" />
                   </template>
                   <template v-else>
                     <div class="whitespace-pre-wrap">{{ m.content }}</div>
@@ -1171,7 +1133,6 @@ function downloadFinalWidgetHtml(m: ChatMessage, idx: number) {
               v-if="
                 m.role === 'assistant' &&
                 m.widgetStreaming &&
-                !m.widgetHtml &&
                 !m.widgetSchema &&
                 (m.widgetStream || (widgetGenerating && widgetGeneratingIdx === idx))
               "
@@ -1210,62 +1171,21 @@ function downloadFinalWidgetHtml(m: ChatMessage, idx: number) {
                   </div>
                 </div>
                 <div class="p-3">
-                  <LiveWidgetFrame
-                    v-if="m.widgetMode === 'html'"
-                    :raw-stream="m.widgetStream || ''"
-                    :final-html="m.widgetHtml || ''"
-                    :finalized="!!m.widgetHtml"
-                    :height="widgetFrameHeight(m.widgetHeight)"
-                  />
-                  <LiveWidgetSchema
-                    v-else
-                    :raw-stream="m.widgetStream || ''"
-                    :finalized="false"
                   />
                 </div>
               </div>
             </Motion>
-            <!-- Final widget (HTML iframe mode). -->
-            <Motion
-              v-if="m.role === 'assistant' && m.widgetHtml && String(m.widgetHtml).trim()"
-              tag="div"
-              class="mt-2"
-              :initial="{ opacity: 0, y: 16 }"
-              :animate="{ opacity: 1, y: 0 }"
-              :transition="MOTION_BASE"
-            >
-              <div
-                class="rounded-2xl border bg-card overflow-hidden shadow-sm transition-shadow duration-300 hover:shadow-md"
-              >
-                <div class="px-4 py-2 border-b text-xs text-muted-foreground flex items-center justify-between gap-2">
-                  <div class="flex items-center gap-2 min-w-0">
-                    <span class="h-1.5 w-1.5 rounded-full bg-emerald-500 shrink-0" />
-                    <span class="truncate">Interactive widget</span>
-                  </div>
-                  <Button
-                    type="button"
-                    variant="outline"
-                    size="sm"
-                    class="h-7 px-2 shrink-0"
-                    title="Download widget as HTML"
-                    @click="downloadFinalWidgetHtml(m, idx)"
-                  >
-                    <ArrowDownTrayIcon class="h-3.5 w-3.5" />
-                  </Button>
-                </div>
-                <iframe
-                  :srcdoc="m.widgetHtml"
-                  sandbox="allow-scripts allow-same-origin"
-                  class="w-full widget-frame border-0"
-                  :style="{ height: `${widgetFrameHeight(m.widgetHeight)}px`, maxHeight: '56vh' }"
-                />
-              </div>
-            </Motion>
             <!-- Final widget (JSON schema mode). -->
             <Motion
-              v-if="m.role === 'assistant' && m.widgetSchema && String(m.widgetSchema).trim() && !m.widgetHtml"
               tag="div"
               class="mt-2"
               :initial="{ opacity: 0, y: 16 }"
@@ -1280,7 +1200,11 @@ function downloadFinalWidgetHtml(m: ChatMessage, idx: number) {
                   Interactive widget
                 </div>
                 <div class="p-4">
-                  <WidgetSchemaRenderer :json-str="m.widgetSchema" :download-base="widgetDownloadBase(m, idx)" />
                 </div>
               </div>
             </Motion>

 import PreferenceModal from '@/components/PreferenceModal.vue'
 import TechPanels from '@/components/TechPanels.vue'
 import WidgetSchemaRenderer from '@/components/WidgetRegistryRenderer.vue'
 import { getAccessToken, clearAccessToken } from '@/lib/auth'
 import { ingestDone, ingestReward } from '@/lib/analyticsStore'
 import {
   }
 }
+/** Drop useless index-array "widgets" (e.g. bare [0,1,2] tuples) that aren't real content. */
 function recoverWidgetFromStreamIfDegenerate(cur: ChatMessage) {
   const sch = String(cur.widgetSchema || '').trim()
+  if (schemaIsOnlyNumericTupleText(sch)) cur.widgetSchema = ''
 }
 const isStreaming = ref(false)
   content: string
   strategy?: string
   xVec?: number[]
   widgetSchema?: string
   widgetHeight?: number
   widgetStream?: string
   widgetStreaming?: boolean
+  widgetMode?: 'json' | ''
   rewardUsedUp?: boolean
   rewardUsedDown?: boolean
 }
   response?: string
   strategy?: string
   x_vec?: unknown[]
   widget_schema?: string
   widget_height?: number
   instruction?: string
   )
   cur.strategy = typeof payload.strategy === 'string' ? payload.strategy : String(payload.strategy ?? '')
   cur.xVec = Array.isArray(payload.x_vec) ? payload.x_vec.map((n: unknown) => Number(n)) : []
   cur.widgetSchema = typeof payload.widget_schema === 'string' ? payload.widget_schema : ''
   if (schemaIsOnlyNumericTupleText(cur.widgetSchema)) cur.widgetSchema = ''
   cur.widgetHeight = payload.widget_height ? Number(payload.widget_height) : 420
   ingestDone({
     strategy: payload.strategy ?? 'unknown',
     elapsed: payload.elapsed,
+    widget_schema: payload.widget_schema ?? '',
   })
   return true
 }
       cur.widgetStreaming = true
       if (!cur.widgetMode) {
         const preview = cur.widgetStream.slice(0, 400).trim().toLowerCase()
+        if (preview.startsWith('{') || preview.startsWith('[') || preview.startsWith('```json')) cur.widgetMode = 'json'
       }
       requestAdaptiveAutoScroll()
     }
     const e = evt as {
       response?: string
       strategy?: string
       widget_schema?: string
       widget_height?: number
       x_vec?: number[]
     }
     cur.content = cleanAssistantText(e.response ?? cur.content)
     cur.strategy = e.strategy ?? cur.strategy
+    cur.widgetSchema = typeof e.widget_schema === 'string' ? e.widget_schema.trim() : ''
     cur.widgetHeight = e.widget_height ? Number(e.widget_height) : 420
     cur.widgetStreaming = false
     recoverWidgetFromStreamIfDegenerate(cur)
+    // If the server cleared the finalized schema but we already streamed JSON into
+    // `widgetStream`, promote that stream so the panel still mounts (avoids the
+    // "widget disappeared after completion" symptom).
     const stream = String(cur.widgetStream || '').trim()
+    if (!cur.widgetSchema && stream && !schemaIsOnlyNumericTupleText(stream)) {
+      cur.widgetSchema = stream
     }
+    cur.widgetMode = cur.widgetSchema?.trim() ? 'json' : ''
     cur.xVec = Array.isArray(e.x_vec) ? e.x_vec.map((n) => Number(n)) : []
     cur.rewardUsedUp = false
     cur.rewardUsedDown = false
     ingestDone({
       strategy: e.strategy ?? cur.strategy ?? 'unknown',
       elapsed: e.elapsed,
+      widget_schema: e.widget_schema ?? '',
     })
   }
 }
+/** An action_row button was clicked — send its label as the next prompt. */
+function onWidgetAction(text: string) {
+  const t = String(text || '').trim()
+  if (!t || sending.value || isStreaming.value) return
+  input.value = t
+  void onSend()
+}
 async function onSend() {
   const token = getAccessToken()
   if (!token) {
         if (evt.type === 'done') {
           finalized = true
           const cur = messages.value[idx]
+          // Redundant safety: promote streamed JSON if the done payload left the schema empty.
           const wSch = typeof (evt as { widget_schema?: string }).widget_schema === 'string' ? (evt as { widget_schema: string }).widget_schema.trim() : ''
           const stream = String(cur.widgetStream || '').trim()
+          if (!wSch && stream && !schemaIsOnlyNumericTupleText(stream)) {
+            cur.widgetSchema = stream
           }
+          cur.widgetMode = cur.widgetSchema?.trim() ? 'json' : ''
           recoverWidgetFromStreamIfDegenerate(cur)
         }
       }
 type HistoryPair = {
   user: string
   assistant: string
   widget_schema?: string
   widget_height?: number
 }
 function assistantFromHistoryPair(p: HistoryPair): ChatMessage {
   const wSch = String(p.widget_schema ?? '').trim()
   const wh = Number(p.widget_height) || 420
   const base: ChatMessage = {
     content: cleanAssistantText(p.assistant),
     widgetHeight: wh,
   }
+  if (wSch && !schemaIsOnlyNumericTupleText(wSch)) {
     base.widgetSchema = wSch
     base.widgetMode = 'json'
   }
   else killAnimationsOf(streamPulseEl.value)
 })
+/**
+ * Strip any widget JSON the model leaked into the prose <RESPONSE>. The response is
+ * meant to be human text only — JSON must NEVER reach the UI. Handles fenced blocks and
+ * bare objects/arrays (balanced or truncated mid-stream).
+ */
+function stripLeakedJson(text: string): string {
+  let s = text
+  // 1) fenced code blocks whose content looks like widget JSON
+  s = s.replace(/```[\w-]*\s*([\s\S]*?)```/g, (m, inner) => {
+    const t = String(inner).trim()
+    return /^[[{]/.test(t) && /"(?:type|layout|items|tone|series|chart|version)"/.test(t) ? '' : m
+  })
+  // 2) bare JSON widget/block blobs — balance-match (string-aware); truncated → cut to end
+  const opener = /[{[]/g
+  let match: RegExpExecArray | null
+  while ((match = opener.exec(s)) !== null) {
+    const start = match.index
+    const head = s.slice(start, start + 400)
+    if (!/"(?:type|layout|version)"\s*:/.test(head)) continue
+    const open = s[start]
+    const close = open === '{' ? '}' : ']'
+    let depth = 0
+    let inStr = false
+    let esc = false
+    let j = start
+    for (; j < s.length; j++) {
+      const ch = s[j]
+      if (inStr) {
+        if (esc) esc = false
+        else if (ch === '\\') esc = true
+        else if (ch === '"') inStr = false
+      } else if (ch === '"') inStr = true
+      else if (ch === open) depth++
+      else if (ch === close) {
+        depth--
+        if (depth === 0) {
+          j++
+          break
+        }
+      }
+    }
+    const end = depth !== 0 ? s.length : j // unbalanced (truncated) → remove to end
+    s = s.slice(0, start) + s.slice(end)
+    opener.lastIndex = start
+  }
+  return s
+}
 function cleanAssistantText(raw: string | undefined | null) {
   const s = String(raw ?? '')
   const noWidgetBlock = s.replace(/<WIDGET>[\s\S]*?<\/WIDGET>/gi, '')
+  const noTags = noWidgetBlock.replace(/<\/?WIDGET>/gi, '')
+  return stripLeakedJson(noTags).trim()
 }
 /**
   adaptiveStickToBottom.value = isNearBottom(adaptiveScrollEl.value)
 }
 function widgetDownloadBase(m: ChatMessage, idx: number): string {
   const part = (m.strategy || 'adaptive').replace(/[^a-zA-Z0-9_-]+/g, '-').replace(/^-|-$/g, '').slice(0, 32) || 'widget'
   return `widget-${part}-${idx + 1}`
 }
 function downloadWidgetJson(jsonStr: string, base: string) {
   const body = prettifyJsonIfPossible(String(jsonStr || '').trim())
   if (!body) {
   downloadTextAsFile(body, `${base}.json`, 'application/json;charset=utf-8')
 }
 function downloadLiveWidgetDraft(m: ChatMessage, idx: number) {
   const stream = String(m.widgetStream || '').trim()
   if (!stream) {
     showToast({ title: 'Nothing to download', message: 'Widget is still loading.' })
     return
   }
+  downloadWidgetJson(stream, `${widgetDownloadBase(m, idx)}-draft`)
 }
 </script>
                     </div>
                   </template>
                   <template v-else-if="m.role === 'assistant' && assistantStreamPlain(idx)">
+                    <div class="whitespace-pre-wrap">{{ cleanAssistantText(m.content) }}</div>
                   </template>
                   <template v-else-if="m.role === 'assistant'">
+                    <div class="assistant-markdown" v-html="renderAssistantMarkdown(cleanAssistantText(m.content))" />
                   </template>
                   <template v-else>
                     <div class="whitespace-pre-wrap">{{ m.content }}</div>
               v-if="
                 m.role === 'assistant' &&
                 m.widgetStreaming &&
                 !m.widgetSchema &&
                 (m.widgetStream || (widgetGenerating && widgetGeneratingIdx === idx))
               "
                   </div>
                 </div>
                 <div class="p-3">
+                  <!-- Live block-by-block build: render complete blocks from the partial stream
+                       (salvage parser drops the in-progress block); the chart appears the moment
+                       its JSON closes. -->
+                  <WidgetSchemaRenderer
+                    :json-str="m.widgetStream || ''"
+                    :show-download="false"
+                    :streaming="true"
                   />
                 </div>
               </div>
             </Motion>
             <!-- Final widget (JSON schema mode). -->
             <Motion
+              v-if="m.role === 'assistant' && m.widgetSchema && String(m.widgetSchema).trim()"
               tag="div"
               class="mt-2"
               :initial="{ opacity: 0, y: 16 }"
                   Interactive widget
                 </div>
                 <div class="p-4">
+                  <WidgetSchemaRenderer
+                    :json-str="m.widgetSchema"
+                    :download-base="widgetDownloadBase(m, idx)"
+                    @action="onWidgetAction"
+                  />
                 </div>
               </div>
             </Motion>

vivek/frontend-vue/src/widget-registry.json CHANGED Viewed

@@ -54,7 +54,18 @@
         "graph",
         "boxplot",
         "bubble",
-        "histogram"
       ],
       "spec": [
         "Pick \"kind\" to fit the data; ONLY these kinds render:",
@@ -79,6 +90,17 @@
         "- sankey | graph (flows / network) -> \"nodes\" + \"links\":",
         "  { \"type\": \"chart\", \"chart\": { \"kind\": \"sankey\", \"nodes\": [ {\"name\":\"Revenue\"}, {\"name\":\"COGS\"}, {\"name\":\"Gross Profit\"} ], \"links\": [ {\"source\":\"Revenue\",\"target\":\"COGS\",\"value\":40}, {\"source\":\"Revenue\",\"target\":\"Gross Profit\",\"value\":60} ] } }",
         "- histogram (frequency) -> like bar: \"x_categories\" (bins) + one series of counts.",
         "For a correlation matrix you MUST use kind \"heatmap\" with \"matrix\" (never a line/bar series)."
       ],
       "example": {
@@ -133,16 +155,22 @@
     },
     {
       "type": "action_row",
-      "whenToUse": "Suggested follow-up actions / next prompts as buttons.",
       "spec": [
-        "{ \"type\": \"action_row\", \"id\": \"...\", \"buttons\": [ { \"id\": \"...\", \"label\": \"...\", \"intent\": \"...\" }, ... ] }"
       ],
       "example": {
         "type": "action_row",
         "buttons": [
           {
-            "label": "Show risks",
-            "intent": "show_risks"
           }
         ]
       }

         "graph",
         "boxplot",
         "bubble",
+        "histogram",
+        "timeseries",
+        "rose",
+        "polar",
+        "parallel",
+        "themeriver",
+        "tree",
+        "mindmap",
+        "org",
+        "scatter3d",
+        "bar3d",
+        "line3d"
       ],
       "spec": [
         "Pick \"kind\" to fit the data; ONLY these kinds render:",
         "- sankey | graph (flows / network) -> \"nodes\" + \"links\":",
         "  { \"type\": \"chart\", \"chart\": { \"kind\": \"sankey\", \"nodes\": [ {\"name\":\"Revenue\"}, {\"name\":\"COGS\"}, {\"name\":\"Gross Profit\"} ], \"links\": [ {\"source\":\"Revenue\",\"target\":\"COGS\",\"value\":40}, {\"source\":\"Revenue\",\"target\":\"Gross Profit\",\"value\":60} ] } }",
         "- histogram (frequency) -> like bar: \"x_categories\" (bins) + one series of counts.",
+        "- timeseries (interactive time trend with zoom/pan) -> like line: \"x_categories\" (dates) + series of numbers. Best for many points over time.",
+        "- rose (nightingale / 'pizza' chart — share with variable-radius slices) -> use \"items\": [ { \"label\", \"value\" } ].",
+        "- polar (categorical bars around a circle) -> \"x_categories\" + series of numbers (like bar).",
+        "- parallel (compare items across many dimensions) -> \"x_categories\" = dimension names; one series per item with \"values\" aligned to them.",
+        "  { \"type\": \"chart\", \"chart\": { \"kind\": \"parallel\", \"x_categories\": [\"P/E\",\"Margin\",\"Growth\"], \"series\": [ { \"name\": \"AAPL\", \"values\": [28, 25, 8] }, { \"name\": \"MSFT\", \"values\": [34, 42, 14] } ] } }",
+        "- themeriver (streamgraph of categories over time; keep to a handful of time points) -> \"x_categories\" (time) + one series per category with \"values\" aligned to them.",
+        "- tree | mindmap | org (hierarchy / mind map / org chart) -> a single \"root\" node with nested \"children\":",
+        "  { \"type\": \"chart\", \"chart\": { \"kind\": \"tree\", \"root\": { \"name\": \"Apple\", \"children\": [ { \"name\": \"Products\", \"children\": [ {\"name\":\"iPhone\"}, {\"name\":\"Mac\"} ] }, { \"name\": \"Services\" } ] } } }",
+        "  (use \"mindmap\" for a radial layout, \"org\" for top-down. Keep to a readable number of nodes.)",
+        "- scatter3d | bar3d | line3d (THREE numeric axes; keep to a handful of points) -> series with [x, y, z] triples:",
+        "  { \"type\": \"chart\", \"chart\": { \"kind\": \"scatter3d\", \"x_label\": \"Risk\", \"y_label\": \"Return\", \"series\": [ { \"name\": \"Funds\", \"values\": [ [8,12,500], [14,18,1200] ] } ] } }",
         "For a correlation matrix you MUST use kind \"heatmap\" with \"matrix\" (never a line/bar series)."
       ],
       "example": {
     },
     {
       "type": "action_row",
+      "whenToUse": "Buttons to RE-VISUALIZE the SAME data already shown as a different supported chart kind. Each button's label is sent back as the next prompt.",
       "spec": [
+        "{ \"type\": \"action_row\", \"buttons\": [ { \"label\": \"Show as <supported chart kind>\", \"intent\": \"...\" }, ... ] }",
+        "VISUALS ONLY — buttons MUST only offer to redraw the data ALREADY shown using a different supported chart kind (e.g. \"Show as bar chart\", \"View as treemap\", \"Show as pie\", \"View as horizontal bars\", \"Show as line trend\").",
+        "NEVER propose actions that require data you may not have: no new tickers/companies, no new time periods, no \"compare X vs Y\", no growth/peers/forecasts, no \"explain ...\". Only chart-type changes of the current data."
       ],
       "example": {
         "type": "action_row",
         "buttons": [
           {
+            "label": "Show as treemap",
+            "intent": "view_treemap"
+          },
+          {
+            "label": "View as horizontal bars",
+            "intent": "view_hbar"
           }
         ]
       }

vivek/strategies.json CHANGED Viewed

@@ -40,7 +40,7 @@
     {
       "id": "visualization",
       "label": "Visualization",
-      "instruction": "Return a simple TEXT visualization only (ASCII bar chart or small table-of-values). Put it in a fenced code block. No extra prose outside the code block.",
       "enabled": true
     },
     {

     {
       "id": "visualization",
       "label": "Visualization",
+      "instruction": "Write a brief 1-2 sentence lead-in that frames what the visual shows. The chart/widget carries the visualization. NEVER draw ASCII charts, tree diagrams, or text-art in the response.",
       "enabled": true
     },
     {