1 files changed, 68 insertions, 11 deletions

diff --git a/makima/frontend/src/routes/settings.tsx b/makima/frontend/src/routes/settings.tsx
index d3f4c1b..b93ecbc 100644
--- a/makima/frontend/src/routes/settings.tsx
+++ b/makima/frontend/src/routes/settings.tsx
@@ -11,6 +11,7 @@ import {
   changeEmail,
   deleteAccount,
   listDaemons,
+  restartDaemon,
   listRepositoryHistory,
   deleteRepositoryHistory,
   type ApiKeyInfo,
@@ -306,6 +307,8 @@ export default function SettingsPage() {
   const [daemons, setDaemons] = useState<Daemon[]>([]);
   const [daemonsLoading, setDaemonsLoading] = useState(true);
   const [daemonsError, setDaemonsError] = useState<string | null>(null);
+  const [restartingDaemonId, setRestartingDaemonId] = useState<string | null>(null);
+  const [restartConfirmDaemonId, setRestartConfirmDaemonId] = useState<string | null>(null);
 
   // Repository history state
   const [repoHistory, setRepoHistory] = useState<RepositoryHistoryEntry[]>([]);
@@ -376,6 +379,23 @@ export default function SettingsPage() {
     }
   };
 
+  const handleRestartDaemon = async (id: string) => {
+    try {
+      setRestartingDaemonId(id);
+      setDaemonsError(null);
+      await restartDaemon(id);
+      // Daemon will restart, so refresh the list after a short delay
+      setTimeout(() => {
+        loadDaemons();
+      }, 2000);
+    } catch (err) {
+      setDaemonsError(err instanceof Error ? err.message : "Failed to restart daemon");
+    } finally {
+      setRestartingDaemonId(null);
+      setRestartConfirmDaemonId(null);
+    }
+  };
+
   const handleCreate = async () => {
     try {
       setActionLoading(true);
@@ -687,17 +707,19 @@ export default function SettingsPage() {
                         <span className="font-mono text-xs text-[#9bc3ff]">
                           {daemon.hostname || "Unknown Host"}
                         </span>
-                        <span
-                          className={`text-[10px] font-mono uppercase px-2 py-0.5 border ${
-                            daemon.status === "connected"
-                              ? "text-green-400 border-green-700/50 bg-green-900/20"
-                              : daemon.status === "unhealthy"
-                              ? "text-yellow-400 border-yellow-700/50 bg-yellow-900/20"
-                              : "text-[#8899aa] border-[rgba(117,170,252,0.25)]"
-                          }`}
-                        >
-                          {daemon.status}
-                        </span>
+                        <div className="flex items-center gap-2">
+                          <span
+                            className={`text-[10px] font-mono uppercase px-2 py-0.5 border ${
+                              daemon.status === "connected"
+                                ? "text-green-400 border-green-700/50 bg-green-900/20"
+                                : daemon.status === "unhealthy"
+                                ? "text-yellow-400 border-yellow-700/50 bg-yellow-900/20"
+                                : "text-[#8899aa] border-[rgba(117,170,252,0.25)]"
+                            }`}
+                          >
+                            {daemon.status}
+                          </span>
+                        </div>
                       </div>
                       <div className="font-mono text-[10px] text-[#7788aa] space-y-1">
                         <div className="flex justify-between">
@@ -721,6 +743,41 @@ export default function SettingsPage() {
                           </div>
                         )}
                       </div>
+                      {/* Restart Section */}
+                      {daemon.status === "connected" && (
+                        <div className="mt-3 pt-2 border-t border-[rgba(117,170,252,0.1)]">
+                          {restartConfirmDaemonId === daemon.id ? (
+                            <div className="flex items-center justify-between gap-2">
+                              <span className="text-[10px] font-mono text-yellow-400">
+                                Restart daemon? Running tasks will be interrupted.
+                              </span>
+                              <div className="flex gap-2">
+                                <button
+                                  onClick={() => setRestartConfirmDaemonId(null)}
+                                  className="text-[10px] font-mono text-[#7788aa] hover:text-[#9bc3ff] px-2 py-1"
+                                  disabled={restartingDaemonId === daemon.id}
+                                >
+                                  Cancel
+                                </button>
+                                <button
+                                  onClick={() => handleRestartDaemon(daemon.id)}
+                                  disabled={restartingDaemonId === daemon.id}
+                                  className="text-[10px] font-mono text-red-400 hover:text-red-300 px-2 py-1 border border-red-700/50 bg-red-900/20 disabled:opacity-50"
+                                >
+                                  {restartingDaemonId === daemon.id ? "Restarting..." : "Confirm"}
+                                </button>
+                              </div>
+                            </div>
+                          ) : (
+                            <button
+                              onClick={() => setRestartConfirmDaemonId(daemon.id)}
+                              className="text-[10px] font-mono text-[#75aafc] hover:text-[#9bc3ff]"
+                            >
+                              ⟳ Restart Daemon
+                            </button>
+                          )}
+                        </div>
+                      )}
                     </div>
                   ))}
                 </div>