Add a Schedules screen to manage recurring agents

packages/app/e2e/bottom-sheet-reopen.spec.ts

@@ -36,24 +36,43 @@ function bottomSheetBackdrop(page: Page) {
   return page.getByRole("button", { name: "Bottom sheet backdrop" }).first();
 }
 
+function bottomSheetHandle(page: Page) {
+  return page.getByRole("slider", { name: "Bottom sheet handle" }).first();
+}
+
 async function expectBottomSheetOpen(page: Page) {
   await expect(bottomSheetBackdrop(page)).toBeVisible({ timeout: 10_000 });
 }
 
 async function closeBottomSheetWithBackdrop(page: Page) {
   const backdrop = bottomSheetBackdrop(page);
-  // A single backdrop tap can be dropped when it lands mid present-animation:
-  // Gorhom ignores backdrop presses until the sheet settles at its snap point,
-  // which a loaded CI runner makes likely (the model selector's sheet animates a
-  // touch longer than the tab switcher's). Re-tap until the sheet dismisses. This
-  // stays a pure backdrop dismissal — no Escape/pan fallback — so it still
-  // exercises the real close path; the post-close guard below is what protects
-  // the regression this test exists for: a sheet that dismisses, then re-presents.
+  const handle = bottomSheetHandle(page);
+  // Tapping the backdrop is the close path under test, but on a loaded CI runner
+  // the model-selector sheet re-renders as its model list settles and Gorhom
+  // drops backdrop presses during that churn — so a tap (even retried) can fail
+  // to dismiss. Tap the backdrop first; if it survives, drag the handle down,
+  // which drives Gorhom's pan-to-close directly and is unaffected by the churn.
+  // The post-close guard below still protects the regression this test exists
+  // for: a sheet that dismisses, then re-presents.
   await expect(async () => {
+    if (!(await backdrop.isVisible())) {
+      return;
+    }
+    const box = await backdrop.boundingBox();
+    if (box) {
+      await page.mouse.click(box.x + box.width / 2, box.y + 24);
+    }
+    await page.waitForTimeout(150);
     if (await backdrop.isVisible()) {
-      const box = await backdrop.boundingBox();
-      expect(box).not.toBeNull();
-      await page.mouse.click(box!.x + box!.width / 2, box!.y + 24);
+      const handleBox = await handle.boundingBox();
+      if (handleBox) {
+        const startX = handleBox.x + handleBox.width / 2;
+        const startY = handleBox.y + handleBox.height / 2;
+        await page.mouse.move(startX, startY);
+        await page.mouse.down();
+        await page.mouse.move(startX, startY + 400, { steps: 8 });
+        await page.mouse.up();
+      }
     }
     await expect(backdrop).not.toBeVisible({ timeout: 1_000 });
   }).toPass({ timeout: 15_000 });

packages/app/src/app/_layout.tsx

@@ -865,6 +865,7 @@ function RootStack() {
       <Stack.Screen name="h/[serverId]/agent/[agentId]" options={AGENT_SCREEN_OPTIONS} />
       <Stack.Screen name="h/[serverId]/index" />
       <Stack.Screen name="h/[serverId]/sessions" />
+      <Stack.Screen name="h/[serverId]/schedules" />
       <Stack.Screen name="h/[serverId]/open-project" />
       <Stack.Screen name="h/[serverId]/settings" />
       <Stack.Screen name="settings/hosts/[serverId]" />

packages/app/src/app/h/[serverId]/schedules.tsx

@@ -0,0 +1,18 @@
+import { useLocalSearchParams } from "expo-router";
+import { HostRouteBootstrapBoundary } from "@/components/host-route-bootstrap-boundary";
+import { SchedulesScreen } from "@/screens/schedules-screen";
+
+export default function HostSchedulesRoute() {
+  return (
+    <HostRouteBootstrapBoundary>
+      <HostSchedulesRouteContent />
+    </HostRouteBootstrapBoundary>
+  );
+}
+
+function HostSchedulesRouteContent() {
+  const params = useLocalSearchParams<{ serverId?: string }>();
+  const serverId = typeof params.serverId === "string" ? params.serverId : "";
+
+  return <SchedulesScreen serverId={serverId} />;
+}

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

@@ -1,4 +1,4 @@
-import { forwardRef, useCallback, useEffect, useMemo } from "react";
+import { forwardRef, useCallback, useEffect, useMemo, useRef } from "react";
 import type { ReactNode, Ref } from "react";
 import { createPortal } from "react-dom";
 import { Modal, Pressable, ScrollView, Text, TextInput, View } from "react-native";
@@ -20,6 +20,7 @@ import {
   useIsolatedBottomSheetVisibility,
 } from "@/components/ui/isolated-bottom-sheet-modal";
 import { isNative, isWeb } from "@/constants/platform";
+import { useWebScrollViewScrollbar } from "@/components/use-web-scrollbar";
 
 // Horizontal indent token shared by the sheet header (title, back arrow,
 // leading icon, search input icon) and any row primitive rendered inside the
@@ -176,6 +177,11 @@ const styles = StyleSheet.create((theme) => ({
     color: theme.colors.foreground,
     fontSize: theme.fontSize.sm,
   },
+  desktopScrollContainer: {
+    flexShrink: 1,
+    minHeight: 0,
+    position: "relative",
+  },
   desktopScroll: {
     flexShrink: 1,
     minHeight: 0,
@@ -442,6 +448,11 @@ export interface AdaptiveModalSheetProps {
   /** When provided, wraps the card content in a FileDropZone. */
   onFilesDropped?: (files: ImageAttachment[]) => void;
   scrollable?: boolean;
+  /**
+   * Render the themed desktop-web scrollbar over the scroll area instead of the
+   * native browser scrollbar. No-op on native and on the mobile bottom sheet.
+   */
+  webScrollbar?: boolean;
 }
 
 export function AdaptiveModalSheet({
@@ -455,9 +466,14 @@ export function AdaptiveModalSheet({
   desktopMaxWidth,
   onFilesDropped,
   scrollable = true,
+  webScrollbar = false,
 }: AdaptiveModalSheetProps) {
   const { theme } = useUnistyles();
   const isMobile = useIsCompactFormFactor();
+  const desktopScrollRef = useRef<ScrollView>(null);
+  const desktopScrollbar = useWebScrollViewScrollbar(desktopScrollRef, {
+    enabled: webScrollbar && !isMobile,
+  });
   const resolvedSnapPoints = useMemo(() => snapPoints ?? ["65%", "90%"], [snapPoints]);
   const handleIndicatorStyle = useMemo(
     () => ({ backgroundColor: theme.colors.surface2 }),
@@ -524,13 +540,22 @@ export function AdaptiveModalSheet({
     <>
       <SheetHeaderView header={header} onClose={onClose} />
       {scrollable ? (
-        <ScrollView
-          style={styles.desktopScroll}
-          contentContainerStyle={styles.desktopContent}
-          keyboardShouldPersistTaps="handled"
-        >
-          {children}
-        </ScrollView>
+        <View style={styles.desktopScrollContainer}>
+          <ScrollView
+            ref={desktopScrollRef}
+            style={styles.desktopScroll}
+            contentContainerStyle={styles.desktopContent}
+            keyboardShouldPersistTaps="handled"
+            onLayout={desktopScrollbar.onLayout}
+            onScroll={desktopScrollbar.onScroll}
+            onContentSizeChange={desktopScrollbar.onContentSizeChange}
+            scrollEventThrottle={16}
+            showsVerticalScrollIndicator={!webScrollbar}
+          >
+            {children}
+          </ScrollView>
+          {desktopScrollbar.overlay}
+        </View>
       ) : (
         <View style={styles.desktopStaticContent}>{children}</View>
       )}

packages/app/src/components/combined-model-selector.tsx

@@ -87,13 +87,24 @@ interface CombinedModelSelectorProps {
     onPress: () => void;
     disabled: boolean;
     isOpen: boolean;
+    hovered: boolean;
+    pressed: boolean;
   }) => React.ReactNode;
   onOpen?: () => void;
   onClose?: () => void;
   onRetryProvider?: (provider: AgentProvider) => void;
   isRetryingProvider?: boolean;
   disabled?: boolean;
   serverId?: string | null;
+  /**
+   * Render the custom trigger as a full-width form field: the outer Pressable
+   * becomes a transparent passthrough that stretches its child edge-to-edge and
+   * stops painting its own hover/pressed background and rounded corners. The
+   * trigger itself owns the field visuals and reads hovered/pressed to show its
+   * active state. Without this the trigger stays a content-width toolbar chip
+   * (the composer's layout).
+   */
+  triggerFill?: boolean;
 }
 
 interface SelectorContentProps {
@@ -571,6 +582,7 @@ export function CombinedModelSelector({
   isRetryingProvider = false,
   disabled = false,
   serverId = null,
+  triggerFill = false,
 }: CombinedModelSelectorProps) {
   const { theme } = useUnistyles();
   const anchorRef = useRef<View>(null);
@@ -690,14 +702,26 @@ export function CombinedModelSelector({
   }, [handleOpenChange]);
 
   const triggerStyle = useCallback(
-    ({ pressed, hovered }: PressableStateCallbackType & { hovered?: boolean }) => [
-      styles.trigger,
-      Boolean(hovered) && styles.triggerHovered,
-      (pressed || isOpen) && styles.triggerPressed,
-      disabled && styles.triggerDisabled,
-      renderTrigger ? styles.customTriggerWrapper : null,
-    ],
-    [disabled, isOpen, renderTrigger],
+    ({ pressed, hovered }: PressableStateCallbackType & { hovered?: boolean }) => {
+      // Fill mode: transparent full-width passthrough. The trigger paints its own
+      // hover/pressed state from the args, so the wrapper must not double-paint.
+      if (triggerFill) {
+        return [
+          styles.trigger,
+          styles.customTriggerWrapper,
+          styles.triggerFill,
+          disabled && styles.triggerDisabled,
+        ];
+      }
+      return [
+        styles.trigger,
+        Boolean(hovered) && styles.triggerHovered,
+        (pressed || isOpen) && styles.triggerPressed,
+        disabled && styles.triggerDisabled,
+        renderTrigger ? styles.customTriggerWrapper : null,
+      ];
+    },
+    [disabled, isOpen, renderTrigger, triggerFill],
   );
 
   const handleBackToAll = useCallback(() => {
@@ -783,24 +807,28 @@ export function CombinedModelSelector({
         accessibilityLabel={`Select model (${selectedModelLabel})`}
         testID="combined-model-selector"
       >
-        {renderTrigger ? (
-          renderTrigger({
-            selectedModelLabel: triggerLabel,
-            onPress: handleTriggerPress,
-            disabled,
-            isOpen,
-          })
-        ) : (
-          <>
-            {ProviderIcon ? (
-              <ProviderIcon size={theme.iconSize.md} color={theme.colors.foregroundMuted} />
-            ) : null}
-            <Text style={styles.triggerText} numberOfLines={1} ellipsizeMode="tail">
-              {triggerLabel}
-            </Text>
-            <ChevronDown size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
-          </>
-        )}
+        {({ pressed, hovered }: PressableStateCallbackType & { hovered?: boolean }) =>
+          renderTrigger ? (
+            renderTrigger({
+              selectedModelLabel: triggerLabel,
+              onPress: handleTriggerPress,
+              disabled,
+              isOpen,
+              hovered: Boolean(hovered),
+              pressed,
+            })
+          ) : (
+            <>
+              {ProviderIcon ? (
+                <ProviderIcon size={theme.iconSize.md} color={theme.colors.foregroundMuted} />
+              ) : null}
+              <Text style={styles.triggerText} numberOfLines={1} ellipsizeMode="tail">
+                {triggerLabel}
+              </Text>
+              <ChevronDown size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
+            </>
+          )
+        }
       </Pressable>
       <Combobox
         options={EMPTY_COMBOBOX_OPTIONS}
@@ -873,6 +901,16 @@ const styles = StyleSheet.create((theme) => ({
     paddingVertical: 0,
     height: "auto",
   },
+  // Stretch the wrapper (and, via column + stretch, its single child) to the
+  // full width of the field, with no background or rounding of its own.
+  triggerFill: {
+    alignSelf: "stretch",
+    flexShrink: 0,
+    flexDirection: "column",
+    alignItems: "stretch",
+    backgroundColor: "transparent",
+    borderRadius: 0,
+  },
   favoritesContainer: {
     backgroundColor: theme.colors.surface1,
     borderBottomWidth: 1,