@nextclaw/ui 0.15.0 → 0.15.2

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>

package/src/features/chat/features/session/components/session-header/chat-session-title-switcher.tsx

@@ -0,0 +1,294 @@
+import { useMemo, useState } from "react";
+import {
+  Check,
+  ChevronDown,
+  Loader2,
+  MessageSquareText,
+  Search,
+} from "lucide-react";
+import { usePresenter } from "@/features/chat/components/providers/chat-presenter.provider";
+import {
+  useNcpSessionListView,
+  type NcpSessionListItemView,
+} from "@/features/chat/features/ncp/hooks/use-ncp-session-list-view";
+import { SessionContextIconNode } from "@/features/chat/features/session/components/session-context-icon";
+import { SessionRunBadge } from "@/features/chat/features/session/components/session-run-badge";
+import {
+  formatSessionListTime,
+  sessionActivityPreviewText,
+  sessionDisplayName,
+} from "@/features/chat/features/session/utils/chat-session-display.utils";
+import { sortSessionItemsByActivityAtDesc } from "@/features/chat/features/session/utils/chat-sidebar-session-groups.utils";
+import { resolveSessionContextView } from "@/features/chat/features/session/utils/session-context.utils";
+import {
+  buildSessionTypeOptions,
+  type ChatSessionTypeOption,
+} from "@/features/chat/features/session-type/utils/chat-session-type.utils";
+import {
+  shouldShowUnreadSessionIndicator,
+  useChatSessionListStore,
+} from "@/features/chat/stores/chat-session-list.store";
+import { useChatQueryStore } from "@/features/chat/stores/ncp-chat-query.store";
+import { useViewportLayoutStore } from "@/app/stores/viewport-layout.store";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/shared/components/ui/popover";
+import { Input } from "@/shared/components/ui/input";
+import { t } from "@/shared/lib/i18n";
+import { cn } from "@/shared/lib/utils";
+
+const SWITCHER_TRIGGER_CLASS =
+  "group inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-md px-1.5 py-1 text-sm font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40";
+
+function ChatSessionTitle({ title }: { title: string }) {
+  return (
+    <span className="text-sm font-medium text-foreground truncate">
+      {title}
+    </span>
+  );
+}
+
+function ChatSessionTitleSwitcherEmptyState({ label }: { label: string }) {
+  return (
+    <div className="flex items-center gap-2 px-3 py-4 text-xs text-muted-foreground">
+      <MessageSquareText className="h-4 w-4 shrink-0 text-muted-foreground/55" />
+      <span>{label}</span>
+    </div>
+  );
+}
+
+function ChatSessionTitleSwitcherLoadingState() {
+  return (
+    <div className="flex items-center gap-2 px-3 py-4 text-xs text-muted-foreground">
+      <Loader2 className="h-4 w-4 shrink-0 animate-spin" />
+      <span>{t("sessionsLoading")}</span>
+    </div>
+  );
+}
+
+function ChatSessionSwitchItem({
+  item,
+  selectedSessionKey,
+  optimisticReadAtBySessionKey,
+  sessionTypeOptions,
+  onSelect,
+}: {
+  item: NcpSessionListItemView;
+  selectedSessionKey: string | null;
+  optimisticReadAtBySessionKey: Record<string, string>;
+  sessionTypeOptions: ChatSessionTypeOption[];
+  onSelect: (sessionKey: string) => void;
+}) {
+  const { session, runStatus } = item;
+  const active = selectedSessionKey === session.key;
+  const optimisticReadAt = optimisticReadAtBySessionKey[session.key];
+  const effectiveReadAt =
+    optimisticReadAt && session.readAt
+      ? optimisticReadAt.localeCompare(session.readAt) > 0
+        ? optimisticReadAt
+        : session.readAt
+      : (optimisticReadAt ?? session.readAt);
+  const shouldShowUnread = shouldShowUnreadSessionIndicator({
+    active,
+    lastMessageAt: session.lastMessageAt,
+    readAt: effectiveReadAt,
+    runStatus,
+  });
+  const previewText =
+    sessionActivityPreviewText(session) ??
+    session.projectName ??
+    session.projectRoot ??
+    `${session.messageCount}`;
+  const trailingText = formatSessionListTime(
+    session.lastMessageAt ?? session.createdAt,
+  );
+  const sessionContext = resolveSessionContextView(session, sessionTypeOptions);
+
+  return (
+    <button
+      type="button"
+      aria-current={active ? "page" : undefined}
+      className={cn(
+        "flex w-full min-w-0 items-start gap-2 rounded-lg px-2.5 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
+        active
+          ? "bg-accent text-accent-foreground"
+          : "text-popover-foreground hover:bg-accent/70",
+      )}
+      onClick={() => onSelect(session.key)}
+    >
+      <span className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center">
+        {active ? (
+          <Check className="h-3.5 w-3.5" />
+        ) : shouldShowUnread ? (
+          <span
+            aria-label={t("chatSessionUnread")}
+            className="h-2 w-2 rounded-full bg-primary"
+          />
+        ) : null}
+      </span>
+      <span className="min-w-0 flex-1">
+        <span className="flex min-w-0 items-center gap-1.5">
+          <span className="min-w-0 truncate text-[13px] font-medium">
+            {sessionDisplayName(session)}
+          </span>
+          {sessionContext.label ? (
+            <span className="shrink-0 rounded-full border border-border/70 px-1.5 py-0.5 text-[10px] font-semibold leading-none text-muted-foreground">
+              {sessionContext.label}
+            </span>
+          ) : null}
+          {sessionContext.icon ? (
+            <span className="inline-flex h-[1.125rem] w-[1.125rem] shrink-0 items-center justify-center text-muted-foreground">
+              <SessionContextIconNode icon={sessionContext.icon} />
+            </span>
+          ) : null}
+        </span>
+        <span className="mt-0.5 flex min-w-0 items-center gap-2 text-[11px] text-muted-foreground">
+          <span className="min-w-0 truncate">{previewText}</span>
+          <span className="shrink-0">{trailingText}</span>
+        </span>
+      </span>
+      {runStatus ? (
+        <span className="mt-0.5 shrink-0">
+          <SessionRunBadge status={runStatus} />
+        </span>
+      ) : null}
+    </button>
+  );
+}
+
+function ChatSessionTitleSwitcherPopover({
+  selectedSessionKey,
+  title,
+}: {
+  selectedSessionKey: string | null;
+  title: string;
+}) {
+  const presenter = usePresenter();
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const optimisticReadAtBySessionKey = useChatSessionListStore(
+    (state) => state.optimisticReadAtBySessionKey,
+  );
+  const sessionTypesData = useChatQueryStore(
+    (state) => state.snapshot.sessionTypesQuery?.data ?? null,
+  );
+  const { isLoading, items } = useNcpSessionListView({ query: searchQuery });
+  const sortedItems = useMemo(
+    () => sortSessionItemsByActivityAtDesc(items),
+    [items],
+  );
+  const sessionTypeOptions = useMemo(
+    () => buildSessionTypeOptions(sessionTypesData?.options ?? []),
+    [sessionTypesData?.options],
+  );
+
+  const selectSession = (sessionKey: string) => {
+    setIsOpen(false);
+    setSearchQuery("");
+    if (sessionKey === selectedSessionKey) {
+      return;
+    }
+    presenter.chatSessionListManager.selectSession(sessionKey);
+  };
+  const updateOpen = (open: boolean) => {
+    setIsOpen(open);
+    if (!open) {
+      setSearchQuery("");
+    }
+  };
+
+  return (
+    <Popover open={isOpen} onOpenChange={updateOpen}>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          aria-label={`${t("chatSessionSwitch")}: ${title}`}
+          aria-expanded={isOpen}
+          className={SWITCHER_TRIGGER_CLASS}
+        >
+          <span className="min-w-0 truncate">{title}</span>
+          <ChevronDown
+            className={cn(
+              "h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform group-hover:text-accent-foreground",
+              isOpen ? "rotate-180" : null,
+            )}
+          />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        className="w-[22rem] max-w-[calc(100vw-2rem)] p-0"
+      >
+        <div className="space-y-2 border-b border-border px-3 py-2">
+          <div className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground/75">
+            {t("chatSessionSwitcherTitle")}
+          </div>
+          <div className="relative">
+            <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground/65" />
+            <Input
+              value={searchQuery}
+              onChange={(event) => setSearchQuery(event.target.value)}
+              placeholder={t("chatSearchSessionPlaceholder")}
+              aria-label={t("chatSearchSessionPlaceholder")}
+              className="h-8 rounded-lg bg-background pl-8 pr-2 text-xs"
+              autoFocus
+            />
+          </div>
+        </div>
+        <div className="max-h-80 overflow-y-auto p-1.5">
+          {isLoading ? (
+            <ChatSessionTitleSwitcherLoadingState />
+          ) : sortedItems.length > 0 ? (
+            <div className="space-y-1">
+              {sortedItems.map((item) => (
+                <ChatSessionSwitchItem
+                  key={item.session.key}
+                  item={item}
+                  selectedSessionKey={selectedSessionKey}
+                  optimisticReadAtBySessionKey={optimisticReadAtBySessionKey}
+                  sessionTypeOptions={sessionTypeOptions}
+                  onSelect={selectSession}
+                />
+              ))}
+            </div>
+          ) : (
+            <ChatSessionTitleSwitcherEmptyState
+              label={
+                searchQuery.trim()
+                  ? t("chatSessionSwitcherNoResults")
+                  : t("sessionsEmpty")
+              }
+            />
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export function ChatSessionTitleSwitcher({
+  layoutMode,
+  selectedSessionKey,
+  title,
+}: {
+  layoutMode: "desktop" | "mobile";
+  selectedSessionKey: string | null;
+  title: string;
+}) {
+  const isSidebarCollapsed = useViewportLayoutStore(
+    (state) => state.isSidebarCollapsed,
+  );
+
+  if (layoutMode !== "desktop" || !isSidebarCollapsed) {
+    return <ChatSessionTitle title={title} />;
+  }
+
+  return (
+    <ChatSessionTitleSwitcherPopover
+      selectedSessionKey={selectedSessionKey}
+      title={title}
+    />
+  );
+}

package/src/features/chat/features/session/utils/__tests__/chat-session-display.utils.test.ts

@@ -5,7 +5,7 @@ import {
   sessionActivityPreviewText,
   sessionDisplayName,
   sessionMatchesQuery
-} from '../chat-session-display.utils';
+} from '@/features/chat/features/session/utils/chat-session-display.utils';
 
 function createSession(overrides: Partial<SessionEntryView> = {}): SessionEntryView {
   return {
@@ -88,6 +88,20 @@ describe('chat-session-display', () => {
     ).toBe('最终回复内容');
   });
 
+  it('does not show cancelled activity as ordinary session preview text', () => {
+    expect(
+      sessionActivityPreviewText(
+        createSession({
+          activityPreview: {
+            state: 'cancelled',
+            statusText: 'Run interrupted: User stopped the current run.',
+            timestamp: '2026-05-16T01:00:00.000Z'
+          }
+        })
+      )
+    ).toBeNull();
+  });
+
   it('formats today activity as time like WeChat session lists', () => {
     expect(
       formatSessionListTime(

package/src/features/chat/features/session/utils/__tests__/ncp-session-adapter.utils.test.ts

@@ -105,8 +105,8 @@ describe('adaptNcpSessionSummary', () => {
         metadata: {
           last_activity_preview: {
             state: 'completed',
-            replyText: '已经整理好方案',
-            statusText: '工具调用完成',
+            replyText: 'Plan is ready',
+            statusText: 'Tool call completed',
             timestamp: '2026-05-16T01:00:00.000Z',
           },
         },
@@ -115,8 +115,28 @@ describe('adaptNcpSessionSummary', () => {
 
     expect(adapted.activityPreview).toEqual({
       state: 'completed',
-      replyText: '已经整理好方案',
-      statusText: '工具调用完成',
+      replyText: 'Plan is ready',
+      statusText: 'Tool call completed',
+      timestamp: '2026-05-16T01:00:00.000Z',
+    });
+  });
+
+  it('maps cancelled session activity preview metadata into the session entry', () => {
+    const adapted = adaptNcpSessionSummary(
+      createSummary({
+        metadata: {
+          last_activity_preview: {
+            state: 'cancelled',
+            statusText: 'Run interrupted: User stopped the current run.',
+            timestamp: '2026-05-16T01:00:00.000Z',
+          },
+        },
+      }),
+    );
+
+    expect(adapted.activityPreview).toEqual({
+      state: 'cancelled',
+      statusText: 'Run interrupted: User stopped the current run.',
       timestamp: '2026-05-16T01:00:00.000Z',
     });
   });

package/src/features/chat/features/session/utils/chat-session-display.utils.ts

@@ -15,6 +15,9 @@ export function sessionActivityPreviewText(session: SessionEntryView): string |
   if (!preview) {
     return null;
   }
+  if (preview.state === 'cancelled') {
+    return null;
+  }
   if (preview.state === 'failed' || preview.state === 'running') {
     return preview.statusText ?? preview.replyText ?? null;
   }