@agent-native/core-corpus 0.213.1 → 0.216.0

package/corpus/templates/slides-2/app/routes/p.$id.tsx

@@ -0,0 +1,195 @@
+import { getConfiguredAppBasePath } from "@agent-native/core/server";
+import {
+  AGENT_READABLE_RESOURCE_SCRIPT_TYPE,
+  buildResourceSocialMeta,
+  buildAgentReadableResourceDiscovery,
+  normalizeDocumentTitle,
+  safeJsonForHtml,
+} from "@agent-native/core/shared";
+import { summarizeSlideContent } from "@shared/deck-title";
+import { and, eq } from "drizzle-orm";
+import { useLayoutEffect, useRef, useState } from "react";
+import type {
+  HeadersArgs,
+  LoaderFunctionArgs,
+  MetaFunction,
+} from "react-router";
+import { useLoaderData } from "react-router";
+
+import SharedPresentation from "@/pages/SharedPresentation";
+
+import { getDb, schema } from "../../server/db";
+import { toSharedDeck } from "../../server/lib/shared-deck";
+import { DECK_AGENT_CONTEXT_ENDPOINT } from "../../shared/agent-readable";
+
+export function headers({ loaderHeaders }: HeadersArgs) {
+  const headers = new Headers(loaderHeaders);
+  headers.set("Referrer-Policy", "no-referrer");
+  return headers;
+}
+
+export async function loader({ params, request }: LoaderFunctionArgs) {
+  const id = params.id;
+  if (!id) throw new Response("Not found", { status: 404 });
+  const basePath = getConfiguredAppBasePath();
+
+  const db = getDb();
+  const [deckAccess] = await db
+    .select({
+      id: schema.decks.id,
+      visibility: schema.decks.visibility,
+    })
+    .from(schema.decks)
+    .where(eq(schema.decks.id, id))
+    .limit(1);
+
+  if (!deckAccess) throw new Response("Not found", { status: 404 });
+  if (deckAccess.visibility !== "public") {
+    return { deck: null, error: "restricted", restricted: { id, basePath } };
+  }
+
+  const [deck] = await db
+    .select({ title: schema.decks.title, data: schema.decks.data })
+    .from(schema.decks)
+    .where(and(eq(schema.decks.id, id), eq(schema.decks.visibility, "public")))
+    .limit(1);
+
+  if (!deck) {
+    return { deck: null, error: "restricted", restricted: { id, basePath } };
+  }
+  return {
+    deck: toSharedDeck(deck),
+    id,
+    basePath,
+    origin: new URL(request.url).origin,
+    isPublic: true,
+  };
+}
+
+export const meta: MetaFunction<typeof loader> = ({ loaderData }) => {
+  const socialTitle = loaderData?.deck?.title
+    ? normalizeDocumentTitle(loaderData.deck.title, "Shared Presentation")
+    : "Shared Presentation";
+  const description = summarizeSlideContent(
+    loaderData?.deck?.slides[0]?.content,
+  );
+  return [
+    { title: `${socialTitle} — Slides 2` },
+    ...(loaderData?.deck && loaderData.isPublic
+      ? buildResourceSocialMeta({
+          title: socialTitle,
+          description,
+          origin: loaderData.origin,
+          basePath: loaderData.basePath,
+        })
+      : []),
+  ];
+};
+
+export default function PublicDeckRoute() {
+  const data = useLoaderData<typeof loader>();
+  const restricted = data.deck === null ? data.restricted : undefined;
+  const [agentAccess, setAgentAccess] = useState<{
+    deckId: string;
+    token: string;
+  } | null>(null);
+  const agentAccessRef = useRef<{ deckId: string; token: string } | null>(null);
+  const authorizedAgentAccess =
+    restricted && agentAccess && agentAccess.deckId === restricted.id
+      ? { ...agentAccess, basePath: restricted.basePath }
+      : null;
+
+  useLayoutEffect(() => {
+    const url = new URL(window.location.href);
+    let token = url.searchParams.get("agent_access");
+    if (token !== null) {
+      url.searchParams.delete("agent_access");
+      window.history.replaceState(
+        window.history.state,
+        "",
+        `${url.pathname}${url.search}${url.hash}`,
+      );
+    }
+
+    if (!restricted) return;
+    token ??=
+      agentAccessRef.current?.deckId === restricted.id
+        ? agentAccessRef.current.token
+        : null;
+    if (token) {
+      agentAccessRef.current = { deckId: restricted.id, token };
+      setAgentAccess(agentAccessRef.current);
+      return;
+    }
+    window.location.replace(`${restricted.basePath}/deck/${restricted.id}`);
+  }, [restricted]);
+
+  return (
+    <>
+      {data.deck ? (
+        <AgentReadableDeckDiscovery
+          id={data.id}
+          title={data.deck.title}
+          basePath={data.basePath}
+        />
+      ) : authorizedAgentAccess ? (
+        <AgentReadableDeckDiscovery
+          id={authorizedAgentAccess.deckId}
+          basePath={authorizedAgentAccess.basePath}
+          token={authorizedAgentAccess.token}
+        />
+      ) : null}
+      <SharedPresentation
+        initialDeck={data.deck}
+        sourceDeckId={data.deck ? data.id : undefined}
+        initialError={data.deck ? data.error : undefined}
+        agentAccessDeckId={restricted?.id}
+        agentAccessToken={authorizedAgentAccess?.token ?? null}
+      />
+    </>
+  );
+}
+
+export function buildDeckDiscovery({
+  id,
+  title,
+  basePath,
+  token,
+}: {
+  id: string;
+  title?: string;
+  basePath?: string;
+  token?: string | null;
+}) {
+  return buildAgentReadableResourceDiscovery({
+    resourceType: "deck",
+    resourceId: id,
+    title,
+    path: `/p/${id}`,
+    contextEndpoint: DECK_AGENT_CONTEXT_ENDPOINT,
+    basePath,
+    token,
+    instructions:
+      "Use contextUrl to read this shared Slides deck as JSON. Slide numbers are 1-based for users.",
+  });
+}
+
+function AgentReadableDeckDiscovery({
+  id,
+  title,
+  basePath,
+  token = null,
+}: {
+  id: string;
+  title?: string;
+  basePath?: string;
+  token?: string | null;
+}) {
+  const discovery = buildDeckDiscovery({ id, title, basePath, token });
+  return (
+    <script
+      type={AGENT_READABLE_RESOURCE_SCRIPT_TYPE}
+      dangerouslySetInnerHTML={{ __html: safeJsonForHtml(discovery) }}
+    />
+  );
+}

