@hienlh/ppm 0.19.2 → 0.19.4

package/src/web/components/settings/settings-category-rail.tsx

@@ -0,0 +1,62 @@
+/**
+ * Left pane of the split layout: every category visible at once, grouped.
+ *
+ * Nothing collapses and nothing hides behind a disclosure — the whole point of the split
+ * layout is that a wide container can afford to show the full tree, so switching panes is one
+ * click from anywhere.
+ */
+
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { cn } from "@/lib/utils";
+import {
+  SETTINGS_GROUPS, settingsCategoriesInGroup,
+  type SettingsCategoryId,
+} from "./settings-categories";
+
+interface SettingsCategoryRailProps {
+  active: SettingsCategoryId;
+  onSelect: (id: SettingsCategoryId) => void;
+}
+
+export function SettingsCategoryRail({ active, onSelect }: SettingsCategoryRailProps) {
+  return (
+    <ScrollArea className="h-full">
+      <nav className="p-2 space-y-4" aria-label="Settings categories">
+        {SETTINGS_GROUPS.map((group) => {
+          const categories = settingsCategoriesInGroup(group.id);
+          if (categories.length === 0) return null;
+          return (
+            <div key={group.id} className="space-y-1">
+              {group.label && (
+                <h3 className="px-2 pt-1 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+                  {group.label}
+                </h3>
+              )}
+              {categories.map((cat) => {
+                const Icon = cat.icon;
+                const isActive = cat.id === active;
+                return (
+                  <button
+                    key={cat.id}
+                    onClick={() => onSelect(cat.id)}
+                    data-testid={`settings-rail-${cat.id}`}
+                    aria-current={isActive ? "page" : undefined}
+                    className={cn(
+                      "w-full flex items-center gap-2.5 px-2.5 py-2 rounded-md text-left cursor-pointer transition-colors",
+                      isActive
+                        ? "bg-accent text-accent-foreground"
+                        : "hover:bg-accent/50 active:bg-accent",
+                    )}
+                  >
+                    <Icon className={cn("size-4 shrink-0", isActive ? "text-foreground" : "text-muted-foreground")} />
+                    <span className="text-sm truncate">{cat.label}</span>
+                  </button>
+                );
+              })}
+            </div>
+          );
+        })}
+      </nav>
+    </ScrollArea>
+  );
+}

package/src/web/components/settings/settings-section-content.tsx

@@ -0,0 +1,43 @@
+/**
+ * Maps a settings category to the component that fills the content pane.
+ *
+ * The only coupling point between the settings shell and the individual panes: adding a
+ * category means adding an entry here plus one in `settings-categories.ts`, and neither the
+ * rail, the stacked list, nor the window frame changes. Entries are lazy so opening Settings
+ * does not pull every pane's dependencies (charts, editors, cron pickers) into the bundle.
+ */
+
+import { Suspense, lazy, type ComponentType, type LazyExoticComponent } from "react";
+import { Loader2 } from "lucide-react";
+import type { SettingsCategoryId } from "./settings-categories";
+
+const SECTIONS: Record<SettingsCategoryId, LazyExoticComponent<ComponentType>> = {
+  general: lazy(() => import("./general-settings-section").then((m) => ({ default: m.GeneralSettingsSection }))),
+  appearance: lazy(() => import("./appearance-settings-section").then((m) => ({ default: m.AppearanceSettingsSection }))),
+  "ai-provider": lazy(() => import("./ai-settings-section").then((m) => ({ default: m.AISettingsSection }))),
+  accounts: lazy(() => import("./accounts/accounts-settings-section").then((m) => ({ default: m.AccountsSettingsSection }))),
+  ppmbot: lazy(() => import("./ppmbot-settings-section").then((m) => ({ default: m.PPMBotSettingsSection }))),
+  notifications: lazy(() => import("./notifications-settings-section").then((m) => ({ default: m.NotificationsSettingsSection }))),
+  jira: lazy(() => import("./jira-watcher-section").then((m) => ({ default: m.JiraWatcherSection }))),
+  extensions: lazy(() => import("./extension-manager-section").then((m) => ({ default: m.ExtensionManagerSection }))),
+  proxy: lazy(() => import("./proxy-settings-section").then((m) => ({ default: m.ProxySettingsSection }))),
+  schedules: lazy(() => import("./schedules/schedules-settings-section").then((m) => ({ default: m.SchedulesSettingsSection }))),
+  shortcuts: lazy(() => import("./keyboard-shortcuts-section").then((m) => ({ default: m.KeyboardShortcutsSection }))),
+  files: lazy(() => import("./files-settings-section").then((m) => ({ default: m.FilesSettingsSection }))),
+  "query-audit": lazy(() => import("./query-audit-section").then((m) => ({ default: m.QueryAuditSection }))),
+};
+
+export function SettingsSectionContent({ category }: { category: SettingsCategoryId }) {
+  const Section = SECTIONS[category];
+  return (
+    <Suspense
+      fallback={
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="size-5 animate-spin text-muted-foreground" />
+        </div>
+      }
+    >
+      <Section />
+    </Suspense>
+  );
+}

