@things-factory/figure-ui 10.1.7 → 10.1.8

package/dist-client/pages/figure-modeller-page.d.ts

@@ -64,12 +64,10 @@ export declare class FigureModellerPage extends FigureModellerPageBase {
      * 미저장 표시(`dirty`)는 그대로 남으므로 데이터를 잃지는 않았다. 잃은 것은 **사유**다.
      */
     private saveFailure;
-    /** 저작 보조가 낸 후보. 받기 전에는 원본 데이터가 아니다. */
-    private proposal?;
-    /** 그 후보의 셈. 무엇을 받는 것인지 숫자로도 보여 준다. */
-    private proposalOf?;
-    /** 받기로 고른 변경들. 처음에는 전부 골라 둔다. */
-    private picked;
+    /** 저작 보조 또는 발행 게이트가 연 후보 검토 세션. 받기 전에는 정본이 아니다. */
+    private proposalSession?;
+    /** 인라인 요청창과 AI 도크가 함께 쓰는 현재 Figure의 제한된 세션 피드백. */
+    private proposalFeedback;
     /**
      * 저장 형식으로 변환한 것. 씬 모델이 바뀔 때만 다시 만든다.
      *
@@ -78,6 +76,19 @@ export declare class FigureModellerPage extends FigureModellerPageBase {
      */
     private folded?;
     willUpdate(changed: Map<string, unknown>): void;
+    /**
+     * 페이지 밖 AI 도크에도 **지금 손에 든 정본**을 알려 준다.
+     *
+     * 모델러 안의 `figure-ask` 는 이미 `folded`를 직접 받는다. 반면 asidebar 도크는 주소의 id만
+     * 알았으므로 DB에 저장된 옛 판을 읽었다. 저장 전 변경을 두고 "왜 발행이 안 되나" 또는
+     * "이 부품을 줄여 달라"고 물으면 대화가 엉뚱한 판을 보게 되는 결함이었다.
+     *
+     * 이 이벤트는 저장하지 않는다. 도크가 대화 인자로만 잠시 들고 있고, 서버 도구도 도메인 소속
+     * Figure를 먼저 확인한 뒤에만 이 source를 사용한다. 페이지를 떠날 때는 아래에서 지워 오래된
+     * 초안이 다음 Figure에 섞이지 않게 한다.
+     */
+    updated(changed: Map<string, unknown>): void;
+    disconnectedCallback(): void;
     get context(): {
         title: string;
         heading: boolean;
@@ -110,10 +121,12 @@ export declare class FigureModellerPage extends FigureModellerPageBase {
     private renderCollapse;
     private toggleCollapse;
     /**
-     * AI 후보를 나란히 세운다.
+     * AI 후보를 실제 배치 크기에서도 본다.
      *
-     * 후보는 저장 형식으로 온다. 미리보기는 씬 모델을 받으므로 여기서 한 번 변환한다 —
-     * 후보를 받아들이기 전까지는 편집 데이터가 아니므로 상태로 두지 않는다.
+     * 편집 캔버스 한 장으로는 `repeat`·`fixed`·`anchor`가 맞는지 알 수 없다. 후보는 아직
+     * 정본이 아니므로 저장하지 않고, `figure-preview`가 같은 FigureSource를 기준 크기와
+     * 일곱 가지 확장 축에서 실제 FigureInstance로 세운다. 따라서 저작자는 "좋아 보이는
+     * 한 장"이 아니라 배치될 때도 붙어 있는지를 보고 수락한다.
      */
     private renderProposed;
     /**
@@ -131,6 +144,8 @@ export declare class FigureModellerPage extends FigureModellerPageBase {
      * 안 들고, 우리가 생각 못 한 조합을 막아 주기 때문이다.
      */
     private renderDecision;
+    /** 후보 품질 판단의 근거를 수락 전에 전부 보여 준다. */
+    private renderQualityReview;
     /** 변경 하나. 무엇을 하겠다는 것인지 부호로 먼저 말한다. */
     private renderChange;
     private toggle;
@@ -141,6 +156,17 @@ export declare class FigureModellerPage extends FigureModellerPageBase {
      * 무엇이 자기 것이고 무엇이 기계 것인지 모르게 된다.
      */
     private receive;
+    /**
+     * 발행 게이트의 구조화된 수정안 하나를 현재 작업 사본에만 겹쳐 본다. 서버가 준 값은
+     * `part.anchor.axis = to`라는 데이터이지 사람이 읽을 문장을 다시 해석한 결과가 아니다.
+     * 원본 `board`/`parts`는 여기서 전혀 바꾸지 않고, 아래의 `take()`만 바꾼 사본을 적용한다.
+     */
+    private previewSizingFix;
+    /**
+     * 원클릭 적용은 서버가 모든 크기 변경 case를 재검사해 안전하다고 표시한 한-앵커 후보에만 연다.
+     * 그래도 저장은 저작자의 별도 행위다. 잘못 눌러도 DB 정본이나 발행판은 바뀌지 않는다.
+     */
+    private applySizingFix;
     /**
      * 고른 변경을 받아들인다.
      *
@@ -148,6 +174,14 @@ export declare class FigureModellerPage extends FigureModellerPageBase {
      * 하므로 그쪽이 자연스럽다. 받아들인 결과는 다시 씬 모델로 되돌려 편집을 이어간다.
      */
     private take;
+    /**
+     * 후보에 대한 사람의 결정을 도크에만 알린다.
+     *
+     * 이 기록은 분석 이벤트나 Figure 속성이 아니다. 같은 모델러 세션에서 다음 요청을 더 잘
+     * 이해시키는 짧은 신호일 뿐이다. 원본 source나 사람의 작업 내용을 다시 보내지 않고, 사람이
+     * 후보 변경 중 몇 개를 받아들였는지와 이미 화면에 보였던 품질 판정만 보낸다.
+     */
+    private reportProposalFeedback;
     private discard;
     /**
      * 저장할 수 있나.

package/dist-client/pages/figure-modeller-page.js

@@ -14,6 +14,7 @@ import { navigate, PageView } from '@operato/shell';
 import { validate } from '@hatiolab/figure-model';
 import * as edits from '../modeller/part-edits.js';
 import * as proposals from '../modeller/proposal.js';
+import * as proposalSessions from '../modeller/proposal-session.js';
 import { toFigureSource, fromFigureSource } from '../modeller/figure-source.js';
 import { DEFAULT_VIEW } from '../modeller/figure-view.js';
 import { createFigure, fetchFigure, fetchFigureTypeNames, updateFigure } from '../graphql/index.js';
@@ -126,8 +127,8 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
          * 미저장 표시(`dirty`)는 그대로 남으므로 데이터를 잃지는 않았다. 잃은 것은 **사유**다.
          */
         this.saveFailure = '';
-        /** 받기로 고른 변경들. 처음에는 전부 골라 둔다. */
-        this.picked = new Set();
+        /** 인라인 요청창과 AI 도크가 함께 쓰는 현재 Figure의 제한된 세션 피드백. */
+        this.proposalFeedback = [];
     }
     static { this.styles = css `
     :host {
@@ -453,6 +454,39 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
       cursor: default;
     }
 
+    /* AI의 평가는 판정문이 아니라 수락 전에 읽을 근거다. 숨기지 않고 변경 칩 위에 둔다. */
+    div[quality-review] {
+      padding: 7px var(--spacing-large, 12px);
+      background-color: var(--md-sys-color-primary-container);
+      border-bottom: 1px solid var(--md-sys-color-outline-variant);
+      color: var(--md-sys-color-on-primary-container);
+      font-size: 0.72rem;
+      line-height: 1.45;
+    }
+    div[quality-review][review] {
+      background-color: var(--md-sys-color-tertiary-container);
+      color: var(--md-sys-color-on-tertiary-container);
+    }
+    div[quality-review] strong { display: block; font-size: 0.74rem; }
+    div[quality-review] ul { margin: 4px 0 0; padding-left: 18px; }
+    div[proposal-note] {
+      padding: 6px var(--spacing-large, 12px) 8px;
+      border-bottom: 1px solid var(--md-sys-color-outline-variant);
+      background-color: var(--md-sys-color-surface-container-low);
+    }
+    div[proposal-note] label { display: block; font-size: 0.71rem; color: var(--md-sys-color-on-surface-variant); }
+    div[proposal-note] input {
+      box-sizing: border-box;
+      width: 100%;
+      margin-top: 4px;
+      padding: 5px 7px;
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 5px;
+      color: var(--md-sys-color-on-surface);
+      background: var(--md-sys-color-surface);
+      font: inherit;
+    }
+
     /*
       무엇을 바꾸자는 것인가 — 칩 하나가 변경 하나다.
 
@@ -513,6 +547,31 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
             this.folded = this.board ? toFigureSource(this.board, this.parts) : undefined;
         }
     }
+    /**
+     * 페이지 밖 AI 도크에도 **지금 손에 든 정본**을 알려 준다.
+     *
+     * 모델러 안의 `figure-ask` 는 이미 `folded`를 직접 받는다. 반면 asidebar 도크는 주소의 id만
+     * 알았으므로 DB에 저장된 옛 판을 읽었다. 저장 전 변경을 두고 "왜 발행이 안 되나" 또는
+     * "이 부품을 줄여 달라"고 물으면 대화가 엉뚱한 판을 보게 되는 결함이었다.
+     *
+     * 이 이벤트는 저장하지 않는다. 도크가 대화 인자로만 잠시 들고 있고, 서버 도구도 도메인 소속
+     * Figure를 먼저 확인한 뒤에만 이 source를 사용한다. 페이지를 떠날 때는 아래에서 지워 오래된
+     * 초안이 다음 Figure에 섞이지 않게 한다.
+     */
+    updated(changed) {
+        if (changed.has('figure') && changed.get('figure')?.id !== this.figure?.id) {
+            this.proposalFeedback = [];
+        }
+        if (changed.has('board') || changed.has('parts') || changed.has('figure')) {
+            window.dispatchEvent(new CustomEvent('figure-ai-context', {
+                detail: { figureId: this.figure?.id, source: this.folded }
+            }));
+        }
+    }
+    disconnectedCallback() {
+        window.dispatchEvent(new CustomEvent('figure-ai-context', { detail: undefined }));
+        super.disconnectedCallback();
+    }
     get context() {
         return {
             title: this.figure?.name ?? i18next.t('figure.title.new-figure'),
@@ -546,6 +605,7 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
         <figure-ask
           .source=${source}
           .type=${source?.type ?? ''}
+          .feedback=${this.proposalFeedback}
           @proposed=${(e) => this.receive(e.detail.proposal)}
         ></figure-ask>
         ${this.saveFailure ? html `<span save-failed title=${this.saveFailure}>${this.saveFailure}</span>` : ''}
@@ -562,6 +622,8 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
         @figure-catalog=${(e) => this.catalog(e.detail)}
         @figure-released=${(e) => this.released(e.detail.figure)}
         @figure-reverted=${() => this.figure?.id && this.load(this.figure.id)}
+        @preview-sizing-fix=${(e) => this.previewSizingFix(e.detail)}
+        @apply-sizing-fix=${(e) => this.applySizingFix(e.detail)}
         @add-part=${(e) => this.addPart(e.detail.primitive)}
         @select-part=${(e) => (this.selected = e.detail.index)}
         @remove-part=${(e) => this.removePart(e.detail.index)}
@@ -585,8 +647,8 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
 
         <div middle>
           ${this.renderBar()}
-          ${this.proposal ? this.renderDecision() : ''}
-          ${this.proposal
+          ${this.proposalSession ? this.renderDecision() : ''}
+          ${this.proposalSession
             ? html `
                 <div lanes>
                   <div lane>
@@ -601,10 +663,11 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
                   <div lane candidate>
                     <h4>
                       ${i18next.t('figure.label.proposed')}
-                      ${this.proposalOf
+                      ${this.proposalSession.metrics
                 ? html `<small>
-                            ${this.proposalOf.grade} ·
-                            ${i18next.t('figure.text.n-triangles', { count: this.proposalOf.triangles })}
+                            ${this.proposalSession.metrics.grade} ·
+                            ${i18next.t('figure.text.n-triangles', { count: this.proposalSession.metrics.triangles })}
+                            ${this.proposalSession.metrics.quality ? html ` · ${this.proposalSession.metrics.quality.summary}` : ''}
                           </small>`
                 : ''}
                     </h4>
@@ -668,7 +731,7 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
       </button>
     `;
         return html `<div modes>
-      ${this.renderCollapse('left')}${this.proposal ? '' : html `${one('edit')}${one('preview')}`}
+      ${this.renderCollapse('left')}${this.proposalSession ? '' : html `${one('edit')}${one('preview')}`}
       <div spacer></div>
       ${this.renderCollapse('right')}
     </div>`;
@@ -699,16 +762,17 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
         rememberPanes(this.collapsed);
     }
     /**
-     * AI 후보를 나란히 세운다.
+     * AI 후보를 실제 배치 크기에서도 본다.
      *
-     * 후보는 저장 형식으로 온다. 미리보기는 씬 모델을 받으므로 여기서 한 번 변환한다 —
-     * 후보를 받아들이기 전까지는 편집 데이터가 아니므로 상태로 두지 않는다.
+     * 편집 캔버스 한 장으로는 `repeat`·`fixed`·`anchor`가 맞는지 알 수 없다. 후보는 아직
+     * 정본이 아니므로 저장하지 않고, `figure-preview`가 같은 FigureSource를 기준 크기와
+     * 일곱 가지 확장 축에서 실제 FigureInstance로 세운다. 따라서 저작자는 "좋아 보이는
+     * 한 장"이 아니라 배치될 때도 붙어 있는지를 보고 수락한다.
      */
     renderProposed() {
-        if (!this.proposal)
+        if (!this.proposalSession)
             return '';
-        const { board, parts } = fromFigureSource(this.proposal);
-        return html `<figure-canvas .board=${board} .parts=${parts} .viewOnly=${true}></figure-canvas>`;
+        return html `<figure-preview .source=${this.proposalSession.source}></figure-preview>`;
     }
     /**
      * 무엇을 받을지 고른다.
@@ -725,21 +789,34 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
      * 안 들고, 우리가 생각 못 한 조합을 막아 주기 때문이다.
      */
     renderDecision() {
-        if (!this.proposal)
+        if (!this.proposalSession)
             return '';
-        const changes = proposals.diffProposal(this.folded, this.proposal);
-        const picked = proposals.applyProposal(this.folded, this.proposal, this.picked);
+        const changes = proposals.diffProposal(this.folded, this.proposalSession.source);
+        const picked = proposals.applyProposal(this.folded, this.proposalSession.source, this.proposalSession.picked);
         const { errors, violations } = validate(picked);
         return html `
       <div decide>
-        <span>${i18next.t('figure.text.assistant-proposed-a-figure')}</span>
+        <span>${this.proposalSession.title || i18next.t('figure.text.assistant-proposed-a-figure')}</span>
         <div spacer></div>
         <button drop @click=${() => this.discard()}>${i18next.t('figure.button.discard')}</button>
-        <button take ?disabled=${errors.length > 0 || this.picked.size === 0} @click=${() => this.take()}>
-          ${i18next.t('figure.button.take-n-changes', { n: this.picked.size })}
+        <button take ?disabled=${errors.length > 0 || this.proposalSession.picked.size === 0} @click=${() => this.take()}>
+          ${i18next.t('figure.button.take-n-changes', { n: this.proposalSession.picked.size })}
         </button>
       </div>
 
+      ${this.renderQualityReview()}
+      <div proposal-note>
+        <label>
+          ${i18next.t('figure.text.proposal-feedback-note')}
+          <input
+            maxlength="500"
+            .value=${this.proposalSession.note}
+            placeholder=${i18next.t('figure.text.proposal-feedback-placeholder')}
+            @input=${(event) => (this.proposalSession = { ...this.proposalSession, note: event.target.value })}
+          />
+        </label>
+      </div>
+
       ${changes.length > 0
             ? html `
             <div changes>
@@ -754,6 +831,24 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
                 : ''}
     `;
     }
+    /** 후보 품질 판단의 근거를 수락 전에 전부 보여 준다. */
+    renderQualityReview() {
+        const quality = this.proposalSession?.metrics?.quality;
+        if (!quality)
+            return '';
+        return html `
+      <div quality-review ?review=${quality.status === 'review'}>
+        <strong>${i18next.t('figure.label.candidate-review')}</strong>
+        <span>${quality.summary}</span>
+        <span> · top-view ${Math.round(quality.visualReadability * 100)}% · ${quality.visualRegions} regions</span>
+        ${quality.findings.length > 0
+            ? html `<ul>
+              ${quality.findings.map(finding => html `<li><code>${finding.dimension}</code> — ${finding.message}</li>`)}
+            </ul>`
+            : ''}
+      </div>
+    `;
+    }
     /** 변경 하나. 무엇을 하겠다는 것인지 부호로 먼저 말한다. */
     renderChange(change) {
         const icon = {
@@ -765,7 +860,7 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
             anchor: 'my_location',
             styleKit: 'palette'
         }[change.kind];
-        const on = this.picked.has(change.key);
+        const on = this.proposalSession?.picked.has(change.key);
         return html `
       <button
         change
@@ -779,12 +874,8 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
     `;
     }
     toggle(key) {
-        const next = new Set(this.picked);
-        if (next.has(key))
-            next.delete(key);
-        else
-            next.add(key);
-        this.picked = next;
+        if (this.proposalSession)
+            this.proposalSession = proposalSessions.toggleProposalChange(this.proposalSession, key);
     }
     /**
      * 후보가 왔다.
@@ -793,15 +884,29 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
      * 무엇이 자기 것이고 무엇이 기계 것인지 모르게 된다.
      */
     receive(proposal) {
-        this.proposal = JSON.parse(proposal.source);
-        // 처음에는 전부 골라 둔다 — 통째로 받는 것이 보통의 길이다.
-        this.picked = new Set(proposals.diffProposal(this.folded, this.proposal).map(change => change.key));
-        this.proposalOf = {
-            grade: proposal.grade,
-            triangles: proposal.triangles,
-            groups: proposal.groups,
-            attempts: proposal.attempts
-        };
+        this.proposalSession = proposalSessions.openAiProposal(this.folded, proposal);
+    }
+    /**
+     * 발행 게이트의 구조화된 수정안 하나를 현재 작업 사본에만 겹쳐 본다. 서버가 준 값은
+     * `part.anchor.axis = to`라는 데이터이지 사람이 읽을 문장을 다시 해석한 결과가 아니다.
+     * 원본 `board`/`parts`는 여기서 전혀 바꾸지 않고, 아래의 `take()`만 바꾼 사본을 적용한다.
+     */
+    previewSizingFix(fix) {
+        if (!this.folded)
+            return;
+        this.proposalSession = proposalSessions.openSizingFix(this.folded, fix);
+    }
+    /**
+     * 원클릭 적용은 서버가 모든 크기 변경 case를 재검사해 안전하다고 표시한 한-앵커 후보에만 연다.
+     * 그래도 저장은 저작자의 별도 행위다. 잘못 눌러도 DB 정본이나 발행판은 바뀌지 않는다.
+     */
+    applySizingFix(fix) {
+        if (!fix.safe || !this.folded)
+            return;
+        this.previewSizingFix(fix);
+        if (!this.proposalSession)
+            return;
+        this.take();
     }
     /**
      * 고른 변경을 받아들인다.
@@ -810,20 +915,42 @@ let FigureModellerPage = class FigureModellerPage extends FigureModellerPageBase
      * 하므로 그쪽이 자연스럽다. 받아들인 결과는 다시 씬 모델로 되돌려 편집을 이어간다.
      */
     take() {
-        if (!this.proposal)
+        if (!this.proposalSession)
             return;
-        const taken = proposals.applyProposal(this.folded, this.proposal, this.picked);
+        const taken = proposals.applyProposal(this.folded, this.proposalSession.source, this.proposalSession.picked);
         const { board, parts } = fromFigureSource(taken);
         this.board = board;
         this.parts = parts;
         this.selected = parts.length ? 0 : -1;
         this.dirty = true;
-        this.discard();
+        this.reportProposalFeedback('accepted');
+        this.discard(false);
     }
-    discard() {
-        this.proposal = undefined;
-        this.proposalOf = undefined;
-        this.picked = new Set();
+    /**
+     * 후보에 대한 사람의 결정을 도크에만 알린다.
+     *
+     * 이 기록은 분석 이벤트나 Figure 속성이 아니다. 같은 모델러 세션에서 다음 요청을 더 잘
+     * 이해시키는 짧은 신호일 뿐이다. 원본 source나 사람의 작업 내용을 다시 보내지 않고, 사람이
+     * 후보 변경 중 몇 개를 받아들였는지와 이미 화면에 보였던 품질 판정만 보낸다.
+     */
+    reportProposalFeedback(outcome) {
+        if (!this.proposalSession)
+            return;
+        const feedback = proposalSessions.feedbackFromSession(this.folded, this.proposalSession, outcome);
+        if (!feedback)
+            return;
+        this.proposalFeedback = [...this.proposalFeedback, feedback].slice(-5);
+        window.dispatchEvent(new CustomEvent('figure-ai-feedback', {
+            detail: {
+                figureId: this.figure?.id,
+                ...feedback
+            }
+        }));
+    }
+    discard(reportFeedback = true) {
+        if (reportFeedback)
+            this.reportProposalFeedback('discarded');
+        this.proposalSession = undefined;
     }
     /**
      * 저장할 수 있나.
@@ -1233,15 +1360,11 @@ __decorate([
 __decorate([
     state(),
     __metadata("design:type", Object)
-], FigureModellerPage.prototype, "proposal", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], FigureModellerPage.prototype, "proposalOf", void 0);
+], FigureModellerPage.prototype, "proposalSession", void 0);
 __decorate([
     state(),
-    __metadata("design:type", Object)
-], FigureModellerPage.prototype, "picked", void 0);
+    __metadata("design:type", Array)
+], FigureModellerPage.prototype, "proposalFeedback", void 0);
 FigureModellerPage = __decorate([
     customElement('figure-modeller-page')
 ], FigureModellerPage);