@agent-native/toolkit 0.13.7 → 0.13.8

package/src/chat-history.css

@@ -393,7 +393,13 @@
   border-radius: var(--radius);
   background: hsl(var(--popover));
   color: hsl(var(--popover-foreground));
-  box-shadow: 0 10px 30px hsl(var(--background) / 0.28);
+  --agent-shadow: 0 0% 0%;
+  --agent-shadow-o: 0.14;
+  box-shadow: 0 10px 30px hsl(var(--agent-shadow) / var(--agent-shadow-o));
+}
+
+.dark .an-chat-history-row__menu-content {
+  --agent-shadow-o: 0.08;
 }
 
 .an-chat-history-row__menu-item {

package/src/collab-ui/RecentEditHighlights.tsx

@@ -47,6 +47,8 @@ export interface RecentEditHighlightsProps {
   containerRef: RefObject<HTMLElement | null>;
   /** Highlight lifetime; should match useRecentEdits ttlMs. Default 6000. */
   ttlMs?: number;
+  /** Render the compact outline treatment used by the Slides editor. */
+  outlineOnly?: boolean;
   /** Additional CSS class for the overlay div. */
   className?: string;
 }
@@ -57,6 +59,7 @@ interface Highlight {
   label: string;
   avatarUrl?: string;
   isAgent: boolean;
+  outlineOnly: boolean;
   opacity: number;
   rect: { top: number; left: number; width: number; height: number };
 }
@@ -64,7 +67,9 @@ interface Highlight {
 const HighlightItem = memo(function HighlightItem({ h }: { h: Highlight }) {
   return (
     <div
-      aria-label={`${h.label} edited this`}
+      aria-label={
+        h.isAgent && h.outlineOnly ? h.label : `${h.label} edited this`
+      }
       style={{
         position: "absolute",
         top: h.rect.top,
@@ -78,8 +83,12 @@ const HighlightItem = memo(function HighlightItem({ h }: { h: Highlight }) {
         transition: "opacity 400ms ease-out",
         outline: `2px solid ${h.color}`,
         outlineOffset: 2,
-        backgroundColor: `${h.color}1A`,
-        boxShadow: `0 0 0 1px ${h.color}33, 0 0 12px ${h.color}40`,
+        ...(h.outlineOnly
+          ? {}
+          : {
+              backgroundColor: `${h.color}1A`,
+              boxShadow: `0 0 0 1px ${h.color}33, 0 0 12px ${h.color}40`,
+            }),
       }}
     >
       <div
@@ -90,8 +99,9 @@ const HighlightItem = memo(function HighlightItem({ h }: { h: Highlight }) {
           display: "flex",
           alignItems: "center",
           gap: 4,
-          backgroundColor: h.color,
-          color: "#fff",
+          backgroundColor: h.outlineOnly ? "transparent" : h.color,
+          border: h.outlineOnly ? `1px solid ${h.color}` : undefined,
+          color: h.outlineOnly ? h.color : "hsl(var(--background))",
           fontSize: 10,
           fontWeight: 600,
           padding: "2px 6px",
@@ -125,6 +135,7 @@ export function RecentEditHighlights({
   resolveRect,
   containerRef,
   ttlMs = RECENT_EDIT_TTL_MS,
+  outlineOnly = false,
   className,
 }: RecentEditHighlightsProps) {
   const [highlights, setHighlights] = useState<Highlight[]>([]);
@@ -170,14 +181,17 @@ export function RecentEditHighlights({
         key: `${edit.clientId}:${edit.at}`,
         color: edit.user.color || "#94a3b8",
         label: edit.isAgent
-          ? edit.label
-            ? `AI — ${edit.label}`
-            : "AI edited"
+          ? outlineOnly
+            ? "AI editing"
+            : edit.label
+              ? `AI — ${edit.label}`
+              : "AI edited"
           : edit.label
             ? `${edit.user.name} — ${edit.label}`
             : edit.user.name,
         avatarUrl: (edit.user as { avatarUrl?: string }).avatarUrl,
         isAgent: edit.isAgent,
+        outlineOnly,
         opacity,
         rect: { top, left, width: domRect.width, height: domRect.height },
       });

package/src/composer/PromptComposer.tsx

@@ -99,6 +99,8 @@ export interface PromptComposerProps {
   preserveDraftOnSubmit?: boolean;
   /** Show the model selector (default: true). */
   showModelSelector?: boolean;
+  /** Show the legacy provider-level Auto model option (default: true). */
+  showAutoModelOption?: boolean;
   /** Show the voice dictation button. Defaults to DEFAULT_VOICE_DICTATION_ENABLED. */
   voiceEnabled?: boolean;
   /** Show file upload controls and pass submitted files to onSubmit (default: true). */
@@ -472,6 +474,7 @@ function PromptComposerInner({
   draftScope,
   preserveDraftOnSubmit = false,
   showModelSelector = true,
+  showAutoModelOption = true,
   voiceEnabled = DEFAULT_VOICE_DICTATION_ENABLED,
   attachmentsEnabled = true,
   plusMenuMode,
@@ -665,6 +668,7 @@ function PromptComposerInner({
           selectedModel={composerModel}
           selectedEffort={composerEffort}
           availableModels={composerModelGroups}
+          showAutoModelOption={showAutoModelOption}
           modelListLoading={composerModelListLoading}
           onModelChange={handleModelChange}
           onEffortChange={handleEffortChange}

package/src/composer/TiptapComposer.spec.ts

@@ -62,6 +62,7 @@ describe("createTiptapComposerExtensions", () => {
     expect(compactComposerModelName("gpt-5-6-terra")).toBe("Terra");
     expect(compactComposerModelName("openai/gpt-5.6-luna")).toBe("Luna");
     expect(compactComposerModelName("claude-sonnet-5")).toBe("Sonnet 5");
+    expect(compactComposerModelName("codex-cli")).toBe("Codex");
     expect(compactComposerReasoningEffortLabel("medium")).toBe("Med");
     expect(compactComposerReasoningEffortLabel("minimal")).toBe("Min");
     expect(compactComposerReasoningEffortLabel("xhigh")).toBe("XHigh");

package/src/composer/TiptapComposer.tsx

@@ -633,12 +633,16 @@ export interface TiptapComposerProps {
   selectedModel?: string;
   /** Selected reasoning effort override for this conversation */
   selectedEffort?: ReasoningEffort;
+  /** Show the legacy provider-level Auto model option (default: true). */
+  showAutoModelOption?: boolean;
   /** Available models grouped by provider */
   availableModels?: Array<{
     engine: string;
     label: string;
     models: string[];
     configured: boolean;
+    statusLabel?: string;
+    isSubscription?: boolean;
   }>;
   /** Whether the model list is still being resolved. */
   modelListLoading?: boolean;
@@ -844,7 +848,7 @@ function ModeSelector({
 
 const FRIENDLY_MODEL_NAMES: Record<string, string> = {
   auto: "Default model",
-  "codex-cli": "ChatGPT subscription",
+  "codex-cli": "Codex",
   "claude-fable-5": "Fable 5",
   "kimi-k2-5": "Kimi K2.5",
   "deepseek-v3-1": "DeepSeek v3.1",
@@ -1046,6 +1050,7 @@ function ModelSelector({
   model,
   effort,
   engines,
+  showAutoModelOption = true,
   modelListLoading = false,
   onChange,
   onEffortChange,
@@ -1061,7 +1066,10 @@ function ModelSelector({
     label: string;
     models: string[];
     configured: boolean;
+    statusLabel?: string;
+    isSubscription?: boolean;
   }>;
+  showAutoModelOption?: boolean;
   modelListLoading?: boolean;
   onChange: (model: string, engine: string) => void;
   onEffortChange?: (effort: ReasoningEffort) => void;
@@ -1075,7 +1083,9 @@ function ModelSelector({
   const reasoning = adapters.models?.reasoning;
   const defaultEffort = reasoning?.defaultEffort ?? DEFAULT_REASONING_EFFORT;
   const [open, setOpen] = useState(false);
-  const autoModelGroup = engines.find((group) => group.models.includes("auto"));
+  const autoModelGroup = showAutoModelOption
+    ? engines.find((group) => group.models.includes("auto"))
+    : undefined;
   const providerGroups = useMemo(
     () =>
       engines
@@ -1155,12 +1165,16 @@ function ModelSelector({
   const hasConfiguredBuilderModels = providerGroups.some(
     (group) => group.engine === "builder" && group.configured,
   );
+  const hasConnectedSubscription = providerGroups.some(
+    (group) => group.configured && group.isSubscription,
+  );
   const showBuilderCta =
     (builderFlow.hasFetchedStatus ||
       (!providerConnectStatusEnabled && !!onConnectProvider)) &&
     !builderFlow.configured &&
     !builderFlow.envManaged &&
-    !hasConfiguredBuilderModels;
+    !hasConfiguredBuilderModels &&
+    !hasConnectedSubscription;
   const onlyConnectPathAvailable = shouldShowOnlyConnectPath(
     showBuilderCta,
     providerGroups,
@@ -1352,6 +1366,17 @@ function ModelSelector({
             const groupKey = `${group.engine}:${group.label}`;
             const isExpanded = expandedGroups.has(groupKey);
             const ChevronIcon = isExpanded ? IconChevronDown : IconChevronRight;
+            const isLocalRuntime =
+              group.engine === "codex-cli" || group.engine === "claude-cli";
+            const canConnectLocalRuntime =
+              isLocalRuntime && Boolean(onConnectLocalRuntime);
+            const statusLabel =
+              group.statusLabel ??
+              (!group.configured
+                ? canConnectLocalRuntime
+                  ? "sign in"
+                  : "needs API key"
+                : undefined);
             return (
               <div key={groupKey}>
                 <div className="flex items-center hover:bg-accent/30">
@@ -1371,21 +1396,24 @@ function ModelSelector({
                       </span>
                     )}
                   </button>
-                  {!group.configured && (
+                  {!group.configured && statusLabel && (
                     <button
                       type="button"
-                      className="text-[10px] text-muted-foreground/60 hover:text-foreground cursor-pointer pe-3 py-1.5"
+                      className="ms-auto max-w-[9rem] shrink-0 text-end text-[10px] text-muted-foreground/60 hover:text-foreground cursor-pointer pe-3 py-1.5"
                       onClick={() =>
-                        group.engine === "codex-cli" && onConnectLocalRuntime
+                        canConnectLocalRuntime
                           ? connectLocalRuntime(group.engine)
                           : openLlmSettings()
                       }
                     >
-                      {group.engine === "codex-cli" && onConnectLocalRuntime
-                        ? "sign in"
-                        : "needs API key"}
+                      {statusLabel}
                     </button>
                   )}
+                  {group.configured && statusLabel && (
+                    <span className="ms-auto max-w-[9rem] shrink-0 pe-3 text-end text-[10px] text-muted-foreground/70">
+                      {statusLabel}
+                    </span>
+                  )}
                 </div>
                 {isExpanded &&
                   models.map((m) => (
@@ -1394,10 +1422,7 @@ function ModelSelector({
                       type="button"
                       onClick={() => {
                         if (!group.configured) {
-                          if (
-                            group.engine === "codex-cli" &&
-                            onConnectLocalRuntime
-                          ) {
+                          if (canConnectLocalRuntime) {
                             connectLocalRuntime(group.engine);
                           } else {
                             openLlmSettings();
@@ -1540,6 +1565,7 @@ export function TiptapComposer({
   voiceEnabled = DEFAULT_VOICE_DICTATION_ENABLED,
   selectedModel,
   selectedEffort,
+  showAutoModelOption = true,
   availableModels,
   modelListLoading,
   onModelChange,
@@ -2985,6 +3011,7 @@ export function TiptapComposer({
             model={selectedModel}
             effort={selectedEffort}
             engines={availableModels}
+            showAutoModelOption={showAutoModelOption}
             modelListLoading={modelListLoading}
             onChange={onModelChange}
             onEffortChange={onEffortChange}

package/src/composer/runtime-adapters.tsx

@@ -26,6 +26,10 @@ export interface EngineModelGroup {
   label: string;
   models: string[];
   configured: boolean;
+  /** Provider-owned connection state shown at the far edge of the row. */
+  statusLabel?: string;
+  /** Marks a configured local subscription so setup CTAs can stay hidden. */
+  isSubscription?: boolean;
 }
 
 export interface ComposerModelState {