@dssp/supervision 1.0.5 → 1.0.7

package/dist-client/pages/building-inspection/building-inspection-detail-ai-measurement.js

@@ -1,12 +1,13 @@
 import { __decorate, __metadata } from "tslib";
 /**
- * 검측 관리 상세 - AI 자동 검측
+ * 검측 관리 상세 - AI 자동 검측 (동영상 세트 + 측정 모델 2종)
  *
- * 검측 체크리스트 항목을 AI 엔진(inspection-ai)에 보내:
- *  1) 촬영 가이드(plan-shots)를 받아 단계별 촬영 슬롯을 표시하고
- *  2) 촬영된 사진으로 자동 판정(inspect)을 실행한 뒤
- *  3) 항목별 상세 / 추가 촬영(재검사) / 종합 리포트를 거쳐
- *  4) 검사 등록 시 감리자 적합/부적합 자동 반영 + AI판단 근거를 첨부한다.
+ * 체크리스트 항목을 AI 엔진(inspection-ai)과 측정 서버(measure-engine)에 연동해:
+ *  1) 촬영 가이드(plan-shots, 동영상 최대 3건)를 표시하고
+ *  2) LidarInspector 앱이 만든 세트(video.mov/poses.jsonl/meta.json)를 업로드하면
+ *  3) 세트별 대표 3프레임으로 자동 판정(inspect, input_kind=video_frames)을 실행한 뒤
+ *  4) 「추가 작업 필요」(재촬영/기준값 입력/AI 미지원)를 분류해 측정 UI(철근 배근 길이·기둥벽체 두께)로 처리하고
+ *  5) 측정 결과는 apply-measurement로 판정 확정 → 검사 등록 시 감리자 적합/부적합 자동 반영 + 근거 첨부한다.
  */
 import '@material/web/icon/icon.js';
 import '@material/web/progress/circular-progress.js';
@@ -17,24 +18,41 @@ import { PageView, navigate } from '@operato/shell';
 import { ScrollbarStyles } from '@operato/styles';
 import { client } from '@operato/graphql';
 import { notify } from '@operato/layout';
+import { canDcspMutate } from '@dssp/building-complex/dist-client/utils/privilege';
 import './component/building-inspection-detail-header';
 const ENGINE_BASE_URL = 'https://hatiolab-korea-uni.nruing.com';
 const ENGINE_RUN_URL = `${ENGINE_BASE_URL}/api/run/inspection-ai`;
 const ENGINE_AUTH = `Basic ${btoa('admin:admin1234')}`;
-const MAX_IMAGES = 8;
-/* 엔진 verdict(기계값) → 화면 라벨. pass/fail만 합/불로 자동 체크, 나머지(보류/미지원/오류)는 감리자 판단 */
+/* 측정 서버(measure-engine/server.py). 배포 시 실제 주소로 수정 — https 페이지에서는 https(리버스 프록시) 필요 */
+const MEASURE_BASE_URL = 'https://hatiolab-korea-uni.nruing.com/measure';
+const MEASURE_AUTH = ENGINE_AUTH;
+/* 촬영 안내 이미지 (엔진 전달물 고정 그림 + 픽토그램) */
+const captureGuideImg = new URL('../../assets/ai-measurement/capture_guide.png', import.meta.url).href;
+const pictoRebarImg = new URL('../../assets/ai-measurement/picto-rebar-parallel.svg', import.meta.url).href;
+const pictoMemberImg = new URL('../../assets/ai-measurement/picto-member-corner.svg', import.meta.url).href;
+/* 세트 폴더 필수 파일 (LidarInspector 앱이 촬영 1회당 생성) */
+const SET_FILES = ['video.mov', 'poses.jsonl', 'meta.json'];
+/* 엔진 verdict(기계값) → 화면 라벨. pass/fail만 합/불로 자동 체크, 나머지는 감리자 판단 */
 const VERDICT_LABEL = {
     pass: '적합',
     fail: '부적합',
-    hold: '보류',
-    pending: '미지원',
-    error: '오류'
+    hold: '재촬영 필요',
+    pending: 'AI 미지원',
+    error: '분석 오류'
 };
-/* 엔진 routing(기계값) → 화면 라벨 */
+/* 엔진 routing(기계값) → 화면 라벨. cv 계열은 CV팀 명세 고정 문구 "3D 계측" */
 const ROUTING_LABEL = {
     vlm: 'AI 사진판독',
-    cv: '자동 측정',
-    cv_missing: '자동 측정 누락'
+    cv: '3D 계측',
+    cv_missing: '3D 계측'
+};
+/* operator_inputs 필드 키 → 한글 라벨 (모르는 키는 키 그대로 노출) */
+const FIELD_LABEL = {
+    name: '부재/변 이름',
+    member_dim_mm: '설계 단면 치수 (mm)',
+    cover_spec_mm: '기준(최소) 피복두께 (mm)',
+    design_mm: '설계 두께 (mm)',
+    tol_mm: '허용 공차 ± (mm)'
 };
 let BuildingInspectionAiMeasurement = class BuildingInspectionAiMeasurement extends PageView {
     constructor() {
@@ -43,21 +61,33 @@ let BuildingInspectionAiMeasurement = class BuildingInspectionAiMeasurement exte
         this.buildingInspection = {};
         this.buildingInspectionId = '';
         this.guide = null; // plan-shots 응답 {shots, total_shots, markdown}
-        this.photos = [];
+        this.sets = []; // 촬영 건별 업로드된 세트 (shots 순서)
+        this.photos = []; // inspect에 보낸 대표 프레임(표시/첨부용)
         this.result = null; // inspect 응답
         this.mainPhotoIndex = 0;
         this.panel = 'none';
         this.selectedItem = null;
-        this.recaptureBase = 0; // 재촬영 패널 진입 시점의 사진 수
+        this.recaptureBase = 0; // 재검사 진입 시점의 프레임 수 (used_images 보정용)
+        this.recaptureSet = null; // 재촬영으로 새로 올린 세트
         this.expandedReportId = null; // 종합 리포트에서 펼친 항목(아코디언)
+        /* 측정 패널 상태 */
+        this.measureSetIndex = 0;
+        this.measureInputs = {};
+        this.measureRunning = false;
+        this.measureMsg = '';
+        this.measureResult = null; // 측정 서버 원본 응답 — apply-measurement에 가공 없이 전달
+        this.measureImageUrl = ''; // 근거 이미지(오버레이/결과사진)
+        this.thicknessFrames = [];
+        this.thicknessSlot = null;
+        this.thicknessFrameUrl = '';
+        this.thicknessClick = null;
         this.loading = false;
         this.loadingText = '';
-        /* 슬롯 클릭으로 선택기를 연 경우 대상 슬롯 인덱스 (null이면 뒤에 추가) */
-        this.pendingSlotIndex = null;
-        this._resetPhotos = () => {
-            this.photos.forEach(p => URL.revokeObjectURL(p.url));
-            this.photos = [];
-        };
+        /** 뮤테이션 가능 여부('dcsp guest' 권한 보유 시 false) — 게스트에게는 생성/수정/삭제 버튼을 숨긴다 */
+        this.canMutate = false;
+        /* 세트 업로드 대상: 촬영 건 인덱스(가이드 화면) 또는 -1(재촬영 패널) */
+        this.pendingSetIndex = null;
+        this.objectUrls = []; // 페이지 이탈 시 정리할 blob URL들
         this._openReport = () => {
             this.panel = 'report';
             this.selectedItem = null;
@@ -67,6 +97,21 @@ let BuildingInspectionAiMeasurement = class BuildingInspectionAiMeasurement exte
             this.panel = 'none';
             this.selectedItem = null;
         };
+        /* 클릭 좌표를 표시 크기로 나눠 0~1 정규화 — 원본 해상도는 알 필요 없다 */
+        this._onThicknessClick = (e) => {
+            if (this.measureRunning)
+                return;
+            const rect = e.target.getBoundingClientRect();
+            this.thicknessClick = {
+                x: (e.clientX - rect.left) / rect.width,
+                y: (e.clientY - rect.top) / rect.height
+            };
+        };
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        this.canMutate = await canDcspMutate();
+        this.updateContext();
     }
     get context() {
         return {
@@ -85,6 +130,9 @@ let BuildingInspectionAiMeasurement = class BuildingInspectionAiMeasurement exte
             text: item.name || ''
         }));
     }
+    get uploadedSets() {
+        return this.sets.filter((s) => !!s);
+    }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         return html `
@@ -106,8 +154,14 @@ let BuildingInspectionAiMeasurement = class BuildingInspectionAiMeasurement exte
         ${this.result ? this._renderResult() : this._renderGuide()}
       </div>
 
-      <!-- 모바일에서 촬영/앨범 선택이 함께 뜨도록 capture 속성 없이 사용 -->
-      <input id="photoInput" type="file" accept="image/*" multiple @change=${this._onPhotosSelected} />
+      <!-- 세트 파일 선택: video.mov/poses.jsonl/meta.json 3개 멀티선택 또는 zip 1개 -->
+      <input
+        id="setInput"
+        type="file"
+        accept=".mov,.jsonl,.json,.zip,video/quicktime"
+        multiple
+        @change=${this._onSetFilesSelected}
+      />
 
       ${this.loading
             ? html `
