@hienlh/ppm 0.9.65 → 0.9.67

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

@@ -1,4 +1,4 @@
-import { useEffect, useState, useCallback, useRef } from "react";
+import { useEffect, useState, useCallback, useRef, useMemo } from "react";
 import Editor, { type OnMount } from "@monaco-editor/react";
 import type * as MonacoType from "monaco-editor";
 import { MarkdownRenderer } from "@/components/shared/markdown-renderer";
@@ -7,10 +7,12 @@ import { useTabStore } from "@/stores/tab-store";
 import { useSettingsStore } from "@/stores/settings-store";
 import { basename } from "@/lib/utils";
 import { useMonacoTheme } from "@/lib/use-monaco-theme";
-import { Loader2, FileWarning, ExternalLink } from "lucide-react";
+import { Loader2, FileWarning, ExternalLink, Play, Database } from "lucide-react";
 import { EditorBreadcrumb } from "./editor-breadcrumb";
 import { EditorToolbar } from "./editor-toolbar";
 import { lazy, Suspense } from "react";
+import { createSqlCompletionProvider, clearCompletionCache, type SchemaInfo } from "../database/sql-completion-provider";
+import { useConnections, type Connection } from "../database/use-connections";
 
 const CsvPreview = lazy(() => import("./csv-preview").then((m) => ({ default: m.CsvPreview })));
 
@@ -33,6 +35,7 @@ function getMonacoLanguage(filename: string): string {
     json: "json", md: "markdown", mdx: "markdown",
     yaml: "yaml", yml: "yaml",
     sh: "shell", bash: "shell",
+    sql: "sql",
   };
   return map[ext] ?? "plaintext";
 }
