@hienlh/ppm 0.10.4 → 0.11.0

package/src/web/components/ui/file-browser-picker.tsx

@@ -7,7 +7,7 @@ import { ScrollArea } from "@/components/ui/scroll-area";
 import { Input } from "@/components/ui/input";
 import { api } from "@/lib/api-client";
 import {
-  Folder, File, Database, Home, Monitor, FileText,
+  Folder, File, Database, Home, Monitor, FileText, FolderPlus, Trash2,
   Download, ChevronRight, ArrowLeft, Search, Loader2, Clock, Eye, EyeOff,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
@@ -107,6 +107,10 @@ export function FileBrowserPicker({
   const [pathInput, setPathInput] = useState("");
   const [showHidden, setShowHidden] = useState(false);
   const [recentPaths, setRecentPaths] = useState<string[]>([]);
+  const [newFolderName, setNewFolderName] = useState<string | null>(null);
+  const [creatingFolder, setCreatingFolder] = useState(false);
+  const [newFolderError, setNewFolderError] = useState<string | null>(null);
+  const newFolderInputRef = useRef<HTMLInputElement>(null);
   const listRef = useRef<HTMLDivElement>(null);
   const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
 
@@ -185,6 +189,40 @@ export function FileBrowserPicker({
     onSelect(selected);
   };
 
+  const handleCreateFolder = async () => {
+    if (!newFolderName?.trim() || !current) return;
+    const folderPath = `${current}/${newFolderName.trim()}`;
+    setCreatingFolder(true);
+    setNewFolderError(null);
+    try {
+      await api.post("/api/fs/mkdir", { path: folderPath });
+      setNewFolderName(null);
+      setNewFolderError(null);
+      await fetchDir(current, showHidden);
+      setSelected(folderPath);
+    } catch (e) {
+      setNewFolderError((e as Error).message || "Failed to create folder");
+    } finally {
+      setCreatingFolder(false);
+    }
+  };
+
+  const handleDeleteSelected = async () => {
+    if (!selected) return;
+    const entry = entries.find((e) => e.path === selected);
+    if (!entry || entry.type !== "directory") return;
+    if (!window.confirm(`Delete folder "${entry.name}"? This cannot be undone.`)) return;
+    try {
+      await api.del("/api/fs/rmdir", { path: selected });
+      setSelected(null);
+      await fetchDir(current, showHidden);
+    } catch (e) {
+      setError((e as Error).message || "Failed to delete folder");
+    }
+  };
+
+  const selectedIsFolder = selected ? entries.some((e) => e.path === selected && e.type === "directory") : false;
+
   // Filter entries by search + accept
   const visible = entries.filter((e) => {
     if (search && !e.name.toLowerCase().includes(search.toLowerCase())) return false;
@@ -283,6 +321,32 @@ export function FileBrowserPicker({
             </div>
           ) : (
             <div ref={listRef} className="py-1">
+              {newFolderName != null && (
+                <>
+                  <div className="flex items-center gap-2 px-3 py-1.5 bg-primary/5 border-b border-border">
+                    <FolderPlus className="size-4 text-primary shrink-0" />
+                    <Input
+                      ref={newFolderInputRef}
+                      value={newFolderName}
+                      onChange={(e) => setNewFolderName(e.target.value)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter") handleCreateFolder();
+                        if (e.key === "Escape") setNewFolderName(null);
+                      }}
+                      placeholder="Folder name"
+                      className="h-6 text-xs flex-1"
+                      disabled={creatingFolder}
+                      autoFocus
+                    />
+                    {creatingFolder && <Loader2 className="size-3.5 animate-spin text-primary shrink-0" />}
+                  </div>
+                  {newFolderError && (
+                    <div className="px-3 py-1 text-[11px] text-destructive bg-destructive/5 border-b border-border">
+                      {newFolderError}
+                    </div>
+                  )}
+                </>
+              )}
               {visible.map((entry) => {
                 const selectable = isSelectable(entry);
                 return (
@@ -321,6 +385,29 @@ export function FileBrowserPicker({
 
       {/* Footer */}
       <div className="flex items-center gap-2 px-3 py-2 border-t border-border shrink-0">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-7 shrink-0"
+          onClick={() => {
+            setNewFolderName("");
+            setNewFolderError(null);
+            setTimeout(() => newFolderInputRef.current?.focus(), 50);
+          }}
+          title="New Folder"
+        >
+          <FolderPlus className="size-3.5" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-7 shrink-0 text-destructive/70 hover:text-destructive disabled:opacity-30"
+          onClick={handleDeleteSelected}
+          disabled={!selectedIsFolder}
+          title="Delete selected folder"
+        >
+          <Trash2 className="size-3.5" />
+        </Button>
         <Button
           variant="ghost"
           size="icon"

package/src/web/hooks/use-chat.ts

@@ -396,6 +396,12 @@ export function useChat(sessionId: string | null, providerId = "claude", project
     // Ignore keepalive pings
     if ((data as any).type === "ping") return;
 
+    // Dispatch global Jira events so components can listen via window events
+    if (typeof (data as any).type === "string" && (data as any).type.startsWith("jira:")) {
+      window.dispatchEvent(new CustomEvent((data as any).type, { detail: data }));
+      return;
+    }
+
     // Handle title updates from SDK summary
     if ((data as any).type === "title_updated") {
       setSessionTitle((data as any).title ?? null);

package/src/web/lib/report-bug.ts

@@ -1,4 +1,4 @@
-import { api, projectUrl } from "./api-client";
+import { api, projectUrl, getAuthToken } from "./api-client";
 
 const REPO = "hienlh/ppm";
 
@@ -9,7 +9,8 @@ export async function buildBugReport(
 ): Promise<string> {
   let serverLogs = "(could not fetch)";
   try {
-    const res = await fetch("/api/logs/recent");
+    const token = getAuthToken();
+    const res = await fetch("/api/logs/recent", token ? { headers: { Authorization: `Bearer ${token}` } } : {});
     const json = await res.json();
     if (json.ok) serverLogs = json.data.logs || "(empty)";
   } catch {}

package/src/web/lib/ws-client.ts

@@ -33,9 +33,16 @@ export class WsClient {
     this.cleanup();
 
     const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-    const fullUrl = this.url.startsWith("ws")
-      ? this.url
-      : `${protocol}//${window.location.host}${this.url}`;
+    let fullUrl: string;
+    if (this.url.startsWith("ws")) {
+      fullUrl = this.url;
+    } else if (import.meta.env.DEV && this.url.startsWith("/ws/")) {
+      // In dev mode, connect directly to the backend server (port 8081) to
+      // bypass Vite's dev proxy which has unreliable WebSocket upgrade handling.
+      fullUrl = `ws://${window.location.hostname}:8081${this.url}`;
+    } else {
+      fullUrl = `${protocol}//${window.location.host}${this.url}`;
+    }
 
     this.ws = new WebSocket(fullUrl);
 
@@ -90,11 +97,12 @@ export class WsClient {
   send(data: string | ArrayBuffer): void {
     if (this.ws?.readyState === WebSocket.OPEN) {
       this.ws.send(data);
-    } else if (this.ws?.readyState === WebSocket.CONNECTING) {
-      console.warn("[ws] WS still CONNECTING — queuing message");
+    } else if (!this.intentionalClose) {
+      // Queue message — will be flushed when WS (re)connects
+      console.warn(`[ws] WS not open (readyState=${this.ws?.readyState ?? "no-ws"}) — queuing message`);
       this.pendingMessages.push(data);
     } else {
-      console.warn(`[ws] message dropped — readyState=${this.ws?.readyState ?? "no-ws"}`);
+      console.warn(`[ws] message dropped — WS intentionally closed`);
     }
   }
 

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

@@ -0,0 +1,198 @@
+import { create } from "zustand";
+import { api } from "@/lib/api-client";
+import type {
+  JiraConfig, JiraWatcher, JiraWatchResult, JiraWatcherMode, JiraIssue,
+} from "../../../src/types/jira";
+
+export interface ProjectWithId {
+  id: number;
+  name: string;
+  path: string;
+  color?: string | null;
+}
+
+interface JiraStore {
+  // Projects (with DB ids)
+  projectsWithIds: ProjectWithId[];
+  loadProjectsWithIds: () => Promise<void>;
+
+  // Config
+  configs: JiraConfig[];
+  selectedProjectId: number | null;
+  loadConfigs: () => Promise<void>;
+  saveConfig: (projectId: number, data: { baseUrl: string; email: string; token: string }) => Promise<void>;
+  deleteConfig: (projectId: number) => Promise<void>;
+  testConnection: (projectId: number) => Promise<boolean>;
+  setSelectedProjectId: (id: number | null) => void;
+
+  // Watchers
+  watchers: JiraWatcher[];
+  loadWatchers: (configId: number) => Promise<void>;
+  createWatcher: (data: { configId: number; name: string; jql: string; promptTemplate?: string; intervalMs?: number; mode?: JiraWatcherMode }) => Promise<void>;
+  updateWatcher: (id: number, data: Partial<{ name: string; jql: string; promptTemplate: string | null; intervalMs: number; enabled: boolean; mode: JiraWatcherMode }>) => Promise<void>;
+  deleteWatcher: (id: number) => Promise<void>;
+  toggleWatcher: (id: number, enabled: boolean) => Promise<void>;
+  pullWatcher: (id: number) => Promise<{ newIssues: number }>;
+  testJql: (configId: number, jql: string) => Promise<{ issues: JiraIssue[]; total: number }>;
+
+  // Results
+  results: JiraWatchResult[];
+  loadResults: (watcherId?: number, status?: string, limit?: number, offset?: number) => Promise<void>;
+  softDeleteResult: (id: number) => Promise<void>;
+
+  // Debug + Unread
+  startDebug: (resultId: number, prompt?: string) => Promise<void>;
+  resumeDebug: (resultId: number) => Promise<void>;
+  cancelDebug: (resultId: number) => Promise<void>;
+  markRead: (resultId: number) => Promise<void>;
+  unreadCount: number;
+  loadUnreadCount: () => Promise<void>;
+}
+
+export const useJiraStore = create<JiraStore>((set, get) => ({
+  projectsWithIds: [],
+  configs: [],
+  selectedProjectId: null,
+  watchers: [],
+  results: [],
+  unreadCount: 0,
+
+  setSelectedProjectId: (id) => set({ selectedProjectId: id }),
+
+  loadProjectsWithIds: async () => {
+    const rows = await api.get<ProjectWithId[]>("/api/jira/config/projects");
+    set({ projectsWithIds: Array.isArray(rows) ? rows : [] });
+  },
+
+  loadConfigs: async () => {
+    const configs = await api.get<JiraConfig[]>("/api/jira/config");
+    set({ configs });
+  },
+
+  saveConfig: async (projectId, data) => {
+    await api.put(`/api/jira/config/${projectId}`, data);
+    await get().loadConfigs();
+  },
+
+  deleteConfig: async (projectId) => {
+    await api.del(`/api/jira/config/${projectId}`);
+    set((s) => ({ configs: s.configs.filter((c) => c.projectId !== projectId), watchers: [] }));
+  },
+
+  testConnection: async (projectId) => {
+    const res = await api.post<{ connected: boolean }>(`/api/jira/config/${projectId}/test`);
+    return res.connected;
+  },
+
+  loadWatchers: async (configId) => {
+    const watchers = await api.get<JiraWatcher[]>(`/api/jira/watchers?configId=${configId}`);
+    set({ watchers });
+  },
+
+  createWatcher: async (data) => {
+    await api.post("/api/jira/watchers", data);
+    if (data.configId) await get().loadWatchers(data.configId);
+  },
+
+  updateWatcher: async (id, data) => {
+    await api.put(`/api/jira/watchers/${id}`, data);
+    // Refresh — find configId from current watchers
+    const w = get().watchers.find((w) => w.id === id);
+    if (w) await get().loadWatchers(w.jiraConfigId);
+  },
+
+  deleteWatcher: async (id) => {
+    const w = get().watchers.find((w) => w.id === id);
+    await api.del(`/api/jira/watchers/${id}`);
+    if (w) await get().loadWatchers(w.jiraConfigId);
+  },
+
+  toggleWatcher: async (id, enabled) => {
+    // Optimistic update
+    set((s) => ({ watchers: s.watchers.map((w) => w.id === id ? { ...w, enabled } : w) }));
+    try {
+      await api.put(`/api/jira/watchers/${id}`, { enabled });
+    } catch {
+      set((s) => ({ watchers: s.watchers.map((w) => w.id === id ? { ...w, enabled: !enabled } : w) }));
+    }
+  },
+
+  pullWatcher: async (id) => {
+    const result = await api.post<{ newIssues: number }>(`/api/jira/watchers/${id}/pull`);
+    // Refresh results so the UI shows newly pulled tickets
+    await get().loadResults();
+    return result;
+  },
+
+  testJql: async (configId, jql) => {
+    return await api.post<{ issues: JiraIssue[]; total: number }>("/api/jira/watchers/test-jql", { configId, jql });
+  },
+
+  loadResults: async (watcherId, status, limit = 50, offset = 0) => {
+    const params = new URLSearchParams();
+    if (watcherId !== undefined) params.set("watcherId", String(watcherId));
+    if (status) params.set("status", status);
+    params.set("limit", String(limit));
+    params.set("offset", String(offset));
+    const results = await api.get<JiraWatchResult[]>(`/api/jira/results?${params}`);
+    set(offset > 0 ? (s) => ({ results: [...s.results, ...results] }) : { results });
+  },
+
+  softDeleteResult: async (id) => {
+    set((s) => ({ results: s.results.filter((r) => r.id !== id) }));
+    try { await api.del(`/api/jira/results/${id}`); } catch {}
+  },
+
+  startDebug: async (resultId, prompt) => {
+    // Optimistic update before API call
+    const prev = get().results.find((r) => r.id === resultId)?.status;
+    set((s) => ({
+      results: s.results.map((r) => r.id === resultId ? { ...r, status: "queued" as const } : r),
+    }));
+    try {
+      await api.post(`/api/jira/results/${resultId}/debug`, prompt ? { prompt } : {});
+    } catch {
+      // Rollback on failure
+      set((s) => ({
+        results: s.results.map((r) => r.id === resultId ? { ...r, status: (prev ?? "pending") as any } : r),
+      }));
+    }
+  },
+
+  resumeDebug: async (resultId) => {
+    const prev = get().results.find((r) => r.id === resultId)?.status;
+    set((s) => ({
+      results: s.results.map((r) => r.id === resultId ? { ...r, status: "queued" as const } : r),
+    }));
+    try {
+      await api.post(`/api/jira/results/${resultId}/resume`);
+    } catch {
+      set((s) => ({
+        results: s.results.map((r) => r.id === resultId ? { ...r, status: (prev ?? "failed") as any } : r),
+      }));
+    }
+  },
+
+  cancelDebug: async (resultId) => {
+    try {
+      await api.post(`/api/jira/results/${resultId}/cancel`);
+      await get().loadResults();
+    } catch {}
+  },
+
+  markRead: async (resultId) => {
+    // Optimistic update
+    set((s) => ({
+      results: s.results.map((r) => r.id === resultId ? { ...r, readAt: new Date().toISOString() } : r),
+      unreadCount: Math.max(0, s.unreadCount - 1),
+    }));
+    try { await api.patch(`/api/jira/results/${resultId}/read`); } catch {}
+  },
+
+  loadUnreadCount: async () => {
+    try {
+      const res = await api.get<{ count: number }>("/api/jira/results/unread-count");
+      set({ unreadCount: res.count });
+    } catch {}
+  },
+}));

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

@@ -1,8 +1,9 @@
 import { create } from "zustand";
+import { getAuthToken } from "@/lib/api-client";
 
 export type Theme = "light" | "dark" | "system";
 export type GitStatusViewMode = "flat" | "tree";
-export type SidebarActiveTab = "explorer" | "git" | "settings" | "database" | "search" | `ext:${string}`;
+export type SidebarActiveTab = "explorer" | "git" | "settings" | "database" | "search" | "jira" | `ext:${string}`;
 
 const STORAGE_KEY = "ppm-settings";
 
@@ -13,9 +14,11 @@ interface SettingsState {
   gitStatusViewMode: GitStatusViewMode;
   wordWrap: boolean;
   sidebarActiveTab: SidebarActiveTab;
+  jiraEnabled: boolean;
   deviceName: string | null;
   version: string | null;
   setTheme: (theme: Theme) => void;
+  setJiraEnabled: (enabled: boolean) => void;
   setDeviceName: (name: string) => Promise<void>;
   toggleSidebar: () => void;
   setSidebarWidth: (width: number) => void;
@@ -32,6 +35,7 @@ interface PersistedSettings {
   gitStatusViewMode?: GitStatusViewMode;
   wordWrap?: boolean;
   sidebarActiveTab?: SidebarActiveTab;
+  jiraEnabled?: boolean;
 }
 
 function loadPersistedSettings(): PersistedSettings {
@@ -46,7 +50,7 @@ function loadPersistedSettings(): PersistedSettings {
 
 function isValidSidebarTab(tab: unknown): tab is SidebarActiveTab {
   if (typeof tab !== "string") return false;
-  return ["explorer", "git", "settings", "database", "search"].includes(tab) || tab.startsWith("ext:");
+  return ["explorer", "git", "settings", "database", "search", "jira"].includes(tab) || tab.startsWith("ext:");
 }
 
 function persistSettings(update: Partial<PersistedSettings>) {
@@ -85,6 +89,7 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
   gitStatusViewMode: _initial.gitStatusViewMode === "flat" ? "flat" : "tree",
   wordWrap: _initial.wordWrap ?? false,
   sidebarActiveTab: isValidSidebarTab(_initial.sidebarActiveTab) ? _initial.sidebarActiveTab : "explorer",
+  jiraEnabled: _initial.jiraEnabled ?? false,
   deviceName: null,
   version: null,
 
@@ -93,9 +98,10 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
     applyThemeClass(theme);
     set({ theme });
     // Save to server (fire-and-forget)
+    const token = getAuthToken();
     fetch("/api/settings/theme", {
       method: "PUT",
-      headers: { "Content-Type": "application/json" },
+      headers: { "Content-Type": "application/json", ...(token ? { Authorization: `Bearer ${token}` } : {}) },
       body: JSON.stringify({ theme }),
     }).catch(() => {});
   },
@@ -114,6 +120,17 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
     } catch {}
   },
 
+  setJiraEnabled: (enabled) => {
+    persistSettings({ jiraEnabled: enabled });
+    set({ jiraEnabled: enabled });
+    // If disabling and currently on jira tab, switch to explorer
+    if (!enabled && get().sidebarActiveTab === "jira") {
+      const tab: SidebarActiveTab = "explorer";
+      persistSettings({ sidebarActiveTab: tab });
+      set({ sidebarActiveTab: tab });
+    }
+  },
+
   toggleSidebar: () => {
     const next = !get().sidebarCollapsed;
     persistSettings({ sidebarCollapsed: next });
@@ -144,9 +161,11 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
 
   fetchServerInfo: async () => {
     try {
+      const token = getAuthToken();
+      const authInit = token ? { headers: { Authorization: `Bearer ${token}` } } : {};
       const [infoRes, themeRes] = await Promise.all([
-        fetch("/api/info"),
-        fetch("/api/settings/theme"),
+        fetch("/api/info", authInit),
+        fetch("/api/settings/theme", authInit),
       ]);
       const infoJson = await infoRes.json();
       if (infoJson.ok) {

package/src/web/styles/globals.css

@@ -192,6 +192,13 @@ html, body {
   padding: 0;
 }
 
+/* Light mode: dark code blocks so github-dark-dimmed syntax colors stay readable */
+.light .markdown-content pre {
+  background: #22272e;
+  color: #adbac7;
+  border-color: #373e47;
+}
+
 .markdown-content :not(pre) > code {
   background: var(--color-background);
   padding: 0.125rem 0.25rem;

package/vite.config.ts

@@ -1,77 +1,12 @@
-import { defineConfig, type Plugin } from "vite";
+import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import tailwindcss from "@tailwindcss/vite";
 import { VitePWA } from "vite-plugin-pwa";
 import monacoEditorPlugin from "vite-plugin-monaco-editor";
 import { resolve } from "path";
-import { createConnection } from "net";
-import type { IncomingMessage } from "http";
-import type { Duplex } from "stream";
-
-/**
- * Custom WebSocket proxy plugin.
- *
- * Replaces http-proxy's built-in WS proxy (which relies on socket.pipe())
- * because Bun on Windows doesn't correctly pipe client→server data when the
- * connection arrives through a Cloudflare tunnel.  Using explicit 'data'
- * event handlers instead of .pipe() fixes the issue.
- */
-function wsProxy(targetPort: number): Plugin {
-  return {
-    name: "ws-proxy",
-    configureServer(server) {
-      server.httpServer?.on(
-        "upgrade",
-        (req: IncomingMessage, socket: Duplex, head: Buffer) => {
-          const url = req.url ?? "";
-          if (!url.startsWith("/ws/")) return;
-
-          const target = createConnection(
-            { port: targetPort, host: "localhost" },
-            () => {
-              const headerLines = Object.entries(req.headers)
-                .filter(([, v]) => v != null)
-                .map(([k, v]) => `${k}: ${Array.isArray(v) ? v.join(", ") : v}`)
-                .join("\r\n");
-              target.write(
-                `GET ${url} HTTP/${req.httpVersion}\r\n${headerLines}\r\n\r\n`,
-              );
-              if (head && head.length > 0) target.write(head);
-
-              socket.on("data", (chunk: Buffer) => {
-                if (!target.destroyed) target.write(chunk);
-              });
-              target.on("data", (chunk: Buffer) => {
-                if (!socket.destroyed) socket.write(chunk);
-              });
-
-              socket.on("close", () => {
-                if (!target.destroyed) target.destroy();
-              });
-              target.on("close", () => {
-                if (!socket.destroyed) socket.destroy();
-              });
-              socket.on("error", () => {
-                if (!target.destroyed) target.destroy();
-              });
-              target.on("error", () => {
-                if (!socket.destroyed) socket.destroy();
-              });
-            },
-          );
-
-          target.on("error", () => {
-            if (!socket.destroyed) socket.destroy();
-          });
-        },
-      );
-    },
-  };
-}
 
 export default defineConfig({
   plugins: [
-    wsProxy(8081),
     react(),
     tailwindcss(),
     ((monacoEditorPlugin as unknown as { default?: (opts: object) => object }).default ?? (monacoEditorPlugin as unknown as (opts: object) => object))({
@@ -134,6 +69,10 @@ export default defineConfig({
     allowedHosts: true,
     proxy: {
       "/api": "http://localhost:8081",
+      "/ws": {
+        target: "http://localhost:8081",
+        ws: true,
+      },
     },
   },
 });