@things-factory/ai-assistant 10.1.90 → 10.1.91

package/client/components/assistant-chat.ts

@@ -65,6 +65,7 @@ import { parseProposalOutcomeLine, parseProposalRequestLine, proposalCardState,
 import { availableTriggers, type TriggerChip } from './chat-triggers.js'
 import './entry-review.js'
 import { entryReadyCount, isEntryProposal, latestEntryKeys } from '../utils/entry-proposal.js'
+import { isWorkspaceProposal, versionOfCard, workspaceAddress } from '../utils/workspace.js'
 
 interface ChatLine {
   role: 'user' | 'assistant' | 'system'
@@ -3953,6 +3954,8 @@ export class OxAssistantChat extends LitElement {
       <div class="proposals">
         ${items.map(p => {
           const key = this.proposalKey(p)
+          /* A workspace card opens the page; it runs nothing (design/ai/workspace.md §4). */
+          if (isWorkspaceProposal(p)) return this.renderWorkspaceCard(p, key)
           const card = proposalCardState(key, { outcomes, requested, sentHere: this.sentProposals.has(key) })
           const entry = isEntryProposal(p)
           const replaced = entry && latestEntry?.get(p.target) !== key && card.state === 'ready'
@@ -4035,6 +4038,29 @@ export class OxAssistantChat extends LitElement {
     `
   }
 
+  /** The AI 작업판 card - what it holds, which version, and the way to open it. The person opens it; the model does not. */
+  private renderWorkspaceCard(p: any, key: string) {
+    const { version, of } = versionOfCard(this.lines.map(one => one.proposals ?? []), p.workspace.name, key)
+    const contents = Object.entries(p.contents ?? {})
+      .map(([kind, count]) => String(i18next.t(`ai-assistant.workspace.contains-${kind}`, { defaultValue: `${kind} {count}`, count: Number(count) } as any)))
+      .join(' · ')
+    const open = () => {
+      if (!this.sessionId) return
+      /* The page is the application's; navigate is the shell's, reached by an event so this component stays standalone. */
+      this.dispatchEvent(new CustomEvent('assistant-open-page', { detail: { href: workspaceAddress(this.sessionId, p.workspace.name, version) }, bubbles: true, composed: true }))
+    }
+    return html`
+      <div class="proposal workspace">
+        <md-icon>${p.icon || 'dashboard'}</md-icon>
+        <span class="pbody">
+          <span class="plabel">${p.workspace.title}</span>
+          <span class="preason">${[contents, of > 1 ? i18next.t('ai-assistant.workspace.version', { defaultValue: 'version {version} of {of}', version, of }) : ''].filter(Boolean).join(' · ')}</span>
+        </span>
+        <button class="run" ?disabled=${!this.sessionId} @click=${open}>${i18next.t('ai-assistant.workspace.open', { defaultValue: 'open in workspace' })}</button>
+      </div>
+    `
+  }
+
   /**
    * 눌린 카드가 말하는 것 — **호스트가 한 일**이고, 아직 모르면 모른다고 말한다.
    *

package/client/components/assistant-dock.ts

@@ -12,7 +12,7 @@ import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { closeOverlay, notify } from '@operato/layout'
 import { OxPrompt } from '@operato/popup'
-import { AppController, store } from '@operato/shell'
+import { AppController, navigate, store } from '@operato/shell'
 import { ScrollbarStyles } from '@operato/styles'
 
 import { followPickedConversation, type AssistantMode } from './assistant-mode.js'
@@ -329,6 +329,12 @@ export class AssistantDock extends localize(i18next)(LitElement) {
 
   private onStartNewSession = () => void this.newConversation()
 
+  /* A card asks for a page of this application - the AI 작업판. The dock stays open beside it. */
+  private onOpenPage = (event: CustomEvent) => {
+    const href = event.detail?.href
+    if (typeof href === 'string' && href) navigate(href)
+  }
+
   /** Who reads the open conversation - absent until the list or the create answer says. */
   private get audience(): string | undefined {
     return this.sessions.find(session => session.id === this.sessionId)?.visibility || undefined
@@ -344,6 +350,7 @@ export class AssistantDock extends localize(i18next)(LitElement) {
   connectedCallback() {
     super.connectedCallback()
     this.addEventListener('assistant-start-new-session', this.onStartNewSession)
+    this.addEventListener('assistant-open-page', this.onOpenPage as EventListener)
     this.unsubscribers.push(
       subscribeAssistantSurface(() => this.follow()),
       store.subscribe(() => { if (this.openedIdentity !== this.identityKey()) this.follow() }),
@@ -359,6 +366,7 @@ export class AssistantDock extends localize(i18next)(LitElement) {
   disconnectedCallback() {
     this.revision++
     this.removeEventListener('assistant-start-new-session', this.onStartNewSession)
+    this.removeEventListener('assistant-open-page', this.onOpenPage as EventListener)
     this.unsubscribers.splice(0).forEach(unsubscribe => unsubscribe())
     setOpenSession('')
     this.controller.clear()

package/client/components/workspace-view.ts

@@ -0,0 +1,428 @@
+/*
+ * 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, type TemplateResult } 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, type WorkspaceBlockView, type WorkspaceView } 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: string, defaultValue: string, options: Record<string, unknown> = {}) =>
+  String(i18next.t(`ai-assistant.workspace.${key}`, { defaultValue, ...options }))
+
+const shown = (value: unknown) =>
+  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: number): number[] {
+  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)
+}
+
+@customElement('ox-assistant-workspace-view')
+export class AssistantWorkspaceView extends LitElement {
+  static 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;
+    }
+  `
+
+  @property({ attribute: false }) workspace?: WorkspaceView
+
+  @state() private sorts: Record<number, { column: string; direction: 'asc' | 'desc' }> = {}
+  @state() private asTable = new Set<number>()
+  @state() private dark = false
+
+  private themeWatch?: MutationObserver
+
+  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))}`
+  }
+
+  private block(block: WorkspaceBlockView, i: number): TemplateResult {
+    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: any) => 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: any) => html`<li class=${one.state}>
+                <md-icon>${{ done: 'check_circle', doing: 'progress_activity', failed: 'error', todo: 'radio_button_unchecked' }[one.state as string] ?? '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>`
+    }
+  }
+
+  private table(block: WorkspaceBlockView, i: number): TemplateResult {
+    const columns: { name: string; label?: string; type?: string }[] = block.columns ?? []
+    const sort = this.sorts[i]
+    const rows = sort ? sortRows(block.rows ?? [], sort.column, sort.direction, i18next.language) : block.rows ?? []
+    const toggle = (column: string) =>
+      (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>`
+  }
+
+  private tableOf(columns: { name: string; label?: string; type?: string }[], rows: Record<string, any>[], sort?: { column: string; direction: string }, toggle?: (column: string) => void) {
+    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>`
+  }
+
+  private chart(block: WorkspaceBlockView, i: number): TemplateResult {
+    const colours = this.dark ? DARK : LIGHT
+    const x: string[] = block.x ?? []
+    const series: { name: string; other?: boolean; values: (number | null)[] }[] = block.series ?? []
+    const name = (one: { name: string; other?: boolean }) => (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): v is number => 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: number) => 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>`
+  }
+
+  private download(title: string, columns: { name: string; label?: string }[], rows: Record<string, any>[]) {
+    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)
+  }
+}