@1agh/maude 1.2.0 → 1.3.0

package/apps/studio/client/panels/GitPanel.jsx

@@ -185,6 +185,11 @@ export default function GitPanel({
   // `{ branch, project, hubHost }` — what the cell reported alongside the log.
   // Null until the first successful cloud load.
   cloudHistory = null,
+  // Accepted revisions (DDR-241, T27/T28): restore the open canvas to a
+  // revision as a NEW action, and undo one of my own actions. Each resolves
+  // true when the project accepted it.
+  onRestoreVersion,
+  onUndoAction,
 }) {
   const withdrawn = historyOnly || cloudManaged;
   const cloudHistorySource = historySource === 'cloud';
@@ -878,6 +883,20 @@ export default function GitPanel({
             </div>
           ) : (
             log.map((c) => {
+              if (c.accepted) {
+                return (
+                  <AcceptedRow
+                    key={c.sha}
+                    row={c}
+                    activeName={activeName}
+                    previewable={previewable}
+                    onPreview={() => onPreviewVersion(c.sha)}
+                    onRestore={onRestoreVersion}
+                    onUndo={onUndoAction}
+                    onDone={reloadHistory}
+                  />
+                );
+              }
               const body = (
                 <>
                   <span className="gp-version-rail">
@@ -920,3 +939,87 @@ export default function GitPanel({
     </aside>
   );
 }
+
+/**
+ * One accepted project action (DDR-241, T27/T28). Preview uses the ordinary
+ * version preview (`r<revision>`); Restore makes a NEW action — nothing in
+ * history is rewound; Undo reverts only my own action, and only the parts a
+ * teammate has not changed since (the project refuses otherwise).
+ */
+function AcceptedRow({ row, activeName, previewable, onPreview, onRestore, onUndo, onDone }) {
+  const [busy, setBusy] = useState(null);
+  const [note, setNote] = useState(null);
+  const { revision, actionId, mine, undo } = row.accepted;
+  const run = async (kind, fn) => {
+    setBusy(kind);
+    setNote(null);
+    const ok = await fn();
+    setBusy(null);
+    setNote(
+      ok
+        ? kind === 'restore'
+          ? 'Restored — a new version was added.'
+          : 'Undone.'
+        : kind === 'restore'
+          ? 'The project did not accept the restore.'
+          : 'Someone changed this since — nothing was undone.'
+    );
+    if (ok) onDone?.();
+  };
+  return (
+    <div className="gp-version" role="listitem" data-testid={`project-history-row-${revision}`}>
+      <span className="gp-version-rail">
+        <span className="gp-version-node" />
+      </span>
+      <span className="gp-version-body">
+        <span className="gp-version-msg">{row.message || '(no description)'}</span>
+        <span className="gp-version-meta">
+          {row.author} · version {revision}
+        </span>
+        {note && (
+          <span className="gp-version-meta" role="status" aria-live="polite">
+            {note}
+          </span>
+        )}
+      </span>
+      <span className="gp-version-when">{timeAgo(row.date)}</span>
+      <span className="gp-version-actions">
+        {previewable && (
+          <button
+            type="button"
+            className="btn btn--sm btn--ghost"
+            data-testid={`project-history-preview-${revision}`}
+            onClick={onPreview}
+            title={`Preview ${activeName} at this version`}
+          >
+            <Icon name="diff" size={13} /> Preview
+          </button>
+        )}
+        {previewable && onRestore && (
+          <button
+            type="button"
+            className="btn btn--sm btn--ghost"
+            data-testid={`project-history-restore-${revision}`}
+            disabled={busy !== null}
+            onClick={() => run('restore', () => onRestore(revision))}
+            title={`Make ${activeName} look like this version again (adds a new version)`}
+          >
+            {busy === 'restore' ? 'Restoring…' : 'Restore'}
+          </button>
+        )}
+        {mine && !undo && onUndo && (
+          <button
+            type="button"
+            className="btn btn--sm btn--ghost"
+            data-testid={`project-history-undo-${revision}`}
+            disabled={busy !== null}
+            onClick={() => run('undo', () => onUndo(actionId))}
+            title="Undo this change of yours (a teammate's later edits are kept)"
+          >
+            {busy === 'undo' ? 'Undoing…' : 'Undo'}
+          </button>
+        )}
+      </span>
+    </div>
+  );
+}

package/apps/studio/client/panels/OnboardingWizard.jsx

@@ -1,10 +1,12 @@
 // Phase 29 (epic E4) Task 3 — the first-run onboarding wizard.
 //
 // Mounts full-screen on first launch (app.jsx checks `app_is_first_run` via the
-// Tauri shell) OVER the empty welcome project the sidecar boots. Three doors,
+// Tauri shell) OVER the empty welcome project the sidecar boots. Four doors,
 // GitHub first: (A) Continue with GitHub — sign in (device flow) → open a shared
-// project or start a new one; (B) Open a folder on this computer; (C) Connect to a
-// team hub (advanced). Every door ends by switching the sidecar to a real project
+// project or start a new one; (T) Open a project you were invited to — Maude
+// Cloud or a team server's email/password, opened as a managed copy with no
+// folder to choose (plan T22); (B) Open a folder on this computer; (C) Connect to
+// a team hub with a token (advanced). Every door ends by switching the sidecar to a real project
 // (`open_local_project`), which reloads the webview — at which point first-run is
 // false and the wizard no longer mounts. Built 1:1 with `.design/ui/Onboarding.tsx`;
 // CSS (`ob-*`) lives in client/styles/3-shell-maude.css. Renders nothing outside the
@@ -14,6 +16,7 @@ import { useEffect, useRef, useState } from 'react';
 
 import ReadinessList, { useReadiness } from './ReadinessList.jsx';
 import IntroVideoDialog from './IntroVideoDialog.jsx';
+import TeamProjects from './TeamProjects.jsx';
 import {
   cloneRepo,
   createProject,
@@ -180,7 +183,7 @@ function AiReadiness() {
 }
 
 // ── A · Welcome (door picker) ────────────────────────────────────────────────
-function Welcome({ onGithub, onLocal, onHub, signing, signedIn, identity }) {
+function Welcome({ onGithub, onLocal, onHub, onTeam, signing, signedIn, identity }) {
   const [introOpen, setIntroOpen] = useState(false);
   return (
     <main className="ob-main">
@@ -209,6 +212,16 @@ function Welcome({ onGithub, onLocal, onHub, signing, signedIn, identity }) {
             <span className="btn btn--primary ob-door-btn"><GitHubMark size={15} /> {signing ? 'Starting…' : signedIn ? 'Continue' : 'Sign in with GitHub'}</span>
           </span>
         </button>
+        {/* Plan T22 — a designer who was added to a project picks it and works:
+            no folder, no Git, no token. */}
+        <button type="button" data-testid="ob-door-team" className="ob-door" aria-label="Open a project you were invited to" onClick={onTeam}>
+          <span className="ob-door-icon"><Icon name="link" size={22} /></span>
+          <span className="ob-door-tx">
+            <span className="ob-door-title">Open a project you were invited to</span>
+            <span className="ob-door-sub">Sign in to Maude Cloud or your team’s server, pick the project, and start designing.</span>
+          </span>
+          <span className="ob-door-go" aria-hidden="true"><Icon name="chevron-right" size={16} /></span>
+        </button>
         <button type="button" data-testid="ob-door-local" className="ob-door" aria-label="Open a folder on this computer" onClick={onLocal}>
           <span className="ob-door-icon"><Icon name="folder-open" size={22} /></span>
           <span className="ob-door-tx">
@@ -503,7 +516,22 @@ function HubDoor({ onBack }) {
           </div>
         )}
       </div>
-      <p className="ob-foot-note">Most people use <b>Continue with GitHub</b> — you only need a hub if your team runs one.</p>
+      <p className="ob-foot-note">Were you given an email and password for your team’s server? Use <b>Open a project you were invited to</b> instead — no token needed.</p>
+    </main>
+  );
+}
+
+// ── E · Team project door (plan T22) ─────────────────────────────────────────
+function TeamDoor({ onBack }) {
+  return (
+    <main className="ob-main">
+      <BackBar onBack={onBack} />
+      <header className="ob-head">
+        <span className="ob-eyebrow">Your team</span>
+        <h1>Open your team’s project</h1>
+        <p>Pick a project you were added to. Maude keeps its copy on this computer — nothing to set up.</p>
+      </header>
+      <TeamProjects variant="door" />
     </main>
   );
 }
@@ -547,7 +575,7 @@ function DeviceCodeModal({ device, onClose }) {
 
 export default function OnboardingWizard() {
   const native = isNativeApp();
-  const [door, setDoor] = useState('welcome'); // welcome | github | local | hub
+  const [door, setDoor] = useState('welcome'); // welcome | github | local | hub | team
   const [identity, setIdentity] = useState(null);
   const [signedIn, setSignedIn] = useState(false);
   const [signing, setSigning] = useState(false);
@@ -599,10 +627,11 @@ export default function OnboardingWizard() {
     <div className="ob-overlay" data-testid="onboarding-wizard" role="dialog" aria-modal="true" aria-label="Welcome to Maude">
       <div className="ob-shell">
         <Rail signedInAs={signedIn ? identity?.login : null} />
-        {door === 'welcome' && <Welcome signing={signing} signedIn={signedIn} identity={identity} onGithub={handleGithub} onLocal={() => setDoor('local')} onHub={() => setDoor('hub')} />}
+        {door === 'welcome' && <Welcome signing={signing} signedIn={signedIn} identity={identity} onGithub={handleGithub} onLocal={() => setDoor('local')} onHub={() => setDoor('hub')} onTeam={() => setDoor('team')} />}
         {door === 'github' && <GitHubDoor identity={identity} onBack={() => setDoor('welcome')} />}
         {door === 'local' && <LocalDoor onBack={() => setDoor('welcome')} />}
         {door === 'hub' && <HubDoor onBack={() => setDoor('welcome')} />}
+        {door === 'team' && <TeamDoor onBack={() => setDoor('welcome')} />}
       </div>
       {err && door === 'welcome' && (
         <div className="ob-toast callout callout--error" role="alert"><span className="ob-callout-glyph" style={{ color: 'var(--status-error)' }}><Icon name="x" /></span><span>{err}</span></div>

package/apps/studio/client/panels/RepoBranchSwitcher.jsx

@@ -15,11 +15,13 @@
 // flushes Yjs first — DDR-051, not duplicated here); "Merge → main" → POST
 // /_api/git/fold; "Fetch remote branches" → POST /_api/git/fetch. The local branch
 // list is re-asserted from disk on every popup open (DDR-133) so a flaky network never
-// blanks it. Renders nothing until the project is a git repo. CSS in 3-shell-maude.css.
+// blanks it. A project that is not a git repo — a managed team project (plan T22)
+// — gets the Project section alone. CSS in 3-shell-maude.css.
 
 import { useEffect, useRef, useState } from 'react';
 
-import { appRecentProjects, isNativeApp, openGitHubUrl, openLocalProject, pickDirectory } from '../github.js';
+import { appRecentProjects, isNativeApp, managedProjectsList, openGitHubUrl, openLocalProject, pickDirectory } from '../github.js';
+import { TeamProjectsDialog } from './TeamProjects.jsx';
 
 const SHARED = new Set(['main', 'master']);
 
@@ -55,6 +57,15 @@ function Icon({ name, size = 16, className }) {
   );
 }
 
+/**
+ * The name to show for a recent project path: a managed team copy lives under a
+ * key like `acme.cloud.maude.sh--alligators`, so it shows the project's name.
+ */
+export function recentProjectLabel(path, managed) {
+  const m = (managed || []).find((x) => x.path === path);
+  return m ? { name: m.name, sub: m.server_url.replace(/^https?:\/\//, '') } : { name: basename(path), sub: path };
+}
+
 function basename(p) {
   return String(p).replace(/[/\\]+$/, '').split(/[/\\]/).pop() || String(p);
 }
@@ -121,11 +132,13 @@ export function chatGuardCopy({ count, branch, verb }) {
   };
 }
 
-export default function RepoBranchSwitcher({ project, liveBranch, remoteSync, onGetLatest }) {
+export default function RepoBranchSwitcher({ project, liveBranch, remoteSync, onGetLatest, projectOnly = false }) {
   const native = isNativeApp();
   const [status, setStatus] = useState(null); // { repo, branch }
   const [branches, setBranches] = useState([]);
   const [recents, setRecents] = useState([]);
+  const [managed, setManaged] = useState([]);
+  const [teamOpen, setTeamOpen] = useState(false);
   const [open, setOpen] = useState(false);
   const [newDraft, setNewDraft] = useState(false);
   const [draftName, setDraftName] = useState('');
@@ -187,6 +200,7 @@ export default function RepoBranchSwitcher({ project, liveBranch, remoteSync, on
       } catch { /* not a repo / offline */ }
     })();
     if (native) appRecentProjects().then((r) => alive && setRecents(r || [])).catch(() => {});
+    if (native) managedProjectsList().then((r) => alive && setManaged(Array.isArray(r) ? r : [])).catch(() => {});
     return () => { alive = false; };
   }, [native]);
 
@@ -208,8 +222,78 @@ export default function RepoBranchSwitcher({ project, liveBranch, remoteSync, on
     return () => document.removeEventListener('mousedown', onDoc);
   }, [open, newDraft]);
 
-  // Only meaningful for a versioned project (drafts need git).
-  if (!status?.repo) return null;
+  // The Project section on its own: recents, a team project, a folder. Shared by
+  // the full popup and the project-only dock below.
+  const projectSection = (
+    <>
+      <div className="rb-pop-hd">Project</div>
+      {native && recents.length > 0 ? (
+        recents.map((p, i) => {
+          const label = recentProjectLabel(p, managed);
+          return (
+            <button type="button" key={p} className={'rb-pop-item' + (i === 0 ? ' is-current' : '')} role="menuitem" onClick={() => switchRepo(p)}>
+              <span className="rb-pop-icon"><Icon name={managed.some((m) => m.path === p) ? 'share' : 'folder'} size={14} /></span>
+              <span className="rb-pop-tx">
+                <span className="rb-pop-name">{label.name}</span>
+                <span className="rb-pop-sub">{label.sub}</span>
+              </span>
+              {i === 0 ? <Icon name="check" size={14} className="rb-pop-check" /> : null}
+            </button>
+          );
+        })
+      ) : (
+        <div className="rb-pop-sub" style={{ padding: 'var(--space-2) var(--space-3)' }}>{native ? 'No other recent projects.' : 'Open another project from the desktop app.'}</div>
+      )}
+      {native && (
+        <button type="button" className="rb-pop-item rb-pop-item--action" role="menuitem" data-testid="switcher-open-team" onClick={() => { setOpen(false); setTeamOpen(true); }}>
+          <span className="rb-pop-icon"><Icon name="share" size={14} /></span>
+          <span className="rb-pop-tx"><span className="rb-pop-name">Open a team project…</span></span>
+        </button>
+      )}
+      {native && (
+        <button type="button" className="rb-pop-item rb-pop-item--action" role="menuitem" onClick={openAnother}>
+          <span className="rb-pop-icon"><Icon name="folder-open" size={14} /></span>
+          <span className="rb-pop-tx"><span className="rb-pop-name">Open another folder…</span></span>
+        </button>
+      )}
+    </>
+  );
+  const teamDialog = teamOpen ? <TeamProjectsDialog onClose={() => setTeamOpen(false)} /> : null;
+
+  // A project that isn't a git repo — a managed team project — has no branches;
+  // it still needs the way to another project.
+  if (native && status && (!status.repo || projectOnly)) {
+    const name = project || recentProjectLabel(recents[0] || 'Project', managed).name;
+    return (
+      <div className="rb-dock-wrap">
+        <div className="rb-dock" ref={rootRef}>
+          {open && (
+            <div className="rb-pop rb-pop--up" id="rb-switch-pop" role="menu" aria-label="Switch project" data-testid="repo-switcher-popup">
+              {projectSection}
+            </div>
+          )}
+          {switching ? (
+            <div className="rb-switching" role="status" aria-live="polite">
+              <Icon name="spinner" size={14} className="rb-spin" />
+              <span>Opening <b>{switching}</b>…</span>
+            </div>
+          ) : (
+            <button type="button" data-testid="repo-switcher-trigger" className={'rb-trigger' + (open ? ' is-open' : '')} aria-expanded={open} aria-haspopup="menu" aria-controls="rb-switch-pop" onClick={() => setOpen((v) => !v)} title={name}>
+              <span className="rb-trigger-icon"><Icon name="folder" size={14} /></span>
+              <span className="rb-trigger-proj">{name}</span>
+              <Icon name="chevron-up" size={13} className="rb-trigger-caret" />
+            </button>
+          )}
+          {err && !open && !switching && <div className="rb-switcher-err" role="alert">{err}</div>}
+        </div>
+        {teamDialog}
+      </div>
+    );
+  }
+
+  // Branches are only meaningful for a versioned project (drafts need git),
+  // and never while another authority writes its history (projectOnly).
+  if (!status?.repo || projectOnly) return null;
 
   // Prefer the live branch from the git-status broadcast (kept current as the
   // dev runs `git checkout` in their terminal) over the one-shot mount fetch.
@@ -412,7 +496,7 @@ export default function RepoBranchSwitcher({ project, liveBranch, remoteSync, on
   async function switchRepo(path) {
     setOpen(false);
     if (!native) return;
-    setSwitching(basename(path));
+    setSwitching(recentProjectLabel(path, managed).name);
     try { await openLocalProject(path); }
     catch (e) { setErr(String(e?.message || e || 'Could not open that project.')); setSwitching(''); }
   }
@@ -499,27 +583,7 @@ export default function RepoBranchSwitcher({ project, liveBranch, remoteSync, on
         {open && (
           <div className="rb-pop rb-pop--up" id="rb-switch-pop" role="menu" aria-label="Switch project or version" data-testid="repo-switcher-popup">
             {/* ── Project ── */}
-            <div className="rb-pop-hd">Project</div>
-            {native && recents.length > 0 ? (
-              recents.map((p, i) => (
-                <button type="button" key={p} className={'rb-pop-item' + (i === 0 ? ' is-current' : '')} role="menuitem" onClick={() => switchRepo(p)}>
-                  <span className="rb-pop-icon"><Icon name="folder" size={14} /></span>
-                  <span className="rb-pop-tx">
-                    <span className="rb-pop-name">{basename(p)}</span>
-                    <span className="rb-pop-sub">{p}</span>
-                  </span>
-                  {i === 0 ? <Icon name="check" size={14} className="rb-pop-check" /> : null}
-                </button>
-              ))
-            ) : (
-              <div className="rb-pop-sub" style={{ padding: 'var(--space-2) var(--space-3)' }}>{native ? 'No other recent projects.' : 'Open another project from the desktop app.'}</div>
-            )}
-            {native && (
-              <button type="button" className="rb-pop-item rb-pop-item--action" role="menuitem" onClick={openAnother}>
-                <span className="rb-pop-icon"><Icon name="folder-open" size={14} /></span>
-                <span className="rb-pop-tx"><span className="rb-pop-name">Open another folder…</span></span>
-              </button>
-            )}
+            {projectSection}
 
             <div className="rb-pop-sep" />
             <div className="rb-pop-hd">Branch</div>
@@ -726,6 +790,7 @@ export default function RepoBranchSwitcher({ project, liveBranch, remoteSync, on
           </div>
         </div>
       )}
+      {teamDialog}
     </div>
   );
 }

package/apps/studio/client/panels/SourceConflictPanel.jsx

@@ -0,0 +1,166 @@
+// SourceConflictPanel — plan T28 (feature-reliable-project-multiplayer).
+//
+// A change the project could not merge stays on this device as the person's
+// candidate; the project's version is what everyone else sees. This panel
+// shows both, line by line, and turns the decision into an action:
+//
+//   • Keep mine   — proposes the local version ON TOP of the project's (a new
+//                   accepted action; nothing is rewound, history keeps both);
+//   • Use theirs  — the project's version returns to disk; the local one stays
+//                   in the recovery slots;
+//   • or close and keep editing — the next save is the resolution.
+//
+// No hashes, epochs or lane names: "Your version" / "The project's version".
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+/** Line diff by longest common subsequence — bounded, for a canvas source. */
+export function lineDiff(a, b, max = 2000) {
+  const x = String(a ?? '').split('\n').slice(0, max);
+  const y = String(b ?? '').split('\n').slice(0, max);
+  const n = x.length;
+  const m = y.length;
+  const dp = Array.from({ length: n + 1 }, () => new Uint16Array(m + 1));
+  for (let i = n - 1; i >= 0; i--)
+    for (let j = m - 1; j >= 0; j--)
+      dp[i][j] = x[i] === y[j] ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1]);
+  const out = [];
+  let i = 0;
+  let j = 0;
+  while (i < n && j < m) {
+    if (x[i] === y[j]) {
+      out.push({ kind: 'same', text: x[i] });
+      i++;
+      j++;
+    } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+      out.push({ kind: 'mine', text: x[i++] });
+    } else {
+      out.push({ kind: 'theirs', text: y[j++] });
+    }
+  }
+  while (i < n) out.push({ kind: 'mine', text: x[i++] });
+  while (j < m) out.push({ kind: 'theirs', text: y[j++] });
+  return out;
+}
+
+/** Collapse long runs of unchanged lines to a count, keeping 2 lines of context. */
+function withContext(rows, ctx = 2) {
+  const keep = rows.map((r, idx) => r.kind !== 'same' || rows.slice(Math.max(0, idx - ctx), idx + ctx + 1).some((q) => q.kind !== 'same'));
+  const out = [];
+  let skipped = 0;
+  rows.forEach((r, idx) => {
+    if (keep[idx]) {
+      if (skipped) out.push({ kind: 'skip', text: `${skipped} unchanged line${skipped === 1 ? '' : 's'}` });
+      skipped = 0;
+      out.push(r);
+    } else skipped++;
+  });
+  if (skipped) out.push({ kind: 'skip', text: `${skipped} unchanged line${skipped === 1 ? '' : 's'}` });
+  return out;
+}
+
+export default function SourceConflictPanel({ slug, onClose }) {
+  const [sides, setSides] = useState(null);
+  const [error, setError] = useState('');
+  const [busy, setBusy] = useState('');
+  const ref = useRef(null);
+
+  useEffect(() => {
+    let alive = true;
+    fetch(`/_api/project/conflict?file=${encodeURIComponent(slug)}`)
+      .then((r) => r.json().catch(() => ({})))
+      .then((j) => {
+        if (!alive) return;
+        if (j.ok) setSides(j);
+        else setError(j.error || 'This conflict is already resolved.');
+      })
+      .catch(() => alive && setError('Maude isn’t reachable right now.'));
+    return () => {
+      alive = false;
+    };
+  }, [slug]);
+
+  useEffect(() => {
+    const prev = document.activeElement;
+    ref.current?.querySelector('button')?.focus();
+    const onKey = (e) => {
+      if (e.key === 'Escape') onClose();
+    };
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('keydown', onKey);
+      prev?.focus?.();
+    };
+  }, [onClose]);
+
+  const rows = useMemo(() => (sides ? withContext(lineDiff(sides.mine ?? '', sides.theirs ?? '')) : []), [sides]);
+
+  async function choose(choice) {
+    setBusy(choice);
+    setError('');
+    try {
+      const r = await fetch('/_api/project/conflict', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ file: slug, choice }),
+      });
+      const j = await r.json().catch(() => ({}));
+      if (j.ok) onClose(choice);
+      else setError(j.code === 'base-conflict' ? 'Someone changed it again just now — look at the new version and choose again.' : j.error || 'That did not work.');
+    } catch {
+      setError('Maude isn’t reachable right now.');
+    } finally {
+      setBusy('');
+    }
+  }
+
+  return (
+    <div className="gi-modal" role="dialog" aria-modal="true" aria-labelledby="scp-title">
+      <div className="gi-scrim" aria-hidden="true" onClick={() => onClose()} />
+      <div className="gi-dialog scp-dialog" ref={ref} data-testid="source-conflict-panel">
+        <div className="tp-dialog-head">
+          <div>
+            <h2 id="scp-title">Two versions of {slug}</h2>
+            <p>Your change and a teammate’s touched the same lines. Nothing is lost — choose which one the project keeps.</p>
+          </div>
+          <button type="button" className="btn btn--ghost btn--sm" onClick={() => onClose()} aria-label="Close" data-testid="source-conflict-close">
+            ×
+          </button>
+        </div>
+        {sides && (
+          <>
+            <div className="scp-legend" aria-hidden="true">
+              <span className="scp-key scp-key--mine">Your version</span>
+              <span className="scp-key scp-key--theirs">The project’s version</span>
+            </div>
+            <div className="scp-diff" role="region" aria-label="Differences" tabIndex={0} data-testid="source-conflict-diff">
+              {rows.map((r, idx) => (
+                <div key={idx} className={`scp-line scp-line--${r.kind}`}>
+                  <span className="scp-mark" aria-hidden="true">
+                    {r.kind === 'mine' ? '−' : r.kind === 'theirs' ? '+' : r.kind === 'skip' ? '⋯' : ' '}
+                  </span>
+                  <span className="sr-only">{r.kind === 'mine' ? 'Yours: ' : r.kind === 'theirs' ? 'Project: ' : ''}</span>
+                  <code>{r.text || ' '}</code>
+                </div>
+              ))}
+            </div>
+          </>
+        )}
+        {error && (
+          <p className="scp-error" role="alert" data-testid="source-conflict-error">
+            {error}
+          </p>
+        )}
+        <div className="scp-actions">
+          <button type="button" className="btn btn--primary" disabled={!sides || !!busy} onClick={() => choose('mine')} data-testid="source-conflict-keep-mine">
+            {busy === 'mine' ? 'Saving…' : 'Keep my version'}
+          </button>
+          <button type="button" className="btn" disabled={!sides || !!busy} onClick={() => choose('theirs')} data-testid="source-conflict-use-theirs">
+            {busy === 'theirs' ? 'Updating…' : 'Use the project’s version'}
+          </button>
+          <span className="scp-hint">Or close this and edit the canvas — your next save resolves it.</span>
+        </div>
+      </div>
+    </div>
+  );
+}