@cat-factory/app 0.251.0 → 0.252.0

package/app/components/media/ImageCompare.vue

@@ -16,6 +16,13 @@ const props = defineProps<{
   referenceId: string | null | undefined
   blobs: ArtifactBlobs
   busy?: boolean
+  /**
+   * Where the reference came from, when the caller knows. A frame rendered from a linked design
+   * and a mock a person attached are different claims about what "the reference" is, so the
+   * caption says which; absent leaves the plain label, which is what an unattributed reference
+   * honestly is.
+   */
+  referenceOrigin?: 'upload' | 'design' | null
 }>()
 
 const emit = defineEmits<{
@@ -196,6 +203,9 @@ function onRefInput(e: Event) {
       <figure class="space-y-1">
         <figcaption class="text-[10px] uppercase tracking-wide text-slate-500">
           {{ t('media.compare.reference') }}
+          <span v-if="referenceOrigin === 'design'" class="text-amber-300/80">
+            {{ t('media.compare.fromLinkedDesign') }}
+          </span>
         </figcaption>
         <button
           v-if="refUrl"

package/app/components/visualConfirm/VisualConfirmationWindow.vue

@@ -8,7 +8,7 @@
 // (per-view notes + a freeform box, composed into the Tester's fixer findings), or recapture.
 // References can be dropped straight onto a pair, or uploaded for any view below.
 import { computed, onUnmounted, reactive, ref, watch } from 'vue'
-import type { VisualConfirmStepState } from '~/types/execution'
+import type { VisualConfirmDesignGapReason, VisualConfirmStepState } from '~/types/execution'
 import { useArtifactBlobs } from '~/composables/useArtifactBlobs'
 import ImageCompare from '~/components/media/ImageCompare.vue'
 import ArtifactLightbox from '~/components/media/ArtifactLightbox.vue'
@@ -63,6 +63,23 @@ const OUTCOME_LABELS = computed<Record<'completed' | 'failed', string>>(() => ({
   failed: t('visualConfirm.outcome.failed'),
 }))
 
+// What the task's LINKED DESIGNS contributed. Present whenever a design is linked, including
+// when everything worked: a reviewer comparing a screen against a Figma frame needs to know the
+// frame is the design's own, and one seeing no design frames needs to know whether a design is
+// linked at all. Absent ⇒ the task links none, which this panel must not invent a line about.
+const design = computed(() => vc.value?.designReferences ?? null)
+
+// Exhaustive map of the gap vocabulary → copy, literal-keyed for the same drift-guard reason as
+// the outcome labels above. Each names a DIFFERENT fix, which is why the backend keeps them apart
+// instead of collapsing them into one "no images" absence.
+const DESIGN_GAP_LABELS = computed<Record<VisualConfirmDesignGapReason, string>>(() => ({
+  partial: t('visualConfirm.design.gap.partial'),
+  failed: t('visualConfirm.design.gap.failed'),
+  none: t('visualConfirm.design.gap.none'),
+  storage_unavailable: t('visualConfirm.design.gap.storage_unavailable'),
+  not_retained: t('visualConfirm.design.gap.not_retained'),
+}))
+
 // Resolve every pair's artifacts (the gallery + the lightbox share this one cache).
 watch(
   pairs,
@@ -212,6 +229,35 @@ async function onFilePicked(e: Event) {
           {{ vc.degradedReason }}
         </p>
 
+        <!-- What the linked designs contributed. Rendered even when nothing is missing, so a
+             reference the reviewer is judging against is never anonymous. -->
+        <section
+          v-if="design"
+          class="rounded-lg border border-slate-800 bg-slate-900/60 px-3 py-2 text-[12px] text-slate-300"
+        >
+          <p class="flex items-center gap-1.5">
+            <UIcon name="i-lucide-figma" class="h-3.5 w-3.5 shrink-0 text-amber-300" />
+            <span>{{
+              t('visualConfirm.design.summary', { count: design.images }, design.images)
+            }}</span>
+            <span v-if="design.dropped" class="text-slate-500">
+              {{ t('visualConfirm.design.dropped', { count: design.dropped }, design.dropped) }}
+            </span>
+          </p>
+          <!-- One line per short design, carrying both ways it can fall short: what its source
+               kept, and what this gallery's shared ceiling cut from it. A design the ceiling shut
+               out entirely reads as one with no frames unless it is named here. -->
+          <ul v-if="design.gaps?.length" class="mt-1.5 space-y-1 text-[11px] text-amber-300/90">
+            <li v-for="gap in design.gaps" :key="`${gap.title}-${gap.reason ?? 'capped'}`">
+              {{ t('visualConfirm.design.gapLine', { title: gap.title }) }}
+              <template v-if="gap.reason">{{ DESIGN_GAP_LABELS[gap.reason] }}</template>
+              <template v-if="gap.dropped">{{
+                t('visualConfirm.design.gapDropped', { count: gap.dropped }, gap.dropped)
+              }}</template>
+            </li>
+          </ul>
+        </section>
+
         <p
           v-if="working"
           class="flex items-center gap-2 rounded-lg border border-slate-800 bg-slate-950/40 px-3 py-2 text-[12px] text-slate-300"
@@ -228,6 +274,7 @@ async function onFilePicked(e: Event) {
               :view="p.view"
               :actual-id="p.actualArtifactId"
               :reference-id="p.referenceArtifactId"
+              :reference-origin="p.referenceOrigin"
               :blobs="blobs"
               :busy="busy"
               @expand="expand"

package/app/types/execution.ts

@@ -104,6 +104,10 @@ export type {
   HumanTestStepState,
   VisualConfirmStepState,
   VisualConfirmPair,
+  VisualConfirmReferenceOrigin,
+  VisualConfirmDesignGap,
+  VisualConfirmDesignGapReason,
+  VisualConfirmDesignReferences,
   VisualConfirmRound,
   ExecutionInstance,
   // The historical frontend name for a per-block review comment is the contract's

package/i18n/locales/de.json

@@ -6153,6 +6153,19 @@
     "history": {
       "heading": "Verlauf (keine Runden) | Verlauf ({count} Runde) | Verlauf ({count} Runden)",
       "fixRequested": "Korrektur angefordert"
+    },
+    "design": {
+      "summary": "Keine Frames stammen aus dem verknüpften Design. | 1 Frame aus dem verknüpften Design. | {count} Frames aus dem verknüpften Design.",
+      "dropped": "Es sind keine weiteren ausgeblendet. | 1 weiterer wird hier nicht angezeigt. | {count} weitere werden hier nicht angezeigt.",
+      "gapDropped": "Keiner seiner Frames ist ausgeblendet. | 1 seiner Frames wird hier nicht angezeigt. | {count} seiner Frames werden hier nicht angezeigt.",
+      "gapLine": "{title}:",
+      "gap": {
+        "partial": "nur ein Teil seiner Frames wurde gespeichert; aktualisiere das Dokument, um es erneut zu versuchen.",
+        "failed": "seine Frames konnten beim letzten Import nicht geladen werden; aktualisiere das Dokument, um es erneut zu versuchen.",
+        "none": "es enthält keine Frames zum Anzeigen.",
+        "storage_unavailable": "beim Import war kein Bildspeicher konfiguriert, daher wurde nichts heruntergeladen.",
+        "not_retained": "es sind keine Bilder dazu gespeichert. Die Quelle rendert möglicherweise keine Frames, oder das Dokument wurde importiert, bevor Frames aufbewahrt wurden; ein erneuter Import zeigt, was zutrifft."
+      }
     }
   },
   "outcome": {
@@ -6399,6 +6412,7 @@
       },
       "actual": "Tatsächlich",
       "reference": "Referenz",
+      "fromLinkedDesign": "· aus dem verknüpften Design",
       "actualAlt": "{view} (tatsächlich)",
       "referenceAlt": "{view} (Referenz)",
       "replace": "Ersetzen",

package/i18n/locales/en.json

@@ -5866,6 +5866,19 @@
     "history": {
       "heading": "History (no rounds) | History ({count} round) | History ({count} rounds)",
       "fixRequested": "Fix requested"
+    },
+    "design": {
+      "summary": "No frames came from the linked design. | 1 frame from the linked design. | {count} frames from the linked design.",
+      "dropped": "No others are hidden. | 1 more is not shown here. | {count} more are not shown here.",
+      "gapDropped": "None of its frames are hidden. | 1 of its frames is not shown here. | {count} of its frames are not shown here.",
+      "gapLine": "{title}:",
+      "gap": {
+        "partial": "only part of its frames were retained; refresh the document to try again.",
+        "failed": "its frames could not be downloaded at the last import; refresh the document to retry.",
+        "none": "it has no frames to show.",
+        "storage_unavailable": "no image storage was configured when it was imported, so nothing was downloaded.",
+        "not_retained": "no images are held for it. Its source may not render frames, or it was imported before frames were kept; re-importing tells the two apart."
+      }
     }
   },
   "outcome": {
@@ -6118,6 +6131,7 @@
       },
       "actual": "Actual",
       "reference": "Reference",
+      "fromLinkedDesign": "· from the linked design",
       "actualAlt": "{view} (actual)",
       "referenceAlt": "{view} (reference)",
       "replace": "Replace",

package/i18n/locales/es.json

@@ -5597,6 +5597,19 @@
     "history": {
       "heading": "Historial (sin rondas) | Historial ({count} ronda) | Historial ({count} rondas)",
       "fixRequested": "Corrección solicitada"
+    },
+    "design": {
+      "summary": "Ningún marco procede del diseño vinculado. | 1 marco del diseño vinculado. | {count} marcos del diseño vinculado.",
+      "dropped": "No hay otros ocultos. | 1 más no se muestra aquí. | {count} más no se muestran aquí.",
+      "gapDropped": "Ninguno de sus marcos está oculto. | 1 de sus marcos no se muestra aquí. | {count} de sus marcos no se muestran aquí.",
+      "gapLine": "{title}:",
+      "gap": {
+        "partial": "solo se conservó parte de sus marcos; actualiza el documento para volver a intentarlo.",
+        "failed": "no se pudieron descargar sus marcos en la última importación; actualiza el documento para reintentarlo.",
+        "none": "no tiene marcos que mostrar.",
+        "storage_unavailable": "no había almacenamiento de imágenes configurado cuando se importó, así que no se descargó nada.",
+        "not_retained": "no hay imágenes guardadas para él. Puede que su origen no genere marcos, o que se importara antes de que se conservaran; volver a importarlo lo aclara."
+      }
     }
   },
   "outcome": {
@@ -5843,6 +5856,7 @@
       },
       "actual": "Real",
       "reference": "Referencia",
+      "fromLinkedDesign": "· del diseño vinculado",
       "actualAlt": "{view} (real)",
       "referenceAlt": "{view} (referencia)",
       "replace": "Reemplazar",

package/i18n/locales/fr.json

@@ -5597,6 +5597,19 @@
     "history": {
       "heading": "Historique (aucun tour) | Historique ({count} tour) | Historique ({count} tours)",
       "fixRequested": "Correction demandée"
+    },
+    "design": {
+      "summary": "Aucun cadre ne provient de la maquette liée. | 1 cadre issu de la maquette liée. | {count} cadres issus de la maquette liée.",
+      "dropped": "Aucun autre n'est masqué. | 1 de plus n'est pas affiché ici. | {count} de plus ne sont pas affichés ici.",
+      "gapDropped": "Aucun de ses cadres n'est masqué. | 1 de ses cadres n'est pas affiché ici. | {count} de ses cadres ne sont pas affichés ici.",
+      "gapLine": "{title} :",
+      "gap": {
+        "partial": "seule une partie de ses cadres a été conservée ; actualisez le document pour réessayer.",
+        "failed": "ses cadres n'ont pas pu être téléchargés lors du dernier import ; actualisez le document pour réessayer.",
+        "none": "elle n'a aucun cadre à afficher.",
+        "storage_unavailable": "aucun stockage d'images n'était configuré lors de l'import, donc rien n'a été téléchargé.",
+        "not_retained": "aucune image n'est conservée pour elle. Sa source ne produit peut-être pas de cadres, ou elle a été importée avant leur conservation ; un nouvel import permet de trancher."
+      }
     }
   },
   "outcome": {
@@ -5843,6 +5856,7 @@
       },
       "actual": "Réel",
       "reference": "Référence",
+      "fromLinkedDesign": "· issu de la maquette liée",
       "actualAlt": "{view} (réel)",
       "referenceAlt": "{view} (référence)",
       "replace": "Remplacer",

package/i18n/locales/he.json

@@ -5597,6 +5597,19 @@
     "history": {
       "heading": "היסטוריה (אין סבבים) | היסטוריה (סבב אחד) | היסטוריה (שני סבבים) | היסטוריה ({count} סבבים)",
       "fixRequested": "התבקש תיקון"
+    },
+    "design": {
+      "summary": "לא התקבלו מסגרות מהעיצוב המקושר. | מסגרת אחת מהעיצוב המקושר. | שתי מסגרות מהעיצוב המקושר. | {count} מסגרות מהעיצוב המקושר.",
+      "dropped": "אין נוספות שאינן מוצגות. | עוד אחת אינה מוצגת כאן. | עוד שתיים אינן מוצגות כאן. | עוד {count} אינן מוצגות כאן.",
+      "gapDropped": "אף אחת מהמסגרות שלו אינה מוסתרת. | מסגרת אחת שלו אינה מוצגת כאן. | שתי מסגרות שלו אינן מוצגות כאן. | {count} מסגרות שלו אינן מוצגות כאן.",
+      "gapLine": "{title}:",
+      "gap": {
+        "partial": "רק חלק מהמסגרות שלו נשמרו; רענן את המסמך כדי לנסות שוב.",
+        "failed": "לא ניתן היה להוריד את המסגרות שלו בייבוא האחרון; רענן את המסמך כדי לנסות שוב.",
+        "none": "אין בו מסגרות להצגה.",
+        "storage_unavailable": "בעת הייבוא לא הוגדר אחסון תמונות, ולכן לא הורד דבר.",
+        "not_retained": "לא נשמרו עבורו תמונות. ייתכן שהמקור אינו מייצר מסגרות, או שהמסמך יובא לפני שמסגרות נשמרו; ייבוא מחדש יבהיר מה מהשניים."
+      }
     }
   },
   "outcome": {
@@ -5843,6 +5856,7 @@
       },
       "actual": "בפועל",
       "reference": "ייחוס",
+      "fromLinkedDesign": "· מהעיצוב המקושר",
       "actualAlt": "{view} (בפועל)",
       "referenceAlt": "{view} (ייחוס)",
       "replace": "החלף",

package/i18n/locales/it.json

@@ -6153,6 +6153,19 @@
     "history": {
       "heading": "Cronologia (nessun round) | Cronologia ({count} round) | Cronologia ({count} round)",
       "fixRequested": "Correzione richiesta"
+    },
+    "design": {
+      "summary": "Nessun frame proviene dal design collegato. | 1 frame dal design collegato. | {count} frame dal design collegato.",
+      "dropped": "Non ce ne sono altri nascosti. | 1 altro non è mostrato qui. | Altri {count} non sono mostrati qui.",
+      "gapDropped": "Nessuno dei suoi frame è nascosto. | 1 dei suoi frame non è mostrato qui. | {count} dei suoi frame non sono mostrati qui.",
+      "gapLine": "{title}:",
+      "gap": {
+        "partial": "solo una parte dei suoi frame è stata conservata; aggiorna il documento per riprovare.",
+        "failed": "non è stato possibile scaricare i suoi frame nell'ultimo import; aggiorna il documento per riprovare.",
+        "none": "non ha frame da mostrare.",
+        "storage_unavailable": "quando è stato importato non era configurato alcuno spazio per le immagini, quindi non è stato scaricato nulla.",
+        "not_retained": "non ci sono immagini conservate per esso. La sua origine potrebbe non generare frame, oppure è stato importato prima che i frame venissero conservati; un nuovo import chiarisce quale dei due."
+      }
     }
   },
   "outcome": {
@@ -6399,6 +6412,7 @@
       },
       "actual": "Effettivo",
       "reference": "Riferimento",
