@agent-native/core 0.175.4 → 0.175.5-nightly-20260827014436

package/corpus/templates/clips/app/components/recorder/microphone-visualizer.tsx

@@ -1,4 +1,5 @@
 import { useT } from "@agent-native/core/client/i18n";
+import { LiveWaveform } from "@shared/live-waveform";
 import { useCallback, useEffect, useRef, useState } from "react";
 
 import { Button } from "@/components/ui/button";
@@ -142,13 +143,13 @@ export function MicrophoneVisualizer({
   onSignalChange,
 }: MicrophoneVisualizerProps) {
   const t = useT();
-  const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const rafRef = useRef<number | null>(null);
   const runIdRef = useRef(0);
   const streamRef = useRef<MediaStream | null>(null);
   const audioContextRef = useRef<AudioContext | null>(null);
   const sourceRef = useRef<MediaStreamAudioSourceNode | null>(null);
   const signalRef = useRef(false);
+  const [level, setLevel] = useState<number | null>(null);
   const lastSignalAtRef = useRef(0);
   const previousDeviceIdRef = useRef(deviceId);
 
@@ -166,49 +167,6 @@ export function MicrophoneVisualizer({
     [onSignalChange],
   );
 
-  const syncCanvasSize = useCallback((canvas: HTMLCanvasElement) => {
-    const rect = canvas.getBoundingClientRect();
-    const dpr = window.devicePixelRatio || 1;
-    const width = Math.max(1, Math.floor(rect.width * dpr));
-    const height = Math.max(1, Math.floor(rect.height * dpr));
-    if (canvas.width !== width || canvas.height !== height) {
-      canvas.width = width;
-      canvas.height = height;
-    }
-    return { width, height, dpr };
-  }, []);
-
-  const drawIdle = useCallback(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return;
-    const { width, height, dpr } = syncCanvasSize(canvas);
-    ctx.clearRect(0, 0, width, height);
-
-    ctx.strokeStyle = "rgba(14, 165, 233, 0.24)";
-    ctx.lineWidth = Math.max(1, dpr);
-    ctx.beginPath();
-    ctx.moveTo(0, height / 2);
-    ctx.lineTo(width, height / 2);
-    ctx.stroke();
-
-    ctx.strokeStyle = "rgba(14, 165, 233, 0.42)";
-    ctx.lineWidth = Math.max(1.75, 1.75 * dpr);
-    ctx.beginPath();
-    const points = 72;
-    for (let i = 0; i <= points; i++) {
-      const x = (i / points) * width;
-      const envelope = Math.sin((i / points) * Math.PI);
-      const y =
-        height / 2 +
-        Math.sin((i / points) * Math.PI * 6) * envelope * height * 0.13;
-      if (i === 0) ctx.moveTo(x, y);
-      else ctx.lineTo(x, y);
-    }
-    ctx.stroke();
-  }, [syncCanvasSize]);
-
   const stopCurrent = useCallback(
     (emitSignal = true) => {
       if (rafRef.current !== null) {
@@ -234,21 +192,15 @@ export function MicrophoneVisualizer({
       } else {
         signalRef.current = false;
       }
-      drawIdle();
     },
-    [drawIdle, setSignal],
+    [setSignal],
   );
 
   const drawLive = useCallback(
     (analyser: AnalyserNode) => {
-      const canvas = canvasRef.current;
-      if (!canvas) return;
-      const ctx = canvas.getContext("2d");
-      if (!ctx) return;
       const data = new Uint8Array(analyser.fftSize);
 
       const draw = () => {
-        const { width, height, dpr } = syncCanvasSize(canvas);
         analyser.getByteTimeDomainData(data);
 
         let sum = 0;
@@ -265,44 +217,16 @@ export function MicrophoneVisualizer({
           setSignal(false);
         }
 
-        ctx.clearRect(0, 0, width, height);
-        ctx.strokeStyle = "rgba(14, 165, 233, 0.18)";
-        ctx.lineWidth = Math.max(1, dpr);
-        ctx.beginPath();
-        ctx.moveTo(0, height / 2);
-        ctx.lineTo(width, height / 2);
-        ctx.stroke();
-
-        const gradient = ctx.createLinearGradient(0, 0, width, 0);
-        gradient.addColorStop(0, "rgba(14, 165, 233, 0.74)");
-        gradient.addColorStop(0.5, "rgba(34, 211, 238, 1)");
-        gradient.addColorStop(1, "rgba(37, 99, 235, 0.82)");
-        ctx.strokeStyle = gradient;
-        ctx.lineWidth = Math.max(2.25 * dpr, Math.min(6 * dpr, rms * 34 * dpr));
-        ctx.shadowColor = "rgba(14, 165, 233, 0.35)";
-        ctx.shadowBlur = Math.max(4 * dpr, Math.min(12 * dpr, rms * 80 * dpr));
-        ctx.lineJoin = "round";
-        ctx.lineCap = "round";
-        ctx.beginPath();
-        const step = width / Math.max(1, data.length - 1);
-        const gain = Math.min(5.5, 2.6 + rms * 24);
-        for (let i = 0; i < data.length; i++) {
-          const x = i * step;
-          const normalized = ((data[i] - 128) / 128) * gain;
-          const y =
-            height / 2 + Math.max(-1, Math.min(1, normalized)) * height * 0.42;
-          if (i === 0) ctx.moveTo(x, y);
-          else ctx.lineTo(x, y);
-        }
-        ctx.stroke();
-        ctx.shadowBlur = 0;
-
+        // The analyser is the only part of the meter this app owns; the shape
+        // and the level math are shared with the desktop app so a microphone
+        // reads the same here as it does in the recorder and the meeting pill.
+        setLevel(rms);
         rafRef.current = requestAnimationFrame(draw);
       };
 
       draw();
     },
-    [setSignal, syncCanvasSize],
+    [setSignal],
   );
 
   const stopTest = useCallback(() => {
@@ -415,17 +339,8 @@ export function MicrophoneVisualizer({
       setError(message);
       setStatus("error");
       onStatusChange?.("error", { error: message });
-      drawIdle();
     }
-  }, [
-    deviceId,
-    disabled,
-    drawIdle,
-    drawLive,
-    onStatusChange,
-    setSignal,
-    stopCurrent,
-  ]);
+  }, [deviceId, disabled, drawLive, onStatusChange, setSignal, stopCurrent]);
 
   useEffect(() => {
     if (disabled) {
@@ -433,7 +348,6 @@ export function MicrophoneVisualizer({
       if (status === "live" || status === "starting") {
         stopTest();
       } else {
-        drawIdle();
       }
       return;
     }
@@ -441,14 +355,14 @@ export function MicrophoneVisualizer({
     previousDeviceIdRef.current = deviceId;
     if (status === "live" || status === "starting") {
       void startTest();
-    } else {
-      drawIdle();
     }
-  }, [deviceId, disabled, drawIdle, startTest, status, stopTest]);
+  }, [deviceId, disabled, startTest, status, stopTest]);
 
+  // Idle and error both rest the meter by holding `level` at null, so there is
+  // nothing left to draw on a state change.
   useEffect(() => {
-    if (status === "idle" || status === "error") drawIdle();
-  }, [drawIdle, status]);
+    if (status === "idle" || status === "error") setLevel(null);
+  }, [status]);
 
   useEffect(() => {
     return () => {
@@ -480,11 +394,18 @@ export function MicrophoneVisualizer({
             live && hasSignal ? "border-foreground/35" : "border-border",
           )}
         >
-          <canvas
-            ref={canvasRef}
+          <span
+            role="img"
             aria-label={t("clipsFinalRaw.selectedMicrophoneWaveform")}
-            className="h-full w-full opacity-75"
-          />
+            className="absolute inset-0 flex items-center justify-center"
+          >
+            <LiveWaveform
+              level={live ? level : null}
+              bars={18}
+              barWidth={2}
+              barGap={3}
+            />
+          </span>
           {statusLabel ? (
             <span
               className={cn(

package/corpus/templates/clips/app/components/workspace/members-list.tsx

@@ -5,6 +5,7 @@ import { useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
 import { toast } from "sonner";
 
+import { ClipsAvatar } from "@/components/clips-avatar";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -15,7 +16,6 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
-import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -152,11 +152,13 @@ export function MembersList({
                 <TableRow key={m.id}>
                   <TableCell>
                     <div className="flex items-center gap-2 min-w-0">
-                      <Avatar className="h-8 w-8 flex-shrink-0">
-                        <AvatarFallback className="text-xs bg-primary text-primary-foreground">
-                          {initials(m.email)}
-                        </AvatarFallback>
-                      </Avatar>
+                      <ClipsAvatar
+                        email={m.email}
+                        alt={m.email}
+                        fallback={initials(m.email)}
+                        className="h-8 w-8 flex-shrink-0"
+                        fallbackClassName="text-xs bg-primary text-primary-foreground"
+                      />
                       <div className="min-w-0">
                         <div className="truncate font-medium flex items-center gap-1.5">
                           {m.email}

package/corpus/templates/clips/app/components/workspace/notifications-list.tsx

@@ -9,7 +9,7 @@ import {
 } from "@tabler/icons-react";
 import { Link } from "react-router";
 
-import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { ClipsAvatar } from "@/components/clips-avatar";
 
 export type NotificationKind = "comment" | "reaction" | "mention" | "share";
 
@@ -62,11 +62,13 @@ export function NotificationsList({ items, onReply }: NotificationsListProps) {
     <ul className="divide-y">
       {items.map((item) => (
         <li key={item.id} className="py-3 flex items-start gap-3">
-          <Avatar className="h-9 w-9 flex-shrink-0">
-            <AvatarFallback className="text-xs bg-primary text-primary-foreground">
-              {initials(item.authorEmail)}
-            </AvatarFallback>
-          </Avatar>
+          <ClipsAvatar
+            email={item.authorEmail}
+            alt={item.authorEmail ?? t("clipsFinalRaw.someone")}
+            fallback={initials(item.authorEmail)}
+            className="h-9 w-9 flex-shrink-0"
+            fallbackClassName="text-xs bg-primary text-primary-foreground"
+          />
           <div className="min-w-0 flex-1">
             <div className="flex items-center gap-2 text-sm">
               <KindIcon kind={item.kind} />

package/corpus/templates/clips/app/components/workspace/top-creators-table.tsx

@@ -1,6 +1,6 @@
 import { useT } from "@agent-native/core/client/i18n";
 
-import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { ClipsAvatar } from "@/components/clips-avatar";
 import {
   Table,
   TableBody,
@@ -58,11 +58,13 @@ export function TopCreatorsTable({ rows }: TopCreatorsTableProps) {
             <TableRow key={row.email}>
               <TableCell>
                 <div className="flex items-center gap-2 min-w-0">
-                  <Avatar className="h-7 w-7 flex-shrink-0">
-                    <AvatarFallback className="text-xs bg-primary text-primary-foreground">
-                      {initials(row.email)}
-                    </AvatarFallback>
-                  </Avatar>
+                  <ClipsAvatar
+                    email={row.email}
+                    alt={row.email}
+                    fallback={initials(row.email)}
+                    className="h-7 w-7 flex-shrink-0"
+                    fallbackClassName="text-xs bg-primary text-primary-foreground"
+                  />
                   <span className="truncate">{row.email}</span>
                 </div>
               </TableCell>

package/corpus/templates/clips/app/routes/_app.meetings.$meetingId.tsx

@@ -28,6 +28,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { NavLink, useNavigate, useParams } from "react-router";
 import { toast } from "sonner";
 
+import { ClipsAvatar } from "@/components/clips-avatar";
 import { PageHeader } from "@/components/library/page-header";
 import {
   AttendeeStack,
@@ -52,7 +53,6 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -258,12 +258,13 @@ function ActionItemsByPerson({
       {grouped.map(([who, list]) => (
         <div key={who} className="space-y-1.5">
           <div className="flex items-center gap-2">
-            <Avatar className="h-5 w-5">
-              <AvatarImage alt={who} />
-              <AvatarFallback className="text-[9px]">
-                {attendeeInitials(who || t("meetingDetail.unassigned"))}
-              </AvatarFallback>
-            </Avatar>
+            <ClipsAvatar
+              email={who || null}
+              alt={who || t("meetingDetail.unassigned")}
+              fallback={attendeeInitials(who || t("meetingDetail.unassigned"))}
+              className="h-5 w-5"
+              fallbackClassName="text-[9px]"
+            />
             <span className="text-xs font-medium">
               {who || t("meetingDetail.unassigned")}
             </span>

package/corpus/templates/clips/app/routes/_app.settings._index.tsx

@@ -48,7 +48,6 @@ const SPEEDS = ["1", "1.2", "1.5", "1.75", "2"];
 interface ClipsUserSettings {
   defaultPlaybackSpeed?: string;
   emailNotifications?: boolean;
-  transcriptCleanupEnabled?: boolean;
   includeFullVideoInAi?: boolean;
   defaultRecordingVisibility?: ClipsDefaultVisibility;
 }
@@ -133,9 +132,6 @@ export default function SettingsIndexRoute() {
   const [emailNotifications, setEmailNotifications] = useState(true);
   const [defaultVisibility, setDefaultVisibility] =
     useState<ClipsDefaultVisibility>(DEFAULT_CLIPS_RECORDING_VISIBILITY);
-  const [transcriptCleanupEnabled, setTranscriptCleanupEnabled] =
-    useState(true);
-
   useEffect(() => {
     let cancelled = false;
     loadSettings().then((v) => {
@@ -145,7 +141,6 @@ export default function SettingsIndexRoute() {
       setDefaultVisibility(
         v.defaultRecordingVisibility ?? DEFAULT_CLIPS_RECORDING_VISIBILITY,
       );
-      setTranscriptCleanupEnabled(v.transcriptCleanupEnabled !== false);
       setLoading(false);
     });
     return () => {
@@ -194,7 +189,6 @@ export default function SettingsIndexRoute() {
       await saveSettings({
         defaultPlaybackSpeed: defaultSpeed,
         emailNotifications,
-        transcriptCleanupEnabled,
         defaultRecordingVisibility: defaultVisibility,
       });
       toast.success(t("settings.saved"));
@@ -249,12 +243,6 @@ export default function SettingsIndexRoute() {
         keywords: "playback speed video default",
         hash: "playback",
       },
-      {
-        id: "clips-transcript",
-        label: t("settings.transcript"),
-        keywords: "transcript cleanup captions",
-        hash: "transcript",
-      },
       {
         id: "clips-sharing",
         label: t("settings.sharing"),
@@ -356,20 +344,6 @@ export default function SettingsIndexRoute() {
                     </Select>
                   }
                 />
-                <SettingsRow
-                  id="transcript"
-                  label={t("settings.transcriptCleanup")}
-                  description={t("settings.transcriptCleanupDescription")}
-                  control={
-                    <Switch
-                      id="transcript-cleanup"
-                      aria-label={t("settings.transcriptCleanup")}
-                      checked={transcriptCleanupEnabled}
-                      onCheckedChange={setTranscriptCleanupEnabled}
-                      disabled={loading}
-                    />
-                  }
-                />
                 <SettingsRow
                   id="notifications"
                   label={t("settings.emailNotifications")}

package/corpus/templates/clips/app/routes/r.$recordingId.tsx

@@ -388,7 +388,6 @@ export default function RecordingPage() {
         // Also keep polling while a transcript is pending so "Transcribing…"
         // auto-flips to the ready transcript (or to the failure card).
         if (data?.transcript?.status === "pending") return 3000;
-        if (data?.transcript?.cleanup?.status === "running") return 2000;
         // And keep polling while the title is still the server-seeded
         // default — the agent will land a generated title via
         // `update-recording` and we want the skeleton to swap in promptly.
@@ -460,7 +459,6 @@ export default function RecordingPage() {
   const transcriptFullText = playerDataQ.data?.transcript?.fullText ?? null;
   const transcriptStatus = playerDataQ.data?.transcript?.status;
   const transcriptFailureReason = playerDataQ.data?.transcript?.failureReason;
-  const transcriptCleanup = playerDataQ.data?.transcript?.cleanup ?? null;
   const ctas = playerDataQ.data?.ctas ?? [];
   const canEdit = role === "owner" || role === "admin" || role === "editor";
   // Reaching this page already requires a signed-in session with at least
@@ -1265,7 +1263,7 @@ export default function RecordingPage() {
         </TabsContent>
         <TabsContent
           value="transcript"
-          className="flex-1 min-h-0 mt-3 data-[state=inactive]:hidden"
+          className="mt-0 flex-1 min-h-0 data-[state=inactive]:hidden"
         >
           <TranscriptPanel
             segments={transcriptSegments}
@@ -1279,7 +1277,6 @@ export default function RecordingPage() {
                 : transcriptStatus
             }
             failureReason={transcriptFailureReason}
-            cleanup={transcriptCleanup}
             recordingTitle={recording.title}
             onRetry={
               canEdit

package/corpus/templates/clips/changelog/2026-08-26-detected-calls-no-longer-duplicate-meetings-or-strand-the-prompt.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-08-26
+---
+
+Detected Zoom and Teams calls no longer create duplicate meetings or leave a prompt on screen after recording starts

package/corpus/templates/clips/desktop/src/app.tsx

@@ -160,7 +160,11 @@ import {
   retryUpdateCheck,
   useUpdateStatus,
 } from "./lib/updater";
-import { normalizeServerUrl } from "./lib/url";
+import {
+  DEFAULT_SERVER_URL,
+  normalizeServerUrl,
+  SERVER_URL_STORAGE_KEY,
+} from "./lib/url";
 import { cn } from "./lib/utils";
 import {
   installDesktopVoiceDictation,
@@ -392,7 +396,8 @@ function isStorageSetupFailureMessage(message: string | null | undefined) {
   return STORAGE_SETUP_FAILURE_RE.test(message ?? "");
 }
 
-const STORAGE_KEY = "clips:server-url";
+// Shared with overlays via lib/url.ts — the meeting pill reads the same key.
+const STORAGE_KEY = SERVER_URL_STORAGE_KEY;
 const MODE_KEY = "clips:last-mode";
 const VOICE_SHORTCUT_KEY = "clips:voice-shortcut";
 const VOICE_SHORTCUT_CONFIGURED_KEY = "clips:voice-shortcut-configured";
@@ -414,14 +419,7 @@ const VIDEO_STORAGE_CONFIGURED_KEY = "clips:video-storage-configured";
 const REWIND_DOCS_URL =
   "https://www.agent-native.com/docs/template-clips-capture-everywhere#rewind";
 
-// Sensible defaults so the user never has to type a URL on first launch.
-// Dev builds point at the local dev server; production builds point at the
-// hosted Clips instance. The user can still override from Settings.
-// Dev points at the Clips dev server (shared-app-config says 8094).
-// Prod points at the hosted Clips instance. User can override from Settings.
-const DEFAULT_URL = import.meta.env.DEV
-  ? "http://localhost:8094"
-  : "https://clips.agent-native.com";
+const DEFAULT_URL = DEFAULT_SERVER_URL;
 
 function normalizeCaptureSource(value: string): CaptureSource {
   if (value === "region" && isMacPlatform()) return "region";

package/corpus/templates/clips/desktop/src/components/live-waveform.tsx

@@ -0,0 +1,99 @@
+/**
+ * The shared meter, wired to desktop capture.
+ *
+ * The shape and the level math live in `shared/live-waveform.tsx` with the web
+ * app; only the transport is here, because that is the one part that genuinely
+ * differs — Tauri emits `voice:audio-level`, the browser reads an
+ * `AnalyserNode`. Anything visual belongs in the shared component so the two
+ * apps cannot drift apart again.
+ */
+
+import { listen } from "@tauri-apps/api/event";
+import { useEffect, useRef, useState } from "react";
+
+import {
+  combinedMeterLevel,
+  EMPTY_METER_SOURCES,
+  foldMeterSources,
+  type MeterSource,
+  type MeterSourceLevels,
+} from "../../../shared/audio-meter";
+import { LiveWaveform as SharedLiveWaveform } from "../../../shared/live-waveform";
+
+interface LiveWaveformProps {
+  className?: string;
+  bars?: number;
+  barWidth?: number;
+  barGap?: number;
+  /** Drive from a caller-supplied level instead of capture events (demos). */
+  level?: number | null;
+  dimmed?: boolean;
+  /**
+   * Which capture to meter. "all" rides whichever of mic and system audio is
+   * louder, which is what a meeting is; "mic" answers the narrower question a
+   * recorder asks — am I being heard.
+   */
+  sources?: "all" | "mic";
+}
+
+export function LiveWaveform({
+  className,
+  bars,
+  barWidth,
+  barGap,
+  level = null,
+  dimmed = false,
+  sources = "all",
+}: LiveWaveformProps) {
+  const [captured, setCaptured] = useState<number | null>(null);
+  const sourcesRef = useRef<MeterSourceLevels>(EMPTY_METER_SOURCES);
+  const external = level !== null && level !== undefined;
+
+  useEffect(() => {
+    if (external) return;
+    let stopped = false;
+    let unlisten: (() => void) | null = null;
+    // Mic and system audio interleave on one event and each decays on its own
+    // frames: a shared level lets a silent mic halve whoever is actually
+    // talking on every other event, which pins the meter to its floor.
+    listen<{ level?: number; source?: MeterSource }>(
+      "voice:audio-level",
+      (event) => {
+        const source: MeterSource =
+          event.payload?.source === "system" ? "system" : "mic";
+        if (sources === "mic" && source !== "mic") return;
+        sourcesRef.current = foldMeterSources(
+          sourcesRef.current,
+          source,
+          Number(event.payload?.level),
+        );
+        setCaptured(
+          sources === "mic"
+            ? sourcesRef.current.mic
+            : combinedMeterLevel(sourcesRef.current),
+        );
+      },
+    )
+      .then((cleanup) => {
+        if (stopped) cleanup();
+        else unlisten = cleanup;
+      })
+      .catch(() => {});
+
+    return () => {
+      stopped = true;
+      unlisten?.();
+    };
+  }, [external, sources]);
+
+  return (
+    <SharedLiveWaveform
+      level={external ? level : captured}
+      className={className}
+      bars={bars}
+      barWidth={barWidth}
+      barGap={barGap}
+      dimmed={dimmed}
+    />
+  );
+}