@things-factory/worklist 10.0.18 → 10.1.0

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

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

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

@@ -8,6 +8,25 @@ export declare class ActivityInstanceRibon extends ActivityInstanceRibon_base {
     static styles: import("lit").CSSResult[];
     activityInstance: any;
     render(): import("lit-html").TemplateResult<1>;
+    /**
+     * 이 건의 기본 정보 — **팝업으로 연다.**
+     *
+     * ── 왜 aside 가 아닌가 (2026-09-06) ────────────────────────────────────
+     * 전에는 화면 오른쪽에서 나오는 aside 판이었다. 두 가지가 걸린다.
+     *
+     *   자리를 다툰다   화면 오른쪽 세로 판은 operato-twin 의 twin-entity360 이 쓰는 자리다
+     *                  (position: fixed · right: 0 · height: 100vh). 같은 자리에 둘이 선다.
+     *   전역 슬롯이다   VIEWPART_POSITION.ASIDEBAR 은 앱이 하나만 갖는다. 열 개가 넘는 패키지가
+     *                  그 자리를 쓰고 있어(twin 의 AI 협의 도크 · board-ui · help · more-ui …),
+     *                  이 판을 열면 그중 열려 있던 것이 닫힌다.
+     *
+     * 그리고 자리의 뜻이 다르다. 오른쪽 드로어는 **보고 있는 대상을 따라다니는 상세**이고(360 이
+     * 그것이다 — 포커스가 바뀌면 내용이 바뀌고 화면을 옮겨도 남는다), 이 판은 **이 화면의 이 건**에
+     * 대한 것이라 화면을 벗어나면 뜻이 없다. 페이지에 매인 것을 앱 전역 자리에 두지 않는다.
+     *
+     * 내용도 팝업 크기다 — 값 여덟 줄과 접힌 타임라인이라 세로 100vh 를 쓸 일이 없었다.
+     */
+    private openInfo;
     updated(changes: any): void;
 }
 export {};

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

@@ -3,143 +3,76 @@ import '@material/web/button/elevated-button.js';
 import '@operato/property-editor/ox-properties-dynamic-view.js';
 import '@things-factory/organization/dist-client/component/approval-line-brief.js';
 import '../templates/activity-instance-context-template.js';
