@mixd-id/web-scaffold 0.2.250801014 → 0.2.260801002

package/package.json

@@ -1,18 +1,13 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.2.250801014",
-  "scripts": {
-    "dev": "vite serve",
-    "build": "vite build",
-    "start": "node server.js"
-  },
+  "version": "0.2.260801002",
   "main": "./src/index.js",
   "exports": {
     ".": "./src/index.js",
     "./themes/default": "./src/themes/default/index.js",
     "./components/*": "./src/components/*",
-    "./widgets/*": "./src/widgets/*",
+    "./widgets/*": "./src/components/*",
     "./mixin/component": "./src/mixin/component.js",
     "./helpers": {
       "require": "./src/utils/helpers.js",
@@ -28,6 +23,7 @@
     "./wss.mjs": "./src/utils/wss.mjs",
     "./dashboard": "./src/utils/dashboard.js",
     "./ai-dashboard": "./src/utils/ai-dashboard.js",
+    "./ai-dashboard-api": "./src/utils/ai-dashboard-api.js",
     "./ai-dashboard-chat": "./src/utils/ai-dashboard-chat.mjs",
     "./ai-chat": "./src/utils/ai-chat.js",
     "./ai-chat-answer": "./src/utils/ai-chat-answer.mjs",
@@ -36,86 +32,46 @@
       "import": "./src/utils/preset-selector.mjs"
     },
     "./hooks/*": "./src/hooks/*",
+    "./directives/*": "./src/directives/*",
+    "./tooltip": {
+      "import": "./src/utils/tooltip.mjs"
+    },
+    "./tooltip.mjs": "./src/utils/tooltip.mjs",
     "./preset-selector.mjs": "./src/utils/preset-selector.mjs",
     "./list": {
       "import": "./src/utils/list.mjs"
     },
     "./list.mjs": "./src/utils/list.mjs",
-    "./docs/components/AccountIcon": "./docs/components/AccountIcon.md",
-    "./docs/components/Ahref": "./docs/components/Ahref.md",
-    "./docs/components/Alert": "./docs/components/Alert.md",
-    "./docs/components/Article": "./docs/components/Article.md",
-    "./docs/components/Block": "./docs/components/Block.md",
-    "./docs/components/Button": "./docs/components/Button.md",
-    "./docs/components/Card": "./docs/components/Card.md",
-    "./docs/components/Carousel": "./docs/components/Carousel.md",
-    "./docs/components/Cart": "./docs/components/Cart.md",
-    "./docs/components/CartIcon": "./docs/components/CartIcon.md",
-    "./docs/components/Chart": "./docs/components/Chart.md",
-    "./docs/components/ChatTyping": "./docs/components/ChatTyping.md",
-    "./docs/components/Checkbox": "./docs/components/Checkbox.md",
-    "./docs/components/CodeEditor": "./docs/components/CodeEditor.md",
-    "./docs/components/CollapsiblePanel": "./docs/components/CollapsiblePanel.md",
-    "./docs/components/ColorPicker": "./docs/components/ColorPicker.md",
-    "./docs/components/Confirm": "./docs/components/Confirm.md",
-    "./docs/components/ContextMenu": "./docs/components/ContextMenu.md",
-    "./docs/components/ContextMenuItem": "./docs/components/ContextMenuItem.md",
-    "./docs/components/CopyToClipboard": "./docs/components/CopyToClipboard.md",
-    "./docs/components/Countdown": "./docs/components/Countdown.md",
-    "./docs/components/Datepicker": "./docs/components/Datepicker.md",
-    "./docs/components/Datetimepicker": "./docs/components/Datetimepicker.md",
-    "./docs/components/Dropdown": "./docs/components/Dropdown.md",
-    "./docs/components/Flex": "./docs/components/Flex.md",
-    "./docs/components/Gmaps": "./docs/components/Gmaps.md",
-    "./docs/components/Grid": "./docs/components/Grid.md",
-    "./docs/components/HTMLEditor": "./docs/components/HTMLEditor.md",
-    "./docs/components/Image": "./docs/components/Image.md",
-    "./docs/components/Link": "./docs/components/Link.md",
-    "./docs/components/MultiDropdown": "./docs/components/MultiDropdown.md",
-    "./docs/components/Radio": "./docs/components/Radio.md",
-    "./docs/components/Slider": "./docs/components/Slider.md",
-    "./docs/components/Switch": "./docs/components/Switch.md",
-    "./docs/components/Table": "./docs/components/Table.md",
-    "./docs/components/Tabs": "./docs/components/Tabs.md",
-    "./docs/components/Text": "./docs/components/Text.md",
-    "./docs/components/Textarea": "./docs/components/Textarea.md",
-    "./docs/components/Textbox": "./docs/components/Textbox.md",
-    "./docs/components/Timepicker": "./docs/components/Timepicker.md",
-    "./docs/components/Toast": "./docs/components/Toast.md",
-    "./docs/components/TreeView": "./docs/components/TreeView.md",
-    "./docs/components/Uploader": "./docs/components/Uploader.md",
-    "./docs/components/Video": "./docs/components/Video.md"
+    "./pivot-list": {
+      "import": "./src/utils/pivot-list.mjs"
+    },
+    "./pivot-list.mjs": "./src/utils/pivot-list.mjs",
+    "./pivot-formula": {
+      "import": "./src/utils/pivot-formula.mjs"
+    },
+    "./pivot-formula.mjs": "./src/utils/pivot-formula.mjs",
+    "./docs/components/*": "./docs/components/*.md"
   },
   "dependencies": {
     "@googlemaps/js-api-loader": "^1.16.8",
     "@tailwindcss/line-clamp": "^0.4.0",
     "@vueuse/core": "^9.0.2",
-    "adm-zip": "^0.5.10",
     "axios": "1.8.2",
     "bcrypt": "^5.1.1",
     "chart.js": "^4.2.1",
-    "compression": "^1.7.4",
     "crypto-js": "^4.2.0",
     "dayjs": "^1.11.2",
     "eventemitter2": "^6.4.7",
-    "exceljs": "^4.3.0",
-    "file-type": "^18.2.1",
-    "glob": "^8.0.3",
     "highlight.js": "^11.11.1",
     "lodash": "^4.17.21",
-    "lodash-es": "^4.17.21",
     "marked": "^16.4.1",
     "md5": "^2.3.0",
-    "mitt": "^3.0.1",
-    "pinia": "^2.0.2",
     "prismjs": "1.30.0",
     "redis": "^4.6.13",
     "sequelize": "^6.37.7",
     "tailwindcss": "^3.2.4",
-    "tinycolor2": "^1.6.0",
     "vue": "^3.2.25",
     "vue-chartjs": "^5.2.0",
-    "vue-router": "^4.0.14",
     "ws": "^8.16.0"
   },
   "description": "This scaffold based on express vitejs vuejs",

