@things-factory/ai-assistant 10.1.90 → 10.1.91

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

@@ -0,0 +1,237 @@
+/*
+ * The AI 작업판 page (operato-application/design/ai/workspace.md).
+ *
+ * `assistant-workspace?session=<id>&name=<name>[&version=<n>]`. It reads the conversation through its own
+ * door (`chatMessages`), so a private conversation shows nothing to someone outside it and a version behind a
+ * door the reader cannot pass is not among the versions (ADR-0073). A new version arriving while the page is
+ * open is announced, never swapped in under the reader.
+ */
+import '@material/web/icon/icon.js'
+import '../components/workspace-view.js'
+
+import gql from 'graphql-tag'
+import { css, html, nothing } from 'lit'
+import { customElement, state } from 'lit/decorators.js'
+
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { navigate, PageView } from '@operato/shell'
+import { ScrollbarStyles } from '@operato/styles'
+
+import { startSessionActivityFeed, subscribeSessionActivity } from '../utils/assistant-activity.js'
+import { workspaceAddress, workspaceVersions, type WorkspaceVersion } from '../utils/workspace.js'
+
+const MESSAGES = gql`
+  query ($sessionId: String!, $limit: Int, $offset: Int) {
+    chatMessages(sessionId: $sessionId, limit: $limit, offset: $offset) {
+      id
+      createdAt
+      proposalsJson
+    }
+  }
+`
+
+const PAGE = 200
+const MOST = 5000
+
+const t = (key: string, defaultValue: string, options: Record<string, unknown> = {}) =>
+  String(i18next.t(`ai-assistant.workspace.${key}`, { defaultValue, ...options }))
+
+@customElement('assistant-workspace-page')
+export class AssistantWorkspacePage extends localize(i18next)(PageView) {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: block;
+        overflow: auto;
+        padding: 20px 24px 40px;
+        box-sizing: border-box;
+        background: var(--md-sys-color-surface);
+      }
+
+      .page {
+        max-width: 1100px;
+        margin: 0 auto;
+      }
+
+      header {
+        display: flex;
+        align-items: flex-start;
+        gap: 12px;
+        margin-bottom: 16px;
+      }
+
+      header .what {
+        flex: 1;
+        min-width: 0;
+      }
+
+      header h1 {
+        margin: 0;
+        font-size: 24px;
+        line-height: 1.3;
+      }
+
+      header .summary {
+        margin-top: 4px;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      header select {
+        padding: 4px 8px;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 6px;
+        background: var(--md-sys-color-surface-container-lowest);
+        color: inherit;
+        font: inherit;
+      }
+
+      .notice {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        margin-bottom: 14px;
+        padding: 8px 12px;
+        border-radius: 8px;
+        background: var(--md-sys-color-secondary-container);
+        color: var(--md-sys-color-on-secondary-container);
+      }
+
+      .notice button {
+        padding: 3px 10px;
+        border: 1px solid currentColor;
+        border-radius: 6px;
+        background: transparent;
+        color: inherit;
+        font: inherit;
+        cursor: pointer;
+      }
+
+      .empty {
+        padding: 40px 0;
+        color: var(--md-sys-color-on-surface-variant);
+        text-align: center;
+      }
+    `
+  ]
+
+  @state() private sessionId = ''
+  @state() private name = ''
+  @state() private wanted = 0
+  @state() private versions: WorkspaceVersion[] = []
+  @state() private loading = false
+  @state() private failure = ''
+  /** A version that arrived after the page was drawn - announced, not shown until asked. */
+  @state() private newer = 0
+
+  private unsubscribe?: () => void
+
+  get context() {
+    const shown = this.shown
+    return { title: shown?.workspace.title || t('title', 'AI workspace') }
+  }
+
+  private get shown(): WorkspaceVersion | undefined {
+    if (!this.versions.length) return undefined
+    return this.versions.find(one => one.version === this.wanted) ?? this.versions[this.versions.length - 1]
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+    startSessionActivityFeed()
+    this.unsubscribe = subscribeSessionActivity(activity => {
+      if (activity.sessionId === this.sessionId && activity.kind === 'message') void this.load(true)
+    })
+  }
+
+  disconnectedCallback() {
+    this.unsubscribe?.()
+    super.disconnectedCallback()
+  }
+
+  async pageUpdated(_changes: any, lifecycle: any) {
+    const params = lifecycle?.params ?? {}
+    const sessionId = String(params.session || '')
+    const name = String(params.name || '')
+    const wanted = Number(params.version) || 0
+    const changed = sessionId !== this.sessionId || name !== this.name
+    this.sessionId = sessionId
+    this.name = name
+    this.wanted = wanted
+    if (changed) {
+      this.newer = 0
+      await this.load(false)
+    }
+  }
+
+  private async load(arriving: boolean) {
+    if (!this.sessionId || !this.name) return
+    const before = this.versions.length
+    if (!arriving) this.loading = true
+    this.failure = ''
+    try {
+      const messages: any[] = []
+      for (let offset = 0; offset < MOST; offset += PAGE) {
+        const result = await client.query({ query: MESSAGES, variables: { sessionId: this.sessionId, limit: PAGE, offset }, fetchPolicy: 'no-cache' })
+        if (result.errors?.length) throw new Error(result.errors[0].message)
+        const page = result.data?.chatMessages ?? []
+        messages.push(...page)
+        if (page.length < PAGE) break
+      }
+      const versions = workspaceVersions(messages, this.name)
+      this.versions = versions
+      if (arriving && versions.length > before && before > 0) this.newer = versions[versions.length - 1].version
+    } catch (error: any) {
+      this.failure = error?.message || String(error)
+    } finally {
+      this.loading = false
+    }
+  }
+
+  private go(version?: number) {
+    this.newer = 0
+    navigate(workspaceAddress(this.sessionId, this.name, version))
+  }
+
+  render() {
+    const shown = this.shown
+    if (this.loading && !shown) return html`<div class="empty">${t('loading', 'loading the workspace…')}</div>`
+    if (this.failure) return html`<div class="empty">${t('unreadable-page', 'could not read this workspace: {reason}', { reason: this.failure })}</div>`
+    /*
+     * Nothing to show says only what is true: this reader sees no such workspace. Whether it never existed, is in
+     * a private conversation or sits behind a door is not said - saying which would itself tell.
+     */
+    if (!shown) return html`<div class="empty">${t('not-found', 'there is no workspace here that you can see.')}</div>`
+
+    const latest = this.versions[this.versions.length - 1].version
+    return html`<div class="page">
+      ${this.newer && this.newer !== shown.version
+        ? html`<div class="notice" role="status">
+            <md-icon>update</md-icon>
+            <span>${t('newer', 'a newer version ({version}) is ready.', { version: this.newer })}</span>
+            <button @click=${() => this.go(this.newer)}>${t('show-newer', 'show it')}</button>
+          </div>`
+        : nothing}
+      <header>
+        <div class="what">
+          <h1>${shown.workspace.title}</h1>
+          ${shown.workspace.summary ? html`<div class="summary">${shown.workspace.summary}</div>` : nothing}
+        </div>
+        ${this.versions.length > 1
+          ? html`<select aria-label=${t('versions', 'versions')} @change=${(e: Event) => this.go(Number((e.target as HTMLSelectElement).value))}>
+              ${this.versions
+                .slice()
+                .reverse()
+                .map(
+                  one => html`<option value=${one.version} ?selected=${one.version === shown.version}>
+                    ${t('version', 'version {version} of {of}', { version: one.version, of: latest })}${one.createdAt ? ` · ${new Date(one.createdAt).toLocaleString(i18next.language || undefined)}` : ''}
+                  </option>`
+                )}
+            </select>`
+          : nothing}
+      </header>
+      <ox-assistant-workspace-view .workspace=${shown.workspace}></ox-assistant-workspace-view>
+    </div>`
+  }
+}

package/client/route.ts

@@ -0,0 +1,9 @@
+/* The pages ai-assistant brings to every application that installs it. */
+export default function route(page: string) {
+  switch (page) {
+    /* The AI 작업판 - results too large for the dock (design/ai/workspace.md). */
+    case 'assistant-workspace':
+      import('./pages/assistant-workspace-page.js')
+      return page
+  }
+}

package/client/utils/workspace.ts

@@ -0,0 +1,89 @@
+/*
+ * The AI 작업판 on the screen - which versions a workspace has, and the table's sort and CSV
+ * (operato-application/design/ai/workspace.md). Pure - tested without a browser.
+ */
+
+export interface WorkspaceBlockView {
+  kind: string
+  [key: string]: any
+}
+
+export interface WorkspaceView {
+  name: string
+  title: string
+  summary?: string
+  blocks: WorkspaceBlockView[]
+}
+
+export interface WorkspaceVersion {
+  /** 1-based, in the order the conversation made them. */
+  version: number
+  messageId: string
+  createdAt?: string
+  workspace: WorkspaceView
+}
+
+export function isWorkspaceProposal(proposal: any): boolean {
+  return proposal?.kind === 'workspace' && !!proposal?.workspace?.name
+}
+
+/**
+ * Every version of the named workspace in a conversation, oldest first. A message the reader may not see
+ * comes back redacted without its proposals, so a version behind a door is simply not among them.
+ */
+export function workspaceVersions(messages: { id: string; createdAt?: string; proposalsJson?: any[] | null }[], name: string): WorkspaceVersion[] {
+  const versions: WorkspaceVersion[] = []
+  for (const message of messages) {
+    for (const proposal of message.proposalsJson ?? []) {
+      if (isWorkspaceProposal(proposal) && proposal.workspace.name === name) {
+        versions.push({ version: versions.length + 1, messageId: message.id, createdAt: message.createdAt, workspace: proposal.workspace })
+      }
+    }
+  }
+  return versions
+}
+
+/** The version of a card within its conversation - "2 of 3" on the card and on the page. */
+export function versionOfCard(proposalsInOrder: any[][], name: string, key: string): { version: number; of: number } {
+  let version = 0
+  let of = 0
+  for (const list of proposalsInOrder)
+    for (const one of list ?? []) {
+      if (!isWorkspaceProposal(one) || one.workspace.name !== name) continue
+      of += 1
+      if (one.key === key) version = of
+    }
+  return { version, of }
+}
+
+export function workspaceAddress(sessionId: string, name: string, version?: number): string {
+  const query = new URLSearchParams({ session: sessionId, name })
+  if (version) query.set('version', String(version))
+  return `assistant-workspace?${query.toString()}`
+}
+
+/** Sorts by one column - numbers as numbers, empty last, the rest by the reader's collation. */
+export function sortRows(rows: Record<string, any>[], column: string, direction: 'asc' | 'desc', locale?: string): Record<string, any>[] {
+  const factor = direction === 'asc' ? 1 : -1
+  const collator = new Intl.Collator(locale, { numeric: true })
+  return [...rows].sort((a, b) => {
+    const x = a[column]
+    const y = b[column]
+    const emptyX = x === null || x === undefined || x === ''
+    const emptyY = y === null || y === undefined || y === ''
+    if (emptyX || emptyY) return emptyX === emptyY ? 0 : emptyX ? 1 : -1
+    if (typeof x === 'number' && typeof y === 'number') return (x - y) * factor
+    return collator.compare(String(x), String(y)) * factor
+  })
+}
+
+const csvCell = (value: unknown) => {
+  const text = value === null || value === undefined ? '' : String(value)
+  return /[",\n\r]/.test(text) ? `"${text.replace(/"/g, '""')}"` : text
+}
+
+/** The table as CSV - the heading row in the column labels, a BOM so a spreadsheet reads Korean. */
+export function tableCsv(columns: { name: string; label?: string }[], rows: Record<string, any>[]): string {
+  const lines = [columns.map(column => csvCell(column.label || column.name)).join(','), ...rows.map(row => columns.map(column => csvCell(row[column.name])).join(','))]
+  return '' + lines.join('\r\n')
+}

