@agent-native/dispatch 0.38.15 → 0.38.16-nightly-20260927213438

package/src/components/usage-alerts-panel.tsx

@@ -124,7 +124,7 @@ function AlertEditor({
           }
           disabled={isExisting}
         >
-          <SelectTrigger className="h-9 text-sm">
+          <SelectTrigger className="text-sm">
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
@@ -143,7 +143,7 @@ function AlertEditor({
           value={draft.unit}
           onValueChange={(value) => onChange({ unit: value as AlertUnit })}
         >
-          <SelectTrigger className="h-9 text-sm">
+          <SelectTrigger className="text-sm">
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
@@ -161,7 +161,7 @@ function AlertEditor({
           step={draft.unit === "tokens" ? "1" : "0.01"}
           value={draft.limit}
           onChange={(event) => onChange({ limit: event.target.value })}
-          className="h-9 text-sm"
+          className="text-sm"
         />
       </label>
       <label className="space-y-1.5 text-xs text-muted-foreground">
@@ -172,7 +172,7 @@ function AlertEditor({
             onChange({ period: value as "day" | "month" })
           }
         >
-          <SelectTrigger className="h-9 text-sm">
+          <SelectTrigger className="text-sm">
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
@@ -199,19 +199,13 @@ function AlertEditor({
         <Button
           type="button"
           size="sm"
-          className="ms-auto h-8"
+          className="ms-auto"
           onClick={onSave}
           disabled={isPending}
         >
           Save
         </Button>
-        <Button
-          type="button"
-          variant="ghost"
-          size="sm"
-          className="h-8"
-          onClick={onCancel}
-        >
+        <Button type="button" variant="ghost" size="sm" onClick={onCancel}>
           Cancel
         </Button>
       </div>

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

@@ -37,10 +37,11 @@ export function WorkspaceAppSearch({
         />
         <Input
           id={inputId}
+          size="sm"
           value={query}
           onChange={(event) => onQueryChange(event.target.value)}
           placeholder={placeholder}
-          className="h-9 bg-background ps-9"
+          className="bg-background ps-9"
           autoComplete="off"
         />
       </div>

package/src/routes/pages/automations.tsx

@@ -228,11 +228,12 @@ export default function AutomationsRoute() {
                 className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground"
               />
               <Input
+                size="sm"
                 value={query}
                 onChange={(event) => setQuery(event.target.value)}
                 placeholder="Search automations"
                 aria-label="Search automations"
-                className="h-8 pl-8 text-xs"
+                className="pl-8 text-xs"
               />
             </div>
             <div className="flex items-center gap-2 text-sm text-muted-foreground">
@@ -251,7 +252,8 @@ export default function AutomationsRoute() {
               }}
             >
               <SelectTrigger
-                className="h-8 w-[10.5rem] text-xs"
+                size="sm"
+                className="w-[10.5rem] text-xs"
                 aria-label="Automation view"
               >
                 <SelectValue />

package/src/routes/pages/metrics.tsx

@@ -570,7 +570,8 @@ function UserSelector({
       }
     >
       <SelectTrigger
-        className="h-8 w-[210px] text-xs"
+        size="sm"
+        className="w-[210px] text-xs"
         aria-label="Filter usage by user"
       >
         <SelectValue placeholder="All users" />

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

@@ -0,0 +1,179 @@
+// @vitest-environment happy-dom
+
+import { act, type ComponentType, type ReactNode } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { MemoryRouter } from "react-router";
+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;
+    searchEntries?: unknown;
+  }>,
+  membersAppRoles: undefined as unknown,
+  pageProps: null as null | {
+    general?: ReactNode;
+    generalGroups?: ReactNode;
+    generalSearchEntries?: Array<{ id: string; hash?: string }>;
+    extraTabs?: Array<{ id: string; href?: string }>;
+    whatsNew?: ReactNode;
+  },
+}));
+
+vi.mock("@agent-native/core/client/agent-chat", () => ({
+  CHAT_FIRST_MODE_CHANGED_EVENT: "chat-first-mode-changed",
+  readChatFirstModeState: () => ({ enabled: false, availability: "ok" }),
+  writeChatFirstMode: () => ({ ok: true }),
+}));
+
+vi.mock("@agent-native/core/client/changelog", () => ({
+  ChangelogSettingsCard: ({ markdown }: { markdown: string }) => (
+    <div data-changelog>{markdown}</div>
+  ),
+}));
+
+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,
+}));
+
+vi.mock("@agent-native/core/client/i18n", () => ({
+  useT: () => (key: string) => key,
+  LanguagePicker: () => null,
+}));
+
+vi.mock("@agent-native/core/client/org", () => ({
+  TeamPage: () => null,
+  OrgMembersPage: ({ appRoles }: { appRoles?: unknown }) => {
+    state.membersAppRoles = appRoles;
+    return <div data-members-page />;
+  },
+}));
+
+vi.mock("@agent-native/core/client/settings", () => ({
+  AccountSettingsCard: () => null,
+  CORE_SETTINGS_PAGES: [
+    { id: "profile", component: () => null },
+    {
+      id: "members",
+      component: () => null,
+      searchEntries: [{ id: "invite-members" }],
+    },
+  ],
+  registerSettingsPages: (pages: typeof state.registered) => {
+    state.registered.push(...pages);
+  },
+  SettingsGroup: ({ children }: { children: ReactNode }) => (
+    <section>{children}</section>
+  ),
+  SettingsRow: ({
+    id,
+    label,
+    children,
+  }: {
+    id?: string;
+    label: ReactNode;
+    children?: ReactNode;
+  }) => (
+    <div data-row={id}>
+      {label}
+      {children}
+    </div>
+  ),
+  SettingsTabsPage: (props: NonNullable<typeof state.pageProps>) => {
+    state.pageProps = props;
+    return <main>{state.redesign ? props.generalGroups : props.general}</main>;
+  },
+  useAgentSettingsTabs: () => [{ id: "organization", label: "Organization" }],
+}));
+
+const { DispatchSettingsPage } = await import("./settings.js");
+
+describe("Dispatch settings route", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  function render() {
+    act(() => {
+      root.render(
+        <MemoryRouter>
+          <DispatchSettingsPage changelog="## 2026-09-25" />
+        </MemoryRouter>,
+      );
+    });
+  }
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    state.redesign = false;
+    state.pageProps = null;
+    state.membersAppRoles = undefined;
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.unstubAllGlobals();
+  });
+
+  it("replaces core Members with one that keeps Dispatch app roles", () => {
+    const members = state.registered.find((page) => page.id === "members");
+    expect(members?.searchEntries).toEqual([{ id: "invite-members" }]);
+
+    const Members = members!.component;
+    act(() => {
+      root.render(<Members />);
+    });
+
+    expect(container.querySelector("[data-members-page]")).not.toBeNull();
+    expect(state.membersAppRoles).toBe(dispatchAccessDescriptor);
+  });
+
+  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(container.querySelector('[data-row="language"]')).toBeNull();
+    expect(container.querySelector('[data-row="chat-first"]')).not.toBeNull();
+    expect(
+      container.querySelector('[data-row="workspace-resources"]')?.textContent,
+    ).toContain("settings.resourcesTitle");
+    expect(container.textContent).not.toContain(
+      "settings.chatFirstSessionWatchDescription",
+    );
+    expect(
+      state.pageProps?.generalSearchEntries?.map((entry) => entry.hash),
+    ).toEqual(["workspace-resources", "chat-first"]);
+    expect(
+      state.pageProps?.extraTabs?.find((tab) => tab.id === "admin")?.href,
+    ).toBe("/admin");
+  });
+});

