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

package/skills/live-dashboard/themes/README.md

@@ -0,0 +1,50 @@
+# Dashboard visual styles — choose by the analysis task
+
+These are three distinct authoring systems, not one mandatory appearance for every
+dashboard. User direction wins. Preserve a saved dashboard's theme when changing
+data or copy; only change it when the user asks for a redesign.
+
+| Theme | Use for | Composition | Library / global |
+| --- | --- | --- | --- |
+| [Trend Workspace](trend-workspace/README.md) | Operating overview, time trends | Pale-blue KPI rail, aligned independent trend scales, lower comparisons | `trend-workspace` / `window.TrendWorkspace` |
+| [Profit Atlas](profit-atlas/README.md) | Profitability, contribution, losses | Dark analysis desk, horizontal metrics, dominant scatter and signed ranking | `profit-atlas` / `window.ProfitAtlas` |
+| [Customer Brief](customer-brief/README.md) | Customer structure, returns, management briefing | Warm paper, serif hierarchy, metric ribbon, grouped return metrics | `customer-brief` / `window.CustomerBrief` |
+
+For the three-page Superstore suite, use each row for its corresponding page.
+For a different dataset, first establish the business question and fields; select
+the matching composition, then adapt it. Do not force every dataset into a scatter
+plot, invent missing return metrics, or infer theme selection from a title at runtime.
+Record the explicit choice in `data-dashboard-theme="<id>@1"` and save with
+`libraries:["echarts","<id>"]`. Choose exactly one visual theme; do not stack theme
+libraries. Call `dashboard_libraries` to verify availability before authoring.
+
+All three expose `enhanceSelect(nativeSelect)` and `charts.line/horizontal/scatter`.
+The host injects pinned CSS/JS; you author the business layout and governed query
+runtime. Complete examples and query plans are in `examples/superstore/`. No local
+repository, Python generator or this developer's computer is required by the Agent.
+
+## Shared behavior and editing rules
+
+- Read the selected theme guide and its layout fragment, plus the complete relevant
+  example. The existing [typed select contract](trend-workspace/README.md#select-component-contract)
+  and [data adaptation contract](trend-workspace/README.md#adapt-to-a-new-dataset)
+  apply to every theme. The shared source is `trend-workspace/select.js`, `icons.js`
+  and `charts.js`; each theme bundle already contains them and their icon license.
+- Keep business values out of the HTML. Discover and validate the actual source,
+  use independent backend totals, query every affected Binding on a filter change,
+  and clear stale values on loading, empty, truncated or failed queries.
+- For existing Artifacts, use `dashboard_open`, read its current editing copy and
+  retain `saveArguments`, Binding IDs, source, controls, title and all existing DOM
+  IDs. Moving a chart does not require changing its ID. Do not create duplicates.
+- Use bounded exact SandboxFile edits to the returned `htmlPath`; never overwrite
+  an existing editing copy with `sandbox_write_file`. Keep old/new replacements
+  around 4,000 UTF-8 bytes or less. New long documents can be written then appended.
+- Save through `dashboard_update` with the explicit new theme library only when
+  redesign was requested. Successful draft receipts are required; publishing is a
+  separate human decision. Existing saved library bytes remain frozen.
+- Verify a real filter and refresh across KPIs, charts and detail rows. Check keyboard
+  selection, Escape, focus, menu bounds, 390px layout and theme contrast. Rendered
+  visual checks are required; report them as pending if no browser is available.
+
+The host project/dashboard cascade and Publish/More toolbar stay outside authored
+HTML. These styles do not add capabilities, data access, project sharing or jobs.

package/skills/live-dashboard/themes/customer-brief/README.md

@@ -0,0 +1,47 @@
+# Customer Brief v1 — editorial customer and returns report
+
+Use this style for the approved warm customer brief or an explicitly chosen
+management report. Read [theme selection and shared rules](../README.md) first.
+Keep the current theme on unrelated edits; this is not a mandatory default.
+
+## Installed assets and runtime
+
+Read `theme.css`, `charts.js`, `layout.html` and the complete
+`examples/superstore/customers.html`. Call `dashboard_libraries`, then use
+`libraries:["echarts","customer-brief"]`; the global is `window.CustomerBrief`.
+Shared select, icons/license and chart primitives are already bundled. Do not load
+another theme library or retype its component implementation.
+
+## Visual contract
+
+- Warm paper-white canvas, forest ink, sage comparisons and terracotta returns.
+  Headings and large metrics use a local serif stack (Songti SC / Noto Serif CJK /
+  SimSun / system serif); body, controls and tables remain readable sans-serif.
+  No external font request is required. Low-light mode has matching warm tokens.
+- Large title, a horizontal customer/order/value ribbon and a single grouped return
+  area. Put return percentage before return count visually, retaining metric IDs.
+  No KPI sidebar, card grid, decorative avatars, gauges or unsupported risk badges.
+- Two numbered sections compare customer groups and regions; keep common zero
+  baselines. Numbers are direct labels. Color differentiates groups, not an invented
+  business threshold. Show exact values again in a complete compact table.
+- At 760px the return group and plots stack; at 390px three compact filters remain
+  keyboard-accessible, and only the named table region may scroll horizontally.
+
+## Authoring
+
+Set `<body data-dashboard-theme="customer-brief@1">`, then use `brief-header`,
+`brief-metrics`, `brief-primary-metrics`, `brief-return-metrics` and `brief-plots`.
+Use `charts.horizontal(chart, rows, {dimension,measure,label,palette:[...]})` with
+explicit color token names: `['blue','segment-two','segment-three']` for the ordered
+customer comparisons; `['returns']` and `decimals:0` for return-order counts.
+Other datasets must supply their own real grouping, measures and units.
+
+Customer counts must be independently deduplicated for the current scope. Return
+share is returned orders divided by orders, not returned items divided by quantities.
+Return-associated sales are not refunds or lost revenue. Do not sum group customer
+counts to invent a total, or add these return metrics to sources that do not have them.
+
+For existing HTML, keep Binding IDs and all metric/chart IDs while rearranging the
+DOM. Read the current editing copy, make bounded exact edits and save the explicit
+theme choice through `dashboard_update`. Test a real region filter and restoration,
+including every KPI, plot and detail row. A save receipt alone is not visual QA.

package/skills/live-dashboard/themes/customer-brief/charts.js

@@ -0,0 +1,17 @@
+// Explicit palette options distinguish ranked customer segments from return counts.
+const CustomerBriefCharts = (() => {
+  function horizontal(chart, rows, options) {
+    TrendWorkspaceCharts.horizontal(chart, rows, options);
+    const token = name => getComputedStyle(document.body).getPropertyValue('--' + name).trim();
+    const narrow = chart.getWidth() < 420;
+    const colors = options.palette || ['blue'];
+    chart.setOption({grid: {left: narrow ? 80 : 104, right: options.decimals === 0 ? 40 : 112, top: 12, bottom: 28},
+      xAxis: {axisLabel: {fontSize: 12}}, yAxis: {axisLabel: {fontSize: narrow ? 12 : 15}},
+      series: [{id: options.measure, barMaxWidth: 28,
+        label: {fontSize: narrow ? 12 : 15},
+        data: rows.map((row, index) => ({value: Number(row[options.measure]),
+          itemStyle: {color: token(Number(row[options.measure]) < 0 ? 'red' : colors[index % colors.length])}}))}]
+    });
+  }
+  return {...TrendWorkspaceCharts, horizontal};
+})();

package/skills/live-dashboard/themes/customer-brief/layout.html

@@ -0,0 +1,22 @@
+<!-- Structural fragment; add verified controls, data bindings and the SDK runtime. -->
+<body data-dashboard-theme="customer-brief@1">
+  <main class="workspace">
+    <header class="brief-header">
+      <div><h1>Customer report</h1><p class="description">Business question</p><span class="demo">Source and period</span></div>
+      <div class="filters" aria-label="Analysis filters"><!-- Typed filter-field controls --></div>
+    </header>
+    <section class="brief-metrics" aria-label="Current scope metrics">
+      <div class="brief-primary-metrics"><!-- Customer, order and value metrics --></div>
+      <div class="brief-return-metrics"><!-- Rate then count; keep original IDs --></div>
+    </section>
+    <div class="analysis">
+      <div class="brief-plots">
+        <section class="panel"><h2>01 Customer groups</h2><div class="chart" id="chart-primary"></div></section>
+        <section class="panel"><h2>02 Regional returns</h2><div class="chart" id="chart-secondary"></div></section>
+      </div>
+      <div class="full-details"><section class="details"><!-- Complete accessible detail table --></section></div>
+      <p id="status" class="status" role="status"></p>
+    </div>
+    <footer><span>Source period</span><span id="freshness"></span></footer>
+  </main>
+</body>

package/skills/live-dashboard/themes/customer-brief/theme.css

@@ -0,0 +1,108 @@
+/* Customer Brief: a warm editorial document, with a matching low-light palette. */
+body[data-dashboard-theme="customer-brief@1"] {
+  color-scheme: light;
+  --paper: #f7f5ef;
+  --control: #eeeee5;
+  --ink: #163d34;
+  --muted: #697577;
+  --line: #d7d2c6;
+  --blue: #245247;
+  --teal: #567f6d;
+  --red: #9e4932;
+  --returns: #b76b52;
+  --returns-paper: #f1e7e0;
+  --segment-two: #8b9f80;
+  --segment-three: #b2b597;
+  --selected: #e3e9df;
+  --focus: #316455;
+  --shadow: 0 8px 24px #183d331a;
+  --radius: 12px;
+  --editorial: "Songti SC", "Noto Serif CJK SC", "SimSun", ui-serif, serif;
+}
+body[data-dashboard-theme="customer-brief@1"].dark {
+  color-scheme: dark;
+  --paper: #19231f;
+  --control: #27342b;
+  --ink: #e7ede2;
+  --muted: #bac5ba;
+  --line: #4a5649;
+  --blue: #bad1b9;
+  --teal: #abc4a7;
+  --red: #f4b59d;
+  --returns: #d69a80;
+  --returns-paper: #3b3028;
+  --segment-two: #9bb193;
+  --segment-three: #7f9878;
+  --selected: #344b3d;
+  --focus: #c0d2b5;
+}
+body[data-dashboard-theme="customer-brief@1"] .workspace { display: block; padding: 28px 36px 0; }
+.brief-header { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
+.brief-header h1 { font: 700 58px/1.2 var(--editorial); letter-spacing: -1px; }
+.brief-header .description { margin-top: 8px; font: 20px/1.4 var(--editorial); color: var(--ink); }
+.brief-header .demo { margin: 8px 0 0; font-size: 13px; }
+.brief-header .filters { flex-wrap: nowrap; padding: 0; gap: 14px; }
+.brief-header .filter-field { width: 184px; }
+.brief-header .filter-trigger { min-height: 70px; background: transparent; }
+.brief-header .filter-value { font-size: 18px; }
+.brief-metrics { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 20px; padding: 20px 0 16px; border-bottom: 1px solid var(--line); }
+.brief-primary-metrics, .brief-return-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; }
+.brief-return-metrics { grid-template-columns: 1fr 1fr; padding: 12px 16px; border-radius: 10px; background: var(--returns-paper); }
+.brief-metrics .metric { grid-column: auto; display: flex; flex-direction: column; padding: 0 22px; border: 0; border-left: 1px solid var(--line); }
+.brief-metrics .metric:first-child { border-left: 0; padding-left: 14px; }
+.brief-metrics .metric:last-child { padding-right: 0; }
+.brief-metrics .metric p { order: 2; font: 20px/1.35 var(--editorial); color: var(--ink); }
+.brief-metrics .metric output { order: 1; font: 700 clamp(38px, 5.1vw, 74px)/1.15 var(--editorial); letter-spacing: -1px; margin: 0 0 4px; }
+.brief-metrics .metric small { order: 3; margin-top: 5px; }
+.brief-return-metrics .metric { padding-inline: 20px; }
+.brief-return-metrics .metric output { color: var(--red); }
+.brief-plots { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 24px; padding: 22px 0; }
+.brief-plots h2 { font: 700 26px/1.3 var(--editorial); }
+.brief-plots .section-number { margin-right: 14px; font-size: 30px; }
+.brief-plots .panel:last-child { border-left: 1px solid var(--line); padding-left: 24px; }
+.brief-plots .note { font-size: 13px; }
+.brief-plots .chart { height: 275px; margin-top: 12px; }
+body[data-dashboard-theme="customer-brief@1"] .details { padding: 16px 0 4px; }
+body[data-dashboard-theme="customer-brief@1"] .details h2 { font: 700 26px/1.3 var(--editorial); }
+body[data-dashboard-theme="customer-brief@1"] .details > .note { display: none; }
+body[data-dashboard-theme="customer-brief@1"] .table-scroll { max-height: 300px; border: 1px solid var(--line); border-radius: 10px; margin-top: 12px; }
+body[data-dashboard-theme="customer-brief@1"] table { font-size: 15px; }
+body[data-dashboard-theme="customer-brief@1"] th, body[data-dashboard-theme="customer-brief@1"] td { padding: 10px 12px; }
+body[data-dashboard-theme="customer-brief@1"] th { color: var(--ink); font-size: 14px; }
+body[data-dashboard-theme="customer-brief@1"] td:nth-child(6) { color: var(--red); }
+body[data-dashboard-theme="customer-brief@1"] .table-bar { display: none; }
+body[data-dashboard-theme="customer-brief@1"] .status { padding: 8px 0 0; }
+body[data-dashboard-theme="customer-brief@1"] .methodology { padding: 4px 0 12px; }
+body[data-dashboard-theme="customer-brief@1"] footer { padding: 10px 0; }
+@media (max-width: 1100px) {
+  .brief-header { flex-wrap: wrap; gap: 18px; }
+  .brief-header h1 { font-size: 40px; }
+  .brief-header .filters { margin-left: auto; }
+  .brief-metrics { gap: 12px; }
+  .brief-metrics .metric { padding-inline: 10px; }
+  .brief-metrics .metric output { font-size: 42px; }
+  .brief-metrics .metric p { font-size: 16px; }
+}
+@media (max-width: 760px) {
+  .brief-metrics { grid-template-columns: 1fr; }
+  .brief-return-metrics .metric:first-child { padding-left: 10px; }
+  .brief-plots { grid-template-columns: 1fr; }
+  .brief-plots .panel:last-child { border-left: 0; border-top: 1px solid var(--line); padding: 20px 0 0; }
+}
+@media (max-width: 680px) {
+  body[data-dashboard-theme="customer-brief@1"] .workspace { padding: 20px 16px 0; }
+  .brief-header { display: block; }
+  .brief-header h1 { font-size: 34px; }
+  .brief-header .description { font-size: 18px; }
+  .brief-header .filters { display: grid; margin-top: 20px; gap: 8px; }
+  .brief-header .filter-field { width: auto; }
+  .brief-header .filter-trigger { min-height: 62px; }
+  .brief-header .filter-value { font-size: 13px; }
+  .brief-metrics .metric output { font-size: 32px; }
+  .brief-metrics .metric small { font-size: 12px; }
+  .brief-primary-metrics .metric:first-child { grid-column: auto; padding-left: 0; }
+  .brief-return-metrics .metric:first-child { grid-column: auto; }
+  .brief-return-metrics .metric output { font-size: 42px; }
+  .brief-plots h2, body[data-dashboard-theme="customer-brief@1"] .details h2 { font-size: 23px; }
+  .brief-plots .chart { height: 260px; }
+}

package/skills/live-dashboard/themes/profit-atlas/README.md

@@ -0,0 +1,43 @@
+# Profit Atlas v1 — profitability analysis desk
+
+Use this style for the approved dark profitability screen or an explicitly chosen
+contribution/loss analysis. Read [theme selection and shared rules](../README.md)
+first. This is one optional style; it does not replace Trend Workspace.
+
+## Installed assets and runtime
+
+Read `theme.css`, `charts.js`, `layout.html` and the complete
+`examples/superstore/profitability.html`. Call `dashboard_libraries`, then use
+`libraries:["echarts","profit-atlas"]`; the global is `window.ProfitAtlas`.
+The bundle includes the shared typed select, Lucide icons/license and base chart
+primitives. Do not also load `trend-workspace` or copy public component code into HTML.
+
+## Visual contract
+
+- Graphite canvas, off-white text, quiet grid lines; mint positive profit, coral
+  negative profit. The document deliberately stays dark in either host theme.
+- Full-width header and a continuous five-or-fewer metric ribbon. No left KPI rail,
+  repeated floating cards, neon glow, gradients or invented growth indicators.
+- Primary scatter occupies roughly 65% of the analysis width; the other 35% holds
+  a signed ranked bar chart. Both have explicit units and a visible zero baseline.
+- Positive and negative ranking values remain visible; dense positive scatter clusters use hover details to avoid overlapping labels.
+  On narrow screens, preserve labels for negative items and stack the plots.
+- The compact detail table is ordered by the business metric (profit ascending in
+  this example), so losses appear first. Keep all rows in its named scroll region;
+  do not silently truncate the query to the three rows seen in the design reference.
+- Use system sans typography, 36px desktop title, 25–37px tabular KPIs, 14px body.
+  Dropdowns retain the two-line caption/value contract with dark matching surfaces.
+
+## Authoring
+
+Set `<body data-dashboard-theme="profit-atlas@1">`, compose `atlas-header`,
+`atlas-metrics`, `atlas-plots`, and a full-width details section as in `layout.html`.
+`charts.scatter(chart, rows, {dimension,x,y,xLabel,yLabel})` takes explicit fields;
+`charts.horizontal(chart, rows, {dimension,measure,label,color:'teal'})` draws signed
+rankings. Sorting and backend totals remain the business runtime's responsibility.
+
+Do not manufacture profit or financial meaning for unrelated data. For another
+two-measure comparison, supply its real units and decide whether the zero reference
+and negative labels are meaningful. Preserve all Binding and component IDs during
+a style-only upgrade. After saving, verify the exact target Artifact and a real
+filter; report visual acceptance separately from a successful save receipt.

package/skills/live-dashboard/themes/profit-atlas/charts.js

@@ -0,0 +1,30 @@
+// Extend the shared chart primitives; fields and labels remain explicit inputs.
+const ProfitAtlasCharts = (() => {
+  const token = name => getComputedStyle(document.body).getPropertyValue('--' + name).trim();
+  function horizontal(chart, rows, options) {
+    TrendWorkspaceCharts.horizontal(chart, rows, options);
+    chart.setOption({grid: {left: 82, right: 78},
+      series: [{id: options.measure, barMaxWidth: 16, label: {fontSize: 12}}],
+      xAxis: {splitLine: {show: false}},
+      yAxis: {axisLabel: {fontSize: 12}}});
+  }
+  function scatter(chart, rows, options) {
+    TrendWorkspaceCharts.scatter(chart, rows, options);
+    const narrow = chart.getWidth() < 600;
+    const maximum = Math.max(0, ...rows.map(row => Number(row[options.x])));
+    chart.setOption({grid: {left: 46, right: 32, top: 30, bottom: 46},
+      xAxis: {splitLine: {lineStyle: {type: 'dashed'}}},
+      yAxis: {splitLine: {lineStyle: {type: 'dashed'}}},
+      series: [{id: 'scatter', symbolSize: 10, labelLayout: {hideOverlap: true},
+        data: rows.map(row => {
+          const negative = Number(row[options.y]) < 0;
+          return {value: [Number(row[options.x]), Number(row[options.y])], name: row[options.dimension],
+            itemStyle: {color: token(negative ? 'red' : 'teal'), opacity: 1},
+            label: {show: negative || (!narrow && (Number(row[options.x]) >= maximum * .15 || Number(row[options.y]) >= 12000)), formatter: String(row[options.dimension]),
+              position: Number(row[options.x]) > maximum * .9 ? 'left' : 'right',
+              color: token(negative ? 'red' : 'ink'), fontSize: 12}};
+        })}]
+    });
+  }
+  return {line: TrendWorkspaceCharts.line, horizontal, scatter};
+})();

package/skills/live-dashboard/themes/profit-atlas/layout.html

@@ -0,0 +1,19 @@
+<!-- Structural fragment; add verified controls, data bindings and the SDK runtime. -->
+<body data-dashboard-theme="profit-atlas@1">
+  <main class="workspace">
+    <header class="atlas-header">
+      <div><h1>Analysis title</h1><p class="description">Business question</p><span class="demo">Source and period</span></div>
+      <div class="filters" aria-label="Analysis filters"><!-- Typed filter-field controls --></div>
+    </header>
+    <section class="atlas-metrics" aria-label="Current scope metrics"><!-- Metric outputs --></section>
+    <div class="analysis">
+      <div class="atlas-plots">
+        <section class="panel"><h2>Measure relationship</h2><div class="chart" id="chart-secondary"></div></section>
+        <section class="panel"><h2>Contribution ranking</h2><div class="chart" id="chart-primary"></div></section>
+      </div>
+      <div class="full-details"><section class="details"><!-- Complete accessible detail table --></section></div>
+      <p id="status" class="status" role="status"></p>
+    </div>
+    <footer><span>Source period</span><span id="freshness"></span></footer>
+  </main>
+</body>

package/skills/live-dashboard/themes/profit-atlas/theme.css

@@ -0,0 +1,75 @@
+/* Profit Atlas: a deliberate dark document theme, independent of the host chrome. */
+body[data-dashboard-theme="profit-atlas@1"] {
+  color-scheme: dark;
+  --paper: #10181f;
+  --control: #17222c;
+  --ink: #f0f4f7;
+  --muted: #aebdcb;
+  --line: #30414e;
+  --blue: #62d9c1;
+  --teal: #53d6ba;
+  --red: #ff8b90;
+  --selected: #203c39;
+  --focus: #89e4d0;
+  --shadow: 0 8px 24px #0006;
+  --radius: 8px;
+}
+body[data-dashboard-theme="profit-atlas@1"] .workspace { display: block; }
+.atlas-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; padding: 22px 34px 18px; }
+.atlas-header h1 { font-size: 36px; line-height: 1.25; letter-spacing: -.6px; }
+.atlas-header .description { margin-top: 4px; font-size: 15px; }
+.atlas-header .demo { margin: 6px 0 0; font-size: 13px; }
+.atlas-header .filters { padding: 6px 0 0; flex-wrap: nowrap; gap: 14px; }
+.atlas-header .filter-field { width: 168px; }
+.atlas-header .filter-trigger { min-height: 62px; }
+.atlas-metrics { display: grid; grid-template-columns: 1.15fr 1.1fr .95fr .9fr .75fr; margin: 0; padding: 18px 34px; border-block: 1px solid var(--line); }
+.atlas-metrics .metric { grid-column: auto; padding: 0 26px; border: 0; border-left: 1px solid var(--line); }
+.atlas-metrics .metric:first-child { padding-left: 0; border-left: 0; }
+.atlas-metrics .metric:last-child { padding-right: 0; }
+.atlas-metrics .metric output { font-size: clamp(25px, 2.55vw, 37px); letter-spacing: -.6px; margin: 6px 0 0; }
+.atlas-metrics .metric:nth-child(2) output { color: var(--teal); }
+.atlas-metrics .metric small { display: none; }
+.atlas-plots { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: 32px; padding: 24px 34px 20px; }
+.atlas-plots .panel { min-width: 0; }
+.atlas-plots .panel:last-child { padding-left: 28px; border-left: 1px solid var(--line); }
+.atlas-plots h2 { font-size: 22px; }
+.atlas-plots .note { font-size: 13px; }
+.atlas-plots .chart { height: 448px; margin-top: 12px; }
+body[data-dashboard-theme="profit-atlas@1"] .details { padding: 12px 34px 14px; }
+body[data-dashboard-theme="profit-atlas@1"] .details h2 { display: inline; font-size: 20px; }
+body[data-dashboard-theme="profit-atlas@1"] .details > .note { display: inline; margin-left: 18px; }
+body[data-dashboard-theme="profit-atlas@1"] .table-scroll { max-height: 150px; margin-top: 10px; border: 1px solid var(--line); border-radius: 7px; }
+body[data-dashboard-theme="profit-atlas@1"] th, body[data-dashboard-theme="profit-atlas@1"] td { padding: 7px 16px; }
+body[data-dashboard-theme="profit-atlas@1"] .table-bar { display: none; }
+body[data-dashboard-theme="profit-atlas@1"] .status { padding: 0 34px; }
+body[data-dashboard-theme="profit-atlas@1"] .methodology { padding: 4px 34px 12px; }
+body[data-dashboard-theme="profit-atlas@1"] footer { padding: 10px 34px; }
+@media (max-width: 1100px) {
+  .atlas-header { flex-wrap: wrap; gap: 14px; }
+  .atlas-header .filters { margin-left: auto; }
+  .atlas-metrics .metric { padding-inline: 14px; }
+  .atlas-metrics .metric output { font-size: 25px; }
+  .atlas-plots { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; }
+  .atlas-plots .panel:last-child { padding-left: 18px; }
+}
+@media (max-width: 760px) {
+  .atlas-plots { grid-template-columns: 1fr; }
+  .atlas-plots .panel:last-child { padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--line); }
+}
+@media (max-width: 680px) {
+  .atlas-header { display: block; padding: 20px 16px; }
+  .atlas-header h1 { font-size: 28px; }
+  .atlas-header .filters { display: grid; margin-top: 20px; padding: 0; gap: 8px; }
+  .atlas-header .filter-field { width: auto; }
+  .atlas-metrics { grid-template-columns: 1fr 1fr; gap: 18px 12px; padding: 18px 16px; }
+  .atlas-metrics .metric, .atlas-metrics .metric:last-child { padding: 0; border: 0; }
+  .atlas-metrics .metric:first-child { grid-column: 1 / -1; }
+  .atlas-metrics .metric output { font-size: 28px; }
+  .atlas-plots { padding: 20px 16px; }
+  .atlas-plots .chart { height: 390px; }
+  .atlas-plots .panel:last-child .chart { height: 448px; }
+  body[data-dashboard-theme="profit-atlas@1"] .details { padding: 16px; }
+  body[data-dashboard-theme="profit-atlas@1"] .details > .note { display: block; margin: 6px 0 0; }
+  body[data-dashboard-theme="profit-atlas@1"] .table-scroll { max-height: 250px; }
+  body[data-dashboard-theme="profit-atlas@1"] .status, body[data-dashboard-theme="profit-atlas@1"] .methodology, body[data-dashboard-theme="profit-atlas@1"] footer { padding-inline: 16px; }
+}

