Give the settings page a more polished layout

Turn the intro into an accent-tinted header card, replace the numbered
section badges with icons, use toggle switches for on/off settings,
add focus rings to inputs, and make the integrations and custom action
sections full width. Style the notification, portability, and updates
panels to match the other sections, and hide release output boxes until
they have content. Works with the light theme and every accent color.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BUhabxL4SPejg19jgbSyYN

Author: claude

index.html

@@ -102,24 +102,24 @@ <h2>Your workstation,<br /><span>under control.</span></h2>
             <div class="settings-intro"><div><p class="eyebrow">Make it yours</p><h2>A workspace that fits you.</h2><p>Appearance previews as you edit. Save to keep your changes on this device.</p></div><span class="version-badge">Command Center</span></div>
             <nav class="settings-links" aria-label="Settings sections"><a href="#section-general">General</a><a href="#section-applications">Applications</a><a href="#section-appearance">Appearance</a><a href="#section-repositories">Repositories</a></nav>
             <div class="settings-layout">
-              <section id="section-general" class="panel settings-section"><div class="section-title"><span>01</span><div><h3>General</h3><p>A familiar welcome and a useful starting point.</p></div></div>
+              <section id="section-general" class="panel settings-section"><div class="section-title"><span aria-hidden="true">⚙</span><div><h3>General</h3><p>A familiar welcome and a useful starting point.</p></div></div>
                 <label class="setting-row" for="pref-name"><span>Display name<small>Shown in your greeting and profile.</small></span><input id="pref-name" maxlength="40" required autocomplete="off"></label>
                 <label class="setting-row" for="pref-startup"><span>Start page<small>Where Command Center opens.</small></span><select id="pref-startup"><option value="dashboard">Dashboard</option><option value="repositories">Repositories</option><option value="toolbox">Toolbox</option><option value="terminal">Terminal</option><option value="sync">System Sync</option><option value="backup">Backup & Restore</option><option value="config">Configuration</option><option value="health">System Health</option><option value="activity">Activity</option><option value="attention">Needs attention</option><option value="services">Services</option><option value="inventory">System inventory</option><option value="operations">Workflows</option><option value="timeline">Change timeline</option><option value="settings">Settings</option></select></label>
               </section>
-              <section id="section-applications" class="panel settings-section"><div class="section-title"><span>02</span><div><h3>Applications</h3><p>Use your defaults or choose an app for Command Center.</p></div></div>
+              <section id="section-applications" class="panel settings-section"><div class="section-title"><span aria-hidden="true">▦</span><div><h3>Applications</h3><p>Use your defaults or choose an app for Command Center.</p></div></div>
                 <label class="setting-row" for="pref-editor"><span>Editor<small>Neovim opens inside your selected terminal.</small></span><select id="pref-editor"><option value="auto">System default</option><option value="kate">Kate</option><option value="nvim">Neovim</option><option value="code">VS Code</option><option value="codium">VSCodium</option><option value="zed">Zed</option></select></label>
                 <label class="setting-row" for="pref-terminal"><span>Terminal<small>Opens in the repository folder.</small></span><select id="pref-terminal"><option value="auto">System default</option><option value="ghostty">Ghostty</option><option value="konsole">Konsole</option><option value="gnome-terminal">GNOME Terminal</option><option value="kitty">Kitty</option><option value="alacritty">Alacritty</option><option value="wezterm">WezTerm</option><option value="foot">Foot</option></select></label>
                 <p class="settings-help">System default respects VISUAL / EDITOR and TERMINAL, then desktop preferences. Listed apps must already be installed. These choices affect only Command Center.</p>
               </section>