package/corpus/templates/slides-2/app/routes/settings.$.tsx

@@ -0,0 +1 @@
+export { default, meta } from "./settings.js";

package/corpus/templates/slides-2/app/routes/settings.tsx

@@ -0,0 +1,131 @@
+import { useT } from "@agent-native/core/client/i18n";
+import { buildSettingsRoute } from "@agent-native/core/client/navigation";
+import { useOrg } from "@agent-native/core/client/org";
+import { CREATIVE_CONTEXT_LIBRARY_LAB } from "@agent-native/creative-context";
+import {
+  createCreativeContextAgentTab,
+  useCreativeContextLab,
+  type CreativeContextAgentTabFactory,
+} from "@agent-native/creative-context/client";
+import { useSetPageTitle } from "@agent-native/toolkit/app-shell";
+import { ObservabilityDashboard } from "@agent-native/toolkit/app/observability";
+import {
+  AccountSettingsCard,
+  SettingsTabsPage,
+  useAgentSettingsTabs,
+  type SettingsSearchEntry,
+} from "@agent-native/toolkit/app/settings";
+import { SLIDES_LABS } from "@shared/labs";
+import { IconActivity } from "@tabler/icons-react";
+import { useMemo } from "react";
+
+import {
+  COMMENT_EMAILS_ROW_ID,
+  NotificationSettings,
+} from "@/components/settings/notification-settings";
+import messages from "@/i18n/en-US";
+import { localizeSlidesChangelog } from "@/lib/localize-slides-changelog";
+
+import changelog from "../../CHANGELOG.md?raw";
+
+export function meta() {
+  return [{ title: messages.raw.routeSettingsTitle }];
+}
+
+// Settings gives the library its own page and header.
+const createCreativeContextSettingsTab: CreativeContextAgentTabFactory = (
+  context,
+) => createCreativeContextAgentTab({ ...context, variant: "settings" });
+
+export default function SettingsRoute() {
+  const t = useT();
+  const localizedChangelog = localizeSlidesChangelog(changelog, {
+    editorHoveredObjects: t("slidesChangelog.editorHoveredObjects"),
+    deckEditingControls: t("slidesChangelog.deckEditingControls"),
+    googleSlidesMissingImageData: t(
+      "slidesChangelog.googleSlidesMissingImageData",
+    ),
+    globalMediaPickerScope: t("slidesChangelog.globalMediaPickerScope"),
+    savedSlideImages: t("slidesChangelog.savedSlideImages"),
+  });
+  const creativeContextEnabled = useCreativeContextLab();
+  const {
+    data: activeOrg,
+    isLoading: orgLoading,
+    isError: orgError,
+  } = useOrg();
+  const agentSettingsTabs = useAgentSettingsTabs({
+    agentAdditionalTabFactories: creativeContextEnabled
+      ? [createCreativeContextSettingsTab]
+      : [],
+  });
+  const observabilityBasePath = buildSettingsRoute("observability");
+  // Observability is a Slides page at its Settings path, so its nav item must
+  // not carry `href`: that renders it as a link out of Settings.
+  const observabilityTabs =
+    !orgLoading &&
+    !orgError &&
+    activeOrg?.orgId &&
+    (activeOrg.role === "owner" || activeOrg.role === "admin")
+      ? [
+          {
+            id: "observability",
+            label: t("settings.agentObservability"),
+            icon: IconActivity,
+            group: "agent",
+            content: (
+              <ObservabilityDashboard
+                routeBasePath={observabilityBasePath}
+                showHumanReview
+              />
+            ),
+          },
+        ]
+      : [];
+  const settingsTabs = [...agentSettingsTabs, ...observabilityTabs];
+  useSetPageTitle(t("settings.title"));
+  const labs = useMemo(
+    () => [
+      ...SLIDES_LABS.map((lab) => ({
+        ...lab,
+        displayName: t("deckEditor.layoutOverflowWarning"),
+        description: t("settings.labLayoutOverflowWarningDescription"),
+      })),
+      {
+        ...CREATIVE_CONTEXT_LIBRARY_LAB,
+        displayName: t("creativeContext.share.title"),
+        description: t("creativeContext.description"),
+      },
+    ],
+    [t],
+  );
+
+  const notificationsSearchEntries = useMemo<SettingsSearchEntry[]>(
+    () => [
+      {
+        id: "slides-comment-emails",
+        label: t("settings.commentsAndReplies"),
+        keywords: "email notifications deck comments replies alerts",
+        hash: COMMENT_EMAILS_ROW_ID,
+      },
+    ],
+    [t],
+  );
+
+  // Language lives on Account › Preferences, comment emails on the
+  // Notifications page, and the library on its own page, so Slides adds no
+  // groups to its General page.
+  return (
+    <SettingsTabsPage
+      notifications={<NotificationSettings />}
+      notificationsSearchEntries={notificationsSearchEntries}
+      account={<AccountSettingsCard />}
+      extraTabs={settingsTabs}
+      labs={labs}
+      labsIntro={t("settings.labsIntro")}
+      labsLabel={t("settings.labs")}
+      mcpAbout={t("settings.mcpAbout")}
+      whatsNewMarkdown={localizedChangelog}
+    />
+  );
+}

