@nextclaw/ui 0.15.1 → 0.15.2

package/src/features/chat/features/message/components/chat-inline-panel-app-card.tsx

@@ -2,13 +2,17 @@ import { useEffect, useId, useMemo, useRef } from 'react';
 import type { ChatPanelAppCardViewModel } from '@nextclaw/agent-chat-ui';
 import { AppWindow, Maximize2 } from 'lucide-react';
 import { getPresenter } from '@/app/presenters/app.presenter';
-import { findPanelAppEntryByDisplayId, usePanelApps } from '@/features/panel-apps';
+import {
+  PANEL_APP_IFRAME_SANDBOX,
+  findPanelAppEntryByDisplayId,
+  focusPanelAppIframe,
+  usePanelApps,
+} from '@/features/panel-apps';
 import { createPanelAppRightPanelResourceTarget } from '@/features/right-panel-resources';
 import {
   createInlinePanelAppCardUrl,
   createFallbackPanelAppContentPath,
   createInlinePanelAppTab,
-  PANEL_APP_INLINE_IFRAME_SANDBOX,
 } from '@/features/chat/features/message/utils/chat-inline-panel-app-card.utils';
 import { useDocBrowser } from '@/shared/components/doc-browser';
 import { IconActionButton } from '@/shared/components/ui/actions/icon-action-button';
