granttap-mcp 0.8.8 → 0.8.9

package/apps/mcp/src/connection-center/README.md

@@ -0,0 +1,34 @@
+# Connection center
+
+`../mcp-tools/connect.ts` registers the public `connection_status`, `connect`,
+and confirmed `reconnect` tools. `state.ts` owns the process-local pending QR
+and sanitized connection snapshot. `../mcp-tools/connection-widget.ts` serves
+`widget.html`, `bridge.js`, and `view.js` as a self-contained MCP Apps resource.
+
+Opening the center does not create keys, start a relay connection, or install
+hooks. Connect preserves an existing machine identity, including when the local
+phone export is absent. Reconnect requires explicit confirmation. A pending QR
+is reusable until expiry in this MCP process; restarting the process loses the
+transfer code but preserves the pairing. It never persists transfer secrets.
+
+Saved keys, this process's relay socket, and recent authenticated phone messages
+are distinct. Unknown phone availability stays unknown. Provider readiness is
+configuration information, not evidence that the provider is currently running.
+A phone observation clears the pending QR. Expired QR images and copy actions
+are removed; reconnect can issue a replacement after confirmation.
+
+The UI initializes the MCP Apps bridge before invoking tools, bounds waits,
+checks parent messages, refreshes pending pairing while visible, and keeps
+copyable transfer material out of model-visible text and persistent UI storage.
+Non-UI clients can still use the tools and display the returned QR image.
+
+The local stdio plugin does not have a separate account login. The Codex-owned
+plugin management page is not this UI. Its native OAuth sign-in controls apply
+to OAuth-capable HTTP MCP servers; this module does not add an account service
+or replace the local provider runtime.
+
+Tests in `tests/` exercise isolated keys, a loopback encrypted phone connection,
+expiry, non-mutating status, and actual DOM button/host-message behavior.
+
+License: this module is distributed under the GrantTap Commercial Source License
+in the repository-root `LICENSE` file.

package/apps/mcp/src/connection-center/bridge.js

@@ -0,0 +1,83 @@
+// MCP Apps bridge. Pairing secrets stay in this iframe; never persist UI state.
+let nextId = 0;
+const requests = new Map();
+let hostOrigin = null;
+let bridgeReady = false;
+let legacyBridge = false;
+function post(message) {
+  window.parent.postMessage({ jsonrpc: "2.0", ...message }, hostOrigin || "*");
+}
+function request(method, params) {
+  const id = ++nextId;
+  return new Promise((resolve, reject) => {
+    const timer = setTimeout(() => {
+      requests.delete(id);
+      reject(new Error("No response. Refresh status before retrying."));
+    }, 20000);
+    requests.set(id, { resolve, reject, timer });
+    post({ id, method, params });
+  });
+}
+window.addEventListener("message", event => {
+  if (event.source !== window.parent || event.data?.jsonrpc !== "2.0") return;
+  if (hostOrigin && event.origin !== hostOrigin) return;
+  const data = event.data;
+  const pending = requests.get(data.id);
+  if (pending) {
+    if (event.origin && event.origin !== "null") hostOrigin = event.origin;
+    requests.delete(data.id);
+    clearTimeout(pending.timer);
+    if (data.error) pending.reject(new Error("The host could not complete this request."));
+    else pending.resolve(data.result);
+  } else if (data.method === "ui/notifications/tool-result") {
+    render(data.params);
+  } else if (data.method === "ui/notifications/tool-cancelled") {
+    message("Request cancelled. Refresh status to check the current state.");
+  }
+});
+async function initializeBridge() {
+  try {
+    const initialized = await request("ui/initialize", {
+      appInfo: { name: "GrantTap connection center", version: "2.0.0" },
+      appCapabilities: {}, protocolVersion: "2026-01-26",
+    });
+    if (initialized?.protocolVersion !== "2026-01-26") throw new Error("Unsupported UI protocol");
+    post({ method: "ui/notifications/initialized" });
+    bridgeReady = true;
+  } catch {
+    if (!window.openai?.callTool) {
+      message("Interactive controls are unavailable. Ask GrantTap to check connection status or show your pairing QR.");
+      return;
+    }
+    legacyBridge = true;
+    bridgeReady = true;
+  }
+  setBusy(false);
+  await call("connection_status");
+}
+async function call(name, args = {}) {
+  if (!bridgeReady || busy) return;
+  setBusy(true);
+  message("Checking…");
+  try {
+    const result = legacyBridge
+      ? await legacyCall(name, args)
+      : await request("tools/call", { name, arguments: args });
+    if (result?.isError) message("Could not complete the request. Refresh status and check the relay before retrying.");
+    else { render(result); message("Status updated."); }
+  } catch {
+    message("No successful response. Refresh status before retrying; pairing may already have changed.");
+  } finally {
+    setBusy(false);
+  }
+}
+
+async function legacyCall(name, args) {
+  let timer;
+  try {
+    return await Promise.race([
+      window.openai.callTool(name, args),
+      new Promise((_, reject) => { timer = setTimeout(() => reject(new Error("No response")), 20000); }),
+    ]);
+  } finally { clearTimeout(timer); }
+}

