@hienlh/ppm 0.1.0

package/src/web/components/projects/dir-suggest.tsx

@@ -0,0 +1,152 @@
+import { useState, useEffect, useRef, useCallback } from "react";
+import { FolderGit2, Loader2 } from "lucide-react";
+import { api } from "@/lib/api-client";
+import { Input } from "@/components/ui/input";
+
+interface DirSuggestItem {
+  path: string;
+  name: string;
+}
+
+interface DirSuggestProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSelect?: (item: DirSuggestItem) => void;
+  placeholder?: string;
+  autoFocus?: boolean;
+}
+
+export function DirSuggest({ value, onChange, onSelect, placeholder, autoFocus }: DirSuggestProps) {
+  const [allDirs, setAllDirs] = useState<DirSuggestItem[]>([]);
+  const [filtered, setFiltered] = useState<DirSuggestItem[]>([]);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const listRef = useRef<HTMLDivElement>(null);
+  const fetchedRef = useRef(false);
+
+  // Fetch all git dirs once on mount (cached server-side for 5 min)
+  useEffect(() => {
+    if (fetchedRef.current) return;
+    fetchedRef.current = true;
+    setLoading(true);
+    api
+      .get<DirSuggestItem[]>("/api/projects/suggest-dirs")
+      .then((items) => {
+        setAllDirs(items);
+        setFiltered(items.slice(0, 50));
+        setShowSuggestions(items.length > 0);
+      })
+      .catch(() => setAllDirs([]))
+      .finally(() => setLoading(false));
+  }, []);
+
+  // Filter locally when value changes
+  useEffect(() => {
+    if (allDirs.length === 0) return;
+    const q = value.trim().toLowerCase();
+    if (!q) {
+      setFiltered(allDirs.slice(0, 50));
+    } else {
+      setFiltered(
+        allDirs
+          .filter((d) => d.path.toLowerCase().includes(q) || d.name.toLowerCase().includes(q))
+          .slice(0, 50),
+      );
+    }
+    setSelectedIndex(0);
+  }, [value, allDirs]);
+
+  // Scroll selected into view
+  useEffect(() => {
+    const list = listRef.current;
+    if (!list) return;
+    const selected = list.children[selectedIndex] as HTMLElement | undefined;
+    selected?.scrollIntoView({ block: "nearest" });
+  }, [selectedIndex]);
+
+  const handleSelect = useCallback(
+    (item: DirSuggestItem) => {
+      onChange(item.path);
+      onSelect?.(item);
+      setShowSuggestions(false);
+    },
+    [onChange, onSelect],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (!showSuggestions || filtered.length === 0) return;
+
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setSelectedIndex((i) => (i < filtered.length - 1 ? i + 1 : 0));
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setSelectedIndex((i) => (i > 0 ? i - 1 : filtered.length - 1));
+          break;
+        case "Tab":
+        case "Enter":
+          if (filtered[selectedIndex]) {
+            e.preventDefault();
+            handleSelect(filtered[selectedIndex]);
+          }
+          break;
+        case "Escape":
+          e.preventDefault();
+          setShowSuggestions(false);
+          break;
+      }
+    },
+    [showSuggestions, filtered, selectedIndex, handleSelect],
+  );
+
+  return (
+    <div className="relative">
+      <div className="relative">
+        <Input
+          placeholder={placeholder ?? "/home/user/my-project"}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          onKeyDown={handleKeyDown}
+          onFocus={() => filtered.length > 0 && setShowSuggestions(true)}
+          onBlur={() => setTimeout(() => setShowSuggestions(false), 200)}
+          autoFocus={autoFocus}
+        />
+        {loading && (
+          <Loader2 className="absolute right-2 top-1/2 -translate-y-1/2 size-4 text-text-subtle animate-spin" />
+        )}
+      </div>
+      {showSuggestions && filtered.length > 0 && (
+        <div className="absolute z-50 left-0 right-0 top-full mt-1 max-h-48 overflow-y-auto rounded-md border border-border bg-surface shadow-lg">
+          <div ref={listRef} className="py-1">
+            {filtered.map((item, i) => (
+              <button
+                key={item.path}
+                type="button"
+                className={`flex items-center gap-2 w-full px-3 py-1.5 text-left text-sm transition-colors ${
+                  i === selectedIndex
+                    ? "bg-primary/10 text-primary"
+                    : "hover:bg-surface-hover text-text-primary"
+                }`}
+                onMouseEnter={() => setSelectedIndex(i)}
+                onMouseDown={(e) => {
+                  e.preventDefault();
+                  handleSelect(item);
+                }}
+              >
+                <FolderGit2 className="size-4 text-green-500 shrink-0" />
+                <div className="min-w-0 flex-1 flex items-baseline gap-2">
+                  <span className="font-medium">{item.name}</span>
+                  <span className="text-xs text-text-subtle truncate">{item.path}</span>
+                </div>
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/web/components/projects/project-list.tsx

@@ -0,0 +1,187 @@
+import { useEffect, useState, useCallback } from "react";
+import { FolderOpen, GitBranch, Circle, Plus } from "lucide-react";
+import { useProjectStore } from "@/stores/project-store";
+import { useTabStore } from "@/stores/tab-store";
+import { api } from "@/lib/api-client";
+import { cn } from "@/lib/utils";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { DirSuggest } from "./dir-suggest";
+
+export function ProjectList() {
+  const { projects, activeProject, setActiveProject, fetchProjects, loading, error } =
+    useProjectStore();
+  const openTab = useTabStore((s) => s.openTab);
+  const [showAdd, setShowAdd] = useState(false);
+  const [addPath, setAddPath] = useState("");
+  const [addName, setAddName] = useState("");
+  const [addError, setAddError] = useState("");
+
+  useEffect(() => {
+    fetchProjects();
+  }, [fetchProjects]);
+
+  function handleClick(project: (typeof projects)[number]) {
+    setActiveProject(project);
+  }
+
+  function handleOpen(project: (typeof projects)[number]) {
+    setActiveProject(project);
+    openTab({
+      type: "terminal",
+      title: `Terminal - ${project.name}`,
+      metadata: { projectName: project.name },
+      projectId: project.name,
+      closable: true,
+    });
+  }
+
+  const handleAddProject = useCallback(async () => {
+    if (!addPath.trim()) return;
+    setAddError("");
+    try {
+      await api.post("/api/projects", {
+        path: addPath.trim(),
+        name: addName.trim() || undefined,
+      });
+      await fetchProjects();
+      setShowAdd(false);
+      setAddPath("");
+      setAddName("");
+    } catch (e) {
+      setAddError(e instanceof Error ? e.message : "Failed to add project");
+    }
+  }, [addPath, addName, fetchProjects]);
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center h-full p-4">
+        <p className="text-error text-sm">{error}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full p-4 space-y-4 overflow-auto">
+      <div className="flex items-center justify-between">
+        <h2 className="text-lg font-semibold">Projects</h2>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => setShowAdd(true)}
+          className="gap-1.5"
+        >
+          <Plus className="size-4" />
+          Add Project
+        </Button>
+      </div>
+
+      {loading && (
+        <p className="text-text-secondary text-sm">Loading projects...</p>
+      )}
+
+      {!loading && projects.length === 0 && (
+        <div className="text-center py-8 space-y-2">
+          <FolderOpen className="size-10 mx-auto text-text-subtle" />
+          <p className="text-text-secondary text-sm">No projects registered</p>
+          <p className="text-text-subtle text-xs">
+            Click "Add Project" or use <code className="font-mono bg-surface-elevated px-1 py-0.5 rounded">ppm projects add &lt;path&gt;</code>
+          </p>
+        </div>
+      )}
+
+      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+        {projects.map((project) => (
+          <button
+            key={project.name}
+            onClick={() => handleClick(project)}
+            onDoubleClick={() => handleOpen(project)}
+            className={cn(
+              "text-left p-4 rounded-lg border transition-colors",
+              "min-h-[44px]",
+              activeProject?.name === project.name
+                ? "bg-surface border-primary"
+                : "bg-surface border-border hover:border-text-subtle",
+            )}
+          >
+            <div className="flex items-start gap-3">
+              <FolderOpen className="size-5 text-primary shrink-0 mt-0.5" />
+              <div className="flex-1 min-w-0 space-y-1">
+                <p className="font-medium truncate">{project.name}</p>
+                <p className="text-xs text-text-secondary truncate">
+                  {project.path}
+                </p>
+                {project.branch && (
+                  <div className="flex items-center gap-1.5 text-xs text-text-secondary">
+                    <GitBranch className="size-3" />
+                    <span>{project.branch}</span>
+                    {project.status && (
+                      <Circle
+                        className={cn(
+                          "size-2 fill-current",
+                          project.status === "clean"
+                            ? "text-success"
+                            : "text-warning",
+                        )}
+                      />
+                    )}
+                  </div>
+                )}
+              </div>
+            </div>
+          </button>
+        ))}
+      </div>
+
+      {/* Add Project Dialog */}
+      <Dialog open={showAdd} onOpenChange={setShowAdd}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Add Project</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-3">
+            <div>
+              <label className="text-sm text-text-secondary">Path (required)</label>
+              <DirSuggest
+                value={addPath}
+                onChange={setAddPath}
+                onSelect={(item) => {
+                  if (!addName.trim()) setAddName(item.name);
+                }}
+                placeholder="/home/user/my-project"
+                autoFocus
+              />
+            </div>
+            <div>
+              <label className="text-sm text-text-secondary">Name (optional)</label>
+              <Input
+                placeholder="Auto-detected from folder name"
+                value={addName}
+                onChange={(e) => setAddName(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && handleAddProject()}
+              />
+            </div>
+            {addError && (
+              <p className="text-sm text-error">{addError}</p>
+            )}
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowAdd(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleAddProject} disabled={!addPath.trim()}>
+              Add
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

package/src/web/components/settings/settings-tab.tsx

@@ -0,0 +1,57 @@
+import { Moon, Sun, Monitor } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { useSettingsStore, type Theme } from "@/stores/settings-store";
+import { cn } from "@/lib/utils";
+
+const THEME_OPTIONS: { value: Theme; label: string; icon: React.ElementType }[] = [
+  { value: "light", label: "Light", icon: Sun },
+  { value: "dark", label: "Dark", icon: Moon },
+  { value: "system", label: "System", icon: Monitor },
+];
+
+export function SettingsTab() {
+  const { theme, setTheme } = useSettingsStore();
+
+  return (
+    <div className="h-full p-4 space-y-6 overflow-auto max-w-lg">
+      <h2 className="text-lg font-semibold">Settings</h2>
+
+      <div className="space-y-3">
+        <h3 className="text-sm font-medium text-text-secondary">Theme</h3>
+        <div className="flex gap-2">
+          {THEME_OPTIONS.map((opt) => {
+            const Icon = opt.icon;
+            return (
+              <Button
+                key={opt.value}
+                variant={theme === opt.value ? "default" : "outline"}
+                size="lg"
+                onClick={() => setTheme(opt.value)}
+                className={cn(
+                  "flex-1 gap-2",
+                  theme === opt.value && "ring-2 ring-primary",
+                )}
+              >
+                <Icon className="size-4" />
+                {opt.label}
+              </Button>
+            );
+          })}
+        </div>
+      </div>
+
+      <Separator />
+
+      <div className="space-y-3">
+        <h3 className="text-sm font-medium text-text-secondary">About</h3>
+        <p className="text-sm text-text-secondary">
+          PPM — Personal Project Manager
+        </p>
+        <p className="text-xs text-text-subtle">
+          A mobile-first web IDE for managing your projects.
+        </p>
+      </div>
+    </div>
+  );
+}

package/src/web/components/terminal/terminal-placeholder.tsx

@@ -0,0 +1,10 @@
+import { Terminal } from "lucide-react";
+
+export function TerminalPlaceholder() {
+  return (
+    <div className="flex flex-col items-center justify-center h-full gap-3 text-text-secondary">
+      <Terminal className="size-10 text-text-subtle" />
+      <p className="text-sm">Terminal — coming in Phase 5</p>
+    </div>
+  );
+}

package/src/web/components/terminal/terminal-tab.tsx

@@ -0,0 +1,133 @@
+import { useRef, useEffect, useState, useCallback } from "react";
+import { useTerminal } from "@/hooks/use-terminal";
+import { cn } from "@/lib/utils";
+import "@xterm/xterm/css/xterm.css";
+
+interface TerminalTabProps {
+  metadata?: Record<string, unknown>;
+}
+
+const MOBILE_KEYS = [
+  { label: "Tab", value: "\t" },
+  { label: "Esc", value: "\x1b" },
+  { label: "Ctrl", value: null, isModifier: true },
+  { label: "\u2191", value: "\x1b[A" },
+  { label: "\u2193", value: "\x1b[B" },
+  { label: "\u2190", value: "\x1b[D" },
+  { label: "\u2192", value: "\x1b[C" },
+] as const;
+
+export function TerminalTab({ metadata }: TerminalTabProps) {
+  const sessionId = (metadata?.sessionId as string) ?? "new";
+  const projectName = metadata?.projectName as string | undefined;
+  const containerRef = useRef<HTMLDivElement>(null);
+  const { connected, reconnecting } = useTerminal({ sessionId, projectName, containerRef });
+  const [ctrlMode, setCtrlMode] = useState(false);
+  const [viewportHeight, setViewportHeight] = useState<number | null>(null);
+
+  // Adjust height when mobile keyboard opens
+  useEffect(() => {
+    const vv = window.visualViewport;
+    if (!vv) return;
+
+    function handleResize() {
+      if (!vv) return;
+      setViewportHeight(vv.height);
+    }
+
+    vv.addEventListener("resize", handleResize);
+    return () => vv.removeEventListener("resize", handleResize);
+  }, []);
+
+  const sendKey = useCallback(
+    (value: string) => {
+      // Access the terminal container's xterm instance indirectly via the WS
+      // The useTerminal hook handles this — we need to dispatch to the terminal
+      const termElement = containerRef.current?.querySelector(
+        ".xterm-helper-textarea",
+      ) as HTMLTextAreaElement | null;
+
+      if (termElement) {
+        termElement.focus();
+      }
+
+      // For Ctrl combos, we rely on the terminal processing keystrokes
+      // For direct chars, dispatch input event
+      if (ctrlMode && value.length === 1) {
+        // Ctrl+key: send char code 1-26 for a-z
+        const code = value.toLowerCase().charCodeAt(0) - 96;
+        if (code >= 1 && code <= 26) {
+          // The terminal onData handler in useTerminal sends to WS
+          const event = new KeyboardEvent("keydown", {
+            key: value,
+            ctrlKey: true,
+            bubbles: true,
+          });
+          termElement?.dispatchEvent(event);
+        }
+        setCtrlMode(false);
+        return;
+      }
+
+      // For simple values, use input event approach by focusing textarea
+      // xterm handles the rest
+    },
+    [ctrlMode],
+  );
+
+  const isMobile = typeof window !== "undefined" && "ontouchstart" in window;
+
+  return (
+    <div
+      className="flex flex-col h-full"
+      style={viewportHeight ? { maxHeight: `${viewportHeight}px` } : undefined}
+    >
+      {/* Status bar */}
+      <div className="flex items-center gap-2 px-3 py-1 bg-surface border-b border-border text-xs">
+        <span
+          className={cn(
+            "size-2 rounded-full",
+            connected ? "bg-success" : reconnecting ? "bg-warning" : "bg-error",
+          )}
+        />
+        <span className="text-text-secondary">
+          {connected
+            ? "Connected"
+            : reconnecting
+              ? "Reconnecting..."
+              : "Disconnected"}
+        </span>
+        <span className="text-text-subtle ml-auto font-mono">{sessionId}</span>
+      </div>
+
+      {/* Terminal container */}
+      <div ref={containerRef} className="flex-1 min-h-0 bg-background p-1" />
+
+      {/* Mobile toolbar */}
+      {isMobile && (
+        <div className="flex items-center gap-1 px-2 py-1.5 bg-surface border-t border-border overflow-x-auto">
+          {MOBILE_KEYS.map((key) => (
+            <button
+              key={key.label}
+              onClick={() => {
+                if (key.label === "Ctrl") {
+                  setCtrlMode(!ctrlMode);
+                } else if (key.value) {
+                  sendKey(key.value);
+                }
+              }}
+              className={cn(
+                "px-3 py-1.5 rounded text-xs font-mono min-w-[36px] min-h-[32px]",
+                "bg-surface-elevated text-text-primary active:bg-primary active:text-primary-foreground",
+                "transition-colors select-none",
+                key.label === "Ctrl" && ctrlMode && "bg-primary text-primary-foreground",
+              )}
+            >
+              {key.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/web/components/ui/button.tsx

@@ -0,0 +1,64 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }