@nextclaw/ui 0.14.4 → 0.15.0

package/src/shared/lib/api/utils/server-path.utils.ts

@@ -1,6 +1,20 @@
-import { nextclawClient } from '../managers/client.manager';
+import { API_BASE } from '@/shared/lib/api/api-base';
+import { nextclawClient } from '@/shared/lib/api/managers/client.manager';
 import type { ServerPathBrowseView, ServerPathReadView } from '@/shared/lib/api/types';
 
+const SERVER_PATH_CONTENT_BASE_PATH = '/api/server-paths/content';
+const SERVER_PATH_CONTENT_ABSOLUTE_SCOPE = '__abs__';
+const SERVER_PATH_CONTENT_WINDOWS_SCOPE = '__win__';
+
+function encodeServerPathSegments(path: string): string {
+  return path
+    .replace(/\\/g, '/')
+    .split('/')
+    .filter(Boolean)
+    .map((segment) => encodeURIComponent(segment))
+    .join('/');
+}
+
 export async function fetchServerPathBrowse(params?: {
   path?: string | null;
   includeFiles?: boolean;
@@ -14,3 +28,15 @@ export async function fetchServerPathRead(params: {
 }): Promise<ServerPathReadView> {
   return await nextclawClient.serverPaths.read(params);
 }
+
+export function buildServerPathContentUrl(resolvedPath: string): string {
+  const normalizedPath = resolvedPath.trim();
+  if (/^[a-z]:[\\/]/i.test(normalizedPath)) {
+    const [drive, ...segments] = normalizedPath.replace(/\\/g, '/').split('/');
+    return `${API_BASE}${SERVER_PATH_CONTENT_BASE_PATH}/${SERVER_PATH_CONTENT_WINDOWS_SCOPE}/${encodeURIComponent(drive)}/${segments
+      .filter(Boolean)
+      .map((segment) => encodeURIComponent(segment))
+      .join('/')}`;
+  }
+  return `${API_BASE}${SERVER_PATH_CONTENT_BASE_PATH}/${SERVER_PATH_CONTENT_ABSOLUTE_SCOPE}/${encodeServerPathSegments(normalizedPath)}`;
+}

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

@@ -50,30 +50,38 @@
   "chatWorkspacePreviewUnsupported": "This file is not supported in the sidebar preview yet.",
   "chatWorkspacePreviewEmpty": "No file content is available for preview.",
   "chatWorkspaceDiffEmpty": "No diff content is available.",
+  "chatWorkspaceHtmlPreviewTitle": "Rendered HTML preview",
   "chatWorkspacePreviewTruncated": "Preview truncated",
   "chatWorkspaceSessionCronJobs": "Session cron jobs",
   "chatWorkspaceCronJobEmpty": "This session has no cron jobs.",
   "chatSessionUnread": "Session has unread updates",
   "chatTyping": "Agent is thinking...",
+  "chatScrollToBottom": "Scroll to bottom",
+  "chatProcessSummaryProcessed": "Processed",
   "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, / for skills, @ for panel apps, Enter to send, Shift + Enter for newline",
+  "chatInputPlaceholder": "Type a message, / for commands, apps or skills, @ for panel app references, 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",
+  "chatSlashFilterAll": "All",
+  "chatSlashFilterCommands": "Commands",
+  "chatSlashFilterSkills": "Skills",
+  "chatSlashFilterPanelApps": "Panel Apps",
   "chatSlashTypeCommand": "Command",
   "chatSlashTypeSkill": "Skill",
   "chatSlashSkillSpec": "Spec",
   "chatSlashSkillScope": "Scope",
-  "chatSlashLoading": "Loading commands and skills…",
+  "chatSlashLoading": "Loading commands, panel apps and skills…",
   "chatSlashNoResult": "No matches",
-  "chatSlashHint": "Type / to access commands and skills",
+  "chatSlashHint": "Type / to access commands, panel apps or skills",
   "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.",
+  "chatSlashPanelAppHint": "Press Enter to open this panel app on the right.",
   "chatSlashSkillHint": "Press Enter to add this skill for the next turn.",
   "chatPanelAppReferenceLoading": "Loading panel apps...",
   "chatPanelAppReferenceSection": "Panel Apps",
@@ -118,9 +126,9 @@
   "chatContextInheritanceMessages": "Inherited messages",
   "chatSending": "Sending...",
   "chatQueueSend": "Queue",
-  "chatQueuedHintPrefix": "Queued",
-  "chatQueuedHintSuffix": "pending messages.",
-  "chatQueueMoveFirst": "Move to Next",
+  "chatQueuedBannerAttachmentFallback": "Attachment message",
+  "chatQueuedEdit": "Edit queued input",
+  "chatQueuedDelete": "Delete queued input",
   "chatDeleteSession": "Delete Session",
   "chatDeleteSessionConfirm": "Delete the current session?",
   "chatSessionMoreActions": "More actions",
@@ -136,6 +144,7 @@
   "chatSessionProjectUpdateHint": "The browser lists directories from the server machine. Changing the project directory only affects future messages and tool runs. History stays unchanged.",
   "chatSessionProjectUpdated": "Project directory updated",
   "chatSessionProjectCleared": "Project directory cleared",
+  "chatSessionErrorTitle": "Something went wrong",
   "chatSendFailed": "Failed to send message",
   "chatRoleUser": "You",
   "chatRoleAssistant": "Assistant",

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

@@ -11,6 +11,7 @@
   "marketplace": "Marketplace",
   "advanced": "Advanced",
   "settings": "Settings",
+  "appearance": "Appearance",
   "settingsMenu": "Settings menu",
   "sidebarCollapse": "Collapse sidebar",
   "sidebarExpand": "Expand sidebar",
@@ -45,6 +46,7 @@
   "themeCool": "Mist",
   "themeDawn": "Dawn",
   "themeGraphite": "Graphite",
+  "themeNight": "Night",
   "themeProbe": "Probe",
   "isRequired": "is required",
   "duplicate": "duplicate",

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

@@ -1,8 +1,12 @@
 {
   "docBrowserTitle": "Embedded Browser",
   "docBrowserSearchPlaceholder": "Search, or enter a doc URL to open",
+  "docBrowserAddressLabel": "Address",
+  "docBrowserAddressPlaceholder": "Enter a URL, e.g. http://localhost:5173",
   "docBrowserUrlPlaceholder": "Enter a doc path, e.g. /guide/channels",
   "docBrowserOpenExternal": "Open in Docs",
+  "docBrowserOpenInBrowser": "Open in Browser",
+  "docBrowserRefresh": "Refresh",
   "docBrowserFloatMode": "Float Window",
   "docBrowserDockMode": "Dock to Sidebar",
   "docBrowserClose": "Close",
@@ -17,6 +21,13 @@
   "sideDockUnpinCurrent": "Remove from SideDock",
   "sideDockBuiltInDocked": "Built-in shortcut",
   "sideDockUnpinItem": "Remove shortcut",
+  "sideDockGitHubProject": "GitHub Project",
+  "sideDockHide": "Hide SideDock",
+  "sideDockHideConfirmTitle": "Hide SideDock?",
+  "sideDockHideConfirmDescription": "You can turn it back on from Settings > Appearance.",
+  "sideDockHideConfirmAction": "Hide",
+  "sideDockVisibilityTitle": "Show SideDock",
+  "sideDockVisibilityDescription": "Keep the right shortcut dock visible beside the workspace.",
   "appsTitle": "Apps",
   "panelAppsTitle": "Panel Apps",
   "panelAppsLoading": "Loading panel apps...",

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

@@ -58,6 +58,11 @@
   "marketplaceDetailPanelEmpty": "Click an item on the left to preview details here.",
   "marketplaceDetailSummary": "Summary",
   "marketplaceDetailDescription": "Description",
+  "marketplaceDetailMetadata": "Metadata",
+  "marketplaceDetailContent": "Content",
+  "marketplaceDetailSource": "Source",
+  "marketplaceDetailUnavailableTitle": "Detail unavailable",
+  "marketplaceDetailUnavailableDescription": "This right-side detail tab is missing content data for the current session. Open it again from the marketplace list.",
   "marketplaceOpenInDocBrowserTab": "Open in New Tab",
   "marketplaceMcpInstallDialogTitle": "Install MCP Server",
   "marketplaceMcpServerName": "Server Name",

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

@@ -50,30 +50,38 @@
   "chatWorkspacePreviewUnsupported": "该文件暂不支持在侧栏预览。",
   "chatWorkspacePreviewEmpty": "当前没有可显示的文件内容。",
   "chatWorkspaceDiffEmpty": "当前没有可显示的 diff 内容。",
+  "chatWorkspaceHtmlPreviewTitle": "HTML 渲染预览",
   "chatWorkspacePreviewTruncated": "内容已截断",
   "chatWorkspaceSessionCronJobs": "本会话定时任务",
   "chatWorkspaceCronJobEmpty": "这个会话暂无定时任务。",
   "chatSessionUnread": "会话有未读更新",
   "chatTyping": "Agent 正在思考...",
+  "chatScrollToBottom": "滚动到底部",
+  "chatProcessSummaryProcessed": "已处理",
   "chatRuntimeInitializing": "聊天能力正在初始化。你可以先输入内容，完成后即可发送。",
   "chatRuntimeInitializationFailed": "聊天能力启动失败，请稍后重试或检查服务日志。",
-  "chatInputPlaceholder": "输入消息，/ 选技能，@ 引用面板应用，Enter 发送，Shift + Enter 换行",
+  "chatInputPlaceholder": "输入消息，/ 选命令、应用或技能，@ 引用面板应用，Enter 发送，Shift + Enter 换行",
   "chatInputPlaceholderCompact": "发消息...",
   "chatInputHint": "支持多轮上下文，默认走当前会话。",
   "chatSlashSection": "斜杠菜单",
   "chatSlashSectionCommands": "命令",
   "chatSlashSectionSkills": "技能",
+  "chatSlashFilterAll": "全部",
+  "chatSlashFilterCommands": "命令",
+  "chatSlashFilterSkills": "技能",
+  "chatSlashFilterPanelApps": "面板应用",
   "chatSlashTypeCommand": "命令",
   "chatSlashTypeSkill": "技能",
   "chatSlashSkillSpec": "标识",
   "chatSlashSkillScope": "作用域",
-  "chatSlashLoading": "加载命令与技能中…",
+  "chatSlashLoading": "加载命令、面板应用与技能中…",
   "chatSlashNoResult": "无匹配项",
-  "chatSlashHint": "输入 / 触发命令或技能选择",
+  "chatSlashHint": "输入 / 触发命令、面板应用或技能选择",
   "chatSlashCommandHint": "回车执行这个命令。",
   "chatSlashCommandSideChatTitle": "Side chat",
   "chatSlashCommandSideChatDescription": "打开一个继承当前会话上下文的右侧草稿会话。",
   "chatSlashCommandSideChatDetail": "只有发送第一条消息后才会创建真实 child 会话。",
+  "chatSlashPanelAppHint": "回车在右侧打开这个面板应用。",
   "chatSlashSkillHint": "回车把该技能加入本轮请求。",
   "chatPanelAppReferenceLoading": "加载面板应用中…",
   "chatPanelAppReferenceSection": "面板应用",
@@ -118,9 +126,9 @@
   "chatContextInheritanceMessages": "继承消息数",
   "chatSending": "发送中...",
   "chatQueueSend": "排队发送",
-  "chatQueuedHintPrefix": "当前有",
-  "chatQueuedHintSuffix": "条消息待发送。",
-  "chatQueueMoveFirst": "置顶到下一条",
+  "chatQueuedBannerAttachmentFallback": "附件消息",
+  "chatQueuedEdit": "编辑排队输入",
+  "chatQueuedDelete": "删除排队输入",
   "chatDeleteSession": "删除会话",
   "chatDeleteSessionConfirm": "确认删除当前会话？",
   "chatSessionMoreActions": "更多操作",
@@ -136,6 +144,7 @@
   "chatSessionProjectUpdateHint": "这里浏览和选择的是服务端机器上的目录。修改项目目录只影响后续消息和后续工具执行，不会改写历史会话。",
   "chatSessionProjectUpdated": "项目目录已更新",
   "chatSessionProjectCleared": "项目目录已清除",
+  "chatSessionErrorTitle": "出错了",
   "chatSendFailed": "发送消息失败",
   "chatRoleUser": "你",
   "chatRoleAssistant": "助手",

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

@@ -11,6 +11,7 @@
   "marketplace": "市场",
   "advanced": "高级",
   "settings": "设置",
+  "appearance": "外观",
   "settingsMenu": "设置菜单",
   "sidebarCollapse": "收起侧边栏",
   "sidebarExpand": "展开侧边栏",
@@ -45,6 +46,7 @@
   "themeCool": "雾蓝",
   "themeDawn": "晨砂",
   "themeGraphite": "石墨",
+  "themeNight": "暗夜",
   "themeProbe": "探针",
   "isRequired": "必填",
   "duplicate": "重复",

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

@@ -1,8 +1,12 @@
 {
   "docBrowserTitle": "内嵌浏览器",
   "docBrowserSearchPlaceholder": "搜索，也可以输入文档地址直接打开",
+  "docBrowserAddressLabel": "地址",
+  "docBrowserAddressPlaceholder": "输入地址，例如 http://localhost:5173",
   "docBrowserUrlPlaceholder": "输入文档路径，如 /guide/channels",
   "docBrowserOpenExternal": "文档中心打开",
+  "docBrowserOpenInBrowser": "系统浏览器打开",
+  "docBrowserRefresh": "刷新",
   "docBrowserFloatMode": "悬浮窗口",
   "docBrowserDockMode": "固定到侧栏",
   "docBrowserClose": "关闭",
@@ -17,6 +21,13 @@
   "sideDockUnpinCurrent": "从快捷栏移除",
   "sideDockBuiltInDocked": "内置快捷入口",
   "sideDockUnpinItem": "移除快捷入口",
+  "sideDockGitHubProject": "GitHub 项目",
+  "sideDockHide": "隐藏快捷栏",
+  "sideDockHideConfirmTitle": "隐藏快捷栏？",
+  "sideDockHideConfirmDescription": "隐藏后可在「设置 > 外观」中重新打开。",
+  "sideDockHideConfirmAction": "隐藏",
+  "sideDockVisibilityTitle": "显示快捷栏",
+  "sideDockVisibilityDescription": "在工作区右侧显示快捷入口栏。",
   "appsTitle": "应用",
   "panelAppsTitle": "面板应用",
   "panelAppsLoading": "加载面板应用中...",

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

@@ -58,6 +58,11 @@
   "marketplaceDetailPanelEmpty": "点击左侧任意插件/技能，在这里查看详情。",
   "marketplaceDetailSummary": "摘要",
   "marketplaceDetailDescription": "描述",
+  "marketplaceDetailMetadata": "元数据",
+  "marketplaceDetailContent": "内容",
+  "marketplaceDetailSource": "来源",
+  "marketplaceDetailUnavailableTitle": "详情暂不可用",
+  "marketplaceDetailUnavailableDescription": "这个右侧详情标签页缺少当前会话中的内容数据，请从市场列表重新打开一次。",
   "marketplaceOpenInDocBrowserTab": "新标签打开",
   "marketplaceMcpInstallDialogTitle": "安装 MCP Server",
   "marketplaceMcpServerName": "Server 名称",

package/src/shared/lib/session-project/__tests__/workspace-file-breadcrumb.test.ts

@@ -14,24 +14,32 @@ describe("buildWorkspaceFileBreadcrumb", () => {
         key: "workspace:project-alpha",
         label: "project-alpha",
         kind: "workspace",
+        path: "/Users/demo/project-alpha",
+        browsePath: "/Users/demo/project-alpha",
         isCurrent: false,
       },
       {
         key: "0:src",
         label: "src",
         kind: "directory",
+        path: "/Users/demo/project-alpha/src",
+        browsePath: "/Users/demo/project-alpha/src",
         isCurrent: false,
       },
       {
         key: "1:chat",
         label: "chat",
         kind: "directory",
+        path: "/Users/demo/project-alpha/src/chat",
+        browsePath: "/Users/demo/project-alpha/src/chat",
         isCurrent: false,
       },
       {
         key: "2:example.tsx",
         label: "example.tsx",
         kind: "file",
+        path: "/Users/demo/project-alpha/src/chat/example.tsx",
+        browsePath: "/Users/demo/project-alpha/src/chat",
         isCurrent: true,
       },
     ]);
@@ -49,18 +57,24 @@ describe("buildWorkspaceFileBreadcrumb", () => {
         key: "root:/",
         label: "/",
         kind: "root",
+        path: "/",
+        browsePath: "/",
         isCurrent: false,
       },
       {
         key: "0:tmp",
         label: "tmp",
         kind: "directory",
+        path: "/tmp",
+        browsePath: "/tmp",
         isCurrent: false,
       },
       {
         key: "1:example.ts",
         label: "example.ts",
         kind: "file",
+        path: "/tmp/example.ts",
+        browsePath: "/tmp",
         isCurrent: true,
       },
     ]);

package/src/shared/lib/session-project/index.ts

@@ -1,2 +1,2 @@
 export * from './session-project.utils';
-export * from './workspace-file-breadcrumb';
+export * from './workspace-file-breadcrumb.utils';

package/src/shared/lib/session-project/{workspace-file-breadcrumb.ts → workspace-file-breadcrumb.utils.ts}

@@ -4,6 +4,8 @@ export type WorkspaceFileBreadcrumbSegmentViewModel = {
   key: string;
   label: string;
   kind: "workspace" | "root" | "directory" | "file";
+  path: string;
+  browsePath: string | null;
   isCurrent: boolean;
 };
 
@@ -28,6 +30,41 @@ function normalizeComparablePath(value: string): string {
     : trimmed;
 }
 
+function joinPathSegments(basePath: string | null, segments: string[]): string {
+  if (!basePath) {
+    return segments.join("/");
+  }
+
+  const normalizedBase = trimPathSeparators(basePath.trim().replace(/\\/g, "/"));
+  if (segments.length === 0) {
+    return normalizedBase;
+  }
+
+  if (normalizedBase === "/") {
+    return `/${segments.join("/")}`;
+  }
+
+  return `${normalizedBase}/${segments.join("/")}`;
+}
+
+function readParentPath(path: string): string | null {
+  const normalizedPath = trimPathSeparators(path.trim().replace(/\\/g, "/"));
+  if (!normalizedPath || normalizedPath === "/" || /^[A-Za-z]:[\\/]?$/.test(normalizedPath)) {
+    return null;
+  }
+
+  const separatorIndex = normalizedPath.lastIndexOf("/");
+  if (separatorIndex < 0) {
+    return null;
+  }
+  if (separatorIndex === 0) {
+    return "/";
+  }
+
+  const parentPath = normalizedPath.slice(0, separatorIndex);
+  return /^[A-Za-z]:$/.test(parentPath) ? `${parentPath}/` : parentPath;
+}
+
 function readDisplaySegments(value: string): {
   prefix: string | null;
   segments: string[];
@@ -93,16 +130,23 @@ function readRelativeSegments(params: {
 
 function buildSegmentsFromLabels(params: {
   labels: string[];
+  basePath?: string | null;
   leading?: WorkspaceFileBreadcrumbSegmentViewModel | null;
 }): WorkspaceFileBreadcrumbSegmentViewModel[] {
-  const { labels, leading = null } = params;
+  const { basePath = null, labels, leading = null } = params;
   const items = labels.map<WorkspaceFileBreadcrumbSegmentViewModel>(
-    (label, index) => ({
-      key: `${index}:${label}`,
-      label,
-      kind: index === labels.length - 1 ? "file" : "directory",
-      isCurrent: index === labels.length - 1,
-    }),
+    (label, index) => {
+      const kind = index === labels.length - 1 ? "file" : "directory";
+      const path = joinPathSegments(basePath, labels.slice(0, index + 1));
+      return {
+        key: `${index}:${label}`,
+        label,
+        kind,
+        path,
+        browsePath: kind === "file" ? readParentPath(path) : path,
+        isCurrent: index === labels.length - 1,
+      };
+    },
   );
 
   return leading ? [leading, ...items] : items;
@@ -141,27 +185,35 @@ export function buildWorkspaceFileBreadcrumb(params: {
   let segments: WorkspaceFileBreadcrumbSegmentViewModel[];
 
   if (sessionProjectRoot?.trim() && relativeSegments) {
+    const workspacePath = sessionProjectRoot.trim();
     const workspaceLabel =
-      getSessionProjectName(sessionProjectRoot) ?? sessionProjectRoot.trim();
+      getSessionProjectName(workspacePath) ?? workspacePath;
 
     segments = buildSegmentsFromLabels({
       labels: relativeSegments,
+      basePath: workspacePath,
       leading: {
         key: `workspace:${workspaceLabel}`,
         label: workspaceLabel,
         kind: "workspace",
+        path: workspacePath,
+        browsePath: workspacePath,
         isCurrent: relativeSegments.length === 0,
       },
     });
   } else {
     const { prefix, segments: labels } = readDisplaySegments(fullPath);
+    const rootPath = prefix === "/" ? "/" : prefix ? `${prefix}/` : null;
     segments = buildSegmentsFromLabels({
       labels,
+      basePath: rootPath,
       leading: prefix
         ? {
             key: `root:${prefix}`,
             label: prefix,
             kind: "root",
+            path: rootPath ?? prefix,
+            browsePath: rootPath ?? prefix,
             isCurrent: labels.length === 0,
           }
         : null,
@@ -174,6 +226,8 @@ export function buildWorkspaceFileBreadcrumb(params: {
         key: "file:unknown",
         label: fullPath || "file",
         kind: "file",
+        path: fullPath,
+        browsePath: readParentPath(fullPath),
         isCurrent: true,
       },
     ];

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

@@ -1,19 +1,44 @@
-export type UiTheme = 'natural' | 'minimal' | 'warm' | 'cool' | 'dawn' | 'graphite' | 'probe';
+export type UiTheme =
+  | 'natural'
+  | 'minimal'
+  | 'warm'
+  | 'cool'
+  | 'dawn'
+  | 'graphite'
+  | 'night'
+  | 'probe';
+export type UiThemeAppearance = 'light' | 'dark';
+
+type UiThemeDefinition = {
+  value: UiTheme;
+  labelKey: string;
+  appearance: UiThemeAppearance;
+};
 
 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: 'dawn', labelKey: 'themeDawn' },
-  { value: 'graphite', labelKey: 'themeGraphite' },
-  { value: 'probe', labelKey: 'themeProbe' }
+
+const THEME_DEFINITIONS: readonly UiThemeDefinition[] = [
+  { value: 'night', labelKey: 'themeNight', appearance: 'dark' },
+  { value: 'natural', labelKey: 'themeNatural', appearance: 'light' },
+  { value: 'minimal', labelKey: 'themeMinimal', appearance: 'light' },
+  { value: 'warm', labelKey: 'themeWarm', appearance: 'light' },
+  { value: 'cool', labelKey: 'themeCool', appearance: 'light' },
+  { value: 'dawn', labelKey: 'themeDawn', appearance: 'light' },
+  { value: 'graphite', labelKey: 'themeGraphite', appearance: 'light' },
+  { value: 'probe', labelKey: 'themeProbe', appearance: 'light' },
 ];
 
+const THEME_VALUES: readonly UiTheme[] = THEME_DEFINITIONS.map(
+  ({ value }) => value,
+);
+
+export const THEME_OPTIONS: Array<{ value: UiTheme; labelKey: string }> =
+  THEME_DEFINITIONS.map(({ value, labelKey }) => ({
+    value,
+    labelKey,
+  }));
+
 export function normalizeTheme(value: unknown): UiTheme | null {
   if (typeof value !== 'string') {
     return null;
@@ -26,6 +51,13 @@ export function normalizeTheme(value: unknown): UiTheme | null {
   return value === 'leaf' ? 'warm' : null;
 }
 
+export function getThemeAppearance(theme: UiTheme): UiThemeAppearance {
+  return (
+    THEME_DEFINITIONS.find((definition) => definition.value === theme)
+      ?.appearance ?? 'light'
+  );
+}
+
 class UiThemeOwner {
   private activeTheme: UiTheme = DEFAULT_THEME;
   private initialized = false;
@@ -58,7 +90,8 @@ class UiThemeOwner {
     return this.activeTheme;
   };
 
-  getTheme = (): UiTheme => this.initialized ? this.activeTheme : this.initializeTheme();
+  getTheme = (): UiTheme =>
+    this.initialized ? this.activeTheme : this.initializeTheme();
 
   setTheme = (theme: UiTheme): void => {
     this.initializeTheme();
@@ -83,7 +116,10 @@ class UiThemeOwner {
     if (typeof document === 'undefined') {
       return;
     }
+    const appearance = getThemeAppearance(theme);
     document.documentElement.setAttribute('data-theme', theme);
+    document.documentElement.setAttribute('data-theme-appearance', appearance);
+    document.documentElement.style.colorScheme = appearance;
   };
 
   private saveTheme = (theme: UiTheme): void => {
@@ -117,6 +153,8 @@ export function setTheme(theme: UiTheme): void {
   uiThemeOwner.setTheme(theme);
 }
 
-export function subscribeThemeChange(listener: (theme: UiTheme) => void): () => void {
+export function subscribeThemeChange(
+  listener: (theme: UiTheme) => void,
+): () => void {
   return uiThemeOwner.subscribeThemeChange(listener);
 }