@agent-native/core 0.80.7 → 0.80.9

package/corpus/templates/design/shared/generation-session.ts

@@ -38,6 +38,7 @@ export interface DesignGenerationSession {
   prompt: string;
   contextRefs: string[];
   frames: DesignGenerationFrame[];
+  startedAt: string;
 }
 
 export interface AgentCanvasPresence {
@@ -60,3 +61,44 @@ export function clampGenerationProgress(progress: number | undefined): number {
   if (!Number.isFinite(progress)) return 0;
   return Math.max(0, Math.min(1, progress ?? 0));
 }
+
+export function updateGenerationSessionWithSavedFiles(
+  session: DesignGenerationSession,
+  savedFilenames: Iterable<string>,
+): DesignGenerationSession {
+  const saved = new Set(
+    Array.from(savedFilenames).filter(
+      (filename): filename is string =>
+        typeof filename === "string" && !!filename,
+    ),
+  );
+  if (saved.size === 0) return session;
+
+  let changed = false;
+  const frames = session.frames.map((frame) => {
+    if (
+      !frame.filename ||
+      !saved.has(frame.filename) ||
+      frame.status === "done"
+    ) {
+      return frame;
+    }
+    changed = true;
+    return {
+      ...frame,
+      status: "done" as const,
+      step: "Saved",
+      progress: 1,
+    };
+  });
+
+  if (!changed) return session;
+
+  return {
+    ...session,
+    status: frames.every((frame) => frame.status === "done")
+      ? "done"
+      : "generating",
+    frames,
+  };
+}

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

@@ -9,63 +9,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%;
 }
 
@@ -77,6 +77,50 @@
   }
 }
 
+@container agent-native-main (min-width: 720px) {
+  .dispatch-connection-meta-grid,
+  .dispatch-integrations-summary-grid,
+  .dispatch-onboarding-steps-grid,
+  .dispatch-provider-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@container agent-native-main (min-width: 900px) {
+  .dispatch-connection-card-grid {
+    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
+  }
+
+  .dispatch-onboarding-grid {
+    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
+    align-items: center;
+  }
+}
+
+@container agent-native-main (min-width: 1080px) {
+  .dispatch-provider-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .dispatch-connection-meta-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .dispatch-integrations-summary-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .dispatch-onboarding-steps-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@container agent-native-main (min-width: 1240px) {
+  .dispatch-integrations-summary-grid[data-usage-tracked="true"] {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+}
+
 ::-webkit-scrollbar {
   width: 5px;
   height: 5px;

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>
   );
 }