@things-factory/worklist 10.0.19 → 10.1.0

package/dist-client/pages/activity-thread/activity-thread-view-page.js

@@ -4,20 +4,23 @@ import '../../components/activity-thread-ribon.js';
 import '../../components/activity-thread-timeline.js';
 import './activity-thread-view.js';
 import gql from 'graphql-tag';
-import { css, html } from 'lit';
+import { css, html, nothing } from 'lit';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
-import { customElement, query, state } from 'lit/decorators.js';
+import { customElement, state } from 'lit/decorators.js';
 import { keyed } from 'lit/directives/keyed.js';
 import { client } from '@operato/graphql';
 import { i18next, localize } from '@operato/i18n';
 import { PageView } from '@operato/shell';
 import { ScrollbarStyles, CommonButtonStyles } from '@operato/styles';
 import { provider } from '@things-factory/board-ui/dist-client/board-provider.js';
+import { ActivityFieldsStyles } from '../../components/activity-fields.js';
 const ActivityThreadFetchResult = `\
 {   id
   state
   dueAt
   assignedAt
+  startedAt
+  terminatedAt
   assignee {     id
     name
  }
@@ -56,6 +59,7 @@ const ActivityThreadFetchResult = `\
         options
         quantifier
         spec
+        hidden
  }
  }
     approvalLine {       type
@@ -88,48 +92,107 @@ export const ActivityThreadStatus = { Unassigned: 'unassigned',
     Aborted: 'aborted'
 };
 let ActivityThreadViewPage = class ActivityThreadViewPage extends localize(i18next)(PageView) {
+    constructor() {
+        super(...arguments);
+        /**
+         * 조회를 마쳤나 — **「아직 안 읽었다」와 「없다」는 다르다.**
+         *
+         * 목록에서 줄을 눌러 들어온 사람이 방금 본 건이 없다는 말을 먼저 읽지 않게, 조회가 끝난 뒤에만
+         * 그 말을 한다.
+         */
+        this.loaded = false;
+    }
     static { this.styles = [
         ScrollbarStyles,
+        ActivityFieldsStyles,
         css `
-      :host {         display: flex;
+      :host {
+        display: flex;
         flex-direction: column;
 
         width: 100%;
         overflow: auto;
- }
+        background: var(--ui-bg, #f0f2f4);
+        color: var(--ui-ink, #17242c);
+        font-size: var(--ui-t-body, 13px);
+      }
 
-      ox-board-viewer {         width: 100%;
-        height: 100%;
- }
+      /* 카드가 담아 주므로 안에 들어오는 화면은 자기 면과 여백을 갖지 않는다. */
+      /*
+       * ── 줄어들지 않는다 — 줄어들면 본문이 잘린다 (2026-09-07) ──────────────
+       * 이 칸은 flex 항목인데 크기를 안 정해 두어 기본값 flex: 0 1 auto 로 있었다. **1 이
+       * 줄어든다는 뜻이다** — 세로가 모자라면 브라우저가 이 칸부터 줄인다. 그런데 여기엔
+       * overflow: hidden 이 걸려 있어서(카드 모서리를 따라 자르려고) 줄어든 만큼이 **스크롤도
+       * 없이 사라진다.**
+       *
+       * 실측(1400x620): 이 칸이 242px 로 줄었는데 안의 내용은 362px 이었다. 「업무 내용」 절이
+       * 276~464 에 있어 대부분이 잘렸고, 잘린 자리 바로 아래에서 타임라인이 시작하니 **타임라인이
+       * 본문을 덮은 것처럼** 보였다. 세로가 넉넉한 화면에서는 줄일 일이 없어 드러나지 않았다.
+       *
+       * 안에 오는 것은 셋 다 문서다(template · custom-element · 생성된 절 카드들). 높이를 정해
+       * 주어야 하는 것은 board 뿐이고 board 는 이 칸을 거치지 않는다(activityContent 참조).
+       * 문서는 제 높이로 서고, 화면이 모자라면 **페이지 전체가 스크롤한다** — :host 의
+       * overflow: auto 가 이미 그 자리다.
+       */
+      section[hosted] {
+        flex: none;
+        padding: 0;
+        overflow: hidden;
+      }
 
-      activity-thread-view {         padding: var(--spacing-medium);
- }
+      /*
+       * 끝난 업무를 읽는 화면은 절이 여럿이라(기본 정보 · 업무 정보 · 수행 결과) 카드를 한 겹 더
+       * 두르지 않는다. 절들이 곧 카드다.
+       */
+      section[hosted][plain] {
+        margin: 0;
+        background: none;
+        border: none;
+        border-radius: 0;
+      }
 
-      activity-thread-timeline {         margin: var(--spacing-medium);
- }
+      ox-board-viewer {
+        width: 100%;
+        height: 100%;
+      }
 
-      #custom-content {         flex: 1;
- }
+      /*
+       * 여백을 주지 않는다 — **안에 든 절들이 이미 자기 여백을 갖는다.**
+       *
+       * 여기에 padding 을 두면 두 겹이 된다. 실측으로 확인했다: 안쪽 절의 왼쪽이 233px,
+       * 타임라인이 221px 이었다(--spacing-large 는 이 앱에서 12px 이다). 한 화면에서 카드마다
+       * 왼쪽 기준선이 달랐다.
+       */
+      activity-thread-view {
+        display: block;
+      }
 
-      [empty] {         flex: 1;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        align-self: center;
-        color: var(--md-sys-color-on-surface-variant);
-        font: var(--md-sys-typescale-title-medium);
-        opacity: 0.7;
- }
+      activity-thread-timeline {
+        margin: var(--spacing-large, 16px);
+      }
+
+      #custom-content {
+        flex: 1;
+      }
 
-      @media print {         :host {           display: block;
+      @media print {
+        :host {
+          display: block;
           overflow: visible;
- }
- }
+        }
+      }
     `
     ]; }
     get context() {
         return { title: this.lifecycle?.params?.['title'] || i18next.t('title.activity'),
             help: 'worklist/activity-thread-view-page',
+            /*
+             * 이 화면은 메뉴에 없다 — 「완료」에서 줄을 눌러 들어온다. 그래서 왼쪽 메뉴가 가리킬
+             * 항목이 없고, 표시가 사라져 들어온 사람이 자기가 어디에 있는지 잃는다.
+             *
+             * 어느 목록에서 열리는지는 이 화면이 안다. 그것을 적어 둔다.
+             */
+            menu: 'done-list',
             actions: [
                 { title: i18next.t('button.close'),
                     action: () => {
@@ -144,24 +207,33 @@ let ActivityThreadViewPage = class ActivityThreadViewPage extends localize(i18ne
     render() {
         const activityThread = this.activityThread;
         if (!activityThread) {
-            return html `<div empty>${i18next.t('text.no activity thread info')}</div> `;
+            return this.loaded
+                ? html `<div empty>
+            <span class="title">${i18next.t('text.no activity thread info')}</span>
+            <span class="why">${i18next.t('text.no-activity-thread-why')}</span>
+          </div>`
+                : nothing;
         }
         return html `
       <activity-thread-ribon .activityThread=${activityThread}></activity-thread-ribon>
       ${this.activityContent()}
-      <activity-thread-timeline .activityThread=${activityThread} short-form></activity-thread-timeline>
+      <!--
+        여기서는 편다 — 끝난 업무를 보러 온 화면이라 「어떻게 여기까지 왔나」가 곧 본문이다.
+      -->
+      <activity-thread-timeline .activityThread=${activityThread} open short-form></activity-thread-timeline>
     `;
     }
     activityContent() {
         switch (this.activityThread?.activityInstance?.viewType) {
             case 'template':
-                return this.templateContent();
+                return this.hostedContent(this.templateContent());
             case 'generated':
                 return this.generatedContent();
+            /* board 는 전체 화면을 쓰는 캔버스라 카드에 담지 않는다. */
             case 'board':
                 return this.boardContent();
             case 'custom-element':
-                return this.customElementContent();
+                return this.hostedContent(this.customElementContent());
             case 'page':
             case 'external':
                 return html ``;
@@ -169,6 +241,14 @@ let ActivityThreadViewPage = class ActivityThreadViewPage extends localize(i18ne
                 return this.generatedContent();
         }
     }
+    /**
+     * 화면 종류가 달라도 같은 자리에 같은 모양으로 놓인다(activity-approval-page 의 같은 이름 참조).
+     *
+     * plain 은 안에 들어오는 것이 이미 절 카드 여럿을 갖고 있을 때다 — 카드를 두 겹 두르지 않는다.
+     */
+    hostedContent(content, plain = false) {
+        return html `<section hosted ?plain=${plain}>${content}</section>`;
+    }
     templateContent() {
         if (!this.activityThread) {
             return html ``;
@@ -176,35 +256,15 @@ let ActivityThreadViewPage = class ActivityThreadViewPage extends localize(i18ne
         const { viewSource: template } = this.activityThread?.activityInstance;
         return unsafeHTML(template);
     }
-    getInputSpec() {
-        const model = this.activityThread?.activityInstance?.activity?.model;
-        return (model || [])
-            .filter(item => item.inout === 'in' || item.inout === 'inout')
-            .map(item => {
-            return { ...item,
-                name: item.tag,
-                label: item.tKey || item.name,
-                property: item.options
-            };
-        });
-    }
-    getOutputSpec() {
-        const model = this.activityThread?.activityInstance?.activity?.model;
-        return (model || [])
-            .filter(item => item.inout === 'inout' || item.inout === 'out')
-            .map(item => {
-            return { ...item,
-                name: item.tag,
-                label: item.tKey || item.name,
-                property: item.options
-            };
-        });
-    }
     generatedContent() {
         if (!this.activityThread) {
             return html ``;
         }
-        return keyed(this.activityThread.id, html ` <activity-thread-view .activityThreadId=${this.activityThread.id}></activity-thread-view> `);
+        /*
+         * id 가 아니라 **값을 넘긴다.** 전에는 id 만 주고 그쪽이 스스로 다시 조회했다 — 이 화면이 이미
+         * 같은 건을 조회한 뒤라서 한 번 열면 같은 질의가 두 번 나갔다.
+         */
+        return keyed(this.activityThread.id, this.hostedContent(html `<activity-thread-view .activityThread=${this.activityThread}></activity-thread-view>`, true));
     }
     boardContent() {
         if (!this.activityThread) {
@@ -247,14 +307,6 @@ let ActivityThreadViewPage = class ActivityThreadViewPage extends localize(i18ne
         });
         return element;
     }
-    getOutputFromBoard() {
-        const outputSpec = this.getOutputSpec();
-        const data = this.oxBoardViewer.getSceneValues();
-        return outputSpec.reduce((output, spec) => {
-            output[spec.name] = data[spec.name];
-            return output;
-        }, {});
-    }
     updated(changes) {
         if (changes.has('activityThread')) {
             this.updateContext();
@@ -274,6 +326,7 @@ let ActivityThreadViewPage = class ActivityThreadViewPage extends localize(i18ne
             }
         });
         this.activityThread = response.data.activityThread;
+        this.loaded = true;
         this.updateContext();
     }
 };
@@ -284,11 +337,11 @@ __decorate([
 __decorate([
     state(),
     __metadata("design:type", Object)
-], ActivityThreadViewPage.prototype, "board", void 0);
+], ActivityThreadViewPage.prototype, "loaded", void 0);
 __decorate([
-    query('ox-board-viewer'),
+    state(),
     __metadata("design:type", Object)
-], ActivityThreadViewPage.prototype, "oxBoardViewer", void 0);
+], ActivityThreadViewPage.prototype, "board", void 0);
 ActivityThreadViewPage = __decorate([
     customElement('activity-thread-view-page')
 ], ActivityThreadViewPage);

package/dist-client/pages/activity-thread/activity-thread-view-page.js.map

@@ -1 +1 @@
-{"version":3,"file":"activity-thread-view-page.js","sourceRoot":"","sources":["../../../client/pages/activity-thread/activity-thread-view-page.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/board/ox-board-viewer.js'\nimport '../../components/activity-thread-ribon.js'\nimport '../../components/activity-thread-timeline.js'\nimport './activity-thread-view.js'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { DirectiveResult } from 'lit-html/directive.js'\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { keyed } from 'lit/directives/keyed.js'\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { PageView } from '@operato/shell'\nimport { ScrollbarStyles, CommonButtonStyles } from '@operato/styles'\nimport { provider } from '@things-factory/board-ui/dist-client/board-provider.js'\n\nconst ActivityThreadFetchResult = `\\\n{   id\n  state\n  dueAt\n  assignedAt\n  assignee {     id\n    name\n }\n  output\n  round\n  activityApprovals {     round\n    order\n    approver {       name\n }\n    judgment\n    comment\n    createdAt\n    updatedAt\n    terminatedAt\n }\n  activityThreadHistories {     transaction\n    reason\n    updater {       name\n }\n    updatedAt\n    state\n    output\n }\n  activityInstance {     id\n    name\n    description\n    state\n    activity {       id\n      model {         name\n        description\n        active\n        tag\n        inout\n        type\n        unit\n        options\n        quantifier\n        spec\n }\n }\n    approvalLine {       type\n      value\n      approver {         id\n        name\n        description\n        controlNo\n }\n }\n    thumbnail\n    input\n    output\n    viewType\n    viewSource\n    dueAt\n    terminatedAt\n    terminator {       name\n      email\n }\n    createdAt\n }\n}`\n\nexport const ActivityThreadStatus = {   Unassigned: 'unassigned',\n  Assigned: 'assigned',\n  Started: 'started',\n  Delegated: 'delegated',\n  Rejected: 'rejected',\n  Ended: 'ended',\n  Aborted: 'aborted'\n}\n\n@customElement('activity-thread-view-page')\nexport class ActivityThreadViewPage extends localize(i18next)(PageView) {   static styles = [\n    ScrollbarStyles,\n    css`\n      :host {         display: flex;\n        flex-direction: column;\n\n        width: 100%;\n        overflow: auto;\n }\n\n      ox-board-viewer {         width: 100%;\n        height: 100%;\n }\n\n      activity-thread-view {         padding: var(--spacing-medium);\n }\n\n      activity-thread-timeline {         margin: var(--spacing-medium);\n }\n\n      #custom-content {         flex: 1;\n }\n\n      [empty] {         flex: 1;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        align-self: center;\n        color: var(--md-sys-color-on-surface-variant);\n        font: var(--md-sys-typescale-title-medium);\n        opacity: 0.7;\n }\n\n      @media print {         :host {           display: block;\n          overflow: visible;\n }\n }\n    `\n  ]\n\n  @state() activityThread: any\n  @state() board: any\n\n  get context() {     return {       title: this.lifecycle?.params?.['title'] || i18next.t('title.activity'),\n      help: 'worklist/activity-thread-view-page',\n      actions: [\n        {           title: i18next.t('button.close'),\n          action: () => {             history.back()\n },\n          ...CommonButtonStyles.back\n }\n      ]\n      // activityThread: this.activityThread\n }\n }\n\n  render() {     const activityThread = this.activityThread\n\n    if (!activityThread) {       return html`<div empty>${i18next.t('text.no activity thread info')}</div> `\n }\n\n    return html`\n      <activity-thread-ribon .activityThread=${activityThread}></activity-thread-ribon>\n      ${this.activityContent()}\n      <activity-thread-timeline .activityThread=${activityThread} short-form></activity-thread-timeline>\n    `\n }\n\n  activityContent() {     switch (this.activityThread?.activityInstance?.viewType) {       case 'template':\n        return this.templateContent()\n      case 'generated':\n        return this.generatedContent()\n      case 'board':\n        return this.boardContent()\n      case 'custom-element':\n        return this.customElementContent()\n      case 'page':\n      case 'external':\n        return html``\n      default:\n        return this.generatedContent()\n }\n }\n\n  templateContent() {     if (!this.activityThread) {       return html``\n }\n\n    const { viewSource: template } = this.activityThread?.activityInstance\n    return unsafeHTML(template)\n }\n\n  getInputSpec() {     const model = this.activityThread?.activityInstance?.activity?.model\n\n    return (model || [])\n      .filter(item => item.inout === 'in' || item.inout === 'inout')\n      .map(item => {         return {           ...item,\n          name: item.tag,\n          label: item.tKey || item.name,\n          property: item.options\n }\n })\n }\n\n  getOutputSpec() {     const model = this.activityThread?.activityInstance?.activity?.model\n\n    return (model || [])\n      .filter(item => item.inout === 'inout' || item.inout === 'out')\n      .map(item => {         return {           ...item,\n          name: item.tag,\n          label: item.tKey || item.name,\n          property: item.options\n }\n })\n }\n\n  generatedContent(): DirectiveResult {     if (!this.activityThread) {       return html``\n }\n\n    return keyed(\n      this.activityThread.id,\n      html` <activity-thread-view .activityThreadId=${this.activityThread.id}></activity-thread-view> `\n    )\n }\n\n  boardContent(): DirectiveResult {     if (!this.activityThread) {       return html``\n }\n\n    const { output, activityInstance } = this.activityThread\n    const { viewSource: boardId, input } = activityInstance || {}\n\n    if (!this.board || this.board.id !== boardId) {       this.board = {         id: boardId\n }\n }\n\n    /* \n      ox-board-viewer에서 provider에 의해 공급되는 board가 각 id별로 instance를 하나씩 밖에 가지지 않으므로,\n      동일한 id의 보드를 다른 page에 뺏기는 경우가 있다.\n      따라서, Page가 active될 때마다 타임스탬프를 refresh key로 설정하였다.\n      */\n    return keyed(\n      this.activityThread.id,\n      html`\n        <ox-board-viewer\n          style=\"background-color: white;\"\n          .board=${this.board}\n          .provider=${provider}\n          .values=${{ ...input, ...output }}\n          hide-fullscreen\n          hide-navigation\n        ></ox-board-viewer>\n      `\n    )\n }\n\n  customElementContent() {     if (!this.activityThread) {       return html``\n }\n\n    const { output, activityInstance } = this.activityThread\n    const { viewSource: tagName, input } = activityInstance || {}\n\n    const element = document.createElement(tagName)\n    element.id = 'custom-content'\n    element.input = input\n    element.output = output\n    element.addEventListener('change', (e: CustomEvent) => {       this.activityThread.output = e.detail\n })\n\n    return element\n }\n\n  @query('ox-board-viewer') oxBoardViewer: any\n\n  getOutputFromBoard() {     const outputSpec = this.getOutputSpec()\n    const data = this.oxBoardViewer.getSceneValues()\n\n    return outputSpec.reduce((output, spec) => {       output[spec.name] = data[spec.name]\n      return output\n }, {})\n }\n\n  updated(changes) {     if (changes.has('activityThread')) {       this.updateContext()\n }\n }\n\n  async pageUpdated(changes, lifecycle, changedBefore) {     if (this.active) {       this.fetchActivityThread(lifecycle.resourceId)\n }\n }\n\n  async fetchActivityThread(id) {     const response = await client.query({       query: gql`\n        query activityThread($id: String!) {           activityThread(id: $id) ${ActivityThreadFetchResult}\n }\n      `,\n      variables: {         id\n }\n })\n\n    this.activityThread = response.data.activityThread\n\n    this.updateContext()\n }\n}\n"]}
+{"version":3,"file":"activity-thread-view-page.js","sourceRoot":"","sources":["../../../client/pages/activity-thread/activity-thread-view-page.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/board/ox-board-viewer.js'\nimport '../../components/activity-thread-ribon.js'\nimport '../../components/activity-thread-timeline.js'\nimport './activity-thread-view.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, nothing } from 'lit'\nimport { DirectiveResult } from 'lit-html/directive.js'\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { keyed } from 'lit/directives/keyed.js'\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { PageView } from '@operato/shell'\nimport { ScrollbarStyles, CommonButtonStyles } from '@operato/styles'\nimport { provider } from '@things-factory/board-ui/dist-client/board-provider.js'\n\nimport { ActivityFieldsStyles } from '../../components/activity-fields.js'\n\nconst ActivityThreadFetchResult = `\\\n{   id\n  state\n  dueAt\n  assignedAt\n  startedAt\n  terminatedAt\n  assignee {     id\n    name\n }\n  output\n  round\n  activityApprovals {     round\n    order\n    approver {       name\n }\n    judgment\n    comment\n    createdAt\n    updatedAt\n    terminatedAt\n }\n  activityThreadHistories {     transaction\n    reason\n    updater {       name\n }\n    updatedAt\n    state\n    output\n }\n  activityInstance {     id\n    name\n    description\n    state\n    activity {       id\n      model {         name\n        description\n        active\n        tag\n        inout\n        type\n        unit\n        options\n        quantifier\n        spec\n        hidden\n }\n }\n    approvalLine {       type\n      value\n      approver {         id\n        name\n        description\n        controlNo\n }\n }\n    thumbnail\n    input\n    output\n    viewType\n    viewSource\n    dueAt\n    terminatedAt\n    terminator {       name\n      email\n }\n    createdAt\n }\n}`\n\nexport const ActivityThreadStatus = {   Unassigned: 'unassigned',\n  Assigned: 'assigned',\n  Started: 'started',\n  Delegated: 'delegated',\n  Rejected: 'rejected',\n  Ended: 'ended',\n  Aborted: 'aborted'\n}\n\n@customElement('activity-thread-view-page')\nexport class ActivityThreadViewPage extends localize(i18next)(PageView) {   static styles = [\n    ScrollbarStyles,\n    ActivityFieldsStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        width: 100%;\n        overflow: auto;\n        background: var(--ui-bg, #f0f2f4);\n        color: var(--ui-ink, #17242c);\n        font-size: var(--ui-t-body, 13px);\n      }\n\n      /* 카드가 담아 주므로 안에 들어오는 화면은 자기 면과 여백을 갖지 않는다. */\n      /*\n       * ── 줄어들지 않는다 — 줄어들면 본문이 잘린다 (2026-09-07) ──────────────\n       * 이 칸은 flex 항목인데 크기를 안 정해 두어 기본값 flex: 0 1 auto 로 있었다. **1 이\n       * 줄어든다는 뜻이다** — 세로가 모자라면 브라우저가 이 칸부터 줄인다. 그런데 여기엔\n       * overflow: hidden 이 걸려 있어서(카드 모서리를 따라 자르려고) 줄어든 만큼이 **스크롤도\n       * 없이 사라진다.**\n       *\n       * 실측(1400x620): 이 칸이 242px 로 줄었는데 안의 내용은 362px 이었다. 「업무 내용」 절이\n       * 276~464 에 있어 대부분이 잘렸고, 잘린 자리 바로 아래에서 타임라인이 시작하니 **타임라인이\n       * 본문을 덮은 것처럼** 보였다. 세로가 넉넉한 화면에서는 줄일 일이 없어 드러나지 않았다.\n       *\n       * 안에 오는 것은 셋 다 문서다(template · custom-element · 생성된 절 카드들). 높이를 정해\n       * 주어야 하는 것은 board 뿐이고 board 는 이 칸을 거치지 않는다(activityContent 참조).\n       * 문서는 제 높이로 서고, 화면이 모자라면 **페이지 전체가 스크롤한다** — :host 의\n       * overflow: auto 가 이미 그 자리다.\n       */\n      section[hosted] {\n        flex: none;\n        padding: 0;\n        overflow: hidden;\n      }\n\n      /*\n       * 끝난 업무를 읽는 화면은 절이 여럿이라(기본 정보 · 업무 정보 · 수행 결과) 카드를 한 겹 더\n       * 두르지 않는다. 절들이 곧 카드다.\n       */\n      section[hosted][plain] {\n        margin: 0;\n        background: none;\n        border: none;\n        border-radius: 0;\n      }\n\n      ox-board-viewer {\n        width: 100%;\n        height: 100%;\n      }\n\n      /*\n       * 여백을 주지 않는다 — **안에 든 절들이 이미 자기 여백을 갖는다.**\n       *\n       * 여기에 padding 을 두면 두 겹이 된다. 실측으로 확인했다: 안쪽 절의 왼쪽이 233px,\n       * 타임라인이 221px 이었다(--spacing-large 는 이 앱에서 12px 이다). 한 화면에서 카드마다\n       * 왼쪽 기준선이 달랐다.\n       */\n      activity-thread-view {\n        display: block;\n      }\n\n      activity-thread-timeline {\n        margin: var(--spacing-large, 16px);\n      }\n\n      #custom-content {\n        flex: 1;\n      }\n\n      @media print {\n        :host {\n          display: block;\n          overflow: visible;\n        }\n      }\n    `\n  ]\n\n  @state() activityThread: any\n\n  /**\n   * 조회를 마쳤나 — **「아직 안 읽었다」와 「없다」는 다르다.**\n   *\n   * 목록에서 줄을 눌러 들어온 사람이 방금 본 건이 없다는 말을 먼저 읽지 않게, 조회가 끝난 뒤에만\n   * 그 말을 한다.\n   */\n  @state() loaded = false\n  @state() board: any\n\n  get context() {     return {       title: this.lifecycle?.params?.['title'] || i18next.t('title.activity'),\n      help: 'worklist/activity-thread-view-page',\n      /*\n       * 이 화면은 메뉴에 없다 — 「완료」에서 줄을 눌러 들어온다. 그래서 왼쪽 메뉴가 가리킬\n       * 항목이 없고, 표시가 사라져 들어온 사람이 자기가 어디에 있는지 잃는다.\n       *\n       * 어느 목록에서 열리는지는 이 화면이 안다. 그것을 적어 둔다.\n       */\n      menu: 'done-list',\n      actions: [\n        {           title: i18next.t('button.close'),\n          action: () => {             history.back()\n },\n          ...CommonButtonStyles.back\n }\n      ]\n      // activityThread: this.activityThread\n }\n }\n\n  render() {     const activityThread = this.activityThread\n\n    if (!activityThread) {\n      return this.loaded\n        ? html`<div empty>\n            <span class=\"title\">${i18next.t('text.no activity thread info')}</span>\n            <span class=\"why\">${i18next.t('text.no-activity-thread-why')}</span>\n          </div>`\n        : nothing\n    }\n\n    return html`\n      <activity-thread-ribon .activityThread=${activityThread}></activity-thread-ribon>\n      ${this.activityContent()}\n      <!--\n        여기서는 편다 — 끝난 업무를 보러 온 화면이라 「어떻게 여기까지 왔나」가 곧 본문이다.\n      -->\n      <activity-thread-timeline .activityThread=${activityThread} open short-form></activity-thread-timeline>\n    `\n }\n\n  activityContent() {     switch (this.activityThread?.activityInstance?.viewType) {       case 'template':\n        return this.hostedContent(this.templateContent())\n      case 'generated':\n        return this.generatedContent()\n      /* board 는 전체 화면을 쓰는 캔버스라 카드에 담지 않는다. */\n      case 'board':\n        return this.boardContent()\n      case 'custom-element':\n        return this.hostedContent(this.customElementContent())\n      case 'page':\n      case 'external':\n        return html``\n      default:\n        return this.generatedContent()\n }\n }\n\n  /**\n   * 화면 종류가 달라도 같은 자리에 같은 모양으로 놓인다(activity-approval-page 의 같은 이름 참조).\n   *\n   * plain 은 안에 들어오는 것이 이미 절 카드 여럿을 갖고 있을 때다 — 카드를 두 겹 두르지 않는다.\n   */\n  hostedContent(content: unknown, plain = false) {\n    return html`<section hosted ?plain=${plain}>${content}</section>`\n  }\n\n  templateContent() {     if (!this.activityThread) {       return html``\n }\n\n    const { viewSource: template } = this.activityThread?.activityInstance\n    return unsafeHTML(template)\n }\n\n  generatedContent(): DirectiveResult {     if (!this.activityThread) {       return html``\n }\n\n    /*\n     * id 가 아니라 **값을 넘긴다.** 전에는 id 만 주고 그쪽이 스스로 다시 조회했다 — 이 화면이 이미\n     * 같은 건을 조회한 뒤라서 한 번 열면 같은 질의가 두 번 나갔다.\n     */\n    return keyed(\n      this.activityThread.id,\n      this.hostedContent(\n        html`<activity-thread-view .activityThread=${this.activityThread}></activity-thread-view>`,\n        true\n      )\n    )\n }\n\n  boardContent(): DirectiveResult {     if (!this.activityThread) {       return html``\n }\n\n    const { output, activityInstance } = this.activityThread\n    const { viewSource: boardId, input } = activityInstance || {}\n\n    if (!this.board || this.board.id !== boardId) {       this.board = {         id: boardId\n }\n }\n\n    /* \n      ox-board-viewer에서 provider에 의해 공급되는 board가 각 id별로 instance를 하나씩 밖에 가지지 않으므로,\n      동일한 id의 보드를 다른 page에 뺏기는 경우가 있다.\n      따라서, Page가 active될 때마다 타임스탬프를 refresh key로 설정하였다.\n      */\n    return keyed(\n      this.activityThread.id,\n      html`\n        <ox-board-viewer\n          style=\"background-color: white;\"\n          .board=${this.board}\n          .provider=${provider}\n          .values=${{ ...input, ...output }}\n          hide-fullscreen\n          hide-navigation\n        ></ox-board-viewer>\n      `\n    )\n }\n\n  customElementContent() {     if (!this.activityThread) {       return html``\n }\n\n    const { output, activityInstance } = this.activityThread\n    const { viewSource: tagName, input } = activityInstance || {}\n\n    const element = document.createElement(tagName)\n    element.id = 'custom-content'\n    element.input = input\n    element.output = output\n    element.addEventListener('change', (e: CustomEvent) => {       this.activityThread.output = e.detail\n })\n\n    return element\n }\n\n  updated(changes) {     if (changes.has('activityThread')) {       this.updateContext()\n }\n }\n\n  async pageUpdated(changes, lifecycle, changedBefore) {     if (this.active) {       this.fetchActivityThread(lifecycle.resourceId)\n }\n }\n\n  async fetchActivityThread(id) {     const response = await client.query({       query: gql`\n        query activityThread($id: String!) {           activityThread(id: $id) ${ActivityThreadFetchResult}\n }\n      `,\n      variables: {         id\n }\n })\n\n    this.activityThread = response.data.activityThread\n    this.loaded = true\n\n    this.updateContext()\n }\n}\n"]}

package/dist-client/pages/activity-thread/activity-thread-view.d.ts

@@ -1,14 +1,31 @@
-import '@things-factory/organization/dist-client/component/approval-line-view.js';
-import { LitElement } from 'lit';
+import { LitElement, nothing } from 'lit';
 import { ActivityThread } from '../../types/activity-thread.js';
 declare const ActivityThreadView_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+/**
+ * 끝난 업무를 읽는 화면 — **완료 목록에서 줄을 눌러 들어온다.**
+ *
+ * ── 무엇이 잘못되고 있었나 (2026-09-06) ────────────────────────────────────
+ * 이 화면은 같은 건을 그리는 세 화면 중 하나인데(업무 상세 · 결재 상세 · 여기), 셋이 서로 다른
+ * 말과 모양을 쓰고 있었다. 같은 값을 보는 사람이 화면을 옮길 때마다 다른 것을 본다.
+ *
+ *   항목 이름     결재 화면은 「승인이 필요한 이유」, 여기는 원문 because
+ *   객체 값       결재 화면은 JSON, 여기는 [object Object]
+ *   시각          결재 화면은 2026. 9. 1. 오전 11:55, 여기는 Tuesday, September 1, 2026 at 11:55 AM
+ *   갈래          결재 화면은 받은 값 · 낼 값으로 갈라 보이고, 여기는 전부 「산출물」 한 표
+ *
+ * 마지막이 특히 나쁘다. because 는 업무를 시작할 때 받은 값인데 「산출물」 밑에 있었다 —
+ * **화면이 값의 성격을 틀리게 말한다.**
+ *
+ * 그래서 셋이 activity-fields 한 벌을 쓰게 했다.
+ *
+ * ── 자기 조회를 하지 않는다 ────────────────────────────────────────────────
+ * 전에는 이 요소가 activityThreadId 를 받아 **스스로 다시 조회했다.** 담고 있는 화면
+ * (activity-thread-view-page)이 이미 같은 건을 조회한 뒤였다. 한 화면을 열면 같은 질의가 두 번
+ * 나갔고, 두 응답이 어긋날 수 있는 자리도 생긴다. 값을 받아 그리기만 한다.
+ */
 export declare class ActivityThreadView extends ActivityThreadView_base {
     static styles: import("lit").CSSResult[];
-    activityThreadId?: string;
     activityThread?: ActivityThread;
-    render(): import("lit-html").TemplateResult<1>;
-    renderInOut(data: any): import("lit-html").TemplateResult<1>;
-    updated(changes: any): void;
-    fetchActivityThread(): Promise<void>;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
 }
 export {};