Merge pull request #19 from ZDOSS/codex/settings-ai-bridge-milestone

Decompose settings and clarify AI bridge readiness

Author: zeidalidiez

AI.md

@@ -194,9 +194,11 @@ The core domain in `packages/core/src/domain/` covers the entities the plan call
 - work-item modal relationship selectors now memoize item and relationship derivations, so transient local-state changes such as typing in comments do not rebuild every relationship group on large projects
 - comment editing disables `Save comment` until the body is non-empty and actually changed; the new-comment composer has a stable `aria-label="New comment"` instead of depending on placeholder text for its accessible name
 - shared `Modal` supports `closeOnEscape={false}` for stacked modal cases; `WorkItemModal` disables its Escape handler while the permanent-delete `ConfirmDialog` is open so Escape only cancels the top confirmation and preserves item-detail drafts
-- settings view with theme, left-panel visibility, editable members, editable statuses, editable priorities, editable types, labels, milestones, custom fields, workflow guardrails, automation rules, plugins, export/import, AI bridge
-- settings workflow and automation sections now live in focused `WorkflowSettings.tsx` and `AutomationSettings.tsx` files instead of expanding the main `SettingsView.tsx` switch further
-- settings sections now expose tab semantics, the edit icon comes from `lucide-react`, and import failures render as inline alerts instead of browser-native `alert()`
+- settings view is now a shell plus focused panels: `SettingsView.tsx` owns grouped tab navigation/tabpanel semantics only, while `GeneralSettings`, `AppearanceSettings`, `StorageSettings`, `ViewsSettings`, `MembersSettings`, `WorkflowSettings`, `LabelsMilestonesSettings`, `CustomFieldsSettings`, `PluginsSettings`, `AutomationSettings`, `ImportExportSettings`, and `BridgeSettings` own their own command wiring
+- settings workflow, automation, and bridge sections should stay out of the shell; add future settings surfaces as focused files under `packages/ui/src/views/settings/` and register them through the shell tab list
+- settings sections expose keyboard-accessible tab semantics with Arrow/Home/End navigation; inactive settings panels stay mounted with `hidden` instead of being unmounted so unsaved local form drafts survive section switches
+- settings edit icons come from `lucide-react`, and import failures render as inline alerts instead of browser-native `alert()`
+- `BridgeSettings.tsx` is truth-in-UI for future AI/MCP integration: it documents real core command coverage and explicitly says no installable bridge/server binary/client config is shipped yet, so do not add setup commands until a bridge runtime exists
 - settings registry tables now follow a consistent edit flow for members/statuses/priorities/types:
   - read-only rows by default
   - explicit edit affordance
@@ -279,6 +281,7 @@ The core domain in `packages/core/src/domain/` covers the entities the plan call
   - bug triage filters for needs-repro and command-backed accept/decline/snooze/assign/duplicate actions
   - bug triage severity/priority filtering, plugin-owned source/context editing, and the configured severity-or-priority intake exit gate
   - automation rule create/update/delete/enable/disable/dry-run commands, dispatcher execution through automation source commands, and Settings automation rule preview/save/toggle/delete flows
+  - settings section decomposition, keyboard tab navigation, draft preservation across panel switches, and AI bridge future-capability copy that avoids placeholder install instructions
   - board-context item creation that uses the first board column default status
   - my-work item creation that preselects the active local member as assignee
   - table priority and updated-date sort direction behavior
@@ -497,6 +500,13 @@ The core domain in `packages/core/src/domain/` covers the entities the plan call
   - redirecting stale archived/deleted doc routes to the first active doc instead of showing the generic empty-docs state
   - suppressing the Markdown Docs section when every document is archived
   - allowing public `doc.create` payloads without a title to create an `Untitled` blank document
+- continued the July 2026 polish/trust pass with settings decomposition and AI bridge truth-in-UI by:
+  - replacing the monolithic Settings switch with a keyboard-accessible grouped tab shell and focused settings panel files
+  - keeping inactive settings panels mounted behind `hidden` so unsaved form drafts are not lost when users switch sections
+  - grouping status, priority, type defaults, and bug-intake guardrails inside the Workflow settings panel
+  - combining labels/milestones and import/export into clearer workflow panels while preserving the existing command paths
+  - replacing placeholder AI bridge install/setup copy with real command-coverage documentation and explicit "not shipped yet" runtime gaps
+  - adding SettingsView regression coverage for panel splitting, keyboard navigation, and bridge truth copy
 
 ## Open follow-on planning
 

Readme.md

@@ -18,7 +18,7 @@ The MVP implementation is in place. The current build supports:
 - **Bug triage** with severity, priority, source/context metadata, reproduction steps, expected/actual behavior, environment, affected version, shared work-card metadata, practical triage filters, accept/decline/snooze/assign/duplicate actions, configurable severity-or-priority intake gates, workflow-safe decline handling, and a visible new-bug entry point that defaults to the Intake lane without starving Ready in custom planned workflows
 - **My work** filtered to the locally selected member with a real member select control, shared work rows, and assigned-to-me creation
 - **Search** across items, docs, comments, and labels with shared search controls and grouped results
