@nextclaw/ui 0.15.1 → 0.15.3

package/src/app/components/layout/sidebar.tsx

@@ -2,34 +2,35 @@ 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,
   PanelLeftClose,
   PanelLeftOpen,
-  type LucideIcon,
 } from "lucide-react";
 import { NavLink } from "react-router-dom";
 import { useDocBrowser } from "@/shared/components/doc-browser";
 import { BrandHeader } from "@/shared/components/common/brand-header";
 import {
   SidebarActionItem,
+  SidebarNavigationList,
   SidebarNavLinkItem,
   SidebarSelectItem,
+  type SidebarItemDensity,
+  type SidebarNavListItem,
 } from "@/app/components/layout/sidebar-items";
 import { useTheme } from "@/app/components/theme-provider";
 import { SelectItem } from "@/shared/components/ui/select";
 import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
 import { useAppPresenter } from "@/app/components/app-presenter-provider";
 import { useRemoteStatus } from "@/features/remote";
-import { getSettingsNavItems } from "@/app/configs/app-navigation.config";
+import {
+  getMainSidebarNavItems,
+  getSettingsNavSections,
+} from "@/app/configs/app-navigation.config";
 import { useLanguagePreference } from "@/features/settings";
 import { viewportLayoutManager } from "@/app/managers/viewport-layout.manager";
 import { useViewportLayoutStore } from "@/app/stores/viewport-layout.store";
@@ -50,12 +51,38 @@ type SidebarProps = {
   mode: SidebarMode;
 };
 
