feat(web): sync provider accounts to other devices from Providers settings

Settings > Providers gains a "Sync accounts" button, a "Sync to…" action
on each account, and a settings-search entry. The dialog picks accounts
and devices, then shows each copy's live state on the other device with
a link that opens its provider editor to finish sign-in there.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: ScriptedAlchemy

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

@@ -576,6 +576,7 @@ interface ProviderInstanceCardProps {
   readonly onUpdate: (nextInstance: ProviderInstanceConfig) => void;
   readonly onDelete?: (() => void) | undefined;
   readonly headerAction?: ReactNode | undefined;
+  readonly syncAction?: ReactNode;
   readonly setup?: ReactNode;
   readonly runtime?: ReactNode;
   readonly hiddenModels: ReadonlyArray<string>;
@@ -627,6 +628,7 @@ export function ProviderInstanceCard({
   onUpdate,
   onDelete,
   headerAction,
+  syncAction,
   setup,
   runtime,
   hiddenModels,
@@ -1075,6 +1077,7 @@ export function ProviderInstanceCard({
         className={cn("inline-flex items-center gap-1", readOnly && "opacity-50")}
       >
         {titleTailNode}
+        {syncAction}
         {onDelete ? (
           <Button
             type="button"

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

@@ -98,6 +98,7 @@ import { stackedThreadToast, toastManager } from "../ui/toast";
 import { AddProviderInstanceDialog } from "./AddProviderInstanceDialog";
 import { ExpandableText } from "./ExpandableText";
 import { ProviderInstanceCard } from "./ProviderInstanceCard";
+import { SyncProviderAccountsAction } from "./SyncProviderAccountsDialog";
 import { UsageProviderSettings } from "./UsageProviderSettings";
 import { ProviderSetupSection, readAntigravityAuthMethod } from "./ProviderSetupSection";
 import { ProviderAuthenticationSection } from "./ProviderAuthenticationSection";
@@ -1012,6 +1013,7 @@ export function EnvironmentProviderSettings({
         }
         headerAction={
           <div className="flex min-w-0 items-center gap-2">
+            <SyncProviderAccountsAction sourceEnvironmentId={environmentId} readOnly={readOnly} />
             <ProviderUpdatesAction />
             <Tooltip>
               <TooltipTrigger
@@ -1409,6 +1411,15 @@ function ProviderInstanceRow({
           ? () => actions.deleteInstance(instanceId, instance)
           : undefined
       }
+      syncAction={
+        mode === "editor" ? (
+          <SyncProviderAccountsAction
+            sourceEnvironmentId={environmentId}
+            readOnly={readOnly}
+            instanceIds={[instanceId]}
+          />
+        ) : undefined
+      }
       headerAction={
         mode === "editor" && isDefault && isDirty ? (
           <SettingResetButton