@agent-native/core 0.86.1 → 0.88.0

package/corpus/templates/content/app/routes/p.$id.tsx

@@ -1,23 +1,82 @@
 import { agentNativePath, useT } from "@agent-native/core/client";
+import {
+  AGENT_ACCESS_PARAM,
+  verifyScopedAgentAccessToken,
+} from "@agent-native/core/server";
 import {
   getConfiguredAppBasePath,
   getRequestUserEmail,
 } from "@agent-native/core/server";
+import {
+  AGENT_READABLE_RESOURCE_SCRIPT_TYPE,
+  safeJsonForHtml,
+} from "@agent-native/core/shared";
 import { resolveAccess } from "@agent-native/core/sharing";
 import { buildPublicDocumentDescription } from "@shared/og-description";
 import { IconLock, IconMessageCircle } from "@tabler/icons-react";
 import { eq } from "drizzle-orm";
 import { useEffect, useState } from "react";
-import type { LoaderFunctionArgs, MetaFunction } from "react-router";
-import { redirect, useLoaderData } from "react-router";
+import type {
+  HeadersArgs,
+  LoaderFunctionArgs,
+  MetaFunction,
+} from "react-router";
+import { data, redirect, useLoaderData } from "react-router";
 
 import { VisualEditor } from "@/components/editor/VisualEditor";
 
 import { getDb, schema } from "../../server/db";
+import {
+  buildContentDocumentAgentDiscovery,
+  buildContentPublicDocumentUrl,
+  DOCUMENT_AGENT_RESOURCE_KIND,
+} from "../../shared/agent-readable";
+
+type PublicDocumentLoaderData =
+  | {
+      document: {
+        id: string;
+        title: string;
+        content: string;
+        updatedAt: string;
+        visibility: string;
+      };
+      agentAccessToken: string | null;
+      basePath: string;
+      unavailable?: undefined;
+    }
+  | {
+      document: null;
+      agentAccessToken: null;
+      basePath: string;
+      unavailable: { reason: "private"; id: string; basePath: string };
+    };
+
+const PRIVATE_AGENT_DOCUMENT_HEADERS = {
+  "Cache-Control": "private, max-age=0, no-store",
+  "Referrer-Policy": "no-referrer",
+};
 
