@hienlh/ppm 0.20.9 → 0.21.0

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

@@ -0,0 +1,182 @@
+/**
+ * Connects one Monaco editor to the language server for its file.
+ *
+ * Registers the model as a document, keeps the server's copy in step with the
+ * buffer, turns published diagnostics into markers, and reports the server's
+ * state so the UI can say what is happening.
+ *
+ * Edits are sent incrementally, which is what VS Code does and what keeps a
+ * large file affordable. Monaco hands out changes already ordered bottom-up
+ * within an event, which is the order LSP needs for sequential application, so
+ * they pass straight through. The version number is the safety net: if it ever
+ * skips, the bridge asks for the whole document back rather than applying a
+ * delta to a copy that is already wrong.
+ */
+import { useEffect, useRef, useState } from "react";
+import type * as MonacoType from "monaco-editor";
+import {
+  acquireLspConnection,
+  releaseLspConnection,
+  type LspConnection,
+  type LspDocumentStatus,
+} from "@/lib/lsp/lsp-client";
+import { registerLspDocument, unregisterLspDocument } from "@/lib/lsp/lsp-documents";
+import { disposeShadowModels } from "@/lib/lsp/lsp-shadow-models";
+import { registerLspProviders } from "@/lib/lsp/register-providers";
+import { fromLspRange, markerSeverity } from "@/lib/lsp/lsp-monaco";
+import { registerSemanticTokens, semanticTokensLegendOf } from "@/lib/lsp/lsp-semantic-tokens";
+import { useProblemsStore } from "@/stores/problems-store";
+
+export interface UseLspOptions {
+  editor: MonacoType.editor.IStandaloneCodeEditor | null;
+  monaco: typeof MonacoType | null;
+  projectName?: string;
+  /** Project-relative path. An absolute or untitled path is not served. */
+  filePath?: string;
+  enabled: boolean;
+}
+
+export interface LspState {
+  status: LspDocumentStatus | null;
+  /** Diagnostics for this file, for a Problems view to list. */
+  diagnostics: LspDiagnostic[];
+}
+
+export interface LspDiagnostic {
+  message: string;
+  severity?: number;
+  source?: string;
+  code?: string | number;
+  range: { start: { line: number; character: number }; end: { line: number; character: number } };
+}
+
+/**
+ * Markers are owned per language server so clearing one server's diagnostics
+ * cannot wipe another's — PPM's own SQL and JSON markers live on the same
+ * models.
+ */
+const MARKER_OWNER = "ppm-lsp";
+
+export function useLsp({ editor, monaco, projectName, filePath, enabled }: UseLspOptions): LspState {
+  const [status, setStatus] = useState<LspDocumentStatus | null>(null);
+  const [diagnostics, setDiagnostics] = useState<LspDiagnostic[]>([]);
+  const connectionRef = useRef<LspConnection | null>(null);
+
+  const active = enabled && Boolean(projectName && filePath && editor && monaco);
+
+  // Register the providers once Monaco exists. Doing it here rather than at
+  // module load keeps it out of the bundle's startup path, and the function
+  // itself is idempotent per language.
+  useEffect(() => {
+    if (!monaco || !active) return;
+    registerLspProviders(monaco);
+  }, [monaco, active]);
+
+  // Open the document, keep it in step, and close it on the way out.
+  useEffect(() => {
+    if (!active || !editor || !monaco || !projectName || !filePath) {
+      setStatus(null);
+      setDiagnostics([]);
+      return;
+    }
+
+    const model = editor.getModel();
+    if (!model) return;
+
+    const connection = acquireLspConnection(projectName);
+    connectionRef.current = connection;
+    registerLspDocument(model, { connection, path: filePath });
+
+    const offStatus = connection.onStatus((path, next) => {
+      if (path !== filePath) return;
+      setStatus(next);
+      // Semantic tokens are indices into a legend only the server knows, so the
+      // provider cannot be registered until one has answered. Idempotent per
+      // language, so every editor mount arriving here costs nothing.
+      if (next.state === "ready") {
+        const legend = semanticTokensLegendOf(next.capabilities);
+        if (legend) registerSemanticTokens(monaco, model.getLanguageId(), legend);
+      }
+    });
+
+    const offNotification = connection.onNotification((method, params) => {
+      if (method !== "textDocument/publishDiagnostics") return;
+      const payload = params as { uri?: string; diagnostics?: LspDiagnostic[] };
+      // The bridge rewrote the URI to this model's, so a mismatch means the
+      // diagnostics belong to a different file this socket also has open.
+      if (payload.uri !== model.uri.toString()) return;
+
+      const list = payload.diagnostics ?? [];
+      setDiagnostics(list);
+      // Also to the shared store, which is what the Problems panel reads. The
+      // markers below only draw on this model, so they can say what is wrong
+      // with *this* file and nothing more.
+      useProblemsStore.getState().publish(projectName, filePath, list);
+      monaco.editor.setModelMarkers(
+        model,
+        MARKER_OWNER,
+        list.map((diagnostic) => ({
+          ...fromLspRange(diagnostic.range),
+          message: diagnostic.message,
+          severity: markerSeverity(monaco, diagnostic.severity),
+          source: diagnostic.source,
+          code: diagnostic.code === undefined ? undefined : String(diagnostic.code),
+        })),
+      );
+    });
+
+    connection.open(filePath, {
+      getText: () => model.getValue(),
+      getVersion: () => model.getVersionId(),
+      clientUri: model.uri.toString(),
+    });
+
+    const onChange = model.onDidChangeContent((event) => {
+      connection.change(
+        filePath,
+        event.versionId,
+        // Monaco's ranges are 1-based and its changes within one event are
+        // already ordered bottom-up, which is the order LSP applies them in.
+        event.changes.map((change) => ({
+          range: {
+            start: { line: change.range.startLineNumber - 1, character: change.range.startColumn - 1 },
+            end: { line: change.range.endLineNumber - 1, character: change.range.endColumn - 1 },
+          },
+          text: change.text,
+        })),
+      );
+    });
+
+    return () => {
+      onChange.dispose();
+      offStatus();
+      offNotification();
+      // Clear our markers so a closed file's errors do not outlive it.
+      monaco.editor.setModelMarkers(model, MARKER_OWNER, []);
+      useProblemsStore.getState().clear(projectName, filePath);
+      unregisterLspDocument(model);
+      connection.close(filePath);
+      // The shadow models exist only so Monaco can resolve a peek or an F12 into a file that
+      // is not open. Once the last editor for the project has gone there is nothing left to
+      // resolve them for, and forty files' contents are pure memory until the page reloads.
+      if (releaseLspConnection(projectName)) disposeShadowModels();
+      connectionRef.current = null;
+      setStatus(null);
+      setDiagnostics([]);
+    };
+  }, [active, editor, monaco, projectName, filePath]);
+
+  return { status, diagnostics };
+}
+
+/** Tell the server a save happened, so servers that only analyse on save catch up. */
+export function notifyLspSave(projectName: string, filePath: string, text: string): void {
+  // Uses the shared connection rather than a hook, because a save comes from
+  // the toolbar and the keybinding as well as from the editor.
+  const connection = acquireLspConnection(projectName);
+  try {
+    connection.save(filePath, text);
+  } finally {
+    releaseLspConnection(projectName);
+  }
+}

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