@@ -98,7 +102,7 @@ export function ChatInlinePanelAppCard({
         </div>
         {showExpandAction ? (
           <IconActionButton
-            className="h-7 w-7 rounded-md text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+            size="md"
             icon={<Maximize2 className="h-3.5 w-3.5" />}
             label={t('chatPanelCardExpand')}
             onClick={openExpanded}
@@ -113,8 +117,9 @@ export function ChatInlinePanelAppCard({
           key={iframeInstanceId}
           src={cardUrl}
           title={title}
-          sandbox={PANEL_APP_INLINE_IFRAME_SANDBOX}
-          scrolling="auto"
+          sandbox={PANEL_APP_IFRAME_SANDBOX}
+          tabIndex={0}
+          onPointerOver={() => focusPanelAppIframe(iframeRef.current)}
           className="h-full w-full border-0 bg-card"
         />
       </div>

package/src/features/chat/features/message/utils/chat-inline-panel-app-card.utils.ts

@@ -4,17 +4,6 @@ import {
 } from '@/features/right-panel-resources';
 import type { DocBrowserTab } from '@/shared/components/doc-browser/doc-browser-context';
 
-export const PANEL_APP_INLINE_IFRAME_SANDBOX = [
-  'allow-scripts',
-  'allow-forms',
-  'allow-modals',
-  'allow-popups',
-  'allow-popups-to-escape-sandbox',
-  'allow-downloads',
-  'allow-pointer-lock',
-  'allow-presentation',
-].join(' ');
-
 const PANEL_APP_INLINE_CARD_SEARCH_PARAMS = {
   nextclawDisplayMode: 'card',
   nextclawPlacement: 'inline',

package/src/features/chat/features/session/components/__tests__/chat-sidebar-project-groups.test.tsx

@@ -0,0 +1,116 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { ChatSidebarProjectGroups } from "@/features/chat/features/session/components/chat-sidebar-project-groups";
+import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
+
+const mocks = vi.hoisted(() => ({
+  createSession: vi.fn(),
+  toggleProjectCollapsed: vi.fn(),
+  toggleProjectPinned: vi.fn(),
+}));
+
+vi.mock("@/features/chat/components/providers/chat-presenter.provider", () => ({
+  usePresenter: () => ({
+    chatSessionListManager: mocks,
+  }),
+}));
+
+const projectGroup = {
+  projectRoot: "/tmp/analysis-project",
+  projectName: "analysis-project",
+  items: [
+    {
+      session: {
+        key: "session:analysis",
+        createdAt: "2026-07-12T00:00:00.000Z",
+        updatedAt: "2026-07-12T00:00:00.000Z",
+        sessionType: "native",
+        sessionTypeMutable: false,
+        messageCount: 1,
+      },
+    },
+  ],
+  latestUpdatedAt: 1,
+  isPinned: false,
+};
+
+function renderProjectGroups(isPinned = false) {
+  return render(
+    <ChatSidebarProjectGroups
+      groups={[{ ...projectGroup, isPinned }]}
+      defaultSessionType="native"
+      sessionTypeOptions={[
+        { value: "native", label: "Native", icon: null, ready: true },
+      ]}
+      renderSessionItem={() => <div>Project session</div>}
+    />,
+  );
+}
+
+describe("ChatSidebarProjectGroups", () => {
+  beforeEach(() => {
+    mocks.createSession.mockReset();
+    mocks.toggleProjectCollapsed.mockReset();
+    mocks.toggleProjectPinned.mockReset();
+    useChatSessionListStore.setState({
+      snapshot: {
+        ...useChatSessionListStore.getState().snapshot,
+        collapsedProjectRoots: [],
+        selectedSessionKey: "session:current",
+      },
+    });
+    mocks.toggleProjectCollapsed.mockImplementation((projectRoot: string) => {
+      useChatSessionListStore.getState().setSnapshot({
+        collapsedProjectRoots: [projectRoot],
+      });
+    });
+  });
+
+  it("keeps the project header as the full-width folder row and collapses its sessions", () => {
+    renderProjectGroups();
+
+    const header = screen.getByLabelText("Collapse project");
+    expect(header.parentElement?.className).toContain("h-10");
+    expect(header.parentElement?.className).toContain("hover:bg-gray-200/60");
+    expect(header.parentElement?.className).not.toContain("focus-within:bg");
+    expect(screen.getByText("analysis-project").nextElementSibling?.tagName).toBe("svg");
+
+    fireEvent.click(header);
+
+    expect(mocks.toggleProjectCollapsed).toHaveBeenCalledWith(
+      "/tmp/analysis-project",
+    );
+    expect(useChatSessionListStore.getState().snapshot.selectedSessionKey).toBe(
+      "session:current",
+    );
+    expect(screen.queryByText("Project session")).toBeNull();
+  });
+
+  it("keeps project creation and pinning in one trailing action cluster", () => {
+    renderProjectGroups();
+
+    fireEvent.click(screen.getByLabelText("Pin project"));
+
+    expect(mocks.toggleProjectPinned).toHaveBeenCalledWith(
+      "/tmp/analysis-project",
+    );
+    expect(screen.getByLabelText("New Task · analysis-project")).not.toBeNull();
+  });
+
+  it("uses the same pin control to show and clear the project pin state", () => {
+    renderProjectGroups(true);
+
+    const unpinButton = screen.getByLabelText("Unpin project");
+    const pinIcon = unpinButton.querySelector("svg");
+
+    expect(pinIcon?.getAttribute("class")).toContain("fill-current");
+    expect(pinIcon?.getAttribute("class")).toContain("text-foreground");
+    expect(document.querySelectorAll("svg.fill-current")).toHaveLength(1);
+
+    fireEvent.click(unpinButton);
+
+    expect(mocks.toggleProjectPinned).toHaveBeenCalledWith(
+      "/tmp/analysis-project",
+    );
+  });
+});

package/src/features/chat/features/session/components/chat-sidebar-project-groups.tsx

@@ -1,11 +1,13 @@
 import { useMemo, useState, type ReactNode } from 'react';
-import { Plus } from 'lucide-react';
+import { ChevronDown, ChevronRight, Folder, Pin, Plus } from 'lucide-react';
+import { usePresenter } from '@/features/chat/components/providers/chat-presenter.provider';
 import { ChatSessionTypeMenu } from "@/features/chat/features/session-type/components/chat-session-type-menu";
 import { Popover, PopoverContent, PopoverTrigger } from '@/shared/components/ui/popover';
 import { IconActionButton } from '@/shared/components/ui/actions/icon-action-button';
 import type { ChatSessionTypeOption } from "@/features/chat/features/session-type/utils/chat-session-type.utils";
 import type { NcpSessionListItemView } from '@/features/chat/features/ncp/hooks/use-ncp-session-list-view';
 import type { ChatSidebarProjectGroup } from '@/features/chat/features/session/utils/chat-sidebar-session-groups.utils';
+import { useChatSessionListStore } from '@/features/chat/stores/chat-session-list.store';
 import { t } from '@/shared/lib/i18n';
 
 export type { ChatSidebarProjectGroup };
@@ -17,7 +19,6 @@ type ChatSidebarProjectGroupsProps = {
   defaultSessionType: string;
   sessionTypeOptions: SessionTypeOption[];
   renderSessionItem: (item: NcpSessionListItemView) => ReactNode;
-  onCreateSession: (sessionType: string, projectRoot: string) => void;
 };
 
 function resolveProjectGroupDefaultSessionType(
@@ -31,7 +32,11 @@ function resolveProjectGroupDefaultSessionType(
 }
 
 export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
-  const { groups, defaultSessionType, sessionTypeOptions, renderSessionItem, onCreateSession } = props;
+  const { groups, defaultSessionType, sessionTypeOptions, renderSessionItem } = props;
+  const presenter = usePresenter();
+  const collapsedProjectRoots = useChatSessionListStore(
+    (state) => state.snapshot.collapsedProjectRoots,
+  );
   const [openProjectRoot, setOpenProjectRoot] = useState<string | null>(null);
   const preferredSessionType = useMemo(
     () => resolveProjectGroupDefaultSessionType(defaultSessionType, sessionTypeOptions),
@@ -43,62 +48,119 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
     <div className="space-y-3">
       {groups.map((group) => {
         const actionLabel = `${t('chatSidebarNewTask')} · ${group.projectName}`;
+        const isCollapsed = collapsedProjectRoots.includes(group.projectRoot);
+        const pinLabel = t(
+          group.isPinned ? 'chatSidebarUnpinProject' : 'chatSidebarPinProject',
+        );
 
         return (
           <div key={group.projectRoot}>
-            <div className="flex items-center justify-between gap-2 px-2 py-0.5">
-              <div className="flex min-w-0 items-center gap-1.5">
-                <div
-                  className="truncate text-[11px] font-medium uppercase tracking-wider text-muted-foreground"
+            <div className="group/project relative h-10 rounded-lg px-2 text-muted-foreground transition-colors hover:bg-gray-200/60 hover:text-gray-900">
+              <button
+                type="button"
+                aria-expanded={!isCollapsed}
+                aria-label={t(
+                  isCollapsed
+                    ? 'chatSidebarExpandProject'
+                    : 'chatSidebarCollapseProject',
+                )}
+                className="flex h-full w-full min-w-0 items-center gap-1.5 pr-14 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
+                onClick={() =>
+                  presenter.chatSessionListManager.toggleProjectCollapsed(
+                    group.projectRoot,
+                  )
+                }
+              >
+                <Folder className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
+                <span
+                  className="truncate text-[11px] font-medium uppercase tracking-wider"
                   title={group.projectRoot}
                 >
                   {group.projectName}
-                </div>
+                </span>
+                {isCollapsed ? (
+                  <ChevronRight
+                    className="h-3.5 w-3.5 shrink-0"
+                    aria-hidden="true"
+                  />
+                ) : (
+                  <ChevronDown
+                    className="h-3.5 w-3.5 shrink-0"
+                    aria-hidden="true"
+                  />
+                )}
                 <span className="shrink-0 text-[10px] text-muted-foreground/70">
                   {group.items.length}
                 </span>
-              </div>
-              {supportsSessionTypeChoice ? (
-                <Popover
-                  open={openProjectRoot === group.projectRoot}
-                  onOpenChange={(nextOpen) => {
-                    setOpenProjectRoot(nextOpen ? group.projectRoot : null);
-                  }}
-                >
-                  <PopoverTrigger asChild>
-                    <IconActionButton
-                      icon={<Plus className="h-3.5 w-3.5" />}
-                      label={actionLabel}
-                      tooltip={false}
-                      className="h-7 w-7 shrink-0 rounded-lg text-muted-foreground hover:bg-gray-200/60 hover:text-gray-900"
-                    />
-                  </PopoverTrigger>
-                  <PopoverContent
-                    align="end"
-                    className="w-56 rounded-2xl border border-border bg-popover p-1.5 text-popover-foreground shadow-[0_24px_60px_-28px_rgba(15,23,42,0.38)]"
+              </button>
+              <div className="pointer-events-none absolute right-2 top-1/2 flex -translate-y-1/2 items-center opacity-0 transition-opacity group-hover/project:pointer-events-auto group-hover/project:opacity-100 focus-within:pointer-events-auto focus-within:opacity-100">
+                {supportsSessionTypeChoice ? (
+                  <Popover
+                    open={openProjectRoot === group.projectRoot}
+                    onOpenChange={(nextOpen) => {
+                      setOpenProjectRoot(nextOpen ? group.projectRoot : null);
+                    }}
                   >
-                    <ChatSessionTypeMenu
-                      options={sessionTypeOptions}
-                      selectedSessionType={preferredSessionType}
-                      onSelect={(sessionType) => {
-                        onCreateSession(sessionType, group.projectRoot);
-                        setOpenProjectRoot(null);
-                      }}
-                    />
-                  </PopoverContent>
-                </Popover>
-              ) : (
+                    <PopoverTrigger asChild>
+                      <IconActionButton
+                        icon={<Plus className="h-3.5 w-3.5" />}
+                        label={actionLabel}
+                      />
+                    </PopoverTrigger>
+                    <PopoverContent
+                      align="end"
+                      className="w-56 rounded-2xl border border-border bg-popover p-1.5 text-popover-foreground shadow-[0_24px_60px_-28px_rgba(15,23,42,0.38)]"
+                    >
+                      <ChatSessionTypeMenu
+                        options={sessionTypeOptions}
+                        selectedSessionType={preferredSessionType}
+                        onSelect={(sessionType) => {
+                          presenter.chatSessionListManager.createSession(
+                            sessionType,
+                            group.projectRoot,
+                          );
+                          setOpenProjectRoot(null);
+                        }}
+                      />
+                    </PopoverContent>
+                  </Popover>
+                ) : (
+                  <IconActionButton
+                    icon={<Plus className="h-3.5 w-3.5" />}
+                    label={actionLabel}
+                    onClick={() =>
+                      presenter.chatSessionListManager.createSession(
+                        preferredSessionType,
+                        group.projectRoot,
+                      )
+                    }
+                  />
+                )}
                 <IconActionButton
-                  icon={<Plus className="h-3.5 w-3.5" />}
-                  label={actionLabel}
-                  className="h-7 w-7 shrink-0 rounded-lg text-muted-foreground hover:bg-gray-200/60 hover:text-gray-900"
-                  onClick={() => onCreateSession(preferredSessionType, group.projectRoot)}
+                  icon={
+                    <Pin
+                      className={
+                        group.isPinned
+                          ? 'h-3.5 w-3.5 fill-current text-foreground'
+                          : 'h-3.5 w-3.5'
+                      }
+                    />
+                  }
+                  label={pinLabel}
+                  tooltipSide="right"
+                  onClick={() =>
+                    presenter.chatSessionListManager.toggleProjectPinned(
+                      group.projectRoot,
+                    )
+                  }
                 />
-              )}
-            </div>
-            <div className="space-y-0.5 pl-2">
-              {group.items.map(renderSessionItem)}
+              </div>
             </div>
+            {isCollapsed ? null : (
+              <div className="mt-0.5 space-y-0.5 pl-2">
+                {group.items.map(renderSessionItem)}
+              </div>
+            )}
           </div>
         );
       })}

package/src/features/chat/features/session/components/chat-sidebar-session-entry.tsx

@@ -22,6 +22,7 @@ export function ChatSidebarSessionEntry(props: {
   draftLabel: string;
   savingSessionKey: string | null;
   sessionTypeOptions: ChatSessionTypeOption[];
+  isPinned: boolean;
   sessionTitle: (session: SessionEntryView) => string;
   onSelectSession: (sessionKey: string) => void;
   onOpenChildSessions: (
@@ -32,6 +33,7 @@ export function ChatSidebarSessionEntry(props: {
   onDraftLabelChange: (value: string) => void;
   onSaveSessionLabel: (session: SessionEntryView) => void;
   onCancelEditingSessionLabel: () => void;
+  onTogglePinned: () => void;
 }) {
   const {
     item,
@@ -43,6 +45,7 @@ export function ChatSidebarSessionEntry(props: {
     draftLabel,
     savingSessionKey,
     sessionTypeOptions,
+    isPinned,
     sessionTitle,
     onSelectSession,
     onOpenChildSessions,
@@ -50,6 +53,7 @@ export function ChatSidebarSessionEntry(props: {
     onDraftLabelChange,
     onSaveSessionLabel,
     onCancelEditingSessionLabel,
+    onTogglePinned,
   } = props;
   const { session, runStatus } = item;
   const active = selectedSessionKey === session.key;
@@ -80,6 +84,7 @@ export function ChatSidebarSessionEntry(props: {
       })}
       runStatus={runStatus}
       context={resolveSessionContextView(session, sessionTypeOptions)}
+      isPinned={isPinned}
       title={sessionTitle(session)}
       previewText={previewText}
       trailingText={formatSessionListTime(
@@ -104,6 +109,7 @@ export function ChatSidebarSessionEntry(props: {
       onDraftLabelChange={onDraftLabelChange}
       onSave={() => onSaveSessionLabel(session)}
       onCancel={onCancelEditingSessionLabel}
+      onTogglePinned={onTogglePinned}
     />
   );
 }

package/src/features/chat/features/session/components/chat-sidebar-session-item.tsx

@@ -7,7 +7,7 @@ import { type SessionContextView } from '@/features/chat/features/session/utils/
 import type { SessionRunStatus } from '@/features/chat/types/session-run-status.types';
 import { cn } from '@/shared/lib/utils';
 import { t } from '@/shared/lib/i18n';
-import { Check, GitBranch, Pencil, X } from 'lucide-react';
+import { Check, GitBranch, Pencil, Pin, X } from 'lucide-react';
 
 type ChatSidebarSessionItemProps = {
   sessionKey: string;
@@ -15,6 +15,7 @@ type ChatSidebarSessionItemProps = {
   showUnreadDot: boolean;
   runStatus?: SessionRunStatus;
   context: SessionContextView;
+  isPinned: boolean;
   title: string;
   previewText: string;
   trailingText: string;
@@ -31,6 +32,7 @@ type ChatSidebarSessionItemProps = {
   onDraftLabelChange: (value: string) => void;
   onSave: () => void | Promise<void>;
   onCancel: () => void;
+  onTogglePinned: () => void;
 };
 
 type ChatSidebarSessionEditingViewProps = Pick<
@@ -72,7 +74,6 @@ function ChatSidebarSessionEditingView({
             icon={<Check className="h-3.5 w-3.5" />}
             label={t('save')}
             tooltip={false}
-            className="h-7 w-7 rounded-lg text-gray-500 hover:bg-white hover:text-gray-900"
             onClick={() => void onSave()}
             disabled={isSaving}
           />
@@ -80,7 +81,6 @@ function ChatSidebarSessionEditingView({
             icon={<X className="h-3.5 w-3.5" />}
             label={t('cancel')}
             tooltip={false}
-            className="h-7 w-7 rounded-lg text-gray-500 hover:bg-white hover:text-gray-900"
             onClick={onCancel}
             disabled={isSaving}
           />
@@ -100,6 +100,7 @@ function ChatSidebarSessionDisplayView({
   showUnreadDot,
   runStatus,
   context,
+  isPinned,
   title,
   previewText,
   trailingText,
@@ -109,14 +110,15 @@ function ChatSidebarSessionDisplayView({
   childSessionCount = 0,
   onSelect,
   onOpenChildSessions,
-  onStartEditing
+  onStartEditing,
+  onTogglePinned
 }: ChatSidebarSessionDisplayViewProps) {
-  const trailingControlsClassName = childSessionCount > 0 && onOpenChildSessions ? 'pr-14' : 'pr-6';
+  const trailingControlsClassName = childSessionCount > 0 && onOpenChildSessions ? 'pr-20' : 'pr-12';
 
   return (
     <div className="group/session relative">
       <button type="button" onClick={onSelect} className="w-full text-left">
-        <div className={cn('flex min-w-0 items-start', trailingControlsClassName)}>
+        <div className={cn('flex min-h-6 min-w-0 items-center', trailingControlsClassName)}>
           <span className="flex min-w-0 items-center gap-1.5">
             {agentId?.trim() && agentId.trim().toLowerCase() !== 'main' ? (
               <AgentAvatar
@@ -126,7 +128,7 @@ function ChatSidebarSessionDisplayView({
                 className="h-5 w-5 shrink-0"
               />
             ) : null}
-            <span className="truncate font-medium">{title}</span>
+            <span className="truncate leading-6 font-medium">{title}</span>
             {context.label ? (
               <span
                 className={cn(
@@ -140,7 +142,7 @@ function ChatSidebarSessionDisplayView({
               </span>
             ) : null}
             {context.icon ? (
-              <span className="inline-flex h-[1.125rem] w-[1.125rem] shrink-0 items-center justify-center">
+              <span className="inline-flex h-5 w-5 shrink-0 items-center justify-center">
                 <SessionContextIconNode icon={context.icon} className={active ? 'text-gray-700' : 'text-gray-500'} />
               </span>
             ) : null}
@@ -168,7 +170,7 @@ function ChatSidebarSessionDisplayView({
             onOpenChildSessions();
           }}
           className={cn(
-            'absolute right-6 top-0 inline-flex h-5 items-center gap-1 rounded-md px-1.5 text-[10px] font-medium text-gray-400 transition-all hover:bg-white hover:text-gray-900',
+            'absolute right-12 top-0 inline-flex h-6 items-center gap-1 rounded-md px-1.5 text-[10px] font-medium text-muted-foreground transition-colors hover:bg-black/10 hover:text-foreground',
             active
               ? 'opacity-100'
               : 'opacity-0 group-hover/session:opacity-100 group-focus-within/session:opacity-100'
@@ -181,23 +183,41 @@ function ChatSidebarSessionDisplayView({
         </button>
       ) : null}
       {runStatus ? (
-        <span className="absolute right-0 top-0 inline-flex h-5 w-5 items-center justify-center transition-opacity group-hover/session:opacity-0 group-focus-within/session:opacity-0">
+        <span className="absolute right-0 top-0 inline-flex h-6 w-6 items-center justify-center transition-opacity group-hover/session:opacity-0 group-focus-within/session:opacity-0">
           <SessionRunBadge status={runStatus} />
         </span>
       ) : null}
-      <IconActionButton
-        icon={<Pencil className="h-3 w-3" />}
-        label={t('edit')}
-        tooltip={false}
-        onClick={(event) => {
-          event.stopPropagation();
-          onStartEditing();
-        }}
-        className={cn(
-          'absolute right-0 top-0 inline-flex h-5 w-5 items-center justify-center rounded-md text-gray-400 transition-all hover:bg-white hover:text-gray-900',
-          'opacity-0 group-hover/session:opacity-100 group-focus-within/session:opacity-100'
-        )}
-      />
+      <div className="absolute right-0 top-0 flex h-6 items-center gap-0.5 opacity-0 transition-opacity group-hover/session:opacity-100 group-focus-within/session:opacity-100">
+        <IconActionButton
+          size="sm"
+          tone="strong"
+          icon={
+            <Pin
+              className={cn(
+                'h-3.5 w-3.5',
+                isPinned && 'fill-current text-foreground',
+              )}
+            />
+          }
+          label={t(isPinned ? 'chatSidebarUnpinSession' : 'chatSidebarPinSession')}
+          tooltipSide="right"
+          onClick={(event) => {
+            event.stopPropagation();
+            onTogglePinned();
+          }}
+        />
+        <IconActionButton
+          size="sm"
+          tone="strong"
+          icon={<Pencil className="h-3.5 w-3.5" />}
+          label={t('edit')}
+          tooltipSide="right"
+          onClick={(event) => {
+            event.stopPropagation();
+            onStartEditing();
+          }}
+        />
+      </div>
     </div>
   );
 }
@@ -208,6 +228,7 @@ export function ChatSidebarSessionItem({
   showUnreadDot,
   runStatus,
   context,
+  isPinned,
   title,
   previewText,
   trailingText,
@@ -223,7 +244,8 @@ export function ChatSidebarSessionItem({
   onStartEditing,
   onDraftLabelChange,
   onSave,
-  onCancel
+  onCancel,
+  onTogglePinned
 }: ChatSidebarSessionItemProps) {
   return (
     <div
@@ -249,6 +271,7 @@ export function ChatSidebarSessionItem({
           showUnreadDot={showUnreadDot}
           runStatus={runStatus}
           context={context}
+          isPinned={isPinned}
           title={title}
           previewText={previewText}
           trailingText={trailingText}
@@ -259,6 +282,7 @@ export function ChatSidebarSessionItem({
           childSessionCount={childSessionCount}
           onOpenChildSessions={onOpenChildSessions}
           onStartEditing={onStartEditing}
+          onTogglePinned={onTogglePinned}
         />
       )}
     </div>

package/src/features/chat/features/session/components/chat-sidebar-session-list.tsx

@@ -19,7 +19,6 @@ type ChatSidebarSessionListProps = {
   defaultSessionType: string;
   sessionTypeOptions: SessionTypeOption[];
   renderSessionItem: (item: NcpSessionListItemView) => ReactNode;
-  onCreateSession: (sessionType: string, projectRoot?: string | null) => void;
 };
 
 function ChatSidebarEmptyState({ label }: { label: string }) {
@@ -36,7 +35,6 @@ export function ChatSidebarSessionList({
   groups,
   isLoading,
   isProjectFirstView,
-  onCreateSession,
   projectGroups,
   renderSessionItem,
   sessionTypeOptions,
@@ -54,7 +52,6 @@ export function ChatSidebarSessionList({
         defaultSessionType={defaultSessionType}
         sessionTypeOptions={sessionTypeOptions}
         renderSessionItem={renderSessionItem}
-        onCreateSession={onCreateSession}
       />
     );
   }

package/src/features/chat/features/session/components/session-header/chat-session-header-actions.tsx

@@ -9,7 +9,6 @@ import { ChatSessionProjectDialog } from './chat-session-project-dialog';
 import { t } from '@/shared/lib/i18n';
 
 const SESSION_HEADER_ACTION_GROUP_CLASS = 'flex shrink-0 items-center gap-1.5';
-const SESSION_HEADER_ACTION_BUTTON_CLASS = 'h-7 w-7 shrink-0 rounded-lg text-muted-foreground/70 hover:bg-accent hover:text-accent-foreground';
 
 type ChatSessionHeaderActionsProps = {
   sessionKey: string;
@@ -65,7 +64,6 @@ export function ChatSessionHeaderActions({
         <IconActionButton
           icon={<GitBranch className="h-4 w-4" />}
           label={t('chatSessionOpenChildSessions')}
-          className={SESSION_HEADER_ACTION_BUTTON_CLASS}
           onClick={onOpenChildSessions}
           disabled={isBusy}
         />
@@ -74,7 +72,6 @@ export function ChatSessionHeaderActions({
         <IconActionButton
           icon={<AlarmClock className="h-4 w-4" />}
           label={t('chatSessionOpenCronJobs')}
-          className={SESSION_HEADER_ACTION_BUTTON_CLASS}
           onClick={onOpenSessionCronJobs}
           disabled={isBusy}
         />
@@ -85,7 +82,6 @@ export function ChatSessionHeaderActions({
             icon={<MoreVertical className="h-4 w-4" />}
             label={t('chatSessionMoreActions')}
             tooltip={false}
-            className={SESSION_HEADER_ACTION_BUTTON_CLASS}
             disabled={isBusy}
           />
         </PopoverTrigger>