zidane-ui 9.1.4 → 9.1.6

package/dist/settings/sections/providers/ProvidersSection.js

@@ -3,17 +3,17 @@ import { BTN_DANGER, BTN_PRIMARY, BTN_SECONDARY } from "../../../components/butt
 import { MetaChip } from "../../../components/Form.js";
 import { BrowserSignIn } from "../../../components/BrowserSignIn.js";
 import { constant, useReadable } from "../../../chat/headless/store.js";
-import { useSettingsHost } from "../../SettingsProvider.js";
 import { toSettingsError } from "../../headless/host.js";
-import { SettingsPanel, SettingsPanelBody } from "../../section.js";
-import { useSectionLabels } from "../use-section-labels.js";
+import { useSettingsHost } from "../../SettingsProvider.js";
 import { useSignIn } from "../../../onboarding/useSignIn.js";
-import { hasCredentialChoice } from "../../headless/providers.js";
+import { SettingFocus, SettingFocusContext, SettingsPanel, SettingsPanelBody } from "../../section.js";
+import { useSectionLabels } from "../use-section-labels.js";
+import { accountsFocusId, accountsKeyFocusId, hasCredentialChoice } from "../../headless/providers.js";
 import { useSettingsResource } from "../shared/catalog.js";
 import { CredentialSources } from "./CredentialSources.js";
 import { DEFAULT_ACCOUNTS_SECTION_LABELS } from "./labels.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo, useRef, useState } from "react";
