@agent-native/toolkit 0.13.8 → 0.13.10

package/src/chat-history/ChatHistoryList.tsx

@@ -358,6 +358,8 @@ const ChatHistoryRow = React.memo(function ChatHistoryRow({
         "an-chat-history-row",
         active && "an-chat-history-row--active",
         item.pinned && "an-chat-history-row--pinned",
+        hasMenu && "an-chat-history-row--has-menu",
+        menuOpen && "an-chat-history-row--menu-open",
         isRenaming && "an-chat-history-row--renaming",
         item.disabled && "an-chat-history-row--disabled",
       )}

package/src/chat-history.css

@@ -234,7 +234,7 @@
 .an-chat-history--rail .an-chat-history-row__button {
   min-height: 32px;
   padding-block: 6px;
-  padding-inline: 10px 36px;
+  padding-inline: 10px;
   border-radius: inherit;
   color: hsl(var(--muted-foreground));
 }
@@ -290,6 +290,15 @@
 .an-chat-history--rail .an-chat-history-row__timestamp {
   font-size: 11px;
   color: hsl(var(--muted-foreground) / 0.62);
+  transition: opacity 100ms ease;
+}
+
+.an-chat-history--rail
+  .an-chat-history-row--has-menu
+  .an-chat-history-row__timestamp {
+  display: inline-flex;
+  min-width: 24px;
+  justify-content: flex-end;
 }
 
 .an-chat-history--rail
@@ -298,6 +307,23 @@
   color: hsl(var(--accent-foreground));
 }
 
+/* The menu overlays this fixed trailing slot so its hover state never changes
+   the title's available width or moves the rest of the rail. */
+.an-chat-history--rail
+  .an-chat-history-row--has-menu:hover
+  .an-chat-history-row__timestamp,
+.an-chat-history--rail
+  .an-chat-history-row--has-menu:focus-within
+  .an-chat-history-row__timestamp,
+.an-chat-history--rail
+  .an-chat-history-row--has-menu.an-chat-history-row--menu-open
+  .an-chat-history-row__timestamp,
+.an-chat-history--rail
+  .an-chat-history-row--has-menu.an-chat-history-row--pinned
+  .an-chat-history-row__timestamp {
+  opacity: 0;
+}
+
 .an-chat-history-row__subtitle {
   margin-top: 2px;
   overflow: hidden;
@@ -351,6 +377,10 @@
   inset-inline-end: 4px;
 }
 
+.an-chat-history--rail .an-chat-history-row__menu {
+  inset-inline-end: 10px;
+}
+
 .an-chat-history-row__menu-trigger {
   display: inline-flex;
   align-items: center;
@@ -369,6 +399,10 @@
     opacity 100ms ease;
 }
 
+.an-chat-history--rail .an-chat-history-row__menu-trigger {
+  pointer-events: none;
+}
+
 .an-chat-history-row:hover .an-chat-history-row__menu-trigger,
 .an-chat-history-row:focus-within .an-chat-history-row__menu-trigger,
 .an-chat-history-row__menu-trigger[aria-expanded="true"],
@@ -376,6 +410,17 @@
   opacity: 1;
 }
 
