Styling

frontend/src/css/sidebar.css

@@ -401,6 +401,52 @@
 /* -----------------------------------------------------------------------
    Sidebar empty list placeholder
    ----------------------------------------------------------------------- */
+.sidebar-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-2);
+  margin: var(--space-6) var(--space-3) 0;
+  padding: var(--space-5) var(--space-3);
+  color: var(--text-tertiary);
+  text-align: center;
+}
+
+.sidebar-empty-icon {
+  display: grid;
+  place-items: center;
+  width: 34px;
+  height: 34px;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  background: var(--bg-elevated);
+  color: var(--accent);
+  font-size: var(--text-xl);
+  font-weight: var(--weight-semibold);
+  line-height: 1;
+}
+
+.sidebar-empty-title {
+  color: var(--text-secondary);
+  font-size: var(--text-sm);
+  font-weight: var(--weight-semibold);
+  line-height: var(--leading-tight);
+}
+
+.sidebar-empty-text {
+  max-width: 190px;
+  margin: 0;
+  color: var(--text-tertiary);
+  font-size: var(--text-xs);
+  line-height: var(--leading-normal);
+}
+
+.sidebar-empty-actions {
+  display: flex;
+  justify-content: center;
+  margin-top: var(--space-1);
+}
+
 .sidebar-list-empty {
   padding: var(--space-3) var(--space-2);
   font-size: var(--text-xs);

frontend/src/js/sidebar.js

@@ -117,11 +117,7 @@
 
       // Empty state
       if (profiles.length === 0) {
-        const empty = createElement("div", "sidebar-empty");
-        empty.innerHTML = `
-                <p class="sidebar-empty-text">No profiles found</p>
-            `;
-        this.el.appendChild(empty);
+        this.el.appendChild(this._renderEmptyState());
       }
     }
 
@@ -162,6 +158,53 @@
 
     // ── Rendering helpers ────────────────────────────────────────────
 
+    /**
+     * Renders the sidebar empty state for first-run and no-search-results cases.
+     * @returns {HTMLElement}
+     * @private
+     */
+    _renderEmptyState() {
+      const isSearching = this.searchQuery.length > 0;
+      const empty = createElement("div", "sidebar-empty");
+
+      const icon = createElement("div", "sidebar-empty-icon", {
+        textContent: isSearching ? "⌕" : "+",
+        "aria-hidden": "true",
+      });
+      empty.appendChild(icon);
+
+      empty.appendChild(
+        createElement("div", "sidebar-empty-title", {
+          textContent: isSearching ? "No matching profiles" : "No saved profiles",
+        }),
+      );
+
+      empty.appendChild(
+        createElement("p", "sidebar-empty-text", {
+          textContent: isSearching
+            ? "Try a different name, host, group, or protocol."
+            : "Create a profile for the servers and tools you use often.",
+        }),
+      );
+
+      if (!isSearching) {
+        const actions = createElement("div", "sidebar-empty-actions");
+        const addButton = createElement("button", "btn btn-primary btn-sm", {
+          type: "button",
+          textContent: "New Profile",
+        });
+        addButton.addEventListener("click", (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          this.app.profileEditor.openNew();
+        });
+        actions.appendChild(addButton);
+        empty.appendChild(actions);
+      }
+
+      return empty;
+    }
+
     /**
      * Renders a collapsible section of profiles.
      * @param {string} title