@xpert-ai/plugin-live-dashboard 0.3.1 → 0.4.0

package/skills/live-dashboard/themes/trend-workspace/charts.js

@@ -0,0 +1,60 @@
+// Generic ECharts recipes: business fields/labels are explicit arguments, never inferred from names.
+const TrendWorkspaceCharts = (() => {
+  function tokens() {
+    const style = getComputedStyle(document.body);
+    return Object.fromEntries(['ink', 'muted', 'line', 'blue', 'teal', 'red'].map(key => [key, style.getPropertyValue('--' + key).trim()]));
+  }
+  const compact = value => Math.abs(value) >= 1000000 ? value / 1000000 + 'm' : Math.abs(value) >= 1000 ? value / 1000 + 'k' : String(value);
+  const amount = value => new Intl.NumberFormat('en-US', {maximumFractionDigits: 2}).format(value);
+  function axis() {
+    const t = tokens();
+    return {axisLabel: {color: t.muted, fontSize: 11}, nameTextStyle: {color: t.muted}, axisTick: {show: false},
+      axisLine: {lineStyle: {color: t.line}}, splitLine: {lineStyle: {color: t.line}}};
+  }
+  function line(chart, rows, {dimension, measure, label, color = 'blue'}) {
+    const t = tokens(), a = axis();
+    chart.setOption({animation: false, aria: {enabled: true}, textStyle: {fontFamily: 'system-ui, sans-serif'},
+      grid: {left: 48, right: 34, top: 14, bottom: 28}, color: [t[color]], tooltip: {trigger: 'axis', confine: true},
+      xAxis: {...a, type: 'category', boundaryGap: false, data: rows.map(row => row[dimension]), splitLine: {show: false},
+        axisLabel: {...a.axisLabel, hideOverlap: true, showMaxLabel: true}},
+      yAxis: {...a, type: 'value', axisLabel: {...a.axisLabel, formatter: compact}},
+      series: [{id: measure, name: label, type: 'line', smooth: false, showSymbol: false, lineStyle: {width: 2},
+        ...(color === 'blue' ? {areaStyle: {opacity: .045}} : {}), data: rows.map(row => Number(row[measure])),
+        ...(rows.some(row => Number(row[measure]) < 0) ? {markLine: {silent: true, symbol: 'none', label: {show: false},
+          lineStyle: {color: t.muted, type: 'dashed', width: 1}, data: [{yAxis: 0}]}} : {})}]
+    }, {notMerge: true});
+  }
+  function horizontal(chart, rows, {dimension, measure, label, color = 'blue', decimals = 2}) {
+    const t = tokens(), a = axis();
+    const narrow = chart.getWidth() < 450;
+    chart.setOption({animation: false, aria: {enabled: true}, textStyle: {fontFamily: 'system-ui, sans-serif'},
+      grid: {left: narrow ? 78 : 96, right: narrow ? 70 : 92, top: 8, bottom: 26},
+      tooltip: {trigger: 'axis', confine: true, axisPointer: {type: 'shadow'}},
+      xAxis: {...a, type: 'value', splitNumber: 4, axisLabel: {...a.axisLabel, formatter: compact}},
+      yAxis: {...a, type: 'category', inverse: true, data: rows.map(row => row[dimension]), splitLine: {show: false},
+        axisLine: {show: false}, axisLabel: {...a.axisLabel, width: narrow ? 72 : 90, overflow: 'truncate'}},
+      series: [{id: measure, name: label, type: 'bar', barMaxWidth: 20,
+        label: {show: true, position: 'right', color: t.ink, fontSize: 11,
+          formatter: item => new Intl.NumberFormat('en-US', {minimumFractionDigits: decimals, maximumFractionDigits: decimals}).format(item.value)},
+        data: rows.map(row => ({value: Number(row[measure]), itemStyle: {color: Number(row[measure]) < 0 ? t.red : t[color]},
+          ...(Number(row[measure]) < 0 ? {label: {position: 'right', color: t.red}} : {})}))}]
+    }, {notMerge: true});
+  }
+  function scatter(chart, rows, {dimension, x, y, xLabel, yLabel}) {
+    const t = tokens(), a = axis();
+    chart.setOption({animation: false, aria: {enabled: true}, grid: {left: 54, right: 24, top: 28, bottom: 48},
+      tooltip: {trigger: 'item', confine: true, formatter: item => {
+        const row = rows[item.dataIndex];
+        return String(row[dimension]).replace(/[<>&"']/g, '') + '<br>' + xLabel + ': ' + amount(Number(row[x])) + '<br>' + yLabel + ': ' + amount(Number(row[y]));
+      }},
+      xAxis: {...a, name: xLabel, nameLocation: 'middle', nameGap: 30, type: 'value', axisLabel: {...a.axisLabel, formatter: compact}},
+      yAxis: {...a, name: yLabel, type: 'value', axisLabel: {...a.axisLabel, formatter: compact}},
+      series: [{id: 'scatter', name: dimension, type: 'scatter', symbolSize: 11,
+        data: rows.map(row => ({value: [Number(row[x]), Number(row[y])], name: row[dimension],
+          itemStyle: {color: Number(row[y]) < 0 ? t.red : t.teal, opacity: .8},
+          label: {show: Number(row[y]) < 0, formatter: String(row[dimension]), position: 'bottom', color: t.red, fontSize: 11}})),
+        markLine: {silent: true, symbol: 'none', label: {show: false}, lineStyle: {color: t.muted, type: 'dashed'}, data: [{yAxis: 0}]}}]
+    }, {notMerge: true});
+  }
+  return {line, horizontal, scatter};
+})();

package/skills/live-dashboard/themes/trend-workspace/icons.js

@@ -0,0 +1,11 @@
+// Exact SVG output from Lucide React 1.24.0, ISC license in ICON_LICENSE.txt.
+// Library icons, not hand-drawn approximations. No runtime React dependency.
+const dashboardThemeIcons = {
+  "chevronDown": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-chevron-down\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m6 9 6 6 6-6\"></path></svg>",
+  "check": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M20 6 9 17l-5-5\"></path></svg>"
+};
+function dashboardThemeIcon(name) {
+  const template = document.createElement('template');
+  template.innerHTML = dashboardThemeIcons[name];
+  return template.content.firstElementChild.cloneNode(true);
+}

package/skills/live-dashboard/themes/trend-workspace/layout.html

@@ -0,0 +1,45 @@
+<!-- Structural reference, not a runnable dashboard. Supply real verified bindings and renderers. -->
+<!-- Inline theme.css in <style>; inline icons.js, select.js, charts.js before business runtime. -->
+<main class="workspace">
+  <aside class="metric-rail">
+    <header>
+      <span class="demo"><!-- Verified source / explicit demo label --></span>
+      <h1><!-- Business question --></h1>
+      <p class="description"><!-- Scope and useful context --></p>
+    </header>
+    <section class="metrics" aria-label="当前筛选主要指标">
+      <!-- Repeat up to five .metric elements, using stable IDs and backend totals. -->
+      <div class="metric"><p><!-- Label and unit --></p><output id="metric-0">—</output><small><!-- Formula --></small></div>
+    </section>
+  </aside>
+  <div class="analysis">
+    <div class="filters" aria-label="分析筛选">
+      <!-- Repeat for actual verified controls; data-dashboard-control must match the saved contract. -->
+      <div class="filter-field">
+        <label for="filter-region">区域</label>
+        <select id="filter-region" data-dashboard-control="region" disabled></select>
+      </div>
+    </div>
+    <section class="hero">
+      <h2><!-- Main analysis heading --></h2><p class="note"><!-- Period and units --></p>
+      <h3 class="chart-heading"><!-- First measure/unit --></h3>
+      <div id="chart-primary" class="chart" role="img" aria-label="主趋势"></div>
+      <h3 class="chart-heading profit"><!-- Second measure/unit with independent scale --></h3>
+      <div id="chart-profit" class="chart chart-profit" role="img" aria-label="辅助趋势"></div>
+    </section>
+    <div class="lower-grid">
+      <section class="region-panel">
+        <h2><!-- Contribution heading --></h2><p class="note"><!-- Units and sort --></p>
+        <div id="chart-secondary" class="chart" role="img" aria-label="排名"></div>
+      </section>
+      <section class="details">
+        <h2><!-- Detail heading --></h2>
+        <div class="table-scroll" tabindex="0" role="region" aria-label="分析明细">
+          <table><thead><!-- Actual column headers --></thead><tbody id="details-rows"></tbody></table>
+        </div>
+      </section>
+    </div>
+    <p id="status" class="status" role="status">正在加载…</p>
+  </div>
+  <footer><span><!-- Actual source and period --></span><span id="freshness">尚无当前查询结果</span></footer>
+</main>

package/skills/live-dashboard/themes/trend-workspace/select.js

@@ -0,0 +1,127 @@
+// Accessible, select-only combobox. The native select remains the typed data-control contract.
+// Read theme.css and icons.js; inline all three in the saved HTML (no relative asset URLs).
+function enhanceDashboardSelect(select) {
+  const field = select.closest('.filter-field');
+  const label = field.querySelector('label').textContent;
+  const button = document.createElement('button');
+  button.type = 'button';
+  button.id = select.id + '-trigger';
+  button.className = 'filter-trigger';
+  button.setAttribute('role', 'combobox');
+  button.setAttribute('aria-haspopup', 'listbox');
+  button.setAttribute('aria-expanded', 'false');
+  const copy = document.createElement('span');
+  copy.className = 'filter-copy';
+  const caption = document.createElement('span');
+  caption.className = 'filter-caption';
+  caption.textContent = label;
+  const value = document.createElement('span');
+  value.className = 'filter-value';
+  copy.append(caption, value);
+  button.append(copy, dashboardThemeIcon('chevronDown'));
+  const menu = document.createElement('div');
+  menu.id = select.id + '-listbox';
+  menu.className = 'filter-menu';
+  menu.hidden = true;
+  menu.setAttribute('role', 'listbox');
+  menu.setAttribute('aria-label', label);
+  button.setAttribute('aria-controls', menu.id);
+  let active = 0, search = '', searchTimer;
+  const options = [...select.options].map((option, index) => {
+    const item = document.createElement('div');
+    item.id = select.id + '-option-' + index;
+    item.className = 'filter-option';
+    item.setAttribute('role', 'option');
+    const text = document.createElement('span');
+    text.textContent = option.textContent;
+    item.append(text, dashboardThemeIcon('check'));
+    item.addEventListener('pointerdown', event => event.preventDefault());
+    item.addEventListener('pointermove', () => highlight(index));
+    item.addEventListener('click', () => choose(index));
+    menu.append(item);
+    return item;
+  });
+  function sync() {
+    value.textContent = select.selectedOptions[0]?.textContent ?? '';
+    button.setAttribute('aria-label', label + '：' + value.textContent);
+    button.disabled = select.disabled;
+    options.forEach((item, index) => item.setAttribute('aria-selected', String(index === select.selectedIndex)));
+    if (select.disabled) close(false);
+  }
+  function position() {
+    if (menu.hidden) return;
+    const rect = button.getBoundingClientRect();
+    const width = Math.min(Math.max(rect.width, 190), innerWidth - 16);
+    menu.style.width = width + 'px';
+    menu.style.left = Math.min(Math.max(8, rect.left), innerWidth - width - 8) + 'px';
+    menu.style.maxHeight = Math.min(280, innerHeight - 16) + 'px';
+    const height = menu.offsetHeight;
+    const top = rect.bottom + 6 + height <= innerHeight - 8 ? rect.bottom + 6 : Math.max(8, rect.top - height - 6);
+    menu.style.top = top + 'px';
+  }
+  function highlight(index) {
+    active = Math.max(0, Math.min(index, options.length - 1));
+    options.forEach((item, i) => item.dataset.active = String(i === active));
+    button.setAttribute('aria-activedescendant', options[active].id);
+    options[active].scrollIntoView({block: 'nearest'});
+  }
+  function open(index = select.selectedIndex) {
+    if (button.disabled || !options.length) return;
+    document.dispatchEvent(new CustomEvent('dashboard-select-open', {detail: button.id}));
+    menu.hidden = false;
+    button.setAttribute('aria-expanded', 'true');
+    position();
+    highlight(index);
+  }
+  function close(restoreFocus = false) {
+    menu.hidden = true;
+    button.setAttribute('aria-expanded', 'false');
+    button.removeAttribute('aria-activedescendant');
+    if (restoreFocus && !button.disabled) button.focus();
+  }
+  function choose(index) {
+    if (select.disabled || select.options[index].disabled) return;
+    const changed = select.selectedIndex !== index;
+    select.selectedIndex = index;
+    sync();
+    close(true);
+    if (changed) select.dispatchEvent(new Event('change', {bubbles: true}));
+  }
+  button.addEventListener('click', () => menu.hidden ? open() : close());
+  button.addEventListener('keydown', event => {
+    const {key} = event;
+    if (key === 'Tab') { close(); return; }
+    if (key === 'Escape') { if (!menu.hidden) { event.preventDefault(); close(true); } return; }
+    if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(key)) {
+      event.preventDefault();
+      if (menu.hidden) open(key === 'Home' ? 0 : key === 'End' ? options.length - 1 : select.selectedIndex);
+      else highlight(key === 'Home' ? 0 : key === 'End' ? options.length - 1 : active + (key === 'ArrowDown' ? 1 : -1));
+      return;
+    }
+    if (key === 'Enter' || key === ' ') {
+      event.preventDefault();
+      menu.hidden ? open() : choose(active);
+      return;
+    }
+    if (key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+      search += key.toLocaleLowerCase();
+      clearTimeout(searchTimer);
+      searchTimer = setTimeout(() => { search = ''; }, 600);
+      const index = [...select.options].findIndex(option => option.textContent.toLocaleLowerCase().startsWith(search));
+      if (index >= 0) { event.preventDefault(); menu.hidden ? open(index) : highlight(index); }
+    }
+  });
+  select.addEventListener('change', sync);
+  document.addEventListener('pointerdown', event => { if (!field.contains(event.target) && !menu.contains(event.target)) close(); });
+  document.addEventListener('dashboard-select-open', event => { if (event.detail !== button.id) close(); });
+  document.addEventListener('focusin', event => { if (!field.contains(event.target) && !menu.contains(event.target)) close(); });
+  window.addEventListener('resize', position);
+  window.addEventListener('scroll', position, true);
+  new MutationObserver(sync).observe(select, {attributes: true, attributeFilter: ['disabled']});
+  field.append(button);
+  document.body.append(menu);
+  field.classList.add('is-enhanced');
+  select.hidden = true;
+  sync();
+  return {sync, close};
+}

package/skills/live-dashboard/themes/trend-workspace/theme.css

@@ -0,0 +1,137 @@
+/* Trend Workspace v1: shared visual contract for Agent-authored business pages. */
+:root {
+  color-scheme: light;
+  --paper: #ffffff;
+  --rail: #f1f6fc;
+  --control: #f7f9fc;
+  --ink: #182d44;
+  --muted: #566a7e;
+  --line: #dce4ed;
+  --blue: #2868b2;
+  --teal: #137c71;
+  --red: #b83c47;
+  --selected: #eaf2fc;
+  --focus: #2563eb;
+  --shadow: 0 8px 24px #182d441a;
+  --radius: 10px;
+}
+body.dark {
+  color-scheme: dark;
+  --paper: #142231;
+  --rail: #1b2e40;
+  --control: #203448;
+  --ink: #edf3f9;
+  --muted: #b3c3d4;
+  --line: #3e5368;
+  --blue: #8bb9f0;
+  --teal: #72cabc;
+  --red: #ff9da6;
+  --selected: #294662;
+  --focus: #9bc1ff;
+  --shadow: 0 8px 24px #0005;
+}
+* { box-sizing: border-box; }
+body { margin: 0; background: var(--paper); color: var(--ink); font: 14px/1.5 system-ui, "PingFang SC", sans-serif; }
+button, select { font: inherit; }
+button { color: inherit; }
+p, h1, h2 { margin: 0; }
+h1 { font-size: 26px; font-weight: 650; line-height: 1.35; letter-spacing: -.5px; }
+h2, caption { font-size: 18px; line-height: 1.4; font-weight: 650; letter-spacing: -.25px; }
+.workspace { display: grid; grid-template-columns: minmax(240px, 22%) minmax(0, 1fr); min-height: 100vh; }
+.metric-rail { min-width: 0; padding: 28px 26px; background: var(--rail); border-right: 1px solid var(--line); }
+.demo { display: block; margin-bottom: 10px; font-size: 12px; color: var(--muted); }
+.description { margin-top: 10px; color: var(--muted); }
+.metrics { display: grid; grid-template-columns: 1fr 1fr; margin-top: 28px; }
+.metric { grid-column: 1 / -1; min-width: 0; padding: 24px 0; border-top: 1px solid var(--line); }
+.metric p { font-size: 14px; font-weight: 550; color: var(--muted); }
+.metric output { display: block; margin: 5px 0; font-size: clamp(28px, 2.7vw, 40px); font-weight: 650; line-height: 1.2; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
+.metric small { display: block; font-size: 12px; line-height: 1.5; color: var(--muted); }
+.metric:nth-last-child(-n+2) { grid-column: auto; padding-right: 12px; }
+.metric:nth-last-child(-n+2) output { font-size: 28px; }
+.metric:last-child { padding-left: 16px; padding-right: 0; }
+.analysis { min-width: 0; }
+.filters { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; padding: 14px 28px 18px; }
+.filter-field { min-width: 0; width: 150px; }
+.filter-field > label { font-size: 12px; color: var(--muted); }
+.filter-field > select { width: 100%; min-height: 44px; }
+.filter-field.is-enhanced > label, .filter-field.is-enhanced > select { display: none; }
+.filter-trigger { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 8px 13px; text-align: left; border: 1px solid var(--line); border-radius: var(--radius); background: var(--control); cursor: pointer; transition: border-color .14s, background .14s; }
+.filter-copy { display: grid; gap: 3px; min-width: 0; flex: 1; }
+.filter-caption { color: var(--muted); font-size: 12px; line-height: 1.3; }
+.filter-value { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.filter-trigger svg { flex: none; width: 16px; height: 16px; transition: transform .14s; }
+.filter-trigger[aria-expanded="true"] { border-color: var(--focus); box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus) 12%, transparent); }
+.filter-trigger[aria-expanded="true"] > svg { transform: rotate(180deg); }
+.filter-trigger:hover:not(:disabled) { border-color: var(--blue); }
+.filter-trigger:disabled { opacity: .6; cursor: wait; }
+button:focus-visible, summary:focus-visible, .table-scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
+.filter-menu { position: fixed; z-index: 100; width: 200px; max-height: 280px; overflow-y: auto; padding: 6px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
+.filter-menu[hidden] { display: none; }
+.filter-option { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 14px; }
+.filter-option > span { flex: 1; }
+.filter-option svg { width: 16px; height: 16px; opacity: 0; }
+.filter-option[aria-selected="true"] { color: var(--blue); font-weight: 600; background: var(--selected); }
+.filter-option[aria-selected="true"] svg { opacity: 1; }
+.filter-option[data-active="true"] { outline: 1px solid var(--blue); outline-offset: -1px; }
+.filter-option:first-child { margin-bottom: 5px; }
+.hero { padding: 10px 28px 22px; }
+.note { margin-top: 5px; color: var(--muted); font-size: 12px; }
+.chart-heading { margin: 18px 0 2px; color: var(--blue); font-size: 14px; font-weight: 600; }
+.chart-heading.profit { color: var(--teal); }
+.chart { min-width: 0; height: 230px; }
+.chart-profit { height: 180px; }
+.lower-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); border-top: 1px solid var(--line); }
+.region-panel, .details { padding: 20px 28px; min-width: 0; }
+.lower-grid > .details { border-left: 1px solid var(--line); }
+.region-panel .chart { height: 220px; margin-top: 12px; }
+.plots { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; padding: 12px 28px 24px; }
+.panel { min-width: 0; }
+.plots .chart { height: 330px; margin-top: 16px; }
+body[data-page="profitability"] .plots .chart { height: 480px; }
+.full-details { border-top: 1px solid var(--line); }
+.table-scroll { overflow: auto; max-height: 380px; margin-top: 16px; }
+table { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
+caption { text-align: left; margin-bottom: 14px; }
+th, td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: right; }
+th { color: var(--muted); font-size: 12px; font-weight: 500; background: var(--control); position: sticky; top: 0; z-index: 1; }
+th:first-child, td:first-child { text-align: left; }
+td:first-child { font-weight: 500; }
+tbody tr:hover { background: var(--control); }
+.negative { color: var(--red); }
+.table-bar { display: block; height: 3px; margin-top: 5px; background: var(--blue); border-radius: 2px; }
+.status { padding: 0 28px; min-height: 22px; color: var(--muted); font-size: 12px; }
+.status.error { color: var(--red); }
+.methodology { padding: 6px 28px 12px; color: var(--muted); font-size: 12px; }
+.methodology summary { cursor: pointer; width: fit-content; }
+.methodology p { margin-top: 8px; max-width: 80ch; }
+footer { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; padding: 10px 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
+@media (max-width: 1100px) {
+  .workspace { grid-template-columns: 218px minmax(0, 1fr); }
+  .metric-rail { padding: 24px 20px; }
+  .metric output { font-size: 29px; }
+  .lower-grid { grid-template-columns: 1fr; }
+  .lower-grid > .details { border-left: 0; border-top: 1px solid var(--line); }
+  .plots { grid-template-columns: 1fr; }
+}
+@media (max-width: 680px) {
+  .workspace { display: block; }
+  .metric-rail { padding: 20px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
+  h1 { font-size: 24px; }
+  .metrics { grid-template-columns: 1fr 1fr; margin-top: 18px; gap: 0 18px; }
+  .metric { grid-column: auto; padding: 16px 0; }
+  .metric:first-child { grid-column: 1 / -1; }
+  .metric:first-child output { font-size: 36px; }
+  .metric output, .metric:nth-last-child(-n+2) output { font-size: 26px; }
+  .metric:last-child { padding-left: 0; }
+  .filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 16px; }
+  .filter-field { width: auto; }
+  .filter-trigger { padding: 8px; gap: 4px; min-height: 58px; }
+  .filter-value { font-size: 13px; }
+  .hero, .region-panel, .details { padding: 16px; }
+  .plots { padding: 16px; gap: 24px; }
+  .status, .methodology { padding-left: 16px; padding-right: 16px; }
+  footer { flex-direction: column; gap: 4px; padding: 12px 16px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { transition-duration: 0s !important; scroll-behavior: auto !important; }
+}