@things-factory/worklist 10.1.248 → 10.1.249

package/dist-client/components/activity-fields.js

@@ -0,0 +1,424 @@
+import '@material/web/icon/icon.js';
+import { css, html } from 'lit';
+import { i18next } from '@operato/i18n';
+import { entity360Name } from '@operato/layout';
+/**
+ * 업무 항목을 화면에 내는 방식 — **두 화면이 한 벌을 쓴다.**
+ *
+ * 업무 상세(activity-thread-page)와 결재 상세(activity-approval-page)는 거의 복사본이다. 항목을
+ * 고르는 함수, 화면 종류에 따라 그리는 분기, 절을 그리는 부분이 두 파일에 같은 코드로 있었다.
+ * 그래서 한쪽만 고치면 나머지가 그대로 남는다 — 실제로 그랬다(2026-09-06, 상세 화면의
+ * Input · Output 영문 legend 를 고쳤는데 결재 화면에는 그대로 있었다).
+ *
+ * 화면마다 다른 것은 남긴다 — 상세는 결과를 적고, 결재는 읽기만 한다.
+ */
+/** 절과 값 표의 모양. 카드 값은 SurfaceStyles 의 .ui-card 와 같다. */
+export const ActivityFieldsStyles = css `
+  section {
+    margin: var(--spacing-large, 16px) var(--spacing-large, 16px) 0;
+    padding: 14px;
+    background: var(--ui-panel, #ffffff);
+    border: 1px solid var(--ui-line, #d5dce0);
+    border-radius: var(--ui-r, 10px);
+  }
+
+  section > h2 {
+    margin: 0 0 10px;
+    font-size: var(--ui-t-title, 15px);
+    font-weight: 600;
+    color: var(--ui-ink, #17242c);
+  }
+
+  /* 읽기만 하는 절 — 값을 바꿀 수 없다는 것이 보여야 한다. */
+  section[readonly] > h2 {
+    color: var(--ui-muted, #57676f);
+  }
+
+  /* 받은 값 — 이름과 값을 두 칸으로. 이름은 오른쪽 정렬이라 값의 왼쪽 끝이 한 줄로 선다. */
+  dl.given {
+    display: grid;
+    grid-template-columns: minmax(80px, max-content) 1fr;
+    gap: 7px var(--spacing-large, 16px);
+    margin: 0;
+  }
+
+  dl.given dt {
+    text-align: right;
+    color: var(--ui-muted, #57676f);
+    word-break: keep-all;
+  }
+
+  dl.given dd {
+    margin: 0;
+    color: var(--ui-ink, #17242c);
+    word-break: break-word;
+  }
+
+  dl.given .none {
+    color: var(--ui-faint, #8a959c);
+  }
+
+  dl.given code {
+    font-family: var(--ui-mono, ui-monospace, Menlo, monospace);
+    font-size: var(--ui-t-small, 11.5px);
+  }
+
+  /*
+   * 안쪽으로 펼친 오브젝트 · 배열.
+   *
+   * 바깥과 같은 두 칸 구조를 쓰되 **한 단 들여쓰고 왼쪽에 선을 긋는다.** 선이 없으면 세 단이 겹칠 때
+   * 어느 이름이 어느 값에 딸린 것인지 눈으로 못 가른다.
+   *
+   * 안쪽 이름은 왼쪽 정렬이다. 바깥은 오른쪽 정렬이라 값의 왼쪽 끝이 한 줄로 서는데(dl.given dt),
+   * 안쪽까지 그러면 단이 깊어질수록 이름이 값 쪽으로 밀려 붙는다.
+   */
+  dl.given .nested {
+    margin: 2px 0 0;
+    padding-left: 10px;
+    border-left: 1px solid var(--ui-line, #d5dce0);
+  }
+
+  dl.given dl.nested {
+    display: grid;
+    grid-template-columns: minmax(60px, max-content) 1fr;
+    gap: 4px var(--spacing-medium, 8px);
+  }
+
+  dl.given dl.nested dt {
+    text-align: left;
+    color: var(--ui-faint, #8a959c);
+    font-family: var(--ui-mono, ui-monospace, Menlo, monospace);
+    font-size: var(--ui-t-small, 11.5px);
+  }
+
+  /*
+   * 페이로드를 그대로 가져가는 자리.
+   *
+   * 화면은 값을 읽기 좋게 펴 놓지만, 이 값을 **다른 도구에 넣어 볼 일**이 있다 — 트윈 명령 하나가
+   * 네 단짜리 오브젝트이고, 그것을 손으로 옮겨 적을 수는 없다. 화면이 편 글자가 아니라 원문 JSON 을
+   * 준다. 붙여 넣는 쪽이 기대하는 것은 원문이다.
+   *
+   * 값 위에 얹지 않고 오른쪽 위 구석에 둔다 — 값이 한 줄일 때도 두 단 깊을 때도 자리가 같다.
+   */
+  dl.given dd:has(> .payload) {
+    position: relative;
+  }
+
+  .copy {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    padding: 1px 5px;
+    border: 1px solid var(--ui-line, #d5dce0);
+    border-radius: 999px;
+    background: var(--ui-panel, #ffffff);
+    color: var(--ui-muted, #57676f);
+    font-size: var(--ui-t-micro, 11px);
+    line-height: 16px;
+    cursor: pointer;
+  }
+
+  .copy md-icon {
+    font-size: 13px;
+    width: 13px;
+    height: 13px;
+  }
+
+  .copy:hover {
+    color: var(--ui-ink, #17242c);
+    border-color: var(--ui-muted, #57676f);
+  }
+
+  .copy:focus-visible {
+    outline: 2px solid var(--ui-accent, #00727e);
+    outline-offset: 1px;
+  }
+
+  /* 복사한 직후 — 눌린 것이 보여야 한다. 소리도 움직임도 없는 조작이라 이 표시가 유일한 대답이다. */
+  .copy[done] {
+    border-color: var(--ui-good, #297d39);
+    color: var(--ui-good, #297d39);
+  }
+
+  /*
+   * 못 했을 때도 **같은 크기로** 말한다.
+   *
+   * 처음에는 실패를 title 로만 적었다. 그러면 누른 사람 눈에는 아무 일도 안 일어난 것과 같고,
+   * 이유를 알려면 그 자리에 마우스를 올려 두어야 한다 — 손가락으로 쓰는 화면에는 그 길이 없다.
+   * 클립보드는 브라우저가 막을 수 있는 자리라(보안 컨텍스트가 아니거나 권한이 없으면) 실제로 나는 일이다.
+   */
+  .copy[failed] {
+    border-color: var(--ui-crit, #d14946);
+    color: var(--ui-crit, #d14946);
+  }
+
+  /* 배열 — 번호로 몇 번째인지 말한다. 순서가 뜻을 갖는 값이 온다(주의 목록 · 권장 조치). */
+  dl.given ol.nested {
+    list-style: decimal;
+    padding-left: 24px;
+  }
+
+  dl.given ol.nested li {
+    margin: 2px 0;
+  }
+
+  dl.given ol.nested li::marker {
+    color: var(--ui-faint, #8a959c);
+    font-size: var(--ui-t-small, 11.5px);
+  }
+
+  /*
+   * 빈 화면은 가장 중요한 자리다. 없다고만 하지 않고 왜 비어 있는지 적는다.
+   *
+   * 두 가지가 있다. 화면 전체가 비는 것(건을 못 읽었다)은 세로로 늘려 가운데에 두고, 절 자리가
+   * 비는 것(항목이 정의되지 않았다)은 **다른 절과 같은 카드**로 둔다. 절 하나가 없다고 해서
+   * 화면 높이를 다 쓰면 그 아래의 타임라인이 화면 밖으로 밀린다.
+   */
+  section[empty] {
+    display: flex;
+    flex: none;
+    flex-direction: column;
+    align-items: center;
+    gap: 6px;
+    padding: 28px 14px;
+    text-align: center;
+    color: var(--ui-muted, #57676f);
+  }
+
+  div[empty] {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    padding: var(--spacing-large, 16px);
+    text-align: center;
+    color: var(--ui-muted, #57676f);
+  }
+
+  [empty] .title {
+    font-size: var(--ui-t-title, 15px);
+    font-weight: 600;
+    color: var(--ui-ink, #17242c);
+  }
+
+  [empty] .why {
+    max-width: 40em;
+    font-size: var(--ui-t-body, 13px);
+    color: var(--ui-faint, #8a959c);
+    word-break: keep-all;
+  }
+`;
+/**
+ * 화면에 낼 항목을 고른다.
+ *
+ * hidden 을 지킨다. 전에는 이 선언을 보지 않았다 — 액티비티가 「이 항목은 보이지 않는다」고 적어
+ * 두어도 화면에 나왔다. 편집기가 없는 타입(object 등)이라 조용히 빠졌을 뿐이고, 편집기가 있는
+ * 타입이면 그대로 보였다. 값을 표로 그리기 시작하면서 실제로 드러났다 — 처분 승인 화면에
+ * disposition 객체의 JSON 원문이 나왔다.
+ */
+function specsOf(model, inouts) {
+    return (model || [])
+        .filter(item => !item.hidden)
+        .filter(item => inouts.includes(item.inout))
+        .map(item => ({
+        ...item,
+        name: item.tag,
+        label: item.tKey || item.name,
+        property: item.options
+    }));
+}
+/** 받은 값 — 업무를 시작할 때 함께 온 것. */
+export function inputSpecOf(model) {
+    return specsOf(model, ['in', 'inout']);
+}
+/** 적어 낼 값 — 수행자가 채우는 것. */
+export function outputSpecOf(model) {
+    return specsOf(model, ['out', 'inout']);
+}
+/**
+ * 값을 **표로** 보인다. 입력칸으로 그리지 않는다.
+ *
+ * 전에는 읽기만 하는 절도 ox-properties-dynamic-view 로 그렸다. 그러면 값마다 흰 입력 상자가
+ * 생기고 사용자는 고쳐 쓸 수 있는 것으로 읽는다. 그런데 그 절에는 변경을 받는 자리가 없다 —
+ * 결재 화면은 아예 output 을 mutation 에 싣지 않는다(approveActivityApproval 은 id 와 comment 만
+ * 보낸다). 「적을 수 있게 보이는데 적히지 않는 칸」이라 가장 나쁜 쪽이다.
+ */
+export function renderGiven(specs, values) {
+    return html `
+    <dl class="given">
+      ${specs.map(spec => html `
+          <dt>${fieldLabel(spec)}</dt>
+          <dd>${fieldValue(values?.[spec.name])}</dd>
+        `)}
+    </dl>
+  `;
+}
+/**
+ * 항목 이름 — ox-property-editor 와 같은 규칙으로 찾는다(그쪽은 label. 접두사를 스스로 붙인다).
+ *
+ * 번역이 없으면 **키를 그대로 보이지 않는다.** 전에는 label.because 가 없어서 화면에
+ * Label.Because 가 나왔다. 사용자에게 뜻이 없는 글자다.
+ *
+ * description 으로 물러나지도 않는다 — 액티비티의 description 은 개발자가 영어로 적어 둔 설명이다
+ * (예: "The disposition waiting for approval"). 한국어 화면에 영어 문장이 나오는 것보다 항목
+ * 이름이 낫다.
+ */
+export function fieldLabel(spec) {
+    const key = String(spec?.label ?? spec?.name ?? '');
+    const full = key.indexOf('label.') >= 0 ? key : 'label.' + key;
+    return i18next.t(full, { defaultValue: spec?.name || key });
+}
+/**
+ * 선언이 준 이름 — `tKey` 로 찾되, **없으면 키를 보이지 않는다.**
+ *
+ * 찾는 축(`searchKeys`)과 판단 자리(`decisionKeys`) 둘 다 이것을 쓴다. 두 선언이 같은 모양으로
+ * 이름을 나른다 — `tKey` 가 있으면 그 키로, 없으면 `name` 으로.
+ *
+ * `fieldLabel` 과 규칙이 하나 다르다. 그쪽은 `label.` 을 스스로 붙이지만 여기는 안 붙인다 — 이 두
+ * 선언의 `tKey` 는 선언한 모듈이 온전한 키로 적는다(plant 는 `field.lot`, twin 은 `twin.instance`).
+ * 접두사를 붙이면 맞게 적은 키가 오히려 안 찾아진다.
+ *
+ * ── 왜 물러날 자리가 필요한가 (2026-09-16) ────────────────────────────────
+ * i18next 는 없는 키를 **키 그대로** 돌려준다. 선언된 tKey 를 세어 보니 plant 는 서른 중 열아홉이,
+ * twin 은 셋 다 다섯 언어 어디에도 없었다. 그래서 그 표가 「어느 로트」 자리에 `lotName` 을, 「누가
+ * 냈나」 자리에 `twin.command-origin` 을 그리고 있다. 사용자에게 뜻이 없는 글자다.
+ *
+ * 없는 번역을 이 자리에서 지어낼 수는 없다. 대신 선언이 이미 준 `name` 으로 물러난다 — 개발자가 적은
+ * 영어지만 점과 낙타등이 섞인 키보다는 읽힌다. 같은 규율이 `fieldLabel` 에 이미 있었고, 이 규칙이
+ * 다섯 자리에 흩어져 있어서 한 자리만 고쳐서는 나머지 넷이 그대로 남았다.
+ */
+export function declaredLabel(item) {
+    const name = String(item?.name ?? '');
+    return item?.tKey ? i18next.t(item.tKey, { defaultValue: name || item.tKey }) : name;
+}
+/**
+ * 얼마나 깊이 펼치나.
+ *
+ * 이 화면들이 받는 값은 액티비티가 정하므로 얼마나 깊을지 알 수 없다. 트윈의 작동 명령은 네 단이다
+ * (twinNow → attentions[0] → params → 값). 끝없이 펼치면 어떤 페이로드에서 화면이 통째로 페이로드가
+ * 되므로, 이 깊이를 넘으면 원문을 그대로 보인다 — 접는 것이 아니라 **다른 방식으로 보이는 것**이다.
+ */
+const MAX_DEPTH = 4;
+/**
+ * 값 한 칸.
+ *
+ * ── 오브젝트를 한 줄 JSON 으로 내지 않는다 (2026-09-07) ─────────────────────
+ * `JSON.stringify` 한 줄이었다. 트윈의 작동 명령을 열면 그 한 줄이 700자가 넘어서, 「업무 내용」이
+ * 읽을 수 없는 글자 덩어리 하나가 됐다. 값은 다 있는데 아무것도 읽히지 않는다.
+ *
+ * 화면은 이미 이름과 값을 두 칸으로 보이는 말을 갖고 있다(dl.given). 오브젝트도 그 말로 편다 —
+ * 새 표현을 만들지 않고, 안쪽이든 바깥쪽이든 같은 모양으로 읽힌다.
+ *
+ * 값이 없으면 빈 칸으로 두지 않는다 — 빈 칸은 값이 없는 것인지 화면이 못 낸 것인지 모른다.
+ */
+export function fieldValue(value, depth = 0) {
+    if (value === null || value === undefined || value === '') {
+        return html `<span class="none">${i18next.t('text.no-value')}</span>`;
+    }
+    if (typeof value === 'boolean') {
+        return i18next.t(value ? 'label.yes' : 'label.no', { defaultValue: String(value) });
+    }
+    if (typeof value !== 'object') {
+        return String(value);
+    }
+    /* 너무 깊으면 펼치기를 그만두고 원문을 보인다 — 없는 척하지 않는다. */
+    if (depth >= MAX_DEPTH) {
+        return html `<code>${JSON.stringify(value)}</code>`;
+    }
+    const laid = layOut(value, depth);
+    /*
+     * 맨 바깥 값에만 복사를 붙인다.
+     *
+     * 안쪽 단마다 달면 네 단짜리 페이로드에 단추가 열 개 넘게 붙어, 정작 읽으라고 편 값이 단추에
+     * 묻힌다. 사람이 가져가려는 것은 「이 항목」이다.
+     */
+    return depth === 0 ? html `<span class="payload">${copyButton(value)}${laid}</span>` : laid;
+}
+/**
+ * 이 값을 원문 그대로 가져간다.
+ *
+ * 화면이 편 글자가 아니라 JSON 을 준다 — 붙여 넣는 쪽(질의 · 로그 검색 · 문의 글)이 기대하는 것은
+ * 원문이다. 들여쓰기를 넣어 그대로 읽을 수 있게 한다.
+ *
+ * 눌러도 화면이 안 바뀌면 눌린 줄을 모른다. 그래서 잠깐 표시를 남긴다 — 이 조작에는 그것 말고
+ * 대답이 없다.
+ */
+function copyButton(value) {
+    const onCopy = async (e) => {
+        const button = e.currentTarget;
+        const mark = (attr) => {
+            button.toggleAttribute(attr, true);
+            setTimeout(() => button.toggleAttribute(attr, false), 1500);
+        };
+        try {
+            await navigator.clipboard.writeText(JSON.stringify(value, null, 2));
+        }
+        catch {
+            /*
+             * 클립보드는 브라우저가 막을 수 있다(보안 컨텍스트가 아니거나 권한이 없으면). 안 된 것을 된
+             * 것처럼 말하지 않고, 성공과 같은 크기로 보인다 — title 만 바꾸면 누른 사람 눈에는 아무 일도
+             * 안 일어난 것과 같다.
+             */
+            button.setAttribute('title', String(i18next.t('text.copy-failed')));
+            mark('failed');
+            return;
+        }
+        mark('done');
+    };
+    return html `
+    <button class="copy" type="button" title=${String(i18next.t('text.copy-payload'))} @click=${onCopy}>
+      <md-icon>content_copy</md-icon>${i18next.t('button.copy')}
+    </button>
+  `;
+}
+/** 값을 이름·값 두 칸으로 편다. 복사 단추는 여기 끼지 않는다 — 편 결과만 만든다. */
+function layOut(value, depth) {
+    if (Array.isArray(value)) {
+        /* 빈 배열은 「값 없음」이 아니다 — 「비어 있다」는 그 자체로 사실이다. */
+        if (value.length === 0) {
+            return html `<span class="none">${i18next.t('text.empty-list')}</span>`;
+        }
+        /*
+         * 배열은 깊이를 먹지 않는다 — **같은 것이 여러 개**이지 새로운 단이 아니다.
+         *
+         * 배열도 한 단으로 세었더니 트윈 작동 명령의 마지막 줄이 잘렸다: twinNow → attentions →
+         * attentions[0] → recommendedActions → { code } 에서 recommendedActions 의 항목이 다섯 번째가
+         * 되어, 정작 가장 단순한 { code: 'advice.raise-priority' } 하나가 JSON 원문으로 남았다.
+         * 사람이 세는 단은 넷이다.
+         */
+        return html `
+      <ol class="nested">
+        ${value.map(item => html `<li>${fieldValue(item, depth)}</li>`)}
+      </ol>
+    `;
+    }
+    const keys = Object.keys(value);
+    if (keys.length === 0) {
+        return html `<span class="none">${i18next.t('text.empty-object')}</span>`;
+    }
+    /*
+     * 안쪽 이름은 번역하지 않는다. 액티비티가 정한 키라 번역이 있을 리 없고, 없는 번역을 찾으면
+     * 「Label.MaterialDefinitionId」 같은 글자가 나온다 — 사용자에게 뜻이 없는 글자다.
+     */
+    return html `
+    <dl class="given nested">
+      ${keys.map(key => html `
+          <dt>${key}</dt>
+          <dd>${fieldValue(value[key], depth + 1)}</dd>
+        `)}
+    </dl>
+  `;
+}
+/**
+ * A person as a value - their name opens their 360 (ADR-0067 decision 1), and no one says so as
+ * `fieldValue` would. `entity360Name` draws plain text until the person kind is registered.
+ */
+export function personValue(person) {
+    return person?.name ? entity360Name(person) : fieldValue(undefined);
+}
+//# sourceMappingURL=activity-fields.js.map

