Disable auto-update setting & settings page has scroll shortcuts (#590)

e2e-tests/auto_update.spec.ts

+import { expect } from "@playwright/test";
+import { test } from "./helpers/test_helper";
+
+test("auto update - disable and enable", async ({ po }) => {
+  await po.goToSettingsTab();
+
+  await po.toggleAutoUpdate();
+  await expect(
+    po.page.getByRole("button", { name: "Restart Dyad" }),
+  ).toBeVisible();
+  await po.snapshotSettings();
+
+  await po.toggleAutoUpdate();
+  await po.snapshotSettings();
+});

e2e-tests/helpers/test_helper.ts

@@ -833,6 +833,10 @@ export class PageObject {
     expect(sanitizedSettingsContent).toMatchSnapshot();
   }
 
+  async toggleAutoUpdate() {
+    await this.page.getByRole("switch", { name: "Auto-update" }).click();
+  }
+
   async clickTelemetryAccept() {
     await this.page.getByTestId("telemetry-accept-button").click();
   }

e2e-tests/snapshots/auto_update.spec.ts_auto-update---disable-and-enable-1.txt

+{
+  "selectedModel": {
+    "name": "auto",
+    "provider": "auto"
+  },
+  "providerSettings": {},
+  "telemetryConsent": "unset",
+  "telemetryUserId": "[UUID]",
+  "hasRunBefore": true,
+  "experiments": {},
+  "lastShownReleaseNotesVersion": "[scrubbed]",
+  "enableProLazyEditsMode": true,
+  "enableProSmartFilesContextMode": true,
+  "selectedChatMode": "build",
+  "enableAutoFixProblems": false,
+  "enableAutoUpdate": false,
+  "isTestMode": true
+}
\ No newline at end of file

e2e-tests/snapshots/auto_update.spec.ts_auto-update---disable-and-enable-2.txt

+{
+  "selectedModel": {
+    "name": "auto",
+    "provider": "auto"
+  },
+  "providerSettings": {},
+  "telemetryConsent": "unset",
+  "telemetryUserId": "[UUID]",
+  "hasRunBefore": true,
+  "experiments": {},
+  "lastShownReleaseNotesVersion": "[scrubbed]",
+  "enableProLazyEditsMode": true,
+  "enableProSmartFilesContextMode": true,
+  "selectedChatMode": "build",
+  "enableAutoFixProblems": false,
+  "enableAutoUpdate": true,
+  "isTestMode": true
+}
\ No newline at end of file

e2e-tests/snapshots/context_window.spec.ts_context-window-4.txt

@@ -15,5 +15,6 @@
   "enableProSmartFilesContextMode": true,
   "selectedChatMode": "build",
   "enableAutoFixProblems": false,
+  "enableAutoUpdate": true,
   "isTestMode": true
 }
\ No newline at end of file

e2e-tests/snapshots/telemetry.spec.ts_telemetry---accept-1.txt

@@ -12,5 +12,6 @@
   "enableProSmartFilesContextMode": true,
   "selectedChatMode": "build",
   "enableAutoFixProblems": false,
+  "enableAutoUpdate": true,
   "isTestMode": true
 }
\ No newline at end of file

e2e-tests/snapshots/telemetry.spec.ts_telemetry---accept-2.txt

@@ -13,5 +13,6 @@
   "enableProSmartFilesContextMode": true,
   "selectedChatMode": "build",
   "enableAutoFixProblems": false,
+  "enableAutoUpdate": true,
   "isTestMode": true
 }
\ No newline at end of file

e2e-tests/snapshots/telemetry.spec.ts_telemetry---later-1.txt

@@ -12,5 +12,6 @@
   "enableProSmartFilesContextMode": true,
   "selectedChatMode": "build",
   "enableAutoFixProblems": false,
+  "enableAutoUpdate": true,
   "isTestMode": true
 }
\ No newline at end of file

e2e-tests/snapshots/telemetry.spec.ts_telemetry---later-2.txt

@@ -13,5 +13,6 @@
   "enableProSmartFilesContextMode": true,
   "selectedChatMode": "build",
   "enableAutoFixProblems": false,
+  "enableAutoUpdate": true,
   "isTestMode": true
 }
\ No newline at end of file

e2e-tests/snapshots/telemetry.spec.ts_telemetry---reject-1.txt

@@ -12,5 +12,6 @@
   "enableProSmartFilesContextMode": true,
   "selectedChatMode": "build",
   "enableAutoFixProblems": false,
+  "enableAutoUpdate": true,
   "isTestMode": true
 }
\ No newline at end of file