package/src/components/AIChat.vue

@@ -236,11 +236,20 @@ You can use *italics*, **bold**, \`inline code\`, and [links](https://example.co
 2. Ordered two
 
 ### Table
-| Feature | Supported |
-| ------- | --------- |
-| Tables  | ✅ |
-| Code    | ✅ |
-| Images  | ✅ |
+Long tables collapse behind a "show more" toggle after the first few rows:
+
+| Feature    | Supported |
+| ---------- | --------- |
+| Tables     | ✅ |
+| Code       | ✅ |
+| Images     | ✅ |
+| Files      | ✅ |
+| Markdown   | ✅ |
+| Streaming  | ✅ |
+| Blockquote | ✅ |
+| Lists      | ✅ |
+| Links      | ✅ |
+| Headings   | ✅ |
 
 > Blockquotes work too — handy for callouts.`,
   },

package/src/components/AIChatItem.vue

@@ -36,11 +36,12 @@
 
       <!-- File attachments -->
       <div v-if="files.length" class="mt-3 flex flex-wrap gap-2">
-        <a v-for="(url, n) in files" :key="n" :href="url" target="_blank" rel="noopener"
-           class="flex items-center gap-2 p-2 pr-3 rounded-xl bg-base-300 hover:bg-base-500 transition-colors no-underline max-w-[260px]">
+        <button v-for="(url, n) in files" :key="n" type="button" @click="$download(url, fileName(url))"
+                class="flex items-center gap-2 p-2 pr-3 rounded-xl bg-base-300 hover:bg-base-500 transition-colors max-w-[260px]">
           <span class="shrink-0 px-2 py-1 rounded-lg text-[10px] font-bold uppercase text-white" :style="{ background: fileColor(url) }">{{ fileExt(url) }}</span>
           <span class="text-sm text-text truncate">{{ fileName(url) }}</span>
