@agent-native/core 0.126.0 → 0.127.1

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.

package/corpus/templates/slides/server/routes/api/exports/google-slides.post.ts

@@ -0,0 +1,90 @@
+import { getSession, runWithRequestContext } from "@agent-native/core/server";
+import {
+  defineEventHandler,
+  readMultipartFormData,
+  setResponseStatus,
+} from "h3";
+
+import { getGoogleDocsAccessToken } from "../../../lib/google-docs-oauth.js";
+
+const PPTX_CONTENT_TYPE =
+  "application/vnd.openxmlformats-officedocument.presentationml.presentation";
+const GOOGLE_SLIDES_MIME = "application/vnd.google-apps.presentation";
+const UPLOAD_URL =
+  "https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart&fields=id,webViewLink";
+
+/**
+ * Uploads a browser-generated PPTX into the user's Drive, letting Drive convert
+ * it to a native Google Slides deck. The PPTX comes from the client because the
+ * browser export renders the real slide DOM — the server-side pptxgenjs export
+ * is a lower-fidelity fallback and would ship a visibly worse deck to Google.
+ */
+export default defineEventHandler(async (event) => {
+  const session = await getSession(event).catch(() => null);
+  if (!session?.email) {
+    setResponseStatus(event, 401);
+    return { error: "Unauthorized" };
+  }
+
+  const parts = (await readMultipartFormData(event)) ?? [];
+  const file = parts.find((part) => part.name === "file");
+  const titlePart = parts.find((part) => part.name === "title");
+  const title = titlePart
+    ? new TextDecoder().decode(titlePart.data).trim() || "Untitled deck"
+    : "Untitled deck";
+
+  if (!file?.data?.length) {
+    setResponseStatus(event, 400);
+    return { error: "file required" };
+  }
+
+  // Same request context the actions run in — Google's client credentials can
+  // be org-scoped vault secrets, and resolving them without the org reports the
+  // integration as unconfigured.
+  const account = await runWithRequestContext(
+    { userEmail: session.email, orgId: session.orgId },
+    () => getGoogleDocsAccessToken(session.email),
+  );
+  if (!account) {
+    setResponseStatus(event, 409);
+    return {
+      error: "No connected Google account.",
+      code: "google-not-connected",
+    };
+  }
+
+  const boundary = `an-slides-${Math.random().toString(36).slice(2)}`;
+  const body = new Blob([
+    `--${boundary}\r\nContent-Type: application/json; charset=UTF-8\r\n\r\n`,
+    JSON.stringify({ name: title, mimeType: GOOGLE_SLIDES_MIME }),
+    `\r\n--${boundary}\r\nContent-Type: ${PPTX_CONTENT_TYPE}\r\n\r\n`,
+    new Uint8Array(file.data),
+    `\r\n--${boundary}--`,
+  ]);
+
+  const response = await fetch(UPLOAD_URL, {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${account.accessToken}`,
+      "Content-Type": `multipart/related; boundary=${boundary}`,
+    },
+    body,
+  });
+
+  const result = (await response.json().catch(() => null)) as {
+    id?: string;
+    webViewLink?: string;
+    error?: { message?: string };
+  } | null;
+
+  if (!response.ok || !result?.webViewLink) {
+    setResponseStatus(event, 502);
+    return {
+      error:
+        result?.error?.message ??
+        `Google Drive returned HTTP ${response.status} while creating the deck.`,
+    };
+  }
+
+  return { url: result.webViewLink, accountEmail: account.accountEmail };
+});

package/corpus/toolkit/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @agent-native/toolkit
 
+## 0.10.9
+
+### Patch Changes
+
+- cbc6936: Show only the connect actions in the composer model picker when no LLM provider is configured, instead of a list of unpickable "needs API key" models, and surface Builder connect failures instead of leaving the "Connect Builder.io" button looking dead when the popup is blocked.
+
 ## 0.10.8
 
 ### Patch Changes

package/corpus/toolkit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/toolkit",
-  "version": "0.10.8",
+  "version": "0.10.9",
   "description": "Reusable app-building UI and helpers for Agent-Native apps.",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {