@nextclaw/ui 0.12.11 → 0.12.13

package/src/platforms/mobile/components/mobile-bottom-nav.test.tsx

@@ -0,0 +1,45 @@
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { describe, expect, it } from "vitest";
+import { I18nProvider } from "@/app/components/i18n-provider";
+import { MobileBottomNav } from "@/platforms/mobile/components/mobile-bottom-nav";
+
+describe("MobileBottomNav", () => {
+  it("highlights the settings tab for nested settings routes", () => {
+    render(
+      <I18nProvider>
+        <MemoryRouter initialEntries={["/providers"]}>
+          <MobileBottomNav />
+        </MemoryRouter>
+      </I18nProvider>,
+    );
+
+    expect(
+      screen.getByRole("link", { name: /settings/i }).getAttribute("aria-current"),
+    ).toBe("page");
+    expect(
+      screen.getByRole("link", { name: /chat/i }).getAttribute("aria-current"),
+    ).toBeNull();
+    expect(screen.getByTestId("mobile-nav-active-indicator")).toBeTruthy();
+    expect(screen.getByRole("link", { name: /settings/i }).className).not.toContain(
+      "bg-gray-100",
+    );
+    expect(screen.getByTestId("mobile-nav-active-indicator").textContent).toMatch(
+      /settings/i,
+    );
+  });
+
+  it("highlights the chat tab for chat routes", () => {
+    render(
+      <I18nProvider>
+        <MemoryRouter initialEntries={["/chat/demo-session"]}>
+          <MobileBottomNav />
+        </MemoryRouter>
+      </I18nProvider>,
+    );
+
+    expect(
+      screen.getByRole("link", { name: /chat/i }).getAttribute("aria-current"),
+    ).toBe("page");
+  });
+});

package/src/platforms/mobile/components/mobile-bottom-nav.tsx

