@things-factory/worklist 10.1.5 → 10.1.7

package/dist-client/pages/activity-approval/activity-approval-page.js

@@ -1,4 +1,5 @@
 import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
 import '@operato/property-editor/ox-properties-dynamic-view.js';
 import '@operato/board/ox-board-viewer.js';
 import '../../components/activity-approval-ribon.js';
@@ -10,10 +11,13 @@ import { customElement, query, state } from 'lit/decorators.js';
 import { keyed } from 'lit/directives/keyed.js';
 import { client } from '@operato/graphql';
 import { i18next, localize } from '@operato/i18n';
+import { ranMutation } from '../../components/say-outcome.js';
 import { PageView } from '@operato/shell';
 import { CommonButtonStyles, ScrollbarStyles } from '@operato/styles';
 import { provider } from '@things-factory/board-ui/dist-client/board-provider.js';
-import { ActivityFieldsStyles, inputSpecOf, outputSpecOf, renderGiven } from '../../components/activity-fields.js';
+import { isReferenceStep } from '@things-factory/organization/dist-client';
+import { ActivityFieldsStyles, fieldValue, inputSpecOf, outputSpecOf, renderGiven } from '../../components/activity-fields.js';
+import { decisionSlots, reversibilityIsMalformed, reversibilityOf, slotOfRole, slotsOfRole } from '../../components/decision-slots.js';
 const ActivityApprovalFetchResult = `\
 {   id
   judgment
@@ -57,6 +61,12 @@ const ActivityApprovalFetchResult = `\
       description
       state
       activity {         id
+        label
+        decisionKeys {           role
+          inputPath
+          tKey
+          unit
+ }
         model {           name
           description
           active
@@ -72,6 +82,7 @@ const ActivityApprovalFetchResult = `\
  }
       approvalLine {         type
         value
+        participation
         approver {           id
           name
           description
@@ -214,8 +225,154 @@ let ActivityApprovalPage = class ActivityApprovalPage extends localize(i18next)(
         color: var(--ui-faint, #8a959c);
         word-break: keep-all;
       }
+
+      /*
+       * The decision, drawn from the activity's declaration.
+       *
+       * The order is the declaration's and the weight descends with it: what is being asked reads
+       * first at title size, then what it is about, then the words a person wrote, then what changes
+       * on approval, and last why it came up at all.
+       */
+      section[decision] .headline {
+        font-size: var(--ui-t-headline, 19px);
+        font-weight: 600;
+        line-height: 1.35;
+        color: var(--ui-ink, #17242c);
+        word-break: keep-all;
+      }
+
+      section[decision] .subject {
+        margin-top: 3px;
+        font-family: var(--ui-mono, ui-monospace, Menlo, monospace);
+        font-size: var(--ui-t-body, 13px);
+        color: var(--ui-muted, #57676f);
+      }
+
+      section[decision] .block {
+        margin-top: 14px;
+      }
+
+      section[decision] .block > .label {
+        margin-bottom: 4px;
+        font-size: var(--ui-t-small, 11.5px);
+        color: var(--ui-muted, #57676f);
+      }
+
+      /* What a person wrote is set apart, because it is the only part nobody computed. */
+      section[decision] .said {
+        padding: 9px 11px;
+        border-left: 3px solid var(--ui-line, #d5dce0);
+        background: var(--ui-line-soft, #f2f5f7);
+        color: var(--ui-ink, #17242c);
+        word-break: break-word;
+      }
+
+      section[decision] .none {
+        color: var(--ui-faint, #8a959c);
+      }
+
+      section[decision] .consequence {
+        margin-top: 8px;
+        padding: 9px 11px;
+        border: 1px solid var(--ui-line, #d5dce0);
+        border-radius: var(--ui-r-small, 6px);
+      }
+
+      section[decision] .consequence > .label {
+        margin-bottom: 3px;
+        font-size: var(--ui-t-small, 11.5px);
+        color: var(--ui-muted, #57676f);
+      }
+
+      /*
+       * Whether approving can be undone reads as the frame around the decision, not as one of its
+       * consequences. Among them it carries the same weight as "four orders get pushed back", and
+       * on an approval that moves equipment it is the heaviest line on the screen.
+       */
+      section[decision] .reversibility {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+
+        margin-top: 12px;
+        padding: 8px 11px;
+        border-radius: var(--ui-r-small, 6px);
+
+        background: var(--ui-line-soft, #f2f5f7);
+        color: var(--ui-muted, #57676f);
+        font-size: var(--ui-t-small, 11.5px);
+      }
+
+      section[decision] .reversibility[irreversible] {
+        background: var(--md-sys-color-error-container, #ffdad6);
+        color: var(--md-sys-color-on-error-container, #410002);
+        font-weight: 600;
+      }
+
+      section[decision] .reversibility md-icon {
+        font-size: 1.15em;
+      }
+
+      /*
+       * What the decision was made from. Set flatter than the consequences — it is the record the
+       * approver checks, not something the approval brings about.
+       */
+      section[decision] .evidence {
+        margin-top: 8px;
+        padding: 7px 0 7px 11px;
+        border-left: 2px solid var(--ui-line, #d5dce0);
+      }
+
+      section[decision] .evidence > .label {
+        margin-bottom: 2px;
+        font-size: var(--ui-t-small, 11.5px);
+        color: var(--ui-muted, #57676f);
+      }
+
+      /*
+       * What is true right now sits apart from what the approval would change. Sharing the box the
+       * consequences use would say the approval causes these readings.
+       */
+      section[decision] .current-state {
+        margin-top: 14px;
+        padding: 9px 11px;
+        border: 1px dashed var(--ui-line, #d5dce0);
+        border-radius: var(--ui-r-small, 6px);
+      }
+
+      section[decision] .current-state > .label {
+        margin-bottom: 3px;
+        font-size: var(--ui-t-small, 11.5px);
+        color: var(--ui-muted, #57676f);
+      }
+
+      section[decision] .policy {
+        margin-top: 14px;
+        padding-top: 11px;
+        border-top: 1px solid var(--ui-line, #d5dce0);
+        font-size: var(--ui-t-small, 11.5px);
+        color: var(--ui-muted, #57676f);
+      }
     `
     ]; }