package/corpus/templates/slides-2/app/routes/share.$token.tsx

@@ -0,0 +1,137 @@
+import { appBasePath } from "@agent-native/core/client/api-path";
+import {
+  AGENT_READABLE_RESOURCE_PAYLOAD_TYPE,
+  AGENT_READABLE_RESOURCE_SCRIPT_TYPE,
+  buildResourceSocialMeta,
+  normalizeDocumentTitle,
+  safeJsonForHtml,
+} from "@agent-native/core/shared";
+import type { SharedDeckResponse } from "@shared/api";
+import { summarizeSlideContent } from "@shared/deck-title";
+import type { LoaderFunctionArgs, MetaFunction } from "react-router";
+import { useLoaderData, useParams } from "react-router";
+
+import messages from "@/i18n/en-US";
+import SharedPresentation from "@/pages/SharedPresentation";
+
+type LoaderData =
+  | {
+      deck: SharedDeckResponse;
+      error?: undefined;
+      basePath: string;
+      origin: string;
+    }
+  | { deck: null; error: string };
+
+function normalizeBasePath(value: string | undefined): string {
+  if (!value || value === "/") return "";
+  const trimmed = value.trim();
+  if (!trimmed || trimmed === "/") return "";
+  return `/${trimmed.replace(/^\/+/, "").replace(/\/+$/, "")}`;
+}
+
+function appBasePathForRequest(): string {
+  return appBasePath();
+}
+
+export async function loader({
+  params,
+  url: requestUrl,
+}: LoaderFunctionArgs): Promise<LoaderData> {
+  if (!params.token) {
+    return { deck: null, error: "Token is required" };
+  }
+
+  const basePath = appBasePathForRequest();
+  const url = new URL(`${basePath}/api/share/${params.token}`, requestUrl);
+  const res = await fetch(url, { headers: { accept: "application/json" } });
+  // coercion-ok: Error responses may omit JSON; null selects the generic load error below.
+  const data = await res.json().catch(() => null);
+
+  if (!res.ok) {
+    return {
+      deck: null,
+      error: data?.error || "Failed to load presentation",
+    };
+  }
+
+  return {
+    deck: data as SharedDeckResponse,
+    basePath,
+    origin: new URL(requestUrl).origin,
+  };
+}
+
+export const meta: MetaFunction<typeof loader> = ({ loaderData }) => {
+  const title = loaderData?.deck?.title
+    ? normalizeDocumentTitle(
+        loaderData.deck.title,
+        messages.raw.routeSharedTitle,
+      )
+    : messages.raw.routeSharedTitle;
+  const description = summarizeSlideContent(
+    loaderData?.deck?.slides[0]?.content,
+  );
+  return [
+    { title: `${title} — Slides 2` },
+    ...(loaderData?.deck
+      ? buildResourceSocialMeta({
+          title,
+          description,
+          origin: loaderData.origin,
+          basePath: loaderData.basePath,
+        })
+      : []),
+  ];
+};
+
+export default function SharedPresentationRoute() {
+  const data = useLoaderData<typeof loader>();
+  return (
+    <>
+      {data.deck ? (
+        <SnapshotDiscovery deck={data.deck} basePath={data.basePath} />
+      ) : null}
+      <SharedPresentation initialDeck={data.deck} initialError={data.error} />
+    </>
+  );
+}
+
+export function buildSnapshotDiscovery({
+  deck,
+  token,
+  basePath,
+}: {
+  deck: SharedDeckResponse;
+  token: string;
+  basePath?: string;
+}) {
+  const normalizedBasePath = normalizeBasePath(basePath);
+  return {
+    type: AGENT_READABLE_RESOURCE_PAYLOAD_TYPE,
+    resourceType: "deck-snapshot",
+    resourceId: token,
+    title: deck.title,
+    contextUrl: `${normalizedBasePath}/api/share/${encodeURIComponent(token)}`,
+    instructions:
+      "Use contextUrl to read this shared Slides snapshot as JSON. This snapshot link is independent of live deck visibility.",
+  };
+}
+
+function SnapshotDiscovery({
+  deck,
+  basePath,
+}: {
+  deck: SharedDeckResponse;
+  basePath: string;
+}) {
+  const { token } = useParams<{ token: string }>();
+  if (!token) return null;
+  const discovery = buildSnapshotDiscovery({ deck, token, basePath });
+  return (
+    <script
+      type={AGENT_READABLE_RESOURCE_SCRIPT_TYPE}
+      dangerouslySetInnerHTML={{ __html: safeJsonForHtml(discovery) }}
+    />
+  );
+}

