@nextclaw/ui 0.26.5 → 0.27.1

package/src/features/apps/components/__tests__/app-packages-panel.test.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { act, render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import type { AppPackageOperationView } from "@nextclaw/client-sdk";
@@ -303,8 +304,7 @@ vi.mock("@/features/panel-apps/hooks/use-panel-apps", () => ({
   useRecordPanelAppOpened: () => ({ mutateAsync: mocks.recordOpened }),
 }));
 
-describe("AppPackagesPanel", () => {
-  beforeEach(() => {
+beforeEach(() => {
     mocks.appDataError = false;
     mocks.enabled = false;
     mocks.includePackageStorageUsage = true;
@@ -331,14 +331,20 @@ describe("AppPackagesPanel", () => {
     mocks.requestAuthorization.mockResolvedValue(true);
   });
 
+function PackagePanelHarness() {
+  const [marketplaceActive, setMarketplaceActive] = useState(false);
+  return <AppPackagesPanel onOpenPanelApp={mocks.onOpen} marketplaceActive={marketplaceActive} onBrowseMarketplace={() => setMarketplaceActive(true)} onManagePackage={() => setMarketplaceActive(false)} />;
+}
+
+describe("AppPackagesPanel", () => {
   it("shows a built-in package and enables it from the primary action", async () => {
     const user = userEvent.setup();
 
-    render(<AppPackagesPanel onOpenPanelApp={mocks.onOpen} />);
+    render(<PackagePanelHarness />);
 
-    expect(screen.getByText("Personal Space")).toBeTruthy();
+    expect(screen.getAllByText("Personal Space")[0]).toBeTruthy();
     expect(screen.getByText("Available")).toBeTruthy();
-    expect(screen.getByText("Local data service")).toBeTruthy();
+    expect(screen.queryByText("Local data service")).toBeNull();
 
     await user.click(screen.getByRole("button", { name: "Enable" }));
 
@@ -360,8 +366,9 @@ describe("AppPackagesPanel", () => {
       },
     ];
     const user = userEvent.setup();
-    render(<AppPackagesPanel onOpenPanelApp={mocks.onOpen} />);
+    render(<PackagePanelHarness />);
 
+    await user.click(screen.getByRole("button", { name: "Personal Space" }));
     await user.selectOptions(
       screen.getByLabelText("Access mode"),
       "read-write",
@@ -383,7 +390,7 @@ describe("AppPackagesPanel", () => {
   it("explains missing external setup and does not offer an unusable enable action", () => {
     mocks.readinessStatus = "needs-configuration";
 
-    render(<AppPackagesPanel onOpenPanelApp={mocks.onOpen} />);
+    render(<PackagePanelHarness />);
 
     expect(screen.getByText("Needs setup")).toBeTruthy();
     expect(screen.getByText(/Shared workspace connection/)).toBeTruthy();
@@ -397,6 +404,8 @@ describe("AppPackagesPanel", () => {
   it("scrolls and transfers focus to a package selected from Service Apps", async () => {
     render(
       <AppPackagesPanel
+        onBrowseMarketplace={vi.fn()}
+        onManagePackage={vi.fn()}
         focusedPackageId="nextclaw.personal-organizer"
         onOpenPanelApp={mocks.onOpen}
       />,
@@ -407,13 +416,16 @@ describe("AppPackagesPanel", () => {
     expect(packageCard.className).toContain("ring-2");
   });
 
-  it("distinguishes an untouched app from an App Data query failure", () => {
+  it("distinguishes an untouched app from an App Data query failure in details", async () => {
+    const user = userEvent.setup();
     mocks.includePackageStorageUsage = false;
-    const view = render(<AppPackagesPanel onOpenPanelApp={mocks.onOpen} />);
+    const view = render(<PackagePanelHarness />);
+    expect(screen.queryByTitle("/tmp/data")).toBeNull();
+    await user.click(screen.getByRole("button", { name: "Personal Space" }));
     expect(screen.getByTitle("/tmp/data").textContent).toContain("No data yet");
 
     mocks.appDataError = true;
-    view.rerender(<AppPackagesPanel onOpenPanelApp={mocks.onOpen} />);
+    view.rerender(<PackagePanelHarness />);
 
     expect(screen.getByTitle("/tmp/data").textContent).toContain(
       "Size unavailable",
@@ -430,27 +442,62 @@ describe("AppPackagesPanel", () => {
     };
     mocks.recordOpened.mockResolvedValue(openedEntry);
 
-    render(<AppPackagesPanel onOpenPanelApp={mocks.onOpen} />);
+    render(<PackagePanelHarness />);
 
-    await user.click(screen.getByRole("button", { name: /Todos/ }));
+    await user.click(screen.getByRole("button", { name: "Open" }));
 
     expect(mocks.recordOpened).toHaveBeenCalledWith("todos");
     expect(mocks.onOpen).toHaveBeenCalledWith(openedEntry);
   });
 
+  it("opens details on demand, restores focus, and keeps disable in the menu", async () => {
+    const user = userEvent.setup();
+    mocks.enabled = true;
+    render(<PackagePanelHarness />);
+    const title = screen.getByRole("button", { name: "Personal Space" });
+    expect(screen.queryByText("Local data service")).toBeNull();
+    expect(screen.queryByRole("button", { name: "Disable" })).toBeNull();
+    await user.click(title);
+    expect(screen.getByRole("dialog")).toBeTruthy();
+    expect(screen.getByText("Local data service")).toBeTruthy();
+    await user.click(screen.getByRole("button", { name: "Close" }));
+    await waitFor(() => expect(document.activeElement).toBe(title));
+    await user.click(screen.getByRole("button", { name: "More app actions" }));
+    await user.click(screen.getByRole("menuitem", { name: "Disable" }));
+    expect(mocks.lifecycleMutate).toHaveBeenCalledWith(
+      { action: "disable", appId: "nextclaw.personal-organizer" },
+      { onSuccess: undefined },
+    );
+  });
+
+  it("offers source installation from the same add menu", async () => {
+    const user = userEvent.setup();
+    render(<PackagePanelHarness />);
+    await user.click(screen.getByRole("button", { name: "Add apps" }));
+    await user.click(screen.getByRole("button", { name: "Install from a source" }));
+    await user.type(screen.getByRole("textbox", { name: "Install source" }), "/tmp/example.napp");
+    await user.click(screen.getByRole("button", { name: "Install app" }));
+    expect(mocks.lifecycleMutate).toHaveBeenCalledWith(
+      { action: "install", source: "/tmp/example.napp" },
+      { onSuccess: expect.any(Function) },
+    );
+    await user.click(screen.getByRole("button", { name: "Cancel" }));
+    await waitFor(() => expect(document.activeElement).toBe(screen.getByRole("button", { name: "Install from a source" })));
+  });
+
   it("discovers marketplace apps and installs one through its registry spec", async () => {
     const user = userEvent.setup();
 
-    render(<AppPackagesPanel onOpenPanelApp={mocks.onOpen} />);
+    render(<PackagePanelHarness />);
 
     await user.click(screen.getByRole("button", { name: "Add apps" }));
 
-    expect(screen.getByRole("heading", { name: "Add apps" })).toBeTruthy();
+    expect(screen.getByRole("heading", { name: "App marketplace" })).toBeTruthy();
     expect(screen.getByText("Workspace Glance")).toBeTruthy();
     expect(
-      (screen.getByRole("button", { name: "Installed" }) as HTMLButtonElement)
+      (screen.getByRole("button", { name: "View installed" }) as HTMLButtonElement)
         .disabled,
-    ).toBe(true);
+    ).toBe(false);
 
     const installButtons = screen.getAllByRole("button", {
       name: "Install app",
@@ -467,13 +514,14 @@ describe("AppPackagesPanel", () => {
     );
   });
 
+
   it("allows a built-in app to be uninstalled while keeping its data by default", async () => {
     const user = userEvent.setup();
 
-    render(<AppPackagesPanel onOpenPanelApp={mocks.onOpen} />);
+    render(<PackagePanelHarness />);
 
     await user.click(screen.getByRole("button", { name: "More app actions" }));
-    await user.click(screen.getByRole("button", { name: "Uninstall" }));
+    await user.click(screen.getByRole("menuitem", { name: "Uninstall" }));
     expect(
       screen.getByRole("heading", { name: "Uninstall this app?" }),
     ).toBeTruthy();
@@ -525,7 +573,7 @@ describe("AppPackagesPanel", () => {
         actions: { deleteRetainedData: true },
       },
     ];
-    const view = render(<AppPackagesPanel onOpenPanelApp={mocks.onOpen} />);
+    const view = render(<PackagePanelHarness />);
 
     expect(
       screen.getByRole("heading", { name: "Saved app data" }),
@@ -547,7 +595,7 @@ describe("AppPackagesPanel", () => {
     const onSuccess = mocks.deleteRetained.mock.calls[0]?.[1]
       .onSuccess as () => void;
     mocks.retainedEntries = [];
-    view.rerender(<AppPackagesPanel onOpenPanelApp={mocks.onOpen} />);
+    view.rerender(<PackagePanelHarness />);
     await act(async () => onSuccess());
     await waitFor(() => {
       expect(document.activeElement).toBe(
@@ -572,14 +620,14 @@ describe("AppPackagesPanel", () => {
       },
     ];
 
-    render(<AppPackagesPanel onOpenPanelApp={mocks.onOpen} />);
+    render(<PackagePanelHarness />);
 
     expect(screen.getByRole("status").textContent).toContain("Downloading");
     expect(screen.getByText("nextclaw.workspace-glance")).toBeTruthy();
 
     await user.click(screen.getByRole("button", { name: "Add apps" }));
 
-    expect(screen.getByRole("heading", { name: "Add apps" })).toBeTruthy();
+    expect(screen.getByRole("heading", { name: "App marketplace" })).toBeTruthy();
     expect(screen.getAllByText("Downloading")).not.toHaveLength(0);
     expect(
       (screen.getByRole("button", { name: "Downloading" }) as HTMLButtonElement)
@@ -614,9 +662,32 @@ describe("AppPackagesPanel", () => {
       },
     ];
 
-    render(<AppPackagesPanel onOpenPanelApp={mocks.onOpen} />);
+    render(<PackagePanelHarness />);
 
     expect(screen.queryByRole("alert")).toBeNull();
     expect(screen.queryByText("name 必须是非空字符串。")).toBeNull();
   });
 });
+
+
+describe("App marketplace navigation", () => {
+  it("retains the catalog DOM and search when returning from details", async () => {
+    const user = userEvent.setup();
+    render(<PackagePanelHarness />);
+    await user.click(screen.getByRole("button", { name: "Add apps" }));
+    const search = screen.getByRole("textbox", { name: "Search apps, features, or tags" });
+    await user.type(search, "workspace");
+    const card = screen.getByRole("button", { name: /Workspace Glance A local/ });
+    await user.click(card);
+    expect(screen.queryByRole("textbox", { name: "Search apps, features, or tags" })).toBeNull();
+    await user.click(screen.getByRole("button", { name: "Back to marketplace" }));
+    expect(screen.getByRole("textbox", { name: "Search apps, features, or tags" })).toBe(search);
+    expect((search as HTMLInputElement).value).toBe("workspace");
+    await waitFor(() => expect(document.activeElement).toBe(card));
+    await user.click(screen.getByRole("button", { name: "View installed" }));
+    expect(screen.getByRole("heading", { name: "Your apps" })).toBeTruthy();
+    await user.click(screen.getByRole("button", { name: "Add apps" }));
+    expect(screen.getByRole("textbox", { name: "Search apps, features, or tags" })).toBe(search);
+  });
+
+});

package/src/features/apps/components/__tests__/apps-panel.test.tsx

@@ -40,12 +40,14 @@ describe('AppsPanel', () => {
     render(<AppsPanelHarness />);
 
     const navigation = screen.getByRole('tablist');
-    expect(navigation.className).toContain('w-full');
-    expect(navigation.className).toContain('max-w-[390px]');
+    expect(navigation.className).toContain('w-max');
 
     await user.click(screen.getByRole('tab', { name: 'panelAppsTitle' }));
     expect(screen.getByText('panel-apps-content')).toBeTruthy();
     expect(screen.getByRole('tablist')).toBe(navigation);
+    await user.click(screen.getByRole('tab', { name: 'appPackagesMarketplaceTitle' }));
+    expect(screen.getByRole('tab', { name: 'appPackagesMarketplaceTitle' }).getAttribute('aria-selected')).toBe('true');
+    expect(screen.getByRole('tablist')).toBe(navigation);
 
     await user.click(screen.getByRole('tab', { name: 'serviceAppsTitle' }));
     expect(screen.getByText('service-apps-content')).toBeTruthy();
@@ -56,7 +58,7 @@ describe('AppsPanel', () => {
     const user = userEvent.setup();
     render(<AppsPanelHarness />);
 
-    const firstTab = screen.getByRole('tab', { name: 'appsTitle' });
+    const firstTab = screen.getByRole('tab', { name: 'appPackagesLibraryTitle' });
     firstTab.focus();
     await user.keyboard('{ArrowRight}');
 

package/src/features/apps/components/app-document-access-section.tsx

@@ -1,9 +1,10 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
 import type { AppPackageView } from "@nextclaw/client-sdk";
 import { FolderKey, ShieldCheck, Trash2 } from "lucide-react";
 import { useAppDocumentAccessMutation } from "@/features/apps/hooks/use-app-packages";
 import { ServerPathPickerDialog } from "@/shared/components/path-picker/server-path-picker-dialog";
 import { Button } from "@/shared/components/ui/button";
+import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
 import { t } from "@/shared/lib/i18n";
 
 type DocumentScope = AppPackageView["documentAccess"][number];
@@ -20,6 +21,7 @@ export function AppDocumentAccessSection({
   scopes: DocumentScope[];
 }) {
   const mutation = useAppDocumentAccessMutation();
+  const pickerTriggerRef = useRef<HTMLButtonElement | null>(null);
   const [activeScopeId, setActiveScopeId] = useState<string | null>(null);
   const [modes, setModes] = useState<Record<string, "read" | "read-write">>({});
   const activeScope = scopes.find((scope) => scope.id === activeScopeId);
@@ -32,7 +34,7 @@ export function AppDocumentAccessSection({
   const error = mutation.error instanceof Error ? mutation.error.message : null;
 
   return (
-    <section className="border-t border-border/60 bg-muted/10 px-4 py-3">
+    <section className="[container-type:inline-size] border-t border-border/60 pt-4">
       <div className="mb-2 flex items-center gap-2">
         <FolderKey className="h-3.5 w-3.5 text-muted-foreground" />
         <h3 className="text-xs font-semibold text-foreground">
@@ -45,9 +47,9 @@ export function AppDocumentAccessSection({
           return (
             <div
               key={scope.id}
-              className="rounded-lg border border-border/60 bg-card px-3 py-2.5"
+              className="rounded-lg bg-muted/30 px-3 py-3"
             >
-              <div className="flex flex-wrap items-start justify-between gap-2">
+              <div className="flex flex-col items-stretch gap-3 [@container(min-width:26rem)]:flex-row [@container(min-width:26rem)]:items-start">
                 <div className="min-w-0 flex-1">
                   <div className="flex items-center gap-1.5 text-xs font-medium text-foreground">
                     <ShieldCheck className="h-3.5 w-3.5 text-muted-foreground" />
@@ -76,7 +78,7 @@ export function AppDocumentAccessSection({
                     </code>
                   ) : null}
                 </div>
-                <div className="flex shrink-0 items-center gap-1.5">
+                <div className="flex shrink-0 items-center justify-end gap-1.5">
                   <label
                     className="sr-only"
                     htmlFor={`${appId}-${scope.id}-mode`}
@@ -109,7 +111,8 @@ export function AppDocumentAccessSection({
                     size="sm"
                     variant="outline"
                     disabled={disabled || mutation.isPending}
-                    onClick={() => {
+                    onClick={(event) => {
+                      pickerTriggerRef.current = event.currentTarget;
                       mutation.reset();
                       setActiveScopeId(scope.id);
                     }}
@@ -119,10 +122,9 @@ export function AppDocumentAccessSection({
                       : t("appPackagesDocumentAccessChoose")}
                   </Button>
                   {scope.granted ? (
-                    <button
-                      type="button"
-                      aria-label={t("appPackagesDocumentAccessRevoke")}
-                      title={t("appPackagesDocumentAccessRevoke")}
+                    <IconActionButton
+                      label={t("appPackagesDocumentAccessRevoke")}
+                      icon={<Trash2 className="h-3.5 w-3.5" />}
                       disabled={disabled || mutation.isPending}
                       onClick={() =>
                         mutation.mutate({
@@ -131,10 +133,7 @@ export function AppDocumentAccessSection({
                           scopeId: scope.id,
                         })
                       }
-                      className="rounded-md p-2 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50"
-                    >
-                      <Trash2 className="h-3.5 w-3.5" />
-                    </button>
+                    />
                   ) : null}
                 </div>
               </div>
@@ -148,6 +147,10 @@ export function AppDocumentAccessSection({
         </p>
       ) : null}
       <ServerPathPickerDialog
+        onCloseAutoFocus={(event) => {
+          event.preventDefault();
+          pickerTriggerRef.current?.focus();
+        }}
         open={Boolean(activeScope)}
         currentPath={activeScope?.grantedPath}
         isSaving={mutation.isPending}