@hienlh/ppm 0.13.53 → 0.13.55

package/src/services/resource-monitor-utils.ts

@@ -0,0 +1,129 @@
+/**
+ * Pure utility functions for resource monitoring:
+ * ps output parsing, process tree building, and categorization.
+ */
+
+import type { ProcessEntry, ResourceGroup } from "./resource-monitor.service.ts";
+
+// ── Categorization patterns ────────────────────────────────────────────
+
+const CATEGORY_PATTERNS: [ResourceGroup["type"], RegExp][] = [
+  ["terminal", /^(bash|zsh|sh|fish|csh|tcsh|dash|ksh|pwsh|powershell)$/i],
+  ["ai-tool", /^(claude|anthropic)/i],
+  ["build", /^(node|bun|tsc|vite|webpack|esbuild|turbo|rollup|swc)$/i],
+];
+
+function categorize(cmd: string): ResourceGroup["type"] {
+  const basename = cmd.split("/").pop()?.split(" ")[0] ?? cmd;
+  for (const [type, re] of CATEGORY_PATTERNS) {
+    if (re.test(basename)) return type;
+  }
+  return "unknown";
+}
+
+// ── Parser ─────────────────────────────────────────────────────────────
+
+/** Parse `ps -e -o pid,ppid,%cpu,rss,args` output into structured entries */
+export function parseProcessList(stdout: string): ProcessEntry[] {
+  const lines = stdout.trim().split("\n");
+  if (lines.length < 2) return [];
+
+  const entries: ProcessEntry[] = [];
+  for (let i = 1; i < lines.length; i++) {
+    const line = lines[i]?.trim();
+    if (!line) continue;
+    const parts = line.split(/\s+/);
+    if (parts.length < 5) continue;
+
+    const pid = parseInt(parts[0]!, 10);
+    const ppid = parseInt(parts[1]!, 10);
+    const cpu = parseFloat(parts[2]!);
+    const rssKB = parseInt(parts[3]!, 10);
+    const command = parts.slice(4).join(" ");
+
+    if (isNaN(pid) || pid === 0 || !command) continue;
+
+    entries.push({
+      pid,
+      ppid,
+      cpu: Math.round(cpu * 10) / 10,
+      ramMB: Math.round((rssKB / 1024) * 10) / 10,
+      command,
+    });
+  }
+  return entries;
+}
+
+// ── Tree builder ───────────────────────────────────────────────────────
+
+/** Build flat list of all descendants of rootPid via ppid traversal */
+export function buildTree(entries: ProcessEntry[], rootPid: number): ProcessEntry[] {
+  const childMap = new Map<number, ProcessEntry[]>();
+  for (const e of entries) {
+    const list = childMap.get(e.ppid) ?? [];
+    list.push(e);
+    childMap.set(e.ppid, list);
+  }
+
+  const result: ProcessEntry[] = [];
+  const queue = [rootPid];
+  while (queue.length > 0) {
+    const pid = queue.shift()!;
+    const children = childMap.get(pid) ?? [];
+    for (const child of children) {
+      result.push(child);
+      queue.push(child.pid);
+    }
+  }
+  return result;
+}
+
+// ── Grouping ───────────────────────────────────────────────────────────
+
+const TYPE_LABELS: Record<ResourceGroup["type"], string> = {
+  server: "PPM Server",
+  terminal: "Terminals",
+  "ai-tool": "AI Tools",
+  build: "Build Tools",
+  unknown: "Other",
+};
+
+/** Group processes into resource groups by category */
+export function groupProcesses(
+  serverEntry: ProcessEntry | undefined,
+  children: ProcessEntry[],
+): ResourceGroup[] {
+  const groups: ResourceGroup[] = [];
+
+  if (serverEntry) {
+    groups.push({
+      type: "server",
+      label: "PPM Server",
+      cpu: serverEntry.cpu,
+      ramMB: serverEntry.ramMB,
+      processes: [{ pid: serverEntry.pid, cpu: serverEntry.cpu, ramMB: serverEntry.ramMB, command: serverEntry.command }],
+    });
+  }
+
+  const buckets = new Map<ResourceGroup["type"], ProcessEntry[]>();
+  for (const child of children) {
+    const type = categorize(child.command);
+    const list = buckets.get(type) ?? [];
+    list.push(child);
+    buckets.set(type, list);
+  }
+
+  for (const type of ["terminal", "ai-tool", "build", "unknown"] as const) {
+    const procs = buckets.get(type);
+    if (!procs?.length) continue;
+    groups.push({
+      type,
+      label: TYPE_LABELS[type],
+      cpu: Math.round(procs.reduce((s, p) => s + p.cpu, 0) * 10) / 10,
+      ramMB: Math.round(procs.reduce((s, p) => s + p.ramMB, 0) * 10) / 10,
+      processes: procs.map((p) => ({ pid: p.pid, cpu: p.cpu, ramMB: p.ramMB, command: p.command })),
+    });
+  }
+
+  return groups;
+}