-type SidebarNavItem = {
-  target: string;
+type SidebarNavSection = {
   label: string;
-  icon: LucideIcon;
+  items: SidebarNavListItem[];
+};
+
+type SidebarNavigationModel = {
+  items: SidebarNavListItem[];
+  sections?: SidebarNavSection[];
+  density: SidebarItemDensity;
 };
 
+type SidebarTranslate = (key: string) => string;
+
+function resolveSidebarNavigation(
+  isSettingsMode: boolean,
+  translate: SidebarTranslate,
+): SidebarNavigationModel {
+  if (!isSettingsMode) {
+    return {
+      items: getMainSidebarNavItems(translate),
+      density: "default",
+    };
+  }
+
+  const sections = getSettingsNavSections(translate);
+  return {
+    items: sections.flatMap((section) => section.items),
+    sections,
+    density: "compact",
+  };
+}
+
 function SidebarCollapseToggle({
   isCollapsed,
   onToggle,
@@ -106,7 +133,7 @@ function SettingsSidebarHeader({
           to="/chat"
           aria-label={t("backToMain")}
           className={cn(
-            "group inline-flex min-w-0 items-center rounded-lg text-[12px] font-medium text-muted-foreground transition-colors hover:bg-gray-200/60 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35",
+            "group inline-flex min-w-0 items-center rounded-lg text-[12px] font-medium text-muted-foreground transition-colors hover:bg-gray-200/60 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
             isCollapsed
               ? cn(
                   SIDEBAR_RAIL_CONTROL_CLASS,
@@ -197,13 +224,23 @@ function SidebarNavigation({
   isSettingsMode,
   isCollapsed,
   items,
+  sections,
   density,
 }: {
   isSettingsMode: boolean;
   isCollapsed: boolean;
-  items: SidebarNavItem[];
-  density: "default" | "compact";
+  items: SidebarNavListItem[];
+  sections?: SidebarNavSection[];
+  density: SidebarItemDensity;
 }) {
+  const listClassName = cn(
+    isCollapsed
+      ? cn(SIDEBAR_RAIL_STACK_CLASS, "pb-3")
+      : isSettingsMode
+        ? "space-y-0.5 pb-3"
+        : "space-y-1 pb-4",
+  );
+
   return (
     <nav
       className={cn(
@@ -212,30 +249,34 @@ function SidebarNavigation({
         SIDEBAR_SCROLL_EDGE_FADE_CLASS,
       )}
     >
-      <ul
-        className={cn(
-          isCollapsed
-            ? cn(SIDEBAR_RAIL_STACK_CLASS, "pb-3")
-            : isSettingsMode
-              ? "space-y-0.5 pb-3"
-              : "space-y-1 pb-4",
-        )}
-      >
-        {items.map((item) => (
-          <li
-            key={item.target}
-            className={isCollapsed ? "flex justify-center" : undefined}
-          >
-            <SidebarNavLinkItem
-              to={item.target}
-              label={item.label}
-              icon={item.icon}
-              density={density}
-              collapsed={isCollapsed}
-            />
-          </li>
-        ))}
-      </ul>
+      {sections && !isCollapsed ? (
+        <div className="space-y-3 pb-3">
+          {sections.map((section) => (
+            <section
+              key={section.label}
+              aria-label={section.label}
+              className="space-y-1"
+            >
+              <h2 className="px-3 text-[11px] font-semibold text-muted-foreground/70">
+                {section.label}
+              </h2>
+              <SidebarNavigationList
+                isCollapsed={isCollapsed}
+                items={section.items}
+                density={density}
+                className="space-y-0.5"
+              />
+            </section>
+          ))}
+        </div>
+      ) : (
+        <SidebarNavigationList
+          isCollapsed={isCollapsed}
+          items={items}
+          density={density}
+          className={listClassName}
+        />
+      )}
     </nav>
   );
 }
@@ -258,7 +299,7 @@ export function Sidebar({ mode }: SidebarProps) {
   const isSettingsMode = mode === "settings";
   const currentThemeLabel = t(
     THEME_OPTIONS.find((option) => option.value === theme)?.labelKey ??
-      "themeNatural",
+      "themeWork",
   );
   const accountEmail = remoteStatus.data?.account.email?.trim();
   const accountConnected = Boolean(remoteStatus.data?.account.loggedIn);
@@ -267,31 +308,11 @@ export function Sidebar({ mode }: SidebarProps) {
     if (theme !== nextTheme) setTheme(nextTheme);
   };
 
-  const mainNavItems: SidebarNavItem[] = [
-    {
-      target: "/chat",
-      label: t("chat"),
-      icon: MessageCircle,
-    },
-    {
-      target: "/chat/cron",
-      label: t("cron"),
-      icon: AlarmClock,
-    },
-    {
-      target: "/chat/skills",
-      label: t("marketplaceFilterSkills"),
-      icon: BrainCircuit,
-    },
-    {
-      target: "/agents",
-      label: t("agentsPageTitle"),
-      icon: Bot,
-    },
-  ];
-
-  const navItems = isSettingsMode ? getSettingsNavItems(t) : mainNavItems;
-  const sidebarDensity = isSettingsMode ? "compact" : "default";
+  const {
+    items: navItems,
+    sections: settingsNavSections,
+    density: sidebarDensity,
+  } = resolveSidebarNavigation(isSettingsMode, t);
 
   return (
     <aside
@@ -314,6 +335,7 @@ export function Sidebar({ mode }: SidebarProps) {
           isSettingsMode={isSettingsMode}
           isCollapsed={isCollapsed}
           items={navItems}
+          sections={settingsNavSections}
           density={sidebarDensity}
         />
 

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

@@ -2,6 +2,7 @@ import type { LucideIcon } from "lucide-react";
 import {
   Bot,
   BrainCircuit,
+  AlarmClock,
   Cpu,
   Download,
   KeyRound,
@@ -25,6 +26,11 @@ export type AppNavigationItem = {
   icon: LucideIcon;
 };
 
+export type AppNavigationSection = {
+  label: string;
+  items: AppNavigationItem[];
+};
+
 function matchesRouteTarget(pathname: string, target: string): boolean {
   const normalizedPath = pathname.toLowerCase();
   const normalizedTarget = target.toLowerCase();
@@ -80,6 +86,33 @@ export function getMobileBottomNavItems(
   ];
 }
 
+export function getMainSidebarNavItems(
+  translate: Translate,
+): AppNavigationItem[] {
+  return [
+    {
+      target: "/chat",
+      label: translate("chat"),
+      icon: MessageCircle,
+    },
+    {
+      target: "/chat/cron",
+      label: translate("cron"),
+      icon: AlarmClock,
+    },
+    {
+      target: "/chat/skills",
+      label: translate("marketplaceFilterSkills"),
+      icon: BrainCircuit,
+    },
+    {
+      target: "/agents",
+      label: translate("agentsPageTitle"),
+      icon: Bot,
+    },
+  ];
+}
+
 export function getSettingsNavItems(
   translate: Translate,
 ): AppNavigationItem[] {
@@ -142,6 +175,22 @@ export function getSettingsNavItems(
   ];
 }
 
+export function getSettingsNavSections(
+  translate: Translate,
+): AppNavigationSection[] {
+  const items = getSettingsNavItems(translate);
+  return [
+    {
+      label: translate("settingsGroupBasic"),
+      items: items.slice(0, 3),
+    },
+    {
+      label: translate("settingsGroupAdvanced"),
+      items: items.slice(3),
+    },
+  ];
+}
+
 export function getMobileSettingsNavItems(
   translate: Translate,
 ): AppNavigationItem[] {

package/src/app/styles/design-system.css

@@ -284,6 +284,101 @@
    }
 }
 
+@layer base {
+   :root[data-theme="work"] {
+      /* ========================================
+       BRAND COLORS (Work White Ink)
+       ======================================== */
+      --brand-50: 0 0% 97%;
+      --brand-100: 0 0% 94%;
+      --brand-200: 0 0% 88%;
+      --brand-300: 0 0% 78%;
+      --brand-400: 0 0% 58%;
+      --brand-500: 0 0% 23%;
+      --brand-600: 0 0% 18%;
+      --brand-700: 0 0% 12%;
+      --brand-800: 0 0% 7%;
+      --brand-900: 0 0% 4%;
+
+      /* ========================================
+       NEUTRAL COLORS (White Canvas / Soft Gray Rail)
+       ======================================== */
+      --gray-50: 0 0% 100%;
+      --gray-100: 0 0% 95%;
+      --gray-200: 0 0% 90%;
+      --gray-300: 0 0% 84%;
+      --gray-400: 0 0% 70%;
+      --gray-500: 0 0% 46%;
+      --gray-600: 0 0% 34%;
+      --gray-700: 0 0% 28%;
+      --gray-800: 0 0% 13%;
+      --gray-900: 0 0% 7%;
+
+      /* Semantic Colors */
+      --background: var(--gray-50);
+      --background-secondary: var(--gray-100);
+      --background-tertiary: var(--gray-200);
+      --foreground: var(--gray-800);
+      --foreground-secondary: var(--gray-700);
+      --foreground-tertiary: var(--gray-500);
+      --foreground-muted: var(--gray-400);
+      --primary: var(--brand-500);
+      --primary-hover: var(--brand-600);
+      --primary-active: var(--brand-700);
+      --primary-foreground: 0 0% 100%;
+      --secondary: var(--gray-100);
+      --secondary-hover: var(--gray-200);
+      --secondary-foreground: var(--gray-800);
+      --accent: var(--gray-200);
+      --accent-foreground: var(--gray-800);
+      --muted: var(--gray-100);
+      --muted-foreground: var(--gray-500);
+      --card: 0 0% 100%;
+      --card-foreground: var(--gray-800);
+      --card-border: var(--gray-200);
+      --popover: 0 0% 100%;
+      --popover-foreground: var(--gray-800);
+      --border: var(--gray-200);
+      --border-hover: var(--gray-300);
+      --border-active: var(--gray-600);
+      --input: 0 0% 100%;
+      --input-border: var(--gray-200);
+      --input-focus: var(--gray-600);
+      --ring: var(--gray-600);
+      --ring-offset: var(--gray-50);
+
+      /* Shadows (bright neutral tint) */
+      --shadow-xs: 0 1px 2px 0 rgb(20 24 28 / 0.03);
+      --shadow-sm: 0 1px 3px 0 rgb(20 24 28 / 0.05), 0 1px 2px -1px rgb(20 24 28 / 0.04);
+      --shadow-md: 0 4px 6px -1px rgb(20 24 28 / 0.05), 0 2px 4px -2px rgb(20 24 28 / 0.04);
+      --shadow-lg: 0 10px 15px -3px rgb(20 24 28 / 0.06), 0 4px 6px -4px rgb(20 24 28 / 0.04);
+      --shadow-xl: 0 20px 25px -5px rgb(20 24 28 / 0.08), 0 8px 10px -6px rgb(20 24 28 / 0.04);
+      --shadow-2xl: 0 25px 50px -12px rgb(20 24 28 / 0.14);
+      --shadow-card: 0 0 8px 0 rgba(20, 24, 28, 0.04);
+      --shadow-card-hover: 0 0 16px 0 rgba(20, 24, 28, 0.06);
+   }
+
+   :root[data-theme="work"] .nextclaw-chat-message-user {
+      background-color: hsl(var(--gray-100));
+      border-color: transparent;
+      color: hsl(var(--gray-800));
+   }
+
+   /* User bubble is light in work theme; keep clickable skill tokens as link-colored text. */
+   :root[data-theme="work"] .nextclaw-chat-message-user .nextclaw-chat-inline-token {
+      border-color: transparent;
+      background-color: transparent;
+      color: var(--md-link, #1f73c9);
+      box-shadow: none;
+   }
+
+   :root[data-theme="work"] .nextclaw-chat-message-user .nextclaw-chat-inline-token > span:first-child {
+      color: currentColor;
+      opacity: 0.8;
+   }
+
+}
+
 @layer base {
    :root[data-theme="warm"] {
       /* ========================================
@@ -812,10 +907,10 @@
       -webkit-backdrop-filter: blur(12px);
    }
 
-   /* Focus Ring */
+   /* Focus Ring — light inset-style ring, no offset box */
    .focus-ring {
-      @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
-      --tw-ring-color: hsl(var(--ring));
-      --tw-ring-offset-color: hsl(var(--ring-offset));
+      @apply focus:outline-none focus-visible:ring-1 focus-visible:ring-offset-0;
+      --tw-ring-color: hsl(var(--border));
+      --tw-ring-offset-color: transparent;
    }
 }

package/src/features/channels/components/config/channel-form.tsx

@@ -5,6 +5,7 @@ import { BookOpen, ChevronDown } from 'lucide-react';
 import { toast } from 'sonner';
 import { LogoBadge } from '@/shared/components/common/logo-badge';
 import { Button } from '@/shared/components/ui/button';
+import { FormActions } from '@/shared/components/ui/actions/form-actions';
 import { StatusDot } from '@/shared/components/status/status-dot';
 import { nextclawClient } from '@/shared/lib/api';
 import { useConfig, useConfigMeta, useConfigSchema, useExecuteConfigAction, useUpdateChannel } from '@/shared/hooks/use-config';
@@ -363,17 +364,19 @@ function ChannelFormEditor({
           />
         </ConfigSplitPaneBody>
 
-        <ConfigSplitPaneFooter className="flex flex-wrap items-center justify-between gap-3 px-6 py-4">
-          <div className="flex flex-wrap items-center gap-2">
-            {actions.filter((action) => action.trigger === 'manual').map((action) => (
-              <Button key={action.id} type="button" onClick={() => void handleManualAction(action)} disabled={disabled} variant="secondary">
-                {runningActionId === action.id ? t('connecting') : action.title}
-              </Button>
-            ))}
-          </div>
-          <Button type="submit" disabled={disabled}>
-            {updateChannel.isPending ? t('saving') : t('save')}
-          </Button>
+        <ConfigSplitPaneFooter>
+          <FormActions align="between">
+            <div className="flex flex-wrap items-center gap-2">
+              {actions.filter((action) => action.trigger === 'manual').map((action) => (
+                <Button key={action.id} type="button" size="sm" onClick={() => void handleManualAction(action)} disabled={disabled} variant="secondary">
+                  {runningActionId === action.id ? t('connecting') : action.title}
+                </Button>
+              ))}
+            </div>
+            <Button type="submit" size="sm" disabled={disabled}>
+              {updateChannel.isPending ? t('saving') : t('save')}
+            </Button>
+          </FormActions>
         </ConfigSplitPaneFooter>
       </form>
     </ConfigSplitDetailPane>

package/src/features/chat/components/conversation/__tests__/chat-conversation-header-section.test.tsx

@@ -224,6 +224,46 @@ describe("ChatConversationHeaderSection", () => {
 
     expect(screen.queryByRole("button", { name: /Switch session/ })).toBeNull();
     expect(screen.getByText("Parent Task")).toBeTruthy();
+    expect(screen.queryByText("Native")).toBeNull();
+  });
+
+  it("keeps the runtime badge for a non-native session", () => {
+    useChatQueryStore.setState({
+      snapshot: {
+        ...useChatQueryStore.getState().snapshot,
+        sessionsQuery: {
+          data: {
+            sessions: [
+              createSummary({
+                sessionId: "parent-session-1",
+                metadata: {
+                  label: "Parent Task",
+                  session_type: "codex",
+                },
+              }),
+            ],
+            total: 1,
+          },
+        } as never,
+        sessionTypesQuery: {
+          data: {
+            defaultType: "native",
+            options: [{ value: "codex", label: "Codex", ready: true }],
+          },
+        } as never,
+      },
+    });
+    mocks.sessionItems = [
+      createSessionListItem({
+        key: "parent-session-1",
+        label: "Parent Task",
+        sessionType: "codex",
+      }),
+    ];
+
+    renderHeaderSection();
+
+    expect(screen.getByText("Codex")).toBeTruthy();
   });
 
   it("keeps session switching available from a collapsed new-session header", async () => {

package/src/features/chat/components/conversation/chat-conversation-header-section.tsx

@@ -53,6 +53,8 @@ export function ChatConversationHeaderSection({
     sessionTypeOptions.find((option) => option.value === sessionType) ?? null;
   const sessionTypeLabel =
     sessionTypeOption?.label ?? resolveSessionTypeLabel(sessionType);
+  const shouldShowSessionTypeBadge =
+    sessionType !== DEFAULT_SESSION_TYPE && Boolean(sessionTypeLabel);
   const sessionProjectRoot = selectedSession?.projectRoot ?? null;
   const sessionProjectName =
     selectedSession?.projectName ?? getSessionProjectName(sessionProjectRoot);
@@ -110,7 +112,7 @@ export function ChatConversationHeaderSection({
         ) : null
       }
       sessionTypeBadge={
-        sessionTypeLabel ? (
+        shouldShowSessionTypeBadge ? (
           <span className="inline-flex shrink-0 items-center gap-1.5 rounded-full border border-border bg-muted px-2 py-0.5 text-[11px] font-medium text-muted-foreground">
             {sessionTypeOption?.icon?.src ? (
               <span className="inline-flex h-[1.125rem] w-[1.125rem] items-center justify-center">

package/src/features/chat/components/conversation/chat-conversation-panel.tsx

@@ -34,7 +34,7 @@ export function ChatConversationPanel({
   }
 
   return (
-    <section className="flex-1 min-h-0 flex overflow-hidden bg-background">
+    <section className="relative flex-1 min-h-0 flex overflow-hidden bg-background">
       <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
         <ChatConversationParentBanner />
         <ChatConversationHeaderSection

package/src/features/chat/components/layout/__tests__/chat-sidebar-toolbar.test.tsx

@@ -0,0 +1,48 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import {
+  ChatSidebarDesktopToolbar,
+  ChatSidebarMobileToolbar,
+} from "@/features/chat/components/layout/chat-sidebar-toolbar";
+import type { ChatSessionTypeOption } from "@/features/chat/features/session-type/utils/chat-session-type.utils";
+
+const sessionTypeOptions: ChatSessionTypeOption[] = [
+  { value: "native", label: "Native", icon: null, ready: true },
+  { value: "codex", label: "Codex", icon: null, ready: true },
+];
+
+const toolbarProps = {
+  query: "",
+  defaultSessionType: "native",
+  sessionTypeOptions,
+  nonDefaultSessionTypeOptions: [sessionTypeOptions[1]],
+  selectedNewSessionType: "native",
+  selectedNewSessionTypeOption: sessionTypeOptions[0],
+  isCreateMenuOpen: false,
+  onCreateMenuOpenChange: vi.fn(),
+  onCreateSession: vi.fn(),
+  onSelectNewSessionType: vi.fn(),
+  onQueryChange: vi.fn(),
+};
+
+function searchIconClassName() {
+  return (
+    screen
+      .getByPlaceholderText("Search conversations...")
+      .previousElementSibling?.getAttribute("class") ?? ""
+  );
+}
+
+describe("ChatSidebarToolbar", () => {
+  it("keeps desktop search icon transparent to pointer input", () => {
+    render(<ChatSidebarDesktopToolbar {...toolbarProps} />);
+
+    expect(searchIconClassName()).toContain("pointer-events-none");
+  });
+
+  it("keeps mobile search icon transparent to pointer input", () => {
+    render(<ChatSidebarMobileToolbar {...toolbarProps} />);
+
+    expect(searchIconClassName()).toContain("pointer-events-none");
+  });
+});

package/src/features/chat/components/layout/__tests__/chat-sidebar-utility-menu.test.tsx

@@ -0,0 +1,55 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { describe, expect, it, vi } from "vitest";
+import { ChatSidebarUtilityMenu } from "@/features/chat/components/layout/chat-sidebar-utility-menu";
+
+function renderUtilityMenu() {
+  return render(
+    <MemoryRouter>
+      <ChatSidebarUtilityMenu
+        isOpen
+        onOpenChange={vi.fn()}
+        currentTheme="warm"
+        currentThemeLabel="Warm"
+        themeOptions={[{ value: "warm", label: "Warm" }]}
+        onSelectTheme={vi.fn()}
+        currentLanguage="en"
+        currentLanguageLabel="English"
+        languageOptions={[{ value: "en", label: "English" }]}
+        onSelectLanguage={vi.fn()}
+        onOpenDocs={vi.fn()}
+        onOpenApps={vi.fn()}
+      />
+    </MemoryRouter>,
+  );
+}
+
+function appendComposerFocusTarget(): HTMLElement {
+  const composerShell = document.createElement("div");
+  composerShell.className = "nextclaw-chat-input-bar-shell";
+  const composer = document.createElement("div");
+  composer.setAttribute("contenteditable", "true");
+  composer.setAttribute("role", "textbox");
+  composer.tabIndex = 0;
+  composerShell.appendChild(composer);
+  document.body.appendChild(composerShell);
+  return composer;
+}
+
+describe("ChatSidebarUtilityMenu", () => {
+  it("stays open when the streaming composer restores focus", () => {
+    const composer = appendComposerFocusTarget();
+
+    try {
+      renderUtilityMenu();
+
+      expect(screen.getByRole("button", { name: "Help Docs" })).toBeTruthy();
+
+      fireEvent.focusIn(composer);
+
+      expect(screen.getByRole("button", { name: "Help Docs" })).toBeTruthy();
+    } finally {
+      composer.closest(".nextclaw-chat-input-bar-shell")?.remove();
+    }
+  });
+});

package/src/features/chat/components/layout/chat-sidebar-desktop-layout.tsx

@@ -134,7 +134,6 @@ export function ChatSidebarSessionArea({
   isCollapsed,
   isLoading,
   isProjectFirstView,
-  onCreateSession,
   onSelectMode,
   projectGroups,
   renderSessionItem,
@@ -145,7 +144,6 @@ export function ChatSidebarSessionArea({
   isCollapsed: boolean;
   isLoading: boolean;
   isProjectFirstView: boolean;
-  onCreateSession: (sessionType: string, projectRoot?: string | null) => void;
   onSelectMode: (mode: "time-first" | "project-first") => void;
   projectGroups: ReturnType<typeof groupSessionsByProject>;
   renderSessionItem: (item: NcpSessionListItemView) => JSX.Element;
@@ -183,7 +181,6 @@ export function ChatSidebarSessionArea({
           defaultSessionType={defaultSessionType}
           sessionTypeOptions={sessionTypeOptions}
           renderSessionItem={renderSessionItem}
-          onCreateSession={onCreateSession}
         />
       </div>
     </>