@agent-native/dispatch 0.40.0 → 0.40.3

package/src/routes/pages/chat.tsx

@@ -1,23 +1,21 @@
 import {
-  AgentChatHome,
-  type AgentChatHomeProps,
   insertAgentComposerReference,
   markAgentChatHomeHandoff,
   readChatFirstMode,
-  useActiveAgentChatRunId,
 } from "@agent-native/core/client/agent-chat";
 import { appBasePath, appPath } from "@agent-native/core/client/api-path";
-import { writeClipboardText } from "@agent-native/core/client/clipboard";
 import { useActionQuery } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
-import { IconCheck, IconCopy } from "@tabler/icons-react";
+import {
+  AgentChatHome,
+  type AgentChatHomeProps,
+} from "@agent-native/toolkit/app/chat";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useLocation, useNavigate } from "react-router";
 
 import { ActionQueryError } from "../../components/action-query-error";
 import { DispatchChatHomeApps } from "../../components/chat-home-apps";
 import { useDispatchExtensions } from "../../components/layout/Layout";
-import { Button } from "../../components/ui/button";
 import { Skeleton } from "../../components/ui/skeleton";
 import { submitOverviewPrompt } from "../../lib/overview-chat";
 
@@ -73,46 +71,6 @@ interface DispatchThreadUrlSync {
   navigate: (path: string, options?: { replace?: boolean }) => void;
 }
 
