fix: preserve manual restart notice and add sidebar tooltip

Author: jacobjmc

src-tauri/src/backend/app_server.rs

@@ -247,7 +247,7 @@ pub(crate) async fn opencode_restart_required_status() -> Value {
         "serverStartedAt": server_started_at.to_rfc3339(),
         "latestConfigChangeAt": latest_change.map(|dt| dt.to_rfc3339()),
         "reason": if required {
-            Some("OpenCode config changed after the managed server started")
+            Some("Config changed since server start")
         } else {
             None::<&str>
         }

src/features/app/components/SidebarCornerActions.tsx

@@ -71,9 +71,7 @@ export function SidebarCornerActions({
           return;
         }
         if (status.required) {
-          markOpenCodeRestartRequired(status.reason ?? "OpenCode config changed.");
-        } else {
-          clearOpenCodeRestartRequired();
+          markOpenCodeRestartRequired(status.reason ?? "OpenCode config changed.", "detector");
         }
       } catch {
         // No-op: banner is best-effort and should not break sidebar interactions.
@@ -106,25 +104,13 @@ export function SidebarCornerActions({
     }
   };
 
-  const restartTooltip = restartNotice.reason
-    ? `OpenCode config changes are pending. ${restartNotice.reason} Restart the OpenCode server to apply updated agents and models.`
-    : "OpenCode config changes are pending. Restart the OpenCode server to apply updated agents and models.";
+  const reasonText = restartNotice.reason?.trim().replace(/[.\s]+$/, "") ?? "";
+  const restartTooltip = reasonText
+    ? `${reasonText}. Restart OpenCode to refresh agents and models.`
+    : "Config changed. Restart OpenCode to refresh agents and models.";
 
   return (
     <div className="sidebar-corner-actions">
-      {restartNotice.required && (
-        <button
-          type="button"
-          className={`sidebar-restart-banner${restartingServer ? " is-restarting" : ""}`}
-          onClick={() => void handleRestartServer()}
-          disabled={restartingServer}
-          aria-label="Restart OpenCode server to apply config changes"
-          title={restartTooltip}
-        >
-          <RotateCcw size={12} aria-hidden />
-          <span>{restartingServer ? "Restarting..." : "Restart OpenCode"}</span>
-        </button>
-      )}
       <div className="sidebar-corner-actions-row">
         <button
           className="ghost sidebar-corner-button"
@@ -135,6 +121,29 @@ export function SidebarCornerActions({
         >
           <Settings size={14} aria-hidden />
         </button>
+        {restartNotice.required && (
+          <div className="sidebar-restart-banner-wrap">
+            <button
+              type="button"
+              className={`sidebar-restart-banner${restartingServer ? " is-restarting" : ""}`}
+              onClick={() => void handleRestartServer()}
+              disabled={restartingServer}
+              aria-label="Restart OpenCode server to apply config changes"
+              aria-describedby="sidebar-restart-tooltip"
+            >
+              <RotateCcw size={12} aria-hidden />
+              <span>{restartingServer ? "Restarting..." : "Config changed"}</span>
+            </button>
+            <div
+              id="sidebar-restart-tooltip"
+              role="tooltip"
+              className="sidebar-restart-tooltip"
+            >
+              <strong>Restart required</strong>
+              <span>{restartTooltip}</span>
+            </div>
+          </div>
+        )}
         {showDebugButton && (
           <button
             className="ghost sidebar-corner-button"

src/services/opencodeRestartNotice.ts

@@ -6,12 +6,14 @@ export type OpenCodeRestartNotice = {
   required: boolean;
   updatedAt: number | null;
   reason: string | null;
+  source: "manual" | "detector" | null;
 };
 
 const DEFAULT_NOTICE: OpenCodeRestartNotice = {
   required: false,
   updatedAt: null,
   reason: null,
+  source: null,
 };
 
 function canUseBrowserStorage() {
@@ -39,20 +41,26 @@ export function readOpenCodeRestartNotice(): OpenCodeRestartNotice {
       required: parsed.required === true,
       updatedAt: typeof parsed.updatedAt === "number" ? parsed.updatedAt : null,
       reason: typeof parsed.reason === "string" ? parsed.reason : null,
+      source:
+        parsed.source === "manual" || parsed.source === "detector" ? parsed.source : null,
     };
   } catch {
     return DEFAULT_NOTICE;
   }
 }
 
-export function markOpenCodeRestartRequired(reason?: string | null) {
+export function markOpenCodeRestartRequired(
+  reason?: string | null,
+  source: "manual" | "detector" = "manual",
+) {
   if (!canUseBrowserStorage()) {
     return;
   }
   const next: OpenCodeRestartNotice = {
     required: true,
     updatedAt: Date.now(),
     reason: reason?.trim() ? reason.trim() : null,
+    source,
   };
   try {
     localStorage.setItem(STORAGE_KEY, JSON.stringify(next));

src/styles/sidebar.css

@@ -1325,8 +1325,7 @@
   left: var(--sidebar-padding);
   bottom: 16px;
   display: inline-flex;
-  flex-direction: column;
-  align-items: flex-start;
+  align-items: center;
   gap: 8px;
 }
 
@@ -1336,6 +1335,12 @@
   gap: 8px;
 }
 
+.sidebar-restart-banner-wrap {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
 .sidebar-restart-banner {
   display: inline-flex;
   align-items: center;
@@ -1374,6 +1379,52 @@
   animation: sidebar-account-spin 0.8s linear infinite;
 }
 
+.sidebar-restart-tooltip {
+  position: absolute;
+  right: 0;
+  bottom: calc(100% + 10px);
+  width: min(248px, calc(var(--sidebar-width, 280px) - (var(--sidebar-padding) * 2)));
+  min-width: 0;
+  display: grid;
+  gap: 4px;
+  padding: 8px 10px;
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(10, 13, 18, 0.96);
+  color: rgba(235, 240, 248, 0.95);
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
+  font-size: 11px;
+  line-height: 1.35;
+  white-space: normal;
+  overflow-wrap: break-word;
+  opacity: 0;
+  transform: translateY(4px);
+  pointer-events: none;
+  transition: opacity 120ms ease, transform 120ms ease;
+  z-index: 20;
+}
+
+.sidebar-restart-tooltip strong {
+  font-size: 11px;
+  font-weight: 700;
+  color: rgba(255, 228, 181, 0.98);
+}
+
+.sidebar-restart-banner-wrap:hover .sidebar-restart-tooltip,
+.sidebar-restart-banner-wrap:focus-within .sidebar-restart-tooltip {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.sidebar-restart-tooltip::after {
+  content: "";
+  position: absolute;
+  right: 18px;
+  top: 100%;
+  border: 6px solid transparent;
+  border-top-color: rgba(10, 13, 18, 0.96);
+}
+
 .sidebar-corner-button {
   padding: 6px;
   border-radius: 8px;