@nextclaw/ui 0.15.0 → 0.15.2

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

@@ -7,12 +7,17 @@ import { ChatConversationHeaderSection } from "@/features/chat/components/conver
 import { useChatQueryStore } from "@/features/chat/stores/ncp-chat-query.store";
 import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
 import { useChatThreadStore } from "@/features/chat/stores/chat-thread.store";
-import type { NcpSessionSummaryView } from "@/shared/lib/api";
+import { viewportLayoutManager } from "@/app/managers/viewport-layout.manager";
+import type { NcpSessionListItemView } from "@/features/chat/features/ncp/hooks/use-ncp-session-list-view";
+import type { NcpSessionSummaryView, SessionEntryView } from "@/shared/lib/api";
 
 const mocks = vi.hoisted(() => ({
   deleteSession: vi.fn(),
   openChildSessionPanel: vi.fn(),
   openSessionCronPanel: vi.fn(),
+  selectSession: vi.fn(),
+  sessionItems: [] as NcpSessionListItemView[],
+  isSessionListLoading: false,
 }));
 
 vi.mock("@/features/chat/components/providers/chat-presenter.provider", () => ({
@@ -22,9 +27,35 @@ vi.mock("@/features/chat/components/providers/chat-presenter.provider", () => ({
       openChildSessionPanel: mocks.openChildSessionPanel,
       openSessionCronPanel: mocks.openSessionCronPanel,
     },
+    chatSessionListManager: {
+      selectSession: mocks.selectSession,
+    },
   }),
 }));
 
+vi.mock("@/features/chat/features/ncp/hooks/use-ncp-session-list-view", () => ({
+  useNcpSessionListView: (params?: { query?: string | null }) => {
+    const query = params?.query?.trim().toLowerCase() ?? "";
+    const items = query
+      ? mocks.sessionItems.filter(({ session }) =>
+          [
+            session.key,
+            session.label ?? "",
+            session.projectRoot ?? "",
+            session.projectName ?? "",
+          ]
+            .join(" ")
+            .toLowerCase()
+            .includes(query),
+        )
+      : mocks.sessionItems;
+    return {
+      isLoading: mocks.isSessionListLoading,
+      items,
+    };
+  },
+}));
+
 vi.mock("@/features/cron", () => ({
   useCronJobs: () => ({ data: { jobs: [] } }),
 }));
@@ -54,6 +85,24 @@ function createSummary(
   };
 }
 
