@nextclaw/ui 0.15.23 → 0.15.25

package/src/features/chat/stores/chat-thread.store.ts

@@ -1,22 +1,17 @@
 import { create } from 'zustand';
 import { createJSONStorage, persist } from 'zustand/middleware';
 import type { NcpMessage } from '@nextclaw/ncp';
-import type {
-  ChatContentParams,
-  ChatFileOperationLineViewModel,
-  ChatFilePreviewViewer,
-} from '@nextclaw/agent-chat-ui';
-import type {
-  SessionContextWindowView,
-  SessionTypeIconView
-} from '@/shared/lib/api';
+import type { ChatContentParams, ChatFileOperationLineViewModel, ChatFilePreviewViewer } from '@nextclaw/agent-chat-ui';
+import type { SessionContextWindowView, SessionTypeIconView } from '@/shared/lib/api';
 import {
   normalizePersistedWorkspaceFileTab,
   retainWorkspaceFileTabs,
   toPersistedWorkspaceFileTab,
 } from '@/features/chat/features/workspace/utils/chat-workspace-file-tab-persistence.utils';
 import {
+  CHAT_WORKSPACE_EXPLORER_DEFAULT_WIDTH,
   CHAT_WORKSPACE_PANEL_DEFAULT_WIDTH,
+  normalizeChatWorkspaceExplorerWidth,
   normalizeChatWorkspacePanelWidth,
 } from '@/features/chat/features/workspace/utils/chat-workspace-panel-layout.utils';
 import { createWorkspaceNavigationEntryFromSnapshot } from '@/features/chat/features/workspace/utils/chat-thread-workspace-session.utils';
@@ -100,6 +95,7 @@ export type ChatThreadSnapshot = {
   closedWorkspaceTabEntries: ChatWorkspaceNavigationEntry[];
   workspaceNavigationHistory: ChatWorkspaceNavigationEntry[];
   workspaceNavigationHistoryIndex: number;
+  workspaceExplorerWidth: number;
   workspacePanelWidth: number;
   contextWindow?: SessionContextWindowView | null;
 };
@@ -123,6 +119,7 @@ type PersistedChatThreadStore = {
     closedWorkspaceTabEntries?: unknown;
     workspaceNavigationHistory?: unknown;
     workspaceNavigationHistoryIndex?: unknown;
+    workspaceExplorerWidth?: unknown;
     workspacePanelWidth?: unknown;
   };
 };
@@ -137,6 +134,7 @@ type PersistedChatWorkspaceSnapshot = Pick<
   | 'closedWorkspaceTabEntries'
   | 'workspaceNavigationHistory'
   | 'workspaceNavigationHistoryIndex'
+  | 'workspaceExplorerWidth'
   | 'workspacePanelWidth'
 >;
 
