@agent-native/core 0.87.0 → 0.90.1

package/corpus/core/src/client/db-admin/SqlEditor.tsx

@@ -408,15 +408,25 @@ export function SqlEditor({
       );
       setEditorHeight(next);
     };
-    const onUp = () => {
+    const endDrag = () => {
       dragState.current = null;
       document.body.style.userSelect = "";
     };
+    // mouseup covers the normal release-inside-the-page case; window blur
+    // covers releasing the button outside the browser window/iframe, which
+    // never delivers a mouseup to this document. The cleanup also resets
+    // userSelect unconditionally so an unmount mid-drag can't leave
+    // `document.body.style.userSelect` stuck at "none", which would
+    // silently break text selection/copy everywhere in the app.
     window.addEventListener("mousemove", onMove);
-    window.addEventListener("mouseup", onUp);
+    window.addEventListener("mouseup", endDrag);
+    window.addEventListener("blur", endDrag);
     return () => {
       window.removeEventListener("mousemove", onMove);
-      window.removeEventListener("mouseup", onUp);
+      window.removeEventListener("mouseup", endDrag);
+      window.removeEventListener("blur", endDrag);
+      document.body.style.userSelect = "";
+      dragState.current = null;
     };
   }, []);
 

package/corpus/core/src/client/dynamic-suggestions.ts

