@agent-native/core 0.80.7 → 0.80.9

package/corpus/templates/analytics/AGENTS.md

@@ -44,6 +44,12 @@ details live in `.agents/skills/`.
   request action uses the shared `@agent-native/core/provider-api` runtime,
   injects configured credentials, blocks private/internal URLs, and redacts
   secrets.
+- For questions about tracking events or instrumentation in GitHub-hosted code,
+  use `github-repo-files` before raw provider requests: check
+  `data-source-status` for GitHub, `operation="search"` likely event names/calls
+  with `includeTextMatches=true`, then `operation="read"` the relevant files.
+  Report the repo, ref/default branch, queries used, files read, and any
+  truncation or GitHub incomplete-results flags so absence claims are auditable.
 - For named account/deal deep dives, call `account-deep-dive` first. It bundles
   HubSpot deal/account/contact activity with Gong call detail and compact
   transcript evidence so the final report can match Fusion-style depth.

package/corpus/templates/analytics/actions/github-repo-files.ts

@@ -0,0 +1,9 @@
+import { createGitHubRepoFilesAction } from "@agent-native/core/provider-api/actions/github-repo-files";
+
+import { getAnalyticsProviderApiRuntime } from "../server/lib/provider-api";
+
+// Static action registry marker: createGitHubRepoFilesAction returns defineAction.
+export default createGitHubRepoFilesAction(getAnalyticsProviderApiRuntime(), {
+  description:
+    "List, search, and read connected GitHub repository files through the Analytics GitHub data source. Use this to inspect remote repos for tracking-event instrumentation, event-name definitions, analytics calls, and related code context without cloning. Prefer operation='search' with includeTextMatches=true before operation='read'. Write and delete operations exist for explicit repo-maintenance requests only and require human approval.",
+});

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

