@hienlh/ppm 0.21.0 → 0.22.1

package/src/web/stores/project-framework-store.ts

@@ -0,0 +1,82 @@
+/**
+ * Which framework's file-naming convention the active project follows.
+ *
+ * `app.service.ts` is a NestJS provider in one repository and an Angular
+ * service in another, and vscode-icons draws them differently. Upstream leaves
+ * that to the user — both sets of artwork ship `disabled: true` behind
+ * `vsicons.presets.nestjs` and `vsicons.presets.angular`, and they cannot both
+ * be on, because they claim the same six suffixes (`module`, `service`,
+ * `guard`, `pipe`, `interceptor`, `controller`). PPM already knows which
+ * project a tree belongs to, so it answers the question instead of asking it.
+ *
+ * The signal is one dependency in `package.json`, which is the only thing that
+ * actually settles it: a directory full of `*.module.ts` says nothing, and
+ * `nest-cli.json` is absent from plenty of Nest repositories that build with
+ * something else. Neither marker present means neither overlay, which is also
+ * what VS Code shows with no preset on — the plain TypeScript glyph.
+ *
+ * One fetch per project, cached for the session. A project whose `package.json`
+ * is missing or unparseable is cached as "neither" so a repository without one
+ * does not re-ask on every switch.
+ */
+import { create } from "zustand";
+import { api, projectUrl } from "@/lib/api-client";
+import type { IconFramework } from "@/lib/file-icons.generated";
+
+/** Checked in order, so a repository holding both is read as Nest. */
+const MARKERS: readonly (readonly [IconFramework, string])[] = [
+  ["nest", "@nestjs/core"],
+  ["angular", "@angular/core"],
+];
+
+const answered = new Map<string, IconFramework | null>();
+
+/**
+ * The project a fetch is in flight for.
+ *
+ * Module-level rather than read back off the project store, which would make
+ * the import cycle `project-store → this → project-store`. All it has to do is
+ * drop the answer to a project the user has already switched away from.
+ */
+let pending: string | null = null;
+
+interface ProjectFrameworkStore {
+  framework: IconFramework | null;
+  detect: (projectName: string | null) => void;
+}
+
+export const useProjectFrameworkStore = create<ProjectFrameworkStore>((set) => ({
+  framework: null,
+
+  detect: (projectName) => {
+    pending = projectName;
+    if (!projectName) {
+      set({ framework: null });
+      return;
+    }
+    if (answered.has(projectName)) {
+      set({ framework: answered.get(projectName) ?? null });
+      return;
+    }
+    // Neither overlay until the answer lands, rather than the previous
+    // project's: a Nest icon on an Angular file is worse than a plain one.
+    set({ framework: null });
+    api
+      .get<{ content: string }>(`${projectUrl(projectName)}/files/read?path=package.json`)
+      .then(({ content }) => {
+        const pkg = JSON.parse(content) as Record<string, Record<string, string> | undefined>;
+        const deps = { ...pkg.dependencies, ...pkg.devDependencies, ...pkg.peerDependencies };
+        return MARKERS.find(([, dep]) => dep in deps)?.[0] ?? null;
+      })
+      .catch(() => null)
+      .then((framework) => {
+        answered.set(projectName, framework);
+        if (pending === projectName) set({ framework });
+      });
+  },
+}));
+
+/** The overlay `FileIcon` should resolve names through, or `null` for neither. */
+export function useIconFramework(): IconFramework | null {
+  return useProjectFrameworkStore((s) => s.framework);
+}

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

@@ -1,6 +1,7 @@
 import { create } from "zustand";
 import { api, getAuthToken } from "@/lib/api-client";
 import { resizeImageToWebp } from "@/lib/resize-image";
