@cryptiklemur/lattice 1.47.0 → 2.0.0

package/src/client/hooks/usePushNotifications.ts

@@ -0,0 +1,92 @@
+import { useEffect, useState } from "react";
+
+function urlBase64ToUint8Array(base64String: string): Uint8Array {
+  var padding = "=".repeat((4 - (base64String.length % 4)) % 4);
+  var base64 = (base64String + padding).replace(/-/g, "+").replace(/_/g, "/");
+  var rawData = window.atob(base64);
+  var outputArray = new Uint8Array(rawData.length);
+  for (var i = 0; i < rawData.length; ++i) {
+    outputArray[i] = rawData.charCodeAt(i);
+  }
+  return outputArray;
+}
+
+export type PushStatus = "unsupported" | "denied" | "prompt" | "subscribed" | "unsubscribed";
+
+export function usePushNotifications() {
+  var [status, setStatus] = useState<PushStatus>("unsupported");
+
+  useEffect(function () {
+    if (!("serviceWorker" in navigator) || !("PushManager" in window)) {
+      setStatus("unsupported");
+      return;
+    }
+
+    if (Notification.permission === "denied") {
+      setStatus("denied");
+      return;
+    }
+
+    navigator.serviceWorker.getRegistration("/sw-push.js").then(function (reg) {
+      if (!reg) {
+        setStatus("unsubscribed");
+        return;
+      }
+      reg.pushManager.getSubscription().then(function (sub) {
+        setStatus(sub ? "subscribed" : "unsubscribed");
+      });
+    });
+  }, []);
+
+  async function subscribe(): Promise<boolean> {
+    if (!("serviceWorker" in navigator) || !("PushManager" in window)) return false;
+
+    try {
+      var permission = await Notification.requestPermission();
+      if (permission !== "granted") {
+        setStatus("denied");
+        return false;
+      }
+
+      var reg = await navigator.serviceWorker.register("/sw-push.js", { scope: "/" });
+      await navigator.serviceWorker.ready;
+
+      var response = await fetch("/api/vapid-public-key");
+      var data = await response.json() as { publicKey: string };
+
+      var subscription = await reg.pushManager.subscribe({
+        userVisibleOnly: true,
+        applicationServerKey: urlBase64ToUint8Array(data.publicKey) as BufferSource,
+      });
+
+      await fetch("/api/push-subscribe", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(subscription.toJSON()),
+      });
+
+      setStatus("subscribed");
+      return true;
+    } catch (err) {
+      console.error("Push subscription failed:", err);
+      return false;
+    }
+  }
+
+  async function unsubscribe(): Promise<void> {
+    try {
+      var reg = await navigator.serviceWorker.getRegistration("/sw-push.js");
+      if (reg) {
+        var sub = await reg.pushManager.getSubscription();
+        if (sub) {
+          await sub.unsubscribe();
+        }
+      }
+      setStatus("unsubscribed");
+    } catch (err) {
+      console.error("Push unsubscribe failed:", err);
+    }
+  }
+
+  return { status, subscribe, unsubscribe };
+}

package/{client/src → src/client}/hooks/useSession.ts

@@ -81,6 +81,7 @@ export interface UseSessionReturn extends SessionState {
   dismissBudgetExceeded: () => void;
   loadMoreHistory: () => void;
   historyHasMore: boolean;
+  historyLoadingFileSize: number | null;
 }
 
 export function useSession(): UseSessionReturn {
@@ -190,13 +191,24 @@ export function useSession(): UseSessionReturn {
       if (isStaleStream()) return;
       var m = msg as ChatToolStartMessage;
       setCurrentAssistantUuid(null);
-      addSessionMessage({
-        type: "tool_start",
-        toolId: m.toolId,
-        name: m.name,
-        args: m.args,
-        timestamp: Date.now(),
-      } as HistoryMessage);
+      var existing = getSessionStore().state.messages.findLastIndex(function (msg) {
+        return msg.toolId === m.toolId && msg.type === "tool_start";
+      });
+      if (existing >= 0) {
+        getSessionStore().setState(function (s) {
+          var updated = s.messages.slice();
+          updated[existing] = { ...updated[existing], args: m.args };
+          return { ...s, messages: updated };
+        });
+      } else {
+        addSessionMessage({
+          type: "tool_start",
+          toolId: m.toolId,
+          name: m.name,
+          args: m.args,
+          timestamp: Date.now(),
+        } as HistoryMessage);
+      }
     }
 
     function handleToolResult(msg: ServerMessage) {
@@ -324,6 +336,12 @@ export function useSession(): UseSessionReturn {
       });
     }
 
