@hienlh/ppm 0.9.0-beta.9 → 0.9.1

package/src/web/components/layout/editor-panel.tsx

@@ -1,8 +1,10 @@
-import { Suspense, lazy } from "react";
-import { Loader2, Terminal, MessageSquare, GitBranch } from "lucide-react";
+import { Suspense, lazy, useEffect, useState, useCallback } from "react";
+import { ChevronDown, ChevronUp, Loader2, Terminal, MessageSquare, GitBranch, Pin, PinOff } from "lucide-react";
 import { usePanelStore } from "@/stores/panel-store";
 import { useProjectStore } from "@/stores/project-store";
 import type { TabType } from "@/stores/tab-store";
+import { api, projectUrl } from "@/lib/api-client";
+import type { SessionInfo } from "../../../types/chat";
 import { TabBar } from "./tab-bar";
 import { SplitDropOverlay } from "./split-drop-overlay";
 import { cn } from "@/lib/utils";
@@ -24,6 +26,7 @@ const TAB_COMPONENTS: Record<TabType, React.LazyExoticComponent<React.ComponentT
   "git-diff": lazy(() => import("@/components/editor/diff-viewer").then((m) => ({ default: m.DiffViewer }))),
   settings: lazy(() => import("@/components/settings/settings-tab").then((m) => ({ default: m.SettingsTab }))),
   browser: lazy(() => import("@/components/browser/browser-tab").then((m) => ({ default: m.BrowserTab }))),
+  "extension-webview": lazy(() => import("@/components/extensions/extension-webview").then((m) => ({ default: m.ExtensionWebview }))),
 };
 
 interface EditorPanelProps {
@@ -74,8 +77,70 @@ export function EditorPanel({ panelId, projectName }: EditorPanelProps) {
   );
 }
 
