@hienlh/ppm 0.13.7 → 0.13.9

package/src/web/components/database/use-glide-cell-content.ts

@@ -0,0 +1,124 @@
+import { useCallback, useRef } from "react";
+import { GridCellKind, type GridCell, type EditableGridCell, type Item } from "@glideapps/glide-data-grid";
+import type { GridColumnSchema } from "./glide-grid-types";
+import { formatCellValue } from "./glide-grid-types";
+
+/** Map DB type string to Glide cell kind */
+function dbTypeToKind(type: string): GridCellKind {
+  const t = type.toLowerCase();
+  if (/^(int|serial|bigint|smallint|float|double|decimal|numeric|real|money)/.test(t)) {
+    return GridCellKind.Number;
+  }
+  if (/^bool/.test(t)) return GridCellKind.Boolean;
+  return GridCellKind.Text;
+}
+
+/** Truncate display string for canvas rendering performance */
+function truncateDisplay(val: string, max = 200): string {
+  return val.length > max ? val.slice(0, max) + "…" : val;
+}
+
+interface UseGlideCellContentResult {
+  getCellContent: (cell: Item) => GridCell;
+  onCellEdited: (cell: Item, newValue: EditableGridCell) => void;
+}
+
+/**
+ * Provides getCellContent and onCellEdited callbacks for Glide Data Grid.
+ * Uses refs for rows/columnOrder to avoid stale closures in canvas render loop.
+ */
+export function useGlideCellContent(
+  rows: Record<string, unknown>[],
+  columnOrder: string[],
+  schema: GridColumnSchema[],
+  pkCol: string | null,
+  onCellUpdate: (pkCol: string, pkVal: unknown, col: string, val: unknown) => void,
+): UseGlideCellContentResult {
+  // Use refs to avoid stale data in canvas callbacks
+  const rowsRef = useRef(rows);
+  rowsRef.current = rows;
+  const colOrderRef = useRef(columnOrder);
+  colOrderRef.current = columnOrder;
+
+  const schemaMap = useRef(new Map<string, GridColumnSchema>());
+  schemaMap.current = new Map(schema.map((s) => [s.name, s]));
+
+  const getCellContent = useCallback(([colIdx, rowIdx]: Item): GridCell => {
+    const colName = colOrderRef.current[colIdx];
+    const row = rowsRef.current[rowIdx];
+    if (!colName || !row) {
+      return { kind: GridCellKind.Text, data: "", displayData: "", allowOverlay: false };
+    }
+
+    const val = row[colName];
+    const colSchema = schemaMap.current.get(colName);
+    const kind = colSchema ? dbTypeToKind(colSchema.type) : GridCellKind.Text;
+    const isPk = colSchema?.pk ?? false;
+
+    // NULL values — styled as italic gray text
+    if (val == null) {
+      return {
+        kind: GridCellKind.Text,
+        data: "",
+        displayData: "NULL",
+        allowOverlay: !isPk,
+        readonly: isPk,
+        themeOverride: { textDark: "#6b7280" },
+      };
+    }
+
+    // Number cells
+    if (kind === GridCellKind.Number && typeof val === "number") {
+      return {
+        kind: GridCellKind.Number,
+        data: val,
+        displayData: String(val),
+        allowOverlay: !isPk,
+        readonly: isPk,
+      };
+    }
+
+    // Boolean cells — display only, edit via text overlay
+    if (kind === GridCellKind.Boolean && typeof val === "boolean") {
+      return {
+        kind: GridCellKind.Boolean,
+        data: val,
+        readonly: isPk,
+        allowOverlay: false,
+      };
+    }
+
+    // Default: Text cell
+    const strVal = formatCellValue(val);
+    return {
+      kind: GridCellKind.Text,
+      data: strVal,
+      displayData: truncateDisplay(strVal),
+      allowOverlay: !isPk,
+      readonly: isPk,
+    };
+  }, []); // stable — reads from refs
+
+  const onCellEdited = useCallback(([colIdx, rowIdx]: Item, newValue: EditableGridCell) => {
+    if (!pkCol) return;
+    const colName = colOrderRef.current[colIdx];
+    const row = rowsRef.current[rowIdx];
+    if (!colName || !row) return;
+
+    const pkVal = row[pkCol];
+    let parsed: unknown;
+    if (newValue.kind === GridCellKind.Text) {
+      parsed = newValue.data === "" ? null : newValue.data;
+    } else if (newValue.kind === GridCellKind.Number) {
+      parsed = newValue.data;
+    } else if (newValue.kind === GridCellKind.Boolean) {
+      parsed = newValue.data;
+    } else {
+      return;
+    }
+
+    onCellUpdate(pkCol, pkVal, colName, parsed);
+  }, [pkCol, onCellUpdate]);
+
+  return { getCellContent, onCellEdited };
+}