+      "fromLinkedDesign": "· dal design collegato",
       "actualAlt": "{view} (effettivo)",
       "referenceAlt": "{view} (riferimento)",
       "replace": "Sostituisci",

package/i18n/locales/ja.json

@@ -5597,6 +5597,19 @@
     "history": {
       "heading": "履歴（ラウンドなし） | 履歴（{count} ラウンド） | 履歴（{count} ラウンド）",
       "fixRequested": "修正をリクエスト済み"
+    },
+    "design": {
+      "summary": "リンクされたデザインからのフレームはありません。 | リンクされたデザインから {count} 件のフレーム。 | リンクされたデザインから {count} 件のフレーム。",
+      "dropped": "非表示のものはありません。 | 他に {count} 件はここに表示されていません。 | 他に {count} 件はここに表示されていません。",
+      "gapDropped": "非表示のフレームはありません。 | このデザインのフレーム {count} 件はここに表示されていません。 | このデザインのフレーム {count} 件はここに表示されていません。",
+      "gapLine": "{title}：",
+      "gap": {
+        "partial": "フレームの一部のみが保持されました。ドキュメントを更新して再試行してください。",
+        "failed": "前回のインポートでフレームをダウンロードできませんでした。ドキュメントを更新して再試行してください。",
+        "none": "表示できるフレームがありません。",
+        "storage_unavailable": "インポート時に画像ストレージが設定されていなかったため、何もダウンロードされていません。",
+        "not_retained": "画像は保持されていません。ソースがフレームを生成しないか、フレームの保持が始まる前にインポートされた可能性があります。再インポートすると判別できます。"
+      }
     }
   },
   "outcome": {
@@ -5843,6 +5856,7 @@
       },
       "actual": "実際",
       "reference": "リファレンス",
