@hienlh/ppm 0.20.9 → 0.21.0

package/src/web/lib/tab-type-icons.ts

@@ -1,15 +1,18 @@
 /**
- * Shared tab-type → lucide icon map.
+ * Shared tab-type → icon map.
  *
  * Single source of truth so the mobile nav, dock header, and tab bar render the
  * same glyph per tab type. Adding a new panel tab type = one entry here, no
  * per-component change (extensibility invariant for the generalized dock).
  */
 import {
-  Terminal, MessageSquare, FileCode, Database, FileDiff, Settings, Puzzle, Sparkles, Users,
+  Terminal, MessageSquare, FileCode, Database, FileDiff, Settings, Puzzle, Sparkles, Users, CircleX,
+  GitCommitHorizontal,
   type LucideIcon,
-} from "lucide-react";
+} from "@/lib/icons";
+import type { ElementType } from "react";
 import type { TabType } from "@/stores/tab-store";
+import { fileIconElement } from "@/lib/file-icons";
 
 export const TAB_TYPE_ICONS: Record<TabType, LucideIcon> = {
   terminal: Terminal,
@@ -24,12 +27,37 @@ export const TAB_TYPE_ICONS: Record<TabType, LucideIcon> = {
   "extension-webview": Puzzle,
   "conflict-editor": FileDiff,
   "system-monitor": Settings,
-  "git-log": FileCode,
+  "git-log": GitCommitHorizontal,
   "ai-resource": Sparkles,
   group: Users,
+  problems: CircleX,
 };
 
 /** Resolve the icon for a tab type, falling back to a generic glyph. */
 export function getTabTypeIcon(type: TabType): LucideIcon {
   return TAB_TYPE_ICONS[type] ?? Puzzle;
 }
+
+/** The tab types whose title names a file rather than a kind of panel. */
+const FILE_TAB_TYPES = new Set<TabType>(["editor", "git-diff", "conflict-editor"]);
+
+export interface TabIconSubject {
+  type: TabType;
+  title: string;
+  metadata?: Record<string, unknown>;
+}
+
+/**
+ * A tab that holds a file is labelled with *that file's* icon, the way VS Code
+ * does it — a strip of eight identical `FileCode` glyphs tells you nothing about
+ * which tab is which, and that is just as true of the dock header and the mobile
+ * tab switcher as it is of the desktop strip. The tab's own metadata is
+ * preferred over its title, which a rename or a "(hash)" suffix can have edited.
+ */
+export function getTabIcon(tab: TabIconSubject): ElementType {
+  if (FILE_TAB_TYPES.has(tab.type)) {
+    const path = (tab.metadata?.filePath as string | undefined) || tab.title;
+    if (path) return fileIconElement(path);
+  }
+  return getTabTypeIcon(tab.type);
+}

package/src/web/main.tsx

@@ -1,6 +1,24 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { App } from "./app.tsx";
+import { RootErrorBoundary } from "./components/root-error-boundary.tsx";
+import { installChunkErrorRecovery } from "./lib/chunk-recovery.ts";
+// Self-hosted, because a font stack is only a wish list: -apple-system and
+// Segoe UI miss on Linux and a generic sans-serif can resolve to Liberation
+// *Serif* through fontconfig, so every surface named a font it never got. Each
+// face is a separate lazy request the browser only makes for text that uses it
+// — Geist by subset (the Vietnamese range is its own file), Monaspace only once
+// an editor or a terminal is on screen — and none of them are precached.
+import "@fontsource-variable/geist/wght.css";
+import "@fontsource-variable/geist/wght-italic.css";
+import "@fontsource/monaspace-argon/latin-400.css";
+import "@fontsource/monaspace-argon/latin-400-italic.css";
+import "@fontsource/monaspace-argon/latin-700.css";
+import "@fontsource/monaspace-krypton/latin-400.css";
+import "@fontsource/monaspace-krypton/latin-400-italic.css";
+// The terminal's icon glyphs, split per Nerd Fonts block so a powerline prompt
+// costs 7 KiB and only someone drawing a Material Design icon pays for those.
+import "./styles/nerd-font.generated.css";
 import "./styles/globals.css";
 import "katex/dist/katex.min.css";
 
@@ -21,8 +39,19 @@ if (typeof Node !== "undefined") {
   };
 }
 
+// Tells the boot watchdog in index.html that the module graph loaded, so it
+// stops watching. Everything past this point has React above it and a root
+// boundary to catch it; the watchdog is only for never getting here at all.
+(window as unknown as { __ppmEntryRan?: boolean }).__ppmEntryRan = true;
+
+// Before the first render, so a chunk that fails while the tree is still
+// mounting is caught too.
+installChunkErrorRecovery();
+
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <App />
+    <RootErrorBoundary>
+      <App />
+    </RootErrorBoundary>
   </StrictMode>,
 );

