sqlite-hub 0.9.3 → 0.9.6

package/.github/workflows/ci.yml

@@ -0,0 +1,36 @@
+name: CI
+
+on:
+    pull_request:
+    push:
+        branches:
+            - main
+
+permissions:
+    contents: read
+
+jobs:
+    build-test-audit:
+        runs-on: ubuntu-latest
+
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v4
+
+            - name: Setup Node
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 26
+                  cache: npm
+
+            - name: Install dependencies
+              run: npm ci
+
+            - name: Build
+              run: npm run build
+
+            - name: Test
+              run: npm test
+
+            - name: Dependency audit
+              run: npm run audit

package/README.md

@@ -66,13 +66,13 @@ brew install sqlite-hub
 ### NPM
 
 ```bash
-npm install -g sqlit-hub
+npm install -g sqlite-hub
 ```
 
 ## alternative port
 
 ```bash
-sqlit-hub --port:4174
+sqlite-hub --port:4174
 ```
 
 ## CLI Interface

package/bin/sqlite-hub.js

@@ -334,7 +334,7 @@ async function main() {
                     } else if (stmt.kind === 'mutation') {
                         console.log(`Changes: ${stmt.changes}`);
                         if (stmt.lastInsertRowid) {
-                            console.log(`Last insert rowid: ${stmt.lastInsertRowid}`);
+                            console.log('Last insert rowid:', stmt.lastInsertRowid);
                         }
                     }
                 });

package/frontend/index.html

@@ -6,164 +6,8 @@
     <title>SQLite Hub</title>
     <link href="/assets/images/logo_raw.png" rel="icon" type="image/png" />
     <link href="/assets/images/logo_raw.png" rel="shortcut icon" type="image/png" />
