@agent-native/core 0.79.17 → 0.79.19

package/corpus/templates/analytics/app/routes/catalog.tsx

@@ -3,20 +3,11 @@ import {
   useActionQuery,
   useT,
 } from "@agent-native/core/client";
-import {
-  IconCheck,
-  IconExternalLink,
-  IconLayoutDashboard,
-  IconLoader2,
-  IconPackageImport,
-  IconPlugConnected,
-  IconSparkles,
-} from "@tabler/icons-react";
+import { IconLayoutDashboard } from "@tabler/icons-react";
 import { useMemo, useState } from "react";
 import { useNavigate } from "react-router";
 import { toast } from "sonner";
 
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
   Card,
@@ -27,15 +18,7 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { demoNodeExporterDashboardPath } from "@/lib/demo-dashboard-path";
-import { cn } from "@/lib/utils";
-
-type TemplateCategory =
-  | "Acquisition"
-  | "Product"
-  | "Observability"
-  | "Operations";
 
 type InstalledDashboard = {
   id: string;
@@ -49,26 +32,12 @@ type DashboardTemplate = {
   id: string;
   name: string;
   description: string;
-  category: TemplateCategory;
   defaultDashboardId: string;
   dataSources: string[];
-  tags: string[];
   panelCount: number;
-  version: string;
-  recommended?: boolean;
-  installed: boolean;
   installedDashboards: InstalledDashboard[];
 };
 
-const CATEGORY_TABS = [
-  "Demo",
-  "All",
-  "Product",
-  "Acquisition",
-  "Observability",
-  "Operations",
-] as const;
-
 function isDemoTemplate(template: DashboardTemplate): boolean {
   return template.dataSources.includes("demo");
 }
@@ -94,22 +63,18 @@ function sourceLabel(source: string): string {
 
 function TemplateSkeleton() {
   return (
-    <Card>
+    <Card className="flex min-h-[250px] flex-col">
       <CardHeader>
-        <div className="flex items-start justify-between gap-3">
-          <div className="space-y-2">
-            <Skeleton className="h-5 w-48" />
-            <Skeleton className="h-4 w-72" />
-          </div>
-          <Skeleton className="h-6 w-20 rounded-full" />
+        <div className="space-y-3">
+          <Skeleton className="h-5 w-48" />
+          <Skeleton className="h-4 w-full" />
+          <Skeleton className="h-4 w-5/6" />
+          <Skeleton className="h-4 w-3/5" />
         </div>
       </CardHeader>
-      <CardContent className="space-y-4">
-        <div className="flex gap-2">
-          <Skeleton className="h-6 w-24 rounded-full" />
-          <Skeleton className="h-6 w-20 rounded-full" />
-        </div>
-        <Skeleton className="h-10 w-full" />
+      <CardContent className="mt-auto space-y-4">
+        <Skeleton className="h-4 w-40" />
+        <Skeleton className="h-9 w-full" />
       </CardContent>
     </Card>
   );
@@ -131,110 +96,38 @@ function TemplateCard({
     (dashboard) => !dashboard.archivedAt,
   );
   const isInstalled = Boolean(installedDashboard);
-  const isDemo = isDemoTemplate(template);
+  const metadata = [
+    t("catalog.panels", { count: String(template.panelCount) }),
+    ...template.dataSources.map(sourceLabel),
+  ].join(" · ");
 
   return (
-    <Card className="flex min-h-[270px] flex-col overflow-hidden">
-      <CardHeader className="pb-4">
-        <div className="flex items-start justify-between gap-3">
-          <div className="min-w-0 space-y-1">
-            <CardTitle className="text-base leading-6">
-              {template.name}
-            </CardTitle>
-            <CardDescription className="line-clamp-2">
-              {template.description}
-            </CardDescription>
-          </div>
-          <div className="flex shrink-0 flex-col items-end gap-1.5">
-            {isDemo ? (
-              <Badge className="border-cyan-400/60 bg-cyan-400/20 text-cyan-800 shadow-sm shadow-cyan-500/10 dark:text-cyan-100">
-                <IconSparkles className="mr-1 h-3 w-3" />
-                {t("catalog.demo")}
-              </Badge>
-            ) : null}
-            {template.recommended && (
-              <Badge variant="secondary" className="shrink-0">
-                {t("catalog.recommended")}
-              </Badge>
-            )}
-          </div>
-        </div>
+    <Card className="flex min-h-[250px] flex-col">
+      <CardHeader className="gap-2 pb-4">
+        <CardTitle className="text-base leading-6">{template.name}</CardTitle>
+        <CardDescription className="text-sm leading-6">
+          {template.description}
+        </CardDescription>
       </CardHeader>
-      <CardContent className="flex flex-1 flex-col gap-4">
-        <div className="flex flex-wrap items-center gap-2">
-          <Badge variant="outline" className="gap-1.5">
-            <IconLayoutDashboard className="h-3 w-3" />
-            {t("catalog.panels", { count: String(template.panelCount) })}
-          </Badge>
-          {template.dataSources.map((source) => (
-            <Badge
-              key={source}
-              variant="outline"
-              className={cn(
-                "gap-1.5",
-                source === "demo" &&
-                  "border-cyan-400/50 bg-cyan-400/10 text-cyan-700 dark:text-cyan-200",
-              )}
-            >
-              <IconPlugConnected className="h-3 w-3" />
-              {sourceLabel(source)}
-            </Badge>
-          ))}
-        </div>
-
-        <div className="flex min-h-8 flex-wrap gap-1.5">
-          {template.tags.map((tag) => (
-            <span
-              key={tag}
-              className="rounded-md bg-muted px-2 py-1 text-xs text-muted-foreground"
-            >
-              {tag}
-            </span>
-          ))}
-        </div>
-
-        <div
-          className={cn(
-            "mt-auto flex items-center gap-2 rounded-md border px-3 py-2 text-xs",
-            isInstalled
-              ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-300"
-              : "border-border bg-muted/40 text-muted-foreground",
-          )}
-        >
-          {isInstalled ? (
-            <IconCheck className="h-3.5 w-3.5 shrink-0" />
-          ) : (
-            <IconPackageImport className="h-3.5 w-3.5 shrink-0" />
-          )}
-          <span className="truncate">
-            {isInstalled
-              ? t("catalog.installedAs", {
-                  name: installedDashboard?.name ?? "",
-                })
-              : t("catalog.installsPrivateSqlDashboard")}
-          </span>
-        </div>
+      <CardContent className="mt-auto">
+        <p className="text-sm text-muted-foreground">{metadata}</p>
       </CardContent>
       <CardFooter className="gap-2">
         {isInstalled && installedDashboard ? (
           <Button
+            variant="secondary"
             className="min-w-0 flex-1"
             onClick={() => onOpen(installedDashboard.id)}
           >
-            <IconExternalLink className="h-4 w-4" />
             {t("catalog.open")}
           </Button>
         ) : (
           <Button
+            variant="secondary"
             className="min-w-0 flex-1"
             onClick={onInstall}
             disabled={installing}
           >
-            {installing ? (
-              <IconLoader2 className="h-4 w-4 animate-spin" />
-            ) : (
-              <IconPackageImport className="h-4 w-4" />
-            )}
             {installing ? t("catalog.installing") : t("catalog.install")}
           </Button>
         )}
@@ -245,8 +138,6 @@ function TemplateCard({
 
 export default function TemplateCatalogRoute() {
   const t = useT();
-  const [category, setCategory] =
-    useState<(typeof CATEGORY_TABS)[number]>("Demo");
   const [installingIds, setInstallingIds] = useState<Set<string>>(new Set());
   const navigate = useNavigate();
   const install = useActionMutation("install-dashboard-template");
@@ -260,14 +151,6 @@ export default function TemplateCatalogRoute() {
     () => (data as DashboardTemplate[] | undefined) ?? [],
     [data],
   );
-  const filtered = useMemo(() => {
-    if (category === "Demo") return templates.filter(isDemoTemplate);
-    if (category === "All") return templates;
-    return templates.filter((template) => template.category === category);
-  }, [category, templates]);
-  const installedCount = templates.filter(
-    (template) => template.installed,
-  ).length;
 
   async function installTemplate(template: DashboardTemplate) {
     setInstallingIds((prev) => new Set(prev).add(template.id));
@@ -310,46 +193,20 @@ export default function TemplateCatalogRoute() {
   }
 
   return (
-    <div className="mx-auto flex w-full max-w-6xl flex-col gap-6">
-      <div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
-        <div className="max-w-2xl space-y-2">
-          <p className="text-sm text-muted-foreground">
-            {t("catalog.description")}
-          </p>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="secondary">
-              {t("catalog.templatesCount", { count: String(templates.length) })}
-            </Badge>
-            <Badge variant="outline">
-              {t("catalog.installedCount", {
-                count: String(installedCount),
-              })}
-            </Badge>
-          </div>
-        </div>
-        <Tabs
-          value={category}
-          onValueChange={(next) =>
-            setCategory(next as (typeof CATEGORY_TABS)[number])
-          }
-        >
-          <TabsList className="grid w-full grid-cols-3 sm:grid-cols-6 md:w-auto">
-            {CATEGORY_TABS.map((item) => (
-              <TabsTrigger key={item} value={item} className="text-xs">
-                {item}
-              </TabsTrigger>
-            ))}
-          </TabsList>
-        </Tabs>
+    <div className="mx-auto flex w-full max-w-5xl flex-col gap-5">
+      <div className="max-w-2xl">
+        <p className="text-sm leading-6 text-muted-foreground">
+          {t("catalog.description")}
+        </p>
       </div>
 
       {isLoading ? (
-        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+        <div className="grid gap-4 md:grid-cols-2">
           {Array.from({ length: 4 }).map((_, index) => (
             <TemplateSkeleton key={index} />
           ))}
         </div>
-      ) : filtered.length === 0 ? (
+      ) : templates.length === 0 ? (
         <Card className="border-dashed">
           <CardContent className="flex flex-col items-center justify-center gap-3 py-16 text-center">
             <IconLayoutDashboard className="h-8 w-8 text-muted-foreground" />
@@ -364,8 +221,8 @@ export default function TemplateCatalogRoute() {
           </CardContent>
         </Card>
       ) : (
-        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
-          {filtered.map((template) => (
+        <div className="grid gap-4 md:grid-cols-2">
+          {templates.map((template) => (
             <TemplateCard
               key={template.id}
               template={template}

package/corpus/templates/analytics/app/routes/team.tsx

@@ -1,10 +1,11 @@
+import { Navigate } from "react-router";
+
 import { messagesByLocale } from "@/i18n-data";
-import Team from "@/pages/Team";
 
 export function meta() {
   return [{ title: messagesByLocale["en-US"].routeTitles.team }];
 }
 
 export default function TeamRoute() {
-  return <Team />;
+  return <Navigate to="/settings#team" replace />;
 }

package/corpus/templates/analytics/changelog/2026-06-26-dashboard-templates-are-tucked-into-settings-and-show-simple.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-26
+---
+
+Dashboard templates are tucked into settings and show simpler, clearer cards.

package/corpus/templates/analytics/changelog/2026-06-26-the-ask-tab-uses-a-softer-dark-gray-canvas-while-sidebar-cha.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-26
+---
+
+The Ask tab uses a softer dark-gray canvas while sidebar chat stays black.

package/corpus/templates/analytics/changelog/2026-06-26-the-sessions-page-shows-a-single-page-title-instead-of-repea.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-26
+---
+
+The Sessions page shows a single page title instead of repeating itself.

package/corpus/templates/analytics/server/lib/dashboard-catalog.ts

@@ -31,6 +31,7 @@ export type CatalogDashboardConfig = SqlDashboardConfig & {
 
 export type DashboardCatalogEntry = DashboardCatalogMetadata & {
   buildConfig: () => SqlDashboardConfig;
+  visibleInCatalog?: boolean;
 };
 
 export type InstalledDashboardSummary = {
@@ -906,7 +907,7 @@ export const dashboardCatalogEntries: DashboardCatalogEntry[] = [
     id: "demo-node-exporter",
     name: "Demo Node Exporter Full",
     description:
-      "The full Node Exporter dashboard, backed by the built-in demo Prometheus endpoint without consuming the Prometheus source slot.",
+      "Explore CPU, memory, disk, network, filesystem, and load metrics using built-in sample Prometheus data, with no data source setup required.",
     category: "Observability",
     defaultDashboardId: "demo-node-exporter",
     dataSources: ["demo"],
@@ -940,6 +941,7 @@ export const dashboardCatalogEntries: DashboardCatalogEntry[] = [
     panelCount: 34,
     version: CATALOG_VERSION,
     recommended: true,
+    visibleInCatalog: false,
     buildConfig: () => seedConfig("agent-native-templates-first-party"),
   },
   {
@@ -954,13 +956,14 @@ export const dashboardCatalogEntries: DashboardCatalogEntry[] = [
     panelCount: 12,
     version: CATALOG_VERSION,
     recommended: true,
+    visibleInCatalog: false,
     buildConfig: () => seedConfig("skills-cli-funnel"),
   },
   {
     id: "google-analytics-web",
     name: "Google Analytics Website",
     description:
-      "GA4 traffic, engagement, acquisition, top pages, and geography.",
+      "Track GA4 website traffic, engagement, acquisition channels, top pages, geography, and browser/device mix.",
     category: "Acquisition",
     defaultDashboardId: "google-analytics",
     dataSources: ["ga4"],
@@ -973,7 +976,7 @@ export const dashboardCatalogEntries: DashboardCatalogEntry[] = [
     id: "node-exporter-macos",
     name: "Node Exporter macOS",
     description:
-      "A comprehensive Darwin/macOS Prometheus host dashboard for Homebrew node_exporter metrics.",
+      "Monitor macOS host CPU, memory, disk, filesystem, network, load, and Homebrew node_exporter health from Prometheus.",
     category: "Observability",
     defaultDashboardId: "node-exporter-macos",
     dataSources: ["prometheus"],
@@ -987,7 +990,7 @@ export const dashboardCatalogEntries: DashboardCatalogEntry[] = [
     id: "node-exporter-full",
     name: "Node Exporter Full",
     description:
-      "Linux node_exporter host observability plus Prometheus demo-app traffic, latency, and workload panels.",
+      "Monitor Linux host CPU, memory, disk, filesystem, network, and load, plus Prometheus demo-app traffic and latency panels.",
     category: "Observability",
     defaultDashboardId: "node-exporter-full",
     dataSources: ["prometheus"],
@@ -1050,31 +1053,37 @@ export async function listDashboardCatalog(
     hidden: "all",
   });
 
-  return dashboardCatalogEntries.map((entry) => {
-    const installedDashboards = dashboards
-      .filter((row) => installedDashboardForTemplate(row, entry))
-      .map((row) => ({
-        id: row.id,
-        name:
-          typeof row.config.name === "string" && row.config.name.trim()
-            ? row.config.name
-            : row.title,
-        visibility: row.visibility,
-        updatedAt: row.updatedAt,
-        archivedAt: row.archivedAt,
-      }))
-      .sort(
-        (a, b) =>
-          new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime(),
-      );
+  return dashboardCatalogEntries
+    .filter((entry) => entry.visibleInCatalog !== false)
+    .map((entry) => {
+      const installedDashboards = dashboards
+        .filter((row) => installedDashboardForTemplate(row, entry))
+        .map((row) => ({
+          id: row.id,
+          name:
+            typeof row.config.name === "string" && row.config.name.trim()
+              ? row.config.name
+              : row.title,
+          visibility: row.visibility,
+          updatedAt: row.updatedAt,
+          archivedAt: row.archivedAt,
+        }))
+        .sort(
+          (a, b) =>
+            new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime(),
+        );
 
-    const { buildConfig: _buildConfig, ...metadata } = entry;
-    return {
-      ...metadata,
-      installedDashboards,
-      installed: installedDashboards.length > 0,
-    };
-  });
+      const {
+        buildConfig: _buildConfig,
+        visibleInCatalog: _visibleInCatalog,
+        ...metadata
+      } = entry;
+      return {
+        ...metadata,
+        installedDashboards,
+        installed: installedDashboards.length > 0,
+      };
+    });
 }
 
 export function applyCatalogMetadata(

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

@@ -1,6 +1,7 @@
 import {
   ChangelogSettingsCard,
   LanguagePicker,
+  SettingsTabsPage,
   agentNativePath,
   openAgentSettings,
   useActionQuery,
@@ -13,6 +14,7 @@ import {
   type OnboardingMethod,
   type OnboardingStepStatus,
 } from "@agent-native/core/client/onboarding";
+import { TeamPage } from "@agent-native/core/client/org";
 import {
   IconAlertCircle,
   IconCheck,
@@ -81,51 +83,71 @@ export default function SettingsPage() {
     <PageShell
       title={t("settings.title")}
       description={t("settings.description")}
-      className="max-w-4xl space-y-6"
+      className="max-w-5xl"
     >
-      <div className="max-w-2xl">
-        <ChangelogSettingsCard markdown={changelog} />
-      </div>
-
-      <div className="max-w-2xl">
-        <h2 className="text-lg font-semibold tracking-tight">
-          {t("settings.connections")}
-        </h2>
-        <p className="mt-1 text-sm leading-6 text-muted-foreground">
-          {t("settings.connectionsDescription")}
-        </p>
-      </div>
+      <SettingsTabsPage
+        teamLabel={t("team.title")}
+        general={
+          <div className="mx-auto w-full max-w-2xl space-y-6">
+            <div>
+              <h2 className="text-lg font-semibold tracking-tight">
+                {t("settings.connections")}
+              </h2>
+              <p className="mt-1 text-sm leading-6 text-muted-foreground">
+                {t("settings.connectionsDescription")}
+              </p>
+            </div>
 
-      <Card className="max-w-2xl">
-        <CardHeader>
-          <CardTitle className="text-base">
-            {t("settings.languageTitle")}
-          </CardTitle>
-          <CardDescription>{t("settings.languageDescription")}</CardDescription>
-        </CardHeader>
-        <CardContent className="max-w-xs space-y-1.5">
-          <Label>{t("settings.languageLabel")}</Label>
-          <LanguagePicker label={t("settings.languageLabel")} />
-        </CardContent>
-      </Card>
-
-      <Card className="max-w-2xl">
-        <CardHeader>
-          <CardTitle className="text-base">
-            {t("settings.agentTitle")}
-          </CardTitle>
-          <CardDescription>{t("settings.agentDescription")}</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <Button variant="outline" onClick={() => openAgentSettings()}>
-            {t("settings.openAgentSettings")}
-          </Button>
-        </CardContent>
-      </Card>
-
-      <section id="asset-generation-setup" className="scroll-mt-4">
-        <AssetsSetupCard libraryCount={data?.count ?? 0} />
-      </section>
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-base">
+                  {t("settings.languageTitle")}
+                </CardTitle>
+                <CardDescription>
+                  {t("settings.languageDescription")}
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="max-w-xs space-y-1.5">
+                <Label>{t("settings.languageLabel")}</Label>
+                <LanguagePicker label={t("settings.languageLabel")} />
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-base">
+                  {t("settings.agentTitle")}
+                </CardTitle>
+                <CardDescription>
+                  {t("settings.agentDescription")}
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <Button variant="outline" onClick={() => openAgentSettings()}>
+                  {t("settings.openAgentSettings")}
+                </Button>
+              </CardContent>
+            </Card>
+
+            <section id="asset-generation-setup" className="scroll-mt-4">
+              <AssetsSetupCard libraryCount={data?.count ?? 0} />
+            </section>
+          </div>
+        }
+        team={
+          <div className="mx-auto w-full max-w-2xl">
+            <TeamPage
+              showTitle={false}
+              createOrgDescription={t("team.createOrgDescription")}
+            />
+          </div>
+        }
+        whatsNew={
+          <div className="mx-auto w-full max-w-2xl">
+            <ChangelogSettingsCard markdown={changelog} />
+          </div>
+        }
+      />
     </PageShell>
   );
 }

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

@@ -1,7 +1,5 @@
-import { useT } from "@agent-native/core/client";
-import { TeamPage } from "@agent-native/core/client/org";
+import { Navigate } from "react-router";
 
-import { useSetPageTitle } from "@/components/layout/HeaderActions";
 import { messagesByLocale } from "@/i18n-data";
 
 export function meta() {
@@ -9,11 +7,5 @@ export function meta() {
 }
 
 export default function TeamRoute() {
-  const t = useT();
-  useSetPageTitle(t("team.title"));
-  return (
-    <main className="mx-auto w-full max-w-3xl px-4 py-6 sm:px-6 sm:py-10">
-      <TeamPage createOrgDescription={t("team.createOrgDescription")} />
-    </main>
-  );
+  return <Navigate to="/settings#team" replace />;
 }