@nextclaw/ui 0.24.1 → 0.24.3

package/src/features/panel-apps/providers/panel-app-host.provider.tsx

@@ -0,0 +1,45 @@
+import {
+  createContext,
+  useContext,
+  useMemo,
+  type Context,
+  type ReactNode,
+} from "react";
+import { PanelAppHostPresenter } from "@/features/panel-apps/presenters/panel-app-host.presenter";
+
+type PanelAppHostContextGlobal = typeof globalThis & {
+  __NEXTCLAW_PANEL_APP_HOST_CONTEXT__?: Context<PanelAppHostPresenter | null>;
+};
+
+const contextGlobal = globalThis as PanelAppHostContextGlobal;
+const PanelAppHostContext =
+  contextGlobal.__NEXTCLAW_PANEL_APP_HOST_CONTEXT__ ??
+  createContext<PanelAppHostPresenter | null>(null);
+
+contextGlobal.__NEXTCLAW_PANEL_APP_HOST_CONTEXT__ = PanelAppHostContext;
+
+export function PanelAppHostProvider({
+  children,
+  presenter: providedPresenter,
+}: {
+  children: ReactNode;
+  presenter?: PanelAppHostPresenter;
+}) {
+  const presenter = useMemo(
+    () => providedPresenter ?? new PanelAppHostPresenter(),
+    [providedPresenter],
+  );
+  return (
+    <PanelAppHostContext.Provider value={presenter}>
+      {children}
+    </PanelAppHostContext.Provider>
+  );
+}
+
+export function usePanelAppHostPresenter(): PanelAppHostPresenter {
+  const presenter = useContext(PanelAppHostContext);
+  if (!presenter) {
+    throw new Error("usePanelAppHostPresenter must be used inside PanelAppHostProvider");
+  }
+  return presenter;
+}

package/src/features/panel-apps/routes/__tests__/panel-app-standalone.route.test.tsx

@@ -0,0 +1,50 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import {
+  PanelAppStandaloneRoute,
+  readStandalonePanelAppId,
+} from '@/features/panel-apps/routes/panel-app-standalone.route';
+
+vi.mock('sonner', () => ({
+  Toaster: () => <div data-testid="toaster" />,
+}));
+
+vi.mock('@/shared/hooks/use-auth-status', () => ({
+  isTransientAuthStatusBootstrapError: () => false,
+  useAuthStatus: () => ({
+    data: { authenticated: true, enabled: false },
+    isError: false,
+    isLoading: false,
+  }),
+}));
+
+vi.mock('@/features/panel-apps/pages/panel-app-standalone-page', () => ({
+  PanelAppStandalonePage: ({ appId }: { appId: string }) => (
+    <main data-testid="standalone-panel-app" data-app-id={appId} />
+  ),
+}));
+
+vi.mock('@/features/panel-apps/providers/panel-app-host.provider', () => ({
+  PanelAppHostProvider: ({ children }: { children: React.ReactNode }) => children,
+}));
+
+vi.mock('@/features/panel-apps/components/panel-app-service-action-authorization-dialog', () => ({
+  PanelAppServiceActionAuthorizationDialog: () => <div data-testid="authorization-dialog" />,
+}));
+
+describe('PanelAppStandaloneRoute', () => {
+  it('parses only the dedicated standalone route', () => {
+    expect(readStandalonePanelAppId('/apps/panel/publisher.todo/standalone')).toBe('publisher.todo');
+    expect(readStandalonePanelAppId('/apps/panel/a%20b/standalone/')).toBe('a b');
+    expect(readStandalonePanelAppId('/apps/panel/publisher.todo')).toBeNull();
+  });
+
+  it('renders the lightweight Panel host for the requested app', () => {
+    render(<PanelAppStandaloneRoute pathname="/apps/panel/publisher.todo/standalone" />);
+
+    expect(screen.getByTestId('standalone-panel-app').getAttribute('data-app-id'))
+      .toBe('publisher.todo');
+    expect(screen.getByTestId('authorization-dialog')).toBeTruthy();
+    expect(screen.getByTestId('toaster')).toBeTruthy();
+  });
+});

