@things-factory/ai-assistant 10.1.88 → 10.1.91

package/client/components/assistant-chat.ts

@@ -63,6 +63,9 @@ import { chatDefaults } from './chat-defaults.js'
 import { isDifferentConversation, resolveConversation, type AssistantMode, type AssistantModeView, pickInitialMode } from './assistant-mode.js'
 import { parseProposalOutcomeLine, parseProposalRequestLine, proposalCardState, type ParsedProposalOutcome } from './proposal-outcome-line.js'
 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'
@@ -3945,12 +3948,19 @@ export class OxAssistantChat extends LitElement {
     /* The card's state is the conversation's rows - read once for every card of this line. */
     const outcomes = this.proposalOutcomes
     const requested = this.proposalRequests
+    /* A data entry card replaced by a newer one for the same record cannot be entered (design/ai/data-entry.md §5). */
+    const latestEntry = items.some(isEntryProposal) ? latestEntryKeys(this.lines.map(one => one.proposals ?? [])) : undefined
     return html`
       <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 sent = card.state !== 'ready'
+          const entry = isEntryProposal(p)
+          const replaced = entry && latestEntry?.get(p.target) !== key && card.state === 'ready'
+          const ready = entry ? entryReadyCount(p) : 0
+          const sent = card.state !== 'ready' || replaced || (entry && ready === 0)
           /*
             Follow-up chips are the host's words, never this component's. The fallback that used
             to live here named a 3D modeller's operations in hardcoded Korean, and it reached the
@@ -3962,7 +3972,7 @@ export class OxAssistantChat extends LitElement {
             <div class="proposal ${sent ? 'sent' : ''}">
               <md-icon>${p.icon || (p.source ? 'view_in_ar' : 'bolt')}</md-icon>
               <span class="pbody">
-                <span class="plabel">${p.label || p.command}</span>
+                <span class="plabel">${entry && p.labelKey ? i18next.t(p.labelKey) : p.label || p.command}</span>
                 ${p.reason ? html`<span class="preason">${p.reason}</span>` : nothing}
               </span>
               ${/*
@@ -3984,9 +3994,15 @@ export class OxAssistantChat extends LitElement {
                       class="run"
                       ?disabled=${sent}
                       @click=${() => this.executeProposal(p, key)}>
-                      ${sent
-                        ? this.proposalStateText(key)
-                        : i18next.t('ai-assistant.button.run-proposal', { defaultValue: 'run' })}
+                      ${replaced
+                        ? i18next.t('ai-assistant.entry.replaced', { defaultValue: 'replaced by a newer card' })
+                        : card.state !== 'ready'
+                          ? this.proposalStateText(key)
+                          : entry
+                            ? ready
+                              ? i18next.t('ai-assistant.entry.enter', { defaultValue: 'enter {count} rows', count: ready })
+                              : i18next.t('ai-assistant.entry.nothing-to-enter', { defaultValue: 'nothing to enter' })
+                            : i18next.t('ai-assistant.button.run-proposal', { defaultValue: 'run' })}
                     </button>
                   `}
               ${/*
@@ -4002,6 +4018,7 @@ export class OxAssistantChat extends LitElement {
                 </span>
               ` : nothing}
             </div>
+            ${entry ? html`<ox-assistant-entry-review .proposal=${p}></ox-assistant-entry-review>` : nothing}
             ${rawChoices.length ? html`
               <div class="proposal-choices" role="group" aria-label=${i18next.t('ai-assistant.text.proposal-choices', { defaultValue: 'follow-up choices' })}>
                 ${rawChoices.map((c: any) => html`
@@ -4021,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'
@@ -29,7 +29,8 @@ import {
   type AnchorResult,
   type AssistantSurface
 } from '../utils/assistant-surface.js'
-import { runProposal, type ProposalContext, type ProposalOutcome } from '../utils/assistant-proposals.js'
+import { runProposal, setEntryProposalHandler, type ProposalContext, type ProposalOutcome } from '../utils/assistant-proposals.js'
+import { entryProposalHandler, type EntryApplyAnswer } from '../utils/entry-proposal.js'
 import { holdAssistantAsk, subscribeAssistantAsk, takeAssistantAsk, type AssistantAsk } from '../utils/assistant-ask.js'
 import { surfaceTransition } from '../utils/assistant-navigation.js'
 
@@ -38,6 +39,25 @@ export const ASSISTANT_DOCK_VIEWPART = 'assistant-dock'
 const t = (key: string, defaultValue: string, options: Record<string, unknown> = {}) =>
   i18next.t(`ai-assistant.dock.${key}`, { defaultValue, ...options })
 
+/* Pressing a data entry card asks the server to enter the rows it stored - the screen sends none (design/ai/data-entry.md §4). */
+setEntryProposalHandler(
+  entryProposalHandler(
+    async (sessionId, proposalKey) => {
+      const result = await client.mutate({
+        mutation: gql`
+          mutation ($id: String!, $key: String!) {
+            applyEntryProposal(sessionId: $id, proposalKey: $key)
+          }
+        `,
+        variables: { id: sessionId, key: proposalKey }
+      })
+      if (result.errors?.length) throw new Error(result.errors[0].message)
+      return result.data?.applyEntryProposal as EntryApplyAnswer
+    },
+    (key, options) => String(i18next.t(key, options))
+  )
+)
+
 const MODES_QUERY = gql`
   query ($subject: String!) {
     assistantModes(subject: $subject) {
@@ -309,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
@@ -324,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() }),
@@ -339,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/entry-review.ts

@@ -0,0 +1,246 @@
+/*
+ * The rows of a data entry proposal, as the person reviews them (operato-application/design/ai/data-entry.md §5).
+ *
+ * Read-only on purpose: a correction is said in the conversation ("row 2 is 12,000", "drop the last one")
+ * and the model proposes again. What is wrong in a cell is marked on the cell - blocking in the error
+ * colour, a note in the outline - and where each row came from is on the row.
+ */
+import '@material/web/icon/icon.js'
+
+import { LitElement, css, html, nothing } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { i18next } from '@operato/i18n'
+
+import { entryCellIssues, entryIssueKey, type EntryIssueView, type EntryRowView, type EntryTotalView } from '../utils/entry-proposal.js'
+
+const SHOWN = 50
+
+const t = (key: string, defaultValue: string, options: Record<string, unknown> = {}) =>
+  i18next.t(`ai-assistant.entry.${key}`, { defaultValue, ...options })
+
+function issueText(issue: EntryIssueView): string {
+  const params = { ...(issue.params ?? {}) } as any
+  if (Array.isArray(params.values)) params.values = params.values.join(', ')
+  return String(i18next.t(entryIssueKey(issue), { defaultValue: issue.code, ...params }))
+}
+
+function shown(value: unknown): string {
+  if (value === undefined || value === null) return ''
+  if (typeof value === 'number') return value.toLocaleString(i18next.language || undefined)
+  if (typeof value === 'boolean') return value ? '✓' : '—'
+  return String(value)
+}
+
+@customElement('ox-assistant-entry-review')
+export class AssistantEntryReview extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+      margin: 4px 0 2px;
+      font-size: 12px;
+      color: var(--md-sys-color-on-surface);
+    }
+
+    .summary {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px 10px;
+      margin-bottom: 6px;
+      color: var(--md-sys-color-on-surface-variant);
+    }
+
+    .summary .blocked {
+      color: var(--md-sys-color-error);
+      font-weight: 600;
+    }
+
+    .scroll {
+      max-height: 320px;
+      overflow: auto;
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 6px;
+    }
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+    }
+
+    th,
+    td {
+      padding: 4px 6px;
+      border-bottom: 1px solid var(--md-sys-color-outline-variant);
+      text-align: start;
+      vertical-align: top;
+      white-space: nowrap;
+    }
+
+    th {
+      position: sticky;
+      top: 0;
+      background: var(--md-sys-color-surface-container);
+      font-weight: 600;
+    }
+
+    td.num {
+      text-align: end;
+      font-variant-numeric: tabular-nums;
+    }
+
+    tr.blocked td {
+      background: color-mix(in srgb, var(--md-sys-color-error) 6%, transparent);
+    }
+
+    td.bad {
+      color: var(--md-sys-color-error);
+      text-decoration: underline wavy var(--md-sys-color-error);
+      text-underline-offset: 3px;
+    }
+
+    td.note {
+      text-decoration: underline dotted var(--md-sys-color-outline);
+      text-underline-offset: 3px;
+    }
+
+    .missing {
+      color: var(--md-sys-color-error);
+      font-style: italic;
+    }
+
+    .source {
+      color: var(--md-sys-color-on-surface-variant);
+      max-width: 180px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .row-issue {
+      display: block;
+      color: var(--md-sys-color-on-surface-variant);
+      white-space: normal;
+    }
+
+    .row-issue.blocking {
+      color: var(--md-sys-color-error);
+    }
+
+    .verified {
+      color: var(--md-sys-color-primary);
+    }
+
+    .verified md-icon,
+    .totals md-icon {
+      --md-icon-size: 14px;
+      vertical-align: -2px;
+    }
+
+    .totals {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 2px 12px;
+      margin: 6px 0 0;
+      font-variant-numeric: tabular-nums;
+    }
+
+    .totals .differs {
+      color: var(--md-sys-color-error);
+      font-weight: 600;
+    }
+
+    .totals .matches {
+      color: var(--md-sys-color-primary);
+    }
+
+    .more,
+    .check-failed {
+      margin-top: 4px;
+      color: var(--md-sys-color-on-surface-variant);
+    }
+  `
+
+  @property({ attribute: false }) proposal: any
+
+  /** The sum of each totalled field, beside the total the material prints - a missing row shows here without reading every row. */
+  private renderTotals(totals: EntryTotalView[], columns: { name: string; labelKey?: string }[]) {
+    if (!totals.length) return nothing
+    const name = (field: string) => {
+      const column = columns.find(one => one.name === field)
+      return column?.labelKey ? i18next.t(column.labelKey) : field
+    }
+    return html`<div class="totals" role="status">
+      ${totals.map(total => html`
+        <span>${t('total', '{field} total {sum}', { field: name(total.field), sum: shown(total.all) })}</span>
+        ${total.ready !== total.all ? html`<span>${t('total-ready', 'entered {sum}', { sum: shown(total.ready) })}</span>` : nothing}
+        ${total.declared !== undefined
+          ? html`<span>${t('total-declared', 'the material says {sum}', { sum: shown(total.declared) })}${total.declaredFound === false ? ` (${t('total-not-found', 'not found in the file')})` : ''}</span>
+              ${total.difference
+                ? html`<span class="differs">${t('total-differs', 'differs by {sum}', { sum: shown(total.difference) })}</span>`
+                : html`<span class="matches"><md-icon>task_alt</md-icon> ${t('total-matches', 'matches')}</span>`}`
+          : nothing}
+      `)}
+    </div>`
+  }
+
+  render() {
+    const p = this.proposal ?? {}
+    const columns: { name: string; type: string; required?: boolean; labelKey?: string }[] = p.columns ?? []
+    const rows: EntryRowView[] = p.rows ?? []
+    const counts = p.counts ?? {}
+    return html`
+      <div class="summary" role="status">
+        <span>${t('rows', '{count} rows', { count: counts.rows ?? rows.length })}</span>
+        <span>${t('ready', '{count} ready', { count: counts.ready ?? 0 })}</span>
+        ${counts.blocked ? html`<span class="blocked">${t('blocked', '{count} will not be entered', { count: counts.blocked })}</span>` : nothing}
+        ${counts.cut ? html`<span class="blocked">${t('cut', '{count} left out over the limit', { count: counts.cut })}</span>` : nothing}
+        ${counts.verified ? html`<span class="verified"><md-icon>task_alt</md-icon> ${t('verified', '{count} found in their file', { count: counts.verified })}</span>` : nothing}
+        ${counts.unmatched ? html`<span class="blocked">${t('unmatched', '{count} with a value their file does not have', { count: counts.unmatched })}</span>` : nothing}
+      </div>
+      <div class="scroll">
+        <table>
+          <thead>
+            <tr>
+              <th>#</th>
+              ${columns.map(column => html`<th>${column.labelKey ? i18next.t(column.labelKey) : column.name}${column.required ? ' *' : ''}</th>`)}
+              <th>${t('source', 'from')}</th>
+            </tr>
+          </thead>
+          <tbody>
+            ${rows.slice(0, SHOWN).map(row => {
+              const blocked = (row.issues ?? []).some(issue => issue.blocking)
+              const whole = entryCellIssues(row)
+              return html`
+                <tr class=${blocked ? 'blocked' : ''}>
+                  <td class="num">${row.index + 1}</td>
+                  ${columns.map(column => {
+                    const issues = entryCellIssues(row, column.name)
+                    const bad = issues.some(issue => issue.blocking)
+                    const value = row.values?.[column.name]
+                    const text = shown(value)
+                    return html`<td
+                      class="${column.type === 'number' || column.type === 'integer' ? 'num' : ''} ${bad ? 'bad' : issues.length ? 'note' : ''}"
+                      title=${issues.map(issueText).join('\n')}
+                    >
+                      ${text || (issues.some(issue => issue.code === 'required') ? html`<span class="missing">${t('missing', 'missing')}</span>` : '')}
+                    </td>`
+                  })}
+                  <td class="source" title=${(row.sources ?? []).map(source => source.where || source.attachmentId).join(' · ')}>
+                    ${row.evidence ? html`<span class="verified" title=${t('evidence', 'found on line {line} of the file', { line: row.evidence.line })}><md-icon>task_alt</md-icon></span> ` : nothing}
+                    ${(row.sources ?? []).map(source => source.where || source.attachmentId).join(' · ')}
+                    ${whole
+                      .filter(issue => issue.code !== 'no-source')
+                      .map(issue => html`<span class="row-issue ${issue.blocking ? 'blocking' : ''}">${issueText(issue)}</span>`)}
+                    ${whole.some(issue => issue.code === 'no-source') ? html`<span class="row-issue">${issueText({ code: 'no-source', blocking: false })}</span>` : nothing}
+                  </td>
+                </tr>
+              `
+            })}
+          </tbody>
+        </table>
+      </div>
+      ${this.renderTotals(p.totals ?? [], columns)}
+      ${rows.length > SHOWN ? html`<div class="more">${t('more-rows', '{count} more rows are not shown - they are entered too.', { count: rows.length - SHOWN })}</div>` : nothing}
+      ${p.checkFailed ? html`<div class="check-failed">${t('check-failed', 'the application could not check these rows; they are checked again when entered.')}</div>` : nothing}
+    `
+  }
+}