+import { useProjectFrameworkStore } from "@/stores/project-framework-store";
 
 export interface Project {
   name: string;
@@ -207,6 +208,8 @@ export const useProjectStore = create<ProjectStore>((set, get) => ({
   setActiveProject: (project) => {
     touchRecent(project.name);
     set({ activeProject: project });
+    // Which naming convention the file icons resolve `.service.ts` through.
+    useProjectFrameworkStore.getState().detect(project.name);
   },
 
   addProject: async (path, name) => {
@@ -214,7 +217,10 @@ export const useProjectStore = create<ProjectStore>((set, get) => ({
     await get().fetchProjects();
     // Auto-select the newly added project
     const added = get().projects.find((p) => p.name === (name ?? project.name) || p.path === path);
-    if (added) set({ activeProject: added });
+    if (added) {
+      set({ activeProject: added });
+      useProjectFrameworkStore.getState().detect(added.name);
+    }
     return project;
   },
 

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

@@ -1,6 +1,13 @@
 import { create } from "zustand";
 import { getAuthToken } from "@/lib/api-client";
 import type { PpmTheme, PpmThemeMode, PpmThemeStyle } from "@/theme/types";
+import { parseQualityChoice, type QualityChoice } from "../../shared/remote-desktop-quality";
+import {
+  clampCustomFps, clampCustomQualityPercent,
+} from "../../shared/remote-desktop-custom-quality";
+import {
+  clampCustomScale, parseViewStyle, type ViewStyle,
+} from "@/components/remote-desktop/remote-desktop-view-style";
 
 export type GitStatusViewMode = "flat" | "tree";
 export type EditorTabStyle = "default" | "boxed" | "pill";
@@ -61,9 +68,60 @@ interface SettingsState {
   /** Hold a screen wake lock while any chat turn is running, so a propped-up tablet does not
    *  dim mid-answer. Defaults on; see `hooks/use-wake-lock.ts`. */
   keepScreenAwake: boolean;
+  /**
+   * Image quality rung to ask for on connect — RustDesk's three, or `"custom"`.
+   *
+   * It is a *ceiling*, not a pin: the session always adapts beneath it, so there is no `auto`
+   * arm to choose (`video_qos.rs`: "user set image quality => update to the maximum ratio").
+   *
+   * Device-local, for the same reason as `lspEnabled`: it answers "what can this link afford",
+   * and a desktop on a LAN must not choose "Good image quality" for a phone on mobile data.
+   * What comes back out of localStorage is untrusted the same way a rung off the wire is,
+   * hence `parseQualityChoice` below rather than a cast.
+   */
+  remoteDesktopQuality: QualityChoice;
+  /**
+   * How the remote screen is fitted into the viewer — RustDesk's three `ViewStyle`s.
+   *
+   * Device-local like the rung above, and for the same reason: `original` on a 3440×1440 host
+   * is a scrollable 1:1 view on a desktop and an unusable pinhole on a phone, so a choice made
+   * on one screen must not follow the user to the other.
+   */
+  remoteDesktopViewStyle: ViewStyle;
+  /** Zoom factor for `remoteDesktopViewStyle === "custom"` (RustDesk's 5%–1000%). */
+  remoteDesktopCustomScale: number;
+  /** Bitrate percentage for `remoteDesktopQuality === "custom"`. Not the ratio: 50 means
+   *  ratio 1.0 — see `remote-desktop-custom-quality.ts`. */
+  remoteDesktopCustomQualityPercent: number;
+  /** Frame rate for the custom rung (RustDesk's 5–120). */
+  remoteDesktopCustomFps: number;
+  /** RustDesk's "More" checkbox: raises the bitrate ceiling from 100% to 2000%. */
+  remoteDesktopCustomQualityMore: boolean;
+  /** Draw the host pointer into the captured frames. The grabber takes this at startup, so
+   *  changing it respawns ffmpeg (~400ms of held picture) — see `restartCapture`. */
+  remoteDesktopShowCursor: boolean;
+  /** Two-way clipboard sync. Off means Ctrl+V is forwarded to the host as a plain keystroke,
+   *  so the host pastes its *own* clipboard and nothing crosses the connection. */
+  remoteDesktopClipboardSync: boolean;
+  /**
+   * H.264 encoder to ask the host for, or null to take the host's own first choice.
+   *
+   * Device-local like the rest, which is also why the *server* re-checks it: this pref follows
+   * the browser, not the host, so the same phone reaching a second machine arrives asking for
+   * the first machine's GPU encoder.
+   */
+  remoteDesktopCodec: string | null;
   deviceName: string | null;
   version: string | null;
   tunnelActive: boolean;
+  setRemoteDesktopQuality: (choice: QualityChoice) => void;
+  setRemoteDesktopViewStyle: (style: ViewStyle) => void;
+  setRemoteDesktopCustomScale: (scale: number) => void;
+  setRemoteDesktopCustomQuality: (percent: number, fps: number) => void;
+  setRemoteDesktopCustomQualityMore: (more: boolean) => void;
+  setRemoteDesktopShowCursor: (show: boolean) => void;
+  setRemoteDesktopClipboardSync: (enabled: boolean) => void;
+  setRemoteDesktopCodec: (encoder: string | null) => void;
   setThemeStyle: (style: PpmThemeStyle) => void;
   setThemeMode: (mode: PpmThemeMode) => void;
   setCustomTheme: (id: string) => void;
@@ -120,6 +178,15 @@ interface PersistedSettings {
   remoteDesktopStatsVisible?: boolean;
   remoteDesktopWarningDismissed?: boolean;
   keepScreenAwake?: boolean;
+  remoteDesktopQuality?: QualityChoice;
+  remoteDesktopViewStyle?: ViewStyle;
+  remoteDesktopCustomScale?: number;
+  remoteDesktopCustomQualityPercent?: number;
+  remoteDesktopCustomFps?: number;
+  remoteDesktopCustomQualityMore?: boolean;
+  remoteDesktopShowCursor?: boolean;
+  remoteDesktopClipboardSync?: boolean;
+  remoteDesktopCodec?: string | null;
 }
 
 const VALID_STYLES: PpmThemeStyle[] = ["aurora", "slate", "precision", "custom"];
@@ -310,6 +377,19 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
   gitStatusViewMode: _initial.gitStatusViewMode === "flat" ? "flat" : "tree",
   inlineBlame: _initial.inlineBlame ?? false,
   wordWrap: _initial.wordWrap ?? false,
+  remoteDesktopQuality: parseQualityChoice(_initial.remoteDesktopQuality),
+  remoteDesktopViewStyle: parseViewStyle(_initial.remoteDesktopViewStyle),
+  remoteDesktopCustomScale: clampCustomScale(_initial.remoteDesktopCustomScale),
+  // `More` is read first: it decides the ceiling the percentage is clamped to, so clamping in
+  // the other order would silently cut a stored 500% back to 100% on every reload.
+  remoteDesktopCustomQualityMore: _initial.remoteDesktopCustomQualityMore ?? false,
+  remoteDesktopCustomQualityPercent: clampCustomQualityPercent(
+    _initial.remoteDesktopCustomQualityPercent, _initial.remoteDesktopCustomQualityMore ?? false,
+  ),
+  remoteDesktopCustomFps: clampCustomFps(_initial.remoteDesktopCustomFps),
+  remoteDesktopShowCursor: _initial.remoteDesktopShowCursor ?? true,
+  remoteDesktopClipboardSync: _initial.remoteDesktopClipboardSync ?? true,
+  remoteDesktopCodec: typeof _initial.remoteDesktopCodec === "string" ? _initial.remoteDesktopCodec : null,
   mobileWordWrap: _initial.mobileWordWrap ?? true,
   lspEnabled: _initial.lspEnabled ?? false,
   tabWrap: _initial.tabWrap ?? false,
@@ -447,6 +527,54 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
     set({ lspEnabled: enabled });
   },
 
+  setRemoteDesktopQuality: (choice) => {
+    persistDevicePref({ remoteDesktopQuality: choice });
+    set({ remoteDesktopQuality: choice });
+  },
+
+  setRemoteDesktopViewStyle: (style) => {
+    persistDevicePref({ remoteDesktopViewStyle: style });
+    set({ remoteDesktopViewStyle: style });
+  },
+
+  setRemoteDesktopCustomScale: (scale) => {
+    const next = clampCustomScale(scale);
+    persistDevicePref({ remoteDesktopCustomScale: next });
+    set({ remoteDesktopCustomScale: next });
+  },
+
+  setRemoteDesktopCustomQuality: (percent, fps) => {
+    const next = {
+      remoteDesktopCustomQualityPercent: clampCustomQualityPercent(percent, get().remoteDesktopCustomQualityMore),
+      remoteDesktopCustomFps: clampCustomFps(fps),
+    };
+    persistDevicePref(next);
+    set(next);
+  },
+
+  setRemoteDesktopCustomQualityMore: (more) => {
+    // Turning it off has to re-clamp: a 500% left over from when it was on is out of range.
+    const percent = clampCustomQualityPercent(get().remoteDesktopCustomQualityPercent, more);
+    const next = { remoteDesktopCustomQualityMore: more, remoteDesktopCustomQualityPercent: percent };
+    persistDevicePref(next);
+    set(next);
+  },
+
+  setRemoteDesktopShowCursor: (show) => {
+    persistDevicePref({ remoteDesktopShowCursor: show });
+    set({ remoteDesktopShowCursor: show });
+  },
+
+  setRemoteDesktopClipboardSync: (enabled) => {
+    persistDevicePref({ remoteDesktopClipboardSync: enabled });
+    set({ remoteDesktopClipboardSync: enabled });
+  },
+
+  setRemoteDesktopCodec: (encoder) => {
+    persistDevicePref({ remoteDesktopCodec: encoder });
+    set({ remoteDesktopCodec: encoder });
+  },
+
   toggleTabWrap: () => {
     const next = !get().tabWrap;
     persistUiPref({ tabWrap: next });

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

@@ -10,6 +10,7 @@ export type TabType =
   | "sqlite"
   | "postgres"
   | "git-diff"
+  | "branch-review"
   | "settings"
   | "extension"
   | "extension-webview"

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

@@ -33,6 +33,7 @@ const POPPABLE_TAB_TYPES: Record<TabType, boolean> = {
   sqlite: true,
   postgres: true,
   "git-diff": true,
+  "branch-review": true,
   settings: false,
   extension: true,
   "extension-webview": true,