@agent-native/core 0.80.8 → 0.80.9

package/corpus/templates/dispatch/app/routes/integrations.tsx

@@ -828,7 +828,7 @@ function ConnectionRow({
     connection.status === "disabled";
   return (
     <article className="rounded-lg border bg-card shadow-sm">
-      <div className="grid gap-4 p-4 lg:grid-cols-[minmax(0,1fr)_minmax(320px,0.9fr)]">
+      <div className="dispatch-connection-card-grid grid gap-4 p-4">
         <div className="min-w-0 space-y-3">
           <div className="flex flex-wrap items-start justify-between gap-3">
             <div className="flex min-w-0 items-start gap-3">
@@ -886,7 +886,7 @@ function ConnectionRow({
             </div>
           </div>
 
-          <div className="grid gap-2 sm:grid-cols-2 xl:grid-cols-4">
+          <div className="dispatch-connection-meta-grid grid gap-2">
             <ConnectionMeta
               icon={IconKey}
               label={t("integrations.credentialRefs")}
@@ -2365,9 +2365,10 @@ export default function WorkspaceIntegrationsRoute() {
     >
       <div className="space-y-6">
         <section
+          data-usage-tracked={usageTracked ? "true" : undefined}
           className={cx(
-            "grid gap-3 md:grid-cols-2",
-            usageTracked ? "xl:grid-cols-5" : "xl:grid-cols-4",
+            "dispatch-integrations-summary-grid grid gap-3",
+            usageTracked && "dispatch-integrations-summary-grid-tracked",
           )}
         >
           <SummaryCard
@@ -2452,7 +2453,7 @@ export default function WorkspaceIntegrationsRoute() {
               </p>
             </div>
           </div>
-          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+          <div className="dispatch-provider-grid grid gap-3">
             {providers.map((provider) => (
               <ProviderCard
                 key={provider.id}
@@ -2586,7 +2587,7 @@ function IntegrationOnboarding() {
 
   return (
     <section className="rounded-lg border bg-card px-4 py-3 shadow-sm">
-      <div className="grid gap-3 lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.6fr)] lg:items-center">
+      <div className="dispatch-onboarding-grid grid gap-3">
         <div>
           <h2 className="text-sm font-semibold text-foreground">
             {t("integrations.onboardingTitle")}
@@ -2595,7 +2596,7 @@ function IntegrationOnboarding() {
             {t("integrations.onboardingDescription")}
           </p>
         </div>
-        <div className="grid gap-2 sm:grid-cols-3">
+        <div className="dispatch-onboarding-steps-grid grid gap-2">
           {steps.map((step) => {
             const Icon = step.icon;
             return (

package/corpus/templates/dispatch/changelog/2026-06-29-integration-layouts-adapt-when-the-agent-sidebar-is-open.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Integration layouts now adapt cleanly when the agent sidebar narrows the app.

package/corpus/templates/forms/app/components/layout/Layout.tsx

@@ -80,7 +80,9 @@ export function Layout({ children }: LayoutProps) {
           <div className="agent-layout-main-surface flex min-w-0 flex-1 overflow-hidden">
             <div className="flex h-full flex-1 flex-col overflow-hidden">
               <InvitationBanner />
-              <main className="flex-1 overflow-hidden">{children}</main>
+              <main className="agent-native-app-main flex-1 overflow-hidden">
+                {children}
+              </main>
             </div>
           </div>
         ) : (
@@ -103,7 +105,9 @@ export function Layout({ children }: LayoutProps) {
             <div className="flex h-full flex-1 flex-col overflow-hidden">
               {showHeader ? <Header /> : null}
               <InvitationBanner />
-              <main className="flex-1 overflow-auto">{children}</main>
+              <main className="agent-native-app-main flex-1 overflow-auto">
+                {children}
+              </main>
             </div>
           </AgentSidebar>
         )}

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

@@ -8,64 +8,64 @@
 
 :root {
   --background: 0 0% 100%;
-  --foreground: 220 10% 10%;
+  --foreground: 0 0% 10%;
   --card: 0 0% 100%;
-  --card-foreground: 220 10% 10%;
+  --card-foreground: 0 0% 10%;
   --popover: 0 0% 100%;
-  --popover-foreground: 220 10% 10%;
-  --primary: 220 10% 15%;
+  --popover-foreground: 0 0% 10%;
+  --primary: 0 0% 15%;
   --primary-foreground: 0 0% 100%;
-  --secondary: 220 10% 95%;
-  --secondary-foreground: 220 10% 15%;
-  --muted: 220 10% 95%;
-  --muted-foreground: 220 5% 45%;
-  --accent: 220 10% 95%;
-  --accent-foreground: 220 10% 15%;
+  --secondary: 0 0% 95%;
+  --secondary-foreground: 0 0% 15%;
+  --muted: 0 0% 95%;
+  --muted-foreground: 0 0% 45%;
+  --accent: 0 0% 95%;
+  --accent-foreground: 0 0% 15%;
   --destructive: 0 84% 60%;
   --destructive-foreground: 0 0% 98%;
-  --border: 220 10% 90%;
-  --input: 220 10% 90%;
-  --ring: 220 10% 40%;
+  --border: 0 0% 90%;
+  --input: 0 0% 90%;
+  --ring: 0 0% 40%;
   --radius: 0.5rem;
 
-  --sidebar-background: 220 10% 97%;
-  --sidebar-foreground: 220 5% 45%;
-  --sidebar-primary: 220 10% 15%;
+  --sidebar-background: 0 0% 97%;
+  --sidebar-foreground: 0 0% 45%;
+  --sidebar-primary: 0 0% 15%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 220 10% 95%;
-  --sidebar-accent-foreground: 220 10% 15%;
-  --sidebar-border: 220 10% 90%;
-  --sidebar-ring: 220 10% 40%;
+  --sidebar-accent: 0 0% 95%;
+  --sidebar-accent-foreground: 0 0% 15%;
+  --sidebar-border: 0 0% 90%;
+  --sidebar-ring: 0 0% 40%;
 }
 
 .dark {
-  --background: 220 6% 6%;
+  --background: 0 0% 13%;
   --foreground: 0 0% 90%;
-  --card: 220 5% 6%;
+  --card: 0 0% 15%;
   --card-foreground: 0 0% 90%;
-  --popover: 220 5% 6%;
+  --popover: 0 0% 15%;
   --popover-foreground: 0 0% 90%;
   --primary: 0 0% 75%;
-  --primary-foreground: 220 6% 6%;
-  --secondary: 220 4% 12%;
+  --primary-foreground: 0 0% 10%;
+  --secondary: 0 0% 18%;
   --secondary-foreground: 0 0% 90%;
-  --muted: 220 4% 10%;
-  --muted-foreground: 220 4% 60%;
-  --accent: 220 4% 13%;
+  --muted: 0 0% 16%;
+  --muted-foreground: 0 0% 60%;
+  --accent: 0 0% 18%;
   --accent-foreground: 0 0% 90%;
   --destructive: 0 63% 51%;
   --destructive-foreground: 0 0% 98%;
-  --border: 220 4% 14%;
-  --input: 220 4% 14%;
+  --border: 0 0% 24%;
+  --input: 0 0% 24%;
   --ring: 0 0% 60%;
 
-  --sidebar-background: 220 6% 4%;
-  --sidebar-foreground: 220 4% 60%;
+  --sidebar-background: 0 0% 10%;
+  --sidebar-foreground: 0 0% 60%;
   --sidebar-primary: 0 0% 75%;
-  --sidebar-primary-foreground: 220 6% 6%;
-  --sidebar-accent: 220 4% 10%;
+  --sidebar-primary-foreground: 0 0% 10%;
+  --sidebar-accent: 0 0% 16%;
   --sidebar-accent-foreground: 0 0% 90%;
-  --sidebar-border: 220 4% 10%;
+  --sidebar-border: 0 0% 20%;
   --sidebar-ring: 0 0% 60%;
 }
 
@@ -113,6 +113,35 @@
   filter: none;
 }
 
+@container agent-native-main (min-width: 640px) {
+  .forms-response-metrics-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@container agent-native-main (min-width: 720px) {
+  .forms-list-skeleton-row {
+    grid-template-columns: minmax(0, 1fr) 120px 120px 80px;
+  }
+
+  .forms-list-row {
+    grid-template-columns: minmax(0, 1fr) 110px 140px 88px 40px;
+    align-items: center;
+  }
+}
+
+@container agent-native-main (min-width: 960px) {
+  .forms-response-insights-grid {
+    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
+  }
+}
+
+@container agent-native-main (min-width: 1180px) {
+  .forms-response-metrics-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
 .forms-ask-chat-panel
   [data-agent-empty-state="centered"]
   .agent-composer-area--hero {

package/corpus/templates/forms/app/pages/FormsListPage.tsx

@@ -273,7 +273,7 @@ export function FormsListPage() {
           {Array.from({ length: 6 }).map((_, i) => (
             <div
               key={i}
-              className="grid gap-3 border-b border-border px-3 py-3 last:border-b-0 md:grid-cols-[minmax(0,1fr)_120px_120px_80px]"
+              className="forms-list-skeleton-row grid gap-3 border-b border-border px-3 py-3 last:border-b-0"
             >
               <div className="min-w-0 space-y-2">
                 <Skeleton className="h-4 w-3/4" />
@@ -459,7 +459,7 @@ export function FormsListPage() {
               <div
                 key={form.id}
                 className={cn(
-                  "group grid cursor-pointer gap-3 border-b border-border px-3 py-3 last:border-b-0 md:grid-cols-[minmax(0,1fr)_110px_140px_88px_40px] md:items-center",
+                  "forms-list-row group grid cursor-pointer gap-3 border-b border-border px-3 py-3 last:border-b-0",
                   isArchive
                     ? "opacity-80 hover:opacity-100 hover:bg-accent/25"
                     : "hover:bg-accent/25",

package/corpus/templates/forms/app/pages/ResponseInsightsPage.tsx

@@ -119,7 +119,7 @@ function LoadingState() {
   return (
     <div className="space-y-4 p-4">
       <Skeleton className="h-10 w-72" />
-      <div className="grid gap-3 sm:grid-cols-4">
+      <div className="forms-response-metrics-grid grid gap-3">
         {Array.from({ length: 4 }).map((_, index) => (
           <Skeleton key={index} className="h-20 rounded-md" />
         ))}
@@ -204,9 +204,9 @@ export function ResponseInsightsPage() {
         </Button>
       </header>
 
-      <main className="grid gap-4 p-4 lg:grid-cols-[minmax(0,1fr)_minmax(360px,0.9fr)]">
+      <main className="forms-response-insights-grid grid gap-4 p-4">
         <section className="space-y-4">
-          <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
+          <div className="forms-response-metrics-grid grid gap-3">
             <Metric
               label="Responses"
               value={formatNumber(summary.responses)}

package/corpus/templates/forms/changelog/2026-06-29-form-list-and-insight-layouts-adapt-when-the-agent-sidebar.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Form lists and response insights now adapt cleanly when the agent sidebar narrows the app.

package/corpus/templates/macros/app/components/layout/AppLayout.tsx

@@ -163,7 +163,9 @@ export function AppLayout({ children }: { children: React.ReactNode }) {
           {/* Page content */}
           <div className="agent-layout-main-surface flex min-w-0 flex-1 flex-col overflow-hidden">
             <Header onOpenSidebar={() => setSidebarOpen(true)} />
-            <main className="min-w-0 flex-1 overflow-y-auto">{children}</main>
+            <main className="agent-native-app-main min-w-0 flex-1 overflow-y-auto">
+              {children}
+            </main>
           </div>
           <SyncIndicator sidebarCollapsed={desktopSidebarCollapsed} />
         </div>

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

@@ -8,26 +8,34 @@
 @source "./**/*.{ts,tsx}";
 
 :root {
-  --background: 0 0% 4%;
+  --background: 0 0% 13%;
   --foreground: 0 0% 98%;
-  --card: 0 0% 6%;
+  --card: 0 0% 15%;
   --card-foreground: 0 0% 98%;
-  --popover: 0 0% 6%;
+  --popover: 0 0% 15%;
   --popover-foreground: 0 0% 98%;
   --primary: 0 0% 98%;
-  --primary-foreground: 0 0% 4%;
-  --secondary: 0 0% 10%;
+  --primary-foreground: 0 0% 10%;
+  --secondary: 0 0% 18%;
   --secondary-foreground: 0 0% 96%;
-  --muted: 0 0% 14%;
+  --muted: 0 0% 16%;
   --muted-foreground: 0 0% 50%;
-  --accent: 0 0% 12%;
+  --accent: 0 0% 18%;
   --accent-foreground: 0 0% 98%;
   --destructive: 0 72% 51%;
   --destructive-foreground: 0 0% 98%;
-  --border: 0 0% 14%;
-  --input: 0 0% 14%;
+  --border: 0 0% 24%;
+  --input: 0 0% 24%;
   --ring: 0 0% 35%;
   --radius: 0.75rem;
+  --sidebar-background: 0 0% 10%;
+  --sidebar-foreground: 0 0% 50%;
+  --sidebar-primary: 0 0% 98%;
+  --sidebar-primary-foreground: 0 0% 10%;
+  --sidebar-accent: 0 0% 16%;
+  --sidebar-accent-foreground: 0 0% 98%;
+  --sidebar-border: 0 0% 20%;
+  --sidebar-ring: 0 0% 35%;
 }
 
 .light {
@@ -50,6 +58,14 @@
   --border: 0 0% 90%;
   --input: 0 0% 90%;
   --ring: 0 0% 20%;
+  --sidebar-background: 0 0% 98%;
+  --sidebar-foreground: 0 0% 45%;
+  --sidebar-primary: 0 0% 8%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 0 0% 94%;
+  --sidebar-accent-foreground: 0 0% 8%;
+  --sidebar-border: 0 0% 90%;
+  --sidebar-ring: 0 0% 20%;
 }
 
 @layer base {

package/corpus/templates/macros/changelog/2026-06-29-macro-layouts-adapt-when-the-agent-sidebar-is-open.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-29
+---
+
+Macro layouts adapt when the agent sidebar is open.

package/corpus/templates/mail/app/components/layout/AppLayout.tsx

@@ -1798,7 +1798,9 @@ function AppLayoutInner({ children }: AppLayoutProps) {
           view !== "draft-queue" ? (
             <GoogleConnectBanner variant="hero" />
           ) : (
-            <main className="flex flex-1 overflow-hidden">{children}</main>
+            <main className="agent-native-app-main flex flex-1 overflow-hidden">
+              {children}
+            </main>
           )}
         </div>
       </div>
@@ -2120,7 +2122,9 @@ function StandardLayout({ children }: AppLayoutProps) {
 
       <InvitationBanner />
 
-      <main className="flex flex-1 overflow-hidden">{children}</main>
+      <main className="agent-native-app-main flex flex-1 overflow-hidden">
+        {children}
+      </main>
     </div>
   );
 }

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

@@ -8,63 +8,63 @@
 
 :root {
   --background: 0 0% 100%;
-  --foreground: 220 10% 10%;
+  --foreground: 0 0% 10%;
   --card: 0 0% 100%;
-  --card-foreground: 220 10% 10%;
+  --card-foreground: 0 0% 10%;
   --popover: 0 0% 100%;
-  --popover-foreground: 220 10% 10%;
-  --primary: 220 10% 15%;
+  --popover-foreground: 0 0% 10%;
+  --primary: 0 0% 15%;
   --primary-foreground: 0 0% 100%;
-  --secondary: 220 10% 95%;
-  --secondary-foreground: 220 10% 15%;
-  --muted: 220 10% 95%;
-  --muted-foreground: 220 5% 45%;
-  --accent: 220 10% 95%;
-  --accent-foreground: 220 10% 15%;
+  --secondary: 0 0% 95%;
+  --secondary-foreground: 0 0% 15%;
+  --muted: 0 0% 95%;
+  --muted-foreground: 0 0% 45%;
+  --accent: 0 0% 95%;
+  --accent-foreground: 0 0% 15%;
   --destructive: 0 84% 60%;
   --destructive-foreground: 0 0% 98%;
-  --border: 220 10% 90%;
-  --input: 220 10% 90%;
-  --ring: 220 10% 40%;
+  --border: 0 0% 90%;
+  --input: 0 0% 90%;
+  --ring: 0 0% 40%;
   --radius: 0.5rem;
-  --sidebar-background: 220 10% 97%;
-  --sidebar-foreground: 220 5% 45%;
-  --sidebar-primary: 220 10% 15%;
+  --sidebar-background: 0 0% 97%;
+  --sidebar-foreground: 0 0% 45%;
+  --sidebar-primary: 0 0% 15%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 220 10% 95%;
-  --sidebar-accent-foreground: 220 10% 15%;
-  --sidebar-border: 220 10% 90%;
-  --sidebar-ring: 220 10% 40%;
+  --sidebar-accent: 0 0% 95%;
+  --sidebar-accent-foreground: 0 0% 15%;
+  --sidebar-border: 0 0% 90%;
+  --sidebar-ring: 0 0% 40%;
 }
 
 .dark {
-  --background: 220 6% 6%;
+  --background: 0 0% 13%;
   --foreground: 0 0% 90%;
-  --card: 220 5% 6%;
+  --card: 0 0% 15%;
   --card-foreground: 0 0% 90%;
-  --popover: 220 5% 6%;
+  --popover: 0 0% 15%;
   --popover-foreground: 0 0% 90%;
   --primary: 0 0% 75%;
-  --primary-foreground: 220 6% 6%;
-  --secondary: 220 4% 12%;
+  --primary-foreground: 0 0% 10%;
+  --secondary: 0 0% 18%;
   --secondary-foreground: 0 0% 90%;
-  --muted: 220 4% 10%;
-  --muted-foreground: 220 4% 60%;
-  --accent: 220 4% 13%;
+  --muted: 0 0% 16%;
+  --muted-foreground: 0 0% 60%;
+  --accent: 0 0% 18%;
   --accent-foreground: 0 0% 90%;
   --destructive: 0 63% 51%;
   --destructive-foreground: 0 0% 98%;
-  --border: 220 4% 14%;
-  --input: 220 4% 14%;
+  --border: 0 0% 24%;
+  --input: 0 0% 24%;
   --ring: 0 0% 60%;
   --radius: 0.5rem;
-  --sidebar-background: 220 6% 4%;
-  --sidebar-foreground: 220 4% 60%;
+  --sidebar-background: 0 0% 10%;
+  --sidebar-foreground: 0 0% 60%;
   --sidebar-primary: 0 0% 75%;
-  --sidebar-primary-foreground: 220 6% 6%;
-  --sidebar-accent: 220 4% 10%;
+  --sidebar-primary-foreground: 0 0% 10%;
+  --sidebar-accent: 0 0% 16%;
   --sidebar-accent-foreground: 0 0% 90%;
-  --sidebar-border: 220 4% 10%;
+  --sidebar-border: 0 0% 20%;
   --sidebar-ring: 0 0% 60%;
 }
 
@@ -80,6 +80,12 @@
   }
 }
 
+@container agent-native-main (min-width: 980px) {
+  .mail-contact-side-panel {
+    display: flex;
+  }
+}
+
 /* Custom scrollbars */
 ::-webkit-scrollbar {
   width: 5px;
@@ -265,7 +271,7 @@
 }
 /* Ensure toast border is visible in dark mode */
 .dark [data-sonner-toast] {
-  border-color: hsl(220 4% 22%) !important;
+  border-color: hsl(0 0% 22%) !important;
 }
 
 /* Sonner cancel button style — match action button but muted */

package/corpus/templates/mail/app/pages/InboxPage.tsx

@@ -686,7 +686,7 @@ export function InboxPage() {
 
       {/* Right contact panel — hidden during initial load or when maximized */}
       {!emailListLoading && !(hasThread && isMaximized) && (
-        <div className="hidden lg:flex w-[260px] shrink-0 flex-col border-s border-border/30 bg-muted/50 dark:bg-[hsl(220,6%,5%)]">
+        <div className="mail-contact-side-panel hidden w-[260px] shrink-0 flex-col border-s border-border/30 bg-muted/50 dark:bg-[hsl(220,6%,5%)]">
           <ContactPanel
             emailId={contactEmailId}
             contactEmail={sidebarContactEmail}

package/corpus/templates/mail/changelog/2026-06-29-the-contact-panel-now-adapts-to-the-available-mail-pane-width.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+The contact panel now adapts to the available mail pane width when the agent sidebar is open.

package/corpus/templates/plan/app/components/layout/Layout.tsx

@@ -150,7 +150,9 @@ export function Layout({ children }: LayoutProps) {
       ) : (
         <Header onOpenMobileSidebar={() => setMobileSidebarOpen(true)} />
       )}
-      <main className="flex-1 overflow-y-auto">{children}</main>
+      <main className="agent-native-app-main flex-1 overflow-y-auto">
+        {children}
+      </main>
     </div>
   );
 

package/corpus/templates/plan/app/components/plan/DocumentArea.tsx

@@ -532,8 +532,8 @@ function CodeTabsBlock({
   return (
     <section className="plan-block" data-block-id={block.id}>
       {block.title && <div className="plan-block-label">{block.title}</div>}
-      <div className="grid overflow-hidden border-y border-plan-line md:grid-cols-[300px_minmax(0,1fr)]">
-        <div className="border-plan-line md:border-r">
+      <div className="plan-code-tabs-layout grid overflow-hidden border-y border-plan-line">
+        <div className="plan-code-tabs-nav border-plan-line">
           {block.data.tabs.map((tab) => (
             <button
               key={tab.id}
@@ -609,8 +609,8 @@ function ImplementationMapBlock({
   return (
     <section className="plan-block" data-block-id={block.id}>
       {block.title && <div className="plan-block-label">{block.title}</div>}
-      <div className="grid overflow-hidden lg:grid-cols-[360px_minmax(0,1fr)]">
-        <div className="border-plan-line lg:border-r">
+      <div className="plan-implementation-map-layout grid overflow-hidden">
+        <div className="plan-implementation-map-nav border-plan-line">
           {block.data.files.map((file, index) => (
             <button
               key={index}
@@ -698,14 +698,13 @@ function TabsBlock({
       {block.title && <div className="plan-block-label">{block.title}</div>}
       <div
         className={cn(
-          vertical &&
-            "grid min-w-0 gap-5 md:grid-cols-[minmax(10rem,14rem)_minmax(0,1fr)] md:items-start",
+          vertical && "plan-vertical-tabs-layout grid min-w-0 gap-5",
         )}
       >
         <div
           className={cn(
             vertical
-              ? "mb-5 flex w-full min-w-0 max-w-full flex-nowrap gap-1 overflow-x-auto md:mb-0 md:max-h-[62vh] md:flex-col md:overflow-x-hidden md:overflow-y-auto md:pr-2"
+              ? "plan-vertical-tabs-list mb-5 flex w-full min-w-0 max-w-full flex-nowrap gap-1 overflow-x-auto"
               : "mb-8 inline-flex max-w-full gap-1 overflow-x-auto",
           )}
           role="tablist"