-        </a>
+          <svg width="12" height="12" class="shrink-0 fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H345.5l-45.3 45.3c-25 25-65.5 25-90.5 0L164.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/></svg>
+        </button>
       </div>
 
       <!-- Footer meta -->
@@ -64,6 +65,9 @@ const { message } = defineProps({
   message: { type: Object, required: true },
 })
 
+// Tables past this many data rows get collapsed behind a "Show N more rows" toggle.
+const MAX_TABLE_ROWS = 8
+
 // Local Marked instance — avoids mutating global marked state on each mount.
 const markdown = new Marked({
   gfm: true,
@@ -74,6 +78,23 @@ const markdown = new Marked({
       const html = hljs.highlight(text, { language }).value
       return `<pre><code class="hljs language-${language}">${html}</code></pre>`
     },
+    table(token) {
+      const cellStyle = (align) => align ? ` style="text-align:${align}"` : ''
+      const cell = (tag, data, i) => `<${tag}${cellStyle(token.align[i])}>${this.parser.parseInline(data.tokens)}</${tag}>`
+      const row = (data) => `<tr>${data.map((d, i) => cell('td', d, i)).join('')}</tr>`
+
+      const head = `<tr>${token.header.map((d, i) => cell('th', d, i)).join('')}</tr>`
+      const visible = token.rows.slice(0, MAX_TABLE_ROWS)
+      const hidden = token.rows.slice(MAX_TABLE_ROWS)
+
+      let body = visible.map(row).join('')
+      if(hidden.length) {
+        body += `<tr class="table-more-row"><td colspan="${token.header.length}">`
+          + `<details><summary>Show ${hidden.length} more row${hidden.length > 1 ? 's' : ''}</summary>`
+          + `<table><tbody>${hidden.map(row).join('')}</tbody></table></details></td></tr>`
+      }
+      return `<table><thead>${head}</thead><tbody>${body}</tbody></table>`
+    },
   },
 })
 