@@ -169,8 +167,9 @@ const initialSnapshot: ChatThreadSnapshot = {
   closedWorkspaceTabEntries: [],
   workspaceNavigationHistory: [],
   workspaceNavigationHistoryIndex: 0,
+  workspaceExplorerWidth: CHAT_WORKSPACE_EXPLORER_DEFAULT_WIDTH,
   workspacePanelWidth: CHAT_WORKSPACE_PANEL_DEFAULT_WIDTH,
-  contextWindow: null
+  contextWindow: null,
 };
 
 function isRecord(value: unknown): value is Record<string, unknown> {
@@ -178,20 +177,14 @@ function isRecord(value: unknown): value is Record<string, unknown> {
 }
 
 function normalizeOptionalString(value: unknown): string | null {
-  return typeof value === 'string' && value.trim().length > 0
-    ? value.trim()
-    : null;
+  return typeof value === 'string' && value.trim().length > 0 ? value.trim() : null;
 }
 
 function normalizeHistoryIndex(value: unknown, maxIndex: number): number {
-  return typeof value === 'number' && Number.isInteger(value)
-    ? Math.min(Math.max(0, value), maxIndex)
-    : maxIndex;
+  return typeof value === 'number' && Number.isInteger(value) ? Math.min(Math.max(0, value), maxIndex) : maxIndex;
 }
 
-function isWorkspacePanelKind(
-  value: unknown,
-): value is PersistedWorkspacePanelKind {
+function isWorkspacePanelKind(value: unknown): value is PersistedWorkspacePanelKind {
   return (
     value === 'overview' ||
     value === 'child-sessions' ||
@@ -202,9 +195,7 @@ function isWorkspacePanelKind(
   );
 }
 
-function normalizePersistedWorkspaceNavigationEntry(
-  value: unknown,
-): ChatWorkspaceNavigationEntry | null {
+function normalizePersistedWorkspaceNavigationEntry(value: unknown): ChatWorkspaceNavigationEntry | null {
   if (!isRecord(value)) {
     return null;
   }
@@ -226,9 +217,7 @@ function normalizePersistedWorkspaceNavigationEntry(
   };
 }
 
-function normalizePersistedWorkspaceSnapshot(
-  value: unknown,
-): PersistedChatWorkspaceSnapshot | null {
+function normalizePersistedWorkspaceSnapshot(value: unknown): PersistedChatWorkspaceSnapshot | null {
   if (!isRecord(value)) {
     return null;
   }
@@ -236,35 +225,29 @@ function normalizePersistedWorkspaceSnapshot(
   const activeWorkspaceFileKey = normalizeOptionalString(value.activeWorkspaceFileKey);
   const normalizedWorkspaceFileTabs = Array.isArray(value.workspaceFileTabs)
     ? value.workspaceFileTabs
-      .map(normalizePersistedWorkspaceFileTab)
-      .filter((tab): tab is ChatWorkspaceFileTab => tab !== null)
+        .map(normalizePersistedWorkspaceFileTab)
+        .filter((tab): tab is ChatWorkspaceFileTab => tab !== null)
     : [];
   const workspaceFileTabs = retainWorkspaceFileTabs(
     normalizedWorkspaceFileTabs,
     activeWorkspaceFileKey,
     CHAT_THREAD_MAX_PERSISTED_WORKSPACE_FILE_TABS,
   );
-  const sessionWorkspaceFileTabs = workspaceFileTabs.filter(
-    (tab) => tab.parentSessionKey === workspacePanelParentKey,
-  );
+  const sessionWorkspaceFileTabs = workspaceFileTabs.filter((tab) => tab.parentSessionKey === workspacePanelParentKey);
   const resolvedActiveWorkspaceFileKey =
     activeWorkspaceFileKey && sessionWorkspaceFileTabs.some((tab) => tab.key === activeWorkspaceFileKey)
       ? activeWorkspaceFileKey
-      : sessionWorkspaceFileTabs[0]?.key ?? null;
+      : (sessionWorkspaceFileTabs[0]?.key ?? null);
   const activeWorkspacePanelKind = isWorkspacePanelKind(value.activeWorkspacePanelKind)
     ? value.activeWorkspacePanelKind
     : null;
   const resolvedActiveWorkspacePanelKind =
-    activeWorkspacePanelKind === 'file' && !resolvedActiveWorkspaceFileKey
-      ? null
-      : activeWorkspacePanelKind;
+    activeWorkspacePanelKind === 'file' && !resolvedActiveWorkspaceFileKey ? null : activeWorkspacePanelKind;
   const activeChildSessionKey = normalizeOptionalString(value.activeChildSessionKey);
   const closedWorkspaceTabEntries = Array.isArray(value.closedWorkspaceTabEntries)
     ? value.closedWorkspaceTabEntries
-      .map(normalizePersistedWorkspaceNavigationEntry)
-      .filter((entry): entry is ChatWorkspaceNavigationEntry =>
-        entry !== null && entry.kind !== 'overview',
-      )
+        .map(normalizePersistedWorkspaceNavigationEntry)
+        .filter((entry): entry is ChatWorkspaceNavigationEntry => entry !== null && entry.kind !== 'overview')
     : [];
   const fallbackHistoryEntry = createWorkspaceNavigationEntryFromSnapshot({
     activeWorkspacePanelKind: resolvedActiveWorkspacePanelKind,
@@ -274,11 +257,9 @@ function normalizePersistedWorkspaceSnapshot(
   });
   const normalizedNavigationHistory = Array.isArray(value.workspaceNavigationHistory)
     ? value.workspaceNavigationHistory
-      .map(normalizePersistedWorkspaceNavigationEntry)
-      .filter((entry): entry is ChatWorkspaceNavigationEntry => entry !== null)
-      .filter((entry) =>
-        entry.kind !== 'file' || workspaceFileTabs.some((tab) => tab.key === entry.key),
-      )
+        .map(normalizePersistedWorkspaceNavigationEntry)
+        .filter((entry): entry is ChatWorkspaceNavigationEntry => entry !== null)
+        .filter((entry) => entry.kind !== 'file' || workspaceFileTabs.some((tab) => tab.key === entry.key))
     : [];
   const workspaceNavigationHistory =
     normalizedNavigationHistory.length > 0
@@ -288,10 +269,7 @@ function normalizePersistedWorkspaceSnapshot(
         : [];
   const workspaceNavigationHistoryIndex =
     workspaceNavigationHistory.length > 0
-      ? normalizeHistoryIndex(
-        value.workspaceNavigationHistoryIndex,
-        workspaceNavigationHistory.length - 1,
-      )
+      ? normalizeHistoryIndex(value.workspaceNavigationHistoryIndex, workspaceNavigationHistory.length - 1)
       : 0;
 
   return {
@@ -303,9 +281,8 @@ function normalizePersistedWorkspaceSnapshot(
     closedWorkspaceTabEntries,
     workspaceNavigationHistory,
     workspaceNavigationHistoryIndex,
-    workspacePanelWidth: normalizeChatWorkspacePanelWidth(
-      value.workspacePanelWidth,
-    ),
+    workspaceExplorerWidth: normalizeChatWorkspaceExplorerWidth(value.workspaceExplorerWidth),
+    workspacePanelWidth: normalizeChatWorkspacePanelWidth(value.workspacePanelWidth),
   };
 }
 
@@ -317,23 +294,21 @@ export const useChatThreadStore = create<ChatThreadStore>()(
         set((state) => ({
           snapshot: {
             ...state.snapshot,
-            ...patch
-          }
-        }))
+            ...patch,
+          },
+        })),
     }),
     {
       name: CHAT_THREAD_WORKSPACE_STORAGE_KEY,
       version: CHAT_THREAD_WORKSPACE_STORAGE_VERSION,
       storage: createJSONStorage(() => window.localStorage),
       partialize: (state): PersistedChatThreadStore => {
-        const workspaceNavigationHistory = state.snapshot.workspaceNavigationHistory
-          .filter((entry) => entry.kind !== 'side-chat-draft');
+        const workspaceNavigationHistory = state.snapshot.workspaceNavigationHistory.filter(
+          (entry) => entry.kind !== 'side-chat-draft',
+        );
         const workspaceNavigationHistoryIndex =
           workspaceNavigationHistory.length > 0
-            ? Math.min(
-              state.snapshot.workspaceNavigationHistoryIndex,
-              workspaceNavigationHistory.length - 1,
-            )
+            ? Math.min(state.snapshot.workspaceNavigationHistoryIndex, workspaceNavigationHistory.length - 1)
             : 0;
         return {
           snapshot: {
@@ -347,23 +322,21 @@ export const useChatThreadStore = create<ChatThreadStore>()(
               state.snapshot.workspaceFileTabs,
               state.snapshot.activeWorkspaceFileKey,
               CHAT_THREAD_MAX_PERSISTED_WORKSPACE_FILE_TABS,
-            )
-              .map(toPersistedWorkspaceFileTab),
+            ).map(toPersistedWorkspaceFileTab),
             activeWorkspaceFileKey: state.snapshot.activeWorkspaceFileKey,
-            closedWorkspaceTabEntries: state.snapshot.closedWorkspaceTabEntries
-              .filter((entry) => entry.kind !== 'overview' && entry.kind !== 'side-chat-draft'),
+            closedWorkspaceTabEntries: state.snapshot.closedWorkspaceTabEntries.filter(
+              (entry) => entry.kind !== 'overview' && entry.kind !== 'side-chat-draft',
+            ),
             workspaceNavigationHistory,
             workspaceNavigationHistoryIndex,
+            workspaceExplorerWidth: state.snapshot.workspaceExplorerWidth,
             workspacePanelWidth: state.snapshot.workspacePanelWidth,
-          }
+          },
         };
       },
       merge: (persistedState, currentState) => {
-        const persistedSnapshot = isRecord(persistedState)
-          ? persistedState.snapshot
-          : null;
-        const workspaceSnapshot =
-          normalizePersistedWorkspaceSnapshot(persistedSnapshot);
+        const persistedSnapshot = isRecord(persistedState) ? persistedState.snapshot : null;
+        const workspaceSnapshot = normalizePersistedWorkspaceSnapshot(persistedSnapshot);
         if (!workspaceSnapshot) {
           return currentState;
         }
@@ -371,10 +344,10 @@ export const useChatThreadStore = create<ChatThreadStore>()(
           ...currentState,
           snapshot: {
             ...currentState.snapshot,
-            ...workspaceSnapshot
-          }
+            ...workspaceSnapshot,
+          },
         };
-      }
-    }
-  )
+      },
+    },
+  ),
 );

