@nextclaw/ui 0.15.6 → 0.15.8

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

@@ -54,6 +54,24 @@ vi.mock('@/features/chat/features/input/hooks/use-chat-model-favorites', () => (
   }),
 }));
 
+vi.mock('@/shared/hooks/use-server-path-browse', () => ({
+  useServerPathBrowse: () => ({
+    data: { entries: [] },
+    error: null,
+    isFetching: false,
+    isLoading: false,
+  }),
+}));
+
+vi.mock('@/shared/hooks/use-server-path-search', () => ({
+  useServerPathSearch: () => ({
+    data: { entries: [] },
+    error: null,
+    isFetching: false,
+    isLoading: false,
+  }),
+}));
+
 vi.mock('@/shared/lib/api', async (importOriginal) => {
   const actual = await importOriginal();
   return {

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

@@ -17,6 +17,23 @@ const useServerPathSearchMock = vi.hoisted(() =>
     isLoading: false,
   })),
 );
+const useServerPathBrowseMock = vi.hoisted(() =>
+  vi.fn(() => ({
+    data: {
+      entries: [
+        {
+          name: 'src',
+          path: '/tmp/project/src',
+          kind: 'directory' as const,
+          hidden: false,
+        },
+      ],
+    },
+    error: null,
+    isFetching: false,
+    isLoading: false,
+  })),
+);
 
 vi.mock('@/features/panel-apps', () => ({
   usePanelApps: usePanelAppsMock,
@@ -24,6 +41,9 @@ vi.mock('@/features/panel-apps', () => ({
 vi.mock('@/shared/hooks/use-server-path-search', () => ({
   useServerPathSearch: useServerPathSearchMock,
 }));
+vi.mock('@/shared/hooks/use-server-path-browse', () => ({
+  useServerPathBrowse: useServerPathBrowseMock,
+}));
 
 function createHookParams() {
   return {
@@ -48,10 +68,11 @@ function createHookParams() {
 
 beforeEach(() => {
   usePanelAppsMock.mockClear();
+  useServerPathBrowseMock.mockClear();
   useServerPathSearchMock.mockClear();
 });
 
-it('enables project path search after navigating into files and folders', () => {
+it('browses nested folders while reserving search for project-wide queries', () => {
   const { result } = renderHook(() => useChatInputSurfaceState(createHookParams()));
 
   act(() =>
@@ -68,9 +89,33 @@ it('enables project path search after navigating into files and folders', () =>
   );
   act(() => result.current.inputSurfaceState.panel?.onSelectItem?.(filesItem!));
 
+  expect(useServerPathBrowseMock).toHaveBeenLastCalledWith({
+    path: '.',
+    basePath: '/tmp/project',
+    includeFiles: true,
+    enabled: true,
+  });
+  const directoryItem = result.current.inputSurfaceState.panel?.items.find(
+    (item) => item.title === 'src',
+  );
+  act(() => result.current.inputSurfaceState.panel?.onSelectItem?.(directoryItem!));
+  expect(useServerPathBrowseMock).toHaveBeenLastCalledWith({
+    path: 'src',
+    basePath: '/tmp/project',
+    includeFiles: true,
+    enabled: true,
+  });
+
+  act(() => result.current.setInputSurfaceTrigger({
+    end: 7,
+    key: 'context-reference',
+    marker: '@',
+    query: 'needle',
+    start: 0,
+  }));
   expect(useServerPathSearchMock).toHaveBeenLastCalledWith({
     basePath: '/tmp/project',
-    query: '',
+    query: 'needle',
     enabled: true,
   });
 });

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

@@ -10,13 +10,14 @@ import {
   CONTEXT_REFERENCE_TRIGGER_SPEC,
   createContextReferenceInputSurfacePlugin,
 } from '@/features/chat/features/input/input-surface-plugins/context-reference-plugin.utils';
-import type { ContextReferenceMode } 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 { 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';
 
 type ChatInputSurfaceSlashTexts = Pick<
   ChatInputBarAdapterTexts,
@@ -38,7 +39,7 @@ type UseChatInputSurfaceStateParams = {
 function buildChatInputSurfacePlugins(params: {
   commands: readonly ChatSlashCommandDescriptor[];
   language: I18nLanguage;
-  onNavigate: (mode: ContextReferenceMode) => void;
+  onNavigate: (path: string | null) => void;
   onSelectPanelApp: (appId: string) => void;
   onSelectSkill: (skillRef: string) => void;
   slashTexts: ChatInputSurfaceSlashTexts;
@@ -93,6 +94,7 @@ function buildChatInputSurfacePlugins(params: {
           backLabel: t('chatContextReferenceBack', language),
           backDescription: t('chatContextReferenceBackDescription', language),
           backHintLabel: t('chatContextReferenceBackHint', language),
+          currentDirectoryLabel: t('chatContextReferenceCurrentDirectory', language),
           directoryDescription: t('chatContextReferenceDirectoryDescription', language),
           fileDescription: t('chatContextReferenceFileDescription', language),
           filesDescription: t('chatContextReferenceFilesDescription', language),
@@ -100,6 +102,9 @@ function buildChatInputSurfacePlugins(params: {
           filesLabel: t('chatContextReferenceFilesLabel', language),
           filesSubtitle: t('chatContextReferenceFilesType', language),
           panelAppSectionLabel: t('chatPanelAppReferenceSection', language),
+          parentLabel: t('chatContextReferenceParent', language),
+          parentDescription: t('chatContextReferenceParentDescription', language),
+          parentHintLabel: t('chatContextReferenceParentHint', language),
           projectRootLabel: t('chatContextReferenceProjectRoot', language),
           searchFailedLabel: t('chatContextReferenceSearchFailed', language),
           workspaceSectionLabel: t('chatContextReferenceWorkspaceSection', language),
@@ -118,6 +123,21 @@ function buildChatInputSurfacePlugins(params: {
   ];
 }
 
+function buildBrowsedReferenceEntries(params: {
+  entries: readonly ServerPathEntryView[];
+  parentRelativePath: string;
+}): ServerPathSearchEntryView[] {
+  const parentRelativePath = params.parentRelativePath.split('/').filter(Boolean).join('/');
+  return params.entries.map((entry) => ({
+    name: entry.name,
+    path: entry.path,
+    relativePath: [parentRelativePath, entry.name].filter(Boolean).join('/'),
+    parentRelativePath,
+    kind: entry.kind,
+    hidden: entry.hidden,
+  }));
+}
+
 export function useChatInputSurfaceState(params: UseChatInputSurfaceStateParams) {
   const {
     isSkillsLoading,
@@ -130,7 +150,7 @@ export function useChatInputSurfaceState(params: UseChatInputSurfaceStateParams)
     skillRecords,
     commands,
   } = params;
-  const [referenceMode, setReferenceMode] = useState<ContextReferenceMode>('root');
+  const [referencePath, setReferencePath] = useState<string | null>(null);
   const [inputSurfaceTrigger, setInputSurfaceTriggerState] = useState<ChatInputSurfaceTrigger | null>(null);
   const inputSurfaceTriggerSignatureRef = useRef('null');
   const setInputSurfaceTrigger = useCallback((nextTrigger: ChatInputSurfaceTrigger | null): void => {
@@ -138,7 +158,7 @@ export function useChatInputSurfaceState(params: UseChatInputSurfaceStateParams)
     if (inputSurfaceTriggerSignatureRef.current === nextSignature) return;
     inputSurfaceTriggerSignatureRef.current = nextSignature;
     if (!nextTrigger) {
-      setReferenceMode('root');
+      setReferencePath(null);
     }
     setInputSurfaceTriggerState(nextTrigger);
   }, []);
@@ -146,16 +166,43 @@ export function useChatInputSurfaceState(params: UseChatInputSurfaceStateParams)
   const deferredReferenceQuery = useDeferredValue(
     isContextReferenceTrigger ? inputSurfaceTrigger.query : '',
   );
+  const isBrowsingServerPaths = Boolean(
+    isContextReferenceTrigger &&
+    projectRoot &&
+    referencePath !== null &&
+    !deferredReferenceQuery.trim(),
+  );
   const shouldSearchServerPaths = Boolean(
     isContextReferenceTrigger &&
     projectRoot &&
-    (referenceMode === 'files' || deferredReferenceQuery.trim()),
+    deferredReferenceQuery.trim(),
   );
+  const serverPathBrowse = useServerPathBrowse({
+    path: referencePath || '.',
+    basePath: projectRoot,
+    includeFiles: true,
+    enabled: isBrowsingServerPaths,
+  });
   const serverPathSearch = useServerPathSearch({
     basePath: projectRoot,
     query: deferredReferenceQuery,
     enabled: shouldSearchServerPaths,
   });
+  const activeServerPathQuery = isBrowsingServerPaths ? serverPathBrowse : serverPathSearch;
+  const serverPathEntries = useMemo(
+    () => isBrowsingServerPaths
+      ? buildBrowsedReferenceEntries({
+          entries: serverPathBrowse.data?.entries ?? [],
+          parentRelativePath: referencePath ?? '',
+        })
+      : serverPathSearch.data?.entries ?? [],
+    [
+      isBrowsingServerPaths,
+      referencePath,
+      serverPathBrowse.data?.entries,
+      serverPathSearch.data?.entries,
+    ],
+  );
   const shouldLoadPanelApps =
     isContextReferenceTrigger ||
     inputSurfaceTrigger?.key === CHAT_INPUT_SURFACE_SLASH_TRIGGER_SPEC.key;
@@ -165,7 +212,7 @@ export function useChatInputSurfaceState(params: UseChatInputSurfaceStateParams)
     () => buildChatInputSurfacePlugins({
       commands,
       language,
-      onNavigate: setReferenceMode,
+      onNavigate: setReferencePath,
       onSelectPanelApp,
       onSelectSkill,
       slashTexts: itemTexts.slashTexts,
@@ -182,15 +229,15 @@ export function useChatInputSurfaceState(params: UseChatInputSurfaceStateParams)
     () => resolveChatInputSurfaceState({
       data: {
         isPanelAppsLoading: panelApps.isLoading || panelApps.isFetching,
-        isServerPathSearchLoading: serverPathSearch.isLoading || serverPathSearch.isFetching,
+        isServerPathSearchLoading: activeServerPathQuery.isLoading || activeServerPathQuery.isFetching,
         isSkillsLoading,
         panelApps: panelApps.data?.entries ?? [],
         projectRoot,
         recentSkillValues,
-        referenceMode,
-        serverPathEntries: serverPathSearch.data?.entries ?? [],
-        serverPathSearchError: serverPathSearch.error instanceof Error
-          ? serverPathSearch.error.message
+        referencePath,
+        serverPathEntries,
+        serverPathSearchError: activeServerPathQuery.error instanceof Error
+          ? activeServerPathQuery.error.message
           : null,
         skillRecords
       },
@@ -204,11 +251,11 @@ export function useChatInputSurfaceState(params: UseChatInputSurfaceStateParams)
       panelApps.isFetching,
       panelApps.isLoading,
       projectRoot,
-      referenceMode,
-      serverPathSearch.data?.entries,
-      serverPathSearch.error,
-      serverPathSearch.isFetching,
-      serverPathSearch.isLoading,
+      activeServerPathQuery.error,
+      activeServerPathQuery.isFetching,
+      activeServerPathQuery.isLoading,
+      referencePath,
+      serverPathEntries,
       isSkillsLoading,
       recentSkillValues,
       skillRecords

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

@@ -32,6 +32,7 @@ function createPlugin(onNavigate = vi.fn()) {
         backLabel: 'Back',
         backDescription: 'Back to references',
         backHintLabel: 'Enter to go back',
+        currentDirectoryLabel: 'Reference current folder',
         directoryDescription: 'Directory context',
         fileDescription: 'File context',
         filesDescription: 'Browse project files',
@@ -39,6 +40,9 @@ function createPlugin(onNavigate = vi.fn()) {
         filesLabel: 'Files & Folders',
         filesSubtitle: 'Project Context',
         panelAppSectionLabel: 'Panel Apps',
+        parentLabel: 'Up one folder',
+        parentDescription: 'Browse parent',
+        parentHintLabel: 'Enter to browse parent',
         projectRootLabel: 'Project directory',
         searchFailedLabel: 'Search failed',
         workspaceSectionLabel: 'Files & Folders',
@@ -61,7 +65,7 @@ function createPlugin(onNavigate = vi.fn()) {
   });
 }
 
-function createData(referenceMode: 'root' | 'files' = 'root') {
+function createData(referencePath: string | null = null) {
   return {
     isPanelAppsLoading: false,
     isServerPathSearchLoading: false,
@@ -69,7 +73,7 @@ function createData(referenceMode: 'root' | 'files' = 'root') {
     panelApps: [createPanelApp()],
     projectRoot: '/tmp/project',
     recentSkillValues: [],
-    referenceMode,
+    referencePath,
     serverPathEntries: [
       {
         name: 'server-path.ts',
@@ -129,7 +133,7 @@ describe('context reference input surface plugin', () => {
         start: 0,
         end: 7,
       },
-      data: createData('files'),
+      data: createData(''),
     });
 
     expect(state.panel?.items.slice(1)).toEqual([
@@ -169,7 +173,53 @@ describe('context reference input surface plugin', () => {
 
     state.panel?.onSelectItem?.(item!);
 
-    expect(onNavigate).toHaveBeenCalledWith('files');
+    expect(onNavigate).toHaveBeenCalledWith('');
     expect(item).not.toHaveProperty('tokenKind');
   });
+
+  it('opens browsed directories and offers the current folder as a token', () => {
+    const onNavigate = vi.fn();
+    const rootState = resolveChatInputSurfaceState({
+      plugins: [createPlugin(onNavigate)],
+      trigger: {
+        ...CONTEXT_REFERENCE_TRIGGER_SPEC,
+        query: '',
+        start: 0,
+        end: 1,
+      },
+      data: createData(''),
+    });
+    const directoryItem = rootState.panel?.items.find((item) => item.title === 'docs');
+
+    expect(directoryItem).toMatchObject({
+      selectionBehavior: 'navigate',
+      value: 'docs',
+    });
+    expect(directoryItem?.tokenKind).toBeUndefined();
+    rootState.panel?.onSelectItem?.(directoryItem!);
+    expect(onNavigate).toHaveBeenCalledWith('docs');
+
+    const nestedState = resolveChatInputSurfaceState({
+      plugins: [createPlugin(onNavigate)],
+      trigger: {
+        ...CONTEXT_REFERENCE_TRIGGER_SPEC,
+        query: '',
+        start: 0,
+        end: 1,
+      },
+      data: createData('docs'),
+    });
+    expect(nestedState.panel?.items).toEqual(expect.arrayContaining([
+      expect.objectContaining({
+        title: 'Reference current folder',
+        subtitle: 'docs',
+        tokenKind: 'workspace_directory',
+        tokenKey: 'docs',
+      }),
+      expect.objectContaining({
+        title: 'Up one folder',
+        selectionBehavior: 'navigate',
+      }),
+    ]));
+  });
 });

package/src/features/chat/features/input/input-surface-plugins/__tests__/slash-command-plugin.test.ts

@@ -97,7 +97,7 @@ describe('createSlashCommandInputSurfacePlugin', () => {
         ],
         projectRoot: '/tmp/project',
         recentSkillValues: [],
-        referenceMode: 'root',
+        referencePath: null,
         serverPathEntries: [],
         serverPathSearchError: null,
         skillRecords: [
@@ -158,7 +158,7 @@ describe('createSlashCommandInputSurfacePlugin', () => {
         panelApps: [],
         projectRoot: '/tmp/project',
         recentSkillValues: [],
-        referenceMode: 'root',
+        referencePath: null,
         serverPathEntries: [],
         serverPathSearchError: null,
         skillRecords: [
@@ -207,7 +207,7 @@ describe('createSlashCommandInputSurfacePlugin', () => {
         panelApps: [],
         projectRoot: '/tmp/project',
         recentSkillValues: [],
-        referenceMode: 'root',
+        referencePath: null,
         serverPathEntries: [],
         serverPathSearchError: null,
         skillRecords: [],
@@ -244,7 +244,7 @@ describe('createSlashCommandInputSurfacePlugin', () => {
         ],
         projectRoot: '/tmp/project',
         recentSkillValues: [],
-        referenceMode: 'root',
+        referencePath: null,
         serverPathEntries: [],
         serverPathSearchError: null,
         skillRecords: [],

package/src/features/chat/features/input/input-surface-plugins/chat-input-product-plugin-adapters.types.ts

@@ -1,8 +1,6 @@
 import type { ChatSkillRecord } from '@/features/chat/types/chat-input-bar.types';
 import type { PanelAppEntryView, ServerPathSearchEntryView } from '@/shared/lib/api';
 
-export type ContextReferenceMode = 'root' | 'files';
-
 export type ChatInputProductPluginData = {
   isPanelAppsLoading: boolean;
   isServerPathSearchLoading: boolean;
@@ -10,7 +8,7 @@ export type ChatInputProductPluginData = {
   panelApps: readonly PanelAppEntryView[];
   projectRoot: string;
   recentSkillValues: readonly string[];
-  referenceMode: ContextReferenceMode;
+  referencePath: string | null;
   serverPathEntries: readonly ServerPathSearchEntryView[];
   serverPathSearchError: string | null;
   skillRecords: readonly ChatSkillRecord[];

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

@@ -10,10 +10,7 @@ import {
   CHAT_WORKSPACE_FILE_TOKEN_KIND,
 } from '@nextclaw/shared';
 import type { PanelAppEntryView, ServerPathSearchEntryView } from '@/shared/lib/api';
-import type {
-  ChatInputProductPluginData,
-  ContextReferenceMode,
-} from './chat-input-product-plugin-adapters.types';
+import type { ChatInputProductPluginData } from './chat-input-product-plugin-adapters.types';
 import {
   scoreInputSurfaceSearchCandidate,
   resolveInputSurfaceMatchTier,
@@ -40,6 +37,7 @@ export type ContextReferenceInputSurfaceTexts = {
   backLabel: string;
   backDescription: string;
   backHintLabel: string;
+  currentDirectoryLabel: string;
   directoryDescription: string;
   fileDescription: string;
   filesDescription: string;
@@ -47,6 +45,9 @@ export type ContextReferenceInputSurfaceTexts = {
   filesLabel: string;
   filesSubtitle: string;
   panelAppSectionLabel: string;
+  parentLabel: string;
+  parentDescription: string;
+  parentHintLabel: string;
   projectRootLabel: string;
   searchFailedLabel: string;
   workspaceSectionLabel: string;
@@ -154,14 +155,31 @@ function buildPanelAppReferenceItems(params: {
   }));
 }
 
+function buildPathPreview(params: {
+  kind: 'directory' | 'file';
+  projectRoot: string;
+  relativePath: string;
+}) {
+  const { kind, projectRoot, relativePath } = params;
+  const pathSegments = relativePath.split('/').filter(Boolean);
+  return {
+    rootLabel: resolveProjectLabel(projectRoot),
+    segments: pathSegments.map((label, index) => ({
+      label,
+      kind: index === pathSegments.length - 1 ? kind : 'directory' as const,
+    })),
+  };
+}
+
 function buildWorkspaceReferenceItems(params: {
   entries: readonly ServerPathSearchEntryView[];
+  navigateDirectories: boolean;
   projectRoot: string;
   texts: ContextReferenceInputSurfaceTexts;
 }): ChatInputSurfaceItem[] {
   const projectLabel = resolveProjectLabel(params.projectRoot);
   return params.entries.map((entry) => {
-    const pathSegments = entry.relativePath.split('/').filter(Boolean);
+    const navigates = params.navigateDirectories && entry.kind === 'directory';
     return {
       key: `workspace:${entry.kind}:${entry.relativePath}`,
       icon: entry.kind === 'directory' ? 'folder' : 'file',
@@ -176,21 +194,61 @@ function buildWorkspaceReferenceItems(params: {
       ],
       sectionKey: WORKSPACE_SECTION_KEY,
       sectionLabel: params.texts.workspaceSectionLabel,
-      tokenKind: entry.kind === 'directory'
-        ? CHAT_WORKSPACE_DIRECTORY_TOKEN_KIND
-        : CHAT_WORKSPACE_FILE_TOKEN_KIND,
-      tokenKey: entry.relativePath,
-      pathPreview: {
-        rootLabel: projectLabel,
-        segments: pathSegments.map((label, index) => ({
-          label,
-          kind: index === pathSegments.length - 1 ? entry.kind : 'directory',
-        })),
-      },
+      value: entry.relativePath,
+      tokenKind: navigates
+        ? undefined
+        : entry.kind === 'directory'
+          ? CHAT_WORKSPACE_DIRECTORY_TOKEN_KIND
+          : CHAT_WORKSPACE_FILE_TOKEN_KIND,
+      tokenKey: navigates ? undefined : entry.relativePath,
+      selectionBehavior: navigates ? 'navigate' : undefined,
+      pathPreview: buildPathPreview({
+        kind: entry.kind,
+        projectRoot: params.projectRoot,
+        relativePath: entry.relativePath,
+      }),
     } satisfies ChatInputSurfaceItem;
   });
 }
 
+function resolveParentReferencePath(referencePath: string): string | null {
+  const segments = referencePath.split('/').filter(Boolean);
+  if (segments.length === 0) {
+    return null;
+  }
+  return segments.slice(0, -1).join('/');
+}
+
+function buildCurrentDirectoryReferenceItem(params: {
+  projectRoot: string;
+  referencePath: string;
+  texts: ContextReferenceInputSurfaceTexts;
+}): ChatInputSurfaceItem {
+  const { projectRoot, referencePath, texts } = params;
+  const title = referencePath.split('/').filter(Boolean).at(-1) ?? referencePath;
+  return {
+    key: `context-reference:current-directory:${referencePath}`,
+    icon: 'folder',
+    title: texts.currentDirectoryLabel,
+    subtitle: title,
+    description: texts.directoryDescription,
+    detailLines: [
+      `${texts.projectRootLabel}: ${projectRoot}`,
+      referencePath,
+    ],
+    sectionKey: WORKSPACE_SECTION_KEY,
+    sectionLabel: texts.workspaceSectionLabel,
+    value: referencePath,
+    tokenKind: CHAT_WORKSPACE_DIRECTORY_TOKEN_KIND,
+    tokenKey: referencePath,
+    pathPreview: buildPathPreview({
+      kind: 'directory',
+      projectRoot,
+      relativePath: referencePath,
+    }),
+  };
+}
+
 function buildFilesNavigationItem(texts: ContextReferenceInputSurfaceTexts): ChatInputSurfaceItem {
   return {
     key: FILES_NAVIGATION_ITEM_KEY,
@@ -204,15 +262,21 @@ function buildFilesNavigationItem(texts: ContextReferenceInputSurfaceTexts): Cha
   };
 }
 
-function buildRootNavigationItem(texts: ContextReferenceInputSurfaceTexts): ChatInputSurfaceItem {
+function buildBackNavigationItem(params: {
+  referencePath: string;
+  texts: ContextReferenceInputSurfaceTexts;
+}): ChatInputSurfaceItem {
+  const { referencePath, texts } = params;
+  const isProjectRoot = !referencePath;
   return {
     key: ROOT_NAVIGATION_ITEM_KEY,
     icon: 'back',
-    title: texts.backLabel,
+    title: isProjectRoot ? texts.backLabel : texts.parentLabel,
     subtitle: '',
-    description: texts.backDescription,
+    description: isProjectRoot ? texts.backDescription : texts.parentDescription,
     detailLines: [],
-    hintLabel: texts.backHintLabel,
+    hintLabel: isProjectRoot ? texts.backHintLabel : texts.parentHintLabel,
+    value: resolveParentReferencePath(referencePath) ?? '',
     selectionBehavior: 'navigate',
   };
 }
@@ -223,19 +287,36 @@ export function createContextReferenceInputSurfacePlugin(params: {
     panelApp: PanelAppInputSurfaceItemTexts;
   };
   menuTexts: ChatInputSurfaceMenuTexts;
-  onNavigate: (mode: ContextReferenceMode) => void;
+  onNavigate: (path: string | null) => void;
 }): ChatInputSurfacePlugin<ChatInputProductPluginData> {
   return createInputSurfaceTriggeredPanelPlugin({
     key: 'context-reference',
     trigger: CONTEXT_REFERENCE_TRIGGER_SPEC,
     resolvePanel: ({ data, trigger }) => {
+      const isFilesMode = data.referencePath !== null;
+      const isBrowsing = isFilesMode && !trigger.query.trim();
       const workspaceItems = buildWorkspaceReferenceItems({
         entries: data.serverPathEntries,
+        navigateDirectories: isBrowsing,
         projectRoot: data.projectRoot,
         texts: params.itemTexts.context,
       });
-      const items = data.referenceMode === 'files'
-        ? [buildRootNavigationItem(params.itemTexts.context), ...workspaceItems]
+      const currentDirectoryItem = isBrowsing && data.referencePath
+        ? buildCurrentDirectoryReferenceItem({
+            projectRoot: data.projectRoot,
+            referencePath: data.referencePath,
+            texts: params.itemTexts.context,
+          })
+        : null;
+      const items = isFilesMode
+        ? [
+            buildBackNavigationItem({
+              referencePath: data.referencePath ?? '',
+              texts: params.itemTexts.context,
+            }),
+            ...(currentDirectoryItem ? [currentDirectoryItem] : []),
+            ...workspaceItems,
+          ]
         : [
             buildFilesNavigationItem(params.itemTexts.context),
             ...(trigger.query ? workspaceItems : []),
@@ -246,11 +327,11 @@ export function createContextReferenceInputSurfacePlugin(params: {
               texts: params.itemTexts.panelApp,
             }),
           ];
-      const relevantLoading = data.referenceMode === 'files'
+      const relevantLoading = isFilesMode
         ? data.isServerPathSearchLoading
         : data.isPanelAppsLoading || (Boolean(trigger.query) && data.isServerPathSearchLoading);
       return {
-        isLoading: data.referenceMode === 'files'
+        isLoading: isFilesMode
           ? relevantLoading
           : relevantLoading && items.length === 0,
         items,
@@ -262,9 +343,11 @@ export function createContextReferenceInputSurfacePlugin(params: {
           : undefined,
         onSelectItem: (item) => {
           if (item.key === FILES_NAVIGATION_ITEM_KEY) {
-            params.onNavigate('files');
+            params.onNavigate('');
           } else if (item.key === ROOT_NAVIGATION_ITEM_KEY) {
-            params.onNavigate('root');
+            params.onNavigate(data.referencePath ? item.value ?? '' : null);
+          } else if (item.selectionBehavior === 'navigate' && item.value) {
+            params.onNavigate(item.value);
           }
         },
         texts: params.menuTexts,