@hienlh/ppm 0.1.0

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

@@ -0,0 +1,329 @@
+import { useEffect, useState, useCallback, useRef } from "react";
+import CodeMirror from "@uiw/react-codemirror";
+import { oneDark } from "@codemirror/theme-one-dark";
+import { javascript } from "@codemirror/lang-javascript";
+import { python } from "@codemirror/lang-python";
+import { html } from "@codemirror/lang-html";
+import { css } from "@codemirror/lang-css";
+import { json } from "@codemirror/lang-json";
+import { markdown } from "@codemirror/lang-markdown";
+import type { Extension } from "@codemirror/state";
+import { api, projectUrl, getAuthToken } from "@/lib/api-client";
+import { useTabStore } from "@/stores/tab-store";
+import { Loader2, FileWarning, ExternalLink } from "lucide-react";
+
+/** Image extensions renderable inline */
+const IMAGE_EXTS = new Set(["png", "jpg", "jpeg", "gif", "webp", "svg", "ico"]);
+
+/** PDF extension */
+const PDF_EXT = "pdf";
+
+function getFileExt(filename: string): string {
+  return filename.split(".").pop()?.toLowerCase() ?? "";
+}
+
+function getLanguageExtension(filename: string): Extension | null {
+  const ext = getFileExt(filename);
+  switch (ext) {
+    case "js":
+    case "jsx":
+      return javascript({ jsx: true });
+    case "ts":
+    case "tsx":
+      return javascript({ jsx: true, typescript: true });
+    case "py":
+      return python();
+    case "html":
+      return html();
+    case "css":
+    case "scss":
+      return css();
+    case "json":
+      return json();
+    case "md":
+    case "mdx":
+      return markdown();
+    default:
+      return null;
+  }
+}
+
+interface CodeEditorProps {
+  metadata?: Record<string, unknown>;
+  tabId?: string;
+}
+
+export function CodeEditor({ metadata, tabId }: CodeEditorProps) {
+  const filePath = metadata?.filePath as string | undefined;
+  const projectName = metadata?.projectName as string | undefined;
+  const [content, setContent] = useState<string | null>(null);
+  const [encoding, setEncoding] = useState<string>("utf-8");
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [unsaved, setUnsaved] = useState(false);
+  const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const latestContentRef = useRef<string>("");
+  const { tabs, updateTab } = useTabStore();
+
+  const ownTab = tabs.find((t) => t.id === tabId);
+  const ext = filePath ? getFileExt(filePath) : "";
+  const isImage = IMAGE_EXTS.has(ext);
+  const isPdf = ext === PDF_EXT;
+
+  // Load file content
+  useEffect(() => {
+    if (!filePath || !projectName) return;
+    // Skip loading for images and PDFs — they use raw endpoint
+    if (isImage || isPdf) {
+      setLoading(false);
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    api
+      .get<{ content: string; encoding: string }>(
+        `${projectUrl(projectName)}/files/read?path=${encodeURIComponent(filePath)}`,
+      )
+      .then((data) => {
+        setContent(data.content);
+        setEncoding(data.encoding);
+        latestContentRef.current = data.content;
+        setLoading(false);
+      })
+      .catch((err) => {
+        setError(err instanceof Error ? err.message : "Failed to load file");
+        setLoading(false);
+      });
+
+    return () => {
+      if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+    };
+  }, [filePath, projectName, isImage, isPdf]);
+
+  // Update tab title unsaved indicator
+  useEffect(() => {
+    if (!ownTab) return;
+    const baseName = filePath?.split("/").pop() ?? "Untitled";
+    const newTitle = unsaved ? `${baseName} \u25CF` : baseName;
+    if (ownTab.title !== newTitle) {
+      updateTab(ownTab.id, { title: newTitle });
+    }
+  }, [unsaved]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const saveFile = useCallback(
+    async (text: string) => {
+      if (!filePath || !projectName) return;
+      try {
+        await api.put(`${projectUrl(projectName)}/files/write`, {
+          path: filePath,
+          content: text,
+        });
+        setUnsaved(false);
+      } catch {
+        // Silent save failure — user sees unsaved indicator persists
+      }
+    },
+    [filePath, projectName],
+  );
+
+  function handleChange(value: string) {
+    setContent(value);
+    latestContentRef.current = value;
+    setUnsaved(true);
+
+    // Debounced auto-save (1s)
+    if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+    saveTimerRef.current = setTimeout(() => {
+      saveFile(latestContentRef.current);
+    }, 1000);
+  }
+
+  if (!filePath || !projectName) {
+    return (
+      <div className="flex items-center justify-center h-full text-text-secondary text-sm">
+        No file selected.
+      </div>
+    );
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-full gap-2 text-text-secondary">
+        <Loader2 className="size-5 animate-spin" />
+        <span className="text-sm">Loading file...</span>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center h-full text-error text-sm">
+        {error}
+      </div>
+    );
+  }
+
+  // --- Image preview ---
+  if (isImage) {
+    return <ImagePreview filePath={filePath} projectName={projectName} />;
+  }
+
+  // --- PDF viewer ---
+  if (isPdf) {
+    return <PdfPreview filePath={filePath} projectName={projectName} />;
+  }
+
+  // --- Binary file (base64 encoding) — cannot edit ---
+  if (encoding === "base64") {
+    return (
+      <div className="flex flex-col items-center justify-center h-full gap-3 text-text-secondary">
+        <FileWarning className="size-10 text-text-subtle" />
+        <p className="text-sm">This file is a binary format and cannot be displayed.</p>
+        <p className="text-xs text-text-subtle">{filePath}</p>
+      </div>
+    );
+  }
+
+  // --- Text editor ---
+  const extensions: Extension[] = [];
+  const langExt = getLanguageExtension(filePath);
+  if (langExt) extensions.push(langExt);
+
+  return (
+    <div className="h-full w-full overflow-hidden">
+      <CodeMirror
+        value={content ?? ""}
+        onChange={handleChange}
+        extensions={extensions}
+        theme={oneDark}
+        height="100%"
+        style={{ height: "100%", fontSize: "13px", fontFamily: "var(--font-mono)" }}
+        basicSetup={{
+          lineNumbers: true,
+          foldGutter: true,
+          autocompletion: true,
+          bracketMatching: true,
+          closeBrackets: true,
+          highlightActiveLine: true,
+          indentOnInput: true,
+        }}
+      />
+    </div>
+  );
+}
+
+/** Inline image preview with auth */
+function ImagePreview({ filePath, projectName }: { filePath: string; projectName: string }) {
+  const [blobUrl, setBlobUrl] = useState<string | null>(null);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    let revoke: string | undefined;
+    const url = `${projectUrl(projectName)}/files/raw?path=${encodeURIComponent(filePath)}`;
+    const token = getAuthToken();
+    fetch(url, { headers: token ? { Authorization: `Bearer ${token}` } : {} })
+      .then((r) => {
+        if (!r.ok) throw new Error("Failed");
+        return r.blob();
+      })
+      .then((blob) => {
+        const objUrl = URL.createObjectURL(blob);
+        revoke = objUrl;
+        setBlobUrl(objUrl);
+      })
+      .catch(() => setError(true));
+    return () => { if (revoke) URL.revokeObjectURL(revoke); };
+  }, [filePath, projectName]);
+
+  if (error) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full gap-3 text-text-secondary">
+        <FileWarning className="size-10 text-text-subtle" />
+        <p className="text-sm">Failed to load image.</p>
+      </div>
+    );
+  }
+
+  if (!blobUrl) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <Loader2 className="size-5 animate-spin text-text-subtle" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center justify-center h-full p-4 bg-surface overflow-auto">
+      <img src={blobUrl} alt={filePath} className="max-w-full max-h-full object-contain" />
+    </div>
+  );
+}
+
+/** PDF preview — fetches with auth, opens blob in iframe or new tab */
+function PdfPreview({ filePath, projectName }: { filePath: string; projectName: string }) {
+  const [blobUrl, setBlobUrl] = useState<string | null>(null);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    let revoke: string | undefined;
+    const url = `${projectUrl(projectName)}/files/raw?path=${encodeURIComponent(filePath)}`;
+    const token = getAuthToken();
+    fetch(url, { headers: token ? { Authorization: `Bearer ${token}` } : {} })
+      .then((r) => {
+        if (!r.ok) throw new Error("Failed");
+        return r.blob();
+      })
+      .then((blob) => {
+        const objUrl = URL.createObjectURL(new Blob([blob], { type: "application/pdf" }));
+        revoke = objUrl;
+        setBlobUrl(objUrl);
+      })
+      .catch(() => setError(true));
+    return () => { if (revoke) URL.revokeObjectURL(revoke); };
+  }, [filePath, projectName]);
+
+  const openInNewTab = useCallback(() => {
+    if (blobUrl) window.open(blobUrl, "_blank");
+  }, [blobUrl]);
+
+  if (error) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full gap-3 text-text-secondary">
+        <FileWarning className="size-10 text-text-subtle" />
+        <p className="text-sm">Failed to load PDF.</p>
+      </div>
+    );
+  }
+
+  if (!blobUrl) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <Loader2 className="size-5 animate-spin text-text-subtle" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Toolbar */}
+      <div className="flex items-center justify-between px-3 py-1.5 border-b border-border bg-background shrink-0">
+        <span className="text-xs text-text-secondary truncate">{filePath}</span>
+        <button
+          onClick={openInNewTab}
+          className="flex items-center gap-1 text-xs text-text-secondary hover:text-text-primary transition-colors"
+        >
+          <ExternalLink className="size-3" />
+          Open in new tab
+        </button>
+      </div>
+      {/* Embedded PDF viewer */}
+      <iframe
+        src={blobUrl}
+        title={filePath}
+        className="flex-1 w-full border-none"
+      />
+    </div>
+  );
+}

