feat(models-config): FieldInput primitive + collapsible Headers + heading row

Addresses three Connections-tab UX gaps surfaced from screenshots:

1. **Browser autofill cross-pollution survives per-name uniqueness.**
   Even with `name="${type}-apiKey"` etc., Chrome / Safari still
   propagated the same value across the four tabs' sibling password
   and text fields. The reliable opt-out is explicit
   `autocomplete="new-password"` (for secrets) / `autocomplete="off"`
   (for plain text), which the shadcn json-render `Input` doesn't
   expose. Solution: add a catalog-local `FieldInput` primitive that
   wraps shadcn `Input` with the right autoComplete + 1Password /
   LastPass opt-out data attributes, and use it for the form's
   Name / API Key / URL fields. Stock `Input` is retained for the
   per-header rows since their `$bindItem` values aren't autofill
   targets.

2. **No way to see the API key after typing it.** `FieldInput`
   renders an inline eye / eye-off toggle on `type: "password"`
   that flips the input between masked and plain. Catalog
   declaration mirrors `Input` but limits `type` to
   `"text" | "password"` (no email / number) since those are the
   only modes used here.

3. **Heading and description stacked vertically on Connections
   form.** Per the screenshots, the title "Add Google connection"
   and its description "Enter your Google API key…" should share a
   row. Wrap them in a horizontal Stack (`align: "baseline"`) so
   they sit beside each other like a panel title + subtitle.

4. **Headers section folded by default.** Headers is a rare-use
   sub-section; the form was making the user scroll past an empty
   list + Add button on every connection. Wrap the Headers content
   (label, repeater, Add button) in a shadcn `Collapsible` with
   `defaultOpen: false`. Click the disclosure to expand only when
   actually needed.

Touches:
* `catalog.ts`: declare `FieldInput` primitive
* `field-input.tsx`: React binding (autocomplete + show/hide)
* `build-react-catalog.tsx`: register FieldInput in the registry
* `connections-tab-spec.ts`: swap Input → FieldInput for the three
  form fields; new heading row + collapsible structure

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: mkotelnikov

packages/models-config-react/src/internal/build-react-catalog.tsx

@@ -2,6 +2,7 @@ import type { Actions, Components } from "@json-render/react";
 import { type DefineRegistryResult, defineRegistry } from "@json-render/react";
 import { shadcnComponents } from "@json-render/shadcn";
 import { type ModelsConfigCatalog, modelsConfigCatalog } from "@statewalker/models-config";
