fix(ui): keep both read-index columns stable while extractions resolve

R1 and R2 are separate extraction runs and finish at different times. The
table keyed its columns off the reads resolved so far, so it briefly showed
a single R1 column and then flipped to two when R2 arrived. Drive the column
layout from the dataset's declared read indices instead, and mark a column
still being processed with a "loading" tag.

Author: mizraelson

ui/src/pages/ReadViewer.vue

@@ -32,16 +32,26 @@ const pairedOptions: ListOption<"R1" | "R2" | "both">[] = [
 const reads = computed<Record<string, ReadsResult> | undefined>(() => app.model.outputs.reads);
 const isFasta = computed(() => app.model.outputs.isFasta ?? false);
 
+// Column layout is driven by the dataset's DECLARED read indices (known up
+// front), not by which extractions have resolved so far. R1 and R2 are separate
+// runs and finish at different times; keying off resolved reads made the table
+// briefly show only R1 and then flip to two columns. Falls back to resolved
+// reads if the declared list isn't available yet.
+const expectedIndices = computed<string[]>(() => app.model.outputs.readIndices ?? []);
+
 const availableIndices = computed<string[]>(() => {
-  const r = reads.value;
-  if (!r) return [];
-  const known = READ_INDEX_ORDER.filter((ri) => r[ri] !== undefined);
-  const extra = Object.keys(r)
-    .filter((k) => !READ_INDEX_ORDER.includes(k))
-    .sort();
+  const src =
+    expectedIndices.value.length > 0 ? expectedIndices.value : Object.keys(reads.value ?? {});
+  const known = READ_INDEX_ORDER.filter((ri) => src.includes(ri));
+  const extra = src.filter((k) => !READ_INDEX_ORDER.includes(k)).sort();
   return [...known, ...extra];
 });
 
+/** A shown index whose extraction hasn't resolved yet (e.g. R2 still running). */
+function isIndexPending(ri: string): boolean {
+  return reads.value?.[ri] === undefined;
+}
+
 const isPaired = computed(
   () => availableIndices.value.includes("R1") && availableIndices.value.includes("R2"),
 );
@@ -211,7 +221,10 @@ function onDownload() {
     <!-- Single column (single-end / fasta / R1-only / R2-only) -->
     <div v-if="shownIndices.length === 1" class="reads-grid">
       <div class="grid-head">
-        <div class="cell">{{ isFasta ? "Sequences" : shownIndices[0] }}</div>
+        <div class="cell">
+          {{ isFasta ? "Sequences" : shownIndices[0] }}
+          <span v-if="isIndexPending(shownIndices[0])" class="pending-tag">· loading…</span>
+        </div>
       </div>
       <div v-for="rec in reads[shownIndices[0]]?.reads ?? []" :key="rec.number" class="grid-row">
         <pre class="cell-pre">{{ recordLines(rec) }}</pre>
@@ -222,7 +235,9 @@ function onDownload() {
          two columns scroll together and pairs stay aligned. -->
     <div v-else class="reads-grid">
       <div class="grid-head">
-        <div v-for="ri in shownIndices" :key="ri" class="cell">{{ ri }}</div>
+        <div v-for="ri in shownIndices" :key="ri" class="cell">
+          {{ ri }}<span v-if="isIndexPending(ri)" class="pending-tag">· loading…</span>
+        </div>
       </div>
       <div v-for="row in maxRows" :key="row" class="grid-row">
         <pre v-for="ri in shownIndices" :key="ri" class="cell-pre">{{
@@ -245,6 +260,12 @@ function onDownload() {
   flex-wrap: wrap;
   align-items: flex-end;
 }
+.pending-tag {
+  margin-left: 6px;
+  font-weight: 400;
+  font-size: 11px;
+  color: var(--txt-03, #6b7280);
+}
 .raw-bar {
   margin-bottom: 12px;
 }