fix(mcping): settings padding, logs label, and single add-server flow

apps/mcping/src/renderer/index.html

@@ -31,7 +31,7 @@ <h2 class="card__title">Launch</h2>
       <section class="card">
         <details class="log-panel">
           <summary class="log-panel__summary">
-            <span class="card__title log-panel__title">Log</span>
+            <span class="card__title log-panel__title">Logs</span>
             <button id="copy-log" type="button" class="button button--ghost log-panel__copy">
               Copy
             </button>
@@ -50,23 +50,25 @@ <h2 class="card__title">Launch</h2>
         <div class="server__body">
         <p class="card__hint" data-role="detail"></p>
         <label class="field">
-          <span class="field__label">Name</span>
+          <span class="field__label">Name <span class="field__required">*</span></span>
           <input
             class="field__input"
             type="text"
             data-field="name"
             spellcheck="false"
             placeholder="My server"
+            required
           />
         </label>
         <label class="field">
-          <span class="field__label">Server URL</span>
+          <span class="field__label">Server URL <span class="field__required">*</span></span>
           <input
             class="field__input"
             type="text"
             data-field="url"
             spellcheck="false"
             placeholder="https://example.com/mcp"
+            required
           />
         </label>
         <label class="field">

apps/mcping/src/renderer/src/main.ts

@@ -1,24 +1,16 @@
 import './styles.css';
 import { api } from './lib/api.ts';
-import { requireElement } from './lib/dom.ts';
 import { renderLogEntry, wireCopyLog } from './sections/log-panel.ts';
