@hienlh/ppm 0.17.57 → 0.18.1

package/src/web/components/ui/adaptive-context-menu.tsx

@@ -7,6 +7,7 @@
  * Same component names, same API — behavior adapts automatically.
  */
 import React, { useState, useRef, useCallback, type ReactNode } from "react";
+import { CircleIcon } from "lucide-react";
 import * as Radix from "./context-menu";
 import { useIsMobile } from "@/hooks/use-is-mobile";
 import { cn } from "@/lib/utils";
@@ -19,10 +20,15 @@ import {
   BottomSheetSubContent,
 } from "./mobile-bottom-sheet";
 
-const LONG_PRESS_MS = 500;
+// Shared with the desktop-width coarse-pointer path (use-coarse-long-press.ts) — both must
+// agree so a synthetic contextmenu fired early isn't swallowed by this trigger's own timer.
+const LONG_PRESS_MS = 400;
 
 const IsMobileCtx = React.createContext(false);
 
+/** Carries a radio group's active value/setter down to its flattened mobile items. */
+const RadioGroupCtx = React.createContext<{ value?: string; onValueChange?(value: string): void }>({});
+
 /* ------------------------------------------------------------------ */
 /*  Root                                                               */
 /* ------------------------------------------------------------------ */
@@ -187,6 +193,54 @@ function ContextMenuSeparator({
   return <BottomSheetSeparator className={className} />;
 }
 
+/* ------------------------------------------------------------------ */
+/*  Radio group / item (flattened to a checkable list on mobile)      */
+/* ------------------------------------------------------------------ */
+
+function ContextMenuRadioGroup({
+  value,
+  onValueChange,
+  children,
+  ...props
+}: React.ComponentProps<typeof Radix.ContextMenuRadioGroup>) {
+  const isMobile = React.useContext(IsMobileCtx);
+  if (!isMobile) {
+    return (
+      <Radix.ContextMenuRadioGroup value={value} onValueChange={onValueChange} {...props}>
+        {children}
+      </Radix.ContextMenuRadioGroup>
+    );
+  }
+  return <RadioGroupCtx.Provider value={{ value, onValueChange }}>{children}</RadioGroupCtx.Provider>;
+}
+
+function ContextMenuRadioItem({
+  value,
+  children,
+  className,
+  ...props
+}: React.ComponentProps<typeof Radix.ContextMenuRadioItem>) {
+  const isMobile = React.useContext(IsMobileCtx);
+  // Both contexts are read unconditionally so the hook order stays stable when
+  // the viewport crosses the mobile breakpoint while a menu is mounted.
+  const { value: active, onValueChange } = React.useContext(RadioGroupCtx);
+  if (!isMobile) {
+    return (
+      <Radix.ContextMenuRadioItem value={value} className={className} {...props}>
+        {children}
+      </Radix.ContextMenuRadioItem>
+    );
+  }
+  return (
+    <BottomSheetItem className={className} onClick={() => onValueChange?.(value)}>
+      <span className="flex size-4 shrink-0 items-center justify-center">
+        {active === value && <CircleIcon className="size-2 fill-current" />}
+      </span>
+      {children}
+    </BottomSheetItem>
+  );
+}
+
 /* ------------------------------------------------------------------ */
 /*  Sub-menu (flattened on mobile)                                     */
 /* ------------------------------------------------------------------ */
@@ -239,6 +293,8 @@ export {
   ContextMenuContent,
   ContextMenuItem,
   ContextMenuSeparator,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
   ContextMenuSub,
   ContextMenuSubTrigger,
   ContextMenuSubContent,

package/src/web/components/ui/feature-badge.tsx

@@ -0,0 +1,40 @@
+import { cn } from "@/lib/utils";
+import { getFeatureBadge, type FeatureBadgeId } from "@/lib/feature-badges";
+
+/**
+ * Renders the "new" / "beta" pill for a feature registered in
+ * `src/web/lib/feature-badges.ts`; renders nothing for untagged features, so
+ * call sites can pass an optional id without branching.
+ *
+ * - `corner`: absolutely positioned over an icon button (nav rail, bottom bar).
+ * - `inline`: flows after a text label (sheet rows, panel headers).
+ */
+export function FeatureBadge({
+  id,
+  variant = "inline",
+  className,
+}: {
+  id: FeatureBadgeId | undefined;
+  variant?: "corner" | "inline";
+  className?: string;
+}) {
+  const kind = getFeatureBadge(id);
+  if (!kind) return null;
+  // "new" uses the success tone so it reads differently from the caution-toned beta pill.
+  const tone = kind === "new" ? "bg-success/15 text-success" : "bg-accent-wash text-primary";
+  return (
+    <span
+      aria-label={kind}
+      className={cn(
+        "rounded-full font-bold uppercase tracking-wide",
+        variant === "corner"
+          ? "absolute -top-0.5 -right-0.5 px-1 text-[7px] leading-[1.4] shadow-sm"
+          : "px-1.5 py-px text-[9px] font-semibold leading-[1.4]",
+        tone,
+        className,
+      )}
+    >
+      {kind}
+    </span>
+  );
+}

package/src/web/components/ui/file-browser-picker.tsx

@@ -11,6 +11,7 @@ import {
   Download, ChevronRight, ArrowLeft, Search, Loader2, Clock, Eye, EyeOff,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { formatRelativeTime, formatSize } from "@/components/os-explorer/format-file-meta";
 
 // ── Types ──────────────────────────────────────────────────────────
 
@@ -60,24 +61,6 @@ function saveRecent(dirPath: string): void {
   localStorage.setItem(RECENT_KEY, JSON.stringify(updated));
 }
 
-function formatSize(bytes?: number): string {
-  if (bytes == null) return "";
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-}
-
-function formatRelativeTime(iso: string): string {
-  const diff = Date.now() - new Date(iso).getTime();
-  const mins = Math.floor(diff / 60000);
-  if (mins < 1) return "now";
-  if (mins < 60) return `${mins}m ago`;
-  const hrs = Math.floor(mins / 60);
-  if (hrs < 24) return `${hrs}h ago`;
-  const days = Math.floor(hrs / 24);
-  return `${days}d ago`;
-}
-
 function fileIcon(entry: BrowseEntry): React.ReactNode {
   if (entry.type === "directory") return <Folder className="size-4 text-primary" />;
   const ext = entry.name.split(".").pop()?.toLowerCase();

package/src/web/lib/feature-badges.ts

@@ -0,0 +1,22 @@
+/**
+ * Single source of truth for "new" / "beta" feature tags shown in the UI.
+ *
+ * Add a feature here to tag it everywhere it is rendered with <FeatureBadge id>;
+ * delete the line to retire the tag. Nothing else in the codebase hardcodes
+ * these labels, so this file is the whole answer to "what is tagged right now?".
+ */
+export type FeatureBadgeKind = "new" | "beta";
+
+export const FEATURE_BADGES = {
+  /** Multi-agent group chat (Teams sidebar tab). */
+  teams: "beta",
+  /** Floating OS-style file explorer window / mobile sheet, shipped in 0.18.0. */
+  "os-explorer": "new",
+} as const satisfies Record<string, FeatureBadgeKind>;
+
+export type FeatureBadgeId = keyof typeof FEATURE_BADGES;
+
+/** Returns the tag kind for a feature, or undefined when the feature is untagged. */
+export function getFeatureBadge(id: FeatureBadgeId | undefined): FeatureBadgeKind | undefined {
+  return id ? FEATURE_BADGES[id] : undefined;
+}

package/src/web/lib/file-download.ts

@@ -1,24 +1,26 @@
 import { api, projectUrl } from "./api-client";
+import { basename } from "./utils";
 
 /** Trigger browser-native file download via hidden <a> tag */
 export async function downloadFile(projectName: string, filePath: string): Promise<void> {
   // Absolute paths (external files opened from filesystem browser) use /api/fs routes
   const isAbsolute = /^(\/|[A-Za-z]:[/\\])/.test(filePath);
   if (isAbsolute) {
-    const { token } = await api.post<{ token: string }>("/api/fs/download/token");
+    // The token is issued for this exact file and spent on first use.
+    const { token } = await api.post<{ token: string }>("/api/fs/download/token", { path: filePath });
     const url = `/api/fs/raw?path=${encodeURIComponent(filePath)}&download=true&dl_token=${encodeURIComponent(token)}`;
-    triggerDownload(url, filePath.split("/").pop() ?? "download");
+    triggerDownload(url, basename(filePath));
     return;
   }
   const { token } = await api.post<{ token: string }>(`${projectUrl(projectName)}/files/download/token`);
   const url = `${projectUrl(projectName)}/files/raw?path=${encodeURIComponent(filePath)}&download=true&dl_token=${encodeURIComponent(token)}`;
-  triggerDownload(url, filePath.split("/").pop() ?? "download");
+  triggerDownload(url, basename(filePath));
 }
 
 /** Trigger browser-native folder zip download */
 export async function downloadFolder(projectName: string, folderPath: string): Promise<void> {
   const { token } = await api.post<{ token: string }>(`${projectUrl(projectName)}/files/download/token`);
-  const folderName = folderPath.split("/").pop() ?? "folder";
+  const folderName = basename(folderPath) || "folder";
   const url = `${projectUrl(projectName)}/files/download/zip?path=${encodeURIComponent(folderPath)}&dl_token=${encodeURIComponent(token)}`;
   triggerDownload(url, `${folderName}.zip`);
 }

package/src/web/lib/fs-api.ts

@@ -0,0 +1,185 @@
+/**
+ * Typed client for the host-filesystem routes (`/api/fs/*`).
+ *
+ * It does not go through `ApiClient` on purpose: that wrapper collapses an error body
+ * into `new Error(json.error)` and drops `code`/`hint`, but the explorer's whole error
+ * UX is driven by those codes — `EEXIST` opens the collision prompt, `NO_TRASH` offers a
+ * permanent delete, `EPROTECTED`/`EDENIED` render the server's remediation hint.
+ */
+
+import { getAuthToken } from "./api-client";
+
+export type FsEntryKind = "file" | "directory" | "symlink" | "unknown";
+
+export interface FsEntry {
+  name: string;
+  path: string;
+  /** Coarse type used for sorting and open behaviour. */
+  type: "file" | "directory";
+  kind: FsEntryKind;
+  size?: number;
+  modified: string;
+}
+
+export interface FsBreadcrumb {
+  name: string;
+  path: string;
+}
+
+export interface FsBrowseResult {
+  entries: FsEntry[];
+  current: string;
+  parent: string | null;
+  breadcrumbs: FsBreadcrumb[];
+  /** Host path separator — the client never guesses it. */
+  sep: string;
+  /** True when the directory held more entries than the server's listing cap. */
+  truncated?: boolean;
+}
+
+export interface FsStatResult {
+  path: string;
+  name: string;
+  kind: FsEntryKind;
+  size: number;
+  mtime: string;
+  ctime: string;
+  birthtime: string;
+  mode: number;
+  readonly: boolean;
+  isHidden: boolean;
+  target?: string;
+  childCount?: number;
+  truncated?: boolean;
+}
+
+export interface FsDeleteResult {
+  removed: string;
+  trashed: boolean;
+  permanent: boolean;
+}
+
+/** A failed `/api/fs` call, carrying the server's machine-readable reason. */
+export class FsError extends Error {
+  constructor(
+    message: string,
+    readonly code: string,
+    readonly status: number,
+    readonly hint?: string,
+  ) {
+    super(message);
+    this.name = "FsError";
+  }
+}
+
+interface ErrorBody {
+  error?: string;
+  code?: string;
+  hint?: string;
+}
+
+async function request<T>(
+  path: string,
+  init: RequestInit & { signal?: AbortSignal } = {},
+): Promise<T> {
+  const token = getAuthToken();
+  const headers: Record<string, string> = {
+    "Content-Type": "application/json",
+    "x-ppm-client": "web",
+  };
+  if (token) headers.Authorization = `Bearer ${token}`;
+
+  const res = await fetch(path, { ...init, headers: { ...headers, ...init.headers } });
+
+  let json: { ok?: boolean; data?: T } & ErrorBody;
+  try {
+    json = await res.json();
+  } catch {
+    throw new FsError(
+      res.ok ? "Empty response from server" : `Server error (HTTP ${res.status})`,
+      "EUNKNOWN",
+      res.status,
+    );
+  }
+
+  if (!res.ok || json.ok === false) {
+    throw new FsError(
+      json.error ?? `HTTP ${res.status}`,
+      json.code ?? "EUNKNOWN",
+      res.status,
+      json.hint,
+    );
+  }
+  return json.data as T;
+}
+
+const body = (value: unknown) => JSON.stringify(value);
+const q = encodeURIComponent;
+
+export const fsApi = {
+  browse(path: string, opts: { showHidden?: boolean; signal?: AbortSignal } = {}) {
+    const hidden = opts.showHidden ? "&showHidden=true" : "";
+    return request<FsBrowseResult>(`/api/fs/browse?path=${q(path)}${hidden}`, {
+      signal: opts.signal,
+    });
+  },
+
+  stat(path: string, signal?: AbortSignal) {
+    return request<FsStatResult>(`/api/fs/stat?path=${q(path)}`, { signal });
+  },
+
+  /** `destination` is the full target path, not the containing directory. */
+  copy(source: string, destination: string) {
+    return request<{ source: string; destination: string }>("/api/fs/copy", {
+      method: "POST",
+      body: body({ source, destination }),
+    });
+  },
+
+  move(source: string, destination: string) {
+    return request<{ source: string; destination: string; crossDevice: boolean }>("/api/fs/move", {
+      method: "POST",
+      body: body({ source, destination }),
+    });
+  },
+
+  /** `newName` is a bare name — the server rejects anything containing a separator. */
+  rename(path: string, newName: string) {
+    return request<{ from: string; to: string }>("/api/fs/rename", {
+      method: "POST",
+      body: body({ path, newName }),
+    });
+  },
+
+  touch(path: string) {
+    return request<{ path: string }>("/api/fs/touch", {
+      method: "POST",
+      body: body({ path }),
+    });
+  },
+
+  /** `gitInit` defaults to true server-side; the explorer never wants that. */
+  mkdir(path: string, gitInit = false) {
+    return request<{ path: string; gitInitialized: boolean }>("/api/fs/mkdir", {
+      method: "POST",
+      body: body({ path, gitInit }),
+    });
+  },
+
+  /** Moves to the OS trash unless `permanent` is set. */
+  remove(path: string, permanent = false) {
+    return request<FsDeleteResult>("/api/fs/delete", {
+      method: "DELETE",
+      body: body({ path, permanent }),
+    });
+  },
+
+  /** Single-use, path-bound download URL. The token is spent by the first request. */
+  async downloadUrl(path: string): Promise<string> {
+    const { token } = await request<{ token: string }>("/api/fs/download/token", {
+      method: "POST",
+      body: body({ path }),
+    });
+    return `/api/fs/raw?path=${q(path)}&download=true&dl_token=${q(token)}`;
+  },
+};

package/src/web/lib/sidebar-tabs/tab-registry.ts

@@ -2,6 +2,7 @@ import {
   FolderOpen, GitBranch, Settings, Database, Search, Puzzle, Bug, Sparkles, BotMessageSquare, Globe, Users,
 } from "lucide-react";
 import type { SidebarActiveTab } from "@/stores/settings-store";
+import type { FeatureBadgeId } from "@/lib/feature-badges";
 import type { ExtensionContributes } from "../../../types/extension";
 
 export type SidebarTabId = SidebarActiveTab;
@@ -13,8 +14,8 @@ export interface SidebarTabDef {
   /** Compact label for the mobile bottom bar; falls back to `label`. */
   shortLabel?: string;
   icon: React.ElementType;
-  /** Marks the tab's feature as beta — renders a small "beta" tag on the rail + mobile bar. */
-  beta?: boolean;
+  /** Feature tag ("new"/"beta") looked up in `lib/feature-badges.ts`; rendered on the rail + mobile bar. */
+  badge?: FeatureBadgeId;
 }
 
 /**
@@ -24,7 +25,7 @@ export interface SidebarTabDef {
  */
 export const BUILTIN_SIDEBAR_TABS: SidebarTabDef[] = [
   { id: "history", label: "Chat History", shortLabel: "History", icon: BotMessageSquare },
-  { id: "teams", label: "Teams", icon: Users, beta: true },
+  { id: "teams", label: "Teams", icon: Users, badge: "teams" },
   { id: "explorer", label: "Explorer", icon: FolderOpen },
   { id: "search", label: "Search", icon: Search },
   { id: "git", label: "Git", icon: GitBranch },

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

@@ -27,10 +27,47 @@ export interface InlineAction {
   existingNode?: FileNode;
 }
 
-/** Clipboard state for cut/copy/paste */
+/**
+ * Clipboard state for cut/copy/paste, shared by the project tree and the file explorer
+ * windows.
+ *
+ * Paths are absolute. The two surfaces address files differently — the tree uses
+ * project-relative paths, the explorer host-absolute ones — and a clipboard that spoke
+ * either dialect could not be pasted across. Absolute is the only representation both can
+ * always resolve. `origin` lets the tree recognise its own entries and keep using the
+ * project-scoped routes for a purely internal paste.
+ */
 export interface ClipboardState {
   paths: string[];
   operation: "cut" | "copy";
+  origin?: { projectName: string; root: string };
+}
+
+/**
+ * Absolute host path for a project-relative path.
+ *
+ * The project API always returns relative segments joined with "/", but the composed
+ * result must use the *host's* separator — a hardcoded "/" on a Windows root produced a
+ * mixed-separator path (`C:\Users\PC\ppm/src/a.ts`) that neither matched an explorer
+ * window's own absolute paths (cut-row highlight) nor split correctly under
+ * `lastIndexOf(sep)` (source-directory derivation for cross-window refresh). The
+ * separator is read straight off `root` — a Windows root always contains at least one
+ * backslash — rather than threading host-info through every caller.
+ */
+export function absoluteProjectPath(root: string, relative: string): string {
+  if (!relative) return root;
+  const sep = root.includes("\\") ? "\\" : "/";
+  const relativeNative = sep === "\\" ? relative.replace(/\//g, "\\") : relative;
+  return root.endsWith(sep) ? `${root}${relativeNative}` : `${root}${sep}${relativeNative}`;
+}
+
+/** Project-relative path for an absolute one, or null when it lies outside the project. */
+export function relativeProjectPath(root: string, absolute: string): string | null {
+  const normalise = (p: string) => p.replace(/\\/g, "/").replace(/\/+$/, "");
+  const base = normalise(root);
+  const target = normalise(absolute);
+  if (target === base) return "";
+  return target.startsWith(`${base}/`) ? target.slice(base.length + 1) : null;
 }
 
 interface FileStore {

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

@@ -6,6 +6,8 @@ export type GitStatusViewMode = "flat" | "tree";
 export type EditorTabStyle = "default" | "boxed" | "pill";
 /** Where the panel dock sits relative to the main content (VS Code-style). Per-user pref. */
 export type DockPosition = "left" | "bottom" | "right";
+/** OS Explorer window chrome — "auto" follows the host `platform` (Linux → macOS look). */
+export type ExplorerSkinPref = "auto" | "windows" | "macos";
 export type SidebarActiveTab = "explorer" | "git" | "settings" | "database" | "search" | "jira" | "ai-resources" | "history" | "tunnels" | "teams" | `ext:${string}`;
 
 /** Expanded nodes of the Database sidebar tree. Table keys are `${connId}:${schema}.${table}`. */
@@ -36,6 +38,7 @@ interface SettingsState {
   jiraEnabled: boolean;
   dockPosition: DockPosition;
   dbSidebarExpanded: DbSidebarExpanded;
+  explorerSkin: ExplorerSkinPref;
   deviceName: string | null;
   version: string | null;
   tunnelActive: boolean;
@@ -59,6 +62,7 @@ interface SettingsState {
   setSidebarTabOrder: (order: SidebarActiveTab[]) => void;
   setDockPosition: (position: DockPosition) => void;
   setDbSidebarExpanded: (next: DbSidebarExpanded) => void;
+  setExplorerSkin: (pref: ExplorerSkinPref) => void;
   fetchServerInfo: () => Promise<void>;
   /** Re-push the in-memory theme selection to the server (see the action for why). */
   syncThemeToServer: () => Promise<void>;
@@ -81,6 +85,7 @@ interface PersistedSettings {
   jiraEnabled?: boolean;
   dockPosition?: DockPosition;
   dbSidebarExpanded?: DbSidebarExpanded;
+  explorerSkin?: ExplorerSkinPref;
 }
 
 const VALID_STYLES: PpmThemeStyle[] = ["aurora", "slate", "precision", "custom"];
@@ -230,6 +235,9 @@ function applyServerUiPrefs(data: Record<string, unknown>) {
   if (data.dockPosition === "left" || data.dockPosition === "bottom" || data.dockPosition === "right") {
     patch.dockPosition = data.dockPosition;
   }
+  if (data.explorerSkin === "auto" || data.explorerSkin === "windows" || data.explorerSkin === "macos") {
+    patch.explorerSkin = data.explorerSkin;
+  }
   const dbExpanded = sanitizeDbExpanded(data.dbSidebarExpanded);
   if (dbExpanded) patch.dbSidebarExpanded = dbExpanded;
   if (Object.keys(patch).length === 0) return;
@@ -256,6 +264,7 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
   jiraEnabled: _initial.jiraEnabled ?? false,
   dockPosition: (_initial.dockPosition === "left" || _initial.dockPosition === "right") ? _initial.dockPosition : "bottom",
   dbSidebarExpanded: sanitizeDbExpanded(_initial.dbSidebarExpanded) ?? DEFAULT_DB_EXPANDED,
+  explorerSkin: (_initial.explorerSkin === "windows" || _initial.explorerSkin === "macos") ? _initial.explorerSkin : "auto",
   deviceName: null,
   version: null,
   tunnelActive: false,
@@ -396,6 +405,11 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
     set({ dbSidebarExpanded: clean });
   },
 
+  setExplorerSkin: (pref) => {
+    persistUiPref({ explorerSkin: pref });
+    set({ explorerSkin: pref });
+  },
+
   fetchServerInfo: async () => {
     try {
       const token = getAuthToken();

package/src/web/styles/globals.css

@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@import "../components/os-explorer/skins/skins.css";
 
 /* Only apply hover-dependent styles when device has real pointer (mouse/trackpad) */
 @custom-variant can-hover (@media (hover: hover) and (pointer: fine));

package/dist/web/assets/api-client-RtNXvS0P.js

@@ -1 +0,0 @@
-import"./vendor-markdown-CKTlmXbz.js";import"./vendor-ui-DMRGWRuc.js";import{i as e,n as t}from"./api-client-COQtP-dB.js";export{t as api,e as projectUrl};

package/dist/web/assets/api-settings-De--HNHp.js

@@ -1 +0,0 @@
-import"./vendor-markdown-CKTlmXbz.js";import"./vendor-ui-DMRGWRuc.js";import"./api-client-COQtP-dB.js";import{v as e}from"./api-settings-Do0Z0IRN.js";export{e as updateDeviceName};

package/dist/web/assets/architecture-PBZL5I3N-DVRYSsQn.js

@@ -1 +0,0 @@
-import{K as e}from"./vendor-mermaid-CYOBtZtD.js";export{e as createArchitectureServices};