token-larper 1.0.1 → 1.7.0

package/src/client/themes.ts

@@ -1,25 +1,59 @@
 export type ThemeMode = "light" | "dark";
-export type ThemePalette = "pine" | "slate" | "ocean" | "iris" | "clay" | "rose" | "custom";
 
-export interface ThemePreset {
-  id: Exclude<ThemePalette, "custom">;
+// A theme is two independent choices. The style is the whole look and feel: fonts,
+// radius, spacing, borders, shadows, label casing, and its own light and dark colors
+// (all defined in styles.css under html[data-style]). The accent is either the style's
+// own, one of the preset colors below, or any color the user picks. An imported CSS
+// theme can replace the colors of whichever style is active.
+
+export type StyleId = "grove" | "terminal" | "paper" | "brutal" | "soft" | "mono";
+
+export interface StylePreset {
+  id: StyleId;
   name: string;
   description: string;
-  accent: string;
-  darkAccent: string;
+  /** Swatches for the picker preview: [background, surface, text, accent] per mode. */
+  light: [string, string, string, string];
+  dark: [string, string, string, string];
 }
 
-export const THEME_PRESETS: ThemePreset[] = [
-  { id: "pine", name: "Pine", description: "The original forest green", accent: "#2f5a43", darkAccent: "#9fcaa8" },
-  { id: "slate", name: "Slate", description: "Quiet blue gray", accent: "#495d75", darkAccent: "#9bb4d2" },
-  { id: "ocean", name: "Ocean", description: "Cool blue and teal", accent: "#17627a", darkAccent: "#78c5d8" },
-  { id: "iris", name: "Iris", description: "Soft violet", accent: "#68518f", darkAccent: "#c0a4ec" },
-  { id: "clay", name: "Clay", description: "Warm terracotta", accent: "#995431", darkAccent: "#e1a177" },
-  { id: "rose", name: "Rose", description: "Muted berry", accent: "#934f67", darkAccent: "#dfa1b4" },
+export const STYLE_PRESETS: StylePreset[] = [
+  { id: "grove", name: "Grove", description: "Calm and roomy, the original look", light: ["#f7f8f6", "#ffffff", "#1f2a23", "#2f5a43"], dark: ["#141916", "#1b221e", "#e8eee7", "#9fcaa8"] },
+  { id: "terminal", name: "Terminal", description: "Monospace, square, and dense", light: ["#f4f6f1", "#fbfcf8", "#121a13", "#146c36"], dark: ["#0b0f0c", "#0f1511", "#c8f7d0", "#5cf08a"] },
+  { id: "paper", name: "Paper", description: "Serif headings on warm paper", light: ["#f5efe3", "#fbf7ee", "#2a2118", "#8c2f2b"], dark: ["#1b1712", "#221d17", "#f1e8da", "#e0907f"] },
+  { id: "brutal", name: "Brutal", description: "Thick outlines and hard shadows", light: ["#fff8e7", "#ffffff", "#111111", "#d81b60"], dark: ["#121212", "#1c1c1c", "#f5f5f5", "#ff79b0"] },
+  { id: "soft", name: "Soft", description: "Rounded, borderless, and airy", light: ["#f4f2fb", "#ffffff", "#26213a", "#6d5bd0"], dark: ["#16141f", "#1f1c2b", "#efecf8", "#b3a6ff"] },
+  { id: "mono", name: "Mono", description: "Black and white, flips with the mode", light: ["#ffffff", "#ffffff", "#0a0a0a", "#0a0a0a"], dark: ["#000000", "#0a0a0a", "#fafafa", "#fafafa"] },
+];
+
+export type AccentId = "pine" | "slate" | "ocean" | "iris" | "clay" | "rose";
+
+export const ACCENT_PRESETS: { id: AccentId; name: string; light: string; dark: string }[] = [
+  { id: "pine", name: "Pine", light: "#2f5a43", dark: "#9fcaa8" },
+  { id: "slate", name: "Slate", light: "#495d75", dark: "#9bb4d2" },
+  { id: "ocean", name: "Ocean", light: "#17627a", dark: "#78c5d8" },
+  { id: "iris", name: "Iris", light: "#68518f", dark: "#c0a4ec" },
+  { id: "clay", name: "Clay", light: "#995431", dark: "#e1a177" },
+  { id: "rose", name: "Rose", light: "#934f67", dark: "#dfa1b4" },
 ];
 
+export type AccentChoice = { kind: "style" } | { kind: "preset"; id: AccentId } | { kind: "custom"; color: string };
+
+export interface Appearance {
+  style: StyleId;
+  accent: AccentChoice;
+  /** Use the imported CSS theme's colors on top of the style. */
+  imported: boolean;
+}
+
+export const DEFAULT_APPEARANCE: Appearance = { style: "grove", accent: { kind: "style" }, imported: false };
+
 export const THEME_MODE_STORAGE_KEY = "token-larper-theme";
-export const THEME_PALETTE_STORAGE_KEY = "token-larper-palette";
+export const APPEARANCE_STORAGE_KEY = "token-larper-appearance";
+/** Resolved inline variables for both modes; index.html applies them before first paint. */
+export const THEME_VARS_STORAGE_KEY = "token-larper-theme-vars";
+/** Earlier versions stored a color palette here; read once to migrate. */
+const LEGACY_PALETTE_STORAGE_KEY = "token-larper-palette";
 export const IMPORTED_THEME_STORAGE_KEY = "token-larper-imported-theme";
 
 const APP_COLOR_PROPERTIES = [
@@ -42,10 +76,6 @@ export interface ImportedTheme {
 
 const REQUIRED_PROPERTIES: AppColorProperty[] = ["--bg", "--surface", "--text", "--accent", "--accent-ink"];
 
-export function isThemePalette(value: string | null): value is ThemePalette {
-  return value === "custom" || THEME_PRESETS.some((preset) => preset.id === value);
-}
-
 function validColor(value: unknown): value is string {
   return typeof value === "string"
     && value.length <= 180
@@ -86,31 +116,138 @@ export function readImportedTheme(): ImportedTheme | null {
   }
 }
 
-export function readThemePalette(): ThemePalette {
+const isStyle = (value: unknown): value is StyleId => STYLE_PRESETS.some((s) => s.id === value);
+const isAccentId = (value: unknown): value is AccentId => ACCENT_PRESETS.some((a) => a.id === value);
+const isHex = (value: unknown): value is string => typeof value === "string" && /^#[0-9a-f]{6}$/i.test(value);
+
+function sanitizeAppearance(value: unknown): Appearance | null {
+  if (!value || typeof value !== "object") return null;
+  const v = value as Record<string, unknown>;
+  const a = (v.accent ?? {}) as Record<string, unknown>;
+  const accent: AccentChoice =
+    a.kind === "preset" && isAccentId(a.id)
+      ? { kind: "preset", id: a.id }
+      : a.kind === "custom" && isHex(a.color)
+        ? { kind: "custom", color: a.color.toLowerCase() }
+        : { kind: "style" };
+  return { style: isStyle(v.style) ? v.style : "grove", accent, imported: v.imported === true };
+}
+
+export function readAppearance(): Appearance {
   try {
-    const stored = localStorage.getItem(THEME_PALETTE_STORAGE_KEY);
-    if (!isThemePalette(stored)) return "pine";
-    return stored === "custom" && !readImportedTheme() ? "pine" : stored;
+    const saved = sanitizeAppearance(JSON.parse(localStorage.getItem(APPEARANCE_STORAGE_KEY) || "null"));
+    if (saved) return saved.imported && !readImportedTheme() ? { ...saved, imported: false } : saved;
+    // Migrate the old color-palette setting: its colors live on as the accent.
+    const legacy = localStorage.getItem(LEGACY_PALETTE_STORAGE_KEY);
+    if (legacy === "custom" && readImportedTheme()) return { ...DEFAULT_APPEARANCE, imported: true };
+    if (isAccentId(legacy) && legacy !== "pine") return { ...DEFAULT_APPEARANCE, accent: { kind: "preset", id: legacy } };
   } catch {
-    return "pine";
+    // Storage may be disabled.
+  }
+  return DEFAULT_APPEARANCE;
+}
+
+function hexToRgb(hex: string): [number, number, number] {
+  const n = parseInt(hex.slice(1), 16);
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+
+function rgbToHex([r, g, b]: [number, number, number]): string {
+  return `#${[r, g, b].map((v) => Math.round(v).toString(16).padStart(2, "0")).join("")}`;
+}
+
+function mix(a: string, b: string, weightOfA: number): string {
+  const x = hexToRgb(a);
+  const y = hexToRgb(b);
+  return rgbToHex([0, 1, 2].map((i) => x[i]! * weightOfA + y[i]! * (1 - weightOfA)) as [number, number, number]);
+}
+
+function luminance(hex: string): number {
+  const [r, g, b] = hexToRgb(hex).map((v) => {
+    const c = v / 255;
+    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  }) as [number, number, number];
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+
+function contrast(a: string, b: string): number {
+  const [x, y] = [luminance(a), luminance(b)].sort((p, q) => q - p) as [number, number];
+  return (x + 0.05) / (y + 0.05);
+}
+
+/** Whichever of white or near-black reads better on the accent (buttons, badges). */
+function inkFor(accent: string): string {
+  return contrast("#ffffff", accent) >= contrast("#101010", accent) ? "#ffffff" : "#101010";
+}
+
+/**
+ * The accent colors links, tab underlines and focus rings, so a custom pick is darkened
+ * (light mode) or lightened (dark mode) in small steps until it reads at 4.5:1 against
+ * a typical background. Picks that already pass are used unchanged.
+ */
+function accentFor(choice: AccentChoice, mode: ThemeMode): string | null {
+  if (choice.kind === "preset") {
+    const preset = ACCENT_PRESETS.find((a) => a.id === choice.id)!;
+    return mode === "dark" ? preset.dark : preset.light;
+  }
+  if (choice.kind === "custom") {
+    const [background, toward] = mode === "light" ? ["#ffffff", "#000000"] : ["#161616", "#ffffff"];
+    let color = choice.color;
+    for (let step = 0; step < 12 && contrast(color, background) < 4.5; step++) color = mix(color, toward, 0.88);
+    return color;
+  }
+  return null;
+}
+
+export type ThemeVars = Record<ThemeMode, Record<string, string>>;
+
+/** Inline variables for an accent override or an imported theme, for both modes. */
+export function resolveThemeVars(appearance: Appearance, importedTheme: ImportedTheme | null): ThemeVars {
+  const vars: ThemeVars = { light: {}, dark: {} };
+  for (const mode of ["light", "dark"] as const) {
+    const out = vars[mode];
+    if (appearance.imported && importedTheme) {
+      const tokens = importedTheme[mode];
+      for (const property of APP_COLOR_PROPERTIES) if (validColor(tokens[property])) out[property] = tokens[property]!;
+      for (const property of APP_RADIUS_PROPERTIES) if (validRadius(tokens[property])) out[property] = tokens[property]!;
+    }
+    const accent = accentFor(appearance.accent, mode);
+    if (accent) {
+      out["--accent"] = accent;
+      out["--focus"] = accent;
+      out["--accent-ink"] = inkFor(accent);
+      out["--accent-soft"] = `color-mix(in srgb, ${accent} ${mode === "dark" ? 18 : 12}%, var(--bg))`;
+    }
   }
+  return vars;
 }
 
-export function applyTheme(mode: ThemeMode, palette: ThemePalette, importedTheme: ImportedTheme | null): void {
+let appliedProperties: string[] = [];
+
+export function applyTheme(mode: ThemeMode, appearance: Appearance, importedTheme: ImportedTheme | null): void {
   const root = document.documentElement;
   root.dataset.theme = mode;
-  root.dataset.palette = palette;
-  for (const property of APP_COLOR_PROPERTIES) root.style.removeProperty(property);
-  for (const property of APP_RADIUS_PROPERTIES) root.style.removeProperty(property);
-
-  if (palette !== "custom" || !importedTheme) return;
-  const tokens = importedTheme[mode];
-  for (const property of APP_COLOR_PROPERTIES) {
-    const value = tokens[property];
-    if (validColor(value)) root.style.setProperty(property, value);
+  root.dataset.style = appearance.style;
+  root.dataset.accent = appearance.accent.kind === "style" && !appearance.imported ? "style" : "custom";
+  // Clear what an earlier call (or index.html) set before applying the new values.
+  for (const property of new Set([...appliedProperties, ...APP_COLOR_PROPERTIES, ...APP_RADIUS_PROPERTIES])) {
+    root.style.removeProperty(property);
   }
-  for (const property of APP_RADIUS_PROPERTIES) {
-    if (validRadius(tokens[property])) root.style.setProperty(property, tokens[property]);
+  const vars = resolveThemeVars(appearance, importedTheme);
+  for (const [property, value] of Object.entries(vars[mode])) root.style.setProperty(property, value);
+  appliedProperties = Object.keys(vars[mode]);
+  try {
+    localStorage.setItem(THEME_VARS_STORAGE_KEY, JSON.stringify(vars));
+  } catch {
+    // Storage may be disabled; the theme still applies for this page.
+  }
+}
+
+export function saveAppearance(appearance: Appearance): void {
+  try {
+    localStorage.setItem(APPEARANCE_STORAGE_KEY, JSON.stringify(appearance));
+  } catch {
+    // Storage may be disabled.
   }
 }
 

package/src/paths.ts

@@ -0,0 +1,48 @@
+import { copyFileSync, existsSync, mkdirSync, readdirSync, readFileSync, statSync } from "node:fs";
+import { homedir } from "node:os";
+import { join, resolve } from "node:path";
+
+// Where the app's code lives. With npx or bunx this is a package cache folder that
+// changes with every version, so nothing that must survive an update is kept here.
+export const APP_ROOT = resolve(import.meta.dir, "..");
+
+export const APP_VERSION: string = (() => {
+  try {
+    return String(JSON.parse(readFileSync(join(APP_ROOT, "package.json"), "utf8")).version || "0.0.0");
+  } catch {
+    return "0.0.0";
+  }
+})();
+
+/** A git checkout updates with `git pull`, not through npm. */
+export const RUNNING_FROM_SOURCE = existsSync(join(APP_ROOT, ".git"));
+
+function defaultDataDir(): string {
+  if (process.env.TOKEN_LARPER_DATA_DIR) return resolve(process.env.TOKEN_LARPER_DATA_DIR);
+  const home = homedir();
+  if (process.platform === "win32") return join(process.env.LOCALAPPDATA || join(home, "AppData", "Local"), "TokenLarper");
+  if (process.platform === "darwin") return join(home, "Library", "Application Support", "TokenLarper");
+  return join(process.env.XDG_DATA_HOME || join(home, ".local", "share"), "token-larper");
+}
+
+/** Cache, settings and the tray theme; the same folder for every installed version. */
+export const DATA_DIR = defaultDataDir();
+
+// Earlier versions kept this data in <app>/.cache. Copy it over once so the first
+// update to this layout keeps history and settings.
+function migrateLegacyCache(): void {
+  const legacy = join(APP_ROOT, ".cache");
+  try {
+    mkdirSync(DATA_DIR, { recursive: true });
+    if (!existsSync(legacy) || readdirSync(DATA_DIR).length > 0) return;
+    for (const name of readdirSync(legacy)) {
+      const from = join(legacy, name);
+      if (statSync(from).isFile()) copyFileSync(from, join(DATA_DIR, name));
+    }
+  } catch {
+    // Starting fresh is fine; the data is a cache.
+  }
+}
+migrateLegacyCache();
+
+export const dataPath = (name: string) => join(DATA_DIR, name);

package/src/projects.ts

@@ -1,8 +1,9 @@
 import { Database } from "bun:sqlite";
 import { closeSync, existsSync, mkdirSync, openSync, readdirSync, readFileSync, readSync, writeFileSync } from "node:fs";
 import { homedir } from "node:os";
-import { basename, dirname, join, resolve } from "node:path";
+import { basename, dirname, join } from "node:path";
 import type { HarnessId } from "./types.ts";
+import { dataPath } from "./paths.ts";
 
 // ccusage reports a usable project for only some harnesses, so the working directory is
 // read from each harness's own session files. A session's cwd never changes, so found
@@ -11,7 +12,7 @@ import type { HarnessId } from "./types.ts";
 const HOME = homedir();
 const cwdCache = new Map<string, string | null>();
 const repoCache = new Map<string, string | null>();
-const CACHE_FILE = join(resolve(import.meta.dir, ".."), ".cache", "session-projects.json");
+const CACHE_FILE = dataPath("session-projects.json");
 let diskLoaded = false;
 let dirty = false;
 let opencodeDirs: Map<string, { directory: string; updated: number }> | null = null;

package/src/semver.ts

@@ -0,0 +1,9 @@
+/** Compare x.y.z versions numerically; anything after a "-" is ignored. */
+export function compareVersions(a: string, b: string): number {
+  const parse = (v: string) => v.split("-")[0]!.split(".").map((n) => Number(n) || 0);
+  const [x, y] = [parse(a), parse(b)];
+  for (let i = 0; i < 3; i++) {
+    if ((x[i] ?? 0) !== (y[i] ?? 0)) return (x[i] ?? 0) > (y[i] ?? 0) ? 1 : -1;
+  }
+  return 0;
+}

package/src/server.ts

@@ -1,8 +1,11 @@
 import { join, resolve } from "node:path";
 import { getDashboardData } from "./ccusage.ts";
-import { getStartupStatus, setStartupStatus } from "./startup.ts";
+import { getStartupStatus, repointStartupIfStale, setStartupStatus } from "./startup.ts";
 import { startSystemTray, stopSystemTray } from "./tray.ts";
-import { formatCompactNumber, formatCurrency } from "./client/utils.ts";
+import { buildTrayStatus, parseTheme, saveTheme } from "./trayStatus.ts";
+import { logoSvgFile } from "./client/logoMark.ts";
+import { APP_VERSION, RUNNING_FROM_SOURCE } from "./paths.ts";
+import { checkForUpdates, compareVersions, localStatus, startUpdate } from "./updates.ts";
 
 const ROOT_DIR = resolve(import.meta.dir, "..");
 const CLIENT_DIR = join(ROOT_DIR, "src", "client");
@@ -48,26 +51,58 @@ function isAllowedMutation(req: Request, port: number): boolean {
   return (req.headers.get("content-type") || "").toLowerCase().startsWith("application/json");
 }
 
-// Check if Token Larper is already running on the target port
-try {
-  const existing = await fetch(`http://127.0.0.1:${PORT}/api/tray-status`, {
-    signal: AbortSignal.timeout(600),
-  });
-  if (existing.ok) {
-    console.log(`🔥 Token Larper is already running at http://localhost:${PORT}`);
-    console.log(`🚀 Opening dashboard in your default browser...`);
-    const cmd =
-      process.platform === "win32"
-        ? `start http://localhost:${PORT}`
-        : process.platform === "darwin"
-        ? `open http://localhost:${PORT}`
-        : `xdg-open http://localhost:${PORT}`;
-    const { exec } = await import("node:child_process");
-    exec(cmd);
-    process.exit(0);
+function openDashboard(port: number) {
+  if (process.env.TOKEN_LARPER_NO_BROWSER === "1") return;
+  const cmd =
+    process.platform === "win32"
+      ? `start http://localhost:${port}`
+      : process.platform === "darwin"
+      ? `open http://localhost:${port}`
+      : `xdg-open http://localhost:${port}`;
+  import("node:child_process").then(({ exec }) => exec(cmd));
+}
+
+/** The version of a Token Larper already on the port, "0.0.0" for one too old to say, or null if none. */
+async function runningVersion(port: number): Promise<string | null> {
+  // /api/version answers instantly; versions before 1.5.0 don't have it, so fall back to
+  // /api/tray-status, which can take a few seconds while usage data loads.
+  try {
+    const res = await fetch(`http://127.0.0.1:${port}/api/version`, { signal: AbortSignal.timeout(1500) });
+    const body = (await res.json().catch(() => null)) as { current?: unknown } | null;
+    if (res.ok && typeof body?.current === "string") return body.current;
+  } catch {
+    // Nothing on the port, or it is busy; the next check decides.
+  }
+  try {
+    const status = await fetch(`http://127.0.0.1:${port}/api/tray-status`, { signal: AbortSignal.timeout(5000) });
+    return status.ok ? "0.0.0" : null;
+  } catch {
+    return null;
+  }
+}
+
+// A newer copy (after an update, or a fresh npx run) replaces an older one on the
+// same port. The same or a newer version already running just gets opened.
+const running = await runningVersion(PORT);
+if (running !== null && compareVersions(running, APP_VERSION) < 0) {
+  console.log(`⬆️  Replacing Token Larper ${running} with ${APP_VERSION}...`);
+  try {
+    await fetch(`http://127.0.0.1:${PORT}/api/shutdown`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: "{}",
+      signal: AbortSignal.timeout(2000),
+    });
+  } catch {
+    // It may exit before answering.
   }
-} catch {
-  // Not running, proceed with startup
+  for (let i = 0; i < 40 && (await runningVersion(PORT)) !== null; i++) await Bun.sleep(250);
+} else if (running !== null) {
+  console.log(`🔥 Token Larper is already running at http://localhost:${PORT}`);
+  console.log(`🚀 Opening dashboard in your default browser...`);
+  openDashboard(PORT);
+  await Bun.sleep(300);
+  process.exit(0);
 }
 
 // Warm cached usage before the first dashboard request.
@@ -105,7 +140,7 @@ function startServer(preferredPort: number) {
     }
 
     if (url.pathname === "/logo.svg") {
-      return new Response(Bun.file(join(CLIENT_DIR, "logo.svg")), {
+      return new Response(logoSvgFile(), {
         headers: { "Content-Type": "image/svg+xml; charset=utf-8" },
       });
     }
@@ -129,15 +164,15 @@ function startServer(preferredPort: number) {
         getDashboardData({ refresh: false }),
         getStartupStatus(PORT),
       ]);
-      const tokStr = formatCompactNumber(data.totals.totalTokens);
-      const verStr = formatCurrency(data.totals.verifiedCost);
-      const estStr = formatCurrency(data.totals.estimatedCost);
-      return Response.json({
-        summaryText: `${tokStr} tokens · ${verStr} (${estStr} LARP) · ${data.totals.activeHarnesses} harnesses`,
-        shortTooltip: `${tokStr} tok · ${estStr} LARP`,
-        bootEnabled: startup.enabled,
-        openBrowserOnBoot: startup.openBrowserOnBoot,
-      });
+      return Response.json(buildTrayStatus(data, startup));
+    }
+
+    // The dashboard reports its resolved theme colors so the tray popup can match them.
+    if (url.pathname === "/api/ui-theme" && req.method === "POST") {
+      const next = parseTheme(await req.json().catch(() => null));
+      if (!next) return Response.json({ error: "Expected #rrggbb colors" }, { status: 400 });
+      saveTheme(next);
+      return Response.json({ ok: true });
     }
 
     if (url.pathname === "/api/startup" && req.method === "GET") {
@@ -172,6 +207,24 @@ function startServer(preferredPort: number) {
       }
     }
 
+    if (url.pathname === "/api/version" && req.method === "GET") {
+      // Only a request from the dashboard reaches out to npm.
+      if (url.searchParams.get("check") !== "1") return Response.json(localStatus());
+      return Response.json(await checkForUpdates(url.searchParams.get("force") === "1"));
+    }
+
+    if (url.pathname === "/api/update" && req.method === "POST") {
+      if (RUNNING_FROM_SOURCE) {
+        return Response.json({ error: "This copy runs from a git checkout. Update it with git pull." }, { status: 409 });
+      }
+      try {
+        startUpdate(activePort);
+        return Response.json({ ok: true });
+      } catch (error) {
+        return Response.json({ error: error instanceof Error ? error.message : "Could not start the update" }, { status: 500 });
+      }
+    }
+
     if (url.pathname === "/api/shutdown" && req.method === "POST") {
       setTimeout(() => {
         stopSystemTray();
@@ -198,6 +251,7 @@ function startServer(preferredPort: number) {
 
 const server = startServer(PORT);
 startSystemTray(server.port ?? PORT);
+void repointStartupIfStale();
 
 process.on("SIGINT", () => {
   stopSystemTray();

package/src/startup.ts

@@ -1,11 +1,13 @@
 import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
-import { join, resolve } from "node:path";
+import { join } from "node:path";
 import type { StartupConfig } from "./types.ts";
+import { APP_ROOT, APP_VERSION, DATA_DIR, dataPath } from "./paths.ts";
+import { compareVersions } from "./semver.ts";
 
 const REG_KEY = "HKCU\\Software\\Microsoft\\Windows\\CurrentVersion\\Run";
 const REG_VALUE_NAME = "TokenLarper";
-const ROOT_DIR = resolve(import.meta.dir, "..");
-const SETTINGS_FILE = join(ROOT_DIR, ".cache", "settings.json");
+const ROOT_DIR = APP_ROOT;
+const SETTINGS_FILE = dataPath("settings.json");
 const VBS_LAUNCHER = join(ROOT_DIR, "scripts", "launch-silent.vbs");
 const PS1_RUNNER = join(ROOT_DIR, "scripts", "run-server.ps1");
 
@@ -35,7 +37,7 @@ function loadSavedSettings(defaultPort = 4269): SavedSettings {
 }
 
 function saveSettings(settings: SavedSettings): void {
-  mkdirSync(join(ROOT_DIR, ".cache"), { recursive: true });
+  mkdirSync(DATA_DIR, { recursive: true });
   writeFileSync(SETTINGS_FILE, JSON.stringify(settings, null, 2), "utf8");
 }
 
@@ -108,3 +110,33 @@ export async function setStartupStatus(options: {
   saveSettings(next);
   return getStartupStatus(next.port);
 }
+
+function versionAt(launcher: string): string | null {
+  try {
+    const pkg = join(launcher, "..", "..", "package.json");
+    return String(JSON.parse(readFileSync(pkg, "utf8")).version || "0.0.0");
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * npx and bunx put every version in its own folder, so a startup entry made by an
+ * older version keeps launching that version. When startup is on and the entry points
+ * at an older or deleted copy, point it at this one.
+ */
+export async function repointStartupIfStale(): Promise<void> {
+  if (process.platform !== "win32") return;
+  try {
+    const value = await readRegistryValue();
+    const target = value?.match(/"([^"]*launch-silent\.vbs)"/i)?.[1];
+    if (!target || target.toLowerCase() === VBS_LAUNCHER.toLowerCase()) return;
+    const theirs = versionAt(target);
+    if (theirs !== null && existsSync(target) && compareVersions(theirs, APP_VERSION) >= 0) return;
+    if (!existsSync(VBS_LAUNCHER) || !existsSync(PS1_RUNNER)) return;
+    const command = `wscript.exe //B //Nologo "${VBS_LAUNCHER}"`;
+    await runReg(["add", REG_KEY, "/v", REG_VALUE_NAME, "/t", "REG_SZ", "/d", command, "/f"]);
+  } catch {
+    // The old entry keeps working; Settings can turn startup off and on again.
+  }
+}