@nextclaw/ui 0.15.4 → 0.15.6

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

@@ -15,7 +15,8 @@ type ChatSessionHeaderActionsProps = {
   sessionKey: string;
   canDeleteSession: boolean;
   isDeletePending: boolean;
-  projectRoot?: string | null;
+  currentPath?: string | null;
+  defaultWorkspacePath?: string | null;
   metadata?: Record<string, unknown> | null;
   isWorkspaceOpen: boolean;
   onToggleWorkspace: () => void;
@@ -26,7 +27,8 @@ export function ChatSessionHeaderActions({
   sessionKey,
   canDeleteSession,
   isDeletePending,
-  projectRoot,
+  currentPath,
+  defaultWorkspacePath,
   metadata,
   isWorkspaceOpen,
   onToggleWorkspace,
@@ -119,7 +121,8 @@ export function ChatSessionHeaderActions({
 
       <ChatSessionProjectDialog
         open={isDialogOpen}
-        currentProjectRoot={projectRoot}
+        currentProjectRoot={currentPath}
+        defaultWorkspacePath={defaultWorkspacePath}
         isSaving={isProjectPending}
         onOpenChange={setIsDialogOpen}
         onSave={runProjectUpdate}

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

@@ -15,6 +15,7 @@ type ChatSessionProjectBadgeProps = {
   sessionKey: string;
   projectName: string;
   projectRoot?: string | null;
+  defaultWorkspacePath?: string | null;
   persistToServer: boolean;
 };
 
@@ -26,6 +27,7 @@ export function ChatSessionProjectBadge({
   sessionKey,
   projectName,
   projectRoot,
+  defaultWorkspacePath,
   persistToServer,
 }: ChatSessionProjectBadgeProps) {
   const updateSessionProject = useChatSessionProject();
@@ -106,6 +108,7 @@ export function ChatSessionProjectBadge({
       <ChatSessionProjectDialog
         open={isDialogOpen}
         currentProjectRoot={projectRoot}
+        defaultWorkspacePath={defaultWorkspacePath}
         isSaving={isProjectPending}
         onOpenChange={setIsDialogOpen}
         onSave={runProjectUpdate}

package/src/features/chat/features/session/components/session-header/chat-session-project-dialog.tsx

@@ -4,6 +4,7 @@ import { t } from '@/shared/lib/i18n';
 type ChatSessionProjectDialogProps = {
   open: boolean;
   currentProjectRoot?: string | null;
+  defaultWorkspacePath?: string | null;
   isSaving: boolean;
   onOpenChange: (open: boolean) => void;
   onSave: (projectRoot: string) => Promise<void> | void;
@@ -12,6 +13,7 @@ type ChatSessionProjectDialogProps = {
 export function ChatSessionProjectDialog({
   open,
   currentProjectRoot,
+  defaultWorkspacePath,
   isSaving,
   onOpenChange,
   onSave,
@@ -20,6 +22,7 @@ export function ChatSessionProjectDialog({
     <ServerPathPickerDialog
       open={open}
       currentPath={currentProjectRoot}
+      defaultWorkspacePath={defaultWorkspacePath}
       isSaving={isSaving}
       onOpenChange={onOpenChange}
       onConfirm={onSave}

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

@@ -0,0 +1,245 @@
+import { useId } from "react";
+import { Check, ChevronDown, ChevronRight, Folder } from "lucide-react";
+import 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 type {
+  ChatSidebarDateGroup,
+  ChatSidebarProjectGroup,
+} from "@/features/chat/features/session/utils/chat-sidebar-session-groups.utils";
+import {
+  formatSessionListTime,
+  sessionActivityPreviewText,
+  sessionDisplayName,
+} from "@/features/chat/features/session/utils/chat-session-display.utils";
+import { resolveSessionContextView } from "@/features/chat/features/session/utils/session-context.utils";
+import type { ChatSessionTypeOption } from "@/features/chat/features/session-type/utils/chat-session-type.utils";
+import { shouldShowUnreadSessionIndicator } from "@/features/chat/stores/chat-session-list.store";
+import { t } from "@/shared/lib/i18n";
+import { cn } from "@/shared/lib/utils";
+
+type SessionSwitchItemsProps = {
+  items: NcpSessionListItemView[];
+  selectedSessionKey: string | null;
+  optimisticReadAtBySessionKey: Record<string, string>;
+  sessionTypeOptions: ChatSessionTypeOption[];
+  onSelect: (sessionKey: string) => void;
+  className?: string;
+};
+
+function ChatSessionSwitchItem({
+  item,
+  selectedSessionKey,
+  optimisticReadAtBySessionKey,
+  sessionTypeOptions,
+  onSelect,
+}: Omit<SessionSwitchItemsProps, "items" | "className"> & {
+  item: NcpSessionListItemView;
+}) {
+  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-1 focus-visible:ring-border",
+        active
+          ? "bg-accent text-accent-foreground"
+          : "text-foreground hover:bg-accent/65 hover:text-accent-foreground",
+      )}
+      onClick={() => onSelect(session.key)}
+    >
+      <span className="relative mt-1 flex h-2.5 w-2.5 shrink-0 items-center justify-center">
+        {shouldShowUnread ? (
+          <span
+            aria-label={t("chatSidebarUnread")}
+            className="h-1.5 w-1.5 rounded-full bg-primary"
+          />
+        ) : active ? (
+          <Check className="h-3 w-3 text-primary" />
+        ) : (
+          <span className="h-1 w-1 rounded-full bg-muted-foreground/45" />
+        )}
+      </span>
+      <span className="min-w-0 flex-1">
+        <span className="flex min-w-0 items-center gap-2">
+          <span className="min-w-0 flex-1 truncate text-xs 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 ChatSessionSwitchItems({
+  items,
+  selectedSessionKey,
+  optimisticReadAtBySessionKey,
+  sessionTypeOptions,
+  onSelect,
+  className,
+}: SessionSwitchItemsProps) {
+  return (
+    <div className={cn("space-y-1", className)}>
+      {items.map((item) => (
+        <ChatSessionSwitchItem
+          key={item.session.key}
+          item={item}
+          selectedSessionKey={selectedSessionKey}
+          optimisticReadAtBySessionKey={optimisticReadAtBySessionKey}
+          sessionTypeOptions={sessionTypeOptions}
+          onSelect={onSelect}
+        />
+      ))}
+    </div>
+  );
+}
+
+function ChatSessionSwitchDateGroup({
+  group,
+  ...itemsProps
+}: Omit<SessionSwitchItemsProps, "items"> & {
+  group: ChatSidebarDateGroup;
+}) {
+  return (
+    <section aria-label={group.label}>
+      <div className="px-2 py-1 text-[11px] font-medium uppercase tracking-wider text-muted-foreground/70">
+        {group.label}
+      </div>
+      <ChatSessionSwitchItems items={group.items} {...itemsProps} />
+    </section>
+  );
+}
+
+function ChatSessionSwitchProjectGroup({
+  group,
+  isCollapsed,
+  onToggleCollapsed,
+  ...itemsProps
+}: Omit<SessionSwitchItemsProps, "items"> & {
+  group: ChatSidebarProjectGroup;
+  isCollapsed: boolean;
+  onToggleCollapsed: (projectRoot: string) => void;
+}) {
+  const contentId = useId();
+  const actionLabel = `${t(
+    isCollapsed ? "chatSidebarExpandProject" : "chatSidebarCollapseProject",
+  )} · ${group.projectName}`;
+
+  return (
+    <section aria-label={group.projectName}>
+      <button
+        type="button"
+        aria-controls={contentId}
+        aria-expanded={!isCollapsed}
+        aria-label={actionLabel}
+        className="group flex h-10 w-full min-w-0 items-center gap-1.5 rounded-lg px-2 text-left text-muted-foreground transition-colors hover:bg-gray-200/60 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+        onClick={() => onToggleCollapsed(group.projectRoot)}
+      >
+        <Folder className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
+        <span
+          className="min-w-0 flex-1 truncate text-[11px] font-medium uppercase tracking-wider"
+          title={group.projectRoot}
+        >
+          {group.projectName}
+        </span>
+        <span className="shrink-0 text-[10px] text-muted-foreground/70">
+          {group.items.length}
+        </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" />
+        )}
+      </button>
+      {isCollapsed ? null : (
+        <ChatSessionSwitchItems
+          items={group.items}
+          className="mt-0.5"
+          {...itemsProps}
+        />
+      )}
+    </section>
+  );
+}
+
+export function ChatSessionSwitcherGroups({
+  collapsedProjectRoots,
+  dateGroups,
+  isProjectFirstView,
+  onToggleProjectCollapsed,
+  projectGroups,
+  ...itemsProps
+}: Omit<SessionSwitchItemsProps, "items"> & {
+  collapsedProjectRoots: string[];
+  dateGroups: ChatSidebarDateGroup[];
+  isProjectFirstView: boolean;
+  onToggleProjectCollapsed: (projectRoot: string) => void;
+  projectGroups: ChatSidebarProjectGroup[];
+}) {
+  return (
+    <div className="space-y-3">
+      {isProjectFirstView
+        ? projectGroups.map((group) => (
+            <ChatSessionSwitchProjectGroup
+              key={group.projectRoot}
+              group={group}
+              isCollapsed={collapsedProjectRoots.includes(group.projectRoot)}
+              onToggleCollapsed={onToggleProjectCollapsed}
+              {...itemsProps}
+            />
+          ))
+        : dateGroups.map((group) => (
+            <ChatSessionSwitchDateGroup
+              key={group.label}
+              group={group}
+              {...itemsProps}
+            />
+          ))}
+    </div>
+  );
+}

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

@@ -1,33 +1,21 @@
 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 } from "@/features/chat/features/ncp/hooks/use-ncp-session-list-view";
 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";
+  groupSessionsByDate,
+  groupSessionsByProject,
+  sortSessionItemsByActivityAtDesc,
+} from "@/features/chat/features/session/utils/chat-sidebar-session-groups.utils";
+import { ChatSidebarListModeSwitch } from "@/features/chat/components/chat-sidebar-list-mode-switch";
+import { buildSessionTypeOptions } from "@/features/chat/features/session-type/utils/chat-session-type.utils";
+import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
+import { ChatSessionSwitcherGroups } from "@/features/chat/features/session/components/session-header/chat-session-switcher-groups";
 import { useChatQueryStore } from "@/features/chat/stores/ncp-chat-query.store";
 import { useViewportLayoutStore } from "@/app/stores/viewport-layout.store";
 import {
@@ -38,6 +26,7 @@ import { ChatPopoverContent } from "@/features/chat/components/chat-popover-cont
 import { Input } from "@/shared/components/ui/input";
 import { t } from "@/shared/lib/i18n";
 import { cn } from "@/shared/lib/utils";
+import { useProjects } from "@/shared/hooks/use-projects";
 
 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-1 focus-visible:ring-border";
@@ -68,96 +57,6 @@ function ChatSessionTitleSwitcherLoadingState() {
   );
 }
 
-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-1 focus-visible:ring-border",
-        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,
@@ -171,14 +70,51 @@ function ChatSessionTitleSwitcherPopover({
   const optimisticReadAtBySessionKey = useChatSessionListStore(
     (state) => state.optimisticReadAtBySessionKey,
   );
+  const pinnedSessionKeys = useChatSessionListStore(
+    (state) => state.snapshot.pinnedSessionKeys,
+  );
+  const pinnedProjectRoots = useChatSessionListStore(
+    (state) => state.snapshot.pinnedProjectRoots,
+  );
+  const collapsedProjectRoots = useChatSessionListStore(
+    (state) => state.snapshot.collapsedProjectRoots,
+  );
+  const listMode = useChatSessionListStore(
+    (state) => state.snapshot.listMode,
+  );
   const sessionTypesData = useChatQueryStore(
     (state) => state.snapshot.sessionTypesQuery?.data ?? null,
   );
   const { isLoading, items } = useNcpSessionListView({ query: searchQuery });
+  const projectsQuery = useProjects();
+  const visibleProjects = useMemo(() => {
+    const query = searchQuery.trim().toLowerCase();
+    const projects = projectsQuery.data?.projects ?? [];
+    if (!query) {
+      return projects;
+    }
+    return projects.filter((project) =>
+      project.name.toLowerCase().includes(query) ||
+      project.rootPath.toLowerCase().includes(query)
+    );
+  }, [projectsQuery.data?.projects, searchQuery]);
   const sortedItems = useMemo(
     () => sortSessionItemsByActivityAtDesc(items),
     [items],
   );
+  const dateGroups = useMemo(
+    () => groupSessionsByDate(sortedItems, new Set(pinnedSessionKeys)),
+    [pinnedSessionKeys, sortedItems],
+  );
+  const projectGroups = useMemo(
+    () => groupSessionsByProject(
+      sortedItems,
+      new Set(pinnedSessionKeys),
+      new Set(pinnedProjectRoots),
+      visibleProjects,
+    ),
+    [pinnedProjectRoots, pinnedSessionKeys, sortedItems, visibleProjects],
+  );
   const sessionTypeOptions = useMemo(
     () => buildSessionTypeOptions(sessionTypesData?.options ?? []),
     [sessionTypesData?.options],
@@ -198,6 +134,16 @@ function ChatSessionTitleSwitcherPopover({
       setSearchQuery("");
     }
   };
+  const sessionListProps = {
+    selectedSessionKey,
+    optimisticReadAtBySessionKey,
+    sessionTypeOptions,
+    onSelect: selectSession,
+  };
+  const isProjectFirstView = listMode === "project-first";
+  const hasVisibleGroups = isProjectFirstView
+    ? projectGroups.length > 0
+    : dateGroups.length > 0;
 
   return (
     <Popover open={isOpen} onOpenChange={updateOpen}>
@@ -222,8 +168,14 @@ function ChatSessionTitleSwitcherPopover({
         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 className="flex items-center justify-between gap-3">
+            <div className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground/75">
+              {t("chatSessionSwitcherTitle")}
+            </div>
+            <ChatSidebarListModeSwitch
+              isProjectFirstView={isProjectFirstView}
+              onSelectMode={presenter.chatSessionListManager.setListMode}
+            />
           </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" />
@@ -240,25 +192,27 @@ function ChatSessionTitleSwitcherPopover({
         <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>
+          ) : hasVisibleGroups ? (
+            <ChatSessionSwitcherGroups
+              collapsedProjectRoots={collapsedProjectRoots}
+              dateGroups={dateGroups}
+              isProjectFirstView={isProjectFirstView}
+              onToggleProjectCollapsed={
+                presenter.chatSessionListManager.toggleProjectCollapsed
+              }
+              projectGroups={projectGroups}
+              {...sessionListProps}
+            />
           ) : (
             <ChatSessionTitleSwitcherEmptyState
               label={
                 searchQuery.trim()
                   ? t("chatSessionSwitcherNoResults")
-                  : t("sessionsEmpty")
+                  : t(
+                      isProjectFirstView
+                        ? "chatSidebarProjectViewEmpty"
+                        : "sessionsEmpty",
+                    )
               }
             />
           )}

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

@@ -0,0 +1,22 @@
+import { describe, expect, it } from "vitest";
+import { groupSessionsByProject } from "@/features/chat/features/session/utils/chat-sidebar-session-groups.utils";
+
+describe("groupSessionsByProject", () => {
+  it("uses registered projects as the project-first baseline", () => {
+    const groups = groupSessionsByProject([], new Set(), new Set(), [{
+      name: "Knowledge",
+      rootPath: "/tmp/knowledge",
+      template: "knowledge-base",
+      createdAt: "2026-07-15T00:00:00.000Z",
+      updatedAt: "2026-07-15T00:00:00.000Z",
+    }]);
+
+    expect(groups).toEqual([{
+      projectRoot: "/tmp/knowledge",
+      projectName: "Knowledge",
+      items: [],
+      latestUpdatedAt: new Date("2026-07-15T00:00:00.000Z").getTime(),
+      isPinned: false,
+    }]);
+  });
+});

package/src/features/chat/features/session/utils/chat-run-metadata.utils.ts

@@ -2,7 +2,7 @@ import {
   CHAT_SESSION_MATERIALIZATION_METADATA_KEY,
   type AgentRunSessionMaterializationMetadata,
 } from "@nextclaw/shared";
-import { buildInlineSkillTokensFromComposer, CHAT_UI_INLINE_TOKENS_METADATA_KEY } from "@/features/chat/features/input/utils/chat-inline-token.utils";
+import { buildInlineTokensFromComposer, CHAT_INLINE_TOKENS_METADATA_KEY } from "@/features/chat/features/input/utils/chat-inline-token.utils";
 import { normalizeRequestedSkills } from "@/features/chat/features/runtime/utils/chat-runtime.utils";
 import { normalizeSessionProjectRootValue } from "@/shared/lib/session-project";
 
@@ -20,7 +20,7 @@ export function buildChatRunMetadata(payload: {
   sessionType?: string;
   projectRoot?: string | null;
   requestedSkills?: string[];
-  composerNodes?: Parameters<typeof buildInlineSkillTokensFromComposer>[0];
+  composerNodes?: Parameters<typeof buildInlineTokensFromComposer>[0];
   sessionMaterialization?: AgentRunSessionMaterializationMetadata | null;
 }): Record<string, unknown> {
   const projectRoot = normalizeSessionProjectRootValue(payload.projectRoot);
@@ -35,11 +35,11 @@ export function buildChatRunMetadata(payload: {
   if (requestedSkills.length > 0) {
     metadata.requested_skill_refs = requestedSkills;
   }
-  const inlineSkillTokens = payload.composerNodes
-    ? buildInlineSkillTokensFromComposer(payload.composerNodes)
+  const inlineTokens = payload.composerNodes
+    ? buildInlineTokensFromComposer(payload.composerNodes)
     : [];
-  if (inlineSkillTokens.length > 0) {
-    metadata[CHAT_UI_INLINE_TOKENS_METADATA_KEY] = inlineSkillTokens;
+  if (inlineTokens.length > 0) {
+    metadata[CHAT_INLINE_TOKENS_METADATA_KEY] = inlineTokens;
   }
   if (payload.sessionMaterialization) {
     metadata[CHAT_SESSION_MATERIALIZATION_METADATA_KEY] = payload.sessionMaterialization;

package/src/features/chat/features/session/utils/chat-sidebar-session-groups.utils.ts

@@ -1,4 +1,4 @@
-import type { SessionEntryView } from "@/shared/lib/api";
+import type { ProjectView, SessionEntryView } from "@/shared/lib/api";
 import type { NcpSessionListItemView } from "@/features/chat/features/ncp/hooks/use-ncp-session-list-view";
 import { getSessionProjectName } from "@/shared/lib/session-project";
 import { t } from "@/shared/lib/i18n";
@@ -96,9 +96,20 @@ export function groupSessionsByProject(
   items: NcpSessionListItemView[],
   pinnedSessionKeys: ReadonlySet<string> = new Set(),
   pinnedProjectRoots: ReadonlySet<string> = new Set(),
+  projects: readonly ProjectView[] = [],
 ): ChatSidebarProjectGroup[] {
   const grouped = new Map<string, ChatSidebarProjectGroup>();
 
+  for (const project of projects) {
+    grouped.set(project.rootPath, {
+      projectRoot: project.rootPath,
+      projectName: project.name,
+      items: [],
+      latestUpdatedAt: new Date(project.updatedAt).getTime(),
+      isPinned: pinnedProjectRoots.has(project.rootPath),
+    });
+  }
+
   for (const item of items) {
     const projectRoot = item.session.projectRoot?.trim();
     if (!projectRoot) {