@agent-native/core 0.168.1 → 0.168.3

package/corpus/templates/mail/actions/view-screen.ts

@@ -5,6 +5,12 @@ import { getSetting } from "@agent-native/core/settings";
 import { emailMessageMatchesSearch } from "@shared/search.js";
 import { z } from "zod";
 
+import {
+  augmentSelfSentLabels,
+  filterInboxTabEmails,
+  OTHER_INBOX_TAB_PARAM,
+  resolvePinnedLabels,
+} from "../app/lib/inbox-tabs.js";
 import { buildGmailEmailSearchQuery } from "../server/lib/gmail-query.js";
 import { gmailGetThread } from "../server/lib/google-api.js";
 import {
@@ -16,10 +22,12 @@ import {
   fetchGmailLabelMap,
 } from "../server/lib/google-auth.js";
 import { getSyntheticEmailsForView } from "../server/lib/jobs.js";
+import { readSettings } from "../server/lib/mail-settings.js";
 import {
   listQueuedDrafts,
   requireQueuedDraft,
 } from "../server/lib/queued-drafts.js";
+import type { EmailMessage } from "../shared/types.js";
 import { getAccessTokens, fetchLabelMap } from "./helpers.js";
 
 function latestPerThread(emails: any[]): any[] {
@@ -43,10 +51,33 @@ async function fetchEmailList(
   view: string,
   search?: string,
   _label?: string,
+  activeInboxTab?: string,
+  activeAccounts?: string[],
 ): Promise<any[]> {
   try {
     const ownerEmail = getRequestUserEmail();
     if (!ownerEmail) throw new Error("no authenticated user");
+    const shouldFilterOther =
+      view === "inbox" && !search && activeInboxTab === OTHER_INBOX_TAB_PARAM;
+    const selectedAccountEmails = Array.isArray(activeAccounts)
+      ? [
+          ...new Set(
+            activeAccounts
+              .filter((email): email is string => typeof email === "string")
+              .map((email) => email.toLowerCase()),
+          ),
+        ]
+      : [];
+    const selectedAccountSet = new Set(selectedAccountEmails);
+    const filterSelectedAccounts = (emails: any[]) => {
+      if (selectedAccountEmails.length === 0) return emails;
+      return emails.filter(
+        (email) =>
+          typeof email.accountEmail === "string" &&
+          selectedAccountSet.has(email.accountEmail.toLowerCase()),
+      );
+    };
+
     if (view === "snoozed" || view === "scheduled") {
       let emails = await getSyntheticEmailsForView(ownerEmail, view);
       if (search) {
@@ -54,10 +85,37 @@ async function fetchEmailList(
           emailMessageMatchesSearch(e, search),
         );
       }
-      return emails.slice(0, 50);
+      return filterSelectedAccounts(emails).slice(0, 50);
     }
-    if (await isConnected(ownerEmail)) {
-      const clients = await getClients(ownerEmail);
+
+    const googleConnected = await isConnected(ownerEmail);
+    const settings =
+      googleConnected || shouldFilterOther
+        ? await readSettings(ownerEmail)
+        : undefined;
+    const userPinnedLabels = settings?.pinnedLabels;
+    const pinnedLabels =
+      userPinnedLabels === undefined
+        ? resolvePinnedLabels([], googleConnected)
+        : resolvePinnedLabels(userPinnedLabels, googleConnected);
+    const hasNoteToSelf = pinnedLabels.includes("note-to-self");
+    const clients = googleConnected ? await getClients(ownerEmail) : [];
+    const connectedEmails = new Set(
+      clients.map(({ email }) => email.toLowerCase()),
+    );
+    const prepareEmails = (emails: any[]) => {
+      const augmented = augmentSelfSentLabels(emails as EmailMessage[], {
+        isGoogleConnected: googleConnected,
+        connectedEmails,
+        hasNoteToSelf,
+      });
+      return filterSelectedAccounts(augmented);
+    };
+    const applyActiveInboxTab = (emails: any[]) =>
+      shouldFilterOther
+        ? filterInboxTabEmails(prepareEmails(emails), null, pinnedLabels)
+        : prepareEmails(emails);
+    if (googleConnected) {
       const labelMap = new Map<string, string>();
       await Promise.all(
         clients.map(async ({ accessToken }) => {
@@ -79,6 +137,10 @@ async function fetchEmailList(
         {
           mode: "threads",
           threadFormat: "metadata",
+          accountEmails:
+            selectedAccountEmails.length > 0
+              ? selectedAccountEmails
+              : undefined,
           threadCandidateLimit: search ? 500 : undefined,
           threadRecentMessageCandidateLimit:
             !search && (view === "inbox" || view === "unread")
@@ -87,9 +149,11 @@ async function fetchEmailList(
         },
       );
 
-      return latestPerThread(
-        messages.map((m: any) =>
-          gmailToEmailMessage(m, m._accountEmail, labelMap),
+      return applyActiveInboxTab(
+        latestPerThread(
+          messages.map((m: any) =>
+            gmailToEmailMessage(m, m._accountEmail, labelMap),
+          ),
         ),
       ).slice(0, 50);
     }
@@ -136,7 +200,7 @@ async function fetchEmailList(
           emailMessageMatchesSearch(e, search),
         );
       }
-      return emails.slice(0, 50);
+      return applyActiveInboxTab(emails).slice(0, 50);
     }
     return [];
   } catch {
@@ -255,7 +319,13 @@ export default defineAction({
         };
       }
     } else if (nav?.view) {
-      const emails = await fetchEmailList(nav.view, nav.search, nav.label);
+      const emails = await fetchEmailList(
+        nav.view,
+        nav.search,
+        nav.label,
+        nav.activeInboxTab,
+        nav.activeAccounts,
+      );
       const selectedThreadIds = Array.isArray(nav.selectedThreadIds)
         ? new Set(
             nav.selectedThreadIds.filter(
@@ -279,6 +349,8 @@ export default defineAction({
       screen.emailList = {
         view: nav.view,
         label: nav.label ?? null,
+        activeInboxTab: nav.activeInboxTab ?? null,
+        activeAccounts: nav.activeAccounts ?? [],
         search: nav.search ?? null,
         selectedThreadIds: Array.from(selectedThreadIds),
         count: compact.length,

package/corpus/templates/mail/app/components/email/EmailList.tsx

@@ -48,6 +48,7 @@ import {
   useBulkToggleStar,
   useBulkMarkRead,
   useLabels,
+  EMPTY_LABELS,
   useMoveEmail,
   unsuppressThread,
 } from "@/hooks/use-emails";
@@ -435,7 +436,8 @@ export function EmailList({
   const bulkTrashEmails = useBulkTrashEmails();
   const bulkToggleStar = useBulkToggleStar();
   const bulkMarkRead = useBulkMarkRead();
-  const { data: labels = [] } = useLabels();
+  const { data: labelsData } = useLabels();
+  const labels = labelsData ?? EMPTY_LABELS;
   const moveEmail = useMoveEmail();
   const cancelScheduledJob = useDeleteScheduledJob();
   const sendScheduledJobNow = useSendScheduledJobNow();

package/corpus/templates/mail/app/components/email/EmailListItem.tsx

@@ -21,6 +21,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { useAccountFilter } from "@/hooks/use-account-filter";
+import { getLabelStyle } from "@/lib/label-colors";
 import type { ThreadSummary } from "@/lib/threads";
 import { cn, formatEmailDate, truncate } from "@/lib/utils";
 
@@ -96,29 +97,6 @@ function formatParticipants(participants: string[], maxWidth = 3): string {
   return `${firstNames[0]} .. ${firstNames.slice(-(maxWidth - 1)).join(", ")}`;
 }
 
-// Map common label IDs to display colors
-const labelColors: Record<string, { bg: string; text: string }> = {
-  automated: { bg: "bg-pink-500/20", text: "text-pink-700 dark:text-pink-300" },
-  social: { bg: "bg-blue-500/20", text: "text-blue-700 dark:text-blue-300" },
-  updates: {
-    bg: "bg-yellow-500/20",
-    text: "text-yellow-700 dark:text-yellow-300",
-  },
-  promotions: {
-    bg: "bg-green-500/20",
-    text: "text-green-700 dark:text-green-300",
-  },
-  forums: {
-    bg: "bg-sky-500/20",
-    text: "text-sky-700 dark:text-sky-300",
-  },
-  finance: {
-    bg: "bg-emerald-500/20",
-    text: "text-emerald-700 dark:text-emerald-300",
-  },
-  travel: { bg: "bg-cyan-500/20", text: "text-cyan-700 dark:text-cyan-300" },
-};
-
 /** Stable dot colors for distinguishing accounts */
 const accountDotColors = [
   "bg-blue-400",
@@ -139,18 +117,6 @@ function getAccountColor(
   return accountDotColors[(idx >= 0 ? idx : 0) % accountDotColors.length];
 }
 
-function getLabelStyle(labelId: string): { bg: string; text: string } {
-  const normalized = labelId.toLowerCase().replace(/^label:/, "");
-  if (labelColors[normalized]) return labelColors[normalized];
-  // Fallback: hash to a color
-  let hash = 0;
-  for (let i = 0; i < normalized.length; i++) {
-    hash = normalized.charCodeAt(i) + ((hash << 5) - hash);
-  }
-  const options = Object.values(labelColors);
-  return options[Math.abs(hash) % options.length];
-}
-
 export const EmailListItem = memo(function EmailListItem({
   email,
   thread,

package/corpus/templates/mail/app/components/email/EmailThread.tsx

@@ -64,6 +64,7 @@ import {
   decodeHtmlEntities,
   processHtmlImages,
 } from "@/lib/email-image-policy";
+import { getLabelStyle } from "@/lib/label-colors";
 import { isMcpEmbedSurface } from "@/lib/mcp-embed";
 import { getResolvedTheme } from "@/lib/theme";
 import { ensureThread, warmThreads } from "@/lib/thread-cache";
@@ -1138,14 +1139,21 @@ export function EmailThread({
               <h1 className="text-base sm:text-lg font-semibold leading-tight text-foreground line-clamp-2">
                 {threadSubject}
               </h1>
-              {displayLabels.map((labelId) => (
-                <span
-                  key={labelId}
-                  className="label-badge shrink-0 bg-pink-500/20 text-pink-700 dark:text-pink-300 mt-1"
-                >
-                  {labelId}
-                </span>
-              ))}
+              {displayLabels.map((labelId) => {
+                const style = getLabelStyle(labelId);
+                return (
+                  <span
+                    key={labelId}
+                    className={cn(
+                      "label-badge shrink-0 mt-1",
+                      style.bg,
+                      style.text,
+                    )}
+                  >
+                    {labelId}
+                  </span>
+                );
+              })}
               {/* Action bar */}
               <div className="hidden sm:flex items-center gap-0.5 ml-auto shrink-0">
                 <Tooltip>

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

@@ -34,6 +34,7 @@ import {
   IconMailForward,
   IconStar,
   IconTrash,
+  IconAlertCircle,
 } from "@tabler/icons-react";
 import { useQueryClient } from "@tanstack/react-query";
 import { useState, useCallback, useRef, useEffect, useMemo } from "react";
@@ -68,6 +69,7 @@ import {
   useBlockSender,
   useMuteThread,
   markExternalEmailRefresh,
+  EMPTY_LABELS,
 } from "@/hooks/use-emails";
 import {
   useGoogleAuthStatus,
@@ -81,6 +83,8 @@ import {
 import { useIsMobile } from "@/hooks/use-mobile";
 import { runUndo } from "@/hooks/use-undo";
 import {
+  OTHER_INBOX_TAB_ID,
+  OTHER_INBOX_TAB_PARAM,
   qualifiesForInboxTab,
   pinnedTriageLabels,
   augmentSelfSentLabels,
@@ -256,6 +260,7 @@ function AppLayoutInner({ children }: AppLayoutProps) {
   const [searchParams] = useSearchParams();
   const activeSearchQuery = searchParams.get("q");
   const activeLabel = searchParams.get("label");
+  const activeInboxTab = searchParams.get("tab");
   const composeInitialExpanded =
     searchParams.get(COMPOSE_FULLSCREEN_PARAM) === "1";
   const clearComposeInitialExpanded = useCallback(() => {
@@ -271,22 +276,31 @@ function AppLayoutInner({ children }: AppLayoutProps) {
       { replace: true },
     );
   }, [location.pathname, navigate, searchParams]);
-  // Remember which view (and label tab) the user was in before searching —
+  // Remember which view (label or inbox tab) the user was in before searching —
   // SearchBar always routes searches through /all?q=..., so on clear we'd
   // otherwise drop a user searching from Starred/Sent/Archive or from a
   // label-filtered tab back into plain Inbox.
-  const preSearchViewRef = useRef<{ view: string; label: string | null }>({
-    view,
-    label: activeLabel,
-  });
+  const preSearchViewRef = useRef<{
+    view: string;
+    label: string | null;
+    tab: string | null;
+  }>({ view, label: activeLabel, tab: activeInboxTab });
   useEffect(() => {
     if (!activeSearchQuery) {
-      preSearchViewRef.current = { view, label: activeLabel };
+      preSearchViewRef.current = {
+        view,
+        label: activeLabel,
+        tab: activeInboxTab,
+      };
     }
-  }, [view, activeLabel, activeSearchQuery]);
+  }, [view, activeLabel, activeInboxTab, activeSearchQuery]);
   const restorePreSearchPath = useCallback(() => {
-    const { view: v, label: l } = preSearchViewRef.current;
-    return `/${v}${l ? `?label=${encodeURIComponent(l)}` : ""}`;
+    const { view: v, label: l, tab } = preSearchViewRef.current;
+    const params = new URLSearchParams();
+    if (l) params.set("label", l);
+    if (tab) params.set("tab", tab);
+    const search = params.toString();
+    return `/${v}${search ? `?${search}` : ""}`;
   }, []);
   // When the search param is cleared externally (browser back/forward,
   // agent navigation), drop the searchFocused flag — otherwise the bar
@@ -300,7 +314,15 @@ function AppLayoutInner({ children }: AppLayoutProps) {
     }
     prevSearchQueryRef.current = activeSearchQuery;
   }, [activeSearchQuery]);
-  const { data: labels = [], isLoading: labelsLoading } = useLabels();
+  const {
+    data: labelsData,
+    isLoading: labelsLoading,
+    isError: labelsError,
+    error: labelsQueryError,
+    isFetching: labelsFetching,
+    refetch: refetchLabels,
+  } = useLabels();
+  const labels = labelsData ?? EMPTY_LABELS;
   const { data: settings, isLoading: settingsLoading } = useSettings();
   const updateSettings = useUpdateSettings();
   const googleStatus = useGoogleAuthStatus();
@@ -400,7 +422,7 @@ function AppLayoutInner({ children }: AppLayoutProps) {
       localStorage.removeItem(SIDEBAR_COLLAPSE_KEY);
     }
   }, [sidebarCollapsed]);
-  const showSidebar = sidebarOpen || (sidebarPinned && !isMobile);
+  const showSidebar = isMobile ? sidebarOpen : sidebarOpen || sidebarPinned;
   const showCollapsedSidebar =
     !isMobile &&
     showSidebar &&
@@ -559,7 +581,10 @@ function AppLayoutInner({ children }: AppLayoutProps) {
         id: "inbox",
         label: t("mail.views.inbox"),
         href: "/inbox",
-        isActive: view === "inbox" && !activeLabel,
+        isActive:
+          view === "inbox" &&
+          !activeLabel &&
+          activeInboxTab !== OTHER_INBOX_TAB_PARAM,
         type: "system",
       });
     }
@@ -615,10 +640,13 @@ function AppLayoutInner({ children }: AppLayoutProps) {
 
     if (hasPinnedFilters) {
       tabs.push({
-        id: "inbox",
+        id: OTHER_INBOX_TAB_ID,
         label: t("mail.views.other"),
-        href: "/inbox",
-        isActive: view === "inbox" && !activeLabel,
+        href: `/inbox?tab=${OTHER_INBOX_TAB_PARAM}`,
+        isActive:
+          view === "inbox" &&
+          !activeLabel &&
+          activeInboxTab === OTHER_INBOX_TAB_PARAM,
         type: "system",
       });
     }
@@ -630,6 +658,7 @@ function AppLayoutInner({ children }: AppLayoutProps) {
     labelAliases,
     view,
     activeLabel,
+    activeInboxTab,
     hasPinnedFilters,
     t,
   ]);
@@ -661,6 +690,15 @@ function AppLayoutInner({ children }: AppLayoutProps) {
     [pinnedLabels],
   );
 
+  // The top-bar inbox tabs are hidden on mobile, so mirror their non-standard
+  // entries in the drawer. Collapsible system views already appear in the
+  // fixed drawer list below and must not be duplicated here.
+  const mobileInboxTabs = visibleTabs.filter(
+    (tab) =>
+      tab.id !== "inbox" &&
+      !collapsibleViews.some((view) => view.id === tab.id),
+  );
+
   // Is current view one of the hidden ones? If so force-show it
   const currentInHidden = hiddenViews.some((v) => v.id === view);
 
@@ -1010,6 +1048,15 @@ function AppLayoutInner({ children }: AppLayoutProps) {
 
   const useServerLabelCounts = activeAccounts.size === 0;
 
+  // Gmail totals overlap across labels, while these tabs are an exclusive
+  // partition of the loaded inbox. Keep their badges tied to that partition.
+  const inboxPartitionTabIds = new Set<string>([OTHER_INBOX_TAB_ID]);
+  for (const pinnedId of pinnedTriageLabels(pinnedLabels)) {
+    inboxPartitionTabIds.add(pinnedId);
+    const label = resolveLabelForCount(pinnedId);
+    if (label) inboxPartitionTabIds.add(label.id);
+  }
+
   type CountKind = "unread" | "total";
   const countFieldForKind = (kind: CountKind) =>
     kind === "total" ? "totalCount" : "unreadCount";
@@ -1026,24 +1073,10 @@ function AppLayoutInner({ children }: AppLayoutProps) {
     const serverCount = useServerLabelCounts
       ? (inboxLabel?.[countField] ?? 0)
       : 0;
-    const localCount = localCounts["inbox"] ?? 0;
+    const localCount = localCounts["__inboxTotal"] ?? 0;
     return Math.max(serverCount, localCount);
   };
 
-  const isExclusivePinnedTab = (viewId: string) => {
-    if (!hasPinnedFilters) return false;
-    // Pinned label rows (the ones that contribute to the "Other" remainder)
-    // are exclusive: each inbox thread is counted in exactly one tab. Gmail's
-    // server label counts don't have that exclusivity (e.g. server "important"
-    // returns *all* important threads, regardless of whether they're also
-    // categorized elsewhere), so we can't mix the two — use local only.
-    return pinnedLabels.some((id) => {
-      if (collapsibleViews.some((view) => view.id === id)) return false;
-      const label = resolveLabelForCount(id);
-      return (label?.id ?? id) === viewId || id === viewId;
-    });
-  };
-
   const getOtherCount = (kind: CountKind) => {
     if (!hasPinnedFilters) return getInboxCount(kind);
     const localCounts = localCountsForKind(kind);
@@ -1056,20 +1089,18 @@ function AppLayoutInner({ children }: AppLayoutProps) {
   };
 
   const getTabCount = (viewId: string, kind: CountKind) => {
-    if (viewId === "inbox") return getOtherCount(kind);
+    if (viewId === OTHER_INBOX_TAB_ID) return getOtherCount(kind);
+    if (viewId === "inbox") return getInboxCount(kind);
     const label = resolveLabelForCount(viewId);
     const countField = countFieldForKind(kind);
     const localCounts = localCountsForKind(kind);
     const localCount =
       localCounts[viewId] ?? (label ? (localCounts[label.id] ?? 0) : 0);
-    // Exclusive pinned tabs (when hasPinnedFilters is on, a thread belongs to
-    // exactly one tab) can't fall back to Gmail's non-exclusive server count
-    // — that would over-report the badge relative to what the tab renders.
-    if (isExclusivePinnedTab(viewId)) return localCount;
     const serverCount =
       useServerLabelCounts && viewId !== "note-to-self"
         ? (label?.[countField] ?? 0)
         : 0;
+    if (inboxPartitionTabIds.has(viewId)) return localCount;
     return Math.max(serverCount, localCount);
   };
   const getTopBarCount = (viewId: string) => getTabCount(viewId, "total");
@@ -1158,7 +1189,7 @@ function AppLayoutInner({ children }: AppLayoutProps) {
           {/* Primary tabs stay mounted during search so navigation does not jump. */}
           <>
             {tabsLoading ? (
-              <nav className="flex items-center gap-2 overflow-x-auto hide-scrollbar">
+              <nav className="hidden sm:flex items-center gap-2 overflow-x-auto hide-scrollbar">
                 {[1, 2, 3].map((i) => (
                   <span
                     key={i}
@@ -1168,7 +1199,7 @@ function AppLayoutInner({ children }: AppLayoutProps) {
                 ))}
               </nav>
             ) : (
-              <nav className="flex min-w-0 items-center gap-0.5 overflow-x-auto hide-scrollbar">
+              <nav className="hidden sm:flex min-w-0 items-center gap-0.5 overflow-x-auto hide-scrollbar">
                 {topBarTabs.map((tab, idx) => {
                   const visibleIndex = visibleTabs.findIndex(
                     (item) => item.id === tab.id,
@@ -1252,7 +1283,12 @@ function AppLayoutInner({ children }: AppLayoutProps) {
             )}
 
             {/* Tab settings cog */}
-            <div className={cn("relative", tabsLoading && "invisible")}>
+            <div
+              className={cn(
+                "relative hidden sm:block",
+                tabsLoading && "invisible",
+              )}
+            >
               <Popover
                 open={tabSettingsOpen}
                 onOpenChange={(open) => {
@@ -1531,7 +1567,12 @@ function AppLayoutInner({ children }: AppLayoutProps) {
                           <button
                             type="button"
                             onClick={() => {
-                              setSidebarPinned((value) => !value);
+                              if (sidebarPinned) {
+                                setSidebarPinned(false);
+                                setSidebarOpen(!isMobile);
+                                return;
+                              }
+                              setSidebarPinned(true);
                               setSidebarOpen(true);
                             }}
                             className={cn(
@@ -1726,63 +1767,56 @@ function AppLayoutInner({ children }: AppLayoutProps) {
                         ))}
                       </div>
 
-                      {/* Pinned labels */}
-                      {pinnedLabels.filter(
-                        (l) => !collapsibleViews.some((v) => v.id === l),
-                      ).length > 0 && (
+                      {/* Mobile equivalents for the hidden top-bar inbox tabs */}
+                      {mobileInboxTabs.length > 0 && (
                         <>
                           <h2 className="text-[11px] font-medium text-muted-foreground/50 uppercase tracking-wider mt-5 mb-3">
                             {t("mail.views.labels")}
                           </h2>
                           <div className="space-y-0.5">
-                            {visibleTabs
-                              .filter(
-                                (t) => t.id !== "inbox" && t.type === "label",
-                              )
-                              .map((tab) => {
-                                const count = getUnreadCount(tab.id);
-                                const depth = labelDepth(
-                                  tab.fullLabel ?? tab.label,
-                                );
-                                return (
-                                  <Link
-                                    key={tab.id}
-                                    to={tab.href}
-                                    onClick={closeSidebar}
-                                    className={cn(
-                                      "flex items-center justify-between rounded-md px-3 py-2.5 text-[14px] transition-colors min-h-[44px]",
-                                      tab.isActive
-                                        ? "bg-accent/60 text-foreground font-medium"
-                                        : "text-foreground/70 hover:bg-accent/30",
-                                    )}
+                            {mobileInboxTabs.map((tab) => {
+                              const count = getUnreadCount(tab.id);
+                              const depth =
+                                tab.type === "label"
+                                  ? labelDepth(tab.fullLabel ?? tab.label)
+                                  : 0;
+                              return (
+                                <Link
+                                  key={tab.id}
+                                  to={tab.href}
+                                  onClick={closeSidebar}
+                                  className={cn(
+                                    "flex items-center justify-between rounded-md px-3 py-2.5 text-[14px] transition-colors min-h-[44px]",
+                                    tab.isActive
+                                      ? "bg-accent/60 text-foreground font-medium"
+                                      : "text-foreground/70 hover:bg-accent/30",
+                                  )}
+                                >
+                                  <span
+                                    className="flex min-w-0 items-center gap-2"
+                                    style={{ paddingLeft: depth * 12 }}
                                   >
+                                    {tab.color && (
+                                      <span
+                                        className="h-2 w-2 rounded-full shrink-0"
+                                        style={{ backgroundColor: tab.color }}
+                                      />
+                                    )}
                                     <span
-                                      className="flex min-w-0 items-center gap-2"
-                                      style={{ paddingLeft: depth * 12 }}
+                                      className="truncate"
+                                      title={tab.fullLabel ?? tab.label}
                                     >
-                                      {tab.color && (
-                                        <span
-                                          className="h-2 w-2 rounded-full shrink-0"
-                                          style={{ backgroundColor: tab.color }}
-                                        />
-                                      )}
-                                      <span
-                                        className="truncate"
-                                        title={tab.fullLabel}
-                                      >
-                                        {shortLabelName(
-                                          tab.fullLabel ?? tab.label,
-                                        )}
-                                      </span>
+                                      {tab.label}
                                     </span>
-                                    {count > 0 && (
-                                      <span className="text-[12px] text-muted-foreground/50 tabular-nums">
-                                        {count}
-                                      </span>
-                                    )}
-                                  </Link>
-                                );
-                              })}
+                                  </span>
+                                  {count > 0 && (
+                                    <span className="text-[12px] text-muted-foreground/50 tabular-nums">
+                                      {count}
+                                    </span>
+                                  )}
+                                </Link>
+                              );
+                            })}
                           </div>
                         </>
                       )}
@@ -1840,6 +1874,31 @@ function AppLayoutInner({ children }: AppLayoutProps) {
         >
           <InvitationBanner />
 
+          {labelsError && (
+            <div
+              role="alert"
+              className="flex shrink-0 items-center gap-2 border-b border-destructive/20 bg-destructive/5 px-4 py-2 text-xs text-muted-foreground"
+            >
+              <IconAlertCircle className="h-3.5 w-3.5 shrink-0 text-destructive" />
+              <span className="min-w-0 flex-1 truncate">
+                {labelsQueryError instanceof Error && labelsQueryError.message
+                  ? labelsQueryError.message
+                  : t("mail.error.loadTitle")}
+              </span>
+              <Button
+                type="button"
+                size="sm"
+                variant="ghost"
+                disabled={labelsFetching}
+                onClick={() => void refetchLabels()}
+              >
+                {labelsFetching
+                  ? t("mail.error.retrying")
+                  : t("mail.error.tryAgain")}
+              </Button>
+            </div>
+          )}
+
           {/* Show full-page takeover when no accounts connected (except on settings page) */}
           {!googleStatus.isLoading &&
           !googleStatus.isError &&