@@ -134,6 +155,16 @@ function fileColor(url) {
 .md :global(table)        { border-collapse: collapse !important; width: 100% !important; margin: 0.8em 0 !important; display: block; overflow-x: auto; }
 .md :global(th), .md :global(td) { border: 1px solid rgba(128,128,128,0.35) !important; padding: 0.4em 0.7em !important; text-align: left !important; }
 .md :global(th)           { font-weight: 600 !important; background: rgba(128,128,128,0.1) !important; }
+.md :global(.table-more-row td) { border: none !important; padding: 0 !important; }
+.md :global(.table-more-row summary) {
+  cursor: pointer !important;
+  padding: 0.4em 0.7em !important;
+  font-size: 0.85em !important;
+  color: rgba(128,128,128,0.9) !important;
+  list-style: none;
+}
+.md :global(.table-more-row summary::-webkit-details-marker) { display: none; }
+.md :global(.table-more-row details table) { margin: 0 !important; }
 .md :global(blockquote)   { border-left: 3px solid rgba(128,128,128,0.4) !important; padding-left: 1em !important; margin: 0.6em 0 !important; opacity: 0.8; }
 .md :global(hr)           { border-color: rgba(128,128,128,0.3) !important; margin: 1em 0 !important; }
 .md :global(:not(pre) > code) {

package/src/components/AIDashboard.vue

@@ -161,89 +161,119 @@
             </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>
+          <!-- Leaf: authored payload (`data`) — the caption every widget card
+               shows, plus a metric's hand-written value / delta. Kept editable
+               even when a query drives the numbers: `load-dashboard` overwrites
+               value/series/rows, never label or delta. -->
+          <template v-else>
+            <label class="text-xs text-text-400">Caption</label>
+            <Textbox v-model="nodeData(selectedNode).label" :placeholder="selectedNode.name || labelFor(selectedNode.type)" @change="persist" />
+
+            <template v-if="selectedNode.type === 'metric'">
+              <template v-if="!selectedNode.query?.datasource">
+                <label class="text-xs text-text-400">Value</label>
+                <Textbox v-model="nodeData(selectedNode).value" type="tel" item-class="text-right" @change="persist" />
+              </template>
+              <label class="text-xs text-text-400">Delta % (optional)</label>
+              <Textbox v-model="nodeData(selectedNode).delta" type="tel" item-class="text-right" @change="persist" />
+            </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>
+            <!-- Query builder (data-source backed) -->
+            <template v-if="hasDatasources">
+              <label class="text-xs text-text-400 pt-1">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>
+              <template v-if="query(selectedNode).datasource">
+                <!-- metric + chart: what the number / each bar measures -->
+                <template v-if="selectedNode.type !== 'table'">
+                  <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>
-              </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>
+                <!-- chart: the buckets -->
+                <template v-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>
-                  <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>
+                  <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>
-                  <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>
+                  <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: columns, sorts, page size -->
+                <template v-else-if="selectedNode.type === 'table'">
+                  <label class="text-xs text-text-400">Columns</label>
+                  <div class="flex flex-col gap-1">
+                    <label v-for="f in fieldsOf(selectedNode)" :key="f.key" class="flex flex-row items-center gap-2 text-xs cursor-pointer">
+                      <input type="checkbox" :checked="hasColumn(selectedNode, f.key)" @change="toggleColumn(selectedNode, f)" />
+                      <span class="flex-1 truncate text-text-300">{{ f.label }}</span>
+                      <span class="text-[10px] uppercase tracking-wide text-text-400">{{ f.type }}</span>
+                    </label>
+                  </div>
+
+                  <label class="text-xs text-text-400 pt-1">Order by</label>
+                  <div class="flex flex-col gap-2">
+                    <div v-for="(o, oi) in orderOf(selectedNode)" :key="oi" class="flex flex-row items-center gap-1">
+                      <Dropdown v-model="o[0]" class="flex-1" @change="onQueryEdit">
+                        <option value="">field</option>
+                        <option v-for="f in fieldsOf(selectedNode)" :key="f.key" :value="f.key">{{ f.label }}</option>
+                      </Dropdown>
+                      <Dropdown v-model="o[1]" class="w-[86px]" @change="onQueryEdit">
+                        <option value="asc">Asc</option>
+                        <option value="desc">Desc</option>
+                      </Dropdown>
+                      <button type="button" class="px-1 text-text-300 hover:text-red-600" title="Remove sort" @click="removeOrder(selectedNode, oi)">
+                        <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="addOrder(selectedNode)">+ Add sort</button>
+                  </div>
+
+                  <label class="text-xs text-text-400 pt-1">Page size</label>
+                  <Textbox v-model.number="query(selectedNode).pageSize" type="tel" item-class="text-right" @change="onQueryEdit" />
+                </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>
-                <button type="button" class="text-primary text-xs text-left hover:underline" @click="addFilter(selectedNode)">+ Add filter</button>
-              </div>
+              </template>
             </template>
           </template>
 
@@ -359,7 +389,7 @@
 <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 LLMChat from './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)
@@ -382,7 +412,7 @@ const { controller, socket, config, samples, datasources, autoSave, serverChat }
   socket: { type: Object, default: null },
   config: { type: Object, required: true },
   samples: { type: Object, default: () => ({ structure: [], widgets: {} }) },
-  datasources: { type: Object, default: () => ({}) },
+  datasources: { type: [ Object, Array ], 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 },
@@ -412,8 +442,9 @@ function normalizeDs(list) {
   }))
 }
 
