@agent-native/core 0.105.0 → 0.106.0

package/corpus/README.md

@@ -27,5 +27,5 @@ rg -n "defineAction|useActionQuery" node_modules/@agent-native/core/corpus
 
 ## Generated Counts
 
-- core files: 2277
+- core files: 2283
 - template files: 6054

package/corpus/core/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @agent-native/core
 
+## 0.106.0
+
+### Minor Changes
+
+- a485fbe: Add the Creative Context package for importing, versioning, searching, and reusing workspace decks, designs, assets, websites, and content across creative apps.
+
+  Expose reusable ingestion, prompt-context provider, and search utility seams from core for package-driven creative context.
+
+  Includes bounded image-region cropping for durable localized creative-context fallbacks.
+
+- a485fbe: Add one-click OAuth connections for standard remote MCP servers and shared workspace providers, including GitHub, Figma, Google Drive, HubSpot, Jira Cloud, Notion, and Sentry. OAuth credentials are encrypted and refreshed per user or organization without exposing tokens to browsers or MCP App iframes. Existing API-key and token credentials remain available as explicit fallbacks, and provider API requests can use an OAuth-backed workspace connection.
+- a485fbe: Redesign the agent workspace with plain files first, dedicated resource collections, and a snapshots view for recent context inspection.
+- a485fbe: Add public session replay context and timestamped Analytics links, support host-owned tracking identity, and allow Analytics replay pages to open at a requested timeline offset.
+
+### Patch Changes
+
+- a485fbe: Fail serverless builds that bundle Vitest test runtime code into production SSR output.
+- a485fbe: Disable app-shell transitions across the shared AgentSidebar subtree while the sidebar is being resized.
+- a485fbe: Count explicitly failed action tool events as errors in observability traces and summaries even when their result text does not start with `Error`.
+- a485fbe: Fix managed Slack OAuth to resolve scoped app credentials within the signed-in request context.
+- a485fbe: Show a skeleton while the agent chat model picker is loading its provider and model list.
+- a485fbe: Render dashboard, form, and other resource context as a normal composer chip instead of a scoped-chat badge and history partition.
+- a485fbe: Protect existing extension visual design during data-only repairs by requiring explicit intent for full-body replacements, stop deterministic edit failures before the agent retries the same arguments, and resume cleanly when a provider closes while an action input is still being assembled.
+- a485fbe: Teach Plan agents to fence destructive edits against fresh plan revisions and verify persisted content before closing feedback.
+- a485fbe: Inline `AgentChatSurface` and `AgentChatHome` instances now hide the legacy Chat/Workspace header and chat tab row by default.
+- a485fbe: Share package-registered actions across runtime module instances and mount them alongside explicit app action registries.
+- a485fbe: Hide sidebar chat tabs until a second chat is open so a lone chat does not show a “New chat” tab.
+- a485fbe: Re-enable the sticky 80/20 Sonnet 5 versus GPT-5.6 Luna default-model experiment across first-party hosted templates.
+- a485fbe: Avoid repeated desktop sidebar width transitions while the agent sidebar is being resized.
+- a485fbe: Prevent duplicate recovery submissions and reject late worker events after an agent run has already reached a terminal state.
+- Updated dependencies [a485fbe]
+  - @agent-native/recap-cli@0.4.4
+
 ## 0.105.0
 
 ### Minor Changes

