@hienlh/ppm 0.8.86 → 0.8.88

package/src/web/components/editor/editor-breadcrumb.tsx

@@ -0,0 +1,216 @@
+import { useMemo, useRef, useEffect } from "react";
+import { ChevronRight, Folder, File, FileCode, FileJson, FileText, FileType } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+} from "@/components/ui/dropdown-menu";
+import { useFileStore, type FileNode } from "@/stores/file-store";
+import { useTabStore } from "@/stores/tab-store";
+import { basename } from "@/lib/utils";
+
+const ICON_MAP: Record<string, React.ComponentType<{ className?: string }>> = {
+  ts: FileCode, tsx: FileCode, js: FileCode, jsx: FileCode,
+  py: FileCode, rs: FileCode, go: FileCode, html: FileCode,
+  css: FileCode, scss: FileCode,
+  json: FileJson,
+  md: FileText, txt: FileText,
+  yaml: FileType, yml: FileType,
+};
+
+function getIcon(name: string, isDir: boolean) {
+  if (isDir) return Folder;
+  const ext = name.split(".").pop()?.toLowerCase() ?? "";
+  return ICON_MAP[ext] ?? File;
+}
+
+interface BreadcrumbSegment {
+  name: string;
+  fullPath: string;
+  node: FileNode | null;
+  siblings: FileNode[];
+}
+
+function walkTree(tree: FileNode[], segments: string[]): BreadcrumbSegment[] {
+  const result: BreadcrumbSegment[] = [];
+  let current: FileNode[] = tree;
+
+  for (let i = 0; i < segments.length; i++) {
+    const seg = segments[i]!;
+    const fullPath = segments.slice(0, i + 1).join("/");
+    const match = current.find((n) => n.name === seg);
+    result.push({
+      name: seg,
+      fullPath,
+      node: match ?? null,
+      siblings: current,
+    });
+    if (match?.children) {
+      current = match.children;
+    } else {
+      // Remaining segments have no tree data — add as plain
+      for (let j = i + 1; j < segments.length; j++) {
+        result.push({
+          name: segments[j]!,
+          fullPath: segments.slice(0, j + 1).join("/"),
+          node: null,
+          siblings: [],
+        });
+      }
+      break;
+    }
+  }
+  return result;
+}
+
+function sortNodes(nodes: FileNode[]): FileNode[] {
+  return [...nodes].sort((a, b) => {
+    if (a.type !== b.type) return a.type === "directory" ? -1 : 1;
+    return a.name.localeCompare(b.name);
+  });
+}
+
+interface EditorBreadcrumbProps {
+  filePath: string;
+  projectName: string;
+  tabId: string;
+  className?: string;
+}
+
+export function EditorBreadcrumb({ filePath, projectName, tabId, className }: EditorBreadcrumbProps) {
+  const tree = useFileStore((s) => s.tree);
+  const { updateTab, openTab } = useTabStore();
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const segments = useMemo(
+    () => walkTree(tree, filePath.split("/").filter(Boolean)),
+    [tree, filePath],
+  );
+
+  // Auto-scroll to rightmost segment
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollLeft = scrollRef.current.scrollWidth;
+    }
+  }, [segments]);
+
+  function handleFileClick(path: string, e: React.MouseEvent) {
+    const name = basename(path);
+    if (e.metaKey || e.ctrlKey) {
+      openTab({ type: "editor", title: name, metadata: { filePath: path, projectName }, projectId: projectName, closable: true });
+    } else {
+      updateTab(tabId, { title: name, metadata: { filePath: path, projectName } });
+    }
+  }
+
+  return (
+    <div ref={scrollRef} className={className}>
+      {segments.map((seg, i) => (
+        <div key={seg.fullPath} className="flex items-center shrink-0">
+          {i > 0 && <ChevronRight className="size-3 text-muted-foreground shrink-0 mx-0.5" />}
+          {seg.siblings.length > 0 ? (
+            <SegmentDropdown
+              segment={seg}
+              isLast={i === segments.length - 1}
+              projectName={projectName}
+              onFileClick={handleFileClick}
+            />
+          ) : (
+            <span className="text-xs text-muted-foreground px-1 py-0.5">{seg.name}</span>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+interface SegmentDropdownProps {
+  segment: BreadcrumbSegment;
+  isLast: boolean;
+  projectName: string;
+  onFileClick: (path: string, e: React.MouseEvent) => void;
+}
+
+function SegmentDropdown({ segment, isLast, projectName, onFileClick }: SegmentDropdownProps) {
+  const sorted = useMemo(() => sortNodes(segment.siblings), [segment.siblings]);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button
+          type="button"
+          className={`text-xs px-1 py-0.5 rounded hover:bg-muted transition-colors truncate max-w-[120px] ${
+            isLast ? "text-foreground font-medium" : "text-muted-foreground"
+          }`}
+        >
+          {segment.name}
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="max-h-[300px] p-1">
+        {sorted.map((node) => (
+          <NodeMenuItem
+            key={node.path}
+            node={node}
+            projectName={projectName}
+            activePath={segment.fullPath}
+            onFileClick={onFileClick}
+          />
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+interface NodeMenuItemProps {
+  node: FileNode;
+  projectName: string;
+  activePath: string;
+  onFileClick: (path: string, e: React.MouseEvent) => void;
+}
+
+function NodeMenuItem({ node, projectName, activePath, onFileClick }: NodeMenuItemProps) {
+  const Icon = getIcon(node.name, node.type === "directory");
+  const isActive = node.path === activePath;
+
+  if (node.type === "directory" && node.children && node.children.length > 0) {
+    return (
+      <DropdownMenuSub>
+        <DropdownMenuSubTrigger className={`text-xs gap-1.5 ${isActive ? "bg-muted" : ""}`}>
+          <Icon className="size-3.5 shrink-0 text-muted-foreground" />
+          <span className="truncate">{node.name}</span>
+        </DropdownMenuSubTrigger>
+        <DropdownMenuSubContent className="max-h-[300px] overflow-y-auto p-1">
+          {sortNodes(node.children).map((child) => (
+            <NodeMenuItem
+              key={child.path}
+              node={child}
+              projectName={projectName}
+              activePath={activePath}
+              onFileClick={onFileClick}
+            />
+          ))}
+        </DropdownMenuSubContent>
+      </DropdownMenuSub>
+    );
+  }
+
+  return (
+    <DropdownMenuItem
+      className={`text-xs gap-1.5 cursor-pointer ${isActive ? "bg-muted" : ""}`}
+      onSelect={(e) => {
+        // onSelect doesn't give MouseEvent, use click handler for Ctrl detection
+      }}
+      onClick={(e) => {
+        if (node.type === "directory") return;
+        onFileClick(node.path, e);
+      }}
+    >
+      <Icon className="size-3.5 shrink-0 text-muted-foreground" />
+      <span className="truncate">{node.name}</span>
+    </DropdownMenuItem>
+  );
+}

package/src/web/components/editor/editor-toolbar.tsx

@@ -0,0 +1,74 @@
+import { Code, Eye, WrapText, Table } from "lucide-react";
+
+interface EditorToolbarProps {
+  ext: string;
+  mdMode?: "edit" | "preview";
+  onMdModeChange?: (mode: "edit" | "preview") => void;
+  csvMode?: "table" | "raw";
+  onCsvModeChange?: (mode: "table" | "raw") => void;
+  wordWrap: boolean;
+  onToggleWordWrap: () => void;
+  className?: string;
+}
+
+function ToolbarButton({
+  active,
+  onClick,
+  icon: Icon,
+  label,
+}: {
+  active: boolean;
+  onClick: () => void;
+  icon: React.ComponentType<{ className?: string }>;
+  label: string;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`flex items-center gap-1 px-2 py-1 rounded text-xs transition-colors ${
+        active ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground"
+      }`}
+    >
+      <Icon className="size-3" />
+      <span className="hidden sm:inline">{label}</span>
+    </button>
+  );
+}
+
+export function EditorToolbar({
+  ext,
+  mdMode,
+  onMdModeChange,
+  csvMode,
+  onCsvModeChange,
+  wordWrap,
+  onToggleWordWrap,
+  className,
+}: EditorToolbarProps) {
+  const isMarkdown = ext === "md" || ext === "mdx";
+  const isCsv = ext === "csv";
+
+  return (
+    <div className={className}>
+      {isMarkdown && onMdModeChange && (
+        <>
+          <ToolbarButton active={mdMode === "edit"} onClick={() => onMdModeChange("edit")} icon={Code} label="Edit" />
+          <ToolbarButton active={mdMode === "preview"} onClick={() => onMdModeChange("preview")} icon={Eye} label="Preview" />
+        </>
+      )}
+      {isCsv && onCsvModeChange && (
+        <>
+          <ToolbarButton active={csvMode === "table"} onClick={() => onCsvModeChange("table")} icon={Table} label="Table" />
+          <ToolbarButton active={csvMode === "raw"} onClick={() => onCsvModeChange("raw")} icon={Code} label="Raw" />
+        </>
+      )}
+      <ToolbarButton
+        active={wordWrap}
+        onClick={onToggleWordWrap}
+        icon={WrapText}
+        label="Wrap"
+      />
+    </div>
+  );
+}

package/src/web/components/layout/command-palette.tsx

@@ -11,6 +11,7 @@ import {
   FolderOpen,
   Loader2,
   Globe,
+  Mic,
 } from "lucide-react";
 import { useTabStore, type TabType } from "@/stores/tab-store";
 import { useProjectStore } from "@/stores/project-store";
@@ -157,8 +158,9 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
       { id: "chat", label: "New AI Chat", icon: MessageSquare, action: openNewTab("chat", "AI Chat"), keywords: "ai assistant claude", group: "action", shortcut: formatShortcut(getBinding("open-chat")) },
       { id: "terminal", label: "New Terminal", icon: Terminal, action: openNewTab("terminal", "Terminal"), keywords: "bash shell console", group: "action", shortcut: formatShortcut(getBinding("open-terminal")) },
       { id: "git-graph", label: "Git Graph", icon: GitBranch, action: openNewTab("git-graph", "Git Graph"), keywords: "branch history log", group: "action", shortcut: formatShortcut(getBinding("open-git-graph")) },
+      { id: "browser", label: "Open Browser", icon: Globe, action: openNewTab("browser", "Browser"), keywords: "web preview localhost iframe url", group: "action" },
       { id: "postgres", label: "PostgreSQL", icon: Database, action: openNewTab("postgres", "PostgreSQL"), keywords: "database pg sql query", group: "action" },
-      { id: "browser", label: "Browser (Port Tunnel)", icon: Globe, action: openNewTab("browser", "Browser"), keywords: "preview tunnel port iframe web", group: "action" },
+      { id: "voice-input", label: "Voice Input", icon: Mic, action: () => { window.dispatchEvent(new CustomEvent("toggle-voice-input")); onClose(); }, keywords: "speech microphone dictate voice", group: "action", shortcut: formatShortcut(getBinding("voice-input")) },
       { id: "git-status", label: "Git Status", icon: GitCommitHorizontal, action: () => { setSidebarActiveTab("git"); onClose(); }, keywords: "changes diff staged", group: "action", shortcut: formatShortcut(getBinding("open-git-status")) },
       {
         id: "settings", label: "Settings", icon: Settings,

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";
@@ -74,8 +76,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 +150,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/panel-layout.tsx

@@ -1,6 +1,8 @@
+import { useEffect } from "react";
 import { Panel, Group, Separator } from "react-resizable-panels";
 import { GripVertical, GripHorizontal } from "lucide-react";
 import { usePanelStore } from "@/stores/panel-store";
+import { createPanel } from "@/stores/panel-utils";
 import { EditorPanel } from "./editor-panel";
 
 interface PanelLayoutProps {
@@ -13,7 +15,21 @@ export function PanelLayout({ projectName }: PanelLayoutProps) {
   );
   const panelCount = grid.flat().length;
 
-  if (panelCount <= 1 && grid[0]?.[0]) {
+  // Recover from empty grid (corrupt persisted state or edge-case bug)
+  useEffect(() => {
+    if (panelCount === 0) {
+      const p = createPanel();
+      usePanelStore.setState((s) => ({
+        panels: { ...s.panels, [p.id]: p },
+        grid: [[p.id]],
+        focusedPanelId: p.id,
+      }));
+    }
+  }, [panelCount]);
+
+  if (panelCount === 0) return null;
+
+  if (panelCount === 1 && grid[0]?.[0]) {
     return <EditorPanel panelId={grid[0][0]} projectName={projectName} />;
   }