@agent-native/core 0.121.2 → 0.122.0

package/corpus/templates/clips/desktop/src/overlays/live-audio-bars.tsx

@@ -1,42 +1,50 @@
 import { listen } from "@tauri-apps/api/event";
 import { useEffect, useRef, useState } from "react";
 
-const BAR_SHAPES = [0.52, 1, 0.68];
-const LEVEL_DECAY = 0.78;
-const EVENT_ATTACK_DECAY = 0.52;
+import {
+  advanceMeterLevels,
+  decayMeterLevel,
+  METER_BAR_COUNT,
+  METER_BAR_GAINS,
+  METER_SAMPLE_MS,
+  meterBarHeight,
+  nextMeterLevel,
+} from "../lib/audio-meter";
 
 interface LiveAudioBarsProps {
   className?: string;
   compact?: boolean;
 }
 
-/** Small Granola-style meter shared by the compact and expanded overlays. */
+/**
+ * Small Granola-style meter shared by the compact and expanded overlays. The
+ * bars track how loud the meeting actually is — mic and system audio both feed
+ * `voice:audio-level`, and the meter rides whichever is louder.
+ */
 export function LiveAudioBars({
   className,
   compact = false,
 }: LiveAudioBarsProps) {
-  const [level, setLevel] = useState(0);
+  const [levels, setLevels] = useState<number[]>(() =>
+    new Array(METER_BAR_COUNT).fill(0),
+  );
   const levelRef = useRef(0);
 
   useEffect(() => {
     let stopped = false;
     let unlisten: (() => void) | null = null;
 
-    const decayTimer = window.setInterval(() => {
-      const next = levelRef.current * LEVEL_DECAY;
-      levelRef.current = next < 0.01 ? 0 : next;
-      setLevel(levelRef.current);
-    }, 60);
+    const sampleTimer = window.setInterval(() => {
+      const current = levelRef.current;
+      levelRef.current = decayMeterLevel(current);
+      setLevels((prev) => advanceMeterLevels(prev, current));
+    }, METER_SAMPLE_MS);
 
     listen<{ level?: number }>("voice:audio-level", (event) => {
-      const incoming = Number(event.payload?.level);
-      if (!Number.isFinite(incoming)) return;
-      const next = Math.max(
-        levelRef.current * EVENT_ATTACK_DECAY,
-        Math.max(0, Math.min(1, incoming)),
+      levelRef.current = nextMeterLevel(
+        levelRef.current,
+        Number(event.payload?.level),
       );
-      levelRef.current = next;
-      setLevel(next);
     })
       .then((cleanup) => {
         if (stopped) {
@@ -49,15 +57,11 @@ export function LiveAudioBars({
 
     return () => {
       stopped = true;
-      window.clearInterval(decayTimer);
+      window.clearInterval(sampleTimer);
       unlisten?.();
     };
   }, []);
 
-  // Peak levels from speech taps are often quiet even when speech is clear.
-  // A gentle curve keeps the meter responsive without turning background noise
-  // into a full-height signal.
-  const visualLevel = level > 0 ? Math.min(1, Math.pow(level, 0.52) * 1.08) : 0;
   const rootClassName = [
     "live-audio-bars",
     compact ? "live-audio-bars-compact" : null,
@@ -68,19 +72,15 @@ export function LiveAudioBars({
 
   return (
     <span className={rootClassName} aria-hidden="true">
-      {BAR_SHAPES.map((shape, index) => {
-        const idleHeight = index === 1 ? 0.2 : 0.14;
-        const height = Math.round(
-          (idleHeight + visualLevel * shape * 0.8) * 100,
-        );
-        return (
-          <span
-            className="live-audio-bar"
-            key={index}
-            style={{ height: `${Math.max(12, height)}%` }}
-          />
-        );
-      })}
+      {METER_BAR_GAINS.map((_gain, index) => (
+        <span
+          className="live-audio-bar"
+          key={index}
+          style={{
+            height: `${Math.round(meterBarHeight(levels[index] ?? 0, index))}%`,
+          }}
+        />
+      ))}
     </span>
   );
 }

package/corpus/templates/clips/desktop/src/overlays/live-transcript.tsx

@@ -151,8 +151,9 @@ export function LiveTranscript({
 
 /**
  * A single chat-style transcript bubble. The mic stream ("You") is aligned to
- * the right with a warm amber bubble; the system-audio stream ("Them") sits on
- * the left with a cool sky bubble. In-flight partials render dimmed.
+ * the right; the system-audio stream ("Them") sits on the left. Both use
+ * neutral greys — side, not hue, is what distinguishes the speakers. In-flight
+ * partials render dimmed.
  */
 function ChatBubble({
   source,

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

@@ -1,11 +1,11 @@
 import {
+  IconArrowUp,
   IconCheck,
   IconChevronDown,
   IconChevronUp,
   IconCopy,
   IconExternalLink,
   IconLoader2,
-  IconMessageCircle,
   IconPlayerPauseFilled,
   IconPlayerPlayFilled,
   IconPlayerStopFilled,
@@ -32,8 +32,8 @@ interface PillContext {
  * Granola-style recording indicator. A floating pill anchored by Rust:
  * center-right for meetings, bottom-center for ordinary recordings.
  *
- *   - Collapsed (default): red dot + elapsed timer + tiny waveform + chevron.
- *   - Expanded: same header + scrolling live transcript + Pause / Stop.
+ *   - Collapsed (default): logo + live waveform capsule, click to expand.
+ *   - Expanded: header + scrolling live transcript + Pause / Stop + Ask bar.
  *
  * The hosting Tauri window is always-on-top, transparent, no decorations,
  * and capture-excluded — see `recording_indicator.rs`. We only deal with
@@ -51,6 +51,7 @@ export function RecordingPill() {
   const [hasTranscriptLines, setHasTranscriptLines] = useState(false);
   const [transcriptCopied, setTranscriptCopied] = useState(false);
   const [preloadedLines, setPreloadedLines] = useState<FinalLine[]>([]);
+  const [ask, setAsk] = useState("");
   const activeMeetingIdRef = useRef<string | null>(null);
   // Detached / "floating" mode — Wispr-style pill that auto-moves to the
   // top-right when the main app loses focus, with a drag handle. Driven by
@@ -196,17 +197,6 @@ export function RecordingPill() {
     };
   }, [ctx.mode, paused]);
 
-  // Let the compact chip land first, then reveal the live transcript once per
-  // meeting. The delay keeps the indicator from feeling like a sudden panel.
-  useEffect(() => {
-    if (ctx.mode !== "meeting" || detached) return;
-    const timer = setTimeout(() => {
-      setExpanded(true);
-      invoke("recording_pill_expand", { expanded: true }).catch(() => {});
-    }, 280);
-    return () => clearTimeout(timer);
-  }, [ctx.mode, detached]);
-
   async function toggleExpanded() {
     const next = !expanded;
     setExpanded(next);
@@ -258,6 +248,19 @@ export function RecordingPill() {
     }
   };
 
+  const handleAskSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const question = ask.trim();
+    const mid = activeMeetingIdRef.current;
+    if (!question || !mid) return;
+    setAsk("");
+    emit("clips:open-meeting", {
+      meetingId: mid,
+      openChat: true,
+      prompt: question,
+    }).catch(() => {});
+  };
+
   const handlePillMouseDown = (e: React.MouseEvent) => {
     if (e.button !== 0) return;
     const target = e.target as HTMLElement;
@@ -307,11 +310,9 @@ export function RecordingPill() {
                 ? " pill-vertical"
                 : ""
           }`}
+          onClick={!expanded && !detached ? handlePillMediaClick : undefined}
         >
-          <div
-            className="pill-media"
-            onClick={!expanded && !detached ? handlePillMediaClick : undefined}
-          >
+          <div className="pill-media">
             <PillLogo className="pill-logo" />
             <LiveAudioBars
               compact={!expanded && !detached}
@@ -413,43 +414,43 @@ export function RecordingPill() {
             />
           </div>
           {ctx.mode === "meeting" ? (
-            <div className="pill-saved-bar">
+            <form className="pill-ask-bar" onSubmit={handleAskSubmit}>
+              <input
+                data-no-drag
+                className="pill-ask-input"
+                value={ask}
+                onChange={(e) => setAsk(e.target.value)}
+                placeholder="Ask anything"
+                aria-label="Ask anything about this meeting"
+                disabled={!ctx.meetingId}
+              />
+              <button
+                type="submit"
+                data-no-drag
+                className="pill-ask-send"
+                disabled={!ask.trim() || !ctx.meetingId}
+                aria-label="Ask"
+                title="Ask"
+              >
+                <IconArrowUp size={13} />
+              </button>
               <button
                 type="button"
                 data-no-drag
-                className="pill-open-web-btn"
+                className="pill-ask-open"
                 onClick={() => {
                   const mid = activeMeetingIdRef.current;
                   if (mid)
-                    emit("clips:open-meeting", {
-                      meetingId: mid,
-                      openChat: true,
-                    }).catch(() => {});
+                    emit("clips:open-meeting", { meetingId: mid }).catch(
+                      () => {},
+                    );
                 }}
-                title="Chat with transcript"
+                aria-label="Open in browser"
+                title="Open this meeting in the browser"
               >
-                <IconMessageCircle size={12} />
-                Chat with transcript
+                <IconExternalLink size={13} />
               </button>
-              <span className="pill-saved-status">
-                <button
-                  type="button"
-                  data-no-drag
-                  className="pill-open-web-btn"
-                  onClick={() => {
-                    const mid = activeMeetingIdRef.current;
-                    if (mid)
-                      emit("clips:open-meeting", { meetingId: mid }).catch(
-                        () => {},
-                      );
-                  }}
-                  title="Open this meeting in the browser"
-                >
-                  <IconExternalLink size={12} />
-                  Open in browser
-                </button>
-              </span>
-            </div>
+            </form>
           ) : null}
         </div>
       </div>