@nextclaw/ui 0.15.26 → 0.15.28

package/src/features/chat/managers/chat-composer-intent.manager.ts

@@ -1,8 +1,11 @@
 import {
   CHAT_CONVERSATION_EXCERPT_TOKEN_KIND,
+  CHAT_UI_RESOURCE_TOKEN_KIND,
   CHAT_WORKSPACE_DIRECTORY_TOKEN_KIND,
   CHAT_WORKSPACE_EXCERPT_TOKEN_KIND,
   CHAT_WORKSPACE_FILE_TOKEN_KIND,
+  readChatUiResourceReference,
+  type ChatUiResourceReference,
 } from '@nextclaw/shared';
 
 type ChatComposerReferenceIntentBase = {
@@ -35,17 +38,24 @@ export type ChatComposerConversationExcerptIntent = ChatComposerReferenceIntentB
   excerpt: string;
 };
 
+export type ChatComposerUiResourceReferenceIntent = ChatComposerReferenceIntentBase & {
+  kind: typeof CHAT_UI_RESOURCE_TOKEN_KIND;
+  reference: ChatUiResourceReference;
+};
+
 export type ChatComposerReferenceIntent =
   | ChatComposerFileReferenceIntent
   | ChatComposerDirectoryReferenceIntent
   | ChatComposerExcerptReferenceIntent
-  | ChatComposerConversationExcerptIntent;
+  | ChatComposerConversationExcerptIntent
+  | ChatComposerUiResourceReferenceIntent;
 
 type ChatComposerReferenceRequest =
   | Omit<ChatComposerFileReferenceIntent, 'id'>
   | Omit<ChatComposerDirectoryReferenceIntent, 'id'>
   | Omit<ChatComposerExcerptReferenceIntent, 'id'>
-  | Omit<ChatComposerConversationExcerptIntent, 'id'>;
+  | Omit<ChatComposerConversationExcerptIntent, 'id'>
+  | Omit<ChatComposerUiResourceReferenceIntent, 'id'>;
 
 function createExcerptTokenKey(prefix: string, identity: string): string {
   let hash = 2166136261;
@@ -169,6 +179,23 @@ export class ChatComposerIntentManager {
     });
   };
 
