@things-factory/figure-ui 10.1.46 → 10.1.47

package/client/modeller/figure-v3-verdict.ts

@@ -1,66 +1,83 @@
 import '@material/web/icon/icon.js'
 
-import { css, html, LitElement, nothing } from 'lit'
+import { css, html, LitElement, nothing, svg } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
-import { parseV3Asset, v3CostOf } from '@hatiolab/figure-model'
+import { ScrollbarStyles } from '@operato/styles'
+import { LIMITS, parseV3Asset, V3_PER_INSTANCE, v3CostOf } from '@hatiolab/figure-model'
 
 import { inspectFigureDraft } from '../graphql/index.js'
 import type { FigureInspection } from '../types.js'
 import { gateFindingStyles, renderGateFinding } from './gate-findings.js'
-import { capacityFrom, MEASURED } from './scene-budget.js'
-import type { FigureCapacity } from './scene-budget.js'
+import { MEASURED } from './scene-budget.js'
+import { SidePanelStyles } from './side-panel-styles.js'
+import { budgetOf, CURVE_SIZE, curveLayout, GRADE_SCALE, shortNumber, v3ReportOf } from './v3-maturity.js'
+import type { V3BudgetUse, V3MaturityAxis, V3Report } from './v3-maturity.js'
 
 /** How long an edit settles before the server is asked again. One question per pause, not one per keystroke. */
 export const VERDICT_SETTLE_MS = 400
 
 /**
- * 판정 — the V3 modeller's verdict while editing (parity row ①).
+ * 성숙도 — the V3 modeller's verdict while editing (parity row ①), laid out as V2's report (`figure-report.ts`).
  *
- * The V2 modeller shows, as the author edits, how many of the figure fit on one screen and what would stop it
- * being published. The V3 page showed neither: the author learned what blocked a release only after saving, in the
- * release panel. This tab answers both from the source being edited.
+ * V2's report showed, as the author edits: how many fit on one screen with the grade beside it and the budget that
+ * decided the grade, the grade scale, six maturity axes as a radar and a list, the budget bars, the drawing cost,
+ * the reuse trend, and the findings. The first V3 tab kept only the count and the findings (user, 2026-09-24:
+ * 「분석부분도 많이 부족하고, 왜 이렇게 너프되었는지」). This is V2's report again, over V3 numbers.
  *
- * The count is computed here, from `v3CostOf` and the same `capacityFrom` the catalogue cards use, so the tab and
- * the card cannot disagree. The findings are not: they come from the server's release door (`inspectFigureDraft`),
- * the same door and the same sentences as the release panel. A second judgement on the screen would say something
- * different the first time either changed.
+ * ## What is computed where
  *
- * No grade. V2's grade measures V2 reuse; nothing measures it for V3, so the tab shows no letter rather than one
- * nothing computed.
+ * The numbers come from `v3-maturity.ts`, which reads the evaluated asset the way the V3 renderer draws it — the
+ * screen calls and shows, it does not count. The count uses the same `capacityFrom` the catalogue cards use, so the
+ * tab and the card cannot disagree.
+ *
+ * The findings do not come from here: they come from the server's release door (`inspectFigureDraft`), the same
+ * door and the same sentences as the release panel. A second judgement on the screen would say something different
+ * the first time either changed. V2's report drew its findings from `validate`; V3's release judgement is the
+ * server's, so that section is the server's answer.
+ *
+ * ## The grade
+ *
+ * figure-model's `v3ScoreOf`, which the catalogue uses too: headroom against placing `LIMITS.screenInstances` of the
+ * figure on one screen (chief architect, 2026-09-24) -- the screen's measured groups and its triangle target shared
+ * per instance -- and V2's rule limits for independently moved parts and transparent materials, decided by the
+ * tightest, on V2's scale. The two V2 budgets V3 has no field for are left out and the tab says so.
  */
