Merge pull request #496 from atomantic/cos/task-mpm54jto/agent-653b591f

fix: opaque merge modal + AI-assisted field merge for duplicate Universes/Series

Author: atomantic

.changelog/NEXT.md

@@ -31,6 +31,7 @@ TBD
 
 ## Fixed
 
+- **Universe / Series merge modal: opaque background + AI-assisted field merge.** The merge dialog (Sharing → Duplicates and the inline Universes-page resolver) had a transparent panel that bled into the underlying list, making the conflict editor hard to read. It now uses the standard `port-card` card chrome with the same `max-h-[85vh] overflow-y-auto` scroll envelope as the rest of the app's modals. Alongside that, conflicting *text* fields (e.g. two divergent `starterPrompt`s on a duplicate "Clandestiny") gain a **Merge with AI** button: the configured AI provider receives both values plus the survivor's style context (logline / style notes / embrace influences) and returns one unified value per field, which the modal renders in an editable textarea and ships as `fieldOverrides`. Each row keeps the original Keep-survivor / Use-folded picker — switching back discards the AI value for that row. Non-text conflicts (numeric, object-shaped) skip AI and stay on the manual picker. New routes: `POST /api/universe-builder/merge/ai-resolve` and `POST /api/pipeline/series/merge/ai-resolve`.
 - **Ollama model installs no longer die on a transient "EOF".** Pulling a model from the Local LLMs page could fail with a bare `EOF` status and leave the model uninstalled. Ollama streams pull progress as NDJSON, and a transient network hiccup between Ollama and the model registry/CDN surfaces mid-stream as an `{"error":"EOF"}` frame (or the response read dropping outright). PortOS gave up on the first occurrence — even though the `ollama` CLI silently retries these and the pull is resumable (partial blobs are kept). `pullModel` now retries the transient/EOF class up to 3 attempts with a linear backoff, continuing from the partial download rather than restarting; non-transient errors (bad model name, missing manifest) still fail fast. The install banner shows a "retrying after network error" notice during the backoff instead of stalling.
 - **TUI agents no longer try (and fail) to `/quit` at the end of a run.** The spawned-agent completion workflow used to tell the agent to write its `.agent-done` sentinel and then run `/quit`. In current Claude Code, `/quit` is a UI command that can't be invoked programmatically — so the agent attempted `Skill(quit)`, hit an error, and printed a confusing "please run /quit yourself" message before idling. The prompt now treats the sentinel as the sole done signal (PortOS finalizes the run within 2s of seeing it and closes the session itself) and explicitly tells the agent not to run `/quit`.
 - **Tabbed sub-nav strips no longer drift vertically on mobile.** The horizontally-scrolling sub-nav tabs (Media Gen and every other page that uses the shared `TabPills` primitive) could be dragged diagonally/vertically on iOS, producing an uneven, wonky scroll. Both `TabPills` scroll containers now set `touch-action: pan-x` so touch gestures pan the strip horizontally while vertical drags pass through to normal page scrolling.

client/src/components/sharing/DuplicatesTab.jsx

@@ -37,7 +37,7 @@ export default function DuplicatesTab() {
 
   useEffect(() => { load(); }, [load]);
 
-  const { merge, setMerge, openMerge, runPreview, executeMerge } = useRecordMerge({ onMerged: load });
+  const { merge, setMerge, openMerge, runPreview, executeMerge, runAIMerge, updateOverride } = useRecordMerge({ onMerged: load });
 
   const groupKey = (kind, normalizedName, scope = '') => `${kind}:${scope}:${normalizedName}`;
 
@@ -83,6 +83,7 @@ export default function DuplicatesTab() {
         <MergeModal
           merge={merge} setMerge={setMerge} onExecute={executeMerge}
           onRepreview={(survivorId, loserId) => runPreview(merge.kind, survivorId, loserId, merge.records)}
+          onAIMerge={runAIMerge} onUpdateOverride={updateOverride}
         />
       )}
     </div>