+      "fromLinkedDesign": "· リンクされたデザインから",
       "actualAlt": "{view}（実際）",
       "referenceAlt": "{view}（リファレンス）",
       "replace": "置き換え",

package/i18n/locales/pl.json

@@ -5597,6 +5597,19 @@
     "history": {
       "heading": "Historia ({count} runda) | Historia ({count} rundy) | Historia ({count} rund)",
       "fixRequested": "Poproszono o poprawkę"
+    },
+    "design": {
+      "summary": "1 klatka z połączonego projektu. | {count} klatki z połączonego projektu. | Klatek z połączonego projektu: {count}.",
+      "dropped": "Jeszcze 1 nie jest tu pokazana. | Jeszcze {count} nie są tu pokazane. | Nie pokazano tu jeszcze {count}.",
+      "gapDropped": "1 jej klatka nie jest tu pokazana. | {count} jej klatki nie są tu pokazane. | Nie pokazano tu {count} jej klatek.",
+      "gapLine": "{title}:",
+      "gap": {
+        "partial": "zachowano tylko część jego klatek; odśwież dokument, aby spróbować ponownie.",
+        "failed": "przy ostatnim imporcie nie udało się pobrać jego klatek; odśwież dokument, aby spróbować ponownie.",
+        "none": "nie ma klatek do pokazania.",
+        "storage_unavailable": "podczas importu nie skonfigurowano magazynu obrazów, więc nic nie pobrano.",
+        "not_retained": "nie ma dla niego zapisanych obrazów. Jego źródło może nie generować klatek albo został zaimportowany, zanim klatki były zachowywane; ponowny import to rozstrzygnie."
+      }
     }
   },
   "outcome": {
@@ -5843,6 +5856,7 @@
       },
       "actual": "Rzeczywiste",
       "reference": "Wzorzec",
