@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/files/McpSection.tsx

@@ -1,66 +1,709 @@
-// The File tab's MCP section: how to attach a coding agent to this workspace.
-// Lives where History used to — connecting an agent is a thing an author does
-// every session, and buried at the bottom of the collapsed Manual nobody
-// found it.
+// Workspace MCP readiness and setup: the top bar's Agent chip opens it in a
+// `Popover` (AgentChip.tsx), and Help repeats it behind a disclosure.
 //
-// On a CLOUD workspace the Worker serves `GET /auth/mcp-token` (cookie-authed)
-// with a ready-to-paste `claude mcp add` command scoped to this user's own
-// /mcp endpoint — render that with a Copy button. A local server has no such
-// route, so any non-JSON answer, non-200, or missing field means "local": show
-// the `connect` instructions. The fallback needs no cloud-detection meta — the
-// route's absence IS the signal.
-import { useEffect, useState } from "react";
-
-export function McpSection() {
-  const [command, setCommand] = useState<string | null>(null);
-  const [copied, setCopied] = useState(false);
+// TWO PRESENTATIONS OF ONE STATE. The chip owns the health probe
+// (`useMcpHealth`) and hands it to `McpPopover`, so the chip's word and the
+// details under it never disagree. Help's `McpSection` probes for itself,
+// because Help is a modal dialog and a popover inside it would be a floating
+// layer over a floating layer. The left column used to carry a 64px "band"
+// with the same details; the chip replaced it, so the column's rows are the
+// author's again.
+//
+// The live server owns the status contract:
+// `GET /api/health` says whether `/mcp` is mounted and whether direct document
+// writes are enabled. It does not report an active client, so this UI never
+// claims one is connected.
+//
+// MCP is workspace-scoped. The current Project title and storage name are a
+// target hint for the agent, not an access boundary. Hosted, an AI app connects
+// to the MCP URL on MAIN and signs in with the member's Dailies account (worker
+// oauth.ts). The connect rows show that URL, read from the discovery document
+// this host serves, and link to the dashboard's Connect your AI page for each
+// app's steps, the connected apps and the tokens for clients without OAuth.
+// The editor origin cannot reach `/api/mcp`, so no token is made or shown here.
+//
+// Hosted, the write half is the owner's switch here: it writes `mcp.write` into
+// the workspace's motion.config.json through the ordinary file route, against
+// the hash it read, keeping every other key. A hosted workspace has no terminal
+// to run `connect --write` in, and this is the same deliberate second act.
+import { useEffect, useRef, useState } from "react";
+import type { RefObject } from "react";
+import { IconCheck, IconChevron, IconLink, IconLinkOff, Popover, Toggle } from "@dailies-studio/ui";
+import { isCloudWorkspace } from "../../state/posterCapture.js";
+import { isLoopbackHostname } from "../../stage/jsSelfProfiler.js";
+
+const CONNECT_COMMAND = "npx dailies-studio connect";
+const WRITE_COMMAND = "npx dailies-studio connect --write";
+const STATUS_COMMAND = "dailies status";
+/** The CLI's `CONFIG_FILE`, which the hosted MCP surface reads its write half
+ *  from (worker mcpConfig.ts). */
+export const MCP_CONFIG_FILE = "motion.config.json";
+const WRITES_LABEL = "Let agents edit this workspace";
+/** A client lists its tools when it connects, and this server can tell no
+ *  connected client that the list changed (it keeps no stream). */
+export const RECONNECT_NOTE =
+  "A client connected before a change keeps its old tools until it reconnects: in Claude Code, run /mcp and reconnect dailies.";
+/** The `.mcp.json` server key the CLI writes (connectVerbs.ts MCP_SERVER_KEY)
+ *  and the name the dashboard's command registers. */
+const MCP_SERVER_KEY = "dailies";
+/** The dashboard's Connect your AI page (dashboard Sidebar.tsx `View`). Relative
+ *  on purpose: the editor host knows no MAIN origin, and it redirects every
+ *  `/projects` path, query kept, to MAIN (worker index.ts `hostRoute`), the
+ *  same way the account menu reaches the dashboard. */
+export const AGENT_ACCESS_HREF = "/projects/?view=settings-agents";
+/** `WORKER_HEADERS.mcpToken` / `CLOUD_HEADERS.mcpToken`. Chrome imports
+ *  neither package, so the name is repeated here. */
+const MCP_TOKEN_HEADER = "x-studio-mcp-token";
+/** The env var a non-loopback studio requires (server.ts `mcpMountable`). The
+ *  rows name it and never carry a value. */
+const MCP_TOKEN_ENV = "STUDIO_MCP_TOKEN";
+
+export type McpHealth =
+  | { kind: "checking" }
+  | { kind: "unavailable" }
+  /** `allowed`: whether this caller may use MCP (`mcp.connect`); `manage`:
+   *  whether it may flip the write half (`mcp.manage`, Owner or Admin). Both
+   *  from worker `storeHealth`; a local server has no roles, so both true. */
+  | { kind: "ready"; mounted: boolean; write: boolean; allowed: boolean; manage: boolean };
+
+/** A hosted role without `mcp.connect` (Billing, or a paused seat): `/mcp` is
+ *  there, but it refuses this caller, so nothing that leads to it is offered. */
+export function adminsOnly(health: McpHealth): boolean {
+  return health.kind === "ready" && health.mounted && !health.allowed;
+}
+
+/** The same sentence as the dashboard's refusal (ConnectAI.tsx). */
+export const ADMINS_ONLY_NOTE =
+  "Your role in this workspace cannot connect an AI. An Owner or an Admin can change your role.";
+
+/** The details layer's floor, so a chip in a short window still opens
+ *  something readable, and the gap it keeps from the viewport's bottom edge
+ *  plus the Popover's own 4px offset. */
+const POPOVER_MIN_H = 160;
+const POPOVER_EDGE = 12;
+
+/**
+ * The one health probe: read on mount and whenever the Project changes, and
+ * again whenever the author comes back to the tab, since the switch, a file
+ * edit or an agent may have changed motion.config.json meanwhile. A panel still
+ * saying "Direct document writes enabled" over a file the workspace can no
+ * longer read would be a claim nothing backs.
+ */
+export function useMcpHealth(projectName: string | null): { health: McpHealth; retry: () => void } {
+  const [attempt, setAttempt] = useState(0);
+  const [health, setHealth] = useState<McpHealth>({ kind: "checking" });
 
   useEffect(() => {
     let alive = true;
-    void (async () => {
+    // A ready answer stays on screen while it is read again (after the write
+    // switch saved, say), so the switch and what it reported do not blink out.
+    setHealth((current) => (current.kind === "ready" ? current : { kind: "checking" }));
+    void readHealth().then((next) => {
+      if (alive) setHealth(next);
+    });
+    return () => {
+      alive = false;
+    };
+  }, [attempt, projectName]);
+
+  useEffect(() => {
+    const again = (): void => setAttempt((value) => value + 1);
+    window.addEventListener("focus", again);
+    return () => window.removeEventListener("focus", again);
+  }, []);
+
+  return { health, retry: () => setAttempt((value) => value + 1) };
+}
+
+/** The chip's word: health only. "MCP ready" means writes are on, "Read only"
+ *  that the server answers but edits nothing, "MCP off" that `/mcp` is not
+ *  mounted, "No access" that this caller's role may not use it. Never
+ *  "connected": health cannot see a client. */
+export function mcpWord(health: McpHealth): string {
+  if (health.kind === "checking") return "Checking MCP";
+  if (health.kind === "unavailable") return "Status unknown";
+  if (!health.mounted) return "MCP off";
+  if (adminsOnly(health)) return "No access";
+  return health.write ? "MCP ready" : "Read only";
+}
+
+interface ProjectProps {
+  projectName?: string | null;
+  projectTitle?: string | null;
+}
+
+/** Help's presentation: the details behind a disclosure, with a probe of its
+ *  own. `Dialog` returns null while closed, so it reads health only once the
+ *  author opens Help. */
+export function McpSection({ projectName = null, projectTitle = null }: ProjectProps) {
+  const { health, retry } = useMcpHealth(projectName);
+  return (
+    <details className="mcp-section" data-testid="mcp-section">
+      <summary>
+        {/* The house chevron, not a `"›"` glyph in a `::before`. Two
+            disclosure shapes in one surface is one more than a reader can be
+            asked to learn, and the outline already draws this icon. */}
+        <IconChevron className="chevron" />
+        <span className="mcp-heading">
+          <IconLink />
+          <span>MCP connection</span>
+        </span>
+        <McpStatus health={health} />
+      </summary>
+      <McpBody health={health} onRetry={retry} projectName={projectName} projectTitle={projectTitle} />
+    </details>
+  );
+}
+
+/**
+ * The chip's presentation: the same body in a `Popover` under `anchor`. The
+ * caller owns `open` and the probe; this owns focus.
+ *
+ * FOCUS GOES INTO THE DETAILS, and comes back to the anchor. The popover is
+ * portaled to the end of <body>, so without this a Tab from the chip walks the
+ * rest of the shell and reaches the switch, Retry and Copy last of all. A
+ * timeout rather than the effect itself: `Popover` holds the layer at
+ * `visibility: hidden` until its layout effect has measured it, and `focus()`
+ * on a hidden element is a no-op. That re-render is flushed in the same task,
+ * so one macrotask later the layer is shown.
+ */
+export function McpPopover({
+  anchor,
+  open,
+  onClose,
+  health,
+  onRetry,
+  projectName = null,
+  projectTitle = null,
+  handoff,
+}: ProjectProps & {
+  anchor: RefObject<HTMLElement | null>;
+  open: boolean;
+  onClose: () => void;
+  health: McpHealth;
+  onRetry: () => void;
+  /** The prompt to copy for an agent, built at the click (agentHandoff.ts). */
+  handoff?: () => string | null;
+}) {
+  const details = useRef<HTMLDivElement>(null);
+  const [cap, setCap] = useState(POPOVER_MIN_H);
+
+  useEffect(() => {
+    if (!open) return;
+    // The layer opens BELOW the chip, and `Popover` only flips up when the
+    // whole layer fits there. So it is capped to the room under the anchor,
+    // measured at the open; a long body scrolls inside it.
+    const bottom = anchor.current?.getBoundingClientRect().bottom ?? 0;
+    setCap(Math.max(POPOVER_MIN_H, window.innerHeight - bottom - POPOVER_EDGE));
+    const id = window.setTimeout(() => details.current?.focus(), 0);
+    return () => window.clearTimeout(id);
+  }, [open, anchor]);
+
+  /** Every way out of the details. Focus that was inside them goes back to
+   *  the anchor, because the node holding it is about to unmount and would
+   *  leave it on <body>. Focus elsewhere (an outside press) stays where the
+   *  author put it. */
+  const close = (): void => {
+    const inside = details.current?.contains(document.activeElement) === true;
+    onClose();
+    if (inside) anchor.current?.focus();
+  };
+
+  return (
+    <Popover open={open} anchor={anchor} onClose={close} align="right" className="mcp-popover">
+      <div
+        ref={details}
+        tabIndex={-1}
+        className="mcp-popover-body"
+        role="dialog"
+        aria-label="MCP connection"
+        data-testid="mcp-details"
+        style={{ maxHeight: `${cap}px` }}
+      >
+        <McpBody
+          health={health}
+          onRetry={onRetry}
+          projectName={projectName}
+          projectTitle={projectTitle}
+          handoff={handoff}
+        />
+      </div>
+    </Popover>
+  );
+}
+
+/** A copy that says "Copied" on the row it came from. The value stays
+ *  selectable when clipboard permission is refused. */
+export function useCopy(resetKey: unknown = null): { copied: string | null; copy: (target: string, value: string) => void } {
+  const [copied, setCopied] = useState<string | null>(null);
+  // A "Copied" names what was copied, so it clears when that changes.
+  useEffect(() => setCopied(null), [resetKey]);
+  const mounted = useRef(true);
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  const copy = (target: string, value: string): void => {
+    const clipboard = navigator.clipboard;
+    if (clipboard === undefined) return;
+    void clipboard.writeText(value).then(
+      () => {
+        if (mounted.current) setCopied(target);
+      },
+      () => {},
+    );
+  };
+  return { copied, copy };
+}
+
+function McpBody({
+  health,
+  onRetry,
+  projectName = null,
+  projectTitle = null,
+  handoff,
+}: ProjectProps & { health: McpHealth; onRetry: () => void; handoff?: (() => string | null) | undefined }) {
+  const hosted = isCloudWorkspace();
+  const { copied, copy } = useCopy(projectName);
+  const title = projectTitle?.trim() || projectName?.trim() || null;
+
+  return (
+    <div className="mcp-body">
+      {/* A Member has no agent to hand a storage name or a prompt to. */}
+      {title === null || adminsOnly(health) ? null : (
+        <div className="mcp-project" data-testid="mcp-project-target">
+          <span className="mcp-kicker">Project target</span>
+          <strong>{title}</strong>
+          {projectName === null ? null : (
+            <div className="mcp-project-name">
+              <span>Storage name</span>
+              <code>{projectName}</code>
+              <CopyButton copied={copied === "project"} onClick={() => copy("project", projectName)} />
+            </div>
+          )}
+          <p>An agent sees the whole workspace. Give it this storage name to work on this Project.</p>
+          {handoff === undefined ? null : (
+            <div className="mcp-handoff" data-testid="mcp-handoff">
+              <span>A prompt naming this Shot, frame and selection</span>
+              <CopyButton
+                copied={copied === "handoff"}
+                onClick={() => {
+                  const prompt = handoff();
+                  if (prompt !== null) copy("handoff", prompt);
+                }}
+              />
+            </div>
+          )}
+        </div>
+      )}
+
+      <Readiness health={health} hosted={hosted} onRetry={onRetry} />
+
+      {hosted && health.kind === "ready" && health.mounted && health.allowed && health.manage ? (
+        <HostedWrites write={health.write} onSaved={onRetry} />
+      ) : null}
+
+      <InTabTools />
+
+      <ConnectRows health={health} />
+    </div>
+  );
+}
+
+/**
+ * The OTHER surface: the tools this page registers for an agent running in the
+ * browser (WebMCP, `state/webmcp.ts`).
+ *
+ * Read once at render and not subscribed: `document.modelContext` either exists
+ * when the page loads or does not, and the registration happens before React
+ * commits. A secure context is required, so a dev server reached over the LAN by
+ * plain http reads as unsupported even in a browser that has the API.
+ */
+function InTabTools() {
+  const supported = typeof document.modelContext !== "undefined";
+  return (
+    <p className="mcp-note" data-testid="mcp-webmcp">
+      In-tab tools (WebMCP):{" "}
+      {supported
+        ? "on. A browser agent can read and edit this Project in this tab."
+        : "not in this browser. Nothing else changes."}
+    </p>
+  );
+}
+
+/** The status pill at the end of Help's summary, in its one-word forms. */
+function McpStatus({ health }: { health: McpHealth }) {
+  if (health.kind === "checking") return <span className="mcp-status">Checking</span>;
+  if (health.kind === "unavailable") {
+    return (
+      <span className="mcp-status is-unknown" role="status">
+        <IconLinkOff /> Unknown
+      </span>
+    );
+  }
+  if (!health.mounted || adminsOnly(health)) {
+    return (
+      <span className="mcp-status is-off" role="status">
+        <IconLinkOff /> {health.mounted ? "No access" : "Off"}
+      </span>
+    );
+  }
+  return (
+    <span className={`mcp-status${health.write ? " is-write" : " is-read"}`} role="status">
+      {health.write ? <IconCheck /> : <IconLink />}
+      {health.write ? "Write tools enabled" : "Read only"}
+    </span>
+  );
+}
+
+function Readiness({ health, hosted, onRetry }: { health: McpHealth; hosted: boolean; onRetry: () => void }) {
+  if (health.kind === "checking") {
+    return <p className="mcp-note">{hosted ? "Checking this workspace." : "Checking the live Studio server."}</p>;
+  }
+  if (health.kind === "unavailable") {
+    return (
+      <div className="mcp-readiness is-unknown">
+        <div>
+          <strong>{hosted ? "Couldn't check this workspace" : "Couldn't check the live server"}</strong>
+          {hosted ? (
+            <span>The workspace did not answer. Retry, or reload the editor.</span>
+          ) : (
+            <span>Run <code>{STATUS_COMMAND}</code> in the workspace to inspect it from the terminal.</span>
+          )}
+        </div>
+        <button type="button" onClick={onRetry}>Retry</button>
+      </div>
+    );
+  }
+  if (!health.mounted) {
+    return (
+      <div className="mcp-readiness is-off">
+        <IconLinkOff />
+        <div>
+          <strong>{hosted ? "MCP is not available here" : "MCP is off on this running server"}</strong>
+          <span>
+            {hosted
+              ? "This deployment does not serve MCP, so no AI can connect to this workspace."
+              : "Configure it below, then restart the Studio server."}
+          </span>
+        </div>
+      </div>
+    );
+  }
+  if (adminsOnly(health)) {
+    return (
+      <div className="mcp-readiness is-off" data-testid="mcp-admins-only">
+        <IconLinkOff />
+        <div>
+          <strong>MCP is not open to your role</strong>
+          <span>{ADMINS_ONLY_NOTE}</span>
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div className={`mcp-readiness${health.write ? " is-write" : " is-read"}`}>
+      {health.write ? <IconCheck /> : <IconLink />}
+      <div>
+        <strong>MCP server ready</strong>
+        <span>
+          {health.write
+            ? "Direct document writes enabled."
+            : hosted
+              ? health.manage
+                ? `Dailies documents: read-only. Turn on "${WRITES_LABEL}" below to let an agent edit.`
+                : "Dailies documents: read-only. An Owner or an Admin can turn on AI edits."
+              : "Dailies documents: read-only."}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * The hosted write switch. It shows what the workspace answers now (health),
+ * and a flip writes `mcp.write` into motion.config.json (`setMcpWrites`). The
+ * health is read again either way, so a refused or conflicting save leaves the
+ * switch showing what is actually saved.
+ */
+function HostedWrites({ write, onSaved }: { write: boolean; onSaved: () => void }) {
+  const [busy, setBusy] = useState(false);
+  const [problem, setProblem] = useState<string | null>(null);
+  const alive = useRef(true);
+  useEffect(() => {
+    alive.current = true;
+    return () => {
+      alive.current = false;
+    };
+  }, []);
+  const flip = (next: boolean): void => {
+    setBusy(true);
+    setProblem(null);
+    void setMcpWrites(next).then((refused) => {
+      if (!alive.current) return;
+      setBusy(false);
+      setProblem(refused);
+      onSaved();
+    });
+  };
+  return (
+    <div className="mcp-writes" data-testid="mcp-hosted-writes">
+      <div>
+        <strong>{WRITES_LABEL}</strong>
+        <span>
+          {write
+            ? "An agent can change Projects, storyboards, code and assets here."
+            : "An agent can read this workspace but change nothing."}
+        </span>
+      </div>
+      <Toggle checked={write} disabled={busy} ariaLabel={WRITES_LABEL} onChange={flip} />
+      <p className="mcp-note" data-testid="mcp-hosted-reconnect">{RECONNECT_NOTE}</p>
+      {problem === null ? null : (
+        <p className="mcp-writes-problem" role="alert">
+          {problem}
+        </p>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Write `mcp.write` into the workspace's motion.config.json, keeping every
+ * other key, through `/api/files`: PUT against the hash just read, or POST
+ * (create) when there is no file, which then holds only this key. It never
+ * rewrites a file it cannot parse and never merges: a file that moved in
+ * between answers 409, which is reported. Null when saved, else why not.
+ */
+export async function setMcpWrites(write: boolean): Promise<string | null> {
+  const url = `/api/files/${MCP_CONFIG_FILE}`;
+  let config: Record<string, unknown> = {};
+  let baseHash: string | undefined;
+  try {
+    const read = await fetch(url, { cache: "no-store", headers: { accept: "application/json" } });
+    if (read.ok) {
+      const file = (await read.json()) as { content?: unknown; hash?: unknown };
+      if (typeof file.content !== "string" || typeof file.hash !== "string") return `Couldn't read ${MCP_CONFIG_FILE}.`;
+      let parsed: unknown = null;
       try {
-        const res = await fetch("/auth/mcp-token", { headers: { accept: "application/json" } });
-        if (!res.ok) return;
-        const body = (await res.json()) as { command?: unknown };
-        if (alive && typeof body.command === "string") setCommand(body.command);
+        parsed = JSON.parse(file.content);
       } catch {
-        // Local server, offline, or an HTML answer — the static text below
-        // is already the right instruction set.
+        /* refused below */
+      }
+      if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) {
+        return `${MCP_CONFIG_FILE} is not a JSON object, so it was left as it is. Fix it in the file tree, then try again.`;
       }
-    })();
+      config = parsed as Record<string, unknown>;
+      baseHash = file.hash;
+    } else if (read.status !== 404) {
+      return `Couldn't read ${MCP_CONFIG_FILE} (${read.status}).`;
+    }
+    const mcp = config["mcp"];
+    const next = {
+      ...config,
+      mcp: { ...(typeof mcp === "object" && mcp !== null && !Array.isArray(mcp) ? mcp : {}), write },
+    };
+    const content = `${JSON.stringify(next, null, 2)}\n`;
+    const saved = await fetch(url, {
+      method: baseHash === undefined ? "POST" : "PUT",
+      headers: { "content-type": "application/json", accept: "application/json" },
+      body: JSON.stringify(baseHash === undefined ? { content } : { content, baseHash }),
+    });
+    if (saved.ok) return null;
+    if (saved.status === 409) {
+      return `${MCP_CONFIG_FILE} changed while this was being saved. The switch shows the saved setting now; flip it again if that is not what you want.`;
+    }
+    const body = (await saved.json().catch(() => null)) as { error?: unknown } | null;
+    return `Couldn't save ${MCP_CONFIG_FILE}${typeof body?.error === "string" ? `: ${body.error}` : ` (${saved.status})`}.`;
+  } catch {
+    return `Couldn't reach the workspace to save ${MCP_CONFIG_FILE}.`;
+  }
+}
+
+/**
+ * What to paste into a client, for the local origin this page was served
+ * from: the studio server or the chrome's dev server (which proxies `/mcp`,
+ * vite.config.ts). Hosted has no rows: an app adds the MCP URL and signs in
+ * (`HostedConnect`).
+ *
+ * - `claude`: Claude Code's `claude mcp add`. Off loopback the studio mounts
+ *   `/mcp` only behind `STUDIO_MCP_TOKEN`, so the header names the variable,
+ *   never its value, in DOUBLE quotes: the author's shell fills it in at the
+ *   add. Claude Code stores the header as given and never expands a bare
+ *   `$VAR`, so single quotes would register a header that always fails.
+ * - `json`: the `.mcp.json` entry `connect --http` writes (connectVerbs.ts),
+ *   with the header as Claude Code's `${VAR}` expansion off loopback.
+ */
+export function connectCommands(where: { origin: string; hostname: string }): { claude: string; json: string } {
+  const url = `${where.origin}/mcp`;
+  const add = `claude mcp add --transport http ${MCP_SERVER_KEY} ${url}`;
+  const loopback = isLoopbackHostname(where.hostname);
+  const entry = {
+    type: "http",
+    url,
+    ...(loopback ? {} : { headers: { [MCP_TOKEN_HEADER]: `\${${MCP_TOKEN_ENV}}` } }),
+  };
+  return {
+    claude: loopback ? add : `${add} --header "${MCP_TOKEN_HEADER}: $${MCP_TOKEN_ENV}"`,
+    json: JSON.stringify({ mcpServers: { [MCP_SERVER_KEY]: entry } }),
+  };
+}
+
+/**
+ * The connect rows. Local: `connect` first while `/mcp` is not known to be
+ * mounted (it writes the config and the entry), then the Claude Code command
+ * and the `.mcp.json` entry for this origin. Hosted: the MCP URL and a link to
+ * the dashboard's Connect your AI page, in a new tab so the editor stays open,
+ * unless `/mcp` is not mounted there or refuses this role (Readiness says
+ * why), so no step is offered that cannot work.
+ */
+export function ConnectRows({ health }: { health: McpHealth }) {
+  const hosted = isCloudWorkspace();
+  const { copied, copy } = useCopy();
+
+  if (hosted) {
+    if ((health.kind === "ready" && !health.mounted) || adminsOnly(health)) return null;
+    return <HostedConnect />;
+  }
+
+  const rows = connectCommands(window.location);
+  const mounted = health.kind === "ready" && health.mounted;
+  return (
+    <div className="mcp-setup" data-testid="mcp-local-setup">
+      {mounted ? null : (
+        <>
+          <p className="mcp-note">
+            Run the helper from this workspace root first. It updates <code>motion.config.json</code> and{" "}
+            <code>.mcp.json</code>.
+          </p>
+          <CommandRow
+            label="Read-only setup"
+            value={CONNECT_COMMAND}
+            copied={copied === "connect"}
+            onCopy={() => copy("connect", CONNECT_COMMAND)}
+          />
+        </>
+      )}
+      <CommandRow
+        label="Claude Code"
+        value={rows.claude}
+        copied={copied === "claude"}
+        onCopy={() => copy("claude", rows.claude)}
+      />
+      <CommandRow
+        label=".mcp.json"
+        value={rows.json}
+        copied={copied === "json"}
+        onCopy={() => copy("json", rows.json)}
+      />
+      <p className="mcp-footnote">
+        Read-only is the default. To allow direct Project document edits, run <code>{WRITE_COMMAND}</code>, then restart
+        the Studio server. Verify the live state with <code>{STATUS_COMMAND}</code>.
+      </p>
+    </div>
+  );
+}
+
+/** The discovery document every host serves (worker oauth.ts). Its
+ *  `resource` is the MCP URL on MAIN, which the editor host cannot name. */
+const RESOURCE_METADATA_PATH = "/.well-known/oauth-protected-resource/mcp";
+
+/** The MCP URL, or null until read or when the read fails. */
+function useMcpUrl(): string | null {
+  const [url, setUrl] = useState<string | null>(null);
+  useEffect(() => {
+    let alive = true;
+    void readJson(RESOURCE_METADATA_PATH).then((body) => {
+      const resource = (body as { resource?: unknown } | null)?.resource;
+      if (alive && typeof resource === "string" && /^https?:\/\/[^/]+\/mcp$/.test(resource)) setUrl(resource);
+    });
     return () => {
       alive = false;
     };
   }, []);
+  return url;
+}
 
+/** Hosted: the URL to add to an AI app, and the page with every app's steps.
+ *  Without the URL (the read failed), the link alone still gets there. */
+function HostedConnect() {
+  const url = useMcpUrl();
+  const { copied, copy } = useCopy();
   return (
-    <div className="mcp-section" data-testid="mcp-section">
-      <div className="file-section-label">MCP</div>
-      {command === null ? (
-        <p className="help-note">
-          Run <code>npx dailies-studio connect</code> in this project, then start Claude Code in the
-          same folder — it picks up <code>.mcp.json</code> and can edit this scene.
-        </p>
-      ) : (
+    <div className="mcp-setup" data-testid="mcp-hosted-setup">
+      {url === null ? null : (
         <>
-          <p className="help-note">
-            Paste into your terminal — Claude Code connects to this workspace over MCP:
-          </p>
-          <div className="help-command">
-            <code>{command}</code>
-            <button
-              type="button"
-              onClick={() => {
-                void navigator.clipboard?.writeText(command);
-                setCopied(true);
-                window.setTimeout(() => setCopied(false), 1500);
-              }}
-            >
-              {copied ? "Copied" : "Copy"}
-            </button>
-          </div>
+          <CommandRow label="Server URL" value={url} copied={copied === "url"} onCopy={() => copy("url", url)} />
+          <p className="mcp-note">Add this URL to your AI. It signs in with your Dailies account.</p>
         </>
       )}
+      <a className="mcp-connect-link" href={AGENT_ACCESS_HREF} target="_blank" rel="noopener">
+        Connect your AI: steps for each app
+      </a>
     </div>
   );
 }
+
+export function CommandRow({
+  label,
+  value,
+  copied,
+  onCopy,
+}: {
+  label: string;
+  value: string;
+  copied: boolean;
+  onCopy: () => void;
+}) {
+  return (
+    <div className="mcp-command">
+      <span>{label}</span>
+      <div>
+        <code>{value}</code>
+        <CopyButton copied={copied} onClick={onCopy} />
+      </div>
+    </div>
+  );
+}
+
+export function CopyButton({ copied, onClick }: { copied: boolean; onClick: () => void }) {
+  return (
+    <button type="button" onClick={onClick} aria-live="polite">
+      {copied ? "Copied" : "Copy"}
+    </button>
+  );
+}
+
+export async function readHealth(): Promise<McpHealth> {
+  const body = await readJson("/api/health");
+  if (typeof body !== "object" || body === null) return { kind: "unavailable" };
+  const record = body as { ok?: unknown; name?: unknown; mcp?: unknown };
+  // Chrome cannot import the CLI, so this repeats the two-name test in
+  // `probeStudioHealth` (packages/cli/src/devServerLock.ts). That is the source
+  // this must match.
+  if (record.ok !== true || (record.name !== "dailies" && record.name !== "motion-studio")) {
+    return { kind: "unavailable" };
+  }
+  if (typeof record.mcp !== "object" || record.mcp === null) return { kind: "unavailable" };
+  const mcp = record.mcp as { mounted?: unknown; write?: unknown; allowed?: unknown; manage?: unknown };
+  if (typeof mcp.mounted !== "boolean" || typeof mcp.write !== "boolean") return { kind: "unavailable" };
+  // A local server has no roles and sends neither.
+  return {
+    kind: "ready",
+    mounted: mcp.mounted,
+    write: mcp.write,
+    allowed: mcp.allowed !== false,
+    manage: mcp.manage !== false,
+  };
+}
+
+async function readJson(path: string): Promise<unknown | null> {
+  try {
+    const response = await fetch(path, { headers: { accept: "application/json" } });
+    if (!response.ok) return null;
+    return await response.json();
+  } catch {
+    return null;
+  }
+}