@nextclaw/ui 0.14.1 → 0.14.3

package/src/shared/components/ui/dialog.tsx

@@ -36,14 +36,14 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-gray-200/50 bg-white p-6 shadow-xl duration-base data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-2xl",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl border border-border bg-popover p-6 text-popover-foreground shadow-xl duration-base data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
         className
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-lg p-1 opacity-70 ring-offset-white transition-all duration-fast hover:opacity-100 hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none">
-        <X className="h-4 w-4 text-gray-500" />
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-lg p-1 opacity-70 ring-offset-background transition-all duration-fast hover:bg-accent hover:text-accent-foreground hover:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none">
+        <X className="h-4 w-4 text-muted-foreground" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
@@ -86,7 +86,7 @@ const DialogTitle = React.forwardRef<
   <DialogPrimitive.Title
     ref={ref}
     className={cn(
-      "text-lg font-semibold leading-tight tracking-tight text-gray-900",
+      "text-lg font-semibold leading-tight tracking-tight text-foreground",
       className
     )}
     {...props}
@@ -100,7 +100,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-gray-500 leading-relaxed", className)}
+    className={cn("text-sm text-muted-foreground leading-relaxed", className)}
     {...props}
   />
 ))

package/src/shared/components/ui/input.tsx

@@ -9,7 +9,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          'flex h-9 w-full rounded-xl border border-gray-200/80 bg-white px-3.5 py-2 text-sm text-gray-900 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-300 placeholder:font-normal focus:outline-none focus:ring-1 focus:ring-primary/40 focus:border-primary/40 transition-colors disabled:cursor-not-allowed disabled:opacity-50',
+          'flex h-9 w-full rounded-xl border border-border bg-card px-3.5 py-2 text-sm text-foreground file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground/55 placeholder:font-normal focus:outline-none focus:ring-1 focus:ring-primary/40 focus:border-primary/50 transition-colors disabled:cursor-not-allowed disabled:opacity-50',
           className
         )}
         ref={ref}

package/src/shared/components/ui/label.tsx

@@ -8,7 +8,7 @@ const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
     <label
       ref={ref}
       className={cn(
-        'text-sm font-medium leading-none text-gray-700 peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        'text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
         className
       )}
       {...props}

package/src/shared/components/ui/popover.tsx

@@ -28,7 +28,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       collisionPadding={collisionPadding}
       className={cn(
-        'z-[var(--z-popover,50)] w-72 overflow-x-hidden overflow-y-auto rounded-2xl border border-gray-200/50 bg-white p-4 shadow-lg animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'z-[var(--z-popover,50)] w-72 overflow-x-hidden overflow-y-auto rounded-2xl border border-border bg-popover p-4 text-popover-foreground shadow-lg animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         className
       )}
       style={{ maxHeight: POPOVER_CONTENT_MAX_HEIGHT, ...style }}

package/src/shared/components/ui/select.tsx

@@ -25,7 +25,7 @@ const SelectTrigger = React.forwardRef<
     <SelectPrimitive.Trigger
         ref={ref}
         className={cn(
-            "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-xl border border-gray-200/80 bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary/40 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 bg-white",
+            "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-xl border border-border bg-card px-3 py-2 text-sm text-foreground shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary/40 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
             className
         )}
         {...props}
