@things-factory/worklist 10.1.185 → 10.1.186

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

@@ -1,649 +1,414 @@
 import { __decorate, __metadata } from "tslib";
-import '@material/web/icon/icon.js';
 import '@operato/list-state/ox-page-state.js';
+import '@things-factory/organization/dist-client/component/approval-line-brief.js';
 import gql from 'graphql-tag';
 import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { client } from '@operato/graphql';
 import { i18next, localize } from '@operato/i18n';
-import { navigate, PageView } from '@operato/shell';
+import { PageView } from '@operato/shell';
+import { DocumentPageStyles } from '@operato/styles';
+import { isApprovalStep } from '@things-factory/organization/dist-client';
 import { guideLines } from './activity-guide.js';
-import { canonicalStage, isRegistered, STAGE_ORDER, stageRank } from './activity-stage.js';
-import { DocumentPageStyles, ScrollbarStyles } from '@operato/styles';
+import { detailAddress, opensDetail } from '../work-door/door-links.js';
+import { doorLabel, doorsSummary, followsNote, lineNote, whenNoLineTag } from '../work-door/door-sentence.js';
+import { kindWord, reasonWord, standingWord, whenNoLineBecauseWord, whenNoLineWord } from '../work-door/door-words.js';
 /**
- * 업무 카탈로그 — **업무함에 올라오는 일이 무슨 일인지 읽는 자리.**
+ * 업무 카탈로그 — **이 사업장의 업무가 무엇을 하고, 누가 결재하나.**
  *
- * ── 개발 현황 블록은 제품이 나가면 걷는다 (2026-09-23, 사용자 판단) ────────
- * `renderBuild` 가 그리는 것 — 모델 in/out 개수 · 판단 키 수 · 덮는 시험 · 마지막 시험 실행 —
- * 은 이 제품을 **만드는 쪽**이 읽는 값이다. 선언 자체가 그렇게 적고 있다: readiness 는 「여기까지
- * 되어 있다고 우리가 말하는 것」이고 `lastRun` 은 손으로 적는 값이라 낡을 수 있어 잰 날짜를 함께
- * 보인다. 쓰는 사람이 읽을 글이 아니다.
+ * ═══════════════════════════════════════════════════════════════════════════
+ * ── 두 화면을 하나로 (2026-10-18, 사용자 판단) ──────────────────────────────
+ * 「결재·배정 양식 현황」과 「업무 양식 목록」이 같은 업무를 두 번 늘어놓았다. 앞은 결재선이 섰나를,
+ * 뒤는 업무가 무엇인가를 말했고, 뒤에는 만드는 쪽이 읽는 값(모델 수 · 판단 키 · 시험 실행)이 섞여
+ * 있었다. 틀은 앞 화면 것을 쓰고, 뒤에서는 업무 설명 한 줄만 가져왔다.
  *
- * **접지 않고 보이게 둔다.** 접으면 낡은 수를 아무도 안 보고, 그러면 적어 둔 값이 거짓이 된다.
- * 대신 걷을 것이라고 여기 적어 둔다 — 적어 두지 않으면 안 지워진다.
+ * ── 왜 이 화면이 있나 ──────────────────────────────────────────────────────
+ * 양식은 제품이 세우고 **결재선은 그 사업장이 채운다.** 비어 있는 것은 결함이 아니라 선택인데, 그
+ * 선택이 어디에도 안 보였다. 실측(2026-09-11): 미라텍에 양식 11개가 다 서 있고 11개 전부 결재자가
+ * 없었다 — 실적 정정도 폐기도 승인 없이 반영되는데 화면에는 결재가 있는 것처럼 보였다.
  *
- * 걷을 범위는 셋이다:
+ * ── 결재선은 그려서 보인다 ─────────────────────────────────────────────────
+ * 「…은 결재자 2명을 지납니다」는 몇 명인지만 말하고 누구인지는 안 말했다. 줄마다 결재선을 단계와
+ * 이름으로 그린다 — 업무함 띠가 쓰는 organization 의 approval-line-brief 를 그대로 쓴다. 서버는 그
+ * 업무가 실제로 거치는 결재선을 보낸다(다른 업무의 결재선을 따르면 그 업무의 것).
  *
- *   1. `renderBuild` 와 그것을 부르는 줄
- *   2. 이 파일의 질의에서 `readiness { stage gaps tests notes lastRun { … } }`
- *   3. 그 값에만 쓰이는 스타일(`.build`)
+ * ── 빈 결재선의 결과는 업무마다 선언돼 있다 ────────────────────────────────
+ * `run` 업무는 상신하는 사람이 자기 건을 승인한 것이 되고, `refuse` 업무는 상신 자체가 거절된다
+ * (ADR-0077). 결재선 밑 한 줄이 그것을 말한다.
  *
- * `readiness.stage` 는 **남긴다** — 카드 머리의 「사용 가능 · 일부 동작」 띠와 위의 개수 줄이 그것을
- * 읽는다. 그것은 쓰는 사람에게 「이 업무를 지금 믿고 써도 되나」를 말하는 값이라 성격이 다르다.
- *
- * ── 첫 판을 다시 만든 이유 (2026-09-08) ───────────────────────────────────
- * 처음 만든 화면은 사용자가 읽을 것이 없었다. 네 줄 중 세 줄이 「…선언되지 않았습니다」였고, 업무
- * 설명은 영어로 나왔고, 다크 테마에서는 글자가 뭉개졌다. 「덮는 시험」처럼 아무도 쓰지 않는 말을
- * 지어내기까지 했다. 개발자 덤프를 사용자 화면이라고 부른 셈이다.
- *
- * 그래서 층을 진짜로 가른다.
- *
- * - **사용자가 읽는 것**: 이 업무가 무엇이고, 여기서 쓰이고 있나. 그것만 크게.
- * - **개발 정보**: 어디까지 됐나 · 시험. **값이 있을 때만** 접어서 아래에 둔다. 없는 것을 줄줄이
- *   적지 않는다 — 빈 줄을 나열하는 것은 정직한 게 아니라 아무 말도 안 하는 것이다.
- *
- * 여전히 판단하지 않고 선언을 그린다. 어디까지 됐는지는 화면이 실행 중에 알 수 없고, 그 업무를
- * 등록한 모듈이 자기 코드 옆에 적는다(ActivityReadiness).
+ * ── 할 일이 있는 것부터 ────────────────────────────────────────────────────
+ * 정할 것이 남은 것을 위로 올린다. 같은 무리 안에서는 선언 순서를 지킨다.
+ * ═══════════════════════════════════════════════════════════════════════════
+ */
+/*
+ * A step is asked for every field it carries, though this screen only draws it - organization's
+ * approval-line-step-fields test holds every selection to the editor's set.
  */
