paseo-prompt-kit 0.5.2

package/client/settings/sections/api-endpoint-section.tsx

@@ -0,0 +1,388 @@
+import { useMemo, useState } from "react";
+import {
+  SettingsAction,
+  SettingsCard,
+  SettingsInput,
+  SettingsSection,
+  SettingsSelect,
+} from "@getpaseo/plugin/client/ui";
+import { isApiProtocolId, protocolNeedsAccountId, type ApiEndpoint, type ApiProtocolId } from "../../../shared/api-protocol.js";
+import type { ApiTestOutput } from "../../../shared/rpc.js";
+import type { PromptKitSettings } from "../../../shared/settings.js";
+import {
+  ENDPOINT_PRESETS,
+  KEY_SOURCE_OPTIONS,
+  MODEL_PLACEHOLDER,
+  PROTOCOL_OPTIONS,
+  endpointFromPreset,
+  isUsableSecretsDir,
+  validateEndpoint,
+} from "../api-endpoints.js";
+import type { SettingsPatch } from "../draft.js";
+import { MODEL_FILTER_THRESHOLD, describeFilter, filterModels } from "../model-filter.js";
+import { StoredKeyRows, type StoredKeyRowsProps } from "./stored-key-rows.js";
+
+export interface ApiEndpointSectionProps {
+  values: PromptKitSettings;
+  disabled: boolean;
+  /** Bumps when the draft is discarded or saved, so text fields re-read their value. */
+  epoch: number;
+  patch(update: SettingsPatch): void;
+  /** Runs the real key lookup and model list against one endpoint. */
+  test(endpoint: ApiEndpoint, secretsDir: string | null): Promise<ApiTestOutput>;
+  keyStatus: StoredKeyRowsProps["status"];
+  writeKey: StoredKeyRowsProps["write"];
+}
+
+type TestState =
+  | { kind: "idle" }
+  | { kind: "running" }
+  | { kind: "ok"; models: number }
+  | { kind: "error"; message: string };
+
+const NONE = "";
+/** The value of the "add an endpoint that is not a preset" option. */
+const CUSTOM = "__custom__";
+const PRESET_IDS: ReadonlySet<string> = new Set(ENDPOINT_PRESETS.map((preset) => preset.id));
+
+/** A free id for a custom endpoint, so two of them cannot collide. */
+function nextCustomId(endpoints: readonly ApiEndpoint[]): string {
+  for (let n = 1; ; n += 1) {
+    const id = `custom-${n}`;
+    if (!endpoints.some((endpoint) => endpoint.id === id)) return id;
+  }
+}
+
+function withEndpoint(
+  endpoints: readonly ApiEndpoint[],
+  id: string,
+  changes: Partial<ApiEndpoint>,
+): ApiEndpoint[] {
+  return endpoints.map((endpoint) => (endpoint.id === id ? { ...endpoint, ...changes } : endpoint));
+}
+
+/** Pick endpoint → fill details → Test → pick model. One picker for presets and custom entries. */
+export function ApiEndpointSection({ values, disabled, epoch, patch, test, keyStatus, writeKey }: ApiEndpointSectionProps) {
+  const [tests, setTests] = useState<Readonly<Record<string, TestState>>>({});
+  const [modelQuery, setModelQuery] = useState("");
+
+  const selected = values.apiEndpoints.find((endpoint) => endpoint.id === values.apiEndpointId) ?? null;
+  const selectedIsPreset = selected !== null && PRESET_IDS.has(selected.id);
+  const testState: TestState = selected === null ? { kind: "idle" } : (tests[selected.id] ?? { kind: "idle" });
+  const problem = selected === null ? null : validateEndpoint(selected, values.apiEndpoints, selected.id);
+
+  // Presets and saved custom endpoints together, A–Z; "Custom endpoint…" always last.
+  const endpointOptions = useMemo(() => {
+    const protocolLabel = (id: ApiProtocolId) => PROTOCOL_OPTIONS.find((option) => option.value === id)?.label ?? id;
+    const entries = [
+      ...ENDPOINT_PRESETS.map((preset) => ({ label: `${preset.label} — ${preset.note}`, value: preset.id })),
+      ...values.apiEndpoints
+        .filter((endpoint) => !PRESET_IDS.has(endpoint.id))
+        .map((endpoint) => ({ label: `${endpoint.label} — ${protocolLabel(endpoint.protocol)}`, value: endpoint.id })),
+    ].sort((left, right) => left.label.localeCompare(right.label, undefined, { sensitivity: "base" }));
+    return [{ label: "Choose an endpoint…", value: NONE }, ...entries, { label: "Custom endpoint…", value: CUSTOM }];
+  }, [values.apiEndpoints]);
+
+  const modelOptions = useMemo(() => {
+    const declared = (selected?.models ?? []).map((model) => ({ label: model, value: model }));
+    // Keep the saved model selectable even if the endpoint no longer lists it.
+    if (values.apiModel !== null && !declared.some((option) => option.value === values.apiModel)) {
+      return [{ label: values.apiModel, value: values.apiModel }, ...declared];
+    }
+    return declared;
+  }, [selected, values.apiModel]);
+
+  /** Choosing an endpoint selects one that exists or adds it from its preset. */
+  const choose = (choice: string) => {
+    setModelQuery("");
+    patch((current) => {
+      if (choice === NONE) return { apiEndpointId: null, apiModel: null };
+      if (current.apiEndpoints.some((endpoint) => endpoint.id === choice)) {
+        return {
+          apiEndpointId: choice,
+          // The model belongs to one endpoint, so switching endpoint drops it.
+          apiModel: choice === current.apiEndpointId ? current.apiModel : null,
+        };
+      }
+      if (choice === CUSTOM) {
+        const id = nextCustomId(current.apiEndpoints);
+        return {
+          apiEndpoints: [
+            ...current.apiEndpoints,
+            {
+              id,
+              label: "Custom endpoint",
+              protocol: "openai" as ApiProtocolId,
+              baseUrl: "https://",
+              keySource: "env" as const,
+              apiKeyEnv: "",
+              accountIdVar: "",
+              models: [],
+            },
+          ],
+          apiEndpointId: id,
+          apiModel: null,
+        };
+      }
+      const preset = ENDPOINT_PRESETS.find((candidate) => candidate.id === choice);
+      if (preset === undefined) return {};
+      return {
+        apiEndpoints: [...current.apiEndpoints, endpointFromPreset(preset)],
+        apiEndpointId: preset.id,
+        apiModel: null,
+      };
+    });
+  };
+
+  const edit = (changes: Partial<ApiEndpoint>) => {
+    if (selected === null) return;
+    const id = selected.id;
+    patch((current) => ({ apiEndpoints: withEndpoint(current.apiEndpoints, id, changes) }));
+  };
+
+  const remove = () => {
+    if (selected === null) return;
+    const id = selected.id;
+    patch((current) => ({
+      apiEndpoints: current.apiEndpoints.filter((endpoint) => endpoint.id !== id),
+      apiEndpointId: null,
+      apiModel: null,
+      apiEndpointByProvider: Object.fromEntries(
+        Object.entries(current.apiEndpointByProvider).filter(([, target]) => target !== id),
+      ),
+    }));
+  };
+
+  const runTest = async (endpoint: ApiEndpoint) => {
+    setTests((previous) => ({ ...previous, [endpoint.id]: { kind: "running" } }));
+    try {
+      const output = await test(endpoint, values.secretsDir);
+      if (output.status === "ok") {
+        setTests((previous) => ({ ...previous, [endpoint.id]: { kind: "ok", models: output.models.length } }));
+        // Test fills the model list; an empty answer leaves it alone.
+        if (output.models.length > 0) {
+          const models = [...output.models];
+          patch((current) => ({ apiEndpoints: withEndpoint(current.apiEndpoints, endpoint.id, { models }) }));
+        }
+      } else {
+        setTests((previous) => ({
+          ...previous,
+          [endpoint.id]: { kind: "error", message: output.error.message },
+        }));
+      }
+    } catch (thrown) {
+      setTests((previous) => ({
+        ...previous,
+        [endpoint.id]: { kind: "error", message: thrown instanceof Error ? thrown.message : String(thrown) },
+      }));
+    }
+  };
+
+  const testHint =
+    testState.kind === "ok"
+      ? testState.models === 0
+        ? "Reachable, but the endpoint lists no models. Type the model id below."
+        : `Reachable. ${testState.models} models are now in the model list below.`
+      : "Asks the endpoint which models it offers, with the same key lookup a rewrite uses.";
+  const keyFound =
+    selected === null || testState.kind !== "ok"
+      ? ""
+      : selected.keySource === "none"
+        ? " No key was sent."
+        : selected.keySource === "env"
+          ? ` Key read from the environment variable ${selected.apiKeyEnv.trim()}.`
+          : ` Key read from secrets.json (${selected.apiKeyEnv.trim()}).`;
+  const secretsDirError =
+    values.secretsDir !== null && !isUsableSecretsDir(values.secretsDir)
+      ? "Must be an absolute path or start with ~/."
+      : null;
+
+  return (
+    <SettingsSection
+      title="API endpoint"
+      info="The key itself is never stored here, because this document reaches your browser. Choose where the daemon reads it — an environment variable or secrets.json — and store only its name. See README, “API keys”."
+    >
+      <SettingsCard>
+        <SettingsSelect
+          label="Endpoint"
+          hint={selected === null ? "Choosing a preset adds it; it is saved with the screen." : undefined}
+          error={selected === null ? "API rewrites will not run until an endpoint is chosen." : null}
+          value={values.apiEndpointId ?? NONE}
+          options={endpointOptions}
+          disabled={disabled}
+          onValueChange={choose}
+        />
+
+        {selected === null ? null : (
+          <>
+            {selectedIsPreset ? null : (
+              <>
+                <SettingsInput
+                  key={`${epoch}-${selected.id}-label`}
+                  label="Name"
+                  initialValue={selected.label}
+                  placeholder="My endpoint"
+                  disabled={disabled}
+                  onChangeText={(label) => edit({ label })}
+                />
+                <SettingsSelect
+                  key={`${selected.id}-protocol`}
+                  label="Protocol"
+                  hint="Which wire shape the endpoint speaks."
+                  value={selected.protocol}
+                  options={PROTOCOL_OPTIONS}
+                  disabled={disabled}
+                  onValueChange={(protocol) =>
+                    edit({ protocol: isApiProtocolId(protocol) ? protocol : "openai" })
+                  }
+                />
+              </>
+            )}
+            <SettingsInput
+              key={`${epoch}-${selected.id}-baseUrl`}
+              label="Base URL"
+              error={problem !== null && problem.includes("base URL") ? problem : null}
+              initialValue={selected.baseUrl}
+              placeholder="https://api.openai.com/v1"
+              disabled={disabled}
+              onChangeText={(baseUrl) => edit({ baseUrl })}
+            />
+            <SettingsSelect
+              key={`${selected.id}-keySource`}
+              label="Key source"
+              hint={
+                selected.keySource === "env"
+                  ? "An environment variable of the Paseo daemon. Paseo reads your shell variables once, when it starts: after adding one, quit and reopen Paseo."
+                  : selected.keySource === "secrets_file"
+                    ? "An entry in secrets.json on the daemon's machine. Works however Paseo was started."
+                    : "Send no key. For a local server such as LM Studio, vLLM or llama.cpp."
+              }
+              value={selected.keySource}
+              options={KEY_SOURCE_OPTIONS}
+              disabled={disabled}
+              onValueChange={(keySource) =>
+                edit({ keySource: keySource === "secrets_file" || keySource === "none" ? keySource : "env" })
+              }
+            />
+            {protocolNeedsAccountId(selected.protocol) ? (
+              <SettingsInput
+                key={`${epoch}-${selected.id}-account`}
+                label="Account ID"
+                hint={
+                  selected.keySource === "secrets_file"
+                    ? "Name of the entry under apiKeys in secrets.json holding the account ID, not the ID."
+                    : "Name of the environment variable holding the account ID, not the ID."
+                }
+                error={selected.accountIdVar.trim() === "" ? "Enter the account ID variable." : null}
+                initialValue={selected.accountIdVar}
+                placeholder="CLAUDFLARE_ACCOUNT_ID"
+                disabled={disabled}
+                onChangeText={(accountIdVar) => edit({ accountIdVar })}
+              />
+            ) : null}
+            {selected.keySource === "none" ? null : (
+              <SettingsInput
+                key={`${epoch}-${selected.id}-key`}
+                label="Key variable"
+                hint={
+                  selected.keySource === "env"
+                    ? "Name of the environment variable, not the key."
+                    : "Name of the entry under apiKeys in secrets.json, not the key."
+                }
+                error={selected.apiKeyEnv.trim() === "" ? "Enter the key variable." : null}
+                initialValue={selected.apiKeyEnv}
+                placeholder="GEMINI_API_KEY"
+                disabled={disabled}
+                onChangeText={(apiKeyEnv) => edit({ apiKeyEnv })}
+              />
+            )}
+            {selected.keySource === "secrets_file" ? (
+              <SettingsInput
+                key={`${epoch}-secretsDir`}
+                label="Secrets directory"
+                hint="Folder holding secrets.json, shared by every endpoint that uses it. Empty means <PASEO_HOME>/plugin-settings/prompt-kit."
+                error={secretsDirError}
+                initialValue={values.secretsDir ?? ""}
+                placeholder="~/.paseo/plugin-settings/prompt-kit"
+                disabled={disabled}
+                onChangeText={(text) => patch({ secretsDir: text.trim() === "" ? null : text.trim() })}
+              />
+            ) : null}
+            {selected.keySource === "secrets_file" && secretsDirError === null ? (
+              <>
+                {protocolNeedsAccountId(selected.protocol) ? (
+                  <StoredKeyRows
+                    subject="Account ID"
+                    name={selected.accountIdVar}
+                    secretsDir={values.secretsDir}
+                    disabled={disabled}
+                    status={keyStatus}
+                    write={writeKey}
+                  />
+                ) : null}
+                <StoredKeyRows
+                  subject="API key"
+                  name={selected.apiKeyEnv}
+                  secretsDir={values.secretsDir}
+                  disabled={disabled}
+                  status={keyStatus}
+                  write={writeKey}
+                />
+              </>
+            ) : null}
+            <SettingsAction
+              label="Connection"
+              hint={`${testHint}${keyFound}`}
+              error={testState.kind === "error" ? testState.message : null}
+              actionLabel={testState.kind === "running" ? "Testing…" : "Test"}
+              disabled={disabled || problem !== null || testState.kind === "running"}
+              onPress={() => void runTest(selected)}
+            />
+
+            {modelOptions.length > MODEL_FILTER_THRESHOLD ? (
+              <SettingsInput
+                key={`filter-${selected.id}`}
+                label="Filter models"
+                hint={describeFilter(modelOptions.length, filterModels(modelOptions, modelQuery).length, modelQuery)}
+                initialValue=""
+                placeholder="flash, llama, @cf/meta…"
+                disabled={disabled}
+                onChangeText={setModelQuery}
+              />
+            ) : null}
+            {selected.models.length > 0 ? (
+              <SettingsSelect
+                label="Model"
+                hint="Which model the rewrite asks this endpoint for. A provider mapped under Advanced sends its own model instead."
+                error={values.apiModel === null ? "Choose a model." : null}
+                value={values.apiModel ?? NONE}
+                options={[{ label: "Select a model", value: NONE }, ...filterModels(modelOptions, modelQuery, values.apiModel)]}
+                disabled={disabled}
+                onValueChange={(apiModel) => patch({ apiModel: apiModel === NONE ? null : apiModel })}
+              />
+            ) : (
+              <SettingsInput
+                key={`${epoch}-${selected.id}-apiModel`}
+                label="Model"
+                hint="This endpoint has not listed its models. Press Test to fill the list, or type the id."
+                error={values.apiModel === null ? "Choose a model." : null}
+                initialValue={values.apiModel ?? ""}
+                placeholder={MODEL_PLACEHOLDER[selected.protocol]}
+                disabled={disabled}
+                onChangeText={(model) => patch({ apiModel: model.trim() === "" ? null : model.trim() })}
+              />
+            )}
+
+            <SettingsAction
+              label="Remove endpoint"
+              hint="Drops it from this document. A preset can be added again from the list."
+              actionLabel="Remove"
+              disabled={disabled}
+              onPress={remove}
+            />
+          </>
+        )}
+      </SettingsCard>
+    </SettingsSection>
+  );
+}

