fix(cockpit): four v-for :key collisions in Studio surfaces (#479)

* fix(cockpit): four v-for :key collisions in Studio surfaces

1) views/Studio.vue: receipts drawer used `r.service + r.correlation_id`
   as key — bare concat collides on prefix boundaries (e.g. "gateway"+
   "run-1" vs "gate"+"wayrun-1"). Use `${r.service}:${r.correlation_id}`
   with an explicit separator (no dedicated id field on Receipt).

2) components/StudioQuery.vue: outer `<tr :key="i">` was index-as-key
   and inner `<td :key="c">` (plus `<th :key="c">`) collided on
   duplicate column names like `SELECT a.name, b.name FROM ...`.
   Switch outer to `${i}:${JSON.stringify(r).slice(0, 120)}` and both
   header/body cell loops to `(c, colIdx)` with `${c}:${colIdx}`.

3) components/StudioCompute.vue: session receipt chain used
   `unshift(res)` with `:key="i"`, so every prepend shifted every
   existing row's key. Use `c.receipt?.id ?? \`row-${i}\`` — chain is
   only fed ok/degraded results, which carry a sealed ComputeReceipt.id.

4) components/StudioGraph.vue: "How derived?" list used `:key="i"` on
   server-ordered `derived.derivations`, so the epistemic-mode pill
   would mislabel edges when the array reordered. Use
   `${d.direction}:${d.relation}:${d.with.id}` — direction + relation +
   target-node id uniquely identifies each edge.

* Copilot round-2: computed row-keys, per-entry local ids, order stability

Three Copilot findings on the initial patch, all real:

1. `JSON.stringify(r).slice(...)` ran on EVERY reactivity tick for every
   row (expensive on large result sets). Extracted to a `computed` keyed
   off `result.value.rows` — recomputed only when the result set itself
   changes, not per render. Keys are now derived via a cheap FNV-1a
   32-bit rolling hash (bounded to 512 chars of JSON to keep it fast).

2. The key still included the loop index `i`, so any row reordering
   forced DOM recreation. Now content-only signatures with a stable
   disambiguator only when the SAME content appears twice — reordering
   distinct rows preserves each row's DOM identity.

3. StudioCompute's `row-${i}` fallback reintroduced the original
   `unshift` instability for entries with no receipt id. Added a
   per-session `localId` assigned at insertion (`local-1`, `local-2`,
   …) and gated all chain unshift() call sites through a new
   `appendToChain()` helper. Key is now `c.receipt?.id ?? c.localId` —
   stable in all degraded/no-receipt cases.

Author: mdheller

socioprophet-web/app-vue/src/components/StudioCompute.vue

