made-refine 0.1.13 → 0.2.1-beta.0

package/dist/index.mjs

@@ -2347,44 +2347,302 @@ function hslToRgb(h, s, l) {
 }
 
 // src/mcp-client.ts
-var MCP_BASE = "http://127.0.0.1:4747";
-var cachedToken = null;
-async function getSessionToken(forceRefresh = false) {
-  if (!forceRefresh && cachedToken) return cachedToken;
+var PROTOCOL_VERSION = 1;
+var BOOTSTRAP_TIMEOUT_MS = 2500;
+var REQUEST_TIMEOUT_MS = 3e3;
+var SESSION_EXPIRY_SKEW_MS = 5e3;
+var CLIENT_NAME = "made-refine";
+var DEFAULT_CLIENT_VERSION = "unknown";
+var BOOTSTRAP_ENV_KEYS = [
+  "MADE_REFINE_MCP_BOOTSTRAP_URL",
+  "VITE_MADE_REFINE_MCP_BOOTSTRAP_URL",
+  "NEXT_PUBLIC_MADE_REFINE_MCP_BOOTSTRAP_URL"
+];
+var CLIENT_VERSION_ENV_KEYS = [
+  "MADE_REFINE_VERSION",
+  "VITE_MADE_REFINE_VERSION",
+  "NEXT_PUBLIC_MADE_REFINE_VERSION"
+];
+var cachedSession = null;
+function getTimeoutSignal(timeoutMs) {
+  const timeout = AbortSignal.timeout;
+  return typeof timeout === "function" ? timeout(timeoutMs) : void 0;
+}
+function getRuntimeMcpConfig() {
+  if (typeof window === "undefined") return null;
+  const config = window.__MADE_REFINE_CONFIG__;
+  const bootstrapUrl = config?.mcp?.bootstrapUrl ?? config?.mcpBootstrapUrl ?? window.__MADE_REFINE_MCP_BOOTSTRAP_URL__;
+  if (!config?.mcp && typeof bootstrapUrl !== "string") return null;
+  return {
+    ...config?.mcp ?? {},
+    ...typeof bootstrapUrl === "string" ? { bootstrapUrl } : {}
+  };
+}
+function getProcessEnvValue(keys) {
+  const processLike = globalThis.process;
+  const env = processLike?.env;
+  if (!env) return null;
+  for (const key of keys) {
+    const value = env[key];
+    if (typeof value === "string" && value.trim().length > 0) {
+      return value.trim();
+    }
+  }
+  return null;
+}
+function normalizeUrl(value) {
+  if (typeof value !== "string") return null;
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+  if (/^https?:\/\//i.test(trimmed)) {
+    return trimmed.replace(/\/+$/, "");
+  }
+  if (typeof window === "undefined" || !window.location?.origin) return null;
   try {
-    const res = await fetch(`${MCP_BASE}/api/health`, { signal: AbortSignal.timeout(2e3) });
-    if (!res.ok) return null;
-    const data = await res.json();
-    cachedToken = typeof data.sessionToken === "string" ? data.sessionToken : null;
-    return cachedToken;
+    return new URL(trimmed, window.location.origin).toString().replace(/\/+$/, "");
   } catch {
     return null;
   }
 }
-async function postWithSessionToken(path, payload) {
-  const send = async (token2) => {
+function normalizeBootstrapUrl(value) {
+  const normalized = normalizeUrl(value);
+  if (!normalized) return null;
+  try {
+    const url = new URL(normalized);
+    const normalizedPathname = url.pathname.replace(/\/+$/, "");
+    url.pathname = normalizedPathname.endsWith("/v1/bootstrap") ? normalizedPathname : `${normalizedPathname}/v1/bootstrap`;
+    return url.toString();
+  } catch {
+    return normalized.endsWith("/v1/bootstrap") ? normalized : `${normalized}/v1/bootstrap`;
+  }
+}
+function joinUrl(base, path) {
+  return `${base.replace(/\/+$/, "")}${path}`;
+}
+function readString(record, key) {
+  const value = record?.[key];
+  if (typeof value !== "string") return null;
+  const trimmed = value.trim();
+  return trimmed.length > 0 ? trimmed : null;
+}
+function parseExpiresAt(value) {
+  if (typeof value !== "string") return null;
+  const timestamp = Date.parse(value);
+  return Number.isFinite(timestamp) ? timestamp : null;
+}
+function readNumber(record, key) {
+  const value = record?.[key];
+  if (typeof value !== "number" || !Number.isFinite(value)) return null;
+  return value;
+}
+function isLoopbackIpv4(hostname) {
+  if (!/^127(?:\.\d{1,3}){3}$/.test(hostname)) return false;
+  const segments = hostname.split(".");
+  return segments.every((segment) => {
+    const value = Number(segment);
+    return Number.isInteger(value) && value >= 0 && value <= 255;
+  });
+}
+function isLoopbackHostname(hostname) {
+  if (hostname === "localhost" || hostname.endsWith(".localhost")) return true;
+  if (hostname === "::1" || hostname === "[::1]") return true;
+  return isLoopbackIpv4(hostname);
+}
+function isLoopbackHttpUrl(value) {
+  try {
+    const url = new URL(value);
+    if (url.protocol !== "http:" && url.protocol !== "https:") return false;
+    return isLoopbackHostname(url.hostname);
+  } catch {
+    return false;
+  }
+}
+function buildBootstrapRequestBody(runtimeConfig) {
+  const locationPath = typeof window !== "undefined" ? window.location.pathname : "";
+  const locationOrigin = typeof window !== "undefined" ? window.location.origin : null;
+  return {
+    protocolVersion: PROTOCOL_VERSION,
+    projectFingerprint: {
+      path: runtimeConfig?.projectFingerprint?.path || locationPath || "unknown",
+      gitRemoteHash: runtimeConfig?.projectFingerprint?.gitRemoteHash ?? null
+    },
+    ...runtimeConfig?.workspaceId ? {
+      workspaceId: runtimeConfig.workspaceId
+    } : {},
+    client: {
+      name: CLIENT_NAME,
+      version: runtimeConfig?.clientVersion ?? getProcessEnvValue(CLIENT_VERSION_ENV_KEYS) ?? DEFAULT_CLIENT_VERSION,
+      origin: locationOrigin
+    }
+  };
+}
+function resolveBootstrapUrl() {
+  const runtimeConfig = getRuntimeMcpConfig();
+  const runtimeUrl = normalizeBootstrapUrl(runtimeConfig?.bootstrapUrl);
+  if (runtimeUrl) return runtimeUrl;
+  const envUrl = normalizeBootstrapUrl(getProcessEnvValue(BOOTSTRAP_ENV_KEYS));
+  if (envUrl) return envUrl;
+  return null;
+}
+function isSessionUsable(session, bootstrapUrl) {
+  if (!session) return false;
+  if (session.bootstrapUrl !== bootstrapUrl) return false;
+  if (session.expiresAt == null) return true;
+  return Date.now() < session.expiresAt - SESSION_EXPIRY_SKEW_MS;
+}
+async function readJsonRecord(response) {
+  try {
+    const data = await response.json();
+    if (!data || typeof data !== "object") return null;
+    return data;
+  } catch {
+    return null;
+  }
+}
+async function bootstrapSession(force = false) {
+  const bootstrapUrl = resolveBootstrapUrl();
+  if (!bootstrapUrl) {
+    cachedSession = null;
+    return null;
+  }
+  if (!force && isSessionUsable(cachedSession, bootstrapUrl)) {
+    return cachedSession;
+  }
+  const runtimeConfig = getRuntimeMcpConfig();
+  try {
+    const response = await fetch(bootstrapUrl, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(buildBootstrapRequestBody(runtimeConfig)),
+      signal: getTimeoutSignal(BOOTSTRAP_TIMEOUT_MS)
+    });
+    if (!response.ok) {
+      cachedSession = null;
+      return null;
+    }
+    const data = await readJsonRecord(response);
+    const protocolVersion = readNumber(data, "protocolVersion");
+    if (protocolVersion !== PROTOCOL_VERSION) {
+      cachedSession = null;
+      return null;
+    }
+    const ingestBaseUrl = normalizeUrl(readString(data, "ingestBaseUrl"));
+    if (!ingestBaseUrl || !isLoopbackHttpUrl(ingestBaseUrl)) {
+      cachedSession = null;
+      return null;
+    }
+    const nextSession = {
+      bootstrapUrl,
+      ingestBaseUrl,
+      serverInstanceId: readString(data, "serverInstanceId"),
+      projectId: readString(data, "projectId"),
+      sessionId: readString(data, "sessionId"),
+      accessToken: readString(data, "accessToken"),
+      expiresAt: parseExpiresAt(data?.expiresAt)
+    };
+    cachedSession = nextSession;
+    return nextSession;
+  } catch {
+    cachedSession = null;
+    return null;
+  }
+}
+async function refreshSessionToken(session) {
+  try {
     const headers = { "Content-Type": "application/json" };
-    if (token2) headers["X-Session-Token"] = token2;
-    return fetch(`${MCP_BASE}${path}`, {
+    if (session.accessToken) {
+      headers.Authorization = `Bearer ${session.accessToken}`;
+    }
+    const response = await fetch(joinUrl(session.ingestBaseUrl, "/v1/sessions/refresh"), {
       method: "POST",
       headers,
-      body: JSON.stringify(payload)
+      body: JSON.stringify({
+        protocolVersion: PROTOCOL_VERSION,
+        projectId: session.projectId,
+        sessionId: session.sessionId
+      }),
+      signal: getTimeoutSignal(REQUEST_TIMEOUT_MS)
     });
+    if (response.status === 404 || response.status === 405) {
+      return null;
+    }
+    if (!response.ok) {
+      return null;
+    }
+    const data = await readJsonRecord(response);
+    const nextToken = readString(data, "accessToken");
+    if (!nextToken) {
+      return null;
+    }
+    const refreshedSession = {
+      ...session,
+      accessToken: nextToken,
+      expiresAt: parseExpiresAt(data?.expiresAt) ?? session.expiresAt
+    };
+    cachedSession = refreshedSession;
+    return refreshedSession;
+  } catch {
+    return null;
+  }
+}
+function createIdempotencyKey() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  const timestamp = Date.now().toString(36);
+  const random = Math.random().toString(36).slice(2, 12);
+  return `${timestamp}-${random}`;
+}
+async function sendAnnotationRequest(session, path, payload, idempotencyKey) {
+  const headers = {
+    "Content-Type": "application/json",
+    "X-Idempotency-Key": idempotencyKey
+  };
+  if (session.accessToken) {
+    headers.Authorization = `Bearer ${session.accessToken}`;
+  }
+  return fetch(joinUrl(session.ingestBaseUrl, path), {
+    method: "POST",
+    headers,
+    body: JSON.stringify(payload),
+    signal: getTimeoutSignal(REQUEST_TIMEOUT_MS)
+  });
+}
+async function toClientResponse(response) {
+  const data = await readJsonRecord(response);
+  const bodyOk = data?.ok;
+  const parsedOk = typeof bodyOk === "boolean" ? bodyOk : response.ok;
+  return {
+    ok: parsedOk && response.ok,
+    id: readString(data, "id") ?? ""
   };
-  let token = await getSessionToken();
-  let res = await send(token);
-  if (res.status === 403) {
-    cachedToken = null;
-    token = await getSessionToken(true);
-    res = await send(token);
+}
+async function postWithSessionToken(path, payload) {
+  const idempotencyKey = createIdempotencyKey();
+  let session = await bootstrapSession();
+  if (!session) return { ok: false, id: "" };
+  let response;
+  try {
+    response = await sendAnnotationRequest(session, path, payload, idempotencyKey);
+  } catch {
+    return { ok: false, id: "" };
+  }
+  if (response.status === 401 || response.status === 403) {
+    session = await refreshSessionToken(session) ?? await bootstrapSession(true);
+    if (!session) return { ok: false, id: "" };
+    try {
+      response = await sendAnnotationRequest(session, path, payload, idempotencyKey);
+    } catch {
+      return { ok: false, id: "" };
+    }
   }
-  return res.json();
+  return toClientResponse(response);
 }
 async function sendEditToAgent(edit) {
-  return postWithSessionToken("/api/edit", edit);
+  return postWithSessionToken("/v1/annotations/edit", edit);
 }
 async function sendCommentToAgent(comment) {
-  return postWithSessionToken("/api/comment", comment);
+  return postWithSessionToken("/v1/annotations/comment", comment);
 }
 
 // src/provider.tsx
@@ -4050,7 +4308,7 @@ function MeasurementOverlay({
       children: [
         /* @__PURE__ */ jsx6(ElementHighlight, { element: selectedElement, color: BLUE }),
         hoveredElement && /* @__PURE__ */ jsx6(ElementHighlight, { element: hoveredElement, color: TOMATO, isDashed: true }),
-        measurements.map((line, i) => /* @__PURE__ */ jsx6(MeasurementLineComponent, { line }, i))
+        measurements.map((line) => /* @__PURE__ */ jsx6(MeasurementLineComponent, { line }, `${line.direction}-${line.x1}-${line.y1}-${line.x2}-${line.y2}`))
       ]
     }
   );
@@ -4621,7 +4879,7 @@ function SelectionOverlay({
         onDoubleClick: handleDoubleClick,
         onMouseMove: handleMouseMove,
         onMouseLeave: handleMouseLeave,
-        children: moveHandleRects.map((targetRect, idx) => {
+        children: moveHandleRects.map((targetRect) => {
           return /* @__PURE__ */ jsx8(
             "button",
             {
@@ -4648,7 +4906,7 @@ function SelectionOverlay({
               },
               onPointerDown: handleMoveHandlePointerDown(targetRect.target)
             },
-            `${idx}-${targetRect.left}-${targetRect.top}`
+            `${targetRect.left}-${targetRect.top}-${targetRect.width}-${targetRect.height}`
           );
         })
       }
@@ -4791,10 +5049,12 @@ function CommentPin({
       }
     ),
     /* @__PURE__ */ jsx9(
-      "div",
+      "button",
       {
+        type: "button",
         "data-direct-edit": "comment-pin",
-        className: "group/pin fixed z-[99998] flex size-3 cursor-pointer items-center justify-center rounded-full bg-blue-500 shadow-md ring-2 ring-white transition-transform hover:scale-[1.67] hover:shadow-lg",
+        "aria-label": `Comment ${index}`,
+        className: "group/pin fixed z-[99998] flex size-3 cursor-pointer items-center justify-center rounded-full border-none bg-blue-500 p-0 shadow-md ring-2 ring-white transition-transform hover:scale-[1.67] hover:shadow-lg",
         style: {
           left: position.x - 6,
           top: position.y - 6,
@@ -4874,6 +5134,7 @@ function NewCommentInput({
     "div",
     {
       ref: cardRef,
+      role: "presentation",
       "data-direct-edit": "comment-card",
       className: cn(
         "fixed z-[99999] flex items-center gap-1.5 rounded-xl outline outline-1 outline-foreground/10 bg-background p-1.5 shadow-lg",
@@ -4991,6 +5252,7 @@ function CommentThread({
   return /* @__PURE__ */ jsxs4(
     "div",
     {
+      role: "presentation",
       "data-direct-edit": "comment-card",
       className: "fixed z-[99999] w-[280px] overflow-hidden rounded-xl outline outline-1 outline-foreground/10 bg-background shadow-lg",
       style: {
@@ -5088,13 +5350,13 @@ function CommentThread({
             ] }),
             /* @__PURE__ */ jsx9("p", { className: "text-xs leading-relaxed text-foreground", children: comment.text })
           ] }),
-          comment.replies.map((reply, i) => /* @__PURE__ */ jsxs4("div", { className: "border-t border-border/30 px-3 py-2.5", children: [
+          comment.replies.map((reply) => /* @__PURE__ */ jsxs4("div", { className: "border-t border-border/30 px-3 py-2.5", children: [
             /* @__PURE__ */ jsxs4("div", { className: "mb-1 flex items-center gap-2", children: [
               /* @__PURE__ */ jsx9("div", { className: "flex size-5 shrink-0 items-center justify-center rounded-full bg-blue-500 text-[10px] font-bold text-white", children: index }),
               /* @__PURE__ */ jsx9("span", { className: "text-[10px] text-muted-foreground", children: formatRelativeTime(reply.createdAt) })
             ] }),
             /* @__PURE__ */ jsx9("p", { className: "text-xs leading-relaxed text-foreground", children: reply.text })
-          ] }, i))
+          ] }, reply.createdAt))
         ] }),
         /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-1.5 border-t border-border/50 px-2 py-1.5", children: [
           /* @__PURE__ */ jsx9(
@@ -7655,6 +7917,7 @@ function DirectEditPanelContent() {
       /* @__PURE__ */ jsx23(
         "div",
         {
+          role: "presentation",
           "data-direct-edit": "overlay",
           className: cn("fixed inset-0 z-[99990] cursor-default"),
           style: { pointerEvents: textEditingElement ? "none" : "auto" },
@@ -7736,7 +7999,7 @@ function DirectEditPanelContent() {
                     strokeWidth: 1,
                     strokeDasharray: "4 2"
                   },
-                  i
+                  `${r.left}-${r.top}-${r.width}-${r.height}`
                 );
               })
             ]
@@ -8978,10 +9241,19 @@ ${text}`);
                           return /* @__PURE__ */ jsxs19(
                             "div",
                             {
+                              role: "button",
+                              tabIndex: 0,
                               className: "group flex cursor-pointer items-start justify-between rounded-md px-1.5 py-1.5 text-xs transition-colors hover:bg-muted/50",
                               onClick: () => {
                                 void handleCopyItem(item);
                               },
+                              onKeyDown: (e) => {
+                                if (e.target !== e.currentTarget) return;
+                                if (e.key === "Enter" || e.key === " ") {
+                                  e.preventDefault();
+                                  void handleCopyItem(item);
+                                }
+                              },
                               children: [
                                 /* @__PURE__ */ jsxs19("div", { className: "min-w-0 flex flex-1 flex-col items-start gap-[4px]", children: [
                                   /* @__PURE__ */ jsxs19(Badge, { variant: "secondary", className: "h-6 shrink-0 px-1.5 text-xs", children: [
@@ -9013,7 +9285,7 @@ ${text}`);
                                 )
                               ]
                             },
-                            i
+                            item.type === "comment" ? item.comment.id : `edit-${i}`
                           );
                         }) })
                       ]
@@ -9101,7 +9373,7 @@ ${text}`);
                           { label: "Back / Exit", keys: ["Esc"] }
                         ].map(({ label, keys }) => /* @__PURE__ */ jsxs19("div", { className: "flex h-8 w-full items-center justify-between rounded-md px-2 text-xs text-muted-foreground", children: [
                           /* @__PURE__ */ jsx26("span", { children: label }),
-                          /* @__PURE__ */ jsx26("span", { className: "flex items-center gap-0.5", children: keys.map((k, i) => /* @__PURE__ */ jsx26("kbd", { className: popupKbdClass, children: k }, i)) })
+                          /* @__PURE__ */ jsx26("span", { className: "flex items-center gap-0.5", children: keys.map((k, i) => /* @__PURE__ */ jsx26("kbd", { className: popupKbdClass, children: k }, typeof k === "string" ? k : i)) })
                         ] }, label)) })
                       ]
                     }