@@ -10,6 +10,7 @@ import { resolveTheme as resolvePpmTheme } from "@/theme/resolve-theme";
 import { getCurrentAppliedTheme, THEME_CHANGE_EVENT } from "@/theme/apply-theme";
 import { onHostResize } from "@/components/floating-window/pip/pip-resize-signal";
 import type { PpmTheme } from "@/theme/types";
+import { TERMINAL_FONT_FAMILY } from "@/lib/editor-font";
 
 /** Current active PpmTheme → xterm ITheme (prefers the live applied theme). */
 function currentXtermTheme(): ITheme {
@@ -347,9 +348,25 @@ export function useTerminal(
       fontSize: 13,
       scrollback: 50000,
       // Explicit terminal-grade stack: the WebGL renderer builds its glyph
-      // atlas via ctx.font and cannot resolve CSS var() values.
-      fontFamily: "Consolas, 'Cascadia Mono', Menlo, 'DejaVu Sans Mono', 'Courier New', monospace",
+      // atlas via ctx.font and cannot resolve CSS var() values. Its own stack
+      // rather than the editor's, because a prompt needs the powerline and
+      // devicon glyphs only a patched Nerd Font has.
+      fontFamily: TERMINAL_FONT_FAMILY,
       theme: currentXtermTheme(),
+      // The two ends of an ANSI palette collapse into the background, and a
+      // prompt cannot know which way round the terminal is. On PPM's light
+      // themes `white` is #e9edf5 against a #f3f7ff background — 1.09:1, i.e.
+      // invisible — and on the dark ones `black` is 1.10:1. oh-my-posh writes
+      // its second prompt line in plain SGR 37, which is correct on the dark
+      // terminal it was designed for and disappeared entirely here.
+      //
+      // Repainting those palette slots is the wrong fix: the same `white` is
+      // also the text *on* a coloured powerline segment, where it is right.
+      // xterm adjusts the foreground per cell against that cell's real
+      // background instead, which leaves every segment untouched and only
+      // rescues the text that had nothing behind it. 4.5 is WCAG AA, and the
+      // value VS Code ships as its own default.
+      minimumContrastRatio: 4.5,
     });
 
     const fitAddon = new FitAddon();