@@ -407,8 +407,13 @@ export function useAgentDynamicSuggestionsResult(
 
     void load(true);
     const interval = setInterval(() => {
+      // The useEffect deps already include appStateVersion, so app-state
+      // changes trigger an immediate event-driven refresh above. This
+      // interval is only a slow safety net for updates that don't bump
+      // that version — skip ticks while the tab isn't visible.
+      if (document.hidden) return;
       void load(false);
-    }, 2_000);
+    }, 30_000);
 
     return () => {
       cancelled = true;

package/corpus/core/src/client/extensions/ExtensionViewer.tsx

@@ -1,5 +1,4 @@
 import {
-  IconArrowLeft,
   IconArrowBackUp,
   IconChevronRight,
   IconCode,
@@ -1204,19 +1203,6 @@ export function ExtensionViewer({ extensionId }: ExtensionViewerProps) {
       <div className="flex h-full w-full flex-col">
         <div className="flex h-12 shrink-0 items-center justify-between gap-3 border-b px-3">
           <div className="flex min-w-0 items-center gap-3">
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Link
-                  to="/"
-                  className="inline-flex h-8 shrink-0 items-center justify-center gap-1.5 rounded-md px-2 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground"
-                  aria-label="Back to app"
-                >
-                  <IconArrowLeft className="h-4 w-4" />
-                  <span className="hidden sm:inline">Back to app</span>
-                </Link>
-              </TooltipTrigger>
-              <TooltipContent>Back to app</TooltipContent>
-            </Tooltip>
             <nav
               aria-label="Extension breadcrumb"
               className="group/name flex min-w-0 items-center gap-1 text-sm"

package/corpus/core/src/client/extensions/ExtensionsListPage.tsx

@@ -1,5 +1,4 @@
 import {
-  IconArrowLeft,
   IconDotsVertical,
   IconEye,
   IconEyeOff,
@@ -15,6 +14,12 @@ import { extensionPath } from "../../extensions/path.js";
 import { sendToAgentChat } from "../agent-chat.js";
 import { AgentToggleButton } from "../AgentPanel.js";
 import { agentNativePath } from "../api-path.js";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "../components/ui/dropdown-menu.js";
 import {
   Popover,
   PopoverContent,
@@ -22,7 +27,6 @@ import {
 } from "../components/ui/popover.js";
 import { PromptComposer } from "../composer/PromptComposer.js";
 import { useT } from "../i18n.js";
-import { NotificationsBell } from "../notifications/NotificationsBell.js";
 import { cn } from "../utils.js";
 import {
   deleteOrHideExtension,
@@ -186,36 +190,9 @@ export function ExtensionsListPage() {
     <div className="flex h-full w-full flex-col">
       <header className="flex h-12 items-center justify-between border-b px-4 shrink-0">
         <div className="flex items-center gap-2">
-          <Link
-            to="/"
-            className="inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
-            aria-label={t("extensions.backToApp")}
-          >
-            <IconArrowLeft className="h-4 w-4" />
-          </Link>
           <h1 className="text-sm font-semibold">{t("extensions.title")}</h1>
         </div>
         <div className="flex items-center gap-2">
-          <button
-            type="button"
-            onClick={() => setShowGloballyHidden((prev) => !prev)}
-            aria-pressed={showGloballyHidden}
-            className={cn(
-              "inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-md px-2.5 py-1.5 text-sm font-medium",
-              showGloballyHidden
-                ? "bg-accent text-foreground"
-                : "text-muted-foreground hover:bg-accent hover:text-foreground",
-            )}
-          >
-            {showGloballyHidden ? (
-              <IconEye className="h-4 w-4" />
-            ) : (
-              <IconEyeOff className="h-4 w-4" />
-            )}
-            {showGloballyHidden
-              ? t("extensions.hiddenShown")
-              : t("extensions.showHidden")}
-          </button>
           <Popover open={showCreate} onOpenChange={setShowCreate}>
             <PopoverTrigger asChild>
               <button
@@ -242,7 +219,29 @@ export function ExtensionsListPage() {
               />
             </PopoverContent>
           </Popover>
-          <NotificationsBell />
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <button
+                type="button"
+                className="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                aria-label={t("extensions.optionsFor", {
+                  name: t("extensions.title"),
+                })}
+              >
+                <IconDotsVertical className="h-4 w-4" />
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-44">
+              <DropdownMenuCheckboxItem
+                checked={showGloballyHidden}
+                onCheckedChange={(checked) =>
+                  setShowGloballyHidden(Boolean(checked))
+                }
+              >
+                {t("extensions.showHidden")}
+              </DropdownMenuCheckboxItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
           <AgentToggleButton />
         </div>
       </header>

package/corpus/core/src/client/extensions/ExtensionsSidebarSection.tsx

@@ -949,7 +949,8 @@ export function ExtensionsSidebarSection() {
               <PopoverContent
                 side="right"
                 align="start"
-                className="w-[420px] p-3"
+                collisionPadding={8}
+                className="relative z-[360] w-[min(420px,calc(100vw-16px))] p-3"
               >
                 <p className="px-1 pb-2 text-sm font-semibold text-foreground">
                   {copy.newExtension}

package/corpus/core/src/client/host-bridge.ts

@@ -585,6 +585,33 @@ function dispatchHostEvent(
   return { dispatched: true };
 }
 
+/**
+ * Cooldown for host-issued `hardReload` / `hard-reload` commands. A reload is
+ * already in flight after the first command, so repeats inside this window are
+ * acknowledged (`{ reloading: true }` — the page IS reloading) but do not call
+ * `window.location.reload()` again. Without this, an embedding host that sends
+ * the command on a loop (health checks, per-edit refresh logic) can keep the
+ * page permanently mid-reload.
+ */
+const HARD_RELOAD_COOLDOWN_MS = 2_000;
+let lastHardReloadAt = 0;
+
+/** @internal Exported for tests only. */
+export function _resetHostHardReloadCooldownForTests(): void {
+  lastHardReloadAt = 0;
+}
+
+function runGuardedHardReload(): { reloading: true } {
+  if (typeof window !== "undefined") {
+    const now = Date.now();
+    if (now - lastHardReloadAt >= HARD_RELOAD_COOLDOWN_MS) {
+      lastHardReloadAt = now;
+      window.location.reload();
+    }
+  }
+  return { reloading: true };
+}
+
 export const defaultAgentNativeHostCommands: AgentNativeHostCommandHandlers = {
   navigate: ({ payload }) => dispatchHostEvent("agentNative:navigate", payload),
   refreshData: ({ payload }) =>
@@ -595,14 +622,8 @@ export const defaultAgentNativeHostCommands: AgentNativeHostCommandHandlers = {
     dispatchHostEvent("agentNative:remount-view", payload),
   "remount-view": ({ payload }) =>
     dispatchHostEvent("agentNative:remount-view", payload),
-  hardReload: () => {
-    if (typeof window !== "undefined") window.location.reload();
-    return { reloading: true };
-  },
-  "hard-reload": () => {
-    if (typeof window !== "undefined") window.location.reload();
-    return { reloading: true };
-  },
+  hardReload: () => runGuardedHardReload(),
+  "hard-reload": () => runGuardedHardReload(),
   openResource: ({ payload }) =>
     dispatchHostEvent("agentNative:open-resource", payload),
   "open-resource": ({ payload }) =>

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

@@ -91,12 +91,18 @@ interface LocaleContextValue {
 }
 
 declare global {
+  var __AGENT_NATIVE_LOCALE_CONTEXT__:
+    | React.Context<LocaleContextValue | null>
+    | undefined;
   interface Window {
     __AGENT_NATIVE_LOCALE__?: LocaleHydrationPayload;
   }
 }
 
-const LocaleContext = createContext<LocaleContextValue | null>(null);
+const LocaleContext =
+  globalThis.__AGENT_NATIVE_LOCALE_CONTEXT__ ??
+  (globalThis.__AGENT_NATIVE_LOCALE_CONTEXT__ =
+    createContext<LocaleContextValue | null>(null));
 
 const LANGUAGE_PICKER_COPY: Record<
   LocaleCode,

package/corpus/core/src/client/index.ts

@@ -463,6 +463,10 @@ export {
   type MultiTabAssistantChatHeaderProps,
 } from "./MultiTabAssistantChat.js";
 export { RunStuckBanner, type RunStuckBannerProps } from "./RunStuckBanner.js";
+export {
+  KeepTabOpenNotice,
+  type KeepTabOpenNoticeProps,
+} from "./KeepTabOpenNotice.js";
 export {
   useRunStuckDetection,
   useAbortRun,
@@ -635,6 +639,7 @@ export { AgentNativeIcon } from "./components/icons/AgentNativeIcon.js";
 export {
   SettingsPanel,
   SettingsTabsPage,
+  useAgentSettingsTabs,
   type SettingsPanelProps,
   type SettingsTabItem,
   type SettingsTabsPageProps,

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

@@ -2,13 +2,8 @@ import {
   IconArrowLeft,
   IconCheck,
   IconExternalLink,
-  IconKey,
   IconLoader2,
-  IconPlugConnected,
   IconSearch,
-  IconShieldLock,
-  IconSparkles,
-  IconWorld,
 } from "@tabler/icons-react";
 import { useEffect, useMemo, useRef, useState } from "react";
 
@@ -32,7 +27,6 @@ import {
   getDefaultMcpIntegrations,
   isCustomMcpIntegrationEnabled,
   type DefaultMcpIntegration,
-  type McpIntegrationAuthMode,
 } from "./mcp-integration-catalog.js";
 import {
   formatMcpServerError,
@@ -85,18 +79,6 @@ function compareUrl(value: string): string {
   }
 }
 
-function authIcon(mode: McpIntegrationAuthMode) {
-  if (mode === "none") return <IconWorld className="h-3 w-3" />;
-  if (mode === "headers") return <IconKey className="h-3 w-3" />;
-  return <IconShieldLock className="h-3 w-3" />;
-}
-
-function authBadgeClass(mode: McpIntegrationAuthMode) {
-  if (mode === "none") return "border-green-500/25 text-green-600";
-  if (mode === "headers") return "border-amber-500/25 text-amber-600";
-  return "border-blue-500/25 text-blue-600";
-}
-
 export function McpIntegrationDialog({
   open,
   onOpenChange,
@@ -140,11 +122,6 @@ export function McpIntegrationDialog({
     () => filterMcpIntegrations(query, defaultIntegrations),
     [defaultIntegrations, query],
   );
-  const authLabel = (authMode: McpIntegrationAuthMode) => {
-    if (authMode === "none") return t("mcpIntegrations.auth.none");
-    if (authMode === "headers") return t("mcpIntegrations.auth.headers");
-    return t("mcpIntegrations.auth.oauth");
-  };
 
   useEffect(() => {
     if (!open) return;
@@ -325,16 +302,16 @@ export function McpIntegrationDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
+      <DialogContent className="flex max-h-[min(820px,calc(100vh-32px))] w-[calc(100vw-24px)] max-w-[760px] flex-col gap-0 p-0 sm:w-[min(760px,calc(100vw-48px))]">
         {mode === "catalog" ? (
           <>
-            <DialogHeader className="border-b border-border pe-12">
+            <DialogHeader className="shrink-0 px-7 pb-5 pe-14 pt-6">
               <DialogTitle>{t("mcpIntegrations.title")}</DialogTitle>
               <DialogDescription>
                 {t("mcpIntegrations.description")}
               </DialogDescription>
             </DialogHeader>
-            <div className="flex flex-col gap-3 border-b border-border p-4 sm:flex-row">
+            <div className="flex shrink-0 flex-col gap-3 px-7 pb-5 sm:flex-row">
               <label className="relative min-w-0 flex-1">
                 <IconSearch className="pointer-events-none absolute start-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
                 <input
@@ -352,11 +329,10 @@ export function McpIntegrationDialog({
                   !customIntegrationEnabled && "hidden",
                 )}
               >
-                <IconSparkles className="h-3.5 w-3.5" />
                 {t("mcpIntegrations.addYourOwn")}
               </button>
             </div>
-            <div className="min-h-0 flex-1 overflow-y-auto p-4">
+            <div className="min-h-0 flex-1 overflow-y-auto px-7 pb-7">
               {error && (
                 <div className="mb-3 rounded-md border border-red-500/20 bg-red-500/5 px-3 py-2 text-[12px] leading-relaxed text-red-600 dark:text-red-400">
                   {error}
@@ -371,29 +347,13 @@ export function McpIntegrationDialog({
                   return (
                     <article
                       key={integration.id}
-                      className="flex min-h-[150px] flex-col rounded-lg border border-border bg-card p-3"
+                      className="flex min-h-[128px] flex-col rounded-md border border-border bg-card p-4 transition-colors hover:border-border/80 hover:bg-accent/20"
                     >
-                      <div className="mb-2 flex items-start justify-between gap-3">
-                        <div className="min-w-0">
-                          <h3 className="truncate text-[13px] font-semibold text-foreground">
-                            {integration.name}
-                          </h3>
-                          <p className="mt-1 line-clamp-2 text-[11px] leading-relaxed text-muted-foreground">
-                            {t(integration.descriptionKey)}
-                          </p>
-                        </div>
-                        <span
-                          className={cn(
-                            "inline-flex shrink-0 items-center gap-1 rounded-full border px-2 py-0.5 text-[10px] font-medium",
-                            authBadgeClass(integration.authMode),
-                          )}
-                        >
-                          {authIcon(integration.authMode)}
-                          {authLabel(integration.authMode)}
-                        </span>
-                      </div>
-                      <p className="line-clamp-2 flex-1 text-[10px] leading-relaxed text-muted-foreground/70">
-                        {t(integration.useCaseKey)}
+                      <h3 className="truncate text-[13px] font-semibold text-foreground">
+                        {integration.name}
+                      </h3>
+                      <p className="mt-1 line-clamp-2 flex-1 text-[12px] leading-relaxed text-muted-foreground">
+                        {t(integration.descriptionKey)}
                       </p>
                       <div className="mt-3 flex items-center gap-2">
                         <button
@@ -411,11 +371,7 @@ export function McpIntegrationDialog({
                         >
                           {quickBusyId === integration.id ? (
                             <IconLoader2 className="h-3.5 w-3.5 animate-spin" />
-                          ) : connected ? (
-                            <IconCheck className="h-3.5 w-3.5" />
-                          ) : (
-                            <IconPlugConnected className="h-3.5 w-3.5" />
-                          )}
+                          ) : null}
                           {connected
                             ? t("mcpIntegrations.connected")
                             : requiresConfig
@@ -423,17 +379,26 @@ export function McpIntegrationDialog({
                               : t("mcpIntegrations.connect")}
                         </button>
                         {integration.docsUrl && (
-                          <a
-                            href={integration.docsUrl}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-border text-muted-foreground hover:bg-accent hover:text-foreground"
-                            aria-label={t("mcpIntegrations.docsLabel", {
-                              name: integration.name,
-                            })}
-                          >
-                            <IconExternalLink className="h-3.5 w-3.5" />
-                          </a>
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <a
+                                href={integration.docsUrl}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-border text-muted-foreground hover:bg-accent hover:text-foreground"
+                                aria-label={t("mcpIntegrations.docsLabel", {
+                                  name: integration.name,
+                                })}
+                              >
+                                <IconExternalLink className="h-3.5 w-3.5" />
+                              </a>
+                            </TooltipTrigger>
+                            <TooltipContent>
+                              {t("mcpIntegrations.docsLabel", {
+                                name: integration.name,
+                              })}
+                            </TooltipContent>
+                          </Tooltip>
                         )}
                       </div>
                     </article>
@@ -449,7 +414,7 @@ export function McpIntegrationDialog({
           </>
         ) : (
           <>
-            <DialogHeader className="border-b border-border pe-12">
+            <DialogHeader className="shrink-0 border-b border-border px-7 pb-5 pe-14 pt-6">
               <button
                 type="button"
                 onClick={() => {
@@ -479,7 +444,7 @@ export function McpIntegrationDialog({
                   : t("mcpIntegrations.customDescription")}
               </DialogDescription>
             </DialogHeader>
-            <div className="min-h-0 flex-1 overflow-y-auto p-4">
+            <div className="min-h-0 flex-1 overflow-y-auto px-7 py-5">
               <div className="space-y-3">
                 {renderScopeSelector()}
                 {selected?.authMode === "oauth" && (
@@ -587,7 +552,7 @@ export function McpIntegrationDialog({
                 )}
               </div>
             </div>
-            <div className="flex items-center justify-between gap-2 border-t border-border p-4">
+            <div className="flex shrink-0 items-center justify-between gap-2 border-t border-border px-7 py-4">
               <button
                 type="button"
                 onClick={runTest}

package/corpus/core/src/client/rich-markdown-editor/SharedRichEditor.tsx

@@ -55,6 +55,8 @@ export interface SharedRichEditorProps {
    * `value`/`onChange` editor — the existing, non-collaborative behavior.
    */
   ydoc?: YDoc | null;
+  /** True after the collab provider has loaded persisted Y.Doc state. */
+  collabSynced?: boolean;
   /** Shared awareness instance for live cursors/presence. */
   awareness?: Awareness | null;
   /** Current user info for the collaborative cursor label. */
@@ -142,6 +144,7 @@ export function SharedRichEditor({
   ariaLabel,
   interactive = editable,
   ydoc = null,
+  collabSynced = true,
   awareness = null,
   user = null,
   disableHistory = false,
@@ -250,6 +253,7 @@ export function SharedRichEditor({
   const collabState = useCollabReconcile({
     editor,
     ydoc,
+    collabSynced,
     awareness,
     value,
     contentUpdatedAt,

package/corpus/core/src/client/rich-markdown-editor/useCollabReconcile.ts

@@ -48,6 +48,8 @@ export interface UseCollabReconcileOptions {
   editor: Editor | null;
   /** Shared Y.Doc when collaborating; null disables all collab paths. */
   ydoc?: YDoc | null;
+  /** True after the collab provider has loaded the persisted initial Y.Doc state. */
+  collabSynced?: boolean;
   /** Shared awareness; null keeps the sole-client lead path. */
   awareness?: Awareness | null;
   /** Authoritative markdown value (SQL source of truth). */
@@ -213,6 +215,7 @@ function defaultSetContent(
 export function useCollabReconcile({
   editor,
   ydoc = null,
+  collabSynced = true,
   awareness = null,
   value,
   contentUpdatedAt,
@@ -296,6 +299,7 @@ export function useCollabReconcile({
   useEffect(() => {
     if (!collab || !editor || editor.isDestroyed || !ydoc) return;
     if (seededRef.current) return;
+    if (!collabSynced) return;
     if (!isLeadClient) return;
     if (!value.trim()) return;
     const fragment = ydoc.getXmlFragment("default");
@@ -331,6 +335,7 @@ export function useCollabReconcile({
     };
   }, [
     collab,
+    collabSynced,
     editor,
     ydoc,
     value,
@@ -360,7 +365,7 @@ export function useCollabReconcile({
       if (cancelled || editor.isDestroyed) return;
       // In collab mode, defer all reconcile until the shared doc is seeded so we
       // never setContent over an unseeded fragment.
-      if (collab && !seededRef.current) {
+      if (collab && (!collabSynced || !seededRef.current)) {
         retry = setTimeout(() => apply(deferred), 300);
         return;
       }
@@ -529,6 +534,7 @@ export function useCollabReconcile({
     editor,
     value,
     collab,
+    collabSynced,
     isLeadClient,
     getMarkdown,
     setContent,