package/src/routes/pages/settings.tsx

@@ -4,36 +4,69 @@ import {
   writeChatFirstMode,
 } from "@agent-native/core/client/agent-chat";
 import { ChangelogSettingsCard } from "@agent-native/core/client/changelog";
+import {
+  useFeatureFlag,
+  useFeatureFlagState,
+} from "@agent-native/core/client/feature-flags";
 import { LanguagePicker, useT } from "@agent-native/core/client/i18n";
-import { TeamPage } from "@agent-native/core/client/org";
+import { OrgMembersPage, TeamPage } from "@agent-native/core/client/org";
 import {
+  AccountSettingsCard,
+  CORE_SETTINGS_PAGES,
+  registerSettingsPages,
+  SettingsGroup,
+  SettingsRow,
   SettingsTabsPage,
   useAgentSettingsTabs,
+  type SettingsSearchEntry,
 } from "@agent-native/core/client/settings";
+import { SETTINGS_REDESIGN_FLAG } from "@agent-native/core/feature-flags/registry";
 import { IconShield } from "@tabler/icons-react";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { Link } from "react-router";
 
-import changelog from "../../../CHANGELOG.md?raw";
-import { DispatchShell } from "../../components/dispatch-shell";
+import packageChangelog from "../../../CHANGELOG.md?raw";
 import { Button } from "../../components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "../../components/ui/card";
