Unify mobile styling and handle retired worktree locations

apps/mobile/src/app.tsx

@@ -17,7 +17,7 @@ import { ConnectionRuntimeProvider } from "./state/connection-runtime-context";
 import { FollowedProjectsProvider } from "./state/followed-projects-context";
 import { TranscriptPreferencesProvider } from "./state/transcript-preferences";
 import { migrateMobileDatabase, mobileDatabaseName } from "./storage/database";
-import { palette } from "./theme";
+import { control, palette, typography } from "./theme";
 import { AppUpdateBanner, AppUpdateCard, AppUpdatesProvider } from "./updates/app-updates";
 
 const queryClient = new QueryClient({
@@ -158,10 +158,8 @@ const styles = StyleSheet.create({
     marginTop: 12,
   },
   errorEyebrow: {
+    ...typography.label,
     color: palette.danger,
-    fontSize: 12,
-    fontWeight: "800",
-    letterSpacing: 1.6,
   },
   errorShell: {
     backgroundColor: palette.background,
@@ -170,34 +168,27 @@ const styles = StyleSheet.create({
     padding: 28,
   },
   errorTitle: {
+    ...typography.title,
     color: palette.ink,
-    fontSize: 30,
-    fontWeight: "700",
-    letterSpacing: -0.8,
-    lineHeight: 35,
     marginTop: 10,
   },
   retryButton: {
+    ...control,
     alignSelf: "flex-start",
     backgroundColor: palette.signal,
-    borderRadius: 8,
     marginTop: 24,
-    paddingHorizontal: 20,
-    paddingVertical: 12,
   },
   retryLabel: {
+    ...typography.control,
     color: palette.background,
-    fontSize: 15,
-    fontWeight: "800",
   },
   reportButton: {
     marginTop: 18,
     minHeight: 44,
     paddingVertical: 12,
   },
   reportLabel: {
+    ...typography.control,
     color: palette.dim,
-    fontSize: 14,
-    fontWeight: "700",
   },
 });

apps/mobile/src/components/modal-sheet.tsx

@@ -13,7 +13,7 @@ import {
 } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 
-import { palette, space, typeRamp, usesLargeTextLayout } from "../theme";
+import { palette, space, typeRamp, typography, usesLargeTextLayout } from "../theme";
 
 export function ModalSheet({
   children,
@@ -108,7 +108,7 @@ export function ModalSheet({
 
 const styles = StyleSheet.create({
   closeButton: { justifyContent: "center", minHeight: 44, paddingHorizontal: space.sm },
-  closeLabel: { color: palette.signal, fontSize: 16, fontWeight: "700" },
+  closeLabel: { ...typography.control, color: palette.signal },
   content: { gap: space.md, padding: space.lg, paddingBottom: space.xl },
   fixedContent: { flex: 1, gap: space.md, padding: space.lg, paddingBottom: space.xl },
   header: {
@@ -125,6 +125,6 @@ const styles = StyleSheet.create({
   keyboardView: { flex: 1 },
   pressed: { opacity: 0.55 },
   safeArea: { backgroundColor: palette.background, flex: 1 },
-  subtitle: { color: palette.dim, fontSize: 12, marginTop: 2 },
-  title: { color: palette.ink, fontSize: 20, fontWeight: "700" },
+  subtitle: { ...typography.caption, color: palette.dim, marginTop: 2 },
+  title: { ...typography.sheetTitle, color: palette.ink },
 });

apps/mobile/src/components/working-indicator.tsx

@@ -85,8 +85,8 @@ export function WorkingIndicator({ variant = "dots" }: { variant?: "dots" | "blo
           style={[
             styles.dot,
             {
-              left: bit < 3 ? 0 : 6,
-              top: (bit % 3) * 6,
+              left: bit < 3 ? 0 : 4.5,
+              top: (bit % 3) * 4.5,
               opacity: (0x0b & (1 << bit)) !== 0 ? 1 : 0,
             },
             !reducedMotion && {
@@ -106,6 +106,6 @@ export function WorkingIndicator({ variant = "dots" }: { variant?: "dots" | "blo
 const styles = StyleSheet.create({
   blocks: { flexDirection: "row", flexShrink: 0, gap: 1 },
   block: { width: 5, height: 6, backgroundColor: palette.activity },
-  icon: { width: 10, height: 16, flexShrink: 0 },
-  dot: { position: "absolute", width: 4, height: 4, backgroundColor: palette.signal },
+  icon: { width: 7.5, height: 12, flexShrink: 0 },
+  dot: { position: "absolute", width: 3, height: 3, backgroundColor: palette.activity },
 });

apps/mobile/src/navigation/root-navigation.tsx

@@ -269,7 +269,7 @@ const styles = StyleSheet.create({
   header: {
     alignItems: "center",
     flexDirection: "row",
-    height: 44,
+    minHeight: 44,
     paddingHorizontal: 8,
   },
   headerButtonPressed: { opacity: 0.55 },

apps/mobile/src/navigation/workspace-header-actions.tsx

@@ -4,7 +4,7 @@ import { Keyboard, Pressable, StyleSheet, Text, View } from "react-native";
 
 import { ModalSheet } from "../components/modal-sheet";
 import { useWorkspaceSelection } from "../state/workspace-selection-context";
-import { palette, radius, space } from "../theme";
+import { palette, radius, space, typography } from "../theme";
 
 type HeaderDestination = "Connections" | "FollowedProjects" | "Pending" | "Settings";
 
@@ -169,15 +169,15 @@ const styles = StyleSheet.create({
   },
   menuButtonLast: { borderBottomWidth: 0 },
   menuCopy: { flex: 1, minWidth: 0 },
-  menuDescription: { color: palette.dim, fontSize: 12, marginTop: 3 },
+  menuDescription: { ...typography.caption, color: palette.dim, marginTop: 3 },
   menuGroup: {
     backgroundColor: palette.card,
     borderColor: palette.border,
     borderRadius: radius.md,
     borderWidth: 1,
     overflow: "hidden",
   },
-  menuLabel: { color: palette.ink, fontSize: 15, fontWeight: "700" },
+  menuLabel: { ...typography.heading, color: palette.ink },
   optionsButton: {
     alignItems: "center",
     borderRadius: 22,

apps/mobile/src/screens/app-shell.test.ts

@@ -214,52 +214,71 @@ test("allows a permission owned by a background child session from Pending", ()
   view.unmount();
 });
 
-test("reports partial location failures without blaming a live connection", async () => {
-  const refetch = jest.fn(async () => undefined);
-  const navigate = jest.fn();
-  jest.mocked(useConnections).mockReturnValue({
-    profiles: [{ id: "connection-1", name: "Test server" }],
-    selectedProfileId: "connection-1",
-  } as never);
-  jest.mocked(useConnectionRuntime).mockReturnValue({
-    reconnectAttempt: 0,
-    status: "connected",
-  } as never);
-  jest.mocked(useWorkspaceSelection).mockReturnValue({
-    attentionCoverage: {
-      completeness: "incomplete",
-      failedLocationCount: 1,
-      failedProjects: [{ label: "Alpha", locationCount: 1, projectID: "project-1" }],
-      freshness: "stale",
-      knownLocationCount: 7,
-      reconciledLocationCount: 6,
-    },
-    followedProjectIds: ["project-1"],
-    forms: [],
-    interactionsError: true,
-    interactionsLoading: false,
-    pendingCount: 0,
-    permissions: [],
-    preferencesLoading: false,
-    refetch,
-  } as never);
+test.each([0, 1])(
+  "explains unavailable locations with %i known requests on a live connection",
+  async (pendingCount) => {
+    const refetch = jest.fn(async () => undefined);
+    const navigate = jest.fn();
+    jest.mocked(useConnections).mockReturnValue({
+      profiles: [{ id: "connection-1", name: "Test server" }],
+      selectedProfileId: "connection-1",
+    } as never);
+    jest.mocked(useConnectionRuntime).mockReturnValue({
+      reconnectAttempt: 0,
+      status: "connected",
+    } as never);
+    jest.mocked(useWorkspaceSelection).mockReturnValue({
+      attentionCoverage: {
+        completeness: "incomplete",
+        failedLocationCount: 1,
+        failedLocations: [
+          {
+            location: { directory: "/a/worktrees/old" },
+            projectLabel: "Alpha",
+            source: "session-history",
+            failedChecks: ["permissions", "forms"],
+          },
+        ],
+        failedProjects: [{ label: "Alpha", locationCount: 1, projectID: "project-1" }],
+        freshness: "stale",
+        knownLocationCount: 7,
+        reconciledLocationCount: 6,
+      },
+      followedProjectIds: ["project-1"],
+      forms: [],
+      interactionsError: true,
+      interactionsLoading: false,
+      pendingCount,
+      permissions: [],
+      preferencesLoading: false,
+      refetch,
+    } as never);
 
-  const view = render(
-    createElement(PendingInteractionsScreen, {
-      navigation: { navigate, popTo: jest.fn() },
-    } as never),
-  );
+    const view = render(
+      createElement(PendingInteractionsScreen, {
+        navigation: { navigate, popTo: jest.fn() },
+      } as never),
+    );
 
-  expect(screen.queryByRole("header", { name: "Requests that need you." })).toBeNull();
-  expect(screen.getByText("1 location could not be checked.")).toBeOnTheScreen();
-  expect(
-    screen.getByText(
-      /Affected project: Alpha\. No requests were found at the 6 locations that responded\./,
-    ),
-  ).toBeOnTheScreen();
-  fireEvent.press(screen.getByRole("button", { name: "Retry" }));
-  await waitFor(() => expect(refetch).toHaveBeenCalledTimes(1));
-  expect(screen.queryByRole("button", { name: "Connections" })).toBeNull();
-  expect(navigate).not.toHaveBeenCalled();
-  view.unmount();
-});
+    expect(screen.queryByRole("header", { name: "Requests that need you." })).toBeNull();
+    expect(screen.getByText("1 location could not be checked.")).toBeOnTheScreen();
+    expect(
+      screen.getByText(
+        pendingCount === 0
+          ? /Affected project: Alpha\. No requests were found at the 6 locations that responded\./
+          : /Showing requests found at the other locations/,
+      ),
+    ).toBeOnTheScreen();
+    fireEvent.press(screen.getByRole("button", { name: "Review locations" }));
+    expect(screen.getByText("/a/worktrees/old")).toBeOnTheScreen();
+    expect(screen.getByText("Referenced by session history")).toBeOnTheScreen();
+    expect(screen.getByText(/may have been moved or removed/)).toBeOnTheScreen();
+    expect(screen.getByText(/Session history is preserved/)).toBeOnTheScreen();
+    fireEvent.press(screen.getByRole("button", { name: "Close Unavailable locations" }));
+    fireEvent.press(screen.getByRole("button", { name: "Retry" }));
+    await waitFor(() => expect(refetch).toHaveBeenCalledTimes(1));
+    expect(screen.queryByRole("button", { name: "Connections" })).toBeNull();
+    expect(navigate).not.toHaveBeenCalled();
+    view.unmount();
+  },
+);