+function formatRelativeDate(iso: string): string {
+  try {
+    const date = new Date(iso);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMin = Math.floor(diffMs / 60_000);
+    if (diffMin < 1) return "Just now";
+    if (diffMin < 60) return `${diffMin}m ago`;
+    const diffHr = Math.floor(diffMin / 60);
+    if (diffHr < 24) return `${diffHr}h ago`;
+    const diffDay = Math.floor(diffHr / 24);
+    if (diffDay < 7) return `${diffDay}d ago`;
+    return date.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+  } catch {
+    return "";
+  }
+}
+
+const MAX_RECENT_SESSIONS = 5;
+const FETCH_SESSIONS_LIMIT = 20;
+
 function EmptyPanel({ panelId }: { panelId: string }) {
   const activeProject = useProjectStore((s) => s.activeProject);
+  const [sessions, setSessions] = useState<SessionInfo[]>([]);
+  const [loadingSessions, setLoadingSessions] = useState(false);
+  const [showAll, setShowAll] = useState(false);
+
+  const loadSessions = useCallback(async () => {
+    if (!activeProject?.name) return;
+    setLoadingSessions(true);
+    try {
+      const data = await api.get<SessionInfo[]>(`${projectUrl(activeProject.name)}/chat/sessions`);
+      setSessions(data.slice(0, FETCH_SESSIONS_LIMIT));
+    } catch {
+      // silently ignore — empty state still functional without sessions
+    } finally {
+      setLoadingSessions(false);
+    }
+  }, [activeProject?.name]);
+
+  useEffect(() => { loadSessions(); }, [loadSessions]);
+
+  const togglePin = useCallback(async (e: React.MouseEvent, session: SessionInfo) => {
+    e.stopPropagation();
+    if (!activeProject?.name) return;
+    const url = `${projectUrl(activeProject.name)}/chat/sessions/${session.id}/pin`;
+    try {
+      if (session.pinned) {
+        await api.del(url);
+      } else {
+        await api.put(url);
+      }
+      setSessions((prev) => {
+        const updated = prev.map((s) => s.id === session.id ? { ...s, pinned: !s.pinned } : s);
+        return updated.sort((a, b) => {
+          if (a.pinned && !b.pinned) return -1;
+          if (!a.pinned && b.pinned) return 1;
+          return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
+        });
+      });
+    } catch {
+      // silently ignore
+    }
+  }, [activeProject?.name]);
 
   function openTab(type: TabType) {
     const needsProject = type !== "settings";
@@ -86,23 +151,103 @@ function EmptyPanel({ panelId }: { panelId: string }) {
     );
   }
 
+  function openSession(session: SessionInfo) {
+    usePanelStore.getState().openTab(
+      {
+        type: "chat",
+        title: session.title || "Chat",
+        projectId: activeProject?.name ?? null,
+        metadata: { projectName: activeProject?.name, sessionId: session.id, providerId: session.providerId },
+        closable: true,
+      },
+      panelId,
+    );
+  }
+
+  const pinnedSessions = sessions.filter((s) => s.pinned);
+  const allRecentSessions = sessions.filter((s) => !s.pinned);
+  const recentSessions = showAll ? allRecentSessions : allRecentSessions.slice(0, MAX_RECENT_SESSIONS);
+  const hasMore = allRecentSessions.length > MAX_RECENT_SESSIONS;
+
+  function renderSessionRow(session: SessionInfo) {
+    return (
+      <button
+        key={session.id}
+        onClick={() => openSession(session)}
+        className="group flex items-center gap-2.5 w-full px-3 py-2.5 text-left hover:bg-surface-elevated active:bg-surface-elevated transition-colors border-b border-border/50 last:border-0"
+      >
+        <MessageSquare className="size-3.5 shrink-0 text-text-subtle" />
+        <span className="flex-1 min-w-0 text-xs font-medium truncate text-text-primary">
+          {session.title || "Untitled"}
+        </span>
+        {session.updatedAt && (
+          <span className="text-[10px] text-text-subtle shrink-0">
+            {formatRelativeDate(session.updatedAt)}
+          </span>
+        )}
+        <span
+          role="button"
+          tabIndex={0}
+          onClick={(e) => togglePin(e, session)}
+          className={`p-1 rounded transition-colors shrink-0 ${
+            session.pinned
+              ? "text-primary hover:text-primary/70"
+              : "text-text-subtle md:opacity-0 md:group-hover:opacity-100 hover:text-text-primary"
+          }`}
+          aria-label={session.pinned ? "Unpin session" : "Pin session"}
+        >
+          {session.pinned ? <PinOff className="size-3" /> : <Pin className="size-3" />}
+        </span>
+      </button>
+    );
+  }
+
   return (
-    <div className="flex flex-col items-center justify-center h-full gap-4 text-text-secondary">
-      <p className="text-sm">Open a tab to get started</p>
-      <div className="flex flex-col md:flex-row flex-wrap justify-center gap-2">
-        {QUICK_OPEN_TABS.map((opt) => {
-          const Icon = opt.icon;
-          return (
-            <button
-              key={opt.type}
-              onClick={() => openTab(opt.type)}
-              className="flex items-center gap-2 px-4 py-2 rounded-md border border-border bg-surface hover:bg-surface-elevated text-sm text-foreground transition-colors"
-            >
-              <Icon className="size-4" />
-              {opt.label}
-            </button>
-          );
-        })}
+    <div className="flex flex-col h-full overflow-y-auto text-text-secondary">
+      <div className="flex flex-col items-center justify-center gap-6 px-4 flex-1">
+        <p className="text-sm">Open a tab to get started</p>
+        <div className="grid grid-cols-3 gap-2 w-full max-w-sm">
+          {QUICK_OPEN_TABS.map((opt) => {
+            const Icon = opt.icon;
+            return (
+              <button
+                key={opt.type}
+                onClick={() => openTab(opt.type)}
+                className="flex flex-col items-center justify-center gap-1.5 px-2 py-3 rounded-md border border-border bg-surface hover:bg-surface-elevated active:bg-surface-elevated text-xs text-foreground transition-colors"
+              >
+                <Icon className="size-5" />
+                {opt.label}
+              </button>
+            );
+          })}
+        </div>
+
+        {activeProject && !loadingSessions && pinnedSessions.length > 0 && (
+          <div className="flex flex-col gap-2 w-full max-w-sm">
+            <p className="text-xs text-text-subtle text-center">Pinned</p>
+            <div className="w-full rounded-md border border-border bg-surface overflow-hidden">
+              {pinnedSessions.map(renderSessionRow)}
+            </div>
+          </div>
+        )}
+
+        {activeProject && !loadingSessions && recentSessions.length > 0 && (
+          <div className="flex flex-col gap-2 w-full max-w-sm">
+            <p className="text-xs text-text-subtle text-center">Recent chats</p>
+            <div className="w-full rounded-md border border-border bg-surface overflow-hidden">
+              {recentSessions.map(renderSessionRow)}
+            </div>
+            {hasMore && (
+              <button
+                onClick={() => setShowAll(!showAll)}
+                className="flex items-center justify-center gap-1 text-[11px] text-text-subtle hover:text-text-primary transition-colors py-1"
+              >
+                {showAll ? <ChevronUp className="size-3" /> : <ChevronDown className="size-3" />}
+                {showAll ? "Show less" : `Show more (${allRecentSessions.length - MAX_RECENT_SESSIONS})`}
+              </button>
+            )}
+          </div>
+        )}
       </div>
     </div>
   );

package/src/web/components/layout/mobile-nav.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect, useRef, useCallback } from "react";
 import {
   Terminal, MessageSquare, GitBranch, Database,
   FileDiff, FileCode, Settings, Menu, X, ArrowLeft, ArrowRight, SplitSquareVertical, MoveVertical, Layers, Plus,
-  ChevronLeft, ChevronRight, Globe,
+  ChevronLeft, ChevronRight, Globe, Puzzle,
 } from "lucide-react";
 import { usePanelStore } from "@/stores/panel-store";
 import { useProjectStore, resolveOrder } from "@/stores/project-store";
