@hienlh/ppm 0.17.53 → 0.17.55

package/src/web/components/layout/upgrade-button.tsx

@@ -1,9 +1,9 @@
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, useMemo } from "react";
 import { api } from "@/lib/api-client";
 import { toast } from "sonner";
 import { Loader2, ArrowUpCircle, RefreshCw, Download, ExternalLink, History } from "lucide-react";
 import { useSettingsStore } from "@/stores/settings-store";
-import { fetchChangelogSince, fetchRecentChangelog, compareSemver, type ChangelogSection } from "@/lib/changelog";
+import { fetchRecentChangelog, newestSectionVersion, compareSemver, type ChangelogSection } from "@/lib/changelog";
 import { cn } from "@/lib/utils";
 
 const POLL_INTERVAL_MS = 60_000;
@@ -113,26 +113,36 @@ export function UpgradeButton({ align = "right" }: { align?: "left" | "right" })
   const [notes, setNotes] = useState<ChangelogSection[] | null>(null);
   const [notesLoading, setNotesLoading] = useState(false);
 
-  useEffect(() => {
-    let timer: ReturnType<typeof setInterval>;
-    async function check() {
-      try {
-        const data = await api.get<UpgradeStatus>("/api/upgrade");
-        setCurrentVersion(data.currentVersion);
-        if (data.availableVersion) {
-          setAvailableVersion(data.availableVersion);
-          setDismissed(!!sessionStorage.getItem(DISMISS_KEY_PREFIX + data.availableVersion));
-        } else {
-          setAvailableVersion(null);
-        }
-      } catch {
-        // ignore — chip just shows the known version
+  // `force` asks the server to bypass its registry cache. The background poll
+  // stays cached (one request per client per minute must not hit the registry),
+  // but a user opening the popover is asking "is there one *now*" and must not
+  // be answered from an answer taken up to five minutes ago.
+  const check = useCallback(async (force = false) => {
+    try {
+      const data = await api.get<UpgradeStatus>(force ? "/api/upgrade?refresh=1" : "/api/upgrade");
+      setCurrentVersion(data.currentVersion);
+      if (data.availableVersion) {
+        setAvailableVersion(data.availableVersion);
+        setDismissed(!!sessionStorage.getItem(DISMISS_KEY_PREFIX + data.availableVersion));
+      } else {
+        setAvailableVersion(null);
       }
+    } catch {
+      // ignore — chip just shows the known version
     }
+  }, []);
+
+  useEffect(() => {
     check();
-    timer = setInterval(check, POLL_INTERVAL_MS);
+    const timer = setInterval(() => check(), POLL_INTERVAL_MS);
     return () => clearInterval(timer);
-  }, []);
+  }, [check]);
+
+  // Opening the popover re-checks immediately, so the panel never disagrees
+  // with itself: release notes and the Update button are resolved together.
+  useEffect(() => {
+    if (open) check(true);
+  }, [open, check]);
 
   const current = currentVersion ?? version;
   // QA hook (latched in sessionStorage — see getTestTarget). Forces the update
@@ -145,25 +155,44 @@ export function UpgradeButton({ align = "right" }: { align?: "left" | "right" })
   const realUpdate = !!availableVersion && !!current && compareSemver(availableVersion, current) > 0
     ? availableVersion
     : null;
-  const effectiveAvailable = realUpdate ?? (isTest ? testTarget : null);
-  const hasUpdate = !!effectiveAvailable && !dismissed;
 
   // Load release notes each time the popover opens. Refetching (not caching for
   // the session) avoids latching a stale/empty result from a transient fetch:
   // the changelog source can briefly lag the version signal after a release.
+  // Always the recent list, unfiltered — the sections themselves are what tell
+  // us whether a newer release exists, so filtering here would hide the signal.
   useEffect(() => {
     if (!open || !current) return;
     setNotesLoading(true);
-    // Update mode → sections newer than installed (test hook shows all).
-    // No update → recent releases so clicking the version chip still shows notes.
-    const load = hasUpdate
-      ? fetchChangelogSince(isTest ? "0.0.0" : current)
-      : fetchRecentChangelog();
-    load
+    fetchRecentChangelog()
       .then(setNotes)
       .catch(() => setNotes([]))
       .finally(() => setNotesLoading(false));
-  }, [open, current, hasUpdate, isTest]);
+  }, [open, current]);
+
+  // The published CHANGELOG is the earliest signal of a release: it updates the
+  // moment the release is pushed, while the registry only flips once the
+  // package is published. Whenever the notes name a version newer than the
+  // installed one, offer the upgrade — seeing a release in this panel and not
+  // being able to take it is never the right outcome, so the panel's own
+  // content is a first-class update signal, not decoration.
+  const changelogUpdate = useMemo(() => {
+    if (!notes || !current) return null;
+    const newest = newestSectionVersion(notes);
+    return newest && compareSemver(newest, current) > 0 ? newest : null;
+  }, [notes, current]);
+
+  const effectiveAvailable = realUpdate ?? changelogUpdate ?? (isTest ? testTarget : null);
+  const hasUpdate = !!effectiveAvailable && !dismissed;
+
+  // In update mode the list answers "what am I about to get", so drop anything
+  // already installed. If that leaves nothing (registry ahead of the changelog)
+  // keep the full list rather than an empty panel.
+  const visibleNotes = useMemo(() => {
+    if (!notes || !hasUpdate || isTest || !current) return notes;
+    const newer = notes.filter((s) => compareSemver(s.version, current) > 0);
+    return newer.length > 0 ? newer : notes;
+  }, [notes, hasUpdate, isTest, current]);
 
   // The server is restarting into the new version — stop showing "Updating…",
   // switch to the reconnect state, and auto-reload once it's listening again
