From 716546824ff36cf3b3d1c54f6d0eecf5c1f9e565 Mon Sep 17 00:00:00 2001
From: Maude Bot <maude@maudeco.de>
Date: Tue, 20 Jan 2026 10:56:44 -0500
Subject: [PATCH 1/5] feat(ui): improve config page with collapsible sections

- Group config settings into logical sections (Core, Agents, Communication, etc.)
- Add collapsible accordion UI for each section group
- Add icons and labels for each config category
- Improve mobile responsiveness with better button layout
- Style improvements for nested fieldsets and arrays
---
 ui/src/styles/components.css          | 250 ++++++++++++++++++++++++++
 ui/src/ui/views/config-form.render.ts | 128 ++++++++++---
 ui/src/ui/views/config.ts             |  35 ++--
 3 files changed, 375 insertions(+), 38 deletions(-)

diff --git a/ui/src/styles/components.css b/ui/src/styles/components.css
index 435fd59bc..18055eadc 100644
--- a/ui/src/styles/components.css
+++ b/ui/src/styles/components.css
@@ -1274,3 +1274,253 @@
   flex-wrap: wrap;
   gap: 10px;
 }
+
+/* Config Form Sections */
+.config-form--sectioned {
+  display: grid;
+  gap: 12px;
+}
+
+.config-section {
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), transparent 70%),
+    rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+}
+
+:root[data-theme="light"] .config-section {
+  background: linear-gradient(160deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5) 70%);
+}
+
+.config-section__header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  cursor: pointer;
+  user-select: none;
+  border-bottom: 1px solid transparent;
+  transition: background 150ms ease, border-color 150ms ease;
+}
+
+.config-section__header:hover {
+  background: rgba(255, 255, 255, 0.04);
+}
+
+:root[data-theme="light"] .config-section__header:hover {
+  background: rgba(0, 0, 0, 0.03);
+}
+
+.config-section[open] .config-section__header {
+  border-bottom-color: var(--border);
+  background: rgba(255, 255, 255, 0.02);
+}
+
+:root[data-theme="light"] .config-section[open] .config-section__header {
+  background: rgba(0, 0, 0, 0.02);
+}
+
+.config-section__title {
+  font-family: var(--font-display);
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  flex: 1;
+}
+
+.config-section__count {
+  font-size: 11px;
+  color: var(--muted);
+  padding: 3px 8px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid var(--border);
+}
+
+:root[data-theme="light"] .config-section__count {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.config-section__chevron {
+  width: 18px;
+  height: 18px;
+  color: var(--muted);
+  transition: transform 200ms ease;
+  flex-shrink: 0;
+}
+
+.config-section[open] .config-section__chevron {
+  transform: rotate(180deg);
+}
+
+.config-section__content {
+  padding: 12px 16px 16px;
+  display: grid;
+  gap: 16px;
+}
+
+.config-field-group {
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: rgba(0, 0, 0, 0.12);
+  overflow: hidden;
+}
+
+:root[data-theme="light"] .config-field-group {
+  background: rgba(255, 255, 255, 0.6);
+}
+
+.config-field-group__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  background: rgba(255, 255, 255, 0.03);
+  border-bottom: 1px solid var(--border);
+}
+
+:root[data-theme="light"] .config-field-group__header {
+  background: rgba(0, 0, 0, 0.03);
+}
+
+.config-field-group__icon {
+  font-size: 16px;
+  line-height: 1;
+}
+
+.config-field-group__label {
+  font-weight: 600;
+  font-size: 13px;
+  letter-spacing: 0.3px;
+}
+
+.config-field-group__content {
+  padding: 14px;
+}
+
+.config-field-group__content .fieldset {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+.config-field-group__content .fieldset > .legend {
+  display: none;
+}
+
+/* Config form field improvements */
+.config-form .fieldset {
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 12px;
+  margin-top: 8px;
+  background: rgba(0, 0, 0, 0.08);
+}
+
+:root[data-theme="light"] .config-form .fieldset {
+  background: rgba(255, 255, 255, 0.5);
+}
+
+.config-form .fieldset .legend {
+  font-weight: 600;
+  font-size: 12px;
+  letter-spacing: 0.3px;
+  color: var(--text);
+  margin-bottom: 10px;
+  padding-bottom: 8px;
+  border-bottom: 1px dashed var(--border);
+}
+
+.config-form .fieldset .fieldset {
+  margin-top: 12px;
+}
+
+.config-form .array {
+  display: grid;
+  gap: 8px;
+}
+
+.config-form .array-item {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  padding: 10px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.1);
+}
+
+:root[data-theme="light"] .config-form .array-item {
+  background: rgba(255, 255, 255, 0.6);
+}
+
+/* Mobile responsiveness */
+@media (max-width: 640px) {
+  .config-section__header {
+    padding: 12px 14px;
+  }
+
+  .config-section__content {
+    padding: 10px 12px 14px;
+  }
+
+  .config-field-group__content {
+    padding: 12px;
+  }
+
+  .config-form .array-item {
+    flex-direction: column;
+  }
+
+  .config-form .array-item > div:first-child {
+    width: 100%;
+  }
+
+  .config-form .array-item .btn {
+    align-self: flex-end;
+  }
+}
+
+/* Config Header Layout */
+.config-header {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.config-header__top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.config-header__actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+@media (max-width: 640px) {
+  .config-header__top {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .config-header__top .row {
+    justify-content: space-between;
+  }
+
+  .config-header__actions {
+    justify-content: flex-end;
+  }
+
+  .config-header__actions .btn {
+    flex: 1;
+    min-width: 70px;
+    text-align: center;
+  }
+}
diff --git a/ui/src/ui/views/config-form.render.ts b/ui/src/ui/views/config-form.render.ts
index c21c276fc..bcb7e53bf 100644
--- a/ui/src/ui/views/config-form.render.ts
+++ b/ui/src/ui/views/config-form.render.ts
@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html, nothing } from "lit";
 import type { ConfigUiHints } from "../types";
 import { hintForPath, schemaType, type JsonSchema } from "./config-form.shared";
 import { renderNode } from "./config-form.node";
@@ -12,6 +12,43 @@ export type ConfigFormProps = {
   onPatch: (path: Array<string | number>, value: unknown) => void;
 };
 
+// Define logical section groupings
+const SECTION_CONFIG: Record<string, { label: string; icon: string; order: number }> = {
+  // Core
+  env: { label: "Environment", icon: "🔧", order: 0 },
+  update: { label: "Updates", icon: "📦", order: 1 },
+  
+  // Identity & Agents
+  agents: { label: "Agents", icon: "🤖", order: 10 },
+  auth: { label: "Authentication", icon: "🔐", order: 11 },
+  
+  // Communication
+  channels: { label: "Channels", icon: "💬", order: 20 },
+  messages: { label: "Messages", icon: "📨", order: 21 },
+  
+  // Automation
+  commands: { label: "Commands", icon: "⌨️", order: 30 },
+  hooks: { label: "Hooks", icon: "🪝", order: 31 },
+  skills: { label: "Skills", icon: "✨", order: 32 },
+  
+  // Tools & Gateway
+  tools: { label: "Tools", icon: "🛠️", order: 40 },
+  gateway: { label: "Gateway", icon: "🌐", order: 41 },
+  
+  // System
+  wizard: { label: "Setup Wizard", icon: "🧙", order: 50 },
+};
+
+// Logical groupings for the accordion layout
+const SECTION_GROUPS: Array<{ title: string; keys: string[] }> = [
+  { title: "Core Settings", keys: ["env", "update"] },
+  { title: "Identity & Agents", keys: ["agents", "auth"] },
+  { title: "Communication", keys: ["channels", "messages"] },
+  { title: "Automation", keys: ["commands", "hooks", "skills"] },
+  { title: "Tools & Gateway", keys: ["tools", "gateway"] },
+  { title: "System", keys: ["wizard"] },
+];
+
 export function renderConfigForm(props: ConfigFormProps) {
   if (!props.schema) {
     return html`<div class="muted">Schema unavailable.</div>`;
@@ -22,28 +59,77 @@ export function renderConfigForm(props: ConfigFormProps) {
     return html`<div class="callout danger">Unsupported schema. Use Raw.</div>`;
   }
   const unsupported = new Set(props.unsupportedPaths ?? []);
-  const entries = Object.entries(schema.properties);
-  const sorted = entries.sort((a, b) => {
-    const orderA = hintForPath([a[0]], props.uiHints)?.order ?? 0;
-    const orderB = hintForPath([b[0]], props.uiHints)?.order ?? 0;
-    if (orderA !== orderB) return orderA - orderB;
-    return a[0].localeCompare(b[0]);
-  });
+  const properties = schema.properties;
+  const allKeys = new Set(Object.keys(properties));
+
+  // Collect any keys not in our defined groups
+  const groupedKeys = new Set(SECTION_GROUPS.flatMap(g => g.keys));
+  const ungroupedKeys = [...allKeys].filter(k => !groupedKeys.has(k));
+
+  // Build the groups with their entries
+  const groups = SECTION_GROUPS.map(group => {
+    const entries = group.keys
+      .filter(key => allKeys.has(key))
+      .map(key => ({ key, node: properties[key] }));
+    return { ...group, entries };
+  }).filter(group => group.entries.length > 0);
+
+  // Add ungrouped keys as "Other" if any exist
+  if (ungroupedKeys.length > 0) {
+    const sortedUngrouped = ungroupedKeys.sort((a, b) => {
+      const orderA = hintForPath([a], props.uiHints)?.order ?? 100;
+      const orderB = hintForPath([b], props.uiHints)?.order ?? 100;
+      if (orderA !== orderB) return orderA - orderB;
+      return a.localeCompare(b);
+    });
+    groups.push({
+      title: "Other",
+      keys: sortedUngrouped,
+      entries: sortedUngrouped.map(key => ({ key, node: properties[key] })),
+    });
+  }
 
   return html`
-    <div class="config-form">
-      ${sorted.map(([key, node]) =>
-        renderNode({
-          schema: node,
-          value: (value as Record<string, unknown>)[key],
-          path: [key],
-          hints: props.uiHints,
-          unsupported,
-          disabled: props.disabled ?? false,
-          onPatch: props.onPatch,
-        }),
-      )}
+    <div class="config-form config-form--sectioned">
+      ${groups.map((group, groupIndex) => html`
+        <details class="config-section" ?open=${groupIndex === 0}>
+          <summary class="config-section__header">
+            <span class="config-section__title">${group.title}</span>
+            <span class="config-section__count">${group.entries.length} ${group.entries.length === 1 ? 'setting' : 'settings'}</span>
+            <svg class="config-section__chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <polyline points="6 9 12 15 18 9"></polyline>
+            </svg>
+          </summary>
+          <div class="config-section__content">
+            ${group.entries.map(({ key, node }) => {
+              const sectionInfo = SECTION_CONFIG[key];
+              const icon = sectionInfo?.icon ?? "📄";
+              const label = sectionInfo?.label ?? key;
+              
+              return html`
+                <div class="config-field-group">
+                  <div class="config-field-group__header">
+                    <span class="config-field-group__icon">${icon}</span>
+                    <span class="config-field-group__label">${label}</span>
+                  </div>
+                  <div class="config-field-group__content">
+                    ${renderNode({
+                      schema: node,
+                      value: (value as Record<string, unknown>)[key],
+                      path: [key],
+                      hints: props.uiHints,
+                      unsupported,
+                      disabled: props.disabled ?? false,
+                      showLabel: false,
+                      onPatch: props.onPatch,
+                    })}
+                  </div>
+                </div>
+              `;
+            })}
+          </div>
+        </details>
+      `)}
     </div>
   `;
 }
-
diff --git a/ui/src/ui/views/config.ts b/ui/src/ui/views/config.ts
index 0930e9920..a87c01b91 100644
--- a/ui/src/ui/views/config.ts
+++ b/ui/src/ui/views/config.ts
@@ -47,58 +47,59 @@ export function renderConfig(props: ConfigProps) {
 
   return html`
     <section class="card">
-      <div class="row" style="justify-content: space-between;">
-        <div class="row">
-          <div class="card-title">Config</div>
-          <span class="pill">${validity}</span>
-        </div>
-        <div class="row">
+      <div class="config-header">
+        <div class="config-header__top">
+          <div class="row">
+            <div class="card-title">Config</div>
+            <span class="pill">${validity}</span>
+          </div>
           <div class="toggle-group">
             <button
-              class="btn ${props.formMode === "form" ? "primary" : ""}"
+              class="btn btn--sm ${props.formMode === "form" ? "primary" : ""}"
               ?disabled=${props.schemaLoading || !props.schema}
               @click=${() => props.onFormModeChange("form")}
             >
               Form
             </button>
             <button
-              class="btn ${props.formMode === "raw" ? "primary" : ""}"
+              class="btn btn--sm ${props.formMode === "raw" ? "primary" : ""}"
               @click=${() => props.onFormModeChange("raw")}
             >
               Raw
             </button>
           </div>
-          <button class="btn" ?disabled=${props.loading} @click=${props.onReload}>
+        </div>
+        <div class="config-header__actions">
+          <button class="btn btn--sm" ?disabled=${props.loading} @click=${props.onReload}>
             ${props.loading ? "Loading…" : "Reload"}
           </button>
           <button
-            class="btn primary"
+            class="btn btn--sm primary"
             ?disabled=${!canSave}
             @click=${props.onSave}
           >
             ${props.saving ? "Saving…" : "Save"}
           </button>
           <button
-            class="btn"
+            class="btn btn--sm"
             ?disabled=${!canApply}
             @click=${props.onApply}
           >
-            ${props.applying ? "Applying…" : "Apply & Restart"}
+            ${props.applying ? "Applying…" : "Apply"}
           </button>
           <button
-            class="btn"
+            class="btn btn--sm"
             ?disabled=${!canUpdate}
             @click=${props.onUpdate}
           >
-            ${props.updating ? "Updating…" : "Update & Restart"}
+            ${props.updating ? "Updating…" : "Update"}
           </button>
         </div>
       </div>
 
-      <div class="muted" style="margin-top: 10px;">
+      <div class="muted" style="margin-top: 10px; font-size: 12px;">
         Writes to <span class="mono">~/.clawdbot/clawdbot.json</span>. Apply &
-        Update restart the gateway and will ping the last active session when it
-        comes back.
+        Update restart the gateway.
       </div>
 
 

From 929d50b7d155c8ee96be91945beaa02a666a90b8 Mon Sep 17 00:00:00 2001
From: Maude Bot <maude@maudeco.de>
Date: Tue, 20 Jan 2026 11:28:41 -0500
Subject: [PATCH 2/5] feat(ui): complete config page overhaul with sidebar nav,
 search, toggles, and diff view

Major redesign of the config page:

Layout:
- Sidebar navigation with section list
- Search input to filter settings
- Section cards with icons and descriptions
- Responsive design for mobile (stacked layout)

Fields:
- New toggle switches for booleans (replaces checkboxes)
- Improved field-row layout with label, help text, and control
- Better fieldset and array styling

Features:
- Diff view showing pending changes before save
- Original value tracking for comparison
- Section filtering via sidebar nav
- Search across setting names, descriptions, and nested properties

Styling:
- Dedicated config.css with all new styles
- Dark and light theme support
- Smooth animations and transitions
- Mobile-first responsive breakpoints
---
 ui/src/styles.css                     |   1 +
 ui/src/styles/config.css              | 708 ++++++++++++++++++++++++++
 ui/src/ui/app-render.ts               |   5 +
 ui/src/ui/app.ts                      |   3 +
 ui/src/ui/controllers/config.ts       |   4 +
 ui/src/ui/views/config-form.node.ts   |  36 +-
 ui/src/ui/views/config-form.render.ts | 260 ++++++----
 ui/src/ui/views/config.ts             | 318 +++++++++---
 8 files changed, 1145 insertions(+), 190 deletions(-)
 create mode 100644 ui/src/styles/config.css

diff --git a/ui/src/styles.css b/ui/src/styles.css
index f3740b0c0..16b327f3a 100644
--- a/ui/src/styles.css
+++ b/ui/src/styles.css
@@ -2,3 +2,4 @@
 @import "./styles/layout.css";
 @import "./styles/layout.mobile.css";
 @import "./styles/components.css";
+@import "./styles/config.css";
diff --git a/ui/src/styles/config.css b/ui/src/styles/config.css
new file mode 100644
index 000000000..aff3e88b4
--- /dev/null
+++ b/ui/src/styles/config.css
@@ -0,0 +1,708 @@
+/* ===========================================
+   Config Page - Modern Layout
+   =========================================== */
+
+/* Layout Container */
+.config-layout {
+  display: grid;
+  grid-template-columns: 260px minmax(0, 1fr);
+  gap: 0;
+  min-height: calc(100vh - 140px);
+  margin: -16px;
+  border-radius: 16px;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  background: var(--panel);
+}
+
+/* Sidebar */
+.config-sidebar {
+  display: flex;
+  flex-direction: column;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.25));
+  border-right: 1px solid var(--border);
+}
+
+:root[data-theme="light"] .config-sidebar {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6));
+}
+
+.config-sidebar__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  border-bottom: 1px solid var(--border);
+}
+
+.config-sidebar__title {
+  font-family: var(--font-display);
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+}
+
+.config-sidebar__footer {
+  margin-top: auto;
+  padding: 12px;
+  border-top: 1px solid var(--border);
+}
+
+/* Search */
+.config-search {
+  position: relative;
+  padding: 12px;
+}
+
+.config-search__icon {
+  position: absolute;
+  left: 22px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 16px;
+  height: 16px;
+  color: var(--muted);
+  pointer-events: none;
+}
+
+.config-search__input {
+  width: 100%;
+  padding: 10px 12px 10px 38px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.2);
+  font-size: 13px;
+  outline: none;
+  transition: border-color 150ms ease, box-shadow 150ms ease;
+}
+
+.config-search__input:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--focus);
+}
+
+:root[data-theme="light"] .config-search__input {
+  background: rgba(255, 255, 255, 0.9);
+}
+
+.config-search__clear {
+  position: absolute;
+  right: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 20px;
+  height: 20px;
+  border: none;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--muted);
+  font-size: 14px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 150ms ease, color 150ms ease;
+}
+
+.config-search__clear:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--text);
+}
+
+/* Navigation */
+.config-nav {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px;
+}
+
+.config-nav__item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 10px 12px;
+  border: none;
+  border-radius: 10px;
+  background: transparent;
+  color: var(--text);
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+  transition: background 150ms ease, transform 100ms ease;
+}
+
+.config-nav__item:hover {
+  background: rgba(255, 255, 255, 0.06);
+}
+
+:root[data-theme="light"] .config-nav__item:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.config-nav__item.active {
+  background: rgba(245, 159, 74, 0.15);
+  color: var(--accent);
+}
+
+.config-nav__item:active {
+  transform: scale(0.98);
+}
+
+.config-nav__icon {
+  font-size: 16px;
+  width: 24px;
+  text-align: center;
+}
+
+.config-nav__label {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Mode Toggle */
+.config-mode-toggle {
+  display: flex;
+  gap: 4px;
+  padding: 4px;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 10px;
+}
+
+:root[data-theme="light"] .config-mode-toggle {
+  background: rgba(0, 0, 0, 0.08);
+}
+
+.config-mode-toggle__btn {
+  flex: 1;
+  padding: 8px 12px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 150ms ease, color 150ms ease;
+}
+
+.config-mode-toggle__btn:hover {
+  color: var(--text);
+}
+
+.config-mode-toggle__btn.active {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+:root[data-theme="light"] .config-mode-toggle__btn.active {
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* Main Content */
+.config-main {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  background: var(--panel);
+}
+
+/* Actions Bar */
+.config-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 16px;
+  background: rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid var(--border);
+}
+
+:root[data-theme="light"] .config-actions {
+  background: rgba(0, 0, 0, 0.03);
+}
+
+.config-actions__left,
+.config-actions__right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.config-changes-badge {
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: rgba(245, 159, 74, 0.2);
+  border: 1px solid rgba(245, 159, 74, 0.4);
+  color: var(--accent);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.config-status {
+  font-size: 12px;
+}
+
+/* Diff Panel */
+.config-diff {
+  margin: 12px 16px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+}
+
+:root[data-theme="light"] .config-diff {
+  background: rgba(245, 159, 74, 0.05);
+}
+
+.config-diff__summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--accent);
+  list-style: none;
+}
+
+.config-diff__summary::-webkit-details-marker {
+  display: none;
+}
+
+.config-diff__chevron {
+  width: 16px;
+  height: 16px;
+  transition: transform 200ms ease;
+}
+
+.config-diff[open] .config-diff__chevron {
+  transform: rotate(180deg);
+}
+
+.config-diff__content {
+  padding: 0 14px 14px;
+  display: grid;
+  gap: 8px;
+}
+
+.config-diff__item {
+  padding: 8px 10px;
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.15);
+  font-size: 12px;
+}
+
+:root[data-theme="light"] .config-diff__item {
+  background: rgba(255, 255, 255, 0.8);
+}
+
+.config-diff__path {
+  font-family: var(--mono);
+  font-weight: 600;
+  margin-bottom: 4px;
+  color: var(--text);
+}
+
+.config-diff__values {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-family: var(--mono);
+  color: var(--muted);
+}
+
+.config-diff__from {
+  color: var(--danger);
+  text-decoration: line-through;
+  opacity: 0.7;
+}
+
+.config-diff__arrow {
+  color: var(--muted);
+}
+
+.config-diff__to {
+  color: var(--ok);
+}
+
+/* Content Area */
+.config-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+}
+
+.config-raw-field textarea {
+  min-height: 400px;
+  font-family: var(--mono);
+  font-size: 13px;
+}
+
+/* Loading State */
+.config-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 60px 20px;
+  color: var(--muted);
+}
+
+.config-loading__spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid var(--border);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Empty State */
+.config-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 60px 20px;
+  text-align: center;
+}
+
+.config-empty__icon {
+  font-size: 48px;
+  opacity: 0.5;
+}
+
+.config-empty__text {
+  color: var(--muted);
+  font-size: 14px;
+}
+
+/* Section Cards */
+.config-form--modern {
+  display: grid;
+  gap: 16px;
+}
+
+.config-section-card {
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), transparent 70%),
+    rgba(0, 0, 0, 0.12);
+  overflow: hidden;
+}
+
+:root[data-theme="light"] .config-section-card {
+  background: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7) 70%);
+}
+
+.config-section-card__header {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 16px;
+  background: rgba(255, 255, 255, 0.02);
+  border-bottom: 1px solid var(--border);
+}
+
+:root[data-theme="light"] .config-section-card__header {
+  background: rgba(0, 0, 0, 0.02);
+}
+
+.config-section-card__icon {
+  font-size: 24px;
+  line-height: 1;
+  padding-top: 2px;
+}
+
+.config-section-card__titles {
+  flex: 1;
+  min-width: 0;
+}
+
+.config-section-card__title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  letter-spacing: 0.2px;
+}
+
+.config-section-card__desc {
+  margin: 4px 0 0;
+  font-size: 13px;
+  color: var(--muted);
+  line-height: 1.4;
+}
+
+.config-section-card__content {
+  padding: 16px;
+}
+
+/* Toggle Switch */
+.toggle-switch {
+  position: relative;
+  display: inline-flex;
+  cursor: pointer;
+}
+
+.toggle-switch input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-switch__track {
+  position: relative;
+  width: 44px;
+  height: 24px;
+  background: rgba(255, 255, 255, 0.15);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  transition: background 200ms ease, border-color 200ms ease;
+}
+
+:root[data-theme="light"] .toggle-switch__track {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.toggle-switch__thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 18px;
+  height: 18px;
+  background: var(--text);
+  border-radius: 50%;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  transition: transform 200ms ease, background 200ms ease;
+}
+
+.toggle-switch input:checked + .toggle-switch__track {
+  background: rgba(43, 217, 127, 0.3);
+  border-color: rgba(43, 217, 127, 0.5);
+}
+
+.toggle-switch input:checked + .toggle-switch__track .toggle-switch__thumb {
+  transform: translateX(20px);
+  background: var(--ok);
+}
+
+.toggle-switch input:focus + .toggle-switch__track {
+  box-shadow: 0 0 0 3px var(--focus);
+}
+
+.toggle-switch input:disabled + .toggle-switch__track {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Field Row (for toggles) */
+.field-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 12px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+:root[data-theme="light"] .field-row {
+  border-bottom-color: rgba(0, 0, 0, 0.06);
+}
+
+.field-row:last-child {
+  border-bottom: none;
+}
+
+.field-row__info {
+  flex: 1;
+  min-width: 0;
+}
+
+.field-row__label {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text);
+}
+
+.field-row__help {
+  display: block;
+  margin-top: 2px;
+  font-size: 12px;
+  color: var(--muted);
+  line-height: 1.4;
+}
+
+/* Pills */
+.pill--sm {
+  padding: 3px 8px;
+  font-size: 10px;
+}
+
+.pill--ok {
+  border-color: rgba(43, 217, 127, 0.5);
+  color: var(--ok);
+}
+
+.pill--danger {
+  border-color: rgba(255, 92, 92, 0.5);
+  color: var(--danger);
+}
+
+/* Improved Fieldset */
+.config-form--modern .fieldset {
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 14px;
+  margin-top: 12px;
+  background: rgba(0, 0, 0, 0.08);
+}
+
+:root[data-theme="light"] .config-form--modern .fieldset {
+  background: rgba(255, 255, 255, 0.5);
+}
+
+.config-form--modern .fieldset > .legend {
+  font-weight: 600;
+  font-size: 13px;
+  color: var(--text);
+  margin-bottom: 12px;
+  padding-bottom: 10px;
+  border-bottom: 1px dashed var(--border);
+}
+
+.config-form--modern .field {
+  margin-bottom: 12px;
+}
+
+.config-form--modern .field:last-child {
+  margin-bottom: 0;
+}
+
+.config-form--modern .field span {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--muted);
+}
+
+.config-form--modern .field input,
+.config-form--modern .field select,
+.config-form--modern .field textarea {
+  font-size: 14px;
+}
+
+/* Array improvements */
+.config-form--modern .array {
+  display: grid;
+  gap: 10px;
+}
+
+.config-form--modern .array-item {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  padding: 12px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.1);
+}
+
+:root[data-theme="light"] .config-form--modern .array-item {
+  background: rgba(255, 255, 255, 0.6);
+}
+
+/* Mobile Responsiveness */
+@media (max-width: 768px) {
+  .config-layout {
+    grid-template-columns: 1fr;
+    min-height: auto;
+  }
+
+  .config-sidebar {
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+
+  .config-nav {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    padding: 12px;
+    max-height: none;
+    overflow: visible;
+  }
+
+  .config-nav__item {
+    flex: 0 0 auto;
+    padding: 8px 12px;
+  }
+
+  .config-nav__icon {
+    width: auto;
+  }
+
+  .config-sidebar__footer {
+    display: none;
+  }
+
+  .config-actions {
+    flex-wrap: wrap;
+  }
+
+  .config-actions__left {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .config-actions__right {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .config-diff__values {
+    flex-wrap: wrap;
+  }
+
+  .field-row {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+
+  .config-form--modern .array-item {
+    flex-direction: column;
+  }
+}
+
+@media (max-width: 480px) {
+  .config-nav__label {
+    display: none;
+  }
+
+  .config-nav__item {
+    padding: 10px;
+  }
+
+  .config-section-card__header {
+    padding: 12px;
+  }
+
+  .config-section-card__content {
+    padding: 12px;
+  }
+}
diff --git a/ui/src/ui/app-render.ts b/ui/src/ui/app-render.ts
index 2be9d1a16..63d44300a 100644
--- a/ui/src/ui/app-render.ts
+++ b/ui/src/ui/app-render.ts
@@ -472,9 +472,14 @@ export function renderApp(state: AppViewState) {
               uiHints: state.configUiHints,
               formMode: state.configFormMode,
               formValue: state.configForm,
+              originalValue: state.configFormOriginal,
+              searchQuery: state.configSearchQuery,
+              activeSection: state.configActiveSection,
               onRawChange: (next) => (state.configRaw = next),
               onFormModeChange: (mode) => (state.configFormMode = mode),
               onFormPatch: (path, value) => updateConfigFormValue(state, path, value),
+              onSearchChange: (query) => (state.configSearchQuery = query),
+              onSectionChange: (section) => (state.configActiveSection = section),
               onReload: () => loadConfig(state),
               onSave: () => saveConfig(state),
               onApply: () => applyConfig(state),
diff --git a/ui/src/ui/app.ts b/ui/src/ui/app.ts
index 82ce65d06..63c2ed13d 100644
--- a/ui/src/ui/app.ts
+++ b/ui/src/ui/app.ts
@@ -139,8 +139,11 @@ export class ClawdbotApp extends LitElement {
   @state() configSchemaLoading = false;
   @state() configUiHints: ConfigUiHints = {};
   @state() configForm: Record<string, unknown> | null = null;
+  @state() configFormOriginal: Record<string, unknown> | null = null;
   @state() configFormDirty = false;
   @state() configFormMode: "form" | "raw" = "form";
+  @state() configSearchQuery = "";
+  @state() configActiveSection: string | null = null;
 
   @state() channelsLoading = false;
   @state() channelsSnapshot: ChannelsStatusSnapshot | null = null;
diff --git a/ui/src/ui/controllers/config.ts b/ui/src/ui/controllers/config.ts
index ab6668318..38dc3b0fd 100644
--- a/ui/src/ui/controllers/config.ts
+++ b/ui/src/ui/controllers/config.ts
@@ -28,8 +28,11 @@ export type ConfigState = {
   configSchemaLoading: boolean;
   configUiHints: ConfigUiHints;
   configForm: Record<string, unknown> | null;
+  configFormOriginal: Record<string, unknown> | null;
   configFormDirty: boolean;
   configFormMode: "form" | "raw";
+  configSearchQuery: string;
+  configActiveSection: string | null;
   lastError: string | null;
 };
 
@@ -93,6 +96,7 @@ export function applyConfigSnapshot(state: ConfigState, snapshot: ConfigSnapshot
 
   if (!state.configFormDirty) {
     state.configForm = cloneConfigObject(snapshot.config ?? {});
+    state.configFormOriginal = cloneConfigObject(snapshot.config ?? {});
   }
 }
 
diff --git a/ui/src/ui/views/config-form.node.ts b/ui/src/ui/views/config-form.node.ts
index 8550d8125..76a6e6195 100644
--- a/ui/src/ui/views/config-form.node.ts
+++ b/ui/src/ui/views/config-form.node.ts
@@ -34,9 +34,10 @@ export function renderNode(params: {
   unsupported: Set<string>;
   disabled: boolean;
   showLabel?: boolean;
+  searchQuery?: string;
   onPatch: (path: Array<string | number>, value: unknown) => void;
 }): TemplateResult | typeof nothing {
-  const { schema, value, path, hints, unsupported, disabled, onPatch } = params;
+  const { schema, value, path, hints, unsupported, disabled, onPatch, searchQuery } = params;
   const showLabel = params.showLabel ?? true;
   const type = schemaType(schema);
   const hint = hintForPath(path, hints);
@@ -303,21 +304,24 @@ export function renderNode(params: {
           ? schema.default
           : false;
     return html`
-      <label class="field checkbox">
-        <input
-          type="checkbox"
-          .checked=${displayValue}
-          ?disabled=${disabled}
-          @change=${(e: Event) =>
-            onPatch(path, (e.target as HTMLInputElement).checked)}
-        />
-        ${showLabel ? html`<span>${label}</span>` : nothing}
-        ${help
-          ? html`<div class="muted" style="grid-column: 1 / -1;">
-              ${help}
-            </div>`
-          : nothing}
-      </label>
+      <div class="field-row">
+        <div class="field-row__info">
+          ${showLabel ? html`<span class="field-row__label">${label}</span>` : nothing}
+          ${help ? html`<span class="field-row__help">${help}</span>` : nothing}
+        </div>
+        <label class="toggle-switch">
+          <input
+            type="checkbox"
+            .checked=${displayValue}
+            ?disabled=${disabled}
+            @change=${(e: Event) =>
+              onPatch(path, (e.target as HTMLInputElement).checked)}
+          />
+          <span class="toggle-switch__track">
+            <span class="toggle-switch__thumb"></span>
+          </span>
+        </label>
+      </div>
     `;
   }
 
diff --git a/ui/src/ui/views/config-form.render.ts b/ui/src/ui/views/config-form.render.ts
index bcb7e53bf..21c13c96c 100644
--- a/ui/src/ui/views/config-form.render.ts
+++ b/ui/src/ui/views/config-form.render.ts
@@ -9,45 +9,104 @@ export type ConfigFormProps = {
   value: Record<string, unknown> | null;
   disabled?: boolean;
   unsupportedPaths?: string[];
+  searchQuery?: string;
+  activeSection?: string | null;
   onPatch: (path: Array<string | number>, value: unknown) => void;
 };
 
-// Define logical section groupings
-const SECTION_CONFIG: Record<string, { label: string; icon: string; order: number }> = {
-  // Core
-  env: { label: "Environment", icon: "🔧", order: 0 },
-  update: { label: "Updates", icon: "📦", order: 1 },
-  
-  // Identity & Agents
-  agents: { label: "Agents", icon: "🤖", order: 10 },
-  auth: { label: "Authentication", icon: "🔐", order: 11 },
-  
-  // Communication
-  channels: { label: "Channels", icon: "💬", order: 20 },
-  messages: { label: "Messages", icon: "📨", order: 21 },
-  
-  // Automation
-  commands: { label: "Commands", icon: "⌨️", order: 30 },
-  hooks: { label: "Hooks", icon: "🪝", order: 31 },
-  skills: { label: "Skills", icon: "✨", order: 32 },
-  
-  // Tools & Gateway
-  tools: { label: "Tools", icon: "🛠️", order: 40 },
-  gateway: { label: "Gateway", icon: "🌐", order: 41 },
-  
-  // System
-  wizard: { label: "Setup Wizard", icon: "🧙", order: 50 },
+// Section metadata
+const SECTION_META: Record<string, { label: string; icon: string; description: string }> = {
+  env: { 
+    label: "Environment Variables", 
+    icon: "🔧",
+    description: "Environment variables passed to the gateway process"
+  },
+  update: { 
+    label: "Updates", 
+    icon: "📦",
+    description: "Auto-update settings and release channel"
+  },
+  agents: { 
+    label: "Agents", 
+    icon: "🤖",
+    description: "Agent configurations, models, and identities"
+  },
+  auth: { 
+    label: "Authentication", 
+    icon: "🔐",
+    description: "API keys and authentication profiles"
+  },
+  channels: { 
+    label: "Channels", 
+    icon: "💬",
+    description: "Messaging channels (Telegram, Discord, Slack, etc.)"
+  },
+  messages: { 
+    label: "Messages", 
+    icon: "📨",
+    description: "Message handling and routing settings"
+  },
+  commands: { 
+    label: "Commands", 
+    icon: "⌨️",
+    description: "Custom slash commands"
+  },
+  hooks: { 
+    label: "Hooks", 
+    icon: "🪝",
+    description: "Webhooks and event hooks"
+  },
+  skills: { 
+    label: "Skills", 
+    icon: "✨",
+    description: "Skill packs and capabilities"
+  },
+  tools: { 
+    label: "Tools", 
+    icon: "🛠️",
+    description: "Tool configurations (browser, search, etc.)"
+  },
+  gateway: { 
+    label: "Gateway", 
+    icon: "🌐",
+    description: "Gateway server settings (port, auth, binding)"
+  },
+  wizard: { 
+    label: "Setup Wizard", 
+    icon: "🧙",
+    description: "Setup wizard state and history"
+  },
 };
 
-// Logical groupings for the accordion layout
-const SECTION_GROUPS: Array<{ title: string; keys: string[] }> = [
-  { title: "Core Settings", keys: ["env", "update"] },
-  { title: "Identity & Agents", keys: ["agents", "auth"] },
-  { title: "Communication", keys: ["channels", "messages"] },
-  { title: "Automation", keys: ["commands", "hooks", "skills"] },
-  { title: "Tools & Gateway", keys: ["tools", "gateway"] },
-  { title: "System", keys: ["wizard"] },
-];
+function matchesSearch(key: string, schema: JsonSchema, query: string): boolean {
+  if (!query) return true;
+  const q = query.toLowerCase();
+  const meta = SECTION_META[key];
+  
+  // Check key name
+  if (key.toLowerCase().includes(q)) return true;
+  
+  // Check label and description
+  if (meta) {
+    if (meta.label.toLowerCase().includes(q)) return true;
+    if (meta.description.toLowerCase().includes(q)) return true;
+  }
+  
+  // Check schema title/description
+  if (schema.title?.toLowerCase().includes(q)) return true;
+  if (schema.description?.toLowerCase().includes(q)) return true;
+  
+  // Deep search in properties
+  if (schema.properties) {
+    for (const [propKey, propSchema] of Object.entries(schema.properties)) {
+      if (propKey.toLowerCase().includes(q)) return true;
+      if (propSchema.title?.toLowerCase().includes(q)) return true;
+      if (propSchema.description?.toLowerCase().includes(q)) return true;
+    }
+  }
+  
+  return false;
+}
 
 export function renderConfigForm(props: ConfigFormProps) {
   if (!props.schema) {
@@ -60,76 +119,79 @@ export function renderConfigForm(props: ConfigFormProps) {
   }
   const unsupported = new Set(props.unsupportedPaths ?? []);
   const properties = schema.properties;
-  const allKeys = new Set(Object.keys(properties));
+  const searchQuery = props.searchQuery ?? "";
+  const activeSection = props.activeSection;
 
-  // Collect any keys not in our defined groups
-  const groupedKeys = new Set(SECTION_GROUPS.flatMap(g => g.keys));
-  const ungroupedKeys = [...allKeys].filter(k => !groupedKeys.has(k));
+  // Filter and sort entries
+  let entries = Object.entries(properties);
+  
+  // Filter by active section
+  if (activeSection) {
+    entries = entries.filter(([key]) => key === activeSection);
+  }
+  
+  // Filter by search
+  if (searchQuery) {
+    entries = entries.filter(([key, node]) => matchesSearch(key, node, searchQuery));
+  }
+  
+  // Sort by hint order, then alphabetically
+  entries.sort((a, b) => {
+    const orderA = hintForPath([a[0]], props.uiHints)?.order ?? 50;
+    const orderB = hintForPath([b[0]], props.uiHints)?.order ?? 50;
+    if (orderA !== orderB) return orderA - orderB;
+    return a[0].localeCompare(b[0]);
+  });
 
-  // Build the groups with their entries
-  const groups = SECTION_GROUPS.map(group => {
-    const entries = group.keys
-      .filter(key => allKeys.has(key))
-      .map(key => ({ key, node: properties[key] }));
-    return { ...group, entries };
-  }).filter(group => group.entries.length > 0);
-
-  // Add ungrouped keys as "Other" if any exist
-  if (ungroupedKeys.length > 0) {
-    const sortedUngrouped = ungroupedKeys.sort((a, b) => {
-      const orderA = hintForPath([a], props.uiHints)?.order ?? 100;
-      const orderB = hintForPath([b], props.uiHints)?.order ?? 100;
-      if (orderA !== orderB) return orderA - orderB;
-      return a.localeCompare(b);
-    });
-    groups.push({
-      title: "Other",
-      keys: sortedUngrouped,
-      entries: sortedUngrouped.map(key => ({ key, node: properties[key] })),
-    });
+  if (entries.length === 0) {
+    return html`
+      <div class="config-empty">
+        <div class="config-empty__icon">🔍</div>
+        <div class="config-empty__text">
+          ${searchQuery 
+            ? `No settings match "${searchQuery}"` 
+            : "No settings in this section"}
+        </div>
+      </div>
+    `;
   }
 
   return html`
-    <div class="config-form config-form--sectioned">
-      ${groups.map((group, groupIndex) => html`
-        <details class="config-section" ?open=${groupIndex === 0}>
-          <summary class="config-section__header">
-            <span class="config-section__title">${group.title}</span>
-            <span class="config-section__count">${group.entries.length} ${group.entries.length === 1 ? 'setting' : 'settings'}</span>
-            <svg class="config-section__chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <polyline points="6 9 12 15 18 9"></polyline>
-            </svg>
-          </summary>
-          <div class="config-section__content">
-            ${group.entries.map(({ key, node }) => {
-              const sectionInfo = SECTION_CONFIG[key];
-              const icon = sectionInfo?.icon ?? "📄";
-              const label = sectionInfo?.label ?? key;
-              
-              return html`
-                <div class="config-field-group">
-                  <div class="config-field-group__header">
-                    <span class="config-field-group__icon">${icon}</span>
-                    <span class="config-field-group__label">${label}</span>
-                  </div>
-                  <div class="config-field-group__content">
-                    ${renderNode({
-                      schema: node,
-                      value: (value as Record<string, unknown>)[key],
-                      path: [key],
-                      hints: props.uiHints,
-                      unsupported,
-                      disabled: props.disabled ?? false,
-                      showLabel: false,
-                      onPatch: props.onPatch,
-                    })}
-                  </div>
-                </div>
-              `;
-            })}
-          </div>
-        </details>
-      `)}
+    <div class="config-form config-form--modern">
+      ${entries.map(([key, node]) => {
+        const meta = SECTION_META[key] ?? { 
+          label: key.charAt(0).toUpperCase() + key.slice(1), 
+          icon: "📄",
+          description: node.description ?? ""
+        };
+        
+        return html`
+          <section class="config-section-card" id="config-section-${key}">
+            <div class="config-section-card__header">
+              <span class="config-section-card__icon">${meta.icon}</span>
+              <div class="config-section-card__titles">
+                <h3 class="config-section-card__title">${meta.label}</h3>
+                ${meta.description ? html`
+                  <p class="config-section-card__desc">${meta.description}</p>
+                ` : nothing}
+              </div>
+            </div>
+            <div class="config-section-card__content">
+              ${renderNode({
+                schema: node,
+                value: (value as Record<string, unknown>)[key],
+                path: [key],
+                hints: props.uiHints,
+                unsupported,
+                disabled: props.disabled ?? false,
+                showLabel: false,
+                onPatch: props.onPatch,
+                searchQuery,
+              })}
+            </div>
+          </section>
+        `;
+      })}
     </div>
   `;
 }
diff --git a/ui/src/ui/views/config.ts b/ui/src/ui/views/config.ts
index a87c01b91..6fa9410e6 100644
--- a/ui/src/ui/views/config.ts
+++ b/ui/src/ui/views/config.ts
@@ -16,15 +16,79 @@ export type ConfigProps = {
   uiHints: ConfigUiHints;
   formMode: "form" | "raw";
   formValue: Record<string, unknown> | null;
+  originalValue: Record<string, unknown> | null;
+  searchQuery: string;
+  activeSection: string | null;
   onRawChange: (next: string) => void;
   onFormModeChange: (mode: "form" | "raw") => void;
   onFormPatch: (path: Array<string | number>, value: unknown) => void;
+  onSearchChange: (query: string) => void;
+  onSectionChange: (section: string | null) => void;
   onReload: () => void;
   onSave: () => void;
   onApply: () => void;
   onUpdate: () => void;
 };
 
+// Section definitions with icons
+const SECTIONS: Array<{ key: string; label: string; icon: string }> = [
+  { key: "env", label: "Environment", icon: "🔧" },
+  { key: "update", label: "Updates", icon: "📦" },
+  { key: "agents", label: "Agents", icon: "🤖" },
+  { key: "auth", label: "Authentication", icon: "🔐" },
+  { key: "channels", label: "Channels", icon: "💬" },
+  { key: "messages", label: "Messages", icon: "📨" },
+  { key: "commands", label: "Commands", icon: "⌨️" },
+  { key: "hooks", label: "Hooks", icon: "🪝" },
+  { key: "skills", label: "Skills", icon: "✨" },
+  { key: "tools", label: "Tools", icon: "🛠️" },
+  { key: "gateway", label: "Gateway", icon: "🌐" },
+  { key: "wizard", label: "Setup Wizard", icon: "🧙" },
+];
+
+function computeDiff(
+  original: Record<string, unknown> | null,
+  current: Record<string, unknown> | null
+): Array<{ path: string; from: unknown; to: unknown }> {
+  if (!original || !current) return [];
+  const changes: Array<{ path: string; from: unknown; to: unknown }> = [];
+  
+  function compare(orig: unknown, curr: unknown, path: string) {
+    if (orig === curr) return;
+    if (typeof orig !== typeof curr) {
+      changes.push({ path, from: orig, to: curr });
+      return;
+    }
+    if (typeof orig !== "object" || orig === null || curr === null) {
+      if (orig !== curr) {
+        changes.push({ path, from: orig, to: curr });
+      }
+      return;
+    }
+    if (Array.isArray(orig) && Array.isArray(curr)) {
+      if (JSON.stringify(orig) !== JSON.stringify(curr)) {
+        changes.push({ path, from: orig, to: curr });
+      }
+      return;
+    }
+    const origObj = orig as Record<string, unknown>;
+    const currObj = curr as Record<string, unknown>;
+    const allKeys = new Set([...Object.keys(origObj), ...Object.keys(currObj)]);
+    for (const key of allKeys) {
+      compare(origObj[key], currObj[key], path ? `${path}.${key}` : key);
+    }
+  }
+  
+  compare(original, current, "");
+  return changes;
+}
+
+function truncateValue(value: unknown, maxLen = 40): string {
+  const str = JSON.stringify(value);
+  if (str.length <= maxLen) return str;
+  return str.slice(0, maxLen - 3) + "...";
+}
+
 export function renderConfig(props: ConfigProps) {
   const validity =
     props.valid == null ? "unknown" : props.valid ? "valid" : "invalid";
@@ -45,97 +109,201 @@ export function renderConfig(props: ConfigProps) {
     (props.formMode === "raw" ? true : canSaveForm);
   const canUpdate = props.connected && !props.applying && !props.updating;
 
+  // Get available sections from schema
+  const schemaProps = analysis.schema?.properties ?? {};
+  const availableSections = SECTIONS.filter(s => s.key in schemaProps);
+  
+  // Add any sections in schema but not in our list
+  const knownKeys = new Set(SECTIONS.map(s => s.key));
+  const extraSections = Object.keys(schemaProps)
+    .filter(k => !knownKeys.has(k))
+    .map(k => ({ key: k, label: k.charAt(0).toUpperCase() + k.slice(1), icon: "📄" }));
+  
+  const allSections = [...availableSections, ...extraSections];
+  
+  // Compute diff for showing changes
+  const diff = props.formMode === "form" 
+    ? computeDiff(props.originalValue, props.formValue)
+    : [];
+  const hasChanges = diff.length > 0;
+
   return html`
-    <section class="card">
-      <div class="config-header">
-        <div class="config-header__top">
-          <div class="row">
-            <div class="card-title">Config</div>
-            <span class="pill">${validity}</span>
-          </div>
-          <div class="toggle-group">
+    <div class="config-layout">
+      <!-- Sidebar -->
+      <aside class="config-sidebar">
+        <div class="config-sidebar__header">
+          <div class="config-sidebar__title">Settings</div>
+          <span class="pill pill--sm ${validity === "valid" ? "pill--ok" : validity === "invalid" ? "pill--danger" : ""}">${validity}</span>
+        </div>
+        
+        <!-- Search -->
+        <div class="config-search">
+          <svg class="config-search__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="11" cy="11" r="8"></circle>
+            <path d="M21 21l-4.35-4.35"></path>
+          </svg>
+          <input
+            type="text"
+            class="config-search__input"
+            placeholder="Search settings..."
+            .value=${props.searchQuery}
+            @input=${(e: Event) => props.onSearchChange((e.target as HTMLInputElement).value)}
+          />
+          ${props.searchQuery ? html`
+            <button 
+              class="config-search__clear"
+              @click=${() => props.onSearchChange("")}
+            >×</button>
+          ` : nothing}
+        </div>
+        
+        <!-- Section nav -->
+        <nav class="config-nav">
+          <button
+            class="config-nav__item ${props.activeSection === null ? "active" : ""}"
+            @click=${() => props.onSectionChange(null)}
+          >
+            <span class="config-nav__icon">📋</span>
+            <span class="config-nav__label">All Settings</span>
+          </button>
+          ${allSections.map(section => html`
             <button
-              class="btn btn--sm ${props.formMode === "form" ? "primary" : ""}"
+              class="config-nav__item ${props.activeSection === section.key ? "active" : ""}"
+              @click=${() => props.onSectionChange(section.key)}
+            >
+              <span class="config-nav__icon">${section.icon}</span>
+              <span class="config-nav__label">${section.label}</span>
+            </button>
+          `)}
+        </nav>
+        
+        <!-- Mode toggle at bottom -->
+        <div class="config-sidebar__footer">
+          <div class="config-mode-toggle">
+            <button
+              class="config-mode-toggle__btn ${props.formMode === "form" ? "active" : ""}"
               ?disabled=${props.schemaLoading || !props.schema}
               @click=${() => props.onFormModeChange("form")}
             >
               Form
             </button>
             <button
-              class="btn btn--sm ${props.formMode === "raw" ? "primary" : ""}"
+              class="config-mode-toggle__btn ${props.formMode === "raw" ? "active" : ""}"
               @click=${() => props.onFormModeChange("raw")}
             >
               Raw
             </button>
           </div>
         </div>
-        <div class="config-header__actions">
-          <button class="btn btn--sm" ?disabled=${props.loading} @click=${props.onReload}>
-            ${props.loading ? "Loading…" : "Reload"}
-          </button>
-          <button
-            class="btn btn--sm primary"
-            ?disabled=${!canSave}
-            @click=${props.onSave}
-          >
-            ${props.saving ? "Saving…" : "Save"}
-          </button>
-          <button
-            class="btn btn--sm"
-            ?disabled=${!canApply}
-            @click=${props.onApply}
-          >
-            ${props.applying ? "Applying…" : "Apply"}
-          </button>
-          <button
-            class="btn btn--sm"
-            ?disabled=${!canUpdate}
-            @click=${props.onUpdate}
-          >
-            ${props.updating ? "Updating…" : "Update"}
-          </button>
+      </aside>
+      
+      <!-- Main content -->
+      <main class="config-main">
+        <!-- Action bar -->
+        <div class="config-actions">
+          <div class="config-actions__left">
+            ${hasChanges ? html`
+              <span class="config-changes-badge">${diff.length} unsaved change${diff.length !== 1 ? "s" : ""}</span>
+            ` : html`
+              <span class="config-status muted">No changes</span>
+            `}
+          </div>
+          <div class="config-actions__right">
+            <button class="btn btn--sm" ?disabled=${props.loading} @click=${props.onReload}>
+              ${props.loading ? "Loading…" : "Reload"}
+            </button>
+            <button
+              class="btn btn--sm primary"
+              ?disabled=${!canSave}
+              @click=${props.onSave}
+            >
+              ${props.saving ? "Saving…" : "Save"}
+            </button>
+            <button
+              class="btn btn--sm"
+              ?disabled=${!canApply}
+              @click=${props.onApply}
+            >
+              ${props.applying ? "Applying…" : "Apply"}
+            </button>
+            <button
+              class="btn btn--sm"
+              ?disabled=${!canUpdate}
+              @click=${props.onUpdate}
+            >
+              ${props.updating ? "Updating…" : "Update"}
+            </button>
+          </div>
         </div>
-      </div>
+        
+        <!-- Diff panel -->
+        ${hasChanges ? html`
+          <details class="config-diff">
+            <summary class="config-diff__summary">
+              <span>View ${diff.length} pending change${diff.length !== 1 ? "s" : ""}</span>
+              <svg class="config-diff__chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <polyline points="6 9 12 15 18 9"></polyline>
+              </svg>
+            </summary>
+            <div class="config-diff__content">
+              ${diff.map(change => html`
+                <div class="config-diff__item">
+                  <div class="config-diff__path">${change.path}</div>
+                  <div class="config-diff__values">
+                    <span class="config-diff__from">${truncateValue(change.from)}</span>
+                    <span class="config-diff__arrow">→</span>
+                    <span class="config-diff__to">${truncateValue(change.to)}</span>
+                  </div>
+                </div>
+              `)}
+            </div>
+          </details>
+        ` : nothing}
 
-      <div class="muted" style="margin-top: 10px; font-size: 12px;">
-        Writes to <span class="mono">~/.clawdbot/clawdbot.json</span>. Apply &
-        Update restart the gateway.
-      </div>
+        <!-- Form content -->
+        <div class="config-content">
+          ${props.formMode === "form"
+            ? html`
+                ${props.schemaLoading
+                  ? html`<div class="config-loading">
+                      <div class="config-loading__spinner"></div>
+                      <span>Loading schema…</span>
+                    </div>`
+                  : renderConfigForm({
+                      schema: analysis.schema,
+                      uiHints: props.uiHints,
+                      value: props.formValue,
+                      disabled: props.loading || !props.formValue,
+                      unsupportedPaths: analysis.unsupportedPaths,
+                      onPatch: props.onFormPatch,
+                      searchQuery: props.searchQuery,
+                      activeSection: props.activeSection,
+                    })}
+                ${formUnsafe
+                  ? html`<div class="callout danger" style="margin-top: 12px;">
+                      Form view can't safely edit some fields.
+                      Use Raw to avoid losing config entries.
+                    </div>`
+                  : nothing}
+              `
+            : html`
+                <label class="field config-raw-field">
+                  <span>Raw JSON5</span>
+                  <textarea
+                    .value=${props.raw}
+                    @input=${(e: Event) =>
+                      props.onRawChange((e.target as HTMLTextAreaElement).value)}
+                  ></textarea>
+                </label>
+              `}
+        </div>
 
-
-      ${props.formMode === "form"
-        ? html`<div style="margin-top: 12px;">
-            ${props.schemaLoading
-              ? html`<div class="muted">Loading schema…</div>`
-              : renderConfigForm({
-                  schema: analysis.schema,
-                  uiHints: props.uiHints,
-                  value: props.formValue,
-                  disabled: props.loading || !props.formValue,
-                  unsupportedPaths: analysis.unsupportedPaths,
-                  onPatch: props.onFormPatch,
-                })}
-            ${formUnsafe
-              ? html`<div class="callout danger" style="margin-top: 12px;">
-                  Form view can’t safely edit some fields.
-                  Use Raw to avoid losing config entries.
-                </div>`
-              : nothing}
-          </div>`
-        : html`<label class="field" style="margin-top: 12px;">
-            <span>Raw JSON5</span>
-            <textarea
-              .value=${props.raw}
-              @input=${(e: Event) =>
-                props.onRawChange((e.target as HTMLTextAreaElement).value)}
-            ></textarea>
-          </label>`}
-
-      ${props.issues.length > 0
-        ? html`<div class="callout danger" style="margin-top: 12px;">
-            <pre class="code-block">${JSON.stringify(props.issues, null, 2)}</pre>
-          </div>`
-        : nothing}
-    </section>
+        ${props.issues.length > 0
+          ? html`<div class="callout danger" style="margin-top: 12px;">
+              <pre class="code-block">${JSON.stringify(props.issues, null, 2)}</pre>
+            </div>`
+          : nothing}
+      </main>
+    </div>
   `;
 }

From bd8f4b052d17bf0bf560fa34609ea01327681d6c Mon Sep 17 00:00:00 2001
From: Maude Bot <maude@maudeco.de>
Date: Tue, 20 Jan 2026 11:29:19 -0500
Subject: [PATCH 3/5] chore: remove duplicate config styles from components.css

---
 ui/src/styles/components.css | 250 -----------------------------------
 1 file changed, 250 deletions(-)

diff --git a/ui/src/styles/components.css b/ui/src/styles/components.css
index 18055eadc..435fd59bc 100644
--- a/ui/src/styles/components.css
+++ b/ui/src/styles/components.css
@@ -1274,253 +1274,3 @@
   flex-wrap: wrap;
   gap: 10px;
 }
-
-/* Config Form Sections */
-.config-form--sectioned {
-  display: grid;
-  gap: 12px;
-}
-
-.config-section {
-  border: 1px solid var(--border);
-  border-radius: 14px;
-  background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), transparent 70%),
-    rgba(0, 0, 0, 0.15);
-  overflow: hidden;
-}
-
-:root[data-theme="light"] .config-section {
-  background: linear-gradient(160deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5) 70%);
-}
-
-.config-section__header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 14px 16px;
-  cursor: pointer;
-  user-select: none;
-  border-bottom: 1px solid transparent;
-  transition: background 150ms ease, border-color 150ms ease;
-}
-
-.config-section__header:hover {
-  background: rgba(255, 255, 255, 0.04);
-}
-
-:root[data-theme="light"] .config-section__header:hover {
-  background: rgba(0, 0, 0, 0.03);
-}
-
-.config-section[open] .config-section__header {
-  border-bottom-color: var(--border);
-  background: rgba(255, 255, 255, 0.02);
-}
-
-:root[data-theme="light"] .config-section[open] .config-section__header {
-  background: rgba(0, 0, 0, 0.02);
-}
-
-.config-section__title {
-  font-family: var(--font-display);
-  font-size: 13px;
-  font-weight: 600;
-  letter-spacing: 0.5px;
-  text-transform: uppercase;
-  flex: 1;
-}
-
-.config-section__count {
-  font-size: 11px;
-  color: var(--muted);
-  padding: 3px 8px;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.06);
-  border: 1px solid var(--border);
-}
-
-:root[data-theme="light"] .config-section__count {
-  background: rgba(0, 0, 0, 0.05);
-}
-
-.config-section__chevron {
-  width: 18px;
-  height: 18px;
-  color: var(--muted);
-  transition: transform 200ms ease;
-  flex-shrink: 0;
-}
-
-.config-section[open] .config-section__chevron {
-  transform: rotate(180deg);
-}
-
-.config-section__content {
-  padding: 12px 16px 16px;
-  display: grid;
-  gap: 16px;
-}
-
-.config-field-group {
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  background: rgba(0, 0, 0, 0.12);
-  overflow: hidden;
-}
-
-:root[data-theme="light"] .config-field-group {
-  background: rgba(255, 255, 255, 0.6);
-}
-
-.config-field-group__header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 14px;
-  background: rgba(255, 255, 255, 0.03);
-  border-bottom: 1px solid var(--border);
-}
-
-:root[data-theme="light"] .config-field-group__header {
-  background: rgba(0, 0, 0, 0.03);
-}
-
-.config-field-group__icon {
-  font-size: 16px;
-  line-height: 1;
-}
-
-.config-field-group__label {
-  font-weight: 600;
-  font-size: 13px;
-  letter-spacing: 0.3px;
-}
-
-.config-field-group__content {
-  padding: 14px;
-}
-
-.config-field-group__content .fieldset {
-  border: none;
-  padding: 0;
-  margin: 0;
-}
-
-.config-field-group__content .fieldset > .legend {
-  display: none;
-}
-
-/* Config form field improvements */
-.config-form .fieldset {
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  padding: 12px;
-  margin-top: 8px;
-  background: rgba(0, 0, 0, 0.08);
-}
-
-:root[data-theme="light"] .config-form .fieldset {
-  background: rgba(255, 255, 255, 0.5);
-}
-
-.config-form .fieldset .legend {
-  font-weight: 600;
-  font-size: 12px;
-  letter-spacing: 0.3px;
-  color: var(--text);
-  margin-bottom: 10px;
-  padding-bottom: 8px;
-  border-bottom: 1px dashed var(--border);
-}
-
-.config-form .fieldset .fieldset {
-  margin-top: 12px;
-}
-
-.config-form .array {
-  display: grid;
-  gap: 8px;
-}
-
-.config-form .array-item {
-  display: flex;
-  gap: 10px;
-  align-items: flex-start;
-  padding: 10px;
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  background: rgba(0, 0, 0, 0.1);
-}
-
-:root[data-theme="light"] .config-form .array-item {
-  background: rgba(255, 255, 255, 0.6);
-}
-
-/* Mobile responsiveness */
-@media (max-width: 640px) {
-  .config-section__header {
-    padding: 12px 14px;
-  }
-
-  .config-section__content {
-    padding: 10px 12px 14px;
-  }
-
-  .config-field-group__content {
-    padding: 12px;
-  }
-
-  .config-form .array-item {
-    flex-direction: column;
-  }
-
-  .config-form .array-item > div:first-child {
-    width: 100%;
-  }
-
-  .config-form .array-item .btn {
-    align-self: flex-end;
-  }
-}
-
-/* Config Header Layout */
-.config-header {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.config-header__top {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-
-.config-header__actions {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-@media (max-width: 640px) {
-  .config-header__top {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .config-header__top .row {
-    justify-content: space-between;
-  }
-
-  .config-header__actions {
-    justify-content: flex-end;
-  }
-
-  .config-header__actions .btn {
-    flex: 1;
-    min-width: 70px;
-    text-align: center;
-  }
-}

From f6abe62e5f336f476189e92cbee61afbe15517e4 Mon Sep 17 00:00:00 2001
From: Maude Bot <maude@maudeco.de>
Date: Tue, 20 Jan 2026 11:40:13 -0500
Subject: [PATCH 4/5] feat(ui): major config form UX overhaul
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Sidebar:
- SVG icons instead of emoji (consistent rendering)
- Clean navigation with active states

Form fields completely redesigned:
- Toggle rows: full-width clickable with label + description
- Segmented controls: for enum values with ≤5 options
- Number inputs: with +/- stepper buttons
- Text inputs: with reset-to-default button
- Select dropdowns: clean styling with custom arrow
- Arrays: card-based with clear add/remove, item numbering
- Objects: collapsible sections with chevron animation
- Maps: key-value editor with inline editing

Visual improvements:
- Consistent border radius and spacing
- Better color contrast for labels vs help text
- Hover and focus states throughout
- Icons for common actions (add, remove, reset)

Mobile:
- Horizontal scrolling nav on small screens
- Stacked layouts for complex fields
---
 ui/src/styles/config.css              | 1078 +++++++++++++++++++------
 ui/src/ui/views/config-form.node.ts   |  845 +++++++++++--------
 ui/src/ui/views/config-form.render.ts |   38 +-
 ui/src/ui/views/config.ts             |   56 +-
 4 files changed, 1414 insertions(+), 603 deletions(-)

diff --git a/ui/src/styles/config.css b/ui/src/styles/config.css
index aff3e88b4..641617b30 100644
--- a/ui/src/styles/config.css
+++ b/ui/src/styles/config.css
@@ -5,7 +5,7 @@
 /* Layout Container */
 .config-layout {
   display: grid;
-  grid-template-columns: 260px minmax(0, 1fr);
+  grid-template-columns: 240px minmax(0, 1fr);
   gap: 0;
   min-height: calc(100vh - 140px);
   margin: -16px;
@@ -15,16 +15,18 @@
   background: var(--panel);
 }
 
-/* Sidebar */
+/* ===========================================
+   Sidebar
+   =========================================== */
 .config-sidebar {
   display: flex;
   flex-direction: column;
-  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.25));
+  background: rgba(0, 0, 0, 0.2);
   border-right: 1px solid var(--border);
 }
 
 :root[data-theme="light"] .config-sidebar {
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6));
+  background: rgba(0, 0, 0, 0.03);
 }
 
 .config-sidebar__header {
@@ -36,11 +38,9 @@
 }
 
 .config-sidebar__title {
-  font-family: var(--font-display);
-  font-size: 14px;
   font-weight: 600;
-  letter-spacing: 0.5px;
-  text-transform: uppercase;
+  font-size: 14px;
+  letter-spacing: 0.3px;
 }
 
 .config-sidebar__footer {
@@ -53,11 +53,12 @@
 .config-search {
   position: relative;
   padding: 12px;
+  border-bottom: 1px solid var(--border);
 }
 
 .config-search__icon {
   position: absolute;
-  left: 22px;
+  left: 24px;
   top: 50%;
   transform: translateY(-50%);
   width: 16px;
@@ -68,22 +69,31 @@
 
 .config-search__input {
   width: 100%;
-  padding: 10px 12px 10px 38px;
+  padding: 10px 32px 10px 40px;
   border: 1px solid var(--border);
-  border-radius: 10px;
-  background: rgba(0, 0, 0, 0.2);
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.15);
   font-size: 13px;
   outline: none;
-  transition: border-color 150ms ease, box-shadow 150ms ease;
+  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
+}
+
+.config-search__input::placeholder {
+  color: var(--muted);
 }
 
 .config-search__input:focus {
   border-color: var(--accent);
   box-shadow: 0 0 0 3px var(--focus);
+  background: rgba(0, 0, 0, 0.2);
 }
 
 :root[data-theme="light"] .config-search__input {
-  background: rgba(255, 255, 255, 0.9);
+  background: rgba(255, 255, 255, 0.8);
+}
+
+:root[data-theme="light"] .config-search__input:focus {
+  background: #fff;
 }
 
 .config-search__clear {
@@ -97,7 +107,8 @@
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.1);
   color: var(--muted);
-  font-size: 14px;
+  font-size: 16px;
+  line-height: 1;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -120,21 +131,23 @@
 .config-nav__item {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 12px;
   width: 100%;
   padding: 10px 12px;
   border: none;
-  border-radius: 10px;
+  border-radius: 8px;
   background: transparent;
-  color: var(--text);
+  color: var(--muted);
   font-size: 13px;
+  font-weight: 500;
   text-align: left;
   cursor: pointer;
-  transition: background 150ms ease, transform 100ms ease;
+  transition: background 150ms ease, color 150ms ease;
 }
 
 .config-nav__item:hover {
-  background: rgba(255, 255, 255, 0.06);
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text);
 }
 
 :root[data-theme="light"] .config-nav__item:hover {
@@ -142,18 +155,24 @@
 }
 
 .config-nav__item.active {
-  background: rgba(245, 159, 74, 0.15);
+  background: rgba(245, 159, 74, 0.12);
   color: var(--accent);
 }
 
-.config-nav__item:active {
-  transform: scale(0.98);
+.config-nav__icon {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
 }
 
-.config-nav__icon {
-  font-size: 16px;
-  width: 24px;
-  text-align: center;
+.config-nav__icon svg {
+  width: 18px;
+  height: 18px;
+  stroke: currentColor;
+  fill: none;
 }
 
 .config-nav__label {
@@ -166,27 +185,27 @@
 /* Mode Toggle */
 .config-mode-toggle {
   display: flex;
-  gap: 4px;
-  padding: 4px;
+  padding: 3px;
   background: rgba(0, 0, 0, 0.2);
-  border-radius: 10px;
+  border-radius: 8px;
+  border: 1px solid var(--border);
 }
 
 :root[data-theme="light"] .config-mode-toggle {
-  background: rgba(0, 0, 0, 0.08);
+  background: rgba(0, 0, 0, 0.06);
 }
 
 .config-mode-toggle__btn {
   flex: 1;
   padding: 8px 12px;
   border: none;
-  border-radius: 8px;
+  border-radius: 6px;
   background: transparent;
   color: var(--muted);
   font-size: 12px;
-  font-weight: 500;
+  font-weight: 600;
   cursor: pointer;
-  transition: background 150ms ease, color 150ms ease;
+  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
 }
 
 .config-mode-toggle__btn:hover {
@@ -196,15 +215,17 @@
 .config-mode-toggle__btn.active {
   background: rgba(255, 255, 255, 0.1);
   color: var(--text);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 }
 
 :root[data-theme="light"] .config-mode-toggle__btn.active {
-  background: rgba(255, 255, 255, 0.9);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
-/* Main Content */
+/* ===========================================
+   Main Content
+   =========================================== */
 .config-main {
   display: flex;
   flex-direction: column;
@@ -218,13 +239,13 @@
   align-items: center;
   justify-content: space-between;
   gap: 12px;
-  padding: 12px 16px;
-  background: rgba(0, 0, 0, 0.1);
+  padding: 12px 20px;
+  background: rgba(0, 0, 0, 0.08);
   border-bottom: 1px solid var(--border);
 }
 
 :root[data-theme="light"] .config-actions {
-  background: rgba(0, 0, 0, 0.03);
+  background: rgba(0, 0, 0, 0.02);
 }
 
 .config-actions__left,
@@ -235,40 +256,37 @@
 }
 
 .config-changes-badge {
-  padding: 4px 10px;
+  padding: 5px 12px;
   border-radius: 999px;
-  background: rgba(245, 159, 74, 0.2);
-  border: 1px solid rgba(245, 159, 74, 0.4);
+  background: rgba(245, 159, 74, 0.15);
+  border: 1px solid rgba(245, 159, 74, 0.3);
   color: var(--accent);
   font-size: 12px;
-  font-weight: 500;
+  font-weight: 600;
 }
 
 .config-status {
-  font-size: 12px;
+  font-size: 13px;
+  color: var(--muted);
 }
 
 /* Diff Panel */
 .config-diff {
-  margin: 12px 16px;
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  background: rgba(0, 0, 0, 0.15);
-  overflow: hidden;
-}
-
-:root[data-theme="light"] .config-diff {
+  margin: 16px 20px 0;
+  border: 1px solid rgba(245, 159, 74, 0.3);
+  border-radius: 10px;
   background: rgba(245, 159, 74, 0.05);
+  overflow: hidden;
 }
 
 .config-diff__summary {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 10px 14px;
+  padding: 12px 16px;
   cursor: pointer;
   font-size: 13px;
-  font-weight: 500;
+  font-weight: 600;
   color: var(--accent);
   list-style: none;
 }
@@ -283,46 +301,53 @@
   transition: transform 200ms ease;
 }
 
+.config-diff__chevron svg {
+  width: 100%;
+  height: 100%;
+}
+
 .config-diff[open] .config-diff__chevron {
   transform: rotate(180deg);
 }
 
 .config-diff__content {
-  padding: 0 14px 14px;
+  padding: 0 16px 16px;
   display: grid;
   gap: 8px;
 }
 
 .config-diff__item {
-  padding: 8px 10px;
-  border-radius: 8px;
-  background: rgba(0, 0, 0, 0.15);
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  padding: 8px 12px;
+  border-radius: 6px;
+  background: rgba(0, 0, 0, 0.1);
   font-size: 12px;
+  font-family: var(--mono);
 }
 
 :root[data-theme="light"] .config-diff__item {
-  background: rgba(255, 255, 255, 0.8);
+  background: rgba(255, 255, 255, 0.6);
 }
 
 .config-diff__path {
-  font-family: var(--mono);
   font-weight: 600;
-  margin-bottom: 4px;
   color: var(--text);
+  flex-shrink: 0;
 }
 
 .config-diff__values {
   display: flex;
-  align-items: center;
+  align-items: baseline;
   gap: 8px;
-  font-family: var(--mono);
-  color: var(--muted);
+  min-width: 0;
+  flex-wrap: wrap;
 }
 
 .config-diff__from {
   color: var(--danger);
-  text-decoration: line-through;
-  opacity: 0.7;
+  opacity: 0.8;
 }
 
 .config-diff__arrow {
@@ -337,13 +362,14 @@
 .config-content {
   flex: 1;
   overflow-y: auto;
-  padding: 16px;
+  padding: 20px;
 }
 
 .config-raw-field textarea {
-  min-height: 400px;
+  min-height: 500px;
   font-family: var(--mono);
   font-size: 13px;
+  line-height: 1.5;
 }
 
 /* Loading State */
@@ -352,14 +378,14 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 12px;
-  padding: 60px 20px;
+  gap: 16px;
+  padding: 80px 20px;
   color: var(--muted);
 }
 
 .config-loading__spinner {
-  width: 32px;
-  height: 32px;
+  width: 36px;
+  height: 36px;
   border: 3px solid var(--border);
   border-top-color: var(--accent);
   border-radius: 50%;
@@ -376,45 +402,46 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 12px;
-  padding: 60px 20px;
+  gap: 16px;
+  padding: 80px 20px;
   text-align: center;
 }
 
 .config-empty__icon {
-  font-size: 48px;
-  opacity: 0.5;
+  font-size: 56px;
+  opacity: 0.4;
 }
 
 .config-empty__text {
   color: var(--muted);
-  font-size: 14px;
+  font-size: 15px;
 }
 
-/* Section Cards */
+/* ===========================================
+   Section Cards
+   =========================================== */
 .config-form--modern {
   display: grid;
-  gap: 16px;
+  gap: 24px;
 }
 
 .config-section-card {
   border: 1px solid var(--border);
-  border-radius: 14px;
-  background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), transparent 70%),
-    rgba(0, 0, 0, 0.12);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.02);
   overflow: hidden;
 }
 
 :root[data-theme="light"] .config-section-card {
-  background: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7) 70%);
+  background: rgba(255, 255, 255, 0.5);
 }
 
 .config-section-card__header {
   display: flex;
   align-items: flex-start;
-  gap: 12px;
-  padding: 16px;
-  background: rgba(255, 255, 255, 0.02);
+  gap: 14px;
+  padding: 18px 20px;
+  background: rgba(0, 0, 0, 0.06);
   border-bottom: 1px solid var(--border);
 }
 
@@ -423,9 +450,15 @@
 }
 
 .config-section-card__icon {
-  font-size: 24px;
-  line-height: 1;
-  padding-top: 2px;
+  width: 32px;
+  height: 32px;
+  color: var(--accent);
+  flex-shrink: 0;
+}
+
+.config-section-card__icon svg {
+  width: 100%;
+  height: 100%;
 }
 
 .config-section-card__titles {
@@ -435,9 +468,8 @@
 
 .config-section-card__title {
   margin: 0;
-  font-size: 16px;
+  font-size: 17px;
   font-weight: 600;
-  letter-spacing: 0.2px;
 }
 
 .config-section-card__desc {
@@ -448,99 +480,312 @@
 }
 
 .config-section-card__content {
-  padding: 16px;
+  padding: 20px;
 }
 
-/* Toggle Switch */
-.toggle-switch {
-  position: relative;
-  display: inline-flex;
-  cursor: pointer;
+/* ===========================================
+   Form Fields
+   =========================================== */
+.cfg-fields {
+  display: grid;
+  gap: 20px;
 }
 
-.toggle-switch input {
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
+.cfg-field {
+  display: grid;
+  gap: 6px;
 }
 
-.toggle-switch__track {
-  position: relative;
-  width: 44px;
-  height: 24px;
-  background: rgba(255, 255, 255, 0.15);
+.cfg-field--error {
+  padding: 12px;
+  border-radius: 8px;
+  background: rgba(255, 92, 92, 0.1);
+  border: 1px solid rgba(255, 92, 92, 0.3);
+}
+
+.cfg-field__label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.cfg-field__help {
+  font-size: 12px;
+  color: var(--muted);
+  line-height: 1.4;
+}
+
+.cfg-field__error {
+  font-size: 12px;
+  color: var(--danger);
+}
+
+/* Text Input */
+.cfg-input-wrap {
+  display: flex;
+  gap: 8px;
+}
+
+.cfg-input {
+  flex: 1;
+  padding: 10px 12px;
   border: 1px solid var(--border);
-  border-radius: 999px;
-  transition: background 200ms ease, border-color 200ms ease;
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.12);
+  font-size: 14px;
+  outline: none;
+  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
 }
 
-:root[data-theme="light"] .toggle-switch__track {
-  background: rgba(0, 0, 0, 0.1);
+.cfg-input::placeholder {
+  color: var(--muted);
+  opacity: 0.7;
 }
 
-.toggle-switch__thumb {
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 18px;
-  height: 18px;
-  background: var(--text);
-  border-radius: 50%;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-  transition: transform 200ms ease, background 200ms ease;
-}
-
-.toggle-switch input:checked + .toggle-switch__track {
-  background: rgba(43, 217, 127, 0.3);
-  border-color: rgba(43, 217, 127, 0.5);
-}
-
-.toggle-switch input:checked + .toggle-switch__track .toggle-switch__thumb {
-  transform: translateX(20px);
-  background: var(--ok);
-}
-
-.toggle-switch input:focus + .toggle-switch__track {
+.cfg-input:focus {
+  border-color: var(--accent);
   box-shadow: 0 0 0 3px var(--focus);
+  background: rgba(0, 0, 0, 0.18);
 }
 
-.toggle-switch input:disabled + .toggle-switch__track {
+:root[data-theme="light"] .cfg-input {
+  background: #fff;
+}
+
+:root[data-theme="light"] .cfg-input:focus {
+  background: #fff;
+}
+
+.cfg-input--sm {
+  padding: 8px 10px;
+  font-size: 13px;
+}
+
+.cfg-input__reset {
+  padding: 8px 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--muted);
+  font-size: 14px;
+  cursor: pointer;
+  transition: background 150ms ease, color 150ms ease;
+}
+
+.cfg-input__reset:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text);
+}
+
+.cfg-input__reset:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
 
-/* Field Row (for toggles) */
-.field-row {
+/* Textarea */
+.cfg-textarea {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.12);
+  font-family: var(--mono);
+  font-size: 13px;
+  line-height: 1.5;
+  resize: vertical;
+  outline: none;
+  transition: border-color 150ms ease, box-shadow 150ms ease;
+}
+
+.cfg-textarea:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--focus);
+}
+
+:root[data-theme="light"] .cfg-textarea {
+  background: #fff;
+}
+
+.cfg-textarea--sm {
+  padding: 8px 10px;
+  font-size: 12px;
+}
+
+/* Number Input */
+.cfg-number {
+  display: inline-flex;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.12);
+}
+
+:root[data-theme="light"] .cfg-number {
+  background: #fff;
+}
+
+.cfg-number__btn {
+  width: 40px;
+  border: none;
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text);
+  font-size: 18px;
+  font-weight: 300;
+  cursor: pointer;
+  transition: background 150ms ease;
+}
+
+.cfg-number__btn:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.cfg-number__btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+:root[data-theme="light"] .cfg-number__btn {
+  background: rgba(0, 0, 0, 0.03);
+}
+
+:root[data-theme="light"] .cfg-number__btn:hover:not(:disabled) {
+  background: rgba(0, 0, 0, 0.06);
+}
+
+.cfg-number__input {
+  width: 80px;
+  padding: 10px;
+  border: none;
+  border-left: 1px solid var(--border);
+  border-right: 1px solid var(--border);
+  background: transparent;
+  font-size: 14px;
+  text-align: center;
+  outline: none;
+  -moz-appearance: textfield;
+}
+
+.cfg-number__input::-webkit-outer-spin-button,
+.cfg-number__input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Select */
+.cfg-select {
+  padding: 10px 36px 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background-color: rgba(0, 0, 0, 0.12);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  font-size: 14px;
+  cursor: pointer;
+  outline: none;
+  appearance: none;
+  transition: border-color 150ms ease, box-shadow 150ms ease;
+}
+
+.cfg-select:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--focus);
+}
+
+:root[data-theme="light"] .cfg-select {
+  background-color: #fff;
+}
+
+/* Segmented Control */
+.cfg-segmented {
+  display: inline-flex;
+  padding: 3px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.12);
+}
+
+:root[data-theme="light"] .cfg-segmented {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.cfg-segmented__btn {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--muted);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
+}
+
+.cfg-segmented__btn:hover:not(:disabled):not(.active) {
+  color: var(--text);
+}
+
+.cfg-segmented__btn.active {
+  background: rgba(255, 255, 255, 0.12);
+  color: var(--text);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+:root[data-theme="light"] .cfg-segmented__btn.active {
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.cfg-segmented__btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Toggle Row */
+.cfg-toggle-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
-  padding: 12px 0;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  padding: 14px 16px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.06);
+  cursor: pointer;
+  transition: background 150ms ease, border-color 150ms ease;
 }
 
-:root[data-theme="light"] .field-row {
-  border-bottom-color: rgba(0, 0, 0, 0.06);
+.cfg-toggle-row:hover:not(.disabled) {
+  background: rgba(0, 0, 0, 0.1);
+  border-color: var(--border-strong);
 }
 
-.field-row:last-child {
-  border-bottom: none;
+.cfg-toggle-row.disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
 }
 
-.field-row__info {
+:root[data-theme="light"] .cfg-toggle-row {
+  background: rgba(255, 255, 255, 0.5);
+}
+
+:root[data-theme="light"] .cfg-toggle-row:hover:not(.disabled) {
+  background: rgba(255, 255, 255, 0.8);
+}
+
+.cfg-toggle-row__content {
   flex: 1;
   min-width: 0;
 }
 
-.field-row__label {
+.cfg-toggle-row__label {
   display: block;
   font-size: 14px;
   font-weight: 500;
   color: var(--text);
 }
 
-.field-row__help {
+.cfg-toggle-row__help {
   display: block;
   margin-top: 2px;
   font-size: 12px;
@@ -548,89 +793,411 @@
   line-height: 1.4;
 }
 
-/* Pills */
-.pill--sm {
+/* Toggle Switch */
+.cfg-toggle {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.cfg-toggle input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.cfg-toggle__track {
+  display: block;
+  width: 48px;
+  height: 28px;
+  background: rgba(255, 255, 255, 0.12);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  position: relative;
+  transition: background 200ms ease, border-color 200ms ease;
+}
+
+:root[data-theme="light"] .cfg-toggle__track {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.cfg-toggle__track::after {
+  content: "";
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 20px;
+  height: 20px;
+  background: var(--text);
+  border-radius: 50%;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  transition: transform 200ms ease, background 200ms ease;
+}
+
+.cfg-toggle input:checked + .cfg-toggle__track {
+  background: rgba(43, 217, 127, 0.25);
+  border-color: rgba(43, 217, 127, 0.5);
+}
+
+.cfg-toggle input:checked + .cfg-toggle__track::after {
+  transform: translateX(20px);
+  background: var(--ok);
+}
+
+.cfg-toggle input:focus + .cfg-toggle__track {
+  box-shadow: 0 0 0 3px var(--focus);
+}
+
+/* Object (collapsible) */
+.cfg-object {
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.04);
+  overflow: hidden;
+}
+
+:root[data-theme="light"] .cfg-object {
+  background: rgba(255, 255, 255, 0.4);
+}
+
+.cfg-object__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  cursor: pointer;
+  list-style: none;
+  transition: background 150ms ease;
+}
+
+.cfg-object__header:hover {
+  background: rgba(255, 255, 255, 0.03);
+}
+
+:root[data-theme="light"] .cfg-object__header:hover {
+  background: rgba(0, 0, 0, 0.02);
+}
+
+.cfg-object__header::-webkit-details-marker {
+  display: none;
+}
+
+.cfg-object__title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.cfg-object__chevron {
+  width: 18px;
+  height: 18px;
+  color: var(--muted);
+  transition: transform 200ms ease;
+}
+
+.cfg-object__chevron svg {
+  width: 100%;
+  height: 100%;
+}
+
+.cfg-object[open] .cfg-object__chevron {
+  transform: rotate(180deg);
+}
+
+.cfg-object__help {
+  padding: 0 16px 12px;
+  font-size: 12px;
+  color: var(--muted);
+  border-bottom: 1px solid var(--border);
+}
+
+.cfg-object__content {
+  padding: 16px;
+  display: grid;
+  gap: 16px;
+}
+
+/* Array */
+.cfg-array {
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.cfg-array__header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  background: rgba(0, 0, 0, 0.06);
+  border-bottom: 1px solid var(--border);
+}
+
+:root[data-theme="light"] .cfg-array__header {
+  background: rgba(0, 0, 0, 0.02);
+}
+
+.cfg-array__label {
+  flex: 1;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.cfg-array__count {
+  font-size: 12px;
+  color: var(--muted);
   padding: 3px 8px;
-  font-size: 10px;
+  background: rgba(255, 255, 255, 0.06);
+  border-radius: 999px;
+}
+
+:root[data-theme="light"] .cfg-array__count {
+  background: rgba(0, 0, 0, 0.06);
+}
+
+.cfg-array__add {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 150ms ease;
+}
+
+.cfg-array__add:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.cfg-array__add:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.cfg-array__add-icon {
+  width: 14px;
+  height: 14px;
+}
+
+.cfg-array__add-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.cfg-array__help {
+  padding: 10px 16px;
+  font-size: 12px;
+  color: var(--muted);
+  border-bottom: 1px solid var(--border);
+}
+
+.cfg-array__empty {
+  padding: 32px 16px;
+  text-align: center;
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.cfg-array__items {
+  display: grid;
+  gap: 1px;
+  background: var(--border);
+}
+
+.cfg-array__item {
+  background: var(--panel);
+}
+
+.cfg-array__item-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  background: rgba(0, 0, 0, 0.04);
+  border-bottom: 1px solid var(--border);
+}
+
+:root[data-theme="light"] .cfg-array__item-header {
+  background: rgba(0, 0, 0, 0.02);
+}
+
+.cfg-array__item-index {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.cfg-array__item-remove {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+  transition: background 150ms ease, color 150ms ease;
+}
+
+.cfg-array__item-remove svg {
+  width: 16px;
+  height: 16px;
+}
+
+.cfg-array__item-remove:hover:not(:disabled) {
+  background: rgba(255, 92, 92, 0.15);
+  color: var(--danger);
+}
+
+.cfg-array__item-remove:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.cfg-array__item-content {
+  padding: 16px;
+}
+
+/* Map (custom entries) */
+.cfg-map {
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.cfg-map__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 16px;
+  background: rgba(0, 0, 0, 0.06);
+  border-bottom: 1px solid var(--border);
+}
+
+:root[data-theme="light"] .cfg-map__header {
+  background: rgba(0, 0, 0, 0.02);
+}
+
+.cfg-map__label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--muted);
+}
+
+.cfg-map__add {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 150ms ease;
+}
+
+.cfg-map__add:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.cfg-map__add-icon {
+  width: 14px;
+  height: 14px;
+}
+
+.cfg-map__add-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.cfg-map__empty {
+  padding: 24px 16px;
+  text-align: center;
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.cfg-map__items {
+  display: grid;
+  gap: 8px;
+  padding: 12px;
+}
+
+.cfg-map__item {
+  display: grid;
+  grid-template-columns: 140px 1fr auto;
+  gap: 8px;
+  align-items: start;
+}
+
+.cfg-map__item-key {
+  min-width: 0;
+}
+
+.cfg-map__item-value {
+  min-width: 0;
+}
+
+.cfg-map__item-remove {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+  transition: background 150ms ease, color 150ms ease;
+}
+
+.cfg-map__item-remove svg {
+  width: 16px;
+  height: 16px;
+}
+
+.cfg-map__item-remove:hover:not(:disabled) {
+  background: rgba(255, 92, 92, 0.15);
+  color: var(--danger);
+}
+
+/* Pill variants */
+.pill--sm {
+  padding: 4px 10px;
+  font-size: 11px;
 }
 
 .pill--ok {
-  border-color: rgba(43, 217, 127, 0.5);
+  border-color: rgba(43, 217, 127, 0.4);
   color: var(--ok);
 }
 
 .pill--danger {
-  border-color: rgba(255, 92, 92, 0.5);
+  border-color: rgba(255, 92, 92, 0.4);
   color: var(--danger);
 }
 
-/* Improved Fieldset */
-.config-form--modern .fieldset {
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  padding: 14px;
-  margin-top: 12px;
-  background: rgba(0, 0, 0, 0.08);
-}
-
-:root[data-theme="light"] .config-form--modern .fieldset {
-  background: rgba(255, 255, 255, 0.5);
-}
-
-.config-form--modern .fieldset > .legend {
-  font-weight: 600;
-  font-size: 13px;
-  color: var(--text);
-  margin-bottom: 12px;
-  padding-bottom: 10px;
-  border-bottom: 1px dashed var(--border);
-}
-
-.config-form--modern .field {
-  margin-bottom: 12px;
-}
-
-.config-form--modern .field:last-child {
-  margin-bottom: 0;
-}
-
-.config-form--modern .field span {
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--muted);
-}
-
-.config-form--modern .field input,
-.config-form--modern .field select,
-.config-form--modern .field textarea {
-  font-size: 14px;
-}
-
-/* Array improvements */
-.config-form--modern .array {
-  display: grid;
-  gap: 10px;
-}
-
-.config-form--modern .array-item {
-  display: flex;
-  gap: 12px;
-  align-items: flex-start;
-  padding: 12px;
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  background: rgba(0, 0, 0, 0.1);
-}
-
-:root[data-theme="light"] .config-form--modern .array-item {
-  background: rgba(255, 255, 255, 0.6);
-}
-
-/* Mobile Responsiveness */
+/* ===========================================
+   Mobile Responsiveness
+   =========================================== */
 @media (max-width: 768px) {
   .config-layout {
     grid-template-columns: 1fr;
-    min-height: auto;
   }
 
   .config-sidebar {
@@ -638,22 +1205,27 @@
     border-bottom: 1px solid var(--border);
   }
 
+  .config-sidebar__header {
+    padding: 12px 16px;
+  }
+
   .config-nav {
     display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-    padding: 12px;
-    max-height: none;
-    overflow: visible;
+    flex-wrap: nowrap;
+    gap: 4px;
+    padding: 8px 12px;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
   }
 
   .config-nav__item {
     flex: 0 0 auto;
     padding: 8px 12px;
+    white-space: nowrap;
   }
 
-  .config-nav__icon {
-    width: auto;
+  .config-nav__label {
+    display: inline;
   }
 
   .config-sidebar__footer {
@@ -662,47 +1234,67 @@
 
   .config-actions {
     flex-wrap: wrap;
+    padding: 12px 16px;
   }
 
-  .config-actions__left {
-    width: 100%;
-    justify-content: center;
-  }
-
+  .config-actions__left,
   .config-actions__right {
     width: 100%;
     justify-content: center;
   }
 
-  .config-diff__values {
-    flex-wrap: wrap;
+  .config-content {
+    padding: 16px;
   }
 
-  .field-row {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 10px;
+  .config-section-card__header {
+    padding: 14px 16px;
   }
 
-  .config-form--modern .array-item {
-    flex-direction: column;
+  .config-section-card__content {
+    padding: 16px;
+  }
+
+  .cfg-toggle-row {
+    padding: 12px 14px;
+  }
+
+  .cfg-map__item {
+    grid-template-columns: 1fr;
+    gap: 8px;
+  }
+
+  .cfg-map__item-remove {
+    justify-self: end;
   }
 }
 
 @media (max-width: 480px) {
+  .config-nav__icon {
+    width: 24px;
+    height: 24px;
+    font-size: 16px;
+  }
+
   .config-nav__label {
     display: none;
   }
 
-  .config-nav__item {
-    padding: 10px;
+  .config-section-card__icon {
+    width: 28px;
+    height: 28px;
   }
 
-  .config-section-card__header {
-    padding: 12px;
+  .config-section-card__title {
+    font-size: 15px;
   }
 
-  .config-section-card__content {
-    padding: 12px;
+  .cfg-segmented {
+    flex-wrap: wrap;
+  }
+
+  .cfg-segmented__btn {
+    flex: 1 0 auto;
+    min-width: 60px;
   }
 }
diff --git a/ui/src/ui/views/config-form.node.ts b/ui/src/ui/views/config-form.node.ts
index 76a6e6195..6024c2407 100644
--- a/ui/src/ui/views/config-form.node.ts
+++ b/ui/src/ui/views/config-form.node.ts
@@ -26,6 +26,15 @@ function jsonValue(value: unknown): string {
   }
 }
 
+// SVG Icons as template literals
+const icons = {
+  chevronDown: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>`,
+  plus: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>`,
+  minus: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line></svg>`,
+  trash: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>`,
+  edit: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>`,
+};
+
 export function renderNode(params: {
   schema: JsonSchema;
   value: unknown;
@@ -44,27 +53,29 @@ export function renderNode(params: {
   const label = hint?.label ?? schema.title ?? humanize(String(path.at(-1)));
   const help = hint?.help ?? schema.description;
   const key = pathKey(path);
+  const hasDefault = schema.default !== undefined;
+  const isDefault = hasDefault && JSON.stringify(value) === JSON.stringify(schema.default);
+  const isEmpty = value === undefined || value === null || value === "";
 
   if (unsupported.has(key)) {
-    return html`<div class="callout danger">
-      ${label}: unsupported schema node. Use Raw.
+    return html`<div class="cfg-field cfg-field--error">
+      <div class="cfg-field__label">${label}</div>
+      <div class="cfg-field__error">Unsupported schema node. Use Raw mode.</div>
     </div>`;
   }
 
+  // Handle anyOf/oneOf unions
   if (schema.anyOf || schema.oneOf) {
     const variants = schema.anyOf ?? schema.oneOf ?? [];
     const nonNull = variants.filter(
-      (v) =>
-        !(
-          v.type === "null" ||
-          (Array.isArray(v.type) && v.type.includes("null"))
-        ),
+      (v) => !(v.type === "null" || (Array.isArray(v.type) && v.type.includes("null")))
     );
 
     if (nonNull.length === 1) {
       return renderNode({ ...params, schema: nonNull[0] });
     }
 
+    // Check if it's a set of literal values (enum-like)
     const extractLiteral = (v: JsonSchema): unknown | undefined => {
       if (v.const !== undefined) return v.const;
       if (v.enum && v.enum.length === 1) return v.enum[0];
@@ -73,137 +84,314 @@ export function renderNode(params: {
     const literals = nonNull.map(extractLiteral);
     const allLiterals = literals.every((v) => v !== undefined);
 
-    if (allLiterals && literals.length > 0) {
+    if (allLiterals && literals.length > 0 && literals.length <= 5) {
+      // Use segmented control for small sets
       const resolvedValue = value ?? schema.default;
-      const currentIndex = literals.findIndex(
-        (lit) =>
-          lit === resolvedValue || String(lit) === String(resolvedValue),
-      );
       return html`
-        <label class="field">
-          ${showLabel ? html`<span>${label}</span>` : nothing}
-          ${help ? html`<div class="muted">${help}</div>` : nothing}
-          <select
-            .value=${currentIndex >= 0 ? String(currentIndex) : ""}
-            ?disabled=${disabled}
-            @change=${(e: Event) => {
-              const idx = (e.target as HTMLSelectElement).value;
-              onPatch(path, idx === "" ? undefined : literals[Number(idx)]);
-            }}
-          >
-            <option value="">Select…</option>
-            ${literals.map(
-              (lit, idx) =>
-                html`<option value=${String(idx)}>${String(lit)}</option>`,
-            )}
-          </select>
-        </label>
+        <div class="cfg-field">
+          ${showLabel ? html`<label class="cfg-field__label">${label}</label>` : nothing}
+          ${help ? html`<div class="cfg-field__help">${help}</div>` : nothing}
+          <div class="cfg-segmented">
+            ${literals.map((lit, idx) => html`
+              <button
+                type="button"
+                class="cfg-segmented__btn ${lit === resolvedValue || String(lit) === String(resolvedValue) ? 'active' : ''}"
+                ?disabled=${disabled}
+                @click=${() => onPatch(path, lit)}
+              >
+                ${String(lit)}
+              </button>
+            `)}
+          </div>
+        </div>
       `;
     }
 
+    if (allLiterals && literals.length > 5) {
+      // Use dropdown for larger sets
+      return renderSelect({ ...params, options: literals.map(String), value: String(value ?? schema.default ?? "") });
+    }
+
+    // Handle mixed primitive types
     const primitiveTypes = new Set(
-      nonNull
-        .map((variant) => schemaType(variant))
-        .filter((variant): variant is string => Boolean(variant)),
+      nonNull.map((variant) => schemaType(variant)).filter(Boolean)
     );
     const normalizedTypes = new Set(
-      [...primitiveTypes].map((variant) => (variant === "integer" ? "number" : variant)),
-    );
-    const primitiveOnly = [...normalizedTypes].every((variant) =>
-      ["string", "number", "boolean"].includes(variant),
+      [...primitiveTypes].map((v) => (v === "integer" ? "number" : v))
     );
 
-    if (primitiveOnly && normalizedTypes.size > 0) {
+    if ([...normalizedTypes].every((v) => ["string", "number", "boolean"].includes(v as string))) {
       const hasString = normalizedTypes.has("string");
       const hasNumber = normalizedTypes.has("number");
-      const hasBoolean = normalizedTypes.has("boolean");
-
-      if (hasBoolean && normalizedTypes.size === 1) {
-        return renderNode({
-          ...params,
-          schema: { ...schema, type: "boolean", anyOf: undefined, oneOf: undefined },
-        });
-      }
-
+      
       if (hasString || hasNumber) {
-        const displayValue = value ?? schema.default ?? "";
-        return html`
-          <label class="field">
-            ${showLabel ? html`<span>${label}</span>` : nothing}
-            ${help ? html`<div class="muted">${help}</div>` : nothing}
-            <input
-              type=${hasNumber && !hasString ? "number" : "text"}
-              .value=${displayValue == null ? "" : String(displayValue)}
-              ?disabled=${disabled}
-              @input=${(e: Event) => {
-                const raw = (e.target as HTMLInputElement).value;
-                if (hasString || !hasNumber || raw.trim() === "" || /[^0-9-.]/.test(raw)) {
-                  onPatch(path, raw === "" ? undefined : raw);
-                  return;
-                }
-                const parsed = Number(raw);
-                onPatch(path, Number.isNaN(parsed) ? raw : parsed);
-              }}
-            />
-          </label>
-        `;
+        return renderTextInput({
+          ...params,
+          inputType: hasNumber && !hasString ? "number" : "text",
+        });
       }
     }
   }
 
+  // Enum - use segmented for small, dropdown for large
   if (schema.enum) {
     const options = schema.enum;
-    const resolvedValue = value ?? schema.default;
-    const currentIndex = options.findIndex(
-      (opt) =>
-        opt === resolvedValue || String(opt) === String(resolvedValue),
-    );
-    const unset = "__unset__";
+    if (options.length <= 5) {
+      const resolvedValue = value ?? schema.default;
+      return html`
+        <div class="cfg-field">
+          ${showLabel ? html`<label class="cfg-field__label">${label}</label>` : nothing}
+          ${help ? html`<div class="cfg-field__help">${help}</div>` : nothing}
+          <div class="cfg-segmented">
+            ${options.map((opt) => html`
+              <button
+                type="button"
+                class="cfg-segmented__btn ${opt === resolvedValue || String(opt) === String(resolvedValue) ? 'active' : ''}"
+                ?disabled=${disabled}
+                @click=${() => onPatch(path, opt)}
+              >
+                ${String(opt)}
+              </button>
+            `)}
+          </div>
+        </div>
+      `;
+    }
+    return renderSelect({ ...params, options: options.map(String), value: String(value ?? schema.default ?? "") });
+  }
+
+  // Object type - collapsible section
+  if (type === "object") {
+    return renderObject(params);
+  }
+
+  // Array type
+  if (type === "array") {
+    return renderArray(params);
+  }
+
+  // Boolean - toggle row
+  if (type === "boolean") {
+    const displayValue = typeof value === "boolean" ? value : typeof schema.default === "boolean" ? schema.default : false;
     return html`
-      <label class="field">
-        ${showLabel ? html`<span>${label}</span>` : nothing}
-        ${help ? html`<div class="muted">${help}</div>` : nothing}
-        <select
-          .value=${currentIndex >= 0 ? String(currentIndex) : unset}
-          ?disabled=${disabled}
-          @change=${(e: Event) => {
-            const idx = (e.target as HTMLSelectElement).value;
-            onPatch(path, idx === unset ? undefined : options[Number(idx)]);
-          }}
-        >
-          <option value=${unset}>Select…</option>
-          ${options.map(
-            (opt, idx) =>
-              html`<option value=${String(idx)}>${String(opt)}</option>`,
-          )}
-        </select>
+      <label class="cfg-toggle-row ${disabled ? 'disabled' : ''}">
+        <div class="cfg-toggle-row__content">
+          <span class="cfg-toggle-row__label">${label}</span>
+          ${help ? html`<span class="cfg-toggle-row__help">${help}</span>` : nothing}
+        </div>
+        <div class="cfg-toggle">
+          <input
+            type="checkbox"
+            .checked=${displayValue}
+            ?disabled=${disabled}
+            @change=${(e: Event) => onPatch(path, (e.target as HTMLInputElement).checked)}
+          />
+          <span class="cfg-toggle__track"></span>
+        </div>
       </label>
     `;
   }
 
-  if (type === "object") {
-    const fallback = value ?? schema.default;
-    const obj =
-      fallback && typeof fallback === "object" && !Array.isArray(fallback)
-        ? (fallback as Record<string, unknown>)
-        : {};
-    const props = schema.properties ?? {};
-    const entries = Object.entries(props);
-    const sorted = entries.sort((a, b) => {
-      const orderA = hintForPath([...path, a[0]], hints)?.order ?? 0;
-      const orderB = hintForPath([...path, b[0]], hints)?.order ?? 0;
-      if (orderA !== orderB) return orderA - orderB;
-      return a[0].localeCompare(b[0]);
-    });
-    const reserved = new Set(Object.keys(props));
-    const additional = schema.additionalProperties;
-    const allowExtra = Boolean(additional) && typeof additional === "object";
+  // Number/Integer
+  if (type === "number" || type === "integer") {
+    return renderNumberInput(params);
+  }
 
+  // String
+  if (type === "string") {
+    return renderTextInput({ ...params, inputType: "text" });
+  }
+
+  // Fallback
+  return html`
+    <div class="cfg-field cfg-field--error">
+      <div class="cfg-field__label">${label}</div>
+      <div class="cfg-field__error">Unsupported type: ${type}. Use Raw mode.</div>
+    </div>
+  `;
+}
+
+function renderTextInput(params: {
+  schema: JsonSchema;
+  value: unknown;
+  path: Array<string | number>;
+  hints: ConfigUiHints;
+  disabled: boolean;
+  showLabel?: boolean;
+  inputType: "text" | "number";
+  onPatch: (path: Array<string | number>, value: unknown) => void;
+}): TemplateResult {
+  const { schema, value, path, hints, disabled, onPatch, inputType } = params;
+  const showLabel = params.showLabel ?? true;
+  const hint = hintForPath(path, hints);
+  const label = hint?.label ?? schema.title ?? humanize(String(path.at(-1)));
+  const help = hint?.help ?? schema.description;
+  const isSensitive = hint?.sensitive ?? isSensitivePath(path);
+  const placeholder = hint?.placeholder ?? (schema.default !== undefined ? `Default: ${schema.default}` : "");
+  const displayValue = value ?? "";
+
+  return html`
+    <div class="cfg-field">
+      ${showLabel ? html`<label class="cfg-field__label">${label}</label>` : nothing}
+      ${help ? html`<div class="cfg-field__help">${help}</div>` : nothing}
+      <div class="cfg-input-wrap">
+        <input
+          type=${isSensitive ? "password" : inputType}
+          class="cfg-input"
+          placeholder=${placeholder}
+          .value=${displayValue == null ? "" : String(displayValue)}
+          ?disabled=${disabled}
+          @input=${(e: Event) => {
+            const raw = (e.target as HTMLInputElement).value;
+            if (inputType === "number" && raw.trim() !== "") {
+              const parsed = Number(raw);
+              onPatch(path, Number.isNaN(parsed) ? raw : parsed);
+            } else {
+              onPatch(path, raw === "" ? undefined : raw);
+            }
+          }}
+        />
+        ${schema.default !== undefined ? html`
+          <button
+            type="button"
+            class="cfg-input__reset"
+            title="Reset to default"
+            ?disabled=${disabled}
+            @click=${() => onPatch(path, schema.default)}
+          >↺</button>
+        ` : nothing}
+      </div>
+    </div>
+  `;
+}
+
+function renderNumberInput(params: {
+  schema: JsonSchema;
+  value: unknown;
+  path: Array<string | number>;
+  hints: ConfigUiHints;
+  disabled: boolean;
+  showLabel?: boolean;
+  onPatch: (path: Array<string | number>, value: unknown) => void;
+}): TemplateResult {
+  const { schema, value, path, hints, disabled, onPatch } = params;
+  const showLabel = params.showLabel ?? true;
+  const hint = hintForPath(path, hints);
+  const label = hint?.label ?? schema.title ?? humanize(String(path.at(-1)));
+  const help = hint?.help ?? schema.description;
+  const displayValue = value ?? schema.default ?? "";
+  const numValue = typeof displayValue === "number" ? displayValue : 0;
+
+  return html`
+    <div class="cfg-field">
+      ${showLabel ? html`<label class="cfg-field__label">${label}</label>` : nothing}
+      ${help ? html`<div class="cfg-field__help">${help}</div>` : nothing}
+      <div class="cfg-number">
+        <button
+          type="button"
+          class="cfg-number__btn"
+          ?disabled=${disabled}
+          @click=${() => onPatch(path, numValue - 1)}
+        >−</button>
+        <input
+          type="number"
+          class="cfg-number__input"
+          .value=${displayValue == null ? "" : String(displayValue)}
+          ?disabled=${disabled}
+          @input=${(e: Event) => {
+            const raw = (e.target as HTMLInputElement).value;
+            const parsed = raw === "" ? undefined : Number(raw);
+            onPatch(path, parsed);
+          }}
+        />
+        <button
+          type="button"
+          class="cfg-number__btn"
+          ?disabled=${disabled}
+          @click=${() => onPatch(path, numValue + 1)}
+        >+</button>
+      </div>
+    </div>
+  `;
+}
+
+function renderSelect(params: {
+  schema: JsonSchema;
+  value: string;
+  path: Array<string | number>;
+  hints: ConfigUiHints;
+  disabled: boolean;
+  showLabel?: boolean;
+  options: string[];
+  onPatch: (path: Array<string | number>, value: unknown) => void;
+}): TemplateResult {
+  const { schema, value, path, hints, disabled, options, onPatch } = params;
+  const showLabel = params.showLabel ?? true;
+  const hint = hintForPath(path, hints);
+  const label = hint?.label ?? schema.title ?? humanize(String(path.at(-1)));
+  const help = hint?.help ?? schema.description;
+
+  return html`
+    <div class="cfg-field">
+      ${showLabel ? html`<label class="cfg-field__label">${label}</label>` : nothing}
+      ${help ? html`<div class="cfg-field__help">${help}</div>` : nothing}
+      <select
+        class="cfg-select"
+        ?disabled=${disabled}
+        @change=${(e: Event) => {
+          const val = (e.target as HTMLSelectElement).value;
+          onPatch(path, val === "" ? undefined : val);
+        }}
+      >
+        <option value="" ?selected=${!value}>Select...</option>
+        ${options.map(opt => html`
+          <option value=${opt} ?selected=${opt === value}>${opt}</option>
+        `)}
+      </select>
+    </div>
+  `;
+}
+
+function renderObject(params: {
+  schema: JsonSchema;
+  value: unknown;
+  path: Array<string | number>;
+  hints: ConfigUiHints;
+  unsupported: Set<string>;
+  disabled: boolean;
+  showLabel?: boolean;
+  searchQuery?: string;
+  onPatch: (path: Array<string | number>, value: unknown) => void;
+}): TemplateResult {
+  const { schema, value, path, hints, unsupported, disabled, onPatch, searchQuery } = params;
+  const showLabel = params.showLabel ?? true;
+  const hint = hintForPath(path, hints);
+  const label = hint?.label ?? schema.title ?? humanize(String(path.at(-1)));
+  const help = hint?.help ?? schema.description;
+  
+  const fallback = value ?? schema.default;
+  const obj = fallback && typeof fallback === "object" && !Array.isArray(fallback)
+    ? (fallback as Record<string, unknown>)
+    : {};
+  const props = schema.properties ?? {};
+  const entries = Object.entries(props);
+  
+  // Sort by hint order
+  const sorted = entries.sort((a, b) => {
+    const orderA = hintForPath([...path, a[0]], hints)?.order ?? 0;
+    const orderB = hintForPath([...path, b[0]], hints)?.order ?? 0;
+    if (orderA !== orderB) return orderA - orderB;
+    return a[0].localeCompare(b[0]);
+  });
+
+  const reserved = new Set(Object.keys(props));
+  const additional = schema.additionalProperties;
+  const allowExtra = Boolean(additional) && typeof additional === "object";
+
+  // For top-level, don't wrap in collapsible
+  if (path.length === 1) {
     return html`
-      <div class="fieldset">
-        ${showLabel ? html`<div class="legend">${label}</div>` : nothing}
-        ${help ? html`<div class="muted">${help}</div>` : nothing}
-
+      <div class="cfg-fields">
         ${sorted.map(([propKey, node]) =>
           renderNode({
             schema: node,
@@ -213,162 +401,151 @@ export function renderNode(params: {
             unsupported,
             disabled,
             onPatch,
-          }),
+            searchQuery,
+          })
         )}
-
-        ${allowExtra
-          ? renderMapField({
-              schema: additional as JsonSchema,
-              value: obj,
-              path,
-              hints,
-              unsupported,
-              disabled,
-              reservedKeys: reserved,
-              onPatch,
-            })
-          : nothing}
+        ${allowExtra ? renderMapField({
+          schema: additional as JsonSchema,
+          value: obj,
+          path,
+          hints,
+          unsupported,
+          disabled,
+          reservedKeys: reserved,
+          onPatch,
+        }) : nothing}
       </div>
     `;
   }
 
-  if (type === "array") {
-    const itemsSchema = Array.isArray(schema.items)
-      ? schema.items[0]
-      : schema.items;
-    if (!itemsSchema) {
-      return html`<div class="field">
-        ${showLabel ? html`<span>${label}</span>` : nothing}
-        <div class="muted">Unsupported array schema. Use Raw.</div>
-      </div>`;
-    }
-    const arr = Array.isArray(value)
-      ? value
-      : Array.isArray(schema.default)
-        ? schema.default
-        : [];
+  // Nested objects get collapsible treatment
+  return html`
+    <details class="cfg-object" open>
+      <summary class="cfg-object__header">
+        <span class="cfg-object__title">${label}</span>
+        <span class="cfg-object__chevron">${icons.chevronDown}</span>
+      </summary>
+      ${help ? html`<div class="cfg-object__help">${help}</div>` : nothing}
+      <div class="cfg-object__content">
+        ${sorted.map(([propKey, node]) =>
+          renderNode({
+            schema: node,
+            value: obj[propKey],
+            path: [...path, propKey],
+            hints,
+            unsupported,
+            disabled,
+            onPatch,
+            searchQuery,
+          })
+        )}
+        ${allowExtra ? renderMapField({
+          schema: additional as JsonSchema,
+          value: obj,
+          path,
+          hints,
+          unsupported,
+          disabled,
+          reservedKeys: reserved,
+          onPatch,
+        }) : nothing}
+      </div>
+    </details>
+  `;
+}
+
+function renderArray(params: {
+  schema: JsonSchema;
+  value: unknown;
+  path: Array<string | number>;
+  hints: ConfigUiHints;
+  unsupported: Set<string>;
+  disabled: boolean;
+  showLabel?: boolean;
+  searchQuery?: string;
+  onPatch: (path: Array<string | number>, value: unknown) => void;
+}): TemplateResult {
+  const { schema, value, path, hints, unsupported, disabled, onPatch, searchQuery } = params;
+  const showLabel = params.showLabel ?? true;
+  const hint = hintForPath(path, hints);
+  const label = hint?.label ?? schema.title ?? humanize(String(path.at(-1)));
+  const help = hint?.help ?? schema.description;
+
+  const itemsSchema = Array.isArray(schema.items) ? schema.items[0] : schema.items;
+  if (!itemsSchema) {
     return html`
-      <div class="field" style="margin-top: 12px;">
-        ${showLabel ? html`<span>${label}</span>` : nothing}
-        ${help ? html`<div class="muted">${help}</div>` : nothing}
-        <div class="array">
-          ${arr.map((item, idx) => {
-            const itemPath = [...path, idx];
-            return html`<div class="array-item">
-              <div style="flex: 1;">
+      <div class="cfg-field cfg-field--error">
+        <div class="cfg-field__label">${label}</div>
+        <div class="cfg-field__error">Unsupported array schema. Use Raw mode.</div>
+      </div>
+    `;
+  }
+
+  const arr = Array.isArray(value) ? value : Array.isArray(schema.default) ? schema.default : [];
+
+  return html`
+    <div class="cfg-array">
+      <div class="cfg-array__header">
+        ${showLabel ? html`<span class="cfg-array__label">${label}</span>` : nothing}
+        <span class="cfg-array__count">${arr.length} item${arr.length !== 1 ? 's' : ''}</span>
+        <button
+          type="button"
+          class="cfg-array__add"
+          ?disabled=${disabled}
+          @click=${() => {
+            const next = [...arr, defaultValue(itemsSchema)];
+            onPatch(path, next);
+          }}
+        >
+          <span class="cfg-array__add-icon">${icons.plus}</span>
+          Add
+        </button>
+      </div>
+      ${help ? html`<div class="cfg-array__help">${help}</div>` : nothing}
+      
+      ${arr.length === 0 ? html`
+        <div class="cfg-array__empty">
+          No items yet. Click "Add" to create one.
+        </div>
+      ` : html`
+        <div class="cfg-array__items">
+          ${arr.map((item, idx) => html`
+            <div class="cfg-array__item">
+              <div class="cfg-array__item-header">
+                <span class="cfg-array__item-index">#${idx + 1}</span>
+                <button
+                  type="button"
+                  class="cfg-array__item-remove"
+                  title="Remove item"
+                  ?disabled=${disabled}
+                  @click=${() => {
+                    const next = [...arr];
+                    next.splice(idx, 1);
+                    onPatch(path, next);
+                  }}
+                >
+                  ${icons.trash}
+                </button>
+              </div>
+              <div class="cfg-array__item-content">
                 ${renderNode({
                   schema: itemsSchema,
                   value: item,
-                  path: itemPath,
+                  path: [...path, idx],
                   hints,
                   unsupported,
                   disabled,
                   showLabel: false,
                   onPatch,
+                  searchQuery,
                 })}
               </div>
-              <button
-                class="btn danger"
-                ?disabled=${disabled}
-                @click=${() => {
-                  const next = [...arr];
-                  next.splice(idx, 1);
-                  onPatch(path, next);
-                }}
-              >
-                Remove
-              </button>
-            </div>`;
-          })}
-          <button
-            class="btn"
-            ?disabled=${disabled}
-            @click=${() => {
-              const next = [...arr];
-              next.push(defaultValue(itemsSchema));
-              onPatch(path, next);
-            }}
-          >
-            Add
-          </button>
+            </div>
+          `)}
         </div>
-      </div>
-    `;
-  }
-
-  if (type === "boolean") {
-    const displayValue =
-      typeof value === "boolean"
-        ? value
-        : typeof schema.default === "boolean"
-          ? schema.default
-          : false;
-    return html`
-      <div class="field-row">
-        <div class="field-row__info">
-          ${showLabel ? html`<span class="field-row__label">${label}</span>` : nothing}
-          ${help ? html`<span class="field-row__help">${help}</span>` : nothing}
-        </div>
-        <label class="toggle-switch">
-          <input
-            type="checkbox"
-            .checked=${displayValue}
-            ?disabled=${disabled}
-            @change=${(e: Event) =>
-              onPatch(path, (e.target as HTMLInputElement).checked)}
-          />
-          <span class="toggle-switch__track">
-            <span class="toggle-switch__thumb"></span>
-          </span>
-        </label>
-      </div>
-    `;
-  }
-
-  if (type === "number" || type === "integer") {
-    const displayValue = value ?? schema.default;
-    return html`
-      <label class="field">
-        ${showLabel ? html`<span>${label}</span>` : nothing}
-        ${help ? html`<div class="muted">${help}</div>` : nothing}
-        <input
-          type="number"
-          .value=${displayValue == null ? "" : String(displayValue)}
-          ?disabled=${disabled}
-          @input=${(e: Event) => {
-            const raw = (e.target as HTMLInputElement).value;
-            const parsed = raw === "" ? undefined : Number(raw);
-            onPatch(path, parsed);
-          }}
-        />
-      </label>
-    `;
-  }
-
-  if (type === "string") {
-    const isSensitive = hint?.sensitive ?? isSensitivePath(path);
-    const placeholder = hint?.placeholder ?? (isSensitive ? "••••" : "");
-    const displayValue = value ?? schema.default ?? "";
-    return html`
-      <label class="field">
-        ${showLabel ? html`<span>${label}</span>` : nothing}
-        ${help ? html`<div class="muted">${help}</div>` : nothing}
-        <input
-          type=${isSensitive ? "password" : "text"}
-          placeholder=${placeholder}
-          .value=${displayValue == null ? "" : String(displayValue)}
-          ?disabled=${disabled}
-          @input=${(e: Event) =>
-            onPatch(path, (e.target as HTMLInputElement).value)}
-        />
-      </label>
-    `;
-  }
-
-  return html`<div class="field">
-    ${showLabel ? html`<span>${label}</span>` : nothing}
-    <div class="muted">Unsupported type. Use Raw.</div>
-  </div>`;
+      `}
+    </div>
+  `;
 }
 
 function renderMapField(params: {
@@ -381,103 +558,115 @@ function renderMapField(params: {
   reservedKeys: Set<string>;
   onPatch: (path: Array<string | number>, value: unknown) => void;
 }): TemplateResult {
-  const { schema, value, path, hints, unsupported, disabled, reservedKeys, onPatch } =
-    params;
+  const { schema, value, path, hints, unsupported, disabled, reservedKeys, onPatch } = params;
   const anySchema = isAnySchema(schema);
-  const entries = Object.entries(value ?? {}).filter(
-    ([key]) => !reservedKeys.has(key),
-  );
+  const entries = Object.entries(value ?? {}).filter(([key]) => !reservedKeys.has(key));
+
   return html`
-    <div class="field" style="margin-top: 12px;">
-      <div class="row" style="justify-content: space-between;">
-        <span class="muted">Extra entries</span>
+    <div class="cfg-map">
+      <div class="cfg-map__header">
+        <span class="cfg-map__label">Custom entries</span>
         <button
-          class="btn"
+          type="button"
+          class="cfg-map__add"
           ?disabled=${disabled}
           @click=${() => {
             const next = { ...(value ?? {}) };
             let index = 1;
-            let key = `new-${index}`;
+            let key = `custom-${index}`;
             while (key in next) {
               index += 1;
-              key = `new-${index}`;
+              key = `custom-${index}`;
             }
             next[key] = anySchema ? {} : defaultValue(schema);
             onPatch(path, next);
           }}
         >
-          Add
+          <span class="cfg-map__add-icon">${icons.plus}</span>
+          Add Entry
         </button>
       </div>
-      ${entries.length === 0
-        ? html`<div class="muted">No entries yet.</div>`
-        : entries.map(([key, entryValue]) => {
+      
+      ${entries.length === 0 ? html`
+        <div class="cfg-map__empty">No custom entries.</div>
+      ` : html`
+        <div class="cfg-map__items">
+          ${entries.map(([key, entryValue]) => {
             const valuePath = [...path, key];
             const fallback = jsonValue(entryValue);
-            return html`<div class="array-item" style="gap: 8px;">
-              <input
-                class="mono"
-                style="min-width: 140px;"
-                ?disabled=${disabled}
-                .value=${key}
-                @change=${(e: Event) => {
-                  const nextKey = (e.target as HTMLInputElement).value.trim();
-                  if (!nextKey || nextKey === key) return;
-                  const next = { ...(value ?? {}) };
-                  if (nextKey in next) return;
-                  next[nextKey] = next[key];
-                  delete next[key];
-                  onPatch(path, next);
-                }}
-              />
-              <div style="flex: 1;">
-                ${anySchema
-                  ? html`<label class="field" style="margin: 0;">
-                      <div class="muted">JSON value</div>
-                      <textarea
-                        class="mono"
-                        rows="5"
-                        .value=${fallback}
-                        ?disabled=${disabled}
-                        @change=${(e: Event) => {
-                          const target = e.target as HTMLTextAreaElement;
-                          const raw = target.value.trim();
-                          if (!raw) {
-                            onPatch(valuePath, undefined);
-                            return;
-                          }
-                          try {
-                            onPatch(valuePath, JSON.parse(raw));
-                          } catch {
-                            target.value = fallback;
-                          }
-                        }}
-                      ></textarea>
-                    </label>`
-                  : renderNode({
-                      schema,
-                      value: entryValue,
-                      path: valuePath,
-                      hints,
-                      unsupported,
-                      disabled,
-                      showLabel: false,
-                      onPatch,
-                    })}
+            return html`
+              <div class="cfg-map__item">
+                <div class="cfg-map__item-key">
+                  <input
+                    type="text"
+                    class="cfg-input cfg-input--sm"
+                    placeholder="Key"
+                    .value=${key}
+                    ?disabled=${disabled}
+                    @change=${(e: Event) => {
+                      const nextKey = (e.target as HTMLInputElement).value.trim();
+                      if (!nextKey || nextKey === key) return;
+                      const next = { ...(value ?? {}) };
+                      if (nextKey in next) return;
+                      next[nextKey] = next[key];
+                      delete next[key];
+                      onPatch(path, next);
+                    }}
+                  />
+                </div>
+                <div class="cfg-map__item-value">
+                  ${anySchema
+                    ? html`
+                        <textarea
+                          class="cfg-textarea cfg-textarea--sm"
+                          placeholder="JSON value"
+                          rows="2"
+                          .value=${fallback}
+                          ?disabled=${disabled}
+                          @change=${(e: Event) => {
+                            const target = e.target as HTMLTextAreaElement;
+                            const raw = target.value.trim();
+                            if (!raw) {
+                              onPatch(valuePath, undefined);
+                              return;
+                            }
+                            try {
+                              onPatch(valuePath, JSON.parse(raw));
+                            } catch {
+                              target.value = fallback;
+                            }
+                          }}
+                        ></textarea>
+                      `
+                    : renderNode({
+                        schema,
+                        value: entryValue,
+                        path: valuePath,
+                        hints,
+                        unsupported,
+                        disabled,
+                        showLabel: false,
+                        onPatch,
+                      })}
+                </div>
+                <button
+                  type="button"
+                  class="cfg-map__item-remove"
+                  title="Remove entry"
+                  ?disabled=${disabled}
+                  @click=${() => {
+                    const next = { ...(value ?? {}) };
+                    delete next[key];
+                    onPatch(path, next);
+                  }}
+                >
+                  ${icons.trash}
+                </button>
               </div>
-              <button
-                class="btn danger"
-                ?disabled=${disabled}
-                @click=${() => {
-                  const next = { ...(value ?? {}) };
-                  delete next[key];
-                  onPatch(path, next);
-                }}
-              >
-                Remove
-              </button>
-            </div>`;
+            `;
           })}
+        </div>
+      `}
     </div>
   `;
 }
diff --git a/ui/src/ui/views/config-form.render.ts b/ui/src/ui/views/config-form.render.ts
index 21c13c96c..e007426a9 100644
--- a/ui/src/ui/views/config-form.render.ts
+++ b/ui/src/ui/views/config-form.render.ts
@@ -14,70 +14,79 @@ export type ConfigFormProps = {
   onPatch: (path: Array<string | number>, value: unknown) => void;
 };
 
+// SVG Icons for section cards
+const sectionIcons = {
+  env: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>`,
+  update: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>`,
+  agents: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 0 1 7 7h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a7 7 0 0 1 7-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2z"></path><circle cx="8" cy="14" r="1"></circle><circle cx="16" cy="14" r="1"></circle></svg>`,
+  auth: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>`,
+  channels: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>`,
+  messages: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>`,
+  commands: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line></svg>`,
+  hooks: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>`,
+  skills: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>`,
+  tools: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg>`,
+  gateway: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>`,
+  wizard: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 4V2"></path><path d="M15 16v-2"></path><path d="M8 9h2"></path><path d="M20 9h2"></path><path d="M17.8 11.8 19 13"></path><path d="M15 9h0"></path><path d="M17.8 6.2 19 5"></path><path d="m3 21 9-9"></path><path d="M12.2 6.2 11 5"></path></svg>`,
+  default: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>`,
+};
+
 // Section metadata
-const SECTION_META: Record<string, { label: string; icon: string; description: string }> = {
+const SECTION_META: Record<string, { label: string; description: string }> = {
   env: { 
     label: "Environment Variables", 
-    icon: "🔧",
     description: "Environment variables passed to the gateway process"
   },
   update: { 
     label: "Updates", 
-    icon: "📦",
     description: "Auto-update settings and release channel"
   },
   agents: { 
     label: "Agents", 
-    icon: "🤖",
     description: "Agent configurations, models, and identities"
   },
   auth: { 
     label: "Authentication", 
-    icon: "🔐",
     description: "API keys and authentication profiles"
   },
   channels: { 
     label: "Channels", 
-    icon: "💬",
     description: "Messaging channels (Telegram, Discord, Slack, etc.)"
   },
   messages: { 
     label: "Messages", 
-    icon: "📨",
     description: "Message handling and routing settings"
   },
   commands: { 
     label: "Commands", 
-    icon: "⌨️",
     description: "Custom slash commands"
   },
   hooks: { 
     label: "Hooks", 
-    icon: "🪝",
     description: "Webhooks and event hooks"
   },
   skills: { 
     label: "Skills", 
-    icon: "✨",
     description: "Skill packs and capabilities"
   },
   tools: { 
     label: "Tools", 
-    icon: "🛠️",
     description: "Tool configurations (browser, search, etc.)"
   },
   gateway: { 
     label: "Gateway", 
-    icon: "🌐",
     description: "Gateway server settings (port, auth, binding)"
   },
   wizard: { 
     label: "Setup Wizard", 
-    icon: "🧙",
     description: "Setup wizard state and history"
   },
 };
 
+function getSectionIcon(key: string) {
+  return sectionIcons[key as keyof typeof sectionIcons] ?? sectionIcons.default;
+}
+
 function matchesSearch(key: string, schema: JsonSchema, query: string): boolean {
   if (!query) return true;
   const q = query.toLowerCase();
@@ -161,14 +170,13 @@ export function renderConfigForm(props: ConfigFormProps) {
       ${entries.map(([key, node]) => {
         const meta = SECTION_META[key] ?? { 
           label: key.charAt(0).toUpperCase() + key.slice(1), 
-          icon: "📄",
           description: node.description ?? ""
         };
         
         return html`
           <section class="config-section-card" id="config-section-${key}">
             <div class="config-section-card__header">
-              <span class="config-section-card__icon">${meta.icon}</span>
+              <span class="config-section-card__icon">${getSectionIcon(key)}</span>
               <div class="config-section-card__titles">
                 <h3 class="config-section-card__title">${meta.label}</h3>
                 ${meta.description ? html`
diff --git a/ui/src/ui/views/config.ts b/ui/src/ui/views/config.ts
index 6fa9410e6..316400059 100644
--- a/ui/src/ui/views/config.ts
+++ b/ui/src/ui/views/config.ts
@@ -30,22 +30,44 @@ export type ConfigProps = {
   onUpdate: () => void;
 };
 
-// Section definitions with icons
-const SECTIONS: Array<{ key: string; label: string; icon: string }> = [
-  { key: "env", label: "Environment", icon: "🔧" },
-  { key: "update", label: "Updates", icon: "📦" },
-  { key: "agents", label: "Agents", icon: "🤖" },
-  { key: "auth", label: "Authentication", icon: "🔐" },
-  { key: "channels", label: "Channels", icon: "💬" },
-  { key: "messages", label: "Messages", icon: "📨" },
-  { key: "commands", label: "Commands", icon: "⌨️" },
-  { key: "hooks", label: "Hooks", icon: "🪝" },
-  { key: "skills", label: "Skills", icon: "✨" },
-  { key: "tools", label: "Tools", icon: "🛠️" },
-  { key: "gateway", label: "Gateway", icon: "🌐" },
-  { key: "wizard", label: "Setup Wizard", icon: "🧙" },
+// SVG Icons for sidebar
+const sidebarIcons = {
+  all: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>`,
+  env: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>`,
+  update: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>`,
+  agents: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 0 1 7 7h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a7 7 0 0 1 7-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2z"></path><circle cx="8" cy="14" r="1"></circle><circle cx="16" cy="14" r="1"></circle></svg>`,
+  auth: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>`,
+  channels: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>`,
+  messages: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>`,
+  commands: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line></svg>`,
+  hooks: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>`,
+  skills: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>`,
+  tools: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg>`,
+  gateway: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>`,
+  wizard: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 4V2"></path><path d="M15 16v-2"></path><path d="M8 9h2"></path><path d="M20 9h2"></path><path d="M17.8 11.8 19 13"></path><path d="M15 9h0"></path><path d="M17.8 6.2 19 5"></path><path d="m3 21 9-9"></path><path d="M12.2 6.2 11 5"></path></svg>`,
+  default: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>`,
+};
+
+// Section definitions
+const SECTIONS: Array<{ key: string; label: string }> = [
+  { key: "env", label: "Environment" },
+  { key: "update", label: "Updates" },
+  { key: "agents", label: "Agents" },
+  { key: "auth", label: "Authentication" },
+  { key: "channels", label: "Channels" },
+  { key: "messages", label: "Messages" },
+  { key: "commands", label: "Commands" },
+  { key: "hooks", label: "Hooks" },
+  { key: "skills", label: "Skills" },
+  { key: "tools", label: "Tools" },
+  { key: "gateway", label: "Gateway" },
+  { key: "wizard", label: "Setup Wizard" },
 ];
 
+function getSectionIcon(key: string) {
+  return sidebarIcons[key as keyof typeof sidebarIcons] ?? sidebarIcons.default;
+}
+
 function computeDiff(
   original: Record<string, unknown> | null,
   current: Record<string, unknown> | null
@@ -117,7 +139,7 @@ export function renderConfig(props: ConfigProps) {
   const knownKeys = new Set(SECTIONS.map(s => s.key));
   const extraSections = Object.keys(schemaProps)
     .filter(k => !knownKeys.has(k))
-    .map(k => ({ key: k, label: k.charAt(0).toUpperCase() + k.slice(1), icon: "📄" }));
+    .map(k => ({ key: k, label: k.charAt(0).toUpperCase() + k.slice(1) }));
   
   const allSections = [...availableSections, ...extraSections];
   
@@ -163,7 +185,7 @@ export function renderConfig(props: ConfigProps) {
             class="config-nav__item ${props.activeSection === null ? "active" : ""}"
             @click=${() => props.onSectionChange(null)}
           >
-            <span class="config-nav__icon">📋</span>
+            <span class="config-nav__icon">${sidebarIcons.all}</span>
             <span class="config-nav__label">All Settings</span>
           </button>
           ${allSections.map(section => html`
@@ -171,7 +193,7 @@ export function renderConfig(props: ConfigProps) {
               class="config-nav__item ${props.activeSection === section.key ? "active" : ""}"
               @click=${() => props.onSectionChange(section.key)}
             >
-              <span class="config-nav__icon">${section.icon}</span>
+              <span class="config-nav__icon">${getSectionIcon(section.key)}</span>
               <span class="config-nav__label">${section.label}</span>
             </button>
           `)}

From e74fd9196c34d2dda5b79b8777e1c429d739d196 Mon Sep 17 00:00:00 2001
From: Maude Bot <maude@maudeco.de>
Date: Tue, 20 Jan 2026 11:47:22 -0500
Subject: [PATCH 5/5] feat(ui): add icons for all config sections

Added SVG icons for: meta, logging, browser, ui, models, bindings,
broadcast, audio, session, cron, web, discovery, canvasHost, talk, plugins

Also added descriptions for all new sections in metadata.
---
 ui/src/ui/views/config-form.render.ts | 94 +++++++++++++--------------
 ui/src/ui/views/config.ts             | 18 ++++-
 2 files changed, 62 insertions(+), 50 deletions(-)

diff --git a/ui/src/ui/views/config-form.render.ts b/ui/src/ui/views/config-form.render.ts
index e007426a9..441abc318 100644
--- a/ui/src/ui/views/config-form.render.ts
+++ b/ui/src/ui/views/config-form.render.ts
@@ -14,7 +14,7 @@ export type ConfigFormProps = {
   onPatch: (path: Array<string | number>, value: unknown) => void;
 };
 
-// SVG Icons for section cards
+// SVG Icons for section cards (Lucide-style)
 const sectionIcons = {
   env: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>`,
   update: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>`,
@@ -28,59 +28,55 @@ const sectionIcons = {
   tools: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg>`,
   gateway: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>`,
   wizard: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 4V2"></path><path d="M15 16v-2"></path><path d="M8 9h2"></path><path d="M20 9h2"></path><path d="M17.8 11.8 19 13"></path><path d="M15 9h0"></path><path d="M17.8 6.2 19 5"></path><path d="m3 21 9-9"></path><path d="M12.2 6.2 11 5"></path></svg>`,
+  // Additional sections
+  meta: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 20h9"></path><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"></path></svg>`,
+  logging: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>`,
+  browser: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="4"></circle><line x1="21.17" y1="8" x2="12" y2="8"></line><line x1="3.95" y1="6.06" x2="8.54" y2="14"></line><line x1="10.88" y1="21.94" x2="15.46" y2="14"></line></svg>`,
+  ui: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>`,
+  models: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>`,
+  bindings: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect><rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect><line x1="6" y1="6" x2="6.01" y2="6"></line><line x1="6" y1="18" x2="6.01" y2="18"></line></svg>`,
+  broadcast: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4.9 19.1C1 15.2 1 8.8 4.9 4.9"></path><path d="M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5"></path><circle cx="12" cy="12" r="2"></circle><path d="M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5"></path><path d="M19.1 4.9C23 8.8 23 15.1 19.1 19"></path></svg>`,
+  audio: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg>`,
+  session: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>`,
+  cron: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>`,
+  web: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>`,
+  discovery: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>`,
+  canvasHost: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>`,
+  talk: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" y1="19" x2="12" y2="23"></line><line x1="8" y1="23" x2="16" y2="23"></line></svg>`,
+  plugins: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 2v6"></path><path d="m4.93 10.93 4.24 4.24"></path><path d="M2 12h6"></path><path d="m4.93 13.07 4.24-4.24"></path><path d="M12 22v-6"></path><path d="m19.07 13.07-4.24-4.24"></path><path d="M22 12h-6"></path><path d="m19.07 10.93-4.24 4.24"></path></svg>`,
   default: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>`,
 };
 
 // Section metadata
 const SECTION_META: Record<string, { label: string; description: string }> = {
-  env: { 
-    label: "Environment Variables", 
-    description: "Environment variables passed to the gateway process"
-  },
-  update: { 
-    label: "Updates", 
-    description: "Auto-update settings and release channel"
-  },
-  agents: { 
-    label: "Agents", 
-    description: "Agent configurations, models, and identities"
-  },
-  auth: { 
-    label: "Authentication", 
-    description: "API keys and authentication profiles"
-  },
-  channels: { 
-    label: "Channels", 
-    description: "Messaging channels (Telegram, Discord, Slack, etc.)"
-  },
-  messages: { 
-    label: "Messages", 
-    description: "Message handling and routing settings"
-  },
-  commands: { 
-    label: "Commands", 
-    description: "Custom slash commands"
-  },
-  hooks: { 
-    label: "Hooks", 
-    description: "Webhooks and event hooks"
-  },
-  skills: { 
-    label: "Skills", 
-    description: "Skill packs and capabilities"
-  },
-  tools: { 
-    label: "Tools", 
-    description: "Tool configurations (browser, search, etc.)"
-  },
-  gateway: { 
-    label: "Gateway", 
-    description: "Gateway server settings (port, auth, binding)"
-  },
-  wizard: { 
-    label: "Setup Wizard", 
-    description: "Setup wizard state and history"
-  },
+  env: { label: "Environment Variables", description: "Environment variables passed to the gateway process" },
+  update: { label: "Updates", description: "Auto-update settings and release channel" },
+  agents: { label: "Agents", description: "Agent configurations, models, and identities" },
+  auth: { label: "Authentication", description: "API keys and authentication profiles" },
+  channels: { label: "Channels", description: "Messaging channels (Telegram, Discord, Slack, etc.)" },
+  messages: { label: "Messages", description: "Message handling and routing settings" },
+  commands: { label: "Commands", description: "Custom slash commands" },
+  hooks: { label: "Hooks", description: "Webhooks and event hooks" },
+  skills: { label: "Skills", description: "Skill packs and capabilities" },
+  tools: { label: "Tools", description: "Tool configurations (browser, search, etc.)" },
+  gateway: { label: "Gateway", description: "Gateway server settings (port, auth, binding)" },
+  wizard: { label: "Setup Wizard", description: "Setup wizard state and history" },
+  // Additional sections
+  meta: { label: "Metadata", description: "Gateway metadata and version information" },
+  logging: { label: "Logging", description: "Log levels and output configuration" },
+  browser: { label: "Browser", description: "Browser automation settings" },
+  ui: { label: "UI", description: "User interface preferences" },
+  models: { label: "Models", description: "AI model configurations and providers" },
+  bindings: { label: "Bindings", description: "Key bindings and shortcuts" },
+  broadcast: { label: "Broadcast", description: "Broadcast and notification settings" },
+  audio: { label: "Audio", description: "Audio input/output settings" },
+  session: { label: "Session", description: "Session management and persistence" },
+  cron: { label: "Cron", description: "Scheduled tasks and automation" },
+  web: { label: "Web", description: "Web server and API settings" },
+  discovery: { label: "Discovery", description: "Service discovery and networking" },
+  canvasHost: { label: "Canvas Host", description: "Canvas rendering and display" },
+  talk: { label: "Talk", description: "Voice and speech settings" },
+  plugins: { label: "Plugins", description: "Plugin management and extensions" },
 };
 
 function getSectionIcon(key: string) {
diff --git a/ui/src/ui/views/config.ts b/ui/src/ui/views/config.ts
index 316400059..616489549 100644
--- a/ui/src/ui/views/config.ts
+++ b/ui/src/ui/views/config.ts
@@ -30,7 +30,7 @@ export type ConfigProps = {
   onUpdate: () => void;
 };
 
-// SVG Icons for sidebar
+// SVG Icons for sidebar (Lucide-style)
 const sidebarIcons = {
   all: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>`,
   env: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>`,
@@ -45,6 +45,22 @@ const sidebarIcons = {
   tools: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg>`,
   gateway: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>`,
   wizard: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 4V2"></path><path d="M15 16v-2"></path><path d="M8 9h2"></path><path d="M20 9h2"></path><path d="M17.8 11.8 19 13"></path><path d="M15 9h0"></path><path d="M17.8 6.2 19 5"></path><path d="m3 21 9-9"></path><path d="M12.2 6.2 11 5"></path></svg>`,
+  // Additional sections
+  meta: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9"></path><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"></path></svg>`,
+  logging: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>`,
+  browser: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="4"></circle><line x1="21.17" y1="8" x2="12" y2="8"></line><line x1="3.95" y1="6.06" x2="8.54" y2="14"></line><line x1="10.88" y1="21.94" x2="15.46" y2="14"></line></svg>`,
+  ui: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>`,
+  models: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>`,
+  bindings: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect><rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect><line x1="6" y1="6" x2="6.01" y2="6"></line><line x1="6" y1="18" x2="6.01" y2="18"></line></svg>`,
+  broadcast: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4.9 19.1C1 15.2 1 8.8 4.9 4.9"></path><path d="M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5"></path><circle cx="12" cy="12" r="2"></circle><path d="M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5"></path><path d="M19.1 4.9C23 8.8 23 15.1 19.1 19"></path></svg>`,
+  audio: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg>`,
+  session: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>`,
+  cron: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>`,
+  web: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>`,
+  discovery: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>`,
+  canvasHost: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>`,
+  talk: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" y1="19" x2="12" y2="23"></line><line x1="8" y1="23" x2="16" y2="23"></line></svg>`,
+  plugins: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v6"></path><path d="m4.93 10.93 4.24 4.24"></path><path d="M2 12h6"></path><path d="m4.93 13.07 4.24-4.24"></path><path d="M12 22v-6"></path><path d="m19.07 13.07-4.24-4.24"></path><path d="M22 12h-6"></path><path d="m19.07 10.93-4.24 4.24"></path></svg>`,
   default: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>`,
 };