package/src/web/stores/git-repo-store.ts

@@ -0,0 +1,117 @@
+/**
+ * Which repository each project's git surfaces are pointed at.
+ *
+ * A workspace folder is often a container whose *children* are the
+ * repositories, and every git surface used to run `git` in the container and
+ * report "not a git repository" — which reads as PPM being broken rather than
+ * as the repositories being one level down. The server discovers them; this
+ * holds the answer and the user's choice.
+ *
+ * The choice is **device-local**, like `lspEnabled` and `mobileWordWrap` and
+ * for the same reason: a phone and a desktop may reasonably be looking at
+ * different services in the same workspace, and a server round-trip would make
+ * the last device to write win everywhere.
+ *
+ * The discovery result is cached per project because it costs a directory walk
+ * and half a dozen panels ask for it independently. `reload` is the escape
+ * hatch for "I just cloned something in there".
+ */
+import { create } from "zustand";
+import { api, projectUrl } from "@/lib/api-client";
+import { resolveRepo, type GitRepoDiscovery } from "@/lib/git-repo-scope";
+
+const STORAGE_KEY = "ppm-git-repo-choice";
+
+function loadChoices(): Record<string, string> {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return {};
+    const parsed = JSON.parse(raw) as unknown;
+    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return {};
+    const out: Record<string, string> = {};
+    for (const [key, value] of Object.entries(parsed as Record<string, unknown>)) {
+      if (typeof value === "string") out[key] = value;
+    }
+    return out;
+  } catch {
+    return {}; // private mode, or somebody's extension wrote junk into the key
+  }
+}
+
+function saveChoices(choices: Record<string, string>): void {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(choices));
+  } catch {
+    // Out of quota or blocked: the choice still applies for this session.
+  }
+}
+
+/** projectName → the discovery request in flight, so callers can await it. */
+const inflight = new Map<string, Promise<void>>();
+
+interface GitRepoStore {
+  /** projectName → what the server found. */
+  discovery: Record<string, GitRepoDiscovery>;
+  /** projectName → chosen repository path. */
+  chosen: Record<string, string>;
+  /** Fetch once per project unless `force`. */
+  load: (projectName: string, force?: boolean) => Promise<void>;
+  choose: (projectName: string, repoPath: string) => void;
+}
+
+export const useGitRepoStore = create<GitRepoStore>((set, get) => ({
+  discovery: {},
+  chosen: loadChoices(),
+
+  load: async (projectName, force = false) => {
+    if (!force && get().discovery[projectName]) return;
+    // The promise is shared, not just flagged: `resolveGitRoot` awaits this to
+    // answer, and a boolean "already loading" would have it return the
+    // unscoped path while the answer was one tick away.
+    const existing = inflight.get(projectName);
+    if (existing && !force) return existing;
+    const request = (async () => {
+      try {
+        const data = await api.get<GitRepoDiscovery>(`${projectUrl(projectName)}/git/repos`);
+        set((s) => ({ discovery: { ...s.discovery, [projectName]: data } }));
+      } catch {
+        // A project whose directory has gone, or an offline tab. Leaving the
+        // entry absent keeps the surfaces in their loading state rather than
+        // asserting "no repository here", which would be a guess.
+      }
+    })();
+    inflight.set(projectName, request);
+    // Cleared by identity, not unconditionally: a `force` reload puts a second
+    // request in the map while the first is still running, and the first one's
+    // own cleanup would then delete the *second* entry — after which a
+    // concurrent caller joins nothing and starts a third directory walk.
+    void request.finally(() => {
+      if (inflight.get(projectName) === request) inflight.delete(projectName);
+    });
+    return request;
+  },
+
+  choose: (projectName, repoPath) => {
+    set((s) => {
+      const chosen = { ...s.chosen, [projectName]: repoPath };
+      saveChoices(chosen);
+      return { chosen };
+    });
+  },
+}));
+
+/**
+ * The repository to hand an extension command, for callers outside React.
+ *
+ * The keybinding handler, the command palette and the webview's recovery
+ * dispatch all pass a path as the command's first argument, and none of them is
+ * in a position to use a hook. Discovery is awaited rather than sampled: these
+ * are one-shot dispatches, so reading a not-yet-loaded store would hand over
+ * the container folder and the panel would open on something that is not a
+ * repository.
+ */
+export async function resolveGitRoot(projectName: string, projectPath: string): Promise<string> {
+  await useGitRepoStore.getState().load(projectName);
+  const { discovery, chosen } = useGitRepoStore.getState();
+  return resolveRepo(discovery[projectName], chosen[projectName])?.path ?? projectPath;
+}

