feat: implement mobile app usability improvements

Mobile Navigation:
- Add MobileNav component with bottom tab bar
- Show mobile nav on small screens, hide desktop sidebar
- Add session count badge to Sessions tab
- Add safe area padding for notched devices

Session Management:
- Redesign SessionCard for mobile with action menu
- Add MobileActionSheet for session actions
- Keep primary action prominent

Forms & Dialogs:
- Stack form fields vertically on mobile
- Ensure 44px minimum touch targets
- Update dialogs for 320px viewport

Responsive Layout:
- Add MobilePageHeader with back button
- Reduce page padding on mobile
- Stack multi-column grids vertically

Touch & Interaction:
- Add active states to interactive elements
- Ensure 8px spacing between touch targets

Complex Pages:
- Update Repo Workspace for mobile
- Update Tool Workshop and Config Profiles

Build: TypeScript check passes, production build succeeds

apps/web/src/components/app-shell.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect } from "react";
 import { Link, NavLink, Outlet, useLocation } from "react-router-dom";
 
 import { getUserSessions } from "../api/sessions";
@@ -8,6 +8,7 @@ import { useAuth } from "../state/auth";
 import { useSessions } from "../state/sessions";
 import { useMobileViewport } from "../hooks/use-mobile-viewport";
 import { Icon } from "./icon";
+import { MobileNav } from "./mobile-nav";
 import type { IconName } from "../utils/icons";
 
 const NAV_ITEMS: { to: string; label: string; icon: IconName; badge?: "sessions" }[] = [
@@ -43,8 +44,6 @@ export const AppShell = () => {
   const { sessions, setAllSessions } = useSessions();
   const location = useLocation();
   const isMobile = useMobileViewport();
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-
   const isMobileTerminal = isMobile && location.pathname.includes("/instances/") && location.pathname.includes("/terminal");
 
   const loadSessions = useCallback(async () => {
@@ -65,11 +64,6 @@ export const AppShell = () => {
     return () => clearInterval(interval);
   }, [loadSessions]);
 
-  // Close mobile menu on route change
-  useEffect(() => {
-    setMobileMenuOpen(false);
-  }, [location.pathname]);
-
   if (isMobileTerminal) {
     return (
       <div className="shell mobile-terminal-shell">
@@ -102,57 +96,46 @@ export const AppShell = () => {
       </header>
 
       <div className="shell-body">
-        <aside className={`shell-nav ${mobileMenuOpen ? "mobile-open" : ""}`} aria-label="Primary navigation">
-          {isMobile && (
-            <button
-              className="mobile-menu-close"
-              onClick={() => setMobileMenuOpen(false)}
-              type="button"
-              aria-label="Close menu"
-            >
-              <Icon name="close" size="sm" />
-            </button>
-          )}
-          {NAV_ITEMS.map((item) => {
-            const activeCount = sessions.filter((s) => s.status === "running").length;
-            return (
-              <NavLink
-                key={item.to}
-                to={item.to}
-                className={({ isActive }) => (isActive ? "nav-item nav-item-active" : "nav-item")}
-                end={item.to === "/"}
-              >
-                <Icon name={item.icon} size="sm" />
-                {item.label}
-                {item.badge === "sessions" && activeCount > 0 && (
-                  <span className="nav-badge">{activeCount}</span>
-                )}
-              </NavLink>
-            );
-          })}
-          
-          {sessions.length > 0 && (
-            <>
-              <div className="nav-divider" />
-              <div className="nav-section-title">Live sessions</div>
-              {sessions.map((session) => (
-                <SessionItem key={session.id} session={session} />
-              ))}
-            </>
-          )}
-        </aside>
-
-        {isMobile && mobileMenuOpen && (
-          <div
-            className="mobile-menu-overlay"
-            onClick={() => setMobileMenuOpen(false)}
-          />
+        {!isMobile && (
+          <aside className="shell-nav" aria-label="Primary navigation">
+            {NAV_ITEMS.map((item) => {
+              const activeCount = sessions.filter((s) => s.status === "running").length;
+              return (
+                <NavLink
+                  key={item.to}
+                  to={item.to}
+                  className={({ isActive }) => (isActive ? "nav-item nav-item-active" : "nav-item")}
+                  end={item.to === "/"}
+                >
+                  <Icon name={item.icon} size="sm" />
+                  {item.label}
+                  {item.badge === "sessions" && activeCount > 0 && (
+                    <span className="nav-badge">{activeCount}</span>
+                  )}
+                </NavLink>
+              );
+            })}
+            
+            {sessions.length > 0 && (
+              <>
+                <div className="nav-divider" />
+                <div className="nav-section-title">Live sessions</div>
+                {sessions.map((session) => (
+                  <SessionItem key={session.id} session={session} />
+                ))}
+              </>
+            )}
+          </aside>
         )}
 
-        <main className="shell-content">
+        <main className={`shell-content ${isMobile ? "mobile" : ""}`}>
           <Outlet />
         </main>
       </div>
+
+      {isMobile && (
+        <MobileNav sessionCount={sessions.filter((s) => s.status === "running").length} />
+      )}
     </div>
   );
 };