openclaw-multi-auto 1.3.6 → 1.3.8

package/ui/src/ui/views/config.ts

@@ -0,0 +1,820 @@
+import { html, nothing } from "lit";
+import type { ConfigUiHints } from "../types.ts";
+import { hintForPath, humanize, schemaType, type JsonSchema } from "./config-form.shared.ts";
+import { analyzeConfigSchema, renderConfigForm, SECTION_META } from "./config-form.ts";
+import { getTagFilters, replaceTagFilters } from "./config-search.ts";
+
+export type ConfigProps = {
+  raw: string;
+  originalRaw: string;
+  valid: boolean | null;
+  issues: unknown[];
+  loading: boolean;
+  saving: boolean;
+  applying: boolean;
+  updating: boolean;
+  connected: boolean;
+  schema: unknown;
+  schemaLoading: boolean;
+  uiHints: ConfigUiHints;
+  formMode: "form" | "raw";
+  formValue: Record<string, unknown> | null;
+  originalValue: Record<string, unknown> | null;
+  searchQuery: string;
+  activeSection: string | null;
+  activeSubsection: string | null;
+  onRawChange: (next: string) => void;
+  onFormModeChange: (mode: "form" | "raw") => void;
+  onFormPatch: (path: Array<string | number>, value: unknown) => void;
+  onSearchChange: (query: string) => void;
+  onSectionChange: (section: string | null) => void;
+  onSubsectionChange: (section: string | null) => void;
+  onReload: () => void;
+  onSave: () => void;
+  onApply: () => void;
+  onUpdate: () => void;
+};
+
+const TAG_SEARCH_PRESETS = [
+  "security",
+  "auth",
+  "network",
+  "access",
+  "privacy",
+  "observability",
+  "performance",
+  "reliability",
+  "storage",
+  "models",
+  "media",
+  "automation",
+  "channels",
+  "tools",
+  "advanced",
+] as const;
+
+// SVG Icons for sidebar (Lucide-style)
+const sidebarIcons = {
+  all: html`
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <rect x="3" y="3" width="7" height="7"></rect>
+      <rect x="14" y="3" width="7" height="7"></rect>
+      <rect x="14" y="14" width="7" height="7"></rect>
+      <rect x="3" y="14" width="7" height="7"></rect>
+    </svg>
+  `,
+  env: html`
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <circle cx="12" cy="12" r="3"></circle>
+      <path
+        d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
+      ></path>
+    </svg>
+  `,
+  update: html`
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+      <polyline points="7 10 12 15 17 10"></polyline>
+      <line x1="12" y1="15" x2="12" y2="3"></line>
+    </svg>
+  `,
+  agents: html`
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path
+        d="M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 0 1 7 7h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a7 7 0 0 1 7-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2z"
+      ></path>
+      <circle cx="8" cy="14" r="1"></circle>
+      <circle cx="16" cy="14" r="1"></circle>
+    </svg>
+  `,
+  auth: html`
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
+      <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
+    </svg>
+  `,
+  channels: html`
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+    </svg>
+  `,
+  messages: html`
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
+      <polyline points="22,6 12,13 2,6"></polyline>
+    </svg>
+  `,
+  commands: html`
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <polyline points="4 17 10 11 4 5"></polyline>
+      <line x1="12" y1="19" x2="20" y2="19"></line>
+    </svg>
+  `,
+  hooks: html`
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
+      <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
+    </svg>
+  `,
+  skills: html`
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <polygon
+        points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
+      ></polygon>
+    </svg>
+  `,
+  tools: html`
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path
+        d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
+      ></path>
+    </svg>
+  `,
+  gateway: html`
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <circle cx="12" cy="12" r="10"></circle>
+      <line x1="2" y1="12" x2="22" y2="12"></line>
+      <path
+        d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
+      ></path>
+    </svg>
+  `,
+  wizard: html`
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path d="M15 4V2"></path>
+      <path d="M15 16v-2"></path>
+      <path d="M8 9h2"></path>
+      <path d="M20 9h2"></path>
+      <path d="M17.8 11.8 19 13"></path>
+      <path d="M15 9h0"></path>
+      <path d="M17.8 6.2 19 5"></path>
+      <path d="m3 21 9-9"></path>
+      <path d="M12.2 6.2 11 5"></path>
+    </svg>
+  `,
+  // Additional sections
+  meta: html`
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path d="M12 20h9"></path>
+      <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"></path>
+    </svg>
+  `,
+  logging: html`
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+      <polyline points="14 2 14 8 20 8"></polyline>
+      <line x1="16" y1="13" x2="8" y2="13"></line>
+      <line x1="16" y1="17" x2="8" y2="17"></line>
+      <polyline points="10 9 9 9 8 9"></polyline>
+    </svg>
+  `,
+  browser: html`
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <circle cx="12" cy="12" r="10"></circle>
+      <circle cx="12" cy="12" r="4"></circle>
+      <line x1="21.17" y1="8" x2="12" y2="8"></line>
+      <line x1="3.95" y1="6.06" x2="8.54" y2="14"></line>
+      <line x1="10.88" y1="21.94" x2="15.46" y2="14"></line>
+    </svg>
+  `,
+  ui: html`
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+      <line x1="3" y1="9" x2="21" y2="9"></line>
+      <line x1="9" y1="21" x2="9" y2="9"></line>
+    </svg>
+  `,
+  models: html`
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path
+        d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
+      ></path>
+      <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
+      <line x1="12" y1="22.08" x2="12" y2="12"></line>
+    </svg>
+  `,
+  bindings: html`
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect>
+      <rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect>
+      <line x1="6" y1="6" x2="6.01" y2="6"></line>
+      <line x1="6" y1="18" x2="6.01" y2="18"></line>
+    </svg>
+  `,
+  broadcast: html`
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path d="M4.9 19.1C1 15.2 1 8.8 4.9 4.9"></path>
+      <path d="M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5"></path>
+      <circle cx="12" cy="12" r="2"></circle>
+      <path d="M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5"></path>
+      <path d="M19.1 4.9C23 8.8 23 15.1 19.1 19"></path>
+    </svg>
+  `,
+  audio: html`
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path d="M9 18V5l12-2v13"></path>
+      <circle cx="6" cy="18" r="3"></circle>
+      <circle cx="18" cy="16" r="3"></circle>
+    </svg>
+  `,
+  session: html`
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+      <circle cx="9" cy="7" r="4"></circle>
+      <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
+      <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
+    </svg>
+  `,
+  cron: html`
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <circle cx="12" cy="12" r="10"></circle>
+      <polyline points="12 6 12 12 16 14"></polyline>
+    </svg>
+  `,
+  web: html`
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <circle cx="12" cy="12" r="10"></circle>
+      <line x1="2" y1="12" x2="22" y2="12"></line>
+      <path
+        d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
+      ></path>
+    </svg>
+  `,
+  discovery: html`
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <circle cx="11" cy="11" r="8"></circle>
+      <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+    </svg>
+  `,
+  canvasHost: html`
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+      <circle cx="8.5" cy="8.5" r="1.5"></circle>
+      <polyline points="21 15 16 10 5 21"></polyline>
+    </svg>
+  `,
+  talk: html`
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
+      <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
+      <line x1="12" y1="19" x2="12" y2="23"></line>
+      <line x1="8" y1="23" x2="16" y2="23"></line>
+    </svg>
+  `,
+  plugins: html`
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path d="M12 2v6"></path>
+      <path d="m4.93 10.93 4.24 4.24"></path>
+      <path d="M2 12h6"></path>
+      <path d="m4.93 13.07 4.24-4.24"></path>
+      <path d="M12 22v-6"></path>
+      <path d="m19.07 13.07-4.24-4.24"></path>
+      <path d="M22 12h-6"></path>
+      <path d="m19.07 10.93-4.24 4.24"></path>
+    </svg>
+  `,
+  default: html`
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+      <polyline points="14 2 14 8 20 8"></polyline>
+    </svg>
+  `,
+};
+
+// Section definitions
+const SECTIONS: Array<{ key: string; label: string }> = [
+  { key: "env", label: "Environment" },
+  { key: "update", label: "Updates" },
+  { key: "agents", label: "Agents" },
+  { key: "auth", label: "Authentication" },
+  { key: "channels", label: "Channels" },
+  { key: "messages", label: "Messages" },
+  { key: "commands", label: "Commands" },
+  { key: "hooks", label: "Hooks" },
+  { key: "skills", label: "Skills" },
+  { key: "tools", label: "Tools" },
+  { key: "gateway", label: "Gateway" },
+  { key: "wizard", label: "Setup Wizard" },
+];
+
+type SubsectionEntry = {
+  key: string;
+  label: string;
+  description?: string;
+  order: number;
+};
+
+const ALL_SUBSECTION = "__all__";
+
+function getSectionIcon(key: string) {
+  return sidebarIcons[key as keyof typeof sidebarIcons] ?? sidebarIcons.default;
+}
+
+function resolveSectionMeta(
+  key: string,
+  schema?: JsonSchema,
+): {
+  label: string;
+  description?: string;
+} {
+  const meta = SECTION_META[key];
+  if (meta) {
+    return meta;
+  }
+  return {
+    label: schema?.title ?? humanize(key),
+    description: schema?.description ?? "",
+  };
+}
+
+function resolveSubsections(params: {
+  key: string;
+  schema: JsonSchema | undefined;
+  uiHints: ConfigUiHints;
+}): SubsectionEntry[] {
+  const { key, schema, uiHints } = params;
+  if (!schema || schemaType(schema) !== "object" || !schema.properties) {
+    return [];
+  }
+  const entries = Object.entries(schema.properties).map(([subKey, node]) => {
+    const hint = hintForPath([key, subKey], uiHints);
+    const label = hint?.label ?? node.title ?? humanize(subKey);
+    const description = hint?.help ?? node.description ?? "";
+    const order = hint?.order ?? 50;
+    return { key: subKey, label, description, order };
+  });
+  entries.sort((a, b) => (a.order !== b.order ? a.order - b.order : a.key.localeCompare(b.key)));
+  return entries;
+}
+
+function computeDiff(
+  original: Record<string, unknown> | null,
+  current: Record<string, unknown> | null,
+): Array<{ path: string; from: unknown; to: unknown }> {
+  if (!original || !current) {
+    return [];
+  }
+  const changes: Array<{ path: string; from: unknown; to: unknown }> = [];
+
+  function compare(orig: unknown, curr: unknown, path: string) {
+    if (orig === curr) {
+      return;
+    }
+    if (typeof orig !== typeof curr) {
+      changes.push({ path, from: orig, to: curr });
+      return;
+    }
+    if (typeof orig !== "object" || orig === null || curr === null) {
+      if (orig !== curr) {
+        changes.push({ path, from: orig, to: curr });
+      }
+      return;
+    }
+    if (Array.isArray(orig) && Array.isArray(curr)) {
+      if (JSON.stringify(orig) !== JSON.stringify(curr)) {
+        changes.push({ path, from: orig, to: curr });
+      }
+      return;
+    }
+    const origObj = orig as Record<string, unknown>;
+    const currObj = curr as Record<string, unknown>;
+    const allKeys = new Set([...Object.keys(origObj), ...Object.keys(currObj)]);
+    for (const key of allKeys) {
+      compare(origObj[key], currObj[key], path ? `${path}.${key}` : key);
+    }
+  }
+
+  compare(original, current, "");
+  return changes;
+}
+
+function truncateValue(value: unknown, maxLen = 40): string {
+  let str: string;
+  try {
+    const json = JSON.stringify(value);
+    str = json ?? String(value);
+  } catch {
+    str = String(value);
+  }
+  if (str.length <= maxLen) {
+    return str;
+  }
+  return str.slice(0, maxLen - 3) + "...";
+}
+
+export function renderConfig(props: ConfigProps) {
+  const validity = props.valid == null ? "unknown" : props.valid ? "valid" : "invalid";
+  const analysis = analyzeConfigSchema(props.schema);
+  const formUnsafe = analysis.schema ? analysis.unsupportedPaths.length > 0 : false;
+
+  // Get available sections from schema
+  const schemaProps = analysis.schema?.properties ?? {};
+  const availableSections = SECTIONS.filter((s) => s.key in schemaProps);
+
+  // Add any sections in schema but not in our list
+  const knownKeys = new Set(SECTIONS.map((s) => s.key));
+  const extraSections = Object.keys(schemaProps)
+    .filter((k) => !knownKeys.has(k))
+    .map((k) => ({ key: k, label: k.charAt(0).toUpperCase() + k.slice(1) }));
+
+  const allSections = [...availableSections, ...extraSections];
+
+  const activeSectionSchema =
+    props.activeSection && analysis.schema && schemaType(analysis.schema) === "object"
+      ? analysis.schema.properties?.[props.activeSection]
+      : undefined;
+  const activeSectionMeta = props.activeSection
+    ? resolveSectionMeta(props.activeSection, activeSectionSchema)
+    : null;
+  const subsections = props.activeSection
+    ? resolveSubsections({
+        key: props.activeSection,
+        schema: activeSectionSchema,
+        uiHints: props.uiHints,
+      })
+    : [];
+  const allowSubnav =
+    props.formMode === "form" && Boolean(props.activeSection) && subsections.length > 0;
+  const isAllSubsection = props.activeSubsection === ALL_SUBSECTION;
+  const effectiveSubsection = props.searchQuery
+    ? null
+    : isAllSubsection
+      ? null
+      : (props.activeSubsection ?? subsections[0]?.key ?? null);
+
+  // Compute diff for showing changes (works for both form and raw modes)
+  const diff = props.formMode === "form" ? computeDiff(props.originalValue, props.formValue) : [];
+  const hasRawChanges = props.formMode === "raw" && props.raw !== props.originalRaw;
+  const hasChanges = props.formMode === "form" ? diff.length > 0 : hasRawChanges;
+
+  // Save/apply buttons require actual changes to be enabled.
+  // Note: formUnsafe warns about unsupported schema paths but shouldn't block saving.
+  const canSaveForm = Boolean(props.formValue) && !props.loading && Boolean(analysis.schema);
+  const canSave =
+    props.connected &&
+    !props.saving &&
+    hasChanges &&
+    (props.formMode === "raw" ? true : canSaveForm);
+  const canApply =
+    props.connected &&
+    !props.applying &&
+    !props.updating &&
+    hasChanges &&
+    (props.formMode === "raw" ? true : canSaveForm);
+  const canUpdate = props.connected && !props.applying && !props.updating;
+  const selectedTags = new Set(getTagFilters(props.searchQuery));
+
+  return html`
+    <div class="config-layout">
+      <!-- Sidebar -->
+      <aside class="config-sidebar">
+        <div class="config-sidebar__header">
+          <div class="config-sidebar__title">Settings</div>
+          <span
+            class="pill pill--sm ${
+              validity === "valid" ? "pill--ok" : validity === "invalid" ? "pill--danger" : ""
+            }"
+            >${validity}</span
+          >
+        </div>
+
+        <!-- Search -->
+        <div class="config-search">
+          <div class="config-search__input-row">
+            <svg
+              class="config-search__icon"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <circle cx="11" cy="11" r="8"></circle>
+              <path d="M21 21l-4.35-4.35"></path>
+            </svg>
+            <input
+              type="text"
+              class="config-search__input"
+              placeholder="Search settings..."
+              .value=${props.searchQuery}
+              @input=${(e: Event) => props.onSearchChange((e.target as HTMLInputElement).value)}
+            />
+            ${
+              props.searchQuery
+                ? html`
+                  <button
+                    class="config-search__clear"
+                    @click=${() => props.onSearchChange("")}
+                  >
+                    ×
+                  </button>
+                `
+                : nothing
+            }
+          </div>
+          <div class="config-search__hint">
+            <span class="config-search__hint-label" id="config-tag-filter-label">Tag filters:</span>
+            <details class="config-search__tag-picker">
+              <summary class="config-search__tag-trigger" aria-labelledby="config-tag-filter-label">
+                ${
+                  selectedTags.size === 0
+                    ? html`
+                        <span class="config-search__tag-placeholder">Add tags</span>
+                      `
+                    : html`
+                        <div class="config-search__tag-chips">
+                          ${Array.from(selectedTags)
+                            .slice(0, 2)
+                            .map(
+                              (tag) =>
+                                html`<span class="config-search__tag-chip">tag:${tag}</span>`,
+                            )}
+                          ${
+                            selectedTags.size > 2
+                              ? html`
+                                  <span class="config-search__tag-chip config-search__tag-chip--count"
+                                    >+${selectedTags.size - 2}</span
+                                  >
+                                `
+                              : nothing
+                          }
+                        </div>
+                      `
+                }
+                <span class="config-search__tag-caret" aria-hidden="true">▾</span>
+              </summary>
+              <div class="config-search__tag-menu">
+                ${TAG_SEARCH_PRESETS.map((tag) => {
+                  const active = selectedTags.has(tag);
+                  return html`
+                    <button
+                      type="button"
+                      class="config-search__tag-option ${active ? "active" : ""}"
+                      data-tag="${tag}"
+                      aria-pressed=${active ? "true" : "false"}
+                      @click=${() => {
+                        const nextTags = active
+                          ? Array.from(selectedTags).filter((value) => value !== tag)
+                          : [...selectedTags, tag];
+                        props.onSearchChange(replaceTagFilters(props.searchQuery, nextTags));
+                      }}
+                    >
+                      tag:${tag}
+                    </button>
+                  `;
+                })}
+              </div>
+            </details>
+          </div>
+        </div>
+
+        <!-- Section nav -->
+        <nav class="config-nav">
+          <button
+            class="config-nav__item ${props.activeSection === null ? "active" : ""}"
+            @click=${() => props.onSectionChange(null)}
+          >
+            <span class="config-nav__icon">${sidebarIcons.all}</span>
+            <span class="config-nav__label">All Settings</span>
+          </button>
+          ${allSections.map(
+            (section) => html`
+              <button
+                class="config-nav__item ${props.activeSection === section.key ? "active" : ""}"
+                @click=${() => props.onSectionChange(section.key)}
+              >
+                <span class="config-nav__icon"
+                  >${getSectionIcon(section.key)}</span
+                >
+                <span class="config-nav__label">${section.label}</span>
+              </button>
+            `,
+          )}
+        </nav>
+
+        <!-- Mode toggle at bottom -->
+        <div class="config-sidebar__footer">
+          <div class="config-mode-toggle">
+            <button
+              class="config-mode-toggle__btn ${props.formMode === "form" ? "active" : ""}"
+              ?disabled=${props.schemaLoading || !props.schema}
+              @click=${() => props.onFormModeChange("form")}
+            >
+              Form
+            </button>
+            <button
+              class="config-mode-toggle__btn ${props.formMode === "raw" ? "active" : ""}"
+              @click=${() => props.onFormModeChange("raw")}
+            >
+              Raw
+            </button>
+          </div>
+        </div>
+      </aside>
+
+      <!-- Main content -->
+      <main class="config-main">
+        <!-- Action bar -->
+        <div class="config-actions">
+          <div class="config-actions__left">
+            ${
+              hasChanges
+                ? html`
+                  <span class="config-changes-badge"
+                    >${
+                      props.formMode === "raw"
+                        ? "Unsaved changes"
+                        : `${diff.length} unsaved change${diff.length !== 1 ? "s" : ""}`
+                    }</span
+                  >
+                `
+                : html`
+                    <span class="config-status muted">No changes</span>
+                  `
+            }
+          </div>
+          <div class="config-actions__right">
+            <button
+              class="btn btn--sm"
+              ?disabled=${props.loading}
+              @click=${props.onReload}
+            >
+              ${props.loading ? "Loading…" : "Reload"}
+            </button>
+            <button
+              class="btn btn--sm primary"
+              ?disabled=${!canSave}
+              @click=${props.onSave}
+            >
+              ${props.saving ? "Saving…" : "Save"}
+            </button>
+            <button
+              class="btn btn--sm"
+              ?disabled=${!canApply}
+              @click=${props.onApply}
+            >
+              ${props.applying ? "Applying…" : "Apply"}
+            </button>
+            <button
+              class="btn btn--sm"
+              ?disabled=${!canUpdate}
+              @click=${props.onUpdate}
+            >
+              ${props.updating ? "Updating…" : "Update"}
+            </button>
+          </div>
+        </div>
+
+        <!-- Diff panel (form mode only - raw mode doesn't have granular diff) -->
+        ${
+          hasChanges && props.formMode === "form"
+            ? html`
+              <details class="config-diff">
+                <summary class="config-diff__summary">
+                  <span
+                    >View ${diff.length} pending
+                    change${diff.length !== 1 ? "s" : ""}</span
+                  >
+                  <svg
+                    class="config-diff__chevron"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
+                    <polyline points="6 9 12 15 18 9"></polyline>
+                  </svg>
+                </summary>
+                <div class="config-diff__content">
+                  ${diff.map(
+                    (change) => html`
+                      <div class="config-diff__item">
+                        <div class="config-diff__path">${change.path}</div>
+                        <div class="config-diff__values">
+                          <span class="config-diff__from"
+                            >${truncateValue(change.from)}</span
+                          >
+                          <span class="config-diff__arrow">→</span>
+                          <span class="config-diff__to"
+                            >${truncateValue(change.to)}</span
+                          >
+                        </div>
+                      </div>
+                    `,
+                  )}
+                </div>
+              </details>
+            `
+            : nothing
+        }
+        ${
+          activeSectionMeta && props.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}
+                      </div>`
+                      : nothing
+                  }
+                </div>
+              </div>
+            `
+            : nothing
+        }
+        ${
+          allowSubnav
+            ? html`
+              <div class="config-subnav">
+                <button
+                  class="config-subnav__item ${effectiveSubsection === null ? "active" : ""}"
+                  @click=${() => props.onSubsectionChange(ALL_SUBSECTION)}
+                >
+                  All
+                </button>
+                ${subsections.map(
+                  (entry) => html`
+                    <button
+                      class="config-subnav__item ${
+                        effectiveSubsection === entry.key ? "active" : ""
+                      }"
+                      title=${entry.description || entry.label}
+                      @click=${() => props.onSubsectionChange(entry.key)}
+                    >
+                      ${entry.label}
+                    </button>
+                  `,
+                )}
+              </div>
+            `
+            : nothing
+        }
+
+        <!-- Form content -->
+        <div class="config-content">
+          ${
+            props.formMode === "form"
+              ? html`
+                ${
+                  props.schemaLoading
+                    ? html`
+                        <div class="config-loading">
+                          <div class="config-loading__spinner"></div>
+                          <span>Loading schema…</span>
+                        </div>
+                      `
+                    : renderConfigForm({
+                        schema: analysis.schema,
+                        uiHints: props.uiHints,
+                        value: props.formValue,
+                        disabled: props.loading || !props.formValue,
+                        unsupportedPaths: analysis.unsupportedPaths,
+                        onPatch: props.onFormPatch,
+                        searchQuery: props.searchQuery,
+                        activeSection: props.activeSection,
+                        activeSubsection: effectiveSubsection,
+                      })
+                }
+                ${
+                  formUnsafe
+                    ? html`
+                        <div class="callout danger" style="margin-top: 12px">
+                          Form view can't safely edit some fields. Use Raw to avoid losing config entries.
+                        </div>
+                      `
+                    : nothing
+                }
+              `
+              : html`
+                <label class="field config-raw-field">
+                  <span>Raw JSON5</span>
+                  <textarea
+                    .value=${props.raw}
+                    @input=${(e: Event) =>
+                      props.onRawChange((e.target as HTMLTextAreaElement).value)}
+                  ></textarea>
+                </label>
+              `
+          }
+        </div>
+
+        ${
+          props.issues.length > 0
+            ? html`<div class="callout danger" style="margin-top: 12px;">
+              <pre class="code-block">
+${JSON.stringify(props.issues, null, 2)}</pre
+              >
+            </div>`
+            : nothing
+        }
+      </main>
+    </div>
+  `;
+}