@agent-native/toolkit 0.16.10 → 0.16.11

package/src/composer/TiptapComposer.tsx

@@ -1024,6 +1024,14 @@ const LOCAL_RUNTIME_ENGINES = new Set([
   "opencode-cli",
 ]);
 
+export function hasConfiguredCloudProvider(
+  groups: ReadonlyArray<{ engine: string; configured: boolean }>,
+): boolean {
+  return groups.some(
+    (group) => group.configured && !LOCAL_RUNTIME_ENGINES.has(group.engine),
+  );
+}
+
 function isOpenAiModelId(model: string): boolean {
   const normalizedModel = model.toLowerCase();
   return (
@@ -1082,6 +1090,22 @@ export function shouldShowOnlyConnectPath(
   return showBuilderCta && groups.every((group) => !group.configured);
 }
 
+/**
+ * When nothing is routable yet, the model hook resolves `selectedModel` to
+ * `""` rather than pre-selecting something unusable — that reflects "nothing
+ * chosen," not "nothing to show." The picker itself still has a job to do in
+ * that state (its connect-provider CTAs), so gate on there being engines to
+ * list and a way to change the selection, not on a model already being set.
+ */
+export function shouldRenderModelSelector(
+  availableModels: ReadonlyArray<unknown> | undefined,
+  onModelChange: unknown,
+): boolean {
+  return Boolean(
+    availableModels && availableModels.length > 0 && onModelChange,
+  );
+}
+
 function friendlyModelName(model: string, t?: ComposerTranslate): string {
   if (model === "auto") {
     return (
@@ -1320,6 +1344,7 @@ function ModelSelector({
   providerConnectStatusEnabled = true,
   onConnectProvider,
   onConnectLocalRuntime,
+  terminalModeControl,
   imageModel,
 }: {
   model: string;
@@ -1344,6 +1369,7 @@ function ModelSelector({
   providerConnectStatusEnabled?: boolean;
   onConnectProvider?: () => void;
   onConnectLocalRuntime?: (engine: string) => void;
+  terminalModeControl?: ComposerTerminalModeControl;
   onModelSelectorOpenChange?: (open: boolean) => void;
   imageModel?: ComposerImageModelMenu;
   open?: boolean;
@@ -1447,7 +1473,7 @@ function ModelSelector({
   const selectedModelLabel = friendlyModelName(model, t).replace(/^GPT-/, "");
 
   const [detailSection, setDetailSection] = useState<
-    "agent" | "model" | "effort" | null
+    "agent" | "model" | "effort" | "mode" | null
   >(null);
   const resolvedSection = detailSection ?? (agentOnly ? "agent" : "model");
 
@@ -1466,9 +1492,8 @@ function ModelSelector({
     engines.length,
   );
 
-  // Keep setup actions beside model choices while any visible provider still
-  // needs configuration. The model rows remain visible so the user can see
-  // what becomes available after connecting or adding a key.
+  // Keep setup actions visible, but do not show unusable model rows until one
+  // provider or local agent is ready.
   const builderFlow = adapters.builder!.useConnectFlow!({
     enabled: providerConnectStatusEnabled,
     trackingSource: "composer_builder_cta",
@@ -1476,25 +1501,37 @@ function ModelSelector({
   const hasConfiguredBuilderModels = providerGroups.some(
     (group) => group.engine === "builder" && group.configured,
   );
+  const hasConfiguredCloudProviderReady =
+    hasConfiguredCloudProvider(providerGroups);
   const hasConnectedSubscription = providerGroups.some(
-    (group) => group.configured && group.isSubscription,
+    (group) =>
+      hasConfiguredCloudProviderReady &&
+      group.configured &&
+      group.isSubscription &&
+      !LOCAL_RUNTIME_ENGINES.has(group.engine),
   );
   const hasUnconfiguredVisibleModels = modelProviderGroups.some(
     (group) => !group.configured,
   );
+  const hasConfiguredProvider = providerGroups.some(
+    (group) => group.configured,
+  );
   const showBuilderAction =
-    hasUnconfiguredVisibleModels &&
+    !hasConfiguredCloudProviderReady &&
     (Boolean(onConnectProvider) ||
       (providerConnectStatusEnabled &&
         !builderFlow.configured &&
         !builderFlow.envManaged &&
         !hasConfiguredBuilderModels &&
         !hasConnectedSubscription));
-  const showAddKeysAction = hasUnconfiguredVisibleModels;
+  const showAddKeysAction =
+    !hasConfiguredCloudProviderReady &&
+    (hasUnconfiguredVisibleModels || showBuilderAction);
   const showProviderActions = showBuilderAction || showAddKeysAction;
-  const onlyConnectPathAvailable =
-    shouldShowOnlyConnectPath(showBuilderAction, providerGroups) &&
-    modelProviderGroups.length === 0;
+  const onlyConnectPathAvailable = shouldShowOnlyConnectPath(
+    showProviderActions,
+    providerGroups,
+  );
   const openLlmSettings = useCallback(() => {
     try {
       window.location.hash = "llm";
@@ -1601,7 +1638,7 @@ function ModelSelector({
                           />
                         </span>
                       </TooltipTrigger>
-                      <TooltipContent side="right" className="z-[400] max-w-xs">
+                      <TooltipContent side="right" className="max-w-xs">
                         <span className="block">
                           {hostedHarness
                             ? t("agentChat.composer.hostedHarnessDescription", {
@@ -1678,6 +1715,30 @@ function ModelSelector({
                   <IconChevronRight className="h-3 w-3 shrink-0 opacity-60 rtl:-scale-x-100" />
                 </button>
               )}
+              {terminalModeControl && (
+                <button
+                  type="button"
+                  role="tab"
+                  aria-selected={resolvedSection === "mode"}
+                  onClick={() => setDetailSection("mode")}
+                  onMouseEnter={() => setDetailSection("mode")}
+                  className={`flex w-full min-w-0 items-center gap-1 rounded-md px-2 py-2 text-start transition-colors ${
+                    resolvedSection === "mode"
+                      ? "bg-accent text-foreground"
+                      : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"
+                  }`}
+                >
+                  <span className="shrink-0 text-[12px] font-medium">
+                    {t("agentPanel.mode", { defaultValue: "Mode" })}
+                  </span>
+                  <span className="ms-auto min-w-0 max-w-[6rem] truncate text-end text-[11px] text-muted-foreground/80">
+                    {terminalModeControl.enabled
+                      ? t("agentPanel.cli", { defaultValue: "CLI" })
+                      : t("agentPanel.uiMode", { defaultValue: "UI" })}
+                  </span>
+                  <IconChevronRight className="h-3 w-3 shrink-0 opacity-60 rtl:-scale-x-100" />
+                </button>
+              )}
             </div>
           </PopoverAnchor>
           <PopoverContent
@@ -1761,7 +1822,7 @@ function ModelSelector({
                                 </TooltipTrigger>
                                 <TooltipContent
                                   side="left"
-                                  className="z-[400] max-w-xs"
+                                  className="max-w-xs"
                                 >
                                   {agent.description}
                                 </TooltipContent>
@@ -1865,42 +1926,47 @@ function ModelSelector({
                         )}
                       </>
                     )}
-                    {imageModel && imageModel.options.length > 0 && (
-                      <div className="mt-2 pt-1">
-                        <div className="px-2 py-1 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
-                          {imageModel.label ??
-                            t("agentChat.composer.imageModel", {
-                              defaultValue: "Image model",
-                            })}
-                        </div>
-                        {imageModel.options.map((option) => (
-                          <button
-                            key={option.value}
-                            type="button"
-                            onClick={() => {
-                              imageModel.onChange(option.value);
-                              setPickerOpen(false);
-                            }}
-                            className="flex w-full items-center gap-3 rounded-md px-2 py-2 text-start hover:bg-accent/50"
-                          >
-                            <span
-                              className={`min-w-0 flex-1 truncate text-[12px] ${
-                                option.value === imageModel.value
-                                  ? "text-foreground"
-                                  : "text-muted-foreground"
-                              }`}
+                    {hasConfiguredCloudProviderReady &&
+                      imageModel &&
+                      imageModel.options.length > 0 && (
+                        <div className="mt-2 pt-1">
+                          <div className="px-2 py-1 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+                            {imageModel.label ??
+                              t("agentChat.composer.imageModel", {
+                                defaultValue: "Image model",
+                              })}
+                          </div>
+                          {imageModel.options.map((option) => (
+                            <button
+                              key={option.value}
+                              type="button"
+                              onClick={() => {
+                                imageModel.onChange(option.value);
+                                setPickerOpen(false);
+                              }}
+                              className="flex w-full items-center gap-3 rounded-md px-2 py-2 text-start hover:bg-accent/50"
                             >
-                              {option.label}
-                            </span>
-                            {option.value === imageModel.value && (
-                              <IconCheck className="size-4 shrink-0 text-primary" />
-                            )}
-                          </button>
-                        ))}
-                      </div>
+                              <span
+                                className={`min-w-0 flex-1 truncate text-[12px] ${
+                                  option.value === imageModel.value
+                                    ? "text-foreground"
+                                    : "text-muted-foreground"
+                                }`}
+                              >
+                                {option.label}
+                              </span>
+                              {option.value === imageModel.value && (
+                                <IconCheck className="size-4 shrink-0 text-primary" />
+                              )}
+                            </button>
+                          ))}
+                        </div>
+                      )}
+                    {hasConfiguredProvider && showModelListSkeleton && (
+                      <ModelSelectorSkeleton />
                     )}
-                    {showModelListSkeleton && <ModelSelectorSkeleton />}
-                    {isCodexAgent &&
+                    {hasConfiguredProvider &&
+                      isCodexAgent &&
                       !showModelListSkeleton &&
                       !onlyConnectPathAvailable &&
                       modelProviderGroups.length === 0 && (
@@ -1919,32 +1985,35 @@ function ModelSelector({
                           </span>
                         </button>
                       )}
-                    {autoModelGroup && !onlyConnectPathAvailable && (
-                      <button
-                        type="button"
-                        onClick={() => {
-                          onChange("auto", autoModelGroup.engine);
-                          setPickerOpen(false);
-                        }}
-                        className="mt-1 flex w-full items-center gap-3 rounded-md px-2 py-1.5 text-start hover:bg-accent/50"
-                      >
-                        <span
-                          className={`min-w-0 flex-1 truncate text-[13px] ${
-                            model === "auto"
-                              ? "text-foreground"
-                              : "text-muted-foreground"
-                          }`}
+                    {hasConfiguredProvider &&
+                      autoModelGroup &&
+                      !onlyConnectPathAvailable && (
+                        <button
+                          type="button"
+                          onClick={() => {
+                            onChange("auto", autoModelGroup.engine);
+                            setPickerOpen(false);
+                          }}
+                          className="mt-1 flex w-full items-center gap-3 rounded-md px-2 py-1.5 text-start hover:bg-accent/50"
                         >
-                          {t("agentChat.composer.auto", {
-                            defaultValue: "Auto",
-                          })}
-                        </span>
-                        {model === "auto" && (
-                          <IconCheck className="size-4 shrink-0 text-primary" />
-                        )}
-                      </button>
-                    )}
-                    {!onlyConnectPathAvailable &&
+                          <span
+                            className={`min-w-0 flex-1 truncate text-[13px] ${
+                              model === "auto"
+                                ? "text-foreground"
+                                : "text-muted-foreground"
+                            }`}
+                          >
+                            {t("agentChat.composer.auto", {
+                              defaultValue: "Auto",
+                            })}
+                          </span>
+                          {model === "auto" && (
+                            <IconCheck className="size-4 shrink-0 text-primary" />
+                          )}
+                        </button>
+                      )}
+                    {hasConfiguredProvider &&
+                      !onlyConnectPathAvailable &&
                       visibleProviderGroups.map((group, groupIndex) => {
                         const models = latestModelsOnly(group.models);
                         const showProviderLabels =
@@ -2084,6 +2153,43 @@ function ModelSelector({
                     ))}
                   </div>
                 )}
+                {resolvedSection === "mode" && terminalModeControl && (
+                  <div className="flex flex-col">
+                    {[
+                      {
+                        enabled: false,
+                        label: t("agentPanel.uiMode", { defaultValue: "UI" }),
+                      },
+                      {
+                        enabled: true,
+                        label: t("agentPanel.cli", { defaultValue: "CLI" }),
+                      },
+                    ].map((option) => (
+                      <button
+                        key={option.label}
+                        type="button"
+                        onClick={() => {
+                          terminalModeControl.onChange(option.enabled);
+                          setPickerOpen(false);
+                        }}
+                        className="flex w-full items-center gap-3 rounded-md px-2 py-2 text-start hover:bg-accent/50"
+                      >
+                        <span
+                          className={`min-w-0 flex-1 truncate text-[12px] ${
+                            option.enabled === terminalModeControl.enabled
+                              ? "text-foreground"
+                              : "text-muted-foreground"
+                          }`}
+                        >
+                          {option.label}
+                        </span>
+                        {option.enabled === terminalModeControl.enabled && (
+                          <IconCheck className="size-4 shrink-0 text-primary" />
+                        )}
+                      </button>
+                    ))}
+                  </div>
+                )}
               </div>
             </div>
           </PopoverContent>
@@ -3679,25 +3785,26 @@ export function TiptapComposer({
           ))}
         {toolbarSlot ?? modeControl}
         <div data-agent-composer-slot="toolbar-spacer" className="flex-1" />
-        {selectedModel && availableModels && onModelChange && (
+        {shouldRenderModelSelector(availableModels, onModelChange) && (
           <ModelSelector
-            model={selectedModel}
+            model={selectedModel ?? ""}
             open={modelSelectorOpen}
             effort={selectedEffort}
-            engines={availableModels}
+            engines={availableModels!}
             agents={availableAgents}
             selectedAgent={selectedAgent}
             agentOnly={agentOnly}
             hostedHarness={hostedHarness}
             showAutoModelOption={showAutoModelOption}
             modelListLoading={modelListLoading}
-            onChange={onModelChange}
+            onChange={onModelChange!}
             onEffortChange={onEffortChange}
             onAgentChange={onAgentChange}
             onModelSelectorOpenChange={onModelSelectorOpenChange}
             providerConnectStatusEnabled={providerConnectStatusEnabled}
             onConnectProvider={onConnectProvider}
             onConnectLocalRuntime={onConnectLocalRuntime}
+            terminalModeControl={terminalModeControl}
             imageModel={imageModelMenu}
           />
         )}

package/src/design-tweaks/scrub-input.tsx

@@ -272,8 +272,9 @@ export function VisualScrubInput({
     if (event.key === "Enter") {
       event.preventDefault();
       commitDraft();
-      skipNextBlurCommitRef.current = true;
-      event.currentTarget.blur();
+      // Blurring here would hand the next keystroke to whatever global
+      // shortcut owns that key while the user is still typing at the field.
+      event.currentTarget.select();
       return;
     }
 

package/src/design-tweaks/visual-style-controls.spec.tsx

@@ -91,6 +91,43 @@ describe("visual style controls", () => {
     expect(input?.value).toBe("24px");
   });
 
+  it("commits on Enter and keeps focus so the next keystroke stays in the field", () => {
+    const onChange = vi.fn();
+    act(() => {
+      root.render(
+        <VisualScrubInput
+          label="Weight"
+          value={1}
+          unit="px"
+          onChange={onChange}
+        />,
+      );
+    });
+
+    const input = container.querySelector<HTMLInputElement>("input")!;
+    act(() => input.focus());
+    act(() => {
+      const setter = Object.getOwnPropertyDescriptor(
+        HTMLInputElement.prototype,
+        "value",
+      )!.set!;
+      setter.call(input, "2");
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+    });
+    act(() => {
+      input.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "Enter", bubbles: true }),
+      );
+    });
+
+    expect(onChange).toHaveBeenCalledWith(
+      2,
+      expect.objectContaining({ source: "commit" }),
+    );
+    // Blurring here would hand the next keystroke to a global shortcut.
+    expect(document.activeElement).toBe(input);
+  });
+
   it("supports a compact icon prefix without removing the accessible label", () => {
     const TestIcon = ({
       className,

package/src/editor/RegistryBlockContext.tsx

@@ -5,6 +5,10 @@ export interface RegistryBlockSideMapBlock {
   title?: string;
   summary?: string;
   data: unknown;
+  loadError?: {
+    message: string;
+    rawSource?: string;
+  };
 }
 
 export interface RegistryBlockNestedBlock {

package/src/editor/RegistryBlockNode.spec.ts

@@ -6,14 +6,38 @@ import { NodeSelection } from "@tiptap/pm/state";
 import StarterKit from "@tiptap/starter-kit";
 import React, { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
+import { renderToStaticMarkup } from "react-dom/server";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 import {
   createRegistryBlockNode,
   LegacyJsonEditSurface,
+  RegistryBlockLoadErrorView,
+  selectRegistryBlockNode,
   type RegistryBlockSideMapBlock,
 } from "./RegistryBlockNode.js";
 
+describe("RegistryBlockLoadErrorView", () => {
+  it("preserves unreadable source and reports a terminal load error", () => {
+    const rawSource = '<Mermaid id="broken" source={nope} />';
+    const markup = renderToStaticMarkup(
+      React.createElement(RegistryBlockLoadErrorView, {
+        message:
+          "Could not load mermaid block: Persisted block source is unreadable.",
+        rawSource,
+      }),
+    );
+
+    expect(markup).toContain(
+      "&lt;Mermaid id=&quot;broken&quot; source={nope} /&gt;",
+    );
+    expect(markup).toContain(
+      "Could not load mermaid block: Persisted block source is unreadable.",
+    );
+    expect(markup).not.toContain("Loading mermaid block");
+  });
+});
+
 const PlanBlockNode = createRegistryBlockNode({
   nodeName: "planBlock",
   dataTag: "data-plan-block",
@@ -95,6 +119,60 @@ afterEach(() => {
 });
 
 describe("RegistryBlockNode keyboard guard", () => {
+  it("selects and removes an errored registry atom from its interactive error surface", () => {
+    const editor = createEditor();
+    const target = document.createElement("div");
+    target.setAttribute("data-plan-interactive", "true");
+
+    try {
+      expect(
+        selectRegistryBlockNode({
+          editable: true,
+          allowInteractiveChild: true,
+          target,
+          getPos: () => findPlanBlockPos(editor),
+          view: editor.view,
+          preventDefault: vi.fn(),
+          stopPropagation: vi.fn(),
+        }),
+      ).toBe(true);
+      expect(editor.state.selection).toBeInstanceOf(NodeSelection);
+
+      expect(editor.commands.deleteSelection()).toBe(true);
+      expect(() => findPlanBlockPos(editor)).toThrow("Expected planBlock node");
+    } finally {
+      editor.destroy();
+    }
+  });
+
+  it("preserves native raw-source selection inside an errored registry atom", () => {
+    const editor = createEditor();
+    const errorSurface = document.createElement("div");
+    const rawSource = document.createElement("pre");
+    errorSurface.appendChild(rawSource);
+    const preventDefault = vi.fn();
+    const stopPropagation = vi.fn();
+
+    try {
+      expect(
+        selectRegistryBlockNode({
+          editable: true,
+          allowInteractiveChild: true,
+          target: rawSource,
+          getPos: () => findPlanBlockPos(editor),
+          view: editor.view,
+          preventDefault,
+          stopPropagation,
+        }),
+      ).toBe(false);
+      expect(preventDefault).not.toHaveBeenCalled();
+      expect(stopPropagation).not.toHaveBeenCalled();
+      expect(editor.state.selection).not.toBeInstanceOf(NodeSelection);
+    } finally {
+      editor.destroy();
+    }
+  });
+
   it("keeps selected registry atoms immutable for text entry and preserves undo history", () => {
     const editor = createEditor();