@things-factory/ai-dashboard 10.1.255 → 10.1.257

package/client/components/card-dialogs.ts

@@ -7,15 +7,17 @@ import '@material/web/button/filled-button.js'
 import '@material/web/button/text-button.js'
 import '@operato/popup/ox-popup-actions.js'
 
+import gql from 'graphql-tag'
 import { LitElement, css, html, nothing } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 
+import { QueryController } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { notify, openPopup } from '@operato/layout'
 import { CommonPopupStyles, PopupBodyStyles } from '@operato/styles'
 import { askAssistant } from '@things-factory/ai-assistant/dist-client/index.js'
 
-import { cardApi, dashboardChanged, type CardItem, type CardShare } from '../utils/card-api.js'
+import { cardApi, dashboardChanged, type CardItem, type CardShare, type CardVersion, type ShareOptions } from '../utils/card-api.js'
 import { cardSelection } from '../utils/card-words.js'
 
 const t = (key: string, options: Record<string, unknown> = {}) => String(i18next.t(key, options))
@@ -270,20 +272,31 @@ export class CardRenameForm extends localize(i18next)(LitElement) {
 export class CardShareForm extends localize(i18next)(LitElement) {
   static styles = [CommonPopupStyles, PopupBodyStyles, FormStyles]
   @property({ attribute: false }) card!: CardItem
-  @state() private options?: Awaited<ReturnType<typeof cardApi.shareOptions>>
   @state() private shares: CardShare[] = []
-  @state() private found: { id: string; name: string; note?: string }[] = []
   @state() private search = ''
+  /** The name the people are found by - the typed text once typing pauses. */
+  @state() private findBy = ''
   private searching?: ReturnType<typeof setTimeout>
 
-  async connectedCallback() {
+  private optionsRead = new QueryController(
+    this,
+    gql`query { dashboardShareOptions { domainId domainName departments { id name } peopleAvailable roles { id name note } } }`
+  )
+  private peopleRead = new QueryController(this, gql`query ($text: String!) { dashboardSharePeople(text: $text) { id name note } }`, {
+    variables: () => (this.findBy ? { text: this.findBy } : undefined)
+  })
+
+  private get options(): ShareOptions | undefined {
+    return this.optionsRead.data?.dashboardShareOptions
+  }
+
+  private get found(): { id: string; name: string; note?: string }[] {
+    return this.peopleRead.data?.dashboardSharePeople ?? []
+  }
+
+  connectedCallback() {
     super.connectedCallback()
     this.shares = [...(this.card?.shares ?? [])].map(({ scope, targetId, targetName }) => ({ scope, targetId, targetName }))
-    try {
-      this.options = await cardApi.shareOptions()
-    } catch (error: any) {
-      notify({ level: 'error', message: error?.message ?? String(error) })
-    }
   }
 
   private has(scope: string, id: string) {
@@ -297,13 +310,7 @@ export class CardShareForm extends localize(i18next)(LitElement) {
   private find(text: string) {
     this.search = text
     clearTimeout(this.searching)
-    this.searching = setTimeout(async () => {
-      try {
-        this.found = text.trim() ? await cardApi.people(text.trim()) : []
-      } catch {
-        this.found = []
-      }
-    }, 250)
+    this.searching = setTimeout(() => (this.findBy = text.trim()), 250)
   }
 
   render() {
@@ -381,15 +388,15 @@ export class CardShareForm extends localize(i18next)(LitElement) {
 export class CardVersions extends localize(i18next)(LitElement) {
   static styles = [CommonPopupStyles, PopupBodyStyles, FormStyles]
   @property({ attribute: false }) card!: CardItem
-  @state() private versions?: Awaited<ReturnType<typeof cardApi.versions>>
 
-  async connectedCallback() {
-    super.connectedCallback()
-    try {
-      this.versions = await cardApi.versions(this.card.id)
-    } catch (error: any) {
-      notify({ level: 'error', message: error?.message ?? String(error) })
-    }
+  private versionsRead = new QueryController(
+    this,
+    gql`query ($id: String!) { dashboardCardVersions(id: $id) { version name definition creatorName createdAt } }`,
+    { variables: () => (this.card ? { id: this.card.id } : undefined) }
+  )
+
+  private get versions(): CardVersion[] | undefined {
+    return this.versionsRead.data?.dashboardCardVersions
   }
 
   render() {

package/client/components/card-library.ts

@@ -6,15 +6,17 @@ import '@material/web/icon/icon.js'
 import '@material/web/button/filled-tonal-button.js'
 import '@material/web/button/text-button.js'
 
+import gql from 'graphql-tag'
 import { LitElement, css, html, nothing } from 'lit'
 import { customElement, state } from 'lit/decorators.js'
 
+import { QueryController } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { ScrollbarStyles } from '@operato/styles'
 import { notify } from '@operato/layout'
 import { OxPrompt } from '@operato/popup/ox-prompt.js'
 
-import { cardApi, DASHBOARD_CHANGED, dashboardChanged, type CardItem } from '../utils/card-api.js'
+import { cardApi, CARD_FIELDS, DASHBOARD_CHANGED, dashboardChanged, type CardItem } from '../utils/card-api.js'
 import { ownershipLine, viewIcon } from '../utils/card-words.js'
 import { openCardRename, openCardShare, openCardVersions } from './card-dialogs.js'
 
@@ -179,15 +181,28 @@ export class CardLibrary extends localize(i18next)(LitElement) {
   ]
 
   @state() private which: 'mine' | 'shared' = 'mine'
-  @state() private cards?: CardItem[]
-  @state() private error?: string
 
-  private onChanged = () => this.load()
+  /* The tab's cards (ADR-0190); a change told from elsewhere reads them again. */
+  private library = new QueryController(
+    this,
+    gql`query ($which: String!) { dashboardCards(which: $which) { ${CARD_FIELDS} } }`,
+    { variables: () => ({ which: this.which }) }
+  )
+
+  private get cards(): CardItem[] | undefined {
+    return this.library.data?.dashboardCards
+  }
+
+  private get error(): string | undefined {
+    const error = this.library.error as any
+    return error ? (error.message ?? String(error)) : undefined
+  }
+
+  private onChanged = () => this.library.refetch()
 
   connectedCallback() {
     super.connectedCallback()
     window.addEventListener(DASHBOARD_CHANGED, this.onChanged)
-    this.load()
   }
 
   disconnectedCallback() {
@@ -195,19 +210,8 @@ export class CardLibrary extends localize(i18next)(LitElement) {
     super.disconnectedCallback()
   }
 
-  private async load() {
-    try {
-      this.cards = await cardApi.library(this.which)
-      this.error = undefined
-    } catch (error: any) {
-      this.error = error?.message ?? String(error)
-    }
-  }
-
   private show(which: 'mine' | 'shared') {
     this.which = which
-    this.cards = undefined
-    this.load()
   }
 
   render() {

package/client/components/dashboard-card.ts

@@ -7,13 +7,15 @@ 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 { customElement, property } from 'lit/decorators.js'
 
+import gql from 'graphql-tag'
+import { QueryController } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import '@operato/popup/ox-popup-menu.js'
 import { OxPopupMenu } from '@operato/popup/ox-popup-menu.js'
 
-import { cardApi, type CardItem, type CardRun } from '../utils/card-api.js'
+import { 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))
@@ -280,36 +282,39 @@ export class AiDashboardCard extends localize(i18next)(LitElement) {
   @property({ type: Boolean }) first = false
   @property({ type: Boolean }) last = false
 
-  @state() private run?: CardRun
-  @state() private failed?: string
-  @state() private loading = false
-  @state() private readAt?: Date
+  /* The card drawn from the data - the server runs its definition as the viewer (ADR-0190). */
+  private cardRun = new QueryController(
+    this,
+    gql`
+      query ($id: String!) {
+        dashboardCardRun(id: $id)
+      }
+    `,
+    { variables: () => (this.card ? { id: this.card.id } : undefined) }
+  )
+
+  private get run(): CardRun | undefined {
+    return this.cardRun.data?.dashboardCardRun
+  }
 
-  private readingFor?: string
+  private get failed() {
+    const error = this.cardRun.error as any
+    return error ? (error.message ?? String(error)) : undefined
+  }
+
+  private get loading() {
+    return this.cardRun.loading
+  }
 
   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()
+    /* A new version of the same card is read again; a new card is read by its own variables. */
+    const old = changes.get('card') as CardItem | undefined
+    if (old && this.card && old.id === this.card.id && old.version !== this.card.version) 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
-    }
+  /** Draws the card again from the data. */
+  refresh() {
+    return this.cardRun.refetch()
   }
 
   private act(action: CardAction) {
@@ -384,7 +389,7 @@ export class AiDashboardCard extends localize(i18next)(LitElement) {
   private renderFooter() {
     const partial = partialLine(this.run!, t)
     return html`<footer>
-      <span>${readLine(this.run!, this.readAt ?? new Date(), t, i18next.language)}</span>
+      <span>${readLine(this.run!, this.cardRun.answeredAt ?? new Date(), t, i18next.language)}</span>
       ${partial ? html`<span class="partial"><md-icon>warning</md-icon>${partial}</span>` : nothing}
     </footer>`
   }

package/client/components/proposal-preview.ts

@@ -6,12 +6,14 @@
 import '@material/web/icon/icon.js'
 import '@things-factory/ai-assistant/dist-client/index.js'
 
+import gql from 'graphql-tag'
 import { LitElement, css, html, nothing } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
+import { customElement, property } from 'lit/decorators.js'
 
+import { QueryController } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 
-import { cardApi, type CardRun } from '../utils/card-api.js'
+import { 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))
@@ -59,23 +61,20 @@ export class ProposalPreview extends localize(i18next)(LitElement) {
   @property({ attribute: false }) sessionId?: string
   @property({ attribute: false }) proposalKey?: string
 
-  @state() private run?: CardRun
-  @state() private failed?: string
-  private readFor?: string
+  /* The proposal run as the viewer, for the proposal shown (ADR-0190). */
+  private preview = new QueryController(
+    this,
+    gql`query ($s: String!, $k: String!) { dashboardCardProposalPreview(sessionId: $s, proposalKey: $k) }`,
+    { variables: () => (this.sessionId && this.proposalKey ? { s: this.sessionId, k: this.proposalKey } : undefined) }
+  )
 
-  updated() {
-    const key = this.sessionId && this.proposalKey ? `${this.sessionId}/${this.proposalKey}` : undefined
-    if (key && key !== this.readFor) this.read(key)
+  private get run(): CardRun | undefined {
+    return this.preview.data?.dashboardCardProposalPreview
   }
 
-  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)
-    }
+  private get failed(): string | undefined {
+    const error = this.preview.error as any
+    return error ? (error.message ?? String(error)) : undefined
   }
 
   render() {

package/client/pages/my-dashboard-page.ts

@@ -9,16 +9,18 @@ import '@material/web/icon/icon.js'
 import '../components/dashboard-card.js'
 import '../components/card-library.js'
 
+import gql from 'graphql-tag'
 import { css, html, nothing } from 'lit'
 import { customElement, state } from 'lit/decorators.js'
 
+import { MutationController, QueryController } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { notify, openPopup } from '@operato/layout'
 import { PageView } from '@operato/shell'
 import { DocumentPageStyles, ScrollbarStyles } from '@operato/styles'
 import { askAssistant } from '@things-factory/ai-assistant/dist-client/index.js'
 
-import { cardApi, DASHBOARD_CHANGED, dashboardChanged, type CardItem, type PlaceItem } from '../utils/card-api.js'
+import { cardApi, CARD_FIELDS, DASHBOARD_CHANGED, dashboardChanged, type CardItem, type PlaceItem } from '../utils/card-api.js'
 import { movedPlaces } from '../utils/card-words.js'
 import { dashboardExamples } from '../utils/examples.js'
 import { openCardAiPrompt, openCardRename, openCardShare, openCardVersions } from '../components/card-dialogs.js'
@@ -199,12 +201,33 @@ export class MyDashboardPage extends localize(i18next)(PageView) {
     `
   ]
 
-  @state() private places: PlaceItem[] = []
-  @state() private loaded = false
-  @state() private error?: string
   @state() private editing = false
+  /** The places as moved here, shown while the move is being saved. */
+  @state() private arranged?: PlaceItem[]
+
+  /* A page refresh, or a change told from elsewhere, reads the board again. */
+  private board = new QueryController(this, gql`query { myDashboard { id order width height card { ${CARD_FIELDS} } } }`)
+  private arranging = new MutationController(this, gql`mutation ($places: [DashboardPlaceInput!]!) { arrangeDashboard(places: $places) }`, {
+    refetch: () => [this.board]
+  })
+  private unplacing = new MutationController(this, gql`mutation ($id: String!) { removeDashboardPlace(id: $id) }`, {
+    refetch: () => [this.board]
+  })
+
+  private get places(): PlaceItem[] {
+    return (this.arranging.pending && this.arranged) || this.board.data?.myDashboard || []
+  }
+
+  private get loaded() {
+    return !!this.board.answeredAt
+  }
+
+  private get error(): string | undefined {
+    const error = this.board.error as any
+    return error ? (error.message ?? String(error)) : undefined
+  }
 
-  private onChanged = () => this.load()
+  private onChanged = () => this.board.refetch()
 
   get context() {
     return {
@@ -233,22 +256,6 @@ export class MyDashboardPage extends localize(i18next)(PageView) {
     if (changes.has('editing')) this.updateContext()
   }
 
-  /* Not awaited: the shell sets the tab's title only after this returns. */
-  async pageUpdated(changes: any) {
-    if ((this as any).active && changes.active) this.load()
-  }
-
-  private async load() {
-    try {
-      this.places = await cardApi.myDashboard()
-      this.error = undefined
-    } catch (error: any) {
-      this.error = error?.message ?? String(error)
-    } finally {
-      this.loaded = true
-    }
-  }
-
   render() {
     return html`<div class="page">
       ${this.error
@@ -319,15 +326,10 @@ export class MyDashboardPage extends localize(i18next)(PageView) {
     return this.places.find(one => one.card.id === card.id)
   }
 
+  /* The board shows the move at once; a failed one goes back to the board read. */
   private async arrange(next: PlaceItem[]) {
-    const before = this.places
-    this.places = next
-    try {
-      await cardApi.arrange(next.map(({ id, order, width, height }) => ({ id, order, width, height })))
-    } catch (error: any) {
-      this.places = before
-      notify({ level: 'error', message: error?.message ?? String(error) })
-    }
+    this.arranged = next
+    await this.arranging.run({ places: next.map(({ id, order, width, height }) => ({ id, order, width, height })) })
   }
 
   private async onCardAction(event: CustomEvent) {
@@ -349,9 +351,8 @@ export class MyDashboardPage extends localize(i18next)(PageView) {
           return dashboardChanged()
         case 'unplace':
           if (!place) return
-          await cardApi.unplace(place.id)
-          notify({ level: 'info', message: t('ai-dashboard.text.unplaced', { name: card.name }) })
-          return this.load()
+          if (await this.unplacing.run({ id: place.id })) notify({ level: 'info', message: t('ai-dashboard.text.unplaced', { name: card.name }) })
+          return
         case 'left':
         case 'right':
           return place && this.arrange(movedPlaces(this.places, place.id, action === 'left' ? -1 : 1))

package/client/utils/card-api.ts

@@ -1,6 +1,6 @@
 /*
- * The doors the dashboard screens call (server: card-resolver.ts). One place, so the page, the library and the
- * conversation's card read the same fields.
+ * The dashboard's changes (server: card-resolver.ts), and the card fields the screens read - one place, so the page,
+ * the library and the conversation's card read the same fields. Each screen declares its own reads (ADR-0190).
  */
 import gql from 'graphql-tag'
 
@@ -50,56 +50,45 @@ export interface CardRun {
   source?: { key: string; labelKey?: string }
 }
 
-const CARD_FIELDS = `id name description version definition access ownerName copiedFromId placed shares { scope targetId targetName } updatedAt`
+export interface ShareOptions {
+  domainId: string
+  domainName: string
+  departments: { id: string; name: string }[]
+  peopleAvailable: boolean
+  roles: { id: string; name: string; note?: string | null }[]
+}
 
-async function ask<T>(document: string, variables: Record<string, unknown> = {}, mutate = false): Promise<T> {
-  const response: any = mutate
-    ? await client.mutate({ mutation: gql(document), variables })
-    : await client.query({ query: gql(document), variables, fetchPolicy: 'no-cache' })
+export interface CardVersion {
+  version: number
+  name: string
+  definition: any
+  creatorName?: string
+  createdAt?: string
+}
+
+export const CARD_FIELDS = `id name description version definition access ownerName copiedFromId placed shares { scope targetId targetName } updatedAt`
+
+async function ask<T>(document: string, variables: Record<string, unknown> = {}): Promise<T> {
+  const response: any = await client.mutate({ mutation: gql(document), variables })
   if (response.errors?.length) throw new Error(response.errors[0].message)
   return response.data
 }
 
 export const cardApi = {
-  myDashboard: async () => (await ask<any>(`query { myDashboard { id order width height card { ${CARD_FIELDS} } } }`)).myDashboard as PlaceItem[],
-  library: async (which: 'mine' | 'shared') => (await ask<any>(`query ($which: String!) { dashboardCards(which: $which) { ${CARD_FIELDS} } }`, { which })).dashboardCards as CardItem[],
-  run: async (id: string) => (await ask<any>(`query ($id: String!) { dashboardCardRun(id: $id) }`, { id })).dashboardCardRun as CardRun,
-  preview: async (sessionId: string, proposalKey: string) =>
-    (await ask<any>(`query ($s: String!, $k: String!) { dashboardCardProposalPreview(sessionId: $s, proposalKey: $k) }`, { s: sessionId, k: proposalKey })).dashboardCardProposalPreview as CardRun,
-  versions: async (id: string) =>
-    (await ask<any>(`query ($id: String!) { dashboardCardVersions(id: $id) { version name definition creatorName createdAt } }`, { id })).dashboardCardVersions as {
-      version: number
-      name: string
-      definition: any
-      creatorName?: string
-      createdAt?: string
-    }[],
-  shareOptions: async () =>
-    (await ask<any>(`query { dashboardShareOptions { domainId domainName departments { id name } peopleAvailable roles { id name note } } }`)).dashboardShareOptions as {
-      domainId: string
-      domainName: string
-      departments: { id: string; name: string }[]
-      peopleAvailable: boolean
-      roles: { id: string; name: string; note?: string | null }[]
-    },
-  people: async (text: string) => (await ask<any>(`query ($text: String!) { dashboardSharePeople(text: $text) { id name note } }`, { text })).dashboardSharePeople as { id: string; name: string; note?: string }[],
   saveProposal: async (sessionId: string, proposalKey: string) =>
-    (await ask<any>(`mutation ($s: String!, $k: String!) { saveDashboardCardProposal(sessionId: $s, proposalKey: $k) }`, { s: sessionId, k: proposalKey }, true)).saveDashboardCardProposal as {
+    (await ask<any>(`mutation ($s: String!, $k: String!) { saveDashboardCardProposal(sessionId: $s, proposalKey: $k) }`, { s: sessionId, k: proposalKey })).saveDashboardCardProposal as {
       cardId: string
       version: number
       placeId: string
       again?: boolean
     },
-  rename: async (id: string, name: string) => (await ask<any>(`mutation ($id: String!, $name: String!) { renameDashboardCard(id: $id, name: $name) { id } }`, { id, name }, true)).renameDashboardCard,
-  restore: async (id: string, version: number) => (await ask<any>(`mutation ($id: String!, $v: Int!) { restoreDashboardCardVersion(id: $id, version: $v) { id } }`, { id, v: version }, true)).restoreDashboardCardVersion,
-  copy: async (id: string) => (await ask<any>(`mutation ($id: String!) { copyDashboardCard(id: $id) { id } }`, { id }, true)).copyDashboardCard,
-  remove: async (id: string) => (await ask<any>(`mutation ($id: String!) { deleteDashboardCard(id: $id) }`, { id }, true)).deleteDashboardCard,
+  rename: async (id: string, name: string) => (await ask<any>(`mutation ($id: String!, $name: String!) { renameDashboardCard(id: $id, name: $name) { id } }`, { id, name })).renameDashboardCard,
+  restore: async (id: string, version: number) => (await ask<any>(`mutation ($id: String!, $v: Int!) { restoreDashboardCardVersion(id: $id, version: $v) { id } }`, { id, v: version })).restoreDashboardCardVersion,
+  copy: async (id: string) => (await ask<any>(`mutation ($id: String!) { copyDashboardCard(id: $id) { id } }`, { id })).copyDashboardCard,
+  remove: async (id: string) => (await ask<any>(`mutation ($id: String!) { deleteDashboardCard(id: $id) }`, { id })).deleteDashboardCard,
   share: async (id: string, shares: CardShare[]) =>
-    (await ask<any>(`mutation ($id: String!, $shares: [DashboardCardShareInput!]!) { shareDashboardCard(id: $id, shares: $shares) { ${CARD_FIELDS} } }`, { id, shares }, true)).shareDashboardCard as CardItem,
-  place: async (cardId: string) => (await ask<any>(`mutation ($id: String!) { placeDashboardCard(cardId: $id) { id } }`, { id: cardId }, true)).placeDashboardCard,
-  unplace: async (id: string) => (await ask<any>(`mutation ($id: String!) { removeDashboardPlace(id: $id) }`, { id }, true)).removeDashboardPlace,
-  arrange: async (places: { id: string; order: number; width: number; height: number }[]) =>
-    (await ask<any>(`mutation ($places: [DashboardPlaceInput!]!) { arrangeDashboard(places: $places) }`, { places }, true)).arrangeDashboard
+    (await ask<any>(`mutation ($id: String!, $shares: [DashboardCardShareInput!]!) { shareDashboardCard(id: $id, shares: $shares) { ${CARD_FIELDS} } }`, { id, shares })).shareDashboardCard as CardItem,
+  place: async (cardId: string) => (await ask<any>(`mutation ($id: String!) { placeDashboardCard(cardId: $id) { id } }`, { id: cardId })).placeDashboardCard
 }
 
 /** Told when a card is saved, copied, placed or removed elsewhere - an open dashboard reads itself again. */

package/dist-client/components/card-dialogs.d.ts

@@ -30,12 +30,16 @@ declare const CardShareForm_base: (new (...args: any[]) => LitElement) & typeof
 export declare class CardShareForm extends CardShareForm_base {
     static styles: import("lit").CSSResult[];
     card: CardItem;
-    private options?;
     private shares;
-    private found;
     private search;
+    /** The name the people are found by - the typed text once typing pauses. */
+    private findBy;
     private searching?;
-    connectedCallback(): Promise<void>;
+    private optionsRead;
+    private peopleRead;
+    private get options();
+    private get found();
+    connectedCallback(): void;
     private has;
     private toggle;
     private find;
@@ -48,8 +52,8 @@ declare const CardVersions_base: (new (...args: any[]) => LitElement) & typeof L
 export declare class CardVersions extends CardVersions_base {
     static styles: import("lit").CSSResult[];
     card: CardItem;
-    private versions?;
-    connectedCallback(): Promise<void>;
+    private versionsRead;
+    private get versions();
     render(): import("lit-html").TemplateResult<1>;
     private restore;
 }

package/dist-client/components/card-dialogs.js

@@ -7,8 +7,10 @@ import '@material/web/icon/icon.js';
 import '@material/web/button/filled-button.js';
 import '@material/web/button/text-button.js';
 import '@operato/popup/ox-popup-actions.js';
+import gql from 'graphql-tag';
 import { LitElement, css, html, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { QueryController } from '@operato/graphql';
 import { i18next, localize } from '@operato/i18n';
 import { notify, openPopup } from '@operato/layout';
 import { CommonPopupStyles, PopupBodyStyles } from '@operato/styles';
@@ -284,19 +286,24 @@ let CardShareForm = class CardShareForm extends localize(i18next)(LitElement) {
     constructor() {
         super(...arguments);
         this.shares = [];
-        this.found = [];
         this.search = '';
+        /** The name the people are found by - the typed text once typing pauses. */
+        this.findBy = '';
+        this.optionsRead = new QueryController(this, gql `query { dashboardShareOptions { domainId domainName departments { id name } peopleAvailable roles { id name note } } }`);
+        this.peopleRead = new QueryController(this, gql `query ($text: String!) { dashboardSharePeople(text: $text) { id name note } }`, {
+            variables: () => (this.findBy ? { text: this.findBy } : undefined)
+        });
     }
     static { this.styles = [CommonPopupStyles, PopupBodyStyles, FormStyles]; }
-    async connectedCallback() {
+    get options() {
+        return this.optionsRead.data?.dashboardShareOptions;
+    }
+    get found() {
+        return this.peopleRead.data?.dashboardSharePeople ?? [];
+    }
+    connectedCallback() {
         super.connectedCallback();
         this.shares = [...(this.card?.shares ?? [])].map(({ scope, targetId, targetName }) => ({ scope, targetId, targetName }));
-        try {
-            this.options = await cardApi.shareOptions();
-        }
-        catch (error) {
-            notify({ level: 'error', message: error?.message ?? String(error) });
-        }
     }
     has(scope, id) {
         return this.shares.some(one => one.scope === scope && one.targetId === id);
@@ -307,14 +314,7 @@ let CardShareForm = class CardShareForm extends localize(i18next)(LitElement) {
     find(text) {
         this.search = text;
         clearTimeout(this.searching);
-        this.searching = setTimeout(async () => {
-            try {
-                this.found = text.trim() ? await cardApi.people(text.trim()) : [];
-            }
-            catch {
-                this.found = [];
-            }
-        }, 250);
+        this.searching = setTimeout(() => (this.findBy = text.trim()), 250);
     }
     render() {
         const options = this.options;
@@ -384,37 +384,31 @@ __decorate([
     property({ attribute: false }),
     __metadata("design:type", Object)
 ], CardShareForm.prototype, "card", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], CardShareForm.prototype, "options", void 0);
 __decorate([
     state(),
     __metadata("design:type", Array)
 ], CardShareForm.prototype, "shares", void 0);
 __decorate([
     state(),
-    __metadata("design:type", Array)
-], CardShareForm.prototype, "found", void 0);
+    __metadata("design:type", Object)
+], CardShareForm.prototype, "search", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
-], CardShareForm.prototype, "search", void 0);
+], CardShareForm.prototype, "findBy", void 0);
 CardShareForm = __decorate([
     customElement('ai-dashboard-card-share-form')
 ], CardShareForm);
 export { CardShareForm };
 /** One's own card's versions, newest first - an earlier one comes back as a new version. */
 let CardVersions = class CardVersions extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.versionsRead = new QueryController(this, gql `query ($id: String!) { dashboardCardVersions(id: $id) { version name definition creatorName createdAt } }`, { variables: () => (this.card ? { id: this.card.id } : undefined) });
+    }
     static { this.styles = [CommonPopupStyles, PopupBodyStyles, FormStyles]; }
-    async connectedCallback() {
-        super.connectedCallback();
-        try {
-            this.versions = await cardApi.versions(this.card.id);
-        }
-        catch (error) {
-            notify({ level: 'error', message: error?.message ?? String(error) });
-        }
+    get versions() {
+        return this.versionsRead.data?.dashboardCardVersions;
     }
     render() {
         const view = (definition) => t(`ai-dashboard.view.${definition?.view?.kind ?? 'table'}`);
@@ -447,10 +441,6 @@ __decorate([
     property({ attribute: false }),
     __metadata("design:type", Object)
 ], CardVersions.prototype, "card", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], CardVersions.prototype, "versions", void 0);
 CardVersions = __decorate([
     customElement('ai-dashboard-card-versions')
 ], CardVersions);