@hienlh/ppm 0.8.85 → 0.8.86

package/src/web/components/chat/chat-welcome.tsx

@@ -1,148 +0,0 @@
-import { useState, useEffect, useCallback } from "react";
-import { Bot, ChevronDown, ChevronUp, MessageSquare, Pin, PinOff } from "lucide-react";
-import { api, projectUrl } from "@/lib/api-client";
-import type { SessionInfo } from "../../../types/chat";
-
-const MAX_RECENT_SESSIONS = 5;
-const FETCH_SESSIONS_LIMIT = 20;
-
-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 "";
-  }
-}
-
-interface ChatWelcomeProps {
-  projectName: string;
-  onSelectSession: (session: SessionInfo) => void;
-}
-
-export function ChatWelcome({ projectName, onSelectSession }: ChatWelcomeProps) {
-  const [sessions, setSessions] = useState<SessionInfo[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [showAll, setShowAll] = useState(false);
-
-  const loadSessions = useCallback(async () => {
-    if (!projectName) return;
-    setLoading(true);
-    try {
-      const data = await api.get<SessionInfo[]>(`${projectUrl(projectName)}/chat/sessions`);
-      setSessions(data.slice(0, FETCH_SESSIONS_LIMIT));
-    } catch {
-      // silently ignore
-    } finally {
-      setLoading(false);
-    }
-  }, [projectName]);
-
-  useEffect(() => { loadSessions(); }, [loadSessions]);
-
-  const togglePin = useCallback(async (e: React.MouseEvent, session: SessionInfo) => {
-    e.stopPropagation();
-    if (!projectName) return;
-    const url = `${projectUrl(projectName)}/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
-    }
-  }, [projectName]);
-
-  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={() => onSelectSession(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-6 text-text-secondary overflow-y-auto">
-      <div className="flex flex-col items-center gap-3">
-        <Bot className="size-10 text-text-subtle" />
-        <p className="text-sm">Send a message to start a new conversation</p>
-      </div>
-
-      {!loading && pinnedSessions.length > 0 && (
-        <div className="flex flex-col gap-2 w-full max-w-sm px-4">
-          <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>
-      )}
-
-      {!loading && recentSessions.length > 0 && (
-        <div className="flex flex-col gap-2 w-full max-w-sm px-4">
-          <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>
-  );
-}

package/src/web/components/editor/csv-preview.tsx

@@ -1,228 +0,0 @@
-import { useState, useMemo, useRef, useCallback, useEffect } from "react";
-import {
-  useReactTable,
-  getCoreRowModel,
-  getSortedRowModel,
-  flexRender,
-  type ColumnDef,
-  type SortingState,
-} from "@tanstack/react-table";
-import { useVirtualizer } from "@tanstack/react-virtual";
-import { parseCsv, serializeCsv } from "@/lib/csv-parser";
-import { ArrowUp, ArrowDown } from "lucide-react";
-
-interface CsvPreviewProps {
-  content: string;
-  onContentChange: (csv: string) => void;
-  wordWrap?: boolean;
-}
-
-export function CsvPreview({ content, onContentChange, wordWrap }: CsvPreviewProps) {
-  const parsed = useMemo(() => parseCsv(content), [content]);
-  const [rows, setRows] = useState<string[][]>(() => parsed.rows);
-  const [sorting, setSorting] = useState<SortingState>([]);
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const internalEditRef = useRef(false);
-
-  // Sync when content changes externally (e.g. file reload) — skip if we triggered it
-  useEffect(() => {
-    if (internalEditRef.current) {
-      internalEditRef.current = false;
-      return;
-    }
-    setRows(parsed.rows);
-  }, [parsed.rows]);
-
-  const headers = parsed.headers;
-
-  const updateCell = useCallback(
-    (rowIndex: number, colIndex: number, value: string) => {
-      setRows((prev) => {
-        const next = prev.map((r, i) => (i === rowIndex ? [...r] : r));
-        next[rowIndex]![colIndex] = value;
-        internalEditRef.current = true;
-        onContentChange(serializeCsv(headers, next));
-        return next;
-      });
-    },
-    [headers, onContentChange],
-  );
-
-  const columns = useMemo<ColumnDef<string[], string>[]>(
-    () =>
-      headers.map((h, i) => ({
-        id: `col-${i}`,
-        header: h || `Column ${i + 1}`,
-        accessorFn: (row: string[]) => row[i] ?? "",
-        cell: ({ row, getValue }) => (
-          <CsvCell
-            value={getValue()}
-            onSave={(v) => updateCell(row.index, i, v)}
-            wordWrap={wordWrap}
-          />
-        ),
-        size: 150,
-        minSize: 80,
-      })),
-    [headers, updateCell, wordWrap],
-  );
-
-  const table = useReactTable({
-    data: rows,
-    columns,
-    state: { sorting },
-    onSortingChange: setSorting,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    enableColumnResizing: true,
-    columnResizeMode: "onChange",
-  });
-
-  const { rows: tableRows } = table.getRowModel();
-
-  const virtualizer = useVirtualizer({
-    count: tableRows.length,
-    getScrollElement: () => scrollRef.current,
-    estimateSize: () => 32,
-    overscan: 20,
-  });
-
-  if (headers.length === 0) {
-    return (
-      <div className="flex items-center justify-center h-full text-muted-foreground text-sm">
-        Empty CSV file
-      </div>
-    );
-  }
-
-  return (
-    <div ref={scrollRef} className="flex-1 overflow-auto">
-      <table className="w-full text-xs font-mono border-collapse">
-        <thead className="sticky top-0 bg-background z-10 border-b border-border block">
-          {table.getHeaderGroups().map((hg) => (
-            <tr key={hg.id} className="flex w-full">
-              {hg.headers.map((header) => (
-                <th
-                  key={header.id}
-                  className="relative text-left px-2 py-1.5 font-medium text-muted-foreground select-none cursor-pointer hover:bg-muted/50 border-r border-border last:border-r-0"
-                  style={{ width: header.getSize(), minWidth: header.getSize() }}
-                  onClick={header.column.getToggleSortingHandler()}
-                >
-                  <div className="flex items-center gap-1">
-                    <span className="truncate">
-                      {flexRender(header.column.columnDef.header, header.getContext())}
-                    </span>
-                    {header.column.getIsSorted() === "asc" && <ArrowUp className="size-3 shrink-0" />}
-                    {header.column.getIsSorted() === "desc" && <ArrowDown className="size-3 shrink-0" />}
-                  </div>
-                  {/* Resize handle */}
-                  <div
-                    onMouseDown={header.getResizeHandler()}
-                    onTouchStart={header.getResizeHandler()}
-                    onClick={(e) => e.stopPropagation()}
-                    className="absolute right-0 top-0 h-full w-1 cursor-col-resize hover:bg-primary/50 active:bg-primary"
-                  />
-                </th>
-              ))}
-            </tr>
-          ))}
-        </thead>
-        <tbody style={{ height: virtualizer.getTotalSize(), position: "relative", display: "block" }}>
-          {virtualizer.getVirtualItems().map((vRow) => {
-            const row = tableRows[vRow.index]!;
-            return (
-              <tr
-                key={row.id}
-                data-index={vRow.index}
-                ref={(node) => virtualizer.measureElement(node)}
-                style={{
-                  position: "absolute",
-                  top: 0,
-                  left: 0,
-                  width: "100%",
-                  transform: `translateY(${vRow.start}px)`,
-                  display: "flex",
-                }}
-              >
-                {row.getVisibleCells().map((cell) => (
-                  <td
-                    key={cell.id}
-                    className={`px-2 py-1 border-b border-border/50 border-r border-r-border/30 last:border-r-0 ${wordWrap ? "whitespace-pre-wrap break-words" : "truncate"}`}
-                    style={{ width: cell.column.getSize(), minWidth: cell.column.getSize() }}
-                  >
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </td>
-                ))}
-              </tr>
-            );
-          })}
-        </tbody>
-      </table>
-    </div>
-  );
-}
-
-function CsvCell({ value, onSave, wordWrap }: { value: string; onSave: (v: string) => void; wordWrap?: boolean }) {
-  const [editing, setEditing] = useState(false);
-  const [draft, setDraft] = useState(value);
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-  // Auto-resize textarea to fit content
-  const autoResize = useCallback((el: HTMLTextAreaElement | null) => {
-    if (!el) return;
-    el.style.height = "auto";
-    el.style.height = `${el.scrollHeight}px`;
-  }, []);
-
-  useEffect(() => {
-    if (editing && textareaRef.current) {
-      textareaRef.current.focus();
-      autoResize(textareaRef.current);
-    }
-  }, [editing, autoResize]);
-
-  if (!editing) {
-    return (
-      <span
-        className={`block cursor-text ${wordWrap ? "whitespace-pre-wrap break-words" : "truncate"}`}
-        onClick={() => {
-          setDraft(value);
-          setEditing(true);
-        }}
-      >
-        {value || "\u00A0"}
-      </span>
-    );
-  }
-
-  const isMultiline = draft.includes("\n");
-
-  return (
-    <textarea
-      ref={textareaRef}
-      className="w-full bg-transparent outline-none border border-primary/50 rounded text-xs font-mono resize-none p-0.5"
-      style={{ minHeight: isMultiline ? 48 : 20 }}
-      rows={1}
-      value={draft}
-      onChange={(e) => {
-        setDraft(e.target.value);
-        autoResize(e.target);
-      }}
-      onBlur={() => {
-        setEditing(false);
-        if (draft !== value) onSave(draft);
-      }}
-      onKeyDown={(e) => {
-        if (e.key === "Enter" && !e.shiftKey) {
-          // Enter = save, Shift+Enter = newline
-          e.preventDefault();
-          setEditing(false);
-          if (draft !== value) onSave(draft);
-        } else if (e.key === "Escape") {
-          setEditing(false);
-          setDraft(value);
-        }
-      }}
-    />
-  );
-}

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

@@ -1,216 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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>
-  );
-}