package/apps/mcp/src/connection-center/state.ts

@@ -0,0 +1,60 @@
+import { z } from "zod";
+import { hostname } from "node:os";
+import { loadConfig } from "../../../bridge/src/config";
+import { isMachineConfigured, readOnlyMachineConfigPath } from "../pairing-status";
+import { inspectProviderStatusSnapshot } from "../provider-status";
+import { packageVersion } from "../package-version";
+import { connectionRuntimeStatus } from "../mcp-tools/relay";
+
+export const connectionOutput = {
+  status: z.enum(["disconnected", "paired", "pairing", "expired", "connected"]),
+  computer: z.string(),
+  version: z.string(),
+  relay: z.string(),
+  relayStatus: z.enum(["online", "offline", "unknown"]),
+  phoneLastSeenAt: z.number().nullable(),
+  expiresAt: z.number().nullable(),
+  expiresInMinutes: z.number().int().positive().nullable(),
+  providers: z.array(z.object({ id: z.string(), status: z.string(), detail: z.string() })),
+};
+
+export type PendingCode = {
+  room: string;
+  expiresAt: number;
+  pairingUri: string;
+  qrDataUrl: string;
+};
+
+/** Ephemeral transfer material never enters logs, structured output, or disk. */
+export class ConnectionState {
+  private pending: PendingCode | null = null;
+
+  remember(code: PendingCode): void {
+    this.pending = code;
+  }
+
+  snapshot(now = Date.now()) {
+    const config = isMachineConfigured() ? loadConfig(readOnlyMachineConfigPath()) : null;
+    const runtime = connectionRuntimeStatus(config?.room);
+    if (!config || this.pending?.room !== config.room || runtime.phoneLastSeenAt) this.pending = null;
+    const expired = this.pending !== null && this.pending.expiresAt <= now;
+    const status = !config ? "disconnected" : this.pending
+      ? expired ? "expired" : "pairing"
+      : runtime.phoneLastSeenAt && now - runtime.phoneLastSeenAt < 60_000 ? "connected" : "paired";
+    const code = expired ? null : this.pending;
+    return {
+      structuredContent: {
+        status,
+        computer: hostname(),
+        version: packageVersion(),
+        relay: config ? new URL(config.relayUrl).host : "",
+        relayStatus: runtime.relayStatus,
+        phoneLastSeenAt: runtime.phoneLastSeenAt,
+        expiresAt: this.pending?.expiresAt ?? null,
+        expiresInMinutes: code ? Math.max(1, Math.ceil((code.expiresAt - now) / 60_000)) : null,
+        providers: inspectProviderStatusSnapshot().providers,
+      },
+      _meta: { granttap: code ? { pairingUri: code.pairingUri, qrDataUrl: code.qrDataUrl } : {} },
+    };
+  }
+}

package/apps/mcp/src/connection-center/view.js

