@agent-native/core 0.119.1 → 0.119.3

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

@@ -68,10 +68,9 @@ export function Layout({ children }: LayoutProps) {
   useAgentChatHomeHandoffLinks({
     storageKey: ASSETS_CHAT_STORAGE_KEY,
     isChatPath: (pathname) => pathname === "/" || pathname.startsWith("/chat/"),
-    // A direct /chat/:id link already names the thread and must preserve the
-    // normal chat-to-sidebar transition. Only the empty home chat needs the
-    // recent marker that proves an agent handoff is in flight.
-    requireActiveHandoff: false,
+    // Only preserve the transition when chat activity has recorded an active
+    // handoff; an empty home chat should keep the destination sidebar closed.
+    requireActiveHandoff: true,
   });
 
   useEffect(() => {

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

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

package/corpus/templates/assets/app/global.css

@@ -92,11 +92,6 @@
   background: hsl(var(--muted-foreground) / 0.4);
 }
 
-.assets-create-chat-panel [data-agent-empty-state="centered"] {
-  justify-content: center;
-  padding-bottom: clamp(4rem, 12vh, 8rem);
-}
-
 .assets-create-chat-intro {
   display: none;
 }

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

@@ -1,10 +1,5 @@
-import { markAgentChatHomeHandoff } from "@agent-native/core/client/agent-chat";
 import { getBrowserTabId } from "@agent-native/core/client/hooks";
 import { useAgentRouteState } from "@agent-native/core/client/navigation";
-import { useLocation } from "react-router";
-
-import { ASSETS_CHAT_STORAGE_KEY } from "@/lib/chat";
-
 function optionalParam(params: URLSearchParams, key: string) {
   const value = params.get(key)?.trim();
   return value ? value : undefined;
@@ -191,28 +186,15 @@ function pathFromCommand(command: any): string | null {
 }
 
 export function useNavigationState() {
-  const location = useLocation();
   useAgentRouteState({
     browserTabId: getBrowserTabId(),
     requestSource: getBrowserTabId(),
     getNavigationState: ({ pathname, search }) =>
       navigationFromPath(pathname, search),
     getCommandPath: (command) => pathFromCommand(command),
-    onNavigate: (_command, path) => {
-      if (
-        isCreatePath(location.pathname) &&
-        !isCreatePath(pathnameFromPath(path))
-      ) {
-        markAgentChatHomeHandoff(ASSETS_CHAT_STORAGE_KEY);
-      }
-    },
   });
 }
 
-function pathnameFromPath(path: string): string {
-  return path.split(/[?#]/, 1)[0] || "/";
-}
-
 function decodePathParam(value: string): string {
   try {
     return decodeURIComponent(value);
@@ -220,7 +202,3 @@ function decodePathParam(value: string): string {
     return value;
   }
 }
-
-function isCreatePath(pathname: string): boolean {
-  return pathname === "/" || pathname.startsWith("/chat/");
-}

package/corpus/templates/assets/app/routes/settings.tsx

@@ -9,6 +9,7 @@ import {
 } from "@agent-native/core/client/onboarding";
 import { TeamPage } from "@agent-native/core/client/org";
 import {
+  AccountSettingsCard,
   SettingsTabsPage,
   useAgentSettingsTabs,
   useBuilderConnectFlow,
@@ -107,6 +108,7 @@ export default function SettingsPage() {
       className="max-w-5xl"
     >
       <SettingsTabsPage
+        account={<AccountSettingsCard />}
         teamLabel={t("team.title")}
         extraTabs={agentSettingsTabs}
         generalSearchEntries={generalSearchEntries}

package/corpus/templates/assets/changelog/2026-07-23-create-and-chat-surfaces-are-better-centered-with-quieter-ch.md

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

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

@@ -47,7 +47,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
   useAgentChatHomeHandoffLinks({
     storageKey: "brain",
     chatPath: "/",
-    requireActiveHandoff: false,
+    requireActiveHandoff: true,
   });
 
   useEffect(() => {

package/corpus/templates/brain/app/components/layout/Sidebar.tsx

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

package/corpus/templates/brain/app/global.css

@@ -85,10 +85,6 @@
 }
 
 @container agent-native-main (min-width: 980px) {
-  .brain-settings-general-grid {
-    grid-template-columns: minmax(0, 1fr) 360px;
-  }
-
   .brain-source-card-grid {
     grid-template-columns: minmax(0, 1fr) minmax(20rem, auto) auto;
     align-items: center;
@@ -123,11 +119,6 @@
   background: hsl(var(--muted-foreground) / 0.4);
 }
 
-.brain-chat-panel [data-agent-empty-state="centered"] {
-  justify-content: center;
-  padding-bottom: clamp(4rem, 12vh, 8rem);
-}
-
 .brain-chat-intro {
   display: none;
 }

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

@@ -1,7 +1,5 @@
-import { markAgentChatHomeHandoff } from "@agent-native/core/client/agent-chat";
 import { appBasePath, appPath } from "@agent-native/core/client/api-path";
 import { useAgentRouteState } from "@agent-native/core/client/navigation";
-import { useLocation } from "react-router";
 
 import { pathFromView, viewFromPath, type BrainView } from "@/lib/brain";
 import { TAB_ID } from "@/lib/tab-id";
@@ -32,7 +30,6 @@ export interface NavigationState {
 }
 
 export function useNavigationState() {
-  const location = useLocation();
   useAgentRouteState<NavigationState>({
     browserTabId: TAB_ID,
     requestSource: TAB_ID,
@@ -105,18 +102,9 @@ export function useNavigationState() {
       );
       return `${path}${params.size ? `?${params.toString()}` : ""}`;
     },
-    onNavigate: (_command, path) => {
-      if (location.pathname === "/" && pathnameFromPath(path) !== "/") {
-        markAgentChatHomeHandoff("brain");
-      }
-    },
   });
 }
 
-function pathnameFromPath(path: string): string {
-  return path.split(/[?#]/, 1)[0] || "/";
-}
-
 /**
  * Resolve a navigate command `view` to a router path. `view: "capture"` (or any
  * command that only carries a `captureId`) resolves to the Search surface,

package/corpus/templates/brain/app/i18n-data.ts

@@ -57,6 +57,7 @@ const enUS = {
     brainNavigationDescription: "Navigate between Brain work surfaces.",
   },
   settings: {
+    pageTitle: "Settings",
     agentTitle: "Manage agent",
     agentDescription:
       "Manage the agent's model, API keys, automations, voice, and other controls.",

package/corpus/templates/brain/app/lib/settings-navigation.ts

@@ -1,7 +1,7 @@
 export function createSettingsSectionIds(
   appSectionIds: Iterable<string>,
 ): Set<string> {
-  return new Set(["general", "team", "whats-new", ...appSectionIds]);
+  return new Set(["general", "account", "team", "whats-new", ...appSectionIds]);
 }
 
 export function resolveSettingsSection(

package/corpus/templates/brain/app/routes/settings.tsx

@@ -6,6 +6,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,
@@ -24,7 +25,7 @@ import {
 import { useEffect, useMemo, useState } from "react";
 import { useSearchParams } from "react-router";
 
-import { EmptyActionState, PageHeader } from "@/components/brain/Surface";
+import { EmptyActionState } from "@/components/brain/Surface";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -658,35 +659,33 @@ export default function SettingsRoute() {
 
   return (
     <div className="min-h-full bg-background">
-      <PageHeader
-        eyebrow={t("settings.eyebrow")}
-        title={t("settings.title")}
-        description={t("settings.description")}
-        actions={
-          <Button
-            size="sm"
-            className="w-full sm:w-auto"
-            disabled={saveSettings.isPending || !isDirty}
-            onClick={() => saveSettings.mutate(settings)}
-          >
-            <IconDeviceFloppy className="size-4" />
-            {saveSettings.isPending
-              ? t("common.saving")
-              : isDirty
-                ? t("common.saveChanges")
-                : t("common.saved")}
-          </Button>
-        }
-      />
+      <header className="flex items-center justify-between gap-4 px-4 py-3 sm:px-5 lg:px-7">
+        <h1 className="text-lg font-semibold tracking-tight text-foreground">
+          {t("settings.pageTitle")}
+        </h1>
+        <Button
+          size="sm"
+          disabled={saveSettings.isPending || !isDirty}
+          onClick={() => saveSettings.mutate(settings)}
+        >
+          <IconDeviceFloppy className="size-4" />
+          {saveSettings.isPending
+            ? t("common.saving")
+            : isDirty
+              ? t("common.saveChanges")
+              : t("common.saved")}
+        </Button>
+      </header>
 
       <SettingsTabsPage
+        account={<AccountSettingsCard />}
         teamLabel={t("team.title")}
         extraTabs={settingsTabs}
         generalSearchEntries={generalSearchEntries}
         value={activeSection}
         onValueChange={handleSectionChange}
         general={
-          <div className="brain-settings-general-grid grid gap-5">
+          <div className="mx-auto grid w-full max-w-3xl gap-5">
             <main className="grid gap-5">
               <Card id="identity" className="scroll-mt-4">
                 <CardHeader>

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

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

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

@@ -3,6 +3,7 @@ import { callAction } from "@agent-native/core/client/hooks";
 import { LanguagePicker, useT } from "@agent-native/core/client/i18n";
 import { TeamPage } from "@agent-native/core/client/org";
 import {
+  AccountSettingsCard,
   SettingsTabsPage,
   useAgentSettingsTabs,
   type SettingsSearchEntry,
@@ -197,6 +198,7 @@ export default function Settings() {
 
   return (
     <SettingsTabsPage
+      account={<AccountSettingsCard />}
       generalLabel={t("settings.general")}
       teamLabel={t("navigation.team")}
       extraTabs={agentSettingsTabs}

package/corpus/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/corpus/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/corpus/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}

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

@@ -1,7 +1,5 @@
-import { markAgentChatHomeHandoff } from "@agent-native/core/client/agent-chat";
 import { appBasePath, appPath } from "@agent-native/core/client/api-path";
 import { useAgentRouteState } from "@agent-native/core/client/navigation";
-import { useLocation } from "react-router";
 
 import { TAB_ID } from "@/lib/tab-id";
 
@@ -12,7 +10,6 @@ export interface NavigationState {
 }
 
 export function useNavigationState() {
-  const location = useLocation();
   useAgentRouteState<NavigationState>({
     browserTabId: TAB_ID,
     requestSource: TAB_ID,
@@ -26,21 +23,9 @@ export function useNavigationState() {
     },
     getCommandPath: (command) =>
       routerPath(command.path || pathForCommand(command)),
-    onNavigate: (_command, path) => {
-      if (
-        isChatPath(location.pathname) &&
-        !isChatPath(pathnameFromPath(path))
-      ) {
-        markAgentChatHomeHandoff("chat");
-      }
-    },
   });
 }
 
-function pathnameFromPath(path: string): string {
-  return path.split(/[?#]/, 1)[0] || "/";
-}
-
 function threadIdFromPath(pathname: string): string | null {
   const match = pathname.match(/^\/chat\/([^/]+)/);
   if (!match) return null;

package/corpus/templates/chat/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("navigation.team")}
       extraTabs={agentSettingsTabs}
       generalSearchEntries={generalSearchEntries}

package/corpus/templates/chat/changelog/2026-07-23-full-page-chat-is-better-centered-with-quieter-chat-history-.md

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

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

@@ -7,6 +7,7 @@ import { useSession, useActionQuery } from "@agent-native/core/client/hooks";
 import { LanguagePicker, useT } from "@agent-native/core/client/i18n";
 import { TeamPage, useOrg, useSwitchOrg } from "@agent-native/core/client/org";
 import {
+  AccountSettingsCard,
   useBuilderConnectFlow,
   useBuilderStatus,
   SettingsTabsPage,
@@ -836,6 +837,7 @@ export default function SettingsIndexRoute() {
         </h1>
       </PageHeader>
       <SettingsTabsPage
+        account={<AccountSettingsCard />}
         whatsNewLabel={t("settings.whatsNew")}
         extraTabs={agentSettingsTabs}
         generalSearchEntries={generalSearchEntries}

package/corpus/templates/content/.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/content/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,
@@ -39,6 +40,7 @@ export default function SettingsRoute() {
   return (
     <div className="flex-1 overflow-auto">
       <SettingsTabsPage
+        account={<AccountSettingsCard />}
         teamLabel={t("team.pageTitle")}
         extraTabs={agentSettingsTabs}
         generalSearchEntries={generalSearchEntries}