@@ -45,7 +48,10 @@ interface CodeEditorProps {
 export function CodeEditor({ metadata, tabId }: CodeEditorProps) {
   const filePath = metadata?.filePath as string | undefined;
   const projectName = metadata?.projectName as string | undefined;
-  const [content, setContent] = useState<string | null>(null);
+  // Inline content mode: read-only Monaco with pre-loaded content (e.g. cell viewer)
+  const inlineContent = metadata?.inlineContent as string | undefined;
+  const inlineLanguage = metadata?.inlineLanguage as string | undefined;
+  const [content, setContent] = useState<string | null>(inlineContent ?? null);
   const [encoding, setEncoding] = useState<string>("utf-8");
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -64,9 +70,85 @@ export function CodeEditor({ metadata, tabId }: CodeEditorProps) {
   const isSqlite = SQLITE_EXTS.has(ext);
   const isMarkdown = ext === "md" || ext === "mdx";
   const isCsv = ext === "csv";
+  const isSql = ext === "sql";
   const [mdMode, setMdMode] = useState<"edit" | "preview">("preview");
   const [csvMode, setCsvMode] = useState<"table" | "raw">("table");
 
+  // SQL file: connection picker + autocomplete + run in DB viewer
+  const { connections, cachedTables, refreshTables } = useConnections();
+  const [sqlConnId, setSqlConnId] = useState<number | null>(() => {
+    if (!isSql || !filePath) return null;
+    const stored = localStorage.getItem(`ppm:sql-conn:${filePath}`);
+    return stored ? Number(stored) : null;
+  });
+  const monacoInstanceRef = useRef<typeof MonacoType | null>(null);
+  const completionDisposable = useRef<MonacoType.IDisposable | null>(null);
+
+  const selectedSqlConn = useMemo(() => connections.find((c) => c.id === sqlConnId) ?? null, [connections, sqlConnId]);
+
+  // Persist selected connection per file
+  const handleSqlConnChange = useCallback((connId: number) => {
+    setSqlConnId(connId);
+    if (filePath) localStorage.setItem(`ppm:sql-conn:${filePath}`, String(connId));
+    // Refresh tables for autocomplete
+    refreshTables(connId).catch(() => {});
+  }, [filePath, refreshTables]);
+
+  // Build SchemaInfo for .sql file autocomplete
+  const sqlSchemaInfo = useMemo<SchemaInfo | undefined>(() => {
+    if (!isSql || !sqlConnId) return undefined;
+    const tables = (cachedTables.get(sqlConnId) ?? []).map((t) => ({ name: t.tableName, schema: t.schemaName }));
+    if (tables.length === 0) return undefined;
+    return {
+      tables,
+      getColumns: async (table: string, schema?: string) => {
+        return api.get<{ name: string; type: string }[]>(
+          `/api/db/connections/${sqlConnId}/schema?table=${encodeURIComponent(table)}${schema ? `&schema=${encodeURIComponent(schema)}` : ""}`,
+        );
+      },
+    };
+  }, [isSql, sqlConnId, cachedTables]);
+
+  // Register/dispose completion provider when connection changes
+  useEffect(() => {
+    if (!monacoInstanceRef.current || !sqlSchemaInfo) return;
+    completionDisposable.current?.dispose();
+    clearCompletionCache();
+    completionDisposable.current = monacoInstanceRef.current.languages.registerCompletionItemProvider(
+      "sql",
+      createSqlCompletionProvider(monacoInstanceRef.current, sqlSchemaInfo),
+    );
+    return () => { completionDisposable.current?.dispose(); };
+  }, [sqlSchemaInfo]);
+
+  // Run in DB Viewer
+  const openTab = useTabStore((s) => s.openTab);
+  const runSqlInViewer = useCallback((sqlText: string) => {
+    if (!selectedSqlConn) return;
+    openTab({
+      type: "database",
+      title: `${selectedSqlConn.name} · Query`,
+      projectId: null,
+      closable: true,
+      metadata: { connectionId: selectedSqlConn.id, connectionName: selectedSqlConn.name, dbType: selectedSqlConn.type, initialSql: sqlText },
+    });
+  }, [selectedSqlConn, openTab]);
+
+  const handleRunInDbViewer = useCallback(() => {
+    if (!editorRef.current || !selectedSqlConn) return;
+    const editor = editorRef.current;
+    const selection = editor.getSelection();
+    const sqlText = selection && !selection.isEmpty()
+      ? editor.getModel()?.getValueInRange(selection) ?? editor.getValue()
+      : editor.getValue();
+    runSqlInViewer(sqlText);
+  }, [selectedSqlConn, runSqlInViewer]);
+
+  // CodeLens: inline Run buttons between SQL statements
+  const codeLensDisposable = useRef<MonacoType.IDisposable[]>([]);
+  const runSqlRef = useRef(runSqlInViewer);
+  runSqlRef.current = runSqlInViewer;
+
   // Redirect .db files to sqlite viewer by changing tab type
   useEffect(() => {
     if (isSqlite && tabId) updateTab(tabId, { type: "sqlite" });
@@ -77,6 +159,7 @@ export function CodeEditor({ metadata, tabId }: CodeEditorProps) {
 
   // Load file content
   useEffect(() => {
+    if (inlineContent != null) { setLoading(false); return; }
     if (!filePath) return;
     if (!isExternalFile && !projectName) return;
     if (isImage || isPdf) { setLoading(false); return; }
@@ -141,33 +224,84 @@ export function CodeEditor({ metadata, tabId }: CodeEditorProps) {
   const lineNumber = metadata?.lineNumber as number | undefined;
   const handleEditorMount: OnMount = useCallback((editor, monaco) => {
     editorRef.current = editor;
+    monacoInstanceRef.current = monaco;
     if (lineNumber && lineNumber > 0) {
-      // Defer until content is rendered
       setTimeout(() => {
         editor.revealLineInCenter(lineNumber);
         editor.setPosition({ lineNumber, column: 1 });
         editor.focus();
       }, 100);
     }
-    // Alt+Z → toggle word wrap
     editor.addCommand(
       monaco.KeyMod.Alt | monaco.KeyCode.KeyZ,
       () => useSettingsStore.getState().toggleWordWrap(),
     );
-    // Disable all diagnostics — PPM is a lightweight editor, not a full IDE
     monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
-      noSemanticValidation: true,
-      noSyntaxValidation: true,
-      noSuggestionDiagnostics: true,
+      noSemanticValidation: true, noSyntaxValidation: true, noSuggestionDiagnostics: true,
     });
     monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
-      noSemanticValidation: true,
-      noSyntaxValidation: true,
-      noSuggestionDiagnostics: true,
+      noSemanticValidation: true, noSyntaxValidation: true, noSuggestionDiagnostics: true,
     });
-  }, []);
+    // Register SQL completion if schema available
+    if (sqlSchemaInfo) {
+      completionDisposable.current?.dispose();
+      completionDisposable.current = monaco.languages.registerCompletionItemProvider(
+        "sql", createSqlCompletionProvider(monaco, sqlSchemaInfo),
+      );
+    }
+
+    // Register CodeLens for inline Run buttons on .sql files
+    if (isSql) {
+      codeLensDisposable.current.forEach((d) => d.dispose());
+      codeLensDisposable.current = [];
+
+      const cmdId = editor.addCommand(0, (_accessor: unknown, sql: string) => {
+        if (sql) runSqlRef.current(sql);
+      });
+
+      if (cmdId) {
+        const provider = monaco.languages.registerCodeLensProvider("sql", {
+          provideCodeLenses: (model: MonacoType.editor.ITextModel) => {
+            const lenses: MonacoType.languages.CodeLens[] = [];
+            const lines = model.getValue().split("\n");
+            let stmtStartLine = -1;
+            let stmtLines: string[] = [];
+
+            const addLens = (line: number, stmt: string) => {
+              const trimmed = stmt.trim();
+              if (!trimmed || trimmed.startsWith("--")) return;
+              lenses.push({
+                range: { startLineNumber: line, startColumn: 1, endLineNumber: line, endColumn: 1 },
+                command: { id: cmdId, title: "\u25B7 Run", arguments: [trimmed] },
+              });
+            };
+
+            for (let i = 0; i < lines.length; i++) {
+              const trimmed = lines[i]!.trim();
+              if (stmtStartLine === -1) {
+                if (!trimmed || trimmed.startsWith("--")) continue;
+                stmtStartLine = i + 1;
+                stmtLines = [];
+              }
+              stmtLines.push(lines[i]!);
+              if (trimmed.endsWith(";")) {
+                addLens(stmtStartLine, stmtLines.join("\n"));
+                stmtStartLine = -1;
+                stmtLines = [];
+              }
+            }
+            if (stmtStartLine > 0 && stmtLines.join("").trim()) {
+              addLens(stmtStartLine, stmtLines.join("\n"));
+            }
+            return { lenses, dispose: () => {} };
+          },
+        });
+        codeLensDisposable.current.push(provider);
+      }
+    }
+  }, [sqlSchemaInfo]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  if (!filePath || (!isExternalFile && !projectName)) {
+  if (!inlineContent && (!filePath || (!isExternalFile && !projectName))) {
     return (
       <div className="flex items-center justify-center h-full text-text-secondary text-sm">
         No file selected.
@@ -203,8 +337,72 @@ export function CodeEditor({ metadata, tabId }: CodeEditorProps) {
     );
   }
 
+  /** SQL connection picker bar (shared between breadcrumb and standalone) */
+  const sqlPickerBar = isSql ? (
+    <div className="shrink-0 flex items-center gap-1 px-2 border-l border-border">
+      <Database className="size-3 text-muted-foreground" />
+      <select
+        value={sqlConnId ?? ""}
+        onChange={(e) => { const v = Number(e.target.value); if (v) handleSqlConnChange(v); }}
+        className="h-5 text-[10px] bg-transparent border border-border rounded px-1 text-foreground outline-none max-w-[140px]"
+        title="Select connection for autocomplete"
+      >
+        <option value="">Connection…</option>
+        {connections.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
+      </select>
+      <button
+        type="button"
+        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"
+      >
+        <Play className="size-3.5" />
+      </button>
+    </div>
+  ) : null;
+
+  // Beautify for inline content
+  const canBeautifyInline = inlineContent != null && (inlineLanguage === "json" || inlineLanguage === "xml");
+  const [isBeautified, setIsBeautified] = useState(false);
+  const handleBeautifyInline = useCallback(() => {
+    if (!inlineContent) return;
+    if (isBeautified) {
+      setContent(inlineContent);
+      setIsBeautified(false);
+    } else {
+      const trimmed = inlineContent.trimStart();
+      if (inlineLanguage === "json") {
+        try { setContent(JSON.stringify(JSON.parse(trimmed), null, 2)); setIsBeautified(true); } catch { /* not valid */ }
+      } else if (inlineLanguage === "xml") {
+        let indent = 0;
+        const formatted = trimmed.replace(/(>)(<)(\/*)/g, "$1\n$2$3")
+          .split("\n")
+          .map((line) => {
+            const l = line.trim();
+            if (l.startsWith("</")) indent = Math.max(0, indent - 1);
+            const padded = "  ".repeat(indent) + l;
+            if (l.startsWith("<") && !l.startsWith("</") && !l.endsWith("/>") && !l.includes("</")) indent++;
+            return padded;
+          })
+          .join("\n");
+        setContent(formatted);
+        setIsBeautified(true);
+      }
+    }
+  }, [inlineContent, inlineLanguage, isBeautified]);
+
   return (
     <div className="flex flex-col h-full w-full overflow-hidden">
+      {/* Inline content toolbar (cell viewer mode) */}
+      {inlineContent != null && canBeautifyInline && (
+        <div className="flex items-center h-7 border-b border-border bg-background shrink-0 px-2 gap-2">
+          <button type="button" onClick={handleBeautifyInline}
+            className="text-[10px] px-2 py-0.5 rounded border border-border hover:bg-muted transition-colors text-foreground">
+            {isBeautified ? "Raw" : "Beautify"}
+          </button>
+        </div>
+      )}
       {/* Breadcrumb + Toolbar bar — desktop only */}
       {filePath && projectName && tabId && (
         <div className="hidden md:flex items-center h-7 border-b border-border bg-background shrink-0">
@@ -214,6 +412,7 @@ export function CodeEditor({ metadata, tabId }: CodeEditorProps) {
             tabId={tabId}
             className="flex items-center flex-1 min-w-0 overflow-x-auto scrollbar-none px-2 gap-0.5"
           />
+          {sqlPickerBar}
           <EditorToolbar
             ext={ext}
             mdMode={mdMode}
@@ -229,6 +428,14 @@ export function CodeEditor({ metadata, tabId }: CodeEditorProps) {
         </div>
       )}
 
+      {/* Standalone SQL toolbar for external files (no breadcrumb available) */}
+      {isSql && (!projectName || !tabId) && (
+        <div className="hidden md:flex items-center h-7 border-b border-border bg-background shrink-0 px-2">
+          <span className="text-xs text-muted-foreground truncate flex-1">{filePath ? basename(filePath) : "SQL"}</span>
+          {sqlPickerBar}
+        </div>
+      )}
+
       {/* Content area */}
       {isCsv && csvMode === "table" ? (
         <Suspense fallback={<div className="flex items-center justify-center h-full"><Loader2 className="size-5 animate-spin text-text-subtle" /></div>}>
@@ -240,9 +447,9 @@ export function CodeEditor({ metadata, tabId }: CodeEditorProps) {
         <div className="flex-1 overflow-hidden">
           <Editor
             height="100%"
-            language={getMonacoLanguage(filePath)}
+            language={inlineLanguage ?? getMonacoLanguage(filePath ?? "")}
             value={content ?? ""}
-            onChange={handleChange}
+            onChange={inlineContent != null ? undefined : handleChange}
             onMount={handleEditorMount}
             theme={monacoTheme}
             options={{
@@ -255,6 +462,7 @@ export function CodeEditor({ metadata, tabId }: CodeEditorProps) {
               lineNumbers: "on",
               folding: true,
               bracketPairColorization: { enabled: true },
+              readOnly: inlineContent != null,
             }}
             loading={<Loader2 className="size-5 animate-spin text-text-subtle" />}
           />

package/src/web/components/sqlite/sqlite-query-editor.tsx

@@ -1,97 +1,10 @@
-import { useState, useCallback } from "react";
-import CodeMirror from "@uiw/react-codemirror";
-import { sql, SQLite } from "@codemirror/lang-sql";
-import { Play, Loader2 } from "lucide-react";
-import type { QueryResult } from "./use-sqlite";
+import { SqlQueryEditor } from "../database/sql-query-editor";
 
 interface Props {
   onExecute: (sql: string) => void;
-  result: QueryResult | null;
-  error: string | null;
   loading: boolean;
 }
 
-export function SqliteQueryEditor({ onExecute, result, error, loading }: Props) {
-  const [query, setQuery] = useState("SELECT * FROM ");
-
-  const handleExecute = useCallback(() => {
-    const trimmed = query.trim();
-    if (!trimmed) return;
-    onExecute(trimmed);
-  }, [query, onExecute]);
-
-  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
-    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
-      e.preventDefault();
-      handleExecute();
-    }
-  }, [handleExecute]);
-
-  return (
-    <div className="flex flex-col h-full overflow-hidden">
-      {/* Editor area */}
-      <div className="flex items-start gap-1 border-b border-border bg-background" onKeyDown={handleKeyDown}>
-        <div className="flex-1 max-h-[120px] overflow-auto">
-          <CodeMirror
-            value={query}
-            onChange={setQuery}
-            extensions={[sql({ dialect: SQLite })]}
-            basicSetup={{ lineNumbers: false, foldGutter: false, highlightActiveLine: false }}
-            className="text-xs [&_.cm-editor]:!outline-none [&_.cm-scroller]:!overflow-auto"
-          />
-        </div>
-        <button
-          type="button"
-          onClick={handleExecute}
-          disabled={loading}
-          className="shrink-0 m-1 p-1.5 rounded bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 transition-colors"
-          title="Execute (Cmd+Enter)"
-        >
-          {loading ? <Loader2 className="size-3.5 animate-spin" /> : <Play className="size-3.5" />}
-        </button>
-      </div>
-
-      {/* Results area */}
-      <div className="flex-1 overflow-auto text-xs">
-        {error && (
-          <div className="px-3 py-2 text-destructive bg-destructive/5">{error}</div>
-        )}
-
-        {result && result.changeType === "modify" && (
-          <div className="px-3 py-2 text-green-500">
-            Query executed. {result.rowsAffected} row(s) affected.
-          </div>
-        )}
-
-        {result && result.changeType === "select" && result.rows.length > 0 && (
-          <table className="w-full border-collapse">
-            <thead className="sticky top-0 bg-muted">
-              <tr>
-                {result.columns.map((col) => (
-                  <th key={col} className="px-2 py-1 text-left font-medium text-muted-foreground border-b border-border whitespace-nowrap">
-                    {col}
-                  </th>
-                ))}
-              </tr>
-            </thead>
-            <tbody>
-              {result.rows.map((row, i) => (
-                <tr key={i} className="hover:bg-muted/30 border-b border-border/50">
-                  {result.columns.map((col) => (
-                    <td key={col} className="px-2 py-1 max-w-[300px] truncate" title={row[col] == null ? "NULL" : String(row[col])}>
-                      {row[col] == null ? <span className="text-muted-foreground/40 italic">NULL</span> : String(row[col])}
-                    </td>
-                  ))}
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        )}
-
-        {result && result.changeType === "select" && result.rows.length === 0 && (
-          <div className="px-3 py-2 text-muted-foreground">No results</div>
-        )}
-      </div>
-    </div>
-  );
+export function SqliteQueryEditor({ onExecute, loading }: Props) {
+  return <SqlQueryEditor onExecute={onExecute} loading={loading} />;
 }

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

@@ -136,8 +136,6 @@ function SqliteViewerInner({
           <div className="border-t border-border h-[40%] shrink-0">
             <SqliteQueryEditor
               onExecute={sqlite.executeQuery}
-              result={sqlite.queryResult}
-              error={sqlite.queryError}
               loading={sqlite.queryLoading}
             />
           </div>

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

@@ -3,7 +3,7 @@ import { api, projectUrl } from "@/lib/api-client";
 
 export interface TableInfo { name: string; rowCount: number }
 export interface ColumnInfo { cid: number; name: string; type: string; notnull: boolean; pk: boolean; dflt_value: string | null }
-export interface QueryResult { columns: string[]; rows: Record<string, unknown>[]; rowsAffected: number; changeType: "select" | "modify" }
+export interface QueryResult { columns: string[]; rows: Record<string, unknown>[]; rowsAffected: number; changeType: "select" | "modify"; executionTimeMs?: number }
 interface TableData { columns: string[]; rows: Record<string, unknown>[]; total: number; page: number; limit: number }
 
 export function useSqlite(projectName: string, dbPath: string, connectionId?: number) {

package/dist/web/assets/architecture-PBZL5I3N-CFzkFKEL.js

@@ -1 +0,0 @@
-import"./chunk-XZSTWKYB-Cb0iqycX.js";import{n as e}from"./chunk-R5LLSJPH-CMY0PkRK.js";export{e as createArchitectureServices};

package/dist/web/assets/channel-C2fMafck.js

@@ -1 +0,0 @@
-import{it as e,rt as t}from"./chunk-7R4GIKGN-Dvbyu4Zw.js";var n=(n,r)=>e.lang.round(t.parse(n)[r]);export{n as t};