@frockbot/plugin-settings 0.1.3 → 0.2.0

package/src/client/ConnectionsSurface.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
 /**
- * Connections: the accounts and services a User authorizes and may then give a
- * Bot access to — Composio, Gmail, a remote MCP server.
+ * Connectors: the surface for accounts and services a User authorizes for all
+ * of their Bots — Composio, Gmail, a remote MCP server.
  *
- * It holds authorization and its durable state only. Whether the Package
- * providing a connector is enabled at all is Plugins' question, and a model
- * provider's account belongs to Models even though it is a Connection too.
+ * It holds Connection authorization and state only. Whether the Package
+ * providing a connector is enabled at all is Plugins' question.
  */
 import { clientSurfaceRegistryKey } from "@frockbot/client-core";
 import { UiAnchor, UiButton } from "@frockbot/client-ui";
@@ -50,6 +49,7 @@ const pendingAuthorizations = computed(() =>
   ),
 );
 const reconnectingConnectionId = ref<string>();
+const togglingConnectionTypeId = ref<string>();
 
 const apiKeyPackageId = ref<string>();
 const apiKeyConnectionTypeId = ref<string>();
@@ -80,7 +80,7 @@ const mcpScope = ref("");
 const mcpClientId = ref("");
 
 /**
- * The MCP lifecycle panel: the durable server records the User Durable Object
+ * The MCP lifecycle panel: the server records the User Durable Object
  * owns, which the Connection rows cannot show — a server's `needs-auth` or
  * `error` state, when it last handshook, what its instructions are, and the
  * refusals this build recorded rather than performed.
@@ -157,6 +157,43 @@ function connectionCount(packageId: string): number {
   ).length;
 }
 
+function credentiallessConnection(item: PluginCatalogItem) {
+  const connectionType = item.connectionTypes[0];
+  if (connectionType?.authorizationKind !== "none") return undefined;
+  return (web.value.userSettings?.connections ?? []).find(
+    (connection) =>
+      connection.packageId === item.packageId &&
+      connection.connectionTypeId === connectionType.id &&
+      connection.state !== "revoked",
+  );
+}
+
+async function toggleCredentialless(item: PluginCatalogItem): Promise<void> {
+  const connectionType = item.connectionTypes[0];
+  if (connectionType?.authorizationKind !== "none") return;
+  togglingConnectionTypeId.value = connectionType.id;
+  try {
+    const connection = credentiallessConnection(item);
+    if (!connection) {
+      await web.value.createConnection({
+        packageId: item.packageId,
+        connectionTypeId: connectionType.id,
+        label: item.displayName,
+      });
+    } else {
+      await web.value.setConnectionEnabled(
+        connection.connectionId,
+        connection.state !== "ready",
+      );
+    }
+  } catch (error) {
+    web.value.settingsError =
+      error instanceof Error ? error.message : "Could not update Connection";
+  } finally {
+    togglingConnectionTypeId.value = undefined;
+  }
+}
+
 function beginMcpConnection(): void {
   mcpFormOpen.value = true;
   mcpLabel.value = "";
@@ -286,13 +323,12 @@ async function connect(
   <div class="connections-surface">
     <UiAnchor
       anchor="user-connections"
-      label="Connections"
+      label="Connectors"
       :href="connectionsLink"
       class="settings-row"
     >
       <p class="field-hint">
-        Accounts and services you can give your Bots access to. A Bot still
-        needs an explicit Assignment before it can use one.
+        Connect an account or service once and every Bot you own can use it.
       </p>
 
       <section
@@ -348,7 +384,20 @@ async function connect(
               </small>
             </span>
             <UiButton
-              v-if="
+              v-if="item.connectionTypes[0]?.authorizationKind === 'none'"
+              :disabled="
+                togglingConnectionTypeId === item.connectionTypes[0]?.id
+              "
+              @click="toggleCredentialless(item)"
+            >
+              {{
+                credentiallessConnection(item)?.state === "ready"
+                  ? "Disable"
+                  : "Enable"
+              }}
+            </UiButton>
+            <UiButton
+              v-else-if="
                 connectionCount(item.packageId) === 0 ||
                 item.connectionTypes[0]?.allowMultiple
               "

package/src/client/{PluginsTrigger.vue → ConnectorsTrigger.vue}

@@ -15,10 +15,10 @@ if (!surfaces || !web)
     v-if="web.connectionsAvailable"
     class="settings-trigger"
     type="button"
-    @click="surfaces.open('plugins')"
+    @click="surfaces.open('connections')"
   >
     <span class="settings-trigger__icon"><UiIcon name="plugins" /></span>
-    Plugins
+    Connectors
   </button>
 </template>
 

package/src/client/ModelsSurface.vue

@@ -1,134 +1,17 @@
 <script setup lang="ts">
-/**
- * Models: where a User configures model provider Packages and picks a model.
- *
- * Enablement is not here — Plugins turns a provider on and off, and a disabled
- * provider disappears from this surface with its accounts and its catalogs
- * intact.
- */
-import { clientSurfaceRegistryKey } from "@frockbot/client-core";
-import { UiAnchor, UiButton, UiField } from "@frockbot/client-ui";
-import {
-  frockBotWebDataKey,
-  type PluginCatalogItem,
-} from "@frockbot/plugin-shell/shared";
+import { UiAnchor } from "@frockbot/client-ui";
+import { frockBotWebDataKey } from "@frockbot/plugin-shell/shared";
 import { settingsLinkV1 } from "@frockbot/plugin-shell/settings-links";
