@agent-native/toolkit 0.16.0 → 0.16.2

package/dist/composer/model-selection.js

@@ -0,0 +1,31 @@
+export function isClaudeCodeAgentId(agentId) {
+    return agentId === "claude-code" || agentId === "claude-cli";
+}
+export function isLunaModel(model) {
+    return model.toLowerCase().includes("luna");
+}
+export function resolvePreferredAgentModel(agentId, groups) {
+    const candidates = groups.flatMap((group) => group.models
+        .filter((model) => model !== "auto")
+        .map((model) => ({
+        model,
+        engine: group.engine,
+        configured: group.configured !== false,
+    })));
+    const orderedCandidates = [
+        ...candidates.filter((candidate) => candidate.configured),
+        ...candidates.filter((candidate) => !candidate.configured),
+    ];
+    if (isClaudeCodeAgentId(agentId)) {
+        const preferred = orderedCandidates.find((candidate) => candidate.model.toLowerCase().includes("sonnet") &&
+            !isLunaModel(candidate.model)) ?? orderedCandidates.find((candidate) => !isLunaModel(candidate.model));
+        return preferred
+            ? { model: preferred.model, engine: preferred.engine }
+            : undefined;
+    }
+    const preferred = orderedCandidates.find((candidate) => isLunaModel(candidate.model));
+    return preferred
+        ? { model: preferred.model, engine: preferred.engine }
+        : undefined;
+}
+//# sourceMappingURL=model-selection.js.map

package/dist/composer/model-selection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"model-selection.js","sourceRoot":"","sources":["../../src/composer/model-selection.ts"],"names":[],"mappings":"AAMA,MAAM,UAAU,mBAAmB,CAAC,OAA2B;IAC7D,OAAO,OAAO,KAAK,aAAa,IAAI,OAAO,KAAK,YAAY,CAAC;AAC/D,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,KAAa;IACvC,OAAO,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;AAC9C,CAAC;AAED,MAAM,UAAU,0BAA0B,CACxC,OAA2B,EAC3B,MAAyC;IAEzC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,CAC1C,KAAK,CAAC,MAAM;SACT,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,KAAK,MAAM,CAAC;SACnC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QACf,KAAK;QACL,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,UAAU,EAAE,KAAK,CAAC,UAAU,KAAK,KAAK;KACvC,CAAC,CAAC,CACN,CAAC;IACF,MAAM,iBAAiB,GAAG;QACxB,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,UAAU,CAAC;QACzD,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,UAAU,CAAC;KAC3D,CAAC;IAEF,IAAI,mBAAmB,CAAC,OAAO,CAAC,EAAE,CAAC;QACjC,MAAM,SAAS,GACb,iBAAiB,CAAC,IAAI,CACpB,CAAC,SAAS,EAAE,EAAE,CACZ,SAAS,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC;YAChD,CAAC,WAAW,CAAC,SAAS,CAAC,KAAK,CAAC,CAChC,IAAI,iBAAiB,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,WAAW,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;QAC5E,OAAO,SAAS;YACd,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,CAAC,MAAM,EAAE;YACtD,CAAC,CAAC,SAAS,CAAC;IAChB,CAAC;IAED,MAAM,SAAS,GAAG,iBAAiB,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE,EAAE,CACrD,WAAW,CAAC,SAAS,CAAC,KAAK,CAAC,CAC7B,CAAC;IACF,OAAO,SAAS;QACd,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,CAAC,MAAM,EAAE;QACtD,CAAC,CAAC,SAAS,CAAC;AAChB,CAAC"}

package/dist/composer/model-selection.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=model-selection.spec.d.ts.map

package/dist/composer/model-selection.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"model-selection.spec.d.ts","sourceRoot":"","sources":["../../src/composer/model-selection.spec.ts"],"names":[],"mappings":""}

package/dist/composer/model-selection.spec.js