+  requestUiResourceReference = (params: {
+    targetSessionKey: string | null;
+    reference: ChatUiResourceReference;
+  }) => {
+    const reference = readChatUiResourceReference(params.reference);
+    if (!reference) return;
+    const tokenKey = reference.uri.trim();
+    const label = reference.title.trim();
+    this.publish({
+      kind: CHAT_UI_RESOURCE_TOKEN_KIND,
+      targetSessionKey: params.targetSessionKey,
+      tokenKey,
+      label,
+      reference,
+    });
+  };
+
   consumePending = (targetSessionKey: string | null): ChatComposerReferenceIntent | null => {
     if (this.pendingIntent?.targetSessionKey !== targetSessionKey) {
       return null;

package/src/features/chat/presenters/chat.presenter.ts

@@ -2,7 +2,7 @@ import { ChatSessionListManager } from '@/features/chat/managers/chat-session-li
 import { ChatUiManager } from '@/features/chat/managers/chat-ui.manager';
 import { ChatQueryManager } from '@/features/chat/managers/chat-query.manager';
 import { ChatThreadManager } from '@/features/chat/managers/chat-thread.manager';
-import { ChatComposerIntentManager } from '@/features/chat/managers/chat-composer-intent.manager';
+import type { ChatComposerIntentManager } from '@/features/chat/managers/chat-composer-intent.manager';
 import type { AppPresenter } from '@/app/presenters/app.presenter';
 
 export class ChatPresenter {
@@ -16,7 +16,7 @@ export class ChatPresenter {
     this.chatUiManager = new ChatUiManager(appPresenter.docBrowserManager);
     this.chatSessionListManager = new ChatSessionListManager(this.chatUiManager);
     this.chatQueryManager = new ChatQueryManager();
-    this.chatComposerIntentManager = new ChatComposerIntentManager();
+    this.chatComposerIntentManager = appPresenter.chatComposerIntentManager;
     this.chatThreadManager = new ChatThreadManager(
       this.chatUiManager,
       this.chatSessionListManager,

package/src/features/panel-apps/components/__tests__/panel-apps-list.test.tsx

@@ -134,7 +134,7 @@ describe('PanelAppsList', () => {
 
     expect(screen.getByText('Demo Panel')).toBeTruthy();
 
-    await user.click(screen.getByRole('button', { name: 'Favorites' }));
+    await user.click(screen.getByRole('tab', { name: 'Favorites' }));
 
     expect(screen.getByText('No panel apps in this view')).toBeTruthy();
     expect(screen.queryByText('Create your first panel app')).toBeNull();

package/src/features/panel-apps/components/panel-apps-list.tsx

@@ -14,10 +14,8 @@ import { t } from '@/shared/lib/i18n';
 const EMPTY_PANEL_APP_ENTRIES: PanelAppEntryView[] = [];
 
 export function PanelAppsList({
-  headerContent,
   onOpenPanelApp,
 }: {
-  headerContent?: ReactNode;
   onOpenPanelApp: (entry: PanelAppEntryView) => void;
 }) {
   const panelApps = usePanelApps();
@@ -95,11 +93,8 @@ export function PanelAppsList({
 
   return (
     <div className="flex h-full min-h-0 flex-col bg-card text-card-foreground">
-      <div className="flex items-center justify-between gap-2 border-b border-border/70 px-4 py-3">
+      <div className="flex min-h-12 shrink-0 items-center justify-end gap-2 border-b border-border/70 px-4 py-2">
         <div className="flex min-w-0 items-center gap-1.5">
-          {headerContent ?? (
-            <div className="truncate text-sm font-semibold text-foreground">{t('panelAppsTitle')}</div>
-          )}
           {panelApps.data?.panelsPath ? (
             <TooltipProvider delayDuration={250}>
               <Tooltip>

package/src/features/right-panel-resources/utils/__tests__/right-panel-resource-uri.utils.test.ts

@@ -1,6 +1,7 @@
 import { describe, expect, it } from 'vitest';
 import type { PanelAppEntryView } from '@/shared/lib/api';
 import {
+  createChatUiResourceReferenceFromTab,
   createPanelAppContentPath,
   createPanelAppResourceUri,
   createPanelAppRightPanelResourceTarget,
@@ -26,6 +27,39 @@ function createPanelAppEntry(overrides: Partial<PanelAppEntryView> = {}): PanelA
 }
 
 describe('right-panel-resource uri utils', () => {
+  it('creates a stable chat reference for an addressable panel tab', () => {
+    expect(createChatUiResourceReferenceFromTab({
+      id: 'panel-demo',
+      kind: 'panel-app',
+      title: 'Demo App',
+      currentUrl: '/api/panel-apps/demo/content',
+      resourceUri: 'nextclaw://panel-app/demo',
+      contentParams: { itemId: 'note-1' },
+      history: ['/api/panel-apps/demo/content'],
+      historyIndex: 0,
+      navVersion: 0,
+    })).toEqual({
+      uri: 'nextclaw://panel-app/demo',
+      resourceKind: 'panel-app',
+      title: 'Demo App',
+      currentUrl: '/api/panel-apps/demo/content',
+      contentParams: { itemId: 'note-1' },
+    });
+  });
+
+  it('does not create chat references for empty browser tabs', () => {
+    expect(createChatUiResourceReferenceFromTab({
+      id: 'home',
+      kind: 'home',
+      title: 'Start Page',
+      currentUrl: 'nextclaw://new-tab',
+      resourceUri: 'nextclaw://new-tab',
+      history: ['nextclaw://new-tab'],
+      historyIndex: 0,
+      navVersion: 0,
+    })).toBeNull();
+  });
+
   it('builds matching external panel app resource and content URLs', () => {
     expect(createPanelAppResourceUri('demo', '/tmp/demo.panel')).toBe(
       'nextclaw://panel-app/demo?path=%2Ftmp%2Fdemo.panel',

package/src/features/right-panel-resources/utils/right-panel-resource-uri.utils.ts

@@ -1,5 +1,10 @@
+import {
+  readChatUiResourceReference,
+  type ChatUiResourceReference,
+} from '@nextclaw/shared';
 import type { PanelAppEntryView } from '@/shared/lib/api';
 import type { DocBrowserDockIcon } from '@/shared/components/doc-browser';
+import type { DocBrowserTab } from '@/shared/components/doc-browser/doc-browser-context';
 import type { RightPanelResourceTarget } from '@/features/right-panel-resources/types/right-panel-resource.types';
 
 export const RIGHT_PANEL_HOME_TAB_KIND = 'home';
@@ -10,6 +15,30 @@ export const RIGHT_PANEL_PANEL_APPS_URL = `${RIGHT_PANEL_APPS_URL}?tab=panel-app
 export const RIGHT_PANEL_SERVICE_APPS_URL = `${RIGHT_PANEL_APPS_URL}?tab=service-apps`;
 export const RIGHT_PANEL_PANEL_APP_TAB_KIND = 'panel-app';
 
+const NON_REFERENCEABLE_RESOURCE_URIS = new Set([
+  RIGHT_PANEL_HOME_URL,
+  'about:blank',
+]);
+
+export function createChatUiResourceReferenceFromTab(
+  tab: DocBrowserTab,
+): ChatUiResourceReference | null {
+  const uri = tab.resourceUri?.trim() || tab.currentUrl.trim();
+  const currentUrl = tab.currentUrl.trim();
+  if (!uri || !currentUrl || NON_REFERENCEABLE_RESOURCE_URIS.has(uri)) {
+    return null;
+  }
+  return readChatUiResourceReference({
+    uri,
+    resourceKind: tab.kind,
+    title: tab.title.trim() || uri,
+    currentUrl,
+    ...(tab.contentParams
+      ? { contentParams: structuredClone(tab.contentParams) }
+      : {}),
+  });
+}
+
 export type RightPanelAppsTab = 'apps' | 'panel-apps' | 'service-apps';
 
 const DEFAULT_RIGHT_PANEL_APPS_TAB: RightPanelAppsTab = 'apps';

package/src/features/service-apps/components/service-apps-panel.tsx

@@ -1,4 +1,4 @@
-import { useState, type ReactNode } from "react";
+import { useState } from "react";
 import type {
   ServiceActionGrantView,
   ServiceActionListView,
@@ -25,11 +25,7 @@ import { t } from "@/shared/lib/i18n";
 
 type ServiceActionView = ServiceActionListView["actions"][number];
 
-export function ServiceAppsPanel({
-  headerContent,
-}: {
-  headerContent?: ReactNode;
-}) {
+export function ServiceAppsPanel() {
   const serviceApps = useServiceApps();
   const serviceActions = useServiceActions();
   const serviceActionGrants = useServiceActionGrants();
@@ -92,17 +88,7 @@ export function ServiceAppsPanel({
 
   return (
     <div className="flex h-full min-h-0 flex-col bg-card text-card-foreground">
-      <div className="flex items-center justify-between gap-2 border-b border-border/60 px-4 py-3">
-        <div className="flex min-w-0 items-center gap-2">
-          {headerContent ?? (
-            <>
-              <Server className="h-4 w-4 text-primary" />
-              <div className="truncate text-sm font-semibold text-foreground">
-                {t("serviceAppsTitle")}
-              </div>
-            </>
-          )}
-        </div>
+      <div className="flex min-h-12 shrink-0 items-center justify-end border-b border-border/60 px-4 py-2">
         <TooltipProvider delayDuration={250}>
           <Tooltip>
             <TooltipTrigger asChild>

package/src/platforms/desktop/components/desktop-app-shell.tsx

@@ -10,6 +10,7 @@ import { isWindowsDesktopHost } from "@/platforms/desktop/utils/desktop-host.uti
 import { MobileBottomNav } from "@/platforms/mobile";
 import type { DocBrowserCustomTabRenderers } from "@/shared/components/doc-browser/doc-browser-renderer.types";
 import type { DocBrowserDockControls } from "@/shared/components/doc-browser/doc-browser-context";
+import type { DocBrowserTabMenuGroupsResolver } from "@/shared/components/doc-browser/doc-browser";
 import { cn } from "@/shared/lib/utils";
 import { useViewportLayoutStore } from "@/app/stores/viewport-layout.store";
 import { SIDEBAR_RAIL_WIDTH_PX } from "@/app/components/layout/sidebar-rail.styles";
@@ -26,6 +27,7 @@ type DesktopAppShellProps = {
   docBrowserMode: "floating" | "docked";
   docBrowserDockControls?: DocBrowserDockControls;
   docBrowserRenderers?: DocBrowserCustomTabRenderers;
+  docBrowserTabMenuGroups?: DocBrowserTabMenuGroupsResolver;
   sideDock?: React.ReactNode;
   children: React.ReactNode;
 };
@@ -37,6 +39,7 @@ export function DesktopAppShell({
   docBrowserMode,
   docBrowserDockControls,
   docBrowserRenderers = {},
+  docBrowserTabMenuGroups,
   sideDock,
   children,
 }: DesktopAppShellProps) {
@@ -91,6 +94,7 @@ export function DesktopAppShell({
               <DocBrowser
                 customTabRenderers={docBrowserRenderers}
                 dockControls={docBrowserDockControls}
+                getTabMenuGroups={docBrowserTabMenuGroups}
               />
             </Suspense>
           ) : null}
@@ -103,6 +107,7 @@ export function DesktopAppShell({
           <DocBrowser
             customTabRenderers={docBrowserRenderers}
             dockControls={docBrowserDockControls}
+            getTabMenuGroups={docBrowserTabMenuGroups}
           />
         </Suspense>
       ) : null}

package/src/platforms/mobile/components/mobile-app-shell.tsx

@@ -7,6 +7,7 @@ import { MobileBottomNav } from "@/platforms/mobile/components/mobile-bottom-nav
 import { MobileTopbar } from "@/platforms/mobile/components/mobile-topbar";
 import type { DocBrowserCustomTabRenderers } from "@/shared/components/doc-browser/doc-browser-renderer.types";
 import type { DocBrowserDockControls } from "@/shared/components/doc-browser/doc-browser-context";
+import type { DocBrowserTabMenuGroupsResolver } from "@/shared/components/doc-browser/doc-browser";
 
 const DocBrowser = lazy(async () => ({
   default: (await import("@/shared/components/doc-browser/doc-browser")).DocBrowser,
@@ -17,6 +18,7 @@ type MobileAppShellProps = {
   isDocBrowserOpen: boolean;
   docBrowserDockControls?: DocBrowserDockControls;
   docBrowserRenderers?: DocBrowserCustomTabRenderers;
+  docBrowserTabMenuGroups?: DocBrowserTabMenuGroupsResolver;
   topbarLeadingInset?: string;
   children: React.ReactNode;
 };
@@ -26,6 +28,7 @@ export function MobileAppShell({
   isDocBrowserOpen,
   docBrowserDockControls,
   docBrowserRenderers = {},
+  docBrowserTabMenuGroups,
   topbarLeadingInset,
   children,
 }: MobileAppShellProps) {
@@ -48,7 +51,12 @@ export function MobileAppShell({
       {showBottomNav ? <MobileBottomNav /> : null}
       {isDocBrowserOpen ? (
         <Suspense fallback={null}>
-          <DocBrowser customTabRenderers={docBrowserRenderers} displayMode="fullscreen" dockControls={docBrowserDockControls} />
+          <DocBrowser
+            customTabRenderers={docBrowserRenderers}
+            displayMode="fullscreen"
+            dockControls={docBrowserDockControls}
+            getTabMenuGroups={docBrowserTabMenuGroups}
+          />
         </Suspense>
       ) : null}
     </div>

package/src/shared/components/actions/__tests__/navigation-link.test.tsx

@@ -1,3 +1,4 @@
+import { createRef } from "react";
 import { fireEvent, render, screen } from "@testing-library/react";
 import { MemoryRouter, Route, Routes } from "react-router-dom";
 import { beforeEach, describe, expect, it, vi } from "vitest";
@@ -55,4 +56,15 @@ describe("NavigationLink", () => {
     expect(screen.getByText("Session route")).toBeTruthy();
     expect(mocks.openExternalUrl).not.toHaveBeenCalled();
   });
+
+  it("forwards refs to the rendered anchor for asChild consumers", () => {
+    const ref = createRef<HTMLAnchorElement>();
+    render(
+      <NavigationLink ref={ref} href="https://docs.nextclaw.io/" external>
+        View docs
+      </NavigationLink>,
+    );
+
+    expect(ref.current).toBe(screen.getByRole("link", { name: "View docs" }));
+  });
 });

package/src/shared/components/actions/navigation-link.tsx

@@ -3,6 +3,7 @@ import type {
   MouseEvent,
   ReactNode,
 } from "react";
+import { forwardRef } from "react";
 import { ExternalLink as ExternalLinkIcon, type LucideIcon } from "lucide-react";
 import { Link } from "react-router-dom";
 import { hostCapabilityManager } from "@/shared/lib/host-capabilities";
@@ -62,7 +63,7 @@ function resolveExternalHttpUrl(href: string): string | null {
  * Internal links use client-side routing; external links delegate ordinary
  * clicks to the desktop host when one is available.
  */
-export function NavigationLink({
+export const NavigationLink = forwardRef<HTMLAnchorElement, NavigationLinkProps>(function NavigationLink({
   children,
   className,
   external = false,
@@ -74,7 +75,7 @@ export function NavigationLink({
   size = "sm",
   target,
   ...props
-}: NavigationLinkProps) {
+}, ref) {
   const Icon = icon === undefined && external ? ExternalLinkIcon : icon;
   const linkClassName = cn(
     "inline-flex items-center rounded-sm font-medium text-primary underline-offset-4 transition-colors hover:text-primary-hover hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25",
@@ -98,6 +99,7 @@ export function NavigationLink({
   if (!external) {
     return (
       <Link
+        ref={ref}
         {...props}
         to={href}
         target={target}
@@ -112,6 +114,7 @@ export function NavigationLink({
 
   return (
     <a
+      ref={ref}
       {...props}
       href={href}
       target={target ?? "_blank"}
@@ -133,4 +136,4 @@ export function NavigationLink({
       {content}
     </a>
   );
-}
+});

package/src/shared/components/doc-browser/__tests__/doc-browser.test.tsx

@@ -571,6 +571,40 @@ describe("DocBrowser floating interactions", () => {
     expect(onDragStart).toHaveBeenCalledTimes(1);
   });
 
+  it("opens the same tab action from right click and the more button", () => {
+    const onAddToChat = vi.fn();
+
+    render(
+      <DocBrowserTabStrip
+        tabs={docBrowserState.tabs}
+        activeTabId="docs"
+        canGoBack={false}
+        canGoForward={false}
+        isDocked={true}
+        isFullscreen={false}
+        onGoBack={vi.fn()}
+        onGoForward={vi.fn()}
+        onOpenNewTab={vi.fn()}
+        onSetActiveTab={vi.fn()}
+        onCloseTab={vi.fn()}
+        onClose={vi.fn()}
+        onDragStart={vi.fn()}
+        onToggleMode={vi.fn()}
+        getTabMenuGroups={() => [{
+          key: "chat",
+          items: [{ key: "add", label: "Add to Chat", onSelect: onAddToChat }],
+        }]}
+      />,
+    );
+
+    fireEvent.contextMenu(screen.getByRole("button", { name: "Docs" }));
+    fireEvent.click(screen.getByRole("menuitem", { name: "Add to Chat" }));
+    fireEvent.click(screen.getByRole("button", { name: "More tab actions" }));
+    fireEvent.click(screen.getByRole("menuitem", { name: "Add to Chat" }));
+
+    expect(onAddToChat).toHaveBeenCalledTimes(2);
+  });
+
   it("keeps the floating panel left edge stable when resizing from the right", () => {
     docBrowserState.mode = "floating";
 

package/src/shared/components/doc-browser/doc-browser-tab-strip.tsx

@@ -10,6 +10,7 @@ import {
   X,
 } from "lucide-react";
 import type { DocBrowserDockState, DocBrowserTab } from "./doc-browser-context";
+import type { ContextMenuGroup } from "@/shared/components/ui/context-menu/context-menu";
 import {
   CompactTabStrip,
   type CompactTabStripAction,
@@ -35,6 +36,7 @@ type DocBrowserTabStripProps = {
   onClose: () => void;
   onDragStart: (event: PointerEvent<HTMLElement>) => void;
   onToggleMode: () => void;
+  getTabMenuGroups?: (tab: DocBrowserTab) => readonly ContextMenuGroup[] | undefined;
 };
 
 function shouldBlockHeaderDrag(target: EventTarget | null): boolean {
@@ -60,6 +62,7 @@ export function DocBrowserTabStrip({
   onClose,
   onDragStart,
   onToggleMode,
+  getTabMenuGroups,
 }: DocBrowserTabStripProps) {
   const backLabel = t("docBrowserBack");
   const closeLabel = t("docBrowserClose");
@@ -81,6 +84,8 @@ export function DocBrowserTabStrip({
     closePlacement: "trailing",
     onSelect: () => onSetActiveTab(tab.id),
     onClose: () => onCloseTab(tab.id),
+    menuLabel: t("docBrowserTabMoreActions"),
+    menuGroups: getTabMenuGroups?.(tab),
   }));
   const actions: CompactTabStripAction[] = [
     { key: "back", disabled: !canGoBack, icon: <ArrowLeft className="h-3.5 w-3.5" />, label: backLabel, onClick: onGoBack },

package/src/shared/components/doc-browser/doc-browser.tsx

@@ -28,6 +28,7 @@ import {
 import { ResizableRightPanel } from '@/shared/components/resizable-right-panel/resizable-right-panel';
 import { cn } from '@/shared/lib/utils';
 import { t } from '@/shared/lib/i18n';
+import type { ContextMenuGroup } from '@/shared/components/ui/context-menu/context-menu';
 import { GripVertical } from 'lucide-react';
 import {
   DOC_BROWSER_DOCKED_MAX_WIDTH,
@@ -38,8 +39,11 @@ type DocBrowserProps = {
   customTabRenderers?: DocBrowserCustomTabRenderers;
   displayMode?: 'desktop' | 'fullscreen';
   dockControls?: DocBrowserDockControls;
+  getTabMenuGroups?: (tab: DocBrowserTab) => readonly ContextMenuGroup[] | undefined;
 };
 
+export type DocBrowserTabMenuGroupsResolver = NonNullable<DocBrowserProps['getTabMenuGroups']>;
+
 type FloatingPanelInteraction = {
   startX: number;
   startY: number;
@@ -160,7 +164,12 @@ function useDocBrowserAddressBar({
   };
 }
 
-export function DocBrowser({ customTabRenderers = {}, displayMode = 'desktop', dockControls }: DocBrowserProps) {
+export function DocBrowser({
+  customTabRenderers = {},
+  displayMode = 'desktop',
+  dockControls,
+  getTabMenuGroups,
+}: DocBrowserProps) {
   const {
     isOpen,
     mode,
@@ -367,6 +376,7 @@ export function DocBrowser({ customTabRenderers = {}, displayMode = 'desktop', d
         onClose={close}
         onDragStart={startFloatDrag}
         onToggleMode={toggleMode}
+        getTabMenuGroups={getTabMenuGroups}
       />
 
       <DocBrowserAddressToolbar

package/src/shared/components/doc-browser/managers/doc-browser.manager.ts

@@ -267,6 +267,19 @@ export class DocBrowserManager {
     this.onRightPanelOpened?.();
   };
 
+  readonly reloadByDedupeKeys = (dedupeKeys: readonly string[]): void => {
+    const targets = new Set(dedupeKeys);
+    if (targets.size === 0) {
+      return;
+    }
+    this.setSnapshot((prev) => ({
+      ...prev,
+      tabs: prev.tabs.map((tab) => targets.has(tab.dedupeKey ?? "")
+        ? { ...tab, navVersion: tab.navVersion + 1 }
+        : tab),
+    }));
+  };
+
   readonly openNewTab = (): void => {
     this.open(undefined, { kind: DOC_BROWSER_HOME_TAB_KIND, newTab: true });
   };

package/src/shared/components/ui/tabs.tsx

@@ -39,8 +39,29 @@ export function Tabs({ defaultValue: _defaultValue, value, onValueChange, childr
 }
 
 export function TabsList({ children, className }: TabsListProps) {
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return;
+    const triggers = Array.from(
+      event.currentTarget.querySelectorAll<HTMLButtonElement>('[role="tab"]:not(:disabled)'),
+    );
+    if (triggers.length === 0) return;
+    const currentIndex = triggers.indexOf(document.activeElement as HTMLButtonElement);
+    const nextIndex = event.key === 'Home'
+      ? 0
+      : event.key === 'End'
+        ? triggers.length - 1
+        : event.key === 'ArrowRight'
+          ? (Math.max(currentIndex, -1) + 1) % triggers.length
+          : (currentIndex <= 0 ? triggers.length : currentIndex) - 1;
+    event.preventDefault();
+    triggers[nextIndex]?.focus();
+    triggers[nextIndex]?.click();
+  };
+
   return (
     <div
+      role="tablist"
+      onKeyDown={handleKeyDown}
       className={cn(
         'inline-flex h-9 items-center justify-center rounded-xl bg-muted p-1 text-muted-foreground',
         className
@@ -61,7 +82,9 @@ export function TabsTrigger({ value, children, className }: TabsTriggerProps) {
     <button
       type="button"
       onClick={() => context.onValueChange(value)}
-      aria-pressed={isActive}
+      role="tab"
+      aria-selected={isActive}
+      tabIndex={isActive ? 0 : -1}
       data-state={isActive ? 'active' : 'inactive'}
       className={cn(
         'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-[13px] font-medium transition-all duration-fast focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:pointer-events-none disabled:opacity-50',

package/src/shared/hooks/use-server-path-watch.ts

@@ -0,0 +1,42 @@
+import { useEffect } from 'react';
+import { unwatchServerPaths, watchServerPaths } from '@/shared/lib/api';
+
+const SERVER_PATH_WATCH_HEARTBEAT_MS = 2 * 60_000;
+
+export function useServerPathWatch(directories: readonly string[]): void {
+  const signature = directories.join('\n');
+
+  useEffect(() => {
+    const watchedDirectories = signature.split('\n').filter(Boolean);
+    if (watchedDirectories.length === 0) return;
+    let disposed = false;
+    let subscriptionId: string | null = null;
+    let heartbeat: ReturnType<typeof setInterval> | null = null;
+
+    const subscribe = async () => {
+      try {
+        const result = await watchServerPaths({
+          directories: watchedDirectories,
+          subscriptionId,
+        });
+        if (disposed) {
+          await unwatchServerPaths(result.subscriptionId).catch(() => undefined);
+          return;
+        }
+        subscriptionId = result.subscriptionId;
+      } catch (error) {
+        console.warn('Project file auto-refresh is unavailable; manual refresh remains available.', error);
+      }
+    };
+
+    void subscribe().then(() => {
+      if (!disposed && subscriptionId) heartbeat = setInterval(() => void subscribe(), SERVER_PATH_WATCH_HEARTBEAT_MS);
+    });
+
+    return () => {
+      disposed = true;
+      if (heartbeat) clearInterval(heartbeat);
+      if (subscriptionId) void unwatchServerPaths(subscriptionId).catch(() => undefined);
+    };
+  }, [signature]);
+}

package/src/shared/lib/api/server-path/server-path.types.ts

@@ -21,6 +21,16 @@ export type ServerPathBrowseView = {
   locations: ServerPathLocationView[];
 };
 
+export type ServerPathWatchRequest = {
+  subscriptionId?: string | null;
+  directories: string[];
+};
+
+export type ServerPathWatchView = {
+  subscriptionId: string;
+  watchedDirectories: string[];
+};
+
 export type ServerPathSearchEntryView = {
   name: string;
   path: string;

package/src/shared/lib/api/types.ts

@@ -449,6 +449,8 @@ export type {
   ServerPathReadView,
   ServerPathSearchEntryView,
   ServerPathSearchView,
+  ServerPathWatchRequest,
+  ServerPathWatchView,
 } from './server-path/server-path.types';
 
 export type PanelAppEntryView = {
@@ -826,6 +828,7 @@ export type ConfigActionExecuteResult = {
 // WebSocket events
 export type WsEvent =
   | { type: 'config.updated'; payload: { path: string } }
+  | { type: 'server-path.changed'; payload: { directoryPath: string } }
   | {
       type: 'channel.config.apply-status';
       payload: {

package/src/shared/lib/api/utils/server-path.utils.ts

@@ -12,6 +12,8 @@ import type {
   ServerPathFilesUploadView,
   ServerPathReadView,
   ServerPathSearchView,
+  ServerPathWatchRequest,
+  ServerPathWatchView,
 } from '@/shared/lib/api/types';
 
 const SERVER_PATH_CONTENT_BASE_PATH = '/api/server-paths/content';
@@ -24,6 +26,14 @@ export async function fetchServerPathBrowse(params?: {
   return await nextclawClient.serverPaths.browse(params);
 }
 
+export async function watchServerPaths(input: ServerPathWatchRequest): Promise<ServerPathWatchView> {
+  return await nextclawClient.serverPaths.watch(input);
+}
+
+export async function unwatchServerPaths(subscriptionId: string): Promise<void> {
+  await nextclawClient.serverPaths.unwatch(subscriptionId);
+}
+
 export async function createServerPathDirectory(
   input: ServerPathDirectoryCreateRequest,
 ): Promise<ServerPathDirectoryCreateView> {