@things-factory/ai-assistant 10.1.90 → 10.1.91

package/dist-client/components/workspace-view.js

@@ -0,0 +1,416 @@
+import { __decorate, __metadata } from "tslib";
+/*
+ * The blocks of an AI 작업판, drawn (operato-application/design/ai/workspace.md §3).
+ *
+ * Every kind is drawn here - the model writes no HTML. Charts use the eight validated categorical colours in
+ * a fixed order (dataviz reference palette, light and dark each checked); three of the light ones sit under
+ * 3:1 against the surface, so every chart carries its legend (two series or more) and a table view.
+ */
+import '@material/web/icon/icon.js';
+import { LitElement, css, html, nothing, svg } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { i18next } from '@operato/i18n';
+import { renderMarkdown } from './markdown.js';
+import { sortRows, tableCsv } from '../utils/workspace.js';
+const LIGHT = ['#2a78d6', '#eb6834', '#1baf7a', '#eda100', '#e87ba4', '#008300', '#4a3aa7', '#e34948'];
+const DARK = ['#3987e5', '#d95926', '#199e70', '#c98500', '#d55181', '#008300', '#9085e9', '#e66767'];
+const t = (key, defaultValue, options = {}) => String(i18next.t(`ai-assistant.workspace.${key}`, { defaultValue, ...options }));
+const shown = (value) => value === null || value === undefined ? '' : typeof value === 'number' ? value.toLocaleString(i18next.language || undefined) : String(value);
+/** Four round steps from zero to above the largest value. */
+function ticksFor(max) {
+    if (!(max > 0))
+        return [0, 1];
+    const raw = max / 4;
+    const power = 10 ** Math.floor(Math.log10(raw));
+    const step = [1, 2, 2.5, 5, 10].map(one => one * power).find(one => one >= raw) ?? raw;
+    return Array.from({ length: Math.ceil(max / step) + 1 }, (_, i) => Math.round(i * step * 1e6) / 1e6);
+}
+let AssistantWorkspaceView = class AssistantWorkspaceView extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.sorts = {};
+        this.asTable = new Set();
+        this.dark = false;
+    }
+    static { this.styles = css `
+    :host {
+      display: block;
+      color: var(--md-sys-color-on-surface);
+      font-size: 14px;
+      line-height: 1.5;
+    }
+
+    section {
+      margin: 0 0 20px;
+    }
+
+    h1,
+    h2,
+    h3 {
+      margin: 24px 0 8px;
+      line-height: 1.3;
+    }
+
+    h1 {
+      font-size: 22px;
+    }
+
+    h2 {
+      font-size: 18px;
+    }
+
+    h3 {
+      font-size: 15px;
+    }
+
+    .metrics {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+      gap: 10px;
+    }
+
+    .metric {
+      padding: 12px 14px;
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 10px;
+      background: var(--md-sys-color-surface-container-lowest);
+    }
+
+    .metric .label {
+      color: var(--md-sys-color-on-surface-variant);
+      font-size: 12px;
+    }
+
+    .metric .value {
+      font-size: 22px;
+      font-weight: 650;
+      font-variant-numeric: tabular-nums;
+    }
+
+    .metric .note {
+      color: var(--md-sys-color-on-surface-variant);
+      font-size: 12px;
+    }
+
+    .bar {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 6px;
+      color: var(--md-sys-color-on-surface-variant);
+      font-size: 12px;
+    }
+
+    .bar .caption {
+      flex: 1;
+    }
+
+    .bar button {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 3px 8px;
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 6px;
+      background: transparent;
+      color: inherit;
+      font: inherit;
+      cursor: pointer;
+    }
+
+    .bar md-icon {
+      --md-icon-size: 16px;
+    }
+
+    .scroll {
+      max-height: 560px;
+      overflow: auto;
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 8px;
+    }
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 13px;
+    }
+
+    th,
+    td {
+      padding: 6px 10px;
+      border-bottom: 1px solid var(--md-sys-color-outline-variant);
+      text-align: start;
+      white-space: nowrap;
+    }
+
+    th {
+      position: sticky;
+      top: 0;
+      background: var(--md-sys-color-surface-container);
+      font-weight: 600;
+    }
+
+    th button {
+      border: 0;
+      padding: 0;
+      background: none;
+      color: inherit;
+      font: inherit;
+      cursor: pointer;
+    }
+
+    td.num,
+    th.num {
+      text-align: end;
+      font-variant-numeric: tabular-nums;
+    }
+
+    .chart svg {
+      width: 100%;
+      height: auto;
+      display: block;
+    }
+
+    .chart .grid {
+      stroke: var(--md-sys-color-outline-variant);
+      stroke-width: 1;
+    }
+
+    .chart .tick {
+      fill: var(--md-sys-color-on-surface-variant);
+      font-size: 11px;
+    }
+
+    .legend {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px 14px;
+      margin-top: 6px;
+      font-size: 12px;
+    }
+
+    .legend .swatch {
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      margin-inline-end: 5px;
+      border-radius: 3px;
+      vertical-align: -1px;
+    }
+
+    .steps {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    .steps li {
+      display: flex;
+      gap: 8px;
+      padding: 4px 0;
+    }
+
+    .steps md-icon {
+      --md-icon-size: 18px;
+    }
+
+    .steps .done md-icon {
+      color: var(--md-sys-color-primary);
+    }
+
+    .steps .failed md-icon {
+      color: var(--md-sys-color-error);
+    }
+
+    .steps .note {
+      display: block;
+      color: var(--md-sys-color-on-surface-variant);
+      font-size: 12px;
+    }
+
+    .unreadable,
+    .cut {
+      color: var(--md-sys-color-on-surface-variant);
+      font-size: 12px;
+      font-style: italic;
+    }
+
+    .markdown :first-child {
+      margin-top: 0;
+    }
+  `; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.dark = document.body.classList.contains('dark');
+        this.themeWatch = new MutationObserver(() => (this.dark = document.body.classList.contains('dark')));
+        this.themeWatch.observe(document.body, { attributes: true, attributeFilter: ['class'] });
+    }
+    disconnectedCallback() {
+        this.themeWatch?.disconnect();
+        super.disconnectedCallback();
+    }
+    render() {
+        const blocks = this.workspace?.blocks ?? [];
+        return html `${blocks.map((block, i) => this.block(block, i))}`;
+    }
+    block(block, i) {
+        switch (block.kind) {
+            case 'heading':
+                return block.level === 1 ? html `<h1>${block.text}</h1>` : block.level === 3 ? html `<h3>${block.text}</h3>` : html `<h2>${block.text}</h2>`;
+            case 'text':
+                return html `<section class="markdown">${unsafeHTML(renderMarkdown(block.markdown))}</section>`;
+            case 'metrics':
+                return html `<section class="metrics">
+          ${(block.items ?? []).map((one) => html `<div class="metric">
+              <div class="label">${one.label}</div>
+              <div class="value">${shown(one.value)}${one.unit ? html ` <small>${one.unit}</small>` : nothing}</div>
+              ${one.note ? html `<div class="note">${one.note}</div>` : nothing}
+            </div>`)}
+        </section>`;
+            case 'table':
+                return this.table(block, i);
+            case 'chart':
+                return this.chart(block, i);
+            case 'steps':
+                return html `<section>
+          <ol class="steps">
+            ${(block.items ?? []).map((one) => html `<li class=${one.state}>
+                <md-icon>${{ done: 'check_circle', doing: 'progress_activity', failed: 'error', todo: 'radio_button_unchecked' }[one.state] ?? 'radio_button_unchecked'}</md-icon>
+                <span>${one.label}${one.note ? html `<span class="note">${one.note}</span>` : nothing}</span>
+              </li>`)}
+          </ol>
+        </section>`;
+            default:
+                return html `<section class="unreadable">${t('unreadable', 'a block that cannot be drawn ({reason})', { reason: block.reason ?? block.kind })}</section>`;
+        }
+    }
+    table(block, i) {
+        const columns = block.columns ?? [];
+        const sort = this.sorts[i];
+        const rows = sort ? sortRows(block.rows ?? [], sort.column, sort.direction, i18next.language) : block.rows ?? [];
+        const toggle = (column) => (this.sorts = { ...this.sorts, [i]: { column, direction: sort?.column === column && sort.direction === 'asc' ? 'desc' : 'asc' } });
+        return html `<section>
+      <div class="bar">
+        <span class="caption">${block.caption ?? ''} · ${t('rows', '{count} rows', { count: rows.length })}</span>
+        <button @click=${() => this.download(block.caption || this.workspace?.title || 'table', columns, rows)}>
+          <md-icon>download</md-icon>${t('csv', 'CSV')}
+        </button>
+      </div>
+      ${this.tableOf(columns, rows, sort, toggle)}
+      ${block.cut ? html `<div class="cut">${t('cut', '{count} more rows were left out over the limit.', { count: block.cut })}</div>` : nothing}
+    </section>`;
+    }
+    tableOf(columns, rows, sort, toggle) {
+        return html `<div class="scroll">
+      <table>
+        <thead>
+          <tr>
+            ${columns.map(column => html `<th class=${column.type === 'number' ? 'num' : ''} aria-sort=${sort?.column === column.name ? (sort.direction === 'asc' ? 'ascending' : 'descending') : 'none'}>
+                ${toggle
+            ? html `<button @click=${() => toggle(column.name)}>${column.label || column.name}${sort?.column === column.name ? (sort.direction === 'asc' ? ' ▲' : ' ▼') : ''}</button>`
+            : column.label || column.name}
+              </th>`)}
+          </tr>
+        </thead>
+        <tbody>
+          ${rows.map(row => html `<tr>${columns.map(column => html `<td class=${column.type === 'number' || typeof row[column.name] === 'number' ? 'num' : ''}>${shown(row[column.name])}</td>`)}</tr>`)}
+        </tbody>
+      </table>
+    </div>`;
+    }
+    chart(block, i) {
+        const colours = this.dark ? DARK : LIGHT;
+        const x = block.x ?? [];
+        const series = block.series ?? [];
+        const name = (one) => (one.other ? t('other', 'other') : one.name);
+        const showingTable = this.asTable.has(i);
+        const flip = () => {
+            const next = new Set(this.asTable);
+            next.has(i) ? next.delete(i) : next.add(i);
+            this.asTable = next;
+        };
+        const bar = html `<div class="bar">
+      <span class="caption">${block.caption ?? ''}${block.unit ? ` (${block.unit})` : ''}</span>
+      <button @click=${flip}><md-icon>${showingTable ? 'bar_chart' : 'table_rows'}</md-icon>${showingTable ? t('as-chart', 'chart') : t('as-table', 'table')}</button>
+    </div>`;
+        if (showingTable) {
+            const columns = [{ name: '_x', label: '' }, ...series.map((one, s) => ({ name: `s${s}`, label: name(one), type: 'number' }))];
+            const rows = x.map((label, j) => Object.fromEntries([['_x', label], ...series.map((one, s) => [`s${s}`, one.values[j]])]));
+            return html `<section class="chart">${bar}${this.tableOf(columns, rows)}</section>`;
+        }
+        const W = 640;
+        const H = 240;
+        const left = 56;
+        const bottom = 28;
+        const plotW = W - left - 8;
+        const plotH = H - bottom - 10;
+        const values = series.flatMap(one => one.values).filter((v) => typeof v === 'number');
+        const min = Math.min(0, ...values);
+        const ticks = ticksFor(Math.max(...values, 0) - min).map(tick => tick + min);
+        const top = ticks[ticks.length - 1] || 1;
+        const y = (v) => 10 + plotH - ((v - min) / (top - min || 1)) * plotH;
+        const band = plotW / Math.max(1, x.length);
+        const everyNth = Math.max(1, Math.ceil(x.length / 12));
+        const marks = block.chart === 'line'
+            ? series.map((one, s) => {
+                const points = one.values.map((v, j) => (typeof v === 'number' ? [left + band * (j + 0.5), y(v)] : null));
+                const path = points.reduce((d, p, j) => (p ? `${d}${d && points[j - 1] ? 'L' : 'M'}${p[0]},${p[1]}` : d), '');
+                return svg `<path d=${path} fill="none" stroke=${colours[s % 8]} stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></path>
+              ${points.map((p, j) => p ? svg `<circle cx=${p[0]} cy=${p[1]} r="4" fill=${colours[s % 8]} stroke="var(--md-sys-color-surface)" stroke-width="2"><title>${name(one)} · ${x[j]}: ${shown(one.values[j])}</title></circle>` : nothing)}`;
+            })
+            : series.map((one, s) => {
+                const inner = band * 0.7;
+                const width = Math.max(2, inner / series.length - 2);
+                return one.values.map((v, j) => {
+                    if (typeof v !== 'number')
+                        return nothing;
+                    const x0 = left + band * j + (band - inner) / 2 + s * (width + 2);
+                    const y0 = Math.min(y(v), y(0));
+                    const h = Math.max(1, Math.abs(y(v) - y(0)));
+                    return svg `<rect x=${x0} y=${y0} width=${width} height=${h} rx="3" fill=${colours[s % 8]}><title>${name(one)} · ${x[j]}: ${shown(v)}</title></rect>`;
+                });
+            });
+        return html `<section class="chart" role="img" aria-label=${block.caption || series.map(name).join(', ')}>
+      ${bar}
+      <svg viewBox="0 0 ${W} ${H}">
+        ${ticks.map(tick => svg `<line class="grid" x1=${left} x2=${W - 8} y1=${y(tick)} y2=${y(tick)}></line><text class="tick" x=${left - 6} y=${y(tick) + 4} text-anchor="end">${shown(tick)}</text>`)}
+        ${marks}
+        ${x.map((label, j) => (j % everyNth ? nothing : svg `<text class="tick" x=${left + band * (j + 0.5)} y=${H - 8} text-anchor="middle">${label}</text>`))}
+      </svg>
+      ${series.length > 1
+            ? html `<div class="legend">${series.map((one, s) => html `<span><span class="swatch" style="background:${colours[s % 8]}"></span>${name(one)}</span>`)}</div>`
+            : nothing}
+    </section>`;
+    }
+    download(title, columns, rows) {
+        const blob = new Blob([tableCsv(columns, rows)], { type: 'text/csv;charset=utf-8' });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = `${title.replace(/[\\/:*?"<>|]+/g, '-').slice(0, 80)}.csv`;
+        link.click();
+        setTimeout(() => URL.revokeObjectURL(url), 1000);
+    }
+};
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], AssistantWorkspaceView.prototype, "workspace", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], AssistantWorkspaceView.prototype, "sorts", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], AssistantWorkspaceView.prototype, "asTable", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], AssistantWorkspaceView.prototype, "dark", void 0);
+AssistantWorkspaceView = __decorate([
+    customElement('ox-assistant-workspace-view')
+], AssistantWorkspaceView);
+export { AssistantWorkspaceView };
+//# sourceMappingURL=workspace-view.js.map