@@ -78,7 +78,7 @@ const SelectContent = React.forwardRef<
         <SelectPrimitive.Content
             ref={ref}
             className={cn(
-                "relative z-[var(--z-popover,50)] flex max-h-96 min-w-[8rem] flex-col overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-white",
+                "relative z-[var(--z-popover,50)] flex max-h-96 min-w-[8rem] flex-col overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
                 position === "popper" &&
                 "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
                 className
@@ -119,7 +119,7 @@ const SelectItem = React.forwardRef<
     <SelectPrimitive.Item
         ref={ref}
         className={cn(
-            "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-gray-100 focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-gray-100",
+            "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-accent",
             className
         )}
         {...props}

package/src/shared/components/ui/switch.tsx

@@ -16,8 +16,8 @@ const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
         aria-checked={checked}
         ref={ref}
         className={cn(
-          'peer inline-flex h-[22px] w-10 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50',
-          checked ? 'bg-primary' : 'bg-gray-200/80 hover:bg-gray-300/80',
+          'peer inline-flex h-[22px] w-10 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50',
+          checked ? 'bg-primary' : 'bg-muted hover:bg-accent',
           className
         )}
         onClick={() => onCheckedChange?.(!checked)}
@@ -26,7 +26,7 @@ const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
         <span
           data-state={checked ? 'checked' : 'unchecked'}
           className={cn(
-            'pointer-events-none block h-5 w-5 rounded-full bg-white shadow-md ring-0 transition-transform duration-fast',
+            'pointer-events-none block h-5 w-5 rounded-full bg-card shadow-md ring-0 transition-transform duration-fast',
             checked ? 'translate-x-5' : 'translate-x-0',
             thumbClassName
           )}

package/src/shared/components/ui/tab-strip/__tests__/compact-tab-strip.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import {
   CompactTabStrip,
@@ -49,4 +49,27 @@ describe("CompactTabStrip", () => {
       inline: "nearest",
     });
   });
+
+  it("selects a tab when clicking its leading icon", () => {
+    const onSelect = vi.fn();
+
+    render(
+      <CompactTabStrip
+        tabs={[
+          {
+            key: "child-session",
+            label: "Child session",
+            active: false,
+            leadingIcon: <span data-testid="child-tab-icon" />,
+            onSelect,
+          },
+        ]}
+        actions={[]}
+      />,
+    );
+
+    fireEvent.click(screen.getByTestId("child-tab-icon"));
+
+    expect(onSelect).toHaveBeenCalledTimes(1);
+  });
 });

package/src/shared/components/ui/tab-strip/compact-tab-strip.tsx