package/dist-client/components/assistant-chat.d.ts

@@ -540,6 +540,8 @@ export declare class OxAssistantChat extends LitElement {
      * 실행 결과는 호스트가 **대화에 기록**한다 — 누가 무엇을 실행했는지가 협의 이력에 남아야 한다.
      */
     private renderProposals;
+    /** The AI 작업판 card - what it holds, which version, and the way to open it. The person opens it; the model does not. */
+    private renderWorkspaceCard;
     /**
      * 눌린 카드가 말하는 것 — **호스트가 한 일**이고, 아직 모르면 모른다고 말한다.
      *

package/dist-client/components/assistant-chat.js

@@ -49,6 +49,7 @@ import { parseProposalOutcomeLine, parseProposalRequestLine, proposalCardState }
 import { availableTriggers } 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';
 function formatFileSize(bytes) {
     if (!bytes || bytes < 1024)
         return `${bytes || 0} B`;
@@ -3508,6 +3509,9 @@ let OxAssistantChat = 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';
@@ -3588,6 +3592,29 @@ let OxAssistantChat = class OxAssistantChat extends LitElement {
       </div>
     `;
     }
+    /** The AI 작업판 card - what it holds, which version, and the way to open it. The person opens it; the model does not. */
+    renderWorkspaceCard(p, key) {
+        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) })))
+            .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>
+    `;
+    }
     /**
      * 눌린 카드가 말하는 것 — **호스트가 한 일**이고, 아직 모르면 모른다고 말한다.
      *