+/** A per-instance share of the screen is not a whole number; what an instance may draw is the whole part of it. */
+const limitOf = (use: V3BudgetUse) => Math.floor(use.limit).toLocaleString()
+
 @customElement('figure-v3-verdict')
 export class FigureV3Verdict extends localize(i18next)(LitElement) {
   static styles = [
+    ScrollbarStyles,
+    SidePanelStyles,
     gateFindingStyles,
     css`
       :host {
         display: flex;
         flex-direction: column;
-        gap: 14px;
-        padding: 12px;
-        overflow: auto;
-        font-size: 0.76rem;
-        color: var(--md-sys-color-on-surface);
+        overflow-y: auto;
       }
-      section > h3 {
-        margin: 0 0 6px 0;
-        font-size: var(--ui-t-micro, 11px);
-        font-weight: 700;
-        letter-spacing: 0.04em;
-        text-transform: uppercase;
-        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
-      }
-      p {
-        margin: 4px 0 0;
+      section p {
+        margin: 0;
       }
+
+      /* ── How many fit ───────────────────────────────────────────────
+         The value of low poly is how many can stand on one screen, so that answer leads. The grade says whether
+         the shape keeps inside its declared limits, so it is the small badge beside it. */
       p[lead],
       p[basis],
       p[quiet] {
+        font-size: 0.74rem;
+        line-height: 1.55;
         color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
       }
-      div[count] {
+      p[basis] em {
+        font-style: normal;
+        color: var(--md-sys-color-tertiary);
+      }
+      div[verdict] {
         display: flex;
         align-items: baseline;
         gap: 6px;
@@ -77,6 +94,268 @@ export class FigureV3Verdict extends localize(i18next)(LitElement) {
         font-weight: 600;
         color: var(--md-sys-color-primary);
       }
+      /* The badge says what it measures (headroom), so its number is not read as a score out of 100. */
+      span[grade] {
+        display: flex;
+        align-items: baseline;
+        gap: 5px;
+        margin-left: auto;
+        padding: 3px 10px;
+        font-size: 0.76rem;
+        font-weight: 700;
+        color: var(--md-sys-color-on-primary-container);
+        background-color: var(--md-sys-color-primary-container);
+        border-radius: 999em;
+      }
+      span[grade] small {
+        display: inline;
+        margin: 0;
+        font-size: 0.68rem;
+        font-weight: 500;
+        color: inherit;
+      }
+      /* C keeps within the limit. Red is for over it (D) only; red on a kept limit asks for a fix nothing needs. */
+      span[grade][tight] {
+        color: var(--md-sys-color-on-tertiary-container);
+        background-color: var(--md-sys-color-tertiary-container);
+      }
+      span[grade][over] {
+        color: var(--md-sys-color-on-error-container);
+        background-color: var(--md-sys-color-error-container);
+      }
+      p[because] {
+        font-size: 0.78rem;
+        line-height: 1.6;
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      }
+      p[because] strong {
+        color: var(--md-sys-color-on-surface);
+      }
+      /* The grade scale. Not folded away: it is compared against every time, not learned once. */
+      p[scale] {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 2px 10px;
+        font-size: 0.7rem;
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      }
+      p[scale] b {
+        font-weight: 700;
+      }
+      p[scale] span[now] {
+        color: var(--md-sys-color-on-surface);
+      }
+      p[scale] span[now] b {
+        color: var(--md-sys-color-primary);
+      }
+
+      /* ── Maturity radar ─────────────────────────────────────────────
+         Only the measured axes are drawn; an unmeasured one drawn as a spoke reads as a dent, which is a zero. */
+      div[radar] {
+        display: flex;
+        justify-content: center;
+        padding: 2px 0 6px 0;
+        color: var(--md-sys-color-primary);
+      }
+      div[radar] svg {
+        width: 100%;
+        max-width: 240px;
+        height: auto;
+      }
+      div[radar] polygon[web] {
+        fill: none;
+        stroke: var(--md-sys-color-outline-variant);
+        stroke-width: 0.6;
+      }
+      div[radar] line[spoke] {
+        stroke: var(--md-sys-color-outline-variant);
+        stroke-width: 0.6;
+      }
+      div[radar] polygon[shape] {
+        fill: color-mix(in srgb, var(--md-sys-color-primary) 22%, transparent);
+        stroke: var(--md-sys-color-primary);
+        stroke-width: 1.4;
+        stroke-linejoin: round;
+      }
+      div[radar] circle[dot] {
+        fill: var(--md-sys-color-primary);
+      }
+      div[radar] text {
+        font-size: 5.2px;
+        fill: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      }
+      p[unmeasured] {
+        font-size: 0.7rem;
+        line-height: 1.5;
+        color: var(--md-sys-color-tertiary);
+      }
+
+      /* ── Axes and budgets ───────────────────────────────────────────
+         Not merged into one number: merged, 「what to fix」 disappears. */
+      ul[axes],
+      ul[budgets] {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        display: flex;
+        flex-direction: column;
+        gap: 7px;
+      }
+      ul[axes] li,
+      ul[budgets] li {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        gap: 2px 8px;
+        font-size: 0.75rem;
+      }
+      ul[axes] li[blocked] {
+        opacity: 0.7;
+      }
+      ul[axes] em {
+        grid-column: 1 / -1;
+        font-style: normal;
+        font-size: 0.68rem;
+        line-height: 1.5;
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      }
+      ul[axes] li[blocked] em {
+        color: var(--md-sys-color-tertiary);
+      }
+      span[reading] {
+        font-family: var(--mono-font, monospace);
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      }
+      div[bar] {
+        grid-column: 1 / -1;
+        height: 4px;
+        background-color: var(--md-sys-color-surface-container-highest);
+        border-radius: 2px;
+        overflow: hidden;
+      }
+      div[bar] > i {
+        display: block;
+        height: 100%;
+        background-color: var(--md-sys-color-primary);
+      }
+      div[bar] > i[tight] {
+        background-color: var(--md-sys-color-error);
+      }
+
+      /* ── Drawing cost ─────────────────────────────────────────────── */
+      dl[metrics] {
+        margin: 0;
+        display: grid;
+        grid-template-columns: 1fr auto;
+        gap: 4px 8px;
+        font-size: 0.78rem;
+      }
+      dl[metrics] dt {
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      }
+      dl[metrics] dd {
+        margin: 0;
+        text-align: right;
+        font-family: var(--mono-font, monospace);
+      }
+
+      /* ── Trend ──────────────────────────────────────────────────────
+         The chart's natural size is 680px; in a 300px side its words are 4px. The side holds a button, the chart
+         opens at its own size. */
+      button[expand] {
+        justify-self: start;
+        padding: 4px 10px;
+        font: inherit;
+        font-size: 0.74rem;
+        color: var(--md-sys-color-on-surface);
+        background: none;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 6px;
+        cursor: pointer;
+      }
+      button[expand]:hover {
+        background-color: var(--md-sys-color-surface-container);
+      }
+      div[sheet] {
+        position: fixed;
+        inset: 0;
+        z-index: 10;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 12px;
+        background-color: color-mix(in srgb, var(--md-sys-color-scrim, black) 32%, transparent);
+      }
+      div[sheet] > figure {
+        max-width: 100%;
+        max-height: 100%;
+        margin: 0;
+        padding: 12px;
+        overflow: auto;
+        color: var(--md-sys-color-on-surface);
+        background-color: var(--md-sys-color-surface-container-lowest);
+        border-radius: 6px;
+        box-shadow: 0 8px 32px color-mix(in srgb, var(--md-sys-color-shadow, black) 28%, transparent);
+      }
+      div[sheet] svg {
+        display: block;
+        /* Not shrunk below its natural size — a narrow window scrolls instead. */
+        min-width: 680px;
+        font-family: inherit;
+        font-size: 11px;
+        fill: currentColor;
+      }
+      div[sheet] svg [grid] {
+        stroke: currentColor;
+        stroke-opacity: 0.12;
+      }
+      div[sheet] svg [muted] {
+        opacity: 0.55;
+      }
+      div[sheet] svg path[series] {
+        fill: none;
+        stroke-width: 2;
+        stroke-linejoin: round;
+      }
+      div[sheet] svg [series='triangles'] {
+        stroke: var(--md-sys-color-error);
+        fill: var(--md-sys-color-error);
+      }
+      div[sheet] svg [series='drawCalls'] {
+        stroke: var(--md-sys-color-tertiary);
+        fill: var(--md-sys-color-tertiary);
+      }
+      div[sheet] svg [series='geometries'] {
+        stroke: var(--md-sys-color-primary);
+        fill: var(--md-sys-color-primary);
+      }
+      div[sheet] svg [series='materials'] {
+        stroke: var(--md-sys-color-secondary);
+        fill: var(--md-sys-color-secondary);
+      }
+      div[sheet] svg path[series],
+      div[sheet] svg line[series] {
+        fill: none;
+      }
+      /* A legend value is written in its line's colour, not outlined in it. */
+      div[sheet] svg text[series] {
+        stroke: none;
+      }
+      div[sheet] figcaption {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+      }
+      div[sheet] button[close] {
+        padding: 5px 14px;
+        font: inherit;
+        color: var(--md-sys-color-on-surface);
+        background: none;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 999em;
+        cursor: pointer;
+      }
+
+      /* ── Release verdict ───────────────────────────────────────────── */
       p[clear] {
         color: var(--md-sys-color-primary);
         font-weight: 600;
@@ -105,9 +384,12 @@ export class FigureV3Verdict extends localize(i18next)(LitElement) {
   /** Changing the type changes the verdict (a temporary type is refused), so it is a reason to ask again. */
   @property({ type: String }) figureType?: string
 
-  @state() private capacity?: FigureCapacity
+  /** The report over the source being edited. Absent when nothing is drawn, or the format refuses the source. */
+  @state() private report?: V3Report
   /** Bodies in the asset, drawn or hidden. With none there is nothing to fit the space to, so the button is not offered. */
   @state() private bodies = 0
+  /** Whether the trend chart is open at its own size. */
+  @state() private expanded = false
   @state() private inspection?: FigureInspection
   @state() private failure = ''
   @state() private asking = false
@@ -127,19 +409,21 @@ export class FigureV3Verdict extends localize(i18next)(LitElement) {
   }
 
   private measure() {
-    let capacity: FigureCapacity | undefined
+    let report: V3Report | undefined
     let bodies = 0
     try {
-      const cost = this.source ? v3CostOf(parseV3Asset(this.source)) : undefined
-      capacity = cost ? capacityFrom(cost.groups, cost.triangles) : undefined
+      const asset = this.source ? parseV3Asset(this.source) : undefined
+      const cost = asset ? v3CostOf(asset) : undefined
       bodies = cost ? cost.groups + cost.hidden : 0
+      report = asset ? v3ReportOf(asset) : undefined
     } catch {
-      /* A source the format refuses has no count; the server's finding below says why. */
-      capacity = undefined
+      /* A source the format refuses has no report; the server's finding below says why. */
+      report = undefined
     }
-    this.capacity = capacity
+    this.report = report
     this.bodies = bodies
-    this.dispatchEvent(new CustomEvent('capacity-changed', { detail: { instances: capacity?.instances } }))
+    if (!report) this.expanded = false
+    this.dispatchEvent(new CustomEvent('capacity-changed', { detail: { instances: report?.capacity.instances, budget: budgetOf(report) } }))
   }
 
   private schedule() {
@@ -171,38 +455,292 @@ export class FigureV3Verdict extends localize(i18next)(LitElement) {
   }
 
   render() {
-    return html`${this.renderCount()} ${this.renderGate()}`
+    /*
+      With nothing drawn the report is guidance, not a verdict: the sections below have meaning only over parts,
+      and a number drawn from nothing reads as zero, which reads as bad. The release verdict stays — a new figure
+      is already refused for its undeclared space, and the way out is offered there.
+    */
+    const report = this.report
+    if (!report) {
+      return html`
+        <section>
+          <h3>${i18next.t('figure.label.maturity')}</h3>
+          <p quiet>${i18next.t('figure.text.report-appears-when-you-add-a-part')}</p>
+        </section>
+        ${this.renderGate()}
+      `
+    }
+    return html`
+      ${this.renderVerdict(report)} ${this.renderAxes(report)} ${this.renderBudgets(report)} ${this.renderMetrics(report)}
+      ${this.renderCurve()} ${this.renderGate()} ${this.renderSheet(report)}
+    `
   }
 
-  private renderCount() {
-    const capacity = this.capacity
+  /**
+   * The head — how many fit, with the grade beside it, the budget that decided it, the scale, and the basis.
+   *
+   * The count's denominator is measured (2026-09-18, Apple M5) and says so with the machine and the date; the
+   * triangle side is still the design document's target and says that.
+   */
+  private renderVerdict(report: V3Report) {
+    const { capacity, score } = report
     return html`
       <section>
         <h3>${i18next.t('figure.label.maturity')}</h3>
-        <p lead>${i18next.t('figure.text.how-many-fit')}</p>
-        ${capacity
-          ? html`
-              <div count>
-                <span capacity>${capacity.instances.toLocaleString()}</span>
-                <span unit>${i18next.t('figure.text.instances-unit')}</span>
-              </div>
-              <p basis>
-                ${i18next.t('figure.text.bound-by-' + capacity.bound, {
-                  per: capacity.per.toLocaleString(),
-                  budget: capacity.budget.toLocaleString()
-                })}
-                <em>
-                  ${capacity.bound === 'groups'
-                    ? i18next.t('figure.text.budget-measured-on', { gpu: MEASURED.gpu, on: MEASURED.on })
-                    : i18next.t('figure.text.budget-not-measured-yet')}
-                </em>
-              </p>
+        <p lead>${i18next.t('figure.label.axis-scale')} — ${i18next.t('figure.text.how-many-fit')}</p>
+        <div verdict>
+          <span capacity>${capacity.instances.toLocaleString()}</span>
+          <span unit>${i18next.t('figure.text.instances-unit')}</span>
+          <span
+            grade
+            ?tight=${score.grade === 'C'}
+            ?over=${score.grade === 'D'}
+            title=${i18next.t('figure.text.grade-explained', { target: LIMITS.screenInstances })}
+          >
+            ${score.grade}
+            <small>${i18next.t('figure.text.headroom-percent', { percent: score.score })}</small>
+          </span>
+        </div>
+        <p because>
+          ${i18next.t('figure.text.grade-decided-by')}
+          <strong>${i18next.t('figure.label.budget-' + score.tightest.key)}</strong>
+          — ${score.tightest.used.toLocaleString()} / ${limitOf(score.tightest)} (${Math.round(score.tightest.ratio * 100)}%)
+        </p>
+        <p basis>
+          ${i18next.t('figure.text.grade-target', {
+            target: LIMITS.screenInstances,
+            groups: Math.floor(V3_PER_INSTANCE.groups),
+            triangles: Math.floor(V3_PER_INSTANCE.triangles).toLocaleString()
+          })}
+        </p>
+        ${this.renderGradeScale(score.grade)}
+        <p basis>
+          ${i18next.t('figure.text.bound-by-' + capacity.bound, {
+            per: capacity.per.toLocaleString(),
+            budget: capacity.budget.toLocaleString()
+          })}
+          <em>
+            ${capacity.bound === 'groups'
+              ? i18next.t('figure.text.budget-measured-on', { gpu: MEASURED.gpu, on: MEASURED.on })
+              : i18next.t('figure.text.budget-not-measured-yet')}
+          </em>
+        </p>
+      </section>
+    `
+  }
+
+  /** A · B · C · D and where this figure stands, drawn from the bounds the grade is computed with. */
+  private renderGradeScale(now: string) {
+    const bounds = [...GRADE_SCALE.map(([grade, bound]) => [grade, `≤ ${bound * 100}%`]), ['D', '> 100%']]
+    return html`
+      <p scale>
+        <span>${i18next.t('figure.text.grade-scale-lead')}</span>
+        ${bounds.map(([grade, bound]) => html`<span ?now=${grade === now}><b>${grade}</b> ${bound}</span>`)}
+      </p>
+    `
+  }
+
+  /**
+   * Maturity by axis — a radar of the measured axes, a line naming the unmeasured ones, and the list.
+   *
+   * Scale is left out of the list: it leads the tab, and the same number twice reads as two different things.
+   */
+  private renderAxes(report: V3Report) {
+    const measured = report.axes.filter(axis => axis.ratio !== undefined)
+    const unmeasured = report.axes.filter(axis => axis.ratio === undefined)
+    return html`
+      <section>
+        <h3>${i18next.t('figure.label.by-axis')}</h3>
+        <div radar>${this.renderRadar(measured)}</div>
+        ${unmeasured.length
+          ? html`<p unmeasured>
+              ${i18next.t('figure.text.axes-not-measurable-yet', {
+                axes: unmeasured.map(axis => i18next.t('figure.label.axis-' + axis.key)).join(' · ')
+              })}
+            </p>`
+          : nothing}
+        <ul axes>
+          ${report.axes.filter(axis => axis.key !== 'scale').map(axis => this.renderAxis(axis))}
+        </ul>
+      </section>
+    `
+  }
+
+  /** V2's radar: rings at a third, two thirds and full, short names so the left edge is not cut. */
+  private renderRadar(axes: V3MaturityAxis[]) {
+    const cx = 60
+    const cy = 46
+    const r = 28
+    const at = (index: number, ratio: number) => {
+      const angle = -Math.PI / 2 + (index * 2 * Math.PI) / axes.length
+      return [cx + r * ratio * Math.cos(angle), cy + r * ratio * Math.sin(angle)]
+    }
+    const clamp = (ratio?: number) => Math.max(0.04, Math.min(1, ratio ?? 0))
+    const points = axes.map((axis, index) => at(index, clamp(axis.ratio)).map(n => n.toFixed(1)).join(',')).join(' ')
+
+    return svg`
+      <svg viewBox="0 0 120 96" aria-hidden="true">
+        ${[0.33, 0.66, 1].map(
+          ring => svg`<polygon web points=${axes.map((_, i) => at(i, ring).map(n => n.toFixed(1)).join(',')).join(' ')}></polygon>`
+        )}
+        ${axes.map((_, index) => {
+          const [x, y] = at(index, 1)
+          return svg`<line spoke x1=${cx} y1=${cy} x2=${x.toFixed(1)} y2=${y.toFixed(1)}></line>`
+        })}
+        <polygon shape points=${points}></polygon>
+        ${axes.map((axis, index) => {
+          const [x, y] = at(index, clamp(axis.ratio))
+          return svg`<circle dot cx=${x.toFixed(1)} cy=${y.toFixed(1)} r="1.4"></circle>`
+        })}
+        ${axes.map((axis, index) => {
+          const [x, y] = at(index, 1.28)
+          const anchor = x < cx - 3 ? 'end' : x > cx + 3 ? 'start' : 'middle'
+          return svg`<text x=${x.toFixed(1)} y=${(y + 1.8).toFixed(1)} text-anchor=${anchor}>${i18next.t('figure.label.axis-' + axis.key + '-short')}</text>`
+        })}
+      </svg>
+    `
+  }
+
+  private renderAxis(axis: V3MaturityAxis) {
+    const name = i18next.t('figure.label.axis-' + axis.key)
+    if (axis.blocked) {
+      return html`
+        <li blocked>
+          <span>${name}</span>
+          <span reading>${i18next.t('figure.text.not-measurable-yet')}</span>
+          <em>${i18next.t(axis.blocked)}</em>
+        </li>
+      `
+    }
+    const ratio = Math.max(0, Math.min(1, axis.ratio ?? 0))
+    return html`
+      <li>
+        <span>${name}</span>
+        <span reading>${axis.readingKey ? i18next.t(axis.readingKey) : (axis.reading ?? '')}</span>
+        <div bar><i style="width:${Math.round(ratio * 100)}%"></i></div>
+        ${axis.because ? html`<em>${i18next.t(axis.because)}</em>` : nothing}
+      </li>
+    `
+  }
+
+  /** The budget bars. The one closest to its limit is coloured — it decided the grade. */
+  private renderBudgets(report: V3Report) {
+    const { score } = report
+    return html`
+      <section>
+        <h3>${i18next.t('figure.label.budgets')}</h3>
+        <ul budgets>
+          ${score.budgets.map(
+            use => html`
+              <li>
+                <span>${i18next.t('figure.label.budget-' + use.key)}</span>
+                <span>${use.used.toLocaleString()} / ${limitOf(use)}</span>
+                <div bar><i ?tight=${use.key === score.tightest.key} style="width:${Math.round(Math.min(1, use.ratio) * 100)}%"></i></div>
+              </li>
             `
-          : html`<p quiet>${i18next.t('figure.text.maturity-blocked-no-parts')}</p>`}
+          )}
+        </ul>
+        <p quiet>${i18next.t('figure.text.budgets-not-in-v3')}</p>
       </section>
     `
   }
 
+  private renderMetrics(report: V3Report) {
+    return html`
+      <section>
+        <h3>${i18next.t('figure.label.weight')}</h3>
+        <dl metrics>
+          <dt>${i18next.t('figure.label.triangles')}</dt>
+          <dd>${report.cost.triangles.toLocaleString()}</dd>
+          <dt>${i18next.t('figure.label.distinct-shapes')}</dt>
+          <dd>${report.distinctShapes}</dd>
+          <dt>${i18next.t('figure.label.distinct-materials')}</dt>
+          <dd>${report.distinctMaterials}</dd>
+        </dl>
+      </section>
+    `
+  }
+
+  private renderCurve() {
+    return html`
+      <section>
+        <h3>${i18next.t('figure.label.reuse-trend')}</h3>
+        <button expand @click=${() => (this.expanded = true)}>${i18next.t('figure.button.see-the-trend-chart')}</button>
+      </section>
+    `
+  }
+
+  /**
+   * The trend at its own size — V2's chart: both axes logarithmic, the growing lines against the flat ones, and a
+   * legend with each line's value at the last count.
+   */
+  private renderSheet(report: V3Report) {
+    if (!this.expanded) return nothing
+    const layout = curveLayout(report.curve)
+    if (!layout) return nothing
+    const { width, height, pad } = CURVE_SIZE
+    const plotW = width - pad.left - pad.right
+    const plotH = height - pad.top - pad.bottom
+    const last = report.curve[report.curve.length - 1]!
+    const label = (key: string) =>
+      i18next.t(
+        {
+          triangles: 'figure.label.triangles',
+          drawCalls: 'figure.label.draw-calls',
+          geometries: 'figure.label.vertex-buffers',
+          materials: 'figure.label.distinct-materials'
+        }[key]!
+      )
+
+    return html`
+      <div sheet @click=${() => (this.expanded = false)}>
+        <figure @click=${(e: Event) => e.stopPropagation()}>
+          ${svg`
+            <svg viewBox="0 0 ${width} ${height}" width=${width} height=${height} role="img">
+              <text x=${pad.left} y="22" font-size="13" font-weight="600">${i18next.t('figure.text.trend-chart-title')}</text>
+              <text x=${pad.left} y="38" muted>${i18next.t('figure.text.trend-chart-lead')}</text>
+              ${layout.yTicks.map(
+                tick => svg`
+                  <line grid x1=${pad.left} y1=${tick.y.toFixed(1)} x2=${(pad.left + plotW).toFixed(1)} y2=${tick.y.toFixed(1)}></line>
+                  <text muted x=${pad.left - 8} y=${(tick.y + 3.5).toFixed(1)} text-anchor="end">${tick.label}</text>
+                `
+              )}
+              ${layout.xTicks.map(
+                tick => svg`
+                  <line grid x1=${tick.x.toFixed(1)} y1=${pad.top} x2=${tick.x.toFixed(1)} y2=${(pad.top + plotH).toFixed(1)}></line>
+                  <text muted x=${tick.x.toFixed(1)} y=${(pad.top + plotH + 16).toFixed(1)} text-anchor="middle">${tick.label}</text>
+                `
+              )}
+              <text muted x=${(pad.left + plotW / 2).toFixed(1)} y=${height - 8} text-anchor="middle">${i18next.t('figure.label.instance-count')}</text>
+              ${layout.lines.map(
+                line => svg`<path series=${line.key} d=${line.d} stroke-dasharray=${line.dashed ? '3 7' : 'none'}></path>`
+              )}
+              <g transform="translate(${width - pad.right + 14}, ${pad.top - 6})">
+                <text x="0" y="0" font-weight="600">${i18next.t('figure.text.trend-at-count', { n: shortNumber(last.instances) })}</text>
+                ${layout.lines.map((line, i) => {
+                  const y = 24 + i * 34
+                  return svg`
+                    <line series=${line.key} x1="0" y1=${y - 4} x2="18" y2=${y - 4} stroke-width="2" stroke-dasharray=${line.dashed ? '3 7' : 'none'}></line>
+                    <text x="24" y=${y}>${label(line.key)}</text>
+                    <text series=${line.key} x="24" y=${y + 12} font-weight="600">
+                      ${line.last.toLocaleString()}${line.flat ? ` · ${i18next.t('figure.text.trend-stays')}` : ''}
+                    </text>
+                  `
+                })}
+                ${layout.overlap !== undefined
+                  ? svg`<text muted x="0" y=${24 + layout.lines.length * 34 + 6}>${i18next.t('figure.text.trend-flat-lines-overlap', { value: layout.overlap.toLocaleString() })}</text>`
+                  : nothing}
+              </g>
+            </svg>
+          `}
+          <figcaption>
+            <button close @click=${() => (this.expanded = false)}>${i18next.t('figure.button.close')}</button>
+          </figcaption>
+        </figure>
+      </div>
+    `
+  }
+
   private renderGate() {
     const findings = this.inspection?.findings ?? []
     const blocking = findings.filter(finding => finding.blocking)