@nextclaw/ui 0.15.4 → 0.15.6

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

@@ -1,5 +1,5 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { render, screen } from "@testing-library/react";
+import { render, screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import type { PersistStorage, StorageValue } from "zustand/middleware";
 import { beforeEach, describe, expect, it, vi } from "vitest";
@@ -15,6 +15,8 @@ const mocks = vi.hoisted(() => ({
   deleteSession: vi.fn(),
   toggleWorkspacePanel: vi.fn(),
   selectSession: vi.fn(),
+  setListMode: vi.fn(),
+  toggleProjectCollapsed: vi.fn(),
   sessionItems: [] as NcpSessionListItemView[],
   isSessionListLoading: false,
 }));
@@ -27,6 +29,8 @@ vi.mock("@/features/chat/components/providers/chat-presenter.provider", () => ({
     },
     chatSessionListManager: {
       selectSession: mocks.selectSession,
+      setListMode: mocks.setListMode,
+      toggleProjectCollapsed: mocks.toggleProjectCollapsed,
     },
   }),
 }));
@@ -120,6 +124,8 @@ describe("ChatConversationHeaderSection", () => {
     mocks.deleteSession.mockReset();
     mocks.toggleWorkspacePanel.mockReset();
     mocks.selectSession.mockReset();
+    mocks.setListMode.mockReset();
+    mocks.toggleProjectCollapsed.mockReset();
     mocks.isSessionListLoading = false;
     viewportLayoutManager.resetForTests();
     useChatSessionListStore.persist.setOptions({
@@ -131,10 +137,25 @@ describe("ChatConversationHeaderSection", () => {
     useChatSessionListStore.setState({
       snapshot: {
         ...useChatSessionListStore.getState().snapshot,
+        collapsedProjectRoots: [],
+        listMode: "time-first",
+        pinnedProjectRoots: [],
+        pinnedSessionKeys: [],
         selectedAgentId: "main",
         selectedSessionKey: "parent-session-1",
       },
     });
+    mocks.setListMode.mockImplementation((listMode) => {
+      useChatSessionListStore.getState().setSnapshot({ listMode });
+    });
+    mocks.toggleProjectCollapsed.mockImplementation((projectRoot) => {
+      const { collapsedProjectRoots } = useChatSessionListStore.getState().snapshot;
+      useChatSessionListStore.getState().setSnapshot({
+        collapsedProjectRoots: collapsedProjectRoots.includes(projectRoot)
+          ? collapsedProjectRoots.filter((root) => root !== projectRoot)
+          : [...collapsedProjectRoots, projectRoot],
+      });
+    });
     useChatThreadStore.setState({
       snapshot: {
         ...useChatThreadStore.getState().snapshot,
@@ -229,6 +250,68 @@ describe("ChatConversationHeaderSection", () => {
     expect(mocks.selectSession).toHaveBeenCalledWith("session:ncp-2");
   });
 
+  it("uses lightweight static groups for pinned and activity dates", async () => {
+    const user = userEvent.setup();
+    viewportLayoutManager.setSidebarCollapsed(true);
+    useChatSessionListStore.setState({
+      snapshot: {
+        ...useChatSessionListStore.getState().snapshot,
+        pinnedSessionKeys: ["session:ncp-2"],
+      },
+    });
+
+    renderHeaderSection();
+    await user.click(screen.getByRole("button", { name: /Switch session/ }));
+
+    const pinnedGroup = screen.getByRole("region", { name: "Pinned" });
+    const pinnedTitle = within(pinnedGroup).getByText("Pinned");
+    expect(pinnedTitle.className).toContain("uppercase");
+    expect(pinnedTitle.className).not.toContain("bg-muted");
+    expect(within(pinnedGroup).queryByRole("button", { name: "Pinned" })).toBeNull();
+    expect(within(pinnedGroup).getByText("Background Task")).toBeTruthy();
+    expect(
+      within(screen.getByRole("region", { name: "Older" })).getByText("Parent Task"),
+    ).toBeTruthy();
+  });
+
+  it("switches to collapsible project groups inside the header popover", async () => {
+    const user = userEvent.setup();
+    viewportLayoutManager.setSidebarCollapsed(true);
+    mocks.sessionItems = [
+      createSessionListItem({
+        key: "parent-session-1",
+        label: "Parent Task",
+        projectName: "Alpha",
+        projectRoot: "/workspace/alpha",
+      }),
+      createSessionListItem({
+        key: "session:ncp-2",
+        label: "Background Task",
+        projectName: "Beta",
+        projectRoot: "/workspace/beta",
+      }),
+    ];
+
+    renderHeaderSection();
+    await user.click(screen.getByRole("button", { name: /Switch session/ }));
+    await user.click(screen.getByRole("button", { name: "Project" }));
+
+    expect(mocks.setListMode).toHaveBeenCalledWith("project-first");
+    const alphaGroup = screen.getByRole("region", { name: "Alpha" });
+    const alphaToggle = within(alphaGroup).getByRole("button", {
+      name: "Collapse project · Alpha",
+    });
+    expect(alphaToggle.getAttribute("aria-expanded")).toBe("true");
+    expect(alphaToggle.className).not.toContain("bg-muted");
+    expect(within(alphaGroup).getByText("Parent Task")).toBeTruthy();
+
+    await user.click(alphaToggle);
+    expect(mocks.toggleProjectCollapsed).toHaveBeenCalledWith("/workspace/alpha");
+    expect(
+      within(screen.getByRole("region", { name: "Alpha" })).queryByText("Parent Task"),
+    ).toBeNull();
+  });
+
   it("keeps the desktop title plain while the sidebar is expanded", () => {
     renderHeaderSection();
 

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

@@ -17,7 +17,10 @@ import { useChatSessionListStore } from "@/features/chat/stores/chat-session-lis
 import { useChatThreadStore } from "@/features/chat/stores/chat-thread.store";
 import { useChatQueryStore } from "@/features/chat/stores/ncp-chat-query.store";
 import { AgentIdentityAvatar } from "@/shared/components/common/agent-identity";
-import { getSessionProjectName } from "@/shared/lib/session-project";
+import {
+  getSessionProjectName,
+  normalizeSessionProjectRootValue,
+} from "@/shared/lib/session-project";
 import { t } from "@/shared/lib/i18n";
 
 type ChatConversationHeaderSectionProps = {
@@ -40,6 +43,9 @@ export function ChatConversationHeaderSection({
   const sessionTypesData = useChatQueryStore(
     (state) => state.snapshot.sessionTypesQuery?.data ?? null,
   );
+  const config = useChatQueryStore(
+    (state) => state.snapshot.configQuery?.data ?? null,
+  );
   const selectedSession = useNcpChatSelectedSession(sessionKey);
   const sessionTypeOptions = useMemo(
     () => buildSessionTypeOptions(sessionTypesData?.options ?? []),
@@ -55,6 +61,9 @@ export function ChatConversationHeaderSection({
   const shouldShowSessionTypeBadge =
     sessionType !== DEFAULT_SESSION_TYPE && Boolean(sessionTypeLabel);
   const sessionProjectRoot = selectedSession?.projectRoot ?? null;
+  const defaultWorkspacePath = normalizeSessionProjectRootValue(
+    config?.agents.defaults.workspace,
+  );
   const sessionProjectName =
     selectedSession?.projectName ?? getSessionProjectName(sessionProjectRoot);
   const canDeleteSession = Boolean(selectedSession);
@@ -129,6 +138,7 @@ export function ChatConversationHeaderSection({
             sessionKey={sessionKey ?? "draft"}
             projectName={sessionProjectName}
             projectRoot={sessionProjectRoot}
+            defaultWorkspacePath={defaultWorkspacePath}
             persistToServer={canDeleteSession}
           />
         ) : null
@@ -139,7 +149,8 @@ export function ChatConversationHeaderSection({
             sessionKey={sessionKey}
             canDeleteSession={canDeleteSession}
             isDeletePending={snapshot.isDeletePending}
-            projectRoot={sessionProjectRoot}
+            currentPath={sessionProjectRoot ?? selectedSession?.workingDir ?? null}
+            defaultWorkspacePath={defaultWorkspacePath}
             metadata={selectedSession?.metadata ?? null}
             isWorkspaceOpen={isWorkspaceOpen}
             onToggleWorkspace={toggleWorkspace}

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

@@ -34,6 +34,7 @@ export function ChatConversationWorkspaceSection({
       activeSideChatDraft={activeSideChatDraft}
       workspaceFileTabs={workspaceFileTabs}
       activeWorkspaceFileKey={snapshot.activeWorkspaceFileKey ?? null}
+      closedWorkspaceTabEntries={snapshot.closedWorkspaceTabEntries}
       workspaceNavigationHistory={snapshot.workspaceNavigationHistory}
       workspaceNavigationHistoryIndex={snapshot.workspaceNavigationHistoryIndex}
       activePanelKind={snapshot.activeWorkspacePanelKind ?? null}

package/src/features/chat/components/layout/__tests__/chat-sidebar-test.utils.ts

@@ -0,0 +1,22 @@
+import type { NcpSessionListItemView } from '@/features/chat/features/ncp/hooks/use-ncp-session-list-view';
+import { useChatQueryStore } from '@/features/chat/stores/ncp-chat-query.store';
+import type { ChatSessionTypeOptionView } from '@/shared/lib/api';
+
+export function createSidebarSessionItem(
+  session: NcpSessionListItemView['session'],
+  runStatus?: NcpSessionListItemView['runStatus'],
+): NcpSessionListItemView {
+  return { session, runStatus };
+}
+
+export function setSidebarSessionTypes(
+  options: ChatSessionTypeOptionView[],
+  defaultType = 'native',
+) {
+  useChatQueryStore.setState({
+    snapshot: {
+      ...useChatQueryStore.getState().snapshot,
+      sessionTypesQuery: { data: { defaultType, options } } as never,
+    },
+  });
+}

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

@@ -3,11 +3,13 @@ import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { ChatSidebar } from "@/features/chat/components/layout/chat-sidebar";
+import {
+  createSidebarSessionItem as createSessionItem,
+  setSidebarSessionTypes as setSessionTypes,
+} from "@/features/chat/components/layout/__tests__/chat-sidebar-test.utils";
 import type { NcpSessionListItemView } from "@/features/chat/features/ncp/hooks/use-ncp-session-list-view";
-import { useChatQueryStore } from "@/features/chat/stores/ncp-chat-query.store";
 import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
 import { PREFERENCE_KEYS } from "@/shared/lib/api";
-import type { ChatSessionTypeOptionView } from "@/shared/lib/api";
 import { viewportLayoutManager } from "@/app/managers/viewport-layout.manager";
 const mocks = vi.hoisted(() => ({
   createSession: vi.fn(() => "draft-session-key"),
@@ -39,28 +41,15 @@ vi.mock("@/shared/lib/api", async (importOriginal) => {
     updatePreference: mocks.updatePreference,
   };
 });
-function createSessionItem(
-  session: NcpSessionListItemView["session"],
-  runStatus?: NcpSessionListItemView["runStatus"],
-): NcpSessionListItemView {
-  return { session, runStatus };
-}
-function setSessionTypes(
-  options: ChatSessionTypeOptionView[],
-  defaultType = "native",
-) {
-  useChatQueryStore.setState({
-    snapshot: {
-      ...useChatQueryStore.getState().snapshot,
-      sessionTypesQuery: {
-        data: {
-          defaultType,
-          options,
-        },
-      } as never,
-    },
-  });
-}
+vi.mock("@/shared/hooks/use-projects", () => ({
+  useProjects: () => ({ data: { projects: [], templates: [] } }),
+  useCreateProject: () => ({
+    mutateAsync: vi.fn(),
+    reset: vi.fn(),
+    isPending: false,
+    error: null,
+  }),
+}));
 function sidebarElement(variant?: "desktop" | "mobile") {
   const queryClient = new QueryClient({
     defaultOptions: {

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

@@ -18,6 +18,7 @@ import {
   BrainCircuit,
   PanelLeftClose,
   PanelLeftOpen,
+  Plus,
 } from "lucide-react";
 import { ChatSidebarSessionList } from "@/features/chat/features/session/components/chat-sidebar-session-list";
 import { ChatSidebarUtilityMenu } from "@/features/chat/components/layout/chat-sidebar-utility-menu";
@@ -134,6 +135,7 @@ export function ChatSidebarSessionArea({
   isCollapsed,
   isLoading,
   isProjectFirstView,
+  onCreateProject,
   onSelectMode,
   projectGroups,
   renderSessionItem,
@@ -144,6 +146,7 @@ export function ChatSidebarSessionArea({
   isCollapsed: boolean;
   isLoading: boolean;
   isProjectFirstView: boolean;
+  onCreateProject: () => void;
   onSelectMode: (mode: "time-first" | "project-first") => void;
   projectGroups: ReturnType<typeof groupSessionsByProject>;
   renderSessionItem: (item: NcpSessionListItemView) => JSX.Element;
@@ -161,10 +164,19 @@ export function ChatSidebarSessionArea({
         <div className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground/75">
           {t("chatSidebarTaskRecords")}
         </div>
-        <ChatSidebarListModeSwitch
-          isProjectFirstView={isProjectFirstView}
-          onSelectMode={onSelectMode}
-        />
+        <div className="flex items-center gap-1">
+          {isProjectFirstView ? (
+            <IconActionButton
+              icon={<Plus className="h-3.5 w-3.5" />}
+              label={t("chatProjectCreate")}
+              onClick={onCreateProject}
+            />
+          ) : null}
+          <ChatSidebarListModeSwitch
+            isProjectFirstView={isProjectFirstView}
+            onSelectMode={onSelectMode}
+          />
+        </div>
       </div>
 
       <div

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

@@ -16,6 +16,9 @@ import { useChatSessionListStore } from "@/features/chat/stores/chat-session-lis
 import { useChatQueryStore } from "@/features/chat/stores/ncp-chat-query.store";
 import { useSystemStatus } from "@/features/system-status";
 import { useAgents } from "@/shared/hooks/use-agents";
+import { useCreateProject, useProjects } from "@/shared/hooks/use-projects";
+import type { ProjectCreateRequest } from "@/shared/lib/api";
+import { normalizeSessionProjectRootValue } from "@/shared/lib/session-project";
 import { cn } from "@/shared/lib/utils";
 import { LANGUAGE_OPTIONS, t, type I18nLanguage } from "@/shared/lib/i18n";
 import { THEME_OPTIONS } from "@/shared/lib/theme";
@@ -42,6 +45,7 @@ import {
 import { useChatNewSessionTypePreference } from "@/features/chat/features/session-type/hooks/use-chat-new-session-type-preference";
 import { useViewportLayoutStore } from "@/app/stores/viewport-layout.store";
 import { SIDEBAR_RAIL_WIDTH_CLASS } from "@/app/components/layout/sidebar-rail.styles";
+import { ChatProjectCreateDialog } from "@/features/chat/features/project/components/chat-project-create-dialog";
 
 type ChatSidebarVariant = "desktop" | "mobile";
 
@@ -94,13 +98,19 @@ export function ChatSidebar({
     (state) => state.isSidebarCollapsed,
   );
   const [isCreateMenuOpen, setIsCreateMenuOpen] = useState(false);
+  const [isProjectCreateOpen, setIsProjectCreateOpen] = useState(false);
   const [isUtilityMenuOpen, setIsUtilityMenuOpen] = useState(false);
   const listSnapshot = useChatSessionListStore((state) => state.snapshot);
   const sessionTypesData = useChatQueryStore(
     (state) => state.snapshot.sessionTypesQuery?.data ?? null,
   );
+  const config = useChatQueryStore(
+    (state) => state.snapshot.configQuery?.data ?? null,
+  );
   const systemStatus = useSystemStatus();
   const agentsQuery = useAgents();
+  const projectsQuery = useProjects();
+  const projectCreateMutation = useCreateProject();
   const { isLoading, items } = useNcpSessionListView();
   const { language, setLanguage } = useI18n();
   const { theme, setTheme } = useTheme();
@@ -153,8 +163,13 @@ export function ChatSidebar({
     [pinnedSessionKeys, sortedItems],
   );
   const projectGroups = useMemo(
-    () => groupSessionsByProject(sortedItems, pinnedSessionKeys, pinnedProjectRoots),
-    [pinnedProjectRoots, pinnedSessionKeys, sortedItems],
+    () => groupSessionsByProject(
+      sortedItems,
+      pinnedSessionKeys,
+      pinnedProjectRoots,
+      projectsQuery.data?.projects ?? [],
+    ),
+    [pinnedProjectRoots, pinnedSessionKeys, projectsQuery.data?.projects, sortedItems],
   );
   const sessionTypeOptions = useMemo(
     () => buildSessionTypeOptions(sessionTypesData?.options ?? []),
@@ -238,6 +253,14 @@ export function ChatSidebar({
       typeof projectRoot === "string" ? projectRoot : undefined,
     );
   };
+  const openProjectCreate = () => {
+    projectCreateMutation.reset();
+    setIsProjectCreateOpen(true);
+  };
+  const createProjectFromSidebar = async (input: ProjectCreateRequest): Promise<void> => {
+    await projectCreateMutation.mutateAsync(input);
+    setIsProjectCreateOpen(false);
+  };
 
   return (
     <aside
@@ -310,6 +333,7 @@ export function ChatSidebar({
         isCollapsed={shouldCollapse}
         isLoading={isLoading}
         isProjectFirstView={isProjectFirstView}
+        onCreateProject={openProjectCreate}
         onSelectMode={presenter.chatSessionListManager.setListMode}
         projectGroups={projectGroups}
         renderSessionItem={renderSessionItem}
@@ -338,6 +362,18 @@ export function ChatSidebar({
           themeOptions={utilityThemeOptions}
         />
       ) : null}
+
+      <ChatProjectCreateDialog
+        open={isProjectCreateOpen}
+        defaultWorkspacePath={normalizeSessionProjectRootValue(
+          config?.agents.defaults.workspace,
+        )}
+        templates={projectsQuery.data?.templates ?? []}
+        isCreating={projectCreateMutation.isPending}
+        errorMessage={projectCreateMutation.error?.message}
+        onOpenChange={setIsProjectCreateOpen}
+        onCreate={createProjectFromSidebar}
+      />
     </aside>
   );
 }

package/src/features/chat/features/conversation/components/__tests__/session-conversation-area.test.tsx

@@ -21,6 +21,7 @@ const mocks = vi.hoisted(() => {
     removeAttachment: vi.fn(),
     setSelectedModel: vi.fn(),
     setSelectedThinkingLevel: vi.fn(),
+    syncSessionPreferences: vi.fn(),
     setPendingSessionType: vi.fn(),
     setPendingProjectRoot: vi.fn(),
     setSelectedSkills: vi.fn(),

package/src/features/chat/features/conversation/components/__tests__/session-conversation-input.streaming.test.tsx

@@ -110,6 +110,42 @@ function createStreamingInputSnapshot(
   };
 }
 
+function setImeDomText(textbox: HTMLElement, text: string): HTMLParagraphElement {
+  const paragraph = textbox.querySelector('p');
+  if (!paragraph) {
+    throw new Error('Expected the Lexical composer paragraph to exist.');
+  }
+  const range = document.createRange();
+  const lexicalText = paragraph.querySelector('[data-lexical-text="true"]')?.firstChild;
+  if (lexicalText?.nodeType === Node.TEXT_NODE) {
+    lexicalText.nodeValue = text;
+    range.setStart(lexicalText, text.length);
+    range.collapse(true);
+  } else {
+    paragraph.textContent = text;
+    range.selectNodeContents(paragraph);
+    range.collapse(false);
+  }
+  const selection = window.getSelection();
+  selection?.removeAllRanges();
+  selection?.addRange(range);
+  return paragraph;
+}
+
+async function insertText(textbox: HTMLElement, text: string): Promise<void> {
+  await act(async () => {
+    for (const character of text) {
+      textbox.dispatchEvent(new InputEvent('beforeinput', {
+        bubbles: true,
+        cancelable: true,
+        data: character,
+        inputType: 'insertText',
+      }));
+      await Promise.resolve();
+    }
+  });
+}
+
 function StreamingSessionConversationInputHarness({
   controllerOverride = controller,
   controlRef,
@@ -145,6 +181,7 @@ function StreamingSessionConversationInputHarness({
     setSelectedModel: vi.fn(),
     setSelectedSkills: vi.fn(),
     setSelectedThinkingLevel: vi.fn(),
+    syncSessionPreferences: vi.fn(),
     setSendError: vi.fn(),
     syncComposer: vi.fn(),
     update: (patch: SessionConversationInputPatch) => {
@@ -209,23 +246,36 @@ describe('SessionConversationInput streaming stability', () => {
     expect(track?.firstElementChild?.className).toContain('px-0');
   });
 
-  it('keeps IME composition stable while simulated streamed output rerenders the owner', async () => {
+  it('keeps a numbered IME candidate commit stable while streamed output rerenders the owner', async () => {
     const controlRef: MutableRefObject<StreamingInputControl | null> = { current: null };
     render(<StreamingSessionConversationInputHarness controlRef={controlRef} />);
 
     const textbox = screen.getByRole('textbox');
     fireEvent.focus(textbox);
+    await insertText(textbox, 'n');
     fireEvent.compositionStart(textbox);
+    const paragraph = setImeDomText(textbox, 'ni');
 
     act(() => {
       controlRef.current?.bumpStream();
       controlRef.current?.bumpStream();
     });
     expect(screen.getByTestId('stream-chunk').textContent).toBe('2');
-
+    expect(textbox.querySelector('p')).toBe(paragraph);
+    expect(textbox.textContent).toBe('ni');
+
+    fireEvent.keyDown(textbox, { key: '1', isComposing: true });
+    setImeDomText(textbox, '你');
+    fireEvent.input(textbox, {
+      data: '你',
+      inputType: 'insertCompositionText',
+      isComposing: true,
+    });
     fireEvent.compositionEnd(textbox, { data: '你' });
 
     await waitFor(() => expect(textbox.textContent).toBe('你'));
+    expect(textbox.querySelector('p')).toBe(paragraph);
+    await waitFor(() => expect(window.getSelection()?.anchorOffset).toBe(1));
   });
 
   it('renders queued inputs above the composer with edit and delete actions', () => {

package/src/features/chat/features/conversation/components/session-conversation-area.tsx

@@ -188,6 +188,28 @@ export function SessionConversationArea(props: SessionConversationAreaProps) {
     inputSnapshot,
     setPendingSessionType: inputActions.setPendingSessionType,
   });
+  useEffect(() => {
+    inputActions.syncSessionPreferences({
+      defaultModel: inputQuery.defaultModel,
+      fallbackPreferredModel: inputQuery.fallbackPreferredModel,
+      fallbackPreferredThinking: inputQuery.fallbackPreferredThinking,
+      modelOptions: inputQuery.modelOptions,
+      selectedSessionExists: Boolean(inputQuery.selectedSession),
+      selectedSessionKey: inputQuery.selectedSessionKey,
+      selectedSessionPreferredModel:
+        inputQuery.selectedSession?.preferredModel ?? undefined,
+      selectedSessionPreferredThinking:
+        inputQuery.selectedSession?.preferredThinking ?? null,
+    });
+  }, [
+    inputActions,
+    inputQuery.defaultModel,
+    inputQuery.fallbackPreferredModel,
+    inputQuery.fallbackPreferredThinking,
+    inputQuery.modelOptions,
+    inputQuery.selectedSession,
+    inputQuery.selectedSessionKey,
+  ]);
   useSessionConversationDraftRouteState({
     sessionKey,
     setPendingProjectRoot: inputActions.setPendingProjectRoot,

package/src/features/chat/features/conversation/components/session-conversation-input.tsx

@@ -67,6 +67,7 @@ import {
 import { SessionQueuedInputRows } from './session-queued-input-rows';
 
 type SessionConversationInputQuery = ReturnType<typeof useSessionConversationInputQuery>;
+type SkillSource = SessionSkillEntryView['source'];
 
 export type SessionConversationInputController = {
   readonly canStopGeneration: boolean;
@@ -82,15 +83,18 @@ export type SessionConversationInputController = {
 
 function toSkillRecords(
   snapshotRecords: SessionSkillEntryView[],
-  scopeLabels: Record<SessionSkillEntryView['scope'], string>,
+  scopeLabels: Record<SkillSource, string>,
+  groupLabels: Record<SkillSource, string>,
 ): ChatSkillRecord[] {
   return snapshotRecords.map((record) => ({
     key: record.ref,
     label: record.name,
-    scopeLabel: scopeLabels[record.scope],
+    scopeLabel: scopeLabels[record.source],
+    groupKey: record.source,
+    groupLabel: groupLabels[record.source],
     description: record.description,
     descriptionZh: record.descriptionZh,
-    badgeLabel: scopeLabels[record.scope],
+    badgeLabel: scopeLabels[record.source],
   }));
 }
 
@@ -109,12 +113,21 @@ function toModelRecords(snapshotModels: SessionConversationInputQuery['modelOpti
 }
 
 function useSessionConversationInputLabels(language: string) {
-  const skillScopeLabels = useMemo<Record<'builtin' | 'project' | 'workspace', string>>(() => {
+  const { skillGroupLabels, skillScopeLabels } = useMemo(() => {
     void language;
     return {
-      builtin: t('chatSkillScopeBuiltin'),
-      project: t('chatSkillScopeProject'),
-      workspace: t('chatSkillScopeWorkspace'),
+      skillScopeLabels: {
+        builtin: t('chatSkillScopeBuiltin'),
+        global: t('chatSkillScopeGlobal'),
+        project: t('chatSkillScopeProject'),
+        workspace: t('chatSkillScopeWorkspace'),
+      } satisfies Record<SkillSource, string>,
+      skillGroupLabels: {
+        builtin: t('chatSkillGroupBuiltin'),
+        global: t('chatSkillGroupGlobal'),
+        project: t('chatSkillGroupProject'),
+        workspace: t('chatSkillGroupWorkspace'),
+      } satisfies Record<SkillSource, string>,
     };
   }, [language]);
   const slashTexts = useMemo(() => {
@@ -128,6 +141,7 @@ function useSessionConversationInputLabels(language: string) {
   }, [language]);
   return {
     skillScopeLabels,
+    skillGroupLabels,
     slashTexts,
     recentModelsLabel: t('chatPickerRecentModels'),
     allModelsLabel: t('chatPickerAllModels'),
@@ -144,13 +158,15 @@ function useSessionConversationInputLabels(language: string) {
 function useSessionConversationInputCollections(params: {
   modelOptions: SessionConversationInputQuery['modelOptions'];
   skillRecords: SessionSkillEntryView[];
-  skillScopeLabels: Record<'builtin' | 'project' | 'workspace', string>;
+  skillScopeLabels: Record<SkillSource, string>;
+  skillGroupLabels: Record<SkillSource, string>;
 }) {
+  const { modelOptions, skillGroupLabels, skillRecords: sourceSkillRecords, skillScopeLabels } = params;
   const skillRecords = useMemo(
-    () => toSkillRecords(params.skillRecords, params.skillScopeLabels),
-    [params.skillRecords, params.skillScopeLabels],
+    () => toSkillRecords(sourceSkillRecords, skillScopeLabels, skillGroupLabels),
+    [skillGroupLabels, skillScopeLabels, sourceSkillRecords],
   );
-  const modelRecords = useMemo(() => toModelRecords(params.modelOptions), [params.modelOptions]);
+  const modelRecords = useMemo(() => toModelRecords(modelOptions), [modelOptions]);
   return {
     skillRecords,
     modelRecords,
@@ -203,6 +219,7 @@ export const SessionConversationInput = memo(function SessionConversationInput(p
   } = useSessionConversationInputCollections({
     modelOptions: inputQuery.modelOptions,
     skillRecords: inputQuery.skillRecords,
+    skillGroupLabels: labels.skillGroupLabels,
     skillScopeLabels: labels.skillScopeLabels,
   });
   const slashCommands = useMemo(() => {
@@ -232,6 +249,9 @@ export const SessionConversationInput = memo(function SessionConversationInput(p
       }),
     [presenter.chatUiManager],
   );
+  const contextReferenceProjectRoot = inputQuery.selectedSessionKey
+    ? inputQuery.selectedSession?.projectRoot ?? inputQuery.defaultProjectRoot ?? ''
+    : inputSnapshot.pendingProjectRoot ?? inputQuery.defaultProjectRoot ?? '';
   const { inputSurfaceState, setInputSurfaceTrigger } = useChatInputSurfaceState({
     commands: slashCommands,
     isSkillsLoading: inputQuery.isSkillsLoading,
@@ -241,6 +261,7 @@ export const SessionConversationInput = memo(function SessionConversationInput(p
     language,
     onSelectPanelApp: handleSlashPanelAppSelect,
     onSelectSkill: chatRecentSkillsManager.remember,
+    projectRoot: contextReferenceProjectRoot,
     recentSkillValues,
     skillRecords,
   });
@@ -252,15 +273,9 @@ export const SessionConversationInput = memo(function SessionConversationInput(p
     favoriteModelValues,
     setModelFavorite,
   } = useChatModelFavorites(modelRecordValues);
-  const selectedModel =
-    inputSnapshot.selectedModel ??
-    inputQuery.fallbackPreferredModel ??
-    inputQuery.defaultModel ??
-    '';
+  const selectedModel = inputSnapshot.selectedModel ?? '';
   const selectedThinkingLevel = (
-    inputSnapshot.selectedThinkingLevel ??
-    inputQuery.fallbackPreferredThinking ??
-    null
+    inputSnapshot.selectedThinkingLevel
   ) as ChatThinkingLevel | null;
   const availabilitySnapshot = {
     isProviderStateResolved: inputQuery.isProviderStateResolved,
@@ -391,6 +406,7 @@ export const SessionConversationInput = memo(function SessionConversationInput(p
     skillRecords,
     selectedSkills: inputSnapshot.selectedSkills,
   });
+  const composerNodes = useMemo(() => [...inputSnapshot.nodes], [inputSnapshot.nodes]);
 
   const useReadingTrack = surface === 'default' && messageLayout === 'flat';
   const inputBar = (
@@ -403,7 +419,7 @@ export const SessionConversationInput = memo(function SessionConversationInput(p
         ? <SessionQueuedInputRows controller={controller} />
         : null}
       composer={{
-        nodes: [...inputSnapshot.nodes],
+        nodes: composerNodes,
         placeholder: textareaPlaceholder,
         disabled: inputDisabled,
         onNodesChange: handleNodesChange,