package/src/features/panel-apps/routes/panel-app-standalone.route.tsx

@@ -0,0 +1,94 @@
+import { lazy, StrictMode, Suspense } from 'react';
+import { createRoot } from 'react-dom/client';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { Toaster } from 'sonner';
+import { appQueryClient } from '@/app-query-client';
+import { I18nProvider } from '@/app/components/i18n-provider';
+import { ThemeProvider } from '@/app/components/theme-provider';
+import { PanelAppStandalonePage } from '@/features/panel-apps/pages/panel-app-standalone-page';
+import { PanelAppHostProvider } from '@/features/panel-apps/providers/panel-app-host.provider';
+import { PanelAppServiceActionAuthorizationDialog } from '@/features/panel-apps/components/panel-app-service-action-authorization-dialog';
+import { installPanelAppI18nCatalog, t } from '@/shared/lib/i18n';
+import { isTransientAuthStatusBootstrapError, useAuthStatus } from '@/shared/hooks/use-auth-status';
+import '@/app/styles/panel-app-standalone.css';
+
+const LoginPage = lazy(async () => ({
+  default: (await import('@/features/account/components/login-page')).LoginPage,
+}));
+
+const PANEL_APP_STANDALONE_PATH = /^\/apps\/panel\/([^/]+)\/standalone\/?$/;
+
+export function readStandalonePanelAppId(pathname: string): string | null {
+  const match = PANEL_APP_STANDALONE_PATH.exec(pathname);
+  if (!match) return null;
+  try {
+    return decodeURIComponent(match[1]);
+  } catch {
+    return null;
+  }
+}
+
+function StandaloneAuthGate({ appId }: { appId: string }) {
+  const authStatus = useAuthStatus();
+  const isTransientBootstrapFailure =
+    authStatus.isError && isTransientAuthStatusBootstrapError(authStatus.error);
+
+  if (
+    (authStatus.isLoading && !authStatus.isError) ||
+    isTransientBootstrapFailure ||
+    authStatus.isError
+  ) {
+    return <PanelAppStandalonePage appId={appId} />;
+  }
+
+  if (authStatus.data?.enabled && !authStatus.data.authenticated) {
+    return (
+      <Suspense fallback={<StandaloneStatus message={t('loading')} />}>
+        <LoginPage username={authStatus.data.username} />
+      </Suspense>
+    );
+  }
+
+  return <PanelAppStandalonePage appId={appId} />;
+}
+
+function StandaloneStatus({ message }: { message: string }) {
+  return (
+    <main className="flex h-dvh items-center justify-center bg-background px-6 text-sm text-muted-foreground">
+      {message}
+    </main>
+  );
+}
+
+export function PanelAppStandaloneRoute({ pathname = window.location.pathname }: { pathname?: string }) {
+  const appId = readStandalonePanelAppId(pathname);
+
+  if (!appId) {
+    return <StandaloneStatus message={t('panelAppsMainUnavailable')} />;
+  }
+
+  return (
+    <QueryClientProvider client={appQueryClient}>
+      <PanelAppHostProvider>
+        <StandaloneAuthGate appId={appId} />
+        <PanelAppServiceActionAuthorizationDialog />
+        <Toaster position="top-right" richColors offset={16} />
+      </PanelAppHostProvider>
+    </QueryClientProvider>
+  );
+}
+
+await installPanelAppI18nCatalog();
+
+const rootElement = document.getElementById('root');
+if (rootElement) {
+  createRoot(rootElement).render(
+    <StrictMode>
+      <ThemeProvider>
+        <I18nProvider>
+          <PanelAppStandaloneRoute />
+        </I18nProvider>
+      </ThemeProvider>
+    </StrictMode>,
+  );
+}