-const CatalogFetch = gql `
-  query {
-    responses: installableActivities {
+const CATALOG = gql `
+  {
+    workDoors {
+      todo
+      on
+      off
+      missing
+      notUsed
+      seatsStanding
+      seatsOffered
+      doors {
+        name
+        labelKey
+        kind
+        standing
+        reason
+        approvers
+        from
+        whenNoLine
+        whenNoLineBecause
+        followsLabelKey
+        assigneeRole
+        notUsedBecause
+        approvalLine {
+          type
+          value
+          participation
+          notifyAfter
+          approver {
+            id
+            name
+            description
+            controlNo
+          }
+        }
+      }
+    }
+    installableActivities {
       items {
         name
-        label
-        labelTKey
-        readinessNotesTKey
-        readinessGapTKeys
-        description
         guide
         guideTKeys
-        category
-        activityType
-        provider
-        release
-        approvalSteps
-        uiType
-        viewType
-        viewSource
-        model {
-          inout
-          hidden
-        }
-        activity {
-          id
-          decisionKeys {
-            role
-          }
-        }
-        readiness {
-          stage
-          gaps
-          tests
-          notes
-          lastRun {
-            passed
-            total
-            at
-            command
-          }
-        }
       }
-      total
     }
   }
 `;
-/**
- * 카드에 보이는 이름. 정렬도 이 글자로 한다 — 보이는 글자와 정렬 기준이 다르면 목록이 뒤섞여 보인다.
- *
- * 번역 키는 서버가 `name` 에서 계산해 보낸다(labelTKey). 화면은 키 규칙을 모른다. label 이 없으면
- * name 이다 — name 은 콜백을 찾는 키라 번역하지 않는다.
- */
-function shownName(one) {
-    if (!one?.label)
-        return String(one?.name ?? '');
-    return one.labelTKey ? String(i18next.t(one.labelTKey, { defaultValue: one.label })) : String(one.label);
-}
-/*
- * 단계를 읽고 차례를 매기는 판단은 `activity-stage.ts` 한 벌이다 — 업무 상세도 같은 답을 내야 해서
- * 여기 사본을 두지 않는다. 그 파일이 왜 그렇게 되돌리고 왜 그 차례인지 적고 있다.
- */
+const ORDER = { missing: 0, off: 1, on: 2, 'not-used': 3 };
 let ActivityCatalogPage = class ActivityCatalogPage extends localize(i18next)(PageView) {
     constructor() {
         super(...arguments);
-        this.items = [];
-        this.loaded = false;
-        this.failed = false;
-        /** Why the catalog could not be read - ox-page-state says it, with retry (ADR-0060 decision 8). */
+        this.counts = { on: 0, off: 0, missing: 0, notUsed: 0, todo: 0 };
+        this.todo = 0;
+        this.seatsStanding = 0;
+        this.seatsOffered = 0;
         this.loadError = null;
     }
     static { this.styles = [
-        /* The frame owns the page shell and the reading column (ADR-0060 decision 8). */
         DocumentPageStyles,
-        ScrollbarStyles,
         css `
       /*
-       * 색은 전부 테마 토큰으로 쓴다. 첫 판은 흰 카드와 연회색 글자를 값으로 박아서 다크 테마에서
-       * 글자가 배경에 묻혔다.
+       * One activity, one row: what it is on the left, what it does and who approves on the right.
+       * The rows share one grid (subgrid), so every right column starts at the same x.
        */