package/corpus/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/core",
-  "version": "0.105.0",
+  "version": "0.106.0",
   "description": "Framework for agent-native application development — where AI agents and UI share SQL state, actions, and context",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {

package/corpus/core/src/client/AssistantChat.tsx

@@ -1800,6 +1800,8 @@ export interface AssistantChatProps {
     models: string[];
     configured: boolean;
   }>;
+  /** Whether the model list is still being resolved. */
+  modelListLoading?: boolean;
   /** Callback when user picks a model from the picker */
   onModelChange?: (model: string, engine: string) => void;
   /** Callback when user picks a reasoning effort from the picker */
@@ -2174,6 +2176,7 @@ const AssistantChatInner = forwardRef<
     defaultModel,
     selectedEffort,
     availableModels,
+    modelListLoading,
     onModelChange,
     onEffortChange,
     imageModelMenu,
@@ -5531,6 +5534,7 @@ const AssistantChatInner = forwardRef<
                             selectedModel={selectedModel ?? defaultModel}
                             selectedEffort={selectedEffort}
                             availableModels={availableModels}
+                            modelListLoading={modelListLoading}
                             onModelChange={onModelChange}
                             onEffortChange={onEffortChange}
                             imageModelMenu={imageModelMenu}

package/corpus/core/src/client/MultiTabAssistantChat.tsx

@@ -911,6 +911,7 @@ export function MultiTabAssistantChat({
   const [availableModels, setAvailableModels] = useState<EngineModelGroup[]>(
     [],
   );
+  const [modelListLoading, setModelListLoading] = useState(true);
   const [defaultModel, setDefaultModel] = useState<string>(DEFAULT_MODEL);
   const threadModelRef = useRef<
     Map<string, { model: string; engine?: string; effort?: ReasoningEffort }>
@@ -1035,6 +1036,7 @@ export function MultiTabAssistantChat({
   );
 
   const refreshEngines = useCallback(() => {
+    setModelListLoading(true);
     Promise.all([
       callAction("manage-agent-engine" as any, { action: "list" } as any).catch(
         () => null,
@@ -1068,7 +1070,8 @@ export function MultiTabAssistantChat({
         setAvailableModels(groups);
         setDefaultModel(currentModel ?? DEFAULT_MODEL);
       })
-      .catch(() => {});
+      .catch(() => {})
+      .finally(() => setModelListLoading(false));
   }, []);
 
   useEffect(() => {
@@ -2522,6 +2525,7 @@ export function MultiTabAssistantChat({
                   composerSlot={props.composerSlot}
                   defaultModel={defaultModel}
                   availableModels={availableModels}
+                  modelListLoading={modelListLoading}
                   onModelChange={handleModelChange}
                   onEffortChange={handleEffortChange}
                   onForkChat={() => handleForkChat(tabId)}

package/corpus/core/src/client/composer/PromptComposer.tsx

@@ -136,6 +136,8 @@ export interface PromptComposerProps {
   onSlashCommand?: (command: string) => void;
   /** External model list for hosts that already resolve models outside the app. */
   availableModels?: EngineModelGroup[];
+  /** Whether the external model list is still being resolved. */
+  modelListLoading?: boolean;
   selectedModel?: string;
   selectedEngine?: string;
   selectedEffort?: ReasoningEffort;
@@ -468,6 +470,7 @@ function PromptComposerInner({
   includeDefaultSlashSkills,
   onSlashCommand,
   availableModels,
+  modelListLoading,
   selectedModel,
   selectedEngine,
   selectedEffort,
@@ -501,6 +504,10 @@ function PromptComposerInner({
   const composerModelGroups = showModelSelector
     ? (availableModels ?? models.availableModels)
     : undefined;
+  const composerModelListLoading =
+    showModelSelector &&
+    (modelListLoading ??
+      (availableModels ? availableModels.length === 0 : models.isLoading));
   const handleModelChange = showModelSelector
     ? (onModelChange ?? models.onModelChange)
     : undefined;
@@ -645,6 +652,7 @@ function PromptComposerInner({
           selectedModel={composerModel}
           selectedEffort={composerEffort}
           availableModels={composerModelGroups}
+          modelListLoading={composerModelListLoading}
           onModelChange={handleModelChange}
           onEffortChange={handleEffortChange}
           providerConnectStatusEnabled={resolvedModelStatusChecksEnabled}

package/corpus/core/src/client/composer/TiptapComposer.tsx

@@ -1,3 +1,4 @@
+import { Skeleton } from "@agent-native/toolkit/ui/skeleton";
 import { useComposer, useComposerRuntime } from "@assistant-ui/react";
 import {
   IconArrowUp,
@@ -615,6 +616,8 @@ export interface TiptapComposerProps {
     models: string[];
     configured: boolean;
   }>;
+  /** Whether the model list is still being resolved. */
+  modelListLoading?: boolean;
   /** Callback when user picks a model */
   onModelChange?: (model: string, engine: string) => void;
   /** Callback when user picks a reasoning effort */
@@ -823,6 +826,13 @@ export const MODEL_SELECTOR_POPOVER_STYLE = {
   maxHeight: "min(500px, var(--radix-popover-content-available-height, 500px))",
 } satisfies React.CSSProperties;
 
+export function shouldShowModelSelectorSkeleton(
+  isLoading: boolean,
+  engineCount: number,
+): boolean {
+  return isLoading && engineCount === 0;
+}
+
 function friendlyModelName(model: string): string {
   if (FRIENDLY_MODEL_NAMES[model]) return FRIENDLY_MODEL_NAMES[model];
   // Claude: claude-{tier}-{major}[-minor][-dateYYYYMMDD] → Tier Major[.Minor]
@@ -950,6 +960,7 @@ function ModelSelector({
   model,
   effort = DEFAULT_REASONING_EFFORT,
   engines,
+  modelListLoading = false,
   onChange,
   onEffortChange,
   providerConnectStatusEnabled = true,
@@ -965,6 +976,7 @@ function ModelSelector({
     models: string[];
     configured: boolean;
   }>;
+  modelListLoading?: boolean;
   onChange: (model: string, engine: string) => void;
   onEffortChange?: (effort: ReasoningEffort) => void;
   providerConnectStatusEnabled?: boolean;
@@ -1034,6 +1046,10 @@ function ModelSelector({
   const imageModelLabel =
     imageModel?.options.find((option) => option.value === imageModel.value)
       ?.label ?? imageModel?.value;
+  const showModelListSkeleton = shouldShowModelSelectorSkeleton(
+    modelListLoading,
+    engines.length,
+  );
 
   // When Builder.io isn't connected, surface a one-click connect path —
   // it unlocks every model family (Claude, OpenAI, Gemini) without the
@@ -1200,6 +1216,7 @@ function ModelSelector({
             <div className="my-1 border-t border-border" />
           </>
         )}
+        {showModelListSkeleton && <ModelSelectorSkeleton />}
         {autoModelGroup && (
           <button
             type="button"
@@ -1304,7 +1321,7 @@ function ModelSelector({
             </div>
           );
         })}
-        {effortOptions.length > 0 && (
+        {!showModelListSkeleton && effortOptions.length > 0 && (
           <>
             <div className="my-1 border-t border-border" />
             <div className="flex items-center hover:bg-accent/30">
@@ -1352,6 +1369,24 @@ function ModelSelector({
   );
 }
 
+function ModelSelectorSkeleton() {
+  return (
+    <div
+      className="space-y-1 px-2 py-2"
+      role="status"
+      aria-label="Loading models"
+    >
+      <span className="sr-only">Loading models…</span>
+      {["w-24", "w-32", "w-20", "w-28"].map((width, index) => (
+        <div key={index} className="flex items-center gap-1.5 px-1 py-1.5">
+          <Skeleton className="size-3 rounded-sm" />
+          <Skeleton className={`h-3 ${width}`} />
+        </div>
+      ))}
+    </div>
+  );
+}
+
 type PopoverState = {
   type: "@" | "/";
   position: { top: number; left: number };
@@ -1389,6 +1424,7 @@ export function TiptapComposer({
   selectedModel,
   selectedEffort,
   availableModels,
+  modelListLoading,
   onModelChange,
   onEffortChange,
   providerConnectStatusEnabled,
@@ -2791,6 +2827,7 @@ export function TiptapComposer({
             model={selectedModel}
             effort={selectedEffort}
             engines={availableModels}
+            modelListLoading={modelListLoading}
             onChange={onModelChange}
             onEffortChange={onEffortChange}
             providerConnectStatusEnabled={providerConnectStatusEnabled}

package/corpus/core/src/client/resources/McpIntegrationDialog.tsx

@@ -7,6 +7,7 @@ import {
 } from "@tabler/icons-react";
 import { useEffect, useMemo, useRef, useState } from "react";
 
+import { agentNativePath } from "../api-path.js";
 import {
   Dialog,
   DialogContent,
@@ -22,10 +23,12 @@ import {
 import { useT } from "../i18n.js";
 import { cn } from "../utils.js";
 import {
+  buildMcpOAuthStartUrl,
   createMcpIntegrationFormDefaults,
   filterMcpIntegrations,
   getDefaultMcpIntegrations,
   isCustomMcpIntegrationEnabled,
+  resolveMcpIntegrationScope,
   type DefaultMcpIntegration,
 } from "./mcp-integration-catalog.js";
 import {
@@ -92,7 +95,12 @@ export function McpIntegrationDialog({
   const [mode, setMode] = useState<DialogMode>("catalog");
   const [query, setQuery] = useState("");
   const [selected, setSelected] = useState<DefaultMcpIntegration | null>(null);
-  const [scope, setScope] = useState<McpServerScope>(defaultScope);
+  const safeDefaultScope = resolveMcpIntegrationScope(
+    defaultScope,
+    hasOrg,
+    canCreateOrgMcp,
+  );
+  const [scope, setScope] = useState<McpServerScope>(safeDefaultScope);
   const [name, setName] = useState("");
   const [url, setUrl] = useState("");
   const [description, setDescription] = useState("");
@@ -135,7 +143,7 @@ export function McpIntegrationDialog({
     setMode(showCatalog ? "catalog" : "form");
     setQuery("");
     setSelected(null);
-    setScope(defaultScope);
+    setScope(safeDefaultScope);
     setName("");
     setUrl("");
     setDescription("");
@@ -144,7 +152,7 @@ export function McpIntegrationDialog({
     setQuickBusyId(null);
     setError(null);
     setTestResult(null);
-  }, [defaultScope, open, showCatalog]);
+  }, [open, safeDefaultScope, showCatalog]);
 
   useEffect(() => {
     if (open && mode === "form") {
@@ -161,7 +169,7 @@ export function McpIntegrationDialog({
   const openForm = (integration?: DefaultMcpIntegration | null) => {
     const defaults = createMcpIntegrationFormDefaults(integration);
     setSelected(integration ?? null);
-    setScope(defaultScope);
+    setScope(safeDefaultScope);
     setName(defaults.name);
     setUrl(defaults.url);
     setDescription(defaults.description);
@@ -171,6 +179,55 @@ export function McpIntegrationDialog({
     setMode("form");
   };
 
+  const beginOAuth = (args: {
+    name: string;
+    url: string;
+    description: string;
+  }) => {
+    const validationError = getMcpUrlValidationError(args.url);
+    if (validationError) {
+      setError(validationError);
+      setTestResult(null);
+      return;
+    }
+    const returnUrl =
+      typeof window === "undefined"
+        ? "/"
+        : window.location.pathname +
+          window.location.search +
+          window.location.hash;
+    window.location.assign(
+      agentNativePath(
+        buildMcpOAuthStartUrl({
+          name: args.name,
+          url: args.url,
+          description: args.description,
+          scope: safeDefaultScope,
+          returnUrl,
+        }),
+      ),
+    );
+  };
+
+  const connectWithOAuth = (integration: DefaultMcpIntegration) =>
+    beginOAuth({
+      name: integration.name,
+      url: integration.url,
+      description: integration.description,
+    });
+
+  const connectCustomWithOAuth = () => {
+    if (!name.trim()) {
+      setError(t("mcpIntegrations.serverNameRequired"));
+      return;
+    }
+    beginOAuth({
+      name: name.trim(),
+      url: url.trim(),
+      description: description.trim(),
+    });
+  };
+
   const createServer = async (
     args: CreateMcpServerArgs,
     options?: { quickId?: string },
@@ -211,13 +268,17 @@ export function McpIntegrationDialog({
   };
 
   const quickConnect = (integration: DefaultMcpIntegration) => {
-    if (integration.authMode !== "none") {
+    if (integration.authMode === "oauth") {
+      connectWithOAuth(integration);
+      return;
+    }
+    if (integration.authMode === "headers") {
       openForm(integration);
       return;
     }
     void createServer(
       {
-        scope: defaultScope,
+        scope: safeDefaultScope,
         name: integration.name,
         url: integration.url,
         description: integration.description,
@@ -350,7 +411,7 @@ export function McpIntegrationDialog({
                   const connected = connectedUrls.has(
                     compareUrl(integration.url),
                   );
-                  const requiresConfig = integration.authMode !== "none";
+                  const requiresHeaders = integration.authMode === "headers";
                   return (
                     <article
                       key={integration.id}
@@ -381,9 +442,11 @@ export function McpIntegrationDialog({
                           ) : null}
                           {connected
                             ? t("mcpIntegrations.connected")
-                            : requiresConfig
-                              ? t("mcpIntegrations.configure")
-                              : t("mcpIntegrations.connect")}
+                            : integration.authMode === "oauth"
+                              ? t("mcpIntegrations.connectWithOAuth")
+                              : requiresHeaders
+                                ? t("mcpIntegrations.configure")
+                                : t("mcpIntegrations.connect")}
                         </button>
                         {integration.docsUrl && (
                           <Tooltip>
@@ -507,28 +570,30 @@ export function McpIntegrationDialog({
                     placeholder={t("mcpIntegrations.descriptionPlaceholder")}
                   />
                 </label>
-                <label className="block">
-                  <span className="mb-1 block text-[10px] font-medium text-muted-foreground">
-                    {t("mcpIntegrations.headers")}
-                  </span>
-                  <textarea
-                    value={headersText}
-                    onChange={(event) => {
-                      setHeadersText(event.target.value);
-                      clearFeedback();
-                    }}
-                    rows={3}
-                    className="w-full resize-y rounded-md border border-border bg-background px-2.5 py-1.5 text-[12px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-ring"
-                    style={{
-                      fontFamily:
-                        'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
-                    }}
-                    placeholder={
-                      selected?.headerPlaceholder ??
-                      t("mcpIntegrations.headersPlaceholder")
-                    }
-                  />
-                </label>
+                {selected?.authMode !== "oauth" && (
+                  <label className="block">
+                    <span className="mb-1 block text-[10px] font-medium text-muted-foreground">
+                      {t("mcpIntegrations.headers")}
+                    </span>
+                    <textarea
+                      value={headersText}
+                      onChange={(event) => {
+                        setHeadersText(event.target.value);
+                        clearFeedback();
+                      }}
+                      rows={3}
+                      className="w-full resize-y rounded-md border border-border bg-background px-2.5 py-1.5 text-[12px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-ring"
+                      style={{
+                        fontFamily:
+                          'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+                      }}
+                      placeholder={
+                        selected?.headerPlaceholder ??
+                        t("mcpIntegrations.headersPlaceholder")
+                      }
+                    />
+                  </label>
+                )}
                 {selected?.docsUrl && (
                   <a
                     href={selected.docsUrl}
@@ -573,6 +638,16 @@ export function McpIntegrationDialog({
               >
                 {t("mcpIntegrations.test")}
               </button>
+              {!selected && (
+                <button
+                  type="button"
+                  onClick={connectCustomWithOAuth}
+                  disabled={!name.trim() || !url.trim() || busy}
+                  className="rounded-md border border-border bg-background px-3 py-1.5 text-[12px] font-medium text-foreground hover:bg-accent disabled:pointer-events-none disabled:opacity-40"
+                >
+                  {t("mcpIntegrations.connectWithOAuth")}
+                </button>
+              )}
               <button
                 type="button"
                 onClick={submitForm}

package/corpus/core/src/client/resources/mcp-integration-catalog.ts

@@ -33,6 +33,14 @@ export interface McpIntegrationFormDefaults {
   headersText: string;
 }
 
+export interface McpOAuthStartParams {
+  name: string;
+  url: string;
+  description: string;
+  scope: "user" | "org";
+  returnUrl: string;
+}
+
 export const DEFAULT_MCP_INTEGRATIONS: DefaultMcpIntegration[] = [
   {
     id: "context7",
@@ -215,6 +223,31 @@ export function mcpIntegrationAuthLabel(mode: McpIntegrationAuthMode): string {
   return "OAuth";
 }
 
+export function buildMcpOAuthStartUrl({
+  name,
+  url,
+  description,
+  scope,
+  returnUrl,
+}: McpOAuthStartParams): string {
+  const params = new URLSearchParams({
+    name,
+    url,
+    description,
+    scope,
+    return: returnUrl,
+  });
+  return `/_agent-native/mcp/servers/oauth/start?${params.toString()}`;
+}
+
+export function resolveMcpIntegrationScope(
+  defaultScope: "user" | "org",
+  hasOrg: boolean,
+  canCreateOrgMcp: boolean,
+): "user" | "org" {
+  return defaultScope === "org" && hasOrg && canCreateOrgMcp ? "org" : "user";
+}
+
 export function filterMcpIntegrations(
   query: string,
   integrations: DefaultMcpIntegration[] = getDefaultMcpIntegrations(),

package/corpus/core/src/client/resources/use-mcp-servers.ts

@@ -20,6 +20,7 @@ export interface McpServer {
   name: string;
   url: string;
   headers?: Record<string, { set: true }>;
+  authMode: "none" | "headers" | "oauth";
   description?: string;
   firstParty?: boolean;
   createdAt: number;

package/corpus/core/src/client/use-chat-models.ts

@@ -22,6 +22,7 @@ export interface UseChatModelsResult {
   selectedModel: string;
   selectedEngine: string;
   selectedEffort: ReasoningEffort;
+  isLoading: boolean;
   onModelChange: (model: string, engine: string) => void;
   onEffortChange: (effort: ReasoningEffort) => void;
   refreshEngines: () => void;
@@ -78,6 +79,7 @@ export function useChatModels({
   const [availableModels, setAvailableModels] = useState<EngineModelGroup[]>(
     [],
   );
+  const [isLoading, setIsLoading] = useState(enabled);
   const [defaultModel, setDefaultModel] = useState<string>(DEFAULT_MODEL);
 
   const initialPersisted = readPersisted(storageKey);
@@ -140,6 +142,7 @@ export function useChatModels({
 
   const refreshEngines = useCallback(() => {
     if (!enabled) return;
+    setIsLoading(true);
     Promise.all([
       callAction("manage-agent-engine" as any, { action: "list" } as any).catch(
         () => null,
@@ -223,11 +226,15 @@ export function useChatModels({
           });
         }
       })
-      .catch(() => {});
+      .catch(() => {})
+      .finally(() => setIsLoading(false));
   }, [enabled, storageKey]);
 
   useEffect(() => {
-    if (!enabled) return;
+    if (!enabled) {
+      setIsLoading(false);
+      return;
+    }
     refreshEngines();
   }, [enabled, refreshEngines]);
 
@@ -237,6 +244,7 @@ export function useChatModels({
     selectedModel,
     selectedEngine,
     selectedEffort,
+    isLoading,
     onModelChange,
     onEffortChange,
     refreshEngines,