@hienlh/ppm 0.1.0

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

@@ -0,0 +1,182 @@
+import { useEffect, useRef, useCallback, useState } from "react";
+import { Terminal } from "@xterm/xterm";
+import { FitAddon } from "@xterm/addon-fit";
+import { WebLinksAddon } from "@xterm/addon-web-links";
+
+interface UseTerminalOptions {
+  sessionId: string;
+  projectName?: string;
+  containerRef: React.RefObject<HTMLDivElement | null>;
+}
+
+interface UseTerminalReturn {
+  connected: boolean;
+  reconnecting: boolean;
+}
+
+const RESIZE_PREFIX = "\x01RESIZE:";
+
+export function useTerminal(
+  options: UseTerminalOptions,
+): UseTerminalReturn {
+  const { sessionId, containerRef } = options;
+  const termRef = useRef<Terminal | null>(null);
+  const fitRef = useRef<FitAddon | null>(null);
+  const wsRef = useRef<WebSocket | null>(null);
+  const reconnectTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const reconnectAttempts = useRef(0);
+  const [connected, setConnected] = useState(false);
+  const [reconnecting, setReconnecting] = useState(false);
+  const actualSessionId = useRef(sessionId); // Track server-assigned session ID
+
+  const sendResize = useCallback(() => {
+    const term = termRef.current;
+    const ws = wsRef.current;
+    if (term && ws?.readyState === WebSocket.OPEN) {
+      ws.send(`${RESIZE_PREFIX}${term.cols},${term.rows}`);
+    }
+  }, []);
+
+  const connectWs = useCallback(() => {
+    const term = termRef.current;
+    if (!term) return;
+
+    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    const projectName = options.projectName ?? "";
+    // Use actual session ID from server on reconnect (not "new")
+    const sid = actualSessionId.current;
+    const url = `${protocol}//${window.location.host}/ws/project/${encodeURIComponent(projectName)}/terminal/${sid}`;
+
+    const ws = new WebSocket(url);
+    wsRef.current = ws;
+
+    ws.onopen = () => {
+      setConnected(true);
+      setReconnecting(false);
+      reconnectAttempts.current = 0;
+      sendResize();
+    };
+
+    ws.onmessage = (event) => {
+      if (typeof event.data === "string") {
+        // Filter JSON control messages from terminal output
+        if (event.data.startsWith("{")) {
+          try {
+            const msg = JSON.parse(event.data);
+            if (msg.type === "session" || msg.type === "error") {
+              if (msg.type === "session" && msg.id) {
+                actualSessionId.current = msg.id; // Save for reconnect
+              }
+              if (msg.type === "error") {
+                term.write(`\r\n\x1b[31mError: ${msg.message}\x1b[0m\r\n`);
+              }
+              return; // Don't write raw JSON to terminal
+            }
+          } catch {
+            // Not JSON, write as terminal output
+          }
+        }
+        term.write(event.data);
+      }
+    };
+
+    ws.onclose = () => {
+      setConnected(false);
+      scheduleReconnect();
+    };
+
+    ws.onerror = () => {
+      ws.close();
+    };
+  }, [sessionId, sendResize]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  function scheduleReconnect() {
+    const delay = Math.min(
+      1000 * Math.pow(2, reconnectAttempts.current),
+      30000,
+    );
+    reconnectAttempts.current++;
+    setReconnecting(true);
+    reconnectTimer.current = setTimeout(() => {
+      connectWs();
+    }, delay);
+  }
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const term = new Terminal({
+      cursorBlink: true,
+      fontSize: 13,
+      fontFamily: "var(--font-mono)",
+      theme: {
+        background: "#0f1419",
+        foreground: "#e5e7eb",
+        cursor: "#e5e7eb",
+        selectionBackground: "#3b82f640",
+        black: "#1a1f2e",
+        red: "#ef4444",
+        green: "#10b981",
+        yellow: "#f59e0b",
+        blue: "#3b82f6",
+        magenta: "#a855f7",
+        cyan: "#06b6d4",
+        white: "#e5e7eb",
+        brightBlack: "#6b7280",
+        brightRed: "#f87171",
+        brightGreen: "#34d399",
+        brightYellow: "#fbbf24",
+        brightBlue: "#60a5fa",
+        brightMagenta: "#c084fc",
+        brightCyan: "#22d3ee",
+        brightWhite: "#f9fafb",
+      },
+    });
+
+    const fitAddon = new FitAddon();
+    const webLinksAddon = new WebLinksAddon();
+
+    term.loadAddon(fitAddon);
+    term.loadAddon(webLinksAddon);
+    term.open(container);
+    fitAddon.fit();
+
+    termRef.current = term;
+    fitRef.current = fitAddon;
+
+    // Wire input to WS
+    term.onData((data) => {
+      const ws = wsRef.current;
+      if (ws?.readyState === WebSocket.OPEN) {
+        ws.send(data);
+      }
+    });
+
+    // Connect WS
+    connectWs();
+
+    // ResizeObserver for auto-fit
+    const resizeObserver = new ResizeObserver(() => {
+      try {
+        fitAddon.fit();
+        sendResize();
+      } catch {
+        // Ignore fit errors during teardown
+      }
+    });
+    resizeObserver.observe(container);
+
+    return () => {
+      resizeObserver.disconnect();
+      if (reconnectTimer.current) clearTimeout(reconnectTimer.current);
+      wsRef.current?.close();
+      wsRef.current = null;
+      term.dispose();
+      termRef.current = null;
+      fitRef.current = null;
+    };
+  }, [sessionId]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return { connected, reconnecting };
+}

