@nextclaw/ui 0.15.0 → 0.15.2

package/src/features/chat/features/session/utils/chat-sidebar-session-groups.utils.ts

@@ -13,6 +13,7 @@ export type ChatSidebarProjectGroup = {
   projectName: string;
   items: NcpSessionListItemView[];
   latestUpdatedAt: number;
+  isPinned: boolean;
 };
 
 export function getSessionActivityAtTimestamp(
@@ -33,8 +34,19 @@ export function sortSessionItemsByActivityAtDesc(
   );
 }
 
+function sortSessionItemsByPinnedActivityAtDesc(
+  items: NcpSessionListItemView[],
+  pinnedSessionKeys: ReadonlySet<string>,
+): NcpSessionListItemView[] {
+  return [...items].sort((left, right) => {
+    const pinnedDifference = Number(pinnedSessionKeys.has(right.session.key)) - Number(pinnedSessionKeys.has(left.session.key));
+    return pinnedDifference || getSessionActivityAtTimestamp(right) - getSessionActivityAtTimestamp(left);
+  });
+}
+
 export function groupSessionsByDate(
   items: NcpSessionListItemView[],
+  pinnedSessionKeys: ReadonlySet<string> = new Set(),
 ): ChatSidebarDateGroup[] {
   const now = new Date();
   const todayStart = new Date(
@@ -50,7 +62,13 @@ export function groupSessionsByDate(
   const previous7: NcpSessionListItemView[] = [];
   const older: NcpSessionListItemView[] = [];
 
-  for (const item of items) {
+  const unpinnedItems = items.filter((item) => !pinnedSessionKeys.has(item.session.key));
+  const pinnedItems = sortSessionItemsByPinnedActivityAtDesc(
+    items.filter((item) => pinnedSessionKeys.has(item.session.key)),
+    pinnedSessionKeys,
+  );
+
+  for (const item of unpinnedItems) {
     const ts = getSessionActivityAtTimestamp(item);
     if (ts >= todayStart) {
       today.push(item);
@@ -64,6 +82,7 @@ export function groupSessionsByDate(
   }
 
   const groups: ChatSidebarDateGroup[] = [];
+  if (pinnedItems.length > 0) groups.push({ label: t("chatSidebarPinned"), items: pinnedItems });
   if (today.length > 0) groups.push({ label: t("chatSidebarToday"), items: today });
   if (yesterday.length > 0)
     groups.push({ label: t("chatSidebarYesterday"), items: yesterday });
@@ -75,6 +94,8 @@ export function groupSessionsByDate(
 
 export function groupSessionsByProject(
   items: NcpSessionListItemView[],
+  pinnedSessionKeys: ReadonlySet<string> = new Set(),
+  pinnedProjectRoots: ReadonlySet<string> = new Set(),
 ): ChatSidebarProjectGroup[] {
   const grouped = new Map<string, ChatSidebarProjectGroup>();
 
@@ -101,15 +122,16 @@ export function groupSessionsByProject(
         projectRoot,
       items: [item],
       latestUpdatedAt: updatedAt,
+      isPinned: pinnedProjectRoots.has(projectRoot),
     });
   }
 
   return [...grouped.values()]
     .map((group) => ({
       ...group,
-      items: sortSessionItemsByActivityAtDesc(group.items),
+      items: sortSessionItemsByPinnedActivityAtDesc(group.items, pinnedSessionKeys),
     }))
-    .sort((left, right) => right.latestUpdatedAt - left.latestUpdatedAt);
+    .sort((left, right) => Number(right.isPinned) - Number(left.isPinned) || right.latestUpdatedAt - left.latestUpdatedAt);
 }
 
 export function groupChildSessionsByParentKey(

package/src/features/chat/features/session/utils/ncp-session-adapter.utils.ts

@@ -18,6 +18,7 @@ const SESSION_ACTIVITY_PREVIEW_STATE_SET = new Set<SessionActivityPreviewView['s
   'running',
   'completed',
   'failed',
+  'cancelled',
   'idle'
 ]);
 

package/src/features/chat/features/welcome/components/chat-welcome-capability-grid.tsx

@@ -1,4 +1,5 @@
 import { AlarmClock, BrainCircuit, MessageCircle } from 'lucide-react';
+import { cn } from '@/shared/lib/utils';
 import { t } from '@/shared/lib/i18n';
 
 const WELCOME_CAPABILITIES = [
@@ -34,13 +35,17 @@ export function ChatWelcomeCapabilityGrid({
         return (
           <button
             key={capability.titleKey}
+            type="button"
             onClick={() => onSelectPrompt(t(capability.promptKey))}
-            className="min-w-0 rounded-2xl border border-border bg-card p-3 text-left text-card-foreground shadow-card transition-[border-color,box-shadow,transform] hover:border-primary/30 hover:shadow-card-hover sm:p-4"
+            className={cn(
+              'min-w-0 rounded-xl border border-border/75 bg-card p-3 text-left text-card-foreground shadow-none transition-colors sm:p-3.5',
+              'hover:bg-muted/40',
+            )}
           >
-            <div className="mb-3 flex h-9 w-9 items-center justify-center rounded-xl bg-accent">
-              <Icon className="h-4.5 w-4.5 text-primary" />
+            <div className="mb-2.5 flex h-8 w-8 items-center justify-center rounded-lg bg-muted text-muted-foreground">
+              <Icon className="h-4 w-4" />
             </div>
-            <div className="mb-1 text-sm font-semibold text-foreground">
+            <div className="mb-1 text-sm font-medium text-foreground">
               {t(capability.titleKey)}
             </div>
             <div className="text-[11px] leading-relaxed text-muted-foreground">

package/src/features/chat/features/welcome/components/chat-welcome.tsx

@@ -1,6 +1,5 @@
 import type { ReactNode } from 'react';
 import { useState } from 'react';
-import { Bot } from 'lucide-react';
 import { ChatSessionProjectDialog } from '@/features/chat/features/session/components/session-header/chat-session-project-dialog';
 import { ChatWelcomeAgentPicker } from '@/features/chat/features/welcome/components/chat-welcome-agent-picker';
 import { ChatWelcomeCapabilityGrid } from '@/features/chat/features/welcome/components/chat-welcome-capability-grid';
@@ -64,10 +63,6 @@ export function ChatWelcome({
   return (
     <div className="flex min-h-full items-center justify-center px-4 py-8 sm:p-8">
       <div className="min-w-0 w-full max-w-[min(760px,100%)]">
-        <div className="mx-auto mb-5 flex h-14 w-14 items-center justify-center rounded-2xl border border-border bg-accent shadow-card">
-          <Bot className="h-8 w-8 text-primary" />
-        </div>
-
         <div className="text-center">
           <h2 className="text-2xl font-semibold text-foreground sm:text-3xl">
             {t('chatWelcomeTitle')}

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

@@ -14,6 +14,7 @@ const serverPathBrowseMock = vi.fn();
 type RenderWorkspaceFilePreviewOptions = {
   file?: Partial<ChatWorkspaceFileTab>;
   onFileOpen?: (action: ChatFileOpenActionViewModel) => void;
+  refreshVersion?: number;
   sessionProjectRoot?: string | null;
   sessionWorkingDir?: string | null;
 };
@@ -82,6 +83,7 @@ function mockTextRead(overrides: TextReadDataOverrides = {}) {
 function renderWorkspaceFilePreview({
   file,
   onFileOpen = vi.fn(),
+  refreshVersion,
   sessionProjectRoot = "/tmp",
   sessionWorkingDir = "/tmp",
 }: RenderWorkspaceFilePreviewOptions = {}) {
@@ -90,6 +92,7 @@ function renderWorkspaceFilePreview({
       file={buildWorkspaceFile(file ?? {})}
       sessionProjectRoot={sessionProjectRoot}
       sessionWorkingDir={sessionWorkingDir}
+      refreshVersion={refreshVersion}
       onFileOpen={onFileOpen}
     />,
   );
@@ -97,55 +100,68 @@ function renderWorkspaceFilePreview({
 }
 
 function mockWorkspaceBreadcrumbBrowseTree() {
-  serverPathBrowseMock.mockImplementation(
-    ({ path }: { path?: string | null }) => ({
-      isLoading: false,
-      error: null,
-      data:
-        path === "/tmp/workspace/src/components"
-          ? {
-              currentPath: "/tmp/workspace/src/components",
-              parentPath: "/tmp/workspace/src",
-              homePath: "/Users/demo",
-              breadcrumbs: [
-                { label: "workspace", path: "/tmp/workspace" },
-                { label: "src", path: "/tmp/workspace/src" },
-                { label: "components", path: "/tmp/workspace/src/components" },
-              ],
-              entries: [
-                {
-                  name: "button.tsx",
-                  path: "/tmp/workspace/src/components/button.tsx",
-                  kind: "file",
-                  hidden: false,
-                },
-              ],
-            }
-          : {
-              currentPath: "/tmp/workspace/src",
-              parentPath: "/tmp/workspace",
-              homePath: "/Users/demo",
-              breadcrumbs: [
-                { label: "workspace", path: "/tmp/workspace" },
-                { label: "src", path: "/tmp/workspace/src" },
-              ],
-              entries: [
-                {
-                  name: "components",
-                  path: "/tmp/workspace/src/components",
-                  kind: "directory",
-                  hidden: false,
-                },
-                {
-                  name: "index.ts",
-                  path: "/tmp/workspace/src/index.ts",
-                  kind: "file",
-                  hidden: false,
-                },
-              ],
+  serverPathBrowseMock.mockImplementation(({ path }: { path?: string | null }) => {
+    if (path === "/tmp/workspace/src/components") {
+      return {
+        isLoading: false,
+        error: null,
+        data: {
+          currentPath: "/tmp/workspace/src/components",
+          parentPath: "/tmp/workspace/src",
+          homePath: "/Users/demo",
+          breadcrumbs: [
+            { label: "workspace", path: "/tmp/workspace" },
+            { label: "src", path: "/tmp/workspace/src" },
+            { label: "components", path: "/tmp/workspace/src/components" },
+          ],
+          entries: [
+            {
+              name: "button.tsx",
+              path: "/tmp/workspace/src/components/button.tsx",
+              kind: "file",
+              hidden: false,
             },
-    }),
-  );
+          ],
+        },
+      };
+    }
+
+    if (path === "/tmp/workspace/src") {
+      return {
+        isLoading: false,
+        error: null,
+        data: {
+          currentPath: "/tmp/workspace/src",
+          parentPath: "/tmp/workspace",
+          homePath: "/Users/demo",
+          breadcrumbs: [
+            { label: "workspace", path: "/tmp/workspace" },
+            { label: "src", path: "/tmp/workspace/src" },
+          ],
+          entries: [
+            {
+              name: "components",
+              path: "/tmp/workspace/src/components",
+              kind: "directory",
+              hidden: false,
+            },
+            {
+              name: "index.ts",
+              path: "/tmp/workspace/src/index.ts",
+              kind: "file",
+              hidden: false,
+            },
+          ],
+        },
+      };
+    }
+
+    return {
+      isLoading: false,
+      error: new Error("server path must point to a directory"),
+      data: null,
+    };
+  });
 }
 
 beforeEach(() => {
@@ -153,14 +169,8 @@ beforeEach(() => {
   serverPathBrowseMock.mockReset();
   serverPathBrowseMock.mockReturnValue({
     isLoading: false,
-    error: null,
-    data: {
-      currentPath: "/tmp",
-      parentPath: null,
-      homePath: "/Users/demo",
-      breadcrumbs: [],
-      entries: [],
-    },
+    error: new Error("server path must point to a directory"),
+    data: null,
   });
 });
 
@@ -189,6 +199,23 @@ describe("ChatSessionWorkspaceFilePreview rendering", () => {
     ).toBe("js");
   });
 
+  it("keeps HTML files in the source preview when preview viewer is automatic", () => {
+    mockTextRead({
+      resolvedPath: "/tmp/example.html",
+      text: "<!doctype html><h1>Hello</h1>",
+    });
+    renderWorkspaceFilePreview({
+      file: {
+        label: "example.html",
+        path: "/tmp/example.html",
+        viewMode: "preview",
+      },
+    });
+
+    expect(screen.queryByTestId("workspace-html-preview")).toBeNull();
+    expect(screen.getByTestId("file-code-surface")).toBeTruthy();
+  });
+
   it("renders HTML files through an unrestricted server content iframe when rendered preview is requested", () => {
     mockTextRead({
       resolvedPath: "/tmp/example.html",
@@ -212,6 +239,43 @@ describe("ChatSessionWorkspaceFilePreview rendering", () => {
     expect(screen.queryByTestId("file-code-surface")).toBeNull();
   });
 
+  it("adds the refresh version to rendered HTML iframe URLs", () => {
+    mockTextRead({
+      resolvedPath: "/tmp/example.html",
+      text: "<!doctype html><h1>Hello</h1>",
+    });
+    renderWorkspaceFilePreview({
+      file: {
+        label: "example.html",
+        path: "/tmp/example.html",
+        previewViewer: "rendered",
+        viewMode: "preview",
+      },
+      refreshVersion: 3,
+    });
+
+    expect(screen.getByTestId("workspace-html-preview").getAttribute("src")).toContain(
+      "refresh=3",
+    );
+  });
+
+  it("keeps HTML files in the source preview when source is requested", () => {
+    mockTextRead({
+      resolvedPath: "/tmp/example.html",
+      text: "<!doctype html><h1>Hello</h1>",
+    });
+    renderWorkspaceFilePreview({
+      file: {
+        path: "/tmp/example.html",
+        previewViewer: "source",
+        viewMode: "preview",
+      },
+    });
+
+    expect(screen.queryByTestId("workspace-html-preview")).toBeNull();
+    expect(screen.getByTestId("file-code-surface")).toBeTruthy();
+  });
+
   it("falls back to the source preview when rendered is requested for a non-HTML file", () => {
     mockTextRead({ resolvedPath: "/tmp/example.txt", text: "plain text" });
     renderWorkspaceFilePreview({
@@ -257,6 +321,79 @@ describe("ChatSessionWorkspaceFilePreview rendering", () => {
     expect(screen.getByText("tmp")).toBeTruthy();
     expect(screen.getByText("example.ts")).toBeTruthy();
   });
+
+  it("renders directory entries and opens child directories or files", () => {
+    serverPathReadMock.mockReturnValue({
+      isLoading: false,
+      error: new Error("server path must point to a file"),
+      data: null,
+    });
+    serverPathBrowseMock.mockReturnValue({
+      isLoading: false,
+      error: null,
+      data: {
+        currentPath: "/tmp/workspace/src",
+        parentPath: "/tmp/workspace",
+        homePath: "/Users/demo",
+        breadcrumbs: [
+          { label: "workspace", path: "/tmp/workspace" },
+          { label: "src", path: "/tmp/workspace/src" },
+        ],
+        entries: [
+          {
+            name: "components",
+            path: "/tmp/workspace/src/components",
+            kind: "directory",
+            hidden: false,
+          },
+          {
+            name: "index.ts",
+            path: "/tmp/workspace/src/index.ts",
+            kind: "file",
+            hidden: false,
+          },
+        ],
+      },
+    });
+    const onFileOpen = vi.fn();
+
+    renderWorkspaceFilePreview({
+      file: {
+        path: "src",
+        label: "src",
+        viewMode: "preview",
+      },
+      onFileOpen,
+      sessionProjectRoot: "/tmp/workspace",
+      sessionWorkingDir: "/tmp/workspace",
+    });
+
+    expect(serverPathBrowseMock).toHaveBeenCalledWith({
+      path: "src",
+      basePath: "/tmp/workspace",
+      includeFiles: true,
+      enabled: true,
+    });
+    expect(screen.getByTestId("workspace-directory-browser")).toBeTruthy();
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Open directory: components" }),
+    );
+    expect(onFileOpen).toHaveBeenCalledWith({
+      path: "/tmp/workspace/src/components",
+      label: "components",
+      viewMode: "preview",
+    });
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Open file: index.ts" }),
+    );
+    expect(onFileOpen).toHaveBeenCalledWith({
+      path: "/tmp/workspace/src/index.ts",
+      label: "index.ts",
+      viewMode: "preview",
+    });
+  });
 });
 
 describe("ChatSessionWorkspaceFilePreview breadcrumbs", () => {

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

@@ -40,6 +40,7 @@ it("shows compact child session metadata without repeating the tab title", () =>
         kind: "child-session",
         tab: createChildTab(),
       }}
+      filePreviewRefreshVersion={0}
       sessionCronJobs={[]}
       sessionProjectRoot={null}
       sessionWorkingDir={null}

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

@@ -0,0 +1,144 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { ChatSessionWorkspacePanel } from "@/features/chat/features/workspace/components/chat-session-workspace-panel";
+import type { ChatWorkspaceFileTab } from "@/features/chat/stores/chat-thread.store";
+import type * as ReactQuery from "@tanstack/react-query";
+
+const mocks = vi.hoisted(() => ({
+  syncVisibleWorkspaceSelection: vi.fn(),
+  selectChildSessionDetail: vi.fn(),
+  selectWorkspaceFile: vi.fn(),
+  closeWorkspaceFile: vi.fn(),
+  openSessionCronPanel: vi.fn(),
+  goBackWorkspacePanel: vi.fn(),
+  goForwardWorkspacePanel: vi.fn(),
+  closeWorkspacePanel: vi.fn(),
+  invalidateQueries: vi.fn(),
+}));
+
+vi.mock("@tanstack/react-query", async (importOriginal) => ({
+  ...(await importOriginal<typeof ReactQuery>()),
+  useQueryClient: () => ({
+    invalidateQueries: mocks.invalidateQueries,
+  }),
+}));
+
+vi.mock("@/features/chat/components/providers/chat-presenter.provider", () => ({
+  usePresenter: () => ({
+    chatThreadManager: mocks,
+  }),
+}));
+
+vi.mock("@/features/chat/features/ncp/hooks/use-ncp-child-session-tabs-view", () => ({
+  useNcpChildSessionTabsView: () => [],
+}));
+
+vi.mock("@/features/chat/features/workspace/components/chat-session-workspace-panel-content", () => ({
+  ChatSessionWorkspacePanelContent: ({
+    activeSelection,
+    filePreviewRefreshVersion,
+  }: {
+    activeSelection: { kind: string };
+    filePreviewRefreshVersion: number;
+  }) => (
+    <div
+      data-file-refresh-version={filePreviewRefreshVersion}
+      data-testid="workspace-panel-content"
+    >
+      {activeSelection.kind}
+    </div>
+  ),
+}));
+
+function createWorkspaceFileTab(): ChatWorkspaceFileTab {
+  return {
+    key: "file-tab",
+    parentSessionKey: "session-1",
+    path: "README.md",
+    viewMode: "preview",
+  };
+}
+
+function renderPanel(displayMode: "docked" | "overlay" = "docked") {
+  const fileTab = createWorkspaceFileTab();
+
+  return render(
+    <ChatSessionWorkspacePanel
+      sessionKey="session-1"
+      childSessionTabs={[]}
+      activeChildSessionKey={null}
+      activeSideChatDraft={null}
+      workspaceFileTabs={[fileTab]}
+      activeWorkspaceFileKey={fileTab.key}
+      workspaceNavigationHistory={[{ kind: "file", key: fileTab.key }]}
+      workspaceNavigationHistoryIndex={0}
+      activePanelKind="file"
+      sessionCronJobs={[]}
+      sessionProjectRoot={null}
+      sessionWorkingDir={null}
+      displayMode={displayMode}
+    />,
+  );
+}
+
+describe("ChatSessionWorkspacePanel", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("refreshes the active workspace file from the top action bar", async () => {
+    const user = userEvent.setup();
+    renderPanel();
+
+    await user.click(screen.getByRole("button", { name: "Refresh preview" }));
+
+    expect(mocks.invalidateQueries).toHaveBeenCalledWith({
+      queryKey: ["server-path-read", "README.md", null],
+    });
+    expect(mocks.invalidateQueries).toHaveBeenCalledWith({
+      queryKey: ["server-path-browse", "README.md", "", true],
+    });
+    expect(
+      screen
+        .getByTestId("workspace-panel-content")
+        .getAttribute("data-file-refresh-version"),
+    ).toBe("1");
+  });
+
+  it("maximizes and restores the docked workspace panel within its container", async () => {
+    const user = userEvent.setup();
+    renderPanel();
+
+    const panel = screen.getByTestId("chat-session-workspace-panel");
+    expect(panel.className).not.toContain("absolute");
+
+    await user.click(
+      screen.getByRole("button", { name: "Maximize workspace panel" }),
+    );
+
+    expect(panel.className).toContain("absolute");
+    expect(panel.className).not.toContain("fixed");
+    expect(
+      screen.queryByTestId("resizable-right-panel-handle"),
+    ).toBeNull();
+
+    await user.click(
+      screen.getByRole("button", { name: "Restore workspace panel" }),
+    );
+
+    expect(panel.className).not.toContain("absolute");
+    expect(screen.getByTestId("resizable-right-panel-handle")).toBeTruthy();
+  });
+
+  it("does not show a redundant maximize action in viewport overlay mode", () => {
+    renderPanel("overlay");
+
+    expect(
+      screen.queryByRole("button", { name: "Maximize workspace panel" }),
+    ).toBeNull();
+    expect(screen.getByTestId("chat-session-workspace-panel").className).toContain(
+      "fixed",
+    );
+  });
+});

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

@@ -0,0 +1,99 @@
+import type { ReactNode } from "react";
+import type { ChatFileOpenActionViewModel } from "@nextclaw/agent-chat-ui";
+import { ChevronRight, FileCode2, Folder } from "lucide-react";
+import type { useServerPathBrowse } from "@/shared/hooks/use-server-path-browse";
+import type { ServerPathEntryView } from "@/shared/lib/api";
+import { t } from "@/shared/lib/i18n";
+import { cn } from "@/shared/lib/utils";
+
+type ChatSessionWorkspaceDirectoryBrowserProps = {
+  browseQuery: ReturnType<typeof useServerPathBrowse>;
+  onFileOpen: (action: ChatFileOpenActionViewModel) => void;
+  renderStatus: (params: {
+    text: string;
+    tone?: "muted" | "error";
+  }) => ReactNode;
+};
+
+function WorkspaceDirectoryEntryIcon({
+  kind,
+}: {
+  kind: ServerPathEntryView["kind"];
+}) {
+  return kind === "directory" ? (
+    <Folder className="h-4 w-4 shrink-0 text-emerald-600" />
+  ) : (
+    <FileCode2 className="h-4 w-4 shrink-0 text-sky-600" />
+  );
+}
+
+function buildDirectoryEntryLabel(entry: ServerPathEntryView): string {
+  const actionLabel =
+    entry.kind === "directory"
+      ? t("chatWorkspaceOpenDirectory")
+      : t("chatWorkspaceOpenFile");
+  return `${actionLabel}: ${entry.name}`;
+}
+
+export function ChatSessionWorkspaceDirectoryBrowser({
+  browseQuery,
+  onFileOpen,
+  renderStatus,
+}: ChatSessionWorkspaceDirectoryBrowserProps) {
+  const entries = browseQuery.data?.entries ?? [];
+  const errorMessage = browseQuery.error
+    ? browseQuery.error instanceof Error
+      ? browseQuery.error.message
+      : String(browseQuery.error)
+    : null;
+  const openEntry = (entry: ServerPathEntryView) => {
+    onFileOpen({
+      path: entry.path,
+      label: entry.name,
+      viewMode: "preview",
+    });
+  };
+
+  if (browseQuery.isLoading && !browseQuery.data) {
+    return renderStatus({ text: t("chatWorkspaceLoadingDirectory") });
+  }
+
+  if (errorMessage && !browseQuery.data) {
+    return renderStatus({
+      tone: "error",
+      text: `${t("chatWorkspaceDirectoryLoadFailed")}: ${errorMessage}`,
+    });
+  }
+
+  if (entries.length === 0) {
+    return renderStatus({ text: t("chatWorkspaceDirectoryEmpty") });
+  }
+
+  return (
+    <div
+      data-testid="workspace-directory-browser"
+      className="h-full overflow-auto bg-white px-2 py-2 custom-scrollbar"
+    >
+      <div className="space-y-0.5">
+        {entries.map((entry) => (
+          <button
+            key={entry.path}
+            type="button"
+            aria-label={buildDirectoryEntryLabel(entry)}
+            className={cn(
+              "flex h-8 w-full min-w-0 items-center gap-2 rounded-sm px-2 text-left text-sm text-gray-700 transition-colors hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
+              entry.hidden ? "opacity-65" : null,
+            )}
+            onClick={() => openEntry(entry)}
+          >
+            <WorkspaceDirectoryEntryIcon kind={entry.kind} />
+            <span className="min-w-0 flex-1 truncate">{entry.name}</span>
+            {entry.kind === "directory" ? (
+              <ChevronRight className="h-3.5 w-3.5 shrink-0 text-gray-300" />
+            ) : null}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}