@@ -0,0 +1,99 @@
+const $ = id => document.getElementById(id);
+let busy = false;
+let pairingUri = "";
+let current = {};
+function message(text) { $("message").textContent = text; }
+function setBusy(value) {
+  busy = value;
+  document.querySelectorAll("button").forEach(button => { button.disabled = value; });
+}
+function clearCode() {
+  pairingUri = "";
+  $("qr").removeAttribute("src");
+  $("qr").classList.add("hidden");
+  $("copy").classList.add("hidden");
+}
+function render(value) {
+  const result = value?.mcp_tool_result ?? value?.call_tool_result ?? value;
+  const state = result?.structuredContent ?? result?.structured_content;
+  if (!state?.status || result.isError) return;
+  current = state;
+  clearCode();
+  const meta = result._meta?.granttap ?? {};
+  const labels = {
+    disconnected: ["Not paired", "Connect this computer", "Connect to create a one-time QR. No account or password is required."],
+    pairing: ["Waiting for iPhone", "Scan to connect", "Open GrantTap on iPhone → Settings → Connections. Scan this one-time QR or copy the pairing link."],
+    expired: ["QR expired", "Create a new pairing code", "Choose Reconnect and confirm replacing the pairing. The previous QR can no longer be used."],
+    paired: ["Pairing saved", "This computer is paired", "Phone activity has not been confirmed recently by this MCP. Refresh status or open GrantTap on iPhone."],
+    connected: ["iPhone activity confirmed", "Your iPhone has responded", "An encrypted message was received recently. This does not guarantee continuous reachability."],
+  };
+  const [status, heading, detail] = labels[state.status] || labels.disconnected;
+  $("card").className = "card " + (state.status === "connected" ? "connected" : "");
+  $("status").textContent = status;
+  $("heading").textContent = heading;
+  $("detail").textContent = detail;
+  $("connect").classList.toggle("hidden", state.status !== "disconnected");
+  $("reconnect").classList.toggle("hidden", state.status === "disconnected");
+  if (state.status === "pairing" && state.expiresAt > Date.now()) {
+    if (/^granttap:\/\/pair-v2\?/.test(meta.pairingUri || "")) pairingUri = meta.pairingUri;
+    if (/^data:image\/png;base64,/.test(meta.qrDataUrl || "")) {
+      $("qr").src = meta.qrDataUrl;
+      $("qr").classList.remove("hidden");
+    }
+    $("copy").classList.toggle("hidden", !pairingUri);
+  }
+  $("computer").textContent = state.computer || "Unknown";
+  $("version").textContent = state.version || "Unknown";
+  $("relay").textContent = (state.relay || "Not configured") + " · " + (state.relayStatus || "unknown");
+  $("phone").textContent = state.phoneLastSeenAt ? new Date(state.phoneLastSeenAt).toLocaleString() : "Not observed by this MCP";
+  $("providers").replaceChildren();
+  for (const provider of state.providers || []) {
+    const row = document.createElement("li");
+    row.textContent = `${provider.id}: ${provider.detail}`;
+    $("providers").append(row);
+  }
+  updateExpiry();
+}
+function updateExpiry() {
+  const remaining = Math.ceil((current.expiresAt - Date.now()) / 1000);
+  $("expiry").textContent = current.status === "pairing" && remaining > 0
+    ? `One-time code expires in ${Math.floor(remaining / 60)}:${String(remaining % 60).padStart(2, "0")}` : "";
+  if (current.status === "pairing" && remaining <= 0) {
+    clearCode();
+    $("status").textContent = "QR expired";
+    $("detail").textContent = "Choose Reconnect to replace the expired pairing code.";
+  }
+}
+$("connect").addEventListener("click", () => call("connect"));
+$("refresh").addEventListener("click", () => call("connection_status"));
+$("reconnect").addEventListener("click", () => {
+  $("confirm").classList.remove("hidden");
+  $("cancel").focus();
+});
+$("cancel").addEventListener("click", () => $("confirm").classList.add("hidden"));
+$("confirm-reconnect").addEventListener("click", () => {
+  $("confirm").classList.add("hidden");
+  call("reconnect", { confirmed: true });
+});
+$("copy").addEventListener("click", async () => {
+  updateExpiry();
+  if (!pairingUri) return;
+  try { await navigator.clipboard.writeText(pairingUri); message("Pairing link copied."); }
+  catch { message("Clipboard is unavailable. Scan the QR instead."); }
+});
+render({ structuredContent: window.openai?.toolOutput, _meta: window.openai?.toolResponseMetadata });
+setBusy(true);
+void initializeBridge();
+setInterval(updateExpiry, 1000);
+setInterval(() => {
+  if (!document.hidden && current.status === "pairing" && current.expiresAt > Date.now()) void call("connection_status");
+}, 5000);
+
+if (typeof ResizeObserver !== "undefined") {
+  new ResizeObserver(() => {
+    if (bridgeReady && !legacyBridge) post({
+      method: "ui/notifications/size-changed",
+      params: { height: document.documentElement.scrollHeight },
+    });
+  }).observe(document.body);
+}

package/apps/mcp/src/connection-center/widget.html