@@ -65,6 +65,9 @@ function CompactTabLabelButton({
   labelClassName?: string;
   tab: CompactTabStripTab;
 }) {
+  const leadingIcon = tab.onClose && tab.closePlacement === "leading-hover"
+    ? null
+    : tab.leadingIcon;
   const button = (
     <button
       type="button"
@@ -72,6 +75,11 @@ function CompactTabLabelButton({
       aria-label={tab.label}
       className="flex min-w-0 flex-1 items-center gap-1.5 text-left"
     >
+      {leadingIcon ? (
+        <span className="inline-flex shrink-0 items-center justify-center">
+          {leadingIcon}
+        </span>
+      ) : null}
       <span className={cn("min-w-0 truncate text-[12px] font-medium", labelClassName)}>
         {tab.label}
       </span>
@@ -136,10 +144,6 @@ function CompactTabItem({
           </span>
           <X className="hidden h-3.5 w-3.5 group-hover:block" />
         </button>
-      ) : tab.leadingIcon ? (
-        <span className="inline-flex shrink-0 items-center justify-center">
-          {tab.leadingIcon}
-        </span>
       ) : null}
       <CompactTabLabelButton tab={tab} labelClassName={labelClassName} />
       {tab.onClose && tab.closePlacement !== "leading-hover" ? (

package/src/shared/components/ui/tabs.tsx

@@ -42,7 +42,7 @@ export function TabsList({ children, className }: TabsListProps) {
   return (
     <div
       className={cn(
-        'inline-flex h-9 items-center justify-center rounded-xl bg-gray-100/80 p-1 text-gray-500',
+        'inline-flex h-9 items-center justify-center rounded-xl bg-muted p-1 text-muted-foreground',
         className
       )}
     >
@@ -64,10 +64,10 @@ export function TabsTrigger({ value, children, className }: TabsTriggerProps) {
       aria-pressed={isActive}
       data-state={isActive ? 'active' : 'inactive'}
       className={cn(
-        'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-[13px] font-medium ring-offset-white transition-all duration-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+        'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-[13px] font-medium ring-offset-background transition-all duration-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
         isActive
-          ? 'bg-white text-gray-900 shadow-sm'
-          : 'hover:bg-white/50 hover:text-gray-800 text-gray-600',
+          ? 'bg-card text-foreground shadow-sm'
+          : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
         className
       )}
     >

package/src/shared/components/ui/textarea.tsx

@@ -7,7 +7,7 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ className, ...props }, ref) => (
     <textarea
       className={cn(
-        "flex min-h-28 w-full rounded-xl border border-gray-200/80 bg-white px-3.5 py-2.5 text-sm text-gray-900 placeholder:text-gray-300 placeholder:font-normal focus:outline-none focus:ring-1 focus:ring-primary/40 focus:border-primary/40 transition-colors disabled:cursor-not-allowed disabled:opacity-50",
+        "flex min-h-28 w-full rounded-xl border border-border bg-card px-3.5 py-2.5 text-sm text-foreground placeholder:text-muted-foreground/55 placeholder:font-normal focus:outline-none focus:ring-1 focus:ring-primary/40 focus:border-primary/50 transition-colors disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       ref={ref}

package/src/shared/lib/i18n/locales/en-US/chat.json

@@ -39,6 +39,8 @@
   "chatWorkspaceBack": "Back in workspace",
   "chatWorkspaceForward": "Forward in workspace",
   "chatWorkspaceClosePanel": "Close workspace panel",
+  "chatWorkspaceSideChatDraftTitle": "Side chat",
+  "chatWorkspaceSideChatDraftSubtitle": "This draft will inherit the parent session context when you send the first message.",
   "chatWorkspaceChildSessions": "Child sessions",
   "chatWorkspaceOpenFiles": "Open files",
   "chatWorkspacePreview": "Preview",
@@ -55,9 +57,10 @@
   "chatTyping": "Agent is thinking...",
   "chatRuntimeInitializing": "Chat is still initializing. You can keep typing and send once startup finishes.",
   "chatRuntimeInitializationFailed": "Chat startup failed. Please retry in a moment or inspect the service logs.",
-  "chatInputPlaceholder": "Type a message, type / to select skills, Enter to send, Shift + Enter for newline",
+  "chatInputPlaceholder": "Type a message, / for skills, @ for panel apps, Enter to send, Shift + Enter for newline",
   "chatInputPlaceholderCompact": "Message NextClaw...",
   "chatInputHint": "Multi-turn context is preserved in the current session.",
+  "chatSlashSection": "Slash menu",
   "chatSlashSectionCommands": "Commands",
   "chatSlashSectionSkills": "Skills",
   "chatSlashTypeCommand": "Command",
@@ -67,8 +70,20 @@
   "chatSlashLoading": "Loading commands and skills…",
   "chatSlashNoResult": "No matches",
   "chatSlashHint": "Type / to access commands and skills",
-  "chatSlashCommandHint": "Press Enter to insert command, then add args and send.",
+  "chatSlashCommandHint": "Press Enter to run this command.",
+  "chatSlashCommandSideChatTitle": "Side chat",
+  "chatSlashCommandSideChatDescription": "Open a draft side conversation that inherits this session context.",
+  "chatSlashCommandSideChatDetail": "Creates the child session only after your first message.",
   "chatSlashSkillHint": "Press Enter to add this skill for the next turn.",
+  "chatPanelAppReferenceLoading": "Loading panel apps...",
+  "chatPanelAppReferenceSection": "Panel Apps",
+  "chatPanelAppReferenceNoResult": "No matching panel apps",
+  "chatPanelAppReferenceHint": "Type @ to reference a panel app",
+  "chatPanelAppReferenceItemHint": "Press Enter to reference this panel app.",
+  "chatPanelAppReferenceType": "Panel App",
+  "chatPanelAppReferenceAppId": "App ID",
+  "chatPanelAppReferenceFile": "File",
+  "chatPanelAppReferenceNoDescription": "No panel app description",
   "chatSkillScopeBuiltin": "Built-in",
   "chatSkillScopeProject": "Project",
   "chatSkillScopeWorkspace": "Workspace",
@@ -98,6 +113,9 @@
   "chatContextCompactionCoveredMessages": "Covered messages",
   "chatContextCompactionOriginalTokens": "Estimated before compaction",
   "chatContextCompactionProjectedTokens": "Estimated after compaction",
+  "chatContextInheritanceInherited": "Inherited parent session context",
+  "chatContextInheritanceSourceSession": "Source session",
+  "chatContextInheritanceMessages": "Inherited messages",
   "chatSending": "Sending...",
   "chatQueueSend": "Queue",
   "chatQueuedHintPrefix": "Queued",

package/src/shared/lib/i18n/locales/en-US/core.json

@@ -12,6 +12,8 @@
   "advanced": "Advanced",
   "settings": "Settings",
   "settingsMenu": "Settings menu",
+  "sidebarCollapse": "Collapse sidebar",
+  "sidebarExpand": "Expand sidebar",
   "security": "Security",
   "backToMain": "Back to Main",
   "enabled": "Enabled",
@@ -37,8 +39,13 @@
   "noneOption": "None",
   "language": "Language",
   "theme": "Theme",
-  "themeWarm": "Warm",
-  "themeCool": "Cool",
+  "themeNatural": "Natural",
+  "themeMinimal": "Minimal",
+  "themeWarm": "Paper",
+  "themeCool": "Mist",
+  "themeDawn": "Dawn",
+  "themeGraphite": "Graphite",
+  "themeProbe": "Probe",
   "isRequired": "is required",
   "duplicate": "duplicate",
   "notFound": "not found",

package/src/shared/lib/i18n/locales/zh-CN/chat.json

@@ -39,6 +39,8 @@
   "chatWorkspaceBack": "工作区后退",
   "chatWorkspaceForward": "工作区前进",
   "chatWorkspaceClosePanel": "关闭工作区侧栏",
+  "chatWorkspaceSideChatDraftTitle": "Side chat",
+  "chatWorkspaceSideChatDraftSubtitle": "发送第一条消息后，会继承父会话上下文并创建真实 child 会话。",
   "chatWorkspaceChildSessions": "子会话",
   "chatWorkspaceOpenFiles": "打开的文件",
   "chatWorkspacePreview": "预览",
@@ -55,9 +57,10 @@
   "chatTyping": "Agent 正在思考...",
   "chatRuntimeInitializing": "聊天能力正在初始化。你可以先输入内容，完成后即可发送。",
   "chatRuntimeInitializationFailed": "聊天能力启动失败，请稍后重试或检查服务日志。",
-  "chatInputPlaceholder": "输入消息，输入 / 选择技能，Enter 发送，Shift + Enter 换行",
+  "chatInputPlaceholder": "输入消息，/ 选技能，@ 引用面板应用，Enter 发送，Shift + Enter 换行",
   "chatInputPlaceholderCompact": "发消息...",
   "chatInputHint": "支持多轮上下文，默认走当前会话。",
+  "chatSlashSection": "斜杠菜单",
   "chatSlashSectionCommands": "命令",
   "chatSlashSectionSkills": "技能",
   "chatSlashTypeCommand": "命令",
@@ -67,8 +70,20 @@
   "chatSlashLoading": "加载命令与技能中…",
   "chatSlashNoResult": "无匹配项",
   "chatSlashHint": "输入 / 触发命令或技能选择",
-  "chatSlashCommandHint": "回车插入命令，继续输入参数后发送。",
+  "chatSlashCommandHint": "回车执行这个命令。",
+  "chatSlashCommandSideChatTitle": "Side chat",
+  "chatSlashCommandSideChatDescription": "打开一个继承当前会话上下文的右侧草稿会话。",
+  "chatSlashCommandSideChatDetail": "只有发送第一条消息后才会创建真实 child 会话。",
   "chatSlashSkillHint": "回车把该技能加入本轮请求。",
+  "chatPanelAppReferenceLoading": "加载面板应用中…",
+  "chatPanelAppReferenceSection": "面板应用",
+  "chatPanelAppReferenceNoResult": "没有匹配的面板应用",
+  "chatPanelAppReferenceHint": "输入 @ 引用面板应用",
+  "chatPanelAppReferenceItemHint": "回车引用这个面板应用。",
+  "chatPanelAppReferenceType": "面板应用",
+  "chatPanelAppReferenceAppId": "应用 ID",
+  "chatPanelAppReferenceFile": "文件",
+  "chatPanelAppReferenceNoDescription": "暂无面板应用描述",
   "chatSkillScopeBuiltin": "内建",
   "chatSkillScopeProject": "项目",
   "chatSkillScopeWorkspace": "工作区",
@@ -98,6 +113,9 @@
   "chatContextCompactionCoveredMessages": "覆盖消息数",
   "chatContextCompactionOriginalTokens": "压缩前估算",
   "chatContextCompactionProjectedTokens": "压缩后估算",
+  "chatContextInheritanceInherited": "已继承父会话上下文",
+  "chatContextInheritanceSourceSession": "来源会话",
+  "chatContextInheritanceMessages": "继承消息数",
   "chatSending": "发送中...",
   "chatQueueSend": "排队发送",
   "chatQueuedHintPrefix": "当前有",

package/src/shared/lib/i18n/locales/zh-CN/core.json

@@ -12,6 +12,8 @@
   "advanced": "高级",
   "settings": "设置",
   "settingsMenu": "设置菜单",
+  "sidebarCollapse": "收起侧边栏",
+  "sidebarExpand": "展开侧边栏",
   "security": "安全",
   "backToMain": "返回主界面",
   "enabled": "启用",
@@ -37,8 +39,13 @@
   "noneOption": "无",
   "language": "语言",
   "theme": "主题",
-  "themeWarm": "暖色",
-  "themeCool": "冷色",
+  "themeNatural": "自然",
+  "themeMinimal": "简白",
+  "themeWarm": "纸暖",
+  "themeCool": "雾蓝",
+  "themeDawn": "晨砂",
+  "themeGraphite": "石墨",
+  "themeProbe": "探针",
   "isRequired": "必填",
   "duplicate": "重复",
   "notFound": "未找到",

package/src/shared/lib/theme/index.ts

@@ -1,80 +1,122 @@
-export type UiTheme = 'warm' | 'cool';
+export type UiTheme = 'natural' | 'minimal' | 'warm' | 'cool' | 'dawn' | 'graphite' | 'probe';
 
 const THEME_STORAGE_KEY = 'nextclaw.ui.theme';
+const DEFAULT_THEME: UiTheme = 'natural';
+const THEME_VALUES: readonly UiTheme[] = ['natural', 'minimal', 'warm', 'cool', 'dawn', 'graphite', 'probe'];
 
 export const THEME_OPTIONS: Array<{ value: UiTheme; labelKey: string }> = [
+  { value: 'natural', labelKey: 'themeNatural' },
+  { value: 'minimal', labelKey: 'themeMinimal' },
   { value: 'warm', labelKey: 'themeWarm' },
-  { value: 'cool', labelKey: 'themeCool' }
+  { value: 'cool', labelKey: 'themeCool' },
+  { value: 'dawn', labelKey: 'themeDawn' },
+  { value: 'graphite', labelKey: 'themeGraphite' },
+  { value: 'probe', labelKey: 'themeProbe' }
 ];
 
-let activeTheme: UiTheme = 'warm';
-let initialized = false;
-const listeners = new Set<(theme: UiTheme) => void>();
-
-function isTheme(value: unknown): value is UiTheme {
-  return value === 'warm' || value === 'cool';
-}
+export function normalizeTheme(value: unknown): UiTheme | null {
+  if (typeof value !== 'string') {
+    return null;
+  }
 
-function applyThemeAttribute(theme: UiTheme): void {
-  if (typeof document === 'undefined') {
-    return;
+  if ((THEME_VALUES as readonly string[]).includes(value)) {
+    return value as UiTheme;
   }
-  document.documentElement.setAttribute('data-theme', theme);
+
+  return value === 'leaf' ? 'warm' : null;
 }
 
-export function resolveInitialTheme(): UiTheme {
-  if (typeof window === 'undefined') {
-    return 'warm';
-  }
+class UiThemeOwner {
+  private activeTheme: UiTheme = DEFAULT_THEME;
+  private initialized = false;
+  private readonly listeners = new Set<(theme: UiTheme) => void>();
 
-  try {
-    const saved = window.localStorage.getItem(THEME_STORAGE_KEY);
-    if (isTheme(saved)) {
-      return saved;
+  resolveInitialTheme = (): UiTheme => {
+    if (typeof window === 'undefined') {
+      return DEFAULT_THEME;
     }
-  } catch {
-    // ignore storage failures
-  }
 
-  return 'warm';
-}
+    try {
+      const saved = window.localStorage.getItem(THEME_STORAGE_KEY);
+      const theme = normalizeTheme(saved);
+      if (theme) {
+        return theme;
+      }
+    } catch {
+      // ignore storage failures
+    }
 
-export function initializeTheme(): UiTheme {
-  if (!initialized) {
-    activeTheme = resolveInitialTheme();
-    applyThemeAttribute(activeTheme);
-    initialized = true;
-  }
-  return activeTheme;
-}
+    return DEFAULT_THEME;
+  };
 
-export function getTheme(): UiTheme {
-  return initialized ? activeTheme : initializeTheme();
-}
+  initializeTheme = (): UiTheme => {
+    if (!this.initialized) {
+      this.activeTheme = this.resolveInitialTheme();
+      this.applyThemeAttribute(this.activeTheme);
+      this.initialized = true;
+    }
+    return this.activeTheme;
+  };
 
-export function setTheme(theme: UiTheme): void {
-  initializeTheme();
-  if (theme === activeTheme) {
-    return;
-  }
+  getTheme = (): UiTheme => this.initialized ? this.activeTheme : this.initializeTheme();
 
-  activeTheme = theme;
-  applyThemeAttribute(activeTheme);
+  setTheme = (theme: UiTheme): void => {
+    this.initializeTheme();
+    if (theme === this.activeTheme) {
+      return;
+    }
+
+    this.activeTheme = theme;
+    this.applyThemeAttribute(this.activeTheme);
+    this.saveTheme(this.activeTheme);
+    this.listeners.forEach((listener) => listener(this.activeTheme));
+  };
+
+  subscribeThemeChange = (listener: (theme: UiTheme) => void): (() => void) => {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  };
+
+  private applyThemeAttribute = (theme: UiTheme): void => {
+    if (typeof document === 'undefined') {
+      return;
+    }
+    document.documentElement.setAttribute('data-theme', theme);
+  };
+
+  private saveTheme = (theme: UiTheme): void => {
+    if (typeof window === 'undefined') {
+      return;
+    }
 
-  if (typeof window !== 'undefined') {
     try {
-      window.localStorage.setItem(THEME_STORAGE_KEY, activeTheme);
+      window.localStorage.setItem(THEME_STORAGE_KEY, theme);
     } catch {
       // ignore storage failures
     }
-  }
+  };
+}
+
+const uiThemeOwner = new UiThemeOwner();
 
-  listeners.forEach((listener) => listener(activeTheme));
+export function resolveInitialTheme(): UiTheme {
+  return uiThemeOwner.resolveInitialTheme();
+}
+
+export function initializeTheme(): UiTheme {
+  return uiThemeOwner.initializeTheme();
+}
+
+export function getTheme(): UiTheme {
+  return uiThemeOwner.getTheme();
+}
+
+export function setTheme(theme: UiTheme): void {
+  uiThemeOwner.setTheme(theme);
 }
 
 export function subscribeThemeChange(listener: (theme: UiTheme) => void): () => void {
-  listeners.add(listener);
-  return () => {
-    listeners.delete(listener);
-  };
+  return uiThemeOwner.subscribeThemeChange(listener);
 }

package/src/shared/lib/ui-document-title/__tests__/ui-document-title.test.ts

@@ -0,0 +1,49 @@
+import { describe, expect, it } from "vitest";
+import { setLanguage } from "@/shared/lib/i18n";
+import { resolveUiDocumentTitle } from "@/shared/lib/ui-document-title";
+
+type TestLocation = Pick<Location, "host" | "hostname" | "port">;
+
+function testLocation(host: string, hostname: string, port = ""): TestLocation {
+  return { host, hostname, port };
+}
+
+describe("resolveUiDocumentTitle", () => {
+  it("keeps the previous title shape when the browser location is unavailable", () => {
+    setLanguage("en");
+
+    expect(resolveUiDocumentTitle("/chat")).toBe("NextClaw - Chat");
+  });
+
+  it("uses only the port for localhost instances", () => {
+    setLanguage("en");
+
+    expect(
+      resolveUiDocumentTitle(
+        "/chat",
+        testLocation("localhost:5173", "localhost", "5173"),
+      ),
+    ).toBe("NextClaw 5173 - Chat");
+  });
+
+  it("uses only the port for loopback IP instances", () => {
+    setLanguage("en");
+
+    expect(
+      resolveUiDocumentTitle(
+        "/model",
+        testLocation("127.0.0.1:3000", "127.0.0.1", "3000"),
+      ),
+    ).toBe("NextClaw 3000 - Model Configuration");
+  });
+
+  it("uses the full host for non-local instances", () => {
+    setLanguage("en");
+    const title = resolveUiDocumentTitle(
+      "/providers",
+      testLocation("nextclaw.example.com:8443", "nextclaw.example.com", "8443"),
+    );
+
+    expect(title).toBe("NextClaw nextclaw.example.com:8443 - AI Providers");
+  });
+});