package/src/features/{service-apps/stores/service-action-authorization.store.ts → panel-apps/stores/panel-app-service-action-authorization.store.ts}

@@ -3,28 +3,28 @@ import type { ServiceActionListView } from '@nextclaw/client-sdk';
 
 type ServiceActionRisk = ServiceActionListView['actions'][number]['risk'];
 
-export type ServiceActionAuthorizationItem = {
+export type PanelAppServiceActionAuthorizationItem = {
   actionId: string;
   actionTitle?: string;
   actionDescription?: string;
   risk?: ServiceActionRisk;
 };
 
-export type ServiceActionAuthorizationRequest = {
+export type PanelAppServiceActionAuthorizationRequest = {
   id: string;
   panelAppId: string;
-  actions: ServiceActionAuthorizationItem[];
+  actions: PanelAppServiceActionAuthorizationItem[];
   inputPreview?: string;
 };
 
-type PendingAuthorization = ServiceActionAuthorizationRequest & {
+type PendingAuthorization = PanelAppServiceActionAuthorizationRequest & {
   resolve: (allowed: boolean) => void;
 };
 
 type ServiceActionAuthorizationState = {
   pending: PendingAuthorization | null;
   requestAuthorization: (
-    request: Omit<ServiceActionAuthorizationRequest, 'id'>,
+    request: Omit<PanelAppServiceActionAuthorizationRequest, 'id'>,
   ) => Promise<boolean>;
   resolveAuthorization: (allowed: boolean) => void;
 };
@@ -33,7 +33,7 @@ function createAuthorizationId(): string {
   return `service-action-auth-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
 }
 
-export const useServiceActionAuthorizationStore = create<ServiceActionAuthorizationState>((set, get) => ({
+export const usePanelAppServiceActionAuthorizationStore = create<ServiceActionAuthorizationState>((set, get) => ({
   pending: null,
   requestAuthorization: async (request) =>
     await new Promise<boolean>((resolve) => {

package/src/features/projects/AGENTS.md

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

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

@@ -1,4 +1,4 @@
-import type { ProjectObservationSnapshot } from "@nextclaw/client-sdk";
+import type { ProjectAgreementMaterial } from "@nextclaw/client-sdk";
 import { t } from "@/shared/lib/i18n";
 import {
   ProjectEmptyState,
@@ -7,86 +7,45 @@ import {
 } from "./project-section";
 
 export function ProjectAgreement({
-  snapshot,
+  agreement,
+  isLoading,
+  isError,
   onOpenFile,
 }: {
-  snapshot: ProjectObservationSnapshot;
+  agreement?: ProjectAgreementMaterial;
+  isLoading: boolean;
+  isError: boolean;
   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>
+    <ProjectSection title={t("projectsAgreementFile")}>
+      <p className="mb-4 text-sm text-muted-foreground">
+        {t("projectsAgreementDescription")}
+      </p>
+      {isLoading ? (
+        <p className="py-5 text-sm text-muted-foreground">
+          {t("projectsLoading")}
+        </p>
+      ) : isError ? (
+        <p className="py-5 text-sm text-destructive">
+          {t("projectsLoadFailed")}
+        </p>
+      ) : agreement?.available ? (
+        <ProjectFilePreviewButton
+          available
+          path={agreement.path}
+          label={agreement.path}
+          onOpen={onOpenFile}
+          className="block w-full rounded-xl bg-muted/45 p-3 text-left 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 text-sm font-medium">{agreement.path}</span>
+          <span className="mt-1 block text-xs text-muted-foreground">
+            {t("projectsAgreementOpen")}
+          </span>
+        </ProjectFilePreviewButton>
+      ) : (
+        <ProjectEmptyState>{t("projectsNoAgreement")}</ProjectEmptyState>
+      )}
+    </ProjectSection>
   );
 }

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

@@ -1,77 +1,105 @@
 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 useProjectArtifacts = vi.fn();
 
-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",
-};
+vi.mock(
+  "@/features/projects/hooks/use-project-work",
+  async (importOriginal) => ({
+    ...(await importOriginal()),
+    useProjectArtifacts: (...args: unknown[]) => useProjectArtifacts(...args),
+  }),
+);
 
 describe("ProjectArtifacts", () => {
-  it("groups in configuration order, expands incrementally, filters, and opens the selected file", () => {
+  it("loads linked artifacts, searches through the owner, and opens available files", () => {
+    useProjectArtifacts.mockReturnValue({
+      data: {
+        pages: [
+          {
+            artifacts: [
+              {
+                id: "artifact-1",
+                path: "docs/design.md",
+                label: "Design",
+                workItemTitle: "Current work",
+                createdAt: "2026-09-03T00:00:00.000Z",
+                exists: true,
+              },
+            ],
+            total: 1,
+            nextCursor: null,
+          },
+        ],
+      },
+      isLoading: false,
+      isError: false,
+      hasNextPage: false,
+    });
     const onOpenFile = vi.fn();
-    render(<ProjectArtifacts snapshot={snapshot} onOpenFile={onOpenFile} />);
+    render(<ProjectArtifacts projectId="project-1" onOpenFile={onOpenFile} />);
+
+    fireEvent.click(screen.getByRole("button", { name: /Design/ }));
+    expect(onOpenFile).toHaveBeenCalledWith("docs/design.md", "Design");
+
+    fireEvent.change(screen.getByPlaceholderText(/Search artifacts|搜索产物/), {
+      target: { value: "report" },
+    });
+    expect(useProjectArtifacts).toHaveBeenLastCalledWith("project-1", {
+      limit: 20,
+      query: "report",
+    });
+  });
 
-    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();
+  it("explains that artifacts come from work-item links", () => {
+    useProjectArtifacts.mockReturnValue({
+      data: { pages: [{ artifacts: [], total: 0, nextCursor: null }] },
+      isLoading: false,
+      isError: false,
+      hasNextPage: false,
+    });
 
-    fireEvent.click(screen.getByRole("button", { name: /Show more \(1\)/ }));
-    expect(screen.getByTitle("docs/designs/1.md")).toBeTruthy();
+    render(<ProjectArtifacts projectId="project-1" onOpenFile={vi.fn()} />);
 
-    fireEvent.change(screen.getByPlaceholderText("Search artifacts"), {
-      target: { value: "delivery" },
+    expect(
+      screen.getByText(/Link a file from a work item|从工作项关联文件/),
+    ).toBeTruthy();
+  });
+
+  it("keeps missing links visible and loads the next page explicitly", () => {
+    const fetchNextPage = vi.fn();
+    useProjectArtifacts.mockReturnValue({
+      data: {
+        pages: [
+          {
+            artifacts: [
+              {
+                id: "artifact-missing",
+                path: "docs/missing.md",
+                label: null,
+                workItemTitle: "Archived work",
+                createdAt: "2026-09-03T00:00:00.000Z",
+                exists: false,
+              },
+            ],
+            total: 21,
+            nextCursor: "next",
+          },
+        ],
+      },
+      isLoading: false,
+      isError: false,
+      hasNextPage: true,
+      isFetchingNextPage: false,
+      fetchNextPage,
     });
-    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();
+    render(<ProjectArtifacts projectId="project-1" onOpenFile={vi.fn()} />);
+
+    expect(screen.getByText(/Currently unavailable|暂不可用/)).toBeTruthy();
+    expect(screen.queryByRole("button", { name: /missing\.md/ })).toBeNull();
+    fireEvent.click(screen.getByRole("button", { name: /Show more|显示更多/ }));
+    expect(fetchNextPage).toHaveBeenCalledTimes(1);
   });
 });