@agent-native/core 0.119.0 → 0.119.2

package/corpus/templates/design/server/lib/figma-node-import.ts

@@ -36,6 +36,8 @@ const MAX_FIGMA_IMAGE_BYTES = 15 * 1024 * 1024;
 const MAX_TOTAL_FIGMA_IMAGE_BYTES = 64 * 1024 * 1024;
 const MAX_FIGMA_IMAGE_REFERENCES = 256;
 const MAX_FIGMA_IMAGE_IDS_PER_REQUEST = 50;
+// Figma's `/images` endpoint takes ids in the query string; cap the batch by
+// both count and URL length so a complex frame's ids are fetched in full.
 const MAX_FIGMA_IMAGE_IDS_QUERY_CHARS = 1_800;
 const MAX_CONCURRENT_FIGMA_IMAGE_UPLOADS = 4;
 const FIGMA_IMAGE_FETCH_TIMEOUT_MS = 20_000;
@@ -415,6 +417,7 @@ type FigmaProviderEnvelope = {
     ok?: boolean;
     status?: number;
     statusText?: string;
+    headers?: Record<string, string>;
     json?: unknown;
     text?: string;
     truncated?: boolean;
@@ -422,6 +425,46 @@ type FigmaProviderEnvelope = {
   };
 };
 
+export type FigmaRateLimitError = Error & {
+  statusCode: 429;
+  retryAfterSeconds?: number;
+  figmaPlanTier?: string;
+  figmaRateLimitType?: "low" | "high";
+  figmaUpgradeUrl?: string;
+};
+
+const FIGMA_PLAN_TIERS = new Set([
+  "enterprise",
+  "org",
+  "pro",
+  "starter",
+  "student",
+]);
+
+export function isFigmaRateLimitError(
+  err: unknown,
+): err is FigmaRateLimitError {
+  return (
+    err instanceof Error && (err as { statusCode?: unknown }).statusCode === 429
+  );
+}
+
+function figmaUpgradeUrl(value: string | undefined): string | undefined {
+  if (!value) return undefined;
+  try {
+    const url = new URL(value);
+    if (
+      url.protocol === "https:" &&
+      (url.hostname === "figma.com" || url.hostname.endsWith(".figma.com"))
+    ) {
+      return value;
+    }
+  } catch {
+    return undefined;
+  }
+  return undefined;
+}
+
 export function providerJson(envelope: unknown, label: string): unknown {
   const response = (envelope as FigmaProviderEnvelope | null)?.response;
   if (!response) throw new Error(`Figma ${label} response was empty.`);
@@ -431,11 +474,41 @@ export function providerJson(envelope: unknown, label: string): unknown {
     );
   }
   if (response.ok === false) {
+    const jsonBody = response.json as {
+      message?: string;
+      error?: string;
+    } | null;
     const detail =
       (typeof response.text === "string" && response.text.trim()) ||
+      (typeof jsonBody?.message === "string" && jsonBody.message) ||
       response.statusText ||
       `HTTP ${response.status ?? "error"}`;
-    throw new Error(`Figma ${label} request failed: ${detail}`);
+    const err = new Error(`Figma ${label} request failed: ${detail}`);
+    if (response.status === 429) {
+      const rateLimitError = err as FigmaRateLimitError;
+      rateLimitError.statusCode = 429;
+
+      const retryAfterHeader = response.headers?.["retry-after"];
+      if (retryAfterHeader) {
+        rateLimitError.retryAfterSeconds = parseInt(retryAfterHeader, 10);
+      }
+
+      const planTier = response.headers?.["x-figma-plan-tier"];
+      if (planTier && FIGMA_PLAN_TIERS.has(planTier)) {
+        rateLimitError.figmaPlanTier = planTier;
+      }
+
+      const rateLimitType = response.headers?.["x-figma-rate-limit-type"];
+      if (rateLimitType === "low" || rateLimitType === "high") {
+        rateLimitError.figmaRateLimitType = rateLimitType;
+      }
+
+      const upgradeUrl = figmaUpgradeUrl(
+        response.headers?.["x-figma-upgrade-link"],
+      );
+      if (upgradeUrl) rateLimitError.figmaUpgradeUrl = upgradeUrl;
+    }
+    throw err;
   }
   return response.json;
 }
