@nextclaw/ui 0.12.10 → 0.12.12

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

@@ -0,0 +1,95 @@
+import { Popover, PopoverContent, PopoverTrigger } from '@/shared/components/ui/popover';
+import {
+  systemStatusManager,
+  useRuntimeStatusBadgeView,
+} from '@/features/system-status';
+import { t } from '@/shared/lib/i18n';
+import { cn } from '@/shared/lib/utils';
+import { toast } from 'sonner';
+
+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)]'
+};
+
+type RuntimeStatusSummary = {
+  actionLabel: string | null;
+  description: string;
+  reasonLines: string[];
+  title: string;
+  tone: RuntimeStatusTone;
+  isBusy: boolean;
+};
+
+export function RuntimeStatusEntry() {
+  const summary = useRuntimeStatusBadgeView() as RuntimeStatusSummary;
+  const canRestart = summary.actionLabel === t('runtimeStatusRestartAction');
+
+  const handleRestart = async () => {
+    if (!canRestart) {
+      return;
+    }
+    try {
+      const result =
+        await systemStatusManager.runRuntimeControlAction('restart-service');
+      toast.success(result.message);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : t('runtimeControlActionFailed');
+      toast.error(`${t('runtimeControlActionFailed')}: ${message}`);
+    }
+  };
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          className="inline-flex items-center justify-center rounded-full p-0.5 transition-transform hover:scale-105"
+          aria-label={summary.title}
+          title={summary.title}
+          data-testid="runtime-status-entry"
+        >
+          <span className={cn('h-2.5 w-2.5 rounded-full', runtimeStatusToneStyles[summary.tone])} />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        sideOffset={10}
+        className="w-[290px] space-y-3 rounded-2xl border border-gray-200 bg-white p-4"
+      >
+        <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>
+        {summary.reasonLines.length > 0 ? (
+          <div className="space-y-2">
+            {summary.reasonLines.map((reason) => (
+              <div
+                key={reason}
+                className="rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-xs leading-5 text-amber-900"
+              >
+                {reason}
+              </div>
+            ))}
+          </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>
+            <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"
+            >
+              {summary.isBusy ? t('runtimeStatusRestartingAction') : summary.actionLabel}
+            </button>
+          </div>
+        ) : null}
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/app/components/layout/settings-entry-page.test.tsx

@@ -0,0 +1,65 @@
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { describe, expect, it, vi } from "vitest";
+import { I18nProvider } from "@/app/components/i18n-provider";
+import { SettingsEntryPage } from "@/app/components/layout/settings-entry-page";
+
+const { useViewportLayoutMock } = vi.hoisted(() => ({
+  useViewportLayoutMock: vi.fn(() => ({
+    mode: "desktop" as "mobile" | "desktop",
+    isMobile: false,
+    isDesktop: true,
+  })),
+}));
+
+vi.mock("@/app/hooks/use-viewport-layout", () => ({
+  useViewportLayout: useViewportLayoutMock,
+}));
+
+describe("SettingsEntryPage", () => {
+  it("redirects desktop users to the model settings page", () => {
+    render(
+      <I18nProvider>
+        <MemoryRouter initialEntries={["/settings"]}>
+          <Routes>
+            <Route path="/settings" element={<SettingsEntryPage />} />
+            <Route
+              path="/model"
+              element={<div data-testid="model-settings-page">Model</div>}
+            />
+          </Routes>
+        </MemoryRouter>
+      </I18nProvider>,
+    );
+
+    expect(screen.getByTestId("model-settings-page")).toBeTruthy();
+  });
+
+  it("renders the mobile settings shell on mobile devices", () => {
+    useViewportLayoutMock.mockReturnValue({
+      mode: "mobile",
+      isMobile: true,
+      isDesktop: false,
+    });
+
+    render(
+      <I18nProvider>
+        <MemoryRouter initialEntries={["/settings"]}>
+          <Routes>
+            <Route path="/settings" element={<SettingsEntryPage />} />
+          </Routes>
+        </MemoryRouter>
+      </I18nProvider>,
+    );
+
+    expect(screen.getByTestId("mobile-settings-shell")).toBeTruthy();
+    const links = screen.getAllByRole("link");
+    expect(links[0]?.textContent?.trim()).toBe("Language");
+
+    useViewportLayoutMock.mockReturnValue({
+      mode: "desktop",
+      isMobile: false,
+      isDesktop: true,
+    });
+  });
+});

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

@@ -0,0 +1,13 @@
+import { Navigate } from "react-router-dom";
+import { useViewportLayout } from "@/app/hooks/use-viewport-layout";
+import { MobileSettingsShell } from "@/platforms/mobile";
+
+export function SettingsEntryPage() {
+  const { isMobile } = useViewportLayout();
+
+  if (!isMobile) {
+    return <Navigate to="/model" replace />;
+  }
+
+  return <MobileSettingsShell />;
+}

package/src/{components → app/components}/layout/sidebar-items.tsx

@@ -1,7 +1,7 @@
 import type { ComponentType, ReactNode } from 'react';
 import { NavLink } from 'react-router-dom';
-import { Select, SelectContent, SelectTrigger } from '@/components/ui/select';
-import { cn } from '@/lib/utils';
+import { Select, SelectContent, SelectTrigger } from '@/shared/components/ui/select';
+import { cn } from '@/shared/lib/utils';
 
 type SidebarIcon = ComponentType<{ className?: string }>;
 type SidebarItemDensity = 'default' | 'compact';

package/src/{components → app/components}/layout/sidebar.layout.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen, within } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import { describe, expect, it, vi } from 'vitest';
-import { Sidebar } from '@/components/layout/Sidebar';
+import { Sidebar } from '@/app/components/layout/sidebar';
 
 const mocks = vi.hoisted(() => ({
   openAccountPanel: vi.fn(),
@@ -16,32 +16,38 @@ const mocks = vi.hoisted(() => ({
   }
 }));
 
-vi.mock('@/components/doc-browser', () => ({
+vi.mock('@/shared/components/doc-browser', () => ({
   useDocBrowser: () => ({
     open: mocks.docOpen
   })
 }));
 
-vi.mock('@/presenter/app-presenter-context', () => ({
-  useAppPresenter: () => ({
+vi.mock('@/app/components/app-manager-provider', () => ({
+  useAppManager: () => ({
     accountManager: {
       openAccountPanel: mocks.openAccountPanel
     }
   })
 }));
 
-vi.mock('@/hooks/useRemoteAccess', () => ({
-  useRemoteStatus: () => mocks.remoteStatus
-}));
+vi.mock('@/features/remote', async () => {
+  const actual = await vi.importActual<typeof import('@/features/remote')>(
+    '@/features/remote'
+  );
+  return {
+    ...actual,
+    useRemoteStatus: () => mocks.remoteStatus
+  };
+});
 
-vi.mock('@/components/providers/I18nProvider', () => ({
+vi.mock('@/app/components/i18n-provider', () => ({
   useI18n: () => ({
     language: 'en',
     setLanguage: vi.fn()
   })
 }));
 
-vi.mock('@/components/providers/ThemeProvider', () => ({
+vi.mock('@/app/components/theme-provider', () => ({
   useTheme: () => ({
     theme: 'warm',
     setTheme: vi.fn()
@@ -106,14 +112,15 @@ describe('Sidebar', () => {
       'Providers',
       'Channels',
       'Search Channels',
-      'Plugins',
-      'MCP',
       'Routing & Runtime',
       'Updates',
       'Remote Access',
       'Security',
       'Sessions',
-      'Secrets'
+      'Secrets',
+      'Cron Jobs',
+      'Plugins',
+      'MCP'
     ]);
   });
 

package/src/{components/layout/Sidebar.tsx → app/components/layout/sidebar.tsx}

@@ -1,16 +1,17 @@
-import { cn } from '@/lib/utils';
-import { LANGUAGE_OPTIONS, t, type I18nLanguage } from '@/lib/i18n';
-import { THEME_OPTIONS, type UiTheme } from '@/lib/theme';
-import { Cpu, GitBranch, History, MessageCircle, MessageSquare, Sparkles, BookOpen, Plug, BrainCircuit, AlarmClock, Languages, Palette, KeyRound, Settings, ArrowLeft, Search, Shield, Wrench, Wifi, Bot, Download } from 'lucide-react';
+import { cn } from '@/shared/lib/utils';
+import { t } from '@/shared/lib/i18n';
+import { THEME_OPTIONS, type UiTheme } from '@/shared/lib/theme';
+import { MessageCircle, BookOpen, BrainCircuit, AlarmClock, Languages, Palette, KeyRound, Settings, ArrowLeft, Bot } from 'lucide-react';
 import { NavLink } from 'react-router-dom';
-import { useDocBrowser } from '@/components/doc-browser';
-import { BrandHeader } from '@/components/common/BrandHeader';
-import { SidebarActionItem, SidebarNavLinkItem, SidebarSelectItem } from '@/components/layout/sidebar-items';
-import { useI18n } from '@/components/providers/I18nProvider';
-import { useTheme } from '@/components/providers/ThemeProvider';
-import { SelectItem } from '@/components/ui/select';
-import { useRemoteStatus } from '@/hooks/useRemoteAccess';
-import { useAppPresenter } from '@/presenter/app-presenter-context';
+import { useDocBrowser } from '@/shared/components/doc-browser';
+import { BrandHeader } from '@/shared/components/common/brand-header';
+import { SidebarActionItem, SidebarNavLinkItem, SidebarSelectItem } from '@/app/components/layout/sidebar-items';
+import { useTheme } from '@/app/components/theme-provider';
+import { SelectItem } from '@/shared/components/ui/select';
+import { useAppManager } from '@/app/components/app-manager-provider';
+import { useRemoteStatus } from '@/features/remote';
+import { getSettingsNavItems } from '@/app/configs/app-navigation.config';
+import { useLanguagePreference } from '@/features/settings';
 
 type SidebarMode = 'main' | 'settings';
 
@@ -19,25 +20,21 @@ type SidebarProps = {
 };
 
 export function Sidebar({ mode }: SidebarProps) {
-  const presenter = useAppPresenter();
+  const manager = useAppManager();
   const docBrowser = useDocBrowser();
   const remoteStatus = useRemoteStatus();
-  const { language, setLanguage } = useI18n();
+  const {
+    currentLanguage,
+    currentLanguageLabel,
+    languageOptions,
+    selectLanguage,
+  } = useLanguagePreference();
   const { theme, setTheme } = useTheme();
   const isSettingsMode = mode === 'settings';
-  const currentLanguageLabel = LANGUAGE_OPTIONS.find((option) => option.value === language)?.label ?? language;
   const currentThemeLabel = t(THEME_OPTIONS.find((option) => option.value === theme)?.labelKey ?? 'themeWarm');
   const accountEmail = remoteStatus.data?.account.email?.trim();
   const accountConnected = Boolean(remoteStatus.data?.account.loggedIn);
 
-  const handleLanguageSwitch = (nextLanguage: I18nLanguage) => {
-    if (language === nextLanguage) {
-      return;
-    }
-    setLanguage(nextLanguage);
-    window.location.reload();
-  };
-
   const handleThemeSwitch = (nextTheme: UiTheme) => {
     if (theme === nextTheme) {
       return;
@@ -69,68 +66,7 @@ export function Sidebar({ mode }: SidebarProps) {
     }
   ];
 
-  const settingsNavItems = [
-    {
-      target: '/model',
-      label: t('model'),
-      icon: Cpu,
-    },
-    {
-      target: '/providers',
-      label: t('providers'),
-      icon: Sparkles,
-    },
-    {
-      target: '/channels',
-      label: t('channels'),
-      icon: MessageSquare,
-    },
-    {
-      target: '/search',
-      label: t('searchChannels'),
-      icon: Search,
-    },
-    {
-      target: '/marketplace/plugins',
-      label: t('marketplaceFilterPlugins'),
-      icon: Plug,
-    },
-    {
-      target: '/marketplace/mcp',
-      label: t('marketplaceFilterMcp'),
-      icon: Wrench,
-    },
-    {
-      target: '/runtime',
-      label: t('runtime'),
-      icon: GitBranch,
-    },
-    {
-      target: '/updates',
-      label: t('updates'),
-      icon: Download,
-    },
-    {
-      target: '/remote',
-      label: t('remote'),
-      icon: Wifi,
-    },
-    {
-      target: '/security',
-      label: t('security'),
-      icon: Shield,
-    },
-    {
-      target: '/sessions',
-      label: t('sessions'),
-      icon: History,
-    },
-    {
-      target: '/secrets',
-      label: t('secrets'),
-      icon: KeyRound,
-    }
-  ];
+  const settingsNavItems = getSettingsNavItems(t);
   const navItems = isSettingsMode ? settingsNavItems : mainNavItems;
   const sidebarDensity = isSettingsMode ? 'compact' : 'default';
 
@@ -182,7 +118,7 @@ export function Sidebar({ mode }: SidebarProps) {
         <div className={cn('shrink-0 border-t border-[#dde0ea] bg-secondary', isSettingsMode ? 'mt-2 pt-3' : 'mt-3 pt-3')}>
           {isSettingsMode ? (
             <SidebarActionItem
-              onClick={() => presenter.accountManager.openAccountPanel()}
+              onClick={() => manager.accountManager.openAccountPanel()}
               icon={KeyRound}
               label={t('remoteAccountEntryManage')}
               density="compact"
@@ -220,14 +156,14 @@ export function Sidebar({ mode }: SidebarProps) {
           </div>
           <div className="mb-2">
             <SidebarSelectItem
-              value={language}
-              onValueChange={(value) => handleLanguageSwitch(value as I18nLanguage)}
+              value={currentLanguage}
+              onValueChange={(value) => selectLanguage(value as typeof currentLanguage)}
               icon={Languages}
               label={t('language')}
               valueLabel={currentLanguageLabel}
               density={sidebarDensity}
             >
-              {LANGUAGE_OPTIONS.map((option) => (
+              {languageOptions.map((option) => (
                 <SelectItem key={option.value} value={option.value} className="text-xs">
                   {option.label}
                 </SelectItem>

package/src/{components/providers/ThemeProvider.tsx → app/components/theme-provider.tsx}

@@ -13,8 +13,8 @@ import {
   setTheme as applyTheme,
   subscribeThemeChange,
   type UiTheme,
-} from '@/lib/theme';
-import { pwaShellThemeManager } from '@/pwa/managers/pwa-shell-theme.manager';
+} from '@/shared/lib/theme';
+import { pwaShellThemeManager } from '@/features/pwa';
 
 type ThemeContextValue = {
   theme: UiTheme;

package/src/app/configs/app-navigation.config.ts

@@ -0,0 +1,246 @@
+import type { LucideIcon } from "lucide-react";
+import {
+  AlarmClock,
+  Bot,
+  BrainCircuit,
+  Cpu,
+  Download,
+  History,
+  KeyRound,
+  Languages,
+  MessageCircle,
+  MessageSquare,
+  Plug,
+  Search,
+  Settings,
+  Shield,
+  Sparkles,
+  Wifi,
+  Wrench,
+} from "lucide-react";
+
+type Translate = (key: string) => string;
+
+export type AppNavigationItem = {
+  target: string;
+  label: string;
+  icon: LucideIcon;
+};
+
+function matchesRouteTarget(pathname: string, target: string): boolean {
+  const normalizedPath = pathname.toLowerCase();
+  const normalizedTarget = target.toLowerCase();
+  return (
+    normalizedPath === normalizedTarget ||
+    normalizedPath.startsWith(`${normalizedTarget}/`)
+  );
+}
+
+export function isMainWorkspaceRoute(pathname: string): boolean {
+  const normalized = pathname.toLowerCase();
+  return (
+    normalized === "/chat" ||
+    normalized.startsWith("/chat/") ||
+    normalized === "/skills" ||
+    normalized.startsWith("/skills/") ||
+    normalized === "/cron" ||
+    normalized.startsWith("/cron/") ||
+    normalized === "/agents" ||
+    normalized.startsWith("/agents/")
+  );
+}
+
+export function isChatSessionDetailRoute(pathname: string): boolean {
+  const normalized = pathname.toLowerCase();
+  return normalized.startsWith("/chat/") && normalized !== "/chat";
+}
+
+export function getMobileBottomNavItems(
+  translate: Translate,
+): AppNavigationItem[] {
+  return [
+    {
+      target: "/chat",
+      label: translate("chat"),
+      icon: MessageCircle,
+    },
+    {
+      target: "/skills",
+      label: translate("marketplaceFilterSkills"),
+      icon: BrainCircuit,
+    },
+    {
+      target: "/agents",
+      label: translate("agentsPageTitle"),
+      icon: Bot,
+    },
+    {
+      target: "/settings",
+      label: translate("settings"),
+      icon: Settings,
+    },
+  ];
+}
+
+export function getSettingsNavItems(
+  translate: Translate,
+): AppNavigationItem[] {
+  return [
+    {
+      target: "/model",
+      label: translate("model"),
+      icon: Cpu,
+    },
+    {
+      target: "/providers",
+      label: translate("providers"),
+      icon: Sparkles,
+    },
+    {
+      target: "/channels",
+      label: translate("channels"),
+      icon: MessageSquare,
+    },
+    {
+      target: "/search",
+      label: translate("searchChannels"),
+      icon: Search,
+    },
+    {
+      target: "/runtime",
+      label: translate("runtime"),
+      icon: Cpu,
+    },
+    {
+      target: "/updates",
+      label: translate("updates"),
+      icon: Download,
+    },
+    {
+      target: "/remote",
+      label: translate("remote"),
+      icon: Wifi,
+    },
+    {
+      target: "/security",
+      label: translate("security"),
+      icon: Shield,
+    },
+    {
+      target: "/sessions",
+      label: translate("sessions"),
+      icon: History,
+    },
+    {
+      target: "/secrets",
+      label: translate("secrets"),
+      icon: KeyRound,
+    },
+    {
+      target: "/cron",
+      label: translate("cron"),
+      icon: AlarmClock,
+    },
+    {
+      target: "/marketplace/plugins",
+      label: translate("marketplaceFilterPlugins"),
+      icon: Plug,
+    },
+    {
+      target: "/marketplace/mcp",
+      label: translate("marketplaceFilterMcp"),
+      icon: Wrench,
+    },
+  ];
+}
+
+export function getMobileSettingsNavItems(
+  translate: Translate,
+): AppNavigationItem[] {
+  return [
+    {
+      target: "/language",
+      label: translate("language"),
+      icon: Languages,
+    },
+    ...getSettingsNavItems(translate),
+  ];
+}
+
+export function isSettingsRoute(pathname: string): boolean {
+  const normalized = pathname.toLowerCase();
+  if (normalized === "/settings") {
+    return true;
+  }
+  return getMobileSettingsNavItems((key) => key).some((item) =>
+    matchesRouteTarget(normalized, item.target),
+  );
+}
+
+export function resolveMobileRouteMeta(
+  pathname: string,
+  translate: Translate,
+): {
+  title: string;
+  backTarget: string | null;
+  backLabel: string | null;
+} {
+  const normalized = pathname.toLowerCase();
+  const settingsItems = getMobileSettingsNavItems(translate);
+
+  if (isChatSessionDetailRoute(normalized)) {
+    return {
+      title: translate("chat"),
+      backTarget: "/chat",
+      backLabel: translate("chat"),
+    };
+  }
+
+  if (normalized === "/chat") {
+    return {
+      title: translate("chat"),
+      backTarget: null,
+      backLabel: null,
+    };
+  }
+
+  if (normalized === "/skills" || normalized.startsWith("/skills/")) {
+    return {
+      title: translate("marketplaceFilterSkills"),
+      backTarget: null,
+      backLabel: null,
+    };
+  }
+
+  if (normalized === "/agents" || normalized.startsWith("/agents/")) {
+    return {
+      title: translate("agentsPageTitle"),
+      backTarget: null,
+      backLabel: null,
+    };
+  }
+
+  if (normalized === "/settings") {
+    return {
+      title: translate("settings"),
+      backTarget: null,
+      backLabel: null,
+    };
+  }
+
+  for (const item of settingsItems) {
+    if (matchesRouteTarget(normalized, item.target)) {
+      return {
+        title: item.label,
+        backTarget: "/settings",
+        backLabel: translate("settings"),
+      };
+    }
+  }
+
+  return {
+    title: translate("settings"),
+    backTarget: null,
+    backLabel: null,
+  };
+}