@nextclaw/ui 0.12.23 → 0.12.25

package/src/features/system-status/utils/system-status.utils.ts

@@ -13,6 +13,21 @@ import type {
   SystemStatusView,
 } from '@/features/system-status/types/system-status.types';
 
+const RUNTIME_CONTROL_MESSAGE_LABELS: Record<string, string> = {
+  'Use this page to manage the local NextClaw service. Closing the browser does not stop the service.': 'runtimeControlManagedLocalMessage',
+  'This page is served by the running local service. Closing the browser does not stop it.': 'runtimeControlManagedLocalHint',
+  'This page is served by the running local service.': 'runtimeControlManagedLocalHintShort',
+  'This page is already hosted by the running local service.': 'runtimeControlStartUnavailableHosted',
+  'App restart is only available in the desktop shell.': 'runtimeControlRestartAppDesktopOnly',
+  'The local service is not running.': 'runtimeControlServiceNotRunning',
+  'The local service is already stopped.': 'runtimeControlServiceAlreadyStopped',
+  'Managed service started.': 'runtimeControlManagedServiceStarted',
+  'Managed service start scheduled.': 'runtimeControlManagedServiceStartScheduled',
+  'Restart scheduled. This page may disconnect for a few seconds.': 'runtimeControlRestartScheduled',
+  'Stop scheduled. This page will disconnect shortly.': 'runtimeControlStopScheduled',
+  'runtime healthy': 'runtimeControlHealthy'
+};
+
 function resolveSystemStatusPhase(state: SystemStatusState): SystemStatusPhase {
   return state.activeSystemAction ? 'service-transitioning' : state.lifecyclePhase;
 }
@@ -70,6 +85,14 @@ function resolveActionServiceState(
   return null;
 }
 
