fix(settings): sync auto-settle and other shared preferences across environments (pingdotgg#9147)

Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>

Author: t3dotgg

apps/mobile/src/features/settings/SettingsRouteScreen.tsx

@@ -19,7 +19,7 @@ import {
   squashAtomCommandFailure,
 } from "@t3tools/client-runtime/state/runtime";
 import { AndroidScreenHeader } from "../../components/AndroidScreenHeader";
-import { AppText as Text } from "../../components/AppText";
+import { AppText as Text, AppTextInput as TextInput } from "../../components/AppText";
 import { supportsAgentAwarenessPush } from "../agent-awareness/capabilities";
 import { setLiveActivityUpdatesEnabled } from "../agent-awareness/liveActivityPreferences";
 import { requestAgentNotificationPermission } from "../agent-awareness/notificationPermissions";
@@ -36,7 +36,17 @@ import { runtime } from "../../lib/runtime";
 import { mobilePreferencesAtom, updateMobilePreferencesAtom } from "../../state/preferences";
 import { serverEnvironment } from "../../state/server";
 import { useAtomCommand } from "../../state/use-atom-command";
-import type { EnvironmentId } from "@t3tools/contracts";
+import { useEnvironments } from "../../state/environments";
+import {
+  DEFAULT_SERVER_SETTINGS,
+  MAX_SIDEBAR_AUTO_SETTLE_AFTER_DAYS,
+  MIN_SIDEBAR_AUTO_SETTLE_AFTER_DAYS,
+  type ServerSettingsPatch,
+} from "@t3tools/contracts";
+import {
+  findSharedSettingsMismatches,
+  pickSharedServerSettings,
+} from "@t3tools/client-runtime/state/shared-settings";
 import { useThreadListV2Enabled } from "../threads/use-thread-list-v2-enabled";
 import {
   type AppUpdateCheckState,
@@ -530,51 +540,136 @@ function ConfiguredSettingsRouteScreen() {
 }
 
 function GeneralSettingsSection() {
-  const { savedConnectionsById } = useSavedRemoteConnections();
-  const connections = Object.values(savedConnectionsById).sort((left, right) =>
-    left.environmentLabel.localeCompare(right.environmentLabel),
-  );
-
   return (
     <SettingsSection title="General">
       <SettingsRow icon="folder" label="Project Grouping" target="SettingsProjectGrouping" />
-      {connections.map((connection) => (
-        <EnvironmentAutoSettleSwitch
-          key={connection.environmentId}
-          environmentId={connection.environmentId}
-          environmentLabel={connection.environmentLabel}
-        />
-      ))}
+      <AutoSettleSettingsRows />
       <SettingsRow icon="chart.bar.xaxis" label="Usage" target="SettingsUsage" />
     </SettingsSection>
   );
 }
 
-function EnvironmentAutoSettleSwitch(props: {
-  readonly environmentId: EnvironmentId;
-  readonly environmentLabel: string;
-}) {
-  const settings = useAtomValue(serverEnvironment.settingsValueAtom(props.environmentId));
-  const config = useAtomValue(serverEnvironment.configValueAtom(props.environmentId));
+const AUTO_SETTLE_DEFAULT_DAYS = DEFAULT_SERVER_SETTINGS.sidebarAutoSettleAfterDays ?? 3;
+
+/**
+ * Auto-settlement is a user preference that every server has to hold. Mobile
+ * has no primary environment, so the first connected environment that
+ * supports it is the reference value. Edits fan out to every connected
+ * environment, and a mismatch row lets the user push the reference out.
+ */
+function AutoSettleSettingsRows() {
+  const { environments } = useEnvironments();
   const updateSettings = useAtomCommand(serverEnvironment.updateSettings, {
-    label: "auto-settle settings update",
+    label: "server settings update",
     reportFailure: true,
   });
-  if (config?.environment.capabilities.threadAutoSettlement !== true || settings === null) {
+
+  const connected = environments.filter(
+    (environment) =>
+      environment.connection.phase === "connected" &&
+      environment.serverConfig?.environment.capabilities.threadAutoSettlement === true,
+  );
+  const reference = connected[0] ?? null;
+  const referenceSettings = reference?.serverConfig?.settings ?? null;
+
+  const [daysDraft, setDaysDraft] = useState<string | null>(null);
+
+  if (reference === null || referenceSettings === null) {
     return null;
   }
+
+  const writeToAll = (patch: ServerSettingsPatch) => {
+    for (const environment of connected) {
+      void updateSettings({ environmentId: environment.environmentId, input: { patch } });
+    }
+  };
+
+  const mismatches = findSharedSettingsMismatches({
+    primaryEnvironmentId: reference.environmentId,
+    primarySettings: referenceSettings,
+    environments: environments.map((environment) => ({
+      environmentId: environment.environmentId,
+      label: environment.label,
+      connected: environment.connection.phase === "connected",
+      settings: environment.serverConfig?.settings ?? null,
+    })),
+  });
+
+  const afterDays = referenceSettings.sidebarAutoSettleAfterDays;
+  const commitDays = () => {
+    const draft = (daysDraft ?? "").trim();
+    setDaysDraft(null);
+    // Whole-string check so "3.5" and "3days" are rejected instead of
+    // silently becoming 3 on every connected environment.
+    const parsed = /^\d+$/.test(draft) ? Number(draft) : Number.NaN;
+    if (
+      Number.isInteger(parsed) &&
+      parsed >= MIN_SIDEBAR_AUTO_SETTLE_AFTER_DAYS &&
+      parsed <= MAX_SIDEBAR_AUTO_SETTLE_AFTER_DAYS &&
+      parsed !== afterDays
+    ) {
+      writeToAll({ sidebarAutoSettleAfterDays: parsed });
+    }
+  };
+
   return (
-    <SettingsSwitchRow
-      icon="arrow.triangle.branch"
-      label={`Auto-settle merged threads · ${props.environmentLabel}`}
-      value={settings?.sidebarAutoSettleOnMerge ?? true}
-      onValueChange={(value) => {
-        void updateSettings({
-          environmentId: props.environmentId,
-          input: { patch: { sidebarAutoSettleOnMerge: value } },
-        });
-      }}
-    />
+    <>
+      <SettingsSwitchRow
+        icon="arrow.triangle.branch"
+        label="Auto-settle merged threads"
+        value={referenceSettings.sidebarAutoSettleOnMerge}
+        onValueChange={(value) => writeToAll({ sidebarAutoSettleOnMerge: value })}
+      />
+      <SettingsSwitchRow
+        icon="clock"
+        label="Auto-settle inactive threads"
+        subtitle={afterDays === null ? undefined : `After ${afterDays} days without activity`}
+        value={afterDays !== null}
+        onValueChange={(value) =>
+          writeToAll({ sidebarAutoSettleAfterDays: value ? AUTO_SETTLE_DEFAULT_DAYS : null })
+        }
+      />
+      {afterDays !== null ? (
+        <View className="flex-row items-center gap-4 border-t border-border-subtle p-4">
+          <Text className="flex-1 text-lg text-foreground">Days before auto-settle</Text>
+          <TextInput
+            className="min-h-10 w-20 rounded-xl px-3 py-2 text-center text-base"
+            keyboardType="number-pad"
+            returnKeyType="done"
+            value={daysDraft ?? String(afterDays)}
+            onChangeText={setDaysDraft}
+            onBlur={commitDays}
+            onSubmitEditing={commitDays}
+            accessibilityLabel="Days before auto-settle"
+          />
+        </View>
+      ) : null}
+      {mismatches.length > 0 ? (
+        <View className="flex-row items-center gap-4 border-t border-border-subtle p-4">
+          <View className="min-w-0 flex-1">
+            <Text className="text-lg text-foreground">Settings differ</Text>
+            <Text className="text-sm text-foreground-muted">
+              {mismatches.map((mismatch) => mismatch.label).join(", ")}
+            </Text>
+          </View>
+          <Pressable
+            accessibilityRole="button"
+            onPress={() => {
+              const patch = pickSharedServerSettings(referenceSettings);
+              for (const mismatch of mismatches) {
+                void updateSettings({
+                  environmentId: mismatch.environmentId,
+                  input: { patch },
+                });
+              }
+            }}
+            className="rounded-full bg-subtle px-4 py-2 active:opacity-70"
+          >
+            <Text className="text-base font-t3-medium text-foreground">Apply to all</Text>
+          </Pressable>
+        </View>
+      ) : null}
+    </>
   );
 }
 

apps/web/src/components/settings/SettingsPanels.tsx

@@ -112,6 +112,7 @@ import {
   TYPOGRAPHY_ADVANCED_STORAGE_KEY,
 } from "../../appearanceFonts";
 import { CodeFontPreview, PromptFontPreview, TerminalFontPreview } from "./SettingsFontPreviews";
+import { SharedSettingsMismatchAlert } from "./SharedSettingsMismatchAlert";
 import { discoverInstalledFonts, FontFamilyPicker, useFontEnumeration } from "./FontFamilyPicker";
 import {
   NumberField,
@@ -1928,6 +1929,7 @@ export function GeneralSettingsPanel() {
 
   return (
     <SettingsPageContainer>
+      <SharedSettingsMismatchAlert />
       <SettingsSection title="General">
         <SettingsRow
           {...searchableSetting("project-grouping")}

apps/web/src/components/settings/SharedSettingsMismatchAlert.tsx

@@ -0,0 +1,32 @@
+import { TriangleAlertIcon } from "lucide-react";
+
+import { useSharedSettingsSync } from "../../hooks/useSettings";
+import { Alert, AlertAction, AlertDescription } from "../ui/alert";
+import { Button } from "../ui/button";
+
+/**
+ * Warns when a connected environment holds different shared settings than
+ * the primary one, and offers to write the primary's values everywhere.
+ * Renders nothing when every connected environment agrees.
+ */
+export function SharedSettingsMismatchAlert() {
+  const { mismatches, applyToAll } = useSharedSettingsSync();
+  if (mismatches.length === 0) {
+    return null;
+  }
+  const labels = mismatches.map((mismatch) => mismatch.label).join(", ");
+  return (
+    <Alert variant="warning" className="mx-3 sm:mx-4">
+      <TriangleAlertIcon />
+      <AlertDescription>
+        Settings differ on {labels}. Thread and source control preferences are meant to match on
+        every environment.
+      </AlertDescription>
+      <AlertAction>
+        <Button variant="outline" size="compact" onClick={applyToAll}>
+          Apply to all
+        </Button>
+      </AlertAction>
+    </Alert>
+  );
+}

apps/web/src/components/settings/SourceControlSettings.tsx

@@ -18,6 +18,7 @@ import {
 } from "@t3tools/shared/backgroundActivitySettings";
 
 import { usePrimarySettings, useUpdatePrimarySettings } from "../../hooks/useSettings";
+import { SharedSettingsMismatchAlert } from "./SharedSettingsMismatchAlert";
 import { cn } from "../../lib/utils";
 import { useEnvironments, usePrimaryEnvironment } from "../../state/environments";
 import { useEnvironmentQuery } from "../../state/query";
@@ -548,6 +549,7 @@ export function SourceControlSettingsPanel() {
 
   return (
     <SettingsPageContainer>
+      <SharedSettingsMismatchAlert />
       {isInitialScanPending ? (
         <>
           <SourceControlSectionSkeleton title="Version Control" headerAction={scanButton} />