@things-factory/ai-assistant 10.1.154 → 10.1.156

package/client/settings/ai-agent-setting-let.ts

@@ -0,0 +1,684 @@
+import '@material/web/icon/icon.js'
+import '@things-factory/setting-base/dist-client/layout/settinglet.js'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement, nothing } from 'lit'
+import { customElement, state } from 'lit/decorators.js'
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { OxPrompt } from '@operato/popup'
+import '@operato/popup/ox-popup-menu.js'
+import { OxPopupMenu } from '@operato/popup/ox-popup-menu.js'
+import { ButtonContainerStyles, FormFieldStyles } from '@operato/styles'
+
+import { providerLabel } from '../utils/agent-choice.js'
+import {
+  type AgentDraft,
+  type AgentSettings,
+  type AgentView,
+  draftOf,
+  groupByOwner,
+  saveInput,
+  type SaveChange
+} from './agent-settings-model.js'
+
+const t = (key: string, defaultValue: string, options: Record<string, unknown> = {}) =>
+  i18next.t(`ai-assistant.agent.${key}`, { ...options, defaultValue })
+
+const SETTINGS_QUERY = gql`
+  query AiAgentSettings {
+    aiAgentSettings {
+      chain {
+        id
+        name
+      }
+      agents {
+        id
+        name
+        provider
+        model
+        baseURL
+        organization
+        active
+        owner {
+          id
+          name
+        }
+        inherited
+        turnedOff
+        keyState
+        keyDomain {
+          id
+          name
+        }
+        keyHint
+        usable
+        isDefault
+        usedBelow {
+          id
+          name
+        }
+      }
+      defaultAgentId
+      defaultFrom
+      state
+      reason
+    }
+  }
+`
+
+const MODELS_QUERY = gql`
+  query AiProviderModels($provider: String!, $apiKey: String, $agentId: String, $baseURL: String, $organization: String) {
+    aiProviderModels(provider: $provider, apiKey: $apiKey, agentId: $agentId, baseURL: $baseURL, organization: $organization)
+  }
+`
+
+const SAVE_MUTATION = gql`
+  mutation SaveAiAgents($input: AiAgentsInput!) {
+    saveAiAgents(input: $input)
+  }
+`
+
+const PROVIDERS = ['openai', 'anthropic', 'gemini']
+
+type ModelList = { state: 'idle' | 'loading' | 'ready' | 'failed'; models: string[]; reason?: string }
+
+/**
+ * A domain's AI agents - the card in Settings › {domain} settings (design/ai/agent-settings.md §7-1, §7-2).
+ *
+ * The first line says whether AI works here and, if not, the one thing that is missing. The list is grouped by the
+ * domain that declared each agent: this domain's own, editable, then each domain above, read-only, closest first. A key
+ * is written and never shown again; the model is only ever picked from the list the provider gives that key.
+ */
+@customElement('ai-agent-setting-let')
+export class AiAgentSettingLet extends localize(i18next)(LitElement) {
+  static styles = [
+    /* The button look comes from the action bar's styles, which also restyle select and text inputs - the form
+       field rules come after them, so every field in the card has the standard field look. */
+    ButtonContainerStyles,
+    FormFieldStyles,
+    css`
+      :host {
+        display: block;
+      }
+      [slot='content'] {
+        display: grid;
+        gap: 12px;
+        text-transform: none;
+      }
+      .head {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .status {
+        flex: 1;
+        font-size: 12px;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      .status.off {
+        color: var(--md-sys-color-error);
+      }
+      .group-title {
+        margin: 4px 0 0;
+        font-size: 11px;
+        font-weight: 600;
+        color: var(--md-sys-color-on-surface-variant);
+        border-bottom: 1px solid var(--md-sys-color-outline-variant);
+        padding-bottom: 2px;
+      }
+      .row {
+        display: grid;
+        grid-template-columns: 20px minmax(100px, 1.2fr) 70px minmax(120px, 1.4fr) minmax(110px, 1fr) auto auto 28px;
+        align-items: center;
+        gap: 8px;
+        min-height: 32px;
+        font-size: 13px;
+      }
+      .row.muted > :not(.more-menu) {
+        opacity: 0.55;
+      }
+      .name {
+        font-weight: 600;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .model {
+        font-family: var(--md-sys-typescale-mono-font, monospace);
+        font-size: 12px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .key {
+        font-size: 12px;
+        white-space: nowrap;
+      }
+      .key.missing {
+        color: var(--md-sys-color-error);
+        font-weight: 600;
+      }
+      .use {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        font-size: 12px;
+        white-space: nowrap;
+      }
+      .below {
+        border: none;
+        background: none;
+        padding: 0;
+        height: auto;
+        font-size: 11px;
+        font-weight: 400;
+        color: var(--md-sys-color-primary);
+        cursor: pointer;
+      }
+      .more-menu {
+        border: none;
+        background: none;
+        height: auto;
+        padding: 2px 6px;
+        font-size: 14px;
+        font-weight: 400;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      form.editor {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 12px;
+        padding: 12px;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: var(--md-sys-shape-corner-small);
+        background: var(--md-sys-color-surface-container-lowest);
+      }
+      @media (max-width: 600px) {
+        form.editor {
+          grid-template-columns: 1fr;
+        }
+      }
+      form.editor label {
+        display: grid;
+        gap: 4px;
+        font-size: 11px;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      form.editor input,
+      form.editor select {
+        height: var(--form-element-height-medium, 32px);
+        box-sizing: border-box;
+        font-size: 13px;
+      }
+      .with-action {
+        display: flex;
+        gap: 4px;
+      }
+      .with-action > select {
+        flex: 1;
+        min-width: 0;
+      }
+      .hint {
+        font-size: 11px;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      .error {
+        font-size: 11.5px;
+        color: var(--md-sys-color-error);
+      }
+      details.advanced {
+        grid-column: 1 / -1;
+        font-size: 12px;
+      }
+      details.advanced[open] > div {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 12px;
+        margin-top: 8px;
+      }
+      .actions {
+        grid-column: 1 / -1;
+        display: flex;
+        justify-content: flex-end;
+        gap: 8px;
+      }
+      button.primary {
+        background: var(--md-sys-color-primary);
+        color: var(--md-sys-color-on-primary);
+        border-color: var(--md-sys-color-primary);
+      }
+      button.primary md-icon {
+        color: inherit;
+      }
+      .key-override {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+        padding: 8px 0 8px 28px;
+      }
+      .key-override input {
+        flex: 1;
+        height: var(--form-element-height-medium, 32px);
+        box-sizing: border-box;
+      }
+    `
+  ]
+
+  @state() private settings?: AgentSettings
+  @state() private loadFailed?: string
+  @state() private draft?: AgentDraft
+  @state() private models: ModelList = { state: 'idle', models: [] }
+  @state() private saving = false
+  @state() private saveError?: string
+  @state() private keyFor?: string
+  @state() private keyDraft = ''
+
+  connectedCallback() {
+    super.connectedCallback()
+    this.load()
+  }
+
+  private async load() {
+    this.loadFailed = undefined
+    try {
+      const response = await client.query({ query: SETTINGS_QUERY, fetchPolicy: 'network-only' })
+      this.settings = answered(response, 'aiAgentSettings')
+    } catch (error: any) {
+      this.loadFailed = messageOf(error)
+    }
+  }
+
+  render() {
+    return html`
+      <setting-let>
+        <div slot="title">${t('title', 'AI agents')}</div>
+        <div slot="content">${this.renderContent()}</div>
+      </setting-let>
+    `
+  }
+
+  private renderContent() {
+    if (this.loadFailed) {
+      return html`
+        <div class="head">
+          <span class="status off">${t('load-failed', 'Could not read the AI agents.')} ${this.loadFailed}</span>
+          <button type="button" @click=${() => this.load()}><md-icon>refresh</md-icon>${t('retry', 'Try again')}</button>
+        </div>
+      `
+    }
+    if (!this.settings) return html`<span class="status">${t('loading', 'Reading…')}</span>`
+
+    const groups = groupByOwner(this.settings)
+    return html`
+      <div class="head">
+        ${this.renderStatus()}
+        <button type="button" ?disabled=${!!this.draft || this.saving} @click=${() => this.startNew()}>
+          <md-icon>add</md-icon>${t('add', 'Agent')}
+        </button>
+      </div>
+      ${this.draft && !this.draft.id ? this.renderEditor() : nothing}
+      ${groups.map(
+        group => html`
+          ${groups.length > 1 || group.inherited
+            ? html`<div class="group-title">
+                ${group.inherited ? t('inherited-from', 'Inherited from {path}', { path: group.path }) : t('this-domain', 'This domain')}
+              </div>`
+            : nothing}
+          ${group.agents.map(agent => html`${this.renderRow(agent)} ${this.draft?.id === agent.id ? this.renderEditor() : nothing}
+          ${this.keyFor === agent.id ? this.renderKeyOverride(agent) : nothing}`)}
+        `
+      )}
+    `
+  }
+
+  private renderStatus() {
+    const settings = this.settings!
+    if (settings.state === 'configured') {
+      const usable = settings.agents.filter(one => one.usable).length
+      const chosen = settings.agents.find(one => one.id === settings.defaultAgentId)
+      return html`<span class="status">
+        ${t('status-on', 'AI is on here · {count} agents to pick · default {name}', { count: usable, name: chosen?.name ?? '' })}
+      </span>`
+    }
+    const why =
+      settings.reason === 'no-agent-key'
+        ? t('status-no-key', 'No agent has an API key, so AI is off here.')
+        : settings.reason === 'no-usable-agent'
+          ? t('status-all-off', 'Every agent is turned off, so AI is off here.')
+          : t('status-no-agent', 'There is no AI agent, so AI is off here.')
+    return html`<span class="status off">${why}</span>`
+  }
+
+  private renderRow(agent: AgentView) {
+    const settings = this.settings!
+    const editable = !agent.inherited
+    const muted = !agent.usable
+    return html`
+      <div class="row ${muted ? 'muted' : ''}">
+        <input
+          type="radio"
+          name="default"
+          aria-label=${t('default', 'Default')}
+          title=${t('default-hint', 'The agent a person gets before picking one')}
+          .checked=${agent.id === settings.defaultAgentId}
+          ?disabled=${!agent.usable || this.saving}
+          @change=${() => this.save({ kind: 'default', agentId: agent.id })} />
+        <span class="name" title=${agent.name}>${agent.name}</span>
+        <span>${providerLabel(agent.provider)}</span>
+        <span class="model" title=${agent.model}>${agent.model}</span>
+        ${this.renderKey(agent)}
+        ${editable
+          ? html`<label class="use">
+              <input type="checkbox" .checked=${agent.active} ?disabled=${this.saving} @change=${(e: Event) => this.onActive(agent, (e.target as HTMLInputElement).checked)} />
+              ${t('use', 'Use')}
+            </label>`
+          : html`<label class="use">
+              <input type="checkbox" .checked=${!agent.turnedOff} ?disabled=${this.saving} @change=${(e: Event) => this.save({ kind: 'turn-off', agentId: agent.id, off: !(e.target as HTMLInputElement).checked })} />
+              ${t('use-here', 'Use here')}
+            </label>`}
+        ${editable && agent.usedBelow.length
+          ? html`<button type="button" class="below" title=${agent.usedBelow.map(one => one.name).join(', ')} @click=${() => this.showUsers(agent)}>
+              ${t('used-below', '{count} below', { count: agent.usedBelow.length })}
+            </button>`
+          : html`<span></span>`}
+        ${this.renderMenu(agent)}
+      </div>
+    `
+  }
+
+  private renderKey(agent: AgentView) {
+    switch (agent.keyState) {
+      case 'own':
+        return html`<span class="key">${agent.keyHint}</span>`
+      case 'overridden':
+        return html`<span class="key">${t('key-this-domain', 'This domain\'s key {hint}', { hint: agent.keyHint ?? '' })}</span>`
+      case 'inherited':
+        return html`<span class="key">${t('key-of', '{domain} key', { domain: agent.keyDomain?.name ?? '' })}</span>`
+      default:
+        return html`<span class="key missing">${t('key-missing', 'No key')}</span>`
+    }
+  }
+
+  /** The row's actions in the platform's popup menu - one at a time, closed by a press outside or Escape. */
+  private renderMenu(agent: AgentView) {
+    return html`<button
+      type="button"
+      class="more-menu"
+      aria-label=${t('more', 'More')}
+      title=${t('more', 'More')}
+      ?disabled=${this.saving}
+      @click=${(e: MouseEvent) => this.openMenu(e, agent)}>⋯</button>`
+  }
+
+  private openMenu(event: MouseEvent, agent: AgentView) {
+    const at = (event.currentTarget as HTMLElement).getBoundingClientRect()
+    OxPopupMenu.open({
+      template: agent.inherited
+        ? html`
+            <ox-popup-menuitem
+              label=${agent.keyState === 'overridden' ? t('replace-own-key', "Replace this domain's key") : t('use-own-key', "Use this domain's key")}
+              @select=${() => this.startKeyOverride(agent)}></ox-popup-menuitem>
+            ${agent.keyState === 'overridden'
+              ? html`<ox-popup-menuitem
+                  label=${t('back-to-key', 'Back to the {domain} key', { domain: agent.owner.name })}
+                  @select=${() => this.clearKeyOverride(agent)}></ox-popup-menuitem>`
+              : nothing}
+          `
+        : html`
+            ${this.draft ? nothing : html`<ox-popup-menuitem label=${t('edit', 'Edit')} @select=${() => this.startEdit(agent)}></ox-popup-menuitem>`}
+            <ox-popup-menuitem label=${t('delete', 'Delete')} @select=${() => this.deleteAgent(agent)}></ox-popup-menuitem>
+          `,
+      top: at.bottom,
+      right: window.innerWidth - at.right,
+      parent: document.body
+    })
+  }
+
+  private renderKeyOverride(agent: AgentView) {
+    return html`
+      <div class="key-override">
+        <input
+          type="password"
+          autocomplete="new-password"
+          placeholder=${t('key-placeholder', 'API key of this domain')}
+          .value=${this.keyDraft}
+          @input=${(e: Event) => (this.keyDraft = (e.target as HTMLInputElement).value)} />
+        <button type="button" @click=${() => ((this.keyFor = undefined), (this.keyDraft = ''))}>${t('cancel', 'Cancel')}</button>
+        <button type="button" class="primary" ?disabled=${!this.keyDraft.trim() || this.saving} @click=${() => this.save({ kind: 'key-override', agentId: agent.id, apiKey: this.keyDraft.trim() })}>
+          ${t('save', 'Save')}
+        </button>
+      </div>
+      ${this.saveError ? html`<div class="error">${this.saveError}</div>` : nothing}
+    `
+  }
+
+  private renderEditor() {
+    const draft = this.draft!
+    const stored = this.settings!.agents.find(one => one.id === draft.id)
+    const hasStoredKey = !!stored && stored.keyState === 'own' && draft.provider === stored.provider
+    const modelLocked = !draft.apiKey.trim() && !hasStoredKey
+    const offered = this.models.state === 'ready' ? this.models.models : []
+    const modelGone = this.models.state === 'ready' && !!draft.model && !offered.includes(draft.model)
+    const canSave = !!draft.name.trim() && !!draft.model && !modelLocked && !modelGone && this.models.state === 'ready' && !this.saving
+
+    return html`
+      <form class="editor" @submit=${(e: Event) => (e.preventDefault(), canSave && this.save({ kind: 'upsert', draft }))}>
+        <label>
+          ${t('name', 'Name')}
+          <input .value=${draft.name} @input=${(e: Event) => this.patch({ name: (e.target as HTMLInputElement).value })} />
+        </label>
+        <label>
+          ${t('provider', 'Provider')}
+          <select @change=${(e: Event) => this.onProvider((e.target as HTMLSelectElement).value)}>
+            ${PROVIDERS.map(one => html`<option value=${one} ?selected=${one === draft.provider}>${providerLabel(one)}</option>`)}
+          </select>
+        </label>
+        <label>
+          ${t('api-key', 'API key')}
+          <input
+            type="password"
+            autocomplete="new-password"
+            placeholder=${hasStoredKey ? t('key-stored', 'Stored key {hint} - enter only to change it', { hint: stored?.keyHint ?? '' }) : ''}
+            .value=${draft.apiKey}
+            @input=${(e: Event) => this.patch({ apiKey: (e.target as HTMLInputElement).value })}
+            @change=${() => this.loadModels()} />
+        </label>
+        <label>
+          ${t('model', 'Model')}
+          <span class="with-action">
+            <select ?disabled=${modelLocked || this.models.state !== 'ready'} @change=${(e: Event) => this.patch({ model: (e.target as HTMLSelectElement).value })}>
+              ${!draft.model || modelGone ? html`<option value="" selected disabled>${modelGone ? draft.model : t('pick-model', 'Pick a model')}</option>` : nothing}
+              ${offered.map(one => html`<option value=${one} ?selected=${one === draft.model}>${one}</option>`)}
+            </select>
+            <button type="button" aria-label=${t('reload-models', 'Read the models again')} title=${t('reload-models', 'Read the models again')} ?disabled=${modelLocked || this.models.state === 'loading'} @click=${() => this.loadModels()}>
+              <md-icon>refresh</md-icon>
+            </button>
+          </span>
+          ${modelLocked
+            ? html`<span class="hint">${t('enter-key-first', 'Enter the API key to pick a model.')}</span>`
+            : this.models.state === 'loading'
+              ? html`<span class="hint">${t('reading-models', 'Reading the provider\'s models…')}</span>`
+              : this.models.state === 'failed'
+                ? html`<span class="error">${this.models.reason}</span>`
+                : modelGone
+                  ? html`<span class="error">${t('model-gone', 'The provider no longer offers this model. Pick another.')}</span>`
+                  : nothing}
+        </label>
+        <details class="advanced" ?open=${!!(draft.baseURL || draft.organization)}>
+          <summary>${t('advanced', 'Advanced')}</summary>
+          <div>
+            <label>
+              ${t('base-url', 'Base URL')}
+              <input .value=${draft.baseURL} placeholder="https://" @input=${(e: Event) => this.patch({ baseURL: (e.target as HTMLInputElement).value })} @change=${() => this.loadModels()} />
+            </label>
+            ${draft.provider === 'openai'
+              ? html`<label>
+                  ${t('organization', 'Organization')}
+                  <input .value=${draft.organization} @input=${(e: Event) => this.patch({ organization: (e.target as HTMLInputElement).value })} @change=${() => this.loadModels()} />
+                </label>`
+              : nothing}
+          </div>
+        </details>
+        ${this.saveError ? html`<div class="error" style="grid-column: 1 / -1">${this.saveError}</div>` : nothing}
+        <div class="actions">
+          <button type="button" @click=${() => this.cancelEdit()}>${t('cancel', 'Cancel')}</button>
+          <button type="submit" class="primary" ?disabled=${!canSave}>${t('save', 'Save')}</button>
+        </div>
+      </form>
+    `
+  }
+
+  private startNew() {
+    this.saveError = undefined
+    this.draft = draftOf()
+    this.models = { state: 'idle', models: [] }
+  }
+
+  private startEdit(agent: AgentView) {
+    this.saveError = undefined
+    this.draft = draftOf(agent)
+    this.loadModels()
+  }
+
+  private cancelEdit() {
+    this.draft = undefined
+    this.saveError = undefined
+    this.models = { state: 'idle', models: [] }
+  }
+
+  private patch(change: Partial<AgentDraft>) {
+    this.draft = { ...this.draft!, ...change }
+  }
+
+  /** A provider decides the model list, so changing it empties the model. */
+  private onProvider(provider: string) {
+    this.patch({ provider, model: '', organization: provider === 'openai' ? this.draft!.organization : '' })
+    this.models = { state: 'idle', models: [] }
+    this.loadModels()
+  }
+
+  private modelsToken = 0
+
+  private async loadModels() {
+    const draft = this.draft
+    if (!draft) return
+    const stored = this.settings?.agents.find(one => one.id === draft.id && !one.inherited)
+    const useStored = !draft.apiKey.trim() && stored?.keyState === 'own' && stored.provider === draft.provider
+    if (!draft.apiKey.trim() && !useStored) {
+      this.models = { state: 'idle', models: [] }
+      return
+    }
+    const token = ++this.modelsToken
+    this.models = { state: 'loading', models: [] }
+    try {
+      const response = await client.query({
+        query: MODELS_QUERY,
+        fetchPolicy: 'network-only',
+        variables: {
+          provider: draft.provider,
+          ...(draft.apiKey.trim() ? { apiKey: draft.apiKey.trim() } : { agentId: draft.id }),
+          ...(draft.baseURL.trim() && { baseURL: draft.baseURL.trim() }),
+          ...(draft.organization.trim() && { organization: draft.organization.trim() })
+        }
+      })
+      if (token !== this.modelsToken) return
+      this.models = { state: 'ready', models: answered(response, 'aiProviderModels') ?? [] }
+    } catch (error: any) {
+      if (token !== this.modelsToken) return
+      this.models = { state: 'failed', models: [], reason: messageOf(error) }
+    }
+  }
+
+  private startKeyOverride(agent: AgentView) {
+    this.saveError = undefined
+    this.keyDraft = ''
+    this.keyFor = agent.id
+  }
+
+  private async clearKeyOverride(agent: AgentView) {
+    const accepted = await confirm(
+      t('back-to-key-title', 'Go back to the {domain} key?', { domain: agent.owner.name }),
+      t('back-to-key-text', 'This domain\'s key for "{name}" is deleted, and the key of {domain} answers again.', {
+        name: agent.name,
+        domain: agent.owner.name
+      })
+    )
+    if (accepted) await this.save({ kind: 'key-clear', agentId: agent.id })
+  }
+
+  /** Turning an agent off reaches every domain below that uses it - they are named before it happens. */
+  private async onActive(agent: AgentView, active: boolean) {
+    if (!active && agent.usedBelow.length) {
+      const accepted = await confirm(
+        t('turn-off-title', 'Turn "{name}" off?', { name: agent.name }),
+        t('turn-off-text', 'It stops answering here and in {domains}.', { domains: agent.usedBelow.map(one => one.name).join(', ') })
+      )
+      if (!accepted) return this.requestUpdate()
+    }
+    await this.save({ kind: 'active', agentId: agent.id, active })
+  }
+
+  private async deleteAgent(agent: AgentView) {
+    const below = agent.usedBelow.length
+      ? ' ' + t('delete-below', 'It also stops answering in {domains}.', { domains: agent.usedBelow.map(one => one.name).join(', ') })
+      : ''
+    const accepted = await confirm(
+      t('delete-title', 'Delete "{name}"?', { name: agent.name }),
+      t('delete-text', 'Its API key is deleted with it. Usage already recorded stays.') + below
+    )
+    if (accepted) await this.save({ kind: 'delete', agentId: agent.id })
+  }
+
+  private async showUsers(agent: AgentView) {
+    await OxPrompt.open({
+      type: 'info',
+      title: t('used-below-title', 'Domains below using "{name}"', { name: agent.name }),
+      text: agent.usedBelow.map(one => one.name).join(', '),
+      confirmButton: { text: t('close', 'Close') }
+    })
+  }
+
+  private async save(change: SaveChange) {
+    this.saving = true
+    this.saveError = undefined
+    try {
+      answered(await client.mutate({ mutation: SAVE_MUTATION, variables: { input: saveInput(this.settings!, change) } }), 'saveAiAgents')
+      if (change.kind === 'upsert') this.cancelEdit()
+      if (change.kind === 'key-override') ((this.keyFor = undefined), (this.keyDraft = ''))
+      await this.load()
+    } catch (error: any) {
+      this.saveError = messageOf(error)
+      if (change.kind !== 'upsert' && change.kind !== 'key-override') {
+        await OxPrompt.open({ type: 'error', title: t('save-failed', 'Not saved'), text: this.saveError, confirmButton: { text: t('close', 'Close') } })
+        await this.load()
+      }
+    } finally {
+      this.saving = false
+    }
+  }
+}
+
+/**
+ * The data of a query or mutation. This client answers a refusal in `errors` (errorPolicy 'all') instead of
+ * throwing, so it is turned into a throw here - the server's sentence, already in the person's language.
+ */
+function answered(result: any, field: string): any {
+  if (result?.errors?.length) throw new Error(result.errors[0].message)
+  return result?.data?.[field]
+}
+
+async function confirm(title: string, text: string): Promise<boolean> {
+  return !!(await OxPrompt.open({
+    type: 'warning',
+    title,
+    text,
+    confirmButton: { text: t('confirm', 'Confirm') },
+    cancelButton: { text: t('cancel', 'Cancel') }
+  }))
+}
+
+/** The server's sentence for a refusal - already in the person's language. */
+function messageOf(error: any): string {
+  return error?.graphQLErrors?.[0]?.message ?? error?.message ?? String(error)
+}