@@ -121,66 +175,107 @@ let BuildingInspectionAiMeasurement = class BuildingInspectionAiMeasurement exte
             : ''}
     `;
     }
-    /* ─── 1단계: 촬영 가이드 화면 ─── */
+    /* ─── 1단계: 촬영 가이드 + 세트 업로드 화면 ─── */
     _renderGuide() {
         if (!this.guide) {
             return html `<div class="empty-state">촬영 가이드를 준비 중입니다...</div>`;
         }
         const shots = this.guide.shots || [];
         const total = this.guide.total_shots || shots.length;
-        const taken = this.photos.length;
-        const current = shots[Math.min(taken, shots.length - 1)];
-        const done = taken >= total;
+        const uploaded = this.uploadedSets.length;
+        const current = shots[Math.min(uploaded, shots.length - 1)];
+        const done = uploaded >= total;
         return html `
       <div class="guide-container">
-        <div class="step-badge">${Math.min(taken + 1, total)}단계 · ${(current === null || current === void 0 ? void 0 : current.target) || '촬영'}</div>
+        <div class="step-badge">동영상 ${Math.min(uploaded + 1, total)}/${total} · ${(current === null || current === void 0 ? void 0 : current.target) || '촬영'}</div>
         <div class="guide-title">${(current === null || current === void 0 ? void 0 : current.target) || ''}${done ? ' 촬영 완료' : ''}</div>
-        <div class="guide-desc">이 사진을 토대로 AI가 적용할 체크리스트를 결정하고 일부를 자동 판정합니다.</div>
+        <div class="guide-desc">
+          전용 촬영 앱(LidarInspector)으로 동영상을 촬영한 뒤, 앱이 만든 파일 3개(video.mov·poses.jsonl·meta.json)를 촬영 건마다
+          업로드해주세요. 일반 카메라 동영상은 사용할 수 없습니다.
+        </div>
 
         <div class="card">
-          <h4>촬영 가이드</h4>
+          <h4>촬영 가이드 (동영상 ${total}건)</h4>
           <ul>
-            ${shots.map(s => html `<li>${s.target} — ${s.how}</li>`)}
+            ${shots.map(s => html `<li>촬영 ${s.shot_no || ''} · ${s.target} — ${s.how}</li>`)}
           </ul>
         </div>
 
+        <div class="card">
+          <h4>공통 촬영법 — 옆으로 이동 · 대상 정면 유지 · 대상 전체 포함</h4>
+          <img class="capture-guide-img" src=${captureGuideImg} alt="촬영 안내" />
+          <div class="picto-strip">
+            <img src=${pictoRebarImg} alt="철근: 재려는 변과 나란히" />
+            <img src=${pictoMemberImg} alt="기둥·벽: 모서리가 보이게" />
+          </div>
+        </div>
+
         <div class="card" style="display: flex; flex-direction: column; gap: 10px;">
           <div class="progress-row">
-            <span>사진 진행</span>
-            <span>${taken} / ${total}</span>
+            <span>촬영 세트 업로드</span>
+            <span>${uploaded} / ${total}</span>
           </div>
-          <div class="progress-bar"><div style="width: ${total ? (taken / total) * 100 : 0}%"></div></div>
-          ${!done ? html `<div class="next-shot">다음 촬영: ${(current === null || current === void 0 ? void 0 : current.how) || (current === null || current === void 0 ? void 0 : current.target) || ''}</div>` : ''}
-          <div class="slot-grid">
-            ${shots.map((s, i) => html `
-                <div class="slot" @click=${() => this._openPhotoPicker(i)}>
-                  ${this.photos[i]
-            ? html `<img src=${this.photos[i].url} alt=${s.target} />`
-            : html `<md-icon>add_a_photo</md-icon>${s.target}`}
+          <div class="progress-bar"><div style="width: ${total ? (uploaded / total) * 100 : 0}%"></div></div>
+          ${shots.map((s, i) => {
+            const set = this.sets[i];
+            return html `
+              <div class="set-card" ?uploaded=${!!set} @click=${() => !set && this._openSetPicker(i)}>
+                <md-icon>${set ? 'check_circle' : 'video_file'}</md-icon>
+                <div class="set-main">
+                  <b>촬영 ${s.shot_no || i + 1} · ${s.target}</b>
+                  ${set
+                ? html `세트 업로드 완료${set.technique ? ` (${set.technique})` : ''}
+                        ${set.warnings.map(w => html `<div class="set-warn">⚠ ${w}</div>`)}`
+                : html `탭해서 파일 3개(video.mov·poses.jsonl·meta.json)를 한 번에 선택`}
                 </div>
-              `)}
-          </div>
+                ${set
+                ? html `<button
+                        class="text-button"
+                        @click=${(e) => {
+                    e.stopPropagation();
+                    this._openSetPicker(i);
+                }}
+                      >
+                        교체
+                      </button>`
+                : ''}
+              </div>
+            `;
+        })}
         </div>
 
-        <button class="primary-button" ?disabled=${taken === 0} @click=${() => this._runInspection()}>
-          사진 선택 ${taken ? `(${taken}/${total})` : ''}
+        <button class="primary-button" ?disabled=${uploaded === 0} @click=${() => this._runInspection()}>
+          AI 자동 판정 실행 ${uploaded ? `(세트 ${uploaded}/${total})` : ''}
         </button>
-        ${taken > 0
-            ? html `
-                <div style="display: flex; justify-content: flex-end;">
-                  <button class="text-button" @click=${this._resetPhotos}>사진 초기화</button>
-                </div>
-              `
-            : ''}
       </div>
     `;
     }
     /* ─── 2단계: 판정 결과 화면 ─── */
+    /* 항목 그룹: auto(판정완료) / recapture(재촬영) / measure(기준값 입력) / manual(AI 미지원·오류) */
+    _groupOf(item) {
+        if (item.verdict === 'pass' || item.verdict === 'fail')
+            return 'auto';
+        if (item.verdict === 'hold')
+            return 'recapture';
+        if (item.verdict === 'pending' && item.pending_reason === 'measure')
+            return 'measure';
+        return 'manual';
+    }
+    /* verdict → 화면 라벨 (pending은 pending_reason으로 세분) */
+    _verdictLabel(item) {
+        if (item.verdict === 'pending') {
+            return item.pending_reason === 'measure' ? '기준값 입력 필요' : 'AI 미지원';
+        }
+        return VERDICT_LABEL[item.verdict] || item.verdict;
+    }
     _renderResult() {
         const items = this._sortedItems();
-        const autoItems = items.filter(it => it.verdict === 'pass' || it.verdict === 'fail');
-        const moreItems = items.filter(it => it.verdict !== 'pass' && it.verdict !== 'fail');
-        // 클릭한 항목의 used_images만 표시 (선택 없으면 전체 항목 합집합). used_images는 전체 사진 기준 1-based
+        const autoItems = items.filter(it => this._groupOf(it) === 'auto');
+        const recaptureItems = items.filter(it => this._groupOf(it) === 'recapture');
+        const measureItems = items.filter(it => this._groupOf(it) === 'measure');
+        const manualItems = items.filter(it => this._groupOf(it) === 'manual');
+        const moreCount = recaptureItems.length + measureItems.length + manualItems.length;
+        // 클릭한 항목의 used_images만 표시 (선택 없으면 전체 항목 합집합). used_images는 전체 프레임 기준 1-based
         const focusItems = this.selectedItem ? [this.selectedItem] : items;
         const usedNos = new Set();
         for (const it of focusItems)
@@ -188,16 +283,17 @@ let BuildingInspectionAiMeasurement = class BuildingInspectionAiMeasurement exte
                 usedNos.add(n);
         const usedPhotos = this.photos.map((photo, i) => ({ photo, no: i + 1 })).filter(x => usedNos.has(x.no));
         const mainPhoto = usedPhotos[this.mainPhotoIndex];
+        let no = 0;
         return html `
       <div class="result-body">
         <div class="photo-pane">
