@nextclaw/ui 0.24.0-beta.0 → 0.24.0

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/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/projects/AGENTS.md

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

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

@@ -1,150 +1,81 @@
-import { Link } from "react-router-dom";
-import type { ProjectObservationSnapshot } from "@nextclaw/client-sdk";
-import { Button } from "@/shared/components/ui/button";
-import { formatDateTime, t } from "@/shared/lib/i18n";
+import { t } from "@/shared/lib/i18n";
 import {
-  ProjectEmptyState,
-  ProjectFilePreviewButton,
-  ProjectSection,
-} from "./project-section";
-import {
-  DEFAULT_PROJECT_ARTIFACT_SORT,
-  formatProjectRelativeTime,
-  sortProjectArtifacts,
-} from "../utils/project-artifact-view.utils";
-import { ProjectRuns } from "./project-runs";
+  useProjectWork,
+  useProjectWorkSummary,
+} from "@/features/projects/hooks/use-project-work";
 
 export function ProjectOverview({
-  hasProjectSessions,
-  snapshot,
-  onStartObservationSetup,
-  onStartProjectWork,
-  onOpenFile,
-  shouldOfferObservationSetup,
+  projectId,
+  onOpenWorkItem,
 }: {
-  hasProjectSessions: boolean;
-  snapshot: ProjectObservationSnapshot;
-  onStartObservationSetup: () => void;
-  onStartProjectWork: () => void;
-  onOpenFile: (path: string, label: string) => void;
-  shouldOfferObservationSetup: boolean;
+  projectId: string;
+  onOpenWorkItem: (workItemId: string) => void;
 }) {
-  const openSignals = snapshot.signals.filter((signal) => signal.status === "open");
-  const recentArtifacts = sortProjectArtifacts(snapshot.artifacts, DEFAULT_PROJECT_ARTIFACT_SORT).slice(0, 5);
-  const recentActivity = [...snapshot.activity]
-    .sort((left, right) => right.at.localeCompare(left.at))
-    .slice(0, 6);
+  const summary = useProjectWorkSummary(projectId);
+  const work = useProjectWork(projectId);
+  if (summary.isLoading || work.isLoading)
+    return (
+      <div className="rounded-xl border border-border/60 p-5 text-sm text-muted-foreground">
+        {t("projectsLoading")}
+      </div>
+    );
+  if (summary.isError || work.isError)
+    return (
+      <div className="rounded-xl border border-destructive/40 p-5 text-sm text-destructive">
+        {t("projectsLoadFailed")}
+      </div>
+    );
+  const recent = work.data!.items.slice(0, 5);
   return (
-    <div className="grid min-w-0 gap-4 lg:grid-cols-2">
-      {shouldOfferObservationSetup ? (
-        <ProjectSection title={t("projectsObservationSetupTitle")} className="lg:col-span-2">
-          <p className="text-sm text-muted-foreground">
-            {t("projectsObservationSetupDescription")}
-          </p>
-          <button
-            type="button"
-            className="mt-3 rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
-            onClick={onStartObservationSetup}
+    <div className="space-y-5">
+      <section
+        className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4"
+        aria-label={t("projectsWorkSummary")}
+      >
+        {(
+          [
+            ["projectsWorkTotal", summary.data!.total],
+            ["projectsWorkActive", summary.data!.active],
+            ["projectsWorkNeedsAttention", summary.data!.attention],
+            ["projectsWorkCompleted", summary.data!.completed],
+          ] as const
+        ).map(([label, value]) => (
+          <div
+            key={label}
+            className="rounded-xl border border-border/60 bg-card p-4"
           >
-            {t("projectsObservationSetupAction")}
-          </button>
-        </ProjectSection>
-      ) : null}
-      {(snapshot.runs?.length ?? 0) > 0 ? (
-        <ProjectSection title={t("projectsAiActivity")} className="lg:col-span-2">
-          <ProjectRuns limit={5} snapshot={snapshot} />
-        </ProjectSection>
-      ) : null}
-      <ProjectSection title={t("projectsAttention")}>
-        {openSignals.length ? (
-          <div className="space-y-2">
-            {openSignals.map((signal) => (
-              <div key={signal.id} className="rounded-xl bg-muted/45 p-3 text-sm">
-                <p className="font-medium">{signal.message}</p>
-                <p className="mt-1 text-xs text-muted-foreground">{signal.reference.label} · {signal.level}</p>
-              </div>
-            ))}
-          </div>
-        ) : <ProjectEmptyState>{t("projectsNoAttention")}</ProjectEmptyState>}
-      </ProjectSection>
-      <ProjectSection title={t("projectsWork")}>
-        {snapshot.workItems.length ? (
-          <div className="space-y-2">
-            {snapshot.workItems.slice(0, 5).map((item) => (
-              <div key={item.id} className="rounded-xl bg-muted/45 p-3 text-sm">
-                <p className="font-medium">{item.name}</p>
-                <p className="mt-1 text-xs text-muted-foreground">
-                  {item.reference.label} · {t(`projectsStatus_${item.status}`)}
-                </p>
-              </div>
-            ))}
-          </div>
-        ) : (
-          <>
-            <ProjectEmptyState>
-              {t(
-                shouldOfferObservationSetup
-                  ? "projectsWorkNeedsSetup"
-                  : hasProjectSessions
-                    ? "projectsWorkNoReports"
-                    : "projectsWorkNoSessions",
-              )}
-            </ProjectEmptyState>
-            {!shouldOfferObservationSetup ? (
-              <Button size="sm" variant="outline" onClick={onStartProjectWork}>
-                {t("projectsStartProjectWork")}
-              </Button>
-            ) : null}
-          </>
-        )}
-      </ProjectSection>
-      <ProjectSection title={t("projectsArtifacts")}>
-        {recentArtifacts.length ? (
-          <div className="space-y-2">
-            {recentArtifacts.map((artifact) => (
-              <ProjectFilePreviewButton
-                key={artifact.id}
-                available={artifact.exists}
-                path={artifact.path}
-                label={artifact.path}
-                onOpen={onOpenFile}
-                className="block w-full rounded-xl bg-muted/45 p-3 text-left text-sm transition-colors enabled:hover:bg-[var(--interaction-hover)] enabled:focus-visible:outline-none enabled:focus-visible:ring-1 enabled:focus-visible:ring-border"
-              >
-                <span className="block truncate font-medium">{artifact.path}</span>
-                <span className="mt-1 block text-xs text-muted-foreground">
-                  {artifact.categoryLabel}
-                  {artifact.fileUpdatedAt ? (
-                    <time dateTime={artifact.fileUpdatedAt} title={formatDateTime(artifact.fileUpdatedAt)}>
-                      {` · ${formatProjectRelativeTime(artifact.fileUpdatedAt)}`}
-                    </time>
-                  ) : null}
-                  {!artifact.exists ? ` · ${t("projectsUnavailable")}` : ""}
-                </span>
-              </ProjectFilePreviewButton>
-            ))}
-          </div>
-        ) : <ProjectEmptyState>{t("projectsNoArtifacts")}</ProjectEmptyState>}
-      </ProjectSection>
-      <ProjectSection title={t("projectsActivity")}>
-        {recentActivity.length ? (
-          <div className="space-y-3">
-            {recentActivity.map((activity) => (
-              <div key={activity.id} className="text-sm">
-                <p>{activity.message}</p>
-                <p className="mt-1 text-xs text-muted-foreground">
-                  {activity.reference.sessionId ? (
-                    <Link className="underline underline-offset-2" to={`/chat/${encodeURIComponent(activity.reference.sessionId)}`}>
-                      {activity.reference.label}
-                    </Link>
-                  ) : activity.reference.label} · <time dateTime={activity.at} title={formatDateTime(activity.at)}>
-                    {formatProjectRelativeTime(activity.at)}
-                  </time>
-                </p>
-              </div>
-            ))}
+            <div className="text-2xl font-semibold">{value}</div>
+            <div className="mt-1 text-xs text-muted-foreground">{t(label)}</div>
           </div>
-        ) : <ProjectEmptyState>{t("projectsNoActivity")}</ProjectEmptyState>}
-      </ProjectSection>
+        ))}
+      </section>
+      <section>
+        <h2 className="mb-3 text-sm font-semibold">
+          {t("projectsWorkRecentlyUpdated")}
+        </h2>
+        <div className="space-y-2">
+          {recent.map((item) => (
+            <button
+              key={item.id}
+              type="button"
+              className="flex w-full items-center justify-between gap-3 rounded-xl border border-border/60 bg-card px-4 py-3 text-left hover:bg-[var(--interaction-hover)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+              onClick={() => onOpenWorkItem(item.id)}
+            >
+              <span className="min-w-0 truncate text-sm font-medium">
+                {item.title}
+              </span>
+              <span className="shrink-0 text-xs text-muted-foreground">
+                {item.state.name}
+              </span>
+            </button>
+          ))}
+          {!recent.length ? (
+            <div className="rounded-xl border border-dashed border-border/60 p-8 text-center text-sm text-muted-foreground">
+              {t("projectsWorkEmpty")}
+            </div>
+          ) : null}
+        </div>
+      </section>
     </div>
   );
 }

