@things-factory/figure-ui 10.1.6 → 10.1.8

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

@@ -1,18 +1,6 @@
 import '@material/web/icon/icon.js'
 import '../modeller/figure-side.js'
 import '../modeller/figure-ask.js'
-/*
-  대화 도크. **`/client` 서브패스로 적으면 안 된다.**
-
-  그 패키지에 `exports` 맵이 없어서 `/client` 는 소스 디렉터리로 떨어지고, webpack 이 `.ts` 를 직접
-  컴파일한다. 그 경로로 나온 데코레이터가 `Reflect.metadata` 를 가드 없이 불러 **브라우저에서만**
-  죽는다(빌드 로그는 오류 0건). board-ai 와 plant 가 차례로 밟았다.
-
-  그리고 더 센 이유가 있다 — `board-ui/dist-client` 의 모델러가 같은 엘리먼트를 **빌드된 경로로**
-  등록한다. 다른 경로로 적으면 webpack 이 두 모듈로 보고, 두 곳이 같은 커스텀 엘리먼트 이름을
-  등록해 나중에 뜨는 화면이 죽는다. 즉 「어느 경로가 되나」가 아니라 **「모두 같은 경로여야 한다」**다.
-*/
-import '@things-factory/ai-assistant/dist-client/index.js'
 import '../modeller/figure-canvas.js'
 import { captureThumbnail } from '../modeller/figure-thumbnail.js'
 import '../modeller/figure-preview.js'
@@ -25,17 +13,18 @@ import { customElement, state } from 'lit/decorators.js'
 import { i18next, localize } from '@operato/i18n'
 import { navigate, PageView } from '@operato/shell'
 import { validate } from '@hatiolab/figure-model'
-import { activePalette } from '@hatiolab/things-scene'
 import type { DetailLevel, FigureSource, PrimitiveKind } 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 type { ProposalSession } from '../modeller/proposal-session.js'
 import { toFigureSource, fromFigureSource } from '../modeller/figure-source.js'
 import type { BoardModel, PartModel, PlaneAxis } from '../modeller/figure-source.js'
 import { DEFAULT_VIEW } from '../modeller/figure-view.js'
 import type { ViewSettings } from '../modeller/figure-view.js'
 import { createFigure, fetchFigure, fetchFigureTypeNames, updateFigure } from '../graphql/index.js'
-import type { Figure, FigureFinding } from '../types.js'
+import type { Figure, FigureFinding, FigureGateFix, FigureProposal, ProposalFeedback } from '../types.js'
 
 const FigureModellerPageBase = localize(i18next)(PageView) as typeof PageView
 
