@agent-native/core 0.80.8 → 0.80.9

package/corpus/templates/assets/app/routes/brand-kits.$id.tsx

@@ -1495,7 +1495,7 @@ export function BrandKitDetailRoute({
           </TabsContent>
 
           <TabsContent value="settings">
-            <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_320px]">
+            <div className="assets-brand-kit-settings-grid grid gap-4">
               <div className="space-y-4 rounded-lg border border-border p-4">
                 <Label>{t("brandKitDetail.styleDescription")}</Label>
                 <Textarea
@@ -3190,7 +3190,7 @@ function AssetCardsView({ items }: { items: LaneGalleryItem[] }) {
   }
 
   return (
-    <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
+    <div className="assets-brand-kit-item-grid grid gap-3">
       {items.map((item) => {
         const copied = copiedItemId === item.id;
         const secondary =
@@ -3338,7 +3338,7 @@ function SwimLane({
 
   return (
     <section className="overflow-hidden rounded-lg border border-border/80 bg-background">
-      <div className="grid min-h-[360px] xl:grid-cols-[minmax(0,1fr)_284px]">
+      <div className="assets-brand-kit-preview-grid grid min-h-[360px]">
         <div className="flex min-w-0 flex-col bg-muted/10">
           {hasContent ? (
             <>
@@ -4250,7 +4250,7 @@ export function LiveCandidatesStage({
             />
           </div>
         </div>
-        <div className="grid min-w-0 lg:grid-cols-[minmax(0,1fr)_minmax(18rem,22rem)]">
+        <div className="assets-live-candidates-grid grid min-w-0">
           <div className="min-w-0 bg-muted/10 p-2.5 sm:p-3">
             <div
               className={[

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

@@ -1254,7 +1254,7 @@ function AllAssetsBrowser() {
 
       <main className="p-4 md:p-6">
         {isLoading ? (
-          <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
+          <div className="assets-library-grid grid grid-cols-2 gap-4">
             {Array.from({ length: 12 }).map((_, index) => (
               <Skeleton key={index} className="aspect-[4/3] rounded-lg" />
             ))}
@@ -1268,7 +1268,7 @@ function AllAssetsBrowser() {
             </div>
           </div>
         ) : (
-          <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
+          <div className="assets-library-grid grid grid-cols-2 gap-4">
             {assets.map((asset) => (
               <div
                 key={asset.id}
@@ -2915,7 +2915,7 @@ export function AssetPickerSurface() {
         )}
 
         {selectedLibraryId && assetsLoading && (
-          <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
+          <div className="assets-library-dense-grid grid grid-cols-2 gap-3">
             {Array.from({ length: 8 }).map((_, index) => (
               <Skeleton key={index} className="aspect-square rounded-md" />
             ))}
@@ -2933,7 +2933,7 @@ export function AssetPickerSurface() {
         )}
 
         {assets.length > 0 && (
-          <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
+          <div className="assets-library-dense-grid grid grid-cols-2 gap-3">
             {assets.map((asset) => (
               <div
                 key={asset.id}

package/corpus/templates/assets/changelog/2026-06-29-asset-library-and-detail-layouts-adapt-when-the-agent-sidebar.md

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

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

@@ -97,7 +97,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
         </Button>
         <span className="text-sm font-semibold">{t("navigation.brand")}</span>
       </div>
-      <main className="min-w-0 flex-1 overflow-y-auto overscroll-contain">
+      <main className="agent-native-app-main min-w-0 flex-1 overflow-y-auto overscroll-contain">
         {children}
       </main>
     </div>

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

@@ -8,62 +8,62 @@
 
 :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 70% 48%;
   --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 62% 48%;
   --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%;
 }
 
@@ -76,6 +76,34 @@
   }
 }
 
+@container agent-native-main (min-width: 760px) {
+  .brain-provider-catalog-grid,
+  .brain-search-filter-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@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;
+  }
+}
+
+@container agent-native-main (min-width: 1120px) {
+  .brain-provider-catalog-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .brain-search-filter-grid {
+    grid-template-columns: 1fr 1fr 1fr 120px auto;
+  }
+}
+
 ::-webkit-scrollbar {
   width: 5px;
   height: 5px;

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

@@ -166,7 +166,7 @@ export default function SearchRoute() {
               />
             </div>
 
-            <div className="grid gap-2 md:grid-cols-[1fr_1fr_1fr_120px_auto]">
+            <div className="brain-search-filter-grid grid gap-2">
               <Select
                 value={type}
                 onValueChange={(value) => updateParam("type", value)}

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

@@ -145,7 +145,7 @@ export default function SettingsRoute() {
       <SettingsTabsPage
         teamLabel={t("team.title")}
         general={
-          <div className="grid gap-5 lg:grid-cols-[minmax(0,1fr)_360px]">
+          <div className="brain-settings-general-grid grid gap-5">
             <main className="grid gap-5">
               <Card>
                 <CardHeader>

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

@@ -1064,7 +1064,7 @@ function ProviderCatalog({
           </div>
         </div>
       ) : connectionProviders.length ? (
-        <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+        <div className="brain-provider-catalog-grid grid gap-3">
           {connectionProviders.map((provider) => {
             const workspace = provider.workspaceConnection;
             const grantState = workspace?.grantState ?? "not_connected";
@@ -1523,7 +1523,7 @@ function SourceListItem({
   return (
     <Card className="overflow-hidden shadow-none">
       <CardContent className="p-4">
-        <div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_minmax(20rem,auto)_auto] xl:items-center">
+        <div className="brain-source-card-grid grid gap-4">
           <div className="flex min-w-0 items-start gap-3">
             <span className="mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-md border border-border bg-muted/35">
               <Icon className="size-4 text-muted-foreground" />

package/corpus/templates/brain/changelog/2026-06-29-search-settings-and-source-layouts-adapt-when-the-agent-sidebar.md

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

package/corpus/templates/calendar/app/components/calendar/EventDetailPanel.tsx

@@ -189,18 +189,18 @@ export function EventDetailPanel({
     <TooltipProvider>
       {isOpen && (
         <div
-          className="fixed inset-0 z-40 bg-black/60 backdrop-blur-sm 2xl:hidden"
+          className="calendar-event-detail-backdrop fixed inset-0 z-40 bg-black/60 backdrop-blur-sm"
           onClick={onClose}
         />
       )}
       <div
         className={cn(
-          "fixed inset-y-0 right-0 z-50 w-full max-w-sm overflow-hidden 2xl:static 2xl:z-auto 2xl:max-w-none 2xl:shrink-0",
-          isOpen ? "2xl:w-80" : "w-0 2xl:w-0",
+          "calendar-event-detail-panel fixed inset-y-0 right-0 z-50 w-full max-w-sm overflow-hidden",
+          isOpen ? "calendar-event-detail-panel-open" : "w-0",
           !isOpen && "pointer-events-none",
         )}
       >
-        <div className="flex h-full w-full flex-col border-l border-border bg-card 2xl:w-80">
+        <div className="calendar-event-detail-panel-inner flex h-full w-full flex-col border-l border-border bg-card">
           {event && (
             <>
               {/* Header */}

package/corpus/templates/calendar/app/components/calendar/FindTimePanel.tsx

@@ -360,9 +360,10 @@ export function FindTimePanel({
       )}
 
       <div
+        data-takeover={isTakeover ? "true" : undefined}
         className={cn(
-          "grid gap-3 lg:grid-cols-[minmax(0,1fr)_220px]",
-          isTakeover && "xl:grid-cols-[minmax(0,1fr)_280px]",
+          "calendar-find-time-panel-grid grid gap-3",
+          isTakeover && "calendar-find-time-panel-grid-takeover",
         )}
       >
         <div className="min-w-0 overflow-x-auto rounded-md border border-border">

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

@@ -341,11 +341,13 @@ export function AppLayout({ children }: AppLayoutProps) {
               !eventDraft &&
               isCalendarPage &&
               !isSettingsPage ? (
-                <main className="flex-1 overflow-y-auto">
+                <main className="agent-native-app-main flex-1 overflow-y-auto">
                   <GoogleConnectBanner variant="hero" />
                 </main>
               ) : (
-                <main className="flex-1 overflow-y-auto">{children}</main>
+                <main className="agent-native-app-main flex-1 overflow-y-auto">
+                  {children}
+                </main>
               )}
             </HeaderControlsContext.Provider>
           </div>

package/corpus/templates/calendar/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%;
 }
 
@@ -93,6 +93,40 @@
   }
 }
 
+@container agent-native-main (min-width: 960px) {
+  .calendar-find-time-panel-grid {
+    grid-template-columns: minmax(0, 1fr) 220px;
+  }
+}
+
+@container agent-native-main (min-width: 1120px) {
+  .calendar-find-time-panel-grid[data-takeover="true"] {
+    grid-template-columns: minmax(0, 1fr) 280px;
+  }
+}
+
+@container agent-native-main (min-width: 1180px) {
+  .calendar-event-detail-backdrop {
+    display: none;
+  }
+
+  .calendar-event-detail-panel {
+    position: static;
+    z-index: auto;
+    width: 0;
+    max-width: none;
+    flex-shrink: 0;
+  }
+
+  .calendar-event-detail-panel-open {
+    width: 20rem;
+  }
+
+  .calendar-event-detail-panel-inner {
+    width: 20rem;
+  }
+}
+
 /* Scrollbar */
 ::-webkit-scrollbar {
   width: 5px;

package/corpus/templates/calendar/changelog/2026-06-29-event-and-find-time-layouts-adapt-when-the-agent-sidebar-is.md

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

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

@@ -129,7 +129,7 @@ export function Layout({ children }: LayoutProps) {
       ) : (
         <Header onOpenMobileSidebar={() => setMobileSidebarOpen(true)} />
       )}
-      <main className="min-w-0 flex-1 overflow-y-auto overscroll-contain">
+      <main className="agent-native-app-main min-w-0 flex-1 overflow-y-auto overscroll-contain">
         {children}
       </main>
     </div>

package/corpus/templates/chat/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%;
 }
 

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

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

package/corpus/templates/clips/AGENTS.md

@@ -18,6 +18,11 @@ Detailed media, meeting, dictation, editing, and sharing rules live in
 - Recording start/stop/pause are UI gestures because browser media capture needs
   user activation; navigate the user to the recording view instead of trying a
   server action.
+- Screen Memory is a local-only desktop buffer, not a hosted Clips recording.
+  Users enable/pause/export/clear it from the desktop tray settings. External
+  local agents can read recent app/window context through
+  `agent-native mcp screen-memory`; do not upload raw Screen Memory segments or
+  treat them as shareable Clips unless the user explicitly exports/imports them.
 - Use `import-loom-recording` for Loom share/embed URLs. It downloads Loom's
   public MP4, reuploads it to Clips storage, creates a ready playable
   Clips-hosted recording, and imports Loom's public transcript when the share
@@ -106,6 +111,14 @@ Detailed media, meeting, dictation, editing, and sharing rules live in
   links, then renders the existing `/embed/:id` player in an extension-owned
   preview iframe so the video is playable without leaving GitHub. Keep this
   scoped to GitHub unless there is a deliberate permission review.
+- Screen Memory is a disabled-by-default, local-only desktop capability for
+  recent screen/app/window context. Use `get-screen-memory-status` before
+  relying on it, then `query-screen-memory-context` for bounded recent snippets
+  when local context files are present. If the local Screen Memory MCP built-in
+  is connected, the agent may also use `screen_memory_status`,
+  `screen_memory_recent_context`, and `screen_memory_recent_segments`; only
+  inspect or export segment file paths when the user explicitly asks. Never
+  describe Screen Memory as hosted, shared, exhaustive, or enabled by default.
 - After mutations, rely on the app refresh/polling path; do not invent a second
   sync mechanism.
 

package/corpus/templates/clips/actions/get-screen-memory-status.ts

@@ -0,0 +1,12 @@
+import { defineAction } from "@agent-native/core";
+import { readScreenMemoryStatus } from "@agent-native/core/mcp-client";
+import { z } from "zod";
+
+export default defineAction({
+  description:
+    "Check local Clips Screen Memory status for this machine: enabled/paused state, local storage files, and capture recency. Screen Memory is disabled by default and local-only.",
+  schema: z.object({}),
+  http: { method: "GET" },
+  readOnly: true,
+  run: async () => readScreenMemoryStatus(),
+});