package/src/web/hooks/use-url-sync.ts

@@ -0,0 +1,66 @@
+import { useEffect, useRef } from "react";
+import { useTabStore } from "@/stores/tab-store";
+
+/**
+ * Parse the current URL to extract project name and tab ID.
+ * Expected format: /project/:projectName/tab/:tabId
+ */
+export function parseUrlState(): { projectName: string | null; tabId: string | null } {
+  const path = window.location.pathname;
+  const match = path.match(/^\/project\/([^/]+)(?:\/tab\/([^/]+))?/);
+  if (!match) return { projectName: null, tabId: null };
+  return {
+    projectName: match[1] ? decodeURIComponent(match[1]) : null,
+    tabId: match[2] ? decodeURIComponent(match[2]) : null,
+  };
+}
+
+/**
+ * Build URL path from project name and tab ID.
+ */
+function buildUrl(projectName: string | null, tabId: string | null): string {
+  if (!projectName || projectName === "__global__") return "/";
+  let url = `/project/${encodeURIComponent(projectName)}`;
+  if (tabId) url += `/tab/${encodeURIComponent(tabId)}`;
+  return url;
+}
+
+/**
+ * Sync tab/project state with browser URL.
+ * - On tab/project change → pushState (enables back/forward navigation)
+ * - On popstate (back/forward) → restore tab from URL
+ */
+export function useUrlSync() {
+  const activeTabId = useTabStore((s) => s.activeTabId);
+  const currentProject = useTabStore((s) => s.currentProject);
+  const isPopState = useRef(false);
+
+  // Push URL when active tab or project changes
+  useEffect(() => {
+    // Skip push if this change was triggered by popstate (back/forward)
+    if (isPopState.current) {
+      isPopState.current = false;
+      return;
+    }
+
+    const newUrl = buildUrl(currentProject, activeTabId);
+    if (window.location.pathname !== newUrl) {
+      window.history.pushState(null, "", newUrl);
+    }
+  }, [activeTabId, currentProject]);
+
+  // Listen for back/forward navigation
+  useEffect(() => {
+    function handlePopState() {
+      const { tabId } = parseUrlState();
+      const { tabs, setActiveTab } = useTabStore.getState();
+      if (tabId && tabs.some((t) => t.id === tabId)) {
+        isPopState.current = true;
+        setActiveTab(tabId);
+      }
+    }
+
+    window.addEventListener("popstate", handlePopState);
+    return () => window.removeEventListener("popstate", handlePopState);
+  }, []);
+}

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