@@ -147,50 +136,10 @@ export class FigureModellerPage extends FigureModellerPageBase {
     div[edits] {
       flex: 1;
       display: grid;
-      grid-template-columns: 220px 1fr 320px 0;
+      grid-template-columns: 220px 1fr 320px;
       min-height: 0;
       overflow: hidden;
     }
-    /*
-      대화 도크는 **불렀을 때만 자리를 받는다.** 저작의 주인공은 캔버스이고, 대화는 필요할 때
-      여는 것이다. 늘 열어 두면 넷으로 나뉜 화면에서 캔버스가 가장 좁아진다.
-    */
-    div[edits][dock] {
-      grid-template-columns: 220px 1fr 320px 360px;
-    }
-    div[edits] > ox-board-ai-chat {
-      grid-column: 4;
-      min-width: 0;
-      border-left: 1px solid var(--md-sys-color-outline-variant);
-      background-color: var(--md-sys-color-surface-container-lowest);
-    }
-    div[edits]:not([dock]) > ox-board-ai-chat {
-      display: none;
-    }
-
-    /* 도크를 여는 손잡이. 머리줄의 저장 단추 옆에 둔다 */
-    button[dock] {
-      flex: none;
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      padding: 5px 10px;
-      font: var(--label-font, inherit);
-      font-size: 0.78rem;
-      color: var(--md-sys-color-on-surface-variant);
-      background: none;
-      border: 1px solid var(--md-sys-color-outline-variant);
-      border-radius: 6px;
-      cursor: pointer;
-    }
-    button[dock][on] {
-      color: var(--md-sys-color-primary);
-      border-color: var(--md-sys-color-primary);
-      background-color: var(--md-sys-color-surface-container);
-    }
-    button[dock] md-icon {
-      font-size: 16px;
-    }
 
     /*
       **세 칸의 자리를 못 박는다.**
@@ -489,6 +438,39 @@ export 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;
+    }
+
     /*
       무엇을 바꾸자는 것인가 — 칩 하나가 변경 하나다.
 
@@ -584,14 +566,10 @@ export class FigureModellerPage extends FigureModellerPageBase {
    * 미저장 표시(`dirty`)는 그대로 남으므로 데이터를 잃지는 않았다. 잃은 것은 **사유**다.
    */
   @state() private saveFailure = ''
-  /** 대화 도크가 열려 있나. 저작면의 보기 상태라 저장하지 않는다. */
-  @state() private dockOpen = false
-  /** 저작 보조가 낸 후보. 받기 전에는 원본 데이터가 아니다. */
-  @state() private proposal?: FigureSource
-  /** 그 후보의 셈. 무엇을 받는 것인지 숫자로도 보여 준다. */
-  @state() private proposalOf?: { grade: string; triangles: number; groups: number; attempts: number }
-  /** 받기로 고른 변경들. 처음에는 전부 골라 둔다. */
-  @state() private picked = new Set<string>()
+  /** 저작 보조 또는 발행 게이트가 연 후보 검토 세션. 받기 전에는 정본이 아니다. */
+  @state() private proposalSession?: ProposalSession
+  /** 인라인 요청창과 AI 도크가 함께 쓰는 현재 Figure의 제한된 세션 피드백. */
+  @state() private proposalFeedback: ProposalFeedback[] = []
 
   /**
    * 저장 형식으로 변환한 것. 씬 모델이 바뀔 때만 다시 만든다.
@@ -607,6 +585,35 @@ export class FigureModellerPage extends FigureModellerPageBase {
     }
   }
 
+  /**
+   * 페이지 밖 AI 도크에도 **지금 손에 든 정본**을 알려 준다.
+   *
+   * 모델러 안의 `figure-ask` 는 이미 `folded`를 직접 받는다. 반면 asidebar 도크는 주소의 id만
+   * 알았으므로 DB에 저장된 옛 판을 읽었다. 저장 전 변경을 두고 "왜 발행이 안 되나" 또는
+   * "이 부품을 줄여 달라"고 물으면 대화가 엉뚱한 판을 보게 되는 결함이었다.
+   *
+   * 이 이벤트는 저장하지 않는다. 도크가 대화 인자로만 잠시 들고 있고, 서버 도구도 도메인 소속
+   * Figure를 먼저 확인한 뒤에만 이 source를 사용한다. 페이지를 떠날 때는 아래에서 지워 오래된
+   * 초안이 다음 Figure에 섞이지 않게 한다.
+   */
+  updated(changed: Map<string, unknown>) {
+    if (changed.has('figure') && (changed.get('figure') as Figure | undefined)?.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'),
@@ -642,17 +649,10 @@ export class FigureModellerPage extends FigureModellerPageBase {
         <figure-ask
           .source=${source}
           .type=${source?.type ?? ''}
+          .feedback=${this.proposalFeedback}
           @proposed=${(e: CustomEvent) => this.receive(e.detail.proposal)}
         ></figure-ask>
         ${this.saveFailure ? html`<span save-failed title=${this.saveFailure}>${this.saveFailure}</span>` : ''}
-        <button
-          dock
-          ?on=${this.dockOpen}
-          title=${i18next.t('figure.text.dock-explained')}
-          @click=${() => (this.dockOpen = !this.dockOpen)}
-        >
-          <md-icon>forum</md-icon>${i18next.t('figure.button.dock')}
-        </button>
         <button save ?disabled=${!this.canSave} @click=${() => this.save()}>
           ${this.saving ? i18next.t('figure.text.saving-figure') : i18next.t('figure.button.save')}
         </button>
@@ -662,10 +662,12 @@ export class FigureModellerPage extends FigureModellerPageBase {
         edits
         ?collapse-left=${this.collapsed.left}
         ?collapse-right=${this.collapsed.right}
-        ?dock=${this.dockOpen}
         @figure-rename=${(e: CustomEvent) => this.rename(e.detail.name)}
+        @figure-catalog=${(e: CustomEvent) => this.catalog(e.detail)}
         @figure-released=${(e: CustomEvent) => this.released(e.detail.figure)}
         @figure-reverted=${() => this.figure?.id && this.load(this.figure.id)}
+        @preview-sizing-fix=${(e: CustomEvent) => this.previewSizingFix(e.detail)}
+        @apply-sizing-fix=${(e: CustomEvent) => this.applySizingFix(e.detail)}
         @add-part=${(e: CustomEvent) => this.addPart(e.detail.primitive)}
         @select-part=${(e: CustomEvent) => (this.selected = e.detail.index)}
         @remove-part=${(e: CustomEvent) => this.removePart(e.detail.index)}
@@ -689,8 +691,8 @@ export 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>
@@ -705,10 +707,11 @@ export 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>
@@ -727,6 +730,8 @@ export class FigureModellerPage extends FigureModellerPageBase {
 
         <figure-side
           .figureName=${this.figure?.name ?? ''}
+          .figureCategory=${this.figure?.category}
+          .figureTags=${this.figure?.tags}
           .figureId=${this.figure?.id ?? ''}
           .figureState=${this.figure?.state}
           .figureVersion=${this.figure?.version ?? 0}
@@ -738,71 +743,10 @@ export class FigureModellerPage extends FigureModellerPageBase {
           .view=${this.view}
           @update-view=${(e: CustomEvent) => (this.view = e.detail.view)}
         ></figure-side>
-
-        <!-- 대화 도크. 무엇을 켜고 끄는지는 renderDock 위에 적어 두었다 -->
-        <ox-board-ai-chat
-          .boardTools=${false}
-          .toolCategories=${['figure-authoring']}
-          .hostContext=${this.hostContext}
-          .placeholder=${i18next.t('figure.text.dock-placeholder')}
-          @board-ai-proposal-execute=${(e: CustomEvent) => this.takeProposal(e.detail.proposal)}
-        ></ox-board-ai-chat>
       </div>
     `
   }
 
-  /*
-   * ── 대화 도크를 무엇으로 켜나 ───────────────────────────────────────────────
-   *
-   * board 의 컴포넌트를 그대로 쓰지만 **board 인 척하지 않는다.** `boardTools` 를 끄고 figure 의
-   * 도구 범주(`figure-authoring`)만 연다. 끄지 않으면 보드 편집 도구가 함께 들려, 모델이 이
-   * 화면에서 할 수 없는 일을 시도한다.
-   *
-   * board 모양의 인자(`currentBoard` · `knownTypes` · `componentSchemas` · `selectedRefids`)는
-   * 주지 않는다 — 전부 선택이고, 채우려면 없는 것을 지어내야 한다.
-   */
-
-  /**
-   * 어시스턴트가 「지금 무엇을 열고 있나」를 아는 길.
-   *
-   * 도구가 대상을 안 받았을 때 이 문맥에서 해소한다 — 사용자에게 식별자를 되묻지 않는다.
-   * 팔레트도 함께 보낸다: 모르면 모델이 색을 지어내고, 그 후보는 검증을 지나 **그리는 시점에**
-   * 죽는다.
-   */
-  private get hostContext() {
-    return {
-      surface: 'figure-modeller',
-      figureId: this.figure?.id || undefined,
-      figureType: this.board?.figureType,
-      figureName: this.figure?.name,
-      palette: Object.keys(activePalette() as Record<string, string>)
-    }
-  }
-
-  /**
-   * 도크의 후보를 받는다.
-   *
-   * **후보가 화면에 닿는 길은 하나뿐이다** — 말로 시키는 줄이든 도크든 `receive()` 로 모인다.
-   * 두 길을 두면 「지금 / 후보」 두 칸을 두 곳에서 그리게 되고, 어느 쪽이 이기는지 저작자가
-   * 매번 생각해야 한다.
-   */
-  private takeProposal(proposal: any) {
-    const source = proposal?.source
-    if (!source) {
-      // 카드는 왔는데 후보가 없다 — 조용히 넘기지 않는다. 저작자가 눌렀으니 답이 있어야 한다.
-      this.saveFailure = i18next.t('figure.text.proposal-had-no-source')
-      return
-    }
-
-    this.receive({
-      source: JSON.stringify(source),
-      grade: proposal.score?.grade ?? '',
-      triangles: proposal.cost?.triangles ?? 0,
-      groups: proposal.cost?.groups ?? 0,
-      attempts: proposal.attempts ?? 1
-    })
-  }
-
   /**
    * 가운데 칸 위의 띠 — 무엇을 보고 있나와, 양쪽 칸을 접는 손잡이.
    *
@@ -833,7 +777,7 @@ export class FigureModellerPage extends FigureModellerPageBase {
     `
 
     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>`
@@ -868,16 +812,17 @@ export class FigureModellerPage extends FigureModellerPageBase {
   }
 
   /**
-   * AI 후보를 나란히 세운다.
+   * AI 후보를 실제 배치 크기에서도 본다.
    *
-   * 후보는 저장 형식으로 온다. 미리보기는 씬 모델을 받으므로 여기서 한 번 변환한다 —
-   * 후보를 받아들이기 전까지는 편집 데이터가 아니므로 상태로 두지 않는다.
+   * 편집 캔버스 한 장으로는 `repeat`·`fixed`·`anchor`가 맞는지 알 수 없다. 후보는 아직
+   * 정본이 아니므로 저장하지 않고, `figure-preview`가 같은 FigureSource를 기준 크기와
+   * 일곱 가지 확장 축에서 실제 FigureInstance로 세운다. 따라서 저작자는 "좋아 보이는
+   * 한 장"이 아니라 배치될 때도 붙어 있는지를 보고 수락한다.
    */
   private renderProposed() {
-    if (!this.proposal) return ''
+    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>`
   }
 
   /**
@@ -895,22 +840,35 @@ export class FigureModellerPage extends FigureModellerPageBase {
    * 안 들고, 우리가 생각 못 한 조합을 막아 주기 때문이다.
    */
   private renderDecision() {
-    if (!this.proposal) return ''
+    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: Event) => (this.proposalSession = { ...this.proposalSession!, note: (event.target as HTMLInputElement).value })}
+          />
+        </label>
+      </div>
+
       ${changes.length > 0
         ? html`
             <div changes>
@@ -926,6 +884,25 @@ export class FigureModellerPage extends FigureModellerPageBase {
     `
   }
 
+  /** 후보 품질 판단의 근거를 수락 전에 전부 보여 준다. */
+  private 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>
+    `
+  }
+
   /** 변경 하나. 무엇을 하겠다는 것인지 부호로 먼저 말한다. */
   private renderChange(change: proposals.ProposalChange) {
     const icon = {
@@ -938,7 +915,7 @@ export class FigureModellerPage extends FigureModellerPageBase {
       styleKit: 'palette'
     }[change.kind]
 
-    const on = this.picked.has(change.key)
+    const on = this.proposalSession?.picked.has(change.key)
 
     return html`
       <button
@@ -954,10 +931,7 @@ export class FigureModellerPage extends FigureModellerPageBase {
   }
 
   private toggle(key: string) {
-    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)
   }
 
   /**
@@ -966,22 +940,29 @@ export class FigureModellerPage extends FigureModellerPageBase {
    * 원본 데이터에 넣지 않는다. 나란히 두고 저작자가 고른다. AI 가 원본 데이터에 직접 쓰면
    * 무엇이 자기 것이고 무엇이 기계 것인지 모르게 된다.
    */
-  private receive(proposal: {
-    source: string
-    grade: string
-    triangles: number
-    groups: number
-    attempts: number
-  }) {
-    this.proposal = JSON.parse(proposal.source) as FigureSource
-    // 처음에는 전부 골라 둔다 — 통째로 받는 것이 보통의 길이다.
-    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
-    }
+  private receive(proposal: FigureProposal) {
+    this.proposalSession = proposalSessions.openAiProposal(this.folded, proposal)
+  }
+
+  /**
+   * 발행 게이트의 구조화된 수정안 하나를 현재 작업 사본에만 겹쳐 본다. 서버가 준 값은
+   * `part.anchor.axis = to`라는 데이터이지 사람이 읽을 문장을 다시 해석한 결과가 아니다.
+   * 원본 `board`/`parts`는 여기서 전혀 바꾸지 않고, 아래의 `take()`만 바꾼 사본을 적용한다.
+   */
+  private previewSizingFix(fix: FigureGateFix) {
+    if (!this.folded) return
+    this.proposalSession = proposalSessions.openSizingFix(this.folded, fix)
+  }
+
+  /**
+   * 원클릭 적용은 서버가 모든 크기 변경 case를 재검사해 안전하다고 표시한 한-앵커 후보에만 연다.
+   * 그래도 저장은 저작자의 별도 행위다. 잘못 눌러도 DB 정본이나 발행판은 바뀌지 않는다.
+   */
+  private applySizingFix(fix: FigureGateFix) {
+    if (!fix.safe || !this.folded) return
+    this.previewSizingFix(fix)
+    if (!this.proposalSession) return
+    this.take()
   }
 
   /**
@@ -991,22 +972,45 @@ export class FigureModellerPage extends FigureModellerPageBase {
    * 하므로 그쪽이 자연스럽다. 받아들인 결과는 다시 씬 모델로 되돌려 편집을 이어간다.
    */
   private take() {
-    if (!this.proposal) return
+    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)
+  }
+
+  /**
+   * 후보에 대한 사람의 결정을 도크에만 알린다.
+   *
+   * 이 기록은 분석 이벤트나 Figure 속성이 아니다. 같은 모델러 세션에서 다음 요청을 더 잘
+   * 이해시키는 짧은 신호일 뿐이다. 원본 source나 사람의 작업 내용을 다시 보내지 않고, 사람이
+   * 후보 변경 중 몇 개를 받아들였는지와 이미 화면에 보였던 품질 판정만 보낸다.
+   */
+  private reportProposalFeedback(outcome: 'accepted' | 'discarded') {
+    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
+        }
+      })
+    )
   }
 
