@nextclaw/ui 0.15.21 → 0.15.23

package/src/features/chat/features/workspace/components/chat-session-workspace-directory-browser.tsx

@@ -1,15 +1,31 @@
 import { useState, type ReactNode } from "react";
-import type { ChatFileOpenActionViewModel } from "@nextclaw/agent-chat-ui";
-import { ChevronDown, ChevronRight, Folder, FolderOpen } from "lucide-react";
+import { copyText, type ChatFileOpenActionViewModel } from "@nextclaw/agent-chat-ui";
+import {
+  ChevronDown,
+  ChevronRight,
+  Copy,
+  Folder,
+  FolderOpen,
+  LocateFixed,
+  MessageSquarePlus,
+} from "lucide-react";
+import { toast } from "sonner";
+import { usePresenter } from "@/features/chat/components/providers/chat-presenter.provider";
 import { FileTypeIcon } from "@/shared/components/file-type-icon";
+import {
+  ContextMenu,
+  type ContextMenuGroup,
+} from "@/shared/components/ui/context-menu/context-menu";
 import { useServerPathBrowse } from "@/shared/hooks/use-server-path-browse";
 import type { ServerPathEntryView } from "@/shared/lib/api";
+import { hostCapabilityManager } from "@/shared/lib/host-capabilities";
 import { t } from "@/shared/lib/i18n";
 import { cn } from "@/shared/lib/utils";
 
 type ChatSessionWorkspaceDirectoryBrowserProps = {
   browseQuery: ReturnType<typeof useServerPathBrowse>;
   onFileOpen: (action: ChatFileOpenActionViewModel) => void;
+  sessionKey?: string | null;
   renderStatus: (params: {
     text: string;
     tone?: "muted" | "error";
@@ -29,6 +45,13 @@ function readPathName(path: string): string {
   return path.split(/[\\/]/).filter(Boolean).pop() ?? path;
 }
 
+async function copyWorkspacePath(path: string) {
+  const copied = await copyText(path);
+  toast[copied ? "success" : "error"](
+    t(copied ? "chatCodeCopied" : "chatWorkspaceCopyPathFailed"),
+  );
+}
+
 function readBrowseError(
   browseQuery: ReturnType<typeof useServerPathBrowse>,
 ): string | null {
@@ -62,11 +85,17 @@ function WorkspaceDirectoryEntryIcon({
 function WorkspaceDirectoryTreeChildren({
   browseQuery,
   level,
+  onAddFileToChat,
   onFileOpen,
+  onRevealPath,
+  parentRelativePath,
 }: {
   browseQuery: ReturnType<typeof useServerPathBrowse>;
   level: number;
+  onAddFileToChat?: (entry: ServerPathEntryView, relativePath: string) => void;
   onFileOpen: (action: ChatFileOpenActionViewModel) => void;
+  onRevealPath?: (path: string) => void;
+  parentRelativePath: string | null;
 }) {
   const entries = browseQuery.data?.entries ?? [];
   const errorMessage = readBrowseError(browseQuery);
@@ -108,7 +137,14 @@ function WorkspaceDirectoryTreeChildren({
       key={entry.path}
       entry={entry}
       level={level + 1}
+      onAddFileToChat={onAddFileToChat}
       onFileOpen={onFileOpen}
+      onRevealPath={onRevealPath}
+      relativePath={
+        parentRelativePath
+          ? `${parentRelativePath}/${entry.name}`
+          : null
+      }
     />
   ));
 }
@@ -116,11 +152,17 @@ function WorkspaceDirectoryTreeChildren({
 function WorkspaceDirectoryTreeEntry({
   entry,
   level,
+  onAddFileToChat,
   onFileOpen,
+  onRevealPath,
+  relativePath,
 }: {
   entry: ServerPathEntryView;
   level: number;
+  onAddFileToChat?: (entry: ServerPathEntryView, relativePath: string) => void;
   onFileOpen: (action: ChatFileOpenActionViewModel) => void;
+  onRevealPath?: (path: string) => void;
+  relativePath: string | null;
 }) {
   const isDirectory = entry.kind === "directory";
   const [isExpanded, setIsExpanded] = useState(false);
@@ -129,6 +171,49 @@ function WorkspaceDirectoryTreeEntry({
     includeFiles: true,
     enabled: isDirectory && isExpanded,
   });
+  const contextMenuGroups: ContextMenuGroup[] = [
+    {
+      key: "primary",
+      items: [
+        ...(entry.kind === "file" && relativePath && onAddFileToChat
+          ? [{
+              key: "add-to-chat",
+              label: t("chatWorkspaceAddToChat"),
+              icon: <MessageSquarePlus className="h-4 w-4" />,
+              restoreFocus: false,
+              onSelect: () => onAddFileToChat(entry, relativePath),
+            }]
+          : []),
+        ...(onRevealPath
+          ? [{
+              key: "reveal",
+              label: t("chatWorkspaceRevealInFileManager"),
+              icon: <LocateFixed className="h-4 w-4" />,
+              onSelect: () => onRevealPath(entry.path),
+            }]
+          : []),
+      ],
+    },
+    {
+      key: "copy",
+      items: [
+        {
+          key: "copy-path",
+          label: t("chatWorkspaceCopyPath"),
+          icon: <Copy className="h-4 w-4" />,
+          onSelect: () => void copyWorkspacePath(entry.path),
+        },
+        ...(relativePath
+          ? [{
+              key: "copy-relative-path",
+              label: t("chatWorkspaceCopyRelativePath"),
+              icon: <Copy className="h-4 w-4" />,
+              onSelect: () => void copyWorkspacePath(relativePath),
+            }]
+          : []),
+      ],
+    },
+  ];
   const activateEntry = () => {
     if (isDirectory) {
       setIsExpanded((value) => !value);
@@ -147,38 +232,46 @@ function WorkspaceDirectoryTreeEntry({
       aria-expanded={isDirectory ? isExpanded : undefined}
       aria-label={buildDirectoryEntryLabel(entry)}
     >
-      <button
-        type="button"
-        className={cn(
-          "flex h-7 w-full min-w-0 items-center gap-1.5 pr-2 text-left text-[13px] text-gray-700 transition-colors hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-border",
-          entry.hidden ? "opacity-65" : null,
-        )}
-        style={{ paddingLeft: `${8 + level * 14}px` }}
-        onClick={activateEntry}
+      <ContextMenu
+        groups={contextMenuGroups}
+        label={t("chatWorkspaceFileContextMenu")}
       >
-        <span className="inline-flex h-4 w-4 shrink-0 items-center justify-center text-gray-400">
-          {isDirectory ? (
-            isExpanded ? (
-              <ChevronDown className="h-3.5 w-3.5" />
-            ) : (
-              <ChevronRight className="h-3.5 w-3.5" />
-            )
-          ) : null}
-        </span>
-        <WorkspaceDirectoryEntryIcon
-          fileName={entry.name}
-          isDirectory={isDirectory}
-          isExpanded={isExpanded}
-        />
-        <span className="min-w-0 flex-1 truncate">{entry.name}</span>
-      </button>
+        <button
+          type="button"
+          className={cn(
+            "flex h-7 w-full min-w-0 items-center gap-1.5 pr-2 text-left text-[13px] text-gray-700 transition-colors hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-border",
+            entry.hidden ? "opacity-65" : null,
+          )}
+          style={{ paddingLeft: `${8 + level * 14}px` }}
+          onClick={activateEntry}
+        >
+          <span className="inline-flex h-4 w-4 shrink-0 items-center justify-center text-gray-400">
+            {isDirectory ? (
+              isExpanded ? (
+                <ChevronDown className="h-3.5 w-3.5" />
+              ) : (
+                <ChevronRight className="h-3.5 w-3.5" />
+              )
+            ) : null}
+          </span>
+          <WorkspaceDirectoryEntryIcon
+            fileName={entry.name}
+            isDirectory={isDirectory}
+            isExpanded={isExpanded}
+          />
+          <span className="min-w-0 flex-1 truncate">{entry.name}</span>
+        </button>
+      </ContextMenu>
 
       {isDirectory && isExpanded ? (
         <div role="group">
           <WorkspaceDirectoryTreeChildren
             browseQuery={browseQuery}
             level={level}
+            onAddFileToChat={onAddFileToChat}
             onFileOpen={onFileOpen}
+            onRevealPath={onRevealPath}
+            parentRelativePath={relativePath}
           />
         </div>
       ) : null}
@@ -189,11 +282,31 @@ function WorkspaceDirectoryTreeEntry({
 export function ChatSessionWorkspaceDirectoryBrowser({
   browseQuery,
   onFileOpen,
+  sessionKey,
   renderStatus,
   showRoot = false,
 }: ChatSessionWorkspaceDirectoryBrowserProps) {
+  const presenter = usePresenter();
   const entries = browseQuery.data?.entries ?? [];
   const errorMessage = readBrowseError(browseQuery);
+  const onRevealPath = hostCapabilityManager.canRevealPath()
+    ? (path: string) => {
+        void hostCapabilityManager.revealPath(path).then((result) => {
+          if (!result.revealed) {
+            toast.error(t("chatWorkspaceRevealPathFailed"));
+          }
+        });
+      }
+    : undefined;
+  const onAddFileToChat = sessionKey !== undefined
+    ? (entry: ServerPathEntryView, relativePath: string) => {
+        presenter.chatComposerIntentManager.requestFileReference({
+          targetSessionKey: sessionKey,
+          tokenKey: relativePath,
+          label: entry.name,
+        });
+      }
+    : undefined;
 
   if (browseQuery.isLoading && !browseQuery.data) {
     return renderStatus({ text: t("chatWorkspaceLoadingDirectory") });
@@ -232,7 +345,10 @@ export function ChatSessionWorkspaceDirectoryBrowser({
                 key={entry.path}
                 entry={entry}
                 level={1}
+                onAddFileToChat={onAddFileToChat}
                 onFileOpen={onFileOpen}
+                onRevealPath={onRevealPath}
+                relativePath={onAddFileToChat ? entry.name : null}
               />
             ))}
           </div>
@@ -243,7 +359,10 @@ export function ChatSessionWorkspaceDirectoryBrowser({
             key={entry.path}
             entry={entry}
             level={0}
+            onAddFileToChat={onAddFileToChat}
             onFileOpen={onFileOpen}
+            onRevealPath={onRevealPath}
+            relativePath={onAddFileToChat ? entry.name : null}
           />
         ))
       )}

package/src/features/chat/features/workspace/components/chat-session-workspace-file-preview.tsx

@@ -11,6 +11,8 @@ import {
 import type { ChatWorkspaceFileTab } from "@/features/chat/stores/chat-thread.store";
 import { ChatSessionWorkspaceDirectoryBrowser } from "./chat-session-workspace-directory-browser";
 import { ChatSessionWorkspaceFileBreadcrumbs } from "./chat-session-workspace-file-breadcrumbs";
+import { WorkspaceTextSelectionMenu } from "./workspace-text-selection-menu";
+import type { WorkspaceTextExcerpt } from "@/features/chat/features/workspace/utils/workspace-text-excerpt.utils";
 import {
   resolveWorkspaceFileContentKind,
   WorkspaceFileContentPreview,
@@ -24,7 +26,10 @@ import {
   buildPreviewLines,
 } from "@/features/chat/features/message/utils/file-operation/line-builder.utils";
 import { t } from "@/shared/lib/i18n";
-import { buildWorkspaceFileBreadcrumb } from "@/shared/lib/session-project";
+import {
+  buildWorkspaceFileBreadcrumb,
+  resolveWorkspaceRelativePath,
+} from "@/shared/lib/session-project";
 import { cn } from "@/shared/lib/utils";
 import { resolveWorkspaceFileViewer } from "@/features/chat/features/workspace/utils/chat-workspace-file-viewer.utils";
 
@@ -303,6 +308,7 @@ type ChatSessionWorkspaceFilePreviewProps = {
   showBreadcrumbs?: boolean;
   onHtmlContentHeightChange?: (height: number) => void;
   onFileOpen: (action: ChatFileOpenActionViewModel) => void;
+  onTextExcerptAdd?: (excerpt: WorkspaceTextExcerpt) => void;
 };
 
 export function ChatSessionWorkspaceFilePreview({
@@ -313,6 +319,7 @@ export function ChatSessionWorkspaceFilePreview({
   showBreadcrumbs = true,
   onHtmlContentHeightChange,
   onFileOpen,
+  onTextExcerptAdd,
 }: ChatSessionWorkspaceFilePreviewProps) {
   const isPreviewMode = file.viewMode === "preview";
   const suppliedContentUrl = file.contentUrl?.trim() || null;
@@ -399,6 +406,10 @@ export function ChatSessionWorkspaceFilePreview({
   const isTextPreviewTruncated =
     !contentUrl && Boolean(previewQuery?.data?.truncated);
   const breadcrumbBasePath = sessionProjectRoot ?? sessionWorkingDir;
+  const excerptPath = resolveWorkspaceRelativePath({
+    path: resolvedPath,
+    sessionProjectRoot: breadcrumbBasePath,
+  });
   const breadcrumb = useMemo(
     () =>
       buildWorkspaceFileBreadcrumb({
@@ -409,6 +420,25 @@ export function ChatSessionWorkspaceFilePreview({
       }),
     [breadcrumbBasePath, isTextPreviewTruncated, previewPathKind, resolvedPath],
   );
+  const previewBody = (
+    <WorkspacePreviewBody
+      contentUrl={contentUrl}
+      contentUrlKind={contentUrlKind}
+      contentLabel={file.label?.trim() || resolvedPath}
+      contentParams={file.params}
+      directoryQuery={directoryQuery}
+      fileBasePath={sessionWorkingDir}
+      onFileOpen={onFileOpen}
+      onHtmlContentHeightChange={onHtmlContentHeightChange}
+      previewBlock={previewBlock}
+      previewKind={previewKind}
+      previewViewer={previewViewer}
+      previewQuery={previewQuery}
+      previewText={previewText}
+      targetColumn={file.column}
+      targetLine={file.line}
+    />
+  );
 
   return (
     <div className="flex h-full min-h-0 flex-col bg-white">
@@ -422,24 +452,18 @@ export function ChatSessionWorkspaceFilePreview({
       <div className="flex-1 min-h-0 overflow-hidden">
         {file.viewMode === "diff" ? (
           <WorkspaceDiffBody diffBlock={diffBlock} />
+        ) : excerptPath && previewText ? (
+          <WorkspaceTextSelectionMenu
+            fileLabel={file.label?.trim() || excerptPath.split("/").at(-1) || excerptPath}
+            filePath={excerptPath}
+            sourceStartLine={previewQuery?.data?.startLine ?? 1}
+            sourceText={previewText}
+            onAddToChat={onTextExcerptAdd}
+          >
+            {previewBody}
+          </WorkspaceTextSelectionMenu>
         ) : (
-          <WorkspacePreviewBody
-            contentUrl={contentUrl}
-            contentUrlKind={contentUrlKind}
-            contentLabel={file.label?.trim() || resolvedPath}
-            contentParams={file.params}
-            directoryQuery={directoryQuery}
-            fileBasePath={sessionWorkingDir}
-            onFileOpen={onFileOpen}
-            onHtmlContentHeightChange={onHtmlContentHeightChange}
-            previewBlock={previewBlock}
-            previewKind={previewKind}
-            previewViewer={previewViewer}
-            previewQuery={previewQuery}
-            previewText={previewText}
-            targetColumn={file.column}
-            targetLine={file.line}
-          />
+          previewBody
         )}
       </div>
     </div>

package/src/features/chat/features/workspace/components/chat-session-workspace-panel-content.tsx

@@ -189,9 +189,11 @@ function WorkspaceChildSessions({
 
 function WorkspaceProjectFiles({
   projectRoot,
+  sessionKey,
   workingDir,
 }: {
   projectRoot: string | null;
+  sessionKey: string | null;
   workingDir: string | null;
 }) {
   const presenter = usePresenter();
@@ -212,8 +214,10 @@ function WorkspaceProjectFiles({
 
   return (
     <ChatSessionWorkspaceDirectoryBrowser
+      key={rootPath}
       browseQuery={browseQuery}
       onFileOpen={presenter.chatThreadManager.openFilePreview}
+      sessionKey={sessionKey}
       renderStatus={({ text, tone = "muted" }) => (
         <div
           className={cn(
@@ -279,7 +283,7 @@ function WorkspaceSideChatDraftHeader() {
   );
 }
 
-export function ChatSessionWorkspacePanelContent({
+function WorkspaceSelectedContent({
   activeSelection,
   childSessionTabs,
   filePreviewRefreshVersion,
@@ -300,15 +304,6 @@ export function ChatSessionWorkspacePanelContent({
     );
   }
 
-  if (activeSelection.kind === "project-files") {
-    return (
-      <WorkspaceProjectFiles
-        projectRoot={sessionProjectRoot}
-        workingDir={sessionWorkingDir}
-      />
-    );
-  }
-
   if (activeSelection.kind === "child-sessions") {
     return <WorkspaceChildSessions childSessionTabs={childSessionTabs} />;
   }
@@ -357,9 +352,54 @@ export function ChatSessionWorkspacePanelContent({
         sessionProjectRoot={sessionProjectRoot}
         sessionWorkingDir={sessionWorkingDir}
         onFileOpen={presenter.chatThreadManager.openFilePreview}
+        onTextExcerptAdd={(excerpt) => {
+          presenter.chatComposerIntentManager.requestExcerptReference({
+            targetSessionKey: sessionKey,
+            ...excerpt,
+          });
+        }}
       />
     );
   }
 
   return <SessionCronJobContent jobs={sessionCronJobs} />;
 }
+
+export function ChatSessionWorkspacePanelContent(
+  {
+    activeSelection,
+    sessionKey,
+    sessionProjectRoot,
+    sessionWorkingDir,
+    ...selectedContentProps
+  }: ChatSessionWorkspacePanelContentProps,
+) {
+  const projectFilesActive = activeSelection.kind === "project-files";
+
+  return (
+    <>
+      <div
+        className={cn(
+          "min-h-0 flex-1 flex-col",
+          projectFilesActive ? "flex" : "hidden",
+        )}
+        aria-hidden={!projectFilesActive}
+      >
+        <WorkspaceProjectFiles
+          projectRoot={sessionProjectRoot}
+          sessionKey={sessionKey}
+          workingDir={sessionWorkingDir}
+        />
+      </div>
+      {projectFilesActive ? null : (
+        <WorkspaceSelectedContent
+          {...selectedContentProps}
+          activeSelection={activeSelection}
+          sessionKey={sessionKey}
+          sessionProjectRoot={sessionProjectRoot}
+          sessionWorkingDir={sessionWorkingDir}
+        />
+      )}
+    </>
+  );
+}

package/src/features/chat/features/workspace/components/chat-session-workspace-panel-nav.tsx

@@ -22,6 +22,10 @@ import {
   type CompactTabStripAction,
   type CompactTabStripTab,
 } from "@/shared/components/ui/tab-strip/compact-tab-strip";
+import type {
+  ContextMenuGroup,
+  ContextMenuItem,
+} from "@/shared/components/ui/context-menu/context-menu";
 import { t } from "@/shared/lib/i18n";
 
 function WorkspaceTabIcon({
@@ -62,6 +66,49 @@ function WorkspaceTabIcon({
   return <MessageSquareText className="h-3.5 w-3.5 shrink-0 text-gray-400" />;
 }
 
+function buildWorkspaceFileMenuGroups(
+  tab: WorkspaceTabViewModel,
+): ContextMenuGroup[] | undefined {
+  if (tab.kind !== "file") {
+    return undefined;
+  }
+
+  const fileActions: ContextMenuItem[] = [
+    ...(tab.onAddToChat
+      ? [{
+          key: "add-to-chat",
+          icon: <MessageSquarePlus className="h-4 w-4" />,
+          label: t("chatWorkspaceAddToChat"),
+          restoreFocus: false,
+          onSelect: tab.onAddToChat,
+        }]
+      : []),
+    ...(tab.alternateViewerAction
+      ? [{
+          key: `viewer:${tab.alternateViewerAction.viewer}`,
+          icon: tab.alternateViewerAction.viewer === "rendered"
+            ? <Eye className="h-4 w-4" />
+            : <Code2 className="h-4 w-4" />,
+          label: tab.alternateViewerAction.label,
+          onSelect: tab.alternateViewerAction.onSelect,
+        }]
+      : []),
+  ];
+  const tabActions: ContextMenuItem[] = tab.onClose
+    ? [{
+        key: "close",
+        icon: <X className="h-4 w-4" />,
+        label: t("chatWorkspaceCloseFile"),
+        onSelect: tab.onClose,
+      }]
+    : [];
+
+  return [
+    { key: "file", items: fileActions },
+    { key: "tab", items: tabActions },
+  ];
+}
+
 function buildCompactWorkspaceTabs(
   tabs: readonly WorkspaceTabViewModel[],
 ): CompactTabStripTab[] {
@@ -93,28 +140,7 @@ function buildCompactWorkspaceTabs(
     onSelect: tab.onSelect,
     onClose: tab.onClose,
     menuLabel: t("chatWorkspaceFileMoreActions"),
-    menuActions: tab.kind === "file"
-      ? [
-          ...(tab.alternateViewerAction
-            ? [{
-                key: `viewer:${tab.alternateViewerAction.viewer}`,
-                icon: tab.alternateViewerAction.viewer === "rendered"
-                  ? <Eye className="h-3.5 w-3.5" />
-                  : <Code2 className="h-3.5 w-3.5" />,
-                label: tab.alternateViewerAction.label,
-                onClick: tab.alternateViewerAction.onSelect,
-              }]
-            : []),
-          ...(tab.onClose
-            ? [{
-                key: "close",
-                icon: <X className="h-3.5 w-3.5" />,
-                label: t("chatWorkspaceCloseFile"),
-                onClick: tab.onClose,
-              }]
-            : []),
-        ]
-      : undefined,
+    menuGroups: buildWorkspaceFileMenuGroups(tab),
   }));
 }
 

package/src/features/chat/features/workspace/components/chat-session-workspace-panel.tsx

@@ -95,12 +95,21 @@ export function ChatSessionWorkspacePanel({
   const workspaceTabs = useMemo<WorkspaceTabViewModel[]>(
     () =>
       buildWorkspaceTabsViewModel({
+        hasSession: Boolean(sessionKey),
         resolvedChildTabs,
         activeSideChatDraft,
         closedWorkspaceTabEntries,
         workspaceFileTabs,
         activeSelection,
         optimisticReadAtBySessionKey,
+        sessionProjectRoot: sessionProjectRoot ?? sessionWorkingDir,
+        onAddFileToChat: ({ label, tokenKey }) => {
+          presenter.chatComposerIntentManager.requestFileReference({
+            targetSessionKey: sessionKey,
+            tokenKey,
+            label,
+          });
+        },
         onSelectSession: presenter.chatThreadManager.selectChildSessionDetail,
         onSelectFile: presenter.chatThreadManager.selectWorkspaceFile,
         onOpenFileViewer: presenter.chatThreadManager.openWorkspaceFileViewer,
@@ -114,8 +123,7 @@ export function ChatSessionWorkspacePanel({
             presenter.chatThreadManager.openChildSessions(sessionKey);
         },
         onSelectProjectFiles: () => {
-          if (sessionKey)
-            presenter.chatThreadManager.openProjectFiles(sessionKey);
+          presenter.chatThreadManager.openProjectFiles(sessionKey);
         },
         onSelectCronJobs: () => {
           if (sessionKey)
@@ -128,8 +136,11 @@ export function ChatSessionWorkspacePanel({
       closedWorkspaceTabEntries,
       optimisticReadAtBySessionKey,
       presenter.chatThreadManager,
+      presenter.chatComposerIntentManager,
       resolvedChildTabs,
       sessionKey,
+      sessionProjectRoot,
+      sessionWorkingDir,
       workspaceFileTabs,
     ],
   );