@hienlh/ppm 0.7.41 → 0.8.0

package/src/web/components/chat/mode-selector.tsx

@@ -0,0 +1,117 @@
+import { useRef, useEffect, useCallback, type KeyboardEvent } from "react";
+import { Hand, Code, ClipboardList, ShieldOff, Check } from "lucide-react";
+
+const MODES = [
+  { id: "default", label: "Ask before edits", icon: Hand, description: "Claude will ask for approval before making each edit" },
+  { id: "acceptEdits", label: "Edit automatically", icon: Code, description: "Claude will edit files without asking first" },
+  { id: "plan", label: "Plan mode", icon: ClipboardList, description: "Claude will present a plan before editing" },
+  { id: "bypassPermissions", label: "Bypass permissions", icon: ShieldOff, description: "Claude will not ask before running commands" },
+] as const;
+
+export type ModeId = typeof MODES[number]["id"];
+
+/** Short label for the mode chip */
+export function getModeLabel(id: string): string {
+  return MODES.find((m) => m.id === id)?.label ?? "Unknown";
+}
+
+/** Icon component for the mode chip */
+export function getModeIcon(id: string) {
+  return MODES.find((m) => m.id === id)?.icon ?? Hand;
+}
+
+interface ModeSelectorProps {
+  value: string;
+  onChange: (mode: string) => void;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function ModeSelector({ value, onChange, open, onOpenChange }: ModeSelectorProps) {
+  const panelRef = useRef<HTMLDivElement>(null);
+  const focusedRef = useRef(0);
+
+  // Close on click outside
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      if (panelRef.current && !panelRef.current.contains(e.target as Node)) {
+        onOpenChange(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open, onOpenChange]);
+
+  // Focus current mode on open
+  useEffect(() => {
+    if (open) {
+      focusedRef.current = MODES.findIndex((m) => m.id === value);
+      if (focusedRef.current < 0) focusedRef.current = 0;
+    }
+  }, [open, value]);
+
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    if (e.key === "Escape") {
+      onOpenChange(false);
+      return;
+    }
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      const dir = e.key === "ArrowDown" ? 1 : -1;
+      focusedRef.current = (focusedRef.current + dir + MODES.length) % MODES.length;
+      const el = panelRef.current?.querySelector(`[data-idx="${focusedRef.current}"]`) as HTMLElement;
+      el?.focus();
+    }
+    if (e.key === "Enter") {
+      e.preventDefault();
+      const mode = MODES[focusedRef.current];
+      if (mode) { onChange(mode.id); onOpenChange(false); }
+    }
+  }, [onChange, onOpenChange]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      ref={panelRef}
+      role="listbox"
+      aria-label="Permission modes"
+      onKeyDown={handleKeyDown}
+      onMouseDown={(e) => e.stopPropagation()}
+      onClick={(e) => e.stopPropagation()}
+      className="absolute bottom-full left-0 mb-1 z-50 w-72 md:w-80 rounded-lg border border-border bg-surface shadow-lg"
+    >
+      <div className="flex items-center justify-between px-3 py-2 border-b border-border">
+        <span className="text-xs font-medium text-text-secondary">Modes</span>
+        <kbd className="text-[10px] px-1.5 py-0.5 rounded bg-surface-elevated text-text-subtle border border-border">
+          Shift + Tab
+        </kbd>
+      </div>
+      <div className="py-1">
+        {MODES.map((mode, idx) => {
+          const Icon = mode.icon;
+          const isActive = mode.id === value;
+          return (
+            <button
+              key={mode.id}
+              data-idx={idx}
+              role="option"
+              aria-selected={isActive}
+              tabIndex={0}
+              onClick={() => { onChange(mode.id); onOpenChange(false); }}
+              className={`w-full flex items-start gap-3 px-3 py-2.5 text-left transition-colors hover:bg-surface-elevated focus:bg-surface-elevated focus:outline-none ${isActive ? "bg-surface-elevated" : ""}`}
+            >
+              <Icon className="size-4 mt-0.5 shrink-0 text-text-secondary" />
+              <div className="flex-1 min-w-0">
+                <div className="text-sm font-medium text-text-primary">{mode.label}</div>
+                <div className="text-xs text-text-subtle leading-snug">{mode.description}</div>
+              </div>
+              {isActive && <Check className="size-4 mt-0.5 shrink-0 text-primary" />}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/web/components/git/git-graph-branch-label.tsx

@@ -0,0 +1,124 @@
+import {
+  GitBranch,
+  GitMerge,
+  Trash2,
+  ArrowUpFromLine,
+  ExternalLink,
+  Tag,
+} from "lucide-react";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
+import type { GitBranch as GitBranchType } from "../../../types/git";
+
+interface BranchLabelProps {
+  name: string;
+  type: "branch" | "tag";
+  remotes: string[];
+  isCurrent: boolean;
+  color: string;
+  currentBranch: GitBranchType | undefined;
+  onCheckout: (ref: string) => void;
+  onMerge: (source: string) => void;
+  onPush: (branch: string) => void;
+  onCreatePr: (branch: string) => void;
+  onDelete: (name: string) => void;
+}
+
+export function BranchLabel({
+  name,
+  type,
+  remotes,
+  isCurrent,
+  color,
+  currentBranch,
+  onCheckout,
+  onMerge,
+  onPush,
+  onCreatePr,
+  onDelete,
+}: BranchLabelProps) {
+  if (type === "tag") {
+    return (
+      <span className="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[10px] font-medium shrink-0 bg-amber-500/20 text-amber-500 border border-amber-500/30">
+        <Tag className="size-2.5" />
+        {name}
+      </span>
+    );
+  }
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>
+        <span
+          className="inline-flex items-center rounded text-[10px] font-medium shrink-0 cursor-context-menu overflow-hidden"
+          style={{
+            border: isCurrent
+              ? `1.5px solid ${color}`
+              : `1px solid ${color}50`,
+          }}
+        >
+          {/* Branch name segment */}
+          <span
+            className="inline-flex items-center gap-0.5 px-1.5 py-0.5"
+            style={{
+              backgroundColor: isCurrent ? color : `${color}30`,
+              color: isCurrent ? "#fff" : color,
+            }}
+          >
+            <GitBranch className="size-2.5" />
+            {name}
+          </span>
+          {/* Remote indicators (italic, separated by border) */}
+          {remotes.map((remote) => (
+            <span
+              key={remote}
+              className="px-1.5 py-0.5 italic opacity-70"
+              style={{
+                borderLeft: `1px solid ${color}40`,
+                color,
+                backgroundColor: `${color}15`,
+              }}
+            >
+              {remote}
+            </span>
+          ))}
+        </span>
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem onClick={() => onCheckout(name)}>
+          Checkout
+        </ContextMenuItem>
+        <ContextMenuItem
+          onClick={() => onMerge(name)}
+          disabled={name === currentBranch?.name}
+        >
+          <GitMerge className="size-3" />
+          Merge into current
+        </ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem onClick={() => onPush(name)}>
+          <ArrowUpFromLine className="size-3" />
+          Push
+        </ContextMenuItem>
+        <ContextMenuItem onClick={() => onCreatePr(name)}>
+          <ExternalLink className="size-3" />
+          Create PR
+        </ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem
+          variant="destructive"
+          onClick={() => onDelete(name)}
+          disabled={name === currentBranch?.name}
+        >
+          <Trash2 className="size-3" />
+          Delete
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}

package/src/web/components/git/git-graph-constants.ts

@@ -0,0 +1,185 @@
+import type { GitGraphData } from "../../../types/git";
+
+export const LANE_COLORS = [
+  "#0085d9", "#d73a49", "#6f42c1", "#2cbe4e", "#e36209",
+  "#005cc5", "#b31d28", "#5a32a3", "#22863a", "#cb2431",
+];
+
+export const ROW_HEIGHT = 24;
+export const LANE_WIDTH = 16;
+export const NODE_RADIUS = 4;
+
+/** Build commit → branch/tag label map (shows local + remote-only branches) */
+export function buildCommitLabels(data: GitGraphData | null) {
+  const labels = new Map<string, Array<{ name: string; type: "branch" | "tag"; remotes: string[]; current: boolean }>>();
+  if (!data) return labels;
+
+  // Collect which remote branches are already covered by a local branch
+  const coveredRemotes = new Set<string>();
+  for (const branch of data.branches) {
+    if (!branch.remote) {
+      for (const remote of branch.remotes) {
+        coveredRemotes.add(`remotes/${remote}/${branch.name}`);
+      }
+    }
+  }
+
+  for (const branch of data.branches) {
+    if (branch.remote) {
+      // Show remote-only branches (not covered by a local branch)
+      if (coveredRemotes.has(branch.name)) continue;
+      const arr = labels.get(branch.commitHash) ?? [];
+      // Display as "remote/branch" (strip "remotes/" prefix)
+      const displayName = branch.name.replace(/^remotes\//, "");
+      arr.push({ name: displayName, type: "branch", remotes: [], current: false });
+      labels.set(branch.commitHash, arr);
+    } else {
+      const arr = labels.get(branch.commitHash) ?? [];
+      arr.push({ name: branch.name, type: "branch", remotes: branch.remotes, current: branch.current });
+      labels.set(branch.commitHash, arr);
+    }
+  }
+
+  for (const commit of data.commits) {
+    for (const ref of commit.refs) {
+      if (ref.startsWith("tag: ")) {
+        const tagName = ref.replace("tag: ", "");
+        const arr = labels.get(commit.hash) ?? [];
+        arr.push({ name: tagName, type: "tag", remotes: [], current: false });
+        labels.set(commit.hash, arr);
+      }
+    }
+  }
+  return labels;
+}
+
+/** Lane assignment algorithm — recycles freed lanes to keep graph compact */
+export function computeLanes(data: GitGraphData | null) {
+  const map = new Map<string, number>();
+  if (!data) return { laneMap: map, maxLane: 0, unloadedParentLanes: new Map<string, number>() };
+
+  let nextLane = 0;
+  let maxLaneUsed = 0;
+  const activeLanes = new Map<string, number>();
+  const commitSet = new Set(data.commits.map((c) => c.hash));
+  const freeLanes: number[] = [];
+
+  const allocLane = () => {
+    if (freeLanes.length > 0) {
+      freeLanes.sort((a, b) => a - b);
+      return freeLanes.shift()!;
+    }
+    return nextLane++;
+  };
+
+  for (const commit of data.commits) {
+    let lane = activeLanes.get(commit.hash);
+    if (lane === undefined) lane = allocLane();
+    map.set(commit.hash, lane);
+    if (lane > maxLaneUsed) maxLaneUsed = lane;
+    activeLanes.delete(commit.hash);
+
+    let laneReused = false;
+    for (let i = 0; i < commit.parents.length; i++) {
+      const parent = commit.parents[i]!;
+      if (!activeLanes.has(parent)) {
+        if (i === 0) {
+          activeLanes.set(parent, lane);
+          laneReused = true;
+        } else {
+          const newLane = allocLane();
+          activeLanes.set(parent, newLane);
+          if (newLane > maxLaneUsed) maxLaneUsed = newLane;
+        }
+      }
+    }
+    if (!laneReused) freeLanes.push(lane);
+  }
+
+  const unloadedParentLanes = new Map<string, number>();
+  for (const [hash, lane] of activeLanes) {
+    if (!commitSet.has(hash)) unloadedParentLanes.set(hash, lane);
+  }
+
+  return { laneMap: map, maxLane: maxLaneUsed, unloadedParentLanes };
+}
+
+/** Build SVG paths for connections (including unloaded parent extension) */
+export function computeSvgPaths(
+  data: GitGraphData | null,
+  laneMap: Map<string, number>,
+  unloadedParentLanes: Map<string, number>,
+  totalHeight: number,
+) {
+  if (!data) return [];
+  const paths: Array<{ d: string; color: string }> = [];
+  const commitSet = new Set(data.commits.map((c) => c.hash));
+
+  for (let idx = 0; idx < data.commits.length; idx++) {
+    const commit = data.commits[idx]!;
+    const lane = laneMap.get(commit.hash) ?? 0;
+    const color = LANE_COLORS[lane % LANE_COLORS.length]!;
+
+    for (const parentHash of commit.parents) {
+      const parentIdx = data.commits.findIndex((c) => c.hash === parentHash);
+
+      if (parentIdx >= 0) {
+        // Parent is loaded — draw connection
+        const parentLane = laneMap.get(parentHash) ?? 0;
+        const parentColor = LANE_COLORS[parentLane % LANE_COLORS.length]!;
+        const x1 = lane * LANE_WIDTH + LANE_WIDTH / 2;
+        const y1 = idx * ROW_HEIGHT + ROW_HEIGHT / 2;
+        const x2 = parentLane * LANE_WIDTH + LANE_WIDTH / 2;
+        const y2 = parentIdx * ROW_HEIGHT + ROW_HEIGHT / 2;
+
+        let d: string;
+        const isMerge = commit.parents.indexOf(parentHash) > 0;
+        if (x1 === x2) {
+          d = `M ${x1} ${y1} L ${x2} ${y2}`;
+        } else if (isMerge) {
+          const curveEnd = y1 + ROW_HEIGHT;
+          d = `M ${x1} ${y1} C ${x1} ${curveEnd} ${x2} ${y1} ${x2} ${curveEnd} L ${x2} ${y2}`;
+        } else {
+          const curveStart = y2 - ROW_HEIGHT;
+          d = `M ${x1} ${y1} L ${x1} ${curveStart} C ${x1} ${y2} ${x2} ${curveStart} ${x2} ${y2}`;
+        }
+        const lineColor = commit.parents.indexOf(parentHash) === 0 ? color : parentColor;
+        paths.push({ d, color: lineColor });
+      } else if (!commitSet.has(parentHash)) {
+        // Parent NOT loaded — use the parent's assigned lane for the extension line
+        const parentLane = unloadedParentLanes.get(parentHash) ?? lane;
+        const parentColor = LANE_COLORS[parentLane % LANE_COLORS.length]!;
+        const x1 = lane * LANE_WIDTH + LANE_WIDTH / 2;
+        const y1 = idx * ROW_HEIGHT + ROW_HEIGHT / 2;
+        const x2 = parentLane * LANE_WIDTH + LANE_WIDTH / 2;
+
+        if (x1 === x2) {
+          // Same lane — straight down
+          paths.push({ d: `M ${x1} ${y1} L ${x1} ${totalHeight}`, color });
+        } else {
+          // Different lane — curve then straight down
+          const curveEnd = y1 + ROW_HEIGHT;
+          const d = `M ${x1} ${y1} C ${x1} ${curveEnd} ${x2} ${y1} ${x2} ${curveEnd} L ${x2} ${totalHeight}`;
+          paths.push({ d, color: parentColor });
+        }
+      }
+    }
+  }
+  return paths;
+}
+
+export function relativeDate(dateStr: string): string {
+  const date = new Date(dateStr);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  if (diffMins < 1) return "just now";
+  if (diffMins < 60) return `${diffMins}m ago`;
+  const diffHours = Math.floor(diffMins / 60);
+  if (diffHours < 24) return `${diffHours}h ago`;
+  const diffDays = Math.floor(diffHours / 24);
+  if (diffDays < 30) return `${diffDays}d ago`;
+  const diffMonths = Math.floor(diffDays / 30);
+  if (diffMonths < 12) return `${diffMonths}mo ago`;
+  return `${Math.floor(diffMonths / 12)}y ago`;
+}

package/src/web/components/git/git-graph-detail.tsx

@@ -0,0 +1,107 @@
+import { Button } from "@/components/ui/button";
+import { useTabStore } from "@/stores/tab-store";
+import { basename } from "@/lib/utils";
+import type { GitCommit } from "../../../types/git";
+
+interface GitGraphDetailProps {
+  commit: GitCommit;
+  files: Array<{ path: string; additions: number; deletions: number }>;
+  loadingDetail: boolean;
+  projectName: string;
+  onClose: () => void;
+  copyHash: (hash: string) => void;
+}
+
+export function GitGraphDetail({
+  commit,
+  files,
+  loadingDetail,
+  projectName,
+  onClose,
+  copyHash,
+}: GitGraphDetailProps) {
+  const { openTab } = useTabStore();
+
+  return (
+    <div className="border-t bg-muted/30 max-h-[40%] overflow-auto">
+      <div className="px-3 py-2 border-b flex items-center justify-between">
+        <span className="text-sm font-medium truncate">
+          {commit.abbreviatedHash} — {commit.subject}
+        </span>
+        <Button variant="ghost" size="icon-xs" onClick={onClose}>
+          ✕
+        </Button>
+      </div>
+      <div className="px-3 py-2 text-xs space-y-1">
+        <div className="flex gap-4">
+          <span className="text-muted-foreground w-12 shrink-0">Author</span>
+          <span>
+            {commit.authorName} &lt;{commit.authorEmail}&gt;
+          </span>
+        </div>
+        <div className="flex gap-4">
+          <span className="text-muted-foreground w-12 shrink-0">Date</span>
+          <span>{new Date(commit.authorDate).toLocaleString()}</span>
+        </div>
+        <div className="flex gap-4">
+          <span className="text-muted-foreground w-12 shrink-0">Hash</span>
+          <span
+            className="font-mono cursor-pointer hover:text-primary"
+            onClick={() => copyHash(commit.hash)}
+          >
+            {commit.hash}
+          </span>
+        </div>
+        {commit.parents.length > 0 && (
+          <div className="flex gap-4">
+            <span className="text-muted-foreground w-12 shrink-0">Parents</span>
+            <span className="font-mono">
+              {commit.parents.map((p) => p.slice(0, 7)).join(", ")}
+            </span>
+          </div>
+        )}
+        {commit.body && (
+          <div className="mt-2 p-2 bg-background rounded text-xs whitespace-pre-wrap">
+            {commit.body}
+          </div>
+        )}
+      </div>
+      {/* Changed files */}
+      <div className="px-3 py-1 border-t">
+        <div className="text-xs text-muted-foreground py-1">
+          {loadingDetail
+            ? "Loading files..."
+            : `${files.length} file${files.length !== 1 ? "s" : ""} changed`}
+        </div>
+        {files.map((file) => (
+          <div
+            key={file.path}
+            className="flex items-center gap-2 py-0.5 text-xs hover:bg-muted/50 rounded px-1 cursor-pointer"
+            onClick={() =>
+              openTab({
+                type: "git-diff",
+                title: `Diff ${basename(file.path)}`,
+                closable: true,
+                metadata: {
+                  projectName,
+                  ref1: commit.parents[0] ?? undefined,
+                  ref2: commit.hash,
+                  filePath: file.path,
+                },
+                projectId: projectName,
+              })
+            }
+          >
+            <span className="flex-1 truncate font-mono">{file.path}</span>
+            {file.additions > 0 && (
+              <span className="text-green-500">+{file.additions}</span>
+            )}
+            {file.deletions > 0 && (
+              <span className="text-red-500">-{file.deletions}</span>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/web/components/git/git-graph-dialog.tsx

@@ -0,0 +1,72 @@
+import { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+
+interface GitGraphDialogProps {
+  type: "branch" | "tag" | null;
+  hash?: string;
+  onClose: () => void;
+  onCreateBranch: (name: string, from: string) => void;
+  onCreateTag: (name: string, hash?: string) => void;
+}
+
+export function GitGraphDialog({
+  type,
+  hash,
+  onClose,
+  onCreateBranch,
+  onCreateTag,
+}: GitGraphDialogProps) {
+  const [inputValue, setInputValue] = useState("");
+
+  const handleSubmit = () => {
+    if (!inputValue.trim()) return;
+    if (type === "branch") {
+      onCreateBranch(inputValue.trim(), hash!);
+    } else {
+      onCreateTag(inputValue.trim(), hash);
+    }
+    onClose();
+  };
+
+  return (
+    <Dialog
+      open={type !== null}
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
+    >
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            {type === "branch" ? "Create Branch" : "Create Tag"}
+          </DialogTitle>
+        </DialogHeader>
+        <Input
+          placeholder={type === "branch" ? "Branch name" : "Tag name"}
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") handleSubmit();
+          }}
+          autoFocus
+        />
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button disabled={!inputValue.trim()} onClick={handleSubmit}>
+            Create
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}