package/src/web/components/database/use-glide-columns.ts

@@ -0,0 +1,61 @@
+import { useMemo } from "react";
+import type { GridColumn } from "@glideapps/glide-data-grid";
+import type { GridColumnSchema } from "./glide-grid-types";
+
+interface UseGlideColumnsResult {
+  /** Ordered GridColumn definitions (pinned first) */
+  columns: GridColumn[];
+  /** Number of frozen columns from left */
+  freezeColumns: number;
+  /** Column name order matching GridColumn indices */
+  columnOrder: string[];
+}
+
+/**
+ * Build Glide Data Grid column definitions from schema.
+ * Reorders columns: pinned first, then unpinned.
+ */
+export function useGlideColumns(
+  schema: GridColumnSchema[],
+  columnNames: string[],
+  pinnedCols: Set<string>,
+  colWidths: Map<string, number>,
+  orderBy?: string | null,
+  orderDir?: "ASC" | "DESC",
+): UseGlideColumnsResult {
+  return useMemo(() => {
+    // Reorder: pinned first, then rest (preserve original order within each group)
+    const pinned = columnNames.filter((c) => pinnedCols.has(c));
+    const unpinned = columnNames.filter((c) => !pinnedCols.has(c));
+    const ordered = [...pinned, ...unpinned];
+
+    const schemaMap = new Map(schema.map((s) => [s.name, s]));
+
+    const columns: GridColumn[] = ordered.map((name) => {
+      const col = schemaMap.get(name);
+      const isPk = col?.pk ?? false;
+
+      // Determine sort icon
+      let icon: string | undefined;
+      if (orderBy === name) {
+        icon = orderDir === "ASC" ? "sortAsc" : "sortDesc";
+      } else if (isPk) {
+        icon = "headerRowID";
+      }
+
+      return {
+        title: name,
+        id: name,
+        width: colWidths.get(name) ?? 150,
+        hasMenu: true,
+        icon,
+      };
+    });
+
+    return {
+      columns,
+      freezeColumns: pinned.length,
+      columnOrder: ordered,
+    };
+  }, [schema, columnNames, pinnedCols, colWidths, orderBy, orderDir]);
+}

package/src/web/components/database/use-glide-selection.ts

@@ -0,0 +1,48 @@
+import { useState, useCallback, useMemo } from "react";
+import { CompactSelection, type GridSelection } from "@glideapps/glide-data-grid";
+
+const EMPTY_SELECTION: GridSelection = {
+  columns: CompactSelection.empty(),
+  rows: CompactSelection.empty(),
+};
+
+interface UseGlideSelectionResult {
+  gridSelection: GridSelection;
+  onGridSelectionChange: (newSel: GridSelection) => void;
+  /** Array of selected row indices (derived from CompactSelection) */
+  selectedRowIndices: number[];
+  clearSelection: () => void;
+}
+
+/**
+ * Manages controlled selection state for Glide Data Grid.
+ * Provides row indices array for bulk operations (delete, export).
+ */
+export function useGlideSelection(): UseGlideSelectionResult {
+  const [gridSelection, setGridSelection] = useState<GridSelection>(EMPTY_SELECTION);
+
+  const onGridSelectionChange = useCallback((newSel: GridSelection) => {
+    setGridSelection(newSel);
+  }, []);
+
+  const selectedRowIndices = useMemo(() => {
+    const indices: number[] = [];
+    if (gridSelection.rows) {
+      for (const range of gridSelection.rows) {
+        // CompactSelection stores [start, end) ranges
+        if (Array.isArray(range)) {
+          for (let i = range[0]; i < range[1]; i++) indices.push(i);
+        } else {
+          indices.push(range);
+        }
+      }
+    }
+    return indices;
+  }, [gridSelection.rows]);
+
+  const clearSelection = useCallback(() => {
+    setGridSelection(EMPTY_SELECTION);
+  }, []);
+
+  return { gridSelection, onGridSelectionChange, selectedRowIndices, clearSelection };
+}

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