@@ -567,47 +640,39 @@ async function fetchFallbackImageUrls(
   nodeIds: string[],
 ): Promise<Record<string, string>> {
   if (nodeIds.length === 0) return {};
-  const batches: string[][] = [];
+  const result: Record<string, string> = {};
+  const fetchBatch = async (ids: string[]) => {
+    if (ids.length === 0) return;
+    const envelope = await figmaGet(`/images/${fileKey}`, {
+      ids: ids.join(","),
+      format: "png",
+      scale: 2,
+    });
+    const json = providerJson(envelope, "images") as {
+      images?: Record<string, string | null | undefined>;
+    };
+    for (const [id, url] of Object.entries(json.images ?? {})) {
+      if (typeof url === "string" && url) result[id] = url;
+    }
+  };
+  // Batch over the full ID list by count and query length so complex frames
+  // don't silently drop layers beyond the first request.
   let batch: string[] = [];
   let queryChars = 0;
   for (const nodeId of nodeIds) {
-    if (nodeId.length > MAX_FIGMA_IMAGE_IDS_QUERY_CHARS) {
-      throw new Error("A Figma image fallback node id was unexpectedly long.");
-    }
-    const addedChars = nodeId.length + (batch.length > 0 ? 1 : 0);
+    const addedChars = nodeId.length + 1;
     if (
       batch.length >= MAX_FIGMA_IMAGE_IDS_PER_REQUEST ||
       queryChars + addedChars > MAX_FIGMA_IMAGE_IDS_QUERY_CHARS
     ) {
-      batches.push(batch);
+      await fetchBatch(batch);
       batch = [];
       queryChars = 0;
     }
     batch.push(nodeId);
-    queryChars += nodeId.length + (batch.length > 1 ? 1 : 0);
-  }
-  if (batch.length > 0) batches.push(batch);
-
-  const responses = await mapWithConcurrency(
-    batches,
-    MAX_CONCURRENT_FIGMA_IMAGE_UPLOADS,
-    async (ids) => {
-      const envelope = await figmaGet(`/images/${fileKey}`, {
-        ids: ids.join(","),
-        format: "png",
-        scale: 2,
-      });
-      return providerJson(envelope, "images") as {
-        images?: Record<string, string | null | undefined>;
-      };
-    },
-  );
-  const result: Record<string, string> = {};
-  for (const response of responses) {
-    for (const [id, url] of Object.entries(response.images ?? {})) {
-      if (typeof url === "string" && url) result[id] = url;
-    }
+    queryChars += addedChars;
   }
+  await fetchBatch(batch);
   return result;
 }
 
@@ -628,6 +693,34 @@ async function fetchImageFillUrls(
   return result;
 }
 
