@agent-native/core 0.152.1 → 0.153.0

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

@@ -40,6 +40,7 @@ import {
   useRef,
   useMemo,
   Fragment,
+  type MouseEvent as ReactMouseEvent,
 } from "react";
 import { Link, useLocation, useNavigate } from "react-router";
 import { toast } from "sonner";
@@ -150,6 +151,7 @@ import {
 } from "@/lib/prefetch-keys";
 import type { ResourceAccess } from "@/lib/resource-access";
 
+import { resolveAskNavigationAction } from "./layout-route-policy";
 import { NewDashboardDialog } from "./NewDashboardDialog";
 import { SidebarLoadError } from "./SidebarLoadError";
 
@@ -1613,6 +1615,27 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
     });
   }, []);
 
+  const handleAskClick = useCallback(
+    (event: ReactMouseEvent<HTMLAnchorElement>) => {
+      const action = resolveAskNavigationAction(
+        isAskRoute,
+        event.metaKey || event.ctrlKey || event.shiftKey || event.altKey,
+      );
+      if (action === "browser") return;
+
+      event.preventDefault();
+      if (action === "toggle") {
+        toggleAskOpen();
+        return;
+      }
+
+      setAskOpen(true);
+      setStoredBoolean(ASK_OPEN_KEY, true);
+      navigateWithAgentChatViewTransition(navigate, "/ask");
+    },
+    [isAskRoute, navigate, toggleAskOpen],
+  );
+
   // Fold per-source counters into sidebar list query keys so agent-driven
   // create/rename/archive/delete shows up without a manual refresh. We
   // Domain counters keep these lists targeted. Folding the generic `action`
@@ -2075,18 +2098,7 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
       label: t("navigation.ask"),
       href: "/ask",
       active: location.pathname === "/ask",
