@nextclaw/ui 0.12.3 → 0.12.4

package/src/components/chat/ChatSidebar.tsx

@@ -7,6 +7,11 @@ import { Input } from '@/components/ui/input';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { SelectItem } from '@/components/ui/select';
 import { ChatSidebarSessionItem } from '@/components/chat/chat-sidebar-session-item';
+import { ChatSidebarListModeSwitch } from '@/components/chat/chat-sidebar-list-mode-switch';
+import {
+  ChatSidebarProjectGroups,
+  type ChatSidebarProjectGroup
+} from '@/components/chat/chat-sidebar-project-groups';
 import { resolveSessionContextView } from '@/lib/session-context.utils';
 import { useChatSessionLabel } from '@/components/chat/hooks/use-chat-session-label';
 import { useNcpSessionListView, type NcpSessionListItemView } from '@/components/chat/ncp/use-ncp-session-list-view';
@@ -14,6 +19,7 @@ import { usePresenter } from '@/components/chat/presenter/chat-presenter-context
 import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
 import { useChatSessionListStore } from '@/components/chat/stores/chat-session-list.store';
 import { useAgents } from '@/hooks/agents/useAgents';
+import { getSessionProjectName } from '@/lib/session-project/session-project.utils';
 import { cn } from '@/lib/utils';
 import { LANGUAGE_OPTIONS, t, type I18nLanguage } from '@/lib/i18n';
 import { THEME_OPTIONS, type UiTheme } from '@/lib/theme';
@@ -41,6 +47,14 @@ type DateGroup = {
   items: NcpSessionListItemView[];
 };
 
