@hienlh/ppm 0.9.0-beta.8 → 0.9.1

package/packages/ext-database/src/extension.ts

@@ -0,0 +1,346 @@
+/**
+ * @ppm/ext-database — Database Viewer extension for PPM.
+ * Provides a sidebar tree view of DB connections/tables/columns
+ * and a full-featured table viewer webview with inline editing,
+ * pagination, and SQL query panel.
+ */
+import type { ExtensionContext } from "@ppm/vscode-compat";
+import { ConnectionTreeProvider } from "./connection-tree.ts";
+import { getQueryPanelHtml } from "./query-panel.ts";
+import { getTableViewerHtml } from "./table-viewer-panel.ts";
+
+/** PPM vscode-compat API namespace (passed as second arg by Worker) */
+interface VscodeApi {
+  commands: {
+    registerCommand(command: string, callback: (...args: unknown[]) => unknown): { dispose(): void };
+  };
+  window: {
+    showInformationMessage(message: string, ...items: string[]): Promise<string | undefined>;
+    showErrorMessage(message: string, ...items: string[]): Promise<string | undefined>;
+    showQuickPick(items: string[], options?: { placeHolder?: string }): Promise<string | undefined>;
+    showInputBox(options?: { prompt?: string; placeHolder?: string; value?: string }): Promise<string | undefined>;
+    createTreeView(viewId: string, options: { treeDataProvider: unknown }): { dispose(): void };
+    createWebviewPanel(viewType: string, title: string, showOptions: unknown): {
+      webview: {
+        html: string;
+        onDidReceiveMessage: (listener: (msg: unknown) => void) => { dispose(): void };
+        postMessage(message: unknown): Promise<boolean>;
+      };
+      onDidDispose: (listener: () => void) => { dispose(): void };
+      dispose(): void;
+    };
+    createStatusBarItem(alignment?: unknown, priority?: number): {
+      text: string; tooltip?: string; command?: string;
+      show(): void; hide(): void; dispose(): void;
+    };
+  };
+  EventEmitter: new <T>() => { fire(data?: T): void; event: unknown; dispose(): void };
+  StatusBarAlignment: { Left: number; Right: number };
+  ViewColumn: { Active: number };
+}
+
+// Server base URL for fetch() calls (set by Worker before activation)
+let baseUrl = "";
+
+export function activate(context: ExtensionContext, vscode: VscodeApi): void {
+  baseUrl = (globalThis as any).__PPM_BASE_URL__ || "";
+
+  // --- Tree View ---
+  const emitter = new vscode.EventEmitter<unknown>();
+  const treeProvider = new ConnectionTreeProvider(
+    { fire: (el?: unknown) => emitter.fire(el), event: emitter.event },
+    baseUrl,
+  );
+
+  const treeView = vscode.window.createTreeView("ppm-db.connections", {
+    treeDataProvider: treeProvider,
+  });
+  context.subscriptions.push(treeView);
+
+  // --- Commands ---
+  context.subscriptions.push(
+    vscode.commands.registerCommand("ppm-db.openViewer", (...args: unknown[]) => {
+      const connectionId = (args[0] as number) ?? 1;
+      const connectionName = (args[1] as string) ?? "Database";
+      const tableName = args[2] as string | undefined;
+      const schemaName = (args[3] as string) ?? "public";
+      if (tableName) {
+        openTableViewer(vscode, context, connectionId, connectionName, tableName, schemaName);
+      } else {
+        openQueryPanel(vscode, context, connectionId, connectionName);
+      }
+    }),
+  );
+
+  context.subscriptions.push(
+    vscode.commands.registerCommand("ppm-db.runQuery", () => {
+      openQueryPanel(vscode, context, 1, "Default");
+    }),
+  );
+
+  context.subscriptions.push(
+    vscode.commands.registerCommand("ppm-db.refreshConnections", () => {
+      treeProvider.refresh();
+    }),
+  );
+
+  context.subscriptions.push(
+    vscode.commands.registerCommand("ppm-db.refreshConnection", () => {
+      treeProvider.refresh();
+    }),
+  );
+
+  context.subscriptions.push(
+    vscode.commands.registerCommand("ppm-db.addConnection", async () => {
+      await addConnection(vscode, treeProvider);
+    }),
+  );
+
+  // --- Status Bar ---
+  const statusItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 10);
+  statusItem.text = "DB";
+  statusItem.tooltip = "Database Viewer";
+  statusItem.command = "ppm-db.runQuery";
+  statusItem.show();
+  context.subscriptions.push(statusItem);
+
+  console.log("[ext-database] activated");
+}
+
+export function deactivate(): void {
+  console.log("[ext-database] deactivated");
+}
+
+// ---------------------------------------------------------------------------
+// Table Viewer — full-featured data grid with inline editing & SQL panel
+// ---------------------------------------------------------------------------
+
+function openTableViewer(
+  vscode: VscodeApi,
+  context: ExtensionContext,
+  connectionId: number,
+  connectionName: string,
+  tableName: string,
+  schemaName: string,
+): void {
+  const panel = vscode.window.createWebviewPanel(
+    "ppm-db.tableViewer",
+    `${connectionName} · ${tableName}`,
+    vscode.ViewColumn.Active,
+  );
+
+  panel.webview.html = getTableViewerHtml({ connectionId, connectionName, tableName, schemaName });
+
+  const msgDisposable = panel.webview.onDidReceiveMessage(async (raw: unknown) => {
+    const msg = raw as Record<string, unknown>;
+    const connId = (msg.connectionId as number) ?? connectionId;
+    const tbl = (msg.tableName as string) ?? tableName;
+    const schema = (msg.schemaName as string) ?? schemaName;
+
+    switch (msg.type) {
+      case "init":
+      case "refresh":
+        await sendTableData(panel, connId, tbl, schema, (msg.page as number) ?? 1);
+        break;
+
+      case "fetchPage":
+        await sendTableData(panel, connId, tbl, schema, (msg.page as number) ?? 1);
+        break;
+
+      case "executeQuery":
+        await handleQuery(panel, connId, msg.sql as string);
+        break;
+
+      case "updateCell":
+        await handleCellUpdate(panel, connId, tbl, schema, msg);
+        break;
+    }
+  });
+  context.subscriptions.push(msgDisposable);
+  panel.onDidDispose(() => msgDisposable.dispose());
+}
+
+/** Fetch table data + schema and send to webview */
+async function sendTableData(
+  panel: ReturnType<VscodeApi["window"]["createWebviewPanel"]>,
+  connectionId: number,
+  tableName: string,
+  schemaName: string,
+  page: number,
+): Promise<void> {
+  try {
+    const [dataRes, schemaRes] = await Promise.all([
+      fetch(`${baseUrl}/api/db/connections/${connectionId}/data?table=${encodeURIComponent(tableName)}&schema=${schemaName}&page=${page}&limit=100`),
+      fetch(`${baseUrl}/api/db/connections/${connectionId}/schema?table=${encodeURIComponent(tableName)}&schema=${schemaName}`),
+    ]);
+    const dataJson = await dataRes.json() as { ok: boolean; data?: { columns: string[]; rows: Record<string, unknown>[]; total: number; page: number; limit: number } };
+    const schemaJson = await schemaRes.json() as { ok: boolean; data?: { name: string; type: string; nullable: boolean; pk: boolean; defaultValue: string | null }[] };
+
+    if (!dataJson.ok) {
+      await panel.webview.postMessage({ type: "error", message: "Failed to load table data" });
+      return;
+    }
+
+    await panel.webview.postMessage({
+      type: "tableData",
+      columns: dataJson.data?.columns ?? [],
+      rows: dataJson.data?.rows ?? [],
+      total: dataJson.data?.total ?? 0,
+      page: dataJson.data?.page ?? page,
+      limit: dataJson.data?.limit ?? 100,
+      schema: schemaJson.data ?? [],
+    });
+  } catch (e) {
+    const errMsg = e instanceof Error ? e.message : String(e);
+    await panel.webview.postMessage({ type: "error", message: errMsg });
+  }
+}
+
+/** Execute SQL query and send result to webview */
+async function handleQuery(
+  panel: ReturnType<VscodeApi["window"]["createWebviewPanel"]>,
+  connectionId: number,
+  sql: string,
+): Promise<void> {
+  if (!sql) return;
+  try {
+    const start = Date.now();
+    const res = await fetch(`${baseUrl}/api/db/connections/${connectionId}/query`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ sql }),
+    });
+    const json = await res.json() as { ok: boolean; data?: { columns: string[]; rows: Record<string, unknown>[]; rowsAffected: number; changeType: string } };
+    const duration = Date.now() - start;
+
+    if (!json.ok) {
+      await panel.webview.postMessage({ type: "queryError", error: (json as any).error ?? "Query failed" });
+      return;
+    }
+
+    await panel.webview.postMessage({
+      type: "queryResult",
+      columns: json.data?.columns ?? [],
+      rows: json.data?.rows ?? [],
+      rowsAffected: json.data?.rowsAffected ?? 0,
+      changeType: json.data?.changeType ?? "select",
+      duration,
+    });
+  } catch (e) {
+    const errMsg = e instanceof Error ? e.message : String(e);
+    await panel.webview.postMessage({ type: "queryError", error: errMsg });
+  }
+}
+
+/** Update a single cell value */
+async function handleCellUpdate(
+  panel: ReturnType<VscodeApi["window"]["createWebviewPanel"]>,
+  connectionId: number,
+  tableName: string,
+  schemaName: string,
+  msg: Record<string, unknown>,
+): Promise<void> {
+  try {
+    const res = await fetch(`${baseUrl}/api/db/connections/${connectionId}/cell`, {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        table: tableName,
+        schema: schemaName,
+        pkColumn: msg.pkColumn,
+        pkValue: msg.pkValue,
+        column: msg.column,
+        value: msg.value,
+      }),
+    });
+    const json = await res.json() as { ok: boolean; error?: string };
+    if (json.ok) {
+      await panel.webview.postMessage({ type: "cellUpdated" });
+    } else {
+      await panel.webview.postMessage({ type: "error", message: json.error ?? "Cell update failed" });
+    }
+  } catch (e) {
+    const errMsg = e instanceof Error ? e.message : String(e);
+    await panel.webview.postMessage({ type: "error", message: errMsg });
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Query Panel — standalone SQL editor (opened from status bar)
+// ---------------------------------------------------------------------------
+
+function openQueryPanel(
+  vscode: VscodeApi,
+  context: ExtensionContext,
+  connectionId: number,
+  connectionName: string,
+  tableName?: string,
+): void {
+  const panel = vscode.window.createWebviewPanel(
+    "ppm-db.queryPanel",
+    `Query: ${connectionName}`,
+    vscode.ViewColumn.Active,
+  );
+
+  panel.webview.html = getQueryPanelHtml(connectionName, tableName);
+
+  const msgDisposable = panel.webview.onDidReceiveMessage(async (raw: unknown) => {
+    const msg = raw as { type: string; sql?: string };
+    if (msg.type !== "executeQuery" || !msg.sql) return;
+    await handleQuery(panel, connectionId, msg.sql);
+  });
+  context.subscriptions.push(msgDisposable);
+  panel.onDidDispose(() => msgDisposable.dispose());
+}
+
+// ---------------------------------------------------------------------------
+// Add Connection — collect info via QuickPick + InputBox, then POST to API
+// ---------------------------------------------------------------------------
+
+async function addConnection(
+  vscode: VscodeApi,
+  treeProvider: ConnectionTreeProvider,
+): Promise<void> {
+  // 1. Pick type
+  const type = await vscode.window.showQuickPick(["postgres", "sqlite"], {
+    placeHolder: "Select database type",
+  }) as string | undefined;
+  if (!type) return;
+
+  // 2. Name
+  const name = await vscode.window.showInputBox({ prompt: "Connection name", placeHolder: "e.g. Production DB" });
+  if (!name) return;
+
+  // 3. Connection config
+  let connectionConfig: Record<string, string>;
+  if (type === "sqlite") {
+    const path = await vscode.window.showInputBox({ prompt: "SQLite file path", placeHolder: "/path/to/database.db" });
+    if (!path) return;
+    connectionConfig = { type: "sqlite", path };
+  } else {
+    const connStr = await vscode.window.showInputBox({
+      prompt: "PostgreSQL connection string",
+      placeHolder: "postgres://user:pass@host:5432/dbname",
+    });
+    if (!connStr) return;
+    connectionConfig = { type: "postgres", connectionString: connStr };
+  }
+
+  // 4. Create via API
+  try {
+    const res = await fetch(`${baseUrl}/api/db/connections`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ type, name, connectionConfig }),
+    });
+    const json = await res.json() as { ok: boolean; error?: string };
+    if (json.ok) {
+      await vscode.window.showInformationMessage(`Connection "${name}" created`);
+      treeProvider.refresh();
+    } else {
+      await vscode.window.showErrorMessage(json.error ?? "Failed to create connection");
+    }
+  } catch (e) {
+    await vscode.window.showErrorMessage(`Error: ${e instanceof Error ? e.message : String(e)}`);
+  }
+}

