fix(kiloclaw): split upgrade confirmation flow (#2834)

Drixled · web-flow · commit d822d4a7421f · 2026-04-27T15:41:46.000-06:00
* fix(kiloclaw): split upgrade confirmation flow

* fix(kiloclaw): remove extra upgrade analytics
diff --git a/apps/web/src/app/(app)/claw/components/ClawInstanceOverview.tsx b/apps/web/src/app/(app)/claw/components/ClawInstanceOverview.tsx
@@ -11,7 +11,15 @@ import { InstanceControls } from './InstanceControls';
 import { InstanceTab } from './InstanceTab';
 import { useClawContext } from './ClawContext';
 
-export function ClawInstanceOverview({ status }: { status: KiloClawDashboardStatus }) {
+export function ClawInstanceOverview({
+  status,
+  onRedeploySuccess,
+  onRequestUpgrade,
+}: {
+  status: KiloClawDashboardStatus;
+  onRedeploySuccess?: () => void;
+  onRequestUpgrade?: () => void;
+}) {
   const { organizationId } = useClawContext();
 
   const personalMutations = useKiloClawMutations();
@@ -60,6 +68,8 @@ export function ClawInstanceOverview({ status }: { status: KiloClawDashboardStat
           <InstanceControls
             status={status}
             mutations={mutations}
+            onRedeploySuccess={onRedeploySuccess}
+            onRequestUpgrade={onRequestUpgrade}
             gatewayReady={gatewayStatus?.state === 'running'}
           />
         </CardContent>
diff --git a/apps/web/src/app/(app)/claw/components/ClawSettingsPage.tsx b/apps/web/src/app/(app)/claw/components/ClawSettingsPage.tsx
@@ -11,6 +11,7 @@ import { ClawContextProvider, useClawContext } from './ClawContext';
 import { ClawConfigServiceBanner } from './ClawConfigServiceBanner';
 import { ClawInstanceOverview } from './ClawInstanceOverview';
 import { SettingsTab } from './SettingsTab';
+import { UpgradeKiloClawDialog } from './UpgradeKiloClawDialog';
 import { BillingWrapper } from './billing/BillingWrapper';
 import { SetPageTitle } from '@/components/SetPageTitle';
 import { Card, CardContent } from '@/components/ui/card';
@@ -33,6 +34,7 @@ function ClawSettingsInner({
   const mutations = organizationId ? orgMutations : personalMutations;
 
   const [dirtySecrets, setDirtySecrets] = useState<Set<string>>(new Set());
+  const [confirmUpgrade, setConfirmUpgrade] = useState(false);
   const onSecretsChanged = useCallback((entryId: string) => {
     setDirtySecrets(prev => new Set([...prev, entryId]));
   }, []);
@@ -53,12 +55,17 @@ function ClawSettingsInner({
     });
   }, [mutations.restartMachine, onRedeploySuccess]);
 
-  const onUpgrade = useCallback(() => {
+  const onRequestUpgrade = useCallback(() => {
+    setConfirmUpgrade(true);
+  }, []);
+
+  const onConfirmUpgrade = useCallback(() => {
     mutations.restartMachine.mutate(
       { imageTag: 'latest' },
       {
         onSuccess: () => {
-          toast.success('Upgrading to latest image');
+          toast.success('Upgrading KiloClaw');
+          setConfirmUpgrade(false);
           onRedeploySuccess();
         },
         onError: err => {
@@ -68,21 +75,32 @@ function ClawSettingsInner({
     );
   }, [mutations.restartMachine, onRedeploySuccess]);
 
-  const onRequestUpgrade = useCallback(() => {
-    onUpgrade();
-  }, [onUpgrade]);
-
   return (
-    <SettingsTab
-      status={status}
-      mutations={mutations}
-      onSecretsChanged={onSecretsChanged}
-      dirtySecrets={dirtySecrets}
-      onRedeploy={onRedeploy}
-      onUpgrade={onUpgrade}
-      onRequestUpgrade={onRequestUpgrade}
-      organizationName={organizationName}
-    />
+    <>
+      <ClawInstanceOverview
+        status={status}
+        onRedeploySuccess={onRedeploySuccess}
+        onRequestUpgrade={onRequestUpgrade}
+      />
+      <SettingsTab
+        status={status}
+        mutations={mutations}
+        onSecretsChanged={onSecretsChanged}
+        dirtySecrets={dirtySecrets}
+        onRedeploy={onRedeploy}
+        onRequestUpgrade={onRequestUpgrade}
+        organizationName={organizationName}
+      />
+      <UpgradeKiloClawDialog
+        open={confirmUpgrade}
+        onOpenChange={open => {
+          if (mutations.restartMachine.isPending) return;
+          setConfirmUpgrade(open);
+        }}
+        isPending={mutations.restartMachine.isPending}
+        onConfirm={onConfirmUpgrade}
+      />
+    </>
   );
 }
 
@@ -139,7 +157,6 @@ function ClawSettingsWithStatus({
   const settingsContent = (
     <div className="flex flex-col gap-6">
       <ClawConfigServiceBanner status={status} />
-      <ClawInstanceOverview status={status} />
       <ClawSettingsInner status={status} organizationName={organizationName} />
     </div>
   );
diff --git a/apps/web/src/app/(app)/claw/components/InstanceControls.tsx b/apps/web/src/app/(app)/claw/components/InstanceControls.tsx
@@ -38,6 +38,7 @@ import { StartKiloCliRunDialog } from './StartKiloCliRunDialog';
 import { AnimatedDots } from './AnimatedDots';
 import { OpenClawButton } from './OpenClawButton';
 import { KiloClawUpdateAvailableBanner } from './KiloClawUpdateAvailableBanner';
+import { UpgradeKiloClawDialog } from './UpgradeKiloClawDialog';
 
 const VOLUME_SIZE_GB = 10;
 // Default machine spec fallback (matches kiloclaw DEFAULT_MACHINE_GUEST)
@@ -54,15 +55,13 @@ export function InstanceControls({
   status,
   mutations,
   onRedeploySuccess,
-  upgradeRequested,
-  onUpgradeHandled,
+  onRequestUpgrade,
   gatewayReady,
 }: {
   status: KiloClawDashboardStatus;
   mutations: ClawMutations;
   onRedeploySuccess?: () => void;
-  upgradeRequested?: boolean;
-  onUpgradeHandled?: () => void;
+  onRequestUpgrade?: () => void;
   gatewayReady?: boolean;
 }) {
   const posthog = usePostHog();
@@ -84,6 +83,7 @@ export function InstanceControls({
   const [kiloRunOpen, setKiloRunOpen] = useState(false);
   const [confirmRestart, setConfirmRestart] = useState(false);
   const [confirmRedeploy, setConfirmRedeploy] = useState(false);
+  const [confirmUpgrade, setConfirmUpgrade] = useState(false);
   const [redeployMode, setRedeployMode] = useState<'redeploy' | 'upgrade'>('redeploy');
 
   const { updateAvailable, catalogNewerThanImage, latestAvailableVersion, latestVersion } =
@@ -113,6 +113,33 @@ export function InstanceControls({
     setManuallyDismissed(true);
   }, [dismissKey]);
 
+  const openUpgradeConfirmation = useCallback(() => {
+    if (onRequestUpgrade) {
+      onRequestUpgrade();
+      return;
+    }
+
+    setConfirmUpgrade(true);
+  }, [onRequestUpgrade]);
+
+  const handleUpgradeConfirm = useCallback(() => {
+    posthog?.capture('claw_redeploy_clicked', {
+      instance_status: status.status,
+      redeploy_mode: 'upgrade',
+    });
+    mutations.restartMachine.mutate(
+      { imageTag: 'latest' },
+      {
+        onSuccess: () => {
+          toast.success('Upgrading KiloClaw');
+          setConfirmUpgrade(false);
+          onRedeploySuccess?.();
+        },
+        onError: err => toast.error(err.message, { duration: 10000 }),
+      }
+    );
+  }, [mutations.restartMachine, onRedeploySuccess, posthog, status.status]);
+
   const showUpgradeBanner =
     isFlyProvider && updateAvailable && !isDismissedInStorage && !manuallyDismissed;
 
@@ -132,18 +159,6 @@ export function InstanceControls({
     );
   };
 
-  // Toggle-flag pattern: parent sets upgradeRequested=true, we open the dialog
-  // with "upgrade" preselected, then immediately reset via onUpgradeHandled.
-  // Safe for single-click flows; won't re-fire if already true (no state change).
-  useEffect(() => {
-    if (!upgradeRequested) return;
-    if (isFlyProvider) {
-      setRedeployMode('upgrade');
-      setConfirmRedeploy(true);
-    }
-    onUpgradeHandled?.();
-  }, [upgradeRequested, isFlyProvider, onUpgradeHandled]);
-
   return (
     <div>
       <div className="flex items-center gap-2">
@@ -216,10 +231,7 @@ export function InstanceControls({
         <KiloClawUpdateAvailableBanner
           className="mb-4"
           catalogNewerThanImage={catalogNewerThanImage}
-          onUpgrade={() => {
-            setRedeployMode('upgrade');
-            setConfirmRedeploy(true);
-          }}
+          onUpgrade={openUpgradeConfirmation}
           onDismiss={dismissBanner}
         />
       )}
@@ -458,6 +470,16 @@ export function InstanceControls({
           </DialogFooter>
         </DialogContent>
       </Dialog>
+      <UpgradeKiloClawDialog
+        open={confirmUpgrade}
+        onOpenChange={open => {
+          if (mutations.restartMachine.isPending) return;
+          if (!open) posthog?.capture('claw_redeploy_cancelled');
+          setConfirmUpgrade(open);
+        }}
+        isPending={mutations.restartMachine.isPending}
+        onConfirm={handleUpgradeConfirm}
+      />
       <RunDoctorDialog
         open={doctorOpen}
         onOpenChange={setDoctorOpen}
diff --git a/apps/web/src/app/(app)/claw/components/SettingsTab.tsx b/apps/web/src/app/(app)/claw/components/SettingsTab.tsx
@@ -1305,7 +1305,6 @@ export function SettingsTab({
   onSecretsChanged,
   dirtySecrets,
   onRedeploy,
-  onUpgrade,
   onRequestUpgrade,
   organizationName,
 }: {
@@ -1314,9 +1313,7 @@ export function SettingsTab({
   onSecretsChanged?: (entryId: string) => void;
   dirtySecrets: Set<string>;
   onRedeploy?: () => void;
-  /** Callback that triggers an image upgrade (pull latest) instead of a plain restart. */
-  onUpgrade?: () => void;
-  /** Callback that requests an upgrade via the InstanceControls dialog. */
+  /** Callback that opens the focused upgrade confirmation flow. */
   onRequestUpgrade?: () => void;
   /** Present in organization context; required in the destroy confirmation phrase. */
   organizationName?: string;
@@ -1879,7 +1876,7 @@ export function SettingsTab({
                   mutations={mutations}
                   onSecretsChanged={onSecretsChanged}
                   isDirty={dirtySecrets.has(entry.id)}
-                  onRedeploy={onUpgrade ?? onRedeploy}
+                  onRedeploy={onRequestUpgrade ?? onRedeploy}
                   redeployLabel="Upgrade"
                   actionRowExtra={<AgentCardSetupGuide />}
                 />
diff --git a/apps/web/src/app/(app)/claw/components/UpgradeKiloClawDialog.tsx b/apps/web/src/app/(app)/claw/components/UpgradeKiloClawDialog.tsx
@@ -0,0 +1,65 @@
+'use client';
+
+import { ArrowUpCircle, RotateCw } from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { AnimatedDots } from './AnimatedDots';
+
+const upgradeButtonClassName =
+  'border-amber-500/30 bg-amber-500/10 text-amber-400 hover:bg-amber-500/20 hover:text-amber-300';
+
+export function UpgradeKiloClawDialog({
+  open,
+  onOpenChange,
+  isPending,
+  onConfirm,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  isPending: boolean;
+  onConfirm: () => void;
+}) {
+  return (
+    <Dialog open={open} onOpenChange={isPending ? undefined : onOpenChange}>
+      <DialogContent className="max-w-md gap-5">
+        <DialogHeader className="gap-3 space-y-0 pr-6">
+          <div className="flex h-10 w-10 items-center justify-center rounded-full border border-amber-500/30 bg-amber-500/10 text-amber-300">
+            <ArrowUpCircle className="h-5 w-5" />
+          </div>
+          <div className="space-y-2">
+            <DialogTitle>Upgrade KiloClaw</DialogTitle>
+            <DialogDescription className="leading-6">
+              Upgrade this instance to the latest supported KiloClaw version. This also redeploys
+              the runtime, so it may be briefly offline.
+            </DialogDescription>
+          </div>
+        </DialogHeader>
+        <DialogFooter className="gap-2 sm:gap-0">
+          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isPending}>
+            Cancel
+          </Button>
+          <Button className={upgradeButtonClassName} onClick={onConfirm} disabled={isPending}>
+            {isPending ? (
+              <>
+                Upgrading
+                <AnimatedDots />
+              </>
+            ) : (
+              <>
+                <RotateCw className="h-4 w-4" />
+                Upgrade & Redeploy
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