+function createSessionListItem(
+  overrides: Partial<SessionEntryView> & Pick<SessionEntryView, "key">,
+): NcpSessionListItemView {
+  return {
+    session: {
+      createdAt: "2026-06-18T00:00:00.000Z",
+      updatedAt: "2026-06-18T00:00:00.000Z",
+      lastMessageAt: "2026-06-18T00:00:00.000Z",
+      readAt: "2026-06-18T00:00:00.000Z",
+      sessionType: "native",
+      sessionTypeMutable: false,
+      messageCount: 1,
+      ...overrides,
+    },
+    runStatus: overrides.status === "running" ? "running" : undefined,
+  };
+}
+
 function renderHeaderSection() {
   const queryClient = new QueryClient({
     defaultOptions: {
@@ -73,6 +122,9 @@ describe("ChatConversationHeaderSection", () => {
     mocks.deleteSession.mockReset();
     mocks.openChildSessionPanel.mockReset();
     mocks.openSessionCronPanel.mockReset();
+    mocks.selectSession.mockReset();
+    mocks.isSessionListLoading = false;
+    viewportLayoutManager.resetForTests();
     useChatSessionListStore.persist.setOptions({
       storage: new MemoryPersistStorage(),
     });
@@ -129,6 +181,18 @@ describe("ChatConversationHeaderSection", () => {
         } as never,
       },
     });
+    mocks.sessionItems = [
+      createSessionListItem({
+        key: "parent-session-1",
+        label: "Parent Task",
+      }),
+      createSessionListItem({
+        key: "session:ncp-2",
+        label: "Background Task",
+        lastMessageAt: "2026-06-18T01:00:00.000Z",
+        readAt: "2026-06-18T01:00:00.000Z",
+      }),
+    ];
   });
 
   it("shows the child-session entry from session query state before a tool card opens it", async () => {
@@ -142,4 +206,111 @@ describe("ChatConversationHeaderSection", () => {
       activeChildSessionKey: "child-session-1",
     });
   });
+
+  it("uses the collapsed desktop title as a session switcher", async () => {
+    const user = userEvent.setup();
+    viewportLayoutManager.setSidebarCollapsed(true);
+
+    renderHeaderSection();
+
+    await user.click(screen.getByRole("button", { name: /Switch session/ }));
+    await user.click(screen.getByRole("button", { name: /Background Task/ }));
+
+    expect(mocks.selectSession).toHaveBeenCalledWith("session:ncp-2");
+  });
+
+  it("keeps the desktop title plain while the sidebar is expanded", () => {
+    renderHeaderSection();
+
+    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 () => {
+    const user = userEvent.setup();
+    viewportLayoutManager.setSidebarCollapsed(true);
+    useChatSessionListStore.setState({
+      snapshot: {
+        ...useChatSessionListStore.getState().snapshot,
+        selectedSessionKey: null,
+      },
+    });
+    useChatThreadStore.setState({
+      snapshot: {
+        ...useChatThreadStore.getState().snapshot,
+        sessionKey: null,
+      },
+    });
+
+    renderHeaderSection();
+
+    await user.click(screen.getByRole("button", { name: /Switch session/ }));
+    await user.click(screen.getByRole("button", { name: /Background Task/ }));
+
+    expect(mocks.selectSession).toHaveBeenCalledWith("session:ncp-2");
+  });
+
+  it("filters the collapsed title switcher with a local search query", async () => {
+    const user = userEvent.setup();
+    viewportLayoutManager.setSidebarCollapsed(true);
+
+    renderHeaderSection();
+
+    await user.click(screen.getByRole("button", { name: /Switch session/ }));
+    const searchInput = screen.getByRole("textbox", {
+      name: "Search session key / label",
+    });
+    await user.type(searchInput, "Background");
+    await user.click(screen.getByRole("button", { name: /Background Task/ }));
+
+    expect(mocks.selectSession).toHaveBeenCalledWith("session:ncp-2");
+
+    await user.click(screen.getByRole("button", { name: /Switch session/ }));
+    await user.type(
+      screen.getByRole("textbox", { name: "Search session key / label" }),
+      "missing",
+    );
+
+    expect(screen.getByText("No matching sessions")).toBeTruthy();
+  });
 });

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

@@ -2,6 +2,7 @@ import { useMemo } from "react";
 import { ChatConversationHeader } from "@/features/chat/components/conversation/chat-conversation-header";
 import { ChatSessionHeaderActions } from "@/features/chat/features/session/components/session-header/chat-session-header-actions";
 import { ChatSessionProjectBadge } from "@/features/chat/features/session/components/session-header/chat-session-project-badge";
+import { ChatSessionTitleSwitcher } from "@/features/chat/features/session/components/session-header/chat-session-title-switcher";
 import { usePresenter } from "@/features/chat/components/providers/chat-presenter.provider";
 import { SessionContextIconNode } from "@/features/chat/features/session/components/session-context-icon";
 import { useChatConversationWorkspaceState } from "@/features/chat/features/workspace/hooks/use-chat-conversation-workspace-state";
@@ -52,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);
@@ -89,6 +92,13 @@ export function ChatConversationHeaderSection({
     <ChatConversationHeader
       layoutMode={layoutMode}
       title={sessionHeaderTitle}
+      titleContent={
+        <ChatSessionTitleSwitcher
+          layoutMode={layoutMode}
+          selectedSessionKey={sessionKey}
+          title={sessionHeaderTitle}
+        />
+      }
       shouldShow={shouldShowSessionHeader}
       onBackToList={onBackToList}
       leading={
@@ -102,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-header.tsx

@@ -41,6 +41,7 @@ export function ChatConversationHeader({
   sessionTypeBadge,
   shouldShow,
   title,
+  titleContent,
 }: {
   layoutMode: "desktop" | "mobile";
   actions?: ReactNode;
@@ -50,6 +51,7 @@ export function ChatConversationHeader({
   sessionTypeBadge?: ReactNode;
   shouldShow: boolean;
   title: string;
+  titleContent?: ReactNode;
 }) {
   const isMobileLayout = layoutMode === "mobile";
 
@@ -78,9 +80,11 @@ export function ChatConversationHeader({
           />
         ) : null}
         {leading}
-        <span className="text-sm font-medium text-foreground truncate">
-          {title}
-        </span>
+        {titleContent ?? (
+          <span className="text-sm font-medium text-foreground truncate">
+            {title}
+          </span>
+        )}
         {sessionTypeBadge}
         {projectBadge}
       </div>

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>
     </>

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

@@ -16,7 +16,6 @@ import {
   SIDEBAR_RAIL_CONTROL_CLASS,
   SIDEBAR_RAIL_ICON_CLASS,
   SIDEBAR_RAIL_ITEM_GAP_CLASS,
-  SIDEBAR_RAIL_PRIMARY_SURFACE_CLASS,
   SIDEBAR_RAIL_SURFACE_CLASS,
 } from "@/app/components/layout/sidebar-rail.styles";
 
@@ -150,7 +149,7 @@ export function ChatSidebarDesktopToolbar(props: ChatSidebarToolbarProps) {
             label={t("chatSidebarNewTask")}
             className={cn(
               SIDEBAR_RAIL_CONTROL_CLASS,
-              SIDEBAR_RAIL_PRIMARY_SURFACE_CLASS,
+              SIDEBAR_RAIL_SURFACE_CLASS,
             )}
             onClick={() => {
               onCreateMenuOpenChange(false);
@@ -259,7 +258,7 @@ export function ChatSidebarDesktopToolbar(props: ChatSidebarToolbarProps) {
 
       <div className="px-4 pb-3">
         <div className="relative">
-          <Search className="absolute left-3 top-2.5 h-3.5 w-3.5 text-muted-foreground/70" />
+          <Search className="pointer-events-none absolute left-3 top-2.5 h-3.5 w-3.5 text-muted-foreground/70" />
           <Input
             value={query}
             onChange={(event) => onQueryChange(event.target.value)}
@@ -294,7 +293,7 @@ export function ChatSidebarMobileToolbar(props: ChatSidebarToolbarProps) {
     <div className="px-4 pb-2 pt-1">
       <div className="flex items-center gap-2">
         <div className="relative min-w-0 flex-1">
-          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground/70" />
+          <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground/70" />
           <Input
             value={query}
             onChange={(event) => onQueryChange(event.target.value)}

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

@@ -34,10 +34,7 @@ import {
   type LucideIcon,
 } from "lucide-react";
 
-type ChatSidebarUtilityOption<Value extends string> = {
-  value: Value;
-  label: string;
-};
+type ChatSidebarUtilityOption<Value extends string> = { value: Value; label: string };
 
 type ChatSidebarUtilityMenuProps = {
   isOpen: boolean;
@@ -55,6 +52,12 @@ type ChatSidebarUtilityMenuProps = {
   collapsed?: boolean;
 };
 
+function isChatComposerFocusTarget(target: EventTarget | null): boolean {
+  return target instanceof HTMLElement && Boolean(
+    target.closest('.nextclaw-chat-input-bar-shell [role="textbox"][contenteditable="true"]'),
+  );
+}
+
 export function ChatSidebarUtilityMenu({
   isOpen,
   onOpenChange,
@@ -70,16 +73,6 @@ export function ChatSidebarUtilityMenu({
   onOpenApps,
   collapsed = false,
 }: ChatSidebarUtilityMenuProps) {
-  const handleOpenDocs = () => {
-    onOpenDocs();
-    onOpenChange(false);
-  };
-
-  const handleOpenApps = () => {
-    onOpenApps();
-    onOpenChange(false);
-  };
-
   return (
     <Popover open={isOpen} onOpenChange={onOpenChange}>
       {collapsed ? (
@@ -129,6 +122,11 @@ export function ChatSidebarUtilityMenu({
         side={collapsed ? "right" : "top"}
         align={collapsed ? "end" : "start"}
         className="w-64 p-2"
+        onFocusOutside={(event) => {
+          if (isChatComposerFocusTarget(event.detail.originalEvent.target)) {
+            event.preventDefault();
+          }
+        }}
       >
         <div className="space-y-1">
           <NavLink
@@ -139,22 +137,23 @@ export function ChatSidebarUtilityMenu({
             <Settings className="h-4 w-4 text-muted-foreground/70" />
             <span className="flex-1 text-left">{t("settings")}</span>
           </NavLink>
-          <button
-            type="button"
-            onClick={handleOpenDocs}
-            className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-foreground transition-colors hover:bg-gray-200/60 hover:text-gray-900"
-          >
-            <BookOpen className="h-4 w-4 text-muted-foreground/70" />
-            <span className="flex-1 text-left">{t("docBrowserHelp")}</span>
-          </button>
-          <button
-            type="button"
-            onClick={handleOpenApps}
-            className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-foreground transition-colors hover:bg-gray-200/60 hover:text-gray-900"
-          >
-            <Boxes className="h-4 w-4 text-muted-foreground/70" />
-            <span className="flex-1 text-left">{t("appsTitle")}</span>
-          </button>
+          {[
+            { key: "docs", icon: BookOpen, label: t("docBrowserHelp"), action: onOpenDocs },
+            { key: "apps", icon: Boxes, label: t("appsTitle"), action: onOpenApps },
+          ].map(({ key, icon: Icon, label, action }) => (
+            <button
+              key={key}
+              type="button"
+              onClick={() => {
+                action();
+                onOpenChange(false);
+              }}
+              className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-foreground transition-colors hover:bg-gray-200/60 hover:text-gray-900"
+            >
+              <Icon className="h-4 w-4 text-muted-foreground/70" />
+              <span className="flex-1 text-left">{label}</span>
+            </button>
+          ))}
         </div>
 
         <div className="my-2 h-px bg-border" />

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

@@ -105,7 +105,7 @@ export function ChatSidebar({
   const { language, setLanguage } = useI18n();
   const { theme, setTheme } = useTheme();
   const currentThemeLabel = t(
-    THEME_OPTIONS.find((o) => o.value === theme)?.labelKey ?? "themeNatural",
+    THEME_OPTIONS.find((o) => o.value === theme)?.labelKey ?? "themeWork",
   );
   const currentLanguageLabel =
     LANGUAGE_OPTIONS.find((o) => o.value === language)?.label ?? language;
@@ -132,6 +132,14 @@ export function ChatSidebar({
       ),
     [agentsQuery.data?.agents],
   );
+  const pinnedSessionKeys = useMemo(
+    () => new Set(listSnapshot.pinnedSessionKeys),
+    [listSnapshot.pinnedSessionKeys],
+  );
+  const pinnedProjectRoots = useMemo(
+    () => new Set(listSnapshot.pinnedProjectRoots),
+    [listSnapshot.pinnedProjectRoots],
+  );
   const sortedItems = useMemo(
     () => sortSessionItemsByActivityAtDesc(items),
     [items],
@@ -140,10 +148,13 @@ export function ChatSidebar({
     () => groupChildSessionsByParentKey(items),
     [items],
   );
-  const groups = useMemo(() => groupSessionsByDate(sortedItems), [sortedItems]);
+  const groups = useMemo(
+    () => groupSessionsByDate(sortedItems, pinnedSessionKeys),
+    [pinnedSessionKeys, sortedItems],
+  );
   const projectGroups = useMemo(
-    () => groupSessionsByProject(sortedItems),
-    [sortedItems],
+    () => groupSessionsByProject(sortedItems, pinnedSessionKeys, pinnedProjectRoots),
+    [pinnedProjectRoots, pinnedSessionKeys, sortedItems],
   );
   const sessionTypeOptions = useMemo(
     () => buildSessionTypeOptions(sessionTypesData?.options ?? []),
@@ -200,6 +211,7 @@ export function ChatSidebar({
       draftLabel={draftLabel}
       savingSessionKey={savingSessionKey}
       sessionTypeOptions={sessionTypeOptions}
+      isPinned={pinnedSessionKeys.has(item.session.key)}
       sessionTitle={getSessionTitle}
       onSelectSession={presenter.chatSessionListManager.selectSession}
       onOpenChildSessions={(parentSessionKey, activeChildSessionKey) =>
@@ -212,6 +224,9 @@ export function ChatSidebar({
       onDraftLabelChange={setDraftLabel}
       onSaveSessionLabel={saveSessionLabel}
       onCancelEditingSessionLabel={cancelEditingSessionLabel}
+      onTogglePinned={() =>
+        presenter.chatSessionListManager.toggleSessionPinned(item.session.key)
+      }
     />
   );
   const createSessionAndOpenIfNeeded = (
@@ -233,9 +248,9 @@ export function ChatSidebar({
           : shouldCollapse
             ? cn(
                 SIDEBAR_RAIL_WIDTH_CLASS,
-                "shrink-0 border-r border-border/70",
+                "shrink-0",
               )
-            : "w-[280px] shrink-0 border-r border-border/70",
+            : "w-[280px] shrink-0",
       )}
       data-sidebar-collapsed={shouldCollapse ? "true" : "false"}
     >
@@ -295,7 +310,6 @@ export function ChatSidebar({
         isCollapsed={shouldCollapse}
         isLoading={isLoading}
         isProjectFirstView={isProjectFirstView}
-        onCreateSession={createSessionAndOpenIfNeeded}
         onSelectMode={presenter.chatSessionListManager.setListMode}
         projectGroups={projectGroups}
         renderSessionItem={renderSessionItem}