-  private discard() {
-    this.proposal = undefined
-    this.proposalOf = undefined
-    this.picked = new Set()
+  private discard(reportFeedback = true) {
+    if (reportFeedback) this.reportProposalFeedback('discarded')
+    this.proposalSession = undefined
   }
 
   /**
@@ -1135,6 +1139,19 @@ export class FigureModellerPage extends FigureModellerPageBase {
     this.dirty = true
   }
 
+  /**
+   * 분류와 태그를 고친다.
+   *
+   * 정본(`source`)이 아니라 **카탈로그의 값**이다 — 도형이 무엇으로 생겼는지가 아니라 어디에
+   * 걸리는지다. 그래서 점수도 발행도 흔들리지 않는다.
+   */
+  private catalog(patch: { category?: string; tags?: string[] }) {
+    if (!this.figure) return
+
+    this.figure = { ...this.figure, ...patch }
+    this.dirty = true
+  }
+
   /**
    * 부품 목록을 갈아 끼운다.
    *
@@ -1339,6 +1356,12 @@ export class FigureModellerPage extends FigureModellerPageBase {
       if (this.figure.id) {
         const result = await updateFigure(this.figure.id, {
           name: this.figure.name,
+          /*
+            카탈로그의 값도 함께 보낸다. 화면에서 고쳐 놓고 저장에 안 실으면 저장 뒤에 조용히
+            사라진다 — 저작자는 저장했다고 보고 다시 열면 없다.
+          */
+          category: this.figure.category,
+          tags: this.figure.tags,
           source: sourceJson,
           thumbnail
         })