-      :host {
-        color: var(--md-sys-color-on-background);
-        font-size: var(--ui-t-body, 13px);
-      }
-
-      /* 단계별 수. 설명이 아니라 자료라서 둔다 — 개발 기간에 이 수가 남은 일을 말한다. */
-      [counts] {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 4px 14px;
-
-        margin: 0 0 12px 0;
-        color: var(--md-sys-color-on-surface-variant, #49454f);
-      }
-
-      [counts] b {
-        color: var(--md-sys-color-on-surface, #1d1b20);
-      }
-
-      [failed] {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-
-        padding: 8px 10px;
-        border-radius: 6px;
-
-        background-color: var(--md-sys-color-error-container, #ffdad6);
-        color: var(--md-sys-color-on-error-container, #410002);
-      }
-
-      ul {
+      .doors {
         display: grid;
-        gap: 10px;
-
+        grid-template-columns: max-content minmax(0, 1fr);
+        column-gap: var(--spacing-huge, 24px);
         margin: 0;
         padding: 0;
         list-style: none;
       }
 
-      /*
-       * 카드는 **바탕보다 밝다** — 페이지에서 떠 있어야 스물여섯 장이 줄로 읽힌다.
-       *
-       * 처음엔 surface 를 썼는데, 이 테마에서 그 값이 background 와 **같다**(실측: 라이트 둘 다
-       * rgb(238 241 243), 다크 둘 다 rgb(13 18 22)). 그래서 카드가 1px 테두리로만 구분됐다.
-       *
-       * surface-container-low 가 두 테마에서 **같은 방향**으로 갈린다 — 라이트 246 248 249,
-       * 다크 20 27 33, 둘 다 바탕보다 밝다. surface-container-high 는 라이트에서 오히려 어두워져
-       * 카드가 눌린 것처럼 읽힌다. 뜨는 것과 눌리는 것은 다른 말이라 방향이 뒤집히면 안 된다.
-       */
-      li {
-        padding: 12px 14px;
-        border: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
-        border-radius: 6px;
+      .door {
+        grid-column: 1 / -1;
+        display: grid;
+        grid-template-columns: subgrid;
+        row-gap: var(--spacing-small, 4px);
+        padding: var(--spacing-large, 12px) 0;
+        border-top: 1px solid var(--md-sys-color-outline-variant);
+      }
 
-        background-color: var(--md-sys-color-surface-container-low, #f6f8f9);
-        color: var(--md-sys-color-on-surface, #1d1b20);
+      .door:first-child {
+        border-top: none;
+      }
+
+      @media (max-width: 600px) {
+        .doors {
+          grid-template-columns: minmax(0, 1fr);
+        }
       }
 
-      .head {
+      .what {
         display: flex;
-        align-items: baseline;
         flex-wrap: wrap;
-        gap: 8px;
+        align-items: baseline;
+        gap: var(--spacing-small, 4px) var(--spacing-medium, 8px);
       }
 
-      /*
-       * 이름이 상세로 가는 문이다. 링크처럼 보이게 두되 색은 바꾸지 않는다 — 카드에서 가장 크게
-       * 읽혀야 하는 글자라, 파랗게 만들면 이름보다 「링크」가 먼저 읽힌다. 마우스가 오면 말한다.
-       */
       .name {
-        font-size: var(--ui-t-title, 15px);
         font-weight: 600;
-        color: inherit;
-        text-decoration: none;
-        cursor: pointer;
       }
 
-      .name:hover,
-      .name:focus-visible {
-        text-decoration: underline;
+      /* Kind in words: an empty approval line and an empty assignment line do opposite things. */
+      .kind {
+        color: var(--ui-muted);
+        font-size: var(--ui-t-small, 11.5px);
       }
 
-      /* 여기서 쓰이나 — 사용자에게 이 카드에서 가장 실질적인 사실이다. */
-      .use {
-        padding: 1px 7px;
-        border-radius: 999px;
-        font-size: 11px;
+      /* The state says it in words as well as colour: colour alone says nothing to someone who cannot see it. */
+      .mark {
+        padding: 0 var(--spacing-small, 4px);
+        border: 1px solid currentColor;
+        border-radius: var(--md-sys-shape-corner-small, 4px);
+        font-size: var(--ui-t-micro, 11px);
+        font-weight: 600;
+        line-height: 1.6;
         white-space: nowrap;
-
-        background-color: var(--md-sys-color-secondary-container, #e8def8);
-        color: var(--md-sys-color-on-secondary-container, #1d192b);
-      }
-
-      .use[idle] {
-        background-color: var(--md-sys-color-surface-variant, #e7e0ec);
-        color: var(--md-sys-color-on-surface-variant, #49454f);
-      }
-
-      /* 이 업무가 무엇인가. 카드에서 가장 먼저 읽히는 줄이다. */
-      .guide {
-        margin: 8px 0 0 0;
-        line-height: 1.55;
       }
 
-      .guide p {
-        margin: 0 0 4px 0;
+      .mark.on {
+        color: var(--md-sys-color-primary);
       }
 
-      .unwritten {
-        margin: 8px 0 0 0;
-        color: var(--md-sys-color-on-surface-variant, #49454f);
-      }
-
-      /*
-       * 개발 정보. 값이 있을 때만 그린다. 사용자에게는 접힌 한 줄로만 보이고, 열면 우리가 볼 것이
-       * 나온다.
-       */
-      /*
-       * 단계 표. **철자를 하나만 쓴다.**
-       *
-       * 앞 판은 단계마다 boolean 속성을 뒀다. 그러면 하이픈 없는 두 번째 철자가 생기고
-       * (notworklist) i18n 키(label.readiness-not-worklist)와 어긋난다. 값 하나를 data-stage 에
-       * 실으면 선택자 · 키 꼬리 · 서버 enum 값이 **같은 글자**가 된다.
-       *
-       * 색과 말로 함께 말한다 — 색만 쓰면 색을 못 가리는 사람에게 아무 말도 하지 않는다.
-       */
-      .stage {
-        padding: 1px 7px;
-        border-radius: 999px;
-        font-size: 11px;
-        white-space: nowrap;
-
-        background-color: var(--md-sys-color-surface-variant, #e7e0ec);
-        color: var(--md-sys-color-on-surface-variant, #49454f);
+      .mark.off {
+        color: var(--md-sys-color-tertiary);
       }
 
-      .stage[data-stage='working'] {
-        background-color: var(--md-sys-color-secondary-container, #e8def8);
-        color: var(--md-sys-color-on-secondary-container, #1d192b);
+      .mark.missing {
+        color: var(--md-sys-color-error);
       }
 
-      .stage[data-stage='partial'],
-      .stage[data-stage='declared'] {
-        background-color: var(--md-sys-color-tertiary-container, #ffd8e4);
-        color: var(--md-sys-color-on-tertiary-container, #31111d);
+      /* Not a task, so quieter. Not removed: that it was turned off has to be readable. */
+      .mark.not-used {
+        color: var(--md-sys-color-outline);
       }
 
-      /* 여기 두지 않기로 한 것. 테두리만 두어 만들 것들과 섞이지 않게 한다. */
-      .stage[data-stage='not-worklist'] {
-        background-color: transparent;
-        border: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
+      .door.not-used .what,
+      .door.not-used .says {
+        opacity: 0.7;
       }
 
-      details {
-        margin-top: 10px;
-        padding-top: 8px;
-        border-top: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
+      .says {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-small, 4px);
+        min-width: 0;
       }
 
-      summary {
-        cursor: pointer;
-        border-radius: 4px;
-        color: var(--md-sys-color-on-surface-variant, #49454f);
+      .line {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--spacing-small, 4px) var(--spacing-large, 12px);
       }
 
       /*
-       * 키보드로 여기 왔을 때 어디에 있는지 보여야 한다.
-       *
-       * summary 는 눌리는 것이라 tab 이 멈추는 자리다. 내가 이 절을 만들면서 표시를 안 줘서
-       * plant 의 접근성 래칫 시험이 「포커스가 안 보이는 자리 7 → 8」로 잡아냈다. 화면을 하나
-       * 더할 때마다 한 칸씩 늘어나는 것을 막는 시험이고, 허용 수를 올려 통과시킬 자리가 아니다.
+       * The brief spreads its seats over the width it is given; a two-step line across a wide column
+       * reads as three islands. Each seat gets about the width of a name.
        */
-      summary:focus-visible {
-        outline: 2px solid var(--md-sys-color-primary, #6750a4);
-        outline-offset: 2px;
+      approval-line-brief {
+        flex: 0 1 auto;
+        width: calc(var(--seats) * 88px);
+        max-width: 100%;
+        font-size: var(--ui-t-small, 11.5px);
       }
 
-      dl {
-        display: grid;
-        grid-template-columns: max-content 1fr;
-        gap: 4px 12px;
-
-        margin: 8px 0 0 0;
+      .when,
+      .from {
+        color: var(--ui-muted);
+        font-size: var(--ui-t-small, 11.5px);
       }
 
-      dt {
-        color: var(--md-sys-color-on-surface-variant, #49454f);
+      .state {
+        margin: 0 0 var(--spacing-medium, 8px);
+        font-weight: 600;
       }
 
-      dd {
+      ol.next {
         margin: 0;
-      }
-
-      code {
-        font-family: var(--ui-font-mono, monospace);
-        font-size: 12px;
-        word-break: break-all;
-      }
-
-      div[empty] {
+        padding-left: var(--spacing-huge, 24px);
         display: flex;
         flex-direction: column;
-        gap: 4px;
-      }
-
-      div[empty] .title {
-        font-size: var(--ui-t-title, 15px);
-      }
-
-      div[empty] .why {
-        color: var(--md-sys-color-on-surface-variant, #49454f);
-      }
-
-      @media (max-width: 480px) {
-        dl {
-          grid-template-columns: 1fr;
-          gap: 0;
-        }
-
-        dt {
-          margin-top: 6px;
-        }
+        gap: var(--spacing-medium, 8px);
       }
     `
     ]; }
     get context() {
         return {
-            /*
-       * 이 화면이 어떤 틀인가 — 동작 줄이 이것을 읽고 자기 오른쪽 끝을 내용에 맞춘다
-       * (ADR-0060 결정 9 보탬). 안 적으면 창 폭이고, 그것은 작업면의 모양이다.
-       */
-            frame: 'document',
             title: i18next.t('title.activity catalog'),
-            help: 'worklist/activity-catalog-page'
+            frame: 'document'
         };
     }
-    render() {
-        /* Loading showed a blank page; a failure had its own box. Both are the shared page state now. */
-        return html `<div class="page">
-      <ox-page-state .loading=${!this.loaded} .error=${this.loadError} @retry=${() => this.retry()}
-        >${this.loaded && !this.loadError ? this.renderCatalog() : ''}</ox-page-state
-      >
-    </div>`;
-    }
-    retry() {
-        this.failed = false;
-        this.loadError = null;
-        this.loaded = false;
-        this.fetch();
+    async pageInitialized() {
+        await this.load();
     }
-    renderCatalog() {
-        if (!this.items.length) {
-            return html `<div empty>
-        <span class="title">${i18next.t('text.no-installable-activity')}</span>
-        <span class="why">${i18next.t('text.no-installable-activity-why')}</span>
-      </div>`;
+    async pageUpdated(changes, lifecycle) {
+        if (lifecycle.active && !this.doors) {
+            await this.load();
         }
-        return html `
-      <div counts>
-        ${STAGE_ORDER.map(stage => {
-            const n = this.items.filter(one => canonicalStage(one.readiness?.stage) == stage).length;
-            return n ? html `<span>${i18next.t('label.readiness-' + stage)} <b>${n}</b></span>` : '';
-        })}
-      </div>
-
-      <ul>
-        ${this.items.map(one => this.renderOne(one))}
-      </ul>
-    `;
-    }
-    renderOne(one) {
-        const stage = canonicalStage(one.readiness?.stage);
-        /*
-         * 아직 만들지 않은 것은 **설치될 수가 없다.** 그런 카드에 「아직 사용 안 함」을 붙이면 「예정」과
-         * 같은 말을 두 번 하는 것이고, 읽는 사람은 둘이 다른 뜻인 줄 알고 두 번 읽는다.
-         */
-        const registered = isRegistered(stage);
-        const inUse = !!one.activity?.id;
-        return html `<li>
-      <div class="head">
-        <!--
-          이름은 label 이 있으면 label 이다. name 은 콜백을 찾는 키라서 사람이 읽는 말이 아닐 수
-          있다 — 한국어 스물셋 사이에 「MES Disposition Approval」 하나가 그렇게 떴다.
-        -->
-        <!--
-          이름이 상세로 가는 문이다. 전에는 이 화면에 나가는 자리가 하나도 없었고(navigate 0 ·
-          <a href> 0), 카드가 「결재선 없음」이라고 적어 놓고 어디서 정하는지는 말하지 않았다.
-          [확인함 2026-09-23] 결재선 하나를 세워 확인하는 데 화면 셋, 역할에 사람이 없으면 다섯.
-
-          카드 전체가 아니라 **이름만** 문으로 둔다 — 카드 안에 펼치는 절이 있어서, 카드를 누르면
-          펼치려던 사람이 화면을 떠나게 된다.
-        -->
-        <a class="name" @click=${() => navigate(`activity-detail?name=${encodeURIComponent(one.name)}`)}
-          >${shownName(one)}</a
-        >
-
-        <!--
-          단계를 카드 머리에 둔다.
-          한 판에서 이것을 개발 정보 안으로 옮겼다가 되돌렸다. 업무가 마흔을 넘고 그중 대부분이 아직
-          안 만든 것이면, 접힌 절 안에 든 단계는 하나씩 펼쳐야 아는 값이 된다. 그러면 목록이 다
-          같아 보인다.
-        -->
-        ${stage ? html `<span class="stage" data-stage=${stage}>${i18next.t('label.readiness-' + stage)}</span>` : ''}
-        ${registered
-            ? html `<span class="use" ?idle=${!inUse}
-                >${inUse ? i18next.t('text.activity-in-use-here') : i18next.t('text.activity-not-in-use-here')}</span
-              >`
-            : ''}
-      </div>
-
-      ${this.renderGuide(one)} ${registered ? this.renderApprovers(one) : ''} ${this.renderBuild(one)}
-    </li>`;
     }
-    /**
-     * 이 업무가 무엇인가.
-     *
-     * `guide` 가 그 자리다 — 받는 사람의 말로 쓴 문장이다. 번역은 서버가 줄마다 계산해 보낸 `guideTKeys` 로
-     * 찾고, 번역이 없으면 문장이 그대로 나간다. `description` 은
-     * 우리끼리 쓰는 영어 한 줄이라 여기에 그대로 내지 않는다. 한국어 화면에서 영어 한 줄은 설명이
-     * 아니다.
-     *
-     * 없으면 **한 줄로** 없다고 말한다. 없는 것을 여러 줄로 늘리지 않는다.
-     */
-    /**
-     * Reads declared sentences in the reader's language, falling back to the sentence as declared
-     * when there is no key or no translation for it. Lines and keys pair by position, as guide does.
-     */
-    readSentences(lines, keys) {
-        return (lines || []).map((line, n) => (keys?.[n] ? String(i18next.t(keys[n], { defaultValue: line })) : line));
-    }
-    renderGuide(one) {
-        /* 줄을 고르는 판단은 상세 화면과 한 벌로 둔다 — 두 벌이면 같은 업무가 두 화면에서 달라진다. */
-        const lines = guideLines(one, (key, options) => i18next.t(key, options));
-        if (!lines.length) {
-            return html `<p class="unwritten">${i18next.t('text.activity-guide-unwritten')}</p>`;
+    async load() {
+        this.loadError = null;
+        let response;
+        try {
+            response = await client.query({ query: CATALOG, fetchPolicy: 'no-cache' });
         }
-        return html `<div class="guide">${lines.map(line => html `<p>${line}</p>`)}</div>`;
-    }
-    /**
-     * 이 공장이 이 단계를 쓰나 — **결재선에 결재자가 있나.**
-     *
-     * 결재선은 양식이 아니라 그 현장이 정하는 것이라, 같은 업무가 어느 공장에서는 결재를 받고 어느
-     * 공장에서는 그냥 지나간다. 그 사실이 지금까지 기동 로그 한 줄에만 있었다.
-     *
-     * **사람 수가 아니라 단계 수다** — 역할로 걸린 한 단계는 여러 사람이 본다. 그리고 비어 있다는 것이
-     * 무슨 일을 뜻하는지는 업무마다 달라서(상신이 막히거나, 확인 없이 지나가거나) 여기서 결과를 말하지
-     * 않는다. 그건 그 업무의 설명이 할 말이다.
-     *
-     * 「아직 사용 안 함」인 카드에는 그리지 않는다 — 세워지지 않은 양식에 결재선이 있을 수 없다.
-     */
-    renderApprovers(one) {
-        if (!one.activity?.id) {
-            return '';
+        catch (error) {
+            this.loadError = error;
+            return;
         }
-        const steps = one.approvalSteps;
-        return html `<dl>
-      <dt>${i18next.t('field.approval-line')}</dt>
-      <dd>
-        ${typeof steps != 'number'
-            ? html `<span class="unwritten">${i18next.t('text.approval-line-unknown')}</span>`
-            : steps > 0
-                ? i18next.t('text.approval-line-steps', { n: steps })
-                : html `<span class="unwritten">${i18next.t('text.approval-line-empty')}</span>`}
-      </dd>
-    </dl>`;
-    }
-    /**
-     * 개발 정보 — **값이 있을 때만.**
-     *
-     * 첫 판은 값이 없어도 「…선언되지 않았습니다」를 네 줄 그렸다. 사용자에게는 뜻 없는 벽이고 우리에게도
-     * 아무 정보가 아니다. 아무것도 없으면 이 절 자체를 그리지 않는다 — 그 업무가 카탈로그에 「개발 정보
-     * 없음」으로 남는 것은 화면 위쪽의 목적을 방해하지 않는다.
-     */
-    renderBuild(one) {
-        const readiness = one.readiness || {};
-        const stage = canonicalStage(readiness.stage);
-        const run = readiness.lastRun;
-        const hasRun = run && typeof run.total == 'number';
-        const built = this.renderBuilt(one);
-        if (!stage && !built && !readiness.tests?.length && !hasRun && !readiness.notes && !readiness.gaps?.length) {
-            return '';
+        /*
+         * 못 읽은 것을 빈 목록으로 그리지 않는다. 「업무가 하나도 없습니다」와 「못 읽었습니다」는 사람이 할
+         * 일이 다르다. ox-page-state 가 서버의 문장과 다시 읽기를 그린다(ADR-0060 결정 8).
+         */
+        if (response.errors?.length) {
+            this.loadError = response.errors[0];
+            return;
         }
-        return html `<details>
-      <summary>
-        ${i18next.t('label.activity-build-info')}${stage ? ` · ${i18next.t('label.readiness-' + stage)}` : ''}
-      </summary>
-      <dl>
-        ${built
-            ? html `<dt>${i18next.t('field.what-is-built')}</dt>
-                <dd>${built}</dd>`
-            : ''}
-        ${readiness.gaps?.length
-            ? html `<dt>${i18next.t('field.readiness-gaps')}</dt>
-                <dd>${this.readSentences(readiness.gaps, one.readinessGapTKeys).join(' · ')}</dd>`
-            : ''}
-        ${readiness.tests?.length
-            ? html `<dt>${i18next.t('field.covering-tests')}</dt>
-                <dd>${readiness.tests.map((test) => html `<div><code>${test}</code></div>`)}</dd>`
-            : ''}
-        ${hasRun
-            ? html `<dt>${i18next.t('field.last-test-run')}</dt>
-                <dd>${this.renderRun(run)}</dd>`
-            : ''}
-        ${readiness.notes
-            ? html `<dt>${i18next.t('field.readiness-notes')}</dt>
-                <dd>
-                  ${one.readinessNotesTKey
-                ? i18next.t(one.readinessNotesTKey, { defaultValue: readiness.notes })
-                : readiness.notes}
-                </dd>`
-            : ''}
-      </dl>
-    </details>`;
+        const guides = new Map((response.data?.installableActivities?.items ?? []).map((one) => [one.name, one]));
+        /* 전선의 철자를 여기서 **한 번** 옮긴다(§`door-words`). */
+        this.doors = (response.data?.workDoors?.doors ?? []).map((one) => ({
+            ...one,
+            standing: standingWord(one.standing) ?? one.standing,
+            kind: kindWord(one.kind) ?? one.kind,
+            reason: reasonWord(one.reason) ?? one.reason,
+            whenNoLine: whenNoLineWord(one.whenNoLine),
+            whenNoLineBecause: whenNoLineBecauseWord(one.whenNoLineBecause),
+            about: guideLines(guides.get(one.name), (key, options) => i18next.t(key, options))[0]
+        }));
+        const read = response.data?.workDoors ?? {};
+        this.todo = read.todo ?? 0;
+        this.counts = {
+            on: read.on ?? 0,
+            off: read.off ?? 0,
+            missing: read.missing ?? 0,
+            notUsed: read.notUsed ?? 0,
+            todo: this.todo
+        };
+        this.seatsStanding = read.seatsStanding ?? 0;
+        this.seatsOffered = read.seatsOffered ?? 0;
     }
-    /**
-     * 무엇이 실제로 서 있나 — **선언과 정의를 가르는 줄이다.**
-     *
-     * 이 화면은 단계 이름 하나로 「계획」·「동작함」만 말했다. 그런데 사용자가 카탈로그를 보고 물은 것은
-     * 「화면 설정도 없이 이게 정의냐」였고, 화면이 그 칸을 안 보이니 세는 사람이 파일을 열어야 했다.
-     * 액티비티가 서려면 주고받는 값과 화면과 콜백이 있어야 하고, 선언만 된 항목에는 그중 아무것도 없다.
-     *
-     * 설치되지 않은 항목에는 그리지 않는다. 45건에 「없음 · 없음 · 없음」을 세 줄씩 붙이면 그 자체가
-     * 벽이고, 무엇이 없는지는 그 항목의 gaps 가 이미 사람 말로 적고 있다.
-     */
-    renderBuilt(one) {
-        if (!one.activity?.id) {
+    /** 결재선은 각 업무에서 지정하고, 역할이 부족할 때만 별도로 안내한다. */
+    renderNext() {
+        if (!this.todo || this.seatsStanding >= this.seatsOffered) {
             return '';
         }
-        const model = (one.model || []).filter((item) => !item?.hidden);
-        const taking = model.filter((item) => item?.inout == 'in' || item?.inout == 'inout').length;
-        const giving = model.filter((item) => item?.inout == 'out' || item?.inout == 'inout').length;
-        const decisions = (one.activity?.decisionKeys || []).length;
-        /*
-         * 결재 화면이 무엇으로 그려지나. 전용 요소는 이름까지 적는다 — 「전용 화면이 있다」만으로는 어느
-         * 것인지 못 찾고, 이 절을 읽는 사람은 그 파일을 열려는 사람이다.
-         *
-         * 선언이 채워지면 기본 화면도 판단을 그린다. 그래서 「기본 화면」 뒤에 판단 항목 수가 붙는다 —
-         * 0 이면 그 화면은 아직 칸 목록이다.
-         */
-        const screen = one.viewSource
-            ? html `${i18next.t('text.own-approval-view')} · <code>${one.viewSource}</code>`
-            : html `${i18next.t('text.generated-approval-view')}`;
         return html `
-      <div>${i18next.t('text.model-in-out', { taking, giving })}</div>
-      <div>${i18next.t('field.approval-view')} — ${screen}</div>
-      <div>${i18next.t('text.decision-keys-count', { n: decisions })}</div>
+      <section class="page-section">
+        <div class="page-section-header"><h3>${i18next.t('title.work-doors-next')}</h3></div>
+        <ol class="next">
+          <li>
+            ${i18next.t('text.work-doors-next-seats', {
+            standing: this.seatsStanding,
+            offered: this.seatsOffered
+        })}
+            <a class="page-nav-link" href="roles">${i18next.t('field.roles')}</a>
+          </li>
+        </ol>
+      </section>
     `;
     }
-    /** 잰 날짜를 수와 함께 낸다 — 손으로 적는 기록이라 낡는데, 날짜가 있으면 낡았다는 것을 안다. */
-    renderRun(run) {
-        const at = run.at ? new Date(Date.parse(String(run.at))) : undefined;
-        const when = at && Number.isFinite(at.getTime())
-            ? at.toLocaleString(i18next.language || undefined, {
-                year: 'numeric',
-                month: 'numeric',
-                day: 'numeric',
-                hour: 'numeric',
-                minute: '2-digit',
-                hour12: false
-            })
-            : '';
-        return html `${typeof run.passed == 'number' ? run.passed : '—'} /
-    ${run.total}${when ? html ` · ${when}` : ''}${run.command ? html `<div><code>${run.command}</code></div>` : ''}`;
+    render() {
+        return html `<div class="page">
+      <ox-page-state .loading=${!this.doors && !this.loadError} .error=${this.loadError} @retry=${() => this.load()}
+        >${this.doors && !this.loadError ? this.renderDoors() : ''}</ox-page-state
+      >
+    </div>`;
     }
-    async pageUpdated(changes, lifecycle) {
-        if (this.active) {
-            await this.fetch();
-        }
+    renderDoors() {
+        const sorted = [...this.doors].sort((a, b) => ORDER[a.standing] - ORDER[b.standing]);
+        return html `
+      <section class="page-section">
+        <p class="state">${doorsSummary(i18next.t, this.counts)}</p>
+        <ul class="doors">
+          ${sorted.map(door => this.renderDoor(door))}
+        </ul>
+      </section>
+
+      ${this.renderNext()}
+    `;
     }
     /**
-     * 주소로 바로 들어온 경우 — **`pageUpdated` 가 안 온다.**
-     *
-     * 메뉴에서 눌러 들어오면 화면이 꺼졌다 켜지면서 `pageUpdated` 가 오고 거기서 읽는다. 그런데 주소를
-     * 직접 열면 이 요소가 **이미 active 인 채로** 만들어져서 그 전환이 없다. 실측했다: `active` 는
-     * 참인데 `loaded` 가 거짓이고, 화면은 아무것도 없이 조용했다 — 오류도 빈 화면 문구도 없다.
-     *
-     * 목록 화면들은 이 자리가 안 비어 있다. grist 가 첫 렌더에서 스스로 `fetchHandler` 를 부르기
-     * 때문이다. 이 화면은 grist 를 안 쓰니 부르는 사람이 없었다.
-     *
-     * 그래서 켜져 있는데 아직 안 읽었으면 여기서 읽는다. `loaded` 가 그 조건이라 두 번 읽지 않는다.
+     * Where 「결재선 지정」 goes: this activity's detail, or - when it follows another activity's line - that
+     * activity's, since the line is set there. None for a form borrowed from another site.
      */
-    updated(changes) {
-        if (this.active && !this.loaded && !this.failed) {
-            this.fetch();
+    lineEditAddress(door) {
+        if (door.kind !== 'approval' || (door.standing !== 'on' && door.standing !== 'off')) {
+            return '';
         }
+        const owner = door.followsLabelKey ? this.doors.find(one => one.labelKey === door.followsLabelKey) : door;
+        return owner && opensDetail(owner) && opensDetail(door) ? detailAddress(owner.name) : '';
     }
-    async fetch() {
-        const response = await client.query({ query: CatalogFetch, fetchPolicy: 'no-cache' });
+    renderDoor(door) {
+        const label = doorLabel(i18next.t, door);
+        const steps = (door.approvalLine || []).filter(isApprovalStep).length;
+        const drawsLine = door.kind === 'approval' && steps > 0;
+        const note = lineNote(i18next.t, door, drawsLine);
+        const follows = followsNote(i18next.t, door);
+        const when = whenNoLineTag(i18next.t, door);
+        const edit = this.lineEditAddress(door);
+        return html `
+      <li class="door ${door.standing}">
+        <div class="what">
+          ${opensDetail(door)
+            ? html `<a class="name" href=${detailAddress(door.name)}>${label}</a>`
+            : html `<span class="name">${label}</span>`}
+          <span class="kind">${i18next.t(`text.door-kind-${door.kind}`)}</span>
+          <span class="mark ${door.standing}">${i18next.t(`text.door-standing-${door.standing}`)}</span>
+        </div>
+        <div class="says">
+          ${door.about ? html `<span class="about">${door.about}</span>` : ''}
+          ${drawsLine || note || edit
+            ? html `<div class="line">
+                ${drawsLine
+                ? html `<approval-line-brief
+                      plan
+                      style="--seats: ${(door.approvalLine || []).length + 1}"
+                      .model=${door.approvalLine}
+                    ></approval-line-brief>`
+                : ''}
+                ${note ? html `<span>${note}</span>` : ''}
+                ${edit
+                ? html `<a class="page-nav-link" href=${edit}>${i18next.t('button.activity-set-approval-line')}</a>`
+                : ''}
+              </div>`
+            : ''}
+          ${follows ? html `<span class="when">${follows}</span>` : ''}
+          ${when ? html `<span class="when">${when}</span>` : ''}
+          ${
         /*
-         * 이 client 는 errorPolicy: 'all' 이라 질의가 실패해도 거절되지 않는다. 그대로 읽으면 실패가
-         * 「등록된 업무가 없다」로 그려진다.
+         * 남의 양식을 쓰는 것은 정상이지만, 안 말하면 「정한 적 없는데」가 된다. 차 있으면 어디서
+         * 정했는지, 비어 있으면 여기서는 못 고친다는 것을 말한다.
          */
-        const items = response.errors?.length ? undefined : response.data?.responses?.items;
-        if (!Array.isArray(items)) {
-            this.failed = true;
-            this.loadError = response.errors?.length ? response.errors : new Error('no data');
-            this.loaded = true;
-            console.error('[activity-catalog]', response.errors || 'no data');
-            return;
-        }
-        this.failed = false;
-        this.loadError = null;
-        this.items = [...items].sort((a, b) => stageRank(a.readiness?.stage) - stageRank(b.readiness?.stage) || shownName(a).localeCompare(shownName(b)));
-        this.loaded = true;
+        door.from
+            ? html `<span class="from"
+                  >${door.standing === 'on'
+                ? i18next.t('text.door-filled-from', { name: door.from })
+                : i18next.t('text.door-form-from', { name: door.from })}</span
+                >`
+            : ''}
+        </div>
+      </li>
+    `;
     }
 };
 __decorate([
     state(),
     __metadata("design:type", Array)
-], ActivityCatalogPage.prototype, "items", void 0);
+], ActivityCatalogPage.prototype, "doors", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ActivityCatalogPage.prototype, "counts", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ActivityCatalogPage.prototype, "todo", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
-], ActivityCatalogPage.prototype, "loaded", void 0);
+], ActivityCatalogPage.prototype, "seatsStanding", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
-], ActivityCatalogPage.prototype, "failed", void 0);
+], ActivityCatalogPage.prototype, "seatsOffered", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)