-const dsList = computed(() => serverDatasources.value
-  ?? normalizeDs(Object.entries(datasources).map(([key, v]) => ({ key, ...v }))))
+const dsList = computed(() => serverDatasources.value ?? normalizeDs(Array.isArray(datasources)
+  ? datasources
+  : Object.entries(datasources).map(([key, v]) => ({ key, ...v }))))
 const hasDatasources = computed(() => dsList.value.length > 0)
 
 async function loadDatasources() {
@@ -677,7 +708,7 @@ function groupStyle(node) {
 }
 
 /* ---------- Inspector data accessors ---------- */
-function metricData(node) { if (!node.data) node.data = {}; return node.data }
+function nodeData(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) }
@@ -690,11 +721,12 @@ function setDatasource(node, ds) {
   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' && !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 }))
+    q.order = []
   }
   onQueryEdit()
 }
@@ -741,6 +773,7 @@ function newMetricFrom(ds) {
   if (!activePreset.value) return
   const node = blankNode('metric')
   node.name = ds.label
+  node.data = { label: ds.label, value: 0 }
   node.query = { datasource: ds.key, aggregation: 'count', filters: [] }
   const target = (selectedNode.value && selectedNode.value.type === 'group') ? selectedNode.value.items : structure.value
   target.push(node)
@@ -749,18 +782,22 @@ function newMetricFrom(ds) {
   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
-  },
-})
+/* ---- Table columns + order (query.columns, query.order) ---- */
+function columnsOf(node) { const q = query(node); if (!Array.isArray(q.columns)) q.columns = []; return q.columns }
+function hasColumn(node, key) { return columnsOf(node).some(c => (c.key ?? c) === key) }
+
+function toggleColumn(node, field) {
+  const cols = columnsOf(node)
+  const i = cols.findIndex(c => (c.key ?? c) === field.key)
+  if (i >= 0) cols.splice(i, 1)
+  else cols.push({ key: field.key, label: field.label })
+  onQueryEdit()
+}
+
+// Order is stored the way Sequelize takes it: [[field, 'desc'], ...].
+function orderOf(node) { const q = query(node); if (!Array.isArray(q.order)) q.order = []; return q.order }
+function addOrder(node) { orderOf(node).push([ fieldsOf(node)[0]?.key ?? '', 'desc' ]); onQueryEdit() }
+function removeOrder(node, i) { orderOf(node).splice(i, 1); onQueryEdit() }
 
 /* ---------- Reset from samples ---------- */
 function resetSamples() {
@@ -774,11 +811,17 @@ function resetSamples() {
 /* ---------- Server: hydrate + persist ---------- */
 const hydrating = ref(false)
 
-// Strip ephemeral `data` from query-backed nodes; keep static data otherwise.
+// A query-backed node's value/series/rows are recomputed by the server, so they
+// are not persisted; its authored `label` and `delta` are, since nothing else
+// carries them (docs/dashboard.json metrics keep a delta beside their query).
 function cleanNode(node) {
   const { data, ...rest } = node
   const out = { ...rest }
-  if (!node.query) out.data = data
+  if (node.query?.datasource) {
+    const { label, delta } = data ?? {}
+    if (label != null || delta != null) out.data = { label, delta }
+  }
+  else out.data = data
   if (Array.isArray(node.items)) out.items = node.items.map(cleanNode)
   return out
 }
@@ -958,9 +1001,10 @@ const Widget = defineComponent({
   setup(props, { emit }) {
     const data = computed(() => props.node.data || {})
 
+    // The card header already shows the caption (`data.label ?? node.name`),
+    // so the metric body is the number and its delta.
     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' },
@@ -1069,7 +1113,7 @@ const Widget = defineComponent({
 
     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('div', { class: 'flex-1 text-sm text-text-300 truncate' }, data.value.label || props.node.name),
         h('button', {
           type: 'button',
           class: 'opacity-0 group-hover:opacity-60 hover:!opacity-100',
@@ -1081,7 +1125,9 @@ const Widget = defineComponent({
           ]),
         ]),
       ]),
-      props.node.type === 'metric' ? renderMetric()
+      data.value.error
+        ? h('div', { class: 'text-red-600 text-sm' }, data.value.error)
+        : 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.'),