+function getSessionUpdatedAtTimestamp(item: NcpSessionListItemView): number {
+  return new Date(item.session.updatedAt).getTime();
+}
+
+function sortSessionItemsByUpdatedAtDesc(items: NcpSessionListItemView[]): NcpSessionListItemView[] {
+  return [...items].sort((left, right) => getSessionUpdatedAtTimestamp(right) - getSessionUpdatedAtTimestamp(left));
+}
+
 function groupSessionsByDate(items: NcpSessionListItemView[]): DateGroup[] {
   const now = new Date();
   const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
@@ -74,6 +88,37 @@ function groupSessionsByDate(items: NcpSessionListItemView[]): DateGroup[] {
   return groups;
 }
 
+function groupSessionsByProject(items: NcpSessionListItemView[]): ChatSidebarProjectGroup[] {
+  const grouped = new Map<string, ChatSidebarProjectGroup>();
+
+  for (const item of items) {
+    const projectRoot = item.session.projectRoot?.trim();
+    if (!projectRoot) {
+      continue;
+    }
+    const existingGroup = grouped.get(projectRoot);
+    const updatedAt = getSessionUpdatedAtTimestamp(item);
+    if (existingGroup) {
+      existingGroup.items.push(item);
+      existingGroup.latestUpdatedAt = Math.max(existingGroup.latestUpdatedAt, updatedAt);
+      continue;
+    }
+    grouped.set(projectRoot, {
+      projectRoot,
+      projectName: item.session.projectName?.trim() || getSessionProjectName(projectRoot) || projectRoot,
+      items: [item],
+      latestUpdatedAt: updatedAt
+    });
+  }
+
+  return [...grouped.values()]
+    .map((group) => ({
+      ...group,
+      items: sortSessionItemsByUpdatedAtDesc(group.items)
+    }))
+    .sort((left, right) => right.latestUpdatedAt - left.latestUpdatedAt);
+}
+
 function sessionTitle(session: SessionEntryView): string {
   if (session.label && session.label.trim()) {
     return session.label.trim();
@@ -120,12 +165,15 @@ export function ChatSidebar() {
     [agentsQuery.data?.agents]
   );
 
-  const groups = useMemo(() => groupSessionsByDate(items), [items]);
+  const sortedItems = useMemo(() => sortSessionItemsByUpdatedAtDesc(items), [items]);
+  const groups = useMemo(() => groupSessionsByDate(sortedItems), [sortedItems]);
+  const projectGroups = useMemo(() => groupSessionsByProject(sortedItems), [sortedItems]);
   const defaultSessionType = inputSnapshot.defaultSessionType || 'native';
   const nonDefaultSessionTypeOptions = useMemo(
     () => inputSnapshot.sessionTypeOptions.filter((option) => option.value !== defaultSessionType),
     [defaultSessionType, inputSnapshot.sessionTypeOptions]
   );
+  const isProjectFirstView = listSnapshot.listMode === 'project-first';
 
   const handleLanguageSwitch = (nextLang: I18nLanguage) => {
     if (language === nextLang) return;
@@ -164,6 +212,34 @@ export function ChatSidebar() {
     }
   };
 
+  const renderSessionItem = ({ session, runStatus }: NcpSessionListItemView) => {
+    const active = listSnapshot.selectedSessionKey === session.key;
+    const context = resolveSessionContextView(session, inputSnapshot.sessionTypeOptions);
+    const isEditing = editingSessionKey === session.key;
+    const isSaving = savingSessionKey === session.key;
+    return (
+      <ChatSidebarSessionItem
+        key={session.key}
+        session={session}
+        active={active}
+        runStatus={runStatus}
+        context={context}
+        title={sessionTitle(session)}
+        agentId={session.agentId ?? null}
+        agentLabel={session.agentId ? (agentsById.get(session.agentId)?.displayName ?? session.agentId) : null}
+        agentAvatarUrl={session.agentId ? (agentsById.get(session.agentId)?.avatarUrl ?? null) : null}
+        isEditing={isEditing}
+        draftLabel={draftLabel}
+        isSaving={isSaving}
+        onSelect={() => presenter.chatSessionListManager.selectSession(session.key)}
+        onStartEditing={() => startEditingSessionLabel(session)}
+        onDraftLabelChange={setDraftLabel}
+        onSave={() => saveSessionLabel(session)}
+        onCancel={cancelEditingSessionLabel}
+      />
+    );
+  };
+
   return (
     <aside className="w-[280px] shrink-0 flex flex-col h-full bg-secondary border-r border-gray-200/60">
       <div className="px-5 pt-5 pb-3">
@@ -272,9 +348,34 @@ export function ChatSidebar() {
 
       <div className="mx-4 border-t border-gray-200/60" />
 
+      <div className="flex items-center justify-between px-5 pb-2 pt-3">
+        <div className="text-[11px] font-medium uppercase tracking-wider text-gray-400">
+          {t('chatSidebarTaskRecords')}
+        </div>
+        <ChatSidebarListModeSwitch
+          isProjectFirstView={isProjectFirstView}
+          onSelectMode={presenter.chatSessionListManager.setListMode}
+        />
+      </div>
+
       <div className="flex-1 min-h-0 overflow-y-auto custom-scrollbar px-3 py-2">
         {isLoading ? (
           <div className="text-xs text-gray-500 p-3">{t('sessionsLoading')}</div>
+        ) : isProjectFirstView ? (
+          projectGroups.length === 0 ? (
+            <div className="p-4 text-center">
+              <MessageSquareText className="h-6 w-6 mx-auto mb-2 text-gray-300" />
+              <div className="text-xs text-gray-500">{t('chatSidebarProjectViewEmpty')}</div>
+            </div>
+          ) : (
+            <ChatSidebarProjectGroups
+              groups={projectGroups}
+              defaultSessionType={defaultSessionType}
+              sessionTypeOptions={inputSnapshot.sessionTypeOptions}
+              renderSessionItem={renderSessionItem}
+              onCreateSession={presenter.chatSessionListManager.createSession}
+            />
+          )
         ) : groups.length === 0 ? (
           <div className="p-4 text-center">
             <MessageSquareText className="h-6 w-6 mx-auto mb-2 text-gray-300" />
@@ -288,33 +389,7 @@ export function ChatSidebar() {
                   {group.label}
                 </div>
                 <div className="space-y-0.5">
-                  {group.items.map(({ session, runStatus }) => {
-                    const active = listSnapshot.selectedSessionKey === session.key;
-                    const context = resolveSessionContextView(session, inputSnapshot.sessionTypeOptions);
-                    const isEditing = editingSessionKey === session.key;
-                    const isSaving = savingSessionKey === session.key;
-                    return (
-                      <ChatSidebarSessionItem
-                        key={session.key}
-                        session={session}
-                        active={active}
-                        runStatus={runStatus}
-                        context={context}
-                        title={sessionTitle(session)}
-                        agentId={session.agentId ?? null}
-                        agentLabel={session.agentId ? (agentsById.get(session.agentId)?.displayName ?? session.agentId) : null}
-                        agentAvatarUrl={session.agentId ? (agentsById.get(session.agentId)?.avatarUrl ?? null) : null}
-                        isEditing={isEditing}
-                        draftLabel={draftLabel}
-                        isSaving={isSaving}
-                        onSelect={() => presenter.chatSessionListManager.selectSession(session.key)}
-                        onStartEditing={() => startEditingSessionLabel(session)}
-                        onDraftLabelChange={setDraftLabel}
-                        onSave={() => saveSessionLabel(session)}
-                        onCancel={cancelEditingSessionLabel}
-                      />
-                    );
-                  })}
+                  {group.items.map(renderSessionItem)}
                 </div>
               </div>
             ))}

package/src/components/chat/chat-sidebar-list-mode-switch.tsx

@@ -0,0 +1,43 @@
+import { t } from '@/lib/i18n';
+import { cn } from '@/lib/utils';
+
+type ChatSidebarListModeSwitchProps = {
+  isProjectFirstView: boolean;
+  onSelectMode: (mode: 'time-first' | 'project-first') => void;
+};
+
+export function ChatSidebarListModeSwitch(props: ChatSidebarListModeSwitchProps) {
+  const { isProjectFirstView, onSelectMode } = props;
+
+  return (
+    <div className="flex items-center gap-1.5 text-[11px]">
+      <button
+        type="button"
+        aria-pressed={!isProjectFirstView}
+        onClick={() => onSelectMode('time-first')}
+        className={cn(
+          'transition-colors',
+          isProjectFirstView
+            ? 'text-gray-400 hover:text-gray-600'
+            : 'font-medium text-gray-600'
+        )}
+      >
+        {t('chatSidebarViewTime')}
+      </button>
+      <span className="text-gray-300">/</span>
+      <button
+        type="button"
+        aria-pressed={isProjectFirstView}
+        onClick={() => onSelectMode('project-first')}
+        className={cn(
+          'transition-colors',
+          isProjectFirstView
+            ? 'font-medium text-gray-600'
+            : 'text-gray-400 hover:text-gray-600'
+        )}
+      >
+        {t('chatSidebarViewProject')}
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,152 @@
+import { useMemo, useState, type ReactNode } from 'react';
+import { Plus } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import type { ChatInputSnapshot } from '@/components/chat/stores/chat-input.store';
+import type { NcpSessionListItemView } from '@/components/chat/ncp/use-ncp-session-list-view';
+import { t } from '@/lib/i18n';
+import { cn } from '@/lib/utils';
+
+export type ChatSidebarProjectGroup = {
+  projectRoot: string;
+  projectName: string;
+  items: NcpSessionListItemView[];
+  latestUpdatedAt: number;
+};
+
+type SessionTypeOption = ChatInputSnapshot['sessionTypeOptions'][number];
+
+type ChatSidebarProjectGroupsProps = {
+  groups: ChatSidebarProjectGroup[];
+  defaultSessionType: string;
+  sessionTypeOptions: SessionTypeOption[];
+  renderSessionItem: (item: NcpSessionListItemView) => ReactNode;
+  onCreateSession: (sessionType: string, projectRoot: string) => void;
+};
+
+function resolveProjectGroupDefaultSessionType(
+  defaultSessionType: string,
+  sessionTypeOptions: SessionTypeOption[]
+): string {
+  if (sessionTypeOptions.some((option) => option.value === defaultSessionType)) {
+    return defaultSessionType;
+  }
+  return sessionTypeOptions[0]?.value ?? defaultSessionType;
+}
+
+function resolveSessionTypeStatusText(option: {
+  ready?: boolean;
+  reasonMessage?: string | null;
+}): string {
+  if (option.ready === false) {
+    return option.reasonMessage?.trim() || t('statusSetup');
+  }
+  return t('statusReady');
+}
+
+export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
+  const { groups, defaultSessionType, sessionTypeOptions, renderSessionItem, onCreateSession } = props;
+  const [openProjectRoot, setOpenProjectRoot] = useState<string | null>(null);
+  const preferredSessionType = useMemo(
+    () => resolveProjectGroupDefaultSessionType(defaultSessionType, sessionTypeOptions),
+    [defaultSessionType, sessionTypeOptions]
+  );
+  const supportsSessionTypeChoice = sessionTypeOptions.length > 1;
+
+  return (
+    <div className="space-y-3">
+      {groups.map((group) => {
+        const actionLabel = `${t('chatSidebarNewTask')} · ${group.projectName}`;
+
+        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-gray-500"
+                  title={group.projectRoot}
+                >
+                  {group.projectName}
+                </div>
+                <span className="shrink-0 text-[10px] text-gray-400">
+                  {group.items.length}
+                </span>
+              </div>
+              {supportsSessionTypeChoice ? (
+                <Popover
+                  open={openProjectRoot === group.projectRoot}
+                  onOpenChange={(nextOpen) => {
+                    setOpenProjectRoot(nextOpen ? group.projectRoot : null);
+                  }}
+                >
+                  <PopoverTrigger asChild>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon"
+                      className="h-7 w-7 shrink-0 rounded-lg text-gray-400 hover:bg-white hover:text-gray-900"
+                      aria-label={actionLabel}
+                      title={actionLabel}
+                    >
+                      <Plus className="h-3.5 w-3.5" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent align="end" className="w-64 p-2">
+                    <div className="px-2 py-1 text-[11px] font-medium uppercase tracking-wider text-gray-400">
+                      {t('chatSessionTypeLabel')}
+                    </div>
+                    <div className="mt-1 space-y-1">
+                      {sessionTypeOptions.map((option) => (
+                        <button
+                          key={`${group.projectRoot}:${option.value}`}
+                          type="button"
+                          onClick={() => {
+                            onCreateSession(option.value, group.projectRoot);
+                            setOpenProjectRoot(null);
+                          }}
+                          className="w-full rounded-xl px-3 py-2 text-left transition-colors hover:bg-gray-100"
+                        >
+                          <div className="flex items-center justify-between gap-3">
+                            <div className="text-[13px] font-medium text-gray-900">{option.label}</div>
+                            <span
+                              className={cn(
+                                'shrink-0 rounded-full px-2 py-0.5 text-[10px] font-semibold',
+                                option.ready === false
+                                  ? 'bg-amber-100 text-amber-800'
+                                  : 'bg-emerald-100 text-emerald-700'
+                              )}
+                            >
+                              {option.ready === false ? t('statusSetup') : t('statusReady')}
+                            </span>
+                          </div>
+                          <div className="mt-0.5 text-[11px] text-gray-500">
+                            {resolveSessionTypeStatusText(option)}
+                          </div>
+                        </button>
+                      ))}
+                    </div>
+                  </PopoverContent>
+                </Popover>
+              ) : (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7 shrink-0 rounded-lg text-gray-400 hover:bg-white hover:text-gray-900"
+                  onClick={() => onCreateSession(preferredSessionType, group.projectRoot)}
+                  aria-label={actionLabel}
+                  title={actionLabel}
+                >
+                  <Plus className="h-3.5 w-3.5" />
+                </Button>
+              )}
+            </div>
+            <div className="space-y-0.5 pl-2">
+              {group.items.map(renderSessionItem)}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/chat/managers/chat-session-list.manager.test.ts

@@ -31,12 +31,12 @@ describe('ChatSessionListManager', () => {
       resetStreamState: vi.fn()
     } as unknown as ConstructorParameters<typeof ChatSessionListManager>[1];
 
-    const manager = new ChatSessionListManager(uiManager, streamActionsManager, () => 'draft-session-1');
+    const manager = new ChatSessionListManager(uiManager, streamActionsManager);
     manager.createSession('codex');
 
     expect(streamActionsManager.resetStreamState).toHaveBeenCalledTimes(1);
     expect(uiManager.goToChatRoot).toHaveBeenCalledTimes(1);
-    expect(useChatSessionListStore.getState().snapshot.selectedSessionKey).toBe('session-1');
+    expect(useChatSessionListStore.getState().snapshot.selectedSessionKey).toBeNull();
     expect(useChatInputStore.getState().snapshot.pendingSessionType).toBe('codex');
     expect(useChatInputStore.getState().snapshot.pendingProjectRoot).toBeNull();
     expect(useChatInputStore.getState().snapshot.pendingProjectRootSessionKey).toBeNull();
@@ -50,11 +50,11 @@ describe('ChatSessionListManager', () => {
       resetStreamState: vi.fn()
     } as unknown as ConstructorParameters<typeof ChatSessionListManager>[1];
 
-    const manager = new ChatSessionListManager(uiManager, streamActionsManager, () => 'draft-session-9');
+    const manager = new ChatSessionListManager(uiManager, streamActionsManager);
     manager.createSession('native', '/tmp/project-alpha');
 
     expect(useChatInputStore.getState().snapshot.pendingProjectRoot).toBe('/tmp/project-alpha');
-    expect(useChatInputStore.getState().snapshot.pendingProjectRootSessionKey).toBe('draft-session-9');
+    expect(useChatInputStore.getState().snapshot.pendingProjectRootSessionKey).toBeNull();
   });
 
   it('delegates existing-session selection to routing without eagerly mutating the selected session state', () => {

package/src/components/chat/managers/chat-session-list.manager.ts

@@ -8,8 +8,7 @@ import { normalizeSessionProjectRootValue } from '@/lib/session-project/session-
 export class ChatSessionListManager {
   constructor(
     private uiManager: ChatUiManager,
-    private streamActionsManager: ChatStreamActionsManager,
-    private getDraftSessionId: () => string = () => ''
+    private streamActionsManager: ChatStreamActionsManager
   ) {}
 
   private resolveUpdateValue = <T>(prev: T, next: SetStateAction<T>): T => {
@@ -55,12 +54,12 @@ export class ChatSessionListManager {
         ? sessionType.trim()
         : defaultSessionType;
     const normalizedProjectRoot = normalizeSessionProjectRootValue(projectRoot);
-    const draftSessionId = normalizedProjectRoot ? this.getDraftSessionId() : null;
     this.streamActionsManager.resetStreamState();
+    useChatSessionListStore.getState().setSnapshot({ selectedSessionKey: null });
     useChatInputStore.getState().setSnapshot({
       pendingSessionType: nextSessionType,
       pendingProjectRoot: normalizedProjectRoot,
-      pendingProjectRootSessionKey: draftSessionId
+      pendingProjectRootSessionKey: null
     });
     this.uiManager.goToChatRoot();
   };

package/src/components/chat/ncp/NcpChatPage.tsx

@@ -131,8 +131,13 @@ export function NcpChatPage({ view }: ChatPageProps) {
     [routeSessionIdParam],
   );
   const sessionKey = selectedSessionKey ?? draftSessionId;
+  const hasDraftProjectRootOverride =
+    pendingProjectRoot !== null &&
+    pendingProjectRootSessionKey === null &&
+    selectedSessionKey === null;
   const hasSessionProjectRootOverride =
-    pendingProjectRootSessionKey === sessionKey;
+    pendingProjectRoot !== null &&
+    (pendingProjectRootSessionKey === sessionKey || hasDraftProjectRootOverride);
   const sessionProjectRootOverride = hasSessionProjectRootOverride
     ? pendingProjectRoot
     : undefined;
@@ -210,7 +215,10 @@ export function NcpChatPage({ view }: ChatPageProps) {
           thinkingLevel: payload.thinkingLevel,
           sessionType: payload.sessionType,
           projectRoot:
-            payload.sessionKey === pendingProjectRootSessionKey
+            payload.sessionKey === pendingProjectRootSessionKey ||
+            (pendingProjectRoot !== null &&
+              pendingProjectRootSessionKey === null &&
+              selectedSessionKey === null)
               ? pendingProjectRoot
               : (selectedSession?.projectRoot ?? null),
           requestedSkills: payload.requestedSkills,
@@ -265,14 +273,20 @@ export function NcpChatPage({ view }: ChatPageProps) {
     pendingProjectRoot,
     pendingProjectRootSessionKey,
     presenter,
+    selectedSessionKey,
     selectedSession?.projectRoot,
     sessionKey,
   ]);
 
   useEffect(() => {
+    const matchesPendingProjectSession =
+      pendingProjectRootSessionKey === null
+        ? selectedSessionKey !== null
+        : pendingProjectRootSessionKey === selectedSession?.key;
     if (
       !selectedSession ||
-      pendingProjectRootSessionKey !== selectedSession.key ||
+      pendingProjectRoot === null ||
+      !matchesPendingProjectSession ||
       (selectedSession.projectRoot ?? null) !== pendingProjectRoot
     ) {
       return;
@@ -281,7 +295,7 @@ export function NcpChatPage({ view }: ChatPageProps) {
       pendingProjectRoot: null,
       pendingProjectRootSessionKey: null,
     });
-  }, [pendingProjectRoot, pendingProjectRootSessionKey, selectedSession]);
+  }, [pendingProjectRoot, pendingProjectRootSessionKey, selectedSession, selectedSessionKey]);
 
   useChatSessionSync({
     view,

package/src/components/chat/ncp/ncp-chat.presenter.ts

@@ -7,11 +7,7 @@ import { NcpChatThreadManager } from '@/components/chat/ncp/ncp-chat-thread.mana
 export class NcpChatPresenter {
   chatUiManager = new ChatUiManager();
   chatStreamActionsManager = new ChatStreamActionsManager();
-  chatSessionListManager = new ChatSessionListManager(
-    this.chatUiManager,
-    this.chatStreamActionsManager,
-    () => this.getDraftSessionId()
-  );
+  chatSessionListManager = new ChatSessionListManager(this.chatUiManager, this.chatStreamActionsManager);
   chatInputManager = new NcpChatInputManager(
     this.chatUiManager,
     this.chatStreamActionsManager,

package/src/components/chat/session-header/chat-session-project-badge.test.tsx

@@ -40,6 +40,22 @@ describe('ChatSessionProjectBadge', () => {
     expect(screen.getByText('/tmp/project-alpha')).toBeTruthy();
   });
 
+  it('uses the neutral header tag styling instead of a highlighted accent color', () => {
+    render(
+      <ChatSessionProjectBadge
+        sessionKey="session-1"
+        projectName="project-alpha"
+        projectRoot="/tmp/project-alpha"
+        persistToServer
+      />
+    );
+
+    const trigger = screen.getByRole('button', { name: 'Set Project Directory' });
+    expect(trigger.className).toContain('border-gray-200');
+    expect(trigger.className).toContain('text-gray-600');
+    expect(trigger.className).not.toContain('emerald');
+  });
+
   it('clears the current project from the badge popover', async () => {
     const user = userEvent.setup();
 

package/src/components/chat/session-header/chat-session-project-badge.tsx

@@ -46,7 +46,7 @@ export function ChatSessionProjectBadge({
           <button
             type="button"
             title={projectRoot ?? undefined}
-            className="min-w-0 max-w-[320px] shrink rounded-full border border-emerald-200 bg-emerald-50 px-2 py-0.5 text-[11px] font-medium text-emerald-700 transition-colors hover:border-emerald-300 hover:bg-emerald-100 disabled:cursor-not-allowed disabled:opacity-60"
+            className="min-w-0 max-w-[320px] shrink rounded-full border border-gray-200 bg-gray-100/90 px-2 py-0.5 text-[11px] font-medium text-gray-600 transition-colors hover:border-gray-300 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-60"
             aria-label={t('chatSessionSetProject')}
             disabled={isProjectPending}
           >
@@ -59,7 +59,7 @@ export function ChatSessionProjectBadge({
         </PopoverTrigger>
         <PopoverContent align="start" className="w-72 p-2">
           <div className="px-3 pb-2 pt-1">
-            <div className="text-[11px] font-medium uppercase tracking-wider text-emerald-700/80">
+            <div className="text-[11px] font-medium uppercase tracking-wider text-gray-500">
               {projectName}
             </div>
             {projectRoot ? (

package/src/lib/i18n.chat.ts

@@ -125,10 +125,13 @@ export const CHAT_LABELS: Record<string, { zh: string; en: string }> = {
   chatSidebarScheduledTasks: { zh: '定时任务', en: 'Scheduled Tasks' },
   chatSidebarSkills: { zh: '技能', en: 'Skills' },
   chatSidebarTaskRecords: { zh: '会话记录', en: 'Sessions' },
+  chatSidebarViewTime: { zh: '时间', en: 'Time' },
+  chatSidebarViewProject: { zh: '项目', en: 'Project' },
   chatSidebarToday: { zh: '今天', en: 'Today' },
   chatSidebarYesterday: { zh: '昨天', en: 'Yesterday' },
   chatSidebarPrevious7Days: { zh: '近 7 天', en: 'Previous 7 Days' },
   chatSidebarOlder: { zh: '更早', en: 'Older' },
+  chatSidebarProjectViewEmpty: { zh: '还没有绑定项目的会话', en: 'No project conversations yet' },
   chatWelcomeTitle: { zh: '你好，有什么可以帮你的吗？', en: 'Hello, how can I help you?' },
   chatWelcomeSubtitle: { zh: '开始一个新任务或选择已有对话', en: 'Start a new task or select an existing conversation' },
   chatWelcomeCapability1Title: { zh: '智能对话', en: 'Smart Conversations' },