@mixd-id/web-scaffold 0.2.250801012 → 0.2.250801014

package/src/components/AIDashboard.vue

@@ -0,0 +1,1113 @@
+<template>
+  <div :class="$style.comp">
+
+    <!-- ============================ LEFT: builder ============================= -->
+    <div :style="{ width: config.params.leftWidth + 'px' }"
+         class="relative shrink-0 flex flex-col bg-base-300 overflow-hidden">
+
+      <div class="px-3 pt-3">
+        <Tabs :items="[
+          { text: 'Presets', value: 'presets' },
+          { text: 'Build', value: 'build' },
+          { text: 'Data', value: 'data' },
+        ]" v-model="config.params.leftTab" />
+      </div>
+
+      <!-- ---------- Presets tab ---------- -->
+      <template v-if="config.params.leftTab === 'presets'">
+        <div class="flex flex-row items-center px-4 pt-3 pb-1">
+          <h4 class="flex-1">Presets</h4>
+          <button type="button" class="text-primary px-1" title="Add preset" @click="addPreset()">
+            <svg width="18" height="18" class="fill-primary-500 hover:fill-primary-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>
+          </button>
+        </div>
+
+        <div class="flex-1 overflow-y-auto px-2 pb-3">
+          <div v-for="preset in config.presets" :key="preset.uid"
+               class="flex flex-row items-center gap-2 px-2 py-1 rounded-md cursor-pointer"
+               :class="preset.uid === activeUid ? 'bg-base-500' : 'hover:bg-base-400'"
+               @click="selectPreset(preset)">
+            <div class="w-[18px] shrink-0 flex items-center text-text-300">
+              <svg width="14" height="14" class="fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM64 96v64H448V96H64zm384 128H256v64H448V224zm0 128H256v64H448V352zM192 352H64v64H192V352zm0-128H64v64H192V224z"/></svg>
+            </div>
+            <div class="flex-1 text-ellipsis-nowrap">{{ preset.name }}</div>
+            <button type="button" class="px-1 opacity-60 hover:opacity-100"
+                    @click.stop="presetMenu.open($event.currentTarget, { item: preset })">
+              <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512"><path d="M64 360a56 56 0 1 0 0 112 56 56 0 1 0 0-112zm0-160a56 56 0 1 0 0 112 56 56 0 1 0 0-112zM120 96A56 56 0 1 0 8 96a56 56 0 1 0 112 0z"/></svg>
+            </button>
+          </div>
+
+          <div v-if="!config.presets.length" class="text-text-400 text-sm text-center py-6">
+            No presets yet.<br />Add one to get started.
+          </div>
+        </div>
+      </template>
+
+      <!-- ---------- Data sources tab ---------- -->
+      <template v-else-if="config.params.leftTab === 'data'">
+        <div class="flex flex-row items-center px-4 pt-3 pb-1">
+          <h4 class="flex-1">Data sources</h4>
+          <button v-if="connected" type="button" class="px-1 text-text-300 hover:text-primary" title="Reload" @click="loadDatasources">
+            <svg width="15" height="15" class="fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M463.5 224H472c13.3 0 24-10.7 24-24V72c0-9.7-5.8-18.5-14.8-22.2s-19.3-1.7-26.2 5.2L413.4 96.6c-87.6-86.5-228.7-86.2-315.8 1c-87.5 87.5-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3c62.2-62.2 162.7-62.5 225.3-1L327 183c-6.9 6.9-8.9 17.2-5.2 26.2s12.5 14.8 22.2 14.8H463.5z"/></svg>
+          </button>
+        </div>
+
+        <div class="flex-1 overflow-y-auto px-3 py-2 flex flex-col gap-2">
+          <div v-if="!connected" class="text-text-400 text-sm text-center py-6">
+            Not connected.<br />Data sources load from the server.
+          </div>
+          <div v-else-if="!dsList.length" class="text-text-400 text-sm text-center py-6">
+            No data sources available.
+          </div>
+
+          <div v-for="ds in dsList" :key="ds.key" class="rounded-lg border-[1px] border-border-50 overflow-hidden bg-base-400">
+            <button type="button" class="w-full flex flex-row items-center gap-2 px-3 py-2 hover:bg-base-500" @click="toggleDs(ds.key)">
+              <div class="w-[16px] shrink-0 flex items-center text-primary">
+                <svg width="13" height="13" class="fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M448 80v48c0 44.2-100.3 80-224 80S0 172.2 0 128V80C0 35.8 100.3 0 224 0S448 35.8 448 80zM393.2 214.7c20.8-7.4 39.9-16.9 54.8-28.6V288c0 44.2-100.3 80-224 80S0 332.2 0 288V186.1c14.9 11.8 34 21.2 54.8 28.6C99.7 230.7 159.5 240 224 240s124.3-9.3 169.2-25.3zM0 346.1c14.9 11.8 34 21.2 54.8 28.6C99.7 390.7 159.5 400 224 400s124.3-9.3 169.2-25.3c20.8-7.4 39.9-16.9 54.8-28.6V432c0 44.2-100.3 80-224 80S0 476.2 0 432V346.1z"/></svg>
+              </div>
+              <div class="flex-1 text-left min-w-0">
+                <div class="text-sm truncate">{{ ds.label }}</div>
+                <div class="text-[11px] text-text-400 truncate">{{ ds.fields.length }} fields · {{ ds.aggregations.join(' / ') }}</div>
+              </div>
+              <svg width="11" height="11" class="fill-text-300 transition-transform shrink-0"
+                   :style="{ transform: expandedDs === ds.key ? 'rotate(90deg)' : 'none' }"
+                   xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path d="M64 448c-8.2 0-16.4-3.1-22.6-9.4c-12.5-12.5-12.5-32.8 0-45.3L178.8 256L41.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3l-160 160C80.4 444.9 72.2 448 64 448z"/></svg>
+            </button>
+            <div v-if="expandedDs === ds.key" class="px-3 pb-2 pt-1 flex flex-col gap-1 border-t-[1px] border-border-50">
+              <div v-for="f in ds.fields" :key="f.key" class="flex flex-row items-center gap-2 text-xs py-[2px]">
+                <span class="flex-1 truncate text-text-300">{{ f.label }}</span>
+                <span class="text-[10px] uppercase tracking-wide text-text-400">{{ f.type }}</span>
+              </div>
+              <button type="button" class="mt-1 text-primary text-xs text-left hover:underline" @click="newMetricFrom(ds)">
+                + New metric from this source
+              </button>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <!-- ---------- Build tab ---------- -->
+      <template v-else>
+        <div class="flex flex-row items-center gap-2 px-4 pt-3 pb-1">
+          <h4 class="flex-1 truncate">{{ activePreset ? activePreset.name : 'Structure' }}</h4>
+          <button v-if="connected" type="button" class="px-1 text-text-300 hover:text-primary" title="Refresh data" @click="hydrateActive">
+            <svg width="15" height="15" :class="hydrating ? 'animate-spin fill-primary' : 'fill-current'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M463.5 224H472c13.3 0 24-10.7 24-24V72c0-9.7-5.8-18.5-14.8-22.2s-19.3-1.7-26.2 5.2L413.4 96.6c-87.6-86.5-228.7-86.2-315.8 1c-87.5 87.5-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3c62.2-62.2 162.7-62.5 225.3-1L327 183c-6.9 6.9-8.9 17.2-5.2 26.2s12.5 14.8 22.2 14.8H463.5z"/></svg>
+          </button>
+          <button type="button" ref="addBtn" class="text-primary px-1" title="Add component"
+                  @click="addMenu.open($refs.addBtn)">
+            <svg width="18" height="18" class="fill-primary-500 hover:fill-primary-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>
+          </button>
+        </div>
+
+        <div v-if="selectedNode" class="px-4 text-[11px] text-text-400 pb-1">
+          Adding to: <span class="text-text-200">{{ selectedNode.type === 'group' ? selectedNode.name : 'top level' }}</span>
+        </div>
+
+        <!-- Structure tree -->
+        <div class="flex-1 overflow-y-auto px-3 py-1">
+          <TreeView v-if="activePreset" v-model="structure" :selected-item="selectedNode"
+                    @add="onTreeAdd" @duplicate="onTreeDuplicate" @change="onStructureChange">
+            <template #default="{ obj }">
+              <div class="flex-1 flex flex-row items-center gap-2 py-1 min-w-0" @click="selectNode(obj)">
+                <div class="w-[16px] shrink-0 flex items-center" :class="nodeColor(obj.type)">
+                  <svg width="13" height="13" class="fill-current" xmlns="http://www.w3.org/2000/svg" :viewBox="typeIcon(obj.type).box"><path :d="typeIcon(obj.type).path"/></svg>
+                </div>
+                <div class="flex-1 truncate text-sm">{{ obj.name || labelFor(obj.type) }}</div>
+                <div v-if="obj.type === 'group'" class="text-[10px] text-text-400 uppercase tracking-wide shrink-0">
+                  {{ (obj.layout && obj.layout.mode) || 'grid' }}
+                </div>
+              </div>
+            </template>
+          </TreeView>
+
+          <div v-if="activePreset && !structure.length" class="text-text-400 text-sm text-center py-6">
+            No components.<br />Use <span class="text-primary">+</span> to add one.
+          </div>
+          <div v-if="!activePreset" class="text-text-400 text-sm text-center py-6">
+            Select a preset first.
+          </div>
+        </div>
+
+        <!-- Node inspector (drag its top edge to resize; height persists in
+             config.params.inspectorHeight). Outer div owns the height + drag
+             handle, inner div scrolls — the handle must not scroll away. -->
+        <div v-if="selectedNode" class="relative shrink-0 max-h-[75%] border-t-[1px] border-border-50 bg-base-400"
+             :style="{ height: config.params.inspectorHeight + 'px' }">
+          <div :class="$style.resizeT" @mousedown="(e) => $util.dragResize(e, resizeInspector)" />
+          <div class="h-full p-4 flex flex-col gap-3 overflow-y-auto">
+          <div class="flex flex-row items-center gap-2">
+            <div class="w-[16px] shrink-0 flex items-center" :class="nodeColor(selectedNode.type)">
+              <svg width="13" height="13" class="fill-current" xmlns="http://www.w3.org/2000/svg" :viewBox="typeIcon(selectedNode.type).box"><path :d="typeIcon(selectedNode.type).path"/></svg>
+            </div>
+            <div class="flex-1 text-sm text-text-300">{{ labelFor(selectedNode.type) }} settings</div>
+          </div>
+
+          <label class="text-xs text-text-400">Name</label>
+          <Textbox v-model="selectedNode.name" placeholder="Component name" />
+
+          <!-- Group: layout -->
+          <template v-if="selectedNode.type === 'group'">
+            <label class="text-xs text-text-400">Layout</label>
+            <Dropdown :model-value="layoutMode(selectedNode)" @update:model-value="setLayoutMode(selectedNode, $event)">
+              <option value="grid">Grid</option>
+              <option value="flex">Flex (wrap)</option>
+            </Dropdown>
+            <template v-if="layoutMode(selectedNode) === 'grid'">
+              <label class="text-xs text-text-400">Columns</label>
+              <Dropdown :model-value="String(layoutCols(selectedNode))"
+                        @update:model-value="setLayoutCols(selectedNode, Number($event))">
+                <option v-for="n in 4" :key="n" :value="String(n)">{{ n }} column{{ n > 1 ? 's' : '' }}</option>
+              </Dropdown>
+            </template>
+          </template>
+
+          <!-- Metric static data (offline / manual) -->
+          <template v-else-if="selectedNode.type === 'metric' && !hasDatasources">
+            <label class="text-xs text-text-400">Label</label>
+            <Textbox v-model="metricData(selectedNode).label" placeholder="Metric label" />
+            <label class="text-xs text-text-400">Value</label>
+            <Textbox v-model="metricData(selectedNode).value" type="tel" item-class="text-right" />
+            <label class="text-xs text-text-400">Delta % (optional)</label>
+            <Textbox v-model="metricData(selectedNode).delta" type="tel" item-class="text-right" />
+          </template>
+
+          <!-- Query builder (data-source backed) -->
+          <template v-else-if="hasDatasources">
+            <label class="text-xs text-text-400">Data source</label>
+            <Dropdown :model-value="query(selectedNode).datasource || ''"
+                      @update:model-value="setDatasource(selectedNode, $event)">
+              <option value="">— none —</option>
+              <option v-for="ds in dsList" :key="ds.key" :value="ds.key">{{ ds.label }}</option>
+            </Dropdown>
+
+            <template v-if="query(selectedNode).datasource">
+              <!-- metric query -->
+              <template v-if="selectedNode.type === 'metric'">
+                <label class="text-xs text-text-400">Aggregation</label>
+                <Dropdown v-model="query(selectedNode).aggregation" @change="onQueryEdit">
+                  <option v-for="a in aggOptions(selectedNode)" :key="a" :value="a">{{ aggLabel(a) }}</option>
+                </Dropdown>
+                <template v-if="query(selectedNode).aggregation && query(selectedNode).aggregation !== 'count'">
+                  <label class="text-xs text-text-400">Field</label>
+                  <Dropdown v-model="query(selectedNode).field" @change="onQueryEdit">
+                    <option value="">— select —</option>
+                    <option v-for="f in aggFields(selectedNode)" :key="f.key" :value="f.key">{{ f.label }}</option>
+                  </Dropdown>
+                </template>
+              </template>
+
+              <!-- chart query -->
+              <template v-else-if="selectedNode.type === 'chart'">
+                <label class="text-xs text-text-400">Group by</label>
+                <Dropdown v-model="query(selectedNode).groupBy" @change="onQueryEdit">
+                  <option value="">— select —</option>
+                  <option v-for="f in fieldsOf(selectedNode)" :key="f.key" :value="f.key">{{ f.label }}</option>
+                </Dropdown>
+                <label class="text-xs text-text-400">Bucket</label>
+                <Dropdown v-model="query(selectedNode).dateModifier" @change="onQueryEdit">
+                  <option value="">Exact value</option>
+                  <option value="day">By day</option>
+                  <option value="week">By week</option>
+                  <option value="month">By month</option>
+                  <option value="year">By year</option>
+                </Dropdown>
+                <label class="text-xs text-text-400">Limit</label>
+                <Textbox v-model.number="query(selectedNode).limit" type="tel" item-class="text-right" @change="onQueryEdit" />
+              </template>
+
+              <!-- table query -->
+              <template v-else-if="selectedNode.type === 'table'">
+                <label class="text-xs text-text-400">Page size</label>
+                <Textbox v-model.number="query(selectedNode).pageSize" type="tel" item-class="text-right" @change="onQueryEdit" />
+                <label class="text-xs text-text-400">Order by</label>
+                <Dropdown v-model="tableOrderField" @change="onQueryEdit">
+                  <option value="">— default —</option>
+                  <option v-for="f in fieldsOf(selectedNode)" :key="f.key" :value="f.key">{{ f.label }}</option>
+                </Dropdown>
+              </template>
+
+              <!-- Filters (applied to every data-backed widget) -->
+              <label class="text-xs text-text-400 pt-1">Filters</label>
+              <div class="flex flex-col gap-2">
+                <div v-for="(f, fi) in filtersOf(selectedNode)" :key="fi" class="flex flex-row items-center gap-1">
+                  <Dropdown v-model="f.field" class="flex-1" @change="onFilterField(selectedNode, f)">
+                    <option value="">field</option>
+                    <option v-for="fl in fieldsOf(selectedNode)" :key="fl.key" :value="fl.key">{{ fl.label }}</option>
+                  </Dropdown>
+                  <Dropdown v-model="f.op" class="w-[64px]" @change="onQueryEdit">
+                    <option v-for="o in opsFor(fieldType(selectedNode, f.field))" :key="o" :value="o">{{ opLabel(o) }}</option>
+                  </Dropdown>
+                  <Textbox v-model="f.value" class="flex-1" placeholder="value" @change="onQueryEdit" />
+                  <button type="button" class="px-1 text-text-300 hover:text-red-600" title="Remove filter" @click="removeFilter(selectedNode, fi)">
+                    <svg width="11" height="11" class="fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>
+                  </button>
+                </div>
+                <button type="button" class="text-primary text-xs text-left hover:underline" @click="addFilter(selectedNode)">+ Add filter</button>
+              </div>
+            </template>
+          </template>
+
+          <button type="button" class="text-xs text-red-600 hover:underline text-left pt-1" @click="removeNode(selectedNode)">
+            Remove component
+          </button>
+          </div>
+        </div>
+      </template>
+
+      <ContextMenu ref="presetMenu" position="bottom-right">
+        <template #default="{ context }">
+          <div class="flex flex-col min-w-[160px] p-1 py-2">
+            <button class="w-full p-2 rounded-md text-left px-3 menu-item" @click="renamePreset(context.item)">Rename</button>
+            <button class="w-full p-2 rounded-md text-left px-3 menu-item" @click="duplicatePreset(context.item)">Duplicate</button>
+            <button class="w-full p-2 rounded-md text-left px-3 menu-item text-red-600" @click="removePreset(context.item)">Remove</button>
+          </div>
+        </template>
+      </ContextMenu>
+
+      <ContextMenu ref="addMenu" position="bottom-right">
+        <div class="flex flex-col min-w-[180px] p-1 py-2">
+          <button v-for="t in ['group', 'metric', 'chart', 'table']" :key="t"
+                  class="w-full p-2 rounded-md text-left px-3 menu-item flex flex-row items-center gap-2"
+                  @click="addComponent(t)">
+            <div class="w-[16px] shrink-0 flex items-center" :class="nodeColor(t)">
+              <svg width="13" height="13" class="fill-current" xmlns="http://www.w3.org/2000/svg" :viewBox="typeIcon(t).box"><path :d="typeIcon(t).path"/></svg>
+            </div>
+            {{ labelFor(t) }}
+          </button>
+        </div>
+      </ContextMenu>
+
+      <div :class="$style.resizeL" @mousedown="(e) => $util.dragResize(e, resizeLeft)" />
+    </div>
+
+    <!-- ============================ MIDDLE: dashboard ========================== -->
+    <div class="flex-1 flex flex-col min-w-0 bg-base-400">
+
+      <div class="flex flex-row items-center gap-3 px-6 py-3 border-b-[1px] border-border-50">
+        <h3 class="flex-1 truncate">{{ activePreset ? activePreset.name : 'Dashboard' }}</h3>
+        <Button variant="secondary" class="w-[110px]" :state="activePreset ? 1 : -1" @click="resetSamples">Load samples</Button>
+      </div>
+
+      <div class="flex-1 overflow-y-auto p-6">
+
+        <div v-if="activePreset && structure.length" class="flex flex-col gap-6">
+          <template v-for="node in structure" :key="node.uid">
+
+            <!-- Group: section heading + children laid out per node.layout -->
+            <section v-if="node.type === 'group'" class="flex flex-col gap-3">
+              <div class="flex flex-row items-center gap-2">
+                <h4 class="flex-1 truncate">{{ node.name }}</h4>
+                <button type="button" class="opacity-40 hover:opacity-100" title="Remove section" @click="removeNode(node)">
+                  <svg width="12" height="12" class="fill-text-300 hover:fill-red-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>
+                </button>
+              </div>
+              <div :style="groupStyle(node)">
+                <Widget v-for="child in node.items" :key="child.uid" :node="child" @remove="removeNode(child)" />
+              </div>
+              <div v-if="!node.items || !node.items.length" class="text-text-400 text-sm">Empty section — add widgets from the Build tab or ask the AI.</div>
+            </section>
+
+            <!-- Leaf widget -->
+            <Widget v-else :node="node" @remove="removeNode(node)" />
+          </template>
+        </div>
+
+        <!-- Empty preset / no preset -->
+        <div v-else class="h-full flex flex-col items-center justify-center text-center text-text-300 gap-3">
+          <svg width="44" height="44" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM64 96v64H448V96H64zm384 128H256v64H448V224zm0 128H256v64H448V352zM192 352H64v64H192V352zm0-128H64v64H192V224z"/></svg>
+          <p class="text-lg">{{ activePreset ? 'This preset is empty — add components or ask the AI to build it.' : 'Add a preset to get started.' }}</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- ============================ RIGHT: chat =============================== -->
+    <div :style="{ width: config.params.rightWidth + 'px' }"
+         class="relative shrink-0 flex flex-col bg-base-300 overflow-hidden">
+
+      <div :class="$style.resizeR" @mousedown="(e) => $util.dragResize(e, resizeRight)" />
+
+      <!-- Ask AI panel — server-driven like web-scaffold List: `${controller}.ai-chat`
+           receives { messages, structure } and returns { reply, structure?|nodes?, model }.
+           Offline mode routes through `chatFn` (canned sample widgets). -->
+      <LLMChat class="flex-1 min-h-0"
+               :controller="controller"
+               :messages="messages"
+               :extra="getChatContext"
+               :chat-fn="useServerChat ? null : offlineChat"
+               title="AI Assistant" placeholder="Describe the dashboard you want..."
+               @result="onChatResult" @reset="clearChat" />
+    </div>
+
+    <!-- ============================ Rename card =============================== -->
+    <Card ref="renameCard" :float="true" width="420" height="230">
+      <template #default="{ context }">
+        <div class="flex-1 flex flex-col">
+          <div class="p-6 pb-2"><h3>Rename Preset</h3></div>
+          <div class="p-6 pt-2 flex-1">
+            <Textbox v-model="context.name" placeholder="Preset name" maxlength="100" />
+          </div>
+          <div class="p-6 pt-0 flex flex-row justify-end gap-2">
+            <Button variant="secondary" class="w-[90px]" @click="renameCard.close()">Cancel</Button>
+            <Button class="w-[90px]" @click="context.apply(context.name)">Save</Button>
+          </div>
+        </div>
+      </template>
+    </Card>
+  </div>
+</template>
+
+<script setup>
+import { computed, defineComponent, h, inject, onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue'
+import { Bar } from 'vue-chartjs'
+import LLMChat from '../widgets/LLMChat.vue'
+import VirtualTable from './VirtualTable.vue'
+import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Tooltip, Legend } from 'chart.js'
+ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip, Legend)
+
+// AIDashboard mirrors the UserConfig model (UserConfig hasMany UserPreset):
+//   config.params            — UserConfig.params  (UI state: widths, presetIdx, leftTab)
+//   config.presets[]         — UserPreset rows: { uid, name, params }
+//   config.presets[].params  — UserPreset.params: { structure: node[], messages: [] }
+//
+// It runs in two modes:
+//   • Offline — no `socket`/`controller`: the `samples` prop seeds structure and
+//     the chat panel appends canned widgets. The host page persists `config`.
+//   • Connected — `socket` + `controller` given: mirrors the server AIDashboard
+//     mixin. `${controller}.load-dashboard` hydrates node.data from datasources,
+//     `${controller}.save` persists the whole config (debounced), and
+//     `${controller}.ai-chat` drives the assistant. `datasources` describes the
+//     query-builder options: { [key]: { label, fields: [{ key, label }] } }.
+const { controller, socket, config, samples, datasources, autoSave, serverChat } = defineProps({
+  controller: { type: String, default: '' },
+  socket: { type: Object, default: null },
+  config: { type: Object, required: true },
+  samples: { type: Object, default: () => ({ structure: [], widgets: {} }) },
+  datasources: { type: Object, default: () => ({}) },
+  // Persist edits through `${controller}.save`. Turn off when a host page owns
+  // persistence (e.g. via loadConfig/saveConfig) to avoid a double write.
+  autoSave: { type: Boolean, default: true },
+  // Route chat through `${controller}.ai-chat`. Turn off to keep the offline
+  // canned-widget generator even when a socket is connected.
+  serverChat: { type: Boolean, default: true },
+})
+
+const presetMenu = useTemplateRef('presetMenu')
+const addMenu = useTemplateRef('addMenu')
+const renameCard = useTemplateRef('renameCard')
+
+const connected = computed(() => !!(socket && controller))
+const useServerChat = computed(() => connected.value && serverChat)
+
+// Data sources power the query builder + the Data tab. When connected they come
+// from `${controller}.load-datasource`; otherwise from the `datasources` prop.
+const serverDatasources = ref(null)
+const expandedDs = ref(null)
+
+function normalizeDs(list) {
+  return (list || []).map(d => ({
+    key: d.key,
+    label: d.label ?? d.key,
+    fields: Array.isArray(d.fields) ? d.fields : [],
+    aggregations: Array.isArray(d.aggregations) ? d.aggregations : ['count', 'sum', 'avg', 'min', 'max'],
+  }))
+}
+
+const dsList = computed(() => serverDatasources.value
+  ?? normalizeDs(Object.entries(datasources).map(([key, v]) => ({ key, ...v }))))
+const hasDatasources = computed(() => dsList.value.length > 0)
+
+async function loadDatasources() {
+  if (!connected.value) return
+  try {
+    const res = await socket.send(`${controller}.load-datasource`, {})
+    const list = Array.isArray(res?.datasources) ? res.datasources : (Array.isArray(res) ? res : [])
+    serverDatasources.value = normalizeDs(list)
+  } catch (e) {
+    // keep any prop-provided datasources on failure
+  }
+}
+
+let seq = 0
+function uid(prefix = 'w') {
+  return `${prefix}-${Date.now().toString(36)}-${seq++}`
+}
+
+/* ---------------------------------------------------------------------------
+   Node templates. Offline templates come from the `samples` prop (uid-less);
+   we deep-clone and assign fresh uids on use. Blank nodes are built in-code.
+--------------------------------------------------------------------------- */
+function instantiate(node) {
+  const copy = JSON.parse(JSON.stringify(node))
+  const assign = (n) => {
+    n.uid = uid()
+    if (n.type === 'group' && !n.layout) n.layout = { mode: 'grid', cols: metricOnly(n) ? 4 : 2 }
+    if (Array.isArray(n.items)) n.items.forEach(assign)
+  }
+  assign(copy)
+  return copy
+}
+
+function blankNode(type) {
+  const base = { uid: uid(), name: labelFor(type), type }
+  if (type === 'group') { base.items = []; base.layout = { mode: 'grid', cols: 2 } }
+  else if (type === 'metric') base.data = { label: 'Metric', value: 0 }
+  else if (type === 'chart') base.data = { series: [] }
+  else if (type === 'table') base.data = { columns: [], rows: [] }
+  if (hasDatasources.value && type !== 'group') base.query = {}
+  return base
+}
+
+function labelFor(type) {
+  return { group: 'Section', metric: 'Metric', chart: 'Chart', table: 'Table' }[type] ?? type
+}
+
+function nodeColor(type) {
+  return {
+    group: 'text-text-300',
+    metric: 'text-primary',
+    chart: 'text-green-600',
+    table: 'text-amber-600',
+  }[type] ?? 'text-text-300'
+}
+
+// Distinct icons per node type (FontAwesome paths).
+function typeIcon(type) {
+  switch (type) {
+    case 'metric': return { box: '0 0 448 512', path: 'M416 127.1h-58.23l9.789-58.74c2.906-17.44-8.875-33.92-26.31-36.83c-17.53-2.875-33.92 8.891-36.83 26.31L292.7 127.1H197.6l9.789-58.74c2.906-17.44-8.875-33.92-26.31-36.83c-17.53-2.875-33.92 8.891-36.83 26.31L132.7 127.1H64c-17.67 0-32 14.33-32 31.1c0 17.67 14.33 31.1 32 31.1h58.23l-21.33 128H32c-17.67 0-32 14.33-32 31.1s14.33 32 32 32h58.23l-9.789 58.74c-2.906 17.44 8.875 33.92 26.31 36.83C108.5 479.9 110.3 480 112 480c15.34 0 28.84-11.09 31.45-26.73l11.79-70.79h95.12l-9.789 58.74c-2.906 17.44 8.875 33.92 26.31 36.83C258.5 479.9 260.3 480 262 480c15.34 0 28.84-11.09 31.45-26.73l11.79-70.79H384c17.67 0 32-14.33 32-32s-14.33-31.1-32-31.1h-58.23l21.33-128H416c17.67 0 32-14.33 32-31.1C448 142.3 433.7 127.1 416 127.1zM282.9 319.1H187.8L209.1 191.1h95.12L282.9 319.1z' }
+    case 'chart': return { box: '0 0 512 512', path: 'M32 32c17.7 0 32 14.3 32 32V400c0 8.8 7.2 16 16 16H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H80c-44.2 0-80-35.8-80-80V64C0 46.3 14.3 32 32 32zM160 224c17.7 0 32 14.3 32 32v64c0 17.7-14.3 32-32 32s-32-14.3-32-32V256c0-17.7 14.3-32 32-32zm128-64V320c0 17.7-14.3 32-32 32s-32-14.3-32-32V160c0-17.7 14.3-32 32-32s32 14.3 32 32zm64 32c17.7 0 32 14.3 32 32v96c0 17.7-14.3 32-32 32s-32-14.3-32-32V256c0-17.7 14.3-32 32-32z' }
+    case 'table': return { box: '0 0 512 512', path: 'M0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM64 96v64H448V96H64zm384 128H256v64H448V224zm0 128H256v64H448V352zM192 352H64v64H192V352zm0-128H64v64H192V224z' }
+    default: return { box: '0 0 448 512', path: 'M384 32c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96C0 60.7 28.7 32 64 32H384zM160 144c-13.3 0-24 10.7-24 24s10.7 24 24 24H352c13.3 0 24-10.7 24-24s-10.7-24-24-24H160zM96 168a32 32 0 1 0 64 0 32 32 0 1 0 -64 0zM160 240c-13.3 0-24 10.7-24 24s10.7 24 24 24H352c13.3 0 24-10.7 24-24s-10.7-24-24-24H160zM96 264a32 32 0 1 0 64 0 32 32 0 1 0 -64 0zm64 48c-13.3 0-24 10.7-24 24s10.7 24 24 24H352c13.3 0 24-10.7 24-24s-10.7-24-24-24H160zM96 360a32 32 0 1 0 64 0 32 32 0 1 0 -64 0z' }
+  }
+}
+
+/* ---------- Presets (UserConfig → UserPreset shape) ---------- */
+function createPreset(name) {
+  return { uid: uid('p'), name, params: { structure: [], messages: [] } }
+}
+
+function normalizePreset(preset) {
+  if (!preset.uid) preset.uid = uid('p')
+  if (!preset.params || typeof preset.params !== 'object') preset.params = {}
+  if (!Array.isArray(preset.params.structure)) preset.params.structure = []
+  if (!Array.isArray(preset.params.messages)) preset.params.messages = []
+  // ensure every group carries a layout so the inspector/preview have defaults
+  const walk = (list) => list.forEach(n => {
+    if (n.type === 'group') {
+      if (!n.layout || typeof n.layout !== 'object') n.layout = { mode: 'grid', cols: metricOnly(n) ? 4 : 2 }
+      if (Array.isArray(n.items)) walk(n.items)
+    }
+  })
+  walk(preset.params.structure)
+  // a reload can leave a message stuck mid-stream — freeze it
+  for (const m of preset.params.messages) {
+    if (m.isLoading) {
+      m.isLoading = false
+      m.body = m.display || m.body || 'Cancelled.'
+      m.display = m.body
+    }
+  }
+  return preset
+}
+
+/* ---------- Persisted state (UserConfig shape) ---------- */
+if (!config.params) config.params = {}
+if (config.params.leftWidth == null) config.params.leftWidth = 260
+if (config.params.rightWidth == null) config.params.rightWidth = 360
+if (config.params.inspectorHeight == null) config.params.inspectorHeight = 300
+if (config.params.leftTab == null) config.params.leftTab = 'presets'
+if (!Array.isArray(config.presets)) config.presets = []
+config.presets.forEach(normalizePreset)
+
+// first run: seed one preset from the samples
+if (!config.presets.length) {
+  const preset = createPreset('My Dashboard')
+  preset.params.structure = (samples.structure || []).map(instantiate)
+  config.presets.push(preset)
+}
+if (!config.presets.find(p => p.uid === config.params.presetIdx)) {
+  config.params.presetIdx = config.presets[0].uid
+}
+
+const activeUid = computed(() => config.params.presetIdx)
+const activePreset = computed(() => config.presets.find(p => p.uid === activeUid.value) ?? null)
+const structure = computed(() => activePreset.value?.params.structure ?? [])
+const messages = computed(() => activePreset.value?.params.messages ?? [])
+
+function selectPreset(preset) {
+  config.params.presetIdx = preset.uid
+  selectedNode.value = null
+}
+
+function addPreset(name = 'New Preset') {
+  const preset = createPreset(name)
+  config.presets.push(preset)
+  selectPreset(preset)
+  config.params.leftTab = 'build'
+  presetMenu.value?.close()
+}
+
+function renamePreset(preset) {
+  presetMenu.value?.close()
+  renameCard.value.open({
+    name: preset.name,
+    apply(name) {
+      if (name != null && `${name}`.trim()) preset.name = `${name}`.trim()
+      renameCard.value.close()
+    },
+  })
+}
+
+function duplicatePreset(preset) {
+  presetMenu.value?.close()
+  const copy = normalizePreset(JSON.parse(JSON.stringify(preset)))
+  copy.uid = uid('p')
+  copy.name = `${preset.name} (copy)`
+  const walk = (nodes) => nodes.forEach(n => { n.uid = uid(); if (Array.isArray(n.items)) walk(n.items) })
+  walk(copy.params.structure)
+  config.presets.splice(config.presets.indexOf(preset) + 1, 0, copy)
+  selectPreset(copy)
+}
+
+function removePreset(preset) {
+  presetMenu.value?.close()
+  const i = config.presets.indexOf(preset)
+  if (i >= 0) config.presets.splice(i, 1)
+  if (config.params.presetIdx === preset.uid) {
+    config.params.presetIdx = config.presets[0]?.uid ?? null
+  }
+  if (connected.value) socket.send(`${controller}.remove-preset`, { uid: preset.uid }).catch(() => {})
+}
+
+/* ---------- Resize ---------- */
+function resizeLeft(w) {
+  const next = config.params.leftWidth + w
+  if (next >= 220 && next <= 520) config.params.leftWidth = next
+}
+function resizeRight(w) {
+  const next = config.params.rightWidth - w
+  if (next >= 280 && next <= 560) config.params.rightWidth = next
+}
+// Inspector handle sits on the panel's TOP edge, so dragging up (negative h)
+// grows the panel.
+function resizeInspector(_w, h) {
+  const next = config.params.inspectorHeight - h
+  if (next >= 140 && next <= 700) config.params.inspectorHeight = next
+}
+
+/* ---------- Structure editing (TreeView) ---------- */
+const selectedNode = ref(null)
+
+function selectNode(node) {
+  selectedNode.value = node
+}
+
+function metricOnly(node) {
+  const items = node.items || []
+  return items.length > 0 && items.every(n => n.type === 'metric')
+}
+
+// Add a component from the toolbar menu → into the selected group, else root.
+function addComponent(type) {
+  addMenu.value?.close()
+  if (!activePreset.value) return
+  const node = blankNode(type)
+  const target = (selectedNode.value && selectedNode.value.type === 'group')
+    ? selectedNode.value.items
+    : structure.value
+  target.push(node)
+  selectNode(node)
+  onStructureChange()
+}
+
+// TreeView's inline "+" (groups only) → quick-add a metric into that group.
+function onTreeAdd(items) {
+  const node = blankNode('metric')
+  items.push(node)
+  selectNode(node)
+  onStructureChange()
+}
+
+function onTreeDuplicate(parent, item) {
+  const copy = JSON.parse(JSON.stringify(item))
+  const walk = (n) => { n.uid = uid(); if (Array.isArray(n.items)) n.items.forEach(walk) }
+  walk(copy)
+  parent.splice(parent.indexOf(item) + 1, 0, copy)
+  selectNode(copy)
+  onStructureChange()
+}
+
+function onStructureChange() {
+  persist()
+}
+
+function removeFromTree(list, target) {
+  const i = list.findIndex(n => n.uid === target)
+  if (i >= 0) { list.splice(i, 1); return true }
+  return list.some(n => n.items && removeFromTree(n.items, target))
+}
+
+function removeNode(node) {
+  removeFromTree(structure.value, node.uid)
+  if (selectedNode.value?.uid === node.uid) selectedNode.value = null
+  onStructureChange()
+}
+
+/* ---------- Layout helpers (group nodes) ---------- */
+function layoutMode(node) { return node.layout?.mode ?? 'grid' }
+function layoutCols(node) { return node.layout?.cols ?? 2 }
+
+function setLayoutMode(node, mode) {
+  if (!node.layout) node.layout = {}
+  node.layout.mode = mode
+  if (mode === 'grid' && !node.layout.cols) node.layout.cols = 2
+}
+function setLayoutCols(node, cols) {
+  if (!node.layout) node.layout = {}
+  node.layout.cols = cols
+}
+
+// Inline styles avoid Tailwind purge issues with dynamic column counts.
+function groupStyle(node) {
+  const mode = layoutMode(node)
+  if (mode === 'flex') {
+    return { display: 'flex', flexWrap: 'wrap', gap: '1rem' }
+  }
+  const cols = Math.min(4, Math.max(1, layoutCols(node)))
+  return { display: 'grid', gap: '1rem', gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` }
+}
+
+/* ---------- Inspector data accessors ---------- */
+function metricData(node) { if (!node.data) node.data = {}; return node.data }
+function query(node) { if (!node.query) node.query = {}; return node.query }
+
+function currentDs(node) { return dsList.value.find(d => d.key === query(node).datasource) }
+function fieldsOf(node) { return currentDs(node)?.fields ?? [] }
+
+function setDatasource(node, ds) {
+  const q = query(node)
+  q.datasource = ds
+  q.filters = []
+  q.field = ''
+  if (!ds) return
+  // seed sensible query defaults per node type
+  if (node.type === 'metric' && !q.aggregation) q.aggregation = 'count'
+  if (node.type === 'table') {
+    if (q.pageSize == null) q.pageSize = 10
+    // default columns = all datasource fields
+    q.columns = fieldsOf(node).map(f => ({ key: f.key, label: f.label }))
+  }
+  onQueryEdit()
+}
+
+/* ---- Aggregations ---- */
+function aggOptions(node) { return currentDs(node)?.aggregations ?? ['count', 'sum', 'avg', 'min', 'max'] }
+function aggLabel(a) { return { count: 'Count', sum: 'Sum', avg: 'Average', min: 'Minimum', max: 'Maximum' }[a] ?? a }
+// Fields eligible for the current aggregation (numeric for sum/avg; +date for min/max).
+function aggFields(node) {
+  const agg = query(node).aggregation
+  const fs = fieldsOf(node)
+  if (['sum', 'avg'].includes(agg)) return fs.filter(f => f.type === 'number')
+  if (['min', 'max'].includes(agg)) return fs.filter(f => f.type === 'number' || f.type === 'date')
+  return fs
+}
+
+/* ---- Filters ---- */
+function fieldType(node, key) { return fieldsOf(node).find(f => f.key === key)?.type ?? 'string' }
+function opsFor(type) {
+  if (type === 'number' || type === 'date') return ['=', '!=', '>', '>=', '<', '<=']
+  return ['=', '!=', 'contains', 'in']
+}
+function opLabel(op) {
+  return { '=': '=', '!=': '≠', '>': '>', '>=': '≥', '<': '<', '<=': '≤', contains: 'has', in: 'in' }[op] ?? op
+}
+function filtersOf(node) { const q = query(node); if (!Array.isArray(q.filters)) q.filters = []; return q.filters }
+function addFilter(node) { filtersOf(node).push({ field: '', op: '=', value: '' }); persist() }
+function removeFilter(node, i) { filtersOf(node).splice(i, 1); onQueryEdit() }
+// Keep the operator valid when the filter's field type changes.
+function onFilterField(node, filter) {
+  const allowed = opsFor(fieldType(node, filter.field))
+  if (!allowed.includes(filter.op)) filter.op = allowed[0]
+  onQueryEdit()
+}
+
+// Re-hydrate (debounced) after query/filter edits, and persist the change.
+let hydrateTimer = null
+function queueHydrate() { clearTimeout(hydrateTimer); hydrateTimer = setTimeout(() => hydrateActive(), 450) }
+function onQueryEdit() { queueHydrate(); persist() }
+
+/* ---- Data tab ---- */
+function toggleDs(key) { expandedDs.value = expandedDs.value === key ? null : key }
+function newMetricFrom(ds) {
+  if (!activePreset.value) return
+  const node = blankNode('metric')
+  node.name = ds.label
+  node.query = { datasource: ds.key, aggregation: 'count', filters: [] }
+  const target = (selectedNode.value && selectedNode.value.type === 'group') ? selectedNode.value.items : structure.value
+  target.push(node)
+  selectNode(node)
+  config.params.leftTab = 'build'
+  onQueryEdit()
+}
+
+// Order for table query is stored as [[field, 'desc']]; expose the field only.
+const tableOrderField = computed({
+  get() {
+    const q = selectedNode.value ? query(selectedNode.value) : {}
+    return Array.isArray(q.order) && q.order[0] ? q.order[0][0] : ''
+  },
+  set(field) {
+    if (!selectedNode.value) return
+    const q = query(selectedNode.value)
+    q.order = field ? [[field, 'desc']] : undefined
+  },
+})
+
+/* ---------- Reset from samples ---------- */
+function resetSamples() {
+  if (!activePreset.value) return
+  activePreset.value.params.structure = (samples.structure || []).map(instantiate)
+  selectedNode.value = null
+  onStructureChange()
+  hydrateActive()
+}
+
+/* ---------- Server: hydrate + persist ---------- */
+const hydrating = ref(false)
+
+// Strip ephemeral `data` from query-backed nodes; keep static data otherwise.
+function cleanNode(node) {
+  const { data, ...rest } = node
+  const out = { ...rest }
+  if (!node.query) out.data = data
+  if (Array.isArray(node.items)) out.items = node.items.map(cleanNode)
+  return out
+}
+
+function cleanConfig() {
+  return {
+    key: config.key,
+    name: config.name,
+    params: config.params,
+    presets: config.presets.map(p => ({
+      uid: p.uid,
+      name: p.name,
+      params: {
+        ...p.params,
+        structure: (p.params.structure || []).map(cleanNode),
+        messages: (p.params.messages || []).map(m => ({ ...m, isLoading: false })),
+      },
+    })),
+  }
+}
+
+let saveTimer = null
+function persist() {
+  if (!connected.value || !autoSave) return
+  clearTimeout(saveTimer)
+  saveTimer = setTimeout(() => {
+    socket.send(`${controller}.save`, { config: cleanConfig() }).catch(() => {})
+  }, 700)
+}
+
+// Merge server-computed `data` into the live structure by uid.
+function mergeData(list, hydrated) {
+  for (const h of hydrated) {
+    const node = list.find(n => n.uid === h.uid)
+    if (!node) continue
+    if (h.data) node.data = { ...node.data, ...h.data }
+    if (Array.isArray(node.items) && Array.isArray(h.items)) mergeData(node.items, h.items)
+  }
+}
+
+async function hydrateActive() {
+  if (!connected.value || !activePreset.value) return
+  hydrating.value = true
+  try {
+    const preset = activePreset.value
+    const res = await socket.send(`${controller}.load-dashboard`, {
+      preset: { uid: preset.uid, name: preset.name, params: { structure: preset.params.structure.map(cleanNode) } },
+    })
+    const hydrated = res?.params?.structure ?? res?.structure ?? []
+    mergeData(preset.params.structure, hydrated)
+  } catch (e) {
+    // leave existing data in place on failure
+  } finally {
+    hydrating.value = false
+  }
+}
+
+/* ---------- Chat (LLMChat panel, wired like web-scaffold List) ---------- */
+
+/* ----- Offline canned generators (samples-driven) ----- */
+function pickReply(text) {
+  const t = text.toLowerCase()
+  const has = (key) => !!(samples.widgets && samples.widgets[key])
+
+  if (t.includes('overview') || t.includes('dashboard') || t.includes('build')) {
+    return { body: 'Here\'s a sample dashboard with KPI cards, charts and a table.', full: true }
+  }
+  if ((t.includes('table') || t.includes('customer') || t.includes('list')) && has('table')) {
+    return { body: 'Added a **table** widget.', widget: 'table' }
+  }
+  if ((t.includes('chart') || t.includes('bar') || t.includes('revenue') || t.includes('trend') || t.includes('graph')) && has('chart')) {
+    return { body: 'Added a **bar chart**.', widget: 'chart' }
+  }
+  if ((t.includes('metric') || t.includes('kpi') || t.includes('card') || t.includes('number')) && has('metric')) {
+    return { body: 'Added a **metric** card.', widget: 'metric' }
+  }
+  if ((t.includes('group') || t.includes('section')) && has('group')) {
+    return { body: 'Added an empty **section** — ask me to add widgets to it.', widget: 'group' }
+  }
+  return {
+    body: 'I can generate ' + Object.keys(samples.widgets || {}).join(', ') +
+      ' widgets, or a full sample dashboard. Try "add a revenue chart" or "build a dashboard".',
+  }
+}
+
+function applyGenerated(reply) {
+  const preset = activePreset.value
+  if (!preset) return
+  if (reply.full) {
+    preset.params.structure = (samples.structure || []).map(instantiate)
+  } else if (reply.widget && samples.widgets?.[reply.widget]) {
+    const node = instantiate(samples.widgets[reply.widget])
+    const list = preset.params.structure
+    const lastGroup = [...list].reverse().find(n => n.type === 'group' && Array.isArray(n.items))
+    if (node.type === 'metric' && lastGroup) lastGroup.items.push(node)
+    else list.push(node)
+  }
+}
+
+// Assign uids to any AI-returned nodes that lack them.
+function ensureUids(list) {
+  for (const n of list) {
+    if (!n.uid) n.uid = uid()
+    if (n.type === 'group' && !n.layout) n.layout = { mode: 'grid', cols: 2 }
+    if (Array.isArray(n.items)) ensureUids(n.items)
+  }
+  return list
+}
+
+// Context sent with every connected chat turn — the cleaned structure the
+// server needs to compute preset actions (mirrors List.vue's getChatContext).
+function getChatContext() {
+  return { structure: structure.value.map(cleanNode) }
+}
+
+/* ----- Offline chat driver (LLMChat `chatFn`): canned reply + widgets ----- */
+async function offlineChat({ messages: msgs }) {
+  const prompt = [...msgs].reverse().find(m => m.direction === 1)?.body ?? ''
+  const reply = pickReply(prompt)
+  // brief delay so the typing indicator is visible
+  await new Promise(resolve => setTimeout(resolve, 350))
+  applyGenerated(reply)
+  return { reply: reply.body, model: 'offline-demo' }
+}
+
+// Apply the server's structure actions from the chat reply, then re-hydrate
+// widget data and persist (mirrors List.vue's onChatResult).
+async function onChatResult(res) {
+  const preset = activePreset.value
+  if (!preset) return
+  if (Array.isArray(res?.structure)) {
+    preset.params.structure = ensureUids(res.structure)
+  } else if (Array.isArray(res?.nodes) && res.nodes.length) {
+    const list = preset.params.structure
+    const lastGroup = [...list].reverse().find(n => n.type === 'group' && Array.isArray(n.items))
+    for (const node of ensureUids(res.nodes)) {
+      if (node.type === 'metric' && lastGroup) lastGroup.items.push(node)
+      else list.push(node)
+    }
+  }
+  await hydrateActive()
+  persist()
+}
+
+// Clear the active preset's chat history (falls back to no-confirm when the
+// host app doesn't provide the `confirm` dialog).
+const confirmDialog = inject('confirm', null)
+
+function clearChat() {
+  const preset = activePreset.value
+  if (!preset) return
+  const doClear = () => {
+    preset.params.messages.splice(0, preset.params.messages.length)
+    persist()
+  }
+  confirmDialog ? confirmDialog('Clear chat history?', doClear) : doClear()
+}
+
+/* ---------- Server sync lifecycle ---------- */
+onMounted(() => {
+  if (connected.value) { loadDatasources(); hydrateActive() }
+})
+watch(activeUid, () => { selectedNode.value = null; if (connected.value) hydrateActive() })
+// persist structural/param edits (no-op unless connected + autoSave)
+watch(() => config, () => persist(), { deep: true })
+
+onUnmounted(() => {
+  clearTimeout(saveTimer)
+  clearTimeout(hydrateTimer)
+})
+
+/* ---------- Presentational widget — renders a node's data by type ---------- */
+const Widget = defineComponent({
+  name: 'Widget',
+  props: { node: { type: Object, required: true } },
+  emits: ['remove'],
+  setup(props, { emit }) {
+    const data = computed(() => props.node.data || {})
+
+    function renderMetric() {
+      return h('div', { class: 'flex flex-col gap-1' }, [
+        h('div', { class: 'text-text-300 text-sm' }, data.value.label || props.node.name),
+        h('div', { class: 'text-4xl font-bold' }, formatNum(data.value.value)),
+        data.value.delta != null && data.value.delta !== ''
+          ? h('div', { class: Number(data.value.delta) >= 0 ? 'text-green-600 text-sm' : 'text-red-600 text-sm' },
+              `${Number(data.value.delta) >= 0 ? '▲' : '▼'} ${Math.abs(Number(data.value.delta))}%`)
+          : null,
+      ])
+    }
+
+    // Resolve a theme CSS variable to a concrete color (SSR-safe fallback).
+    function cssVar(name, fallback) {
+      if (typeof document === 'undefined') return fallback
+      const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+      return v || fallback
+    }
+
+    // Bar chart via vue-chartjs. `data.series`/`data.rows` = [{ label, value }].
+    function renderChart() {
+      const rows = data.value.series || data.value.rows || []
+      if (!rows.length) return h('div', { class: 'text-text-400 text-sm' }, 'No data.')
+
+      const primary = cssVar('--primary', '#5D9CEC')
+      const grid = cssVar('--border-50', 'rgba(128,128,128,.15)')
+      const tick = cssVar('--text-300', '#8a8a8a')
+
+      const chartData = {
+        labels: rows.map(r => `${r.label}`),
+        datasets: [{
+          label: props.node.name,
+          data: rows.map(r => Number(r.value) || 0),
+          backgroundColor: primary,
+          hoverBackgroundColor: primary,
+          borderRadius: 4,
+          maxBarThickness: 46,
+        }],
+      }
+
+      const options = {
+        responsive: true,
+        maintainAspectRatio: false,
+        animation: { duration: 300 },
+        plugins: {
+          legend: { display: false },
+          tooltip: { callbacks: { label: ctx => ` ${formatNum(ctx.parsed.y)}` } },
+        },
+        scales: {
+          x: {
+            grid: { display: false },
+            ticks: {
+              color: tick, font: { size: 11 }, autoSkip: true, maxRotation: 0,
+              callback(value) {
+                const label = `${this.getLabelForValue(value) ?? ''}`
+                return label.length > 12 ? label.slice(0, 12) + '…' : label
+              },
+            },
+          },
+          y: {
+            beginAtZero: true,
+            grid: { color: grid },
+            ticks: { color: tick, font: { size: 11 }, precision: 0 },
+          },
+        },
+      }
+
+      return h('div', { style: { position: 'relative', height: '240px' } }, [
+        h(Bar, { data: chartData, options }),
+      ])
+    }
+
+    // Table widgets render through the shared VirtualTable component.
+    // Columns are passed BY REFERENCE from their persisted home — the node's
+    // `query.columns` (query-backed tables) or `data.columns` (static tables) —
+    // because VirtualTable's drag-resize writes `width` straight into the given
+    // column objects. The config deep-watch then saves the widths with the
+    // preset, so they survive a refresh. Normalization mutates in place (and is
+    // idempotent) for the same reason: fresh copies would drop resizes on the
+    // next render.
+    function tableColumns() {
+      const query = props.node.query
+      const source = (Array.isArray(query?.columns) && query.columns.length)
+        ? query.columns
+        : (data.value.columns || [])
+      source.forEach((c, i) => {
+        if (typeof c === 'string') source[i] = { key: c, label: c }
+        else {
+          if (!c.key) c.key = c.label
+          if (!c.label) c.label = c.key
+        }
+      })
+      return source
+    }
+
+    function renderTable() {
+      const cols = tableColumns()
+      const rows = data.value.rows || []
+      if (!cols.length) return h('div', { class: 'text-text-400 text-sm' }, 'No columns configured.')
+      return h('div', { style: { height: `${Math.min(320, 44 + rows.length * 40 + 8)}px` } }, [
+        h(VirtualTable, { items: rows, columns: cols }),
+      ])
+    }
+
+    function formatNum(v) {
+      const n = Number(v)
+      if (Number.isNaN(n)) return `${v ?? ''}`
+      return n.toLocaleString()
+    }
+
+    return () => h('div', { class: 'group bg-base-300 rounded-xl p-5 flex flex-col gap-3 h-full' }, [
+      h('div', { class: 'flex flex-row items-center gap-2' }, [
+        h('div', { class: 'flex-1 text-sm text-text-300 truncate' }, props.node.name),
+        h('button', {
+          type: 'button',
+          class: 'opacity-0 group-hover:opacity-60 hover:!opacity-100',
+          title: 'Remove widget',
+          onClick: () => emit('remove'),
+        }, [
+          h('svg', { width: 12, height: 12, class: 'fill-text-300 hover:fill-red-600', xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 384 512' }, [
+            h('path', { d: 'M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z' }),
+          ]),
+        ]),
+      ]),
+      props.node.type === 'metric' ? renderMetric()
+        : props.node.type === 'chart' ? renderChart()
+        : props.node.type === 'table' ? renderTable()
+        : h('div', { class: 'text-text-400 text-sm' }, 'Empty group — add child widgets.'),
+    ])
+  },
+})
+</script>
+
+<style module>
+.comp {
+  @apply flex-1 flex flex-row relative;
+  @apply divide-x divide-border-50;
+}
+
+.resizeL {
+  @apply w-[3px] cursor-ew-resize absolute top-0 right-0 bottom-0 z-10;
+  @apply border-r-[1px] border-transparent hover:border-primary;
+}
+
+.resizeR {
+  @apply w-[3px] cursor-ew-resize absolute top-0 left-0 bottom-0 z-10;
+  @apply border-l-[1px] border-transparent hover:border-primary;
+}
+
+.resizeT {
+  @apply h-[3px] cursor-ns-resize absolute left-0 right-0 top-0 z-10;
+  @apply border-t-[1px] border-transparent hover:border-primary;
+}
+</style>