@agent-native/core 0.85.7 → 0.86.0

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

@@ -0,0 +1,328 @@
+import { useActionMutation, useActionQuery } from "@agent-native/core/client";
+import {
+  IconAlertTriangle,
+  IconApps,
+  IconChevronDown,
+  IconCloudUpload,
+  IconExternalLink,
+  IconRefresh,
+  IconRocket,
+} from "@tabler/icons-react";
+import { useEffect, useRef, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Spinner } from "@/components/ui/spinner";
+
+const SYNC_POLL_INTERVAL_MS = 8000;
+const EDITS_REFETCH_INTERVAL_MS = 10000;
+const DEPLOY_POLL_INTERVAL_MS = 6000;
+
+export interface FusionAppBannerProps {
+  designId: string;
+  status: "building" | "ready" | "error";
+  statusMessage?: string;
+  previewUrl?: string;
+  editorUrl?: string;
+  deployedUrl?: string;
+}
+
+interface FusionEditsResult {
+  edits: unknown[];
+  pendingCount: number;
+}
+
+interface DeployStatusResult {
+  deployId?: string;
+  status?: string;
+  url?: string;
+}
+
+/**
+ * Slim, non-blocking banner shown above the canvas for fusion-backed ("full
+ * app") designs. Renders only when the design has fusionApp linkage data
+ * (see shared/full-app.ts readFusionApp) — invisible otherwise.
+ *
+ * - "building": polls sync-fusion-app until the container reports ready.
+ * - "ready": pending-edit count + apply/push/publish controls.
+ * - "error": message + retry.
+ *
+ * State is communicated inline (this banner's own text), not via toasts —
+ * toasts in this app are unreliable for this kind of longer-lived status.
+ */
+export function FusionAppBanner({
+  designId,
+  status,
+  statusMessage,
+  previewUrl,
+  editorUrl,
+  deployedUrl,
+}: FusionAppBannerProps) {
+  const syncMutation = useActionMutation("sync-fusion-app");
+  const applyEditsMutation = useActionMutation("apply-fusion-edits");
+  const pushMutation = useActionMutation("push-fusion-app");
+  const deployMutation = useActionMutation("deploy-fusion-app");
+
+  const [deployPending, setDeployPending] = useState(false);
+  const [deployError, setDeployError] = useState<string | null>(null);
+  const [liveDeployUrl, setLiveDeployUrl] = useState<string | undefined>(
+    undefined,
+  );
+  const [pushMessage, setPushMessage] = useState<string | null>(null);
+  const [pushError, setPushError] = useState<string | null>(null);
+
+  // ── Building: poll sync-fusion-app on mount + every ~8s while building ────
+  const syncMutateRef = useRef(syncMutation.mutate);
+  syncMutateRef.current = syncMutation.mutate;
+  useEffect(() => {
+    if (status !== "building") return;
+    syncMutateRef.current({ designId } as any);
+    const interval = window.setInterval(() => {
+      syncMutateRef.current({ designId } as any);
+    }, SYNC_POLL_INTERVAL_MS);
+    return () => window.clearInterval(interval);
+  }, [designId, status]);
+
+  // ── Ready: pending edits count ─────────────────────────────────────────────
+  const { data: editsData } = useActionQuery<FusionEditsResult>(
+    "list-fusion-edits",
+    { designId, status: "pending" } as any,
+    {
+      enabled: status === "ready",
+      refetchInterval: status === "ready" ? EDITS_REFETCH_INTERVAL_MS : false,
+    },
+  );
+  const pendingCount = editsData?.pendingCount ?? 0;
+
+  // ── Publish: poll get-fusion-deploy-status after triggering a deploy ──────
+  const deployStatusQuery = useActionQuery<DeployStatusResult>(
+    "get-fusion-deploy-status",
+    { designId } as any,
+    {
+      enabled: deployPending,
+      refetchInterval: deployPending ? DEPLOY_POLL_INTERVAL_MS : false,
+    },
+  );
+
+  useEffect(() => {
+    if (!deployPending) return;
+    const result = deployStatusQuery.data;
+    if (!result?.status) return;
+    if (result.status === "live" || result.status === "success") {
+      setDeployPending(false);
+      setLiveDeployUrl(result.url);
+    } else if (result.status === "failed" || result.status === "canceled") {
+      setDeployPending(false);
+      setDeployError(`Deploy ${result.status}`);
+    }
+  }, [deployPending, deployStatusQuery.data]);
+
+  if (status === "building") {
+    return (
+      <div className="pointer-events-auto absolute inset-x-0 top-0 z-30 flex items-center gap-2 border-b border-border/60 bg-background/95 px-3 py-1.5 text-xs text-muted-foreground shadow-sm backdrop-blur-sm">
+        <Spinner className="size-3.5 shrink-0" />
+        <span className="truncate">
+          {
+            "Building your app…" /* i18n-ignore fusion app banner, flag-gated feature */
+          }
+          {statusMessage ? ` ${statusMessage}` : ""}
+        </span>
+      </div>
+    );
+  }
+
+  if (status === "error") {
+    return (
+      <div className="pointer-events-auto absolute inset-x-0 top-0 z-30 flex items-center gap-2 border-b border-border/60 bg-background/95 px-3 py-1.5 text-xs shadow-sm backdrop-blur-sm">
+        <IconAlertTriangle className="size-3.5 shrink-0 text-destructive" />
+        <span className="min-w-0 flex-1 truncate text-destructive">
+          {
+            statusMessage ||
+              "Couldn't build your app" /* i18n-ignore fusion app banner, flag-gated feature */
+          }
+        </span>
+        <Button
+          size="sm"
+          variant="outline"
+          className="h-6 shrink-0 cursor-pointer gap-1 px-2 !text-[11px]"
+          disabled={syncMutation.isPending}
+          onClick={() => syncMutation.mutate({ designId } as any)}
+        >
+          {syncMutation.isPending ? (
+            <Spinner className="size-3" />
+          ) : (
+            <IconRefresh className="size-3" />
+          )}
+          {"Retry" /* i18n-ignore fusion app banner, flag-gated feature */}
+        </Button>
+      </div>
+    );
+  }
+
+  // status === "ready"
+  const publishedUrl = liveDeployUrl ?? deployedUrl;
+
+  return (
+    <div className="pointer-events-auto absolute inset-x-0 top-0 z-30 flex flex-wrap items-center gap-1.5 border-b border-border/60 bg-background/95 px-3 py-1.5 text-xs shadow-sm backdrop-blur-sm">
+      <span className="inline-flex shrink-0 items-center gap-1 rounded-sm bg-muted-foreground/15 px-1.5 py-0.5 !text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+        <IconApps className="size-3" />
+        {"App" /* i18n-ignore fusion app banner, flag-gated feature */}
+      </span>
+
+      {previewUrl && (
+        <a
+          href={previewUrl}
+          target="_blank"
+          rel="noreferrer"
+          className="inline-flex shrink-0 cursor-pointer items-center gap-1 text-muted-foreground hover:text-foreground hover:underline"
+        >
+          {"Preview" /* i18n-ignore fusion app banner, flag-gated feature */}
+          <IconExternalLink className="size-3" />
+        </a>
+      )}
+
+      {publishedUrl && (
+        <a
+          href={publishedUrl}
+          target="_blank"
+          rel="noreferrer"
+          className="inline-flex shrink-0 cursor-pointer items-center gap-1 text-muted-foreground hover:text-foreground hover:underline"
+        >
+          {"Live" /* i18n-ignore fusion app banner, flag-gated feature */}
+          <IconExternalLink className="size-3" />
+        </a>
+      )}
+
+      {deployError && (
+        <span className="inline-flex shrink-0 items-center gap-1 text-destructive">
+          <IconAlertTriangle className="size-3" />
+          {deployError}
+        </span>
+      )}
+      {pushMessage && !pushError && (
+        <span className="truncate text-muted-foreground">{pushMessage}</span>
+      )}
+      {pushError && (
+        <span className="truncate text-destructive">{pushError}</span>
+      )}
+
+      <div className="ms-auto flex shrink-0 items-center gap-1.5">
+        <Button
+          size="sm"
+          variant="outline"
+          className="h-6 cursor-pointer gap-1 px-2 !text-[11px]"
+          disabled={pendingCount === 0 || applyEditsMutation.isPending}
+          onClick={() => applyEditsMutation.mutate({ designId } as any)}
+        >
+          {applyEditsMutation.isPending ? <Spinner className="size-3" /> : null}
+          {
+            `Apply ${pendingCount} edit${pendingCount === 1 ? "" : "s"}` /* i18n-ignore fusion app banner, flag-gated feature */
+          }
+        </Button>
+
+        <Button
+          size="sm"
+          variant="outline"
+          className="h-6 cursor-pointer gap-1 px-2 !text-[11px]"
+          disabled={pushMutation.isPending}
+          onClick={() => {
+            setPushMessage(null);
+            setPushError(null);
+            pushMutation.mutate({ designId } as any, {
+              onSuccess: (result: any) => {
+                if (result?.ok === false) {
+                  setPushError(result?.detail || "Push failed");
+                } else {
+                  setPushMessage(result?.detail || "Pushed");
+                }
+              },
+              onError: (error: unknown) => {
+                setPushError(
+                  error instanceof Error ? error.message : "Push failed",
+                );
+              },
+            });
+          }}
+        >
+          {pushMutation.isPending ? (
+            <Spinner className="size-3" />
+          ) : (
+            <IconCloudUpload className="size-3" />
+          )}
+          {"Push" /* i18n-ignore fusion app banner, flag-gated feature */}
+        </Button>
+
+        <Button
+          size="sm"
+          className="h-6 cursor-pointer gap-1 px-2 !text-[11px]"
+          disabled={deployMutation.isPending || deployPending}
+          onClick={() => {
+            setDeployError(null);
+            deployMutation.mutate({ designId } as any, {
+              onSuccess: (result: any) => {
+                // Seed from the immediate response in case the deploy is
+                // already terminal (fast/mocked deploys); otherwise the
+                // get-fusion-deploy-status poll below takes over.
+                const initialStatus = result?.status;
+                if (initialStatus === "live" || initialStatus === "success") {
+                  setLiveDeployUrl(result?.url);
+                } else if (
+                  initialStatus === "failed" ||
+                  initialStatus === "canceled"
+                ) {
+                  setDeployError(`Deploy ${initialStatus}`);
+                } else {
+                  setDeployPending(true);
+                }
+              },
+              onError: (error: unknown) => {
+                setDeployError(
+                  error instanceof Error ? error.message : "Publish failed",
+                );
+              },
+            });
+          }}
+        >
+          {deployMutation.isPending || deployPending ? (
+            <Spinner className="size-3" />
+          ) : (
+            <IconRocket className="size-3" />
+          )}
+          {"Publish" /* i18n-ignore fusion app banner, flag-gated feature */}
+        </Button>
+
+        {editorUrl && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                size="sm"
+                variant="ghost"
+                className="h-6 w-6 cursor-pointer p-0"
+                aria-label={
+                  "More app actions" /* i18n-ignore fusion app banner, flag-gated feature */
+                }
+              >
+                <IconChevronDown className="size-3.5" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem asChild className="cursor-pointer">
+                <a href={editorUrl} target="_blank" rel="noreferrer">
+                  <IconExternalLink className="me-2 size-3.5" />
+                  {
+                    "Open in Builder" /* i18n-ignore fusion app banner, flag-gated feature */
+                  }
+                </a>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -12,9 +12,11 @@ import {
   IconSearch,
 } from "@tabler/icons-react";
 import {
+  forwardRef,
   memo,
   useCallback,
   useEffect,
+  useImperativeHandle,
   useLayoutEffect,
   useMemo,
   useRef,
@@ -23,6 +25,7 @@ import {
   type DragEvent,
   type MouseEvent,
   type ReactNode,
+  type Ref,
   type RefObject,
 } from "react";
 
@@ -180,6 +183,20 @@ export interface LayersPanelProps {
   boardElements?: LayersPanelNode[];
 }
 
+// L12: imperative handle so an external trigger (Cmd+R hotkey, canvas
+// context-menu Rename item) can start the panel's inline rename editor on a
+// specific layer, matching Figma. See beginRename below for what it does.
+export interface LayersPanelHandle {
+  /**
+   * Starts inline rename for the given layer id. Returns false (and does
+   * nothing) when the id doesn't resolve to a renamable row — i.e. it isn't
+   * in the current tree, or the node has `renamable === false`. On success,
+   * expands the layer's collapsed ancestors so the row is visible, scrolls
+   * it into view, and focuses+selects the rename input once it mounts.
+   */
+  beginRename: (layerId: string) => boolean;
+}
+
 export interface FlatLayerRow {
   node: LayersPanelNode;
   rowKey: string;
@@ -519,6 +536,34 @@ export function buildAncestorIdMap(
   return map;
 }
 
+// L12: find a node anywhere in the full (unfiltered) tree by id, alongside
+// its ancestor id chain. Used by beginRename to validate the target and to
+// know which ancestors must be expanded for the row to become visible,
+// independent of the current search/expand state.
+export function findNodeWithAncestors(
+  nodes: LayersPanelNode[],
+  targetId: string,
+): { node: LayersPanelNode; ancestorIds: string[] } | null {
+  function visit(
+    node: LayersPanelNode,
+    ancestorIds: string[],
+  ): { node: LayersPanelNode; ancestorIds: string[] } | null {
+    if (node.id === targetId) return { node, ancestorIds };
+    const children = node.children ?? [];
+    for (const child of children) {
+      const found = visit(child, [...ancestorIds, node.id]);
+      if (found) return found;
+    }
+    return null;
+  }
+
+  for (const node of nodes) {
+    const found = visit(node, []);
+    if (found) return found;
+  }
+  return null;
+}
+
 export function getLayerSelectionAnchorFromExternalSelection(args: {
   selectedIds: readonly string[];
   selectableVisibleIds: readonly string[];
@@ -622,35 +667,42 @@ function layerCanShowBadge(node: LayersPanelNode) {
 // <LayersPanel>), so a default shallow-prop comparator is sufficient here;
 // no custom comparator is needed or wanted since it would risk silently
 // ignoring a genuinely-changed prop.
-export const LayersPanel = memo(function LayersPanel({
-  screens,
-  activeScreenId,
-  screenOverviewActive = false,
-  files,
-  layers,
-  codeLayers,
-  elementLayers,
-  selectedIds,
-  expandedIds,
-  searchQuery,
-  className,
-  footer,
-  labels: labelsProp,
-  onSearchQueryChange,
-  onScreenSelect,
-  onScreenOverview,
-  onAddScreen,
-  onExpandedIdsChange,
-  onSelectionChange,
-  onRename,
-  onToggleLocked,
-  onToggleHidden,
-  onHoverLayer,
-  onLeaveLayer,
-  onMoveLayer,
-  canMoveLayer,
-  boardElements,
-}: LayersPanelProps) {
+// L12: forwardRef is composed OUTSIDE memo (memo(forwardRef(...))) — this is
+// the standard ordering and keeps the default shallow-prop memo comparator
+// applying to the same props as before; the ref itself is never part of that
+// comparison (React handles ref identity separately from memo's prop diff).
+function LayersPanelImpl(
+  {
+    screens,
+    activeScreenId,
+    screenOverviewActive = false,
+    files,
+    layers,
+    codeLayers,
+    elementLayers,
+    selectedIds,
+    expandedIds,
+    searchQuery,
+    className,
+    footer,
+    labels: labelsProp,
+    onSearchQueryChange,
+    onScreenSelect,
+    onScreenOverview,
+    onAddScreen,
+    onExpandedIdsChange,
+    onSelectionChange,
+    onRename,
+    onToggleLocked,
+    onToggleHidden,
+    onHoverLayer,
+    onLeaveLayer,
+    onMoveLayer,
+    canMoveLayer,
+    boardElements,
+  }: LayersPanelProps,
+  ref: Ref<LayersPanelHandle>,
+) {
   const t = useT();
   const labels = useMemo(() => mergeLabels(labelsProp, t), [labelsProp, t]);
   const selectedIdSet = useMemo(() => new Set(selectedIds), [selectedIds]);
@@ -898,6 +950,63 @@ export const LayersPanel = memo(function LayersPanel({
     [],
   );
 
+  // L12: id of a layer whose rename was started externally (beginRename) and
+  // is waiting for its row to become visible/mounted so the input can be
+  // focused. Ancestor expansion is asynchronous (it flows out through
+  // onExpandedIdsChange and back in via the expandedIds prop), so we can't
+  // synchronously focus the input the same tick beginRename runs — the row
+  // may not exist in the DOM yet. The effect below watches for the row to
+  // appear in rowElementRefs and finishes the job once it does.
+  const pendingRenameFocusIdRef = useRef<string | null>(null);
+
+  const beginRename = useCallback(
+    (layerId: string): boolean => {
+      if (!onRename) return false;
+      const found = findNodeWithAncestors(rootsRef.current, layerId);
+      if (!found || found.node.renamable === false) return false;
+      const { node, ancestorIds } = found;
+
+      renameOriginalNameRef.current = node.name;
+      setRenamingId(node.id);
+      setRenameDraft(node.name);
+
+      const nextExpanded = nextAutoExpandedIds({
+        selectedAncestorIds: ancestorIds,
+        expandedIds: expandedIdsRef.current,
+      });
+      if (nextExpanded) onExpandedIdsChange(nextExpanded);
+
+      pendingRenameFocusIdRef.current = node.id;
+      return true;
+    },
+    [onExpandedIdsChange, onRename],
+  );
+
+  useImperativeHandle(ref, () => ({ beginRename }), [beginRename]);
+
+  // Finishes an in-flight beginRename once its row is mounted: scrolls it
+  // into view and focuses+selects the rename input (the input already
+  // select-on-focuses via its own onFocus handler below). Depends on
+  // renamingId and visibleRows so it re-checks whenever either the rename
+  // target or ancestor-expansion state changes — the row can become visible
+  // either on this same render (already expanded) or a later one (ancestors
+  // needed expanding first, which round-trips through onExpandedIdsChange).
+  useEffect(() => {
+    const pendingId = pendingRenameFocusIdRef.current;
+    if (!pendingId || renamingId !== pendingId) return;
+    const rowKey = visibleRows.find((row) => row.node.id === pendingId)?.rowKey;
+    if (!rowKey) return;
+    const frame = window.requestAnimationFrame(() => {
+      const rowElement = rowElementRefs.current.get(rowKey);
+      rowElement?.scrollIntoView({ block: "nearest" });
+      rowElement
+        ?.querySelector<HTMLInputElement>("input")
+        ?.focus({ preventScroll: true });
+    });
+    pendingRenameFocusIdRef.current = null;
+    return () => window.cancelAnimationFrame(frame);
+  }, [renamingId, visibleRows]);
+
   // Id-first, stable callbacks for LayerRow. Each reads current
   // expandedIds/onExpandedIdsChange/onRename from refs/closure-captured
   // props at call time rather than recreating a fresh per-row closure every
@@ -1198,7 +1307,16 @@ export const LayersPanel = memo(function LayersPanel({
       {footer ? <div className="shrink-0">{footer}</div> : null}
     </aside>
   );
-});
+}
+
+// L12: forwardRef wraps the implementation function, and memo wraps the
+// forwardRef result — memo(forwardRef(Impl)), the standard composition order.
+// displayName is set explicitly because forwardRef's returned object doesn't
+// inherit the inner function's name the way a plain function component would
+// (React devtools/debugging would otherwise show "ForwardRef").
+const LayersPanelWithRef = forwardRef(LayersPanelImpl);
+LayersPanelWithRef.displayName = "LayersPanel";
+export const LayersPanel = memo(LayersPanelWithRef);
 
 interface LayerRowProps {
   row: FlatLayerRow;

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

@@ -133,7 +133,7 @@ export function LocalhostWriteConsentDialog({
 
           <p className="text-xs text-muted-foreground">
             {
-              "Only .html and .css files can be written. Paths outside the root folder are always blocked." /* i18n-ignore */
+              "Only text and code files can be written — never secrets like .env or key files. Paths outside the root folder are always blocked." /* i18n-ignore */
             }
           </p>
         </div>