Make config preview default-aware and adopt a VS Code-style settings layout

[Copilot]

The config preview did not distinguish between an explicit override and an inherited default, even though Wave’s config model treats “key removed” as “use shipped default.” This updates the preview to make default state explicit and reshapes the UI into a more familiar VS Code-style settings surface with left-side groups and stacked setting rows.

• Default is now a first-class state

  • Booleans now support Default (...), plus explicit true/false variants.
  • Selects treat the default option as a real state instead of an empty placeholder.
  • Text/number/font-size controls surface Use Default when a key is overridden.
  • Added small helpers to consistently distinguish:
    • inherited default
    • explicit override
    • effective merged value

• Override state is visible

  • Each setting row now shows Using default or Overridden.
  • Default values are rendered inline, even when the effective value matches an explicit override.
  • The preview includes examples for:
    • inherited values
    • changed overrides
    • empty-string override
    • same-as-default override (window:magnifiedblocksize = 0.95)

• Settings UI now follows a VS Code-style structure

  • Replaced the split form layout with a stacked setting-row layout so titles/descriptions have more room.
  • Added a left-side settings group rail and a single primary content pane on the right.
  • Kept Wave-specific affordances:
    • accent-colored monospace config key
    • Use Default
    • override badges
    • sparse JSON output / effective value comparison

• Preview surface was reorganized

  • The main pane now focuses on one settings group at a time.
  • Supporting panels summarize:
    • effective merged values
    • overridden keys written to settings.json
    • source examples showing default vs override

<ConfigBooleanField
    configKey="term:cursorblink"
    label="Cursor blink"
    value={settings["term:cursorblink"]}
    defaultValue={DefaultSettings["term:cursorblink"]}
    onValueChange={(value) => setSettingsValue(setSettings, "term:cursorblink", value)}
    trueLabel="On"
    falseLabel="Off"
/>

Screenshot:

• https://github.com/user-attachments/assets/6685c496-c39f-42f3-bd8f-8a7697e2cdae

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[cloudflare-workers-and-pages]

Deploying waveterm with    Cloudflare Pages

Latest commit:	b22dc6b
Status:	✅  Deploy successful!
Preview URL:	https://1ade2980.waveterm.pages.dev
Branch Preview URL:	https://copilot-add-config-widgets-p.waveterm.pages.dev

View logs