Move Apply & Restart into Settings footer with confirm

Replace the top-right pending CTA with a primary footer action that
replaces Reload OpenCode when changes are pending, and warn that running
chats will stop unless the user opts out of the confirmation.

Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>

packages/ui/src/components/views/OpenCodeReloadFooterAction.tsx

@@ -0,0 +1,182 @@
+import * as React from 'react';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Icon } from '@/components/icon/Icon';
+import { toast } from '@/components/ui';
+import { useI18n } from '@/lib/i18n';
+import { applyPendingOpenCodeRestart } from '@/lib/opencode/deferredRestart';
+import { cn } from '@/lib/utils';
+import { reloadOpenCodeConfiguration } from '@/stores/useAgentsStore';
+import {
+  selectPendingOpenCodeRestartCount,
+  usePendingOpenCodeRestartStore,
+} from '@/stores/usePendingOpenCodeRestartStore';
+import { useUIStore } from '@/stores/useUIStore';
+
+type OpenCodeReloadFooterActionProps = {
+  className?: string;
+};
+
+export const OpenCodeReloadFooterAction: React.FC<OpenCodeReloadFooterActionProps> = ({
+  className,
+}) => {
+  const { t } = useI18n();
+  const pendingCount = usePendingOpenCodeRestartStore(selectPendingOpenCodeRestartCount);
+  const isApplying = usePendingOpenCodeRestartStore((state) => state.isApplying);
+  const showRestartConfirm = useUIStore((state) => state.showOpenCodeRestartConfirm);
+  const setShowOpenCodeRestartConfirm = useUIStore((state) => state.setShowOpenCodeRestartConfirm);
+  const [confirmOpen, setConfirmOpen] = React.useState(false);
+  const [dontShowAgain, setDontShowAgain] = React.useState(false);
+
+  const hasPending = pendingCount > 0;
+
+  const runApply = React.useCallback(async () => {
+    try {
+      const result = await applyPendingOpenCodeRestart({
+        message: t('settings.view.pendingRestart.applying'),
+      });
+      if (result.requiresManualRestart) {
+        toast.warning(t('settings.view.pendingRestart.manualRestartRequired'));
+        return;
+      }
+      if (result.ok) {
+        toast.success(t('settings.view.pendingRestart.applied'));
+      }
+    } catch (error) {
+      const message = error instanceof Error && error.message
+        ? error.message
+        : t('settings.view.pendingRestart.applyFailed');
+      toast.error(message);
+    }
+  }, [t]);
+
+  const runManualReload = React.useCallback(async () => {
+    try {
+      await reloadOpenCodeConfiguration({
+        message: t('settings.view.pendingRestart.applying'),
+        mode: 'projects',
+        scopes: ['all'],
+      });
+      usePendingOpenCodeRestartStore.getState().clear();
+    } catch {
+      // ignore
+    }
+  }, [t]);
+
+  const handleConfirmApply = React.useCallback(() => {
+    if (dontShowAgain) {
+      setShowOpenCodeRestartConfirm(false);
+    }
+    setConfirmOpen(false);
+    setDontShowAgain(false);
+    void runApply();
+  }, [dontShowAgain, runApply, setShowOpenCodeRestartConfirm]);
+
+  const handleClick = React.useCallback(() => {
+    if (!hasPending) {
+      void runManualReload();
+      return;
+    }
+    if (showRestartConfirm) {
+      setDontShowAgain(false);
+      setConfirmOpen(true);
+      return;
+    }
+    void runApply();
+  }, [hasPending, runApply, runManualReload, showRestartConfirm]);
+
+  const label = !hasPending
+    ? t('settings.view.actions.reloadOpenCode')
+    : isApplying
+      ? t('settings.view.pendingRestart.applying')
+      : t('settings.view.actions.applyAndRestartOpenCode');
+
+  const tooltip = !hasPending
+    ? t('settings.view.actions.reloadOpenCodeTooltip')
+    : pendingCount === 1
+      ? t('settings.view.actions.applyAndRestartOpenCodeTooltipSingle')
+      : t('settings.view.actions.applyAndRestartOpenCodeTooltipPlural', { count: pendingCount });
+
+  return (
+    <>
+      <button
+        type="button"
+        disabled={isApplying}
+        title={tooltip}
+        aria-label={tooltip}
+        onClick={handleClick}
+        className={cn(
+          'flex w-full items-center gap-2 rounded-md overflow-hidden whitespace-nowrap',
+          'h-11 px-3 sm:h-8 sm:px-2',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
+          hasPending
+            ? 'bg-primary text-primary-foreground typography-ui-label font-semibold hover:bg-primary/90'
+            : 'text-sm font-semibold text-sidebar-foreground/90 hover:text-sidebar-foreground hover:bg-interactive-hover',
+          isApplying && 'opacity-80',
+          className,
+        )}
+      >
+        {hasPending && (
+          <span
+            className={cn(
+              'inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full px-1.5',
+              'bg-background text-foreground typography-micro font-semibold tabular-nums',
+            )}
+            aria-hidden="true"
+          >
+            {pendingCount}
+          </span>
+        )}
+        <Icon name="restart" className="h-4 w-4 shrink-0" />
+        <span className="truncate">{label}</span>
+      </button>
+
+      <Dialog
+        open={confirmOpen}
+        onOpenChange={(open) => {
+          setConfirmOpen(open);
+          if (!open) {
+            setDontShowAgain(false);
+          }
+        }}
+      >
+        <DialogContent showCloseButton={false} className="max-w-sm gap-5">
+          <DialogHeader>
+            <DialogTitle>{t('settings.view.pendingRestart.confirm.title')}</DialogTitle>
+            <DialogDescription>
+              {t('settings.view.pendingRestart.confirm.description')}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="w-full sm:items-center sm:justify-between">
+            <button
+              type="button"
+              onClick={() => setDontShowAgain((value) => !value)}
+              className="inline-flex items-center gap-1.5 typography-ui-label text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50"
+              aria-pressed={dontShowAgain}
+            >
+              {dontShowAgain
+                ? <Icon name="checkbox" className="h-4 w-4 text-primary" />
+                : <Icon name="checkbox-blank" className="h-4 w-4" />}
+              {t('settings.view.pendingRestart.confirm.dontShowAgain')}
+            </button>
+            <div className="flex items-center gap-2">
+              <button
+                type="button"
+                onClick={() => setConfirmOpen(false)}
+                className="inline-flex h-8 items-center justify-center rounded-md border border-border px-3 typography-ui-label text-foreground hover:bg-interactive-hover/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+              >
+                {t('settings.view.pendingRestart.confirm.cancel')}
+              </button>
+              <button
+                type="button"
+                onClick={handleConfirmApply}
+                className="inline-flex h-8 items-center justify-center rounded-md bg-primary px-3 typography-ui-label text-primary-foreground hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+              >
+                {t('settings.view.actions.applyAndRestartOpenCode')}
+              </button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};

packages/ui/src/components/views/PendingOpenCodeRestartAction.tsx

@@ -1,81 +0,0 @@
-import * as React from 'react';
-import { Button } from '@/components/ui/button';
-import { Icon } from '@/components/icon/Icon';
-import { useI18n } from '@/lib/i18n';
-import { applyPendingOpenCodeRestart } from '@/lib/opencode/deferredRestart';
-import {
-  selectPendingOpenCodeRestartCount,
-  usePendingOpenCodeRestartStore,
-} from '@/stores/usePendingOpenCodeRestartStore';
-import { toast } from '@/components/ui';
-import { cn } from '@/lib/utils';
-
-type PendingOpenCodeRestartActionProps = {
-  className?: string;
-  compact?: boolean;
-};
-
-export const PendingOpenCodeRestartAction: React.FC<PendingOpenCodeRestartActionProps> = ({
-  className,
-  compact = false,
-}) => {
-  const { t } = useI18n();
-  const pendingCount = usePendingOpenCodeRestartStore(selectPendingOpenCodeRestartCount);
-  const isApplying = usePendingOpenCodeRestartStore((state) => state.isApplying);
-
-  const handleApply = React.useCallback(async () => {
-    try {
-      const result = await applyPendingOpenCodeRestart({
-        message: t('settings.view.pendingRestart.applying'),
-      });
-      if (result.requiresManualRestart) {
-        toast.warning(t('settings.view.pendingRestart.manualRestartRequired'));
-        return;
-      }
-      if (result.ok) {
-        toast.success(t('settings.view.pendingRestart.applied'));
-      }
-    } catch (error) {
-      const message = error instanceof Error && error.message
-        ? error.message
-        : t('settings.view.pendingRestart.applyFailed');
-      toast.error(message);
-    }
-  }, [t]);
-
-  if (pendingCount <= 0) {
-    return null;
-  }
-
-  const tooltip = pendingCount === 1
-    ? t('settings.view.actions.applyAndRestartOpenCodeTooltipSingle')
-    : t('settings.view.actions.applyAndRestartOpenCodeTooltipPlural', { count: pendingCount });
-
-  return (
-    <Button
-      type="button"
-      size={compact ? 'xs' : 'sm'}
-      disabled={isApplying}
-      title={tooltip}
-      aria-label={tooltip}
-      onClick={() => void handleApply()}
-      className={cn('gap-1.5 shadow-sm', className)}
-    >
-      <span
-        className={cn(
-          'inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full px-1.5',
-          'bg-background text-foreground typography-micro font-semibold tabular-nums',
-        )}
-        aria-hidden="true"
-      >
-        {pendingCount}
-      </span>
-      <Icon name="restart" className="h-3.5 w-3.5 shrink-0" />
-      <span className="truncate">
-        {isApplying
-          ? t('settings.view.pendingRestart.applying')
-          : t('settings.view.actions.applyAndRestartOpenCode')}
-      </span>
-    </Button>
-  );
-};

packages/ui/src/components/views/SettingsView.tsx

@@ -9,7 +9,7 @@ import { useSnippetsStore } from '@/stores/useSnippetsStore';
 import { useSkillsStore } from '@/stores/useSkillsStore';
 import { useSkillsCatalogStore } from '@/stores/useSkillsCatalogStore';
 import { useConfigStore } from '@/stores/useConfigStore';
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { Tooltip, TooltipTrigger } from '@/components/ui/tooltip';
 import { ErrorBoundary } from '@/components/ui/ErrorBoundary';
 import { AgentsSidebar } from '@/components/sections/agents/AgentsSidebar';
 import { AgentsPage } from '@/components/sections/agents/AgentsPage';
@@ -48,8 +48,7 @@ import { useI18n } from '@/lib/i18n';
 import { Icon } from "@/components/icon/Icon";
 import type { IconName } from "@/components/icon/icons";
 import { McpIcon } from '@/components/icons/McpIcon';
-import { reloadOpenCodeConfiguration } from '@/stores/useAgentsStore';
-import { PendingOpenCodeRestartAction } from '@/components/views/PendingOpenCodeRestartAction';
+import { OpenCodeReloadFooterAction } from '@/components/views/OpenCodeReloadFooterAction';
 import {
   selectPendingOpenCodeRestartCount,
   usePendingOpenCodeRestartStore,
@@ -979,42 +978,10 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
 
         {/* Footer */}
         <div className="overflow-hidden transition-opacity duration-150 opacity-100">
-          <div className="border-t border-border bg-background px-4 py-1 space-y-0.5 sm:bg-sidebar">
-            {!runtimeCtx.isVSCode && pendingRestartCount <= 0 && (
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <button
-                    type="button"
-                    className={cn(
-                      'flex h-11 w-full items-center gap-2 rounded-md px-3 overflow-hidden whitespace-nowrap sm:h-7 sm:px-2',
-                      'text-sm font-semibold text-sidebar-foreground/90',
-                      'hover:text-sidebar-foreground hover:bg-interactive-hover',
-                    )}
-                    onClick={() => {
-                      void (async () => {
-                        try {
-                          await reloadOpenCodeConfiguration({
-                            message: t('settings.view.pendingRestart.applying'),
-                            mode: 'projects',
-                            scopes: ['all'],
-                          });
-                          usePendingOpenCodeRestartStore.getState().clear();
-                        } catch {
-                          // ignore
-                        }
-                      })();
-                    }}
-                  >
-                    <Icon name="restart" className="h-4 w-4 shrink-0" />
-                    <span>{t('settings.view.actions.reloadOpenCode')}</span>
-                  </button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  {t('settings.view.actions.reloadOpenCodeTooltip')}
-                </TooltipContent>
-              </Tooltip>
+          <div className="border-t border-border bg-background px-4 py-1.5 space-y-0.5 sm:bg-sidebar">
+            {(!runtimeCtx.isVSCode || pendingRestartCount > 0) && (
+              <OpenCodeReloadFooterAction />
             )}
-
           </div>
         </div>
       </div>
@@ -1132,8 +1099,6 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
             </button>
           )}
 
-          <PendingOpenCodeRestartAction compact className="max-w-[min(100%,14rem)]" />
-
           {onClose && (
             <button
               type="button"
@@ -1161,9 +1126,8 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
             </div>
           )}
 
-      <div className={cn('absolute right-0.5 z-50 flex items-center gap-1.5', isWindowed ? 'top-0.5' : 'top-1')}>
-        <PendingOpenCodeRestartAction compact className="max-w-[min(100%,16rem)]" />
-        {onClose && (
+      {onClose && (
+        <div className={cn('absolute right-0.5 z-50', isWindowed ? 'top-0.5' : 'top-1')}>
           <button
             type="button"
             onClick={onClose}
@@ -1173,8 +1137,8 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
           >
             <Icon name="close" className="h-5 w-5" />
           </button>
-        )}
-      </div>
+        </div>
+      )}
         </>
       )}