+      "fromLinkedDesign": "· z połączonego projektu",
       "actualAlt": "{view} (rzeczywiste)",
       "referenceAlt": "{view} (wzorzec)",
       "replace": "Zamień",

package/i18n/locales/tr.json

@@ -5597,6 +5597,19 @@
     "history": {
       "heading": "Geçmiş (tur yok) | Geçmiş ({count} tur) | Geçmiş ({count} tur)",
       "fixRequested": "Düzeltme istendi"
+    },
+    "design": {
+      "summary": "Bağlantılı tasarımdan hiç çerçeve gelmedi. | Bağlantılı tasarımdan {count} çerçeve. | Bağlantılı tasarımdan {count} çerçeve.",
+      "dropped": "Gizlenen başka çerçeve yok. | {count} çerçeve daha burada gösterilmiyor. | {count} çerçeve daha burada gösterilmiyor.",
+      "gapDropped": "Gizlenen çerçevesi yok. | Bu tasarımın {count} çerçevesi burada gösterilmiyor. | Bu tasarımın {count} çerçevesi burada gösterilmiyor.",
+      "gapLine": "{title}:",
+      "gap": {
+        "partial": "çerçevelerinin yalnızca bir kısmı saklandı; yeniden denemek için belgeyi yenileyin.",
+        "failed": "son içe aktarmada çerçeveleri indirilemedi; yeniden denemek için belgeyi yenileyin.",
+        "none": "gösterilecek çerçevesi yok.",
+        "storage_unavailable": "içe aktarıldığında görsel depolama yapılandırılmamıştı, bu yüzden hiçbir şey indirilmedi.",
+        "not_retained": "bunun için saklanan görsel yok. Kaynağı çerçeve üretmiyor olabilir ya da çerçeveler saklanmaya başlamadan önce içe aktarılmış olabilir; yeniden içe aktarmak hangisi olduğunu gösterir."
+      }
     }
   },
   "outcome": {
@@ -5843,6 +5856,7 @@
       },
       "actual": "Gerçek",
       "reference": "Referans",