-    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
-    <link
-      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800&family=Roboto+Mono:wght@400;500;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
-      rel="stylesheet"
-    />
-    <script id="tailwind-config">
-      tailwind.config = {
-        darkMode: "class",
-        theme: {
-          extend: {
-            colors: {
-              "on-secondary-fixed": "#1c1b1b",
-              background: "rgb(var(--rgb-background) / <alpha-value>)",
-              "inverse-primary": "#6a5f00",
-              "primary-fixed": "#fde403",
-              tertiary: "#fbfffe",
-              outline: "#979177",
-              "on-secondary": "#313030",
-              "error-container": "#93000a",
-              "on-primary-fixed-variant": "#504700",
-              "on-tertiary-container": "#006f72",
-              "on-tertiary-fixed-variant": "#004f51",
-              "secondary-fixed-dim": "#c8c6c5",
-              "tertiary-fixed-dim": "#00dce1",
-              "on-background": "rgb(var(--rgb-on-surface) / <alpha-value>)",
-              "surface-tint": "#dec800",
-              "primary-fixed-dim": "#dec800",
-              "on-surface": "rgb(var(--rgb-on-surface) / <alpha-value>)",
-              "surface-container-low": "rgb(var(--rgb-surface-low) / <alpha-value>)",
-              "on-tertiary": "#003738",
-              "surface-container": "rgb(var(--rgb-surface-container) / <alpha-value>)",
-              "on-surface-variant": "rgb(var(--rgb-on-surface-variant) / <alpha-value>)",
-              "on-primary-container": "#706400",
-              "on-error": "#690005",
-              "surface-container-high": "rgb(var(--rgb-surface-high) / <alpha-value>)",
-              "surface-container-highest": "rgb(var(--rgb-surface-highest) / <alpha-value>)",
-              error: "rgb(var(--rgb-error) / <alpha-value>)",
-              primary: "#fffeff",
-              "outline-variant": "rgb(var(--rgb-outline) / <alpha-value>)",
-              "on-error-container": "#ffdad6",
-              "on-secondary-fixed-variant": "#474746",
-              "surface-container-lowest": "rgb(var(--rgb-surface-lowest) / <alpha-value>)",
-              "inverse-surface": "#e5e2e1",
-              surface: "rgb(var(--rgb-surface) / <alpha-value>)",
-              "tertiary-container": "#04faff",
-              "on-tertiary-fixed": "#002021",
-              "tertiary-fixed": "#2dfaff",
-              "surface-variant": "#353534",
-              "on-primary": "#373100",
-              "primary-container": "rgb(var(--rgb-primary) / <alpha-value>)",
-              "inverse-on-surface": "#313030",
-              secondary: "#c8c6c5",
-              "on-secondary-container": "#b7b5b4",
-              "on-primary-fixed": "#201c00",
-              "secondary-container": "#474746",
-              "surface-dim": "rgb(var(--rgb-surface) / <alpha-value>)",
-              "surface-bright": "rgb(var(--rgb-surface-bright) / <alpha-value>)",
-              "secondary-fixed": "#e5e2e1",
-            },
-            fontFamily: {
-              headline: ["Space Grotesk"],
-              body: ["Inter"],
-              label: ["Inter"],
-              mono: ["Roboto Mono"],
-            },
-            borderRadius: {
-              DEFAULT: "0px",
-              lg: "0px",
-              xl: "0px",
-              full: "9999px",
-            },
-          },
-        },
-      };
-    </script>
-    <style type="text/tailwindcss">
-      @layer components {
-        .signature-button {
-          @apply inline-flex items-center justify-center gap-2 h-[var(--control-height)] min-h-[var(--control-height)] border border-primary-container bg-primary-container px-[var(--control-padding-inline)] font-headline text-xs font-bold uppercase tracking-[0.16em] text-on-primary transition-all;
-          box-shadow: 0 0 18px -10px rgb(var(--rgb-primary) / 0.7);
-          clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
-        }
-
-        .signature-button:hover {
-          @apply -translate-y-px bg-primary-fixed text-on-primary;
-          border-color: rgb(var(--rgb-primary) / 0.55);
-          box-shadow: 0 0 24px -8px rgb(var(--rgb-primary) / 0.92);
-          filter: brightness(1.03);
-        }
-
-        .signature-button:disabled,
-        .signature-button[aria-disabled="true"] {
-          @apply cursor-not-allowed opacity-45;
-          box-shadow: none;
-          filter: none;
-          transform: none;
-        }
-
-        .signature-button .material-symbols-outlined {
-          @apply text-base;
-        }
-
-        .standard-button {
-          @apply inline-flex items-center justify-center gap-2 h-[var(--control-height)] min-h-[var(--control-height)] border border-outline-variant/20 bg-surface-container px-[var(--control-padding-inline)] font-mono text-[10px] font-bold uppercase tracking-[0.16em] text-on-surface transition-colors;
-        }
-
-        .standard-button:hover {
-          @apply bg-surface-container-highest text-primary-container;
-          border-color: var(--primary-alpha-24);
-        }
-
-        .standard-button.is-active {
-          @apply bg-surface-container-high text-primary-container;
-          border-color: var(--primary-alpha-30);
-        }
-
-        .standard-button:disabled,
-        .standard-button[aria-disabled="true"] {
-          @apply cursor-not-allowed opacity-40;
-        }
-
-        .standard-button .material-symbols-outlined {
-          @apply text-base;
-        }
-
-        .standard-checkbox {
-          @apply inline-flex w-full items-center gap-3 min-h-[var(--control-height)] border border-outline-variant/10 bg-surface-container-lowest px-[var(--control-padding-inline)] text-sm text-on-surface;
-        }
-
-        .standard-checkbox input[type="checkbox"] {
-          @apply m-0 rounded-none border-outline bg-surface-container-lowest text-primary-container focus:ring-primary-container;
-          accent-color: var(--color-primary-container);
-        }
-
-        .standard-checkbox.is-disabled,
-        .standard-checkbox:has(input:disabled) {
-          @apply opacity-45;
-        }
-
-        .delete-button {
-          @apply inline-flex items-center justify-center gap-2 h-[var(--control-height)] min-h-[var(--control-height)] border border-error/25 bg-error-container/10 px-[var(--control-padding-inline)] font-mono text-[10px] font-bold uppercase tracking-[0.16em] text-error transition-all;
-        }
-
-        .delete-button:hover {
-          @apply -translate-y-px border-error bg-error-container/20 text-error;
-        }
-
-        .delete-button:disabled,
-        .delete-button[aria-disabled="true"] {
-          @apply cursor-not-allowed opacity-45;
-          transform: none;
-        }
-      }
-    </style>
+    <link href="/vendor/material-symbols/outlined.css" rel="stylesheet" />
+    <link href="styles/tailwind.generated.css" rel="stylesheet" />
     <link href="styles/tokens.css" rel="stylesheet" />
     <link href="styles/base.css" rel="stylesheet" />
     <link href="styles/utilities.css" rel="stylesheet" />

