@hienlh/ppm 0.9.2 → 0.9.4

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

@@ -96,6 +96,67 @@ export function activate(context: ExtensionContext, vscode: VscodeApi): void {
     }),
   );
 
+  context.subscriptions.push(
+    vscode.commands.registerCommand("ppm-db.editConnection", async (...args: unknown[]) => {
+      const connectionId = args[0] as number;
+      if (connectionId) await editConnection(vscode, treeProvider, connectionId);
+    }),
+  );
+
+  context.subscriptions.push(
+    vscode.commands.registerCommand("ppm-db.deleteConnection", async (...args: unknown[]) => {
+      const connectionId = args[0] as number;
+      const connectionName = (args[1] as string) ?? "this connection";
+      if (!connectionId) return;
+      const confirm = await vscode.window.showQuickPick(["Yes, delete", "Cancel"], {
+        placeHolder: `Delete "${connectionName}"?`,
+      });
+      if (confirm !== "Yes, delete") return;
+      try {
+        const res = await fetch(`${baseUrl}/api/db/connections/${connectionId}`, { method: "DELETE" });
+        const json = await res.json() as { ok: boolean; error?: string };
+        if (json.ok) {
+          await vscode.window.showInformationMessage(`Connection "${connectionName}" deleted`);
+          treeProvider.refresh();
+        } else {
+          await vscode.window.showErrorMessage(json.error ?? "Failed to delete connection");
+        }
+      } catch (e) {
+        await vscode.window.showErrorMessage(`Error: ${e instanceof Error ? e.message : String(e)}`);
+      }
+    }),
+  );
+
+  context.subscriptions.push(
+    vscode.commands.registerCommand("ppm-db.testConnection", async (...args: unknown[]) => {
+      const connectionId = args[0] as number;
+      if (!connectionId) return;
+      try {
+        const res = await fetch(`${baseUrl}/api/db/connections/${connectionId}/test`, { method: "POST" });
+        const json = await res.json() as { ok: boolean; data?: { ok: boolean; error?: string } };
+        if (json.ok && json.data?.ok) {
+          await vscode.window.showInformationMessage("Connection successful");
+        } else {
+          await vscode.window.showErrorMessage(`Connection failed: ${json.data?.error ?? "Unknown error"}`);
+        }
+      } catch (e) {
+        await vscode.window.showErrorMessage(`Error: ${e instanceof Error ? e.message : String(e)}`);
+      }
+    }),
+  );
+
+  context.subscriptions.push(
+    vscode.commands.registerCommand("ppm-db.exportConnections", async () => {
+      await exportConnections(vscode);
+    }),
+  );
+
+  context.subscriptions.push(
+    vscode.commands.registerCommand("ppm-db.importConnections", async () => {
+      await importConnections(vscode, treeProvider);
+    }),
+  );
+
   // --- Status Bar ---
   const statusItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 10);
   statusItem.text = "DB";
@@ -297,6 +358,27 @@ function openQueryPanel(
 // Add Connection — collect info via QuickPick + InputBox, then POST to API
 // ---------------------------------------------------------------------------
 
+/** Collect optional group/color/readonly via InputBox + QuickPick */
+async function collectConnectionExtras(vscode: VscodeApi): Promise<{ groupName?: string; color?: string; readonly?: number } | null> {
+  const groupName = await vscode.window.showInputBox({ prompt: "Group name (optional)", placeHolder: "e.g. Production" });
+  if (groupName === undefined) return null; // cancelled
+
+  const COLOR_OPTIONS = ["None", "#ef4444", "#f97316", "#eab308", "#22c55e", "#06b6d4", "#3b82f6", "#8b5cf6", "#ec4899"];
+  const color = await vscode.window.showQuickPick(COLOR_OPTIONS, { placeHolder: "Pick a color (optional)" });
+  if (color === undefined) return null;
+
+  const readonlyChoice = await vscode.window.showQuickPick(["Yes (recommended)", "No"], {
+    placeHolder: "Readonly mode? (blocks write queries)",
+  });
+  if (readonlyChoice === undefined) return null;
+
+  return {
+    groupName: groupName || undefined,
+    color: color === "None" ? undefined : color,
+    readonly: readonlyChoice.startsWith("Yes") ? 1 : 0,
+  };
+}
+
 async function addConnection(
   vscode: VscodeApi,
   treeProvider: ConnectionTreeProvider,
@@ -326,12 +408,16 @@ async function addConnection(
     connectionConfig = { type: "postgres", connectionString: connStr };
   }
 
-  // 4. Create via API
+  // 4. Group, color, readonly
+  const extras = await collectConnectionExtras(vscode);
+  if (extras === null) return;
+
+  // 5. 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 }),
+      body: JSON.stringify({ type, name, connectionConfig, ...extras }),
     });
     const json = await res.json() as { ok: boolean; error?: string };
     if (json.ok) {
@@ -344,3 +430,149 @@ async function addConnection(
     await vscode.window.showErrorMessage(`Error: ${e instanceof Error ? e.message : String(e)}`);
   }
 }