package/src/web/components/editor/diff-viewer.tsx

@@ -0,0 +1,276 @@
+import { useEffect, useState, useMemo, useRef } from "react";
+import { oneDark } from "@codemirror/theme-one-dark";
+import { EditorView, lineNumbers } from "@codemirror/view";
+import { EditorState } from "@codemirror/state";
+import { MergeView } from "@codemirror/merge";
+import { javascript } from "@codemirror/lang-javascript";
+import { python } from "@codemirror/lang-python";
+import { html } from "@codemirror/lang-html";
+import { css } from "@codemirror/lang-css";
+import { json } from "@codemirror/lang-json";
+import { markdown } from "@codemirror/lang-markdown";
+import type { Extension } from "@codemirror/state";
+import { api, projectUrl } from "@/lib/api-client";
+import { Loader2, FileCode } from "lucide-react";
+
+function getLanguageExtension(filename: string): Extension | null {
+  const ext = filename.split(".").pop()?.toLowerCase() ?? "";
+  switch (ext) {
+    case "js":
+    case "jsx":
+      return javascript({ jsx: true });
+    case "ts":
+    case "tsx":
+      return javascript({ jsx: true, typescript: true });
+    case "py":
+      return python();
+    case "html":
+      return html();
+    case "css":
+    case "scss":
+      return css();
+    case "json":
+      return json();
+    case "md":
+    case "mdx":
+      return markdown();
+    default:
+      return null;
+  }
+}
+
+interface DiffViewerProps {
+  metadata?: Record<string, unknown>;
+}
+
+export function DiffViewer({ metadata }: DiffViewerProps) {
+  const filePath = metadata?.filePath as string | undefined;
+  const projectName = metadata?.projectName as string | undefined;
+  const ref1 = metadata?.ref1 as string | undefined;
+  const ref2 = metadata?.ref2 as string | undefined;
+  const file1 = metadata?.file1 as string | undefined;
+  const file2 = metadata?.file2 as string | undefined;
+  const isFileCompare = Boolean(file1 && file2);
+
+  const [diffText, setDiffText] = useState<string | null>(null);
+  const [fileContents, setFileContents] = useState<{ original: string; modified: string } | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const mergeViewRef = useRef<MergeView | null>(null);
+
+  useEffect(() => {
+    if (!projectName) return;
+    setLoading(true);
+    setError(null);
+
+    if (file1 && file2) {
+      const params = new URLSearchParams();
+      params.set("file1", file1);
+      params.set("file2", file2);
+      api
+        .get<{ original: string; modified: string }>(
+          `${projectUrl(projectName)}/files/compare?${params.toString()}`,
+        )
+        .then((data) => { setFileContents(data); setLoading(false); })
+        .catch((err) => { setError(err instanceof Error ? err.message : "Failed to compare files"); setLoading(false); });
+      return;
+    }
+
+    let url: string;
+    if (filePath) {
+      const params = new URLSearchParams();
+      params.set("file", filePath);
+      if (ref1) params.set("ref", ref1);
+      url = `${projectUrl(projectName)}/git/file-diff?${params.toString()}`;
+    } else if (ref1 || ref2) {
+      const params = new URLSearchParams();
+      if (ref1) params.set("ref1", ref1);
+      if (ref2) params.set("ref2", ref2);
+      url = `${projectUrl(projectName)}/git/diff?${params.toString()}`;
+    } else {
+      url = `${projectUrl(projectName)}/git/diff`;
+    }
+
+    api
+      .get<{ diff: string }>(url)
+      .then((data) => { setDiffText(data.diff); setLoading(false); })
+      .catch((err) => { setError(err instanceof Error ? err.message : "Failed to load diff"); setLoading(false); });
+  }, [filePath, projectName, ref1, ref2, file1, file2]);
+
+  const { original, modified } = useMemo(() => {
+    if (isFileCompare && fileContents) return fileContents;
+    if (!diffText) return { original: "", modified: "" };
+    return parseDiff(diffText);
+  }, [diffText, isFileCompare, fileContents]);
+
+  const langExts = useMemo(() => {
+    const langFile = filePath ?? file2 ?? file1;
+    if (!langFile) return [];
+    const ext = getLanguageExtension(langFile);
+    return ext ? [ext] : [];
+  }, [filePath, file1, file2]);
+
+  // Create MergeView when content is ready
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container || loading || error) return;
+    if (!original && !modified) return;
+
+    // Clean up previous
+    if (mergeViewRef.current) {
+      mergeViewRef.current.destroy();
+      mergeViewRef.current = null;
+    }
+
+    const isMobile = window.innerWidth < 768;
+    const sharedExts: Extension[] = [
+      ...langExts,
+      oneDark,
+      EditorView.editable.of(false),
+      EditorState.readOnly.of(true),
+      lineNumbers(),
+      EditorView.theme({
+        "&": { fontSize: "13px", fontFamily: "var(--font-mono)" },
+        // Character-level highlight: bold background, NO underline
+        "& .cm-changedText": {
+          textDecoration: "none !important",
+          borderBottom: "none !important",
+          textDecorationLine: "none !important",
+          backgroundColor: "rgba(16, 185, 129, 0.4) !important",
+          borderRadius: "2px",
+        },
+        "& .cm-deletedChunk .cm-changedText": {
+          backgroundColor: "rgba(239, 68, 68, 0.4) !important",
+        },
+      }),
+    ];
+
+    const mv = new MergeView({
+      parent: container,
+      a: { doc: original, extensions: sharedExts },
+      b: { doc: modified, extensions: sharedExts },
+      orientation: "a-b",
+      revertControls: undefined,
+      highlightChanges: true, // Highlight changed characters within a line
+      gutter: true,
+    });
+
+    mergeViewRef.current = mv;
+
+    // Sync horizontal scroll between both editors
+    const scrollerA = mv.a.dom.querySelector(".cm-scroller") as HTMLElement | null;
+    const scrollerB = mv.b.dom.querySelector(".cm-scroller") as HTMLElement | null;
+    let syncing = false;
+    const syncScroll = (source: HTMLElement, target: HTMLElement) => {
+      if (syncing) return;
+      syncing = true;
+      target.scrollLeft = source.scrollLeft;
+      syncing = false;
+    };
+    const onScrollA = () => scrollerA && scrollerB && syncScroll(scrollerA, scrollerB);
+    const onScrollB = () => scrollerA && scrollerB && syncScroll(scrollerB, scrollerA);
+    scrollerA?.addEventListener("scroll", onScrollA);
+    scrollerB?.addEventListener("scroll", onScrollB);
+
+    return () => {
+      scrollerA?.removeEventListener("scroll", onScrollA);
+      scrollerB?.removeEventListener("scroll", onScrollB);
+      mv.destroy();
+      mergeViewRef.current = null;
+    };
+  }, [original, modified, langExts, loading, error]);
+
+  if (!projectName) {
+    return (
+      <div className="flex items-center justify-center h-full text-muted-foreground text-sm">
+        No project selected.
+      </div>
+    );
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-full gap-2 text-muted-foreground">
+        <Loader2 className="size-5 animate-spin" />
+        <span className="text-sm">Loading diff...</span>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center h-full text-destructive text-sm">
+        {error}
+      </div>
+    );
+  }
+
+  if (!isFileCompare && (!diffText || diffText.trim() === "")) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full gap-2 text-muted-foreground">
+        <FileCode className="size-8" />
+        <p className="text-sm">No changes detected</p>
+        {filePath && <p className="text-xs font-mono">{filePath}</p>}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header */}
+      <div className="flex items-center gap-2 px-3 py-1.5 border-b text-xs text-muted-foreground">
+        <FileCode className="size-3.5" />
+        {isFileCompare ? (
+          <span className="font-mono truncate">{file1} vs {file2}</span>
+        ) : (
+          <>
+            <span className="font-mono">{filePath ?? "Working tree changes"}</span>
+            {(ref1 || ref2) && (
+              <span>({ref1?.slice(0, 7) ?? "HEAD"} vs {ref2?.slice(0, 7) ?? "working tree"})</span>
+            )}
+          </>
+        )}
+      </div>
+
+      {/* MergeView container — side-by-side, pinch-zoom on mobile */}
+      <div
+        ref={containerRef}
+        className="flex-1 overflow-auto touch-pinch-zoom [&_.cm-mergeView]:h-full"
+        style={{ WebkitOverflowScrolling: "touch" }}
+      />
+    </div>
+  );
+}
+
+function parseDiff(diff: string): { original: string; modified: string } {
+  const lines = diff.split("\n");
+  const originalLines: string[] = [];
+  const modifiedLines: string[] = [];
+  let inHunk = false;
+
+  for (const line of lines) {
+    if (
+      line.startsWith("diff --git") ||
+      line.startsWith("index ") ||
+      line.startsWith("---") ||
+      line.startsWith("+++") ||
+      line.startsWith("Binary files")
+    ) continue;
+
+    if (line.startsWith("@@")) { inHunk = true; continue; }
+    if (!inHunk) continue;
+
+    if (line.startsWith("-")) {
+      originalLines.push(line.slice(1));
+    } else if (line.startsWith("+")) {
+      modifiedLines.push(line.slice(1));
+    } else if (line.startsWith(" ") || line === "") {
+      const content = line.startsWith(" ") ? line.slice(1) : line;
+      originalLines.push(content);
+      modifiedLines.push(content);
+    }
+  }
+
+  return { original: originalLines.join("\n"), modified: modifiedLines.join("\n") };
+}

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

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