@nextclaw/ui 0.23.0 → 0.24.0-beta.1

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

@@ -1,4 +1,5 @@
 import { useMemo, useState, type ReactNode } from "react";
+import { Link, useLocation } from "react-router-dom";
 import {
   AlarmClock,
   ChevronDown,
@@ -19,6 +20,8 @@ import type { ChatSidebarProjectGroup } from "@/features/chat/features/session/u
 import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
 import { t } from "@/shared/lib/i18n";
 import { ChatSidebarContextCard } from "@/features/chat/features/session/components/chat-sidebar-context-card";
+import { SessionRunBadge } from "@/features/chat/features/session/components/session-run-badge";
+import { cn } from "@/shared/lib/utils";
 
 export type { ChatSidebarProjectGroup };
 
@@ -53,6 +56,7 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
     projectCronJobCountByRoot,
   } = props;
   const presenter = usePresenter();
+  const location = useLocation();
   const collapsedProjectRoots = useChatSessionListStore(
     (state) => state.snapshot.collapsedProjectRoots,
   );
@@ -72,13 +76,23 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
       {groups.map((group) => {
         const actionLabel = `${t("chatSidebarNewTask")} · ${group.projectName}`;
         const isCollapsed = collapsedProjectRoots.includes(group.projectRoot);
+        const hasRunningSession = isCollapsed && group.items.some(
+          (item) => item.runStatus === "running",
+        );
+        const isSelected = Boolean(group.projectId) &&
+          location.pathname.startsWith(`/projects/${group.projectId}/`);
         const pinLabel = t(
           group.isPinned ? "chatSidebarUnpinProject" : "chatSidebarPinProject",
         );
 
         return (
           <div key={group.projectRoot}>
-            <div className="group/project relative h-8 rounded-lg px-2 text-muted-foreground transition-colors hover:bg-gray-200/60 hover:text-gray-900">
+            <div
+              className={cn(
+                "group/project relative h-8 rounded-lg px-1 text-muted-foreground transition-colors hover:bg-gray-200/60 hover:text-gray-900",
+                isSelected && "bg-gray-200/60 text-gray-900",
+              )}
+            >
               <ChatSidebarContextCard
                 title={group.projectName}
                 metrics={[
@@ -100,42 +114,75 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
                   },
                 ]}
               >
-                <button
-                  type="button"
-                  aria-expanded={!isCollapsed}
-                  aria-label={t(
-                    isCollapsed
-                      ? "chatSidebarExpandProject"
-                      : "chatSidebarCollapseProject",
+                <div
+                  className={cn(
+                    "flex h-full w-full min-w-0 items-center group-hover/project:pr-14 group-has-[[data-project-actions]:focus-within]/project:pr-14",
+                    hasRunningSession && "pr-7",
                   )}
-                  className="flex h-full w-full min-w-0 items-center gap-1.5 pr-14 text-left focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
-                  onClick={() =>
-                    presenter.chatSessionListManager.toggleProjectCollapsed(
-                      group.projectRoot,
-                    )
-                  }
                 >
-                  <Folder className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
-                  <span
-                    className="truncate text-[11px] font-medium uppercase tracking-wider"
-                    title={group.projectRoot}
-                  >
-                    {group.projectName}
-                  </span>
-                  {isCollapsed ? (
-                    <ChevronRight
-                      className="h-3.5 w-3.5 shrink-0 opacity-0 transition-opacity group-hover/project:opacity-100 group-focus-within/project:opacity-100"
-                      aria-hidden="true"
-                    />
+                  <IconActionButton
+                    icon={
+                      isCollapsed ? (
+                        <ChevronRight className="h-3.5 w-3.5" />
+                      ) : (
+                        <ChevronDown className="h-3.5 w-3.5" />
+                      )
+                    }
+                    label={t(
+                      isCollapsed
+                        ? "chatSidebarExpandProject"
+                        : "chatSidebarCollapseProject",
+                    )}
+                    aria-expanded={!isCollapsed}
+                    size="sm"
+                    tone="surface"
+                    tooltip={false}
+                    onClick={() =>
+                      presenter.chatSessionListManager.toggleProjectCollapsed(
+                        group.projectRoot,
+                      )
+                    }
+                  />
+                  {group.projectId ? (
+                    <Link
+                      to={`/projects/${encodeURIComponent(group.projectId)}/overview`}
+                      className="flex h-full min-w-0 flex-1 items-center gap-1.5 rounded-md px-1 text-left focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+                      aria-current={isSelected ? "page" : undefined}
+                      title={group.projectRoot}
+                    >
+                      <Folder
+                        className="h-3.5 w-3.5 shrink-0"
+                        aria-hidden="true"
+                      />
+                      <span className="truncate text-[13px] font-medium">
+                        {group.projectName}
+                      </span>
+                    </Link>
                   ) : (
-                    <ChevronDown
-                      className="h-3.5 w-3.5 shrink-0 opacity-0 transition-opacity group-hover/project:opacity-100 group-focus-within/project:opacity-100"
-                      aria-hidden="true"
-                    />
+                    <span
+                      className="flex h-full min-w-0 flex-1 items-center gap-1.5 rounded-md px-1 text-left"
+                      title={group.projectRoot}
+                    >
+                      <Folder
+                        className="h-3.5 w-3.5 shrink-0"
+                        aria-hidden="true"
+                      />
+                      <span className="truncate text-[13px] font-medium">
+                        {group.projectName}
+                      </span>
+                    </span>
                   )}
-                </button>
+                </div>
               </ChatSidebarContextCard>
-              <div className="pointer-events-none absolute right-2 top-1/2 flex -translate-y-1/2 items-center opacity-0 transition-opacity group-hover/project:pointer-events-auto group-hover/project:opacity-100 focus-within:pointer-events-auto focus-within:opacity-100">
+              {hasRunningSession ? (
+                <span className="absolute right-2 top-1/2 inline-flex -translate-y-1/2 transition-opacity group-hover/project:opacity-0 group-has-[[data-project-actions]:focus-within]/project:opacity-0">
+                  <SessionRunBadge status="running" />
+                </span>
+              ) : null}
+              <div
+                data-project-actions
+                className="pointer-events-none absolute right-2 top-1/2 flex -translate-y-1/2 items-center opacity-0 transition-opacity group-hover/project:pointer-events-auto group-hover/project:opacity-100 focus-within:pointer-events-auto focus-within:opacity-100"
+              >
                 {supportsSessionTypeChoice ? (
                   <Popover
                     open={openProjectRoot === group.projectRoot}

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

@@ -4,6 +4,7 @@ import { groupSessionsByProject } from "@/features/chat/features/session/utils/c
 describe("groupSessionsByProject", () => {
   it("uses registered projects as the project-first baseline", () => {
     const groups = groupSessionsByProject([], new Set(), new Set(), [{
+      id: "project-knowledge",
       name: "Knowledge",
       rootPath: "/tmp/knowledge",
       template: "knowledge-base",
@@ -12,6 +13,7 @@ describe("groupSessionsByProject", () => {
     }]);
 
     expect(groups).toEqual([{
+      projectId: "project-knowledge",
       projectRoot: "/tmp/knowledge",
       projectName: "Knowledge",
       items: [],

package/src/features/chat/features/session/utils/chat-run-metadata.utils.ts

@@ -8,7 +8,6 @@ import {
   createInlineTokensMetadata,
   type ChatSkillReferenceSnapshot,
 } from "@/features/chat/features/input/utils/chat-inline-token.utils";
-import { normalizeRequestedSkills } from "@/features/chat/features/runtime/utils/chat-runtime.utils";
 import { normalizeSessionProjectRootValue } from "@/shared/lib/session-project";
 
 function createMetadataFields(
@@ -24,7 +23,6 @@ export function buildChatRunMetadata(payload: {
   thinkingLevel?: string;
   sessionType?: string;
   projectRoot?: string | null;
-  requestedSkills?: string[];
   skillRecords?: readonly ChatSkillReferenceSnapshot[];
   composerNodes?: Parameters<typeof buildInlineTokensFromComposer>[0];
   sessionMaterialization?: AgentRunSessionMaterializationMetadata | null;
@@ -37,10 +35,6 @@ export function buildChatRunMetadata(payload: {
     ...createMetadataFields(payload.agentId?.trim(), ["agentId", "agent_id"]),
     ...createMetadataFields(projectRoot ?? undefined, ["projectRoot", "project_root"]),
   };
-  const requestedSkills = normalizeRequestedSkills(payload.requestedSkills);
-  if (requestedSkills.length > 0) {
-    metadata.requested_skill_refs = requestedSkills;
-  }
   const inlineTokens = payload.composerNodes
     ? buildInlineTokensFromComposer(payload.composerNodes, payload.skillRecords)
     : [];

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

@@ -9,6 +9,7 @@ export type ChatSidebarDateGroup = {
 };
 
 export type ChatSidebarProjectGroup = {
+  projectId?: string;
   projectRoot: string;
   projectName: string;
   items: NcpSessionListItemView[];
@@ -102,6 +103,7 @@ export function groupSessionsByProject(
 
   for (const project of projects) {
     grouped.set(project.rootPath, {
+      projectId: project.id,
       projectRoot: project.rootPath,
       projectName: project.name,
       items: [],

package/src/features/chat/features/welcome/utils/__tests__/chat-welcome-project-options.utils.test.ts

@@ -60,6 +60,7 @@ describe("buildChatWelcomeProjectOptions", () => {
     const options = buildChatWelcomeProjectOptions({
       defaultProjectRoot: "/Users/demo/.nextclaw/workspace",
       projects: [{
+        id: "project-knowledge",
         name: "Knowledge",
         rootPath: "/tmp/knowledge",
         template: "knowledge-base",

package/src/features/chat/index.ts

@@ -1,4 +1,5 @@
 export { ChatConversationPanel } from "./components/conversation/chat-conversation-panel";
+export { ChatConversationWorkspaceSection } from "./components/conversation/chat-conversation-workspace-section";
 export { ChatSidebar } from "./components/layout/chat-sidebar";
 export { ChatPresenterProvider } from "./components/providers/chat-presenter.provider";
 export { usePresenter } from "./components/providers/chat-presenter.provider";
@@ -6,7 +7,10 @@ export { ChatPresenter } from "./presenters/chat.presenter";
 export { ChatDraftIntentManager } from "./managers/chat-draft-intent.manager";
 export { ChatComposerIntentManager } from "./managers/chat-composer-intent.manager";
 export { ChatCompletionNotificationManager } from "./managers/chat-completion-notification.manager";
-export { buildSessionPath, CHAT_DRAFT_SESSION_PATH } from "./features/session/utils/chat-session-route.utils";
+export {
+  buildSessionPath,
+  CHAT_DRAFT_SESSION_PATH,
+} from "./features/session/utils/chat-session-route.utils";
 export { useChatSessionListStore } from "./stores/chat-session-list.store";
 export { useChatThreadStore } from "./stores/chat-thread.store";
 export { useChatMessageLayoutStore } from "./stores/chat-message-layout.store";

package/src/features/chat/managers/__tests__/chat-session-list.manager.test.ts

@@ -230,6 +230,33 @@ describe("ChatSessionListManager draft and selection flow", () => {
     });
   });
 
+  it("keeps a project-bound initial prompt as an editable unsent draft", () => {
+    const uiManager = {
+      goToChatRoot: vi.fn(),
+      navigateTo: vi.fn(),
+      goToSession: vi.fn(),
+      isAtChatRoot: vi.fn(() => true),
+    } as unknown as ConstructorParameters<typeof ChatSessionListManager>[0];
+
+    const manager = new ChatSessionListManager(uiManager);
+    manager.createSession({
+      projectRoot: "/tmp/project-alpha",
+      prompt: "Use the project observation capability.",
+    });
+
+    expect(uiManager.navigateTo).toHaveBeenCalledWith("/chat/draft", {
+      replace: true,
+      state: {
+        chatDraft: {
+          sessionType: "native",
+          projectRoot: "/tmp/project-alpha",
+          prompt: "Use the project observation capability.",
+        },
+      },
+    });
+    expect(useChatThreadStore.getState().snapshot.hasSubmittedDraftMessage).toBe(false);
+  });
+
   it("does not eagerly replace the old selected session before the route finishes switching", () => {
     const uiManager = {
       goToChatRoot: vi.fn(),

package/src/features/chat/pages/__tests__/ncp-chat-page.test.ts

@@ -180,19 +180,8 @@ describe('buildChatRunMetadata', () => {
     ).not.toHaveProperty('project_root');
   });
 
-  it('sends requested skill refs instead of legacy requested skill names', () => {
-    expect(
-      buildChatRunMetadata({
-        requestedSkills: ['project:/tmp/project-alpha/.agents/skills/review'],
-      }),
-    ).toMatchObject({
-      requested_skill_refs: ['project:/tmp/project-alpha/.agents/skills/review'],
-    });
-  });
-
-  it('snapshots explicit skill references while keeping internal refs out of message text', () => {
+  it('snapshots skill token presentation without creating runtime selection metadata', () => {
     expect(buildChatRunMetadata({
-      requestedSkills: ['workspace:/tmp/workspace/skills/review'],
       skillRecords: [{
         ref: 'workspace:/tmp/workspace/skills/review',
         name: 'review',
@@ -204,8 +193,7 @@ describe('buildChatRunMetadata', () => {
         tokenKey: 'workspace:/tmp/workspace/skills/review',
         label: 'review',
       })],
-    })).toMatchObject({
-      requested_skill_refs: ['workspace:/tmp/workspace/skills/review'],
+    })).toEqual({
       ui_inline_tokens: {
         schemaVersion: 2,
         items: [{

package/src/features/chat/types/chat-run.types.ts

@@ -16,7 +16,6 @@ export type SendMessageParams = {
   model?: string;
   thinkingLevel?: ThinkingLevel;
   projectRoot?: string | null;
-  requestedSkills?: string[];
   attachments?: NcpDraftAttachment[];
   parts?: NcpMessagePart[];
   composerNodes?: ChatComposerNode[];

package/src/features/projects/AGENTS.md

@@ -0,0 +1,7 @@
+# Projects UI boundary
+
+- 本目录拥有 Projects 页面、presenter、查询状态和用户回复编排；项目观测事实来自 `client.projects` 公共快照，工作项来自 Project Work API，组件不得自行扫描文件或解析 Marker。
+- 页面默认只读；确认/拒绝只复用现有 agent-run 消息入口，并携带可追踪、可幂等的响应元数据，不创建第二套 response bridge。
+- Overview、列表和看板消费同一份工作项查询状态；所有工作项入口统一打开右侧详情抽屉，不得在页面内追加平铺详情。
+- `project.work.changed` 只用于失效查询；UI 不重放事件历史，也不以轮询或目录扫描代替业务存储。
+- 组件负责连接与展示，跨组件状态归 hook/presenter；用户文案必须走 Projects i18n 资源。

package/src/features/projects/components/project-agreement.tsx

@@ -0,0 +1,92 @@
+import type { ProjectObservationSnapshot } from "@nextclaw/client-sdk";
+import { t } from "@/shared/lib/i18n";
+import {
+  ProjectEmptyState,
+  ProjectFilePreviewButton,
+  ProjectSection,
+} from "./project-section";
+
+export function ProjectAgreement({
+  snapshot,
+  onOpenFile,
+}: {
+  snapshot: ProjectObservationSnapshot;
+  onOpenFile: (path: string, label: string) => void;
+}) {
+  return (
+    <div className="grid min-w-0 gap-4 lg:grid-cols-2">
+      <ProjectSection title={t("projectsVisionAndContext")}>
+        {snapshot.project.summary ? (
+          <p className="mb-4 text-sm">{snapshot.project.summary}</p>
+        ) : null}
+        {snapshot.project.context.length ? (
+          <div className="divide-y divide-border/60">
+            {snapshot.project.context.map((context) => (
+              <ProjectContextReference
+                key={context.id}
+                context={context}
+                onOpenFile={onOpenFile}
+              />
+            ))}
+          </div>
+        ) : (
+          <ProjectEmptyState>{t("projectsNoContext")}</ProjectEmptyState>
+        )}
+      </ProjectSection>
+      <ProjectSection title={t("projectsSourceHealth")}>
+        <div className="space-y-2">
+          {snapshot.sources.map((source) => (
+            <div
+              key={source.id}
+              className="flex items-center justify-between gap-3 rounded-xl bg-muted/45 p-3 text-sm"
+            >
+              <span>{source.label}</span>
+              <span className="text-muted-foreground">
+                {t(`projectsSource_${source.status}`)} · {source.itemCount}
+              </span>
+            </div>
+          ))}
+        </div>
+        {snapshot.diagnostics.length ? (
+          <div className="mt-4 space-y-2 border-t border-border/60 pt-4">
+            {snapshot.diagnostics.map((diagnostic) => (
+              <div
+                key={diagnostic.id}
+                className="rounded-xl bg-muted/35 p-3 text-sm"
+              >
+                <p className="font-medium">{diagnostic.code}</p>
+                <p className="mt-1 text-xs text-muted-foreground">
+                  {diagnostic.message}
+                </p>
+              </div>
+            ))}
+          </div>
+        ) : null}
+      </ProjectSection>
+    </div>
+  );
+}
+
+function ProjectContextReference({
+  context,
+  onOpenFile,
+}: {
+  context: ProjectObservationSnapshot["project"]["context"][number];
+  onOpenFile: (path: string, label: string) => void;
+}) {
+  const { accessible, role, source } = context;
+  return (
+    <ProjectFilePreviewButton
+      available={accessible}
+      path={source}
+      label={role}
+      onOpen={onOpenFile}
+      className="block w-full py-3 text-left first:pt-0 enabled:hover:text-foreground enabled:focus-visible:outline-none enabled:focus-visible:ring-1 enabled:focus-visible:ring-border"
+    >
+      <span className="block text-sm font-medium">{role}</span>
+      <span className="mt-1 block truncate text-xs text-muted-foreground">
+        {source}{!accessible ? ` · ${t("projectsUnavailable")}` : ""}
+      </span>
+    </ProjectFilePreviewButton>
+  );
+}

package/src/features/projects/components/project-artifacts.test.tsx

@@ -0,0 +1,77 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import type { ProjectObservationSnapshot } from "@nextclaw/client-sdk";
+import { ProjectArtifacts } from "./project-artifacts";
+
+const observedAt = "2026-08-30T00:00:00.000Z";
+const designs = Array.from({ length: 11 }, (_, index) => ({
+  id: `design-${index + 1}`,
+  path: `docs/designs/${index + 1}.md`,
+  categoryId: "designs",
+  categoryLabel: "Designs",
+  exists: true,
+  fileUpdatedAt: `2026-08-${String(index + 1).padStart(2, "0")}T00:00:00.000Z`,
+  references: [],
+}));
+
+const snapshot: ProjectObservationSnapshot = {
+  asOf: observedAt,
+  project: { name: "Research", rootPath: "/tmp/research", context: [] },
+  sources: [],
+  workflows: [],
+  runs: [],
+  workItems: [],
+  artifactCategories: [
+    { id: "plans", label: "Plans" },
+    { id: "designs", label: "Designs" },
+  ],
+  artifacts: [
+    ...designs,
+    {
+      id: "plan-1",
+      path: "docs/plans/delivery.md",
+      categoryId: "plans",
+      categoryLabel: "Plans",
+      exists: true,
+      fileUpdatedAt: "2026-08-30T00:00:00.000Z",
+      references: [],
+    },
+  ],
+  signals: [],
+  requests: [],
+  activity: [],
+  skills: [],
+  diagnostics: [],
+  dataQuality: "complete",
+};
+
+describe("ProjectArtifacts", () => {
+  it("groups in configuration order, expands incrementally, filters, and opens the selected file", () => {
+    const onOpenFile = vi.fn();
+    render(<ProjectArtifacts snapshot={snapshot} onOpenFile={onOpenFile} />);
+
+    const groupHeaders = screen.getAllByRole("button", { name: /Plans 1|Designs 11/ });
+    expect(groupHeaders.map((header) => header.getAttribute("aria-label"))).toEqual([
+      "Plans 1",
+      "Designs 11",
+    ]);
+    expect(screen.getByTitle("docs/designs/11.md")).toBeTruthy();
+    expect(screen.queryByTitle("docs/designs/1.md")).toBeNull();
+
+    fireEvent.click(screen.getByRole("button", { name: /Show more \(1\)/ }));
+    expect(screen.getByTitle("docs/designs/1.md")).toBeTruthy();
+
+    fireEvent.change(screen.getByPlaceholderText("Search artifacts"), {
+      target: { value: "delivery" },
+    });
+    expect(screen.queryByRole("button", { name: /Designs 11/ })).toBeNull();
+    expect(screen.getByTitle("docs/plans/delivery.md")).toBeTruthy();
+    fireEvent.click(screen.getByTitle("docs/plans/delivery.md"));
+    expect(onOpenFile).toHaveBeenCalledWith("docs/plans/delivery.md", "docs/plans/delivery.md");
+
+    const plansHeader = screen.getByRole("button", { name: /Plans 1/ });
+    fireEvent.click(plansHeader);
+    expect(plansHeader.getAttribute("aria-expanded")).toBe("false");
+    expect(screen.queryByTitle("docs/plans/delivery.md")).toBeNull();
+  });
+});