package/dist-client/components/workspace-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"workspace-view.js","sourceRoot":"","sources":["../../client/components/workspace-view.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * The blocks of an AI 작업판, drawn (operato-application/design/ai/workspace.md §3).\n *\n * Every kind is drawn here - the model writes no HTML. Charts use the eight validated categorical colours in\n * a fixed order (dataviz reference palette, light and dark each checked); three of the light ones sit under\n * 3:1 against the surface, so every chart carries its legend (two series or more) and a table view.\n */\nimport '@material/web/icon/icon.js'\n\nimport { LitElement, css, html, nothing, svg, type TemplateResult } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { renderMarkdown } from './markdown.js'\nimport { sortRows, tableCsv, type WorkspaceBlockView, type WorkspaceView } from '../utils/workspace.js'\n\nconst LIGHT = ['#2a78d6', '#eb6834', '#1baf7a', '#eda100', '#e87ba4', '#008300', '#4a3aa7', '#e34948']\nconst DARK = ['#3987e5', '#d95926', '#199e70', '#c98500', '#d55181', '#008300', '#9085e9', '#e66767']\n\nconst t = (key: string, defaultValue: string, options: Record<string, unknown> = {}) =>\n  String(i18next.t(`ai-assistant.workspace.${key}`, { defaultValue, ...options }))\n\nconst shown = (value: unknown) =>\n  value === null || value === undefined ? '' : typeof value === 'number' ? value.toLocaleString(i18next.language || undefined) : String(value)\n\n/** Four round steps from zero to above the largest value. */\nfunction ticksFor(max: number): number[] {\n  if (!(max > 0)) return [0, 1]\n  const raw = max / 4\n  const power = 10 ** Math.floor(Math.log10(raw))\n  const step = [1, 2, 2.5, 5, 10].map(one => one * power).find(one => one >= raw) ?? raw\n  return Array.from({ length: Math.ceil(max / step) + 1 }, (_, i) => Math.round(i * step * 1e6) / 1e6)\n}\n\n@customElement('ox-assistant-workspace-view')\nexport class AssistantWorkspaceView extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n      color: var(--md-sys-color-on-surface);\n      font-size: 14px;\n      line-height: 1.5;\n    }\n\n    section {\n      margin: 0 0 20px;\n    }\n\n    h1,\n    h2,\n    h3 {\n      margin: 24px 0 8px;\n      line-height: 1.3;\n    }\n\n    h1 {\n      font-size: 22px;\n    }\n\n    h2 {\n      font-size: 18px;\n    }\n\n    h3 {\n      font-size: 15px;\n    }\n\n    .metrics {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));\n      gap: 10px;\n    }\n\n    .metric {\n      padding: 12px 14px;\n      border: 1px solid var(--md-sys-color-outline-variant);\n      border-radius: 10px;\n      background: var(--md-sys-color-surface-container-lowest);\n    }\n\n    .metric .label {\n      color: var(--md-sys-color-on-surface-variant);\n      font-size: 12px;\n    }\n\n    .metric .value {\n      font-size: 22px;\n      font-weight: 650;\n      font-variant-numeric: tabular-nums;\n    }\n\n    .metric .note {\n      color: var(--md-sys-color-on-surface-variant);\n      font-size: 12px;\n    }\n\n    .bar {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin-bottom: 6px;\n      color: var(--md-sys-color-on-surface-variant);\n      font-size: 12px;\n    }\n\n    .bar .caption {\n      flex: 1;\n    }\n\n    .bar button {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      padding: 3px 8px;\n      border: 1px solid var(--md-sys-color-outline-variant);\n      border-radius: 6px;\n      background: transparent;\n      color: inherit;\n      font: inherit;\n      cursor: pointer;\n    }\n\n    .bar md-icon {\n      --md-icon-size: 16px;\n    }\n\n    .scroll {\n      max-height: 560px;\n      overflow: auto;\n      border: 1px solid var(--md-sys-color-outline-variant);\n      border-radius: 8px;\n    }\n\n    table {\n      width: 100%;\n      border-collapse: collapse;\n      font-size: 13px;\n    }\n\n    th,\n    td {\n      padding: 6px 10px;\n      border-bottom: 1px solid var(--md-sys-color-outline-variant);\n      text-align: start;\n      white-space: nowrap;\n    }\n\n    th {\n      position: sticky;\n      top: 0;\n      background: var(--md-sys-color-surface-container);\n      font-weight: 600;\n    }\n\n    th button {\n      border: 0;\n      padding: 0;\n      background: none;\n      color: inherit;\n      font: inherit;\n      cursor: pointer;\n    }\n\n    td.num,\n    th.num {\n      text-align: end;\n      font-variant-numeric: tabular-nums;\n    }\n\n    .chart svg {\n      width: 100%;\n      height: auto;\n      display: block;\n    }\n\n    .chart .grid {\n      stroke: var(--md-sys-color-outline-variant);\n      stroke-width: 1;\n    }\n\n    .chart .tick {\n      fill: var(--md-sys-color-on-surface-variant);\n      font-size: 11px;\n    }\n\n    .legend {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 4px 14px;\n      margin-top: 6px;\n      font-size: 12px;\n    }\n\n    .legend .swatch {\n      display: inline-block;\n      width: 10px;\n      height: 10px;\n      margin-inline-end: 5px;\n      border-radius: 3px;\n      vertical-align: -1px;\n    }\n\n    .steps {\n      list-style: none;\n      margin: 0;\n      padding: 0;\n    }\n\n    .steps li {\n      display: flex;\n      gap: 8px;\n      padding: 4px 0;\n    }\n\n    .steps md-icon {\n      --md-icon-size: 18px;\n    }\n\n    .steps .done md-icon {\n      color: var(--md-sys-color-primary);\n    }\n\n    .steps .failed md-icon {\n      color: var(--md-sys-color-error);\n    }\n\n    .steps .note {\n      display: block;\n      color: var(--md-sys-color-on-surface-variant);\n      font-size: 12px;\n    }\n\n    .unreadable,\n    .cut {\n      color: var(--md-sys-color-on-surface-variant);\n      font-size: 12px;\n      font-style: italic;\n    }\n\n    .markdown :first-child {\n      margin-top: 0;\n    }\n  `\n\n  @property({ attribute: false }) workspace?: WorkspaceView\n\n  @state() private sorts: Record<number, { column: string; direction: 'asc' | 'desc' }> = {}\n  @state() private asTable = new Set<number>()\n  @state() private dark = false\n\n  private themeWatch?: MutationObserver\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.dark = document.body.classList.contains('dark')\n    this.themeWatch = new MutationObserver(() => (this.dark = document.body.classList.contains('dark')))\n    this.themeWatch.observe(document.body, { attributes: true, attributeFilter: ['class'] })\n  }\n\n  disconnectedCallback() {\n    this.themeWatch?.disconnect()\n    super.disconnectedCallback()\n  }\n\n  render() {\n    const blocks = this.workspace?.blocks ?? []\n    return html`${blocks.map((block, i) => this.block(block, i))}`\n  }\n\n  private block(block: WorkspaceBlockView, i: number): TemplateResult {\n    switch (block.kind) {\n      case 'heading':\n        return block.level === 1 ? html`<h1>${block.text}</h1>` : block.level === 3 ? html`<h3>${block.text}</h3>` : html`<h2>${block.text}</h2>`\n      case 'text':\n        return html`<section class=\"markdown\">${unsafeHTML(renderMarkdown(block.markdown))}</section>`\n      case 'metrics':\n        return html`<section class=\"metrics\">\n          ${(block.items ?? []).map(\n            (one: any) => html`<div class=\"metric\">\n              <div class=\"label\">${one.label}</div>\n              <div class=\"value\">${shown(one.value)}${one.unit ? html` <small>${one.unit}</small>` : nothing}</div>\n              ${one.note ? html`<div class=\"note\">${one.note}</div>` : nothing}\n            </div>`\n          )}\n        </section>`\n      case 'table':\n        return this.table(block, i)\n      case 'chart':\n        return this.chart(block, i)\n      case 'steps':\n        return html`<section>\n          <ol class=\"steps\">\n            ${(block.items ?? []).map(\n              (one: any) => html`<li class=${one.state}>\n                <md-icon>${{ done: 'check_circle', doing: 'progress_activity', failed: 'error', todo: 'radio_button_unchecked' }[one.state as string] ?? 'radio_button_unchecked'}</md-icon>\n                <span>${one.label}${one.note ? html`<span class=\"note\">${one.note}</span>` : nothing}</span>\n              </li>`\n            )}\n          </ol>\n        </section>`\n      default:\n        return html`<section class=\"unreadable\">${t('unreadable', 'a block that cannot be drawn ({reason})', { reason: block.reason ?? block.kind })}</section>`\n    }\n  }\n\n  private table(block: WorkspaceBlockView, i: number): TemplateResult {\n    const columns: { name: string; label?: string; type?: string }[] = block.columns ?? []\n    const sort = this.sorts[i]\n    const rows = sort ? sortRows(block.rows ?? [], sort.column, sort.direction, i18next.language) : block.rows ?? []\n    const toggle = (column: string) =>\n      (this.sorts = { ...this.sorts, [i]: { column, direction: sort?.column === column && sort.direction === 'asc' ? 'desc' : 'asc' } })\n    return html`<section>\n      <div class=\"bar\">\n        <span class=\"caption\">${block.caption ?? ''} · ${t('rows', '{count} rows', { count: rows.length })}</span>\n        <button @click=${() => this.download(block.caption || this.workspace?.title || 'table', columns, rows)}>\n          <md-icon>download</md-icon>${t('csv', 'CSV')}\n        </button>\n      </div>\n      ${this.tableOf(columns, rows, sort, toggle)}\n      ${block.cut ? html`<div class=\"cut\">${t('cut', '{count} more rows were left out over the limit.', { count: block.cut })}</div>` : nothing}\n    </section>`\n  }\n\n  private tableOf(columns: { name: string; label?: string; type?: string }[], rows: Record<string, any>[], sort?: { column: string; direction: string }, toggle?: (column: string) => void) {\n    return html`<div class=\"scroll\">\n      <table>\n        <thead>\n          <tr>\n            ${columns.map(\n              column => html`<th class=${column.type === 'number' ? 'num' : ''} aria-sort=${sort?.column === column.name ? (sort.direction === 'asc' ? 'ascending' : 'descending') : 'none'}>\n                ${toggle\n                  ? html`<button @click=${() => toggle(column.name)}>${column.label || column.name}${sort?.column === column.name ? (sort.direction === 'asc' ? ' ▲' : ' ▼') : ''}</button>`\n                  : column.label || column.name}\n              </th>`\n            )}\n          </tr>\n        </thead>\n        <tbody>\n          ${rows.map(row => html`<tr>${columns.map(column => html`<td class=${column.type === 'number' || typeof row[column.name] === 'number' ? 'num' : ''}>${shown(row[column.name])}</td>`)}</tr>`)}\n        </tbody>\n      </table>\n    </div>`\n  }\n\n  private chart(block: WorkspaceBlockView, i: number): TemplateResult {\n    const colours = this.dark ? DARK : LIGHT\n    const x: string[] = block.x ?? []\n    const series: { name: string; other?: boolean; values: (number | null)[] }[] = block.series ?? []\n    const name = (one: { name: string; other?: boolean }) => (one.other ? t('other', 'other') : one.name)\n    const showingTable = this.asTable.has(i)\n    const flip = () => {\n      const next = new Set(this.asTable)\n      next.has(i) ? next.delete(i) : next.add(i)\n      this.asTable = next\n    }\n\n    const bar = html`<div class=\"bar\">\n      <span class=\"caption\">${block.caption ?? ''}${block.unit ? ` (${block.unit})` : ''}</span>\n      <button @click=${flip}><md-icon>${showingTable ? 'bar_chart' : 'table_rows'}</md-icon>${showingTable ? t('as-chart', 'chart') : t('as-table', 'table')}</button>\n    </div>`\n\n    if (showingTable) {\n      const columns = [{ name: '_x', label: '' }, ...series.map((one, s) => ({ name: `s${s}`, label: name(one), type: 'number' }))]\n      const rows = x.map((label, j) => Object.fromEntries([['_x', label], ...series.map((one, s) => [`s${s}`, one.values[j]])]))\n      return html`<section class=\"chart\">${bar}${this.tableOf(columns, rows)}</section>`\n    }\n\n    const W = 640\n    const H = 240\n    const left = 56\n    const bottom = 28\n    const plotW = W - left - 8\n    const plotH = H - bottom - 10\n    const values = series.flatMap(one => one.values).filter((v): v is number => typeof v === 'number')\n    const min = Math.min(0, ...values)\n    const ticks = ticksFor(Math.max(...values, 0) - min).map(tick => tick + min)\n    const top = ticks[ticks.length - 1] || 1\n    const y = (v: number) => 10 + plotH - ((v - min) / (top - min || 1)) * plotH\n    const band = plotW / Math.max(1, x.length)\n    const everyNth = Math.max(1, Math.ceil(x.length / 12))\n\n    const marks =\n      block.chart === 'line'\n        ? series.map((one, s) => {\n            const points = one.values.map((v, j) => (typeof v === 'number' ? [left + band * (j + 0.5), y(v)] : null))\n            const path = points.reduce((d, p, j) => (p ? `${d}${d && points[j - 1] ? 'L' : 'M'}${p[0]},${p[1]}` : d), '')\n            return svg`<path d=${path} fill=\"none\" stroke=${colours[s % 8]} stroke-width=\"2\" stroke-linejoin=\"round\" stroke-linecap=\"round\"></path>\n              ${points.map((p, j) =>\n                p ? svg`<circle cx=${p[0]} cy=${p[1]} r=\"4\" fill=${colours[s % 8]} stroke=\"var(--md-sys-color-surface)\" stroke-width=\"2\"><title>${name(one)} · ${x[j]}: ${shown(one.values[j])}</title></circle>` : nothing\n              )}`\n          })\n        : series.map((one, s) => {\n            const inner = band * 0.7\n            const width = Math.max(2, inner / series.length - 2)\n            return one.values.map((v, j) => {\n              if (typeof v !== 'number') return nothing\n              const x0 = left + band * j + (band - inner) / 2 + s * (width + 2)\n              const y0 = Math.min(y(v), y(0))\n              const h = Math.max(1, Math.abs(y(v) - y(0)))\n              return svg`<rect x=${x0} y=${y0} width=${width} height=${h} rx=\"3\" fill=${colours[s % 8]}><title>${name(one)} · ${x[j]}: ${shown(v)}</title></rect>`\n            })\n          })\n\n    return html`<section class=\"chart\" role=\"img\" aria-label=${block.caption || series.map(name).join(', ')}>\n      ${bar}\n      <svg viewBox=\"0 0 ${W} ${H}\">\n        ${ticks.map(tick => svg`<line class=\"grid\" x1=${left} x2=${W - 8} y1=${y(tick)} y2=${y(tick)}></line><text class=\"tick\" x=${left - 6} y=${y(tick) + 4} text-anchor=\"end\">${shown(tick)}</text>`)}\n        ${marks}\n        ${x.map((label, j) => (j % everyNth ? nothing : svg`<text class=\"tick\" x=${left + band * (j + 0.5)} y=${H - 8} text-anchor=\"middle\">${label}</text>`))}\n      </svg>\n      ${series.length > 1\n        ? html`<div class=\"legend\">${series.map((one, s) => html`<span><span class=\"swatch\" style=\"background:${colours[s % 8]}\"></span>${name(one)}</span>`)}</div>`\n        : nothing}\n    </section>`\n  }\n\n  private download(title: string, columns: { name: string; label?: string }[], rows: Record<string, any>[]) {\n    const blob = new Blob([tableCsv(columns, rows)], { type: 'text/csv;charset=utf-8' })\n    const url = URL.createObjectURL(blob)\n    const link = document.createElement('a')\n    link.href = url\n    link.download = `${title.replace(/[\\\\/:*?\"<>|]+/g, '-').slice(0, 80)}.csv`\n    link.click()\n    setTimeout(() => URL.revokeObjectURL(url), 1000)\n  }\n}\n"]}

package/dist-client/pages/assistant-workspace-page.d.ts

@@ -0,0 +1,27 @@
+import '@material/web/icon/icon.js';
+import '../components/workspace-view.js';
+import { PageView } from '@operato/shell';
+declare const AssistantWorkspacePage_base: (new (...args: any[]) => import("lit").LitElement) & typeof PageView;
+export declare class AssistantWorkspacePage extends AssistantWorkspacePage_base {
+    static styles: import("lit").CSSResult[];
+    private sessionId;
+    private name;
+    private wanted;
+    private versions;
+    private loading;
+    private failure;
+    /** A version that arrived after the page was drawn - announced, not shown until asked. */
+    private newer;
+    private unsubscribe?;
+    get context(): {
+        title: string;
+    };
+    private get shown();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    pageUpdated(_changes: any, lifecycle: any): Promise<void>;
+    private load;
+    private go;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};