-import { computed, inject, onMounted, ref } from "vue";
-import {
-  decodeModelSelection,
-  eligibleModelConnections,
-  encodeModelSelection,
-  modelSelectOptions,
-} from "./bot-settings.js";
-import { configurablePackages } from "./package-surfaces.js";
-import PackageAccounts from "./PackageAccounts.vue";
-import PackageSettingsForm from "./PackageSettingsForm.vue";
+import { inject, onMounted } from "vue";
 
-const providedSurfaces = inject(clientSurfaceRegistryKey);
 const providedWeb = inject(frockBotWebDataKey);
-if (!providedSurfaces || !providedWeb) {
-  throw new Error("settings client services were not provided");
-}
-const surfaces = providedSurfaces;
+if (!providedWeb) throw new Error("settings client services were not provided");
 const web = providedWeb;
-// Model configuration is User-scoped, so these links name no Bot.
+
 const defaultModelLink = settingsLinkV1({ anchor: "user-default-model" });
 const providersLink = settingsLinkV1({ anchor: "user-model-providers" });
 
-const defaultModel = ref("");
-const savingModel = ref(false);
-
-/**
- * The endpoint root of an Ollama Cloud Connection, declared by that Connection
- * Type as `api-base-url`. It is the only Connection Type setting the shared
- * API-key form has a field for.
- */
-const OLLAMA_PACKAGE_ID = "provider-ollama-cloud";
-const apiKeyPackageId = ref<string>();
-const apiKeyConnectionTypeId = ref<string>();
-const apiKeyLabel = ref("");
-const apiKey = ref("");
-const apiKeyBaseUrl = ref("");
-
-const providers = computed(() =>
-  configurablePackages({
-    catalog: web.value.pluginCatalog,
-    packages: web.value.userSettings?.packages ?? [],
-    home: "models",
-  }),
-);
-const readyConnections = computed(() =>
-  eligibleModelConnections({
-    connections: web.value.userSettings?.connections ?? [],
-    packages: web.value.userSettings?.packages ?? [],
-    catalog: web.value.pluginCatalog,
-  }),
-);
-const modelOptions = computed(() => modelSelectOptions(readyConnections.value));
-
-onMounted(async () => {
-  await web.value.loadPluginCatalog();
-  defaultModel.value = encodeModelSelection(
-    web.value.userSettings?.newBotModelTemplate,
-  );
-});
-
-async function saveDefaultModel(): Promise<void> {
-  savingModel.value = true;
-  try {
-    await web.value.saveDefaultModel(decodeModelSelection(defaultModel.value));
-  } catch (error) {
-    web.value.settingsError =
-      error instanceof Error ? error.message : "Could not save the model";
-  } finally {
-    savingModel.value = false;
-  }
-}
-
-function connectionCount(packageId: string): number {
-  return (web.value.userSettings?.connections ?? []).filter(
-    (connection) =>
-      connection.packageId === packageId && connection.state !== "revoked",
-  ).length;
-}
-
-function beginConnect(item: PluginCatalogItem): void {
-  const connectionType = item.connectionTypes[0];
-  if (!connectionType) return;
-  apiKeyPackageId.value = item.packageId;
-  apiKeyConnectionTypeId.value = connectionType.id;
-  apiKeyLabel.value = item.displayName;
-  apiKey.value = "";
-  apiKeyBaseUrl.value = "";
-}
-
-function cancelConnect(): void {
-  apiKey.value = "";
-  apiKeyBaseUrl.value = "";
-  apiKeyPackageId.value = undefined;
-  apiKeyConnectionTypeId.value = undefined;
-}
-
-async function connectApiKey(): Promise<void> {
-  if (!apiKeyPackageId.value || !apiKeyConnectionTypeId.value) return;
-  try {
-    // An empty endpoint field means the Package default, so the command
-    // carries no settings at all rather than an empty bag.
-    const apiBaseUrl = apiKeyBaseUrl.value.trim();
-    await web.value.createApiKeyConnection({
-      packageId: apiKeyPackageId.value,
-      connectionTypeId: apiKeyConnectionTypeId.value,
-      label: apiKeyLabel.value,
-      apiKey: apiKey.value,
-      ...(apiBaseUrl ? { settings: { "api-base-url": apiBaseUrl } } : {}),
-    });
-    cancelConnect();
-  } catch (error) {
-    apiKey.value = "";
-    web.value.settingsError =
-      error instanceof Error ? error.message : "Could not create Connection";
-  }
-}
+onMounted(() => void web.value.loadPluginCatalog());
 </script>
 
 <template>
