@agent-native/core 0.119.0 → 0.119.2

package/corpus/core/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/corpus/core/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/corpus/core/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/corpus/core/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/corpus/core/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/corpus/core/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/corpus/core/src/ingestion/figma-node-to-html.ts

@@ -62,6 +62,15 @@
  * mismatch.
  */
 
+import {
+  cssBlendMode,
+  gradientAngleDegrees as gradientAngleDegreesMath,
+  remapLinearStopPosition as remapLinearStopPositionMath,
+  resolveGradientHandles,
+  vectorLength,
+  type GradientHandles,
+} from "./figma-paint-math.js";
+
 export interface FigmaColor {
   r: number;
   g: number;
@@ -422,16 +431,8 @@ class FidelityTracker {
 // Gradient angle / position derivation
 // ---------------------------------------------------------------------------
 
-interface GradientGeometry {
-  start: { x: number; y: number };
-  end: { x: number; y: number };
-  width: { x: number; y: number };
-}
-
-function resolveGradientGeometry(paint: FigmaPaint): GradientGeometry | null {
-  const handles = paint.gradientHandlePositions;
-  if (!handles || handles.length < 3) return null;
-  return { start: handles[0]!, end: handles[1]!, width: handles[2]! };
+function resolveGradientGeometry(paint: FigmaPaint): GradientHandles | null {
+  return resolveGradientHandles(paint.gradientHandlePositions);
 }
 
 /**
@@ -453,13 +454,7 @@ export function gradientAngleDegrees(
   paint: FigmaPaint,
   box: { width: number; height: number },
 ): number | null {
-  const geometry = resolveGradientGeometry(paint);
-  if (!geometry) return null;
-  const dx = (geometry.end.x - geometry.start.x) * box.width;
-  const dy = (geometry.end.y - geometry.start.y) * box.height;
-  const angleRad = Math.atan2(dy, dx);
-  const angleDeg = (angleRad * 180) / Math.PI + 90;
-  return ((angleDeg % 360) + 360) % 360;
+  return gradientAngleDegreesMath(paint, box);
 }
 
 function gradientStopsCss(
@@ -478,59 +473,12 @@ function gradientStopsCss(
     .join(", ");
 }
 
-/**
- * CSS `linear-gradient(angle, ...)` always stretches its 0%/100% stops
- * across the box's FULL diagonal extent at that angle (the CSS spec's
- * "gradient line" always spans corner-to-corner) -- it has no way to say
- * "start partway in, end partway in" the way Figma's actual gradient handles
- * can (a designer can drag the start/end handles anywhere, including short
- * of the shape's edges, or past them). Figma's own stop positions are
- * fractions of the literal start-handle-to-end-handle distance, which only
- * happens to coincide with the CSS full-box span when the handles are
- * dragged exactly corner-to-corner -- a common case, but far from the only
- * one, and the divergence gets worse the more the box's aspect ratio departs
- * from square (rotated/skewed handles included, e.g. gradientTransform-authored
- * paints). This projects each Figma stop's real pixel position onto the same
- * angle CSS will use and re-expresses it as a percentage of the CSS line's
- * length, so a partial/offset gradient renders at the same actual pixel
- * positions Figma draws it at instead of silently stretching to fill the box.
- */
 function remapLinearStopPosition(
-  geometry: GradientGeometry,
+  geometry: GradientHandles,
   box: { width: number; height: number },
   angleDeg: number,
 ): (position: number) => number {
-  const angleRad = (angleDeg * Math.PI) / 180;
-  const ux = Math.sin(angleRad);
-  const uy = -Math.cos(angleRad);
-  const lineLength = box.width * Math.abs(ux) + box.height * Math.abs(uy);
-  if (lineLength < 1e-6) return (position) => position;
-  const startPx = {
-    x: geometry.start.x * box.width,
-    y: geometry.start.y * box.height,
-  };
-  const endPx = {
-    x: geometry.end.x * box.width,
-    y: geometry.end.y * box.height,
-  };
-  const centerX = box.width / 2;
-  const centerY = box.height / 2;
-  return (position: number) => {
-    const pointX = startPx.x + position * (endPx.x - startPx.x);
-    const pointY = startPx.y + position * (endPx.y - startPx.y);
-    const projected = (pointX - centerX) * ux + (pointY - centerY) * uy;
-    return (projected + lineLength / 2) / lineLength;
-  };
-}
-
-function vectorLength(
-  from: { x: number; y: number },
-  to: { x: number; y: number },
-  box: { width: number; height: number },
-): number {
-  const dx = (to.x - from.x) * box.width;
-  const dy = (to.y - from.y) * box.height;
-  return Math.sqrt(dx * dx + dy * dy);
+  return remapLinearStopPositionMath(geometry, box, angleDeg);
 }
 
 /**
@@ -960,49 +908,22 @@ function buildEffects(
 // Blend modes
 // ---------------------------------------------------------------------------
 
-const CSS_BLEND_MODES = new Set([
-  "multiply",
-  "screen",
-  "overlay",
-  "darken",
-  "lighten",
-  "color-dodge",
-  "color-burn",
-  "hard-light",
-  "soft-light",
-  "difference",
-  "exclusion",
-  "hue",
-  "saturation",
-  "color",
-  "luminosity",
-]);
-
-const FIGMA_ONLY_BLEND_MODE_FALLBACK: Record<string, string> = {
-  LINEAR_BURN: "multiply",
-  LINEAR_DODGE: "plus-lighter",
-  LIGHTER: "plus-lighter",
-  DARKER: "darken",
-};
-
 function buildBlendMode(
   node: FigmaNode,
   tracker: FidelityTracker,
 ): string | undefined {
   const mode = node.blendMode;
-  if (!mode || mode === "PASS_THROUGH" || mode === "NORMAL") return undefined;
-  const cssMode = mode.toLowerCase().replace(/_/g, "-");
-  if (CSS_BLEND_MODES.has(cssMode)) return cssMode;
-  const fallback = FIGMA_ONLY_BLEND_MODE_FALLBACK[mode];
-  if (fallback) {
+  if (!mode) return undefined;
+  const result = cssBlendMode(mode);
+  if (!result) return undefined;
+  if (result.verdict === "approximated") {
     tracker.record(
       node,
       "approximated",
-      `Figma blend mode "${mode}" has no CSS equivalent; approximated as mix-blend-mode: ${fallback}.`,
+      `Figma blend mode "${mode}" has no CSS equivalent; approximated as mix-blend-mode: ${result.cssMode}.`,
     );
-    return fallback;
   }
-  return undefined;
+  return result.cssMode;
 }
 
 // ---------------------------------------------------------------------------