package/client/settings/sections/custom-actions-section.tsx

@@ -0,0 +1,163 @@
+import { useMemo, useState } from "react";
+import { Text, View } from "react-native";
+import type { PluginTheme } from "@getpaseo/plugin";
+import { SettingsAction, SettingsCard, SettingsSection, SettingsSelect } from "@getpaseo/plugin/client/ui";
+import { TextInput } from "@getpaseo/plugin/client/react-native";
+import type { ActionSummary } from "../../../shared/rpc.js";
+import type { PromptKitSettings } from "../../../shared/settings.js";
+import { ACTION_SAMPLES } from "../action-samples.js";
+import { formatPack, freeActionId, parseCustomAction, removeCustomAction, storeCustomAction } from "../custom-actions.js";
+import type { SettingsPatch } from "../draft.js";
+import { Button } from "../ui/button.js";
+import { RADIUS, SPACE, textStyles } from "../ui/tokens.js";
+
+export interface CustomActionsSectionProps {
+  theme: PluginTheme;
+  /** Null while the registry has not answered yet. */
+  actions: readonly ActionSummary[] | null;
+  values: PromptKitSettings;
+  disabled: boolean;
+  patch(update: SettingsPatch): void;
+}
+
+type Editing = { id: string | null; text: string; error: string | null };
+
+const COPY_PREFIX = "copy:";
+
+/** Custom actions as JSON: pick a sample or an existing action, edit, Apply. Save stores them. */
+export function CustomActionsSection({ theme, actions, values, disabled, patch }: CustomActionsSectionProps) {
+  const [editing, setEditing] = useState<Editing | null>(null);
+  const text = useMemo(() => textStyles(theme), [theme]);
+  const busy = disabled || actions === null;
+
+  const takenIds = (except: string | null): Set<string> =>
+    new Set((actions ?? []).map((action) => action.id).filter((id) => id !== except));
+
+  const startFrom = (choice: string) => {
+    const copy = choice.startsWith(COPY_PREFIX)
+      ? values.customActions.find((pack) => pack.id === choice.slice(COPY_PREFIX.length))
+      : undefined;
+    const base = copy ?? ACTION_SAMPLES.find((sample) => sample.key === choice)?.pack;
+    if (base === undefined) return;
+    const pack = { ...base, id: freeActionId(base.id, takenIds(null)) };
+    setEditing({ id: null, text: formatPack(pack), error: null });
+  };
+
+  const apply = () => {
+    if (editing === null || actions === null) return;
+    const parsed = parseCustomAction(editing.text, takenIds(editing.id));
+    if (!parsed.ok) {
+      setEditing({ ...editing, error: parsed.error });
+      return;
+    }
+    const replacingId = editing.id;
+    patch((current) => storeCustomAction(current, actions, parsed.pack, replacingId));
+    setEditing(null);
+  };
+
+  const remove = () => {
+    if (editing?.id == null) return;
+    const id = editing.id;
+    patch((current) => removeCustomAction(current, id));
+    setEditing(null);
+  };
+
+  const startOptions = [
+    ...ACTION_SAMPLES.map((sample) => ({ label: sample.label, value: sample.key })),
+    ...values.customActions.map((pack) => ({ label: `Copy of ${pack.title}`, value: `${COPY_PREFIX}${pack.id}` })),
+  ];
+
+  const box = {
+    minHeight: 280,
+    padding: SPACE.md,
+    borderRadius: RADIUS.lg,
+    borderWidth: 1,
+    borderColor: editing?.error ? theme.colors.statusDanger : theme.colors.border,
+    backgroundColor: theme.colors.surface1,
+    color: theme.colors.foreground,
+    fontFamily: "monospace",
+    fontSize: 12,
+    textAlignVertical: "top" as const,
+  };
+
+  return (
+    <SettingsSection
+      title="Custom actions"
+      info="Your own actions, written as action-pack JSON. Start from a sample, change the id, title and instructions, then Apply and Save. They run through the same rewrite as the bundled actions."
+    >
+      <SettingsCard>
+        {values.customActions.map((pack) => (
+          <SettingsAction
+            key={pack.id}
+            label={pack.title}
+            hint={`${pack.id} · ${pack.description}`}
+            actionLabel="Edit"
+            disabled={busy || editing !== null}
+            onPress={() => setEditing({ id: pack.id, text: formatPack(pack), error: null })}
+          />
+        ))}
+        {editing === null ? (
+          <SettingsAction
+            label="Add action"
+            hint="Opens a sample to edit."
+            actionLabel="Add"
+            disabled={busy}
+            onPress={() => startFrom(ACTION_SAMPLES[0]!.key)}
+            testID="prompt-kit-custom-add"
+          />
+        ) : editing.id === null ? (
+          <SettingsSelect
+            label="Start from"
+            hint="Replaces the JSON below."
+            value=""
+            options={[{ label: "Choose a sample…", value: "" }, ...startOptions]}
+            onValueChange={(choice) => {
+              if (choice !== "") startFrom(choice);
+            }}
+            disabled={busy}
+          />
+        ) : null}
+      </SettingsCard>
+
+      {editing !== null ? (
+        <View style={{ gap: SPACE.md, marginTop: SPACE.md }}>
+          <TextInput
+            multiline
+            value={editing.text}
+            onChangeText={(next) => setEditing({ ...editing, text: next, error: null })}
+            autoCapitalize="none"
+            autoCorrect={false}
+            spellCheck={false}
+            editable={!busy}
+            style={box}
+            testID="prompt-kit-custom-json"
+          />
+          {editing.error !== null ? (
+            <Text style={text.danger} testID="prompt-kit-custom-error">
+              {editing.error}
+            </Text>
+          ) : (
+            <Text style={text.muted}>
+              Apply checks the JSON and adds it to the unsaved changes; Save stores it.
+            </Text>
+          )}
+          <View style={{ flexDirection: "row", gap: SPACE.md }}>
+            {editing.id !== null ? (
+              <Button theme={theme} label="Delete" onPress={remove} disabled={busy} testID="prompt-kit-custom-delete" />
+            ) : null}
+            <View style={{ flex: 1 }} />
+            <Button theme={theme} label="Cancel" onPress={() => setEditing(null)} testID="prompt-kit-custom-cancel" />
+            <Button
+              theme={theme}
+              label="Apply"
+              variant="primary"
+              onPress={apply}
+              disabled={busy}
+              testID="prompt-kit-custom-apply"
+            />
+          </View>
+        </View>
+      ) : null}
+    </SettingsSection>
+  );
+}