e2e-tests/snapshots/telemetry.spec.ts_telemetry---reject-2.txt

@@ -13,5 +13,6 @@
   "enableProSmartFilesContextMode": true,
   "selectedChatMode": "build",
   "enableAutoFixProblems": false,
+  "enableAutoUpdate": true,
   "isTestMode": true
 }
\ No newline at end of file

e2e-tests/snapshots/thinking_budget.spec.ts_thinking-budget-1.txt

@@ -22,5 +22,6 @@
   "enableProSmartFilesContextMode": true,
   "selectedChatMode": "build",
   "enableAutoFixProblems": false,
+  "enableAutoUpdate": true,
   "isTestMode": true
 }
\ No newline at end of file

e2e-tests/snapshots/thinking_budget.spec.ts_thinking-budget-3.txt

@@ -22,5 +22,6 @@
   "enableProSmartFilesContextMode": true,
   "selectedChatMode": "build",
   "enableAutoFixProblems": false,
+  "enableAutoUpdate": true,
   "isTestMode": true
 }
\ No newline at end of file

e2e-tests/snapshots/thinking_budget.spec.ts_thinking-budget-5.txt

@@ -22,5 +22,6 @@
   "enableProSmartFilesContextMode": true,
   "selectedChatMode": "build",
   "enableAutoFixProblems": false,
+  "enableAutoUpdate": true,
   "isTestMode": true
 }
\ No newline at end of file