package/src/web/stores/git-status-store.ts

@@ -1,6 +1,7 @@
 import { useCallback, useEffect } from "react";
 import { create } from "zustand";
-import { api, projectUrl } from "@/lib/api-client";
+import { api } from "@/lib/api-client";
+import { useGitRepo } from "@/hooks/use-git-repo";
 import type { GitStatus } from "../../types/git";
 
 /** Git status letter for file tree decorations */
@@ -145,23 +146,25 @@ export function useGitChangesPoller(
   const setCount = useGitStatusStore((s) => s.setCount);
   const setFileStatuses = useGitStatusStore((s) => s.setFileStatuses);
   const setMeta = useGitStatusStore((s) => s.setMeta);
+  // The project folder is not always the repository — see `use-git-repo`.
+  const { repo, gitUrl, rebaseStatus } = useGitRepo(projectName);
 
   const poll = useCallback(async () => {
-    if (!projectName) return;
+    if (!projectName || !repo) return;
     try {
-      const data = await api.get<GitStatus>(
-        `${projectUrl(projectName)}/git/status`,
-      );
+      const data = await api.get<GitStatus>(gitUrl("/status"));
       setCount(
         projectName,
         data.staged.length + data.unstaged.length + data.untracked.length,
       );
-      setFileStatuses(projectName, data);
+      // The tree decorates nodes by project-relative path, and git answered in
+      // the repository's terms — which for a subfolder is one directory short.
+      setFileStatuses(projectName, rebaseStatus(data));
       setMeta(projectName, data);
     } catch {
       // Silently ignore — badge just keeps last-known value
     }
-  }, [projectName, setCount, setFileStatuses]);
+  }, [projectName, repo, gitUrl, rebaseStatus, setCount, setFileStatuses, setMeta]);
 
   useEffect(() => {
     if (skip) return;

package/src/web/stores/keybindings-store.ts

@@ -37,6 +37,7 @@ export const KEY_ACTIONS: KeyAction[] = [
   { id: "open-settings", label: "Open Settings", category: "tabs", defaultKey: "Mod+," },
   { id: "open-git-status", label: "Git Status (sidebar)", category: "tabs", defaultKey: "Mod+Shift+E" },
   { id: "open-search", label: "Search Files (sidebar)", category: "tabs", defaultKey: "Mod+Shift+F" },
+  { id: "open-problems", label: "Problems", category: "tabs", defaultKey: "Mod+Shift+M", note: "Errors and warnings across the open files, in the panel — VS Code's shortcut" },
   { id: "voice-input", label: "Voice Input", category: "general", defaultKey: "Mod+Shift+V", note: "Toggle speech-to-text in chat" },
   { id: "chat-nav-prev", label: "Previous Chat Message", category: "general", defaultKey: "Alt+ArrowUp", note: "Jump to your previous message in the visible chat transcript" },
   { id: "chat-nav-next", label: "Next Chat Message", category: "general", defaultKey: "Alt+ArrowDown", note: "Jump to your next message in the visible chat transcript" },

package/src/web/stores/panel-utils.ts

@@ -27,7 +27,7 @@ export const DOCK_PANEL_ID = "__dock__";
  * Enforced at load-time to prevent a crafted persisted blob from placing
  * arbitrary tab types in the privileged dock slot.
  */
-export const DOCK_ALLOWED_TAB_TYPES = new Set<TabType>(["terminal", "system-monitor"]);
+export const DOCK_ALLOWED_TAB_TYPES = new Set<TabType>(["terminal", "system-monitor", "problems"]);
 
 // ---------------------------------------------------------------------------
 // Floating-window panels
@@ -42,7 +42,7 @@ export const DOCK_ALLOWED_TAB_TYPES = new Set<TabType>(["terminal", "system-moni
  * context-menu item that offers it. Split across two files, adding a window kind meant
  * remembering both, and one of them was always the one that got forgotten.
  */
-export const NON_POPPABLE_TAB_TYPES = new Set<TabType>(["system-monitor", "settings"]);
+export const NON_POPPABLE_TAB_TYPES = new Set<TabType>(["system-monitor", "settings", "problems"]);
 
 /**
  * Prefix of the reserved panel IDs that host tabs detached into a floating window.
@@ -222,6 +222,9 @@ export function deriveTabId(type: TabType, metadata?: Record<string, unknown>):
       return `conflict-editor:${metadata?.filePath ?? "unknown"}`;
     case "settings":
       return "settings";
+    // One list of every problem, so a second open focuses the first.
+    case "problems":
+      return "problems";
     case "group":
       return `group:${metadata?.groupId ?? "unknown"}`;
     default:

package/src/web/stores/problems-store.ts

@@ -0,0 +1,116 @@
+/**
+ * Diagnostics from every open file, in one place.
+ *
+ * `useLsp` already turns a file's diagnostics into Monaco markers, which is
+ * what draws the squiggles. Those are per-model though, so nothing can answer
+ * "what is wrong in this project" — the question the Problems panel exists for.
+ * Each editor publishes here as well, and the panel reads the union.
+ *
+ * The scope is deliberately the files that are open. LSP publishes diagnostics
+ * per open document, so a closed file's problems are not something the server
+ * has told us about, and listing stale ones from a previous session would be
+ * worse than listing none.
+ */
+import { create } from "zustand";
+import type { LspDiagnostic } from "@/hooks/use-lsp";
+
+export interface FileProblems {
+  projectName: string;
+  /** Project-relative path. */
+  filePath: string;
+  diagnostics: LspDiagnostic[];
+}
+
+/** LSP severities, spelled out because the numbers are not self-explanatory. */
+export const SEVERITY_ERROR = 1;
+export const SEVERITY_WARNING = 2;
+
+interface ProblemsState {
+  /** Keyed by project and path, so two projects cannot collide on a filename. */
+  files: Record<string, FileProblems>;
+  publish: (projectName: string, filePath: string, diagnostics: LspDiagnostic[]) => void;
+  clear: (projectName: string, filePath: string) => void;
+}
+
+/**
+ * A project name can contain a space, so a space separator would let
+ * ("app b", "c.ts") and ("app", "b/c.ts") collide on one key. NUL cannot appear
+ * in either, and is written as an escape so it is visible in the source.
+ */
+export const problemKey = (projectName: string, filePath: string) => `${projectName}\u0000${filePath}`;
+
+export const useProblemsStore = create<ProblemsState>((set) => ({
+  files: {},
+
+  publish: (projectName, filePath, diagnostics) =>
+    set((state) => {
+      const key = problemKey(projectName, filePath);
+      // A file that has been fixed publishes an empty list. Dropping the entry
+      // rather than storing an empty one keeps the panel's "no problems" state
+      // honest and stops it listing files with nothing under them.
+      if (diagnostics.length === 0) {
+        if (!state.files[key]) return state;
+        const { [key]: _removed, ...rest } = state.files;
+        return { files: rest };
+      }
+      return { files: { ...state.files, [key]: { projectName, filePath, diagnostics } } };
+    }),
+
+  clear: (projectName, filePath) =>
+    set((state) => {
+      const key = problemKey(projectName, filePath);
+      if (!state.files[key]) return state;
+      const { [key]: _removed, ...rest } = state.files;
+      return { files: rest };
+    }),
+}));
+
+/**
+ * Only one project's files.
+ *
+ * Editor tabs from other projects stay mounted for keep-alive, so their
+ * language servers keep publishing and the store holds more than one project at
+ * a time. Every view of this data is project-scoped, like the rest of PPM.
+ */
+export function filesForProject(
+  files: Record<string, FileProblems>,
+  projectName: string | null,
+): Record<string, FileProblems> {
+  if (!projectName) return files;
+  return Object.fromEntries(
+    Object.entries(files).filter(([, file]) => file.projectName === projectName),
+  );
+}
+
+/** Totals across every open file, for the panel header and the tab badge. */
+export function problemCounts(files: Record<string, FileProblems>): { errors: number; warnings: number } {
+  let errors = 0;
+  let warnings = 0;
+  for (const file of Object.values(files)) {
+    for (const diagnostic of file.diagnostics) {
+      if (diagnostic.severity === SEVERITY_ERROR) errors++;
+      else if (diagnostic.severity === SEVERITY_WARNING) warnings++;
+    }
+  }
+  return { errors, warnings };
+}
+
+/**
+ * Files in a stable order, each with its diagnostics sorted by position.
+ *
+ * Sorted rather than left in arrival order: the panel is read top to bottom
+ * against the file, and a list that reshuffles whenever a server republishes
+ * cannot be used that way.
+ */
+export function sortedProblems(files: Record<string, FileProblems>): FileProblems[] {
+  return Object.values(files)
+    .map((file) => ({
+      ...file,
+      diagnostics: [...file.diagnostics].sort(
+        (a, b) =>
+          a.range.start.line - b.range.start.line ||
+          a.range.start.character - b.range.start.character,
+      ),
+    }))
+    .sort((a, b) => a.filePath.localeCompare(b.filePath));
+}

package/src/web/stores/settings-store.ts

@@ -34,6 +34,15 @@ interface SettingsState {
   /** GitLens-style annotation after the cursor's line in the code editor. */
   inlineBlame: boolean;
   wordWrap: boolean;
+  /** Word wrap on a phone-sized viewport. Device-local — see `persistDevicePref`. */
+  mobileWordWrap: boolean;
+  /**
+   * Run a language server for the open file. Off until asked, and device-local:
+   * one `typescript-language-server` was 854 MB resident, which is a reasonable
+   * thing to spend on a desktop and never a reasonable thing for a phone to
+   * turn on because a desktop did.
+   */
+  lspEnabled: boolean;
   tabWrap: boolean;
   editorTabStyle: EditorTabStyle;
   sidebarActiveTab: SidebarActiveTab;
@@ -70,6 +79,8 @@ interface SettingsState {
   setGitStatusViewMode: (mode: GitStatusViewMode) => void;
   toggleInlineBlame: () => void;
   toggleWordWrap: () => void;
+  toggleMobileWordWrap: () => void;
+  setLspEnabled: (enabled: boolean) => void;
   toggleTabWrap: () => void;
   setEditorTabStyle: (style: EditorTabStyle) => void;
   setSidebarActiveTab: (tab: SidebarActiveTab) => void;
@@ -96,6 +107,8 @@ interface PersistedSettings {
   gitStatusViewMode?: GitStatusViewMode;
   inlineBlame?: boolean;
   wordWrap?: boolean;
+  mobileWordWrap?: boolean;
+  lspEnabled?: boolean;
   tabWrap?: boolean;
   editorTabStyle?: EditorTabStyle;
   sidebarActiveTab?: SidebarActiveTab;
@@ -214,6 +227,20 @@ function persistUiPref(update: Partial<PersistedSettings>) {
   pushUiPrefsToServer(update);
 }
 
+/**
+ * Persist a pref to this device only.
+ *
+ * The server round-trip above exists so prefs survive an origin change, but it
+ * also means the last device to write wins everywhere. That is wrong for the
+ * prefs that answer "what can this screen afford": a desktop turning the
+ * language server on must not start one for the phone, and unwrapping lines on
+ * a 27-inch monitor must not unwrap them on a 6-inch one. Those stay local, and
+ * `applyServerUiPrefs` deliberately does not read them back.
+ */
+function persistDevicePref(update: Partial<PersistedSettings>) {
+  persistSettings(update);
+}
+
 /**
  * Push the current theme selection to the dedicated server endpoint.
  * Errors are swallowed, so callers may ignore the promise; awaiting it only
@@ -283,6 +310,8 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
   gitStatusViewMode: _initial.gitStatusViewMode === "flat" ? "flat" : "tree",
   inlineBlame: _initial.inlineBlame ?? false,
   wordWrap: _initial.wordWrap ?? false,
+  mobileWordWrap: _initial.mobileWordWrap ?? true,
+  lspEnabled: _initial.lspEnabled ?? false,
   tabWrap: _initial.tabWrap ?? false,
   editorTabStyle: (_initial.editorTabStyle === "boxed" || _initial.editorTabStyle === "pill") ? _initial.editorTabStyle : "default",
   sidebarActiveTab: isValidSidebarTab(_initial.sidebarActiveTab) ? _initial.sidebarActiveTab : "history",
@@ -407,6 +436,17 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
     set({ wordWrap: next });
   },
 
+  toggleMobileWordWrap: () => {
+    const next = !get().mobileWordWrap;
+    persistDevicePref({ mobileWordWrap: next });
+    set({ mobileWordWrap: next });
+  },
+
+  setLspEnabled: (enabled) => {
+    persistDevicePref({ lspEnabled: enabled });
+    set({ lspEnabled: enabled });
+  },
+
   toggleTabWrap: () => {
     const next = !get().tabWrap;
     persistUiPref({ tabWrap: next });

package/src/web/stores/tab-store.ts

@@ -17,7 +17,8 @@ export type TabType =
   | "system-monitor"
   | "git-log"
   | "ai-resource"
-  | "group";
+  | "group"
+  | "problems";
 
 export interface Tab {
   id: string;

package/src/web/stores/window-panel-persistence.ts

@@ -41,6 +41,7 @@ const POPPABLE_TAB_TYPES: Record<TabType, boolean> = {
   "git-log": true,
   "ai-resource": true,
   group: true,
+  problems: false,
 };
 
 export function isPoppableTabType(type: unknown): type is TabType {