@nextclaw/ui 0.14.2 → 0.14.3

package/index.html

@@ -11,27 +11,77 @@
   <meta name="apple-mobile-web-app-title" content="NextClaw" />
   <meta name="mobile-web-app-capable" content="yes" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <meta name="theme-color" content="#F9F8F5" />
+  <meta name="theme-color" content="#FAF9F7" />
   <meta name="color-scheme" content="light" />
   <style>
     html,
     body,
     #root {
-      background: #f9f8f5;
+      background: #faf9f7;
+    }
+
+    html[data-theme="minimal"],
+    html[data-theme="minimal"] body,
+    html[data-theme="minimal"] #root {
+      background: #ffffff;
+    }
+
+    html[data-theme="warm"],
+    html[data-theme="warm"] body,
+    html[data-theme="warm"] #root {
+      background: #faf8f4;
     }
 
     html[data-theme="cool"],
     html[data-theme="cool"] body,
     html[data-theme="cool"] #root {
-      background: #f8fafb;
+      background: #f8fafc;
+    }
+
+    html[data-theme="dawn"],
+    html[data-theme="dawn"] body,
+    html[data-theme="dawn"] #root {
+      background: #faf7f4;
+    }
+
+    html[data-theme="graphite"],
+    html[data-theme="graphite"] body,
+    html[data-theme="graphite"] #root {
+      background: #f8f8f7;
+    }
+
+    html[data-theme="probe"],
+    html[data-theme="probe"] body,
+    html[data-theme="probe"] #root {
+      background: #fefcf6;
     }
   </style>
   <script>
     (() => {
       const storageKey = 'nextclaw.ui.theme';
       const storedTheme = window.localStorage.getItem(storageKey);
-      const nextTheme = storedTheme === 'cool' ? 'cool' : 'warm';
-      const themeColor = nextTheme === 'cool' ? '#F8FAFB' : '#F9F8F5';
+      const themeColors = {
+        natural: '#FAF9F7',
+        minimal: '#FFFFFF',
+        warm: '#FAF8F4',
+        cool: '#F8FAFC',
+        dawn: '#FAF7F4',
+        graphite: '#F8F8F7',
+        probe: '#FEFCF6'
+      };
+      const legacyThemeAliases = {
+        leaf: 'warm'
+      };
+      const normalizedStoredTheme = typeof storedTheme === 'string' && Object.prototype.hasOwnProperty.call(legacyThemeAliases, storedTheme)
+        ? legacyThemeAliases[storedTheme]
+        : storedTheme;
+      const nextTheme = Object.prototype.hasOwnProperty.call(themeColors, normalizedStoredTheme)
+        ? normalizedStoredTheme
+        : 'natural';
+      if (storedTheme !== nextTheme) {
+        window.localStorage.setItem(storageKey, nextTheme);
+      }
+      const themeColor = themeColors[nextTheme];
       document.documentElement.setAttribute('data-theme', nextTheme);
       document.documentElement.style.backgroundColor = themeColor;
       document.documentElement.style.colorScheme = 'light';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextclaw/ui",
-  "version": "0.14.2",
+  "version": "0.14.3",
   "private": false,
   "type": "module",
   "license": "MIT",
@@ -28,14 +28,14 @@
     "tailwind-merge": "^2.5.4",
     "zod": "^3.23.8",
     "zustand": "^5.0.2",
-    "@nextclaw/agent-chat": "0.2.15",
-    "@nextclaw/client-sdk": "0.4.5",
-    "@nextclaw/agent-chat-ui": "0.5.2",
+    "@nextclaw/agent-chat-ui": "0.5.3",
+    "@nextclaw/client-sdk": "0.4.6",
     "@nextclaw/ncp": "0.6.5",
-    "@nextclaw/ncp-http-agent-client": "0.3.47",
     "@nextclaw/ncp-toolkit": "0.5.40",
-    "@nextclaw/ncp-react": "0.4.55",
-    "@nextclaw/shared": "0.3.2"
+    "@nextclaw/shared": "0.3.2",
+    "@nextclaw/ncp-http-agent-client": "0.3.47",
+    "@nextclaw/agent-chat": "0.2.15",
+    "@nextclaw/ncp-react": "0.4.55"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",

package/src/app/components/layout/__tests__/sidebar.layout.test.tsx

@@ -101,7 +101,7 @@ describe("Sidebar", () => {
     expect(backLink).toBeTruthy();
     expect(header.className).not.toContain("bg-white");
     expect(header.className).not.toContain("rounded-2xl");
-    expect(backLink.className).toContain("hover:bg-gray-200/60");
+    expect(backLink.className).toContain("hover:bg-accent");
   });
 
   it("keeps the settings navigation in the expected product order", () => {
@@ -148,8 +148,8 @@ describe("Sidebar", () => {
     expect(accountEntry.textContent).toContain("Account");
     expect(screen.getByText("user@example.com")).toBeTruthy();
     expect(accountEntry.className).toContain("py-2");
-    expect(accountEntry.className).toContain("text-gray-600");
-    expect(accountEntry.className).toContain("hover:bg-gray-200/60");
+    expect(accountEntry.className).toContain("text-muted-foreground");
+    expect(accountEntry.className).toContain("hover:bg-accent");
     expect(accountStatus.className).toContain("text-[11px]");
   });
 

package/src/app/components/layout/header.tsx

@@ -5,13 +5,13 @@ interface HeaderProps {
 
 export function Header({ title, description }: HeaderProps) {
   return (
-    <header className="h-14 bg-white/90 backdrop-blur-sm sticky top-0 z-10 flex items-center px-6 transition-all duration-base">
+    <header className="sticky top-0 z-10 flex h-14 items-center bg-background/90 px-6 backdrop-blur-sm transition-all duration-base">
       <div className="flex items-center gap-3">
         {title && (
           <div>
-            <h2 className="text-[15px] font-semibold text-gray-900">{title}</h2>
+            <h2 className="text-[15px] font-semibold text-foreground">{title}</h2>
             {description && (
-              <p className="text-xs text-gray-400 mt-0.5">{description}</p>
+              <p className="mt-0.5 text-xs text-muted-foreground">{description}</p>
             )}
           </div>
         )}

package/src/app/components/layout/page-layout.tsx

@@ -43,9 +43,9 @@ export function PageHeader({ title, description, actions, className }: PageHeade
     return (
         <div className={cn('flex items-center justify-between mb-6 shrink-0', className)}>
             <div>
-                <h2 className="text-xl font-semibold text-gray-900">{title}</h2>
+                <h2 className="text-xl font-semibold text-foreground">{title}</h2>
                 {description && (
-                    <p className="text-sm text-gray-500 mt-1">{description}</p>
+                    <p className="text-sm text-muted-foreground mt-1">{description}</p>
                 )}
             </div>
             {actions && <div className="flex items-center gap-2 shrink-0">{actions}</div>}

package/src/app/components/layout/runtime-status-entry.tsx

@@ -12,7 +12,7 @@ type RuntimeStatusTone = 'healthy' | 'attention' | 'inactive';
 const runtimeStatusToneStyles: Record<RuntimeStatusTone, string> = {
   healthy: 'bg-emerald-500 shadow-[0_0_0_3px_rgba(16,185,129,0.14)]',
   attention: 'bg-amber-400 shadow-[0_0_0_3px_rgba(251,191,36,0.16)]',
-  inactive: 'bg-gray-300 shadow-[0_0_0_3px_rgba(156,163,175,0.12)]'
+  inactive: 'bg-muted-foreground/45 shadow-[0_0_0_3px_rgba(156,163,175,0.12)]'
 };
 
 type RuntimeStatusSummary = {
@@ -66,11 +66,11 @@ export function RuntimeStatusEntry() {
       <PopoverContent
         align="start"
         sideOffset={10}
-        className="w-[290px] space-y-3 rounded-2xl border border-gray-200 bg-white p-4"
+        className="w-[290px] space-y-3 rounded-2xl border border-border bg-popover p-4 text-popover-foreground"
       >
         <div className="space-y-1">
-          <div className="text-sm font-semibold text-gray-900">{summary.title}</div>
-          <p className="text-xs leading-5 text-gray-600">{summary.description}</p>
+          <div className="text-sm font-semibold text-foreground">{summary.title}</div>
+          <p className="text-xs leading-5 text-muted-foreground">{summary.description}</p>
         </div>
         {summary.reasonLines.length > 0 ? (
           <div className="space-y-2">
@@ -85,13 +85,13 @@ export function RuntimeStatusEntry() {
           </div>
         ) : null}
         {summary.actionLabel ? (
-          <div className="flex items-center justify-between border-t border-gray-100 pt-1">
-            <span className="text-[11px] text-gray-500">{t('runtimeStatusActionHint')}</span>
+          <div className="flex items-center justify-between border-t border-border/70 pt-1">
+            <span className="text-[11px] text-muted-foreground">{t('runtimeStatusActionHint')}</span>
             <button
               type="button"
               onClick={() => void handleRestart()}
               disabled={summary.isBusy}
-              className="text-sm font-semibold text-sky-600 transition-colors hover:text-sky-700 disabled:text-gray-400"
+              className="text-sm font-semibold text-primary transition-colors hover:text-primary-hover disabled:text-muted-foreground/45"
             >
               {summary.isBusy ? t('runtimeStatusRestartingAction') : summary.actionLabel}
             </button>

package/src/app/components/layout/sidebar-items.tsx

@@ -111,10 +111,10 @@ export function SidebarNavLinkItem({
         isActive
           ? collapsed
             ? SIDEBAR_RAIL_ACTIVE_SURFACE_CLASS
-            : "bg-gray-200 text-gray-900 shadow-sm"
+            : "bg-accent text-accent-foreground shadow-sm"
           : collapsed
             ? SIDEBAR_RAIL_SURFACE_CLASS
-            : "text-gray-600 hover:bg-gray-200/60 hover:text-gray-900",
+            : "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
         className,
       )}
     >
@@ -123,8 +123,8 @@ export function SidebarNavLinkItem({
           collapsed ? SIDEBAR_RAIL_ICON_CLASS : tone.icon,
           "shrink-0 transition-colors",
           isActive
-            ? "text-gray-900"
-            : "text-gray-500 group-hover:text-gray-800",
+            ? "text-accent-foreground"
+            : "text-muted-foreground/75 group-hover:text-accent-foreground",
         )}
       />
       <span className={collapsed ? "sr-only" : "min-w-0 flex-1 text-left"}>
@@ -174,7 +174,7 @@ export function SidebarActionItem({
       onClick={onClick}
       aria-label={label}
       className={cn(
-        "group flex w-full items-center rounded-xl font-medium text-gray-600 transition-all duration-base hover:bg-gray-200/60 hover:text-gray-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35",
+        "group flex w-full items-center rounded-xl font-medium text-muted-foreground transition-all duration-base hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35",
         collapsed
           ? cn(
               SIDEBAR_RAIL_CONTROL_CLASS,
@@ -189,7 +189,7 @@ export function SidebarActionItem({
       <Icon
         className={cn(
           collapsed ? SIDEBAR_RAIL_ICON_CLASS : tone.icon,
-          "shrink-0 text-gray-500 transition-colors group-hover:text-gray-800",
+          "shrink-0 text-muted-foreground/75 transition-colors group-hover:text-accent-foreground",
         )}
       />
       <span
@@ -203,7 +203,7 @@ export function SidebarActionItem({
       {!collapsed && trailing ? (
         <span
           className={cn(
-            "shrink-0 text-gray-500",
+            "shrink-0 text-muted-foreground",
             tone.value,
             trailingClassName,
           )}
@@ -248,7 +248,7 @@ export function SidebarSelectItem({
     <SelectTrigger
       aria-label={label}
       className={cn(
-        "group h-auto w-full rounded-xl border-0 bg-transparent font-medium text-gray-600 shadow-none hover:bg-gray-200/60 focus:ring-0 focus-visible:ring-2 focus-visible:ring-primary/35",
+        "group h-auto w-full rounded-xl border-0 bg-transparent font-medium text-muted-foreground shadow-none hover:bg-accent hover:text-accent-foreground focus:ring-0 focus-visible:ring-2 focus-visible:ring-primary/35",
         collapsed
           ? cn(
               SIDEBAR_RAIL_CONTROL_CLASS,
@@ -267,13 +267,13 @@ export function SidebarSelectItem({
         <Icon
           className={cn(
             collapsed ? SIDEBAR_RAIL_ICON_CLASS : tone.icon,
-            "shrink-0 text-gray-500 transition-colors group-hover:text-gray-800",
+            "shrink-0 text-muted-foreground/75 transition-colors group-hover:text-accent-foreground",
           )}
         />
         <span className={collapsed ? "sr-only" : "text-left"}>{label}</span>
       </div>
       {!collapsed ? (
-        <span className={cn("ml-auto text-gray-500", tone.value)}>
+        <span className={cn("ml-auto text-muted-foreground", tone.value)}>
           {valueLabel}
         </span>
       ) : null}

package/src/app/components/layout/sidebar-rail.styles.ts

@@ -7,9 +7,9 @@ export const SIDEBAR_RAIL_STACK_CLASS = "space-y-1";
 export const SIDEBAR_RAIL_ITEM_GAP_CLASS = "gap-1";
 
 export const SIDEBAR_RAIL_SURFACE_CLASS =
-  "text-gray-600 transition-colors duration-base hover:bg-gray-200/60 hover:text-gray-900 active:bg-gray-200/75 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35";
+  "text-muted-foreground transition-colors duration-base hover:bg-accent hover:text-accent-foreground active:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35";
 
-export const SIDEBAR_RAIL_ACTIVE_SURFACE_CLASS = "bg-gray-200/70 text-gray-900";
+export const SIDEBAR_RAIL_ACTIVE_SURFACE_CLASS = "bg-accent text-accent-foreground";
 
 export const SIDEBAR_RAIL_PRIMARY_SURFACE_CLASS =
   "bg-primary/10 text-primary transition-colors duration-base hover:bg-primary/15 hover:text-primary-700 active:bg-primary/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35";

package/src/app/components/layout/sidebar.tsx

@@ -105,7 +105,7 @@ function SettingsSidebarHeader({
           to="/chat"
           aria-label={t("backToMain")}
           className={cn(
-            "group inline-flex min-w-0 items-center rounded-lg text-[12px] font-medium text-gray-500 transition-colors hover:bg-gray-200/60 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35",
+            "group inline-flex min-w-0 items-center rounded-lg text-[12px] 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/35",
             isCollapsed
               ? cn(
                   SIDEBAR_RAIL_CONTROL_CLASS,
@@ -118,7 +118,7 @@ function SettingsSidebarHeader({
           <ArrowLeft
             className={cn(
               isCollapsed ? SIDEBAR_RAIL_ICON_CLASS : "h-3.5 w-3.5",
-              "shrink-0 text-gray-500 group-hover:text-gray-800",
+              "shrink-0 text-muted-foreground/75 group-hover:text-accent-foreground",
             )}
           />
           <span className={isCollapsed ? "sr-only" : "truncate"}>
@@ -128,10 +128,10 @@ function SettingsSidebarHeader({
         {!isCollapsed ? (
           <>
             <span
-              className="h-4 w-px shrink-0 bg-[#dddfe6]"
+              className="h-4 w-px shrink-0 bg-border"
               aria-hidden="true"
             />
-            <h1 className="truncate text-[15px] font-semibold tracking-[-0.01em] text-gray-800">
+            <h1 className="truncate text-[15px] font-semibold tracking-[-0.01em] text-foreground">
               {t("settings")}
             </h1>
             <div className="ml-auto">
@@ -258,7 +258,7 @@ export function Sidebar({ mode }: SidebarProps) {
   const isSettingsMode = mode === "settings";
   const currentThemeLabel = t(
     THEME_OPTIONS.find((option) => option.value === theme)?.labelKey ??
-      "themeWarm",
+      "themeNatural",
   );
   const accountEmail = remoteStatus.data?.account.email?.trim();
   const accountConnected = Boolean(remoteStatus.data?.account.loggedIn);
@@ -326,7 +326,7 @@ export function Sidebar({ mode }: SidebarProps) {
         {/* Footer actions stay reachable while the nav scrolls independently. */}
         <div
           className={cn(
-            "shrink-0 border-t border-[#dde0ea] bg-secondary",
+            "shrink-0 border-t border-border/70 bg-secondary",
             isCollapsed
               ? "mt-2 pt-2"
               : isSettingsMode