@@ -0,0 +1,71 @@
+import { Link, useLocation } from "react-router-dom";
+import {
+  getMobileBottomNavItems,
+  isSettingsRoute,
+} from "@/app/configs/app-navigation.config";
+import { t } from "@/shared/lib/i18n";
+import { cn } from "@/shared/lib/utils";
+
+function isNavItemActive(pathname: string, target: string): boolean {
+  if (target === "/settings") {
+    return isSettingsRoute(pathname);
+  }
+  const normalizedPath = pathname.toLowerCase();
+  const normalizedTarget = target.toLowerCase();
+  return (
+    normalizedPath === normalizedTarget ||
+    normalizedPath.startsWith(`${normalizedTarget}/`)
+  );
+}
+
+export function MobileBottomNav() {
+  const { pathname } = useLocation();
+  const navItems = getMobileBottomNavItems(t);
+
+  return (
+    <nav
+      data-testid="mobile-bottom-nav"
+      aria-label={t("settings")}
+      className="shrink-0 border-t border-gray-200/80 bg-white/95 backdrop-blur-sm"
+      style={{
+        paddingBottom: "calc(env(safe-area-inset-bottom, 0px) + 0.25rem)",
+      }}
+    >
+      <ul className="grid grid-cols-4 gap-1 px-2 pt-1">
+        {navItems.map((item) => {
+          const active = isNavItemActive(pathname, item.target);
+          return (
+            <li key={item.target}>
+              <Link
+                to={item.target}
+                aria-current={active ? "page" : undefined}
+                className={cn(
+                  "group flex min-h-[2.875rem] items-center justify-center rounded-xl px-1 py-1 text-[10px] font-medium transition-colors",
+                  active
+                    ? "text-gray-900"
+                    : "text-gray-500 hover:text-gray-800",
+                )}
+              >
+                <span
+                  data-testid={active ? "mobile-nav-active-indicator" : undefined}
+                  className={cn(
+                    "inline-flex max-w-full min-w-14 flex-col items-center justify-center gap-0.5 rounded-xl px-2 py-1 transition-colors",
+                    active ? "bg-gray-100" : "bg-transparent group-hover:bg-gray-50",
+                  )}
+                >
+                  <item.icon
+                    className={cn(
+                      "h-3.5 w-3.5",
+                      active ? "text-gray-900" : "text-gray-400",
+                    )}
+                  />
+                  <span className="max-w-full truncate">{item.label}</span>
+                </span>
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </nav>
+  );
+}

package/src/platforms/mobile/components/mobile-settings-shell.tsx

@@ -0,0 +1,39 @@
+import { NavLink } from "react-router-dom";
+import { getMobileSettingsNavItems } from "@/app/configs/app-navigation.config";
+import { t } from "@/shared/lib/i18n";
+import { cn } from "@/shared/lib/utils";
+
+export function MobileSettingsShell() {
+  const settingsNavItems = getMobileSettingsNavItems(t);
+
+  return (
+    <div
+      data-testid="mobile-settings-shell"
+      className="space-y-3 pb-4"
+    >
+      {settingsNavItems.map((item) => (
+        <NavLink
+          key={item.target}
+          to={item.target}
+          className={({ isActive }) =>
+            cn(
+              "flex items-center gap-3 rounded-2xl border border-gray-200/80 bg-white px-4 py-4 shadow-card transition-colors",
+              isActive
+                ? "border-gray-300 bg-gray-50"
+                : "hover:border-gray-300 hover:bg-gray-50/70",
+            )
+          }
+        >
+          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl bg-gray-100 text-gray-600">
+            <item.icon className="h-4 w-4" />
+          </div>
+          <div className="min-w-0">
+            <p className="truncate text-sm font-semibold text-gray-900">
+              {item.label}
+            </p>
+          </div>
+        </NavLink>
+      ))}
+    </div>
+  );
+}

package/src/platforms/mobile/components/mobile-topbar.tsx

@@ -0,0 +1,41 @@
+import { ArrowLeft } from "lucide-react";
+import { useNavigate, useLocation } from "react-router-dom";
+import { resolveMobileRouteMeta } from "@/app/configs/app-navigation.config";
+import { t } from "@/shared/lib/i18n";
+
+export function MobileTopbar() {
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+  const routeMeta = resolveMobileRouteMeta(pathname, t);
+
+  return (
+    <header
+      data-testid="mobile-topbar"
+      className="shrink-0 border-b border-gray-200/80 bg-white/95 backdrop-blur-sm"
+      style={{
+        paddingTop: "calc(env(safe-area-inset-top, 0px) + 0.25rem)",
+      }}
+    >
+      <div className="flex min-h-[2.75rem] items-center gap-2 px-3 py-1.5">
+        {routeMeta.backTarget ? (
+          <button
+            type="button"
+            onClick={() => navigate(routeMeta.backTarget as string)}
+            className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-gray-200 text-gray-600 transition-colors hover:bg-gray-50 hover:text-gray-900"
+            aria-label={routeMeta.backLabel ?? t("backToMain")}
+          >
+            <ArrowLeft className="h-4 w-4" />
+          </button>
+        ) : (
+          null
+        )}
+        <div className="min-w-0 flex-1">
+          <h1 className="truncate text-center text-[15px] font-semibold text-gray-900">
+            {routeMeta.title}
+          </h1>
+        </div>
+        {routeMeta.backTarget ? <div className="h-8 w-8 shrink-0" aria-hidden="true" /> : null}
+      </div>
+    </header>
+  );
+}

package/src/platforms/mobile/index.ts

@@ -0,0 +1,3 @@
+export { MobileAppShell } from "./components/mobile-app-shell";
+export { MobileSettingsShell } from "./components/mobile-settings-shell";
+export { ChatMobileShell } from "./components/chat-mobile-shell";

package/src/shared/components/__tests__/config-split-page.test.tsx

@@ -0,0 +1,47 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import {
+  ConfigSplitDetailPane,
+  ConfigSplitPage,
+  ConfigSplitSidebar,
+} from "@/shared/components/config-split-page";
+import { I18nProvider } from "@/app/components/i18n-provider";
+
+describe("ConfigSplitPage", () => {
+  it("shows only the list pane in mobile list mode", () => {
+    render(
+      <I18nProvider>
+        <ConfigSplitPage mobileView="list" mobileListLabel="Providers">
+          <ConfigSplitSidebar>
+            <div data-testid="config-list-pane">List Pane</div>
+          </ConfigSplitSidebar>
+          <ConfigSplitDetailPane>
+            <div data-testid="config-detail-pane">Detail Pane</div>
+          </ConfigSplitDetailPane>
+        </ConfigSplitPage>
+      </I18nProvider>,
+    );
+
+    expect(screen.getByTestId("config-list-pane")).toBeTruthy();
+    expect(screen.queryByTestId("config-detail-pane")).toBeNull();
+  });
+
+  it("shows the detail pane and back affordance in mobile detail mode", () => {
+    render(
+      <I18nProvider>
+        <ConfigSplitPage mobileView="detail" mobileListLabel="Providers">
+          <ConfigSplitSidebar>
+            <div data-testid="config-list-pane">List Pane</div>
+          </ConfigSplitSidebar>
+          <ConfigSplitDetailPane>
+            <div data-testid="config-detail-pane">Detail Pane</div>
+          </ConfigSplitDetailPane>
+        </ConfigSplitPage>
+      </I18nProvider>,
+    );
+
+    expect(screen.queryByTestId("config-list-pane")).toBeNull();
+    expect(screen.getByTestId("config-detail-pane")).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Providers" })).toBeTruthy();
+  });
+});

package/src/{components/common/AgentAvatar.tsx → shared/components/common/agent-avatar.tsx}

@@ -1,4 +1,4 @@
-import { cn } from '@/lib/utils';
+import { cn } from '@/shared/lib/utils';
 
 type AgentAvatarProps = {
   agentId: string;

package/src/{components → shared/components}/common/agent-identity/agent-identity-avatar.tsx

@@ -1,5 +1,5 @@
-import { AgentAvatar } from '@/components/common/AgentAvatar';
-import { useAgentIdentity } from '@/components/common/agent-identity/use-agent-identity';
+import { AgentAvatar } from '@/shared/components/common/agent-avatar';
+import { useAgentIdentity } from '@/shared/components/common/agent-identity/use-agent-identity';
 
 type AgentIdentityAvatarProps = {
   agentId?: string | null;

package/src/shared/components/common/agent-identity/index.ts

@@ -0,0 +1,3 @@
+export { AgentIdentityAvatar } from '@/shared/components/common/agent-identity/agent-identity-avatar';
+export { useAgentIdentity } from '@/shared/components/common/agent-identity/use-agent-identity';
+export type { ResolvedAgentIdentity } from '@/shared/components/common/agent-identity/use-agent-identity';

package/src/{components → shared/components}/common/agent-identity/use-agent-identity.ts

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
-import type { AgentProfileView } from '@/api/types';
-import { useChatThreadStore } from '@/components/chat/stores/chat-thread.store';
-import { useAgents } from '@/hooks/agents/useAgents';
+import type { AgentProfileView } from '@/shared/lib/api';
+import { useChatThreadStore } from '@/features/chat';
+import { useAgents } from '@/shared/hooks/use-agents';
 
 export type ResolvedAgentIdentity = {
   agentId: string;

package/src/{components/common/BrandHeader.tsx → shared/components/common/brand-header.tsx}

@@ -1,6 +1,6 @@
-import { useAppMeta } from '@/hooks/useConfig';
+import { useAppMeta } from '@/shared/hooks/use-config';
 import type { ReactNode } from 'react';
-import { RuntimeStatusEntry } from '@/components/layout/runtime-status-entry';
+import { RuntimeStatusEntry } from '@/app/components/layout/runtime-status-entry';
 
 type BrandHeaderProps = {
   className?: string;

package/src/{components/common/KeyValueEditor.tsx → shared/components/common/key-value-editor.tsx}

@@ -1,8 +1,8 @@
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
+import { Button } from '@/shared/components/ui/button';
+import { Input } from '@/shared/components/ui/input';
 import { Plus, Trash2 } from 'lucide-react';
-import { t } from '@/lib/i18n';
-import { cn } from '@/lib/utils';
+import { t } from '@/shared/lib/i18n';
+import { cn } from '@/shared/lib/utils';
 
 interface KeyValueEditorProps {
   value: Record<string, string> | null;

package/src/{components/common/LogoBadge.tsx → shared/components/common/logo-badge.tsx}

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { cn } from '@/lib/utils';
+import { cn } from '@/shared/lib/utils';
 
 type LogoBadgeProps = {
   name: string;

package/src/{components/common/MaskedInput.tsx → shared/components/common/masked-input.tsx}

@@ -1,8 +1,8 @@
 import { useState } from 'react';
-import { Input } from '@/components/ui/input';
-import { Button } from '@/components/ui/button';
+import { Input } from '@/shared/components/ui/input';
+import { Button } from '@/shared/components/ui/button';
 import { Eye, EyeOff } from 'lucide-react';
-import { cn } from '@/lib/utils';
+import { cn } from '@/shared/lib/utils';
 
 interface MaskedInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   maskedValue?: string;

package/src/{components/common/ProviderScopedModelInput.tsx → shared/components/common/provider-scoped-model-input.tsx}

@@ -1,10 +1,10 @@
 import { useEffect, useMemo, useState } from 'react';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { SearchableModelInput } from '@/components/common/SearchableModelInput';
-import { Input } from '@/components/ui/input';
-import type { ProviderModelCatalogItem } from '@/lib/provider-models';
-import { composeProviderModel, findProviderByModel, toProviderLocalModel } from '@/lib/provider-models';
-import { t } from '@/lib/i18n';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/shared/components/ui/select';
+import { SearchableModelInput } from '@/shared/components/common/searchable-model-input';
+import { Input } from '@/shared/components/ui/input';
+import type { ProviderModelCatalogItem } from '@/shared/lib/provider-models';
+import { composeProviderModel, findProviderByModel, toProviderLocalModel } from '@/shared/lib/provider-models';
+import { t } from '@/shared/lib/i18n';
 
 type ProviderScopedModelInputProps = {
   id?: string;

package/src/{components/common/SearchableModelInput.tsx → shared/components/common/searchable-model-input.tsx}

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import { Check, ChevronsUpDown } from 'lucide-react';
-import { Input } from '@/components/ui/input';
-import { cn } from '@/lib/utils';
+import { Input } from '@/shared/components/ui/input';
+import { cn } from '@/shared/lib/utils';
 
 type SearchableModelInputProps = {
   id?: string;

package/src/{components/common/StatusBadge.tsx → shared/components/common/status-badge.tsx}

@@ -1,7 +1,7 @@
-import { cn } from '@/lib/utils';
+import { cn } from '@/shared/lib/utils';
 import { Loader2 } from 'lucide-react';
-import { t } from '@/lib/i18n';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { t } from '@/shared/lib/i18n';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/shared/components/ui/tooltip';
 
 type Status = 'connected' | 'disconnected' | 'connecting';
 

package/src/{components → shared/components}/common/tag-input.tsx

@@ -1,8 +1,8 @@
 import { useState } from "react";
 import { X } from "lucide-react";
-import { cn } from "@/lib/utils";
-import { t } from "@/lib/i18n";
-import { TagChip } from "@/components/ui/tag-chip";
+import { cn } from "@/shared/lib/utils";
+import { t } from "@/shared/lib/i18n";
+import { TagChip } from "@/shared/components/ui/tag-chip";
 
 interface TagInputProps {
   value: string[];

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

@@ -1,6 +1,6 @@
-import { t } from '@/lib/i18n';
-import type { getLanguage } from '@/lib/i18n';
-import type { ProviderConfigUpdate, ProviderConfigView, ThinkingLevel } from '@/api/types';
+import { t } from '@/shared/lib/i18n';
+import type { getLanguage } from '@/shared/lib/i18n';
+import type { ProviderConfigUpdate, ProviderConfigView, ThinkingLevel } from '@/shared/lib/api';
 
 type WireApiType = 'auto' | 'chat' | 'responses';
 type ModelThinkingConfig = Record<string, { supported: ThinkingLevel[]; default?: ThinkingLevel | null }>;

package/src/{components/config/ProviderForm.tsx → shared/components/config/provider-form.tsx}

@@ -12,24 +12,24 @@ import {
   useStartProviderAuth,
   useTestProviderConnection,
   useUpdateProvider
-} from '@/hooks/useConfig';
-import { MaskedInput } from '@/components/common/MaskedInput';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { hintForPath } from '@/lib/config-hints';
-import { getLanguage, t } from '@/lib/i18n';
-import type { ProviderConfigUpdate, ProviderConnectionTestRequest, ThinkingLevel } from '@/api/types';
+} from '@/shared/hooks/use-config';
+import { MaskedInput } from '@/shared/components/common/masked-input';
+import { Button } from '@/shared/components/ui/button';
+import { Input } from '@/shared/components/ui/input';
+import { Label } from '@/shared/components/ui/label';
+import { hintForPath } from '@/shared/lib/config-hints';
+import { getLanguage, t } from '@/shared/lib/i18n';
+import type { ProviderConfigUpdate, ProviderConnectionTestRequest, ThinkingLevel } from '@/shared/lib/api';
 import {
   ConfigSplitDetailPane,
   ConfigSplitEmptyPane,
   ConfigSplitPaneBody,
   ConfigSplitPaneFooter,
   ConfigSplitPaneHeader
-} from './config-split-page';
-import { ProviderAdvancedSettingsSection } from './provider-advanced-settings-section';
-import { ProviderAuthSection } from './provider-auth-section';
-import { ProviderEnabledField } from './provider-enabled-field';
+} from '../config-split-page';
+import { ProviderAdvancedSettingsSection } from '../provider-advanced-settings-section';
+import { ProviderAuthSection } from '../provider-auth-section';
+import { ProviderEnabledField } from '../provider-enabled-field';
 import {
   applyEnabledPatch,
   EMPTY_PROVIDER_CONFIG,
@@ -51,8 +51,8 @@ import {
   type WireApiType
 } from './provider-form-support';
 import { ProviderModelsSection } from './provider-models-section';
-import type { PillSelectOption } from './provider-pill-selector';
-import { ProviderStatusBadge } from './provider-status-badge';
+import type { PillSelectOption } from '../provider-pill-selector';
+import { ProviderStatusBadge } from '../provider-status-badge';
 
 type ProviderFormProps = {
   providerName?: string;

package/src/{components → shared/components}/config/provider-models-section.tsx

@@ -1,10 +1,10 @@
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { t } from '@/lib/i18n';
-import type { ThinkingLevel } from '@/api/types';
+import { Button } from '@/shared/components/ui/button';
+import { Input } from '@/shared/components/ui/input';
+import { Label } from '@/shared/components/ui/label';
+import { Popover, PopoverContent, PopoverTrigger } from '@/shared/components/ui/popover';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/shared/components/ui/select';
+import { t } from '@/shared/lib/i18n';
+import type { ThinkingLevel } from '@/shared/lib/api';
 import { Plus, Settings2, X } from 'lucide-react';
 
 type ModelThinkingConfig = Record<string, { supported: ThinkingLevel[]; default?: ThinkingLevel | null }>;

package/src/{components → shared/components}/config/providers-list.test.tsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
-import { ProvidersList } from '@/components/config/ProvidersList';
+import { ProvidersList } from '@/shared/components/config/providers-list';
 
 const mocks = vi.hoisted(() => ({
   createProviderMutateAsync: vi.fn(),
@@ -9,41 +9,41 @@ const mocks = vi.hoisted(() => ({
       providers: {
         openai: { enabled: true, apiKeySet: true },
         anthropic: { enabled: true, apiKeySet: true },
-        nextclaw: { enabled: true, apiKeySet: true }
-      }
+        nextclaw: { enabled: true, apiKeySet: true },
+      },
     },
-    isLoading: false
+    isLoading: false,
   },
   metaQuery: {
     data: {
       providers: [
         { name: 'nextclaw', displayName: 'NextClaw Builtin', defaultApiBase: 'https://ai-gateway-api.nextclaw.io/v1' },
         { name: 'openai', displayName: 'OpenAI', defaultApiBase: 'https://api.openai.com/v1' },
-        { name: 'anthropic', displayName: 'Anthropic', defaultApiBase: 'https://api.anthropic.com/v1' }
-      ]
-    }
+        { name: 'anthropic', displayName: 'Anthropic', defaultApiBase: 'https://api.anthropic.com/v1' },
+      ],
+    },
   },
   schemaQuery: {
     data: {
-      uiHints: {}
-    }
-  }
+      uiHints: {},
+    },
+  },
 }));
 
-vi.mock('@/hooks/useConfig', () => ({
+vi.mock('@/shared/hooks/use-config', () => ({
   useConfig: () => mocks.configQuery,
   useConfigMeta: () => mocks.metaQuery,
   useConfigSchema: () => mocks.schemaQuery,
   useCreateProvider: () => ({
     mutateAsync: mocks.createProviderMutateAsync,
-    isPending: false
-  })
+    isPending: false,
+  }),
 }));
 
-vi.mock('@/components/config/ProviderForm', () => ({
+vi.mock('@/shared/components/config/provider-form', () => ({
   ProviderForm: ({ providerName }: { providerName?: string }) => (
     <div data-testid="provider-form">{providerName ?? 'none'}</div>
-  )
+  ),
 }));
 
 describe('ProvidersList', () => {
@@ -55,14 +55,14 @@ describe('ProvidersList', () => {
       throw new Error('provider sidebar not found');
     }
 
-    const providerButtons = Array.from(sidebarSection.querySelectorAll('button[type="button"]')).filter((button) => (
-      ['OpenAI', 'Anthropic', 'NextClaw Builtin'].some((label) => button.textContent?.includes(label))
-    ));
+    const providerButtons = Array.from(sidebarSection.querySelectorAll('button[type="button"]')).filter((button) =>
+      ['OpenAI', 'Anthropic', 'NextClaw Builtin'].some((label) => button.textContent?.includes(label)),
+    );
 
     expect(providerButtons.map((button) => button.textContent)).toEqual([
       expect.stringContaining('OpenAI'),
       expect.stringContaining('Anthropic'),
-      expect.stringContaining('NextClaw Builtin')
+      expect.stringContaining('NextClaw Builtin'),
     ]);
   });
 });