client/src/components/sharing/DuplicatesTab.test.jsx

@@ -9,10 +9,12 @@ vi.mock('../../services/api', () => ({
   mergeUniverses: vi.fn(),
   previewSeriesMerge: vi.fn(),
   mergeSeries: vi.fn(),
+  aiResolveUniverseMerge: vi.fn(),
+  aiResolveSeriesMerge: vi.fn(),
   updateUniverse: vi.fn(),
   updatePipelineSeries: vi.fn(),
 }));
-vi.mock('../ui/Toast', () => ({ default: { success: vi.fn(), error: vi.fn() } }));
+vi.mock('../ui/Toast', () => ({ default: { success: vi.fn(), error: vi.fn(), warning: vi.fn() } }));
 vi.mock('../ui/Modal', () => ({ default: ({ open, children }) => (open ? <div role="dialog">{children}</div> : null) }));
 vi.mock('../ui/InlineDiff', () => ({ default: ({ oldText, newText }) => <div data-testid="diff">{oldText}|{newText}</div> }));
 
@@ -64,6 +66,46 @@ describe('DuplicatesTab', () => {
     ));
   });
 
+  it('Merge with AI populates an editable override and ships it as fieldOverrides on submit', async () => {
+    api.previewUniverseMerge.mockResolvedValue({
+      conflicts: [{ field: 'starterPrompt', survivorValue: 'A', loserValue: 'B' }],
+      cascade: { seriesToRepoint: [], loserCollectionItemCount: 0 },
+    });
+    api.aiResolveUniverseMerge.mockResolvedValue({
+      merged: { starterPrompt: 'Unified A+B' }, skipped: [], llm: { provider: 'codex', model: null }, runId: 'r1',
+    });
+    api.mergeUniverses.mockResolvedValue({ merged: true });
+
+    const user = userEvent.setup();
+    render(<DuplicatesTab />);
+    await waitFor(() => expect(screen.getByText(/2 copies/)).toBeInTheDocument());
+
+    await user.click(screen.getByRole('button', { name: /Merge…/ }));
+    await waitFor(() => expect(screen.getByText('starterPrompt')).toBeInTheDocument());
+
+    // Click Merge with AI — the AI-resolve API is called with the conflict field list.
+    await user.click(screen.getByRole('button', { name: /Merge with AI/ }));
+    await waitFor(() => expect(api.aiResolveUniverseMerge).toHaveBeenCalledWith(
+      { survivorId: 'u-new', loserId: 'u-old', fields: ['starterPrompt'] },
+      expect.anything(),
+    ));
+
+    // The AI-merged value is rendered in an editable textarea and the row
+    // automatically switches to the "AI merged" choice.
+    const ta = await screen.findByLabelText('AI-merged starterPrompt');
+    expect(ta.value).toBe('Unified A+B');
+    await user.clear(ta);
+    await user.type(ta, 'Hand-tweaked unified');
+
+    // Execute — survivor/loser choice is dropped (server's enum doesn't accept 'ai'),
+    // override is sent as fieldOverrides.
+    await user.click(screen.getByRole('button', { name: /^Merge$/ }));
+    await waitFor(() => expect(api.mergeUniverses).toHaveBeenCalledWith(
+      { survivorId: 'u-new', loserId: 'u-old', fieldChoices: {}, fieldOverrides: { starterPrompt: 'Hand-tweaked unified' } },
+      expect.anything(),
+    ));
+  });
+
   it('renames a record inline via the update API', async () => {
     api.updateUniverse.mockResolvedValue({ id: 'u-old', name: 'Clandestiny (v2)' });
     const user = userEvent.setup();

client/src/components/sharing/MergeModal.jsx

@@ -1,14 +1,15 @@
 /**
- * Merge modal for duplicate Universes / Series. Renders the survivor picker,
- * the per-field conflict resolver (survivor vs. folded value), and the cascade
- * summary, then fires the merge. Driven entirely by the `merge` state object
- * managed by `useRecordMerge` — shared between Sharing → Duplicates
- * (DuplicatesTab) and the inline resolver on the Universes page.
+ * Merge modal for duplicate Universes / Series. Survivor picker + per-field
+ * conflict resolver (survivor / folded / AI-merged) + cascade summary. Driven
+ * by the `merge` state object from `useRecordMerge`. The AI path synthesizes
+ * a unified value per text conflict that's editable in-place and shipped as
+ * `fieldOverrides`; switching back to survivor/folded discards the override.
  */
 
-import { Loader2, GitMerge } from 'lucide-react';
+import { Loader2, GitMerge, Sparkles } from 'lucide-react';
 import Modal from '../ui/Modal';
 import InlineDiff from '../ui/InlineDiff';
+import { MERGE_CHOICE } from '../../hooks/useRecordMerge';
 
 // Conflict values can be strings or structured (arrays/objects). Render strings
 // as-is so InlineDiff can word-diff them; pretty-print everything else.
@@ -17,11 +18,17 @@ const asText = (v) => {
   return typeof v === 'string' ? v : JSON.stringify(v, null, 2);
 };
 
-export default function MergeModal({ merge, setMerge, onExecute, onRepreview }) {
-  const { kind, records, survivorId, loserId, preview, choices, busy } = merge;
+// Only string-vs-string conflicts can be AI-merged. The server enforces the
+// same filter but we use it here too so the per-field "AI" button is only
+// shown when it would actually run.
+const isStringConflict = (c) => typeof c?.survivorValue === 'string' && typeof c?.loserValue === 'string';
+
+export default function MergeModal({ merge, setMerge, onExecute, onRepreview, onAIMerge, onUpdateOverride }) {
+  const { kind, records, survivorId, loserId, preview, choices, overrides = {}, busy, aiBusy } = merge;
   const conflicts = preview?.conflicts || [];
   const cascade = preview?.cascade || {};
   const multi = records.length > 2; // 3+ copies fold one pair at a time
+  const aiEligible = conflicts.some(isStringConflict);
 
   const setChoice = (field, val) => setMerge((m) => ({ ...m, choices: { ...m.choices, [field]: val } }));
   const swapSurvivor = (newSurvivorId) => {
@@ -35,7 +42,7 @@ export default function MergeModal({ merge, setMerge, onExecute, onRepreview })
 
   return (
     <Modal open onClose={() => !busy && setMerge(null)} size="2xl" ariaLabel="Merge duplicates">
-      <div className="p-5 space-y-4">
+      <div className="bg-port-card border border-port-border rounded-lg p-5 space-y-4 max-h-[85vh] overflow-y-auto">
         <h2 className="text-lg font-semibold text-white flex items-center gap-2"><GitMerge size={18} /> Merge {kind}</h2>
 
         <div>
@@ -71,20 +78,53 @@ export default function MergeModal({ merge, setMerge, onExecute, onRepreview })
 
         {preview && conflicts.length > 0 && (
           <div>
-            <label className="block text-xs text-gray-400 mb-2">{conflicts.length} conflicting field(s) — pick which value wins:</label>
+            <div className="flex items-center justify-between mb-2 gap-2">
+              <label className="block text-xs text-gray-400">{conflicts.length} conflicting field(s) — pick which value wins:</label>
+              {onAIMerge && aiEligible && (
+                <button
+                  type="button"
+                  onClick={onAIMerge}
+                  disabled={aiBusy || busy}
+                  title="Use the configured AI provider to synthesize a unified value per text-string field"
+                  className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded border border-port-accent/60 text-port-accent text-xs font-medium hover:bg-port-accent/10 disabled:opacity-50"
+                >
+                  {aiBusy ? <Loader2 className="animate-spin" size={12} /> : <Sparkles size={12} />} Merge with AI
+                </button>
+              )}
+            </div>
             <div className="space-y-3">
-              {conflicts.map((c) => (
-                <div key={c.field} className="border border-port-border rounded p-3">
-                  <div className="flex items-center justify-between mb-2">
-                    <span className="text-xs font-medium text-white">{c.field}</span>
-                    <div className="flex gap-1 text-[11px]">
-                      <button type="button" onClick={() => setChoice(c.field, 'survivor')} className={`px-2 py-0.5 rounded ${choices[c.field] === 'survivor' ? 'bg-port-accent text-white' : 'bg-port-bg text-gray-400'}`}>Keep survivor</button>
-                      <button type="button" onClick={() => setChoice(c.field, 'loser')} className={`px-2 py-0.5 rounded ${choices[c.field] === 'loser' ? 'bg-port-accent text-white' : 'bg-port-bg text-gray-400'}`}>Use folded</button>
+              {conflicts.map((c) => {
+                const choice = choices[c.field];
+                const canAI = isStringConflict(c);
+                const showOverride = choice === MERGE_CHOICE.AI;
+                return (
+                  <div key={c.field} className="border border-port-border rounded p-3 bg-port-bg/40">
+                    <div className="flex items-center justify-between mb-2 gap-2 flex-wrap">
+                      <span className="text-xs font-medium text-white">{c.field}</span>
+                      <div className="flex gap-1 text-[11px]">
+                        <button type="button" onClick={() => setChoice(c.field, MERGE_CHOICE.SURVIVOR)} className={`px-2 py-0.5 rounded ${choice === MERGE_CHOICE.SURVIVOR ? 'bg-port-accent text-white' : 'bg-port-bg text-gray-400'}`}>Keep survivor</button>
+                        <button type="button" onClick={() => setChoice(c.field, MERGE_CHOICE.LOSER)} className={`px-2 py-0.5 rounded ${choice === MERGE_CHOICE.LOSER ? 'bg-port-accent text-white' : 'bg-port-bg text-gray-400'}`}>Use folded</button>
+                        {canAI && typeof overrides[c.field] === 'string' && (
+                          <button type="button" onClick={() => setChoice(c.field, MERGE_CHOICE.AI)} className={`inline-flex items-center gap-1 px-2 py-0.5 rounded ${choice === MERGE_CHOICE.AI ? 'bg-port-accent text-white' : 'bg-port-bg text-gray-400'}`}>
+                            <Sparkles size={10} /> AI merged
+                          </button>
+                        )}
+                      </div>
                     </div>
+                    {showOverride ? (
+                      <textarea
+                        value={overrides[c.field] || ''}
+                        onChange={(e) => onUpdateOverride?.(c.field, e.target.value)}
+                        rows={Math.min(10, Math.max(3, (overrides[c.field] || '').split('\n').length + 1))}
+                        className="w-full px-2 py-1.5 rounded bg-port-bg border border-port-border text-sm text-white font-mono leading-snug"
+                        aria-label={`AI-merged ${c.field}`}
+                      />
+                    ) : (
+                      <InlineDiff oldText={asText(c.survivorValue)} newText={asText(c.loserValue)} />
+                    )}
                   </div>
-                  <InlineDiff oldText={asText(c.survivorValue)} newText={asText(c.loserValue)} />
-                </div>
-              ))}
+                );
+              })}
             </div>
           </div>
         )}
@@ -103,7 +143,7 @@ export default function MergeModal({ merge, setMerge, onExecute, onRepreview })
 
         <div className="flex justify-end gap-2 pt-2">
           <button type="button" onClick={() => setMerge(null)} disabled={busy} className="px-3 py-2 rounded border border-port-border text-gray-300 text-sm">Cancel</button>
-          <button type="button" onClick={onExecute} disabled={busy || !preview || survivorId === loserId}
+          <button type="button" onClick={onExecute} disabled={busy || aiBusy || !preview || survivorId === loserId}
             className="inline-flex items-center gap-2 px-3 py-2 rounded bg-port-accent hover:bg-port-accent/90 text-white text-sm font-medium disabled:opacity-50">
             {busy ? <Loader2 className="animate-spin" size={14} /> : <GitMerge size={14} />} Merge
           </button>