package/skills/live-dashboard/themes/trend-workspace/ICON_LICENSE.txt

@@ -0,0 +1,43 @@
+ISC License
+
+Copyright (c) 2026 Lucide Icons and Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+---
+
+The following Lucide icons are derived from the Feather project:
+
+airplay, alert-circle, alert-octagon, alert-triangle, aperture, arrow-down-circle, arrow-down-left, arrow-down-right, arrow-down, arrow-left-circle, arrow-left, arrow-right-circle, arrow-right, arrow-up-circle, arrow-up-left, arrow-up-right, arrow-up, at-sign, calendar, cast, check, chevron-down, chevron-left, chevron-right, chevron-up, chevrons-down, chevrons-left, chevrons-right, chevrons-up, circle, clipboard, clock, code, columns, command, compass, corner-down-left, corner-down-right, corner-left-down, corner-left-up, corner-right-down, corner-right-up, corner-up-left, corner-up-right, crosshair, database, divide-circle, divide-square, dollar-sign, download, external-link, feather, frown, hash, headphones, help-circle, info, italic, key, layout, life-buoy, link-2, link, loader, lock, log-in, log-out, maximize, meh, minimize, minimize-2, minus-circle, minus-square, minus, monitor, moon, more-horizontal, more-vertical, move, music, navigation-2, navigation, octagon, pause-circle, percent, plus-circle, plus-square, plus, power, radio, rss, search, server, share, shopping-bag, sidebar, smartphone, smile, square, table-2, tablet, target, terminal, trash-2, trash, triangle, tv, type, upload, x-circle, x-octagon, x-square, x, zoom-in, zoom-out
+
+The MIT License (MIT) (for the icons listed above)
+
+Copyright (c) 2013-present Cole Bemis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/skills/live-dashboard/themes/trend-workspace/README.md