-import { Label } from "../../components/ui/label";
 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 default function SettingsRoute() {
+export interface DispatchSettingsPageProps {
+  /** Raw CHANGELOG.md behind What's new. */
+  changelog: string;
+}
+
+/**
+ * Dispatch's Settings. The template route renders it with the app's own
+ * changelog; `dispatchRoutes` consumers get the default export.
+ */
+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",
@@ -48,7 +81,7 @@ export default function SettingsRoute() {
     ),
   });
   const settingsTabs = [
-    ...agentSettingsTabs.filter((tab) => tab.id !== "integrations"),
+    ...agentSettingsTabs,
     {
       id: "admin",
       label: t("dispatch.nav.admin", { defaultValue: "Admin" }),
@@ -66,16 +99,14 @@ export default function SettingsRoute() {
     string | null
   >(
     chatFirstModeState.availability === "unavailable"
-      ? "This browser is not allowing local preferences, so Chat-first mode cannot be persisted."
+      ? t("settings.chatFirstStorageUnavailable")
       : null,
   );
 
   function updateChatFirstMode(enabled: boolean) {
     const result = writeChatFirstMode(enabled);
     if (!result.ok) {
-      setChatFirstStorageNotice(
-        "This browser blocked local preferences, so Chat-first mode was not changed.",
-      );
+      setChatFirstStorageNotice(t("settings.chatFirstStorageBlocked"));
       return;
     }
     setChatFirstStorageNotice(null);
@@ -87,110 +118,139 @@ export default function SettingsRoute() {
     );
   }
 
+  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 (
-    <DispatchShell
-      title={t("settings.title")}
-      description={t("settings.description")}
-    >
-      <SettingsTabsPage
-        extraTabs={settingsTabs}
-        general={
-          <div className="mx-auto w-full max-w-3xl space-y-6">
-            <Card>
-              <CardHeader>
-                <CardTitle className="text-base">
-                  {t("settings.languageTitle")}
-                </CardTitle>
-                <CardDescription>
-                  {t("settings.languageDescription")}
-                </CardDescription>
-              </CardHeader>
-              <CardContent className="max-w-xs space-y-1.5">
-                <Label>{t("settings.languageLabel")}</Label>
-                <LanguagePicker label={t("settings.languageLabel")} />
-              </CardContent>
-            </Card>
+    <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>
 
-            <Card>
-              <CardHeader>
-                <CardTitle className="text-base">
-                  Chat-first workspace
-                </CardTitle>
-                <CardDescription>
-                  Keep chats at the center and open workspace apps in a
-                  contextual pane beside them.
-                </CardDescription>
-              </CardHeader>
-              <CardContent className="flex items-center justify-between gap-4">
-                <div className="space-y-1">
-                  <Label htmlFor="dispatch-chat-first-mode">
-                    Use chat-first navigation
-                  </Label>
-                  <p className="text-sm text-muted-foreground">
-                    This preference only changes your local Dispatch shell.
-                  </p>
-                  <p className="text-sm text-muted-foreground">
-                    Session watch and follow-up messaging work in this browser
-                    pane too. Local CLI subscription detection stays in the
-                    Electron app; Dispatch uses workspace/provider credentials.
-                  </p>
+          <SettingsGroup>
+            <SettingsRow
+              id="language"
+              label={t("settings.languageTitle")}
+              description={t("settings.languageDescription")}
+              control={
+                <div className="w-56">
+                  <LanguagePicker label={t("settings.languageLabel")} />
                 </div>
-                <Switch
-                  id="dispatch-chat-first-mode"
-                  checked={chatFirstMode}
-                  onCheckedChange={updateChatFirstMode}
-                />
-              </CardContent>
-              {chatFirstStorageNotice ? (
-                <p className="px-6 pb-4 text-sm text-destructive" role="alert">
-                  {chatFirstStorageNotice}
-                </p>
-              ) : null}
-            </Card>
+              }
+            />
+            <SettingsRow
+              id="workspace-resources"
+              label={t("settings.workspaceTitle")}
+              description={t("settings.workspaceDescription")}
+              control={resourceSettingsButton}
+            />
+            {connectAppsRow}
+          </SettingsGroup>
 
-            <Card>
-              <CardHeader>
-                <CardTitle className="text-base">
-                  {t("settings.workspaceTitle")}
-                </CardTitle>
-                <CardDescription>
-                  {t("settings.workspaceDescription")}
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <Button variant="outline" asChild>
-                  <Link to="/admin/workspace">
-                    {t("settings.openResourceSettings")}
-                  </Link>
-                </Button>
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader>
-                <CardTitle className="text-base">
-                  {t("settings.deliveryTitle")}
-                </CardTitle>
-                <CardDescription>
-                  {t("settings.deliveryDescription")}
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <Button variant="outline" asChild>
-                  <Link to="/admin/destinations">
-                    {t("settings.openDelivery")}
-                  </Link>
-                </Button>
-              </CardContent>
-            </Card>
-          </div>
-        }
-        whatsNew={
-          <div className="mx-auto w-full max-w-3xl">
-            <ChangelogSettingsCard markdown={changelog} />
-          </div>
-        }
-      />
-    </DispatchShell>
+          <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>
+      }
+    />
   );
 }
+
+export default function SettingsRoute() {
+  return <DispatchSettingsPage changelog={packageChangelog} />;
+}

package/src/routes/pages/thread-debug.tsx

@@ -972,7 +972,7 @@ function ThreadDetail({ detail }: { detail: ThreadDebugResponse }) {
       ) : null}
 
       <Tabs defaultValue="overview" className="p-5">