-              <section id="section-appearance" class="panel settings-section"><div class="section-title"><span>03</span><div><h3>Appearance</h3><p>Small adjustments, a calmer workspace.</p></div></div>
+              <section id="section-appearance" class="panel settings-section"><div class="section-title"><span aria-hidden="true">◐</span><div><h3>Appearance</h3><p>Small adjustments, a calmer workspace.</p></div></div>
                 <label class="setting-row" for="pref-theme"><span>Theme<small>System follows your desktop’s light or dark preference.</small></span><select id="pref-theme"><option value="dark">Dark</option><option value="light">Light</option><option value="system">System</option></select></label>
                 <label class="setting-row" for="pref-text-size"><span>Text size</span><select id="pref-text-size"><option value="normal">Standard</option><option value="large">Larger</option></select></label>
                 <label class="setting-row" for="pref-hero"><span>Dashboard welcome banner</span><input id="pref-hero" type="checkbox" role="switch"></label>
                 <label class="setting-row" for="pref-accent"><span>Accent color</span><select id="pref-accent"><option value="cyan">Glacier · Cyan</option><option value="violet">Dusk · Violet</option><option value="green">Mint · Green</option></select></label>
                 <label class="setting-row" for="pref-density"><span>Repository density</span><select id="pref-density"><option value="comfortable">Comfortable</option><option value="compact">Compact</option></select></label>
                 <label class="setting-row" for="pref-motion"><span>Reduce motion<small>Disable decorative animation. Your system motion preference is also respected.</small></span><input id="pref-motion" type="checkbox" role="switch"></label>
               </section>
-              <section id="section-repositories" class="panel settings-section"><div class="section-title"><span>04</span><div><h3>Repositories</h3><p>Control where and how often we look.</p></div></div>
+              <section id="section-repositories" class="panel settings-section"><div class="section-title"><span aria-hidden="true">⌘</span><div><h3>Repositories</h3><p>Control where and how often we look.</p></div></div>
                 <label class="setting-row" for="pref-layout"><span>Repository layout</span><select id="pref-layout"><option value="cards">Cards</option><option value="list">List</option></select></label>
                 <label class="setting-row" for="pref-sort"><span>Default sort<small>The toolbar can change sorting for this session.</small></span><select id="pref-sort"><option value="name">Name A–Z</option><option value="name-desc">Name Z–A</option><option value="attention">Needs attention first</option></select></label>
                 <label class="setting-row" for="pref-paths"><span>Show repository paths</span><input id="pref-paths" type="checkbox" role="switch"></label>

src/features.js

@@ -176,7 +176,7 @@ export function createFeatures(api) {
     );
     $("#section-repositories").insertAdjacentHTML(
       "afterend",
-      `<section id="section-integrations" class="panel settings-section integration-section"><div class="section-title"><span>05</span><div><h3>System integrations</h3><p>Use your installed helpers and editable configuration sources.</p></div></div><div class="button-row">${button("Detect existing setup", 'id="detect-integrations"')}${button("Check availability", 'id="check-integrations"')}</div><p id="integration-check-status" role="status">Check paths and tools using the values below.</p><div id="integration-check-results"></div>${integrationFields.map(([key, label, help]) => `<label class="integration-field" for="integration-${key}"><span>${label}<small>${help}</small></span><input id="integration-${key}" ${key === "backupMaxHours" ? 'type="number" min="1" max="8760"' : 'type="text"'} autocomplete="off"></label>`).join("")}<p class="settings-help">Credential fields identify an existing wallet entry or password file. Command Center does not ask for or store your backup password.</p></section>`,
+      `<section id="section-integrations" class="panel settings-section integration-section"><div class="section-title"><span aria-hidden="true">⇄</span><div><h3>System integrations</h3><p>Use your installed helpers and editable configuration sources.</p></div></div><div class="button-row">${button("Detect existing setup", 'id="detect-integrations"')}${button("Check availability", 'id="check-integrations"')}</div><p id="integration-check-status" role="status">Check paths and tools using the values below.</p><div id="integration-check-results"></div>${integrationFields.map(([key, label, help]) => `<label class="integration-field" for="integration-${key}"><span>${label}<small>${help}</small></span><input id="integration-${key}" ${key === "backupMaxHours" ? 'type="number" min="1" max="8760"' : 'type="text"'} autocomplete="off"></label>`).join("")}<p class="settings-help">Credential fields identify an existing wallet entry or password file. Command Center does not ask for or store your backup password.</p></section>`,
     );
     $(".settings-links").insertAdjacentHTML(
       "beforeend",