-          <div class="caption">판정에 사용된 사진</div>
-          <div class="photo-main">${mainPhoto ? html `<img src=${mainPhoto.photo.url} alt="현장 사진" />` : ''}</div>
+          <div class="caption">판정에 사용된 프레임 (동영상에서 추출)</div>
+          <div class="photo-main">${mainPhoto ? html `<img src=${mainPhoto.photo.url} alt="현장 프레임" />` : ''}</div>
           <div class="photo-thumbs">
             ${usedPhotos.map((x, i) => html `
                 <img
                   src=${x.photo.url}
-                  alt="사진 ${x.no}"
+                  alt="프레임 ${x.no}"
                   ?selected=${i === this.mainPhotoIndex}
                   @click=${() => (this.mainPhotoIndex = i)}
                 />
@@ -207,19 +303,36 @@ let BuildingInspectionAiMeasurement = class BuildingInspectionAiMeasurement exte
 
         <div class="items-pane">
           <div class="summary-banner">
-            적용 항목 ${items.length}개 · 자동 판정 ${autoItems.length}개 · 추가 촬영 ${moreItems.length}개
+            적용 항목 ${items.length}개 · 자동 판정 ${autoItems.length}개 · 추가 작업 ${moreCount}개
           </div>
 
           ${autoItems.length
             ? html `
                   <div class="group-title">자동 판정 완료 (${autoItems.length})</div>
-                  ${autoItems.map((it, i) => this._renderItemCard(it, i + 1))}
+                  ${autoItems.map(it => this._renderItemCard(it, ++no))}
                 `
             : ''}
-          ${moreItems.length
+          ${moreCount
             ? html `
-                  <div class="group-title">추가 촬영 필요 (${moreItems.length} 남음)</div>
-                  ${moreItems.map((it, i) => this._renderItemCard(it, i + 1))}
+                  <div class="group-title">추가 작업 필요 (${moreCount} 남음)</div>
+                  ${recaptureItems.length
+                ? html `
+                          <div class="group-subtitle">재촬영 필요 (${recaptureItems.length})</div>
+                          ${recaptureItems.map(it => this._renderItemCard(it, ++no))}
+                        `
+                : ''}
+                  ${measureItems.length
+                ? html `
+                          <div class="group-subtitle">기준값 입력 필요 — 3D 계측 (${measureItems.length})</div>
+                          ${measureItems.map(it => this._renderItemCard(it, ++no))}
+                        `
+                : ''}
+                  ${manualItems.length
+                ? html `
+                          <div class="group-subtitle">AI 미지원 — 감리자 수동 확인 (${manualItems.length})</div>
+                          ${manualItems.map(it => this._renderItemCard(it, ++no))}
+                        `
+                : ''}
                 `
             : ''}
 
@@ -231,26 +344,32 @@ let BuildingInspectionAiMeasurement = class BuildingInspectionAiMeasurement exte
     `;
     }
     _renderItemCard(item, no) {
-        var _a;
-        const auto = item.verdict === 'pass' || item.verdict === 'fail';
+        var _a, _b, _c;
+        const group = this._groupOf(item);
+        // 측정 완료 항목은 summary(측정 한 줄 설명)를 자르지 않고 그대로, VLM 항목은 관찰/사유
+        const desc = item.measurements && item.reason
+            ? item.reason
+            : item.observation
+                ? `관찰: ${item.observation}`
+                : item.reason || ((_a = item.measure) === null || _a === void 0 ? void 0 : _a.question) || '';
         return html `
-      <div class="item-card" ?selected=${((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.item_id) === item.item_id} @click=${() => this._openDetail(item)}>
+      <div class="item-card" ?selected=${((_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.item_id) === item.item_id} @click=${() => this._openDetail(item)}>
         <div class="item-no">${no}</div>
         <div class="item-main">
           <div class="item-name">${item.text}</div>
           <div>
             <span class="chip">${ROUTING_LABEL[item.routing] || item.routing}</span>
-            <span class="chip-verdict">${VERDICT_LABEL[item.verdict] || item.verdict}</span>
+            <span class="chip-verdict">${this._verdictLabel(item)}</span>
           </div>
-          <div class="item-desc">${item.observation ? `관찰: ${item.observation}` : item.reason || ''}</div>
+          <div class="item-desc">${desc}</div>
         </div>
-        ${auto
+        ${group === 'auto'
             ? html `
                 <div class="badge" ?pass=${item.verdict === 'pass'} ?fail=${item.verdict === 'fail'}>
                   ${VERDICT_LABEL[item.verdict]}
                 </div>
               `
-            : item.verdict === 'hold'
+            : group === 'recapture'
                 ? html `
                   <button
                     class="capture-button"
@@ -262,16 +381,30 @@ let BuildingInspectionAiMeasurement = class BuildingInspectionAiMeasurement exte
                     촬영하기
                   </button>
                 `
-                : html `<div class="badge" etc>${VERDICT_LABEL[item.verdict] || item.verdict}</div>`}
+                : group === 'measure'
+                    ? html `
+                    <button
+                      class="measure-button"
+                      @click=${(e) => {
+                        e.stopPropagation();
+                        this._openMeasure(item);
+                    }}
+                    >
+                      ${((_c = item.measure) === null || _c === void 0 ? void 0 : _c.next_action) === 'select_and_input' ? '측정 진행' : '기준값 입력'}
+                    </button>
+                  `
+                    : html `<div class="badge" etc>${this._verdictLabel(item)}</div>`}
       </div>
     `;
     }
-    /* ─── 우측 패널: 상세 / 재촬영 / 리포트 ─── */
+    /* ─── 우측 패널: 상세 / 재촬영 / 측정 / 리포트 ─── */
     _renderSidePane() {
         if (this.panel === 'detail' && this.selectedItem)
             return this._renderDetailPane(this.selectedItem);
         if (this.panel === 'recapture' && this.selectedItem)
             return this._renderRecapturePane(this.selectedItem);
+        if (this.panel === 'measure' && this.selectedItem)
+            return this._renderMeasurePane(this.selectedItem);
         if (this.panel === 'report')
             return this._renderReportPane();
         return '';
@@ -279,7 +412,8 @@ let BuildingInspectionAiMeasurement = class BuildingInspectionAiMeasurement exte
     _renderDetailPane(item) {
         const auto = item.verdict === 'pass' || item.verdict === 'fail';
         const routingLabel = ROUTING_LABEL[item.routing] || item.routing;
-        const verdictLabel = VERDICT_LABEL[item.verdict] || item.verdict;
+        const verdictLabel = this._verdictLabel(item);
+        const measured = !!item.measurements; // 측정 모델로 판정된 항목 — 신뢰도는 확률이 없어 비운다
         return html `
       <div class="side-pane">
         <div class="detail-header">
@@ -296,7 +430,7 @@ let BuildingInspectionAiMeasurement = class BuildingInspectionAiMeasurement exte
               ${verdictLabel || '-'}
             </span>
           </div>
-          ${item.confidence != null
+          ${!measured && item.confidence != null
             ? html `
                   <div class="kv">
                     <label>신뢰도</label>
@@ -306,7 +440,7 @@ let BuildingInspectionAiMeasurement = class BuildingInspectionAiMeasurement exte
             : ''}
           <div class="kv">
             <label>처리</label>
-            <span>${ROUTING_LABEL[item.routing] || item.routing || '-'}</span>
+            <span>${routingLabel || '-'}</span>
           </div>
         </div>
 
@@ -317,54 +451,187 @@ let BuildingInspectionAiMeasurement = class BuildingInspectionAiMeasurement exte
           </div>
         </div>
 
+        ${item.image_data ? html `<img class="evidence-img" src=${item.image_data} alt="측정 근거 이미지" />` : ''}
+
         <button class="text-button" @click=${this._closePanel}>닫기</button>
       </div>
     `;
     }
     _renderRecapturePane(item) {
         var _a;
-        const shots = ((_a = item.recapture_shots) === null || _a === void 0 ? void 0 : _a.length)
-            ? item.recapture_shots
-            : [{ target: '추가 사진', how: '항목이 잘 보이도록 촬영해주세요.' }];
-        const taken = this.photos.length - this.recaptureBase;
-        const total = shots.length;
+        const shot = (_a = item.recapture_shots) === null || _a === void 0 ? void 0 : _a[0];
         return html `
       <div class="side-pane">
         <h3>${item.text}</h3>
         <div class="why-box">
-          <b>왜 추가 촬영이 필요한가요?</b><br />
-          ${item.reason || '판정을 위해 추가 사진이 필요합니다.'}
-        </div>
-        <div>
-          <h4 style="margin: 0 0 8px 0; font-size: 13px;">촬영 가이드</h4>
-          <ul
-            style="margin: 0; padding-left: 18px; font-size: 12px; color: #555; display: flex; flex-direction: column; gap: 6px;"
-          >
-            ${shots.map(s => html `<li>${s.target} — ${s.how}</li>`)}
-          </ul>
+          <b>왜 재촬영이 필요한가요?</b><br />
+          ${item.reason || '판정을 위해 추가 촬영이 필요합니다.'}
         </div>
-        <div class="progress-row">
-          <span>사진 진행</span>
-          <span>${Math.min(taken, total)} / ${total}</span>
+        ${shot
+            ? html `
+                <div>
+                  <h4 style="margin: 0 0 8px 0; font-size: 13px;">촬영 가이드</h4>
+                  <div style="font-size: 12px; color: #555;">${shot.target} — ${shot.how}</div>
+                </div>
+              `
+            : ''}
+        <div class="set-card" ?uploaded=${!!this.recaptureSet} @click=${() => this._openSetPicker(-1)}>
+          <md-icon>${this.recaptureSet ? 'check_circle' : 'video_file'}</md-icon>
+          <div class="set-main">
+            <b>재촬영 세트</b>
+            ${this.recaptureSet
+            ? html `세트 업로드 완료 ${this.recaptureSet.warnings.map(w => html `<div class="set-warn">⚠ ${w}</div>`)}`
+            : html `앱으로 재촬영 후 파일 3개를 한 번에 선택`}
+          </div>
         </div>
-        <div class="progress-bar"><div style="width: ${total ? Math.min(taken / total, 1) * 100 : 0}%"></div></div>
-        <div class="slot-grid">
-          ${shots.map((s, i) => {
-            const photo = this.photos[this.recaptureBase + i];
+        ${this.recaptureSet ? html `<button class="primary-button" @click=${() => this._runInspection()}>재검사 실행</button>` : ''}
+        <button class="text-button" @click=${this._closePanel}>닫기</button>
+      </div>
+    `;
+    }
+    /* ─── 측정 패널 (④ 철근 배근 길이 / ⑤ 기둥·벽체 두께) ─── */
+    /* operator_inputs 정의 기반 숫자/텍스트 입력 렌더 (slot·click·n_frames는 별도 UI/고정) */
+    _renderMeasureFields(item) {
+        var _a;
+        const defs = ((_a = item.measure) === null || _a === void 0 ? void 0 : _a.operator_inputs) || [];
+        const fields = [];
+        for (const d of defs) {
+            if (d.key === 'n_frames' || d.key === 'slot' || d.key === 'click')
+                continue;
+            if (d.fields) {
+                // 복합 입력(targets 등): 하위 필드를 각각 입력으로 펼친다
+                for (const [k, desc] of Object.entries(d.fields)) {
+                    if (k === 'name')
+                        continue; // 부재명은 검사 항목명으로 자동 지정
+                    fields.push({ key: k, label: FIELD_LABEL[k] || k, desc: String(desc) });
+                }
+            }
+            else {
+                fields.push({ key: d.key, label: FIELD_LABEL[d.key] || d.key, desc: d.desc, def: d.default });
+            }
+        }
+        return fields.map(f => {
+            var _a;
             return html `
-              <div class="slot" @click=${() => this._openPhotoPicker(this.recaptureBase + i)}>
-                ${photo ? html `<img src=${photo.url} alt=${s.target} />` : html `<md-icon>add_a_photo</md-icon>${s.target}`}
-              </div>
-            `;
-        })}
+        <div class="measure-field">
+          <label title=${f.desc || ''}>${f.label}${f.desc ? html ` <span style="color:#aaa">— ${f.desc}</span>` : ''}</label>
+          <input
+            type="number"
+            inputmode="decimal"
+            .value=${(_a = this.measureInputs[f.key]) !== null && _a !== void 0 ? _a : (f.def != null ? String(f.def) : '')}
+            placeholder="도면값"
+            @input=${(e) => {
+                this.measureInputs = Object.assign(Object.assign({}, this.measureInputs), { [f.key]: e.target.value });
+            }}
+          />
+        </div>
+      `;
+        });
+    }
+    _renderMeasurePane(item) {
+        const measure = item.measure || {};
+        const isThickness = measure.next_action === 'select_and_input';
+        const setOptions = this.uploadedSets;
+        const done = !!this.measureResult;
+        return html `
+      <div class="side-pane">
+        <h3>${item.text}</h3>
+        <div class="detail-header">
+          <span class="chip">3D 계측</span>
+          <span style="font-size: 12px; color: #777;">${measure.name || ''} (${measure.status || ''})</span>
         </div>
-        ${taken > 0
-            ? html `<button class="primary-button" @click=${() => this._runInspection()}>재검사 실행 (${taken}장)</button>`
+        ${measure.capture_guide ? html `<div class="why-box">📷 ${measure.capture_guide}</div>` : ''}
+        <img
+          class="capture-guide-img"
+          style="background: #fff; border: 1px solid #eee; padding: 6px;"
+          src=${isThickness ? pictoMemberImg : pictoRebarImg}
+          alt="촬영 안내"
+        />
+
+        ${setOptions.length > 1
+            ? html `
+                <div class="measure-field">
+                  <label>측정할 촬영 세트</label>
+                  <select
+                    .value=${String(this.measureSetIndex)}
+                    @change=${(e) => this._onMeasureSetChange(parseInt(e.target.value))}
+                  >
+                    ${setOptions.map((s, i) => html `<option value=${i} ?selected=${i === this.measureSetIndex}>
+                          세트 ${i + 1}${s.technique ? ` (${s.technique})` : ''}
+                        </option>`)}
+                  </select>
+                </div>
+              `
+            : ''}
+        ${isThickness ? this._renderThicknessPicker() : ''} ${this._renderMeasureFields(item)}
+        ${this.measureRunning
+            ? html `
+                <div class="measure-msg">
+                  <md-circular-progress indeterminate></md-circular-progress>
+                  <span>${this.measureMsg || '측정 중...'}</span>
+                </div>
+              `
+            : html `
+                <button
+                  class="primary-button"
+                  ?disabled=${isThickness && (this.thicknessSlot === null || !this.thicknessClick)}
+                  @click=${() => (isThickness ? this._runThicknessMeasure(item) : this._runRebarMeasure(item))}
+                >
+                  ${done ? '다시 측정' : isThickness ? '측정 실행 (10~20초)' : '측정 시작 (약 45초)'}
+                </button>
+              `}
+        ${done
+            ? html `
+                ${this.measureResult.summary || this.measureResult.summary_line || this.measureResult.headline
+                ? html `<div class="measure-summary">
+                        ${this.measureResult.summary || this.measureResult.summary_line || this.measureResult.headline}
+                      </div>`
+                : ''}
+                ${this.measureImageUrl ? html `<img class="evidence-img" src=${this.measureImageUrl} alt="측정 근거" />` : ''}
+                ${this.canMutate
+                ? html `<button class="primary-button" @click=${() => this._applyMeasurement(item)}>판정 확정</button>`
+                : ''}
+              `
             : ''}
+
         <button class="text-button" @click=${this._closePanel}>닫기</button>
       </div>
     `;
     }
+    /* ⑤ 두께: 프레임 선택 + 측정면 클릭 (자동 면 선택은 정확도가 낮아 클릭 단계 생략 불가) */
+    _renderThicknessPicker() {
+        return html `
+      <div class="measure-field">
+        <label>① 모서리가 잘 보이는 프레임을 고르세요</label>
+        <div class="frame-strip">
+          ${this.thicknessFrames.map(f => html `
+              <img
+                src=${f.thumbUrl || ''}
+                alt="프레임 ${f.index}"
+                ?selected=${this.thicknessSlot === f.slot}
+                @click=${() => this._selectThicknessFrame(f.slot)}
+              />
+            `)}
+        </div>
+      </div>
+      ${this.thicknessFrameUrl
+            ? html `
+              <div class="measure-field">
+                <label>② 잴 면의 가운데를 한 번 탭하세요 (모서리·철근 위 말고 <b>면 위</b>)</label>
+                <div class="click-stage">
+                  <img src=${this.thicknessFrameUrl} alt="선택 프레임" @click=${this._onThicknessClick} />
+                  ${this.thicknessClick
+                ? html `<div
+                          class="click-dot"
+                          style="left: ${this.thicknessClick.x * 100}%; top: ${this.thicknessClick.y * 100}%"
+                        ></div>`
+                : ''}
+                </div>
+              </div>
+            `
+            : ''}
+    `;
+    }
     _renderReportPane() {
         var _a;
         const items = this._sortedItems();
@@ -392,7 +659,7 @@ let BuildingInspectionAiMeasurement = class BuildingInspectionAiMeasurement exte
                     ?fail=${it.verdict === 'fail'}
                     ?etc=${it.verdict !== 'pass' && it.verdict !== 'fail'}
                   >
-                    ${VERDICT_LABEL[it.verdict] || it.verdict}
+                    ${this._verdictLabel(it)}
                   </span>
                   <md-icon class="report-caret" ?open=${expanded}>expand_more</md-icon>
                 </div>
@@ -403,7 +670,7 @@ let BuildingInspectionAiMeasurement = class BuildingInspectionAiMeasurement exte
                           ${it.observation ? html `<div>관찰: ${it.observation}</div>` : ''}
                           ${it.reason ? html `<div>판단: ${it.reason}</div>` : ''}
                           ${((_a = it.used_images) === null || _a === void 0 ? void 0 : _a.length)
-                    ? html `<div class="report-used">근거 사진: ${it.used_images.map(n => `#${n}`).join(', ')}</div>`
+                    ? html `<div class="report-used">근거 프레임: ${it.used_images.map(n => `#${n}`).join(', ')}</div>`
                     : ''}
                         </div>
                       `
@@ -412,7 +679,7 @@ let BuildingInspectionAiMeasurement = class BuildingInspectionAiMeasurement exte
             `;
         })}
         </div>
