diff --git a/ui/src/ui/app-render.helpers.ts b/ui/src/ui/app-render.helpers.ts
index e0a097210fa..e85913dd46d 100644
--- a/ui/src/ui/app-render.helpers.ts
+++ b/ui/src/ui/app-render.helpers.ts
@@ -109,9 +109,8 @@ function renderCronFilterIcon(hiddenCount: number) {
         <circle cx="12" cy="12" r="10"></circle>
         <polyline points="12 6 12 12 16 14"></polyline>
       </svg>
-      ${
-        hiddenCount > 0
-          ? html`<span
+      ${hiddenCount > 0
+        ? html`<span
             style="
               position: absolute;
               top: -5px;
@@ -126,8 +125,7 @@ function renderCronFilterIcon(hiddenCount: number) {
             "
             >${hiddenCount}</span
           >`
-          : ""
-      }
+        : ""}
     </span>
   `;
 }
@@ -313,13 +311,11 @@ export function renderChatControls(state: AppViewState) {
           state.sessionsHideCron = !hideCron;
         }}
         aria-pressed=${hideCron}
-        title=${
-          hideCron
-            ? hiddenCronCount > 0
-              ? t("chat.showCronSessionsHidden", { count: String(hiddenCronCount) })
-              : t("chat.showCronSessions")
-            : t("chat.hideCronSessions")
-        }
+        title=${hideCron
+          ? hiddenCronCount > 0
+            ? t("chat.showCronSessionsHidden", { count: String(hiddenCronCount) })
+            : t("chat.showCronSessions")
+          : t("chat.hideCronSessions")}
       >
         ${renderCronFilterIcon(hiddenCronCount)}
       </button>
@@ -945,9 +941,9 @@ export function renderTopbarThemeModeToggle(state: AppViewState) {
         (opt) => html`
           <button
             type="button"
-            class="topbar-theme-mode__btn ${
-              opt.id === state.themeMode ? "topbar-theme-mode__btn--active" : ""
-            }"
+            class="topbar-theme-mode__btn ${opt.id === state.themeMode
+              ? "topbar-theme-mode__btn--active"
+              : ""}"
             title=${opt.label}
             aria-label="Color mode: ${opt.label}"
             aria-pressed=${opt.id === state.themeMode}
diff --git a/ui/src/ui/app-render.ts b/ui/src/ui/app-render.ts
index 4acd3eb8d06..bb52a5c4eab 100644
--- a/ui/src/ui/app-render.ts
+++ b/ui/src/ui/app-render.ts
@@ -414,11 +414,11 @@ export function renderApp(state: AppViewState) {
       },
     })}
     <div
-      class="shell ${isChat ? "shell--chat" : ""} ${
-        chatFocus ? "shell--chat-focus" : ""
-      } ${navCollapsed ? "shell--nav-collapsed" : ""} ${
-        navDrawerOpen ? "shell--nav-drawer-open" : ""
-      } ${state.onboarding ? "shell--onboarding" : ""}"
+      class="shell ${isChat ? "shell--chat" : ""} ${chatFocus
+        ? "shell--chat-focus"
+        : ""} ${navCollapsed ? "shell--nav-collapsed" : ""} ${navDrawerOpen
+        ? "shell--nav-drawer-open"
+        : ""} ${state.onboarding ? "shell--onboarding" : ""}"
     >
       <button
         type="button"
@@ -469,10 +469,9 @@ export function renderApp(state: AppViewState) {
           <div class="sidebar-shell">
             <div class="sidebar-shell__header">
               <div class="sidebar-brand">
-                ${
-                  navCollapsed
-                    ? nothing
-                    : html`
+                ${navCollapsed
+                  ? nothing
+                  : html`
                       <img
                         class="sidebar-brand__logo"
                         src="${agentLogoUrl(basePath)}"
@@ -482,8 +481,7 @@ export function renderApp(state: AppViewState) {
                         <span class="sidebar-brand__eyebrow">${t("nav.control")}</span>
                         <span class="sidebar-brand__title">OpenClaw</span>
                       </span>
-                    `
-                }
+                    `}
               </div>
               <button
                 type="button"
@@ -510,9 +508,8 @@ export function renderApp(state: AppViewState) {
 
                   return html`
                     <section class="nav-section ${!showItems ? "nav-section--collapsed" : ""}">
-                      ${
-                        !navCollapsed
-                          ? html`
+                      ${!navCollapsed
+                        ? html`
                             <button
                               class="nav-section__label"
                               @click=${() => {
@@ -531,8 +528,7 @@ export function renderApp(state: AppViewState) {
                               <span class="nav-section__chevron"> ${icons.chevronDown} </span>
                             </button>
                           `
-                          : nothing
-                      }
+                        : nothing}
                       <div class="nav-section__items">
                         ${group.tabs.map((tab) =>
                           renderTab(state, tab, { collapsed: navCollapsed }),
@@ -553,14 +549,12 @@ export function renderApp(state: AppViewState) {
                   title="${t("common.docs")} (opens in new tab)"
                 >
                   <span class="nav-item__icon" aria-hidden="true">${icons.book}</span>
-                  ${
-                    !navCollapsed
-                      ? html`
+                  ${!navCollapsed
+                    ? html`
                         <span class="nav-item__text">${t("common.docs")}</span>
                         <span class="nav-item__external-icon">${icons.externalLink}</span>
                       `
-                      : nothing
-                  }
+                    : nothing}
                 </a>
                 <div class="sidebar-mode-switch">${renderTopbarThemeModeToggle(state)}</div>
                 ${(() => {
@@ -568,15 +562,13 @@ export function renderApp(state: AppViewState) {
                   return version
                     ? html`
                         <div class="sidebar-version" title=${`v${version}`}>
-                          ${
-                            !navCollapsed
-                              ? html`
+                          ${!navCollapsed
+                            ? html`
                                 <span class="sidebar-version__label">${t("common.version")}</span>
                                 <span class="sidebar-version__text">v${version}</span>
                                 ${renderSidebarConnectionStatus(state)}
                               `
-                              : html` ${renderSidebarConnectionStatus(state)} `
-                          }
+                            : html` ${renderSidebarConnectionStatus(state)} `}
                         </div>
                       `
                     : nothing;
@@ -587,11 +579,10 @@ export function renderApp(state: AppViewState) {
         </aside>
       </div>
       <main class="content ${isChat ? "content--chat" : ""}">
-        ${
-          state.updateAvailable &&
-          state.updateAvailable.latestVersion !== state.updateAvailable.currentVersion &&
-          !isUpdateBannerDismissed(state.updateAvailable)
-            ? html`<div class="update-banner callout danger" role="alert">
+        ${state.updateAvailable &&
+        state.updateAvailable.latestVersion !== state.updateAvailable.currentVersion &&
+        !isUpdateBannerDismissed(state.updateAvailable)
+          ? html`<div class="update-banner callout danger" role="alert">
               <strong>Update available:</strong> v${state.updateAvailable.latestVersion} (running
               v${state.updateAvailable.currentVersion}).
               <button
@@ -614,1425 +605,1373 @@ export function renderApp(state: AppViewState) {
                 ${icons.x}
               </button>
             </div>`
-            : nothing
-        }
-        ${
-          state.tab === "config"
-            ? nothing
-            : html`<section class="content-header">
+          : nothing}
+        ${state.tab === "config"
+          ? nothing
+          : html`<section class="content-header">
               <div>
-                ${
-                  isChat
-                    ? renderChatSessionSelect(state)
-                    : html`<div class="page-title">${titleForTab(state.tab)}</div>`
-                }
+                ${isChat
+                  ? renderChatSessionSelect(state)
+                  : html`<div class="page-title">${titleForTab(state.tab)}</div>`}
                 ${isChat ? nothing : html`<div class="page-sub">${subtitleForTab(state.tab)}</div>`}
               </div>
               <div class="page-meta">
-                ${
-                  state.lastError
-                    ? html`<div class="pill danger">${state.lastError}</div>`
-                    : nothing
-                }
+                ${state.lastError
+                  ? html`<div class="pill danger">${state.lastError}</div>`
+                  : nothing}
                 ${isChat ? renderChatControls(state) : nothing}
               </div>
-            </section>`
-        }
-        ${
-          state.tab === "overview"
-            ? renderOverview({
+            </section>`}
+        ${state.tab === "overview"
+          ? renderOverview({
+              connected: state.connected,
+              hello: state.hello,
+              settings: state.settings,
+              password: state.password,
+              lastError: state.lastError,
+              lastErrorCode: state.lastErrorCode,
+              presenceCount,
+              sessionsCount,
+              cronEnabled: state.cronStatus?.enabled ?? null,
+              cronNext,
+              lastChannelsRefresh: state.channelsLastSuccess,
+              usageResult: state.usageResult,
+              sessionsResult: state.sessionsResult,
+              skillsReport: state.skillsReport,
+              cronJobs: state.cronJobs,
+              cronStatus: state.cronStatus,
+              attentionItems: state.attentionItems,
+              eventLog: state.eventLog,
+              overviewLogLines: state.overviewLogLines,
+              showGatewayToken: state.overviewShowGatewayToken,
+              showGatewayPassword: state.overviewShowGatewayPassword,
+              onSettingsChange: (next) => state.applySettings(next),
+              onPasswordChange: (next) => (state.password = next),
+              onSessionKeyChange: (next) => {
+                state.sessionKey = next;
+                state.chatMessage = "";
+                state.resetToolStream();
+                state.applySettings({
+                  ...state.settings,
+                  sessionKey: next,
+                  lastActiveSessionKey: next,
+                });
+                void state.loadAssistantIdentity();
+              },
+              onToggleGatewayTokenVisibility: () => {
+                state.overviewShowGatewayToken = !state.overviewShowGatewayToken;
+              },
+              onToggleGatewayPasswordVisibility: () => {
+                state.overviewShowGatewayPassword = !state.overviewShowGatewayPassword;
+              },
+              onConnect: () => state.connect(),
+              onRefresh: () => state.loadOverview(),
+              onNavigate: (tab) => state.setTab(tab as import("./navigation.ts").Tab),
+              onRefreshLogs: () => state.loadOverview(),
+            })
+          : nothing}
+        ${state.tab === "channels"
+          ? lazyRender(lazyChannels, (m) =>
+              m.renderChannels({
                 connected: state.connected,
-                hello: state.hello,
-                settings: state.settings,
-                password: state.password,
-                lastError: state.lastError,
-                lastErrorCode: state.lastErrorCode,
-                presenceCount,
-                sessionsCount,
-                cronEnabled: state.cronStatus?.enabled ?? null,
-                cronNext,
-                lastChannelsRefresh: state.channelsLastSuccess,
-                usageResult: state.usageResult,
-                sessionsResult: state.sessionsResult,
-                skillsReport: state.skillsReport,
-                cronJobs: state.cronJobs,
-                cronStatus: state.cronStatus,
-                attentionItems: state.attentionItems,
-                eventLog: state.eventLog,
-                overviewLogLines: state.overviewLogLines,
-                showGatewayToken: state.overviewShowGatewayToken,
-                showGatewayPassword: state.overviewShowGatewayPassword,
-                onSettingsChange: (next) => state.applySettings(next),
-                onPasswordChange: (next) => (state.password = next),
-                onSessionKeyChange: (next) => {
-                  state.sessionKey = next;
-                  state.chatMessage = "";
-                  state.resetToolStream();
-                  state.applySettings({
-                    ...state.settings,
-                    sessionKey: next,
-                    lastActiveSessionKey: next,
-                  });
-                  void state.loadAssistantIdentity();
+                loading: state.channelsLoading,
+                snapshot: state.channelsSnapshot,
+                lastError: state.channelsError,
+                lastSuccessAt: state.channelsLastSuccess,
+                whatsappMessage: state.whatsappLoginMessage,
+                whatsappQrDataUrl: state.whatsappLoginQrDataUrl,
+                whatsappConnected: state.whatsappLoginConnected,
+                whatsappBusy: state.whatsappBusy,
+                configSchema: state.configSchema,
+                configSchemaLoading: state.configSchemaLoading,
+                configForm: state.configForm,
+                configUiHints: state.configUiHints,
+                configSaving: state.configSaving,
+                configFormDirty: state.configFormDirty,
+                nostrProfileFormState: state.nostrProfileFormState,
+                nostrProfileAccountId: state.nostrProfileAccountId,
+                onRefresh: (probe) => loadChannels(state, probe),
+                onWhatsAppStart: (force) => state.handleWhatsAppStart(force),
+                onWhatsAppWait: () => state.handleWhatsAppWait(),
+                onWhatsAppLogout: () => state.handleWhatsAppLogout(),
+                onConfigPatch: (path, value) => updateConfigFormValue(state, path, value),
+                onConfigSave: () => state.handleChannelConfigSave(),
+                onConfigReload: () => state.handleChannelConfigReload(),
+                onNostrProfileEdit: (accountId, profile) =>
+                  state.handleNostrProfileEdit(accountId, profile),
+                onNostrProfileCancel: () => state.handleNostrProfileCancel(),
+                onNostrProfileFieldChange: (field, value) =>
+                  state.handleNostrProfileFieldChange(field, value),
+                onNostrProfileSave: () => state.handleNostrProfileSave(),
+                onNostrProfileImport: () => state.handleNostrProfileImport(),
+                onNostrProfileToggleAdvanced: () => state.handleNostrProfileToggleAdvanced(),
+              }),
+            )
+          : nothing}
+        ${state.tab === "instances"
+          ? lazyRender(lazyInstances, (m) =>
+              m.renderInstances({
+                loading: state.presenceLoading,
+                entries: state.presenceEntries,
+                lastError: state.presenceError,
+                statusMessage: state.presenceStatus,
+                onRefresh: () => loadPresence(state),
+              }),
+            )
+          : nothing}
+        ${state.tab === "sessions"
+          ? lazyRender(lazySessions, (m) =>
+              m.renderSessions({
+                loading: state.sessionsLoading,
+                result: state.sessionsResult,
+                error: state.sessionsError,
+                activeMinutes: state.sessionsFilterActive,
+                limit: state.sessionsFilterLimit,
+                includeGlobal: state.sessionsIncludeGlobal,
+                includeUnknown: state.sessionsIncludeUnknown,
+                basePath: state.basePath,
+                searchQuery: state.sessionsSearchQuery,
+                sortColumn: state.sessionsSortColumn,
+                sortDir: state.sessionsSortDir,
+                page: state.sessionsPage,
+                pageSize: state.sessionsPageSize,
+                selectedKeys: state.sessionsSelectedKeys,
+                onFiltersChange: (next) => {
+                  state.sessionsFilterActive = next.activeMinutes;
+                  state.sessionsFilterLimit = next.limit;
+                  state.sessionsIncludeGlobal = next.includeGlobal;
+                  state.sessionsIncludeUnknown = next.includeUnknown;
                 },
-                onToggleGatewayTokenVisibility: () => {
-                  state.overviewShowGatewayToken = !state.overviewShowGatewayToken;
+                onSearchChange: (q) => {
+                  state.sessionsSearchQuery = q;
+                  state.sessionsPage = 0;
                 },
-                onToggleGatewayPasswordVisibility: () => {
-                  state.overviewShowGatewayPassword = !state.overviewShowGatewayPassword;
+                onSortChange: (col, dir) => {
+                  state.sessionsSortColumn = col;
+                  state.sessionsSortDir = dir;
+                  state.sessionsPage = 0;
                 },
-                onConnect: () => state.connect(),
-                onRefresh: () => state.loadOverview(),
-                onNavigate: (tab) => state.setTab(tab as import("./navigation.ts").Tab),
-                onRefreshLogs: () => state.loadOverview(),
-              })
-            : nothing
-        }
-        ${
-          state.tab === "channels"
-            ? lazyRender(lazyChannels, (m) =>
-                m.renderChannels({
-                  connected: state.connected,
-                  loading: state.channelsLoading,
-                  snapshot: state.channelsSnapshot,
-                  lastError: state.channelsError,
-                  lastSuccessAt: state.channelsLastSuccess,
-                  whatsappMessage: state.whatsappLoginMessage,
-                  whatsappQrDataUrl: state.whatsappLoginQrDataUrl,
-                  whatsappConnected: state.whatsappLoginConnected,
-                  whatsappBusy: state.whatsappBusy,
-                  configSchema: state.configSchema,
-                  configSchemaLoading: state.configSchemaLoading,
-                  configForm: state.configForm,
-                  configUiHints: state.configUiHints,
-                  configSaving: state.configSaving,
-                  configFormDirty: state.configFormDirty,
-                  nostrProfileFormState: state.nostrProfileFormState,
-                  nostrProfileAccountId: state.nostrProfileAccountId,
-                  onRefresh: (probe) => loadChannels(state, probe),
-                  onWhatsAppStart: (force) => state.handleWhatsAppStart(force),
-                  onWhatsAppWait: () => state.handleWhatsAppWait(),
-                  onWhatsAppLogout: () => state.handleWhatsAppLogout(),
-                  onConfigPatch: (path, value) => updateConfigFormValue(state, path, value),
-                  onConfigSave: () => state.handleChannelConfigSave(),
-                  onConfigReload: () => state.handleChannelConfigReload(),
-                  onNostrProfileEdit: (accountId, profile) =>
-                    state.handleNostrProfileEdit(accountId, profile),
-                  onNostrProfileCancel: () => state.handleNostrProfileCancel(),
-                  onNostrProfileFieldChange: (field, value) =>
-                    state.handleNostrProfileFieldChange(field, value),
-                  onNostrProfileSave: () => state.handleNostrProfileSave(),
-                  onNostrProfileImport: () => state.handleNostrProfileImport(),
-                  onNostrProfileToggleAdvanced: () => state.handleNostrProfileToggleAdvanced(),
-                }),
-              )
-            : nothing
-        }
-        ${
-          state.tab === "instances"
-            ? lazyRender(lazyInstances, (m) =>
-                m.renderInstances({
-                  loading: state.presenceLoading,
-                  entries: state.presenceEntries,
-                  lastError: state.presenceError,
-                  statusMessage: state.presenceStatus,
-                  onRefresh: () => loadPresence(state),
-                }),
-              )
-            : nothing
-        }
-        ${
-          state.tab === "sessions"
-            ? lazyRender(lazySessions, (m) =>
-                m.renderSessions({
-                  loading: state.sessionsLoading,
-                  result: state.sessionsResult,
-                  error: state.sessionsError,
-                  activeMinutes: state.sessionsFilterActive,
-                  limit: state.sessionsFilterLimit,
-                  includeGlobal: state.sessionsIncludeGlobal,
-                  includeUnknown: state.sessionsIncludeUnknown,
-                  basePath: state.basePath,
-                  searchQuery: state.sessionsSearchQuery,
-                  sortColumn: state.sessionsSortColumn,
-                  sortDir: state.sessionsSortDir,
-                  page: state.sessionsPage,
-                  pageSize: state.sessionsPageSize,
-                  selectedKeys: state.sessionsSelectedKeys,
-                  onFiltersChange: (next) => {
-                    state.sessionsFilterActive = next.activeMinutes;
-                    state.sessionsFilterLimit = next.limit;
-                    state.sessionsIncludeGlobal = next.includeGlobal;
-                    state.sessionsIncludeUnknown = next.includeUnknown;
-                  },
-                  onSearchChange: (q) => {
-                    state.sessionsSearchQuery = q;
-                    state.sessionsPage = 0;
-                  },
-                  onSortChange: (col, dir) => {
-                    state.sessionsSortColumn = col;
-                    state.sessionsSortDir = dir;
-                    state.sessionsPage = 0;
-                  },
-                  onPageChange: (p) => {
-                    state.sessionsPage = p;
-                  },
-                  onPageSizeChange: (s) => {
-                    state.sessionsPageSize = s;
-                    state.sessionsPage = 0;
-                  },
-                  onRefresh: () => loadSessions(state),
-                  onPatch: (key, patch) => patchSession(state, key, patch),
-                  onToggleSelect: (key) => {
+                onPageChange: (p) => {
+                  state.sessionsPage = p;
+                },
+                onPageSizeChange: (s) => {
+                  state.sessionsPageSize = s;
+                  state.sessionsPage = 0;
+                },
+                onRefresh: () => loadSessions(state),
+                onPatch: (key, patch) => patchSession(state, key, patch),
+                onToggleSelect: (key) => {
+                  const next = new Set(state.sessionsSelectedKeys);
+                  if (next.has(key)) {
+                    next.delete(key);
+                  } else {
+                    next.add(key);
+                  }
+                  state.sessionsSelectedKeys = next;
+                },
+                onSelectPage: (keys) => {
+                  const next = new Set(state.sessionsSelectedKeys);
+                  for (const k of keys) {
+                    next.add(k);
+                  }
+                  state.sessionsSelectedKeys = next;
+                },
+                onDeselectPage: (keys) => {
+                  const next = new Set(state.sessionsSelectedKeys);
+                  for (const k of keys) {
+                    next.delete(k);
+                  }
+                  state.sessionsSelectedKeys = next;
+                },
+                onDeselectAll: () => {
+                  state.sessionsSelectedKeys = new Set();
+                },
+                onDeleteSelected: async () => {
+                  const keys = [...state.sessionsSelectedKeys];
+                  const deleted = await deleteSessionsAndRefresh(state, keys);
+                  if (deleted.length > 0) {
                     const next = new Set(state.sessionsSelectedKeys);
-                    if (next.has(key)) {
-                      next.delete(key);
-                    } else {
-                      next.add(key);
-                    }
-                    state.sessionsSelectedKeys = next;
-                  },
-                  onSelectPage: (keys) => {
-                    const next = new Set(state.sessionsSelectedKeys);
-                    for (const k of keys) {
-                      next.add(k);
-                    }
-                    state.sessionsSelectedKeys = next;
-                  },
-                  onDeselectPage: (keys) => {
-                    const next = new Set(state.sessionsSelectedKeys);
-                    for (const k of keys) {
+                    for (const k of deleted) {
                       next.delete(k);
                     }
                     state.sessionsSelectedKeys = next;
-                  },
-                  onDeselectAll: () => {
-                    state.sessionsSelectedKeys = new Set();
-                  },
-                  onDeleteSelected: async () => {
-                    const keys = [...state.sessionsSelectedKeys];
-                    const deleted = await deleteSessionsAndRefresh(state, keys);
-                    if (deleted.length > 0) {
-                      const next = new Set(state.sessionsSelectedKeys);
-                      for (const k of deleted) {
-                        next.delete(k);
-                      }
-                      state.sessionsSelectedKeys = next;
-                    }
-                  },
-                  onNavigateToChat: (sessionKey) => {
-                    switchChatSession(state, sessionKey);
-                    state.setTab("chat" as import("./navigation.ts").Tab);
-                  },
-                }),
-              )
-            : nothing
-        }
+                  }
+                },
+                onNavigateToChat: (sessionKey) => {
+                  switchChatSession(state, sessionKey);
+                  state.setTab("chat" as import("./navigation.ts").Tab);
+                },
+              }),
+            )
+          : nothing}
         ${renderUsageTab(state)}
-        ${
-          state.tab === "cron"
-            ? lazyRender(lazyCron, (m) =>
-                m.renderCron({
-                  basePath: state.basePath,
-                  loading: state.cronLoading,
-                  status: state.cronStatus,
-                  jobs: visibleCronJobs,
-                  jobsLoadingMore: state.cronJobsLoadingMore,
-                  jobsTotal: state.cronJobsTotal,
-                  jobsHasMore: state.cronJobsHasMore,
-                  jobsQuery: state.cronJobsQuery,
-                  jobsEnabledFilter: state.cronJobsEnabledFilter,
-                  jobsScheduleKindFilter: state.cronJobsScheduleKindFilter,
-                  jobsLastStatusFilter: state.cronJobsLastStatusFilter,
-                  jobsSortBy: state.cronJobsSortBy,
-                  jobsSortDir: state.cronJobsSortDir,
-                  editingJobId: state.cronEditingJobId,
-                  error: state.cronError,
-                  busy: state.cronBusy,
-                  form: state.cronForm,
-                  channels: state.channelsSnapshot?.channelMeta?.length
-                    ? state.channelsSnapshot.channelMeta.map((entry) => entry.id)
-                    : (state.channelsSnapshot?.channelOrder ?? []),
-                  channelLabels: state.channelsSnapshot?.channelLabels ?? {},
-                  channelMeta: state.channelsSnapshot?.channelMeta ?? [],
-                  runsJobId: state.cronRunsJobId,
-                  runs: state.cronRuns,
-                  runsTotal: state.cronRunsTotal,
-                  runsHasMore: state.cronRunsHasMore,
-                  runsLoadingMore: state.cronRunsLoadingMore,
-                  runsScope: state.cronRunsScope,
-                  runsStatuses: state.cronRunsStatuses,
-                  runsDeliveryStatuses: state.cronRunsDeliveryStatuses,
-                  runsStatusFilter: state.cronRunsStatusFilter,
-                  runsQuery: state.cronRunsQuery,
-                  runsSortDir: state.cronRunsSortDir,
-                  fieldErrors: state.cronFieldErrors,
-                  canSubmit: !hasCronFormErrors(state.cronFieldErrors),
-                  agentSuggestions: cronAgentSuggestions,
-                  modelSuggestions: cronModelSuggestions,
-                  thinkingSuggestions: CRON_THINKING_SUGGESTIONS,
-                  timezoneSuggestions: CRON_TIMEZONE_SUGGESTIONS,
-                  deliveryToSuggestions,
-                  accountSuggestions,
-                  onFormChange: (patch) => {
-                    state.cronForm = normalizeCronFormState({ ...state.cronForm, ...patch });
-                    state.cronFieldErrors = validateCronForm(state.cronForm);
-                  },
-                  onRefresh: () => state.loadCron(),
-                  onAdd: () => addCronJob(state),
-                  onEdit: (job) => startCronEdit(state, job),
-                  onClone: (job) => startCronClone(state, job),
-                  onCancelEdit: () => cancelCronEdit(state),
-                  onToggle: (job, enabled) => toggleCronJob(state, job, enabled),
-                  onRun: (job, mode) => runCronJob(state, job, mode ?? "force"),
-                  onRemove: (job) => removeCronJob(state, job),
-                  onLoadRuns: async (jobId) => {
-                    updateCronRunsFilter(state, { cronRunsScope: "job" });
-                    await loadCronRuns(state, jobId);
-                  },
-                  onLoadMoreJobs: () => loadMoreCronJobs(state),
-                  onJobsFiltersChange: async (patch) => {
-                    updateCronJobsFilter(state, patch);
-                    const shouldReload =
-                      typeof patch.cronJobsQuery === "string" ||
-                      Boolean(patch.cronJobsEnabledFilter) ||
-                      Boolean(patch.cronJobsSortBy) ||
-                      Boolean(patch.cronJobsSortDir);
-                    if (shouldReload) {
-                      await reloadCronJobs(state);
-                    }
-                  },
-                  onJobsFiltersReset: async () => {
-                    updateCronJobsFilter(state, {
-                      cronJobsQuery: "",
-                      cronJobsEnabledFilter: "all",
-                      cronJobsScheduleKindFilter: "all",
-                      cronJobsLastStatusFilter: "all",
-                      cronJobsSortBy: "nextRunAtMs",
-                      cronJobsSortDir: "asc",
-                    });
+        ${state.tab === "cron"
+          ? lazyRender(lazyCron, (m) =>
+              m.renderCron({
+                basePath: state.basePath,
+                loading: state.cronLoading,
+                status: state.cronStatus,
+                jobs: visibleCronJobs,
+                jobsLoadingMore: state.cronJobsLoadingMore,
+                jobsTotal: state.cronJobsTotal,
+                jobsHasMore: state.cronJobsHasMore,
+                jobsQuery: state.cronJobsQuery,
+                jobsEnabledFilter: state.cronJobsEnabledFilter,
+                jobsScheduleKindFilter: state.cronJobsScheduleKindFilter,
+                jobsLastStatusFilter: state.cronJobsLastStatusFilter,
+                jobsSortBy: state.cronJobsSortBy,
+                jobsSortDir: state.cronJobsSortDir,
+                editingJobId: state.cronEditingJobId,
+                error: state.cronError,
+                busy: state.cronBusy,
+                form: state.cronForm,
+                channels: state.channelsSnapshot?.channelMeta?.length
+                  ? state.channelsSnapshot.channelMeta.map((entry) => entry.id)
+                  : (state.channelsSnapshot?.channelOrder ?? []),
+                channelLabels: state.channelsSnapshot?.channelLabels ?? {},
+                channelMeta: state.channelsSnapshot?.channelMeta ?? [],
+                runsJobId: state.cronRunsJobId,
+                runs: state.cronRuns,
+                runsTotal: state.cronRunsTotal,
+                runsHasMore: state.cronRunsHasMore,
+                runsLoadingMore: state.cronRunsLoadingMore,
+                runsScope: state.cronRunsScope,
+                runsStatuses: state.cronRunsStatuses,
+                runsDeliveryStatuses: state.cronRunsDeliveryStatuses,
+                runsStatusFilter: state.cronRunsStatusFilter,
+                runsQuery: state.cronRunsQuery,
+                runsSortDir: state.cronRunsSortDir,
+                fieldErrors: state.cronFieldErrors,
+                canSubmit: !hasCronFormErrors(state.cronFieldErrors),
+                agentSuggestions: cronAgentSuggestions,
+                modelSuggestions: cronModelSuggestions,
+                thinkingSuggestions: CRON_THINKING_SUGGESTIONS,
+                timezoneSuggestions: CRON_TIMEZONE_SUGGESTIONS,
+                deliveryToSuggestions,
+                accountSuggestions,
+                onFormChange: (patch) => {
+                  state.cronForm = normalizeCronFormState({ ...state.cronForm, ...patch });
+                  state.cronFieldErrors = validateCronForm(state.cronForm);
+                },
+                onRefresh: () => state.loadCron(),
+                onAdd: () => addCronJob(state),
+                onEdit: (job) => startCronEdit(state, job),
+                onClone: (job) => startCronClone(state, job),
+                onCancelEdit: () => cancelCronEdit(state),
+                onToggle: (job, enabled) => toggleCronJob(state, job, enabled),
+                onRun: (job, mode) => runCronJob(state, job, mode ?? "force"),
+                onRemove: (job) => removeCronJob(state, job),
+                onLoadRuns: async (jobId) => {
+                  updateCronRunsFilter(state, { cronRunsScope: "job" });
+                  await loadCronRuns(state, jobId);
+                },
+                onLoadMoreJobs: () => loadMoreCronJobs(state),
+                onJobsFiltersChange: async (patch) => {
+                  updateCronJobsFilter(state, patch);
+                  const shouldReload =
+                    typeof patch.cronJobsQuery === "string" ||
+                    Boolean(patch.cronJobsEnabledFilter) ||
+                    Boolean(patch.cronJobsSortBy) ||
+                    Boolean(patch.cronJobsSortDir);
+                  if (shouldReload) {
                     await reloadCronJobs(state);
-                  },
-                  onLoadMoreRuns: () => loadMoreCronRuns(state),
-                  onRunsFiltersChange: async (patch) => {
-                    updateCronRunsFilter(state, patch);
-                    if (state.cronRunsScope === "all") {
-                      await loadCronRuns(state, null);
-                      return;
+                  }
+                },
+                onJobsFiltersReset: async () => {
+                  updateCronJobsFilter(state, {
+                    cronJobsQuery: "",
+                    cronJobsEnabledFilter: "all",
+                    cronJobsScheduleKindFilter: "all",
+                    cronJobsLastStatusFilter: "all",
+                    cronJobsSortBy: "nextRunAtMs",
+                    cronJobsSortDir: "asc",
+                  });
+                  await reloadCronJobs(state);
+                },
+                onLoadMoreRuns: () => loadMoreCronRuns(state),
+                onRunsFiltersChange: async (patch) => {
+                  updateCronRunsFilter(state, patch);
+                  if (state.cronRunsScope === "all") {
+                    await loadCronRuns(state, null);
+                    return;
+                  }
+                  await loadCronRuns(state, state.cronRunsJobId);
+                },
+                onNavigateToChat: (sessionKey) => {
+                  switchChatSession(state, sessionKey);
+                  state.setTab("chat" as import("./navigation.ts").Tab);
+                },
+              }),
+            )
+          : nothing}
+        ${state.tab === "agents"
+          ? lazyRender(lazyAgents, (m) =>
+              m.renderAgents({
+                basePath: state.basePath ?? "",
+                loading: state.agentsLoading,
+                error: state.agentsError,
+                agentsList: state.agentsList,
+                selectedAgentId: resolvedAgentId,
+                activePanel: state.agentsPanel,
+                config: {
+                  form: configValue,
+                  loading: state.configLoading,
+                  saving: state.configSaving,
+                  dirty: state.configFormDirty,
+                },
+                channels: {
+                  snapshot: state.channelsSnapshot,
+                  loading: state.channelsLoading,
+                  error: state.channelsError,
+                  lastSuccess: state.channelsLastSuccess,
+                },
+                cron: {
+                  status: state.cronStatus,
+                  jobs: state.cronJobs,
+                  loading: state.cronLoading,
+                  error: state.cronError,
+                },
+                agentFiles: {
+                  list: state.agentFilesList,
+                  loading: state.agentFilesLoading,
+                  error: state.agentFilesError,
+                  active: state.agentFileActive,
+                  contents: state.agentFileContents,
+                  drafts: state.agentFileDrafts,
+                  saving: state.agentFileSaving,
+                },
+                agentIdentityLoading: state.agentIdentityLoading,
+                agentIdentityError: state.agentIdentityError,
+                agentIdentityById: state.agentIdentityById,
+                agentSkills: {
+                  report: state.agentSkillsReport,
+                  loading: state.agentSkillsLoading,
+                  error: state.agentSkillsError,
+                  agentId: state.agentSkillsAgentId,
+                  filter: state.skillsFilter,
+                },
+                toolsCatalog: {
+                  loading: state.toolsCatalogLoading,
+                  error: state.toolsCatalogError,
+                  result: state.toolsCatalogResult,
+                },
+                toolsEffective: {
+                  loading: state.toolsEffectiveLoading,
+                  error: state.toolsEffectiveError,
+                  result: state.toolsEffectiveResult,
+                },
+                runtimeSessionKey: state.sessionKey,
+                runtimeSessionMatchesSelectedAgent: toolsPanelUsesActiveSession,
+                modelCatalog: state.chatModelCatalog ?? [],
+                onRefresh: async () => {
+                  await loadAgents(state);
+                  const agentIds = state.agentsList?.agents?.map((entry) => entry.id) ?? [];
+                  if (agentIds.length > 0) {
+                    void loadAgentIdentities(state, agentIds);
+                  }
+                  const refreshedAgentId =
+                    state.agentsSelectedId ??
+                    state.agentsList?.defaultId ??
+                    state.agentsList?.agents?.[0]?.id ??
+                    null;
+                  if (state.agentsPanel === "files" && refreshedAgentId) {
+                    void loadAgentFiles(state, refreshedAgentId);
+                  }
+                  if (state.agentsPanel === "skills" && refreshedAgentId) {
+                    void loadAgentSkills(state, refreshedAgentId);
+                  }
+                  if (state.agentsPanel === "tools" && refreshedAgentId) {
+                    void loadToolsCatalog(state, refreshedAgentId);
+                    if (refreshedAgentId === resolveAgentIdFromSessionKey(state.sessionKey)) {
+                      void loadToolsEffective(state, {
+                        agentId: refreshedAgentId,
+                        sessionKey: state.sessionKey,
+                      });
                     }
-                    await loadCronRuns(state, state.cronRunsJobId);
-                  },
-                  onNavigateToChat: (sessionKey) => {
-                    switchChatSession(state, sessionKey);
-                    state.setTab("chat" as import("./navigation.ts").Tab);
-                  },
-                }),
-              )
-            : nothing
-        }
-        ${
-          state.tab === "agents"
-            ? lazyRender(lazyAgents, (m) =>
-                m.renderAgents({
-                  basePath: state.basePath ?? "",
-                  loading: state.agentsLoading,
-                  error: state.agentsError,
-                  agentsList: state.agentsList,
-                  selectedAgentId: resolvedAgentId,
-                  activePanel: state.agentsPanel,
-                  config: {
-                    form: configValue,
-                    loading: state.configLoading,
-                    saving: state.configSaving,
-                    dirty: state.configFormDirty,
-                  },
-                  channels: {
-                    snapshot: state.channelsSnapshot,
-                    loading: state.channelsLoading,
-                    error: state.channelsError,
-                    lastSuccess: state.channelsLastSuccess,
-                  },
-                  cron: {
-                    status: state.cronStatus,
-                    jobs: state.cronJobs,
-                    loading: state.cronLoading,
-                    error: state.cronError,
-                  },
-                  agentFiles: {
-                    list: state.agentFilesList,
-                    loading: state.agentFilesLoading,
-                    error: state.agentFilesError,
-                    active: state.agentFileActive,
-                    contents: state.agentFileContents,
-                    drafts: state.agentFileDrafts,
-                    saving: state.agentFileSaving,
-                  },
-                  agentIdentityLoading: state.agentIdentityLoading,
-                  agentIdentityError: state.agentIdentityError,
-                  agentIdentityById: state.agentIdentityById,
-                  agentSkills: {
-                    report: state.agentSkillsReport,
-                    loading: state.agentSkillsLoading,
-                    error: state.agentSkillsError,
-                    agentId: state.agentSkillsAgentId,
-                    filter: state.skillsFilter,
-                  },
-                  toolsCatalog: {
-                    loading: state.toolsCatalogLoading,
-                    error: state.toolsCatalogError,
-                    result: state.toolsCatalogResult,
-                  },
-                  toolsEffective: {
-                    loading: state.toolsEffectiveLoading,
-                    error: state.toolsEffectiveError,
-                    result: state.toolsEffectiveResult,
-                  },
-                  runtimeSessionKey: state.sessionKey,
-                  runtimeSessionMatchesSelectedAgent: toolsPanelUsesActiveSession,
-                  modelCatalog: state.chatModelCatalog ?? [],
-                  onRefresh: async () => {
-                    await loadAgents(state);
-                    const agentIds = state.agentsList?.agents?.map((entry) => entry.id) ?? [];
-                    if (agentIds.length > 0) {
-                      void loadAgentIdentities(state, agentIds);
+                  }
+                  if (state.agentsPanel === "channels") {
+                    void loadChannels(state, false);
+                  }
+                  if (state.agentsPanel === "cron") {
+                    void state.loadCron();
+                  }
+                },
+                onSelectAgent: (agentId) => {
+                  if (state.agentsSelectedId === agentId) {
+                    return;
+                  }
+                  state.agentsSelectedId = agentId;
+                  state.agentFilesList = null;
+                  state.agentFilesError = null;
+                  state.agentFilesLoading = false;
+                  state.agentFileActive = null;
+                  state.agentFileContents = {};
+                  state.agentFileDrafts = {};
+                  state.agentSkillsReport = null;
+                  state.agentSkillsError = null;
+                  state.agentSkillsAgentId = null;
+                  state.toolsCatalogResult = null;
+                  state.toolsCatalogError = null;
+                  state.toolsCatalogLoading = false;
+                  state.toolsEffectiveResult = null;
+                  state.toolsEffectiveResultKey = null;
+                  state.toolsEffectiveError = null;
+                  state.toolsEffectiveLoading = false;
+                  state.toolsEffectiveLoadingKey = null;
+                  void loadAgentIdentity(state, agentId);
+                  if (state.agentsPanel === "files") {
+                    void loadAgentFiles(state, agentId);
+                  }
+                  if (state.agentsPanel === "tools") {
+                    void loadToolsCatalog(state, agentId);
+                    if (agentId === resolveAgentIdFromSessionKey(state.sessionKey)) {
+                      void loadToolsEffective(state, {
+                        agentId,
+                        sessionKey: state.sessionKey,
+                      });
                     }
-                    const refreshedAgentId =
-                      state.agentsSelectedId ??
-                      state.agentsList?.defaultId ??
-                      state.agentsList?.agents?.[0]?.id ??
-                      null;
-                    if (state.agentsPanel === "files" && refreshedAgentId) {
-                      void loadAgentFiles(state, refreshedAgentId);
+                  }
+                  if (state.agentsPanel === "skills") {
+                    void loadAgentSkills(state, agentId);
+                  }
+                },
+                onSelectPanel: (panel) => {
+                  state.agentsPanel = panel;
+                  if (panel === "files" && resolvedAgentId) {
+                    if (state.agentFilesList?.agentId !== resolvedAgentId) {
+                      state.agentFilesList = null;
+                      state.agentFilesError = null;
+                      state.agentFileActive = null;
+                      state.agentFileContents = {};
+                      state.agentFileDrafts = {};
+                      void loadAgentFiles(state, resolvedAgentId);
                     }
-                    if (state.agentsPanel === "skills" && refreshedAgentId) {
-                      void loadAgentSkills(state, refreshedAgentId);
-                    }
-                    if (state.agentsPanel === "tools" && refreshedAgentId) {
-                      void loadToolsCatalog(state, refreshedAgentId);
-                      if (refreshedAgentId === resolveAgentIdFromSessionKey(state.sessionKey)) {
-                        void loadToolsEffective(state, {
-                          agentId: refreshedAgentId,
-                          sessionKey: state.sessionKey,
-                        });
-                      }
-                    }
-                    if (state.agentsPanel === "channels") {
-                      void loadChannels(state, false);
-                    }
-                    if (state.agentsPanel === "cron") {
-                      void state.loadCron();
-                    }
-                  },
-                  onSelectAgent: (agentId) => {
-                    if (state.agentsSelectedId === agentId) {
-                      return;
-                    }
-                    state.agentsSelectedId = agentId;
-                    state.agentFilesList = null;
-                    state.agentFilesError = null;
-                    state.agentFilesLoading = false;
-                    state.agentFileActive = null;
-                    state.agentFileContents = {};
-                    state.agentFileDrafts = {};
-                    state.agentSkillsReport = null;
-                    state.agentSkillsError = null;
-                    state.agentSkillsAgentId = null;
-                    state.toolsCatalogResult = null;
-                    state.toolsCatalogError = null;
-                    state.toolsCatalogLoading = false;
-                    state.toolsEffectiveResult = null;
-                    state.toolsEffectiveResultKey = null;
-                    state.toolsEffectiveError = null;
-                    state.toolsEffectiveLoading = false;
-                    state.toolsEffectiveLoadingKey = null;
-                    void loadAgentIdentity(state, agentId);
-                    if (state.agentsPanel === "files") {
-                      void loadAgentFiles(state, agentId);
-                    }
-                    if (state.agentsPanel === "tools") {
-                      void loadToolsCatalog(state, agentId);
-                      if (agentId === resolveAgentIdFromSessionKey(state.sessionKey)) {
-                        void loadToolsEffective(state, {
-                          agentId,
-                          sessionKey: state.sessionKey,
-                        });
-                      }
-                    }
-                    if (state.agentsPanel === "skills") {
-                      void loadAgentSkills(state, agentId);
-                    }
-                  },
-                  onSelectPanel: (panel) => {
-                    state.agentsPanel = panel;
-                    if (panel === "files" && resolvedAgentId) {
-                      if (state.agentFilesList?.agentId !== resolvedAgentId) {
-                        state.agentFilesList = null;
-                        state.agentFilesError = null;
-                        state.agentFileActive = null;
-                        state.agentFileContents = {};
-                        state.agentFileDrafts = {};
-                        void loadAgentFiles(state, resolvedAgentId);
-                      }
-                    }
-                    if (panel === "skills") {
-                      if (resolvedAgentId) {
-                        void loadAgentSkills(state, resolvedAgentId);
-                      }
-                    }
-                    if (panel === "tools" && resolvedAgentId) {
-                      if (
-                        state.toolsCatalogResult?.agentId !== resolvedAgentId ||
-                        state.toolsCatalogError
-                      ) {
-                        void loadToolsCatalog(state, resolvedAgentId);
-                      }
-                      if (resolvedAgentId === resolveAgentIdFromSessionKey(state.sessionKey)) {
-                        const toolsRequestKey = buildToolsEffectiveRequestKey(state, {
-                          agentId: resolvedAgentId,
-                          sessionKey: state.sessionKey,
-                        });
-                        if (
-                          state.toolsEffectiveResultKey !== toolsRequestKey ||
-                          state.toolsEffectiveError
-                        ) {
-                          void loadToolsEffective(state, {
-                            agentId: resolvedAgentId,
-                            sessionKey: state.sessionKey,
-                          });
-                        }
-                      } else {
-                        state.toolsEffectiveResult = null;
-                        state.toolsEffectiveResultKey = null;
-                        state.toolsEffectiveError = null;
-                        state.toolsEffectiveLoading = false;
-                        state.toolsEffectiveLoadingKey = null;
-                      }
-                    }
-                    if (panel === "channels") {
-                      void loadChannels(state, false);
-                    }
-                    if (panel === "cron") {
-                      void state.loadCron();
-                    }
-                  },
-                  onLoadFiles: (agentId) => loadAgentFiles(state, agentId),
-                  onSelectFile: (name) => {
-                    state.agentFileActive = name;
-                    if (!resolvedAgentId) {
-                      return;
-                    }
-                    void loadAgentFileContent(state, resolvedAgentId, name);
-                  },
-                  onFileDraftChange: (name, content) => {
-                    state.agentFileDrafts = { ...state.agentFileDrafts, [name]: content };
-                  },
-                  onFileReset: (name) => {
-                    const base = state.agentFileContents[name] ?? "";
-                    state.agentFileDrafts = { ...state.agentFileDrafts, [name]: base };
-                  },
-                  onFileSave: (name) => {
-                    if (!resolvedAgentId) {
-                      return;
-                    }
-                    const content =
-                      state.agentFileDrafts[name] ?? state.agentFileContents[name] ?? "";
-                    void saveAgentFile(state, resolvedAgentId, name, content);
-                  },
-                  onToolsProfileChange: (agentId, profile, clearAllow) => {
-                    const index =
-                      profile || clearAllow ? ensureAgentIndex(agentId) : findAgentIndex(agentId);
-                    if (index < 0) {
-                      return;
-                    }
-                    const basePath = ["agents", "list", index, "tools"];
-                    if (profile) {
-                      updateConfigFormValue(state, [...basePath, "profile"], profile);
-                    } else {
-                      removeConfigFormValue(state, [...basePath, "profile"]);
-                    }
-                    if (clearAllow) {
-                      removeConfigFormValue(state, [...basePath, "allow"]);
-                    }
-                  },
-                  onToolsOverridesChange: (agentId, alsoAllow, deny) => {
-                    const index =
-                      alsoAllow.length > 0 || deny.length > 0
-                        ? ensureAgentIndex(agentId)
-                        : findAgentIndex(agentId);
-                    if (index < 0) {
-                      return;
-                    }
-                    const basePath = ["agents", "list", index, "tools"];
-                    if (alsoAllow.length > 0) {
-                      updateConfigFormValue(state, [...basePath, "alsoAllow"], alsoAllow);
-                    } else {
-                      removeConfigFormValue(state, [...basePath, "alsoAllow"]);
-                    }
-                    if (deny.length > 0) {
-                      updateConfigFormValue(state, [...basePath, "deny"], deny);
-                    } else {
-                      removeConfigFormValue(state, [...basePath, "deny"]);
-                    }
-                  },
-                  onConfigReload: () => loadConfig(state),
-                  onConfigSave: () => saveAgentsConfig(state),
-                  onChannelsRefresh: () => loadChannels(state, false),
-                  onCronRefresh: () => state.loadCron(),
-                  onCronRunNow: (jobId) => {
-                    const job = state.cronJobs.find((entry) => entry.id === jobId);
-                    if (!job) {
-                      return;
-                    }
-                    void runCronJob(state, job, "force");
-                  },
-                  onSkillsFilterChange: (next) => (state.skillsFilter = next),
-                  onSkillsRefresh: () => {
+                  }
+                  if (panel === "skills") {
                     if (resolvedAgentId) {
                       void loadAgentSkills(state, resolvedAgentId);
                     }
-                  },
-                  onAgentSkillToggle: (agentId, skillName, enabled) => {
-                    const index = ensureAgentIndex(agentId);
-                    if (index < 0) {
-                      return;
+                  }
+                  if (panel === "tools" && resolvedAgentId) {
+                    if (
+                      state.toolsCatalogResult?.agentId !== resolvedAgentId ||
+                      state.toolsCatalogError
+                    ) {
+                      void loadToolsCatalog(state, resolvedAgentId);
                     }
-                    const list = (
-                      getCurrentConfigValue() as { agents?: { list?: unknown[] } } | null
-                    )?.agents?.list;
-                    const entry = Array.isArray(list)
-                      ? (list[index] as { skills?: unknown })
-                      : undefined;
-                    const normalizedSkill = skillName.trim();
-                    if (!normalizedSkill) {
-                      return;
-                    }
-                    const allSkills =
-                      state.agentSkillsReport?.skills?.map((skill) => skill.name).filter(Boolean) ??
-                      [];
-                    const existing = Array.isArray(entry?.skills)
-                      ? entry.skills.map((name) => String(name).trim()).filter(Boolean)
-                      : undefined;
-                    const base = existing ?? allSkills;
-                    const next = new Set(base);
-                    if (enabled) {
-                      next.add(normalizedSkill);
-                    } else {
-                      next.delete(normalizedSkill);
-                    }
-                    updateConfigFormValue(state, ["agents", "list", index, "skills"], [...next]);
-                  },
-                  onAgentSkillsClear: (agentId) => {
-                    const index = findAgentIndex(agentId);
-                    if (index < 0) {
-                      return;
-                    }
-                    removeConfigFormValue(state, ["agents", "list", index, "skills"]);
-                  },
-                  onAgentSkillsDisableAll: (agentId) => {
-                    const index = ensureAgentIndex(agentId);
-                    if (index < 0) {
-                      return;
-                    }
-                    updateConfigFormValue(state, ["agents", "list", index, "skills"], []);
-                  },
-                  onModelChange: (agentId, modelId) => {
-                    const index = modelId ? ensureAgentIndex(agentId) : findAgentIndex(agentId);
-                    if (index < 0) {
-                      return;
-                    }
-                    const list = (
-                      getCurrentConfigValue() as { agents?: { list?: unknown[] } } | null
-                    )?.agents?.list;
-                    const basePath = ["agents", "list", index, "model"];
-                    if (!modelId) {
-                      removeConfigFormValue(state, basePath);
-                    } else {
-                      const entry = Array.isArray(list)
-                        ? (list[index] as { model?: unknown })
-                        : undefined;
-                      const existing = entry?.model;
-                      if (existing && typeof existing === "object" && !Array.isArray(existing)) {
-                        const fallbacks = (existing as { fallbacks?: unknown }).fallbacks;
-                        const next = {
-                          primary: modelId,
-                          ...(Array.isArray(fallbacks) ? { fallbacks } : {}),
-                        };
-                        updateConfigFormValue(state, basePath, next);
-                      } else {
-                        updateConfigFormValue(state, basePath, modelId);
+                    if (resolvedAgentId === resolveAgentIdFromSessionKey(state.sessionKey)) {
+                      const toolsRequestKey = buildToolsEffectiveRequestKey(state, {
+                        agentId: resolvedAgentId,
+                        sessionKey: state.sessionKey,
+                      });
+                      if (
+                        state.toolsEffectiveResultKey !== toolsRequestKey ||
+                        state.toolsEffectiveError
+                      ) {
+                        void loadToolsEffective(state, {
+                          agentId: resolvedAgentId,
+                          sessionKey: state.sessionKey,
+                        });
                       }
+                    } else {
+                      state.toolsEffectiveResult = null;
+                      state.toolsEffectiveResultKey = null;
+                      state.toolsEffectiveError = null;
+                      state.toolsEffectiveLoading = false;
+                      state.toolsEffectiveLoadingKey = null;
                     }
-                    void refreshVisibleToolsEffectiveForCurrentSession(state);
-                  },
-                  onModelFallbacksChange: (agentId, fallbacks) => {
-                    const normalized = fallbacks.map((name) => name.trim()).filter(Boolean);
-                    const currentConfig = getCurrentConfigValue();
-                    const resolvedConfig = resolveAgentConfig(currentConfig, agentId);
-                    const effectivePrimary =
-                      resolveModelPrimary(resolvedConfig.entry?.model) ??
-                      resolveModelPrimary(resolvedConfig.defaults?.model);
-                    const effectiveFallbacks = resolveEffectiveModelFallbacks(
-                      resolvedConfig.entry?.model,
-                      resolvedConfig.defaults?.model,
-                    );
-                    const index =
-                      normalized.length > 0
-                        ? effectivePrimary
-                          ? ensureAgentIndex(agentId)
-                          : -1
-                        : (effectiveFallbacks?.length ?? 0) > 0 || findAgentIndex(agentId) >= 0
-                          ? ensureAgentIndex(agentId)
-                          : -1;
-                    if (index < 0) {
-                      return;
-                    }
-                    const list = (
-                      getCurrentConfigValue() as { agents?: { list?: unknown[] } } | null
-                    )?.agents?.list;
-                    const basePath = ["agents", "list", index, "model"];
+                  }
+                  if (panel === "channels") {
+                    void loadChannels(state, false);
+                  }
+                  if (panel === "cron") {
+                    void state.loadCron();
+                  }
+                },
+                onLoadFiles: (agentId) => loadAgentFiles(state, agentId),
+                onSelectFile: (name) => {
+                  state.agentFileActive = name;
+                  if (!resolvedAgentId) {
+                    return;
+                  }
+                  void loadAgentFileContent(state, resolvedAgentId, name);
+                },
+                onFileDraftChange: (name, content) => {
+                  state.agentFileDrafts = { ...state.agentFileDrafts, [name]: content };
+                },
+                onFileReset: (name) => {
+                  const base = state.agentFileContents[name] ?? "";
+                  state.agentFileDrafts = { ...state.agentFileDrafts, [name]: base };
+                },
+                onFileSave: (name) => {
+                  if (!resolvedAgentId) {
+                    return;
+                  }
+                  const content =
+                    state.agentFileDrafts[name] ?? state.agentFileContents[name] ?? "";
+                  void saveAgentFile(state, resolvedAgentId, name, content);
+                },
+                onToolsProfileChange: (agentId, profile, clearAllow) => {
+                  const index =
+                    profile || clearAllow ? ensureAgentIndex(agentId) : findAgentIndex(agentId);
+                  if (index < 0) {
+                    return;
+                  }
+                  const basePath = ["agents", "list", index, "tools"];
+                  if (profile) {
+                    updateConfigFormValue(state, [...basePath, "profile"], profile);
+                  } else {
+                    removeConfigFormValue(state, [...basePath, "profile"]);
+                  }
+                  if (clearAllow) {
+                    removeConfigFormValue(state, [...basePath, "allow"]);
+                  }
+                },
+                onToolsOverridesChange: (agentId, alsoAllow, deny) => {
+                  const index =
+                    alsoAllow.length > 0 || deny.length > 0
+                      ? ensureAgentIndex(agentId)
+                      : findAgentIndex(agentId);
+                  if (index < 0) {
+                    return;
+                  }
+                  const basePath = ["agents", "list", index, "tools"];
+                  if (alsoAllow.length > 0) {
+                    updateConfigFormValue(state, [...basePath, "alsoAllow"], alsoAllow);
+                  } else {
+                    removeConfigFormValue(state, [...basePath, "alsoAllow"]);
+                  }
+                  if (deny.length > 0) {
+                    updateConfigFormValue(state, [...basePath, "deny"], deny);
+                  } else {
+                    removeConfigFormValue(state, [...basePath, "deny"]);
+                  }
+                },
+                onConfigReload: () => loadConfig(state),
+                onConfigSave: () => saveAgentsConfig(state),
+                onChannelsRefresh: () => loadChannels(state, false),
+                onCronRefresh: () => state.loadCron(),
+                onCronRunNow: (jobId) => {
+                  const job = state.cronJobs.find((entry) => entry.id === jobId);
+                  if (!job) {
+                    return;
+                  }
+                  void runCronJob(state, job, "force");
+                },
+                onSkillsFilterChange: (next) => (state.skillsFilter = next),
+                onSkillsRefresh: () => {
+                  if (resolvedAgentId) {
+                    void loadAgentSkills(state, resolvedAgentId);
+                  }
+                },
+                onAgentSkillToggle: (agentId, skillName, enabled) => {
+                  const index = ensureAgentIndex(agentId);
+                  if (index < 0) {
+                    return;
+                  }
+                  const list = (getCurrentConfigValue() as { agents?: { list?: unknown[] } } | null)
+                    ?.agents?.list;
+                  const entry = Array.isArray(list)
+                    ? (list[index] as { skills?: unknown })
+                    : undefined;
+                  const normalizedSkill = skillName.trim();
+                  if (!normalizedSkill) {
+                    return;
+                  }
+                  const allSkills =
+                    state.agentSkillsReport?.skills?.map((skill) => skill.name).filter(Boolean) ??
+                    [];
+                  const existing = Array.isArray(entry?.skills)
+                    ? entry.skills.map((name) => String(name).trim()).filter(Boolean)
+                    : undefined;
+                  const base = existing ?? allSkills;
+                  const next = new Set(base);
+                  if (enabled) {
+                    next.add(normalizedSkill);
+                  } else {
+                    next.delete(normalizedSkill);
+                  }
+                  updateConfigFormValue(state, ["agents", "list", index, "skills"], [...next]);
+                },
+                onAgentSkillsClear: (agentId) => {
+                  const index = findAgentIndex(agentId);
+                  if (index < 0) {
+                    return;
+                  }
+                  removeConfigFormValue(state, ["agents", "list", index, "skills"]);
+                },
+                onAgentSkillsDisableAll: (agentId) => {
+                  const index = ensureAgentIndex(agentId);
+                  if (index < 0) {
+                    return;
+                  }
+                  updateConfigFormValue(state, ["agents", "list", index, "skills"], []);
+                },
+                onModelChange: (agentId, modelId) => {
+                  const index = modelId ? ensureAgentIndex(agentId) : findAgentIndex(agentId);
+                  if (index < 0) {
+                    return;
+                  }
+                  const list = (getCurrentConfigValue() as { agents?: { list?: unknown[] } } | null)
+                    ?.agents?.list;
+                  const basePath = ["agents", "list", index, "model"];
+                  if (!modelId) {
+                    removeConfigFormValue(state, basePath);
+                  } else {
                     const entry = Array.isArray(list)
                       ? (list[index] as { model?: unknown })
                       : undefined;
                     const existing = entry?.model;
-                    const resolvePrimary = () => {
-                      if (typeof existing === "string") {
-                        return existing.trim() || null;
-                      }
-                      if (existing && typeof existing === "object" && !Array.isArray(existing)) {
-                        const primary = (existing as { primary?: unknown }).primary;
-                        if (typeof primary === "string") {
-                          const trimmed = primary.trim();
-                          return trimmed || null;
-                        }
-                      }
-                      return null;
-                    };
-                    const primary = resolvePrimary() ?? effectivePrimary;
-                    if (normalized.length === 0) {
-                      if (primary) {
-                        updateConfigFormValue(state, basePath, primary);
-                      } else {
-                        removeConfigFormValue(state, basePath);
-                      }
-                      return;
-                    }
-                    if (!primary) {
-                      return;
-                    }
-                    updateConfigFormValue(state, basePath, { primary, fallbacks: normalized });
-                  },
-                  onSetDefault: (agentId) => {
-                    if (!configValue) {
-                      return;
-                    }
-                    updateConfigFormValue(state, ["agents", "defaultId"], agentId);
-                  },
-                }),
-              )
-            : nothing
-        }
-        ${
-          state.tab === "skills"
-            ? lazyRender(lazySkills, (m) =>
-                m.renderSkills({
-                  connected: state.connected,
-                  loading: state.skillsLoading,
-                  report: state.skillsReport,
-                  error: state.skillsError,
-                  filter: state.skillsFilter,
-                  statusFilter: state.skillsStatusFilter,
-                  edits: state.skillEdits,
-                  messages: state.skillMessages,
-                  busyKey: state.skillsBusyKey,
-                  detailKey: state.skillsDetailKey,
-                  onFilterChange: (next) => (state.skillsFilter = next),
-                  onStatusFilterChange: (next) => (state.skillsStatusFilter = next),
-                  onRefresh: () => loadSkills(state, { clearMessages: true }),
-                  onToggle: (key, enabled) => updateSkillEnabled(state, key, enabled),
-                  onEdit: (key, value) => updateSkillEdit(state, key, value),
-                  onSaveKey: (key) => saveSkillApiKey(state, key),
-                  onInstall: (skillKey, name, installId) =>
-                    installSkill(state, skillKey, name, installId),
-                  onDetailOpen: (key) => (state.skillsDetailKey = key),
-                  onDetailClose: () => (state.skillsDetailKey = null),
-                }),
-              )
-            : nothing
-        }
-        ${
-          state.tab === "nodes"
-            ? lazyRender(lazyNodes, (m) =>
-                m.renderNodes({
-                  loading: state.nodesLoading,
-                  nodes: state.nodes,
-                  devicesLoading: state.devicesLoading,
-                  devicesError: state.devicesError,
-                  devicesList: state.devicesList,
-                  configForm:
-                    state.configForm ??
-                    (state.configSnapshot?.config as Record<string, unknown> | null),
-                  configLoading: state.configLoading,
-                  configSaving: state.configSaving,
-                  configDirty: state.configFormDirty,
-                  configFormMode: state.configFormMode,
-                  execApprovalsLoading: state.execApprovalsLoading,
-                  execApprovalsSaving: state.execApprovalsSaving,
-                  execApprovalsDirty: state.execApprovalsDirty,
-                  execApprovalsSnapshot: state.execApprovalsSnapshot,
-                  execApprovalsForm: state.execApprovalsForm,
-                  execApprovalsSelectedAgent: state.execApprovalsSelectedAgent,
-                  execApprovalsTarget: state.execApprovalsTarget,
-                  execApprovalsTargetNodeId: state.execApprovalsTargetNodeId,
-                  onRefresh: () => loadNodes(state),
-                  onDevicesRefresh: () => loadDevices(state),
-                  onDeviceApprove: (requestId) => approveDevicePairing(state, requestId),
-                  onDeviceReject: (requestId) => rejectDevicePairing(state, requestId),
-                  onDeviceRotate: (deviceId, role, scopes) =>
-                    rotateDeviceToken(state, { deviceId, role, scopes }),
-                  onDeviceRevoke: (deviceId, role) => revokeDeviceToken(state, { deviceId, role }),
-                  onLoadConfig: () => loadConfig(state),
-                  onLoadExecApprovals: () => {
-                    const target =
-                      state.execApprovalsTarget === "node" && state.execApprovalsTargetNodeId
-                        ? { kind: "node" as const, nodeId: state.execApprovalsTargetNodeId }
-                        : { kind: "gateway" as const };
-                    return loadExecApprovals(state, target);
-                  },
-                  onBindDefault: (nodeId) => {
-                    if (nodeId) {
-                      updateConfigFormValue(state, ["tools", "exec", "node"], nodeId);
+                    if (existing && typeof existing === "object" && !Array.isArray(existing)) {
+                      const fallbacks = (existing as { fallbacks?: unknown }).fallbacks;
+                      const next = {
+                        primary: modelId,
+                        ...(Array.isArray(fallbacks) ? { fallbacks } : {}),
+                      };
+                      updateConfigFormValue(state, basePath, next);
                     } else {
-                      removeConfigFormValue(state, ["tools", "exec", "node"]);
+                      updateConfigFormValue(state, basePath, modelId);
                     }
-                  },
-                  onBindAgent: (agentIndex, nodeId) => {
-                    const basePath = ["agents", "list", agentIndex, "tools", "exec", "node"];
-                    if (nodeId) {
-                      updateConfigFormValue(state, basePath, nodeId);
+                  }
+                  void refreshVisibleToolsEffectiveForCurrentSession(state);
+                },
+                onModelFallbacksChange: (agentId, fallbacks) => {
+                  const normalized = fallbacks.map((name) => name.trim()).filter(Boolean);
+                  const currentConfig = getCurrentConfigValue();
+                  const resolvedConfig = resolveAgentConfig(currentConfig, agentId);
+                  const effectivePrimary =
+                    resolveModelPrimary(resolvedConfig.entry?.model) ??
+                    resolveModelPrimary(resolvedConfig.defaults?.model);
+                  const effectiveFallbacks = resolveEffectiveModelFallbacks(
+                    resolvedConfig.entry?.model,
+                    resolvedConfig.defaults?.model,
+                  );
+                  const index =
+                    normalized.length > 0
+                      ? effectivePrimary
+                        ? ensureAgentIndex(agentId)
+                        : -1
+                      : (effectiveFallbacks?.length ?? 0) > 0 || findAgentIndex(agentId) >= 0
+                        ? ensureAgentIndex(agentId)
+                        : -1;
+                  if (index < 0) {
+                    return;
+                  }
+                  const list = (getCurrentConfigValue() as { agents?: { list?: unknown[] } } | null)
+                    ?.agents?.list;
+                  const basePath = ["agents", "list", index, "model"];
+                  const entry = Array.isArray(list)
+                    ? (list[index] as { model?: unknown })
+                    : undefined;
+                  const existing = entry?.model;
+                  const resolvePrimary = () => {
+                    if (typeof existing === "string") {
+                      return existing.trim() || null;
+                    }
+                    if (existing && typeof existing === "object" && !Array.isArray(existing)) {
+                      const primary = (existing as { primary?: unknown }).primary;
+                      if (typeof primary === "string") {
+                        const trimmed = primary.trim();
+                        return trimmed || null;
+                      }
+                    }
+                    return null;
+                  };
+                  const primary = resolvePrimary() ?? effectivePrimary;
+                  if (normalized.length === 0) {
+                    if (primary) {
+                      updateConfigFormValue(state, basePath, primary);
                     } else {
                       removeConfigFormValue(state, basePath);
                     }
-                  },
-                  onSaveBindings: () => saveConfig(state),
-                  onExecApprovalsTargetChange: (kind, nodeId) => {
-                    state.execApprovalsTarget = kind;
-                    state.execApprovalsTargetNodeId = nodeId;
-                    state.execApprovalsSnapshot = null;
-                    state.execApprovalsForm = null;
-                    state.execApprovalsDirty = false;
-                    state.execApprovalsSelectedAgent = null;
-                  },
-                  onExecApprovalsSelectAgent: (agentId) => {
-                    state.execApprovalsSelectedAgent = agentId;
-                  },
-                  onExecApprovalsPatch: (path, value) =>
-                    updateExecApprovalsFormValue(state, path, value),
-                  onExecApprovalsRemove: (path) => removeExecApprovalsFormValue(state, path),
-                  onSaveExecApprovals: () => {
-                    const target =
-                      state.execApprovalsTarget === "node" && state.execApprovalsTargetNodeId
-                        ? { kind: "node" as const, nodeId: state.execApprovalsTargetNodeId }
-                        : { kind: "gateway" as const };
-                    return saveExecApprovals(state, target);
-                  },
-                }),
-              )
-            : nothing
-        }
-        ${
-          state.tab === "chat"
-            ? renderChat({
-                sessionKey: state.sessionKey,
-                onSessionKeyChange: (next) => {
-                  state.sessionKey = next;
-                  state.chatMessage = "";
-                  state.chatAttachments = [];
-                  state.chatStream = null;
-                  state.chatStreamStartedAt = null;
-                  state.chatRunId = null;
-                  state.chatQueue = [];
-                  state.resetToolStream();
-                  state.resetChatScroll();
-                  state.applySettings({
-                    ...state.settings,
-                    sessionKey: next,
-                    lastActiveSessionKey: next,
-                  });
-                  void state.loadAssistantIdentity();
-                  void loadChatHistory(state);
-                  void refreshChatAvatar(state);
+                    return;
+                  }
+                  if (!primary) {
+                    return;
+                  }
+                  updateConfigFormValue(state, basePath, { primary, fallbacks: normalized });
                 },
-                thinkingLevel: state.chatThinkingLevel,
-                showThinking,
-                showToolCalls,
-                loading: state.chatLoading,
-                sending: state.chatSending,
-                compactionStatus: state.compactionStatus,
-                fallbackStatus: state.fallbackStatus,
-                assistantAvatarUrl: chatAvatarUrl,
-                messages: state.chatMessages,
-                toolMessages: state.chatToolMessages,
-                streamSegments: state.chatStreamSegments,
-                stream: state.chatStream,
-                streamStartedAt: state.chatStreamStartedAt,
-                draft: state.chatMessage,
-                queue: state.chatQueue,
+                onSetDefault: (agentId) => {
+                  if (!configValue) {
+                    return;
+                  }
+                  updateConfigFormValue(state, ["agents", "defaultId"], agentId);
+                },
+              }),
+            )
+          : nothing}
+        ${state.tab === "skills"
+          ? lazyRender(lazySkills, (m) =>
+              m.renderSkills({
                 connected: state.connected,
-                canSend: state.connected,
-                disabledReason: chatDisabledReason,
-                error: state.lastError,
-                sessions: state.sessionsResult,
-                focusMode: chatFocus,
-                onRefresh: () => {
-                  state.resetToolStream();
-                  return Promise.all([loadChatHistory(state), refreshChatAvatar(state)]);
+                loading: state.skillsLoading,
+                report: state.skillsReport,
+                error: state.skillsError,
+                filter: state.skillsFilter,
+                statusFilter: state.skillsStatusFilter,
+                edits: state.skillEdits,
+                messages: state.skillMessages,
+                busyKey: state.skillsBusyKey,
+                detailKey: state.skillsDetailKey,
+                onFilterChange: (next) => (state.skillsFilter = next),
+                onStatusFilterChange: (next) => (state.skillsStatusFilter = next),
+                onRefresh: () => loadSkills(state, { clearMessages: true }),
+                onToggle: (key, enabled) => updateSkillEnabled(state, key, enabled),
+                onEdit: (key, value) => updateSkillEdit(state, key, value),
+                onSaveKey: (key) => saveSkillApiKey(state, key),
+                onInstall: (skillKey, name, installId) =>
+                  installSkill(state, skillKey, name, installId),
+                onDetailOpen: (key) => (state.skillsDetailKey = key),
+                onDetailClose: () => (state.skillsDetailKey = null),
+              }),
+            )
+          : nothing}
+        ${state.tab === "nodes"
+          ? lazyRender(lazyNodes, (m) =>
+              m.renderNodes({
+                loading: state.nodesLoading,
+                nodes: state.nodes,
+                devicesLoading: state.devicesLoading,
+                devicesError: state.devicesError,
+                devicesList: state.devicesList,
+                configForm:
+                  state.configForm ??
+                  (state.configSnapshot?.config as Record<string, unknown> | null),
+                configLoading: state.configLoading,
+                configSaving: state.configSaving,
+                configDirty: state.configFormDirty,
+                configFormMode: state.configFormMode,
+                execApprovalsLoading: state.execApprovalsLoading,
+                execApprovalsSaving: state.execApprovalsSaving,
+                execApprovalsDirty: state.execApprovalsDirty,
+                execApprovalsSnapshot: state.execApprovalsSnapshot,
+                execApprovalsForm: state.execApprovalsForm,
+                execApprovalsSelectedAgent: state.execApprovalsSelectedAgent,
+                execApprovalsTarget: state.execApprovalsTarget,
+                execApprovalsTargetNodeId: state.execApprovalsTargetNodeId,
+                onRefresh: () => loadNodes(state),
+                onDevicesRefresh: () => loadDevices(state),
+                onDeviceApprove: (requestId) => approveDevicePairing(state, requestId),
+                onDeviceReject: (requestId) => rejectDevicePairing(state, requestId),
+                onDeviceRotate: (deviceId, role, scopes) =>
+                  rotateDeviceToken(state, { deviceId, role, scopes }),
+                onDeviceRevoke: (deviceId, role) => revokeDeviceToken(state, { deviceId, role }),
+                onLoadConfig: () => loadConfig(state),
+                onLoadExecApprovals: () => {
+                  const target =
+                    state.execApprovalsTarget === "node" && state.execApprovalsTargetNodeId
+                      ? { kind: "node" as const, nodeId: state.execApprovalsTargetNodeId }
+                      : { kind: "gateway" as const };
+                  return loadExecApprovals(state, target);
                 },
-                onToggleFocusMode: () => {
-                  if (state.onboarding) {
-                    return;
-                  }
-                  state.applySettings({
-                    ...state.settings,
-                    chatFocusMode: !state.settings.chatFocusMode,
-                  });
-                },
-                onChatScroll: (event) => state.handleChatScroll(event),
-                getDraft: () => state.chatMessage,
-                onDraftChange: (next) => (state.chatMessage = next),
-                onRequestUpdate: requestHostUpdate,
-                attachments: state.chatAttachments,
-                onAttachmentsChange: (next) => (state.chatAttachments = next),
-                onSend: () => state.handleSendChat(),
-                canAbort: Boolean(state.chatRunId),
-                onAbort: () => void state.handleAbortChat(),
-                onQueueRemove: (id) => state.removeQueuedMessage(id),
-                onNewSession: () => state.handleSendChat("/new", { restoreDraft: true }),
-                onClearHistory: async () => {
-                  if (!state.client || !state.connected) {
-                    return;
-                  }
-                  try {
-                    await state.client.request("sessions.reset", { key: state.sessionKey });
-                    state.chatMessages = [];
-                    state.chatStream = null;
-                    state.chatRunId = null;
-                    await loadChatHistory(state);
-                  } catch (err) {
-                    state.lastError = String(err);
+                onBindDefault: (nodeId) => {
+                  if (nodeId) {
+                    updateConfigFormValue(state, ["tools", "exec", "node"], nodeId);
+                  } else {
+                    removeConfigFormValue(state, ["tools", "exec", "node"]);
                   }
                 },
-                agentsList: state.agentsList,
-                currentAgentId: resolvedAgentId ?? "main",
-                onAgentChange: (agentId: string) => {
-                  state.sessionKey = buildAgentMainSessionKey({ agentId });
+                onBindAgent: (agentIndex, nodeId) => {
+                  const basePath = ["agents", "list", agentIndex, "tools", "exec", "node"];
+                  if (nodeId) {
+                    updateConfigFormValue(state, basePath, nodeId);
+                  } else {
+                    removeConfigFormValue(state, basePath);
+                  }
+                },
+                onSaveBindings: () => saveConfig(state),
+                onExecApprovalsTargetChange: (kind, nodeId) => {
+                  state.execApprovalsTarget = kind;
+                  state.execApprovalsTargetNodeId = nodeId;
+                  state.execApprovalsSnapshot = null;
+                  state.execApprovalsForm = null;
+                  state.execApprovalsDirty = false;
+                  state.execApprovalsSelectedAgent = null;
+                },
+                onExecApprovalsSelectAgent: (agentId) => {
+                  state.execApprovalsSelectedAgent = agentId;
+                },
+                onExecApprovalsPatch: (path, value) =>
+                  updateExecApprovalsFormValue(state, path, value),
+                onExecApprovalsRemove: (path) => removeExecApprovalsFormValue(state, path),
+                onSaveExecApprovals: () => {
+                  const target =
+                    state.execApprovalsTarget === "node" && state.execApprovalsTargetNodeId
+                      ? { kind: "node" as const, nodeId: state.execApprovalsTargetNodeId }
+                      : { kind: "gateway" as const };
+                  return saveExecApprovals(state, target);
+                },
+              }),
+            )
+          : nothing}
+        ${state.tab === "chat"
+          ? renderChat({
+              sessionKey: state.sessionKey,
+              onSessionKeyChange: (next) => {
+                state.sessionKey = next;
+                state.chatMessage = "";
+                state.chatAttachments = [];
+                state.chatStream = null;
+                state.chatStreamStartedAt = null;
+                state.chatRunId = null;
+                state.chatQueue = [];
+                state.resetToolStream();
+                state.resetChatScroll();
+                state.applySettings({
+                  ...state.settings,
+                  sessionKey: next,
+                  lastActiveSessionKey: next,
+                });
+                void state.loadAssistantIdentity();
+                void loadChatHistory(state);
+                void refreshChatAvatar(state);
+              },
+              thinkingLevel: state.chatThinkingLevel,
+              showThinking,
+              showToolCalls,
+              loading: state.chatLoading,
+              sending: state.chatSending,
+              compactionStatus: state.compactionStatus,
+              fallbackStatus: state.fallbackStatus,
+              assistantAvatarUrl: chatAvatarUrl,
+              messages: state.chatMessages,
+              toolMessages: state.chatToolMessages,
+              streamSegments: state.chatStreamSegments,
+              stream: state.chatStream,
+              streamStartedAt: state.chatStreamStartedAt,
+              draft: state.chatMessage,
+              queue: state.chatQueue,
+              connected: state.connected,
+              canSend: state.connected,
+              disabledReason: chatDisabledReason,
+              error: state.lastError,
+              sessions: state.sessionsResult,
+              focusMode: chatFocus,
+              onRefresh: () => {
+                state.resetToolStream();
+                return Promise.all([loadChatHistory(state), refreshChatAvatar(state)]);
+              },
+              onToggleFocusMode: () => {
+                if (state.onboarding) {
+                  return;
+                }
+                state.applySettings({
+                  ...state.settings,
+                  chatFocusMode: !state.settings.chatFocusMode,
+                });
+              },
+              onChatScroll: (event) => state.handleChatScroll(event),
+              getDraft: () => state.chatMessage,
+              onDraftChange: (next) => (state.chatMessage = next),
+              onRequestUpdate: requestHostUpdate,
+              attachments: state.chatAttachments,
+              onAttachmentsChange: (next) => (state.chatAttachments = next),
+              onSend: () => state.handleSendChat(),
+              canAbort: Boolean(state.chatRunId),
+              onAbort: () => void state.handleAbortChat(),
+              onQueueRemove: (id) => state.removeQueuedMessage(id),
+              onNewSession: () => state.handleSendChat("/new", { restoreDraft: true }),
+              onClearHistory: async () => {
+                if (!state.client || !state.connected) {
+                  return;
+                }
+                try {
+                  await state.client.request("sessions.reset", { key: state.sessionKey });
                   state.chatMessages = [];
                   state.chatStream = null;
                   state.chatRunId = null;
-                  state.applySettings({
-                    ...state.settings,
-                    sessionKey: state.sessionKey,
-                    lastActiveSessionKey: state.sessionKey,
-                  });
-                  void loadChatHistory(state);
-                  void state.loadAssistantIdentity();
-                },
-                onNavigateToAgent: () => {
-                  state.agentsSelectedId = resolvedAgentId;
-                  state.setTab("agents" as import("./navigation.ts").Tab);
-                },
-                onSessionSelect: (key: string) => {
-                  switchChatSession(state, key);
-                },
-                showNewMessages: state.chatNewMessagesBelow && !state.chatManualRefreshInFlight,
-                onScrollToBottom: () => state.scrollToBottom(),
-                // Sidebar props for tool output viewing
-                sidebarOpen: state.sidebarOpen,
-                sidebarContent: state.sidebarContent,
-                sidebarError: state.sidebarError,
-                splitRatio: state.splitRatio,
-                onOpenSidebar: (content: string) => state.handleOpenSidebar(content),
-                onCloseSidebar: () => state.handleCloseSidebar(),
-                onSplitRatioChange: (ratio: number) => state.handleSplitRatioChange(ratio),
-                assistantName: state.assistantName,
-                assistantAvatar: state.assistantAvatar,
-                basePath: state.basePath ?? "",
-              })
-            : nothing
-        }
-        ${
-          state.tab === "config"
-            ? renderConfig({
-                raw: state.configRaw,
-                originalRaw: state.configRawOriginal,
-                valid: state.configValid,
-                issues: state.configIssues,
-                loading: state.configLoading,
-                saving: state.configSaving,
-                applying: state.configApplying,
-                updating: state.updateRunning,
-                connected: state.connected,
-                schema: state.configSchema,
-                schemaLoading: state.configSchemaLoading,
-                uiHints: state.configUiHints,
-                formMode: state.configFormMode,
-                showModeToggle: true,
-                formValue: state.configForm,
-                originalValue: state.configFormOriginal,
-                searchQuery: state.configSearchQuery,
-                activeSection:
-                  state.configActiveSection &&
-                  (COMMUNICATION_SECTION_KEYS.includes(
-                    state.configActiveSection as CommunicationSectionKey,
+                  await loadChatHistory(state);
+                } catch (err) {
+                  state.lastError = String(err);
+                }
+              },
+              agentsList: state.agentsList,
+              currentAgentId: resolvedAgentId ?? "main",
+              onAgentChange: (agentId: string) => {
+                state.sessionKey = buildAgentMainSessionKey({ agentId });
+                state.chatMessages = [];
+                state.chatStream = null;
+                state.chatRunId = null;
+                state.applySettings({
+                  ...state.settings,
+                  sessionKey: state.sessionKey,
+                  lastActiveSessionKey: state.sessionKey,
+                });
+                void loadChatHistory(state);
+                void state.loadAssistantIdentity();
+              },
+              onNavigateToAgent: () => {
+                state.agentsSelectedId = resolvedAgentId;
+                state.setTab("agents" as import("./navigation.ts").Tab);
+              },
+              onSessionSelect: (key: string) => {
+                switchChatSession(state, key);
+              },
+              showNewMessages: state.chatNewMessagesBelow && !state.chatManualRefreshInFlight,
+              onScrollToBottom: () => state.scrollToBottom(),
+              // Sidebar props for tool output viewing
+              sidebarOpen: state.sidebarOpen,
+              sidebarContent: state.sidebarContent,
+              sidebarError: state.sidebarError,
+              splitRatio: state.splitRatio,
+              onOpenSidebar: (content: string) => state.handleOpenSidebar(content),
+              onCloseSidebar: () => state.handleCloseSidebar(),
+              onSplitRatioChange: (ratio: number) => state.handleSplitRatioChange(ratio),
+              assistantName: state.assistantName,
+              assistantAvatar: state.assistantAvatar,
+              basePath: state.basePath ?? "",
+            })
+          : nothing}
+        ${state.tab === "config"
+          ? renderConfig({
+              raw: state.configRaw,
+              originalRaw: state.configRawOriginal,
+              valid: state.configValid,
+              issues: state.configIssues,
+              loading: state.configLoading,
+              saving: state.configSaving,
+              applying: state.configApplying,
+              updating: state.updateRunning,
+              connected: state.connected,
+              schema: state.configSchema,
+              schemaLoading: state.configSchemaLoading,
+              uiHints: state.configUiHints,
+              formMode: state.configFormMode,
+              showModeToggle: true,
+              formValue: state.configForm,
+              originalValue: state.configFormOriginal,
+              searchQuery: state.configSearchQuery,
+              activeSection:
+                state.configActiveSection &&
+                (COMMUNICATION_SECTION_KEYS.includes(
+                  state.configActiveSection as CommunicationSectionKey,
+                ) ||
+                  APPEARANCE_SECTION_KEYS.includes(
+                    state.configActiveSection as AppearanceSectionKey,
                   ) ||
-                    APPEARANCE_SECTION_KEYS.includes(
-                      state.configActiveSection as AppearanceSectionKey,
-                    ) ||
-                    AUTOMATION_SECTION_KEYS.includes(
-                      state.configActiveSection as AutomationSectionKey,
-                    ) ||
-                    INFRASTRUCTURE_SECTION_KEYS.includes(
-                      state.configActiveSection as InfrastructureSectionKey,
-                    ) ||
-                    AI_AGENTS_SECTION_KEYS.includes(
-                      state.configActiveSection as AiAgentsSectionKey,
-                    ))
-                    ? null
-                    : state.configActiveSection,
-                activeSubsection:
-                  state.configActiveSection &&
-                  (COMMUNICATION_SECTION_KEYS.includes(
-                    state.configActiveSection as CommunicationSectionKey,
+                  AUTOMATION_SECTION_KEYS.includes(
+                    state.configActiveSection as AutomationSectionKey,
                   ) ||
-                    APPEARANCE_SECTION_KEYS.includes(
-                      state.configActiveSection as AppearanceSectionKey,
-                    ) ||
-                    AUTOMATION_SECTION_KEYS.includes(
-                      state.configActiveSection as AutomationSectionKey,
-                    ) ||
-                    INFRASTRUCTURE_SECTION_KEYS.includes(
-                      state.configActiveSection as InfrastructureSectionKey,
-                    ) ||
-                    AI_AGENTS_SECTION_KEYS.includes(
-                      state.configActiveSection as AiAgentsSectionKey,
-                    ))
-                    ? null
-                    : state.configActiveSubsection,
-                onRawChange: (next) => {
-                  state.configRaw = next;
+                  INFRASTRUCTURE_SECTION_KEYS.includes(
+                    state.configActiveSection as InfrastructureSectionKey,
+                  ) ||
+                  AI_AGENTS_SECTION_KEYS.includes(state.configActiveSection as AiAgentsSectionKey))
+                  ? null
+                  : state.configActiveSection,
+              activeSubsection:
+                state.configActiveSection &&
+                (COMMUNICATION_SECTION_KEYS.includes(
+                  state.configActiveSection as CommunicationSectionKey,
+                ) ||
+                  APPEARANCE_SECTION_KEYS.includes(
+                    state.configActiveSection as AppearanceSectionKey,
+                  ) ||
+                  AUTOMATION_SECTION_KEYS.includes(
+                    state.configActiveSection as AutomationSectionKey,
+                  ) ||
+                  INFRASTRUCTURE_SECTION_KEYS.includes(
+                    state.configActiveSection as InfrastructureSectionKey,
+                  ) ||
+                  AI_AGENTS_SECTION_KEYS.includes(state.configActiveSection as AiAgentsSectionKey))
+                  ? null
+                  : state.configActiveSubsection,
+              onRawChange: (next) => {
+                state.configRaw = next;
+              },
+              onRequestUpdate: requestHostUpdate,
+              onFormModeChange: (mode) => (state.configFormMode = mode),
+              onFormPatch: (path, value) => updateConfigFormValue(state, path, value),
+              onSearchChange: (query) => (state.configSearchQuery = query),
+              onSectionChange: (section) => {
+                state.configActiveSection = section;
+                state.configActiveSubsection = null;
+              },
+              onSubsectionChange: (section) => (state.configActiveSubsection = section),
+              onReload: () => loadConfig(state),
+              onSave: () => saveConfig(state),
+              onApply: () => applyConfig(state),
+              onUpdate: () => runUpdate(state),
+              onOpenFile: () => openConfigFile(state),
+              version: state.hello?.server?.version ?? "",
+              theme: state.theme,
+              themeMode: state.themeMode,
+              setTheme: (t, ctx) => state.setTheme(t, ctx),
+              setThemeMode: (m, ctx) => state.setThemeMode(m, ctx),
+              borderRadius: state.settings.borderRadius,
+              setBorderRadius: (v) => state.setBorderRadius(v),
+              gatewayUrl: state.settings.gatewayUrl,
+              assistantName: state.assistantName,
+              configPath: state.configSnapshot?.path ?? null,
+              excludeSections: [
+                ...COMMUNICATION_SECTION_KEYS,
+                ...AUTOMATION_SECTION_KEYS,
+                ...INFRASTRUCTURE_SECTION_KEYS,
+                ...AI_AGENTS_SECTION_KEYS,
+                "ui",
+                "wizard",
+              ],
+              includeVirtualSections: false,
+            })
+          : nothing}
+        ${state.tab === "communications"
+          ? renderConfig({
+              raw: state.configRaw,
+              originalRaw: state.configRawOriginal,
+              valid: state.configValid,
+              issues: state.configIssues,
+              loading: state.configLoading,
+              saving: state.configSaving,
+              applying: state.configApplying,
+              updating: state.updateRunning,
+              connected: state.connected,
+              schema: state.configSchema,
+              schemaLoading: state.configSchemaLoading,
+              uiHints: state.configUiHints,
+              formMode: state.communicationsFormMode,
+              formValue: state.configForm,
+              originalValue: state.configFormOriginal,
+              searchQuery: state.communicationsSearchQuery,
+              activeSection:
+                state.communicationsActiveSection &&
+                !COMMUNICATION_SECTION_KEYS.includes(
+                  state.communicationsActiveSection as CommunicationSectionKey,
+                )
+                  ? null
+                  : state.communicationsActiveSection,
+              activeSubsection:
+                state.communicationsActiveSection &&
+                !COMMUNICATION_SECTION_KEYS.includes(
+                  state.communicationsActiveSection as CommunicationSectionKey,
+                )
+                  ? null
+                  : state.communicationsActiveSubsection,
+              onRawChange: (next) => {
+                state.configRaw = next;
+              },
+              onRequestUpdate: requestHostUpdate,
+              onFormModeChange: (mode) => (state.communicationsFormMode = mode),
+              onFormPatch: (path, value) => updateConfigFormValue(state, path, value),
+              onSearchChange: (query) => (state.communicationsSearchQuery = query),
+              onSectionChange: (section) => {
+                state.communicationsActiveSection = section;
+                state.communicationsActiveSubsection = null;
+              },
+              onSubsectionChange: (section) => (state.communicationsActiveSubsection = section),
+              onReload: () => loadConfig(state),
+              onSave: () => saveConfig(state),
+              onApply: () => applyConfig(state),
+              onUpdate: () => runUpdate(state),
+              onOpenFile: () => openConfigFile(state),
+              version: state.hello?.server?.version ?? "",
+              theme: state.theme,
+              themeMode: state.themeMode,
+              setTheme: (t, ctx) => state.setTheme(t, ctx),
+              setThemeMode: (m, ctx) => state.setThemeMode(m, ctx),
+              borderRadius: state.settings.borderRadius,
+              setBorderRadius: (v) => state.setBorderRadius(v),
+              gatewayUrl: state.settings.gatewayUrl,
+              assistantName: state.assistantName,
+              configPath: state.configSnapshot?.path ?? null,
+              navRootLabel: "Communication",
+              includeSections: [...COMMUNICATION_SECTION_KEYS],
+              includeVirtualSections: false,
+            })
+          : nothing}
+        ${state.tab === "appearance"
+          ? renderConfig({
+              raw: state.configRaw,
+              originalRaw: state.configRawOriginal,
+              valid: state.configValid,
+              issues: state.configIssues,
+              loading: state.configLoading,
+              saving: state.configSaving,
+              applying: state.configApplying,
+              updating: state.updateRunning,
+              connected: state.connected,
+              schema: state.configSchema,
+              schemaLoading: state.configSchemaLoading,
+              uiHints: state.configUiHints,
+              formMode: state.appearanceFormMode,
+              formValue: state.configForm,
+              originalValue: state.configFormOriginal,
+              searchQuery: state.appearanceSearchQuery,
+              activeSection:
+                state.appearanceActiveSection &&
+                !APPEARANCE_SECTION_KEYS.includes(
+                  state.appearanceActiveSection as AppearanceSectionKey,
+                )
+                  ? null
+                  : state.appearanceActiveSection,
+              activeSubsection:
+                state.appearanceActiveSection &&
+                !APPEARANCE_SECTION_KEYS.includes(
+                  state.appearanceActiveSection as AppearanceSectionKey,
+                )
+                  ? null
+                  : state.appearanceActiveSubsection,
+              onRawChange: (next) => {
+                state.configRaw = next;
+              },
+              onRequestUpdate: requestHostUpdate,
+              onFormModeChange: (mode) => (state.appearanceFormMode = mode),
+              onFormPatch: (path, value) => updateConfigFormValue(state, path, value),
+              onSearchChange: (query) => (state.appearanceSearchQuery = query),
+              onSectionChange: (section) => {
+                state.appearanceActiveSection = section;
+                state.appearanceActiveSubsection = null;
+              },
+              onSubsectionChange: (section) => (state.appearanceActiveSubsection = section),
+              onReload: () => loadConfig(state),
+              onSave: () => saveConfig(state),
+              onApply: () => applyConfig(state),
+              onUpdate: () => runUpdate(state),
+              onOpenFile: () => openConfigFile(state),
+              version: state.hello?.server?.version ?? "",
+              theme: state.theme,
+              themeMode: state.themeMode,
+              setTheme: (t, ctx) => state.setTheme(t, ctx),
+              setThemeMode: (m, ctx) => state.setThemeMode(m, ctx),
+              borderRadius: state.settings.borderRadius,
+              setBorderRadius: (v) => state.setBorderRadius(v),
+              gatewayUrl: state.settings.gatewayUrl,
+              assistantName: state.assistantName,
+              configPath: state.configSnapshot?.path ?? null,
+              navRootLabel: "Appearance",
+              includeSections: [...APPEARANCE_SECTION_KEYS],
+              includeVirtualSections: true,
+            })
+          : nothing}
+        ${state.tab === "automation"
+          ? renderConfig({
+              raw: state.configRaw,
+              originalRaw: state.configRawOriginal,
+              valid: state.configValid,
+              issues: state.configIssues,
+              loading: state.configLoading,
+              saving: state.configSaving,
+              applying: state.configApplying,
+              updating: state.updateRunning,
+              connected: state.connected,
+              schema: state.configSchema,
+              schemaLoading: state.configSchemaLoading,
+              uiHints: state.configUiHints,
+              formMode: state.automationFormMode,
+              formValue: state.configForm,
+              originalValue: state.configFormOriginal,
+              searchQuery: state.automationSearchQuery,
+              activeSection:
+                state.automationActiveSection &&
+                !AUTOMATION_SECTION_KEYS.includes(
+                  state.automationActiveSection as AutomationSectionKey,
+                )
+                  ? null
+                  : state.automationActiveSection,
+              activeSubsection:
+                state.automationActiveSection &&
+                !AUTOMATION_SECTION_KEYS.includes(
+                  state.automationActiveSection as AutomationSectionKey,
+                )
+                  ? null
+                  : state.automationActiveSubsection,
+              onRawChange: (next) => {
+                state.configRaw = next;
+              },
+              onRequestUpdate: requestHostUpdate,
+              onFormModeChange: (mode) => (state.automationFormMode = mode),
+              onFormPatch: (path, value) => updateConfigFormValue(state, path, value),
+              onSearchChange: (query) => (state.automationSearchQuery = query),
+              onSectionChange: (section) => {
+                state.automationActiveSection = section;
+                state.automationActiveSubsection = null;
+              },
+              onSubsectionChange: (section) => (state.automationActiveSubsection = section),
+              onReload: () => loadConfig(state),
+              onSave: () => saveConfig(state),
+              onApply: () => applyConfig(state),
+              onUpdate: () => runUpdate(state),
+              onOpenFile: () => openConfigFile(state),
+              version: state.hello?.server?.version ?? "",
+              theme: state.theme,
+              themeMode: state.themeMode,
+              setTheme: (t, ctx) => state.setTheme(t, ctx),
+              setThemeMode: (m, ctx) => state.setThemeMode(m, ctx),
+              borderRadius: state.settings.borderRadius,
+              setBorderRadius: (v) => state.setBorderRadius(v),
+              gatewayUrl: state.settings.gatewayUrl,
+              assistantName: state.assistantName,
+              configPath: state.configSnapshot?.path ?? null,
+              navRootLabel: "Automation",
+              includeSections: [...AUTOMATION_SECTION_KEYS],
+              includeVirtualSections: false,
+            })
+          : nothing}
+        ${state.tab === "infrastructure"
+          ? renderConfig({
+              raw: state.configRaw,
+              originalRaw: state.configRawOriginal,
+              valid: state.configValid,
+              issues: state.configIssues,
+              loading: state.configLoading,
+              saving: state.configSaving,
+              applying: state.configApplying,
+              updating: state.updateRunning,
+              connected: state.connected,
+              schema: state.configSchema,
+              schemaLoading: state.configSchemaLoading,
+              uiHints: state.configUiHints,
+              formMode: state.infrastructureFormMode,
+              formValue: state.configForm,
+              originalValue: state.configFormOriginal,
+              searchQuery: state.infrastructureSearchQuery,
+              activeSection:
+                state.infrastructureActiveSection &&
+                !INFRASTRUCTURE_SECTION_KEYS.includes(
+                  state.infrastructureActiveSection as InfrastructureSectionKey,
+                )
+                  ? null
+                  : state.infrastructureActiveSection,
+              activeSubsection:
+                state.infrastructureActiveSection &&
+                !INFRASTRUCTURE_SECTION_KEYS.includes(
+                  state.infrastructureActiveSection as InfrastructureSectionKey,
+                )
+                  ? null
+                  : state.infrastructureActiveSubsection,
+              onRawChange: (next) => {
+                state.configRaw = next;
+              },
+              onRequestUpdate: requestHostUpdate,
+              onFormModeChange: (mode) => (state.infrastructureFormMode = mode),
+              onFormPatch: (path, value) => updateConfigFormValue(state, path, value),
+              onSearchChange: (query) => (state.infrastructureSearchQuery = query),
+              onSectionChange: (section) => {
+                state.infrastructureActiveSection = section;
+                state.infrastructureActiveSubsection = null;
+              },
+              onSubsectionChange: (section) => (state.infrastructureActiveSubsection = section),
+              onReload: () => loadConfig(state),
+              onSave: () => saveConfig(state),
+              onApply: () => applyConfig(state),
+              onUpdate: () => runUpdate(state),
+              onOpenFile: () => openConfigFile(state),
+              version: state.hello?.server?.version ?? "",
+              theme: state.theme,
+              themeMode: state.themeMode,
+              setTheme: (t, ctx) => state.setTheme(t, ctx),
+              setThemeMode: (m, ctx) => state.setThemeMode(m, ctx),
+              borderRadius: state.settings.borderRadius,
+              setBorderRadius: (v) => state.setBorderRadius(v),
+              gatewayUrl: state.settings.gatewayUrl,
+              assistantName: state.assistantName,
+              configPath: state.configSnapshot?.path ?? null,
+              navRootLabel: "Infrastructure",
+              includeSections: [...INFRASTRUCTURE_SECTION_KEYS],
+              includeVirtualSections: false,
+            })
+          : nothing}
+        ${state.tab === "aiAgents"
+          ? renderConfig({
+              raw: state.configRaw,
+              originalRaw: state.configRawOriginal,
+              valid: state.configValid,
+              issues: state.configIssues,
+              loading: state.configLoading,
+              saving: state.configSaving,
+              applying: state.configApplying,
+              updating: state.updateRunning,
+              connected: state.connected,
+              schema: state.configSchema,
+              schemaLoading: state.configSchemaLoading,
+              uiHints: state.configUiHints,
+              formMode: state.aiAgentsFormMode,
+              formValue: state.configForm,
+              originalValue: state.configFormOriginal,
+              searchQuery: state.aiAgentsSearchQuery,
+              activeSection:
+                state.aiAgentsActiveSection &&
+                !AI_AGENTS_SECTION_KEYS.includes(state.aiAgentsActiveSection as AiAgentsSectionKey)
+                  ? null
+                  : state.aiAgentsActiveSection,
+              activeSubsection:
+                state.aiAgentsActiveSection &&
+                !AI_AGENTS_SECTION_KEYS.includes(state.aiAgentsActiveSection as AiAgentsSectionKey)
+                  ? null
+                  : state.aiAgentsActiveSubsection,
+              onRawChange: (next) => {
+                state.configRaw = next;
+              },
+              onRequestUpdate: requestHostUpdate,
+              onFormModeChange: (mode) => (state.aiAgentsFormMode = mode),
+              onFormPatch: (path, value) => updateConfigFormValue(state, path, value),
+              onSearchChange: (query) => (state.aiAgentsSearchQuery = query),
+              onSectionChange: (section) => {
+                state.aiAgentsActiveSection = section;
+                state.aiAgentsActiveSubsection = null;
+              },
+              onSubsectionChange: (section) => (state.aiAgentsActiveSubsection = section),
+              onReload: () => loadConfig(state),
+              onSave: () => saveConfig(state),
+              onApply: () => applyConfig(state),
+              onUpdate: () => runUpdate(state),
+              onOpenFile: () => openConfigFile(state),
+              version: state.hello?.server?.version ?? "",
+              theme: state.theme,
+              themeMode: state.themeMode,
+              setTheme: (t, ctx) => state.setTheme(t, ctx),
+              setThemeMode: (m, ctx) => state.setThemeMode(m, ctx),
+              borderRadius: state.settings.borderRadius,
+              setBorderRadius: (v) => state.setBorderRadius(v),
+              gatewayUrl: state.settings.gatewayUrl,
+              assistantName: state.assistantName,
+              configPath: state.configSnapshot?.path ?? null,
+              navRootLabel: "AI & Agents",
+              includeSections: [...AI_AGENTS_SECTION_KEYS],
+              includeVirtualSections: false,
+            })
+          : nothing}
+        ${state.tab === "debug"
+          ? lazyRender(lazyDebug, (m) =>
+              m.renderDebug({
+                loading: state.debugLoading,
+                status: state.debugStatus,
+                health: state.debugHealth,
+                models: state.debugModels,
+                heartbeat: state.debugHeartbeat,
+                eventLog: state.eventLog,
+                methods: (state.hello?.features?.methods ?? []).toSorted(),
+                callMethod: state.debugCallMethod,
+                callParams: state.debugCallParams,
+                callResult: state.debugCallResult,
+                callError: state.debugCallError,
+                onCallMethodChange: (next) => (state.debugCallMethod = next),
+                onCallParamsChange: (next) => (state.debugCallParams = next),
+                onRefresh: () => loadDebug(state),
+                onCall: () => callDebugMethod(state),
+              }),
+            )
+          : nothing}
+        ${state.tab === "logs"
+          ? lazyRender(lazyLogs, (m) =>
+              m.renderLogs({
+                loading: state.logsLoading,
+                error: state.logsError,
+                file: state.logsFile,
+                entries: state.logsEntries,
+                filterText: state.logsFilterText,
+                levelFilters: state.logsLevelFilters,
+                autoFollow: state.logsAutoFollow,
+                truncated: state.logsTruncated,
+                onFilterTextChange: (next) => (state.logsFilterText = next),
+                onLevelToggle: (level, enabled) => {
+                  state.logsLevelFilters = { ...state.logsLevelFilters, [level]: enabled };
                 },
-                onRequestUpdate: requestHostUpdate,
-                onFormModeChange: (mode) => (state.configFormMode = mode),
-                onFormPatch: (path, value) => updateConfigFormValue(state, path, value),
-                onSearchChange: (query) => (state.configSearchQuery = query),
-                onSectionChange: (section) => {
-                  state.configActiveSection = section;
-                  state.configActiveSubsection = null;
-                },
-                onSubsectionChange: (section) => (state.configActiveSubsection = section),
-                onReload: () => loadConfig(state),
-                onSave: () => saveConfig(state),
-                onApply: () => applyConfig(state),
-                onUpdate: () => runUpdate(state),
-                onOpenFile: () => openConfigFile(state),
-                version: state.hello?.server?.version ?? "",
-                theme: state.theme,
-                themeMode: state.themeMode,
-                setTheme: (t, ctx) => state.setTheme(t, ctx),
-                setThemeMode: (m, ctx) => state.setThemeMode(m, ctx),
-                borderRadius: state.settings.borderRadius,
-                setBorderRadius: (v) => state.setBorderRadius(v),
-                gatewayUrl: state.settings.gatewayUrl,
-                assistantName: state.assistantName,
-                configPath: state.configSnapshot?.path ?? null,
-                excludeSections: [
-                  ...COMMUNICATION_SECTION_KEYS,
-                  ...AUTOMATION_SECTION_KEYS,
-                  ...INFRASTRUCTURE_SECTION_KEYS,
-                  ...AI_AGENTS_SECTION_KEYS,
-                  "ui",
-                  "wizard",
-                ],
-                includeVirtualSections: false,
-              })
-            : nothing
-        }
-        ${
-          state.tab === "communications"
-            ? renderConfig({
-                raw: state.configRaw,
-                originalRaw: state.configRawOriginal,
-                valid: state.configValid,
-                issues: state.configIssues,
-                loading: state.configLoading,
-                saving: state.configSaving,
-                applying: state.configApplying,
-                updating: state.updateRunning,
-                connected: state.connected,
-                schema: state.configSchema,
-                schemaLoading: state.configSchemaLoading,
-                uiHints: state.configUiHints,
-                formMode: state.communicationsFormMode,
-                formValue: state.configForm,
-                originalValue: state.configFormOriginal,
-                searchQuery: state.communicationsSearchQuery,
-                activeSection:
-                  state.communicationsActiveSection &&
-                  !COMMUNICATION_SECTION_KEYS.includes(
-                    state.communicationsActiveSection as CommunicationSectionKey,
-                  )
-                    ? null
-                    : state.communicationsActiveSection,
-                activeSubsection:
-                  state.communicationsActiveSection &&
-                  !COMMUNICATION_SECTION_KEYS.includes(
-                    state.communicationsActiveSection as CommunicationSectionKey,
-                  )
-                    ? null
-                    : state.communicationsActiveSubsection,
-                onRawChange: (next) => {
-                  state.configRaw = next;
-                },
-                onRequestUpdate: requestHostUpdate,
-                onFormModeChange: (mode) => (state.communicationsFormMode = mode),
-                onFormPatch: (path, value) => updateConfigFormValue(state, path, value),
-                onSearchChange: (query) => (state.communicationsSearchQuery = query),
-                onSectionChange: (section) => {
-                  state.communicationsActiveSection = section;
-                  state.communicationsActiveSubsection = null;
-                },
-                onSubsectionChange: (section) => (state.communicationsActiveSubsection = section),
-                onReload: () => loadConfig(state),
-                onSave: () => saveConfig(state),
-                onApply: () => applyConfig(state),
-                onUpdate: () => runUpdate(state),
-                onOpenFile: () => openConfigFile(state),
-                version: state.hello?.server?.version ?? "",
-                theme: state.theme,
-                themeMode: state.themeMode,
-                setTheme: (t, ctx) => state.setTheme(t, ctx),
-                setThemeMode: (m, ctx) => state.setThemeMode(m, ctx),
-                borderRadius: state.settings.borderRadius,
-                setBorderRadius: (v) => state.setBorderRadius(v),
-                gatewayUrl: state.settings.gatewayUrl,
-                assistantName: state.assistantName,
-                configPath: state.configSnapshot?.path ?? null,
-                navRootLabel: "Communication",
-                includeSections: [...COMMUNICATION_SECTION_KEYS],
-                includeVirtualSections: false,
-              })
-            : nothing
-        }
-        ${
-          state.tab === "appearance"
-            ? renderConfig({
-                raw: state.configRaw,
-                originalRaw: state.configRawOriginal,
-                valid: state.configValid,
-                issues: state.configIssues,
-                loading: state.configLoading,
-                saving: state.configSaving,
-                applying: state.configApplying,
-                updating: state.updateRunning,
-                connected: state.connected,
-                schema: state.configSchema,
-                schemaLoading: state.configSchemaLoading,
-                uiHints: state.configUiHints,
-                formMode: state.appearanceFormMode,
-                formValue: state.configForm,
-                originalValue: state.configFormOriginal,
-                searchQuery: state.appearanceSearchQuery,
-                activeSection:
-                  state.appearanceActiveSection &&
-                  !APPEARANCE_SECTION_KEYS.includes(
-                    state.appearanceActiveSection as AppearanceSectionKey,
-                  )
-                    ? null
-                    : state.appearanceActiveSection,
-                activeSubsection:
-                  state.appearanceActiveSection &&
-                  !APPEARANCE_SECTION_KEYS.includes(
-                    state.appearanceActiveSection as AppearanceSectionKey,
-                  )
-                    ? null
-                    : state.appearanceActiveSubsection,
-                onRawChange: (next) => {
-                  state.configRaw = next;
-                },
-                onRequestUpdate: requestHostUpdate,
-                onFormModeChange: (mode) => (state.appearanceFormMode = mode),
-                onFormPatch: (path, value) => updateConfigFormValue(state, path, value),
-                onSearchChange: (query) => (state.appearanceSearchQuery = query),
-                onSectionChange: (section) => {
-                  state.appearanceActiveSection = section;
-                  state.appearanceActiveSubsection = null;
-                },
-                onSubsectionChange: (section) => (state.appearanceActiveSubsection = section),
-                onReload: () => loadConfig(state),
-                onSave: () => saveConfig(state),
-                onApply: () => applyConfig(state),
-                onUpdate: () => runUpdate(state),
-                onOpenFile: () => openConfigFile(state),
-                version: state.hello?.server?.version ?? "",
-                theme: state.theme,
-                themeMode: state.themeMode,
-                setTheme: (t, ctx) => state.setTheme(t, ctx),
-                setThemeMode: (m, ctx) => state.setThemeMode(m, ctx),
-                borderRadius: state.settings.borderRadius,
-                setBorderRadius: (v) => state.setBorderRadius(v),
-                gatewayUrl: state.settings.gatewayUrl,
-                assistantName: state.assistantName,
-                configPath: state.configSnapshot?.path ?? null,
-                navRootLabel: "Appearance",
-                includeSections: [...APPEARANCE_SECTION_KEYS],
-                includeVirtualSections: true,
-              })
-            : nothing
-        }
-        ${
-          state.tab === "automation"
-            ? renderConfig({
-                raw: state.configRaw,
-                originalRaw: state.configRawOriginal,
-                valid: state.configValid,
-                issues: state.configIssues,
-                loading: state.configLoading,
-                saving: state.configSaving,
-                applying: state.configApplying,
-                updating: state.updateRunning,
-                connected: state.connected,
-                schema: state.configSchema,
-                schemaLoading: state.configSchemaLoading,
-                uiHints: state.configUiHints,
-                formMode: state.automationFormMode,
-                formValue: state.configForm,
-                originalValue: state.configFormOriginal,
-                searchQuery: state.automationSearchQuery,
-                activeSection:
-                  state.automationActiveSection &&
-                  !AUTOMATION_SECTION_KEYS.includes(
-                    state.automationActiveSection as AutomationSectionKey,
-                  )
-                    ? null
-                    : state.automationActiveSection,
-                activeSubsection:
-                  state.automationActiveSection &&
-                  !AUTOMATION_SECTION_KEYS.includes(
-                    state.automationActiveSection as AutomationSectionKey,
-                  )
-                    ? null
-                    : state.automationActiveSubsection,
-                onRawChange: (next) => {
-                  state.configRaw = next;
-                },
-                onRequestUpdate: requestHostUpdate,
-                onFormModeChange: (mode) => (state.automationFormMode = mode),
-                onFormPatch: (path, value) => updateConfigFormValue(state, path, value),
-                onSearchChange: (query) => (state.automationSearchQuery = query),
-                onSectionChange: (section) => {
-                  state.automationActiveSection = section;
-                  state.automationActiveSubsection = null;
-                },
-                onSubsectionChange: (section) => (state.automationActiveSubsection = section),
-                onReload: () => loadConfig(state),
-                onSave: () => saveConfig(state),
-                onApply: () => applyConfig(state),
-                onUpdate: () => runUpdate(state),
-                onOpenFile: () => openConfigFile(state),
-                version: state.hello?.server?.version ?? "",
-                theme: state.theme,
-                themeMode: state.themeMode,
-                setTheme: (t, ctx) => state.setTheme(t, ctx),
-                setThemeMode: (m, ctx) => state.setThemeMode(m, ctx),
-                borderRadius: state.settings.borderRadius,
-                setBorderRadius: (v) => state.setBorderRadius(v),
-                gatewayUrl: state.settings.gatewayUrl,
-                assistantName: state.assistantName,
-                configPath: state.configSnapshot?.path ?? null,
-                navRootLabel: "Automation",
-                includeSections: [...AUTOMATION_SECTION_KEYS],
-                includeVirtualSections: false,
-              })
-            : nothing
-        }
-        ${
-          state.tab === "infrastructure"
-            ? renderConfig({
-                raw: state.configRaw,
-                originalRaw: state.configRawOriginal,
-                valid: state.configValid,
-                issues: state.configIssues,
-                loading: state.configLoading,
-                saving: state.configSaving,
-                applying: state.configApplying,
-                updating: state.updateRunning,
-                connected: state.connected,
-                schema: state.configSchema,
-                schemaLoading: state.configSchemaLoading,
-                uiHints: state.configUiHints,
-                formMode: state.infrastructureFormMode,
-                formValue: state.configForm,
-                originalValue: state.configFormOriginal,
-                searchQuery: state.infrastructureSearchQuery,
-                activeSection:
-                  state.infrastructureActiveSection &&
-                  !INFRASTRUCTURE_SECTION_KEYS.includes(
-                    state.infrastructureActiveSection as InfrastructureSectionKey,
-                  )
-                    ? null
-                    : state.infrastructureActiveSection,
-                activeSubsection:
-                  state.infrastructureActiveSection &&
-                  !INFRASTRUCTURE_SECTION_KEYS.includes(
-                    state.infrastructureActiveSection as InfrastructureSectionKey,
-                  )
-                    ? null
-                    : state.infrastructureActiveSubsection,
-                onRawChange: (next) => {
-                  state.configRaw = next;
-                },
-                onRequestUpdate: requestHostUpdate,
-                onFormModeChange: (mode) => (state.infrastructureFormMode = mode),
-                onFormPatch: (path, value) => updateConfigFormValue(state, path, value),
-                onSearchChange: (query) => (state.infrastructureSearchQuery = query),
-                onSectionChange: (section) => {
-                  state.infrastructureActiveSection = section;
-                  state.infrastructureActiveSubsection = null;
-                },
-                onSubsectionChange: (section) => (state.infrastructureActiveSubsection = section),
-                onReload: () => loadConfig(state),
-                onSave: () => saveConfig(state),
-                onApply: () => applyConfig(state),
-                onUpdate: () => runUpdate(state),
-                onOpenFile: () => openConfigFile(state),
-                version: state.hello?.server?.version ?? "",
-                theme: state.theme,
-                themeMode: state.themeMode,
-                setTheme: (t, ctx) => state.setTheme(t, ctx),
-                setThemeMode: (m, ctx) => state.setThemeMode(m, ctx),
-                borderRadius: state.settings.borderRadius,
-                setBorderRadius: (v) => state.setBorderRadius(v),
-                gatewayUrl: state.settings.gatewayUrl,
-                assistantName: state.assistantName,
-                configPath: state.configSnapshot?.path ?? null,
-                navRootLabel: "Infrastructure",
-                includeSections: [...INFRASTRUCTURE_SECTION_KEYS],
-                includeVirtualSections: false,
-              })
-            : nothing
-        }
-        ${
-          state.tab === "aiAgents"
-            ? renderConfig({
-                raw: state.configRaw,
-                originalRaw: state.configRawOriginal,
-                valid: state.configValid,
-                issues: state.configIssues,
-                loading: state.configLoading,
-                saving: state.configSaving,
-                applying: state.configApplying,
-                updating: state.updateRunning,
-                connected: state.connected,
-                schema: state.configSchema,
-                schemaLoading: state.configSchemaLoading,
-                uiHints: state.configUiHints,
-                formMode: state.aiAgentsFormMode,
-                formValue: state.configForm,
-                originalValue: state.configFormOriginal,
-                searchQuery: state.aiAgentsSearchQuery,
-                activeSection:
-                  state.aiAgentsActiveSection &&
-                  !AI_AGENTS_SECTION_KEYS.includes(
-                    state.aiAgentsActiveSection as AiAgentsSectionKey,
-                  )
-                    ? null
-                    : state.aiAgentsActiveSection,
-                activeSubsection:
-                  state.aiAgentsActiveSection &&
-                  !AI_AGENTS_SECTION_KEYS.includes(
-                    state.aiAgentsActiveSection as AiAgentsSectionKey,
-                  )
-                    ? null
-                    : state.aiAgentsActiveSubsection,
-                onRawChange: (next) => {
-                  state.configRaw = next;
-                },
-                onRequestUpdate: requestHostUpdate,
-                onFormModeChange: (mode) => (state.aiAgentsFormMode = mode),
-                onFormPatch: (path, value) => updateConfigFormValue(state, path, value),
-                onSearchChange: (query) => (state.aiAgentsSearchQuery = query),
-                onSectionChange: (section) => {
-                  state.aiAgentsActiveSection = section;
-                  state.aiAgentsActiveSubsection = null;
-                },
-                onSubsectionChange: (section) => (state.aiAgentsActiveSubsection = section),
-                onReload: () => loadConfig(state),
-                onSave: () => saveConfig(state),
-                onApply: () => applyConfig(state),
-                onUpdate: () => runUpdate(state),
-                onOpenFile: () => openConfigFile(state),
-                version: state.hello?.server?.version ?? "",
-                theme: state.theme,
-                themeMode: state.themeMode,
-                setTheme: (t, ctx) => state.setTheme(t, ctx),
-                setThemeMode: (m, ctx) => state.setThemeMode(m, ctx),
-                borderRadius: state.settings.borderRadius,
-                setBorderRadius: (v) => state.setBorderRadius(v),
-                gatewayUrl: state.settings.gatewayUrl,
-                assistantName: state.assistantName,
-                configPath: state.configSnapshot?.path ?? null,
-                navRootLabel: "AI & Agents",
-                includeSections: [...AI_AGENTS_SECTION_KEYS],
-                includeVirtualSections: false,
-              })
-            : nothing
-        }
-        ${
-          state.tab === "debug"
-            ? lazyRender(lazyDebug, (m) =>
-                m.renderDebug({
-                  loading: state.debugLoading,
-                  status: state.debugStatus,
-                  health: state.debugHealth,
-                  models: state.debugModels,
-                  heartbeat: state.debugHeartbeat,
-                  eventLog: state.eventLog,
-                  methods: (state.hello?.features?.methods ?? []).toSorted(),
-                  callMethod: state.debugCallMethod,
-                  callParams: state.debugCallParams,
-                  callResult: state.debugCallResult,
-                  callError: state.debugCallError,
-                  onCallMethodChange: (next) => (state.debugCallMethod = next),
-                  onCallParamsChange: (next) => (state.debugCallParams = next),
-                  onRefresh: () => loadDebug(state),
-                  onCall: () => callDebugMethod(state),
-                }),
-              )
-            : nothing
-        }
-        ${
-          state.tab === "logs"
-            ? lazyRender(lazyLogs, (m) =>
-                m.renderLogs({
-                  loading: state.logsLoading,
-                  error: state.logsError,
-                  file: state.logsFile,
-                  entries: state.logsEntries,
-                  filterText: state.logsFilterText,
-                  levelFilters: state.logsLevelFilters,
-                  autoFollow: state.logsAutoFollow,
-                  truncated: state.logsTruncated,
-                  onFilterTextChange: (next) => (state.logsFilterText = next),
-                  onLevelToggle: (level, enabled) => {
-                    state.logsLevelFilters = { ...state.logsLevelFilters, [level]: enabled };
-                  },
-                  onToggleAutoFollow: (next) => (state.logsAutoFollow = next),
-                  onRefresh: () => loadLogs(state, { reset: true }),
-                  onExport: (lines, label) => state.exportLogs(lines, label),
-                  onScroll: (event) => state.handleLogsScroll(event),
-                }),
-              )
-            : nothing
-        }
+                onToggleAutoFollow: (next) => (state.logsAutoFollow = next),
+                onRefresh: () => loadLogs(state, { reset: true }),
+                onExport: (lines, label) => state.exportLogs(lines, label),
+                onScroll: (event) => state.handleLogsScroll(event),
+              }),
+            )
+          : nothing}
       </main>
       ${renderExecApprovalPrompt(state)} ${renderGatewayUrlConfirmation(state)} ${nothing}
     </div>
diff --git a/ui/src/ui/chat/grouped-render.ts b/ui/src/ui/chat/grouped-render.ts
index d9a9edfb7e3..3dc1187ff86 100644
--- a/ui/src/ui/chat/grouped-render.ts
+++ b/ui/src/ui/chat/grouped-render.ts
@@ -177,11 +177,9 @@ export function renderMessageGroup(
           <span class="chat-group-timestamp">${timestamp}</span>
           ${renderMessageMeta(meta)}
           ${normalizedRole === "assistant" && isTtsSupported() ? renderTtsButton(group) : nothing}
-          ${
-            opts.onDelete
-              ? renderDeleteButton(opts.onDelete, normalizedRole === "user" ? "left" : "right")
-              : nothing
-          }
+          ${opts.onDelete
+            ? renderDeleteButton(opts.onDelete, normalizedRole === "user" ? "left" : "right")
+            : nothing}
         </div>
       </div>
     </div>
@@ -697,84 +695,70 @@ function renderGroupedMessage(
 
   return html`
     <div class="${bubbleClasses}">
-      ${
-        hasActions
-          ? html`<div class="chat-bubble-actions">
+      ${hasActions
+        ? html`<div class="chat-bubble-actions">
             ${canExpand ? renderExpandButton(markdown!, onOpenSidebar!) : nothing}
             ${canCopyMarkdown ? renderCopyAsMarkdownButton(markdown!) : nothing}
           </div>`
-          : nothing
-      }
-      ${
-        isToolMessage
-          ? html`
+        : nothing}
+      ${isToolMessage
+        ? html`
             <details class="chat-tool-msg-collapse">
               <summary class="chat-tool-msg-summary">
                 <span class="chat-tool-msg-summary__icon">${icons.zap}</span>
                 <span class="chat-tool-msg-summary__label">Tool output</span>
-                ${
-                  toolSummaryLabel
-                    ? html`<span class="chat-tool-msg-summary__names">${toolSummaryLabel}</span>`
-                    : toolPreview
-                      ? html`<span class="chat-tool-msg-summary__preview">${toolPreview}</span>`
-                      : nothing
-                }
+                ${toolSummaryLabel
+                  ? html`<span class="chat-tool-msg-summary__names">${toolSummaryLabel}</span>`
+                  : toolPreview
+                    ? html`<span class="chat-tool-msg-summary__preview">${toolPreview}</span>`
+                    : nothing}
               </summary>
               <div class="chat-tool-msg-body">
                 ${renderMessageImages(images)}
-                ${
-                  reasoningMarkdown
-                    ? html`<div class="chat-thinking">
+                ${reasoningMarkdown
+                  ? html`<div class="chat-thinking">
                       ${unsafeHTML(toSanitizedMarkdownHtml(reasoningMarkdown))}
                     </div>`
-                    : nothing
-                }
-                ${
-                  jsonResult
-                    ? html`<details class="chat-json-collapse">
+                  : nothing}
+                ${jsonResult
+                  ? html`<details class="chat-json-collapse">
                       <summary class="chat-json-summary">
                         <span class="chat-json-badge">JSON</span>
                         <span class="chat-json-label">${jsonSummaryLabel(jsonResult.parsed)}</span>
                       </summary>
                       <pre class="chat-json-content"><code>${jsonResult.pretty}</code></pre>
                     </details>`
-                    : markdown
-                      ? html`<div class="chat-text" dir="${detectTextDirection(markdown)}">
+                  : markdown
+                    ? html`<div class="chat-text" dir="${detectTextDirection(markdown)}">
                         ${unsafeHTML(toSanitizedMarkdownHtml(markdown))}
                       </div>`
-                      : nothing
-                }
+                    : nothing}
                 ${hasToolCards ? renderCollapsedToolCards(toolCards, onOpenSidebar) : nothing}
               </div>
             </details>
           `
-          : html`
+        : html`
             ${renderMessageImages(images)}
-            ${
-              reasoningMarkdown
-                ? html`<div class="chat-thinking">
+            ${reasoningMarkdown
+              ? html`<div class="chat-thinking">
                   ${unsafeHTML(toSanitizedMarkdownHtml(reasoningMarkdown))}
                 </div>`
-                : nothing
-            }
-            ${
-              jsonResult
-                ? html`<details class="chat-json-collapse">
+              : nothing}
+            ${jsonResult
+              ? html`<details class="chat-json-collapse">
                   <summary class="chat-json-summary">
                     <span class="chat-json-badge">JSON</span>
                     <span class="chat-json-label">${jsonSummaryLabel(jsonResult.parsed)}</span>
                   </summary>
                   <pre class="chat-json-content"><code>${jsonResult.pretty}</code></pre>
                 </details>`
-                : markdown
-                  ? html`<div class="chat-text" dir="${detectTextDirection(markdown)}">
+              : markdown
+                ? html`<div class="chat-text" dir="${detectTextDirection(markdown)}">
                     ${unsafeHTML(toSanitizedMarkdownHtml(markdown))}
                   </div>`
-                  : nothing
-            }
+                : nothing}
             ${hasToolCards ? renderCollapsedToolCards(toolCards, onOpenSidebar) : nothing}
-          `
-      }
+          `}
     </div>
   `;
 }
diff --git a/ui/src/ui/chat/tool-cards.ts b/ui/src/ui/chat/tool-cards.ts
index 0a5d85542ca..2e79283fe88 100644
--- a/ui/src/ui/chat/tool-cards.ts
+++ b/ui/src/ui/chat/tool-cards.ts
@@ -81,49 +81,35 @@ export function renderToolCardSidebar(card: ToolCard, onOpenSidebar?: (content:
       @click=${handleClick}
       role=${canClick ? "button" : nothing}
       tabindex=${canClick ? "0" : nothing}
-      @keydown=${
-        canClick
-          ? (e: KeyboardEvent) => {
-              if (e.key !== "Enter" && e.key !== " ") {
-                return;
-              }
-              e.preventDefault();
-              handleClick?.();
+      @keydown=${canClick
+        ? (e: KeyboardEvent) => {
+            if (e.key !== "Enter" && e.key !== " ") {
+              return;
             }
-          : nothing
-      }
+            e.preventDefault();
+            handleClick?.();
+          }
+        : nothing}
     >
       <div class="chat-tool-card__header">
         <div class="chat-tool-card__title">
           <span class="chat-tool-card__icon">${icons[display.icon]}</span>
           <span>${display.label}</span>
         </div>
-        ${
-          canClick
-            ? html`<span class="chat-tool-card__action"
+        ${canClick
+          ? html`<span class="chat-tool-card__action"
               >${hasText ? "View" : ""} ${icons.check}</span
             >`
-            : nothing
-        }
-        ${
-          isEmpty && !canClick
-            ? html`<span class="chat-tool-card__status">${icons.check}</span>`
-            : nothing
-        }
+          : nothing}
+        ${isEmpty && !canClick
+          ? html`<span class="chat-tool-card__status">${icons.check}</span>`
+          : nothing}
       </div>
       ${detail ? html`<div class="chat-tool-card__detail">${detail}</div>` : nothing}
-      ${
-        isEmpty
-          ? html`
-              <div class="chat-tool-card__status-text muted">Completed</div>
-            `
-          : nothing
-      }
-      ${
-        showCollapsed
-          ? html`<div class="chat-tool-card__preview mono">${getTruncatedPreview(card.text!)}</div>`
-          : nothing
-      }
+      ${isEmpty ? html` <div class="chat-tool-card__status-text muted">Completed</div> ` : nothing}
+      ${showCollapsed
+        ? html`<div class="chat-tool-card__preview mono">${getTruncatedPreview(card.text!)}</div>`
+        : nothing}
       ${showInline ? html`<div class="chat-tool-card__inline mono">${card.text}</div>` : nothing}
     </div>
   `;
diff --git a/ui/src/ui/icons.ts b/ui/src/ui/icons.ts
index 9cba6e36ef1..4c10abc1f6c 100644
--- a/ui/src/ui/icons.ts
+++ b/ui/src/ui/icons.ts
@@ -121,9 +121,7 @@ export const icons = {
       <path d="m6 6 12 12" />
     </svg>
   `,
-  check: html`
-    <svg viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5" /></svg>
-  `,
+  check: html` <svg viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5" /></svg> `,
   arrowDown: html`
     <svg viewBox="0 0 24 24">
       <path d="M12 5v14" />
@@ -144,8 +142,12 @@ export const icons = {
   `,
   brain: html`
     <svg viewBox="0 0 24 24">
-      <path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z" />
-      <path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z" />
+      <path
+        d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"
+      />
+      <path
+        d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z"
+      />
       <path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4" />
       <path d="M17.599 6.5a3 3 0 0 0 .399-1.375" />
       <path d="M6.003 5.125A3 3 0 0 0 6.401 6.5" />
@@ -236,9 +238,7 @@ export const icons = {
       <path d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z" />
     </svg>
   `,
-  circle: html`
-    <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" /></svg>
-  `,
+  circle: html` <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" /></svg> `,
   puzzle: html`
     <svg viewBox="0 0 24 24">
       <path
@@ -286,9 +286,7 @@ export const icons = {
       <path d="M22 2 11 13" />
     </svg>
   `,
-  stop: html`
-    <svg viewBox="0 0 24 24"><rect width="14" height="14" x="5" y="5" rx="1" /></svg>
-  `,
+  stop: html` <svg viewBox="0 0 24 24"><rect width="14" height="14" x="5" y="5" rx="1" /></svg> `,
   pin: html`
     <svg viewBox="0 0 24 24">
       <line x1="12" x2="12" y1="17" y2="22" />
diff --git a/ui/src/ui/views/agents-panels-overview.ts b/ui/src/ui/views/agents-panels-overview.ts
index 2dafff0d28e..eefb35e2bcf 100644
--- a/ui/src/ui/views/agents-panels-overview.ts
+++ b/ui/src/ui/views/agents-panels-overview.ts
@@ -115,13 +115,13 @@ export function renderAgentOverview(params: {
         </div>
       </div>
 
-      ${
-        configDirty
-          ? html`
-              <div class="callout warn" style="margin-top: 16px">You have unsaved config changes.</div>
-            `
-          : nothing
-      }
+      ${configDirty
+        ? html`
+            <div class="callout warn" style="margin-top: 16px">
+              You have unsaved config changes.
+            </div>
+          `
+        : nothing}
 
       <div class="agent-model-select" style="margin-top: 20px;">
         <div class="label">Model Selection</div>
@@ -134,17 +134,13 @@ export function renderAgentOverview(params: {
               @change=${(e: Event) =>
                 onModelChange(agent.id, (e.target as HTMLSelectElement).value || null)}
             >
-              ${
-                isDefault
-                  ? html`
-                      <option value="">Not set</option>
-                    `
-                  : html`
+              ${isDefault
+                ? html` <option value="">Not set</option> `
+                : html`
                     <option value="">
                       ${defaultPrimary ? `Inherit default (${defaultPrimary})` : "Inherit default"}
                     </option>
-                  `
-              }
+                  `}
               ${buildModelOptions(configForm, effectivePrimary ?? undefined, params.modelCatalog)}
             </select>
           </label>
diff --git a/ui/src/ui/views/agents-panels-status-files.ts b/ui/src/ui/views/agents-panels-status-files.ts
index 02f660171b2..634f1a753d4 100644
--- a/ui/src/ui/views/agents-panels-status-files.ts
+++ b/ui/src/ui/views/agents-panels-status-files.ts
@@ -179,24 +179,19 @@ export function renderAgentChannels(params: {
           </button>
         </div>
         <div class="muted" style="margin-top: 8px;">Last refresh: ${lastSuccessLabel}</div>
-        ${
-          params.error
-            ? html`<div class="callout danger" style="margin-top: 12px;">${params.error}</div>`
-            : nothing
-        }
-        ${
-          !params.snapshot
-            ? html`
-                <div class="callout info" style="margin-top: 12px">Load channels to see live status.</div>
-              `
-            : nothing
-        }
-        ${
-          entries.length === 0
-            ? html`
-                <div class="muted" style="margin-top: 16px">No channels found.</div>
-              `
-            : html`
+        ${params.error
+          ? html`<div class="callout danger" style="margin-top: 12px;">${params.error}</div>`
+          : nothing}
+        ${!params.snapshot
+          ? html`
+              <div class="callout info" style="margin-top: 12px">
+                Load channels to see live status.
+              </div>
+            `
+          : nothing}
+        ${entries.length === 0
+          ? html` <div class="muted" style="margin-top: 16px">No channels found.</div> `
+          : html`
               <div class="list" style="margin-top: 16px;">
                 ${entries.map((entry) => {
                   const summary = summarizeChannelAccounts(entry.accounts);
@@ -222,33 +217,28 @@ export function renderAgentChannels(params: {
                         <div>${status}</div>
                         <div>${configLabel}</div>
                         <div>${enabled}</div>
-                        ${
-                          summary.configured === 0
-                            ? html`
-                                <div>
-                                  <a
-                                    href="https://docs.openclaw.ai/channels"
-                                    target="_blank"
-                                    rel="noopener"
-                                    style="color: var(--accent); font-size: 12px"
-                                    >Setup guide</a
-                                  >
-                                </div>
-                              `
-                            : nothing
-                        }
-                        ${
-                          extras.length > 0
-                            ? extras.map((extra) => html`<div>${extra.label}: ${extra.value}</div>`)
-                            : nothing
-                        }
+                        ${summary.configured === 0
+                          ? html`
+                              <div>
+                                <a
+                                  href="https://docs.openclaw.ai/channels"
+                                  target="_blank"
+                                  rel="noopener"
+                                  style="color: var(--accent); font-size: 12px"
+                                  >Setup guide</a
+                                >
+                              </div>
+                            `
+                          : nothing}
+                        ${extras.length > 0
+                          ? extras.map((extra) => html`<div>${extra.label}: ${extra.value}</div>`)
+                          : nothing}
                       </div>
                     </div>
                   `;
                 })}
               </div>
-            `
-        }
+            `}
       </section>
     </section>
   `;
@@ -299,33 +289,26 @@ export function renderAgentCron(params: {
             <div class="stat-value">${formatNextRun(params.status?.nextWakeAtMs ?? null)}</div>
           </div>
         </div>
-        ${
-          params.error
-            ? html`<div class="callout danger" style="margin-top: 12px;">${params.error}</div>`
-            : nothing
-        }
+        ${params.error
+          ? html`<div class="callout danger" style="margin-top: 12px;">${params.error}</div>`
+          : nothing}
       </section>
     </section>
     <section class="card">
       <div class="card-title">Agent Cron Jobs</div>
       <div class="card-sub">Scheduled jobs targeting this agent.</div>
-      ${
-        jobs.length === 0
-          ? html`
-              <div class="muted" style="margin-top: 16px">No jobs assigned.</div>
-            `
-          : html`
+      ${jobs.length === 0
+        ? html` <div class="muted" style="margin-top: 16px">No jobs assigned.</div> `
+        : html`
             <div class="list" style="margin-top: 16px;">
               ${jobs.map(
                 (job) => html`
                   <div class="list-item">
                     <div class="list-main">
                       <div class="list-title">${job.name}</div>
-                      ${
-                        job.description
-                          ? html`<div class="list-sub">${job.description}</div>`
-                          : nothing
-                      }
+                      ${job.description
+                        ? html`<div class="list-sub">${job.description}</div>`
+                        : nothing}
                       <div class="chip-row" style="margin-top: 6px;">
                         <span class="chip">${formatCronSchedule(job)}</span>
                         <span class="chip ${job.enabled ? "chip-ok" : "chip-warn"}">
@@ -350,8 +333,7 @@ export function renderAgentCron(params: {
                 `,
               )}
             </div>
-          `
-      }
+          `}
     </section>
   `;
 }
@@ -394,60 +376,46 @@ export function renderAgentFiles(params: {
           ${params.agentFilesLoading ? "Loading…" : "Refresh"}
         </button>
       </div>
-      ${
-        list
-          ? html`<div class="muted mono" style="margin-top: 8px;">
+      ${list
+        ? html`<div class="muted mono" style="margin-top: 8px;">
             Workspace: <span>${list.workspace}</span>
           </div>`
-          : nothing
-      }
-      ${
-        params.agentFilesError
-          ? html`<div class="callout danger" style="margin-top: 12px;">
+        : nothing}
+      ${params.agentFilesError
+        ? html`<div class="callout danger" style="margin-top: 12px;">
             ${params.agentFilesError}
           </div>`
-          : nothing
-      }
-      ${
-        !list
-          ? html`
-              <div class="callout info" style="margin-top: 12px">
-                Load the agent workspace files to edit core instructions.
-              </div>
-            `
-          : files.length === 0
-            ? html`
-                <div class="muted" style="margin-top: 16px">No files found.</div>
-              `
-            : html`
+        : nothing}
+      ${!list
+        ? html`
+            <div class="callout info" style="margin-top: 12px">
+              Load the agent workspace files to edit core instructions.
+            </div>
+          `
+        : files.length === 0
+          ? html` <div class="muted" style="margin-top: 16px">No files found.</div> `
+          : html`
               <div class="agent-tabs" style="margin-top: 14px;">
                 ${files.map((file) => {
                   const isActive = active === file.name;
                   const label = file.name.replace(/\.md$/i, "");
                   return html`
                     <button
-                      class="agent-tab ${isActive ? "active" : ""} ${
-                        file.missing ? "agent-tab--missing" : ""
-                      }"
+                      class="agent-tab ${isActive ? "active" : ""} ${file.missing
+                        ? "agent-tab--missing"
+                        : ""}"
                       @click=${() => params.onSelectFile(file.name)}
                     >
-                      ${label}${
-                        file.missing
-                          ? html`
-                              <span class="agent-tab-badge">missing</span>
-                            `
-                          : nothing
-                      }
+                      ${label}${file.missing
+                        ? html` <span class="agent-tab-badge">missing</span> `
+                        : nothing}
                     </button>
                   `;
                 })}
               </div>
-              ${
-                !activeEntry
-                  ? html`
-                      <div class="muted" style="margin-top: 16px">Select a file to edit.</div>
-                    `
-                  : html`
+              ${!activeEntry
+                ? html` <div class="muted" style="margin-top: 16px">Select a file to edit.</div> `
+                : html`
                     <div class="agent-file-header" style="margin-top: 14px;">
                       <div>
                         <div class="agent-file-sub mono">${activeEntry.path}</div>
@@ -482,15 +450,13 @@ export function renderAgentFiles(params: {
                         </button>
                       </div>
                     </div>
-                    ${
-                      activeEntry.missing
-                        ? html`
-                            <div class="callout info" style="margin-top: 10px">
-                              This file is missing. Saving will create it in the agent workspace.
-                            </div>
-                          `
-                        : nothing
-                    }
+                    ${activeEntry.missing
+                      ? html`
+                          <div class="callout info" style="margin-top: 10px">
+                            This file is missing. Saving will create it in the agent workspace.
+                          </div>
+                        `
+                      : nothing}
                     <label class="field agent-file-field" style="margin-top: 12px;">
                       <span>Content</span>
                       <textarea
@@ -570,10 +536,8 @@ export function renderAgentFiles(params: {
                         </div>
                       </div>
                     </dialog>
-                  `
-              }
-            `
-      }
+                  `}
+            `}
     </section>
   `;
 }
diff --git a/ui/src/ui/views/agents-panels-tools-skills.ts b/ui/src/ui/views/agents-panels-tools-skills.ts
index 812619d27e6..d6498c9e16a 100644
--- a/ui/src/ui/views/agents-panels-tools-skills.ts
+++ b/ui/src/ui/views/agents-panels-tools-skills.ts
@@ -200,49 +200,41 @@ export function renderAgentTools(params: {
         </div>
       </div>
 
-      ${
-        !params.configForm
-          ? html`
-              <div class="callout info" style="margin-top: 12px">
-                Load the gateway config to adjust tool profiles.
-              </div>
-            `
-          : nothing
-      }
-      ${
-        hasAgentAllow
-          ? html`
-              <div class="callout info" style="margin-top: 12px">
-                This agent is using an explicit allowlist in config. Tool overrides are managed in the Config tab.
-              </div>
-            `
-          : nothing
-      }
-      ${
-        hasGlobalAllow
-          ? html`
-              <div class="callout info" style="margin-top: 12px">
-                Global tools.allow is set. Agent overrides cannot enable tools that are globally blocked.
-              </div>
-            `
-          : nothing
-      }
-      ${
-        params.toolsCatalogLoading && !params.toolsCatalogResult && !params.toolsCatalogError
-          ? html`
-              <div class="callout info" style="margin-top: 12px">Loading runtime tool catalog…</div>
-            `
-          : nothing
-      }
-      ${
-        params.toolsCatalogError
-          ? html`
-              <div class="callout info" style="margin-top: 12px">
-                Could not load runtime tool catalog. Showing built-in fallback list instead.
-              </div>
-            `
-          : nothing
-      }
+      ${!params.configForm
+        ? html`
+            <div class="callout info" style="margin-top: 12px">
+              Load the gateway config to adjust tool profiles.
+            </div>
+          `
+        : nothing}
+      ${hasAgentAllow
+        ? html`
+            <div class="callout info" style="margin-top: 12px">
+              This agent is using an explicit allowlist in config. Tool overrides are managed in the
+              Config tab.
+            </div>
+          `
+        : nothing}
+      ${hasGlobalAllow
+        ? html`
+            <div class="callout info" style="margin-top: 12px">
+              Global tools.allow is set. Agent overrides cannot enable tools that are globally
+              blocked.
+            </div>
+          `
+        : nothing}
+      ${params.toolsCatalogLoading && !params.toolsCatalogResult && !params.toolsCatalogError
+        ? html`
+            <div class="callout info" style="margin-top: 12px">Loading runtime tool catalog…</div>
+          `
+        : nothing}
+      ${params.toolsCatalogError
+        ? html`
+            <div class="callout info" style="margin-top: 12px">
+              Could not load runtime tool catalog. Showing built-in fallback list instead.
+            </div>
+          `
+        : nothing}
 
       <div class="agent-tools-meta" style="margin-top: 16px;">
         <div class="agent-kv">
@@ -253,16 +245,14 @@ export function renderAgentTools(params: {
           <div class="label">Source</div>
           <div>${profileSource}</div>
         </div>
-        ${
-          params.configDirty
-            ? html`
-                <div class="agent-kv">
-                  <div class="label">Status</div>
-                  <div class="mono">unsaved</div>
-                </div>
-              `
-            : nothing
-        }
+        ${params.configDirty
+          ? html`
+              <div class="agent-kv">
+                <div class="label">Status</div>
+                <div class="mono">unsaved</div>
+              </div>
+            `
+          : nothing}
       </div>
 
       <div style="margin-top: 18px;">
@@ -271,32 +261,31 @@ export function renderAgentTools(params: {
           What this agent can use in the current chat session.
           <span class="mono">${params.runtimeSessionKey || "no session"}</span>
         </div>
-        ${
-          !params.runtimeSessionMatchesSelectedAgent
+        ${!params.runtimeSessionMatchesSelectedAgent
+          ? html`
+              <div class="callout info" style="margin-top: 12px">
+                Switch chat to this agent to view its live runtime tools.
+              </div>
+            `
+          : params.toolsEffectiveLoading &&
+              !params.toolsEffectiveResult &&
+              !params.toolsEffectiveError
             ? html`
-                <div class="callout info" style="margin-top: 12px">
-                  Switch chat to this agent to view its live runtime tools.
-                </div>
+                <div class="callout info" style="margin-top: 12px">Loading available tools…</div>
               `
-            : params.toolsEffectiveLoading &&
-                !params.toolsEffectiveResult &&
-                !params.toolsEffectiveError
+            : params.toolsEffectiveError
               ? html`
-                  <div class="callout info" style="margin-top: 12px">Loading available tools…</div>
+                  <div class="callout info" style="margin-top: 12px">
+                    Could not load available tools for this session.
+                  </div>
                 `
-              : params.toolsEffectiveError
+              : (params.toolsEffectiveResult?.groups?.length ?? 0) === 0
                 ? html`
                     <div class="callout info" style="margin-top: 12px">
-                      Could not load available tools for this session.
+                      No tools are available for this session right now.
                     </div>
                   `
-                : (params.toolsEffectiveResult?.groups?.length ?? 0) === 0
-                  ? html`
-                      <div class="callout info" style="margin-top: 12px">
-                        No tools are available for this session right now.
-                      </div>
-                    `
-                  : html`
+                : html`
                     <div class="agent-tools-grid" style="margin-top: 16px;">
                       ${params.toolsEffectiveResult?.groups.map(
                         (group) => html`
@@ -325,8 +314,7 @@ export function renderAgentTools(params: {
                         `,
                       )}
                     </div>
-                  `
-        }
+                  `}
       </div>
 
       <div class="agent-tools-presets" style="margin-top: 16px;">
@@ -359,13 +347,11 @@ export function renderAgentTools(params: {
             <div class="agent-tools-section">
               <div class="agent-tools-header">
                 ${section.label}
-                ${
-                  section.source === "plugin" && section.pluginId
-                    ? html`<span class="agent-pill" style="margin-left: 8px;"
+                ${section.source === "plugin" && section.pluginId
+                  ? html`<span class="agent-pill" style="margin-left: 8px;"
                       >plugin:${section.pluginId}</span
                     >`
-                    : nothing
-                }
+                  : nothing}
               </div>
               <div class="agent-tools-list">
                 ${section.tools.map((tool) => {
@@ -444,11 +430,9 @@ export function renderAgentSkills(params: {
           <div class="card-title">Skills</div>
           <div class="card-sub">
             Per-agent skill allowlist and workspace skills.
-            ${
-              totalCount > 0
-                ? html`<span class="mono">${enabledCount}/${totalCount}</span>`
-                : nothing
-            }
+            ${totalCount > 0
+              ? html`<span class="mono">${enabledCount}/${totalCount}</span>`
+              : nothing}
           </div>
         </div>
         <div class="row" style="gap: 8px; flex-wrap: wrap;">
@@ -499,40 +483,34 @@ export function renderAgentSkills(params: {
         </div>
       </div>
 
-      ${
-        !params.configForm
-          ? html`
-              <div class="callout info" style="margin-top: 12px">
-                Load the gateway config to set per-agent skills.
-              </div>
-            `
-          : nothing
-      }
-      ${
-        usingAllowlist
-          ? html`
-              <div class="callout info" style="margin-top: 12px">This agent uses a custom skill allowlist.</div>
-            `
-          : html`
-              <div class="callout info" style="margin-top: 12px">
-                All skills are enabled. Disabling any skill will create a per-agent allowlist.
-              </div>
-            `
-      }
-      ${
-        !reportReady && !params.loading
-          ? html`
-              <div class="callout info" style="margin-top: 12px">
-                Load skills for this agent to view workspace-specific entries.
-              </div>
-            `
-          : nothing
-      }
-      ${
-        params.error
-          ? html`<div class="callout danger" style="margin-top: 12px;">${params.error}</div>`
-          : nothing
-      }
+      ${!params.configForm
+        ? html`
+            <div class="callout info" style="margin-top: 12px">
+              Load the gateway config to set per-agent skills.
+            </div>
+          `
+        : nothing}
+      ${usingAllowlist
+        ? html`
+            <div class="callout info" style="margin-top: 12px">
+              This agent uses a custom skill allowlist.
+            </div>
+          `
+        : html`
+            <div class="callout info" style="margin-top: 12px">
+              All skills are enabled. Disabling any skill will create a per-agent allowlist.
+            </div>
+          `}
+      ${!reportReady && !params.loading
+        ? html`
+            <div class="callout info" style="margin-top: 12px">
+              Load skills for this agent to view workspace-specific entries.
+            </div>
+          `
+        : nothing}
+      ${params.error
+        ? html`<div class="callout danger" style="margin-top: 12px;">${params.error}</div>`
+        : nothing}
 
       <div class="filters" style="margin-top: 14px;">
         <label class="field" style="flex: 1;">
@@ -548,12 +526,9 @@ export function renderAgentSkills(params: {
         <div class="muted">${filtered.length} shown</div>
       </div>
 
-      ${
-        filtered.length === 0
-          ? html`
-              <div class="muted" style="margin-top: 16px">No skills found.</div>
-            `
-          : html`
+      ${filtered.length === 0
+        ? html` <div class="muted" style="margin-top: 16px">No skills found.</div> `
+        : html`
             <div class="agent-skills-groups" style="margin-top: 16px;">
               ${groups.map((group) =>
                 renderAgentSkillGroup(group, {
@@ -565,8 +540,7 @@ export function renderAgentSkills(params: {
                 }),
               )}
             </div>
-          `
-      }
+          `}
     </section>
   `;
 }
@@ -622,16 +596,12 @@ function renderAgentSkillRow(
         <div class="list-title">${skill.emoji ? `${skill.emoji} ` : ""}${skill.name}</div>
         <div class="list-sub">${skill.description}</div>
         ${renderSkillStatusChips({ skill })}
-        ${
-          missing.length > 0
-            ? html`<div class="muted" style="margin-top: 6px;">Missing: ${missing.join(", ")}</div>`
-            : nothing
-        }
-        ${
-          reasons.length > 0
-            ? html`<div class="muted" style="margin-top: 6px;">Reason: ${reasons.join(", ")}</div>`
-            : nothing
-        }
+        ${missing.length > 0
+          ? html`<div class="muted" style="margin-top: 6px;">Missing: ${missing.join(", ")}</div>`
+          : nothing}
+        ${reasons.length > 0
+          ? html`<div class="muted" style="margin-top: 6px;">Reason: ${reasons.join(", ")}</div>`
+          : nothing}
       </div>
       <div class="list-meta">
         <label class="cfg-toggle">
diff --git a/ui/src/ui/views/agents.ts b/ui/src/ui/views/agents.ts
index 63ac54953c4..baf0ec41c7b 100644
--- a/ui/src/ui/views/agents.ts
+++ b/ui/src/ui/views/agents.ts
@@ -154,29 +154,22 @@ export function renderAgents(props: AgentsProps) {
               ?disabled=${props.loading || agents.length === 0}
               @change=${(e: Event) => props.onSelectAgent((e.target as HTMLSelectElement).value)}
             >
-              ${
-                agents.length === 0
-                  ? html`
-                      <option value="">No agents</option>
-                    `
-                  : agents.map(
-                      (agent) => html`
+              ${agents.length === 0
+                ? html` <option value="">No agents</option> `
+                : agents.map(
+                    (agent) => html`
                       <option value=${agent.id} ?selected=${agent.id === selectedId}>
-                        ${normalizeAgentLabel(agent)}${
-                          agentBadgeText(agent.id, defaultId)
-                            ? ` (${agentBadgeText(agent.id, defaultId)})`
-                            : ""
-                        }
+                        ${normalizeAgentLabel(agent)}${agentBadgeText(agent.id, defaultId)
+                          ? ` (${agentBadgeText(agent.id, defaultId)})`
+                          : ""}
                       </option>
                     `,
-                    )
-              }
+                  )}
             </select>
           </div>
           <div class="agents-toolbar-actions">
-            ${
-              selectedAgent
-                ? html`
+            ${selectedAgent
+              ? html`
                   <button
                     type="button"
                     class="btn btn--sm btn--ghost"
@@ -190,17 +183,14 @@ export function renderAgents(props: AgentsProps) {
                     class="btn btn--sm btn--ghost"
                     ?disabled=${Boolean(defaultId && selectedAgent.id === defaultId)}
                     @click=${() => props.onSetDefault(selectedAgent.id)}
-                    title=${
-                      defaultId && selectedAgent.id === defaultId
-                        ? "Already the default agent"
-                        : "Set as the default agent"
-                    }
+                    title=${defaultId && selectedAgent.id === defaultId
+                      ? "Already the default agent"
+                      : "Set as the default agent"}
                   >
                     ${defaultId && selectedAgent.id === defaultId ? "Default" : "Set Default"}
                   </button>
                 `
-                : nothing
-            }
+              : nothing}
             <button
               class="btn btn--sm agents-refresh-btn"
               ?disabled=${props.loading}
@@ -210,158 +200,142 @@ export function renderAgents(props: AgentsProps) {
             </button>
           </div>
         </div>
-        ${
-          props.error
-            ? html`<div class="callout danger" style="margin-top: 8px;">${props.error}</div>`
-            : nothing
-        }
+        ${props.error
+          ? html`<div class="callout danger" style="margin-top: 8px;">${props.error}</div>`
+          : nothing}
       </section>
       <section class="agents-main">
-        ${
-          !selectedAgent
-            ? html`
-                <div class="card">
-                  <div class="card-title">Select an agent</div>
-                  <div class="card-sub">Pick an agent to inspect its workspace and tools.</div>
-                </div>
-              `
-            : html`
+        ${!selectedAgent
+          ? html`
+              <div class="card">
+                <div class="card-title">Select an agent</div>
+                <div class="card-sub">Pick an agent to inspect its workspace and tools.</div>
+              </div>
+            `
+          : html`
               ${renderAgentTabs(
                 props.activePanel,
                 (panel) => props.onSelectPanel(panel),
                 tabCounts,
               )}
-              ${
-                props.activePanel === "overview"
-                  ? renderAgentOverview({
-                      agent: selectedAgent,
-                      basePath: props.basePath,
+              ${props.activePanel === "overview"
+                ? renderAgentOverview({
+                    agent: selectedAgent,
+                    basePath: props.basePath,
+                    defaultId,
+                    configForm: props.config.form,
+                    agentFilesList: props.agentFiles.list,
+                    agentIdentity: props.agentIdentityById[selectedAgent.id] ?? null,
+                    agentIdentityError: props.agentIdentityError,
+                    agentIdentityLoading: props.agentIdentityLoading,
+                    configLoading: props.config.loading,
+                    configSaving: props.config.saving,
+                    configDirty: props.config.dirty,
+                    modelCatalog: props.modelCatalog,
+                    onConfigReload: props.onConfigReload,
+                    onConfigSave: props.onConfigSave,
+                    onModelChange: props.onModelChange,
+                    onModelFallbacksChange: props.onModelFallbacksChange,
+                    onSelectPanel: props.onSelectPanel,
+                  })
+                : nothing}
+              ${props.activePanel === "files"
+                ? renderAgentFiles({
+                    agentId: selectedAgent.id,
+                    agentFilesList: props.agentFiles.list,
+                    agentFilesLoading: props.agentFiles.loading,
+                    agentFilesError: props.agentFiles.error,
+                    agentFileActive: props.agentFiles.active,
+                    agentFileContents: props.agentFiles.contents,
+                    agentFileDrafts: props.agentFiles.drafts,
+                    agentFileSaving: props.agentFiles.saving,
+                    onLoadFiles: props.onLoadFiles,
+                    onSelectFile: props.onSelectFile,
+                    onFileDraftChange: props.onFileDraftChange,
+                    onFileReset: props.onFileReset,
+                    onFileSave: props.onFileSave,
+                  })
+                : nothing}
+              ${props.activePanel === "tools"
+                ? renderAgentTools({
+                    agentId: selectedAgent.id,
+                    configForm: props.config.form,
+                    configLoading: props.config.loading,
+                    configSaving: props.config.saving,
+                    configDirty: props.config.dirty,
+                    toolsCatalogLoading: props.toolsCatalog.loading,
+                    toolsCatalogError: props.toolsCatalog.error,
+                    toolsCatalogResult: props.toolsCatalog.result,
+                    toolsEffectiveLoading: props.toolsEffective.loading,
+                    toolsEffectiveError: props.toolsEffective.error,
+                    toolsEffectiveResult: props.toolsEffective.result,
+                    runtimeSessionKey: props.runtimeSessionKey,
+                    runtimeSessionMatchesSelectedAgent: props.runtimeSessionMatchesSelectedAgent,
+                    onProfileChange: props.onToolsProfileChange,
+                    onOverridesChange: props.onToolsOverridesChange,
+                    onConfigReload: props.onConfigReload,
+                    onConfigSave: props.onConfigSave,
+                  })
+                : nothing}
+              ${props.activePanel === "skills"
+                ? renderAgentSkills({
+                    agentId: selectedAgent.id,
+                    report: props.agentSkills.report,
+                    loading: props.agentSkills.loading,
+                    error: props.agentSkills.error,
+                    activeAgentId: props.agentSkills.agentId,
+                    configForm: props.config.form,
+                    configLoading: props.config.loading,
+                    configSaving: props.config.saving,
+                    configDirty: props.config.dirty,
+                    filter: props.agentSkills.filter,
+                    onFilterChange: props.onSkillsFilterChange,
+                    onRefresh: props.onSkillsRefresh,
+                    onToggle: props.onAgentSkillToggle,
+                    onClear: props.onAgentSkillsClear,
+                    onDisableAll: props.onAgentSkillsDisableAll,
+                    onConfigReload: props.onConfigReload,
+                    onConfigSave: props.onConfigSave,
+                  })
+                : nothing}
+              ${props.activePanel === "channels"
+                ? renderAgentChannels({
+                    context: buildAgentContext(
+                      selectedAgent,
+                      props.config.form,
+                      props.agentFiles.list,
                       defaultId,
-                      configForm: props.config.form,
-                      agentFilesList: props.agentFiles.list,
-                      agentIdentity: props.agentIdentityById[selectedAgent.id] ?? null,
-                      agentIdentityError: props.agentIdentityError,
-                      agentIdentityLoading: props.agentIdentityLoading,
-                      configLoading: props.config.loading,
-                      configSaving: props.config.saving,
-                      configDirty: props.config.dirty,
-                      modelCatalog: props.modelCatalog,
-                      onConfigReload: props.onConfigReload,
-                      onConfigSave: props.onConfigSave,
-                      onModelChange: props.onModelChange,
-                      onModelFallbacksChange: props.onModelFallbacksChange,
-                      onSelectPanel: props.onSelectPanel,
-                    })
-                  : nothing
-              }
-              ${
-                props.activePanel === "files"
-                  ? renderAgentFiles({
-                      agentId: selectedAgent.id,
-                      agentFilesList: props.agentFiles.list,
-                      agentFilesLoading: props.agentFiles.loading,
-                      agentFilesError: props.agentFiles.error,
-                      agentFileActive: props.agentFiles.active,
-                      agentFileContents: props.agentFiles.contents,
-                      agentFileDrafts: props.agentFiles.drafts,
-                      agentFileSaving: props.agentFiles.saving,
-                      onLoadFiles: props.onLoadFiles,
-                      onSelectFile: props.onSelectFile,
-                      onFileDraftChange: props.onFileDraftChange,
-                      onFileReset: props.onFileReset,
-                      onFileSave: props.onFileSave,
-                    })
-                  : nothing
-              }
-              ${
-                props.activePanel === "tools"
-                  ? renderAgentTools({
-                      agentId: selectedAgent.id,
-                      configForm: props.config.form,
-                      configLoading: props.config.loading,
-                      configSaving: props.config.saving,
-                      configDirty: props.config.dirty,
-                      toolsCatalogLoading: props.toolsCatalog.loading,
-                      toolsCatalogError: props.toolsCatalog.error,
-                      toolsCatalogResult: props.toolsCatalog.result,
-                      toolsEffectiveLoading: props.toolsEffective.loading,
-                      toolsEffectiveError: props.toolsEffective.error,
-                      toolsEffectiveResult: props.toolsEffective.result,
-                      runtimeSessionKey: props.runtimeSessionKey,
-                      runtimeSessionMatchesSelectedAgent: props.runtimeSessionMatchesSelectedAgent,
-                      onProfileChange: props.onToolsProfileChange,
-                      onOverridesChange: props.onToolsOverridesChange,
-                      onConfigReload: props.onConfigReload,
-                      onConfigSave: props.onConfigSave,
-                    })
-                  : nothing
-              }
-              ${
-                props.activePanel === "skills"
-                  ? renderAgentSkills({
-                      agentId: selectedAgent.id,
-                      report: props.agentSkills.report,
-                      loading: props.agentSkills.loading,
-                      error: props.agentSkills.error,
-                      activeAgentId: props.agentSkills.agentId,
-                      configForm: props.config.form,
-                      configLoading: props.config.loading,
-                      configSaving: props.config.saving,
-                      configDirty: props.config.dirty,
-                      filter: props.agentSkills.filter,
-                      onFilterChange: props.onSkillsFilterChange,
-                      onRefresh: props.onSkillsRefresh,
-                      onToggle: props.onAgentSkillToggle,
-                      onClear: props.onAgentSkillsClear,
-                      onDisableAll: props.onAgentSkillsDisableAll,
-                      onConfigReload: props.onConfigReload,
-                      onConfigSave: props.onConfigSave,
-                    })
-                  : nothing
-              }
-              ${
-                props.activePanel === "channels"
-                  ? renderAgentChannels({
-                      context: buildAgentContext(
-                        selectedAgent,
-                        props.config.form,
-                        props.agentFiles.list,
-                        defaultId,
-                        props.agentIdentityById[selectedAgent.id] ?? null,
-                      ),
-                      configForm: props.config.form,
-                      snapshot: props.channels.snapshot,
-                      loading: props.channels.loading,
-                      error: props.channels.error,
-                      lastSuccess: props.channels.lastSuccess,
-                      onRefresh: props.onChannelsRefresh,
-                      onSelectPanel: props.onSelectPanel,
-                    })
-                  : nothing
-              }
-              ${
-                props.activePanel === "cron"
-                  ? renderAgentCron({
-                      context: buildAgentContext(
-                        selectedAgent,
-                        props.config.form,
-                        props.agentFiles.list,
-                        defaultId,
-                        props.agentIdentityById[selectedAgent.id] ?? null,
-                      ),
-                      agentId: selectedAgent.id,
-                      jobs: props.cron.jobs,
-                      status: props.cron.status,
-                      loading: props.cron.loading,
-                      error: props.cron.error,
-                      onRefresh: props.onCronRefresh,
-                      onRunNow: props.onCronRunNow,
-                      onSelectPanel: props.onSelectPanel,
-                    })
-                  : nothing
-              }
-            `
-        }
+                      props.agentIdentityById[selectedAgent.id] ?? null,
+                    ),
+                    configForm: props.config.form,
+                    snapshot: props.channels.snapshot,
+                    loading: props.channels.loading,
+                    error: props.channels.error,
+                    lastSuccess: props.channels.lastSuccess,
+                    onRefresh: props.onChannelsRefresh,
+                    onSelectPanel: props.onSelectPanel,
+                  })
+                : nothing}
+              ${props.activePanel === "cron"
+                ? renderAgentCron({
+                    context: buildAgentContext(
+                      selectedAgent,
+                      props.config.form,
+                      props.agentFiles.list,
+                      defaultId,
+                      props.agentIdentityById[selectedAgent.id] ?? null,
+                    ),
+                    agentId: selectedAgent.id,
+                    jobs: props.cron.jobs,
+                    status: props.cron.status,
+                    loading: props.cron.loading,
+                    error: props.cron.error,
+                    onRefresh: props.onCronRefresh,
+                    onRunNow: props.onCronRunNow,
+                    onSelectPanel: props.onSelectPanel,
+                  })
+                : nothing}
+            `}
       </section>
     </div>
   `;
@@ -389,11 +363,9 @@ function renderAgentTabs(
             type="button"
             @click=${() => onSelect(tab.id)}
           >
-            ${tab.label}${
-              counts[tab.id] != null
-                ? html`<span class="agent-tab-count">${counts[tab.id]}</span>`
-                : nothing
-            }
+            ${tab.label}${counts[tab.id] != null
+              ? html`<span class="agent-tab-count">${counts[tab.id]}</span>`
+              : nothing}
           </button>
         `,
       )}
diff --git a/ui/src/ui/views/channels.config.ts b/ui/src/ui/views/channels.config.ts
index 432733011a3..8cb495446e3 100644
--- a/ui/src/ui/views/channels.config.ts
+++ b/ui/src/ui/views/channels.config.ts
@@ -86,15 +86,11 @@ export function renderChannelConfigForm(props: ChannelConfigFormProps) {
   const analysis = analyzeConfigSchema(props.schema);
   const normalized = analysis.schema;
   if (!normalized) {
-    return html`
-      <div class="callout danger">Schema unavailable. Use Raw.</div>
-    `;
+    return html` <div class="callout danger">Schema unavailable. Use Raw.</div> `;
   }
   const node = resolveSchemaNode(normalized, ["channels", props.channelId]);
   if (!node) {
-    return html`
-      <div class="callout danger">Channel config schema unavailable.</div>
-    `;
+    return html` <div class="callout danger">Channel config schema unavailable.</div> `;
   }
   const configValue = props.configValue ?? {};
   const value = resolveChannelValue(configValue, props.channelId);
@@ -120,20 +116,16 @@ export function renderChannelConfigSection(params: { channelId: string; props: C
   const disabled = props.configSaving || props.configSchemaLoading;
   return html`
     <div style="margin-top: 16px;">
-      ${
-        props.configSchemaLoading
-          ? html`
-              <div class="muted">Loading config schema…</div>
-            `
-          : renderChannelConfigForm({
-              channelId,
-              configValue: props.configForm,
-              schema: props.configSchema,
-              uiHints: props.configUiHints,
-              disabled,
-              onPatch: props.onConfigPatch,
-            })
-      }
+      ${props.configSchemaLoading
+        ? html` <div class="muted">Loading config schema…</div> `
+        : renderChannelConfigForm({
+            channelId,
+            configValue: props.configForm,
+            schema: props.configSchema,
+            uiHints: props.configUiHints,
+            disabled,
+            onPatch: props.onConfigPatch,
+          })}
       <div class="row" style="margin-top: 12px;">
         <button
           class="btn primary"
diff --git a/ui/src/ui/views/channels.nostr-profile-form.ts b/ui/src/ui/views/channels.nostr-profile-form.ts
index dab45ddb426..ad44657d974 100644
--- a/ui/src/ui/views/channels.nostr-profile-form.ts
+++ b/ui/src/ui/views/channels.nostr-profile-form.ts
@@ -108,20 +108,16 @@ export function renderNostrProfileForm(params: {
             }}
             ?disabled=${state.saving}
           ></textarea>
-          ${
-            help
-              ? html`<div style="font-size: 12px; color: var(--text-muted); margin-top: 2px;">
+          ${help
+            ? html`<div style="font-size: 12px; color: var(--text-muted); margin-top: 2px;">
                 ${help}
               </div>`
-              : nothing
-          }
-          ${
-            error
-              ? html`<div style="font-size: 12px; color: var(--danger-color); margin-top: 2px;">
+            : nothing}
+          ${error
+            ? html`<div style="font-size: 12px; color: var(--danger-color); margin-top: 2px;">
                 ${error}
               </div>`
-              : nothing
-          }
+            : nothing}
         </div>
       `;
     }
@@ -144,20 +140,16 @@ export function renderNostrProfileForm(params: {
           }}
           ?disabled=${state.saving}
         />
-        ${
-          help
-            ? html`<div style="font-size: 12px; color: var(--text-muted); margin-top: 2px;">
+        ${help
+          ? html`<div style="font-size: 12px; color: var(--text-muted); margin-top: 2px;">
               ${help}
             </div>`
-            : nothing
-        }
-        ${
-          error
-            ? html`<div style="font-size: 12px; color: var(--danger-color); margin-top: 2px;">
+          : nothing}
+        ${error
+          ? html`<div style="font-size: 12px; color: var(--danger-color); margin-top: 2px;">
               ${error}
             </div>`
-            : nothing
-        }
+          : nothing}
       </div>
     `;
   };
@@ -199,16 +191,12 @@ export function renderNostrProfileForm(params: {
         <div style="font-size: 12px; color: var(--text-muted);">Account: ${accountId}</div>
       </div>
 
-      ${
-        state.error
-          ? html`<div class="callout danger" style="margin-bottom: 12px;">${state.error}</div>`
-          : nothing
-      }
-      ${
-        state.success
-          ? html`<div class="callout success" style="margin-bottom: 12px;">${state.success}</div>`
-          : nothing
-      }
+      ${state.error
+        ? html`<div class="callout danger" style="margin-bottom: 12px;">${state.error}</div>`
+        : nothing}
+      ${state.success
+        ? html`<div class="callout success" style="margin-bottom: 12px;">${state.success}</div>`
+        : nothing}
       ${renderPicturePreview()}
       ${renderField("name", "Username", {
         placeholder: "satoshi",
@@ -231,9 +219,8 @@ export function renderNostrProfileForm(params: {
         placeholder: "https://example.com/avatar.jpg",
         help: "HTTPS URL to your profile picture",
       })}
-      ${
-        state.showAdvanced
-          ? html`
+      ${state.showAdvanced
+        ? html`
             <div
               style="border-top: 1px solid var(--border-color); padding-top: 12px; margin-top: 12px;"
             >
@@ -261,8 +248,7 @@ export function renderNostrProfileForm(params: {
               })}
             </div>
           `
-          : nothing
-      }
+        : nothing}
 
       <div style="display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap;">
         <button
@@ -288,15 +274,13 @@ export function renderNostrProfileForm(params: {
         <button class="btn" @click=${callbacks.onCancel} ?disabled=${state.saving}>Cancel</button>
       </div>
 
-      ${
-        isDirty
-          ? html`
-              <div style="font-size: 12px; color: var(--warning-color); margin-top: 8px">
-                You have unsaved changes
-              </div>
-            `
-          : nothing
-      }
+      ${isDirty
+        ? html`
+            <div style="font-size: 12px; color: var(--warning-color); margin-top: 8px">
+              You have unsaved changes
+            </div>
+          `
+        : nothing}
     </div>
   `;
 }
diff --git a/ui/src/ui/views/channels.nostr.ts b/ui/src/ui/views/channels.nostr.ts
index 3f560bc0726..b27ef106bbe 100644
--- a/ui/src/ui/views/channels.nostr.ts
+++ b/ui/src/ui/views/channels.nostr.ts
@@ -80,16 +80,14 @@ export function renderNostrCard(params: {
           <div>
             <span class="label">Last inbound</span>
             <span
-              >${
-                account.lastInboundAt ? formatRelativeTimestamp(account.lastInboundAt) : "n/a"
-              }</span
+              >${account.lastInboundAt
+                ? formatRelativeTimestamp(account.lastInboundAt)
+                : "n/a"}</span
             >
           </div>
-          ${
-            account.lastError
-              ? html` <div class="account-card-error">${account.lastError}</div> `
-              : nothing
-          }
+          ${account.lastError
+            ? html` <div class="account-card-error">${account.lastError}</div> `
+            : nothing}
         </div>
       </div>
     `;
@@ -130,9 +128,8 @@ export function renderNostrCard(params: {
           style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;"
         >
           <div style="font-weight: 500;">Profile</div>
-          ${
-            summaryConfigured
-              ? html`
+          ${summaryConfigured
+            ? html`
                 <button
                   class="btn btn--sm"
                   @click=${onEditProfile}
@@ -141,16 +138,13 @@ export function renderNostrCard(params: {
                   Edit Profile
                 </button>
               `
-              : nothing
-          }
+            : nothing}
         </div>
-        ${
-          hasAnyProfileData
-            ? html`
+        ${hasAnyProfileData
+          ? html`
               <div class="status-list">
-                ${
-                  picture
-                    ? html`
+                ${picture
+                  ? html`
                       <div style="margin-bottom: 8px;">
                         <img
                           src=${picture}
@@ -162,43 +156,33 @@ export function renderNostrCard(params: {
                         />
                       </div>
                     `
-                    : nothing
-                }
-                ${
-                  name
-                    ? html`<div><span class="label">Name</span><span>${name}</span></div>`
-                    : nothing
-                }
-                ${
-                  displayName
-                    ? html`<div>
+                  : nothing}
+                ${name
+                  ? html`<div><span class="label">Name</span><span>${name}</span></div>`
+                  : nothing}
+                ${displayName
+                  ? html`<div>
                       <span class="label">Display Name</span><span>${displayName}</span>
                     </div>`
-                    : nothing
-                }
-                ${
-                  about
-                    ? html`<div>
+                  : nothing}
+                ${about
+                  ? html`<div>
                       <span class="label">About</span
                       ><span style="max-width: 300px; overflow: hidden; text-overflow: ellipsis;"
                         >${about}</span
                       >
                     </div>`
-                    : nothing
-                }
-                ${
-                  nip05
-                    ? html`<div><span class="label">NIP-05</span><span>${nip05}</span></div>`
-                    : nothing
-                }
+                  : nothing}
+                ${nip05
+                  ? html`<div><span class="label">NIP-05</span><span>${nip05}</span></div>`
+                  : nothing}
               </div>
             `
-            : html`
-                <div style="color: var(--text-muted); font-size: 13px">
-                  No profile set. Click "Edit Profile" to add your name, bio, and avatar.
-                </div>
-              `
-        }
+          : html`
+              <div style="color: var(--text-muted); font-size: 13px">
+                No profile set. Click "Edit Profile" to add your name, bio, and avatar.
+              </div>
+            `}
       </div>
     `;
   };
@@ -208,14 +192,13 @@ export function renderNostrCard(params: {
       <div class="card-title">Nostr</div>
       <div class="card-sub">Decentralized DMs via Nostr relays (NIP-04).</div>
       ${accountCountLabel}
-      ${
-        hasMultipleAccounts
-          ? html`
+      ${hasMultipleAccounts
+        ? html`
             <div class="account-card-list">
               ${nostrAccounts.map((account) => renderAccountCard(account))}
             </div>
           `
-          : html`
+        : html`
             <div class="status-list" style="margin-top: 16px;">
               <div>
                 <span class="label">Configured</span>
@@ -238,13 +221,10 @@ export function renderNostrCard(params: {
                 >
               </div>
             </div>
-          `
-      }
-      ${
-        summaryLastError
-          ? html`<div class="callout danger" style="margin-top: 12px;">${summaryLastError}</div>`
-          : nothing
-      }
+          `}
+      ${summaryLastError
+        ? html`<div class="callout danger" style="margin-top: 12px;">${summaryLastError}</div>`
+        : nothing}
       ${renderProfileSection()} ${renderChannelConfigSection({ channelId: "nostr", props })}
 
       <div class="row" style="margin-top: 12px;">
diff --git a/ui/src/ui/views/channels.shared.ts b/ui/src/ui/views/channels.shared.ts
index a019a2b8dcc..4e3daa30e16 100644
--- a/ui/src/ui/views/channels.shared.ts
+++ b/ui/src/ui/views/channels.shared.ts
@@ -120,11 +120,9 @@ export function renderSingleAccountChannelCard(params: {
         )}
       </div>
 
-      ${
-        params.lastError
-          ? html`<div class="callout danger" style="margin-top: 12px;">${params.lastError}</div>`
-          : nothing
-      }
+      ${params.lastError
+        ? html`<div class="callout danger" style="margin-top: 12px;">${params.lastError}</div>`
+        : nothing}
       ${params.secondaryCallout ?? nothing} ${params.extraContent ?? nothing}
       ${params.configSection} ${params.footer ?? nothing}
     </div>
diff --git a/ui/src/ui/views/channels.telegram.ts b/ui/src/ui/views/channels.telegram.ts
index ec58e98edd9..0b535fe7b2a 100644
--- a/ui/src/ui/views/channels.telegram.ts
+++ b/ui/src/ui/views/channels.telegram.ts
@@ -41,16 +41,14 @@ export function renderTelegramCard(params: {
           <div>
             <span class="label">Last inbound</span>
             <span
-              >${
-                account.lastInboundAt ? formatRelativeTimestamp(account.lastInboundAt) : "n/a"
-              }</span
+              >${account.lastInboundAt
+                ? formatRelativeTimestamp(account.lastInboundAt)
+                : "n/a"}</span
             >
           </div>
-          ${
-            account.lastError
-              ? html` <div class="account-card-error">${account.lastError}</div> `
-              : nothing
-          }
+          ${account.lastError
+            ? html` <div class="account-card-error">${account.lastError}</div> `
+            : nothing}
         </div>
       </div>
     `;
@@ -67,19 +65,15 @@ export function renderTelegramCard(params: {
           ${telegramAccounts.map((account) => renderAccountCard(account))}
         </div>
 
-        ${
-          telegram?.lastError
-            ? html`<div class="callout danger" style="margin-top: 12px;">${telegram.lastError}</div>`
-            : nothing
-        }
-        ${
-          telegram?.probe
-            ? html`<div class="callout" style="margin-top: 12px;">
+        ${telegram?.lastError
+          ? html`<div class="callout danger" style="margin-top: 12px;">${telegram.lastError}</div>`
+          : nothing}
+        ${telegram?.probe
+          ? html`<div class="callout" style="margin-top: 12px;">
               Probe ${telegram.probe.ok ? "ok" : "failed"} · ${telegram.probe.status ?? ""}
               ${telegram.probe.error ?? ""}
             </div>`
-            : nothing
-        }
+          : nothing}
         ${renderChannelConfigSection({ channelId: "telegram", props })}
 
         <div class="row" style="margin-top: 12px;">
diff --git a/ui/src/ui/views/channels.ts b/ui/src/ui/views/channels.ts
index 8449c7b09e2..e21c3f7f665 100644
--- a/ui/src/ui/views/channels.ts
+++ b/ui/src/ui/views/channels.ts
@@ -82,11 +82,9 @@ export function renderChannels(props: ChannelsProps) {
           ${props.lastSuccessAt ? formatRelativeTimestamp(props.lastSuccessAt) : "n/a"}
         </div>
       </div>
-      ${
-        props.lastError
-          ? html`<div class="callout danger" style="margin-top: 12px;">${props.lastError}</div>`
-          : nothing
-      }
+      ${props.lastError
+        ? html`<div class="callout danger" style="margin-top: 12px;">${props.lastError}</div>`
+        : nothing}
       <pre class="code-block" style="margin-top: 12px;">
 ${props.snapshot ? JSON.stringify(props.snapshot, null, 2) : "No snapshot yet."}
       </pre
@@ -200,14 +198,13 @@ function renderGenericChannelCard(
       <div class="card-title">${label}</div>
       <div class="card-sub">Channel status and configuration.</div>
       ${accountCountLabel}
-      ${
-        accounts.length > 0
-          ? html`
+      ${accounts.length > 0
+        ? html`
             <div class="account-card-list">
               ${accounts.map((account) => renderGenericAccount(account))}
             </div>
           `
-          : html`
+        : html`
             <div class="status-list" style="margin-top: 16px;">
               <div>
                 <span class="label">Configured</span>
@@ -222,13 +219,10 @@ function renderGenericChannelCard(
                 <span>${formatNullableBoolean(displayState.connected)}</span>
               </div>
             </div>
-          `
-      }
-      ${
-        lastError
-          ? html`<div class="callout danger" style="margin-top: 12px;">${lastError}</div>`
-          : nothing
-      }
+          `}
+      ${lastError
+        ? html`<div class="callout danger" style="margin-top: 12px;">${lastError}</div>`
+        : nothing}
       ${renderChannelConfigSection({ channelId: key, props })}
     </div>
   `;
@@ -311,11 +305,9 @@ function renderGenericAccount(account: ChannelAccountSnapshot) {
             >${account.lastInboundAt ? formatRelativeTimestamp(account.lastInboundAt) : "n/a"}</span
           >
         </div>
-        ${
-          account.lastError
-            ? html` <div class="account-card-error">${account.lastError}</div> `
-            : nothing
-        }
+        ${account.lastError
+          ? html` <div class="account-card-error">${account.lastError}</div> `
+          : nothing}
       </div>
     </div>
   `;
diff --git a/ui/src/ui/views/channels.whatsapp.ts b/ui/src/ui/views/channels.whatsapp.ts
index 9aa3db874c2..2ecdfb42986 100644
--- a/ui/src/ui/views/channels.whatsapp.ts
+++ b/ui/src/ui/views/channels.whatsapp.ts
@@ -43,18 +43,14 @@ export function renderWhatsAppCard(params: {
     ],
     lastError: whatsapp?.lastError,
     extraContent: html`
-      ${
-        props.whatsappMessage
-          ? html`<div class="callout" style="margin-top: 12px;">${props.whatsappMessage}</div>`
-          : nothing
-      }
-      ${
-        props.whatsappQrDataUrl
-          ? html`<div class="qr-wrap">
+      ${props.whatsappMessage
+        ? html`<div class="callout" style="margin-top: 12px;">${props.whatsappMessage}</div>`
+        : nothing}
+      ${props.whatsappQrDataUrl
+        ? html`<div class="qr-wrap">
             <img src=${props.whatsappQrDataUrl} alt="WhatsApp QR" />
           </div>`
-          : nothing
-      }
+        : nothing}
     `,
     configSection: renderChannelConfigSection({ channelId: "whatsapp", props }),
     footer: html`<div class="row" style="margin-top: 14px; flex-wrap: wrap;">
diff --git a/ui/src/ui/views/chat.ts b/ui/src/ui/views/chat.ts
index 6f3325c1959..a221e857658 100644
--- a/ui/src/ui/views/chat.ts
+++ b/ui/src/ui/views/chat.ts
@@ -642,17 +642,15 @@ function renderWelcomeState(props: ChatProps): TemplateResult {
   return html`
     <div class="agent-chat__welcome" style="--agent-color: var(--accent)">
       <div class="agent-chat__welcome-glow"></div>
-      ${
-        avatar
-          ? html`<img
+      ${avatar
+        ? html`<img
             src=${avatar}
             alt=${name}
             style="width:56px; height:56px; border-radius:50%; object-fit:cover;"
           />`
-          : html`<div class="agent-chat__avatar agent-chat__avatar--logo">
+        : html`<div class="agent-chat__avatar agent-chat__avatar--logo">
             <img src=${logoUrl} alt="OpenClaw" />
-          </div>`
-      }
+          </div>`}
       <h2>${name}</h2>
       <div class="agent-chat__badges">
         <span class="agent-chat__badge"><img src=${logoUrl} alt="" /> Ready to chat</span>
@@ -743,9 +741,8 @@ function renderPinnedSection(
           >${icons.chevronDown}</span
         >
       </button>
-      ${
-        vs.pinnedExpanded
-          ? html`
+      ${vs.pinnedExpanded
+        ? html`
             <div class="agent-chat__pinned-list">
               ${entries.map(
                 ({ index, text, role }) => html`
@@ -771,8 +768,7 @@ function renderPinnedSection(
               )}
             </div>
           `
-          : nothing
-      }
+        : nothing}
     </div>
   `;
 }
@@ -805,11 +801,9 @@ function renderSlashMenu(
                   requestUpdate();
                 }}
               >
-                ${
-                  vs.slashMenuCommand?.icon
-                    ? html`<span class="slash-menu-icon">${icons[vs.slashMenuCommand.icon]}</span>`
-                    : nothing
-                }
+                ${vs.slashMenuCommand?.icon
+                  ? html`<span class="slash-menu-icon">${icons[vs.slashMenuCommand.icon]}</span>`
+                  : nothing}
                 <span class="slash-menu-name">${arg}</span>
                 <span class="slash-menu-desc">/${vs.slashMenuCommand?.name} ${arg}</span>
               </div>
@@ -851,9 +845,9 @@ function renderSlashMenu(
         ${entries.map(
           ({ cmd, globalIdx }) => html`
             <div
-              class="slash-menu-item ${
-                globalIdx === vs.slashMenuIndex ? "slash-menu-item--active" : ""
-              }"
+              class="slash-menu-item ${globalIdx === vs.slashMenuIndex
+                ? "slash-menu-item--active"
+                : ""}"
               role="option"
               aria-selected=${globalIdx === vs.slashMenuIndex}
               @click=${() => selectSlashCommand(cmd, props, requestUpdate)}
@@ -866,15 +860,11 @@ function renderSlashMenu(
               <span class="slash-menu-name">/${cmd.name}</span>
               ${cmd.args ? html`<span class="slash-menu-args">${cmd.args}</span>` : nothing}
               <span class="slash-menu-desc">${cmd.description}</span>
-              ${
-                cmd.argOptions?.length
-                  ? html`<span class="slash-menu-badge">${cmd.argOptions.length} options</span>`
-                  : cmd.executeLocal && !cmd.args
-                    ? html`
-                        <span class="slash-menu-badge">instant</span>
-                      `
-                    : nothing
-              }
+              ${cmd.argOptions?.length
+                ? html`<span class="slash-menu-badge">${cmd.argOptions.length} options</span>`
+                : cmd.executeLocal && !cmd.args
+                  ? html` <span class="slash-menu-badge">instant</span> `
+                  : nothing}
             </div>
           `,
         )}
@@ -954,46 +944,49 @@ export function renderChat(props: ChatProps) {
       @click=${handleCodeBlockCopy}
     >
       <div class="chat-thread-inner">
-        ${
-          props.loading
-            ? html`
-                <div class="chat-loading-skeleton" aria-label="Loading chat">
-                  <div class="chat-line assistant">
-                    <div class="chat-msg">
-                      <div class="chat-bubble">
-                        <div class="skeleton skeleton-line skeleton-line--long" style="margin-bottom: 8px"></div>
-                        <div class="skeleton skeleton-line skeleton-line--medium" style="margin-bottom: 8px"></div>
-                        <div class="skeleton skeleton-line skeleton-line--short"></div>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="chat-line user" style="margin-top: 12px">
-                    <div class="chat-msg">
-                      <div class="chat-bubble">
-                        <div class="skeleton skeleton-line skeleton-line--medium"></div>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="chat-line assistant" style="margin-top: 12px">
-                    <div class="chat-msg">
-                      <div class="chat-bubble">
-                        <div class="skeleton skeleton-line skeleton-line--long" style="margin-bottom: 8px"></div>
-                        <div class="skeleton skeleton-line skeleton-line--short"></div>
-                      </div>
+        ${props.loading
+          ? html`
+              <div class="chat-loading-skeleton" aria-label="Loading chat">
+                <div class="chat-line assistant">
+                  <div class="chat-msg">
+                    <div class="chat-bubble">
+                      <div
+                        class="skeleton skeleton-line skeleton-line--long"
+                        style="margin-bottom: 8px"
+                      ></div>
+                      <div
+                        class="skeleton skeleton-line skeleton-line--medium"
+                        style="margin-bottom: 8px"
+                      ></div>
+                      <div class="skeleton skeleton-line skeleton-line--short"></div>
                     </div>
                   </div>
                 </div>
-              `
-            : nothing
-        }
+                <div class="chat-line user" style="margin-top: 12px">
+                  <div class="chat-msg">
+                    <div class="chat-bubble">
+                      <div class="skeleton skeleton-line skeleton-line--medium"></div>
+                    </div>
+                  </div>
+                </div>
+                <div class="chat-line assistant" style="margin-top: 12px">
+                  <div class="chat-msg">
+                    <div class="chat-bubble">
+                      <div
+                        class="skeleton skeleton-line skeleton-line--long"
+                        style="margin-bottom: 8px"
+                      ></div>
+                      <div class="skeleton skeleton-line skeleton-line--short"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            `
+          : nothing}
         ${isEmpty && !vs.searchOpen ? renderWelcomeState(props) : nothing}
-        ${
-          isEmpty && vs.searchOpen
-            ? html`
-                <div class="agent-chat__empty">No matching messages</div>
-              `
-            : nothing
-        }
+        ${isEmpty && vs.searchOpen
+          ? html` <div class="agent-chat__empty">No matching messages</div> `
+          : nothing}
         ${repeat(
           chatItems,
           (item) => item.key,
@@ -1171,9 +1164,8 @@ export function renderChat(props: ChatProps) {
     >
       ${props.disabledReason ? html`<div class="callout">${props.disabledReason}</div>` : nothing}
       ${props.error ? html`<div class="callout danger">${props.error}</div>` : nothing}
-      ${
-        props.focusMode
-          ? html`
+      ${props.focusMode
+        ? html`
             <button
               class="chat-focus-exit"
               type="button"
@@ -1184,8 +1176,7 @@ export function renderChat(props: ChatProps) {
               ${icons.x}
             </button>
           `
-          : nothing
-      }
+        : nothing}
       ${renderSearchBar(requestUpdate)} ${renderPinnedSection(props, pinned, requestUpdate)}
 
       <div class="chat-split-container ${sidebarOpen ? "chat-split-container--open" : ""}">
@@ -1196,9 +1187,8 @@ export function renderChat(props: ChatProps) {
           ${thread}
         </div>
 
-        ${
-          sidebarOpen
-            ? html`
+        ${sidebarOpen
+          ? html`
               <resizable-divider
                 .splitRatio=${splitRatio}
                 @resize=${(e: CustomEvent) => props.onSplitRatioChange?.(e.detail.splitRatio)}
@@ -1217,13 +1207,11 @@ export function renderChat(props: ChatProps) {
                 })}
               </div>
             `
-            : nothing
-        }
+          : nothing}
       </div>
 
-      ${
-        props.queue.length
-          ? html`
+      ${props.queue.length
+        ? html`
             <div class="chat-queue" role="status" aria-live="polite">
               <div class="chat-queue__title">Queued (${props.queue.length})</div>
               <div class="chat-queue__list">
@@ -1231,10 +1219,8 @@ export function renderChat(props: ChatProps) {
                   (item) => html`
                     <div class="chat-queue__item">
                       <div class="chat-queue__text">
-                        ${
-                          item.text ||
-                          (item.attachments?.length ? `Image (${item.attachments.length})` : "")
-                        }
+                        ${item.text ||
+                        (item.attachments?.length ? `Image (${item.attachments.length})` : "")}
                       </div>
                       <button
                         class="btn chat-queue__remove"
@@ -1250,20 +1236,17 @@ export function renderChat(props: ChatProps) {
               </div>
             </div>
           `
-          : nothing
-      }
+        : nothing}
       ${renderFallbackIndicator(props.fallbackStatus)}
       ${renderCompactionIndicator(props.compactionStatus)}
       ${renderContextNotice(activeSession, props.sessions?.defaults?.contextTokens ?? null)}
-      ${
-        props.showNewMessages
-          ? html`
+      ${props.showNewMessages
+        ? html`
             <button class="chat-new-messages" type="button" @click=${props.onScrollToBottom}>
               ${icons.arrowDown} New messages
             </button>
           `
-          : nothing
-      }
+        : nothing}
 
       <!-- Input bar -->
       <div class="agent-chat__input">
@@ -1277,11 +1260,9 @@ export function renderChat(props: ChatProps) {
           @change=${(e: Event) => handleFileSelect(e, props)}
         />
 
-        ${
-          vs.sttRecording && vs.sttInterimText
-            ? html`<div class="agent-chat__stt-interim">${vs.sttInterimText}</div>`
-            : nothing
-        }
+        ${vs.sttRecording && vs.sttInterimText
+          ? html`<div class="agent-chat__stt-interim">${vs.sttInterimText}</div>`
+          : nothing}
 
         <textarea
           ${ref((el) => el && adjustTextareaHeight(el as HTMLTextAreaElement))}
@@ -1309,13 +1290,12 @@ export function renderChat(props: ChatProps) {
               ${icons.paperclip}
             </button>
 
-            ${
-              isSttSupported()
-                ? html`
+            ${isSttSupported()
+              ? html`
                   <button
-                    class="agent-chat__input-btn ${
-                      vs.sttRecording ? "agent-chat__input-btn--recording" : ""
-                    }"
+                    class="agent-chat__input-btn ${vs.sttRecording
+                      ? "agent-chat__input-btn--recording"
+                      : ""}"
                     @click=${() => {
                       if (vs.sttRecording) {
                         stopStt();
@@ -1362,17 +1342,15 @@ export function renderChat(props: ChatProps) {
                     ${vs.sttRecording ? icons.micOff : icons.mic}
                   </button>
                 `
-                : nothing
-            }
+              : nothing}
             ${tokens ? html`<span class="agent-chat__token-count">${tokens}</span>` : nothing}
           </div>
 
           <div class="agent-chat__toolbar-right">
             ${nothing /* search hidden for now */}
-            ${
-              canAbort
-                ? nothing
-                : html`
+            ${canAbort
+              ? nothing
+              : html`
                   <button
                     class="btn btn--ghost"
                     @click=${props.onNewSession}
@@ -1381,8 +1359,7 @@ export function renderChat(props: ChatProps) {
                   >
                     ${icons.plus}
                   </button>
-                `
-            }
+                `}
             <button
               class="btn btn--ghost"
               @click=${() => exportMarkdown(props)}
@@ -1393,9 +1370,8 @@ export function renderChat(props: ChatProps) {
               ${icons.download}
             </button>
 
-            ${
-              canAbort && (isBusy || props.sending)
-                ? html`
+            ${canAbort && (isBusy || props.sending)
+              ? html`
                   <button
                     class="chat-send-btn chat-send-btn--stop"
                     @click=${props.onAbort}
@@ -1405,7 +1381,7 @@ export function renderChat(props: ChatProps) {
                     ${icons.stop}
                   </button>
                 `
-                : html`
+              : html`
                   <button
                     class="chat-send-btn"
                     @click=${() => {
@@ -1420,8 +1396,7 @@ export function renderChat(props: ChatProps) {
                   >
                     ${icons.send}
                   </button>
-                `
-            }
+                `}
           </div>
         </div>
       </div>
diff --git a/ui/src/ui/views/command-palette.ts b/ui/src/ui/views/command-palette.ts
index fcf03015c97..7da44710aea 100644
--- a/ui/src/ui/views/command-palette.ts
+++ b/ui/src/ui/views/command-palette.ts
@@ -220,16 +220,15 @@ export function renderCommandPalette(props: CommandPaletteProps) {
           }}
         />
         <div class="cmd-palette__results">
-          ${
-            grouped.length === 0
-              ? html`<div class="cmd-palette__empty">
+          ${grouped.length === 0
+            ? html`<div class="cmd-palette__empty">
                 <span class="nav-item__icon" style="opacity:0.3;width:20px;height:20px"
                   >${icons.search}</span
                 >
                 <span>${t("overview.palette.noResults")}</span>
               </div>`
-              : grouped.map(
-                  ([category, groupedItems]) => html`
+            : grouped.map(
+                ([category, groupedItems]) => html`
                   <div class="cmd-palette__group-label">
                     ${CATEGORY_LABELS[category] ?? category}
                   </div>
@@ -247,19 +246,16 @@ export function renderCommandPalette(props: CommandPaletteProps) {
                       >
                         <span class="nav-item__icon">${icons[item.icon]}</span>
                         <span>${item.label}</span>
-                        ${
-                          item.description
-                            ? html`<span class="cmd-palette__item-desc muted"
+                        ${item.description
+                          ? html`<span class="cmd-palette__item-desc muted"
                               >${item.description}</span
                             >`
-                            : nothing
-                        }
+                          : nothing}
                       </div>
                     `;
                   })}
                 `,
-                )
-          }
+              )}
         </div>
         <div class="cmd-palette__footer">
           <span><kbd>↑↓</kbd> navigate</span>
diff --git a/ui/src/ui/views/config-form.node.ts b/ui/src/ui/views/config-form.node.ts
index 7f830526bee..f2fac6c036a 100644
--- a/ui/src/ui/views/config-form.node.ts
+++ b/ui/src/ui/views/config-form.node.ts
@@ -79,7 +79,9 @@ const icons = {
       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>
+      <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`
@@ -151,20 +153,16 @@ function renderSensitiveToggleButton(params: {
       type="button"
       class="btn btn--icon ${state.isRevealed ? "active" : ""}"
       style="width:28px;height:28px;padding:0;"
-      title=${
-        state.canReveal
-          ? state.isRevealed
-            ? "Hide value"
-            : "Reveal value"
-          : "Disable stream mode to reveal value"
-      }
-      aria-label=${
-        state.canReveal
-          ? state.isRevealed
-            ? "Hide value"
-            : "Reveal value"
-          : "Disable stream mode to reveal value"
-      }
+      title=${state.canReveal
+        ? state.isRevealed
+          ? "Hide value"
+          : "Reveal value"
+        : "Disable stream mode to reveal value"}
+      aria-label=${state.canReveal
+        ? state.isRevealed
+          ? "Hide value"
+          : "Reveal value"
+        : "Disable stream mode to reveal value"}
       aria-pressed=${state.isRevealed}
       ?disabled=${params.disabled || !state.canReveal}
       @click=${() => params.onToggleSensitivePath?.(params.path)}
@@ -539,9 +537,10 @@ export function renderNode(params: {
               (opt) => html`
                 <button
                   type="button"
-                  class="cfg-segmented__btn ${
-                    opt === resolvedValue || String(opt) === String(resolvedValue) ? "active" : ""
-                  }"
+                  class="cfg-segmented__btn ${opt === resolvedValue ||
+                  String(opt) === String(resolvedValue)
+                    ? "active"
+                    : ""}"
                   ?disabled=${disabled}
                   @click=${() => onPatch(path, opt)}
                 >
@@ -694,9 +693,8 @@ function renderTextInput(params: {
           disabled,
           onToggleSensitivePath: params.onToggleSensitivePath,
         })}
-        ${
-          schema.default !== undefined
-            ? html`
+        ${schema.default !== undefined
+          ? html`
               <button
                 type="button"
                 class="cfg-input__reset"
@@ -707,8 +705,7 @@ function renderTextInput(params: {
                 ↺
               </button>
             `
-            : nothing
-        }
+          : nothing}
       </div>
     </div>
   `;
@@ -950,24 +947,22 @@ function renderObject(params: {
         onPatch,
       }),
     )}
-    ${
-      allowExtra
-        ? renderMapField({
-            schema: additional,
-            value: obj,
-            path,
-            hints,
-            unsupported,
-            disabled,
-            reservedKeys: reserved,
-            searchCriteria: childSearchCriteria,
-            revealSensitive,
-            isSensitivePathRevealed,
-            onToggleSensitivePath,
-            onPatch,
-          })
-        : nothing
-    }
+    ${allowExtra
+      ? renderMapField({
+          schema: additional,
+          value: obj,
+          path,
+          hints,
+          unsupported,
+          disabled,
+          reservedKeys: reserved,
+          searchCriteria: childSearchCriteria,
+          revealSensitive,
+          isSensitivePathRevealed,
+          onToggleSensitivePath,
+          onPatch,
+        })
+      : nothing}
   `;
 
   // For top-level, don't wrap in collapsible
@@ -1064,12 +1059,9 @@ function renderArray(params: {
         </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`
+      ${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`
@@ -1110,8 +1102,7 @@ function renderArray(params: {
                 `,
               )}
             </div>
-          `
-      }
+          `}
     </div>
   `;
 }
@@ -1184,12 +1175,9 @@ function renderMapField(params: {
         </button>
       </div>
 
-      ${
-        visibleEntries.length === 0
-          ? html`
-              <div class="cfg-map__empty">No custom entries.</div>
-            `
-          : html`
+      ${visibleEntries.length === 0
+        ? html` <div class="cfg-map__empty">No custom entries.</div> `
+        : html`
             <div class="cfg-map__items">
               ${visibleEntries.map(([key, entryValue]) => {
                 const valuePath = [...path, key];
@@ -1241,17 +1229,16 @@ function renderMapField(params: {
                       </button>
                     </div>
                     <div class="cfg-map__item-value">
-                      ${
-                        anySchema
-                          ? html`
+                      ${anySchema
+                        ? html`
                             <div class="cfg-input-wrap">
                               <textarea
-                                class="cfg-textarea cfg-textarea--sm${
-                                  sensitiveState.isRedacted ? " cfg-textarea--redacted" : ""
-                                }"
-                                placeholder=${
-                                  sensitiveState.isRedacted ? REDACTED_PLACEHOLDER : "JSON value"
-                                }
+                                class="cfg-textarea cfg-textarea--sm${sensitiveState.isRedacted
+                                  ? " cfg-textarea--redacted"
+                                  : ""}"
+                                placeholder=${sensitiveState.isRedacted
+                                  ? REDACTED_PLACEHOLDER
+                                  : "JSON value"}
                                 rows="2"
                                 .value=${sensitiveState.isRedacted ? "" : fallback}
                                 ?disabled=${disabled}
@@ -1286,28 +1273,26 @@ function renderMapField(params: {
                               })}
                             </div>
                           `
-                          : renderNode({
-                              schema,
-                              value: entryValue,
-                              path: valuePath,
-                              hints,
-                              unsupported,
-                              disabled,
-                              searchCriteria,
-                              showLabel: false,
-                              revealSensitive,
-                              isSensitivePathRevealed,
-                              onToggleSensitivePath,
-                              onPatch,
-                            })
-                      }
+                        : renderNode({
+                            schema,
+                            value: entryValue,
+                            path: valuePath,
+                            hints,
+                            unsupported,
+                            disabled,
+                            searchCriteria,
+                            showLabel: false,
+                            revealSensitive,
+                            isSensitivePathRevealed,
+                            onToggleSensitivePath,
+                            onPatch,
+                          })}
                     </div>
                   </div>
                 `;
               })}
             </div>
-          `
-      }
+          `}
     </div>
   `;
 }
diff --git a/ui/src/ui/views/config-form.render.ts b/ui/src/ui/views/config-form.render.ts
index d8c41b39904..a596fb922a7 100644
--- a/ui/src/ui/views/config-form.render.ts
+++ b/ui/src/ui/views/config-form.render.ts
@@ -360,16 +360,12 @@ function matchesSearch(params: {
 
 export function renderConfigForm(props: ConfigFormProps) {
   if (!props.schema) {
-    return html`
-      <div class="muted">Schema unavailable.</div>
-    `;
+    return html` <div class="muted">Schema unavailable.</div> `;
   }
   const schema = props.schema;
   const value = props.value ?? {};
   if (schemaType(schema) !== "object" || !schema.properties) {
-    return html`
-      <div class="callout danger">Unsupported schema. Use Raw.</div>
-    `;
+    return html` <div class="callout danger">Unsupported schema. Use Raw.</div> `;
   }
   const unsupported = new Set(props.unsupportedPaths ?? []);
   const properties = schema.properties;
@@ -449,11 +445,9 @@ export function renderConfigForm(props: ConfigFormProps) {
         <span class="config-section-card__icon">${getSectionIcon(params.sectionKey)}</span>
         <div class="config-section-card__titles">
           <h3 class="config-section-card__title">${params.label}</h3>
-          ${
-            params.description
-              ? html`<p class="config-section-card__desc">${params.description}</p>`
-              : nothing
-          }
+          ${params.description
+            ? html`<p class="config-section-card__desc">${params.description}</p>`
+            : nothing}
         </div>
       </div>
       <div class="config-section-card__content">
@@ -477,45 +471,43 @@ export function renderConfigForm(props: ConfigFormProps) {
 
   return html`
     <div class="config-form config-form--modern">
-      ${
-        subsectionContext
-          ? (() => {
-              const { sectionKey, subsectionKey, schema: node } = subsectionContext;
-              const hint = hintForPath([sectionKey, subsectionKey], props.uiHints);
-              const label = hint?.label ?? node.title ?? humanize(subsectionKey);
-              const description = hint?.help ?? node.description ?? "";
-              const sectionValue = value[sectionKey];
-              const scopedValue =
-                sectionValue && typeof sectionValue === "object"
-                  ? (sectionValue as Record<string, unknown>)[subsectionKey]
-                  : undefined;
-              return renderSectionCard({
-                id: `config-section-${sectionKey}-${subsectionKey}`,
-                sectionKey,
-                label,
-                description,
-                node,
-                nodeValue: scopedValue,
-                path: [sectionKey, subsectionKey],
-              });
-            })()
-          : filteredEntries.map(([key, node]) => {
-              const meta = SECTION_META[key] ?? {
-                label: key.charAt(0).toUpperCase() + key.slice(1),
-                description: node.description ?? "",
-              };
+      ${subsectionContext
+        ? (() => {
+            const { sectionKey, subsectionKey, schema: node } = subsectionContext;
+            const hint = hintForPath([sectionKey, subsectionKey], props.uiHints);
+            const label = hint?.label ?? node.title ?? humanize(subsectionKey);
+            const description = hint?.help ?? node.description ?? "";
+            const sectionValue = value[sectionKey];
+            const scopedValue =
+              sectionValue && typeof sectionValue === "object"
+                ? (sectionValue as Record<string, unknown>)[subsectionKey]
+                : undefined;
+            return renderSectionCard({
+              id: `config-section-${sectionKey}-${subsectionKey}`,
+              sectionKey,
+              label,
+              description,
+              node,
+              nodeValue: scopedValue,
+              path: [sectionKey, subsectionKey],
+            });
+          })()
+        : filteredEntries.map(([key, node]) => {
+            const meta = SECTION_META[key] ?? {
+              label: key.charAt(0).toUpperCase() + key.slice(1),
+              description: node.description ?? "",
+            };
 
-              return renderSectionCard({
-                id: `config-section-${key}`,
-                sectionKey: key,
-                label: meta.label,
-                description: meta.description,
-                node,
-                nodeValue: value[key],
-                path: [key],
-              });
-            })
-      }
+            return renderSectionCard({
+              id: `config-section-${key}`,
+              sectionKey: key,
+              label: meta.label,
+              description: meta.description,
+              node,
+              nodeValue: value[key],
+              path: [key],
+            });
+          })}
     </div>
   `;
 }
diff --git a/ui/src/ui/views/config.ts b/ui/src/ui/views/config.ts
index f37de6f7d84..c070fcaea63 100644
--- a/ui/src/ui/views/config.ts
+++ b/ui/src/ui/views/config.ts
@@ -578,9 +578,9 @@ function renderAppearanceSection(props: ConfigProps) {
           ${THEME_OPTIONS.map(
             (opt) => html`
               <button
-                class="settings-theme-card ${
-                  opt.id === props.theme ? "settings-theme-card--active" : ""
-                }"
+                class="settings-theme-card ${opt.id === props.theme
+                  ? "settings-theme-card--active"
+                  : ""}"
                 title=${opt.description}
                 @click=${(e: Event) => {
                   if (opt.id !== props.theme) {
@@ -593,13 +593,11 @@ function renderAppearanceSection(props: ConfigProps) {
               >
                 <span class="settings-theme-card__icon" aria-hidden="true">${opt.icon}</span>
                 <span class="settings-theme-card__label">${opt.label}</span>
-                ${
-                  opt.id === props.theme
-                    ? html`<span class="settings-theme-card__check" aria-hidden="true"
+                ${opt.id === props.theme
+                  ? html`<span class="settings-theme-card__check" aria-hidden="true"
                       >${icons.check}</span
                     >`
-                    : nothing
-                }
+                  : nothing}
               </button>
             `,
           )}
@@ -646,16 +644,14 @@ function renderAppearanceSection(props: ConfigProps) {
               ${props.connected ? "Connected" : "Offline"}
             </span>
           </div>
-          ${
-            props.assistantName
-              ? html`
+          ${props.assistantName
+            ? html`
                 <div class="settings-info-row">
                   <span class="settings-info-row__label">Assistant</span>
                   <span class="settings-info-row__value">${props.assistantName}</span>
                 </div>
               `
-              : nothing
-          }
+            : nothing}
         </div>
       </div>
     </div>
@@ -790,9 +786,8 @@ export function renderConfig(props: ConfigProps) {
       <main class="config-main">
         <div class="config-actions">
           <div class="config-actions__left">
-            ${
-              showModeToggle
-                ? html`
+            ${showModeToggle
+              ? html`
                   <div class="config-mode-toggle">
                     <button
                       class="config-mode-toggle__btn ${formMode === "form" ? "active" : ""}"
@@ -810,28 +805,20 @@ export function renderConfig(props: ConfigProps) {
                     </button>
                   </div>
                 `
-                : nothing
-            }
-            ${
-              hasChanges
-                ? html`
+              : nothing}
+            ${hasChanges
+              ? html`
                   <span class="config-changes-badge"
-                    >${
-                      formMode === "raw"
-                        ? "Unsaved changes"
-                        : `${diff.length} unsaved change${diff.length !== 1 ? "s" : ""}`
-                    }</span
+                    >${formMode === "raw"
+                      ? "Unsaved changes"
+                      : `${diff.length} unsaved change${diff.length !== 1 ? "s" : ""}`}</span
                   >
                 `
-                : html`
-                    <span class="config-status muted">No changes</span>
-                  `
-            }
+              : html` <span class="config-status muted">No changes</span> `}
           </div>
           <div class="config-actions__right">
-            ${
-              props.onOpenFile
-                ? html`
+            ${props.onOpenFile
+              ? html`
                   <button
                     class="btn btn--sm"
                     title=${props.configPath ? `Open ${props.configPath}` : "Open config file"}
@@ -840,8 +827,7 @@ export function renderConfig(props: ConfigProps) {
                     ${icons.fileText} Open
                   </button>
                 `
-                : nothing
-            }
+              : nothing}
             <button class="btn btn--sm" ?disabled=${props.loading} @click=${props.onReload}>
               ${props.loading ? "Loading…" : "Reload"}
             </button>
@@ -858,9 +844,8 @@ export function renderConfig(props: ConfigProps) {
         </div>
 
         <div class="config-top-tabs">
-          ${
-            formMode === "form"
-              ? html`
+          ${formMode === "form"
+            ? html`
                 <div class="config-search config-search--top">
                   <div class="config-search__input-row">
                     <svg
@@ -882,9 +867,8 @@ export function renderConfig(props: ConfigProps) {
                       @input=${(e: Event) =>
                         props.onSearchChange((e.target as HTMLInputElement).value)}
                     />
-                    ${
-                      props.searchQuery
-                        ? html`
+                    ${props.searchQuery
+                      ? html`
                           <button
                             class="config-search__clear"
                             aria-label="Clear search"
@@ -893,13 +877,11 @@ export function renderConfig(props: ConfigProps) {
                             ×
                           </button>
                         `
-                        : nothing
-                    }
+                      : nothing}
                   </div>
                 </div>
               `
-              : nothing
-          }
+            : nothing}
 
           <div class="config-top-tabs__scroller" role="tablist" aria-label="Settings sections">
             ${topTabs.map(
@@ -918,9 +900,8 @@ export function renderConfig(props: ConfigProps) {
           </div>
         </div>
 
-        ${
-          validity === "invalid" && !cvs.validityDismissed
-            ? html`
+        ${validity === "invalid" && !cvs.validityDismissed
+          ? html`
               <div class="config-validity-warning">
                 <svg
                   class="config-validity-warning__icon"
@@ -953,13 +934,11 @@ export function renderConfig(props: ConfigProps) {
                 </button>
               </div>
             `
-            : nothing
-        }
+          : nothing}
 
         <!-- Diff panel (form mode only - raw mode doesn't have granular diff) -->
-        ${
-          hasChanges && formMode === "form"
-            ? html`
+        ${hasChanges && formMode === "form"
+          ? html`
               <details class="config-diff">
                 <summary class="config-diff__summary">
                   <span>View ${diff.length} pending change${diff.length !== 1 ? "s" : ""}</span>
@@ -993,32 +972,27 @@ export function renderConfig(props: ConfigProps) {
                 </div>
               </details>
             `
-            : nothing
-        }
-        ${
-          activeSectionMeta && formMode === "form"
-            ? html`
+          : nothing}
+        ${activeSectionMeta && formMode === "form"
+          ? html`
               <div class="config-section-hero">
                 <div class="config-section-hero__icon">
                   ${getSectionIcon(props.activeSection ?? "")}
                 </div>
                 <div class="config-section-hero__text">
                   <div class="config-section-hero__title">${activeSectionMeta.label}</div>
-                  ${
-                    activeSectionMeta.description
-                      ? html`<div class="config-section-hero__desc">
+                  ${activeSectionMeta.description
+                    ? html`<div class="config-section-hero__desc">
                         ${activeSectionMeta.description}
                       </div>`
-                      : nothing
-                  }
+                    : nothing}
                 </div>
-                ${
-                  props.activeSection === "env"
-                    ? html`
+                ${props.activeSection === "env"
+                  ? html`
                       <button
-                        class="config-env-peek-btn ${
-                          envSensitiveVisible ? "config-env-peek-btn--active" : ""
-                        }"
+                        class="config-env-peek-btn ${envSensitiveVisible
+                          ? "config-env-peek-btn--active"
+                          : ""}"
                         title=${envSensitiveVisible ? "Hide env values" : "Reveal env values"}
                         @click=${() => {
                           cvs.envRevealed = !cvs.envRevealed;
@@ -1041,83 +1015,75 @@ export function renderConfig(props: ConfigProps) {
                         Peek
                       </button>
                     `
-                    : nothing
-                }
+                  : nothing}
               </div>
             `
-            : nothing
-        }
+          : nothing}
         <!-- Form content -->
         <div class="config-content">
-          ${
-            props.activeSection === "__appearance__"
-              ? includeVirtualSections
-                ? renderAppearanceSection(props)
-                : nothing
-              : formMode === "form"
-                ? html`
+          ${props.activeSection === "__appearance__"
+            ? includeVirtualSections
+              ? renderAppearanceSection(props)
+              : nothing
+            : formMode === "form"
+              ? html`
                   ${showAppearanceOnRoot ? renderAppearanceSection(props) : nothing}
-                  ${
-                    props.schemaLoading
+                  ${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,
+                        activeSubsection: effectiveSubsection,
+                        revealSensitive:
+                          props.activeSection === "env" ? envSensitiveVisible : false,
+                        isSensitivePathRevealed,
+                        onToggleSensitivePath: (path) => {
+                          toggleSensitivePathReveal(path);
+                          requestUpdate();
+                        },
+                      })}
+                `
+              : (() => {
+                  const sensitiveCount = countSensitiveConfigValues(
+                    props.formValue,
+                    [],
+                    props.uiHints,
+                  );
+                  const blurred = sensitiveCount > 0 && !cvs.rawRevealed;
+                  return html`
+                    ${formUnsafe
                       ? html`
-                          <div class="config-loading">
-                            <div class="config-loading__spinner"></div>
-                            <span>Loading schema…</span>
+                          <div class="callout info" style="margin-bottom: 12px">
+                            Your config contains fields the form editor can't safely represent. Use
+                            Raw mode to edit those entries.
                           </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,
-                          activeSubsection: effectiveSubsection,
-                          revealSensitive:
-                            props.activeSection === "env" ? envSensitiveVisible : false,
-                          isSensitivePathRevealed,
-                          onToggleSensitivePath: (path) => {
-                            toggleSensitivePathReveal(path);
-                            requestUpdate();
-                          },
-                        })
-                  }
-                `
-                : (() => {
-                    const sensitiveCount = countSensitiveConfigValues(
-                      props.formValue,
-                      [],
-                      props.uiHints,
-                    );
-                    const blurred = sensitiveCount > 0 && !cvs.rawRevealed;
-                    return html`
-                    ${
-                      formUnsafe
-                        ? html`
-                            <div class="callout info" style="margin-bottom: 12px">
-                              Your config contains fields the form editor can't safely represent. Use Raw mode to edit those
-                              entries.
-                            </div>
-                          `
-                        : nothing
-                    }
+                      : nothing}
                     <div class="field config-raw-field">
                       <span style="display:flex;align-items:center;gap:8px;">
                         Raw config (JSON/JSON5)
-                        ${
-                          sensitiveCount > 0
-                            ? html`
+                        ${sensitiveCount > 0
+                          ? html`
                               <span class="pill pill--sm"
                                 >${sensitiveCount} secret${sensitiveCount === 1 ? "" : "s"}
                                 ${blurred ? "redacted" : "visible"}</span
                               >
                               <button
                                 class="btn btn--icon config-raw-toggle ${blurred ? "" : "active"}"
-                                title=${
-                                  blurred ? "Reveal sensitive values" : "Hide sensitive values"
-                                }
+                                title=${blurred
+                                  ? "Reveal sensitive values"
+                                  : "Hide sensitive values"}
                                 aria-label="Toggle raw config redaction"
                                 aria-pressed=${!blurred}
                                 @click=${() => {
@@ -1128,18 +1094,16 @@ export function renderConfig(props: ConfigProps) {
                                 ${blurred ? icons.eyeOff : icons.eye}
                               </button>
                             `
-                            : nothing
-                        }
+                          : nothing}
                       </span>
-                      ${
-                        blurred
-                          ? html`
+                      ${blurred
+                        ? html`
                             <div class="callout info" style="margin-top: 12px">
                               ${sensitiveCount} sensitive value${sensitiveCount === 1 ? "" : "s"}
                               hidden. Use the reveal button above to edit the raw config.
                             </div>
                           `
-                          : html`
+                        : html`
                             <textarea
                               placeholder="Raw config (JSON/JSON5)"
                               .value=${props.raw}
@@ -1147,21 +1111,17 @@ export function renderConfig(props: ConfigProps) {
                                 props.onRawChange((e.target as HTMLTextAreaElement).value);
                               }}
                             ></textarea>
-                          `
-                      }
+                          `}
                     </div>
                   `;
-                  })()
-          }
+                })()}
         </div>
 
-        ${
-          props.issues.length > 0
-            ? html`<div class="callout danger" style="margin-top: 12px;">
+        ${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
-        }
+          : nothing}
       </main>
     </div>
   `;
diff --git a/ui/src/ui/views/cron.ts b/ui/src/ui/views/cron.ts
index b6632b35667..3d19cdb6d64 100644
--- a/ui/src/ui/views/cron.ts
+++ b/ui/src/ui/views/cron.ts
@@ -341,14 +341,12 @@ function focusFormField(id: string) {
 function renderFieldLabel(text: string, required = false) {
   return html`<span>
     ${text}
-    ${
-      required
-        ? html`
+    ${required
+      ? html`
           <span class="cron-required-marker" aria-hidden="true">*</span>
           <span class="cron-required-sr">${t("cron.form.requiredSr")}</span>
         `
-        : nothing
-    }
+      : nothing}
   </span>`;
 }
 
@@ -402,13 +400,11 @@ export function renderCron(props: CronProps) {
           <div class="cron-summary-label">${t("cron.summary.enabled")}</div>
           <div class="cron-summary-value">
             <span class=${`chip ${props.status?.enabled ? "chip-ok" : "chip-danger"}`}>
-              ${
-                props.status
-                  ? props.status.enabled
-                    ? t("cron.summary.yes")
-                    : t("cron.summary.no")
-                  : t("common.na")
-              }
+              ${props.status
+                ? props.status.enabled
+                  ? t("cron.summary.yes")
+                  : t("cron.summary.no")
+                : t("common.na")}
             </span>
           </div>
         </div>
@@ -547,18 +543,15 @@ export function renderCron(props: CronProps) {
               </button>
             </label>
           </div>
-          ${
-            props.jobs.length === 0
-              ? html` <div class="muted" style="margin-top: 12px">${t("cron.jobs.noMatching")}</div> `
-              : html`
+          ${props.jobs.length === 0
+            ? html` <div class="muted" style="margin-top: 12px">${t("cron.jobs.noMatching")}</div> `
+            : html`
                 <div class="list" style="margin-top: 12px;">
                   ${props.jobs.map((job) => renderJob(job, props))}
                 </div>
-              `
-          }
-          ${
-            props.jobsHasMore
-              ? html`
+              `}
+          ${props.jobsHasMore
+            ? html`
                 <div class="row" style="margin-top: 12px">
                   <button
                     class="btn"
@@ -569,8 +562,7 @@ export function renderCron(props: CronProps) {
                   </button>
                 </div>
               `
-              : nothing
-          }
+            : nothing}
         </section>
 
         <section class="card">
@@ -581,11 +573,9 @@ export function renderCron(props: CronProps) {
             <div>
               <div class="card-title">${t("cron.runs.title")}</div>
               <div class="card-sub">
-                ${
-                  props.runsScope === "all"
-                    ? t("cron.runs.subtitleAll")
-                    : t("cron.runs.subtitleJob", { title: selectedRunTitle })
-                }
+                ${props.runsScope === "all"
+                  ? t("cron.runs.subtitleAll")
+                  : t("cron.runs.subtitleJob", { title: selectedRunTitle })}
               </div>
             </div>
             <div class="muted">
@@ -676,24 +666,21 @@ export function renderCron(props: CronProps) {
               })}
             </div>
           </div>
-          ${
-            props.runsScope === "job" && props.runsJobId == null
-              ? html`
+          ${props.runsScope === "job" && props.runsJobId == null
+            ? html`
                 <div class="muted" style="margin-top: 12px">${t("cron.runs.selectJobHint")}</div>
               `
-              : runs.length === 0
-                ? html`
+            : runs.length === 0
+              ? html`
                   <div class="muted" style="margin-top: 12px">${t("cron.runs.noMatching")}</div>
                 `
-                : html`
+              : html`
                   <div class="list" style="margin-top: 12px;">
                     ${runs.map((entry) => renderRun(entry, props.basePath, props.onNavigateToChat))}
                   </div>
-                `
-          }
-          ${
-            (props.runsScope === "all" || props.runsJobId != null) && props.runsHasMore
-              ? html`
+                `}
+          ${(props.runsScope === "all" || props.runsJobId != null) && props.runsHasMore
+            ? html`
                 <div class="row" style="margin-top: 12px">
                   <button
                     class="btn"
@@ -704,8 +691,7 @@ export function renderCron(props: CronProps) {
                   </button>
                 </div>
               `
-              : nothing
-          }
+            : nothing}
         </section>
       </div>
 
@@ -847,16 +833,13 @@ export function renderCron(props: CronProps) {
                   <option value="agentTurn">${t("cron.form.agentTurn")}</option>
                 </select>
                 <div class="cron-help">
-                  ${
-                    props.form.payloadKind === "systemEvent"
-                      ? t("cron.form.systemEventHelp")
-                      : t("cron.form.agentTurnHelp")
-                  }
+                  ${props.form.payloadKind === "systemEvent"
+                    ? t("cron.form.systemEventHelp")
+                    : t("cron.form.agentTurnHelp")}
                 </div>
               </label>
-              ${
-                isAgentTurn
-                  ? html`
+              ${isAgentTurn
+                ? html`
                     <label class="field">
                       ${renderFieldLabel(t("cron.form.timeoutSeconds"))}
                       <input
@@ -881,8 +864,7 @@ export function renderCron(props: CronProps) {
                       )}
                     </label>
                   `
-                  : nothing
-              }
+                : nothing}
             </div>
             <label class="field cron-span-2">
               ${renderFieldLabel(
@@ -923,19 +905,16 @@ export function renderCron(props: CronProps) {
                         .value as CronFormState["deliveryMode"],
                     })}
                 >
-                  ${
-                    supportsAnnounce
-                      ? html` <option value="announce">${t("cron.form.announceDefault")}</option> `
-                      : nothing
-                  }
+                  ${supportsAnnounce
+                    ? html` <option value="announce">${t("cron.form.announceDefault")}</option> `
+                    : nothing}
                   <option value="webhook">${t("cron.form.webhookPost")}</option>
                   <option value="none">${t("cron.form.noneInternal")}</option>
                 </select>
                 <div class="cron-help">${t("cron.form.deliveryHelp")}</div>
               </label>
-              ${
-                selectedDeliveryMode !== "none"
-                  ? html`
+              ${selectedDeliveryMode !== "none"
+                ? html`
                     <label class="field ${selectedDeliveryMode === "webhook" ? "cron-span-2" : ""}">
                       ${renderFieldLabel(
                         selectedDeliveryMode === "webhook"
@@ -943,9 +922,8 @@ export function renderCron(props: CronProps) {
                           : t("cron.form.channel"),
                         selectedDeliveryMode === "webhook",
                       )}
-                      ${
-                        selectedDeliveryMode === "webhook"
-                          ? html`
+                      ${selectedDeliveryMode === "webhook"
+                        ? html`
                             <input
                               id="cron-delivery-to"
                               .value=${props.form.deliveryTo}
@@ -963,7 +941,7 @@ export function renderCron(props: CronProps) {
                               placeholder=${t("cron.form.webhookPlaceholder")}
                             />
                           `
-                          : html`
+                        : html`
                             <select
                               id="cron-delivery-channel"
                               .value=${props.form.deliveryChannel || "last"}
@@ -979,17 +957,13 @@ export function renderCron(props: CronProps) {
                                   </option>`,
                               )}
                             </select>
-                          `
-                      }
-                      ${
-                        selectedDeliveryMode === "announce"
-                          ? html` <div class="cron-help">${t("cron.form.channelHelp")}</div> `
-                          : html` <div class="cron-help">${t("cron.form.webhookHelp")}</div> `
-                      }
+                          `}
+                      ${selectedDeliveryMode === "announce"
+                        ? html` <div class="cron-help">${t("cron.form.channelHelp")}</div> `
+                        : html` <div class="cron-help">${t("cron.form.webhookHelp")}</div> `}
                     </label>
-                    ${
-                      selectedDeliveryMode === "announce"
-                        ? html`
+                    ${selectedDeliveryMode === "announce"
+                      ? html`
                           <label class="field cron-span-2">
                             ${renderFieldLabel(t("cron.form.to"))}
                             <input
@@ -1005,19 +979,15 @@ export function renderCron(props: CronProps) {
                             <div class="cron-help">${t("cron.form.toHelp")}</div>
                           </label>
                         `
-                        : nothing
-                    }
-                    ${
-                      selectedDeliveryMode === "webhook"
-                        ? renderFieldError(
-                            props.fieldErrors.deliveryTo,
-                            errorIdForField("deliveryTo"),
-                          )
-                        : nothing
-                    }
+                      : nothing}
+                    ${selectedDeliveryMode === "webhook"
+                      ? renderFieldError(
+                          props.fieldErrors.deliveryTo,
+                          errorIdForField("deliveryTo"),
+                        )
+                      : nothing}
                   `
-                  : nothing
-              }
+                : nothing}
             </div>
           </section>
 
@@ -1062,9 +1032,8 @@ export function renderCron(props: CronProps) {
                 />
                 <div class="cron-help">Optional routing key for job delivery and wake routing.</div>
               </label>
-              ${
-                isCronSchedule
-                  ? html`
+              ${isCronSchedule
+                ? html`
                     <label class="field checkbox cron-checkbox cron-span-2">
                       <input
                         type="checkbox"
@@ -1118,11 +1087,9 @@ export function renderCron(props: CronProps) {
                       </label>
                     </div>
                   `
-                  : nothing
-              }
-              ${
-                isAgentTurn
-                  ? html`
+                : nothing}
+              ${isAgentTurn
+                ? html`
                     <label class="field cron-span-2">
                       ${renderFieldLabel("Account ID")}
                       <input
@@ -1183,11 +1150,9 @@ export function renderCron(props: CronProps) {
                       <div class="cron-help">${t("cron.form.thinkingHelp")}</div>
                     </label>
                   `
-                  : nothing
-              }
-              ${
-                isAgentTurn
-                  ? html`
+                : nothing}
+              ${isAgentTurn
+                ? html`
                     <label class="field cron-span-2">
                       ${renderFieldLabel("Failure alerts")}
                       <select
@@ -1206,9 +1171,8 @@ export function renderCron(props: CronProps) {
                         Control when this job sends repeated-failure alerts.
                       </div>
                     </label>
-                    ${
-                      props.form.failureAlertMode === "custom"
-                        ? html`
+                    ${props.form.failureAlertMode === "custom"
+                      ? html`
                           <label class="field">
                             ${renderFieldLabel("Alert after")}
                             <input
@@ -1237,9 +1201,9 @@ export function renderCron(props: CronProps) {
                             <input
                               id="cron-failure-alert-cooldown-seconds"
                               .value=${props.form.failureAlertCooldownSeconds}
-                              aria-invalid=${
-                                props.fieldErrors.failureAlertCooldownSeconds ? "true" : "false"
-                              }
+                              aria-invalid=${props.fieldErrors.failureAlertCooldownSeconds
+                                ? "true"
+                                : "false"}
                               aria-describedby=${ifDefined(
                                 props.fieldErrors.failureAlertCooldownSeconds
                                   ? errorIdForField("failureAlertCooldownSeconds")
@@ -1315,14 +1279,11 @@ export function renderCron(props: CronProps) {
                             />
                           </label>
                         `
-                        : nothing
-                    }
+                      : nothing}
                   `
-                  : nothing
-              }
-              ${
-                selectedDeliveryMode !== "none"
-                  ? html`
+                : nothing}
+              ${selectedDeliveryMode !== "none"
+                ? html`
                     <label class="field checkbox cron-checkbox cron-span-2">
                       <input
                         type="checkbox"
@@ -1338,14 +1299,12 @@ export function renderCron(props: CronProps) {
                       <div class="cron-help">${t("cron.form.bestEffortHelp")}</div>
                     </label>
                   `
-                  : nothing
-              }
+                : nothing}
             </div>
           </details>
         </div>
-        ${
-          blockedByValidation
-            ? html`
+        ${blockedByValidation
+          ? html`
               <div class="cron-form-status" role="status" aria-live="polite">
                 <div class="cron-form-status__title">${t("cron.form.cantAddYet")}</div>
                 <div class="cron-help">${t("cron.form.fillRequired")}</div>
@@ -1366,36 +1325,29 @@ export function renderCron(props: CronProps) {
                 </ul>
               </div>
             `
-            : nothing
-        }
+          : nothing}
         <div class="row cron-form-actions">
           <button
             class="btn primary"
             ?disabled=${props.busy || !props.canSubmit}
             @click=${props.onAdd}
           >
-            ${
-              props.busy
-                ? t("cron.form.saving")
-                : isEditing
-                  ? t("cron.form.saveChanges")
-                  : t("cron.form.addJob")
-            }
+            ${props.busy
+              ? t("cron.form.saving")
+              : isEditing
+                ? t("cron.form.saveChanges")
+                : t("cron.form.addJob")}
           </button>
-          ${
-            submitDisabledReason
-              ? html`<div class="cron-submit-reason" aria-live="polite">${submitDisabledReason}</div>`
-              : nothing
-          }
-          ${
-            isEditing
-              ? html`
+          ${submitDisabledReason
+            ? html`<div class="cron-submit-reason" aria-live="polite">${submitDisabledReason}</div>`
+            : nothing}
+          ${isEditing
+            ? html`
                 <button class="btn" ?disabled=${props.busy} @click=${props.onCancelEdit}>
                   ${t("cron.form.cancel")}
                 </button>
               `
-              : nothing
-          }
+            : nothing}
         </div>
       </section>
     </section>
@@ -1522,13 +1474,11 @@ function renderJob(job: CronJob, props: CronProps) {
         <div class="list-title">${job.name}</div>
         <div class="list-sub">${formatCronSchedule(job)}</div>
         ${renderJobPayload(job)}
-        ${
-          job.agentId
-            ? html`<div class="muted cron-job-agent">
+        ${job.agentId
+          ? html`<div class="muted cron-job-agent">
               ${t("cron.jobDetail.agent")}: ${job.agentId}
             </div>`
-            : nothing
-        }
+          : nothing}
       </div>
       <div class="list-meta">${renderJobState(job)}</div>
       <div class="cron-job-footer">
@@ -1639,14 +1589,12 @@ function renderJobPayload(job: CronJob) {
       <span class="cron-job-detail-label">${t("cron.jobDetail.prompt")}</span>
       <span class="muted cron-job-detail-value">${job.payload.message}</span>
     </div>
-    ${
-      delivery
-        ? html`<div class="cron-job-detail">
+    ${delivery
+      ? html`<div class="cron-job-detail">
           <span class="cron-job-detail-label">${t("cron.jobDetail.delivery")}</span>
           <span class="muted cron-job-detail-value">${delivery.mode}${deliveryTarget}</span>
         </div>`
-        : nothing
-    }
+      : nothing}
   `;
 }
 
@@ -1770,20 +1718,15 @@ function renderRun(
       </div>
       <div class="list-meta cron-run-entry__meta">
         <div>${formatMs(entry.ts)}</div>
-        ${
-          typeof entry.runAtMs === "number"
-            ? html`<div class="muted">${t("cron.runEntry.runAt")} ${formatMs(entry.runAtMs)}</div>`
-            : nothing
-        }
+        ${typeof entry.runAtMs === "number"
+          ? html`<div class="muted">${t("cron.runEntry.runAt")} ${formatMs(entry.runAtMs)}</div>`
+          : nothing}
         <div class="muted">${entry.durationMs ?? 0}ms</div>
-        ${
-          typeof entry.nextRunAtMs === "number"
-            ? html`<div class="muted">${formatRunNextLabel(entry.nextRunAtMs)}</div>`
-            : nothing
-        }
-        ${
-          chatUrl
-            ? html`<div>
+        ${typeof entry.nextRunAtMs === "number"
+          ? html`<div class="muted">${formatRunNextLabel(entry.nextRunAtMs)}</div>`
+          : nothing}
+        ${chatUrl
+          ? html`<div>
               <a
                 class="session-link"
                 href=${chatUrl}
@@ -1806,8 +1749,7 @@ function renderRun(
                 >${t("cron.runEntry.openRunChat")}</a
               >
             </div>`
-            : nothing
-        }
+          : nothing}
         ${entry.error ? html`<div class="muted">${entry.error}</div>` : nothing}
         ${entry.deliveryError ? html`<div class="muted">${entry.deliveryError}</div>` : nothing}
       </div>
diff --git a/ui/src/ui/views/debug.ts b/ui/src/ui/views/debug.ts
index 7fb2374c010..f6fc715d014 100644
--- a/ui/src/ui/views/debug.ts
+++ b/ui/src/ui/views/debug.ts
@@ -48,14 +48,12 @@ export function renderDebug(props: DebugProps) {
         <div class="stack" style="margin-top: 12px;">
           <div>
             <div class="muted">Status</div>
-            ${
-              securitySummary
-                ? html`<div class="callout ${securityTone}" style="margin-top: 8px;">
+            ${securitySummary
+              ? html`<div class="callout ${securityTone}" style="margin-top: 8px;">
                   Security audit: ${securityLabel}${info > 0 ? ` · ${info} info` : ""}. Run
                   <span class="mono">openclaw security audit --deep</span> for details.
                 </div>`
-                : nothing
-            }
+              : nothing}
             <pre class="code-block">${JSON.stringify(props.status ?? {}, null, 2)}</pre>
           </div>
           <div>
@@ -80,13 +78,9 @@ export function renderDebug(props: DebugProps) {
               @change=${(e: Event) =>
                 props.onCallMethodChange((e.target as HTMLSelectElement).value)}
             >
-              ${
-                !props.callMethod
-                  ? html`
-                      <option value="" disabled>Select a method…</option>
-                    `
-                  : nothing
-              }
+              ${!props.callMethod
+                ? html` <option value="" disabled>Select a method…</option> `
+                : nothing}
               ${props.methods.map((m) => html`<option value=${m}>${m}</option>`)}
             </select>
           </label>
@@ -103,16 +97,12 @@ export function renderDebug(props: DebugProps) {
         <div class="row" style="margin-top: 12px;">
           <button class="btn primary" @click=${props.onCall}>Call</button>
         </div>
-        ${
-          props.callError
-            ? html`<div class="callout danger" style="margin-top: 12px;">${props.callError}</div>`
-            : nothing
-        }
-        ${
-          props.callResult
-            ? html`<pre class="code-block" style="margin-top: 12px;">${props.callResult}</pre>`
-            : nothing
-        }
+        ${props.callError
+          ? html`<div class="callout danger" style="margin-top: 12px;">${props.callError}</div>`
+          : nothing}
+        ${props.callResult
+          ? html`<pre class="code-block" style="margin-top: 12px;">${props.callResult}</pre>`
+          : nothing}
       </div>
     </section>
 
@@ -127,12 +117,9 @@ ${JSON.stringify(props.models ?? [], null, 2)}</pre
     <section class="card" style="margin-top: 18px;">
       <div class="card-title">Event Log</div>
       <div class="card-sub">Latest gateway events.</div>
-      ${
-        props.eventLog.length === 0
-          ? html`
-              <div class="muted" style="margin-top: 12px">No events yet.</div>
-            `
-          : html`
+      ${props.eventLog.length === 0
+        ? html` <div class="muted" style="margin-top: 12px">No events yet.</div> `
+        : html`
             <div class="list debug-event-log" style="margin-top: 12px;">
               ${props.eventLog.map(
                 (evt) => html`
@@ -150,8 +137,7 @@ ${formatEventPayload(evt.payload)}</pre
                 `,
               )}
             </div>
-          `
-      }
+          `}
     </section>
   `;
 }
diff --git a/ui/src/ui/views/exec-approval.ts b/ui/src/ui/views/exec-approval.ts
index 237a4046105..ad5585f651f 100644
--- a/ui/src/ui/views/exec-approval.ts
+++ b/ui/src/ui/views/exec-approval.ts
@@ -39,11 +39,9 @@ export function renderExecApprovalPrompt(state: AppViewState) {
             <div class="exec-approval-title">Exec approval needed</div>
             <div class="exec-approval-sub">${remaining}</div>
           </div>
-          ${
-            queueCount > 1
-              ? html`<div class="exec-approval-queue">${queueCount} pending</div>`
-              : nothing
-          }
+          ${queueCount > 1
+            ? html`<div class="exec-approval-queue">${queueCount} pending</div>`
+            : nothing}
         </div>
         <div class="exec-approval-command mono">${request.command}</div>
         <div class="exec-approval-meta">
@@ -52,11 +50,9 @@ export function renderExecApprovalPrompt(state: AppViewState) {
           ${renderMetaRow("Resolved", request.resolvedPath)}
           ${renderMetaRow("Security", request.security)} ${renderMetaRow("Ask", request.ask)}
         </div>
-        ${
-          state.execApprovalError
-            ? html`<div class="exec-approval-error">${state.execApprovalError}</div>`
-            : nothing
-        }
+        ${state.execApprovalError
+          ? html`<div class="exec-approval-error">${state.execApprovalError}</div>`
+          : nothing}
         <div class="exec-approval-actions">
           <button
             class="btn primary"
diff --git a/ui/src/ui/views/instances.ts b/ui/src/ui/views/instances.ts
index 687cc303b5b..cf228e592a9 100644
--- a/ui/src/ui/views/instances.ts
+++ b/ui/src/ui/views/instances.ts
@@ -42,24 +42,16 @@ export function renderInstances(props: InstancesProps) {
           </button>
         </div>
       </div>
-      ${
-        props.lastError
-          ? html`<div class="callout danger" style="margin-top: 12px;">${props.lastError}</div>`
-          : nothing
-      }
-      ${
-        props.statusMessage
-          ? html`<div class="callout" style="margin-top: 12px;">${props.statusMessage}</div>`
-          : nothing
-      }
+      ${props.lastError
+        ? html`<div class="callout danger" style="margin-top: 12px;">${props.lastError}</div>`
+        : nothing}
+      ${props.statusMessage
+        ? html`<div class="callout" style="margin-top: 12px;">${props.statusMessage}</div>`
+        : nothing}
       <div class="list" style="margin-top: 16px;">
-        ${
-          props.entries.length === 0
-            ? html`
-                <div class="muted">No instances reported yet.</div>
-              `
-            : props.entries.map((entry) => renderEntry(entry, masked))
-        }
+        ${props.entries.length === 0
+          ? html` <div class="muted">No instances reported yet.</div> `
+          : props.entries.map((entry) => renderEntry(entry, masked))}
       </div>
     </section>
   `;
@@ -94,11 +86,9 @@ function renderEntry(entry: PresenceEntry, masked: boolean) {
           ${scopesLabel ? html`<span class="chip">${scopesLabel}</span>` : nothing}
           ${entry.platform ? html`<span class="chip">${entry.platform}</span>` : nothing}
           ${entry.deviceFamily ? html`<span class="chip">${entry.deviceFamily}</span>` : nothing}
-          ${
-            entry.modelIdentifier
-              ? html`<span class="chip">${entry.modelIdentifier}</span>`
-              : nothing
-          }
+          ${entry.modelIdentifier
+            ? html`<span class="chip">${entry.modelIdentifier}</span>`
+            : nothing}
           ${entry.version ? html`<span class="chip">${entry.version}</span>` : nothing}
         </div>
       </div>
diff --git a/ui/src/ui/views/login-gate.ts b/ui/src/ui/views/login-gate.ts
index 3161766fb87..6127053a6a3 100644
--- a/ui/src/ui/views/login-gate.ts
+++ b/ui/src/ui/views/login-gate.ts
@@ -99,13 +99,11 @@ export function renderLoginGate(state: AppViewState) {
             ${t("common.connect")}
           </button>
         </div>
-        ${
-          state.lastError
-            ? html`<div class="callout danger" style="margin-top: 14px;">
+        ${state.lastError
+          ? html`<div class="callout danger" style="margin-top: 14px;">
               <div>${state.lastError}</div>
             </div>`
-            : ""
-        }
+          : ""}
         <div class="login-gate__help">
           <div class="login-gate__help-title">${t("overview.connection.title")}</div>
           <ol class="login-gate__steps">
diff --git a/ui/src/ui/views/logs.ts b/ui/src/ui/views/logs.ts
index c119c413c78..6a18e70f300 100644
--- a/ui/src/ui/views/logs.ts
+++ b/ui/src/ui/views/logs.ts
@@ -114,32 +114,25 @@ export function renderLogs(props: LogsProps) {
         )}
       </div>
 
-      ${
-        props.file
-          ? html`<div class="muted" style="margin-top: 10px;">File: ${props.file}</div>`
-          : nothing
-      }
-      ${
-        props.truncated
-          ? html`
-              <div class="callout" style="margin-top: 10px">Log output truncated; showing latest chunk.</div>
-            `
-          : nothing
-      }
-      ${
-        props.error
-          ? html`<div class="callout danger" style="margin-top: 10px;">${props.error}</div>`
-          : nothing
-      }
+      ${props.file
+        ? html`<div class="muted" style="margin-top: 10px;">File: ${props.file}</div>`
+        : nothing}
+      ${props.truncated
+        ? html`
+            <div class="callout" style="margin-top: 10px">
+              Log output truncated; showing latest chunk.
+            </div>
+          `
+        : nothing}
+      ${props.error
+        ? html`<div class="callout danger" style="margin-top: 10px;">${props.error}</div>`
+        : nothing}
 
       <div class="log-stream" style="margin-top: 12px;" @scroll=${props.onScroll}>
-        ${
-          filtered.length === 0
-            ? html`
-                <div class="muted" style="padding: 12px">No log entries.</div>
-              `
-            : filtered.map(
-                (entry) => html`
+        ${filtered.length === 0
+          ? html` <div class="muted" style="padding: 12px">No log entries.</div> `
+          : filtered.map(
+              (entry) => html`
                 <div class="log-row">
                   <div class="log-time mono">${formatTime(entry.time)}</div>
                   <div class="log-level ${entry.level ?? ""}">${entry.level ?? ""}</div>
@@ -147,8 +140,7 @@ export function renderLogs(props: LogsProps) {
                   <div class="log-message mono">${entry.message ?? entry.raw}</div>
                 </div>
               `,
-              )
-        }
+            )}
       </div>
     </section>
   `;
diff --git a/ui/src/ui/views/markdown-sidebar.ts b/ui/src/ui/views/markdown-sidebar.ts
index 5d0bb05ff3e..ee675e0d726 100644
--- a/ui/src/ui/views/markdown-sidebar.ts
+++ b/ui/src/ui/views/markdown-sidebar.ts
@@ -18,22 +18,18 @@ export function renderMarkdownSidebar(props: MarkdownSidebarProps) {
         <button @click=${props.onClose} class="btn" title="Close sidebar">${icons.x}</button>
       </div>
       <div class="sidebar-content">
-        ${
-          props.error
-            ? html`
+        ${props.error
+          ? html`
               <div class="callout danger">${props.error}</div>
               <button @click=${props.onViewRawText} class="btn" style="margin-top: 12px;">
                 View Raw Text
               </button>
             `
-            : props.content
-              ? html`<div class="sidebar-markdown">
+          : props.content
+            ? html`<div class="sidebar-markdown">
                 ${unsafeHTML(toSanitizedMarkdownHtml(props.content))}
               </div>`
-              : html`
-                  <div class="muted">No content available</div>
-                `
-        }
+            : html` <div class="muted">No content available</div> `}
       </div>
     </div>
   `;
diff --git a/ui/src/ui/views/nodes-exec-approvals.ts b/ui/src/ui/views/nodes-exec-approvals.ts
index 7faccca82c5..a9df1cff2de 100644
--- a/ui/src/ui/views/nodes-exec-approvals.ts
+++ b/ui/src/ui/views/nodes-exec-approvals.ts
@@ -211,23 +211,19 @@ export function renderExecApprovals(state: ExecApprovalsState) {
       </div>
 
       ${renderExecApprovalsTarget(state)}
-      ${
-        !ready
-          ? html`<div class="row" style="margin-top: 12px; gap: 12px;">
+      ${!ready
+        ? html`<div class="row" style="margin-top: 12px; gap: 12px;">
             <div class="muted">Load exec approvals to edit allowlists.</div>
             <button class="btn" ?disabled=${state.loading || !targetReady} @click=${state.onLoad}>
               ${state.loading ? "Loading…" : "Load approvals"}
             </button>
           </div>`
-          : html`
+        : html`
             ${renderExecApprovalsTabs(state)} ${renderExecApprovalsPolicy(state)}
-            ${
-              state.selectedScope === EXEC_APPROVALS_DEFAULT_SCOPE
-                ? nothing
-                : renderExecApprovalsAllowlist(state)
-            }
-          `
-      }
+            ${state.selectedScope === EXEC_APPROVALS_DEFAULT_SCOPE
+              ? nothing
+              : renderExecApprovalsAllowlist(state)}
+          `}
     </section>
   `;
 }
@@ -262,9 +258,8 @@ function renderExecApprovalsTarget(state: ExecApprovalsState) {
               <option value="node" ?selected=${state.target === "node"}>Node</option>
             </select>
           </label>
-          ${
-            state.target === "node"
-              ? html`
+          ${state.target === "node"
+            ? html`
                 <label class="field">
                   <span>Node</span>
                   <select
@@ -285,17 +280,12 @@ function renderExecApprovalsTarget(state: ExecApprovalsState) {
                   </select>
                 </label>
               `
-              : nothing
-          }
+            : nothing}
         </div>
       </div>
-      ${
-        state.target === "node" && !hasNodes
-          ? html`
-              <div class="muted">No nodes advertise exec approvals yet.</div>
-            `
-          : nothing
-      }
+      ${state.target === "node" && !hasNodes
+        ? html` <div class="muted">No nodes advertise exec approvals yet.</div> `
+        : nothing}
     </div>
   `;
 }
@@ -306,9 +296,9 @@ function renderExecApprovalsTabs(state: ExecApprovalsState) {
       <span class="label">Scope</span>
       <div class="row" style="gap: 8px; flex-wrap: wrap;">
         <button
-          class="btn btn--sm ${
-            state.selectedScope === EXEC_APPROVALS_DEFAULT_SCOPE ? "active" : ""
-          }"
+          class="btn btn--sm ${state.selectedScope === EXEC_APPROVALS_DEFAULT_SCOPE
+            ? "active"
+            : ""}"
           @click=${() => state.onSelectScope(EXEC_APPROVALS_DEFAULT_SCOPE)}
         >
           Defaults
@@ -369,13 +359,11 @@ function renderExecApprovalsPolicy(state: ExecApprovalsState) {
                 }
               }}
             >
-              ${
-                !isDefaults
-                  ? html`<option value="__default__" ?selected=${securityValue === "__default__"}>
+              ${!isDefaults
+                ? html`<option value="__default__" ?selected=${securityValue === "__default__"}>
                     Use default (${defaults.security})
                   </option>`
-                  : nothing
-              }
+                : nothing}
               ${SECURITY_OPTIONS.map(
                 (option) =>
                   html`<option value=${option.value} ?selected=${securityValue === option.value}>
@@ -409,13 +397,11 @@ function renderExecApprovalsPolicy(state: ExecApprovalsState) {
                 }
               }}
             >
-              ${
-                !isDefaults
-                  ? html`<option value="__default__" ?selected=${askValue === "__default__"}>
+              ${!isDefaults
+                ? html`<option value="__default__" ?selected=${askValue === "__default__"}>
                     Use default (${defaults.ask})
                   </option>`
-                  : nothing
-              }
+                : nothing}
               ${ASK_OPTIONS.map(
                 (option) =>
                   html`<option value=${option.value} ?selected=${askValue === option.value}>
@@ -431,11 +417,9 @@ function renderExecApprovalsPolicy(state: ExecApprovalsState) {
         <div class="list-main">
           <div class="list-title">Ask fallback</div>
           <div class="list-sub">
-            ${
-              isDefaults
-                ? "Applied when the UI prompt is unavailable."
-                : `Default: ${defaults.askFallback}.`
-            }
+            ${isDefaults
+              ? "Applied when the UI prompt is unavailable."
+              : `Default: ${defaults.askFallback}.`}
           </div>
         </div>
         <div class="list-meta">
@@ -453,13 +437,11 @@ function renderExecApprovalsPolicy(state: ExecApprovalsState) {
                 }
               }}
             >
-              ${
-                !isDefaults
-                  ? html`<option value="__default__" ?selected=${askFallbackValue === "__default__"}>
+              ${!isDefaults
+                ? html`<option value="__default__" ?selected=${askFallbackValue === "__default__"}>
                     Use default (${defaults.askFallback})
                   </option>`
-                  : nothing
-              }
+                : nothing}
               ${SECURITY_OPTIONS.map(
                 (option) =>
                   html`<option value=${option.value} ?selected=${askFallbackValue === option.value}>
@@ -475,13 +457,11 @@ function renderExecApprovalsPolicy(state: ExecApprovalsState) {
         <div class="list-main">
           <div class="list-title">Auto-allow skill CLIs</div>
           <div class="list-sub">
-            ${
-              isDefaults
-                ? "Allow skill executables listed by the Gateway."
-                : autoIsDefault
-                  ? `Using default (${defaults.autoAllowSkills ? "on" : "off"}).`
-                  : `Override (${autoEffective ? "on" : "off"}).`
-            }
+            ${isDefaults
+              ? "Allow skill executables listed by the Gateway."
+              : autoIsDefault
+                ? `Using default (${defaults.autoAllowSkills ? "on" : "off"}).`
+                : `Override (${autoEffective ? "on" : "off"}).`}
           </div>
         </div>
         <div class="list-meta">
@@ -497,17 +477,15 @@ function renderExecApprovalsPolicy(state: ExecApprovalsState) {
               }}
             />
           </label>
-          ${
-            !isDefaults && !autoIsDefault
-              ? html`<button
+          ${!isDefaults && !autoIsDefault
+            ? html`<button
                 class="btn btn--sm"
                 ?disabled=${state.disabled}
                 @click=${() => state.onRemove([...basePath, "autoAllowSkills"])}
               >
                 Use default
               </button>`
-              : nothing
-          }
+            : nothing}
         </div>
       </div>
     </div>
@@ -535,13 +513,9 @@ function renderExecApprovalsAllowlist(state: ExecApprovalsState) {
       </button>
     </div>
     <div class="list" style="margin-top: 12px;">
-      ${
-        entries.length === 0
-          ? html`
-              <div class="muted">No allowlist entries yet.</div>
-            `
-          : entries.map((entry, index) => renderAllowlistEntry(state, entry, index))
-      }
+      ${entries.length === 0
+        ? html` <div class="muted">No allowlist entries yet.</div> `
+        : entries.map((entry, index) => renderAllowlistEntry(state, entry, index))}
     </div>
   `;
 }
diff --git a/ui/src/ui/views/nodes.ts b/ui/src/ui/views/nodes.ts
index 1d0f333f996..96798cd5678 100644
--- a/ui/src/ui/views/nodes.ts
+++ b/ui/src/ui/views/nodes.ts
@@ -62,13 +62,9 @@ export function renderNodes(props: NodesProps) {
         </button>
       </div>
       <div class="list" style="margin-top: 16px;">
-        ${
-          props.nodes.length === 0
-            ? html`
-                <div class="muted">No nodes found.</div>
-              `
-            : props.nodes.map((n) => renderNode(n))
-        }
+        ${props.nodes.length === 0
+          ? html` <div class="muted">No nodes found.</div> `
+          : props.nodes.map((n) => renderNode(n))}
       </div>
     </section>
   `;
@@ -89,35 +85,25 @@ function renderDevices(props: NodesProps) {
           ${props.devicesLoading ? "Loading…" : "Refresh"}
         </button>
       </div>
-      ${
-        props.devicesError
-          ? html`<div class="callout danger" style="margin-top: 12px;">${props.devicesError}</div>`
-          : nothing
-      }
+      ${props.devicesError
+        ? html`<div class="callout danger" style="margin-top: 12px;">${props.devicesError}</div>`
+        : nothing}
       <div class="list" style="margin-top: 16px;">
-        ${
-          pending.length > 0
-            ? html`
+        ${pending.length > 0
+          ? html`
               <div class="muted" style="margin-bottom: 8px;">Pending</div>
               ${pending.map((req) => renderPendingDevice(req, props))}
             `
-            : nothing
-        }
-        ${
-          paired.length > 0
-            ? html`
+          : nothing}
+        ${paired.length > 0
+          ? html`
               <div class="muted" style="margin-top: 12px; margin-bottom: 8px;">Paired</div>
               ${paired.map((device) => renderPairedDevice(device, props))}
             `
-            : nothing
-        }
-        ${
-          pending.length === 0 && paired.length === 0
-            ? html`
-                <div class="muted">No paired devices.</div>
-              `
-            : nothing
-        }
+          : nothing}
+        ${pending.length === 0 && paired.length === 0
+          ? html` <div class="muted">No paired devices.</div> `
+          : nothing}
       </div>
     </section>
   `;
@@ -165,18 +151,14 @@ function renderPairedDevice(device: PairedDevice, props: NodesProps) {
         <div class="list-title">${name}</div>
         <div class="list-sub">${device.deviceId}${ip}</div>
         <div class="muted" style="margin-top: 6px;">${roles} · ${scopes}</div>
-        ${
-          tokens.length === 0
-            ? html`
-                <div class="muted" style="margin-top: 6px">Tokens: none</div>
-              `
-            : html`
+        ${tokens.length === 0
+          ? html` <div class="muted" style="margin-top: 6px">Tokens: none</div> `
+          : html`
               <div class="muted" style="margin-top: 10px;">Tokens</div>
               <div style="display: flex; flex-direction: column; gap: 8px; margin-top: 6px;">
                 ${tokens.map((token) => renderTokenRow(device.deviceId, token, props))}
               </div>
-            `
-        }
+            `}
       </div>
     </div>
   `;
@@ -198,18 +180,16 @@ function renderTokenRow(deviceId: string, token: DeviceTokenSummary, props: Node
         >
           Rotate
         </button>
-        ${
-          token.revokedAtMs
-            ? nothing
-            : html`
+        ${token.revokedAtMs
+          ? nothing
+          : html`
               <button
                 class="btn btn--sm danger"
                 @click=${() => props.onDeviceRevoke(deviceId, token.role)}
               >
                 Revoke
               </button>
-            `
-        }
+            `}
       </div>
     </div>
   `;
@@ -285,24 +265,21 @@ function renderBindings(state: BindingState) {
         </button>
       </div>
 
-      ${
-        state.formMode === "raw"
-          ? html`
-              <div class="callout warn" style="margin-top: 12px">
-                Switch the Config tab to <strong>Form</strong> mode to edit bindings here.
-              </div>
-            `
-          : nothing
-      }
-      ${
-        !state.ready
-          ? html`<div class="row" style="margin-top: 12px; gap: 12px;">
+      ${state.formMode === "raw"
+        ? html`
+            <div class="callout warn" style="margin-top: 12px">
+              Switch the Config tab to <strong>Form</strong> mode to edit bindings here.
+            </div>
+          `
+        : nothing}
+      ${!state.ready
+        ? html`<div class="row" style="margin-top: 12px; gap: 12px;">
             <div class="muted">Load config to edit bindings.</div>
             <button class="btn" ?disabled=${state.configLoading} @click=${state.onLoadConfig}>
               ${state.configLoading ? "Loading…" : "Load config"}
             </button>
           </div>`
-          : html`
+        : html`
             <div class="list" style="margin-top: 16px;">
               <div class="list-item">
                 <div class="list-main">
@@ -329,26 +306,17 @@ function renderBindings(state: BindingState) {
                       )}
                     </select>
                   </label>
-                  ${
-                    !supportsBinding
-                      ? html`
-                          <div class="muted">No nodes with system.run available.</div>
-                        `
-                      : nothing
-                  }
+                  ${!supportsBinding
+                    ? html` <div class="muted">No nodes with system.run available.</div> `
+                    : nothing}
                 </div>
               </div>
 
-              ${
-                state.agents.length === 0
-                  ? html`
-                      <div class="muted">No agents found.</div>
-                    `
-                  : state.agents.map((agent) => renderAgentBinding(agent, state))
-              }
+              ${state.agents.length === 0
+                ? html` <div class="muted">No agents found.</div> `
+                : state.agents.map((agent) => renderAgentBinding(agent, state))}
             </div>
-          `
-      }
+          `}
     </section>
   `;
 }
@@ -363,11 +331,9 @@ function renderAgentBinding(agent: BindingAgent, state: BindingState) {
         <div class="list-title">${label}</div>
         <div class="list-sub">
           ${agent.isDefault ? "default agent" : "agent"} ·
-          ${
-            bindingValue === "__default__"
-              ? `uses default (${state.defaultBinding ?? "any"})`
-              : `override: ${agent.binding}`
-          }
+          ${bindingValue === "__default__"
+            ? `uses default (${state.defaultBinding ?? "any"})`
+            : `override: ${agent.binding}`}
         </div>
       </div>
       <div class="list-meta">
diff --git a/ui/src/ui/views/overview-attention.ts b/ui/src/ui/views/overview-attention.ts
index dd8ed4c999e..8a62cb2612e 100644
--- a/ui/src/ui/views/overview-attention.ts
+++ b/ui/src/ui/views/overview-attention.ts
@@ -42,17 +42,15 @@ export function renderOverviewAttention(props: OverviewAttentionProps) {
                 <div class="ov-attention-title">${item.title}</div>
                 <div class="muted">${item.description}</div>
               </div>
-              ${
-                item.href
-                  ? html`<a
+              ${item.href
+                ? html`<a
                     class="ov-attention-link"
                     href=${item.href}
                     target=${item.external ? EXTERNAL_LINK_TARGET : nothing}
                     rel=${item.external ? buildExternalLinkRel() : nothing}
                     >${t("common.docs")}</a
                   >`
-                  : nothing
-              }
+                : nothing}
             </div>
           `,
         )}
diff --git a/ui/src/ui/views/overview-cards.ts b/ui/src/ui/views/overview-cards.ts
index eca0f9fa3be..65c09800777 100644
--- a/ui/src/ui/views/overview-cards.ts
+++ b/ui/src/ui/views/overview-cards.ts
@@ -136,9 +136,8 @@ export function renderOverviewCards(props: OverviewCardsProps) {
   return html`
     <section class="ov-cards">${cards.map((c) => renderStatCard(c, props.onNavigate))}</section>
 
-    ${
-      sessions.length > 0
-        ? html`
+    ${sessions.length > 0
+      ? html`
           <section class="ov-recent">
             <h3 class="ov-recent__title">${t("overview.cards.recentSessions")}</h3>
             <ul class="ov-recent__list">
@@ -158,7 +157,6 @@ export function renderOverviewCards(props: OverviewCardsProps) {
             </ul>
           </section>
         `
-        : nothing
-    }
+      : nothing}
   `;
 }
diff --git a/ui/src/ui/views/overview-event-log.ts b/ui/src/ui/views/overview-event-log.ts
index e167ccc99ce..26608f68e03 100644
--- a/ui/src/ui/views/overview-event-log.ts
+++ b/ui/src/ui/views/overview-event-log.ts
@@ -28,13 +28,11 @@ export function renderOverviewEventLog(props: OverviewEventLogProps) {
             <div class="ov-event-log-entry">
               <span class="ov-event-log-ts">${new Date(entry.ts).toLocaleTimeString()}</span>
               <span class="ov-event-log-name">${entry.event}</span>
-              ${
-                entry.payload
-                  ? html`<span class="ov-event-log-payload muted"
+              ${entry.payload
+                ? html`<span class="ov-event-log-payload muted"
                     >${formatEventPayload(entry.payload).slice(0, 120)}</span
                   >`
-                  : nothing
-              }
+                : nothing}
             </div>
           `,
         )}
diff --git a/ui/src/ui/views/overview.ts b/ui/src/ui/views/overview.ts
index 3e785c319d5..f2c17d481f7 100644
--- a/ui/src/ui/views/overview.ts
+++ b/ui/src/ui/views/overview.ts
@@ -215,10 +215,9 @@ export function renderOverview(props: OverviewProps) {
               placeholder="ws://100.x.y.z:18789"
             />
           </label>
-          ${
-            isTrustedProxy
-              ? ""
-              : html`
+          ${isTrustedProxy
+            ? ""
+            : html`
                 <label class="field">
                   <span>${t("overview.access.token")}</span>
                   <div style="display: flex; align-items: center; gap: 8px;">
@@ -273,8 +272,7 @@ export function renderOverview(props: OverviewProps) {
                     </button>
                   </div>
                 </label>
-              `
-          }
+              `}
           <label class="field">
             <span>${t("overview.access.sessionKey")}</span>
             <input
@@ -308,14 +306,13 @@ export function renderOverview(props: OverviewProps) {
           <button class="btn" @click=${() => props.onConnect()}>${t("common.connect")}</button>
           <button class="btn" @click=${() => props.onRefresh()}>${t("common.refresh")}</button>
           <span class="muted"
-            >${
-              isTrustedProxy ? t("overview.access.trustedProxy") : t("overview.access.connectHint")
-            }</span
+            >${isTrustedProxy
+              ? t("overview.access.trustedProxy")
+              : t("overview.access.connectHint")}</span
           >
         </div>
-        ${
-          !props.connected
-            ? html`
+        ${!props.connected
+          ? html`
               <div class="login-gate__help" style="margin-top: 16px;">
                 <div class="login-gate__help-title">${t("overview.connection.title")}</div>
                 <ol class="login-gate__steps">
@@ -342,8 +339,7 @@ export function renderOverview(props: OverviewProps) {
                 </div>
               </div>
             `
-            : nothing
-        }
+          : nothing}
       </div>
 
       <div class="card">
@@ -367,26 +363,22 @@ export function renderOverview(props: OverviewProps) {
           <div class="stat">
             <div class="stat-label">${t("overview.snapshot.lastChannelsRefresh")}</div>
             <div class="stat-value">
-              ${
-                props.lastChannelsRefresh
-                  ? formatRelativeTimestamp(props.lastChannelsRefresh)
-                  : t("common.na")
-              }
+              ${props.lastChannelsRefresh
+                ? formatRelativeTimestamp(props.lastChannelsRefresh)
+                : t("common.na")}
             </div>
           </div>
         </div>
-        ${
-          props.lastError
-            ? html`<div class="callout danger" style="margin-top: 14px;">
+        ${props.lastError
+          ? html`<div class="callout danger" style="margin-top: 14px;">
               <div>${props.lastError}</div>
               ${pairingHint ?? ""} ${authHint ?? ""} ${insecureContextHint ?? ""}
             </div>`
-            : html`
+          : html`
               <div class="callout" style="margin-top: 14px">
                 ${t("overview.snapshot.channelsHint")}
               </div>
-            `
-        }
+            `}
       </div>
     </section>
 
diff --git a/ui/src/ui/views/sessions.ts b/ui/src/ui/views/sessions.ts
index 1996097c27a..64da38a26e5 100644
--- a/ui/src/ui/views/sessions.ts
+++ b/ui/src/ui/views/sessions.ts
@@ -216,11 +216,9 @@ export function renderSessions(props: SessionsProps) {
         <div>
           <div class="card-title">Sessions</div>
           <div class="card-sub">
-            ${
-              props.result
-                ? `Store: ${props.result.path}`
-                : "Active session keys and per-session overrides."
-            }
+            ${props.result
+              ? `Store: ${props.result.path}`
+              : "Active session keys and per-session overrides."}
           </div>
         </div>
         <button class="btn" ?disabled=${props.loading} @click=${props.onRefresh}>
@@ -288,11 +286,9 @@ export function renderSessions(props: SessionsProps) {
         </label>
       </div>
 
-      ${
-        props.error
-          ? html`<div class="callout danger" style="margin-bottom: 12px;">${props.error}</div>`
-          : nothing
-      }
+      ${props.error
+        ? html`<div class="callout danger" style="margin-bottom: 12px;">${props.error}</div>`
+        : nothing}
 
       <div class="data-table-wrapper">
         <div class="data-table-toolbar">
@@ -306,9 +302,8 @@ export function renderSessions(props: SessionsProps) {
           </div>
         </div>
 
-        ${
-          props.selectedKeys.size > 0
-            ? html`
+        ${props.selectedKeys.size > 0
+          ? html`
               <div class="data-table-bulk-bar">
                 <span>${props.selectedKeys.size} selected</span>
                 <button class="btn btn--sm" @click=${props.onDeselectAll}>Unselect</button>
@@ -321,26 +316,20 @@ export function renderSessions(props: SessionsProps) {
                 </button>
               </div>
             `
-            : nothing
-        }
+          : nothing}
 
         <div class="data-table-container">
           <table class="data-table">
             <thead>
               <tr>
                 <th class="data-table-checkbox-col">
-                  ${
-                    paginated.length > 0
-                      ? html`<input
+                  ${paginated.length > 0
+                    ? html`<input
                         type="checkbox"
-                        .checked=${
-                          paginated.length > 0 &&
-                          paginated.every((r) => props.selectedKeys.has(r.key))
-                        }
-                        .indeterminate=${
-                          paginated.some((r) => props.selectedKeys.has(r.key)) &&
-                          !paginated.every((r) => props.selectedKeys.has(r.key))
-                        }
+                        .checked=${paginated.length > 0 &&
+                        paginated.every((r) => props.selectedKeys.has(r.key))}
+                        .indeterminate=${paginated.some((r) => props.selectedKeys.has(r.key)) &&
+                        !paginated.every((r) => props.selectedKeys.has(r.key))}
                         @change=${() => {
                           const allSelected = paginated.every((r) => props.selectedKeys.has(r.key));
                           if (allSelected) {
@@ -351,8 +340,7 @@ export function renderSessions(props: SessionsProps) {
                         }}
                         aria-label="Select all on page"
                       />`
-                      : nothing
-                  }
+                    : nothing}
                 </th>
                 ${sortHeader("key", "Key", "data-table-key-col")}
                 <th>Label</th>
@@ -365,34 +353,34 @@ export function renderSessions(props: SessionsProps) {
               </tr>
             </thead>
             <tbody>
-              ${
-                paginated.length === 0
-                  ? html`
-                      <tr>
-                        <td colspan="10" style="text-align: center; padding: 48px 16px; color: var(--muted)">
-                          No sessions found.
-                        </td>
-                      </tr>
-                    `
-                  : paginated.map((row) =>
-                      renderRow(
-                        row,
-                        props.basePath,
-                        props.onPatch,
-                        props.selectedKeys.has(row.key),
-                        props.onToggleSelect,
-                        props.loading,
-                        props.onNavigateToChat,
-                      ),
-                    )
-              }
+              ${paginated.length === 0
+                ? html`
+                    <tr>
+                      <td
+                        colspan="10"
+                        style="text-align: center; padding: 48px 16px; color: var(--muted)"
+                      >
+                        No sessions found.
+                      </td>
+                    </tr>
+                  `
+                : paginated.map((row) =>
+                    renderRow(
+                      row,
+                      props.basePath,
+                      props.onPatch,
+                      props.selectedKeys.has(row.key),
+                      props.onToggleSelect,
+                      props.loading,
+                      props.onNavigateToChat,
+                    ),
+                  )}
             </tbody>
           </table>
         </div>
 
-        ${
-          totalRows > 0
-            ? html`
+        ${totalRows > 0
+          ? html`
               <div class="data-table-pagination">
                 <div class="data-table-pagination__info">
                   ${page * props.pageSize + 1}-${Math.min((page + 1) * props.pageSize, totalRows)}
@@ -419,8 +407,7 @@ export function renderSessions(props: SessionsProps) {
                 </div>
               </div>
             `
-            : nothing
-        }
+          : nothing}
       </div>
     </section>
   `;
@@ -480,9 +467,8 @@ function renderRow(
       </td>
       <td class="data-table-key-col">
         <div class="mono session-key-cell">
-          ${
-            canLink
-              ? html`<a
+          ${canLink
+            ? html`<a
                 href=${chatUrl}
                 class="session-link"
                 @click=${(e: MouseEvent) => {
@@ -503,13 +489,10 @@ function renderRow(
                 }}
                 >${row.key}</a
               >`
-              : row.key
-          }
-          ${
-            showDisplayName
-              ? html`<span class="muted session-key-display-name">${displayName}</span>`
-              : nothing
-          }
+            : row.key}
+          ${showDisplayName
+            ? html`<span class="muted session-key-display-name">${displayName}</span>`
+            : nothing}
         </div>
       </td>
       <td>
diff --git a/ui/src/ui/views/skills-shared.ts b/ui/src/ui/views/skills-shared.ts
index e19f27c2835..33510b87592 100644
--- a/ui/src/ui/views/skills-shared.ts
+++ b/ui/src/ui/views/skills-shared.ts
@@ -30,23 +30,11 @@ export function renderSkillStatusChips(params: {
   return html`
     <div class="chip-row" style="margin-top: 6px;">
       <span class="chip">${skill.source}</span>
-      ${
-        showBundledBadge
-          ? html`
-              <span class="chip">bundled</span>
-            `
-          : nothing
-      }
+      ${showBundledBadge ? html` <span class="chip">bundled</span> ` : nothing}
       <span class="chip ${skill.eligible ? "chip-ok" : "chip-warn"}">
         ${skill.eligible ? "eligible" : "blocked"}
       </span>
-      ${
-        skill.disabled
-          ? html`
-              <span class="chip chip-warn">disabled</span>
-            `
-          : nothing
-      }
+      ${skill.disabled ? html` <span class="chip chip-warn">disabled</span> ` : nothing}
     </div>
   `;
 }
diff --git a/ui/src/ui/views/skills.ts b/ui/src/ui/views/skills.ts
index 7092342b856..df9268c1793 100644
--- a/ui/src/ui/views/skills.ts
+++ b/ui/src/ui/views/skills.ts
@@ -159,21 +159,18 @@ export function renderSkills(props: SkillsProps) {
         <div class="muted">${filtered.length} shown</div>
       </div>
 
-      ${
-        props.error
-          ? html`<div class="callout danger" style="margin-top: 12px;">${props.error}</div>`
-          : nothing
-      }
-      ${
-        filtered.length === 0
-          ? html`
+      ${props.error
+        ? html`<div class="callout danger" style="margin-top: 12px;">${props.error}</div>`
+        : nothing}
+      ${filtered.length === 0
+        ? html`
             <div class="muted" style="margin-top: 16px">
-              ${
-                !props.connected && !props.report ? "Not connected to gateway." : "No skills found."
-              }
+              ${!props.connected && !props.report
+                ? "Not connected to gateway."
+                : "No skills found."}
             </div>
           `
-          : html`
+        : html`
             <div class="agent-skills-groups" style="margin-top: 16px;">
               ${groups.map((group) => {
                 return html`
@@ -189,8 +186,7 @@ export function renderSkills(props: SkillsProps) {
                 `;
               })}
             </div>
-          `
-      }
+          `}
     </section>
 
     ${detailSkill ? renderSkillDetail(detailSkill, props) : nothing}
@@ -271,9 +267,8 @@ function renderSkillDetail(skill: SkillStatusEntry, props: SkillsProps) {
             ${renderSkillStatusChips({ skill, showBundledBadge })}
           </div>
 
-          ${
-            missing.length > 0
-              ? html`
+          ${missing.length > 0
+            ? html`
                 <div
                   class="callout"
                   style="border-color: var(--warn-subtle); background: var(--warn-subtle); color: var(--warn);"
@@ -282,15 +277,12 @@ function renderSkillDetail(skill: SkillStatusEntry, props: SkillsProps) {
                   <div>${missing.join(", ")}</div>
                 </div>
               `
-              : nothing
-          }
-          ${
-            reasons.length > 0
-              ? html`
+            : nothing}
+          ${reasons.length > 0
+            ? html`
                 <div class="muted" style="font-size: 13px;">Reason: ${reasons.join(", ")}</div>
               `
-              : nothing
-          }
+            : nothing}
 
           <div style="display: flex; align-items: center; gap: 12px;">
             <label class="skill-toggle-wrap">
@@ -305,29 +297,24 @@ function renderSkillDetail(skill: SkillStatusEntry, props: SkillsProps) {
             <span style="font-size: 13px; font-weight: 500;">
               ${skill.disabled ? "Disabled" : "Enabled"}
             </span>
-            ${
-              canInstall
-                ? html`<button
+            ${canInstall
+              ? html`<button
                   class="btn"
                   ?disabled=${busy}
                   @click=${() => props.onInstall(skill.skillKey, skill.name, skill.install[0].id)}
                 >
                   ${busy ? "Installing\u2026" : skill.install[0].label}
                 </button>`
-                : nothing
-            }
+              : nothing}
           </div>
 
-          ${
-            message
-              ? html`<div class="callout ${message.kind === "error" ? "danger" : "success"}">
+          ${message
+            ? html`<div class="callout ${message.kind === "error" ? "danger" : "success"}">
                 ${message.message}
               </div>`
-              : nothing
-          }
-          ${
-            skill.primaryEnv
-              ? html`
+            : nothing}
+          ${skill.primaryEnv
+            ? html`
                 <div style="display: grid; gap: 8px;">
                   <div class="field">
                     <span
@@ -363,8 +350,7 @@ function renderSkillDetail(skill: SkillStatusEntry, props: SkillsProps) {
                   </button>
                 </div>
               `
-              : nothing
-          }
+            : nothing}
 
           <div
             style="border-top: 1px solid var(--border); padding-top: 12px; display: grid; gap: 6px; font-size: 12px; color: var(--muted);"
diff --git a/ui/src/ui/views/usage-render-details.ts b/ui/src/ui/views/usage-render-details.ts
index 2c954c36753..bad55639fa8 100644
--- a/ui/src/ui/views/usage-render-details.ts
+++ b/ui/src/ui/views/usage-render-details.ts
@@ -114,13 +114,11 @@ function renderSessionSummary(
     })) ?? [];
 
   return html`
-    ${
-      badges.length > 0
-        ? html`<div class="usage-badges">
+    ${badges.length > 0
+      ? html`<div class="usage-badges">
           ${badges.map((b) => html`<span class="usage-badge">${b}</span>`)}
         </div>`
-        : nothing
-    }
+      : nothing}
     <div class="session-summary-grid">
       <div class="stat session-summary-card">
         <div class="session-summary-title">${t("usage.overview.messages")}</div>
@@ -145,10 +143,8 @@ function renderSessionSummary(
       <div class="stat session-summary-card">
         <div class="session-summary-title">${t("usage.details.duration")}</div>
         <div class="stat-value session-summary-value">
-          ${
-            formatDurationCompact(usage.durationMs, { spaced: true }) ??
-            t("usage.common.emptyValue")
-          }
+          ${formatDurationCompact(usage.durationMs, { spaced: true }) ??
+          t("usage.common.emptyValue")}
         </div>
         <div class="session-summary-meta">
           ${formatTs(usage.firstActivity)} → ${formatTs(usage.lastActivity)}
@@ -275,17 +271,14 @@ function renderSessionDetailPanel(
         <div class="session-detail-header-left">
           <div class="session-detail-title">
             ${displayLabel}
-            ${
-              cursorIndicator
-                ? html`<span class="session-detail-indicator">${cursorIndicator}</span>`
-                : nothing
-            }
+            ${cursorIndicator
+              ? html`<span class="session-detail-indicator">${cursorIndicator}</span>`
+              : nothing}
           </div>
         </div>
         <div class="session-detail-stats">
-          ${
-            usage
-              ? html`
+          ${usage
+            ? html`
                 <span
                   ><strong>${formatTokens(headerStats.totalTokens)}</strong> ${t(
                     "usage.metrics.tokens",
@@ -293,8 +286,7 @@ function renderSessionDetailPanel(
                 >
                 <span><strong>${formatCost(headerStats.totalCost)}</strong>${cursorIndicator}</span>
               `
-              : nothing
-          }
+            : nothing}
         </div>
         <button
           class="btn btn--sm btn--ghost"
@@ -488,9 +480,8 @@ function renderTimeSeriesCompact(
       <div class="timeseries-header-row">
         <div class="card-title usage-section-title">${t("usage.details.usageOverTime")}</div>
         <div class="timeseries-controls">
-          ${
-            hasSelection
-              ? html`
+          ${hasSelection
+            ? html`
                 <div class="chart-toggle small">
                   <button
                     class="btn btn--sm toggle-btn active"
@@ -500,8 +491,7 @@ function renderTimeSeriesCompact(
                   </button>
                 </div>
               `
-              : nothing
-          }
+            : nothing}
           <div class="chart-toggle small">
             <button
               class="btn btn--sm toggle-btn ${!isCumulative ? "active" : ""}"
@@ -516,9 +506,8 @@ function renderTimeSeriesCompact(
               ${t("usage.details.cumulative")}
             </button>
           </div>
-          ${
-            !isCumulative
-              ? html`
+          ${!isCumulative
+            ? html`
                 <div class="chart-toggle small">
                   <button
                     class="btn btn--sm toggle-btn ${breakdownMode === "total" ? "active" : ""}"
@@ -534,8 +523,7 @@ function renderTimeSeriesCompact(
                   </button>
                 </div>
               `
-              : nothing
-          }
+            : nothing}
         </div>
       </div>
       <div class="timeseries-chart-wrapper">
@@ -574,14 +562,12 @@ function renderTimeSeriesCompact(
             0
           </text>
           <!-- X axis labels (first and last) -->
-          ${
-            points.length > 0
-              ? svg`
+          ${points.length > 0
+            ? svg`
             <text x="${padding.left}" y="${padding.top + chartHeight + 10}" text-anchor="start" class="ts-axis-label">${new Date(points[0].timestamp).toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" })}</text>
             <text x="${width - padding.right}" y="${padding.top + chartHeight + 10}" text-anchor="end" class="ts-axis-label">${new Date(points[points.length - 1].timestamp).toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" })}</text>
           `
-              : nothing
-          }
+            : nothing}
           <!-- Bars -->
           ${points.map((p, i) => {
             const val = barTotals[i];
@@ -735,9 +721,8 @@ function renderTimeSeriesCompact(
         })()}
       </div>
       <div class="timeseries-summary">
-        ${
-          hasSelection
-            ? html`
+        ${hasSelection
+          ? html`
               <span class="timeseries-summary__range">
                 ${t("usage.details.turnRange", {
                   start: String(rangeStartIdx + 1),
@@ -759,13 +744,11 @@ function renderTimeSeriesCompact(
               )}
               · ${formatCost(filteredPoints.reduce((s, p) => s + (p.cost || 0), 0))}
             `
-            : html`${points.length} ${t("usage.overview.messagesAbbrev")} · ${formatTokens(cumTokens)}
-            · ${formatCost(cumCost)}`
-        }
+          : html`${points.length} ${t("usage.overview.messagesAbbrev")} · ${formatTokens(cumTokens)}
+            · ${formatCost(cumCost)}`}
       </div>
-      ${
-        breakdownByType
-          ? html`
+      ${breakdownByType
+        ? html`
             <div class="timeseries-breakdown">
               <div class="card-title usage-section-title">${t("usage.breakdown.tokensByType")}</div>
               <div class="cost-breakdown-bar cost-breakdown-bar--compact">
@@ -809,8 +792,7 @@ function renderTimeSeriesCompact(
               </div>
             </div>
           `
-          : nothing
-      }
+        : nothing}
     </div>
   `;
 }
@@ -869,13 +851,11 @@ function renderContextPanel(
         <div class="card-title usage-section-title">
           ${t("usage.details.systemPromptBreakdown")}
         </div>
-        ${
-          hasMore
-            ? html`<button class="btn btn--sm" @click=${onToggleExpanded}>
+        ${hasMore
+          ? html`<button class="btn btn--sm" @click=${onToggleExpanded}>
               ${showAll ? t("usage.details.collapse") : t("usage.details.expandAll")}
             </button>`
-            : nothing
-        }
+          : nothing}
       </div>
       <p class="context-weight-desc">${contextPct || t("usage.details.baseContextPerMessage")}</p>
       <div class="context-stacked-bar">
@@ -922,11 +902,10 @@ function renderContextPanel(
         ${t("usage.breakdown.total")}: ~${formatTokens(totalContextTokens)}
       </div>
       <div class="context-breakdown-grid">
-        ${
-          skillsList.length > 0
-            ? (() => {
-                const more = skillsList.length - skillsTop.length;
-                return html`
+        ${skillsList.length > 0
+          ? (() => {
+              const more = skillsList.length - skillsTop.length;
+              return html`
                 <div class="context-breakdown-card">
                   <div class="context-breakdown-title">
                     ${t("usage.details.skills")} (${skillsList.length})
@@ -941,25 +920,21 @@ function renderContextPanel(
                       `,
                     )}
                   </div>
-                  ${
-                    more > 0
-                      ? html`
+                  ${more > 0
+                    ? html`
                         <div class="context-breakdown-more">
                           ${t("usage.sessions.more", { count: String(more) })}
                         </div>
                       `
-                      : nothing
-                  }
+                    : nothing}
                 </div>
               `;
-              })()
-            : nothing
-        }
-        ${
-          toolsList.length > 0
-            ? (() => {
-                const more = toolsList.length - toolsTop.length;
-                return html`
+            })()
+          : nothing}
+        ${toolsList.length > 0
+          ? (() => {
+              const more = toolsList.length - toolsTop.length;
+              return html`
                 <div class="context-breakdown-card">
                   <div class="context-breakdown-title">
                     ${t("usage.details.tools")} (${toolsList.length})
@@ -976,25 +951,21 @@ function renderContextPanel(
                       `,
                     )}
                   </div>
-                  ${
-                    more > 0
-                      ? html`
+                  ${more > 0
+                    ? html`
                         <div class="context-breakdown-more">
                           ${t("usage.sessions.more", { count: String(more) })}
                         </div>
                       `
-                      : nothing
-                  }
+                    : nothing}
                 </div>
               `;
-              })()
-            : nothing
-        }
-        ${
-          filesList.length > 0
-            ? (() => {
-                const more = filesList.length - filesTop.length;
-                return html`
+            })()
+          : nothing}
+        ${filesList.length > 0
+          ? (() => {
+              const more = filesList.length - filesTop.length;
+              return html`
                 <div class="context-breakdown-card">
                   <div class="context-breakdown-title">
                     ${t("usage.details.files")} (${filesList.length})
@@ -1011,20 +982,17 @@ function renderContextPanel(
                       `,
                     )}
                   </div>
-                  ${
-                    more > 0
-                      ? html`
+                  ${more > 0
+                    ? html`
                         <div class="context-breakdown-more">
                           ${t("usage.sessions.more", { count: String(more) })}
                         </div>
                       `
-                      : nothing
-                  }
+                    : nothing}
                 </div>
               `;
-              })()
-            : nothing
-        }
+            })()
+          : nothing}
       </div>
     </div>
   `;
@@ -1209,9 +1177,8 @@ function renderSessionLogsCompact(
                 ${log.tokens ? html`<span>${formatTokens(log.tokens)}</span>` : nothing}
               </div>
               <div class="session-log-content">${cleanContent}</div>
-              ${
-                toolInfo.tools.length > 0
-                  ? html`
+              ${toolInfo.tools.length > 0
+                ? html`
                     <details class="session-log-tools" ?open=${expandedAll}>
                       <summary>${toolInfo.summary}</summary>
                       <div class="session-log-tools-list">
@@ -1223,20 +1190,17 @@ function renderSessionLogsCompact(
                       </div>
                     </details>
                   `
-                  : nothing
-              }
+                : nothing}
             </div>
           `;
         })}
-        ${
-          filteredEntries.length === 0
-            ? html`
+        ${filteredEntries.length === 0
+          ? html`
               <div class="usage-empty-block usage-empty-block--compact">
                 ${t("usage.details.noMessagesMatch")}
               </div>
             `
-            : nothing
-        }
+          : nothing}
       </div>
     </div>
   `;
diff --git a/ui/src/ui/views/usage-render-overview.ts b/ui/src/ui/views/usage-render-overview.ts
index 8ad3cbc70d4..119298276a1 100644
--- a/ui/src/ui/views/usage-render-overview.ts
+++ b/ui/src/ui/views/usage-render-overview.ts
@@ -93,9 +93,8 @@ function renderFilterChips(
 
   return html`
     <div class="active-filters">
-      ${
-        selectedDays.length > 0
-          ? html`
+      ${selectedDays.length > 0
+        ? html`
             <div class="filter-chip">
               <span class="filter-chip-label">${t("usage.filters.days")}: ${daysLabel}</span>
               <button
@@ -108,11 +107,9 @@ function renderFilterChips(
               </button>
             </div>
           `
-          : nothing
-      }
-      ${
-        selectedHours.length > 0
-          ? html`
+        : nothing}
+      ${selectedHours.length > 0
+        ? html`
             <div class="filter-chip">
               <span class="filter-chip-label">${t("usage.filters.hours")}: ${hoursLabel}</span>
               <button
@@ -125,11 +122,9 @@ function renderFilterChips(
               </button>
             </div>
           `
-          : nothing
-      }
-      ${
-        selectedSessions.length > 0
-          ? html`
+        : nothing}
+      ${selectedSessions.length > 0
+        ? html`
             <div class="filter-chip" title="${sessionsFullName}">
               <span class="filter-chip-label">${t("usage.filters.session")}: ${sessionsLabel}</span>
               <button
@@ -142,17 +137,14 @@ function renderFilterChips(
               </button>
             </div>
           `
-          : nothing
-      }
-      ${
-        (selectedDays.length > 0 || selectedHours.length > 0) && selectedSessions.length > 0
-          ? html`
+        : nothing}
+      ${(selectedDays.length > 0 || selectedHours.length > 0) && selectedSessions.length > 0
+        ? html`
             <button class="btn btn--sm" @click=${onClearFilters}>
               ${t("usage.filters.clearAll")}
             </button>
           `
-          : nothing
-      }
+        : nothing}
     </div>
   `;
 }
@@ -267,9 +259,8 @@ function renderDailyChartCompact(
                 class="daily-bar-wrapper ${isSelected ? "selected" : ""}"
                 @click=${(e: MouseEvent) => onSelectDay(d.date, e.shiftKey)}
               >
-                ${
-                  dailyChartMode === "by-type"
-                    ? html`
+                ${dailyChartMode === "by-type"
+                  ? html`
                       <div
                         class="daily-bar daily-bar--stacked"
                         style="height: ${heightPx.toFixed(0)}px;"
@@ -287,19 +278,16 @@ function renderDailyChartCompact(
                         })()}
                       </div>
                     `
-                    : html` <div class="daily-bar" style="height: ${heightPx.toFixed(0)}px"></div> `
-                }
+                  : html` <div class="daily-bar" style="height: ${heightPx.toFixed(0)}px"></div> `}
                 ${showTotals ? html`<div class="daily-bar-total">${totalLabel}</div>` : nothing}
                 <div class="${labelClass}">${shortLabel}</div>
                 <div class="daily-bar-tooltip">
                   <strong>${formatFullDate(d.date)}</strong><br />
                   ${formatTokens(d.totalTokens)} ${t("usage.metrics.tokens").toLowerCase()}<br />
                   ${formatCost(d.totalCost)}
-                  ${
-                    breakdownLines.length
-                      ? html`${breakdownLines.map((line) => html`<div>${line}</div>`)}`
-                      : nothing
-                  }
+                  ${breakdownLines.length
+                    ? html`${breakdownLines.map((line) => html`<div>${line}</div>`)}`
+                    : nothing}
                 </div>
               </div>
             `;
@@ -330,34 +318,34 @@ function renderCostBreakdownCompact(totals: UsageTotals, mode: "tokens" | "cost"
         <div
           class="cost-segment output"
           style="width: ${(isTokenMode ? tokenPcts.output : breakdown.output.pct).toFixed(1)}%"
-          title="${t("usage.breakdown.output")}: ${
-            isTokenMode ? formatTokens(totals.output) : formatCost(breakdown.output.cost)
-          }"
+          title="${t("usage.breakdown.output")}: ${isTokenMode
+            ? formatTokens(totals.output)
+            : formatCost(breakdown.output.cost)}"
         ></div>
         <div
           class="cost-segment input"
           style="width: ${(isTokenMode ? tokenPcts.input : breakdown.input.pct).toFixed(1)}%"
-          title="${t("usage.breakdown.input")}: ${
-            isTokenMode ? formatTokens(totals.input) : formatCost(breakdown.input.cost)
-          }"
+          title="${t("usage.breakdown.input")}: ${isTokenMode
+            ? formatTokens(totals.input)
+            : formatCost(breakdown.input.cost)}"
         ></div>
         <div
           class="cost-segment cache-write"
           style="width: ${(isTokenMode ? tokenPcts.cacheWrite : breakdown.cacheWrite.pct).toFixed(
             1,
           )}%"
-          title="${t("usage.breakdown.cacheWrite")}: ${
-            isTokenMode ? formatTokens(totals.cacheWrite) : formatCost(breakdown.cacheWrite.cost)
-          }"
+          title="${t("usage.breakdown.cacheWrite")}: ${isTokenMode
+            ? formatTokens(totals.cacheWrite)
+            : formatCost(breakdown.cacheWrite.cost)}"
         ></div>
         <div
           class="cost-segment cache-read"
           style="width: ${(isTokenMode ? tokenPcts.cacheRead : breakdown.cacheRead.pct).toFixed(
             1,
           )}%"
-          title="${t("usage.breakdown.cacheRead")}: ${
-            isTokenMode ? formatTokens(totals.cacheRead) : formatCost(breakdown.cacheRead.cost)
-          }"
+          title="${t("usage.breakdown.cacheRead")}: ${isTokenMode
+            ? formatTokens(totals.cacheRead)
+            : formatCost(breakdown.cacheRead.cost)}"
         ></div>
       </div>
       <div class="cost-breakdown-legend">
@@ -371,15 +359,15 @@ function renderCostBreakdownCompact(totals: UsageTotals, mode: "tokens" | "cost"
         >
         <span class="legend-item"
           ><span class="legend-dot cache-write"></span>${t("usage.breakdown.cacheWrite")}
-          ${
-            isTokenMode ? formatTokens(totals.cacheWrite) : formatCost(breakdown.cacheWrite.cost)
-          }</span
+          ${isTokenMode
+            ? formatTokens(totals.cacheWrite)
+            : formatCost(breakdown.cacheWrite.cost)}</span
         >
         <span class="legend-item"
           ><span class="legend-dot cache-read"></span>${t("usage.breakdown.cacheRead")}
-          ${
-            isTokenMode ? formatTokens(totals.cacheRead) : formatCost(breakdown.cacheRead.cost)
-          }</span
+          ${isTokenMode
+            ? formatTokens(totals.cacheRead)
+            : formatCost(breakdown.cacheRead.cost)}</span
         >
       </div>
       <div class="cost-breakdown-total">
@@ -398,10 +386,9 @@ function renderInsightList(
   return html`
     <div class="usage-insight-card">
       <div class="usage-insight-title">${title}</div>
-      ${
-        items.length === 0
-          ? html`<div class="muted">${emptyLabel}</div>`
-          : html`
+      ${items.length === 0
+        ? html`<div class="muted">${emptyLabel}</div>`
+        : html`
             <div class="usage-list">
               ${items.map(
                 (item) => html`
@@ -415,8 +402,7 @@ function renderInsightList(
                 `,
               )}
             </div>
-          `
-      }
+          `}
     </div>
   `;
 }
@@ -435,10 +421,9 @@ function renderPeakErrorList(
   return html`
     <div class=${cardClass}>
       <div class="usage-insight-title">${title}</div>
-      ${
-        items.length === 0
-          ? html`<div class="muted">${emptyLabel}</div>`
-          : html`
+      ${items.length === 0
+        ? html`<div class="muted">${emptyLabel}</div>`
+        : html`
             <div class=${listClass}>
               ${items.map(
                 (item) => html`
@@ -450,8 +435,7 @@ function renderPeakErrorList(
                 `,
               )}
             </div>
-          `
-      }
+          `}
     </div>
   `;
 }
@@ -816,11 +800,9 @@ function renderSessionsCard(
       >
         <div class="session-bar-label">
           <div class="session-bar-title">${displayLabel}</div>
-          ${
-            meta.length > 0
-              ? html`<div class="session-bar-meta">${meta.join(" · ")}</div>`
-              : nothing
-          }
+          ${meta.length > 0
+            ? html`<div class="session-bar-meta">${meta.join(" · ")}</div>`
+            : nothing}
         </div>
         <div class="session-bar-actions">
           <button
@@ -855,11 +837,9 @@ function renderSessionsCard(
         <div class="card-title">${t("usage.sessions.title")}</div>
         <div class="sessions-card-count">
           ${t("usage.sessions.shown", { count: String(sessions.length) })}
-          ${
-            totalSessions !== sessions.length
-              ? ` · ${t("usage.sessions.total", { count: String(totalSessions) })}`
-              : ""
-          }
+          ${totalSessions !== sessions.length
+            ? ` · ${t("usage.sessions.total", { count: String(totalSessions) })}`
+            : ""}
         </div>
       </div>
       <div class="sessions-card-meta">
@@ -910,55 +890,46 @@ function renderSessionsCard(
         <button
           class="btn btn--sm"
           @click=${() => onSessionSortDirChange(sessionSortDir === "desc" ? "asc" : "desc")}
-          title=${
-            sessionSortDir === "desc"
-              ? t("usage.sessions.descending")
-              : t("usage.sessions.ascending")
-          }
+          title=${sessionSortDir === "desc"
+            ? t("usage.sessions.descending")
+            : t("usage.sessions.ascending")}
         >
           ${sessionSortDir === "desc" ? "↓" : "↑"}
         </button>
-        ${
-          selectedCount > 0
-            ? html`
+        ${selectedCount > 0
+          ? html`
               <button class="btn btn--sm" @click=${onClearSessions}>
                 ${t("usage.sessions.clearSelection")}
               </button>
             `
-            : nothing
-        }
+          : nothing}
       </div>
-      ${
-        sessionsTab === "recent"
-          ? recentEntries.length === 0
-            ? html` <div class="usage-empty-block">${t("usage.sessions.noRecent")}</div> `
-            : html`
+      ${sessionsTab === "recent"
+        ? recentEntries.length === 0
+          ? html` <div class="usage-empty-block">${t("usage.sessions.noRecent")}</div> `
+          : html`
               <div class="session-bars session-bars--recent">
                 ${recentEntries.map((s) => renderSessionBarRow(s, selectedSet.has(s.key)))}
               </div>
             `
-          : sessions.length === 0
-            ? html` <div class="usage-empty-block">${t("usage.sessions.noneInRange")}</div> `
-            : html`
+        : sessions.length === 0
+          ? html` <div class="usage-empty-block">${t("usage.sessions.noneInRange")}</div> `
+          : html`
               <div class="session-bars">
                 ${sortedWithDir
                   .slice(0, 50)
                   .map((s) => renderSessionBarRow(s, selectedSet.has(s.key)))}
-                ${
-                  sessions.length > 50
-                    ? html`
+                ${sessions.length > 50
+                  ? html`
                       <div class="usage-more-sessions">
                         ${t("usage.sessions.more", { count: String(sessions.length - 50) })}
                       </div>
                     `
-                    : nothing
-                }
+                  : nothing}
               </div>
-            `
-      }
-      ${
-        selectedCount > 1
-          ? html`
+            `}
+      ${selectedCount > 1
+        ? html`
             <div class="sessions-selected-group">
               <div class="sessions-card-count">
                 ${t("usage.sessions.selected", { count: String(selectedCount) })}
@@ -968,8 +939,7 @@ function renderSessionsCard(
               </div>
             </div>
           `
-          : nothing
-      }
+        : nothing}
     </div>
   `;
 }
diff --git a/ui/src/ui/views/usage.ts b/ui/src/ui/views/usage.ts
index 1bb44c216eb..f83c5b45904 100644
--- a/ui/src/ui/views/usage.ts
+++ b/ui/src/ui/views/usage.ts
@@ -376,11 +376,9 @@ export function renderUsage(props: UsageProps) {
       >
         <summary>
           <span>${label}</span>
-          ${
-            selectedCount > 0
-              ? html`<span class="usage-filter-badge">${selectedCount}</span>`
-              : html` <span class="usage-filter-badge">${t("usage.filters.all")}</span> `
-          }
+          ${selectedCount > 0
+            ? html`<span class="usage-filter-badge">${selectedCount}</span>`
+            : html` <span class="usage-filter-badge">${t("usage.filters.all")}</span> `}
         </summary>
         <div class="usage-filter-popover">
           <div class="usage-filter-actions">
@@ -449,21 +447,16 @@ export function renderUsage(props: UsageProps) {
         <div class="usage-header-row">
           <div class="usage-header-title">
             <div class="card-title usage-section-title">${t("usage.filters.title")}</div>
-            ${
-              data.loading
-                ? html`<span class="usage-refresh-indicator">${t("usage.loading.badge")}</span>`
-                : nothing
-            }
-            ${
-              isEmpty
-                ? html`<span class="usage-query-hint">${t("usage.empty.hint")}</span>`
-                : nothing
-            }
+            ${data.loading
+              ? html`<span class="usage-refresh-indicator">${t("usage.loading.badge")}</span>`
+              : nothing}
+            ${isEmpty
+              ? html`<span class="usage-query-hint">${t("usage.empty.hint")}</span>`
+              : nothing}
           </div>
           <div class="usage-header-metrics">
-            ${
-              displayTotals
-                ? html`
+            ${displayTotals
+              ? html`
                   <span class="usage-metric-badge">
                     <strong>${formatTokens(displayTotals.totalTokens)}</strong>
                     ${t("usage.metrics.tokens")}
@@ -474,15 +467,12 @@ export function renderUsage(props: UsageProps) {
                   </span>
                   <span class="usage-metric-badge">
                     <strong>${displaySessionCount}</strong>
-                    ${
-                      displaySessionCount === 1
-                        ? t("usage.metrics.session")
-                        : t("usage.metrics.sessions")
-                    }
+                    ${displaySessionCount === 1
+                      ? t("usage.metrics.session")
+                      : t("usage.metrics.sessions")}
                   </span>
                 `
-                : nothing
-            }
+              : nothing}
             <button
               class="btn btn--sm usage-pin-btn ${display.headerPinned ? "active" : ""}"
               title=${display.headerPinned ? t("usage.filters.unpin") : t("usage.filters.pin")}
@@ -664,24 +654,20 @@ export function renderUsage(props: UsageProps) {
               >
                 ${t("usage.query.apply")}
               </button>
-              ${
-                hasDraftQuery || hasQuery
-                  ? html`
+              ${hasDraftQuery || hasQuery
+                ? html`
                     <button class="btn btn--sm" @click=${filterActions.onClearQuery}>
                       ${t("usage.filters.clear")}
                     </button>
                   `
-                  : nothing
-              }
+                : nothing}
               <span class="usage-query-hint">
-                ${
-                  hasQuery
-                    ? t("usage.query.matching", {
-                        shown: String(filteredSessions.length),
-                        total: String(totalSessions),
-                      })
-                    : t("usage.query.inRange", { total: String(totalSessions) })
-                }
+                ${hasQuery
+                  ? t("usage.query.matching", {
+                      shown: String(filteredSessions.length),
+                      total: String(totalSessions),
+                    })
+                  : t("usage.query.inRange", { total: String(totalSessions) })}
               </span>
             </div>
           </div>
@@ -693,9 +679,8 @@ export function renderUsage(props: UsageProps) {
             ${renderFilterSelect("tool", t("usage.filters.tool"), toolOptions)}
             <span class="usage-query-hint">${t("usage.query.tip")}</span>
           </div>
-          ${
-            queryTerms.length > 0
-              ? html`
+          ${queryTerms.length > 0
+            ? html`
                 <div class="usage-query-chips">
                   ${queryTerms.map((term) => {
                     const label = term.raw;
@@ -716,11 +701,9 @@ export function renderUsage(props: UsageProps) {
                   })}
                 </div>
               `
-              : nothing
-          }
-          ${
-            querySuggestions.length > 0
-              ? html`
+            : nothing}
+          ${querySuggestions.length > 0
+            ? html`
                 <div class="usage-query-suggestions">
                   ${querySuggestions.map(
                     (suggestion) => html`
@@ -737,35 +720,29 @@ export function renderUsage(props: UsageProps) {
                   )}
                 </div>
               `
-              : nothing
-          }
-          ${
-            queryWarnings.length > 0
-              ? html`
+            : nothing}
+          ${queryWarnings.length > 0
+            ? html`
                 <div class="callout warning usage-callout usage-callout--tight">
                   ${queryWarnings.join(" · ")}
                 </div>
               `
-              : nothing
-          }
+            : nothing}
         </div>
 
-        ${
-          data.error ? html`<div class="callout danger usage-callout">${data.error}</div>` : nothing
-        }
-        ${
-          data.sessionsLimitReached
-            ? html`
+        ${data.error
+          ? html`<div class="callout danger usage-callout">${data.error}</div>`
+          : nothing}
+        ${data.sessionsLimitReached
+          ? html`
               <div class="callout warning usage-callout">${t("usage.sessions.limitReached")}</div>
             `
-            : nothing
-        }
+          : nothing}
       </section>
 
-      ${
-        isEmpty
-          ? renderUsageEmptyState(filterActions.onRefresh)
-          : html`
+      ${isEmpty
+        ? renderUsageEmptyState(filterActions.onRefresh)
+        : html`
             ${renderUsageInsights(
               displayTotals,
               activeAggregates,
@@ -793,11 +770,9 @@ export function renderUsage(props: UsageProps) {
                     displayActions.onDailyChartModeChange,
                     filterActions.onSelectDay,
                   )}
-                  ${
-                    displayTotals
-                      ? renderCostBreakdownCompact(displayTotals, display.chartMode)
-                      : nothing
-                  }
+                  ${displayTotals
+                    ? renderCostBreakdownCompact(displayTotals, display.chartMode)
+                    : nothing}
                 </div>
                 ${renderSessionsCard(
                   filteredSessions,
@@ -817,9 +792,8 @@ export function renderUsage(props: UsageProps) {
                   filterActions.onClearSessions,
                 )}
               </div>
-              ${
-                primarySelectedEntry
-                  ? html`<div class="usage-grid-column">
+              ${primarySelectedEntry
+                ? html`<div class="usage-grid-column">
                     ${renderSessionDetailPanel(
                       primarySelectedEntry,
                       detail.timeSeries,
@@ -849,11 +823,9 @@ export function renderUsage(props: UsageProps) {
                       filterActions.onClearSessions,
                     )}
                   </div>`
-                  : nothing
-              }
+                : nothing}
             </div>
-          `
-      }
+          `}
     </div>
   `;
 }