@agent-native/core 0.122.4 → 0.123.1

package/corpus/templates/design/actions/open-visual-edit.ts

@@ -50,6 +50,83 @@ const capabilitySchema = z.object({
   reason: z.string().optional(),
 });
 
+const VIEWPORT_PRESETS = {
+  // `desktop` deliberately matches add-localhost-screens' 1280x900 fallback so
+  // asking for it never resizes frames placed by an earlier default call.
+  desktop: { label: "Desktop", width: 1280, height: 900 },
+  laptop: { label: "Laptop", width: 1440, height: 900 },
+  tablet: { label: "Tablet", width: 834, height: 1112 },
+  mobile: { label: "Mobile", width: 390, height: 844 },
+} as const;
+
+const viewportSchema = z.union([
+  z.enum(["desktop", "laptop", "tablet", "mobile"]),
+  z.object({
+    label: z.string().optional(),
+    width: z.number().positive(),
+    height: z.number().positive(),
+  }),
+]);
+
+type ViewportInput = z.infer<typeof viewportSchema>;
+interface ResolvedViewport {
+  label: string;
+  width: number;
+  height: number;
+}
+
+function resolveViewports(
+  inputs: ViewportInput[] | undefined,
+): ResolvedViewport[] | undefined {
+  if (!inputs?.length) return undefined;
+  return inputs.map((input) =>
+    typeof input === "string"
+      ? { ...VIEWPORT_PRESETS[input] }
+      : {
+          label: input.label ?? `${Math.round(input.width)}w`,
+          width: input.width,
+          height: input.height,
+        },
+  );
+}
+
+/**
+ * Expand one screen request per (route x viewport) and lay them out as a grid:
+ * one row per route, one column per viewport. Explicit x/y/width/height are
+ * what make add-localhost-screens treat each pair as its own frame instead of
+ * refreshing a single shared one, so they are always set here.
+ */
+function expandRoutesAcrossViewports(args: {
+  routes: Array<z.infer<typeof screenRouteSchema>>;
+  viewports: ResolvedViewport[];
+  startX: number;
+  startY: number;
+  gap: number;
+}): Array<z.infer<typeof screenRouteSchema>> {
+  const labelViewports = args.viewports.length > 1;
+  const expanded: Array<z.infer<typeof screenRouteSchema>> = [];
+  let rowY = args.startY;
+  for (const route of args.routes) {
+    let columnX = args.startX;
+    for (const viewport of args.viewports) {
+      expanded.push({
+        ...route,
+        title: labelViewports
+          ? `${route.title ?? titleFromRoutePath(route.path ?? "/")} — ${viewport.label}`
+          : route.title,
+        width: viewport.width,
+        height: viewport.height,
+        x: columnX,
+        y: rowY,
+      });
+      columnX += viewport.width + args.gap;
+    }
+    rowY +=
+      Math.max(...args.viewports.map((viewport) => viewport.height)) + args.gap;
+  }
+  return expanded;
+}
+
 const routeManifestSchema = z.object({
   version: z.literal(1).optional().default(1),
   sourceType: z.literal("localhost").optional().default("localhost"),
@@ -191,6 +268,11 @@ export default defineAction({
     paths: jsonArray(z.array(z.string()))
       .optional()
       .describe("Shortcut for routes when only paths/URLs are needed."),
+    viewports: jsonArray(z.array(viewportSchema))
+      .optional()
+      .describe(
+        'Place every requested route once per viewport, laid out one row per route and one column per viewport. Use preset names ("desktop", "laptop", "tablet", "mobile") or explicit {label?, width, height}. Example for responsive editing: ["desktop", "mobile"]. Overrides defaultWidth/defaultHeight.',
+      ),
     defaultWidth: z
       .number()
       .positive()
@@ -286,11 +368,38 @@ export default defineAction({
       }
     }
 
+    const viewports = resolveViewports(args.viewports);
+    const requestedRoutes = args.routes?.length
+      ? args.routes
+      : args.paths?.length
+        ? args.paths.map((path) => ({ path }))
+        : viewports
+          ? routeManifest.routes.map((route) => ({
+              routeId: route.id,
+              path: route.path,
+              title: route.title,
+            }))
+          : undefined;
+    if (viewports && !requestedRoutes?.length) {
+      throw new Error(
+        "viewports needs at least one route: pass routes/paths, or connect a bridge whose manifest lists routes.",
+      );
+    }
+
     const screens = await addLocalhostScreensAction.run({
       designId,
       connectionId: connection.id,
-      routes: args.routes,
-      paths: args.paths,
+      routes:
+        viewports && requestedRoutes
+          ? expandRoutesAcrossViewports({
+              routes: requestedRoutes,
+              viewports,
+              startX: args.startX ?? 0,
+              startY: args.startY ?? 0,
+              gap: args.gap ?? 160,
+            })
+          : args.routes,
+      paths: viewports ? undefined : args.paths,
       defaultWidth: args.defaultWidth,
       defaultHeight: args.defaultHeight,
       startX: args.startX,

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

@@ -0,0 +1,236 @@
+import {
+  useActionMutation,
+  useActionQuery,
+} from "@agent-native/core/client/hooks";
+import { useT } from "@agent-native/core/client/i18n";
+import {
+  IconDeviceDesktop,
+  IconDeviceMobile,
+  IconPlus,
+} from "@tabler/icons-react";
+import { useQueryClient } from "@tanstack/react-query";
+import { useMemo, useState } from "react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+
+type ViewportChoice = "desktop" | "mobile";
+
+const VIEWPORT_SIZES: Record<
+  ViewportChoice,
+  { width: number; height: number }
+> = {
+  desktop: { width: 1280, height: 900 },
+  mobile: { width: 390, height: 844 },
+};
+
+interface LocalhostRouteOption {
+  path: string;
+  title?: string;
+}
+
+function normalizeCustomPath(value: string): string {
+  if (!value || /^https?:\/\//i.test(value)) return value;
+  return value.startsWith("/") ? value : `/${value}`;
+}
+
+export interface AddLocalhostScreenDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  designId: string;
+  connectionId?: string;
+  /** Used only when the connection's route manifest has no routes. */
+  fallbackPaths?: string[];
+  /** Canvas placement for the new frame; defaults to (0, 0). */
+  position?: { x: number; y: number };
+}
+
+export function AddLocalhostScreenDialog({
+  open,
+  onOpenChange,
+  designId,
+  connectionId,
+  fallbackPaths,
+  position,
+}: AddLocalhostScreenDialogProps) {
+  const t = useT();
+  const queryClient = useQueryClient();
+  const [search, setSearch] = useState("");
+  const [viewport, setViewport] = useState<ViewportChoice>("desktop");
+
+  const { data: connectionResult } = useActionQuery<{
+    connections?: Array<{
+      id: string;
+      routes?: Array<{ path: string; title?: string }>;
+    }>;
+  }>("list-localhost-connections", connectionId ? { id: connectionId } : {}, {
+    enabled: open && Boolean(connectionId),
+  });
+
+  const routes = useMemo<LocalhostRouteOption[]>(() => {
+    const manifestRoutes = connectionResult?.connections?.find(
+      (connection) => connection.id === connectionId,
+    )?.routes;
+    if (manifestRoutes && manifestRoutes.length > 0) {
+      return manifestRoutes.map((route) => ({
+        path: route.path,
+        title: route.title,
+      }));
+    }
+    return (fallbackPaths ?? []).map((path) => ({ path }));
+  }, [connectionId, connectionResult, fallbackPaths]);
+
+  const filteredRoutes = useMemo(() => {
+    const query = search.trim().toLowerCase();
+    if (!query) return routes;
+    return routes.filter(
+      (route) =>
+        route.path.toLowerCase().includes(query) ||
+        route.title?.toLowerCase().includes(query),
+    );
+  }, [routes, search]);
+
+  const customPath = normalizeCustomPath(search.trim());
+  const showCustomPathOption =
+    customPath.length > 0 && !routes.some((route) => route.path === customPath);
+
+  const addScreensMutation = useActionMutation("add-localhost-screens");
+
+  const handleAdd = (path: string) => {
+    if (addScreensMutation.isPending) return;
+    const { width, height } = VIEWPORT_SIZES[viewport];
+    addScreensMutation.mutate(
+      {
+        designId,
+        connectionId,
+        routes: [
+          { path, width, height, x: position?.x ?? 0, y: position?.y ?? 0 },
+        ],
+      },
+      {
+        onSuccess: () => {
+          queryClient.invalidateQueries({
+            queryKey: ["action", "get-design"],
+          });
+          toast.success(t("designEditor.addLocalhostScreen.added"));
+          setSearch("");
+          onOpenChange(false);
+        },
+        onError: (error) => {
+          toast.error(
+            error instanceof Error
+              ? error.message
+              : t("designEditor.addLocalhostScreen.addFailed"),
+          );
+        },
+      },
+    );
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(next) => {
+        if (!next) setSearch("");
+        onOpenChange(next);
+      }}
+    >
+      <DialogContent className="max-w-md p-0">
+        <DialogHeader className="px-4 pt-4">
+          <DialogTitle>
+            {t("designEditor.addLocalhostScreen.title")}
+          </DialogTitle>
+          <DialogDescription>
+            {t("designEditor.addLocalhostScreen.description")}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex items-center gap-1 px-4">
+          <Button
+            type="button"
+            size="sm"
+            variant={viewport === "desktop" ? "secondary" : "ghost"}
+            className="cursor-pointer gap-1.5"
+            onClick={() => setViewport("desktop")}
+          >
+            <IconDeviceDesktop className="size-4" />
+            {t("designEditor.addLocalhostScreen.viewportDesktop")}
+          </Button>
+          <Button
+            type="button"
+            size="sm"
+            variant={viewport === "mobile" ? "secondary" : "ghost"}
+            className="cursor-pointer gap-1.5"
+            onClick={() => setViewport("mobile")}
+          >
+            <IconDeviceMobile className="size-4" />
+            {t("designEditor.addLocalhostScreen.viewportMobile")}
+          </Button>
+        </div>
+        <Command shouldFilter={false} className="mt-2 rounded-none border-t">
+          <CommandInput
+            value={search}
+            onValueChange={setSearch}
+            placeholder={t("designEditor.addLocalhostScreen.searchPlaceholder")}
+          />
+          <CommandList>
+            {filteredRoutes.length === 0 && !showCustomPathOption ? (
+              <CommandEmpty>
+                {t("designEditor.addLocalhostScreen.noRoutes")}
+              </CommandEmpty>
+            ) : null}
+            <CommandGroup>
+              {filteredRoutes.map((route) => (
+                <CommandItem
+                  key={route.path}
+                  value={route.path}
+                  className="cursor-pointer"
+                  onSelect={() => handleAdd(route.path)}
+                >
+                  <span className="flex min-w-0 flex-1 flex-col">
+                    <span className="truncate font-medium">{route.path}</span>
+                    {route.title ? (
+                      <span className="truncate text-xs text-muted-foreground">
+                        {route.title}
+                      </span>
+                    ) : null}
+                  </span>
+                </CommandItem>
+              ))}
+              {showCustomPathOption ? (
+                <CommandItem
+                  value={customPath}
+                  className={cn(
+                    "cursor-pointer",
+                    filteredRoutes.length > 0 && "mt-1 border-t pt-2",
+                  )}
+                  onSelect={() => handleAdd(customPath)}
+                >
+                  <IconPlus className="size-4" />
+                  {t("designEditor.addLocalhostScreen.useCustomPath", {
+                    path: customPath,
+                  })}
+                </CommandItem>
+              ) : null}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -4108,7 +4108,7 @@ export function DesignCanvas({
       data-node-rewrite-canvas-target={
         nodeRewriteCanvasTarget ? "true" : undefined
       }
-      className="design-canvas-iframe-wrapper relative inline-block ring-1 ring-border/60 shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_8px_24px_-12px_rgba(0,0,0,0.45)]"
+      className="design-canvas-iframe-wrapper relative inline-block ring-1 ring-border/60"
       onDragEnter={handleWrapperDragEnter}
       onDragOver={handleWrapperDragOver}
       onDragLeave={handleWrapperDragLeave}

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

@@ -9450,7 +9450,7 @@ const Screen = memo(function Screen({
           data-file-drag-over={isFileDragOver || undefined}
           data-cull-tier={cullTier}
           className={cn(
-            "relative block h-full w-full overflow-hidden rounded-[inherit] bg-white shadow-2xl ring-1 ring-inset ring-border transition-colors",
+            "relative block h-full w-full overflow-hidden rounded-[inherit] bg-white ring-1 ring-inset ring-border transition-colors",
             isFileDragOver &&
               "ring-2 ring-[var(--design-editor-accent-color)] ring-inset",
           )}
@@ -10125,7 +10125,7 @@ function BreakpointPreviewRow({
               <span
                 data-screen-content
                 data-cull-tier={cullTier}
-                className="relative block h-full w-full overflow-hidden rounded-[inherit] bg-white shadow-2xl ring-1 ring-inset ring-border"
+                className="relative block h-full w-full overflow-hidden rounded-[inherit] bg-white ring-1 ring-inset ring-border"
                 style={{
                   visibility: isCulled ? "hidden" : undefined,
                   contentVisibility: isCulled ? "hidden" : undefined,

package/corpus/templates/design/app/entry.client.tsx

@@ -1,8 +1,11 @@
 import { captureException } from "@agent-native/core/client/analytics";
 import { appBasePath } from "@agent-native/core/client/api-path";
+import { installRouteChunkRecovery } from "@agent-native/core/client/route-chunk-recovery";
 import { hydrateRoot } from "react-dom/client";
 import { HydratedRouter } from "react-router/dom";
 
+installRouteChunkRecovery();
+
 const basePath = appBasePath();
 const pathname = window.location.pathname;
 const routerBasePath =