Update files

packages/app/src/app/settings.tsx

@@ -13,7 +13,7 @@ import { router, useLocalSearchParams } from "expo-router";
 import Constants from "expo-constants";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
-import { Sun, Moon, Monitor, MoreVertical, Globe } from "lucide-react-native";
+import { Sun, Moon, Monitor, MoreVertical, Globe, Trash2, Pencil, RotateCw } from "lucide-react-native";
 import { useAppSettings, type AppSettings } from "@/hooks/use-settings";
 import { useDaemonRegistry, type HostProfile } from "@/contexts/daemon-registry-context";
 import { useDaemonConnections, type ActiveConnection, type ConnectionStatus } from "@/contexts/daemon-connections-context";
@@ -34,7 +34,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Button } from "@/components/ui/button";
-import { AdaptiveModalSheet } from "@/components/adaptive-modal-sheet";
+import { AdaptiveModalSheet, AdaptiveTextInput } from "@/components/adaptive-modal-sheet";
 
 const delay = (ms: number) =>
   new Promise<void>((resolve) => {
@@ -119,7 +119,7 @@ const styles = StyleSheet.create((theme) => ({
   hostHeaderRight: {
     flexDirection: "row",
     alignItems: "center",
-    gap: theme.spacing[2],
+    gap: theme.spacing[1],
     flexShrink: 0,
   },
   hostLabel: {
@@ -142,6 +142,13 @@ const styles = StyleSheet.create((theme) => ({
     paddingVertical: 4,
     borderRadius: theme.borderRadius.full,
   },
+  statusPillMobile: {
+    alignItems: "center",
+    justifyContent: "center",
+    width: 14,
+    height: 14,
+    borderRadius: 7,
+  },
   statusDot: {
     width: 6,
     height: 6,
@@ -163,6 +170,11 @@ const styles = StyleSheet.create((theme) => ({
     backgroundColor: theme.colors.surface3,
     maxWidth: 170,
   },
+  connectionPillMobile: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderRadius: theme.borderRadius.full,
+  },
   connectionText: {
     fontSize: theme.fontSize.xs,
     fontWeight: theme.fontWeight.normal,
@@ -744,7 +756,7 @@ export default function SettingsScreen() {
           >
             <View style={styles.formField}>
               <Text style={styles.label}>Label</Text>
-              <TextInput
+              <AdaptiveTextInput
                 style={styles.input}
                 value={editLabel}
                 onChangeText={setEditLabel}
@@ -795,26 +807,6 @@ export default function SettingsScreen() {
               </View>
             ) : null}
 
-            {editingDaemon ? (
-              <View style={styles.formField}>
-                <Button
-                  variant="default"
-                  size="sm"
-                  style={{ alignSelf: "flex-start" }}
-                  onPress={() => {
-                    const serverId = editingDaemon.serverId;
-                    handleCloseEditDaemon();
-                    setAddConnectionTargetServerId(serverId);
-                    setPendingEditReopenServerId(serverId);
-                    setIsAddHostMethodVisible(true);
-                  }}
-                  testID="edit-host-add-connection"
-                >
-                  Add connection
-                </Button>
-              </View>
-            ) : null}
-
             <View style={styles.formActionsRow}>
               <Button
                 variant="secondary"
@@ -1060,17 +1052,21 @@ function DaemonCard({
         <View style={styles.hostHeaderRow}>
           <Text style={styles.hostLabel} numberOfLines={1}>{daemon.label}</Text>
           <View style={styles.hostHeaderRight}>
-            <View style={[styles.statusPill, { backgroundColor: statusPillBg }]}>
+            <View style={[Platform.OS === "web" ? styles.statusPill : styles.statusPillMobile, { backgroundColor: statusPillBg }]}>
               <View style={[styles.statusDot, { backgroundColor: statusColor }]} />
-              <Text style={[styles.statusText, { color: statusColor }]}>{badgeText}</Text>
+              {Platform.OS === "web" ? (
+                <Text style={[styles.statusText, { color: statusColor }]}>{badgeText}</Text>
+              ) : null}
             </View>
 
             {connectionBadge ? (
-              <View style={styles.connectionPill}>
+              <View style={Platform.OS === "web" ? styles.connectionPill : styles.connectionPillMobile}>
                 {connectionBadge.icon}
-                <Text style={styles.connectionText} numberOfLines={1}>
+                {Platform.OS === "web" ? (
-                  {connectionBadge.text}
+                  <Text style={styles.connectionText} numberOfLines={1}>
-                </Text>
+                    {connectionBadge.text}
+                  </Text>
+                ) : null}
               </View>
             ) : null}
 
@@ -1087,17 +1083,16 @@ function DaemonCard({
                 <MoreVertical size={16} color={theme.colors.foregroundMuted} />
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end" width={220} testID={`daemon-menu-content-${daemon.serverId}`}>
-                <DropdownMenuItem onSelect={() => onEdit(daemon)} testID={`daemon-menu-edit-${daemon.serverId}`}>
+                <DropdownMenuItem
+                  onSelect={() => onEdit(daemon)}
+                  leading={<Pencil size={16} color={theme.colors.foregroundMuted} />}
+                  testID={`daemon-menu-edit-${daemon.serverId}`}
+                >
                   Edit
                 </DropdownMenuItem>
-                <DropdownMenuItem destructive onSelect={() => onRemove(daemon)} testID={`daemon-menu-remove-${daemon.serverId}`}>
-                  Remove
-                </DropdownMenuItem>
-
-                <DropdownMenuSeparator />
-                <DropdownMenuLabel>Advanced</DropdownMenuLabel>
                 <DropdownMenuItem
                   onSelect={handleRestartPress}
+                  leading={<RotateCw size={16} color={theme.colors.foregroundMuted} />}
                   status={isRestarting ? "pending" : "idle"}
                   pendingLabel="Restarting..."
                   disabled={!daemonClient || !isConnectedRef.current}
@@ -1105,6 +1100,13 @@ function DaemonCard({
                 >
                   Restart daemon
                 </DropdownMenuItem>
+                <DropdownMenuItem
+                  onSelect={() => onRemove(daemon)}
+                  leading={<Trash2 size={16} color={theme.colors.foregroundMuted} />}
+                  testID={`daemon-menu-remove-${daemon.serverId}`}
+                >
+                  Remove
+                </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
           </View>

packages/app/src/components/adaptive-modal-sheet.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef } from "react";
+import { forwardRef, useCallback, useEffect, useMemo, useRef } from "react";
 import type { ReactNode } from "react";
 import { createPortal } from "react-dom";
 import {
@@ -7,14 +7,17 @@ import {
   Pressable,
   ScrollView,
   Text,
+  TextInput,
   View,
 } from "react-native";
+import type { TextInputProps } from "react-native";
 import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
 import { getOverlayRoot, OVERLAY_Z } from "../lib/overlay-root";
 import {
   BottomSheetModal,
   BottomSheetBackdrop,
   BottomSheetScrollView,
+  BottomSheetTextInput,
   type BottomSheetBackgroundProps,
 } from "@gorhom/bottom-sheet";
 import { X } from "lucide-react-native";
@@ -244,3 +247,20 @@ export function AdaptiveModalSheet({
     </Modal>
   );
 }
+
+/**
+ * TextInput that automatically uses BottomSheetTextInput on mobile
+ * for proper keyboard dodging in AdaptiveModalSheet.
+ */
+export const AdaptiveTextInput = forwardRef<TextInput, TextInputProps>(
+  function AdaptiveTextInput(props, ref) {
+    const isMobile =
+      UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+
+    if (isMobile) {
+      return <BottomSheetTextInput ref={ref as any} {...props} />;
+    }
+
+    return <TextInput ref={ref} {...props} />;
+  }
+);

packages/app/src/components/add-host-modal.tsx

@@ -1,12 +1,11 @@
-import { useCallback, useMemo, useRef, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { Alert, Text, TextInput, View } from "react-native";
 import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
-import { BottomSheetTextInput } from "@gorhom/bottom-sheet";
 import { Link2 } from "lucide-react-native";
 import { useDaemonRegistry, type HostProfile } from "@/contexts/daemon-registry-context";
 import { normalizeHostPort } from "@/utils/daemon-endpoints";
 import { DaemonConnectionTestError, probeDaemonEndpoint } from "@/utils/test-daemon-connection";
-import { AdaptiveModalSheet } from "./adaptive-modal-sheet";
+import { AdaptiveModalSheet, AdaptiveTextInput } from "./adaptive-modal-sheet";
 import { Button } from "@/components/ui/button";
 
 const styles = StyleSheet.create((theme) => ({
@@ -134,7 +133,6 @@ export function AddHostModal({ visible, onClose, onCancel, onSaved, targetServer
   const isMobile =
     UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
 
-  const InputComponent = useMemo(() => (isMobile ? BottomSheetTextInput : TextInput), [isMobile]);
   const hostInputRef = useRef<TextInput>(null);
 
   const [endpointRaw, setEndpointRaw] = useState("");
@@ -223,8 +221,8 @@ export function AddHostModal({ visible, onClose, onCancel, onSaved, targetServer
 
       <View style={styles.field}>
         <Text style={styles.label}>Host</Text>
-        <InputComponent
+        <AdaptiveTextInput
-          ref={hostInputRef as any}
+          ref={hostInputRef}
           value={endpointRaw}
           onChangeText={setEndpointRaw}
           placeholder="host:6767"

packages/app/src/components/agent-status-bar.tsx

@@ -113,7 +113,6 @@ export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
                 <DropdownMenuItem
                   key={mode.id}
                   selected={isActive}
-                  selectedVariant="accent"
                   description={mode.description}
                   onSelect={() => handleModeChange(mode.id)}
                 >
@@ -155,7 +154,6 @@ export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
                   <DropdownMenuItem
                     key={model.id}
                     selected={isActive}
-                    selectedVariant="accent"
                     description={model.description}
                     onSelect={() => {
                       if (!client) {
@@ -202,7 +200,6 @@ export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
                     <DropdownMenuItem
                       key={opt.id}
                       selected={isActive}
-                      selectedVariant="accent"
                       description={opt.description}
                       onSelect={() => {
                         if (!client) {
@@ -222,7 +219,6 @@ export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
               </DropdownMenuContent>
             </DropdownMenu>
           )}
-
         </>
       )}
 
@@ -271,7 +267,6 @@ export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
                       <DropdownMenuItem
                         key={model.id}
                         selected={isActive}
-                        selectedVariant="accent"
                         description={model.description}
                         onSelect={() => {
                           if (!client) {
@@ -314,7 +309,6 @@ export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
                         <DropdownMenuItem
                           key={opt.id}
                           selected={isActive}
-                          selectedVariant="accent"
                           description={opt.description}
                           onSelect={() => {
                             if (!client) {

packages/app/src/components/git-diff-pane.tsx

@@ -16,7 +16,7 @@ import { ScrollView, type ScrollView as ScrollViewType } from "react-native-gest
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import * as Linking from "expo-linking";
-import { ChevronDown, ChevronRight, GitBranch, MoreVertical, ArrowLeftRight, ListChevronsDownUp, ListChevronsUpDown } from "lucide-react-native";
+import { Archive, ChevronDown, ChevronRight, GitBranch, MoreVertical, ArrowLeftRight, ListChevronsDownUp, ListChevronsUpDown } from "lucide-react-native";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useSessionStore } from "@/stores/session-store";
 import {
@@ -75,7 +75,7 @@ interface GitAction {
   disabled: boolean;
   status: ActionStatus;
   description?: string;
-  destructive?: boolean;
+  icon?: ReactElement;
   handler: () => void;
 }
 
@@ -1048,7 +1048,7 @@ export function GitDiffPane({ serverId, agentId, cwd }: GitDiffPaneProps) {
         successLabel: "Archived",
         disabled: archiveDisabled,
         status: archiveAction.status,
-        destructive: true,
+        icon: <Archive size={16} color={theme.colors.foregroundMuted} />,
         handler: archiveAction.trigger,
       });
     }
@@ -1198,7 +1198,7 @@ export function GitDiffPane({ serverId, agentId, cwd }: GitDiffPaneProps) {
                     <DropdownMenuItem
                       key={action.id}
                       testID={`changes-menu-${action.id}`}
-                      destructive={action.destructive}
+                      leading={action.icon}
                       disabled={action.disabled}
                       status={action.status}
                       pendingLabel={action.pendingLabel}

packages/app/src/components/name-host-modal.tsx

@@ -1,8 +1,7 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
-import { Text, TextInput, View } from "react-native";
+import { Text, View } from "react-native";
-import { BottomSheetTextInput } from "@gorhom/bottom-sheet";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
-import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
+import { AdaptiveModalSheet, AdaptiveTextInput } from "./adaptive-modal-sheet";
-import { AdaptiveModalSheet } from "./adaptive-modal-sheet";
 import { Button } from "@/components/ui/button";
 
 const styles = StyleSheet.create((theme) => ({
@@ -45,8 +44,6 @@ export interface NameHostModalProps {
 
 export function NameHostModal({ visible, serverId, hostname, onSkip, onSave }: NameHostModalProps) {
   const { theme } = useUnistyles();
-  const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
-  const InputComponent = useMemo(() => (isMobile ? BottomSheetTextInput : TextInput), [isMobile]);
 
   const [label, setLabel] = useState("");
   const hasEditedRef = useRef(false);
@@ -91,7 +88,7 @@ export function NameHostModal({ visible, serverId, hostname, onSkip, onSave }: N
 
       <View style={styles.field}>
         <Text style={styles.label}>Label</Text>
-        <InputComponent
+        <AdaptiveTextInput
           value={label}
           onChangeText={handleChange}
           placeholder={suggested}

packages/app/src/components/pair-link-modal.tsx

@@ -1,12 +1,11 @@
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useState } from "react";
-import { Alert, Text, TextInput, View } from "react-native";
+import { Alert, Text, View } from "react-native";
 import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
-import { BottomSheetTextInput } from "@gorhom/bottom-sheet";
 import { Link } from "lucide-react-native";
 import { useDaemonRegistry, type HostProfile } from "@/contexts/daemon-registry-context";
 import { decodeOfferFragmentPayload } from "@/utils/daemon-endpoints";
 import { ConnectionOfferSchema } from "@server/shared/connection-offer";
-import { AdaptiveModalSheet } from "./adaptive-modal-sheet";
+import { AdaptiveModalSheet, AdaptiveTextInput } from "./adaptive-modal-sheet";
 import { Button } from "@/components/ui/button";
 
 const styles = StyleSheet.create((theme) => ({
@@ -55,7 +54,6 @@ export function PairLinkModal({ visible, onClose, onCancel, onSaved, targetServe
   const { daemons, upsertDaemonFromOfferUrl } = useDaemonRegistry();
   const isMobile =
     UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
-  const InputComponent = useMemo(() => (isMobile ? BottomSheetTextInput : TextInput), [isMobile]);
 
   const [offerUrl, setOfferUrl] = useState("");
   const [isSaving, setIsSaving] = useState(false);
@@ -143,7 +141,7 @@ export function PairLinkModal({ visible, onClose, onCancel, onSaved, targetServe
 
       <View style={styles.field}>
         <Text style={styles.label}>Pairing link</Text>
-        <InputComponent
+        <AdaptiveTextInput
           testID="pair-link-input"
           nativeID="pair-link-input"
           accessibilityLabel="pair-link-input"

packages/app/src/components/ui/dropdown-menu.tsx

@@ -470,12 +470,11 @@ export function DropdownMenuItem({
         }
         onSelect?.();
       }}
-      style={({ pressed }) => [
+      style={({ pressed, hovered }) => [
         styles.item,
         selected ? (selectedVariant === "accent" ? styles.itemSelectedAccent : styles.itemSelected) : null,
-        destructive && !isSuccess ? styles.itemDestructive : null,
         isDisabled ? styles.itemDisabled : null,
-        pressed && !isDisabled ? styles.itemPressed : null,
+        (hovered || pressed) && !isDisabled ? styles.itemHovered : null,
       ]}
     >
       {showSelectedCheck ? (
@@ -527,7 +526,7 @@ const styles = StyleSheet.create((theme) => ({
   content: {
     backgroundColor: theme.colors.surface0,
     borderWidth: 1,
-    borderColor: theme.colors.borderAccent,
+    borderColor: theme.colors.border,
     borderRadius: theme.borderRadius.lg,
     overflow: "hidden",
     shadowColor: "#000",
@@ -567,7 +566,7 @@ const styles = StyleSheet.create((theme) => ({
     paddingHorizontal: theme.spacing[3],
     paddingVertical: theme.spacing[2],
   },
-  itemPressed: {
+  itemHovered: {
     backgroundColor: theme.colors.surface2,
   },
   itemSelected: {
@@ -579,13 +578,10 @@ const styles = StyleSheet.create((theme) => ({
   itemDisabled: {
     opacity: 0.5,
   },
-  itemDestructive: {
-    backgroundColor: "rgba(248, 81, 73, 0.08)",
-  },
   itemText: {
     fontSize: theme.fontSize.sm,
     color: theme.colors.foreground,
-    fontWeight: theme.fontWeight.medium,
+    fontWeight: theme.fontWeight.normal,
   },
   itemTextDestructive: {
     color: theme.colors.destructive,

packages/website/src/routes/index.tsx

@@ -26,17 +26,17 @@ function Home() {
         style={{ backgroundImage: 'url(/hero-bg.jpg)' }}
       >
         <div className="absolute inset-0 bg-background/90" />
-        <div className="absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-black to-transparent" />
+        <div className="absolute inset-x-0 bottom-0 h-64 bg-gradient-to-t from-black to-transparent" />
 
-        <div className="relative p-6 md:px-20 md:pt-20 md:pb-2 max-w-3xl mx-auto">
+        <div className="relative p-6 pb-10 md:px-20 md:pt-20 md:pb-12 max-w-3xl mx-auto">
           <Nav />
           <Hero />
           <GetStarted />
         </div>
 
         {/* Mockup - inside hero so it's above the gradient, positioned to overflow into black section */}
-        <div className="relative px-6 md:px-8 pb-8 md:pb-16 md:mb-[-200px]">
+        <div className="relative px-6 md:px-8 pb-8 md:pb-16">
-          <div className="max-w-5xl mx-auto">
+          <div className="max-w-6xl mx-auto">
             <img
               src="/paseo-mockup.png"
               alt="Paseo app showing agent management interface"
@@ -48,7 +48,7 @@ function Home() {
 
       {/* Content section */}
       <div className="bg-black">
-        <main className="p-6 md:p-20 md:pt-56 max-w-3xl mx-auto">
+        <main className="p-6 md:p-20 md:pt-8 max-w-3xl mx-auto">
           <Features />
           <Story />
           <FAQ />