-        <button class="primary-button" @click=${this._registerInspection}>검사 등록</button>
+        ${this.canMutate ? html `<button class="primary-button" @click=${this._registerInspection}>검사 등록</button>` : ''}
         <button class="text-button" @click=${this._closePanel}>닫기</button>
       </div>
     `;
@@ -483,8 +750,8 @@ let BuildingInspectionAiMeasurement = class BuildingInspectionAiMeasurement exte
             return;
         this.project = response.data.project;
     }
-    /* ─── 엔진 호출 ─── */
-    /* 엔진 실행 공통 호출: input(JSON) + 사진 파일들을 multipart로 전송 */
+    /* ─── 서버 호출 공통 ─── */
+    /* 엔진 실행 공통 호출: input(JSON) + 파일들을 multipart로 전송 */
     async _callEngine(input, files = []) {
         const form = new FormData();
         form.append('input', JSON.stringify(input));
@@ -502,8 +769,29 @@ let BuildingInspectionAiMeasurement = class BuildingInspectionAiMeasurement exte
         }
         return data.result;
     }
+    /* 측정 서버 호출 (JSON 응답) */
+    async _callMeasure(path, init = {}) {
+        var _a;
+        const response = await fetch(`${MEASURE_BASE_URL}${path}`, Object.assign(Object.assign({}, init), { headers: Object.assign(Object.assign({}, (init.headers || {})), { Authorization: MEASURE_AUTH }) }));
+        const data = await response.json().catch(() => ({}));
+        if (!response.ok) {
+            const msg = ((_a = data === null || data === void 0 ? void 0 : data.errors) === null || _a === void 0 ? void 0 : _a.join('\n')) || (data === null || data === void 0 ? void 0 : data.detail) || (data === null || data === void 0 ? void 0 : data.error) || `측정 서버 오류 (${response.status})`;
+            throw new Error(msg);
+        }
+        return data;
+    }
+    /* 측정 서버 이미지 → blob URL (img src는 인증 헤더를 못 실어서 fetch로 받는다) */
+    async _fetchMeasureImage(path) {
+        const response = await fetch(`${MEASURE_BASE_URL}${path}`, { headers: { Authorization: MEASURE_AUTH } });
+        if (!response.ok)
+            throw new Error(`이미지 수신 실패 (${response.status})`);
+        const url = URL.createObjectURL(await response.blob());
+        this.objectUrls.push(url);
+        return url;
+    }
     /* [1단계] 촬영 가이드 생성 (plan-shots) */
     async _loadShotGuide() {
+        var _a;
         const checklist = this.engineChecklist;
         if (!checklist.length) {
             notify({ message: '체크리스트 항목이 없습니다.', level: 'warn' });
@@ -513,6 +801,7 @@ let BuildingInspectionAiMeasurement = class BuildingInspectionAiMeasurement exte
             this.loading = true;
             this.loadingText = 'AI 촬영 가이드 생성 중...';
             this.guide = await this._callEngine({ action: 'plan-shots', checklist });
+            this.sets = new Array((((_a = this.guide) === null || _a === void 0 ? void 0 : _a.shots) || []).length).fill(null);
         }
         catch (error) {
             console.error('촬영 가이드 생성 실패:', error);
@@ -522,28 +811,122 @@ let BuildingInspectionAiMeasurement = class BuildingInspectionAiMeasurement exte
             this.loading = false;
         }
     }
+    /* ─── 세트 업로드 ─── */
+    _openSetPicker(index) {
+        var _a;
+        this.pendingSetIndex = index;
+        (_a = this.setInputEl) === null || _a === void 0 ? void 0 : _a.click();
+    }
+    async _onSetFilesSelected(event) {
+        const input = event.target;
+        const files = Array.from((input === null || input === void 0 ? void 0 : input.files) || []);
+        input.value = '';
+        const index = this.pendingSetIndex;
+        this.pendingSetIndex = null;
+        if (!files.length || index === null)
+            return;
+        // zip 1개 또는 필수 3파일 검증 (한 번의 선택으로 3개 멀티선택)
+        const isZip = files.length === 1 && /\.zip$/i.test(files[0].name);
+        if (!isZip) {
+            const names = files.map(f => f.name.toLowerCase());
+            const missing = SET_FILES.filter(n => !names.includes(n));
+            if (missing.length) {
+                notify({
+                    message: `세트 파일이 부족합니다. 누락: ${missing.join(', ')} — 촬영 앱이 만든 3개 파일을 한 번에 선택해주세요.`,
+                    level: 'warn'
+                });
+                return;
+            }
+        }
+        try {
+            this.loading = true;
+            this.loadingText = '촬영 세트 업로드 중...';
+            const form = new FormData();
+            for (const f of files)
+                if (isZip || SET_FILES.includes(f.name.toLowerCase()))
+                    form.append('files', f, f.name);
+            const data = await this._callMeasure('/api/sets', { method: 'POST', body: form });
+            const set = {
+                setId: data.set_id,
+                technique: data.technique,
+                label: `세트 ${data.set_id}`,
+                warnings: data.warnings || []
+            };
+            if (index === -1) {
+                this.recaptureSet = set;
+            }
+            else {
+                const next = [...this.sets];
+                next[index] = set;
+                this.sets = next;
+            }
+            for (const w of set.warnings)
+                notify({ message: `업로드 경고: ${w}`, level: 'warn' });
+        }
+        catch (error) {
+            console.error('세트 업로드 실패:', error);
+            notify({ message: error.message, level: 'error' });
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    /* 세트의 대표 3프레임(vlm)을 받아 File 목록으로 (시간순 유지) */
+    async _fetchVlmFrames(set, setIndex) {
+        const data = await this._callMeasure(`/api/sets/${set.setId}/vlm-frames`);
+        const out = [];
+        for (const f of data.frames || []) {
+            const response = await fetch(`${MEASURE_BASE_URL}${f.url}`, { headers: { Authorization: MEASURE_AUTH } });
+            if (!response.ok)
+                throw new Error(`프레임 수신 실패 (${response.status})`);
+            const blob = await response.blob();
+            const file = new File([blob], `set${setIndex + 1}_${f.name}`, { type: 'image/jpeg' });
+            const url = URL.createObjectURL(file);
+            this.objectUrls.push(url);
+            out.push({ file, url, setIndex });
+        }
+        return out;
+    }
     /* [2단계] 자동 판정 실행 (inspect)
-     * - 최초 판정: 전체 사진 + 전체 체크리스트
-     * - 재검사(재촬영 패널): 이번에 새로 찍은 사진만 + 해당 항목만 재판정 후 결과 병합 */
+     * - 최초 판정: 업로드된 모든 세트의 대표 3프레임 + 전체 체크리스트 (input_kind=video_frames)
+     * - 재검사(재촬영 패널): 새 세트의 3프레임만 + 해당 항목만 재판정 후 결과 병합 */
     async _runInspection() {
         const isRecapture = this.panel === 'recapture' && !!this.selectedItem;
-        // 재검사는 recaptureBase 이후에 찍은 사진만 전송
-        const files = (isRecapture ? this.photos.slice(this.recaptureBase) : this.photos).map(p => p.file);
-        if (!files.length) {
-            notify({ message: '촬영된 사진이 없습니다.', level: 'warn' });
-            return;
-        }
-        const checklist = isRecapture
-            ? this.engineChecklist.filter(c => c.item_id === this.selectedItem.item_id)
-            : this.engineChecklist;
         try {
             this.loading = true;
+            this.loadingText = '동영상 프레임 추출 중...';
+            let newPhotos = [];
+            if (isRecapture) {
+                if (!this.recaptureSet) {
+                    notify({ message: '재촬영 세트를 먼저 업로드해주세요.', level: 'warn' });
+                    return;
+                }
+                this.recaptureBase = this.photos.length;
+                newPhotos = await this._fetchVlmFrames(this.recaptureSet, this.sets.length);
+            }
+            else {
+                const sets = this.uploadedSets;
+                if (!sets.length) {
+                    notify({ message: '업로드된 촬영 세트가 없습니다.', level: 'warn' });
+                    return;
+                }
+                for (let i = 0; i < sets.length; i++) {
+                    newPhotos = [...newPhotos, ...(await this._fetchVlmFrames(sets[i], i))];
+                }
+            }
+            const files = newPhotos.map(p => p.file);
+            const checklist = isRecapture
+                ? this.engineChecklist.filter(c => c.item_id === this.selectedItem.item_id)
+                : this.engineChecklist;
             this.loadingText = 'AI 자동 판정 중... (최대 1~2분 소요)';
-            const result = await this._callEngine({ action: 'inspect', checklist }, files);
+            const result = await this._callEngine({ action: 'inspect', checklist, input_kind: 'video_frames' }, files);
             if (isRecapture) {
-                this._mergeRecaptureResult(result);
+                this.photos = [...this.photos, ...newPhotos];
+                this._mergeItems((result === null || result === void 0 ? void 0 : result.items_sorted) || (result === null || result === void 0 ? void 0 : result.items) || [], this.recaptureBase);
+                this.recaptureSet = null;
             }
             else {
+                this.photos = newPhotos;
                 this.result = result;
             }
             this.panel = 'none';
@@ -558,83 +941,96 @@ let BuildingInspectionAiMeasurement = class BuildingInspectionAiMeasurement exte
             this.loading = false;
         }
     }
-    /* 재검사(부분 전송) 결과를 기존 전체 결과에 병합
-     * - used_images는 전송한 부분집합 기준 1-based → 전체 사진 인덱스로 보정(recaptureBase 가산)
-     * - 해당 항목만 교체 후 summary 재계산 */
-    _mergeRecaptureResult(result) {
+    /* 부분 재판정/측정 확정 결과를 기존 전체 결과에 병합하고 summary 재계산
+     * - usedImageBase: used_images(부분집합 1-based) → 전체 프레임 인덱스 보정값 */
+    _mergeItems(updatedItems, usedImageBase = 0) {
         var _a, _b;
-        const base = this.recaptureBase;
-        const updated = ((result === null || result === void 0 ? void 0 : result.items_sorted) || (result === null || result === void 0 ? void 0 : result.items) || []).map((it) => (Object.assign(Object.assign({}, it), { used_images: (it.used_images || []).map((n) => n + base) })));
+        const updated = updatedItems.map((it) => (Object.assign(Object.assign({}, it), { used_images: (it.used_images || []).map((n) => n + usedImageBase) })));
         const byId = new Map(updated.map((it) => [it.item_id, it]));
         const replace = (arr) => (arr || []).map(it => byId.get(it.item_id) || it);
         const items = replace((_a = this.result) === null || _a === void 0 ? void 0 : _a.items);
         const itemsSorted = ((_b = this.result) === null || _b === void 0 ? void 0 : _b.items_sorted) ? replace(this.result.items_sorted) : undefined;
-        const summary = { pass: 0, fail: 0, hold: 0, pending: 0, error: 0 };
-        for (const it of itemsSorted || items)
+        const summary = { pass: 0, fail: 0, hold: 0, pending: 0, error: 0, measure: 0 };
+        for (const it of itemsSorted || items) {
             summary[it.verdict] = (summary[it.verdict] || 0) + 1;
-        this.result = Object.assign(Object.assign(Object.assign(Object.assign({}, this.result), { items }), (itemsSorted ? { items_sorted: itemsSorted } : {})), { summary });
-    }
-    /* ─── 사진 선택 ─── */
-    /* 슬롯 클릭 → 사진 선택기 열기 (모바일: 촬영/앨범 선택 팝업, 채워진 슬롯이면 교체) */
-    _openPhotoPicker(slotIndex = null) {
-        var _a;
-        this.pendingSlotIndex = slotIndex;
-        (_a = this.photoInputEl) === null || _a === void 0 ? void 0 : _a.click();
-    }
-    _onPhotosSelected(event) {
-        const input = event.target;
-        const files = Array.from((input === null || input === void 0 ? void 0 : input.files) || []).filter(f => f.type.startsWith('image/') || /\.heic$/i.test(f.name));
-        input.value = '';
-        const slotIndex = this.pendingSlotIndex;
-        this.pendingSlotIndex = null;
-        if (!files.length)
-            return;
-        // 채워진 슬롯을 클릭한 경우 → 해당 사진 교체 (첫 파일만 사용)
-        if (slotIndex !== null && slotIndex < this.photos.length) {
-            URL.revokeObjectURL(this.photos[slotIndex].url);
-            const next = [...this.photos];
-            next[slotIndex] = { file: files[0], url: URL.createObjectURL(files[0]) };
-            this.photos = next;
-            return;
-        }
-        // 빈 슬롯/추가 → 순서대로 뒤에 추가
-        // 엔진 제한은 요청(호출)당 MAX_IMAGES장. 재검사는 새로 찍은 사진만 별도 전송되므로
-        // 누적 합계가 아니라 이번 회차(최초=전체, 재검사=recaptureBase 이후) 기준으로만 제한한다.
-        const batchBase = this.panel === 'recapture' ? this.recaptureBase : 0;
-        const cap = batchBase + MAX_IMAGES;
-        if (this.photos.length + files.length > cap) {
-            notify({ message: `사진은 회차당 최대 ${MAX_IMAGES}장까지 사용할 수 있습니다.`, level: 'warn' });
-            files.length = Math.max(0, cap - this.photos.length);
-            if (!files.length)
-                return;
+            if (it.verdict === 'pending' && it.pending_reason === 'measure')
+                summary.measure += 1;
         }
-        this.photos = [...this.photos, ...files.map(file => ({ file, url: URL.createObjectURL(file) }))];
+        summary.total = (itemsSorted || items).length;
+        this.result = Object.assign(Object.assign(Object.assign(Object.assign({}, this.result), { items }), (itemsSorted ? { items_sorted: itemsSorted } : {})), { summary });
     }
     _resetAll() {
-        this._resetPhotos();
+        this.objectUrls.forEach(u => URL.revokeObjectURL(u));
+        this.objectUrls = [];
         this.guide = null;
+        this.sets = [];
+        this.photos = [];
         this.result = null;
         this.panel = 'none';
         this.selectedItem = null;
         this.mainPhotoIndex = 0;
         this.recaptureBase = 0;
+        this.recaptureSet = null;
+        this._resetMeasureState();
+    }
+    _resetMeasureState() {
+        this.measureInputs = {};
+        this.measureRunning = false;
+        this.measureMsg = '';
+        this.measureResult = null;
+        this.measureImageUrl = '';
+        this.thicknessFrames = [];
+        this.thicknessSlot = null;
+        this.thicknessFrameUrl = '';
+        this.thicknessClick = null;
     }
     /* ─── 패널 열기/닫기 ─── */
     _openDetail(item) {
-        // 보류(hold)는 추가 촬영이 필요한 케이스 → 상세 대신 추가 촬영 UI를 바로 표시
-        if (item.verdict === 'hold') {
+        const group = this._groupOf(item);
+        // 재촬영/측정 항목은 상세 대신 해당 작업 패널을 바로 표시
+        if (group === 'recapture') {
             this._openRecapture(item);
             return;
         }
+        if (group === 'measure') {
+            this._openMeasure(item);
+            return;
+        }
         this.selectedItem = item;
-        this.mainPhotoIndex = 0; // 선택 항목의 첫 사용 사진부터 표시
+        this.mainPhotoIndex = 0; // 선택 항목의 첫 사용 프레임부터 표시
         this.panel = 'detail';
     }
     _openRecapture(item) {
         this.selectedItem = item;
-        this.recaptureBase = this.photos.length;
+        this.recaptureSet = null;
         this.panel = 'recapture';
     }
+    async _openMeasure(item) {
+        var _a, _b, _c;
+        this.selectedItem = item;
+        this._resetMeasureState();
+        this.panel = 'measure';
+        // 촬영 기술이 맞는 세트를 기본 선택 (④=04_cover, ⑤=05_thickness)
+        const wantTech = ((_b = (_a = item.measure) === null || _a === void 0 ? void 0 : _a.model_id) === null || _b === void 0 ? void 0 : _b.startsWith('rebar')) ? '04_cover' : '05_thickness';
+        const sets = this.uploadedSets;
+        const found = sets.findIndex(s => s.technique === wantTech);
+        this.measureSetIndex = found >= 0 ? found : 0;
+        if (((_c = item.measure) === null || _c === void 0 ? void 0 : _c.next_action) === 'select_and_input') {
+            await this._loadThicknessFrames();
+        }
+    }
+    async _onMeasureSetChange(index) {
+        var _a, _b;
+        this.measureSetIndex = index;
+        this.measureResult = null;
+        this.measureImageUrl = '';
+        if (((_b = (_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.measure) === null || _b === void 0 ? void 0 : _b.next_action) === 'select_and_input') {
+            this.thicknessSlot = null;
+            this.thicknessFrameUrl = '';
+            this.thicknessClick = null;
+            await this._loadThicknessFrames();
+        }
+    }
     /* 종합 리포트 항목 펼치기/접기 (한 번에 하나만 펼침) */
     _toggleReportItem(id) {
         this.expandedReportId = this.expandedReportId === id ? null : id;
@@ -643,7 +1039,203 @@ let BuildingInspectionAiMeasurement = class BuildingInspectionAiMeasurement exte
         var _a, _b;
         return ((_a = this.result) === null || _a === void 0 ? void 0 : _a.items_sorted) || ((_b = this.result) === null || _b === void 0 ? void 0 : _b.items) || [];
     }
-    /* ─── [6단계] 검사 등록: 감리자 판정 자동 반영 + AI판단 근거 첨부 ─── */
+    /* ─── ④ 철근 배근 길이 측정 (비동기 job + 진행률 폴링) ─── */
+    async _runRebarMeasure(item) {
+        const set = this.uploadedSets[this.measureSetIndex];
+        if (!set) {
+            notify({ message: '측정할 촬영 세트가 없습니다.', level: 'warn' });
+            return;
+        }
+        const memberDim = parseFloat(this.measureInputs.member_dim_mm);
+        const coverSpec = parseFloat(this.measureInputs.cover_spec_mm);
+        if (!memberDim || !coverSpec) {
+            notify({ message: '설계 단면 치수와 기준 피복두께를 입력해주세요. (도면값)', level: 'warn' });
+            return;
+        }
+        try {
+            this.measureRunning = true;
+            this.measureMsg = '측정 시작...';
+            this.measureResult = null;
+            this.measureImageUrl = '';
+            const { job } = await this._callMeasure('/api/rebar/measure', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    set_id: set.setId,
+                    targets: [{ name: item.text || '측정 대상', member_dim_mm: memberDim, cover_spec_mm: coverSpec }]
+                })
+            });
+            // 진행률 폴링 — msg는 서버가 주는 한국어 문구 그대로 표시
+            let status;
+            do {
+                await new Promise(r => setTimeout(r, 1500));
+                status = await this._callMeasure(`/api/job/${job}`);
+                this.measureMsg = status.msg || '측정 중...';
+            } while (status.state !== 'done' && this.panel === 'measure');
+            if (this.panel !== 'measure')
+                return; // 패널을 닫았으면 결과 무시
+            const r = status.result || {};
+            if (!r.ok) {
+                notify({ message: r.why || '측정에 실패했습니다.', level: 'error' });
+                // 실패 결과도 확정 가능(엔진이 hold로 변환) — 결과는 보관하되 이미지 없음
+                this.measureResult = r;
+                return;
+            }
+            this.measureResult = r;
+            // 측정에 쓴 프레임 중 가운데 프레임에 측정선 오버레이
+            const frames = r.frames_used || [];
+            const overlayIdx = frames.length ? frames[Math.floor(frames.length / 2)] : 0;
+            try {
+                this.measureImageUrl = await this._fetchMeasureImage(`/api/rebar/overlay/${job}/${overlayIdx}?w=1280`);
+            }
+            catch (e) {
+                console.warn('오버레이 수신 실패:', e);
+            }
+        }
+        catch (error) {
+            console.error('철근 측정 실패:', error);
+            notify({ message: error.message, level: 'error' });
+        }
+        finally {
+            this.measureRunning = false;
+            this.measureMsg = '';
+        }
+    }
+    /* ─── ⑤ 기둥·벽체 두께 측정 (프레임 선택 + 면 클릭, 동기) ─── */
+    async _loadThicknessFrames() {
+        const set = this.uploadedSets[this.measureSetIndex];
+        if (!set)
+            return;
+        try {
+            this.measureRunning = true;
+            this.measureMsg = '스윕에서 프레임 뽑는 중... (첫 호출은 10초쯤)';
+            const data = await this._callMeasure(`/api/thickness/frames/${set.setId}`);
+            const frames = (data.frames || []);
+            // 썸네일은 인증 때문에 fetch로 받아 blob URL로
+            const withThumbs = [];
+            for (const f of frames) {
+                try {
+                    const thumbUrl = await this._fetchMeasureImage(`/api/thickness/frame/${set.setId}/${f.slot}?thumb=1`);
+                    withThumbs.push(Object.assign(Object.assign({}, f), { thumbUrl }));
+                }
+                catch (_a) {
+                    withThumbs.push(f);
+                }
+            }
+            this.thicknessFrames = withThumbs;
+            if (withThumbs.length)
+                await this._selectThicknessFrame(withThumbs[Math.floor(withThumbs.length / 2)].slot);
+        }
+        catch (error) {
+            console.error('프레임 목록 실패:', error);
+            notify({ message: error.message, level: 'error' });
+        }
+        finally {
+            this.measureRunning = false;
+            this.measureMsg = '';
+        }
+    }
+    async _selectThicknessFrame(slot) {
+        const set = this.uploadedSets[this.measureSetIndex];
+        if (!set)
+            return;
+        this.thicknessSlot = slot;
+        this.thicknessClick = null;
+        try {
+            this.thicknessFrameUrl = await this._fetchMeasureImage(`/api/thickness/frame/${set.setId}/${slot}`);
+        }
+        catch (error) {
+            notify({ message: error.message, level: 'error' });
+        }
+    }
+    async _runThicknessMeasure(item) {
+        const set = this.uploadedSets[this.measureSetIndex];
+        if (!set || this.thicknessSlot === null || !this.thicknessClick) {
+            notify({ message: '프레임을 고르고 잴 면을 탭해주세요.', level: 'warn' });
+            return;
+        }
+        try {
+            this.measureRunning = true;
+            this.measureMsg = '측정 중... (이 프레임 첫 측정이면 10~20초)';
+            this.measureResult = null;
+            this.measureImageUrl = '';
+            const form = new FormData();
+            form.append('set_id', set.setId);
+            form.append('slot', String(this.thicknessSlot));
+            form.append('x', String(this.thicknessClick.x));
+            form.append('y', String(this.thicknessClick.y));
+            if (this.measureInputs.design_mm)
+                form.append('design_mm', this.measureInputs.design_mm);
+            if (this.measureInputs.tol_mm)
+                form.append('tol_mm', this.measureInputs.tol_mm);
+            const r = await this._callMeasure('/api/thickness/measure', { method: 'POST', body: form });
+            this.measureResult = r;
+            if (r.image_data)
+                this.measureImageUrl = r.image_data;
+            if (!r.ok)
+                notify({ message: r.summary || r.headline || '측정에 실패했습니다.', level: 'warn' });
+        }
+        catch (error) {
+            console.error('두께 측정 실패:', error);
+            notify({ message: error.message, level: 'error' });
+        }
+        finally {
+            this.measureRunning = false;
+            this.measureMsg = '';
+        }
+    }
+    /* ─── 측정 결과 → 판정 확정 (apply-measurement, OpenAI 미호출·즉시 응답) ─── */
+    async _applyMeasurement(item) {
+        var _a;
+        if (!this.measureResult)
+            return;
+        try {
+            this.loading = true;
+            this.loadingText = '판정 확정 중...';
+            // 측정 서버 응답을 가공 없이 그대로 전달 — 품질 게이트/hold 승격은 엔진이 처리한다
+            const result = await this._callEngine({
+                action: 'apply-measurement',
+                item: { item_id: item.item_id, text: item.text, category: item.category },
+                model_id: ((_a = item.measure) === null || _a === void 0 ? void 0 : _a.model_id) || this.measureResult.model_id,
+                result: this.measureResult
+            });
+            const judged = Object.assign(Object.assign({}, item), result.item);
+            this._mergeItems([judged]);
+            this._resetMeasureState();
+            this.panel = 'none';
+            this.selectedItem = null;
+            if (judged.verdict === 'hold') {
+                notify({ message: '측정 품질이 기준에 못 미쳐 보류되었습니다. 재촬영을 권장합니다.', level: 'warn' });
+            }
+            else {
+                notify({ message: `판정이 확정되었습니다: ${this._verdictLabel(judged)}` });
+            }
+        }
+        catch (error) {
+            console.error('판정 확정 실패:', error);
+            notify({ message: error.message, level: 'error' });
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    /* base64 data URL → File (측정 근거 이미지 첨부용) */
+    _dataUrlToFile(dataUrl, name) {
+        var _a;
+        try {
+            const [head, body] = dataUrl.split(',');
+            const mime = ((_a = head.match(/data:(.*?);/)) === null || _a === void 0 ? void 0 : _a[1]) || 'image/jpeg';
+            const bin = atob(body);
+            const bytes = new Uint8Array(bin.length);
+            for (let i = 0; i < bin.length; i++)
+                bytes[i] = bin.charCodeAt(i);
+            return new File([bytes], name, { type: mime });
+        }
+        catch (_b) {
+            return null;
+        }
+    }
+    /* ─── 검사 등록: 감리자 판정 자동 반영 + AI판단 근거 첨부 ─── */
     async _registerInspection() {
         var _a, _b;
         const items = this._sortedItems();
@@ -674,7 +1266,8 @@ let BuildingInspectionAiMeasurement = class BuildingInspectionAiMeasurement exte
                 if (response.errors)
                     throw new Error(((_a = response.errors[0]) === null || _a === void 0 ? void 0 : _a.message) || '검사 등록에 실패했습니다.');
             }
-            // 2) 항목별 첨부: 판단 근거(AI판단 텍스트) + 근거 사진 (판정 여부와 무관하게 전체 항목)
+            // 2) 항목별 첨부: 판단 근거(AI판단 텍스트) + 근거 프레임/측정 근거 이미지
+            //    ai_report는 pending/error에서 빈 문자열로 오므로 그 항목은 첨부하지 않는다
             const attachments = [];
             for (const it of items) {
                 if (it.ai_report) {
@@ -691,6 +1284,12 @@ let BuildingInspectionAiMeasurement = class BuildingInspectionAiMeasurement exte
                         attachments.push({ file: photo.file, refBy: it.item_id, refType: 'ChecklistItem', description: 'AI판단' });
                     }
                 }
+                // 측정 항목의 근거 이미지 (apply-measurement 응답의 base64)
+                if (it.image_data) {
+                    const file = this._dataUrlToFile(it.image_data, `AI측정근거_${(it.text || it.item_id).slice(0, 30)}.jpg`);
+                    if (file)
+                        attachments.push({ file, refBy: it.item_id, refType: 'ChecklistItem', description: 'AI판단' });
+                }
             }
             if (attachments.length) {
                 const attachResponse = await client.mutate({
@@ -829,68 +1428,95 @@ BuildingInspectionAiMeasurement.styles = [
         margin-top: 6px;
       }
 
-      .progress-row {
+      /* 촬영 안내 그림 — 픽토그램은 배경 투명·짙은 글자라 밝은 카드 위에만 얹는다 */
+      .capture-guide-img {
+        width: 100%;
+        border-radius: 8px;
+        display: block;
+      }
+
+      .picto-strip {
+        display: flex;
+        gap: 8px;
+        margin-top: 10px;
+      }
+
+      .picto-strip img {
+        flex: 1;
+        min-width: 0;
+        background: #fff;
+        border: 1px solid #eee;
+        border-radius: 8px;
+        padding: 6px;
+      }
+
+      /* 세트 업로드 카드 */
+      .set-card {
         display: flex;
-        justify-content: space-between;
         align-items: center;
-        font-size: 13px;
-        color: #555;
-        font-weight: 600;
+        gap: 10px;
+        border: 1px dashed #ccc;
+        border-radius: 8px;
+        background: #fafafa;
+        padding: 12px;
+        cursor: pointer;
       }
 
-      .progress-bar {
-        height: 6px;
-        border-radius: 3px;
-        background: #eee;
-        overflow: hidden;
+      .set-card[uploaded] {
+        border-style: solid;
+        border-color: #bfd8bf;
+        background: #f2f8f2;
+        cursor: default;
       }
 
-      .progress-bar div {
-        height: 100%;
-        background: #7d2f2f;
-        transition: width 0.3s;
+      .set-card md-icon {
+        --md-icon-size: 28px;
+        color: #b5b5b5;
+        flex-shrink: 0;
+      }
+
+      .set-card[uploaded] md-icon {
+        color: #2e7d32;
       }
 
-      .next-shot {
+      .set-card .set-main {
+        flex: 1;
+        min-width: 0;
         font-size: 13px;
-        font-weight: 700;
+        color: #555;
+      }
+
+      .set-card .set-main b {
+        display: block;
         color: #333;
+        margin-bottom: 2px;
       }
 
-      .slot-grid {
-        display: flex;
-        gap: 8px;
+      .set-card .set-warn {
+        font-size: 11px;
+        color: #b7791f;
       }
 
-      .slot {
-        flex: 1;
-        aspect-ratio: 1;
-        border: 1px dashed #ccc;
-        border-radius: 8px;
-        background: #fafafa;
+      .progress-row {
         display: flex;
-        flex-direction: column;
-        justify-content: center;
+        justify-content: space-between;
         align-items: center;
-        gap: 4px;
-        font-size: 12px;
-        color: #999;
-        text-align: center;
-        padding: 4px;
-        overflow: hidden;
-        cursor: pointer;
+        font-size: 13px;
+        color: #555;
+        font-weight: 600;
       }
 
-      .slot md-icon {
-        --md-icon-size: 28px;
-        color: #b5b5b5;
+      .progress-bar {
+        height: 6px;
+        border-radius: 3px;
+        background: #eee;
+        overflow: hidden;
       }
 
-      .slot img {
-        width: 100%;
+      .progress-bar div {
         height: 100%;
-        object-fit: cover;
-        border-radius: 6px;
+        background: #7d2f2f;
+        transition: width 0.3s;
       }
 
       .primary-button {
@@ -1006,6 +1632,13 @@ BuildingInspectionAiMeasurement.styles = [
         margin-top: 4px;
       }
 
+      .group-subtitle {
+        font-size: 12px;
+        font-weight: 700;
+        color: #777;
+        margin: 2px 0 0 4px;
+      }
+
       .item-card {
         display: flex;
         gap: 10px;
@@ -1110,11 +1743,23 @@ BuildingInspectionAiMeasurement.styles = [
         cursor: pointer;
       }
 
-      /* ─── 우측 패널 (상세/재촬영/리포트) ─── */
+      .measure-button {
+        flex-shrink: 0;
+        border: none;
+        border-radius: 14px;
+        background: #e8eef7;
+        color: #2f5d8a;
+        font-size: 12px;
+        font-weight: 700;
+        padding: 6px 12px;
+        cursor: pointer;
+      }
+
+      /* ─── 우측 패널 (상세/재촬영/측정/리포트) ─── */
       .side-pane {
         flex: 1;
-        min-width: 280px;
-        max-width: 360px;
+        min-width: 300px;
+        max-width: 400px;
         background: #fff;
         border: 1px solid #e5e5e5;
         border-radius: 10px;
@@ -1199,6 +1844,12 @@ BuildingInspectionAiMeasurement.styles = [
         padding: 8px 10px;
       }
 
+      .evidence-img {
+        width: 100%;
+        border-radius: 8px;
+        border: 1px solid #eee;
+      }
+
       .why-box {
         background: #fff8e1;
         border: 1px solid #f4e4b5;
@@ -1209,6 +1860,87 @@ BuildingInspectionAiMeasurement.styles = [
         line-height: 1.6;
       }
 
+      /* 측정 패널 */
+      .measure-field {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        font-size: 12px;
+        color: #555;
+      }
+
+      .measure-field input,
+      .measure-field select {
+        padding: 9px 10px;
+        border: 1px solid #ccc;
+        border-radius: 6px;
+        font-size: 14px;
+      }
+
+      .measure-msg {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 13px;
+        color: #7d2f2f;
+        font-weight: 600;
+      }
+
+      .measure-msg md-circular-progress {
+        --md-circular-progress-size: 22px;
+      }
+
+      .frame-strip {
+        display: flex;
+        gap: 6px;
+        overflow-x: auto;
+        padding-bottom: 4px;
+      }
+
+      .frame-strip img {
+        height: 60px;
+        border-radius: 6px;
+        border: 2px solid transparent;
+        cursor: pointer;
+        opacity: 0.7;
+      }
+
+      .frame-strip img[selected] {
+        border-color: #7d2f2f;
+        opacity: 1;
+      }
+
+      .click-stage {
+        position: relative;
+        line-height: 0;
+      }
+
+      .click-stage img {
+        width: 100%;
+        border-radius: 8px;
+        cursor: crosshair;
+      }
+
+      .click-dot {
+        position: absolute;
+        width: 24px;
+        height: 24px;
+        margin: -12px 0 0 -12px;
+        border: 3px solid #ffd400;
+        border-radius: 50%;
+        pointer-events: none;
+      }
+
+      .measure-summary {
+        background: #f7f7f7;
+        border-radius: 8px;
+        padding: 10px;
+        font-size: 12px;
+        color: #333;
+        line-height: 1.7;
+        white-space: pre-line;
+      }
+
       .report-counts {
         display: flex;
         text-align: center;
@@ -1358,6 +2090,10 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], BuildingInspectionAiMeasurement.prototype, "guide", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], BuildingInspectionAiMeasurement.prototype, "sets", void 0);
 __decorate([
     state(),
     __metadata("design:type", Array)
@@ -1382,10 +2118,54 @@ __decorate([
     state(),
     __metadata("design:type", Number)
 ], BuildingInspectionAiMeasurement.prototype, "recaptureBase", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionAiMeasurement.prototype, "recaptureSet", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
 ], BuildingInspectionAiMeasurement.prototype, "expandedReportId", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Number)
+], BuildingInspectionAiMeasurement.prototype, "measureSetIndex", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionAiMeasurement.prototype, "measureInputs", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], BuildingInspectionAiMeasurement.prototype, "measureRunning", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], BuildingInspectionAiMeasurement.prototype, "measureMsg", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionAiMeasurement.prototype, "measureResult", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], BuildingInspectionAiMeasurement.prototype, "measureImageUrl", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], BuildingInspectionAiMeasurement.prototype, "thicknessFrames", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionAiMeasurement.prototype, "thicknessSlot", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], BuildingInspectionAiMeasurement.prototype, "thicknessFrameUrl", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionAiMeasurement.prototype, "thicknessClick", void 0);
 __decorate([
     state(),
     __metadata("design:type", Boolean)
@@ -1395,11 +2175,15 @@ __decorate([
     __metadata("design:type", String)
 ], BuildingInspectionAiMeasurement.prototype, "loadingText", void 0);
 __decorate([
-    query('#photoInput'),
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionAiMeasurement.prototype, "canMutate", void 0);
+__decorate([
+    query('#setInput'),
     __metadata("design:type", HTMLInputElement
-    /* 슬롯 클릭으로 선택기를 연 경우 대상 슬롯 인덱스 (null이면 뒤에 추가) */
+    /* 세트 업로드 대상: 촬영 건 인덱스(가이드 화면) 또는 -1(재촬영 패널) */
     )
-], BuildingInspectionAiMeasurement.prototype, "photoInputEl", void 0);
+], BuildingInspectionAiMeasurement.prototype, "setInputEl", void 0);
 BuildingInspectionAiMeasurement = __decorate([
     customElement('building-inspection-detail-ai-measurement')
 ], BuildingInspectionAiMeasurement);