@hienlh/ppm 0.9.86 → 0.9.88

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

@@ -0,0 +1,368 @@
+import { useEffect, useState, useRef, useCallback } from "react";
+import Editor, { type OnMount } from "@monaco-editor/react";
+import type * as MonacoType from "monaco-editor";
+import { api, projectUrl } from "@/lib/api-client";
+import { useSettingsStore } from "@/stores/settings-store";
+import { useMonacoTheme } from "@/lib/use-monaco-theme";
+import { Loader2 } from "lucide-react";
+
+function getMonacoLanguage(filename: string): string {
+  const ext = filename.split(".").pop()?.toLowerCase() ?? "";
+  const map: Record<string, string> = {
+    js: "javascript", jsx: "javascript",
+    ts: "typescript", tsx: "typescript",
+    py: "python", html: "html",
+    css: "css", scss: "scss",
+    json: "json", md: "markdown", mdx: "markdown",
+    yaml: "yaml", yml: "yaml",
+    sh: "shell", bash: "shell",
+    go: "go", rs: "rust", java: "java",
+    rb: "ruby", php: "php", swift: "swift",
+    sql: "sql", xml: "xml", toml: "toml",
+  };
+  return map[ext] ?? "plaintext";
+}
+
+interface ConflictRegion {
+  id: number;
+  startLine: number;       // 1-indexed, line of <<<<<<< marker
+  separatorLine: number;   // line of =======
+  endLine: number;         // line of >>>>>>> marker
+  currentContent: string;
+  incomingContent: string;
+  currentLabel: string;
+  incomingLabel: string;
+}
+
+function parseConflicts(content: string): ConflictRegion[] {
+  const lines = content.split("\n");
+  const regions: ConflictRegion[] = [];
+  let i = 0;
+  let id = 0;
+
+  while (i < lines.length) {
+    const line = lines[i]!;
+    if (line.startsWith("<<<<<<<")) {
+      const startLine = i;
+      const currentLabel = line.substring(7).trim();
+      const currentLines: string[] = [];
+      i++;
+
+      while (i < lines.length && !lines[i]!.startsWith("=======")) {
+        currentLines.push(lines[i]!);
+        i++;
+      }
+      if (i >= lines.length) break;
+
+      const separatorLine = i;
+      const incomingLines: string[] = [];
+      i++;
+
+      while (i < lines.length && !lines[i]!.startsWith(">>>>>>>")) {
+        incomingLines.push(lines[i]!);
+        i++;
+      }
+      if (i >= lines.length) break;
+
+      const incomingLabel = lines[i]!.substring(7).trim();
+
+      regions.push({
+        id: id++,
+        startLine: startLine + 1,
+        separatorLine: separatorLine + 1,
+        endLine: i + 1,
+        currentContent: currentLines.join("\n"),
+        incomingContent: incomingLines.join("\n"),
+        currentLabel,
+        incomingLabel,
+      });
+    }
+    i++;
+  }
+  return regions;
+}
+
+interface ConflictEditorProps {
+  metadata?: Record<string, unknown>;
+  tabId?: string;
+}
+
+export function ConflictEditor({ metadata }: ConflictEditorProps) {
+  const filePath = metadata?.filePath as string | undefined;
+  const projectName = metadata?.projectName as string | undefined;
+
+  const [content, setContent] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [conflictCount, setConflictCount] = useState(0);
+  const editorRef = useRef<MonacoType.editor.IStandaloneCodeEditor | null>(null);
+  const monacoRef = useRef<typeof MonacoType | null>(null);
+  const widgetsRef = useRef<MonacoType.editor.IContentWidget[]>([]);
+  const decorationsRef = useRef<MonacoType.editor.IEditorDecorationsCollection | null>(null);
+
+  const { wordWrap } = useSettingsStore();
+  const monacoTheme = useMonacoTheme();
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [containerHeight, setContainerHeight] = useState<number | undefined>();
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(([entry]) => {
+      if (entry) setContainerHeight(Math.floor(entry.contentRect.height));
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
+  // Load file content
+  useEffect(() => {
+    if (!filePath || !projectName) return;
+    setLoading(true);
+    api
+      .get<{ content: string }>(`${projectUrl(projectName)}/files/read?path=${encodeURIComponent(filePath)}`)
+      .then((data) => {
+        setContent(data.content);
+        setLoading(false);
+      })
+      .catch((e: Error) => {
+        setError(e.message || "Failed to load file");
+        setLoading(false);
+      });
+  }, [filePath, projectName]);
+
+  const refreshConflicts = useCallback(() => {
+    const editor = editorRef.current;
+    const monaco = monacoRef.current;
+    if (!editor || !monaco) return;
+
+    const value = editor.getModel()?.getValue() || "";
+    const regions = parseConflicts(value);
+    setConflictCount(regions.length);
+
+    // Clear old widgets
+    for (const w of widgetsRef.current) {
+      editor.removeContentWidget(w);
+    }
+    widgetsRef.current = [];
+
+    // Clear old decorations
+    if (decorationsRef.current) {
+      decorationsRef.current.clear();
+    }
+
+    if (regions.length === 0) return;
+
+    // Apply decorations
+    const decos: MonacoType.editor.IModelDeltaDecoration[] = [];
+    for (const region of regions) {
+      // Marker lines
+      decos.push({
+        range: new monaco.Range(region.startLine, 1, region.startLine, 1),
+        options: { isWholeLine: true, className: "conflict-marker-line", glyphMarginClassName: "conflict-glyph-current" },
+      });
+      decos.push({
+        range: new monaco.Range(region.separatorLine, 1, region.separatorLine, 1),
+        options: { isWholeLine: true, className: "conflict-marker-line" },
+      });
+      decos.push({
+        range: new monaco.Range(region.endLine, 1, region.endLine, 1),
+        options: { isWholeLine: true, className: "conflict-marker-line", glyphMarginClassName: "conflict-glyph-incoming" },
+      });
+      // Current content (green)
+      if (region.separatorLine - region.startLine > 1) {
+        decos.push({
+          range: new monaco.Range(region.startLine + 1, 1, region.separatorLine - 1, 1),
+          options: { isWholeLine: true, className: "conflict-current-content" },
+        });
+      }
+      // Incoming content (blue)
+      if (region.endLine - region.separatorLine > 1) {
+        decos.push({
+          range: new monaco.Range(region.separatorLine + 1, 1, region.endLine - 1, 1),
+          options: { isWholeLine: true, className: "conflict-incoming-content" },
+        });
+      }
+    }
+
+    decorationsRef.current = editor.createDecorationsCollection(decos);
+
+    // Add accept widgets above each conflict
+    for (const region of regions) {
+      const widgetId = `conflict-widget-${region.id}`;
+
+      const domNode = document.createElement("div");
+      domNode.className = "conflict-actions";
+      domNode.innerHTML =
+        `<span class="conflict-label">Current Change (${escHtml(region.currentLabel || "HEAD")})</span>` +
+        `<button class="conflict-btn conflict-btn-current" data-action="current">Accept Current</button>` +
+        `<button class="conflict-btn conflict-btn-incoming" data-action="incoming">Accept Incoming</button>` +
+        `<button class="conflict-btn conflict-btn-both" data-action="both">Accept Both</button>`;
+
+      domNode.addEventListener("click", (e) => {
+        const btn = (e.target as HTMLElement).closest("[data-action]");
+        if (!btn) return;
+        const action = btn.getAttribute("data-action") as "current" | "incoming" | "both";
+        acceptConflict(region.id, action);
+      });
+
+      const widget: MonacoType.editor.IContentWidget = {
+        getId: () => widgetId,
+        getDomNode: () => domNode,
+        getPosition: () => ({
+          position: { lineNumber: region.startLine, column: 1 },
+          preference: [monaco.editor.ContentWidgetPositionPreference.ABOVE],
+        }),
+      };
+      editor.addContentWidget(widget);
+      widgetsRef.current.push(widget);
+    }
+  }, []);
+
+  const acceptConflict = useCallback(
+    (regionId: number, action: "current" | "incoming" | "both") => {
+      const editor = editorRef.current;
+      const monaco = monacoRef.current;
+      if (!editor || !monaco) return;
+
+      const model = editor.getModel();
+      if (!model) return;
+
+      const value = model.getValue();
+      const regions = parseConflicts(value);
+      const region = regions.find((r) => r.id === regionId);
+      if (!region) return;
+
+      let replacement: string;
+      switch (action) {
+        case "current":
+          replacement = region.currentContent;
+          break;
+        case "incoming":
+          replacement = region.incomingContent;
+          break;
+        case "both":
+          replacement = region.currentContent + "\n" + region.incomingContent;
+          break;
+      }
+
+      const range = new monaco.Range(region.startLine, 1, region.endLine + 1, 1);
+      model.pushEditOperations(
+        [],
+        [{ range, text: replacement + "\n" }],
+        () => null,
+      );
+
+      // Save and refresh
+      saveFile(model.getValue());
+      // Small delay to let the model update before refreshing decorations
+      setTimeout(() => refreshConflicts(), 50);
+    },
+    [refreshConflicts],
+  );
+
+  const saveFile = useCallback(
+    async (newContent: string) => {
+      if (!filePath || !projectName) return;
+      try {
+        await api.put<{ written: boolean }>(`${projectUrl(projectName)}/files/write`, {
+          path: filePath,
+          content: newContent,
+        });
+      } catch (e) {
+        console.error("[conflict-editor] save failed:", e);
+      }
+    },
+    [filePath, projectName],
+  );
+
+  const handleMount: OnMount = (editor, monaco) => {
+    editorRef.current = editor;
+    monacoRef.current = monaco;
+
+    // Inject conflict editor styles (idempotent)
+    const doc = editor.getDomNode()?.ownerDocument ?? document;
+    if (!doc.getElementById("conflict-editor-styles")) {
+      const styleEl = doc.createElement("style");
+      styleEl.id = "conflict-editor-styles";
+      styleEl.textContent = `
+        .conflict-current-content { background: rgba(34, 197, 94, 0.1) !important; }
+        .conflict-incoming-content { background: rgba(59, 130, 246, 0.1) !important; }
+        .conflict-marker-line { background: rgba(100, 100, 100, 0.15) !important; font-style: italic; }
+        .conflict-glyph-current { background: #22c55e !important; }
+        .conflict-glyph-incoming { background: #3b82f6 !important; }
+        .conflict-actions { display: flex; gap: 8px; align-items: center; padding: 2px 0; font-size: 12px; font-family: system-ui; }
+        .conflict-label { color: #22c55e; font-weight: 600; margin-right: 8px; }
+        .conflict-btn { padding: 1px 8px; border-radius: 3px; border: none; cursor: pointer; font-size: 11px; opacity: 0.9; }
+        .conflict-btn:hover { opacity: 1; }
+        .conflict-btn-current { color: #22c55e; background: rgba(34, 197, 94, 0.15); }
+        .conflict-btn-incoming { color: #3b82f6; background: rgba(59, 130, 246, 0.15); }
+        .conflict-btn-both { color: #a855f7; background: rgba(168, 85, 247, 0.15); }
+      `;
+      doc.head?.appendChild(styleEl);
+    }
+
+    refreshConflicts();
+  };
+
+  const fileName = filePath?.split(/[\\/]/).pop() ?? "unknown";
+  const language = getMonacoLanguage(fileName);
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <Loader2 className="size-6 animate-spin text-primary" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center h-full text-destructive">
+        {error}
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full w-full flex flex-col">
+      <div className="flex items-center gap-2 px-3 py-1.5 text-xs border-b border-border bg-muted/50 flex-shrink-0">
+        <span className="font-medium">{fileName}</span>
+        <span className="text-muted-foreground">—</span>
+        {conflictCount > 0 ? (
+          <span className="text-destructive font-medium">
+            {conflictCount} conflict{conflictCount !== 1 ? "s" : ""} remaining
+          </span>
+        ) : (
+          <span className="text-green-500 font-medium">All conflicts resolved</span>
+        )}
+      </div>
+      <div ref={containerRef} className="flex-1 min-h-0">
+        {content !== null && containerHeight && (
+          <Editor
+            height={containerHeight}
+            language={language}
+            value={content}
+            onMount={handleMount}
+            theme={monacoTheme}
+            options={{
+              fontSize: 13,
+              fontFamily: "Menlo, Monaco, Consolas, monospace",
+              wordWrap: wordWrap ? "on" : "off",
+              glyphMargin: true,
+              readOnly: false,
+              automaticLayout: true,
+              scrollBeyondLastLine: false,
+              minimap: { enabled: false },
+            }}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+function escHtml(s: string): string {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}

package/src/web/components/extensions/extension-webview.tsx

@@ -1,4 +1,4 @@
-import { useRef, useEffect, useState } from "react";
+import { useRef, useEffect, useState, useCallback } from "react";
 import { useExtensionStore } from "@/stores/extension-store";
 import { useTabStore } from "@/stores/tab-store";
 import { Loader2 } from "lucide-react";
@@ -118,6 +118,37 @@ export function ExtensionWebview({ metadata }: ExtensionWebviewProps) {
     })();
   }, [panel, viewType, currentProject]);
 
+  // Check activation errors for this extension
+  const extensionId = metadata?.extensionId as string | undefined;
+  const activationError = useExtensionStore((s) => {
+    // Direct match by extensionId (most reliable)
+    if (extensionId && s.activationErrors[extensionId]) return s.activationErrors[extensionId];
+    // Fallback: check by viewType prefix (e.g. "ext-git-graph" for viewType "git-graph")
+    if (!viewType) return undefined;
+    for (const [extId, error] of Object.entries(s.activationErrors)) {
+      if (extId === `ext-${viewType}`) return error;
+    }
+    return undefined;
+  });
+
+  // Retry handler — re-dispatches the command
+  const handleRetry = useCallback(() => {
+    setTimedOut(false);
+    if (!viewType) return;
+    const command = viewType.includes(".") ? viewType : `${viewType}.view`;
+    (async () => {
+      try {
+        const res = await fetch("/api/projects");
+        const json = await res.json() as { ok: boolean; data?: { name: string; path: string }[] };
+        const match = json.data?.find((p) => p.name === projectName);
+        const args = match ? [match.path] : [];
+        window.dispatchEvent(new CustomEvent("ext:command:execute", {
+          detail: { command, args },
+        }));
+      } catch {}
+    })();
+  }, [viewType, projectName]);
+
   // Timeout: if panel doesn't appear within 10s, show error
   useEffect(() => {
     if (panel) { setTimedOut(false); return; }
@@ -155,9 +186,20 @@ export function ExtensionWebview({ metadata }: ExtensionWebviewProps) {
   // Loading state — waiting for extension to create the panel
   if (!panel) {
     return (
-      <div className="flex flex-col items-center justify-center h-full gap-2 text-sm text-text-subtle">
+      <div className="flex flex-col items-center justify-center h-full gap-3 text-sm text-text-subtle">
         {timedOut ? (
-          <span>Extension failed to load webview panel</span>
+          <>
+            <span className="text-destructive font-medium">Extension failed to load</span>
+            {activationError && (
+              <span className="text-xs text-muted-foreground max-w-md text-center">{activationError}</span>
+            )}
+            <button
+              onClick={handleRetry}
+              className="text-xs text-primary hover:underline"
+            >
+              Retry
+            </button>
+          </>
         ) : (
           <>
             <Loader2 className="size-5 animate-spin" />

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

@@ -27,6 +27,7 @@ const TAB_COMPONENTS: Record<TabType, React.LazyExoticComponent<React.ComponentT
   ports: lazy(() => import("@/components/ports/port-forwarding-tab").then((m) => ({ default: m.PortForwardingTab }))),
   extension: lazy(() => import("@/components/extensions/extension-webview").then((m) => ({ default: m.ExtensionWebview }))),
   "extension-webview": lazy(() => import("@/components/extensions/extension-webview").then((m) => ({ default: m.ExtensionWebview }))),
+  "conflict-editor": lazy(() => import("@/components/editor/conflict-editor").then((m) => ({ default: m.ConflictEditor }))),
 };
 
 interface EditorPanelProps {

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

@@ -30,6 +30,7 @@ const TAB_ICONS: Record<TabType, React.ElementType> = {
   "git-diff": FileDiff, settings: Settings, ports: Globe,
   extension: Puzzle,
   "extension-webview": Puzzle,
+  "conflict-editor": FileDiff,
 };
 
 interface MobileNavProps { onMenuPress: () => void; onProjectsPress: () => void; }

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

@@ -40,6 +40,7 @@ const TAB_ICONS: Record<TabType, React.ElementType> = {
   ports: Globe,
   extension: Puzzle,
   "extension-webview": Puzzle,
+  "conflict-editor": FileDiff,
 };
 
 interface TabBarProps {

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

@@ -58,6 +58,11 @@ const TAB_COMPONENTS: Record<TabType, React.LazyExoticComponent<React.ComponentT
       default: m.ExtensionWebview,
     })),
   ),
+  "conflict-editor": lazy(() =>
+    import("@/components/editor/conflict-editor").then((m) => ({
+      default: m.ConflictEditor,
+    })),
+  ),
 };
 
 function LoadingFallback() {

package/src/web/hooks/use-extension-ws.ts

@@ -40,6 +40,14 @@ export function useExtensionWs(enabled = true) {
       switch (msg.type) {
         case "contributions:update":
           store.setContributions(msg.contributions);
+          if (msg.activationErrors) {
+            const prev = store.activationErrors;
+            store.setActivationErrors(msg.activationErrors);
+            // Only toast NEW errors (avoid spam on repeated contributions:update)
+            for (const [extId, error] of Object.entries(msg.activationErrors)) {
+              if (!prev[extId]) toast.error(`Extension "${extId}" failed to activate: ${error}`);
+            }
+          }
           break;
 
         case "statusbar:update":

package/src/web/stores/extension-store.ts

@@ -87,6 +87,10 @@ interface ExtensionStore {
   contributions: ExtensionContributes | null;
   setContributions: (c: ExtensionContributes) => void;
 
+  // Activation errors (sent from server)
+  activationErrors: Record<string, string>;
+  setActivationErrors: (errors: Record<string, string>) => void;
+
   // QuickPick modal
   quickPick: QuickPickState | null;
   showQuickPick: (items: QuickPickItemUI[], options?: QuickPickState["options"]) => Promise<QuickPickItemUI[] | undefined>;
@@ -154,6 +158,10 @@ export const useExtensionStore = create<ExtensionStore>((set, get) => ({
   contributions: null,
   setContributions: (c) => set({ contributions: c }),
 
+  // --- Activation errors ---
+  activationErrors: {},
+  setActivationErrors: (errors) => set({ activationErrors: errors }),
+
   // --- QuickPick ---
   quickPick: null,
   showQuickPick: (items, options = {}) => {

package/src/web/stores/panel-utils.ts

@@ -109,6 +109,8 @@ export function deriveTabId(type: TabType, metadata?: Record<string, unknown>):
     }
     case "git-diff":
       return `git-diff:${metadata?.filePath ?? "unknown"}`;
+    case "conflict-editor":
+      return `conflict-editor:${metadata?.filePath ?? "unknown"}`;
     case "settings":
       return "settings";
     case "ports":

package/src/web/stores/tab-store.ts

@@ -13,7 +13,8 @@ export type TabType =
   | "settings"
   | "ports"
   | "extension"
-  | "extension-webview";
+  | "extension-webview"
+  | "conflict-editor";
 
 export interface Tab {
   id: string;

package/dist/web/assets/extension-webview-CHVVpV34.js

@@ -1,3 +0,0 @@
-import{o as e}from"./chunk-CFjPhJqf.js";import{t}from"./react-nm2Ru1Pt.js";import{t as n}from"./jsx-runtime-BRW_vwa9.js";import{B as r,E as i,v as a}from"./index-OqgGFmh8.js";var o=e(t(),1),s=n(),c=`<script>
-function acquireVsCodeApi(){return{postMessage:function(m){window.parent.postMessage(m,"*")},getState:function(){try{return JSON.parse(sessionStorage.getItem("vscode-state")||"null")}catch{return null}},setState:function(s){sessionStorage.setItem("vscode-state",JSON.stringify(s));return s}}}
-<\/script>`;function l(e){if(!e)return e;let t=e.indexOf(`<head>`);return t===-1?c+e:e.slice(0,t+6)+c+e.slice(t+6)}function u({metadata:e}){let t=e?.panelId,n=e?.viewType,c=i(e=>e.currentProject),u=e?.projectName||c||void 0,[d,f]=(0,o.useState)(!1),p=a(e=>{if(t&&e.webviewPanels[t])return e.webviewPanels[t];if(n){let t=n.includes(`.`)?n:`${n}.view`;return Object.values(e.webviewPanels).find(e=>e.viewType===n||e.viewType===t)}}),m=p?.id??t,h=(0,o.useRef)(null),g=l(p?.html??``);(0,o.useEffect)(()=>{if(p||!n)return;let e=n.includes(`.`)?n:`${n}.view`,t=!1,r=null;async function i(){if(r)return r;if(!u)return[];try{let e=(await(await fetch(`/api/projects`)).json()).data?.find(e=>e.name===u);r=e?[e.path]:[]}catch{r=[]}return r}async function a(){let n=await i();t||window.dispatchEvent(new CustomEvent(`ext:command:execute`,{detail:{command:e,args:n}}))}let o=setTimeout(()=>{t||a()},500),s=setInterval(()=>{t||a()},2e3);return()=>{t=!0,clearTimeout(o),clearInterval(s)}},[p,n,u]);let _=(0,o.useRef)(c);return(0,o.useEffect)(()=>{if(!p||!n||!c||c===_.current){_.current=c;return}_.current=c,(async()=>{try{let e=(await(await fetch(`/api/projects`)).json()).data?.find(e=>e.name===c);if(e){let t=n.includes(`.`)?n:`${n}.view`;window.dispatchEvent(new CustomEvent(`ext:command:execute`,{detail:{command:t,args:[e.path]}}))}}catch{}})()},[p,n,c]),(0,o.useEffect)(()=>{if(p){f(!1);return}let e=setTimeout(()=>f(!0),1e4);return()=>clearTimeout(e)},[p]),(0,o.useEffect)(()=>{if(!m)return;let e=e=>{h.current&&e.source===h.current.contentWindow&&window.dispatchEvent(new CustomEvent(`ext:webview:send`,{detail:{panelId:m,message:e.data}}))};return window.addEventListener(`message`,e),()=>window.removeEventListener(`message`,e)},[m]),(0,o.useEffect)(()=>{if(!m)return;let e=e=>{let{panelId:t,message:n}=e.detail;t===m&&h.current?.contentWindow?.postMessage(n,`*`)};return window.addEventListener(`ext:webview:message`,e),()=>window.removeEventListener(`ext:webview:message`,e)},[m]),p?(0,s.jsx)(`div`,{className:`h-full w-full relative`,children:(0,s.jsx)(`iframe`,{ref:h,srcDoc:g,sandbox:`allow-scripts`,className:`w-full h-full border-0 bg-white dark:bg-zinc-900`,title:p.title})}):(0,s.jsx)(`div`,{className:`flex flex-col items-center justify-center h-full gap-2 text-sm text-text-subtle`,children:d?(0,s.jsx)(`span`,{children:`Extension failed to load webview panel`}):(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(r,{className:`size-5 animate-spin`}),(0,s.jsx)(`span`,{children:`Loading extension...`})]})})}export{u as ExtensionWebview};