@hienlh/ppm 0.20.9 → 0.21.0

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

@@ -0,0 +1,199 @@
+/**
+ * The markdown behind the editor's blame hover — GitLens' hover, rebuilt.
+ *
+ * Monaco's hover renders a markdown string and nothing else, so everything the
+ * hover shows has to survive being written as markdown: the avatar is a data-URI
+ * image, the buttons are `command:` links, and the diff is a fenced block.
+ *
+ * Three things about that are load-bearing and were each verified against a real
+ * Monaco 0.55.1 rather than assumed:
+ *
+ * - `command:` links are stripped unless the string is trusted, and a trusted
+ *   string with `isTrusted: true` allows *every* registered command. This one
+ *   carries a commit message, and anyone who can land a commit can put
+ *   `[click](command:whatever)` in one — so the trust is narrowed to the four
+ *   commands here via `enabledCommands`, and the message is escaped on top.
+ * - `supportHtml` stays off. The avatar is `![](data:image/svg+xml,…)`, which
+ *   renders inline at its own intrinsic size, so no `<img width>` is needed and
+ *   no HTML from a commit message can render at all.
+ * - a ```diff block is only coloured because `monaco-diff-language.ts`
+ *   registers the language Monaco lacks.
+ */
+import type * as MonacoType from "monaco-editor";
+import {
+  formatAbsoluteTime,
+  formatRelativeTime,
+  isUncommittedHash,
+  type BlameCommitInfo,
+  type BlameLineDetail,
+} from "../../shared/blame";
+
+/** The commands the hover's links may run. Nothing else, whatever a message says. */
+export const BLAME_HOVER_COMMANDS = [
+  "ppm.blame.copySha",
+  "ppm.blame.fileHistory",
+  "ppm.blame.blameFile",
+  "ppm.blame.showInGraph",
+] as const;
+
+/** How much of a sha to show. Git's own default abbreviation. */
+const SHORT_SHA = 7;
+
+/**
+ * Escape the markdown a commit message or an author name would otherwise be
+ * read as. The character set is VS Code's own `escapeMarkdownSyntaxTokens`.
+ *
+ * `[` and `]` are the ones that matter most: without them a message reading
+ * `[click](command:…)` becomes a button in the hover.
+ *
+ * `<` and `>` are added to VS Code's set because the renderer does not leave an
+ * unknown tag alone — it strips the tag and keeps the text inside, so a message
+ * mentioning `<script>alert(1)</script>` displayed as `alert(1)`. Not a script
+ * that runs, but a commit message rewritten in the one view whose job is to
+ * show it verbatim. A backslash escape rather than an entity: `&lt;` would come
+ * back out literally, since `&` is not escaped here.
+ *
+ * Newlines are left alone; the message's own line breaks are wanted.
+ */
+export function escapeMarkdown(text: string): string {
+  return text.replace(/[\\`*_{}[\]()#+\-!<>]/g, (c) => `\\${c}`);
+}
+
+/** Initials for the avatar: first letters of the first and last word. */
+export function authorInitials(author: string): string {
+  const words = author.trim().split(/\s+/).filter(Boolean);
+  if (words.length === 0) return "?";
+  const first = words[0]![0]!;
+  const last = words.length > 1 ? words[words.length - 1]![0]! : "";
+  return (first + last).toUpperCase();
+}
+
+/**
+ * A stable colour per author, from VS Code's chart palette.
+ *
+ * Deliberately not a gravatar. Fetching one would send a hash of the
+ * committer's email to a third party on every hover, which a self-hosted tool
+ * must not do silently — the same reason the git graph's author chips are
+ * initials.
+ */
+const AVATAR_COLOURS = ["4E79A7", "F28E2B", "E15759", "76B7B2", "59A14F", "AF7AA1", "9C755F", "B07AA1"];
+
+export function authorColour(author: string): string {
+  let hash = 0;
+  for (let i = 0; i < author.length; i++) hash = (hash * 31 + author.charCodeAt(i)) | 0;
+  return AVATAR_COLOURS[Math.abs(hash) % AVATAR_COLOURS.length]!;
+}
+
+/**
+ * The avatar as an inline SVG data URI, sized 16×16 so it needs no HTML
+ * attributes to sit on the same line as the name.
+ *
+ * `charset=utf-8` matters: initials can be non-ASCII, and without it the
+ * browser decodes the percent-escapes as latin-1 and draws mojibake.
+ */
+export function avatarDataUri(author: string): string {
+  const svg =
+    `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">` +
+    `<circle cx="8" cy="8" r="8" fill="#${authorColour(author)}"/>` +
+    `<text x="8" y="11.5" font-family="sans-serif" font-size="7" font-weight="700" ` +
+    `fill="#ffffff" text-anchor="middle">${escapeXml(authorInitials(author))}</text></svg>`;
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+}
+
+function escapeXml(text: string): string {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+
+/** `command:id?["arg","arg"]`, percent-encoded as the opener expects. */
+function commandUri(command: (typeof BLAME_HOVER_COMMANDS)[number], args: unknown[]): string {
+  return `command:${command}?${encodeURIComponent(JSON.stringify(args))}`;
+}
+
+export interface BlameHoverOptions {
+  commit: BlameCommitInfo;
+  /** Null while the `git show` is still in flight, or when it found nothing. */
+  detail: BlameLineDetail | null;
+  /** Project-relative path of the open file, for the action links. */
+  filePath: string;
+  /** Absolute path of the project, which is what the git-graph commands take. */
+  projectPath?: string;
+  /** Parameter rather than the clock, so the wording is testable. */
+  now?: number;
+}
+
+/**
+ * The hover for a committed line.
+ *
+ * Returns null for an uncommitted line: there is no commit to describe, and the
+ * annotation already says "You, uncommitted changes".
+ */
+export function buildBlameHoverMarkdown(options: BlameHoverOptions): MonacoType.IMarkdownString | null {
+  const { commit, detail, filePath, projectPath, now = Date.now() } = options;
+  if (isUncommittedHash(commit.hash)) return null;
+
+  const author = commit.author || "Unknown";
+  const shortSha = commit.hash.slice(0, SHORT_SHA);
+  const lines: string[] = [];
+
+  // Row 1: avatar, author, and both readings of the date — "9 months ago" is
+  // what you want to know, the exact date is what you need to go looking.
+  const when = commit.authorTime > 0
+    ? `${formatRelativeTime(commit.authorTime * 1000, now)} (${formatAbsoluteTime(commit.authorTime * 1000)})`
+    : "";
+  lines.push(`![](${avatarDataUri(author)}) **${escapeMarkdown(author)}**${when ? ` &nbsp;$(history) ${escapeMarkdown(when)}` : ""}`);
+
+  // Row 2: the whole message, not just the summary the annotation shows.
+  const message = detail?.message || commit.summary;
+  if (message) {
+    lines.push("");
+    // A blank line inside the message would end the markdown paragraph and
+    // leave the body unindented; two trailing spaces make each line its own.
+    lines.push(escapeMarkdown(message).split("\n").join("  \n"));
+  }
+
+  // A rule between sections, as GitLens has. It must be preceded by a blank
+  // line: `text` then `---` on the next line is a setext heading in markdown,
+  // which would turn the last line of the commit message into a title.
+  const RULE = ["", "---", ""];
+
+  // Row 3: the sha, and the things PPM can actually do with it.
+  const actions = [
+    `[$(git-commit) ${shortSha}](${commandUri("ppm.blame.copySha", [commit.hash])} "Copy commit hash")`,
+  ];
+  // The Git Graph views are addressed by absolute project path. Without one the
+  // links would dispatch an empty first argument, which the extension reads as
+  // "resolve the project yourself" — so it might open a *different* project's
+  // history. Better to not offer the button.
+  if (projectPath) {
+    actions.push(
+      `[$(history) File History](${commandUri("ppm.blame.fileHistory", [projectPath, filePath])} "Open the file's history")`,
+      `[$(users) Blame](${commandUri("ppm.blame.blameFile", [projectPath, filePath])} "Open the blame view")`,
+      `[$(git-branch) Graph](${commandUri("ppm.blame.showInGraph", [projectPath])} "Open the commit graph")`,
+    );
+  }
+  lines.push(...RULE);
+  lines.push(actions.join(" &nbsp; "));
+
+  // Row 4: what this commit did to this line.
+  const diff = [...(detail?.removed ?? []).map((l) => `-${l}`), ...(detail?.added ?? []).map((l) => `+${l}`)];
+  if (diff.length > 0) {
+    lines.push(...RULE);
+    lines.push("```diff");
+    lines.push(...diff);
+    lines.push("```");
+    lines.push("");
+    // GitLens' wording, and the distinction is worth keeping: a line that only
+    // ever appeared in this commit reads differently from one it rewrote.
+    const verb = (detail?.removed.length ?? 0) === 0 ? "added in" : "in";
+    lines.push(`Changes ${verb} \`${shortSha}\``);
+  }
+
+  return {
+    value: lines.join("\n"),
+    // Narrowed on purpose. `true` here would let a commit message's own
+    // `command:` link run anything registered, and a commit message is not
+    // ours. See the module comment.
+    isTrusted: { enabledCommands: [...BLAME_HOVER_COMMANDS] },
+    supportThemeIcons: true,
+  };
+}

package/src/web/lib/chunk-recovery.ts

@@ -0,0 +1,113 @@
+/**
+ * Recovery for the one failure that empties the screen instead of reporting an
+ * error: a lazy chunk the running app asks for and cannot get.
+ *
+ * The chain, reproduced end to end. An upgrade replaces `dist/web` and Vite's
+ * `emptyOutDir` deletes the previous content hashes, so a tab that has been open
+ * across the upgrade asks for a chunk that is no longer on disk. `static.ts`
+ * used to answer that with the app shell — `200 text/html` — which a module load
+ * refuses on its strict MIME check; it now answers 404, but a 404 is still a
+ * rejected `import()`, which is a throw inside `React.lazy`. A throw with no
+ * boundary above it unmounts the whole tree: `#root` empties and the page is
+ * left showing nothing but the body's background.
+ *
+ * The service worker made it *permanent*. `CacheFirst` on `/assets/` had stored
+ * that `text/html` under the chunk's own URL, and content-hashed assets are
+ * never revalidated — so restoring the file on the server changed nothing and
+ * only `caches.delete("ppm-assets")` recovered the tab. `sw.ts` now refuses to
+ * store or serve HTML for an asset, but an install that already holds a poisoned
+ * entry has to be cleaned from the page, which is what this does before
+ * reloading.
+ *
+ * Reloading is allowed once per tab. A second failure means the chunk is
+ * genuinely unavailable, and a page that reloads itself forever is worse than
+ * one that says what happened.
+ */
+
+const RELOAD_KEY = "ppm:chunk-reload";
+
+/**
+ * Set once a recovery reload is on its way, and read by the `beforeunload`
+ * guard in `app.tsx`.
+ *
+ * That guard is unconditional while authenticated — it exists to catch a stray
+ * Ctrl+W — and `beforeunload` cannot tell who asked for the navigation. So the
+ * automatic recovery put a "Leave site?" dialog in front of the one reload the
+ * user never chose and cannot act on knowledgeably: the tab is already showing
+ * a broken app. Declining it leaves them there.
+ */
+let recoveryReloadPending = false;
+
+export function isRecoveryReloadPending(): boolean {
+  return recoveryReloadPending;
+}
+
+/**
+ * The wordings browsers use when a dynamic import does not produce a module.
+ * Chrome, Firefox and Safari each phrase it differently, and the MIME refusal
+ * is phrased differently again from a plain network failure.
+ */
+const CHUNK_ERROR =
+  /dynamically imported module|importing a module script failed|failed to load module script|error loading chunk|expected a javascript(-or-wasm)? module script/i;
+
+export function isChunkLoadError(error: unknown): boolean {
+  if (!error) return false;
+  const message = error instanceof Error ? `${error.name}: ${error.message}` : String(error);
+  return CHUNK_ERROR.test(message);
+}
+
+/** Drop the caches this app owns, so the next load asks the server again. */
+export async function purgeAssetCaches(): Promise<void> {
+  if (typeof caches === "undefined") return;
+  try {
+    const names = await caches.keys();
+    await Promise.all(names.filter((n) => n.startsWith("ppm-")).map((n) => caches.delete(n)));
+  } catch {
+    // A browser in private mode can refuse the Cache API outright. Reloading
+    // without the purge is still the right next move.
+  }
+}
+
+/** Purge and reload unconditionally — the button in the error boundary. */
+export async function purgeAndReload(): Promise<void> {
+  try {
+    sessionStorage.removeItem(RELOAD_KEY);
+  } catch {
+    // Nothing to clear; the reload below is what matters.
+  }
+  recoveryReloadPending = true;
+  await purgeAssetCaches();
+  window.location.reload();
+}
+
+/**
+ * Purge and reload at most once per tab. Returns whether a reload was started,
+ * so a caller can tell "recovering" from "this is as good as it gets".
+ */
+export function reloadOnceForChunkError(): boolean {
+  let already: boolean;
+  try {
+    already = sessionStorage.getItem(RELOAD_KEY) === "1";
+    sessionStorage.setItem(RELOAD_KEY, "1");
+  } catch {
+    // No storage means no way to count attempts, and an uncounted auto-reload
+    // is an infinite loop. Leave it to the boundary's button.
+    return false;
+  }
+  if (already) return false;
+  recoveryReloadPending = true;
+  void purgeAssetCaches().then(() => window.location.reload());
+  return true;
+}
+
+export function installChunkErrorRecovery(): void {
+  // Vite's preload helper dispatches this when a chunk, or one of the chunks it
+  // preloads, cannot be fetched. It is deliberately *not* `preventDefault`ed:
+  // cancelling the event makes the helper resolve with `undefined` rather than
+  // rethrow, and `React.lazy` then fails reading `.default` of undefined — an
+  // error that says nothing about what actually happened. The reload normally
+  // wins the race; when it does not, the boundary catches the real throw.
+  window.addEventListener("vite:preloadError", () => {
+    reloadOnceForChunkError();
+  });
+}

package/src/web/lib/editor-font.ts

@@ -0,0 +1,70 @@
+/**
+ * The fonts every code surface uses.
+ *
+ * A stack has to name a font per platform, because one that lists only
+ * `Menlo, Monaco, Consolas` resolves to *none* of them on Linux and silently
+ * falls through to generic `monospace` — whatever `fc-match monospace` happens
+ * to return, which is not a coding font and is the difference between looking
+ * like an editor and looking like a text box.
+ *
+ * The first entry of each stack is now bundled rather than hoped for
+ * (`main.tsx` imports the faces), so the fallbacks below it are only for a face
+ * that fails to load. Monaspace's five families share one set of metrics by
+ * design, which is what makes it safe to set ghost text in a different one from
+ * the code underneath: Monaco positions everything by column times character
+ * width, and a family with a different advance would slide out of the grid.
+ */
+
+/**
+ * Editor, diff panes and the conflict resolver.
+ *
+ * `Monaspace Argon Var` sits second on purpose. The bundled face is the Latin
+ * subset, and a `@font-face` shadows a system font of the same family name
+ * entirely — so on a host where the full Monaspace is installed, a Vietnamese
+ * comment would still fall per-glyph to the platform monospace while the right
+ * font sat unused. The variable build is installed under its own family name,
+ * so naming it separately picks up exactly the glyphs the subset lacks, in the
+ * same typeface.
+ */
+export const EDITOR_FONT_FAMILY =
+  "'Monaspace Argon', 'Monaspace Argon Var', Consolas, 'Cascadia Mono', Menlo, 'DejaVu Sans Mono', 'Courier New', monospace";
+
+/**
+ * Inline suggestions. A different face at the same metrics says "this is not
+ * your code yet" without moving a single character.
+ */
+export const GHOST_TEXT_FONT_FAMILY =
+  "'Monaspace Krypton', 'Monaspace Krypton Var', 'Monaspace Argon', Consolas, 'Cascadia Mono', Menlo, 'DejaVu Sans Mono', monospace";
+
+/**
+ * The terminal. MesloLGM Nerd Font first because a shell prompt is full of
+ * powerline separators and devicons that only a patched font has, and a fully
+ * patched local face is still the best answer: it draws the icons *and* the
+ * text in one typeface, at metrics that were fitted together.
+ *
+ * `PPM Nerd Symbols` sits behind those three and is bundled — the icons alone,
+ * `scripts/gen-nerd-font.ts`, split so each block is fetched only if drawn. It
+ * has no letters or digits at all, which is what makes its position here safe:
+ * ordinary text falls straight through it to Monaspace Argon, and only the icon
+ * codepoints stop at it. Without it, every prompt on a machine with no Nerd
+ * Font installed was tofu — `↑`/`↓` rendered and the rest did not, because
+ * those two are real Unicode and the segment icons are Private Use Area.
+ *
+ * It is ahead of Monaspace on purpose: the handful of icons in this set that
+ * *are* real Unicode (`⚡`, `♥`, `⏻`) belong with the rest of the prompt at one
+ * cell wide, not as whatever a fallback font draws them as.
+ */
+export const TERMINAL_FONT_FAMILY =
+  "'MesloLGM Nerd Font', 'MesloLGS Nerd Font', 'Symbols Nerd Font', 'PPM Nerd Symbols', 'Monaspace Argon', 'Monaspace Argon Var', Consolas, 'Cascadia Mono', Menlo, 'DejaVu Sans Mono', 'Courier New', monospace";
+
+/**
+ * Monaspace's ligatures plus every stylistic set, which is where its texture
+ * healing lives: `ss01`–`ss09` are what narrow an `i` next to an `m` so a run
+ * of `www.mmm.iii` stops looking like a picket fence. Monaco takes this string
+ * straight through to `font-feature-settings`.
+ */
+export const EDITOR_FONT_LIGATURES =
+  "'calt', 'liga', 'ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'ss07', 'ss08', 'ss09'";
+
+/** Editor font size. 14 to match the font's own optical size. */
+export const EDITOR_FONT_SIZE = 14;

package/src/web/lib/ext-command-dispatch.ts

@@ -0,0 +1,24 @@
+/**
+ * Dispatch an extension command with the path it should run in.
+ *
+ * Every dispatch site used to push `activeProject.path` inline. That is still
+ * the right argument for most extensions, but a git view has to be handed the
+ * *repository* — which in a container workspace is a subfolder the user picked,
+ * and running the graph in the container reports "not a git repository". The
+ * decision is one place rather than three, because a site that forgets it fails
+ * only for that one entry point and looks like the feature working "sometimes".
+ */
+import { commandRunsGit } from "@/lib/git-repo-scope";
+import { resolveGitRoot } from "@/stores/git-repo-store";
+import { useProjectStore } from "@/stores/project-store";
+
+export async function dispatchExtCommand(command: string): Promise<void> {
+  const project = useProjectStore.getState().activeProject;
+  const args: unknown[] = [];
+  if (project?.path) {
+    args.push(
+      commandRunsGit(command) ? await resolveGitRoot(project.name, project.path) : project.path,
+    );
+  }
+  window.dispatchEvent(new CustomEvent("ext:command:execute", { detail: { command, args } }));
+}