package/client/settings/sections/dedicated-model-section.tsx

@@ -0,0 +1,136 @@
+import { useState } from "react";
+import { SettingsAction, SettingsCard, SettingsInput, SettingsSection, SettingsSelect } from "@getpaseo/plugin/client/ui";
+import type { ProviderCatalogOutput } from "../../../shared/rpc.js";
+import type { PromptKitSettings } from "../../../shared/settings.js";
+import type { SettingsPatch } from "../draft.js";
+import { MODEL_FILTER_THRESHOLD, describeFilter, filterModels } from "../model-filter.js";
+
+type Providers = ProviderCatalogOutput["providers"];
+
+export interface DedicatedModelSectionProps {
+  values: PromptKitSettings;
+  /** Null until the catalog has been read. */
+  providers: Providers | null;
+  providersError: string | null;
+  disabled: boolean;
+  patch(update: SettingsPatch): void;
+  reloadProviders(): void;
+}
+
+/** Empty string is the "no selection" option; the schema stores null for it. */
+const NONE = "";
+
+/** Dedicated provider/model/thinking for the CLI transport, with per-row errors. */
+export function DedicatedModelSection({
+  values,
+  providers,
+  providersError,
+  disabled,
+  patch,
+  reloadProviders,
+}: DedicatedModelSectionProps) {
+  const [query, setQuery] = useState("");
+  const catalog = providers ?? [];
+  const provider = catalog.find((entry) => entry.provider === values.dedicatedProvider);
+  const model = provider?.models.find((entry) => entry.id === values.dedicatedModel);
+  const modelOptions = (provider?.models ?? []).map((entry) => ({ label: entry.label, value: entry.id }));
+  const shownModels = filterModels(modelOptions, query, values.dedicatedModel);
+
+  const providerError =
+    values.dedicatedProvider === null
+      ? "Choose a provider."
+      : providers !== null && (provider === undefined || !provider.available)
+        ? `Provider is unavailable: ${values.dedicatedProvider}`
+        : null;
+  const modelError =
+    values.dedicatedModel === null
+      ? "Choose a model."
+      : provider !== undefined && model === undefined
+        ? `Model is unavailable: ${values.dedicatedModel}`
+        : null;
+  const thinkingError =
+    values.dedicatedThinkingOptionId !== null &&
+    model !== undefined &&
+    !model.thinkingOptions.some((option) => option.id === values.dedicatedThinkingOptionId)
+      ? `Thinking option is unavailable: ${values.dedicatedThinkingOptionId}`
+      : null;
+
+  return (
+    <SettingsSection
+      title="Dedicated model"
+      info="Read from the daemon's provider catalog. A provider marked unavailable has no working CLI or credentials on the daemon host."
+    >
+      <SettingsCard>
+        <SettingsSelect
+          label="Provider"
+          error={providerError}
+          value={values.dedicatedProvider ?? NONE}
+          options={[
+            { label: providers === null ? "Loading…" : "Select a provider", value: NONE },
+            ...catalog.map((entry) => ({
+              label: entry.available ? entry.label : `${entry.label} (unavailable)`,
+              value: entry.provider,
+            })),
+          ]}
+          disabled={disabled || providers === null}
+          onValueChange={(next) => {
+            setQuery("");
+            patch({
+              dedicatedProvider: next === NONE ? null : next,
+              dedicatedModel: null,
+              dedicatedThinkingOptionId: null,
+            });
+          }}
+        />
+        {modelOptions.length > MODEL_FILTER_THRESHOLD ? (
+          <SettingsInput
+            key={`filter-${values.dedicatedProvider ?? ""}`}
+            label="Filter models"
+            hint={describeFilter(modelOptions.length, filterModels(modelOptions, query).length, query)}
+            initialValue=""
+            placeholder="flash, llama, @cf/meta…"
+            disabled={disabled}
+            onChangeText={setQuery}
+          />
+        ) : null}
+        <SettingsSelect
+          label="Model"
+          error={providerError === null ? modelError : null}
+          value={values.dedicatedModel ?? NONE}
+          options={[{ label: "Select a model", value: NONE }, ...shownModels]}
+          disabled={disabled || provider === undefined}
+          onValueChange={(next) =>
+            patch({ dedicatedModel: next === NONE ? null : next, dedicatedThinkingOptionId: null })
+          }
+        />
+        <SettingsSelect
+          label="Thinking"
+          hint="Model default unless you choose one."
+          error={thinkingError}
+          value={values.dedicatedThinkingOptionId ?? NONE}
+          options={[
+            { label: "Model default", value: NONE },
+            ...(model?.thinkingOptions ?? []).map((option) => ({
+              label: option.label,
+              value: option.id,
+            })),
+          ]}
+          disabled={disabled || model === undefined || model.thinkingOptions.length === 0}
+          onValueChange={(next) => patch({ dedicatedThinkingOptionId: next === NONE ? null : next })}
+        />
+        <SettingsAction
+          label="Provider catalog"
+          hint={
+            providers === null
+              ? "Not read yet."
+              : `${catalog.filter((entry) => entry.available).length} of ${catalog.length} providers available.`
+          }
+          error={providersError}
+          actionLabel="Refresh"
+          disabled={disabled}
+          onPress={reloadProviders}
+        />
+      </SettingsCard>
+    </SettingsSection>
+  );
+}