@@ -1355,6 +1378,8 @@ export class FigureModellerPage extends FigureModellerPageBase {
         const result = await createFigure({
           type: this.folded.type,
           name: this.figure.name,
+          category: this.figure.category,
+          tags: this.figure.tags,
           source: sourceJson,
           thumbnail
         })

package/client/types.ts

@@ -14,7 +14,10 @@ export interface Figure {
   type: string
   name: string
   description?: string
+  /** 분류 하나 — 팔레트에서 묶어 보이는 기준. */
   category?: string
+  /** 태그 여럿 — 분류로는 못 하는 찾기. */
+  tags?: string[]
   state?: 'draft' | 'released'
   /** 재활용 점수 0~100. 서버가 정본에서 계산한다 — 화면이 보내는 값이 아니다. */
   score?: number
@@ -63,6 +66,7 @@ export interface NewFigure {
   name: string
   description?: string
   category?: string
+  tags?: string[]
   source: string
   properties?: string
   state?: 'draft' | 'released'
@@ -79,6 +83,8 @@ export interface FigurePatch {
   name?: string
   description?: string
   category?: string
+  /** 빈 배열은 「전부 지운다」, 안 주는 것은 「건드리지 않는다」. */
+  tags?: string[]
   source?: string
   properties?: string
   state?: 'draft' | 'released'
@@ -106,12 +112,31 @@ export interface FigureProposal {
   triangles: number
   /** 재질 묶음 = 인스턴스 하나가 무는 draw call. */
   groups: number
+  /** Rule-based review of measurable design concerns; it is not an aesthetic verdict. */
+  quality: {
+    status: 'ready' | 'review'
+    summary: string
+    findings: Array<{ dimension: string; code: string; message: string }>
+    visualRegions: number
+    visualCoverage: number
+    visualReadability: number
+  }
   /** 형식은 맞으나 정책을 넘은 것. 막지 않는다 — 저작자가 정한다. */
   violations: FigureFinding[]
   /** 몇 번 만에 됐나. 진단용이다. */
   attempts: number
 }
 
+/** 사람이 후보를 수락하거나 버릴 때 직접 남긴 현재 저작 세션의 참고 신호. */
+export interface ProposalFeedback {
+  outcome: 'accepted' | 'discarded'
+  selectedChanges: number
+  totalChanges: number
+  note?: string
+  grade?: string
+  quality?: { status?: 'ready' | 'review'; findingCodes?: string[] }
+}
+
 /**
  * 발행 판정 한 줄.
  *
@@ -119,6 +144,18 @@ export interface FigureProposal {
  * 발행 판정은 막는 것과 알리는 것을 함께 내므로 어느 쪽인지를 값이 스스로 말한다 — 코드를 보고
  * 화면이 다시 분류하면 규칙이 두 벌이 된다.
  */
+/** One reversible anchor edit the sizing gate has measured against this exact source. */
+export interface FigureGateFix {
+  findingWay: string
+  part: string
+  axis: 'x' | 'y' | 'z'
+  from?: string
+  to: 'min' | 'center' | 'max' | 'span'
+  resolved: number
+  /** All blocking sizing cases clear after this exact edit was remeasured server-side. */
+  safe: boolean
+}
+
 export interface FigureGateFinding {
   code: string
   message: string
@@ -128,6 +165,8 @@ export interface FigureGateFinding {
   how?: string
   /** 갈라진 부품 이름들, 또는 정본 안의 경로. */
   at?: string
+  /** Candidate edits; the UI must preview and explicitly apply these, never auto-save them. */
+  fixes?: FigureGateFix[]
   blocking: boolean
 }