package/src/web/components/settings/settings-tab.tsx

@@ -1,329 +1,15 @@
-import { useState, useCallback, useRef } from "react";
-import {
-  Bell, Check, ChevronRight, ArrowLeft,
-  Bot, BellRing, Keyboard, Globe, Puzzle, Bug, FolderSearch, WrapText, CalendarClock, DatabaseZap,
-} from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Switch } from "@/components/ui/switch";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Separator } from "@/components/ui/separator";
-import { useShallow } from "zustand/react/shallow";
-import { useSettingsStore, type EditorTabStyle, type ExplorerSkinPref } from "@/stores/settings-store";
-import { cn } from "@/lib/utils";
-import { AISettingsSection } from "./ai-settings-section";
-import { KeyboardShortcutsSection } from "./keyboard-shortcuts-section";
-import { ProxySettingsSection } from "./proxy-settings-section";
-import { ExtensionManagerSection } from "./extension-manager-section";
-import { PPMBotSettingsSection } from "./ppmbot-settings-section";
-import { ChangePasswordSection } from "./change-password-section";
-import { FilesSettingsSection } from "./files-settings-section";
-import { SchedulesSettingsSection } from "./schedules/schedules-settings-section";
-import { ThemeManagerSection } from "./theme-manager-section";
-import { QueryAuditSection } from "./query-audit-section";
-import { ThemeGrid } from "./theme-grid";
-import { THEME_MODE_OPTIONS } from "@/theme/theme-mode-options";
-
-const TAB_STYLE_OPTIONS: { value: EditorTabStyle; label: string }[] = [
-  { value: "default", label: "Default" },
-  { value: "boxed", label: "Boxed" },
-  { value: "pill", label: "Pill" },
-];
-
-const EXPLORER_SKIN_OPTIONS: { value: ExplorerSkinPref; label: string }[] = [
-  { value: "auto", label: "Auto" },
-  { value: "windows", label: "Windows" },
-  { value: "macos", label: "macOS" },
-];
-
-type SettingsCategory = "ai" | "notifications" | "clawbot" | "schedules" | "jira" | "proxy" | "shortcuts" | "extensions" | "files" | "queryAudit";
-
-const CATEGORIES: { value: SettingsCategory; label: string; subtitle: string; icon: React.ElementType }[] = [
-  { value: "ai", label: "AI Provider", subtitle: "Model, execution mode, limits", icon: Bot },
-  { value: "notifications", label: "Notifications", subtitle: "Push & Telegram alerts", icon: BellRing },
-  { value: "clawbot", label: "PPMBot", subtitle: "Telegram AI bot", icon: Bot },
-  { value: "schedules", label: "Scheduled Agents", subtitle: "Run Claude on a cron schedule", icon: CalendarClock },
-  // Jira is now a toggle, not a full settings category
-  { value: "proxy", label: "API Proxy", subtitle: "Expose accounts as Anthropic API", icon: Globe },
-  { value: "shortcuts", label: "Keyboard Shortcuts", subtitle: "Customize key bindings", icon: Keyboard },
-  { value: "extensions", label: "Extensions", subtitle: "Install and manage extensions", icon: Puzzle },
-  { value: "files", label: "File Filters", subtitle: "Exclude patterns, ignore files", icon: FolderSearch },
-  { value: "queryAudit", label: "Query Audit Log", subtitle: "SQL history retention and size", icon: DatabaseZap },
-];
-
-export function SettingsTab() {
-  const { theme, setTheme, deviceName, setDeviceName, version, jiraEnabled, setJiraEnabled, tabWrap, toggleTabWrap, editorTabStyle, setEditorTabStyle, explorerSkin, setExplorerSkin } = useSettingsStore(useShallow((s) => ({ theme: s.themeMode, setTheme: s.setThemeMode, deviceName: s.deviceName, setDeviceName: s.setDeviceName, version: s.version, jiraEnabled: s.jiraEnabled, setJiraEnabled: s.setJiraEnabled, tabWrap: s.tabWrap, toggleTabWrap: s.toggleTabWrap, editorTabStyle: s.editorTabStyle, setEditorTabStyle: s.setEditorTabStyle, explorerSkin: s.explorerSkin, setExplorerSkin: s.setExplorerSkin })));
-  const [activeCategory, setActiveCategory] = useState<SettingsCategory | null>(null);
-  const [nameInput, setNameInput] = useState(deviceName ?? "");
-  const [nameSaving, setNameSaving] = useState(false);
-  const [nameSaved, setNameSaved] = useState(false);
-  const savedTimer = useRef<ReturnType<typeof setTimeout>>(undefined);
-  const nameChanged = nameInput.trim() !== (deviceName ?? "");
-
-  const handleSaveName = useCallback(async () => {
-    if (!nameChanged) return;
-    setNameSaving(true);
-    try {
-      await setDeviceName(nameInput);
-      setNameSaved(true);
-      clearTimeout(savedTimer.current);
-      savedTimer.current = setTimeout(() => setNameSaved(false), 2000);
-    } finally {
-      setNameSaving(false);
-    }
-  }, [nameInput, nameChanged, setDeviceName]);
-
-  // Detail view for a category
-  if (activeCategory) {
-    const cat = CATEGORIES.find((c) => c.value === activeCategory)!;
-    const Icon = cat.icon;
-    return (
-      <div className="h-full w-full flex flex-col">
-        {/* Detail header with back */}
-        <div className="shrink-0 px-2 pt-3 pb-1 flex items-center gap-1">
-          <Button
-            variant="ghost"
-            size="icon"
-            className="size-8 cursor-pointer shrink-0"
-            onClick={() => setActiveCategory(null)}
-          >
-            <ArrowLeft className="size-4" />
-          </Button>
-          <Icon className="size-4 text-muted-foreground shrink-0" />
-          <h2 className="text-sm font-semibold truncate">{cat.label}</h2>
-        </div>
-        <Separator />
-        {/* Detail content */}
-        <ScrollArea className="flex-1 min-h-0">
-          <div className="p-3">
-            {activeCategory === "ai" && <AISettingsSection compact />}
-            {activeCategory === "notifications" && <NotificationsContent />}
-            {activeCategory === "clawbot" && <PPMBotSettingsSection />}
-            {activeCategory === "schedules" && <SchedulesSettingsSection />}
-            {/* Jira is now a sidebar tab with a toggle below */}
-            {activeCategory === "proxy" && <ProxySettingsSection />}
-            {activeCategory === "shortcuts" && <KeyboardShortcutsSection />}
-            {activeCategory === "extensions" && <ExtensionManagerSection />}
-            {activeCategory === "files" && <FilesSettingsSection />}
-            {activeCategory === "queryAudit" && <QueryAuditSection />}
-          </div>
-        </ScrollArea>
-      </div>
-    );
-  }
-
-  // Main settings list
-  return (
-    <div className="h-full w-full flex flex-col">
-      <div className="shrink-0 px-3 pt-3 pb-1">
-        <h2 className="text-sm font-semibold">Settings</h2>
-      </div>
-      <ScrollArea className="flex-1 min-h-0">
-        <div className="p-3 space-y-4">
-          {/* Quick: Device Name */}
-          <section className="space-y-2">
-            <h3 className="text-xs font-medium text-muted-foreground">Device Name</h3>
-            <div className="flex gap-1.5">
-              <Input
-                value={nameInput}
-                onChange={(e) => setNameInput(e.target.value)}
-                onKeyDown={(e) => { if (e.key === "Enter") handleSaveName(); }}
-                placeholder="My Device"
-                className="h-8 text-xs flex-1"
-                maxLength={100}
-              />
-              <Button
-                variant={nameSaved ? "default" : "outline"}
-                size="sm"
-                className="h-8 text-xs px-3 cursor-pointer"
-                disabled={!nameChanged || nameSaving}
-                onClick={handleSaveName}
-              >
-                {nameSaving ? "..." : nameSaved ? <Check className="size-3.5" /> : "Save"}
-              </Button>
-            </div>
-            <p className="text-[11px] text-muted-foreground">
-              Shown in page title and synced to PPM Cloud.
-            </p>
-          </section>
-
-          {/* Security: Change Password */}
-          <ChangePasswordSection />
-
-          {/* Theme — visual grid of the 6 built-in styles */}
-          <section className="space-y-2">
-            <h3 className="text-xs font-medium text-muted-foreground">Theme</h3>
-            <ThemeGrid />
-            {/* Mode override (applies within the selected style; System follows OS) */}
-            <div className="flex gap-1.5 pt-1">
-              {THEME_MODE_OPTIONS.map((opt) => {
-                const Icon = opt.icon;
-                return (
-                  <Button
-                    key={opt.value}
-                    variant={theme === opt.value ? "default" : "outline"}
-                    size="sm"
-                    onClick={() => setTheme(opt.value)}
-                    className={cn(
-                      "flex-1 gap-1.5 text-xs h-8 cursor-pointer",
-                      theme === opt.value && "ring-2 ring-primary",
-                    )}
-                  >
-                    <Icon className="size-3.5" />
-                    {opt.label}
-                  </Button>
-                );
-              })}
-            </div>
-          </section>
-
-          {/* Imported themes (VSCode import) */}
-          <ThemeManagerSection />
-
-          {/* Jira toggle */}
-          <section className="space-y-1">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-2">
-                <Bug className="size-4 text-muted-foreground" />
-                <div>
-                  <p className="text-xs font-medium">Jira Watcher</p>
-                  <p className="text-[11px] text-muted-foreground">Auto-debug Jira tickets</p>
-                </div>
-              </div>
-              <Switch checked={jiraEnabled} onCheckedChange={setJiraEnabled} />
-            </div>
-          </section>
-
-          {/* Wrap Tabs toggle */}
-          <section className="space-y-1">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-2">
-                <WrapText className="size-4 text-muted-foreground" />
-                <div>
-                  <p className="text-xs font-medium">Wrap Tabs</p>
-                  <p className="text-[11px] text-muted-foreground">Stack tabs in rows instead of scrolling</p>
-                </div>
-              </div>
-              <Switch checked={tabWrap} onCheckedChange={toggleTabWrap} />
-            </div>
-          </section>
-
-          {/* Tab Style */}
-          <section className="space-y-2">
-            <h3 className="text-xs font-medium text-muted-foreground">Tab Style</h3>
-            <div className="flex gap-1.5">
-              {TAB_STYLE_OPTIONS.map((opt) => (
-                <Button
-                  key={opt.value}
-                  variant={editorTabStyle === opt.value ? "default" : "outline"}
-                  size="sm"
-                  onClick={() => setEditorTabStyle(opt.value)}
-                  className={cn(
-                    "flex-1 text-xs h-8 cursor-pointer",
-                    editorTabStyle === opt.value && "ring-2 ring-primary",
-                  )}
-                >
-                  {opt.label}
-                </Button>
-              ))}
-            </div>
-          </section>
-
-          {/* Explorer Skin — chrome the OS File Explorer window wears; Auto follows platform */}
-          <section className="space-y-2">
-            <h3 className="text-xs font-medium text-muted-foreground">Explorer Skin</h3>
-            <div className="flex gap-1.5">
-              {EXPLORER_SKIN_OPTIONS.map((opt) => (
-                <Button
-                  key={opt.value}
-                  variant={explorerSkin === opt.value ? "default" : "outline"}
-                  size="sm"
-                  onClick={() => setExplorerSkin(opt.value)}
-                  className={cn(
-                    "flex-1 text-xs h-8 cursor-pointer",
-                    explorerSkin === opt.value && "ring-2 ring-primary",
-                  )}
-                >
-                  {opt.label}
-                </Button>
-              ))}
-            </div>
-          </section>
-
-          <Separator />
-
-          {/* Category navigation list */}
-          <nav className="space-y-1" aria-label="Settings categories">
-            {CATEGORIES.map((cat) => {
-              const Icon = cat.icon;
-              return (
-                <button
-                  key={cat.value}
-                  onClick={() => setActiveCategory(cat.value)}
-                  className="w-full flex items-center gap-3 px-2.5 py-2.5 rounded-lg hover:bg-accent/50 active:bg-accent transition-colors cursor-pointer text-left group"
-                >
-                  <div className="size-8 rounded-md bg-muted flex items-center justify-center shrink-0 group-hover:bg-accent">
-                    <Icon className="size-4 text-muted-foreground" />
-                  </div>
-                  <div className="flex-1 min-w-0">
-                    <p className="text-xs font-medium text-foreground truncate">{cat.label}</p>
-                    <p className="text-[11px] text-muted-foreground truncate">{cat.subtitle}</p>
-                  </div>
-                  <ChevronRight className="size-4 text-muted-foreground shrink-0" />
-                </button>
-              );
-            })}
-          </nav>
-
-          <Separator />
-
-          {/* About — footer */}
-          <section className="space-y-1 pb-2">
-            <p className="text-xs text-muted-foreground">
-              PPM — Personal Project Manager
-            </p>
-            <p className="text-[11px] text-muted-foreground">
-              A mobile-first web IDE for managing your projects.
-            </p>
-            {version && (
-              <p className="text-[11px] text-muted-foreground tabular-nums">
-                Version {version}
-              </p>
-            )}
-          </section>
-        </div>
-      </ScrollArea>
-    </div>
-  );
-}
-
-/** Notifications detail content — extracted to keep SettingsTab clean */
-function NotificationsContent() {
-  return (
-    <div className="space-y-4">
-      {/* Browser push */}
-      <section className="space-y-2">
-        <h3 className="text-xs font-medium text-muted-foreground">Push Notifications</h3>
-        <div className="flex items-center gap-1.5">
-          <Bell className="size-3.5 text-muted-foreground" />
-          <span className="text-xs">Not available yet</span>
-        </div>
-        <p className="text-[11px] text-muted-foreground">
-          Browser push does not deliver right now.
-          Use Telegram below to get alerted when a session finishes or needs approval.
-        </p>
-      </section>
-
-      <Separator />
-
-      {/* Telegram — redirect to PPMBot */}
-      <section className="space-y-1">
-        <h3 className="text-xs font-medium text-muted-foreground">Telegram</h3>
-        <p className="text-[11px] text-muted-foreground">
-          Telegram notifications are sent to all approved devices in PPMBot settings.
-          Configure your bot token and pair devices there.
-        </p>
-      </section>
-    </div>
-  );
-}
+import { isSettingsCategoryId } from "./settings-categories";
+import { SettingsBody } from "./settings-body";
+
+/**
+ * Settings as a tab — the mobile route, since the window layer does not render there.
+ *
+ * Layout comes from the shell's own width, so no viewport hint is passed. A category in the
+ * tab's metadata is a deep link (open Accounts, not the index); tabs already carry and persist
+ * metadata, so this needed no new tab field.
+ */
+export const SettingsTab = ({ metadata }: { metadata?: Record<string, unknown> }) => (
+  <SettingsBody
+    initialCategory={isSettingsCategoryId(metadata?.category) ? metadata.category : undefined}
+  />
+);