@@ -382,6 +399,23 @@ export function useTerminal(
     termRef.current = term;
     fitRef.current = fitAddon;
 
+    // A webfont that is still in flight is not in the stack yet: xterm measures
+    // the cell and bakes the glyph atlas from ctx.font at open(), so a terminal
+    // opened during the first paint would keep whatever fallback was resolved
+    // then, for the rest of the session. Re-measuring once the face lands is
+    // the whole fix; the atlas is rebuilt from the new metrics by fit().
+    let fontsSettled = false;
+    document.fonts.ready.then(() => {
+      if (fontsSettled || termRef.current !== term) return;
+      fontsSettled = true;
+      try {
+        term.options.fontFamily = TERMINAL_FONT_FAMILY;
+        fitAddon.fit();
+      } catch {
+        // A terminal disposed between the promise and here; nothing to redraw.
+      }
+    });
+
     // Wire input to WS + track command boundaries
     term.onData((data) => {
       // When user presses Enter, mark next row as command output start
@@ -452,8 +486,32 @@ export function useTerminal(
     window.addEventListener(THEME_CHANGE_EVENT, onThemeChange);
     const unsubTheme = () => window.removeEventListener(THEME_CHANGE_EVENT, onThemeChange);
 
+    // The icon faces are fetched on demand — a `unicode-range` face is not
+    // requested until something lays out a character inside it, which for a
+    // prompt's Private Use Area glyphs is the first time the prompt is drawn.
+    // That is long after `document.fonts.ready` above has resolved, so the
+    // one-shot re-measure cannot see it.
+    //
+    // And nothing else redraws: measured in Chromium, a canvas `fillText` does
+    // start the fetch, but the glyph it painted is tofu and the canvas never
+    // repaints itself — ink stayed identical after the face finished loading
+    // and only tripled on a redraw. So the atlas the WebGL and canvas renderers
+    // baked has to be thrown away by hand, or the prompt is tofu for the rest
+    // of the session with the right font sitting loaded in the page.
+    const onFontLoaded = () => {
+      if (termRef.current !== term) return;
+      try {
+        term.clearTextureAtlas();
+        term.refresh(0, term.rows - 1);
+      } catch {
+        // Disposed between the event and here; nothing left to redraw.
+      }
+    };
+    document.fonts.addEventListener("loadingdone", onFontLoaded);
+
     return () => {
       unsubTheme();
+      document.fonts.removeEventListener("loadingdone", onFontLoaded);
       unsubHostResize();
       if (fitTimer) clearTimeout(fitTimer);
       resizeObserver.disconnect();

package/src/web/hooks/use-touch-tab-drag.ts

@@ -1,4 +1,4 @@
-import { useCallback, useRef, useSyncExternalStore } from "react";
+import { useCallback, useEffect, useRef, useSyncExternalStore } from "react";
 import { setDragging, clearDragging, type DragPayload } from "./use-tab-drag";
 import { usePanelStore } from "@/stores/panel-store";
 import { findPanelPosition, maxColumns, MAX_ROWS } from "@/stores/panel-utils";
@@ -186,5 +186,21 @@ export function useTouchTabDrag(panelId: string) {
     if (timer.current) { clearTimeout(timer.current); timer.current = null; }
   }, []);
 
-  return { handleTouchStart, handleTouchMove, handleTouchEnd };
+  /**
+   * The *pre-arm* timer's cancel. There is already a document-level
+   * `touchcancel` above, but it belongs to a drag that has begun and is only
+   * registered once `beginDrag` has run — it says nothing about the 200ms
+   * window before that. And that window is exactly where the problem is: a
+   * scroll fires `touchcancel` and then delivers no further `touchmove` or
+   * `touchend` to the tab, so the `MOVE_PX` tolerance never sees the moves it
+   * would have measured and the drag begins under a finger that was scrolling.
+   */
+  const handleTouchCancel = useCallback(() => {
+    if (timer.current) { clearTimeout(timer.current); timer.current = null; }
+    origin.current = null;
+  }, []);
+
+  useEffect(() => () => { if (timer.current) clearTimeout(timer.current); }, []);
+
+  return { handleTouchStart, handleTouchMove, handleTouchEnd, handleTouchCancel };
 }

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

@@ -25,6 +25,20 @@ const VALID_TAB_TYPES: TabType[] = [
 // Parse URL → state
 // ---------------------------------------------------------------------------
 
+/**
+ * `decodeURIComponent` throws `URIError` on a percent that is not an escape —
+ * a hand-edited address, a truncated share link, a `%` in a branch name that
+ * was never encoded. Thrown from here it reaches the root and unmounts the app,
+ * so a mistyped URL would blank the page instead of just not resolving to a tab.
+ */
+function decodePathSegment(segment: string): string {
+  try {
+    return decodeURIComponent(segment);
+  } catch {
+    return segment;
+  }
+}
+
 /**
  * Parse the current URL to extract project name and tab info.
  * Format: /project/{name}/{tabType}/{...identifier}
@@ -37,7 +51,7 @@ export function parseUrlState(): UrlState {
   const match = path.match(/^\/project\/([^/]+)(?:\/([^/]+)(\/.*)?)?/);
   if (!match) return { projectName: null, tabType: null, tabIdentifier: null, openChat };
 
-  const projectName = decodeURIComponent(match[1]!);
+  const projectName = decodePathSegment(match[1]!);
   const rawType = match[2] ?? null;
   const rawIdentifier = match[3] ? match[3].slice(1) : null; // strip leading /
 

package/src/web/index.html

@@ -48,6 +48,80 @@
     <div id="portal" style="position: fixed; left: 0; top: 0; z-index: 9999;" /></div>
     <div id="root"></div>
     <script type="module" src="./main.tsx"></script>
+    <!-- Boot watchdog: the last resort, and the only code that can still run.
+         The entry's module graph is ~39 separately-hashed chunks, and if any one
+         of them 404s — an upgrade replaced dist/web, or a stale index.html is
+         still naming last week's hashes — the entry module never executes. No
+         React, no error boundary, no listener: `#root` stays empty and the page
+         shows nothing but the body's background. That is the white screen, and
+         nothing bundled can report it, because nothing bundled ran. Hence
+         inline, dependency-free, and gated on the flag main.tsx sets: a boundary
+         inside React already covers the case where the entry *did* run. -->
+    <script>
+      (function () {
+        var KEY = "ppm:boot-retry";
+        // Every cache, not just this app's: the stale index.html that named the
+        // missing hashes comes from the service worker's *precache*, which is
+        // workbox's to name. It repopulates itself on the next activation.
+        function purge() {
+          if (!window.caches) return Promise.resolve();
+          return caches
+            .keys()
+            .then(function (names) { return Promise.all(names.map(function (n) { return caches.delete(n); })); })
+            .catch(function () {});
+        }
+        function panic() {
+          // The wrapper carries its own background: if the stylesheet was one of
+          // the chunks that went missing, `var(--bg)` on <body> resolves to
+          // nothing and dark-mode text would be white on white.
+          document.getElementById("root").innerHTML =
+            '<div style="min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px;' +
+            'background:var(--bg-solid,#0a0e17);color:var(--text,#eaeefb);font:16px/1.5 system-ui,sans-serif">' +
+            '<div role="alert" style="width:100%;max-width:440px;background:var(--panel,#141820);' +
+            'border:1px solid var(--border,rgba(255,255,255,0.12));border-radius:18px;padding:24px">' +
+            '<h1 style="margin:0;font-size:18px;font-weight:600">PPM could not finish loading</h1>' +
+            '<p style="margin:12px 0 0;color:var(--text-2,#9aa6c2)">Part of the app is missing from the server, ' +
+            'which usually means it was replaced by an upgrade. Reloading fetches the current version.</p>' +
+            '<button id="ppm-boot-retry" type="button" style="min-height:44px;width:100%;margin-top:20px;' +
+            'padding:0 20px;border:0;border-radius:12px;background:var(--accent,#5b8cff);' +
+            'color:var(--accent-fg,#fff);font:inherit;font-weight:600;cursor:pointer">Reload</button>' +
+            "</div></div>";
+          document.getElementById("ppm-boot-retry").onclick = function () {
+            try { sessionStorage.removeItem(KEY); } catch (e) {}
+            purge().then(function () { location.reload(); });
+          };
+        }
+        function check() {
+          // Module scripts execute before `load`, so a flag still unset here is
+          // never going to be set — this cannot misfire on a slow boot.
+          //
+          // A boot that worked also clears the key. The silent retry is meant to
+          // be one per *incident*, and the key was only ever written: after one
+          // upgrade healed itself, a second upgrade in the same tab session went
+          // straight to the panic card without trying the reload that would have
+          // fixed it — on a long-lived tab, which is exactly the tab this is for.
+          if (window.__ppmEntryRan) {
+            try { sessionStorage.removeItem(KEY); } catch (e) {}
+            return;
+          }
+          var retried;
+          try {
+            retried = sessionStorage.getItem(KEY) === "1";
+            sessionStorage.setItem(KEY, "1");
+          } catch (e) {
+            // No storage means no way to count attempts, and an uncounted
+            // reload is a loop. Go straight to the message.
+            retried = true;
+          }
+          // One silent attempt first: index.html is served `no-cache`, so a
+          // reload with this origin's caches dropped is exactly how a tab
+          // holding an upgraded-away chunk list heals itself.
+          if (!retried) { purge().then(function () { location.reload(); }); return; }
+          panic();
+        }
+        window.addEventListener("load", function () { setTimeout(check, 4000); });
+      })();
+    </script>
     <!-- Eruda: mobile console for debugging. Activate with ?debug in URL -->
     <script>
       if (/debug=true|debug(&|$)/.test(location.search)) {

package/src/web/lib/blame-hover-commands.ts

@@ -0,0 +1,82 @@
+/**
+ * The commands behind the blame hover's buttons.
+ *
+ * A Monaco hover can only contain markdown, so a button is a `command:` link
+ * and there has to be something registered under that id for it to reach. These
+ * are registered on the standalone `CommandsRegistry`, which is global to the
+ * page — hence the idempotence, and hence ids namespaced under `ppm.blame.`.
+ *
+ * Three of the four hand off to the Git Graph extension, which already has the
+ * views: `ext:command:execute` is the same event core UI uses elsewhere
+ * (`git-status-panel.tsx`), and `git-graph.blame` and `git-graph.fileHistory`
+ * already accept a file path as their second argument.
+ *
+ * Every handler re-checks its arguments even though `buildBlameHoverMarkdown`
+ * is the only thing that writes these links, and even though the hover's trust
+ * is narrowed so a commit message cannot forge one. The registry is global: any
+ * other markdown on the page could name these ids.
+ */
+import type * as MonacoType from "monaco-editor";
+import { toast } from "sonner";
+import { copyToClipboard } from "./clipboard";
+
+let registered = false;
+
+/** Dispatch an extension command the way the rest of the app does. */
+function runExtensionCommand(command: string, args: unknown[]): void {
+  window.dispatchEvent(new CustomEvent("ext:command:execute", { detail: { command, args } }));
+}
+
+function asHash(value: unknown): string | null {
+  return typeof value === "string" && /^[0-9a-f]{7,40}$/.test(value) ? value : null;
+}
+
+function asPath(value: unknown): string | null {
+  return typeof value === "string" && value.length > 0 ? value : null;
+}
+
+/**
+ * Both paths are required. An extension view command reads a falsy first
+ * argument as "resolve the project yourself", which for a hover that named a
+ * specific file would silently open some other project's history.
+ */
+function runForFile(command: string, projectPath: unknown, filePath: unknown): void {
+  const root = asPath(projectPath);
+  const path = asPath(filePath);
+  if (!root || !path) return;
+  runExtensionCommand(command, [root, path]);
+}
+
+export function registerBlameHoverCommands(monaco: typeof MonacoType): void {
+  if (registered) return;
+  registered = true;
+
+  monaco.editor.registerCommand("ppm.blame.copySha", (_accessor, hash: unknown) => {
+    const sha = asHash(hash);
+    if (!sha) return;
+    // The full hash, not the abbreviation the link shows: an abbreviation is
+    // for reading, and what you paste into a command has to be unambiguous.
+    void copyToClipboard(sha).then((ok) => {
+      toast[ok ? "success" : "error"](ok ? `Copied ${sha.slice(0, 7)}` : "Could not copy");
+    });
+  });
+
+  monaco.editor.registerCommand("ppm.blame.fileHistory", (_accessor, projectPath: unknown, filePath: unknown) => {
+    runForFile("git-graph.fileHistory", projectPath, filePath);
+  });
+
+  monaco.editor.registerCommand("ppm.blame.blameFile", (_accessor, projectPath: unknown, filePath: unknown) => {
+    runForFile("git-graph.blame", projectPath, filePath);
+  });
+
+  monaco.editor.registerCommand("ppm.blame.showInGraph", (_accessor, projectPath: unknown) => {
+    const root = asPath(projectPath);
+    if (!root) return;
+    runExtensionCommand("git-graph.view", [root]);
+  });
+}
+
+/** Test seam. */
+export function _resetBlameHoverCommands(): void {
+  registered = false;
+}