@things-factory/ai-dashboard 0.0.0-stage → 10.1.213

package/dist-client/components/dashboard-card.js

@@ -0,0 +1,490 @@
+import { __decorate, __metadata } from "tslib";
+/*
+ * One card on the dashboard - its name and what it reads, the block its definition draws as the viewer, when it was
+ * read and how much of its source it was drawn from (ADR-0160 decisions 4-6, 8). Drawing it asks the server to run
+ * the definition; no model is asked.
+ */
+import '@material/web/icon/icon.js';
+import '@things-factory/ai-assistant/dist-client/index.js';
+import { LitElement, css, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { cardApi } from '../utils/card-api.js';
+import { drawsNothing, issueLine, ownershipLine, partialLine, readLine, viewIcon } from '../utils/card-words.js';
+const t = (key, options = {}) => String(i18next.t(key, options));
+let AiDashboardCard = class AiDashboardCard extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        /** The place's size, when it is on the dashboard. */
+        this.width = 2;
+        this.height = 1;
+        this.editing = false;
+        this.first = false;
+        this.last = false;
+        this.loading = false;
+        this.menu = false;
+        this.closeMenu = (event) => {
+            if (!event.composedPath().includes(this))
+                this.menu = false;
+        };
+    }
+    static { this.styles = css `
+    :host {
+      display: block;
+      min-width: 0;
+      min-height: 0;
+    }
+
+    article {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      box-sizing: border-box;
+      border: 1px solid var(--ui-line, var(--md-sys-color-outline-variant));
+      border-radius: var(--ui-r, 12px);
+      background: var(--ui-panel, var(--md-sys-color-surface-container-lowest));
+      overflow: hidden;
+      transition:
+        box-shadow 0.18s ease,
+        border-color 0.18s ease,
+        transform 0.18s ease;
+    }
+
+    article:hover {
+      border-color: color-mix(in srgb, var(--ui-accent, var(--md-sys-color-primary)) 35%, var(--ui-line, transparent));
+      box-shadow: 0 6px 20px -12px rgb(0 0 0 / 35%);
+    }
+
+    :host([editing]) article {
+      border-style: dashed;
+      border-color: var(--ui-accent, var(--md-sys-color-primary));
+    }
+
+    header {
+      display: flex;
+      align-items: flex-start;
+      gap: 10px;
+      padding: 14px 14px 6px 16px;
+    }
+
+    .kind {
+      flex: none;
+      display: grid;
+      place-items: center;
+      width: 30px;
+      height: 30px;
+      border-radius: 8px;
+      background: var(--ui-accent-wash, color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent));
+      color: var(--ui-accent, var(--md-sys-color-primary));
+      --md-icon-size: 18px;
+    }
+
+    .titles {
+      flex: 1;
+      min-width: 0;
+    }
+
+    h4 {
+      margin: 0;
+      font-size: var(--ui-t-title, 15px);
+      font-weight: 600;
+      line-height: 1.3;
+      color: var(--ui-ink, var(--md-sys-color-on-surface));
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .sub {
+      display: block;
+      margin-top: 2px;
+      font-size: var(--ui-t-small, 12px);
+      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .tools {
+      flex: none;
+      display: flex;
+      gap: 2px;
+      opacity: 0.55;
+      transition: opacity 0.15s ease;
+    }
+
+    article:hover .tools,
+    article:focus-within .tools,
+    :host([editing]) .tools {
+      opacity: 1;
+    }
+
+    button.icon {
+      display: grid;
+      place-items: center;
+      width: 30px;
+      height: 30px;
+      padding: 0;
+      border: 0;
+      border-radius: 8px;
+      background: transparent;
+      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      cursor: pointer;
+      --md-icon-size: 18px;
+    }
+
+    button.icon:hover,
+    button.icon:focus-visible {
+      background: var(--ui-hover, var(--md-sys-color-surface-container-high));
+      color: var(--ui-ink, var(--md-sys-color-on-surface));
+      outline: none;
+    }
+
+    button.icon[disabled] {
+      opacity: 0.35;
+      cursor: default;
+    }
+
+    button.icon.spin md-icon {
+      animation: spin 0.9s linear infinite;
+    }
+
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    .menu {
+      position: absolute;
+      top: 44px;
+      right: 10px;
+      z-index: 2;
+      display: flex;
+      flex-direction: column;
+      min-width: 180px;
+      padding: 6px;
+      border: 1px solid var(--ui-line, var(--md-sys-color-outline-variant));
+      border-radius: 10px;
+      background: var(--ui-panel, var(--md-sys-color-surface-container-lowest));
+      box-shadow: 0 12px 32px -12px rgb(0 0 0 / 40%);
+    }
+
+    .menu button {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 8px 10px;
+      border: 0;
+      border-radius: 6px;
+      background: transparent;
+      color: var(--ui-ink, var(--md-sys-color-on-surface));
+      font: inherit;
+      font-size: var(--ui-t-body, 13px);
+      text-align: start;
+      cursor: pointer;
+      --md-icon-size: 18px;
+    }
+
+    .menu button:hover,
+    .menu button:focus-visible {
+      background: var(--ui-hover, var(--md-sys-color-surface-container-high));
+      outline: none;
+    }
+
+    .menu hr {
+      width: 100%;
+      margin: 4px 0;
+      border: 0;
+      border-top: 1px solid var(--ui-line-soft, var(--md-sys-color-outline-variant));
+    }
+
+    .body {
+      flex: 1;
+      min-height: 0;
+      padding: 4px 16px 8px;
+      overflow: auto;
+    }
+
+    .skeleton {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      padding-top: 8px;
+    }
+
+    .skeleton span {
+      display: block;
+      height: 14px;
+      border-radius: 6px;
+      background: linear-gradient(90deg, var(--ui-line-soft, #eee) 0%, var(--ui-panel-2, #f6f6f6) 50%, var(--ui-line-soft, #eee) 100%);
+      background-size: 200% 100%;
+      animation: shimmer 1.4s ease-in-out infinite;
+    }
+
+    .skeleton span:nth-child(1) {
+      width: 40%;
+      height: 28px;
+    }
+
+    .skeleton span:nth-child(2) {
+      width: 85%;
+    }
+
+    .skeleton span:nth-child(3) {
+      width: 65%;
+    }
+
+    @keyframes shimmer {
+      from {
+        background-position: 200% 0;
+      }
+      to {
+        background-position: -200% 0;
+      }
+    }
+
+    .issue {
+      display: flex;
+      gap: 10px;
+      align-items: flex-start;
+      margin-top: 8px;
+      padding: 12px;
+      border-radius: 8px;
+      background: color-mix(in srgb, var(--ui-crit, #c62828) 8%, transparent);
+      color: var(--ui-ink, var(--md-sys-color-on-surface));
+      font-size: var(--ui-t-body, 13px);
+      --md-icon-size: 18px;
+    }
+
+    .issue md-icon {
+      flex: none;
+      color: var(--ui-crit, #c62828);
+    }
+
+    .issue.access {
+      background: var(--ui-panel-2, var(--md-sys-color-surface-container));
+    }
+
+    .issue.access md-icon {
+      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+    }
+
+    .nothing {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+      height: 100%;
+      min-height: 120px;
+      color: var(--ui-faint, var(--md-sys-color-on-surface-variant));
+      font-size: var(--ui-t-body, 13px);
+      text-align: center;
+      --md-icon-size: 28px;
+    }
+
+    footer {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 4px 10px;
+      padding: 6px 16px 12px;
+      font-size: var(--ui-t-micro, 11px);
+      color: var(--ui-faint, var(--md-sys-color-on-surface-variant));
+    }
+
+    footer .partial {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      color: var(--ui-warn, #b26a00);
+      --md-icon-size: 14px;
+    }
+
+    .edit {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
+      gap: 4px;
+      padding: 8px;
+      border-top: 1px dashed var(--ui-line, var(--md-sys-color-outline-variant));
+      background: var(--ui-panel-2, var(--md-sys-color-surface-container-low));
+    }
+
+    .edit .size {
+      margin: 0 6px;
+      font-size: var(--ui-t-small, 12px);
+      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      font-variant-numeric: tabular-nums;
+    }
+  `; }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('click', this.closeMenu, true);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.closeMenu, true);
+        super.disconnectedCallback();
+    }
+    updated(changes) {
+        /* A new card, or a new version of it, is read again; nothing else is. */
+        const key = this.card ? `${this.card.id}@${this.card.version}` : undefined;
+        if (changes.has('card') && key && key !== this.readingFor)
+            this.refresh();
+    }
+    /** Draws the card again from the data - the server runs its definition as the viewer. */
+    async refresh() {
+        if (!this.card)
+            return;
+        const key = `${this.card.id}@${this.card.version}`;
+        this.readingFor = key;
+        this.loading = true;
+        this.failed = undefined;
+        try {
+            const run = await cardApi.run(this.card.id);
+            if (this.readingFor !== key)
+                return;
+            this.run = run;
+            this.readAt = new Date();
+        }
+        catch (error) {
+            if (this.readingFor === key)
+                this.failed = error?.message ?? String(error);
+        }
+        finally {
+            if (this.readingFor === key)
+                this.loading = false;
+        }
+    }
+    act(action) {
+        this.menu = false;
+        if (action === 'refresh')
+            return this.refresh();
+        this.dispatchEvent(new CustomEvent('card-action', { detail: { action, card: this.card }, bubbles: true, composed: true }));
+    }
+    render() {
+        const card = this.card;
+        if (!card)
+            return nothing;
+        const owner = card.access === 'owner';
+        const source = this.run?.source?.labelKey ? t(this.run.source.labelKey) : '';
+        const ownership = ownershipLine(card, t);
+        const sub = [card.description || source, ownership].filter(Boolean).join(' · ');
+        return html `<article aria-busy=${this.loading ? 'true' : 'false'}>
+      <header>
+        <span class="kind"><md-icon>${viewIcon(card.definition)}</md-icon></span>
+        <div class="titles">
+          <h4 title=${card.name}>${card.name}</h4>
+          ${sub ? html `<span class="sub" title=${sub}>${sub}</span>` : nothing}
+        </div>
+        <div class="tools">
+          <button class="icon ${this.loading ? 'spin' : ''}" title=${t('ai-dashboard.card.refresh')} aria-label=${t('ai-dashboard.card.refresh')} ?disabled=${this.loading} @click=${() => this.act('refresh')}>
+            <md-icon>refresh</md-icon>
+          </button>
+          ${owner
+            ? html `<button class="icon" title=${t('ai-dashboard.card.ai')} aria-label=${t('ai-dashboard.card.ai')} @click=${() => this.act('ai')}><md-icon>auto_awesome</md-icon></button>`
+            : nothing}
+          <button class="icon" title=${t('ai-dashboard.card.more')} aria-label=${t('ai-dashboard.card.more')} aria-expanded=${this.menu ? 'true' : 'false'} @click=${() => (this.menu = !this.menu)}>
+            <md-icon>more_vert</md-icon>
+          </button>
+        </div>
+      </header>
+      ${this.menu ? this.renderMenu(owner) : nothing}
+      <div class="body">${this.renderBody()}</div>
+      ${this.run && !this.run.issue ? this.renderFooter() : nothing}
+      ${this.editing ? this.renderEdit() : nothing}
+    </article>`;
+    }
+    renderMenu(owner) {
+        const item = (action, icon, key) => html `<button role="menuitem" @click=${() => this.act(action)}><md-icon>${icon}</md-icon>${t(key)}</button>`;
+        return html `<div class="menu" role="menu">
+      ${owner ? item('ai', 'auto_awesome', 'ai-dashboard.card.ai') : nothing} ${owner ? item('rename', 'edit', 'ai-dashboard.card.rename') : nothing}
+      ${owner ? item('share', 'share', 'ai-dashboard.card.share') : nothing} ${owner ? item('versions', 'history', 'ai-dashboard.card.versions') : nothing}
+      ${item('copy', 'content_copy', owner ? 'ai-dashboard.card.duplicate' : 'ai-dashboard.card.copy')}
+      <hr />
+      ${item('unplace', 'remove_circle_outline', 'ai-dashboard.card.unplace')}
+    </div>`;
+    }
+    renderBody() {
+        if (this.failed)
+            return html `<div class="issue"><md-icon>error</md-icon><span>${this.failed}</span></div>`;
+        if (!this.run)
+            return html `<div class="skeleton" aria-hidden="true"><span></span><span></span><span></span></div>`;
+        const issue = issueLine(this.run, t);
+        if (issue)
+            return html `<div class="issue ${issue.access ? 'access' : ''}"><md-icon>${issue.access ? 'lock' : 'error'}</md-icon><span>${issue.text}</span></div>`;
+        if (drawsNothing(this.run))
+            return html `<div class="nothing"><md-icon>inbox</md-icon><span>${t('ai-dashboard.card.nothing')}</span></div>`;
+        return html `<ox-assistant-workspace-view compact .workspace=${{ name: this.card.id, title: this.card.name, blocks: [this.run.block] }}></ox-assistant-workspace-view>`;
+    }
+    renderFooter() {
+        const partial = partialLine(this.run, t);
+        return html `<footer>
+      <span>${readLine(this.run, this.readAt ?? new Date(), t, i18next.language)}</span>
+      ${partial ? html `<span class="partial"><md-icon>warning</md-icon>${partial}</span>` : nothing}
+    </footer>`;
+    }
+    renderEdit() {
+        const button = (action, icon, key, disabled = false) => html `<button class="icon" title=${t(key)} aria-label=${t(key)} ?disabled=${disabled} @click=${() => this.act(action)}><md-icon>${icon}</md-icon></button>`;
+        return html `<div class="edit">
+      ${button('left', 'arrow_back', 'ai-dashboard.edit.left', this.first)} ${button('right', 'arrow_forward', 'ai-dashboard.edit.right', this.last)}
+      ${button('narrower', 'remove', 'ai-dashboard.edit.narrower', this.width <= 1)}
+      <span class="size">${this.width} × ${this.height}</span>
+      ${button('wider', 'add', 'ai-dashboard.edit.wider', this.width >= 4)}
+      ${button(this.height > 1 ? 'shorter' : 'taller', this.height > 1 ? 'unfold_less' : 'unfold_more', this.height > 1 ? 'ai-dashboard.edit.shorter' : 'ai-dashboard.edit.taller')}
+      ${button('unplace', 'delete_outline', 'ai-dashboard.card.unplace')}
+    </div>`;
+    }
+};
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], AiDashboardCard.prototype, "card", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], AiDashboardCard.prototype, "width", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], AiDashboardCard.prototype, "height", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], AiDashboardCard.prototype, "editing", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], AiDashboardCard.prototype, "first", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], AiDashboardCard.prototype, "last", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], AiDashboardCard.prototype, "run", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], AiDashboardCard.prototype, "failed", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], AiDashboardCard.prototype, "loading", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], AiDashboardCard.prototype, "menu", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Date)
+], AiDashboardCard.prototype, "readAt", void 0);
+AiDashboardCard = __decorate([
+    customElement('ai-dashboard-card')
+], AiDashboardCard);
+export { AiDashboardCard };
+//# sourceMappingURL=dashboard-card.js.map