package/dist-client/components/activity-fields.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"activity-fields.js","sourceRoot":"","sources":["../../client/components/activity-fields.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html } from 'lit'\n\nimport { i18next } from '@operato/i18n'\nimport { entity360Name } from '@operato/layout'\n\n/**\n * 업무 항목을 화면에 내는 방식 — **두 화면이 한 벌을 쓴다.**\n *\n * 업무 상세(activity-thread-page)와 결재 상세(activity-approval-page)는 거의 복사본이다. 항목을\n * 고르는 함수, 화면 종류에 따라 그리는 분기, 절을 그리는 부분이 두 파일에 같은 코드로 있었다.\n * 그래서 한쪽만 고치면 나머지가 그대로 남는다 — 실제로 그랬다(2026-09-06, 상세 화면의\n * Input · Output 영문 legend 를 고쳤는데 결재 화면에는 그대로 있었다).\n *\n * 화면마다 다른 것은 남긴다 — 상세는 결과를 적고, 결재는 읽기만 한다.\n */\n\n/** 절과 값 표의 모양. 카드 값은 SurfaceStyles 의 .ui-card 와 같다. */\nexport const ActivityFieldsStyles = css`\n  section {\n    margin: var(--spacing-large, 16px) var(--spacing-large, 16px) 0;\n    padding: 14px;\n    background: var(--ui-panel, #ffffff);\n    border: 1px solid var(--ui-line, #d5dce0);\n    border-radius: var(--ui-r, 10px);\n  }\n\n  section > h2 {\n    margin: 0 0 10px;\n    font-size: var(--ui-t-title, 15px);\n    font-weight: 600;\n    color: var(--ui-ink, #17242c);\n  }\n\n  /* 읽기만 하는 절 — 값을 바꿀 수 없다는 것이 보여야 한다. */\n  section[readonly] > h2 {\n    color: var(--ui-muted, #57676f);\n  }\n\n  /* 받은 값 — 이름과 값을 두 칸으로. 이름은 오른쪽 정렬이라 값의 왼쪽 끝이 한 줄로 선다. */\n  dl.given {\n    display: grid;\n    grid-template-columns: minmax(80px, max-content) 1fr;\n    gap: 7px var(--spacing-large, 16px);\n    margin: 0;\n  }\n\n  dl.given dt {\n    text-align: right;\n    color: var(--ui-muted, #57676f);\n    word-break: keep-all;\n  }\n\n  dl.given dd {\n    margin: 0;\n    color: var(--ui-ink, #17242c);\n    word-break: break-word;\n  }\n\n  dl.given .none {\n    color: var(--ui-faint, #8a959c);\n  }\n\n  dl.given code {\n    font-family: var(--ui-mono, ui-monospace, Menlo, monospace);\n    font-size: var(--ui-t-small, 11.5px);\n  }\n\n  /*\n   * 안쪽으로 펼친 오브젝트 · 배열.\n   *\n   * 바깥과 같은 두 칸 구조를 쓰되 **한 단 들여쓰고 왼쪽에 선을 긋는다.** 선이 없으면 세 단이 겹칠 때\n   * 어느 이름이 어느 값에 딸린 것인지 눈으로 못 가른다.\n   *\n   * 안쪽 이름은 왼쪽 정렬이다. 바깥은 오른쪽 정렬이라 값의 왼쪽 끝이 한 줄로 서는데(dl.given dt),\n   * 안쪽까지 그러면 단이 깊어질수록 이름이 값 쪽으로 밀려 붙는다.\n   */\n  dl.given .nested {\n    margin: 2px 0 0;\n    padding-left: 10px;\n    border-left: 1px solid var(--ui-line, #d5dce0);\n  }\n\n  dl.given dl.nested {\n    display: grid;\n    grid-template-columns: minmax(60px, max-content) 1fr;\n    gap: 4px var(--spacing-medium, 8px);\n  }\n\n  dl.given dl.nested dt {\n    text-align: left;\n    color: var(--ui-faint, #8a959c);\n    font-family: var(--ui-mono, ui-monospace, Menlo, monospace);\n    font-size: var(--ui-t-small, 11.5px);\n  }\n\n  /*\n   * 페이로드를 그대로 가져가는 자리.\n   *\n   * 화면은 값을 읽기 좋게 펴 놓지만, 이 값을 **다른 도구에 넣어 볼 일**이 있다 — 트윈 명령 하나가\n   * 네 단짜리 오브젝트이고, 그것을 손으로 옮겨 적을 수는 없다. 화면이 편 글자가 아니라 원문 JSON 을\n   * 준다. 붙여 넣는 쪽이 기대하는 것은 원문이다.\n   *\n   * 값 위에 얹지 않고 오른쪽 위 구석에 둔다 — 값이 한 줄일 때도 두 단 깊을 때도 자리가 같다.\n   */\n  dl.given dd:has(> .payload) {\n    position: relative;\n  }\n\n  .copy {\n    position: absolute;\n    top: 0;\n    right: 0;\n    display: inline-flex;\n    align-items: center;\n    gap: 3px;\n    padding: 1px 5px;\n    border: 1px solid var(--ui-line, #d5dce0);\n    border-radius: 999px;\n    background: var(--ui-panel, #ffffff);\n    color: var(--ui-muted, #57676f);\n    font-size: var(--ui-t-micro, 11px);\n    line-height: 16px;\n    cursor: pointer;\n  }\n\n  .copy md-icon {\n    font-size: 13px;\n    width: 13px;\n    height: 13px;\n  }\n\n  .copy:hover {\n    color: var(--ui-ink, #17242c);\n    border-color: var(--ui-muted, #57676f);\n  }\n\n  .copy:focus-visible {\n    outline: 2px solid var(--ui-accent, #00727e);\n    outline-offset: 1px;\n  }\n\n  /* 복사한 직후 — 눌린 것이 보여야 한다. 소리도 움직임도 없는 조작이라 이 표시가 유일한 대답이다. */\n  .copy[done] {\n    border-color: var(--ui-good, #297d39);\n    color: var(--ui-good, #297d39);\n  }\n\n  /*\n   * 못 했을 때도 **같은 크기로** 말한다.\n   *\n   * 처음에는 실패를 title 로만 적었다. 그러면 누른 사람 눈에는 아무 일도 안 일어난 것과 같고,\n   * 이유를 알려면 그 자리에 마우스를 올려 두어야 한다 — 손가락으로 쓰는 화면에는 그 길이 없다.\n   * 클립보드는 브라우저가 막을 수 있는 자리라(보안 컨텍스트가 아니거나 권한이 없으면) 실제로 나는 일이다.\n   */\n  .copy[failed] {\n    border-color: var(--ui-crit, #d14946);\n    color: var(--ui-crit, #d14946);\n  }\n\n  /* 배열 — 번호로 몇 번째인지 말한다. 순서가 뜻을 갖는 값이 온다(주의 목록 · 권장 조치). */\n  dl.given ol.nested {\n    list-style: decimal;\n    padding-left: 24px;\n  }\n\n  dl.given ol.nested li {\n    margin: 2px 0;\n  }\n\n  dl.given ol.nested li::marker {\n    color: var(--ui-faint, #8a959c);\n    font-size: var(--ui-t-small, 11.5px);\n  }\n\n  /*\n   * 빈 화면은 가장 중요한 자리다. 없다고만 하지 않고 왜 비어 있는지 적는다.\n   *\n   * 두 가지가 있다. 화면 전체가 비는 것(건을 못 읽었다)은 세로로 늘려 가운데에 두고, 절 자리가\n   * 비는 것(항목이 정의되지 않았다)은 **다른 절과 같은 카드**로 둔다. 절 하나가 없다고 해서\n   * 화면 높이를 다 쓰면 그 아래의 타임라인이 화면 밖으로 밀린다.\n   */\n  section[empty] {\n    display: flex;\n    flex: none;\n    flex-direction: column;\n    align-items: center;\n    gap: 6px;\n    padding: 28px 14px;\n    text-align: center;\n    color: var(--ui-muted, #57676f);\n  }\n\n  div[empty] {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    padding: var(--spacing-large, 16px);\n    text-align: center;\n    color: var(--ui-muted, #57676f);\n  }\n\n  [empty] .title {\n    font-size: var(--ui-t-title, 15px);\n    font-weight: 600;\n    color: var(--ui-ink, #17242c);\n  }\n\n  [empty] .why {\n    max-width: 40em;\n    font-size: var(--ui-t-body, 13px);\n    color: var(--ui-faint, #8a959c);\n    word-break: keep-all;\n  }\n`\n\n/**\n * 화면에 낼 항목을 고른다.\n *\n * hidden 을 지킨다. 전에는 이 선언을 보지 않았다 — 액티비티가 「이 항목은 보이지 않는다」고 적어\n * 두어도 화면에 나왔다. 편집기가 없는 타입(object 등)이라 조용히 빠졌을 뿐이고, 편집기가 있는\n * 타입이면 그대로 보였다. 값을 표로 그리기 시작하면서 실제로 드러났다 — 처분 승인 화면에\n * disposition 객체의 JSON 원문이 나왔다.\n */\nfunction specsOf(model: any[] | null | undefined, inouts: string[]) {\n  return (model || [])\n    .filter(item => !item.hidden)\n    .filter(item => inouts.includes(item.inout))\n    .map(item => ({\n      ...item,\n      name: item.tag,\n      label: item.tKey || item.name,\n      property: item.options\n    }))\n}\n\n/** 받은 값 — 업무를 시작할 때 함께 온 것. */\nexport function inputSpecOf(model: any[] | null | undefined) {\n  return specsOf(model, ['in', 'inout'])\n}\n\n/** 적어 낼 값 — 수행자가 채우는 것. */\nexport function outputSpecOf(model: any[] | null | undefined) {\n  return specsOf(model, ['out', 'inout'])\n}\n\n/**\n * 값을 **표로** 보인다. 입력칸으로 그리지 않는다.\n *\n * 전에는 읽기만 하는 절도 ox-properties-dynamic-view 로 그렸다. 그러면 값마다 흰 입력 상자가\n * 생기고 사용자는 고쳐 쓸 수 있는 것으로 읽는다. 그런데 그 절에는 변경을 받는 자리가 없다 —\n * 결재 화면은 아예 output 을 mutation 에 싣지 않는다(approveActivityApproval 은 id 와 comment 만\n * 보낸다). 「적을 수 있게 보이는데 적히지 않는 칸」이라 가장 나쁜 쪽이다.\n */\nexport function renderGiven(specs: any[], values: any) {\n  return html`\n    <dl class=\"given\">\n      ${specs.map(\n        spec => html`\n          <dt>${fieldLabel(spec)}</dt>\n          <dd>${fieldValue(values?.[spec.name])}</dd>\n        `\n      )}\n    </dl>\n  `\n}\n\n/**\n * 항목 이름 — ox-property-editor 와 같은 규칙으로 찾는다(그쪽은 label. 접두사를 스스로 붙인다).\n *\n * 번역이 없으면 **키를 그대로 보이지 않는다.** 전에는 label.because 가 없어서 화면에\n * Label.Because 가 나왔다. 사용자에게 뜻이 없는 글자다.\n *\n * description 으로 물러나지도 않는다 — 액티비티의 description 은 개발자가 영어로 적어 둔 설명이다\n * (예: \"The disposition waiting for approval\"). 한국어 화면에 영어 문장이 나오는 것보다 항목\n * 이름이 낫다.\n */\nexport function fieldLabel(spec: any): string {\n  const key = String(spec?.label ?? spec?.name ?? '')\n  const full = key.indexOf('label.') >= 0 ? key : 'label.' + key\n\n  return i18next.t(full, { defaultValue: spec?.name || key })\n}\n\n/**\n * 선언이 준 이름 — `tKey` 로 찾되, **없으면 키를 보이지 않는다.**\n *\n * 찾는 축(`searchKeys`)과 판단 자리(`decisionKeys`) 둘 다 이것을 쓴다. 두 선언이 같은 모양으로\n * 이름을 나른다 — `tKey` 가 있으면 그 키로, 없으면 `name` 으로.\n *\n * `fieldLabel` 과 규칙이 하나 다르다. 그쪽은 `label.` 을 스스로 붙이지만 여기는 안 붙인다 — 이 두\n * 선언의 `tKey` 는 선언한 모듈이 온전한 키로 적는다(plant 는 `field.lot`, twin 은 `twin.instance`).\n * 접두사를 붙이면 맞게 적은 키가 오히려 안 찾아진다.\n *\n * ── 왜 물러날 자리가 필요한가 (2026-09-16) ────────────────────────────────\n * i18next 는 없는 키를 **키 그대로** 돌려준다. 선언된 tKey 를 세어 보니 plant 는 서른 중 열아홉이,\n * twin 은 셋 다 다섯 언어 어디에도 없었다. 그래서 그 표가 「어느 로트」 자리에 `lotName` 을, 「누가\n * 냈나」 자리에 `twin.command-origin` 을 그리고 있다. 사용자에게 뜻이 없는 글자다.\n *\n * 없는 번역을 이 자리에서 지어낼 수는 없다. 대신 선언이 이미 준 `name` 으로 물러난다 — 개발자가 적은\n * 영어지만 점과 낙타등이 섞인 키보다는 읽힌다. 같은 규율이 `fieldLabel` 에 이미 있었고, 이 규칙이\n * 다섯 자리에 흩어져 있어서 한 자리만 고쳐서는 나머지 넷이 그대로 남았다.\n */\nexport function declaredLabel(item: any): string {\n  const name = String(item?.name ?? '')\n\n  return item?.tKey ? i18next.t(item.tKey, { defaultValue: name || item.tKey }) : name\n}\n\n/**\n * 얼마나 깊이 펼치나.\n *\n * 이 화면들이 받는 값은 액티비티가 정하므로 얼마나 깊을지 알 수 없다. 트윈의 작동 명령은 네 단이다\n * (twinNow → attentions[0] → params → 값). 끝없이 펼치면 어떤 페이로드에서 화면이 통째로 페이로드가\n * 되므로, 이 깊이를 넘으면 원문을 그대로 보인다 — 접는 것이 아니라 **다른 방식으로 보이는 것**이다.\n */\nconst MAX_DEPTH = 4\n\n/**\n * 값 한 칸.\n *\n * ── 오브젝트를 한 줄 JSON 으로 내지 않는다 (2026-09-07) ─────────────────────\n * `JSON.stringify` 한 줄이었다. 트윈의 작동 명령을 열면 그 한 줄이 700자가 넘어서, 「업무 내용」이\n * 읽을 수 없는 글자 덩어리 하나가 됐다. 값은 다 있는데 아무것도 읽히지 않는다.\n *\n * 화면은 이미 이름과 값을 두 칸으로 보이는 말을 갖고 있다(dl.given). 오브젝트도 그 말로 편다 —\n * 새 표현을 만들지 않고, 안쪽이든 바깥쪽이든 같은 모양으로 읽힌다.\n *\n * 값이 없으면 빈 칸으로 두지 않는다 — 빈 칸은 값이 없는 것인지 화면이 못 낸 것인지 모른다.\n */\nexport function fieldValue(value: any, depth = 0): unknown {\n  if (value === null || value === undefined || value === '') {\n    return html`<span class=\"none\">${i18next.t('text.no-value')}</span>`\n  }\n\n  if (typeof value === 'boolean') {\n    return i18next.t(value ? 'label.yes' : 'label.no', { defaultValue: String(value) })\n  }\n\n  if (typeof value !== 'object') {\n    return String(value)\n  }\n\n  /* 너무 깊으면 펼치기를 그만두고 원문을 보인다 — 없는 척하지 않는다. */\n  if (depth >= MAX_DEPTH) {\n    return html`<code>${JSON.stringify(value)}</code>`\n  }\n\n  const laid = layOut(value, depth)\n\n  /*\n   * 맨 바깥 값에만 복사를 붙인다.\n   *\n   * 안쪽 단마다 달면 네 단짜리 페이로드에 단추가 열 개 넘게 붙어, 정작 읽으라고 편 값이 단추에\n   * 묻힌다. 사람이 가져가려는 것은 「이 항목」이다.\n   */\n  return depth === 0 ? html`<span class=\"payload\">${copyButton(value)}${laid}</span>` : laid\n}\n\n/**\n * 이 값을 원문 그대로 가져간다.\n *\n * 화면이 편 글자가 아니라 JSON 을 준다 — 붙여 넣는 쪽(질의 · 로그 검색 · 문의 글)이 기대하는 것은\n * 원문이다. 들여쓰기를 넣어 그대로 읽을 수 있게 한다.\n *\n * 눌러도 화면이 안 바뀌면 눌린 줄을 모른다. 그래서 잠깐 표시를 남긴다 — 이 조작에는 그것 말고\n * 대답이 없다.\n */\nfunction copyButton(value: any) {\n  const onCopy = async (e: Event) => {\n    const button = e.currentTarget as HTMLElement\n\n    const mark = (attr: 'done' | 'failed') => {\n      button.toggleAttribute(attr, true)\n      setTimeout(() => button.toggleAttribute(attr, false), 1500)\n    }\n\n    try {\n      await navigator.clipboard.writeText(JSON.stringify(value, null, 2))\n    } catch {\n      /*\n       * 클립보드는 브라우저가 막을 수 있다(보안 컨텍스트가 아니거나 권한이 없으면). 안 된 것을 된\n       * 것처럼 말하지 않고, 성공과 같은 크기로 보인다 — title 만 바꾸면 누른 사람 눈에는 아무 일도\n       * 안 일어난 것과 같다.\n       */\n      button.setAttribute('title', String(i18next.t('text.copy-failed')))\n      mark('failed')\n      return\n    }\n\n    mark('done')\n  }\n\n  return html`\n    <button class=\"copy\" type=\"button\" title=${String(i18next.t('text.copy-payload'))} @click=${onCopy}>\n      <md-icon>content_copy</md-icon>${i18next.t('button.copy')}\n    </button>\n  `\n}\n\n/** 값을 이름·값 두 칸으로 편다. 복사 단추는 여기 끼지 않는다 — 편 결과만 만든다. */\nfunction layOut(value: any, depth: number): unknown {\n  if (Array.isArray(value)) {\n    /* 빈 배열은 「값 없음」이 아니다 — 「비어 있다」는 그 자체로 사실이다. */\n    if (value.length === 0) {\n      return html`<span class=\"none\">${i18next.t('text.empty-list')}</span>`\n    }\n\n    /*\n     * 배열은 깊이를 먹지 않는다 — **같은 것이 여러 개**이지 새로운 단이 아니다.\n     *\n     * 배열도 한 단으로 세었더니 트윈 작동 명령의 마지막 줄이 잘렸다: twinNow → attentions →\n     * attentions[0] → recommendedActions → { code } 에서 recommendedActions 의 항목이 다섯 번째가\n     * 되어, 정작 가장 단순한 { code: 'advice.raise-priority' } 하나가 JSON 원문으로 남았다.\n     * 사람이 세는 단은 넷이다.\n     */\n    return html`\n      <ol class=\"nested\">\n        ${value.map(item => html`<li>${fieldValue(item, depth)}</li>`)}\n      </ol>\n    `\n  }\n\n  const keys = Object.keys(value)\n\n  if (keys.length === 0) {\n    return html`<span class=\"none\">${i18next.t('text.empty-object')}</span>`\n  }\n\n  /*\n   * 안쪽 이름은 번역하지 않는다. 액티비티가 정한 키라 번역이 있을 리 없고, 없는 번역을 찾으면\n   * 「Label.MaterialDefinitionId」 같은 글자가 나온다 — 사용자에게 뜻이 없는 글자다.\n   */\n  return html`\n    <dl class=\"given nested\">\n      ${keys.map(\n        key => html`\n          <dt>${key}</dt>\n          <dd>${fieldValue(value[key], depth + 1)}</dd>\n        `\n      )}\n    </dl>\n  `\n}\n\n/**\n * A person as a value - their name opens their 360 (ADR-0067 decision 1), and no one says so as\n * `fieldValue` would. `entity360Name` draws plain text until the person kind is registered.\n */\nexport function personValue(person?: { name?: string } | null): unknown {\n  return person?.name ? entity360Name(person) : fieldValue(undefined)\n}\n"]}

