@agent-native/core 0.91.0 → 0.91.2

package/corpus/templates/clips/desktop/src/overlays/meeting-notification.tsx

@@ -1,16 +1,32 @@
-import { IconAlertCircle, IconClock, IconX } from "@tabler/icons-react";
+import {
+  IconAlertCircle,
+  IconChevronDown,
+  IconNotes,
+  IconVideo,
+  IconX,
+} from "@tabler/icons-react";
 import { invoke } from "@tauri-apps/api/core";
 import { emit, listen } from "@tauri-apps/api/event";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 import { open as openExternal } from "@tauri-apps/plugin-shell";
 import { useEffect, useRef, useState } from "react";
 
+import {
+  detectMeetingJoinProvider,
+  joinProviderLabel,
+  meetingNotificationAutoHideMs,
+  type MeetingJoinProvider,
+} from "../lib/meeting-notification-timing";
+
 interface NotificationData {
   type: "calendar" | "adhoc";
   title: string;
   subtitle: string;
   meetingId: string;
   joinUrl?: string | null;
+  platform?: string | null;
+  scheduledStart?: string | null;
+  scheduledEnd?: string | null;
   autoStart?: boolean;
 }
 
@@ -19,12 +35,11 @@ interface TranscriptionStatusPayload {
   error?: string;
 }
 
-const DEFAULT_AUTO_HIDE_MS = 30_000;
 const SNOOZE_MS = 5 * 60_000;
+const FALLBACK_AUTO_HIDE_MS = 6 * 60_000;
 
 /**
- * Open a meeting join URL via the Tauri shell plugin. Used by the
- * notification's dedicated Join CTA (notes start is a separate action).
+ * Open a meeting join URL via the Tauri shell plugin.
  */
 async function openJoinUrl(url: string | null | undefined): Promise<void> {
   if (!url) return;
@@ -35,40 +50,71 @@ async function openJoinUrl(url: string | null | undefined): Promise<void> {
   }
 }
 
