@nextclaw/ui 0.23.0 → 0.24.0-beta.1

package/src/features/apps/hooks/use-app-packages.ts

@@ -1,37 +1,51 @@
-import { useEffect } from 'react';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import type { AppPackageOperationStatus, AppPackageOperationView } from '@nextclaw/client-sdk';
-import { nextclawClient } from '@/shared/lib/api';
-import type { AppPackageOperationSettlementManager } from '@/features/apps/managers/app-package-operation-settlement.manager';
-import { APP_DATA_QUERY_KEY } from '@/features/app-data';
+import { useEffect } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type {
+  AppPackageOperationStatus,
+  AppPackageOperationView,
+} from "@nextclaw/client-sdk";
+import { nextclawClient } from "@/shared/lib/api";
+import type { AppPackageOperationSettlementManager } from "@/features/apps/managers/app-package-operation-settlement.manager";
+import { APP_DATA_QUERY_KEY } from "@/features/app-data";
 
-const APP_PACKAGES_QUERY_KEY = ['app-packages'] as const;
-const PANEL_APPS_QUERY_KEY = ['panel-apps'] as const;
-const SERVICE_APPS_QUERY_KEY = ['service-apps'] as const;
-const SERVICE_ACTIONS_QUERY_KEY = ['service-actions'] as const;
-const APP_PACKAGE_OPERATIONS_QUERY_KEY = ['app-package-operations'] as const;
+const APP_PACKAGES_QUERY_KEY = ["app-packages"] as const;
+const PANEL_APPS_QUERY_KEY = ["panel-apps"] as const;
+const SERVICE_APPS_QUERY_KEY = ["service-apps"] as const;
+const SERVICE_ACTIONS_QUERY_KEY = ["service-actions"] as const;
+const APP_PACKAGE_OPERATIONS_QUERY_KEY = ["app-package-operations"] as const;
 
 const ACTIVE_OPERATION_STATUSES = new Set<AppPackageOperationStatus>([
-  'queued',
-  'resolving',
-  'downloading',
-  'verifying',
-  'installing',
-  'finalizing',
+  "queued",
+  "resolving",
+  "downloading",
+  "verifying",
+  "installing",
+  "finalizing",
 ]);
 
 export type AppPackageMutationInput =
-  | { action: 'enable'; appId: string }
-  | { action: 'disable'; appId: string }
-  | { action: 'install'; source: string; registryUrl?: string }
-  | { action: 'update'; appId: string }
-  | { action: 'rollback'; appId: string; version: string }
-  | { action: 'uninstall'; appId: string; purgeData?: boolean };
+  | { action: "enable"; appId: string }
+  | { action: "disable"; appId: string }
+  | { action: "install"; source: string; registryUrl?: string }
+  | { action: "update"; appId: string }
+  | { action: "rollback"; appId: string; version: string }
+  | { action: "uninstall"; appId: string; purgeData?: boolean };
+
+export type AppDocumentAccessMutationInput =
+  | {
+      action: "grant";
+      appId: string;
+      scopeId: string;
+      directoryPath: string;
+      mode: "read" | "read-write";
+    }
+  | { action: "revoke"; appId: string; scopeId: string };
 
 export function useAppPackages() {
   return useQuery({
     queryKey: APP_PACKAGES_QUERY_KEY,
-    queryFn: () => nextclawClient.appPackages.list({ includeStorageUsage: false }),
+    queryFn: () =>
+      nextclawClient.appPackages.list({ includeStorageUsage: false }),
     staleTime: 0,
   });
 }
@@ -42,13 +56,17 @@ export function useAppPackageOperations() {
     queryFn: () => nextclawClient.appPackages.listOperations(),
     refetchInterval: (query) => {
       const entries = query.state.data?.entries ?? [];
-      return entries.some((entry) => isAppPackageOperationActive(entry.status)) ? 500 : false;
+      return entries.some((entry) => isAppPackageOperationActive(entry.status))
+        ? 500
+        : false;
     },
     staleTime: 0,
   });
 }
 
