@agent-native/core 0.125.0 → 0.127.1

package/corpus/templates/slides/app/components/editor/ExportMenu.tsx

@@ -18,6 +18,11 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import type { GoogleSlidesExportResult } from "@/lib/export-google-slides-client";
+
+/** Google Slides' File → Import dialog, primed to ask for a file. */
+const GOOGLE_SLIDES_IMPORT_URL =
+  "https://docs.google.com/presentation/u/0/?usp=import";
 
 interface ExportMenuProps {
   deckId: string;
@@ -25,6 +30,7 @@ interface ExportMenuProps {
   onDuplicate: () => void;
   onExportPdf: () => void;
   onExportPptx: () => Promise<void> | void;
+  onExportGoogleSlides?: () => Promise<GoogleSlidesExportResult>;
   onShareLink?: () => void;
   onShareTeam?: () => void;
 }
@@ -35,6 +41,7 @@ export function ExportMenu({
   onDuplicate,
   onExportPdf,
   onExportPptx,
+  onExportGoogleSlides,
   onShareLink,
   onShareTeam,
 }: ExportMenuProps) {
@@ -84,12 +91,26 @@ export function ExportMenu({
   };
 
   const handleExportGoogleSlides = async () => {
+    if (!onExportGoogleSlides) return;
+    // Opened up-front: browsers only honour window.open() inside the click
+    // gesture, and building the PPTX is async.
+    const target = window.open("", "_blank");
     try {
-      await onExportPptx();
+      const result = await onExportGoogleSlides();
+      if (result.url !== null) {
+        if (target) target.location.href = result.url;
+        toast.success(t("editorExport.googleSlidesCreated"), {
+          description: t("editorExport.googleSlidesCreatedHint"),
+        });
+        return;
+      }
+      console.warn("Google Slides upload unavailable:", result.reason);
+      if (target) target.location.href = GOOGLE_SLIDES_IMPORT_URL;
       toast.success(t("editorExport.googleSlidesDownloaded"), {
         description: t("editorExport.googleSlidesImportHint"),
       });
     } catch (err) {
+      target?.close();
       console.error("Export failed:", err);
       toast.error(t("editorExport.exportFailed"), {
         description:
@@ -166,13 +187,15 @@ export function ExportMenu({
           <IconDownload className="w-4 h-4 mr-2" />
           {t("editorExport.exportPptx")}
         </DropdownMenuItem>
-        <DropdownMenuItem
-          onClick={handleExportGoogleSlides}
-          className="cursor-pointer"
-        >
-          <IconBrandGoogle className="w-4 h-4 mr-2" />
-          {t("editorExport.downloadGoogleSlides")}
-        </DropdownMenuItem>
+        {onExportGoogleSlides && (
+          <DropdownMenuItem
+            onClick={handleExportGoogleSlides}
+            className="cursor-pointer"
+          >
+            <IconBrandGoogle className="w-4 h-4 mr-2" />
+            {t("editorExport.openInGoogleSlides")}
+          </DropdownMenuItem>
+        )}
         <DropdownMenuSeparator />
         <DropdownMenuItem onClick={onDuplicate} className="cursor-pointer">
           <IconCopy className="w-4 h-4 mr-2" />

package/corpus/templates/slides/app/components/editor/PromptDialog.tsx

@@ -16,6 +16,20 @@ export interface UploadedFile {
   size: number;
 }
 
+/**
+ * Radix popovers portal to `document.body`, so a mousedown inside the model
+ * picker or attachment menu reads as "outside" any panel that hosts a composer.
+ * Closing on it unmounts the popover before its own click fires, which looks
+ * exactly like a dead button.
+ */
+export function isInsidePortaledLayer(target: EventTarget | null): boolean {
+  return Boolean(
+    (target as Element | null)?.closest?.(
+      "[data-radix-popper-content-wrapper]",
+    ),
+  );
+}
+
 interface PromptPopoverProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -98,6 +112,7 @@ export default function PromptPopover({
   useEffect(() => {
     if (!open) return;
     const handleClick = (e: MouseEvent) => {
+      if (isInsidePortaledLayer(e.target)) return;
       if (
         panelRef.current &&
         !panelRef.current.contains(e.target as Node) &&

package/corpus/templates/slides/app/components/presentation/PresentationView.tsx

@@ -3,6 +3,7 @@ import {
   IconChevronLeft,
   IconChevronRight,
   IconMaximize,
+  IconNotes,
   IconX,
 } from "@tabler/icons-react";
 import { useState, useEffect, useCallback, useMemo, useRef } from "react";
@@ -20,6 +21,8 @@ import {
   resolveSlideAnimationElement,
 } from "@/lib/slide-animation-elements";
 
+import { openPresentChannel, type PresentMessage } from "./present-channel";
+
 interface PresentationViewProps {
   slides: Slide[];
   deckId: string;
@@ -271,6 +274,58 @@ export default function PresentationView({
     }
   }, [navigate, deckId, isShared]);
 
+  // Presenter window: it owns no navigation state of its own, it just sends
+  // commands and mirrors whatever we echo back — so build steps stay
+  // authoritative here.
+  const channelRef = useRef<BroadcastChannel | null>(null);
+  const goNextRef = useRef(goNext);
+  const goPrevRef = useRef(goPrev);
+  goNextRef.current = goNext;
+  goPrevRef.current = goPrev;
+
+  const broadcastState = useCallback(() => {
+    channelRef.current?.postMessage({
+      type: "state",
+      index: currentIndex,
+    } satisfies PresentMessage);
+  }, [currentIndex]);
+  const broadcastStateRef = useRef(broadcastState);
+  broadcastStateRef.current = broadcastState;
+
+  useEffect(() => {
+    const channel = openPresentChannel(deckId);
+    channelRef.current = channel;
+    if (!channel) return;
+    channel.onmessage = (event: MessageEvent<PresentMessage>) => {
+      const message = event.data;
+      if (message?.type === "hello") {
+        broadcastStateRef.current();
+      } else if (message?.type === "command") {
+        if (message.command === "next") goNextRef.current();
+        else goPrevRef.current();
+      }
+    };
+    return () => {
+      channel.close();
+      channelRef.current = null;
+    };
+  }, [deckId]);
+
+  useEffect(() => {
+    broadcastState();
+  }, [broadcastState]);
+
+  const openPresenterWindow = useCallback(() => {
+    const url = new URL(window.location.href);
+    url.searchParams.set("presenter", "1");
+    url.searchParams.set("slide", String(currentIndex + 1));
+    window.open(
+      url.toString(),
+      `slides-presenter-${deckId}`,
+      "width=1200,height=760",
+    );
+  }, [currentIndex, deckId]);
+
   useEffect(() => {
     const handleKey = (e: KeyboardEvent) => {
       switch (e.key) {
@@ -294,6 +349,11 @@ export default function PresentationView({
             document.exitFullscreen().catch(() => {});
           }
           break;
+        case "s":
+        case "S":
+          e.preventDefault();
+          openPresenterWindow();
+          break;
         case "Escape":
           exit();
           break;
@@ -301,7 +361,7 @@ export default function PresentationView({
     };
     window.addEventListener("keydown", handleKey);
     return () => window.removeEventListener("keydown", handleKey);
-  }, [goNext, goPrev, exit]);
+  }, [goNext, goPrev, exit, openPresenterWindow]);
 
   // Try to enter fullscreen. Browsers require a user gesture; the click that
   // navigated to /present often counts, but Safari/Firefox sometimes block
@@ -501,13 +561,23 @@ export default function PresentationView({
             </button>
           </div>
 
-          <button
-            onClick={exit}
-            className="p-3 sm:p-2 rounded-lg bg-white/10 hover:bg-white/20 transition-colors"
-            aria-label={t("presentation.exitPresentation")}
-          >
-            <IconX className="w-5 h-5 sm:w-4 sm:h-4 text-white" />
-          </button>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={openPresenterWindow}
+              className="p-3 sm:p-2 rounded-lg bg-white/10 hover:bg-white/20 transition-colors cursor-pointer"
+              aria-label={t("presentation.presenterView")}
+              title={t("presentation.presenterView")}
+            >
+              <IconNotes className="w-5 h-5 sm:w-4 sm:h-4 text-white" />
+            </button>
+            <button
+              onClick={exit}
+              className="p-3 sm:p-2 rounded-lg bg-white/10 hover:bg-white/20 transition-colors"
+              aria-label={t("presentation.exitPresentation")}
+            >
+              <IconX className="w-5 h-5 sm:w-4 sm:h-4 text-white" />
+            </button>
+          </div>
         </div>
 
         {/* Progress bar */}

package/corpus/templates/slides/app/components/presentation/PresenterView.tsx

@@ -0,0 +1,179 @@
+import { useT } from "@agent-native/core/client/i18n";
+import { IconChevronLeft, IconChevronRight, IconX } from "@tabler/icons-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import SlideRenderer from "@/components/deck/SlideRenderer";
+import type { Slide } from "@/context/DeckContext";
+import type { AspectRatio } from "@/lib/aspect-ratios";
+
+import { openPresentChannel, type PresentMessage } from "./present-channel";
+
+interface PresenterViewProps {
+  slides: Slide[];
+  deckId: string;
+  startIndex?: number;
+  aspectRatio?: AspectRatio;
+}
+
+function formatElapsed(seconds: number) {
+  const mins = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  return `${String(mins).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
+}
+
+export default function PresenterView({
+  slides,
+  deckId,
+  startIndex = 0,
+  aspectRatio,
+}: PresenterViewProps) {
+  const t = useT();
+  const [index, setIndex] = useState(startIndex);
+  const [elapsed, setElapsed] = useState(0);
+  const channelRef = useRef<BroadcastChannel | null>(null);
+
+  useEffect(() => {
+    const channel = openPresentChannel(deckId);
+    channelRef.current = channel;
+    if (!channel) return;
+    channel.onmessage = (event: MessageEvent<PresentMessage>) => {
+      if (event.data?.type === "state") setIndex(event.data.index);
+    };
+    channel.postMessage({ type: "hello" } satisfies PresentMessage);
+    return () => {
+      channel.close();
+      channelRef.current = null;
+    };
+  }, [deckId]);
+
+  useEffect(() => {
+    const timer = window.setInterval(() => setElapsed((s) => s + 1), 1000);
+    return () => window.clearInterval(timer);
+  }, []);
+
+  const send = useCallback((message: PresentMessage) => {
+    channelRef.current?.postMessage(message);
+  }, []);
+
+  const goNext = useCallback(
+    () => send({ type: "command", command: "next" }),
+    [send],
+  );
+  const goPrev = useCallback(
+    () => send({ type: "command", command: "prev" }),
+    [send],
+  );
+
+  useEffect(() => {
+    const handleKey = (e: KeyboardEvent) => {
+      switch (e.key) {
+        case "ArrowRight":
+        case "ArrowDown":
+        case " ":
+          e.preventDefault();
+          goNext();
+          break;
+        case "ArrowLeft":
+        case "ArrowUp":
+          e.preventDefault();
+          goPrev();
+          break;
+      }
+    };
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, [goNext, goPrev]);
+
+  const safeSlides = useMemo(
+    () => (Array.isArray(slides) ? slides.filter(Boolean) : []),
+    [slides],
+  );
+  const current = safeSlides[index];
+  const next = safeSlides[index + 1];
+  const notes = current?.notes?.trim();
+
+  return (
+    <div className="fixed inset-0 flex flex-col bg-[hsl(240,6%,6%)] text-white">
+      <header className="flex items-center justify-between gap-4 border-b border-white/10 px-5 py-3">
+        <span className="font-mono text-sm text-white/50">
+          {index + 1} / {safeSlides.length}
+        </span>
+        <span className="font-mono text-2xl tabular-nums text-white/80">
+          {formatElapsed(elapsed)}
+        </span>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={goPrev}
+            disabled={index === 0}
+            className="cursor-pointer rounded-lg bg-white/10 p-2 hover:bg-white/20 disabled:cursor-not-allowed disabled:opacity-30"
+            aria-label={t("presentation.previousSlide")}
+          >
+            <IconChevronLeft className="h-4 w-4" />
+          </button>
+          <button
+            onClick={goNext}
+            disabled={index >= safeSlides.length - 1}
+            className="cursor-pointer rounded-lg bg-white/10 p-2 hover:bg-white/20 disabled:cursor-not-allowed disabled:opacity-30"
+            aria-label={t("presentation.nextSlide")}
+          >
+            <IconChevronRight className="h-4 w-4" />
+          </button>
+          <button
+            onClick={() => window.close()}
+            className="cursor-pointer rounded-lg bg-white/10 p-2 hover:bg-white/20"
+            aria-label={t("presentation.closePresenterView")}
+          >
+            <IconX className="h-4 w-4" />
+          </button>
+        </div>
+      </header>
+
+      <div className="flex min-h-0 flex-1 flex-col gap-4 p-4">
+        <div className="flex gap-4">
+          <div className="w-2/3 overflow-hidden rounded-lg bg-black">
+            {current && (
+              <SlideRenderer
+                slide={current}
+                thumbnail
+                aspectRatio={aspectRatio}
+              />
+            )}
+          </div>
+          <div className="flex w-1/3 flex-col gap-2">
+            <div className="font-mono text-[11px] uppercase tracking-widest text-white/40">
+              {t("presentation.upNext")}
+            </div>
+            {next ? (
+              <div className="overflow-hidden rounded-lg bg-black">
+                <SlideRenderer
+                  slide={next}
+                  thumbnail
+                  aspectRatio={aspectRatio}
+                />
+              </div>
+            ) : (
+              <div className="rounded-lg bg-white/[0.04] p-4 text-sm text-white/40">
+                {t("presentation.endOfDeck")}
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="min-h-0 flex-1 overflow-y-auto rounded-lg bg-white/[0.04] p-5">
+          <div className="mb-2 font-mono text-[11px] uppercase tracking-widest text-white/40">
+            {t("presentation.speakerNotes")}
+          </div>
+          {notes ? (
+            <p className="whitespace-pre-wrap text-lg leading-relaxed text-white/90">
+              {notes}
+            </p>
+          ) : (
+            <p className="text-sm text-white/40">
+              {t("presentation.noNotesForSlide")}
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/corpus/templates/slides/app/components/presentation/present-channel.ts

@@ -0,0 +1,15 @@
+/**
+ * Cross-window channel between the fullscreen presentation and the presenter
+ * window. The presenter window never advances on its own — it sends commands
+ * and renders whatever state the presentation echoes back, so build steps
+ * (which move the step, not the slide) stay authoritative in one place.
+ */
+export type PresentMessage =
+  | { type: "state"; index: number }
+  | { type: "command"; command: "next" | "prev" }
+  | { type: "hello" };
+
+export function openPresentChannel(deckId: string): BroadcastChannel | null {
+  if (typeof BroadcastChannel === "undefined") return null;
+  return new BroadcastChannel(`slides-present:${deckId}`);
+}

package/corpus/templates/slides/app/i18n/en-US.ts

@@ -256,7 +256,10 @@ const messages = {
     downloadHtml: "Download as HTML",
     exportPdf: "Export as PDF",
     exportPptx: "Export as PPTX",
-    downloadGoogleSlides: "Download for Google Slides",
+    openInGoogleSlides: "Open in Google Slides",
+    googleSlidesCreated: "Opened in Google Slides",
+    googleSlidesCreatedHint:
+      "A copy of this deck was created in your Google Drive.",
     duplicateDeck: "Duplicate deck",
   },
   share: {
@@ -467,6 +470,12 @@ const messages = {
     slides: "Slides",
   },
   presentation: {
+    presenterView: "Presenter view",
+    speakerNotes: "Speaker notes",
+    noNotesForSlide: "No notes for this slide",
+    upNext: "Up next",
+    endOfDeck: "End of deck",
+    closePresenterView: "Close presenter view",
     noSlides: "No slides to present",
     previousSlide: "Previous slide",
     nextSlide: "Next slide",

package/corpus/templates/slides/app/lib/export-google-slides-client.ts

@@ -0,0 +1,67 @@
+import { appBasePath } from "@agent-native/core/client/api-path";
+
+import type { AspectRatio } from "./aspect-ratios";
+import { buildDeckPptxBlob } from "./export-pptx-client";
+
+interface GoogleSlidesExportSlide {
+  id: string;
+  notes?: string;
+}
+
+export type GoogleSlidesExportResult =
+  | { url: string }
+  /** Drive was unavailable, so the PPTX was downloaded for a manual import. */
+  | { url: null; downloaded: true; reason: string };
+
+function triggerBlobDownload(blob: Blob, filename: string) {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.rel = "noopener";
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  window.setTimeout(() => URL.revokeObjectURL(url), 60_000);
+}
+
+/**
+ * Creates a native Google Slides deck in the user's Drive when their Google
+ * account is connected. Without a connection — or if Drive rejects the upload —
+ * the PPTX is downloaded instead so the user can import it by hand, and the
+ * reason is reported rather than swallowed.
+ */
+export async function exportDeckToGoogleSlides(
+  deckTitle: string,
+  slides: GoogleSlidesExportSlide[],
+  aspectRatio?: AspectRatio,
+): Promise<GoogleSlidesExportResult> {
+  const { blob, filename } = await buildDeckPptxBlob(
+    deckTitle,
+    slides,
+    aspectRatio,
+  );
+
+  const form = new FormData();
+  form.append("file", blob, filename);
+  form.append("title", deckTitle);
+
+  const res = await fetch(`${appBasePath()}/api/exports/google-slides`, {
+    method: "POST",
+    body: form,
+  });
+
+  const payload = (await res.json().catch(() => null)) as {
+    url?: string;
+    error?: string;
+  } | null;
+
+  if (res.ok && payload?.url) return { url: payload.url };
+
+  triggerBlobDownload(blob, filename);
+  return {
+    url: null,
+    downloaded: true,
+    reason: payload?.error ?? `HTTP ${res.status}`,
+  };
+}

package/corpus/templates/slides/app/lib/export-pptx-client.ts

@@ -313,11 +313,11 @@ function widenNoWrapTextElements(root: HTMLElement) {
   }
 }
 
-export async function exportDeckAsPptx(
+export async function buildDeckPptxBlob(
   deckTitle: string,
   slides: PptxExportSlide[],
   aspectRatio?: AspectRatio,
-): Promise<void> {
+): Promise<{ blob: Blob; filename: string }> {
   const { exportToPptx } = await importExportModule(
     () => import("dom-to-pptx"),
   );
@@ -359,10 +359,23 @@ export async function exportDeckAsPptx(
     );
 
     const blob = await addSpeakerNotesToPptxBlob(initialBlob, slides);
-    triggerBlobDownload(blob, safePptxName(deckTitle));
+    return { blob, filename: safePptxName(deckTitle) };
   } finally {
     for (const clone of exportClones) {
       clone.cleanup();
     }
   }
 }
+
+export async function exportDeckAsPptx(
+  deckTitle: string,
+  slides: PptxExportSlide[],
+  aspectRatio?: AspectRatio,
+): Promise<void> {
+  const { blob, filename } = await buildDeckPptxBlob(
+    deckTitle,
+    slides,
+    aspectRatio,
+  );
+  triggerBlobDownload(blob, filename);
+}

package/corpus/templates/slides/app/pages/DeckEditor.tsx

@@ -62,6 +62,7 @@ import {
 } from "@/hooks/use-slide-comments";
 import type { AspectRatio } from "@/lib/aspect-ratios";
 import { getPreset } from "@/lib/design-systems";
+import { exportDeckToGoogleSlides } from "@/lib/export-google-slides-client";
 import { exportDeckAsPdf } from "@/lib/export-pdf-client";
 import { exportDeckAsPptx } from "@/lib/export-pptx-client";
 import {
@@ -854,6 +855,16 @@ export default function DeckEditor() {
           }
           await exportDeckAsPptx(deck.title, slides, deck.aspectRatio);
         }}
+        onExportGoogleSlides={async () => {
+          const slides = deck.slides.map((s) => ({
+            id: s.id,
+            notes: s.notes,
+          }));
+          if (slides.length === 0) {
+            throw new Error(t("deckEditor.deckHasNoSlides"));
+          }
+          return exportDeckToGoogleSlides(deck.title, slides, deck.aspectRatio);
+        }}
         aspectRatio={deck.aspectRatio}
         designSystemTitle={designSystemTitle}
         onSetAspectRatio={(ratio: AspectRatio) => {

package/corpus/templates/slides/app/pages/Presentation.tsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 import { useParams, Navigate, useSearchParams } from "react-router";
 
 import PresentationView from "@/components/presentation/PresentationView";
+import PresenterView from "@/components/presentation/PresenterView";
 import { useDecks } from "@/context/DeckContext";
 import type { Deck } from "@/context/DeckContext";
 
@@ -45,10 +46,14 @@ export default function Presentation() {
     };
   }, [contextDeck, id, loading]);
 
-  if (loading || fallbackState === "loading") {
+  if (!id) return <Navigate to="/" replace />;
+  // "Not fetched yet" is not "not found": on a cold load of this URL the deck
+  // context is empty and the fallback fetch has not run, so redirecting on a
+  // falsy deck bounced every direct/presenter/share link back to the index.
+  if (!deck && fallbackState !== "missing") {
     return <div className="h-screen bg-black" />;
   }
-  if (!deck || !id || fallbackState === "missing") {
+  if (!deck) {
     return <Navigate to="/" replace />;
   }
 
@@ -58,8 +63,11 @@ export default function Presentation() {
     ? Math.max(0, parsedSlide - 1)
     : 0;
 
+  const View =
+    searchParams.get("presenter") === "1" ? PresenterView : PresentationView;
+
   return (
-    <PresentationView
+    <View
       slides={Array.isArray(deck.slides) ? deck.slides : []}
       deckId={id}
       startIndex={startSlide}

package/corpus/templates/slides/changelog/2026-07-28-export-to-google-slides-now-creates-the-deck-directly-in-you.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-28
+---
+
+Export to Google Slides now creates the deck directly in your Google Drive when your Google account is connected, instead of only downloading a PPTX to import by hand.

package/corpus/templates/slides/changelog/2026-07-28-opening-a-presentation-link-directly-no-longer-bounces-back-.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-28
+---
+
+Opening a presentation link directly no longer bounces back to the deck list.

package/corpus/templates/slides/changelog/2026-07-28-presenter-view-open-a-second-window-while-presenting-to-see-.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-07-28
+---
+
+Presenter view: open a second window while presenting to see speaker notes, the next slide, and a timer, with both windows kept in sync.