fix: indicates squadhub restart status (#56)

Author: guyb1

apps/web/package.json

@@ -52,6 +52,7 @@
     "react-markdown": "^10.1.0",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
+    "sonner": "^2.0.7",
     "tippy.js": "^6.3.7",
     "ws": "^8.19.0",
     "zod": "^4.3.6"

apps/web/src/app/(dashboard)/settings/api-keys/_components/api-keys-settings.tsx

@@ -10,6 +10,7 @@ import { Label } from "@clawe/ui/components/label";
 import { Spinner } from "@clawe/ui/components/spinner";
 import { Skeleton } from "@clawe/ui/components/skeleton";
 import { CheckCircle2, Eye, EyeOff, Pencil } from "lucide-react";
+import { toast } from "sonner";
 import { loadPlugins, hasPlugin } from "@clawe/plugins";
 import { patchApiKeys } from "@/lib/squadhub/actions";
 import { useApiClient } from "@/hooks/use-api-client";
@@ -31,9 +32,6 @@ interface KeyRowProps {
   onValidate: () => void;
   onSave: () => void;
   isSaving: boolean;
-  saveSuccess: boolean;
-  saveError?: string;
-  isCloud: boolean;
 }
 
 const KeyRow = ({
@@ -52,9 +50,6 @@ const KeyRow = ({
   onValidate,
   onSave,
   isSaving,
-  saveSuccess,
-  saveError,
-  isCloud,
 }: KeyRowProps) => {
   const [showKey, setShowKey] = useState(false);
 
@@ -171,12 +166,6 @@ const KeyRow = ({
         >
           Cancel
         </Button>
-        {saveSuccess && (
-          <p className="text-sm text-green-600 dark:text-green-400">
-            {isCloud ? "Saved and applied" : "Saved and applied"}
-          </p>
-        )}
-        {saveError && <p className="text-destructive text-sm">{saveError}</p>}
       </div>
     </div>
   );
@@ -240,6 +229,10 @@ export const ApiKeysSettings = () => {
       setAnthropicKey("");
       setAnthropicValid(null);
       anthropicValidation.reset();
+      toast.success("Anthropic API key saved and applied");
+    },
+    onError: (error) => {
+      toast.error(error.message || "Failed to save Anthropic API key");
     },
   });
 
@@ -256,6 +249,10 @@ export const ApiKeysSettings = () => {
       setOpenaiKey("");
       setOpenaiValid(null);
       openaiValidation.reset();
+      toast.success("OpenAI API key saved and applied");
+    },
+    onError: (error) => {
+      toast.error(error.message || "Failed to save OpenAI API key");
     },
   });
 
@@ -302,11 +299,6 @@ export const ApiKeysSettings = () => {
           onValidate={() => anthropicValidation.mutate(anthropicKey)}
           onSave={() => anthropicSave.mutate(anthropicKey)}
           isSaving={anthropicSave.isPending}
-          saveSuccess={anthropicSave.isSuccess}
-          saveError={
-            anthropicSave.isError ? anthropicSave.error.message : undefined
-          }
-          isCloud={isCloud}
         />
 
         <KeyRow
@@ -337,9 +329,6 @@ export const ApiKeysSettings = () => {
           onValidate={() => openaiValidation.mutate(openaiKey)}
           onSave={() => openaiSave.mutate(openaiKey)}
           isSaving={openaiSave.isPending}
-          saveSuccess={openaiSave.isSuccess}
-          saveError={openaiSave.isError ? openaiSave.error.message : undefined}
-          isCloud={isCloud}
         />
       </div>
     </div>

apps/web/src/app/(dashboard)/settings/business/_components/business-settings-form.tsx

@@ -8,6 +8,7 @@ import { Input } from "@clawe/ui/components/input";
 import { Label } from "@clawe/ui/components/label";
 import { Textarea } from "@clawe/ui/components/textarea";
 import { Spinner } from "@clawe/ui/components/spinner";
+import { toast } from "sonner";
 import { Globe, Building2, Users, Palette } from "lucide-react";
 
 export const BusinessSettingsForm = () => {
@@ -62,6 +63,9 @@ export const BusinessSettingsForm = () => {
         },
       });
       setIsDirty(false);
+      toast.success("Business settings saved");
+    } catch {
+      toast.error("Failed to save business settings");
     } finally {
       setIsSaving(false);
     }

apps/web/src/app/(dashboard)/settings/general/_components/general-settings-form.tsx

@@ -1,17 +1,23 @@
 "use client";
 
 import { useState, useEffect } from "react";
+import { useMutation } from "convex/react";
+import { api } from "@clawe/backend";
 import { Button } from "@clawe/ui/components/button";
 import { Input } from "@clawe/ui/components/input";
 import { Label } from "@clawe/ui/components/label";
+import { Spinner } from "@clawe/ui/components/spinner";
+import { toast } from "sonner";
 import { useSquad } from "@/providers/squad-provider";
 
 export const GeneralSettingsForm = () => {
   const { selectedSquad } = useSquad();
+  const updateGeneral = useMutation(api.tenants.updateGeneral);
 
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
   const [isDirty, setIsDirty] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
 
   useEffect(() => {
     if (selectedSquad) {
@@ -31,11 +37,23 @@ export const GeneralSettingsForm = () => {
     setIsDirty(true);
   };
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    if (!selectedSquad || !isDirty) return;
-    // TODO: Implement squad update
-    setIsDirty(false);
+    if (!selectedSquad || !isDirty || !name.trim()) return;
+
+    setIsSaving(true);
+    try {
+      await updateGeneral({
+        name: name.trim(),
+        description: description.trim() || undefined,
+      });
+      setIsDirty(false);
+      toast.success("Settings saved");
+    } catch {
+      toast.error("Failed to save settings");
+    } finally {
+      setIsSaving(false);
+    }
   };
 
   if (!selectedSquad) {
@@ -70,8 +88,19 @@ export const GeneralSettingsForm = () => {
         </p>
       </div>
 
-      <Button type="submit" variant="brand" disabled={!isDirty}>
-        Save changes
+      <Button
+        type="submit"
+        variant="brand"
+        disabled={!isDirty || !name.trim() || isSaving}
+      >
+        {isSaving ? (
+          <>
+            <Spinner />
+            Saving...
+          </>
+        ) : (
+          "Save changes"
+        )}
       </Button>
     </form>
   );

apps/web/src/app/(dashboard)/settings/general/_components/timezone-settings.tsx

@@ -16,6 +16,7 @@ import {
   ComboboxEmpty,
 } from "@clawe/ui/components/combobox";
 import { Skeleton } from "@clawe/ui/components/skeleton";
+import { toast } from "sonner";
 
 export const TimezoneSettings = () => {
   const timezone = useQuery(api.tenants.getTimezone, {});
@@ -60,10 +61,15 @@ export const TimezoneSettings = () => {
     return <TimezoneSettingsSkeleton />;
   }
 
-  const handleTimezoneChange = (value: string | null) => {
+  const handleTimezoneChange = async (value: string | null) => {
     if (value) {
-      setTimezone({ timezone: value });
-      setSearch("");
+      try {
+        await setTimezone({ timezone: value });
+        setSearch("");
+        toast.success("Timezone updated");
+      } catch {
+        toast.error("Failed to update timezone");
+      }
     }
   };
 

apps/web/src/app/(dashboard)/settings/integrations/_components/telegram-disconnect-dialog.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import { useMutation as useConvexMutation } from "convex/react";
-import { toast } from "@clawe/ui/components/sonner";
+import { toast } from "sonner";
 import { api } from "@clawe/backend";
 import { Button } from "@clawe/ui/components/button";
 import { Spinner } from "@clawe/ui/components/spinner";

apps/web/src/app/(dashboard)/settings/integrations/_components/telegram-integration-card.tsx

@@ -23,7 +23,9 @@ export const TelegramIntegrationCard = () => {
 
   const isLoading = channel === undefined;
   const isConnected = channel?.status === "connected";
-  const isOffline = !isSquadhubLoading && squadhubStatus === "down";
+  const isOffline =
+    !isSquadhubLoading &&
+    (squadhubStatus === "down" || squadhubStatus === "restarting");
 
   if (isLoading) {
     return <TelegramCardSkeleton />;

apps/web/src/app/(dashboard)/settings/integrations/_components/telegram-remove-dialog.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import { useMutation as useConvexMutation } from "convex/react";
-import { toast } from "@clawe/ui/components/sonner";
+import { toast } from "sonner";
 import { api } from "@clawe/backend";
 import { Button } from "@clawe/ui/components/button";
 import { Spinner } from "@clawe/ui/components/spinner";

apps/web/src/app/(dashboard)/settings/integrations/_components/telegram-setup-dialog.tsx

@@ -4,7 +4,7 @@ import { useState } from "react";
 import Image from "next/image";
 import { useMutation } from "@tanstack/react-query";
 import { useMutation as useConvexMutation } from "convex/react";
-import { toast } from "@clawe/ui/components/sonner";
+import { toast } from "sonner";
 import { Copy, Check, AlertTriangle } from "lucide-react";
 import { api } from "@clawe/backend";
 import { Button } from "@clawe/ui/components/button";
@@ -38,7 +38,8 @@ export const TelegramSetupDialog = ({
   onOpenChange,
 }: TelegramSetupDialogProps) => {
   const { status, isLoading: isSquadhubLoading } = useSquadhubStatus();
-  const isOffline = !isSquadhubLoading && status === "down";
+  const isOffline =
+    !isSquadhubLoading && (status === "down" || status === "restarting");
 
   const [step, setStep] = useState<Step>("token");
   const [botToken, setBotToken] = useState("");

apps/web/src/app/api/squadhub/health/route.ts

@@ -1,13 +1,62 @@
 import { NextResponse } from "next/server";
 import type { NextRequest } from "next/server";
 import { checkHealth } from "@clawe/shared/squadhub";
+import { loadPlugins, getPlugin } from "@clawe/plugins";
 import { getAuthenticatedTenant } from "@/lib/api/tenant-auth";
 import { getConnection } from "@/lib/squadhub/connection";
+import { config } from "@/lib/config";
+
+// Track when each tenant's gateway was last known healthy.
+// During a restart the process is briefly down (ECONNREFUSED), making
+// an HTTP probe indistinguishable from a real outage. This lets us
+// infer "restarting" when the gateway was healthy moments ago.
+const lastHealthyAt = new Map<string, number>();
+const RESTART_GRACE_MS = 30_000;
+
+async function isInfraRunning(
+  tenantId: string,
+  squadhubUrl: string,
+): Promise<boolean> {
+  try {
+    if (config.isCloud) {
+      await loadPlugins();
+      const lifecycle = getPlugin("squadhub-lifecycle");
+      const status = await lifecycle.getStatus(tenantId);
+      return status.running;
+    }
+
+    // Dev/OSS: HTTP probe — any response means the process is alive
+    await fetch(squadhubUrl, {
+      method: "HEAD",
+      signal: AbortSignal.timeout(3000),
+    });
+    return true;
+  } catch {
+    // Probe failed (ECONNREFUSED). Check if gateway was recently healthy —
+    // during a restart the process is briefly down but should come back.
+    const lastHealthy = lastHealthyAt.get(tenantId);
+    if (lastHealthy && Date.now() - lastHealthy < RESTART_GRACE_MS) {
+      return true;
+    }
+    return false;
+  }
+}
 
 export async function POST(request: NextRequest) {
   const auth = await getAuthenticatedTenant(request);
   if (auth.error) return auth.error;
 
-  const result = await checkHealth(getConnection(auth.tenant));
-  return NextResponse.json(result);
+  const connection = getConnection(auth.tenant);
+  const result = await checkHealth(connection);
+
+  if (result.ok) {
+    lastHealthyAt.set(auth.tenant._id, Date.now());
+    return NextResponse.json(result);
+  }
+
+  const restarting = await isInfraRunning(
+    auth.tenant._id,
+    connection.squadhubUrl,
+  );
+  return NextResponse.json({ ...result, restarting });
 }