@@ -0,0 +1,144 @@
+# Trend Workspace v1 — Agent authoring contract
+
+Use this theme when the user asks for the enterprise BI style, the left KPI rail,
+the trend-first design, or the polished two-line dropdown filters. It is a reusable
+design system, not a fixed Superstore screenshot. Author the business HTML in the
+current Project and save it through dashboard tools yourself.
+
+## Read and reuse
+
+Read these files with `read_skill_file`, resolving paths relative to the installed
+live-dashboard skill. Read complete files; do not use a truncated preview as source.
+
+1. `theme.css`: tokens, layout, typography, responsive/dark states, filter appearance.
+2. `icons.js`: two exact Lucide library icons; keep `ICON_LICENSE.txt` attribution.
+3. `select.js`: keyboard-accessible dropdown enhancement of a typed native select.
+4. `charts.js`: ECharts line, ranked bar and scatter recipes with explicit fields.
+5. `layout.html`: structural fragment explaining placement, not a standalone page.
+6. The main skill's `references/html-runtime.md` and lifecycle example.
+
+Call `dashboard_libraries` and save with `libraries:["echarts","trend-workspace"]`.
+The host injects the theme CSS, icons, select and chart code from its versioned,
+SHA-256-pinned document library. Do not retype those shared modules in every HTML.
+They remain in the skill for inspection and adaptation. No CDN or relative URLs.
+
+Use `window.TrendWorkspace.enhanceSelect(select)` and
+`window.TrendWorkspace.charts.line/horizontal/scatter(...)`. The library does not
+query data or insert business content. You write the layout, configuration and
+SDK query/subscription runtime, then save the draft. Existing saved library bytes
+remain frozen when a later plugin version is installed; opt in to library upgrades.
+Keep source lines below 500 UTF-8 bytes; do not minify.
+
+Full worked examples are `examples/superstore/overview.html`, `profitability.html`
+and `customers.html`. Their `build_pages.py` is a developer packaging helper; the
+Agent does not need Python, the repository or this developer's computer. The
+installed skill contains every CSS/JS asset and complete HTML example.
+
+## Visual invariants
+
+- White analysis surface, pale blue KPI rail, navy text. Sales blue, profit teal,
+  negative values red. Never encode a business threshold by an invented color rule.
+- Desktop rail is about 22% of the content width. Put title, source/demo label and
+  five or fewer important KPIs in it; large first KPI, quieter supporting totals.
+- Top-right filter strip; the analysis area contains one main chart region and
+  compact supporting ranking/table regions. Avoid equal-size card grids.
+- Sales and profit time series use aligned time axes with **separate, clearly
+  labelled value scales**. Do not smooth away negative months or seasonal spikes.
+- Ranked bars are descending with direct values; bars use zero as baseline.
+  Profit rankings preserve negative values. Scatter plots retain a zero-profit
+  reference and name negative items; keep numeric detail in the accompanying table.
+- Use `system-ui, "PingFang SC", sans-serif`, tabular numbers, headings 24–26px,
+  KPI values 28–40px, controls/body 14px, supporting labels at least 12px.
+- No browser chrome, decorative charts, fabricated growth badges or chart images.
+  Real ECharts remains interactive; the design reference is not a data source.
+- At 680px the rail becomes a top summary; charts stack and filters retain three
+  accessible compact fields. Only the named table region may scroll horizontally.
+- Dark mode comes from `await live.ready()` and `.dark`; do not read localStorage.
+
+## Select component contract
+
+Use one `.filter-field` per verified control:
+
+```html
+<div class="filter-field">
+  <label for="filter-region">区域</label>
+  <select id="filter-region" data-dashboard-control="region" disabled></select>
+</div>
+```
+
+After receiving `live.ready()`, populate it from verified allowed values. Preserve
+JSON types in option values, e.g. `new Option(label, JSON.stringify(value))` and
+`JSON.parse(select.value)` in the change handler. Call
+`window.TrendWorkspace.enhanceSelect(select)` only after populating options and current value.
+The component renders the two-line caption/value trigger, focus ring and menu.
+
+Keep the native select and its ID as the typed data-control contract. It becomes
+hidden after enhancement; do not render another independent data control with the
+same ID. Selecting a menu row dispatches the select's normal `change` event.
+Every change must query **all** affected Bindings; visual selection is not proof
+of a data query. Set native `select.disabled` while querying; the custom trigger
+tracks it. The menu supports arrows, Home/End, Enter/Space, Escape, Tab, typeahead,
+click outside and an explicit selected check. Do not replace it with a CSS-only
+fake menu. Four options do not need search or an Apply button.
+
+The project/dashboard selector and Publish/More toolbar belong to the host View.
+Do not duplicate those controls inside the authored HTML.
+
+## Adapt to a new dataset
+
+1. Discover the real source and field schema. Define the business question, grain,
+   units, source period, denominator and allowed filters before choosing charts.
+2. Select layout by task: time trend uses overview's main region + lower band;
+   product contribution uses two related plots; customer structure uses compact
+   comparisons and a table. Keep the same rail, controls and tokens.
+3. Map actual fields explicitly into `window.TrendWorkspace.charts.line`, `.horizontal`
+   or `.scatter`; arguments name `dimension`, `measure` or `x`/`y` and labels.
+   Do not infer semantics from a field name or reuse Superstore field names blindly.
+4. Build KPI calculations from independent backend totals. Ratios use the same
+   filtered numerator/denominator. Distinct counts must not be summed across groups.
+5. Subscribe to every saved Binding; render only when the complete current result
+   set has arrived. Clear previous results on filter changes, denied/failed queries,
+   truncation and empty scopes. Source timestamps must come from query freshness.
+6. Preserve decimal strings for financial display; only validated finite numbers
+   enter charts/ratios. Use DOM textContent for labels, not untrusted innerHTML.
+7. Write the complete HTML with SandboxFile, preview/test each query and filter,
+   then save a real draft. Do not deliver a static screenshot instead.
+
+## Upgrade an existing dashboard to this theme
+
+Use `dashboard_list` in the current project and exact Artifact IDs. Open each
+explicit target with `dashboard_open`, read its current editing copy, and retain
+the returned `saveArguments`. Preserve Binding IDs, sources, controls, units,
+title/Artifact identity and all existing HTML IDs. Add `chart-profit` only when
+splitting an existing sales/profit trend; retain `chart-primary` and `chart-secondary`.
+
+For the unmodified Superstore recipe, the current full HTML already composes this
+theme and the same binding contract. You may reuse that page after verifying the
+opened dashboard has the expected bindings and no user customizations. Replace
+the **opened editing file** with exact SandboxFile edits, then use
+`dashboard_update` with its saved envelope, htmlPath and
+`libraries:["echarts","trend-workspace"]`. Never create a duplicate
+Artifact to avoid editing. For customized or other-data dashboards, transplant
+the theme assets and structural sections while retaining their business runtime.
+
+For existing files, split edits into logical CSS, layout and script sections;
+keep each old/new text under about 4,000 UTF-8 bytes. Never send a whole old + new
+page in one tool call. Use `sandbox_multi_edit_file` with a few bounded edits, or
+insert complete sections before a unique temporary marker. Remove temporary
+markers before saving. Never use sandbox_write_file on an existing editing copy.
+For a new long file, create the first section and append the remaining sections
+with sandbox_append_file. Complete and inspect the document before any save. A failed or partial file edit
+is not a saved dashboard. Keep three-page upgrades sequential, one page per save.
+
+## Acceptance before reporting success
+
+- Verify actual successful draft receipts, title and intended Artifact IDs.
+- Open the saved page: rail, separate trend scales, direct-value ranking and
+  two-line select triggers must be present; do not rely on a theme-name attribute.
+- Change a real filter; all KPIs, plots and detail rows must reflect the new scope.
+- Check open-menu selected state, keyboard selection/Escape, viewport edges,
+  loading, empty/error/recovery, 390px layout and dark-mode contrast.
+- Confirm refresh does not reset the controls and the page uses current results.
+- Preserve user customizations and leave formal publication to the human.
+- If no rendered inspection capability is available, report that visual QA is
+  pending. Never claim a screenshot comparison from source code alone.