@@ -0,0 +1,38 @@
+import { describe, expect, it } from "vitest";
+import { isClaudeCodeAgentId, isLunaModel, resolvePreferredAgentModel, } from "./model-selection.js";
+describe("composer agent model defaults", () => {
+    const groups = [
+        {
+            engine: "builder",
+            models: ["gpt-5-6-luna"],
+            configured: true,
+        },
+        {
+            engine: "builder",
+            models: ["claude-sonnet-5"],
+            configured: true,
+        },
+    ];
+    it("identifies Claude Code and Luna model ids", () => {
+        expect(isClaudeCodeAgentId("claude-code")).toBe(true);
+        expect(isClaudeCodeAgentId("claude-cli")).toBe(true);
+        expect(isClaudeCodeAgentId("codex")).toBe(false);
+        expect(isLunaModel("gpt-5.6-luna")).toBe(true);
+        expect(isLunaModel("openai/gpt-5.6-sol")).toBe(false);
+    });
+    it("defaults Claude Code to Sonnet and other agents to Luna", () => {
+        expect(resolvePreferredAgentModel("claude-code", groups)).toEqual({
+            engine: "builder",
+            model: "claude-sonnet-5",
+        });
+        expect(resolvePreferredAgentModel("codex", groups)).toEqual({
+            engine: "builder",
+            model: "gpt-5-6-luna",
+        });
+        expect(resolvePreferredAgentModel(undefined, groups)).toEqual({
+            engine: "builder",
+            model: "gpt-5-6-luna",
+        });
+    });
+});
+//# sourceMappingURL=model-selection.spec.js.map