-export async function loader({ params }: LoaderFunctionArgs) {
+function publicDocumentLoaderData(
+  payload: PublicDocumentLoaderData,
+  privateAgentAccess = false,
+) {
+  if (!privateAgentAccess) return payload;
+  return data(payload, {
+    headers: PRIVATE_AGENT_DOCUMENT_HEADERS,
+  });
+}
+
+export function headers({ loaderHeaders }: HeadersArgs) {
+  return loaderHeaders;
+}
+
+export async function loader({ params, request }: LoaderFunctionArgs) {
   const id = params.id;
   if (!id) throw new Response("Not found", { status: 404 });
+  const agentAccessToken = new URL(request.url).searchParams.get(
+    AGENT_ACCESS_PARAM,
+  );
 
   // This is a server loader; use the server-side base-path helper
   // (reads APP_BASE_PATH / VITE_APP_BASE_PATH at request time)
@@ -45,7 +104,22 @@ export async function loader({ params }: LoaderFunctionArgs) {
     .limit(1);
 
   if (!doc) throw new Response("Not found", { status: 404 });
-  if (doc.visibility === "public") return { document: doc };
+  const tokenAccess = agentAccessToken
+    ? verifyScopedAgentAccessToken(agentAccessToken, {
+        resourceKind: DOCUMENT_AGENT_RESOURCE_KIND,
+        resourceId: id,
+      }).ok
+    : false;
+  if (doc.visibility === "public" || tokenAccess) {
+    return publicDocumentLoaderData(
+      {
+        document: doc,
+        agentAccessToken: tokenAccess ? agentAccessToken : null,
+        basePath,
+      },
+      tokenAccess,
+    );
+  }
 
   // Doc exists but isn't public. SSR renders impersonally (no session is read
   // server-side, so the page can be CDN-cached for everyone), which means we
@@ -56,10 +130,12 @@ export async function loader({ params }: LoaderFunctionArgs) {
   // routes the viewer to the auth-guarded `/page/<id>` editor, where the real
   // per-user access check runs (signed-in-with-access sees the doc; everyone
   // else gets the standard sign-in / no-access handling).
-  return {
+  return publicDocumentLoaderData({
     document: null,
+    agentAccessToken: null,
+    basePath,
     unavailable: { reason: "private" as const, id, basePath },
-  };
+  });
 }
 
 export const meta: MetaFunction<typeof loader> = ({ loaderData }) => {
@@ -139,6 +215,7 @@ function renderMarkdownBlocks(content: string) {
 
 function PublicDocumentContextSync({
   document,
+  basePath,
 }: {
   document: {
     id: string;
@@ -146,6 +223,7 @@ function PublicDocumentContextSync({
     content: string;
     updatedAt: string;
   };
+  basePath?: string;
 }) {
   useEffect(() => {
     fetch(agentNativePath("/_agent-native/application-state/navigation"), {
@@ -156,10 +234,10 @@ function PublicDocumentContextSync({
         view: "public-document",
         documentId: document.id,
         title: document.title,
-        publicUrl: `/p/${document.id}`,
+        publicUrl: buildContentPublicDocumentUrl(document.id, { basePath }),
       }),
     }).catch(() => {});
-  }, [document.id, document.title]);
+  }, [basePath, document.id, document.title]);
 
   return null;
 }
@@ -178,6 +256,28 @@ function ReadOnlyMarkdownContent({ content }: { content: string }) {
   );
 }
 
+function AgentReadableDocumentDiscovery({
+  document,
+  token,
+  basePath,
+}: {
+  document: { id: string; title: string };
+  token?: string | null;
+  basePath?: string;
+}) {
+  const discovery = buildContentDocumentAgentDiscovery({
+    document,
+    token,
+    basePath,
+  });
+  return (
+    <script
+      type={AGENT_READABLE_RESOURCE_SCRIPT_TYPE}
+      dangerouslySetInnerHTML={{ __html: safeJsonForHtml(discovery) }}
+    />
+  );
+}
+
 function PrivateDocumentNotice({
   id,
   basePath,
@@ -230,7 +330,12 @@ export default function PublicDocumentPage() {
 
   return (
     <main className="min-h-screen bg-background text-foreground">
-      <PublicDocumentContextSync document={document} />
+      <PublicDocumentContextSync document={document} basePath={data.basePath} />
+      <AgentReadableDocumentDiscovery
+        document={document}
+        token={data.agentAccessToken}
+        basePath={data.basePath}
+      />
       <div className="mx-auto flex max-w-3xl justify-end px-6 pt-5 sm:px-8">
         <button
           type="button"

package/corpus/templates/content/package.json

@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "@agent-native/core": "workspace:*",
+    "@agent-native/toolkit": "workspace:*",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",

package/corpus/templates/content/server/db/index.ts

@@ -1,6 +1,10 @@
 import { createGetDb } from "@agent-native/core/db";
 import { registerShareableResource } from "@agent-native/core/sharing";
 
+import {
+  DOCUMENT_AGENT_CONTEXT_ENDPOINT,
+  DOCUMENT_AGENT_RESOURCE_KIND,
+} from "../../shared/agent-readable.js";
 import * as schema from "./schema.js";
 
 export const getDb = createGetDb(schema);
@@ -13,5 +17,10 @@ registerShareableResource({
   displayName: "Document",
   titleColumn: "title",
   getResourcePath: (document) => `/page/${document.id}`,
+  agentReadable: {
+    resourceKind: DOCUMENT_AGENT_RESOURCE_KIND,
+    getContextPath: () => DOCUMENT_AGENT_CONTEXT_ENDPOINT,
+    getPagePath: (document) => `/p/${document.id}`,
+  },
   getDb,
 });

package/corpus/templates/content/server/routes/api/document-agent-context.json.get.ts

@@ -0,0 +1,90 @@
+import {
+  AGENT_ACCESS_PARAM,
+  getConfiguredAppBasePath,
+  verifyScopedAgentAccessToken,
+} from "@agent-native/core/server";
+import { eq } from "drizzle-orm";
+import {
+  defineEventHandler,
+  getQuery,
+  setResponseHeader,
+  setResponseStatus,
+} from "h3";
+
+import {
+  buildContentPublicDocumentUrl,
+  DOCUMENT_AGENT_RESOURCE_KIND,
+} from "../../../shared/agent-readable.js";
+import { getDb, schema } from "../../db/index.js";
+
+function queryString(value: unknown): string {
+  if (typeof value === "string") return value;
+  if (Array.isArray(value) && typeof value[0] === "string") return value[0];
+  return "";
+}
+
+function deny(statusCode: number, message: string) {
+  return { statusCode, body: { error: message } };
+}
+
+export default defineEventHandler(async (event) => {
+  setResponseHeader(event, "Cache-Control", "no-store");
+  setResponseHeader(event, "Referrer-Policy", "no-referrer");
+  setResponseHeader(event, "X-Content-Type-Options", "nosniff");
+
+  const query = getQuery(event);
+  const id = queryString(query.id);
+  if (!id) {
+    setResponseStatus(event, 400);
+    return { error: "Document id is required" };
+  }
+
+  const token = queryString(query[AGENT_ACCESS_PARAM]);
+  const db = getDb();
+  // guard:allow-unscoped -- this endpoint returns a document only when it is public or a document-scoped agent_access token verifies for this id.
+  const [document] = await db
+    .select({
+      id: schema.documents.id,
+      title: schema.documents.title,
+      content: schema.documents.content,
+      icon: schema.documents.icon,
+      visibility: schema.documents.visibility,
+      updatedAt: schema.documents.updatedAt,
+      createdAt: schema.documents.createdAt,
+    })
+    .from(schema.documents)
+    .where(eq(schema.documents.id, id))
+    .limit(1);
+
+  if (!document) {
+    setResponseStatus(event, 404);
+    return { error: "Document not found" };
+  }
+
+  const tokenAccess = token
+    ? verifyScopedAgentAccessToken(token, {
+        resourceKind: DOCUMENT_AGENT_RESOURCE_KIND,
+        resourceId: id,
+      }).ok
+    : false;
+  if (document.visibility !== "public" && !tokenAccess) {
+    const denied = deny(403, "Invalid or expired agent access token");
+    setResponseStatus(event, denied.statusCode);
+    return denied.body;
+  }
+
+  return {
+    resourceType: "document",
+    id: document.id,
+    title: document.title,
+    icon: document.icon,
+    content: document.content,
+    visibility: document.visibility,
+    createdAt: document.createdAt,
+    updatedAt: document.updatedAt,
+    url: buildContentPublicDocumentUrl(document.id, {
+      basePath: getConfiguredAppBasePath(),
+      token: tokenAccess ? token : null,
+    }),
+  };
+});

package/corpus/templates/content/shared/agent-readable.ts

@@ -0,0 +1,56 @@
+import {
+  AGENT_ACCESS_PARAM,
+  buildAgentAccessUrl,
+  buildAgentReadableResourceDiscovery,
+  normalizeAgentAccessBasePath,
+  toAgentAccessUrl,
+  type AgentReadableResourceDiscovery,
+} from "@agent-native/core/shared";
+
+export const DOCUMENT_AGENT_RESOURCE_KIND = "content:document";
+export const DOCUMENT_AGENT_CONTEXT_ENDPOINT =
+  "/api/document-agent-context.json";
+export const DOCUMENT_AGENT_READABLE_INSTRUCTIONS =
+  "Use contextUrl to read this shared Content document as structured JSON. The page is read-only for token and public viewers.";
+
+export function buildContentPublicDocumentPath(documentId: string): string {
+  return `/p/${documentId}`;
+}
+
+export function buildContentPublicDocumentUrl(
+  documentId: string,
+  options: { basePath?: string; token?: string | null } = {},
+): string {
+  const path = buildContentPublicDocumentPath(documentId);
+  const basePath = normalizeAgentAccessBasePath(options.basePath);
+  if (options.token) {
+    return buildAgentAccessUrl({
+      path,
+      basePath,
+      token: options.token,
+      tokenParam: AGENT_ACCESS_PARAM,
+    });
+  }
+  return toAgentAccessUrl(path, { basePath });
+}
+
+export function buildContentDocumentAgentDiscovery({
+  document,
+  token,
+  basePath,
+}: {
+  document: { id: string; title: string };
+  token?: string | null;
+  basePath?: string;
+}): AgentReadableResourceDiscovery {
+  return buildAgentReadableResourceDiscovery({
+    resourceType: "document",
+    resourceId: document.id,
+    title: document.title,
+    path: buildContentPublicDocumentPath(document.id),
+    contextEndpoint: DOCUMENT_AGENT_CONTEXT_ENDPOINT,
+    token,
+    basePath,
+    instructions: DOCUMENT_AGENT_READABLE_INSTRUCTIONS,
+  });
+}

package/corpus/templates/design/app/components/ThemeToggle.tsx

@@ -1,14 +1,14 @@
 import { useT } from "@agent-native/core/client";
-import { IconMoon, IconSun } from "@tabler/icons-react";
-import { useTheme } from "next-themes";
-import { useEffect, useState } from "react";
-
-import { Button } from "@/components/ui/button";
+import { Button } from "@agent-native/toolkit/ui/button";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@/components/ui/tooltip";
+} from "@agent-native/toolkit/ui/tooltip";
+import { IconMoon, IconSun } from "@tabler/icons-react";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+
 import { cn } from "@/lib/utils";
 
 export function ThemeToggle({ className }: { className?: string }) {

package/corpus/templates/design/app/components/design/CanvasContextMenu.tsx

@@ -1,13 +1,3 @@
-import {
-  forwardRef,
-  useCallback,
-  useImperativeHandle,
-  useMemo,
-  useState,
-  type CSSProperties,
-  type ReactNode,
-} from "react";
-
 import {
   ContextMenu,
   ContextMenuContent,
@@ -19,7 +9,17 @@ import {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuTrigger,
-} from "@/components/ui/context-menu";
+} from "@agent-native/toolkit/ui/context-menu";
+import {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useState,
+  type CSSProperties,
+  type ReactNode,
+} from "react";
+
 import { cn } from "@/lib/utils";
 
 export type CanvasContextMenuAction =

package/corpus/templates/design/app/components/design/DesignEditorSkeleton.tsx

@@ -1,5 +1,5 @@
-import { Skeleton } from "@/components/ui/skeleton";
-import { Spinner } from "@/components/ui/spinner";
+import { Skeleton } from "@agent-native/toolkit/ui/skeleton";
+import { Spinner } from "@agent-native/toolkit/ui/spinner";
 
 const panelGhost = "bg-[var(--design-editor-skeleton-panel-ghost-bg)]";
 

package/corpus/templates/design/app/components/design/DesignExtensionsPanel.tsx

@@ -11,6 +11,27 @@ import {
   EmbeddedApp,
   type EmbeddedAppRef,
 } from "@agent-native/core/embedding/react";
+import { Button } from "@agent-native/toolkit/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@agent-native/toolkit/ui/dropdown-menu";
+import { Input } from "@agent-native/toolkit/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@agent-native/toolkit/ui/popover";
+import { Skeleton } from "@agent-native/toolkit/ui/skeleton";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@agent-native/toolkit/ui/tabs";
+import { Textarea } from "@agent-native/toolkit/ui/textarea";
 import type { ShaderDescriptor } from "@shared/shader-presets";
 import {
   IconAdjustmentsHorizontal,
@@ -39,22 +60,6 @@ import {
 } from "react";
 import { toast } from "sonner";
 
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Input } from "@/components/ui/input";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Skeleton } from "@/components/ui/skeleton";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Textarea } from "@/components/ui/textarea";
 import { sendToDesignAgentChat } from "@/lib/agent-chat";
 import { cn } from "@/lib/utils";
 

package/corpus/templates/design/app/components/design/DesignImportPanel.tsx

@@ -1,4 +1,7 @@
 import { appApiPath, useActionMutation, useT } from "@agent-native/core/client";
+import { Badge } from "@agent-native/toolkit/ui/badge";
+import { Button } from "@agent-native/toolkit/ui/button";
+import { Textarea } from "@agent-native/toolkit/ui/textarea";
 import {
   IconBrandFigma,
   IconBrandGithub,
@@ -14,9 +17,6 @@ import { useCallback, useRef, useState, type ReactNode } from "react";
 import { useNavigate } from "react-router";
 import { toast } from "sonner";
 
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Textarea } from "@/components/ui/textarea";
 import {
   importResultSummary,
   looksLikeStandaloneHtml,

package/corpus/templates/design/app/components/design/DrawOverlay.tsx

@@ -1,4 +1,11 @@
 import { useT } from "@agent-native/core/client";
+import { Button } from "@agent-native/toolkit/ui/button";
+import { Input } from "@agent-native/toolkit/ui/input";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@agent-native/toolkit/ui/tooltip";
 import {
   IconEraser,
   IconArrowBackUp,
@@ -8,13 +15,6 @@ import {
 } from "@tabler/icons-react";
 import { useState, useRef, useCallback, useEffect } from "react";
 
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
 import type { DrawAnnotation } from "./types";

package/corpus/templates/design/app/components/design/EditPanel.tsx

@@ -3,6 +3,36 @@ import {
   useActionQuery,
   useT,
 } from "@agent-native/core/client";
+import { Button } from "@agent-native/toolkit/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@agent-native/toolkit/ui/dropdown-menu";
+import { Input } from "@agent-native/toolkit/ui/input";
+import { Label } from "@agent-native/toolkit/ui/label";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@agent-native/toolkit/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@agent-native/toolkit/ui/select";
+import { Slider } from "@agent-native/toolkit/ui/slider";
+import { Switch } from "@agent-native/toolkit/ui/switch";
+import { Tabs, TabsList, TabsTrigger } from "@agent-native/toolkit/ui/tabs";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@agent-native/toolkit/ui/tooltip";
 import type { TweakDefinition } from "@shared/api";
 import {
   alphaToOpacity,
@@ -78,36 +108,6 @@ import {
 import { useParams } from "react-router";
 import { toast } from "sonner";
 
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Slider } from "@/components/ui/slider";
-import { Switch } from "@/components/ui/switch";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
 import {

package/corpus/templates/design/app/components/design/FusionAppBanner.tsx

@@ -1,4 +1,12 @@
 import { useActionMutation, useActionQuery } from "@agent-native/core/client";
+import { Button } from "@agent-native/toolkit/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@agent-native/toolkit/ui/dropdown-menu";
+import { Spinner } from "@agent-native/toolkit/ui/spinner";
 import {
   IconAlertTriangle,
   IconApps,
@@ -10,15 +18,6 @@ import {
 } from "@tabler/icons-react";
 import { useEffect, useRef, useState } from "react";
 
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Spinner } from "@/components/ui/spinner";
-
 const SYNC_POLL_INTERVAL_MS = 8000;
 const EDITS_REFETCH_INTERVAL_MS = 10000;
 const DEPLOY_POLL_INTERVAL_MS = 6000;

package/corpus/templates/design/app/components/design/LayersPanel.tsx

@@ -1,4 +1,18 @@
 import { useT } from "@agent-native/core/client";
+import { Button } from "@agent-native/toolkit/ui/button";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "@agent-native/toolkit/ui/context-menu";
+import { Input } from "@agent-native/toolkit/ui/input";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@agent-native/toolkit/ui/tooltip";
 import {
   IconChevronDown,
   IconChevronRight,
@@ -29,20 +43,6 @@ import {
   type RefObject,
 } from "react";
 
-import { Button } from "@/components/ui/button";
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuSeparator,
-  ContextMenuTrigger,
-} from "@/components/ui/context-menu";
-import { Input } from "@/components/ui/input";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
 export type LayersPanelNodeType =