package/dist-client/components/activity-instance-preview.d.ts

@@ -0,0 +1,2 @@
+import '@material/web/button/elevated-button.js';
+import '@operato/property-editor/ox-properties-dynamic-view.js';

package/dist-client/components/activity-instance-preview.js

@@ -0,0 +1,177 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/button/elevated-button.js';
+import '@operato/property-editor/ox-properties-dynamic-view.js';
+import gql from 'graphql-tag';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { client } from '@operato/graphql';
+import { i18next, localize } from '@operato/i18n';
+import { canPick } from './can-pick.js';
+import { ranMutation } from './say-outcome.js';
+import { notify } from '@operato/layout';
+import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles';
+let ActivityInstancePreview = class ActivityInstancePreview extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.activityInstance = {};
+        this.picked = false;
+    }
+    static { this.styles = [
+        CommonHeaderStyles,
+        ScrollbarStyles,
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: var(--md-sys-color-surface);
+      }
+
+      content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        padding: var(--spacing-medium);
+        overflow: auto;
+      }
+
+      section {
+        display: flex;
+        flex-direction: column;
+      }
+
+      #description {
+        height: 60px;
+      }
+    `
+    ]; }
+    render() {
+        const { id, name, description, input, state, threadsMin = 0, threadsMax = 0, activity } = this.activityInstance || {};
+        const { model, thumbnail } = activity || {};
+        const inputSpec = (model || [])
+            .filter(item => item.inout === 'in' || item.inout === 'inout')
+            .map(item => {
+            return {
+                ...item,
+                label: item.name
+            };
+        });
+        const pickable = canPick(this.activityInstance, this.picked);
+        return html `
+      <content>
+        <section>
+          <h2>mission statement</h2>
+          <div>title: ${name}</div>
+          <div>${description}</div>
+          <div>min-max: ${threadsMin} - ${threadsMax}</div>
+          <img src=${thumbnail} />
+        </section>
+
+        <label>Input</label>
+        ${!model
+            ? html ``
+            : html `
+              <ox-properties-dynamic-view
+                .props=${inputSpec}
+                .value=${input}
+                @property-change=${e => {
+                this.activityInstance.input = e.currentTarget.value;
+                console.log('activity-instance', this.activityInstance.input);
+            }}
+              ></ox-properties-dynamic-view>
+            `}
+      </content>
+
+      <div class="footer">
+        <div filler></div>
+        <button @click=${e => history.back()}><md-icon>close</md-icon>${i18next.t('button.close')}</button>
+        ${pickable
+            ? html `<button @click=${this.pickActivityInstance.bind(this)} done>
+              <md-icon>done</md-icon>${i18next.t('button.pick')}
+            </button>`
+            : html ``}
+      </div>
+    `;
+    }
+    updated(changes) {
+        if (changes.has('activityInstanceId')) {
+            this.fetchAll(this.activityInstanceId);
+        }
+    }
+    async fetchAll(id) {
+        const response = await client.query({
+            query: gql `
+        {
+          activityInstance(id: "${id}") {
+            id
+            name
+            description
+            input
+            state
+            threadsMin
+            threadsMax
+            activity {
+              id
+              name
+              description
+              state
+              thumbnail
+              model {
+                name
+                description
+                active
+                tag
+                inout
+                type
+                unit
+                options
+                quantifier
+                spec
+              }
+            }
+          }
+
+        }
+      `
+        });
+        this.activityInstance = response.data.activityInstance;
+    }
+    async pickActivityInstance() {
+        const outcome = await ranMutation(() => client.mutate({
+            mutation: gql `
+        mutation ($id: String!) {
+          pickActivityInstance(id: $id) {
+            id
+          }
+        }
+      `,
+            variables: {
+                id: this.activityInstanceId
+            }
+        }));
+        if (outcome.ok) {
+            this.picked = true;
+            notify({
+                message: i18next.t('text.info_x_successfully', {
+                    x: `${i18next.t('label.activity-instance')} ${i18next.t('text.pick')}`
+                })
+            });
+        }
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], ActivityInstancePreview.prototype, "activityInstanceId", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], ActivityInstancePreview.prototype, "activityInstance", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], ActivityInstancePreview.prototype, "picked", void 0);
+ActivityInstancePreview = __decorate([
+    customElement('activity-instance-preview')
+], ActivityInstancePreview);
+//# sourceMappingURL=activity-instance-preview.js.map

package/dist-client/components/activity-instance-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"activity-instance-preview.js","sourceRoot":"","sources":["../../client/components/activity-instance-preview.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/elevated-button.js'\nimport '@operato/property-editor/ox-properties-dynamic-view.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\n\nimport { canPick } from './can-pick.js'\nimport { ranMutation } from './say-outcome.js'\nimport { notify } from '@operato/layout'\nimport { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'\n\n@customElement('activity-instance-preview')\nclass ActivityInstancePreview extends localize(i18next)(LitElement) {\n  static styles = [\n    CommonHeaderStyles,\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        background-color: var(--md-sys-color-surface);\n      }\n\n      content {\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n        padding: var(--spacing-medium);\n        overflow: auto;\n      }\n\n      section {\n        display: flex;\n        flex-direction: column;\n      }\n\n      #description {\n        height: 60px;\n      }\n    `\n  ]\n\n  @property({ type: String }) activityInstanceId?: string\n  @property({ type: Object }) activityInstance: any = {}\n\n  @state() picked: boolean = false\n\n  render() {\n    const {\n      id,\n      name,\n      description,\n      input,\n      state,\n      threadsMin = 0,\n      threadsMax = 0,\n      activity\n    } = this.activityInstance || {}\n    const { model, thumbnail } = activity || {}\n\n    const inputSpec = (model || [])\n      .filter(item => item.inout === 'in' || item.inout === 'inout')\n      .map(item => {\n        return {\n          ...item,\n          label: item.name\n        }\n      })\n\n    const pickable = canPick(this.activityInstance, this.picked)\n\n    return html`\n      <content>\n        <section>\n          <h2>mission statement</h2>\n          <div>title: ${name}</div>\n          <div>${description}</div>\n          <div>min-max: ${threadsMin} - ${threadsMax}</div>\n          <img src=${thumbnail} />\n        </section>\n\n        <label>Input</label>\n        ${!model\n          ? html``\n          : html`\n              <ox-properties-dynamic-view\n                .props=${inputSpec}\n                .value=${input}\n                @property-change=${e => {\n                  this.activityInstance.input = e.currentTarget.value\n                  console.log('activity-instance', this.activityInstance.input)\n                }}\n              ></ox-properties-dynamic-view>\n            `}\n      </content>\n\n      <div class=\"footer\">\n        <div filler></div>\n        <button @click=${e => history.back()}><md-icon>close</md-icon>${i18next.t('button.close')}</button>\n        ${pickable\n          ? html`<button @click=${this.pickActivityInstance.bind(this)} done>\n              <md-icon>done</md-icon>${i18next.t('button.pick')}\n            </button>`\n          : html``}\n      </div>\n    `\n  }\n\n  updated(changes) {\n    if (changes.has('activityInstanceId')) {\n      this.fetchAll(this.activityInstanceId)\n    }\n  }\n\n  async fetchAll(id) {\n    const response = await client.query({\n      query: gql`\n        {\n          activityInstance(id: \"${id}\") {\n            id\n            name\n            description\n            input\n            state\n            threadsMin\n            threadsMax\n            activity {\n              id\n              name\n              description\n              state\n              thumbnail\n              model {\n                name\n                description\n                active\n                tag\n                inout\n                type\n                unit\n                options\n                quantifier\n                spec\n              }\n            }\n          }\n\n        }\n      `\n    })\n\n    this.activityInstance = response.data.activityInstance\n  }\n\n  async pickActivityInstance() {\n    const outcome = await ranMutation(() => client.mutate({\n      mutation: gql`\n        mutation ($id: String!) {\n          pickActivityInstance(id: $id) {\n            id\n          }\n        }\n      `,\n      variables: {\n        id: this.activityInstanceId\n      }\n    }))\n\n    if (outcome.ok) {\n      this.picked = true\n      notify({\n        message: i18next.t('text.info_x_successfully', {\n          x: `${i18next.t('label.activity-instance')} ${i18next.t('text.pick')}`\n        })\n      })\n    }\n  }\n}\n"]}