@agent-native/dispatch 0.40.0 → 0.40.2

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.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(

package/src/routes/pages/settings.tsx

@@ -3,10 +3,16 @@ import {
   readChatFirstModeState,
   writeChatFirstMode,
 } from "@agent-native/core/client/agent-chat";
-import { useFeatureFlag } from "@agent-native/core/client/feature-flags";
+import {
+  useFeatureFlag,
+  useFeatureFlagState,
+} from "@agent-native/core/client/feature-flags";
 import { useT } from "@agent-native/core/client/i18n";
-import { OrgMembersPage, TeamPage } from "@agent-native/core/client/org";
+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,
@@ -14,7 +20,8 @@ import {
   SettingsTabsPage,
   useAgentSettingsTabs,
   type SettingsSearchEntry,
-} from "@agent-native/core/client/settings";
+} 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";
@@ -36,8 +43,8 @@ function DispatchMembersSettingsPage() {
   return <OrgMembersPage appRoles={dispatchAccessDescriptor} />;
 }
 
-// Settings shows Members from core; Dispatch's replaces it so the app-role
-// column stays.
+// The redesigned Settings shows Members from core; Dispatch's replaces it so
+// the app-role column stays.
 registerSettingsPages([
   { ...coreMembersPage, component: DispatchMembersSettingsPage },
 ]);
@@ -58,6 +65,9 @@ export interface DispatchSettingsPageProps {
 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",
@@ -111,9 +121,21 @@ export function DispatchSettingsPage({ changelog }: DispatchSettingsPageProps) {
 
   const generalSearchEntries = useMemo<SettingsSearchEntry[]>(
     () => [
+      ...(redesign
+        ? []
+        : [
+            {
+              id: "dispatch-language",
+              label: t("settings.languageTitle"),
+              keywords: "language locale translation i18n",
+              hash: "language",
+            },
+          ]),
       {
         id: "dispatch-workspace",
-        label: t("settings.resourcesTitle"),
+        label: redesign
+          ? t("settings.resourcesTitle")
+          : t("settings.workspaceTitle"),
         keywords: "workspace resources integrations vault destinations",
         hash: "workspace-resources",
       },
@@ -124,7 +146,7 @@ export function DispatchSettingsPage({ changelog }: DispatchSettingsPageProps) {
         hash: "chat-first",
       },
     ],
-    [t],
+    [redesign, t],
   );
 
   const chatFirstSwitch = (
@@ -159,8 +181,49 @@ export function DispatchSettingsPage({ changelog }: DispatchSettingsPageProps) {
 
   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
@@ -180,6 +243,11 @@ export function DispatchSettingsPage({ changelog }: DispatchSettingsPageProps) {
           {connectAppsRow}
         </SettingsGroup>
       }
+      whatsNew={
+        <div className="mx-auto w-full max-w-2xl">
+          <ChangelogSettingsCard markdown={changelog} />
+        </div>
+      }
       whatsNewMarkdown={changelog}
     />
   );

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

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

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

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

package/src/routes/pages/vault.tsx

@@ -7,7 +7,7 @@ import { useOrgRole } from "@agent-native/core/client/org";
 import {
   NewKeyMenu,
   type NewKeyOption,
-} from "@agent-native/core/client/settings";
+} from "@agent-native/toolkit/app/settings";
 import {
   IconChevronDown,
   IconChevronRight,

package/src/shared/app-roles.ts

@@ -1,4 +1,4 @@
-import type { AppRolesDescriptor } from "@agent-native/core/client/org";
+import type { AppRolesDescriptor } from "@agent-native/core/org/app-roles";
 
 export const dispatchAccessDescriptor = {
   appId: "dispatch",