@hienlh/ppm 0.23.12 → 0.23.14

package/src/web/lib/db-tabs.ts

@@ -0,0 +1,273 @@
+/**
+ * Database tabs as data. Every one of them talks to a target: a saved connection — one of its
+ * server's databases when `database` is set — or a SQLite file opened by its path, which the server
+ * serves under the connection id `file` and checks again on every request
+ * (`src/services/database/file-database.ts`). This file builds their URLs, their ids — so a table,
+ * its structure, one object's SQL or a query lands on one tab however it was opened — and the
+ * upgrade of tabs saved before these types existed.
+ *
+ * Pure: it imports no store, so it runs under `bun:test`.
+ */
+import { randomId } from "@/lib/utils";
+import { isStructureTabDirty } from "@/lib/db-table-edit";
+import type { DbObjectKind } from "../../shared/db-structure";
+
+export type DbTarget =
+  | { kind: "connection"; connectionId: number; database?: string }
+  | { kind: "file"; path: string; projectName?: string };
+
+export type DbTabType = "database" | "db-structure" | "db-sql" | "db-query";
+
+/** The scripts a SQL tab can show, and open in a Query tab. */
+export type DbScriptKind = "create" | "select" | "insert";
+
+/** The `:id` the server serves a database file under (`FILE_CONNECTION_ID`). */
+const FILE_CONNECTION_ID = "file";
+
+const OBJECT_KINDS: ReadonlySet<string> = new Set<DbObjectKind>(["table", "view", "matview", "function", "procedure", "trigger", "sequence"]);
+
+/** Tables, views and materialized views share one namespace in every engine, so one id covers whichever it is. */
+const RELATION_KINDS: ReadonlySet<string> = new Set<DbObjectKind>(["table", "view", "matview"]);
+
+/** A saved connection's id, also as the digits an older tab or a URL may hold it as. */
+function connectionIdOf(value: unknown): number | null {
+  const id = typeof value === "string" && /^\d+$/.test(value) ? Number(value) : value;
+  return typeof id === "number" && Number.isInteger(id) && id > 0 ? id : null;
+}
+
+/** The target a tab's metadata names, or null for one naming none. */
+export function targetOf(metadata: Record<string, unknown> | undefined): DbTarget | null {
+  const file = metadata?.dbFile;
+  if (file && typeof file === "object") {
+    const { path, projectName } = file as Record<string, unknown>;
+    if (typeof path !== "string" || !path) return null;
+    return { kind: "file", path, ...(typeof projectName === "string" && projectName ? { projectName } : {}) };
+  }
+  const id = connectionIdOf(metadata?.connectionId);
+  if (id === null) return null;
+  const database = metadata?.database;
+  return { kind: "connection", connectionId: id, ...(typeof database === "string" && database ? { database } : {}) };
+}
+
+/** The metadata fields that name `t` on a tab. */
+export function targetFields(t: DbTarget): Record<string, unknown> {
+  return t.kind === "file"
+    ? { dbFile: { path: t.path, ...(t.projectName ? { projectName: t.projectName } : {}) } }
+    : { connectionId: t.connectionId, ...(t.database ? { database: t.database } : {}) };
+}
+
+export function sameTarget(a: DbTarget | null, b: DbTarget | null): boolean {
+  if (!a || !b) return false;
+  if (a.kind === "file") return b.kind === "file" && a.path === b.path && (a.projectName ?? "") === (b.projectName ?? "");
+  return b.kind === "connection" && a.connectionId === b.connectionId && (a.database ?? "") === (b.database ?? "");
+}
+
+/**
+ * `/api/db/connections/<id><path>` for `t`: a saved connection's with its `?database=`, a file's
+ * under the id `file` with its `?path=` and `?project=`. `path` may carry a query string of its own.
+ */
+export function targetUrl(t: DbTarget, path = ""): string {
+  const url = `/api/db/connections/${t.kind === "file" ? FILE_CONNECTION_ID : t.connectionId}${path}`;
+  const params: [string, string][] = t.kind === "file"
+    ? [["path", t.path], ...(t.projectName ? [["project", t.projectName] as [string, string]] : [])]
+    : t.database !== undefined ? [["database", t.database]] : [];
+  if (params.length === 0) return url;
+  return `${url}${url.includes("?") ? "&" : "?"}${params.map(([k, v]) => `${k}=${encodeURIComponent(v)}`).join("&")}`;
+}
+
+/** A file's name, which a tab on it shows where a saved connection's tab shows the connection's. */
+export function fileDisplayName(path: string): string {
+  return path.slice(Math.max(path.lastIndexOf("/"), path.lastIndexOf("\\")) + 1) || path;
+}
+
+/** What a tab calls where it is: the connection's name — or the file's — then the database when it is not the connection's own. */
+export function targetLabel(t: DbTarget | null, connectionName: string | undefined): string {
+  const name = t?.kind === "file" ? fileDisplayName(t.path) : connectionName ?? "Database";
+  return t?.kind === "connection" && t.database ? `${name}/${t.database}` : name;
+}
+
+/** A tab's title for one table: where it is, then the table. The Structure and SQL tabs share it, as DBGate's do; their icons tell them apart. */
+export function dbObjectTabTitle(t: DbTarget | null, connectionName: string | undefined, name: string): string {
+  return `${targetLabel(t, connectionName)} · ${name}`;
+}
+
+// ─── Ids ─────────────────────────────────────────────────────────────────────
+
+const part = (v: unknown) => encodeURIComponent(typeof v === "string" ? v : "");
+
+/**
+ * The part of a tab id naming its target — `<connectionId>:<database>`, or `file:<project>:<path>` —
+ * and the key what is kept per target is kept under.
+ */
+export function targetKey(t: DbTarget | null): string {
+  if (!t) return "default:";
+  return t.kind === "file" ? `file:${part(t.projectName)}:${part(t.path)}` : `${t.connectionId}:${part(t.database)}`;
+}
+
+/**
+ * One tab per table's data, per table's structure and per object's SQL, as DBGate keys them — the
+ * target, the schema and the name, every part URI-encoded so none holds the `:` between them. A
+ * query tab is its own, whatever it runs against, and so is a table's data opened with an
+ * `instance`: the row a foreign key refers to, which DBGate always opens in a new tab.
+ */
+export function dbTabId(type: DbTabType, m: Record<string, unknown> | undefined): string {
+  if (type === "db-query") return `db-query:${part(m?.queryId) || randomId()}`;
+  // A table not created yet has no name to key it by; each New table is a tab of its own.
+  if (type === "db-structure" && typeof m?.newTableId === "string" && m.newTableId) return `db-structure:new:${part(m.newTableId)}`;
+  const where = targetKey(targetOf(m));
+  const schema = part(m?.schemaName);
+  if (type === "db-sql") {
+    const kind = typeof m?.objectKind === "string" && RELATION_KINDS.has(m.objectKind) ? "table" : part(m?.objectKind);
+    return `db-sql:${where}:${schema}:${kind}:${part(m?.objectName)}:${part(m?.objectArgs)}:${part(m?.objectTable)}`;
+  }
+  const instance = type === "database" && typeof m?.instance === "string" && m.instance ? `:${part(m.instance)}` : "";
+  return `${type}:${where}:${schema}:${part(m?.tableName)}${instance}`;
+}
+
+function decodePart(s: string): string | null {
+  try {
+    return decodeURIComponent(s);
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * The metadata a tab id stands for, read back out of a URL (`/project/<p>/<type>/<rest of the id>`);
+ * null for one that names nothing to open. A query tab cannot be rebuilt from its id: its SQL is not in it,
+ * nor a New table's (`db-structure:new:…`), whose table exists only in the tab.
+ */
+export function dbTabMetadataFromId(type: DbTabType, identifier: string): Record<string, unknown> | null {
+  if (type === "db-query") return null;
+  const parts = identifier.split(":").map(decodePart);
+  if (parts.some((p) => p === null)) return null;
+  const [first = "", ...rest] = parts as string[];
+  let target: DbTarget;
+  let tail: string[];
+  if (first === FILE_CONNECTION_ID) {
+    const [projectName = "", path = "", ...more] = rest;
+    if (!path) return null;
+    target = { kind: "file", path, ...(projectName ? { projectName } : {}) };
+    tail = more;
+  } else {
+    const id = connectionIdOf(first);
+    if (id === null) return null;
+    const [database = "", ...more] = rest;
+    target = { kind: "connection", connectionId: id, ...(database ? { database } : {}) };
+    tail = more;
+  }
+  if (type === "db-sql") {
+    const [schemaName = "", objectKind = "", objectName = "", objectArgs = "", objectTable = ""] = tail;
+    if (!OBJECT_KINDS.has(objectKind) || !objectName) return null;
+    const routine = objectKind === "function" || objectKind === "procedure";
+    return {
+      ...targetFields(target), schemaName, objectKind, objectName,
+      ...(routine ? { objectArgs } : {}), ...(objectTable ? { objectTable } : {}),
+    };
+  }
+  const [schemaName = "", tableName = "", instance = ""] = tail;
+  if (!tableName) return null;
+  return { ...targetFields(target), schemaName, tableName, ...(type === "database" && instance ? { instance } : {}) };
+}
+
+// ─── Query tabs ──────────────────────────────────────────────────────────────
+
+/** What a new query tab holds: `sql` in its editor, `run` when opening it should also run it. */
+export function queryTabMetadata(sql: string, queryNumber: number, opts: { run?: boolean } = {}): Record<string, unknown> {
+  return { queryId: randomId(), queryNumber, currentSql: sql, openedSql: sql, ...(opts.run ? { runOnOpen: true } : {}) };
+}
+
+/** The tab holds SQL typed since it opened or was last saved, which nothing else keeps: DBGate's unsaved dot. */
+export function isQueryTabDirty(m: Record<string, unknown> | undefined): boolean {
+  if (typeof m?.currentSql !== "string") return false;
+  return m.currentSql !== (typeof m.openedSql === "string" ? m.openedSql : "");
+}
+
+/** DBGate's unsaved dot, on whichever database tab holds work nothing else keeps. */
+export function isDbTabDirty(type: string, m: Record<string, unknown> | undefined): boolean {
+  if (type === "db-query") return isQueryTabDirty(m);
+  if (type === "db-structure") return isStructureTabDirty(m);
+  return false;
+}
+
+/** The next "Query N": one past the highest a tab already has, as DBGate numbers them. */
+export function nextQueryNumber(tabs: Iterable<{ type: string; metadata?: Record<string, unknown> }>): number {
+  let max = 0;
+  for (const tab of tabs) {
+    const n = tab.type === "db-query" ? tab.metadata?.queryNumber : undefined;
+    if (typeof n === "number" && n > max) max = n;
+  }
+  return max + 1;
+}
+
+// ─── Tabs saved by older versions ────────────────────────────────────────────
+
+interface StoredTab {
+  id: string;
+  type: string;
+  metadata?: Record<string, unknown>;
+}
+
+/** The fields of a tab that say where it is, carried over when it changes type. */
+function identityOf(m: Record<string, unknown>): Record<string, unknown> {
+  const id = connectionIdOf(m.connectionId);
+  const keep: Record<string, unknown> = {};
+  for (const k of ["connectionName", "dbType", "connectionColor", "database", "dbFile"]) if (m[k] !== undefined) keep[k] = m[k];
+  return { ...keep, ...(id !== null ? { connectionId: id } : {}) };
+}
+
+function asQuery(m: Record<string, unknown>): { type: "db-query"; metadata: Record<string, unknown> } {
+  const sql = typeof m.currentSql === "string" ? m.currentSql : typeof m.initialSql === "string" ? m.initialSql : "";
+  return {
+    type: "db-query",
+    metadata: {
+      ...identityOf(m),
+      queryId: typeof m.queryId === "string" && m.queryId ? m.queryId : randomId(),
+      ...(typeof m.queryNumber === "number" ? { queryNumber: m.queryNumber } : {}),
+      // Kept as it was, so it opens clean: what an older tab held was its own to keep.
+      currentSql: sql, openedSql: sql,
+    },
+  };
+}
+
+/**
+ * A tab saved before the Structure, SQL and Query tabs existed, as it opens now — or null for one
+ * that cannot be opened any more. The `@panel` suffix of a tab opened in a second panel is kept.
+ *
+ * - `database` with no table (a query, or a connection opened with nothing picked) → `db-query`,
+ *   with its SQL;
+ * - `postgres` or `sqlite` on a saved connection (the old sidebar's tabs) → that table's `database`
+ *   tab, or a `db-query` when no table was open;
+ * - `postgres` on no saved connection is dropped: it named its server by a connection string, which
+ *   no tab keeps any more;
+ * - `sqlite` on a file stays, as the file's own tab; one on neither is dropped.
+ */
+export function upgradeDbTab<T extends StoredTab>(tab: T): T | null {
+  const m = tab.metadata ?? {};
+  const suffix = tab.id.includes("@") ? tab.id.slice(tab.id.indexOf("@")) : "";
+  const hasTable = typeof m.tableName === "string" && m.tableName !== "";
+  let next: { type: DbTabType; metadata: Record<string, unknown> } | null;
+
+  if (tab.type === "database") {
+    if (!hasTable) {
+      next = asQuery(m);
+    } else {
+      // A URL used to open one with the id as a string, which matches no connection.
+      const id = connectionIdOf(m.connectionId);
+      if (id === null || id === m.connectionId) return tab;
+      next = { type: "database", metadata: { ...m, connectionId: id } };
+    }
+  } else if (tab.type === "postgres" || tab.type === "sqlite") {
+    if (connectionIdOf(m.connectionId) === null) {
+      if (tab.type === "sqlite" && typeof m.filePath === "string" && m.filePath) return tab;
+      return null;
+    }
+    const dbType = m.dbType ?? tab.type;
+    next = hasTable
+      ? { type: "database", metadata: { ...identityOf(m), dbType, schemaName: typeof m.schemaName === "string" ? m.schemaName : "", tableName: m.tableName } }
+      : { type: "db-query", metadata: { ...asQuery(m).metadata, dbType } };
+  } else {
+    return tab;
+  }
+  return { ...tab, id: `${dbTabId(next.type, next.metadata)}${suffix}`, type: next.type, metadata: next.metadata };
+}

package/src/web/lib/design/api-design-settings.ts

@@ -46,3 +46,14 @@ export async function saveDesignInstructions(instructions: string): Promise<stri
   const data = await api.put<{ instructions: string }>("/api/settings/design", { instructions });
   return data.instructions;
 }
+
+export interface DesignSkillInstallResponse {
+  results: Array<{ runtime: "claude" | "codex"; dir: string; installed: boolean; companions: string[] }>;
+  /** Whether python3 (or python) is on the host's PATH — the skill's scripts need it. */
+  python: boolean;
+}
+
+/** Install the suggested design skill for every design runtime the host has. */
+export async function installDesignSkill(): Promise<DesignSkillInstallResponse> {
+  return api.post<DesignSkillInstallResponse>("/api/settings/design/skill");
+}

package/src/web/lib/design/design-layout-mode.ts

@@ -51,6 +51,13 @@ export interface DesignLayoutInput {
   pane: DesignPane;
   /** The canvas covers the whole window. */
   expanded: boolean;
+  /**
+   * The design is in a floating window. The window has its own fixed arrangement — canvas
+   * left, chat in a column on the right — so neither the width nor the pinned layout apply.
+   */
+  windowed?: boolean;
+  /** In a window: the chat column is open. */
+  windowChat?: boolean;
 }
 
 export interface DesignLayout {
@@ -62,10 +69,18 @@ export interface DesignLayout {
   /** The layout menu's checked item, which follows what is on screen. */
   menuValue: DesignLayoutOverride;
   expanded: boolean;
+  /** Laid out as a window: canvas first, chat a fixed column after it, toggled from the toolbar. */
+  windowed: boolean;
+  /** In a window, whether the chat column is open (false outside a window). */
+  windowChat: boolean;
 }
 
 export function resolveDesignLayout(input: DesignLayoutInput): DesignLayout {
   const { override, isPhone, autoSplit, expanded } = input;
+  if (input.windowed && !isPhone) {
+    const chat = input.windowChat !== false && !expanded;
+    return { split: chat, pane: "canvas", switcher: null, menuValue: override, expanded, windowed: true, windowChat: chat };
+  }
   // An expanded canvas lives inside the canvas pane, so that pane has to be the visible one.
   const pane: DesignPane = expanded ? "canvas" : input.pane;
   // A phone ignores a pinned split: two panes do not fit, and the pin belongs to this device's
@@ -75,5 +90,5 @@ export function resolveDesignLayout(input: DesignLayoutInput): DesignLayout {
   // A pinned single pane still lets the user peek at the other pane; the menu then names the
   // pane actually shown, so it never claims "Canvas only" over a visible chat.
   const menuValue = override === "canvas" || override === "chat" ? pane : override;
-  return { split, pane, switcher, menuValue, expanded };
+  return { split, pane, switcher, menuValue, expanded, windowed: false, windowChat: false };
 }

package/src/web/lib/design/design-view-prefs.ts

@@ -16,12 +16,21 @@ const STORAGE_KEY = "ppm-design-view-prefs";
 export const DEFAULT_CHAT_PERCENT = 38;
 export const MIN_CHAT_PERCENT = 20;
 export const MAX_CHAT_PERCENT = 70;
+/**
+ * The chat column's width in a design *window*, in px: a fixed column rather than a share,
+ * because a window is resized far more often than the column is, and the chat should not
+ * swell and shrink with it. It never takes more than half the window either (see the layout).
+ */
+export const DEFAULT_WINDOW_CHAT_WIDTH = 380;
+export const MIN_WINDOW_CHAT_WIDTH = 280;
+export const MAX_WINDOW_CHAT_WIDTH = 440;
 /** Designs whose frame is remembered; the least recently changed are forgotten first. */
 export const MAX_REMEMBERED_FRAMES = 50;
 
 export interface DesignViewPrefs {
   layout: DesignLayoutOverride;
   chatPercent: number;
+  windowChatWidth: number;
   /** `<project>/<slug>` → frame, oldest first. */
   frames: Record<string, DeviceFrameId>;
   /** `<project>/<slug>` → the variant file on screen, oldest first. Checked against the list on use. */
@@ -29,7 +38,7 @@ export interface DesignViewPrefs {
 }
 
 export function defaultDesignViewPrefs(): DesignViewPrefs {
-  return { layout: "auto", chatPercent: DEFAULT_CHAT_PERCENT, frames: {}, variants: {} };
+  return { layout: "auto", chatPercent: DEFAULT_CHAT_PERCENT, windowChatWidth: DEFAULT_WINDOW_CHAT_WIDTH, frames: {}, variants: {} };
 }
 
 /** Newest-last entries of a stored map, the ones failing `keep` dropped, at most MAX_REMEMBERED_FRAMES. */
@@ -48,6 +57,11 @@ export function clampChatPercent(value: unknown): number {
   return Math.min(MAX_CHAT_PERCENT, Math.max(MIN_CHAT_PERCENT, Math.round(value)));
 }
 
+export function clampWindowChatWidth(value: unknown): number {
+  if (typeof value !== "number" || !Number.isFinite(value)) return DEFAULT_WINDOW_CHAT_WIDTH;
+  return Math.min(MAX_WINDOW_CHAT_WIDTH, Math.max(MIN_WINDOW_CHAT_WIDTH, Math.round(value)));
+}
+
 export function parseDesignViewPrefs(raw: string | null): DesignViewPrefs {
   if (!raw) return defaultDesignViewPrefs();
   let data: unknown;
@@ -61,6 +75,7 @@ export function parseDesignViewPrefs(raw: string | null): DesignViewPrefs {
   const layout = isDesignLayoutOverride(obj.layout) ? obj.layout : "auto";
   return {
     layout, chatPercent: clampChatPercent(obj.chatPercent),
+    windowChatWidth: clampWindowChatWidth(obj.windowChatWidth),
     frames: rememberedMap(obj.frames, isDeviceFrameId),
     variants: rememberedMap(obj.variants, isStoredVariant),
   };
@@ -93,6 +108,10 @@ export function withChatPercent(prefs: DesignViewPrefs, percent: number): Design
   return { ...prefs, chatPercent: clampChatPercent(percent) };
 }
 
+export function withWindowChatWidth(prefs: DesignViewPrefs, width: number): DesignViewPrefs {
+  return { ...prefs, windowChatWidth: clampWindowChatWidth(width) };
+}
+
 export function withLayout(prefs: DesignViewPrefs, layout: DesignLayoutOverride): DesignViewPrefs {
   return { ...prefs, layout };
 }

package/src/web/lib/design/open-design-tab.ts

@@ -1,4 +1,8 @@
 import { usePanelStore } from "@/stores/panel-store";
+import { windowIdFromPanelId } from "@/stores/panel-utils";
+import { useSettingsStore } from "@/stores/settings-store";
+import { useWindowStore } from "@/components/floating-window/window-store";
+import { cascadeSpawnRect } from "@/components/floating-window/window-geometry";
 import { currentTabMetadata, patchTabMetadata } from "@/lib/patch-tab-metadata";
 import { designTabMetadata } from "./design-tab-metadata";
 
@@ -13,14 +17,24 @@ export interface OpenDesignTabInput {
   panelId?: string;
   /** Just created: skip looking up its latest session, it has none. */
   fresh?: boolean;
+  /**
+   * Stay in `panelId` as a tab even where designs open in windows: the design is taking the
+   * place of a tab there (a chat that turned out to be a design session), and moving it out
+   * would leave that panel empty.
+   */
+  inPlace?: boolean;
 }
 
 /**
  * Open (or focus) a design's tab. There is one tab per design; opening it again focuses
  * the existing tab, and asking for a particular session switches that tab to it.
+ *
+ * On a desktop with Settings → Design → "Open designs in a window" on, a design that was
+ * not open yet goes straight into a floating window of its own (see {@link showInWindow}).
  */
 export function openDesignTab(input: OpenDesignTabInput): string {
-  const { projectName, slug, title, sessionId, providerId, panelId, fresh } = input;
+  const { projectName, slug, title, sessionId, providerId, panelId, fresh, inPlace } = input;
+  const wasOpen = isDesignOpen(projectName, slug);
   const id = usePanelStore.getState().openTab({
     type: "design",
     title: title || slug,
@@ -28,6 +42,7 @@ export function openDesignTab(input: OpenDesignTabInput): string {
     closable: true,
     metadata: designTabMetadata({ projectName, designSlug: slug, sessionId, providerId, fresh }),
   }, panelId);
+  if (id) showInWindow(id, wasOpen || Boolean(inPlace));
   if (!id || !sessionId) return id;
 
   // The tab already existed, so the panel store focused it and ignored the metadata above.
@@ -44,6 +59,44 @@ export function openDesignTab(input: OpenDesignTabInput): string {
   return id;
 }
 
+/** Same match as the panel store's one-tab-per-design rule: slug and project, any panel. */
+function isDesignOpen(projectName: string, slug: string): boolean {
+  return Object.values(usePanelStore.getState().panels).some((p) => p.tabs.some((t) =>
+    t.type === "design" && t.metadata?.designSlug === slug && (t.projectId ?? t.metadata?.projectName) === projectName));
+}
+
+/**
+ * Put a design on screen in its window.
+ *
+ * Already in a window: that window comes forward, out of the dock if it was minimized. Just
+ * opened: it moves from the tab strip into a new window, which is its home — closing the
+ * window closes the design. Open in the grid already (the user docked it there, or the
+ * setting was off when it opened): it stays where the user put it.
+ *
+ * A phone has no windows, and `popOutTab` refuses there; at the window cap it refuses too,
+ * and the design simply stays a tab.
+ */
+function showInWindow(tabId: string, wasOpen: boolean): void {
+  const panelId = usePanelStore.getState().getPanelForTab(tabId)?.id;
+  if (!panelId) return;
+  const windowId = windowIdFromPanelId(panelId);
+  if (windowId) {
+    useWindowStore.getState().focus(windowId);
+    return;
+  }
+  if (wasOpen || !useSettingsStore.getState().designWindows) return;
+  const windows = useWindowStore.getState();
+  const rect = cascadeSpawnRect(
+    Object.values(windows.windows).map((w) => w.rect),
+    windows.bounds,
+    { w: Math.round(windows.bounds.w * DESIGN_WINDOW_SHARE.w), h: Math.round(windows.bounds.h * DESIGN_WINDOW_SHARE.h) },
+  );
+  usePanelStore.getState().popOutTab(tabId, panelId, { closeTabsOnClose: true, rect });
+}
+
+/** A design window's first size, as a share of the work area: a canvas wants room. */
+const DESIGN_WINDOW_SHARE = { w: 0.72, h: 0.84 };
+
 /** The epoch after the one `metadata` carries; the design tab keys its chat on it. */
 export function nextChatEpoch(metadata: Record<string, unknown> | undefined): number {
   const epoch = metadata?.designChatEpoch;

package/src/web/lib/file-icon-name.ts

@@ -9,6 +9,7 @@
  */
 import { basename } from "@/lib/utils";
 import {
+  DB_ENGINE_ICONS,
   DEFAULT_FILE_ICON,
   DEFAULT_FOLDER_ICON,
   DEFAULT_FOLDER_OPEN_ICON,
@@ -60,3 +61,8 @@ export function folderIconName(path: string, open = false): string {
   const table = open ? FOLDER_OPEN_ICONS : FOLDER_ICONS;
   return table[name] ?? (open ? DEFAULT_FOLDER_OPEN_ICON : DEFAULT_FOLDER_ICON);
 }
+
+/** A database engine's logo; an engine with none gets the generic SQL glyph. */
+export function dbEngineIconName(type: string): string {
+  return DB_ENGINE_ICONS[type] ?? EXTENSION_ICONS.sql ?? DEFAULT_FILE_ICON;
+}