made-refine 0.1.13 → 0.2.1-beta.0

package/README.md

@@ -31,7 +31,7 @@ This detects your framework, installs the package, previews file changes, and ap
 - Renders inside Shadow DOM for full CSS isolation from your app
 - Babel/Vite plugin adds source location metadata to every JSX element
 - Hooks into React DevTools fiber tree for component name resolution
-- Built-in MCP server enables hands-free agent workflows
+- Integrates with the desktop app MCP broker for hands-free agent workflows
 
 ## Supported frameworks
 

package/dist/cli.cjs

@@ -8435,185 +8435,8 @@ function installPackage(cwd) {
     console.log(import_picocolors.default.dim(`    ${cmd}`));
   }
 }
-var BABEL_JSON_CONFIG_FILES = [".babelrc", ".babelrc.json", "babel.config.json"];
-var BABEL_JS_CONFIG_FILES = [
-  ".babelrc.js",
-  ".babelrc.cjs",
-  ".babelrc.mjs",
-  "babel.config.js",
-  "babel.config.cjs",
-  "babel.config.mjs"
-];
-function findBabelConfigFile(cwd) {
-  for (const file of BABEL_JSON_CONFIG_FILES) {
-    const absolutePath = import_path2.default.join(cwd, file);
-    if (import_fs2.default.existsSync(absolutePath)) {
-      return {
-        absolutePath,
-        relativePath: file,
-        kind: "json"
-      };
-    }
-  }
-  for (const file of BABEL_JS_CONFIG_FILES) {
-    const absolutePath = import_path2.default.join(cwd, file);
-    if (import_fs2.default.existsSync(absolutePath)) {
-      return {
-        absolutePath,
-        relativePath: file,
-        kind: "js"
-      };
-    }
-  }
-  const packageJsonPath = import_path2.default.join(cwd, "package.json");
-  if (import_fs2.default.existsSync(packageJsonPath)) {
-    try {
-      const packageJson = JSON.parse(import_fs2.default.readFileSync(packageJsonPath, "utf-8"));
-      if (packageJson.babel !== void 0) {
-        return {
-          absolutePath: packageJsonPath,
-          relativePath: "package.json#babel",
-          kind: "package-json"
-        };
-      }
-    } catch {
-    }
-  }
-  return null;
-}
-function isMadeRefinePlugin(plugin) {
-  if (typeof plugin === "string") {
-    return plugin === "made-refine/babel";
-  }
-  if (Array.isArray(plugin) && typeof plugin[0] === "string") {
-    return plugin[0] === "made-refine/babel";
-  }
-  return false;
-}
-function hasMadeRefinePlugin(plugins) {
-  if (!Array.isArray(plugins)) return false;
-  return plugins.some((plugin) => isMadeRefinePlugin(plugin));
-}
-function ensureMadeRefineInDevelopmentEnv(config) {
-  if (hasMadeRefinePlugin(config.plugins)) {
-    return "already-configured";
-  }
-  const existingEnv = config.env;
-  if (existingEnv !== void 0 && (typeof existingEnv !== "object" || existingEnv === null || Array.isArray(existingEnv))) {
-    return "unsupported-shape";
-  }
-  if (!config.env) {
-    config.env = {};
-  }
-  const env = config.env;
-  const existingDevelopment = env.development;
-  if (existingDevelopment !== void 0 && (typeof existingDevelopment !== "object" || existingDevelopment === null || Array.isArray(existingDevelopment))) {
-    return "unsupported-shape";
-  }
-  if (!env.development) {
-    env.development = {};
-  }
-  const development = env.development;
-  if (hasMadeRefinePlugin(development.plugins)) {
-    return "already-configured";
-  }
-  if (development.plugins === void 0) {
-    development.plugins = ["made-refine/babel"];
-    return "updated";
-  }
-  if (!Array.isArray(development.plugins)) {
-    return "unsupported-shape";
-  }
-  development.plugins = [...development.plugins, "made-refine/babel"];
-  return "updated";
-}
-function printManualNextBabelInstructions() {
-  console.log(
-    import_picocolors.default.dim(
-      "    env: { development: { plugins: ['made-refine/babel'] } }\n    (or add 'made-refine/babel' in your existing Babel plugin list)"
-    )
-  );
-}
-function configureNextBabel(cwd) {
-  const configFile = findBabelConfigFile(cwd);
-  if (!configFile) {
-    console.log(
-      import_picocolors.default.yellow("  \u26A0 No existing Babel config found \u2014 skipping Babel config to preserve SWC/Turbopack defaults.")
-    );
-    console.log(import_picocolors.default.dim("    Source detection will use React fiber fallback (less precise than Babel attributes)."));
-    return;
-  }
-  if (configFile.kind === "js") {
-    console.log(import_picocolors.default.yellow(`  \u26A0 Found ${configFile.relativePath} (JS Babel config) \u2014 verify/add plugin manually:`));
-    printManualNextBabelInstructions();
-    return;
-  }
-  if (configFile.kind === "package-json") {
-    let packageJson;
-    try {
-      packageJson = JSON.parse(import_fs2.default.readFileSync(configFile.absolutePath, "utf-8"));
-    } catch {
-      console.log(import_picocolors.default.yellow("  \u26A0 Could not parse package.json \u2014 add plugin manually:"));
-      printManualNextBabelInstructions();
-      return;
-    }
-    if (typeof packageJson !== "object" || packageJson === null || Array.isArray(packageJson)) {
-      console.log(import_picocolors.default.yellow("  \u26A0 package.json has unsupported shape \u2014 add plugin manually:"));
-      printManualNextBabelInstructions();
-      return;
-    }
-    const pkg = packageJson;
-    if (typeof pkg.babel !== "object" || pkg.babel === null || Array.isArray(pkg.babel)) {
-      console.log(import_picocolors.default.yellow("  \u26A0 package.json#babel has unsupported shape \u2014 add plugin manually:"));
-      printManualNextBabelInstructions();
-      return;
-    }
-    const result2 = ensureMadeRefineInDevelopmentEnv(pkg.babel);
-    if (result2 === "already-configured") {
-      console.log(import_picocolors.default.dim("  package.json#babel \u2014 already configured"));
-      return;
-    }
-    if (result2 === "unsupported-shape") {
-      console.log(import_picocolors.default.yellow("  \u26A0 package.json#babel has unsupported shape \u2014 add plugin manually:"));
-      printManualNextBabelInstructions();
-      return;
-    }
-    import_fs2.default.writeFileSync(configFile.absolutePath, `${JSON.stringify(pkg, null, 2)}
-`, "utf-8");
-    console.log(import_picocolors.default.green('  \u2713 Updated package.json#babel (added "made-refine/babel" in development env)'));
-    return;
-  }
-  const content = import_fs2.default.readFileSync(configFile.absolutePath, "utf-8");
-  let parsed;
-  try {
-    parsed = JSON.parse(content);
-  } catch {
-    console.log(import_picocolors.default.yellow(`  \u26A0 Could not parse ${configFile.relativePath} as JSON \u2014 add plugin manually:`));
-    printManualNextBabelInstructions();
-    return;
-  }
-  if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) {
-    console.log(import_picocolors.default.yellow(`  \u26A0 ${configFile.relativePath} has unsupported shape \u2014 add plugin manually:`));
-    printManualNextBabelInstructions();
-    return;
-  }
-  const result = ensureMadeRefineInDevelopmentEnv(parsed);
-  if (result === "already-configured") {
-    console.log(import_picocolors.default.dim(`  ${configFile.relativePath} \u2014 already configured`));
-    return;
-  }
-  if (result === "unsupported-shape") {
-    console.log(import_picocolors.default.yellow(`  \u26A0 ${configFile.relativePath} has unsupported shape \u2014 add plugin manually:`));
-    printManualNextBabelInstructions();
-    return;
-  }
-  import_fs2.default.writeFileSync(configFile.absolutePath, `${JSON.stringify(parsed, null, 2)}
-`, "utf-8");
-  console.log(import_picocolors.default.green(`  \u2713 Updated ${configFile.relativePath} (added "made-refine/babel" in development env)`));
-}
 async function setupNextJs(cwd) {
   console.log(import_picocolors.default.bold("\nConfiguring for Next.js...\n"));
-  configureNextBabel(cwd);
   const preloadSrc = import_path2.default.join(cwd, "node_modules/made-refine/dist/preload/preload.js");
   const publicDir = import_path2.default.join(cwd, "public");
   const preloadDest = import_path2.default.join(publicDir, "made-refine-preload.js");

package/dist/index.js

@@ -2425,44 +2425,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
@@ -4128,7 +4386,7 @@ function MeasurementOverlay({
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ElementHighlight, { element: selectedElement, color: BLUE }),
         hoveredElement && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ElementHighlight, { element: hoveredElement, color: TOMATO, isDashed: true }),
-        measurements.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MeasurementLineComponent, { line }, i))
+        measurements.map((line) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MeasurementLineComponent, { line }, `${line.direction}-${line.x1}-${line.y1}-${line.x2}-${line.y2}`))
       ]
     }
   );