@@ -185,7 +214,7 @@ export function UpgradeButton({ align = "right" }: { align?: "left" | "right" })
       } else {
         toast.info(data.message || "Upgrade installed. Restart PPM manually.");
         setUpgrading(false);
-        if (availableVersion) sessionStorage.setItem(DISMISS_KEY_PREFIX + availableVersion, "1");
+        if (effectiveAvailable) sessionStorage.setItem(DISMISS_KEY_PREFIX + effectiveAvailable, "1");
         setDismissed(true);
       }
     } catch (e) {
@@ -193,18 +222,26 @@ export function UpgradeButton({ align = "right" }: { align?: "left" | "right" })
         // Expected: self-replace killed the server before the response flushed.
         // The upgrade is in progress — wait for it, don't report a failure.
         enterRestartWait();
+      } else if (/already on latest/i.test((e as Error).message)) {
+        // Offered from the changelog, but the package registry has not caught up
+        // yet — the release is announced and not yet installable. Say so, and
+        // leave the offer standing so the next attempt can succeed.
+        toast.info(`v${effectiveAvailable} is announced but not published yet — try again shortly.`);
+        setUpgrading(false);
       } else {
         toast.error(`Upgrade failed: ${(e as Error).message}`);
         setUpgrading(false);
       }
     }
-  }, [availableVersion, enterRestartWait]);
+  }, [effectiveAvailable, enterRestartWait]);
 
   const handleDismiss = useCallback(() => {
-    if (availableVersion) sessionStorage.setItem(DISMISS_KEY_PREFIX + availableVersion, "1");
+    // Key on the offered version, not just the server-reported one: an update
+    // known only from the changelog must be dismissable too.
+    if (effectiveAvailable) sessionStorage.setItem(DISMISS_KEY_PREFIX + effectiveAvailable, "1");
     setDismissed(true);
     setOpen(false);
-  }, [availableVersion]);
+  }, [effectiveAvailable]);
 
   if (!current && !hasUpdate) return null;
 