package/src/features/projects/components/work/project-work-item-drawer.test.tsx

@@ -0,0 +1,65 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { ProjectWorkItemDrawer } from "./project-work-item-drawer";
+
+const mocks = vi.hoisted(() => ({
+  updateItem: vi.fn(),
+  useProjectWorkItem: vi.fn(),
+}));
+
+vi.mock("@/features/projects/hooks/use-project-work", () => ({
+  useProjectWork: () => ({
+    data: { states: [{ id: "planned", name: "Planned" }] },
+  }),
+  useProjectWorkItem: mocks.useProjectWorkItem,
+  useProjectWorkActivity: () => ({ data: { activities: [] } }),
+  useProjectWorkActions: () => ({
+    updateItem: { mutateAsync: mocks.updateItem, isPending: false },
+    deleteItem: { mutateAsync: vi.fn() },
+    restoreItem: { mutateAsync: vi.fn() },
+    linkArtifact: { mutateAsync: vi.fn(), isPending: false },
+    unlinkArtifact: { mutateAsync: vi.fn() },
+  }),
+}));
+
+describe("ProjectWorkItemDrawer", () => {
+  it("renders details in a right-side dialog and opens linked artifacts", () => {
+    mocks.useProjectWorkItem.mockReturnValue({
+      isLoading: false,
+      isError: false,
+      data: {
+        id: "work-1",
+        projectId: "project-1",
+        title: "Drawer details",
+        description: "Durable details",
+        stateId: "planned",
+        state: { id: "planned", name: "Planned" },
+        attention: "none",
+        version: 1,
+        deletedAt: null,
+        artifacts: [
+          { id: "artifact-1", path: "docs/design.md", label: "Design" },
+        ],
+      },
+    });
+    const onOpenArtifact = vi.fn();
+
+    render(
+      <ProjectWorkItemDrawer
+        projectId="project-1"
+        projectRoot="/tmp/project"
+        workItemId="work-1"
+        onOpenChange={vi.fn()}
+        onOpenArtifact={onOpenArtifact}
+      />,
+    );
+
+    expect(screen.getByRole("dialog")).toBeTruthy();
+    expect(screen.getByDisplayValue("Drawer details")).toBeTruthy();
+    fireEvent.click(screen.getByRole("button", { name: /Design/ }));
+    expect(onOpenArtifact).toHaveBeenCalledWith(
+      "/tmp/project/docs/design.md",
+      "Design",
+    );
+  });
+});