-      onClick: (event: React.MouseEvent<HTMLAnchorElement>) => {
-        if (
-          location.pathname !== "/ask" &&
-          !event.metaKey &&
-          !event.ctrlKey &&
-          !event.shiftKey &&
-          !event.altKey
-        ) {
-          event.preventDefault();
-          navigateWithAgentChatViewTransition(navigate, "/ask");
-        }
-      },
+      onClick: handleAskClick,
     },
     {
       icon: IconChartBar,
@@ -2201,7 +2213,7 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
       )}
       {effectiveCollapsed ? (
         <>
-          <nav className="flex min-h-0 flex-1 flex-col items-center gap-1 overflow-y-auto px-1 py-2">
+          <nav className="flex min-h-0 flex-1 flex-col items-center gap-0.5 overflow-y-auto px-1 py-2">
             {collapsedNavItems.map((item) => {
               const Icon = item.icon;
               return (
@@ -2212,7 +2224,7 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
                       onClick={item.onClick}
                       aria-label={item.label}
                       className={cn(
-                        "flex h-10 w-10 items-center justify-center rounded-md transition-colors",
+                        "flex h-9 w-9 items-center justify-center rounded-md transition-colors",
                         item.active
                           ? "bg-sidebar-accent text-sidebar-accent-foreground"
                           : "text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground",
@@ -2262,7 +2274,7 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
             </Link>
           </div>
           <div className="flex min-h-0 flex-1 flex-col overflow-hidden py-2">
-            <nav className="min-h-0 flex-1 grid min-w-0 items-start overflow-x-hidden overflow-y-auto px-2 text-sm font-medium lg:px-4 space-y-1">
+            <nav className="min-h-0 min-w-0 flex flex-1 flex-col gap-1 overflow-x-hidden overflow-y-auto px-2 text-sm font-medium lg:px-4">
               {/* Ask section */}
               <div className="order-1 group/section min-w-0 space-y-1">
                 <div
@@ -2275,18 +2287,7 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
                 >
                   <Link
                     to="/ask"
-                    onClick={(event) => {
-                      if (
-                        !isAskRoute &&
-                        !event.metaKey &&
-                        !event.ctrlKey &&
-                        !event.shiftKey &&
-                        !event.altKey
-                      ) {
-                        event.preventDefault();
-                        navigateWithAgentChatViewTransition(navigate, "/ask");
-                      }
-                    }}
+                    onClick={handleAskClick}
                     className="flex min-w-0 flex-1 items-center gap-3 px-3 py-2"
                   >
                     <IconMessageCircle className="h-4 w-4 shrink-0" />
@@ -2313,10 +2314,7 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
                     />
                   </button>
                 </div>
-                <AnalyticsChatsSection
-                  isAskRoute={isAskRoute}
-                  open={askOpen && isAskRoute}
-                />
+                <AnalyticsChatsSection isAskRoute={isAskRoute} open={askOpen} />
               </div>
 
               {/* Sessions link */}
@@ -2577,7 +2575,7 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
             </nav>
 
             <div className="shrink-0 min-w-0 px-2 pt-2 text-sm font-medium lg:px-4">
-              <nav className="grid min-w-0 items-start space-y-1 pb-1">
+              <nav className="flex min-w-0 flex-col gap-1 pb-1">
                 {bottomItems.map((item) => {
                   const Icon = item.icon;
                   const isActive = location.pathname === item.href;

package/corpus/templates/analytics/app/components/layout/layout-route-policy.ts

@@ -5,3 +5,13 @@ export function isAnalyticsSessionsRoute(pathname: string): boolean {
 export function shouldDefaultOpenAnalyticsSidebar(_pathname: string): boolean {
   return false;
 }
+
+export type AskNavigationAction = "browser" | "navigate" | "toggle";
+
+export function resolveAskNavigationAction(
+  isAskRoute: boolean,
+  hasModifier: boolean,
+): AskNavigationAction {
+  if (hasModifier) return "browser";
+  return isAskRoute ? "toggle" : "navigate";
+}

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

@@ -482,7 +482,11 @@
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   align-items: start;
-  gap: 0.75rem;
+  gap: 0.5rem 2rem;
+  overflow: visible;
+  border-radius: 0.75rem;
+  background: transparent;
+  padding: 0.5rem;
 }
 
 .data-source-card {

package/corpus/templates/analytics/app/lib/data-source-status.ts

@@ -172,9 +172,9 @@ export function getGoogleDriveConnection(
 
 const sharedConnectionLabels: Record<SharedConnectionStatusKind, string> = {
   ready: "Ready via workspace",
-  needs_grant: "Needs grant",
-  needs_credentials: "Needs credentials",
-  local_credentials: "Local credentials",
+  needs_grant: "Available in workspace",
+  needs_credentials: "Not connected",
+  local_credentials: "Configured in this app",
 };
 
 function normalizeCredentialKey(key: string): string {

package/corpus/templates/analytics/app/lib/resource-access.ts

@@ -1,4 +1,9 @@
-export type ResourceRole = "owner" | "admin" | "editor" | "viewer";
+export type ResourceRole =
+  | "owner"
+  | "admin"
+  | "editor"
+  | "commenter"
+  | "viewer";
 
 export interface ResourceAccess {
   role?: ResourceRole | null;

package/corpus/templates/analytics/app/pages/DataSources.tsx

@@ -12,6 +12,10 @@ import {
 import { oauthRedirectUri } from "@agent-native/core/client/host";
 import { useFormatters, useT } from "@agent-native/core/client/i18n";
 import { useOrgRole } from "@agent-native/core/client/org";
+import {
+  getDefaultMcpIntegrations,
+  McpIntegrationLogo,
+} from "@agent-native/core/client/resources";
 import {
   IconCheck,
   IconChevronDown,
@@ -80,7 +84,6 @@ import {
   isSourceLocallyConfigured,
   shouldOfferWorkspaceOAuthReconnect,
   shouldShowWorkspaceOAuthAdminNotice,
-  shouldShowWorkspaceOAuthSetup,
   credentialRowsFromStatus,
   type DataSourceStatusResponse,
   type EnvKeyStatus,
@@ -149,6 +152,39 @@ const firstPartyAnalyticsEndpoint =
     .VITE_AGENT_NATIVE_ANALYTICS_ENDPOINT ||
   "https://analytics.agent-native.com/track";
 
+const MCP_INTEGRATIONS_BY_ID = new Map(
+  getDefaultMcpIntegrations().map((integration) => [
+    integration.id,
+    integration,
+  ]),
+);
+
+const DATA_SOURCE_LOGO_IDS: Record<string, string> = {
+  "google-analytics": "google-workspace",
+  bigquery: "google-workspace",
+  "google-cloud": "google-workspace",
+  jira: "atlassian",
+};
+
+function DataSourceLogo({ source }: { source: DataSource }) {
+  const integration = MCP_INTEGRATIONS_BY_ID.get(
+    DATA_SOURCE_LOGO_IDS[source.id] ?? source.id,
+  );
+  if (!integration?.logoUrl) {
+    const Icon = source.icon;
+    return <Icon className="h-5 w-5" />;
+  }
+  return (
+    <McpIntegrationLogo
+      name={source.name}
+      logoUrl={integration.logoUrl}
+      integrationId={integration.id}
+      className="size-8 rounded-md border-0 bg-transparent"
+      imageClassName="size-full p-0.5"
+    />
+  );
+}
+
 async function saveEnvVars(
   vars: Array<{ key: string; value: string }>,
 ): Promise<void> {
@@ -415,7 +451,7 @@ function GitHubOAuthView({
     status?.viewer?.name || status?.viewer?.login || status?.viewer?.email;
 
   return (
-    <div className="space-y-3 rounded-md border border-border/50 bg-muted/20 p-3">
+    <div className="space-y-3 rounded-md bg-muted/30 p-3">
       <div className="flex items-start justify-between gap-3">
         <div className="flex items-start gap-3">
           <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-background text-muted-foreground">
@@ -514,7 +550,7 @@ function WorkspaceOAuthView({
   const t = useT();
 
   return (
-    <div className="space-y-3 rounded-md border border-border/50 bg-muted/20 p-3">
+    <div className="space-y-3 rounded-md bg-muted/30 p-3">
       <div className="flex items-start justify-between gap-3">
         <div className="flex items-start gap-3">
           <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-background text-muted-foreground">
@@ -550,7 +586,7 @@ function GoogleSheetsExportCard({
   const connected = connection?.grantState === "connected";
 
   return (
-    <Card className="data-source-card bg-card border-border/50">
+    <Card className="data-source-card rounded-xl border-0 bg-muted/35 shadow-none">
       <CardContent className="space-y-4 p-5">
         <div className="flex items-start justify-between gap-4">
           <div className="flex min-w-0 items-start gap-3">
@@ -617,7 +653,7 @@ function SharedConnectionStatusRow({
           : t("dataSources.sharedFallback");
 
   return (
-    <div className="mb-4 flex items-start justify-between gap-3 rounded-md border border-border/50 bg-muted/20 p-3">
+    <div className="mb-4 flex items-start justify-between gap-3 rounded-md bg-muted/30 p-3">
       <div className="min-w-0 space-y-1">
         <div className="flex flex-wrap items-center gap-2">
           <p className="text-xs font-medium text-foreground">
@@ -1125,7 +1161,7 @@ function ConnectedView({
               })}
             </AlertDialogDescription>
           </AlertDialogHeader>
-          <div className="rounded-md border border-border/60 bg-muted/30 p-3 text-xs text-muted-foreground">
+          <div className="rounded-md bg-muted/30 p-3 text-xs text-muted-foreground">
             {t("dataSources.sharedCredentials", {
               credentials: sharedCredentialKeys
                 .map((key) => keyLabels[key] || key)
@@ -1202,7 +1238,6 @@ function DataSourceCard({
     },
   });
 
-  const Icon = source.icon;
   const hasInputValues = Object.values(inputValues).some((v) => v.trim());
   const readyViaWorkspace = sharedConnectionStatus?.kind === "ready";
   const showCredentialSetup =
@@ -1225,23 +1260,23 @@ function DataSourceCard({
   return (
     <Card
       id={`data-source-${source.id}`}
-      className="data-source-card bg-card border-border/50"
+      className="data-source-card rounded-xl border-0 bg-muted/35 shadow-none"
     >
       <button
         onClick={() => setExpanded(!expanded)}
         className="w-full rounded-t-lg text-left focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring/50"
       >
-        <CardHeader className="p-5">
-          <div className="flex items-center justify-between gap-6">
+        <CardHeader className="p-3.5">
+          <div className="flex items-center justify-between gap-4">
             <div className="flex min-w-0 items-center gap-3">
-              <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
-                <Icon className="h-5 w-5" />
+              <div className="flex size-8 shrink-0 items-center justify-center rounded-md bg-background/80 text-primary">
+                <DataSourceLogo source={source} />
               </div>
               <div className="min-w-0">
                 <CardTitle className="text-sm font-medium">
                   {source.name}
                 </CardTitle>
-                <CardDescription className="mt-0.5 line-clamp-2 text-xs">
+                <CardDescription className="mt-0.5 line-clamp-1 text-xs">
                   {source.description}
                 </CardDescription>
               </div>
@@ -1267,11 +1302,11 @@ function DataSourceCard({
                   {t("dataSources.notConfigured")}
                 </span>
               )}
-              {!isStatusLoading && !statusUnknown && sharedConnectionStatus && (
-                <span className="data-source-shared-badge">
-                  <SharedConnectionBadge status={sharedConnectionStatus} />
-                </span>
-              )}
+              <span className="hidden text-xs font-medium text-foreground/70 sm:inline">
+                {ready
+                  ? t("dataSources.editCredentials")
+                  : t("dataSources.connect")}
+              </span>
               {expanded ? (
                 <IconChevronUp className="h-4 w-4 text-muted-foreground" />
               ) : (
@@ -1283,7 +1318,7 @@ function DataSourceCard({
       </button>
 
       {expanded && showUnknownStatus && (
-        <CardContent className="border-t border-border/50 px-5 py-4">
+        <CardContent className="px-5 py-4">
           <div className="space-y-3">
             <p className="flex items-start gap-2 text-xs text-muted-foreground">
               <IconAlertCircle className="mt-px h-3.5 w-3.5 shrink-0 text-amber-500" />
@@ -1302,9 +1337,9 @@ function DataSourceCard({
       )}
 
       {expanded && !showUnknownStatus && (
-        <CardContent className="border-t border-border/50 px-5 py-4">
+        <CardContent className="px-5 py-4">
           {focused && ready && showAskContinuation && (
-            <div className="mb-4 flex flex-wrap items-center justify-between gap-3 rounded-md border border-emerald-500/30 bg-emerald-500/10 p-3">
+            <div className="mb-4 flex flex-wrap items-center justify-between gap-3 rounded-md bg-emerald-500/10 p-3">
               <span className="flex items-center gap-2 text-xs font-medium text-emerald-600 dark:text-emerald-400">
                 <IconCheck className="h-3.5 w-3.5" />
                 {t("dataSources.connectionSuccessful")}
@@ -1322,20 +1357,6 @@ function DataSourceCard({
               />
             </div>
           )}
-          {shouldShowWorkspaceOAuthSetup(
-            source,
-            sharedConnectionStatus,
-            canManageOrg,
-          ) && (
-            <div className="mb-4">
-              <WorkspaceOAuthView
-                provider={source.id}
-                label={source.name}
-                connected={sharedConnectionStatus?.kind === "needs_grant"}
-                returnPath={oauthReturnPath}
-              />
-            </div>
-          )}
           {shouldShowWorkspaceOAuthAdminNotice(
             source,
             ready,
@@ -1343,7 +1364,7 @@ function DataSourceCard({
             orgLoaded,
             hasOrg,
           ) && (
-            <div className="mb-4 rounded-md border border-border/50 bg-muted/20 p-3">
+            <div className="mb-4 rounded-md bg-muted/30 p-3">
               <div className="flex items-start gap-3">
                 <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-background text-muted-foreground">
                   <IconPlugConnected className="h-4 w-4" />
@@ -1383,6 +1404,13 @@ function DataSourceCard({
             />
           ) : workspaceRoleLoading ? (
             <Skeleton className="h-9 w-full rounded-md" />
+          ) : preferWorkspaceSetup && canManageOrg ? (
+            <WorkspaceOAuthView
+              provider={source.id}
+              label={source.name}
+              connected={sharedConnectionStatus?.kind === "needs_grant"}
+              returnPath={oauthReturnPath}
+            />
           ) : preferWorkspaceSetup ? (
             <Button
               size="sm"
@@ -1390,7 +1418,9 @@ function DataSourceCard({
               onClick={() => setShowLocalCredentials(true)}
               className="text-xs"
             >
-              {t("dataSources.addLocalCredentials")}
+              {t("dataSources.useKeyJustInThisApp" /* i18n-key-ignore */, {
+                defaultValue: "Use a key just in this app",
+              })}
             </Button>
           ) : (
             <>
@@ -1483,7 +1513,7 @@ function DataSourceCard({
                 );
               })()}
 
-              <div className="flex items-center gap-2 border-t border-border/30 pt-3">
+              <div className="flex items-center gap-2 pt-1">
                 {hasInputValues && (
                   <Button
                     size="sm"
@@ -1672,7 +1702,7 @@ function FirstPartyAnalyticsCard() {
   };
 
   return (
-    <Card className="data-source-card bg-card border-border/50">
+    <Card className="data-source-card rounded-xl border-0 bg-muted/35 shadow-none">
       <button
         onClick={() => setExpanded(!expanded)}
         className="w-full rounded-t-lg text-left focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring/50"
@@ -1729,16 +1759,14 @@ function FirstPartyAnalyticsCard() {
       </button>
 
       {expanded && (
-        <CardContent className="border-t border-border/50 px-5 py-4">
+        <CardContent className="px-5 py-4">
           <div className="space-y-4">
             {isHealthLoading ? (
               <Skeleton className="h-28 w-full rounded-md" />
             ) : (
               <div
-                className={`rounded-md border p-3 text-xs ${
-                  recommendsExternalBackend
-                    ? "border-amber-500/30 bg-amber-500/10"
-                    : "border-border/50 bg-muted/20"
+                className={`rounded-md p-3 text-xs ${
+                  recommendsExternalBackend ? "bg-amber-500/10" : "bg-muted/30"
                 }`}
               >
                 <div className="flex items-start justify-between gap-3">
@@ -1763,7 +1791,7 @@ function FirstPartyAnalyticsCard() {
                   </div>
                 </div>
                 {externalBackends.length > 0 && (
-                  <div className="mt-3 border-t border-border/30 pt-3">
+                  <div className="mt-4">
                     <div className="mb-2 text-muted-foreground">
                       {t("analyticsBackend.options")}
                     </div>
@@ -1797,7 +1825,7 @@ function FirstPartyAnalyticsCard() {
                   </div>
                 )}
                 {health && healthStatus !== "unavailable" && (
-                  <div className="mt-3 grid grid-cols-3 gap-2 border-t border-border/30 pt-3">
+                  <div className="mt-4 grid grid-cols-3 gap-2">
                     <div>
                       <div className="text-muted-foreground">
                         {t("dataSources.analyticsEventCount")}
@@ -1830,7 +1858,7 @@ function FirstPartyAnalyticsCard() {
                 )}
               </div>
             )}
-            <div className="grid gap-2 rounded-md border border-border/50 bg-muted/20 p-3 text-xs">
+            <div className="grid gap-2 rounded-md bg-muted/30 p-3 text-xs">
               <div className="flex items-center justify-between gap-3">
                 <span className="text-muted-foreground">
                   {t("dataSources.endpoint")}
@@ -1860,7 +1888,7 @@ function FirstPartyAnalyticsCard() {
             {/* Error capture note — the analytics SDK also captures uncaught
                 exceptions and links them to session replays. Static English
                 copy because shared i18n is owned elsewhere. */}
-            <div className="rounded-md border border-border/50 bg-muted/20 p-3 text-xs">
+            <div className="rounded-md bg-muted/30 p-3 text-xs">
               <div className="font-medium text-foreground">
                 Error capture{/* i18n-ignore static SDK docs label */}
               </div>
@@ -1916,7 +1944,7 @@ function FirstPartyAnalyticsCard() {
             </div>
 
             {createdKey && (
-              <div className="space-y-2 rounded-md border border-emerald-500/30 bg-emerald-500/10 p-3">
+              <div className="space-y-2 rounded-md bg-emerald-500/10 p-3">
                 <p className="text-xs font-medium text-emerald-600 dark:text-emerald-400">
                   {t("dataSources.newKeyGenerated")}
                 </p>
@@ -1943,7 +1971,7 @@ function FirstPartyAnalyticsCard() {
             )}
 
             {keys.length > 0 && (
-              <div className="space-y-2 border-t border-border/30 pt-3">
+              <div className="space-y-2 pt-1">
                 {keys.map((key) => (
                   <div
                     key={key.id}
@@ -2108,7 +2136,7 @@ export default function DataSources() {
       {unknownFocusedSourceId && (
         <div
           role="status"
-          className="flex items-start gap-2 rounded-md border border-amber-500/30 bg-amber-500/10 p-3 text-sm text-amber-700 dark:text-amber-300"
+          className="flex items-start gap-2 rounded-md bg-amber-500/10 p-3 text-sm text-amber-700 dark:text-amber-300"
         >
           <IconAlertCircle className="mt-0.5 h-4 w-4 shrink-0" />
           <span>

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

@@ -1777,6 +1777,7 @@ function SqlDashboardPageContent({
           <ShareButton
             resourceType="dashboard"
             resourceId={dashboardId}
+            allowedRoles={["viewer", "editor", "admin"]}
             resourceTitle={dashboard.name}
             variant="compact"
             triggerClassName="border-0 bg-accent text-accent-foreground hover:bg-accent/80 hover:text-accent-foreground"

package/corpus/templates/analytics/app/pages/analyses/AnalysisDetail.tsx

@@ -188,6 +188,7 @@ export default function AnalysisDetail() {
         <ShareButton
           resourceType="analysis"
           resourceId={analysis.id}
+          allowedRoles={["viewer", "editor", "admin"]}
           resourceTitle={analysis.name}
           variant="compact"
           shareUrl={analysisShareUrl}

package/corpus/templates/analytics/changelog/2026-08-12-analytics-sidebar-ask-toggle-and-compact-rail.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-08-12
+---
+
+Ask now toggles chat history directly, and the collapsed sidebar uses a more compact navigation rhythm.

package/corpus/templates/analytics/changelog/2026-08-12-data-source-statuses-now-distinguish-workspace-access-from-c.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-08-12
+---
+
+Data source statuses now distinguish workspace access from credentials configured in Analytics.