+.an-chat-history--rail
+  .an-chat-history-row:hover
+  .an-chat-history-row__menu-trigger,
+.an-chat-history--rail
+  .an-chat-history-row:focus-within
+  .an-chat-history-row__menu-trigger,
+.an-chat-history--rail .an-chat-history-row__menu-trigger[aria-expanded="true"],
+.an-chat-history--rail .an-chat-history-row__menu-trigger--pinned {
+  pointer-events: auto;
+}
+
 .an-chat-history-row__menu-trigger:hover,
 .an-chat-history-row__menu-trigger[aria-expanded="true"] {
   background: hsl(var(--accent));

package/src/collab-ui/PresenceBar.tsx

@@ -20,6 +20,9 @@ export interface PresenceBarProps {
   agentPresent?: boolean;
   /** Whether the agent is actively making edits right now. */
   agentActive?: boolean;
+  /** Whether to show the status dot beside the active agent label. When false,
+   *  the label is integrated with the avatar pill. */
+  showAgentEditingDot?: boolean;
   /** Current user's email (to exclude from the list). */
   currentUserEmail?: string;
   /** Max visible avatars before "+N" overflow. Default: 5 */
@@ -151,12 +154,15 @@ function AgentAvatar({
   active,
   onClick,
   isFollowing,
+  showAgentEditingDot,
 }: {
   active: boolean;
   onClick?: () => void;
   isFollowing?: boolean;
+  showAgentEditingDot: boolean;
 }) {
   injectStyles();
+  const integratedEditingBadge = active && !isFollowing && !showAgentEditingDot;
 
   return (
     <div
@@ -164,6 +170,12 @@ function AgentAvatar({
         display: "flex",
         alignItems: "center",
         gap: 4,
+        ...(integratedEditingBadge && {
+          height: AVATAR_SIZE,
+          paddingRight: 8,
+          borderRadius: 9999,
+          backgroundColor: `${AGENT_COLOR}20`,
+        }),
       }}
     >
       <div
@@ -193,7 +205,12 @@ function AgentAvatar({
       >
         A
       </div>
-      {active && !isFollowing && <AgentEditingChip />}
+      {active && !isFollowing && (
+        <AgentEditingChip
+          showDot={showAgentEditingDot}
+          integrated={integratedEditingBadge}
+        />
+      )}
       {isFollowing && (
         <span
           style={{
@@ -216,33 +233,41 @@ function AgentAvatar({
   );
 }
 
-function AgentEditingChip() {
+function AgentEditingChip({
+  showDot,
+  integrated,
+}: {
+  showDot: boolean;
+  integrated: boolean;
+}) {
   return (
     <span
       style={{
         display: "inline-flex",
         alignItems: "center",
-        gap: 4,
-        height: 20,
-        padding: "0 8px",
-        borderRadius: 9999,
-        backgroundColor: `${AGENT_COLOR}20`,
+        gap: showDot ? 4 : 0,
+        height: integrated ? "auto" : 20,
+        padding: integrated ? 0 : "0 8px",
+        borderRadius: integrated ? 0 : 9999,
+        backgroundColor: integrated ? "transparent" : `${AGENT_COLOR}20`,
         color: AGENT_COLOR,
         fontSize: 11,
         fontWeight: 600,
         whiteSpace: "nowrap",
       }}
     >
-      <span
-        style={{
-          width: 6,
-          height: 6,
-          borderRadius: "50%",
-          backgroundColor: AGENT_COLOR,
-          animation: "_anPresencePulse 2s infinite",
-          flexShrink: 0,
-        }}
-      />
+      {showDot && (
+        <span
+          style={{
+            width: 6,
+            height: 6,
+            borderRadius: "50%",
+            backgroundColor: AGENT_COLOR,
+            animation: "_anPresencePulse 2s infinite",
+            flexShrink: 0,
+          }}
+        />
+      )}
       AI editing
     </span>
   );
@@ -275,6 +300,7 @@ export function PresenceBar({
   activeUsers,
   agentPresent,
   agentActive,
+  showAgentEditingDot = true,
   currentUserEmail,
   maxVisible = 5,
   className,
@@ -313,6 +339,7 @@ export function PresenceBar({
             active={!!agentActive}
             onClick={onAvatarClick ? () => onAvatarClick(null) : undefined}
             isFollowing={isFollowingAgent}
+            showAgentEditingDot={showAgentEditingDot}
           />
         )}
         {visibleUsers.length > 0 && (

package/src/composer/PromptComposer.tsx

@@ -81,7 +81,7 @@ export interface PromptComposerProps {
     files: PromptComposerFile[],
     references: Reference[],
     options: PromptComposerSubmitOptions,
-  ) => void;
+  ) => void | Promise<void>;
   placeholder?: string;
   disabled?: boolean;
   /** Override the generic document attachment cap for a multipart host. */
@@ -587,7 +587,7 @@ function PromptComposerInner({
         text,
         attachments,
       });
-      onSubmit(finalText, files, references, {
+      await onSubmit(finalText, files, references, {
         intent: submitOptions?.intent ?? "immediate",
         model: composerModel,
         engine: composerEngine,

package/src/composer/TiptapComposer.spec.ts

@@ -44,7 +44,7 @@ describe("createTiptapComposerExtensions", () => {
     }).not.toThrow();
   });
 
-  it("offers explicit reasoning levels without legacy Auto", () => {
+  it("offers explicit effort levels without legacy Auto", () => {
     expect(getComposerReasoningEffortOptions("auto")).toEqual([
       "low",
       "medium",

package/src/composer/TiptapComposer.tsx

@@ -580,7 +580,7 @@ export interface TiptapComposerProps {
     references: Reference[],
     attachments?: ReadonlyArray<unknown>,
     options?: TiptapComposerSubmitOptions,
-  ) => void;
+  ) => void | Promise<void>;
   /** Return false to stop a submit before it enters the chat runtime. */
   onBeforeSubmit?: () => boolean | Promise<boolean>;
   /**
@@ -631,7 +631,7 @@ export interface TiptapComposerProps {
   voiceEnabled?: boolean;
   /** Selected model override for this conversation */
   selectedModel?: string;
-  /** Selected reasoning effort override for this conversation */
+  /** Selected effort override for this conversation */
   selectedEffort?: ReasoningEffort;
   /** Show the legacy provider-level Auto model option (default: true). */
   showAutoModelOption?: boolean;
@@ -648,7 +648,7 @@ export interface TiptapComposerProps {
   modelListLoading?: boolean;
   /** Callback when user picks a model */
   onModelChange?: (model: string, engine: string) => void;
-  /** Callback when user picks a reasoning effort */
+  /** Callback when user picks an effort */
   onEffortChange?: (effort: ReasoningEffort) => void;
   /**
    * Disable Builder/provider status polling for hosts that supply provider
@@ -963,7 +963,7 @@ function latestModelsOnly(models: string[]): string[] {
       return true;
     }
     // GPT: family = gpt-{major} (e.g. gpt-5.6-sol and gpt-5.6-luna are different)
-    // OpenAI reasoning: each is its own family
+    // OpenAI effort: each is its own family
     // Gemini: family = gemini-{major} + variant
     const gemini = m.match(/^gemini-(\d+(?:\.\d+)?)-(.+?)(?:-preview)?$/);
     if (gemini) {
@@ -1133,12 +1133,12 @@ function ModelSelector({
     });
   }, []);
 
-  // The reasoning effort list is collapsed by default — it's a secondary
+  // The effort list is collapsed by default — it's a secondary
   // control most users don't touch, so it stays tucked behind a header that
   // reveals the current effort at a glance. Reset to collapsed on each open.
-  const [reasoningExpanded, setReasoningExpanded] = useState(false);
+  const [effortExpanded, setEffortExpanded] = useState(false);
   useEffect(() => {
-    if (open) setReasoningExpanded(false);
+    if (open) setEffortExpanded(false);
   }, [open]);
 
   // The optional image-model section follows the same collapsed-by-default
@@ -1202,7 +1202,7 @@ function ModelSelector({
           data-agent-composer-slot="model-button"
           aria-label={`Model: ${friendlyModelName(model)}${
             effortOptions.length > 0
-              ? `. Reasoning: ${effortLabel(selectedEffort)}`
+              ? `. Effort: ${effortLabel(selectedEffort)}`
               : ""
           }`}
           className="agent-composer-model-button flex min-w-0 max-w-[10.5rem] shrink items-center gap-1 rounded-md px-2 py-1 text-[12px] font-medium text-muted-foreground hover:bg-accent/50 hover:text-foreground"
@@ -1466,26 +1466,26 @@ function ModelSelector({
               <div className="flex items-center hover:bg-accent/30">
                 <button
                   type="button"
-                  aria-expanded={reasoningExpanded}
-                  onClick={() => setReasoningExpanded((prev) => !prev)}
+                  aria-expanded={effortExpanded}
+                  onClick={() => setEffortExpanded((prev) => !prev)}
                   className="flex flex-1 min-w-0 items-center gap-1.5 px-2 py-1.5 cursor-pointer text-start"
                 >
-                  {reasoningExpanded ? (
+                  {effortExpanded ? (
                     <IconChevronDown className="h-3 w-3 shrink-0 text-muted-foreground" />
                   ) : (
                     <IconChevronRight className="h-3 w-3 shrink-0 text-muted-foreground rtl:-scale-x-100" />
                   )}
                   <span className="text-[11px] font-medium text-muted-foreground uppercase tracking-wide shrink-0">
-                    Reasoning
+                    Effort
                   </span>
-                  {!reasoningExpanded && (
+                  {!effortExpanded && (
                     <span className="text-[11px] text-muted-foreground/80 truncate">
                       {effortLabel(selectedEffort)}
                     </span>
                   )}
                 </button>
               </div>
-              {reasoningExpanded &&
+              {effortExpanded &&
                 effortOptions.map((option) => (
                   <button
                     key={option}
@@ -2651,7 +2651,13 @@ export function TiptapComposer({
       }
 
       if (onSubmit) {
-        onSubmit(text, references, attachments, { intent });
+        try {
+          await onSubmit(text, references, attachments, { intent });
+        } catch {
+          // Hosts own their submit errors. Keep the draft and attachments
+          // available for recovery when a host rejects the submission.
+          return;
+        }
         // Clear any pending attachments now that the host has them.
         void composerRuntime.clearAttachments().catch(() => {});
         if (!clearOnSubmit) {

package/src/composer/runtime-adapters.tsx

@@ -184,7 +184,7 @@ const fallbackModels = {
   useChatModels: () => ({
     selectedModel: "auto",
     selectedEngine: "auto",
-    selectedEffort: "medium" as ReasoningEffort,
+    selectedEffort: "high" as ReasoningEffort,
     availableModels: [],
     isLoading: false,
     onModelChange: () => {},
@@ -281,7 +281,7 @@ export function useComposerRuntimeAdapters() {
   return useContext(ComposerRuntimeAdaptersContext);
 }
 
-export const DEFAULT_REASONING_EFFORT: ReasoningEffort = "medium";
+export const DEFAULT_REASONING_EFFORT: ReasoningEffort = "high";
 export function getReasoningEffortOptionsForModel(
   _model?: string,
 ): ReasoningEffort[] {

package/src/editor.css

@@ -57,6 +57,8 @@
   box-shadow: none;
   opacity: 0.55;
   pointer-events: none;
+  /* compositing-ok: .notion-drag-preview exists only during a drag and is
+     transformed every frame of it; the layer is retired with the element. */
   will-change: transform;
 }
 

package/src/ui/dropdown-menu.tsx

@@ -54,6 +54,8 @@ const DropdownMenuSubContent = React.forwardRef<
     <DropdownMenuPrimitive.SubContent
       ref={ref}
       className={cn(
+        // compositing-ok: Radix content mounts on open and unmounts on close,
+        // so the promoted layer is retired with it.
         "z-[290] min-w-[8rem] origin-[var(--radix-dropdown-menu-content-transform-origin)] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg will-change-[transform,opacity] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:duration-100 data-[state=open]:duration-150 data-[state=closed]:ease-out data-[state=open]:ease-out data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 motion-reduce:data-[state=open]:zoom-in-100 motion-reduce:data-[state=closed]:zoom-out-100 motion-reduce:data-[side=bottom]:slide-in-from-top-0 motion-reduce:data-[side=left]:slide-in-from-right-0 motion-reduce:data-[side=right]:slide-in-from-left-0 motion-reduce:data-[side=top]:slide-in-from-bottom-0",
         className,
       )}
@@ -83,6 +85,8 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
+        // compositing-ok: Radix content mounts on open and unmounts on close,
+        // so the promoted layer is retired with it.
         "z-[290] min-w-[8rem] origin-[var(--radix-dropdown-menu-content-transform-origin)] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md will-change-[transform,opacity] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:duration-100 data-[state=open]:duration-150 data-[state=closed]:ease-out data-[state=open]:ease-out data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 motion-reduce:data-[state=open]:zoom-in-100 motion-reduce:data-[state=closed]:zoom-out-100 motion-reduce:data-[side=bottom]:slide-in-from-top-0 motion-reduce:data-[side=left]:slide-in-from-right-0 motion-reduce:data-[side=right]:slide-in-from-left-0 motion-reduce:data-[side=top]:slide-in-from-bottom-0",
         className,
       )}