vellum-ai · ashleeradka · May 26, 2026 · May 26, 2026 · May 26, 2026 · May 26, 2026
diff --git a/apps/web/.cross-domain-allowlist.json b/apps/web/.cross-domain-allowlist.json
@@ -141,15 +141,6 @@
   "src/domains/chat/utils/stream-handlers/types.ts": [
     "messaging"
   ],
-  "src/domains/contacts/components/assistant-channels-detail.tsx": [
-    "settings"
-  ],
-  "src/domains/contacts/components/contact-detail-view.tsx": [
-    "settings"
-  ],
-  "src/domains/contacts/components/guardian-detail-view.tsx": [
-    "settings"
-  ],
   "src/domains/conversations/conversation-queries.test.ts": [
     "chat"
   ],
@@ -199,21 +190,6 @@
   "src/domains/logs/components/usage-tab.tsx": [
     "chat"
   ],
-  "src/domains/logs/logs-layout.tsx": [
-    "settings"
-  ],
-  "src/domains/logs/pages/emails-page.tsx": [
-    "settings"
-  ],
-  "src/domains/logs/pages/system-events-page.tsx": [
-    "settings"
-  ],
-  "src/domains/logs/pages/trace-page.tsx": [
-    "settings"
-  ],
-  "src/domains/logs/pages/usage-page.tsx": [
-    "settings"
-  ],
   "src/domains/onboarding/pages/pre-chat-flow.tsx": [
     "nudges"
   ],

diff --git a/...ins/settings/components/settings-card.tsx → apps/web/src/components/detail-card.tsx b/...ins/settings/components/settings-card.tsx → apps/web/src/components/detail-card.tsx
@@ -3,7 +3,7 @@ import type { ReactNode } from "react";
 import { Card } from "@vellum/design-library";
 import { cn } from "@vellum/design-library";
 