+    /**
+     * Is the reader seated here as a reference — someone who comments and does not decide?
+     *
+     * The rule comes from organization's client types, the same function its own approval-line editor
+     * and list use, so the two wire spellings of the enum are handled in one place. The approval line
+     * answers rather than ActivityApproval.participation, matching what the server refuses on
+     * (isReferenceOrder in approval-line.ts): the line decides who comes next, so letting the row
+     * decide who may judge would leave two authorities with nothing to settle a disagreement.
+     *
+     * The value comes back false while the query is still out. That is the same answer as for an
+     * approver, so the buttons show for a moment on a reference's screen — pressing one is refused by
+     * the server, which is why the server closed first.
+     */
+    get isReference() {
+        const approvalLine = this.activityThread?.activityInstance?.approvalLine;
+        const order = Number(this.activityApproval?.order ?? 0);
+        return isReferenceStep(approvalLine?.[order - 1]);
+    }
     get context() {
         const judgment = this.activityApproval?.judgment;
         return { title: this.lifecycle?.params?.['title'] || i18next.t('title.activity approval'),
@@ -227,6 +384,17 @@ let ActivityApprovalPage = class ActivityApprovalPage extends localize(i18next)(
              * 어느 목록에서 열리는지는 이 화면이 안다. 그것을 적어 둔다.
              */
             menu: 'approval-pending-list',
+            /*
+             * A reference is offered neither approve nor reject.
+             *
+             * ActivityApprovalJudgment has carried Closed for this seat from the start — "the case ended"
+             * rather than a judgment — so a reference row was never meant to end in approved or rejected.
+             * The buttons were offered anyway, and the server accepted them until 2026-09-09.
+             *
+             * What stays is the note, because a comment is the whole point of the seat, and close. The
+             * hint under the textarea says which seat this is; buttons that simply vanish leave the
+             * reader looking for them.
+             */
             actions: judgment
                 ? [
                     { title: i18next.t('button.close'),
@@ -236,48 +404,16 @@ let ActivityApprovalPage = class ActivityApprovalPage extends localize(i18next)(
                         ...CommonButtonStyles.back
                     }
                 ]
-                : /*
-                   * ── 세 단추의 순서와 무게 (2026-09-06) ──────────────────────────
-                   * 전에는 반려가 첫 자리였고, 승인 · 반려 · 저장이 모두 같은 모양이었다. 되돌리기 어려운
-                   * 것이 앞에 서고 무엇이 주된 흐름인지 화면이 말하지 않았다.
-                   *
-                   * 승인이 주 동작이다 — 채운 단추 하나. 반려는 대등한 선택이지만 예외 경로라 테두리
-                   * 단추로 그 옆에 둔다.
-                   *
-                   * 「저장」은 이름이 뜻을 말하지 않았다. 이 단추가 저장하는 것은 **의견 하나**이고
-                   * (saveActivityApproval 은 id 와 comment 만 보낸다), 판단은 미뤄 둔다. 그리고 그 결과는
-                   * 목록에서 「메모 있음」 표식으로 나타난다(activity-cells 의 approvalMarks). 목록이
-                   * 부르는 이름과 같은 낱말로 맞춘다.
-                   */
-                    [
-                        { title: i18next.t('button.approve'),
-                            action: this.approveActivityApproval.bind(this),
-                            icon: 'approval',
-                            emphasis: { raised: true,
-                                outlined: false,
-                                dense: false,
-                                danger: false
-                            }
-                        },
-                        { title: i18next.t('button.reject'),
-                            action: this.rejectActivityApproval.bind(this),
-                            icon: 'assignment_return',
-                            emphasis: { raised: false,
-                                outlined: true,
-                                dense: false,
-                                danger: false
-                            }
-                        },
-                        { title: i18next.t('button.save-note'),
+                : this.isReference
+                    ? [
+                        {
+                            title: i18next.t('button.save-note'),
                             action: this.saveActivityApproval.bind(this),
                             icon: 'edit_note',
-                            emphasis: { raised: false,
-                                outlined: true,
-                                dense: false,
-                                danger: false
-                            }
+                            emphasis: { raised: true, outlined: false, dense: false, danger: false }
                         },
-                        { title: i18next.t('button.close'),
+                        {
+                            title: i18next.t('button.close'),
                             action: () => {
                                 history.back();
                             },
@@ -285,6 +421,55 @@ let ActivityApprovalPage = class ActivityApprovalPage extends localize(i18next)(
                             icon: 'close'
                         }
                     ]
+                    : /*
+                     * ── 세 단추의 순서와 무게 (2026-09-06) ──────────────────────────
+                     * 전에는 반려가 첫 자리였고, 승인 · 반려 · 저장이 모두 같은 모양이었다. 되돌리기 어려운
+                     * 것이 앞에 서고 무엇이 주된 흐름인지 화면이 말하지 않았다.
+                     *
+                     * 승인이 주 동작이다 — 채운 단추 하나. 반려는 대등한 선택이지만 예외 경로라 테두리
+                     * 단추로 그 옆에 둔다.
+                     *
+                     * 「저장」은 이름이 뜻을 말하지 않았다. 이 단추가 저장하는 것은 **의견 하나**이고
+                     * (saveActivityApproval 은 id 와 comment 만 보낸다), 판단은 미뤄 둔다. 그리고 그 결과는
+                     * 목록에서 「메모 있음」 표식으로 나타난다(activity-cells 의 approvalMarks). 목록이
+                     * 부르는 이름과 같은 낱말로 맞춘다.
+                     */
+                        [
+                            { title: i18next.t('button.approve'),
+                                action: this.approveActivityApproval.bind(this),
+                                icon: 'approval',
+                                emphasis: { raised: true,
+                                    outlined: false,
+                                    dense: false,
+                                    danger: false
+                                }
+                            },
+                            { title: i18next.t('button.reject'),
+                                action: this.rejectActivityApproval.bind(this),
+                                icon: 'assignment_return',
+                                emphasis: { raised: false,
+                                    outlined: true,
+                                    dense: false,
+                                    danger: false
+                                }
+                            },
+                            { title: i18next.t('button.save-note'),
+                                action: this.saveActivityApproval.bind(this),
+                                icon: 'edit_note',
+                                emphasis: { raised: false,
+                                    outlined: true,
+                                    dense: false,
+                                    danger: false
+                                }
+                            },
+                            { title: i18next.t('button.close'),
+                                action: () => {
+                                    history.back();
+                                },
+                                ...CommonButtonStyles.back,
+                                icon: 'close'
+                            }
+                        ]
             // activityApproval: this.activityApproval
         };
     }
@@ -317,7 +502,9 @@ let ActivityApprovalPage = class ActivityApprovalPage extends localize(i18next)(
               <section>
                 <h2>${i18next.t('field.wl-comment')}</h2>
                 <textarea
-                  placeholder=${String(i18next.t('text.explain the reason for approval/rejection'))}
+                  placeholder=${String(i18next.t(this.isReference
+                ? 'text.write-your-comment-as-reference'
+                : 'text.explain the reason for approval/rejection'))}
                   .value=${this.activityApproval?.comment}
                   @change=${(e) => {
                 this.activityApproval.comment = e.target.value;
@@ -326,8 +513,14 @@ let ActivityApprovalPage = class ActivityApprovalPage extends localize(i18next)(
                 <!--
                   반려는 의견이 필수다(rejectActivityApproval). 전에는 그 규칙을 **누른 뒤에** 토스트로
                   알렸다. 되돌릴 수 없는 것과 뜻이 다른 동작은 하기 전에 말한다.
+
+                  A reference reads a different line: this one names the seat, because the approve
+                  and reject buttons are absent for them and a reader whose buttons are missing
+                  goes looking for them.
                 -->
-                <p class="hint">${i18next.t('text.approval-comment-hint')}</p>
+                <p class="hint">
+                  ${i18next.t(this.isReference ? 'text.reference-comment-hint' : 'text.approval-comment-hint')}
+                </p>
               </section>
             </div>
           `
@@ -348,8 +541,36 @@ let ActivityApprovalPage = class ActivityApprovalPage extends localize(i18next)(
             /* board 는 전체 화면을 쓰는 캔버스라 카드에 담지 않는다(hostedContent 머리말). */
             case 'board':
                 return this.boardContent();
-            case 'custom-element':
-                return this.hostedContent(this.customElementContent());
+            case 'custom-element': {
+                /*
+                 * The wrapper is for the element, not for the notice.
+                 *
+                 * hostedContent puts the content in a card so every ui type sits at the same place with the
+                 * same frame. The not-loaded notice is already a card — wrapping it drew a card inside a
+                 * card, two borders deep, and its margins landed unevenly: 16 above and none below, inside
+                 * a box that had its own padding. The generated branch returns the same notice unwrapped
+                 * and looks right.
+                 */
+                const { viewSource: tagName } = this.activityThread?.activityInstance || {};
+                /*
+                 * Naming no element is not the same as naming one that is missing.
+                 *
+                 * A template that stops providing a screen clears the field — installActivity does not
+                 * blank what a template leaves undefined, so clearing is written as an empty string. That
+                 * left viewType saying custom-element with nothing named, and this branch answered "the
+                 * screen could not be loaded": a failure, for an activity that simply has no screen of its
+                 * own. Those read as different things to whoever is approving, and the second one is not
+                 * true.
+                 *
+                 * With nothing named, the generated screen is what this activity has — and it draws a
+                 * decision when the activity declares one, which the two plant forms that hit this do.
+                 */
+                if (!tagName) {
+                    return this.generatedContent();
+                }
+                const element = this.customElementContent();
+                return element ? this.hostedContent(element) : this.screenNotLoaded();
+            }
             case 'page':
             case 'external':
                 return html ``;
@@ -387,12 +608,179 @@ let ActivityApprovalPage = class ActivityApprovalPage extends localize(i18next)(
      * approveActivityApproval / rejectActivityApproval 은 id 와 comment 만 보낸다 — 그 값은 어디에도
      * 가지 않는다. 결재자가 적을 수 있는 것은 의견 하나이고, 그것은 화면 아래 칸이 받는다.
      */
+    /**
+     * The decision the activity declared, or nothing when it declared none.
+     *
+     * Returning nothing is how generatedContent knows to fall back to the model. An activity with no
+     * decisionKeys draws exactly what it drew before.
+     *
+     * A slot whose path led nowhere is skipped rather than drawn empty. Older instances of an activity
+     * predate a field the declaration names — plant hit that with its `policy` value — and an empty
+     * bar on the screen would read as "there is no reason" when the truth is that this record has no
+     * such value. What cannot be shown is left out; what is shown is only what the payload actually
+     * carries.
+     *
+     * `reason` is the exception. Missing and blank mean the same thing to whoever is reading — nobody
+     * wrote one — so both draw the grey line rather than disappearing. A reason that silently vanishes
+     * would let an approver assume it was never asked for.
+     */
+    decisionContent() {
+        const { activityInstance } = this.activityThread || {};
+        const slots = decisionSlots(activityInstance?.activity?.decisionKeys, activityInstance?.input);
+        if (!slots.length) {
+            return nothing;
+        }
+        const headline = slotOfRole(slots, 'headline');
+        const subject = slotOfRole(slots, 'subject');
+        const reason = slotOfRole(slots, 'reason');
+        const consequences = slotsOfRole(slots, 'consequence').filter(slot => slot.found);
+        const policy = slotOfRole(slots, 'policy');
+        const evidence = slotsOfRole(slots, 'evidence').filter(slot => slot.found);
+        const currentState = slotOfRole(slots, 'currentState');
+        const reversibility = slotOfRole(slots, 'reversibility');
+        const drawable = [headline, subject, policy, currentState].some(slot => slot?.found) ||
+            !!reason ||
+            consequences.length ||
+            evidence.length ||
+            reversibilityOf(reversibility) !== undefined;
+        /*
+         * Every declared slot missed this payload. Saying so is not this screen's job — falling back to
+         * the model at least shows the values that are there, and the reader is no worse off than before
+         * the declaration existed.
+         */
+        if (!drawable) {
+            return nothing;
+        }
+        return keyed(this.activityApproval.id, html `
+        <section decision>
+          ${headline?.found ? html `<div class="headline">${this.slotText(headline)}</div>` : ''}
+          ${subject?.found ? html `<div class="subject">${this.slotText(subject)}</div>` : ''}
+          ${reason
+            ? html `
+                <div class="block">
+                  <div class="label">${i18next.t('field.reason')}</div>
+                  <div class="said ${this.hasWords(reason) ? '' : 'none'}">
+                    ${this.hasWords(reason) ? this.slotText(reason) : i18next.t('text.no-reason-given')}
+                  </div>
+                </div>
+              `
+            : ''}
+          ${this.renderReversibility(reversibility)}
+          ${evidence.length
+            ? html `
+                <div class="block">
+                  <div class="label">${i18next.t('label.what-it-was-judged-from')}</div>
+                  ${evidence.map(slot => html `
+                      <div class="evidence">
+                        ${slot.tKey ? html `<div class="label">${i18next.t(slot.tKey)}</div>` : ''}
+                        <div>${fieldValue(slot.value)}</div>
+                      </div>
+                    `)}
+                </div>
+              `
+            : ''}
+          ${currentState?.found
+            ? html `
+                <div class="current-state">
+                  <div class="label">${i18next.t(currentState.tKey || 'label.current-state')}</div>
+                  <div>${fieldValue(currentState.value)}</div>
+                </div>
+              `
+            : ''}
+          ${consequences.length
+            ? html `
+                <div class="block">
+                  <div class="label">${i18next.t('label.what-changes')}</div>
+                  ${consequences.map(slot => html `
+                      <div class="consequence">
+                        ${slot.tKey ? html `<div class="label">${i18next.t(slot.tKey)}</div>` : ''}
+                        <div>${fieldValue(slot.value)}</div>
+                      </div>
+                    `)}
+                </div>
+              `
+            : ''}
+          ${policy?.found
+            ? html `
+                <div class="policy">
+                  ${i18next.t('label.why-approval')} — ${this.slotText(policy)}
+                </div>
+              `
+            : ''}
+        </section>
+      `);
+    }
+    /**
+     * Whether approving can be undone, drawn as the frame around the decision.
+     *
+     * Only an explicit true or false draws. Anything else — the path led nowhere, or the value is not
+     * a boolean — draws nothing, because saying "this can be undone" on a screen that does not know is
+     * the one mistake this line must never make.
+     *
+     * This is not rejectionIsFinal. That one says whether **rejecting** ends the case for good; this
+     * says whether **approving** can be taken back. The twin actuation carries both, which is exactly
+     * why they must not share a sentence.
+     */
+    renderReversibility(slot) {
+        const said = reversibilityOf(slot);
+        if (!said) {
+            if (reversibilityIsMalformed(slot)) {
+                /*
+                 * Declared, and the value is there, but not the shape this role takes — a bare sentence
+                 * where { reversible, caveat } belongs. Nothing is drawn, because this side cannot tell
+                 * which way it goes; the log is so a developer does not have to find it by hand, which is
+                 * how it was found the first time.
+                 */
+                console.error(`[worklist] reversibility at "${slot?.inputPath}" is not { reversible, caveat } — nothing drawn`);
+            }
+            return '';
+        }
+        /*
+         * The module's own sentence when it wrote one. 「버린 자재는 돌아오지 않습니다」 says why, which
+         * the plain wording cannot; the boolean beside it is what decides how heavily this is drawn.
+         */
+        return html `
+      <div class="reversibility" ?irreversible=${!said.reversible}>
+        <md-icon>${said.reversible ? 'undo' : 'lock'}</md-icon>
+        <span
+          >${said.caveat ||
+            i18next.t(said.reversible ? 'text.approval-is-reversible' : 'text.approval-is-irreversible')}</span
+        >
+      </div>
+    `;
+    }
+    /**
+     * One slot's value as something to read.
+     *
+     * A scalar prints with its unit when one was declared. Anything shaped — an object, a list — goes
+     * through fieldValue, the same laying-out the model sections use, so a payload reads the same way
+     * wherever it appears and a four-level object does not become one long line.
+     */
+    slotText(slot) {
+        const scalar = slot.value !== null && slot.value !== undefined && typeof slot.value !== 'object';
+        if (scalar && slot.unit) {
+            return `${slot.value} ${slot.unit}`;
+        }
+        return scalar ? String(slot.value) : fieldValue(slot.value);
+    }
+    /** Did a person actually write something here. Whitespace is not words. */
+    hasWords(slot) {
+        return typeof slot.value === 'string' ? slot.value.trim().length > 0 : slot.found && slot.value != null;
+    }
     generatedContent() {
         if (!this.activityApproval) {
             return html ``;
         }
         const { output, activityInstance } = this.activityThread || {};
         const { input } = activityInstance || {};
+        /*
+         * The declaration goes first. It answers "what happens if I approve", which is the question this
+         * screen exists for; the model answers "what are the values", which is the fallback.
+         */
+        const decision = this.decisionContent();
+        if (decision !== nothing) {
+            return decision;
+        }
         const model = activityInstance?.activity?.model;
         const inputSpec = inputSpecOf(model);
         const outputSpec = outputSpecOf(model);
@@ -449,12 +837,33 @@ let ActivityApprovalPage = class ActivityApprovalPage extends localize(i18next)(
         ></ox-board-viewer>
       `);
     }
+    /**
+     * The element the activity names, or a plain statement that it could not be loaded.
+     *
+     * document.createElement answers something for any name, so an activity pointing at an element
+     * nobody registered used to produce an empty card. The approver got a screen with nothing on it
+     * and the approve button still worked — plant shipped two such forms in one day and found them by
+     * reading the file list, not by opening the screen.
+     *
+     * The reader is told what to judge by instead. Same shape as the empty generated screen: what is
+     * missing, and where to look — the submission reason and the history in the timeline below.
+     *
+     * ── Waiting for a late definition ─────────────────────────────────────────
+     * An element can be registered after this page renders, and answering "not loaded" forever in
+     * that case would be a screen inventing a defect. whenDefined resolves whenever it arrives and
+     * the page redraws; a name nobody ever registers simply never resolves, and the statement stands.
+     */
     customElementContent() {
         if (!this.activityApproval) {
             return html ``;
         }
         const { output, activityInstance } = this.activityThread;
         const { viewSource: tagName, input } = activityInstance || {};
+        if (!customElements.get(tagName)) {
+            customElements.whenDefined(tagName).then(() => this.requestUpdate());
+            /* The caller draws the notice — unwrapped, because the notice is its own card. */
+            return undefined;
+        }
         const element = document.createElement(tagName);
         element.id = 'custom-content';
         element.activityId = activityInstance.activity.id;
@@ -463,6 +872,13 @@ let ActivityApprovalPage = class ActivityApprovalPage extends localize(i18next)(
         element.activityApproval = this.activityApproval;
         return element;
     }
+    /** The activity names a screen and nothing registered it. Says what to judge by instead. */
+    screenNotLoaded() {
+        return html `<section empty>
+      <span class="title">${i18next.t('text.approval-view-not-loaded')}</span>
+      <span class="why">${i18next.t('text.no-approval-content-why')}</span>
+    </section>`;
+    }
     getOutputFromBoard() {
         const outputSpec = outputSpecOf(this.activityThread?.activityInstance?.activity?.model);
         const data = this.oxBoardViewer.getSceneValues();
@@ -512,16 +928,16 @@ let ActivityApprovalPage = class ActivityApprovalPage extends localize(i18next)(
             this.commentInput.focus();
             return;
         }
-        const response = await client.mutate({ mutation: gql `
+        const outcome = await ranMutation(() => client.mutate({ mutation: gql `
         mutation ($id: String!, $comment: String!) {           rejectActivityApproval(id: $id,  comment: $comment) ${ActivityApprovalFetchResult}
  }
       `,
             variables: { id,
                 comment
             }
-        });
-        if (!response.errors) {
-            this.activityApproval = response.data.rejectActivityApproval;
+        }));
+        if (outcome.ok) {
+            this.activityApproval = outcome.data.rejectActivityApproval;
             this.activityThread = this.activityApproval.activityThread;
             this.updateContext();
             document.dispatchEvent(new CustomEvent('notify', { detail: { message: i18next.t('text.task_is_rejected_successfully')
@@ -531,16 +947,16 @@ let ActivityApprovalPage = class ActivityApprovalPage extends localize(i18next)(
     }
     async approveActivityApproval() {
         var { id, comment } = this.activityApproval;
-        const response = await client.mutate({ mutation: gql `
+        const outcome = await ranMutation(() => client.mutate({ mutation: gql `
         mutation ($id: String!, $comment: String) {           approveActivityApproval(id: $id,  comment: $comment) ${ActivityApprovalFetchResult}
  }
       `,
             variables: { id,
                 comment
             }
-        });
-        if (!response.errors) {
-            this.activityApproval = response.data.approveActivityApproval;
+        }));
+        if (outcome.ok) {
+            this.activityApproval = outcome.data.approveActivityApproval;
             this.activityThread = this.activityApproval.activityThread;
             this.updateContext();
             document.dispatchEvent(new CustomEvent('notify', { detail: { message: i18next.t('text.task_is_approved_successfully')
@@ -550,16 +966,16 @@ let ActivityApprovalPage = class ActivityApprovalPage extends localize(i18next)(
     }
     async saveActivityApproval() {
         var { id, comment } = this.activityApproval;
-        const response = await client.mutate({ mutation: gql `
+        const outcome = await ranMutation(() => client.mutate({ mutation: gql `
         mutation ($id: String!, $comment: String) {           saveActivityApproval(id: $id, comment: $comment) ${ActivityApprovalFetchResult}
  }
       `,
             variables: { id,
                 comment
             }
-        });
-        if (!response.errors) {
-            this.activityApproval = response.data.saveActivityApproval;
+        }));
+        if (outcome.ok) {
+            this.activityApproval = outcome.data.saveActivityApproval;
             this.activityThread = this.activityApproval.activityThread;
             this.updateContext();
             document.dispatchEvent(new CustomEvent('notify', { detail: { message: i18next.t('text.task_is_saved_successfully')
@@ -586,7 +1002,21 @@ __decorate([
 ], ActivityApprovalPage.prototype, "board", void 0);
 __decorate([
     query('textarea'),
-    __metadata("design:type", HTMLTextAreaElement)
+    __metadata("design:type", HTMLTextAreaElement
+    /**
+     * Is the reader seated here as a reference — someone who comments and does not decide?
+     *
+     * The rule comes from organization's client types, the same function its own approval-line editor
+     * and list use, so the two wire spellings of the enum are handled in one place. The approval line
+     * answers rather than ActivityApproval.participation, matching what the server refuses on
+     * (isReferenceOrder in approval-line.ts): the line decides who comes next, so letting the row
+     * decide who may judge would leave two authorities with nothing to settle a disagreement.
+     *
+     * The value comes back false while the query is still out. That is the same answer as for an
+     * approver, so the buttons show for a moment on a reference's screen — pressing one is refused by
+     * the server, which is why the server closed first.
+     */
+    )
 ], ActivityApprovalPage.prototype, "commentInput", void 0);
 __decorate([
     query('ox-board-viewer'),