@agent-native/core 0.120.1 → 0.120.3

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

@@ -11,7 +11,6 @@ import {
   IconGripVertical,
   IconBook2,
   IconDatabase,
-  IconReportAnalytics,
   IconSearch,
   IconArchive,
   IconActivity,
@@ -27,6 +26,7 @@ import {
   IconPlayerPlay,
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarLeftExpand,
+  IconArrowUpRight,
 } from "@tabler/icons-react";
 import {
   useQuery,
@@ -62,7 +62,8 @@ type SidebarDashboard = {
   id: string;
   name: string;
   subviews?: DashboardSubview[];
-  source: "static" | "sql";
+  source: "static" | "sql" | "analysis";
+  resourceId?: string;
   visibility?: Visibility;
   /** Id of the dashboard this one nests under in the sidebar, if any. */
   parentId?: string;
@@ -88,15 +89,16 @@ import {
 } from "@agent-native/core/client/agent-chat";
 import { appApiPath, appPath } from "@agent-native/core/client/api-path";
 import { DevDatabaseLink } from "@agent-native/core/client/db-admin";
-import { ExtensionsSidebarSection } from "@agent-native/core/client/extensions";
 import {
   callAction,
   useActionMutation,
   useChangeVersions,
 } from "@agent-native/core/client/hooks";
 import { LanguagePicker, useT } from "@agent-native/core/client/i18n";
+import { openCommandMenu } from "@agent-native/core/client/navigation";
 import { OrgSwitcher } from "@agent-native/core/client/org";
 import { FeedbackButton } from "@agent-native/core/client/ui";
+import { SidebarFooterActions } from "@agent-native/toolkit/app-shell";
 import {
   ChatHistoryRail,
   type ChatHistoryItem,
@@ -143,24 +145,18 @@ import { useUserPref } from "@/hooks/use-user-pref";
 import { shouldRenderDashboardList } from "@/lib/dashboard-list-loading";
 import { usePopularity, popularityOf } from "@/lib/item-popularity";
 import {
-  analysisDetailPrefetchKey,
   sqlDashboardPrefetchKey,
   type PrefetchSnapshot,
 } from "@/lib/prefetch-keys";
 import type { ResourceAccess } from "@/lib/resource-access";
 
-import { NewAnalysisDialog } from "./NewAnalysisDialog";
 import { NewDashboardDialog } from "./NewDashboardDialog";
 import { SidebarLoadError } from "./SidebarLoadError";
 
-type AnalysisHiddenFilter = "visible" | "hidden";
-
 const SIDEBAR_PREVIEW_COUNT = 5;
 const ASK_OPEN_KEY = "analytics-sidebar-ask-open";
 const DASHBOARD_SORT_MODE_KEY = "dashboard-sort-mode";
-const ANALYSIS_SORT_MODE_KEY = "analysis-sort-mode";
 const DASHBOARDS_OPEN_KEY = "analytics-sidebar-dashboards-open";
-const ANALYSES_OPEN_KEY = "analytics-sidebar-analyses-open";
 const SIDEBAR_COLLAPSE_KEY = "analytics.sidebar.collapsed";
 const SIDEBAR_SKELETON_CLASS =
   "bg-sidebar-foreground/12 dark:bg-sidebar-foreground/10";
@@ -191,6 +187,7 @@ const bottomItems = [
     icon: IconHierarchy2,
     labelKey: "settings.agentTitle",
     href: "/agent",
+    showExternalLinkIcon: true,
   },
   { icon: IconSettings, labelKey: "navigation.settings", href: "/settings" },
 ];
@@ -867,7 +864,10 @@ function SortableDashboardItem({
     visibility: Visibility,
   ) => Promise<void>;
 }) {
-  const href = `/dashboards/${d.id}`;
+  const resourceId = d.resourceId ?? d.id;
+  const href =
+    d.source === "analysis" ? `/analyses/${resourceId}` : `/dashboards/${d.id}`;
+  const favoriteKey = d.source === "analysis" ? `analysis:${resourceId}` : d.id;
   const t = useT();
   const { mutateAsync: deleteView } = useDeleteDashboardView();
   const [deletingViewId, setDeletingViewId] = useState<string | null>(null);
@@ -908,7 +908,7 @@ function SortableDashboardItem({
   return (
     <SortableRow
       id={d.id}
-      favoriteKey={d.id}
+      favoriteKey={favoriteKey}
       name={d.name}
       href={href}
       isActive={isActive}
@@ -916,7 +916,9 @@ function SortableDashboardItem({
       onToggleFavorite={onToggleFavorite}
       onDelete={() => onDelete(d)}
       onRename={(name) => onRename(d, name)}
-      onArchive={onArchive ? () => onArchive(d) : undefined}
+      onArchive={
+        d.source === "analysis" || !onArchive ? undefined : () => onArchive(d)
+      }
       onPrefetch={() => onPrefetch?.(d)}
       visibility={d.visibility}
       onSetVisibility={
@@ -1068,33 +1070,6 @@ function SortableDashboardItem({
   );
 }
 
-// Analyses reuse SortableRow directly — no wrapper component needed.
-
-const ANALYSIS_ORDER_KEY = "analysis-order";
-
-function getAnalysisOrder(): string[] {
-  if (typeof window === "undefined") return [];
-  try {
-    const raw = window.localStorage.getItem(ANALYSIS_ORDER_KEY);
-    if (!raw) return [];
-    const parsed = JSON.parse(raw);
-    return Array.isArray(parsed)
-      ? parsed.filter((x) => typeof x === "string")
-      : [];
-  } catch {
-    return [];
-  }
-}
-
-function setAnalysisOrder(order: string[]): void {
-  if (typeof window === "undefined") return;
-  try {
-    window.localStorage.setItem(ANALYSIS_ORDER_KEY, JSON.stringify(order));
-  } catch {
-    // localStorage unavailable / quota — ignore, order is best-effort
-  }
-}
-
 const STATIC_DASHBOARD_RENAMES_KEY = "dashboard-name-overrides";
 
 function getStaticDashboardRenames(): Record<string, string> {
@@ -1161,10 +1136,7 @@ async function fetchSqlDashboards(
     }));
 }
 
-async function fetchSidebarAnalyses(
-  t: (key: string) => string,
-  hidden: AnalysisHiddenFilter = "visible",
-): Promise<
+async function fetchSidebarAnalyses(t: (key: string) => string): Promise<
   {
     id: string;
     name: string;
@@ -1172,13 +1144,7 @@ async function fetchSidebarAnalyses(
     hiddenAt: string | null;
   }[]
 > {
-  const rows = await callAction(
-    "list-analyses",
-    {
-      ...(hidden === "hidden" ? { hidden: "hidden" } : {}),
-    } as Record<string, unknown>,
-    { method: "GET" },
-  );
+  const rows = await callAction("list-analyses", {}, { method: "GET" });
   return (Array.isArray(rows) ? rows : [])
     .filter((a: any) => a && typeof a.id === "string" && a.id.length > 0)
     .map((a: any) => ({
@@ -1256,16 +1222,6 @@ async function fetchSqlDashboardForPrefetch(
   }
 }
 
-async function fetchAnalysisDetailForPrefetch(id: string): Promise<unknown> {
-  try {
-    const data = await callAction("get-analysis", { id }, { method: "GET" });
-    if (!data || (data as Record<string, unknown>).error) return null;
-    return data;
-  } catch {
-    return null;
-  }
-}
-
 const ANALYTICS_ACTIVE_THREAD_KEY = `agent-chat-active-thread:${ANALYTICS_CHAT_STORAGE_KEY}`;
 
 function formatThreadAge(updatedAt: number) {
@@ -1311,7 +1267,13 @@ function persistedAnalyticsThreadId() {
   }
 }
 
-function AnalyticsChatsSection({ isAskRoute }: { isAskRoute: boolean }) {
+function AnalyticsChatsSection({
+  isAskRoute,
+  open,
+}: {
+  isAskRoute: boolean;
+  open: boolean;
+}) {
   const navigate = useNavigate();
   const t = useT();
   const {
@@ -1413,57 +1375,63 @@ function AnalyticsChatsSection({ isAskRoute }: { isAskRoute: boolean }) {
   }
 
   return (
-    <div className="ms-4 min-w-0 space-y-0.5">
-      {chatsLoading &&
-        visibleThreads.length === 0 &&
-        Array.from({ length: 3 }).map((_, i) => (
-          <div
-            key={`chat-skeleton-${i}`}
-            className="flex items-center gap-2 px-3 py-1"
-          >
-            <Skeleton
-              className={cn(
-                "h-3.5 w-3.5 shrink-0 rounded-sm",
-                SIDEBAR_SKELETON_CLASS,
-              )}
-            />
-            <Skeleton
-              className={cn("h-3 rounded", SIDEBAR_SKELETON_CLASS)}
-              style={{ width: `${60 + ((i * 17) % 30)}%` }}
-            />
-          </div>
-        ))}
-      <ChatHistoryRail
-        items={chatItems}
-        activeId={displayedActiveThreadId}
-        onSelect={(threadId) => openThread(threadId)}
-        onNewChat={() => void handleNewChat()}
-        railLabels={{
-          newChat: t("chat.newChat"),
-          showMore: t("sidebar.showMore", {
-            count: Math.max(0, visibleThreads.length - SIDEBAR_PREVIEW_COUNT),
-          }),
-          showLess: t("sidebar.showLess"),
-        }}
-        renameMaxLength={160}
-        onTogglePin={(threadId) => {
-          const thread = visibleThreads.find((item) => item.id === threadId);
-          if (thread) void pinThread(threadId, !thread.pinnedAt);
-        }}
-        onRename={handleRenameThread}
-        onDelete={(threadId) => void handleArchiveThread(threadId)}
-        labels={{
-          options: (item) =>
-            t("chat.optionsFor", { title: item.titleText ?? "" }),
-          renameInput: (item) =>
-            t("chat.renameThread", { title: item.titleText ?? "" }),
-          rename: t("chat.renameChat"),
-          pin: t("chat.pinChat"),
-          unpin: t("chat.unpinChat"),
-          delete: t("chat.archiveChat"),
-        }}
-        className="min-w-0"
-      />
+    <div
+      className="an-chat-history-rail__collapse"
+      data-state={open ? "open" : "closed"}
+      aria-hidden={!open}
+    >
+      <div className="ms-4 min-w-0 space-y-0.5">
+        {chatsLoading &&
+          visibleThreads.length === 0 &&
+          Array.from({ length: 3 }).map((_, i) => (
+            <div
+              key={`chat-skeleton-${i}`}
+              className="flex items-center gap-2 px-3 py-1"
+            >
+              <Skeleton
+                className={cn(
+                  "h-3.5 w-3.5 shrink-0 rounded-sm",
+                  SIDEBAR_SKELETON_CLASS,
+                )}
+              />
+              <Skeleton
+                className={cn("h-3 rounded", SIDEBAR_SKELETON_CLASS)}
+                style={{ width: `${60 + ((i * 17) % 30)}%` }}
+              />
+            </div>
+          ))}
+        <ChatHistoryRail
+          items={chatItems}
+          activeId={displayedActiveThreadId}
+          onSelect={(threadId) => openThread(threadId)}
+          onNewChat={() => void handleNewChat()}
+          railLabels={{
+            newChat: t("chat.newChat"),
+            showMore: t("sidebar.showMore", {
+              count: Math.max(0, visibleThreads.length - SIDEBAR_PREVIEW_COUNT),
+            }),
+            showLess: t("sidebar.showLess"),
+          }}
+          renameMaxLength={160}
+          onTogglePin={(threadId) => {
+            const thread = visibleThreads.find((item) => item.id === threadId);
+            if (thread) void pinThread(threadId, !thread.pinnedAt);
+          }}
+          onRename={handleRenameThread}
+          onDelete={(threadId) => void handleArchiveThread(threadId)}
+          labels={{
+            options: (item) =>
+              t("chat.optionsFor", { title: item.titleText ?? "" }),
+            renameInput: (item) =>
+              t("chat.renameThread", { title: item.titleText ?? "" }),
+            rename: t("chat.renameChat"),
+            pin: t("chat.pinChat"),
+            unpin: t("chat.unpinChat"),
+            delete: t("chat.archiveChat"),
+          }}
+          className="min-w-0"
+        />
+      </div>
     </div>
   );
 }
@@ -1510,20 +1478,8 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
   );
   const [dashShowAll, setDashShowAll] = useState(false);
   const [dashFilter, setDashFilter] = useState<SidebarVisibilityFilter>("all");
-  const [analysesOpen, setAnalysesOpen] = useState(
-    () =>
-      getStoredBooleanPreference(ANALYSES_OPEN_KEY) ??
-      activeAnalysisId !== null,
-  );
-  const [analysesShowAll, setAnalysesShowAll] = useState(false);
-  const [analysisFilter, setAnalysisFilter] =
-    useState<SidebarVisibilityFilter>("all");
-  const [analysisHiddenFilter, setAnalysisHiddenFilter] =
-    useState<AnalysisHiddenFilter>("visible");
   const [dashboardSortMode, setDashboardSortModeState] =
     useState<SidebarSortMode>(() => getStoredSortMode(DASHBOARD_SORT_MODE_KEY));
-  const [analysisSortMode, setAnalysisSortModeState] =
-    useState<SidebarSortMode>(() => getStoredSortMode(ANALYSIS_SORT_MODE_KEY));
   const { data: popularity, isReady: popularityReady } = usePopularity();
 
   useEffect(() => {
@@ -1542,7 +1498,6 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
   const { mutateAsync: renameDashboard } =
     useActionMutation("rename-dashboard");
   const { mutateAsync: renameAnalysis } = useActionMutation("rename-analysis");
-  const { mutateAsync: hideAnalysisMut } = useActionMutation("hide-analysis");
   const { mutateAsync: setResourceVisibility } = useActionMutation(
     "set-resource-visibility",
   );
@@ -1580,10 +1535,6 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
   const [dashboardOrderState, setDashboardOrderState] = useState(() =>
     typeof window === "undefined" ? [] : getDashboardOrder(),
   );
-  const [analysisOrderState, setAnalysisOrderState] = useState(() =>
-    typeof window === "undefined" ? [] : getAnalysisOrder(),
-  );
-
   // Server-backed favorites
   const {
     data: favoritesData,
@@ -1614,11 +1565,6 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
     setDashboardSortModeState(mode);
   }, []);
 
-  const setAnalysisSortMode = useCallback((mode: SidebarSortMode) => {
-    setStoredSortMode(ANALYSIS_SORT_MODE_KEY, mode);
-    setAnalysisSortModeState(mode);
-  }, []);
-
   useEffect(() => {
     if (getStoredBooleanPreference(ASK_OPEN_KEY) === null) {
       setAskOpen(isAskRoute);
@@ -1631,12 +1577,6 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
     }
   }, [activeDashboardId]);
 
-  useEffect(() => {
-    if (getStoredBooleanPreference(ANALYSES_OPEN_KEY) === null) {
-      setAnalysesOpen(activeAnalysisId !== null);
-    }
-  }, [activeAnalysisId]);
-
   const toggleAskOpen = useCallback(() => {
     setAskOpen((current) => {
       const next = !current;
@@ -1653,14 +1593,6 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
     });
   }, []);
 
-  const toggleAnalysesOpen = useCallback(() => {
-    setAnalysesOpen((current) => {
-      const next = !current;
-      setStoredBoolean(ANALYSES_OPEN_KEY, next);
-      return next;
-    });
-  }, []);
-
   // 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`
@@ -1671,9 +1603,7 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
   );
   const analysesSync = useSettledSyncVersion(useChangeVersions(["analyses"]));
   const dashboardsSyncRef = useRef(dashboardsSync);
-  const analysesSyncRef = useRef(analysesSync);
   dashboardsSyncRef.current = dashboardsSync;
-  analysesSyncRef.current = analysesSync;
 
   const {
     data: sqlDashboards = [],
@@ -1694,52 +1624,12 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
     isError: analysesError,
     refetch: refetchAnalyses,
   } = useQuery({
-    queryKey: ["analyses-sidebar", analysesSync, analysisHiddenFilter],
-    queryFn: () => fetchSidebarAnalyses(t, analysisHiddenFilter),
+    queryKey: ["analyses-sidebar", analysesSync],
+    queryFn: () => fetchSidebarAnalyses(t),
     staleTime: 30_000,
     placeholderData: (prev) => prev,
   });
 
-  const sortedAnalyses = useMemo(() => {
-    if (analysisSortMode === "alphabetical") {
-      return sortByName(analysesList);
-    }
-    if (analysisSortMode === "manual" && analysisOrderState.length > 0) {
-      return applyOrder(analysesList, analysisOrderState);
-    }
-    return [...analysesList].sort((a, b) => {
-      const aFav = favoriteIds.has(`analysis:${a.id}`) ? 0 : 1;
-      const bFav = favoriteIds.has(`analysis:${b.id}`) ? 0 : 1;
-      if (aFav !== bFav) return aFav - bFav;
-      const aPop = popularityOf(popularity, "analysis", a.id);
-      const bPop = popularityOf(popularity, "analysis", b.id);
-      if (aPop !== bPop) return bPop - aPop;
-      return a.name.localeCompare(b.name);
-    });
-  }, [
-    analysesList,
-    analysisSortMode,
-    analysisOrderState,
-    popularity,
-    favoriteIds,
-  ]);
-
-  const filteredAnalyses = useMemo(
-    () =>
-      sortedAnalyses.filter((analysis) =>
-        matchesVisibilityFilter(analysis, analysisFilter),
-      ),
-    [sortedAnalyses, analysisFilter],
-  );
-
-  const displayedAnalyses = useMemo(
-    () =>
-      analysesShowAll
-        ? filteredAnalyses
-        : filteredAnalyses.slice(0, SIDEBAR_PREVIEW_COUNT),
-    [filteredAnalyses, analysesShowAll],
-  );
-
   // Only the active dashboard can display saved views in the sidebar, so avoid
   // issuing one request per dashboard on every sidebar mount.
   const { views: activeDashboardViews = [] } = useDashboardViews(
@@ -1772,24 +1662,6 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
     [dashboardsSync, queryClient, t],
   );
 
-  const prefetchAnalysis = useCallback(
-    (id: string) => {
-      const queryKey = analysisDetailPrefetchKey(id);
-      const cached =
-        queryClient.getQueryData<PrefetchSnapshot<unknown | null>>(queryKey);
-      void import("@/pages/analyses/AnalysisDetail");
-      void queryClient.prefetchQuery({
-        queryKey,
-        queryFn: async () => ({
-          data: await fetchAnalysisDetailForPrefetch(id),
-          syncVersion: analysesSync,
-        }),
-        staleTime: cached?.syncVersion === analysesSync ? 30_000 : 0,
-      });
-    },
-    [analysesSync, queryClient],
-  );
-
   const visibleDashboards = useMemo<SidebarDashboard[]>(() => {
     const staticItems: SidebarDashboard[] = dashboards
       .filter((d) => !hiddenIds.has(d.id))
@@ -1806,7 +1678,14 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
       visibility: d.visibility,
       parentId: d.parentId,
     }));
-    const all = [...staticItems, ...sqlItems];
+    const analysisItems: SidebarDashboard[] = analysesList.map((a) => ({
+      id: `analysis:${a.id}`,
+      resourceId: a.id,
+      name: a.name,
+      source: "analysis",
+      visibility: a.visibility,
+    }));
+    const all = [...staticItems, ...sqlItems, ...analysisItems];
     if (dashboardSortMode === "alphabetical") {
       return sortByName(all);
     }
@@ -1814,11 +1693,25 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
       return applyOrder(all, dashboardOrderState);
     }
     return [...all].sort((a, b) => {
-      const aFav = favoriteIds.has(a.id) ? 0 : 1;
-      const bFav = favoriteIds.has(b.id) ? 0 : 1;
+      const aResourceId = a.resourceId ?? a.id;
+      const bResourceId = b.resourceId ?? b.id;
+      const aFavoriteKey =
+        a.source === "analysis" ? `analysis:${aResourceId}` : a.id;
+      const bFavoriteKey =
+        b.source === "analysis" ? `analysis:${bResourceId}` : b.id;
+      const aFav = favoriteIds.has(aFavoriteKey) ? 0 : 1;
+      const bFav = favoriteIds.has(bFavoriteKey) ? 0 : 1;
       if (aFav !== bFav) return aFav - bFav;
-      const aPop = popularityOf(popularity, "dashboard", a.id);
-      const bPop = popularityOf(popularity, "dashboard", b.id);
+      const aPop = popularityOf(
+        popularity,
+        a.source === "analysis" ? "analysis" : "dashboard",
+        aResourceId,
+      );
+      const bPop = popularityOf(
+        popularity,
+        b.source === "analysis" ? "analysis" : "dashboard",
+        bResourceId,
+      );
       if (aPop !== bPop) return bPop - aPop;
       return a.name.localeCompare(b.name) || a.id.localeCompare(b.id);
     });
@@ -1829,6 +1722,7 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
     dashboardSortMode,
     dashboardOrderState,
     sqlDashboards,
+    analysesList,
     popularity,
   ]);
 
@@ -1905,6 +1799,12 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
 
   const handleDashboardDelete = useCallback(
     async (d: SidebarDashboard) => {
+      if (d.source === "analysis") {
+        await deleteAnalysisMut({ id: d.resourceId ?? d.id });
+        queryClient.invalidateQueries({ queryKey: ["analyses-sidebar"] });
+        queryClient.invalidateQueries({ queryKey: ["analyses-list"] });
+        return;
+      }
       if (d.source === "static") {
         hideDashboard(d.id);
         setHiddenIds(getHiddenDashboards());
@@ -1931,11 +1831,12 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
         throw err;
       }
     },
-    [queryClient, deleteSqlDashboard],
+    [deleteAnalysisMut, deleteSqlDashboard, queryClient],
   );
 
   const handleDashboardArchive = useCallback(
     async (d: SidebarDashboard) => {
+      if (d.source === "analysis") return;
       if (d.source === "static") {
         // Static dashboards can only be hidden, not archived; route to delete
         // (which calls hideDashboard for static items).
@@ -1970,6 +1871,16 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
       const trimmed = name.trim();
       if (!trimmed || trimmed === d.name) return;
 
+      if (d.source === "analysis") {
+        await renameAnalysis({ id: d.resourceId ?? d.id, name: trimmed });
+        queryClient.invalidateQueries({ queryKey: ["analyses-sidebar"] });
+        queryClient.invalidateQueries({ queryKey: ["analyses-list"] });
+        queryClient.invalidateQueries({
+          queryKey: ["analysis-detail", d.resourceId ?? d.id],
+        });
+        return;
+      }
+
       if (d.source === "static") {
         setStaticDashboardRenamesState((prev) => {
           const next = { ...prev, [d.id]: trimmed };
@@ -2001,38 +1912,27 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
         throw err;
       }
     },
-    [queryClient, renameDashboard],
-  );
-
-  const handleAnalysisDelete = useCallback(
-    async (a: { id: string; name: string }) => {
-      const queryKey = ["analyses-sidebar"] as const;
-      const prev = getQuerySnapshots<{ id: string; name: string }[]>(
-        queryClient,
-        queryKey,
-      );
-      queryClient.setQueriesData<{ id: string; name: string }[]>(
-        { queryKey },
-        (old) => (old ?? []).filter((item) => item.id !== a.id),
-      );
-      try {
-        await deleteAnalysisMut({ id: a.id });
-        queryClient.removeQueries({
-          queryKey: analysisDetailPrefetchKey(a.id),
-        });
-        queryClient.invalidateQueries({ queryKey });
-        queryClient.invalidateQueries({ queryKey: ["analyses-list"] });
-      } catch (err) {
-        restoreQuerySnapshots(queryClient, prev);
-        throw err;
-      }
-    },
-    [queryClient, deleteAnalysisMut],
+    [queryClient, renameAnalysis, renameDashboard],
   );
 
   const handleDashboardSetVisibility = useCallback(
     async (d: SidebarDashboard, visibility: Visibility) => {
       if (d.source === "static") return;
+      if (d.source === "analysis") {
+        await setResourceVisibility({
+          resourceType: "analysis",
+          resourceId: d.resourceId ?? d.id,
+          visibility,
+        } as any);
+        queryClient.invalidateQueries({ queryKey: ["analyses-sidebar"] });
+        queryClient.invalidateQueries({ queryKey: ["analyses-list"] });
+        toast.success(
+          visibility === "org"
+            ? t("sidebar.nameSharedWithOrg", { name: d.name })
+            : t("sidebar.nameMadePrivate", { name: d.name }),
+        );
+        return;
+      }
       const queryKey = [
         "sql-dashboards-sidebar",
         dashboardsSyncRef.current,
@@ -2066,143 +1966,6 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
     [queryClient, setResourceVisibility, t],
   );
 
-  const handleAnalysisSetVisibility = useCallback(
-    async (a: { id: string; name: string }, visibility: Visibility) => {
-      const sidebarKey = ["analyses-sidebar", analysesSyncRef.current] as const;
-      const listKey = ["analyses-list"] as const;
-      const prevSidebar = getQuerySnapshots<
-        { id: string; name: string; visibility?: Visibility }[]
-      >(queryClient, sidebarKey);
-      const prevList = getQuerySnapshots<any[]>(queryClient, listKey);
-      queryClient.setQueriesData<
-        { id: string; name: string; visibility?: Visibility }[]
-      >({ queryKey: sidebarKey }, (old) =>
-        (old ?? []).map((item) =>
-          item.id === a.id ? { ...item, visibility } : item,
-        ),
-      );
-      queryClient.setQueriesData<any[]>({ queryKey: listKey }, (old) =>
-        (old ?? []).map((item) =>
-          item.id === a.id ? { ...item, visibility } : item,
-        ),
-      );
-      try {
-        await setResourceVisibility({
-          resourceType: "analysis",
-          resourceId: a.id,
-          visibility,
-        } as any);
-        queryClient.invalidateQueries({ queryKey: sidebarKey });
-        queryClient.invalidateQueries({ queryKey: listKey });
-        toast.success(
-          visibility === "org"
-            ? t("sidebar.nameSharedWithOrg", { name: a.name })
-            : t("sidebar.nameMadePrivate", { name: a.name }),
-        );
-      } catch (err) {
-        restoreQuerySnapshots(queryClient, prevSidebar);
-        restoreQuerySnapshots(queryClient, prevList);
-        throw err;
-      }
-    },
-    [queryClient, setResourceVisibility, t],
-  );
-
-  const handleAnalysisRename = useCallback(
-    async (a: { id: string; name: string }, name: string) => {
-      const trimmed = name.trim();
-      if (!trimmed || trimmed === a.name) return;
-
-      const sidebarKey = ["analyses-sidebar"] as const;
-      const listKey = ["analyses-list"] as const;
-      const detailKey = ["analysis-detail", a.id] as const;
-      const prevSidebar = getQuerySnapshots<{ id: string; name: string }[]>(
-        queryClient,
-        sidebarKey,
-      );
-      const prevList = getQuerySnapshots<any[]>(queryClient, listKey);
-      const prevDetail = getQuerySnapshots<any>(queryClient, detailKey);
-
-      queryClient.setQueriesData<{ id: string; name: string }[]>(
-        { queryKey: sidebarKey },
-        (old) =>
-          (old ?? []).map((item) =>
-            item.id === a.id ? { ...item, name: trimmed } : item,
-          ),
-      );
-      queryClient.setQueriesData<any[]>({ queryKey: listKey }, (old) =>
-        (old ?? []).map((item) =>
-          item.id === a.id ? { ...item, name: trimmed } : item,
-        ),
-      );
-      queryClient.setQueriesData<any>({ queryKey: detailKey }, (old: any) =>
-        old ? { ...old, name: trimmed } : old,
-      );
-
-      try {
-        await renameAnalysis({ id: a.id, name: trimmed });
-        queryClient.removeQueries({
-          queryKey: analysisDetailPrefetchKey(a.id),
-        });
-        queryClient.invalidateQueries({ queryKey: sidebarKey });
-        queryClient.invalidateQueries({ queryKey: listKey });
-        queryClient.invalidateQueries({ queryKey: detailKey });
-      } catch (err) {
-        restoreQuerySnapshots(queryClient, prevSidebar);
-        restoreQuerySnapshots(queryClient, prevList);
-        restoreQuerySnapshots(queryClient, prevDetail);
-        throw err;
-      }
-    },
-    [queryClient, renameAnalysis],
-  );
-
-  const handleAnalysisHide = useCallback(
-    async (a: { id: string; name: string }) => {
-      const sidebarKey = ["analyses-sidebar"] as const;
-      const prev = getQuerySnapshots<{ id: string }[]>(queryClient, sidebarKey);
-      // Optimistically drop it from the visible list (the hidden-filter
-      // variant is invalidated below to pick it up).
-      queryClient.setQueriesData<{ id: string }[]>(
-        { queryKey: sidebarKey },
-        (old) => (old ?? []).filter((item) => item.id !== a.id),
-      );
-      try {
-        await hideAnalysisMut({ id: a.id, hidden: true });
-        queryClient.invalidateQueries({ queryKey: sidebarKey });
-        queryClient.invalidateQueries({ queryKey: ["analyses-list"] });
-        toast.success(t("sidebar.nameHidden", { name: a.name }));
-      } catch (err) {
-        restoreQuerySnapshots(queryClient, prev);
-        throw err;
-      }
-    },
-    [queryClient, hideAnalysisMut, t],
-  );
-
-  const handleAnalysisUnhide = useCallback(
-    async (a: { id: string; name: string }) => {
-      const sidebarKey = ["analyses-sidebar"] as const;
-      const prev = getQuerySnapshots<{ id: string }[]>(queryClient, sidebarKey);
-      // Optimistically drop it from the hidden list (the visible variant is
-      // invalidated below to pick it up).
-      queryClient.setQueriesData<{ id: string }[]>(
-        { queryKey: sidebarKey },
-        (old) => (old ?? []).filter((item) => item.id !== a.id),
-      );
-      try {
-        await hideAnalysisMut({ id: a.id, hidden: false });
-        queryClient.invalidateQueries({ queryKey: sidebarKey });
-        queryClient.invalidateQueries({ queryKey: ["analyses-list"] });
-        toast.success(t("sidebar.nameUnhidden", { name: a.name }));
-      } catch (err) {
-        restoreQuerySnapshots(queryClient, prev);
-        throw err;
-      }
-    },
-    [queryClient, hideAnalysisMut, t],
-  );
-
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
     useSensor(KeyboardSensor, {
@@ -2226,24 +1989,6 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
     [setDashboardSortMode, dashboardRenderOrderIds],
   );
 
-  const handleAnalysisDragEnd = useCallback(
-    (event: DragEndEvent) => {
-      const { active, over } = event;
-      if (!over || active.id === over.id) return;
-      setAnalysisSortMode("manual");
-      setAnalysisOrderState((prev) => {
-        const ids = prev.length > 0 ? prev : sortedAnalyses.map((a) => a.id);
-        const oldIndex = ids.indexOf(active.id as string);
-        const newIndex = ids.indexOf(over.id as string);
-        if (oldIndex === -1 || newIndex === -1) return prev;
-        const newOrder = arrayMove(ids, oldIndex, newIndex);
-        setAnalysisOrder(newOrder);
-        return newOrder;
-      });
-    },
-    [setAnalysisSortMode, sortedAnalyses],
-  );
-
   const handleResizeStart = useCallback(
     (e: React.MouseEvent) => {
       if (effectiveCollapsed) return;
@@ -2283,7 +2028,8 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
 
   const isAdhocActive =
     location.pathname.startsWith("/adhoc") ||
-    location.pathname.startsWith("/dashboards");
+    location.pathname.startsWith("/dashboards") ||
+    location.pathname.startsWith("/analyses");
 
   useEffect(() => {
     if (typeof window === "undefined") return;
@@ -2322,12 +2068,6 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
       href: "/dashboards",
       active: isAdhocActive,
     },
-    {
-      icon: IconReportAnalytics,
-      label: t("navigation.analyses"),
-      href: "/analyses",
-      active: location.pathname.startsWith("/analyses"),
-    },
     {
       icon: IconPlayerPlay,
       label: t("navigation.sessions"),
@@ -2372,6 +2112,63 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
     },
   ];
 
+  const footerSearch = (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          onClick={openCommandMenu}
+          aria-label={t("sidebar.search")}
+          className="flex h-8 w-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-sidebar-accent/50 hover:text-foreground"
+        >
+          <IconSearch className="h-4 w-4" />
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="top">
+        {t("sidebar.searchShortcut", {
+          shortcut: `${shortcutModifierLabel()}+K`,
+        })}
+      </TooltipContent>
+    </Tooltip>
+  );
+  const footerTranslate = (
+    <LanguagePicker variant="ghost-icon" label={t("settings.languageLabel")} />
+  );
+  const footerCollapse = !mobile ? (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          onClick={() => setSidebarCollapsed(!effectiveCollapsed)}
+          aria-label={
+            effectiveCollapsed
+              ? t("sidebar.expandSidebar")
+              : t("sidebar.collapseSidebar")
+          }
+          className="flex h-8 w-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-sidebar-accent/50 hover:text-foreground"
+        >
+          {effectiveCollapsed ? (
+            <IconLayoutSidebarLeftExpand className="h-4 w-4 rtl:-scale-x-100" />
+          ) : (
+            <IconLayoutSidebarLeftCollapse className="h-4 w-4 rtl:-scale-x-100" />
+          )}
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="top">
+        {effectiveCollapsed
+          ? t("sidebar.expandSidebar")
+          : t("sidebar.collapseSidebar")}
+      </TooltipContent>
+    </Tooltip>
+  ) : null;
+  const footerFeedback = (
+    <FeedbackButton
+      variant={effectiveCollapsed ? "icon" : "sidebar"}
+      side="right"
+      className={effectiveCollapsed ? "h-8 w-8" : "min-w-0"}
+    />
+  );
+
   return (
     <div
       className="relative flex h-full min-w-0 flex-col overflow-hidden border-r border-border bg-sidebar text-sidebar-foreground transition-[width] duration-200 ease-out"
@@ -2387,24 +2184,6 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
       )}
       {effectiveCollapsed ? (
         <>
-          <div className="flex h-12 shrink-0 items-center justify-center border-b border-border px-1">
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <button
-                  type="button"
-                  onClick={() => setSidebarCollapsed(false)}
-                  aria-label={t("sidebar.expandSidebar")}
-                  className="flex h-10 w-10 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-sidebar-accent/50 hover:text-foreground"
-                >
-                  <IconLayoutSidebarLeftExpand className="h-4 w-4 rtl:-scale-x-100" />
-                </button>
-              </TooltipTrigger>
-              <TooltipContent side="right">
-                {t("sidebar.expandSidebar")}
-              </TooltipContent>
-            </Tooltip>
-          </div>
-
           <nav className="flex min-h-0 flex-1 flex-col items-center gap-1 overflow-y-auto px-1 py-2">
             {collapsedNavItems.map((item) => {
               const Icon = item.icon;
@@ -2430,6 +2209,13 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
               );
             })}
           </nav>
+          <SidebarFooterActions
+            collapsed
+            feedback={footerFeedback}
+            translate={footerTranslate}
+            search={footerSearch}
+            collapse={footerCollapse}
+          />
         </>
       ) : (
         <>
@@ -2454,23 +2240,6 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
                 {t("navigation.brand")}
               </span>
             </Link>
-            {!mobile && (
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <button
-                    type="button"
-                    onClick={() => setSidebarCollapsed(true)}
-                    aria-label={t("sidebar.collapseSidebar")}
-                    className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-sidebar-accent/50 hover:text-foreground"
-                  >
-                    <IconLayoutSidebarLeftCollapse className="h-4 w-4 rtl:-scale-x-100" />
-                  </button>
-                </TooltipTrigger>
-                <TooltipContent side="right">
-                  {t("sidebar.collapseSidebar")}
-                </TooltipContent>
-              </Tooltip>
-            )}
           </div>
           <div className="flex min-h-0 flex-1 flex-col overflow-y-auto overflow-x-hidden py-2">
             <nav className="grid min-w-0 items-start px-2 text-sm font-medium lg:px-4 space-y-1">
@@ -2524,7 +2293,9 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
                     />
                   </button>
                 </div>
-                {askOpen && <AnalyticsChatsSection isAskRoute={isAskRoute} />}
+                {askOpen && isAskRoute ? (
+                  <AnalyticsChatsSection isAskRoute open />
+                ) : null}
               </div>
 
               {/* Sessions link */}
@@ -2665,7 +2436,11 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
                               <Fragment key={d.id}>
                                 <SortableDashboardItem
                                   d={d}
-                                  isActive={activeDashboardId === d.id}
+                                  isActive={
+                                    d.source === "analysis"
+                                      ? activeAnalysisId === d.resourceId
+                                      : activeDashboardId === d.id
+                                  }
                                   location={location}
                                   favoriteIds={favoriteIds}
                                   onToggleFavorite={toggleFavorite}
@@ -2683,7 +2458,10 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
                                         key={child.id}
                                         d={child}
                                         isActive={
-                                          activeDashboardId === child.id
+                                          child.source === "analysis"
+                                            ? activeAnalysisId ===
+                                              child.resourceId
+                                            : activeDashboardId === child.id
                                         }
                                         location={location}
                                         favoriteIds={favoriteIds}
@@ -2746,156 +2524,30 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
                             onRetry={() => void refetchSqlDashboards()}
                           />
                         )}
-                        <NewDashboardDialog />
-                      </div>
-                    </SortableContext>
-                  </DndContext>
-                )}
-              </div>
-
-              {/* Analyses section */}
-              <div className="order-3 group/section min-w-0 space-y-1">
-                <div
-                  className={cn(
-                    "flex w-full min-w-0 items-center rounded-lg transition-colors hover:text-primary",
-                    location.pathname.startsWith("/analyses")
-                      ? "text-sidebar-accent-foreground"
-                      : "text-muted-foreground hover:bg-sidebar-accent/50",
-                  )}
-                >
-                  <button
-                    type="button"
-                    onClick={toggleAnalysesOpen}
-                    className="flex min-w-0 flex-1 items-center gap-3 px-3 py-2 text-start"
-                    aria-expanded={analysesOpen}
-                  >
-                    <IconReportAnalytics className="h-4 w-4 shrink-0" />
-                    <span className="min-w-0 flex-1 truncate">
-                      {t("navigation.analyses")}
-                    </span>
-                  </button>
-                  <SidebarSectionSettingsPopover
-                    label={t("navigation.analyses")}
-                    sortMode={analysisSortMode}
-                    onSortModeChange={setAnalysisSortMode}
-                    visibilityFilter={analysisFilter}
-                    onVisibilityFilterChange={setAnalysisFilter}
-                    showHidden={analysisHiddenFilter === "hidden"}
-                    onShowHiddenChange={(checked) =>
-                      setAnalysisHiddenFilter(checked ? "hidden" : "visible")
-                    }
-                  />
-                  <button
-                    type="button"
-                    onClick={toggleAnalysesOpen}
-                    className="me-1 flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground/70 hover:bg-sidebar-accent hover:text-foreground"
-                    aria-label={
-                      analysesOpen
-                        ? t("sidebar.collapseAnalyses")
-                        : t("sidebar.expandAnalyses")
-                    }
-                  >
-                    <IconChevronDown
-                      className={cn(
-                        "h-3.5 w-3.5 shrink-0 transition-transform",
-                        !analysesOpen && "-rotate-90",
-                      )}
-                    />
-                  </button>
-                </div>
-
-                {analysesOpen && (
-                  <DndContext
-                    sensors={sensors}
-                    collisionDetection={closestCenter}
-                    onDragEnd={handleAnalysisDragEnd}
-                  >
-                    <SortableContext
-                      items={displayedAnalyses.map((a) => a.id)}
-                      strategy={verticalListSortingStrategy}
-                    >
-                      <div className="ms-4 min-w-0 space-y-0.5">
-                        {displayedAnalyses.map((a) => (
-                          <SortableRow
-                            key={a.id}
-                            id={a.id}
-                            favoriteKey={`analysis:${a.id}`}
-                            name={a.name}
-                            href={`/analyses/${a.id}`}
-                            isActive={location.pathname === `/analyses/${a.id}`}
-                            favoriteIds={favoriteIds}
-                            onToggleFavorite={toggleFavorite}
-                            onDelete={() => handleAnalysisDelete(a)}
-                            onRename={(name) => handleAnalysisRename(a, name)}
-                            hidden={analysisHiddenFilter === "hidden"}
-                            onHide={
-                              analysisHiddenFilter === "hidden"
-                                ? undefined
-                                : () => handleAnalysisHide(a)
-                            }
-                            onUnhide={
-                              analysisHiddenFilter === "hidden"
-                                ? () => handleAnalysisUnhide(a)
-                                : undefined
-                            }
-                            visibility={a.visibility}
-                            onSetVisibility={(v) =>
-                              handleAnalysisSetVisibility(a, v)
-                            }
-                            onPrefetch={() => prefetchAnalysis(a.id)}
-                          />
-                        ))}
-                        {filteredAnalyses.length > SIDEBAR_PREVIEW_COUNT && (
-                          <button
-                            onClick={() => setAnalysesShowAll(!analysesShowAll)}
-                            className="flex items-center gap-1 px-3 py-1 text-[11px] text-muted-foreground/70 hover:text-primary"
-                          >
-                            {analysesShowAll
-                              ? t("sidebar.showLess")
-                              : t("sidebar.showMore", {
-                                  count:
-                                    filteredAnalyses.length -
-                                    SIDEBAR_PREVIEW_COUNT,
-                                })}
-                          </button>
+                        {analysesLoading && analysesList.length === 0 && (
+                          <div className="flex items-center gap-2 px-3 py-1">
+                            <Skeleton
+                              className={cn(
+                                "h-3.5 w-3.5 shrink-0 rounded-sm",
+                                SIDEBAR_SKELETON_CLASS,
+                              )}
+                            />
+                            <Skeleton
+                              className={cn(
+                                "h-3 w-3/4 rounded",
+                                SIDEBAR_SKELETON_CLASS,
+                              )}
+                            />
+                          </div>
                         )}
-                        {analysesLoading &&
-                          sortedAnalyses.length === 0 &&
-                          Array.from({ length: 3 }).map((_, i) => (
-                            <div
-                              key={`analysis-skeleton-${i}`}
-                              className="flex items-center gap-2 px-3 py-1"
-                            >
-                              <Skeleton
-                                className={cn(
-                                  "h-3.5 w-3.5 shrink-0 rounded-sm",
-                                  SIDEBAR_SKELETON_CLASS,
-                                )}
-                              />
-                              <Skeleton
-                                className={cn(
-                                  "h-3 rounded",
-                                  SIDEBAR_SKELETON_CLASS,
-                                )}
-                                style={{ width: `${60 + ((i * 17) % 30)}%` }}
-                              />
-                            </div>
-                          ))}
-                        {analysesError && sortedAnalyses.length === 0 && (
+                        {analysesError && analysesList.length === 0 && (
                           <SidebarLoadError
                             message={t("sidebar.analysesLoadFailed")}
                             retryLabel={t("sidebar.retry")}
                             onRetry={() => void refetchAnalyses()}
                           />
                         )}
-                        {!analysesLoading &&
-                          !analysesError &&
-                          sortedAnalyses.length === 0 && (
-                            <p className="px-3 py-1 text-[11px] text-muted-foreground/60">
-                              {t("sidebar.noAnalysesYet")}
-                            </p>
-                          )}
-                        <NewAnalysisDialog />
+                        <NewDashboardDialog />
                       </div>
                     </SortableContext>
                   </DndContext>
@@ -2920,54 +2572,31 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
                       )}
                     >
                       <Icon className="h-4 w-4" />
-                      {t(item.labelKey)}
+                      <span className="flex min-w-0 items-center gap-1">
+                        <span className="truncate">{t(item.labelKey)}</span>
+                        {item.showExternalLinkIcon && (
+                          <IconArrowUpRight
+                            aria-hidden="true"
+                            className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70"
+                          />
+                        )}
+                      </span>
                     </Link>
                   );
                 })}
               </nav>
 
-              <div className="min-w-0">
-                <ExtensionsSidebarSection />
-              </div>
-
               <div className="space-y-2 pt-2">
                 <OrgSwitcher />
+                <DevDatabaseLink />
                 <TooltipProvider delayDuration={200}>
-                  <div className="flex items-center justify-end gap-1">
-                    <DevDatabaseLink />
-                    <FeedbackButton className="min-w-0 flex-1" />
-                    <div className="flex shrink-0 items-center gap-0.5">
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <button
-                            onClick={() =>
-                              window.dispatchEvent(
-                                new CustomEvent(
-                                  "analytics:open-command-palette",
-                                ),
-                              )
-                            }
-                            aria-label={t("sidebar.search")}
-                            className="flex items-center justify-center rounded-lg p-2 text-muted-foreground transition-colors hover:text-primary cursor-pointer hover:bg-sidebar-accent/50"
-                          >
-                            <IconSearch className="h-4 w-4" />
-                          </button>
-                        </TooltipTrigger>
-                        <TooltipContent side="top">
-                          <p>
-                            {t("sidebar.searchShortcut", {
-                              shortcut: `${shortcutModifierLabel()}+K`,
-                            })}
-                          </p>
-                        </TooltipContent>
-                      </Tooltip>
-                      <LanguagePicker
-                        variant="icon"
-                        label={t("settings.languageLabel")}
-                        className="[&_[data-language-picker-trigger]]:rounded-lg [&_[data-language-picker-trigger]]:border-0 [&_[data-language-picker-trigger]]:bg-transparent [&_[data-language-picker-trigger]]:text-muted-foreground [&_[data-language-picker-trigger]]:hover:bg-sidebar-accent/50 [&_[data-language-picker-trigger]]:hover:text-primary"
-                      />
-                    </div>
-                  </div>
+                  <SidebarFooterActions
+                    feedback={footerFeedback}
+                    translate={footerTranslate}
+                    search={footerSearch}
+                    collapse={footerCollapse}
+                    className="px-0 py-0"
+                  />
                 </TooltipProvider>
               </div>
             </div>