@hienlh/ppm 0.1.4 → 0.2.0

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

@@ -1,89 +1,125 @@
-import { FolderOpen, ChevronRight, ChevronDown } from "lucide-react";
-import { useProjectStore } from "@/stores/project-store";
+import { useState, useMemo } from "react";
+import { FolderOpen, ChevronDown, Check, Plus, Search } from "lucide-react";
+import { useProjectStore, sortByRecent } from "@/stores/project-store";
 import { useTabStore } from "@/stores/tab-store";
-import { cn } from "@/lib/utils";
 import { FileTree } from "@/components/explorer/file-tree";
-import { Separator } from "@/components/ui/separator";
-import { useState } from "react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { cn } from "@/lib/utils";
+
+/** Max projects shown before needing to search (desktop) */
+const MAX_VISIBLE = 8;
 
 export function Sidebar() {
   const { projects, activeProject, setActiveProject, loading } =
     useProjectStore();
   const openTab = useTabStore((s) => s.openTab);
-  const [projectsExpanded, setProjectsExpanded] = useState(true);
+  const [query, setQuery] = useState("");
+
+  const sorted = useMemo(() => sortByRecent(projects), [projects]);
+
+  const filtered = useMemo(() => {
+    if (!query.trim()) return sorted.slice(0, MAX_VISIBLE);
+    const q = query.toLowerCase();
+    return sorted.filter(
+      (p) => p.name.toLowerCase().includes(q) || p.path.toLowerCase().includes(q),
+    );
+  }, [sorted, query]);
 
-  function handleProjectClick(project: (typeof projects)[number]) {
-    setActiveProject(project);
+  const showSearch = projects.length > MAX_VISIBLE || query.length > 0;
+
+  function handleAddProject() {
+    openTab({ type: "projects", title: "Projects", projectId: null, closable: true });
   }
 
   return (
-    <aside className="hidden md:flex flex-col w-[280px] min-w-[280px] bg-background border-r border-border overflow-y-auto">
-      {/* Projects section header */}
-      <button
-        onClick={() => setProjectsExpanded(!projectsExpanded)}
-        className="flex items-center gap-2 px-4 py-3 border-b border-border hover:bg-surface-elevated transition-colors"
-      >
-        {projectsExpanded ? (
-          <ChevronDown className="size-3.5 text-text-subtle" />
-        ) : (
-          <ChevronRight className="size-3.5 text-text-subtle" />
-        )}
-        <FolderOpen className="size-4 text-primary" />
-        <span className="text-sm font-semibold">Projects</span>
-      </button>
-
-      {/* Projects list (collapsible) */}
-      {projectsExpanded && (
-        <div className="p-2 space-y-1">
-          {loading && (
-            <p className="px-2 py-1 text-xs text-text-secondary">Loading...</p>
-          )}
+    <aside className="hidden md:flex flex-col w-[280px] min-w-[280px] bg-background border-r border-border overflow-hidden">
+      {/* Logo + project dropdown — same height as tab bar */}
+      <div className="flex items-center gap-2 px-3 h-[41px] border-b border-border shrink-0">
+        <span className="text-sm font-bold text-primary tracking-tight shrink-0">PPM</span>
 
-          {!loading && projects.length === 0 && (
-            <p className="px-2 py-1 text-xs text-text-secondary">
-              No projects found. Register one via CLI.
-            </p>
-          )}
+        <DropdownMenu onOpenChange={() => setQuery("")}>
+          <DropdownMenuTrigger asChild>
+            <button className="flex items-center gap-1.5 px-2 py-1 rounded-md hover:bg-surface-elevated transition-colors min-w-0 flex-1">
+              <FolderOpen className="size-3.5 text-text-subtle shrink-0" />
+              <span className="text-sm truncate flex-1 text-left">
+                {activeProject?.name ?? "Select Project"}
+              </span>
+              <ChevronDown className="size-3 text-text-subtle shrink-0" />
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" className="w-[360px] p-0">
+            {/* Search — only when many projects */}
+            {showSearch && (
+              <div className="flex items-center gap-2 px-2.5 py-2 border-b border-border">
+                <Search className="size-3.5 text-text-subtle shrink-0" />
+                <input
+                  type="text"
+                  value={query}
+                  onChange={(e) => setQuery(e.target.value)}
+                  placeholder="Search projects..."
+                  className="flex-1 bg-transparent text-sm outline-none placeholder:text-text-subtle text-text-primary"
+                  autoFocus
+                />
+              </div>
+            )}
 
-          {projects.map((project) => (
-            <button
-              key={project.name}
-              onClick={() => handleProjectClick(project)}
-              className={cn(
-                "w-full flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors text-left",
-                "min-h-[44px]",
-                activeProject?.name === project.name
-                  ? "bg-surface text-foreground"
-                  : "text-text-secondary hover:bg-surface-elevated hover:text-foreground",
+            {/* Project list */}
+            <div className="max-h-64 overflow-y-auto py-1">
+              {loading && (
+                <p className="px-3 py-1.5 text-xs text-text-secondary">Loading...</p>
               )}
-            >
-              <FolderOpen className="size-4 shrink-0" />
-              <div className="flex-1 min-w-0">
-                <p className="truncate font-medium">{project.name}</p>
-                <p className="truncate text-xs text-text-subtle">
-                  {project.path}
+              {!loading && filtered.length === 0 && (
+                <p className="px-3 py-2 text-xs text-text-subtle text-center">
+                  {query ? "No matches" : "No projects"}
                 </p>
-              </div>
-              {project.branch && (
-                <span className="text-xs text-primary shrink-0">
-                  {project.branch}
-                </span>
               )}
-              <ChevronRight className="size-3 text-text-subtle shrink-0" />
+              {filtered.map((project) => (
+                <button
+                  key={project.name}
+                  onClick={() => setActiveProject(project)}
+                  className={cn(
+                    "w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left transition-colors hover:bg-surface-elevated",
+                    activeProject?.name === project.name && "bg-accent/10",
+                  )}
+                >
+                  <FolderOpen className="size-3.5 shrink-0 text-text-subtle" />
+                  <span className="truncate font-semibold text-text-primary">{project.name}</span>
+                  <span className="truncate text-xs text-text-subtle ml-auto">{project.path}</span>
+                  {activeProject?.name === project.name && (
+                    <Check className="size-3.5 text-primary shrink-0" />
+                  )}
+                </button>
+              ))}
+            </div>
+
+            <DropdownMenuSeparator className="my-0" />
+            <button
+              onClick={handleAddProject}
+              className="w-full flex items-center gap-2 px-3 py-2 text-sm text-text-secondary hover:bg-surface-elevated transition-colors"
+            >
+              <Plus className="size-3.5 shrink-0" />
+              <span>Add Project...</span>
             </button>
-          ))}
-        </div>
-      )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
 
-      {/* File tree section */}
-      {activeProject && (
-        <>
-          <Separator />
-          <div className="flex items-center gap-2 px-4 py-2 text-xs font-semibold text-text-secondary uppercase tracking-wider">
-            Files
-          </div>
+      {/* File tree */}
+      {activeProject ? (
+        <div className="flex-1 overflow-y-auto">
           <FileTree />
-        </>
+        </div>
+      ) : (
+        <div className="flex-1 flex items-center justify-center p-4">
+          <p className="text-xs text-text-subtle text-center">
+            Select a project to browse files
+          </p>
+        </div>
       )}
     </aside>
   );

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

@@ -34,7 +34,6 @@ const TAB_ICONS: Record<TabType, React.ElementType> = {
 };
 
 const NEW_TAB_OPTIONS: { type: TabType; label: string }[] = [
-  { type: "projects", label: "Projects" },
   { type: "terminal", label: "Terminal" },
   { type: "chat", label: "AI Chat" },
   { type: "git-graph", label: "Git Graph" },
@@ -76,7 +75,7 @@ export function TabBar() {
   }
 
   return (
-    <div className="hidden md:flex items-center border-b border-border bg-background">
+    <div className="hidden md:flex items-center h-[41px] border-b border-border bg-background">
       <ScrollArea className="flex-1">
         <div className="flex items-center gap-0.5 px-2 py-1">
           {tabs.map((tab) => {

package/src/web/components/settings/ai-settings-section.tsx

@@ -0,0 +1,166 @@
+import { useState, useEffect } from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { getAISettings, updateAISettings, type AISettings } from "@/lib/api-settings";
+
+const MODEL_OPTIONS = [
+  { value: "claude-sonnet-4-6", label: "Claude Sonnet 4.6" },
+  { value: "claude-opus-4-6", label: "Claude Opus 4.6" },
+  { value: "claude-haiku-4-5", label: "Claude Haiku 4.5" },
+];
+
+const EFFORT_OPTIONS = [
+  { value: "low", label: "Low" },
+  { value: "medium", label: "Medium" },
+  { value: "high", label: "High" },
+  { value: "max", label: "Max" },
+];
+
+export function AISettingsSection() {
+  const [settings, setSettings] = useState<AISettings | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  // Revision counter forces number inputs to re-render with fresh defaultValue after save
+  const [revision, setRevision] = useState(0);
+
+  useEffect(() => {
+    getAISettings().then(setSettings).catch((e) => setError(e.message));
+  }, []);
+
+  const providerName = settings?.default_provider ?? "claude";
+  const config = settings?.providers[providerName];
+
+  const handleSave = async (field: string, value: unknown) => {
+    if (!settings) return;
+    setSaving(true);
+    setError(null);
+    try {
+      const updated = await updateAISettings({
+        providers: { [providerName]: { [field]: value } },
+      });
+      setSettings(updated);
+      setRevision((r) => r + 1);
+    } catch (e) {
+      setError((e as Error).message);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (!settings) {
+    return (
+      <div className="space-y-3">
+        <h3 className="text-sm font-medium text-text-secondary">AI Provider</h3>
+        <p className="text-sm text-text-subtle">
+          {error ? `Error: ${error}` : "Loading..."}
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <h3 className="text-sm font-medium text-text-secondary">AI Provider</h3>
+
+      <div className="space-y-3">
+        <div className="space-y-1.5">
+          <Label htmlFor="ai-model">Model</Label>
+          <Select
+            value={config?.model ?? "claude-sonnet-4-6"}
+            onValueChange={(v) => handleSave("model", v)}
+          >
+            <SelectTrigger id="ai-model" className="w-full">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {MODEL_OPTIONS.map((opt) => (
+                <SelectItem key={opt.value} value={opt.value}>
+                  {opt.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="space-y-1.5">
+          <Label htmlFor="ai-effort">Effort</Label>
+          <Select
+            value={config?.effort ?? "high"}
+            onValueChange={(v) => handleSave("effort", v)}
+          >
+            <SelectTrigger id="ai-effort" className="w-full">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {EFFORT_OPTIONS.map((opt) => (
+                <SelectItem key={opt.value} value={opt.value}>
+                  {opt.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="space-y-1.5">
+          <Label htmlFor="ai-max-turns">Max Turns (1-500)</Label>
+          <Input
+            key={`turns-${revision}`}
+            id="ai-max-turns"
+            type="number"
+            min={1}
+            max={500}
+            defaultValue={config?.max_turns ?? 100}
+            onBlur={(e) => {
+              const val = parseInt(e.target.value);
+              if (!isNaN(val)) handleSave("max_turns", val);
+            }}
+          />
+        </div>
+
+        <div className="space-y-1.5">
+          <Label htmlFor="ai-budget">Max Budget (USD)</Label>
+          <Input
+            key={`budget-${revision}`}
+            id="ai-budget"
+            type="number"
+            step={0.1}
+            min={0.01}
+            max={50}
+            defaultValue={config?.max_budget_usd ?? ""}
+            placeholder="No limit"
+            onBlur={(e) => {
+              const val = parseFloat(e.target.value);
+              handleSave("max_budget_usd", isNaN(val) ? undefined : val);
+            }}
+          />
+        </div>
+
+        <div className="space-y-1.5">
+          <Label htmlFor="ai-thinking">Thinking Budget (tokens)</Label>
+          <Input
+            key={`thinking-${revision}`}
+            id="ai-thinking"
+            type="number"
+            min={0}
+            defaultValue={config?.thinking_budget_tokens ?? ""}
+            placeholder="Disabled"
+            onBlur={(e) => {
+              const val = parseInt(e.target.value);
+              handleSave("thinking_budget_tokens", isNaN(val) ? undefined : val);
+            }}
+          />
+        </div>
+      </div>
+
+      {saving && <p className="text-xs text-text-subtle">Saving...</p>}
+      {error && <p className="text-xs text-red-500">{error}</p>}
+    </div>
+  );
+}

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

@@ -3,6 +3,7 @@ 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";
+import { AISettingsSection } from "./ai-settings-section";
 
 const THEME_OPTIONS: { value: Theme; label: string; icon: React.ElementType }[] = [
   { value: "light", label: "Light", icon: Sun },
@@ -43,6 +44,10 @@ export function SettingsTab() {
 
       <Separator />
 
+      <AISettingsSection />
+
+      <Separator />
+
       <div className="space-y-3">
         <h3 className="text-sm font-medium text-text-secondary">About</h3>
         <p className="text-sm text-text-secondary">

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

@@ -1,6 +1,7 @@
 import { useRef, useEffect, useState, useCallback } from "react";
 import { useTerminal } from "@/hooks/use-terminal";
 import { cn } from "@/lib/utils";
+import { Copy, ClipboardPaste } from "lucide-react";
 import "@xterm/xterm/css/xterm.css";
 
 interface TerminalTabProps {
@@ -21,7 +22,7 @@ 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 { connected, reconnecting, sendData, getSelection } = useTerminal({ sessionId, projectName, containerRef });
   const [ctrlMode, setCtrlMode] = useState(false);
   const [viewportHeight, setViewportHeight] = useState<number | null>(null);
 
@@ -39,42 +40,51 @@ export function TerminalTab({ metadata }: TerminalTabProps) {
     return () => vv.removeEventListener("resize", handleResize);
   }, []);
 
+  const focusTerminal = useCallback(() => {
+    const termElement = containerRef.current?.querySelector(
+      ".xterm-helper-textarea",
+    ) as HTMLTextAreaElement | null;
+    termElement?.focus();
+  }, []);
+
   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();
-      }
+      focusTerminal();
 
-      // 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);
+          sendData(String.fromCharCode(code));
         }
         setCtrlMode(false);
         return;
       }
 
-      // For simple values, use input event approach by focusing textarea
-      // xterm handles the rest
+      sendData(value);
     },
-    [ctrlMode],
+    [ctrlMode, sendData, focusTerminal],
   );
 
+  const handleCopy = useCallback(async () => {
+    const selection = getSelection();
+    if (selection) {
+      await navigator.clipboard.writeText(selection);
+    }
+  }, [getSelection]);
+
+  const handlePaste = useCallback(async () => {
+    try {
+      const text = await navigator.clipboard.readText();
+      if (text) {
+        sendData(text);
+        focusTerminal();
+      }
+    } catch {
+      // Clipboard permission denied
+    }
+  }, [sendData, focusTerminal]);
+
   const isMobile = typeof window !== "undefined" && "ontouchstart" in window;
 
   return (
@@ -106,6 +116,19 @@ export function TerminalTab({ metadata }: TerminalTabProps) {
       {/* Mobile toolbar */}
       {isMobile && (
         <div className="flex items-center gap-1 px-2 py-1.5 bg-surface border-t border-border overflow-x-auto">
+          <button
+            onClick={handleCopy}
+            className="px-2 py-1.5 rounded text-xs min-w-[36px] min-h-[32px] bg-surface-elevated text-text-primary active:bg-primary active:text-primary-foreground transition-colors select-none"
+          >
+            <Copy size={14} />
+          </button>
+          <button
+            onClick={handlePaste}
+            className="px-2 py-1.5 rounded text-xs min-w-[36px] min-h-[32px] bg-surface-elevated text-text-primary active:bg-primary active:text-primary-foreground transition-colors select-none"
+          >
+            <ClipboardPaste size={14} />
+          </button>
+          <div className="w-px h-5 bg-border mx-0.5" />
           {MOBILE_KEYS.map((key) => (
             <button
               key={key.label}

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

@@ -8,9 +8,10 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
-        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
-        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+        "h-9 w-full min-w-0 rounded-lg border border-border bg-surface px-3 py-2 text-base md:text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        "selection:bg-primary selection:text-primary-foreground",
+        "file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
+        "aria-invalid:border-destructive",
         className
       )}
       {...props}

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

@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import { Label as LabelPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }