proto-plugin 0.1.9 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "proto-plugin",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "type": "module",
   "publishConfig": {
     "registry": "https://registry.npmjs.org"

package/src/components/shell/prototype-plugin-update-popup.tsx

@@ -3,16 +3,25 @@
 import { Button } from "@prototype/components/ui/button";
 import { buildUpgradeProtoPluginCopyText } from "@prototype/lib/prototypes/upgrade-proto-plugin-prompt";
 import { useProtoPluginVersionCheck } from "@prototype/lib/prototypes/use-proto-plugin-version-check";
+import { useActivePrototypeToolTheme } from "@prototype/lib/prototypes/use-prototype-tool-theme";
 import useCopyToClipboard from "@prototype/lib/use-copy-to-clipboard";
 import { cn } from "@prototype/lib/utils";
 import { X } from "lucide-react";
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
 import { toast } from "sonner";
 
 export function PrototypePluginUpdatePopup() {
   const { status, shouldShowPopup, dismiss } = useProtoPluginVersionCheck();
   const { copy, icon, isCopied } = useCopyToClipboard();
+  const theme = useActivePrototypeToolTheme();
+  const [mounted, setMounted] = useState(false);
 
-  if (!shouldShowPopup || !status?.installed || !status.latest) {
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!shouldShowPopup || !status?.installed || !status.latest || !mounted) {
     return null;
   }
 
@@ -31,40 +40,47 @@ export function PrototypePluginUpdatePopup() {
     }
   };
 
-  return (
+  return createPortal(
     <div
-      role="status"
-      aria-live="polite"
-      className={cn(
-        "pointer-events-auto fixed bottom-4 left-4 z-[1050] relative isolate flex w-fit max-w-[min(18rem,calc(100vw-2rem))] flex-col gap-2 rounded-lg bg-[var(--tool-chrome-surface)] p-2.5 pr-7 shadow-[var(--tool-review-card-shadow)] ring-[0.5px] ring-[var(--tool-chrome-border)]",
-      )}
+      data-prototype-root
+      data-prototype-comment-theme={theme}
+      className="pointer-events-none fixed bottom-4 right-4 z-[1050] !bg-transparent"
     >
-      <button
-        type="button"
-        aria-label="Dismiss update notification"
-        className="absolute right-1.5 top-1.5 rounded p-0.5 text-[var(--tool-chrome-text-muted)] transition-colors duration-200 ease hover:text-[var(--tool-chrome-text-heading)]"
-        onClick={dismiss}
+      <div
+        role="status"
+        aria-live="polite"
+        className={cn(
+          "pointer-events-auto relative flex w-[15rem] flex-col gap-3 rounded-lg bg-[var(--tool-chrome-surface)] p-4 shadow-md ring-[0.5px] ring-[var(--tool-chrome-border)]",
+        )}
       >
-        <X size={12} />
-      </button>
+        <button
+          type="button"
+          aria-label="Dismiss update notification"
+          className="absolute right-2 top-2 rounded p-1 text-[var(--tool-chrome-text-muted)] transition-colors duration-200 ease hover:text-[var(--tool-chrome-text-heading)]"
+          onClick={dismiss}
+        >
+          <X size={12} />
+        </button>
 
-      <p className="text-xs leading-relaxed text-[var(--tool-chrome-text-muted)]">
-        A new version of Proto is available, copy the prompt below into your agent to update
-      </p>
+        <p className="pr-4 text-xs leading-relaxed text-[var(--tool-chrome-text-muted)]">
+          A new version of Proto is available, copy the prompt below into your agent to update
+        </p>
 
-      <Button
-        type="button"
-        variant="chrome"
-        size="sm"
-        className="h-7 w-fit cursor-pointer gap-1 px-2 text-[11px]"
-        onClick={() => {
-          void handleCopyPrompt();
-        }}
-        aria-label="Copy update prompt"
-      >
-        {isCopied ? "Copied update prompt" : "Copy update prompt"}
-        {icon}
-      </Button>
-    </div>
+        <Button
+          type="button"
+          variant="chrome"
+          size="sm"
+          className="h-7 w-fit cursor-pointer gap-1 px-2 text-[11px]"
+          onClick={() => {
+            void handleCopyPrompt();
+          }}
+          aria-label="Copy update prompt"
+        >
+          {isCopied ? "Copied update prompt" : "Copy update prompt"}
+          {icon}
+        </Button>
+      </div>
+    </div>,
+    document.body,
   );
 }

package/src/lib/prototypes/proto-plugin-semver.ts

@@ -0,0 +1,18 @@
+export function isNewerProtoPluginVersion(latest: string, installed: string): boolean {
+  const latestParts = parseSemver(latest);
+  const installedParts = parseSemver(installed);
+  if (!latestParts || !installedParts) return false;
+
+  for (let index = 0; index < 3; index += 1) {
+    if (latestParts[index]! > installedParts[index]!) return true;
+    if (latestParts[index]! < installedParts[index]!) return false;
+  }
+
+  return false;
+}
+
+function parseSemver(version: string): [number, number, number] | null {
+  const match = /^(\d+)\.(\d+)\.(\d+)/.exec(version.trim());
+  if (!match) return null;
+  return [Number(match[1]), Number(match[2]), Number(match[3])];
+}

package/src/lib/prototypes/proto-plugin-version.ts

@@ -1,3 +1,5 @@
+import { isNewerProtoPluginVersion } from "@prototype/lib/prototypes/proto-plugin-semver";
+
 export type ProtoPluginVersionStatus = {
   installed: string | null;
   latest: string | null;
@@ -8,12 +10,73 @@ export type ProtoPluginVersionStatus = {
 
 export const PROTOTYPE_PLUGIN_VERSION_PATH = "/api/proto-plugin/version";
 
+const NPM_LATEST_URL = "https://registry.npmjs.org/proto-plugin/latest";
+
+type NpmLatestResponse = {
+  version?: string;
+  repository?: { url?: string };
+};
+
+function normalizeRepositoryUrl(url: string | undefined): string | undefined {
+  return url?.replace(/^git\+/, "").replace(/\.git$/, "");
+}
+
+async function fetchLatestFromNpmRegistry(): Promise<{
+  latest: string | null;
+  repositoryUrl?: string;
+}> {
+  try {
+    const response = await fetch(NPM_LATEST_URL, { cache: "no-store" });
+    if (!response.ok) {
+      return { latest: null };
+    }
+
+    const data = (await response.json()) as NpmLatestResponse;
+    return {
+      latest: data.version ?? null,
+      repositoryUrl: normalizeRepositoryUrl(data.repository?.url),
+    };
+  } catch {
+    return { latest: null };
+  }
+}
+
+/** Client-side npm check when the server route is stale (older plugin releases cached npm for 1h). */
+async function reconcileWithNpmRegistry(
+  status: ProtoPluginVersionStatus,
+): Promise<ProtoPluginVersionStatus> {
+  if (status.isWorkspaceLink || !status.installed) {
+    return status;
+  }
+
+  if (
+    status.updateAvailable &&
+    status.latest &&
+    isNewerProtoPluginVersion(status.latest, status.installed)
+  ) {
+    return status;
+  }
+
+  const { latest, repositoryUrl } = await fetchLatestFromNpmRegistry();
+  if (!latest || !isNewerProtoPluginVersion(latest, status.installed)) {
+    return status;
+  }
+
+  return {
+    ...status,
+    latest,
+    updateAvailable: true,
+    repositoryUrl: repositoryUrl ?? status.repositoryUrl,
+  };
+}
+
 export async function fetchProtoPluginVersionStatus(): Promise<ProtoPluginVersionStatus> {
-  const response = await fetch(PROTOTYPE_PLUGIN_VERSION_PATH);
+  const response = await fetch(PROTOTYPE_PLUGIN_VERSION_PATH, { cache: "no-store" });
 
   if (!response.ok) {
     throw new Error("Failed to check proto-plugin version.");
   }
 
-  return (await response.json()) as ProtoPluginVersionStatus;
+  const status = (await response.json()) as ProtoPluginVersionStatus;
+  return reconcileWithNpmRegistry(status);
 }

package/src/lib/prototypes/use-prototype-tool-theme.tsx

@@ -7,7 +7,9 @@ import {
   createContext,
   useCallback,
   useContext,
+  useEffect,
   useMemo,
+  useState,
   type ReactNode,
 } from "react";
 
@@ -113,3 +115,37 @@ export function usePrototypeToolTheme(): PrototypeToolThemeContextValue {
 
   return context;
 }
+
+function readActivePrototypeToolTheme(): PrototypeToolTheme {
+  if (typeof document === "undefined") return DEFAULT_THEME;
+
+  const roots = document.querySelectorAll<HTMLElement>("[data-prototype-root]");
+  const activeRoot = roots[roots.length - 1] ?? roots[0];
+  return normalizeTheme(activeRoot?.getAttribute("data-prototype-comment-theme") ?? DEFAULT_THEME);
+}
+
+/** Syncs with the innermost tool theme root (e.g. portaled UI outside nested providers). */
+export function useActivePrototypeToolTheme(): PrototypeToolTheme {
+  const { theme: contextTheme } = usePrototypeToolTheme();
+  const [theme, setTheme] = useState<PrototypeToolTheme>(contextTheme);
+
+  useEffect(() => {
+    const syncTheme = () => {
+      setTheme(readActivePrototypeToolTheme());
+    };
+
+    syncTheme();
+
+    const observer = new MutationObserver(syncTheme);
+    for (const root of document.querySelectorAll("[data-prototype-root]")) {
+      observer.observe(root, {
+        attributes: true,
+        attributeFilter: ["data-prototype-comment-theme"],
+      });
+    }
+
+    return () => observer.disconnect();
+  }, []);
+
+  return theme;
+}

package/src/server/proto-plugin-version-route.ts

@@ -1,6 +1,7 @@
 import { readFileSync } from "fs";
 import { join } from "path";
 
+import { isNewerProtoPluginVersion } from "@prototype/lib/prototypes/proto-plugin-semver";
 import { NextResponse } from "next/server";
 
 const PACKAGE_NAME = "proto-plugin";
@@ -19,25 +20,6 @@ type NpmLatestResponse = {
   repository?: { url?: string };
 };
 
-function parseSemver(version: string): [number, number, number] | null {
-  const match = /^(\d+)\.(\d+)\.(\d+)/.exec(version.trim());
-  if (!match) return null;
-  return [Number(match[1]), Number(match[2]), Number(match[3])];
-}
-
-export function isNewerVersion(latest: string, installed: string): boolean {
-  const latestParts = parseSemver(latest);
-  const installedParts = parseSemver(installed);
-  if (!latestParts || !installedParts) return false;
-
-  for (let index = 0; index < 3; index += 1) {
-    if (latestParts[index]! > installedParts[index]!) return true;
-    if (latestParts[index]! < installedParts[index]!) return false;
-  }
-
-  return false;
-}
-
 function readIsWorkspaceDependency(cwd: string): boolean {
   try {
     const hostPkg = JSON.parse(readFileSync(join(cwd, "package.json"), "utf8")) as {
@@ -110,7 +92,9 @@ export async function GET() {
   const { version: latest, repositoryUrl } = await fetchLatestFromNpm();
 
   const updateAvailable =
-    installed != null && latest != null && isNewerVersion(latest, installed);
+    installed != null &&
+    latest != null &&
+    isNewerProtoPluginVersion(latest, installed);
 
   const status: ProtoPluginVersionStatus = {
     installed,