-export interface SettingsCardProps {
+export interface DetailCardProps {
   id?: string;
   title?: string;
   subtitle?: string;
@@ -15,7 +15,7 @@ export interface SettingsCardProps {
   className?: string;
 }
 
-export function SettingsCard({
+export function DetailCard({
   id,
   title,
   subtitle,
@@ -25,7 +25,7 @@ export function SettingsCard({
   showBorder = true,
   variant = "default",
   className,
-}: SettingsCardProps) {
+}: DetailCardProps) {
   const hasHeader = Boolean(title || subtitle || accessory);
   const body = (
     <>

diff --git a/...ns/settings/components/settings-shell.tsx → apps/web/src/components/sidebar-shell.tsx b/...ns/settings/components/settings-shell.tsx → apps/web/src/components/sidebar-shell.tsx
@@ -5,7 +5,7 @@ import { Link, useLocation, useNavigate } from "react-router";
 import { Button, Typography } from "@vellum/design-library";
 import { routes } from "@/utils/routes.js";
 
-interface SettingsShellProps {
+interface SidebarShellProps {
   sidebar: ReactNode;
   children: ReactNode;
   actions?: ReactNode;
@@ -15,28 +15,28 @@ interface SettingsShellProps {
 }
 
 /**
- * Settings shell — overlay panel treatment.
+ * Sidebar shell — overlay panel treatment.
  *
  * Desktop: one outer card containing sidebar + content side-by-side.
  * Mobile: two-page flow — root shows sidebar, sub-pages show content
  * with a back arrow returning to the root.
  */
-export function SettingsShell({
+export function SidebarShell({
   sidebar,
   children,
   actions,
   backHref,
   title = "Settings",
   menuRoute = routes.settings.root,
-}: SettingsShellProps) {
+}: SidebarShellProps) {
   const { pathname } = useLocation();
   const navigate = useNavigate();
   const isMenuRoute = pathname === menuRoute;
 
   const mobileBackHref = isMenuRoute ? backHref : menuRoute;
   const mobileBackLabel = isMenuRoute
     ? `Back from ${title}`
-    : "Back to settings menu";
+    : `Back to ${title} menu`;
 
   const mobileBackButton = (
     <Button
@@ -112,7 +112,7 @@ export function SettingsShell({
         <div className="flex min-h-0 flex-1 overflow-hidden">
           <aside
             className="hidden w-64 shrink-0 overflow-y-auto md:block"
-            aria-label="Settings navigation"
+            aria-label={`${title} navigation`}
           >
             {sidebar}
           </aside>

diff --git a/...ings/components/settings-sidebar-tree.tsx → apps/web/src/components/sidebar-tree.tsx b/...ings/components/settings-sidebar-tree.tsx → apps/web/src/components/sidebar-tree.tsx
@@ -4,26 +4,26 @@ import { useLocation, useNavigate } from "react-router";
 
 import { SideMenu } from "@vellum/design-library";
 
-export interface SettingsSidebarItem {
+export interface SidebarItem {
   id: string;
   label: string;
   href: string;
   icon: LucideIcon;
 }
 
-interface SettingsSidebarTreeProps {
-  items: SettingsSidebarItem[];
-  bottomItems?: SettingsSidebarItem[];
+interface SidebarTreeProps {
+  items: SidebarItem[];
+  bottomItems?: SidebarItem[];
 }
 
-export function SettingsSidebarTree({
+export function SidebarTree({
   items,
   bottomItems,
-}: SettingsSidebarTreeProps) {
+}: SidebarTreeProps) {
   const { pathname } = useLocation();
   const navigate = useNavigate();
 
-  const renderItem = (item: SettingsSidebarItem, isLast: boolean) => {
+  const renderItem = (item: SidebarItem, isLast: boolean) => {
     const isActive =
       pathname === item.href || pathname.startsWith(item.href + "/");
     return (
@@ -66,7 +66,7 @@ export function SettingsSidebarTree({
 
   return (
     <nav
-      aria-label="Settings navigation"
+      aria-label="Sidebar navigation"
       className="flex min-h-full flex-col md:gap-2 md:px-6 md:pb-4"
     >
       {items.map((item, index) =>

diff --git a/apps/web/src/domains/contacts/components/assistant-channels-detail.tsx b/apps/web/src/domains/contacts/components/assistant-channels-detail.tsx
@@ -7,7 +7,7 @@ import { Input } from "@vellum/design-library/components/input";
 
 import { ContactTypeBadge } from "@/domains/contacts/components/contact-type-badge.js";
 import { ShareConnectionLinkButton } from "@/domains/contacts/components/share-connection-link-button.js";
-import { SettingsCard } from "@/domains/settings/components/settings-card.js";
+import { DetailCard } from "@/components/detail-card.js";
 import type { AssistantChannelState } from "@/domains/contacts/types.js";
 
 type ChannelKey = AssistantChannelState["key"];
@@ -79,13 +79,13 @@ export function AssistantChannelsDetail({
 
   return (
     <div className="flex flex-col gap-6">
-      <SettingsCard
+      <DetailCard
         title={`${displayName} (Your Assistant)`}
         accessory={<ContactTypeBadge role="assistant" />}
         compactAccessory
       />
 
-      <SettingsCard
+      <DetailCard
         title="Channels"
         subtitle={`Manage where ${displayName} can be reached.`}
       >
@@ -114,7 +114,7 @@ export function AssistantChannelsDetail({
             </div>
           ))}
         </div>
-      </SettingsCard>
+      </DetailCard>
 
       {onGenerateInviteLink ? <ShareConnectionLinkButton onClick={onGenerateInviteLink} /> : null}
 

diff --git a/apps/web/src/domains/contacts/components/contact-detail-view.tsx b/apps/web/src/domains/contacts/components/contact-detail-view.tsx
@@ -6,7 +6,7 @@ import { Input } from "@vellum/design-library/components/input";
 
 import { ContactChannelsSection } from "@/domains/contacts/components/contact-channels-section.js";
 import { ContactTypeBadge } from "@/domains/contacts/components/contact-type-badge.js";
-import { SettingsCard } from "@/domains/settings/components/settings-card.js";
+import { DetailCard } from "@/components/detail-card.js";
 import type { ChannelInfo, ContactPayload } from "@/domains/contacts/types.js";
 
 interface ContactDetailViewProps {
@@ -74,7 +74,7 @@ function ContactDetailViewInner({
 
   return (
     <div className="flex flex-col gap-6">
-      <SettingsCard
+      <DetailCard
         title={headerName}
         accessory={<ContactTypeBadge role={contact.role} contactType={contact.contactType} />}
         compactAccessory
@@ -148,9 +148,9 @@ function ContactDetailViewInner({
             </Button>
           </div>
         </div>
-      </SettingsCard>
+      </DetailCard>
 
-      <SettingsCard
+      <DetailCard
         title="Channels"
         subtitle="Once verified, your assistant will recognize this contact when they message from these channels."
       >
@@ -161,7 +161,7 @@ function ContactDetailViewInner({
           onSetupChannel={onSetupChannel}
           onRevokeChannel={onRevokeChannel}
         />
-      </SettingsCard>
+      </DetailCard>
 
       <ConfirmDialog
         open={confirmOpen}

diff --git a/apps/web/src/domains/contacts/components/guardian-detail-view.tsx b/apps/web/src/domains/contacts/components/guardian-detail-view.tsx
@@ -6,7 +6,7 @@ import { Input } from "@vellum/design-library/components/input";
 import { ContactChannelsSection } from "@/domains/contacts/components/contact-channels-section.js";
 import { ContactTypeBadge } from "@/domains/contacts/components/contact-type-badge.js";
 import { ShareConnectionLinkButton } from "@/domains/contacts/components/share-connection-link-button.js";
-import { SettingsCard } from "@/domains/settings/components/settings-card.js";
+import { DetailCard } from "@/components/detail-card.js";
 import type { ChannelInfo, ContactPayload } from "@/domains/contacts/types.js";
 
 interface GuardianDetailViewProps {
@@ -63,7 +63,7 @@ function GuardianDetailViewInner({
 
   return (
     <div className="flex flex-col gap-6">
-      <SettingsCard
+      <DetailCard
         title={headerName}
         accessory={<ContactTypeBadge role="guardian" />}
         compactAccessory
@@ -121,9 +121,9 @@ function GuardianDetailViewInner({
             ) : null}
           </div>
         </div>
-      </SettingsCard>
+      </DetailCard>
 
-      <SettingsCard
+      <DetailCard
         title="Channels"
         subtitle="Once verified, your assistant will recognize you when you message from these channels."
       >
@@ -137,7 +137,7 @@ function GuardianDetailViewInner({
           onVerifyChannel={onVerifyChannel}
           onRevokeChannel={onRevokeChannel}
         />
-      </SettingsCard>
+      </DetailCard>
 
       {onGenerateInviteLink ? <ShareConnectionLinkButton onClick={onGenerateInviteLink} /> : null}
     </div>

diff --git a/apps/web/src/domains/logs/logs-layout.tsx b/apps/web/src/domains/logs/logs-layout.tsx
@@ -3,13 +3,13 @@ import { Outlet, useLocation } from "react-router";
 
 import { routes } from "@/utils/routes.js";
 import { LOGS_SIDEBAR } from "@/domains/logs/navigation.js";
-import { SettingsShell } from "@/domains/settings/components/settings-shell.js";
-import { SettingsSidebarTree } from "@/domains/settings/components/settings-sidebar-tree.js";
+import { SidebarShell } from "@/components/sidebar-shell.js";
+import { SidebarTree } from "@/components/sidebar-tree.js";
 
 /**
  * React Router layout route for `/assistant/logs/*`.
  *
- * Renders the SettingsShell (full-screen overlay with sidebar navigation)
+ * Renders the SidebarShell (full-screen overlay with sidebar navigation)
  * and an `<Outlet />` for the active logs tab page. Uses the same shell
  * component as Settings for visual consistency.
  */
@@ -31,13 +31,13 @@ export function LogsLayout() {
   }, [pathname]);
 
   return (
-    <SettingsShell
+    <SidebarShell
       backHref={routes.assistant}
-      sidebar={<SettingsSidebarTree items={LOGS_SIDEBAR} />}
+      sidebar={<SidebarTree items={LOGS_SIDEBAR} />}
       title={pageTitle}
       menuRoute={routes.logs.root}
     >
       <Outlet />
-    </SettingsShell>
+    </SidebarShell>
   );
 }
diff --git a/apps/web/src/domains/logs/pages/emails-page.tsx b/apps/web/src/domains/logs/pages/emails-page.tsx
@@ -1,4 +1,4 @@
-import { useCurrentPlatformAssistant } from "@/domains/settings/hooks/use-current-platform-assistant.js";
+import { useCurrentPlatformAssistant } from "@/hooks/use-current-platform-assistant.js";
 import { EmailsTab } from "@/domains/logs/components/emails-tab.js";
 
 export function EmailsPage() {

diff --git a/apps/web/src/domains/logs/pages/system-events-page.tsx b/apps/web/src/domains/logs/pages/system-events-page.tsx
@@ -1,4 +1,4 @@
-import { useCurrentPlatformAssistant } from "@/domains/settings/hooks/use-current-platform-assistant.js";
+import { useCurrentPlatformAssistant } from "@/hooks/use-current-platform-assistant.js";
 import { SystemEventsTab } from "@/domains/logs/components/system-events-tab.js";
 
 export function SystemEventsPage() {

diff --git a/apps/web/src/domains/logs/pages/trace-page.tsx b/apps/web/src/domains/logs/pages/trace-page.tsx
@@ -1,4 +1,4 @@
-import { useCurrentPlatformAssistant } from "@/domains/settings/hooks/use-current-platform-assistant.js";
+import { useCurrentPlatformAssistant } from "@/hooks/use-current-platform-assistant.js";
 import { LogsTab } from "@/domains/logs/components/logs-tab.js";
 
 export function TracePage() {

diff --git a/apps/web/src/domains/logs/pages/usage-page.tsx b/apps/web/src/domains/logs/pages/usage-page.tsx
@@ -1,4 +1,4 @@
-import { useCurrentPlatformAssistant } from "@/domains/settings/hooks/use-current-platform-assistant.js";
+import { useCurrentPlatformAssistant } from "@/hooks/use-current-platform-assistant.js";
 import { UsageTab } from "@/domains/logs/components/usage-tab.js";
 
 export function UsagePage() {

diff --git a/apps/web/src/domains/settings/ai/ai-page.tsx b/apps/web/src/domains/settings/ai/ai-page.tsx
@@ -27,7 +27,7 @@ import { Input } from "@vellum/design-library/components/input";
 import { Notice } from "@vellum/design-library/components/notice";
 import { SegmentControl } from "@vellum/design-library/components/segment-control";
 import { DomainField } from "@/domains/settings/components/domain-field.js";
-import { SettingsCard } from "@/domains/settings/components/settings-card.js";
+import { DetailCard } from "@/components/detail-card.js";
 import { Typography } from "@vellum/design-library/components/typography";
 
 import { toast } from "@vellum/design-library/components/toast";
@@ -452,15 +452,15 @@ interface ServiceCardProps {
 
 function ServiceCard({ id, title, subtitle, mode, onModeChange, children }: ServiceCardProps) {
   return (
-    <SettingsCard
+    <DetailCard
       id={id}
       title={title}
       subtitle={subtitle}
       accessory={<ModeToggle mode={mode} onChange={onModeChange} />}
     >
       <div className="h-px bg-[var(--surface-active)]" />
       <div className="mt-4">{children}</div>
-    </SettingsCard>
+    </DetailCard>
   );
 }
 
@@ -500,10 +500,10 @@ interface ByoServiceCardProps {
 // own key" services that don't offer a managed mode (TTS / STT).
 function ByoServiceCard({ title, subtitle, children }: ByoServiceCardProps) {
   return (
-    <SettingsCard title={title} subtitle={subtitle}>
+    <DetailCard title={title} subtitle={subtitle}>
       <div className="h-px bg-[var(--surface-active)]" />
       <div className="mt-4">{children}</div>
-    </SettingsCard>
+    </DetailCard>
   );
 }
 

diff --git a/apps/web/src/domains/settings/components/assistant-picker.tsx b/apps/web/src/domains/settings/components/assistant-picker.tsx
@@ -3,8 +3,8 @@ import { Check, Monitor } from "lucide-react";
 import { Button } from "@vellum/design-library/components/button";
 import { Tag } from "@vellum/design-library/components/tag";
 import { toast } from "@vellum/design-library/components/toast";
-import { SettingsCard } from "@/domains/settings/components/settings-card.js";
-import { useCurrentPlatformAssistant } from "@/domains/settings/hooks/use-current-platform-assistant.js";
+import { DetailCard } from "@/components/detail-card.js";
+import { useCurrentPlatformAssistant } from "@/hooks/use-current-platform-assistant.js";
 
 export function AssistantPicker() {
   const {
@@ -19,7 +19,7 @@ export function AssistantPicker() {
   }
 
   return (
-    <SettingsCard
+    <DetailCard
       title="Switch Assistant"
       subtitle="Choose which assistant is active for this account."
     >
@@ -74,6 +74,6 @@ export function AssistantPicker() {
           );
         })}
       </div>
-    </SettingsCard>
+    </DetailCard>
   );
 }