@hienlh/ppm 0.8.86 → 0.8.88

package/src/web/hooks/use-global-keybindings.ts

@@ -21,6 +21,7 @@ export function useGlobalKeybindings() {
 
   useEffect(() => {
     let lastShiftUp = 0;
+    let shiftAlone = false; // true if Shift was pressed without any other key
     const { matchesEvent } = useKeybindingsStore.getState();
 
     let composing = false;
@@ -28,9 +29,24 @@ export function useGlobalKeybindings() {
     function onCompositionEnd() { composing = false; }
 
     function handler(e: KeyboardEvent) {
+      // Track whether Shift is pressed alone (not as a modifier for another key)
+      if (e.type === "keydown" && e.key === "Shift") {
+        shiftAlone = true;
+        return;
+      }
+      // Any non-Shift keydown while Shift is held means Shift is used as modifier
+      if (e.type === "keydown" && e.shiftKey) {
+        shiftAlone = false;
+      }
+      // Any non-Shift key resets the double-tap timer (user is typing, not double-tapping)
+      if (e.type === "keydown" && e.key !== "Shift") {
+        lastShiftUp = 0;
+      }
+
       // Double-Shift detection (on keyup to avoid repeats) — always active
-      // Skip during IME composition (e.g. Vietnamese Telex) to prevent false triggers
-      if (e.type === "keyup" && e.key === "Shift" && !e.ctrlKey && !e.metaKey && !e.altKey && !composing && !e.isComposing) {
+      // Only counts if Shift was pressed alone (not used as modifier e.g. Shift+T for uppercase)
+      // Also skip during IME composition (e.g. Vietnamese Telex) to prevent false triggers
+      if (e.type === "keyup" && e.key === "Shift" && shiftAlone && !e.ctrlKey && !e.metaKey && !e.altKey && !composing && !e.isComposing) {
         const now = Date.now();
         if (now - lastShiftUp < 400) {
           lastShiftUp = 0;
@@ -124,6 +140,13 @@ export function useGlobalKeybindings() {
         return;
       }
 
+      // Toggle voice input in chat
+      if (match(e, "voice-input")) {
+        e.preventDefault();
+        window.dispatchEvent(new CustomEvent("toggle-voice-input"));
+        return;
+      }
+
       // Open search (sidebar)
       if (match(e, "open-search")) {
         e.preventDefault();

package/src/web/hooks/use-server-reload.ts

@@ -1,4 +1,5 @@
 import { useEffect } from "react";
+import { useConnectionStore } from "@/stores/connection-store";
 
 const POLL_NORMAL_MS = 10_000;  // 10s when server is up
 const POLL_DOWN_MS   = 2_000;   // 2s when server is down (waiting for it to come back)
@@ -8,17 +9,21 @@ const POLL_DOWN_MS   = 2_000;   // 2s when server is down (waiting for it to com
  * When the server goes down and comes back up (restart/stop+start),
  * clears all browser/SW caches and reloads the page so the user
  * always gets fresh assets.
+ *
+ * Also updates the connection store to drive the ConnectionLostOverlay.
  */
 export function useServerReload() {
   useEffect(() => {
     let serverWasDown = false;
     let timer: ReturnType<typeof setTimeout>;
+    const { markDown, markUp } = useConnectionStore.getState();
 
     async function check() {
       try {
         const res = await fetch("/api/health", { cache: "no-store" });
         if (res.ok && serverWasDown) {
           // Server came back — clear caches then reload
+          markUp();
           if ("caches" in window) {
             const keys = await caches.keys();
             await Promise.all(keys.map((k) => caches.delete(k)));
@@ -26,9 +31,13 @@ export function useServerReload() {
           window.location.reload();
           return;
         }
+        if (res.ok) {
+          markUp();
+        }
         serverWasDown = false;
       } catch {
         serverWasDown = true;
+        markDown();
       }
       timer = setTimeout(check, serverWasDown ? POLL_DOWN_MS : POLL_NORMAL_MS);
     }

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

@@ -1,37 +1,181 @@
 import { useEffect, useRef } from "react";
-import { useTabStore } from "@/stores/tab-store";
+import { useTabStore, type TabType } from "@/stores/tab-store";
+
+// ---------------------------------------------------------------------------
+// URL state types
+// ---------------------------------------------------------------------------
+
+export interface UrlState {
+  projectName: string | null;
+  tabType: TabType | null;
+  tabIdentifier: string | null;
+  openChat: string | null;
+}
+
+const VALID_TAB_TYPES: TabType[] = [
+  "terminal", "chat", "editor", "database", "sqlite",
+  "postgres", "git-graph", "git-diff", "settings", "browser",
+];
+
+// ---------------------------------------------------------------------------
+// Parse URL → state
+// ---------------------------------------------------------------------------
 
 /**
- * Parse the current URL to extract project name and tab ID.
- * Expected format: /project/:projectName/tab/:tabId
+ * Parse the current URL to extract project name and tab info.
+ * Format: /project/{name}/{tabType}/{...identifier}
  */
-export function parseUrlState(): { projectName: string | null; tabId: string | null; openChat: string | null } {
+export function parseUrlState(): UrlState {
   const path = window.location.pathname;
-  const match = path.match(/^\/project\/([^/]+)(?:\/tab\/([^/]+))?/);
   const params = new URLSearchParams(window.location.search);
   const openChat = params.get("openChat");
-  if (!match) return { projectName: null, tabId: null, openChat };
-  return {
-    projectName: match[1] ? decodeURIComponent(match[1]) : null,
-    tabId: match[2] ? decodeURIComponent(match[2]) : null,
-    openChat,
-  };
+
+  const match = path.match(/^\/project\/([^/]+)(?:\/([^/]+)(\/.*)?)?/);
+  if (!match) return { projectName: null, tabType: null, tabIdentifier: null, openChat };
+
+  const projectName = decodeURIComponent(match[1]!);
+  const rawType = match[2] ?? null;
+  const rawIdentifier = match[3] ? match[3].slice(1) : null; // strip leading /
+
+  // Legacy fallback: /project/{name}/tab/{tabId}
+  if (rawType === "tab") {
+    return { projectName, tabType: null, tabIdentifier: null, openChat };
+  }
+
+  const tabType = VALID_TAB_TYPES.includes(rawType as TabType) ? (rawType as TabType) : null;
+
+  return { projectName, tabType, tabIdentifier: rawIdentifier, openChat };
 }
 
+// ---------------------------------------------------------------------------
+// Build URL from state
+// ---------------------------------------------------------------------------
+
 /**
- * Build URL path from project name and tab ID.
+ * Build URL path from project name and deterministic tab ID.
  */
-function buildUrl(projectName: string | null, tabId: string | null): string {
+export 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)}`;
+  if (!tabId) return url;
+
+  // Strip panel suffix (@panel-xxx) — not meaningful in URLs
+  const atIdx = tabId.indexOf("@");
+  const cleanId = atIdx !== -1 ? tabId.slice(0, atIdx) : tabId;
+
+  // tabId format: "type:identifier" or "type" (singletons)
+  const colonIdx = cleanId.indexOf(":");
+  if (colonIdx === -1) {
+    // Singleton: git-graph, settings
+    url += `/${cleanId}`;
+  } else {
+    const type = cleanId.slice(0, colonIdx);
+    const identifier = cleanId.slice(colonIdx + 1);
+    // Real slashes — no encoding for paths. Only encode special URL chars.
+    url += `/${type}/${identifier.replace(/[?#]/g, encodeURIComponent)}`;
+  }
   return url;
 }
 
+// ---------------------------------------------------------------------------
+// Tab ID reconstruction from URL
+// ---------------------------------------------------------------------------
+
+/** Reconstruct deterministic tab ID from parsed URL */
+export function tabIdFromUrl(tabType: TabType, tabIdentifier: string | null): string {
+  if (!tabIdentifier) return tabType; // singleton
+  return `${tabType}:${tabIdentifier}`;
+}
+
+// ---------------------------------------------------------------------------
+// Auto-open tab from URL
+// ---------------------------------------------------------------------------
+
+function buildMetadataFromUrl(
+  type: TabType, identifier: string | null, projectName: string,
+): Record<string, unknown> | null {
+  switch (type) {
+    case "editor": return identifier ? { filePath: identifier, projectName } : null;
+    case "chat": {
+      if (!identifier) return null;
+      const slashIdx = identifier.indexOf("/");
+      if (slashIdx === -1) return { sessionId: identifier, projectName };
+      const providerId = identifier.slice(0, slashIdx);
+      const sessionId = identifier.slice(slashIdx + 1);
+      return sessionId ? { sessionId, providerId, projectName } : null;
+    }
+    case "terminal": return { terminalIndex: parseInt(identifier ?? "1", 10), projectName };
+    case "git-graph": return { projectName };
+    case "git-diff": return identifier ? { filePath: identifier, projectName } : null;
+    case "settings": return {};
+    case "database": {
+      const [connId, tableName] = (identifier ?? "").split(":");
+      return connId ? { connectionId: connId, tableName: tableName ?? "" } : null;
+    }
+    case "sqlite": return identifier ? { filePath: identifier, projectName } : null;
+    case "postgres": {
+      const [connId, tableName] = (identifier ?? "").split(":");
+      return connId ? { connectionId: connId, tableName: tableName ?? "" } : null;
+    }
+    case "browser": return identifier ? { url: identifier } : null;
+    default: return null;
+  }
+}
+
+function buildTitleFromUrl(type: TabType, identifier: string | null): string {
+  switch (type) {
+    case "editor": return identifier?.split("/").pop() ?? "File";
+    case "chat": return "Chat";
+    case "terminal": return `Terminal ${identifier ?? "1"}`;
+    case "git-graph": return "Git Graph";
+    case "git-diff": return identifier?.split("/").pop() ?? "Diff";
+    case "settings": return "Settings";
+    case "database": return identifier ?? "Database";
+    case "sqlite": return identifier?.split("/").pop() ?? "SQLite";
+    case "postgres": return identifier ?? "PostgreSQL";
+    case "browser": return "Browser";
+    default: return type;
+  }
+}
+
+/** Auto-open or focus a tab based on URL state */
+export function autoOpenFromUrl(
+  tabType: TabType,
+  tabIdentifier: string | null,
+  projectName: string,
+): void {
+  const { tabs, setActiveTab, openTab } = useTabStore.getState();
+  const expectedId = tabIdFromUrl(tabType, tabIdentifier);
+
+  // Check if tab already exists
+  const existing = tabs.find((t) => t.id === expectedId);
+  if (existing) {
+    setActiveTab(existing.id);
+    return;
+  }
+
+  // Auto-create tab from URL
+  const metadata = buildMetadataFromUrl(tabType, tabIdentifier, projectName);
+  if (!metadata) return;
+
+  openTab({
+    type: tabType,
+    title: buildTitleFromUrl(tabType, tabIdentifier),
+    projectId: projectName,
+    closable: true,
+    metadata,
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Hook: sync URL ↔ tab state
+// ---------------------------------------------------------------------------
+
 /**
  * Sync tab/project state with browser URL.
- * - On tab/project change → pushState (enables back/forward navigation)
- * - On popstate (back/forward) → restore tab from URL
+ * - On tab/project change → pushState with type-based URL
+ * - On popstate (back/forward) → restore/create tab from URL
  */
 export function useUrlSync() {
   const activeTabId = useTabStore((s) => s.activeTabId);
@@ -40,7 +184,6 @@ export function useUrlSync() {
 
   // 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;
@@ -55,11 +198,20 @@ export function useUrlSync() {
   // Listen for back/forward navigation
   useEffect(() => {
     function handlePopState() {
-      const { tabId } = parseUrlState();
+      const { tabType, tabIdentifier } = parseUrlState();
+      if (!tabType) return;
+
+      isPopState.current = true;
       const { tabs, setActiveTab } = useTabStore.getState();
-      if (tabId && tabs.some((t) => t.id === tabId)) {
-        isPopState.current = true;
-        setActiveTab(tabId);
+      const expectedId = tabIdFromUrl(tabType, tabIdentifier);
+      const existing = tabs.find((t) => t.id === expectedId);
+
+      if (existing) {
+        setActiveTab(existing.id);
+      } else {
+        // Auto-open tab on back/forward if it was closed
+        const project = useTabStore.getState().currentProject;
+        if (project) autoOpenFromUrl(tabType, tabIdentifier, project);
       }
     }
 

package/src/web/hooks/use-voice-input.ts

@@ -0,0 +1,111 @@
+import { useState, useRef, useCallback } from "react";
+
+// Extend Window for webkit prefix
+interface SpeechRecognitionEvent extends Event {
+  results: SpeechRecognitionResultList;
+  resultIndex: number;
+}
+
+type SpeechRecognitionInstance = {
+  lang: string;
+  continuous: boolean;
+  interimResults: boolean;
+  start(): void;
+  stop(): void;
+  abort(): void;
+  onresult: ((event: SpeechRecognitionEvent) => void) | null;
+  onend: (() => void) | null;
+  onerror: ((event: Event & { error: string }) => void) | null;
+};
+
+type SpeechRecognitionConstructor = new () => SpeechRecognitionInstance;
+
+function getSpeechRecognition(): SpeechRecognitionConstructor | null {
+  const w = window as unknown as {
+    SpeechRecognition?: SpeechRecognitionConstructor;
+    webkitSpeechRecognition?: SpeechRecognitionConstructor;
+  };
+  return w.SpeechRecognition ?? w.webkitSpeechRecognition ?? null;
+}
+
+export function useVoiceInput(options?: { lang?: string }) {
+  const [isListening, setIsListening] = useState(false);
+  const [interimText, setInterimText] = useState("");
+  const recognitionRef = useRef<SpeechRecognitionInstance | null>(null);
+  // Accumulate finalized text across multiple result events
+  const finalizedRef = useRef("");
+
+  const supported = typeof window !== "undefined" && getSpeechRecognition() !== null;
+
+  const start = useCallback(
+    (onResult: (text: string, isFinal: boolean) => void) => {
+      const SR = getSpeechRecognition();
+      if (!SR) return;
+
+      // Stop any existing session
+      recognitionRef.current?.abort();
+
+      const recognition = new SR();
+      recognition.lang = options?.lang ?? "vi-VN";
+      recognition.continuous = true;
+      recognition.interimResults = true;
+
+      finalizedRef.current = "";
+
+      recognition.onresult = (event: SpeechRecognitionEvent) => {
+        let interim = "";
+        let newFinalized = "";
+
+        for (let i = 0; i < event.results.length; i++) {
+          const result = event.results[i]!;
+          if (result.isFinal) {
+            newFinalized += result[0]!.transcript;
+          } else {
+            interim += result[0]!.transcript;
+          }
+        }
+
+        // Update finalized accumulator
+        if (newFinalized) {
+          finalizedRef.current = newFinalized;
+        }
+
+        const fullText = (finalizedRef.current + " " + interim).trim();
+        setInterimText(interim);
+        onResult(fullText, interim.length === 0 && finalizedRef.current.length > 0);
+      };
+
+      recognition.onend = () => {
+        setIsListening(false);
+        setInterimText("");
+        // Deliver final text if any
+        if (finalizedRef.current) {
+          onResult(finalizedRef.current.trim(), true);
+        }
+      };
+
+      recognition.onerror = (event) => {
+        // "no-speech" and "aborted" are expected, not real errors
+        if (event.error !== "no-speech" && event.error !== "aborted") {
+          console.warn("[voice-input] error:", event.error);
+        }
+        setIsListening(false);
+        setInterimText("");
+      };
+
+      recognitionRef.current = recognition;
+      recognition.start();
+      setIsListening(true);
+    },
+    [options?.lang],
+  );
+
+  const stop = useCallback(() => {
+    recognitionRef.current?.stop();
+    recognitionRef.current = null;
+    setIsListening(false);
+    setInterimText("");
+  }, []);
+
+  return { isListening, interimText, start, stop, supported };
+}

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

@@ -0,0 +1,38 @@
+import { api } from "./api-client";
+import type { McpServerConfig } from "../../types/mcp";
+
+export interface McpServerEntry {
+  name: string;
+  transport: string;
+  config: McpServerConfig;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export function getMcpServers(): Promise<McpServerEntry[]> {
+  return api.get<McpServerEntry[]>("/api/settings/mcp");
+}
+
+export function getMcpServer(name: string): Promise<McpServerConfig> {
+  return api.get<McpServerConfig>(`/api/settings/mcp/${encodeURIComponent(name)}`);
+}
+
+export function addMcpServer(name: string, config: McpServerConfig): Promise<{ name: string }> {
+  return api.post<{ name: string }>("/api/settings/mcp", { name, config });
+}
+
+export function updateMcpServer(name: string, config: McpServerConfig): Promise<{ name: string }> {
+  return api.put<{ name: string }>(`/api/settings/mcp/${encodeURIComponent(name)}`, config);
+}
+
+export function deleteMcpServer(name: string): Promise<void> {
+  return api.del(`/api/settings/mcp/${encodeURIComponent(name)}`);
+}
+
+export function importMcpServers(): Promise<{ imported: number; skipped: number }> {
+  return api.post<{ imported: number; skipped: number }>("/api/settings/mcp/import", {});
+}
+
+export function previewMcpImport(): Promise<{ available: boolean; servers: Record<string, McpServerConfig> }> {
+  return api.get<{ available: boolean; servers: Record<string, McpServerConfig> }>("/api/settings/mcp/import/preview");
+}

package/src/web/lib/csv-parser.ts

@@ -0,0 +1,134 @@
+/** Simple state-machine CSV parser handling quoted fields, embedded commas, newlines */
+
+const enum State {
+  FIELD_START,
+  UNQUOTED,
+  QUOTED,
+  QUOTE_IN_QUOTED,
+}
+
+export interface CsvData {
+  headers: string[];
+  rows: string[][];
+}
+
+export function parseCsv(content: string): CsvData {
+  const rows: string[][] = [];
+  let row: string[] = [];
+  let field = "";
+  let state: State = State.FIELD_START;
+
+  for (let i = 0; i < content.length; i++) {
+    const ch = content[i]!;
+
+    switch (state) {
+      case State.FIELD_START:
+        if (ch === '"') {
+          state = State.QUOTED;
+        } else if (ch === ",") {
+          row.push(field);
+          field = "";
+        } else if (ch === "\r") {
+          // skip \r, handle \n next
+        } else if (ch === "\n") {
+          row.push(field);
+          field = "";
+          rows.push(row);
+          row = [];
+        } else {
+          field += ch;
+          state = State.UNQUOTED;
+        }
+        break;
+
+      case State.UNQUOTED:
+        if (ch === ",") {
+          row.push(field);
+          field = "";
+          state = State.FIELD_START;
+        } else if (ch === "\r") {
+          // skip
+        } else if (ch === "\n") {
+          row.push(field);
+          field = "";
+          rows.push(row);
+          row = [];
+          state = State.FIELD_START;
+        } else {
+          field += ch;
+        }
+        break;
+
+      case State.QUOTED:
+        if (ch === '"') {
+          state = State.QUOTE_IN_QUOTED;
+        } else {
+          field += ch;
+        }
+        break;
+
+      case State.QUOTE_IN_QUOTED:
+        if (ch === '"') {
+          // Escaped quote ""
+          field += '"';
+          state = State.QUOTED;
+        } else if (ch === ",") {
+          row.push(field);
+          field = "";
+          state = State.FIELD_START;
+        } else if (ch === "\r") {
+          // skip
+        } else if (ch === "\n") {
+          row.push(field);
+          field = "";
+          rows.push(row);
+          row = [];
+          state = State.FIELD_START;
+        } else {
+          // Malformed — treat closing quote as literal
+          field += ch;
+          state = State.UNQUOTED;
+        }
+        break;
+    }
+  }
+
+  // Flush last field/row
+  if (field || row.length > 0) {
+    row.push(field);
+    rows.push(row);
+  }
+
+  if (rows.length === 0) return { headers: [], rows: [] };
+
+  const headers = rows[0]!;
+  const dataRows = rows.slice(1);
+
+  // Normalize column count — pad short rows, truncate long ones
+  const colCount = headers.length;
+  for (let i = 0; i < dataRows.length; i++) {
+    const r = dataRows[i]!;
+    if (r.length < colCount) {
+      while (r.length < colCount) r.push("");
+    } else if (r.length > colCount) {
+      dataRows[i] = r.slice(0, colCount);
+    }
+  }
+
+  return { headers, rows: dataRows };
+}
+
+export function serializeCsv(headers: string[], rows: string[][]): string {
+  const escape = (val: string): string => {
+    if (val.includes(",") || val.includes('"') || val.includes("\n")) {
+      return `"${val.replace(/"/g, '""')}"`;
+    }
+    return val;
+  };
+
+  const lines = [headers.map(escape).join(",")];
+  for (const row of rows) {
+    lines.push(row.map(escape).join(","));
+  }
+  return lines.join("\n");
+}

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

@@ -0,0 +1,39 @@
+import { create } from "zustand";
+
+interface ConnectionState {
+  /** Whether the server is currently unreachable */
+  isDown: boolean;
+  /** Timestamp when the server first went down */
+  downSince: number | null;
+  /** Whether the overlay should be shown (down for > threshold) */
+  showOverlay: boolean;
+
+  markDown: () => void;
+  markUp: () => void;
+}
+
+/** How long the server must be unreachable before showing the overlay */
+const OVERLAY_THRESHOLD_MS = 15_000;
+
+export const useConnectionStore = create<ConnectionState>((set, get) => ({
+  isDown: false,
+  downSince: null,
+  showOverlay: false,
+
+  markDown: () => {
+    const { downSince } = get();
+    const now = Date.now();
+    const since = downSince ?? now;
+    const elapsed = now - since;
+
+    set({
+      isDown: true,
+      downSince: since,
+      showOverlay: elapsed >= OVERLAY_THRESHOLD_MS,
+    });
+  },
+
+  markUp: () => {
+    set({ isDown: false, downSince: null, showOverlay: false });
+  },
+}));

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

@@ -36,6 +36,7 @@ export const KEY_ACTIONS: KeyAction[] = [
   { id: "open-git-graph", label: "Git Graph", category: "tabs", defaultKey: "Mod+G" },
   { id: "open-git-status", label: "Git Status (sidebar)", category: "tabs", defaultKey: "Mod+Shift+E" },
   { id: "open-search", label: "Search Files (sidebar)", category: "tabs", defaultKey: "Mod+Shift+F" },
+  { id: "voice-input", label: "Voice Input", category: "general", defaultKey: "Mod+Shift+V", note: "Toggle speech-to-text in chat" },
   // Projects — Mod+1..9
   ...Array.from({ length: 9 }, (_, i) => ({
     id: `switch-project-${i + 1}`,