@agent-native/core 0.87.0 → 0.90.1

package/corpus/templates/clips/desktop/src/overlays/finalizing.tsx

@@ -1,4 +1,6 @@
+import { invoke } from "@tauri-apps/api/core";
 import { listen } from "@tauri-apps/api/event";
+import { open as openExternal } from "@tauri-apps/plugin-shell";
 import { useEffect, useState } from "react";
 
 type NativeUploadProgress = {
@@ -13,6 +15,14 @@ type ProcessingProgress = {
   progress?: number | null;
 };
 
+type NativeUploadFinished = {
+  recordingId?: string;
+  ok?: boolean;
+  viewUrl?: string;
+  error?: string | null;
+  localFilePath?: string | null;
+};
+
 /**
  * Full-screen transparent feedback overlay. Rendered the moment the user
  * clicks Stop on the recording toolbar and kept visible until the browser
@@ -36,8 +46,33 @@ export function Finalizing() {
   useEffect(() => {
     let disposed = false;
     let unlisten: (() => void) | null = null;
+    let unlistenFinished: (() => void) | null = null;
+    let completionTimer: ReturnType<typeof window.setTimeout> | null = null;
+    let openingWatchdog: ReturnType<typeof window.setTimeout> | null = null;
+    let finishedHandled = false;
+    const clearCompletionTimer = () => {
+      if (completionTimer) {
+        window.clearTimeout(completionTimer);
+        completionTimer = null;
+      }
+    };
+    const clearOpeningWatchdog = () => {
+      if (openingWatchdog) {
+        window.clearTimeout(openingWatchdog);
+        openingWatchdog = null;
+      }
+    };
     listen<NativeUploadProgress>("clips:native-upload-progress", (event) => {
       const payload = event.payload ?? {};
+      if (payload.stage === "opening" && payload.progress === 1) {
+        clearOpeningWatchdog();
+        openingWatchdog = window.setTimeout(() => {
+          void invoke("show_popover").catch(() => {});
+          void invoke("hide_finalizing").catch(() => {});
+        }, 15000);
+      } else if (payload.stage !== "opening") {
+        clearOpeningWatchdog();
+      }
       setProgress({
         stage: payload.stage,
         progress:
@@ -55,9 +90,64 @@ export function Finalizing() {
         unlisten = u;
       })
       .catch(() => {});
+
+    const claimNativeOpen = async (
+      recordingId: string | undefined,
+    ): Promise<boolean> => {
+      if (!recordingId) return true;
+      return invoke<boolean>("native_fullscreen_claim_upload_open", {
+        recordingId,
+      }).catch(() => true);
+    };
+
+    const handleFinished = (payload: NativeUploadFinished) => {
+      if (disposed || finishedHandled) return;
+      finishedHandled = true;
+      clearCompletionTimer();
+      clearOpeningWatchdog();
+      if (payload.ok && payload.viewUrl) {
+        setProgress({ stage: "opening", progress: 1 });
+        completionTimer = window.setTimeout(() => {
+          void claimNativeOpen(payload.recordingId).then((claimed) => {
+            if (!claimed || disposed) return;
+            void openExternal(payload.viewUrl as string).catch(() => {});
+            void invoke("hide_finalizing").catch(() => {});
+          });
+        }, 1500);
+        return;
+      }
+
+      setProgress({ stage: "failed", progress: 1 });
+      completionTimer = window.setTimeout(() => {
+        void invoke("show_popover").catch(() => {});
+        void invoke("hide_finalizing").catch(() => {});
+      }, 2500);
+    };
+
+    listen<NativeUploadFinished>("clips:native-upload-finished", (event) => {
+      handleFinished(event.payload ?? {});
+    })
+      .then((u) => {
+        if (disposed) {
+          u();
+          return;
+        }
+        unlistenFinished = u;
+        void invoke<NativeUploadFinished | null>(
+          "native_fullscreen_take_upload_finished",
+        )
+          .then((payload) => {
+            if (payload) handleFinished(payload);
+          })
+          .catch(() => {});
+      })
+      .catch(() => {});
     return () => {
       disposed = true;
+      clearCompletionTimer();
+      clearOpeningWatchdog();
       unlisten?.();
+      unlistenFinished?.();
     };
   }, []);
 

package/corpus/templates/clips/desktop/src/overlays/flow-bar.tsx

@@ -1,5 +1,4 @@
 import { IconX } from "@tabler/icons-react";
-import { invoke } from "@tauri-apps/api/core";
 import { emit, listen } from "@tauri-apps/api/event";
 import { useEffect, useRef, useState } from "react";
 
@@ -136,12 +135,11 @@ export function FlowBar() {
 
   const handleCancel = () => {
     // Broadcast to the popover webview where voice-dictation.ts lives —
-    // it will abort any in-flight transcribe, stop recording, and hide
-    // the bar without pasting text.
+    // it will abort any in-flight transcribe, stop recording, hide the
+    // bar without pasting text, and own the delayed defensive re-hide
+    // (gated on no new session having started since) so a fast re-press
+    // right after cancel doesn't hide a brand-new session's bar (R21).
     emit("voice:cancel").catch(() => {});
-    window.setTimeout(() => {
-      invoke("hide_flow_bar").catch(() => {});
-    }, 250);
   };
 
   return (

package/corpus/templates/clips/desktop/src/overlays/onboarding.tsx

@@ -1,21 +1,124 @@
+import { IconCircleCheck, IconCircleOff } from "@tabler/icons-react";
 import { invoke } from "@tauri-apps/api/core";
-import { useState } from "react";
+import { open as openExternal } from "@tauri-apps/plugin-shell";
+import { useEffect, useState } from "react";
+
+import { isMacPlatform } from "../lib/platform";
+
+type PermissionPane =
+  | "microphone"
+  | "speech"
+  | "accessibility"
+  | "input-monitoring";
+
+type PermissionStatuses = {
+  screen: boolean;
+  camera: boolean;
+  microphone: boolean;
+  speech: boolean;
+  accessibility: boolean;
+  inputMonitoring: boolean;
+};
+
+const PERMISSION_CARDS: Array<{
+  pane: PermissionPane;
+  key: keyof PermissionStatuses;
+  name: string;
+  desc: string;
+}> = [
+  {
+    pane: "microphone",
+    key: "microphone",
+    name: "Microphone",
+    desc: "Needed to hear you for dictation and meeting transcripts.",
+  },
+  {
+    pane: "speech",
+    key: "speech",
+    name: "Speech Recognition",
+    desc: "Turns your voice into text on-device.",
+  },
+  {
+    pane: "accessibility",
+    key: "accessibility",
+    name: "Accessibility",
+    desc: "Lets Clips paste dictated text into other apps.",
+  },
+  {
+    pane: "input-monitoring",
+    key: "inputMonitoring",
+    name: "Input Monitoring",
+    desc: "Only needed for the hold-Fn dictation shortcut.",
+  },
+];
+
+// Fallback deep-links when the native `open_macos_privacy_settings` command
+// fails — same URLs the main app window uses.
+const MACOS_PRIVACY_URLS: Record<PermissionPane, string> = {
+  microphone:
+    "x-apple.systempreferences:com.apple.preference.security?Privacy_Microphone",
+  speech:
+    "x-apple.systempreferences:com.apple.preference.security?Privacy_SpeechRecognition",
+  accessibility:
+    "x-apple.systempreferences:com.apple.preference.security?Privacy_Accessibility",
+  "input-monitoring":
+    "x-apple.systempreferences:com.apple.preference.security?Privacy_ListenEvent",
+};
+
+function openPermissionSettings(pane: PermissionPane): void {
+  invoke("open_macos_privacy_settings", { pane }).catch(() => {
+    openExternal(MACOS_PRIVACY_URLS[pane]).catch((err) => {
+      console.error("[onboarding] open privacy settings failed", err);
+    });
+  });
+}
 
 /**
- * Feature selection screen shown on first launch. Full-screen overlay with
- * a solid dark background — NOT transparent like countdown/finalizing.
+ * First-launch overlay. Full-screen with a solid dark background — NOT
+ * transparent like countdown/finalizing.
+ *
+ * Two steps:
+ *   1. Feature selection — three cards with checkboxes (all checked by
+ *      default).
+ *   2. Permissions (macOS, when Voice Dictation or Meetings is enabled) —
+ *      live permission-status cards polled every 2s so they flip to granted
+ *      as the user works through System Settings. Never blocks: the primary
+ *      button always continues.
  *
- * Three feature cards with checkboxes (all checked by default). "Get Started"
- * calls `set_feature_config` with the chosen features + `onboardingComplete:
- * true`, then opens the popover via `show_popover`.
+ * Finishing calls `set_feature_config` with the chosen features +
+ * `onboardingComplete: true`, then opens the popover via `show_popover`.
  */
 export function Onboarding() {
   const [clips, setClips] = useState(true);
   const [meetings, setMeetings] = useState(true);
   const [voice, setVoice] = useState(true);
   const [submitting, setSubmitting] = useState(false);
+  const [step, setStep] = useState<"features" | "permissions">("features");
+  const [statuses, setStatuses] = useState<PermissionStatuses | null>(null);
+
+  const needsPermissionsStep = (voice || meetings) && isMacPlatform();
+
+  useEffect(() => {
+    if (step !== "permissions") return;
+    let cancelled = false;
+    const check = () => {
+      invoke<PermissionStatuses>("check_permission_statuses")
+        .then((next) => {
+          if (!cancelled) setStatuses(next);
+        })
+        .catch(() => {
+          // Command unavailable — leave statuses null (cards show no status).
+        });
+    };
+    check();
+    const id = setInterval(check, 2_000);
+    return () => {
+      cancelled = true;
+      clearInterval(id);
+    };
+  }, [step]);
 
-  async function handleGetStarted() {
+  async function finish() {
     if (submitting) return;
     setSubmitting(true);
     try {
@@ -33,6 +136,9 @@ export function Onboarding() {
         },
       });
       await invoke("show_popover");
+      // Close the onboarding window itself — show_popover only opens the
+      // popover, it doesn't know an onboarding window exists to dismiss.
+      await invoke("hide_onboarding_window");
     } catch (err) {
       console.error(
         "[onboarding] set_feature_config / show_popover failed",
@@ -42,6 +148,101 @@ export function Onboarding() {
     }
   }
 
+  function handleFeaturesContinue() {
+    if (needsPermissionsStep) {
+      setStep("permissions");
+      return;
+    }
+    void finish();
+  }
+
+  if (step === "permissions") {
+    const allGranted =
+      statuses !== null && PERMISSION_CARDS.every((card) => statuses[card.key]);
+    return (
+      <div className="onboarding-root">
+        <div className="onboarding-card">
+          <h1 className="onboarding-title">Permissions</h1>
+          <p className="onboarding-subtitle">
+            Grant these in System Settings — Clips updates automatically
+          </p>
+
+          <div className="onboarding-features">
+            {PERMISSION_CARDS.map((card) => {
+              const granted = statuses ? statuses[card.key] : null;
+              return (
+                <div
+                  className="onboarding-feature"
+                  key={card.pane}
+                  style={{ cursor: "default" }}
+                >
+                  <span
+                    aria-label={
+                      granted === null
+                        ? undefined
+                        : granted
+                          ? "Granted"
+                          : "Not granted"
+                    }
+                    style={{
+                      display: "inline-flex",
+                      flexShrink: 0,
+                      marginTop: 1,
+                      color: granted ? "#4ade80" : "#a3a3a3",
+                    }}
+                  >
+                    {granted ? (
+                      <IconCircleCheck size={18} stroke={2} />
+                    ) : (
+                      <IconCircleOff size={18} stroke={2} />
+                    )}
+                  </span>
+                  <div className="onboarding-feature-text">
+                    <span className="onboarding-feature-name">{card.name}</span>
+                    <span className="onboarding-feature-desc">{card.desc}</span>
+                  </div>
+                  {!granted ? (
+                    <button
+                      type="button"
+                      onClick={() => openPermissionSettings(card.pane)}
+                      style={{
+                        marginLeft: "auto",
+                        alignSelf: "center",
+                        flexShrink: 0,
+                        padding: "5px 10px",
+                        borderRadius: 8,
+                        border: "1px solid rgba(255, 255, 255, 0.15)",
+                        background: "rgba(255, 255, 255, 0.08)",
+                        color: "#f5f5f5",
+                        fontSize: 12,
+                        fontWeight: 500,
+                        cursor: "pointer",
+                      }}
+                    >
+                      Open
+                    </button>
+                  ) : null}
+                </div>
+              );
+            })}
+          </div>
+
+          <button
+            className="onboarding-cta"
+            onClick={() => void finish()}
+            disabled={submitting}
+          >
+            {submitting
+              ? "Setting up..."
+              : allGranted
+                ? "Get Started"
+                : "Continue anyway"}
+          </button>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="onboarding-root">
       <div className="onboarding-card">
@@ -97,10 +298,14 @@ export function Onboarding() {
 
         <button
           className="onboarding-cta"
-          onClick={handleGetStarted}
+          onClick={handleFeaturesContinue}
           disabled={submitting}
         >
-          {submitting ? "Setting up..." : "Get Started"}
+          {submitting
+            ? "Setting up..."
+            : needsPermissionsStep
+              ? "Continue"
+              : "Get Started"}
         </button>
       </div>
     </div>

package/corpus/templates/clips/desktop/src/overlays/recording-pill.tsx

@@ -250,23 +250,25 @@ export function RecordingPill() {
     };
   }, [paused]);
 
-  // Dual-stream waveform — one bar group per source. When system-audio
-  // hasn't emitted any levels yet (e.g. dictation-only flow), the system
-  // canvas is hidden by the JSX below, but the rAF loop still runs over
-  // whichever canvas refs are mounted.
+  // Dual-stream "dancing bars" meter — one discrete vertical-bar group per
+  // source (Granola/Wispr-style VU meter, not a continuous waveform line).
+  // When system-audio hasn't emitted any levels yet (e.g. dictation-only
+  // flow), the system canvas is hidden by the JSX below, but the rAF loop
+  // still runs over whichever canvas refs are mounted.
   useEffect(() => {
-    const N_PTS = 8;
+    const N_BARS = 14;
     const setups: Array<{
       W: number;
       H: number;
       centerY: number;
       ctx2d: CanvasRenderingContext2D;
       rng: number[];
-      pts: Array<{ x: number; y: number }>;
       grad: CanvasGradient;
       levelRef: React.MutableRefObject<number>;
       shadowColor: string;
       gain: number;
+      barWidth: number;
+      gap: number;
     }> = [];
 
     const mount = (
@@ -293,22 +295,22 @@ export function RecordingPill() {
       grad.addColorStop(0.9, color);
       grad.addColorStop(1, color0);
       const centerY = H / 2;
-      // Pre-allocate pts; mutated in tick to avoid per-frame allocation.
-      const pts = Array.from({ length: N_PTS }, (_, i) => ({
-        x: (i / (N_PTS - 1)) * W,
-        y: centerY,
-      }));
+      // Gap takes ~35% of each bar's slot, matching a "dancing bars" density.
+      const slot = W / N_BARS;
+      const gap = Math.max(1, slot * 0.35);
+      const barWidth = Math.max(1, slot - gap);
       setups.push({
         W,
         H,
         centerY,
         ctx2d,
-        rng: Array(N_PTS).fill(0.5),
-        pts,
+        rng: Array(N_BARS).fill(0.5),
         grad,
         levelRef,
         shadowColor,
         gain,
+        barWidth,
+        gap,
       });
     };
 
@@ -329,55 +331,38 @@ export function RecordingPill() {
       2.0,
     );
 
-    // Hoisted outside tick — no closure recreation per frame.
-    const drawWavePath = (
-      ctx2d: CanvasRenderingContext2D,
-      pts: Array<{ x: number; y: number }>,
-      W: number,
-    ) => {
-      ctx2d.moveTo(0, pts[0].y);
-      for (let i = 0; i < pts.length - 1; i += 1) {
-        const mx = (pts[i].x + pts[i + 1].x) / 2;
-        const my = (pts[i].y + pts[i + 1].y) / 2;
-        ctx2d.quadraticCurveTo(pts[i].x, pts[i].y, mx, my);
-      }
-      ctx2d.lineTo(W, pts[pts.length - 1].y);
-    };
-
     const startMs = Date.now();
     const tick = () => {
       // Modulo prevents float precision loss on long recordings.
       const t = (Date.now() - startMs) % 1_000_000;
       for (const s of setups) {
         const target = Math.min(1, s.levelRef.current * s.gain);
-        for (let i = 0; i < N_PTS; i += 1) {
-          const phase = t * 0.004 + i * (Math.PI * 0.65);
-          const waveTarget = 0.5 + Math.sin(phase) * target * 0.42;
-          s.rng[i] = s.rng[i] * 0.8 + waveTarget * 0.2;
-          s.pts[i].y = s.centerY - (s.rng[i] - 0.5) * s.H * 0.88;
-        }
 
         s.ctx2d.clearRect(0, 0, s.W, s.H);
-
-        // Fill between wave and center line.
-        s.ctx2d.beginPath();
-        drawWavePath(s.ctx2d, s.pts, s.W);
-        s.ctx2d.lineTo(s.W, s.centerY);
-        s.ctx2d.lineTo(0, s.centerY);
-        s.ctx2d.closePath();
-        s.ctx2d.globalAlpha = 0.2;
         s.ctx2d.fillStyle = s.grad;
-        s.ctx2d.fill();
-        s.ctx2d.globalAlpha = 1;
-
-        // Stroke the wave line.
-        s.ctx2d.beginPath();
-        drawWavePath(s.ctx2d, s.pts, s.W);
-        s.ctx2d.lineWidth = 1.5;
-        s.ctx2d.strokeStyle = s.grad;
         s.ctx2d.shadowColor = s.shadowColor;
-        s.ctx2d.shadowBlur = 5;
-        s.ctx2d.stroke();
+        s.ctx2d.shadowBlur = 4;
+
+        for (let i = 0; i < N_BARS; i += 1) {
+          const phase = t * 0.005 + i * (Math.PI * 0.65);
+          // Low idle baseline (~12% height) when silent; rises toward the
+          // full bar height as level approaches 1.
+          const barTarget =
+            0.12 + Math.sin(phase) * 0.5 * target + target * 0.38;
+          s.rng[i] = s.rng[i] * 0.75 + Math.max(0.06, barTarget) * 0.25;
+
+          const h = Math.min(1, s.rng[i]) * s.H * 0.9;
+          const x = i * (s.barWidth + s.gap) + s.gap / 2;
+          const y = s.centerY - h / 2;
+          const radius = Math.min(s.barWidth / 2, 2);
+          s.ctx2d.beginPath();
+          if (typeof s.ctx2d.roundRect === "function") {
+            s.ctx2d.roundRect(x, y, s.barWidth, h, radius);
+          } else {
+            s.ctx2d.rect(x, y, s.barWidth, h);
+          }
+          s.ctx2d.fill();
+        }
         s.ctx2d.shadowBlur = 0;
       }
       rafRef.current = requestAnimationFrame(tick);

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

@@ -2186,7 +2186,7 @@ body[data-clips-route="recording-pill"] #root {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: transparent;
+  background: rgba(0, 0, 0, 0.42);
   pointer-events: none;
 }
 

package/corpus/templates/clips/desktop/src-tauri/Cargo.toml

@@ -26,6 +26,7 @@ tauri-build = { version = "2", features = [] }
 
 [dependencies]
 tauri = { version = "2", features = [
+  "devtools",
   "tray-icon",
   "image-png",
   "macos-private-api",
@@ -71,6 +72,12 @@ libc = "0.2"
 core-foundation = "0.10"
 core-graphics = "0.25"
 objc2 = { version = "0.6", features = ["exception"] }
+# Grapheme-cluster-aware chunking for voice-dictation Unicode typing in
+# terminal apps, so a chunk boundary never splits a multi-scalar emoji/
+# combining-mark sequence across two synthetic keyboard events. Already
+# present transitively (via keyboard-types) at 1.13.2, the current latest
+# minor at the time of writing (verified via `cargo info unicode-segmentation`).
+unicode-segmentation = "1.13"
 # Native on-device dictation via SFSpeechRecognizer + AVAudioEngine.
 # Powers the "browser" voice-dictation provider (free, instant, no API
 # key, no server round-trip — same engine WisprFlow uses for offline).