feat(ui): add mobile bottom navigation bar with scroll-hide

Five-tab bottom nav (Home, Issues, Create, Agents, Inbox) that hides
on scroll-down and reappears on scroll-up for more screen real estate.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

ui/src/components/Layout.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef, useState, type UIEvent } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { BookOpen } from "lucide-react";
 import { Outlet } from "react-router-dom";
@@ -14,6 +14,7 @@ import { NewGoalDialog } from "./NewGoalDialog";
 import { NewAgentDialog } from "./NewAgentDialog";
 import { OnboardingWizard } from "./OnboardingWizard";
 import { ToastViewport } from "./ToastViewport";
+import { MobileBottomNav } from "./MobileBottomNav";
 import { useDialog } from "../context/DialogContext";
 import { usePanel } from "../context/PanelContext";
 import { useCompany } from "../context/CompanyContext";
@@ -30,6 +31,8 @@ export function Layout() {
   const { panelContent, closePanel } = usePanel();
   const { companies, loading: companiesLoading, setSelectedCompanyId } = useCompany();
   const onboardingTriggered = useRef(false);
+  const lastMainScrollTop = useRef(0);
+  const [mobileNavVisible, setMobileNavVisible] = useState(true);
   const { data: health } = useQuery({
     queryKey: queryKeys.health,
     queryFn: () => healthApi.get(),
@@ -68,6 +71,35 @@ export function Layout() {
     onSwitchCompany: switchCompany,
   });
 
+  useEffect(() => {
+    if (!isMobile) {
+      setMobileNavVisible(true);
+      return;
+    }
+    lastMainScrollTop.current = 0;
+    setMobileNavVisible(true);
+  }, [isMobile]);
+
+  const handleMainScroll = useCallback(
+    (event: UIEvent<HTMLElement>) => {
+      if (!isMobile) return;
+
+      const currentTop = event.currentTarget.scrollTop;
+      const delta = currentTop - lastMainScrollTop.current;
+
+      if (currentTop <= 24) {
+        setMobileNavVisible(true);
+      } else if (delta > 8) {
+        setMobileNavVisible(false);
+      } else if (delta < -8) {
+        setMobileNavVisible(true);
+      }
+
+      lastMainScrollTop.current = currentTop;
+    },
+    [isMobile],
+  );
+
   return (
     <div className="flex h-screen bg-background text-foreground overflow-hidden">
       {/* Mobile backdrop */}
@@ -119,12 +151,16 @@ export function Layout() {
       <div className="flex-1 flex flex-col min-w-0 h-full">
         <BreadcrumbBar />
         <div className="flex flex-1 min-h-0">
-          <main className="flex-1 overflow-auto p-4 md:p-6">
+          <main
+            className={cn("flex-1 overflow-auto p-4 md:p-6", isMobile && "pb-24")}
+            onScroll={handleMainScroll}
+          >
             <Outlet />
           </main>
           <PropertiesPanel />
         </div>
       </div>
+      {isMobile && <MobileBottomNav visible={mobileNavVisible} />}
       <CommandPalette />
       <NewIssueDialog />
       <NewProjectDialog />

ui/src/components/MobileBottomNav.tsx

@@ -0,0 +1,130 @@
+import { useMemo } from "react";
+import { NavLink, useLocation } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
+import {
+  House,
+  CircleDot,
+  SquarePen,
+  Users,
+  Inbox,
+} from "lucide-react";
+import { sidebarBadgesApi } from "../api/sidebarBadges";
+import { useCompany } from "../context/CompanyContext";
+import { useDialog } from "../context/DialogContext";
+import { queryKeys } from "../lib/queryKeys";
+import { cn } from "../lib/utils";
+
+interface MobileBottomNavProps {
+  visible: boolean;
+}
+
+interface MobileNavLinkItem {
+  type: "link";
+  to: string;
+  label: string;
+  icon: typeof House;
+  badge?: number;
+}
+
+interface MobileNavActionItem {
+  type: "action";
+  label: string;
+  icon: typeof SquarePen;
+  onClick: () => void;
+}
+
+type MobileNavItem = MobileNavLinkItem | MobileNavActionItem;
+
+export function MobileBottomNav({ visible }: MobileBottomNavProps) {
+  const location = useLocation();
+  const { selectedCompanyId } = useCompany();
+  const { openNewIssue } = useDialog();
+
+  const { data: sidebarBadges } = useQuery({
+    queryKey: queryKeys.sidebarBadges(selectedCompanyId!),
+    queryFn: () => sidebarBadgesApi.get(selectedCompanyId!),
+    enabled: !!selectedCompanyId,
+  });
+
+  const items = useMemo<MobileNavItem[]>(
+    () => [
+      { type: "link", to: "/dashboard", label: "Home", icon: House },
+      { type: "link", to: "/issues", label: "Issues", icon: CircleDot },
+      { type: "action", label: "Create", icon: SquarePen, onClick: () => openNewIssue() },
+      { type: "link", to: "/agents/all", label: "Agents", icon: Users },
+      {
+        type: "link",
+        to: "/inbox",
+        label: "Inbox",
+        icon: Inbox,
+        badge: sidebarBadges?.inbox,
+      },
+    ],
+    [openNewIssue, sidebarBadges?.inbox],
+  );
+
+  return (
+    <nav
+      className={cn(
+        "fixed bottom-0 left-0 right-0 z-30 border-t border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/85 transition-transform duration-200 ease-out md:hidden",
+        visible ? "translate-y-0" : "translate-y-full",
+      )}
+      aria-label="Mobile navigation"
+    >
+      <div className="grid h-16 grid-cols-5 px-1 pb-[env(safe-area-inset-bottom)]">
+        {items.map((item) => {
+          if (item.type === "action") {
+            const Icon = item.icon;
+            const active = location.pathname.startsWith("/issues/new");
+            return (
+              <button
+                key={item.label}
+                type="button"
+                onClick={item.onClick}
+                className={cn(
+                  "relative flex min-w-0 flex-col items-center justify-center gap-1 rounded-md text-[10px] font-medium transition-colors",
+                  active
+                    ? "text-foreground"
+                    : "text-muted-foreground hover:text-foreground",
+                )}
+              >
+                <Icon className="h-[18px] w-[18px]" />
+                <span className="truncate">{item.label}</span>
+              </button>
+            );
+          }
+
+          const Icon = item.icon;
+          return (
+            <NavLink
+              key={item.label}
+              to={item.to}
+              className={({ isActive }) =>
+                cn(
+                  "relative flex min-w-0 flex-col items-center justify-center gap-1 rounded-md text-[10px] font-medium transition-colors",
+                  isActive
+                    ? "text-foreground"
+                    : "text-muted-foreground hover:text-foreground",
+                )
+              }
+            >
+              {({ isActive }) => (
+                <>
+                  <span className="relative">
+                    <Icon className={cn("h-[18px] w-[18px]", isActive && "stroke-[2.3]")} />
+                    {item.badge != null && item.badge > 0 && (
+                      <span className="absolute -right-2 -top-2 rounded-full bg-primary px-1.5 py-0.5 text-[10px] leading-none text-primary-foreground">
+                        {item.badge > 99 ? "99+" : item.badge}
+                      </span>
+                    )}
+                  </span>
+                  <span className="truncate">{item.label}</span>
+                </>
+              )}
+            </NavLink>
+          );
+        })}
+      </div>
+    </nav>
+  );
+}