-import { addServer, findCard, renderServers, updateCardStatus } from './sections/server-card.ts';
+import { applyServerStatus, renderServers, wireAddServer } from './sections/server-card.ts';
 import { fillGlobalSettings, wireGlobalSettings } from './sections/settings.ts';
 
 async function init(): Promise<void> {
   fillGlobalSettings(await api.getSettings());
   wireGlobalSettings();
 
   await renderServers();
-  requireElement<HTMLButtonElement>('#add-server').addEventListener('click', () => {
-    void addServer();
-  });
-  api.onStatus((entry) => {
-    const card = findCard(entry.serverId);
-    if (card) {
-      updateCardStatus({ card, status: entry.status });
-    }
-  });
+  wireAddServer();
+  api.onStatus(applyServerStatus);
 
   wireCopyLog();
   for (const entry of await api.getLog()) {

apps/mcping/src/renderer/src/sections/server-auth.ts

@@ -32,6 +32,7 @@ function applyAuthVisibility(options: { card: HTMLElement; type: ServerAuthType
 
 function applyAuthState(options: { card: HTMLElement; state: ServerAuthState }): void {
   const { card, state } = options;
+  card.dataset.secretSet = String(state.secretSet);
   requireChild<HTMLElement>({ root: card, selector: '[data-role="secret-state"]' }).textContent =
     state.secretSet ? 'Saved ✓' : 'Not set';
   requireChild<HTMLElement>({ root: card, selector: '[data-role="oauth-state"]' }).textContent =
@@ -81,8 +82,9 @@ export function wireAuth(options: {
   card: HTMLElement;
   server: McpServer;
   state: ServerAuthState;
+  onChange: () => void;
 }): void {
-  const { card, server } = options;
+  const { card, server, onChange } = options;
   const select = requireChild<HTMLSelectElement>({ root: card, selector: '[data-auth="type"]' });
   const headerName = requireChild<HTMLInputElement>({
     root: card,
@@ -99,6 +101,7 @@ export function wireAuth(options: {
   select.addEventListener('change', () => {
     const type = select.value as ServerAuthType;
     applyAuthVisibility({ card, type });
+    onChange();
     void saveAuth({ card, id: server.id, type, headerName: headerName.value });
   });
   headerName.addEventListener('change', () => {
@@ -107,7 +110,7 @@ export function wireAuth(options: {
     }
   });
   secret.addEventListener('change', () => {
-    void saveSecret({ card, id: server.id, input: secret });
+    void saveSecret({ card, id: server.id, input: secret }).then(onChange);
   });
   actionButton({ card, action: 'sign-out' }).addEventListener('click', () => {
     void handleSignOut({ card, id: server.id });

apps/mcping/src/renderer/src/sections/server-card.ts

@@ -12,10 +12,50 @@ const STATUS_LABEL: Record<ConnectionState, string> = {
   error: 'Error',
 };
 
-export function findCard(serverId: string): HTMLElement | null {
+// Set while a just-added server is still blank; blocks a second add until it
+// connects or is removed.
+let pendingServerId: string | null = null;
+
+function addButton(): HTMLButtonElement {
+  return requireElement<HTMLButtonElement>('#add-server');
+}
+
+function syncAddButton(): void {
+  addButton().disabled = pendingServerId !== null;
+}
+
+function findCard(serverId: string): HTMLElement | null {
   return document.querySelector<HTMLElement>(`.server[data-server-id="${serverId}"]`);
 }
 
+function trimmedValue(options: { card: HTMLElement; selector: string }): string {
+  return requireChild<HTMLInputElement>({
+    root: options.card,
+    selector: options.selector,
+  }).value.trim();
+}
+
+function serverFormComplete(card: HTMLElement): boolean {
+  if (
+    !trimmedValue({ card, selector: '[data-field="name"]' }) ||
+    !trimmedValue({ card, selector: '[data-field="url"]' })
+  ) {
+    return false;
+  }
+  const authType = requireChild<HTMLSelectElement>({
+    root: card,
+    selector: '[data-auth="type"]',
+  }).value;
+  if (authType === 'header') {
+    return card.dataset.secretSet === 'true';
+  }
+  return true;
+}
+
+function refreshConnectButton(card: HTMLElement): void {
+  actionButton({ card, action: 'connect' }).disabled = !serverFormComplete(card);
+}
+
 async function saveField(options: { id: string; input: HTMLInputElement }): Promise<void> {
   const key = options.input.dataset.field as keyof ServerDraft;
   const patch = (
@@ -28,7 +68,11 @@ async function saveField(options: { id: string; input: HTMLInputElement }): Prom
 
 async function removeServer(id: string): Promise<void> {
   await api.removeServer(id);
+  if (id === pendingServerId) {
+    pendingServerId = null;
+  }
   await renderServers();
+  syncAddButton();
 }
 
 function wireCardActions(options: { card: HTMLElement; id: string }): void {
@@ -54,6 +98,9 @@ function buildServerCard(options: { server: McpServer; authState: ServerAuthStat
   card.dataset.serverId = server.id;
   const title = requireChild<HTMLElement>({ root: card, selector: '[data-role="title"]' });
   title.textContent = server.name.trim() || 'Untitled server';
+  const refresh = (): void => {
+    refreshConnectButton(card);
+  };
   for (const input of card.querySelectorAll<HTMLInputElement>('[data-field]')) {
     const value = server[input.dataset.field as keyof ServerDraft];
     if (typeof value === 'boolean') {
@@ -64,18 +111,20 @@ function buildServerCard(options: { server: McpServer; authState: ServerAuthStat
     input.addEventListener('change', () => {
       void saveField({ id: server.id, input });
     });
+    input.addEventListener('input', refresh);
     if (input.dataset.field === 'name') {
       input.addEventListener('input', () => {
         title.textContent = input.value.trim() || 'Untitled server';
       });
     }
   }
   wireCardActions({ card, id: server.id });
-  wireAuth({ card, server, state: authState });
+  wireAuth({ card, server, state: authState, onChange: refresh });
+  refresh();
   return card;
 }
 
-export function updateCardStatus(options: { card: HTMLElement; status: ConnectionStatus }): void {
+function updateCardStatus(options: { card: HTMLElement; status: ConnectionStatus }): void {
   const { card, status } = options;
   const pill = requireChild<HTMLElement>({ root: card, selector: '[data-role="status"]' });
   pill.textContent = STATUS_LABEL[status.state];
@@ -93,12 +142,20 @@ export function updateCardStatus(options: { card: HTMLElement; status: Connectio
   actionButton({ card, action: 'disconnect' }).hidden = !active;
 }
 
+export function applyServerStatus(entry: ServerStatus): void {
+  const card = findCard(entry.serverId);
+  if (card) {
+    updateCardStatus({ card, status: entry.status });
+  }
+  if (entry.serverId === pendingServerId && entry.status.state === 'connected') {
+    pendingServerId = null;
+    syncAddButton();
+  }
+}
+
 function applyStatuses(statuses: ServerStatus[]): void {
   for (const entry of statuses) {
-    const card = findCard(entry.serverId);
-    if (card) {
-      updateCardStatus({ card, status: entry.status });
-    }
+    applyServerStatus(entry);
   }
 }
 
@@ -110,10 +167,28 @@ export async function renderServers(): Promise<void> {
       buildServerCard({ server, authState: authStates[server.id] ?? EMPTY_AUTH_STATE }),
     ),
   );
+  const pendingCard = pendingServerId ? findCard(pendingServerId) : null;
+  if (pendingCard instanceof HTMLDetailsElement) {
+    pendingCard.open = true;
+  }
   applyStatuses(await api.getStatuses());
 }
 
-export async function addServer(): Promise<void> {
-  await api.addServer({ name: '', url: '', autoConnect: true, auth: { type: 'none' } });
+async function addServer(): Promise<void> {
+  const settings = await api.addServer({
+    name: '',
+    url: '',
+    autoConnect: true,
+    auth: { type: 'none' },
+  });
+  pendingServerId = settings.servers.at(-1)?.id ?? null;
   await renderServers();
+  syncAddButton();
+}
+
+export function wireAddServer(): void {
+  addButton().addEventListener('click', () => {
+    void addServer();
+  });
+  syncAddButton();
 }

apps/mcping/src/renderer/src/styles.css

@@ -174,12 +174,24 @@ body {
   color: var(--warn-fg);
 }
 
+.button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
 .servers {
   display: flex;
   flex-direction: column;
   gap: 12px;
 }
 
+/* An empty list is still a flex child, so its card's row-gap would sit below the
+   header and inflate the bottom padding. Drop it until it has entries. */
+.servers:empty,
+.log:empty {
+  display: none;
+}
+
 .server {
   border: 1px solid var(--border);
   border-radius: 8px;