@agent-native/core 0.97.0 → 0.98.1

package/corpus/core/src/client/settings/SettingsPanel.tsx

@@ -164,12 +164,14 @@ function SettingsSelect({
   value,
   options,
   onValueChange,
+  disabled = false,
 }: {
   label: string;
   labelAdornment?: React.ReactNode;
   value: string;
   options: SettingsSelectOption[];
   onValueChange: (value: string) => void;
+  disabled?: boolean;
 }) {
   const isPage = useSettingsSurface() === "page";
   const controlStyle = isPage ? CONTROL_STYLE_PAGE : CONTROL_STYLE;
@@ -181,10 +183,14 @@ function SettingsSelect({
         <p className={fieldLabelClass(isPage)}>{label}</p>
         {labelAdornment}
       </div>
-      <SelectPrimitive.Root value={value} onValueChange={onValueChange}>
+      <SelectPrimitive.Root
+        value={value}
+        onValueChange={onValueChange}
+        disabled={disabled}
+      >
         <SelectPrimitive.Trigger
           className={cn(
-            "flex w-full items-center justify-between rounded-md border border-border bg-background px-3 text-start text-foreground outline-none transition-colors hover:bg-accent/40 data-[placeholder]:text-muted-foreground",
+            "flex w-full items-center justify-between rounded-md border border-border bg-background px-3 text-start text-foreground outline-none transition-colors hover:bg-accent/40 data-[placeholder]:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-60",
             isPage ? "h-10 text-sm" : "h-9 text-[12px]",
           )}
           aria-label={label}
@@ -624,8 +630,31 @@ function friendlyModelName(model: string): string {
     const tier = claude[1][0].toUpperCase() + claude[1].slice(1);
     return `${tier} ${claude[2]}${claude[3] ? `.${claude[3]}` : ""}`;
   }
-  if (model.startsWith("gpt-")) return `GPT-${model.slice(4)}`;
+  if (model.startsWith("gpt-")) {
+    const rest = model.slice(4);
+    const gpt = rest.match(/^(\d+)[.-](\d+)(?:[.-](.+))?$/);
+    if (gpt) {
+      const suffix = gpt[3]
+        ? ` ${gpt[3]
+            .split("-")
+            .map((part) => part[0].toUpperCase() + part.slice(1))
+            .join(" ")}`
+        : "";
+      return `GPT-${gpt[1]}.${gpt[2]}${suffix}`;
+    }
+    return `GPT-${rest}`;
+  }
   if (/^o\d/.test(model)) return model;
+  const geminiVersioned = model.match(
+    /^gemini-(\d+)-(\d+)-(.+?)(?:-preview)?$/,
+  );
+  if (geminiVersioned) {
+    const variant = geminiVersioned[3]
+      .split("-")
+      .map((part) => part[0].toUpperCase() + part.slice(1))
+      .join(" ");
+    return `Gemini ${geminiVersioned[1]}.${geminiVersioned[2]} ${variant}`;
+  }
   const gemini = model.match(/^gemini-(.+?)(?:-preview)?$/);
   if (gemini) {
     const parts = gemini[1]
@@ -682,6 +711,77 @@ function latestModelsOnly(models: string[]): string[] {
   });
 }
 
+export function AppDefaultModelField({
+  engine,
+  models,
+  value,
+  defaultModel,
+  disabled,
+  onValueChange,
+  onEnter,
+}: {
+  engine: string;
+  models: string[];
+  value: string;
+  defaultModel?: string;
+  disabled?: boolean;
+  onValueChange: (value: string) => void;
+  onEnter?: () => void;
+}) {
+  const isPage = useSettingsSurface() === "page";
+  const modelOptions: SettingsSelectOption[] = latestModelsOnly(models).map(
+    (model) => ({ value: model, label: friendlyModelName(model) }),
+  );
+
+  // Builder models are a closed catalog (and are validated server-side), so a
+  // real select keeps every available model visible even when one is already
+  // selected. Native datalists filter against the current input value, which
+  // made this field appear to contain only the active model.
+  if (engine === "builder" && modelOptions.length > 0) {
+    return (
+      <SettingsSelect
+        label="Model"
+        value={value}
+        options={modelOptions}
+        onValueChange={onValueChange}
+        disabled={disabled}
+      />
+    );
+  }
+
+  return (
+    <div className="space-y-1.5">
+      <p className={fieldLabelClass(isPage)}>Model</p>
+      <input
+        type="text"
+        list={`app-model-suggestions-${engine}`}
+        value={value}
+        disabled={disabled}
+        onChange={(event) => onValueChange(event.target.value)}
+        onKeyDown={(event) => {
+          if (event.key === "Enter") onEnter?.();
+        }}
+        placeholder={defaultModel ?? "model-id"}
+        spellCheck={false}
+        autoComplete="off"
+        className={cn(textInputClass(isPage), "disabled:opacity-60")}
+        style={isPage ? CONTROL_STYLE_PAGE : CONTROL_STYLE}
+      />
+      {modelOptions.length > 0 && (
+        <datalist id={`app-model-suggestions-${engine}`}>
+          {modelOptions.map((option) => (
+            <option
+              key={option.value}
+              value={option.value}
+              label={option.label}
+            />
+          ))}
+        </datalist>
+      )}
+    </div>
+  );
+}
+
 // ─── LLM Section ────────────────────────────────────────────────────────────
 
 interface EngineInfo {
@@ -1388,9 +1488,6 @@ function AppModelDefaultsSectionInner({
           ? `Install ${engine.installPackage ?? "the provider packages"} to use this provider`
           : "Credentials not detected yet",
     }));
-  const modelOptions: SettingsSelectOption[] = latestModelsOnly(
-    selectedEngineInfo?.supportedModels ?? [],
-  ).map((model) => ({ value: model, label: friendlyModelName(model) }));
   const hasPendingChange =
     !!settings &&
     settings.canUpdate &&
@@ -1536,38 +1633,20 @@ function AppModelDefaultsSectionInner({
                 }}
               />
 
-              <div className="space-y-1.5">
-                <p className={fieldLabelClass(isPage)}>Model</p>
-                <input
-                  type="text"
-                  list={`app-model-suggestions-${selectedEngine}`}
-                  value={selectedModel}
-                  disabled={!settings.canUpdate || saving}
-                  onChange={(event) => {
-                    setSelectedModel(event.target.value);
-                    setError(null);
-                  }}
-                  onKeyDown={(event) => {
-                    if (event.key === "Enter" && hasPendingChange) void save();
-                  }}
-                  placeholder={selectedEngineInfo?.defaultModel ?? "model-id"}
-                  spellCheck={false}
-                  autoComplete="off"
-                  className={cn(textInputClass(isPage), "disabled:opacity-60")}
-                  style={isPage ? CONTROL_STYLE_PAGE : CONTROL_STYLE}
-                />
-                {modelOptions.length > 0 && (
-                  <datalist id={`app-model-suggestions-${selectedEngine}`}>
-                    {modelOptions.map((option) => (
-                      <option
-                        key={option.value}
-                        value={option.value}
-                        label={option.label}
-                      />
-                    ))}
-                  </datalist>
-                )}
-              </div>
+              <AppDefaultModelField
+                engine={selectedEngine}
+                models={selectedEngineInfo?.supportedModels ?? []}
+                value={selectedModel}
+                defaultModel={selectedEngineInfo?.defaultModel}
+                disabled={!settings.canUpdate || saving}
+                onValueChange={(value) => {
+                  setSelectedModel(value);
+                  setError(null);
+                }}
+                onEnter={() => {
+                  if (hasPendingChange) void save();
+                }}
+              />
 
               <div className="flex items-center gap-1.5">
                 <button

package/corpus/core/src/client/settings/SettingsTabsPage.tsx

@@ -133,6 +133,13 @@ function resolveTabId(
   const normalized = normalizeTabId(value);
   if (!normalized) return null;
   if (tabs.some((tab) => tab.id === normalized)) return normalized;
+  const section = normalized.split(":", 1)[0];
+  const owner = tabs.find((tab) =>
+    tab.searchEntries?.some(
+      (entry) => normalizeTabId(entry.hash ?? entry.id) === section,
+    ),
+  );
+  if (owner) return owner.id;
   if (
     normalized === "organization" ||
     normalized === "org" ||

package/corpus/core/src/client/settings/useBuilderStatus.ts

@@ -158,6 +158,8 @@ export interface BuilderConnectStartOptions {
 
 export interface BuilderConnectFlow {
   configured: boolean;
+  /** True after at least one successful `/builder/status` response. */
+  statusResolved: boolean;
   /**
    * True when the deploy has BUILDER_PRIVATE_KEY set as a fallback. Connect
    * is still available so users can override the fallback with their own
@@ -548,6 +550,7 @@ export function useBuilderConnectFlow(
   const [connecting, setConnecting] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [hasFetchedStatus, setHasFetchedStatus] = useState(false);
+  const [statusResolved, setStatusResolved] = useState(false);
   const [statusConnectUrl, setStatusConnectUrl] = useState<string | null>(null);
   // When statusConnectUrl was last fetched. The server signs the embedded
   // _an_connect token with a 10-minute TTL; using an older URL fails the
@@ -609,6 +612,7 @@ export function useBuilderConnectFlow(
       setConnecting(false);
       setError(null);
       setHasFetchedStatus(false);
+      setStatusResolved(false);
       setStatusConnectUrl(null);
       statusConnectUrlAtRef.current = null;
       stopPoll();
@@ -624,6 +628,7 @@ export function useBuilderConnectFlow(
       // stop waiting after we've tried, regardless of network outcome.
       setHasFetchedStatus(true);
       if (!s) return;
+      setStatusResolved(true);
       setConfigured(!!s.configured);
       setEnvManaged(!!s.envManaged);
       setBuilderEnabled(!!s.builderEnabled);
@@ -1019,6 +1024,7 @@ export function useBuilderConnectFlow(
 
   return {
     configured,
+    statusResolved,
     envManaged,
     builderEnabled,
     orgName,

package/corpus/core/src/client/tool-cells/EditCell.tsx

@@ -17,6 +17,7 @@ import {
 } from "@tabler/icons-react";
 import { memo, useMemo, useState } from "react";
 
+import { AnimatedCollapse } from "../chat/tool-call-display.js";
 import { cn } from "../utils.js";
 
 export interface EditCellMeta {
@@ -279,22 +280,24 @@ export function EditCell({ meta, isRunning }: EditCellProps) {
       </button>
 
       {/* Diff body */}
-      {expanded && hasDiff && (
-        <div className="border-t border-border/40 bg-background">
-          <DiffView lines={diff} maxLines={maxCollapsed} />
-          {hiddenLines > 0 && (
-            <div className="border-t border-border/40 px-3 py-1 text-[11px] text-muted-foreground">
-              <button
-                type="button"
-                className="cursor-pointer underline hover:text-foreground"
-                onClick={() => setShowAll(true)}
-              >
-                Show {hiddenLines} more lines
-              </button>
-            </div>
-          )}
-        </div>
-      )}
+      <AnimatedCollapse open={expanded && hasDiff}>
+        {hasDiff && (
+          <div className="border-t border-border/40 bg-background">
+            <DiffView lines={diff} maxLines={maxCollapsed} />
+            {hiddenLines > 0 && (
+              <div className="border-t border-border/40 px-3 py-1 text-[11px] text-muted-foreground">
+                <button
+                  type="button"
+                  className="cursor-pointer underline hover:text-foreground"
+                  onClick={() => setShowAll(true)}
+                >
+                  Show {hiddenLines} more lines
+                </button>
+              </div>
+            )}
+          </div>
+        )}
+      </AnimatedCollapse>
     </div>
   );
 }

package/corpus/core/src/client/tool-cells/FilesChangedSummary.tsx

@@ -7,6 +7,7 @@
 import { IconFiles } from "@tabler/icons-react";
 import { memo, useMemo, useState } from "react";
 
+import { AnimatedCollapse } from "../chat/tool-call-display.js";
 import type { ContentPart } from "../sse-event-processor.js";
 import { cn } from "../utils.js";
 import { EditCell } from "./EditCell.js";
@@ -174,29 +175,31 @@ export const FilesChangedSummary = memo(function FilesChangedSummary({
               </span>
             </button>
 
-            {isExpanded && part.type === "tool-call" && part.structuredMeta && (
-              <div className="pl-4">
-                {entry.kind === "edit" ? (
-                  <EditCell
-                    meta={
-                      part.structuredMeta as unknown as Parameters<
-                        typeof EditCell
-                      >[0]["meta"]
-                    }
-                    isRunning={false}
-                  />
-                ) : (
-                  <WriteCell
-                    meta={
-                      part.structuredMeta as unknown as Parameters<
-                        typeof WriteCell
-                      >[0]["meta"]
-                    }
-                    isRunning={false}
-                  />
-                )}
-              </div>
-            )}
+            <AnimatedCollapse open={isExpanded}>
+              {part.type === "tool-call" && part.structuredMeta && (
+                <div className="pl-4">
+                  {entry.kind === "edit" ? (
+                    <EditCell
+                      meta={
+                        part.structuredMeta as unknown as Parameters<
+                          typeof EditCell
+                        >[0]["meta"]
+                      }
+                      isRunning={false}
+                    />
+                  ) : (
+                    <WriteCell
+                      meta={
+                        part.structuredMeta as unknown as Parameters<
+                          typeof WriteCell
+                        >[0]["meta"]
+                      }
+                      isRunning={false}
+                    />
+                  )}
+                </div>
+              )}
+            </AnimatedCollapse>
           </div>
         );
       })}

package/corpus/core/src/client/tool-cells/WriteCell.tsx

@@ -9,6 +9,7 @@ import {
 } from "@tabler/icons-react";
 import { memo, useState } from "react";
 
+import { AnimatedCollapse } from "../chat/tool-call-display.js";
 import { cn } from "../utils.js";
 
 export interface WriteCellMeta {
@@ -121,22 +122,24 @@ export function WriteCell({ meta, isRunning }: WriteCellProps) {
       </button>
 
       {/* Content body */}
-      {expanded && hasContent && meta.content && (
-        <div className="border-t border-border/40 bg-background">
-          <FileContentView content={meta.content} maxLines={maxCollapsed} />
-          {hiddenLines > 0 && (
-            <div className="border-t border-border/40 px-3 py-1 text-[11px] text-muted-foreground">
-              <button
-                type="button"
-                className="cursor-pointer underline hover:text-foreground"
-                onClick={() => setShowAll(true)}
-              >
-                Show {hiddenLines} more lines
-              </button>
-            </div>
-          )}
-        </div>
-      )}
+      <AnimatedCollapse open={expanded && hasContent}>
+        {meta.content && (
+          <div className="border-t border-border/40 bg-background">
+            <FileContentView content={meta.content} maxLines={maxCollapsed} />
+            {hiddenLines > 0 && (
+              <div className="border-t border-border/40 px-3 py-1 text-[11px] text-muted-foreground">
+                <button
+                  type="button"
+                  className="cursor-pointer underline hover:text-foreground"
+                  onClick={() => setShowAll(true)}
+                >
+                  Show {hiddenLines} more lines
+                </button>
+              </div>
+            )}
+          </div>
+        )}
+      </AnimatedCollapse>
     </div>
   );
 }

package/corpus/core/src/client/use-action.ts

@@ -28,6 +28,7 @@ import type {
 } from "@tanstack/react-query";
 
 import { agentNativePath } from "./api-path.js";
+import { getBrowserTabId } from "./browser-tab-id.js";
 import { ensureEmbedAuthFetchInterceptor } from "./embed-auth.js";
 
 const ACTION_PREFIX = agentNativePath("/_agent-native/actions");
@@ -216,6 +217,8 @@ export interface ActionFetchOptions {
   keepalive?: boolean;
   /** Pre-serialized mutation body used by the keepalive budget coordinator. */
   serializedBody?: string;
+  /** Omit the tab echo-suppression tag for imperative callers. */
+  includeRequestSource?: boolean;
 }
 
 /**
@@ -264,6 +267,14 @@ async function actionFetch<T>(
     // safe to expose: CORS allows it (see action-routes.ts) and it carries
     // no auth weight — it only narrows the caller tag.
     "X-Agent-Native-Frontend": "1",
+    ...(options?.includeRequestSource !== false
+      ? {
+          // The server copies this onto the emitted action sync event.
+          // useDbSync can then ignore the echo in this tab while other tabs
+          // still refresh.
+          "X-Request-Source": getBrowserTabId(),
+        }
+      : {}),
   };
   const tz = resolveUserTimezone();
   if (tz) headers["x-user-timezone"] = tz;
@@ -426,6 +437,7 @@ export function callAction<
   return actionFetch<R>(actionName, options.method ?? "POST", params, {
     signal: options.signal,
     timeoutMs: options.timeoutMs,
+    includeRequestSource: false,
   });
 }
 

package/corpus/core/src/client/use-agent-chat-home-handoff.ts

@@ -79,6 +79,10 @@ function isStaticAssetPath(pathname: string): boolean {
   return /\.[A-Za-z0-9]{1,12}$/.test(lastSegment);
 }
 
+function isSettingsPath(pathname: string): boolean {
+  return pathname === "/settings" || pathname.startsWith("/settings/");
+}
+
 function localPathFromAnchor(anchor: HTMLAnchorElement): string | null {
   if (!anchor.href) return null;
   try {
@@ -135,6 +139,8 @@ export function useAgentChatHomeHandoff({
 /**
  * Intercepts ordinary in-app links clicked from a full-page chat route so the
  * page chat can morph into the destination AgentSidebar and keep its thread.
+ * Settings is intentionally excluded: a user opening it keeps chat full-page.
+ * Agent-driven navigation can still opt into the handoff by marking it first.
  */
 export function useAgentChatHomeHandoffLinks({
   storageKey,
@@ -170,7 +176,8 @@ export function useAgentChatHomeHandoffLinks({
         !path ||
         matchesChatPath(pathname) ||
         isFrameworkOrApiPath(pathname) ||
-        isStaticAssetPath(pathname)
+        isStaticAssetPath(pathname) ||
+        isSettingsPath(pathname)
       ) {
         return;
       }

package/corpus/core/src/client/use-agent-engine-configured.ts

@@ -30,6 +30,7 @@ export interface UseAgentEngineConfiguredOptions {
 }
 
 const DEFAULT_STATUS_CHECK_TIMEOUT_MS = 2500;
+const UNKNOWN_STATUS_RETRY_MS = 2000;
 
 async function fetchStatusJson(
   path: string,
@@ -129,9 +130,15 @@ export async function fetchAgentEngineConfiguredState(
     (builderStatusKnown && builderStatus.configured) ||
     (engineStatusKnown && engineStatus.configured);
   if (anyConfigured) return "configured";
-  return envKeysKnown && builderStatusKnown && engineStatusKnown
-    ? "missing"
-    : "unknown";
+
+  // The engine status route is the canonical readiness check: it resolves
+  // Builder, scoped BYOK secrets, deployment credentials, and custom engines.
+  // Once it has answered `configured: false`, a slow legacy env/Builder status
+  // request must not leave the composer permissively stuck in `unknown`.
+  if (engineStatusKnown) return "missing";
+
+  // Compatibility fallback for older hosts without the canonical route.
+  return envKeysKnown && builderStatusKnown ? "missing" : "unknown";
 }
 
 /**
@@ -149,16 +156,22 @@ export function useAgentEngineConfigured(
 
   useEffect(() => {
     let cancelled = false;
+    let retryId: ReturnType<typeof setTimeout> | undefined;
     // Monotonic call counter: overlapping checks (mount + a
     // `agent-engine:configured-changed` fired right after a key is saved) can
     // resolve out of order; only the latest call may write state, or a slow
     // stale "missing" response would overwrite the fresh "configured" one.
     let requestSeq = 0;
     const check = async (options?: { missingFallback?: boolean }) => {
+      if (retryId !== undefined) {
+        clearTimeout(retryId);
+        retryId = undefined;
+      }
       const seq = ++requestSeq;
       const nextState = await fetchAgentEngineConfiguredState(enabled, options);
       if (cancelled || seq !== requestSeq) return;
       if (nextState === "unknown") {
+        retryId = setTimeout(() => void check(), UNKNOWN_STATUS_RETRY_MS);
         return;
       }
       setState(nextState);
@@ -185,6 +198,7 @@ export function useAgentEngineConfigured(
     window.addEventListener("agent-chat:missing-api-key", onMissing);
     return () => {
       cancelled = true;
+      if (retryId !== undefined) clearTimeout(retryId);
       window.removeEventListener(
         "agent-engine:configured-changed",
         onConfiguredChanged,