package/src/web/components/settings/settings-window-content.tsx

@@ -0,0 +1,24 @@
+/**
+ * Floating-window body for Settings.
+ *
+ * The open category rides on the window's payload, so a reload puts the user back on the pane
+ * they were reading instead of the default one. The payload is untrusted (it survives in
+ * localStorage and can be hand-edited), hence the narrowing before it reaches the shell.
+ */
+
+import { useWindowStore } from "@/components/floating-window/window-store";
+import type { WindowContentProps } from "@/components/floating-window/window-content-registry";
+import { isSettingsCategoryId } from "./settings-categories";
+import { SettingsBody } from "./settings-body";
+
+export default function SettingsWindowContent({ id, payload }: WindowContentProps) {
+  const setPayload = useWindowStore((s) => s.setPayload);
+  const category = isSettingsCategoryId(payload?.category) ? payload.category : undefined;
+
+  return (
+    <SettingsBody
+      initialCategory={category}
+      onCategoryChange={(next) => setPayload(id, { category: next })}
+    />
+  );
+}

package/src/web/hooks/use-chat.ts

@@ -109,7 +109,21 @@ function isSessionTabActive(sid: string): boolean {
   return false;
 }
 
-export function useChat(sessionId: string | null, providerId = "claude", projectName = ""): UseChatReturn {
+export function useChat(
+  sessionId: string | null,
+  providerId = "claude",
+  projectName = "",
+  /**
+   * Called when the provider replaces the session id mid-turn.
+   *
+   * Codex and the Claude SDK both mint their own id and adopt it: PPM creates
+   * the session under a uuid of its own, then the provider reports the real one.
+   * The server re-keys itself, but the tab keeps whatever id it created with
+   * unless it is told — and that stale id owns no transcript, so the tab reloads
+   * empty even though the conversation is on disk under the new id.
+   */
+  onSessionMigrated?: (newSessionId: string) => void,
+): UseChatReturn {
   const [messages, setMessages] = useState<ChatMessage[]>([]);
   /** Map of compactMessageId → pre-compact messages (already ID-prefixed). Ephemeral. */
   const [expansions, setExpansions] = useState<Map<string, ChatMessage[]>>(new Map());
@@ -173,6 +187,10 @@ export function useChat(sessionId: string | null, providerId = "claude", project
   const historyLoadedAtRef = useRef(0);
   const sessionIdRef = useRef(sessionId);
   sessionIdRef.current = sessionId;
+  // Held in a ref so the socket handler always calls the latest callback without
+  // the socket effect having to re-run (and reconnect) when it changes identity.
+  const onSessionMigratedRef = useRef(onSessionMigrated);
+  onSessionMigratedRef.current = onSessionMigrated;
   // Mirror of `messages` for synchronous reads (e.g. snapshotting the previous
   // session's messages when sessionId changes, without adding `messages` to
   // effect deps).
@@ -744,6 +762,18 @@ export function useChat(sessionId: string | null, providerId = "claude", project
       return;
     }
 
+    // The provider adopted its own session id for this conversation. Tell the
+    // owner so the tab follows: the server has already re-keyed itself, and the
+    // transcript from here on is written under the new id, so a tab still
+    // holding the old one would reload into an empty conversation.
+    if ((data as any).type === "session_migrated") {
+      const migratedTo = (data as any).newSessionId as string | undefined;
+      if (migratedTo && migratedTo !== sessionIdRef.current) {
+        onSessionMigratedRef.current?.(migratedTo);
+      }
+      return;
+    }
+
     // Handle compact status events
     if ((data as any).type === "compact_status") {
       const status = (data as any).status;
@@ -1001,6 +1031,13 @@ export function useChat(sessionId: string | null, providerId = "claude", project
           const payload = Array.isArray(data) ? { messages: data, versionMap: {} } : data;
           let history: ChatMessage[] = Array.isArray(payload?.messages) ? payload.messages : [];
           if (payload?.versionMap) setVersionMap(payload.versionMap);
+          // The server served this transcript from a different id than the one
+          // asked for: the provider had renamed the session and this tab kept the
+          // original. Adopt the real id, so the next turn continues the
+          // conversation instead of starting a fresh one beside it.
+          if (payload?.canonicalSessionId && payload.canonicalSessionId !== sessionIdRef.current) {
+            onSessionMigratedRef.current?.(payload.canonicalSessionId);
+          }
           // If a live turn_events replay already owns the active (unfinished) turn,
           // the REST history still contains that same turn — trim it (from its last
           // user message onward) so it isn't rendered twice.

package/src/web/hooks/use-global-keybindings.ts

@@ -6,6 +6,7 @@ import { usePanelStore } from "@/stores/panel-store";
 import { useKeybindingsStore, parseCombo, eventMatchesCombo } from "@/stores/keybindings-store";
 import { useExtensionStore } from "@/stores/extension-store";
 import { useCompareStore } from "@/stores/compare-store";
+import { openSettings } from "@/components/settings/open-settings";
 import { basename } from "@/lib/utils";
 
 /** Dispatch this event to open the command palette from anywhere, optionally with initial query */
@@ -171,12 +172,10 @@ export function useGlobalKeybindings() {
         }
       }
 
-      // Open settings (sidebar)
+      // Open settings — its own window on desktop, a tab on mobile.
       if (match(e, "open-settings")) {
         e.preventDefault();
-        const settings = useSettingsStore.getState();
-        if (settings.sidebarCollapsed) settings.toggleSidebar();
-        settings.setSidebarActiveTab("settings");
+        openSettings();
         return;
       }
 

package/src/web/hooks/use-url-sync.ts

@@ -1,5 +1,8 @@
 import { useEffect, useRef } from "react";
 import { useTabStore, type TabType } from "@/stores/tab-store";
+import { useWindowStore } from "@/components/floating-window/window-store";
+import { openSettings } from "@/components/settings/open-settings";
+import { isMobileDevice } from "@/hooks/use-is-mobile";
 
 // ---------------------------------------------------------------------------
 // URL state types
@@ -146,12 +149,39 @@ function buildTitleFromUrl(type: TabType, identifier: string | null): string {
   }
 }
 
+/**
+ * Settings has no desktop tab — it opens as its own floating window, so a URL naming it has
+ * to go through the same router every other entry point uses.
+ *
+ * The wait matters: `restoreAll` REPLACES the window map when the desktop layer mounts, so a
+ * window opened before that runs is silently discarded and the URL looks like it did nothing.
+ * This is reachable in practice because the URL open happens inside async project resolution,
+ * which can beat the layer's layout effect. Mobile needs no wait — it gets a tab, and the
+ * window layer never mounts (so `restored` would never flip and this would hang).
+ */
+function openSettingsOnceWindowLayerIsReady(): void {
+  if (isMobileDevice() || useWindowStore.getState().restored) {
+    openSettings();
+    return;
+  }
+  const unsubscribe = useWindowStore.subscribe((state) => {
+    if (!state.restored) return;
+    unsubscribe();
+    openSettings();
+  });
+}
+
 /** Auto-open or focus a tab based on URL state */
 export function autoOpenFromUrl(
   tabType: TabType,
   tabIdentifier: string | null,
   projectName: string,
 ): void {
+  if (tabType === "settings") {
+    openSettingsOnceWindowLayerIsReady();
+    return;
+  }
+
   const { tabs, setActiveTab, openTab } = useTabStore.getState();
   const expectedId = tabIdFromUrl(tabType, tabIdentifier);