@hienlh/ppm 0.13.54 → 0.13.56

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/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>

package/src/web/components/layout/tab-bar.tsx

@@ -11,6 +11,7 @@ import {
   ChevronRight,
   Globe,
   Puzzle,
+  GitCommitHorizontal,
 } from "lucide-react";
 import { useTabStore, type TabType } from "@/stores/tab-store";
 import { usePanelStore } from "@/stores/panel-store";
@@ -52,6 +53,8 @@ const TAB_ICONS: Record<TabType, React.ElementType> = {
   extension: Puzzle,
   "extension-webview": Puzzle,
   "conflict-editor": FileDiff,
+  "system-monitor": Settings,
+  "git-log": GitCommitHorizontal,
 };
 
 interface TabBarProps {

package/src/web/components/layout/tab-content.tsx

@@ -64,6 +64,16 @@ const TAB_COMPONENTS: Record<TabType, React.LazyExoticComponent<React.ComponentT
       default: m.ConflictEditor,
     })),
   ),
+  "system-monitor": lazy(() =>
+    import("@/components/system/system-monitor-tab").then((m) => ({
+      default: m.SystemMonitorTab,
+    })),
+  ),
+  "git-log": lazy(() =>
+    import("@/components/git/git-log-panel").then((m) => ({
+      default: m.GitLogPanel,
+    })),
+  ),
 };
 
 function LoadingFallback() {

package/src/web/components/layout/tab-pool.tsx

@@ -31,6 +31,8 @@ const TAB_COMPONENTS: Record<TabType, React.LazyExoticComponent<React.ComponentT
   extension: lazy(() => import("@/components/extensions/extension-webview").then((m) => ({ default: m.ExtensionWebview }))),
   "extension-webview": lazy(() => import("@/components/extensions/extension-webview").then((m) => ({ default: m.ExtensionWebview }))),
   "conflict-editor": lazy(() => import("@/components/editor/conflict-editor").then((m) => ({ default: m.ConflictEditor }))),
+  "system-monitor": lazy(() => import("@/components/system/system-monitor-tab").then((m) => ({ default: m.SystemMonitorTab }))),
+  "git-log": lazy(() => import("@/components/git/git-log-panel").then((m) => ({ default: m.GitLogPanel }))),
 };
 
 // ---------------------------------------------------------------------------

package/src/web/components/system/resource-status-bar.tsx

@@ -0,0 +1,66 @@
+import { memo } from "react";
+import { Cpu } from "lucide-react";
+import { useResourceMonitor } from "@/hooks/use-resource-monitor";
+import { useTabStore } from "@/stores/tab-store";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import { cn } from "@/lib/utils";
+
+function cpuColor(cpu: number) {
+  if (cpu > 80) return "text-red-500";
+  if (cpu > 50) return "text-yellow-500";
+  return "text-green-500";
+}
+
+export const ResourceStatusBar = memo(function ResourceStatusBar() {
+  const { latest, isConnected } = useResourceMonitor();
+  const openTab = useTabStore((s) => s.openTab);
+  const isMobile = useIsMobile();
+
+  const handleClick = () => {
+    openTab({
+      type: "system-monitor",
+      title: "System Monitor",
+      projectId: null,
+      closable: true,
+    });
+  };
+
+  if (!isConnected || !latest) {
+    return (
+      <button
+        onClick={handleClick}
+        className="flex items-center gap-1.5 px-2 py-1 text-[10px] text-text-subtle hover:text-text-secondary transition-colors w-full"
+      >
+        <Cpu className="size-3 opacity-50" />
+        <span className="opacity-50">Connecting...</span>
+      </button>
+    );
+  }
+
+  const { cpu, ramMB, processCount } = latest.total;
+
+  return (
+    <button
+      onClick={handleClick}
+      className="flex items-center gap-1.5 px-2 py-1 text-[10px] hover:bg-surface-hover transition-colors w-full cursor-pointer"
+      title="Open System Monitor"
+    >
+      <Cpu className={cn("size-3", cpuColor(cpu))} />
+      <span className={cpuColor(cpu)}>
+        {isMobile ? `${cpu.toFixed(0)}%` : `CPU ${cpu.toFixed(1)}%`}
+      </span>
+      <span className="text-text-subtle">|</span>
+      <span className="text-text-secondary">
+        {ramMB < 1024
+          ? `${ramMB.toFixed(0)}MB`
+          : `${(ramMB / 1024).toFixed(1)}GB`}
+      </span>
+      {!isMobile && (
+        <>
+          <span className="text-text-subtle">|</span>
+          <span className="text-text-subtle">{processCount} proc</span>
+        </>
+      )}
+    </button>
+  );
+});