@agent-native/core 0.119.1 → 0.119.3

package/src/client/settings/SettingsTabsPage.tsx

@@ -3,6 +3,7 @@ import {
   IconHistory,
   IconSearch,
   IconSettings,
+  IconUserCircle,
   IconUsers,
   IconX,
 } from "@tabler/icons-react";
@@ -15,6 +16,7 @@ import {
   type ComponentType,
   type ReactNode,
 } from "react";
+import { Link } from "react-router";
 
 import { cn } from "../utils.js";
 
@@ -50,6 +52,8 @@ export interface SettingsTabItem {
   label: string;
   icon?: SettingsTabIcon;
   content: ReactNode;
+  /** Optional route for settings that live on a canonical page elsewhere. */
+  href?: string;
   /** Whether a parent surface may expose a personal/organization scope for this tab. */
   scopeAware?: boolean;
   /**
@@ -66,10 +70,12 @@ export interface SettingsTabItem {
 
 export interface SettingsTabsPageProps {
   general: ReactNode;
+  account?: ReactNode;
   team?: ReactNode;
   whatsNew?: ReactNode;
   extraTabs?: SettingsTabItem[];
   generalLabel?: string;
+  accountLabel?: string;
   teamLabel?: string;
   whatsNewLabel?: string;
   ariaLabel?: string;
@@ -182,10 +188,12 @@ function isEditableElement(element: Element | null): boolean {
 
 export function SettingsTabsPage({
   general,
+  account,
   team,
   whatsNew,
   extraTabs = [],
   generalLabel = "General",
+  accountLabel = "Account",
   teamLabel = "Team",
   whatsNewLabel = "What's new",
   ariaLabel = "Settings sections",
@@ -217,6 +225,15 @@ export function SettingsTabsPage({
         searchEntries: generalSearchEntries,
       },
     ];
+    if (account) {
+      next.push({
+        id: "account",
+        label: accountLabel,
+        icon: IconUserCircle,
+        content: account,
+        keywords: "profile photo avatar identity signed in email name",
+      });
+    }
     next.push(...extraTabs);
     if (team && !hasOrganizationTab) {
       next.push({
@@ -238,6 +255,8 @@ export function SettingsTabsPage({
     }
     return next;
   }, [
+    account,
+    accountLabel,
     extraTabs,
     general,
     generalLabel,
@@ -271,7 +290,9 @@ export function SettingsTabsPage({
   const activeTab = isControlled ? value : internalTab;
   const [query, setQuery] = useState("");
   const designSystem = useDesignSystem();
-  const hasCustomTabs = Boolean(designSystem?.components?.Tabs);
+  const hasLinkedTabs = tabs.some((tab) => Boolean(tab.href));
+  const hasCustomTabs =
+    Boolean(designSystem?.components?.Tabs) && !hasLinkedTabs;
 
   const changeTab = useCallback(
     (tabId: string) => {
@@ -493,15 +514,16 @@ export function SettingsTabsPage({
             ) : (
               results.map((entry) => {
                 const Icon = entry.icon;
-                return (
-                  <button
-                    key={entry.id}
-                    type="button"
-                    role="option"
-                    aria-selected={false}
-                    onClick={() => selectEntry(entry)}
-                    className="flex items-start gap-2 rounded-md px-2.5 py-2 text-start text-sm text-foreground transition-colors hover:bg-accent/60"
-                  >
+                const tab = tabs.find(
+                  (candidate) => candidate.id === entry.tabId,
+                );
+                const resultHref = tab?.href
+                  ? entry.hash
+                    ? `${tab.href.split("#", 1)[0]}#${entry.hash.replace(/^#/, "")}`
+                    : tab.href
+                  : null;
+                const result = (
+                  <>
                     {Icon ? (
                       <Icon className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
                     ) : null}
@@ -513,6 +535,28 @@ export function SettingsTabsPage({
                         {entry.description ?? entry.tabLabel}
                       </span>
                     </span>
+                  </>
+                );
+                return resultHref ? (
+                  <Link
+                    key={entry.id}
+                    to={resultHref}
+                    role="option"
+                    aria-selected={false}
+                    className="flex items-start gap-2 rounded-md px-2.5 py-2 text-start text-sm text-foreground transition-colors hover:bg-accent/60"
+                  >
+                    {result}
+                  </Link>
+                ) : (
+                  <button
+                    key={entry.id}
+                    type="button"
+                    role="option"
+                    aria-selected={false}
+                    onClick={() => selectEntry(entry)}
+                    className="flex items-start gap-2 rounded-md px-2.5 py-2 text-start text-sm text-foreground transition-colors hover:bg-accent/60"
+                  >
+                    {result}
                   </button>
                 );
               })
@@ -558,6 +602,39 @@ export function SettingsTabsPage({
                   {group.tabs.map((tab) => {
                     const Icon = tab.icon;
                     const selected = tab.id === selectedTab?.id;
+                    const tabContent = (
+                      <>
+                        {Icon ? (
+                          <Icon
+                            className={cn(
+                              "size-4 shrink-0",
+                              selected
+                                ? "text-foreground"
+                                : "text-muted-foreground",
+                            )}
+                          />
+                        ) : null}
+                        <span className="truncate">{tab.label}</span>
+                      </>
+                    );
+                    if (tab.href) {
+                      return (
+                        <Link
+                          key={tab.id}
+                          role="tab"
+                          aria-selected={selected}
+                          to={tab.href}
+                          className={cn(
+                            "flex min-h-9 shrink-0 items-center gap-2 rounded-md px-3 py-2 text-start text-sm font-medium transition-colors sm:w-full",
+                            selected
+                              ? "bg-accent text-foreground"
+                              : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
+                          )}
+                        >
+                          {tabContent}
+                        </Link>
+                      );
+                    }
                     return (
                       <button
                         key={tab.id}
@@ -577,17 +654,7 @@ export function SettingsTabsPage({
                             : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
                         )}
                       >
-                        {Icon ? (
-                          <Icon
-                            className={cn(
-                              "size-4 shrink-0",
-                              selected
-                                ? "text-foreground"
-                                : "text-muted-foreground",
-                            )}
-                          />
-                        ) : null}
-                        <span className="truncate">{tab.label}</span>
+                        {tabContent}
                       </button>
                     );
                   })}

package/src/client/settings/agent-settings-search.ts

@@ -42,7 +42,6 @@ export const SETTINGS_SECTION_IDS = new Set<SettingsSectionId>([
 ]);
 
 export const ALL_SETTINGS_SECTIONS: readonly SettingsSectionId[] = [
-  "account",
   "llm",
   "app-models",
   "limits",
@@ -81,7 +80,6 @@ export const CONNECTION_SETTINGS_SECTIONS: readonly SettingsSectionId[] = [
 ];
 
 export const WORKSPACE_SETTINGS_SECTIONS: readonly SettingsSectionId[] = [
-  "account",
   "demo-mode",
   "hosting",
   "database",

package/src/client/settings/index.ts

@@ -1,4 +1,5 @@
 export {
+  AgentSettingsContent,
   SettingsPanel,
   useAgentSettingsTabs,
   type SettingsPanelProps,
@@ -13,6 +14,12 @@ export {
   type SettingsTabItem,
   type SettingsTabsPageProps,
 } from "./SettingsTabsPage.js";
+export {
+  AccountSettingsCard,
+  AccountSettingsForm,
+  type AccountSettingsCardProps,
+  type AccountSettingsFormProps,
+} from "./AccountSettingsCard.js";
 export {
   openBuilderConnectPopup,
   useBuilderConnectFlow,

package/src/client/vite-dev-recovery-script.ts

@@ -22,8 +22,13 @@ export function getViteDevRecoveryScript(): string {
     if (params.has(${embedTokenParam}) || embedded === "1" || embedded === "true") return;
   } catch (e) {}
 
+  var INSTALL_KEY = "__agentNativeViteDevRecoveryInstalled";
+  if (window[INSTALL_KEY]) return;
+  window[INSTALL_KEY] = true;
+
   var RELOAD_KEY = "__an_optimize_reload";
   var MAX_RELOADS = 3;
+  var MIN_RELOAD_INTERVAL_MS = 2000;
   var RESET_AFTER_MS = 8000;
 
   var reloadTimer = null;
@@ -100,9 +105,21 @@ export function getViteDevRecoveryScript(): string {
     if (history.length >= 1) {
       showOverlay("Updating dev server\\u2026", "Reloading the page");
     }
-    reloadTimer = setTimeout(function() { window.location.reload(); }, 300);
+    var lastReloadAt = history.length ? history[history.length - 1] : 0;
+    var delay = Math.max(
+      300,
+      MIN_RELOAD_INTERVAL_MS - Math.max(0, Date.now() - lastReloadAt),
+    );
+    reloadTimer = setTimeout(function() { window.location.reload(); }, delay);
   }
 
+  window.addEventListener("vite:beforeFullReload", function() {
+    if (reloadTimer) {
+      clearTimeout(reloadTimer);
+      reloadTimer = null;
+    }
+  });
+
   function looksLikeViteFailureMessage(message) {
     if (!message) return false;
     return message.indexOf("Failed to fetch dynamically imported module") !== -1

package/src/db/client.ts

@@ -24,13 +24,28 @@ const loggedNeonPools = new WeakSet<object>();
 
 export type Dialect = "sqlite" | "postgres" | "d1";
 
+export interface DbExecQuery {
+  sql: string;
+  args?: unknown[];
+  /**
+   * Client-side wall-clock budget for this statement. Use only for idempotent
+   * reads unless the caller can safely tolerate a late write completing.
+   */
+  timeoutMs?: number;
+  /** Maximum connection-level attempts for this statement, including the first. */
+  maxAttempts?: number;
+}
+
+export type DbExecStatement = string | DbExecQuery;
+
 export interface DbExec {
-  execute(
-    sql: string | { sql: string; args?: unknown[] },
-  ): Promise<{ rows: any[]; rowsAffected: number }>;
+  execute(sql: DbExecStatement): Promise<{
+    rows: any[];
+    rowsAffected: number;
+  }>;
   transaction?<T>(fn: (tx: DbExec) => Promise<T>): Promise<T>;
   atomicBatch?(
-    statements: readonly (string | { sql: string; args?: unknown[] })[],
+    statements: readonly DbExecStatement[],
   ): Promise<Array<{ rows: any[]; rowsAffected: number }>>;
   /**
    * Release the underlying connection/pool held by this exec.
@@ -613,7 +628,7 @@ export function sqliteToPostgresParams(sql: string): string {
   return out;
 }
 
-function sqlAndArgs(sql: string | { sql: string; args?: unknown[] }): {
+function sqlAndArgs(sql: DbExecStatement): {
   rawSql: string;
   args: unknown[];
 } {
@@ -622,6 +637,27 @@ function sqlAndArgs(sql: string | { sql: string; args?: unknown[] }): {
     : { rawSql: sql.sql, args: sql.args || [] };
 }
 
+export function dbExecQueryBudget(statement: DbExecStatement): {
+  timeoutMs: number;
+  maxAttempts: number;
+} {
+  if (typeof statement === "string") {
+    return { timeoutMs: dbOpTimeoutMs(), maxAttempts: 3 };
+  }
+  const timeoutMs = Number(statement.timeoutMs);
+  const maxAttempts = Number(statement.maxAttempts);
+  return {
+    timeoutMs:
+      Number.isFinite(timeoutMs) && timeoutMs > 0
+        ? Math.floor(timeoutMs)
+        : dbOpTimeoutMs(),
+    maxAttempts:
+      Number.isFinite(maxAttempts) && maxAttempts > 0
+        ? Math.floor(maxAttempts)
+        : 3,
+  };
+}
+
 function explicitTransaction(
   execute: DbExec["execute"],
   begin = "BEGIN",
@@ -1173,8 +1209,10 @@ async function createDbExecInternal(
       async function queryNeonClient(
         client: any,
         sql: Parameters<DbExec["execute"]>[0],
+        timeoutOverrideMs?: number,
       ) {
         const { rawSql, args } = sqlAndArgs(sql);
+        const { timeoutMs } = dbExecQueryBudget(sql);
         const pgSql = sqliteToPostgresParams(rawSql);
         const result = await withDbTimeout(
           "query",
@@ -1183,7 +1221,7 @@ async function createDbExecInternal(
               rows: unknown[];
               rowCount?: number;
             }>,
-          dbOpTimeoutMs(),
+          timeoutOverrideMs ?? timeoutMs,
         );
         return {
           rows: result.rows,
@@ -1192,6 +1230,7 @@ async function createDbExecInternal(
       }
       return {
         async execute(sql) {
+          const { timeoutMs, maxAttempts } = dbExecQueryBudget(sql);
           if (bgHttp) {
             // HTTP-per-query path (poolQueryViaFetch=true): no pool.connect(), no
             // persistent socket to stall. queryNeonClient calls pool.query(),
@@ -1199,12 +1238,15 @@ async function createDbExecInternal(
             return retryOnConnectionError<{
               rows: unknown[];
               rowsAffected: number;
-            }>(() => queryNeonClient(pool, sql));
+            }>(() => queryNeonClient(pool, sql), maxAttempts);
           }
           const result = await retryOnConnectionError<{
             rows: unknown[];
             rowsAffected: number;
           }>(async () => {
+            const attemptStartedAt = Date.now();
+            const remainingAttemptMs = () =>
+              Math.max(1, timeoutMs - (Date.now() - attemptStartedAt));
             // Bound the pooled-connection ACQUIRE, not just the query below.
             // Neon's pooler can stall on `connect()` when cold or exhausted,
             // and that happens BEFORE `client.query`, so the query-level
@@ -1222,7 +1264,7 @@ async function createDbExecInternal(
                   if (acquireTimedOut) c.release();
                   return c;
                 }),
-              dbOpTimeoutMs(),
+              remainingAttemptMs(),
               () => {
                 acquireTimedOut = true;
               },
@@ -1235,14 +1277,18 @@ async function createDbExecInternal(
             };
 
             try {
-              const result = await queryNeonClient(client, sql);
+              const result = await queryNeonClient(
+                client,
+                sql,
+                remainingAttemptMs(),
+              );
               releaseClient();
               return result;
             } catch (err) {
               releaseClient(isConnectionError(err) ? true : undefined);
               throw err;
             }
-          });
+          }, maxAttempts);
           return {
             rows: result.rows,
             rowsAffected: result.rowsAffected,
@@ -1310,6 +1356,7 @@ async function createDbExecInternal(
           try {
             const rawSql = typeof sql === "string" ? sql : sql.sql;
             const args = typeof sql === "string" ? [] : sql.args || [];
+            const { timeoutMs } = dbExecQueryBudget(sql);
             const pgSql = sqliteToPostgresParams(rawSql);
             const result = await withDbTimeout<
               ArrayLike<unknown> & { count?: number }
@@ -1319,7 +1366,7 @@ async function createDbExecInternal(
                 conn.unsafe(pgSql, args as any[]) as Promise<
                   ArrayLike<unknown> & { count?: number }
                 >,
-              dbOpTimeoutMs(),
+              timeoutMs,
               () => {
                 timedOut = true;
                 disposePostgresPoolEventually(conn, "timed-out worker query");
@@ -1351,6 +1398,7 @@ async function createDbExecInternal(
               const tx: DbExec = {
                 async execute(sql) {
                   const { rawSql, args } = sqlAndArgs(sql);
+                  const { timeoutMs } = dbExecQueryBudget(sql);
                   const pgSql = sqliteToPostgresParams(rawSql);
                   const result = await withDbTimeout<
                     ArrayLike<unknown> & { count?: number }
@@ -1360,7 +1408,7 @@ async function createDbExecInternal(
                       txSql.unsafe(pgSql, args as any[]) as Promise<
                         ArrayLike<unknown> & { count?: number }
                       >,
-                    dbOpTimeoutMs(),
+                    timeoutMs,
                   );
                   return {
                     rows: Array.from(result),
@@ -1402,6 +1450,7 @@ async function createDbExecInternal(
       return {
         async execute(sql) {
           const { rawSql, args } = sqlAndArgs(sql);
+          const { timeoutMs, maxAttempts } = dbExecQueryBudget(sql);
           const pgSql = sqliteToPostgresParams(rawSql);
           const result = await retryOnConnectionError<
             ArrayLike<unknown> & { count?: number }
@@ -1411,10 +1460,10 @@ async function createDbExecInternal(
             return withDbTimeout(
               "query",
               () => query,
-              dbOpTimeoutMs(),
+              timeoutMs,
               () => recyclePool(queryPool),
             );
-          });
+          }, maxAttempts);
           return {
             rows: Array.from(result),
             rowsAffected: result.count ?? 0,
@@ -1425,6 +1474,7 @@ async function createDbExecInternal(
             const tx: DbExec = {
               async execute(sql) {
                 const { rawSql, args } = sqlAndArgs(sql);
+                const { timeoutMs } = dbExecQueryBudget(sql);
                 const pgSql = sqliteToPostgresParams(rawSql);
                 const result = await withDbTimeout<
                   ArrayLike<unknown> & { count?: number }
@@ -1434,7 +1484,7 @@ async function createDbExecInternal(
                     txSql.unsafe(pgSql, args as any[]) as Promise<
                       ArrayLike<unknown> & { count?: number }
                     >,
-                  dbOpTimeoutMs(),
+                  timeoutMs,
                 );
                 return {
                   rows: Array.from(result),

package/src/db/index.ts

@@ -46,6 +46,8 @@ export {
   closeDbExec,
   type DbExec,
   type DbExecConfig,
+  type DbExecQuery,
+  type DbExecStatement,
   type Dialect,
 } from "./client.js";
 export { table, text, integer, now } from "./schema.js";

package/src/localization/default-messages.ts

@@ -18,6 +18,7 @@ const messages = {
   },
   settings: {
     title: "Settings",
+    pageTitle: "Settings",
     description: "Language and workspace preferences for this app.",
     languageTitle: "Language",
     languageDescription:

package/src/server/email.ts

@@ -36,6 +36,7 @@ export interface SendEmailArgs {
   inReplyTo?: string;
   references?: string;
   attachments?: EmailAttachment[];
+  timeoutMs?: number;
 }
 
 let cachedAgentNativeLogo: Buffer | undefined;
@@ -125,8 +126,12 @@ function getFromAddress(
   return "Agent Native <onboarding@resend.dev>";
 }
 
-export async function sendEmail(args: SendEmailArgs): Promise<void> {
+async function sendEmailWithSignal(
+  args: SendEmailArgs,
+  signal?: AbortSignal,
+): Promise<void> {
   const config = await resolveEmailTransport();
+  signal?.throwIfAborted();
   const provider = config.provider;
   const from = getFromAddress(config, args.from);
   const attachments = resolveAttachments(args);
@@ -164,6 +169,7 @@ export async function sendEmail(args: SendEmailArgs): Promise<void> {
         "Content-Type": "application/json",
       },
       body: JSON.stringify(payload),
+      signal,
     });
     if (!res.ok) {
       const body = await res.text().catch(() => "");
@@ -215,6 +221,7 @@ export async function sendEmail(args: SendEmailArgs): Promise<void> {
         "Content-Type": "application/json",
       },
       body: JSON.stringify(sgPayload),
+      signal,
     });
     if (!res.ok) {
       const body = await res.text().catch(() => "");
@@ -239,6 +246,31 @@ export async function sendEmail(args: SendEmailArgs): Promise<void> {
   );
 }
 
+export async function sendEmail(args: SendEmailArgs): Promise<void> {
+  const requestedTimeoutMs = Number(args.timeoutMs);
+  if (!Number.isFinite(requestedTimeoutMs) || requestedTimeoutMs <= 0) {
+    return sendEmailWithSignal(args);
+  }
+
+  const timeoutMs = Math.floor(requestedTimeoutMs);
+  const controller = new AbortController();
+  const timeoutError = new Error(`Email send timed out after ${timeoutMs}ms`);
+  let timeout: ReturnType<typeof setTimeout> | undefined;
+  try {
+    await Promise.race([
+      sendEmailWithSignal(args, controller.signal),
+      new Promise<never>((_, reject) => {
+        timeout = setTimeout(() => {
+          controller.abort(timeoutError);
+          reject(timeoutError);
+        }, timeoutMs);
+      }),
+    ]);
+  } finally {
+    if (timeout) clearTimeout(timeout);
+  }
+}
+
 function parseSendGridFrom(from: string): { email: string; name?: string } {
   const m = from.match(/^\s*(.*?)\s*<(.+)>\s*$/);
   if (m && m[2]) return { name: m[1] || undefined, email: m[2] };

package/src/styles/agent-native.css

@@ -139,6 +139,28 @@
   background: inherit;
 }
 
+.message-scroller-viewport--top-fade {
+  --message-scroller-top-fade-size: 48px;
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    black var(--message-scroller-top-fade-size),
+    black 100%
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    black var(--message-scroller-top-fade-size),
+    black 100%
+  );
+  -webkit-mask-position: 0 0;
+  mask-position: 0 0;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+}
+
 .agent-sidebar-resize-handle {
   background: transparent;
 }
@@ -888,6 +910,7 @@
 
 [data-agent-empty-state="centered"] {
   justify-content: center;
+  padding-bottom: clamp(3rem, 8vh, 6rem);
 }
 
 [data-agent-empty-state="centered"] > .agent-chat-scroll {

package/src/templates/chat/.agents/skills/frontend-design/SKILL.md

@@ -35,6 +35,34 @@ Then implement working code that is cohesive, accessible, responsive, and polish
 
 Default to Apple/Linear-level restraint: make the primary workflow obvious, then remove everything that does not help that workflow right now. A polished UI often has fewer visible controls, fewer borders, fewer labels, and fewer explanatory surfaces than the first reasonable implementation.
 
+### Progressive Disclosure Is A Design Requirement
+
+Treat an all-at-once interface as a defect to fix during design, not as a
+styling preference. Before coding, inventory every piece of content and action
+on the surface, then assign each one to the smallest useful visibility level:
+
+1. **Immediate** — the page title, current state, one primary action, and the
+   compact context needed to choose what to do next.
+2. **Expanded** — the details needed for the selected item or active workflow.
+3. **On demand** — advanced settings, diagnostics, credentials, metadata,
+   destructive actions, documentation, and rarely used tools.
+
+Use single-select accordions or simple disclosure rows for sibling panels when
+the user is choosing one item at a time. Inside an expanded panel, keep another
+layer for independent concerns instead of dumping every form, explanation, and
+secondary action into the first reveal. Prefer one flat panel with alignment,
+dividers, and whitespace over nested cards; provider or product icons should
+not receive decorative borders or containers unless the container communicates
+state or interaction. A collapsed row should still show the item name, status,
+and a concise summary so the user can scan the whole surface without opening
+everything.
+
+Before shipping, ask: “What can disappear until the user asks for it?” Then
+verify collapsed, expanded, loading, empty, error, and narrow-width states.
+If the first viewport contains multiple forms, repeated explanatory copy,
+documentation links, and controls for unrelated tasks, the surface has not
+passed this requirement yet.
+
 - **Start by subtracting**: Before adding a visible control, banner, toolbar row, card, or explanatory block, ask what can be removed, merged, renamed, or moved into an existing affordance.
 - **One primary action**: Each surface should have one dominant next action. Secondary actions belong in menus, popovers, command palettes, disclosure rows, or contextual hover/focus states unless they are used constantly.
 - **Progressively disclose rare work**: Advanced options, diagnostics, metadata, settings, import/export, destructive actions, and inspection tools should stay tucked away until requested. Prefer small icon triggers with tooltips, popovers, drawers, or detail panels over permanent chrome.

package/src/templates/chat/app/components/layout/Layout.tsx

@@ -60,7 +60,7 @@ export function Layout({ children }: LayoutProps) {
   useAgentChatHomeHandoffLinks({
     storageKey: "chat",
     isChatPath: (pathname) => pathname === "/" || pathname.startsWith("/chat/"),
-    requireActiveHandoff: false,
+    requireActiveHandoff: true,
   });
 
   useEffect(() => {

package/src/templates/chat/app/components/layout/Sidebar.tsx

@@ -228,7 +228,7 @@ function ChatThreadsSection() {
   }
 
   return (
-    <div className="mt-2 border-s border-sidebar-border/70 ps-3">
+    <div className="mt-2 ms-4">
       <ChatHistoryRail
         items={chatItems}
         activeId={displayedActiveThreadId}