+/**
+ * Fetch CDN URLs for the given image-fill hex hashes via Figma's
+ * `/files/:key/images` endpoint, then mirror them to durable storage.
+ * Returns a Map from hex hash to durable URL. Hashes that Figma cannot
+ * resolve (deleted images, permission gaps) are omitted from the result.
+ *
+ * Used by `hydrate-figma-paste-images` to fill in `about:blank` placeholders
+ * that the local-kiwi clipboard decode path leaves behind.
+ */
+export async function resolveImageFillRefs(
+  fileKey: string,
+  hexHashes: string[],
+): Promise<Map<string, string>> {
+  if (hexHashes.length === 0) return new Map();
+  const cdnUrls = await fetchImageFillUrls(fileKey, hexHashes);
+  const cdnUrlList = Object.values(cdnUrls).filter(
+    (u): u is string => typeof u === "string" && u.length > 0,
+  );
+  if (cdnUrlList.length === 0) return new Map();
+  const durableMap = await mirrorFigmaImageUrls(cdnUrlList);
+  const result = new Map<string, string>();
+  for (const [hash, cdnUrl] of Object.entries(cdnUrls)) {
+    const durableUrl = durableMap.get(cdnUrl);
+    if (durableUrl) result.set(hash, durableUrl);
+  }
+  return result;
+}
+
 export function sanitizeTitle(
   name: string | undefined,
   fallback: string,
@@ -673,7 +766,11 @@ export async function buildScreenFilesFromFigmaNodes(
     source?: (nodeId: string, node: FigmaNode) => Record<string, unknown>;
     sourceLabel?: (nodeId: string, node: FigmaNode) => string;
   } = {},
-): Promise<{ files: ImportedDesignFile[]; fidelityEntries: FidelityEntry[] }> {
+): Promise<{
+  files: ImportedDesignFile[];
+  fidelityEntries: FidelityEntry[];
+  missingImageFillCount: number;
+}> {
   const entries = Object.entries(nodesById);
   const fallbackNodeIds = new Set<string>();
   const imageFillRefs = new Set<string>();
@@ -696,16 +793,16 @@ export async function buildScreenFilesFromFigmaNodes(
     (nodeId) => !fallbackImageUrls[nodeId],
   );
   if (missingFallbackNodeIds.length > 0) {
-    throw new Error(
-      `Figma could not render ${missingFallbackNodeIds.length} required fallback layer${missingFallbackNodeIds.length === 1 ? "" : "s"} (${missingFallbackNodeIds.slice(0, 5).join(", ")}${missingFallbackNodeIds.length > 5 ? ", …" : ""}). Nothing was imported so the design would not silently lose visible content. Try a smaller selection or retry the import.`,
+    console.warn(
+      `[figma-import] ${missingFallbackNodeIds.length} fallback layer(s) could not be rendered and will be omitted (${missingFallbackNodeIds.slice(0, 5).join(", ")}${missingFallbackNodeIds.length > 5 ? ", …" : ""}).`,
     );
   }
   const missingImageFillRefs = Array.from(imageFillRefs).filter(
     (imageRef) => !imageFillUrls[imageRef],
   );
   if (missingImageFillRefs.length > 0) {
-    throw new Error(
-      `Figma did not return ${missingImageFillRefs.length} required image fill${missingImageFillRefs.length === 1 ? "" : "s"}. Nothing was imported so the design would not silently omit imagery. Retry the import or export the affected frame from Figma.`,
+    console.warn(
+      `[figma-import] ${missingImageFillRefs.length} image fill ref(s) could not be resolved (likely from a component library file); those fills will be omitted.`,
     );
   }
   const durableUrls = await mirrorFigmaImageUrls([
@@ -763,5 +860,8 @@ export async function buildScreenFilesFromFigmaNodes(
     });
   }
 
-  return { files, fidelityEntries };
+  const finalMissingCount = missingImageFillRefs.filter(
+    (r) => !imageFillUrls[r],
+  ).length;
+  return { files, fidelityEntries, missingImageFillCount: finalMissingCount };
 }

package/corpus/templates/design/server/register-secrets.ts

@@ -65,7 +65,18 @@ registerRequiredSecret({
           "User-Agent": "AgentNative/1.0",
         },
       });
-      if (res.ok) return true;
+      console.log("[figma-validator] GET /v1/me status:", res.status);
+      if (res.ok) {
+        console.log("[figma-validator] token accepted");
+        return true;
+      }
+      let body = "";
+      try {
+        body = await res.text();
+      } catch {
+        /* ignore */
+      }
+      console.log("[figma-validator] Figma error body:", body);
       if (res.status === 401 || res.status === 403) {
         return {
           ok: false,
@@ -73,7 +84,8 @@ registerRequiredSecret({
         };
       }
       return { ok: false, error: `Figma returned ${res.status}.` };
-    } catch {
+    } catch (err) {
+      console.log("[figma-validator] fetch threw:", err);
       return {
         ok: false,
         error: "Could not reach Figma. Check your network and try again.",

package/corpus/templates/dispatch/.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/corpus/templates/dispatch/app/routes/settings.tsx

@@ -2,6 +2,7 @@ import { ChangelogSettingsCard } from "@agent-native/core/client/changelog";
 import { LanguagePicker, useT } from "@agent-native/core/client/i18n";
 import { TeamPage } from "@agent-native/core/client/org";
 import {
+  AccountSettingsCard,
   SettingsTabsPage,
   useAgentSettingsTabs,
   type SettingsSearchEntry,
@@ -50,6 +51,7 @@ export default function SettingsRoute() {
 
   return (
     <SettingsTabsPage
+      account={<AccountSettingsCard />}
       extraTabs={agentSettingsTabs}
       generalSearchEntries={generalSearchEntries}
       general={

package/corpus/templates/dispatch/changelog/2026-07-23-quieter-progressive-disclosure.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-23
+---
+
+Dispatch keeps messaging setup and destination details behind focused expandable panels.

package/corpus/templates/forms/.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/corpus/templates/forms/app/global.css

@@ -179,11 +179,6 @@
   width: 100%;
 }
 
-.forms-ask-chat-panel [data-agent-empty-state="centered"] {
-  justify-content: center;
-  padding-bottom: clamp(2rem, 6vh, 4rem);
-}
-
 .forms-ask-chat-panel [data-agent-empty-state="centered"] .agent-chat-scroll {
   flex: 0 0 auto;
   min-height: 0;

package/corpus/templates/forms/app/hooks/use-navigation-state.ts

@@ -1,7 +1,5 @@
-import { markAgentChatHomeHandoff } from "@agent-native/core/client/agent-chat";
 import { appBasePath } from "@agent-native/core/client/api-path";
 import { useAgentRouteState } from "@agent-native/core/client/navigation";
-import { useLocation } from "react-router";
 
 import {
   formsRoutePath,
@@ -74,8 +72,6 @@ function routerPath(path: string): string {
 }
 
 export function useNavigationState() {
-  const location = useLocation();
-
   useAgentRouteState<NavigationState, NavigateCommand>({
     browserTabId: TAB_ID,
     requestSource: TAB_ID,
@@ -129,9 +125,6 @@ export function useNavigationState() {
     navigateOptions: { flushSync: true, replace: true },
     onNavigate: (_command, path) => {
       void prewarmFormsRoutePath(path);
-      if (location.pathname === "/ask" && path !== "/ask") {
-        markAgentChatHomeHandoff("forms");
-      }
     },
   });
 }

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

@@ -1,7 +1,4 @@
-import {
-  markAgentChatHomeHandoff,
-  navigateWithAgentChatViewTransition,
-} from "@agent-native/core/client/agent-chat";
+import { navigateWithAgentChatViewTransition } from "@agent-native/core/client/agent-chat";
 import { configureTracking } from "@agent-native/core/client/analytics";
 import { appPath } from "@agent-native/core/client/api-path";
 import {
@@ -202,9 +199,6 @@ function OpenLinkInterceptor() {
       if (!path) return;
 
       event.preventDefault();
-      if (location.pathname === "/ask" && path !== "/ask") {
-        markAgentChatHomeHandoff("forms");
-      }
       navigateWithAgentChatViewTransition(navigate, path);
     }
 

package/corpus/templates/forms/app/routes/_app.settings.tsx

@@ -2,6 +2,7 @@ import { ChangelogSettingsCard } from "@agent-native/core/client/changelog";
 import { LanguagePicker, useT } from "@agent-native/core/client/i18n";
 import { TeamPage } from "@agent-native/core/client/org";
 import {
+  AccountSettingsCard,
   SettingsTabsPage,
   useAgentSettingsTabs,
   type SettingsSearchEntry,
@@ -44,6 +45,7 @@ export default function SettingsRoute() {
 
   return (
     <SettingsTabsPage
+      account={<AccountSettingsCard />}
       teamLabel={t("navigation.team")}
       extraTabs={agentSettingsTabs}
       generalSearchEntries={generalSearchEntries}

package/corpus/templates/forms/changelog/2026-07-23-ask-forms-is-better-centered-with-quieter-chat-history-and-a.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-23
+---
+
+Ask Forms is better centered, with quieter chat history and a left-aligned New chat action.

package/corpus/templates/macros/.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/corpus/templates/macros/app/routes/settings.tsx

@@ -2,6 +2,7 @@ import { ChangelogSettingsCard } from "@agent-native/core/client/changelog";
 import { LanguagePicker, useT } from "@agent-native/core/client/i18n";
 import { TeamPage } from "@agent-native/core/client/org";
 import {
+  AccountSettingsCard,
   SettingsTabsPage,
   useAgentSettingsTabs,
   type SettingsSearchEntry,
@@ -44,6 +45,7 @@ export default function SettingsRoute() {
 
   return (
     <SettingsTabsPage
+      account={<AccountSettingsCard />}
       teamLabel={t("team.title")}
       extraTabs={agentSettingsTabs}
       generalSearchEntries={generalSearchEntries}

package/corpus/templates/mail/.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/corpus/templates/mail/app/pages/SettingsPage.tsx

@@ -9,6 +9,7 @@ import {
 import { LanguagePicker, useT } from "@agent-native/core/client/i18n";
 import { TeamPage } from "@agent-native/core/client/org";
 import {
+  AccountSettingsCard,
   SettingsTabsPage,
   useAgentSettingsTabs,
   type SettingsSearchEntry,
@@ -1549,7 +1550,7 @@ export function SettingsPage() {
   );
 
   const validSectionIds = useMemo(() => {
-    const ids = new Set<string>(["general", "team", "whats-new"]);
+    const ids = new Set<string>(["general", "account", "team", "whats-new"]);
     for (const tab of extraTabs) ids.add(tab.id);
     return ids;
   }, [extraTabs]);
@@ -1578,6 +1579,7 @@ export function SettingsPage() {
 
   return (
     <SettingsTabsPage
+      account={<AccountSettingsCard />}
       className="flex-1"
       generalLabel={t("settings.general")}
       teamLabel={t("settings.team")}

package/corpus/templates/plan/.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/corpus/templates/plan/app/components/layout/Layout.tsx

@@ -95,7 +95,7 @@ export function Layout({ children }: LayoutProps) {
   useAgentChatHomeHandoffLinks({
     storageKey: "plans",
     chatPath: "/",
-    requireActiveHandoff: false,
+    requireActiveHandoff: true,
   });
   const hideAppNavigation = planDetailRoute && planReaderImmersive;
   const effectiveSidebarCollapsed = chatRoute
@@ -153,7 +153,7 @@ export function Layout({ children }: LayoutProps) {
 
   const pageContent = (
     <div className="flex h-full flex-1 flex-col overflow-hidden">
-      {ownsToolbar ? (
+      {chatRoute ? null : ownsToolbar ? (
         hideAppNavigation ? null : (
           <div className="flex h-12 items-center border-b border-border px-4 md:hidden shrink-0">
             <button