@@ -26,6 +26,7 @@ const NEW_TAB_LABELS: Partial<Record<TabType, string>> = Object.fromEntries(NEW_
 const TAB_ICONS: Record<TabType, React.ElementType> = {
   terminal: Terminal, chat: MessageSquare, editor: FileCode, database: Database, sqlite: Database, postgres: Database,
   "git-graph": GitBranch, "git-diff": FileDiff, settings: Settings, browser: Globe,
+  "extension-webview": Puzzle,
 };
 
 interface MobileNavProps { onMenuPress: () => void; onProjectsPress: () => void; }

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

@@ -1,15 +1,17 @@
-import { useCallback, useRef } from "react";
-import { PanelLeftClose, PanelLeftOpen, FolderOpen, GitBranch, Settings, Database, Search } from "lucide-react";
+import { useCallback, useRef, useMemo } from "react";
+import { PanelLeftClose, PanelLeftOpen, FolderOpen, GitBranch, Settings, Database, Search, Puzzle } from "lucide-react";
 import { useProjectStore } from "@/stores/project-store";
 import { useSettingsStore, type SidebarActiveTab } from "@/stores/settings-store";
+import { useExtensionStore } from "@/stores/extension-store";
 import { FileTree } from "@/components/explorer/file-tree";
 import { GitStatusPanel } from "@/components/git/git-status-panel";
 import { SettingsTab } from "@/components/settings/settings-tab";
 import { DatabaseSidebar } from "@/components/database/database-sidebar";
 import { SearchPanel } from "@/components/explorer/search-panel";
+import { ExtensionTreeView } from "@/components/extensions/extension-tree-view";
 import { cn } from "@/lib/utils";
 
-const TABS: { id: SidebarActiveTab; label: string; icon: React.ElementType }[] = [
+const BUILTIN_TABS: { id: SidebarActiveTab; label: string; icon: React.ElementType }[] = [
   { id: "explorer", label: "Explorer", icon: FolderOpen },
   { id: "search", label: "Search", icon: Search },
   { id: "git", label: "Git", icon: GitBranch },
@@ -63,6 +65,19 @@ export function Sidebar() {
   const setSidebarWidth = useSettingsStore((s) => s.setSidebarWidth);
   const sidebarActiveTab = useSettingsStore((s) => s.sidebarActiveTab);
   const setSidebarActiveTab = useSettingsStore((s) => s.setSidebarActiveTab);
+  const contributions = useExtensionStore((s) => s.contributions);
+
+  // Build tabs list: built-in + extension-contributed sidebar views
+  const TABS = useMemo(() => {
+    const tabs: { id: SidebarActiveTab; label: string; icon: React.ElementType }[] = [...BUILTIN_TABS];
+    if (contributions?.views) {
+      const sidebarViews = contributions.views["sidebar"] ?? contributions.views["explorer"] ?? [];
+      for (const view of sidebarViews) {
+        tabs.push({ id: `ext:${view.id}` as SidebarActiveTab, label: view.name, icon: Puzzle });
+      }
+    }
+    return tabs;
+  }, [contributions]);
 
   if (sidebarCollapsed) {
     return (
@@ -135,6 +150,9 @@ export function Sidebar() {
         {sidebarActiveTab === "settings" && (
           <SettingsTab />
         )}
+        {typeof sidebarActiveTab === "string" && sidebarActiveTab.startsWith("ext:") && (
+          <ExtensionTreeView viewId={sidebarActiveTab.slice(4)} className="h-full" />
+        )}
       </div>
 
       {/* Resize handle */}

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

@@ -0,0 +1,64 @@
+import { useExtensionStore, type StatusBarItemUI } from "@/stores/extension-store";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+
+/** Fixed status bar at the bottom of the editor area (hidden on mobile) */
+export function StatusBar() {
+  const items = useExtensionStore((s) => s.statusBarItems);
+
+  const left = items
+    .filter((i) => i.alignment === "left")
+    .sort((a, b) => b.priority - a.priority);
+
+  const right = items
+    .filter((i) => i.alignment === "right")
+    .sort((a, b) => b.priority - a.priority);
+
+  return (
+    <div className="hidden md:flex items-center justify-between h-[22px] px-2 bg-surface border-t border-border text-[11px] text-text-subtle select-none shrink-0">
+      <div className="flex items-center gap-2 min-w-0">
+        {left.map((item) => (
+          <StatusBarEntry key={item.id} item={item} />
+        ))}
+      </div>
+      <div className="flex items-center gap-2 min-w-0">
+        {right.map((item) => (
+          <StatusBarEntry key={item.id} item={item} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function StatusBarEntry({ item }: { item: StatusBarItemUI }) {
+  const content = (
+    <button
+      className={`truncate px-1 rounded-sm transition-colors ${
+        item.command
+          ? "hover:bg-accent/15 hover:text-text-primary cursor-pointer"
+          : "cursor-default"
+      }`}
+      onClick={() => {
+        if (item.command) {
+          window.dispatchEvent(new CustomEvent("ext:command:execute", {
+            detail: { command: item.command },
+          }));
+        }
+      }}
+    >
+      {item.text}
+    </button>
+  );
+
+  if (item.tooltip) {
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{content}</TooltipTrigger>
+        <TooltipContent side="top" className="text-xs">
+          {item.tooltip}
+        </TooltipContent>
+      </Tooltip>
+    );
+  }
+
+  return content;
+}

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

@@ -11,6 +11,7 @@ import {
   ChevronLeft,
   ChevronRight,
   Globe,
+  Puzzle,
 } from "lucide-react";
 import { useTabStore, type TabType } from "@/stores/tab-store";
 import { usePanelStore } from "@/stores/panel-store";
@@ -35,6 +36,7 @@ const TAB_ICONS: Record<TabType, React.ElementType> = {
   "git-diff": FileDiff,
   settings: Settings,
   browser: Globe,
+  "extension-webview": Puzzle,
 };
 
 interface TabBarProps {

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

@@ -53,6 +53,11 @@ const TAB_COMPONENTS: Record<TabType, React.LazyExoticComponent<React.ComponentT
       default: m.BrowserTab,
     })),
   ),
+  "extension-webview": lazy(() =>
+    import("@/components/extensions/extension-webview").then((m) => ({
+      default: m.ExtensionWebview,
+    })),
+  ),
 };
 
 function LoadingFallback() {

package/src/web/components/layout/upgrade-banner.tsx

@@ -12,7 +12,11 @@ interface UpgradeStatus {
   installMethod: string;
 }
 
-export function UpgradeBanner() {
+interface UpgradeBannerProps {
+  onVisibilityChange?: (visible: boolean) => void;
+}
+
+export function UpgradeBanner({ onVisibilityChange }: UpgradeBannerProps) {
   const [availableVersion, setAvailableVersion] = useState<string | null>(null);
   const [upgrading, setUpgrading] = useState(false);
   const [dismissed, setDismissed] = useState(false);
@@ -61,10 +65,16 @@ export function UpgradeBanner() {
     setDismissed(true);
   }, [availableVersion]);
 
-  if (!availableVersion || dismissed) return null;
+  const visible = !!availableVersion && !dismissed;
+
+  useEffect(() => {
+    onVisibilityChange?.(visible);
+  }, [visible, onVisibilityChange]);
+
+  if (!visible) return null;
 
   return (
-    <div className="w-full bg-blue-600 dark:bg-blue-700 text-white px-3 py-2 flex items-center justify-between gap-2 z-50 text-sm shrink-0">
+    <div className="w-full bg-blue-600 dark:bg-blue-700 text-white px-3 py-1 flex items-center justify-between gap-2 z-50 text-sm shrink-0">
       {upgrading ? (
         <div className="flex items-center gap-2 flex-1 min-w-0">
           <Loader2 className="size-4 animate-spin shrink-0" />
@@ -83,13 +93,13 @@ export function UpgradeBanner() {
           <div className="flex items-center gap-1 shrink-0">
             <button
               onClick={handleUpgrade}
-              className="bg-white text-blue-600 font-medium rounded-full px-3 min-h-[44px] min-w-[44px] flex items-center justify-center hover:bg-blue-50 active:bg-blue-100 transition-colors"
+              className="bg-white text-blue-600 font-medium rounded-full px-3 py-0.5 text-xs min-h-[28px] min-w-[28px] flex items-center justify-center hover:bg-blue-50 active:bg-blue-100 transition-colors"
             >
               Upgrade
             </button>
             <button
               onClick={handleDismiss}
-              className="min-h-[44px] min-w-[44px] flex items-center justify-center rounded-full hover:bg-blue-500 active:bg-blue-800 transition-colors"
+              className="min-h-[28px] min-w-[28px] flex items-center justify-center rounded-full hover:bg-blue-500 active:bg-blue-800 transition-colors"
               aria-label="Dismiss upgrade notification"
             >
               <X className="size-4" />

package/src/web/components/settings/change-password-section.tsx

@@ -0,0 +1,128 @@
+import { useState, useCallback } from "react";
+import { KeyRound, Check, Eye, EyeOff } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { api } from "@/lib/api-client";
+import { setAuthToken } from "@/lib/api-client";
+
+export function ChangePasswordSection() {
+  const [open, setOpen] = useState(false);
+  const [password, setPassword] = useState("");
+  const [confirm, setConfirm] = useState("");
+  const [showPw, setShowPw] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const mismatch = confirm.length > 0 && password !== confirm;
+  const canSubmit = password.trim().length >= 4 && password === confirm && !saving;
+
+  const handleSubmit = useCallback(async () => {
+    if (!canSubmit) return;
+    setSaving(true);
+    setError(null);
+    try {
+      const { token } = await api.put<{ token: string }>("/api/settings/auth/password", {
+        password: password.trim(),
+        confirm: confirm.trim(),
+      });
+      // Update localStorage so current session stays authenticated
+      setAuthToken(token);
+      setSaved(true);
+      setPassword("");
+      setConfirm("");
+      setTimeout(() => {
+        setSaved(false);
+        setOpen(false);
+      }, 1500);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to change password");
+    } finally {
+      setSaving(false);
+    }
+  }, [canSubmit, password, confirm]);
+
+  if (!open) {
+    return (
+      <section className="space-y-2">
+        <h3 className="text-xs font-medium text-muted-foreground">Security</h3>
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-8 text-xs gap-1.5 cursor-pointer"
+          onClick={() => setOpen(true)}
+        >
+          <KeyRound className="size-3.5" />
+          Change Password
+        </Button>
+      </section>
+    );
+  }
+
+  return (
+    <section className="space-y-2">
+      <h3 className="text-xs font-medium text-muted-foreground">Change Password</h3>
+      <div className="space-y-2">
+        <div className="relative">
+          <Input
+            type={showPw ? "text" : "password"}
+            placeholder="New password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            className="h-8 text-xs pr-8"
+            autoFocus
+          />
+          <button
+            type="button"
+            className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground cursor-pointer"
+            onClick={() => setShowPw(!showPw)}
+            tabIndex={-1}
+          >
+            {showPw ? <EyeOff className="size-3.5" /> : <Eye className="size-3.5" />}
+          </button>
+        </div>
+        <Input
+          type={showPw ? "text" : "password"}
+          placeholder="Confirm password"
+          value={confirm}
+          onChange={(e) => setConfirm(e.target.value)}
+          onKeyDown={(e) => { if (e.key === "Enter") handleSubmit(); }}
+          className="h-8 text-xs"
+        />
+        {mismatch && (
+          <p className="text-[11px] text-destructive">Passwords do not match</p>
+        )}
+        {error && (
+          <p className="text-[11px] text-destructive">{error}</p>
+        )}
+        <div className="flex gap-1.5">
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-8 text-xs flex-1 cursor-pointer"
+            onClick={() => {
+              setOpen(false);
+              setPassword("");
+              setConfirm("");
+              setError(null);
+            }}
+          >
+            Cancel
+          </Button>
+          <Button
+            variant={saved ? "default" : "outline"}
+            size="sm"
+            className="h-8 text-xs flex-1 cursor-pointer"
+            disabled={!canSubmit}
+            onClick={handleSubmit}
+          >
+            {saving ? "..." : saved ? <Check className="size-3.5" /> : "Save"}
+          </Button>
+        </div>
+        <p className="text-[11px] text-muted-foreground">
+          Min 4 characters. You'll stay logged in on this device.
+        </p>
+      </div>
+    </section>
+  );
+}