-        <TabsList className="h-9">
+        <TabsList>
           <TabsTrigger value="overview">Overview</TabsTrigger>
           <TabsTrigger value="timeline">Timeline</TabsTrigger>
           <TabsTrigger value="transcript">Transcript</TabsTrigger>

package/src/routes/pages/vault.tsx

@@ -755,11 +755,12 @@ function RequestRow({
           <div className="flex-1 space-y-1">
             <Label className="text-xs">Key value to provision</Label>
             <Input
+              size="sm"
               type="password"
               placeholder="Enter the key value"
               value={secretValue}
               onChange={(e) => setSecretValue(e.target.value)}
-              className="h-8 text-sm"
+              className="text-sm"
             />
           </div>
           <Button
@@ -1028,7 +1029,7 @@ export default function VaultRoute() {
                       initial: { credentialKey: name ?? "" },
                     })
                   }
-                  triggerClassName="h-9 px-3 text-sm"
+                  size="default"
                 />
                 <AddSecretDialog
                   open={addDialogState.open}

package/src/server/lib/usage-metrics-store.spec.ts

@@ -19,6 +19,7 @@ vi.mock("@agent-native/core/agent/engine", () => ({
   getAgentEngineEntry: vi.fn(() => null),
   isAgentEngineSettingConfigured: vi.fn(() => false),
   isStoredEngineUsable: vi.fn(() => false),
+  readDefaultAgentEngineSetting: (...args: any[]) => mocks.getSetting(...args),
   registerBuiltinEngines: () => mocks.registerBuiltinEngines(),
 }));