, the rest as text. */
function Inline({ text }) {
const parts = [];
const re = /`([^`]+)`/g;
let last = 0;
let m;
while ((m = re.exec(text)) !== null) {
if (m.index > last) parts.push(text.slice(last, m.index));
parts.push({m[1]});
last = m.index + m[0].length;
}
if (last < text.length) parts.push(text.slice(last));
return <>{parts};
}
// 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;
// The window we allow with NO `running` signal from the server before giving up.
// The deadline is pushed forward on every `running` poll (see pollForInstall), so
// a genuinely-progressing install is never cut off — this only bounds a hung/lost
// installer. Generous vs the old fixed 90 s that cut off fresh-machine downloads.
const INSTALL_POLL_MAX_MS = 180000;
// 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 is taking longer than expected — it may still finish in the background; you can also run the command below yourself, then Re-check.');
return;
}
const state = await fetch('/_api/claude/install-status')
.then((r) => r.json())
.catch(() => null);
// The installer downloads a ~200 MB binary; on a fresh/slow machine that
// routinely exceeds a fixed 90 s wall clock (RCA G6 — the "Install timed
// out" the user hit while the fire-and-forget install was still running).
// While the server reports it's actively installing, push the deadline
// forward so a slow-but-progressing download is never declared a failure;
// the cap only bites if the server stops reporting `running` (hung/lost).
if (state && state.phase === 'running') {
timerRef.current.deadline = Date.now() + INSTALL_POLL_MAX_MS;
return;
}
if (!state || state.phase !== 'done') return; // transient — keep polling to the deadline
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 (
Installing Claude Code…
);
}
if (phase === 'waiting') {
return (
Waiting for you to finish signing in in your browser…
);
}
return (
{error ? {error} : null}
);
}
function InstallCommand({ command }) {
const [copied, setCopied] = useState(false);
const copy = () => {
navigator.clipboard?.writeText(command).then(
() => {
setCopied(true);
setTimeout(() => setCopied(false), 1500);
},
() => {}
);
};
return (
{command}
);
}
function Row({ item, refresh }) {
const [copied, setCopied] = useState(false);
const copyFix = () => {
const cmds = item.remediation?.replace(/`/g, '') ?? '';
navigator.clipboard?.writeText(cmds).then(
() => {
setCopied(true);
setTimeout(() => setCopied(false), 1500);
},
() => {}
);
};
return (
{item.label}
{item.resolvedPath}
) : null}
{(item.action === 'install' || item.action === 'signin') && refresh ? (
);
}
export default function ReadinessList({ report, loading, refresh }) {
return (
{report?.items?.map((it) => (
|
))}
{refresh ? (
) : null}
);
}
// 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 (
);
}
// 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
// + header + body) so it matches the What's New / Help dialogs, and the same
// ReadinessList. Self-contained: probes only while open (the hook's `enabled` gate),
// re-probes via the list's Re-check button.
export function ReadinessDialog({ open, onClose }) {
const { report, loading, refresh } = useReadiness(open);
useEffect(() => {
if (!open) return undefined;
const onKey = (e) => e.key === 'Escape' && onClose();
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [open, onClose]);
if (!open) return null;
return (
{
if (e.target === e.currentTarget) onClose();
}}
>
Check AI editing readiness
The canvas browser, version history, and sharing work with no setup. AI editing
additionally drives a Claude Code you have installed — here's what it needs:
{report ? (
{loading ? 'Checking…' : "Couldn't reach the readiness probe."}
)}