@hienlh/ppm 0.9.3 → 0.9.4

package/packages/ext-database/src/connection-tree.ts

@@ -6,13 +6,17 @@
 interface ConnectionNode {
   id: string;
   name: string;
-  type: "connection" | "table" | "column";
+  type: "connection" | "group" | "table" | "column";
   connectionId?: number;
   connectionName?: string;
   connectionType?: string;
   connectionColor?: string | null;
+  connectionReadonly?: number;
+  groupName?: string | null;
   schemaName?: string;
   dataType?: string;
+  rowCount?: number;
+  children?: ConnectionNode[];
 }
 
 interface ApiConnection {
@@ -20,6 +24,8 @@ interface ApiConnection {
   name: string;
   type: string;
   color: string | null;
+  readonly: number;
+  group_name: string | null;
 }
 
 interface ApiTable {
@@ -54,7 +60,8 @@ export class ConnectionTreeProvider {
   }
 
   async getChildren(element?: ConnectionNode): Promise<ConnectionNode[]> {
-    if (!element) return this.getConnections();
+    if (!element) return this.getRootNodes();
+    if (element.type === "group") return element.children ?? [];
     if (element.type === "connection") return this.getTables(element);
     if (element.type === "table") return this.getColumns(element);
     return [];
@@ -62,13 +69,26 @@ export class ConnectionTreeProvider {
 
   getTreeItem(element: ConnectionNode): Record<string, unknown> {
     const isConn = element.type === "connection";
+    const isGroup = element.type === "group";
     const isTable = element.type === "table";
     const isCol = element.type === "column";
 
+    // Table description: row count
+    let description: string | undefined;
+    if (isCol) description = element.dataType;
+    else if (isTable && element.rowCount !== undefined) description = `${element.rowCount.toLocaleString()} rows`;
+
+    // Connection badge: type + readonly
+    let badge: string | undefined;
+    if (isConn) {
+      badge = element.connectionType === "postgres" ? "PG" : "DB";
+      if (element.connectionReadonly === 1) badge += " 🔒";
+    }
+
     return {
       id: element.id,
       label: element.name,
-      description: isCol ? element.dataType : undefined,
+      description,
       collapsibleState: isCol ? "none" : "collapsed",
       contextValue: element.type,
       command: isTable ? "ppm-db.openViewer" : undefined,
@@ -76,13 +96,49 @@ export class ConnectionTreeProvider {
         ? [element.connectionId, element.connectionName ?? "Database", element.name, element.schemaName ?? "public"]
         : undefined,
       color: isConn ? (element.connectionColor ?? undefined) : undefined,
-      badge: isConn ? (element.connectionType === "postgres" ? "PG" : "DB") : undefined,
+      badge,
       actions: isConn ? [
         { icon: "refresh", tooltip: "Refresh tables", command: "ppm-db.refreshConnection", commandArgs: [element.connectionId] },
-      ] : undefined,
+        { icon: "edit", tooltip: "Edit connection", command: "ppm-db.editConnection", commandArgs: [element.connectionId] },
+        { icon: "trash", tooltip: "Delete connection", command: "ppm-db.deleteConnection", commandArgs: [element.connectionId, element.name] },
+      ] : isGroup ? [] : undefined,
     };
   }
 
+  /** Build root tree: group nodes wrapping connection nodes, or flat if no groups */
+  private async getRootNodes(): Promise<ConnectionNode[]> {
+    const connections = await this.getConnections();
+    // Group by group_name
+    const groups = new Map<string, ConnectionNode[]>();
+    for (const conn of connections) {
+      const key = conn.groupName ?? "__ungrouped__";
+      const list = groups.get(key) ?? [];
+      list.push(conn);
+      groups.set(key, list);
+    }
+    // If only one group (ungrouped), return connections flat
+    if (groups.size <= 1 && groups.has("__ungrouped__")) {
+      return connections;
+    }
+    // Build group nodes
+    const result: ConnectionNode[] = [];
+    const sortedKeys = Array.from(groups.keys()).sort((a, b) => {
+      if (a === "__ungrouped__") return 1;
+      if (b === "__ungrouped__") return -1;
+      return a.localeCompare(b);
+    });
+    for (const key of sortedKeys) {
+      const label = key === "__ungrouped__" ? "Ungrouped" : key;
+      result.push({
+        id: `group:${key}`,
+        name: label,
+        type: "group",
+        children: groups.get(key) ?? [],
+      });
+    }
+    return result;
+  }
+
   private async getConnections(): Promise<ConnectionNode[]> {
     try {
       const res = await fetch(`${this.baseUrl}/api/db/connections`);
@@ -95,6 +151,8 @@ export class ConnectionTreeProvider {
         connectionId: c.id,
         connectionType: c.type,
         connectionColor: c.color,
+        connectionReadonly: c.readonly,
+        groupName: c.group_name,
       }));
     } catch {
       return [];
@@ -114,6 +172,7 @@ export class ConnectionTreeProvider {
         connectionName: conn.name,
         connectionType: conn.connectionType,
         schemaName: t.schema,
+        rowCount: t.rowCount,
       }));
     } catch {
       return [];

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; }
 

package/src/web/components/layout/mobile-nav.tsx

@@ -116,8 +116,8 @@ export function MobileNav({ onMenuPress, onProjectsPress }: MobileNavProps) {
       <div className="flex items-center h-12">
         {/* Fixed section: Menu + Project + Add — curved right edge */}
         <div className={cn(
-          "flex items-center shrink-0 bg-background relative z-10 rounded-r-2xl border-r border-border transition-shadow duration-200",
-          canScrollLeft && "shadow-[6px_0_12px_-4px_rgba(0,0,0,0.12)]",
+          "flex items-center shrink-0 bg-background relative z-10 transition-all duration-200",
+          canScrollLeft ? "rounded-r-2xl shadow-[6px_0_12px_-4px_rgba(0,0,0,0.12)]" : "border-r border-border",
         )}>
           <button onClick={onMenuPress} className="flex items-center justify-center size-12 shrink-0 text-text-secondary">
             <Menu className="size-5" />
@@ -156,9 +156,9 @@ export function MobileNav({ onMenuPress, onProjectsPress }: MobileNavProps) {
           </button>
         </div>
 
-        {/* Tab list — scrollable */}
-        <div className="flex-1 min-w-0 relative flex items-center h-12">
-          <div ref={mobileScrollRef} className="flex-1 min-w-0 flex items-center h-12 overflow-x-auto scrollbar-none">
+        {/* Tab list — overlaps under curved edge so tabs slide beneath it */}
+        <div className="flex-1 min-w-0 relative flex items-center h-12 -ml-4">
+          <div ref={mobileScrollRef} className="flex-1 min-w-0 flex items-center h-12 overflow-x-auto scrollbar-none pl-4">
           {tabs.map((tab) => {
             const Icon = TAB_ICONS[tab.type];
             const isActive = tab.id === activeTabId;