@agent-native/core 0.178.0 → 0.178.1-nightly-20260909221943

package/corpus/templates/clips/desktop/src/components/ui/switch.tsx

@@ -12,32 +12,50 @@ const switchVariants = cva(
         default: "h-[1.15rem] w-8",
         sm: "h-3.5 w-6",
       },
+      tone: {
+        default: "",
+        success:
+          "data-[state=checked]:border-success data-[state=checked]:bg-success data-[state=unchecked]:border-border",
+      },
     },
     defaultVariants: {
       size: "default",
+      tone: "default",
     },
   },
 );
 
 const switchThumbVariants = cva(
   "pointer-events-none block rounded-full bg-background shadow-sm ring-1 ring-foreground/20 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground",
+  {
+    variants: {
+      tone: {
+        default: "",
+        success:
+          "data-[state=checked]:bg-success-foreground dark:data-[state=checked]:bg-success-foreground",
+      },
+    },
+    defaultVariants: {
+      tone: "default",
+    },
+  },
 );
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> &
     VariantProps<typeof switchVariants>
->(({ className, size = "default", ...props }, ref) => (
+>(({ className, size = "default", tone = "default", ...props }, ref) => (
   <SwitchPrimitives.Root
     data-slot="switch"
     data-size={size}
-    className={cn(switchVariants({ size, className }))}
+    className={cn(switchVariants({ size, tone, className }))}
     {...props}
     ref={ref}
   >
     <SwitchPrimitives.Thumb
       data-slot="switch-thumb"
-      className={cn(switchThumbVariants())}
+      className={cn(switchThumbVariants({ tone }))}
     />
   </SwitchPrimitives.Root>
 ));

package/corpus/templates/clips/desktop/src/hooks/useMediaDevices.ts

@@ -1,11 +1,4 @@
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type MutableRefObject,
-} from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import {
   chooseFallbackAudioInput,
@@ -13,6 +6,7 @@ import {
   isSelectableAudioInputDevice,
   normalizedMediaDeviceId,
 } from "../../../shared/media-device-selection";
+import { getAudioStreamWithFallback } from "../lib/media-capture-constraints";
 import {
   isHardCapturePermissionError,
   MACOS_CAPTURE_PERMISSION_MESSAGE,
@@ -24,15 +18,6 @@ const MIC_KEY = "clips:last-mic-id";
 const CAM_LABEL_KEY = "clips:last-camera-label";
 const MIC_LABEL_KEY = "clips:last-mic-label";
 
-function rawMicConstraints(deviceId?: string): MediaTrackConstraints {
-  return {
-    ...(deviceId ? { deviceId: { exact: deviceId } } : {}),
-    echoCancellation: false,
-    noiseSuppression: false,
-    autoGainControl: false,
-  };
-}
-
 function concreteMediaDeviceId(value: string | null | undefined): string {
   const id = normalizedMediaDeviceId(value);
   return id && !isPseudoMediaDeviceId(id) ? id : "";
@@ -43,14 +28,30 @@ function isSelectableMediaDevice(device: MediaDeviceInfo): boolean {
 }
 
 interface Props {
-  // Mirrors whether the on-screen camera bubble owns the camera grant. While
-  // it does, this page must never probe getUserMedia itself.
-  bubbleActiveRef: MutableRefObject<boolean>;
+  microphoneEnabled: boolean;
   popoverVisible: boolean;
   setCameraError: (message: string | null) => void;
   setRecError: (message: string | null) => void;
 }
 
+export async function refreshMicrophoneAccess(
+  selectedMicId: string,
+  selectedMicLabel: string,
+): Promise<{ deviceId: string; label: string }> {
+  const stream = await getAudioStreamWithFallback(
+    selectedMicId,
+    selectedMicLabel,
+    false,
+  );
+  const track = stream.getAudioTracks()[0] ?? null;
+  const result = {
+    deviceId: concreteMediaDeviceId(track?.getSettings().deviceId),
+    label: track?.label ?? "",
+  };
+  stream.getTracks().forEach((candidate) => candidate.stop());
+  return result;
+}
+
 export interface MediaDevicesState {
   cameraId: string;
   setCameraId: (id: string) => void;
@@ -69,7 +70,7 @@ export interface MediaDevicesState {
 }
 
 export function useMediaDevices({
-  bubbleActiveRef,
+  microphoneEnabled,
   popoverVisible,
   setCameraError,
   setRecError,
@@ -107,8 +108,8 @@ export function useMediaDevices({
 
   // ---- device enumeration -------------------------------------------------
   // WebKit only returns full device labels after getUserMedia() has granted
-  // access once. Enumerating itself is safe; the unlock helper below is careful
-  // to never touch the OS default input just to populate labels.
+  // access once. Enumerating itself is safe; the unlock helper below only
+  // acquires audio while the visible microphone control is enabled.
   const loadDevices = useCallback(async () => {
     try {
       if (!navigator.mediaDevices?.enumerateDevices) return;
@@ -155,6 +156,18 @@ export function useMediaDevices({
     };
   }, [loadDevices]);
 
+  const refreshSelectedMicrophone = useCallback(async () => {
+    const activeMic = await refreshMicrophoneAccess(selectedMicId, micLabel);
+    if (
+      selectedMicId &&
+      activeMic.deviceId &&
+      activeMic.deviceId !== selectedMicId
+    ) {
+      setMicId("");
+      setMicLabel("");
+    }
+  }, [micLabel, selectedMicId]);
+
   const unlockDeviceLabels = useCallback(async () => {
     // Audio-only probe to unlock mic labels. We INTENTIONALLY skip video —
     // the on-screen camera bubble window owns the camera, and probing
@@ -163,26 +176,18 @@ export function useMediaDevices({
     // WebViews in the same process). Camera-label text is low-value
     // anyway; most machines have one.
     //
-    // Do not probe `audio: true` or WebKit's pseudo `default` device here.
-    // On macOS that opens the system default input, which can shove
-    // Bluetooth headphones into hands-free mode just from opening the Clips
-    // popover. If the user has picked a concrete mic, use that exact device;
-    // otherwise leave labels locked until a real user action needs access.
+    // The meter already needs an input while this control is visible. Reuse the
+    // recorder's fallback chain so a disconnected saved device cannot leave
+    // both the meter and the device list stranded until the user changes a
+    // selection. This may use the system default only after an exact saved
+    // device fails, or when the user has explicitly left the picker on Default.
     try {
-      if (!selectedMicId) {
-        await loadDevices();
-        return;
-      }
-      const s = await navigator.mediaDevices.getUserMedia({
-        audio: rawMicConstraints(selectedMicId),
-        video: false,
-      });
-      s.getTracks().forEach((t) => t.stop());
+      await refreshSelectedMicrophone();
     } catch {
       // permission denied — labels stay empty until the user grants
     }
     await loadDevices();
-  }, [loadDevices, selectedMicId]);
+  }, [loadDevices, refreshSelectedMicrophone]);
 
   const requestDeviceAccess = useCallback(
     async (kind: "camera" | "mic") => {
@@ -190,15 +195,15 @@ export function useMediaDevices({
         if (!navigator.mediaDevices?.getUserMedia) {
           throw new Error("Device selection is not available in this WebView.");
         }
-        const stream = await navigator.mediaDevices.getUserMedia(
-          kind === "camera"
-            ? { video: true, audio: false }
-            : {
-                audio: rawMicConstraints(selectedMicId || undefined),
-                video: false,
-              },
-        );
-        stream.getTracks().forEach((track) => track.stop());
+        if (kind === "camera") {
+          const stream = await navigator.mediaDevices.getUserMedia({
+            video: true,
+            audio: false,
+          });
+          stream.getTracks().forEach((track) => track.stop());
+        } else {
+          await refreshSelectedMicrophone();
+        }
         await loadDevices();
       } catch (err) {
         const message = err instanceof Error ? err.message : String(err);
@@ -221,20 +226,35 @@ export function useMediaDevices({
         await loadDevices();
       }
     },
-    [bubbleActiveRef, loadDevices, selectedMicId, setCameraError, setRecError],
+    [loadDevices, refreshSelectedMicrophone, setCameraError, setRecError],
   );
 
-  // Defer device-label unlocking until the popover is first shown. Even the
+  // Defer device-label unlocking until each visible popover session. Even the
   // selected-device probe can trigger a macOS permission dialog, so keep it
-  // attached to visible UI instead of firing on hidden webview mount.
+  // attached to visible UI instead of firing on hidden WebView mount.
   const deviceLabelsUnlocked = useRef(false);
   useEffect(() => {
     void loadDevices();
-    if (popoverVisible && !deviceLabelsUnlocked.current) {
+    if (!popoverVisible || !microphoneEnabled) {
+      deviceLabelsUnlocked.current = false;
+      return;
+    }
+    if (!deviceLabelsUnlocked.current) {
       deviceLabelsUnlocked.current = true;
       void unlockDeviceLabels();
     }
-  }, [loadDevices, unlockDeviceLabels, popoverVisible]);
+  }, [loadDevices, microphoneEnabled, popoverVisible, unlockDeviceLabels]);
+
+  // WebKit does not consistently emit `devicechange` inside a reused Tauri
+  // popover WebView. Keep the visible picker current without polling while the
+  // recorder UI is hidden.
+  useEffect(() => {
+    if (!popoverVisible) return;
+    const interval = window.setInterval(() => {
+      void loadDevices();
+    }, 2_000);
+    return () => window.clearInterval(interval);
+  }, [loadDevices, popoverVisible]);
 
   useEffect(() => {
     if (!micId || !isPseudoMediaDeviceId(micId) || mics.length === 0) return;

package/corpus/templates/clips/desktop/src/styles.css

@@ -65,10 +65,8 @@
   box-sizing: border-box;
 }
 
-/* Tauri window is `transparent: true` + `decorations: false`, so the HTML
-   paints the visible shape. The popover window is sized to the rounded panel
-   exactly; macOS derives a native shadow from the panel's alpha, giving us
-   the round-cornered chromeless popover with no transparent apron. */
+/* The main Tauri window is transparent and chromeless, so the HTML paints the
+   visible rounded popover while macOS supplies its shadow. */
 html,
 body {
   margin: 0;
@@ -519,8 +517,11 @@ body[data-clips-route]:not([data-clips-route="popover"]) #root {
   background: hsl(var(--ui-muted) / 0.55);
 }
 
-.row-off .row-icon,
-.row-label-muted {
+.row-on {
+  color: var(--fg);
+}
+
+.row-off {
   color: var(--fg-subtle);
 }
 
@@ -530,13 +531,15 @@ body[data-clips-route]:not([data-clips-route="popover"]) #root {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: var(--fg-muted);
+  color: inherit;
   flex-shrink: 0;
 }
 
-.media-device-row .row {
+.media-device-row .row,
+.system-audio-row {
   display: grid;
   grid-template-columns: 20px minmax(0, 1fr) 36px;
+  column-gap: 10px;
 }
 
 .row-main {
@@ -551,12 +554,13 @@ body[data-clips-route]:not([data-clips-route="popover"]) #root {
 }
 
 .system-audio-row {
-  display: grid;
-  grid-template-columns: 20px minmax(0, 1fr) 36px;
   align-items: center;
-  min-height: 36px;
-  padding: 0 10px 0 0;
-  color: var(--fg-muted);
+  min-height: 30px;
+  padding: 5px 10px;
+}
+
+.system-audio-icon {
+  transform: translateX(2px);
 }
 
 .system-audio-label {
@@ -567,21 +571,16 @@ body[data-clips-route]:not([data-clips-route="popover"]) #root {
   font-size: 13px;
 }
 
-.row-on .row-icon {
-  color: var(--fg);
-}
-
 /* Radix device picker trigger — the menu owns keyboard and focus behavior. */
 .row-button {
   width: 100%;
   min-width: 0;
-  min-width: 0;
   display: flex;
   align-items: center;
   gap: 6px;
   border: none;
   background: transparent;
-  color: var(--fg);
+  color: inherit;
   font-size: 13px;
   font-weight: 400;
   padding: 0;

package/corpus/templates/clips/desktop/src/tailwind.css

@@ -245,6 +245,7 @@
   --ui-ring: 0 0% 40%;
   /* macOS convention for an engaged switch, and the one accent the tray uses. */
   --ui-success: 142 71% 45%;
+  --ui-success-foreground: 0 0% 100%;
   /* Reserved for explicit "there is something new here" alerts and notices. */
   --ui-info: 217 91% 55%;
 }
@@ -271,6 +272,7 @@
     --ui-input: 0 0% 32%;
     --ui-ring: 0 0% 60%;
     --ui-success: 142 60% 52%;
+    --ui-success-foreground: 0 0% 100%;
     --ui-info: 217 91% 65%;
   }
 }
@@ -333,6 +335,7 @@
   --color-card-foreground: hsl(var(--ui-card-foreground));
 
   --color-success: hsl(var(--ui-success));
+  --color-success-foreground: hsl(var(--ui-success-foreground));
   --color-info: hsl(var(--ui-info));
 
   --radius-lg: var(--radius);

package/corpus/templates/clips/desktop/src-tauri/src/lib.rs

@@ -100,16 +100,24 @@ pub fn run() {
                     _ => {}
                 }
             }
-            // The popover and camera bubble are separate native windows. If
-            // the popover is closed before its webview emits the visibility
-            // event, tear down the bubble from the native lifecycle instead.
-            if window.label() == "popover"
-                && matches!(
-                    event,
-                    tauri::WindowEvent::CloseRequested { .. } | tauri::WindowEvent::Destroyed
-                )
-            {
-                clips::close_bubble_if_idle(window.app_handle());
+            // The popover and camera bubble are separate native windows. A
+            // native close hides the panel back to the tray instead of
+            // destroying the webview, so tray clicks and the app's second
+            // launch can show the same window again.
+            if window.label() == "popover" {
+                match event {
+                    tauri::WindowEvent::CloseRequested { api, .. } => {
+                        api.prevent_close();
+                        let app = window.app_handle();
+                        let _ = window.hide();
+                        clips::close_bubble_if_idle(&app);
+                        let _ = app.emit("clips:popover-visible", false);
+                    }
+                    tauri::WindowEvent::Destroyed => {
+                        clips::close_bubble_if_idle(window.app_handle());
+                    }
+                    _ => {}
+                }
             }
         })
         .invoke_handler(tauri::generate_handler![

package/corpus/templates/clips/desktop/src-tauri/src/util.rs

@@ -111,11 +111,9 @@ pub fn set_capture_included(window: &WebviewWindow) {
 
 pub fn build_popover_window(app: &mut tauri::App) -> Result<WebviewWindow, tauri::Error> {
     let app_handle = app.handle().clone();
-    // The window is sized to the visible panel EXACTLY — elevation comes from
-    // the native NSWindow shadow (shadow(true) below), which macOS derives
-    // from the drawn rounded panel's alpha. A transparent CSS-shadow apron is
-    // never used here: its invisible margin eats clicks and reads as dead
-    // space around the UI.
+    // The window is sized to the visible panel exactly. The HTML paints the
+    // rounded shape and macOS derives the native shadow from that alpha mask,
+    // so adding native decorations would create a second frame above it.
     WebviewWindowBuilder::new(app, "popover", WebviewUrl::App("index.html".into()))
         .title("Clips")
         .inner_size(

package/corpus/templates/design/.agents/skills/export-handoff/SKILL.md

@@ -20,9 +20,20 @@ How to export designs and generate handoff documentation for developers converti
   **This is not importable into Figma as editable vectors** — Figma cannot
   parse `foreignObject` content, so it stays an opaque embedded HTML blob.
   Use `export-design-as-figma-svg` (below) when the destination is Figma.
-- **PNG**: there is no PNG export action. Point the user to the editor's
-  download menu (Download PNG) — PNG export is a client-side rasterization of
-  the live canvas and is not exposed as an agent action.
+- **PNG**: `export-png` renders one stored HTML screen in headless Chromium and
+  uploads the PNG through the configured file provider. Pass `fileId`, or
+  `designId` plus `filename`, to select the screen. It returns a durable `url`
+  and suggested `filename`; `width` defaults to 1440px and `height` only sets
+  the responsive viewport because the export includes the screen's full page.
+
+  ```bash
+  pnpm action export-png --designId <designId> --fileId <fileId>
+  ```
+
+  If Chromium or file storage is unavailable, the action returns an explicit
+  failure instead of pretending that a downloadable image exists. The editor's
+  Download PNG remains the faithful client-side path for localhost/fusion
+  screens that are not stored HTML.
 - **Deploy preview**: `deploy-design-preview` triggers a preview deploy for a
   fusion-backed design branch. It requires the design's source to advertise
   the `deployPreview` capability (fusion tier) and Builder.io to be connected;

package/corpus/templates/design/AGENTS.md

@@ -40,7 +40,8 @@ Read the relevant skill before deeper work in that area.
 | `present-design-variants` | Generate 2-5 variants for the user to pick and refine |
 | `view-screen` | Re-read the current design or selected file when context is stale |
 | `navigate` | Move the UI to a design, file, or panel |
-| `export-html` / `export-zip` / `export-coding-handoff` / `export-design-as-figma-svg` | Hand off a finished design |
+| `export-png` | Export screen as PNG |
+| `export-html` / `export-zip` / `export-coding-handoff` / `export-design-as-figma-svg` | Export a finished design |
 
 ## Core Rules
 

package/corpus/templates/design/actions/export-png.ts

@@ -0,0 +1,119 @@
+import { defineAction, fail } from "@agent-native/core/action";
+import { z } from "zod";
+
+import takeDesignScreenshot from "./take-design-screenshot.js";
+
+function suggestedPngFilename(filename: string): string {
+  const base = filename
+    .replace(/\\/g, "/")
+    .split("/")
+    .pop()
+    ?.replace(/\.[^.]+$/, "")
+    .replace(/[^a-zA-Z0-9_-]/g, "-");
+  return `${base || "screen"}.png`;
+}
+
+export default defineAction({
+  description:
+    "Export one Design screen as a PNG image. Pass fileId, or pass designId " +
+    "and filename, to choose the screen. Returns a durable image URL; the " +
+    "screen is rendered at 1440px wide by default and full-page height.",
+  schema: z
+    .object({
+      designId: z
+        .string()
+        .optional()
+        .describe("Design project id. Required unless fileId is provided."),
+      fileId: z
+        .string()
+        .optional()
+        .describe(
+          "Specific design_files.id to export. Takes priority over designId and filename.",
+        ),
+      filename: z
+        .string()
+        .optional()
+        .default("index.html")
+        .describe(
+          "Screen filename when fileId is not provided. Defaults to index.html.",
+        ),
+      width: z.coerce
+        .number()
+        .int()
+        .min(200)
+        .max(3840)
+        .optional()
+        .describe("Render viewport width in pixels. Defaults to 1440."),
+      height: z.coerce
+        .number()
+        .int()
+        .min(200)
+        .max(4096)
+        .optional()
+        .describe(
+          "Optional viewport height in pixels. Full-page export is not cropped to this height.",
+        ),
+    })
+    .refine(({ designId, fileId }) => Boolean(designId || fileId), {
+      message: "Provide designId or fileId to select a screen.",
+      path: ["designId"],
+    }),
+  readOnly: false,
+  http: { method: "POST" },
+  run: async ({ designId, fileId, filename, width, height }, ctx) => {
+    const result = await takeDesignScreenshot.run(
+      {
+        ...(designId ? { designId } : {}),
+        ...(fileId ? { fileId } : {}),
+        filename,
+        widths: [width ?? 1440],
+        ...(height === undefined ? {} : { heights: [height] }),
+      },
+      ctx,
+    );
+
+    if (result.ok !== true) return result;
+
+    const screenshot = result.screenshots?.[0];
+    if (!screenshot) {
+      fail("The PNG renderer did not return an image.", {
+        errorCode: "png_export_empty",
+      });
+    }
+    if (!screenshot.url) {
+      if (screenshot.uploadError?.code === "file_upload_failed") {
+        fail(
+          "The PNG was rendered but its upload failed. Check the configured file storage provider and retry.",
+          {
+            errorCode: "file_upload_failed",
+            details: { designId: result.designId, fileId: result.fileId },
+          },
+        );
+      }
+      fail(
+        "The PNG was rendered but could not be returned because file storage is not configured. " +
+          "Connect or reconnect Builder.io in Settings → File uploads, or register a custom file provider.",
+        {
+          errorCode: "file_storage_not_configured",
+          details: { designId: result.designId, fileId: result.fileId },
+        },
+      );
+    }
+
+    const screenFilename = result.filename ?? filename ?? "screen.html";
+
+    return {
+      ok: true,
+      designId: result.designId,
+      fileId: result.fileId,
+      screenFilename,
+      filename: suggestedPngFilename(screenFilename),
+      mimeType: "image/png",
+      url: screenshot.url,
+      bytes: screenshot.bytes,
+      viewport: screenshot.viewport,
+      diagnostics: screenshot.diagnostics,
+      capturedAt: result.capturedAt,
+    };
+  },
+});