@hienlh/ppm 0.6.2 → 0.6.4

package/src/web/components/settings/keyboard-shortcuts-section.tsx

@@ -0,0 +1,182 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import { RotateCcw, AlertTriangle, Lock } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  KEY_ACTIONS,
+  useKeybindingsStore,
+  formatCombo,
+  comboFromEvent,
+  type KeyCategory,
+} from "@/stores/keybindings-store";
+
+const CATEGORIES: { key: KeyCategory; label: string }[] = [
+  { key: "general", label: "General" },
+  { key: "tabs", label: "Tabs" },
+  { key: "projects", label: "Projects" },
+];
+
+const BROWSER_RESERVED = [
+  "Ctrl+T", "Ctrl+W", "Ctrl+N", "Ctrl+Tab",
+  "Ctrl+L", "Ctrl+H", "Ctrl+J", "F5", "Ctrl+R",
+  "Ctrl+Shift+I", "Ctrl+Shift+J",
+];
+
+/** A single shortcut badge — click to record, Escape to cancel */
+function ShortcutBadge({
+  actionId,
+  combo,
+  locked,
+}: {
+  actionId: string;
+  combo: string;
+  locked?: boolean;
+}) {
+  const [recording, setRecording] = useState(false);
+  const setBinding = useKeybindingsStore((s) => s.setBinding);
+  const badgeRef = useRef<HTMLButtonElement>(null);
+
+  const handleRecord = useCallback(
+    (e: KeyboardEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (e.key === "Escape") {
+        setRecording(false);
+        return;
+      }
+      const newCombo = comboFromEvent(e);
+      if (newCombo) {
+        setBinding(actionId, newCombo);
+        setRecording(false);
+      }
+    },
+    [actionId, setBinding],
+  );
+
+  useEffect(() => {
+    if (!recording) return;
+    document.addEventListener("keydown", handleRecord, true);
+    return () => document.removeEventListener("keydown", handleRecord, true);
+  }, [recording, handleRecord]);
+
+  // Close recording on outside click
+  useEffect(() => {
+    if (!recording) return;
+    const handler = (e: MouseEvent) => {
+      if (badgeRef.current && !badgeRef.current.contains(e.target as Node)) {
+        setRecording(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [recording]);
+
+  if (locked) {
+    return (
+      <span className="inline-flex items-center gap-1 rounded border border-border bg-muted px-2 py-0.5 text-[11px] font-mono text-muted-foreground">
+        <Lock className="size-2.5" />
+        {formatCombo(combo)}
+      </span>
+    );
+  }
+
+  if (recording) {
+    return (
+      <button
+        ref={badgeRef}
+        className="inline-flex items-center rounded border-2 border-primary bg-primary/10 px-2 py-0.5 text-[11px] font-mono text-primary animate-pulse"
+      >
+        Press keys...
+      </button>
+    );
+  }
+
+  return (
+    <button
+      ref={badgeRef}
+      onClick={() => setRecording(true)}
+      className="inline-flex items-center rounded border border-border bg-surface px-2 py-0.5 text-[11px] font-mono text-foreground hover:border-primary hover:bg-primary/5 transition-colors cursor-pointer"
+      title="Click to change shortcut"
+    >
+      {formatCombo(combo)}
+    </button>
+  );
+}
+
+export function KeyboardShortcutsSection() {
+  const { getBinding, resetBinding, resetAll, overrides } = useKeybindingsStore();
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <h3 className="text-xs font-medium text-text-secondary">Keyboard Shortcuts</h3>
+        {Object.keys(overrides).length > 0 && (
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-6 text-[10px] text-muted-foreground"
+            onClick={resetAll}
+          >
+            <RotateCcw className="size-3 mr-1" />
+            Reset all
+          </Button>
+        )}
+      </div>
+
+      {/* Browser warning */}
+      <div className="flex items-start gap-2 rounded-md border border-amber-500/30 bg-amber-500/5 px-2.5 py-2">
+        <AlertTriangle className="size-3.5 text-amber-500 shrink-0 mt-0.5" />
+        <p className="text-[10px] text-muted-foreground leading-relaxed">
+          Some shortcuts ({BROWSER_RESERVED.slice(0, 4).join(", ")}...) are reserved by the browser and cannot be overridden.
+        </p>
+      </div>
+
+      {/* Categories */}
+      {CATEGORIES.map((cat) => {
+        const actions = KEY_ACTIONS.filter((a) => a.category === cat.key);
+        if (actions.length === 0) return null;
+        return (
+          <div key={cat.key} className="space-y-1">
+            <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wide">
+              {cat.label}
+            </span>
+            <div className="space-y-0.5">
+              {actions.map((action) => {
+                const currentCombo = getBinding(action.id);
+                const isOverridden = action.id in overrides;
+                return (
+                  <div
+                    key={action.id}
+                    className="flex items-center justify-between py-1 px-1 rounded hover:bg-surface-elevated/50 transition-colors"
+                  >
+                    <div className="flex flex-col min-w-0">
+                      <span className="text-xs text-foreground">{action.label}</span>
+                      {action.note && (
+                        <span className="text-[10px] text-muted-foreground">{action.note}</span>
+                      )}
+                    </div>
+                    <div className="flex items-center gap-1 shrink-0 ml-2">
+                      <ShortcutBadge
+                        actionId={action.id}
+                        combo={currentCombo}
+                        locked={action.locked}
+                      />
+                      {isOverridden && !action.locked && (
+                        <button
+                          onClick={() => resetBinding(action.id)}
+                          className="flex items-center justify-center size-5 rounded text-muted-foreground hover:text-foreground hover:bg-surface-elevated transition-colors"
+                          title="Reset to default"
+                        >
+                          <RotateCcw className="size-3" />
+                        </button>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/web/components/settings/settings-tab.tsx

@@ -4,6 +4,7 @@ import { Separator } from "@/components/ui/separator";
 import { useSettingsStore, type Theme } from "@/stores/settings-store";
 import { cn } from "@/lib/utils";
 import { AISettingsSection } from "./ai-settings-section";
+import { KeyboardShortcutsSection } from "./keyboard-shortcuts-section";
 import { usePushNotification } from "@/hooks/use-push-notification";
 
 const THEME_OPTIONS: { value: Theme; label: string; icon: React.ElementType }[] = [
@@ -109,6 +110,10 @@ export function SettingsTab() {
 
       <Separator />
 
+      <KeyboardShortcutsSection />
+
+      <Separator />
+
       <div className="space-y-1.5">
         <h3 className="text-xs font-medium text-text-secondary">About</h3>
         <p className="text-xs text-text-secondary">

package/src/web/components/sqlite/sqlite-viewer.tsx

@@ -13,8 +13,24 @@ interface SqliteViewerProps {
 export function SqliteViewer({ metadata }: SqliteViewerProps) {
   const filePath = metadata?.filePath as string | undefined;
   const projectName = metadata?.projectName as string | undefined;
+  const connectionId = metadata?.connectionId as number | undefined;
+  const initialTable = metadata?.tableName as string | undefined;
   const [queryPanelOpen, setQueryPanelOpen] = useState(false);
 
+  // Connection-based mode: skip file selection requirement
+  if (connectionId) {
+    return (
+      <SqliteViewerInner
+        projectName=""
+        dbPath=""
+        connectionId={connectionId}
+        initialTable={initialTable}
+        queryPanelOpen={queryPanelOpen}
+        onToggleQueryPanel={() => setQueryPanelOpen((v) => !v)}
+      />
+    );
+  }
+
   if (!filePath || !projectName) {
     return (
       <div className="flex items-center justify-center h-full text-text-secondary text-sm">
@@ -34,11 +50,19 @@ export function SqliteViewer({ metadata }: SqliteViewerProps) {
 }
 
 function SqliteViewerInner({
-  projectName, dbPath, queryPanelOpen, onToggleQueryPanel,
+  projectName, dbPath, connectionId, initialTable, queryPanelOpen, onToggleQueryPanel,
 }: {
-  projectName: string; dbPath: string; queryPanelOpen: boolean; onToggleQueryPanel: () => void;
+  projectName: string; dbPath: string; connectionId?: number; initialTable?: string;
+  queryPanelOpen: boolean; onToggleQueryPanel: () => void;
 }) {
-  const sqlite = useSqlite(projectName, dbPath);
+  const sqlite = useSqlite(projectName, dbPath, connectionId);
+
+  // Jump to initial table from sidebar click
+  const [didInit, setDidInit] = useState(false);
+  if (initialTable && !didInit && sqlite.tables.length > 0 && sqlite.selectedTable !== initialTable) {
+    setDidInit(true);
+    sqlite.selectTable(initialTable);
+  }
 
   if (sqlite.error && sqlite.tables.length === 0) {
     return (

package/src/web/components/sqlite/use-sqlite.ts

@@ -6,7 +6,7 @@ export interface ColumnInfo { cid: number; name: string; type: string; notnull:
 export interface QueryResult { columns: string[]; rows: Record<string, unknown>[]; rowsAffected: number; changeType: "select" | "modify" }
 interface TableData { columns: string[]; rows: Record<string, unknown>[]; total: number; page: number; limit: number }
 
-export function useSqlite(projectName: string, dbPath: string) {
+export function useSqlite(projectName: string, dbPath: string, connectionId?: number) {
   const [tables, setTables] = useState<TableInfo[]>([]);
   const [selectedTable, setSelectedTable] = useState<string | null>(null);
   const [tableData, setTableData] = useState<TableData | null>(null);
@@ -18,15 +18,18 @@ export function useSqlite(projectName: string, dbPath: string) {
   const [queryError, setQueryError] = useState<string | null>(null);
   const [queryLoading, setQueryLoading] = useState(false);
 
-  const base = `${projectUrl(projectName)}/sqlite`;
-  const qs = `path=${encodeURIComponent(dbPath)}`;
+  // When connectionId present, use unified API; otherwise use project-scoped API
+  const unifiedBase = connectionId ? `/api/db/connections/${connectionId}` : null;
+  const base = unifiedBase ?? `${projectUrl(projectName)}/sqlite`;
+  const qs = unifiedBase ? "" : `path=${encodeURIComponent(dbPath)}`;
 
   // Fetch tables on mount
   const fetchTables = useCallback(async () => {
     setLoading(true);
     setError(null);
     try {
-      const data = await api.get<TableInfo[]>(`${base}/tables?${qs}`);
+      const qsPart = qs ? `?${qs}` : "";
+      const data = await api.get<TableInfo[]>(`${base}/tables${qsPart}`);
       setTables(data);
       if (data.length > 0 && !selectedTable) setSelectedTable(data[0]!.name);
     } catch (e) {
@@ -43,9 +46,10 @@ export function useSqlite(projectName: string, dbPath: string) {
     if (!selectedTable) return;
     setLoading(true);
     try {
+      const qsPrefix = qs ? `${qs}&` : "";
       const [data, cols] = await Promise.all([
-        api.get<TableData>(`${base}/data?${qs}&table=${encodeURIComponent(selectedTable)}&page=${page}&limit=100`),
-        api.get<ColumnInfo[]>(`${base}/schema?${qs}&table=${encodeURIComponent(selectedTable)}`),
+        api.get<TableData>(`${base}/data?${qsPrefix}table=${encodeURIComponent(selectedTable)}&page=${page}&limit=100`),
+        api.get<ColumnInfo[]>(`${base}/schema?${qsPrefix}table=${encodeURIComponent(selectedTable)}`),
       ]);
       setTableData(data);
       setSchema(cols);
@@ -68,25 +72,30 @@ export function useSqlite(projectName: string, dbPath: string) {
     setQueryLoading(true);
     setQueryError(null);
     try {
-      const result = await api.post<QueryResult>(`${base}/query`, { path: dbPath, sql });
+      const body = unifiedBase ? { sql } : { path: dbPath, sql };
+      const result = await api.post<QueryResult>(`${base}/query`, body);
       setQueryResult(result);
-      if (result.changeType === "modify") fetchTableData(); // Refresh table after modification
+      if (result.changeType === "modify") fetchTableData();
     } catch (e) {
       setQueryError((e as Error).message);
     } finally {
       setQueryLoading(false);
     }
-  }, [base, dbPath, fetchTableData]);
+  }, [base, unifiedBase, dbPath, fetchTableData]);
 
   const updateCell = useCallback(async (rowid: number, column: string, value: unknown) => {
     if (!selectedTable) return;
     try {
-      await api.put(`${base}/cell`, { path: dbPath, table: selectedTable, rowid, column, value });
-      fetchTableData(); // Refresh
+      if (unifiedBase) {
+        await api.put(`${base}/cell`, { table: selectedTable, pkColumn: "rowid", pkValue: rowid, column, value });
+      } else {
+        await api.put(`${base}/cell`, { path: dbPath, table: selectedTable, rowid, column, value });
+      }
+      fetchTableData();
     } catch (e) {
       setError((e as Error).message);
     }
-  }, [base, dbPath, selectedTable, fetchTableData]);
+  }, [base, unifiedBase, dbPath, selectedTable, fetchTableData]);
 
   return {
     tables, selectedTable, selectTable, tableData, schema,

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

@@ -1,6 +1,8 @@
 import { useEffect, useState, useCallback } from "react";
 import { useTabStore } from "@/stores/tab-store";
 import { useSettingsStore } from "@/stores/settings-store";
+import { useProjectStore } from "@/stores/project-store";
+import { useKeybindingsStore } from "@/stores/keybindings-store";
 
 /** Dispatch this event to open the command palette from anywhere, optionally with initial query */
 export function openCommandPalette(initialQuery?: string) {
@@ -8,10 +10,10 @@ export function openCommandPalette(initialQuery?: string) {
 }
 
 /**
- * Global keyboard shortcuts.
+ * Global keyboard shortcuts — reads bindings from keybindings store.
  *
- * Shift+Shift (double tap) → Open command palette
- * Alt+] / Alt+[            → Next / previous tab
+ * Shift+Shift (double tap) is always hardcoded (non-customizable).
+ * Everything else uses `matchesEvent()` from the keybindings store.
  */
 export function useGlobalKeybindings() {
   const [paletteOpen, setPaletteOpen] = useState(false);
@@ -19,9 +21,10 @@ export function useGlobalKeybindings() {
 
   useEffect(() => {
     let lastShiftUp = 0;
+    const { matchesEvent } = useKeybindingsStore.getState();
 
     function handler(e: KeyboardEvent) {
-      // Double-Shift detection (on keyup to avoid repeats)
+      // Double-Shift detection (on keyup to avoid repeats) — always active
       if (e.type === "keyup" && e.key === "Shift" && !e.ctrlKey && !e.metaKey && !e.altKey) {
         const now = Date.now();
         if (now - lastShiftUp < 400) {
@@ -34,40 +37,97 @@ export function useGlobalKeybindings() {
         return;
       }
 
-      // Keydown shortcuts
       if (e.type !== "keydown") return;
 
-      // Cmd/Ctrl+S → Prevent browser save dialog (editor auto-saves)
-      if (e.key === "s" && (e.metaKey || e.ctrlKey) && !e.altKey && !e.shiftKey) {
+      // Re-read matchesEvent on each keydown to pick up live overrides
+      const { matchesEvent: match } = useKeybindingsStore.getState();
+
+      // Prevent browser save dialog (locked — always Mod+S)
+      if (match(e, "save-prevent")) {
         e.preventDefault();
         return;
       }
 
-      // F1 → Open command palette
-      if (e.key === "F1") {
+      // Command palette
+      if (match(e, "command-palette")) {
         e.preventDefault();
         setPaletteInitialQuery("");
         setPaletteOpen(true);
         return;
       }
 
-      // Cmd/Ctrl+B → Toggle sidebar
-      if (e.key === "b" && (e.metaKey || e.ctrlKey) && !e.altKey && !e.shiftKey) {
+      // Toggle sidebar
+      if (match(e, "toggle-sidebar")) {
         e.preventDefault();
         useSettingsStore.getState().toggleSidebar();
         return;
       }
 
-      // Alt+] / Alt+[ → Cycle tabs
-      if (e.altKey && !e.ctrlKey && !e.metaKey && (e.key === "]" || e.key === "[")) {
+      // Tab cycling
+      if (match(e, "next-tab") || match(e, "prev-tab")) {
         e.preventDefault();
         const { tabs, activeTabId, setActiveTab } = useTabStore.getState();
         if (tabs.length < 2) return;
         const idx = tabs.findIndex((t) => t.id === activeTabId);
-        const next = e.key === "]"
+        const forward = match(e, "next-tab");
+        const next = forward
           ? (idx + 1) % tabs.length
           : (idx - 1 + tabs.length) % tabs.length;
         setActiveTab(tabs[next]!.id);
+        return;
+      }
+
+      // Open tab shortcuts
+      const tabShortcuts: { action: string; type: string; title: string }[] = [
+        { action: "open-chat", type: "chat", title: "AI Chat" },
+        { action: "open-terminal", type: "terminal", title: "Terminal" },
+        { action: "open-git-graph", type: "git-graph", title: "Git Graph" },
+      ];
+      for (const s of tabShortcuts) {
+        if (match(e, s.action)) {
+          e.preventDefault();
+          const project = useProjectStore.getState().activeProject;
+          useTabStore.getState().openTab({
+            type: s.type as any,
+            title: s.title,
+            projectId: project?.name ?? null,
+            metadata: project ? { projectName: project.name } : undefined,
+            closable: true,
+          });
+          return;
+        }
+      }
+
+      // Open settings (sidebar)
+      if (match(e, "open-settings")) {
+        e.preventDefault();
+        const settings = useSettingsStore.getState();
+        if (settings.sidebarCollapsed) settings.toggleSidebar();
+        settings.setSidebarActiveTab("settings");
+        return;
+      }
+
+      // Open git status (sidebar)
+      if (match(e, "open-git-status")) {
+        e.preventDefault();
+        const settings = useSettingsStore.getState();
+        if (settings.sidebarCollapsed) settings.toggleSidebar();
+        settings.setSidebarActiveTab("git");
+        return;
+      }
+
+      // Switch project 1-9
+      for (let i = 1; i <= 9; i++) {
+        if (match(e, `switch-project-${i}`)) {
+          e.preventDefault();
+          const projects = useProjectStore.getState().projects;
+          const target = projects[i - 1];
+          if (target) {
+            useProjectStore.getState().setActiveProject(target);
+            useTabStore.getState().switchProject(target.name);
+          }
+          return;
+        }
       }
     }
 

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

@@ -1,4 +1,5 @@
 const TOKEN_KEY = "ppm-auth-token";
+const RELOAD_GUARD_KEY = "ppm-auth-reload-ts";
 
 class ApiClient {
   private baseUrl: string;
@@ -65,7 +66,12 @@ class ApiClient {
   private async handleResponse<T>(res: Response): Promise<T> {
     if (res.status === 401) {
       localStorage.removeItem(TOKEN_KEY);
-      window.location.reload();
+      // Guard against infinite reload loops: skip reload if we already reloaded within 3s
+      const lastReload = Number(sessionStorage.getItem(RELOAD_GUARD_KEY) || "0");
+      if (Date.now() - lastReload > 3000) {
+        sessionStorage.setItem(RELOAD_GUARD_KEY, String(Date.now()));
+        window.location.reload();
+      }
       throw new Error("Unauthorized");
     }
 

package/src/web/lib/color-utils.ts

@@ -0,0 +1,23 @@
+/** Parse hex color to RGB components */
+function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
+  const m = /^#([0-9a-fA-F]{6})$/.exec(hex.trim());
+  if (!m) return null;
+  const n = parseInt(m[1]!, 16);
+  return { r: (n >> 16) & 0xff, g: (n >> 8) & 0xff, b: n & 0xff };
+}
+
+/** Relative luminance per WCAG 2.0 */
+function getLuminance(r: number, g: number, b: number): number {
+  const [rs, gs, bs] = [r, g, b].map((c) => {
+    const s = c / 255;
+    return s <= 0.04045 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+  }) as [number, number, number];
+  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+}
+
+/** Returns true if the color is dark enough to need white text */
+export function isDarkColor(hex: string): boolean {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return false;
+  return getLuminance(rgb.r, rgb.g, rgb.b) < 0.4;
+}