-- **Settings** for theme, left-panel visibility, editable members, statuses, priorities, types, labels, milestones, custom fields, workflow guardrails, automation rules, plugins, export, AI bridge, semantic section tabs, and inline import errors
+- **Settings** split into focused panels for general project identity, appearance, storage, visible views, members, workflow, labels/milestones, custom fields, plugin trust, automation rules, import/export, and a truthful AI bridge readiness panel with keyboard-accessible section tabs that preserve in-progress drafts while switching sections
 - **Consistent settings editing** for members, statuses, priorities, types, and plugin trust with explicit edit or save/cancel flows instead of always-live row inputs
 - **Shared navigation config** so sidebar navigation and left-panel visibility toggles stay in sync
 - **Saved planning views** in the project view bar, with board/backlog/table save, update, delete, and reorder flows backed by validated shared filters that preserve multi-value saved filters
@@ -30,7 +30,7 @@ The MVP implementation is in place. The current build supports:
 - **Light and dark themes** with system preference detection
 - **PWA support** with offline service worker
 - **Desktop shell (Tauri)** with folder-backed storage adapter wired to registered Rust commands
-- **Validated command surface** for UI, automation, import, and AI/MCP bridge parity
+- **Validated command surface** for UI, automation, import, and future AI/MCP bridge parity, with the current bridge UI clearly labeled as not yet shipped
 - **Automation rules** with command-backed create/update/delete/enable/disable, dry-run preview, item-event triggers, validated actions for field updates, labels, status, milestones, subtasks, and generated docs, and audited action failures that do not abort the originating item command
 
 ## Quick start