-export function isAppPackageOperationActive(status: AppPackageOperationStatus): boolean {
+export function isAppPackageOperationActive(
+  status: AppPackageOperationStatus,
+): boolean {
   return ACTIVE_OPERATION_STATUSES.has(status);
 }
 
@@ -77,7 +95,14 @@ export function useAppPackageOperationSettlement({
       refetchPanels,
       refetchAppData,
     });
-  }, [isLoaded, operations, refetchPackages, refetchPanels, refetchAppData, settlementManager]);
+  }, [
+    isLoaded,
+    operations,
+    refetchPackages,
+    refetchPanels,
+    refetchAppData,
+    settlementManager,
+  ]);
 }
 
 export function useAppPackageMutation() {
@@ -85,20 +110,23 @@ export function useAppPackageMutation() {
   return useMutation({
     mutationFn: async (input: AppPackageMutationInput) => {
       switch (input.action) {
-        case 'enable':
+        case "enable":
           return await nextclawClient.appPackages.enable(input.appId);
-        case 'disable':
+        case "disable":
           return await nextclawClient.appPackages.disable(input.appId);
-        case 'install':
+        case "install":
           return await nextclawClient.appPackages.startInstall({
             source: input.source,
             registryUrl: input.registryUrl,
           });
-        case 'update':
+        case "update":
           return await nextclawClient.appPackages.startUpdate(input.appId);
-        case 'rollback':
-          return await nextclawClient.appPackages.startRollback(input.appId, input.version);
-        case 'uninstall':
+        case "rollback":
+          return await nextclawClient.appPackages.startRollback(
+            input.appId,
+            input.version,
+          );
+        case "uninstall":
           return await nextclawClient.appPackages.startUninstall(
             input.appId,
             input.purgeData ?? false,
@@ -111,9 +139,37 @@ export function useAppPackageMutation() {
         queryClient.invalidateQueries({ queryKey: PANEL_APPS_QUERY_KEY }),
         queryClient.invalidateQueries({ queryKey: SERVICE_APPS_QUERY_KEY }),
         queryClient.invalidateQueries({ queryKey: SERVICE_ACTIONS_QUERY_KEY }),
-        queryClient.invalidateQueries({ queryKey: APP_PACKAGE_OPERATIONS_QUERY_KEY }),
+        queryClient.invalidateQueries({
+          queryKey: APP_PACKAGE_OPERATIONS_QUERY_KEY,
+        }),
         queryClient.invalidateQueries({ queryKey: APP_DATA_QUERY_KEY }),
       ]);
     },
   });
 }
+
+export function useAppDocumentAccessMutation() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (input: AppDocumentAccessMutationInput) => {
+      if (input.action === "revoke") {
+        return await nextclawClient.appPackages.revokeDocumentAccess(
+          input.appId,
+          input.scopeId,
+        );
+      }
+      return await nextclawClient.appPackages.grantDocumentAccess(input.appId, {
+        scopeId: input.scopeId,
+        directoryPath: input.directoryPath,
+        mode: input.mode,
+      });
+    },
+    onSuccess: async () => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: APP_PACKAGES_QUERY_KEY }),
+        queryClient.invalidateQueries({ queryKey: SERVICE_APPS_QUERY_KEY }),
+        queryClient.invalidateQueries({ queryKey: SERVICE_ACTIONS_QUERY_KEY }),
+      ]);
+    },
+  });
+}

package/src/features/chat/components/conversation/__tests__/chat-conversation-workspace-section.test.tsx

@@ -183,6 +183,35 @@ describe("ChatConversationWorkspaceSection", () => {
     );
   });
 