+export function localizeRuntimeControlMessage(message: string | null | undefined): string | null {
+  if (!message) {
+    return null;
+  }
+  const labelKey = RUNTIME_CONTROL_MESSAGE_LABELS[message.trim()];
+  return labelKey ? t(labelKey) : message;
+}
+
 export function buildActiveSystemActionState(params: {
   action: RuntimeControlAction;
   message: string | null;
@@ -113,8 +136,8 @@ export function toRuntimeStatusBadgeView(
       tone: 'attention',
       title: t('runtimeControlTitle'),
       description:
-        state.activeSystemAction.message ||
-        state.runtimeControlView.message ||
+        localizeRuntimeControlMessage(state.activeSystemAction.message) ||
+        localizeRuntimeControlMessage(state.runtimeControlView.message) ||
         t('runtimeControlDescription'),
       reasonLines: [],
       actionLabel: null,
@@ -161,9 +184,9 @@ export function toRuntimeControlPanelView(
   const visibleServiceState =
     action?.serviceState ?? controlView?.serviceState ?? 'unknown';
   const visibleMessage =
-    action?.message ||
-    state.lastSystemActionError ||
-    controlView?.message ||
+    localizeRuntimeControlMessage(action?.message) ||
+    localizeRuntimeControlMessage(state.lastSystemActionError) ||
+    localizeRuntimeControlMessage(controlView?.message) ||
     t('runtimeControlDescription');
 
   return {
@@ -175,6 +198,8 @@ export function toRuntimeControlPanelView(
     busy: Boolean(action),
     pendingRestart: controlView?.pendingRestart ?? null,
     errorMessage:
-      state.lastSystemActionError || state.runtimeControlError || null,
+      localizeRuntimeControlMessage(state.lastSystemActionError) ||
+      localizeRuntimeControlMessage(state.runtimeControlError) ||
+      null,
   };
 }

package/src/index.css

@@ -38,6 +38,14 @@
 
 @layer utilities {
 
+  .desktop-window-drag {
+    -webkit-app-region: drag;
+  }
+
+  .desktop-window-no-drag {
+    -webkit-app-region: no-drag;
+  }
+
   /* ========================================
      SCROLLBAR
      ======================================== */

package/src/platforms/desktop/components/desktop-app-shell.test.tsx

@@ -0,0 +1,67 @@
+import { render, screen } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { DesktopAppShell } from "@/platforms/desktop/components/desktop-app-shell";
+
+vi.mock("@/app/components/layout/sidebar", () => ({
+  Sidebar: () => <aside data-testid="settings-sidebar">Settings Sidebar</aside>,
+}));
+
+function setDesktopPlatform(platform: string | null): void {
+  window.nextclawDesktop = platform
+    ? ({
+        platform,
+      } as typeof window.nextclawDesktop)
+    : undefined;
+}
+
+function renderDesktopShell(platform: string | null) {
+  setDesktopPlatform(platform);
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <DesktopAppShell
+        pathname="/chat"
+        isDocBrowserOpen={false}
+        docBrowserMode="floating"
+      >
+        <div data-testid="app-content">App Content</div>
+      </DesktopAppShell>
+    </QueryClientProvider>,
+  );
+}
+
+describe("DesktopAppShell", () => {
+  afterEach(() => {
+    setDesktopPlatform(null);
+  });
+
+  it("renders the reserved Windows chrome row above app content", () => {
+    renderDesktopShell("win32");
+
+    const chrome = screen.getByTestId("desktop-window-chrome");
+    const sidebarChrome = screen.getByTestId("desktop-window-chrome-sidebar");
+    const mainChrome = screen.getByTestId("desktop-window-chrome-main");
+
+    expect(chrome).toBeTruthy();
+    expect(sidebarChrome.className).toContain("w-[var(--desktop-sidebar-width)]");
+    expect(sidebarChrome.className).not.toContain("border-b");
+    expect(mainChrome.className).toContain("border-b");
+    expect(mainChrome.className).toContain("pr-[var(--desktop-caption-safe-right)]");
+    expect(screen.getByTestId("app-content")).toBeTruthy();
+  });
+
+  it("keeps non-Windows desktop hosts on the existing shell shape", () => {
+    renderDesktopShell("darwin");
+
+    expect(screen.queryByTestId("desktop-window-chrome")).toBeNull();
+    expect(screen.getByTestId("app-content")).toBeTruthy();
+  });
+});

package/src/platforms/desktop/components/desktop-app-shell.tsx

@@ -1,6 +1,10 @@
 import { lazy, Suspense } from "react";
+import type { CSSProperties } from "react";
 import { isMainWorkspaceRoute } from "@/app/configs/app-navigation.config";
 import { Sidebar } from "@/app/components/layout/sidebar";
+import { DesktopWindowChrome } from "@/platforms/desktop/components/desktop-window-chrome";
+import { isWindowsDesktopHost } from "@/platforms/desktop/utils/desktop-host.utils";
+import { cn } from "@/shared/lib/utils";
 
 const DocBrowser = lazy(async () => ({
   default: (await import("@/shared/components/doc-browser/doc-browser")).DocBrowser,
@@ -13,6 +17,20 @@ type DesktopAppShellProps = {
   children: React.ReactNode;
 };
 
+type DesktopShellStyle = CSSProperties & {
+  "--desktop-titlebar-height"?: string;
+  "--desktop-caption-safe-right"?: string;
+  "--desktop-sidebar-width"?: string;
+};
+
+function createWindowsDesktopShellStyle(isMainRoute: boolean): DesktopShellStyle {
+  return {
+    "--desktop-titlebar-height": "34px",
+    "--desktop-caption-safe-right": "140px",
+    "--desktop-sidebar-width": isMainRoute ? "280px" : "240px",
+  };
+}
+
 export function DesktopAppShell({
   pathname,
   isDocBrowserOpen,
@@ -20,27 +38,37 @@ export function DesktopAppShell({
   children,
 }: DesktopAppShellProps) {
   const isMainRoute = isMainWorkspaceRoute(pathname);
+  const shouldUseWindowsChrome = isWindowsDesktopHost();
 
   return (
-    <div className="h-screen flex bg-background font-sans text-foreground">
-      {!isMainRoute && <Sidebar mode="settings" />}
-      <div className="flex-1 flex min-w-0 overflow-hidden relative">
-        <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
-          {isMainRoute ? (
-            <div className="flex-1 h-full overflow-hidden">{children}</div>
-          ) : (
-            <main className="flex-1 overflow-auto p-8 pb-16 custom-scrollbar">
-              <div className="mx-auto h-full max-w-6xl animate-fade-in">
-                {children}
-              </div>
-            </main>
-          )}
+    <div
+      className={cn(
+        "h-screen flex flex-col overflow-hidden bg-background font-sans text-foreground",
+        shouldUseWindowsChrome ? "rounded-[10px]" : null,
+      )}
+      style={shouldUseWindowsChrome ? createWindowsDesktopShellStyle(isMainRoute) : undefined}
+    >
+      {shouldUseWindowsChrome ? <DesktopWindowChrome /> : null}
+      <div className="flex min-h-0 flex-1 overflow-hidden">
+        {!isMainRoute && <Sidebar mode="settings" />}
+        <div className="flex-1 flex min-w-0 overflow-hidden relative">
+          <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
+            {isMainRoute ? (
+              <div className="flex-1 h-full overflow-hidden">{children}</div>
+            ) : (
+              <main className="flex-1 overflow-auto p-8 pb-16 custom-scrollbar">
+                <div className="mx-auto h-full max-w-6xl animate-fade-in">
+                  {children}
+                </div>
+              </main>
+            )}
+          </div>
+          {isDocBrowserOpen && docBrowserMode === "docked" ? (
+            <Suspense fallback={null}>
+              <DocBrowser />
+            </Suspense>
+          ) : null}
         </div>
-        {isDocBrowserOpen && docBrowserMode === "docked" ? (
-          <Suspense fallback={null}>
-            <DocBrowser />
-          </Suspense>
-        ) : null}
       </div>
       {isDocBrowserOpen && docBrowserMode === "floating" ? (
         <Suspense fallback={null}>

package/src/platforms/desktop/components/desktop-window-chrome.tsx

@@ -0,0 +1,30 @@
+import { BrandHeader } from "@/shared/components/common/brand-header";
+
+export function DesktopWindowChrome() {
+  return (
+    <header
+      className="flex h-[var(--desktop-titlebar-height)] shrink-0 bg-background"
+      data-testid="desktop-window-chrome"
+    >
+      <div
+        className="desktop-window-drag flex h-full w-[var(--desktop-sidebar-width)] shrink-0 items-center bg-secondary pl-4 pr-3 text-secondary-foreground"
+        data-testid="desktop-window-chrome-sidebar"
+      >
+        <div className="desktop-window-no-drag flex min-w-0 shrink-0 items-center">
+          <BrandHeader
+            className="flex min-w-0 items-center gap-2.5"
+            density="chrome"
+          />
+        </div>
+        <div className="min-w-0 flex-1 self-stretch" aria-hidden="true" />
+      </div>
+      <div
+        className="desktop-window-drag flex min-w-0 flex-1 items-center border-b border-[#ebe7dc]/80 bg-secondary pr-[var(--desktop-caption-safe-right)]"
+        aria-hidden="true"
+        data-testid="desktop-window-chrome-main"
+      >
+        <div className="min-w-0 flex-1 self-stretch" />
+      </div>
+    </header>
+  );
+}

package/src/platforms/desktop/index.ts

@@ -7,8 +7,14 @@ export {
   DesktopUpdateManager,
 } from './managers/desktop-update.manager';
 export { DesktopAppShell } from './components/desktop-app-shell';
+export { DesktopWindowChrome } from './components/desktop-window-chrome';
 export { useDesktopPresenceStore } from './stores/desktop-presence.store';
 export { useDesktopUpdateStore } from './stores/desktop-update.store';
+export {
+  getDesktopHostPlatform,
+  isMacDesktopHost,
+  isWindowsDesktopHost,
+} from './utils/desktop-host.utils';
 export type {
   DesktopPresencePreferences,
   DesktopPresenceSnapshot,

package/src/platforms/desktop/types/desktop-update.types.ts

@@ -48,6 +48,8 @@ export type DesktopPresenceSnapshot = DesktopPresencePreferences & {
 
 export type DesktopUiLanguagePreference = 'en' | 'zh';
 
+export type DesktopShellTheme = 'warm' | 'cool';
+
 export type NextClawDesktopBridge = {
   platform: string;
   version: string;
@@ -63,5 +65,6 @@ export type NextClawDesktopBridge = {
   getPresenceState: () => Promise<DesktopPresenceSnapshot>;
   updatePresencePreferences: (preferences: Partial<DesktopPresencePreferences>) => Promise<DesktopPresenceSnapshot>;
   setLocalePreference?: (language: DesktopUiLanguagePreference | null) => Promise<DesktopUiLanguagePreference | null>;
+  setShellTheme?: (theme: DesktopShellTheme) => Promise<void>;
   onUpdateStateChanged: (listener: (snapshot: DesktopUpdateSnapshot) => void) => () => void;
 };

package/src/platforms/desktop/utils/desktop-host.utils.ts

@@ -0,0 +1,56 @@
+export type DesktopHostPlatform = string | null;
+
+const devPlatformOverrideParam = "nextclawDesktopPlatform";
+const devPlatformOverrideStorageKey = "nextclaw.desktopPlatformOverride";
+
+export function getDesktopHostPlatform(): DesktopHostPlatform {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  return getDevDesktopHostPlatformOverride() ?? window.nextclawDesktop?.platform ?? null;
+}
+
+export function isMacDesktopHost(): boolean {
+  return getDesktopHostPlatform() === "darwin";
+}
+
+export function isWindowsDesktopHost(): boolean {
+  return getDesktopHostPlatform() === "win32";
+}
+
+function getDevDesktopHostPlatformOverride(): DesktopHostPlatform {
+  if (!import.meta.env.DEV) {
+    return null;
+  }
+  const platform = new URLSearchParams(window.location.search).get(devPlatformOverrideParam);
+  if (platform === "win32" || platform === "darwin") {
+    writeDevDesktopHostPlatformOverride(platform);
+    return platform;
+  }
+  if (platform === "clear") {
+    writeDevDesktopHostPlatformOverride(null);
+    return null;
+  }
+  return readDevDesktopHostPlatformOverride();
+}
+
+function readDevDesktopHostPlatformOverride(): DesktopHostPlatform {
+  try {
+    const platform = window.sessionStorage.getItem(devPlatformOverrideStorageKey);
+    return platform === "win32" || platform === "darwin" ? platform : null;
+  } catch {
+    return null;
+  }
+}
+
+function writeDevDesktopHostPlatformOverride(platform: DesktopHostPlatform): void {
+  try {
+    if (platform) {
+      window.sessionStorage.setItem(devPlatformOverrideStorageKey, platform);
+      return;
+    }
+    window.sessionStorage.removeItem(devPlatformOverrideStorageKey);
+  } catch {
+    // Storage can be unavailable in restricted browser contexts; URL-only override still works.
+  }
+}

package/src/shared/components/common/brand-header.tsx

@@ -4,28 +4,44 @@ import { useAppMeta } from '@/shared/hooks/use-config';
 import { type ReactNode, useState } from 'react';
 import { RuntimeStatusEntry } from '@/app/components/layout/runtime-status-entry';
 import { t } from '@/shared/lib/i18n';
+import { cn } from '@/shared/lib/utils';
 
 type BrandHeaderProps = {
   className?: string;
+  density?: 'sidebar' | 'chrome';
   suffix?: ReactNode;
 };
 
-export function BrandHeader({ className, suffix }: BrandHeaderProps) {
+export function BrandHeader({ className, density = 'sidebar', suffix }: BrandHeaderProps) {
   const { data } = useAppMeta();
   const productName = data?.name ?? 'NextClaw';
   const productVersion = data?.productVersion?.trim();
   const versionLabel = productVersion ? `v${productVersion}` : null;
   const resolvedSuffix = suffix ?? <RuntimeStatusEntry />;
+  const shouldReserveMacWindowControls = typeof window !== 'undefined' && window.nextclawDesktop?.platform === 'darwin';
+  const isChromeDensity = density === 'chrome';
 
   return (
-    <div className={className ?? 'flex items-center gap-2.5'}>
-      <div className="h-7 w-7 rounded-lg overflow-hidden flex items-center justify-center">
+    <div className={cn(className ?? 'flex min-w-0 items-center gap-2', shouldReserveMacWindowControls && 'pl-[58px]')}>
+      <div
+        className={cn(
+          'flex shrink-0 items-center justify-center overflow-hidden',
+        isChromeDensity ? 'h-6 w-6 rounded-md' : 'h-6 w-6 rounded-md',
+        )}
+      >
         <img src="/logo.svg" alt={productName} className="h-full w-full object-contain" />
       </div>
-      <div className="flex min-w-0 items-baseline gap-2">
-        <div className="flex min-w-0 flex-1 items-baseline gap-2">
-          <span className="shrink-0 text-[15px] font-semibold tracking-[-0.01em] text-gray-800">{productName}</span>
-          {versionLabel ? <BrandVersionLabel versionLabel={versionLabel} /> : null}
+      <div className="flex min-w-0 items-center gap-2">
+        <div className="flex min-w-0 flex-1 items-baseline gap-1.5">
+          <span
+            className={cn(
+              'shrink-0 font-semibold text-gray-800',
+              isChromeDensity ? 'text-[15px]' : 'text-[14px]',
+            )}
+          >
+            {productName}
+          </span>
+          {versionLabel ? <BrandVersionLabel versionLabel={versionLabel} density={density} /> : null}
         </div>
         <RuntimeUpdateInlineStatus />
         {resolvedSuffix ? <span className="inline-flex items-center shrink-0">{resolvedSuffix}</span> : null}
@@ -34,8 +50,15 @@ export function BrandHeader({ className, suffix }: BrandHeaderProps) {
   );
 }
 
-function BrandVersionLabel({ versionLabel }: { versionLabel: string }) {
+function BrandVersionLabel({
+  versionLabel,
+  density,
+}: {
+  versionLabel: string;
+  density: BrandHeaderProps['density'];
+}) {
   const [isTooltipOpen, setIsTooltipOpen] = useState(false);
+  const isChromeDensity = density === 'chrome';
 
   return (
     <span
@@ -48,7 +71,10 @@ function BrandVersionLabel({ versionLabel }: { versionLabel: string }) {
       <span
         tabIndex={0}
         aria-label={versionLabel}
-        className="block min-w-0 truncate text-[13px] font-medium text-gray-500 outline-none"
+        className={cn(
+          'block min-w-0 truncate font-medium text-gray-500 outline-none',
+          isChromeDensity ? 'text-[12px]' : 'text-[12px]',
+        )}
       >
         {versionLabel}
       </span>
@@ -100,13 +126,7 @@ function RuntimeUpdateInlineBadge({ snapshot }: { snapshot: UpdateSnapshot }) {
   if (snapshot.status === 'blocked' || snapshot.status === 'failed') {
     return <RuntimeUpdateIssueIcon snapshot={snapshot} />;
   }
-  const label = snapshot.status === 'downloading'
-    ? resolveInlineDownloadLabel(snapshot)
-    : snapshot.status === 'downloaded'
-      ? t('desktopUpdatesInlineReady')
-      : snapshot.status === 'update-available'
-        ? t('desktopUpdatesInlineDownload')
-        : null;
+  const label = snapshot.status === 'downloading' ? resolveInlineDownloadLabel(snapshot) : null;
   if (!label) {
     return null;
   }

package/src/shared/components/config/provider-form-support.ts

@@ -104,31 +104,11 @@ function modelListsEqual(left: string[], right: string[]): boolean {
   return left.every((item, index) => item === right[index]);
 }
 
-function mergeModelLists(base: string[], extra: string[]): string[] {
-  const merged = [...base];
-  for (const item of extra) {
-    if (!merged.includes(item)) {
-      merged.push(item);
-    }
-  }
-  return merged;
-}
-
-function resolveEditableModels(defaultModels: string[], savedModels: string[]): string[] {
-  if (savedModels.length === 0) {
-    return defaultModels;
-  }
-  const looksLikeLegacyCustomList = savedModels.every((model) => !defaultModels.includes(model));
-  if (looksLikeLegacyCustomList) {
-    return mergeModelLists(defaultModels, savedModels);
-  }
+function resolveEditableModels(_defaultModels: string[], savedModels: string[]): string[] {
   return savedModels;
 }
 
-function serializeModelsForSave(models: string[], defaultModels: string[]): string[] {
-  if (modelListsEqual(models, defaultModels)) {
-    return [];
-  }
+function serializeModelsForSave(models: string[], _defaultModels: string[]): string[] {
   return models;
 }
 

package/src/shared/components/cron-config.tsx

@@ -6,65 +6,19 @@ import { Button } from '@/shared/components/ui/button';
 import { Input } from '@/shared/components/ui/input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/shared/components/ui/select';
 import { Card, CardContent } from '@/shared/components/ui/card';
+import {
+  describeCronDelivery,
+  describeCronSchedule,
+  describeCronSession,
+  formatCronDate,
+} from '@/shared/lib/cron';
 import { cn } from '@/shared/lib/utils';
-import { formatDateTime, t } from '@/shared/lib/i18n';
+import { t } from '@/shared/lib/i18n';
 import { PageLayout, PageHeader } from '@/app/components/layout/page-layout';
 import { AlarmClock, RefreshCw, Trash2, Play, Power } from 'lucide-react';
 
 type StatusFilter = 'all' | 'enabled' | 'disabled';
 
-function formatDate(value?: string | null): string {
-  return formatDateTime(value ?? undefined);
-}
-
-function formatDateFromMs(value?: number | null): string {
-  if (typeof value !== 'number' || !Number.isFinite(value)) {
-    return '-';
-  }
-  return formatDateTime(new Date(value));
-}
-
-function formatEveryDuration(ms?: number | null): string {
-  if (typeof ms !== 'number' || !Number.isFinite(ms)) {
-    return '-';
-  }
-  const seconds = Math.round(ms / 1000);
-  if (seconds < 60) return `${seconds}s`;
-  const minutes = Math.round(seconds / 60);
-  if (minutes < 60) return `${minutes}m`;
-  const hours = Math.round(minutes / 60);
-  if (hours < 24) return `${hours}h`;
-  const days = Math.round(hours / 24);
-  return `${days}d`;
-}
-
-function describeSchedule(job: CronJobView): string {
-  const { schedule } = job;
-  if (schedule.kind === 'cron') {
-    return schedule.expr ? `cron ${schedule.expr}` : 'cron';
-  }
-  if (schedule.kind === 'every') {
-    return `every ${formatEveryDuration(schedule.everyMs)}`;
-  }
-  if (schedule.kind === 'at') {
-    return `at ${formatDateFromMs(schedule.atMs)}`;
-  }
-  return '-';
-}
-
-function describeDelivery(job: CronJobView): string {
-  if (!job.payload.deliver) {
-    return '-';
-  }
-  const channel = job.payload.channel ?? '-';
-  const target = job.payload.to ?? '-';
-  return `${channel}:${target}`;
-}
-
-function describeSession(job: CronJobView): string {
-  return job.payload.sessionId?.trim() || `cron:${job.id}`;
-}
-
 function matchQuery(job: CronJobView, query: string): boolean {
   const q = query.trim().toLowerCase();
   if (!q) return true;
@@ -107,14 +61,14 @@ function CronJobCard(props: {
                 <span className="rounded-full bg-amber-50 px-2 py-0.5 text-[10px] font-semibold text-amber-700">{t('cronOneShot')}</span>
               ) : null}
             </div>
-            <div className="mt-2 text-xs text-gray-500">{t('cronScheduleLabel')}: {describeSchedule(job)}</div>
+            <div className="mt-2 text-xs text-gray-500">{t('cronScheduleLabel')}: {describeCronSchedule(job)}</div>
             <div className="mt-2 whitespace-pre-wrap break-words text-sm text-gray-700">{job.payload.message}</div>
-            <div className="mt-2 text-xs text-gray-500">{t('cronSessionLabel')}: {describeSession(job)}</div>
-            <div className="mt-2 text-xs text-gray-500">{t('cronDeliverTo')}: {describeDelivery(job)}</div>
+            <div className="mt-2 text-xs text-gray-500">{t('cronSessionLabel')}: {describeCronSession(job)}</div>
+            <div className="mt-2 text-xs text-gray-500">{t('cronDeliverTo')}: {describeCronDelivery(job)}</div>
           </div>
           <div className="min-w-[220px] space-y-2 text-xs text-gray-500">
-            <div><span className="font-medium text-gray-700">{t('cronNextRun')}:</span> {formatDate(job.state.nextRunAt)}</div>
-            <div><span className="font-medium text-gray-700">{t('cronLastRun')}:</span> {formatDate(job.state.lastRunAt)}</div>
+            <div><span className="font-medium text-gray-700">{t('cronNextRun')}:</span> {formatCronDate(job.state.nextRunAt)}</div>
+            <div><span className="font-medium text-gray-700">{t('cronLastRun')}:</span> {formatCronDate(job.state.lastRunAt)}</div>
             <div><span className="font-medium text-gray-700">{t('cronLastStatus')}:</span> {job.state.lastStatus ?? '-'}</div>
             {job.state.lastError ? <div className="break-words text-[11px] text-red-500">{job.state.lastError}</div> : null}
           </div>

package/src/shared/components/doc-browser/doc-browser.tsx

@@ -320,7 +320,7 @@ export function DocBrowser({ displayMode = 'desktop' }: DocBrowserProps) {
         </div>
       </div>
 
-      <div className="flex items-center gap-1.5 px-2.5 py-2 bg-white border-b border-gray-100 overflow-x-auto custom-scrollbar">
+      <div className="flex items-center gap-1.5 px-2.5 py-2 bg-background border-b border-[#f1e7d4] overflow-x-auto custom-scrollbar">
         {tabs.map((tab) => {
           const isActive = tab.id === activeTabId;
           return (
@@ -329,8 +329,8 @@ export function DocBrowser({ displayMode = 'desktop' }: DocBrowserProps) {
               className={cn(
                 'inline-flex items-center gap-1 h-7 px-1.5 rounded-lg text-xs border max-w-[220px] shrink-0 transition-colors',
                 isActive
-                  ? 'bg-blue-50 border-blue-300 text-blue-700'
-                  : 'bg-gray-50 border-gray-200 text-gray-600 hover:bg-gray-100'
+                  ? 'bg-amber-50/80 border-amber-200 text-amber-900 shadow-[0_1px_2px_rgba(30,20,10,0.04)]'
+                  : 'bg-[#f9f8f5] border-[#eee3d1] text-[#78644d] hover:bg-[#fff7ea] hover:text-[#2f2212]'
               )}
             >
               <button
@@ -357,7 +357,7 @@ export function DocBrowser({ displayMode = 'desktop' }: DocBrowserProps) {
         })}
         <button
           onClick={() => openNewTab(undefined, { kind: 'docs', title: 'Docs' })}
-          className="inline-flex items-center justify-center w-7 h-7 rounded-lg border border-gray-200 bg-white text-gray-600 hover:bg-gray-100 shrink-0"
+          className="inline-flex items-center justify-center w-7 h-7 rounded-lg border border-[#eee3d1] bg-white text-[#78644d] hover:bg-[#fff7ea] hover:text-[#2f2212] shrink-0"
           title={t('docBrowserNewTab')}
         >
           <Plus className="w-3.5 h-3.5" />