From 3d685335eb926795716689f3e1355fcf30624ffe Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Sat, 4 Apr 2026 09:55:15 -0500
Subject: [PATCH] Add sign out button to instance general settings

Adds a sign out section at the bottom of the general settings page.
Uses authApi.signOut() and invalidates the session query to redirect
to the login page.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/pages/InstanceGeneralSettings.tsx | 34 +++++++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/ui/src/pages/InstanceGeneralSettings.tsx b/ui/src/pages/InstanceGeneralSettings.tsx
index 4b5e6b9c..923c8cb8 100644
--- a/ui/src/pages/InstanceGeneralSettings.tsx
+++ b/ui/src/pages/InstanceGeneralSettings.tsx
@@ -1,8 +1,10 @@
 import { useEffect, useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import type { PatchInstanceGeneralSettings } from "@paperclipai/shared";
-import { SlidersHorizontal } from "lucide-react";
+import { LogOut, SlidersHorizontal } from "lucide-react";
+import { authApi } from "@/api/auth";
 import { instanceSettingsApi } from "@/api/instanceSettings";
+import { Button } from "../components/ui/button";
 import { useBreadcrumbs } from "../context/BreadcrumbContext";
 import { queryKeys } from "../lib/queryKeys";
 import { cn } from "../lib/utils";
@@ -14,6 +16,16 @@ export function InstanceGeneralSettings() {
   const queryClient = useQueryClient();
   const [actionError, setActionError] = useState<string | null>(null);
 
+  const signOutMutation = useMutation({
+    mutationFn: () => authApi.signOut(),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.auth.session });
+    },
+    onError: (error) => {
+      setActionError(error instanceof Error ? error.message : "Failed to sign out.");
+    },
+  });
+
   useEffect(() => {
     setBreadcrumbs([
       { label: "Instance Settings" },
@@ -213,6 +225,26 @@ export function InstanceGeneralSettings() {
           </p>
         </div>
       </section>
+
+      <section className="rounded-xl border border-border bg-card p-5">
+        <div className="flex items-start justify-between gap-4">
+          <div className="space-y-1.5">
+            <h2 className="text-sm font-semibold">Sign out</h2>
+            <p className="max-w-2xl text-sm text-muted-foreground">
+              Sign out of this Paperclip instance. You will be redirected to the login page.
+            </p>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={signOutMutation.isPending}
+            onClick={() => signOutMutation.mutate()}
+          >
+            <LogOut className="size-4" />
+            {signOutMutation.isPending ? "Signing out..." : "Sign out"}
+          </Button>
+        </div>
+      </section>
     </div>
   );
 }