@agent-native/core 0.92.12 → 0.93.0

package/corpus/templates/design/app/components/editor/FigmaLinkComposerBubble.tsx

@@ -0,0 +1,321 @@
+import { useT } from "@agent-native/core/client";
+import {
+  IconAlertTriangle,
+  IconBrandFigma,
+  IconCheck,
+  IconExternalLink,
+  IconLoader2,
+} from "@tabler/icons-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { sendToDesignAgentChat } from "@/lib/agent-chat";
+import {
+  getFigmaConnectionStatus,
+  saveFigmaAccessToken,
+  type FigmaConnectionStatus,
+} from "@/lib/figma-connection";
+import {
+  buildFigmaLinkChatPrompt,
+  extractFigmaLink,
+  type FigmaLink,
+  type FigmaLinkChatAction,
+} from "@/lib/figma-url";
+
+const FIGMA_TOKEN_DOCS_URL =
+  "https://developers.figma.com/docs/rest-api/personal-access-tokens/";
+
+export function useDetectedFigmaComposerLink(): {
+  link: FigmaLink | null;
+  onComposerTextChange: (text: string) => void;
+} {
+  const linkRef = useRef<FigmaLink | null>(null);
+  const [link, setLink] = useState<FigmaLink | null>(null);
+  const onComposerTextChange = useCallback((text: string) => {
+    const next = extractFigmaLink(text);
+    if (next?.url === linkRef.current?.url) return;
+    linkRef.current = next;
+    setLink(next);
+  }, []);
+  return { link, onComposerTextChange };
+}
+
+export interface FigmaLinkComposerBubbleProps {
+  link: FigmaLink;
+  designId?: string | null;
+}
+
+export function FigmaLinkComposerBubble({
+  link,
+  designId,
+}: FigmaLinkComposerBubbleProps) {
+  const t = useT();
+  const tRef = useRef(t);
+  tRef.current = t;
+  const [connection, setConnection] = useState<FigmaConnectionStatus | null>(
+    null,
+  );
+  const [checking, setChecking] = useState(true);
+  const [token, setToken] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const refreshVersionRef = useRef(0);
+  const refreshAbortRef = useRef<AbortController | null>(null);
+
+  const refreshConnection = useCallback(
+    async (externalSignal?: AbortSignal) => {
+      refreshAbortRef.current?.abort();
+      const controller = new AbortController();
+      refreshAbortRef.current = controller;
+      const version = ++refreshVersionRef.current;
+      const abortFromExternal = () => controller.abort();
+      if (externalSignal?.aborted) controller.abort();
+      else
+        externalSignal?.addEventListener("abort", abortFromExternal, {
+          once: true,
+        });
+      setChecking(true);
+      setError(null);
+      try {
+        const result = await getFigmaConnectionStatus({
+          signal: controller.signal,
+        });
+        if (
+          !controller.signal.aborted &&
+          version === refreshVersionRef.current
+        ) {
+          setConnection(result);
+        }
+      } catch (reason) {
+        if (
+          !controller.signal.aborted &&
+          version === refreshVersionRef.current
+        ) {
+          // Preserve the last known status on a transient refresh failure. A
+          // failed GET must never turn a connected user into an apparent
+          // disconnected user and prompt them to paste their token again.
+          setError(
+            reason instanceof Error
+              ? reason.message
+              : tRef.current("chat.figmaLink.connectionCheckFailed"),
+          );
+        }
+      } finally {
+        externalSignal?.removeEventListener("abort", abortFromExternal);
+        if (
+          !controller.signal.aborted &&
+          version === refreshVersionRef.current
+        ) {
+          setChecking(false);
+        }
+      }
+    },
+    [],
+  );
+
+  useEffect(
+    () => () => {
+      refreshVersionRef.current += 1;
+      refreshAbortRef.current?.abort();
+    },
+    [],
+  );
+
+  useEffect(() => {
+    const controller = new AbortController();
+    setToken("");
+    setError(null);
+    void refreshConnection(controller.signal);
+    return () => controller.abort();
+  }, [link.url, refreshConnection]);
+
+  useEffect(() => {
+    const handleConnectionChange = (event: Event) => {
+      const key = (event as CustomEvent<{ key?: string }>).detail?.key;
+      if (key && key !== "FIGMA_ACCESS_TOKEN") return;
+      void refreshConnection();
+    };
+    window.addEventListener(
+      "agent-engine:configured-changed",
+      handleConnectionChange,
+    );
+    return () =>
+      window.removeEventListener(
+        "agent-engine:configured-changed",
+        handleConnectionChange,
+      );
+  }, [refreshConnection]);
+
+  const handleConnect = useCallback(async () => {
+    if (!token.trim() || saving) return;
+    setSaving(true);
+    setError(null);
+    try {
+      const result = await saveFigmaAccessToken(token);
+      refreshVersionRef.current += 1;
+      refreshAbortRef.current?.abort();
+      setConnection(result);
+      setChecking(false);
+      setToken("");
+    } catch (reason) {
+      // Do not retain a rejected credential in component state or the DOM.
+      setToken("");
+      setError(
+        reason instanceof Error
+          ? reason.message
+          : t("chat.figmaLink.connectFailed"),
+      );
+    } finally {
+      setSaving(false);
+    }
+  }, [saving, t, token]);
+
+  const handleAgentAction = useCallback(
+    (action: FigmaLinkChatAction) => {
+      const prompt = buildFigmaLinkChatPrompt(action, link, designId);
+      sendToDesignAgentChat({
+        ...prompt,
+        submit: false,
+        openSidebar: false,
+      });
+    },
+    [designId, link],
+  );
+
+  return (
+    <div className="mx-3 mb-1.5 rounded-lg border border-border bg-muted/35 px-2.5 py-2 shadow-sm">
+      <div className="flex min-w-0 items-center gap-2">
+        <IconBrandFigma className="size-4 shrink-0 text-foreground" />
+        <div className="min-w-0 flex-1">
+          <p className="truncate text-xs font-medium text-foreground">
+            {link.kind === "frame"
+              ? t("chat.figmaLink.frameDetected")
+              : t("chat.figmaLink.fileDetected")}
+          </p>
+          <p className="truncate text-[10px] text-muted-foreground">
+            {link.url}
+          </p>
+        </div>
+        {connection?.connected ? (
+          <span className="inline-flex shrink-0 items-center gap-1 text-[10px] text-muted-foreground">
+            <IconCheck className="size-3 text-emerald-500" />
+            {connection.last4
+              ? t("chat.figmaLink.connectedLast4", {
+                  last4: connection.last4,
+                })
+              : t("chat.figmaLink.connected")}
+          </span>
+        ) : null}
+      </div>
+
+      {checking ? (
+        <div
+          className="mt-2 flex items-center gap-1.5 text-[10px] text-muted-foreground"
+          role="status"
+        >
+          <IconLoader2 className="size-3 animate-spin" />
+          {t("chat.figmaLink.checkingConnection")}
+        </div>
+      ) : !connection ? null : connection.connected ? (
+        <div className="mt-2 flex flex-wrap items-center gap-1.5">
+          <Button
+            type="button"
+            size="sm"
+            className="h-7 px-2 text-[11px]"
+            onClick={() => handleAgentAction("import")}
+          >
+            {link.kind === "frame"
+              ? t("chat.figmaLink.importFrame")
+              : t("chat.figmaLink.chooseFrame")}
+          </Button>
+          <Button
+            type="button"
+            size="sm"
+            variant="outline"
+            className="h-7 px-2 text-[11px]"
+            onClick={() => handleAgentAction("inspect")}
+          >
+            {t("chat.figmaLink.inspect")}
+          </Button>
+          <Button
+            type="button"
+            size="sm"
+            variant="ghost"
+            className="h-7 px-2 text-[11px]"
+            disabled={!designId}
+            onClick={() => handleAgentAction("export-svg")}
+          >
+            {t("chat.figmaLink.exportSvg")}
+          </Button>
+          <span className="min-w-0 flex-1 text-end text-[9px] leading-tight text-muted-foreground">
+            {t("chat.figmaLink.actionsPrefill")}
+          </span>
+        </div>
+      ) : (
+        <form
+          className="mt-2"
+          onSubmit={(event) => {
+            event.preventDefault();
+            void handleConnect();
+          }}
+        >
+          <p className="mb-1.5 text-[10px] leading-snug text-muted-foreground">
+            {t("chat.figmaLink.connectDescription")}
+          </p>
+          <div className="flex items-center gap-1.5">
+            <Input
+              type="password"
+              value={token}
+              onChange={(event) => setToken(event.target.value)}
+              autoComplete="off"
+              spellCheck={false}
+              aria-label={t("chat.figmaLink.tokenLabel")}
+              placeholder={t("chat.figmaLink.tokenPlaceholder")}
+              className="h-7 min-w-0 flex-1 px-2 text-[11px]"
+            />
+            <Button
+              type="submit"
+              size="sm"
+              className="h-7 px-2 text-[11px]"
+              disabled={!token.trim() || saving}
+            >
+              {saving ? <IconLoader2 className="size-3 animate-spin" /> : null}
+              {saving
+                ? t("chat.figmaLink.connecting")
+                : t("chat.figmaLink.connect")}
+            </Button>
+            <a
+              href={connection?.docsUrl ?? FIGMA_TOKEN_DOCS_URL}
+              target="_blank"
+              rel="noreferrer"
+              className="inline-flex h-7 shrink-0 items-center gap-1 rounded-md px-1.5 text-[10px] text-muted-foreground hover:bg-accent hover:text-foreground"
+            >
+              {t("chat.figmaLink.getToken")}
+              <IconExternalLink className="size-3" />
+            </a>
+          </div>
+        </form>
+      )}
+
+      {error ? (
+        <div
+          role="alert"
+          className="mt-1.5 flex items-start gap-1.5 text-[10px] leading-snug text-destructive"
+        >
+          <IconAlertTriangle className="mt-0.5 size-3 shrink-0" />
+          <span>{error}</span>
+          {!checking && !connection ? (
+            <button
+              type="button"
+              className="ms-auto shrink-0 underline underline-offset-2"
+              onClick={() => void refreshConnection()}
+            >
+              {t("chat.figmaLink.retry")}
+            </button>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/corpus/templates/design/app/components/editor/PromptDialog.tsx

@@ -296,7 +296,7 @@ interface PromptPopoverProps {
   onOpenChange: (open: boolean) => void;
   title: string;
   placeholder?: string;
-  onSkip?: () => void;
+  onSkip?: () => void | Promise<void>;
   skipLabel?: string;
   onSubmit: (
     prompt: string,
@@ -398,6 +398,8 @@ export default function PromptPopover({
 }: PromptPopoverProps) {
   const t = useT();
   const [uploading, setUploading] = useState(false);
+  const [skipInFlight, setSkipInFlight] = useState(false);
+  const skipInFlightRef = useRef(false);
   const [pickedAssets, setPickedAssets] = useState<UploadedFile[]>([]);
   const [selectedUploadFiles, setSelectedUploadFiles] = useState<File[]>([]);
   const [assetsPickerOpen, setAssetsPickerOpen] = useState(false);
@@ -416,6 +418,11 @@ export default function PromptPopover({
     setRestoredPromptText(text);
     setRestoredPromptKey((key) => key + 1);
   }, []);
+  useEffect(() => {
+    if (open) return;
+    skipInFlightRef.current = false;
+    setSkipInFlight(false);
+  }, [open]);
   // While the nested design-system Select is open, Radix disables pointer
   // events on everything else and the click that closes the Select also
   // moves focus back to its trigger. That focus-return is itself reported to
@@ -831,11 +838,24 @@ export default function PromptPopover({
           <div className="flex justify-end border-t border-border px-3.5 py-2">
             <button
               type="button"
+              disabled={loading || skipInFlight}
               onClick={() => {
-                onSkip();
-                onOpenChange(false);
+                if (loading || skipInFlightRef.current) return;
+                skipInFlightRef.current = true;
+                setSkipInFlight(true);
+                void (async () => {
+                  try {
+                    await onSkip();
+                    onOpenChange(false);
+                  } catch {
+                    // The caller owns error presentation. Keep the prompt open
+                    // and usable so the user can retry or submit a prompt.
+                    skipInFlightRef.current = false;
+                    setSkipInFlight(false);
+                  }
+                })();
               }}
-              className="cursor-pointer text-xs text-[#609FF8] hover:text-[#7AB2FA]"
+              className="cursor-pointer text-xs text-[#609FF8] hover:text-[#7AB2FA] disabled:cursor-not-allowed disabled:opacity-50"
             >
               {skipLabel ?? t("promptDialog.skipPrompt")}
             </button>

package/corpus/templates/design/app/components/layout/Layout.tsx

@@ -22,6 +22,10 @@ import { useNavigationState } from "@/hooks/use-navigation-state";
 import { DESIGN_CHAT_STORAGE_KEY } from "@/lib/agent-chat";
 import { cn } from "@/lib/utils";
 
+import {
+  FigmaLinkComposerBubble,
+  useDetectedFigmaComposerLink,
+} from "../editor/FigmaLinkComposerBubble";
 import { Header } from "./Header";
 import { Sidebar } from "./Sidebar";
 
@@ -58,6 +62,10 @@ export function Layout({ children }: LayoutProps) {
   const isDesignEditor = location.pathname.startsWith("/design/");
   const showMobileTopBar = !isDesignEditor;
   const browserTabId = getBrowserTabId();
+  const {
+    link: detectedFigmaComposerLink,
+    onComposerTextChange: handleComposerTextChange,
+  } = useDetectedFigmaComposerLink();
 
   // Bind chat to the currently-open design. Same pattern as slides — the
   // route is `/design/:id` for the editor and `/present/:id` for preview
@@ -121,7 +129,7 @@ export function Layout({ children }: LayoutProps) {
     return (
       <HeaderActionsProvider>
         <MobileSidebarContext.Provider value={null}>
-          <div className="agent-layout-shell flex h-screen w-full overflow-hidden bg-background text-foreground">
+          <div className="agent-layout-shell flex h-dvh w-full overflow-hidden bg-background text-foreground">
             <div className="agent-layout-main-surface design-editor-main-surface flex h-full flex-1 flex-col overflow-hidden">
               <main className="agent-native-app-main flex-1 overflow-hidden">
                 {children}
@@ -151,8 +159,14 @@ export function Layout({ children }: LayoutProps) {
           showScopeBadge={false}
           browserTabId={browserTabId}
           threadFooterSlot={designQuestionsWaitingSlot}
+          onComposerTextChange={handleComposerTextChange}
+          composerSlot={
+            detectedFigmaComposerLink ? (
+              <FigmaLinkComposerBubble link={detectedFigmaComposerLink} />
+            ) : null
+          }
         >
-          <div className="agent-layout-shell flex h-screen w-full overflow-hidden bg-background text-foreground">
+          <div className="agent-layout-shell flex h-dvh w-full overflow-hidden bg-background text-foreground">
             {!isDesignEditor && mobileSidebarOpen && (
               <div
                 className="fixed inset-0 z-40 bg-black/50 md:hidden"

package/corpus/templates/design/app/components/layout/Sidebar.tsx

@@ -8,6 +8,7 @@ import { ExtensionsSidebarSection } from "@agent-native/core/client/extensions";
 import { OrgSwitcher } from "@agent-native/core/client/org";
 import {
   IconPencil,
+  IconTemplate,
   IconPalette,
   IconSettings,
   IconLayoutSidebarLeftCollapse,
@@ -26,6 +27,7 @@ import { cn } from "@/lib/utils";
 
 const navItems = [
   { icon: IconPencil, labelKey: "navigation.designs", href: "/" },
+  { icon: IconTemplate, labelKey: "navigation.templates", href: "/templates" },
   {
     icon: IconPalette,
     labelKey: "navigation.designSystems",

package/corpus/templates/design/app/components/templates/TemplatePreview.tsx

@@ -0,0 +1,72 @@
+import { IconTemplate } from "@tabler/icons-react";
+import { useEffect, useRef, useState } from "react";
+
+export function TemplatePreview({
+  html,
+  title,
+  width,
+  height,
+}: {
+  html?: string | null;
+  title: string;
+  width?: number | null;
+  height?: number | null;
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [scale, setScale] = useState(0.25);
+  const naturalWidth = Math.max(width ?? 1280, 320);
+  const naturalHeight = Math.max(height ?? 720, 240);
+
+  useEffect(() => {
+    const element = containerRef.current;
+    if (!element) return;
+    const update = () => {
+      const availableWidth = element.clientWidth;
+      const availableHeight = element.clientHeight;
+      if (availableWidth > 0 && availableHeight > 0) {
+        setScale(
+          Math.max(
+            availableWidth / naturalWidth,
+            availableHeight / naturalHeight,
+          ),
+        );
+      }
+    };
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [naturalHeight, naturalWidth]);
+
+  if (!html) {
+    return (
+      <div className="flex aspect-video items-center justify-center bg-muted/50">
+        <IconTemplate className="size-8 text-muted-foreground/35" />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className="relative aspect-video overflow-hidden bg-white"
+    >
+      <iframe
+        title={`${title} preview`}
+        srcDoc={html}
+        sandbox=""
+        loading="lazy"
+        tabIndex={-1}
+        aria-hidden
+        style={{
+          width: `${naturalWidth}px`,
+          height: `${naturalHeight}px`,
+          transform: `scale(${scale})`,
+          transformOrigin: "top left",
+          border: 0,
+          pointerEvents: "none",
+        }}
+      />
+    </div>
+  );
+}

package/corpus/templates/design/app/global.css

@@ -238,27 +238,12 @@
   );
 }
 
-/* Design has a dense editor surface, so its side chrome needs more contrast
-   than the shared shell defaults and a real divider in addition to shadow. */
+/* Design keeps denser side-chrome contrast while sharing the borderless app
+   surface treatment used by the rest of the workspace. */
 .agent-layout-shell,
 .agent-sidebar-shell {
   --design-shell-chrome-bg: hsl(0 0% 93%);
-  --design-shell-divider: hsl(0 0% 79%);
   --agent-native-lower-surface: var(--design-shell-chrome-bg);
-  --agent-native-raised-border: var(--design-shell-divider);
-  --agent-native-raised-shadow-left: -1px 0 0 var(--design-shell-divider);
-  --agent-native-raised-shadow-right: 1px 0 0 var(--design-shell-divider);
-}
-
-.agent-layout-shell .agent-sidebar-main-surface::before {
-  box-shadow: none;
-}
-
-.agent-layout-shell .design-editor-main-surface {
-  border-start-start-radius: 0;
-  border-end-start-radius: 0;
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
 }
 
 .dark .agent-layout-shell,
@@ -266,25 +251,7 @@
 .dark.agent-layout-shell,
 .dark.agent-sidebar-shell {
   --design-shell-chrome-bg: hsl(0 0% 10%);
-  --design-shell-divider: hsl(0 0% 22%);
   --agent-native-lower-surface: var(--design-shell-chrome-bg);
-  --agent-native-raised-border: var(--design-shell-divider);
-}
-
-.agent-layout-shell .agent-layout-left-drawer,
-.agent-layout-shell
-  .agent-layout-left-drawer
-  > :where(.border-e, .border-r):first-child {
-  border-inline-end-color: var(--design-shell-divider) !important;
-  border-right-color: var(--design-shell-divider) !important;
-}
-
-.agent-sidebar-main-surface[data-agent-sidebar-main-state="open"][data-agent-sidebar-main-position="right"] {
-  border-inline-end: 1px solid var(--design-shell-divider);
-}
-
-.agent-sidebar-main-surface[data-agent-sidebar-main-state="open"][data-agent-sidebar-main-position="left"] {
-  border-inline-start: 1px solid var(--design-shell-divider);
 }
 
 .agent-sidebar-panel[data-agent-sidebar-layout="desktop"],

package/corpus/templates/design/app/hooks/use-navigation-state.ts

@@ -10,6 +10,7 @@ export interface NavigationState {
   view: string;
   designId?: string;
   designSystemId?: string;
+  templateId?: string;
   editorView?: "single" | "overview";
   inspectorTab?: "design" | "tweaks" | "extensions";
   inspector?: "design" | "tweaks" | "extensions";
@@ -261,6 +262,10 @@ export function useNavigationState(enabled = true) {
         state.view = "design-systems";
         const designSystemId = searchParams.get("designSystemId");
         if (designSystemId) state.designSystemId = designSystemId;
+      } else if (pathname.startsWith("/templates")) {
+        state.view = "templates";
+        const templateId = searchParams.get("templateId");
+        if (templateId) state.templateId = templateId;
       } else if (pathname.startsWith("/present/")) {
         state.view = "present";
         state.designId = params.id;
@@ -278,6 +283,11 @@ export function useNavigationState(enabled = true) {
           ? `/design-systems?designSystemId=${encodeURIComponent(cmd.designSystemId)}`
           : "/design-systems";
       }
+      if (cmd.view === "templates") {
+        return cmd.templateId
+          ? `/templates?templateId=${encodeURIComponent(cmd.templateId)}`
+          : "/templates";
+      }
       if (cmd.view === "present" && cmd.designId)
         return `/present/${cmd.designId}`;
       if (cmd.view === "settings") return "/settings";