npm - @things-factory/worklist - Versions diffs - 10.1.170 → 10.1.174 - Mend

@things-factory/worklist 10.1.170 → 10.1.174

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/dist-client/components/activity-thread-timeline.js CHANGED Viewed

@@ -5,14 +5,9 @@ import { html, css, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { i18next } from '@operato/i18n';
 import { whenText } from '../when.js';
+import { timelineEntries, whenOf } from './timeline-entries.js';
 import { ActivityThread } from '../types/activity-thread.js';
 import { entity360Name } from '@operato/layout';
-/** 그 줄이 화면에 내보이는 시각. 정렬도 이 값으로 한다. */
-function whenOf(item) {
-    const at = item?.terminatedAt ?? item?.updatedAt ?? item?.createdAt;
-    const ms = at === null || at === undefined || at === '' ? NaN : Date.parse(String(at));
-    return Number.isFinite(ms) ? ms : 0;
-}
 let ActivityThreadTimeline = class ActivityThreadTimeline extends LitElement {
     static { this.styles = [
         css `
@@ -236,10 +231,8 @@ let ActivityThreadTimeline = class ActivityThreadTimeline extends LitElement {
          * 시각이 오르내리는 목록이 나왔다 — 11:51 승인됨 · 11:50 제출 · 11:50 게시 · 11:51 상신.
          * 시간 순으로 읽으라고 만든 화면인데 시간 순이 아니었다.
          */
-        const timeline = [
-            ...activityThreadHistories.filter(item => item.transaction && (!this.shortForm || !/^.*(reject|approve|save|restart).*$/.test(item.transaction))),
-            ...activityApprovals.filter(item => item.judgment)
-        ].sort((a, b) => (whenOf(a) > whenOf(b) ? 1 : -1));
+        /* 한 사람의 한 행동이 한 줄이 되게 거르고, 같은 시각이면 일어난 순서로 놓는다(timeline-entries). */
+        const timeline = timelineEntries(activityThreadHistories, activityApprovals, { shortForm: this.shortForm });
         if (!timeline.length) {
             return nothing;
         }

package/dist-client/components/activity-thread-timeline.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"activity-thread-timeline.js","sourceRoot":"","sources":["../../client/components/activity-thread-timeline.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@things-factory/organization/dist-client/component/approval-line-view.js'\n\nimport { html, css, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { whenText } from '../when.js'\n\nimport { ActivityThread } from '../types/activity-thread.js'\nimport { ActivityThreadHistory } from '../types/activity-thread-history.js'\nimport { ActivityApproval } from '../types/activity-approval.js'\nimport { entity360Name } from '@operato/layout'\n\n\n/** 그 줄이 화면에 내보이는 시각. 정렬도 이 값으로 한다. /\nfunction whenOf(item: any): number {\n const at = item?.terminatedAt ?? item?.updatedAt ?? item?.createdAt\n\n const ms = at === null \|\| at === undefined \|\| at === '' ? NaN : Date.parse(String(at))\n\n return Number.isFinite(ms) ? ms : 0\n}\n\n@customElement('activity-thread-timeline')\nexport class ActivityThreadTimeline extends LitElement {\n static styles = [\n css`\n /\n * 업무 하나가 지나온 자취 — 언제 · 무슨 일이 · 누구에 의해.\n \n ── 무엇을 고쳤나 (2026-09-06) ─────────────────────────────────────\n * 1. 절 제목이 단추처럼 생겼었다. border: 2px 에 border-radius: 15px 인 알약이라\n * 누를 수 있는 것으로 보인다. 이 화면에서 알약은 거르개(chip)의 모양이다.\n * 2. 말풍선 꼬리에 #f4f4f4 가, 표 선에 lightgray 가 하드코딩되어 있었다. 어두운\n * 화면에서 밝은 회색이 그대로 나온다.\n * 3. 시각이 Tuesday, September 1, 2026 at 11:51 AM 이었다. when.ts 머리말 참조.\n \n ── 내용이 없는 줄에 상자를 그리지 않는다 ─────────────────────────\n * 의견이나 결과가 없는 줄에도 회색 상자가 min-height: 20px 으로 깔려 있었다. 저장 ·\n * 게시처럼 적을 것이 없는 기록이 대부분이라, 화면의 절반이 빈 회색 상자였다.\n /\n /\n * 절 하나이므로 다른 절과 같은 카드로 둔다. 전에는 카드 밖에 그냥 놓여 있어서 「업무 정보」\n * 카드와 위계가 어긋났다 — 같은 층의 두 절인데 하나만 면 위에 있었다.\n /\n :host {\n display: block;\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 color: var(--ui-ink, #17242c);\n font-size: var(--ui-t-body, 13px);\n }\n\n / 그릴 것이 없으면 빈 카드를 남기지 않는다. /\n :host(:not(:has(ol))) {\n display: none;\n }\n\n /\n * ── 접어 둔다 (2026-09-06) ────────────────────────────────────────\n * 이력은 참고다. 결재자가 먼저 읽는 것은 「무엇을 승인하나」이고, 이력은 그것으로 판단이\n * 안 설 때 펴 보는 것이다. 그런데 이 카드가 내용 절과 똑같은 무게로 서 있었다.\n \n 접어 두되 마지막에 무슨 일이 있었는지 한 줄은 남긴다. 「이력 4건」만 있으면 펴 볼지\n * 말지를 정할 수가 없다.\n \n 펴 두어야 하는 화면이 있다 — 지난 일을 보러 온 화면(완료 조회), 그리고 보일 항목이 하나도\n * 없어서 「타임라인의 상신 사유를 보고 판단하세요」라고 안내한 경우다. 그때 접혀 있으면 그\n * 안내가 거짓말이 된다. 그래서 여는 쪽은 담는 화면이 정한다(open 속성).\n /\n h2 {\n margin: 0;\n font-size: var(--ui-t-title, 15px);\n font-weight: 600;\n color: var(--ui-ink, #17242c);\n }\n\n summary {\n display: flex;\n align-items: baseline;\n gap: var(--spacing-medium, 8px);\n cursor: pointer;\n list-style: none;\n }\n\n summary::-webkit-details-marker {\n display: none;\n }\n\n / 펴고 접는 표시. 색만으로 말하지 않으려고 방향이 바뀐다. /\n .chevron {\n flex: none;\n font-size: 18px;\n color: var(--ui-muted, #57676f);\n transition: transform 0.12s ease;\n }\n\n details[open] .chevron {\n transform: rotate(90deg);\n }\n\n / 접혔을 때 보이는 한 줄 — 마지막에 무슨 일이 있었나. /\n .last {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: var(--ui-t-small, 11.5px);\n color: var(--ui-faint, #8a959c);\n }\n\n details[open] .last {\n display: none;\n }\n\n .count {\n flex: none;\n font-size: var(--ui-t-small, 11.5px);\n color: var(--ui-muted, #57676f);\n font-variant-numeric: tabular-nums;\n }\n\n ol {\n list-style: none;\n margin: var(--spacing-medium, 8px) 0 0;\n padding: 0;\n }\n\n li {\n display: grid;\n grid-template-columns: max-content 16px 1fr;\n align-items: start;\n column-gap: var(--spacing-small, 4px);\n }\n\n / 시각 — 자릿수를 맞춰 위아래를 바로 비교할 수 있게. /\n [date] {\n padding-top: 1px;\n font-family: var(--ui-mono, ui-monospace, Menlo, monospace);\n font-size: var(--ui-t-small, 11.5px);\n font-variant-numeric: tabular-nums;\n color: var(--ui-faint, #8a959c);\n white-space: nowrap;\n }\n\n /\n * 점과 그 아래로 이어지는 세로선.\n \n 칸을 세로로 늘려(align-self: stretch) 그 안에 점과 선을 그린다. 전에는 칸이 9px 이라\n * 선 높이를 calc(100% + 100px) 으로 짐작해서 늘렸고, 줄 높이가 그보다 낮으면 선이 다음\n * 줄을 지나 카드 아래까지 흘러내렸다.\n /\n [status] {\n position: relative;\n align-self: stretch;\n width: 9px;\n margin-left: 3px;\n }\n\n [status]::after {\n content: '';\n position: absolute;\n top: 4px;\n left: 0;\n width: 9px;\n height: 9px;\n border-radius: 50%;\n background-color: var(--ui-accent, #00727e);\n }\n\n [status]::before {\n content: '';\n position: absolute;\n top: 15px;\n bottom: 0;\n left: 3px;\n width: 2px;\n background-color: var(--ui-line, #d5dce0);\n }\n\n li:last-child [status]::before {\n display: none;\n }\n\n [info] {\n min-width: 0;\n padding-bottom: var(--spacing-large, 16px);\n }\n\n li:last-child [info] {\n padding-bottom: 0;\n }\n\n / 무슨 일이 있었나 — 이 줄에서 먼저 읽혀야 하는 값. /\n [what] {\n font-weight: 600;\n }\n\n / 누가 — 곁말이다. 아이콘은 두지 않는다(이름 앞의 원형 아이콘이 값처럼 보였다). /\n [who] {\n margin-left: var(--spacing-small, 4px);\n font-size: var(--ui-t-small, 11.5px);\n color: var(--ui-faint, #8a959c);\n }\n\n / 적힌 말 — 의견 · 사유 · 결과. 없으면 이 요소 자체를 그리지 않는다. /\n p {\n / 줄을 바꿔 아래에 두되(block), 폭은 내용만큼만 — 짧은 의견에 화면 폭짜리 상자가 생겼다. /\n display: block;\n width: fit-content;\n max-width: 100%;\n margin: 5px 0 0;\n padding: 7px 10px;\n background: var(--ui-panel-2, #eef1f3);\n border-radius: var(--ui-r-small, 6px);\n color: var(--ui-ink, #17242c);\n font-size: var(--ui-t-small, 11.5px);\n line-height: 1.5;\n word-break: keep-all;\n }\n\n @media only screen and (max-width: 460px) {\n li {\n grid-template-columns: 16px 1fr;\n }\n\n / 좁은 화면에서는 시각을 내용 아래로 내린다 — 한 줄의 절반을 시각에 내줄 수 없다. /\n [date] {\n grid-column: 2;\n grid-row: 2;\n padding: 0 0 var(--spacing-medium, 8px);\n }\n }\n `\n ]\n\n @property({ type: Object }) activityThread?: ActivityThread\n @property({ type: String }) subtitle?: string\n @property({ type: Boolean, attribute: 'short-form' }) shortForm?: boolean\n\n /\n 펴 둘 것인가 — 담는 화면이 정한다.\n \n 기본은 접는다. 펴는 곳은 둘이다.\n * 완료 조회 지난 일을 보러 온 화면이라 이력이 곧 본문이다\n * 보일 항목 없음 화면이 「타임라인의 상신 사유를 보고 판단하세요」로 여기를 가리킨다\n /\n @property({ type: Boolean }) open?: boolean\n\n render() {\n const { activityApprovals = [], activityThreadHistories = [] } = this.activityThread \|\| {}\n\n /\n * 정렬 키와 표시 키가 같아야 한다.\n \n 전에는 둘 다 updatedAt 으로 정렬해 놓고, 결재 줄만 terminatedAt 을 보여 주었다. 그래서\n * 시각이 오르내리는 목록이 나왔다 — 11:51 승인됨 · 11:50 제출 · 11:50 게시 · 11:51 상신.\n * 시간 순으로 읽으라고 만든 화면인데 시간 순이 아니었다.\n /\n const timeline = [\n ...activityThreadHistories.filter(\n item => item.transaction && (!this.shortForm \|\| !/^.(reject\|approve\|save\|restart).$/.test(item.transaction))\n ),\n ...activityApprovals.filter(item => item.judgment)\n ].sort((a, b) => (whenOf(a) > whenOf(b) ? 1 : -1))\n\n if (!timeline.length) {\n return nothing\n }\n\n return html`\n <details ?open=${this.open}>\n <summary>\n <md-icon class=\"chevron\">chevron_right</md-icon>\n <h2>${this.subtitle \|\| i18next.t('label.timeline')}</h2>\n <span class=\"count\">${i18next.t('text.timeline-count', { count: timeline.length })}</span>\n <span class=\"last\">${this.lastLine(timeline[timeline.length - 1])}</span>\n </summary>\n\n <ol>\n ${timeline.map(item =>\n 'reason' in item\n ? this.renderActivityThreadHistory(item as ActivityThreadHistory)\n : this.renderActivityApproval(item as ActivityApproval)\n )}\n </ol>\n </details>\n `\n }\n\n /* 접혔을 때 보이는 한 줄 — 마지막 기록의 「무엇을 · 누가 · 언제」. /\n lastLine(item: any): string {\n const what =\n 'reason' in item\n ? i18next.t('label.activity-transaction-' + item.transaction)\n : i18next.t('label.activity-state-' + item.judgment)\n\n const who = item?.updater?.name \|\| item?.approver?.name \|\| ''\n\n return [what, who, whenText(whenOf(item))].filter(Boolean).join(' · ')\n }\n\n renderActivityThreadHistory(activityThreadHistory: ActivityThreadHistory) {\n const { updater, updatedAt, state, reason, output, transaction } = activityThreadHistory\n\n return html`\n <li>\n <span date>${whenText(updatedAt)}</span>\n <span status></span>\n\n <span info>\n <span what>${i18next.t('label.activity-transaction-' + transaction)}</span>\n ${updater?.name ? html`<span who>${entity360Name(updater)}</span>` : nothing}\n ${this.renderSaid(reason \|\| (output ? this.renderOutput(output) : ''))}\n </span>\n </li>\n `\n }\n\n renderActivityApproval(activityApproval: ActivityApproval) {\n const { judgment, approver, comment, createdAt, terminatedAt } = activityApproval\n\n return html`\n <li>\n <span date>${whenText(terminatedAt ?? createdAt)}</span>\n <span status></span>\n <span info>\n <span what>${i18next.t('label.activity-state-' + judgment)}</span>\n ${approver?.name ? html`<span who>${entity360Name(approver)}</span>` : nothing}\n ${this.renderSaid(comment)}\n </span>\n </li>\n `\n }\n\n /* 적힌 말이 없으면 상자를 그리지 않는다 — 빈 회색 상자는 내용이 있는 줄과 구별되지 않는다. */\n renderSaid(said?: string) {\n return said ? html`<p>${said}</p>` : nothing\n }\n\n renderOutput(output: any) {\n const keys = Object.keys(output)\n if (keys.length === 0) {\n return ''\n }\n\n const firstKey = keys[0]\n let value = output[firstKey]\n\n // 값이 객체이거나 긴 문자열인 경우 처리\n if (typeof value === 'object') {\n value = Array.isArray(value) ? '[...]' : '{...}'\n } else if (typeof value === 'string' && value.length > 50) {\n value = value.substring(0, 47) + '...'\n }\n\n let result = `${firstKey}: ${value}`\n\n // 추가 속성이 있는 경우 표시\n if (keys.length > 1) {\n result += ' ' + i18next.t('text.and-n-more-fields', { n: keys.length - 1 })\n }\n\n return result\n }\n}\n"]}
1	+ {"version":3,"file":"activity-thread-timeline.js","sourceRoot":"","sources":["../../client/components/activity-thread-timeline.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@things-factory/organization/dist-client/component/approval-line-view.js'\n\nimport { html, css, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { whenText } from '../when.js'\nimport { timelineEntries, whenOf } from './timeline-entries.js'\n\nimport { ActivityThread } from '../types/activity-thread.js'\nimport { ActivityThreadHistory } from '../types/activity-thread-history.js'\nimport { ActivityApproval } from '../types/activity-approval.js'\nimport { entity360Name } from '@operato/layout'\n\n\n@customElement('activity-thread-timeline')\nexport class ActivityThreadTimeline extends LitElement {\n static styles = [\n css`\n /\n 업무 하나가 지나온 자취 — 언제 · 무슨 일이 · 누구에 의해.\n \n ── 무엇을 고쳤나 (2026-09-06) ─────────────────────────────────────\n * 1. 절 제목이 단추처럼 생겼었다. border: 2px 에 border-radius: 15px 인 알약이라\n * 누를 수 있는 것으로 보인다. 이 화면에서 알약은 거르개(chip)의 모양이다.\n * 2. 말풍선 꼬리에 #f4f4f4 가, 표 선에 lightgray 가 하드코딩되어 있었다. 어두운\n * 화면에서 밝은 회색이 그대로 나온다.\n * 3. 시각이 Tuesday, September 1, 2026 at 11:51 AM 이었다. when.ts 머리말 참조.\n \n ── 내용이 없는 줄에 상자를 그리지 않는다 ─────────────────────────\n * 의견이나 결과가 없는 줄에도 회색 상자가 min-height: 20px 으로 깔려 있었다. 저장 ·\n * 게시처럼 적을 것이 없는 기록이 대부분이라, 화면의 절반이 빈 회색 상자였다.\n /\n /\n * 절 하나이므로 다른 절과 같은 카드로 둔다. 전에는 카드 밖에 그냥 놓여 있어서 「업무 정보」\n * 카드와 위계가 어긋났다 — 같은 층의 두 절인데 하나만 면 위에 있었다.\n /\n :host {\n display: block;\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 color: var(--ui-ink, #17242c);\n font-size: var(--ui-t-body, 13px);\n }\n\n / 그릴 것이 없으면 빈 카드를 남기지 않는다. /\n :host(:not(:has(ol))) {\n display: none;\n }\n\n /\n * ── 접어 둔다 (2026-09-06) ────────────────────────────────────────\n * 이력은 참고다. 결재자가 먼저 읽는 것은 「무엇을 승인하나」이고, 이력은 그것으로 판단이\n * 안 설 때 펴 보는 것이다. 그런데 이 카드가 내용 절과 똑같은 무게로 서 있었다.\n \n 접어 두되 마지막에 무슨 일이 있었는지 한 줄은 남긴다. 「이력 4건」만 있으면 펴 볼지\n * 말지를 정할 수가 없다.\n \n 펴 두어야 하는 화면이 있다 — 지난 일을 보러 온 화면(완료 조회), 그리고 보일 항목이 하나도\n * 없어서 「타임라인의 상신 사유를 보고 판단하세요」라고 안내한 경우다. 그때 접혀 있으면 그\n * 안내가 거짓말이 된다. 그래서 여는 쪽은 담는 화면이 정한다(open 속성).\n /\n h2 {\n margin: 0;\n font-size: var(--ui-t-title, 15px);\n font-weight: 600;\n color: var(--ui-ink, #17242c);\n }\n\n summary {\n display: flex;\n align-items: baseline;\n gap: var(--spacing-medium, 8px);\n cursor: pointer;\n list-style: none;\n }\n\n summary::-webkit-details-marker {\n display: none;\n }\n\n / 펴고 접는 표시. 색만으로 말하지 않으려고 방향이 바뀐다. /\n .chevron {\n flex: none;\n font-size: 18px;\n color: var(--ui-muted, #57676f);\n transition: transform 0.12s ease;\n }\n\n details[open] .chevron {\n transform: rotate(90deg);\n }\n\n / 접혔을 때 보이는 한 줄 — 마지막에 무슨 일이 있었나. /\n .last {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: var(--ui-t-small, 11.5px);\n color: var(--ui-faint, #8a959c);\n }\n\n details[open] .last {\n display: none;\n }\n\n .count {\n flex: none;\n font-size: var(--ui-t-small, 11.5px);\n color: var(--ui-muted, #57676f);\n font-variant-numeric: tabular-nums;\n }\n\n ol {\n list-style: none;\n margin: var(--spacing-medium, 8px) 0 0;\n padding: 0;\n }\n\n li {\n display: grid;\n grid-template-columns: max-content 16px 1fr;\n align-items: start;\n column-gap: var(--spacing-small, 4px);\n }\n\n / 시각 — 자릿수를 맞춰 위아래를 바로 비교할 수 있게. /\n [date] {\n padding-top: 1px;\n font-family: var(--ui-mono, ui-monospace, Menlo, monospace);\n font-size: var(--ui-t-small, 11.5px);\n font-variant-numeric: tabular-nums;\n color: var(--ui-faint, #8a959c);\n white-space: nowrap;\n }\n\n /\n * 점과 그 아래로 이어지는 세로선.\n \n 칸을 세로로 늘려(align-self: stretch) 그 안에 점과 선을 그린다. 전에는 칸이 9px 이라\n * 선 높이를 calc(100% + 100px) 으로 짐작해서 늘렸고, 줄 높이가 그보다 낮으면 선이 다음\n * 줄을 지나 카드 아래까지 흘러내렸다.\n /\n [status] {\n position: relative;\n align-self: stretch;\n width: 9px;\n margin-left: 3px;\n }\n\n [status]::after {\n content: '';\n position: absolute;\n top: 4px;\n left: 0;\n width: 9px;\n height: 9px;\n border-radius: 50%;\n background-color: var(--ui-accent, #00727e);\n }\n\n [status]::before {\n content: '';\n position: absolute;\n top: 15px;\n bottom: 0;\n left: 3px;\n width: 2px;\n background-color: var(--ui-line, #d5dce0);\n }\n\n li:last-child [status]::before {\n display: none;\n }\n\n [info] {\n min-width: 0;\n padding-bottom: var(--spacing-large, 16px);\n }\n\n li:last-child [info] {\n padding-bottom: 0;\n }\n\n / 무슨 일이 있었나 — 이 줄에서 먼저 읽혀야 하는 값. /\n [what] {\n font-weight: 600;\n }\n\n / 누가 — 곁말이다. 아이콘은 두지 않는다(이름 앞의 원형 아이콘이 값처럼 보였다). /\n [who] {\n margin-left: var(--spacing-small, 4px);\n font-size: var(--ui-t-small, 11.5px);\n color: var(--ui-faint, #8a959c);\n }\n\n / 적힌 말 — 의견 · 사유 · 결과. 없으면 이 요소 자체를 그리지 않는다. /\n p {\n / 줄을 바꿔 아래에 두되(block), 폭은 내용만큼만 — 짧은 의견에 화면 폭짜리 상자가 생겼다. /\n display: block;\n width: fit-content;\n max-width: 100%;\n margin: 5px 0 0;\n padding: 7px 10px;\n background: var(--ui-panel-2, #eef1f3);\n border-radius: var(--ui-r-small, 6px);\n color: var(--ui-ink, #17242c);\n font-size: var(--ui-t-small, 11.5px);\n line-height: 1.5;\n word-break: keep-all;\n }\n\n @media only screen and (max-width: 460px) {\n li {\n grid-template-columns: 16px 1fr;\n }\n\n / 좁은 화면에서는 시각을 내용 아래로 내린다 — 한 줄의 절반을 시각에 내줄 수 없다. /\n [date] {\n grid-column: 2;\n grid-row: 2;\n padding: 0 0 var(--spacing-medium, 8px);\n }\n }\n `\n ]\n\n @property({ type: Object }) activityThread?: ActivityThread\n @property({ type: String }) subtitle?: string\n @property({ type: Boolean, attribute: 'short-form' }) shortForm?: boolean\n\n /\n 펴 둘 것인가 — 담는 화면이 정한다.\n \n 기본은 접는다. 펴는 곳은 둘이다.\n * 완료 조회 지난 일을 보러 온 화면이라 이력이 곧 본문이다\n * 보일 항목 없음 화면이 「타임라인의 상신 사유를 보고 판단하세요」로 여기를 가리킨다\n /\n @property({ type: Boolean }) open?: boolean\n\n render() {\n const { activityApprovals = [], activityThreadHistories = [] } = this.activityThread \|\| {}\n\n /\n * 정렬 키와 표시 키가 같아야 한다.\n \n 전에는 둘 다 updatedAt 으로 정렬해 놓고, 결재 줄만 terminatedAt 을 보여 주었다. 그래서\n * 시각이 오르내리는 목록이 나왔다 — 11:51 승인됨 · 11:50 제출 · 11:50 게시 · 11:51 상신.\n * 시간 순으로 읽으라고 만든 화면인데 시간 순이 아니었다.\n /\n / 한 사람의 한 행동이 한 줄이 되게 거르고, 같은 시각이면 일어난 순서로 놓는다(timeline-entries). /\n const timeline = timelineEntries(activityThreadHistories, activityApprovals, { shortForm: this.shortForm })\n\n if (!timeline.length) {\n return nothing\n }\n\n return html`\n <details ?open=${this.open}>\n <summary>\n <md-icon class=\"chevron\">chevron_right</md-icon>\n <h2>${this.subtitle \|\| i18next.t('label.timeline')}</h2>\n <span class=\"count\">${i18next.t('text.timeline-count', { count: timeline.length })}</span>\n <span class=\"last\">${this.lastLine(timeline[timeline.length - 1])}</span>\n </summary>\n\n <ol>\n ${timeline.map(item =>\n 'reason' in item\n ? this.renderActivityThreadHistory(item as ActivityThreadHistory)\n : this.renderActivityApproval(item as ActivityApproval)\n )}\n </ol>\n </details>\n `\n }\n\n /* 접혔을 때 보이는 한 줄 — 마지막 기록의 「무엇을 · 누가 · 언제」. /\n lastLine(item: any): string {\n const what =\n 'reason' in item\n ? i18next.t('label.activity-transaction-' + item.transaction)\n : i18next.t('label.activity-state-' + item.judgment)\n\n const who = item?.updater?.name \|\| item?.approver?.name \|\| ''\n\n return [what, who, whenText(whenOf(item))].filter(Boolean).join(' · ')\n }\n\n renderActivityThreadHistory(activityThreadHistory: ActivityThreadHistory) {\n const { updater, updatedAt, state, reason, output, transaction } = activityThreadHistory\n\n return html`\n <li>\n <span date>${whenText(updatedAt)}</span>\n <span status></span>\n\n <span info>\n <span what>${i18next.t('label.activity-transaction-' + transaction)}</span>\n ${updater?.name ? html`<span who>${entity360Name(updater)}</span>` : nothing}\n ${this.renderSaid(reason \|\| (output ? this.renderOutput(output) : ''))}\n </span>\n </li>\n `\n }\n\n renderActivityApproval(activityApproval: ActivityApproval) {\n const { judgment, approver, comment, createdAt, terminatedAt } = activityApproval\n\n return html`\n <li>\n <span date>${whenText(terminatedAt ?? createdAt)}</span>\n <span status></span>\n <span info>\n <span what>${i18next.t('label.activity-state-' + judgment)}</span>\n ${approver?.name ? html`<span who>${entity360Name(approver)}</span>` : nothing}\n ${this.renderSaid(comment)}\n </span>\n </li>\n `\n }\n\n /* 적힌 말이 없으면 상자를 그리지 않는다 — 빈 회색 상자는 내용이 있는 줄과 구별되지 않는다. */\n renderSaid(said?: string) {\n return said ? html`<p>${said}</p>` : nothing\n }\n\n renderOutput(output: any) {\n const keys = Object.keys(output)\n if (keys.length === 0) {\n return ''\n }\n\n const firstKey = keys[0]\n let value = output[firstKey]\n\n // 값이 객체이거나 긴 문자열인 경우 처리\n if (typeof value === 'object') {\n value = Array.isArray(value) ? '[...]' : '{...}'\n } else if (typeof value === 'string' && value.length > 50) {\n value = value.substring(0, 47) + '...'\n }\n\n let result = `${firstKey}: ${value}`\n\n // 추가 속성이 있는 경우 표시\n if (keys.length > 1) {\n result += ' ' + i18next.t('text.and-n-more-fields', { n: keys.length - 1 })\n }\n\n return result\n }\n}\n"]}

package/dist-client/components/decision-content.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import '@material/web/icon/icon.js';
 import { css, html, nothing } from 'lit';
 import { i18next } from '@operato/i18n';
+import { entity360KindOf, entity360Name } from '@operato/layout';
 import { declaredLabel, fieldValue } from './activity-fields.js';
 import { COMPENSABLE, decisionDrawable, decisionSlots, reversibilityIsMalformed, reversibilityOf, slotOfRole, slotsOfRole } from './decision-slots.js';
 /**
@@ -181,6 +182,14 @@ function slotText(slot) {
     if (said) {
         return said;
     }
+    /*
+     * A value that names what it is - `{ __typename, id, name }` - is drawn as its name, a link to its
+     * 360 (ADR-0067 decision 1: an entity's name opens its 360). The counterparty an expenditure pays
+     * opens the counterparty 360; a person opens the person 360. A kind nobody registered stays text.
+     */
+    if (slot.value && typeof slot.value === 'object' && !Array.isArray(slot.value) && entity360KindOf(slot.value)) {
+        return entity360Name(slot.value);
+    }
     const scalar = slot.value !== null && slot.value !== undefined && typeof slot.value !== 'object';
     if (scalar && slot.unit) {
         return `${slot.value} ${slot.unit}`;

package/dist-client/components/decision-content.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"decision-content.js","sourceRoot":"","sources":["../../client/components/decision-content.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAA;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAEvC,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAChE,OAAO,EACL,WAAW,EAEX,gBAAgB,EAChB,aAAa,EACb,wBAAwB,EACxB,eAAe,EACf,UAAU,EACV,WAAW,EACZ,MAAM,qBAAqB,CAAA;AAE5B;;;;;;;GAOG;AAEH;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG;;;;;;;;EAQhC,CAAA;AAEF;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,cAAc,CAAC,YAAiB,EAAE,KAAU;IAC1D,MAAM,KAAK,GAAG,aAAa,CAAC,YAAY,EAAE,KAAK,CAAC,CAAA;IAEhD,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,CAAC;QAC7B,OAAO,OAAO,CAAA;IAChB,CAAC;IAED,MAAM,QAAQ,GAAG,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC,CAAA;IAC9C,MAAM,OAAO,GAAG,UAAU,CAAC,KAAK,EAAE,SAAS,CAAC,CAAA;IAC5C,MAAM,MAAM,GAAG,UAAU,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;IAC1C,MAAM,YAAY,GAAG,WAAW,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IACjF,MAAM,QAAQ,GAAG,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IAC1E,MAAM,YAAY,GAAG,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,CAAA;IACtD,MAAM,aAAa,GAAG,UAAU,CAAC,KAAK,EAAE,eAAe,CAAC,CAAA;IAExD,OAAO,IAAI,CAAA;;QAEL,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,yBAAyB,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;QAC9E,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,wBAAwB,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;QAE3E,MAAM;QACJ,CAAC,CAAC,IAAI,CAAA;;qCAEqB,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;mCAC3B,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM;oBAC7C,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC;;;aAG9E;QACH,CAAC,CAAC,EACN;QACE,mBAAmB,CAAC,aAAa,CAAC;QAElC,QAAQ,CAAC,MAAM;QACb,CAAC,CAAC,IAAI,CAAA;;qCAEqB,OAAO,CAAC,CAAC,CAAC,+BAA+B,CAAC;kBAC7D,QAAQ,CAAC,GAAG,CACZ,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;;wBAEN,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,sBAAsB,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;6BAC3E,QAAQ,CAAC,IAAI,CAAC;;mBAExB,CACF;;aAEJ;QACH,CAAC,CAAC,EACN;QAEE,YAAY,EAAE,KAAK;QACjB,CAAC,CAAC,IAAI,CAAA;;qCAEqB,aAAa,CAAC,YAAY,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC;uBAC7E,QAAQ,CAAC,YAAY,CAAC;;aAEhC;QACH,CAAC,CAAC,EACN;QAEE,YAAY,CAAC,MAAM;QACjB,CAAC,CAAC,IAAI,CAAA;;qCAEqB,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC;kBAClD,YAAY,CAAC,GAAG,CAChB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;;wBAEN,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,sBAAsB,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;6BAC3E,QAAQ,CAAC,IAAI,CAAC;;mBAExB,CACF;;aAEJ;QACH,CAAC,CAAC,EACN;;GAEH,CAAA;AACH,CAAC;AAED;;;;;;;;GAQG;AACH,SAAS,aAAa,CAAC,IAAkB;IACvC,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;AAC7C,CAAC;AAED;;;;;;;;;;GAUG;AACH,SAAS,mBAAmB,CAAC,IAAmB;IAC9C,MAAM,IAAI,GAAG,eAAe,CAAC,IAAI,CAAC,CAAA;IAElC,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,IAAI,wBAAwB,CAAC,IAAI,CAAC,EAAE,CAAC;YACnC;;;;;eAKG;YACH,OAAO,CAAC,KAAK,CAAC,gCAAgC,IAAI,EAAE,SAAS,iDAAiD,CAAC,CAAA;QACjH,CAAC;QAED,OAAO,EAAE,CAAA;IACX,CAAC;IAED;;;OAGG;IACH,OAAO,IAAI,CAAA;+CACkC,CAAC,IAAI,CAAC,UAAU;iBAC9C,IAAI,CAAC,IAAI,KAAK,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;;WAGhF,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,WAAW;QACvC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,8BAA8B,EAAE,EAAE,YAAY,EAAE,4EAA4E,EAAE,CAAC;QAC3I,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAClG;;;GAGL,CAAA;AACH,CAAC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,SAAS,QAAQ,CAAC,IAAkB;IAClC,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,CAAA;IAE7B,IAAI,IAAI,EAAE,CAAC;QACT,OAAO,IAAI,CAAA;IACb,CAAC;IAED,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAA;IAEhG,IAAI,MAAM,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;QACxB,OAAO,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,EAAE,CAAA;IACrC,CAAC;IAED,OAAO,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;AAC7D,CAAC;AAED,mFAAmF;AACnF,SAAS,UAAU,CAAC,IAAkB;IACpC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;QACpB,OAAO,EAAE,CAAA;IACX,CAAC;IAED,OAAO,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,GAAG,CAAC,IAAI,CAAC,MAAM,IAAI,EAAE,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC,CAAA;AAC9F,CAAC;AAED,2EAA2E;AAC3E,SAAS,QAAQ,CAAC,IAAkB;IAClC,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAA;AACzG,CAAC;AAED;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiHvC,CAAA","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, nothing, TemplateResult } from 'lit'\nimport { i18next } from '@operato/i18n'\n\nimport { declaredLabel, fieldValue } from './activity-fields.js'\nimport {\n COMPENSABLE,\n DecisionSlot,\n decisionDrawable,\n decisionSlots,\n reversibilityIsMalformed,\n reversibilityOf,\n slotOfRole,\n slotsOfRole\n} from './decision-slots.js'\n\n/*\n The decision an activity declared, drawn the one way every screen draws it.\n \n The approval screen drew it and the task screen did not. An activity whose model is all hidden -\n * the expenditure request carries its payee and lines only for its decisionKeys - then showed the\n * approver what was asked and showed the person who asked an empty box. Both read the same\n * declaration and the same input, so one drawing serves both.\n /\n\n/\n The fields a page asks for to draw the decision - every field renderDecision reads.\n \n `name` is the label when the translation `tKey` names is missing (decisionLabel), and `valueTKey` with `params`\n * builds the value sentence at reading time (slotText). Leaving them out drew the sentence frozen\n * at issue, in the language of whoever raised it, with nothing to say a field was missing.\n /\nexport const DecisionKeysFields = `decisionKeys {\n role\n inputPath\n name\n tKey\n valueTKey\n params\n unit\n}`\n\n/\n The decision, or `nothing` when the activity declared none or none of it is in this input.\n \n Returning nothing is how a page knows to fall back to the model. An activity with no\n * decisionKeys draws exactly what it drew before.\n \n A slot whose path led nowhere is skipped rather than drawn empty. Older instances of an activity\n * predate a field the declaration names and an empty bar on the screen would read as \"there is no\n * reason\" when the truth is that this record has no such value. What cannot be shown is left out;\n * what is shown is only what the payload actually carries.\n \n `reason` is the exception. Missing and blank mean the same thing to whoever is reading - nobody\n * wrote one - so both draw the grey line rather than disappearing. A reason that silently vanishes\n * would let an approver assume it was never asked for.\n /\nexport function renderDecision(decisionKeys: any, input: any): TemplateResult \| typeof nothing {\n const slots = decisionSlots(decisionKeys, input)\n\n if (!decisionDrawable(slots)) {\n return nothing\n }\n\n const headline = slotOfRole(slots, 'headline')\n const subject = slotOfRole(slots, 'subject')\n const reason = slotOfRole(slots, 'reason')\n const consequences = slotsOfRole(slots, 'consequence').filter(slot => slot.found)\n const evidence = slotsOfRole(slots, 'evidence').filter(slot => slot.found)\n const currentState = slotOfRole(slots, 'currentState')\n const reversibility = slotOfRole(slots, 'reversibility')\n\n return html`\n <section decision>\n ${headline?.found ? html`<div class=\"headline\">${slotText(headline)}</div>` : ''}\n ${subject?.found ? html`<div class=\"subject\">${slotText(subject)}</div>` : ''}\n ${\n reason\n ? html`\n <div class=\"block\">\n <div class=\"label\">${i18next.t('field.reason')}</div>\n <div class=\"said ${hasWords(reason) ? '' : 'none'}\">\n ${hasWords(reason) ? slotText(reason) : i18next.t('text.no-reason-given')}\n </div>\n </div>\n `\n : ''\n }\n ${renderReversibility(reversibility)}\n ${\n evidence.length\n ? html`\n <div class=\"block\">\n <div class=\"label\">${i18next.t('label.what-it-was-judged-from')}</div>\n ${evidence.map(\n slot => html`\n <div class=\"evidence\">\n ${decisionLabel(slot) ? html`<div class=\"label\">${decisionLabel(slot)}</div>` : ''}\n <div>${slotText(slot)}</div>\n </div>\n `\n )}\n </div>\n `\n : ''\n }\n ${\n currentState?.found\n ? html`\n <div class=\"current-state\">\n <div class=\"label\">${decisionLabel(currentState) \|\| i18next.t('label.current-state')}</div>\n <div>${slotText(currentState)}</div>\n </div>\n `\n : ''\n }\n ${\n consequences.length\n ? html`\n <div class=\"block\">\n <div class=\"label\">${i18next.t('label.what-changes')}</div>\n ${consequences.map(\n slot => html`\n <div class=\"consequence\">\n ${decisionLabel(slot) ? html`<div class=\"label\">${decisionLabel(slot)}</div>` : ''}\n <div>${slotText(slot)}</div>\n </div>\n `\n )}\n </div>\n `\n : ''\n }\n </section>\n `\n}\n\n/\n A slot's own label - only where the declaration names one with `tKey`.\n \n A decision key's `name` is the developer's note (\"Never shown on a screen\", ActivityDecisionKeyItem),\n * and without `tKey` the screen shows no label. declaredLabel falls back to `name` whenever `tKey` is\n * absent - right for a search key, whose name is its column, and wrong here: asking for `name` put\n * \"what approving does\" under 「승인하면 달라지는 것」 on a Korean screen (2026-10-16). The fallback\n * stays for a declared key whose translation is missing.\n /\nfunction decisionLabel(slot: DecisionSlot): string {\n return slot.tKey ? declaredLabel(slot) : ''\n}\n\n/\n Whether approving can be undone, drawn as the frame around the decision.\n \n Only an explicit true or false draws. Anything else - the path led nowhere, or the value is not\n * a boolean - draws nothing, because saying \"this can be undone\" on a screen that does not know is\n * the one mistake this line must never make.\n \n This is not rejectionIsFinal. That one says whether rejecting ends the case for good; this\n * says whether approving can be taken back. The twin actuation carries both, which is exactly\n * why they must not share a sentence.\n /\nfunction renderReversibility(slot?: DecisionSlot) {\n const said = reversibilityOf(slot)\n\n if (!said) {\n if (reversibilityIsMalformed(slot)) {\n /\n * Declared, and the value is there, but not the shape this role takes - a bare sentence\n * where { reversible, caveat } belongs. Nothing is drawn, because this side cannot tell\n * which way it goes; the log is so a developer does not have to find it by hand, which is\n * how it was found the first time.\n /\n console.error(`[worklist] reversibility at \"${slot?.inputPath}\" is not { reversible, caveat } — nothing drawn`)\n }\n\n return ''\n }\n\n /\n * The module's own sentence when it wrote one. 「버린 자재는 돌아오지 않습니다」 says why, which\n * the plain wording cannot; the boolean beside it is what decides how heavily this is drawn.\n /\n return html`\n <div class=\"reversibility\" ?irreversible=${!said.reversible}>\n <md-icon>${said.kind === COMPENSABLE ? 'history' : said.reversible ? 'undo' : 'lock'}</md-icon>\n <span\n >${\n said.caveat \|\| (said.kind === COMPENSABLE\n ? i18next.t('text.approval-is-compensable', { defaultValue: 'The original decision remains. A subsequent corrective action is required.' })\n : i18next.t(said.reversible ? 'text.approval-is-reversible' : 'text.approval-is-irreversible'))\n }</span\n >\n </div>\n `\n}\n\n/\n One slot's value as something to read.\n \n A scalar prints with its unit when one was declared. Anything shaped - an object, a list - goes\n * through fieldValue, the same laying-out the model sections use, so a payload reads the same way\n * wherever it appears and a four-level object does not become one long line.\n \n ── The sentence is built here, not frozen when the request was raised ──\n * Eighteen doors write a Korean sentence at issue and the issue snapshots it, so it stands in the\n * language of whoever raised it and an approver reading another language never catches up. Where\n * a door declares `valueTKey`, the sentence is made at reading time instead, out of the values\n * the request did freeze.\n \n A door that has not moved yet draws exactly what it drew before. That is what lets plant\n * move them one at a time instead of eighteen at once, and it covers a door that moved into a\n * locale nobody has written yet: an empty `defaultValue` means a missing key falls through to the\n * frozen sentence rather than printing `approval.…` on the card.\n /\nfunction slotText(slot: DecisionSlot): unknown {\n const said = sentenceOf(slot)\n\n if (said) {\n return said\n }\n\n const scalar = slot.value !== null && slot.value !== undefined && typeof slot.value !== 'object'\n\n if (scalar && slot.unit) {\n return `${slot.value} ${slot.unit}`\n }\n\n return scalar ? String(slot.value) : fieldValue(slot.value)\n}\n\n/* The sentence this slot declares, when it declares one and the locale has it. /\nfunction sentenceOf(slot: DecisionSlot): string {\n if (!slot.valueTKey) {\n return ''\n }\n\n return String(i18next.t(slot.valueTKey, { ...(slot.params \|\| {}), defaultValue: '' }) \|\| '')\n}\n\n/* Did a person actually write something here. Whitespace is not words. /\nfunction hasWords(slot: DecisionSlot): boolean {\n return typeof slot.value === 'string' ? slot.value.trim().length > 0 : slot.found && slot.value != null\n}\n\n/\n * The decision, drawn from the activity's declaration.\n \n The order is the declaration's and the weight descends with it: what is being asked reads\n * first at title size, then what it is about, then the words a person wrote, then what changes\n * on approval, and last why it came up at all.\n /\nexport const DecisionContentStyles = css`\n section[decision] .headline {\n font-size: var(--ui-t-headline, 19px);\n font-weight: 600;\n line-height: 1.35;\n color: var(--ui-ink, #17242c);\n word-break: keep-all;\n }\n\n section[decision] .subject {\n margin-top: 3px;\n font-family: var(--ui-mono, ui-monospace, Menlo, monospace);\n font-size: var(--ui-t-body, 13px);\n color: var(--ui-muted, #57676f);\n }\n\n section[decision] .block {\n margin-top: 14px;\n }\n\n section[decision] .block > .label {\n margin-bottom: 4px;\n font-size: var(--ui-t-small, 11.5px);\n color: var(--ui-muted, #57676f);\n }\n\n / What a person wrote is set apart, because it is the only part nobody computed. /\n section[decision] .said {\n padding: 9px 11px;\n border-left: 3px solid var(--ui-line, #d5dce0);\n background: var(--ui-line-soft, #f2f5f7);\n color: var(--ui-ink, #17242c);\n word-break: break-word;\n }\n\n section[decision] .none {\n color: var(--ui-faint, #8a959c);\n }\n\n section[decision] .consequence {\n margin-top: 8px;\n padding: 9px 11px;\n border: 1px solid var(--ui-line, #d5dce0);\n border-radius: var(--ui-r-small, 6px);\n }\n\n section[decision] .consequence > .label {\n margin-bottom: 3px;\n font-size: var(--ui-t-small, 11.5px);\n color: var(--ui-muted, #57676f);\n }\n\n /\n * Whether approving can be undone reads as the frame around the decision, not as one of its\n * consequences. Among them it carries the same weight as \"four orders get pushed back\", and\n * on an approval that moves equipment it is the heaviest line on the screen.\n /\n section[decision] .reversibility {\n display: flex;\n align-items: center;\n gap: 6px;\n\n margin-top: 12px;\n padding: 8px 11px;\n border-radius: var(--ui-r-small, 6px);\n\n background: var(--ui-line-soft, #f2f5f7);\n color: var(--ui-muted, #57676f);\n font-size: var(--ui-t-small, 11.5px);\n }\n\n section[decision] .reversibility[irreversible] {\n background: var(--md-sys-color-error-container, #ffdad6);\n color: var(--md-sys-color-on-error-container, #410002);\n font-weight: 600;\n }\n\n section[decision] .reversibility md-icon {\n font-size: 1.15em;\n }\n\n /\n * What the decision was made from. Set flatter than the consequences - it is the record the\n * approver checks, not something the approval brings about.\n /\n section[decision] .evidence {\n margin-top: 8px;\n padding: 7px 0 7px 11px;\n border-left: 2px solid var(--ui-line, #d5dce0);\n }\n\n section[decision] .evidence > .label {\n margin-bottom: 2px;\n font-size: var(--ui-t-small, 11.5px);\n color: var(--ui-muted, #57676f);\n }\n\n /\n * What is true right now sits apart from what the approval would change. Sharing the box the\n * consequences use would say the approval causes these readings.\n */\n section[decision] .current-state {\n margin-top: 14px;\n padding: 9px 11px;\n border: 1px dashed var(--ui-line, #d5dce0);\n border-radius: var(--ui-r-small, 6px);\n }\n\n section[decision] .current-state > .label {\n margin-bottom: 3px;\n font-size: var(--ui-t-small, 11.5px);\n color: var(--ui-muted, #57676f);\n }\n`\n"]}
1	+ {"version":3,"file":"decision-content.js","sourceRoot":"","sources":["../../client/components/decision-content.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, nothing, TemplateResult } from 'lit'\nimport { i18next } from '@operato/i18n'\nimport { entity360KindOf, entity360Name } from '@operato/layout'\n\nimport { declaredLabel, fieldValue } from './activity-fields.js'\nimport {\n COMPENSABLE,\n DecisionSlot,\n decisionDrawable,\n decisionSlots,\n reversibilityIsMalformed,\n reversibilityOf,\n slotOfRole,\n slotsOfRole\n} from './decision-slots.js'\n\n/*\n The decision an activity declared, drawn the one way every screen draws it.\n \n The approval screen drew it and the task screen did not. An activity whose model is all hidden -\n * the expenditure request carries its payee and lines only for its decisionKeys - then showed the\n * approver what was asked and showed the person who asked an empty box. Both read the same\n * declaration and the same input, so one drawing serves both.\n /\n\n/\n The fields a page asks for to draw the decision - every field renderDecision reads.\n \n `name` is the label when the translation `tKey` names is missing (decisionLabel), and `valueTKey` with `params`\n * builds the value sentence at reading time (slotText). Leaving them out drew the sentence frozen\n * at issue, in the language of whoever raised it, with nothing to say a field was missing.\n /\nexport const DecisionKeysFields = `decisionKeys {\n role\n inputPath\n name\n tKey\n valueTKey\n params\n unit\n}`\n\n/\n The decision, or `nothing` when the activity declared none or none of it is in this input.\n \n Returning nothing is how a page knows to fall back to the model. An activity with no\n * decisionKeys draws exactly what it drew before.\n \n A slot whose path led nowhere is skipped rather than drawn empty. Older instances of an activity\n * predate a field the declaration names and an empty bar on the screen would read as \"there is no\n * reason\" when the truth is that this record has no such value. What cannot be shown is left out;\n * what is shown is only what the payload actually carries.\n \n `reason` is the exception. Missing and blank mean the same thing to whoever is reading - nobody\n * wrote one - so both draw the grey line rather than disappearing. A reason that silently vanishes\n * would let an approver assume it was never asked for.\n /\nexport function renderDecision(decisionKeys: any, input: any): TemplateResult \| typeof nothing {\n const slots = decisionSlots(decisionKeys, input)\n\n if (!decisionDrawable(slots)) {\n return nothing\n }\n\n const headline = slotOfRole(slots, 'headline')\n const subject = slotOfRole(slots, 'subject')\n const reason = slotOfRole(slots, 'reason')\n const consequences = slotsOfRole(slots, 'consequence').filter(slot => slot.found)\n const evidence = slotsOfRole(slots, 'evidence').filter(slot => slot.found)\n const currentState = slotOfRole(slots, 'currentState')\n const reversibility = slotOfRole(slots, 'reversibility')\n\n return html`\n <section decision>\n ${headline?.found ? html`<div class=\"headline\">${slotText(headline)}</div>` : ''}\n ${subject?.found ? html`<div class=\"subject\">${slotText(subject)}</div>` : ''}\n ${\n reason\n ? html`\n <div class=\"block\">\n <div class=\"label\">${i18next.t('field.reason')}</div>\n <div class=\"said ${hasWords(reason) ? '' : 'none'}\">\n ${hasWords(reason) ? slotText(reason) : i18next.t('text.no-reason-given')}\n </div>\n </div>\n `\n : ''\n }\n ${renderReversibility(reversibility)}\n ${\n evidence.length\n ? html`\n <div class=\"block\">\n <div class=\"label\">${i18next.t('label.what-it-was-judged-from')}</div>\n ${evidence.map(\n slot => html`\n <div class=\"evidence\">\n ${decisionLabel(slot) ? html`<div class=\"label\">${decisionLabel(slot)}</div>` : ''}\n <div>${slotText(slot)}</div>\n </div>\n `\n )}\n </div>\n `\n : ''\n }\n ${\n currentState?.found\n ? html`\n <div class=\"current-state\">\n <div class=\"label\">${decisionLabel(currentState) \|\| i18next.t('label.current-state')}</div>\n <div>${slotText(currentState)}</div>\n </div>\n `\n : ''\n }\n ${\n consequences.length\n ? html`\n <div class=\"block\">\n <div class=\"label\">${i18next.t('label.what-changes')}</div>\n ${consequences.map(\n slot => html`\n <div class=\"consequence\">\n ${decisionLabel(slot) ? html`<div class=\"label\">${decisionLabel(slot)}</div>` : ''}\n <div>${slotText(slot)}</div>\n </div>\n `\n )}\n </div>\n `\n : ''\n }\n </section>\n `\n}\n\n/\n A slot's own label - only where the declaration names one with `tKey`.\n \n A decision key's `name` is the developer's note (\"Never shown on a screen\", ActivityDecisionKeyItem),\n * and without `tKey` the screen shows no label. declaredLabel falls back to `name` whenever `tKey` is\n * absent - right for a search key, whose name is its column, and wrong here: asking for `name` put\n * \"what approving does\" under 「승인하면 달라지는 것」 on a Korean screen (2026-10-16). The fallback\n * stays for a declared key whose translation is missing.\n /\nfunction decisionLabel(slot: DecisionSlot): string {\n return slot.tKey ? declaredLabel(slot) : ''\n}\n\n/\n Whether approving can be undone, drawn as the frame around the decision.\n \n Only an explicit true or false draws. Anything else - the path led nowhere, or the value is not\n * a boolean - draws nothing, because saying \"this can be undone\" on a screen that does not know is\n * the one mistake this line must never make.\n \n This is not rejectionIsFinal. That one says whether rejecting ends the case for good; this\n * says whether approving can be taken back. The twin actuation carries both, which is exactly\n * why they must not share a sentence.\n /\nfunction renderReversibility(slot?: DecisionSlot) {\n const said = reversibilityOf(slot)\n\n if (!said) {\n if (reversibilityIsMalformed(slot)) {\n /\n * Declared, and the value is there, but not the shape this role takes - a bare sentence\n * where { reversible, caveat } belongs. Nothing is drawn, because this side cannot tell\n * which way it goes; the log is so a developer does not have to find it by hand, which is\n * how it was found the first time.\n /\n console.error(`[worklist] reversibility at \"${slot?.inputPath}\" is not { reversible, caveat } — nothing drawn`)\n }\n\n return ''\n }\n\n /\n * The module's own sentence when it wrote one. 「버린 자재는 돌아오지 않습니다」 says why, which\n * the plain wording cannot; the boolean beside it is what decides how heavily this is drawn.\n /\n return html`\n <div class=\"reversibility\" ?irreversible=${!said.reversible}>\n <md-icon>${said.kind === COMPENSABLE ? 'history' : said.reversible ? 'undo' : 'lock'}</md-icon>\n <span\n >${\n said.caveat \|\| (said.kind === COMPENSABLE\n ? i18next.t('text.approval-is-compensable', { defaultValue: 'The original decision remains. A subsequent corrective action is required.' })\n : i18next.t(said.reversible ? 'text.approval-is-reversible' : 'text.approval-is-irreversible'))\n }</span\n >\n </div>\n `\n}\n\n/\n One slot's value as something to read.\n \n A scalar prints with its unit when one was declared. Anything shaped - an object, a list - goes\n * through fieldValue, the same laying-out the model sections use, so a payload reads the same way\n * wherever it appears and a four-level object does not become one long line.\n \n ── The sentence is built here, not frozen when the request was raised ──\n * Eighteen doors write a Korean sentence at issue and the issue snapshots it, so it stands in the\n * language of whoever raised it and an approver reading another language never catches up. Where\n * a door declares `valueTKey`, the sentence is made at reading time instead, out of the values\n * the request did freeze.\n \n A door that has not moved yet draws exactly what it drew before. That is what lets plant\n * move them one at a time instead of eighteen at once, and it covers a door that moved into a\n * locale nobody has written yet: an empty `defaultValue` means a missing key falls through to the\n * frozen sentence rather than printing `approval.…` on the card.\n /\nfunction slotText(slot: DecisionSlot): unknown {\n const said = sentenceOf(slot)\n\n if (said) {\n return said\n }\n\n /\n * A value that names what it is - `{ __typename, id, name }` - is drawn as its name, a link to its\n * 360 (ADR-0067 decision 1: an entity's name opens its 360). The counterparty an expenditure pays\n * opens the counterparty 360; a person opens the person 360. A kind nobody registered stays text.\n /\n if (slot.value && typeof slot.value === 'object' && !Array.isArray(slot.value) && entity360KindOf(slot.value)) {\n return entity360Name(slot.value)\n }\n\n const scalar = slot.value !== null && slot.value !== undefined && typeof slot.value !== 'object'\n\n if (scalar && slot.unit) {\n return `${slot.value} ${slot.unit}`\n }\n\n return scalar ? String(slot.value) : fieldValue(slot.value)\n}\n\n/* The sentence this slot declares, when it declares one and the locale has it. /\nfunction sentenceOf(slot: DecisionSlot): string {\n if (!slot.valueTKey) {\n return ''\n }\n\n return String(i18next.t(slot.valueTKey, { ...(slot.params \|\| {}), defaultValue: '' }) \|\| '')\n}\n\n/* Did a person actually write something here. Whitespace is not words. /\nfunction hasWords(slot: DecisionSlot): boolean {\n return typeof slot.value === 'string' ? slot.value.trim().length > 0 : slot.found && slot.value != null\n}\n\n/\n * The decision, drawn from the activity's declaration.\n \n The order is the declaration's and the weight descends with it: what is being asked reads\n * first at title size, then what it is about, then the words a person wrote, then what changes\n * on approval, and last why it came up at all.\n /\nexport const DecisionContentStyles = css`\n section[decision] .headline {\n font-size: var(--ui-t-headline, 19px);\n font-weight: 600;\n line-height: 1.35;\n color: var(--ui-ink, #17242c);\n word-break: keep-all;\n }\n\n section[decision] .subject {\n margin-top: 3px;\n font-family: var(--ui-mono, ui-monospace, Menlo, monospace);\n font-size: var(--ui-t-body, 13px);\n color: var(--ui-muted, #57676f);\n }\n\n section[decision] .block {\n margin-top: 14px;\n }\n\n section[decision] .block > .label {\n margin-bottom: 4px;\n font-size: var(--ui-t-small, 11.5px);\n color: var(--ui-muted, #57676f);\n }\n\n / What a person wrote is set apart, because it is the only part nobody computed. /\n section[decision] .said {\n padding: 9px 11px;\n border-left: 3px solid var(--ui-line, #d5dce0);\n background: var(--ui-line-soft, #f2f5f7);\n color: var(--ui-ink, #17242c);\n word-break: break-word;\n }\n\n section[decision] .none {\n color: var(--ui-faint, #8a959c);\n }\n\n section[decision] .consequence {\n margin-top: 8px;\n padding: 9px 11px;\n border: 1px solid var(--ui-line, #d5dce0);\n border-radius: var(--ui-r-small, 6px);\n }\n\n section[decision] .consequence > .label {\n margin-bottom: 3px;\n font-size: var(--ui-t-small, 11.5px);\n color: var(--ui-muted, #57676f);\n }\n\n /\n * Whether approving can be undone reads as the frame around the decision, not as one of its\n * consequences. Among them it carries the same weight as \"four orders get pushed back\", and\n * on an approval that moves equipment it is the heaviest line on the screen.\n /\n section[decision] .reversibility {\n display: flex;\n align-items: center;\n gap: 6px;\n\n margin-top: 12px;\n padding: 8px 11px;\n border-radius: var(--ui-r-small, 6px);\n\n background: var(--ui-line-soft, #f2f5f7);\n color: var(--ui-muted, #57676f);\n font-size: var(--ui-t-small, 11.5px);\n }\n\n section[decision] .reversibility[irreversible] {\n background: var(--md-sys-color-error-container, #ffdad6);\n color: var(--md-sys-color-on-error-container, #410002);\n font-weight: 600;\n }\n\n section[decision] .reversibility md-icon {\n font-size: 1.15em;\n }\n\n /\n * What the decision was made from. Set flatter than the consequences - it is the record the\n * approver checks, not something the approval brings about.\n /\n section[decision] .evidence {\n margin-top: 8px;\n padding: 7px 0 7px 11px;\n border-left: 2px solid var(--ui-line, #d5dce0);\n }\n\n section[decision] .evidence > .label {\n margin-bottom: 2px;\n font-size: var(--ui-t-small, 11.5px);\n color: var(--ui-muted, #57676f);\n }\n\n /\n * What is true right now sits apart from what the approval would change. Sharing the box the\n * consequences use would say the approval causes these readings.\n */\n section[decision] .current-state {\n margin-top: 14px;\n padding: 9px 11px;\n border: 1px dashed var(--ui-line, #d5dce0);\n border-radius: var(--ui-r-small, 6px);\n }\n\n section[decision] .current-state > .label {\n margin-bottom: 3px;\n font-size: var(--ui-t-small, 11.5px);\n color: var(--ui-muted, #57676f);\n }\n`\n"]}

package/dist-client/components/timeline-entries.d.ts ADDED Viewed

@@ -0,0 +1,38 @@
+/**
+ * What a thread's timeline lists, and in what order - one line per thing a person did.
+ *
+ * A thread keeps two records of one decision: the approval row (who judged, what they wrote) and
+ * the thread history the judgment wrote (`approve` · `reject` · `escalate`, with the same comment
+ * as its reason). Listing both drew an approval by 경영지원 as 「상신 정연희」 and 「승인됨 정연희」
+ * with the comment twice (2026-10-16) - and 「상신」, the word `escalate` carries, read as if the
+ * approver had put the request up. The approval row is the judgment; the history line is dropped.
+ *
+ * Putting something up writes `post` and `submit` at the same moment, so one 상신 showed as
+ * 「제출」 and 「게시」 - in either order, the time being equal. `post` is dropped where the thread
+ * was submitted; a tie in time keeps the order things happen in.
+ *
+ * Kept free of imports so the test runner can hold it.
+ */
+type HistoryLine = {
+    transaction?: string;
+    reason?: any;
+    updatedAt?: any;
+    createdAt?: any;
+    terminatedAt?: any;
+};
+type ApprovalLine = {
+    judgment?: string;
+    updatedAt?: any;
+    createdAt?: any;
+    terminatedAt?: any;
+};
+/** The moment a line shows - and is sorted by. */
+export declare function whenOf(item: any): number;
+/**
+ * `shortForm` is every screen's timeline today. Without it every history line stays - the long form
+ * is the record as stored - and only the order of lines at one moment is set.
+ */
+export declare function timelineEntries<H extends HistoryLine, A extends ApprovalLine>(histories: readonly H[], approvals: readonly A[], { shortForm }?: {
+    shortForm?: boolean;
+}): (H | A)[];
+export {};

package/dist-client/components/timeline-entries.js ADDED Viewed

@@ -0,0 +1,61 @@
+/**
+ * What a thread's timeline lists, and in what order - one line per thing a person did.
+ *
+ * A thread keeps two records of one decision: the approval row (who judged, what they wrote) and
+ * the thread history the judgment wrote (`approve` · `reject` · `escalate`, with the same comment
+ * as its reason). Listing both drew an approval by 경영지원 as 「상신 정연희」 and 「승인됨 정연희」
+ * with the comment twice (2026-10-16) - and 「상신」, the word `escalate` carries, read as if the
+ * approver had put the request up. The approval row is the judgment; the history line is dropped.
+ *
+ * Putting something up writes `post` and `submit` at the same moment, so one 상신 showed as
+ * 「제출」 and 「게시」 - in either order, the time being equal. `post` is dropped where the thread
+ * was submitted; a tie in time keeps the order things happen in.
+ *
+ * Kept free of imports so the test runner can hold it.
+ */
+/** History lines an approval row already says, or that are no step anyone took. */
+const NOT_SHOWN = ['approve', 'reject', 'escalate', 'save', 'restart'];
+/** The order things happen in on one thread, for lines at the same moment. Approval rows sit at 4; an unknown step with them. */
+const STEP_ORDER = {
+    post: 0,
+    start: 1,
+    delegate: 2,
+    submit: 3,
+    /* the judgment's own lines follow the approval row that made them */
+    approve: 5,
+    reject: 5,
+    escalate: 5,
+    end: 6,
+    abort: 6
+};
+const APPROVAL_ORDER = 4;
+/** The moment a line shows - and is sorted by. */
+export function whenOf(item) {
+    const at = item?.terminatedAt ?? item?.updatedAt ?? item?.createdAt;
+    const ms = at === null || at === undefined || at === '' ? NaN : Date.parse(String(at));
+    return Number.isFinite(ms) ? ms : 0;
+}
+function isHistory(item) {
+    return 'reason' in item;
+}
+function stepOf(item) {
+    return isHistory(item) ? STEP_ORDER[String(item.transaction)] ?? APPROVAL_ORDER : APPROVAL_ORDER;
+}
+/**
+ * `shortForm` is every screen's timeline today. Without it every history line stays - the long form
+ * is the record as stored - and only the order of lines at one moment is set.
+ */
+export function timelineEntries(histories, approvals, { shortForm = false } = {}) {
+    const submitted = histories.some(item => item.transaction === 'submit');
+    const shown = (item) => !shortForm ||
+        (!NOT_SHOWN.some(word => String(item.transaction).includes(word)) && !(item.transaction === 'post' && submitted));
+    const lines = [
+        ...histories.filter(item => !!item.transaction && shown(item)),
+        ...approvals.filter(item => item.judgment)
+    ];
+    return lines
+        .map((item, at) => ({ item, at }))
+        .sort((a, b) => whenOf(a.item) - whenOf(b.item) || stepOf(a.item) - stepOf(b.item) || a.at - b.at)
+        .map(({ item }) => item);
+}
+//# sourceMappingURL=timeline-entries.js.map

package/dist-client/components/timeline-entries.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"timeline-entries.js","sourceRoot":"","sources":["../../client/components/timeline-entries.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,mFAAmF;AACnF,MAAM,SAAS,GAAG,CAAC,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,CAAC,CAAA;AAEtE,iIAAiI;AACjI,MAAM,UAAU,GAA2B;IACzC,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;IACR,QAAQ,EAAE,CAAC;IACX,MAAM,EAAE,CAAC;IACT,qEAAqE;IACrE,OAAO,EAAE,CAAC;IACV,MAAM,EAAE,CAAC;IACT,QAAQ,EAAE,CAAC;IACX,GAAG,EAAE,CAAC;IACN,KAAK,EAAE,CAAC;CACT,CAAA;AACD,MAAM,cAAc,GAAG,CAAC,CAAA;AAKxB,kDAAkD;AAClD,MAAM,UAAU,MAAM,CAAC,IAAS;IAC9B,MAAM,EAAE,GAAG,IAAI,EAAE,YAAY,IAAI,IAAI,EAAE,SAAS,IAAI,IAAI,EAAE,SAAS,CAAA;IAEnE,MAAM,EAAE,GAAG,EAAE,KAAK,IAAI,IAAI,EAAE,KAAK,SAAS,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAA;IAEtF,OAAO,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;AACrC,CAAC;AAED,SAAS,SAAS,CAAC,IAAS;IAC1B,OAAO,QAAQ,IAAI,IAAI,CAAA;AACzB,CAAC;AAED,SAAS,MAAM,CAAC,IAAgC;IAC9C,OAAO,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,cAAc,CAAC,CAAC,CAAC,cAAc,CAAA;AAClG,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,eAAe,CAC7B,SAAuB,EACvB,SAAuB,EACvB,EAAE,SAAS,GAAG,KAAK,KAA8B,EAAE;IAEnD,MAAM,SAAS,GAAG,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,KAAK,QAAQ,CAAC,CAAA;IACvE,MAAM,KAAK,GAAG,CAAC,IAAO,EAAE,EAAE,CACxB,CAAC,SAAS;QACV,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,WAAW,KAAK,MAAM,IAAI,SAAS,CAAC,CAAC,CAAA;IAEnH,MAAM,KAAK,GAAG;QACZ,GAAG,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,IAAI,KAAK,CAAC,IAAI,CAAC,CAAC;QAC9D,GAAG,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC;KAC3C,CAAA;IAED,OAAO,KAAK;SACT,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;SACjC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC;SACjG,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,CAAA;AAC5B,CAAC","sourcesContent":["/**\n * What a thread's timeline lists, and in what order - one line per thing a person did.\n *\n * A thread keeps two records of one decision: the approval row (who judged, what they wrote) and\n * the thread history the judgment wrote (`approve` · `reject` · `escalate`, with the same comment\n * as its reason). Listing both drew an approval by 경영지원 as 「상신 정연희」 and 「승인됨 정연희」\n * with the comment twice (2026-10-16) - and 「상신」, the word `escalate` carries, read as if the\n * approver had put the request up. The approval row is the judgment; the history line is dropped.\n *\n * Putting something up writes `post` and `submit` at the same moment, so one 상신 showed as\n * 「제출」 and 「게시」 - in either order, the time being equal. `post` is dropped where the thread\n * was submitted; a tie in time keeps the order things happen in.\n *\n * Kept free of imports so the test runner can hold it.\n */\n\n/** History lines an approval row already says, or that are no step anyone took. */\nconst NOT_SHOWN = ['approve', 'reject', 'escalate', 'save', 'restart']\n\n/** The order things happen in on one thread, for lines at the same moment. Approval rows sit at 4; an unknown step with them. */\nconst STEP_ORDER: Record<string, number> = {\n post: 0,\n start: 1,\n delegate: 2,\n submit: 3,\n /* the judgment's own lines follow the approval row that made them */\n approve: 5,\n reject: 5,\n escalate: 5,\n end: 6,\n abort: 6\n}\nconst APPROVAL_ORDER = 4\n\ntype HistoryLine = { transaction?: string; reason?: any; updatedAt?: any; createdAt?: any; terminatedAt?: any }\ntype ApprovalLine = { judgment?: string; updatedAt?: any; createdAt?: any; terminatedAt?: any }\n\n/** The moment a line shows - and is sorted by. */\nexport function whenOf(item: any): number {\n const at = item?.terminatedAt ?? item?.updatedAt ?? item?.createdAt\n\n const ms = at === null || at === undefined || at === '' ? NaN : Date.parse(String(at))\n\n return Number.isFinite(ms) ? ms : 0\n}\n\nfunction isHistory(item: any): item is HistoryLine {\n return 'reason' in item\n}\n\nfunction stepOf(item: HistoryLine | ApprovalLine): number {\n return isHistory(item) ? STEP_ORDER[String(item.transaction)] ?? APPROVAL_ORDER : APPROVAL_ORDER\n}\n\n/**\n * `shortForm` is every screen's timeline today. Without it every history line stays - the long form\n * is the record as stored - and only the order of lines at one moment is set.\n */\nexport function timelineEntries<H extends HistoryLine, A extends ApprovalLine>(\n histories: readonly H[],\n approvals: readonly A[],\n { shortForm = false }: { shortForm?: boolean } = {}\n): (H | A)[] {\n const submitted = histories.some(item => item.transaction === 'submit')\n const shown = (item: H) =>\n !shortForm ||\n (!NOT_SHOWN.some(word => String(item.transaction).includes(word)) && !(item.transaction === 'post' && submitted))\n\n const lines = [\n ...histories.filter(item => !!item.transaction && shown(item)),\n ...approvals.filter(item => item.judgment)\n ]\n\n return lines\n .map((item, at) => ({ item, at }))\n .sort((a, b) => whenOf(a.item) - whenOf(b.item) || stepOf(a.item) - stepOf(b.item) || a.at - b.at)\n .map(({ item }) => item)\n}\n"]}

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

@@ -15,6 +15,7 @@ import { PageView } from '@operato/shell';
 import { DocumentPageStyles, ScrollbarStyles } from '@operato/styles';
 import { provider } from '@operato/board/board-provider.js';
 import { ActivityFieldsStyles } from '../../components/activity-fields.js';
+import { DecisionKeysFields } from '../../components/decision-content.js';
 const ActivityThreadFetchResult = `\
 {   id
   state
@@ -50,6 +51,7 @@ const ActivityThreadFetchResult = `\
     description
     state
     activity {       id
+      ${DecisionKeysFields}
       model {         name
         description
         active

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

	@@ -1 +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 '@operato/list-state/ox-page-state.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 { DocumentPageStyles, ScrollbarStyles } from '@operato/styles'\nimport { provider } from '@operato/board/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 { id name\n }\n judgment\n comment\n createdAt\n updatedAt\n terminatedAt\n }\n activityThreadHistories { transaction\n reason\n updater { id 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 participation\n notifyAfter\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 = {\n 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) {\n static styles = [\n /* The frame owns the page shell and the reading column (ADR-0060 decision 8). /\n DocumentPageStyles,\n ScrollbarStyles,\n ActivityFieldsStyles,\n css`\n :host {\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 /* Why the task could not be read - ox-page-state says it, with retry (ADR-0060 decision 8). /\n @state() loadError: unknown = null\n private lastId?: string\n @state() board: any\n\n get context() {\n return {\n /\n * 이 화면이 어떤 틀인가 — 동작 줄이 이것을 읽고 자기 오른쪽 끝을 내용에 맞춘다\n * (ADR-0060 결정 9 보탬). 안 적으면 창 폭이고, 그것은 작업면의 모양이다.\n /\n frame: 'document',\ntitle: this.lifecycle?.params?.['title'] \|\| i18next.t('title.activity'),\n help: 'worklist/activity-thread-view-page',\n /\n * 이 화면은 메뉴에 없다 — 「할 일」의 완료 묶음에서 줄을 눌러 들어온다. 그래서 왼쪽 메뉴가 가리킬\n * 항목이 없고, 표시가 사라져 들어온 사람이 자기가 어디에 있는지 잃는다.\n \n 어느 목록에서 열리는지는 이 화면이 안다. 그것을 적어 둔다.\n /\n menu: 'todo-list',\n /\n * 동작 줄이 비어 있다 — 끝난 일을 보는 화면이라 여기서 내릴 결정이 없다. 나가기는 두지 않는다\n * (ADR-0060 결정 9 보탬 판정 2): 탭의 × 가 이미 하는 일이고, 같은 곳으로 가는 문을 둘 두면\n * 어느 쪽이 무엇을 하는지 사람이 눌러 봐야 안다.\n /\n actions: []\n // activityThread: this.activityThread\n }\n }\n\n render() {\n const activityThread = this.activityThread\n\n / Reading and failing both drew nothing at all, so a failure looked like an empty screen. /\n return html`<div class=\"page\">\n <ox-page-state\n .loading=${!this.loaded && !this.loadError}\n .error=${this.loadError}\n @retry=${() => this.lastId && this.fetchActivityThread(this.lastId)}\n >${\n !activityThread\n ? 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 : this.renderThread(activityThread)\n }</ox-page-state\n >\n </div>`\n }\n\n private renderThread(activityThread: any) {\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() {\n switch (this.activityThread?.activityInstance?.viewType) {\n 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() {\n if (!this.activityThread) {\n return html``\n }\n\n const { viewSource: template } = this.activityThread?.activityInstance\n return unsafeHTML(template)\n }\n\n generatedContent(): DirectiveResult {\n if (!this.activityThread) {\n 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 {\n if (!this.activityThread) {\n 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) {\n this.board = { id: boardId }\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() {\n if (!this.activityThread) {\n 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) => {\n this.activityThread.output = e.detail\n })\n\n return element\n }\n\n updated(changes) {\n if (changes.has('activityThread')) {\n this.updateContext()\n }\n }\n\n async pageUpdated(changes, lifecycle, changedBefore) {\n if (this.active) {\n this.fetchActivityThread(lifecycle.resourceId)\n }\n }\n\n async fetchActivityThread(id) {\n this.lastId = id\n this.loadError = null\n\n let response: any\n try {\n response = await client.query({\n query: gql`\n query activityThread($id: String!) { activityThread(id: $id) ${ActivityThreadFetchResult}\n }\n `,\n variables: { id }\n })\n } catch (error) {\n this.loadError = error\n return\n }\n\n if (response.errors?.length \|\| !response.data) {\n this.loadError = response.errors?.length\n ? response.errors\n : new Error(i18next.t('error.activity-thread not found', { activityThread: id }))\n return\n }\n\n this.activityThread = response.data.activityThread\n this.loaded = true\n\n this.updateContext()\n }\n}\n"]}
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 '@operato/list-state/ox-page-state.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 { DocumentPageStyles, ScrollbarStyles } from '@operato/styles'\nimport { provider } from '@operato/board/board-provider.js'\n\nimport { ActivityFieldsStyles } from '../../components/activity-fields.js'\nimport { DecisionKeysFields } from '../../components/decision-content.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 { id name\n }\n judgment\n comment\n createdAt\n updatedAt\n terminatedAt\n }\n activityThreadHistories { transaction\n reason\n updater { id name\n }\n updatedAt\n state\n output\n }\n activityInstance { id\n name\n description\n state\n activity { id\n ${DecisionKeysFields}\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 participation\n notifyAfter\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 = {\n 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) {\n static styles = [\n /* The frame owns the page shell and the reading column (ADR-0060 decision 8). /\n DocumentPageStyles,\n ScrollbarStyles,\n ActivityFieldsStyles,\n css`\n :host {\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 /* Why the task could not be read - ox-page-state says it, with retry (ADR-0060 decision 8). /\n @state() loadError: unknown = null\n private lastId?: string\n @state() board: any\n\n get context() {\n return {\n /\n * 이 화면이 어떤 틀인가 — 동작 줄이 이것을 읽고 자기 오른쪽 끝을 내용에 맞춘다\n * (ADR-0060 결정 9 보탬). 안 적으면 창 폭이고, 그것은 작업면의 모양이다.\n /\n frame: 'document',\ntitle: this.lifecycle?.params?.['title'] \|\| i18next.t('title.activity'),\n help: 'worklist/activity-thread-view-page',\n /\n * 이 화면은 메뉴에 없다 — 「할 일」의 완료 묶음에서 줄을 눌러 들어온다. 그래서 왼쪽 메뉴가 가리킬\n * 항목이 없고, 표시가 사라져 들어온 사람이 자기가 어디에 있는지 잃는다.\n \n 어느 목록에서 열리는지는 이 화면이 안다. 그것을 적어 둔다.\n /\n menu: 'todo-list',\n /\n * 동작 줄이 비어 있다 — 끝난 일을 보는 화면이라 여기서 내릴 결정이 없다. 나가기는 두지 않는다\n * (ADR-0060 결정 9 보탬 판정 2): 탭의 × 가 이미 하는 일이고, 같은 곳으로 가는 문을 둘 두면\n * 어느 쪽이 무엇을 하는지 사람이 눌러 봐야 안다.\n /\n actions: []\n // activityThread: this.activityThread\n }\n }\n\n render() {\n const activityThread = this.activityThread\n\n / Reading and failing both drew nothing at all, so a failure looked like an empty screen. /\n return html`<div class=\"page\">\n <ox-page-state\n .loading=${!this.loaded && !this.loadError}\n .error=${this.loadError}\n @retry=${() => this.lastId && this.fetchActivityThread(this.lastId)}\n >${\n !activityThread\n ? 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 : this.renderThread(activityThread)\n }</ox-page-state\n >\n </div>`\n }\n\n private renderThread(activityThread: any) {\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() {\n switch (this.activityThread?.activityInstance?.viewType) {\n 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() {\n if (!this.activityThread) {\n return html``\n }\n\n const { viewSource: template } = this.activityThread?.activityInstance\n return unsafeHTML(template)\n }\n\n generatedContent(): DirectiveResult {\n if (!this.activityThread) {\n 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 {\n if (!this.activityThread) {\n 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) {\n this.board = { id: boardId }\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() {\n if (!this.activityThread) {\n 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) => {\n this.activityThread.output = e.detail\n })\n\n return element\n }\n\n updated(changes) {\n if (changes.has('activityThread')) {\n this.updateContext()\n }\n }\n\n async pageUpdated(changes, lifecycle, changedBefore) {\n if (this.active) {\n this.fetchActivityThread(lifecycle.resourceId)\n }\n }\n\n async fetchActivityThread(id) {\n this.lastId = id\n this.loadError = null\n\n let response: any\n try {\n response = await client.query({\n query: gql`\n query activityThread($id: String!) { activityThread(id: $id) ${ActivityThreadFetchResult}\n }\n `,\n variables: { id }\n })\n } catch (error) {\n this.loadError = error\n return\n }\n\n if (response.errors?.length \|\| !response.data) {\n this.loadError = response.errors?.length\n ? response.errors\n : new Error(i18next.t('error.activity-thread not found', { activityThread: id }))\n return\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.js CHANGED Viewed

@@ -5,6 +5,8 @@ import { i18next, localize } from '@operato/i18n';
 import { ScrollbarStyles } from '@operato/styles';
 import { ActivityThread } from '../../types/activity-thread.js';
 import { ActivityFieldsStyles, inputSpecOf, outputSpecOf, renderGiven, fieldValue, personValue } from '../../components/activity-fields.js';
+import { DecisionContentStyles, renderDecision } from '../../components/decision-content.js';
+import { threadSectionsOf } from './thread-sections.js';
 import { whenText } from '../../when.js';
 /**
  * 끝난 업무를 읽는 화면 — **완료 목록에서 줄을 눌러 들어온다.**
@@ -32,6 +34,7 @@ let ActivityThreadView = class ActivityThreadView extends localize(i18next)(LitE
     static { this.styles = [
         ScrollbarStyles,
         ActivityFieldsStyles,
+        DecisionContentStyles,
         css `
       :host {
         display: block;
@@ -57,7 +60,20 @@ let ActivityThreadView = class ActivityThreadView extends localize(i18next)(LitE
         const model = activityInstance?.activity?.model;
         const inputSpec = inputSpecOf(model);
         const outputSpec = outputSpecOf(model);
+        /*
+         * The decision first, as on the task and approval screens (thread-sections). 상신함 opens what
+         * was put up here, and an expenditure request's payee and lines live only in its decision.
+         */
+        const decision = renderDecision(activityInstance?.activity?.decisionKeys, input);
+        const sections = threadSectionsOf({
+            decision: decision !== nothing,
+            given: inputSpec.length,
+            written: outputSpec.length,
+            state: thread.state
+        });
         return html `
+      ${sections.decision ? decision : nothing}
       <section readonly>
         <h2>${i18next.t('label.thread-basics')}</h2>
         <dl class="given">
@@ -88,7 +104,7 @@ let ActivityThreadView = class ActivityThreadView extends localize(i18next)(LitE
         </dl>
       </section>
-      ${inputSpec.length
+      ${sections.given
             ? html `
             <section readonly>
               <h2>${i18next.t('label.activity-input')}</h2>
@@ -96,7 +112,7 @@ let ActivityThreadView = class ActivityThreadView extends localize(i18next)(LitE
             </section>
           `
             : nothing}
-      ${outputSpec.length
+      ${sections.written
             ? html `
             <section readonly>
               <h2>${i18next.t('field.artifact')}</h2>

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

	@@ -1 +1 @@
1	- {"version":3,"file":"activity-thread-view.js","sourceRoot":"","sources":["../../../client/pages/activity-thread/activity-thread-view.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEjD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AAC/D,OAAO,EAAE,oBAAoB,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAA;AAC3I,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAExC;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEI,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;aAC5D,WAAM,GAAG;QACd,eAAe;QACf,oBAAoB;QACpB,GAAG,CAAA;;;;;;;;;;;;;KAaF;KACF,~~AAjBY~~,~~CAiBZ~~;IAID,MAAM;QACJ,MAAM,MAAM,GAAG,IAAI,CAAC,cAAc,CAAA;QAElC,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,OAAO,OAAO,CAAA;QAChB,CAAC;QAED,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,gBAAgB,EAAE,GAAG,MAAM,CAAA;QACjG,MAAM,EAAE,KAAK,EAAE,GAAG,gBAAgB,IAAK,EAAU,CAAA;QAEjD,MAAM,KAAK,GAAI,gBAAwB,EAAE,QAAQ,EAAE,KAAK,CAAA;QACxD,MAAM,SAAS,GAAG,WAAW,CAAC,KAAK,CAAC,CAAA;QACpC,MAAM,UAAU,GAAG,YAAY,CAAC,KAAK,CAAC,CAAA;QAEtC,OAAO,IAAI,CAAA~~;;cAED~~,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC;;;gBAG9B,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;gBAC3B,WAAW,CAAC,QAAQ,CAAC;;gBAErB,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;gBAC9B,UAAU,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;;gBAEhC,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC;gBAC7B,UAAU,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;;gBAE/B,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC;gBAChC,UAAU,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;;;;;;;YAOtC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC;YACjB,CAAC,CAAC,IAAI,CAAA;sBACI,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;sBACxB,KAAK;eACZ;YACH,CAAC,CAAC,OAAO;;;;QAIb,~~SAAS~~,CAAC,~~MAAM~~;~~YAChB~~,CAAC,CAAC,IAAI,CAAA;;oBAEM,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC;gBACrC,WAAW,CAAC,SAAS,EAAE,KAAK,CAAC;;WAElC;YACH,CAAC,CAAC,OAAO;QACT,~~UAAU~~,CAAC,~~MAAM~~;~~YACjB~~,CAAC,CAAC,IAAI,CAAA;;oBAEM,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;gBAC/B,WAAW,CAAC,UAAU,EAAE,MAAM,CAAC;;WAEpC;YACH,CAAC,CAAC,OAAO;KACZ,CAAA;IACH,CAAC;;~~AAhE2B~~;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8BAAkB,cAAc;0DAAA;~~AApBhD~~,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,~~CAqF9B~~","sourcesContent":["import { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { ActivityThread } from '../../types/activity-thread.js'\nimport { ActivityFieldsStyles, inputSpecOf, outputSpecOf, renderGiven, fieldValue, personValue } from '../../components/activity-fields.js'\nimport { whenText } from '../../when.js'\n\n/*\n 끝난 업무를 읽는 화면 — 완료 목록에서 줄을 눌러 들어온다.\n \n ── 무엇이 잘못되고 있었나 (2026-09-06) ────────────────────────────────────\n * 이 화면은 같은 건을 그리는 세 화면 중 하나인데(업무 상세 · 결재 상세 · 여기), 셋이 서로 다른\n * 말과 모양을 쓰고 있었다. 같은 값을 보는 사람이 화면을 옮길 때마다 다른 것을 본다.\n \n 항목 이름 결재 화면은 「승인이 필요한 이유」, 여기는 원문 because\n * 객체 값 결재 화면은 JSON, 여기는 [object Object]\n * 시각 결재 화면은 2026. 9. 1. 오전 11:55, 여기는 Tuesday, September 1, 2026 at 11:55 AM\n * 갈래 결재 화면은 받은 값 · 낼 값으로 갈라 보이고, 여기는 전부 「산출물」 한 표\n \n 마지막이 특히 나쁘다. because 는 업무를 시작할 때 받은 값인데 「산출물」 밑에 있었다 —\n * 화면이 값의 성격을 틀리게 말한다.\n \n 그래서 셋이 activity-fields 한 벌을 쓰게 했다.\n \n ── 자기 조회를 하지 않는다 ────────────────────────────────────────────────\n * 전에는 이 요소가 activityThreadId 를 받아 스스로 다시 조회했다. 담고 있는 화면\n * (activity-thread-view-page)이 이미 같은 건을 조회한 뒤였다. 한 화면을 열면 같은 질의가 두 번\n * 나갔고, 두 응답이 어긋날 수 있는 자리도 생긴다. 값을 받아 그리기만 한다.\n */\n@customElement('activity-thread-view')\nexport class ActivityThreadView extends localize(i18next)(LitElement) {\n static styles = [\n ScrollbarStyles,\n ActivityFieldsStyles,\n css`\n :host {\n display: block;\n color: var(--ui-ink, #17242c);\n font-size: var(--ui-t-body, 13px);\n }\n\n @media print {\n :host {\n display: block;\n overflow: visible;\n }\n }\n `\n ]\n\n @property({ type: Object }) activityThread?: ActivityThread\n\n render() {\n const thread = this.activityThread\n\n if (!thread) {\n return nothing\n }\n\n const { assignee, output, round, assignedAt, startedAt, terminatedAt, activityInstance } = thread\n const { input } = activityInstance \|\| ({} as any)\n\n const model = (activityInstance as any)?.activity?.model\n const inputSpec = inputSpecOf(model)\n const outputSpec = outputSpecOf(model)\n\n return html`\n <section readonly>\n <h2>${i18next.t('label.thread-basics')}</h2>\n <dl class=\"given\">\n <!-- 이 화면이 부르는 이름은 「담당자」다 — 결재 목록의 칸과 같은 낱말을 쓴다. -->\n <dt>${i18next.t('field.wl-owner')}</dt>\n <dd>${personValue(assignee)}</dd>\n\n <dt>${i18next.t('field.assigned-at')}</dt>\n <dd>${fieldValue(whenText(assignedAt))}</dd>\n\n <dt>${i18next.t('field.started-at')}</dt>\n <dd>${fieldValue(whenText(startedAt))}</dd>\n\n <dt>${i18next.t('field.terminated-at')}</dt>\n <dd>${fieldValue(whenText(terminatedAt))}</dd>\n\n <!--\n 차수는 1일 때 적지 않는다. 거의 모든 건이 1차라 그 줄은 아무것도 알려 주지 않고,\n 2차 이상일 때만 「이 건은 한 번 되돌아왔다」는 사실이 된다.\n 결재 목록의 「N차 재상신」 표식과 같은 판단이다(activity-cells 의 approvalMarks).\n -->\n ${Number(round) > 1\n ? html`\n <dt>${i18next.t('field.round')}</dt>\n <dd>${round}</dd>\n `\n : nothing}\n </dl>\n </section>\n\n ${~~inputSpec~~.~~length~~\n ? html`\n <section readonly>\n <h2>${i18next.t('label.activity-input')}</h2>\n ${renderGiven(inputSpec, input)}\n </section>\n `\n : nothing}\n ${~~outputSpec~~.~~length~~\n ? html`\n <section readonly>\n <h2>${i18next.t('field.artifact')}</h2>\n ${renderGiven(outputSpec, output)}\n </section>\n `\n : nothing}\n `\n }\n}\n"]}
1	+ {"version":3,"file":"activity-thread-view.js","sourceRoot":"","sources":["../../../client/pages/activity-thread/activity-thread-view.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { ActivityThread } from '../../types/activity-thread.js'\nimport { ActivityFieldsStyles, inputSpecOf, outputSpecOf, renderGiven, fieldValue, personValue } from '../../components/activity-fields.js'\nimport { DecisionContentStyles, renderDecision } from '../../components/decision-content.js'\nimport { threadSectionsOf } from './thread-sections.js'\nimport { whenText } from '../../when.js'\n\n/*\n 끝난 업무를 읽는 화면 — 완료 목록에서 줄을 눌러 들어온다.\n \n ── 무엇이 잘못되고 있었나 (2026-09-06) ────────────────────────────────────\n * 이 화면은 같은 건을 그리는 세 화면 중 하나인데(업무 상세 · 결재 상세 · 여기), 셋이 서로 다른\n * 말과 모양을 쓰고 있었다. 같은 값을 보는 사람이 화면을 옮길 때마다 다른 것을 본다.\n \n 항목 이름 결재 화면은 「승인이 필요한 이유」, 여기는 원문 because\n * 객체 값 결재 화면은 JSON, 여기는 [object Object]\n * 시각 결재 화면은 2026. 9. 1. 오전 11:55, 여기는 Tuesday, September 1, 2026 at 11:55 AM\n * 갈래 결재 화면은 받은 값 · 낼 값으로 갈라 보이고, 여기는 전부 「산출물」 한 표\n \n 마지막이 특히 나쁘다. because 는 업무를 시작할 때 받은 값인데 「산출물」 밑에 있었다 —\n * 화면이 값의 성격을 틀리게 말한다.\n \n 그래서 셋이 activity-fields 한 벌을 쓰게 했다.\n \n ── 자기 조회를 하지 않는다 ────────────────────────────────────────────────\n * 전에는 이 요소가 activityThreadId 를 받아 스스로 다시 조회했다. 담고 있는 화면\n * (activity-thread-view-page)이 이미 같은 건을 조회한 뒤였다. 한 화면을 열면 같은 질의가 두 번\n * 나갔고, 두 응답이 어긋날 수 있는 자리도 생긴다. 값을 받아 그리기만 한다.\n /\n@customElement('activity-thread-view')\nexport class ActivityThreadView extends localize(i18next)(LitElement) {\n static styles = [\n ScrollbarStyles,\n ActivityFieldsStyles,\n DecisionContentStyles,\n css`\n :host {\n display: block;\n color: var(--ui-ink, #17242c);\n font-size: var(--ui-t-body, 13px);\n }\n\n @media print {\n :host {\n display: block;\n overflow: visible;\n }\n }\n `\n ]\n\n @property({ type: Object }) activityThread?: ActivityThread\n\n render() {\n const thread = this.activityThread\n\n if (!thread) {\n return nothing\n }\n\n const { assignee, output, round, assignedAt, startedAt, terminatedAt, activityInstance } = thread\n const { input } = activityInstance \|\| ({} as any)\n\n const model = (activityInstance as any)?.activity?.model\n const inputSpec = inputSpecOf(model)\n const outputSpec = outputSpecOf(model)\n\n /\n * The decision first, as on the task and approval screens (thread-sections). 상신함 opens what\n * was put up here, and an expenditure request's payee and lines live only in its decision.\n */\n const decision = renderDecision((activityInstance as any)?.activity?.decisionKeys, input)\n const sections = threadSectionsOf({\n decision: decision !== nothing,\n given: inputSpec.length,\n written: outputSpec.length,\n state: thread.state\n })\n\n return html`\n ${sections.decision ? decision : nothing}\n\n <section readonly>\n <h2>${i18next.t('label.thread-basics')}</h2>\n <dl class=\"given\">\n <!-- 이 화면이 부르는 이름은 「담당자」다 — 결재 목록의 칸과 같은 낱말을 쓴다. -->\n <dt>${i18next.t('field.wl-owner')}</dt>\n <dd>${personValue(assignee)}</dd>\n\n <dt>${i18next.t('field.assigned-at')}</dt>\n <dd>${fieldValue(whenText(assignedAt))}</dd>\n\n <dt>${i18next.t('field.started-at')}</dt>\n <dd>${fieldValue(whenText(startedAt))}</dd>\n\n <dt>${i18next.t('field.terminated-at')}</dt>\n <dd>${fieldValue(whenText(terminatedAt))}</dd>\n\n <!--\n 차수는 1일 때 적지 않는다. 거의 모든 건이 1차라 그 줄은 아무것도 알려 주지 않고,\n 2차 이상일 때만 「이 건은 한 번 되돌아왔다」는 사실이 된다.\n 결재 목록의 「N차 재상신」 표식과 같은 판단이다(activity-cells 의 approvalMarks).\n -->\n ${Number(round) > 1\n ? html`\n <dt>${i18next.t('field.round')}</dt>\n <dd>${round}</dd>\n `\n : nothing}\n </dl>\n </section>\n\n ${sections.given\n ? html`\n <section readonly>\n <h2>${i18next.t('label.activity-input')}</h2>\n ${renderGiven(inputSpec, input)}\n </section>\n `\n : nothing}\n ${sections.written\n ? html`\n <section readonly>\n <h2>${i18next.t('field.artifact')}</h2>\n ${renderGiven(outputSpec, output)}\n </section>\n `\n : nothing}\n `\n }\n}\n"]}

package/dist-client/pages/todo/draft-list-page.d.ts CHANGED Viewed

@@ -2,7 +2,6 @@ import '@operato/data-grist';
 import '@operato/data-grist/ox-filters-form.js';
 import '../../components/activity-starter-form.js';
 import '../../components/work-box-groups.js';
-import '../activity-instance/activity-instance-view.js';
 import { DataGrist, FetchOption } from '@operato/data-grist';
 import { PageView } from '@operato/shell';
 declare const DraftListPage_base: (new (...args: any[]) => import("lit").LitElement) & typeof PageView;
@@ -50,8 +49,17 @@ export declare class DraftListPage extends DraftListPage_base {
         total: any;
         records: any;
     }>;
-    /** 올린 뒤의 건은 고칠 것이 없다 — 어디까지 왔는지를 본다. */
-    openActivityInstanceView(activityInstance: any): void;
+    /**
+     * 올린 뒤의 건은 고칠 것이 없다 — 어디까지 왔는지를 본다.
+     *
+     * 할 일 · 내 결재함처럼 **화면으로 옮겨 간다.** 전에는 업무 건 보기를 팝업으로 띄웠는데, 세 함 중
+     * 이 함만 팝업이었고 그 팝업은 관리자 검색 화면의 것이라 리본도 결재 내용의 모양도 달랐다. 이제
+     * 할 일의 완료가 여는 읽기 화면(activity-thread-view)을 같이 쓴다.
+     *
+     * 내가 올린 건의 스레드는 대개 내 것이다(post) — 그것을 연다. 남에게 맡긴 건이면 그 건의 첫
+     * 스레드를 연다. 올린 사람은 그 건의 스레드를 읽을 수 있다(assert-may-read · participates).
+     */
+    openActivityThreadView(record: any): void;
     openActivityInstanceStart(activityInstance: any): void;
 }
 export {};