@@ -8,13 +8,15 @@ import { usePanelStore } from "@/stores/panel-store";
 import { useSettingsStore } from "@/stores/settings-store";
 import { basename } from "@/lib/utils";
 import { useMonacoTheme } from "@/lib/use-monaco-theme";
-import { Loader2, FileWarning, Play, Database } from "lucide-react";
+import { Loader2, FileWarning, Play, Database, ExternalLink, X, GripHorizontal } from "lucide-react";
 import { EditorBreadcrumb } from "./editor-breadcrumb";
 import { EditorToolbar } from "./editor-toolbar";
 import { SaveAsDialog } from "./save-as-dialog";
 import { EditorMobileToolbar } from "./editor-mobile-toolbar";
 import { createSqlCompletionProvider, clearCompletionCache, type SchemaInfo } from "../database/sql-completion-provider";
 import { useConnections, type Connection } from "../database/use-connections";
+import { DataGrid } from "../database/data-grid";
+import type { DbQueryResult, DbColumnInfo } from "../database/use-database";
 
 const MarkdownRenderer = lazy(() =>
   import("@/components/shared/markdown-renderer").then((m) => ({ default: m.MarkdownRenderer }))
@@ -170,18 +172,37 @@ export const CodeEditor = memo(function CodeEditor({ metadata, tabId }: CodeEdit
     return () => { completionDisposable.current?.dispose(); };
   }, [sqlSchemaInfo]);
 
-  // Run in DB Viewer
+  // Run SQL inline — execute query and show results in bottom panel
   const openTab = useTabStore((s) => s.openTab);
-  const runSqlInViewer = useCallback((sqlText: string) => {
+  const [sqlResult, setSqlResult] = useState<DbQueryResult | null>(null);
+  const [sqlError, setSqlError] = useState<string | null>(null);
+  const [sqlLoading, setSqlLoading] = useState(false);
+  const [sqlResultSql, setSqlResultSql] = useState<string>("");
+  const runSqlInViewer = useCallback(async (sqlText: string) => {
     if (!selectedSqlConn) return;
+    setSqlLoading(true);
+    setSqlError(null);
+    setSqlResultSql(sqlText);
+    try {
+      const result = await api.post<DbQueryResult>(`/api/db/connections/${selectedSqlConn.id}/query`, { sql: sqlText });
+      setSqlResult(result);
+    } catch (e) {
+      setSqlError((e as Error).message);
+      setSqlResult(null);
+    } finally {
+      setSqlLoading(false);
+    }
+  }, [selectedSqlConn]);
+  const openSqlResultInTab = useCallback(() => {
+    if (!selectedSqlConn || !sqlResultSql) return;
     openTab({
       type: "database",
       title: `${selectedSqlConn.name} · Query`,
       projectId: null,
       closable: true,
-      metadata: { connectionId: selectedSqlConn.id, connectionName: selectedSqlConn.name, dbType: selectedSqlConn.type, initialSql: sqlText },
+      metadata: { connectionId: selectedSqlConn.id, connectionName: selectedSqlConn.name, dbType: selectedSqlConn.type, initialSql: sqlResultSql },
     });
-  }, [selectedSqlConn, openTab]);
+  }, [selectedSqlConn, openTab, sqlResultSql]);
 
   const handleRunInDbViewer = useCallback(() => {
     if (!editorRef.current || !selectedSqlConn) return;
@@ -299,9 +320,9 @@ export const CodeEditor = memo(function CodeEditor({ metadata, tabId }: CodeEdit
     return () => window.removeEventListener("file:changed", handler);
   }, [filePath, projectName, isExternalFile, inlineContent, isUntitled]);
 
-  // Update tab title unsaved indicator
+  // Update tab title unsaved indicator (skip for inline content — title set by caller)
   useEffect(() => {
-    if (!ownTab) return;
+    if (!ownTab || inlineContent != null) return;
     const baseName = isUntitled
       ? `Untitled-${metadata?.untitledNumber ?? 1}`
       : (filePath ? basename(filePath) : "Untitled");
@@ -520,7 +541,7 @@ export const CodeEditor = memo(function CodeEditor({ metadata, tabId }: CodeEdit
         onClick={handleRunInDbViewer}
         disabled={!selectedSqlConn}
         className="p-0.5 rounded text-muted-foreground hover:text-primary disabled:opacity-30 transition-colors"
-        title="Run all in DB Viewer"
+        title="Run SQL"
       >
         <Play className="size-3.5" />
       </button>
@@ -583,7 +604,7 @@ export const CodeEditor = memo(function CodeEditor({ metadata, tabId }: CodeEdit
       ) : isMarkdown && mdMode === "preview" ? (
         <MarkdownPreview content={content ?? ""} />
       ) : (
-        <div className="flex-1 overflow-hidden">
+        <div className="flex-1 overflow-hidden min-h-0">
           <Editor
             height="100%"
             language={inlineLanguage ?? getMonacoLanguage(filePath ?? "")}
@@ -608,6 +629,16 @@ export const CodeEditor = memo(function CodeEditor({ metadata, tabId }: CodeEdit
         </div>
       )}
 
+      {/* Inline SQL result panel */}
+      {isSql && (sqlResult || sqlError || sqlLoading) && (
+        <SqlResultPanel
+          result={sqlResult} error={sqlError} loading={sqlLoading}
+          connName={selectedSqlConn?.name}
+          onClose={() => { setSqlResult(null); setSqlError(null); setSqlLoading(false); }}
+          onOpenInTab={openSqlResultInTab}
+        />
+      )}
+
       {/* Mobile toolbar — bottom, like terminal */}
       {isMobile && <EditorMobileToolbar editorRef={editorRef} readOnly={inlineContent != null} />}
 
@@ -625,6 +656,92 @@ export const CodeEditor = memo(function CodeEditor({ metadata, tabId }: CodeEdit
   );
 });
 
+const NOOP = () => {};
+
+/** Inline SQL result panel — shows query results below the editor */
+function SqlResultPanel({ result, error, loading, connName, onClose, onOpenInTab }: {
+  result: DbQueryResult | null;
+  error: string | null;
+  loading: boolean;
+  connName?: string;
+  onClose: () => void;
+  onOpenInTab: () => void;
+}) {
+  const tableData = useMemo(() => (
+    result?.changeType === "select" && result.rows.length > 0
+      ? { columns: result.columns, rows: result.rows, total: result.rows.length, limit: result.rows.length }
+      : null
+  ), [result]);
+
+  const querySchema = useMemo<DbColumnInfo[]>(() => (
+    (result?.columns ?? []).map((c) => ({ name: c, type: "text", nullable: true, pk: false, defaultValue: null }))
+  ), [result?.columns]);
+
+  const [panelHeight, setPanelHeight] = useState(250);
+  const handleDrag = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    const startY = e.clientY;
+    const startH = panelHeight;
+    const onMove = (ev: MouseEvent) => setPanelHeight(Math.max(80, startH + (startY - ev.clientY)));
+    const onUp = () => { document.removeEventListener("mousemove", onMove); document.removeEventListener("mouseup", onUp); };
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+  }, [panelHeight]);
+
+  return (
+    <div className="shrink-0 border-t border-border flex flex-col" style={{ height: panelHeight }}>
+      {/* Resize handle */}
+      <div onMouseDown={handleDrag}
+        className="shrink-0 h-1.5 cursor-row-resize bg-border/50 hover:bg-primary/30 flex items-center justify-center transition-colors">
+        <GripHorizontal className="size-3 text-muted-foreground/50" />
+      </div>
+      {/* Title bar */}
+      <div className="flex items-center gap-2 px-2 py-1 bg-muted/50 border-b border-border shrink-0">
+        <Database className="size-3 text-muted-foreground" />
+        <span className="text-xs font-medium text-foreground truncate flex-1">
+          {connName ? `${connName} · Results` : "Query Results"}
+          {result?.executionTimeMs != null && <span className="text-muted-foreground ml-1.5 font-normal">{result.executionTimeMs}ms</span>}
+        </span>
+        <button type="button" onClick={onOpenInTab} title="Open in DB Viewer tab"
+          className="flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] text-muted-foreground hover:text-foreground hover:bg-muted transition-colors">
+          <ExternalLink className="size-3" />
+          <span className="hidden sm:inline">Open in Tab</span>
+        </button>
+        <button type="button" onClick={onClose} title="Close results"
+          className="p-0.5 rounded text-muted-foreground hover:text-foreground transition-colors">
+          <X className="size-3" />
+        </button>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-hidden min-h-0">
+        {loading && (
+          <div className="flex items-center justify-center h-full">
+            <Loader2 className="size-4 animate-spin text-muted-foreground" />
+          </div>
+        )}
+        {error && <div className="px-3 py-2 text-xs text-destructive bg-destructive/5">{error}</div>}
+        {result?.changeType === "modify" && (
+          <div className="px-3 py-2 text-xs text-green-500">
+            {result.rowsAffected} row(s) affected
+          </div>
+        )}
+        {tableData && (
+          <DataGrid
+            tableData={tableData} schema={querySchema} loading={false}
+            page={1} onPageChange={NOOP} onCellUpdate={NOOP}
+            orderBy={null} orderDir="ASC" onToggleSort={NOOP}
+            connectionName={connName}
+          />
+        )}
+        {result?.changeType === "select" && result.rows.length === 0 && (
+          <div className="px-3 py-2 text-xs text-muted-foreground">No results</div>
+        )}
+      </div>
+    </div>
+  );
+}
+
 function LoadingSpinner() {
   return <div className="flex items-center justify-center h-full"><Loader2 className="size-5 animate-spin text-text-subtle" /></div>;
 }

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

@@ -136,6 +136,7 @@ export function DraggableTab({
       ) : (
         <span
           className="max-w-[120px] truncate"
+          title={tab.title}
           onDoubleClick={(e) => {
             if (onRename) { e.stopPropagation(); setEditing(true); }
           }}

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

@@ -1,7 +1,7 @@
 import { useRef, useEffect, useState, useCallback, memo } from "react";
 import { useTerminal } from "@/hooks/use-terminal";
 import { cn } from "@/lib/utils";
-import { Copy, ClipboardPaste } from "lucide-react";
+import { Copy, ClipboardPaste, RotateCcw } from "lucide-react";
 import "@xterm/xterm/css/xterm.css";
 
 interface TerminalTabProps {
@@ -22,7 +22,7 @@ export const TerminalTab = memo(function TerminalTab({ metadata }: TerminalTabPr
   const sessionId = (metadata?.sessionId as string) ?? "new";
   const projectName = metadata?.projectName as string | undefined;
   const containerRef = useRef<HTMLDivElement>(null);
-  const { connected, reconnecting, sendData, getSelection } = useTerminal({ sessionId, projectName, containerRef });
+  const { connected, reconnecting, exited, sendData, getSelection, restart } = useTerminal({ sessionId, projectName, containerRef });
   const [ctrlMode, setCtrlMode] = useState(false);
   const [viewportHeight, setViewportHeight] = useState<number | null>(null);
 
@@ -97,16 +97,27 @@ export const TerminalTab = memo(function TerminalTab({ metadata }: TerminalTabPr
         <span
           className={cn(
             "size-2 rounded-full",
-            connected ? "bg-success" : reconnecting ? "bg-warning" : "bg-error",
+            exited ? "bg-error" : connected ? "bg-success" : reconnecting ? "bg-warning" : "bg-error",
           )}
         />
         <span className="text-text-secondary">
-          {connected
-            ? "Connected"
-            : reconnecting
-              ? "Reconnecting..."
-              : "Disconnected"}
+          {exited
+            ? "Process exited"
+            : connected
+              ? "Connected"
+              : reconnecting
+                ? "Reconnecting..."
+                : "Disconnected"}
         </span>
+        {exited && (
+          <button
+            onClick={restart}
+            className="flex items-center gap-1 px-1.5 py-0.5 rounded text-xs bg-surface-elevated text-text-primary hover:bg-primary hover:text-primary-foreground active:bg-primary active:text-primary-foreground transition-colors"
+          >
+            <RotateCcw size={10} />
+            Restart
+          </button>
+        )}
         <span className="text-text-subtle ml-auto font-mono">{sessionId}</span>
       </div>
 

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

@@ -66,8 +66,10 @@ interface UseTerminalOptions {
 interface UseTerminalReturn {
   connected: boolean;
   reconnecting: boolean;
+  exited: boolean;
   sendData: (data: string) => void;
   getSelection: () => string;
+  restart: () => void;
 }
 
 const RESIZE_PREFIX = "\x01RESIZE:";
@@ -83,6 +85,7 @@ export function useTerminal(
   const reconnectAttempts = useRef(0);
   const [connected, setConnected] = useState(false);
   const [reconnecting, setReconnecting] = useState(false);
+  const [exited, setExited] = useState(false);
   const actualSessionId = useRef(sessionId); // Track server-assigned session ID
 
   const sendData = useCallback((data: string) => {
@@ -104,6 +107,20 @@ export function useTerminal(
     }
   }, []);
 
+  const restart = useCallback(() => {
+    // Close existing WS, reset to "new" session, reconnect
+    if (reconnectTimer.current) clearTimeout(reconnectTimer.current);
+    wsRef.current?.close();
+    wsRef.current = null;
+    actualSessionId.current = "new";
+    reconnectAttempts.current = 0;
+    setExited(false);
+    setConnected(false);
+    setReconnecting(false);
+    // connectWs will be called after this via setTimeout to allow state to settle
+    setTimeout(() => connectWs(), 0);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
   const connectWs = useCallback(() => {
     const term = termRef.current;
     if (!term) return;
@@ -130,13 +147,16 @@ export function useTerminal(
         if (event.data.startsWith("{")) {
           try {
             const msg = JSON.parse(event.data);
-            if (msg.type === "session" || msg.type === "error") {
+            if (msg.type === "session" || msg.type === "error" || msg.type === "exited") {
               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`);
               }
+              if (msg.type === "exited") {
+                setExited(true);
+              }
               return; // Don't write raw JSON to terminal
             }
           } catch {
@@ -234,5 +254,5 @@ export function useTerminal(
     };
   }, [sessionId]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  return { connected, reconnecting, sendData, getSelection };
+  return { connected, reconnecting, exited, sendData, getSelection, restart };
 }

package/src/web/index.html

@@ -11,6 +11,7 @@
     <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="portal" style="position: fixed; left: 0; top: 0; z-index: 9999;" /></div>
     <div id="root"></div>
     <script type="module" src="./main.tsx"></script>
   </body>

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

@@ -89,6 +89,7 @@ export function getNextUntitledNumber(panels: Record<string, Panel>): number {
 export function deriveTabId(type: TabType, metadata?: Record<string, unknown>): string {
   switch (type) {
     case "editor":
+      if (metadata?.viewerKey) return `editor:viewer:${metadata.viewerKey}`;
       if (metadata?.isUntitled) return `editor:untitled-${metadata.untitledNumber ?? 1}`;
       return `editor:${metadata?.filePath ?? "untitled"}`;
     case "chat": {

package/test.sql

@@ -0,0 +1 @@
+select * from config;