@agent-native/core 0.86.1 → 0.87.0

package/corpus/templates/analytics/app/pages/sessions/SessionDetailPage.tsx

@@ -6,6 +6,20 @@ import {
   useSendToAgentChat,
   useT,
 } from "@agent-native/core/client";
+import { Button } from "@agent-native/toolkit/ui/button";
+import { Card, CardContent } from "@agent-native/toolkit/ui/card";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@agent-native/toolkit/ui/popover";
+import { Skeleton } from "@agent-native/toolkit/ui/skeleton";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@agent-native/toolkit/ui/tooltip";
 import { SESSION_REPLAY_AGENT_ACCESS_PARAM } from "@shared/session-replay-agent-access";
 import {
   IconArrowLeft,
@@ -35,20 +49,6 @@ import {
 } from "react";
 import { Link, useParams } from "react-router";
 
-import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Skeleton } from "@/components/ui/skeleton";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { getIdToken } from "@/lib/auth";
 import { cn } from "@/lib/utils";
 
@@ -1075,15 +1075,21 @@ function useSessionReplayPlayback(recordingId: string) {
     enabled: Boolean(recordingId),
     staleTime: 30_000,
     gcTime: 60_000,
-    queryFn: () => fetchSessionReplayPlayback(recordingId),
+    queryFn: () =>
+      fetchSessionReplayPlayback(recordingId, { agentAccessToken }),
   });
 }
 