+
+// ---------------------------------------------------------------------------
+// Edit Connection — update name, group, color, readonly via QuickPick/InputBox
+// ---------------------------------------------------------------------------
+
+async function editConnection(
+  vscode: VscodeApi,
+  treeProvider: ConnectionTreeProvider,
+  connectionId: number,
+): Promise<void> {
+  // Fetch current connection data
+  let conn: { id: number; name: string; type: string; group_name?: string; color?: string; readonly?: number };
+  try {
+    const res = await fetch(`${baseUrl}/api/db/connections/${connectionId}`);
+    const json = await res.json() as { ok: boolean; data?: typeof conn };
+    if (!json.ok || !json.data) {
+      await vscode.window.showErrorMessage("Failed to load connection");
+      return;
+    }
+    conn = json.data;
+  } catch (e) {
+    await vscode.window.showErrorMessage(`Error: ${e instanceof Error ? e.message : String(e)}`);
+    return;
+  }
+
+  // Name
+  const name = await vscode.window.showInputBox({ prompt: "Connection name", value: conn.name });
+  if (name === undefined) return;
+
+  // Connection config (optional update)
+  let connectionConfig: Record<string, string> | undefined;
+  const updateConfig = await vscode.window.showQuickPick(["Keep current", "Update connection config"], {
+    placeHolder: "Connection config",
+  });
+  if (updateConfig === undefined) return;
+  if (updateConfig === "Update connection config") {
+    if (conn.type === "sqlite") {
+      const path = await vscode.window.showInputBox({ prompt: "SQLite file path", placeHolder: "/path/to/database.db" });
+      if (path === undefined) return;
+      if (path) connectionConfig = { type: "sqlite", path };
+    } else {
+      const connStr = await vscode.window.showInputBox({ prompt: "PostgreSQL connection string", placeHolder: "postgres://user:pass@host:5432/dbname" });
+      if (connStr === undefined) return;
+      if (connStr) connectionConfig = { type: "postgres", connectionString: connStr };
+    }
+  }
+
+  // Group, color, readonly
+  const groupName = await vscode.window.showInputBox({ prompt: "Group name", value: conn.group_name ?? "" });
+  if (groupName === undefined) return;
+
+  const COLOR_OPTIONS = ["None", "#ef4444", "#f97316", "#eab308", "#22c55e", "#06b6d4", "#3b82f6", "#8b5cf6", "#ec4899"];
+  const color = await vscode.window.showQuickPick(COLOR_OPTIONS, { placeHolder: `Current color: ${conn.color ?? "None"}` });
+  if (color === undefined) return;
+
+  const readonlyChoice = await vscode.window.showQuickPick(["Yes (recommended)", "No"], {
+    placeHolder: `Readonly? (current: ${conn.readonly === 1 ? "Yes" : "No"})`,
+  });
+  if (readonlyChoice === undefined) return;
+
+  // Update via API
+  try {
+    const body: Record<string, unknown> = {
+      name: name || conn.name,
+      groupName: groupName || null,
+      color: color === "None" ? null : color,
+      readonly: readonlyChoice.startsWith("Yes") ? 1 : 0,
+    };
+    if (connectionConfig) body.connectionConfig = connectionConfig;
+
+    const res = await fetch(`${baseUrl}/api/db/connections/${connectionId}`, {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body),
+    });
+    const json = await res.json() as { ok: boolean; error?: string };
+    if (json.ok) {
+      await vscode.window.showInformationMessage(`Connection "${name || conn.name}" updated`);
+      treeProvider.refresh();
+    } else {
+      await vscode.window.showErrorMessage(json.error ?? "Failed to update connection");
+    }
+  } catch (e) {
+    await vscode.window.showErrorMessage(`Error: ${e instanceof Error ? e.message : String(e)}`);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Export Connections — copy JSON to clipboard via showInformationMessage
+// ---------------------------------------------------------------------------
+
+async function exportConnections(vscode: VscodeApi): Promise<void> {
+  try {
+    const res = await fetch(`${baseUrl}/api/db/connections/export`);
+    const json = await res.json() as { ok: boolean; data?: unknown };
+    if (!json.ok || !json.data) {
+      await vscode.window.showErrorMessage("Failed to export connections");
+      return;
+    }
+    // In extension context, we can't write to clipboard directly — show data as info
+    const data = json.data as { connections: unknown[] };
+    await vscode.window.showInformationMessage(`Exported ${data.connections.length} connection(s). Use built-in UI for file export.`);
+  } catch (e) {
+    await vscode.window.showErrorMessage(`Error: ${e instanceof Error ? e.message : String(e)}`);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Import Connections — paste JSON via InputBox
+// ---------------------------------------------------------------------------
+
+async function importConnections(
+  vscode: VscodeApi,
+  treeProvider: ConnectionTreeProvider,
+): Promise<void> {
+  const jsonStr = await vscode.window.showInputBox({
+    prompt: "Paste connections JSON (from export)",
+    placeHolder: '{"connections": [...]}',
+  });
+  if (!jsonStr) return;
+
+  try {
+    const data = JSON.parse(jsonStr);
+    const conns = data.connections ?? data;
+    if (!Array.isArray(conns)) {
+      await vscode.window.showErrorMessage("Invalid format: expected connections array");
+      return;
+    }
+    const res = await fetch(`${baseUrl}/api/db/connections/import`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ connections: conns }),
+    });
+    const json = await res.json() as { ok: boolean; data?: { imported: number; skipped: number; errors: string[] } };
+    if (json.ok && json.data) {
+      let msg = `Imported ${json.data.imported} connection(s)`;
+      if (json.data.skipped > 0) msg += `, ${json.data.skipped} skipped`;
+      await vscode.window.showInformationMessage(msg);
+      treeProvider.refresh();
+    } else {
+      await vscode.window.showErrorMessage("Import failed");
+    }
+  } catch (e) {
+    await vscode.window.showErrorMessage(`Error: ${e instanceof Error ? e.message : String(e)}`);
+  }
+}

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