+import { useContext, useMemo, useRef, useState } from "react";
 import { providerBrand } from "zidane/chat/pure";
 //#region src/settings/sections/providers/ProvidersSection.tsx
 /**
@@ -74,9 +74,11 @@ function ProvidersSection({ cwd, intro, confirm = YES, className, style }) {
 	});
 }
 function ProviderRow({ status, cwd, host, writable, labels: l, confirm }) {
-	const [editing, setEditing] = useState(false);
+	const { focusKey } = useContext(SettingFocusContext);
+	const keyFocus = accountsKeyFocusId(status.key);
+	const [editing, setEditing] = useState(() => focusKey === keyFocus && writable && (status.customFields?.length ? host.configure !== void 0 : host.setApiKey !== void 0));
 	const [value, setValue] = useState("");
-	const [fieldValues, setFieldValues] = useState({});
+	const [fieldValues, setFieldValues] = useState(() => ({ ...status.configuredFields }));
 	const [busy, setBusy] = useState(null);
 	const [rowError, setRowError] = useState(null);
 	const [namingAccount, setNamingAccount] = useState(false);
@@ -149,203 +151,209 @@ function ProviderRow({ status, cwd, host, writable, labels: l, confirm }) {
 			setBusy(null);
 		}
 	};
-	return /* @__PURE__ */ jsxs("li", {
+	return /* @__PURE__ */ jsx("li", {
 		className: "zg-raised border rounded-zg-md p-3",
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-start gap-3",
-				children: [
-					/* @__PURE__ */ jsx(BrandMark, {
-						brand: providerBrand(status.key),
-						label: status.label,
-						className: "shrink-0"
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "flex-1 min-w-0",
-						children: [/* @__PURE__ */ jsxs("div", {
-							className: "flex items-center gap-1.5 flex-wrap",
-							children: [
-								/* @__PURE__ */ jsx("div", {
-									className: "text-sm font-medium text-[var(--zg-text)] mr-0.5",
-									children: status.label
-								}),
-								/* @__PURE__ */ jsx("span", {
-									className: `inline-block w-2 h-2 rounded-full shrink-0 mr-0.5 ${available ? "bg-zg-success-dot" : "bg-[var(--zg-border-strong)]"}`,
-									role: "img",
-									"aria-label": available ? l.accountsAuthenticated : l.accountsNotAuthenticated,
-									title: available ? l.accountsAuthenticated : l.accountsNotAuthenticated
-								}),
-								hasConfiguration && /* @__PURE__ */ jsx(MetaChip, { children: l.accountsConfigured }),
-								hasApiKey && !hasConfiguration && /* @__PURE__ */ jsx(MetaChip, { children: l.accountsApiKeyChip }),
-								hasOAuth && /* @__PURE__ */ jsx(MetaChip, { children: l.accountsOAuthChip })
-							]
-						}), description && /* @__PURE__ */ jsx("div", {
-							className: "text-xs text-[var(--zg-text-muted)] mt-0.5",
-							children: description
+		children: /* @__PURE__ */ jsxs(SettingFocus, {
+			id: accountsFocusId(status.key),
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-start gap-3",
+					children: [
+						/* @__PURE__ */ jsx(BrandMark, {
+							brand: providerBrand(status.key),
+							label: status.label,
+							className: "shrink-0"
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex-1 min-w-0",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-1.5 flex-wrap",
+								children: [
+									/* @__PURE__ */ jsx("div", {
+										className: "text-sm font-medium text-[var(--zg-text)] mr-0.5",
+										children: status.label
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: `inline-block w-2 h-2 rounded-full shrink-0 mr-0.5 ${available ? "bg-zg-success-dot" : "bg-[var(--zg-border-strong)]"}`,
+										role: "img",
+										"aria-label": available ? l.accountsAuthenticated : l.accountsNotAuthenticated,
+										title: available ? l.accountsAuthenticated : l.accountsNotAuthenticated
+									}),
+									hasConfiguration && /* @__PURE__ */ jsx(MetaChip, { children: l.accountsConfigured }),
+									hasApiKey && !hasConfiguration && /* @__PURE__ */ jsx(MetaChip, { children: l.accountsApiKeyChip }),
+									hasOAuth && /* @__PURE__ */ jsx(MetaChip, { children: l.accountsOAuthChip })
+								]
+							}), description && /* @__PURE__ */ jsx("div", {
+								className: "text-xs text-[var(--zg-text-muted)] mt-0.5",
+								children: description
+							})]
+						}),
+						!editing && !namingAccount && canSignIn && !flow && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => {
+								if (hasOAuth) {
+									setRowError(null);
+									setAccountName("");
+									setNamingAccount(true);
+								} else startSignIn();
+							},
+							className: BTN_PRIMARY,
+							children: hasOAuth ? l.accountsAddAccount : l.accountsSignInWith(signInWith)
+						}),
+						!editing && canEdit && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: startEditing,
+							className: BTN_SECONDARY,
+							children: hasCustomFields ? available ? l.accountsEditConfig : l.accountsConfigure : hasApiKey ? l.accountsReplaceKey : l.accountsSetKey
+						}),
+						!editing && available && canClear && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: clear,
+							disabled: busy === "clearing",
+							className: BTN_DANGER,
+							children: busy === "clearing" ? l.accountsClearing : l.accountsClear
+						})
+					]
+				}),
+				flow && /* @__PURE__ */ jsx(BrowserSignIn, {
+					className: "mt-3",
+					state: flow,
+					service: signInWith,
+					onCancel: signIn.cancel,
+					onRetry: () => startSignIn(lastOptions.current),
+					...signIn.submit ? { onSubmit: signIn.submit } : {}
+				}),
+				namingAccount && !flow && /* @__PURE__ */ jsxs("div", {
+					className: "mt-3 flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ jsx("input", {
+							autoFocus: true,
+							type: "text",
+							placeholder: l.accountsAccountNamePlaceholder,
+							value: accountName,
+							onChange: (e) => setAccountName(e.target.value),
+							onKeyDown: (e) => {
+								if (e.key === "Enter") startNamedAccount();
+								if (e.key === "Escape") setNamingAccount(false);
+							},
+							"aria-label": l.accountsAccountName,
+							className: `zg-well w-full h-8 px-2.5 text-zg-ui placeholder:text-[var(--zg-text-subtle)] disabled:opacity-zg-disabled flex-1 !w-auto`
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							disabled: !trimmedAccountName,
+							onClick: startNamedAccount,
+							className: BTN_PRIMARY,
+							children: l.accountsSignIn
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => setNamingAccount(false),
+							className: BTN_SECONDARY,
+							children: l.accountsCancel
+						})
+					]
+				}),
+				editing && /* @__PURE__ */ jsx(SettingFocus, {
+					id: keyFocus,
+					children: hasCustomFields ? /* @__PURE__ */ jsxs("div", {
+						className: "mt-3 space-y-3",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "grid grid-cols-1 md:grid-cols-2 gap-2",
+							children: customFields.map((field, index) => {
+								const valueForField = fieldValues[field.key] ?? "";
+								const placeholder = field.secret && available ? l.accountsKeepSecret : field.placeholder || keyPlaceholder;
+								return /* @__PURE__ */ jsxs("label", {
+									className: "flex flex-col gap-1",
+									children: [
+										/* @__PURE__ */ jsxs("span", {
+											className: "text-xs text-[var(--zg-text-muted)]",
+											children: [field.label, field.required ? l.accountsRequired : ""]
+										}),
+										/* @__PURE__ */ jsx("input", {
+											autoFocus: index === 0,
+											type: field.secret ? "password" : "text",
+											placeholder,
+											value: valueForField,
+											onChange: (e) => setFieldValues((prev) => ({
+												...prev,
+												[field.key]: e.target.value
+											})),
+											onKeyDown: (e) => {
+												if ((e.metaKey || e.ctrlKey) && e.key === "Enter") save();
+												if (e.key === "Escape") cancelEditing();
+											},
+											className: `zg-well w-full h-8 px-2.5 text-zg-ui placeholder:text-[var(--zg-text-subtle)] disabled:opacity-zg-disabled font-mono`
+										}),
+										field.hint && /* @__PURE__ */ jsx("span", {
+											className: "text-zg-meta leading-snug text-[var(--zg-text-muted)]",
+											children: field.hint
+										})
+									]
+								}, field.key);
+							})
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ jsx("button", {
+								type: "button",
+								disabled: !requiredCustomFieldsSatisfied || busy === "setting",
+								onClick: save,
+								className: BTN_PRIMARY,
+								children: busy === "setting" ? l.accountsSaving : l.accountsSaveConfig
+							}), /* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: cancelEditing,
+								className: BTN_SECONDARY,
+								children: l.accountsCancel
+							})]
 						})]
-					}),
-					!editing && !namingAccount && canSignIn && !flow && /* @__PURE__ */ jsx("button", {
-						type: "button",
-						onClick: () => {
-							if (hasOAuth) {
-								setRowError(null);
-								setAccountName("");
-								setNamingAccount(true);
-							} else startSignIn();
-						},
-						className: BTN_PRIMARY,
-						children: hasOAuth ? l.accountsAddAccount : l.accountsSignInWith(signInWith)
-					}),
-					!editing && canEdit && /* @__PURE__ */ jsx("button", {
-						type: "button",
-						onClick: startEditing,
-						className: BTN_SECONDARY,
-						children: hasCustomFields ? available ? l.accountsEditConfig : l.accountsConfigure : hasApiKey ? l.accountsReplaceKey : l.accountsSetKey
-					}),
-					!editing && available && canClear && /* @__PURE__ */ jsx("button", {
-						type: "button",
-						onClick: clear,
-						disabled: busy === "clearing",
-						className: BTN_DANGER,
-						children: busy === "clearing" ? l.accountsClearing : l.accountsClear
-					})
-				]
-			}),
-			flow && /* @__PURE__ */ jsx(BrowserSignIn, {
-				className: "mt-3",
-				state: flow,
-				service: signInWith,
-				onCancel: signIn.cancel,
-				onRetry: () => startSignIn(lastOptions.current),
-				...signIn.submit ? { onSubmit: signIn.submit } : {}
-			}),
-			namingAccount && !flow && /* @__PURE__ */ jsxs("div", {
-				className: "mt-3 flex items-center gap-2",
-				children: [
-					/* @__PURE__ */ jsx("input", {
-						autoFocus: true,
-						type: "text",
-						placeholder: l.accountsAccountNamePlaceholder,
-						value: accountName,
-						onChange: (e) => setAccountName(e.target.value),
-						onKeyDown: (e) => {
-							if (e.key === "Enter") startNamedAccount();
-							if (e.key === "Escape") setNamingAccount(false);
-						},
-						"aria-label": l.accountsAccountName,
-						className: `zg-well w-full h-8 px-2.5 text-zg-ui placeholder:text-[var(--zg-text-subtle)] disabled:opacity-zg-disabled flex-1 !w-auto`
-					}),
-					/* @__PURE__ */ jsx("button", {
-						type: "button",
-						disabled: !trimmedAccountName,
-						onClick: startNamedAccount,
-						className: BTN_PRIMARY,
-						children: l.accountsSignIn
-					}),
-					/* @__PURE__ */ jsx("button", {
-						type: "button",
-						onClick: () => setNamingAccount(false),
-						className: BTN_SECONDARY,
-						children: l.accountsCancel
+					}) : /* @__PURE__ */ jsxs("div", {
+						className: "mt-3 flex items-center gap-2",
+						children: [
+							/* @__PURE__ */ jsx("input", {
+								autoFocus: true,
+								type: "password",
+								placeholder: keyPlaceholder,
+								value,
+								onChange: (e) => setValue(e.target.value),
+								onKeyDown: (e) => {
+									if (e.key === "Enter") save();
+									if (e.key === "Escape") cancelEditing();
+								},
+								"aria-label": l.accountsKeyField(status.label),
+								className: `zg-well w-full h-8 px-2.5 text-zg-ui placeholder:text-[var(--zg-text-subtle)] disabled:opacity-zg-disabled flex-1 !w-auto font-mono`
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								disabled: !value.trim() || busy === "setting",
+								onClick: save,
+								className: BTN_PRIMARY,
+								children: busy === "setting" ? l.accountsSaving : l.accountsSave
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: cancelEditing,
+								className: BTN_SECONDARY,
+								children: l.accountsCancel
+							})
+						]
 					})
-				]
-			}),
-			editing && (hasCustomFields ? /* @__PURE__ */ jsxs("div", {
-				className: "mt-3 space-y-3",
-				children: [/* @__PURE__ */ jsx("div", {
-					className: "grid grid-cols-1 md:grid-cols-2 gap-2",
-					children: customFields.map((field, index) => {
-						const valueForField = fieldValues[field.key] ?? "";
-						const placeholder = field.secret && available ? l.accountsKeepSecret : field.placeholder || keyPlaceholder;
-						return /* @__PURE__ */ jsxs("label", {
-							className: "flex flex-col gap-1",
-							children: [
-								/* @__PURE__ */ jsxs("span", {
-									className: "text-xs text-[var(--zg-text-muted)]",
-									children: [field.label, field.required ? l.accountsRequired : ""]
-								}),
-								/* @__PURE__ */ jsx("input", {
-									autoFocus: index === 0,
-									type: field.secret ? "password" : "text",
-									placeholder,
-									value: valueForField,
-									onChange: (e) => setFieldValues((prev) => ({
-										...prev,
-										[field.key]: e.target.value
-									})),
-									onKeyDown: (e) => {
-										if ((e.metaKey || e.ctrlKey) && e.key === "Enter") save();
-										if (e.key === "Escape") cancelEditing();
-									},
-									className: `zg-well w-full h-8 px-2.5 text-zg-ui placeholder:text-[var(--zg-text-subtle)] disabled:opacity-zg-disabled font-mono`
-								}),
-								field.hint && /* @__PURE__ */ jsx("span", {
-									className: "text-zg-meta leading-snug text-[var(--zg-text-muted)]",
-									children: field.hint
-								})
-							]
-						}, field.key);
-					})
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ jsx("button", {
-						type: "button",
-						disabled: !requiredCustomFieldsSatisfied || busy === "setting",
-						onClick: save,
-						className: BTN_PRIMARY,
-						children: busy === "setting" ? l.accountsSaving : l.accountsSaveConfig
-					}), /* @__PURE__ */ jsx("button", {
-						type: "button",
-						onClick: cancelEditing,
-						className: BTN_SECONDARY,
-						children: l.accountsCancel
-					})]
-				})]
-			}) : /* @__PURE__ */ jsxs("div", {
-				className: "mt-3 flex items-center gap-2",
-				children: [
-					/* @__PURE__ */ jsx("input", {
-						autoFocus: true,
-						type: "password",
-						placeholder: keyPlaceholder,
-						value,
-						onChange: (e) => setValue(e.target.value),
-						onKeyDown: (e) => {
-							if (e.key === "Enter") save();
-							if (e.key === "Escape") cancelEditing();
-						},
-						"aria-label": l.accountsKeyField(status.label),
-						className: `zg-well w-full h-8 px-2.5 text-zg-ui placeholder:text-[var(--zg-text-subtle)] disabled:opacity-zg-disabled flex-1 !w-auto font-mono`
-					}),
-					/* @__PURE__ */ jsx("button", {
-						type: "button",
-						disabled: !value.trim() || busy === "setting",
-						onClick: save,
-						className: BTN_PRIMARY,
-						children: busy === "setting" ? l.accountsSaving : l.accountsSave
-					}),
-					/* @__PURE__ */ jsx("button", {
-						type: "button",
-						onClick: cancelEditing,
-						className: BTN_SECONDARY,
-						children: l.accountsCancel
-					})
-				]
-			})),
-			hasCredentialChoice(status) && /* @__PURE__ */ jsx(CredentialSources, {
-				provider: status,
-				cwd,
-				host: writable ? host : { list: host.list },
-				labels: l,
-				confirm,
-				onError: setRowError,
-				onReauth: canSignIn && !flow ? startSignIn : void 0
-			}),
-			rowError && /* @__PURE__ */ jsx("div", {
-				className: "mt-2 text-xs text-zg-danger",
-				children: l.accountsError(rowError)
-			})
-		]
+				}),
+				hasCredentialChoice(status) && /* @__PURE__ */ jsx(CredentialSources, {
+					provider: status,
+					cwd,
+					host: writable ? host : { list: host.list },
+					labels: l,
+					confirm,
+					onError: setRowError,
+					onReauth: canSignIn && !flow ? startSignIn : void 0
+				}),
+				rowError && /* @__PURE__ */ jsx("div", {
+					className: "mt-2 text-xs text-zg-danger",
+					children: l.accountsError(rowError)
+				})
+			]
+		})
 	});
 }
 //#endregion

