feat(app): add sliding sidebar navigation for mobile

- Homepage now shows "New Agent" form, agent list moves to sidebar
- Hamburger menu replaces back arrow on all screens
- Mobile: full-screen sidebar overlay with swipe-to-close gesture
- Desktop: fixed 320px sidebar, toggle via hamburger
- Smooth bezier-eased animations (220ms)
- Sidebar closes on agent select (mobile only)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

packages/app/src/components/headers/menu-header.tsx

@@ -0,0 +1,57 @@
+import type { ReactNode } from "react";
+import { Pressable, Text } from "react-native";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { Menu } from "lucide-react-native";
+import { ScreenHeader } from "./screen-header";
+import { useSidebarStore } from "@/stores/sidebar-store";
+
+interface MenuHeaderProps {
+  title?: string;
+  rightContent?: ReactNode;
+}
+
+export function MenuHeader({ title, rightContent }: MenuHeaderProps) {
+  const { theme } = useUnistyles();
+  const { toggle } = useSidebarStore();
+
+  return (
+    <ScreenHeader
+      left={
+        <>
+          <Pressable onPress={toggle} style={styles.menuButton}>
+            <Menu size={20} color={theme.colors.mutedForeground} />
+          </Pressable>
+          {title && (
+            <Text style={styles.title} numberOfLines={1}>
+              {title}
+            </Text>
+          )}
+        </>
+      }
+      right={rightContent}
+      leftStyle={styles.left}
+    />
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  left: {
+    gap: theme.spacing[2],
+  },
+  menuButton: {
+    padding: {
+      xs: theme.spacing[3],
+      md: theme.spacing[2],
+    },
+    borderRadius: theme.borderRadius.lg,
+  },
+  title: {
+    flex: 1,
+    fontSize: theme.fontSize.lg,
+    fontWeight: {
+      xs: theme.fontWeight.semibold,
+      md: "400",
+    },
+    color: theme.colors.foreground,
+  },
+}));