@nextclaw/ui 0.15.19 → 0.15.21

package/src/app/configs/app-navigation.config.ts

@@ -5,6 +5,7 @@ import {
   AlarmClock,
   Cpu,
   Download,
+  Inbox,
   KeyRound,
   MessageCircle,
   MessageSquare,
@@ -44,6 +45,8 @@ export function isMainWorkspaceRoute(pathname: string): boolean {
   return (
     normalized === "/chat" ||
     normalized.startsWith("/chat/") ||
+    normalized === "/inbox" ||
+    normalized.startsWith("/inbox/") ||
     normalized === "/skills" ||
     normalized.startsWith("/skills/") ||
     normalized === "/cron" ||
@@ -67,6 +70,11 @@ export function getMobileBottomNavItems(
       label: translate("chat"),
       icon: MessageCircle,
     },
+    {
+      target: "/inbox",
+      label: translate("inboxTitle"),
+      icon: Inbox,
+    },
     {
       target: "/skills",
       label: translate("marketplaceFilterSkills"),
@@ -94,6 +102,11 @@ export function getMainSidebarNavItems(
       label: translate("chat"),
       icon: MessageCircle,
     },
+    {
+      target: "/inbox",
+      label: translate("inboxTitle"),
+      icon: Inbox,
+    },
     {
       target: "/chat/cron",
       label: translate("cron"),
@@ -227,6 +240,14 @@ export function resolveMobileRouteMeta(
     };
   }
 
+  if (normalized === "/inbox" || normalized.startsWith("/inbox/")) {
+    return {
+      title: translate("inboxTitle"),
+      backTarget: normalized === "/inbox" ? null : "/inbox",
+      backLabel: translate("inboxTitle"),
+    };
+  }
+
   if (normalized === "/skills" || normalized.startsWith("/skills/")) {
     return {
       title: translate("marketplaceFilterSkills"),

package/src/app/index.tsx

@@ -1,14 +1,17 @@
 import { lazy, Suspense, useEffect } from "react";
-import type { ReactElement } from "react";
+import type { CSSProperties, ReactElement } from "react";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { Navigate, Route, Routes } from "react-router-dom";
 import { Toaster } from "sonner";
 import { appQueryClient } from "@/app-query-client";
 import { AppPresenterProvider } from "@/app/components/app-presenter-provider";
+import { AppNotificationRuntime } from "@/app/components/app-notification-runtime";
 import { AppLayout } from "@/app/components/layout/app-layout";
+import { SIDEBAR_RAIL_WIDTH_PX } from "@/app/components/layout/sidebar-rail.styles";
 import { SettingsEntryPage } from "@/app/components/layout/settings-entry-page";
 import { LoginPage } from "@/components/auth/login-page";
 import { AccountPanel } from "@/features/account";
+import { InboxRuntime } from "@/features/inbox";
 import { ServiceActionAuthorizationDialog } from "@/features/service-apps";
 import { runtimeUpdateManager, useSystemStatusSources } from "@/features/system-status";
 import {
@@ -21,6 +24,8 @@ import {
 } from "@/pwa/components/pwa-install-entry";
 import { startNextClawPwa } from "@/pwa/register-pwa";
 
+const NOTIFICATION_TOASTER_STYLE = { "--width": "320px" } as CSSProperties;
+
 const ModelConfigPage = lazy(async () => ({
   default: (await import("@/features/settings/pages/model-config-page"))
     .ModelConfigPage,
@@ -117,6 +122,10 @@ const protectedRouteDefinitions: ProtectedRouteDefinition[] = [
     path: "/cron",
     element: createLazyElement(<ChatPage view="cron" />),
   },
+  {
+    path: "/inbox/:deliveryId?",
+    element: createLazyElement(<ChatPage view="inbox" />),
+  },
   {
     path: "/appearance",
     element: createLazyElement(<AppearanceSettingsPage />),
@@ -219,6 +228,8 @@ function ProtectedApp() {
 
   return (
     <AppPresenterProvider>
+      <AppNotificationRuntime />
+      <InboxRuntime />
       <AppLayout>
         <ProtectedRoutes />
       </AppLayout>
@@ -257,7 +268,16 @@ export default function AppContent() {
     <QueryClientProvider client={appQueryClient}>
       <AuthGate />
       <PwaInstallBanner />
-      <Toaster position="top-right" richColors offset={window.nextclawDesktop?.platform === "win32" ? 56 : undefined} mobileOffset={window.nextclawDesktop?.platform === "win32" ? 56 : undefined} />
+      <Toaster
+        position="top-right"
+        richColors
+        offset={{
+          top: window.nextclawDesktop?.platform === "win32" ? 56 : 44,
+          right: SIDEBAR_RAIL_WIDTH_PX + 16,
+        }}
+        mobileOffset={window.nextclawDesktop?.platform === "win32" ? 56 : undefined}
+        style={NOTIFICATION_TOASTER_STYLE}
+      />
     </QueryClientProvider>
   );
 }

package/src/app/presenters/app.presenter.ts

@@ -1,10 +1,13 @@
 import { AccountManager } from '@/features/account';
 import { viewportLayoutManager } from '@/app/managers/viewport-layout.manager';
 import {
+  ChatCompletionNotificationManager,
   ChatDraftIntentManager,
   useChatThreadStore,
 } from '@/features/chat';
+import { AppNotificationManager } from '@/features/notifications';
 import { PanelAppBridgeManager } from '@/features/panel-apps';
+import { InboxManager } from '@/features/inbox';
 import { RightPanelResourceRouteResolver } from '@/features/right-panel-resources';
 import { RemoteAccessManager } from '@/features/remote';
 import { ServiceActionAuthorizationManager } from '@/features/service-apps';
@@ -19,6 +22,11 @@ function isChatWorkspacePanelOpen(snapshot: ChatThreadSnapshot): boolean {
 }
 
 export class AppPresenter {
+  notificationManager = new AppNotificationManager();
+  inboxManager = new InboxManager();
+  chatCompletionNotificationManager = new ChatCompletionNotificationManager(
+    this.notificationManager,
+  );
   accountManager = new AccountManager();
   rightPanelResourceRouteResolver = new RightPanelResourceRouteResolver();
   notifyRightPanelOpened = () => {

package/src/features/chat/components/layout/chat-page-shell.tsx

@@ -6,7 +6,8 @@ import { CronConfig } from "@/features/cron";
 import { MarketplacePage } from "@/features/marketplace";
 import { useViewportLayout } from "@/app/hooks/use-viewport-layout";
 import { ChatMobileShell } from "@/platforms/mobile";
-export type MainPanelView = "chat" | "cron" | "skills" | "agents";
+import { InboxPage } from "@/features/inbox";
+export type MainPanelView = "chat" | "cron" | "skills" | "agents" | "inbox";
 export type ChatPageProps = {
   view: MainPanelView;
 };
@@ -51,7 +52,11 @@ export function ChatPageLayout({ view, confirmDialog }: ChatPageLayoutProps) {
         isMobile ? <ChatMobileShell /> : <ChatConversationPanel />
       ) : (
         <section className="flex-1 min-h-0 overflow-hidden bg-background">
-          {view === "cron" ? (
+          {view === "inbox" ? (
+            <div className="mx-auto flex h-full min-h-0 w-full max-w-[min(1180px,100%)] flex-col py-4 sm:px-6 sm:py-5">
+              <InboxPage />
+            </div>
+          ) : view === "cron" ? (
             <div className="h-full overflow-auto custom-scrollbar">
               <div className="mx-auto w-full max-w-[min(1120px,100%)] px-4 py-4 sm:px-6 sm:py-5">
                 <CronConfig />

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

@@ -16,10 +16,12 @@ import {
   AlarmClock,
   Bot,
   BrainCircuit,
+  Inbox,
   PanelLeftClose,
   PanelLeftOpen,
   Plus,
 } from "lucide-react";
+import { useInboxUnreadCount } from "@/features/inbox";
 import { ChatSidebarSessionList } from "@/features/chat/features/session/components/chat-sidebar-session-list";
 import { ChatSidebarUtilityMenu } from "@/features/chat/components/layout/chat-sidebar-utility-menu";
 import { isWindowsDesktopHost } from "@/platforms/desktop";
@@ -34,6 +36,11 @@ import {
 } from "@/app/components/layout/sidebar-rail.styles";
 
 const navItems = [
+  {
+    target: "/inbox",
+    label: () => t("inboxTitle"),
+    icon: Inbox,
+  },
   {
     target: "/cron",
     label: () => t("chatSidebarScheduledTasks"),
@@ -99,6 +106,7 @@ export function ChatSidebarDesktopNav({
 }: {
   isCollapsed: boolean;
 }) {
+  const unreadCount = useInboxUnreadCount();
   return (
     <>
       <div className={cn("pb-2", isCollapsed ? "px-0" : "px-3")}>
@@ -114,6 +122,10 @@ export function ChatSidebarDesktopNav({
                 icon={item.icon}
                 density="compact"
                 collapsed={isCollapsed}
+                indicator={item.target === "/inbox" && unreadCount > 0}
+                trailing={item.target === "/inbox" && unreadCount > 0
+                  ? unreadCount > 99 ? "99+" : unreadCount
+                  : undefined}
               />
             </li>
           ))}

package/src/features/chat/features/conversation/hooks/__tests__/use-session-run-queue.test.tsx

@@ -82,4 +82,32 @@ describe('useSessionRunQueue', () => {
     await waitFor(() => expect(listQueuedInputs).toHaveBeenCalledTimes(2));
     unmount();
   });
+
+  it('replaces an in-flight stale queue read after the queue changes', async () => {
+    let resolveInitialRead!: (queue: UiNcpSessionQueuedInputsView) => void;
+    const initialRead = new Promise<UiNcpSessionQueuedInputsView>((resolve) => {
+      resolveInitialRead = resolve;
+    });
+    const listQueuedInputs = vi.spyOn(nextclawClient.sessions, 'listQueuedInputs')
+      .mockImplementationOnce(async () => await initialRead)
+      .mockResolvedValue({ sessionId: 'session-1', inputs: [] });
+    const { result } = renderHook(
+      () => useSessionRunQueue('session-1'),
+      { wrapper: createWrapper() },
+    );
+    await waitFor(() => expect(listQueuedInputs).toHaveBeenCalledTimes(1));
+
+    act(() => {
+      nextclawClient.eventBus.emit(eventKeys.sessionRunQueueUpdated, {
+        sessionKey: 'session-1',
+      });
+    });
+    await waitFor(() => expect(listQueuedInputs).toHaveBeenCalledTimes(2));
+
+    await act(async () => {
+      resolveInitialRead(createQueue('session-1', 'stale queued input'));
+      await initialRead;
+    });
+    await waitFor(() => expect(result.current.inputs).toEqual([]));
+  });
 });

package/src/features/chat/features/conversation/hooks/use-session-run-queue.ts

@@ -21,14 +21,13 @@ export function useSessionRunQueue(sessionKey: string | null) {
     if (!normalizedSessionKey) {
       return undefined;
     }
-    return nextclawClient.eventBus.on(eventKeys.sessionRunQueueUpdated, ({ sessionKey: updatedSessionKey }) => {
+    return nextclawClient.eventBus.on(eventKeys.sessionRunQueueUpdated, async ({ sessionKey: updatedSessionKey }) => {
       if (updatedSessionKey !== normalizedSessionKey) {
         return;
       }
-      void queryClient.invalidateQueries({
-        queryKey: [SESSION_RUN_QUEUE_QUERY_KEY, normalizedSessionKey],
-        exact: true,
-      });
+      const queryKey = [SESSION_RUN_QUEUE_QUERY_KEY, normalizedSessionKey];
+      await queryClient.cancelQueries({ queryKey, exact: true });
+      await queryClient.invalidateQueries({ queryKey, exact: true });
     });
   }, [normalizedSessionKey, queryClient]);
 

package/src/features/chat/features/input/hooks/__tests__/use-chat-input-surface-state.test.tsx

@@ -9,6 +9,14 @@ const usePanelAppsMock = vi.hoisted(() =>
     isLoading: false,
   })),
 );
+const useProjectsMock = vi.hoisted(() =>
+  vi.fn(() => ({
+    data: { projects: [] },
+    error: null,
+    isFetching: false,
+    isLoading: false,
+  })),
+);
 const useServerPathSearchMock = vi.hoisted(() =>
   vi.fn(() => ({
     data: { entries: [] },
@@ -38,6 +46,9 @@ const useServerPathBrowseMock = vi.hoisted(() =>
 vi.mock('@/features/panel-apps', () => ({
   usePanelApps: usePanelAppsMock,
 }));
+vi.mock('@/shared/hooks/use-projects', () => ({
+  useProjects: useProjectsMock,
+}));
 vi.mock('@/shared/hooks/use-server-path-search', () => ({
   useServerPathSearch: useServerPathSearchMock,
 }));
@@ -68,6 +79,7 @@ function createHookParams() {
 
 beforeEach(() => {
   usePanelAppsMock.mockClear();
+  useProjectsMock.mockClear();
   useServerPathBrowseMock.mockClear();
   useServerPathSearchMock.mockClear();
 });
@@ -84,6 +96,7 @@ it('browses nested folders while reserving search for project-wide queries', ()
       start: 0,
     }),
   );
+  expect(useProjectsMock).toHaveBeenLastCalledWith({ enabled: true });
   const filesItem = result.current.inputSurfaceState.panel?.items.find(
     (item) => item.selectionBehavior === 'navigate',
   );

package/src/features/chat/features/input/hooks/use-chat-input-surface-state.ts

@@ -10,11 +10,13 @@ import {
   CONTEXT_REFERENCE_TRIGGER_SPEC,
   createContextReferenceInputSurfacePlugin,
 } from '@/features/chat/features/input/input-surface-plugins/context-reference-plugin.utils';
+import type { ContextReferenceLocation } from '@/features/chat/features/input/input-surface-plugins/chat-input-product-plugin-adapters.types';
 import {
   createSlashCommandInputSurfacePlugin,
   type ChatSlashCommandDescriptor,
 } from '@/features/chat/features/input/input-surface-plugins/slash-command-plugin.utils';
 import type { ChatInputBarAdapterTexts, ChatSkillRecord } from '@/features/chat/types/chat-input-bar.types';
+import { useProjects } from '@/shared/hooks/use-projects';
 import { useServerPathBrowse } from '@/shared/hooks/use-server-path-browse';
 import { useServerPathSearch } from '@/shared/hooks/use-server-path-search';
 import type { ServerPathEntryView, ServerPathSearchEntryView } from '@/shared/lib/api';
@@ -39,7 +41,7 @@ type UseChatInputSurfaceStateParams = {
 function buildChatInputSurfacePlugins(params: {
   commands: readonly ChatSlashCommandDescriptor[];
   language: I18nLanguage;
-  onNavigate: (path: string | null) => void;
+  onNavigate: (location: ContextReferenceLocation) => void;
   onSelectPanelApp: (appId: string) => void;
   onSelectSkill: (skillRef: string) => void;
   slashTexts: ChatInputSurfaceSlashTexts;
@@ -105,6 +107,15 @@ function buildChatInputSurfacePlugins(params: {
           parentLabel: t('chatContextReferenceParent', language),
           parentDescription: t('chatContextReferenceParentDescription', language),
           parentHintLabel: t('chatContextReferenceParentHint', language),
+          projectDescription: t('chatContextReferenceProjectDescription', language),
+          projectPathLabel: t('chatContextReferenceProjectPath', language),
+          projectSectionLabel: t('chatContextReferenceProjectSection', language),
+          projectSubtitle: t('chatContextReferenceProjectType', language),
+          projectsDescription: t('chatContextReferenceProjectsDescription', language),
+          projectsHintLabel: t('chatContextReferenceProjectsHint', language),
+          projectsLabel: t('chatContextReferenceProjectsLabel', language),
+          projectsLoadFailedLabel: t('chatContextReferenceProjectsLoadFailed', language),
+          projectsSubtitle: t('chatContextReferenceProjectsType', language),
           projectRootLabel: t('chatContextReferenceProjectRoot', language),
           searchFailedLabel: t('chatContextReferenceSearchFailed', language),
           workspaceSectionLabel: t('chatContextReferenceWorkspaceSection', language),
@@ -150,7 +161,9 @@ export function useChatInputSurfaceState(params: UseChatInputSurfaceStateParams)
     skillRecords,
     commands,
   } = params;
-  const [referencePath, setReferencePath] = useState<string | null>(null);
+  const [referenceLocation, setReferenceLocation] = useState<ContextReferenceLocation>({
+    view: 'root',
+  });
   const [inputSurfaceTrigger, setInputSurfaceTriggerState] = useState<ChatInputSurfaceTrigger | null>(null);
   const inputSurfaceTriggerSignatureRef = useRef('null');
   const setInputSurfaceTrigger = useCallback((nextTrigger: ChatInputSurfaceTrigger | null): void => {
@@ -158,23 +171,25 @@ export function useChatInputSurfaceState(params: UseChatInputSurfaceStateParams)
     if (inputSurfaceTriggerSignatureRef.current === nextSignature) return;
     inputSurfaceTriggerSignatureRef.current = nextSignature;
     if (!nextTrigger) {
-      setReferencePath(null);
+      setReferenceLocation({ view: 'root' });
     }
     setInputSurfaceTriggerState(nextTrigger);
   }, []);
   const isContextReferenceTrigger = inputSurfaceTrigger?.key === CONTEXT_REFERENCE_TRIGGER_SPEC.key;
+  const referencePath = referenceLocation.view === 'files' ? referenceLocation.path : '';
   const deferredReferenceQuery = useDeferredValue(
     isContextReferenceTrigger ? inputSurfaceTrigger.query : '',
   );
   const isBrowsingServerPaths = Boolean(
     isContextReferenceTrigger &&
     projectRoot &&
-    referencePath !== null &&
+    referenceLocation.view === 'files' &&
     !deferredReferenceQuery.trim(),
   );
   const shouldSearchServerPaths = Boolean(
     isContextReferenceTrigger &&
     projectRoot &&
+    referenceLocation.view !== 'projects' &&
     deferredReferenceQuery.trim(),
   );
   const serverPathBrowse = useServerPathBrowse({
@@ -193,7 +208,7 @@ export function useChatInputSurfaceState(params: UseChatInputSurfaceStateParams)
     () => isBrowsingServerPaths
       ? buildBrowsedReferenceEntries({
           entries: serverPathBrowse.data?.entries ?? [],
-          parentRelativePath: referencePath ?? '',
+          parentRelativePath: referencePath,
         })
       : serverPathSearch.data?.entries ?? [],
     [
@@ -207,12 +222,13 @@ export function useChatInputSurfaceState(params: UseChatInputSurfaceStateParams)
     isContextReferenceTrigger ||
     inputSurfaceTrigger?.key === CHAT_INPUT_SURFACE_SLASH_TRIGGER_SPEC.key;
   const panelApps = usePanelApps({ enabled: shouldLoadPanelApps });
+  const projects = useProjects({ enabled: isContextReferenceTrigger });
 
   const inputSurfacePlugins = useMemo(
     () => buildChatInputSurfacePlugins({
       commands,
       language,
-      onNavigate: setReferencePath,
+      onNavigate: setReferenceLocation,
       onSelectPanelApp,
       onSelectSkill,
       slashTexts: itemTexts.slashTexts,
@@ -229,12 +245,15 @@ export function useChatInputSurfaceState(params: UseChatInputSurfaceStateParams)
     () => resolveChatInputSurfaceState({
       data: {
         isPanelAppsLoading: panelApps.isLoading || panelApps.isFetching,
+        isProjectsLoading: projects.isLoading || projects.isFetching,
         isServerPathSearchLoading: activeServerPathQuery.isLoading || activeServerPathQuery.isFetching,
         isSkillsLoading,
         panelApps: panelApps.data?.entries ?? [],
         projectRoot,
+        projects: projects.data?.projects ?? [],
+        projectsError: projects.error instanceof Error ? projects.error.message : null,
         recentSkillValues,
-        referencePath,
+        referenceLocation,
         serverPathEntries,
         serverPathSearchError: activeServerPathQuery.error instanceof Error
           ? activeServerPathQuery.error.message
@@ -251,10 +270,14 @@ export function useChatInputSurfaceState(params: UseChatInputSurfaceStateParams)
       panelApps.isFetching,
       panelApps.isLoading,
       projectRoot,
+      projects.data?.projects,
+      projects.error,
+      projects.isFetching,
+      projects.isLoading,
       activeServerPathQuery.error,
       activeServerPathQuery.isFetching,
       activeServerPathQuery.isLoading,
-      referencePath,
+      referenceLocation,
       serverPathEntries,
       isSkillsLoading,
       recentSkillValues,

package/src/features/chat/features/input/input-surface-plugins/__tests__/context-reference-plugin.test.ts

@@ -4,7 +4,8 @@ import {
   CONTEXT_REFERENCE_TRIGGER_SPEC,
   createContextReferenceInputSurfacePlugin,
 } from '@/features/chat/features/input/input-surface-plugins/context-reference-plugin.utils';
-import type { PanelAppEntryView } from '@/shared/lib/api';
+import type { ContextReferenceLocation } from '@/features/chat/features/input/input-surface-plugins/chat-input-product-plugin-adapters.types';
+import type { PanelAppEntryView, ProjectView } from '@/shared/lib/api';
 
 function createPanelApp(): PanelAppEntryView {
   return {
@@ -25,6 +26,15 @@ function createPanelApp(): PanelAppEntryView {
   };
 }
 
+function createProject(): ProjectView {
+  return {
+    name: 'NextClaw',
+    rootPath: '/tmp/nextclaw',
+    createdAt: '2026-07-28T00:00:00.000Z',
+    updatedAt: '2026-07-28T00:00:00.000Z',
+  };
+}
+
 function createPlugin(onNavigate = vi.fn()) {
   return createContextReferenceInputSurfacePlugin({
     itemTexts: {
@@ -43,6 +53,15 @@ function createPlugin(onNavigate = vi.fn()) {
         parentLabel: 'Up one folder',
         parentDescription: 'Browse parent',
         parentHintLabel: 'Enter to browse parent',
+        projectDescription: 'Project context',
+        projectPathLabel: 'Project path',
+        projectSectionLabel: 'Projects',
+        projectSubtitle: 'Project',
+        projectsDescription: 'Browse registered projects',
+        projectsHintLabel: 'Enter to browse projects',
+        projectsLabel: 'Projects',
+        projectsLoadFailedLabel: 'Projects failed',
+        projectsSubtitle: 'Project Context',
         projectRootLabel: 'Project directory',
         searchFailedLabel: 'Search failed',
         workspaceSectionLabel: 'Files & Folders',
@@ -65,15 +84,18 @@ function createPlugin(onNavigate = vi.fn()) {
   });
 }
 
-function createData(referencePath: string | null = null) {
+function createData(referenceLocation: ContextReferenceLocation = { view: 'root' }) {
   return {
     isPanelAppsLoading: false,
+    isProjectsLoading: false,
     isServerPathSearchLoading: false,
     isSkillsLoading: false,
     panelApps: [createPanelApp()],
     projectRoot: '/tmp/project',
+    projects: [createProject()],
+    projectsError: null,
     recentSkillValues: [],
-    referencePath,
+    referenceLocation,
     serverPathEntries: [
       {
         name: 'server-path.ts',
@@ -98,7 +120,7 @@ function createData(referencePath: string | null = null) {
 }
 
 describe('context reference input surface plugin', () => {
-  it('shows Files & Folders and panel apps in the root @ menu', () => {
+  it('shows Files & Folders, Projects, and panel apps in the root @ menu', () => {
     const state = resolveChatInputSurfaceState({
       plugins: [createPlugin()],
       trigger: {
@@ -116,6 +138,11 @@ describe('context reference input surface plugin', () => {
         icon: 'files',
         selectionBehavior: 'navigate',
       }),
+      expect.objectContaining({
+        title: 'Projects',
+        icon: 'project',
+        selectionBehavior: 'navigate',
+      }),
       expect.objectContaining({
         key: 'panel-app:task-board',
         tokenKind: 'panel_app',
@@ -133,7 +160,7 @@ describe('context reference input surface plugin', () => {
         start: 0,
         end: 7,
       },
-      data: createData(''),
+      data: createData({ view: 'files', path: '' }),
     });
 
     expect(state.panel?.items.slice(1)).toEqual([
@@ -173,7 +200,7 @@ describe('context reference input surface plugin', () => {
 
     state.panel?.onSelectItem?.(item!);
 
-    expect(onNavigate).toHaveBeenCalledWith('');
+    expect(onNavigate).toHaveBeenCalledWith({ view: 'files', path: '' });
     expect(item).not.toHaveProperty('tokenKind');
   });
 
@@ -187,7 +214,7 @@ describe('context reference input surface plugin', () => {
         start: 0,
         end: 1,
       },
-      data: createData(''),
+      data: createData({ view: 'files', path: '' }),
     });
     const directoryItem = rootState.panel?.items.find((item) => item.title === 'docs');
 
@@ -197,7 +224,7 @@ describe('context reference input surface plugin', () => {
     });
     expect(directoryItem?.tokenKind).toBeUndefined();
     rootState.panel?.onSelectItem?.(directoryItem!);
-    expect(onNavigate).toHaveBeenCalledWith('docs');
+    expect(onNavigate).toHaveBeenCalledWith({ view: 'files', path: 'docs' });
 
     const nestedState = resolveChatInputSurfaceState({
       plugins: [createPlugin(onNavigate)],
@@ -207,7 +234,7 @@ describe('context reference input surface plugin', () => {
         start: 0,
         end: 1,
       },
-      data: createData('docs'),
+      data: createData({ view: 'files', path: 'docs' }),
     });
     expect(nestedState.panel?.items).toEqual(expect.arrayContaining([
       expect.objectContaining({
@@ -222,4 +249,47 @@ describe('context reference input surface plugin', () => {
       }),
     ]));
   });
+
+  it('opens the project view and builds semantic project tokens', () => {
+    const onNavigate = vi.fn();
+    const rootState = resolveChatInputSurfaceState({
+      plugins: [createPlugin(onNavigate)],
+      trigger: {
+        ...CONTEXT_REFERENCE_TRIGGER_SPEC,
+        query: '',
+        start: 0,
+        end: 1,
+      },
+      data: createData(),
+    });
+    const projectsItem = rootState.panel?.items.find((item) => item.title === 'Projects');
+
+    rootState.panel?.onSelectItem?.(projectsItem!);
+    expect(onNavigate).toHaveBeenCalledWith({ view: 'projects' });
+
+    const projectsState = resolveChatInputSurfaceState({
+      plugins: [createPlugin(onNavigate)],
+      trigger: {
+        ...CONTEXT_REFERENCE_TRIGGER_SPEC,
+        query: 'next',
+        start: 0,
+        end: 5,
+      },
+      data: createData({ view: 'projects' }),
+    });
+
+    expect(projectsState.panel?.items).toEqual([
+      expect.objectContaining({
+        title: 'Back',
+        selectionBehavior: 'navigate',
+      }),
+      expect.objectContaining({
+        title: 'NextClaw',
+        icon: 'project',
+        tokenKind: 'project',
+        tokenKey: '/tmp/nextclaw',
+        detailLines: ['Project path: /tmp/nextclaw'],
+      }),
+    ]);
+  });
 });