Fix mobile transcript presentation and background shell progress

apps/mobile/src/components/copy-text-button.tsx

@@ -44,7 +44,7 @@ export function CopyTextButton({
       style={styles.action}
     >
       {iconOnly && !status ? (
-        <Feather accessible={false} name="copy" size={20} color={palette.dim} />
+        <Feather accessible={false} name="copy" size={14} color={palette.dim} />
       ) : (
         <Text style={styles.label}>
           {status === "copied" ? "Copied" : status === "failed" ? "Retry copy" : label}

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

@@ -156,8 +156,8 @@ const styles = StyleSheet.create({
   compactScroll: { flexGrow: 0, flexShrink: 1 },
   closeButton: { justifyContent: "center", minHeight: 44, paddingHorizontal: space.sm },
   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 },
+  content: { gap: space.md, padding: space.md, paddingBottom: space.xl },
+  fixedContent: { flex: 1, gap: space.md, padding: space.md, paddingBottom: space.xl },
   header: {
     alignItems: "center",
     borderBottomColor: palette.border,

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

@@ -86,6 +86,7 @@ export function RootNavigation() {
         headerShown: !tablet,
         headerStyle: { backgroundColor: palette.background },
         headerTintColor: palette.ink,
+        headerTitleStyle: { fontSize: 16, fontWeight: "500" },
       }}
     >
       <Stack.Screen
@@ -283,8 +284,8 @@ const styles = StyleSheet.create({
   headerTitle: {
     color: palette.ink,
     flex: 1,
-    fontSize: 17,
-    fontWeight: "700",
+    fontSize: 15,
+    fontWeight: "500",
     textAlign: "center",
   },
 });

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

@@ -53,8 +53,8 @@ export function WorkspaceHeaderActions({
           accessibilityElementsHidden
           color={palette.signal}
           importantForAccessibility="no-hide-descendants"
-          name="settings"
-          size={25}
+          name="more-horizontal"
+          size={20}
         />
       </Pressable>
       <ModalSheet
@@ -151,10 +151,6 @@ function MenuButton({
 const styles = StyleSheet.create({
   actions: {
     alignItems: "center",
-    backgroundColor: palette.card,
-    borderColor: palette.border,
-    borderRadius: 24,
-    borderWidth: StyleSheet.hairlineWidth,
     flexDirection: "row",
   },
   disclosure: { color: palette.dim, fontSize: 18, marginLeft: space.sm },

apps/mobile/src/screens/app-shell.tsx

@@ -995,16 +995,16 @@ export function ActionButton({
 }
 
 const styles = StyleSheet.create({
-  sessionTabs: { flexDirection: "row", gap: space.md },
+  sessionTabs: { flexDirection: "row", gap: space.sm },
   sessionTab: {
     minHeight: 44,
     justifyContent: "center",
-    borderBottomWidth: 2,
+    borderBottomWidth: 1,
     borderBottomColor: "transparent",
     paddingHorizontal: space.xs,
   },
   sessionTabSelected: { borderBottomColor: palette.ink },
-  sessionTabText: { ...typography.control, color: palette.dim },
+  sessionTabText: { color: palette.dim, fontSize: 14, lineHeight: 20 },
   sessionTabTextSelected: { color: palette.ink },
   sessionConnectionIssue: { minHeight: 44, justifyContent: "center", paddingHorizontal: space.md },
   locationFailure: {
@@ -1057,7 +1057,7 @@ const styles = StyleSheet.create({
   branchControlPressed: { opacity: 0.55 },
   branchDetailName: { color: palette.ink, fontSize: 17, lineHeight: 25 },
   branchDetailNote: { color: palette.warm, fontSize: 14, lineHeight: 20 },
-  branchName: { color: palette.dim, flexShrink: 1, fontSize: 13, minWidth: 0 },
+  branchName: { color: palette.dim, flexShrink: 1, fontSize: 14, minWidth: 0 },
   actionCard: {
     backgroundColor: palette.card,
     borderColor: palette.border,
@@ -1105,7 +1105,7 @@ const styles = StyleSheet.create({
   },
   connectionName: {
     color: palette.dim,
-    fontSize: 13,
+    fontSize: 14,
     textAlign: "right",
   },
   connectionNameControl: {
@@ -1178,7 +1178,7 @@ const styles = StyleSheet.create({
   navigationItemPressed: { opacity: 0.68 },
   navigationLabel: {
     color: palette.dim,
-    fontSize: 13,
+    fontSize: 14,
     fontWeight: "600",
     textAlign: "center",
   },

apps/mobile/src/screens/connection-screen.tsx

@@ -1235,7 +1235,7 @@ const styles = StyleSheet.create({
   },
   guidanceText: {
     color: palette.dim,
-    fontSize: 13,
+    fontSize: 14,
     lineHeight: 20,
   },
   guidanceTitle: {
@@ -1609,7 +1609,7 @@ const styles = StyleSheet.create({
   },
   warningText: {
     color: palette.dim,
-    fontSize: 13,
+    fontSize: 14,
     lineHeight: 19,
     marginTop: space.xs,
   },

apps/mobile/src/screens/diff-screen.tsx

@@ -359,7 +359,7 @@ const styles = StyleSheet.create({
   lineMeta: { color: palette.dim },
   pressed: { opacity: 0.7 },
   retry: { justifyContent: "center", minHeight: 44, paddingRight: space.md },
-  retryLabel: { color: palette.signal, fontSize: 13, fontWeight: "700" },
+  retryLabel: { color: palette.signal, fontSize: 14, fontWeight: "700" },
   state: { gap: space.sm },
   stateDetail: { color: palette.dim, fontSize: 15, lineHeight: 22 },
   stateTitle: { ...typography.heading, color: palette.ink },

apps/mobile/src/screens/model-picker.tsx

@@ -129,7 +129,7 @@ export function ModelPicker({
           const favorite = favoritesByID.has(modelIdentityKey(item));
           const selected = item.id === model?.id && item.providerID === model.providerID;
           return (
-            <View style={styles.row}>
+            <View style={[styles.row, selected && styles.selectedRow]}>
               <Pressable
                 accessibilityRole="button"
                 accessibilityLabel={`${item.name}, ${item.providerID}`}
@@ -199,20 +199,21 @@ const styles = StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center",
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: palette.border,
+    borderRadius: 6,
+    paddingHorizontal: space.sm,
   },
   choice: {
     flex: 1,
     flexDirection: "row",
     alignItems: "center",
-    minHeight: 64,
+    minHeight: 52,
     paddingVertical: space.sm,
     paddingRight: space.sm,
     gap: space.sm,
   },
   copy: { flex: 1, minWidth: 0 },
-  label: { ...typography.heading, color: palette.ink },
+  selectedRow: { backgroundColor: palette.raised },
+  label: { ...typography.body, color: palette.ink },
   provider: { ...typography.caption, color: palette.dim, marginTop: 3 },
   star: { minWidth: 48, minHeight: 48, alignItems: "center", justifyContent: "center" },
   starText: { fontSize: 26, color: palette.dim },

apps/mobile/src/screens/new-session-screen.tsx

@@ -562,7 +562,7 @@ const styles = StyleSheet.create({
   cancelButton: { justifyContent: "center", minHeight: 44, paddingHorizontal: space.xs },
   cancelLabel: { ...typography.control, color: palette.signal },
   clearButton: { justifyContent: "center", minHeight: 44, paddingHorizontal: space.md },
-  clearLabel: { color: palette.signal, fontSize: 13, fontWeight: "800" },
+  clearLabel: { color: palette.signal, fontSize: 14, fontWeight: "800" },
   creatingState: {
     alignItems: "center",
     borderTopColor: palette.border,
@@ -576,10 +576,10 @@ const styles = StyleSheet.create({
   emptyState: { alignItems: "center", gap: space.xs, paddingVertical: space.xl },
   error: { color: palette.danger, fontSize: 14, lineHeight: 20, textAlign: "center" },
   followNote: { color: palette.signal, fontSize: 11, fontWeight: "800", marginTop: space.xs },
-  followingCopy: { color: palette.dim, fontSize: 13, lineHeight: 19 },
+  followingCopy: { color: palette.dim, fontSize: 14, lineHeight: 19 },
   footerError: {
     color: palette.danger,
-    fontSize: 13,
+    fontSize: 14,
     lineHeight: 18,
     paddingHorizontal: space.lg,
     paddingVertical: space.md,

apps/mobile/src/screens/notification-pairing-screen.tsx

@@ -527,7 +527,7 @@ const styles = StyleSheet.create({
     marginTop: space.lg,
     overflow: "hidden",
   },
-  cameraHint: { color: palette.dim, fontSize: 13, padding: space.md, textAlign: "center" },
+  cameraHint: { color: palette.dim, fontSize: 14, padding: space.md, textAlign: "center" },
   closeButton: { justifyContent: "center", minHeight: 44, paddingLeft: space.md },
   closeLabel: { ...typography.control, color: palette.signal },
   codeInput: {
@@ -584,7 +584,7 @@ const styles = StyleSheet.create({
     padding: space.lg,
   },
   previewEyebrow: { ...typography.label, color: palette.success },
-  previewMeta: { color: palette.dim, fontSize: 13, lineHeight: 19, marginTop: space.sm },
+  previewMeta: { color: palette.dim, fontSize: 14, lineHeight: 19, marginTop: space.sm },
   previewName: { ...typography.heading, color: palette.ink, marginTop: space.xs },
   previewOrigin: { color: palette.ink, fontSize: 14, marginTop: space.xs },
   safeArea: { backgroundColor: palette.background, flex: 1 },

apps/mobile/src/screens/session-composer.tsx

@@ -781,14 +781,14 @@ const styles = StyleSheet.create({
   editorRow: { alignItems: "center", flexDirection: "row", minWidth: 0 },
   editorRowExpanded: { alignItems: "stretch" },
   emptyResults: { color: palette.dim, paddingVertical: space.lg, textAlign: "center" },
-  error: { color: palette.danger, fontSize: 13, lineHeight: 18 },
+  error: { color: palette.danger, fontSize: 14, lineHeight: 18 },
   input: {
     color: palette.ink,
     flex: 1,
-    fontSize: 17,
+    fontSize: 16,
     lineHeight: 23,
   },
-  inputCollapsed: { height: 42, paddingHorizontal: space.sm, paddingVertical: 0 },
+  inputCollapsed: { height: 42, paddingHorizontal: 4, paddingVertical: 0 },
   inputExpanded: {
     paddingHorizontal: 4,
     paddingVertical: 4,
@@ -827,13 +827,13 @@ const styles = StyleSheet.create({
     minHeight: 44,
     paddingHorizontal: 4,
   },
-  selectorLabel: { color: palette.dim, flexShrink: 1, fontSize: 15, fontWeight: "500" },
+  selectorLabel: { color: palette.dim, flexShrink: 1, fontSize: 14, fontWeight: "400" },
   selectorRow: { alignItems: "center", gap: space.xs, paddingRight: space.xs },
   selectorScroller: { flex: 1 },
   sendButton: {
     alignItems: "center",
     backgroundColor: palette.signal,
-    borderRadius: 999,
+    borderRadius: radius.sm,
     justifyContent: "center",
     minHeight: 44,
     width: 44,
@@ -852,10 +852,10 @@ const styles = StyleSheet.create({
     overflow: "hidden",
   },
   surfaceExpanded: {
-    borderRadius: 28,
+    borderRadius: 10,
     gap: 2,
     paddingBottom: 6,
-    paddingHorizontal: 14,
+    paddingHorizontal: 12,
     paddingTop: 8,
   },
   toolbar: { alignItems: "center", flexDirection: "row", gap: space.xs },

apps/mobile/src/screens/session-execution-panel.test.tsx

@@ -17,6 +17,22 @@ const callbacks = {
   onWait: jest.fn(),
 };
 
+test("ordinary active execution does not advertise a background action", () => {
+  render(
+    <SessionExecutionPanel
+      active
+      admissions={[]}
+      inbox={[]}
+      permissions={[]}
+      permissionReplyError={false}
+      projectedMessageIds={new Set()}
+      {...callbacks}
+    />,
+  );
+  expect(screen.getByRole("button", { name: "Stop" })).toBeOnTheScreen();
+  expect(screen.queryByRole("button", { name: "Move to background" })).toBeNull();
+});
+
 test("renders active execution and mutable queued inbox work", () => {
   const inbox = [
     {
@@ -31,6 +47,7 @@ test("renders active execution and mutable queued inbox work", () => {
   render(
     <SessionExecutionPanel
       active
+      canBackground
       admissions={[]}
       inbox={inbox}
       permissionReplyError={false}

apps/mobile/src/screens/session-execution-panel.tsx

@@ -20,6 +20,7 @@ export function SessionExecutionPanel({
   active,
   admissions,
   busyAction,
+  canBackground = false,
   formRequests,
   inbox,
   onAllowRetry,
@@ -38,6 +39,7 @@ export function SessionExecutionPanel({
   active: boolean;
   admissions: PromptAdmission[];
   busyAction?: "background" | "interrupt" | "wait" | undefined;
+  canBackground?: boolean;
   formRequests?: ReactNode;
   inbox: SessionInboxInfo[];
   onAllowRetry: (admissionID: string) => void;
@@ -93,7 +95,7 @@ export function SessionExecutionPanel({
                   : "Working"}
             </Text>
           </View>
-          {onBackground && permissions.length === 0 && !formRequests ? (
+          {canBackground && onBackground && permissions.length === 0 && !formRequests ? (
             <Pressable
               accessibilityRole="button"
               accessibilityState={{ disabled: Boolean(busyAction) }}
@@ -266,7 +268,7 @@ const styles = StyleSheet.create({
     gap: space.sm,
     padding: space.md,
   },
-  cardCopy: { color: palette.dim, fontSize: 13, lineHeight: 19 },
+  cardCopy: { color: palette.dim, fontSize: 14, lineHeight: 19 },
   cardEyebrow: { ...typography.label, color: palette.warm },
   disabled: { opacity: 0.5 },
   executionRow: {
@@ -280,7 +282,7 @@ const styles = StyleSheet.create({
   },
   executionTitle: { color: palette.dim, flexShrink: 1, fontSize: 12 },
   stopButton: { minHeight: 44, minWidth: 44, alignItems: "center", justifyContent: "center" },
-  stopLabel: { color: palette.ink, fontSize: 13 },
+  stopLabel: { color: palette.ink, fontSize: 14 },
   headingRow: { alignItems: "center", flexDirection: "row", flexShrink: 1, gap: space.sm },
   inboxCard: {
     backgroundColor: palette.card,