@nextclaw/ui 0.26.5 → 0.27.0

package/index.html

@@ -17,7 +17,7 @@
     html,
     body,
     #root {
-      background: #ffffff;
+      background: #faf8f4;
     }
 
     html[data-theme="minimal"],
@@ -80,71 +80,20 @@
       background: #fefcf6;
     }
   </style>
-  <script>
-    (() => {
-      const storageKey = 'nextclaw.ui.theme';
-      const storedTheme = window.localStorage.getItem(storageKey);
-      const themeColors = {
-        natural: '#FAF9F7',
-        work: '#FFFFFF',
-        minimal: '#FFFFFF',
-        warm: '#FAF8F4',
-        cool: '#F8FAFC',
-        dawn: '#FAF7F4',
-        graphite: '#F8F8F7',
-        night: '#101318',
-        charcoal: '#1C1C1C',
-        island: '#FBF8ED',
-        probe: '#FEFCF6'
-      };
-      const themeAppearances = {
-        natural: 'light',
-        work: 'light',
-        minimal: 'light',
-        warm: 'light',
-        cool: 'light',
-        dawn: 'light',
-        graphite: 'light',
-        night: 'dark',
-        charcoal: 'dark',
-        island: 'light',
-        probe: 'light'
-      };
-      const legacyThemeAliases = {
-        leaf: 'warm'
-      };
-      const normalizedStoredTheme = typeof storedTheme === 'string' && Object.prototype.hasOwnProperty.call(legacyThemeAliases, storedTheme)
-        ? legacyThemeAliases[storedTheme]
-        : storedTheme;
-      const nextTheme = Object.prototype.hasOwnProperty.call(themeColors, normalizedStoredTheme)
-        ? normalizedStoredTheme
-        : 'work';
-      if (storedTheme !== nextTheme) {
-        window.localStorage.setItem(storageKey, nextTheme);
-      }
-      if (nextTheme === 'island') {
-        const islandBackgroundPreload = document.createElement('link');
-        islandBackgroundPreload.rel = 'preload';
-        islandBackgroundPreload.as = 'image';
-        islandBackgroundPreload.href = '/themes/island/island-atmosphere-7a037243.webp';
-        islandBackgroundPreload.fetchPriority = 'high';
-        document.head.appendChild(islandBackgroundPreload);
-      }
-      const themeColor = themeColors[nextTheme];
-      const themeAppearance = themeAppearances[nextTheme];
-      document.documentElement.setAttribute('data-theme', nextTheme);
-      document.documentElement.setAttribute('data-theme-appearance', themeAppearance);
-      document.documentElement.style.backgroundColor = themeColor;
-      document.documentElement.style.colorScheme = themeAppearance;
-      const themeMeta = document.querySelector('meta[name="theme-color"]');
-      if (themeMeta) {
-        themeMeta.setAttribute('content', themeColor);
-      }
-      const colorSchemeMeta = document.querySelector('meta[name="color-scheme"]');
-      if (colorSchemeMeta) {
-        colorSchemeMeta.setAttribute('content', themeAppearance);
-      }
-    })();
+  <script type="module">
+    import { initializeTheme, resolveTheme } from '/src/shared/lib/theme/index.ts';
+    import { pwaShellThemeManager } from '/src/features/pwa/managers/pwa-shell-theme.manager.ts';
+
+    const theme = initializeTheme();
+    pwaShellThemeManager.syncTheme(theme);
+    if (resolveTheme(theme) === 'island') {
+      const preload = document.createElement('link');
+      preload.rel = 'preload';
+      preload.as = 'image';
+      preload.href = '/themes/island/island-atmosphere-7a037243.webp';
+      preload.fetchPriority = 'high';
+      document.head.appendChild(preload);
+    }
   </script>
   <script>
     (() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextclaw/ui",
-  "version": "0.26.5",
+  "version": "0.27.0",
   "private": false,
   "type": "module",
   "license": "MIT",
@@ -34,11 +34,11 @@
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz",
     "zod": "^3.23.8",
     "zustand": "^5.0.2",
-    "@nextclaw/agent-chat": "0.3.14",
-    "@nextclaw/client-sdk": "0.12.9",
+    "@nextclaw/agent-chat-ui": "0.12.1",
+    "@nextclaw/client-sdk": "0.12.10",
     "@nextclaw/ncp": "0.11.2",
-    "@nextclaw/agent-chat-ui": "0.12.0",
     "@nextclaw/ncp-http-agent-client": "0.4.25",
+    "@nextclaw/agent-chat": "0.3.14",
     "@nextclaw/ncp-react": "0.5.30",
     "@nextclaw/ncp-toolkit": "0.6.27",
     "@nextclaw/shared": "0.8.2"

package/src/app/styles/design-system.css

@@ -65,6 +65,8 @@
 
       /* Foreground (Text) */
       --foreground: var(--gray-800);
+      --welcome-title-foreground: var(--foreground);
+      --welcome-title-weight: 600;
       --foreground-secondary: var(--gray-700);
       --foreground-tertiary: var(--gray-500);
       --foreground-muted: var(--gray-400);
@@ -94,6 +96,13 @@
       --sidebar-interaction-hover: hsl(var(--gray-200) / 0.6);
       --sidebar-interaction-selection: hsl(var(--gray-200) / 0.8);
       --sidebar-segment-selection: hsl(var(--gray-200) / 0.7);
+      --sidebar-create-background: hsl(var(--primary) / 0.1);
+      --sidebar-create-hover: hsl(var(--primary) / 0.15);
+      --sidebar-create-foreground: hsl(var(--primary));
+      --sidebar-create-hover-foreground: hsl(var(--accent-foreground));
+      --sidebar-create-radius: 0.5rem;
+      --sidebar-create-weight: 500;
+      --sidebar-create-shadow: none;
       /* Mobile conversation rows retain their separate paper surface. */
       --session-interaction-hover: hsl(var(--background) / 0.65);
       --session-interaction-selection: hsl(var(--background) / 0.9);
@@ -394,7 +403,9 @@
 }
 
 @layer base {
-   :root[data-theme="warm"] {
+   :root[data-theme="warm"],
+   :root[data-theme="plain-paper"],
+   :root[data-theme="paper-ink"] {
       /* ========================================
        BRAND COLORS (Paper Taupe)
        ======================================== */
@@ -466,6 +477,79 @@
 }
 
 @layer base {
+   :root[data-theme="paper-ink"] {
+      /* Warm paper and olive ink with restrained contrast. */
+      --brand-50: 70 15% 95%;
+      --brand-100: 75 13% 90%;
+      --brand-200: 85 12% 80%;
+      --brand-300: 100 10% 65%;
+      --brand-400: 88 13% 44%;
+      --brand-500: 86 14% 32%;
+      --brand-600: 86 15% 27%;
+      --brand-700: 86 15% 22%;
+      --brand-800: 86 13% 16%;
+      --brand-900: 86 11% 10%;
+      --primary-foreground: 42 35% 94%;
+      --welcome-title-foreground: 105 4% 32%;
+      --welcome-title-weight: 500;
+      --gray-700: 45 8% 27%;
+      --gray-800: 45 9% 18%;
+      --gray-900: 45 10% 11%;
+      --accent: 70 12% 90%;
+      --link-foreground: 86 16% 29%;
+      --link-foreground-hover: 86 16% 23%;
+      --sidebar-create-background: hsl(38 27% 90%);
+      --sidebar-create-hover: hsl(38 25% 87%);
+      --sidebar-create-foreground: hsl(var(--brand-500));
+      --sidebar-create-hover-foreground: hsl(var(--brand-600));
+      --sidebar-create-radius: 0.5rem;
+      --sidebar-create-weight: 400;
+      --sidebar-create-shadow: none;
+   }
+
+   :root[data-theme="paper-ink"] .nextclaw-chat-message-user {
+      background-color: hsl(var(--brand-500));
+      border-color: transparent;
+      color: hsl(var(--primary-foreground));
+   }
+
+   :root[data-theme="plain-paper"] {
+      /* Paper, tea-gray washes and soft graphite: one warm neutral family. */
+      --brand-50: 38 25% 95%;
+      --brand-100: 36 22% 91%;
+      --brand-200: 34 17% 83%;
+      --brand-300: 32 12% 70%;
+      --brand-400: 30 8% 51%;
+      --brand-500: 28 7% 35%;
+      --brand-600: 28 8% 29%;
+      --brand-700: 28 8% 24%;
+      --brand-800: 28 7% 18%;
+      --brand-900: 28 6% 12%;
+      --gray-700: 30 6% 28%;
+      --gray-800: 30 5% 22%;
+      --gray-900: 30 5% 14%;
+      --primary-foreground: 40 38% 97%;
+      --welcome-title-foreground: 30 5% 33%;
+      --welcome-title-weight: 500;
+      --accent: 36 20% 91%;
+      --border: 35 18% 86%;
+      --card-border: var(--border);
+      --input-border: var(--border);
+      --link-foreground: 28 18% 34%;
+      --link-foreground-hover: 28 18% 26%;
+      --sidebar-create-background: hsl(36 22% 90%);
+      --sidebar-create-hover: hsl(36 20% 87%);
+      --sidebar-create-foreground: hsl(var(--brand-600));
+      --sidebar-create-hover-foreground: hsl(var(--brand-700));
+      --sidebar-create-weight: 400;
+   }
+
+   :root[data-theme="plain-paper"] .nextclaw-chat-message-user {
+      background-color: hsl(var(--brand-100));
+      border-color: transparent;
+      color: hsl(var(--foreground));
+   }
+
    :root[data-theme="cool"] {
       /* ========================================
        BRAND COLORS (Mist Blue)

package/src/app/styles/island-theme.css

@@ -304,7 +304,7 @@
 
   :root[data-theme="island"]
     [data-theme-surface="doc-browser"]
-    .doc-browser-tab-scrollbar {
+    .compact-tab-scrollbar {
     background-color: transparent;
   }
 
@@ -446,20 +446,22 @@
   :root[data-theme="island"]
     :is(
       .custom-scrollbar,
-      .workspace-horizontal-scrollbar,
-      .doc-browser-tab-scrollbar
+      .workspace-horizontal-scrollbar
     ) {
     scrollbar-color: hsl(var(--brand-400) / 0.35) transparent;
   }
 
   :root[data-theme="island"] .custom-scrollbar::-webkit-scrollbar-thumb,
   :root[data-theme="island"]
-    .workspace-horizontal-scrollbar::-webkit-scrollbar-thumb,
-  :root[data-theme="island"]
-    .doc-browser-tab-scrollbar::-webkit-scrollbar-thumb {
+    .workspace-horizontal-scrollbar::-webkit-scrollbar-thumb {
     background: hsl(var(--brand-400) / 0.3);
   }
 
+  :root[data-theme="island"] .compact-tab-scrollbar {
+    --tab-scrollbar-thumb: hsl(var(--brand-400) / 0.3);
+    --tab-scrollbar-thumb-hover: hsl(var(--brand-400) / 0.4);
+  }
+
   @media (max-width: 760px) {
     :root[data-theme="island"] [data-theme-surface="app-shell"] {
       background-image: none;

package/src/features/agents/components/agent-details-dialog.tsx

@@ -74,8 +74,11 @@ export function AgentDetailsDialog({
     <Dialog open={agent !== null} onOpenChange={onOpenChange}>
       <DialogContent className="flex max-h-[calc(100vh-2rem)] flex-col overflow-hidden border-none bg-popover p-0 sm:max-h-[720px] sm:max-w-2xl">
         <div className="shrink-0 px-5 pb-3 pt-5">
-          <DialogHeader className="text-left">
-            <div className="flex min-w-0 items-center gap-3 pr-7">
+          <DialogHeader
+            className="items-center"
+            actions={<PageResourceActionsMenu page={pageResourceFromSystemObject('agent', agent.id, agent.displayName || agent.id)} />}
+          >
+            <div className="flex min-w-0 items-center gap-3">
               <AgentAvatar
                 agentId={agent.id}
                 displayName={agent.displayName}
@@ -90,7 +93,6 @@ export function AgentDetailsDialog({
                   @{agent.id}
                 </DialogDescription>
               </div>
-              <PageResourceActionsMenu page={pageResourceFromSystemObject('agent', agent.id, agent.displayName || agent.id)} />
             </div>
           </DialogHeader>
         </div>

package/src/features/app-data/components/app-retained-data-section.tsx

@@ -113,13 +113,13 @@ export function AppRetainedDataSection({
 
       <Dialog open={Boolean(selected)} onOpenChange={(open) => !open && closeDialog()}>
         <DialogContent
-          className="max-w-md [&>:last-child]:hidden"
+          className="max-w-md"
           onEscapeKeyDown={(event) => deletion.isPending && event.preventDefault()}
           onInteractOutside={(event) => deletion.isPending && event.preventDefault()}
         >
           {selected ? (
             <>
-              <DialogHeader>
+              <DialogHeader showClose={false}>
                 <DialogTitle>{t('appDataDeleteTitle')}</DialogTitle>
                 <DialogDescription>{t('appDataDeleteDescription')}</DialogDescription>
               </DialogHeader>

package/src/features/apps/components/__tests__/app-marketplace-catalog.test.tsx

@@ -92,7 +92,7 @@ describe('AppMarketplaceCatalog compatibility actions', () => {
     expect(onSelect).toHaveBeenCalledWith('rust-todo');
   });
 
-  it('does not project a persisted terminal failure back into a compatible card', () => {
+  it('shows the latest failure while allowing a compatible app to be installed again', () => {
     setLanguage('zh');
     const onInstall = vi.fn();
 
@@ -147,7 +147,7 @@ describe('AppMarketplaceCatalog compatibility actions', () => {
       </TooltipProvider>,
     );
 
-    expect(screen.queryByText('persisted registry failure')).toBeNull();
+    expect(screen.getByRole('alert').textContent).toBe('persisted registry failure');
     expect(screen.queryByRole('button', { name: '重试' })).toBeNull();
     const installButton = screen.getByRole('button', { name: '安装应用' });
     expect((installButton as HTMLButtonElement).disabled).toBe(false);

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}');