package/dist/settings/sections/providers/ServerProvidersSection.js

@@ -1,8 +1,8 @@
 import { BTN_DANGER, BTN_PRIMARY, BTN_SECONDARY } from "../../../components/button.js";
 import { ErrorNote, FormCard, FormSection, MetaChip, OpLine, RowText } from "../../../components/Form.js";
 import { constant, useReadable } from "../../../chat/headless/store.js";
-import { useSettingsHost } from "../../SettingsProvider.js";
 import { toSettingsError } from "../../headless/host.js";
+import { useSettingsHost } from "../../SettingsProvider.js";
 import { SettingsPanel, SettingsPanelBody } from "../../section.js";
 import { hasCredentialChoice } from "../../headless/providers.js";
 import { useSettingsResource } from "../shared/catalog.js";

package/dist/settings/sections/shared/catalog.js

@@ -2,8 +2,8 @@ import { IconButton } from "../../../components/IconButton.js";
 import { Segmented } from "../../../components/Segmented.js";
 import { EmptyState } from "../../../components/Surface.js";
 import { Checkbox } from "../../../components/Form.js";
-import { useSettingsDocument, useSettingsHost, useSettingsWritable } from "../../SettingsProvider.js";
 import { toSettingsError } from "../../headless/host.js";
+import { useSettingsDocument, useSettingsHost, useSettingsWritable } from "../../SettingsProvider.js";
 import { useSectionLabels } from "../use-section-labels.js";
 import { enabledNames, toggleEnabled } from "../../headless/enabled.js";
 import { DEFAULT_CATALOG_SHARED_LABELS } from "./labels.js";