+interface FetchSessionReplayPlaybackOptions {
+  agentAccessToken?: string;
+}
+
 export async function fetchSessionReplayPlayback(
   recordingId: string,
+  options: FetchSessionReplayPlaybackOptions = {},
 ): Promise<SessionReplayPlaybackResponse> {
-  const manifest = await fetchReplayManifest(recordingId);
-  const chunks = await fetchReplayChunks(manifest.chunks);
+  const manifest = await fetchReplayManifest(recordingId, options);
+  const chunks = await fetchReplayChunks(manifest.chunks, options);
   const unavailableChunks = chunks.filter((chunk) => chunk.unavailable).length;
   const eventCount = chunks.reduce(
     (sum, chunk) => sum + chunk.events.length,
@@ -1100,11 +1106,13 @@ export async function fetchSessionReplayPlayback(
 
 async function fetchReplayManifest(
   recordingId: string,
+  options: FetchSessionReplayPlaybackOptions,
 ): Promise<SessionReplayManifestResponse> {
   const response = await fetchReplayApi(
     `/api/session-replay/recordings/${encodeURIComponent(
       recordingId,
     )}/manifest`,
+    options.agentAccessToken,
   );
   if (!response.ok) throw await replayFetchError(response);
   return (await response.json()) as SessionReplayManifestResponse;
@@ -1112,6 +1120,7 @@ async function fetchReplayManifest(
 
 async function fetchReplayChunks(
   chunks: SessionReplayManifestResponse["chunks"],
+  options: FetchSessionReplayPlaybackOptions,
 ): Promise<ReplayChunkEvents[]> {
   const results = new Array<ReplayChunkEvents>(chunks.length);
   let nextIndex = 0;
@@ -1120,7 +1129,7 @@ async function fetchReplayChunks(
     while (nextIndex < chunks.length) {
       const index = nextIndex;
       nextIndex += 1;
-      results[index] = await fetchReplayChunk(chunks[index]);
+      results[index] = await fetchReplayChunk(chunks[index], options);
     }
   }
 
@@ -1135,8 +1144,12 @@ async function fetchReplayChunks(
 
 async function fetchReplayChunk(
   chunk: SessionReplayManifestResponse["chunks"][number],
+  options: FetchSessionReplayPlaybackOptions,
 ): Promise<ReplayChunkEvents> {
-  const response = await fetchReplayApi(chunk.bytesPath);
+  const response = await fetchReplayApi(
+    chunk.bytesPath,
+    options.agentAccessToken,
+  );
   if (!response.ok) {
     const error = await replayFetchError(response);
     if (isUnavailableReplayChunk(response, error)) {
@@ -1176,19 +1189,25 @@ function replayUnavailableChunk(
 
 function currentSessionReplayAgentAccessToken(): string {
   const browserSearch =
-    typeof window === "undefined" ? "" : window.location.search;
+    globalThis.window?.location?.search ?? globalThis.location?.search ?? "";
   return (
     new URLSearchParams(browserSearch).get(SESSION_REPLAY_AGENT_ACCESS_PARAM) ??
     ""
   );
 }
 
-async function fetchReplayApi(path: string): Promise<Response> {
+async function fetchReplayApi(
+  path: string,
+  explicitAgentAccessToken?: string,
+): Promise<Response> {
   const token = await getIdToken();
   const browserOrigin =
-    typeof window === "undefined" ? "http://localhost" : window.location.origin;
+    globalThis.window?.location?.origin ??
+    globalThis.location?.origin ??
+    "http://localhost";
   const url = new URL(appApiPath(path), browserOrigin);
-  const agentAccessToken = currentSessionReplayAgentAccessToken();
+  const agentAccessToken =
+    explicitAgentAccessToken ?? currentSessionReplayAgentAccessToken();
   if (agentAccessToken) {
     url.searchParams.set(SESSION_REPLAY_AGENT_ACCESS_PARAM, agentAccessToken);
   }

package/corpus/templates/analytics/app/pages/sessions/SessionDevToolsPanel.tsx

@@ -1,4 +1,16 @@
 import { useT } from "@agent-native/core/client";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@agent-native/toolkit/ui/collapsible";
+import { Input } from "@agent-native/toolkit/ui/input";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@agent-native/toolkit/ui/tabs";
 import {
   IconChevronRight,
   IconCloudDataConnection,
@@ -8,13 +20,6 @@ import {
 } from "@tabler/icons-react";
 import { type ReactNode, useEffect, useMemo, useRef, useState } from "react";
 
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/components/ui/collapsible";
-import { Input } from "@/components/ui/input";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { cn } from "@/lib/utils";
 
 import {

package/corpus/templates/analytics/app/pages/sessions/SessionsPage.tsx

@@ -5,6 +5,18 @@ import {
   useBuilderStatus,
   useT,
 } from "@agent-native/core/client";
+import { Badge } from "@agent-native/toolkit/ui/badge";
+import { Button } from "@agent-native/toolkit/ui/button";
+import { Card, CardContent } from "@agent-native/toolkit/ui/card";
+import { Input } from "@agent-native/toolkit/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@agent-native/toolkit/ui/select";
+import { Skeleton } from "@agent-native/toolkit/ui/skeleton";
 import {
   IconChevronDown,
   IconCheck,
@@ -21,18 +33,6 @@ import {
 import { useMemo, useState } from "react";
 import { Link, useNavigate, useSearchParams } from "react-router";
 
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Skeleton } from "@/components/ui/skeleton";
 import { useReplayStorageStatus } from "@/hooks/use-replay-storage-status";
 import { cn } from "@/lib/utils";
 

package/corpus/templates/analytics/app/pages/settings/AlertRulesSettingsCard.tsx

@@ -3,19 +3,6 @@ import {
   useActionQuery,
   useT,
 } from "@agent-native/core/client";
-import {
-  IconBell,
-  IconBellRinging,
-  IconLoader2,
-  IconPencil,
-  IconPlayerPlay,
-  IconPlus,
-  IconTrash,
-} from "@tabler/icons-react";
-import { useQueryClient } from "@tanstack/react-query";
-import { useMemo, useState } from "react";
-import { toast } from "sonner";
-
 import {
   AlertDialog,
   AlertDialogAction,
@@ -25,17 +12,17 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
+} from "@agent-native/toolkit/ui/alert-dialog";
+import { Badge } from "@agent-native/toolkit/ui/badge";
+import { Button } from "@agent-native/toolkit/ui/button";
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card";
-import { Checkbox } from "@/components/ui/checkbox";
+} from "@agent-native/toolkit/ui/card";
+import { Checkbox } from "@agent-native/toolkit/ui/checkbox";
 import {
   Dialog,
   DialogContent,
@@ -43,17 +30,17 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
+} from "@agent-native/toolkit/ui/dialog";
+import { Input } from "@agent-native/toolkit/ui/input";
+import { Label } from "@agent-native/toolkit/ui/label";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select";
-import { Switch } from "@/components/ui/switch";
+} from "@agent-native/toolkit/ui/select";
+import { Switch } from "@agent-native/toolkit/ui/switch";
 import {
   Table,
   TableBody,
@@ -61,8 +48,21 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table";
-import { Textarea } from "@/components/ui/textarea";
+} from "@agent-native/toolkit/ui/table";
+import { Textarea } from "@agent-native/toolkit/ui/textarea";
+import {
+  IconBell,
+  IconBellRinging,
+  IconLoader2,
+  IconPencil,
+  IconPlayerPlay,
+  IconPlus,
+  IconTrash,
+} from "@tabler/icons-react";
+import { useQueryClient } from "@tanstack/react-query";
+import { useMemo, useState } from "react";
+import { toast } from "sonner";
+
 import { cn } from "@/lib/utils";
 
 type AlertFilterOp = "equals" | "not_equals" | "contains" | "in" | "exists";

package/corpus/templates/analytics/app/root.tsx

@@ -7,6 +7,8 @@ import {
   useDbSync,
 } from "@agent-native/core/client";
 import { configureTracking } from "@agent-native/core/client";
+import { Toaster as Sonner } from "@agent-native/toolkit/ui/sonner";
+import { Toaster } from "@agent-native/toolkit/ui/toaster";
 import { useQueryClient } from "@tanstack/react-query";
 import { useCallback, useState } from "react";
 import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
@@ -14,8 +16,6 @@ import type { LinksFunction } from "react-router";
 
 import { AuthProvider } from "@/components/auth/AuthProvider";
 import { ProviderCorpusJobNotifier } from "@/components/ProviderCorpusJobNotifier";
-import { Toaster as Sonner } from "@/components/ui/sonner";
-import { Toaster } from "@/components/ui/toaster";
 import { TAB_ID } from "@/lib/tab-id";
 
 import { CommandPalette } from "./components/layout/CommandPalette";

package/corpus/templates/analytics/app/routes/catalog.tsx

@@ -3,12 +3,7 @@ import {
   useActionQuery,
   useT,
 } from "@agent-native/core/client";
-import { IconLayoutDashboard } from "@tabler/icons-react";
-import { useMemo, useState } from "react";
-import { useNavigate } from "react-router";
-import { toast } from "sonner";
-
-import { Button } from "@/components/ui/button";
+import { Button } from "@agent-native/toolkit/ui/button";
 import {
   Card,
   CardContent,
@@ -16,8 +11,13 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
+} from "@agent-native/toolkit/ui/card";
+import { Skeleton } from "@agent-native/toolkit/ui/skeleton";
+import { IconLayoutDashboard } from "@tabler/icons-react";
+import { useMemo, useState } from "react";
+import { useNavigate } from "react-router";
+import { toast } from "sonner";
+
 import { demoNodeExporterDashboardPath } from "@/lib/demo-dashboard-path";
 
 type InstalledDashboard = {

package/corpus/templates/analytics/package.json

@@ -15,6 +15,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/analytics/server/lib/session-replay-agent-context.ts

@@ -1,12 +1,14 @@
 import {
+  buildAgentAccessApiUrl,
+  buildAgentAccessUrl,
+  createScopedAgentAccessGrant,
   getRequestContext,
-  signShortLivedToken,
-  verifyShortLivedToken,
+  verifyScopedAgentAccessToken,
 } from "@agent-native/core/server";
 
 import {
   SESSION_REPLAY_AGENT_ACCESS_PARAM,
-  sessionReplayAgentAccessTokenResourceId,
+  SESSION_REPLAY_AGENT_ACCESS_TOKEN_PREFIX,
 } from "../../shared/session-replay-agent-access.js";
 import {
   isFailedSessionReplayNetworkStatus,
@@ -70,17 +72,6 @@ function appOrigin(explicitOrigin?: string): string {
   }
 }
 
-function absoluteUrl(path: string, origin?: string): string {
-  return `${appOrigin(origin)}${appBasePath()}${path}`;
-}
-
-function appendAgentToken(path: string, token: string): string {
-  const sep = path.includes("?") ? "&" : "?";
-  return `${path}${sep}${SESSION_REPLAY_AGENT_ACCESS_PARAM}=${encodeURIComponent(
-    token,
-  )}`;
-}
-
 function replayStartedAt(events: AgentReplayEvent[]): number {
   const first = events.find((event) =>
     Number.isFinite(Number(event.timestamp)),
@@ -616,10 +607,10 @@ export function verifySessionReplayAgentAccess(
   recordingId: string,
   token: string,
 ): boolean {
-  return verifyShortLivedToken(
-    token,
-    sessionReplayAgentAccessTokenResourceId(recordingId),
-  ).ok;
+  return verifyScopedAgentAccessToken(token, {
+    resourceKind: SESSION_REPLAY_AGENT_ACCESS_TOKEN_PREFIX,
+    resourceId: recordingId,
+  }).ok;
 }
 
 export async function createSessionReplayAgentLink({
@@ -632,31 +623,32 @@ export async function createSessionReplayAgentLink({
   origin?: string;
 }) {
   const recording = await getSessionReplaySummary(recordingId, scope);
-  const token = signShortLivedToken({
-    resourceId: sessionReplayAgentAccessTokenResourceId(recording.id),
+  const grant = createScopedAgentAccessGrant({
+    resourceKind: SESSION_REPLAY_AGENT_ACCESS_TOKEN_PREFIX,
+    resourceId: recording.id,
     viewerEmail: scope.userEmail,
     ttlSeconds: SESSION_REPLAY_AGENT_ACCESS_TTL_SECONDS,
   });
-  const expiresAt = new Date(
-    Date.now() + SESSION_REPLAY_AGENT_ACCESS_TTL_SECONDS * 1000,
-  ).toISOString();
-  const sessionPath = appendAgentToken(
-    `/sessions/${encodeURIComponent(recording.id)}`,
-    token,
-  );
-  const contextPath = appendAgentToken(
-    `/api/session-replay/agent-context.json?id=${encodeURIComponent(
-      recording.id,
-    )}`,
-    token,
-  );
+  const resolvedOrigin = appOrigin(origin);
+  const basePath = appBasePath();
 
   return {
     recordingId: recording.id,
-    url: absoluteUrl(sessionPath, origin),
-    contextUrl: absoluteUrl(contextPath, origin),
-    expiresAt,
-    ttlSeconds: SESSION_REPLAY_AGENT_ACCESS_TTL_SECONDS,
+    url: buildAgentAccessUrl({
+      path: `/sessions/${encodeURIComponent(recording.id)}`,
+      origin: resolvedOrigin,
+      basePath,
+      token: grant.token,
+    }),
+    contextUrl: buildAgentAccessApiUrl({
+      endpoint: "/api/session-replay/agent-context.json",
+      resourceId: recording.id,
+      origin: resolvedOrigin,
+      basePath,
+      token: grant.token,
+    }),
+    expiresAt: grant.expiresAt,
+    ttlSeconds: grant.ttlSeconds,
   };
 }
 
@@ -679,28 +671,36 @@ export async function buildSessionReplayAgentContext({
   }
 
   const recording = await getSessionReplayTokenizedSummary(recordingId);
-  const contextPath = appendAgentToken(
-    `/api/session-replay/agent-context.json?id=${encodeURIComponent(
-      recording.id,
-    )}`,
+  const resolvedOrigin = appOrigin(origin);
+  const basePath = appBasePath();
+  const contextUrl = buildAgentAccessApiUrl({
+    endpoint: "/api/session-replay/agent-context.json",
+    resourceId: recording.id,
+    origin: resolvedOrigin,
+    basePath,
     token,
-  );
-  const eventsPath = appendAgentToken(
-    `/api/session-replay/agent-events.json?id=${encodeURIComponent(
-      recording.id,
-    )}&limit=10000`,
+  });
+  const eventsUrl = buildAgentAccessApiUrl({
+    endpoint: "/api/session-replay/agent-events.json",
+    resourceId: recording.id,
+    origin: resolvedOrigin,
+    basePath,
     token,
-  );
-  const diagnosticsPath = appendAgentToken(
-    `/api/session-replay/agent-diagnostics.json?id=${encodeURIComponent(
-      recording.id,
-    )}`,
+    extraParams: [["limit", 10000]],
+  });
+  const diagnosticsUrl = buildAgentAccessApiUrl({
+    endpoint: "/api/session-replay/agent-diagnostics.json",
+    resourceId: recording.id,
+    origin: resolvedOrigin,
+    basePath,
     token,
-  );
-  const pagePath = appendAgentToken(
-    `/sessions/${encodeURIComponent(recording.id)}`,
+  });
+  const pageUrl = buildAgentAccessUrl({
+    path: `/sessions/${encodeURIComponent(recording.id)}`,
+    origin: resolvedOrigin,
+    basePath,
     token,
-  );
+  });
 
   const eventsResponse = includeTimeline
     ? await getSessionReplayTokenizedEvents(recording.id, { limit: 10000 })
@@ -735,16 +735,16 @@ export async function buildSessionReplayAgentContext({
     ],
     recording: compactSessionRecordingSummary(recording),
     apis: {
-      page: { method: "GET", url: absoluteUrl(pagePath, origin) },
-      context: { method: "GET", url: absoluteUrl(contextPath, origin) },
+      page: { method: "GET", url: pageUrl },
+      context: { method: "GET", url: contextUrl },
       events: {
         method: "GET",
-        url: absoluteUrl(eventsPath, origin),
+        url: eventsUrl,
         note: "Returns bounded sanitized replay events; storage/provider URLs stay private.",
       },
       diagnostics: {
         method: "GET",
-        url: absoluteUrl(diagnosticsPath, origin),
+        url: diagnosticsUrl,
         note: "Returns bounded console/network diagnostics. Params: kind=console|network|all, level=log|info|warn|error|debug, limit (default 200, max 500), offset (page with N-entry skip), fromMs/toMs (inclusive offsetMs window around a timeline marker). offset/fromMs/toMs force strictly chronological pagination for full enumeration; totals reflect the filtered population and hasMore/truncated show whether more entries remain.",
       },
     },

package/corpus/templates/analytics/shared/session-replay-agent-access.ts

@@ -1,10 +1,21 @@
-export const SESSION_REPLAY_AGENT_ACCESS_PARAM = "agent_access";
+import {
+  AGENT_ACCESS_PARAM,
+  scopedAgentAccessResourceId,
+} from "@agent-native/core/shared";
 
-const SESSION_REPLAY_AGENT_ACCESS_TOKEN_PREFIX =
+export const SESSION_REPLAY_AGENT_ACCESS_PARAM =
+  AGENT_ACCESS_PARAM || "agent_access";
+export const SESSION_REPLAY_AGENT_ACCESS_TOKEN_PREFIX =
   "analytics-session-replay-agent-context";
 
 export function sessionReplayAgentAccessTokenResourceId(
   recordingId: string,
 ): string {
-  return `${SESSION_REPLAY_AGENT_ACCESS_TOKEN_PREFIX}:${recordingId}`;
+  if (typeof scopedAgentAccessResourceId !== "function") {
+    return `${SESSION_REPLAY_AGENT_ACCESS_TOKEN_PREFIX}:${recordingId}`;
+  }
+  return scopedAgentAccessResourceId(
+    SESSION_REPLAY_AGENT_ACCESS_TOKEN_PREFIX,
+    recordingId,
+  );
 }

package/corpus/templates/assets/app/components/create/RecentDraftsSection.tsx

@@ -1,10 +1,9 @@
 import { useActionQuery, useT } from "@agent-native/core/client";
+import { Button } from "@agent-native/toolkit/ui/button";
+import { Skeleton } from "@agent-native/toolkit/ui/skeleton";
 import { IconArrowUpRight, IconPhoto } from "@tabler/icons-react";
 import { Link } from "react-router";
 
-import { Button } from "@/components/ui/button";
-import { Skeleton } from "@/components/ui/skeleton";
-
 type DraftAsset = {
   id: string;
   title?: string | null;

package/corpus/templates/assets/app/components/generation/GenerationResults.tsx

@@ -5,11 +5,6 @@ import {
   useActionQuery,
   useT,
 } from "@agent-native/core/client";
-import { IconMessageCircle, IconPhoto, IconTrash } from "@tabler/icons-react";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { toast } from "sonner";
-
 import {
   AlertDialog,
   AlertDialogAction,
@@ -19,10 +14,15 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/spinner";
+} from "@agent-native/toolkit/ui/alert-dialog";
+import { Badge } from "@agent-native/toolkit/ui/badge";
+import { Button } from "@agent-native/toolkit/ui/button";
+import { Spinner } from "@agent-native/toolkit/ui/spinner";
+import { IconMessageCircle, IconPhoto, IconTrash } from "@tabler/icons-react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { toast } from "sonner";
+
 import { assetPreviewSources } from "@/lib/asset-preview-sources";
 
 import type {

package/corpus/templates/assets/app/components/layout/Header.tsx

@@ -3,10 +3,12 @@ import {
   useActionQuery,
   useT,
 } from "@agent-native/core/client";
+import {
+  useHeaderTitle,
+  useHeaderActions,
+} from "@agent-native/toolkit/app-shell";
 import { useLocation } from "react-router";
 
-import { useHeaderTitle, useHeaderActions } from "./HeaderActions";
-
 const pageTitleKeys: Record<string, string> = {
   "/": "navigation.create",
   "/library": "navigation.library",

package/corpus/templates/assets/app/components/layout/Layout.tsx

@@ -13,6 +13,7 @@ import {
   EMBED_MODE_QUERY_PARAM,
   EMBED_TOKEN_QUERY_PARAM,
 } from "@agent-native/core/shared";
+import { HeaderActionsProvider } from "@agent-native/toolkit/app-shell";
 import { IconMenu2 } from "@tabler/icons-react";
 import { useState, useEffect } from "react";
 import { useLocation, useNavigate } from "react-router";
@@ -24,7 +25,6 @@ import { ASSETS_CHAT_STORAGE_KEY } from "@/lib/chat";
 import { cn } from "@/lib/utils";
 
 import { Header } from "./Header";
-import { HeaderActionsProvider } from "./HeaderActions";
 import { Sidebar } from "./Sidebar";
 
 interface LayoutProps {

package/corpus/templates/assets/app/components/layout/PageShell.tsx

@@ -1,14 +1,13 @@
-import { IconInfoCircle } from "@tabler/icons-react";
-import { type ReactNode } from "react";
-
+import { useSetPageTitle } from "@agent-native/toolkit/app-shell";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { cn } from "@/lib/utils";
+} from "@agent-native/toolkit/ui/tooltip";
+import { IconInfoCircle } from "@tabler/icons-react";
+import { type ReactNode } from "react";
 
-import { useSetPageTitle } from "./HeaderActions";
+import { cn } from "@/lib/utils";
 
 export function PageShell({
   title,