package/dist-client/components/dashboard-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard-card.js","sourceRoot":"","sources":["../../client/components/dashboard-card.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * One card on the dashboard - its name and what it reads, the block its definition draws as the viewer, when it was\n * read and how much of its source it was drawn from (ADR-0160 decisions 4-6, 8). Drawing it asks the server to run\n * the definition; no model is asked.\n */\nimport '@material/web/icon/icon.js'\nimport '@things-factory/ai-assistant/dist-client/index.js'\n\nimport { LitElement, css, html, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\n\nimport { cardApi, type CardItem, type CardRun } from '../utils/card-api.js'\nimport { drawsNothing, issueLine, ownershipLine, partialLine, readLine, viewIcon } from '../utils/card-words.js'\n\nconst t = (key: string, options: Record<string, unknown> = {}) => String(i18next.t(key, options))\n\nexport type CardAction = 'refresh' | 'ai' | 'rename' | 'share' | 'versions' | 'copy' | 'unplace' | 'left' | 'right' | 'wider' | 'narrower' | 'taller' | 'shorter'\n\n@customElement('ai-dashboard-card')\nexport class AiDashboardCard extends localize(i18next)(LitElement) {\n  static styles = css`\n    :host {\n      display: block;\n      min-width: 0;\n      min-height: 0;\n    }\n\n    article {\n      position: relative;\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      box-sizing: border-box;\n      border: 1px solid var(--ui-line, var(--md-sys-color-outline-variant));\n      border-radius: var(--ui-r, 12px);\n      background: var(--ui-panel, var(--md-sys-color-surface-container-lowest));\n      overflow: hidden;\n      transition:\n        box-shadow 0.18s ease,\n        border-color 0.18s ease,\n        transform 0.18s ease;\n    }\n\n    article:hover {\n      border-color: color-mix(in srgb, var(--ui-accent, var(--md-sys-color-primary)) 35%, var(--ui-line, transparent));\n      box-shadow: 0 6px 20px -12px rgb(0 0 0 / 35%);\n    }\n\n    :host([editing]) article {\n      border-style: dashed;\n      border-color: var(--ui-accent, var(--md-sys-color-primary));\n    }\n\n    header {\n      display: flex;\n      align-items: flex-start;\n      gap: 10px;\n      padding: 14px 14px 6px 16px;\n    }\n\n    .kind {\n      flex: none;\n      display: grid;\n      place-items: center;\n      width: 30px;\n      height: 30px;\n      border-radius: 8px;\n      background: var(--ui-accent-wash, color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent));\n      color: var(--ui-accent, var(--md-sys-color-primary));\n      --md-icon-size: 18px;\n    }\n\n    .titles {\n      flex: 1;\n      min-width: 0;\n    }\n\n    h4 {\n      margin: 0;\n      font-size: var(--ui-t-title, 15px);\n      font-weight: 600;\n      line-height: 1.3;\n      color: var(--ui-ink, var(--md-sys-color-on-surface));\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .sub {\n      display: block;\n      margin-top: 2px;\n      font-size: var(--ui-t-small, 12px);\n      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .tools {\n      flex: none;\n      display: flex;\n      gap: 2px;\n      opacity: 0.55;\n      transition: opacity 0.15s ease;\n    }\n\n    article:hover .tools,\n    article:focus-within .tools,\n    :host([editing]) .tools {\n      opacity: 1;\n    }\n\n    button.icon {\n      display: grid;\n      place-items: center;\n      width: 30px;\n      height: 30px;\n      padding: 0;\n      border: 0;\n      border-radius: 8px;\n      background: transparent;\n      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));\n      cursor: pointer;\n      --md-icon-size: 18px;\n    }\n\n    button.icon:hover,\n    button.icon:focus-visible {\n      background: var(--ui-hover, var(--md-sys-color-surface-container-high));\n      color: var(--ui-ink, var(--md-sys-color-on-surface));\n      outline: none;\n    }\n\n    button.icon[disabled] {\n      opacity: 0.35;\n      cursor: default;\n    }\n\n    button.icon.spin md-icon {\n      animation: spin 0.9s linear infinite;\n    }\n\n    @keyframes spin {\n      to {\n        transform: rotate(360deg);\n      }\n    }\n\n    .menu {\n      position: absolute;\n      top: 44px;\n      right: 10px;\n      z-index: 2;\n      display: flex;\n      flex-direction: column;\n      min-width: 180px;\n      padding: 6px;\n      border: 1px solid var(--ui-line, var(--md-sys-color-outline-variant));\n      border-radius: 10px;\n      background: var(--ui-panel, var(--md-sys-color-surface-container-lowest));\n      box-shadow: 0 12px 32px -12px rgb(0 0 0 / 40%);\n    }\n\n    .menu button {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding: 8px 10px;\n      border: 0;\n      border-radius: 6px;\n      background: transparent;\n      color: var(--ui-ink, var(--md-sys-color-on-surface));\n      font: inherit;\n      font-size: var(--ui-t-body, 13px);\n      text-align: start;\n      cursor: pointer;\n      --md-icon-size: 18px;\n    }\n\n    .menu button:hover,\n    .menu button:focus-visible {\n      background: var(--ui-hover, var(--md-sys-color-surface-container-high));\n      outline: none;\n    }\n\n    .menu hr {\n      width: 100%;\n      margin: 4px 0;\n      border: 0;\n      border-top: 1px solid var(--ui-line-soft, var(--md-sys-color-outline-variant));\n    }\n\n    .body {\n      flex: 1;\n      min-height: 0;\n      padding: 4px 16px 8px;\n      overflow: auto;\n    }\n\n    .skeleton {\n      display: flex;\n      flex-direction: column;\n      gap: 10px;\n      padding-top: 8px;\n    }\n\n    .skeleton span {\n      display: block;\n      height: 14px;\n      border-radius: 6px;\n      background: linear-gradient(90deg, var(--ui-line-soft, #eee) 0%, var(--ui-panel-2, #f6f6f6) 50%, var(--ui-line-soft, #eee) 100%);\n      background-size: 200% 100%;\n      animation: shimmer 1.4s ease-in-out infinite;\n    }\n\n    .skeleton span:nth-child(1) {\n      width: 40%;\n      height: 28px;\n    }\n\n    .skeleton span:nth-child(2) {\n      width: 85%;\n    }\n\n    .skeleton span:nth-child(3) {\n      width: 65%;\n    }\n\n    @keyframes shimmer {\n      from {\n        background-position: 200% 0;\n      }\n      to {\n        background-position: -200% 0;\n      }\n    }\n\n    .issue {\n      display: flex;\n      gap: 10px;\n      align-items: flex-start;\n      margin-top: 8px;\n      padding: 12px;\n      border-radius: 8px;\n      background: color-mix(in srgb, var(--ui-crit, #c62828) 8%, transparent);\n      color: var(--ui-ink, var(--md-sys-color-on-surface));\n      font-size: var(--ui-t-body, 13px);\n      --md-icon-size: 18px;\n    }\n\n    .issue md-icon {\n      flex: none;\n      color: var(--ui-crit, #c62828);\n    }\n\n    .issue.access {\n      background: var(--ui-panel-2, var(--md-sys-color-surface-container));\n    }\n\n    .issue.access md-icon {\n      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));\n    }\n\n    .nothing {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: 6px;\n      height: 100%;\n      min-height: 120px;\n      color: var(--ui-faint, var(--md-sys-color-on-surface-variant));\n      font-size: var(--ui-t-body, 13px);\n      text-align: center;\n      --md-icon-size: 28px;\n    }\n\n    footer {\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      gap: 4px 10px;\n      padding: 6px 16px 12px;\n      font-size: var(--ui-t-micro, 11px);\n      color: var(--ui-faint, var(--md-sys-color-on-surface-variant));\n    }\n\n    footer .partial {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      color: var(--ui-warn, #b26a00);\n      --md-icon-size: 14px;\n    }\n\n    .edit {\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      justify-content: center;\n      gap: 4px;\n      padding: 8px;\n      border-top: 1px dashed var(--ui-line, var(--md-sys-color-outline-variant));\n      background: var(--ui-panel-2, var(--md-sys-color-surface-container-low));\n    }\n\n    .edit .size {\n      margin: 0 6px;\n      font-size: var(--ui-t-small, 12px);\n      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));\n      font-variant-numeric: tabular-nums;\n    }\n  `\n\n  @property({ attribute: false }) card?: CardItem\n  /** The place's size, when it is on the dashboard. */\n  @property({ type: Number }) width = 2\n  @property({ type: Number }) height = 1\n  @property({ type: Boolean, reflect: true }) editing = false\n  @property({ type: Boolean }) first = false\n  @property({ type: Boolean }) last = false\n\n  @state() private run?: CardRun\n  @state() private failed?: string\n  @state() private loading = false\n  @state() private menu = false\n  @state() private readAt?: Date\n\n  private readingFor?: string\n  private closeMenu = (event: Event) => {\n    if (!event.composedPath().includes(this)) this.menu = false\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    document.addEventListener('click', this.closeMenu, true)\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this.closeMenu, true)\n    super.disconnectedCallback()\n  }\n\n  updated(changes: Map<string, unknown>) {\n    /* A new card, or a new version of it, is read again; nothing else is. */\n    const key = this.card ? `${this.card.id}@${this.card.version}` : undefined\n    if (changes.has('card') && key && key !== this.readingFor) this.refresh()\n  }\n\n  /** Draws the card again from the data - the server runs its definition as the viewer. */\n  async refresh() {\n    if (!this.card) return\n    const key = `${this.card.id}@${this.card.version}`\n    this.readingFor = key\n    this.loading = true\n    this.failed = undefined\n    try {\n      const run = await cardApi.run(this.card.id)\n      if (this.readingFor !== key) return\n      this.run = run\n      this.readAt = new Date()\n    } catch (error: any) {\n      if (this.readingFor === key) this.failed = error?.message ?? String(error)\n    } finally {\n      if (this.readingFor === key) this.loading = false\n    }\n  }\n\n  private act(action: CardAction) {\n    this.menu = false\n    if (action === 'refresh') return this.refresh()\n    this.dispatchEvent(new CustomEvent('card-action', { detail: { action, card: this.card }, bubbles: true, composed: true }))\n  }\n\n  render() {\n    const card = this.card\n    if (!card) return nothing\n    const owner = card.access === 'owner'\n    const source = this.run?.source?.labelKey ? t(this.run.source.labelKey) : ''\n    const ownership = ownershipLine(card, t)\n    const sub = [card.description || source, ownership].filter(Boolean).join(' · ')\n    return html`<article aria-busy=${this.loading ? 'true' : 'false'}>\n      <header>\n        <span class=\"kind\"><md-icon>${viewIcon(card.definition)}</md-icon></span>\n        <div class=\"titles\">\n          <h4 title=${card.name}>${card.name}</h4>\n          ${sub ? html`<span class=\"sub\" title=${sub}>${sub}</span>` : nothing}\n        </div>\n        <div class=\"tools\">\n          <button class=\"icon ${this.loading ? 'spin' : ''}\" title=${t('ai-dashboard.card.refresh')} aria-label=${t('ai-dashboard.card.refresh')} ?disabled=${this.loading} @click=${() => this.act('refresh')}>\n            <md-icon>refresh</md-icon>\n          </button>\n          ${owner\n            ? html`<button class=\"icon\" title=${t('ai-dashboard.card.ai')} aria-label=${t('ai-dashboard.card.ai')} @click=${() => this.act('ai')}><md-icon>auto_awesome</md-icon></button>`\n            : nothing}\n          <button class=\"icon\" title=${t('ai-dashboard.card.more')} aria-label=${t('ai-dashboard.card.more')} aria-expanded=${this.menu ? 'true' : 'false'} @click=${() => (this.menu = !this.menu)}>\n            <md-icon>more_vert</md-icon>\n          </button>\n        </div>\n      </header>\n      ${this.menu ? this.renderMenu(owner) : nothing}\n      <div class=\"body\">${this.renderBody()}</div>\n      ${this.run && !this.run.issue ? this.renderFooter() : nothing}\n      ${this.editing ? this.renderEdit() : nothing}\n    </article>`\n  }\n\n  private renderMenu(owner: boolean) {\n    const item = (action: CardAction, icon: string, key: string) => html`<button role=\"menuitem\" @click=${() => this.act(action)}><md-icon>${icon}</md-icon>${t(key)}</button>`\n    return html`<div class=\"menu\" role=\"menu\">\n      ${owner ? item('ai', 'auto_awesome', 'ai-dashboard.card.ai') : nothing} ${owner ? item('rename', 'edit', 'ai-dashboard.card.rename') : nothing}\n      ${owner ? item('share', 'share', 'ai-dashboard.card.share') : nothing} ${owner ? item('versions', 'history', 'ai-dashboard.card.versions') : nothing}\n      ${item('copy', 'content_copy', owner ? 'ai-dashboard.card.duplicate' : 'ai-dashboard.card.copy')}\n      <hr />\n      ${item('unplace', 'remove_circle_outline', 'ai-dashboard.card.unplace')}\n    </div>`\n  }\n\n  private renderBody() {\n    if (this.failed) return html`<div class=\"issue\"><md-icon>error</md-icon><span>${this.failed}</span></div>`\n    if (!this.run) return html`<div class=\"skeleton\" aria-hidden=\"true\"><span></span><span></span><span></span></div>`\n    const issue = issueLine(this.run, t)\n    if (issue) return html`<div class=\"issue ${issue.access ? 'access' : ''}\"><md-icon>${issue.access ? 'lock' : 'error'}</md-icon><span>${issue.text}</span></div>`\n    if (drawsNothing(this.run)) return html`<div class=\"nothing\"><md-icon>inbox</md-icon><span>${t('ai-dashboard.card.nothing')}</span></div>`\n    return html`<ox-assistant-workspace-view compact .workspace=${{ name: this.card!.id, title: this.card!.name, blocks: [this.run.block] }}></ox-assistant-workspace-view>`\n  }\n\n  private renderFooter() {\n    const partial = partialLine(this.run!, t)\n    return html`<footer>\n      <span>${readLine(this.run!, this.readAt ?? new Date(), t, i18next.language)}</span>\n      ${partial ? html`<span class=\"partial\"><md-icon>warning</md-icon>${partial}</span>` : nothing}\n    </footer>`\n  }\n\n  private renderEdit() {\n    const button = (action: CardAction, icon: string, key: string, disabled = false) =>\n      html`<button class=\"icon\" title=${t(key)} aria-label=${t(key)} ?disabled=${disabled} @click=${() => this.act(action)}><md-icon>${icon}</md-icon></button>`\n    return html`<div class=\"edit\">\n      ${button('left', 'arrow_back', 'ai-dashboard.edit.left', this.first)} ${button('right', 'arrow_forward', 'ai-dashboard.edit.right', this.last)}\n      ${button('narrower', 'remove', 'ai-dashboard.edit.narrower', this.width <= 1)}\n      <span class=\"size\">${this.width} × ${this.height}</span>\n      ${button('wider', 'add', 'ai-dashboard.edit.wider', this.width >= 4)}\n      ${button(this.height > 1 ? 'shorter' : 'taller', this.height > 1 ? 'unfold_less' : 'unfold_more', this.height > 1 ? 'ai-dashboard.edit.shorter' : 'ai-dashboard.edit.taller')}\n      ${button('unplace', 'delete_outline', 'ai-dashboard.card.unplace')}\n    </div>`\n  }\n}\n"]}