@@ -277,9 +314,9 @@ export function UpgradeButton({ align = "right" }: { align?: "left" | "right" })
                 <span className="flex items-center gap-2 text-text-3">
                   <Loader2 className="size-3.5 animate-spin" /> Loading release notes…
                 </span>
-              ) : notes && notes.length > 0 ? (
+              ) : visibleNotes && visibleNotes.length > 0 ? (
                 <div className="space-y-2.5">
-                  {notes.map((s) => (
+                  {visibleNotes.map((s) => (
                     <ChangelogEntry key={s.version} version={s.version} body={s.body} />
                   ))}
                 </div>

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

@@ -1,6 +1,6 @@
 import { useState, useCallback, useRef } from "react";
 import {
-  Moon, Sun, Monitor, Bell, Check, ChevronRight, ArrowLeft,
+  Bell, Check, ChevronRight, ArrowLeft,
   Bot, BellRing, Keyboard, Globe, Puzzle, Bug, FolderSearch, WrapText, CalendarClock, DatabaseZap,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
@@ -10,7 +10,6 @@ import { ScrollArea } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
 import { useShallow } from "zustand/react/shallow";
 import { useSettingsStore, type EditorTabStyle } from "@/stores/settings-store";
-import type { PpmThemeMode } from "@/theme/types";
 import { cn } from "@/lib/utils";
 import { AISettingsSection } from "./ai-settings-section";
 import { KeyboardShortcutsSection } from "./keyboard-shortcuts-section";
@@ -23,11 +22,7 @@ import { SchedulesSettingsSection } from "./schedules/schedules-settings-section
 import { ThemeManagerSection } from "./theme-manager-section";
 import { QueryAuditSection } from "./query-audit-section";
 import { ThemeGrid } from "./theme-grid";
-const THEME_OPTIONS: { value: PpmThemeMode; label: string; icon: React.ElementType }[] = [
-  { value: "light", label: "Light", icon: Sun },
-  { value: "dark", label: "Dark", icon: Moon },
-  { value: "system", label: "System", icon: Monitor },
-];
+import { THEME_MODE_OPTIONS } from "@/theme/theme-mode-options";
 
 const TAB_STYLE_OPTIONS: { value: EditorTabStyle; label: string }[] = [
   { value: "default", label: "Default" },
@@ -155,7 +150,7 @@ export function SettingsTab() {
             <ThemeGrid />
             {/* Mode override (applies within the selected style; System follows OS) */}
             <div className="flex gap-1.5 pt-1">
-              {THEME_OPTIONS.map((opt) => {
+              {THEME_MODE_OPTIONS.map((opt) => {
                 const Icon = opt.icon;
                 return (
                   <Button

package/src/web/index.html

@@ -18,7 +18,7 @@
         try {
           var raw = localStorage.getItem("ppm-settings");
           var s = raw ? JSON.parse(raw) : {};
-          var mode = s.themeMode || s.theme || "dark";
+          var mode = s.themeMode || s.theme || "system";
           if (mode === "system") {
             mode = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
           }

package/src/web/lib/changelog.ts

@@ -51,6 +51,19 @@ export function parseChangelog(md: string): ChangelogSection[] {
   return sections;
 }
 
+/**
+ * Newest version among the given sections, or null when there are none.
+ * Order-independent on purpose: the file is authored newest-first by
+ * convention, and a release that lands out of order must not read as "no newer
+ * version" to the upgrade check that consumes this.
+ */
+export function newestSectionVersion(sections: ChangelogSection[]): string | null {
+  return sections.reduce<string | null>(
+    (best, s) => (best && compareSemver(s.version, best) <= 0 ? best : s.version),
+    null,
+  );
+}
+
 /** Parse CHANGELOG markdown into version sections strictly newer than `since`. */
 export function parseChangelogSince(md: string, since: string): ChangelogSection[] {
   return parseChangelog(md).filter((s) => compareSemver(s.version, since) > 0);

package/src/web/stores/settings-store.ts

@@ -60,6 +60,8 @@ interface SettingsState {
   setDockPosition: (position: DockPosition) => void;
   setDbSidebarExpanded: (next: DbSidebarExpanded) => void;
   fetchServerInfo: () => Promise<void>;
+  /** Re-push the in-memory theme selection to the server (see the action for why). */
+  syncThemeToServer: () => Promise<void>;
 }
 
 interface PersistedSettings {
@@ -103,7 +105,8 @@ function initialTheme(p: PersistedSettings): { style: PpmThemeStyle; mode: PpmTh
   if (p.theme && VALID_MODES.includes(p.theme as PpmThemeMode)) {
     return { style: "aurora", mode: p.theme as PpmThemeMode };
   }
-  return { style: "aurora", mode: "dark" };
+  // No stored selection: follow the OS rather than forcing dark.
+  return { style: "aurora", mode: "system" };
 }
 
 function isValidSidebarTab(tab: unknown): tab is SidebarActiveTab {
@@ -185,14 +188,25 @@ function persistUiPref(update: Partial<PersistedSettings>) {
   pushUiPrefsToServer(update);
 }
 
-/** Push the current theme selection to the dedicated server endpoint (fire-and-forget). */
-function pushThemeToServer(style: PpmThemeStyle, mode: PpmThemeMode, customThemeId?: string) {
+/**
+ * Push the current theme selection to the dedicated server endpoint.
+ * Errors are swallowed, so callers may ignore the promise; awaiting it only
+ * matters when a following request must observe the write (see
+ * `syncThemeToServer`).
+ */
+function pushThemeToServer(
+  style: PpmThemeStyle,
+  mode: PpmThemeMode,
+  customThemeId?: string,
+): Promise<void> {
   const token = getAuthToken();
-  fetch("/api/settings/theme", {
+  return fetch("/api/settings/theme", {
     method: "PUT",
     headers: { "Content-Type": "application/json", ...(token ? { Authorization: `Bearer ${token}` } : {}) },
     body: JSON.stringify({ style, mode, ...(customThemeId ? { customThemeId } : {}) }),
-  }).catch(() => {});
+  })
+    .then(() => {})
+    .catch(() => {});
 }
 
 /** Apply server-stored UI prefs to the store + localStorage (no re-push). */
@@ -268,7 +282,7 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
 
   setThemeFromPayload: ({ style, mode, customThemeId }) => {
     const resolvedStyle = VALID_STYLES.includes(style as PpmThemeStyle) ? (style as PpmThemeStyle) : "aurora";
-    const resolvedMode = VALID_MODES.includes(mode) ? mode : "dark";
+    const resolvedMode = VALID_MODES.includes(mode) ? mode : "system";
     persistSettings({ themeStyle: resolvedStyle, themeMode: resolvedMode, customThemeId });
     set({ themeStyle: resolvedStyle, themeMode: resolvedMode, customThemeId });
   },
@@ -417,4 +431,13 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
       void get().fetchThemes();
     } catch {}
   },
+
+  // A theme picked before authenticating cannot reach the server: the endpoint
+  // is auth-gated, so that PUT 401s and is dropped. `fetchServerInfo` then lets
+  // the *server* theme win and re-runs the moment auth state flips, which would
+  // discard the pre-auth choice. Callers that have just obtained a valid token
+  // await this first so the PUT lands before that GET reads it back.
+  syncThemeToServer: async () => {
+    await pushThemeToServer(get().themeStyle, get().themeMode, get().customThemeId);
+  },
 }));

package/.rollout-mark

@@ -1,2 +0,0 @@
-logmark=10732315
-{"v":"0.17.50","port":3214,"url":"https://promo-laughing-postposted-personals.trycloudflare.com","tunnelPid":53404,"edgePid":56920,"serverPort":51159}