package/packages/ext-database/src/query-panel.ts

@@ -0,0 +1,120 @@
+/**
+ * WebviewPanel for SQL query editor + results display.
+ * Communicates with the extension via postMessage.
+ */
+
+function escHtml(s: string): string {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+
+/** Create the HTML content for the query webview panel */
+export function getQueryPanelHtml(connectionName: string, tableName?: string): string {
+  const initialQuery = tableName ? `SELECT * FROM ${escHtml(tableName)} LIMIT 100;` : "";
+  return `<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body { font-family: -apple-system, BlinkMacSystemFont, sans-serif; background: #1e1e2e; color: #cdd6f4; padding: 12px; font-size: 13px; }
+  .header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
+  .header h3 { font-size: 14px; font-weight: 600; }
+  .header .badge { background: #313244; padding: 2px 8px; border-radius: 4px; font-size: 11px; color: #a6adc8; }
+  textarea { width: 100%; height: 80px; background: #313244; border: 1px solid #45475a; border-radius: 6px; color: #cdd6f4; padding: 8px; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px; resize: vertical; }
+  textarea:focus { outline: none; border-color: #89b4fa; }
+  .actions { display: flex; gap: 8px; margin: 8px 0; }
+  button { background: #89b4fa; color: #1e1e2e; border: none; padding: 6px 16px; border-radius: 4px; font-size: 12px; font-weight: 600; cursor: pointer; }
+  button:hover { background: #74c7ec; }
+  button.secondary { background: #313244; color: #cdd6f4; }
+  .status { font-size: 11px; color: #a6adc8; margin: 4px 0; }
+  .error { color: #f38ba8; background: #45475a; padding: 8px; border-radius: 4px; margin: 8px 0; font-size: 12px; }
+  table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12px; }
+  th { background: #313244; text-align: left; padding: 6px 8px; border-bottom: 1px solid #45475a; font-weight: 600; position: sticky; top: 0; }
+  td { padding: 4px 8px; border-bottom: 1px solid #313244; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  tr:hover td { background: #313244; }
+  .results { max-height: 60vh; overflow: auto; border: 1px solid #45475a; border-radius: 6px; }
+  .empty { text-align: center; padding: 24px; color: #6c7086; }
+</style>
+</head>
+<body>
+  <div class="header">
+    <h3>Query</h3>
+    <span class="badge">${escHtml(connectionName)}</span>
+  </div>
+  <textarea id="sql" placeholder="Enter SQL query...">${initialQuery}</textarea>
+  <div class="actions">
+    <button id="run">Run Query</button>
+    <button class="secondary" id="clear">Clear</button>
+  </div>
+  <div id="status" class="status"></div>
+  <div id="error" style="display:none"></div>
+  <div id="results"></div>
+<script>
+  const vscode = acquireVsCodeApi();
+  const sqlEl = document.getElementById('sql');
+  const statusEl = document.getElementById('status');
+  const errorEl = document.getElementById('error');
+  const resultsEl = document.getElementById('results');
+
+  document.getElementById('run').addEventListener('click', () => {
+    const sql = sqlEl.value.trim();
+    if (!sql) return;
+    statusEl.textContent = 'Running...';
+    errorEl.style.display = 'none';
+    resultsEl.innerHTML = '';
+    vscode.postMessage({ type: 'executeQuery', sql });
+  });
+
+  document.getElementById('clear').addEventListener('click', () => {
+    sqlEl.value = '';
+    statusEl.textContent = '';
+    errorEl.style.display = 'none';
+    resultsEl.innerHTML = '';
+  });
+
+  sqlEl.addEventListener('keydown', (e) => {
+    if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+      document.getElementById('run').click();
+    }
+  });
+
+  window.addEventListener('message', (event) => {
+    const msg = event.data;
+    if (msg.type === 'queryResult') {
+      if (msg.changeType === 'modify') {
+        statusEl.textContent = (msg.rowsAffected ?? 0) + ' row(s) affected' + (msg.duration ? ' in ' + msg.duration + 'ms' : '');
+        resultsEl.innerHTML = '';
+        return;
+      }
+      const rows = msg.rows || [];
+      statusEl.textContent = rows.length + ' row(s) returned' + (msg.duration ? ' in ' + msg.duration + 'ms' : '');
+      if (rows.length === 0) {
+        resultsEl.innerHTML = '<div class="empty">No results</div>';
+        return;
+      }
+      function esc(s){return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');}
+      const cols = msg.columns || Object.keys(rows[0]);
+      let html = '<div class="results"><table><thead><tr>';
+      cols.forEach(c => { html += '<th>' + esc(c) + '</th>'; });
+      html += '</tr></thead><tbody>';
+      rows.forEach(row => {
+        html += '<tr>';
+        cols.forEach(c => {
+          const v = row[c];
+          html += '<td>' + (v === null ? '<span style="color:#6c7086">NULL</span>' : esc(v)) + '</td>';
+        });
+        html += '</tr>';
+      });
+      html += '</tbody></table></div>';
+      resultsEl.innerHTML = html;
+    } else if (msg.type === 'queryError') {
+      statusEl.textContent = '';
+      errorEl.textContent = msg.error;
+      errorEl.style.display = 'block';
+      errorEl.className = 'error';
+    }
+  });
+</script>
+</body>
+</html>`;
+}