-import { css, html, LitElement } from 'lit';
+import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { i18next, localize } from '@operato/i18n';
-import { toggleOverlay } from '@operato/layout';
+import { openPopup } from '@operato/layout';
+import { StateRibonStyles } from './state-ribon.js';
 let ActivityInstanceRibon = class ActivityInstanceRibon extends localize(i18next)(LitElement) {
     constructor() {
         super(...arguments);
         this.activityInstance = {};
     }
-    static { this.styles = [
-        css `
-      :host {
-        display: flex;
-        background-color: var(--worklist-status-color);
-        color: var(--md-sys-color-on-primary);
-        align-items: center;
-        min-height: 44px;
-        --fontsize-small: 12px;
-      }
-
-      div {
-        border-left: var(--border-dim-color);
-        padding: var(--spacing-small) var(--spacing-medium);
-        align-self: center;
-      }
-
-      :host([state='draft']) {
-        --worklist-status-color: #5f7184;
-      }
-
-      :host([state='issued']) {
-        --worklist-status-color: #56af45;
-      }
-
-      :host([state='assigned']) {
-        --worklist-status-color: #428df3;
-      }
-
-      :host([state='started']) {
-        --worklist-status-color: #595de5;
-      }
-
-      :host([state='pending']) {
-        --worklist-status-color: #f27429;
-      }
-
-      :host([state='ended']) {
-        --worklist-status-color: #02acae;
-      }
-
-      :host([state='aborted']) {
-        --worklist-status-color: #cb3a33;
-      }
-
-      md-icon {
-        font-size: 24px;
-      }
-
-      [desc] {
-        flex: 2;
-        font-size: var(--fontsize-small);
-      }
-
-      [desc] * {
-        vertical-align: middle;
-      }
-
-      [assignee] {
-        text-align: center;
-        font-size: var(--fontsize-small);
-        line-height: 1.3;
-      }
-
-      [assignee] span {
-        display: block;
-        font-size: var(--fontsize-large);
-        font-weight: bold;
-      }
-
-      approval-line-brief {
-        background-color: var(--worklist-status-color);
-        font-size: var(--fontsize-small);
-      }
-
-      [state] {
-        text-align: right;
-        font-size: var(--fontsize-small);
-        font-weight: bold;
-      }
-
-      @media only screen and (max-width: 460px) {
-        div {
-          border-left: none;
-        }
-        [assignee] {
-          display: none;
-        }
-        md-icon {
-          padding: 0;
-        }
-        approval-line-brief {
-          display: none;
-        }
-      }
-    `
-    ]; }
+    static { this.styles = [StateRibonStyles]; }
     render() {
         const { description, state, assignee, approvalLine, activity } = this.activityInstance || {};
         const { startingType } = activity || {};
         return html `
-      <div desc>
-        <md-icon
-          @click=${() => {
-            toggleOverlay('activity-info-overlay', {
-                template: html `<activity-instance-context-template
-                .activityInstance=${this.activityInstance}
-                state=${state}
-              ></activity-instance-context-template>`
-            });
+      <span class="state">
+        <i class="dot"></i>
+        ${i18next.t('label.activity-state-' + state)}
+      </span>
+
+      <md-icon
+        class="info"
+        role="button"
+        tabindex="0"
+        title=${String(i18next.t('label.thread-info'))}
+        @click=${() => this.openInfo(state)}
+        @keydown=${(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.openInfo(state);
+            }
         }}
-          >description</md-icon
-        >
-        ${description}
-      </div>
-      ${startingType == 'issue' && assignee
-            ? html `
-            <div assignee>
-              ${i18next.t('field.assignee')}
-              <span>${assignee?.name}&nbsp;</span>
-            </div>
-          `
-            : html ``}
-      ${approvalLine ? html `<approval-line-brief .model=${approvalLine}></approval-line-brief>` : html ``}
+        >info</md-icon
+      >
+
+      <span class="desc" title=${description || ''}>${description || ''}</span>
 
-      <div state>${i18next.t('label.activity-state-' + state)}</div>
+
+      ${startingType == 'issue' && assignee
+            ? html `<span class="who"><span class="who-label">${i18next.t('field.assignee')}</span>${assignee?.name}</span>`
+            : ''}
+      <!--
+        결재선의 현재 단계를 넘기지 않는다 — 이 ribbon 이 쓰이는 곳은 업무를 시작하는 화면
+        하나뿐이고(activity-instance-start-page), 거기서는 아직 아무도 판단하지 않았다.
+        approval-line-brief 는 값이 없으면 기안자를 현재로 표시하는데, 이 화면에서는 그것이 맞다.
+      -->
+      ${approvalLine ? html `<approval-line-brief .model=${approvalLine}></approval-line-brief>` : ''}
     `;
     }
+    /**
+     * 이 건의 기본 정보 — **팝업으로 연다.**
+     *
+     * ── 왜 aside 가 아닌가 (2026-09-06) ────────────────────────────────────
+     * 전에는 화면 오른쪽에서 나오는 aside 판이었다. 두 가지가 걸린다.
+     *
+     *   자리를 다툰다   화면 오른쪽 세로 판은 operato-twin 의 twin-entity360 이 쓰는 자리다
+     *                  (position: fixed · right: 0 · height: 100vh). 같은 자리에 둘이 선다.
+     *   전역 슬롯이다   VIEWPART_POSITION.ASIDEBAR 은 앱이 하나만 갖는다. 열 개가 넘는 패키지가
+     *                  그 자리를 쓰고 있어(twin 의 AI 협의 도크 · board-ui · help · more-ui …),
+     *                  이 판을 열면 그중 열려 있던 것이 닫힌다.
+     *
+     * 그리고 자리의 뜻이 다르다. 오른쪽 드로어는 **보고 있는 대상을 따라다니는 상세**이고(360 이
+     * 그것이다 — 포커스가 바뀌면 내용이 바뀌고 화면을 옮겨도 남는다), 이 판은 **이 화면의 이 건**에
+     * 대한 것이라 화면을 벗어나면 뜻이 없다. 페이지에 매인 것을 앱 전역 자리에 두지 않는다.
+     *
+     * 내용도 팝업 크기다 — 값 여덟 줄과 접힌 타임라인이라 세로 100vh 를 쓸 일이 없었다.
+     */
+    openInfo(state) {
+        openPopup(html `<activity-instance-context-template .activityInstance=${this.activityInstance} state=${state}></activity-instance-context-template>`, { title: i18next.t('label.thread-info') });
+    }
     updated(changes) {
         if (changes.has('activityInstance') && this.activityInstance) {
             const { state } = this.activityInstance;

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

@@ -1 +1 @@
-{"version":3,"file":"activity-instance-ribon.js","sourceRoot":"","sources":["../../client/components/activity-instance-ribon.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAChD,OAAO,wDAAwD,CAAA;AAC/D,OAAO,2EAA2E,CAAA;AAClF,OAAO,oDAAoD,CAAA;AAE3D,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAGxC,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAAjE;;QAmGuB,qBAAgB,GAAQ,EAAE,CAAA;IA0CxD,CAAC;aA5IQ,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8FF;KACF,AAhGY,CAgGZ;IAID,MAAM;QACJ,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,gBAAgB,IAAI,EAAE,CAAA;QAC5F,MAAM,EAAE,YAAY,EAAE,GAAG,QAAQ,IAAI,EAAE,CAAA;QAEvC,OAAO,IAAI,CAAA;;;mBAGI,GAAG,EAAE;YACZ,aAAa,CAAC,uBAAuB,EAAE;gBACrC,QAAQ,EAAE,IAAI,CAAA;oCACQ,IAAI,CAAC,gBAAgB;wBACjC,KAAK;qDACwB;aACxC,CAAC,CAAA;QACJ,CAAC;;;UAGD,WAAW;;QAEb,YAAY,IAAI,OAAO,IAAI,QAAQ;YACnC,CAAC,CAAC,IAAI,CAAA;;gBAEE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;sBACrB,QAAQ,EAAE,IAAI;;WAEzB;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;QACR,YAAY,CAAC,CAAC,CAAC,IAAI,CAAA,+BAA+B,YAAY,yBAAyB,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE;;mBAErF,OAAO,CAAC,CAAC,CAAC,uBAAuB,GAAG,KAAK,CAAC;KACxD,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAAO;QACb,IAAI,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC7D,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,gBAAgB,CAAA;YAEvC,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;QACnC,CAAC;IACH,CAAC;;AAzC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;+DAA2B;AAnG3C,qBAAqB;IADjC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,qBAAqB,CA6IjC","sourcesContent":["import '@material/web/button/elevated-button.js'\nimport '@operato/property-editor/ox-properties-dynamic-view.js'\nimport '@things-factory/organization/dist-client/component/approval-line-brief.js'\nimport '../templates/activity-instance-context-template.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { toggleOverlay } from '@operato/layout'\n\n@customElement('activity-instance-ribon')\nexport class ActivityInstanceRibon extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        background-color: var(--worklist-status-color);\n        color: var(--md-sys-color-on-primary);\n        align-items: center;\n        min-height: 44px;\n        --fontsize-small: 12px;\n      }\n\n      div {\n        border-left: var(--border-dim-color);\n        padding: var(--spacing-small) var(--spacing-medium);\n        align-self: center;\n      }\n\n      :host([state='draft']) {\n        --worklist-status-color: #5f7184;\n      }\n\n      :host([state='issued']) {\n        --worklist-status-color: #56af45;\n      }\n\n      :host([state='assigned']) {\n        --worklist-status-color: #428df3;\n      }\n\n      :host([state='started']) {\n        --worklist-status-color: #595de5;\n      }\n\n      :host([state='pending']) {\n        --worklist-status-color: #f27429;\n      }\n\n      :host([state='ended']) {\n        --worklist-status-color: #02acae;\n      }\n\n      :host([state='aborted']) {\n        --worklist-status-color: #cb3a33;\n      }\n\n      md-icon {\n        font-size: 24px;\n      }\n\n      [desc] {\n        flex: 2;\n        font-size: var(--fontsize-small);\n      }\n\n      [desc] * {\n        vertical-align: middle;\n      }\n\n      [assignee] {\n        text-align: center;\n        font-size: var(--fontsize-small);\n        line-height: 1.3;\n      }\n\n      [assignee] span {\n        display: block;\n        font-size: var(--fontsize-large);\n        font-weight: bold;\n      }\n\n      approval-line-brief {\n        background-color: var(--worklist-status-color);\n        font-size: var(--fontsize-small);\n      }\n\n      [state] {\n        text-align: right;\n        font-size: var(--fontsize-small);\n        font-weight: bold;\n      }\n\n      @media only screen and (max-width: 460px) {\n        div {\n          border-left: none;\n        }\n        [assignee] {\n          display: none;\n        }\n        md-icon {\n          padding: 0;\n        }\n        approval-line-brief {\n          display: none;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) activityInstance: any = {}\n\n  render() {\n    const { description, state, assignee, approvalLine, activity } = this.activityInstance || {}\n    const { startingType } = activity || {}\n\n    return html`\n      <div desc>\n        <md-icon\n          @click=${() => {\n            toggleOverlay('activity-info-overlay', {\n              template: html`<activity-instance-context-template\n                .activityInstance=${this.activityInstance}\n                state=${state}\n              ></activity-instance-context-template>`\n            })\n          }}\n          >description</md-icon\n        >\n        ${description}\n      </div>\n      ${startingType == 'issue' && assignee\n        ? html`\n            <div assignee>\n              ${i18next.t('field.assignee')}\n              <span>${assignee?.name}&nbsp;</span>\n            </div>\n          `\n        : html``}\n      ${approvalLine ? html`<approval-line-brief .model=${approvalLine}></approval-line-brief>` : html``}\n\n      <div state>${i18next.t('label.activity-state-' + state)}</div>\n    `\n  }\n\n  updated(changes) {\n    if (changes.has('activityInstance') && this.activityInstance) {\n      const { state } = this.activityInstance\n\n      this.setAttribute('state', state)\n    }\n  }\n}\n"]}
+{"version":3,"file":"activity-instance-ribon.js","sourceRoot":"","sources":["../../client/components/activity-instance-ribon.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAChD,OAAO,wDAAwD,CAAA;AAC/D,OAAO,2EAA2E,CAAA;AAClF,OAAO,oDAAoD,CAAA;AAE3D,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAE3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAG5C,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAAjE;;QAGuB,qBAAgB,GAAQ,EAAE,CAAA;IA0ExD,CAAC;aA5EQ,WAAM,GAAG,CAAC,gBAAgB,CAAC,AAArB,CAAqB;IAIlC,MAAM;QACJ,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,gBAAgB,IAAI,EAAE,CAAA;QAC5F,MAAM,EAAE,YAAY,EAAE,GAAG,QAAQ,IAAI,EAAE,CAAA;QAEvC,OAAO,IAAI,CAAA;;;UAGL,OAAO,CAAC,CAAC,CAAC,uBAAuB,GAAG,KAAK,CAAC;;;;;;;gBAOpC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC;iBACrC,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;mBACxB,CAAC,CAAgB,EAAE,EAAE;YAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gBACvC,CAAC,CAAC,cAAc,EAAE,CAAA;gBAClB,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;YACtB,CAAC;QACH,CAAC;;;;iCAIwB,WAAW,IAAI,EAAE,IAAI,WAAW,IAAI,EAAE;;;QAG/D,YAAY,IAAI,OAAO,IAAI,QAAQ;YACnC,CAAC,CAAC,IAAI,CAAA,6CAA6C,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,UAAU,QAAQ,EAAE,IAAI,SAAS;YAC/G,CAAC,CAAC,EAAE;;;;;;QAMJ,YAAY,CAAC,CAAC,CAAC,IAAI,CAAA,+BAA+B,YAAY,yBAAyB,CAAC,CAAC,CAAC,EAAE;KAC/F,CAAA;IACH,CAAC;IAED;;;;;;;;;;;;;;;;;OAiBG;IACK,QAAQ,CAAC,KAAa;QAC5B,SAAS,CACP,IAAI,CAAA,yDAAyD,IAAI,CAAC,gBAAgB,UAAU,KAAK,wCAAwC,EACzI,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,EAAE,CAC1C,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAAO;QACb,IAAI,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC7D,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,gBAAgB,CAAA;YAEvC,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;QACnC,CAAC;IACH,CAAC;;AAzE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;+DAA2B;AAH3C,qBAAqB;IADjC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,qBAAqB,CA6EjC","sourcesContent":["import '@material/web/button/elevated-button.js'\nimport '@operato/property-editor/ox-properties-dynamic-view.js'\nimport '@things-factory/organization/dist-client/component/approval-line-brief.js'\nimport '../templates/activity-instance-context-template.js'\n\nimport { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\n\nimport { StateRibonStyles } from './state-ribon.js'\n\n@customElement('activity-instance-ribon')\nexport class ActivityInstanceRibon extends localize(i18next)(LitElement) {\n  static styles = [StateRibonStyles]\n\n  @property({ type: Object }) activityInstance: any = {}\n\n  render() {\n    const { description, state, assignee, approvalLine, activity } = this.activityInstance || {}\n    const { startingType } = activity || {}\n\n    return html`\n      <span class=\"state\">\n        <i class=\"dot\"></i>\n        ${i18next.t('label.activity-state-' + state)}\n      </span>\n\n      <md-icon\n        class=\"info\"\n        role=\"button\"\n        tabindex=\"0\"\n        title=${String(i18next.t('label.thread-info'))}\n        @click=${() => this.openInfo(state)}\n        @keydown=${(e: KeyboardEvent) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault()\n            this.openInfo(state)\n          }\n        }}\n        >info</md-icon\n      >\n\n      <span class=\"desc\" title=${description || ''}>${description || ''}</span>\n\n\n      ${startingType == 'issue' && assignee\n        ? html`<span class=\"who\"><span class=\"who-label\">${i18next.t('field.assignee')}</span>${assignee?.name}</span>`\n        : ''}\n      <!--\n        결재선의 현재 단계를 넘기지 않는다 — 이 ribbon 이 쓰이는 곳은 업무를 시작하는 화면\n        하나뿐이고(activity-instance-start-page), 거기서는 아직 아무도 판단하지 않았다.\n        approval-line-brief 는 값이 없으면 기안자를 현재로 표시하는데, 이 화면에서는 그것이 맞다.\n      -->\n      ${approvalLine ? html`<approval-line-brief .model=${approvalLine}></approval-line-brief>` : ''}\n    `\n  }\n\n  /**\n   * 이 건의 기본 정보 — **팝업으로 연다.**\n   *\n   * ── 왜 aside 가 아닌가 (2026-09-06) ────────────────────────────────────\n   * 전에는 화면 오른쪽에서 나오는 aside 판이었다. 두 가지가 걸린다.\n   *\n   *   자리를 다툰다   화면 오른쪽 세로 판은 operato-twin 의 twin-entity360 이 쓰는 자리다\n   *                  (position: fixed · right: 0 · height: 100vh). 같은 자리에 둘이 선다.\n   *   전역 슬롯이다   VIEWPART_POSITION.ASIDEBAR 은 앱이 하나만 갖는다. 열 개가 넘는 패키지가\n   *                  그 자리를 쓰고 있어(twin 의 AI 협의 도크 · board-ui · help · more-ui …),\n   *                  이 판을 열면 그중 열려 있던 것이 닫힌다.\n   *\n   * 그리고 자리의 뜻이 다르다. 오른쪽 드로어는 **보고 있는 대상을 따라다니는 상세**이고(360 이\n   * 그것이다 — 포커스가 바뀌면 내용이 바뀌고 화면을 옮겨도 남는다), 이 판은 **이 화면의 이 건**에\n   * 대한 것이라 화면을 벗어나면 뜻이 없다. 페이지에 매인 것을 앱 전역 자리에 두지 않는다.\n   *\n   * 내용도 팝업 크기다 — 값 여덟 줄과 접힌 타임라인이라 세로 100vh 를 쓸 일이 없었다.\n   */\n  private openInfo(state: string) {\n    openPopup(\n      html`<activity-instance-context-template .activityInstance=${this.activityInstance} state=${state}></activity-instance-context-template>`,\n      { title: i18next.t('label.thread-info') }\n    )\n  }\n\n  updated(changes) {\n    if (changes.has('activityInstance') && this.activityInstance) {\n      const { state } = this.activityInstance\n\n      this.setAttribute('state', state)\n    }\n  }\n}\n"]}

package/dist-client/components/activity-thread-ribon.d.ts

@@ -4,10 +4,35 @@ import '@things-factory/organization/dist-client/component/approval-line-brief.j
 import '../templates/activity-thread-context-template.js';
 import { LitElement } from 'lit';
 declare const ActivityThreadRibon_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+/**
+ * 업무 하나의 머리 — **지금 어떤 상태이고, 누구 손에 있나.**
+ *
+ * 모양은 `state-ribon.ts` 가 정한다(그 파일의 머리말에 왜 채운 띠를 걷었는지 적어 두었다).
+ * 여기서는 이 화면이 무엇을 보일지만 고른다.
+ */
 export declare class ActivityThreadRibon extends ActivityThreadRibon_base {
     static styles: import("lit").CSSResult[];
     activityThread: any;
     render(): import("lit-html").TemplateResult<1>;
+    /**
+     * 이 건의 기본 정보 — **팝업으로 연다.**
+     *
+     * ── 왜 aside 가 아닌가 (2026-09-06) ────────────────────────────────────
+     * 전에는 화면 오른쪽에서 나오는 aside 판이었다. 두 가지가 걸린다.
+     *
+     *   자리를 다툰다   화면 오른쪽 세로 판은 operato-twin 의 twin-entity360 이 쓰는 자리다
+     *                  (position: fixed · right: 0 · height: 100vh). 같은 자리에 둘이 선다.
+     *   전역 슬롯이다   VIEWPART_POSITION.ASIDEBAR 은 앱이 하나만 갖는다. 열 개가 넘는 패키지가
+     *                  그 자리를 쓰고 있어(twin 의 AI 협의 도크 · board-ui · help · more-ui …),
+     *                  이 판을 열면 그중 열려 있던 것이 닫힌다.
+     *
+     * 그리고 자리의 뜻이 다르다. 오른쪽 드로어는 **보고 있는 대상을 따라다니는 상세**이고(360 이
+     * 그것이다 — 포커스가 바뀌면 내용이 바뀌고 화면을 옮겨도 남는다), 이 판은 **이 화면의 이 건**에
+     * 대한 것이라 화면을 벗어나면 뜻이 없다. 페이지에 매인 것을 앱 전역 자리에 두지 않는다.
+     *
+     * 내용도 팝업 크기다 — 값 여덟 줄과 접힌 타임라인이라 세로 100vh 를 쓸 일이 없었다.
+     */
+    private openInfo;
     updated(changes: any): void;
 }
 export {};

package/dist-client/components/activity-thread-ribon.js

@@ -3,137 +3,80 @@ import '@material/web/button/elevated-button.js';
 import '@operato/property-editor/ox-properties-dynamic-view.js';
 import '@things-factory/organization/dist-client/component/approval-line-brief.js';
 import '../templates/activity-thread-context-template.js';
-import { css, html, LitElement } from 'lit';
+import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { i18next, localize } from '@operato/i18n';
-import { toggleOverlay } from '@operato/layout';
+import { openPopup } from '@operato/layout';
+import { currentApprovalOrder } from '../approval-progress.js';
+import { StateRibonStyles } from './state-ribon.js';
+/**
+ * 업무 하나의 머리 — **지금 어떤 상태이고, 누구 손에 있나.**
+ *
+ * 모양은 `state-ribon.ts` 가 정한다(그 파일의 머리말에 왜 채운 띠를 걷었는지 적어 두었다).
+ * 여기서는 이 화면이 무엇을 보일지만 고른다.
+ */
 let ActivityThreadRibon = class ActivityThreadRibon extends localize(i18next)(LitElement) {
-    static { this.styles = [
-        css `
-      :host {
-        display: flex;
-        background-color: var(--worklist-status-color);
-        color: var(--md-sys-color-on-primary);
-        align-items: center;
-        min-height: 44px;
-        --fontsize-small: 12px;
-      }
-
-      div {
-        border-left: var(--border-dim-color);
-        padding: var(--spacing-small) var(--spacing-medium);
-        align-self: center;
-      }
-
-      :host([state='unassigned']) {
-        --worklist-status-color: #5f7184;
-      }
-
-      :host([state='assigned']) {
-        --worklist-status-color: #5f7184;
-      }
-
-      :host([state='started']) {
-        --worklist-status-color: #56af45;
-      }
-
-      :host([state='delegated']) {
-        --worklist-status-color: #8654b0;
-      }
-
-      :host([state='submitted']) {
-        --worklist-status-color: #428df3;
-      }
-
-      :host([state='escalated']) {
-        --worklist-status-color: #595de5;
-      }
-
-      :host([state='rejected']) {
-        --worklist-status-color: #f27429;
-      }
-
-      :host([state='ended']) {
-        --worklist-status-color: #02acae;
-      }
-
-      :host([state='aborted']) {
-        --worklist-status-color: #cb3a33;
-      }
-
-      md-icon {
-        font-size: 24px;
-      }
-
-      [desc] {
-        flex: 2;
-        font-size: var(--fontsize-small);
-      }
-
-      [desc] * {
-        vertical-align: middle;
-      }
-
-      div[assignee] {
-        display: flex;
-        align-items: center;
-        text-align: center;
-      }
-
-      approval-line-brief {
-        background-color: var(--worklist-status-color);
-        font-size: var(--fontsize-small);
-      }
-
-      [state] {
-        text-align: right;
-        font-size: var(--fontsize-small);
-      }
-
-      @media only screen and (max-width: 460px) {
-        div {
-          border-left: none;
-        }
-        [assignee] {
-          display: none;
-        }
-        md-icon {
-          padding: 0;
-        }
-        approval-line-brief {
-          display: none;
-        }
-      }
-    `
-    ]; }
+    static { this.styles = [StateRibonStyles]; }
     render() {
-        const { state, assignee, activityInstance } = this.activityThread;
-        const { description, approvalLine, activity } = activityInstance || {};
-        const { startingType } = activity || {};
+        const { state, assignee, activityInstance, activityApprovals } = this.activityThread;
+        const { description, approvalLine } = activityInstance || {};
         return html `
-      <div desc>
-        <md-icon
-          @click=${() => {
-            toggleOverlay('activity-info-overlay', {
-                template: html `<activity-thread-context-template
-                .activityThread=${this.activityThread}
-                state=${state}
-              ></activity-thread-context-template>`
-            });
+      <span class="state">
+        <i class="dot"></i>
+        ${i18next.t('label.activity-state-' + state)}
+      </span>
+
+      <md-icon
+        class="info"
+        role="button"
+        tabindex="0"
+        title=${String(i18next.t('label.thread-info'))}
+        @click=${() => this.openInfo(state)}
+        @keydown=${(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.openInfo(state);
+            }
         }}
-          >description</md-icon
-        >
-        ${description}
-      </div>
+        >info</md-icon
+      >
+
+      <span class="desc" title=${description || ''}>${description || ''}</span>
+
+
       ${approvalLine
-            ? html `<approval-line-brief .model=${approvalLine}></approval-line-brief>`
+            ? html `<approval-line-brief
+            .model=${approvalLine}
+            .current=${currentApprovalOrder(activityApprovals)}
+          ></approval-line-brief>`
             : assignee
-                ? html ` <div assignee title=${String(i18next.t('field.assignee'))}>${assignee?.name}&nbsp;</div> `
-                : html ``}
-
-      <div state title=${String(i18next.t('field.status'))}>${i18next.t('label.activity-state-' + state)}</div>
+                ? html `<span class="who"
+              ><span class="who-label">${i18next.t('field.assignee')}</span>${assignee?.name}</span
+            >`
+                : ''}
     `;
     }
+    /**
+     * 이 건의 기본 정보 — **팝업으로 연다.**
+     *
+     * ── 왜 aside 가 아닌가 (2026-09-06) ────────────────────────────────────
+     * 전에는 화면 오른쪽에서 나오는 aside 판이었다. 두 가지가 걸린다.
+     *
+     *   자리를 다툰다   화면 오른쪽 세로 판은 operato-twin 의 twin-entity360 이 쓰는 자리다
+     *                  (position: fixed · right: 0 · height: 100vh). 같은 자리에 둘이 선다.
+     *   전역 슬롯이다   VIEWPART_POSITION.ASIDEBAR 은 앱이 하나만 갖는다. 열 개가 넘는 패키지가
+     *                  그 자리를 쓰고 있어(twin 의 AI 협의 도크 · board-ui · help · more-ui …),
+     *                  이 판을 열면 그중 열려 있던 것이 닫힌다.
+     *
+     * 그리고 자리의 뜻이 다르다. 오른쪽 드로어는 **보고 있는 대상을 따라다니는 상세**이고(360 이
+     * 그것이다 — 포커스가 바뀌면 내용이 바뀌고 화면을 옮겨도 남는다), 이 판은 **이 화면의 이 건**에
+     * 대한 것이라 화면을 벗어나면 뜻이 없다. 페이지에 매인 것을 앱 전역 자리에 두지 않는다.
+     *
+     * 내용도 팝업 크기다 — 값 여덟 줄과 접힌 타임라인이라 세로 100vh 를 쓸 일이 없었다.
+     */
+    openInfo(state) {
+        openPopup(html `<activity-thread-context-template .activityThread=${this.activityThread} state=${state}></activity-thread-context-template>`, { title: i18next.t('label.thread-info') });
+    }
     updated(changes) {
         if (changes.has('activityThread') && this.activityThread) {
             const { state } = this.activityThread;

package/dist-client/components/activity-thread-ribon.js.map

@@ -1 +1 @@
-{"version":3,"file":"activity-thread-ribon.js","sourceRoot":"","sources":["../../client/components/activity-thread-ribon.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAChD,OAAO,wDAAwD,CAAA;AAC/D,OAAO,2EAA2E,CAAA;AAClF,OAAO,kDAAkD,CAAA;AAEzD,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAGxC,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;aAC7D,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+FF;KACF,AAjGY,CAiGZ;IAID,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC,cAAc,CAAA;QACjE,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,gBAAgB,IAAI,EAAE,CAAA;QACtE,MAAM,EAAE,YAAY,EAAE,GAAG,QAAQ,IAAI,EAAE,CAAA;QAEvC,OAAO,IAAI,CAAA;;;mBAGI,GAAG,EAAE;YACZ,aAAa,CAAC,uBAAuB,EAAE;gBACrC,QAAQ,EAAE,IAAI,CAAA;kCACM,IAAI,CAAC,cAAc;wBAC7B,KAAK;mDACsB;aACtC,CAAC,CAAA;QACJ,CAAC;;;UAGD,WAAW;;QAEb,YAAY;YACZ,CAAC,CAAC,IAAI,CAAA,+BAA+B,YAAY,yBAAyB;YAC1E,CAAC,CAAC,QAAQ;gBACR,CAAC,CAAC,IAAI,CAAA,wBAAwB,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,IAAI,QAAQ,EAAE,IAAI,eAAe;gBAClG,CAAC,CAAC,IAAI,CAAA,EAAE;;yBAEO,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,uBAAuB,GAAG,KAAK,CAAC;KACnG,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAAO;QACb,IAAI,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACzD,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,cAAc,CAAA;YAErC,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;QACnC,CAAC;IACH,CAAC;;AAtC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;2DAAoB;AApGpC,mBAAmB;IAD/B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,mBAAmB,CA2I/B","sourcesContent":["import '@material/web/button/elevated-button.js'\nimport '@operato/property-editor/ox-properties-dynamic-view.js'\nimport '@things-factory/organization/dist-client/component/approval-line-brief.js'\nimport '../templates/activity-thread-context-template.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { toggleOverlay } from '@operato/layout'\n\n@customElement('activity-thread-ribon')\nexport class ActivityThreadRibon extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        background-color: var(--worklist-status-color);\n        color: var(--md-sys-color-on-primary);\n        align-items: center;\n        min-height: 44px;\n        --fontsize-small: 12px;\n      }\n\n      div {\n        border-left: var(--border-dim-color);\n        padding: var(--spacing-small) var(--spacing-medium);\n        align-self: center;\n      }\n\n      :host([state='unassigned']) {\n        --worklist-status-color: #5f7184;\n      }\n\n      :host([state='assigned']) {\n        --worklist-status-color: #5f7184;\n      }\n\n      :host([state='started']) {\n        --worklist-status-color: #56af45;\n      }\n\n      :host([state='delegated']) {\n        --worklist-status-color: #8654b0;\n      }\n\n      :host([state='submitted']) {\n        --worklist-status-color: #428df3;\n      }\n\n      :host([state='escalated']) {\n        --worklist-status-color: #595de5;\n      }\n\n      :host([state='rejected']) {\n        --worklist-status-color: #f27429;\n      }\n\n      :host([state='ended']) {\n        --worklist-status-color: #02acae;\n      }\n\n      :host([state='aborted']) {\n        --worklist-status-color: #cb3a33;\n      }\n\n      md-icon {\n        font-size: 24px;\n      }\n\n      [desc] {\n        flex: 2;\n        font-size: var(--fontsize-small);\n      }\n\n      [desc] * {\n        vertical-align: middle;\n      }\n\n      div[assignee] {\n        display: flex;\n        align-items: center;\n        text-align: center;\n      }\n\n      approval-line-brief {\n        background-color: var(--worklist-status-color);\n        font-size: var(--fontsize-small);\n      }\n\n      [state] {\n        text-align: right;\n        font-size: var(--fontsize-small);\n      }\n\n      @media only screen and (max-width: 460px) {\n        div {\n          border-left: none;\n        }\n        [assignee] {\n          display: none;\n        }\n        md-icon {\n          padding: 0;\n        }\n        approval-line-brief {\n          display: none;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) activityThread: any\n\n  render() {\n    const { state, assignee, activityInstance } = this.activityThread\n    const { description, approvalLine, activity } = activityInstance || {}\n    const { startingType } = activity || {}\n\n    return html`\n      <div desc>\n        <md-icon\n          @click=${() => {\n            toggleOverlay('activity-info-overlay', {\n              template: html`<activity-thread-context-template\n                .activityThread=${this.activityThread}\n                state=${state}\n              ></activity-thread-context-template>`\n            })\n          }}\n          >description</md-icon\n        >\n        ${description}\n      </div>\n      ${approvalLine\n        ? html`<approval-line-brief .model=${approvalLine}></approval-line-brief>`\n        : assignee\n          ? html` <div assignee title=${String(i18next.t('field.assignee'))}>${assignee?.name}&nbsp;</div> `\n          : html``}\n\n      <div state title=${String(i18next.t('field.status'))}>${i18next.t('label.activity-state-' + state)}</div>\n    `\n  }\n\n  updated(changes) {\n    if (changes.has('activityThread') && this.activityThread) {\n      const { state } = this.activityThread\n\n      this.setAttribute('state', state)\n    }\n  }\n}\n"]}
+{"version":3,"file":"activity-thread-ribon.js","sourceRoot":"","sources":["../../client/components/activity-thread-ribon.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAChD,OAAO,wDAAwD,CAAA;AAC/D,OAAO,2EAA2E,CAAA;AAClF,OAAO,kDAAkD,CAAA;AAEzD,OAAO,EAAO,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAE3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAA;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAEnD;;;;;GAKG;AAEI,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;aAC7D,WAAM,GAAG,CAAC,gBAAgB,CAAC,AAArB,CAAqB;IAIlC,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,GAAG,IAAI,CAAC,cAAc,CAAA;QACpF,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,gBAAgB,IAAI,EAAE,CAAA;QAE5D,OAAO,IAAI,CAAA;;;UAGL,OAAO,CAAC,CAAC,CAAC,uBAAuB,GAAG,KAAK,CAAC;;;;;;;gBAOpC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC;iBACrC,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;mBACxB,CAAC,CAAgB,EAAE,EAAE;YAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gBACvC,CAAC,CAAC,cAAc,EAAE,CAAA;gBAClB,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;YACtB,CAAC;QACH,CAAC;;;;iCAIwB,WAAW,IAAI,EAAE,IAAI,WAAW,IAAI,EAAE;;;QAG/D,YAAY;YACZ,CAAC,CAAC,IAAI,CAAA;qBACO,YAAY;uBACV,oBAAoB,CAAC,iBAAiB,CAAC;kCAC5B;YAC1B,CAAC,CAAC,QAAQ;gBACR,CAAC,CAAC,IAAI,CAAA;yCACyB,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,UAAU,QAAQ,EAAE,IAAI;cAC9E;gBACJ,CAAC,CAAC,EAAE;KACT,CAAA;IACH,CAAC;IAED;;;;;;;;;;;;;;;;;OAiBG;IACK,QAAQ,CAAC,KAAa;QAC5B,SAAS,CACP,IAAI,CAAA,qDAAqD,IAAI,CAAC,cAAc,UAAU,KAAK,sCAAsC,EACjI,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,EAAE,CAC1C,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAAO;QACb,IAAI,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACzD,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,cAAc,CAAA;YAErC,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;QACnC,CAAC;IACH,CAAC;;AA1E2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;2DAAoB;AAHpC,mBAAmB;IAD/B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,mBAAmB,CA8E/B","sourcesContent":["import '@material/web/button/elevated-button.js'\nimport '@operato/property-editor/ox-properties-dynamic-view.js'\nimport '@things-factory/organization/dist-client/component/approval-line-brief.js'\nimport '../templates/activity-thread-context-template.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\n\nimport { currentApprovalOrder } from '../approval-progress.js'\nimport { StateRibonStyles } from './state-ribon.js'\n\n/**\n * 업무 하나의 머리 — **지금 어떤 상태이고, 누구 손에 있나.**\n *\n * 모양은 `state-ribon.ts` 가 정한다(그 파일의 머리말에 왜 채운 띠를 걷었는지 적어 두었다).\n * 여기서는 이 화면이 무엇을 보일지만 고른다.\n */\n@customElement('activity-thread-ribon')\nexport class ActivityThreadRibon extends localize(i18next)(LitElement) {\n  static styles = [StateRibonStyles]\n\n  @property({ type: Object }) activityThread: any\n\n  render() {\n    const { state, assignee, activityInstance, activityApprovals } = this.activityThread\n    const { description, approvalLine } = activityInstance || {}\n\n    return html`\n      <span class=\"state\">\n        <i class=\"dot\"></i>\n        ${i18next.t('label.activity-state-' + state)}\n      </span>\n\n      <md-icon\n        class=\"info\"\n        role=\"button\"\n        tabindex=\"0\"\n        title=${String(i18next.t('label.thread-info'))}\n        @click=${() => this.openInfo(state)}\n        @keydown=${(e: KeyboardEvent) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault()\n            this.openInfo(state)\n          }\n        }}\n        >info</md-icon\n      >\n\n      <span class=\"desc\" title=${description || ''}>${description || ''}</span>\n\n\n      ${approvalLine\n        ? html`<approval-line-brief\n            .model=${approvalLine}\n            .current=${currentApprovalOrder(activityApprovals)}\n          ></approval-line-brief>`\n        : assignee\n          ? html`<span class=\"who\"\n              ><span class=\"who-label\">${i18next.t('field.assignee')}</span>${assignee?.name}</span\n            >`\n          : ''}\n    `\n  }\n\n  /**\n   * 이 건의 기본 정보 — **팝업으로 연다.**\n   *\n   * ── 왜 aside 가 아닌가 (2026-09-06) ────────────────────────────────────\n   * 전에는 화면 오른쪽에서 나오는 aside 판이었다. 두 가지가 걸린다.\n   *\n   *   자리를 다툰다   화면 오른쪽 세로 판은 operato-twin 의 twin-entity360 이 쓰는 자리다\n   *                  (position: fixed · right: 0 · height: 100vh). 같은 자리에 둘이 선다.\n   *   전역 슬롯이다   VIEWPART_POSITION.ASIDEBAR 은 앱이 하나만 갖는다. 열 개가 넘는 패키지가\n   *                  그 자리를 쓰고 있어(twin 의 AI 협의 도크 · board-ui · help · more-ui …),\n   *                  이 판을 열면 그중 열려 있던 것이 닫힌다.\n   *\n   * 그리고 자리의 뜻이 다르다. 오른쪽 드로어는 **보고 있는 대상을 따라다니는 상세**이고(360 이\n   * 그것이다 — 포커스가 바뀌면 내용이 바뀌고 화면을 옮겨도 남는다), 이 판은 **이 화면의 이 건**에\n   * 대한 것이라 화면을 벗어나면 뜻이 없다. 페이지에 매인 것을 앱 전역 자리에 두지 않는다.\n   *\n   * 내용도 팝업 크기다 — 값 여덟 줄과 접힌 타임라인이라 세로 100vh 를 쓸 일이 없었다.\n   */\n  private openInfo(state: string) {\n    openPopup(\n      html`<activity-thread-context-template .activityThread=${this.activityThread} state=${state}></activity-thread-context-template>`,\n      { title: i18next.t('label.thread-info') }\n    )\n  }\n\n  updated(changes) {\n    if (changes.has('activityThread') && this.activityThread) {\n      const { state } = this.activityThread\n\n      this.setAttribute('state', state)\n    }\n  }\n}\n"]}

package/dist-client/components/activity-thread-timeline.d.ts

@@ -1,6 +1,6 @@
 import '@material/web/icon/icon.js';
 import '@things-factory/organization/dist-client/component/approval-line-view.js';
-import { LitElement } from 'lit';
+import { LitElement, nothing } from 'lit';
 import { ActivityThread } from '../types/activity-thread.js';
 import { ActivityThreadHistory } from '../types/activity-thread-history.js';
 import { ActivityApproval } from '../types/activity-approval.js';
@@ -9,8 +9,20 @@ export declare class ActivityThreadTimeline extends LitElement {
     activityThread?: ActivityThread;
     subtitle?: string;
     shortForm?: boolean;
-    render(): import("lit-html").TemplateResult<1>;
+    /**
+     * 펴 둘 것인가 — **담는 화면이 정한다.**
+     *
+     * 기본은 접는다. 펴는 곳은 둘이다.
+     *   완료 조회      지난 일을 보러 온 화면이라 이력이 곧 본문이다
+     *   보일 항목 없음  화면이 「타임라인의 상신 사유를 보고 판단하세요」로 여기를 가리킨다
+     */
+    open?: boolean;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    /** 접혔을 때 보이는 한 줄 — 마지막 기록의 「무엇을 · 누가 · 언제」. */
+    lastLine(item: any): string;
     renderActivityThreadHistory(activityThreadHistory: ActivityThreadHistory): import("lit-html").TemplateResult<1>;
     renderActivityApproval(activityApproval: ActivityApproval): import("lit-html").TemplateResult<1>;
+    /** 적힌 말이 없으면 상자를 그리지 않는다 — 빈 회색 상자는 내용이 있는 줄과 구별되지 않는다. */
+    renderSaid(said?: string): import("lit-html").TemplateResult<1> | typeof nothing;
     renderOutput(output: any): string;
 }