@@ -4699,7 +4957,7 @@ function SelectionOverlay({
         onDoubleClick: handleDoubleClick,
         onMouseMove: handleMouseMove,
         onMouseLeave: handleMouseLeave,
-        children: moveHandleRects.map((targetRect, idx) => {
+        children: moveHandleRects.map((targetRect) => {
           return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "button",
             {
@@ -4726,7 +4984,7 @@ function SelectionOverlay({
               },
               onPointerDown: handleMoveHandlePointerDown(targetRect.target)
             },
-            `${idx}-${targetRect.left}-${targetRect.top}`
+            `${targetRect.left}-${targetRect.top}-${targetRect.width}-${targetRect.height}`
           );
         })
       }
@@ -4869,10 +5127,12 @@ function CommentPin({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      "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,
@@ -4952,6 +5212,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",
@@ -5069,6 +5330,7 @@ function CommentThread({
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "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: {
@@ -5166,13 +5428,13 @@ function CommentThread({
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs leading-relaxed text-foreground", children: comment.text })
           ] }),
-          comment.replies.map((reply, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "border-t border-border/30 px-3 py-2.5", children: [
+          comment.replies.map((reply) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "border-t border-border/30 px-3 py-2.5", children: [
             /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mb-1 flex items-center gap-2", children: [
               /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-[10px] text-muted-foreground", children: formatRelativeTime(reply.createdAt) })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs leading-relaxed text-foreground", children: reply.text })
-          ] }, i))
+          ] }, reply.createdAt))
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-1.5 border-t border-border/50 px-2 py-1.5", children: [
           /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -7675,6 +7937,7 @@ function DirectEditPanelContent() {
       /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         "div",
         {
+          role: "presentation",
           "data-direct-edit": "overlay",
           className: cn("fixed inset-0 z-[99990] cursor-default"),
           style: { pointerEvents: textEditingElement ? "none" : "auto" },
@@ -7756,7 +8019,7 @@ function DirectEditPanelContent() {
                     strokeWidth: 1,
                     strokeDasharray: "4 2"
                   },
-                  i
+                  `${r.left}-${r.top}-${r.width}-${r.height}`
                 );
               })
             ]
@@ -8998,10 +9261,19 @@ ${text}`);
                           return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
                             "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__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "min-w-0 flex flex-1 flex-col items-start gap-[4px]", children: [
                                   /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Badge, { variant: "secondary", className: "h-6 shrink-0 px-1.5 text-xs", children: [
@@ -9033,7 +9305,7 @@ ${text}`);
                                 )
                               ]
                             },
-                            i
+                            item.type === "comment" ? item.comment.id : `edit-${i}`
                           );
                         }) })
                       ]
@@ -9121,7 +9393,7 @@ ${text}`);
                           { label: "Back / Exit", keys: ["Esc"] }
                         ].map(({ label, keys }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex h-8 w-full items-center justify-between rounded-md px-2 text-xs text-muted-foreground", children: [
                           /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: label }),
-                          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "flex items-center gap-0.5", children: keys.map((k, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("kbd", { className: popupKbdClass, children: k }, i)) })
+                          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "flex items-center gap-0.5", children: keys.map((k, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("kbd", { className: popupKbdClass, children: k }, typeof k === "string" ? k : i)) })
                         ] }, label)) })
                       ]
                     }