@agent-native/core 0.7.13 → 0.7.15

package/src/templates/default/app/root.tsx

@@ -5,8 +5,10 @@ import {
   Scripts,
   ScrollRestoration,
   isRouteErrorResponse,
+  Link,
+  useRouteError,
 } from "react-router";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import {
   QueryClient,
   QueryClientProvider,
@@ -74,24 +76,48 @@ export default function Root() {
         <QueryClientProvider client={queryClient}>
           <DbSyncSetup />
           <Outlet />
-          <Toaster />
+          <Toaster richColors position="bottom-left" />
         </QueryClientProvider>
       </ThemeProvider>
     </ClientOnly>
   );
 }
 
-export function ErrorBoundary({ error }: { error: unknown }) {
-  let message = "Oops!";
+function useApplyThemeClass() {
+  useEffect(() => {
+    const root = document.documentElement;
+    if (root.classList.contains("dark") || root.classList.contains("light"))
+      return;
+    try {
+      const stored = localStorage.getItem("theme");
+      if (stored === "dark") {
+        root.classList.add("dark");
+      } else if (stored === "light") {
+        root.classList.add("light");
+      } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+        root.classList.add("dark");
+      }
+    } catch {}
+  }, []);
+}
+
+export function ErrorBoundary() {
+  useApplyThemeClass();
+  const error = useRouteError();
+  let status: number | null = null;
+  let title = "Something went wrong";
   let details = "An unexpected error occurred.";
   let stack: string | undefined;
 
   if (isRouteErrorResponse(error)) {
-    message = error.status === 404 ? "404" : "Error";
-    details =
-      error.status === 404
-        ? "The requested page could not be found."
-        : error.statusText || details;
+    status = error.status;
+    if (error.status === 404) {
+      title = "Page not found";
+      details = "This page doesn't exist. It may have been moved or deleted.";
+    } else {
+      title = `${error.status} Error`;
+      details = error.statusText || details;
+    }
   } else if (
     typeof process !== "undefined" &&
     process.env.NODE_ENV !== "production" &&
@@ -102,12 +128,23 @@ export function ErrorBoundary({ error }: { error: unknown }) {
   }
 
   return (
-    <main className="flex items-center justify-center min-h-screen p-4">
-      <div className="text-center">
-        <h1 className="text-4xl font-bold mb-2">{message}</h1>
-        <p className="text-muted-foreground">{details}</p>
+    <main className="flex items-center justify-center min-h-screen p-4 bg-background text-foreground">
+      <div className="flex flex-col items-center text-center max-w-md">
+        {status && (
+          <span className="text-7xl font-bold tracking-tight text-muted-foreground/40">
+            {status}
+          </span>
+        )}
+        <h1 className="mt-3 text-2xl font-semibold">{title}</h1>
+        <p className="mt-2 text-muted-foreground text-sm">{details}</p>
+        <Link
+          to="/"
+          className="mt-6 inline-flex items-center gap-1.5 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm hover:bg-primary/90 cursor-pointer"
+        >
+          Go home
+        </Link>
         {stack && (
-          <pre className="mt-4 text-left text-xs overflow-auto max-w-lg mx-auto p-4 bg-muted rounded">
+          <pre className="mt-6 w-full text-left text-xs overflow-auto p-4 bg-muted rounded">
             <code>{stack}</code>
           </pre>
         )}

package/src/templates/default/app/routes/_index.tsx

@@ -1,4 +1,5 @@
 import { useTheme } from "next-themes";
+import { IconLoader2 } from "@tabler/icons-react";
 
 export function meta() {
   return [{ title: "{{APP_TITLE}}" }];
@@ -7,7 +8,11 @@ export function meta() {
 export function HydrateFallback() {
   return (
     <div className="flex items-center justify-center h-screen">
-      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-foreground" />
+      <IconLoader2
+        className="size-8 animate-spin text-foreground"
+        role="status"
+        aria-label="Loading"
+      />
     </div>
   );
 }

package/src/templates/default/public/favicon.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024" fill="none">
+  <rect x="100" y="100" width="824" height="824" rx="185" fill="#000000"/>
+  <g transform="translate(170 314) scale(6)">
+    <path d="M24.5537 65.7695H0L15.0859 39.4619L37.708 0L60.4912 39.4619H39.6396L24.5537 65.7695Z" fill="white"/>
+    <path d="M89.446 0H114L76.2921 65.7704H51.7383L89.446 0Z" fill="url(#favicon_grad)"/>
+    <defs>
+      <linearGradient id="favicon_grad" x1="101.702" y1="67.4791" x2="113.672" y2="-37.4275" gradientUnits="userSpaceOnUse">
+        <stop stop-color="#00B5FF"/>
+        <stop offset="1" stop-color="#48FFE4"/>
+      </linearGradient>
+    </defs>
+  </g>
+</svg>

package/src/templates/default/public/icon-180.svg

@@ -1,4 +1,13 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180" viewBox="0 0 180 180">
-  <rect width="180" height="180" rx="36" fill="#111111"/>
-  <text x="50%" y="50%" dominant-baseline="central" text-anchor="middle" font-size="99">⚡</text>
+<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180" viewBox="0 0 1024 1024" fill="none">
+  <rect x="100" y="100" width="824" height="824" rx="185" fill="#000000"/>
+  <g transform="translate(170 314) scale(6)">
+    <path d="M24.5537 65.7695H0L15.0859 39.4619L37.708 0L60.4912 39.4619H39.6396L24.5537 65.7695Z" fill="white"/>
+    <path d="M89.446 0H114L76.2921 65.7704H51.7383L89.446 0Z" fill="url(#favicon_grad)"/>
+    <defs>
+      <linearGradient id="favicon_grad" x1="101.702" y1="67.4791" x2="113.672" y2="-37.4275" gradientUnits="userSpaceOnUse">
+        <stop stop-color="#00B5FF"/>
+        <stop offset="1" stop-color="#48FFE4"/>
+      </linearGradient>
+    </defs>
+  </g>
 </svg>

package/src/templates/default/public/icon-192.svg

@@ -1,4 +1,13 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192">
-  <rect width="192" height="192" rx="38" fill="#111111"/>
-  <text x="50%" y="50%" dominant-baseline="central" text-anchor="middle" font-size="105">⚡</text>
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 1024 1024" fill="none">
+  <rect x="100" y="100" width="824" height="824" rx="185" fill="#000000"/>
+  <g transform="translate(170 314) scale(6)">
+    <path d="M24.5537 65.7695H0L15.0859 39.4619L37.708 0L60.4912 39.4619H39.6396L24.5537 65.7695Z" fill="white"/>
+    <path d="M89.446 0H114L76.2921 65.7704H51.7383L89.446 0Z" fill="url(#favicon_grad)"/>
+    <defs>
+      <linearGradient id="favicon_grad" x1="101.702" y1="67.4791" x2="113.672" y2="-37.4275" gradientUnits="userSpaceOnUse">
+        <stop stop-color="#00B5FF"/>
+        <stop offset="1" stop-color="#48FFE4"/>
+      </linearGradient>
+    </defs>
+  </g>
 </svg>

package/src/templates/default/public/icon-512.svg

@@ -1,4 +1,13 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
-  <rect width="512" height="512" rx="102" fill="#111111"/>
-  <text x="50%" y="50%" dominant-baseline="central" text-anchor="middle" font-size="281">⚡</text>
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 1024 1024" fill="none">
+  <rect x="100" y="100" width="824" height="824" rx="185" fill="#000000"/>
+  <g transform="translate(170 314) scale(6)">
+    <path d="M24.5537 65.7695H0L15.0859 39.4619L37.708 0L60.4912 39.4619H39.6396L24.5537 65.7695Z" fill="white"/>
+    <path d="M89.446 0H114L76.2921 65.7704H51.7383L89.446 0Z" fill="url(#favicon_grad)"/>
+    <defs>
+      <linearGradient id="favicon_grad" x1="101.702" y1="67.4791" x2="113.672" y2="-37.4275" gradientUnits="userSpaceOnUse">
+        <stop stop-color="#00B5FF"/>
+        <stop offset="1" stop-color="#48FFE4"/>
+      </linearGradient>
+    </defs>
+  </g>
 </svg>

package/src/templates/default/react-router.config.ts

@@ -3,4 +3,7 @@ import type { Config } from "@react-router/dev/config";
 export default {
   appDirectory: "app",
   ssr: true,
+  future: {
+    v8_viteEnvironmentApi: true,
+  },
 } satisfies Config;

package/src/templates/workspace-core/package.json

@@ -6,26 +6,44 @@
   "exports": {
     ".": {
       "types": "./src/index.ts",
-      "default": "./src/index.ts"
+      "development": "./src/index.ts",
+      "default": "./dist/index.js"
     },
     "./server": {
       "types": "./src/server/index.ts",
-      "default": "./src/server/index.ts"
+      "development": "./src/server/index.ts",
+      "default": "./dist/server/index.js"
     },
     "./client": {
       "types": "./src/client/index.ts",
-      "default": "./src/client/index.ts"
+      "development": "./src/client/index.ts",
+      "default": "./dist/client/index.js"
     },
     "./credentials": {
       "types": "./src/credentials.ts",
-      "default": "./src/credentials.ts"
+      "development": "./src/credentials.ts",
+      "default": "./dist/credentials.js"
     },
     "./styles/tokens.css": "./styles/tokens.css"
   },
+  "files": [
+    "dist",
+    "src",
+    "styles",
+    "actions",
+    "AGENTS.md"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch --preserveWatchOutput",
+    "typecheck": "tsc --noEmit",
+    "prepare": "tsc"
+  },
   "dependencies": {
     "@agent-native/core": "^0.7.10"
   },
   "devDependencies": {
+    "@types/node": "^24.2.1",
     "@types/react": "^19.2.14",
     "react": "^19.2.5",
     "typescript": "^6.0.3"

package/src/templates/workspace-core/src/credentials.ts

@@ -7,13 +7,33 @@
  * them here so there's a single place to update when a key rotates.
  *
  * Under the hood this is a thin wrapper over @agent-native/core's
- * `resolveCredential()`, which reads `process.env.<KEY>` first and
- * falls back to `credential:<KEY>` in the shared settings table.
- * Apps inside the workspace share the same DATABASE_URL by default,
- * so storing a credential once makes it available everywhere.
+ * `resolveCredential()`, which reads per-user / per-org rows in the
+ * shared SQL settings table. Apps inside the workspace share the same
+ * DATABASE_URL by default, so storing a credential once makes it
+ * available everywhere.
+ *
+ * Once @agent-native/core publishes the upcoming 2-arg signature you can
+ * extend this to take a `{ userEmail, orgId }` context and pass it through
+ * for per-user / per-org scoping. The current shape works against both
+ * versions — the published 1-arg signature ignores the second argument.
  */
 import { resolveCredential } from "@agent-native/core/credentials";
 
+/**
+ * Optional context for scoping a credential lookup to a specific user or
+ * org. Forward-compatible with the upcoming 2-arg @agent-native/core
+ * signature; ignored by the current 1-arg published one.
+ */
+export interface CompanyCredentialContext {
+  userEmail?: string;
+  orgId?: string | null;
+}
+
+type ResolveCredentialFn = (
+  key: string,
+  ctx?: CompanyCredentialContext,
+) => Promise<string | undefined>;
+
 /**
  * Resolve a company-wide credential. Prefer this over `resolveCredential()`
  * directly — it keeps your keys organized under a workspace namespace and
@@ -21,9 +41,16 @@ import { resolveCredential } from "@agent-native/core/credentials";
  *
  * Example:
  *   const slackToken = await resolveCompanyCredential("SLACK_BOT_TOKEN");
+ *
+ * With per-user scoping (after upgrading @agent-native/core):
+ *   const slackToken = await resolveCompanyCredential("SLACK_BOT_TOKEN", {
+ *     userEmail: session.email,
+ *     orgId: session.orgId ?? null,
+ *   });
  */
 export async function resolveCompanyCredential(
   key: string,
+  ctx?: CompanyCredentialContext,
 ): Promise<string | undefined> {
-  return await resolveCredential(key);
+  return await (resolveCredential as ResolveCredentialFn)(key, ctx);
 }

package/src/templates/workspace-core/tsconfig.json

@@ -3,7 +3,10 @@
   "compilerOptions": {
     "rootDir": "src",
     "outDir": "dist",
-    "noEmit": true
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "composite": false
   },
   "include": ["src/**/*"]
 }

package/docs/content/integrations.md

@@ -1,198 +0,0 @@
----
-title: "Integrations"
-description: "Connect your agent to Slack, Telegram, WhatsApp, and other messaging platforms."
----
-
-# Integrations
-
-Connect your agent to messaging platforms so you can chat with it from Slack, Telegram, WhatsApp, and more. Same agent, same tools, same thread history.
-
-## Overview {#overview}
-
-Messaging integrations let users talk to their agent from the platforms they already use. Instead of opening the web UI, you send a message in Slack or Telegram and the agent responds right there. It has access to the same actions, the same database, and the same conversation history as the web chat.
-
-Each integration works through webhooks. The messaging platform sends incoming messages to your app, the agent processes them, and the response is posted back. No polling, no long-lived connections — just standard HTTP webhooks.
-
-## How it works {#how-it-works}
-
-The flow for every platform follows the same pattern:
-
-1. A user sends a message on the external platform (Slack, Telegram, etc.)
-2. The platform delivers the message to your app via a webhook at `/_agent-native/integrations/<platform>/webhook`
-3. The integrations plugin validates the request, extracts the message text and thread context, and maps it to an internal conversation thread
-4. The agent processes the message in the background using the same pipeline as the web chat — same system prompt, same actions, same tools
-5. The response is posted back to the external platform in the same thread
-
-`User (Slack/Telegram/WhatsApp)` → `Webhook` → `Agent Processing` → `Response posted back`
-
-## Setup {#setup}
-
-The integrations plugin auto-mounts when no custom version exists in your template. To customize it, create a plugin file:
-
-```ts
-// server/plugins/integrations.ts
-import { createIntegrationsPlugin } from "@agent-native/core/server";
-import { scriptRegistry } from "../../agent.config";
-
-export default createIntegrationsPlugin({
-  actions: scriptRegistry,
-  systemPrompt: "You are a helpful assistant...",
-});
-```
-
-The plugin registers webhook routes for each enabled platform under `/_agent-native/integrations/`. Which platforms are active depends on which environment variables are configured.
-
-## Slack {#slack}
-
-### 1. Create a Slack app
-
-Go to [api.slack.com/apps](https://api.slack.com/apps) and create a new app. Under **OAuth & Permissions**, add the following bot token scopes:
-
-- `chat:write` — send messages
-- `app_mentions:read` — receive @-mentions (optional)
-
-### 2. Enable Event Subscriptions
-
-Under **Event Subscriptions**, set the Request URL to:
-
-```text
-https://your-app.example.com/_agent-native/integrations/slack/webhook
-```
-
-Subscribe to the `message.im` bot event (and optionally `app_mention` for channel mentions).
-
-### 3. Set environment variables
-
-```bash
-SLACK_BOT_TOKEN=xoxb-your-bot-token
-SLACK_SIGNING_SECRET=your-signing-secret
-```
-
-The bot token is found under **OAuth & Permissions** after installing the app to your workspace. The signing secret is under **Basic Information**.
-
-## Telegram {#telegram}
-
-### 1. Create a bot
-
-Message [@BotFather](https://t.me/BotFather) on Telegram and use the `/newbot` command. You will receive a bot token.
-
-### 2. Set environment variables
-
-```bash
-TELEGRAM_BOT_TOKEN=your-bot-token
-```
-
-### 3. Register the webhook
-
-After deploying your app, call the setup endpoint to register the webhook with Telegram:
-
-```text
-// The integrations plugin exposes a setup endpoint
-POST /_agent-native/integrations/telegram/setup
-
-// This calls Telegram's setWebhook API pointing to:
-// https://your-app.example.com/_agent-native/integrations/telegram/webhook
-```
-
-You can also register the webhook manually using the Telegram Bot API if you prefer.
-
-## WhatsApp {#whatsapp}
-
-### 1. Set up the WhatsApp Cloud API
-
-Go to the [Meta Developer Portal](https://developers.facebook.com/), create an app, and enable the WhatsApp product. Configure a phone number for your business.
-
-### 2. Set environment variables
-
-```bash
-WHATSAPP_ACCESS_TOKEN=your-access-token
-WHATSAPP_VERIFY_TOKEN=your-verify-token
-WHATSAPP_PHONE_NUMBER_ID=your-phone-number-id
-```
-
-The verify token is a string you choose — Meta uses it during webhook verification. The access token and phone number ID come from the Meta Developer Portal.
-
-### 3. Configure the webhook
-
-In the Meta Developer Portal, set the webhook URL to:
-
-```text
-https://your-app.example.com/_agent-native/integrations/whatsapp/webhook
-```
-
-Subscribe to the `messages` webhook field.
-
-## Configuration {#configuration}
-
-Integrations can be managed from the settings UI in the sidebar. Each platform shows its connection status and webhook URL. You can enable/disable individual integrations without removing environment variables.
-
-The webhook URLs follow a consistent pattern:
-
-```text
-/_agent-native/integrations/<platform>/webhook
-
-# Examples:
-/_agent-native/integrations/slack/webhook
-/_agent-native/integrations/telegram/webhook
-/_agent-native/integrations/whatsapp/webhook
-```
-
-## Thread continuity {#thread-continuity}
-
-Conversations from external platforms are mapped to internal threads. Each Slack DM, Telegram chat, or WhatsApp conversation becomes a persistent thread in the agent-native database. This means:
-
-- The agent retains context across messages in the same external conversation
-- External conversations appear in the web UI alongside web-originated threads, tagged with their source platform
-- You can continue a conversation that started in Slack from the web UI, or vice versa
-
-## Custom adapters {#custom-adapters}
-
-To add support for a new messaging platform, implement the `PlatformAdapter` interface:
-
-```ts
-import type { PlatformAdapter } from "@agent-native/core/server";
-
-const myAdapter: PlatformAdapter = {
-  platform: "discord",
-
-  // Verify the incoming webhook request is authentic
-  verifyRequest(request: Request): Promise<boolean> {
-    // Validate signature headers
-  },
-
-  // Extract the message text and thread context from the webhook payload
-  parseMessage(body: unknown): Promise<{
-    text: string;
-    threadId: string;
-    senderId: string;
-    metadata?: Record<string, unknown>;
-  }> {
-    // Parse platform-specific payload
-  },
-
-  // Send the agent's response back to the platform
-  sendResponse(threadId: string, text: string): Promise<void> {
-    // Call the platform's API to post the message
-  },
-};
-```
-
-Register your adapter in the integrations plugin config:
-
-```ts
-export default createIntegrationsPlugin({
-  actions: scriptRegistry,
-  systemPrompt: "You are a helpful assistant...",
-  adapters: [myAdapter],
-});
-```
-
-## Security {#security}
-
-Every incoming webhook is verified before processing:
-
-- **Slack** — HMAC-SHA256 signature verification using `SLACK_SIGNING_SECRET`. The `X-Slack-Signature` header is checked against the request body.
-- **Telegram** — requests are validated by checking the secret token set during webhook registration via the Telegram Bot API.
-- **WhatsApp** — Meta's webhook verification challenge (using `WHATSAPP_VERIFY_TOKEN`) and payload signature validation.
-
-All platform credentials (tokens, secrets) are stored as environment variables and never persisted in the database or source code. Use the settings UI or your deployment platform's env var management to configure them.