@nextclaw/ui 0.14.2 → 0.14.3

package/src/features/chat/features/welcome/components/chat-welcome-session-type-picker.tsx

@@ -39,7 +39,7 @@ export function ChatWelcomeSessionTypePicker({
       <PopoverTrigger asChild>
         <button
           type="button"
-          className="inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-lg px-2 py-1.5 text-left font-medium text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25"
+          className="inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-lg px-2 py-1.5 text-left font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25"
           aria-label={t('chatWelcomeSessionTypePickerLabel')}
         >
           {selectedOption.icon?.src ? (
@@ -56,12 +56,12 @@ export function ChatWelcomeSessionTypePicker({
             <Bot className="h-4 w-4 shrink-0" />
           )}
           <span className="truncate">{selectedOption.label}</span>
-          <ChevronDown className="h-3.5 w-3.5 shrink-0 text-gray-400" />
+          <ChevronDown className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70" />
         </button>
       </PopoverTrigger>
       <PopoverContent
         align="start"
-        className="flex w-[min(16rem,calc(100vw-1rem))] flex-col overflow-hidden rounded-2xl border border-gray-200/80 bg-white p-1.5 shadow-[0_24px_60px_-28px_rgba(15,23,42,0.38)]"
+        className="flex w-[min(16rem,calc(100vw-1rem))] flex-col overflow-hidden rounded-2xl border border-border bg-popover p-1.5 text-popover-foreground shadow-[0_24px_60px_-28px_rgba(15,23,42,0.38)]"
         style={{ maxHeight: SESSION_TYPE_PICKER_MAX_HEIGHT }}
       >
         <div className="min-h-0 flex-1 overflow-y-auto">

package/src/features/chat/features/welcome/components/chat-welcome.tsx

@@ -64,22 +64,22 @@ export function ChatWelcome({
   return (
     <div className="flex min-h-full items-center justify-center px-4 py-8 sm:p-8">
       <div className="min-w-0 w-full max-w-[min(760px,100%)]">
-        <div className="mx-auto mb-5 flex h-14 w-14 items-center justify-center rounded-2xl bg-primary/10">
+        <div className="mx-auto mb-5 flex h-14 w-14 items-center justify-center rounded-2xl border border-border bg-accent shadow-card">
           <Bot className="h-8 w-8 text-primary" />
         </div>
 
         <div className="text-center">
-          <h2 className="text-2xl font-semibold text-gray-950 sm:text-3xl">
+          <h2 className="text-2xl font-semibold text-foreground sm:text-3xl">
             {t('chatWelcomeTitle')}
           </h2>
-          <p className="mt-3 text-sm font-medium text-gray-500 sm:text-base">
+          <p className="mt-3 text-sm font-medium text-muted-foreground sm:text-base">
             {t('chatWelcomeSubtitle')}
           </p>
         </div>
 
         {inputSlot ? <div className="mt-8">{inputSlot}</div> : null}
 
-        <div className="mt-3 flex flex-wrap items-center gap-2 px-1 text-sm text-gray-500">
+        <div className="mt-3 flex flex-wrap items-center gap-2 px-1 text-sm text-muted-foreground">
           {onSelectProjectRoot ? (
             <ChatWelcomeProjectPicker
               defaultProjectRoot={defaultProjectRoot}

package/src/features/chat/features/welcome/utils/__tests__/chat-welcome-project-options.utils.test.ts

@@ -18,10 +18,15 @@ function createSummary(
 }
 
 describe("buildChatWelcomeProjectOptions", () => {
-  it("builds recent project options from session summaries", () => {
+  it("builds recent project options without treating the default workspace as a project", () => {
     const options = buildChatWelcomeProjectOptions({
       defaultProjectRoot: "/Users/demo/.nextclaw/workspace",
       sessionSummaries: [
+        createSummary({
+          sessionId: "session-default",
+          lastMessageAt: "2026-06-12T10:00:00.000Z",
+          metadata: { project_root: "/Users/demo/.nextclaw/workspace" },
+        }),
         createSummary({
           sessionId: "session-1",
           lastMessageAt: "2026-06-10T10:00:00.000Z",
@@ -36,17 +41,10 @@ describe("buildChatWelcomeProjectOptions", () => {
     });
 
     expect(options).toEqual([
-      {
-        projectRoot: "/Users/demo/.nextclaw/workspace",
-        projectName: "workspace",
-        sessionCount: 0,
-        isDefault: true,
-      },
       {
         projectRoot: "/tmp/project-alpha",
         projectName: "project-alpha",
         sessionCount: 2,
-        isDefault: false,
       },
     ]);
   });

package/src/features/chat/features/welcome/utils/chat-welcome-project-options.utils.ts

@@ -6,7 +6,6 @@ export type ChatWelcomeProjectOption = {
   projectRoot: string;
   projectName: string;
   sessionCount: number;
-  isDefault: boolean;
 };
 
 function readSessionActivityAt(session: {
@@ -28,7 +27,7 @@ export function buildChatWelcomeProjectOptions(params: {
 
   for (const session of adaptNcpSessionSummaries([...sessionSummaries])) {
     const projectRoot = session.projectRoot?.trim();
-    if (!projectRoot) {
+    if (!projectRoot || projectRoot === defaultProjectRoot) {
       continue;
     }
     const existing = groups.get(projectRoot);
@@ -45,26 +44,12 @@ export function buildChatWelcomeProjectOptions(params: {
         getSessionProjectName(projectRoot) ||
         projectRoot,
       sessionCount: 1,
-      isDefault: projectRoot === defaultProjectRoot,
       latestUpdatedAt,
     });
   }
 
-  if (defaultProjectRoot && !groups.has(defaultProjectRoot)) {
-    groups.set(defaultProjectRoot, {
-      projectRoot: defaultProjectRoot,
-      projectName: getSessionProjectName(defaultProjectRoot) ?? defaultProjectRoot,
-      sessionCount: 0,
-      isDefault: true,
-      latestUpdatedAt: Number.POSITIVE_INFINITY,
-    });
-  }
-
   return [...groups.values()]
     .sort((left, right) => {
-      if (left.isDefault !== right.isDefault) {
-        return left.isDefault ? -1 : 1;
-      }
       return right.latestUpdatedAt - left.latestUpdatedAt;
     })
     .map(({ latestUpdatedAt: _latestUpdatedAt, ...option }) => option);

package/src/features/panel-apps/components/panel-app-list-item.tsx

@@ -38,26 +38,26 @@ export function PanelAppListItem({
   };
 
   return (
-    <div className="group w-full min-w-0 rounded-lg border border-gray-200 bg-white px-2.5 py-2.5 transition-colors hover:border-amber-200 hover:bg-amber-50/50">
+    <div className="group w-full min-w-0 rounded-lg border border-border bg-card px-2.5 py-2.5 transition-colors hover:border-primary/35 hover:bg-accent/60">
       <div className="flex min-w-0 items-start gap-2">
         <button type="button" onClick={onOpen} className="min-w-0 flex-1 text-left">
           <span className="flex min-w-0 items-center gap-2">
-            <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-amber-50 text-base text-amber-700">
+            <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-accent text-base text-accent-foreground">
               <PanelAppIcon icon={entry.icon} title={entry.title} />
             </span>
-            <span className="block min-w-0 flex-1 truncate text-sm font-medium text-gray-900">{entry.title}</span>
+            <span className="block min-w-0 flex-1 truncate text-sm font-medium text-foreground">{entry.title}</span>
           </span>
           {entry.description ? (
-            <span className="mt-1.5 block truncate text-xs leading-5 text-gray-600">{entry.description}</span>
+            <span className="mt-1.5 block truncate text-xs leading-5 text-muted-foreground">{entry.description}</span>
           ) : null}
-          <span className="mt-0.5 block truncate text-[11px] leading-4 text-gray-400">{secondary}</span>
+          <span className="mt-0.5 block truncate text-[11px] leading-4 text-muted-foreground/70">{secondary}</span>
         </button>
         <div className="flex shrink-0 items-center gap-1">
           <button
             type="button"
             onClick={handleFavorite}
             disabled={favoritePending}
-            className="rounded-md p-1.5 text-gray-400 transition-colors hover:bg-white hover:text-amber-500 disabled:opacity-50"
+            className="rounded-md p-1.5 text-muted-foreground/70 transition-colors hover:bg-background hover:text-amber-500 disabled:opacity-50"
             title={favoriteLabel}
             aria-label={favoriteLabel}
           >
@@ -67,7 +67,7 @@ export function PanelAppListItem({
             <PopoverTrigger asChild>
               <button
                 type="button"
-                className="rounded-md p-1.5 text-gray-400 transition-colors hover:bg-white hover:text-gray-700"
+                className="rounded-md p-1.5 text-muted-foreground/70 transition-colors hover:bg-background hover:text-foreground"
                 aria-label={t('panelAppsMoreActions')}
                 disabled={deletePending}
               >
@@ -118,7 +118,7 @@ function PanelAppMenuItem({
       type="button"
       className={cn(
         'flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-left text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50',
-        destructive ? 'text-destructive hover:bg-destructive/10' : 'text-gray-700 hover:bg-gray-100',
+        destructive ? 'text-destructive hover:bg-destructive/10' : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
       )}
       disabled={disabled}
       onClick={onClick}

package/src/features/panel-apps/components/panel-app-toolbar.tsx

@@ -13,18 +13,18 @@ export function PanelAppToolbar({
   onRefresh,
 }: PanelAppToolbarProps) {
   return (
-    <div className="flex items-center justify-between gap-2 px-3.5 py-2 bg-white border-b border-gray-100 shrink-0">
+    <div className="flex items-center justify-between gap-2 border-b border-border/70 bg-card px-3.5 py-2 shrink-0">
       <button
         type="button"
         onClick={onOpenApps}
-        className="inline-flex shrink-0 items-center rounded-md p-1.5 text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
+        className="inline-flex shrink-0 items-center rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
         title={t('appsTitle')}
         aria-label={t('appsTitle')}
       >
         <ArrowLeft className="h-3.5 w-3.5" />
       </button>
       <span
-        className="min-w-0 flex-1 truncate text-xs font-medium text-gray-600"
+        className="min-w-0 flex-1 truncate text-xs font-medium text-muted-foreground"
         title={appTitle}
       >
         {appTitle}
@@ -32,7 +32,7 @@ export function PanelAppToolbar({
       <button
         type="button"
         onClick={onRefresh}
-        className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-800"
+        className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
         title={t('panelAppsRefreshCurrent')}
         aria-label={t('panelAppsRefreshCurrent')}
       >

package/src/features/panel-apps/components/panel-apps-list.tsx

@@ -83,7 +83,7 @@ export function PanelAppsList({
 
   if (panelApps.isLoading) {
     return (
-      <div className="flex h-full items-center justify-center text-sm text-gray-500">{t('panelAppsLoading')}</div>
+      <div className="flex h-full items-center justify-center text-sm text-muted-foreground">{t('panelAppsLoading')}</div>
     );
   }
 
@@ -94,17 +94,17 @@ export function PanelAppsList({
   }
 
   return (
-    <div className="flex h-full min-h-0 flex-col bg-white">
-      <div className="flex items-center justify-between gap-2 border-b border-gray-100 px-4 py-3">
+    <div className="flex h-full min-h-0 flex-col bg-card text-card-foreground">
+      <div className="flex items-center justify-between gap-2 border-b border-border/70 px-4 py-3">
         <div className="flex min-w-0 items-center gap-1.5">
           {headerContent ?? (
-            <div className="truncate text-sm font-semibold text-gray-900">{t('panelAppsTitle')}</div>
+            <div className="truncate text-sm font-semibold text-foreground">{t('panelAppsTitle')}</div>
           )}
           {panelApps.data?.panelsPath ? (
             <TooltipProvider delayDuration={250}>
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <button type="button" className="rounded p-0.5 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-700" aria-label={t('panelAppsTitle')}><HelpCircle className="h-3.5 w-3.5" /></button>
+                  <button type="button" className="rounded p-0.5 text-muted-foreground/70 transition-colors hover:bg-accent hover:text-accent-foreground" aria-label={t('panelAppsTitle')}><HelpCircle className="h-3.5 w-3.5" /></button>
                 </TooltipTrigger>
                 <TooltipContent side="bottom" className="max-w-[320px] break-all font-mono text-xs">{panelApps.data.panelsPath}</TooltipContent>
               </Tooltip>
@@ -114,16 +114,16 @@ export function PanelAppsList({
         <button
           type="button"
           onClick={() => void panelApps.refetch()}
-          className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-800"
+          className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
           title={t('panelAppsRefresh')}
           aria-label={t('panelAppsRefresh')}
         >
           <RefreshCw className="h-3.5 w-3.5" />
         </button>
       </div>
-      <div className="border-b border-gray-100 px-3 py-2">
+      <div className="border-b border-border/70 px-3 py-2">
         <Tabs value={viewMode} onValueChange={(value) => setViewMode(value as PanelAppViewMode)}>
-          <TabsList className="grid h-auto w-full grid-cols-5 rounded-lg bg-gray-100/70 p-0.5">
+          <TabsList className="grid h-auto w-full grid-cols-5 rounded-lg bg-muted/70 p-0.5">
             <TabsTrigger value="smart" className="px-2 py-1 text-xs">{t('panelAppsSortSmart')}</TabsTrigger>
             <TabsTrigger value="favorites" className="px-2 py-1 text-xs">{t('panelAppsFavorites')}</TabsTrigger>
             <TabsTrigger value="recent-open" className="px-2 py-1 text-xs">{t('panelAppsSortRecentOpen')}</TabsTrigger>
@@ -139,7 +139,7 @@ export function PanelAppsList({
           onRefresh={() => void panelApps.refetch()}
         />
       ) : entries.length === 0 ? (
-        <div className="flex flex-1 items-center justify-center px-6 text-center text-sm text-gray-500">{t('panelAppsEmptyFiltered')}</div>
+        <div className="flex flex-1 items-center justify-center px-6 text-center text-sm text-muted-foreground">{t('panelAppsEmptyFiltered')}</div>
       ) : (
         <div className="custom-scrollbar min-h-0 flex-1 overflow-y-auto p-3">
           <div className="space-y-1.5">
@@ -176,8 +176,8 @@ function PanelAppsEmptyGuide({
         <div className="mx-auto flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 text-primary">
           <AppWindow className="h-5 w-5" />
         </div>
-        <h2 className="mt-3 text-sm font-semibold text-gray-900">{t('panelAppsEmptyTitle')}</h2>
-        <p className="mt-1 text-xs leading-5 text-gray-500">{t('panelAppsEmptyDescription')}</p>
+        <h2 className="mt-3 text-sm font-semibold text-foreground">{t('panelAppsEmptyTitle')}</h2>
+        <p className="mt-1 text-xs leading-5 text-muted-foreground">{t('panelAppsEmptyDescription')}</p>
 
         <div className="mt-4 space-y-2 text-left">
           <PanelAppsEmptyGuideStep
@@ -195,16 +195,16 @@ function PanelAppsEmptyGuide({
         </div>
 
         {panelsPath ? (
-          <div className="mt-4 rounded-md bg-gray-50 px-3 py-2 text-left">
-            <div className="text-[11px] font-medium uppercase text-gray-400">{t('panelAppsPanelsPath')}</div>
-            <code className="mt-1 block break-all text-xs text-gray-600">{panelsPath}</code>
+          <div className="mt-4 rounded-md bg-muted/60 px-3 py-2 text-left">
+            <div className="text-[11px] font-medium uppercase text-muted-foreground/70">{t('panelAppsPanelsPath')}</div>
+            <code className="mt-1 block break-all text-xs text-muted-foreground">{panelsPath}</code>
           </div>
         ) : null}
 
         <button
           type="button"
           onClick={onRefresh}
-          className="mt-4 inline-flex items-center justify-center gap-1.5 rounded-md border border-gray-200 px-3 py-1.5 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
+          className="mt-4 inline-flex items-center justify-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-xs font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
         >
           <RefreshCw className="h-3.5 w-3.5" />
           {t('panelAppsRefresh')}
@@ -229,10 +229,10 @@ function PanelAppsEmptyGuideStep({
 }) {
   const content = (
     <>
-      <div className="mt-0.5 text-gray-500">{icon}</div>
+      <div className="mt-0.5 text-muted-foreground">{icon}</div>
       <div className="min-w-0">
-        <div className="text-xs font-medium text-gray-800">{title}</div>
-        <div className="mt-0.5 text-xs leading-5 text-gray-500">{description}</div>
+        <div className="text-xs font-medium text-foreground">{title}</div>
+        <div className="mt-0.5 text-xs leading-5 text-muted-foreground">{description}</div>
         {actionLabel ? (
           <div className="mt-2 text-xs font-medium text-primary">{actionLabel}</div>
         ) : null}
@@ -245,7 +245,7 @@ function PanelAppsEmptyGuideStep({
       <button
         type="button"
         onClick={onAction}
-        className="flex w-full gap-2 rounded-md bg-gray-50 px-3 py-2.5 text-left transition-colors hover:bg-primary/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
+        className="flex w-full gap-2 rounded-md bg-muted/60 px-3 py-2.5 text-left transition-colors hover:bg-accent/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
       >
         {content}
       </button>
@@ -253,7 +253,7 @@ function PanelAppsEmptyGuideStep({
   }
 
   return (
-    <div className="flex gap-2 rounded-md bg-gray-50 px-3 py-2.5">
+    <div className="flex gap-2 rounded-md bg-muted/60 px-3 py-2.5">
       {content}
     </div>
   );

package/src/features/pwa/managers/__tests__/pwa-shell-theme.manager.test.ts

@@ -1,21 +1,45 @@
 import { beforeEach, describe, expect, it } from 'vitest';
-import { pwaShellThemeManager } from '@/features/pwa';
+import { pwaShellThemeManager } from '@/features/pwa/managers/pwa-shell-theme.manager';
 
 describe('PwaShellThemeManager', () => {
   beforeEach(() => {
-    document.head.innerHTML = '<meta name="theme-color" content="#F9F8F5" />';
+    document.head.innerHTML = '<meta name="theme-color" content="#FFFFFF" />';
     document.body.innerHTML = '<div id="root"></div>';
     document.documentElement.removeAttribute('data-theme');
     document.documentElement.style.backgroundColor = '';
     document.body.style.backgroundColor = '';
   });
 
+  it('applies natural shell colors by default', () => {
+    pwaShellThemeManager.syncCurrentTheme();
+
+    const meta = document.querySelector('meta[name="theme-color"]');
+    expect(meta?.getAttribute('content')).toBe('#FAF9F7');
+    expect(document.body.style.backgroundColor).toBe('rgb(250, 249, 247)');
+  });
+
+  it('applies natural shell colors explicitly', () => {
+    pwaShellThemeManager.syncTheme('natural');
+
+    const meta = document.querySelector('meta[name="theme-color"]');
+    expect(meta?.getAttribute('content')).toBe('#FAF9F7');
+    expect(document.body.style.backgroundColor).toBe('rgb(250, 249, 247)');
+  });
+
+  it('applies minimal shell colors explicitly', () => {
+    pwaShellThemeManager.syncTheme('minimal');
+
+    const meta = document.querySelector('meta[name="theme-color"]');
+    expect(meta?.getAttribute('content')).toBe('#FFFFFF');
+    expect(document.body.style.backgroundColor).toBe('rgb(255, 255, 255)');
+  });
+
   it('applies warm shell colors', () => {
     pwaShellThemeManager.syncTheme('warm');
 
     const meta = document.querySelector('meta[name="theme-color"]');
-    expect(meta?.getAttribute('content')).toBe('#F9F8F5');
-    expect(document.body.style.backgroundColor).toBe('rgb(249, 248, 245)');
+    expect(meta?.getAttribute('content')).toBe('#FAF8F4');
+    expect(document.body.style.backgroundColor).toBe('rgb(250, 248, 244)');
   });
 
   it('applies cool shell colors from current theme attribute', () => {
@@ -24,7 +48,47 @@ describe('PwaShellThemeManager', () => {
     pwaShellThemeManager.syncCurrentTheme();
 
     const meta = document.querySelector('meta[name="theme-color"]');
-    expect(meta?.getAttribute('content')).toBe('#F8FAFB');
-    expect(document.body.style.backgroundColor).toBe('rgb(248, 250, 251)');
+    expect(meta?.getAttribute('content')).toBe('#F8FAFC');
+    expect(document.body.style.backgroundColor).toBe('rgb(248, 250, 252)');
+  });
+
+  it('applies dawn shell colors from current theme attribute', () => {
+    document.documentElement.setAttribute('data-theme', 'dawn');
+
+    pwaShellThemeManager.syncCurrentTheme();
+
+    const meta = document.querySelector('meta[name="theme-color"]');
+    expect(meta?.getAttribute('content')).toBe('#FAF7F4');
+    expect(document.body.style.backgroundColor).toBe('rgb(250, 247, 244)');
+  });
+
+  it('applies graphite shell colors from current theme attribute', () => {
+    document.documentElement.setAttribute('data-theme', 'graphite');
+
+    pwaShellThemeManager.syncCurrentTheme();
+
+    const meta = document.querySelector('meta[name="theme-color"]');
+    expect(meta?.getAttribute('content')).toBe('#F8F8F7');
+    expect(document.body.style.backgroundColor).toBe('rgb(248, 248, 247)');
+  });
+
+  it('maps the legacy leaf theme to warm shell colors', () => {
+    document.documentElement.setAttribute('data-theme', 'leaf');
+
+    pwaShellThemeManager.syncCurrentTheme();
+
+    const meta = document.querySelector('meta[name="theme-color"]');
+    expect(meta?.getAttribute('content')).toBe('#FAF8F4');
+    expect(document.body.style.backgroundColor).toBe('rgb(250, 248, 244)');
+  });
+
+  it('applies probe shell colors from current theme attribute', () => {
+    document.documentElement.setAttribute('data-theme', 'probe');
+
+    pwaShellThemeManager.syncCurrentTheme();
+
+    const meta = document.querySelector('meta[name="theme-color"]');
+    expect(meta?.getAttribute('content')).toBe('#FEFCF6');
+    expect(document.body.style.backgroundColor).toBe('rgb(254, 252, 246)');
   });
 });

package/src/features/pwa/managers/pwa-shell-theme.manager.ts

@@ -1,8 +1,13 @@
-import type { UiTheme } from '@/shared/lib/theme';
+import { normalizeTheme, type UiTheme } from '@/shared/lib/theme';
 
 const PWA_SHELL_THEME_COLORS: Record<UiTheme, string> = {
-  warm: '#F9F8F5',
-  cool: '#F8FAFB'
+  natural: '#FAF9F7',
+  minimal: '#FFFFFF',
+  warm: '#FAF8F4',
+  cool: '#F8FAFC',
+  dawn: '#FAF7F4',
+  graphite: '#F8F8F7',
+  probe: '#FEFCF6'
 };
 
 export class PwaShellThemeManager {
@@ -22,8 +27,8 @@ export class PwaShellThemeManager {
       return;
     }
 
-    const currentTheme = document.documentElement.getAttribute('data-theme') === 'cool' ? 'cool' : 'warm';
-    this.syncTheme(currentTheme);
+    const currentTheme = document.documentElement.getAttribute('data-theme');
+    this.syncTheme(normalizeTheme(currentTheme) ?? 'natural');
   };
 
   private updateThemeMeta = (themeColor: string) => {

package/src/features/service-apps/components/service-action-authorization-dialog.tsx

@@ -37,10 +37,10 @@ export function ServiceActionAuthorizationDialog() {
           </DialogDescription>
         </DialogHeader>
         {pending ? (
-          <div className="space-y-3 rounded-md border border-gray-100 bg-gray-50 p-3 text-sm">
+          <div className="space-y-3 rounded-md border border-border bg-muted/60 p-3 text-sm">
             <AuthorizationField label={t('serviceActionAuthorizationSource')} value={pending.panelAppId} />
             <div className="space-y-2">
-              <div className="text-xs font-medium text-gray-500">
+              <div className="text-xs font-medium text-muted-foreground">
                 {t('serviceActionAuthorizationActions')}
               </div>
               <div className="max-h-64 space-y-2 overflow-auto">
@@ -78,18 +78,18 @@ function AuthorizationActionItem({
   };
 }) {
   return (
-    <div className="space-y-1 rounded border border-gray-200 bg-white px-3 py-2">
+    <div className="space-y-1 rounded border border-border bg-card px-3 py-2">
       <div className="flex items-start justify-between gap-3">
-        <div className="min-w-0 break-words text-xs font-medium text-gray-900">
+        <div className="min-w-0 break-words text-xs font-medium text-foreground">
           {action.actionTitle ?? action.actionId}
         </div>
         <div className="shrink-0 rounded bg-amber-50 px-1.5 py-0.5 text-[11px] font-medium text-amber-700">
           {action.risk ?? 'dangerous'}
         </div>
       </div>
-      <div className="break-words text-[11px] text-gray-500">{action.actionId}</div>
+      <div className="break-words text-[11px] text-muted-foreground">{action.actionId}</div>
       {action.actionDescription ? (
-        <div className="break-words text-xs text-gray-600">{action.actionDescription}</div>
+        <div className="break-words text-xs text-muted-foreground">{action.actionDescription}</div>
       ) : null}
     </div>
   );
@@ -104,8 +104,8 @@ function AuthorizationField({
 }) {
   return (
     <div className="grid grid-cols-[5rem_minmax(0,1fr)] gap-3">
-      <div className="text-xs font-medium text-gray-500">{label}</div>
-      <div className="min-w-0 break-words text-xs text-gray-900">{value}</div>
+      <div className="text-xs font-medium text-muted-foreground">{label}</div>
+      <div className="min-w-0 break-words text-xs text-foreground">{value}</div>
     </div>
   );
 }