@agent-native/dispatch 0.41.1-nightly-20261104110058 → 0.42.0

package/src/components/workspace-app-card.tsx

@@ -16,7 +16,6 @@ import {
   IconEyeOff,
   IconFileText,
   IconKey,
-  IconPin,
   IconShare3,
   IconSettings,
   IconTrash,
@@ -44,7 +43,8 @@ import { ActionQueryError } from "./action-query-error";
 import { AppIcon } from "./app-icon";
 import { AppKeysPanel } from "./app-keys-popover";
 import { AppListRow } from "./app-list-row";
-import { AppOpenActions } from "./app-open-actions";
+import { AppOpenActions, appOpenActionLabels } from "./app-open-actions";
+import { AppPinButton } from "./app-pin-button";
 import { Badge } from "./ui/badge";
 import { Button } from "./ui/button";
 import {
@@ -248,13 +248,6 @@ export function WorkspaceAppCard({
       ...(whenToUseChanged ? { whenToUse: draftWhenToUseValues } : {}),
     });
   };
-  const pinLabel = t(
-    isPinned ? "dispatch.pages.unpinApp" : "dispatch.pages.pinApp",
-    {
-      name: app.name,
-      defaultValue: isPinned ? "Unpin this app" : "Pin this app",
-    },
-  );
 
   return (
     <>
@@ -297,16 +290,21 @@ export function WorkspaceAppCard({
           </div>
         </div>
         <div className="flex shrink-0 items-center gap-2">
+          {onTogglePinned ? (
+            <AppPinButton
+              appId={app.id}
+              name={app.name}
+              pinned={isPinned}
+              onToggle={onTogglePinned}
+            />
+          ) : null}
           <WorkspaceAppOpenActions
             app={app}
             href={directHref ?? href}
             openDirectly={Boolean(
               directHref && shouldOpenWorkspaceAppInTopWindow(),
             )}
-            isPinned={isPinned}
-            pinLabel={pinLabel}
             pendingOpenLabel={pendingOpenLabel}
-            onTogglePinned={onTogglePinned}
           />
           <WorkspaceAppSettings
             app={app}
@@ -432,19 +430,14 @@ function WorkspaceAppOpenActions({
   app,
   href,
   openDirectly,
-  isPinned,
-  pinLabel,
   pendingOpenLabel,
-  onTogglePinned,
 }: {
   app: WorkspaceAppSummary;
   href: string | null;
   openDirectly: boolean;
-  isPinned: boolean;
-  pinLabel: string;
   pendingOpenLabel: string;
-  onTogglePinned?: () => void;
 }) {
+  const t = useT();
   const navigate = useNavigate();
   const appRoute = workspaceAppRoute(app.id);
   const isPending = app.status === "pending";
@@ -466,7 +459,7 @@ function WorkspaceAppOpenActions({
   if (!href) {
     return (
       <Button size="sm" variant="outline" disabled>
-        Open app
+        {t("dispatch.pages.openApp", { defaultValue: "Open" })}
       </Button>
     );
   }
@@ -476,22 +469,11 @@ function WorkspaceAppOpenActions({
       name={app.name}
       href={href}
       showNewTabOption
+      labels={appOpenActionLabels(t, app.name)}
       onOpen={() => {
         if (openDirectly && navigateToWorkspaceApp(href)) return;
         void navigate(appRoute);
       }}
-      menuItems={
-        onTogglePinned
-          ? [
-              {
-                id: "pin",
-                label: pinLabel,
-                icon: <IconPin size={14} strokeWidth={isPinned ? 2.2 : 1.7} />,
-                onSelect: onTogglePinned,
-              },
-            ]
-          : undefined
-      }
     />
   );
 }

package/src/components/workspace-app-layout-notice.spec.tsx

@@ -0,0 +1,106 @@
+// @vitest-environment happy-dom
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const appState = vi.hoisted(() => ({
+  read: vi.fn(),
+  write: vi.fn(),
+  deviceOk: true,
+}));
+
+vi.mock("@agent-native/core/client/application-state", () => ({
+  readClientAppState: appState.read,
+  writeClientAppState: appState.write,
+}));
+
+vi.mock("@agent-native/core/client/agent-chat", async (importOriginal) => ({
+  ...(await importOriginal<
+    typeof import("@agent-native/core/client/agent-chat")
+  >()),
+  writeChatFirstAppLayout: () =>
+    appState.deviceOk ? { ok: true } : { ok: false, reason: "write-failed" },
+}));
+
+vi.mock("@agent-native/core/client/i18n", () => ({
+  useT: () => (key: string) => key,
+}));
+
+import {
+  resetWorkspaceAppLayoutStoreForTests,
+  updateWorkspaceAppLayout,
+} from "../lib/workspace-app-layout";
+import { WorkspaceAppLayoutNotice } from "./workspace-app-layout-notice";
+
+const pin = (id: string) =>
+  updateWorkspaceAppLayout((layout) => ({
+    ...layout,
+    pinnedIds: [id, ...layout.pinnedIds],
+  }));
+
+describe("WorkspaceAppLayoutNotice", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(async () => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    resetWorkspaceAppLayoutStoreForTests();
+    appState.deviceOk = true;
+    appState.read.mockReset().mockResolvedValue(null);
+    appState.write.mockReset().mockResolvedValue(null);
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+    await act(async () => root.render(<WorkspaceAppLayoutNotice />));
+    // Let the first change read workspace state, so later ones write it.
+    await act(async () => pin("seed"));
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.unstubAllGlobals();
+  });
+
+  const notice = () =>
+    container.querySelector('[role="status"] [data-app-notice-message]');
+  const dismiss = () =>
+    container.querySelector<HTMLButtonElement>('[role="status"] button')!;
+
+  it.each([
+    [false, true, "dispatch.pages.appPinSaveFailed"],
+    [false, false, "dispatch.pages.appPinSaveFailed"],
+    [true, false, "dispatch.pages.appPinSavedToWorkspaceOnly"],
+  ])(
+    "says where pins were saved (workspace %s, device %s)",
+    async (workspaceOk, deviceOk, message) => {
+      appState.deviceOk = deviceOk;
+      appState.write.mockImplementation(() =>
+        workspaceOk ? Promise.resolve(null) : Promise.reject(new Error("x")),
+      );
+      await act(async () => pin("mail"));
+
+      expect(notice()?.textContent).toBe(message);
+    },
+  );
+
+  it("shows nothing once a later save succeeds", async () => {
+    appState.write.mockRejectedValueOnce(new Error("offline"));
+    await act(async () => pin("mail"));
+    expect(notice()).not.toBeNull();
+
+    await act(async () => pin("plan"));
+    expect(notice()).toBeNull();
+  });
+
+  it("shows again for a new failure after being dismissed", async () => {
+    appState.write.mockRejectedValue(new Error("offline"));
+    await act(async () => pin("mail"));
+    expect(dismiss().textContent).toBe("agentChat.chatFirst.dismiss");
+    await act(async () => dismiss().click());
+    expect(notice()).toBeNull();
+
+    await act(async () => pin("plan"));
+    expect(notice()?.textContent).toBe("dispatch.pages.appPinSaveFailed");
+  });
+});

package/src/components/workspace-app-layout-notice.tsx

@@ -0,0 +1,65 @@
+import { useT } from "@agent-native/core/client/i18n";
+import { useState, type ReactNode } from "react";
+
+import {
+  useWorkspaceAppLayout,
+  type WorkspaceAppLayoutPersistenceError,
+} from "../lib/workspace-app-layout";
+import { Alert, AlertDescription } from "./ui/alert";
+import { Button } from "./ui/button";
+
+const NOTICE_KEYS: Record<WorkspaceAppLayoutPersistenceError, string> = {
+  both: "dispatch.pages.appPinSaveFailed",
+  workspace: "dispatch.pages.appPinSaveFailed",
+  device: "dispatch.pages.appPinSavedToWorkspaceOnly",
+};
+
+/** A dismissible notice above the page content. */
+export function AppNotice({
+  children,
+  onDismiss,
+}: {
+  children: ReactNode;
+  onDismiss: () => void;
+}) {
+  const t = useT();
+  return (
+    <Alert
+      role="status"
+      aria-live="polite"
+      data-app-notice
+      className="flex items-center justify-between gap-3 rounded-none border-x-0 border-t-0 px-3 py-2"
+    >
+      <AlertDescription
+        data-app-notice-message
+        className="min-w-0 text-xs text-muted-foreground"
+      >
+        {children}
+      </AlertDescription>
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        className="shrink-0"
+        onClick={onDismiss}
+      >
+        {t("agentChat.chatFirst.dismiss")}
+      </Button>
+    </Alert>
+  );
+}
+
+/** The one place a failed app pin save is shown, on every route. */
+export function WorkspaceAppLayoutNotice() {
+  const t = useT();
+  const { persistenceError } = useWorkspaceAppLayout({ hydrate: false });
+  const [dismissedWriteId, setDismissedWriteId] = useState<number | null>(null);
+  if (!persistenceError || persistenceError.writeId === dismissedWriteId) {
+    return null;
+  }
+  return (
+    <AppNotice onDismiss={() => setDismissedWriteId(persistenceError.writeId)}>
+      {t(NOTICE_KEYS[persistenceError.scope])}
+    </AppNotice>
+  );
+}

package/src/components/workspace-app-search.spec.tsx

@@ -0,0 +1,53 @@
+// @vitest-environment happy-dom
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("@agent-native/core/client/i18n", () => ({
+  useT: () => (key: string) => key,
+}));
+
+import { WorkspaceAppSearch } from "./workspace-app-search";
+
+describe("WorkspaceAppSearch", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.unstubAllGlobals();
+  });
+
+  it("clears from a button inside the field, not beside it", async () => {
+    const onQueryChange = vi.fn();
+    await act(async () =>
+      root.render(
+        <WorkspaceAppSearch query="" onQueryChange={onQueryChange} />,
+      ),
+    );
+    const group = container.querySelector('[data-slot="input-group"]');
+    expect(group?.querySelector("input")).not.toBeNull();
+    expect(container.querySelector("button")).toBeNull();
+
+    await act(async () =>
+      root.render(
+        <WorkspaceAppSearch query="mail" onQueryChange={onQueryChange} />,
+      ),
+    );
+    const clear = container.querySelector<HTMLButtonElement>(
+      'button[aria-label="dispatch.pages.clearAppSearch"]',
+    );
+    expect(clear?.closest('[data-slot="input-group"]')).toBe(group);
+    await act(async () => clear?.click());
+    expect(onQueryChange).toHaveBeenCalledWith("");
+    expect(document.activeElement).toBe(group?.querySelector("input"));
+  });
+});

package/src/components/workspace-app-search.tsx

@@ -1,10 +1,15 @@
 import { useT } from "@agent-native/core/client/i18n";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@agent-native/toolkit/ui/input-group";
 import { IconSearch, IconX } from "@tabler/icons-react";
-import { useId } from "react";
+import { useId, useRef } from "react";
 
 import { cn } from "../lib/utils";
 import { Button } from "./ui/button";
-import { Input } from "./ui/input";
 
 export function WorkspaceAppSearch({
   query,
@@ -17,6 +22,7 @@ export function WorkspaceAppSearch({
 }) {
   const t = useT();
   const inputId = useId();
+  const inputRef = useRef<HTMLInputElement>(null);
   const label = t("dispatch.pages.searchApps", {
     defaultValue: "Search apps",
   });
@@ -24,43 +30,44 @@ export function WorkspaceAppSearch({
     defaultValue: "Search apps",
   });
 
+  const clearLabel = t("dispatch.pages.clearAppSearch", {
+    defaultValue: "Clear search",
+  });
+
   return (
-    <div role="search" className={cn("flex items-center gap-2", className)}>
-      <div className="relative min-w-0 flex-1">
-        <label htmlFor={inputId} className="sr-only">
-          {label}
-        </label>
-        <IconSearch
-          size={16}
-          aria-hidden="true"
-          className="pointer-events-none absolute start-3 top-1/2 -translate-y-1/2 text-muted-foreground"
-        />
-        <Input
+    <div role="search" className={cn("flex items-center", className)}>
+      <label htmlFor={inputId} className="sr-only">
+        {label}
+      </label>
+      <InputGroup size="sm" className="min-w-0 flex-1">
+        <InputGroupAddon>
+          <IconSearch aria-hidden="true" />
+        </InputGroupAddon>
+        <InputGroupInput
+          ref={inputRef}
           id={inputId}
-          size="sm"
           value={query}
           onChange={(event) => onQueryChange(event.target.value)}
           placeholder={placeholder}
-          className="bg-background ps-9"
           autoComplete="off"
         />
-      </div>
-      {query ? (
-        <Button
-          type="button"
-          variant="ghost"
-          size="sm"
-          className="shrink-0 gap-1.5 text-muted-foreground"
-          onClick={() => onQueryChange("")}
-        >
-          <IconX size={14} aria-hidden="true" />
-          <span>
-            {t("dispatch.pages.clearAppSearch", {
-              defaultValue: "Clear",
-            })}
-          </span>
-        </Button>
-      ) : null}
+        {query ? (
+          <InputGroupAddon align="inline-end">
+            <InputGroupButton
+              size="icon-xs"
+              aria-label={clearLabel}
+              title={clearLabel}
+              onClick={() => {
+                onQueryChange("");
+                // The button unmounts once the query is empty.
+                inputRef.current?.focus();
+              }}
+            >
+              <IconX aria-hidden="true" />
+            </InputGroupButton>
+          </InputGroupAddon>
+        ) : null}
+      </InputGroup>
     </div>
   );
 }

package/src/components/workspace-template-card.spec.tsx

@@ -32,6 +32,11 @@ vi.mock("@agent-native/core/client/hooks", () => ({
 }));
 
 vi.mock("sonner", () => ({ toast }));
+vi.mock("@agent-native/core/client/i18n", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@agent-native/core/client/i18n")>()),
+  useT: () => (key: string, values?: { name?: string }) =>
+    values?.name ? `${key}:${values.name}` : key,
+}));
 
 const template: CuratedWorkspaceTemplate = {
   id: "weekly-report",
@@ -194,6 +199,11 @@ describe("WorkspaceTemplateCard", () => {
     expect(
       container.querySelector('a[href="https://reports.example.test"]'),
     ).not.toBeNull();
+    expect(
+      container
+        .querySelector(".app-open-actions__menu")
+        ?.getAttribute("aria-label"),
+    ).toBe("extensions.optionsFor:Weekly report");
   });
 
   it("accepts the list action envelope and renders installed state", async () => {

package/src/components/workspace-template-card.tsx

@@ -1,4 +1,5 @@
 import { useActionMutation } from "@agent-native/core/client/hooks";
+import { useT } from "@agent-native/core/client/i18n";
 import { normalizeWorkspaceAppId } from "@agent-native/core/shared";
 import {
   IconArrowUpRight,
@@ -12,7 +13,7 @@ import { toast } from "sonner";
 import { cn } from "../lib/utils";
 import { AppIcon } from "./app-icon";
 import { AppListRow } from "./app-list-row";
-import { AppOpenActions } from "./app-open-actions";
+import { AppOpenActions, appOpenActionLabels } from "./app-open-actions";
 import { AppRowSettings } from "./app-row-settings";
 import { useNotifyBuildInBuilder } from "./build-in-builder";
 import { Button } from "./ui/button";
@@ -131,6 +132,7 @@ export function WorkspaceTemplateCard({
   catalog = false,
   onRemixSuccess,
 }: WorkspaceTemplateCardProps) {
+  const t = useT();
   const labels = useMemo(() => mergeLabels(labelOverrides), [labelOverrides]);
   const [open, setOpen] = useState(false);
   const [appId, setAppId] = useState(() =>
@@ -218,7 +220,10 @@ export function WorkspaceTemplateCard({
                 name={template.name}
                 href={liveUrl}
                 rel="noreferrer"
-                labels={{ openApp: labels.openApp }}
+                labels={{
+                  ...appOpenActionLabels(t, template.name),
+                  openApp: labels.openApp,
+                }}
                 showNewTabOption
               />
             ) : null}

package/src/db/index.spec.ts

@@ -62,6 +62,15 @@ describe("Dispatch workspace app share access", () => {
     ).resolves.toBe(false);
   });
 
+  it("shares one manager answer across a request org's apps", () => {
+    const key = mocks.getRegisteredResource().canManageAccessKey as (resource: {
+      orgId?: string | null;
+    }) => string | undefined;
+
+    expect(key({ orgId: "org-a" })).toBe("org-a");
+    expect(key({ orgId: null })).toBeUndefined();
+  });
+
   it("does not resolve a role for a resource outside the request org", async () => {
     await expect(
       canManageAccess()(

package/src/db/index.ts

@@ -21,6 +21,7 @@ registerShareableResource({
   allowPublic: false,
   requireOrgMemberForUserShares: true,
   supportsGroupShares: true,
+  canManageAccessKey: (resource) => resource.orgId ?? undefined,
   canManageAccess: async (resource, ctx) => {
     if (!ctx.userEmail || !ctx.orgId || resource?.orgId !== ctx.orgId) {
       return false;

package/src/lib/other-apps.spec.ts

@@ -50,6 +50,31 @@ describe("filterBuiltInApps", () => {
     ]);
   });
 
+  it("leaves out hosted apps the organization hides unless asked to keep them", () => {
+    const apps = [
+      {
+        id: "slides",
+        name: "Slides",
+        url: "https://slides.agent-native.com",
+        source: "builtin" as const,
+        hiddenFromLaunchers: true,
+      },
+      {
+        id: "clips",
+        name: "Clips",
+        url: "https://clips.agent-native.com",
+        source: "builtin" as const,
+      },
+    ];
+
+    expect(filterBuiltInApps(apps, []).map((app) => app.id)).toEqual(["clips"]);
+    expect(
+      filterBuiltInApps(apps, [], { includeHiddenFromLaunchers: true }).map(
+        (app) => app.id,
+      ),
+    ).toEqual(["clips", "slides"]);
+  });
+
   it("keeps built-in app launches on the current beta lane", () => {
     vi.stubGlobal("window", {
       location: { hostname: "beta.agent-workspace.builder.io" },

package/src/lib/other-apps.ts

@@ -11,6 +11,8 @@ export interface ConnectedAppSummary {
   homeUrl?: string;
   color?: string;
   source?: "builtin" | "custom" | "workspace";
+  /** Set by list-connected-agents when the organization hides hosted apps. */
+  hiddenFromLaunchers?: boolean;
 }
 
 export interface WorkspaceAppId {
@@ -58,9 +60,15 @@ export function filterOtherApps(
     .sort((a, b) => a.name.localeCompare(b.name));
 }
 
+/**
+ * Hosted apps for launcher surfaces. Rows the organization hides are left out
+ * unless `includeHiddenFromLaunchers` is set, which callers that resolve an
+ * app id to open (pane restore, `open_app`) need.
+ */
 export function filterBuiltInApps(
   connectedApps: ConnectedAppSummary[],
   workspaceApps: WorkspaceAppId[],
+  { includeHiddenFromLaunchers = false } = {},
 ): ConnectedAppSummary[] {
   const workspaceAppIds = new Set([
     "dispatch",
@@ -75,6 +83,7 @@ export function filterBuiltInApps(
       if (
         !id ||
         app.source !== "builtin" ||
+        (app.hiddenFromLaunchers && !includeHiddenFromLaunchers) ||
         isDefaultWorkspaceAppHiddenId(id) ||
         workspaceAppIds.has(id) ||
         seen.has(id) ||

package/src/lib/workspace-app-layout.spec.ts

@@ -2,9 +2,12 @@ import { describe, expect, it } from "vitest";
 
 import {
   normalizeWorkspaceAppLayout,
+  setWorkspaceAppPinned,
   orderWorkspaceApps,
-  toggleWorkspaceAppPinned,
+  tierWorkspaceApps,
   workspaceAppMatchesQuery,
+  workspaceAppsStatus,
+  appListsStatus,
 } from "./workspace-app-layout";
 import { mergeChatFirstWorkspaceApps } from "./workspace-apps";
 
@@ -51,15 +54,70 @@ describe("workspace app layout", () => {
     expect(workspaceAppMatchesQuery({ name: "Mail" }, "calendar")).toBe(false);
   });
 
-  it("normalizes persisted layout ids and toggles pin state", () => {
+  it("normalizes persisted layout ids and sets pin state", () => {
     const layout = normalizeWorkspaceAppLayout({
       pinnedIds: ["Mail", "mail", 42],
       orderedIds: ["Calendar", "", "calendar"],
     });
 
-    expect(toggleWorkspaceAppPinned(layout, "CALENDAR")).toEqual({
+    expect(setWorkspaceAppPinned(layout, "CALENDAR", true)).toEqual({
       pinnedIds: ["calendar", "mail"],
       orderedIds: ["calendar"],
     });
+    // Already in the asked-for state: nothing moves.
+    expect(
+      setWorkspaceAppPinned(
+        { pinnedIds: ["a", "b"], orderedIds: [] },
+        "b",
+        true,
+      ),
+    ).toEqual({ pinnedIds: ["a", "b"], orderedIds: [] });
+    expect(setWorkspaceAppPinned(layout, "mail", false).pinnedIds).toEqual([]);
+    expect(setWorkspaceAppPinned(layout, "plan", false).pinnedIds).toEqual([
+      "mail",
+    ]);
+  });
+
+  it("tiers pinned apps in pin order, then apps and hosted apps each A to Z", () => {
+    const apps = [
+      { id: "gamma", name: "Gamma" },
+      { id: "zeta", name: "Zeta" },
+      { id: "mail", name: "Mail", source: "builtin" },
+      { id: "Alpha", name: "alpha" },
+      { id: "calendar", name: "Calendar", source: "builtin" },
+      { id: "clips", name: "Clips", source: "builtin" },
+      { id: "beta", name: "Beta", source: "connected" },
+    ];
+
+    const tiers = tierWorkspaceApps(apps, {
+      pinnedIds: ["clips", "zeta", "missing"],
+      orderedIds: ["beta", "alpha"],
+    });
+
+    expect(tiers.pinned.map((app) => app.id)).toEqual(["clips", "zeta"]);
+    expect(tiers.apps.map((app) => app.id)).toEqual(["Alpha", "beta", "gamma"]);
+    expect(tiers.hosted.map((app) => app.id)).toEqual(["calendar", "mail"]);
+  });
+
+  it.each([
+    [{ data: undefined, isError: false }, "loading"],
+    [{ data: undefined, isError: true }, "error"],
+    [{ data: [], isError: false }, "ready"],
+    // A failed refresh keeps the list it already had.
+    [{ data: [], isError: true }, "ready"],
+  ] as const)("reports %o as %s", (query, status) => {
+    expect(workspaceAppsStatus(query)).toBe(status);
+  });
+
+  it("keeps the app lists loading until the hosted list settles", () => {
+    const ready = { data: [], isError: false };
+    const pending = { data: undefined, isError: false };
+    const failed = { data: undefined, isError: true };
+    expect(appListsStatus(pending, ready)).toBe("loading");
+    expect(appListsStatus(failed, ready)).toBe("error");
+    expect(appListsStatus(ready, pending)).toBe("loading");
+    // A failed hosted list is reported on its own; workspace apps still show.
+    expect(appListsStatus(ready, failed)).toBe("ready");
+    expect(appListsStatus(ready, ready)).toBe("ready");
   });
 });