@1agh/maude 0.42.0 → 0.44.0

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

@@ -7,7 +7,8 @@
 // not-connected explainer (where a user actually hits the wall). Both also use it
 // as the persistent re-check surface — `refresh()` re-probes without a reinstall.
 
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { getClaudeAutoSetup, isNativeApp, setClaudeAutoSetup } from '../github.js';
 
 /** Fetch + cache the readiness report. `refresh()` re-probes (the re-check button). */
 export function useReadiness(enabled = true) {
@@ -82,7 +83,165 @@ function Inline({ text }) {
   return <>{parts}</>;
 }
 
-function Row({ item }) {
+// DDR-166 T0d — a bounded, cancelable poll after "Sign in" is clicked. Capped
+// duration (not indefinite), single-flight (the button disables while
+// polling), and its copy is static text — no animation, so it costs nothing
+// under prefers-reduced-motion.
+const SIGNIN_POLL_MS = 2000;
+const SIGNIN_POLL_MAX_MS = 120000;
+// The installer itself is fire-and-forget server-side (avoids Bun's default
+// 10s idle timeout on a slow network) — poll for its result the same way.
+const INSTALL_POLL_MS = 1500;
+const INSTALL_POLL_MAX_MS = 90000;
+
+// DDR-166 T0c/T0d — one component drives both the "install then sign in"
+// chain (mode='install') and the "sign in only" case (mode='signin'), since
+// the poll-after-signin logic is identical either way. The install step
+// itself is a single distinct network call, not a loop — only the sign-in
+// half needs polling (the browser-OAuth completion signal).
+function SetupAction({ mode, refresh }) {
+  const [phase, setPhase] = useState('idle'); // idle | installing | waiting | error
+  const [error, setError] = useState(null);
+  const timerRef = useRef({ interval: null, deadline: 0 });
+
+  const stopPoll = () => {
+    if (timerRef.current.interval) clearInterval(timerRef.current.interval);
+    timerRef.current.interval = null;
+  };
+
+  const pollForSignin = () => {
+    setPhase('waiting');
+    timerRef.current.deadline = Date.now() + SIGNIN_POLL_MAX_MS;
+    timerRef.current.interval = setInterval(async () => {
+      if (Date.now() > timerRef.current.deadline) {
+        stopPoll();
+        setPhase('error');
+        setError('Sign-in timed out — try again.');
+        return;
+      }
+      const report = await refresh();
+      const claudeItem = report?.items?.find((i) => i.id === 'claude');
+      if (claudeItem?.status === 'present') stopPoll();
+    }, SIGNIN_POLL_MS);
+  };
+
+  const runSignin = async () => {
+    const res = await fetch('/_api/claude/signin', { method: 'POST' })
+      .then((r) => r.json())
+      .catch(() => ({ ok: false, reason: 'Could not reach Maude.' }));
+    if (!res.ok) {
+      setPhase('error');
+      setError(res.reason || 'Could not start sign-in.');
+      return;
+    }
+    pollForSignin();
+  };
+
+  const pollForInstall = () => {
+    setPhase('installing');
+    timerRef.current.deadline = Date.now() + INSTALL_POLL_MAX_MS;
+    timerRef.current.interval = setInterval(async () => {
+      if (Date.now() > timerRef.current.deadline) {
+        stopPoll();
+        setPhase('error');
+        setError('Install timed out — you can also run the command below yourself.');
+        return;
+      }
+      const state = await fetch('/_api/claude/install-status')
+        .then((r) => r.json())
+        .catch(() => null);
+      if (!state || state.phase !== 'done') return; // still running
+      stopPoll();
+      if (!state.ok) {
+        setPhase('error');
+        setError(state.reason || 'Install failed — you can also run the command below yourself.');
+        return;
+      }
+      // One click covers both steps: only on verified-fresh install success
+      // does this move straight into sign-in with no second click needed.
+      await runSignin();
+    }, INSTALL_POLL_MS);
+  };
+
+  const start = async () => {
+    setError(null);
+    if (mode === 'install') {
+      const res = await fetch('/_api/claude/install', { method: 'POST' })
+        .then((r) => r.json())
+        .catch(() => ({ ok: false, reason: 'Could not reach Maude.' }));
+      if (!res.ok) {
+        setPhase('error');
+        setError(res.reason || 'Could not start the installer.');
+        return;
+      }
+      pollForInstall();
+    } else {
+      await runSignin();
+    }
+  };
+
+  const cancel = async () => {
+    stopPoll();
+    setPhase('idle');
+    await fetch('/_api/claude/signin-cancel', { method: 'POST' }).catch(() => {});
+  };
+
+  useEffect(() => () => stopPoll(), []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  if (phase === 'installing') {
+    return (
+      <span className="rdy-fix">
+        <span className="rdy-fix-tx">Installing Claude Code…</span>
+      </span>
+    );
+  }
+  if (phase === 'waiting') {
+    return (
+      <span className="rdy-fix">
+        <span className="rdy-fix-tx">Waiting for you to finish signing in in your browser…</span>
+        <button type="button" className="rdy-copy" onClick={cancel}>
+          Cancel
+        </button>
+      </span>
+    );
+  }
+  return (
+    <span className="rdy-fix">
+      {error ? <span className="rdy-fix-tx rdy-fix-tx--err">{error}</span> : null}
+      <button
+        type="button"
+        className="rdy-signin"
+        data-testid={mode === 'install' ? 'acp-setup-install' : 'acp-setup-signin'}
+        onClick={start}
+      >
+        {mode === 'install' ? 'Set up AI editing' : 'Sign in to Claude'}
+      </button>
+    </span>
+  );
+}
+
+function InstallCommand({ command }) {
+  const [copied, setCopied] = useState(false);
+  const copy = () => {
+    navigator.clipboard?.writeText(command).then(
+      () => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+      },
+      () => {}
+    );
+  };
+  return (
+    <span className="rdy-cmd">
+      <code className="rdy-cmd-tx">{command}</code>
+      <button type="button" className="rdy-copy" onClick={copy} aria-label="Copy install command">
+        {copied ? 'Copied' : 'Copy'}
+      </button>
+    </span>
+  );
+}
+
+function Row({ item, refresh }) {
   const [copied, setCopied] = useState(false);
   const copyFix = () => {
     const cmds = item.remediation?.replace(/`/g, '') ?? '';
@@ -95,7 +254,10 @@ function Row({ item }) {
     );
   };
   return (
-    <li className={`rdy-row rdy-row--${item.status}${item.required ? '' : ' rdy-row--opt'}`}>
+    <li
+      className={`rdy-row rdy-row--${item.status}${item.required ? '' : ' rdy-row--opt'}`}
+      data-testid={`rdy-row-${item.id}`}
+    >
       <span className="rdy-ic" aria-hidden="true">
         <StatusIcon status={item.status} />
       </span>
@@ -109,11 +271,33 @@ function Row({ item }) {
             <span className="rdy-fix-tx">
               <Inline text={item.remediation} />
             </span>
-            <button type="button" className="rdy-copy" onClick={copyFix} aria-label={`Copy the fix for ${item.label}`}>
-              {copied ? 'Copied' : 'Copy'}
-            </button>
+            {!item.installCommand && !item.action ? (
+              <button type="button" className="rdy-copy" onClick={copyFix} aria-label={`Copy the fix for ${item.label}`}>
+                {copied ? 'Copied' : 'Copy'}
+              </button>
+            ) : null}
+          </span>
+        ) : null}
+        {item.action === 'signin' && item.resolvedPath ? (
+          <span className="rdy-fix-tx rdy-resolved-path">
+            {item.resolvedViaMaude ? 'Installed by Maude: ' : 'Found on your PATH: '}
+            <code>{item.resolvedPath}</code>
           </span>
         ) : null}
+        {(item.action === 'install' || item.action === 'signin') && refresh ? (
+          <SetupAction mode={item.action} refresh={refresh} />
+        ) : null}
+        {item.installCommand ? (
+          <>
+            {item.action === 'install' ? (
+              <span className="rdy-fix-tx rdy-fallback-label">
+                Clicking above runs this command, then opens your browser to sign in. Prefer to do it
+                yourself?
+              </span>
+            ) : null}
+            <InstallCommand command={item.installCommand} />
+          </>
+        ) : null}
       </span>
     </li>
   );
@@ -124,7 +308,7 @@ export default function ReadinessList({ report, loading, refresh }) {
     <div className="rdy">
       <ul className="rdy-list">
         {report?.items?.map((it) => (
-          <Row key={it.id} item={it} />
+          <Row key={it.id} item={it} refresh={refresh} />
         ))}
       </ul>
       {refresh ? (
@@ -138,6 +322,41 @@ export default function ReadinessList({ report, loading, refresh }) {
   );
 }
 
+// DDR-166 Decision 5 — the settings-UI opt-out for the auto-install/auto-
+// sign-in buttons above. DEFAULT ON. Native-only (the toggle is backed by a
+// Tauri command); a terminal-launched `maude design serve` web session has
+// no automated action to opt out of in the first place.
+function AutoSetupToggle() {
+  const [on, setOn] = useState(true);
+  useEffect(() => {
+    let alive = true;
+    getClaudeAutoSetup()
+      .then((v) => alive && setOn(v !== false))
+      .catch(() => {});
+    return () => {
+      alive = false;
+    };
+  }, []);
+  if (!isNativeApp()) return null;
+  return (
+    <label className="rdy-autosetup-toggle">
+      <input
+        type="checkbox"
+        checked={on}
+        onChange={(e) => {
+          const next = e.target.checked;
+          setOn(next);
+          setClaudeAutoSetup(next).catch(() => setOn(!next));
+        }}
+      />
+      <span>
+        Offer to install Claude Code and sign in automatically. Turn off to see only the copy-paste
+        command — takes effect next launch or project switch.
+      </span>
+    </label>
+  );
+}
+
 // Standalone readiness modal reachable any time from Help ▸ Check AI editing
 // readiness… (DDR-128, T6 — the persistent re-check surface, not gated on
 // first-run or a disconnected chat). Reuses the shared help-modal chrome (backdrop
@@ -182,6 +401,7 @@ export function ReadinessDialog({ open, onClose }) {
               {loading ? 'Checking…' : "Couldn't reach the readiness probe."}
             </p>
           )}
+          <AutoSetupToggle />
         </div>
       </div>
     </div>

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

@@ -19,7 +19,7 @@
 
 import { useEffect, useRef, useState } from 'react';
 
-import { appRecentProjects, isNativeApp, openLocalProject, pickDirectory } from '../github.js';
+import { appRecentProjects, isNativeApp, openGitHubUrl, openLocalProject, pickDirectory } from '../github.js';
 
 const SHARED = new Set(['main', 'master']);
 
@@ -43,6 +43,10 @@ function Icon({ name, size = 16, className }) {
     // refresh drafts — a circular arrow.
     refresh: (<><path d="M12.5 8a4.5 4.5 0 1 1-1.3-3.2" /><polyline points="12.8 2.5 12.8 5 10.3 5" /></>),
     spinner: <path d="M8 2.2a5.8 5.8 0 1 0 5.8 5.8" />,
+    // "get latest" — pull the shared version's new commits down.
+    download: (<><line x1="8" y1="2.5" x2="8" y2="10.5" /><polyline points="5 7.5 8 10.5 11 7.5" /><line x1="3.5" y1="13.2" x2="12.5" y2="13.2" /></>),
+    // dismiss (×) — used by the "continue on <draft>" resume nudge.
+    close: (<><line x1="4" y1="4" x2="12" y2="12" /><line x1="12" y1="4" x2="4" y2="12" /></>),
   }[name];
   return (
     <svg className={className} width={size} height={size} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
@@ -93,7 +97,7 @@ async function postJson(url, body, opts = {}) {
   }
 }
 
-export default function RepoBranchSwitcher({ project, liveBranch }) {
+export default function RepoBranchSwitcher({ project, liveBranch, remoteSync, onGetLatest }) {
   const native = isNativeApp();
   const [status, setStatus] = useState(null); // { repo, branch }
   const [branches, setBranches] = useState([]);
@@ -103,6 +107,34 @@ export default function RepoBranchSwitcher({ project, liveBranch }) {
   const [draftName, setDraftName] = useState('');
   const [foldConfirm, setFoldConfirm] = useState(false);
   const [folding, setFolding] = useState('');
+  // After a GitHub-remote fold: { url, number } (PR opened) or { message } (draft
+  // pushed but no PR). Keeps the confirm sheet open to show the result (DDR-162).
+  const [prResult, setPrResult] = useState(null);
+  const [prCopied, setPrCopied] = useState(false);
+  // Get-latest (pull) busy state for the dock nudge.
+  const [pulling, setPulling] = useState(false);
+  // "Continue on <draft>?" nudge — dismissed for this session once the user opts out.
+  const [resumeDismissed, setResumeDismissed] = useState(false);
+
+  // Open the PR in the OS browser. A WKWebView anchor can't reach the default browser,
+  // so native goes through the Tauri opener (github.com host-locked in Rust); an older
+  // desktop build without that command falls back to copy-to-clipboard. Web just opens.
+  async function reviewPr(url) {
+    if (!isNativeApp()) {
+      window.open(url, '_blank', 'noopener,noreferrer');
+      return;
+    }
+    try {
+      await openGitHubUrl(url);
+    } catch {
+      try {
+        await navigator.clipboard.writeText(url);
+        setPrCopied(true);
+      } catch {
+        /* clipboard blocked — the URL is shown selectable in the sheet */
+      }
+    }
+  }
   const [busy, setBusy] = useState(false);
   const [switching, setSwitching] = useState('');
   const [err, setErr] = useState('');
@@ -248,17 +280,43 @@ export default function RepoBranchSwitcher({ project, liveBranch }) {
     else { setErr(r.json?.error || 'Could not create the draft.'); setBusy(false); }
   }
 
-  // "Add this draft to the Shared version" (Task 7) — merge + publish, then remove.
+  // "Get latest" from the dock nudge — pull the shared version's new commits. Reuses
+  // the app's pull handler (onGetLatest = gitGetLatest): on success it re-probes so the
+  // nudge clears; a content conflict opens the visual resolver (handled in app.jsx).
+  async function getLatest() {
+    if (pulling || !onGetLatest) return;
+    setPulling(true);
+    setErr('');
+    const r = await onGetLatest();
+    setPulling(false);
+    if (r && !r.ok && !r.conflict)
+      setErr(r.status === 401 || r.authRequired ? 'Sign in with GitHub to get the latest.' : r.error || 'Could not get the latest.');
+  }
+
+  // "Add this draft to the Shared version" (Task 7 / DDR-162). On a GitHub remote this
+  // opens a pull request (the merge happens on GitHub, post-review) — surface the PR
+  // link and keep the sheet open. A local project merges directly (reload). A draft that
+  // pushed but couldn't open a PR (no sign-in / non-github) shows a heads-up.
   async function foldDraft() {
-    setFoldConfirm(false);
     setFolding(branch);
     setErr('');
-    const r = await postJson('/_api/git/fold', { name: branch });
-    if (r.ok && r.json?.ok) window.location.reload();
-    else {
-      setErr(r.status === 401 ? `Sign in with GitHub to merge into ${sharedName}.` : r.json?.error || 'Could not merge the branch.');
+    const r = await postJson('/_api/git/fold', { name: branch }, { timeoutMs: 45000 });
+    const j = r.json;
+    if (r.ok && j?.ok && j.prUrl) {
+      setPrResult({ url: j.prUrl, number: j.prNumber, repo: j.repo });
+      setFolding('');
+      reloadBranches(); // the draft still exists (the PR references it) — keep the list
+      return;
+    }
+    if (r.ok && j?.ok && j.prUnavailable) {
+      setPrResult({ message: j.error || 'Draft published, but the pull request could not be opened.' });
       setFolding('');
+      reloadBranches();
+      return;
     }
+    if (r.ok && j?.ok) { window.location.reload(); return; } // local merge (no remote)
+    setErr(r.status === 401 ? `Sign in with GitHub to add “${branch}” to ${sharedName}.` : j?.error || 'Could not add the branch.');
+    setFolding('');
   }
 
   async function switchRepo(path) {
@@ -282,6 +340,16 @@ export default function RepoBranchSwitcher({ project, liveBranch }) {
 
   const slug = slugify(draftName);
   const currentDraft = onShared ? null : branches.find((b) => b.current);
+  // On the Shared version with a draft around? Offer to jump back to the most
+  // recently-worked local draft. Maude shows whatever branch HEAD is, so after a
+  // merge / Get-latest you land on the Shared version — this saves the manual switch
+  // back to the draft you were iterating on. Dismissible for the session.
+  const resumeDraft =
+    onShared && !resumeDismissed && !switching && !folding
+      ? [...branches]
+          .filter((b) => !SHARED.has(b.name) && b.where !== 'remote')
+          .sort((a, b) => (b.updatedAt || 0) - (a.updatedAt || 0))[0]
+      : null;
 
   // Search-miss (DDR-133, Task 4): a typed name that matches no LOCAL or already-
   // fetched remote branch offers an explicit remote search (the bounded fetch),
@@ -316,6 +384,23 @@ export default function RepoBranchSwitcher({ project, liveBranch }) {
 
   return (
     <div className="rb-dock-wrap">
+      {remoteSync?.remoteAhead && !switching && !folding && (
+        <button type="button" data-testid="switcher-get-latest" className="btn btn--primary rb-getlatest" onClick={getLatest} disabled={pulling} title={`Get the latest ${sharedName}`}>
+          <Icon name={pulling ? 'spinner' : 'download'} size={14} className={pulling ? 'rb-spin' : ''} />
+          <span className="rb-getlatest-tx">{pulling ? 'Getting the latest…' : 'Get latest'}</span>
+          {!pulling && remoteSync.behind > 0 && <span className="rb-getlatest-sub">{remoteSync.behind} new on {sharedName}</span>}
+        </button>
+      )}
+      {resumeDraft && (
+        <div className="rb-resume" data-testid="switcher-resume">
+          <button type="button" className="rb-resume-go" onClick={() => switchDraft(resumeDraft.name)} title={`Switch to ${resumeDraft.name}`}>
+            <span className="rb-resume-icon"><Icon name="draft" size={13} /></span>
+            <span className="rb-resume-tx">Continue on <b>{resumeDraft.name}</b></span>
+            <Icon name="chevron-right" size={12} className="rb-resume-arrow" />
+          </button>
+          <button type="button" className="rb-resume-x" data-testid="switcher-resume-dismiss" aria-label="Dismiss" onClick={() => setResumeDismissed(true)}><Icon name="close" size={12} /></button>
+        </div>
+      )}
       <div className="rb-dock" ref={rootRef}>
         {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">
@@ -376,7 +461,7 @@ export default function RepoBranchSwitcher({ project, liveBranch }) {
                   </span>
                   <Icon name="check" size={14} className="rb-pop-check" />
                 </button>
-                <button type="button" data-testid="switcher-merge" className="rb-fold" role="menuitem" onClick={() => { setOpen(false); setFoldConfirm(true); }}>
+                <button type="button" data-testid="switcher-merge" className="rb-fold" role="menuitem" onClick={() => { setOpen(false); setErr(''); setPrResult(null); setPrCopied(false); setFoldConfirm(true); }}>
                   <span className="rb-fold-icon"><Icon name="arrow-up-to-line" size={15} /></span>
                   <span className="rb-fold-tx">
                     <span className="rb-fold-title">Merge this branch → {sharedName}</span>
@@ -459,19 +544,46 @@ export default function RepoBranchSwitcher({ project, liveBranch }) {
         {err && !open && !newDraft && !switching && <div className="rb-switcher-err" role="alert">{err}</div>}
       </div>
 
-      {/* Merge-to-default confirm — the one modal in this surface. No 3-way merge UI. */}
+      {/* Add-to-default confirm — the one modal in this surface. No 3-way merge UI.
+          After a GitHub-remote fold it flips to a pull-request result view (DDR-162). */}
       {foldConfirm && (
-        <div className="rb-scrim" role="presentation" onClick={() => setFoldConfirm(false)}>
-          <div className="rb-sheet" role="dialog" aria-modal="true" aria-labelledby="rb-sheet-title" aria-describedby="rb-sheet-body" onClick={(e) => e.stopPropagation()} onKeyDown={(e) => { if (e.key === 'Escape') setFoldConfirm(false); }}>
-            <span className="rb-sheet-icon"><Icon name="arrow-up-to-line" size={20} /></span>
-            <h2 className="rb-sheet-title" id="rb-sheet-title">Merge this branch → {sharedName}</h2>
-            <p className="rb-sheet-body" id="rb-sheet-body">Everything in <b>“{currentDraft?.name || branch}”</b> becomes part of <b>{sharedName}</b> — the default branch everyone shares.</p>
-            <p className="rb-sheet-meta">Your work is now part of {sharedName}, kept in History. Teammates pick it up the next time they Get latest, and the empty branch is cleared away — nothing is lost.</p>
-            {err && <p className="rb-newdraft-err">{err}</p>}
-            <div className="rb-sheet-actions">
-              <button type="button" className="btn btn--ghost" onClick={() => { setFoldConfirm(false); setErr(''); }}>Cancel</button>
-              <button type="button" data-testid="switcher-merge-confirm" className="btn btn--primary" onClick={foldDraft}><Icon name="arrow-up-to-line" size={15} /> Merge → {sharedName}</button>
-            </div>
+        <div className="rb-scrim" role="presentation" onClick={() => { setFoldConfirm(false); setPrResult(null); setPrCopied(false); }}>
+          <div className="rb-sheet" role="dialog" aria-modal="true" aria-labelledby="rb-sheet-title" aria-describedby="rb-sheet-body" onClick={(e) => e.stopPropagation()} onKeyDown={(e) => { if (e.key === 'Escape') { setFoldConfirm(false); setPrResult(null); setPrCopied(false); } }}>
+            {prResult ? (
+              prResult.url ? (
+                <>
+                  <span className="rb-sheet-icon"><Icon name="share" size={20} /></span>
+                  <h2 className="rb-sheet-title" id="rb-sheet-title">Pull request opened{prResult.number ? ` #${prResult.number}` : ''}</h2>
+                  <p className="rb-sheet-body" id="rb-sheet-body">Your draft <b>“{branch}”</b> is up as a pull request into <b>{sharedName}</b>{prResult.repo ? <> of <b>{prResult.repo}</b></> : null}. Review and merge it on GitHub — that keeps your team's review rules.</p>
+                  <p className="rb-sheet-meta rb-pr-url">{prResult.url}</p>
+                  <div className="rb-sheet-actions">
+                    <button type="button" className="btn btn--ghost" onClick={() => { setFoldConfirm(false); setPrResult(null); setPrCopied(false); }}>Close</button>
+                    <button type="button" className="btn btn--primary" data-testid="switcher-pr-link" onClick={() => reviewPr(prResult.url)}><Icon name="share" size={15} /> {prCopied ? 'Link copied — paste in your browser' : 'Review on GitHub'}</button>
+                  </div>
+                </>
+              ) : (
+                <>
+                  <span className="rb-sheet-icon"><Icon name="share" size={20} /></span>
+                  <h2 className="rb-sheet-title" id="rb-sheet-title">Draft published</h2>
+                  <p className="rb-sheet-body" id="rb-sheet-body">{prResult.message}</p>
+                  <div className="rb-sheet-actions">
+                    <button type="button" data-testid="switcher-pr-dismiss" className="btn btn--primary" onClick={() => { setFoldConfirm(false); setPrResult(null); setPrCopied(false); }}>Got it</button>
+                  </div>
+                </>
+              )
+            ) : (
+              <>
+                <span className="rb-sheet-icon"><Icon name="arrow-up-to-line" size={20} /></span>
+                <h2 className="rb-sheet-title" id="rb-sheet-title">Add this branch to {sharedName}</h2>
+                <p className="rb-sheet-body" id="rb-sheet-body">Propose everything in <b>“{currentDraft?.name || branch}”</b> to <b>{sharedName}</b> — the default branch everyone shares.</p>
+                <p className="rb-sheet-meta">On a shared GitHub project this opens a pull request for review; a local project merges directly. Nothing is lost — your work is kept in History.</p>
+                {err && <p className="rb-newdraft-err">{err}</p>}
+                <div className="rb-sheet-actions">
+                  <button type="button" className="btn btn--ghost" onClick={() => { setFoldConfirm(false); setErr(''); }}>Cancel</button>
+                  <button type="button" data-testid="switcher-merge-confirm" className="btn btn--primary" disabled={!!folding} onClick={foldDraft}><Icon name="arrow-up-to-line" size={15} /> {folding ? 'Adding…' : `Add to ${sharedName}`}</button>
+                </div>
+              </>
+            )}
           </div>
         </div>
       )}