package/dist/composer/model-selection.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"model-selection.spec.js","sourceRoot":"","sources":["../../src/composer/model-selection.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AAE9C,OAAO,EACL,mBAAmB,EACnB,WAAW,EACX,0BAA0B,GAC3B,MAAM,sBAAsB,CAAC;AAE9B,QAAQ,CAAC,+BAA+B,EAAE,GAAG,EAAE;IAC7C,MAAM,MAAM,GAAG;QACb;YACE,MAAM,EAAE,SAAS;YACjB,MAAM,EAAE,CAAC,cAAc,CAAC;YACxB,UAAU,EAAE,IAAI;SACjB;QACD;YACE,MAAM,EAAE,SAAS;YACjB,MAAM,EAAE,CAAC,iBAAiB,CAAC;YAC3B,UAAU,EAAE,IAAI;SACjB;KACF,CAAC;IAEF,EAAE,CAAC,2CAA2C,EAAE,GAAG,EAAE;QACnD,MAAM,CAAC,mBAAmB,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACtD,MAAM,CAAC,mBAAmB,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACrD,MAAM,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACjD,MAAM,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC/C,MAAM,CAAC,WAAW,CAAC,oBAAoB,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACxD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yDAAyD,EAAE,GAAG,EAAE;QACjE,MAAM,CAAC,0BAA0B,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;YAChE,MAAM,EAAE,SAAS;YACjB,KAAK,EAAE,iBAAiB;SACzB,CAAC,CAAC;QACH,MAAM,CAAC,0BAA0B,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;YAC1D,MAAM,EAAE,SAAS;YACjB,KAAK,EAAE,cAAc;SACtB,CAAC,CAAC;QACH,MAAM,CAAC,0BAA0B,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;YAC5D,MAAM,EAAE,SAAS;YACjB,KAAK,EAAE,cAAc;SACtB,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/toolkit",
-  "version": "0.16.0",
+  "version": "0.16.2",
   "description": "Reusable app-building UI and helpers for Agent-Native apps.",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {

package/src/composer/ComposerPlusMenu.tsx

@@ -11,6 +11,7 @@ import {
   IconLoader2,
   IconArrowLeft,
   IconX,
+  IconHelpCircle,
 } from "@tabler/icons-react";
 import React, {
   useState,
@@ -196,6 +197,39 @@ function formatAttachmentError(error: unknown, fallback: string): string {
   return error instanceof Error ? error.message : fallback;
 }
 
+function MenuItemHelp({
+  label,
+  description,
+}: {
+  label: string;
+  description?: string;
+}) {
+  const normalizedDescription = description?.trim();
+  if (!normalizedDescription) return null;
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span
+          role="img"
+          tabIndex={0}
+          aria-label={`${label}: ${normalizedDescription}`}
+          onClick={(event) => event.stopPropagation()}
+          className="flex size-5 shrink-0 items-center justify-center rounded text-muted-foreground/60 hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+        >
+          <IconHelpCircle
+            aria-hidden="true"
+            className="size-3"
+            strokeWidth={1.8}
+          />
+        </span>
+      </TooltipTrigger>
+      <TooltipContent side="right" className="max-w-xs">
+        {normalizedDescription}
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
 function UploadOnlyAttachButton({
   onAttachmentError,
 }: Pick<ComposerPlusMenuProps, "onAttachmentError">) {
@@ -612,7 +646,11 @@ function ComposerPlusMenuFull({
                 return (
                   <div
                     key={item.label}
-                    className={cn("relative", isSkill && "group/skill")}
+                    className={cn(
+                      "relative flex items-center hover:bg-accent/50",
+                      isSkill && "group/skill",
+                      isSkill && skillFlyoutOpen && "bg-accent/50",
+                    )}
                     onMouseEnter={(e) => {
                       if (isSkill) {
                         openSkillFlyout(e.currentTarget);
@@ -640,25 +678,25 @@ function ComposerPlusMenuFull({
                       type="button"
                       onClick={item.action}
                       className={cn(
-                        "flex w-full items-center gap-2.5 px-3 py-2 text-start hover:bg-accent/50",
-                        isSkill && skillFlyoutOpen && "bg-accent/50",
+                        "flex min-w-0 flex-1 items-center gap-2.5 px-3 py-2 text-start",
                       )}
                     >
                       <span className="text-muted-foreground">{item.icon}</span>
-                      <div className="min-w-0 flex-1">
-                        <div className="text-[12px] font-medium text-foreground">
+                      <span className="flex min-w-0 items-center gap-0.5">
+                        <span className="min-w-0 truncate text-[12px] font-medium text-foreground">
                           {item.label}
-                        </div>
-                        <div className="mt-0.5 text-[10px] text-muted-foreground/60">
-                          {item.desc}
-                        </div>
-                      </div>
-                      {isSkill && (
-                        <span className="ms-auto text-muted-foreground/60">
-                          ›
                         </span>
-                      )}
+                        <MenuItemHelp
+                          label={item.label}
+                          description={item.desc}
+                        />
+                      </span>
                     </button>
+                    {isSkill && (
+                      <span className="me-3 ms-auto text-muted-foreground/60">
+                        ›
+                      </span>
+                    )}
                     {isSkill && skillFlyoutOpen && (
                       <div
                         role="menu"
@@ -671,57 +709,76 @@ function ComposerPlusMenuFull({
                             : "right-full mr-1",
                         )}
                       >
-                        <button
-                          type="button"
-                          onClick={() => {
-                            onSelectMode?.("skill");
-                            setSkillFlyoutOpen(false);
-                            setOpen(false);
-                          }}
-                          className="flex w-full items-center gap-2.5 px-3 py-2 text-start hover:bg-accent/50"
-                        >
-                          <span className="text-muted-foreground">
-                            <IconBulb className="h-3.5 w-3.5" />
-                          </span>
-                          <div className="min-w-0">
-                            <div className="text-[12px] font-medium text-foreground">
-                              {t("agentChat.composer.skill.createNew", {
-                                defaultValue: "Create new skill",
-                              })}
-                            </div>
-                            <div className="mt-0.5 text-[10px] text-muted-foreground/60">
-                              {t("agentChat.composer.skill.createDescription", {
-                                defaultValue:
-                                  "Describe a skill and let the agent draft it",
-                              })}
-                            </div>
-                          </div>
-                        </button>
-                        <button
-                          type="button"
-                          onClick={() => {
-                            setSkillFlyoutOpen(false);
-                            skillFileInputRef.current?.click();
-                          }}
-                          className="flex w-full items-center gap-2.5 px-3 py-2 text-start hover:bg-accent/50"
-                        >
-                          <span className="text-muted-foreground">
-                            <IconUpload className="h-3.5 w-3.5" />
-                          </span>
-                          <div className="min-w-0">
-                            <div className="text-[12px] font-medium text-foreground">
-                              {t("agentChat.composer.skill.uploadFile", {
-                                defaultValue: "Upload skill file",
-                              })}
-                            </div>
-                            <div className="mt-0.5 text-[10px] text-muted-foreground/60">
-                              {t("agentChat.composer.skill.uploadDescription", {
-                                defaultValue:
-                                  "Import an existing SKILL.md file",
-                              })}
-                            </div>
-                          </div>
-                        </button>
+                        <div className="flex items-center hover:bg-accent/50">
+                          <button
+                            type="button"
+                            onClick={() => {
+                              onSelectMode?.("skill");
+                              setSkillFlyoutOpen(false);
+                              setOpen(false);
+                            }}
+                            className="flex min-w-0 flex-1 items-center gap-2.5 px-3 py-2 text-start"
+                          >
+                            <span className="text-muted-foreground">
+                              <IconBulb className="h-3.5 w-3.5" />
+                            </span>
+                            <span className="flex min-w-0 items-center gap-0.5">
+                              <span className="min-w-0 truncate text-[12px] font-medium text-foreground">
+                                {t("agentChat.composer.skill.createNew", {
+                                  defaultValue: "Create new skill",
+                                })}
+                              </span>
+                              <MenuItemHelp
+                                label={t("agentChat.composer.skill.createNew", {
+                                  defaultValue: "Create new skill",
+                                })}
+                                description={t(
+                                  "agentChat.composer.skill.createDescription",
+                                  {
+                                    defaultValue:
+                                      "Describe a skill and let the agent draft it",
+                                  },
+                                )}
+                              />
+                            </span>
+                          </button>
+                        </div>
+                        <div className="flex items-center hover:bg-accent/50">
+                          <button
+                            type="button"
+                            onClick={() => {
+                              setSkillFlyoutOpen(false);
+                              skillFileInputRef.current?.click();
+                            }}
+                            className="flex min-w-0 flex-1 items-center gap-2.5 px-3 py-2 text-start"
+                          >
+                            <span className="text-muted-foreground">
+                              <IconUpload className="h-3.5 w-3.5" />
+                            </span>
+                            <span className="flex min-w-0 items-center gap-0.5">
+                              <span className="min-w-0 truncate text-[12px] font-medium text-foreground">
+                                {t("agentChat.composer.skill.uploadFile", {
+                                  defaultValue: "Upload skill file",
+                                })}
+                              </span>
+                              <MenuItemHelp
+                                label={t(
+                                  "agentChat.composer.skill.uploadFile",
+                                  {
+                                    defaultValue: "Upload skill file",
+                                  },
+                                )}
+                                description={t(
+                                  "agentChat.composer.skill.uploadDescription",
+                                  {
+                                    defaultValue:
+                                      "Import an existing SKILL.md file",
+                                  },
+                                )}
+                              />
+                            </span>
+                          </button>
+                        </div>
                       </div>
                     )}
                   </div>

package/src/composer/PromptComposer.tsx

@@ -100,6 +100,8 @@ export interface PromptComposerProps {
   preserveDraftOnSubmit?: boolean;
   /** Show the model selector (default: true). */
   showModelSelector?: boolean;
+  /** Controlled open state for hosts that resize around the model picker. */
+  modelSelectorOpen?: boolean;
   /** Show the legacy provider-level Auto model option (default: true). */
   showAutoModelOption?: boolean;
   /** Show the voice dictation button. Defaults to DEFAULT_VOICE_DICTATION_ENABLED. */
@@ -156,6 +158,8 @@ export interface PromptComposerProps {
   selectedAgent?: string;
   /** Callback when the user picks an agent runtime. */
   onAgentChange?: (agent: string) => void;
+  /** Called when the shared model picker opens or closes. */
+  onModelSelectorOpenChange?: (open: boolean) => void;
   /**
    * Enable server-backed model/provider status checks. Defaults off when the
    * host supplies model state and callbacks, otherwise on.
@@ -497,6 +501,7 @@ function PromptComposerInner({
   draftScope,
   preserveDraftOnSubmit = false,
   showModelSelector = true,
+  modelSelectorOpen,
   showAutoModelOption = true,
   voiceEnabled = DEFAULT_VOICE_DICTATION_ENABLED,
   attachmentsEnabled = true,
@@ -525,6 +530,7 @@ function PromptComposerInner({
   availableAgents,
   selectedAgent,
   onAgentChange,
+  onModelSelectorOpenChange,
   modelStatusChecksEnabled,
   onTextChange,
   onConnectProvider,
@@ -697,6 +703,7 @@ function PromptComposerInner({
           onTextChange={onTextChange}
           draftScope={draftScope}
           selectedModel={composerModel}
+          modelSelectorOpen={modelSelectorOpen}
           selectedEffort={composerEffort}
           availableModels={composerModelGroups}
           availableAgents={availableAgents}
@@ -706,6 +713,7 @@ function PromptComposerInner({
           onModelChange={handleModelChange}
           onEffortChange={handleEffortChange}
           onAgentChange={onAgentChange}
+          onModelSelectorOpenChange={onModelSelectorOpenChange}
           providerConnectStatusEnabled={resolvedModelStatusChecksEnabled}
           onConnectProvider={onConnectProvider}
           onConnectLocalRuntime={onConnectLocalRuntime}

package/src/composer/TiptapComposer.spec.ts

@@ -18,6 +18,7 @@ import {
   getOversizedDocumentAttachmentError,
   handleComposerFileDrop,
   insertComposerHardBreakAndScrollIntoView,
+  isOpenAiModelProviderGroup,
   isComposerEditorUsable,
   formatVoiceTranscriptForComposer,
   MODEL_SELECTOR_POPOVER_STYLE,
@@ -106,6 +107,51 @@ describe("createTiptapComposerExtensions", () => {
     );
   });
 
+  it("limits Codex to OpenAI model providers", () => {
+    expect(
+      isOpenAiModelProviderGroup({
+        engine: "builder",
+        label: "OpenAI",
+        models: ["gpt-5.6-luna"],
+      }),
+    ).toBe(true);
+    expect(
+      isOpenAiModelProviderGroup({
+        engine: "ai-sdk:google",
+        label: "Gemini",
+        models: ["gemini-3.5-flash"],
+      }),
+    ).toBe(false);
+    expect(
+      isOpenAiModelProviderGroup({
+        engine: "custom-gateway",
+        label: "Custom",
+        models: ["gpt-5.6-luna"],
+      }),
+    ).toBe(true);
+    expect(
+      isOpenAiModelProviderGroup({
+        engine: "ai-sdk:openrouter",
+        label: "OpenRouter",
+        models: ["openai/gpt-5.6-luna"],
+      }),
+    ).toBe(true);
+    expect(
+      isOpenAiModelProviderGroup({
+        engine: "codex-cli",
+        label: "OpenAI",
+        models: ["gpt-5.6-luna"],
+      }),
+    ).toBe(true);
+    expect(
+      isOpenAiModelProviderGroup({
+        engine: "codex-cli",
+        label: "OpenAI",
+        models: ["codex-cli"],
+      }),
+    ).toBe(false);
+  });
+
   it("keeps the prompt composer schema minimal and restores legacy draft HTML", () => {
     const editor = new Editor({
       element: document.createElement("div"),