package/src/features/chat/types/chat-input-bar.types.ts

@@ -49,7 +49,10 @@ export type ChatInputBarAdapterTexts = {
   discoveredModelsViewLabel: string;
   discoveredModelsGroupLabel: string;
   discoveredModelAddLabel: string;
+  discoveredModelAddedLabel: string;
   discoveredModelsDismissLabel: string;
+  discoveredModelsDoneLabel: string;
+  discoveredModelsCloseLabel: string;
   thinkingLabels: Record<ChatThinkingLevel, string>;
   noModelOptionsLabel: string;
   configureProviderLabel: string;

package/src/features/side-dock/components/__tests__/side-dock.test.tsx

@@ -36,6 +36,7 @@ describe('SideDock', () => {
     builtInItems.forEach((item) => {
       expect(document.querySelector(`[data-side-dock-item-id="${item.id}"]`)).toBeTruthy();
     });
+    expect(document.querySelector('[data-side-dock-item-id="service-apps"]')).toBeNull();
 
     const appsButton = document.querySelector('[data-side-dock-item-id="apps"]');
     expect(appsButton).toBeTruthy();

package/src/features/side-dock/configs/side-dock-built-in-items.config.ts

@@ -1,7 +1,6 @@
 import {
   RIGHT_PANEL_APPS_URL,
   RIGHT_PANEL_HOME_URL,
-  RIGHT_PANEL_SERVICE_APPS_URL,
 } from '@/features/right-panel-resources';
 import type { SideDockItem } from '@/features/side-dock/types/side-dock.types';
 import { t } from '@/shared/lib/i18n';
@@ -20,14 +19,6 @@ export function getSideDockBuiltInItems(): SideDockItem[] {
       removable: false,
       target: { type: 'right-panel-resource', uri: RIGHT_PANEL_APPS_URL },
     },
-    {
-      builtIn: true,
-      icon: { type: 'builtin', name: 'service-apps' },
-      id: 'service-apps',
-      label: t('serviceAppsTitle'),
-      removable: false,
-      target: { type: 'right-panel-resource', uri: RIGHT_PANEL_SERVICE_APPS_URL },
-    },
     {
       builtIn: true,
       icon: { type: 'builtin', name: 'docs' },

package/src/shared/components/resizable-right-panel/__tests__/resizable-right-panel.test.tsx

@@ -1,6 +1,6 @@
-import { fireEvent, render, screen } from "@testing-library/react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import { ResizableRightPanel } from "@/shared/components/resizable-right-panel/resizable-right-panel";
+import { fireEvent, render, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { ResizableRightPanel } from '@/shared/components/resizable-right-panel/resizable-right-panel';
 
 function firePointerEvent(
   target: Window | Document | Node | Element,
@@ -15,12 +15,12 @@ function firePointerEvent(
   fireEvent(target, event);
 }
 
-describe("ResizableRightPanel", () => {
+describe('ResizableRightPanel', () => {
   beforeEach(() => {
     HTMLElement.prototype.setPointerCapture = vi.fn();
   });
 
-  it("resizes horizontally from the left handle and clamps to max width", () => {
+  it('resizes horizontally from the left handle and clamps to max width', () => {
     const onWidthCommit = vi.fn();
     render(
       <ResizableRightPanel
@@ -34,48 +34,51 @@ describe("ResizableRightPanel", () => {
       </ResizableRightPanel>,
     );
 
-    firePointerEvent(
-      screen.getByTestId("resizable-right-panel-handle"),
-      "pointerdown",
-      { clientX: 800, pointerId: 1 },
-    );
-    firePointerEvent(window, "pointermove", { clientX: 600, pointerId: 1 });
+    firePointerEvent(screen.getByTestId('resizable-right-panel-handle'), 'pointerdown', { clientX: 800, pointerId: 1 });
+    firePointerEvent(window, 'pointermove', { clientX: 600, pointerId: 1 });
 
-    expect(screen.getByTestId("right-panel").style.width).toBe("500px");
-    expect(
-      screen.getByTestId("resizable-right-panel-resize-shield"),
-    ).toBeTruthy();
+    expect(screen.getByTestId('right-panel').style.width).toBe('500px');
+    expect(screen.getByTestId('resizable-right-panel-resize-shield')).toBeTruthy();
 
-    firePointerEvent(window, "pointerup", { clientX: 600, pointerId: 1 });
+    firePointerEvent(window, 'pointerup', { clientX: 600, pointerId: 1 });
 
     expect(onWidthCommit).toHaveBeenCalledWith(500);
 
-    expect(
-      screen.queryByTestId("resizable-right-panel-resize-shield"),
-    ).toBeNull();
+    expect(screen.queryByTestId('resizable-right-panel-resize-shield')).toBeNull();
   });
 
-  it("does not render resize controls in overlay mode", () => {
+  it('does not render resize controls in overlay mode', () => {
     render(
       <ResizableRightPanel data-testid="right-panel" overlay>
         Content
       </ResizableRightPanel>,
     );
 
-    expect(
-      screen.queryByTestId("resizable-right-panel-handle"),
-    ).toBeNull();
-    expect(screen.getByTestId("right-panel").className).toContain("fixed");
+    expect(screen.queryByTestId('resizable-right-panel-handle')).toBeNull();
+    expect(screen.getByTestId('right-panel').className).toContain('fixed');
+  });
+
+  it('keeps the outer resize boundary above nested panel overlays', () => {
+    render(
+      <ResizableRightPanel data-testid="right-panel">
+        <div className="absolute inset-0 z-20" data-testid="nested-overlay" />
+      </ResizableRightPanel>,
+    );
+
+    const panel = screen.getByTestId('right-panel');
+    const handle = screen.getByTestId('resizable-right-panel-handle');
+    expect(handle.className).toContain('z-30');
+    expect(panel.compareDocumentPosition(handle) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
   });
 
-  it("applies a persisted controlled width after store rehydration", () => {
+  it('applies a persisted controlled width after store rehydration', () => {
     const view = render(
       <ResizableRightPanel data-testid="right-panel" width={480}>
         Content
       </ResizableRightPanel>,
     );
 
-    expect(screen.getByTestId("right-panel").style.width).toBe("480px");
+    expect(screen.getByTestId('right-panel').style.width).toBe('480px');
 
     view.rerender(
       <ResizableRightPanel data-testid="right-panel" width={620}>
@@ -83,24 +86,18 @@ describe("ResizableRightPanel", () => {
       </ResizableRightPanel>,
     );
 
-    expect(screen.getByTestId("right-panel").style.width).toBe("620px");
+    expect(screen.getByTestId('right-panel').style.width).toBe('620px');
   });
 
-  it("can scope overlay positioning to its container", () => {
+  it('can scope overlay positioning to its container', () => {
     render(
-      <ResizableRightPanel
-        data-testid="right-panel"
-        overlay
-        overlayScope="container"
-      >
+      <ResizableRightPanel data-testid="right-panel" overlay overlayScope="container">
         Content
       </ResizableRightPanel>,
     );
 
-    expect(
-      screen.queryByTestId("resizable-right-panel-handle"),
-    ).toBeNull();
-    expect(screen.getByTestId("right-panel").className).toContain("absolute");
-    expect(screen.getByTestId("right-panel").className).not.toContain("fixed");
+    expect(screen.queryByTestId('resizable-right-panel-handle')).toBeNull();
+    expect(screen.getByTestId('right-panel').className).toContain('absolute');
+    expect(screen.getByTestId('right-panel').className).not.toContain('fixed');
   });
 });

package/src/shared/components/resizable-right-panel/resizable-right-panel.tsx

@@ -1,13 +1,13 @@
-import { useRef, useState, type ComponentPropsWithoutRef } from "react";
-import { cn } from "@/shared/lib/utils";
+import { useRef, useState, type ComponentPropsWithoutRef } from 'react';
+import { cn } from '@/shared/lib/utils';
 
-type ResizableRightPanelProps = ComponentPropsWithoutRef<"aside"> & {
+type ResizableRightPanelProps = ComponentPropsWithoutRef<'aside'> & {
   defaultWidth?: number;
   minWidth?: number;
   maxWidth?: number;
   onWidthCommit?: (width: number) => void;
   overlay?: boolean;
-  overlayScope?: "viewport" | "container";
+  overlayScope?: 'viewport' | 'container';
   width?: number;
 };
 
@@ -20,7 +20,7 @@ export function ResizableRightPanel({
   maxWidth = 860,
   onWidthCommit,
   overlay = false,
-  overlayScope = "viewport",
+  overlayScope = 'viewport',
   width: controlledWidth,
   ...props
 }: ResizableRightPanelProps) {
@@ -31,10 +31,10 @@ export function ResizableRightPanel({
   const [uncontrolledWidth, setUncontrolledWidth] = useState(defaultWidth);
   const width = dragWidth ?? controlledWidth ?? uncontrolledWidth;
   const overlayClassName = overlay
-    ? overlayScope === "container"
-      ? "absolute inset-0 z-30"
-      : "fixed inset-0 z-40"
-    : "border-l border-border";
+    ? overlayScope === 'container'
+      ? 'absolute inset-0 z-30'
+      : 'fixed inset-0 z-40'
+    : 'border-l border-border';
 
   const onResizeStart = (event: React.PointerEvent<HTMLDivElement>) => {
     if (overlay) return;
@@ -60,30 +60,36 @@ export function ResizableRightPanel({
       setDragWidth(null);
       setIsResizing(false);
       resizeRef.current = null;
-      window.removeEventListener("pointermove", onMove);
-      window.removeEventListener("pointerup", onUp);
-      window.removeEventListener("pointercancel", onUp);
+      window.removeEventListener('pointermove', onMove);
+      window.removeEventListener('pointerup', onUp);
+      window.removeEventListener('pointercancel', onUp);
     };
-    window.addEventListener("pointermove", onMove);
-    window.addEventListener("pointerup", onUp);
-    window.addEventListener("pointercancel", onUp);
+    window.addEventListener('pointermove', onMove);
+    window.addEventListener('pointerup', onUp);
+    window.addEventListener('pointercancel', onUp);
   };
 
   return (
     <aside
       {...props}
       className={cn(
-        "relative flex h-full min-h-0 shrink-0 overflow-hidden bg-card text-card-foreground",
+        'relative flex h-full min-h-0 shrink-0 overflow-hidden bg-card text-card-foreground',
         overlayClassName,
         className,
       )}
       style={overlay ? style : { ...style, width }}
     >
+      <div className="flex h-full min-h-0 w-full flex-col overflow-hidden">{children}</div>
       {!overlay ? (
-        <div className="absolute left-0 top-0 z-20 h-full w-3 cursor-ew-resize transition-colors hover:bg-primary/10" data-testid="resizable-right-panel-handle" onPointerDown={onResizeStart} />
+        <div
+          className="absolute left-0 top-0 z-30 h-full w-3 cursor-ew-resize transition-colors hover:bg-primary/10"
+          data-testid="resizable-right-panel-handle"
+          onPointerDown={onResizeStart}
+        />
+      ) : null}
+      {isResizing ? (
+        <div className="absolute inset-0 z-10 cursor-ew-resize" data-testid="resizable-right-panel-resize-shield" />
       ) : null}
-      <div className="flex h-full min-h-0 w-full flex-col overflow-hidden">{children}</div>
-      {isResizing ? <div className="absolute inset-0 z-10 cursor-ew-resize" data-testid="resizable-right-panel-resize-shield" /> : null}
     </aside>
   );
 }