refactor(web): lift and rename shared settings components/hooks/stores (LUM-1918)

[ashleeradka]

Prompt / plan

LUM-1918: Cross-domain import violations — contacts and logs domains importing from domains/settings/. Per CONVENTIONS.md — Decision rule for hooks/stores/utils, code used by 2+ domains must live in top-level shared directories.

What moved and why

Old name	New name	From	To	Reason
SettingsCard	DetailCard	domains/settings/components/	components/detail-card.tsx	Generic card layout used by contacts (3) + settings (20)
SettingsShell	SidebarShell	domains/settings/components/	components/sidebar-shell.tsx	Generic sidebar+content layout used by logs + settings
SettingsSidebarTree	SidebarTree	domains/settings/components/	components/sidebar-tree.tsx	Generic nav tree used by logs + settings
useCurrentPlatformAssistant	(unchanged)	domains/settings/hooks/	hooks/	Used by 4 logs pages + settings assistant-picker
currentPlatformAssistantStore	(unchanged)	domains/settings/	stores/	Zustand store backing the hook above

Why rename

The three components are generic layout primitives, not settings-specific. They originated in the settings domain but are used across multiple domains (contacts, logs, settings). The "Settings" prefix was misleading — these are a detail card, a sidebar shell, and a sidebar navigation tree.

Related type/interface renames:

• SettingsCardProps → DetailCardProps
• SettingsSidebarItem → SidebarItem

Follow-up: design library extraction

LUM-1934 — DetailCard (zero app deps) and SidebarTree (needs react-router decoupling) are candidates for @vellum/design-library. SidebarShell stays app-level due to routing coupling.

Allowlist changes

8 entries removed from .cross-domain-allowlist.json:

• contacts/components/assistant-channels-detail.tsx (settings)
• contacts/components/contact-detail-view.tsx (settings)
• contacts/components/guardian-detail-view.tsx (settings)
• logs/logs-layout.tsx (settings)
• logs/pages/emails-page.tsx (settings)
• logs/pages/system-events-page.tsx (settings)
• logs/pages/trace-page.tsx (settings)
• logs/pages/usage-page.tsx (settings)

Violation count: 103 → 95 (80 files → 72 files)

Not in scope

• chat → settings violation (navigation-handlers.ts imports getSettingsRouteForClientTab) — belongs to LUM-1923

Test plan

• bun run lint — passes clean
• bunx tsc --noEmit — passes clean
• Pre-commit hooks pass (secrets scan, generic-examples, lint, typecheck)
• All changes are import path + component name updates only — no behavior changes
• Verified zero old import paths or component names remain via grep

Closes LUM-1918

Link to Devin session: https://app.devin.ai/sessions/4b3b130bbf274e5487da3b4992883093
Requested by: @ashleeradka

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[linear]

LUM-1918

[devin-ai-integration]

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no potential bugs to report.

View in Devin Review to see 3 additional findings.

[vex-assistant-bot]

✦ APPROVE — reviewed at 69809191

Value: 8 cross-domain allowlist exemptions gone; contacts and logs no longer import from domains/settings/. Violation count drops from 103 to 95. Second PR in the LUM-1910 series.

What this does: Lifts 5 artifacts from domains/settings/ to top-level shared directories — 3 components, 1 hook, 1 store — and updates all 36 consumer import paths.

---

Placements — all correct:

Artifact	New home	Reason
SettingsCard	components/	3 contacts files + 20+ settings files — cross-domain UI
SettingsShell	components/	logs-layout + settings-layout — cross-domain layout
SettingsSidebarTree	components/	logs-layout + settings-layout — cross-domain layout
useCurrentPlatformAssistant	hooks/	4 logs pages + assistant-picker — cross-domain hook
currentPlatformAssistantStore	stores/	Zustand store backing the hook — cross-domain state

These follow the same pattern already in place: use-assistant-avatar.ts in hooks/, assistant-identity-store.ts in stores/, avatar-renderer.tsx in components/. Consistent.

The import renames (commits 1 + 2): The first commit included "fixes" to event-parser.ts, event-types.ts, and home-handlers.ts based on a stale local node_modules that had different @vellumai/assistant-api export names. Those changes broke type check and 9 test files. The second commit fully reverts them — AssistantEventSchema, RelationshipStateUpdatedEvent are the correct exports and are restored. Net diff across both commits is clean: only the settings lift changes land.

36 consumer updates: All mechanical import path swaps (@/domains/settings/components/settings-card.js → @/components/settings-card.js, etc.). Spot-checked a sample: contacts, logs, and settings domain files all updated correctly. @/ absolute paths throughout, .js extensions present.

.cross-domain-allowlist.json: 8 entries cleanly removed — 3 contacts entries (settings) and 5 logs entries (settings). Zero avatar or other accidental removals.

---

Merge gate: CI 7/7 ✅. Vex approves. Needs Devin or Codex second approval — suggest @devin review this PR on HEAD 69809191.

[devin-ai-integration]

Test Results — LUM-1918

Approach: Vite dev server (port 3001) + Playwright CDP route interception (no backend needed)

Results

All component rename verifications passed:

• SidebarShell — <aside> sidebar + <main> content layout renders on both settings and logs pages ✓
• SidebarTree — 12 nav items on settings (General, Models & Services, Voice, etc.), 4 items on logs (Usage, Logs, Emails, System Events), active item highlighting works ✓
• DetailCard — 6 <section> cards with h2 titles on AI page (Language Model, Web Search, Email, Image Generation, TTS, STT), each with subtitle and interactive controls ✓
• Navigation — Clicked "General" in sidebar → URL changed to /settings/general, content updated, active state correct ✓
• Console — Zero module resolution errors for renamed imports (detail-card, sidebar-shell, sidebar-tree). Only expected 404s from mocked API endpoints ✓
• Logs page — SidebarShell + SidebarTree render correctly on /logs/emails ✓

Screenshots

Settings/AI page — full layout with all three renamed components:

Settings/General page — after SidebarTree navigation:

Logs/Emails page — SidebarShell + SidebarTree on different domain:

Console — no import errors:

Note: Logs/usage crash (pre-existing, unrelated)

/assistant/logs/usage page hit TypeError: Cannot read properties of undefined (reading 'map') in UsageTab component — this is because the usage API endpoint returned 404 from the mock (no usage data mock provided). The crash is in the UsageTab domain component, not in the renamed SidebarShell/SidebarTree. The logs layout renders successfully on the emails page.

Devin session