-function DispatchRequestIdButton({ requestId }: { requestId: string | null }) {
-  const t = useT();
-  const [copied, setCopied] = useState(false);
-
-  const handleCopy = useCallback(() => {
-    if (!requestId) return;
-    void writeClipboardText(requestId).then((ok) => {
-      if (!ok) return;
-      setCopied(true);
-      window.setTimeout(() => setCopied(false), 1000);
-    });
-  }, [requestId]);
-
-  return (
-    <Button
-      type="button"
-      variant="outline"
-      size="sm"
-      disabled={!requestId}
-      onClick={handleCopy}
-      aria-label={t("dispatch.pages.copyRequestId", {
-        defaultValue: requestId ? "Copy request ID" : "Request ID unavailable",
-      })}
-    >
-      {copied ? (
-        <IconCheck aria-hidden="true" />
-      ) : (
-        <IconCopy aria-hidden="true" />
-      )}
-      {copied
-        ? t("dispatch.pages.copied", { defaultValue: "Copied" })
-        : t("dispatch.pages.copyRequestId", {
-            defaultValue: requestId
-              ? "Copy request ID"
-              : "Request ID unavailable",
-          })}
-    </Button>
-  );
-}
-
 interface DispatchChatLocationState {
   dispatchPrompt?: {
     id?: string | number;
@@ -136,7 +94,6 @@ export default function ChatRoute() {
   const location = useLocation();
   const navigate = useNavigate();
   const routeThreadId = threadIdFromPath(location.pathname);
-  const activeRunId = useActiveAgentChatRunId(routeThreadId);
   const agentPath = new URLSearchParams(location.search).get("agent");
   const agentsQuery = useActionQuery<WorkspaceAgentResource[]>(
     "list-workspace-resources",
@@ -194,6 +151,14 @@ export default function ChatRoute() {
   const state = location.state as DispatchChatLocationState | null;
   const prompt = state?.dispatchPrompt;
   const thread = state?.dispatchThread;
+  const [pendingOverviewPrompt, setPendingOverviewPrompt] = useState<
+    DispatchChatLocationState["dispatchPrompt"] | null
+  >(null);
+  const activePrompt = prompt?.message ? prompt : pendingOverviewPrompt;
+
+  useEffect(() => {
+    if (routeThreadId) setPendingOverviewPrompt(null);
+  }, [routeThreadId]);
 
   useEffect(() => {
     const message = prompt?.message?.trim();
@@ -215,6 +180,7 @@ export default function ChatRoute() {
         );
       }
       if (message) {
+        setPendingOverviewPrompt(prompt ?? null);
         submitOverviewPrompt(message, prompt?.selectedModel, {
           openSidebar: false,
           selectedEngine: prompt?.selectedEngine,
@@ -303,15 +269,10 @@ export default function ChatRoute() {
 
   return (
     <div className="flex h-full min-h-0 flex-col bg-background">
-      {threadUrlSync.routeThreadId ? (
-        <div className="flex justify-end px-4 pt-4 sm:px-6">
-          <DispatchRequestIdButton requestId={activeRunId} />
-        </div>
-      ) : null}
       <AgentChatHome
         key={agent ? `agent-${agent.id}` : "dispatch"}
         className="flex-1 min-h-0"
-        contentClassName="max-w-6xl"
+        contentClassName="max-w-none"
         surfaceClassName="dispatch-chat-panel px-4 sm:px-6"
         chatViewTransition
         defaultMode="chat"
@@ -323,7 +284,7 @@ export default function ChatRoute() {
         dynamicSuggestions={false}
         suppressInlineOpenApp={suppressInlineOpenApp}
         suggestions={
-          agent || routeThreadId || prompt?.message
+          agent || routeThreadId || activePrompt?.message
             ? []
             : [
                 t("dispatch.pages.suggestionWorkspaceHealth"),
@@ -335,8 +296,10 @@ export default function ChatRoute() {
           defaultValue:
             "Route work, inspect status, or create something new from one place.",
         })}
-        centerComposerWhenEmpty={!prompt?.message}
-        composerLayoutVariant={prompt?.message ? "default" : "hero"}
+        centerComposerWhenEmpty={!activePrompt?.message && !routeThreadId}
+        composerLayoutVariant={
+          activePrompt?.message || routeThreadId ? "default" : "hero"
+        }
         composerPlaceholder={
           agent
             ? `Ask ${agent.name}...`
@@ -350,7 +313,7 @@ export default function ChatRoute() {
               <h1>{agent.name}</h1>
               {agent.description ? <p>{agent.description}</p> : null}
             </div>
-          ) : !prompt?.message ? (
+          ) : !activePrompt?.message && !routeThreadId ? (
             <div className="dispatch-chat-intro">
               <h1>
                 {t("dispatch.pages.chatHomeTitle", {

package/src/routes/pages/extensions.$id.tsx

@@ -1,4 +1,4 @@
-import { ExtensionViewerPage } from "@agent-native/core/client/extensions";
+import { ExtensionViewerPage } from "@agent-native/toolkit/app/extensions";
 
 export function meta() {
   return [{ title: "Extension \u2014 Dispatch" }];

package/src/routes/pages/extensions._index.tsx

@@ -1,4 +1,4 @@
-import { ExtensionsListPage } from "@agent-native/core/client/extensions";
+import { ExtensionsListPage } from "@agent-native/toolkit/app/extensions";
 
 export function meta() {
   return [{ title: "Extensions \u2014 Dispatch" }];

package/src/routes/pages/integrations.tsx

@@ -1,5 +1,5 @@
 import { useT } from "@agent-native/core/client/i18n";
-import { McpIntegrationsLanding } from "@agent-native/core/client/integrations";
+import { McpIntegrationsLanding } from "@agent-native/toolkit/app/integrations";
 import { Link } from "react-router";
 
 import { DispatchShell } from "../../components/dispatch-shell";

package/src/routes/pages/new-app.tsx

@@ -1,5 +1,5 @@
 import { useT } from "@agent-native/core/client/i18n";
-import { NewWorkspaceAppFlow } from "@agent-native/core/client/ui";
+import { NewWorkspaceAppFlow } from "@agent-native/toolkit/app/onboarding";
 
 import { DispatchShell } from "../../components/dispatch-shell";
 

package/src/routes/pages/operations.tsx

@@ -1,6 +1,6 @@
-import { DbAdminPage } from "@agent-native/core/client/db-admin";
 import { useT } from "@agent-native/core/client/i18n";
-import { ObservabilityDashboard } from "@agent-native/core/client/observability";
+import { DbAdminPage } from "@agent-native/toolkit/app/db-admin";
+import { ObservabilityDashboard } from "@agent-native/toolkit/app/observability";
 import {
   IconActivity,
   IconArrowUpRight,

package/src/routes/pages/settings-page.tsx

@@ -0,0 +1,250 @@
+import {
+  CHAT_FIRST_MODE_CHANGED_EVENT,
+  readChatFirstModeState,
+  writeChatFirstMode,
+} from "@agent-native/core/client/agent-chat";
+import {
+  useFeatureFlag,
+  useFeatureFlagState,
+} from "@agent-native/core/client/feature-flags";
+import { useT } from "@agent-native/core/client/i18n";
+import { SETTINGS_REDESIGN_FLAG } from "@agent-native/core/feature-flags/registry";
+import { ChangelogSettingsCard } from "@agent-native/toolkit/app/changelog";
+import { OrgMembersPage, TeamPage } from "@agent-native/toolkit/app/org";
+import {
+  AccountSettingsCard,
+  CORE_SETTINGS_PAGES,
+  registerSettingsPages,
+  SettingsGroup,
+  SettingsRow,
+  SettingsTabsPage,
+  useAgentSettingsTabs,
+  type SettingsSearchEntry,
+} from "@agent-native/toolkit/app/settings";
+import { LanguagePicker } from "@agent-native/toolkit/app/shared";
+import { IconShield } from "@tabler/icons-react";
+import { useMemo, useState } from "react";
+import { Link } from "react-router";
+
+import { Button } from "../../components/ui/button";
+import { Switch } from "../../components/ui/switch";
+import { dispatchAccessDescriptor } from "../../shared/app-roles.js";
+import { DISPATCH_CONNECT_APPS_FLAG } from "../../shared/feature-flags.js";
+
+const coreMembersPage = CORE_SETTINGS_PAGES.find(
+  (page) => page.id === "members",
+);
+if (!coreMembersPage) {
+  throw new Error("Core Settings has no members page for Dispatch app roles");
+}
+
+function DispatchMembersSettingsPage() {
+  return <OrgMembersPage appRoles={dispatchAccessDescriptor} />;
+}
+
+// The redesigned Settings shows Members from core; Dispatch's replaces it so
+// the app-role column stays.
+registerSettingsPages([
+  { ...coreMembersPage, component: DispatchMembersSettingsPage },
+]);
+
+export function meta() {
+  return [{ title: "Settings - Dispatch" }];
+}
+
+export interface DispatchSettingsPageProps {
+  /** Raw CHANGELOG.md behind What's new. */
+  changelog: string;
+}
+
+/** The template route supplies the app's own changelog. */
+export function DispatchSettingsPage({ changelog }: DispatchSettingsPageProps) {
+  const t = useT();
+  const connectAppsEnabled = useFeatureFlag(DISPATCH_CONNECT_APPS_FLAG.key);
+  // Core Preferences owns the interface language in the redesigned Settings,
+  // whose Dispatch General page shows `generalGroups` instead of `general`.
+  const redesign = useFeatureFlagState(SETTINGS_REDESIGN_FLAG.key).enabled;
+  const agentSettingsTabs = useAgentSettingsTabs({
+    usageAppId: "dispatch",
+    usageViewAllHref: "/admin/metrics",
+    organizationContent: (
+      <div className="mx-auto w-full max-w-3xl">
+        <TeamPage
+          showTitle={false}
+          appRoles={dispatchAccessDescriptor}
+          createOrgDescription="Set up a team to share dispatch destinations and approvals with your colleagues."
+        />
+      </div>
+    ),
+  });
+  const settingsTabs = [
+    ...agentSettingsTabs,
+    {
+      id: "admin",
+      label: t("dispatch.nav.admin", { defaultValue: "Admin" }),
+      icon: IconShield,
+      group: "Admin",
+      href: "/admin",
+      content: null,
+    },
+  ];
+  const [chatFirstModeState] = useState(() => readChatFirstModeState());
+  const [chatFirstMode, setChatFirstMode] = useState(
+    () => chatFirstModeState.enabled,
+  );
+  const [chatFirstStorageNotice, setChatFirstStorageNotice] = useState<
+    string | null
+  >(
+    chatFirstModeState.availability === "unavailable"
+      ? t("settings.chatFirstStorageUnavailable")
+      : null,
+  );
+
+  function updateChatFirstMode(enabled: boolean) {
+    const result = writeChatFirstMode(enabled);
+    if (!result.ok) {
+      setChatFirstStorageNotice(t("settings.chatFirstStorageBlocked"));
+      return;
+    }
+    setChatFirstStorageNotice(null);
+    setChatFirstMode(enabled);
+    window.dispatchEvent(
+      new CustomEvent(CHAT_FIRST_MODE_CHANGED_EVENT, {
+        detail: { enabled },
+      }),
+    );
+  }
+
+  const generalSearchEntries = useMemo<SettingsSearchEntry[]>(
+    () => [
+      ...(redesign
+        ? []
+        : [
+            {
+              id: "dispatch-language",
+              label: t("settings.languageTitle"),
+              keywords: "language locale translation i18n",
+              hash: "language",
+            },
+          ]),
+      {
+        id: "dispatch-workspace",
+        label: redesign
+          ? t("settings.resourcesTitle")
+          : t("settings.workspaceTitle"),
+        keywords: "workspace resources integrations vault destinations",
+        hash: "workspace-resources",
+      },
+      {
+        id: "dispatch-chat-first",
+        label: t("settings.chatFirstTitle"),
+        keywords: "chat first codex t3 apps pane navigation",
+        hash: "chat-first",
+      },
+    ],
+    [redesign, t],
+  );
+
+  const chatFirstSwitch = (
+    <Switch
+      aria-label={t("settings.chatFirstAriaLabel")}
+      checked={chatFirstMode}
+      onCheckedChange={updateChatFirstMode}
+    />
+  );
+  const chatFirstStorageAlert = chatFirstStorageNotice ? (
+    <p className="text-sm text-destructive" role="alert">
+      {chatFirstStorageNotice}
+    </p>
+  ) : null;
+  const connectAppsRow = connectAppsEnabled ? (
+    <SettingsRow
+      id="connect-apps"
+      label={t("settings.connectApps")}
+      description={t("settings.connectAppsDescription")}
+      control={
+        <Button variant="outline" asChild>
+          <Link to="/connect">{t("settings.openConnectApps")}</Link>
+        </Button>
+      }
+    />
+  ) : null;
+  const resourceSettingsButton = (
+    <Button variant="outline" asChild>
+      <Link to="/workspace">{t("settings.openResourceSettings")}</Link>
+    </Button>
+  );
+
+  return (
+    <SettingsTabsPage
+      account={<AccountSettingsCard />}
+      extraTabs={settingsTabs}
+      generalSearchEntries={generalSearchEntries}
+      general={
+        <div className="mx-auto w-full max-w-2xl space-y-6">
+          <p className="text-sm leading-6 text-muted-foreground">
+            {t("settings.description")}
+          </p>
+
+          <SettingsGroup>
+            <SettingsRow
+              id="language"
+              label={t("settings.languageTitle")}
+              description={t("settings.languageDescription")}
+              control={
+                <div className="w-56">
+                  <LanguagePicker label={t("settings.languageLabel")} />
+                </div>
+              }
+            />
+            <SettingsRow
+              id="workspace-resources"
+              label={t("settings.workspaceTitle")}
+              description={t("settings.workspaceDescription")}
+              control={resourceSettingsButton}
+            />
+            {connectAppsRow}
+          </SettingsGroup>
+
+          <SettingsGroup id="chat-first">
+            <SettingsRow
+              label={t("settings.chatFirstTitle")}
+              description={t("settings.chatFirstDescription")}
+              control={chatFirstSwitch}
+            >
+              <p className="text-sm leading-6 text-muted-foreground">
+                {t("settings.chatFirstSessionWatchDescription")}
+              </p>
+              {chatFirstStorageAlert}
+            </SettingsRow>
+          </SettingsGroup>
+        </div>
+      }
+      generalGroups={
+        <SettingsGroup id="workspace" title={t("settings.workspaceTitle")}>
+          <SettingsRow
+            id="chat-first"
+            label={t("settings.chatFirstTitle")}
+            description={t("settings.chatFirstDescription")}
+            control={chatFirstSwitch}
+          >
+            {chatFirstStorageAlert}
+          </SettingsRow>
+          <SettingsRow
+            id="workspace-resources"
+            label={t("settings.resourcesTitle")}
+            description={t("settings.workspaceDescription")}
+            control={resourceSettingsButton}
+          />
+          {connectAppsRow}
+        </SettingsGroup>
+      }
+      whatsNew={
+        <div className="mx-auto w-full max-w-2xl">
+          <ChangelogSettingsCard markdown={changelog} />
+        </div>
+      }
+      whatsNewMarkdown={changelog}
+    />
+  );
+}

package/src/routes/pages/settings.spec.tsx

@@ -8,6 +8,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { dispatchAccessDescriptor } from "../../shared/app-roles.js";
 
 const state = vi.hoisted(() => ({
+  redesign: false,
   registered: [] as Array<{
     id: string;
     component: ComponentType;
@@ -16,7 +17,6 @@ const state = vi.hoisted(() => ({
   membersAppRoles: undefined as unknown,
   pageProps: null as null | {
     general?: ReactNode;
-    account?: ReactNode;
     generalGroups?: ReactNode;
     generalSearchEntries?: Array<{ id: string; hash?: string }>;
     extraTabs?: Array<{ id: string; href?: string }>;
@@ -30,7 +30,7 @@ vi.mock("@agent-native/core/client/agent-chat", () => ({
   writeChatFirstMode: () => ({ ok: true }),
 }));
 
-vi.mock("@agent-native/core/client/changelog", () => ({
+vi.mock("@agent-native/toolkit/app/changelog", () => ({
   ChangelogSettingsCard: ({ markdown }: { markdown: string }) => (
     <div data-changelog>{markdown}</div>
   ),
@@ -38,10 +38,12 @@ vi.mock("@agent-native/core/client/changelog", () => ({
 
 vi.mock("@agent-native/core/client/feature-flags", () => ({
   useFeatureFlag: () => false,
+  useFeatureFlagState: () => ({ status: "ready", enabled: state.redesign }),
 }));
 
 vi.mock("@agent-native/core/feature-flags/registry", () => ({
   CONNECT_APPS_FLAG: { key: "connect-apps" },
+  SETTINGS_REDESIGN_FLAG: { key: "settings-redesign" },
   defineFeatureFlag: (flag: { key: string }) => flag,
 }));
 
@@ -49,7 +51,11 @@ vi.mock("@agent-native/core/client/i18n", () => ({
   useT: () => (key: string) => key,
 }));
 
-vi.mock("@agent-native/core/client/org", () => ({
+vi.mock("@agent-native/toolkit/app/shared", () => ({
+  LanguagePicker: () => null,
+}));
+
+vi.mock("@agent-native/toolkit/app/org", () => ({
   TeamPage: () => null,
   OrgMembersPage: ({ appRoles }: { appRoles?: unknown }) => {
     state.membersAppRoles = appRoles;
@@ -57,7 +63,8 @@ vi.mock("@agent-native/core/client/org", () => ({
   },
 }));
 
-vi.mock("@agent-native/core/client/settings", () => ({
+vi.mock("@agent-native/toolkit/app/settings", () => ({
+  AccountSettingsCard: () => null,
   CORE_SETTINGS_PAGES: [
     { id: "profile", component: () => null },
     {
@@ -88,7 +95,7 @@ vi.mock("@agent-native/core/client/settings", () => ({
   ),
   SettingsTabsPage: (props: NonNullable<typeof state.pageProps>) => {
     state.pageProps = props;
-    return <main>{props.generalGroups}</main>;
+    return <main>{state.redesign ? props.generalGroups : props.general}</main>;
   },
   useAgentSettingsTabs: () => [{ id: "organization", label: "Organization" }],
 }));
@@ -111,6 +118,7 @@ describe("Dispatch settings route", () => {
 
   beforeEach(() => {
     vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    state.redesign = false;
     state.pageProps = null;
     state.membersAppRoles = undefined;
     container = document.createElement("div");
@@ -137,11 +145,25 @@ describe("Dispatch settings route", () => {
     expect(state.membersAppRoles).toBe(dispatchAccessDescriptor);
   });
 
-  it("renders Dispatch rows in the app's General groups", () => {
+  it("keeps the language row and Admin link on today's General tab", () => {
+    render();
+
+    expect(container.querySelector('[data-row="language"]')).not.toBeNull();
+    expect(container.textContent).toContain(
+      "settings.chatFirstSessionWatchDescription",
+    );
+    expect(
+      state.pageProps?.generalSearchEntries?.map((entry) => entry.id),
+    ).toContain("dispatch-language");
+    expect(
+      state.pageProps?.extraTabs?.find((tab) => tab.id === "admin")?.href,
+    ).toBe("/admin");
+  });
+
+  it("drops the language row in the redesigned Settings", () => {
+    state.redesign = true;
     render();
 
-    expect(state.pageProps?.general).toBeUndefined();
-    expect(state.pageProps?.account).toBeUndefined();
     expect(container.querySelector('[data-row="language"]')).toBeNull();
     expect(container.querySelector('[data-row="chat-first"]')).not.toBeNull();
     expect(