package/frontend/js/app.js

@@ -122,11 +122,15 @@ import { renderOverviewView } from './views/overview.js';
 import { renderSettingsView } from './views/settings.js';
 import { renderStructureView } from './views/structure.js';
 import { renderTableDesignerView } from './views/tableDesigner.js';
+import {
+    replaceChildrenFromRenderedMarkup,
+    replaceElementFromRenderedMarkup,
+} from './utils/dom.js';
 import { highlightSql } from './utils/format.js';
 
 const appRoot = document.querySelector('#app');
 
-appRoot.innerHTML = renderAppShell();
+replaceChildrenFromRenderedMarkup(appRoot, renderAppShell());
 
 const shellRefs = {
     shell: document.querySelector('.app-shell'),
@@ -186,7 +190,7 @@ function syncQueryEditorHighlight(textarea) {
         return;
     }
 
-    highlightNode.innerHTML = renderQueryHighlightMarkup(textarea.value);
+    replaceChildrenFromRenderedMarkup(highlightNode, renderQueryHighlightMarkup(textarea.value));
 }
 
 function syncQueryEditorScroll(textarea) {
@@ -258,12 +262,20 @@ function syncMediaTaggingCurrentMediaUi(button, detailsVisible) {
     const nextVisible = Boolean(detailsVisible);
     const expandedLabel = button.dataset.expandedLabel || 'Shrink Media Viewer';
     const collapsedLabel = button.dataset.collapsedLabel || 'Show Media Viewer';
-    const expandedMarkup = `<span class="material-symbols-outlined">visibility_off</span> ${expandedLabel}`;
-
     preview.classList.toggle('media-tagging-preview--meta-hidden', !nextVisible);
     button.dataset.nextValue = nextVisible ? 'false' : 'true';
     button.setAttribute('aria-expanded', nextVisible ? 'true' : 'false');
-    button.innerHTML = nextVisible ? expandedMarkup : collapsedLabel;
+
+    if (nextVisible) {
+        const icon = document.createElement('span');
+
+        icon.className = 'material-symbols-outlined';
+        icon.textContent = 'visibility_off';
+        button.replaceChildren(icon, document.createTextNode(` ${expandedLabel}`));
+    } else {
+        button.textContent = collapsedLabel;
+    }
+
     return true;
 }
 
@@ -350,7 +362,7 @@ function syncDataRowSelectionUi(selectedRowIndex = null) {
     const panelMarkup = renderDataRowEditorPanel(getState());
     const panelOpen = Boolean(panelMarkup);
 
-    shellRefs.panel.innerHTML = panelMarkup;
+    replaceChildrenFromRenderedMarkup(shellRefs.panel, panelMarkup);
     shellRefs.shell.classList.toggle('panel-open', panelOpen);
     lastRenderedPanelMarkup = panelMarkup;
     lastRenderedPanelOpen = panelOpen;
@@ -367,14 +379,21 @@ function syncQueryHistoryUi(historyId) {
 
     const historyItem = state.editor.history.find(entry => Number(entry.id) === numericId) ?? state.editor.historyDetail ?? null;
     const listItemNode = shellRefs.view.querySelector(
-        `[data-action="select-query-history-item"][data-history-id="${String(numericId)}"]`,
+        [
+            '[data-action="select-query-history-item"][data-history-id="',
+            String(numericId),
+            '"]',
+        ].join(''),
     )?.closest('.query-history-item');
 
     if (historyItem && listItemNode instanceof HTMLElement) {
-        listItemNode.outerHTML = renderQueryHistoryListItem(
-            historyItem,
-            state.editor.historyActiveId,
-            state.editor.historySelectedId,
+        replaceElementFromRenderedMarkup(
+            listItemNode,
+            renderQueryHistoryListItem(
+                historyItem,
+                state.editor.historyActiveId,
+                state.editor.historySelectedId,
+            ),
         );
     }
 
@@ -387,7 +406,7 @@ function syncQueryHistoryUi(historyId) {
         });
         const panelOpen = Boolean(panelMarkup);
 
-        shellRefs.panel.innerHTML = panelMarkup;
+        replaceChildrenFromRenderedMarkup(shellRefs.panel, panelMarkup);
         shellRefs.shell.classList.toggle('panel-open', panelOpen);
         lastRenderedPanelMarkup = panelMarkup;
         lastRenderedPanelOpen = panelOpen;
@@ -410,7 +429,7 @@ function syncQueryHistorySelectionUi(selectedHistoryId = null) {
     }
 
     if (selectedHistoryId === null) {
-        shellRefs.panel.innerHTML = '';
+        shellRefs.panel.replaceChildren();
         shellRefs.shell.classList.remove('panel-open');
         lastRenderedPanelMarkup = '';
         lastRenderedPanelOpen = false;
@@ -596,7 +615,7 @@ function patchChartsDetailUi(state) {
         return false;
     }
 
-    detailNode.innerHTML = renderChartsDetail(state);
+    replaceChildrenFromRenderedMarkup(detailNode, renderChartsDetail(state));
     syncChartsHistorySelectionUi(state);
     return true;
 }
@@ -972,7 +991,7 @@ function renderApp(state) {
         !lockedRouteChanged;
 
     if (shellMarkupUnchanged && toastMarkup !== lastRenderedToastMarkup) {
-        shellRefs.toast.innerHTML = toastMarkup;
+        replaceChildrenFromRenderedMarkup(shellRefs.toast, toastMarkup);
         lastRenderedToastMarkup = toastMarkup;
         return;
     }
@@ -1009,7 +1028,7 @@ function renderApp(state) {
     }
 
     if (topNavChanged) {
-        shellRefs.topNav.innerHTML = topNavMarkup;
+        replaceChildrenFromRenderedMarkup(shellRefs.topNav, topNavMarkup);
     }
 
     if (sidebarChanged) {
@@ -1019,16 +1038,16 @@ function renderApp(state) {
             syncSidebarActiveRoute(state.route.name);
 
         if (!sidebarSynced) {
-            shellRefs.sidebar.innerHTML = sidebarMarkup;
+            replaceChildrenFromRenderedMarkup(shellRefs.sidebar, sidebarMarkup);
         }
     }
 
     if (statusBarChanged) {
-        shellRefs.statusBar.innerHTML = statusBarMarkup;
+        replaceChildrenFromRenderedMarkup(shellRefs.statusBar, statusBarMarkup);
     }
 
     if (mainChanged && !mainPatched) {
-        shellRefs.view.innerHTML = main;
+        replaceChildrenFromRenderedMarkup(shellRefs.view, main);
     }
 
     if (mainChanged || lockedRouteChanged) {
@@ -1036,15 +1055,15 @@ function renderApp(state) {
     }
 
     if (panelChanged) {
-        shellRefs.panel.innerHTML = panel;
+        replaceChildrenFromRenderedMarkup(shellRefs.panel, panel);
     }
 
     if (modalChanged) {
-        shellRefs.modal.innerHTML = modalMarkup;
+        replaceChildrenFromRenderedMarkup(shellRefs.modal, modalMarkup);
     }
 
     if (toastMarkup !== lastRenderedToastMarkup) {
-        shellRefs.toast.innerHTML = toastMarkup;
+        replaceChildrenFromRenderedMarkup(shellRefs.toast, toastMarkup);
     }
 
     if (panelChanged || panelOpenChanged) {

package/frontend/js/components/connectionCard.js

@@ -13,92 +13,67 @@ export function renderConnectionCard(connection, activeConnectionId) {
     : Boolean(connection.isActive);
   const clipPath = "polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%)";
   const primaryActionLabel = isActive ? "Open Overview" : "Set Active";
+  const connectionId = escapeHtml(connection.id);
+  const logoMarkup = renderConnectionLogo(connection, {
+    containerClass: [
+      "clipped-corner flex h-10 w-10 items-center justify-center overflow-hidden transition-colors",
+      isActive ? "bg-primary-container" : "bg-surface-container-highest",
+    ].join(" "),
+    containerAttributes: ['style="--clip-path: ', clipPath, ';"'].join(""),
+    imageClassName: "h-full w-full object-cover",
+    iconClassName: isActive ? "text-on-primary" : "text-outline-variant",
+  });
 
-  return `
-    <article
-      class="connection-card clipped-corner ${isActive ? "is-active" : ""}"
-      style="--clip-path: ${clipPath};"
-    >
-      <div class="flex-1 p-6">
-        <div class="mb-6 flex items-start justify-between">
-          ${renderConnectionLogo(connection, {
-            containerClass: `clipped-corner flex h-10 w-10 items-center justify-center overflow-hidden transition-colors ${
-              isActive ? "bg-primary-container" : "bg-surface-container-highest"
-            }`,
-            containerAttributes: `style="--clip-path: ${clipPath};"`,
-            imageClassName: "h-full w-full object-cover",
-            iconClassName: isActive ? "text-on-primary" : "text-outline-variant",
-          })}
-          <div class="flex items-center gap-2">
-            ${renderStatusBadge(isActive ? "ACTIVE" : "RECENT", isActive ? "primary" : "muted")}
-            ${connection.readOnly ? renderStatusBadge("READ_ONLY", "alert") : ""}
-          </div>
-        </div>
-        <h3 class="mb-1 font-headline text-xl font-bold uppercase ${
-          isActive ? "text-[#FCE300]" : "text-on-surface"
-        }">
-          ${escapeHtml(connection.label)}
-        </h3>
-        <p
-          class="block overflow-hidden text-ellipsis whitespace-nowrap font-mono text-[10px] text-outline-variant"
-          title="${escapeHtml(connection.path)}"
-        >
-          ${escapeHtml(truncateMiddle(connection.path, 68))}
-        </p>
-        <div class="mt-8 grid grid-cols-2 gap-4">
-          <div>
-            <div class="mb-1 text-[9px] font-mono uppercase text-outline-variant">Allocation</div>
-            <div class="text-xs font-bold text-on-surface">${escapeHtml(
-              formatBytes(connection.sizeBytes)
-            )}</div>
-          </div>
-          <div>
-            <div class="mb-1 text-[9px] font-mono uppercase text-outline-variant">Last Modified</div>
-            <div class="text-xs font-bold text-on-surface">${escapeHtml(
-              formatDateTime(connection.lastModifiedAt)
-            )}</div>
-          </div>
-          <div>
-            <div class="mb-1 text-[9px] font-mono uppercase text-outline-variant">Last Opened</div>
-            <div class="text-xs font-bold text-on-surface">${escapeHtml(
-              formatDateTime(connection.lastOpenedAt)
-            )}</div>
-          </div>
-          <div>
-            <div class="mb-1 text-[9px] font-mono uppercase text-outline-variant">Mode</div>
-            <div class="text-xs font-bold text-on-surface">${connection.readOnly ? "Read only" : "Read / Write"}</div>
-          </div>
-        </div>
-      </div>
-      <div class="border-t border-outline-variant/10 bg-surface-container-low px-4 py-3">
-        <div class="grid grid-cols-[minmax(0,1fr)_5.1rem_5.8rem] gap-2">
-          <button
-            class="signature-button"
-            data-action="select-connection"
-            data-connection-id="${escapeHtml(connection.id)}"
-            type="button"
-            title="${primaryActionLabel}"
-          >
-            ${primaryActionLabel}
-          </button>
-          <button
-            class="standard-button"
-            data-action="edit-connection"
-            data-connection-id="${escapeHtml(connection.id)}"
-            type="button"
-          >
-            Edit
-          </button>
-          <button
-            class="delete-button"
-            data-action="remove-connection"
-            data-connection-id="${escapeHtml(connection.id)}"
-            type="button"
-          >
-            Remove
-          </button>
-        </div>
-      </div>
-    </article>
-  `;
+  return [
+    '<article class="connection-card clipped-corner ',
+    isActive ? "is-active" : "",
+    '" style="--clip-path: ',
+    clipPath,
+    ';">',
+    '<div class="flex-1 p-6"><div class="mb-6 flex items-start justify-between">',
+    logoMarkup,
+    '<div class="flex items-center gap-2">',
+    renderStatusBadge(isActive ? "ACTIVE" : "RECENT", isActive ? "primary" : "muted"),
+    connection.readOnly ? renderStatusBadge("READ_ONLY", "alert") : "",
+    "</div></div>",
+    '<h3 class="mb-1 font-headline text-xl font-bold uppercase ',
+    isActive ? "text-[#FCE300]" : "text-on-surface",
+    '">',
+    escapeHtml(connection.label),
+    "</h3>",
+    '<p class="block overflow-hidden text-ellipsis whitespace-nowrap font-mono text-[10px] text-outline-variant" title="',
+    escapeHtml(connection.path),
+    '">',
+    escapeHtml(truncateMiddle(connection.path, 68)),
+    "</p>",
+    '<div class="mt-8 grid grid-cols-2 gap-4">',
+    '<div><div class="mb-1 text-[9px] font-mono uppercase text-outline-variant">Allocation</div><div class="text-xs font-bold text-on-surface">',
+    escapeHtml(formatBytes(connection.sizeBytes)),
+    "</div></div>",
+    '<div><div class="mb-1 text-[9px] font-mono uppercase text-outline-variant">Last Modified</div><div class="text-xs font-bold text-on-surface">',
+    escapeHtml(formatDateTime(connection.lastModifiedAt)),
+    "</div></div>",
+    '<div><div class="mb-1 text-[9px] font-mono uppercase text-outline-variant">Last Opened</div><div class="text-xs font-bold text-on-surface">',
+    escapeHtml(formatDateTime(connection.lastOpenedAt)),
+    "</div></div>",
+    '<div><div class="mb-1 text-[9px] font-mono uppercase text-outline-variant">Mode</div><div class="text-xs font-bold text-on-surface">',
+    connection.readOnly ? "Read only" : "Read / Write",
+    "</div></div></div></div>",
+    '<div class="border-t border-outline-variant/10 bg-surface-container-low px-4 py-3">',
+    '<div class="grid grid-cols-[minmax(0,1fr)_5.1rem_5.8rem] gap-2">',
+    '<button class="signature-button" data-action="select-connection" data-connection-id="',
+    connectionId,
+    '" type="button" title="',
+    primaryActionLabel,
+    '">',
+    primaryActionLabel,
+    "</button>",
+    '<button class="standard-button" data-action="edit-connection" data-connection-id="',
+    connectionId,
+    '" type="button">Edit</button>',
+    '<button class="delete-button" data-action="remove-connection" data-connection-id="',
+    connectionId,
+    '" type="button">Remove</button>',
+    "</div></div></article>",
+  ].join("");
 }

package/frontend/js/components/emptyState.js

@@ -6,6 +6,25 @@ import {
 } from "../utils/format.js";
 import { renderConnectionLogo } from "./connectionLogo.js";
 
+function renderRecentConnectionButton(connection) {
+  return [
+    '<button class="control-button flex items-center gap-2 border border-outline-variant/15 bg-surface-container-low px-4 text-left text-on-surface transition-colors hover:border-primary-container/30 hover:bg-surface-container-high" data-action="select-connection" data-connection-id="',
+    escapeHtml(connection.id),
+    '" type="button">',
+    renderConnectionLogo(connection, {
+      containerClass:
+        "flex h-8 w-8 items-center justify-center overflow-hidden bg-surface-container-highest",
+      imageClassName: "h-full w-full object-cover",
+      iconClassName: "text-sm text-primary-container",
+    }),
+    '<span class="min-w-0"><span class="block truncate font-mono text-xs">',
+    escapeHtml(connection.label),
+    '</span><span class="block truncate text-[10px] text-on-surface-variant/45">',
+    escapeHtml(truncateMiddle(connection.path, 34)),
+    "</span></span></button>",
+  ].join("");
+}
+
 function renderRecentConnections(recentConnections = []) {
   if (!recentConnections.length) {
     return `
@@ -19,29 +38,7 @@ function renderRecentConnections(recentConnections = []) {
     <div class="flex flex-wrap justify-center gap-4">
       ${recentConnections
         .slice(0, 4)
-        .map(
-          (connection) => `
-            <button
-              class="control-button flex items-center gap-2 border border-outline-variant/15 bg-surface-container-low px-4 text-left text-on-surface transition-colors hover:border-primary-container/30 hover:bg-surface-container-high"
-              data-action="select-connection"
-              data-connection-id="${escapeHtml(connection.id)}"
-              type="button"
-            >
-              ${renderConnectionLogo(connection, {
-                containerClass:
-                  "flex h-8 w-8 items-center justify-center overflow-hidden bg-surface-container-highest",
-                imageClassName: "h-full w-full object-cover",
-                iconClassName: "text-sm text-primary-container",
-              })}
-              <span class="min-w-0">
-                <span class="block truncate font-mono text-xs">${escapeHtml(connection.label)}</span>
-                <span class="block truncate text-[10px] text-on-surface-variant/45">${escapeHtml(
-                  truncateMiddle(connection.path, 34)
-                )}</span>
-              </span>
-            </button>
-          `
-        )
+        .map((connection) => renderRecentConnectionButton(connection))
         .join("")}
     </div>
   `;