package/src/services/resource-monitor.service.ts

@@ -0,0 +1,122 @@
+/**
+ * Resource Monitor Service — polls `ps` to track PPM process tree,
+ * categorizes processes, and maintains a ring buffer of snapshots.
+ * Lazy polling: only active when SSE subscribers exist.
+ */
+
+import { parseProcessList, buildTree, groupProcesses } from "./resource-monitor-utils.ts";
+
+// ── Types ──────────────────────────────────────────────────────────────
+
+export interface ProcessEntry {
+  pid: number;
+  ppid: number;
+  cpu: number;
+  ramMB: number;
+  command: string;
+}
+
+export interface ResourceGroup {
+  type: "server" | "terminal" | "ai-tool" | "build" | "unknown";
+  label: string;
+  cpu: number;
+  ramMB: number;
+  processes: Omit<ProcessEntry, "ppid">[];
+}
+
+export interface ResourceSnapshot {
+  timestamp: number;
+  server: { pid: number; cpu: number; ramMB: number };
+  total: { cpu: number; ramMB: number; processCount: number };
+  groups: ResourceGroup[];
+}
+
+type SnapshotCallback = (snapshot: ResourceSnapshot) => void;
+
+// ── Service ────────────────────────────────────────────────────────────
+
+const RING_BUFFER_MAX = 600; // 30 min at 3s interval
+const POLL_INTERVAL = 3000;
+
+class ResourceMonitorService {
+  private ringBuffer: ResourceSnapshot[] = [];
+  private subscribers = new Set<SnapshotCallback>();
+  private timer: ReturnType<typeof setInterval> | null = null;
+
+  subscribe(cb: SnapshotCallback) {
+    this.subscribers.add(cb);
+    if (this.subscribers.size === 1) this.startPolling();
+  }
+
+  unsubscribe(cb: SnapshotCallback) {
+    this.subscribers.delete(cb);
+    if (this.subscribers.size === 0) this.stopPolling();
+  }
+
+  getLatest(): ResourceSnapshot | null {
+    return this.ringBuffer.at(-1) ?? null;
+  }
+
+  getHistory(): ResourceSnapshot[] {
+    return this.ringBuffer;
+  }
+
+  private startPolling() {
+    if (this.timer) return;
+    if (process.platform === "win32") return; // ps not available on Windows
+    this.poll(); // immediate first poll
+    this.timer = setInterval(() => this.poll(), POLL_INTERVAL);
+  }
+
+  private stopPolling() {
+    if (this.timer) {
+      clearInterval(this.timer);
+      this.timer = null;
+    }
+  }
+
+  private async poll() {
+    try {
+      const proc = Bun.spawn({
+        cmd: ["ps", "-e", "-o", "pid,ppid,%cpu,rss,args"],
+        stdout: "pipe",
+        stderr: "ignore",
+      });
+      const stdout = await new Response(proc.stdout).text();
+      await proc.exited;
+
+      const entries = parseProcessList(stdout);
+      const rootPid = process.pid;
+      const serverEntry = entries.find((e) => e.pid === rootPid);
+      const children = buildTree(entries, rootPid);
+      const groups = groupProcesses(serverEntry, children);
+
+      const allProcs = serverEntry ? [serverEntry, ...children] : children;
+      const snapshot: ResourceSnapshot = {
+        timestamp: Date.now(),
+        server: serverEntry
+          ? { pid: serverEntry.pid, cpu: serverEntry.cpu, ramMB: serverEntry.ramMB }
+          : { pid: rootPid, cpu: 0, ramMB: 0 },
+        total: {
+          cpu: Math.round(allProcs.reduce((s, p) => s + p.cpu, 0) * 10) / 10,
+          ramMB: Math.round(allProcs.reduce((s, p) => s + p.ramMB, 0) * 10) / 10,
+          processCount: allProcs.length,
+        },
+        groups,
+      };
+
+      this.ringBuffer.push(snapshot);
+      if (this.ringBuffer.length > RING_BUFFER_MAX) {
+        this.ringBuffer.shift();
+      }
+
+      for (const cb of this.subscribers) {
+        try { cb(snapshot); } catch {}
+      }
+    } catch (err) {
+      console.error("[ResourceMonitor] poll error:", err);
+    }
+  }
+}
+
+export const resourceMonitor = new ResourceMonitorService();

