AD-27 Add Settings UI panel with gear icon in activity bar

[Finfinder]

Objective

Add a Settings UI panel to the workbench, accessible via a gear/cog icon button in the activity bar (above the profile icon). The settings panel should display configuration options organized thematically in a tabbed interface or a navigation tree, and be designed for incremental expansion as new features are added.

Context

The current Settings Service (packages/services/src/settings.ts) only handles theme persistence (dark/light) via a JSON file on disk. There is no UI for viewing or editing settings — users must manually edit the configuration file. AD-13 (Phase 13) listed settings as an MVP hardening item, but no dedicated settings UI was implemented. This issue introduces the settings panel as a first-class workbench panel alongside Explorer, Search, and Chat.

Scope

Activity Bar

• Add a gear/cog icon button at the bottom of the activity bar, above the identity/profile icon
• Button toggles the settings panel open/closed (same pattern as Explorer/Search/Chat)
• Use a standard gear SVG icon (16x16 viewBox, stroke-based for dark theme compatibility)

Settings Panel Layout

• When opened, the settings panel replaces the current sidebar content (same behavior as other panels)
• Two layout options (implementer's choice, document decision in PR):
  • Option A — Tabbed: horizontal tabs at the top of the panel for each settings category (Appearance, Editor, Extensions, Agent Runtime, MCP, etc.)
  • Option B — Navigation tree: a collapsible tree on the left side of the panel (similar to VS Code Settings), with category nodes expanding to show sub-categories and individual settings
• Recommendation: Option B (navigation tree) for better scalability as the number of settings categories grows

Initial Settings Categories (MVP)

1. Appearance — theme selection (dark/light), accent color (future), font size
2. Editor — tab size, word wrap, minimap, line numbers (read-only display of current Monaco config)
3. Agent Runtime — default model, max tokens, temperature (display from Model Gateway config)
4. MCP — list of configured MCP servers, their status (running/failed/disabled), trust state
5. Extensions — list of installed extensions, enable/disable toggle
6. About — app version, Electron/Node/Chrome versions, license

Settings Service Extension

• Extend packages/services/src/settings.ts to support typed settings beyond theme (schema-based)
• Add IPC channels for reading/writing settings by category
• Settings file format: JSON with category keys, validated on read
• Secure storage for sensitive values (API keys) — use OS-level secure storage via keytar or Electron safeStorage

IPC Channels (new)

• �gentdeck:v1:settings:get-all — read all settings
• �gentdeck:v1:settings:get-category — read settings by category key
• �gentdeck:v1:settings:set-category — write settings by category key
• �gentdeck:v1:settings:changed — push event when settings change

Shared Types (new)

• Add SettingsCategory, SettingsSchema, SettingsValue types to packages/shared/src/ipc.ts
• Add SettingsPanel type to domain model in packages/shared/src/domain.ts

Rationale

A settings UI is essential for MVP usability. Without it, users cannot configure the IDE without manually editing JSON files. The navigation tree pattern scales well as new features (and their configuration options) are added incrementally. Starting with read-only display of current values and theme editing provides immediate value, with write support for other categories added incrementally.

Benefits

• Users can configure the IDE through a familiar VS Code-like settings interface
• Navigation tree pattern supports incremental expansion without UI redesign
• Centralized settings management reduces configuration errors
• Read-only categories provide visibility into current configuration even before full edit support
• Foundation for future features: settings search, workspace-level overrides, settings sync

Definition of Done

• Gear/cog icon button appears in activity bar above the profile icon
• Clicking the gear icon opens the settings panel in the sidebar area
• Settings panel displays a navigation tree with at least 6 categories (Appearance, Editor, Agent Runtime, MCP, Extensions, About)
• Appearance category allows switching between dark and light theme (functional, wired to existing theme service)
• Other categories display current configuration values (read-only is acceptable for MVP)
• Settings panel closes when another activity bar button is clicked
• New IPC channels for settings CRUD are registered in preload and main process
• Shared types for settings are added to packages/shared
• Settings file is validated on read with safe fallback to defaults
• Keyboard navigation works in the navigation tree (arrow keys, Enter to expand/collapse)
• All UI elements meet WCAG 2.1 AA contrast requirements
• No direct Node API access from renderer — all settings operations go through preload IPC

Milestone

1.0 Stabilize MVP