@hienlh/ppm 0.9.9 → 0.9.11

package/src/web/components/chat/team-activity-popover.tsx

@@ -0,0 +1,202 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+import { RefreshCw, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { api } from "@/lib/api-client";
+import type { TeamMessageItem } from "@/hooks/use-chat";
+
+interface TeamActivityPopoverProps {
+  teamNames: string[];
+  messages: TeamMessageItem[];
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+const STATUS_COLORS: Record<string, string> = {
+  active: "bg-green-500",
+  idle: "bg-yellow-500",
+  shutdown: "bg-zinc-400",
+};
+
+const TYPE_BADGES: Record<string, { label: string; className: string }> = {
+  task_assignment: { label: "task", className: "bg-blue-500/20 text-blue-400" },
+  idle_notification: { label: "idle", className: "bg-yellow-500/20 text-yellow-400" },
+  completion: { label: "done", className: "bg-green-500/20 text-green-400" },
+  shutdown_request: { label: "shutdown", className: "bg-red-500/20 text-red-400" },
+  shutdown_approved: { label: "shutdown ✓", className: "bg-zinc-500/20 text-zinc-400" },
+};
+
+export function TeamActivityPopover({ teamNames, messages, open, onOpenChange }: TeamActivityPopoverProps) {
+  const [selectedTeam, setSelectedTeam] = useState(teamNames[0] ?? "");
+  const [members, setMembers] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  // Sync selected team when teamNames changes
+  useEffect(() => {
+    if (teamNames.length > 0 && !teamNames.includes(selectedTeam)) {
+      setSelectedTeam(teamNames[0]!);
+    }
+  }, [teamNames, selectedTeam]);
+
+  const fetchTeamDetail = useCallback(async (name: string) => {
+    setLoading(true);
+    try {
+      const detail = await api.get<any>(`/api/teams/${encodeURIComponent(name)}`);
+      setMembers(detail?.members ?? []);
+    } catch { setMembers([]); }
+    setLoading(false);
+  }, []);
+
+  // Fetch members on mount and tab switch
+  useEffect(() => {
+    if (open && selectedTeam) fetchTeamDetail(selectedTeam);
+  }, [open, selectedTeam, fetchTeamDetail]);
+
+  // Auto-scroll messages
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages.length]);
+
+  // Close on outside click
+  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]);
+
+  if (!open) return null;
+
+  // Filter messages relevant to selected team (all for now — teams share the same messages array)
+  const teamMessages = messages;
+  const displayMessages = teamMessages.slice(-200);
+
+  return (
+    <div
+      ref={panelRef}
+      className="absolute bottom-full left-0 mb-2 w-80 md:w-96 bg-surface border border-border rounded-lg shadow-lg z-50 overflow-hidden"
+    >
+      {/* Header with tabs */}
+      <div className="flex items-center justify-between px-3 py-2 border-b border-border bg-surface-elevated">
+        <div className="flex items-center gap-1 overflow-x-auto min-w-0">
+          {teamNames.map((name) => (
+            <button
+              key={name}
+              onClick={() => setSelectedTeam(name)}
+              className={cn(
+                "px-2 py-0.5 text-[11px] rounded-md whitespace-nowrap transition-colors",
+                selectedTeam === name
+                  ? "bg-primary/10 text-primary font-medium"
+                  : "text-text-subtle hover:text-text-primary"
+              )}
+            >
+              {name}
+            </button>
+          ))}
+        </div>
+        <div className="flex items-center gap-1 shrink-0">
+          <button
+            onClick={() => selectedTeam && fetchTeamDetail(selectedTeam)}
+            className="text-text-subtle hover:text-foreground p-1"
+            aria-label="Refresh"
+          >
+            <RefreshCw className={cn("size-3", loading && "animate-spin")} />
+          </button>
+          <button
+            onClick={() => onOpenChange(false)}
+            className="text-text-subtle hover:text-foreground p-1"
+            aria-label="Close"
+          >
+            <X className="size-3" />
+          </button>
+        </div>
+      </div>
+
+      {/* Members */}
+      {members.length > 0 && (
+        <div className="px-3 py-2 border-b border-border">
+          <div className="text-[10px] text-text-subtle uppercase tracking-wider mb-1">Members</div>
+          <div className="space-y-1">
+            {members.map((m: any) => (
+              <div key={m.name} className="flex items-center gap-2 text-xs">
+                <span className={cn("size-1.5 rounded-full shrink-0", STATUS_COLORS[m.status] ?? "bg-zinc-400")} />
+                <span className="font-medium truncate">{m.name}</span>
+                {m.model && m.model !== "unknown" && (
+                  <span className="text-text-subtle text-[10px]">({m.model})</span>
+                )}
+                <span className="ml-auto text-text-subtle text-[10px]">{m.status}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Messages */}
+      <div className="max-h-64 overflow-y-auto px-3 py-2">
+        {displayMessages.length === 0 ? (
+          <p className="text-xs text-text-subtle text-center py-4">No messages yet</p>
+        ) : (
+          <div className="space-y-2">
+            {displayMessages.map((msg, i) => {
+              const badge = msg.parsedType ? TYPE_BADGES[msg.parsedType] : null;
+              const time = formatTime(msg.timestamp);
+              return (
+                <div key={`${msg.timestamp}-${i}`} className="text-xs">
+                  <div className="flex items-center gap-1 text-text-subtle">
+                    <span className="font-medium" style={safeColor(msg.color)}>
+                      {msg.from}
+                    </span>
+                    <span>→</span>
+                    <span>{msg.to}</span>
+                    <span className="ml-auto text-[10px]">{time}</span>
+                  </div>
+                  <div className="mt-0.5 text-foreground/90 break-words">
+                    {badge && (
+                      <span className={cn("inline-block px-1 py-0 rounded text-[9px] mr-1", badge.className)}>
+                        {badge.label}
+                      </span>
+                    )}
+                    {msg.summary ?? truncateText(msg.text)}
+                  </div>
+                </div>
+              );
+            })}
+            <div ref={messagesEndRef} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function formatTime(timestamp: string): string {
+  try {
+    const d = new Date(timestamp);
+    return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" });
+  } catch { return ""; }
+}
+
+/** Sanitize color value to prevent CSS injection */
+function safeColor(color?: string): React.CSSProperties | undefined {
+  if (!color) return undefined;
+  // Only allow hex colors and named CSS colors (no url(), expression(), etc.)
+  if (/^#[0-9a-fA-F]{3,8}$/.test(color) || /^[a-zA-Z]{3,20}$/.test(color)) {
+    return { color };
+  }
+  return undefined;
+}
+
+function truncateText(text: string, max = 120): string {
+  if (!text) return "";
+  // Try to parse JSON for structured messages
+  try {
+    const parsed = JSON.parse(text);
+    return parsed.summary ?? parsed.text ?? text.slice(0, max);
+  } catch {}
+  return text.length > max ? text.slice(0, max) + "..." : text;
+}

package/src/web/components/git/create-worktree-dialog.tsx

@@ -0,0 +1,232 @@
+import { useState, useEffect } from "react";
+import { Loader2, X } from "lucide-react";
+import { api, projectUrl } from "@/lib/api-client";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import type { GitBranch } from "../../../types/git";
+import { cn } from "@/lib/utils";
+
+interface CreateWorktreeDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  projectName: string;
+  onCreated: () => void;
+}
+
+type BranchMode = "existing" | "new";
+
+/** Mobile bottom sheet + desktop dialog for creating a git worktree. */
+export function CreateWorktreeDialog({
+  open,
+  onOpenChange,
+  projectName,
+  onCreated,
+}: CreateWorktreeDialogProps) {
+  const [worktreePath, setWorktreePath] = useState("");
+  const [branchMode, setBranchMode] = useState<BranchMode>("new");
+  const [newBranch, setNewBranch] = useState("");
+  const [existingBranch, setExistingBranch] = useState("");
+  const [branches, setBranches] = useState<string[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Fetch available branches when dialog opens
+  useEffect(() => {
+    if (!open || !projectName) return;
+    api
+      .get<GitBranch[]>(`${projectUrl(projectName)}/git/branches`)
+      .then((data) => {
+        const local = data.filter((b) => !b.remote).map((b) => b.name);
+        setBranches(local);
+        if (local.length > 0 && !existingBranch) {
+          setExistingBranch(local[0]!);
+        }
+      })
+      .catch(() => setBranches([]));
+  }, [open, projectName]);
+
+  function reset() {
+    setWorktreePath("");
+    setBranchMode("new");
+    setNewBranch("");
+    setError(null);
+  }
+
+  function handleClose() {
+    reset();
+    onOpenChange(false);
+  }
+
+  async function handleSubmit() {
+    if (!worktreePath.trim()) {
+      setError("Worktree path is required");
+      return;
+    }
+    const selectedBranch = branchMode === "existing" ? existingBranch : undefined;
+    const selectedNewBranch = branchMode === "new" && newBranch.trim() ? newBranch.trim() : undefined;
+
+    setLoading(true);
+    setError(null);
+    try {
+      await api.post(`${projectUrl(projectName)}/git/worktree/add`, {
+        path: worktreePath.trim(),
+        branch: selectedBranch,
+        newBranch: selectedNewBranch,
+      });
+      onCreated();
+      handleClose();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to create worktree");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  const formContent = (
+    <div className="space-y-4">
+      {error && (
+        <p className="text-xs text-destructive bg-destructive/10 px-3 py-2 rounded-md">{error}</p>
+      )}
+
+      <div className="space-y-1.5">
+        <Label htmlFor="wt-path">Worktree Path</Label>
+        <Input
+          id="wt-path"
+          placeholder="../my-feature"
+          value={worktreePath}
+          onChange={(e) => setWorktreePath(e.target.value)}
+          autoFocus
+          className="w-full"
+        />
+        <p className="text-xs text-muted-foreground">
+          Relative or absolute path for the new worktree directory
+        </p>
+      </div>
+
+      <div className="space-y-2">
+        <Label>Branch</Label>
+        <div className="flex gap-3">
+          <label className="flex items-center gap-2 cursor-pointer">
+            <input
+              type="radio"
+              checked={branchMode === "new"}
+              onChange={() => setBranchMode("new")}
+              className="accent-primary"
+            />
+            <span className="text-sm">Create new branch</span>
+          </label>
+          <label className="flex items-center gap-2 cursor-pointer">
+            <input
+              type="radio"
+              checked={branchMode === "existing"}
+              onChange={() => setBranchMode("existing")}
+              className="accent-primary"
+            />
+            <span className="text-sm">Use existing branch</span>
+          </label>
+        </div>
+
+        {branchMode === "new" ? (
+          <Input
+            placeholder="feature/my-branch"
+            value={newBranch}
+            onChange={(e) => setNewBranch(e.target.value)}
+            className="w-full"
+          />
+        ) : (
+          <select
+            value={existingBranch}
+            onChange={(e) => setExistingBranch(e.target.value)}
+            className="w-full h-9 px-3 rounded-md border border-input bg-transparent text-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          >
+            {branches.length === 0 && (
+              <option value="">No branches available</option>
+            )}
+            {branches.map((b) => (
+              <option key={b} value={b}>
+                {b}
+              </option>
+            ))}
+          </select>
+        )}
+      </div>
+    </div>
+  );
+
+  const footer = (
+    <div className="flex gap-2 justify-end pt-2">
+      <Button variant="outline" size="sm" onClick={handleClose} disabled={loading}>
+        Cancel
+      </Button>
+      <Button
+        size="sm"
+        onClick={handleSubmit}
+        disabled={loading || !worktreePath.trim()}
+      >
+        {loading ? <Loader2 className="size-3 animate-spin mr-1" /> : null}
+        Create Worktree
+      </Button>
+    </div>
+  );
+
+  return (
+    <>
+      {/* Desktop: centered dialog */}
+      <Dialog open={open} onOpenChange={(o) => { if (!o) handleClose(); }}>
+        <DialogContent className="hidden md:grid sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Add Worktree</DialogTitle>
+          </DialogHeader>
+          {formContent}
+          <DialogFooter>{footer}</DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Mobile: bottom sheet */}
+      {open && (
+        <div className="md:hidden">
+          {/* Backdrop */}
+          <div
+            className="fixed inset-0 z-50 bg-black/50"
+            onClick={handleClose}
+          />
+          {/* Sheet */}
+          <div
+            className={cn(
+              "fixed bottom-0 left-0 right-0 z-50 bg-background rounded-t-2xl border-t border-border shadow-2xl",
+              "animate-in slide-in-from-bottom-2 duration-200",
+            )}
+          >
+            {/* Drag handle */}
+            <div className="flex justify-center pt-3 pb-1">
+              <div className="w-10 h-1 rounded-full bg-border" />
+            </div>
+            {/* Header */}
+            <div className="flex items-center justify-between px-4 py-2 border-b border-border">
+              <span className="text-sm font-semibold">Add Worktree</span>
+              <button
+                onClick={handleClose}
+                className="flex items-center justify-center size-7 rounded-md hover:bg-surface-elevated transition-colors"
+              >
+                <X className="size-4" />
+              </button>
+            </div>
+            {/* Body */}
+            <div className="px-4 py-4 space-y-4 max-h-[70vh] overflow-y-auto">
+              {formContent}
+              {footer}
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

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

@@ -17,6 +17,8 @@ import { api, projectUrl } from "@/lib/api-client";
 import { basename } from "@/lib/utils";
 import { useTabStore } from "@/stores/tab-store";
 import { useSettingsStore } from "@/stores/settings-store";
+import { useProjectStore } from "@/stores/project-store";
+import { GitWorktreePanel } from "./git-worktree-panel";
 import { Button } from "@/components/ui/button";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import {
@@ -117,6 +119,9 @@ export function GitStatusPanel({ metadata, tabId, onNavigate }: GitStatusPanelPr
   const { openTab } = useTabStore();
   const viewMode = useSettingsStore((s) => s.gitStatusViewMode);
   const setViewMode = useSettingsStore((s) => s.setGitStatusViewMode);
+  const activeProjectPath = useProjectStore((s) =>
+    s.projects.find((p) => p.name === projectName)?.path,
+  );
 
   const fetchStatus = useCallback(async () => {
     if (!projectName) return;
@@ -335,6 +340,14 @@ export function GitStatusPanel({ metadata, tabId, onNavigate }: GitStatusPanelPr
         </div>
       )}
 
+      {/* Worktrees collapsible section */}
+      {projectName && (
+        <GitWorktreePanel
+          projectName={projectName}
+          projectPath={activeProjectPath}
+        />
+      )}
+
       <ScrollArea className="flex-1 overflow-hidden">
         <div className="p-1.5 space-y-2 overflow-hidden">
           {/* Staged Changes */}