@@ -0,0 +1,48 @@
+import { useEffect, useRef, useCallback } from "react";
+import { WsClient } from "@/lib/ws-client";
+
+interface UseWebSocketOptions {
+  url: string;
+  onMessage?: (event: MessageEvent) => void;
+  autoConnect?: boolean;
+}
+
+export function useWebSocket({
+  url,
+  onMessage,
+  autoConnect = true,
+}: UseWebSocketOptions) {
+  const clientRef = useRef<WsClient | null>(null);
+
+  useEffect(() => {
+    const client = new WsClient(url);
+    clientRef.current = client;
+
+    if (onMessage) {
+      client.onMessage(onMessage);
+    }
+
+    if (autoConnect) {
+      client.connect();
+    }
+
+    return () => {
+      client.disconnect();
+      clientRef.current = null;
+    };
+  }, [url, autoConnect]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const send = useCallback((data: string | ArrayBuffer) => {
+    clientRef.current?.send(data);
+  }, []);
+
+  const connect = useCallback(() => {
+    clientRef.current?.connect();
+  }, []);
+
+  const disconnect = useCallback(() => {
+    clientRef.current?.disconnect();
+  }, []);
+
+  return { send, connect, disconnect };
+}

package/src/web/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <meta name="theme-color" content="#0f1419" />
+    <title>PPM — Personal Project Manager</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600;700&family=Geist:wght@400;500;600;700&display=swap" rel="stylesheet" />
+  </head>
+  <body class="bg-[#0f1419] text-[#e5e7eb] font-sans antialiased">
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

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

@@ -0,0 +1,90 @@
+const TOKEN_KEY = "ppm-auth-token";
+
+class ApiClient {
+  private baseUrl: string;
+
+  constructor(baseUrl = "") {
+    this.baseUrl = baseUrl;
+  }
+
+  private getToken(): string | null {
+    return localStorage.getItem(TOKEN_KEY);
+  }
+
+  private headers(): HeadersInit {
+    const h: HeadersInit = { "Content-Type": "application/json" };
+    const token = this.getToken();
+    if (token) h["Authorization"] = `Bearer ${token}`;
+    return h;
+  }
+
+  /** Auto-unwraps {ok, data} envelope. Returns T directly. */
+  async get<T>(path: string): Promise<T> {
+    const res = await fetch(`${this.baseUrl}${path}`, {
+      headers: this.headers(),
+    });
+    return this.handleResponse<T>(res);
+  }
+
+  async post<T>(path: string, body?: unknown): Promise<T> {
+    const res = await fetch(`${this.baseUrl}${path}`, {
+      method: "POST",
+      headers: this.headers(),
+      body: body != null ? JSON.stringify(body) : undefined,
+    });
+    return this.handleResponse<T>(res);
+  }
+
+  async put<T>(path: string, body?: unknown): Promise<T> {
+    const res = await fetch(`${this.baseUrl}${path}`, {
+      method: "PUT",
+      headers: this.headers(),
+      body: body != null ? JSON.stringify(body) : undefined,
+    });
+    return this.handleResponse<T>(res);
+  }
+
+  async del(path: string, body?: unknown): Promise<void> {
+    const res = await fetch(`${this.baseUrl}${path}`, {
+      method: "DELETE",
+      headers: this.headers(),
+      body: body != null ? JSON.stringify(body) : undefined,
+    });
+    await this.handleResponse<void>(res);
+  }
+
+  private async handleResponse<T>(res: Response): Promise<T> {
+    if (res.status === 401) {
+      localStorage.removeItem(TOKEN_KEY);
+      window.location.reload();
+      throw new Error("Unauthorized");
+    }
+
+    const json = await res.json();
+
+    if (json.ok === false) {
+      throw new Error(json.error ?? `HTTP ${res.status}`);
+    }
+
+    return json.data as T;
+  }
+}
+
+export const api = new ApiClient();
+
+/** Build project-scoped API path prefix */
+export function projectUrl(projectName: string): string {
+  return `/api/project/${encodeURIComponent(projectName)}`;
+}
+
+export function setAuthToken(token: string) {
+  localStorage.setItem(TOKEN_KEY, token);
+}
+
+export function clearAuthToken() {
+  localStorage.removeItem(TOKEN_KEY);
+}
+
+export function getAuthToken(): string | null {
+  return localStorage.getItem(TOKEN_KEY);
+}

package/src/web/lib/file-support.ts

@@ -0,0 +1,68 @@
+/**
+ * Claude Code supported file types for chat attachments.
+ * Supported files are uploaded and referenced; unsupported files get path inserted as text.
+ */
+
+/** Image MIME types Claude Code can read via the Read tool (multimodal) */
+const SUPPORTED_IMAGE_TYPES = new Set([
+  "image/png",
+  "image/jpeg",
+  "image/gif",
+  "image/webp",
+]);
+
+/** Document MIME types Claude Code can read */
+const SUPPORTED_DOC_TYPES = new Set([
+  "application/pdf",
+]);
+
+/** Text/code MIME prefixes Claude Code can read */
+const TEXT_MIME_PREFIXES = [
+  "text/",
+  "application/json",
+  "application/xml",
+  "application/javascript",
+  "application/typescript",
+  "application/x-yaml",
+  "application/toml",
+  "application/x-sh",
+];
+
+/** File extensions considered text/code even if MIME is application/octet-stream */
+const TEXT_EXTENSIONS = new Set([
+  ".ts", ".tsx", ".js", ".jsx", ".mjs", ".cjs",
+  ".py", ".rb", ".go", ".rs", ".java", ".kt", ".swift",
+  ".c", ".cpp", ".h", ".hpp", ".cs",
+  ".json", ".yaml", ".yml", ".toml", ".xml",
+  ".md", ".mdx", ".txt", ".csv", ".tsv",
+  ".html", ".css", ".scss", ".less", ".sass",
+  ".sh", ".bash", ".zsh", ".fish",
+  ".sql", ".graphql", ".gql",
+  ".env", ".ini", ".cfg", ".conf",
+  ".dockerfile", ".makefile",
+  ".vue", ".svelte", ".astro",
+  ".ipynb",
+]);
+
+export function isImageFile(file: File): boolean {
+  return SUPPORTED_IMAGE_TYPES.has(file.type);
+}
+
+export function isSupportedFile(file: File): boolean {
+  // Images
+  if (SUPPORTED_IMAGE_TYPES.has(file.type)) return true;
+  // Documents
+  if (SUPPORTED_DOC_TYPES.has(file.type)) return true;
+  // Text MIME types
+  if (TEXT_MIME_PREFIXES.some((p) => file.type.startsWith(p))) return true;
+  // Fallback: check extension
+  const ext = getExtension(file.name);
+  if (ext && TEXT_EXTENSIONS.has(ext)) return true;
+  return false;
+}
+
+function getExtension(name: string): string {
+  const dot = name.lastIndexOf(".");
+  if (dot === -1) return "";
+  return name.slice(dot).toLowerCase();
+}

package/src/web/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

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

@@ -0,0 +1,100 @@
+type MessageHandler = (data: MessageEvent) => void;
+
+const MAX_RECONNECT_DELAY = 30_000;
+const BASE_DELAY = 1_000;
+
+export class WsClient {
+  private ws: WebSocket | null = null;
+  private url: string;
+  private handlers: MessageHandler[] = [];
+  private reconnectAttempts = 0;
+  private reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+  private intentionalClose = false;
+
+  constructor(url: string) {
+    this.url = url;
+  }
+
+  connect(): void {
+    this.intentionalClose = false;
+    this.cleanup();
+
+    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    const fullUrl = this.url.startsWith("ws")
+      ? this.url
+      : `${protocol}//${window.location.host}${this.url}`;
+
+    this.ws = new WebSocket(fullUrl);
+
+    this.ws.onopen = () => {
+      this.reconnectAttempts = 0;
+    };
+
+    this.ws.onmessage = (event) => {
+      for (const handler of this.handlers) {
+        handler(event);
+      }
+    };
+
+    this.ws.onclose = () => {
+      if (!this.intentionalClose) {
+        this.scheduleReconnect();
+      }
+    };
+
+    this.ws.onerror = () => {
+      this.ws?.close();
+    };
+  }
+
+  disconnect(): void {
+    this.intentionalClose = true;
+    this.cleanup();
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+  }
+
+  send(data: string | ArrayBuffer): void {
+    if (this.ws?.readyState === WebSocket.OPEN) {
+      this.ws.send(data);
+    }
+  }
+
+  onMessage(handler: MessageHandler): () => void {
+    this.handlers.push(handler);
+    return () => {
+      this.handlers = this.handlers.filter((h) => h !== handler);
+    };
+  }
+
+  get isConnected(): boolean {
+    return this.ws?.readyState === WebSocket.OPEN;
+  }
+
+  private cleanup(): void {
+    if (this.ws) {
+      this.ws.onopen = null;
+      this.ws.onclose = null;
+      this.ws.onmessage = null;
+      this.ws.onerror = null;
+      if (
+        this.ws.readyState === WebSocket.OPEN ||
+        this.ws.readyState === WebSocket.CONNECTING
+      ) {
+        this.ws.close();
+      }
+      this.ws = null;
+    }
+  }
+
+  private scheduleReconnect(): void {
+    const delay = Math.min(
+      BASE_DELAY * Math.pow(2, this.reconnectAttempts),
+      MAX_RECONNECT_DELAY,
+    );
+    this.reconnectAttempts++;
+    this.reconnectTimer = setTimeout(() => this.connect(), delay);
+  }
+}

package/src/web/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./app.tsx";
+import "./styles/globals.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/src/web/public/icon-192.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192">
+  <rect width="192" height="192" rx="24" fill="#0f1419"/>
+  <rect x="8" y="8" width="176" height="176" rx="20" fill="#1a1f2e"/>
+  <text x="96" y="110" text-anchor="middle" font-family="sans-serif" font-weight="700" font-size="56" fill="#3b82f6">PPM</text>
+</svg>

package/src/web/public/icon-512.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192">
+  <rect width="192" height="192" rx="24" fill="#0f1419"/>
+  <rect x="8" y="8" width="176" height="176" rx="20" fill="#1a1f2e"/>
+  <text x="96" y="110" text-anchor="middle" font-family="sans-serif" font-weight="700" font-size="56" fill="#3b82f6">PPM</text>
+</svg>

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

@@ -0,0 +1,81 @@
+import { create } from "zustand";
+import { api, projectUrl } from "@/lib/api-client";
+
+export interface FileNode {
+  name: string;
+  path: string;
+  type: "file" | "directory";
+  children?: FileNode[];
+  size?: number;
+  modified?: string;
+}
+
+interface FileStore {
+  tree: FileNode[];
+  loading: boolean;
+  error: string | null;
+  expandedPaths: Set<string>;
+  selectedFiles: string[];
+  fetchTree: (projectName: string) => Promise<void>;
+  toggleExpand: (path: string) => void;
+  setExpanded: (path: string, expanded: boolean) => void;
+  toggleFileSelect: (path: string) => void;
+  clearSelection: () => void;
+  reset: () => void;
+}
+
+export const useFileStore = create<FileStore>((set, get) => ({
+  tree: [],
+  loading: false,
+  error: null,
+  expandedPaths: new Set<string>(),
+  selectedFiles: [],
+
+  fetchTree: async (projectName: string) => {
+    set({ loading: true, error: null });
+    try {
+      const tree = await api.get<FileNode[]>(
+        `${projectUrl(projectName)}/files/tree?depth=3`,
+      );
+      set({ tree, loading: false });
+    } catch (err) {
+      set({
+        error: err instanceof Error ? err.message : "Failed to load files",
+        loading: false,
+      });
+    }
+  },
+
+  toggleExpand: (path: string) => {
+    const expanded = new Set(get().expandedPaths);
+    if (expanded.has(path)) {
+      expanded.delete(path);
+    } else {
+      expanded.add(path);
+    }
+    set({ expandedPaths: expanded });
+  },
+
+  setExpanded: (path: string, expanded: boolean) => {
+    const paths = new Set(get().expandedPaths);
+    if (expanded) paths.add(path);
+    else paths.delete(path);
+    set({ expandedPaths: paths });
+  },
+
+  toggleFileSelect: (path: string) => {
+    const current = get().selectedFiles;
+    const idx = current.indexOf(path);
+    if (idx >= 0) {
+      set({ selectedFiles: current.filter((p) => p !== path) });
+    } else {
+      // Max 2 selected files
+      const next = current.length >= 2 ? [current[1]!, path] : [...current, path];
+      set({ selectedFiles: next });
+    }
+  },
+
+  clearSelection: () => set({ selectedFiles: [] }),
+
+  reset: () => set({ tree: [], expandedPaths: new Set(), error: null, selectedFiles: [] }),
+}));