@@ -106,7 +106,7 @@ export function Layout({ children }: LayoutProps) {
   if (reportScreenshot) {
     return (
       <HeaderActionsProvider>
-        <main className="min-h-screen bg-background p-6 text-foreground md:p-8">
+        <main className="agent-native-app-main min-h-screen bg-background p-6 text-foreground md:p-8">
           {children}
         </main>
       </HeaderActionsProvider>
@@ -121,10 +121,10 @@ export function Layout({ children }: LayoutProps) {
       <main
         className={
           isExtensionsRoute
-            ? "flex-1 overflow-y-auto"
+            ? "agent-native-app-main flex-1 overflow-y-auto"
             : isAskRoute
-              ? "flex-1 overflow-hidden p-0"
-              : "flex-1 overflow-y-auto p-6 pt-2"
+              ? "agent-native-app-main flex-1 overflow-hidden p-0"
+              : "agent-native-app-main flex-1 overflow-y-auto p-6 pt-2"
         }
       >
         {children}

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

@@ -7,30 +7,30 @@
 @source "./**/*.{ts,tsx}";
 
 :root {
-  /* Base - Linear/Vercel Dark Mode Style */
-  --background: 240 10% 3.9%; /* #09090b */
-  --foreground: 0 0% 98%; /* #fafafa */
+  /* Base */
+  --background: 0 0% 13%;
+  --foreground: 0 0% 98%;
 
-  --card: 240 10% 3.9%; /* Same as bg for seamless look, or slightly lighter */
+  --card: 0 0% 15%;
   --card-foreground: 0 0% 98%;
 
-  --popover: 240 10% 3.9%;
+  --popover: 0 0% 15%;
   --popover-foreground: 0 0% 98%;
 
   /* Primary - White/Off-white for high contrast */
   --primary: 0 0% 98%;
-  --primary-foreground: 240 5.9% 10%;
+  --primary-foreground: 0 0% 10%;
 
   /* Secondary - Muted grays */
-  --secondary: 240 3.7% 15.9%; /* #27272a */
+  --secondary: 0 0% 18%;
   --secondary-foreground: 0 0% 98%;
 
   /* Muted - Subtle text */
-  --muted: 240 3.7% 15.9%;
-  --muted-foreground: 240 5% 64.9%; /* #a1a1aa */
+  --muted: 0 0% 16%;
+  --muted-foreground: 0 0% 64.9%;
 
   /* Accent - Subtle interactive elements */
-  --accent: 240 3.7% 15.9%;
+  --accent: 0 0% 18%;
   --accent-foreground: 0 0% 98%;
 
   /* Destructive - bright enough for text on dark surfaces */
@@ -38,9 +38,9 @@
   --destructive-foreground: 0 0% 98%;
 
   /* Borders - Subtle and thin */
-  --border: 240 3.7% 15.9%; /* #27272a */
-  --input: 240 3.7% 15.9%;
-  --ring: 240 4.9% 83.9%;
+  --border: 0 0% 24%;
+  --input: 0 0% 24%;
+  --ring: 0 0% 83.9%;
 
   /* Charts */
   --chart-1: 220 70% 50%;
@@ -60,40 +60,40 @@
   --radius: 0.5rem;
 
   /* Table header - solid card color for sticky headers */
-  --table-header: 240 10% 3.9%; /* Same as card, no opacity */
+  --table-header: 0 0% 15%;
 
-  /* Sidebar - keeping consistent with dark theme */
-  --sidebar-background: 240 10% 3.9%;
-  --sidebar-foreground: 240 4.8% 95.9%;
+  /* Sidebar */
+  --sidebar-background: 0 0% 10%;
+  --sidebar-foreground: 0 0% 95.9%;
   --sidebar-primary: 224.3 76.3% 48%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 240 3.7% 15.9%;
-  --sidebar-accent-foreground: 240 4.8% 95.9%;
-  --sidebar-border: 240 3.7% 15.9%;
+  --sidebar-accent: 0 0% 16%;
+  --sidebar-accent-foreground: 0 0% 95.9%;
+  --sidebar-border: 0 0% 20%;
   --sidebar-ring: 217.2 91.2% 59.8%;
 }
 
 .light {
   --background: 0 0% 100%;
-  --foreground: 240 10% 3.9%;
+  --foreground: 0 0% 3.9%;
   --card: 0 0% 100%;
-  --card-foreground: 240 10% 3.9%;
+  --card-foreground: 0 0% 3.9%;
   --popover: 0 0% 100%;
-  --popover-foreground: 240 10% 3.9%;
-  --primary: 240 5.9% 10%;
+  --popover-foreground: 0 0% 3.9%;
+  --primary: 0 0% 10%;
   --primary-foreground: 0 0% 98%;
-  --secondary: 240 4.8% 95.9%;
-  --secondary-foreground: 240 5.9% 10%;
-  --muted: 240 4.8% 95.9%;
-  --muted-foreground: 240 3.8% 46.1%;
-  --accent: 240 4.8% 95.9%;
-  --accent-foreground: 240 5.9% 10%;
+  --secondary: 0 0% 95.9%;
+  --secondary-foreground: 0 0% 10%;
+  --muted: 0 0% 95.9%;
+  --muted-foreground: 0 0% 46.1%;
+  --accent: 0 0% 95.9%;
+  --accent-foreground: 0 0% 10%;
   --destructive: 0 84.2% 60.2%;
   --destructive-foreground: 0 0% 98%;
-  --border: 240 5.9% 90%;
+  --border: 0 0% 90%;
   --table-header: 0 0% 100%; /* Same as card for light mode */
-  --input: 240 5.9% 90%;
-  --ring: 240 5.9% 10%;
+  --input: 0 0% 90%;
+  --ring: 0 0% 10%;
   --chart-1: 220 70% 50%;
   --chart-2: 160 60% 45%;
   --chart-3: 30 80% 55%;
@@ -109,12 +109,12 @@
   --brand-teal: #0d9488;
 
   --sidebar-background: 0 0% 98%;
-  --sidebar-foreground: 240 5.3% 26.1%;
-  --sidebar-primary: 240 5.9% 10%;
+  --sidebar-foreground: 0 0% 26.1%;
+  --sidebar-primary: 0 0% 10%;
   --sidebar-primary-foreground: 0 0% 98%;
-  --sidebar-accent: 240 4.8% 95.9%;
-  --sidebar-accent-foreground: 240 5.9% 10%;
-  --sidebar-border: 240 5.9% 90%;
+  --sidebar-accent: 0 0% 95.9%;
+  --sidebar-accent-foreground: 0 0% 10%;
+  --sidebar-border: 0 0% 90%;
   --sidebar-ring: 217.2 91.2% 59.8%;
 }
 
@@ -152,7 +152,10 @@
 
 .dark .agent-sidebar-panel[data-agent-sidebar-layout="desktop"],
 .dark .agent-sidebar-panel[data-agent-sidebar-layout="mobile"] {
-  background: #000 !important;
+  background: var(
+    --agent-native-lower-surface,
+    hsl(var(--sidebar-background))
+  ) !important;
 }
 
 .analytics-chat-panel
@@ -230,7 +233,7 @@
 }
 
 .light .analytics-session-snippet .plan-code-surface-scroll {
-  background: hsl(240 6% 96%);
+  background: hsl(0 0% 96%);
 }
 
 .an-replay-scrub {
@@ -388,6 +391,93 @@
   }
 }
 
+.analytics-sessions-page {
+  container: analytics-sessions / inline-size;
+}
+
+.analytics-session-path {
+  overflow-wrap: anywhere;
+}
+
+@container agent-native-main (min-width: 720px) {
+  .analytics-sessions-page {
+    padding-inline: 1.5rem;
+  }
+}
+
+@container analytics-sessions (min-width: 640px) {
+  .analytics-session-row {
+    grid-template-columns: 104px minmax(0, 0.9fr) minmax(0, 1.15fr);
+    align-items: center;
+  }
+
+  .analytics-session-path {
+    grid-column: 3;
+  }
+
+  .analytics-session-app-meta {
+    grid-column: 2 / 4;
+    padding-inline-start: calc(104px + 0.75rem);
+  }
+}
+
+@container analytics-sessions (min-width: 760px) {
+  .analytics-session-row {
+    grid-template-columns:
+      104px minmax(150px, 0.85fr) minmax(200px, 1.25fr)
+      minmax(120px, 0.55fr);
+  }
+
+  .analytics-session-app-meta {
+    grid-column: auto;
+    padding-inline-start: 0;
+    text-align: end;
+  }
+
+  .analytics-session-badges {
+    justify-content: flex-end;
+  }
+
+  .analytics-sessions-filter-extra {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@container analytics-sessions (min-width: 920px) {
+  .analytics-sessions-filter-grid {
+    grid-template-columns: 150px minmax(260px, 1fr) 160px auto auto;
+    align-items: center;
+  }
+
+  .analytics-sessions-filter-label {
+    min-width: 0;
+  }
+}
+
+@container analytics-sessions (min-width: 960px) {
+  .analytics-sessions-empty-grid {
+    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
+  }
+}
+
+.analytics-session-detail-page {
+  container: analytics-session-detail / inline-size;
+}
+
+@container analytics-session-detail (min-width: 760px) {
+  .analytics-session-detail-header {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+
+@container analytics-session-detail (min-width: 1040px) {
+  .analytics-session-detail-workbench {
+    grid-template-columns: minmax(0, 1fr) 330px;
+  }
+}
+
 /* The dashboard grid responds to the available content width — which shrinks
    when the agent sidebar is open — not the viewport. Rows are rendered
    explicitly so deleting a card only expands the remaining cards in that row. */
@@ -480,6 +570,20 @@
   pointer-events: none;
 }
 
+@container agent-native-main (min-width: 820px) {
+  .analytics-explorer-config-grid {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  .explorer-dashboard-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .explorer-dashboard-card-wide {
+    grid-column: span 2 / span 2;
+  }
+}
+
 @container dashboard-grid (min-width: 768px) {
   .dashboard-grid {
     flex-direction: row;

package/corpus/templates/analytics/app/pages/adhoc/explorer/index.tsx

@@ -191,7 +191,7 @@ export default function ExplorerPage() {
       </div>
 
       {/* Config panel */}
-      <div className="grid grid-cols-1 lg:grid-cols-[1fr_auto] gap-4 items-start">
+      <div className="analytics-explorer-config-grid grid grid-cols-1 gap-4 items-start">
         <div className="space-y-4">
           <EventPanel
             events={config.events}

package/corpus/templates/analytics/app/pages/adhoc/explorer-dashboard/ChartCard.tsx

@@ -106,7 +106,7 @@ export function DashboardChartCard({
       ref={setNodeRef}
       style={style}
       data-dragging={isDragging ? "true" : undefined}
-      className={`group relative ${chart.width === 2 ? "md:col-span-2" : ""}`}
+      className={`explorer-dashboard-card group relative ${chart.width === 2 ? "explorer-dashboard-card-wide" : ""}`}
     >
       <Card className="h-full">
         <CardHeader className="pb-2 flex flex-row items-center gap-2">

package/corpus/templates/analytics/app/pages/adhoc/explorer-dashboard/index.tsx

@@ -741,7 +741,7 @@ export default function ExplorerDashboardPage() {
             strategy={rectSortingStrategy}
           >
             <div
-              className="explorer-dashboard-grid grid grid-cols-1 md:grid-cols-2 gap-4"
+              className="explorer-dashboard-grid grid grid-cols-1 gap-4"
               data-dashboard-dragging={activeDragChartId ? "true" : undefined}
             >
               {dashboard.charts.map((chart) => (

package/corpus/templates/analytics/app/pages/sessions/SessionDetailPage.tsx

@@ -159,9 +159,9 @@ export default function SessionDetailPage() {
   const recording = data?.recording;
 
   return (
-    <div className="flex h-full min-h-0 w-full flex-col gap-3 overflow-hidden">
+    <div className="analytics-session-detail-page flex h-full min-h-0 w-full flex-col gap-3 overflow-hidden">
       {codeRequiredDialog}
-      <div className="flex shrink-0 flex-col gap-3 md:flex-row md:items-center md:justify-between">
+      <div className="analytics-session-detail-header flex shrink-0 flex-col gap-3">
         <div className="flex min-w-0 items-center gap-2">
           <Button variant="ghost" size="sm" asChild className="shrink-0">
             <Link to="/sessions">
@@ -287,7 +287,7 @@ function ReplayWorkbench({
   }, [currentTime, markers]);
 
   return (
-    <div className="grid h-full min-h-0 gap-3 xl:grid-cols-[minmax(0,1fr)_330px]">
+    <div className="analytics-session-detail-workbench grid h-full min-h-0 gap-3">
       <ReplayPlayer
         events={events}
         markers={markers}
@@ -923,7 +923,7 @@ function MarkerIcon({ kind }: { kind: ReplayMarker["kind"] }) {
 
 function DetailSkeleton() {
   return (
-    <div className="grid min-h-0 flex-1 gap-3 xl:grid-cols-[minmax(0,1fr)_330px]">
+    <div className="analytics-session-detail-workbench grid min-h-0 flex-1 gap-3">
       <Skeleton className="h-full min-h-[420px] w-full" />
       <Skeleton className="h-full min-h-[420px] w-full" />
     </div>

package/corpus/templates/analytics/app/pages/sessions/SessionsPage.tsx

@@ -108,11 +108,11 @@ export default function SessionsPage() {
   }
 
   return (
-    <div className="mx-auto flex w-full max-w-7xl flex-col gap-4 px-4 py-5 md:px-6">
+    <div className="analytics-sessions-page mx-auto flex w-full max-w-7xl flex-col gap-4 px-4 py-5">
       <Card>
         <CardContent className="p-3">
-          <div className="grid gap-2 lg:grid-cols-[150px_minmax(260px,1fr)_160px_auto_auto] lg:items-center">
-            <div className="flex items-center gap-2 px-1 text-sm font-medium">
+          <div className="analytics-sessions-filter-grid grid gap-2">
+            <div className="analytics-sessions-filter-label flex items-center gap-2 px-1 text-sm font-medium">
               <IconFilter className="h-4 w-4 text-muted-foreground" />
               {t("sessions.segmentFilters")}
             </div>
@@ -171,7 +171,7 @@ export default function SessionsPage() {
             </Button>
           </div>
           {filtersOpen ? (
-            <div className="mt-3 grid gap-3 border-t pt-3 lg:grid-cols-2">
+            <div className="analytics-sessions-filter-extra mt-3 grid gap-3 border-t pt-3">
               <div className="rounded-md border bg-muted/20 p-3">
                 <div className="mb-2 text-[11px] font-semibold uppercase text-muted-foreground">
                   {t("sessions.userFilters")}
@@ -229,7 +229,7 @@ export default function SessionsPage() {
                     <button
                       key={recording.id}
                       type="button"
-                      className="grid w-full gap-3 px-4 py-3 text-left transition-colors hover:bg-muted/35 focus-visible:bg-muted/35 focus-visible:outline-none md:grid-cols-[104px_minmax(170px,0.85fr)_minmax(260px,1.25fr)_minmax(130px,0.55fr)] md:items-center"
+                      className="analytics-session-row grid w-full gap-3 px-4 py-3 text-left transition-colors hover:bg-muted/35 focus-visible:bg-muted/35 focus-visible:outline-none"
                       onClick={() => navigate(href)}
                       aria-label={t("sessions.watchReplay")}
                     >
@@ -248,7 +248,7 @@ export default function SessionsPage() {
                           })}
                         </span>
                       </span>
-                      <span className="min-w-0">
+                      <span className="analytics-session-path min-w-0">
                         <span className="block truncate text-sm font-medium text-primary">
                           {pathLabel(recording)}
                         </span>
@@ -259,13 +259,13 @@ export default function SessionsPage() {
                             shortId(recording.sessionId)}
                         </span>
                       </span>
-                      <span className="min-w-0 text-left md:text-right">
+                      <span className="analytics-session-app-meta min-w-0 text-left">
                         <span className="block truncate text-sm text-muted-foreground">
                           {recording.app ||
                             recording.template ||
                             t("sessions.unknownApp")}
                         </span>
-                        <span className="mt-1 flex flex-wrap gap-1.5 md:justify-end">
+                        <span className="analytics-session-badges mt-1 flex flex-wrap gap-1.5">
                           {recording.errorCount > 0 ? (
                             <Badge variant="destructive">
                               {t("sessions.errorCount", {
@@ -310,7 +310,7 @@ function EmptySessionsState() {
   return (
     <div className="p-6 lg:p-8">
       {showStorageHint ? <ReplayStorageHint /> : null}
-      <div className="grid min-h-[380px] gap-6 lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)]">
+      <div className="analytics-sessions-empty-grid grid min-h-[380px] gap-6">
         <div className="flex flex-col justify-center gap-3">
           <div className="flex h-10 w-10 items-center justify-center rounded-md border bg-muted/40">
             <IconPlayerPlay className="h-5 w-5 text-primary" />

package/corpus/templates/analytics/changelog/2026-06-29-agents-can-search-and-read-connected-github-repositories-whe.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-06-29
+---
+
+Agents can search and read connected GitHub repositories when auditing tracking events.

package/corpus/templates/analytics/changelog/2026-06-29-sessions-and-explorer-layouts-adapt-when-the-agent-sidebar-is.md

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

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

@@ -130,7 +130,9 @@ export function Layout({ children }: LayoutProps) {
         </div>
         {!hideHeader && <Header />}
         <InvitationBanner />
-        <main className="min-h-0 flex-1 overflow-y-auto">{children}</main>
+        <main className="agent-native-app-main min-h-0 flex-1 overflow-y-auto">
+          {children}
+        </main>
       </div>
     </div>
   );

package/corpus/templates/assets/app/components/library/LibraryPresetGrid.tsx

@@ -22,7 +22,7 @@ export function LibraryPresetGrid({
   if (!presets.length) return null;
 
   return (
-    <div className="grid gap-3 md:grid-cols-2">
+    <div className="assets-library-preset-grid grid gap-3">
       {presets.map((preset, index) => {
         const Icon = PRESET_ICONS[index % PRESET_ICONS.length];
         const colors = preset.styleBrief.palette ?? [];

package/corpus/templates/assets/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: 0 0% 20%;
+  --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%;
 }
 
@@ -165,6 +165,70 @@
   outline-offset: 2px;
 }
 
+@container agent-native-main (min-width: 940px) {
+  .assets-asset-detail-layout {
+    grid-template-columns: 360px minmax(0, 1fr);
+  }
+
+  .assets-asset-detail-sidebar {
+    border-bottom-width: 0;
+    border-inline-end-width: 1px;
+  }
+}
+
+@container agent-native-main (min-width: 640px) {
+  .assets-library-dense-grid,
+  .assets-library-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .assets-library-preset-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .assets-brand-kit-item-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@container agent-native-main (min-width: 980px) {
+  .assets-brand-kit-preview-grid {
+    grid-template-columns: minmax(0, 1fr) 284px;
+  }
+
+  .assets-live-candidates-grid {
+    grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
+  }
+
+  .assets-brand-kit-settings-grid {
+    grid-template-columns: minmax(0, 1fr) 320px;
+  }
+
+  .assets-library-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+@container agent-native-main (min-width: 1180px) {
+  .assets-library-dense-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .assets-brand-kit-item-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@container agent-native-main (min-width: 1320px) {
+  .assets-library-grid {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+
+  .assets-brand-kit-item-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
 .assets-create-chat-panel
   [data-agent-empty-state="centered"]
   .agent-chat-scroll {

package/corpus/templates/assets/app/routes/asset.$id.tsx

@@ -134,8 +134,8 @@ export default function AssetDetailPage() {
   }
 
   return (
-    <div className="grid h-full min-h-0 grid-cols-1 lg:grid-cols-[360px_minmax(0,1fr)]">
-      <aside className="overflow-y-auto border-b border-border bg-background p-5 lg:border-b-0 lg:border-r">
+    <div className="assets-asset-detail-layout grid h-full min-h-0 grid-cols-1">
+      <aside className="assets-asset-detail-sidebar overflow-y-auto border-b border-border bg-background p-5">
         <div className="mb-4">
           <Button variant="ghost" size="sm" asChild className="-ml-2 gap-2">
             <Link to={libraryBackPath}>