@hienlh/ppm 0.20.10 → 0.21.0

package/src/web/styles/globals.css

@@ -62,9 +62,18 @@
   --color-text-secondary: var(--text-2);
   --color-text-subtle: var(--text-3);
 
-  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI",
-    "Helvetica Neue", sans-serif;
-  --font-mono: "Geist Mono", "Monaco", "Courier New", monospace;
+  /* Geist and Monaspace are bundled (see main.tsx); everything after them is
+     for the case where a face fails to load. system-ui before the named
+     families because it asks the desktop what it uses, and a bare sans-serif
+     last because fontconfig can answer that with a *serif*. */
+  --font-sans: "Geist Variable", "Geist", system-ui, -apple-system,
+    BlinkMacSystemFont, "Segoe UI", "Inter", "Noto Sans", Cantarell,
+    "Helvetica Neue", Arial, sans-serif;
+  /* The same code font as the editor, so a fenced block in a chat message and
+     the file it came from are set in one typeface. */
+  --font-mono: "Monaspace Argon", "Monaspace Argon Var", ui-monospace,
+    "SF Mono", "Cascadia Code", "Noto Sans Mono", "DejaVu Sans Mono", Consolas,
+    monospace;
 
   --radius-sm: 6px;
   --radius-md: 8px;
@@ -466,3 +475,21 @@ html, body {
 @media (prefers-reduced-motion: reduce) {
   .tab-typing-dot { animation: none; }
 }
+
+/*
+ * Inline suggestions in Monaspace Krypton — a different face at the same
+ * metrics, which is what says "this is not your code yet" without moving a
+ * character. Monaco has no `inlineSuggest.fontFamily` option (that is a VS Code
+ * setting), so this is the only lever, and it needs `!important`: Monaco's own
+ * `.monaco-editor .ghost-text-decoration` rule is the same specificity and its
+ * stylesheet is appended by the AMD loader *after* this bundle, so it would
+ * otherwise win on source order. Safe only because Monaspace's five families
+ * share one set of metrics — Monaco places every character at column times
+ * character width, and a family with a different advance would slide out of the
+ * grid it measured with.
+ */
+.monaco-editor .ghost-text-decoration,
+.monaco-editor .ghost-text-decoration-preview,
+.monaco-editor .suggest-preview-text .ghost-text {
+  font-family: "Monaspace Krypton", var(--font-mono) !important;
+}

package/src/web/styles/nerd-font.generated.css

@@ -0,0 +1,153 @@
+/*
+ * Generated by `bun scripts/gen-nerd-font.ts` — do not edit.
+ *
+ * Nerd Fonts v3.5.1, symbols-only face, subset per icon block. Each face is
+ * fetched only when a character inside its `unicode-range` is actually laid
+ * out, so the total below is a ceiling nothing reaches: a powerline prompt
+ * costs 7.2 KiB.
+ *
+ * `font-display: swap` throughout: the fallback shows at once and the icon
+ * replaces it, where `block` would leave the cell empty for up to three
+ * seconds instead.
+ *
+ * Nerd Fonts (MIT, ryanoasis/nerd-fonts).
+ */
+/* IEC Power Symbols — 5 glyphs, 1.0 KiB */
+@font-face {
+  font-family: "PPM Nerd Symbols";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./fonts/nerd-symbols-iec-power.woff2") format("woff2");
+  unicode-range: U+23FB-23FE, U+2B58;
+}
+
+/* Octicons and Powerline Extra strays — 9 glyphs, 0.9 KiB */
+@font-face {
+  font-family: "PPM Nerd Symbols";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./fonts/nerd-symbols-misc.woff2") format("woff2");
+  unicode-range: U+2630, U+2665, U+26A1, U+276C-2771;
+}
+
+/* Pomicons — 11 glyphs, 1.8 KiB */
+@font-face {
+  font-family: "PPM Nerd Symbols";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./fonts/nerd-symbols-pomicons.woff2") format("woff2");
+  unicode-range: U+E000-E00A;
+}
+
+/* Powerline + Powerline Extra — 40 glyphs, 7.2 KiB */
+@font-face {
+  font-family: "PPM Nerd Symbols";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./fonts/nerd-symbols-powerline.woff2") format("woff2");
+  unicode-range: U+E0A0-E0A3, U+E0B0-E0D7;
+}
+
+/* Font Awesome Extension — 170 glyphs, 34.6 KiB */
+@font-face {
+  font-family: "PPM Nerd Symbols";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./fonts/nerd-symbols-font-awesome-ext.woff2") format("woff2");
+  unicode-range: U+E200-E2A9;
+}
+
+/* Weather — 228 glyphs, 32.7 KiB */
+@font-face {
+  font-family: "PPM Nerd Symbols";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./fonts/nerd-symbols-weather.woff2") format("woff2");
+  unicode-range: U+E300-E3E3;
+}
+
+/* Seti-UI + Custom — 194 glyphs, 41.6 KiB */
+@font-face {
+  font-family: "PPM Nerd Symbols";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./fonts/nerd-symbols-seti.woff2") format("woff2");
+  unicode-range: U+E5FA-E6BB;
+}
+
+/* Devicons — 601 glyphs, 200.7 KiB */
+@font-face {
+  font-family: "PPM Nerd Symbols";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./fonts/nerd-symbols-devicons.woff2") format("woff2");
+  unicode-range: U+E700-E958;
+}
+
+/* Codicons — 540 glyphs, 73.3 KiB */
+@font-face {
+  font-family: "PPM Nerd Symbols";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./fonts/nerd-symbols-codicons.woff2") format("woff2");
+  unicode-range: U+EA60-EC84;
+}
+
+/* Font Awesome — 720 glyphs, 114.7 KiB */
+@font-face {
+  font-family: "PPM Nerd Symbols";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./fonts/nerd-symbols-font-awesome.woff2") format("woff2");
+  unicode-range: U+ED00-EFCF;
+}
+
+/* Font Awesome (legacy range) — 768 glyphs, 97.4 KiB */
+@font-face {
+  font-family: "PPM Nerd Symbols";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./fonts/nerd-symbols-font-awesome-legacy.woff2") format("woff2");
+  unicode-range: U+F000-F2FF;
+}
+
+/* Font Logos — 134 glyphs, 35.8 KiB */
+@font-face {
+  font-family: "PPM Nerd Symbols";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./fonts/nerd-symbols-font-logos.woff2") format("woff2");
+  unicode-range: U+F300-F385;
+}
+
+/* Octicons — 308 glyphs, 30.6 KiB */
+@font-face {
+  font-family: "PPM Nerd Symbols";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./fonts/nerd-symbols-octicons.woff2") format("woff2");
+  unicode-range: U+F400-F533;
+}
+
+/* Material Design Icons — 6896 glyphs, 492.2 KiB */
+@font-face {
+  font-family: "PPM Nerd Symbols";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./fonts/nerd-symbols-material.woff2") format("woff2");
+  unicode-range: U+F0001-F1AF0;
+}

package/src/web/sw.ts

@@ -1,7 +1,74 @@
 /// <reference lib="webworker" />
-import { precacheAndRoute } from "workbox-precaching";
+import { precacheAndRoute, cleanupOutdatedCaches } from "workbox-precaching";
+import { registerRoute } from "workbox-routing";
+import { CacheFirst } from "workbox-strategies";
 
 declare const self: ServiceWorkerGlobalScope;
 
-// Workbox injects precache manifest here
+/**
+ * The precache holds the app shell and nothing else.
+ *
+ * It used to hold everything the build emitted — 488 entries, 33.3 MB, fetched
+ * on a phone's *first* visit before the app was usable. That included 18 MB of
+ * Monaco language workers and Shiki grammars for languages most people never
+ * open (emacs-lisp, wolfram, wasm), and it quietly undid work done elsewhere:
+ * `ts.worker.bundle.js` is 12.7 MB and is never instantiated, because Monaco's
+ * TypeScript service is unregistered — but the precache downloaded it anyway.
+ *
+ * Everything outside the shell is content-hashed and served `immutable`, so
+ * `CacheFirst` is exactly right for it: fetched the first time it is genuinely
+ * needed, then never fetched again. The trade is that the first *offline* visit
+ * cannot open a file type whose chunk has never been loaded, which is a far
+ * better bargain than 33 MB before the first paint.
+ */
 precacheAndRoute(self.__WB_MANIFEST);
+
+// Every superseded precache, dropped on activate. Without this a year of
+// upgrades leaves a year of shells in storage, each keyed by its own revision.
+cleanupOutdatedCaches();
+
+/**
+ * An HTML response is never an asset, and caching one is what made a white
+ * screen permanent.
+ *
+ * `static.ts` used to answer *any* missing file with the SPA shell, so a lazy
+ * chunk deleted by an upgrade came back as `200 text/html`. `CacheFirst` stored
+ * that under the chunk's URL in `ppm-assets`, and because content-hashed assets
+ * are never revalidated, it stayed there: restoring the file on the server did
+ * not fix the tab, and only `caches.delete("ppm-assets")` did.
+ *
+ * The server no longer sends it, which is the actual fix. This is the second
+ * line of defence, and it is worth having on both sides of the cache — refusing
+ * to *store* HTML protects an install that meets an old server, and refusing to
+ * *serve* it heals an install that already stored some.
+ */
+const isHtml = (response: Response) =>
+  (response.headers.get("content-type") ?? "").startsWith("text/html");
+
+const assetIsNeverHtml = {
+  cacheWillUpdate: async ({ response }: { response: Response }) =>
+    isHtml(response) ? null : response,
+  cachedResponseWillBeUsed: async ({ cachedResponse }: { cachedResponse?: Response }) =>
+    cachedResponse && isHtml(cachedResponse) ? null : cachedResponse,
+};
+
+registerRoute(
+  ({ url }) => url.pathname.startsWith("/assets/"),
+  new CacheFirst({ cacheName: "ppm-assets", plugins: [assetIsNeverHtml] }),
+);
+
+/**
+ * `registerType: "autoUpdate"` only describes what the *registration* wants; in
+ * `injectManifest` mode nothing here implemented it. So a new worker installed
+ * and then waited — for every tab of the origin to close, which on a machine
+ * where PPM lives in a pinned tab is never. The tab kept running old JS and
+ * kept asking for chunks the upgrade had already deleted.
+ *
+ * Taking over at once is safe precisely because assets are content-hashed: the
+ * new worker's caches are keyed by different URLs, so a page mid-session cannot
+ * be handed a mismatched pair.
+ */
+self.skipWaiting();
+self.addEventListener("activate", () => {
+  void self.clients.claim();
+});

package/src/web/theme/adapters/monaco-adapter.ts

@@ -3,6 +3,8 @@ import type { PpmTheme } from "../types";
 import { THEME_CHANGE_EVENT, getCurrentAppliedTheme } from "../apply-theme";
 import { resolveTheme } from "../resolve-theme";
 import { useSettingsStore } from "@/stores/settings-store";
+import { semanticTokenRules } from "../semantic-token-rules";
+import { diffTokenRules } from "../diff-token-rules";
 
 /**
  * Monaco theming driven by PpmTheme. Monaco rejects `rgba()` color strings, so
@@ -37,6 +39,21 @@ function deriveColors(theme: PpmTheme): Record<string, string> {
   return { ...colors, ...theme.editor?.colors };
 }
 
+/**
+ * Where Monaco itself comes from.
+ *
+ * `@monaco-editor/react` defaults to `cdn.jsdelivr.net` — nothing in PPM had
+ * ever told it otherwise, so the editor did not work without the public
+ * internet. `scripts/copy-monaco.ts` stages the same files under `assets/`, so
+ * they arrive from PPM, `immutable` and brotli-compressed.
+ *
+ * This has to run before the first `loader.init()`, which is why it is at module
+ * scope in a module `app.tsx` imports eagerly rather than inside a component:
+ * `loader.config` after init is ignored, and the failure would be a silent
+ * return to the CDN.
+ */
+loader.config({ paths: { vs: "/assets/monaco/vs" } });
+
 let monacoRef: typeof import("monaco-editor") | null = null;
 
 async function ensureDefined(theme: PpmTheme): Promise<string> {
@@ -45,7 +62,9 @@ async function ensureDefined(theme: PpmTheme): Promise<string> {
   monaco.editor.defineTheme(name, {
     base: theme.mode === "dark" ? "vs-dark" : "vs",
     inherit: true,
-    rules: theme.editor?.rules ?? [],
+    // Semantic rules first, so a theme's own rules still win. Monaco resolves
+    // a language server's token types through this same table.
+    rules: [...semanticTokenRules(theme.mode), ...diffTokenRules(theme.mode), ...(theme.editor?.rules ?? [])],
     colors: deriveColors(theme),
   });
   return name;

package/src/web/theme/diff-token-rules.ts

@@ -0,0 +1,34 @@
+/**
+ * Colours for the `diff` tokenizer in `src/web/lib/monaco-diff-language.ts`.
+ *
+ * VS Code's own values, so a diff in a PPM hover reads the way a diff in VS
+ * Code does: green for what a commit added, red for what it removed, and a
+ * dimmed blue for the `@@` range and the file headers, which are structure
+ * rather than content.
+ *
+ * These have to exist for the tokenizer to be worth registering at all —
+ * a token type with no rule resolves to the theme's default foreground, so
+ * the tokenizer would run and change nothing.
+ */
+import type { MonacoTokenRule } from "./types";
+
+interface DiffPalette {
+  inserted: string;
+  deleted: string;
+  header: string;
+}
+
+const DARK: DiffPalette = { inserted: "6A9955", deleted: "CE9178", header: "569CD6" };
+const LIGHT: DiffPalette = { inserted: "098658", deleted: "A31515", header: "0000FF" };
+
+export function diffTokenRules(mode: "dark" | "light"): MonacoTokenRule[] {
+  const p = mode === "dark" ? DARK : LIGHT;
+  return [
+    { token: "inserted", foreground: p.inserted },
+    { token: "deleted", foreground: p.deleted },
+    // Both header kinds share a colour, but stay separate tokens so a theme can
+    // tell the `@@` range apart from the `diff --git` line.
+    { token: "meta.diff.header", foreground: p.header },
+    { token: "meta.diff.range", foreground: p.header },
+  ];
+}

package/src/web/theme/semantic-token-rules.ts

@@ -0,0 +1,103 @@
+/**
+ * Colours for the token types a language server reports.
+ *
+ * Standalone Monaco resolves a semantic token through the very same theme rules
+ * as a TextMate scope: `StandaloneTheme.getTokenStyleMetadata` joins the token
+ * type and its modifiers with dots and matches that against the rule trie. So
+ * `class` needs a rule named `class`, and `variable.readonly.declaration` falls
+ * back through `variable.readonly` to `variable`.
+ *
+ * A token type with no rule resolves to the theme's default foreground, which
+ * is why this table has to exist before the capability is advertised: turning
+ * semantic highlighting on without it would take every class and function name
+ * the regex tokenizer had coloured and flatten it to plain text.
+ *
+ * The palette is VS Code's Dark+ and Light+, because PPM's themes set no editor
+ * rules of their own and inherit their syntax colours from Monaco's `vs-dark`
+ * and `vs` — which are that same family. A theme's own `editor.rules` are
+ * applied after these, so a theme can still override any of it.
+ */
+import type { MonacoTokenRule } from "./types";
+
+interface SyntaxPalette {
+  /** Types, classes, interfaces, enums — the things a name can be. */
+  type: string;
+  /** Functions, methods, macros. */
+  function: string;
+  /** Variables, parameters, properties. */
+  variable: string;
+  /** Things that cannot change: enum members and anything `readonly`. */
+  constant: string;
+  /** Keywords and modifiers (`public`, `async`). */
+  keyword: string;
+}
+
+const DARK_PLUS: SyntaxPalette = {
+  type: "4EC9B0",
+  function: "DCDCAA",
+  variable: "9CDCFE",
+  constant: "4FC1FF",
+  keyword: "569CD6",
+};
+
+const LIGHT_PLUS: SyntaxPalette = {
+  type: "267F99",
+  function: "795E26",
+  variable: "001080",
+  constant: "0070C1",
+  keyword: "0000FF",
+};
+
+/**
+ * Rules for every standard LSP semantic token type.
+ *
+ * `keyword`, `string`, `comment`, `number`, `regexp` and `operator` are absent
+ * on purpose: the inherited base theme already colours those names, and its
+ * values are the ones the regex tokenizer has been using, so leaving them alone
+ * keeps a semantically highlighted comment the same colour as an unhighlighted
+ * one.
+ *
+ * Deprecation is the one thing VS Code shows that this does not — it strikes
+ * through a `deprecated` token, which here would mean repeating every rule with
+ * a `.deprecated` suffix. A deprecated symbol still carries a diagnostic.
+ */
+export function semanticTokenRules(mode: "dark" | "light"): MonacoTokenRule[] {
+  const p = mode === "dark" ? DARK_PLUS : LIGHT_PLUS;
+
+  return [
+    // Named types. `type` is included even though the base theme has a rule for
+    // it, so that a type and a class beside it are not two different teals.
+    { token: "namespace", foreground: p.type },
+    { token: "type", foreground: p.type },
+    { token: "class", foreground: p.type },
+    { token: "enum", foreground: p.type },
+    { token: "interface", foreground: p.type },
+    { token: "struct", foreground: p.type },
+    { token: "typeParameter", foreground: p.type },
+
+    { token: "function", foreground: p.function },
+    { token: "method", foreground: p.function },
+    // `member` is not in the specification's list. `typescript-language-server`
+    // sends it for methods, and it is the third most common token in a TS file,
+    // so leaving it out flattened every method call to plain text. A server is
+    // free to extend the legend like this, which is why the rules cover more
+    // than the standard names.
+    { token: "member", foreground: p.function },
+    { token: "macro", foreground: p.function },
+    { token: "decorator", foreground: p.function },
+
+    // Overridden rather than inherited: `vs-dark` paints `variable` bright cyan
+    // for the shell and CSS tokenizers, and every identifier in a file turning
+    // that colour is not what VS Code looks like.
+    { token: "variable", foreground: p.variable },
+    { token: "parameter", foreground: p.variable },
+    { token: "property", foreground: p.variable },
+    { token: "event", foreground: p.variable },
+
+    { token: "enumMember", foreground: p.constant },
+    { token: "variable.readonly", foreground: p.constant },
+    { token: "property.readonly", foreground: p.constant },
+
+    { token: "modifier", foreground: p.keyword },
+  ];
+}

package/src/web/theme/theme-mode-options.ts

@@ -1,4 +1,4 @@
-import { Sun, Moon, Monitor } from "lucide-react";
+import { Sun, Moon, Monitor } from "@/lib/icons";
 import type { PpmThemeMode } from "./types";
 
 /**

package/vite.config.ts

@@ -2,16 +2,15 @@ import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import tailwindcss from "@tailwindcss/vite";
 import { VitePWA } from "vite-plugin-pwa";
-import monacoEditorPlugin from "vite-plugin-monaco-editor";
 import { resolve } from "path";
+import { monacoDevAssets } from "./scripts/vite-monaco-dev-assets.ts";
 
 export default defineConfig({
   plugins: [
     react(),
+    // Without this the editor never paints under `bun dev:web` — see the plugin's own comment.
+    monacoDevAssets(),
     tailwindcss(),
-    ((monacoEditorPlugin as unknown as { default?: (opts: object) => object }).default ?? (monacoEditorPlugin as unknown as (opts: object) => object))({
-      languages: ["javascript", "typescript", "python", "html", "css", "json", "markdown", "yaml", "shell"],
-    }),
     VitePWA({
       registerType: "autoUpdate",
       strategies: "injectManifest",
@@ -31,8 +30,20 @@ export default defineConfig({
         ],
       },
       injectManifest: {
-        globPatterns: ["**/*.{js,css,html,ico,png,svg,woff2}"],
-        maximumFileSizeToCacheInBytes: 15 * 1024 * 1024,
+        // The shell only. Globbing everything meant a phone's first visit
+        // downloaded 488 files and 33.3 MB before the app was usable; the rest
+        // is content-hashed and immutable, so `sw.ts` caches it on first real
+        // use instead. `index-*` is Vite's entry chunk.
+        // Named individually rather than by extension: a `*.png` glob pulled in
+        // `donate-qr.png`, 104 KB downloaded before first paint by everyone.
+        // Monaco needs no exclusion here: `copy-monaco.ts` stages it into
+        // `dist/web/assets/monaco/` *after* `vite build`, so nothing of it can
+        // reach the manifest — it is cached on use by the `/assets/` route in
+        // `sw.ts`, workers included.
+        globPatterns: ["index.html", "manifest.webmanifest", "icon-*.svg", "assets/index-*.{js,css}"],
+        // No shell file is anywhere near this. A cap in the megabytes is what
+        // let a 12.7 MB worker in.
+        maximumFileSizeToCacheInBytes: 2 * 1024 * 1024,
       },
     }),
   ],
@@ -46,10 +57,16 @@ export default defineConfig({
     outDir: "../../dist/web",
     emptyOutDir: true,
     sourcemap: false,
+    // A font is never worth inlining. The whole reason a `@font-face` carries a
+    // `unicode-range` is that it is fetched only for text that actually needs
+    // it — base64 in the stylesheet turns that into an unconditional download,
+    // inside the one file the service worker precaches. Under Vite's 4 KB
+    // default, four subsets were being inlined into the shell, three of them
+    // the *rarest* Nerd Font blocks (IEC power symbols, Pomicons).
+    assetsInlineLimit: (file: string) => (file.endsWith(".woff2") ? false : undefined),
     rollupOptions: {
       output: {
         manualChunks(id: string) {
-          if (id.includes("node_modules/monaco-editor")) return "vendor-monaco";
           if (id.includes("node_modules/mermaid")) return "vendor-mermaid";
           if (id.includes("node_modules/@xterm")) return "vendor-xterm";
           if (