@@ -32,7 +32,7 @@ async function runPlan() {
   try {
     const res = await runCompute({ kind: "workflow", spec: p.spec as Record<string, unknown>, project: props.project });
     result.value = res;
-    if (res.status === "ok" || res.status === "degraded") chain.value.unshift(res);
+    appendToChain(res);
   } catch (e) {
     runErr.value = e instanceof Error ? e.message : "run failed";
   } finally {
@@ -111,7 +111,18 @@ const running = ref(false);
 const runErr = ref("");
 const result = ref<ComputeResultLite | null>(null);
 // the receipt chain: every sealed run in this session, newest first (the tamper-evident record).
-const chain = ref<ComputeResultLite[]>([]);
+// Each entry carries a per-session localId so `v-for :key` is stable even when a run
+// completed without a receipt id (degraded status, or a gateway that omitted it). Without
+// it the fallback `row-${i}` shifted every existing key on each unshift and Vue rebuilt
+// the whole list, losing signed/attest transition state per row (Copilot round-2).
+interface ChainEntry extends ComputeResultLite { localId: string }
+let _chainSeq = 0;
+const chain = ref<ChainEntry[]>([]);
+function appendToChain(res: ComputeResultLite) {
+  if (res.status === "ok" || res.status === "degraded") {
+    chain.value.unshift({ ...res, localId: `local-${++_chainSeq}` });
+  }
+}
 
 const canRun = computed(() => !!selected.value && !running.value && fields.value.some((f) => (spec[f.key] ?? "").trim().length > 0 || f.type === "select"));
 
@@ -150,7 +161,7 @@ async function run() {
   try {
     const res = await runCompute({ kind: k.kind, spec: payloadSpec, project: props.project, backend: backend.value || undefined });
     result.value = res;
-    if (res.status === "ok" || res.status === "degraded") chain.value.unshift(res);
+    appendToChain(res);
   } catch (e) {
     runErr.value = e instanceof Error ? e.message : "run failed";
   } finally {
@@ -382,7 +393,7 @@ function onKey(e: KeyboardEvent) { if (e.key === "Enter" && (e.shiftKey || e.ctr
       <!-- session receipt chain — the tamper-evident record of every run -->
       <div v-if="chain.length" class="chain">
         <div class="chain-head">⛨ Session receipt chain <span class="cn">{{ chain.length }}</span></div>
-        <div class="crow" v-for="(c, i) in chain" :key="i">
+        <div class="crow" v-for="c in chain" :key="c.receipt?.id ?? c.localId">
           <span class="cdot" :style="{ background: EPISTEMIC_COLORS[c.epistemic_status] || 'var(--idle)' }" />
           <span class="mono cid">{{ c.receipt ? short(c.receipt.id) : '—' }}</span>
           <span class="ckind">{{ c.kind }} · {{ c.backend }}</span>

socioprophet-web/app-vue/src/components/StudioGraph.vue

@@ -306,7 +306,7 @@ async function loadDerived() {
           </div>
           <div v-if="derived.derivation_count" class="dlist">
             <div class="dlbl">Derived / co-observed with</div>
-            <div v-for="(d, i) in derived.derivations" :key="i" class="drow">
+            <div v-for="d in derived.derivations" :key="`${d.direction}:${d.relation}:${d.with.id}`" class="drow">
               <span class="rel">{{ d.direction === 'out' ? '→' : '←' }} {{ d.relation }}</span>
               <span class="dwith">{{ d.with.name }}</span>
               <span class="dpill" :style="{ borderColor: color(d.with.epistemic_mode), color: color(d.with.epistemic_mode) }">{{ d.with.epistemic_mode }}</span>

socioprophet-web/app-vue/src/components/StudioQuery.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import { runQuery, EPISTEMIC_COLORS, type QueryLang, type QueryResult } from "../services/studioApi";
 
 const props = defineProps<{ project: string }>();
@@ -32,6 +32,42 @@ async function run() {
 
 function epiOf(v: unknown): string | null { return result.value?.epistemic[String(v)] ?? null; }
 function color(mode: string): string { return EPISTEMIC_COLORS[mode] || "var(--faint)"; }
+
+// Copilot round-2: computing `JSON.stringify(r).slice(...)` in the template ran on
+// every reactivity tick for every row (expensive on large result sets), and using
+// the loop index in the key meant DOM was recreated on any row-order change. Move
+// key derivation to a computed keyed off `result.value.rows` — recomputed only when
+// the result set itself changes, not per render. Keys are content-derived (a cheap
+// FNV-1a 32-bit rolling hash over the JSON serialisation, capped so a giant row
+// doesn't dominate) and disambiguated only when the same content appears twice, so
+// reordering the same rows preserves each row's DOM identity.
+function fnv1a32(s: string): number {
+  let h = 0x811c9dc5;
+  for (let i = 0; i < s.length; i++) {
+    h ^= s.charCodeAt(i);
+    h = (h + ((h << 1) + (h << 4) + (h << 7) + (h << 8) + (h << 24))) >>> 0;
+  }
+  return h >>> 0;
+}
+function rowSignature(r: Record<string, unknown>): string {
+  // Bounded: an unbounded JSON.stringify would defeat the point of moving off the
+  // template. 512 bytes of the canonical form is more than enough to distinguish
+  // rows in practice, and duplicate content collapses onto the disambiguator below.
+  const s = JSON.stringify(r);
+  return fnv1a32(s.length > 512 ? s.slice(0, 512) : s).toString(36);
+}
+const rowKeys = computed<string[]>(() => {
+  const rows = result.value?.rows ?? [];
+  const seen = new Map<string, number>();
+  return rows.map((r) => {
+    const sig = rowSignature(r as Record<string, unknown>);
+    const n = seen.get(sig) ?? 0;
+    seen.set(sig, n + 1);
+    // Same-content rows get a stable dup-index suffix so Vue doesn't collapse them,
+    // but a reorder of distinct rows produces identical keys → DOM stays with the row.
+    return n === 0 ? sig : `${sig}#${n}`;
+  });
+});
 </script>
 
 <template>
@@ -64,10 +100,10 @@ function color(mode: string): string { return EPISTEMIC_COLORS[mode] || "var(--f
 
       <div v-if="result.columns.length" class="qscroll">
         <table class="qgrid">
-          <thead><tr><th v-for="c in result.columns" :key="c">{{ c }}</th></tr></thead>
+          <thead><tr><th v-for="(c, colIdx) in result.columns" :key="`${c}:${colIdx}`">{{ c }}</th></tr></thead>
           <tbody>
-            <tr v-for="(r, i) in result.rows" :key="i">
-              <td v-for="c in result.columns" :key="c">
+            <tr v-for="(r, i) in result.rows" :key="rowKeys[i]">
+              <td v-for="(c, colIdx) in result.columns" :key="`${c}:${colIdx}`">
                 <span class="val">{{ r[c] }}</span>
                 <span v-if="epiOf(r[c])" class="epi" :style="{ background: color(epiOf(r[c])!) }" :title="`epistemic: ${epiOf(r[c])}`" />
               </td>

socioprophet-web/app-vue/src/views/Studio.vue

@@ -180,7 +180,7 @@ const actionsFor: Record<StudioSection, { label: string; hint: string }[]> = {
       <div class="rc-head"><b>Verified-compute receipts</b><span class="rc-sub">replayable proof-of-work · {{ receiptsData?.services_reachable ?? 0 }} services answering</span><button class="rc-x" @click="receiptsOpen = false" aria-label="Close receipts panel">✕</button></div>
       <div v-if="receiptsErr" class="rc-err">{{ receiptsErr }}</div>
       <div v-else-if="receiptsData" class="rc-list">
-        <div v-for="r in receiptsData.receipts" :key="r.service + r.correlation_id" class="rc-row" :title="r.bundle_ref || ''">
+        <div v-for="r in receiptsData.receipts" :key="`${r.service}:${r.correlation_id}`" class="rc-row" :title="r.bundle_ref || ''">
           <span class="rc-svc">{{ r.service }}</span>
           <span class="rc-cid mono">{{ r.correlation_id }}</span>
           <span v-if="r.verdict" class="rc-verdict">{{ r.verdict }}</span>