@@ -137,142 +20,21 @@ async function connectApiKey(): Promise<void> {
       anchor="user-default-model"
       label="Default model"
       :href="defaultModelLink"
-      class="settings-row"
-    >
-      <UiField
-        v-if="modelOptions.length > 0"
-        label="Default model"
-        hint="used by every Bot"
-      >
-        <select v-model="defaultModel">
-          <option value="">No default model</option>
-          <option
-            v-for="model in modelOptions"
-            :key="model.value"
-            :value="model.value"
-          >
-            {{ model.label }}
-          </option>
-        </select>
-      </UiField>
-      <p v-if="modelOptions.length > 0" class="field-hint">
-        Used by every Bot unless a Bot overrides it in its own settings.
-      </p>
-      <div v-else class="model-empty">
-        <p>
-          Connect a model provider below, then choose the model your Bots use.
-        </p>
-      </div>
-      <div v-if="modelOptions.length > 0" class="settings-actions">
-        <UiButton
-          type="button"
-          variant="primary"
-          :disabled="savingModel"
-          @click="saveDefaultModel"
-        >
-          {{ savingModel ? "Saving…" : "Save model" }}
-        </UiButton>
-      </div>
-    </UiAnchor>
-
+      class="models-anchor"
+    />
+    <div class="models-sections">
+      <k-slot name="frockbot.models-sections" />
+    </div>
     <UiAnchor
       anchor="user-model-providers"
       label="Model providers"
       :href="providersLink"
-      class="settings-row"
-    >
-      <p class="field-hint">
-        Accounts and endpoints for the model providers you have enabled.
-      </p>
-      <div class="provider-grid">
-        <article
-          v-for="item in providers"
-          :key="item.packageId"
-          class="provider-card"
-        >
-          <div class="provider-summary">
-            <span class="provider-logo" aria-hidden="true">
-              {{ item.displayName.slice(0, 1) }}
-            </span>
-            <span class="provider-copy">
-              <strong>{{ item.displayName }}</strong>
-              <small>
-                {{
-                  connectionCount(item.packageId) === 0
-                    ? "No account connected"
-                    : `${connectionCount(item.packageId)} account(s)`
-                }}
-              </small>
-            </span>
-            <UiButton
-              v-if="
-                connectionCount(item.packageId) === 0 ||
-                item.connectionTypes[0]?.allowMultiple
-              "
-              @click="beginConnect(item)"
-            >
-              {{
-                connectionCount(item.packageId) === 0
-                  ? "Connect"
-                  : "Add another account"
-              }}
-            </UiButton>
-          </div>
-
-          <PackageAccounts :item="item" />
-
-          <form
-            v-if="apiKeyPackageId === item.packageId"
-            class="api-key-form"
-            @submit.prevent="connectApiKey"
-          >
-            <label>
-              <span>Connection label</span>
-              <input v-model="apiKeyLabel" maxlength="120" required />
-            </label>
-            <label>
-              <span>API key</span>
-              <input
-                v-model="apiKey"
-                type="password"
-                autocomplete="new-password"
-                required
-              />
-            </label>
-            <label v-if="item.packageId === OLLAMA_PACKAGE_ID">
-              <span>API base URL</span>
-              <input
-                v-model="apiKeyBaseUrl"
-                type="url"
-                inputmode="url"
-                autocomplete="off"
-                maxlength="2048"
-                placeholder="https://ollama.com"
-              />
-            </label>
-            <p v-if="item.packageId === OLLAMA_PACKAGE_ID" class="field-hint">
-              Leave empty for Ollama Cloud. Point this at a local Ollama server
-              (http://127.0.0.1:11434) or any Ollama-compatible endpoint.
-            </p>
-            <div class="api-key-actions">
-              <UiButton @click="cancelConnect">Cancel</UiButton>
-              <UiButton type="submit" variant="primary">
-                Connect account
-              </UiButton>
-            </div>
-          </form>
-
-          <PackageSettingsForm :item="item" />
-        </article>
-      </div>
-      <div v-if="providers.length === 0" class="model-empty">
-        <p>No model provider is enabled.</p>
-        <UiButton type="button" @click="surfaces.open('plugins')">
-          Open Plugins
-        </UiButton>
-      </div>
-    </UiAnchor>
-
+      class="models-anchor"
+    />
+    <p class="models-empty">
+      FrockBot chooses a model for you. Enable Custom models in Plugins to
+      choose an account model or a model for one Bot.
+    </p>
     <p v-if="web.settingsError" class="settings-error" role="alert">
       {{ web.settingsError }}
     </p>
@@ -287,128 +49,28 @@ async function connectApiKey(): Promise<void> {
   padding: 16px;
 }
 
-.settings-row {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  padding-right: var(--frock-control-sm);
-}
-
-.field-hint {
-  margin: 0;
-  color: var(--frock-text-muted);
-  font-size: var(--frock-text-sm);
+.models-anchor {
+  min-height: 1px;
 }
 
-.model-empty {
+.models-sections {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  gap: 10px;
-  padding: 12px;
-  border: 1px solid var(--frock-border);
-  border-radius: var(--frock-radius-card);
-  background: var(--frock-surface-subtle);
+  gap: 16px;
 }
 
-.model-empty p {
+.models-empty {
   margin: 0;
-  color: var(--frock-text-muted);
-  font-size: var(--frock-text-sm);
-}
-
-.provider-grid {
-  display: grid;
-  gap: 12px;
-}
-
-.provider-card {
-  min-width: 0;
-  padding: 8px;
+  padding: 12px;
   border: 1px solid var(--frock-border);
   border-radius: var(--frock-radius-card);
-  background: var(--frock-surface-raised);
-  box-shadow: var(--frock-shadow-card);
-}
-
-.provider-summary {
-  display: grid;
-  width: 100%;
-  min-width: 0;
-  grid-template-columns: 44px minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 12px;
-  padding: 8px;
-}
-
-.provider-logo {
-  display: grid;
-  width: 44px;
-  height: 44px;
-  place-items: center;
-  border-radius: 12px;
-  color: var(--frock-action-secondary-text);
-  background: var(--frock-surface-accent);
-  font-weight: 800;
-}
-
-.provider-copy {
-  min-width: 0;
-}
-
-.provider-copy strong,
-.provider-copy small {
-  display: block;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.provider-copy strong {
-  font-size: var(--frock-text-md);
-  font-weight: 600;
-}
-
-.provider-copy small {
-  margin-top: 4px;
-  color: var(--frock-text-muted);
-  font-size: var(--frock-text-sm);
-}
-
-.api-key-form {
-  display: grid;
-  gap: 12px;
-  margin: 0 8px;
-  padding: 12px 0 8px;
-  border-top: 1px solid var(--frock-border);
-  animation: frock-rise-in var(--frock-motion-enter) both;
-}
-
-.api-key-form label {
-  display: grid;
-  gap: 6px;
-}
-
-.api-key-form span {
   color: var(--frock-text-muted);
+  background: var(--frock-surface-subtle);
   font-size: var(--frock-text-sm);
 }
 
-.api-key-form input {
-  min-width: 0;
-  padding: 8px 11px;
-  border: 1px solid var(--frock-border);
-  border-radius: 9px;
-  background: var(--frock-surface-raised);
-  color: var(--frock-text);
-  font-size: var(--frock-text-base);
-}
-
-.api-key-actions,
-.settings-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
+.models-sections:not(:empty) ~ .models-empty {
+  display: none;
 }
 
 .settings-error {

package/src/client/PackageAccounts.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 /**
- * The accounts of one Package: every Connection it owns, with the durable
- * actions each one offers.
+ * The accounts of one Package: every Connection it owns and the actions each
+ * one offers.
  *
  * Shared by Models and Connections, which differ in what they add around it —
  * a provider catalog and a model choice on one, an authorization handoff on
@@ -41,20 +41,6 @@ const connections = computed<ConnectionView[]>(() =>
 
 type StatusTone = "ready" | "muted" | "attention";
 
-/**
- * The User's default model, when this account is the one serving it. Shown on
- * the account it belongs to; changing it is the row at the top of Models.
- */
-function defaultModelName(connection: ConnectionView): string | undefined {
-  const selected = web.value.userSettings?.newBotModelTemplate;
-  if (selected?.connectionId !== connection.connectionId) return undefined;
-  return (
-    connection.modelCatalog?.models.find(
-      (model) => model.providerModelId === selected.providerModelId,
-    )?.displayName ?? selected.providerModelId
-  );
-}
-
 function connectionTone(connection: ConnectionView): StatusTone {
   if (connection.state === "ready") return "ready";
   if (connection.state === "failed") return "attention";
@@ -194,9 +180,6 @@ async function revoke(packageId: string, connectionId: string): Promise<void> {
           Revoke
         </UiButton>
       </div>
-      <p v-if="defaultModelName(connection)" class="account-default">
-        Default model: {{ defaultModelName(connection) }}
-      </p>
       <p v-if="connection.failure" class="connection-failure" role="alert">
         {{ connection.failure }}
       </p>
@@ -316,12 +299,6 @@ async function revoke(packageId: string, connectionId: string): Promise<void> {
   font-size: var(--frock-text-base);
 }
 
-.account-default {
-  margin: 0;
-  color: var(--frock-text-muted);
-  font-size: var(--frock-text-sm);
-}
-
 .connection-failure {
   margin: 0;
   color: var(--frock-danger-text);

package/src/client/PackageCatalogSurface.vue

@@ -153,7 +153,7 @@ function isPackageInstalled(packageId: string): boolean {
   <div class="package-catalog-surface">
     <p class="catalog-intro">
       Browse published Packages. Installing one makes it available to every Bot
-      you own; each Bot still needs an explicit Assignment to use it.
+      you own when the Package is enabled.
     </p>
     <label class="catalog-search">
       <UiIcon name="search" />
@@ -239,8 +239,8 @@ function isPackageInstalled(packageId: string): boolean {
               >
                 <p>
                   Uninstalling {{ entry.displayName }} removes it from every
-                  Bot. Its Assignments stay visible as unavailable so you can
-                  repair or remove them. Connections and credentials are kept.
+                  Bot. Connections and credentials are kept, and become usable
+                  again if you reinstall and enable the Package.
                 </p>
                 <div class="catalog-actions">
                   <UiButton @click="uninstallingPackageId = undefined">

package/src/client/PackageSettingsForm.vue

@@ -23,7 +23,12 @@ const providedWeb = inject(frockBotWebDataKey);
 if (!providedWeb) throw new Error("shell client data was not provided");
 const web = providedWeb;
 
-const definitions = computed(() => props.item.settings ?? []);
+const definitions = computed(() =>
+  (props.item.settings ?? []).filter(
+    (definition) =>
+      definition.role !== "model" && definition.scopes.includes("user"),
+  ),
+);
 const draft = ref<Record<string, string | number | boolean>>({});
 
 /** The stored values of this Package, as the User settings hold them. */

package/src/client/PluginsSurface.vue

@@ -159,7 +159,7 @@ async function setEnabled(packageId: string, next: boolean): Promise<void> {
     >
       <p class="plugin-intro">
         Turn Packages on and off for your Bots. Set one up where it belongs:
-        model providers in Models, accounts in Connections.
+        model providers in Models, accounts in Connectors.
       </p>
       <div class="plugin-catalog-link">
         <UiButton type="button" @click="openPackageCatalog">

package/src/client/UserProfileTrigger.vue

@@ -90,7 +90,7 @@ onBeforeUnmount(() => window.removeEventListener("pointerdown", closeMenu));
         Settings
       </button>
       <!-- The three Package surfaces are reachable where the User already is,
-           and gated exactly as the sidebar's Plugins trigger is: a shell
+           and gated exactly as the sidebar's Connectors trigger is: a shell
            without the Connection protocol shows none of them. -->
       <template v-if="web.connectionsAvailable">
         <button type="button" role="menuitem" @click="openSurface('models')">
@@ -104,7 +104,7 @@ onBeforeUnmount(() => window.removeEventListener("pointerdown", closeMenu));
           role="menuitem"
           @click="openSurface('connections')"
         >
-          Connections
+          Connectors
         </button>
       </template>
       <button v-if="developmentIdentity" type="button" role="menuitem" disabled>