+    function handleLoadingProgress(msg: ServerMessage) {
+      var m = msg as { type: string; sessionId: string; fileSize: number | null };
+      if (m.sessionId !== getSessionStore().state.activeSessionId) return;
+      getSessionStore().setState(function (s) { return { ...s, historyLoadingFileSize: m.fileSize }; });
+    }
+
     function handleHistory(msg: ServerMessage) {
       var m = msg as SessionHistoryMessage;
       if (m.sessionId && m.messages && m.messages.length === 0 && m.title) {
@@ -335,6 +353,10 @@ export function useSession(): UseSessionReturn {
       }
       setCurrentAssistantUuid(null);
       if (m.sessionId) {
+        if (m.sessionId !== getSessionStore().state.activeSessionId) {
+          if (m.title) updateSessionTabTitle(m.sessionId, m.title);
+          return;
+        }
         var projectSlug = m.projectSlug || getSessionStore().state.activeProjectSlug;
         setSidebarSessionId(m.sessionId);
         streamSessionId = m.sessionId;
@@ -432,11 +454,12 @@ export function useSession(): UseSessionReturn {
 
     function handleRateLimit(msg: ServerMessage) {
       var m = msg as { type: string; status: "allowed" | "allowed_warning" | "rejected"; utilization?: number; resetsAt?: number; rateLimitType?: string; overageStatus?: string; overageResetsAt?: number; isUsingOverage?: boolean };
+      if (!m.rateLimitType) return;
       updateRateLimit({
         status: m.status,
         utilization: m.utilization,
         resetsAt: m.resetsAt,
-        rateLimitType: m.rateLimitType || "unknown",
+        rateLimitType: m.rateLimitType,
         overageStatus: m.overageStatus,
         overageResetsAt: m.overageResetsAt,
         isUsingOverage: m.isUsingOverage,
@@ -450,6 +473,7 @@ export function useSession(): UseSessionReturn {
       setCurrentStatus(null);
     }
 
+    subscribe("session:loading_progress", handleLoadingProgress);
     subscribe("chat:user_message", handleUserMessage);
     subscribe("chat:delta", handleDelta);
     subscribe("chat:tool_start", handleToolStart);
@@ -475,6 +499,7 @@ export function useSession(): UseSessionReturn {
 
     return function () {
       subscriptionsActive--;
+      unsubscribe("session:loading_progress", handleLoadingProgress);
       unsubscribe("chat:user_message", handleUserMessage);
       unsubscribe("chat:delta", handleDelta);
       unsubscribe("chat:tool_start", handleToolStart);
@@ -517,6 +542,7 @@ export function useSession(): UseSessionReturn {
     lastResponseDuration: state.lastResponseDuration,
     lastReadIndex: state.lastReadIndex,
     historyLoading: state.historyLoading,
+    historyLoadingFileSize: state.historyLoadingFileSize,
     historyHasMore: state.historyHasMore,
     historyTotalMessages: state.historyTotalMessages,
     loadMoreHistory: function () {
@@ -550,5 +576,6 @@ export function useSession(): UseSessionReturn {
         lastSentText = null;
       }
     },
+    rateLimits: state.rateLimits,
   };
 }

package/{client/src → src/client}/hooks/useWebSocket.ts

@@ -22,9 +22,6 @@ export function useWebSocket(): WebSocketContextValue {
 }
 
 export function getWebSocketUrl(): string {
-  if (import.meta.env.DEV) {
-    return "ws://" + window.location.hostname + ":17654/ws";
-  }
   var protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
   return protocol + "//" + window.location.host + "/ws";
 }

package/src/client/lib/theme-derive.ts

@@ -0,0 +1,196 @@
+export function isValidHex(hex: string): boolean {
+  return /^#?[0-9a-fA-F]{6}$/.test(hex);
+}
+
+export function normalizeHex(hex: string): string {
+  return hex.replace(/^#/, "").toLowerCase();
+}
+
+export function hexToRgb(hex: string): [number, number, number] {
+  var h = normalizeHex(hex);
+  return [
+    parseInt(h.slice(0, 2), 16),
+    parseInt(h.slice(2, 4), 16),
+    parseInt(h.slice(4, 6), 16),
+  ];
+}
+
+export function rgbToHex(r: number, g: number, b: number): string {
+  return [r, g, b]
+    .map(function (c) {
+      var clamped = Math.max(0, Math.min(255, Math.round(c)));
+      return clamped.toString(16).padStart(2, "0");
+    })
+    .join("");
+}
+
+function srgbToLinear(c: number): number {
+  var s = c / 255;
+  return s <= 0.04045 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+}
+
+function linearToSrgb(c: number): number {
+  var clamped = Math.max(0, Math.min(1, c));
+  return clamped <= 0.0031308
+    ? clamped * 12.92 * 255
+    : (1.055 * clamped ** (1 / 2.4) - 0.055) * 255;
+}
+
+export function rgbToOklch(
+  r: number,
+  g: number,
+  b: number,
+): { L: number; C: number; h: number } {
+  var lr = srgbToLinear(r);
+  var lg = srgbToLinear(g);
+  var lb = srgbToLinear(b);
+
+  var l_ = 0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb;
+  var m_ = 0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb;
+  var s_ = 0.0883024619 * lr + 0.2220049168 * lg + 0.6696926213 * lb;
+
+  var l_cbrt = Math.cbrt(l_);
+  var m_cbrt = Math.cbrt(m_);
+  var s_cbrt = Math.cbrt(s_);
+
+  var L = 0.2104542553 * l_cbrt + 0.7936177850 * m_cbrt - 0.0040720468 * s_cbrt;
+  var a = 1.9779984951 * l_cbrt - 2.4285922050 * m_cbrt + 0.4505937099 * s_cbrt;
+  var b2 = 0.0259040371 * l_cbrt + 0.7827717662 * m_cbrt - 0.8086757660 * s_cbrt;
+
+  var C = Math.sqrt(a * a + b2 * b2);
+  var h = (Math.atan2(b2, a) * 180) / Math.PI;
+  if (h < 0) h += 360;
+
+  return { L, C, h };
+}
+
+export function oklchToRgb(
+  L: number,
+  C: number,
+  h: number,
+): [number, number, number] {
+  var hRad = (h * Math.PI) / 180;
+  var a = C * Math.cos(hRad);
+  var b = C * Math.sin(hRad);
+
+  var l_cbrt = L + 0.3963377774 * a + 0.2158037573 * b;
+  var m_cbrt = L - 0.1055613458 * a - 0.0638541728 * b;
+  var s_cbrt = L - 0.0894841775 * a - 1.2914855480 * b;
+
+  var l_ = l_cbrt * l_cbrt * l_cbrt;
+  var m_ = m_cbrt * m_cbrt * m_cbrt;
+  var s_ = s_cbrt * s_cbrt * s_cbrt;
+
+  var r = 4.0767416621 * l_ - 3.3077115913 * m_ + 0.2309699292 * s_;
+  var g = -1.2684380046 * l_ + 2.6097574011 * m_ - 0.3413193965 * s_;
+  var bl = -0.0041960863 * l_ - 0.7034186147 * m_ + 1.7076147010 * s_;
+
+  return [
+    Math.round(linearToSrgb(r)),
+    Math.round(linearToSrgb(g)),
+    Math.round(linearToSrgb(bl)),
+  ];
+}
+
+export function oklchMix(hex1: string, hex2: string, t: number): string {
+  var [r1, g1, b1] = hexToRgb(hex1);
+  var [r2, g2, b2] = hexToRgb(hex2);
+
+  var c1 = rgbToOklch(r1, g1, b1);
+  var c2 = rgbToOklch(r2, g2, b2);
+
+  var L = c1.L + (c2.L - c1.L) * t;
+  var C = c1.C + (c2.C - c1.C) * t;
+
+  var h1 = c1.C < 0.001 ? c2.h : c1.h;
+  var h2 = c2.C < 0.001 ? c1.h : c2.h;
+
+  var diff = h2 - h1;
+  if (diff > 180) diff -= 360;
+  if (diff < -180) diff += 360;
+  var h = h1 + diff * t;
+  if (h < 0) h += 360;
+  if (h >= 360) h -= 360;
+
+  var [r, g, b] = oklchToRgb(L, C, h);
+  return rgbToHex(r, g, b);
+}
+
+export function oklchLighten(hex: string, amount: number): string {
+  var [r, g, b] = hexToRgb(hex);
+  var oklch = rgbToOklch(r, g, b);
+
+  var L = Math.max(0, Math.min(1, oklch.L + amount));
+
+  var [nr, ng, nb] = oklchToRgb(L, oklch.C, oklch.h);
+  return rgbToHex(nr, ng, nb);
+}
+
+export function oklchRotateHue(hex: string, degrees: number): string {
+  var [r, g, b] = hexToRgb(hex);
+  var oklch = rgbToOklch(r, g, b);
+
+  var h = (oklch.h + degrees) % 360;
+  if (h < 0) h += 360;
+
+  var [nr, ng, nb] = oklchToRgb(oklch.L, oklch.C, h);
+  return rgbToHex(nr, ng, nb);
+}
+
+function clampSyntaxLightness(
+  hex: string,
+  variant: "dark" | "light",
+): string {
+  var [r, g, b] = hexToRgb(hex);
+  var oklch = rgbToOklch(r, g, b);
+
+  var L = oklch.L;
+  if (variant === "dark") {
+    if (L < 0.65) L = 0.65;
+    if (L > 0.85) L = 0.85;
+  } else {
+    if (L < 0.35) L = 0.35;
+    if (L > 0.55) L = 0.55;
+  }
+
+  var [nr, ng, nb] = oklchToRgb(L, oklch.C, oklch.h);
+  return rgbToHex(nr, ng, nb);
+}
+
+export function deriveFullPalette(
+  bg: string,
+  surface: string,
+  fg: string,
+  accent: string,
+  variant: "dark" | "light",
+): Record<string, string> {
+  var nbg = normalizeHex(bg);
+  var nsurface = normalizeHex(surface);
+  var nfg = normalizeHex(fg);
+  var naccent = normalizeHex(accent);
+
+  return {
+    base00: nbg,
+    base01: oklchMix(nbg, nsurface, 0.5),
+    base02: nsurface,
+    base03: oklchMix(nsurface, nfg, 0.25),
+    base04: oklchMix(nsurface, nfg, 0.45),
+    base05: nfg,
+    base06:
+      variant === "dark"
+        ? oklchLighten(nfg, 0.05)
+        : oklchLighten(nfg, -0.05),
+    base07:
+      variant === "dark"
+        ? oklchLighten(nfg, 0.15)
+        : oklchLighten(nfg, -0.15),
+    base08: clampSyntaxLightness(oklchRotateHue(naccent, 0), variant),
+    base09: clampSyntaxLightness(oklchRotateHue(naccent, 30), variant),
+    base0A: clampSyntaxLightness(oklchRotateHue(naccent, 60), variant),
+    base0B: clampSyntaxLightness(oklchRotateHue(naccent, 120), variant),
+    base0C: clampSyntaxLightness(oklchRotateHue(naccent, 180), variant),
+    base0D: clampSyntaxLightness(naccent, variant),
+    base0E: clampSyntaxLightness(oklchRotateHue(naccent, 270), variant),
+    base0F: clampSyntaxLightness(oklchRotateHue(naccent, 330), variant),
+  };
+}

package/{client/src → src/client}/stores/analytics.ts

@@ -1,8 +1,9 @@
 import { Store } from "@tanstack/react-store";
-import type { AnalyticsPayload, AnalyticsPeriod, AnalyticsScope } from "@lattice/shared";
+import type { AnalyticsPayload, AnalyticsPeriod, AnalyticsScope, AnalyticsSectionName } from "@lattice/shared";
 
 export interface AnalyticsState {
-  data: AnalyticsPayload | null;
+  data: Partial<AnalyticsPayload>;
+  loadedSections: AnalyticsSectionName[];
   loading: boolean;
   error: string | null;
   period: AnalyticsPeriod;
@@ -11,10 +12,11 @@ export interface AnalyticsState {
 }
 
 var analyticsStore = new Store<AnalyticsState>({
-  data: null,
+  data: {},
+  loadedSections: [],
   loading: false,
   error: null,
-  period: "7d",
+  period: "30d",
   scope: "global",
   projectSlug: null,
 });
@@ -23,9 +25,21 @@ export function getAnalyticsStore(): Store<AnalyticsState> {
   return analyticsStore;
 }
 
-export function setAnalyticsData(data: AnalyticsPayload): void {
+export function mergeAnalyticsSection(section: AnalyticsSectionName, sectionData: Partial<AnalyticsPayload>): void {
   analyticsStore.setState(function (state) {
-    return { ...state, data: data, loading: false, error: null };
+    return {
+      ...state,
+      data: { ...state.data, ...sectionData },
+      loadedSections: state.loadedSections.includes(section)
+        ? state.loadedSections
+        : [...state.loadedSections, section],
+    };
+  });
+}
+
+export function clearAnalyticsForRequest(): void {
+  analyticsStore.setState(function (state) {
+    return { ...state, data: {}, loadedSections: [], loading: true, error: null };
   });
 }
 

package/{client/src → src/client}/stores/session.ts

@@ -53,6 +53,7 @@ export interface SessionState {
   lastResponseDuration: number | null;
   lastReadIndex: number | null;
   historyLoading: boolean;
+  historyLoadingFileSize: number | null;
   historyHasMore: boolean;
   historyTotalMessages: number;
   wasInterrupted: boolean;
@@ -80,6 +81,7 @@ var sessionStore = new Store<SessionState>({
   lastResponseDuration: null,
   lastReadIndex: null,
   historyLoading: false,
+  historyLoadingFileSize: null,
   historyHasMore: false,
   historyTotalMessages: 0,
   wasInterrupted: false,
@@ -93,6 +95,21 @@ var sessionStore = new Store<SessionState>({
   rateLimits: {},
 });
 
+export interface ModelOption {
+  value: string;
+  displayName: string;
+}
+
+var availableModels: ModelOption[] = [];
+
+export function setAvailableModels(models: ModelOption[]): void {
+  availableModels = models;
+}
+
+export function getAvailableModels(): ModelOption[] {
+  return availableModels;
+}
+
 var streamGeneration = 0;
 
 export function getStreamGeneration(): number {
@@ -222,7 +239,7 @@ export function setIsProcessing(processing: boolean): void {
 }
 
 var sessionMessageCache = new Map<string, { messages: HistoryMessage[]; title: string | null; hasMore: boolean; totalMessages: number }>();
-var MAX_CACHED_SESSIONS = 10;
+var MAX_CACHED_SESSIONS = 50;
 
 export function cacheCurrentSession(): void {
   var state = sessionStore.state;
@@ -244,6 +261,10 @@ export function getCachedSession(sessionId: string): { messages: HistoryMessage[
   return sessionMessageCache.get(sessionId);
 }
 
+export function invalidateSessionMessageCache(sessionId: string): void {
+  sessionMessageCache.delete(sessionId);
+}
+
 export function setActiveSession(projectSlug: string | null, sessionId: string | null, title?: string | null): void {
   var prevSessionId = sessionStore.state.activeSessionId;
   if (prevSessionId) {
@@ -271,6 +292,7 @@ export function setActiveSession(projectSlug: string | null, sessionId: string |
       lastResponseDuration: null,
       lastReadIndex: null,
       historyLoading: !cached,
+      historyLoadingFileSize: null,
       historyHasMore: cached?.hasMore ?? false,
       historyTotalMessages: cached?.totalMessages ?? 0,
       wasInterrupted: false,
@@ -334,6 +356,7 @@ export function clearSession(): void {
       lastResponseDuration: null,
       lastReadIndex: null,
       historyLoading: false,
+      historyLoadingFileSize: null,
       historyHasMore: false,
       historyTotalMessages: 0,
       wasInterrupted: false,
@@ -344,6 +367,7 @@ export function clearSession(): void {
       pendingPrefill: null,
       budgetStatus: null,
       budgetExceeded: false,
+      rateLimits: {},
     };
   });
 }
@@ -398,7 +422,13 @@ export function loadCachedRateLimits(): void {
     var raw = localStorage.getItem("lattice:rateLimits");
     if (raw) {
       var parsed = JSON.parse(raw) as Record<string, RateLimitEntry>;
-      sessionStore.setState(function (state) { return { ...state, rateLimits: parsed }; });
+      var cleaned: Record<string, RateLimitEntry> = {};
+      for (var key of Object.keys(parsed)) {
+        if (key !== "unknown" && parsed[key].rateLimitType) {
+          cleaned[key] = parsed[key];
+        }
+      }
+      sessionStore.setState(function (state) { return { ...state, rateLimits: cleaned }; });
     }
   } catch {}
 }

package/{client/src → src/client}/stores/sidebar.ts

@@ -3,6 +3,7 @@ import type { ProjectSettingsSection } from "@lattice/shared";
 import { encodeWorkspaceUrl, decodeWorkspaceUrl, isLegacySessionUrl, shortSessionId } from "../lib/workspace-url";
 import type { DecodedWorkspace } from "../lib/workspace-url";
 import { getWorkspaceStore, restoreWorkspace, setUrlSyncCallback, switchProjectWorkspace, setCurrentProjectKey } from "./workspace";
+import { setAnalyticsScope } from "./analytics";
 
 export type { ProjectSettingsSection };
 
@@ -364,8 +365,9 @@ export function goToDashboard(): void {
 }
 
 export function goToAnalytics(): void {
+  setAnalyticsScope("global");
   sidebarStore.setState(function (state) {
-    return { ...state, activeView: { type: "analytics" }, sidebarMode: "project" };
+    return { ...state, activeView: { type: "analytics" } };
   });
   pushUrl(sidebarStore.state.activeProjectSlug);
 }

package/{client/src → src/client}/themes/index.ts

@@ -1,3 +1,4 @@
+import alabaster from "../../../themes/alabaster.json";
 import amoled from "../../../themes/amoled.json";
 import ayuLight from "../../../themes/ayu-light.json";
 import catppuccinLatte from "../../../themes/catppuccin-latte.json";
@@ -10,17 +11,29 @@ import everforest from "../../../themes/everforest.json";
 import githubLight from "../../../themes/github-light.json";
 import gruvboxDark from "../../../themes/gruvbox-dark.json";
 import gruvboxLight from "../../../themes/gruvbox-light.json";
+import horizonLight from "../../../themes/horizon-light.json";
+import kanagawaLotus from "../../../themes/kanagawa-lotus.json";
+import kanagawa from "../../../themes/kanagawa.json";
+import modusOperandi from "../../../themes/modus-operandi.json";
 import monokai from "../../../themes/monokai.json";
+import nightfox from "../../../themes/nightfox.json";
 import nordLight from "../../../themes/nord-light.json";
 import nord from "../../../themes/nord.json";
 import oneDark from "../../../themes/one-dark.json";
 import oneLight from "../../../themes/one-light.json";
+import palenight from "../../../themes/palenight.json";
+import paper from "../../../themes/paper.json";
+import penumbraLight from "../../../themes/penumbra-light.json";
+import poimandres from "../../../themes/poimandres.json";
+import quietLight from "../../../themes/quiet-light.json";
 import rosePineDawn from "../../../themes/rose-pine-dawn.json";
 import rosePine from "../../../themes/rose-pine.json";
 import solarizedDark from "../../../themes/solarized-dark.json";
 import solarizedLight from "../../../themes/solarized-light.json";
+import synthwave84 from "../../../themes/synthwave84.json";
 import tokyoNightLight from "../../../themes/tokyo-night-light.json";
 import tokyoNight from "../../../themes/tokyo-night.json";
+import vesper from "../../../themes/vesper.json";
 
 export interface ThemeColors {
   base00: string;
@@ -53,6 +66,7 @@ export interface ThemeEntry {
 }
 
 export var themes: ThemeEntry[] = [
+  { id: "alabaster", theme: alabaster as Theme },
   { id: "amoled", theme: amoled as Theme },
   { id: "ayu-light", theme: ayuLight as Theme },
   { id: "catppuccin-latte", theme: catppuccinLatte as Theme },
@@ -65,15 +79,27 @@ export var themes: ThemeEntry[] = [
   { id: "github-light", theme: githubLight as Theme },
   { id: "gruvbox-dark", theme: gruvboxDark as Theme },
   { id: "gruvbox-light", theme: gruvboxLight as Theme },
+  { id: "horizon-light", theme: horizonLight as Theme },
+  { id: "kanagawa-lotus", theme: kanagawaLotus as Theme },
+  { id: "kanagawa", theme: kanagawa as Theme },
+  { id: "modus-operandi", theme: modusOperandi as Theme },
   { id: "monokai", theme: monokai as Theme },
+  { id: "nightfox", theme: nightfox as Theme },
   { id: "nord-light", theme: nordLight as Theme },
   { id: "nord", theme: nord as Theme },
   { id: "one-dark", theme: oneDark as Theme },
   { id: "one-light", theme: oneLight as Theme },
+  { id: "palenight", theme: palenight as Theme },
+  { id: "paper", theme: paper as Theme },
+  { id: "penumbra-light", theme: penumbraLight as Theme },
+  { id: "poimandres", theme: poimandres as Theme },
+  { id: "quiet-light", theme: quietLight as Theme },
   { id: "rose-pine-dawn", theme: rosePineDawn as Theme },
   { id: "rose-pine", theme: rosePine as Theme },
   { id: "solarized-dark", theme: solarizedDark as Theme },
   { id: "solarized-light", theme: solarizedLight as Theme },
+  { id: "synthwave84", theme: synthwave84 as Theme },
   { id: "tokyo-night-light", theme: tokyoNightLight as Theme },
   { id: "tokyo-night", theme: tokyoNight as Theme },
+  { id: "vesper", theme: vesper as Theme },
 ];