@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<style>
+:root{color-scheme:light dark;font:15px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
+*{box-sizing:border-box}body{margin:0;padding:16px;background:transparent;color:CanvasText}
+.card{border:1px solid color-mix(in srgb,CanvasText 18%,transparent);border-radius:20px;padding:18px;background:color-mix(in srgb,Canvas 94%,#ff7a3d 6%);box-shadow:0 8px 28px #0001}
+header{display:flex;align-items:center;gap:12px;margin-bottom:14px}.logo{width:44px;height:44px;border-radius:13px;background:#ff7a3d;display:grid;place-items:center;color:#19120e;font-weight:800;font-size:19px}.title{font-size:19px;font-weight:750}.status{display:flex;align-items:center;gap:7px;color:color-mix(in srgb,CanvasText 72%,transparent)}
+.dot{width:9px;height:9px;border-radius:50%;background:#ffb020}.connected .dot{background:#2ac769}.error .dot{background:#e5484d}
+.body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center}.copy{max-width:440px}.copy h2{font-size:18px;margin:0 0 6px}.copy p{margin:0;color:color-mix(in srgb,CanvasText 70%,transparent)}
+#qr{width:170px;height:170px;padding:10px;background:#fff;border-radius:15px;object-fit:contain}.hidden{display:none!important}
+.actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}button{font:inherit;font-weight:650;border-radius:11px;border:1px solid color-mix(in srgb,CanvasText 20%,transparent);padding:9px 13px;background:Canvas;color:CanvasText;cursor:pointer}button.primary{background:#ff7a3d;color:#17100c;border-color:#ff7a3d}button:disabled{opacity:.55;cursor:wait}
+.confirm{margin-top:12px;padding:12px;border-radius:12px;background:color-mix(in srgb,#e5484d 10%,transparent)}.confirm p{margin:0 0 10px}.small{font-size:13px}.message{min-height:20px;margin-top:10px;color:color-mix(in srgb,CanvasText 68%,transparent)}
+@media(max-width:520px){.body{grid-template-columns:1fr}#qr{width:min(100%,220px);height:auto;justify-self:center}}
+details{border-top:1px solid #8884;padding-top:14px}summary{cursor:pointer;font-weight:600}dl{display:grid;grid-template-columns:minmax(100px,1fr) 2fr;gap:8px}dd{margin:0;overflow-wrap:anywhere}dt{opacity:.7}li{margin:8px 0}a{color:inherit}.logo svg{width:44px;height:44px}button:focus-visible,summary:focus-visible{outline:3px solid #ff7a3d;outline-offset:3px}
+</style>
+</head>
+<body>
+<main class="card" id="card">
+  <header><div class="logo" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-hidden="true">
+  <rect width="64" height="64" rx="10" fill="#f47f42"/>
+  <path d="M11 31.5 24.5 45 42 19" fill="none" stroke="#1d130e" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M45.5 29v10M52 25v18M58.5 29v10" fill="none" stroke="#1d130e" stroke-width="5" stroke-linecap="round"/>
+</svg>
+</div><div><div class="title">GrantTap</div><div class="status"><span class="dot"></span><span id="status">Checking connection…</span></div></div></header>
+  <section class="body">
+    <div class="copy"><h2 id="heading">Connect this computer</h2><p id="detail">Open GrantTap on iPhone and scan the one-time code.</p><div class="actions"><button class="primary" id="connect">Connect</button><button id="refresh">Refresh status</button><button id="copy" class="hidden">Copy pairing link</button><button id="reconnect" class="hidden">Reconnect</button></div><div class="message small" id="message" role="status"></div></div>
+    <img id="qr" class="hidden" alt="GrantTap pairing QR" />
+  </section>
+  <p id="expiry" class="small" aria-live="polite"></p>
+  <details><summary>Connection details &amp; help</summary>
+    <dl><dt>Computer</dt><dd id="computer">—</dd><dt>MCP version</dt><dd id="version">—</dd>
+    <dt>Relay observed by this MCP</dt><dd id="relay">Not checked</dd>
+    <dt>Last encrypted message from iPhone</dt><dd id="phone">Not observed</dd></dl>
+    <h3>Provider readiness</h3><ul id="providers"></ul>
+    <p>No GrantTap account or password is required. Pair using GrantTap on iPhone → Settings → Connections.
+    Provider sign-in is separate.</p>
+    <p>Missing hooks or background sync? Run <code>npx -y granttap-mcp@0.8.9 setup</code> locally.
+    A saved pairing alone does not prove your phone or the background helper is online.</p>
+    <p><a href="https://granttap.com" target="_blank" rel="noopener noreferrer">Website</a> ·
+    <a href="https://granttap.com/privacy" target="_blank" rel="noopener noreferrer">Privacy</a> ·
+    <a href="mailto:support@granttap.com">Support</a></p>
+  </details>
+  <section id="confirm" class="confirm hidden"><p>Reconnect replaces this computer’s current pairing. Continue?</p><div class="actions"><button class="primary" id="confirm-reconnect">Reconnect</button><button id="cancel">Cancel</button></div></section>
+</main>
+<script type="module">{{SCRIPT}}</script>
+</body>
+</html>

package/apps/mcp/src/mcp-tools/README.md

@@ -1,7 +1,7 @@
 # MCP tools
 
-The Personal MCP surface is an exact allowlist: `connect`, `notify`,
-`ask_yes_no`, and `ask`. `relay.ts` owns one shared encrypted relay connection
+The Personal MCP surface is an exact allowlist: `connection_status`, `connect`,
+`reconnect`, `notify`, `ask_yes_no`, and `ask`. `relay.ts` owns one shared encrypted relay connection
 and the durable question lifecycle. Machine setup, custom relay selection, and
 pairing reset remains an explicit CLI operation. The narrower `reconnect` MCP
 tool can replace only the current pairing, is declared destructive, and requires
@@ -9,7 +9,7 @@ explicit confirmation before it creates a new one-time QR.
 
 `mesh-resource.ts` publishes the Mesh resources for that same surface, and
 `notify` may alternatively carry one bounded task-scoped Mesh event. Neither
-adds a fifth public tool.
+adds another public tool.
 
 Both are caller-scoped. `granttap://mesh/current` returns no Project data;
 `granttap://mesh/{capability}` returns only the calling execution's Project,
@@ -26,3 +26,8 @@ call, and can never create invites, expand scope, change the relay, or reach
 
 License: this module is distributed under the GrantTap Commercial Source License
 in the repository-root `LICENSE` file.
+
+The connection center lives in `../connection-center`. Status requests are
+read-only. Saved pairing, a connected relay socket, and recent encrypted phone
+activity are separate observations. Only explicit connect/reconnect requests
+create codes; transfer material is carried in UI metadata and a user-facing QR.

package/apps/mcp/src/mcp-tools/connect.ts

@@ -2,18 +2,15 @@ import QRCode from "qrcode";
 import type { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
 import type { CallToolResult } from "@modelcontextprotocol/sdk/types.js";
 import { z } from "zod";
-import { createOneTimePairing, DEFAULT_RELAY, PAIRING_CODE_TTL_MINUTES, reusablePairing } from "../../../bridge/src/pairing";
+import { createOneTimePairing, DEFAULT_RELAY, PAIRING_CODE_TTL_MINUTES } from "../../../bridge/src/pairing";
+import { isMachineConfigured } from "../pairing-status";
+import { ConnectionState, connectionOutput } from "../connection-center/state";
 import { CONNECTION_WIDGET_URI } from "./connection-widget";
 import { resetRelay, relay } from "./relay";
 
-const connectionOutput = {
-  status: z.enum(["connected", "pairing"]),
-  relay: z.string(),
-  expiresInMinutes: z.number().int().positive().nullable(),
-};
-
 const widgetMeta = {
-  ui: { resourceUri: CONNECTION_WIDGET_URI },
+  ui: { resourceUri: CONNECTION_WIDGET_URI, visibility: ["model", "app"] },
+  "openai/widgetAccessible": true,
   "openai/outputTemplate": CONNECTION_WIDGET_URI,
   "openai/toolInvocation/invoking": "Opening GrantTap…",
   "openai/toolInvocation/invoked": "GrantTap is ready.",
@@ -27,6 +24,21 @@ const changes = {
 };
 
 export function registerConnectTool(server: McpServer): void {
+  const state = new ConnectionState();
+  let pendingCall: Promise<CallToolResult> | null = null;
+  const perform = (replace = false) => {
+    if (pendingCall) return pendingCall;
+    pendingCall = connect(state, replace).finally(() => { pendingCall = null; });
+    return pendingCall;
+  };
+  server.registerTool("connection_status", {
+    title: "GrantTap connection center",
+    description: "Open connection controls and inspect pairing, QR expiry, this computer, relay observations and provider readiness. Does not create or replace pairing.",
+    inputSchema: {},
+    outputSchema: connectionOutput,
+    annotations: { ...changes, readOnlyHint: true, idempotentHint: true },
+    _meta: widgetMeta,
+  }, async () => connectionResult(state));
   server.registerTool(
     "connect",
     {
@@ -36,7 +48,7 @@ export function registerConnectTool(server: McpServer): void {
       annotations: changes,
       _meta: widgetMeta,
     },
-    async (): Promise<CallToolResult> => connect(),
+    async (): Promise<CallToolResult> => perform(),
   );
   server.registerTool(
     "reconnect",
@@ -48,85 +60,51 @@ export function registerConnectTool(server: McpServer): void {
       _meta: widgetMeta,
     },
     async ({ confirmed }): Promise<CallToolResult> => confirmed
-      ? connect(true)
+      ? perform(true)
       : ({ isError: true, content: [{ type: "text", text: "Reconnect cancelled: explicit confirmation is required." }] }),
   );
 }
 
-async function connect(replace = false): Promise<CallToolResult> {
+async function connect(state: ConnectionState, replace = false): Promise<CallToolResult> {
   try {
-    const existing = reusablePairing(replace);
-    if (existing) return reusedPairingResult(existing);
-    return await oneTimePairingResult();
-  } catch (error) {
+    if (!replace && isMachineConfigured()) return connectionResult(state, true);
+    const startedAt = Date.now();
+    const pairing = await createOneTimePairing(process.env.GRANTTAP_TEST_RELAY_URL ?? DEFAULT_RELAY);
+    const png = await QRCode.toBuffer(pairing.qrPayload, {
+      type: "png", width: 900, margin: 4, errorCorrectionLevel: "L",
+    });
+    state.remember({
+      room: pairing.machineCfg.room,
+      expiresAt: startedAt + PAIRING_CODE_TTL_MINUTES * 60_000,
+      pairingUri: pairing.qrPayload,
+      qrDataUrl: `data:image/png;base64,${png.toString("base64")}`,
+    });
+    resetRelay();
+    void relay();
+    return connectionResult(state, true);
+  } catch {
     return {
       isError: true,
-      content: [{ type: "text", text: `GrantTap pairing could not be created: ${error instanceof Error ? error.message : String(error)}` }],
+      content: [{ type: "text", text: "GrantTap could not create the pairing code. Check the relay and try again. Your existing pairing is retained if the relay rejects the request." }],
     };
   }
 }
 
-function reusedPairingResult(pairing: { room: string; relayUrl: string }): CallToolResult {
-  return {
-    structuredContent: {
-      status: "connected",
-      relay: relayLabel(pairing.relayUrl),
-      expiresInMinutes: null,
-    },
-    content: [{
-      type: "text",
-      text: [
-        "GrantTap existing secure pairing reused.",
-        `Room: ${pairing.room}`,
-        `Relay: ${pairing.relayUrl}`,
-        "No QR or key rotation was needed.",
-      ].join("\n"),
-      annotations: { audience: ["user"] },
-    }],
-  };
-}
-
-async function oneTimePairingResult(): Promise<CallToolResult> {
-  const pairing = await createOneTimePairing(
-    process.env.GRANTTAP_TEST_RELAY_URL ?? DEFAULT_RELAY,
-  );
-  resetRelay();
-  void relay();
-  const png = await QRCode.toBuffer(pairing.qrPayload, {
-    type: "png", width: 900, margin: 4, errorCorrectionLevel: "L",
+function connectionResult(state: ConnectionState, showQr = false): CallToolResult {
+  const snapshot = state.snapshot();
+  const { status, computer, relay, version, relayStatus } = snapshot.structuredContent;
+  const instructions = status === "pairing"
+    ? "Scan the one-time QR in GrantTap on iPhone → Settings → Connections, or copy the link from the connection card."
+    : status === "disconnected" ? "Choose Connect to create a one-time QR. No account or password is required."
+    : status === "expired" ? "The QR has expired. Reconnect with confirmation to replace the pairing and generate a new code."
+    : "Existing secure pairing reused. A saved pairing does not prove that the iPhone is online. Reconnect replaces it only with confirmation.";
+  const content: CallToolResult["content"] = [{ type: "text", text:
+    `GrantTap: ${status}. Computer: ${computer}. MCP ${version}. Relay: ${relay || "not configured"} (${relayStatus}).\n${instructions}`,
+  }];
+  const qr = snapshot._meta.granttap.qrDataUrl;
+  if (showQr && qr) content.push({
+    type: "image", data: qr.slice("data:image/png;base64,".length), mimeType: "image/png",
+    annotations: { audience: ["user"] },
   });
-  return {
-    structuredContent: {
-      status: "pairing",
-      relay: relayLabel(pairing.machineCfg.relayUrl),
-      expiresInMinutes: PAIRING_CODE_TTL_MINUTES,
-    },
-    _meta: {
-      granttap: {
-        qrDataUrl: `data:image/png;base64,${png.toString("base64")}`,
-        pairingUri: pairing.qrPayload,
-      },
-    },
-    content: [
-      {
-        type: "text",
-        text: [
-          "Pair this Mac with GrantTap (QR optional — paste is enough):",
-          "",
-          "PASTE THIS in GrantTap → Settings → Connections → Paste / Add computer:",
-          pairing.qrPayload,
-          "",
-          `Relay: ${pairing.httpBase}`,
-          `One-time link — expires in ${PAIRING_CODE_TTL_MINUTES} minutes.`,
-          "Also on Desktop: GrantTap-pair-uri.txt (when connect writes it).",
-        ].join("\n"),
-        annotations: { audience: ["user"] },
-      },
-      { type: "image", data: png.toString("base64"), mimeType: "image/png", annotations: { audience: ["user"] } },
-    ],
-  };
-}
-
-function relayLabel(relayUrl: string): string {
-  return new URL(relayUrl).host;
+  return { ...snapshot, content };
 }

package/apps/mcp/src/mcp-tools/connection-widget.ts

@@ -1,48 +1,11 @@
 import type { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
 
-export const CONNECTION_WIDGET_URI = "ui://granttap/connection/v1.html";
+export const CONNECTION_WIDGET_URI = "ui://granttap/connection/v2.html";
 
-const html = String.raw`<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width,initial-scale=1" />
-<style>
-:root{color-scheme:light dark;font:15px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
-*{box-sizing:border-box}body{margin:0;padding:16px;background:transparent;color:CanvasText}
-.card{border:1px solid color-mix(in srgb,CanvasText 18%,transparent);border-radius:20px;padding:18px;background:color-mix(in srgb,Canvas 94%,#ff7a3d 6%);box-shadow:0 8px 28px #0001}
-header{display:flex;align-items:center;gap:12px;margin-bottom:14px}.logo{width:44px;height:44px;border-radius:13px;background:#ff7a3d;display:grid;place-items:center;color:#19120e;font-weight:800;font-size:19px}.title{font-size:19px;font-weight:750}.status{display:flex;align-items:center;gap:7px;color:color-mix(in srgb,CanvasText 72%,transparent)}
-.dot{width:9px;height:9px;border-radius:50%;background:#ffb020}.connected .dot{background:#2ac769}.error .dot{background:#e5484d}
-.body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center}.copy{max-width:440px}.copy h2{font-size:18px;margin:0 0 6px}.copy p{margin:0;color:color-mix(in srgb,CanvasText 70%,transparent)}
-#qr{width:170px;height:170px;padding:10px;background:#fff;border-radius:15px;object-fit:contain}.hidden{display:none!important}
-.actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}button{font:inherit;font-weight:650;border-radius:11px;border:1px solid color-mix(in srgb,CanvasText 20%,transparent);padding:9px 13px;background:Canvas;color:CanvasText;cursor:pointer}button.primary{background:#ff7a3d;color:#17100c;border-color:#ff7a3d}button:disabled{opacity:.55;cursor:wait}
-.confirm{margin-top:12px;padding:12px;border-radius:12px;background:color-mix(in srgb,#e5484d 10%,transparent)}.confirm p{margin:0 0 10px}.small{font-size:13px}.message{min-height:20px;margin-top:10px;color:color-mix(in srgb,CanvasText 68%,transparent)}
-@media(max-width:520px){.body{grid-template-columns:1fr}#qr{width:min(100%,220px);height:auto;justify-self:center}}
-</style>
-</head>
-<body>
-<main class="card" id="card">
-  <header><div class="logo" aria-hidden="true">✓▥</div><div><div class="title">GrantTap</div><div class="status"><span class="dot"></span><span id="status">Checking connection…</span></div></div></header>
-  <section class="body">
-    <div class="copy"><h2 id="heading">Connect this computer</h2><p id="detail">Open GrantTap on iPhone and scan the one-time code.</p><div class="actions"><button class="primary" id="connect">Connect</button><button id="copy">Copy pairing link</button><button id="reconnect">Reconnect</button></div><div class="message small" id="message" role="status"></div></div>
-    <img id="qr" class="hidden" alt="GrantTap pairing QR" />
-  </section>
-  <section id="confirm" class="confirm hidden"><p>Reconnect replaces this computer’s current pairing. Continue?</p><div class="actions"><button class="primary" id="confirm-reconnect">Reconnect</button><button id="cancel">Cancel</button></div></section>
-</main>
-<script type="module">
-const $=id=>document.getElementById(id);let pairingUri="";let seq=0;const waiting=new Map();
-function metadata(value){if(!value||typeof value!=="object")return{};if(value.granttap)return value;if(value._meta)return value._meta;if(value.mcp_tool_result?._meta)return value.mcp_tool_result._meta;if(value.call_tool_result?._meta)return value.call_tool_result._meta;return{}}
-function output(value){return value?.structuredContent??value?.structured_content??value?.mcp_tool_result?.structuredContent??value?.call_tool_result?.structuredContent??{}}
-function apply(value){const state=output(value);const meta={...metadata(window.openai?.toolResponseMetadata),...metadata(value)};const gt=meta.granttap??{};if(gt.pairingUri)pairingUri=gt.pairingUri;if(gt.qrDataUrl){$("qr").src=gt.qrDataUrl;$("qr").classList.remove("hidden")}const status=state.status??"disconnected";$("card").className="card "+status;$("status").textContent=status==="connected"?"Connected":status==="pairing"?"Waiting for iPhone":"Ready to connect";$("heading").textContent=status==="connected"?"This computer is connected":"Connect this computer";$("detail").textContent=status==="connected"?("Secure pairing active"+(state.relay?(" through "+state.relay):"")+"."):"Open GrantTap on iPhone and scan the one-time code.";$("connect").classList.toggle("hidden",status!=="disconnected");$("copy").classList.toggle("hidden",!pairingUri);$("reconnect").classList.toggle("hidden",status==="disconnected");if(status==="connected")$("qr").classList.add("hidden")}
-function initial(){const response={structuredContent:window.openai?.toolOutput??{},_meta:window.openai?.toolResponseMetadata??{}};apply(response)}
-async function call(name,args={}){setBusy(true);$("message").textContent="Working…";try{let result;if(window.openai?.callTool)result=await window.openai.callTool(name,args);else result=await rpc(name,args);apply(result);$("message").textContent=result?.isError?(result.content?.[0]?.text??"GrantTap could not complete the request."):"Ready.";return result}catch(error){$("card").classList.add("error");$("message").textContent=String(error)}finally{setBusy(false)}}
-function rpc(name,args){const id="granttap-"+Date.now()+"-"+(++seq);window.parent.postMessage({jsonrpc:"2.0",id,method:"tools/call",params:{name,arguments:args}},"*");return new Promise((resolve,reject)=>waiting.set(id,{resolve,reject}))}
-function setBusy(value){document.querySelectorAll("button").forEach(button=>button.disabled=value)}
-window.addEventListener("message",event=>{const data=event.data;if(data?.method==="ui/notifications/tool-result")apply(data.params);const pending=waiting.get(data?.id);if(!pending)return;waiting.delete(data.id);if(data.error)pending.reject(new Error(data.error.message??"Tool call failed"));else pending.resolve(data.result)});
-$("connect").addEventListener("click",()=>call("connect"));$("reconnect").addEventListener("click",()=>$("confirm").classList.remove("hidden"));$("cancel").addEventListener("click",()=>$("confirm").classList.add("hidden"));$("confirm-reconnect").addEventListener("click",async()=>{$("confirm").classList.add("hidden");await call("reconnect",{confirmed:true})});$("copy").addEventListener("click",async()=>{try{await navigator.clipboard.writeText(pairingUri);$("message").textContent="Pairing link copied."}catch{$("message").textContent="Copy is unavailable. Scan the QR instead."}});initial();
-</script>
-</body>
-</html>`;
+import { readFileSync } from "node:fs";
+
+const asset = (name: string) => readFileSync(new URL(`../connection-center/${name}`, import.meta.url), "utf8");
+const html = asset("widget.html").replace("{{SCRIPT}}", asset("bridge.js") + "\n" + asset("view.js"));
 
 export function registerConnectionWidget(server: McpServer): void {
   server.registerResource(
@@ -59,7 +22,7 @@ export function registerConnectionWidget(server: McpServer): void {
         mimeType: "text/html;profile=mcp-app",
         text: html,
         _meta: {
-          ui: { prefersBorder: true },
+          ui: { prefersBorder: true, permissions: { clipboardWrite: {} }, csp: { connectDomains: [], resourceDomains: [] } },
           "openai/widgetDescription": "Connect or reconnect this computer to GrantTap with a one-time QR.",
           "openai/widgetPrefersBorder": true,
         },

package/apps/mcp/src/mcp-tools/relay.ts

@@ -12,6 +12,7 @@ const ASK_TIMEOUT_MS = Number(
 );
 let client: RelayClient | null = null;
 let monitor: SessionMonitor | null = null;
+let phoneLastSeenAt: number | null = null;
 
 export type TaskInteractionScope = {
   provider: "claude" | "codex" | "cursor" | "grok";
@@ -25,6 +26,7 @@ export async function relay(): Promise<RelayClient | null> {
   try {
     if (!client) {
       client = new RelayClient(loadConfig(machineConfigPath()), { autoReconnect: true });
+      client.onMessage(() => { phoneLastSeenAt = Date.now(); return false; });
       monitor = startSessionMonitor(client);
     }
     await client.connect();
@@ -40,6 +42,16 @@ export function resetRelay(): void {
   monitor = null;
   client?.close();
   client = null;
+  phoneLastSeenAt = null;
+}
+
+/** Observe this process only; never start a connection for a status request. */
+export function connectionRuntimeStatus(room?: string) {
+  const current = client !== null && client.room === room;
+  return {
+    relayStatus: current ? client!.isConnected ? "online" : "offline" : "unknown",
+    phoneLastSeenAt: current ? phoneLastSeenAt : null,
+  };
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "granttap-mcp",
-  "version": "0.8.8",
+  "version": "0.8.9",
   "description": "Personal live control center runtime for local coding agents on iPhone and Apple Watch.",
   "type": "module",
   "bin": {
@@ -25,7 +25,7 @@
     "setup": "node bin/granttap-mcp.mjs setup",
     "status": "node bin/granttap-mcp.mjs status",
     "test": "HOME=$(mktemp -d) GRANTTAP_SKIP_LAUNCHCTL=1 node --import tsx --test tests/*.test.ts",
-    "test:coverage": "HOME=$(mktemp -d) GRANTTAP_SKIP_LAUNCHCTL=1 c8 --all --extension .ts --exclude 'tests/**' --exclude 'scripts/**' --exclude 'packages/core/relay-client-types.ts' --exclude 'apps/bridge/src/capabilities/types.ts' --exclude 'apps/bridge/src/reply/types.ts' --exclude 'apps/bridge/src/mesh/runtime-dependencies.ts' --check-coverage --lines 95 --statements 95 --functions 95 --branches 85 node --import tsx --test tests/*.test.ts",
+    "test:coverage": "HOME=$(mktemp -d) GRANTTAP_SKIP_LAUNCHCTL=1 c8 --all --extension .ts --extension .js --exclude '**/tests/**' --exclude 'scripts/**' --exclude 'packages/core/relay-client-types.ts' --exclude 'apps/bridge/src/capabilities/types.ts' --exclude 'apps/bridge/src/reply/types.ts' --exclude 'apps/bridge/src/mesh/runtime-dependencies.ts' --check-coverage --lines 95 --statements 95 --functions 95 --branches 85 node --import tsx --test tests/*.test.ts",
     "inventory": "node scripts/quality/source-inventory.mjs",
     "package:allowlist": "node scripts/quality/package-allowlist.mjs",
     "typecheck": "tsc --noEmit",
@@ -42,10 +42,12 @@
   },
   "devDependencies": {
     "@types/express": "^5.0.3",
+    "@types/jsdom": "^27.0.0",
     "@types/node": "^22.10.2",
     "@types/qrcode": "^1.5.6",
     "@types/ws": "^8.5.13",
     "c8": "^10.1.3",
+    "jsdom": "^27.4.0",
     "typescript": "^5.7.2"
   },
   "engines": {