package/corpus/templates/slides-2/app/routes/slide.tsx

@@ -0,0 +1,209 @@
+import { callActionWithRetry } from "@agent-native/core/client/hooks";
+import { useT } from "@agent-native/core/client/i18n";
+import {
+  isInAgentEmbed,
+  postNavigate,
+} from "@agent-native/core/client/navigation";
+import { normalizeDocumentTitle } from "@agent-native/core/shared";
+import { IconExternalLink } from "@tabler/icons-react";
+import { useEffect, useRef, useState } from "react";
+import { useSearchParams } from "react-router";
+
+import SlideContentRenderer from "@/components/slides-2-runtime/SlideContentRenderer";
+import type { Slide } from "@/context/DeckContext";
+import { useDeckDesignSystem } from "@/hooks/use-deck-design-system";
+import messages from "@/i18n/en-US";
+import type { AspectRatio } from "@/lib/aspect-ratios";
+
+import type { SlidePosition } from "../../shared/slide-number";
+
+export function meta() {
+  return [{ title: messages.raw.slidePreviewTitle }];
+}
+
+function SlideError({ message }: { message: string }) {
+  const t = useT();
+  return (
+    <div
+      className={
+        /* guard:allow-raw-color — slide preview errors remain on the fixed black stage. */ "flex h-screen w-screen items-center justify-center bg-black"
+      }
+    >
+      <div className="text-center">
+        <div
+          className={
+            /* guard:allow-raw-color — slide preview error copy contrasts with the fixed black stage. */ "text-sm font-medium text-white/60"
+          }
+        >
+          {t("raw.slideUnavailable")}
+        </div>
+        <div
+          className={
+            /* guard:allow-raw-color — slide preview error copy contrasts with the fixed black stage. */ "mt-1 text-xs text-white/35"
+          }
+        >
+          {message}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function SlideRoute() {
+  const t = useT();
+  const [params] = useSearchParams();
+  const deckId = params.get("deckId");
+  const slideNumberParam = params.get("slideNumber");
+  const slideIndexParam = params.get("slideIndex");
+
+  const [slide, setSlide] = useState<Slide | null>(null);
+  const [slidePosition, setSlidePosition] = useState<SlidePosition | undefined>(
+    undefined,
+  );
+  const [aspectRatio, setAspectRatio] = useState<AspectRatio | undefined>(
+    undefined,
+  );
+  const [designSystemId, setDesignSystemId] = useState<string | null>(null);
+  const [deckTitle, setDeckTitle] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const loadRequestId = useRef(0);
+  const { designSystem } = useDeckDesignSystem(designSystemId, deckId);
+
+  const slideNumber =
+    slideNumberParam !== null ? parseInt(slideNumberParam, 10) : null;
+  const slideIndex =
+    slideNumber !== null
+      ? slideNumber - 1
+      : slideIndexParam !== null
+        ? parseInt(slideIndexParam, 10)
+        : 0;
+  const inEmbed = isInAgentEmbed();
+
+  useEffect(() => {
+    const nextTitle = deckTitle
+      ? `${normalizeDocumentTitle(deckTitle, t("styleInspector.slide"))} — ${t("navigation.brand")}`
+      : t("raw.slidePreviewTitle");
+    const previousTitle = document.title;
+    document.title = nextTitle;
+    return () => {
+      if (document.title === nextTitle) document.title = previousTitle;
+    };
+  }, [deckTitle, t]);
+
+  useEffect(() => {
+    const requestId = ++loadRequestId.current;
+    const isCurrentRequest = () => loadRequestId.current === requestId;
+
+    setLoading(true);
+    setError(null);
+    setSlide(null);
+    setSlidePosition(undefined);
+    setAspectRatio(undefined);
+    setDesignSystemId(null);
+    setDeckTitle(null);
+
+    async function loadSlide() {
+      try {
+        if (!deckId) {
+          throw new Error(t("raw.missingDeckId"));
+        }
+        if (
+          slideNumberParam !== null &&
+          (slideNumber === null || isNaN(slideNumber) || slideNumber < 1)
+        ) {
+          throw new Error(t("raw.invalidSlideNumber"));
+        }
+        if (slideIndexParam !== null && isNaN(slideIndex)) {
+          throw new Error(t("raw.invalidSlideIndex"));
+        }
+
+        const deck = await callActionWithRetry<{
+          title?: string;
+          slides?: Slide[];
+          aspectRatio?: AspectRatio;
+          designSystemId?: string | null;
+        }>("get-deck", { id: deckId }, { method: "GET" });
+        if (!isCurrentRequest()) return;
+
+        const slides: Slide[] = deck.slides ?? [];
+        if (slides.length === 0) {
+          throw new Error(t("raw.deckHasNoSlides"));
+        }
+        const idx = Math.max(0, Math.min(slideIndex, slides.length - 1));
+        setSlide(slides[idx]);
+        setSlidePosition({ number: idx + 1, count: slides.length });
+        setDeckTitle(deck.title ?? null);
+        setAspectRatio(deck.aspectRatio);
+        setDesignSystemId(deck.designSystemId ?? null);
+      } catch (err: unknown) {
+        if (!isCurrentRequest()) return;
+
+        const status = (err as { status?: number } | undefined)?.status;
+        if (status === 404) {
+          setError(t("raw.deckNotFound"));
+        } else if (status !== undefined) {
+          setError(t("raw.deckLoadFailedStatus", { status }));
+        } else {
+          setError(
+            err instanceof Error ? err.message : t("raw.couldNotLoadSlide"),
+          );
+        }
+      } finally {
+        if (isCurrentRequest()) setLoading(false);
+      }
+    }
+
+    void loadSlide();
+
+    return () => {
+      if (isCurrentRequest()) loadRequestId.current += 1;
+    };
+  }, [deckId, slideIndex, slideIndexParam, slideNumber, slideNumberParam, t]);
+
+  if (loading) {
+    return (
+      <div
+        className={
+          /* guard:allow-raw-color — preserve the fixed slide preview stage while loading. */ "h-screen w-screen bg-black"
+        }
+      />
+    );
+  }
+
+  if (error || !slide || !deckId) {
+    return <SlideError message={error ?? t("raw.slideNotFound")} />;
+  }
+
+  function handleOpenInApp() {
+    postNavigate(`/deck/${deckId}/present?slide=${slideIndex + 1}`);
+  }
+
+  return (
+    <div
+      className={
+        /* guard:allow-raw-color — shared slide preview uses a theme-independent black stage. */ "relative h-screen w-screen overflow-hidden bg-black"
+      }
+    >
+      <SlideContentRenderer
+        slide={slide}
+        slidePosition={slidePosition}
+        sourceDeckId={deckId}
+        aspectRatio={aspectRatio}
+        designSystem={designSystem}
+      />
+
+      {inEmbed && (
+        <button
+          onClick={handleOpenInApp}
+          className={
+            /* guard:allow-raw-color — preview control stays legible over the fixed black stage. */ "absolute bottom-3 right-3 z-10 flex items-center gap-1.5 rounded-md bg-white/10 px-2.5 py-1.5 text-xs font-medium text-white/70 backdrop-blur-sm hover:bg-white/20 hover:text-white"
+          }
+        >
+          <IconExternalLink className="h-3.5 w-3.5" />
+          {t("raw.openInApp")}
+        </button>
+      )}
+    </div>
+  );
+}

package/corpus/templates/slides-2/app/routes/team.tsx

@@ -0,0 +1,11 @@
+import { Navigate } from "react-router";
+
+import messages from "@/i18n/en-US";
+
+export function meta() {
+  return [{ title: messages.raw.routeTeamTitle }];
+}
+
+export default function TeamRoute() {
+  return <Navigate to="/settings/organization" replace />;
+}

package/corpus/templates/slides-2/app/routes/templates.tsx

@@ -0,0 +1 @@
+export { default } from "@/pages/Templates";

package/corpus/templates/slides-2/app/routes/themes.$id.tsx

@@ -0,0 +1 @@
+export { default } from "@/pages/SlideThemeDetail";

package/corpus/templates/slides-2/app/routes/themes.tsx

@@ -0,0 +1 @@
+export { default } from "@/pages/SlideThemes";