@@ -98,7 +98,7 @@ The UI/UX overhaul planning package lives in `docs/superpowers/specs/2026-07-02-
 | Suite | Count | Notes |
 | --- | --- | --- |
 | `packages/core` | 57 | Domain, storage, dispatcher, document sections/templates, automation rules, export, import |
-| `packages/ui` | 88 | AppShell, ProjectRouter, OverviewView, shared button and surface primitives, WorkItemModal attachment/reminder/custom-field coverage, TrashView, BoardView, saved planning views, BacklogView, BugTriageView, MyWorkView, TableView, RoadmapView, CalendarView, CommandPalette, CreateItemDialog, launcher, docs, settings, automation settings |
+| `packages/ui` | 92 | AppShell, ProjectRouter, OverviewView, shared button and surface primitives, WorkItemModal attachment/reminder/custom-field coverage, TrashView, BoardView, saved planning views, BacklogView, BugTriageView, MyWorkView, TableView, RoadmapView, CalendarView, CommandPalette, CreateItemDialog, launcher, docs, settings, automation settings |
 | `apps/desktop` | 2 | Desktop storage adapter command wiring |
 | `tests/e2e` | 7 | Hybrid parity, project workflow, theme, palette, export, search |
 

docs/plans/July 2026 plan.md

@@ -533,6 +533,8 @@ This combines the original saved-views slice and backlog/table parity slice into
 
 **Intent:** Reduce settings risk and remove placeholder bridge promises.
 
+**Delivery note:** This slice shipped the focused settings panel decomposition, keyboard-accessible grouped settings tabs, and an AI bridge panel that documents real command coverage while clearly stating that no installable bridge runtime is shipped yet. Broader responsive/release polish remains in PR 11.
+
 **Files:**
 
 - Split: `packages/ui/src/views/settings/SettingsView.tsx`
@@ -541,11 +543,11 @@ This combines the original saved-views slice and backlog/table parity slice into
 - Modify: `AI.md`
 - Modify: `Readme.md`
 
-- [ ] Split settings into focused components: general, appearance, storage, views, members, workflow, labels/milestones, fields, plugins, automation, import/export, AI bridge.
-- [ ] Replace placeholder AI bridge install copy with either implemented instructions or clearly labeled future capability copy.
-- [ ] Add a bridge capability checklist tied to real command coverage.
-- [ ] Keep plugin trust language risk-aware.
-- [ ] Verify settings navigation remains keyboard accessible.
+- [x] Split settings into focused components: general, appearance, storage, views, members, workflow, labels/milestones, fields, plugins, automation, import/export, AI bridge.
+- [x] Replace placeholder AI bridge install copy with either implemented instructions or clearly labeled future capability copy.
+- [x] Add a bridge capability checklist tied to real command coverage.
+- [x] Keep plugin trust language risk-aware.
+- [x] Verify settings navigation remains keyboard accessible.
 
 ### PR 11: Responsive, Accessibility, And Release Polish
 

packages/ui/src/theme/global.css

@@ -1871,6 +1871,185 @@
 .tag-bad { background: var(--color-bg-status-blocked); color: var(--color-text-on-status); }
 .tag-info { background: var(--color-accent-soft); color: var(--color-text-primary); }
 
+/* ---- Settings ---- */
+.settings-view {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: var(--space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+.settings-page-header {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: var(--space-4);
+}
+.settings-page-header h2 {
+  margin: 0 0 4px;
+}
+.settings-page-header p,
+.settings-panel-header p,
+.settings-card-header p,
+.settings-capability-row p {
+  margin: 0;
+}
+.settings-shell {
+  display: grid;
+  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
+  gap: var(--space-4);
+  align-items: start;
+}
+.settings-nav {
+  position: sticky;
+  top: var(--space-4);
+  align-self: start;
+  max-height: calc(100vh - 132px);
+  overflow: auto;
+  padding: var(--space-2);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-surface);
+}
+.settings-tablist,
+.settings-nav-group,
+.settings-panel-stack,
+.settings-section-card,
+.settings-card-header,
+.settings-capability-list {
+  display: flex;
+  flex-direction: column;
+}
+.settings-tablist {
+  gap: var(--space-3);
+}
+.settings-nav-group {
+  gap: 4px;
+}
+.settings-nav-group-title {
+  padding: 0 var(--space-2);
+  font-size: var(--font-size-2xs);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--color-text-secondary);
+}
+.settings-tab {
+  display: grid;
+  gap: 2px;
+  width: 100%;
+  padding: 8px 10px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-text-primary);
+  text-align: left;
+  cursor: pointer;
+}
+.settings-tab:hover {
+  background: var(--color-bg-row-hover);
+}
+.settings-tab:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+.settings-tab span {
+  font-size: var(--font-size-sm);
+  font-weight: 700;
+}
+.settings-tab small {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-2xs);
+  line-height: 1.35;
+}
+.settings-tab-active {
+  background: var(--color-accent-soft);
+  border-color: var(--color-border-subtle);
+  box-shadow: inset 3px 0 0 var(--color-accent);
+}
+.settings-content-panel {
+  min-width: 0;
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-elevated);
+  padding: var(--space-4);
+}
+.settings-content-panel:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+.settings-panel-stack {
+  gap: var(--space-4);
+  max-width: 760px;
+}
+.settings-panel-wide {
+  max-width: 1180px;
+}
+.settings-panel-header {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.settings-panel-header h3,
+.settings-card-header h4 {
+  margin: 0;
+}
+.settings-section-card {
+  gap: var(--space-3);
+  padding: var(--space-4);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-surface);
+}
+.settings-card-header {
+  gap: 4px;
+}
+.settings-inline-form {
+  align-items: center;
+  flex-wrap: wrap;
+}
+.settings-inline-form .input,
+.settings-inline-form .select {
+  min-width: 180px;
+}
+.settings-simple-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  padding: 10px 0;
+  border-top: 1px solid var(--color-border-subtle);
+}
+.settings-truth-callout {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: var(--space-3);
+  border: 1px solid var(--color-border-subtle);
+  border-left: 4px solid var(--color-accent);
+  border-radius: var(--radius-sm);
+  background: var(--color-accent-soft);
+}
+.settings-bridge-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
+  gap: var(--space-4);
+  align-items: start;
+}
+.settings-capability-list {
+  gap: var(--space-2);
+}
+.settings-capability-row {
+  display: grid;
+  grid-template-columns: minmax(112px, auto) minmax(0, 1fr);
+  gap: var(--space-3);
+  align-items: start;
+  padding: 10px 0;
+  border-top: 1px solid var(--color-border-subtle);
+}
+
 /* ---- Settings grids ---- */
 .settings-grid {
   display: grid;
@@ -1963,7 +2142,7 @@
   flex-wrap: wrap;
 }
 
-/* ── Visual pass additions ─────────────────────────────────────────────────── */
+/* ---- Visual pass additions ---- */
 
 /* Sidebar brand block (replaces plain h1) */
 .sidebar-brand {
@@ -2086,6 +2265,36 @@
   .overview-metrics {
     grid-template-columns: 1fr;
   }
+  .settings-view {
+    padding: var(--space-3);
+  }
+  .settings-page-header {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+  .settings-shell,
+  .settings-bridge-grid {
+    grid-template-columns: 1fr;
+  }
+  .settings-nav {
+    position: static;
+    max-height: none;
+  }
+  .settings-tablist {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  }
+  .settings-inline-form {
+    align-items: stretch;
+    flex-direction: column;
+  }
+  .settings-inline-form .input,
+  .settings-inline-form .select {
+    min-width: 0;
+  }
+  .settings-capability-row {
+    grid-template-columns: 1fr;
+  }
   .settings-table-header,
   .settings-table-row,
   .settings-table-row-member,

packages/ui/src/views/settings/AppearanceSettings.tsx

@@ -0,0 +1,23 @@
+import { useTheme } from "../../theme/theme-provider";
+import { SettingsPanelHeader } from "./settings-shared";
+
+export function AppearanceSettings() {
+  const { setTheme, theme } = useTheme();
+
+  return (
+    <div className="settings-panel-stack">
+      <SettingsPanelHeader
+        title="Appearance"
+        description="Keep the workspace readable in light, dark, or system-controlled mode."
+      />
+      <label className="label label-row">
+        Theme
+        <select className="select" value={theme} onChange={(event) => setTheme(event.target.value as "light" | "dark" | "system")}>
+          <option value="system">System</option>
+          <option value="light">Light</option>
+          <option value="dark">Dark</option>
+        </select>
+      </label>
+    </div>
+  );
+}