+  it("uses an explicit project root for a project-owned file preview", () => {
+    useChatThreadStore.getState().setSnapshot({
+      workspacePanelParentKey: null,
+      activeWorkspacePanelKind: "file",
+      workspaceFileTabs: [{
+        key: "project-skill",
+        parentSessionKey: null,
+        path: "/Users/peiwang/Projects/nextbot/.agents/skills/project/SKILL.md",
+        viewMode: "preview",
+      }],
+      activeWorkspaceFileKey: "project-skill",
+    });
+
+    render(
+      <ChatConversationWorkspaceSection
+        layoutMode="desktop"
+        sessionKey={null}
+        projectRoot="/Users/peiwang/Projects/nextbot"
+      />,
+    );
+
+    expect(mocks.panelProps).toHaveBeenCalledWith(
+      expect.objectContaining({
+        sessionProjectRoot: "/Users/peiwang/Projects/nextbot",
+        sessionWorkingDir: "/Users/peiwang/Projects/nextbot",
+      }),
+    );
+  });
+
   it("keeps the workspace panel mounted while a root draft materializes", () => {
     useChatSessionListStore.getState().setSnapshot({ selectedSessionKey: null });
     useChatThreadStore.getState().setSnapshot({

package/src/features/chat/components/conversation/chat-conversation-workspace-section.tsx

@@ -8,11 +8,13 @@ import { normalizeSessionProjectRootValue } from "@/shared/lib/session-project";
 type ChatConversationWorkspaceSectionProps = {
   layoutMode: "desktop" | "mobile";
   sessionKey: string | null;
+  projectRoot?: string | null;
 };
 
 export function ChatConversationWorkspaceSection({
   layoutMode,
   sessionKey,
+  projectRoot,
 }: ChatConversationWorkspaceSectionProps) {
   const snapshot = useChatThreadStore((state) => state.snapshot);
   const defaultWorkspacePath = useChatQueryStore((state) =>
@@ -21,9 +23,9 @@ export function ChatConversationWorkspaceSection({
     ),
   );
   const selectedSession = useNcpChatSelectedSession(sessionKey);
-  const draftProjectRoot = sessionKey
+  const draftProjectRoot = projectRoot ?? (sessionKey
     ? null
-    : snapshot.draftProjectRoot ?? defaultWorkspacePath;
+    : snapshot.draftProjectRoot ?? defaultWorkspacePath);
   const {
     childSessionTabs,
     activeSideChatDraft,

package/src/features/chat/components/layout/__tests__/chat-page-shell.test.tsx

@@ -38,6 +38,10 @@ vi.mock("@/features/marketplace", () => ({
   MarketplacePage: () => <div>Marketplace</div>,
 }));
 
+vi.mock("@/features/projects", () => ({
+  ProjectsPage: () => <div>Project Home</div>,
+}));
+
 describe("ChatPageLayout", () => {
   it("uses the same canvas width for management pages", () => {
     const agentsView = render(
@@ -81,4 +85,21 @@ describe("ChatPageLayout", () => {
     expect(screen.queryByTestId("chat-conversation-panel")).toBeNull();
     expect(screen.getByTestId("confirm-dialog")).toBeTruthy();
   });
+
+  it("keeps the chat sidebar while rendering the project home in the workspace", async () => {
+    useViewportLayoutMock.mockReturnValue({
+      mode: "desktop",
+      isMobile: false,
+      isDesktop: true,
+    });
+
+    render(<ChatPageLayout view="projects" confirmDialog={<div />} />);
+
+    expect(screen.getByTestId("desktop-chat-sidebar")).toBeTruthy();
+    const projectHome = await screen.findByText("Project Home");
+    expect(projectHome).toBeTruthy();
+    expect(projectHome.parentElement?.className).toContain("flex");
+    expect(projectHome.parentElement?.className).toContain("overflow-hidden");
+    expect(screen.queryByTestId("chat-conversation-panel")).toBeNull();
+  });
 });

package/src/features/chat/components/layout/chat-page-shell.tsx

@@ -1,4 +1,4 @@
-import { useLayoutEffect } from "react";
+import { lazy, Suspense, useLayoutEffect } from "react";
 import { ChatSidebar } from "@/features/chat/components/layout/chat-sidebar";
 import { ChatConversationPanel } from "@/features/chat/components/conversation/chat-conversation-panel";
 import { AgentsPage } from "@/features/agents";
@@ -9,11 +9,22 @@ import { ChatMobileShell } from "@/platforms/mobile";
 import { InboxPage } from "@/features/inbox";
 import { PanelAppMainPage } from "@/features/panel-apps";
 import { useScrollRestoration } from "@/shared/hooks/use-scroll-restoration";
-export type MainPanelView = "chat" | "cron" | "skills" | "agents" | "inbox" | "panel-app";
+const ProjectsPage = lazy(async () => ({
+  default: (await import("@/features/projects")).ProjectsPage,
+}));
+
+export type MainPanelView = "chat" | "cron" | "skills" | "agents" | "inbox" | "panel-app" | "projects";
 export type ChatPageProps = {
   view: MainPanelView;
 };
 const MANAGEMENT_PAGE_CANVAS_WIDTH_CLASS = "max-w-[min(1180px,100%)]";
+
+function resolveManagementWorkspaceClass(view: MainPanelView): string {
+  return view === "projects"
+    ? "relative flex flex-1 min-h-0 overflow-hidden bg-background"
+    : "flex-1 min-h-0 overflow-hidden bg-background";
+}
+
 type UseChatSessionSyncParams = {
   routeSessionKey: string | null;
   syncRouteSessionSelection: (routeSessionKey: string | null) => void;
@@ -55,9 +66,13 @@ export function ChatPageLayout({ view, confirmDialog }: ChatPageLayoutProps) {
       ) : (
         <section
           data-theme-surface="workspace"
-          className="flex-1 min-h-0 overflow-hidden bg-background"
+          className={resolveManagementWorkspaceClass(view)}
         >
-          {view === "inbox" ? (
+          {view === "projects" ? (
+            <Suspense fallback={<div className="h-full animate-pulse bg-card/30" />}>
+              <ProjectsPage />
+            </Suspense>
+          ) : view === "inbox" ? (
             <div className={`mx-auto flex h-full min-h-0 w-full flex-col py-4 sm:px-6 sm:py-5 ${MANAGEMENT_PAGE_CANVAS_WIDTH_CLASS}`}>
               <InboxPage />
             </div>

package/src/features/chat/features/conversation/hooks/__tests__/use-session-conversation-controller.test.tsx

@@ -240,7 +240,7 @@ describe('useSessionConversationController backend run queue', () => {
         parts: [{ type: 'text', text: 'Update this session title' }],
       }),
     });
-    expect(envelope?.metadata).not.toHaveProperty('requested_skill_refs');
+    expect(envelope?.metadata).not.toHaveProperty('ui_inline_tokens');
     expect(params.resetComposer).not.toHaveBeenCalled();
     expect(params.restoreComposer).not.toHaveBeenCalled();
   });

package/src/features/chat/features/conversation/hooks/use-session-conversation-controller.ts

@@ -175,7 +175,6 @@ function buildSubmissionDraft(params: BuildSubmissionDraftParams): SubmissionDra
         : sessionKey
           ? inputQuery.selectedSession?.projectRoot ?? null
           : inputSnapshot.pendingProjectRoot,
-      requestedSkills: [...composerSnapshot.selectedSkills],
       skillRecords: inputQuery.skillRecords.filter((record) =>
         composerSnapshot.selectedSkills.includes(record.ref)
       ),

package/src/features/chat/features/conversation/utils/__tests__/session-message-composer.utils.test.ts

@@ -3,7 +3,7 @@ import { describe, expect, it } from 'vitest';
 import { buildSessionMessageComposerSnapshot } from '@/features/chat/features/conversation/utils/session-message-composer.utils';
 
 describe('buildSessionMessageComposerSnapshot', () => {
-  it('round-trips text, attachment and requested skill state into the shared composer', () => {
+  it('round-trips text, attachment and skill-token state into the shared composer', () => {
     const snapshot = buildSessionMessageComposerSnapshot({
       attachmentIdPrefix: 'edit-user-1',
       availableSkills: [{ ref: 'skill://review', name: 'Review' }],
@@ -13,15 +13,22 @@ describe('buildSessionMessageComposerSnapshot', () => {
         role: 'user',
         status: 'final',
         timestamp: '2026-08-08T10:00:00.000Z',
-        metadata: { requested_skill_refs: ['skill://review'] },
+        metadata: {
+          ui_inline_tokens: [{
+            kind: 'skill',
+            key: 'skill://review',
+            label: 'Review',
+            rawText: '$Review',
+          }],
+        },
         parts: [
-          { type: 'text', text: 'check this' },
+          { type: 'text', text: 'check $Review this' },
           { type: 'file', name: 'notes.txt', mimeType: 'text/plain', sizeBytes: 12 },
         ],
       },
     });
 
-    expect(snapshot.text).toContain('check this');
+    expect(snapshot.text).toBe('check  this');
     expect(snapshot.selectedSkills).toEqual(['skill://review']);
     expect(snapshot.skillRecords).toEqual([{ ref: 'skill://review', name: 'Review' }]);
     expect(snapshot.attachments).toEqual([

package/src/features/chat/features/conversation/utils/__tests__/session-queued-input.utils.test.ts

@@ -13,7 +13,6 @@ describe('session queued input utils', () => {
       sessionId: 'session-1',
       enqueuedAt: '2026-07-22T10:00:00.000Z',
       metadata: {
-        requested_skill_refs: ['project:review'],
         ui_inline_tokens: [{
           kind: 'skill',
           key: 'project:review',

package/src/features/chat/features/conversation/utils/session-message-composer.utils.ts

@@ -14,7 +14,6 @@ import {
   resolveInlineTokensForText,
   type ChatInlineTokenSource,
 } from '@/features/chat/features/input/utils/chat-inline-token.utils';
-import { normalizeRequestedSkills } from '@/features/chat/features/runtime/utils/chat-runtime.utils';
 import type { SessionConversationComposerState } from '@/features/chat/features/conversation/hooks/use-session-conversation-input-state';
 
 export type SessionMessageComposerSnapshot = SessionConversationComposerState & {
@@ -55,15 +54,6 @@ function buildTextNodes(
   return nodes;
 }
 
-function readRequestedSkills(metadata: Record<string, unknown>): string[] {
-  const raw = metadata.requested_skill_refs;
-  return normalizeRequestedSkills(
-    Array.isArray(raw)
-      ? raw.filter((value): value is string => typeof value === 'string')
-      : undefined,
-  );
-}
-
 export function buildSessionMessageComposerSnapshot(params: {
   readonly attachmentIdPrefix: string;
   readonly availableSkills: readonly { ref: string; name: string }[];
@@ -107,8 +97,17 @@ export function buildSessionMessageComposerSnapshot(params: {
   });
 
   const normalizedNodes = normalizeChatComposerNodes(nodes);
-  const selectedSkills = readRequestedSkills(metadata);
+  const skillTokens = metadataTokens.filter(
+    (token): token is Extract<ChatInlineTokenSource, { kind: 'skill' }> =>
+      token.kind === 'skill',
+  );
+  const selectedSkills = [...new Set(skillTokens.map((token) => token.ref))];
   const skillNameByRef = new Map(availableSkills.map(({ ref, name }) => [ref, name]));
+  for (const token of skillTokens) {
+    if (!skillNameByRef.has(token.ref)) {
+      skillNameByRef.set(token.ref, token.name);
+    }
+  }
   return {
     text: deriveChatComposerDraft(normalizedNodes),
     nodes: normalizedNodes,

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

@@ -32,6 +32,7 @@ function createPanelApp(): PanelAppEntryView {
 
 function createProject(): ProjectView {
   return {
+    id: 'project-nextclaw',
     name: 'NextClaw',
     rootPath: '/tmp/nextclaw',
     createdAt: '2026-07-28T00:00:00.000Z',

package/src/features/chat/features/message/hooks/use-chat-message-actions.tsx

@@ -41,7 +41,6 @@ function buildEditedMessageMetadata(
   snapshot: SessionMessageComposerSnapshot,
 ): Record<string, unknown> | undefined {
   const metadata = { ...message.metadata };
-  delete metadata.requested_skill_refs;
   delete metadata[CHAT_INLINE_TOKENS_METADATA_KEY];
   const skillRecords = readInlineTokensFromMetadata(message.metadata).flatMap(
     (token) =>
@@ -59,7 +58,6 @@ function buildEditedMessageMetadata(
   );
   Object.assign(metadata, buildChatRunMetadata({
     composerNodes: [...snapshot.nodes],
-    requestedSkills: [...snapshot.selectedSkills],
     skillRecords,
   }));
   return Object.keys(metadata).length > 0 ? metadata : undefined;

package/src/features/chat/features/runtime/utils/chat-runtime.utils.ts

@@ -216,20 +216,6 @@ class HistoryMessageBuilder {
   };
 }
 
-export function normalizeRequestedSkills(value: string[] | undefined): string[] {
-  if (!Array.isArray(value)) {
-    return [];
-  }
-  const deduped = new Set<string>();
-  for (const item of value) {
-    const trimmed = item.trim();
-    if (trimmed) {
-      deduped.add(trimmed);
-    }
-  }
-  return [...deduped];
-}
-
 export function buildUiMessagesFromHistoryMessages(messages: SessionMessageView[]): UIMessage[] {
   return new HistoryMessageBuilder().build(messages);
 }

package/src/features/chat/features/session/components/__tests__/chat-sidebar-project-groups.test.tsx

@@ -1,7 +1,11 @@
 import { fireEvent, render, screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import { ChatSidebarProjectGroups } from "@/features/chat/features/session/components/chat-sidebar-project-groups";
+import { MemoryRouter, useLocation } from "react-router-dom";
+import {
+  ChatSidebarProjectGroups,
+  type ChatSidebarProjectGroup,
+} from "@/features/chat/features/session/components/chat-sidebar-project-groups";
 import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
 
 const mocks = vi.hoisted(() => ({
@@ -16,7 +20,8 @@ vi.mock("@/features/chat/components/providers/chat-presenter.provider", () => ({
   }),
 }));
 
-const projectGroup = {
+const projectGroup: ChatSidebarProjectGroup = {
+  projectId: "project-analysis",
   projectRoot: "/tmp/analysis-project",
   projectName: "analysis-project",
   items: [
@@ -35,17 +40,30 @@ const projectGroup = {
   isPinned: false,
 };
 
-function renderProjectGroups(isPinned = false) {
+function LocationProbe() {
+  const location = useLocation();
+  return (
+    <output data-testid="location">{`${location.pathname}${location.search}`}</output>
+  );
+}
+
+function renderProjectGroups(
+  isPinned = false,
+  group: ChatSidebarProjectGroup = projectGroup,
+) {
   return render(
-    <ChatSidebarProjectGroups
-      groups={[{ ...projectGroup, isPinned }]}
-      projectCronJobCountByRoot={new Map([[projectGroup.projectRoot, 2]])}
-      defaultSessionType="native"
-      sessionTypeOptions={[
-        { value: "native", label: "Native", icon: null, ready: true },
-      ]}
-      renderSessionItem={() => <div>Project session</div>}
-    />,
+    <MemoryRouter initialEntries={["/chat"]}>
+      <ChatSidebarProjectGroups
+        groups={[{ ...group, isPinned }]}
+        projectCronJobCountByRoot={new Map([[projectGroup.projectRoot, 2]])}
+        defaultSessionType="native"
+        sessionTypeOptions={[
+          { value: "native", label: "Native", icon: null, ready: true },
+        ]}
+        renderSessionItem={() => <div>Project session</div>}
+      />
+      <LocationProbe />
+    </MemoryRouter>,
   );
 }
 
@@ -72,18 +90,23 @@ describe("ChatSidebarProjectGroups", () => {
     const { container } = renderProjectGroups();
 
     const header = screen.getByLabelText("Collapse project");
+    const projectLink = screen.getByRole("link", { name: "analysis-project" });
+    const projectRow = projectLink.parentElement?.parentElement;
     expect(container.firstElementChild?.className).toBe("space-y-0.5");
-    expect(header.parentElement?.className).toContain("h-8");
-    expect(header.parentElement?.className).toContain("hover:bg-gray-200/60");
-    expect(header.parentElement?.className).not.toContain("focus-within:bg");
-    expect(
-      screen.getByText("analysis-project").nextElementSibling?.tagName,
-    ).toBe("svg");
+    expect(projectRow?.className).toContain("h-8");
+    expect(projectRow?.className).toContain("hover:bg-gray-200/60");
+    const projectContent = projectLink.parentElement;
+    expect(projectContent?.classList.contains("pr-14")).toBe(false);
+    expect(projectContent?.className).toContain("group-hover/project:pr-14");
+    expect(projectContent?.className).toContain(
+      "group-has-[[data-project-actions]:focus-within]/project:pr-14",
+    );
+    expect(projectLink.querySelector("span")?.className).not.toContain("uppercase");
+    expect(projectLink.querySelector("span")?.className).toContain("text-[13px]");
     expect(
-      screen
-        .getByText("analysis-project")
-        .nextElementSibling?.getAttribute("class"),
-    ).toContain("opacity-0");
+      header.compareDocumentPosition(projectLink) &
+        Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
     expect(screen.queryByText("Sessions")).toBeNull();
 
     fireEvent.click(header);
@@ -97,6 +120,31 @@ describe("ChatSidebarProjectGroups", () => {
     expect(screen.queryByText("Project session")).toBeNull();
   });
 
+  it("opens the project home from the project name without changing expansion", () => {
+    renderProjectGroups();
+
+    fireEvent.click(screen.getByRole("link", { name: "analysis-project" }));
+
+    expect(mocks.toggleProjectCollapsed).not.toHaveBeenCalled();
+    expect(screen.getByTestId("location").textContent).toBe(
+      "/projects/project-analysis/overview",
+    );
+    expect(screen.getByText("Project session")).toBeTruthy();
+  });
+
+  it("surfaces a running child session while its project is collapsed", () => {
+    renderProjectGroups(false, {
+      ...projectGroup,
+      items: [{ ...projectGroup.items[0], runStatus: "running" as const }],
+    });
+
+    expect(screen.queryByLabelText("Running")).toBeNull();
+
+    fireEvent.click(screen.getByLabelText("Collapse project"));
+
+    expect(screen.getByLabelText("Running")).toBeTruthy();
+  });
+
   it("shows project context from the row on hover", async () => {
     const user = userEvent.setup();
     renderProjectGroups();