+      "fromLinkedDesign": "· bağlantılı tasarımdan",
       "actualAlt": "{view} (gerçek)",
       "referenceAlt": "{view} (referans)",
       "replace": "Değiştir",

package/i18n/locales/uk.json

@@ -5597,6 +5597,19 @@
     "history": {
       "heading": "Історія ({count} раунд) | Історія ({count} раунди) | Історія ({count} раундів)",
       "fixRequested": "Запитано виправлення"
+    },
+    "design": {
+      "summary": "{count} кадр із пов'язаного дизайну. | {count} кадри із пов'язаного дизайну. | Кадрів із пов'язаного дизайну: {count}.",
+      "dropped": "Ще {count} кадр не показано тут. | Ще {count} кадри не показано тут. | Ще {count} кадрів не показано тут.",
+      "gapDropped": "{count} його кадр не показано тут. | {count} його кадри не показано тут. | {count} його кадрів не показано тут.",
+      "gapLine": "{title}:",
+      "gap": {
+        "partial": "збережено лише частину його кадрів; оновіть документ, щоб спробувати ще раз.",
+        "failed": "під час останнього імпорту не вдалося завантажити його кадри; оновіть документ, щоб повторити.",
+        "none": "у ньому немає кадрів для показу.",
+        "storage_unavailable": "під час імпорту сховище зображень не було налаштоване, тому нічого не завантажено.",
+        "not_retained": "для нього не збережено зображень. Його джерело може не створювати кадрів, або він імпортований до того, як кадри почали зберігати; повторний імпорт це покаже."
+      }
     }
   },
   "outcome": {
@@ -5843,6 +5856,7 @@
       },
       "actual": "Фактичне",
       "reference": "Еталон",
+      "fromLinkedDesign": "· із пов'язаного дизайну",
       "actualAlt": "{view} (фактичне)",
       "referenceAlt": "{view} (еталон)",
       "replace": "Замінити",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.251.0",
+  "version": "0.252.0",
   "description": "Reusable Nuxt layer for the Agent Architecture Board SPA (components, stores, composables, pages). Consume it from a thin deployment app via `extends: ['@cat-factory/app']` and point it at your backend with NUXT_PUBLIC_API_BASE. See deploy/frontend for an example.",
   "repository": {
     "type": "git",
@@ -40,7 +40,7 @@
     "valibot": "^1.4.2",
     "vue": "3.5.40",
     "wretch": "^3.0.9",
-    "@cat-factory/contracts": "0.273.0"
+    "@cat-factory/contracts": "0.274.0"
   },
   "devDependencies": {
     "@toad-contracts/testing": "0.3.2",