@agent-native/toolkit 0.10.7 → 0.10.9

package/src/composer/TiptapComposer.tsx

@@ -839,6 +839,18 @@ export function shouldShowModelSelectorSkeleton(
   return isLoading && engineCount === 0;
 }
 
+/**
+ * With nothing connected, every family is a dead "needs API key" row, so the
+ * picker shows only the connect CTAs. Never hide the list unless a CTA is
+ * there to replace it — an empty popover reads as more broken, not less.
+ */
+export function shouldShowOnlyConnectPath(
+  showBuilderCta: boolean,
+  groups: ReadonlyArray<{ configured: boolean }>,
+): boolean {
+  return showBuilderCta && groups.every((group) => !group.configured);
+}
+
 function friendlyModelName(model: string): string {
   if (FRIENDLY_MODEL_NAMES[model]) return FRIENDLY_MODEL_NAMES[model];
   // Claude: claude-{tier}-{major}[-minor][-dateYYYYMMDD] → Tier Major[.Minor]
@@ -1081,6 +1093,10 @@ function ModelSelector({
     !builderFlow.configured &&
     !builderFlow.envManaged &&
     !hasConfiguredBuilderModels;
+  const onlyConnectPathAvailable = shouldShowOnlyConnectPath(
+    showBuilderCta,
+    providerGroups,
+  );
   const openLlmSettings = useCallback(() => {
     try {
       window.location.hash = "llm";
@@ -1161,6 +1177,14 @@ function ModelSelector({
                 </span>
               </span>
             </button>
+            {!onConnectProvider && builderFlow.error && (
+              <p
+                role="alert"
+                className="px-3 pb-2 ps-9 text-[11px] text-destructive"
+              >
+                {builderFlow.error}
+              </p>
+            )}
             <button
               type="button"
               onClick={openLlmSettings}
@@ -1181,7 +1205,9 @@ function ModelSelector({
                 </span>
               </span>
             </button>
-            <div className="my-1 border-t border-border" />
+            {!onlyConnectPathAvailable && (
+              <div className="my-1 border-t border-border" />
+            )}
           </>
         )}
         {imageModel && imageModel.options.length > 0 && (
@@ -1231,7 +1257,7 @@ function ModelSelector({
           </>
         )}
         {showModelListSkeleton && <ModelSelectorSkeleton />}
-        {autoModelGroup && (
+        {autoModelGroup && !onlyConnectPathAvailable && (
           <button
             type="button"
             onClick={() => {
@@ -1248,136 +1274,142 @@ function ModelSelector({
             )}
           </button>
         )}
-        {autoModelGroup && providerGroups.length > 0 && (
-          <div className="my-1 border-t border-border" />
-        )}
-        {providerGroups.map((group) => {
-          const models = latestModelsOnly(group.models);
-          const groupKey = `${group.engine}:${group.label}`;
-          const isExpanded = expandedGroups.has(groupKey);
-          const ChevronIcon = isExpanded ? IconChevronDown : IconChevronRight;
-          return (
-            <div key={groupKey}>
+        {autoModelGroup &&
+          providerGroups.length > 0 &&
+          !onlyConnectPathAvailable && (
+            <div className="my-1 border-t border-border" />
+          )}
+        {!onlyConnectPathAvailable &&
+          providerGroups.map((group) => {
+            const models = latestModelsOnly(group.models);
+            const groupKey = `${group.engine}:${group.label}`;
+            const isExpanded = expandedGroups.has(groupKey);
+            const ChevronIcon = isExpanded ? IconChevronDown : IconChevronRight;
+            return (
+              <div key={groupKey}>
+                <div className="flex items-center hover:bg-accent/30">
+                  <button
+                    type="button"
+                    aria-expanded={isExpanded}
+                    onClick={() => toggleGroup(groupKey)}
+                    className="flex flex-1 min-w-0 items-center gap-1.5 px-2 py-1.5 cursor-pointer text-start"
+                  >
+                    <ChevronIcon 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">
+                      {group.label}
+                    </span>
+                    {!isExpanded && groupKey === selectedGroupKey && (
+                      <span className="text-[11px] text-muted-foreground/80 truncate">
+                        {friendlyModelName(model)}
+                      </span>
+                    )}
+                  </button>
+                  {!group.configured && (
+                    <button
+                      type="button"
+                      className="text-[10px] text-muted-foreground/60 hover:text-foreground cursor-pointer pe-3 py-1.5"
+                      onClick={() =>
+                        group.engine === "codex-cli" && onConnectLocalRuntime
+                          ? connectLocalRuntime(group.engine)
+                          : openLlmSettings()
+                      }
+                    >
+                      {group.engine === "codex-cli" && onConnectLocalRuntime
+                        ? "sign in"
+                        : "needs API key"}
+                    </button>
+                  )}
+                </div>
+                {isExpanded &&
+                  models.map((m) => (
+                    <button
+                      key={m}
+                      type="button"
+                      onClick={() => {
+                        if (!group.configured) {
+                          if (
+                            group.engine === "codex-cli" &&
+                            onConnectLocalRuntime
+                          ) {
+                            connectLocalRuntime(group.engine);
+                          } else {
+                            openLlmSettings();
+                          }
+                          return;
+                        }
+                        onChange(m, group.engine);
+                        const nextOptions =
+                          getReasoningEffortOptionsForModel(m);
+                        if (
+                          nextOptions.length > 0 &&
+                          !nextOptions.includes(selectedEffort)
+                        ) {
+                          onEffortChange?.(defaultEffort);
+                        }
+                        setOpen(false);
+                      }}
+                      className={`flex w-full items-center gap-3 ps-7 pe-3 py-1.5 text-start ${
+                        group.configured
+                          ? "hover:bg-accent/50"
+                          : "opacity-40 cursor-default"
+                      }`}
+                    >
+                      <span className="flex-1 min-w-0 text-[13px] text-foreground truncate">
+                        {friendlyModelName(m)}
+                      </span>
+                      {m === model && group.configured && (
+                        <IconCheck className="h-3.5 w-3.5 shrink-0 text-blue-500" />
+                      )}
+                    </button>
+                  ))}
+              </div>
+            );
+          })}
+        {!showModelListSkeleton &&
+          !onlyConnectPathAvailable &&
+          effortOptions.length > 0 && (
+            <>
+              <div className="my-1 border-t border-border" />
               <div className="flex items-center hover:bg-accent/30">
                 <button
                   type="button"
-                  aria-expanded={isExpanded}
-                  onClick={() => toggleGroup(groupKey)}
+                  aria-expanded={reasoningExpanded}
+                  onClick={() => setReasoningExpanded((prev) => !prev)}
                   className="flex flex-1 min-w-0 items-center gap-1.5 px-2 py-1.5 cursor-pointer text-start"
                 >
-                  <ChevronIcon className="h-3 w-3 shrink-0 text-muted-foreground rtl:-scale-x-100" />
+                  {reasoningExpanded ? (
+                    <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">
-                    {group.label}
+                    Reasoning
                   </span>
-                  {!isExpanded && groupKey === selectedGroupKey && (
+                  {!reasoningExpanded && (
                     <span className="text-[11px] text-muted-foreground/80 truncate">
-                      {friendlyModelName(model)}
+                      {effortLabel(selectedEffort)}
                     </span>
                   )}
                 </button>
-                {!group.configured && (
-                  <button
-                    type="button"
-                    className="text-[10px] text-muted-foreground/60 hover:text-foreground cursor-pointer pe-3 py-1.5"
-                    onClick={() =>
-                      group.engine === "codex-cli" && onConnectLocalRuntime
-                        ? connectLocalRuntime(group.engine)
-                        : openLlmSettings()
-                    }
-                  >
-                    {group.engine === "codex-cli" && onConnectLocalRuntime
-                      ? "sign in"
-                      : "needs API key"}
-                  </button>
-                )}
               </div>
-              {isExpanded &&
-                models.map((m) => (
+              {reasoningExpanded &&
+                effortOptions.map((option) => (
                   <button
-                    key={m}
+                    key={option}
                     type="button"
-                    onClick={() => {
-                      if (!group.configured) {
-                        if (
-                          group.engine === "codex-cli" &&
-                          onConnectLocalRuntime
-                        ) {
-                          connectLocalRuntime(group.engine);
-                        } else {
-                          openLlmSettings();
-                        }
-                        return;
-                      }
-                      onChange(m, group.engine);
-                      const nextOptions = getReasoningEffortOptionsForModel(m);
-                      if (
-                        nextOptions.length > 0 &&
-                        !nextOptions.includes(selectedEffort)
-                      ) {
-                        onEffortChange?.(defaultEffort);
-                      }
-                      setOpen(false);
-                    }}
-                    className={`flex w-full items-center gap-3 ps-7 pe-3 py-1.5 text-start ${
-                      group.configured
-                        ? "hover:bg-accent/50"
-                        : "opacity-40 cursor-default"
-                    }`}
+                    onClick={() => onEffortChange?.(option)}
+                    className="flex w-full items-center gap-3 ps-7 pe-3 py-1.5 text-start hover:bg-accent/50"
                   >
                     <span className="flex-1 min-w-0 text-[13px] text-foreground truncate">
-                      {friendlyModelName(m)}
+                      {effortLabel(option)}
                     </span>
-                    {m === model && group.configured && (
+                    {option === selectedEffort && (
                       <IconCheck className="h-3.5 w-3.5 shrink-0 text-blue-500" />
                     )}
                   </button>
                 ))}
-            </div>
-          );
-        })}
-        {!showModelListSkeleton && effortOptions.length > 0 && (
-          <>
-            <div className="my-1 border-t border-border" />
-            <div className="flex items-center hover:bg-accent/30">
-              <button
-                type="button"
-                aria-expanded={reasoningExpanded}
-                onClick={() => setReasoningExpanded((prev) => !prev)}
-                className="flex flex-1 min-w-0 items-center gap-1.5 px-2 py-1.5 cursor-pointer text-start"
-              >
-                {reasoningExpanded ? (
-                  <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
-                </span>
-                {!reasoningExpanded && (
-                  <span className="text-[11px] text-muted-foreground/80 truncate">
-                    {effortLabel(selectedEffort)}
-                  </span>
-                )}
-              </button>
-            </div>
-            {reasoningExpanded &&
-              effortOptions.map((option) => (
-                <button
-                  key={option}
-                  type="button"
-                  onClick={() => onEffortChange?.(option)}
-                  className="flex w-full items-center gap-3 ps-7 pe-3 py-1.5 text-start hover:bg-accent/50"
-                >
-                  <span className="flex-1 min-w-0 text-[13px] text-foreground truncate">
-                    {effortLabel(option)}
-                  </span>
-                  {option === selectedEffort && (
-                    <IconCheck className="h-3.5 w-3.5 shrink-0 text-blue-500" />
-                  )}
-                </button>
-              ))}
-          </>
-        )}
+            </>
+          )}
       </PopoverContent>
     </Popover>
   );

package/src/composer/runtime-adapters.tsx

@@ -43,6 +43,7 @@ export interface ComposerBuilderConnectFlow {
   envManaged: boolean;
   connecting: boolean;
   statusResolved: boolean;
+  error: string | null;
   start: () => void;
 }
 
@@ -196,6 +197,7 @@ const fallbackBuilderFlow = {
   envManaged: false,
   connecting: false,
   statusResolved: false,
+  error: null,
   start: () => {},
 };
 

package/src/editor/useCollabReconcile.concurrent.spec.ts

@@ -183,6 +183,57 @@ function render(
 }
 
 describe("useCollabReconcile — concurrent edit / lost-update guards", () => {
+  it("persists the first local edit after a synced empty collaborative document", async () => {
+    const captured: Captured = {
+      editor: null,
+      emitted: [],
+      setContentCalls: 0,
+    };
+
+    function EmptyDocumentHarness() {
+      const guardsRef = React.useRef<ReturnType<
+        typeof useCollabReconcile
+      > | null>(null);
+      const insertedRef = React.useRef(false);
+      const ydoc = React.useMemo(() => new Y.Doc(), []);
+      const editor = useEditor({
+        extensions: createRichMarkdownExtensions({ dialect: "gfm", ydoc }),
+        onUpdate: ({ editor, transaction }) => {
+          const guards = guardsRef.current;
+          if (!guards || guards.shouldIgnoreUpdate(transaction)) return;
+          const markdown = getEditorMarkdown(editor);
+          if (!guards.registerEmitted(markdown)) return;
+          captured.emitted.push(markdown);
+        },
+      });
+      captured.editor = editor;
+      guardsRef.current = useCollabReconcile({
+        editor,
+        ydoc,
+        collabSynced: true,
+        value: "",
+        contentUpdatedAt: "2024-01-01T00:00:01.000Z",
+        editable: true,
+        getMarkdown: getEditorMarkdown,
+      });
+      React.useLayoutEffect(() => {
+        if (!editor || insertedRef.current) return;
+        insertedRef.current = true;
+        editor.view.dispatch(
+          editor.state.tr
+            .insertText("First persisted edit")
+            .setMeta("uiEvent", "input"),
+        );
+      }, [editor]);
+      return React.createElement("div", null);
+    }
+
+    act(() => root.render(React.createElement(EmptyDocumentHarness)));
+    await flush();
+
+    expect(captured.emitted).toContain("First persisted edit");
+  });
+
   it("does not seed until initial collab sync has completed", async () => {
     const { captured, Harness } = makeCollabSeedHarness();
 

package/src/editor/useCollabReconcile.ts

@@ -626,7 +626,20 @@ export function useCollabReconcile({
     // app's local mirror or autosave path (Content serializes an empty paragraph
     // as `<empty-block/>`, which is non-empty text and bypasses the generic
     // registerEmitted empty-string guard).
-    if (collab && !seededRef.current) return true;
+    if (collab && !seededRef.current) {
+      // Passive effects normally mark a synced empty document initialized
+      // before a person can type. Keep the event boundary correct too: if a
+      // genuine local edit wins that tiny race, it is itself proof that the
+      // synced empty document is ready. Remote Yjs transactions stay ignored.
+      const firstSyncedEmptyUserEdit =
+        collabSynced &&
+        !value.trim() &&
+        transaction.docChanged &&
+        Boolean(transaction.getMeta("uiEvent")) &&
+        !isChangeOrigin(transaction);
+      if (!firstSyncedEmptyUserEdit) return true;
+      seededRef.current = true;
+    }
     if (transaction.getMeta(RICH_MARKDOWN_PROGRAMMATIC_TRANSACTION)) {
       return true;
     }