package/dist/settings/sections/skills/SkillList.js

@@ -6,8 +6,8 @@ import { Checkbox, MetaChip } from "../../../components/Form.js";
 import { LoadError } from "../../../components/LoadError.js";
 import { useSettingsHost } from "../../SettingsProvider.js";
 import { useSectionLabels } from "../use-section-labels.js";
-import { useCodeDocument } from "../../../code/editor/useCodeDocument.js";
 import { OpenFileButton, RevealPathButton, useCatalogSharedLabels, useEnabledList, useSettingsResource } from "../shared/catalog.js";
+import { useCodeDocument } from "../../../code/editor/useCodeDocument.js";
 import { formatTokens } from "../../../session/headless/usage-format.js";
 import { DEFAULT_SKILLS_SECTION_LABELS } from "./labels.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/settings/sections/skills/SkillsSection.js

@@ -1,11 +1,11 @@
 import { BTN_LG_SECONDARY, BTN_PRIMARY, BTN_SECONDARY } from "../../../components/button.js";
 import { OpLine } from "../../../components/Form.js";
-import { useSettingsHost } from "../../SettingsProvider.js";
 import { toSettingsError } from "../../headless/host.js";
+import { useSettingsHost } from "../../SettingsProvider.js";
 import { SettingsPanel, SettingsPanelActions, SettingsPanelBody } from "../../section.js";
-import { SkillSourceBrowser } from "../../../onboarding/skills/SkillSourceBrowser.js";
 import { ScopePicker, useCatalogSharedLabels, useOpLine, useSettingsResource, useSettingsValues, useWriteSetting } from "../shared/catalog.js";
 import { SettingsTutorial } from "../../SettingsTutorial.js";
+import { SkillSourceBrowser } from "../../../onboarding/skills/SkillSourceBrowser.js";
 import { SkillActions, SkillList, useSkillsSectionLabels } from "./SkillList.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";