@agent-native/core 0.117.2 → 0.118.0

package/src/client/settings/SettingsTabsPage.tsx

@@ -1,3 +1,4 @@
+import { Tabs, useDesignSystem } from "@agent-native/toolkit/design-system";
 import {
   IconHistory,
   IconSearch,
@@ -252,7 +253,6 @@ export function SettingsTabsPage({
     : (tabs[0]?.id ?? "general");
   const tabGroups = useMemo(() => {
     const groups: Array<{ id: string; tabs: SettingsTabItem[] }> = [];
-
     for (const tab of tabs) {
       const groupId = tab.group ?? "app";
       const previousGroup = groups.at(-1);
@@ -262,7 +262,6 @@ export function SettingsTabsPage({
         groups.push({ id: groupId, tabs: [tab] });
       }
     }
-
     return groups;
   }, [tabs]);
   const isControlled = value !== undefined;
@@ -271,6 +270,8 @@ export function SettingsTabsPage({
   );
   const activeTab = isControlled ? value : internalTab;
   const [query, setQuery] = useState("");
+  const designSystem = useDesignSystem();
+  const hasCustomTabs = Boolean(designSystem?.components?.Tabs);
 
   const changeTab = useCallback(
     (tabId: string) => {
@@ -517,6 +518,26 @@ export function SettingsTabsPage({
               })
             )}
           </div>
+        ) : hasCustomTabs ? (
+          <Tabs
+            items={tabs.map((tab) => ({
+              value: tab.id,
+              label: tab.label,
+              icon: tab.icon ? <tab.icon className="size-4 shrink-0" /> : null,
+              // The panel stays outside this navigation rail so settings
+              // keeps its existing scroll container and deep-link behavior.
+              content: null,
+            }))}
+            value={activeTab}
+            onChange={(tabId) => {
+              const nextTab = String(tabId);
+              changeTab(nextTab);
+              if (!isControlled) updateHashForTab(nextTab);
+            }}
+            orientation="vertical"
+            aria-label={ariaLabel}
+            className="flex gap-1 overflow-x-auto sm:flex-col sm:overflow-x-visible"
+          />
         ) : (
           <nav
             aria-label={ariaLabel}

package/src/client/settings/VoiceTranscriptionSection.tsx

@@ -10,6 +10,7 @@
  * mirrors the server transcription route's key/env resolution.
  */
 
+import { Switch } from "@agent-native/toolkit/design-system";
 import {
   IconAlertCircle,
   IconCheck,
@@ -467,24 +468,12 @@ export function VoiceTranscriptionSection() {
           </p>
         </div>
         <div className="flex shrink-0 flex-col items-end gap-1">
-          <button
-            type="button"
-            role="switch"
-            aria-checked={!!cleanupEnabled}
-            onClick={() => toggleCleanup(!cleanupEnabled)}
-            // Theme tokens; streaming agent owns layout.
-            className={`relative inline-flex h-4 w-7 shrink-0 cursor-pointer items-center rounded-full transition-colors ${
-              cleanupEnabled
-                ? "bg-primary"
-                : "bg-muted-foreground/30 hover:bg-muted-foreground/50"
-            }`}
-          >
-            <span
-              className={`inline-block h-3 w-3 transform rounded-full bg-background transition-transform ${
-                cleanupEnabled ? "translate-x-3.5" : "translate-x-0.5"
-              }`}
-            />
-          </button>
+          <Switch
+            checked={!!cleanupEnabled}
+            onChange={toggleCleanup}
+            aria-label="AI cleanup"
+            className="shrink-0"
+          />
           {cleanupEnabled && (
             <span className="text-[10px] text-muted-foreground">
               {builderStatus?.configured

package/src/client/settings/index.ts

@@ -25,3 +25,10 @@ export {
   type OpenBuilderConnectPopupOptions,
 } from "./useBuilderStatus.js";
 export { SecretsSection, type SecretsSectionProps } from "./SecretsSection.js";
+export {
+  normalizeSettingsSection,
+  settingsSectionDomId,
+  useSettingsPanelController,
+  type SettingsPanelController,
+  type SettingsPanelControllerOptions,
+} from "./useSettingsPanelController.js";

package/src/client/settings/useSettingsPanelController.ts

@@ -0,0 +1,155 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+import {
+  ALL_SETTINGS_SECTIONS,
+  SETTINGS_SECTION_IDS,
+  type SettingsSectionId,
+} from "./agent-settings-search.js";
+
+export interface SettingsPanelControllerOptions {
+  sections?: readonly SettingsSectionId[];
+  initialSection?: string | null;
+  sectionRequestKey?: number;
+  onScrollToSection?: (section: SettingsSectionId) => void;
+}
+
+export interface SettingsPanelController {
+  sections: readonly SettingsSectionId[];
+  openSection: SettingsSectionId | null;
+  focusSecretKey: string | undefined;
+  isSectionVisible: (section: SettingsSectionId) => boolean;
+  isSectionOpen: (section: SettingsSectionId) => boolean;
+  toggleSection: (section: SettingsSectionId) => void;
+  openSettingsSection: (
+    section: SettingsSectionId,
+    options?: { scroll?: boolean },
+  ) => void;
+}
+
+export function normalizeSettingsSection(
+  value?: string | null,
+): SettingsSectionId | null {
+  const normalized = value?.replace(/^#/, "").toLowerCase() ?? "";
+  if (!normalized) return null;
+  if (normalized.startsWith("secrets")) return "secrets";
+  if (
+    normalized === "workspace" ||
+    normalized === "workspace-settings" ||
+    normalized === "organization" ||
+    normalized === "org"
+  ) {
+    return "secrets";
+  }
+  if (normalized === "agent-engine") return "llm";
+  if (
+    normalized === "agent-model-defaults" ||
+    normalized === "app-model-defaults" ||
+    normalized === "models"
+  ) {
+    return "app-models";
+  }
+  if (normalized === "agent-limits" || normalized === "loop-settings") {
+    return "limits";
+  }
+  return SETTINGS_SECTION_IDS.has(normalized as SettingsSectionId)
+    ? (normalized as SettingsSectionId)
+    : null;
+}
+
+export function settingsSectionDomId(section: SettingsSectionId): string {
+  return `agent-settings-section-${section}`;
+}
+
+function firstVisibleSection(
+  sections: readonly SettingsSectionId[],
+): SettingsSectionId {
+  if (sections.includes("llm")) return "llm";
+  return sections[0] ?? "llm";
+}
+
+function initialOpenSection(
+  sections: readonly SettingsSectionId[],
+): SettingsSectionId {
+  const hashSection =
+    typeof window === "undefined"
+      ? null
+      : normalizeSettingsSection(window.location.hash);
+  return hashSection && sections.includes(hashSection)
+    ? hashSection
+    : firstVisibleSection(sections);
+}
+
+export function useSettingsPanelController({
+  sections = ALL_SETTINGS_SECTIONS,
+  initialSection,
+  sectionRequestKey,
+  onScrollToSection,
+}: SettingsPanelControllerOptions = {}): SettingsPanelController {
+  const visibleSections = useMemo(() => new Set(sections), [sections]);
+  const isSectionVisible = useCallback(
+    (section: SettingsSectionId) => visibleSections.has(section),
+    [visibleSections],
+  );
+  const [openSection, setOpenSection] = useState<SettingsSectionId | null>(() =>
+    initialOpenSection(sections),
+  );
+  const [focusSecretKey, setFocusSecretKey] = useState<string>();
+
+  const openSettingsSection = useCallback(
+    (section: SettingsSectionId, options: { scroll?: boolean } = {}) => {
+      setOpenSection(section);
+      if (options.scroll) onScrollToSection?.(section);
+    },
+    [onScrollToSection],
+  );
+
+  const toggleSection = useCallback((section: SettingsSectionId) => {
+    setOpenSection((current) => (current === section ? null : section));
+  }, []);
+
+  const isSectionOpen = useCallback(
+    (section: SettingsSectionId) => openSection === section,
+    [openSection],
+  );
+
+  useEffect(() => {
+    const section = normalizeSettingsSection(initialSection);
+    if (!section || !isSectionVisible(section)) return;
+    if (section !== "secrets") setFocusSecretKey(undefined);
+    openSettingsSection(section, { scroll: true });
+  }, [
+    initialSection,
+    sectionRequestKey,
+    isSectionVisible,
+    openSettingsSection,
+  ]);
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const handleHashChange = () => {
+      const hash = window.location.hash?.replace(/^#/, "") ?? "";
+      const section = normalizeSettingsSection(hash);
+      if (!section || !isSectionVisible(section)) return;
+      if (hash.startsWith("secrets:") || hash === "secrets") {
+        const key = hash.slice("secrets:".length);
+        setFocusSecretKey(key || undefined);
+      } else {
+        setFocusSecretKey(undefined);
+      }
+      openSettingsSection(section, { scroll: true });
+    };
+    handleHashChange();
+    window.addEventListener("hashchange", handleHashChange);
+    return () => window.removeEventListener("hashchange", handleHashChange);
+  }, [isSectionVisible, openSettingsSection]);
+
+  return {
+    sections,
+    openSection,
+    focusSecretKey,
+    isSectionVisible,
+    isSectionOpen,
+    toggleSection,
+    openSettingsSection,
+  };
+}

package/src/client/setup-connections/BuilderConnectCard.tsx

@@ -1,39 +1,51 @@
-import { IconCheck, IconLoader2, IconPlugConnected } from "@tabler/icons-react";
+import {
+  ActionButton,
+  DesignSystemErrorBoundary,
+  Status,
+  Surface,
+} from "@agent-native/toolkit/design-system";
+import { IconCheck, IconPlugConnected } from "@tabler/icons-react";
+import type { ReactNode } from "react";
 
-import { useBuilderConnectFlow } from "../settings/useBuilderStatus.js";
 import { cn } from "../utils.js";
+import {
+  useBuilderConnectCardController,
+  type BuilderConnectCardControllerOptions,
+  type BuilderConnectCardViewModel,
+} from "./useBuilderConnectCardController.js";
 
-export interface BuilderConnectCardProps {
-  title?: string;
-  description?: string;
-  trackingSource?: string;
+export interface BuilderConnectCardProps extends BuilderConnectCardControllerOptions {
   className?: string;
-  onConnected?: (orgName: string | null) => void;
+  render?: (context: BuilderConnectCardRenderContext) => ReactNode;
 }
 
-export function BuilderConnectCard({
-  title = "Builder connect",
-  description = "Connect Builder for managed model access, browser automation, and workspace identity.",
-  trackingSource = "setup_connections_page",
-  className,
-  onConnected,
-}: BuilderConnectCardProps) {
-  const flow = useBuilderConnectFlow({
-    trackingSource,
-    onConnected: ({ orgName }) => onConnected?.(orgName),
-  });
+export interface BuilderConnectCardRenderContext {
+  viewModel: BuilderConnectCardViewModel;
+  className?: string;
+}
 
-  const connectedLabel = flow.orgName
-    ? `Connected to ${flow.orgName}`
-    : "Connected";
-  const statusLabel = !flow.hasFetchedStatus
-    ? "Checking"
-    : flow.configured
-      ? connectedLabel
-      : "Ready to connect";
+export interface DefaultBuilderConnectCardViewProps {
+  viewModel: BuilderConnectCardViewModel;
+  className?: string;
+}
+
+export function DefaultBuilderConnectCardView({
+  viewModel,
+  className,
+}: DefaultBuilderConnectCardViewProps) {
+  const action = viewModel.action;
+  const statusTone =
+    viewModel.status.kind === "connected"
+      ? "success"
+      : viewModel.status.kind === "checking"
+        ? "info"
+        : "neutral";
 
   return (
-    <section
+    <Surface
+      as="section"
+      elevation="low"
+      padding="none"
       className={cn(
         "rounded-lg border border-border bg-background p-4 shadow-sm",
         className,
@@ -43,12 +55,12 @@ export function BuilderConnectCard({
         <span
           className={cn(
             "mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-md border",
-            flow.configured
+            viewModel.configured
               ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-600"
               : "border-border bg-muted text-muted-foreground",
           )}
         >
-          {flow.configured ? (
+          {viewModel.configured ? (
             <IconCheck className="size-4" />
           ) : (
             <IconPlugConnected className="size-4" />
@@ -56,34 +68,87 @@ export function BuilderConnectCard({
         </span>
         <div className="min-w-0 flex-1">
           <div className="flex flex-wrap items-center gap-2">
-            <h2 className="text-sm font-semibold text-foreground">{title}</h2>
-            <span className="rounded-md border border-border bg-muted px-1.5 py-0.5 text-[11px] font-medium text-muted-foreground">
-              {statusLabel}
-            </span>
+            <h2 className="text-sm font-semibold text-foreground">
+              {viewModel.title}
+            </h2>
+            <Status
+              tone={statusTone}
+              size="compact"
+              className="rounded-md border border-border bg-muted px-1.5 py-0.5 text-[11px] font-medium text-muted-foreground"
+            >
+              {viewModel.status.label}
+            </Status>
           </div>
           <p className="mt-1 text-sm leading-5 text-muted-foreground">
-            {description}
+            {viewModel.description}
           </p>
-          {flow.error ? (
-            <p className="mt-2 text-xs text-destructive">{flow.error}</p>
+          {viewModel.error ? (
+            <p className="mt-2 text-xs text-destructive">{viewModel.error}</p>
           ) : null}
-          {!flow.configured ? (
-            <button
-              type="button"
-              onClick={() => flow.start()}
-              disabled={flow.connecting}
-              className="mt-3 inline-flex h-8 items-center gap-2 rounded-md border border-border bg-foreground px-3 text-xs font-medium text-background transition-colors hover:bg-foreground/90 disabled:cursor-not-allowed disabled:opacity-60"
-            >
-              {flow.connecting ? (
-                <IconLoader2 className="size-3.5 animate-spin" />
-              ) : (
-                <IconPlugConnected className="size-3.5" />
-              )}
-              Connect Builder
-            </button>
+          {action ? (
+            <div className="mt-3">
+              <ActionButton
+                type="button"
+                intent="primary"
+                size="compact"
+                pending={action.pending}
+                disabled={action.disabled}
+                className="inline-flex h-8 items-center gap-2 rounded-md border border-border bg-foreground px-3 text-xs font-medium text-background transition-colors hover:bg-foreground/90 disabled:cursor-not-allowed disabled:opacity-60"
+                leadingIcon={<IconPlugConnected className="size-3.5" />}
+                onPress={action.onPress}
+              >
+                {action.label}
+              </ActionButton>
+            </div>
           ) : null}
         </div>
       </div>
-    </section>
+    </Surface>
   );
 }
+
+export function BuilderConnectCard({
+  title,
+  description,
+  trackingSource,
+  className,
+  onConnected,
+  render,
+}: BuilderConnectCardProps) {
+  const viewModel = useBuilderConnectCardController({
+    title,
+    description,
+    trackingSource,
+    onConnected,
+  });
+
+  const fallback = (
+    <DefaultBuilderConnectCardView
+      viewModel={viewModel}
+      className={className}
+    />
+  );
+  return render ? (
+    <DesignSystemErrorBoundary
+      component="BuilderConnectCard"
+      fallback={fallback}
+    >
+      <BuilderConnectCardCustomView
+        render={render}
+        viewModel={viewModel}
+        className={className}
+      />
+    </DesignSystemErrorBoundary>
+  ) : (
+    fallback
+  );
+}
+
+function BuilderConnectCardCustomView({
+  render,
+  viewModel,
+  className,
+}: Required<Pick<BuilderConnectCardProps, "render">> &
+  BuilderConnectCardRenderContext) {
+  return render({ viewModel, className });
+}

package/src/client/setup-connections/index.ts

@@ -1,7 +1,17 @@
 export {
   BuilderConnectCard,
+  DefaultBuilderConnectCardView,
+  type DefaultBuilderConnectCardViewProps,
   type BuilderConnectCardProps,
+  type BuilderConnectCardRenderContext,
 } from "./BuilderConnectCard.js";
+export {
+  useBuilderConnectCardController,
+  type BuilderConnectCardAction,
+  type BuilderConnectCardControllerOptions,
+  type BuilderConnectCardStatus,
+  type BuilderConnectCardViewModel,
+} from "./useBuilderConnectCardController.js";
 export { BUILT_IN_SETUP_READINESS_UI_IDS } from "./catalog.js";
 export {
   ProviderReadinessBadge,

package/src/client/setup-connections/useBuilderConnectCardController.ts

@@ -0,0 +1,82 @@
+import { useCallback } from "react";
+
+import { useBuilderConnectFlow } from "../settings/useBuilderStatus.js";
+
+const DEFAULT_TITLE = "Builder connect";
+const DEFAULT_DESCRIPTION =
+  "Connect Builder for managed model access, browser automation, and workspace identity.";
+const DEFAULT_TRACKING_SOURCE = "setup_connections_page";
+
+export interface BuilderConnectCardControllerOptions {
+  title?: string;
+  description?: string;
+  trackingSource?: string;
+  onConnected?: (orgName: string | null) => void;
+}
+
+export type BuilderConnectCardStatus =
+  | { kind: "checking"; label: "Checking" }
+  | { kind: "ready"; label: "Ready to connect" }
+  | { kind: "connected"; label: string };
+
+export interface BuilderConnectCardAction {
+  label: "Connect Builder";
+  pending: boolean;
+  disabled: boolean;
+  onPress: () => void;
+}
+
+export interface BuilderConnectCardViewModel {
+  title: string;
+  description: string;
+  status: BuilderConnectCardStatus;
+  configured: boolean;
+  pending: boolean;
+  error: string | null;
+  orgName: string | null;
+  action: BuilderConnectCardAction | null;
+}
+
+export function useBuilderConnectCardController({
+  title = DEFAULT_TITLE,
+  description = DEFAULT_DESCRIPTION,
+  trackingSource = DEFAULT_TRACKING_SOURCE,
+  onConnected,
+}: BuilderConnectCardControllerOptions = {}): BuilderConnectCardViewModel {
+  const handleConnected = useCallback(
+    ({ orgName }: { orgName: string | null }) => onConnected?.(orgName),
+    [onConnected],
+  );
+  const flow = useBuilderConnectFlow({
+    trackingSource,
+    onConnected: handleConnected,
+  });
+  const handlePress = useCallback(() => flow.start(), [flow.start]);
+
+  const status: BuilderConnectCardStatus = !flow.hasFetchedStatus
+    ? { kind: "checking", label: "Checking" }
+    : flow.configured
+      ? {
+          kind: "connected",
+          label: flow.orgName ? `Connected to ${flow.orgName}` : "Connected",
+        }
+      : { kind: "ready", label: "Ready to connect" };
+
+  return {
+    title,
+    description,
+    status,
+    configured: flow.configured,
+    pending: flow.connecting,
+    error: flow.error,
+    orgName: flow.orgName,
+    action: flow.configured
+      ? null
+      : {
+          label: "Connect Builder",
+          pending: flow.connecting,
+          disabled: flow.connecting,
+          onPress: handlePress,
+        },
+  };
+}