+function ProviderGlyph({ provider }: { provider: MeetingJoinProvider }) {
+  // Lightweight glyphs — keep the overlay free of extra assets. Zoom blue
+  // camera / Meet green / Teams purple, otherwise a generic video icon.
+  if (provider === "zoom") {
+    return (
+      <span
+        className="meeting-notification-provider meeting-notification-provider-zoom"
+        aria-hidden
+      >
+        <IconVideo size={14} stroke={2.2} />
+      </span>
+    );
+  }
+  if (provider === "meet") {
+    return (
+      <span
+        className="meeting-notification-provider meeting-notification-provider-meet"
+        aria-hidden
+      >
+        <IconVideo size={14} stroke={2.2} />
+      </span>
+    );
+  }
+  if (provider === "teams") {
+    return (
+      <span
+        className="meeting-notification-provider meeting-notification-provider-teams"
+        aria-hidden
+      >
+        <IconVideo size={14} stroke={2.2} />
+      </span>
+    );
+  }
+  return (
+    <span
+      className="meeting-notification-provider meeting-notification-provider-other"
+      aria-hidden
+    >
+      <IconNotes size={14} stroke={2.2} />
+    </span>
+  );
+}
+
 /**
  * Granola-style meeting notification — small card in the top-right corner.
- * Variants:
  *
- *   - Calendar event: solid left bar (green), meeting title, time,
- *     "Start notes" + optional "Join" + "Snooze 5 min" buttons.
- *   - Ad-hoc call: dashed left bar (slate), "Call detected", app name,
- *     same controls.
+ * Primary split button: join the call and open Clips notes in one click.
+ * Chevron exposes secondary actions (join only / notes only / snooze).
  *
- * Data arrives via Tauri event `meetings:show-notification`. Auto-hides
- * after 30s by default. Hover pauses the auto-hide timer. Errors from the
- * persistent popover transcription session surface inline beneath the title
- * so the user isn't left wondering why nothing happened.
+ * Data arrives via Tauri event `meetings:show-notification`. Visibility holds
+ * from 1 minute before start until 5 minutes after, unless dismissed.
  */
 export function MeetingNotification() {
   const [data, setData] = useState<NotificationData | null>(null);
   const [showClose, setShowClose] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [pending, setPending] = useState(false);
   const autoHideTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const dataRef = useRef<NotificationData | null>(null);
 
-  // Keep a ref to the latest data so the transcription-status listeners can
-  // match incoming events against the meeting currently on screen without
-  // re-subscribing on every render.
   useEffect(() => {
     dataRef.current = data;
   }, [data]);
 
-  // The notification window is a single persistent overlay (created once at
-  // startup so it can receive `meetings:show-notification` events). Drive its
-  // OS-level visibility from React state: a shown-but-empty transparent window
-  // would otherwise sit at the top of the screen swallowing clicks. Visible
-  // only while there's a notification on screen.
   useEffect(() => {
     const win = getCurrentWindow();
     if (data) {
@@ -84,8 +130,15 @@ export function MeetingNotification() {
   ) {
     setData(payload);
     setError(null);
+    setMenuOpen(false);
     setPending(!!payload.autoStart && !options?.hydrated);
-    scheduleAutoHide(DEFAULT_AUTO_HIDE_MS);
+    const startMs = payload.scheduledStart
+      ? Date.parse(payload.scheduledStart)
+      : NaN;
+    const hideMs = Number.isFinite(startMs)
+      ? meetingNotificationAutoHideMs(startMs)
+      : FALLBACK_AUTO_HIDE_MS;
+    scheduleAutoHide(hideMs);
   }
 
   useEffect(() => {
@@ -112,6 +165,15 @@ export function MeetingNotification() {
       }),
     );
 
+    // Cold overlay boot: hydrate any payload stored before this webview
+    // mounted (calendar or adhoc).
+    invoke<NotificationData | null>("take_pending_meeting_notification")
+      .then((pending) => {
+        if (stopped || !pending) return;
+        showNotification(pending, { hydrated: true });
+      })
+      .catch(() => {});
+
     trackListen(
       listen<TranscriptionStatusPayload>("meetings:hide-notification", (ev) => {
         if (ev.payload.meetingId !== dataRef.current?.meetingId) return;
@@ -154,14 +216,30 @@ export function MeetingNotification() {
 
   function scheduleAutoHide(ms: number) {
     clearAutoHide();
+    if (ms <= 0) {
+      hideNotification();
+      return;
+    }
     autoHideTimerRef.current = setTimeout(() => hideNotification(), ms);
   }
 
+  function resumeAutoHide() {
+    const current = dataRef.current;
+    const startMs = current?.scheduledStart
+      ? Date.parse(current.scheduledStart)
+      : NaN;
+    const hideMs = Number.isFinite(startMs)
+      ? meetingNotificationAutoHideMs(startMs)
+      : FALLBACK_AUTO_HIDE_MS;
+    scheduleAutoHide(hideMs);
+  }
+
   function hideNotification() {
     clearAutoHide();
     setData(null);
     setError(null);
     setPending(false);
+    setMenuOpen(false);
     dataRef.current = null;
   }
 
@@ -169,6 +247,7 @@ export function MeetingNotification() {
     if (!data || pending) return;
     setPending(true);
     setError(null);
+    setMenuOpen(false);
     emit("meetings:start-transcription", {
       meetingId: data.meetingId,
       joinUrl: data.joinUrl,
@@ -181,14 +260,23 @@ export function MeetingNotification() {
 
   async function joinMeeting() {
     if (!data?.joinUrl) return;
+    setMenuOpen(false);
     await openJoinUrl(data.joinUrl);
   }
 
+  /** Granola primary: join the call and start Clips notes together. */
+  async function joinAndOpenClips() {
+    if (!data || pending) return;
+    setMenuOpen(false);
+    if (data.joinUrl) {
+      await openJoinUrl(data.joinUrl);
+    }
+    await takeNotes();
+  }
+
   function snooze() {
     if (!data) return;
-    // Hand the snooze to the Rust watcher so the reminder re-fires after the
-    // delay even though this overlay window closes right away. A setTimeout
-    // here would be torn down with the window and never fire.
+    setMenuOpen(false);
     invoke("meetings_snooze", {
       meetingId: data.meetingId,
       minutes: Math.round(SNOOZE_MS / 60_000),
@@ -202,6 +290,14 @@ export function MeetingNotification() {
 
   const isCalendar = data.type === "calendar";
   const hasJoin = Boolean(data.joinUrl);
+  const provider = detectMeetingJoinProvider(data.joinUrl, data.platform);
+  const providerName = joinProviderLabel(provider);
+  const primaryLabel = hasJoin
+    ? provider === "other"
+      ? "Join meeting"
+      : `Join ${providerName}`
+    : "Start notes";
+  const secondaryLabel = hasJoin ? "& open Clips" : null;
 
   return (
     <div
@@ -212,14 +308,11 @@ export function MeetingNotification() {
       }}
       onMouseLeave={() => {
         setShowClose(false);
-        // Resume the auto-hide timer with the remaining-ish budget.
-        // Cheap approximation: just restart the full timer on leave.
-        scheduleAutoHide(DEFAULT_AUTO_HIDE_MS);
+        setMenuOpen(false);
+        resumeAutoHide();
       }}
     >
-      <div
-        className={`meeting-notification${hasJoin ? " meeting-notification-with-join" : ""}`}
-      >
+      <div className="meeting-notification">
         <div
           className={`meeting-notification-bar ${isCalendar ? "meeting-notification-bar-calendar" : "meeting-notification-bar-adhoc"}`}
         />
@@ -233,34 +326,65 @@ export function MeetingNotification() {
             </div>
           ) : null}
         </div>
-        <div className="meeting-notification-actions">
+        <div className="meeting-notification-split">
           <button
-            className="meeting-notification-btn meeting-notification-btn-primary"
-            onClick={takeNotes}
+            className="meeting-notification-split-main"
+            onClick={hasJoin ? joinAndOpenClips : takeNotes}
             disabled={pending}
             data-no-drag
           >
-            {pending ? "Starting…" : "Start notes"}
+            <ProviderGlyph provider={provider} />
+            <span className="meeting-notification-split-copy">
+              <span className="meeting-notification-split-primary">
+                {pending ? "Starting…" : primaryLabel}
+              </span>
+              {secondaryLabel && !pending ? (
+                <span className="meeting-notification-split-secondary">
+                  {secondaryLabel}
+                </span>
+              ) : null}
+            </span>
           </button>
-          {hasJoin ? (
-            <button
-              className="meeting-notification-btn meeting-notification-btn-secondary"
-              onClick={joinMeeting}
-              data-no-drag
-            >
-              Join
-            </button>
-          ) : null}
           <button
-            className="meeting-notification-btn meeting-notification-btn-secondary"
-            onClick={snooze}
+            className="meeting-notification-split-chevron"
+            onClick={() => setMenuOpen((open) => !open)}
+            aria-label="More actions"
+            aria-expanded={menuOpen}
             data-no-drag
-            aria-label="Snooze 5 minutes"
-            title="Snooze 5 min"
           >
-            <IconClock size={12} aria-hidden="true" />
-            <span>5m</span>
+            <IconChevronDown size={14} aria-hidden="true" />
           </button>
+          {menuOpen ? (
+            <div className="meeting-notification-menu" role="menu">
+              {hasJoin ? (
+                <button
+                  role="menuitem"
+                  className="meeting-notification-menu-item"
+                  onClick={joinMeeting}
+                  data-no-drag
+                >
+                  Join only
+                </button>
+              ) : null}
+              <button
+                role="menuitem"
+                className="meeting-notification-menu-item"
+                onClick={takeNotes}
+                disabled={pending}
+                data-no-drag
+              >
+                Start notes only
+              </button>
+              <button
+                role="menuitem"
+                className="meeting-notification-menu-item"
+                onClick={snooze}
+                data-no-drag
+              >
+                Snooze 5 min
+              </button>
+            </div>
+          ) : null}
         </div>
         {showClose ? (
           <button

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

@@ -25,7 +25,9 @@
   --radius: 12px;
   --radius-sm: 8px;
   --radius-pill: 999px;
-  --popover-shadow-gutter: 12px;
+  /* Must cover `--shadow-md` blur (24px in dark mode) or the transparent
+     Tauri window clips the drop shadow on every edge. */
+  --popover-shadow-gutter: 24px;
   --overlay-shadow-gutter: 18px;
 
   --shadow-sm: 0 1px 2px rgba(23, 23, 23, 0.06);
@@ -1419,6 +1421,13 @@ body[data-clips-route="recording-pill"] #root {
   overscroll-behavior: contain;
 }
 
+/* Meetings / dictation drill-ins: a touch more room under the last row so
+   content isn't flush with the panel edge. Must follow `.setup` so it wins
+   over the shorthand padding above. */
+.setup.popover-view {
+  padding-bottom: 20px;
+}
+
 .setup h2 {
   margin: 0;
   font-size: 14px;
@@ -3599,7 +3608,7 @@ body[data-clips-route="recording-pill"] #root {
   position: relative;
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 12px;
   padding: 12px 14px;
   border-radius: 14px;
   background: rgba(20, 22, 28, 0.94);
@@ -3611,37 +3620,26 @@ body[data-clips-route="recording-pill"] #root {
     0 2px 6px rgba(0, 0, 0, 0.3);
   color: white;
   pointer-events: auto;
-  min-width: 280px;
-  max-width: 400px;
-}
-
-.meeting-notification-with-join {
-  flex-wrap: wrap;
-  align-items: flex-start;
-  row-gap: 10px;
-}
-
-.meeting-notification-with-join .meeting-notification-actions {
-  flex: 1 1 100%;
-  justify-content: flex-end;
-  padding-left: 13px; /* align under content past the bar */
+  min-width: 320px;
+  max-width: 440px;
 }
 
 .meeting-notification-bar {
   width: 3px;
-  height: 40px;
-  border-radius: 2px;
+  height: 36px;
+  border-radius: 999px;
   flex-shrink: 0;
 }
 
 .meeting-notification-bar-calendar {
-  background: #16a34a;
+  background: #7dd3fc;
 }
 
 .meeting-notification-bar-adhoc {
   background: transparent;
   border-left: 3px dashed #a3a3a3;
   width: 3px;
+  border-radius: 0;
 }
 
 .meeting-notification-content {
@@ -3650,6 +3648,7 @@ body[data-clips-route="recording-pill"] #root {
   display: flex;
   flex-direction: column;
   gap: 2px;
+  padding-right: 4px;
 }
 
 .meeting-notification-title {
@@ -3666,65 +3665,141 @@ body[data-clips-route="recording-pill"] #root {
   color: rgba(255, 255, 255, 0.55);
 }
 
-.meeting-notification-btn {
-  border: none;
-  border-radius: 8px;
-  padding: 6px 12px;
-  background: rgba(255, 255, 255, 0.1);
-  color: white;
-  font-size: 12px;
-  font-weight: 600;
-  cursor: pointer;
-  white-space: nowrap;
+.meeting-notification-split {
+  position: relative;
+  display: inline-flex;
+  align-items: stretch;
   flex-shrink: 0;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: 10px;
+  overflow: visible;
+  background: rgba(255, 255, 255, 0.04);
 }
 
-.meeting-notification-btn:hover {
-  background: rgba(255, 255, 255, 0.16);
+.meeting-notification-split-main {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border: none;
+  background: transparent;
+  color: white;
+  padding: 6px 10px;
+  cursor: pointer;
+  text-align: left;
+  min-height: 40px;
 }
 
-.meeting-notification-btn:active {
-  transform: scale(0.96);
+.meeting-notification-split-main:hover {
+  background: rgba(255, 255, 255, 0.06);
 }
 
-.meeting-notification-btn:disabled {
-  opacity: 0.6;
+.meeting-notification-split-main:disabled {
+  opacity: 0.65;
   cursor: progress;
 }
 
-.meeting-notification-btn-primary {
-  background: #ffffff;
-  color: #111827;
+.meeting-notification-split-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  line-height: 1.15;
 }
 
-.meeting-notification-btn-primary:hover {
-  background: #f3f4f6;
+.meeting-notification-split-primary {
+  font-size: 12px;
+  font-weight: 600;
+  color: white;
+  white-space: nowrap;
 }
 
-.meeting-notification-btn-primary:disabled {
-  background: rgba(255, 255, 255, 0.7);
-  color: #374151;
+.meeting-notification-split-secondary {
+  font-size: 10px;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.55);
+  white-space: nowrap;
 }
 
-.meeting-notification-actions {
+.meeting-notification-split-chevron {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  flex-shrink: 0;
+  justify-content: center;
+  width: 28px;
+  border: none;
+  border-left: 1px solid rgba(255, 255, 255, 0.12);
+  background: transparent;
+  color: rgba(255, 255, 255, 0.75);
+  cursor: pointer;
+  border-radius: 0 10px 10px 0;
 }
 
-.meeting-notification-btn-secondary {
+.meeting-notification-split-chevron:hover {
+  background: rgba(255, 255, 255, 0.06);
+  color: white;
+}
+
+.meeting-notification-provider {
+  width: 22px;
+  height: 22px;
+  border-radius: 6px;
   display: inline-flex;
   align-items: center;
-  gap: 4px;
-  padding: 6px 8px;
-  background: rgba(255, 255, 255, 0.06);
-  color: rgba(255, 255, 255, 0.85);
+  justify-content: center;
+  flex-shrink: 0;
+  color: white;
 }
 
-.meeting-notification-btn-secondary:hover {
+.meeting-notification-provider-zoom {
+  background: #2d8cff;
+}
+
+.meeting-notification-provider-meet {
+  background: #34a853;
+}
+
+.meeting-notification-provider-teams {
+  background: #6264a7;
+}
+
+.meeting-notification-provider-other {
   background: rgba(255, 255, 255, 0.12);
-  color: white;
+}
+
+.meeting-notification-menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  min-width: 160px;
+  padding: 4px;
+  border-radius: 10px;
+  background: rgba(24, 26, 32, 0.98);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
+  z-index: 5;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.meeting-notification-menu-item {
+  border: none;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.9);
+  text-align: left;
+  font-size: 12px;
+  font-weight: 500;
+  padding: 8px 10px;
+  border-radius: 7px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.meeting-notification-menu-item:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.meeting-notification-menu-item:disabled {
+  opacity: 0.5;
+  cursor: progress;
 }
 
 .meeting-notification-error {