package/src/web/components/editor/editor-breadcrumb.tsx

@@ -165,7 +165,14 @@ function SegmentDropdown({ segment, isLast, projectName, onFileClick }: SegmentD
 
   function handleOpenChange(open: boolean) {
     if (open && !isLoaded) {
-      loadChildren(projectName, segment.parentPath);
+      // Load ancestor directories top-down so mergeChildren can traverse
+      // the tree to the target (needed when file opened via search/quick-open)
+      const parts = segment.parentPath.split("/").filter(Boolean);
+      (async () => {
+        for (let i = 0; i <= parts.length; i++) {
+          await loadChildren(projectName, parts.slice(0, i).join("/"));
+        }
+      })();
     }
   }
 

package/src/web/components/git/git-log-panel.tsx

@@ -0,0 +1,206 @@
+import { useEffect, useState, useCallback, useRef } from "react";
+import { Loader2, RefreshCw, GitCommitHorizontal } from "lucide-react";
+import { api, projectUrl } from "@/lib/api-client";
+import { useProjectStore } from "@/stores/project-store";
+import { useShallow } from "zustand/react/shallow";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { GitRefBadge, buildRefBadges } from "./git-ref-badge";
+import type { GitGraphData, GitCommit, GitBranch } from "../../../types/git";
+
+const PAGE_SIZE = 100;
+
+interface GitLogPanelProps {
+  metadata?: Record<string, unknown>;
+}
+
+export function GitLogPanel({ metadata }: GitLogPanelProps) {
+  const projectName = (metadata?.projectName as string) ??
+    useProjectStore(useShallow((s) => s.activeProject))?.name;
+  const [data, setData] = useState<GitGraphData | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [hasMore, setHasMore] = useState(true);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const fetchData = useCallback(async (skip = 0, append = false) => {
+    if (!projectName) return;
+    setLoading(true);
+    try {
+      const res = await api.get<GitGraphData>(
+        `${projectUrl(projectName)}/git/graph?max=${PAGE_SIZE}&skip=${skip}`,
+      );
+      setData((prev) => {
+        if (append && prev) {
+          return {
+            ...res,
+            commits: [...prev.commits, ...res.commits],
+          };
+        }
+        return res;
+      });
+      setHasMore(res.commits.length === PAGE_SIZE);
+    } catch {
+      /* silent */
+    }
+    setLoading(false);
+  }, [projectName]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  const loadMore = useCallback(() => {
+    if (loading || !hasMore || !data) return;
+    fetchData(data.commits.length, true);
+  }, [loading, hasMore, data, fetchData]);
+
+  // Infinite scroll: load more when near bottom
+  const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
+    const target = e.currentTarget;
+    if (target.scrollHeight - target.scrollTop - target.clientHeight < 200) {
+      loadMore();
+    }
+  }, [loadMore]);
+
+  if (!projectName) {
+    return (
+      <div className="flex items-center justify-center h-full text-text-secondary text-sm">
+        Select a project to view git log
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header */}
+      <div className="flex items-center gap-2 px-3 py-2 border-b border-border shrink-0">
+        <GitCommitHorizontal className="size-4 text-text-secondary" />
+        <span className="text-xs font-medium text-text-primary">Git Log</span>
+        <span className="text-[10px] text-text-subtle">
+          {data ? `${data.commits.length} commits` : ""}
+        </span>
+        <div className="flex-1" />
+        <button
+          onClick={() => fetchData()}
+          disabled={loading}
+          className="p-1 rounded text-text-subtle hover:text-text-secondary transition-colors"
+          title="Refresh"
+        >
+          <RefreshCw className={`size-3.5 ${loading ? "animate-spin" : ""}`} />
+        </button>
+      </div>
+
+      {/* Commit list */}
+      {!data && loading ? (
+        <div className="flex items-center justify-center h-full">
+          <Loader2 className="size-5 animate-spin text-primary" />
+        </div>
+      ) : data && data.commits.length === 0 ? (
+        <div className="flex items-center justify-center h-full text-text-secondary text-sm">
+          No commits yet
+        </div>
+      ) : data ? (
+        <div
+          ref={scrollRef}
+          className="flex-1 overflow-y-auto min-h-0"
+          onScroll={handleScroll}
+        >
+          {data.commits.map((commit) => (
+            <CommitRow
+              key={commit.hash}
+              commit={commit}
+              branches={data.branches}
+              head={data.head}
+            />
+          ))}
+          {loading && (
+            <div className="flex items-center justify-center py-3">
+              <Loader2 className="size-4 animate-spin text-text-subtle" />
+            </div>
+          )}
+          {!hasMore && data.commits.length > 0 && (
+            <div className="text-center text-[10px] text-text-subtle py-3">
+              End of history
+            </div>
+          )}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function CommitRow({
+  commit,
+  branches,
+  head,
+}: {
+  commit: GitCommit;
+  branches: GitBranch[];
+  head: string;
+}) {
+  const isHead = commit.hash === head;
+  const badges = buildRefBadges(commit.hash, commit.refs, branches, head);
+
+  return (
+    <div
+      className={`flex items-start gap-2 px-3 py-1.5 border-b border-border/50 hover:bg-surface-elevated transition-colors ${
+        isHead ? "bg-primary/5" : ""
+      }`}
+    >
+      {/* Commit dot */}
+      <div className="flex items-center pt-1 shrink-0">
+        <span
+          className={`size-2.5 rounded-full border-2 ${
+            isHead
+              ? "border-primary bg-primary"
+              : "border-text-subtle bg-transparent"
+          }`}
+        />
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 min-w-0">
+        {/* Ref badges row */}
+        {badges.length > 0 && (
+          <div className="flex flex-wrap items-center gap-1 mb-0.5">
+            {badges.map((badge) => (
+              <GitRefBadge key={`${badge.name}-${badge.syncState}`} {...badge} />
+            ))}
+          </div>
+        )}
+
+        {/* Subject line */}
+        <p className="text-xs text-text-primary truncate leading-snug">
+          {commit.subject}
+        </p>
+
+        {/* Meta */}
+        <div className="flex items-center gap-2 mt-0.5">
+          <span className="text-[10px] font-mono text-text-subtle">
+            {commit.abbreviatedHash}
+          </span>
+          <span className="text-[10px] text-text-subtle truncate">
+            {commit.authorName}
+          </span>
+          <span className="text-[10px] text-text-subtle shrink-0">
+            {formatRelativeDate(commit.authorDate)}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/** Compact relative date: "2h", "3d", "Jan 5" */
+function formatRelativeDate(dateStr: string): string {
+  const date = new Date(dateStr);
+  const now = Date.now();
+  const diff = now - date.getTime();
+  const mins = Math.floor(diff / 60000);
+  if (mins < 1) return "now";
+  if (mins < 60) return `${mins}m`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h`;
+  const days = Math.floor(hours / 24);
+  if (days < 30) return `${days}d`;
+  return date.toLocaleDateString("en", { month: "short", day: "numeric" });
+}

package/src/web/components/git/git-ref-badge.tsx

@@ -0,0 +1,150 @@
+import { Cloud, CloudOff, Tag, ArrowUp, ArrowDown } from "lucide-react";
+import type { GitBranch } from "../../../types/git";
+import { cn } from "@/lib/utils";
+
+/** Deterministic color from branch name — 8 distinct hues */
+const BRANCH_COLORS = [
+  "#2563eb", // blue
+  "#16a34a", // green
+  "#d97706", // amber
+  "#9333ea", // purple
+  "#dc2626", // red
+  "#0891b2", // cyan
+  "#c026d3", // fuchsia
+  "#ea580c", // orange
+];
+
+function hashColor(name: string): string {
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) {
+    hash = (hash * 31 + name.charCodeAt(i)) | 0;
+  }
+  return BRANCH_COLORS[Math.abs(hash) % BRANCH_COLORS.length]!;
+}
+
+export type RefSyncState = "synced" | "local-only" | "remote-only" | "ahead" | "behind";
+
+interface GitRefBadgeProps {
+  /** Display name (e.g. "main", "feature/login") */
+  name: string;
+  syncState: RefSyncState;
+  /** True if this is HEAD */
+  isHead?: boolean;
+  /** True if this is a tag ref */
+  isTag?: boolean;
+  className?: string;
+}
+
+/** Merged branch/tag badge — colored border + light bg + black text */
+export function GitRefBadge({ name, syncState, isHead, isTag, className }: GitRefBadgeProps) {
+  const color = isTag ? "#d97706" : hashColor(name);
+
+  const SyncIcon = isTag
+    ? Tag
+    : syncState === "synced"
+      ? Cloud
+      : syncState === "ahead"
+        ? ArrowUp
+        : syncState === "behind"
+          ? ArrowDown
+          : syncState === "remote-only"
+            ? Cloud
+            : CloudOff;
+
+  const title = isTag
+    ? `Tag: ${name}`
+    : syncState === "synced"
+      ? `${name} — synced with remote`
+      : syncState === "ahead"
+        ? `${name} — ahead of remote`
+        : syncState === "behind"
+          ? `${name} — behind remote`
+          : syncState === "remote-only"
+            ? `${name} — remote only`
+            : `${name} — local only`;
+
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-[11px] font-medium leading-tight max-w-[220px]",
+        isHead && "ring-1 ring-offset-1 ring-offset-background",
+        syncState === "remote-only" && "opacity-70",
+        className,
+      )}
+      style={{
+        borderColor: color,
+        backgroundColor: color + "1A", // ~10% opacity
+        color: "#1a1a1a",
+        // HEAD ring color
+        ...(isHead ? { ["--tw-ring-color" as string]: color } : {}),
+      }}
+      title={title}
+    >
+      <SyncIcon className="size-3 shrink-0" style={{ color }} />
+      <span className="truncate">{name}</span>
+    </span>
+  );
+}
+
+/** Merge raw commit refs + branch data into deduplicated badge props */
+export function buildRefBadges(
+  commitHash: string,
+  refs: string[],
+  branches: GitBranch[],
+  head: string,
+): GitRefBadgeProps[] {
+  const badges: GitRefBadgeProps[] = [];
+  const isHead = commitHash === head;
+
+  // Collect tags from refs
+  for (const ref of refs) {
+    if (ref.startsWith("tag: ")) {
+      badges.push({ name: ref.slice(5), syncState: "synced", isTag: true });
+    }
+  }
+
+  // Group branches by logical name (strip remotes/origin/ prefix)
+  const branchesOnCommit = branches.filter((b) => b.commitHash === commitHash);
+  const localBranches = branchesOnCommit.filter((b) => !b.remote);
+  const remoteBranches = branchesOnCommit.filter((b) => b.remote);
+
+  // Build set of remote branch names that have a local counterpart
+  const localNames = new Set(localBranches.map((b) => b.name));
+  const mergedRemoteNames = new Set<string>();
+
+  // Add local branches with sync state
+  for (const local of localBranches) {
+    let syncState: RefSyncState = "local-only";
+    if (local.remotes.length > 0) {
+      // Has remote tracking
+      if (local.ahead > 0 && local.behind === 0) syncState = "ahead";
+      else if (local.behind > 0 && local.ahead === 0) syncState = "behind";
+      else syncState = "synced";
+    }
+    badges.push({
+      name: local.name,
+      syncState,
+      isHead: isHead && local.current,
+    });
+    // Mark corresponding remote names as merged
+    for (const remote of remoteBranches) {
+      const stripped = remote.name.replace(/^remotes\//, "");
+      const slashIdx = stripped.indexOf("/");
+      if (slashIdx < 0) continue;
+      const remoteBranchName = stripped.slice(slashIdx + 1);
+      if (remoteBranchName === local.name) {
+        mergedRemoteNames.add(remote.name);
+      }
+    }
+  }
+
+  // Add remote-only branches (not merged with any local)
+  for (const remote of remoteBranches) {
+    if (mergedRemoteNames.has(remote.name)) continue;
+    // Strip "remotes/" prefix for display, keep "origin/..." format
+    const displayName = remote.name.replace(/^remotes\//, "");
+    badges.push({ name: displayName, syncState: "remote-only" });
+  }
+
+  return badges;
+}

package/src/web/components/git/git-status-panel.tsx

@@ -12,6 +12,7 @@ import {
   ChevronRight,
   ChevronDown,
   FileText,
+  GitCommitHorizontal,
 } from "lucide-react";
 import { api, projectUrl } from "@/lib/api-client";
 import { basename } from "@/lib/utils";
@@ -330,6 +331,23 @@ export function GitStatusPanel({ metadata, tabId, onNavigate }: GitStatusPanelPr
           >
             <FolderTree className="size-3.5" />
           </Button>
+          <Button
+            variant="ghost"
+            size="icon-xs"
+            onClick={() => {
+              openTab({
+                type: "git-log",
+                title: "Git Log",
+                projectId: projectName ?? null,
+                closable: true,
+                metadata: { projectName },
+              });
+              onNavigate?.();
+            }}
+            title="View Git Log"
+          >
+            <GitCommitHorizontal className="size-3.5" />
+          </Button>
           <Button
             variant="ghost"
             size="icon-xs"

package/src/web/components/layout/mobile-nav.tsx

@@ -35,6 +35,8 @@ const TAB_ICONS: Record<TabType, React.ElementType> = {
   extension: Puzzle,
   "extension-webview": Puzzle,
   "conflict-editor": FileDiff,
+  "system-monitor": Settings,
+  "git-log": FileCode,
 };
 
 interface MobileNavProps { onMenuPress: () => void; onProjectsPress: () => void; }

package/src/web/components/layout/sidebar.tsx

@@ -13,6 +13,7 @@ import { ExtensionTreeView } from "@/components/extensions/extension-tree-view";
 import { JiraPanel } from "@/components/jira/jira-panel";
 import { useGitStatusStore, useGitChangesPoller } from "@/stores/git-status-store";
 import { useJiraStore } from "@/stores/jira-store";
+import { ResourceStatusBar } from "@/components/system/resource-status-bar";
 import { cn } from "@/lib/utils";
 
 const BUILTIN_TABS: { id: SidebarActiveTab; label: string; icon: React.ElementType }[] = [
@@ -183,6 +184,11 @@ export const Sidebar = memo(function Sidebar() {
         )}
       </div>
 
+      {/* Resource monitor status bar */}
+      <div className="shrink-0 border-t border-border">
+        <ResourceStatusBar />
+      </div>
+
       {/* Resize handle */}
       <ResizeHandle onResize={setSidebarWidth} />
     </aside>