@things-factory/ops-master 10.1.31 → 10.1.34

package/dist-client/pages/master/test-specification.js

@@ -2,446 +2,231 @@ import { __decorate, __metadata } from "tslib";
 import '@operato/data-grist/ox-grist.js';
 import gql from 'graphql-tag';
 import { css, html } from 'lit';
-import { customElement, query, state } from 'lit/decorators.js';
-import { DataGrist } from '@operato/data-grist';
+import { customElement, state } from 'lit/decorators.js';
 import { client } from '@operato/graphql';
 import { i18next } from '@operato/i18n';
-import { CustomAlert } from '@operato/shell';
 import { notify } from '@operato/layout';
 import { EFFECTIVE, IDENTITY, MasterPageBase } from './master-page-base.js';
-/**
- * 무엇을 어떻게 검사하나 — 항목과 상하한과 방법.
- *
- * 인원 등급과 자산 등급이 이것을 요구 검사로 가리킨다.
- *
- * ── 왜 이 축만 자기 화면을 갖나 ────────────────────────────────────────────
- * 다른 축의 칸은 글자 · 숫자 · 날짜라서 공통 그리드 하나로 충분하다. 검사 명세는 다르다. **명세 하나가
- * 기준 여럿을 갖는다.** 기준 하나는 이름 · 설명 · 측정 속성 · 하한 · 상한 · 단위 · 표현식을 갖는다.
- *
- * 그것을 한 칸에 JSON 원문으로 보이면 품질팀장이 상한을 40.5 로 고치려고 중괄호를 세게 된다. 그것은
- * 기준 정보를 다루는 화면이 아니라 개발자가 JSON 을 손보는 화면이다. 실제로 한동안 그랬다.
- *
- * ── 화면은 JSON 을 모른다 ──────────────────────────────────────────────────
- * 서버가 기준을 **행으로** 낸다(`testSpecificationCriteria`) 그리고 행으로 받는다
- * (`updateTestSpecificationCriteria`). 옮김은 서버의 `criteria-rows.ts` 한 곳이 맡는다.
- *
- * 그래서 저장이 언젠가 표로 내려가도 **이 파일은 바뀌지 않는다.** 화면이 JSON 을 풀면 그날 이 코드가
- * 통째로 버려진다.
- *
- * ── 위아래로 나눈다 ────────────────────────────────────────────────────────
- * 위는 명세 목록, 아래는 **고른 명세의 기준**이다. 아무것도 안 고른 상태를 빈 표로 두지 않는다 —
- * 빈 표는 「기준이 없는 명세」와 같아 보이고, 그러면 사람이 기준을 다시 적는다.
- */
+import { requestMasterChangeApproval } from '../../master-change-approval.js';
+/** Identity list, approved schedule, and draft workspace are separate surfaces. */
 let OpsMasterTestSpecification = class OpsMasterTestSpecification extends MasterPageBase {
     constructor() {
         super(...arguments);
-        /**
-         * 지금 체크된 명세들.
-         *
-         * 아래는 **하나의 기준만** 보이는데 위에서 여럿을 체크할 수 있다(명세 여럿을 한 번에 종료하는 데
-         * 쓴다). 그때 화면이 아무 말도 안 하면 보이는 기준이 **여럿을 합친 것**으로 읽힌다. 그래서 몇 개가
-         * 체크돼 있는지 세어 말한다.
-         */
-        this.checked = new Set();
-        /**
-         * 아래 표에서 아직 저장하지 않은 기준이 몇 건인가.
-         *
-         * ── 왜 세어 보이나 (2026-09-05) ────────────────────────────────────────
-         * 이 화면은 표가 둘인데 「저장」은 하나다. 아래를 고쳐 놓고도 그것이 저장 대상인지 화면 어디에도
-         * 안 적혀 있었다. 「복잡한 편집인데 저장 버튼의 기능이 위험해 보인다」(사용자).
-         *
-         * 세어서 표 머리에 적으면 두 가지가 한꺼번에 풀린다. 저장을 누르기 전에 **무엇이 나가는지** 보이고,
-         * 다른 명세로 넘어가려 할 때 **버릴 것이 있다**는 사실도 보인다.
-         */
-        this.dirtyCriteria = 0;
+        this.newName = '';
+        this.busy = false;
+        this.dirty = false;
+        this.loadSerial = 0;
     }
-    static { this.styles = [
-        ...MasterPageBase.styles,
-        css `
-      :host {
-        display: flex;
-        flex-direction: column;
-      }
-
-      /* 위가 목록, 아래가 그 명세의 기준. 기준 쪽을 조금 더 준다 — 줄이 여럿이다. */
-      .split {
-        display: flex;
-        flex-direction: column;
-        flex: 1;
-        min-height: 0;
-      }
-
-      .split > ox-grist {
-        flex: 4;
-        min-height: 0;
-      }
-
-      .criteria {
-        display: flex;
-        flex-direction: column;
-        flex: 5;
-        min-height: 0;
-        border-top: 1px solid var(--ui-line, #c9d4d9);
-      }
-
-      .criteria-head {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 8px;
-        padding: 6px 12px;
-        background-color: var(--ui-panel-2, #f3f6f7);
-      }
-
-      .criteria-head .what {
-        font-size: 13px;
-        font-weight: 600;
-        color: var(--ui-ink, #17272f);
-      }
-
-      /* 아직 저장하지 않은 것이 있다 — 저장을 누르기 전에 무엇이 나가는지 여기서 읽는다. */
-      .criteria-head .pending {
-        margin-right: 8px;
-        font-family: inherit;
-        font-style: normal;
-        font-weight: 600;
-        color: var(--status-warning-color, #b26a00);
-      }
-
-      .criteria-head .among {
-        margin-left: 6px;
-        font-style: normal;
-        color: var(--status-warning-color, #b26a00);
-      }
-
-      .criteria-head .who {
-        font-family: var(--theme-font-mono, monospace);
-        font-size: 12px;
-        color: var(--ui-muted, #57676f);
-      }
-
-      .criteria ox-grist {
-        flex: 1;
-        min-height: 0;
-      }
-
-      /* 아직 아무 명세도 안 골랐다. 빈 표를 보이지 않는다. */
-      .nothing-picked {
-        flex: 1;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 24px;
-        text-align: center;
-        font-size: 13px;
-        line-height: 1.6;
-        color: var(--ui-muted, #57676f);
-      }
-    `
-    ]; }
+    static { this.styles = [...MasterPageBase.styles, css `
+    :host { display:flex; flex-direction:column; min-height:0 }
+    ox-grist { flex:2; min-height:160px }
+    section { flex:3; overflow:auto; padding:16px; border-top:1px solid var(--ui-line,#ccd5da) }
+    .toolbar,.fields { display:flex; flex-wrap:wrap; gap:12px; align-items:end; margin-bottom:12px }
+    label { display:flex; flex-direction:column; gap:4px; font-size:13px }
+    input,button { font:inherit; padding:7px; border:1px solid var(--ui-line,#ccd5da); border-radius:3px }
+    input { min-width:100px; max-width:220px }
+    button { cursor:pointer; background:var(--ui-panel-2,#f3f6f7) }
+    button:disabled { cursor:default; opacity:.5 }
+    table { width:100%; border-collapse:collapse; margin:10px 0 18px; font-size:13px }
+    th,td { padding:7px; text-align:left; border-bottom:1px solid var(--ui-line,#ccd5da); vertical-align:top }
+    td input { width:100%; min-width:70px; box-sizing:border-box }
+    .notice { padding:10px; background:var(--ui-panel-2,#f3f6f7) }
+    .changed { background:var(--status-warning-background,#fff2d0) }
+    h3 { margin:14px 0 8px; font-size:15px }
+  `]; }
+    t(key, fallback) { return i18next.t(`test-spec-revision.${key}`, { defaultValue: fallback }); }
     get spec() {
-        return {
-            key: 'testSpecification',
-            title: 'test-specification',
-            help: 'ops-master/test-specification',
-            query: 'testSpecifications',
-            mutation: 'updateMultipleTestSpecification',
-            columns: [...IDENTITY, ...EFFECTIVE]
-        };
+        return { key: 'testSpecification', title: 'test-specification', help: 'ops-master/test-specification',
+            query: 'testSpecifications', mutation: 'updateMultipleTestSpecification',
+            columns: [...IDENTITY, { name: 'version', label: 'version', type: 'string' }, ...EFFECTIVE].map(column => ({ ...column, readonly: true })) };
     }
-    countDirtyCriteria() {
-        this.dirtyCriteria = (this.criteriaGrist?.dirtyRecords ?? []).length;
+    get context() {
+        return { ...super.context, importable: undefined, actions: [{
+                    title: this.t('new', '새 검사 명세'), icon: 'add', emphasis: { raised: true }, action: () => this.startNew()
+                }] };
     }
-    /**
-     * 기준 표의 구성.
-     *
-     * **단위 칸을 좁히지 않는다.** `MMT`(mm) · `CEL`(℃) 같은 UN/CEFACT 코드가 들어가고, 잘리면
-     * 「무엇으로 잰 값인지」가 화면에서 사라진다.
-     */
-    get criteriaConfig() {
-        return {
-            /*
-             * 명세는 골랐는데 그 안에 판단 기준이 하나도 없는 자리다. 왼쪽의 빈 목록과 뜻이 다르다 —
-             * 「검사 명세가 없다」가 아니라 「이 명세가 아직 무엇으로 합격을 가르는지 말하지 않는다」이다.
-             *
-             * 고른 것이 없을 때는 아래 render 가 표 자체를 보이지 않는다(그 자리 주석 참조).
-             */
-            emptyNote: {
-                title: i18next.t('text.criteria-empty'),
-                description: i18next.t('text.criteria-empty-hint')
-            },
-            list: { fields: ['id', 'description'], details: [] },
-            columns: [
-                { type: 'gutter', gutterName: 'sequence', fixed: true },
-                { type: 'gutter', gutterName: 'row-selector', multiple: true, fixed: true },
-                {
-                    type: 'string',
-                    name: 'id',
-                    header: i18next.t('field.criterion-id'),
-                    record: { editable: true },
-                    width: 160,
-                    fixed: true
-                },
-                {
-                    type: 'string',
-                    name: 'description',
-                    header: i18next.t('field.description'),
-                    record: { editable: true },
-                    width: 180
-                },
-                {
-                    type: 'string',
-                    name: 'evaluatedPropertyId',
-                    header: i18next.t('field.evaluated-property'),
-                    record: { editable: true },
-                    width: 150
-                },
-                { type: 'float', name: 'minimum', header: i18next.t('field.minimum'), record: { editable: true }, width: 100 },
-                { type: 'float', name: 'maximum', header: i18next.t('field.maximum'), record: { editable: true }, width: 100 },
-                { type: 'string', name: 'uom', header: i18next.t('field.uom'), record: { editable: true }, width: 90 },
-                {
-                    type: 'string',
-                    name: 'expression',
-                    header: i18next.t('field.expression'),
-                    record: { editable: true },
-                    width: 200
-                }
-            ],
-            rows: { appendable: true, selectable: { multiple: true } }
-        };
+    configOf() {
+        const config = super.configOf();
+        return { ...config, rows: { ...config.rows, appendable: false, selectable: { multiple: false } } };
     }
-    render() {
-        return html `
-      <div class="split">
-        <ox-grist
-          .mode=${this.mode}
-          .config=${this.gristConfig}
-          .fetchHandler=${this.fetchHandler.bind(this)}
-          .personalConfigProvider=${this.getPagePreferenceProvider(`ox-grist-${this.spec.key}`)}
-          @select-record-change=${(e) => this.pick(e)}
-        >
-          <div slot="headroom" class="header">${this.renderScope()}</div>
-          <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
-        </ox-grist>
-
-        <div class="criteria">
-          <div class="criteria-head">
-            <span class="what">${i18next.t('field.criteria')}</span>
-            <span class="who">
-              ${this.dirtyCriteria
-            ? html `<em class="pending">${i18next.t('text.n-unsaved-criteria', { count: this.dirtyCriteria })}</em>`
-            : ''}
-              ${this.picked ?? ''}
-              <!--
-                여럿 체크했는데 하나만 보이는 상태를 **말한다.** 아무 말도 안 하면 보이는 기준이
-                여럿을 합친 것으로 읽힌다.
-              -->
-              ${this.checked.size > 1
-            ? html `<em class="among">${i18next.t('text.of-n-selected', { count: this.checked.size })}</em>`
-            : ''}
-            </span>
-          </div>
-          ${this.picked
-            ? html `
-                <ox-grist
-                  id="criteria-grist"
-                  mode="GRID"
-                  .config=${this.criteriaConfig}
-                  .fetchHandler=${this.fetchCriteria.bind(this)}
-                  @field-change=${() => this.countDirtyCriteria()}
-                  @record-change=${() => this.countDirtyCriteria()}
-                ></ox-grist>
-              `
-            : html `
-                <!--
-                  빈 표를 보이지 않는다. 빈 표는 「기준이 없는 명세」와 같아 보이고, 그러면 사람이
-                  기준을 다시 적는다.
-                -->
-                <div class="nothing-picked">${i18next.t('text.pick-a-specification-to-see-criteria')}</div>
-              `}
-        </div>
-      </div>
-    `;
+    canLeave() { return !this.dirty || window.confirm(this.t('discard', '저장하지 않은 초안을 버리시겠습니까?')); }
+    startNew() {
+        if (this.busy || !this.canLeave())
+            return;
+        ++this.loadSerial;
+        this.overview = undefined;
+        this.newName = '';
+        this.draft = { version: '1', effectiveFrom: new Date().toISOString(), reason: '', criteria: [] };
+        this.dirty = false;
     }
-    /**
-     * 위에서 고른 줄이 아래를 정한다.
-     *
-     * ── detail 모양이 거터 설정에 따라 다르다 ─────────────────────────────────
-     * `gutter-row-selector.js` 를 보면 두 모양을 낸다.
-     *
-     * ```
-     * multiple: true   { added: [record], removed: [] }      ← 이 화면이 쓰는 것
-     * 그 밖            { records: [record] }
-     * ```
-     *
-     * 한쪽만 읽으면 **오류보고없이 아무것도 안 골라진다.** 오류가 나지 않고 아래 표만 영원히 안내 문구로
-     * 남는다. 처음에 `records` 만 읽어서 실제로 그랬다. 그리드가 세우는 `__selected__` 를 읽는 방법도
-     * 있는데, 그 표시는 이 화면에 오지 않았다. 그래서 **둘 다 읽는다.**
-     *
-     * 여럿 고르면 마지막에 고른 것을 본다. 아래는 명세 하나의 기준을 보이는 자리라 둘을 함께 보일 수
-     * 없고, 아무 것이나 고르면 사람은 그것이 무엇의 기준인지 모른다.
-     */
-    async pick(e) {
-        const detail = (e.detail ?? {});
-        const nameOf = (record) => String(record?.name ?? '');
-        const added = detail.added ?? detail.records ?? [];
-        const removed = detail.removed ?? [];
-        /* `records` 는 「지금 고른 것 전부」다. `added`·`removed` 는 「이번에 바뀐 것」이다. */
-        const next = detail.records ? new Set() : new Set(this.checked);
-        for (const record of removed)
-            next.delete(nameOf(record));
-        for (const record of added)
-            next.add(nameOf(record));
-        /* 아래에 무엇이 보일지 먼저 정하고, 바꾸기 전에 고치던 것이 있는지 본다. */
-        let picked = this.picked;
-        if (added.length) {
-            picked = nameOf(added[added.length - 1]) || undefined;
-        }
-        else if (removed.some(record => nameOf(record) === this.picked)) {
-            /* 지금 보고 있던 것을 풀었다. 남은 것이 하나면 그것을 보인다. */
-            picked = next.size ? [...next][next.size - 1] : undefined;
-        }
-        else if (detail.records && !detail.records.length) {
-            picked = undefined;
-        }
-        this.checked = next;
-        if (picked === this.picked) {
+    async pick(event) {
+        const record = event.detail?.records?.[0] ?? event.detail?.added?.[0];
+        if (!record?.id || this.busy || !this.canLeave())
             return;
-        }
-        /*
-         * ── 고치던 기준을 **말없이 버리지 않는다** (2026-09-05) ────────────────
-         *
-         * 아래 표는 「지금 고른 명세」에 걸려 있다. 명세를 바꾸면 아래는 새 명세의 기준을 다시 읽어
-         * 오고, 고치던 값은 그때 사라진다. [확인함] 2026-09-05 · CP-CAM-LEAK 의 하한을 고쳐 두고
-         * CP-CAM-OQC 를 고른 뒤 돌아오니 원래 값이었다. 화면은 아무 말도 하지 않았다.
-         *
-         * 두 갈래로만 묻는다 — 어느 쪽을 골라도 넘어간다. 「머무르기」를 두면 위의 체크는 이미 옮겨
-         * 갔는데 아래만 옛 명세를 보이는, 화면과 사실이 어긋난 상태가 남는다.
-         */
-        if (this.dirtyCriteria > 0) {
-            const answer = await CustomAlert({
-                type: 'question',
-                title: i18next.t('text.n-unsaved-criteria', { count: this.dirtyCriteria }),
-                text: i18next.t('text.leaving-discards-unsaved-criteria'),
-                confirmButton: { text: i18next.t('button.save-and-leave') },
-                cancelButton: { text: i18next.t('button.discard-and-leave') }
-            });
-            if (answer?.isConfirmed) {
-                await this.save();
-            }
-        }
-        this.picked = picked;
-        this.dirtyCriteria = 0;
+        await this.run(async () => { await this.load(record.id); this.draft = undefined; this.dirty = false; });
     }
-    /**
-     * 고른 명세의 기준을 읽는다.
-     *
-     * 못 읽으면 **빈 목록으로 바꾸지 않는다.** 빈 목록은 「기준이 없다」와 같아 보이고, 그러면 사람이
-     * 기준을 다시 적어 넣는다. 무엇이 잘못됐는지 말하고 비운다.
-     */
-    async fetchCriteria() {
-        if (!this.picked) {
-            return { total: 0, records: [] };
-        }
+    async load(specId) {
+        const serial = ++this.loadSerial;
+        const response = await client.query({ query: gql `query($specId:String!){testSpecificationRevisions(specId:$specId)}`,
+            variables: { specId }, fetchPolicy: 'no-cache' });
+        this.assertResponse(response);
+        if (serial === this.loadSerial)
+            this.overview = response.data.testSpecificationRevisions;
+    }
+    assertResponse(response) {
+        if (response?.errors?.length)
+            throw new Error(response.errors.map((error) => error.message).join('\n'));
+        if (!response?.data)
+            throw new Error(this.t('no-response', '서버 응답을 확인할 수 없습니다. 다시 조회하십시오.'));
+    }
+    async run(work) {
+        if (this.busy)
+            return;
+        this.busy = true;
         try {
-            const response = await client.query({
-                query: gql `
-          query ($name: String!) {
-            testSpecificationCriteria(name: $name) {
-              id
-              description
-              evaluatedPropertyId
-              minimum
-              maximum
-              uom
-              expression
-              keptFields
-            }
-          }
-        `,
-                variables: { name: this.picked },
-                fetchPolicy: 'no-cache'
-            });
-            const rows = (response.data?.testSpecificationCriteria ?? []);
-            /* 어느 줄인지 서버가 알아야 고칠 수 있다 — 이름은 고칠 수 있으므로 이름으로 찾을 수 없다. */
-            return { total: rows.length, records: rows.map((row, index) => ({ ...row, rowIndex: index })) };
+            await work();
         }
         catch (error) {
             notify({ message: error.message, level: 'error' });
-            return { total: 0, records: [] };
+        }
+        finally {
+            this.busy = false;
         }
     }
-    /**
-     * 저장 — **위와 아래를 따로 낸다.**
-     *
-     * 명세 자체(이름 · 버전 · 유효 기간)는 공통 규칙이 저장하고, 기준은 이 축의 뮤테이션이 저장한다.
-     * 기준이 막히면 **명세 쪽도 되돌린다.** 절반만 저장되면 화면과 저장된 것이 달라진다.
-     */
-    async save() {
-        const criteriaPatches = this.picked ? (this.criteriaGrist?.dirtyRecords ?? []) : [];
-        if (criteriaPatches.length) {
-            let response;
-            try {
-                response = await client.mutate({
-                    mutation: gql `
-            mutation ($name: String!, $patches: [Object!]!) {
-              updateTestSpecificationCriteria(name: $name, patches: $patches) {
-                id
-              }
-            }
-          `,
-                    variables: { name: this.picked, patches: criteriaPatches }
-                });
-            }
-            catch (error) {
-                /* 무엇이 왜 막혔는지 그대로 보인다 — 「저장할 수 없습니다」로는 고칠 곳을 모른다. */
-                notify({ message: error.message, level: 'error' });
+    openRevision(revision, fork = false) {
+        if (this.busy || !this.canLeave())
+            return;
+        this.draft = JSON.parse(JSON.stringify(revision));
+        if (fork)
+            this.draft = { ...this.draft, id: undefined, frozenAt: undefined, activityInstanceId: undefined,
+                editGeneration: undefined, effectiveFrom: new Date().toISOString(), reason: '' };
+        this.dirty = false;
+    }
+    change(field, value) { this.draft = { ...this.draft, [field]: value }; this.dirty = true; }
+    criterion(index, field, value) {
+        const criteria = this.draft.criteria.map(row => ({ ...row, ...(row.limit ? { limit: { ...row.limit } } : {}) }));
+        if (['minimum', 'maximum', 'uom'].includes(field)) {
+            criteria[index].limit ??= {};
+            if (!value)
+                delete criteria[index].limit[field];
+            else
+                criteria[index].limit[field] = field === 'uom' ? value : Number(value);
+            if (!Object.keys(criteria[index].limit).length)
+                delete criteria[index].limit;
+        }
+        else
+            criteria[index][field] = value;
+        this.change('criteria', criteria);
+    }
+    async save() { await this.run(() => this.persist()); }
+    async persist() {
+        if (!this.draft || this.draft.frozenAt)
+            return;
+        const { version, description, effectiveFrom, reason, criteria } = this.draft;
+        const content = { version, description, effectiveFrom, reason, criteria };
+        const response = this.draft.id
+            ? await client.mutate({ mutation: gql `mutation($revisionId:String!,$editGeneration:Int!,$content:Object!){editTestSpecificationDraft(revisionId:$revisionId,editGeneration:$editGeneration,content:$content)}`,
+                variables: { revisionId: this.draft.id, editGeneration: this.draft.editGeneration, content } })
+            : await client.mutate({ mutation: gql `mutation($specId:String,$name:String,$content:Object!){createTestSpecificationDraft(specId:$specId,name:$name,content:$content)}`,
+                variables: { specId: this.overview?.specId, name: this.overview ? undefined : this.newName, content } });
+        this.assertResponse(response);
+        this.draft = response.data.editTestSpecificationDraft ?? response.data.createTestSpecificationDraft;
+        this.dirty = false;
+        await this.load(this.draft.specId);
+        this.grist?.fetch();
+    }
+    async submit() {
+        await this.run(async () => {
+            await this.persist();
+            if (!this.draft?.id || this.draft.frozenAt)
                 return;
+            const policy = await client.query({ query: gql `query { masterChangePolicy(axis:"testSpecification") }`, fetchPolicy: 'no-cache' });
+            this.assertResponse(policy);
+            if (policy.data.masterChangePolicy.approvalRequired) {
+                await requestMasterChangeApproval(this, { axis: 'testSpecification', revisionId: this.draft.id, editGeneration: this.draft.editGeneration });
             }
-            /*
-             * **`errors` 를 직접 본다.** 이 앱의 GraphQL 클라이언트는 서버가 거절해도 던지지 않고
-             * `response.errors` 에 담아 돌려준다. `try/catch` 만 두면 거절이 오류 없이 지나가고, 화면은
-             * 아무 일 없었다는 듯 다음으로 넘어간다 — **고친 것이 버려졌는데 사람은 저장된 줄 안다.**
-             * 2026-09-02에 실제로 그랬다(단위를 지운 기준이 서버에서 막혔는데 화면은 「바뀐 것이 없습니다」).
-             */
-            if (response?.errors?.length) {
-                notify({ message: response.errors.map((error) => error.message).join('\n'), level: 'error' });
-                return;
+            else {
+                const response = await client.mutate({ mutation: gql `mutation($revisionId:String!,$editGeneration:Int!){publishTestSpecificationDraft(revisionId:$revisionId,editGeneration:$editGeneration)}`,
+                    variables: { revisionId: this.draft.id, editGeneration: this.draft.editGeneration } });
+                this.assertResponse(response);
             }
-        }
-        await super.save();
-        if (criteriaPatches.length) {
-            this.criteriaGrist?.fetch();
-        }
+            await this.load(this.draft.specId);
+            this.draft = this.overview.revisions.find(row => row.id === this.draft.id);
+            notify({ message: policy.data.masterChangePolicy.approvalRequired ? this.t('submitted', '승인을 요청했습니다. 승인 전에는 검사에 적용되지 않습니다.') : this.t('published', '정책에 따라 발행했습니다. 지정한 시각부터 적용됩니다.'), level: 'info' });
+        });
+    }
+    criteriaTable(revision, editable = false, before) {
+        const fields = ['id', 'description', 'evaluatedPropertyId', 'minimum', 'maximum', 'uom', 'expression'];
+        const value = (row, field) => ['minimum', 'maximum', 'uom'].includes(field) ? row.limit?.[field] : row[field];
+        return html `<table><thead><tr>${fields.map(field => html `<th>${field}</th>`)}${editable ? html `<th></th>` : ''}</tr></thead>
+      <tbody>${revision.criteria.map((row, index) => html `<tr>${fields.map(field => {
+            const prior = before?.criteria.find(item => item.id === row.id);
+            const changed = before && value(prior ?? {}, field) !== value(row, field);
+            return html `<td class=${changed ? 'changed' : ''}>${editable
+                ? html `<input aria-label=${`${row.id || index + 1} ${field}`} .value=${String(value(row, field) ?? '')}
+              type=${['minimum', 'maximum'].includes(field) ? 'number' : 'text'} step="any"
+              @input=${(e) => this.criterion(index, field, e.target.value)}>`
+                : value(row, field) ?? '—'}${changed ? html `<div><small>← ${value(prior ?? {}, field) ?? '—'}</small></div>` : ''}</td>`;
+        })}${editable ? html `<td><button @click=${() => this.change('criteria', revision.criteria.filter((_, i) => i !== index))}>${this.t('remove', '삭제')}</button></td>` : ''}</tr>`)}
+      </tbody></table>`;
+    }
+    render() {
+        const current = this.overview?.schedule.find(row => row.state === 'current');
+        const currentRevision = this.overview?.revisions.find(row => row.id === current?.revisionId);
+        const readonly = !!this.draft?.frozenAt || this.busy;
+        return html `
+      <ox-grist .mode=${this.mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)} @select-record-change=${this.pick.bind(this)}></ox-grist>
+      <section aria-busy=${this.busy}>
+        ${this.overview ? html `<div class="toolbar"><h3>${this.overview.name}</h3>
+          <button ?disabled=${this.busy} @click=${() => this.run(() => this.load(this.overview.specId))}>${this.t('refresh', '새로고침')}</button>
+          <button ?disabled=${this.busy} @click=${() => this.openRevision(currentRevision ?? { version: '1', effectiveFrom: new Date().toISOString(), reason: '', criteria: [] }, true)}>${this.t('fork', '변경 초안 만들기')}</button></div>
+          <h3>${this.t('schedule', '승인된 적용 시간표')}</h3>
+          <table><thead><tr><th>${this.t('state', '상태')}</th><th>${this.t('version', '버전')}</th><th>${this.t('from', '이 시각부터')}</th><th>${this.t('to', '이 시각 직전까지')}</th></tr></thead>
+            <tbody>${this.overview.schedule.map(row => html `<tr><td>${this.t(row.state, { current: '현재 적용', scheduled: '적용 예정', expired: '적용 종료' }[row.state] ?? row.state)}</td>
+              <td><button @click=${() => this.openRevision(this.overview.revisions.find(item => item.id === row.revisionId))}>${this.overview.revisions.find(item => item.id === row.revisionId)?.version}</button></td>
+              <td>${row.validFrom}</td><td>${row.validTo ?? '∞'}</td></tr>`)}</tbody></table>
+          ${!current ? html `<p class="notice">${this.t('no-current', '현재 적용 가능한 승인본이 없습니다.')}</p>` : ''}
+          <h3>${this.t('drafts', '초안 · 상신본')}</h3><div class="toolbar">${this.overview.revisions.filter(row => !this.overview.schedule.some(segment => segment.revisionId === row.id)).map(row => html `
+            <button @click=${() => this.openRevision(row)}>${row.version} · ${row.frozenAt ? this.t('frozen', '상신본 — 결재 상태는 업무함에서 확인') : this.t('draft', '편집 초안')}</button>`)}</div>
+        ` : !this.draft ? html `<p>${this.t('pick', '검사 명세를 선택하거나 새 명세를 만드십시오.')}</p>` : ''}
+        ${this.draft ? html `<h3>${this.draft.frozenAt ? this.t('immutable', '동결된 내용 — 수정하려면 새 초안을 만드십시오') : this.t('editing', '편집 초안 — 아직 적용되지 않음')}</h3>
+          <div class="fields">
+            ${!this.overview ? html `<label>${this.t('name', '명세 이름')}<input ?disabled=${readonly} .value=${this.newName} @input=${(e) => { this.newName = e.target.value; this.dirty = true; }}></label>` : ''}
+            ${['version', 'description', 'effectiveFrom', 'reason'].map(field => html `<label>${this.t(field, { version: '버전', description: '설명', effectiveFrom: '적용 시작 (시간대 포함 ISO 시각)', reason: '변경 사유' }[field])}
+              <input ?disabled=${readonly} .value=${this.draft[field] ?? ''} @input=${(e) => this.change(field, e.target.value)}></label>`)}
+          </div>
+          ${this.criteriaTable(this.draft, !readonly, currentRevision)}
+          ${currentRevision ? html `<details><summary>${this.t('before', '현재 적용 중인 기준 전체 보기 (삭제된 항목 포함)')}</summary>${this.criteriaTable(currentRevision)}</details>` : ''}
+          <div class="toolbar">
+            <button ?disabled=${readonly} @click=${() => this.change('criteria', [...this.draft.criteria, { id: '' }])}>${this.t('add', '기준 추가')}</button>
+            <button ?disabled=${readonly} @click=${() => this.save()}>${this.t('save', '초안 저장')}</button>
+            <button ?disabled=${readonly} @click=${() => this.submit()}>${this.t('submit', '저장 후 발행 / 승인 요청')}</button>
+            ${this.draft.frozenAt ? html `<button ?disabled=${this.busy} @click=${() => this.openRevision(this.draft, true)}>${this.t('fork', '변경 초안 만들기')}</button>` : ''}
+            ${this.dirty ? html `<span>${this.t('unsaved', '저장하지 않은 변경이 있습니다.')}</span>` : ''}
+          </div>` : ''}
+      </section>`;
     }
 };
 __decorate([
     state(),
-    __metadata("design:type", String)
-], OpsMasterTestSpecification.prototype, "picked", void 0);
+    __metadata("design:type", Object)
+], OpsMasterTestSpecification.prototype, "overview", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
-], OpsMasterTestSpecification.prototype, "checked", void 0);
+], OpsMasterTestSpecification.prototype, "draft", void 0);
 __decorate([
-    query('#criteria-grist'),
-    __metadata("design:type", DataGrist
-    /**
-     * 아래 표에서 아직 저장하지 않은 기준이 몇 건인가.
-     *
-     * ── 왜 세어 보이나 (2026-09-05) ────────────────────────────────────────
-     * 이 화면은 표가 둘인데 「저장」은 하나다. 아래를 고쳐 놓고도 그것이 저장 대상인지 화면 어디에도
-     * 안 적혀 있었다. 「복잡한 편집인데 저장 버튼의 기능이 위험해 보인다」(사용자).
-     *
-     * 세어서 표 머리에 적으면 두 가지가 한꺼번에 풀린다. 저장을 누르기 전에 **무엇이 나가는지** 보이고,
-     * 다른 명세로 넘어가려 할 때 **버릴 것이 있다**는 사실도 보인다.
-     */
-    )
-], OpsMasterTestSpecification.prototype, "criteriaGrist", void 0);
+    state(),
+    __metadata("design:type", Object)
+], OpsMasterTestSpecification.prototype, "newName", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], OpsMasterTestSpecification.prototype, "busy", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
-], OpsMasterTestSpecification.prototype, "dirtyCriteria", void 0);
+], OpsMasterTestSpecification.prototype, "dirty", void 0);
 OpsMasterTestSpecification = __decorate([
     customElement('ops-master-test-specification')
 ], OpsMasterTestSpecification);