@@ -15,25 +15,38 @@ export function getQueryPanelHtml(connectionName: string, tableName?: string): s
 <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; }
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  :root {
+    --bg: #ffffff; --surface: #f4f4f5; --text: #09090b; --subtext: #71717a; --subtle: #a1a1aa;
+    --border: #e4e4e7; --border2: #d4d4d8; --blue: #3b82f6; --red: #ef4444; --green: #22c55e;
+    --surface-hover: #f4f4f5;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --bg: #09090b; --surface: #18181b; --text: #fafafa; --subtext: #a1a1aa; --subtle: #52525b;
+      --border: #27272a; --border2: #3f3f46; --blue: #3b82f6; --red: #ef4444; --green: #22c55e;
+      --surface-hover: #27272a;
+    }
+  }
+  body { font-family: -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg); color: var(--text); 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; }
+  .header .badge { background: var(--surface); padding: 2px 8px; border-radius: 4px; font-size: 11px; color: var(--subtext); }
+  textarea { width: 100%; height: 80px; background: var(--surface); border: 1px solid var(--border2); border-radius: 6px; color: var(--text); padding: 8px; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px; resize: vertical; }
+  textarea:focus { outline: none; border-color: var(--blue); }
   .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; }
+  button { background: var(--blue); color: #fff; border: none; padding: 6px 16px; border-radius: 4px; font-size: 12px; font-weight: 600; cursor: pointer; }
+  button:hover { opacity: 0.9; }
+  button.secondary { background: var(--surface); color: var(--text); }
+  .status { font-size: 11px; color: var(--subtext); margin: 4px 0; }
+  .error { color: var(--red); background: var(--surface); 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; }
+  th { background: var(--surface); text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border2); font-weight: 600; position: sticky; top: 0; color: var(--subtext); }
+  td { padding: 4px 8px; border-bottom: 1px solid var(--border); max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  tr:hover td { background: var(--surface-hover); }
+  .results { max-height: 60vh; overflow: auto; border: 1px solid var(--border2); border-radius: 6px; }
+  .empty { text-align: center; padding: 24px; color: var(--subtle); }
+  .null-val { color: var(--subtle); font-style: italic; }
 </style>
 </head>
 <body>
@@ -101,7 +114,7 @@ export function getQueryPanelHtml(connectionName: string, tableName?: string): s
         html += '<tr>';
         cols.forEach(c => {
           const v = row[c];
-          html += '<td>' + (v === null ? '<span style="color:#6c7086">NULL</span>' : esc(v)) + '</td>';
+          html += v === null ? '<td class="null-val">NULL</td>' : '<td>' + esc(v) + '</td>';
         });
         html += '</tr>';
       });

package/packages/ext-database/src/table-viewer-panel.ts

@@ -27,12 +27,22 @@ export function getTableViewerHtml(opts: TableViewerOptions): string {
 <style>
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
   :root {
-    --bg: #1e1e2e; --surface: #181825; --mantle: #11111b;
-    --overlay0: #6c7086; --overlay1: #7f849c;
-    --text: #cdd6f4; --subtext: #a6adc8; --subtle: #585b70;
-    --border: #313244; --border2: #45475a;
-    --blue: #89b4fa; --green: #a6e3a1; --red: #f38ba8; --yellow: #f9e2af;
-    --surface-hover: #313244;
+    --bg: #ffffff; --surface: #f4f4f5; --mantle: #fafafa;
+    --overlay0: #71717a; --overlay1: #52525b;
+    --text: #09090b; --subtext: #71717a; --subtle: #a1a1aa;
+    --border: #e4e4e7; --border2: #d4d4d8;
+    --blue: #3b82f6; --green: #22c55e; --red: #ef4444; --yellow: #eab308;
+    --surface-hover: #f4f4f5;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --bg: #09090b; --surface: #18181b; --mantle: #09090b;
+      --overlay0: #71717a; --overlay1: #a1a1aa;
+      --text: #fafafa; --subtext: #a1a1aa; --subtle: #52525b;
+      --border: #27272a; --border2: #3f3f46;
+      --blue: #3b82f6; --green: #22c55e; --red: #ef4444; --yellow: #eab308;
+      --surface-hover: #27272a;
+    }
   }
   body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); font-size: 13px; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }