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

package/client/components/dashboard-card.ts

@@ -0,0 +1,450 @@
+/*
+ * 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, type CardItem, type CardRun } from '../utils/card-api.js'
+import { drawsNothing, issueLine, ownershipLine, partialLine, readLine, viewIcon } from '../utils/card-words.js'
+
+const t = (key: string, options: Record<string, unknown> = {}) => String(i18next.t(key, options))
+
+export type CardAction = 'refresh' | 'ai' | 'rename' | 'share' | 'versions' | 'copy' | 'unplace' | 'left' | 'right' | 'wider' | 'narrower' | 'taller' | 'shorter'
+
+@customElement('ai-dashboard-card')
+export class AiDashboardCard extends localize(i18next)(LitElement) {
+  static 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;
+    }
+  `
+
+  @property({ attribute: false }) card?: CardItem
+  /** The place's size, when it is on the dashboard. */
+  @property({ type: Number }) width = 2
+  @property({ type: Number }) height = 1
+  @property({ type: Boolean, reflect: true }) editing = false
+  @property({ type: Boolean }) first = false
+  @property({ type: Boolean }) last = false
+
+  @state() private run?: CardRun
+  @state() private failed?: string
+  @state() private loading = false
+  @state() private menu = false
+  @state() private readAt?: Date
+
+  private readingFor?: string
+  private closeMenu = (event: Event) => {
+    if (!event.composedPath().includes(this)) this.menu = false
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+    document.addEventListener('click', this.closeMenu, true)
+  }
+
+  disconnectedCallback() {
+    document.removeEventListener('click', this.closeMenu, true)
+    super.disconnectedCallback()
+  }
+
+  updated(changes: Map<string, unknown>) {
+    /* 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: any) {
+      if (this.readingFor === key) this.failed = error?.message ?? String(error)
+    } finally {
+      if (this.readingFor === key) this.loading = false
+    }
+  }
+
+  private act(action: CardAction) {
+    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>`
+  }
+
+  private renderMenu(owner: boolean) {
+    const item = (action: CardAction, icon: string, key: string) => 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>`
+  }
+
+  private 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>`
+  }
+
+  private 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>`
+  }
+
+  private renderEdit() {
+    const button = (action: CardAction, icon: string, key: string, 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>`
+  }
+}

package/client/components/proposal-preview.ts

@@ -0,0 +1,96 @@
+/*
+ * 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, type CardRun } from '../utils/card-api.js'
+import { drawsNothing, issueLine, partialLine } from '../utils/card-words.js'
+
+const t = (key: string, options: Record<string, unknown> = {}) => String(i18next.t(key, options))
+
+@customElement('ai-dashboard-proposal-preview')
+export class ProposalPreview extends localize(i18next)(LitElement) {
+  static 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);
+    }
+  `
+
+  @property({ attribute: false }) proposal: any
+  @property({ attribute: false }) sessionId?: string
+  @property({ attribute: false }) proposalKey?: string
+
+  @state() private run?: CardRun
+  @state() private failed?: string
+  private readFor?: string
+
+  updated() {
+    const key = this.sessionId && this.proposalKey ? `${this.sessionId}/${this.proposalKey}` : undefined
+    if (key && key !== this.readFor) this.read(key)
+  }
+
+  private async read(key: string) {
+    this.readFor = key
+    try {
+      const run = await cardApi.preview(this.sessionId!, this.proposalKey!)
+      if (this.readFor === key) this.run = run
+    } catch (error: any) {
+      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>`
+  }
+}

package/client/index.ts

@@ -0,0 +1,3 @@
+export * from './utils/card-api.js'
+export * from './utils/card-words.js'
+export * from './components/dashboard-card.js'