+import { FieldInput } from "./field-input.js";
 import { MarkdownText } from "./markdown-text.js";
 
 export interface BuildRegistryOptions {
@@ -19,6 +20,7 @@ export function buildModelsConfigRegistry(options: BuildRegistryOptions): Define
   const components = {
     ...shadcnComponents,
     Markdown: MarkdownText,
+    FieldInput,
   } as unknown as Components<ModelsConfigCatalog>;
   const actions = options.actions as unknown as Actions<ModelsConfigCatalog>;
   return defineRegistry(modelsConfigCatalog, { components, actions });

packages/models-config-react/src/internal/field-input.tsx

@@ -0,0 +1,72 @@
+import { useBoundProp } from "@json-render/react";
+import { Button, Input, Label, cn } from "@statewalker/shadcn-react";
+import { Eye, EyeOff } from "lucide-react";
+import { type ReactElement, useState } from "react";
+
+interface FieldInputProps {
+  props: {
+    label?: string | null;
+    name: string;
+    type?: "text" | "password" | null;
+    placeholder?: string | null;
+    value?: string | null;
+  };
+  bindings?: {
+    value?: string;
+  };
+}
+
+/**
+ * Bound to the `models-config` catalog's `FieldInput` primitive.
+ * Used in place of shadcn `Input` for the Connections form fields so
+ * each tab's input is isolated from browser autofill cross-pollution
+ * and the API Key field can reveal its value on demand.
+ *
+ * Stock shadcn `Input` (via `@json-render/shadcn`) lets the browser
+ * see four sibling fields with the same logical role
+ * (`type="password"` for API Key, `type="text"` for Name) and offer
+ * to autofill the same saved value across them. Per-`name` uniqueness
+ * helps but the browser still cross-pollutes within the same form
+ * context. Setting `autoComplete` explicitly is the reliable opt-out.
+ */
+export function FieldInput({ props, bindings }: FieldInputProps): ReactElement {
+  const [showSecret, setShowSecret] = useState(false);
+  const [boundValue, setBoundValue] = useBoundProp(props.value ?? "", bindings?.value);
+  const isPassword = props.type === "password";
+  const inputType = isPassword && !showSecret ? "password" : "text";
+  return (
+    <div className="space-y-2">
+      {props.label ? <Label htmlFor={props.name}>{props.label}</Label> : null}
+      <div className="relative">
+        <Input
+          id={props.name}
+          name={props.name}
+          type={inputType}
+          placeholder={props.placeholder ?? ""}
+          value={boundValue ?? ""}
+          onChange={(e) => setBoundValue(e.target.value)}
+          autoComplete={isPassword ? "new-password" : "off"}
+          // Belt-and-braces: discourage popular password managers
+          // (1Password, LastPass) from offering inline UI on these
+          // fields — they treat the Settings form as a credential
+          // capture target otherwise.
+          data-1p-ignore="true"
+          data-lpignore="true"
+          className={cn(isPassword && "pr-9")}
+        />
+        {isPassword ? (
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            aria-label={showSecret ? "Hide value" : "Show value"}
+            className="absolute top-1/2 right-1 h-7 w-7 -translate-y-1/2"
+            onClick={() => setShowSecret(!showSecret)}
+          >
+            {showSecret ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+          </Button>
+        ) : null}
+      </div>
+    </div>
+  );
+}

packages/models-config/src/public/catalog.ts

@@ -18,6 +18,27 @@ export const modelsConfigCatalog = defineCatalog(schema, {
       props: z.object({ source: z.string() }),
       description: "Rendered markdown text (formatted lists, headings, etc.)",
     },
+    /**
+     * Replacement for shadcn `Input` for the Connections form. Two
+     * differences from the stock primitive:
+     *   1. Disables browser autofill (`autocomplete="off"` for text;
+     *      `autocomplete="new-password"` for password). Stock `Input`
+     *      lets the browser cross-populate same-named fields across
+     *      sibling form sections (the four tabs).
+     *   2. For `type: "password"`, renders an eye / eye-off toggle
+     *      that flips the input between masked and plain.
+     */
+    FieldInput: {
+      props: z.object({
+        label: z.string().nullable(),
+        name: z.string(),
+        type: z.enum(["text", "password"]).nullable(),
+        placeholder: z.string().nullable(),
+        value: z.string().nullable(),
+      }),
+      description:
+        "Form input with autofill disabled and a show/hide toggle when type=password.",
+    },
   },
   actions: {
     saveConnection: {

packages/models-config/src/public/connections-tab-spec.ts

@@ -126,29 +126,32 @@ function tabBodyElements(type: ConnectionType): Record<string, unknown> {
     },
 
     // ── Add new Connection form (per-tab) ────────────────────
-    // Obsidian-style: section heading + muted description, separator,
-    // form fields, separator before the optional Headers section,
-    // error + primary button at the bottom. No Card chrome — padding
-    // comes from the outer body Stack className.
+    // Section heading + description sit on a single horizontal row
+    // (Stack horizontal) so they read like a panel title rather than
+    // two stacked text lines. The Headers section lives inside a
+    // shadcn Collapsible, folded by default — it's the rare-use
+    // sub-section, the user shouldn't have to scroll past it on
+    // every connection.
     [`${type}_formCard`]: {
       type: "Stack",
       props: { direction: "vertical", gap: "md" },
       children: [
-        `${type}_formHeading`,
-        `${type}_formDescription`,
+        `${type}_formHeadingRow`,
         `${type}_formSep1`,
         `${type}_formName`,
         `${type}_formApiKey`,
         `${type}_formUrl`,
         `${type}_formSep2`,
-        `${type}_formHeadersHeading`,
-        `${type}_formHeadersLabel`,
-        `${type}_formHeadersList`,
-        `${type}_formAddHeader`,
+        `${type}_formHeadersCollapsible`,
         `${type}_formError`,
         `${type}_formConnect`,
       ],
     },
+    [`${type}_formHeadingRow`]: {
+      type: "Stack",
+      props: { direction: "horizontal", gap: "md", align: "baseline" },
+      children: [`${type}_formHeading`, `${type}_formDescription`],
+    },
     [`${type}_formHeading`]: {
       type: "Heading",
       props: { text: `Add ${TYPE_LABEL[type]} connection`, level: "h3" },
@@ -168,16 +171,27 @@ function tabBodyElements(type: ConnectionType): Record<string, unknown> {
       type: "Separator",
       props: { orientation: "horizontal" },
     },
-    [`${type}_formHeadersHeading`]: {
-      type: "Heading",
-      props: { text: "Headers", level: "h4" },
+    [`${type}_formHeadersCollapsible`]: {
+      type: "Collapsible",
+      props: { title: "Headers (optional)", defaultOpen: false },
+      children: [`${type}_formHeadersInner`],
     },
-    // Input `name` attributes are per-type-prefixed so the browser's
-    // autofill heuristics don't share the value across the four
-    // sub-tabs (otherwise the OpenAI API Key field would be
-    // auto-filled with the value the user typed into Google).
+    [`${type}_formHeadersInner`]: {
+      type: "Stack",
+      props: { direction: "vertical", gap: "sm" },
+      children: [
+        `${type}_formHeadersLabel`,
+        `${type}_formHeadersList`,
+        `${type}_formAddHeader`,
+      ],
+    },
+    // FieldInput (catalog-local primitive) replaces shadcn `Input`
+    // here: it explicitly opts out of browser autofill (per-type
+    // `name=` alone wasn't enough — Chrome/Safari still propagated
+    // the same value across sibling tabs' password and text fields)
+    // and adds a show/hide eye toggle on `type: "password"`.
     [`${type}_formName`]: {
-      type: "Input",
+      type: "FieldInput",
       props: {
         label: "Name",
         name: `${type}-name`,
@@ -187,7 +201,7 @@ function tabBodyElements(type: ConnectionType): Record<string, unknown> {
       },
     },
     [`${type}_formApiKey`]: {
-      type: "Input",
+      type: "FieldInput",
       props: {
         label: "API Key",
         name: `${type}-apiKey`,
@@ -197,7 +211,7 @@ function tabBodyElements(type: ConnectionType): Record<string, unknown> {
       },
     },
     [`${type}_formUrl`]: {
-      type: "Input",
+      type: "FieldInput",
       props: {
         label: urlLabel,
         name: `${type}-url`,