package/dist-client/components/proposal-preview.d.ts

@@ -0,0 +1,17 @@
+import '@material/web/icon/icon.js';
+import '@things-factory/ai-assistant/dist-client/index.js';
+import { LitElement } from 'lit';
+declare const ProposalPreview_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+export declare class ProposalPreview extends ProposalPreview_base {
+    static styles: import("lit").CSSResult;
+    proposal: any;
+    sessionId?: string;
+    proposalKey?: string;
+    private run?;
+    private failed?;
+    private readFor?;
+    updated(): void;
+    private read;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/dist-client/components/proposal-preview.js

@@ -0,0 +1,111 @@
+import { __decorate, __metadata } from "tslib";
+/*
+ * The preview under a card the conversation offers (ADR-0160 decisions 6, 9). The proposal holds the definition only;
+ * the preview asks the server to run it as whoever is looking at the conversation, so a value is never kept in the
+ * conversation and nobody sees data their own doors do not open.
+ */
+import '@material/web/icon/icon.js';
+import '@things-factory/ai-assistant/dist-client/index.js';
+import { LitElement, css, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { cardApi } from '../utils/card-api.js';
+import { drawsNothing, issueLine, partialLine } from '../utils/card-words.js';
+const t = (key, options = {}) => String(i18next.t(key, options));
+let ProposalPreview = class ProposalPreview extends localize(i18next)(LitElement) {
+    static { this.styles = css `
+    :host {
+      display: block;
+      margin: 4px 0 8px;
+    }
+
+    .frame {
+      padding: 10px 12px 8px;
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 10px;
+      background: var(--md-sys-color-surface-container-lowest);
+    }
+
+    .waiting,
+    .note {
+      font-size: 12px;
+      color: var(--md-sys-color-on-surface-variant);
+    }
+
+    .note {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      margin-top: 6px;
+      --md-icon-size: 14px;
+    }
+
+    .issue {
+      font-size: 12px;
+      color: var(--md-sys-color-error);
+    }
+
+    .partial {
+      color: var(--ui-warn, #b26a00);
+    }
+  `; }
+    updated() {
+        const key = this.sessionId && this.proposalKey ? `${this.sessionId}/${this.proposalKey}` : undefined;
+        if (key && key !== this.readFor)
+            this.read(key);
+    }
+    async read(key) {
+        this.readFor = key;
+        try {
+            const run = await cardApi.preview(this.sessionId, this.proposalKey);
+            if (this.readFor === key)
+                this.run = run;
+        }
+        catch (error) {
+            if (this.readFor === key)
+                this.failed = error?.message ?? String(error);
+        }
+    }
+    render() {
+        if (this.failed)
+            return html `<div class="frame issue">${this.failed}</div>`;
+        if (!this.run)
+            return html `<div class="frame waiting">${t('ai-dashboard.preview.reading')}</div>`;
+        const issue = issueLine(this.run, t);
+        const partial = partialLine(this.run, t);
+        return html `<div class="frame">
+      ${issue
+            ? html `<div class="issue">${issue.text}</div>`
+            : drawsNothing(this.run)
+                ? html `<div class="waiting">${t('ai-dashboard.card.nothing')}</div>`
+                : html `<ox-assistant-workspace-view compact .workspace=${{ name: this.proposalKey, title: this.proposal?.card?.name ?? '', blocks: [this.run.block] }}></ox-assistant-workspace-view>`}
+      ${partial ? html `<div class="note partial"><md-icon>warning</md-icon>${partial}</div>` : nothing}
+      <div class="note"><md-icon>bolt</md-icon>${t('ai-dashboard.preview.note', { day: this.run.asOf })}</div>
+    </div>`;
+    }
+};
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], ProposalPreview.prototype, "proposal", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", String)
+], ProposalPreview.prototype, "sessionId", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", String)
+], ProposalPreview.prototype, "proposalKey", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ProposalPreview.prototype, "run", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], ProposalPreview.prototype, "failed", void 0);
+ProposalPreview = __decorate([
+    customElement('ai-dashboard-proposal-preview')
+], ProposalPreview);
+export { ProposalPreview };
+//# sourceMappingURL=proposal-preview.js.map