package-lock.json

 {
   "name": "dyad",
-  "version": "0.8.0",
+  "version": "0.11.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "dyad",
-      "version": "0.8.0",
+      "version": "0.11.1",
       "license": "MIT",
       "dependencies": {
         "@ai-sdk/anthropic": "^1.2.8",
@@ -24,6 +24,7 @@
         "@radix-ui/react-dropdown-menu": "^2.1.7",
         "@radix-ui/react-label": "^2.1.4",
         "@radix-ui/react-popover": "^1.1.7",
+        "@radix-ui/react-scroll-area": "^1.2.9",
         "@radix-ui/react-select": "^2.2.2",
         "@radix-ui/react-separator": "^1.1.2",
         "@radix-ui/react-slot": "^1.2.2",
@@ -4680,6 +4681,78 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-scroll-area": {
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.9.tgz",
+      "integrity": "sha512-YSjEfBXnhUELsO2VzjdtYYD4CfQjvao+lhhrX5XsHD7/cyUNzljF1FHEbgTPN7LH2MClfwRMIsYlqTYpKTTe2A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-select": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.2.tgz",

package.json

@@ -97,6 +97,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.7",
     "@radix-ui/react-label": "^2.1.4",
     "@radix-ui/react-popover": "^1.1.7",
+    "@radix-ui/react-scroll-area": "^1.2.9",
     "@radix-ui/react-select": "^2.2.2",
     "@radix-ui/react-separator": "^1.1.2",
     "@radix-ui/react-slot": "^1.2.2",

src/components/AutoUpdateSwitch.tsx

+import { useSettings } from "@/hooks/useSettings";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { toast } from "sonner";
+import { IpcClient } from "@/ipc/ipc_client";
+
+export function AutoUpdateSwitch() {
+  const { settings, updateSettings } = useSettings();
+
+  if (!settings) {
+    return null;
+  }
+
+  return (
+    <div className="flex items-center space-x-2">
+      <Switch
+        id="enable-auto-update"
+        checked={settings.enableAutoUpdate}
+        onCheckedChange={(checked) => {
+          updateSettings({ enableAutoUpdate: checked });
+          toast("Auto-update settings changed", {
+            description:
+              "You will need to restart Dyad for your settings to take effect.",
+            action: {
+              label: "Restart Dyad",
+              onClick: () => {
+                IpcClient.getInstance().restartDyad();
+              },
+            },
+          });
+        }}
+      />
+      <Label htmlFor="enable-auto-update">Auto-update</Label>
+    </div>
+  );
+}

src/components/ProviderSettings.tsx

@@ -68,7 +68,7 @@ export function ProviderSettingsGrid() {
   if (isLoading) {
     return (
       <div className="p-6">
-        <h2 className="text-2xl font-bold mb-6">AI Providers</h2>
+        <h2 className="text-lg font-medium mb-6">AI Providers</h2>
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
           {[1, 2, 3, 4, 5].map((i) => (
             <Card key={i} className="border-border">
@@ -86,7 +86,7 @@ export function ProviderSettingsGrid() {
   if (error) {
     return (
       <div className="p-6">
-        <h2 className="text-2xl font-bold mb-6">AI Providers</h2>
+        <h2 className="text-lg font-medium mb-6">AI Providers</h2>
         <Alert variant="destructive">
           <AlertTriangle className="h-4 w-4" />
           <AlertTitle>Error</AlertTitle>
@@ -100,7 +100,7 @@ export function ProviderSettingsGrid() {
 
   return (
     <div className="p-6">
-      <h2 className="text-2xl font-bold mb-6">AI Providers</h2>
+      <h2 className="text-lg font-medium mb-6">AI Providers</h2>
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
         {providers
           ?.filter((p) => p.type !== "local")
@@ -116,7 +116,7 @@ export function ProviderSettingsGrid() {
                   className="p-4 cursor-pointer"
                   onClick={() => handleProviderClick(provider.id)}
                 >
-                  <CardTitle className="text-xl flex items-center justify-between">
+                  <CardTitle className="text-lg font-medium flex items-center justify-between">
                     {provider.name}
                     {isProviderSetup(provider.id) ? (
                       <span className="ml-3 text-sm font-medium text-green-500 bg-green-50 dark:bg-green-900/30 border border-green-500/50 dark:border-green-500/50 px-2 py-1 rounded-full">
@@ -178,8 +178,8 @@ export function ProviderSettingsGrid() {
           onClick={() => setIsDialogOpen(true)}
         >
           <CardHeader className="p-4 flex flex-col items-center justify-center h-full">
-            <PlusIcon className="h-10 w-10 text-muted-foreground mb-2" />
-            <CardTitle className="text-xl text-center">
+            <PlusIcon className="h-8 w-8 text-muted-foreground mb-2" />
+            <CardTitle className="text-lg font-medium text-center">
               Add custom provider
             </CardTitle>
             <CardDescription className="text-center">

src/components/SettingsList.tsx

+import { ScrollArea } from "@/components/ui/scroll-area";
+import { cn } from "@/lib/utils";
+import { useNavigate } from "@tanstack/react-router";
+import { useEffect, useState } from "react";
+
+const SETTINGS_SECTIONS = [
+  { id: "general-settings", label: "General" },
+  { id: "workflow-settings", label: "Workflow" },
+  { id: "ai-settings", label: "AI" },
+  { id: "provider-settings", label: "Model Providers" },
+  { id: "telemetry", label: "Telemetry" },
+  { id: "integrations", label: "Integrations" },
+  { id: "experiments", label: "Experiments" },
+  { id: "danger-zone", label: "Danger Zone" },
+];
+
+export function SettingsList({ show }: { show: boolean }) {
+  const navigate = useNavigate();
+  const [activeSection, setActiveSection] = useState<string | null>(
+    "general-settings",
+  );
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            setActiveSection(entry.target.id);
+            return;
+          }
+        }
+      },
+      { rootMargin: "-20% 0px -80% 0px", threshold: 0 },
+    );
+
+    for (const section of SETTINGS_SECTIONS) {
+      const el = document.getElementById(section.id);
+      if (el) {
+        observer.observe(el);
+      }
+    }
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  if (!show) {
+    return null;
+  }
+
+  const handleScrollAndNavigateTo = async (id: string) => {
+    await navigate({
+      to: "/settings",
+    });
+    const element = document.getElementById(id);
+    if (element) {
+      element.scrollIntoView({ behavior: "smooth", block: "start" });
+      setActiveSection(id);
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex-shrink-0 p-4">
+        <h2 className="text-lg font-semibold tracking-tight">Settings</h2>
+      </div>
+      <ScrollArea className="flex-grow">
+        <div className="space-y-1 p-4 pt-0">
+          {SETTINGS_SECTIONS.map((section) => (
+            <button
+              key={section.id}
+              onClick={() => handleScrollAndNavigateTo(section.id)}
+              className={cn(
+                "w-full text-left px-3 py-2 rounded-md text-sm transition-colors",
+                activeSection === section.id
+                  ? "bg-sidebar-accent text-sidebar-accent-foreground font-semibold"
+                  : "hover:bg-sidebar-accent",
+              )}
+            >
+              {section.label}
+            </button>
+          ))}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+}

src/components/app-sidebar.tsx

@@ -20,6 +20,7 @@ import {
 import { ChatList } from "./ChatList";
 import { AppList } from "./AppList";
 import { HelpDialog } from "./HelpDialog"; // Import the new dialog
+import { SettingsList } from "./SettingsList";
 
 // Menu items.
 const items = [
@@ -49,6 +50,7 @@ const items = [
 type HoverState =
   | "start-hover:app"
   | "start-hover:chat"
+  | "start-hover:settings"
   | "clear-hover"
   | "no-hover";
 
@@ -60,10 +62,7 @@ export function AppSidebar() {
   const [isDropdownOpen] = useAtom(dropdownOpenAtom);
 
   useEffect(() => {
-    if (
-      (hoverState === "start-hover:app" || hoverState === "start-hover:chat") &&
-      state === "collapsed"
-    ) {
+    if (hoverState.startsWith("start-hover") && state === "collapsed") {
       expandedByHover.current = true;
       toggleSidebar();
     }
@@ -84,17 +83,22 @@ export function AppSidebar() {
     routerState.location.pathname === "/" ||
     routerState.location.pathname.startsWith("/app-details");
   const isChatRoute = routerState.location.pathname === "/chat";
+  const isSettingsRoute = routerState.location.pathname.startsWith("/settings");
 
   let selectedItem: string | null = null;
   if (hoverState === "start-hover:app") {
     selectedItem = "Apps";
   } else if (hoverState === "start-hover:chat") {
     selectedItem = "Chat";
+  } else if (hoverState === "start-hover:settings") {
+    selectedItem = "Settings";
   } else if (state === "expanded") {
     if (isAppRoute) {
       selectedItem = "Apps";
     } else if (isChatRoute) {
       selectedItem = "Chat";
+    } else if (isSettingsRoute) {
+      selectedItem = "Settings";
     }
   }
 
@@ -122,6 +126,7 @@ export function AppSidebar() {
           <div className="w-[240px]">
             <AppList show={selectedItem === "Apps"} />
             <ChatList show={selectedItem === "Chat"} />
+            <SettingsList show={selectedItem === "Settings"} />
           </div>
         </div>
       </SidebarContent>
@@ -188,6 +193,8 @@ function AppIcons({
                         onHoverChange("start-hover:app");
                       } else if (item.title === "Chat") {
                         onHoverChange("start-hover:chat");
+                      } else if (item.title === "Settings") {
+                        onHoverChange("start-hover:settings");
                       }
                     }}
                   >

src/components/ui/scroll-area.tsx

+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+
+import { cn } from "@/lib/utils";
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 border-t border-t-transparent p-[1px]",
+      className,
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };

src/ipc/handlers/app_handlers.ts

-import { ipcMain } from "electron";
+import { ipcMain, app } from "electron";
 import { db, getDatabasePath } from "../../db";
 import { apps, chats } from "../../db/schema";
 import { desc, eq } from "drizzle-orm";
@@ -186,6 +186,11 @@ async function killProcessOnPort(port: number): Promise<void> {
 }
 
 export function registerAppHandlers() {
+  handle("restart-dyad", async () => {
+    app.relaunch();
+    app.quit();
+  });
+
   handle(
     "create-app",
     async (

src/ipc/ipc_client.ts

@@ -165,6 +165,10 @@ export class IpcClient {
     return IpcClient.instance;
   }
 
+  public async restartDyad(): Promise<void> {
+    await this.ipcRenderer.invoke("restart-dyad");
+  }
+
   public async reloadEnvPath(): Promise<void> {
     await this.ipcRenderer.invoke("reload-env-path");
   }

src/lib/schemas.ts

@@ -151,6 +151,7 @@ export const UserSettingsSchema = z.object({
 
   enableAutoFixProblems: z.boolean().optional(),
   enableNativeGit: z.boolean().optional(),
+  enableAutoUpdate: z.boolean(),
 
   ////////////////////////////////
   // E2E TESTING ONLY.

src/main.ts

@@ -17,7 +17,11 @@ log.scope.labelPadding = false;
 
 const logger = log.scope("main");
 
-updateElectronApp(); // additional configuration options available
+// Check settings before enabling auto-update
+const settings = readSettings();
+if (settings.enableAutoUpdate) {
+  updateElectronApp({ logger }); // additional configuration options available
+}
 
 // Load environment variables from .env file
 dotenv.config();

src/main/settings.ts

@@ -21,6 +21,7 @@ const DEFAULT_SETTINGS: UserSettings = {
   enableProSmartFilesContextMode: true,
   selectedChatMode: "build",
   enableAutoFixProblems: false,
+  enableAutoUpdate: true,
 };
 
 const SETTINGS_FILE = "user-settings.json";

src/preload.ts

@@ -89,6 +89,7 @@ const validInvokeChannels = [
   "open-ios",
   "open-android",
   "check-problems",
+  "restart-dyad",
   // Test-only channels
   // These should ALWAYS be guarded with IS_TEST_BUILD in the main process.
   // We can't detect with IS_TEST_BUILD in the preload script because