@frockbot/plugin-settings 0.3.5 → 0.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frockbot/plugin-settings",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "private": false,
   "type": "module",
   "exports": {
@@ -21,15 +21,15 @@
     "typecheck": "vue-tsc --noEmit -p tsconfig.json"
   },
   "dependencies": {
-    "@frockbot/catalog-core": "0.3.5",
-    "@frockbot/client-core": "0.3.5",
-    "@frockbot/client-ui": "0.3.5",
-    "@frockbot/configuration-core": "0.3.5",
-    "@frockbot/connection-core": "0.3.5",
-    "@frockbot/kernel-composition": "0.3.5",
-    "@frockbot/kernel-contracts": "0.3.5",
-    "@frockbot/plugin-auth": "0.3.5",
-    "@frockbot/plugin-shell": "0.3.5",
+    "@frockbot/catalog-core": "0.3.7",
+    "@frockbot/client-core": "0.3.7",
+    "@frockbot/client-ui": "0.3.7",
+    "@frockbot/configuration-core": "0.3.7",
+    "@frockbot/connection-core": "0.3.7",
+    "@frockbot/kernel-composition": "0.3.7",
+    "@frockbot/kernel-contracts": "0.3.7",
+    "@frockbot/plugin-auth": "0.3.7",
+    "@frockbot/plugin-shell": "0.3.7",
     "cordis": "4.0.0-rc.8",
     "vue": "3.5.41"
   },

package/src/client/BotSettingsSurface.vue

@@ -266,9 +266,13 @@ async function save(): Promise<void> {
         >
           <div>
             <strong>Identity</strong>
-            <p>{{ name || "This Bot" }} · Bot {{ web.activeBotId }}</p>
+            <p>{{ name || "This Bot" }}</p>
           </div>
-          <span>Named by {{ web.botSettings?.profile.namedBy ?? "user" }}</span>
+          <span>{{
+            web.botSettings?.profile.namedBy === "bot"
+              ? "Named by this Bot"
+              : "Named by you"
+          }}</span>
         </UiAnchor>
         <UiAnchor
           anchor="bot-info-members"
@@ -280,7 +284,7 @@ async function save(): Promise<void> {
             <strong>Members</strong>
             <p>This Bot uses what you enable for all of your Bots.</p>
           </div>
-          <span>Packages and Connections are shared</span>
+          <span>Plugins and connected accounts are shared</span>
         </UiAnchor>
         <k-slot name="frockbot.bot-settings-sections" />
       </div>

package/src/client/ConnectionsSurface.vue

@@ -28,6 +28,38 @@ const web = providedWeb;
 // Connections are User-scoped, so the row's link names no Bot.
 const connectionsLink = settingsLinkV1({ anchor: "user-connections" });
 
+/**
+ * What the browser came back from an external grant with. Read at boot from the
+ * return URL; without this the User lands back in the app with no confirmation
+ * and a cancelled grant is silently discarded.
+ */
+const connectionReturn = computed(() => web.value.connectionReturn);
+
+const connectionReturnMessage = computed(() => {
+  const result = connectionReturn.value;
+  if (!result) return "";
+  const name = connectorDisplayName(result.packageId);
+  if (result.status === "ready") return `${name} is connected.`;
+  if (result.status === "pending") {
+    return `${name} is finishing connecting. This page will show it when it is ready.`;
+  }
+  return result.reason
+    ? `${name} did not connect: ${result.reason}`
+    : `${name} did not connect.`;
+});
+
+/** The Package's display name when the catalog knows it, its id otherwise. */
+function connectorDisplayName(packageId: string): string {
+  return (
+    web.value.pluginCatalog.find((item) => item.packageId === packageId)
+      ?.displayName ?? packageId
+  );
+}
+
+function dismissConnectionReturn(): void {
+  web.value.connectionReturn = undefined;
+}
+
 const connectors = computed(() =>
   configurablePackages({
     catalog: web.value.pluginCatalog,
@@ -254,7 +286,7 @@ async function addMcpServer(): Promise<void> {
   } catch (error) {
     mcpApiKey.value = "";
     web.value.settingsError =
-      error instanceof Error ? error.message : "Could not add the MCP server";
+      error instanceof Error ? error.message : "Couldn't add that server.";
   }
 }
 
@@ -331,6 +363,18 @@ async function connect(
         Connect an account or service once and every Bot you own can use it.
       </p>
 
+      <p
+        v-if="connectionReturn"
+        class="connection-return"
+        :class="{
+          'connection-return--failed': connectionReturn.status === 'failed',
+        }"
+        role="status"
+      >
+        {{ connectionReturnMessage }}
+        <UiButton @click="dismissConnectionReturn">Dismiss</UiButton>
+      </p>
+
       <section
         v-if="pendingAuthorizations.length"
         class="connect-cards"
@@ -343,11 +387,7 @@ async function connect(
         >
           <div class="connect-card-copy">
             <strong>{{ connection.pendingAuthorization?.label }}</strong>
-            <span>
-              Needs your authorization. Only you can complete it — FrockBot
-              creates the sign-in link when you press Reconnect, and nothing is
-              stored waiting for it.
-            </span>
+            <span> Needs you to sign in again. </span>
           </div>
           <UiButton
             variant="primary"
@@ -376,11 +416,7 @@ async function connect(
             <span class="connector-copy">
               <strong>{{ item.displayName }}</strong>
               <small>
-                {{
-                  item.connectionTypes
-                    .map((connection) => connection.displayName)
-                    .join(", ")
-                }}
+                {{ item.connectionTypes[0]?.displayName }}
               </small>
             </span>
             <UiButton
@@ -548,12 +584,8 @@ async function connect(
                 />
               </label>
               <p class="field-hint">
-                Leave both empty for a server that registers clients itself,
-                which is what most do. FrockBot registers as a public client; a
-                server that issues a client secret is refused, because a secret
-                would have to live in this Connection's settings. You will be
-                sent to the server to sign in, and no token ever reaches this
-                page.
+                Leave both empty unless the server gave you specific values.
+                You'll sign in on the server's own site.
               </p>
             </template>
             <div class="api-key-actions">
@@ -734,6 +766,21 @@ async function connect(
   font-size: var(--frock-text-sm);
 }
 
+.connection-return {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 8px 0;
+  padding: 8px 12px;
+  border-radius: var(--frock-radius-card);
+  background: var(--frock-surface-accent);
+}
+
+.connection-return--failed {
+  background: var(--frock-surface-danger, var(--frock-surface-accent));
+}
+
 .connections-empty {
   display: flex;
   flex-direction: column;

package/src/client/ModelsSurface.vue

@@ -32,8 +32,8 @@ onMounted(() => void web.value.loadPluginCatalog());
       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.
+      FrockBot picks a model for you. Turn on Custom models in Plugins to choose
+      your own.
     </p>
     <p v-if="web.settingsError" class="settings-error" role="alert">
       {{ web.settingsError }}

package/src/client/PackageCatalogSurface.vue

@@ -152,20 +152,17 @@ function isPackageInstalled(packageId: string): boolean {
 <template>
   <div class="package-catalog-surface">
     <p class="catalog-intro">
-      Browse published Packages. Installing one makes it available to every Bot
-      you own when the Package is enabled.
+      Browse published plugins. Installing one makes it available to every Bot
+      you own, once it's turned on.
     </p>
     <label class="catalog-search">
       <UiIcon name="search" />
       <input
         v-model="search"
-        placeholder="Search the Catalog"
-        aria-label="Search the Package Catalog"
+        placeholder="Search plugins"
+        aria-label="Search plugins"
       />
     </label>
-    <p v-if="web.packageCatalogGeneration" class="catalog-generation">
-      Generation {{ web.packageCatalogGeneration }}
-    </p>
     <div class="catalog-grid">
       <article
         v-for="entry in filteredCatalog"
@@ -211,7 +208,7 @@ function isPackageInstalled(packageId: string): boolean {
                 <p class="catalog-note">{{ openCatalogEntry.description }}</p>
                 <dl class="catalog-facts">
                   <div>
-                    <dt>Package</dt>
+                    <dt>Plugin</dt>
                     <dd>{{ openCatalogEntry.packageId }}</dd>
                   </div>
                   <div>
@@ -239,8 +236,8 @@ function isPackageInstalled(packageId: string): boolean {
               >
                 <p>
                   Uninstalling {{ entry.displayName }} removes it from every
-                  Bot. Connections and credentials are kept, and become usable
-                  again if you reinstall and enable the Package.
+                  Bot. Your connected accounts stay, so reinstalling picks up
+                  where you left off.
                 </p>
                 <div class="catalog-actions">
                   <UiButton @click="uninstallingPackageId = undefined">
@@ -330,10 +327,13 @@ function isPackageInstalled(packageId: string): boolean {
       v-if="web.packageCatalog.length === 0 && !web.settingsError"
       class="catalog-empty"
     >
-      The Catalog has nothing to offer yet.
+      No plugins are published yet.
     </p>
-    <p v-else-if="filteredCatalog.length === 0" class="catalog-empty">
-      No Catalog entry matches that search.
+    <p
+      v-else-if="filteredCatalog.length === 0 && !web.settingsError"
+      class="catalog-empty"
+    >
+      No plugin matches that search.
     </p>
     <p v-if="web.settingsError" class="settings-error" role="alert">
       {{ web.settingsError }}

package/src/client/PackageSettingsForm.vue

@@ -54,9 +54,7 @@ async function save(): Promise<void> {
     await web.value.savePackageSettings(props.item.packageId, values);
   } catch (error) {
     web.value.settingsError =
-      error instanceof Error
-        ? error.message
-        : "Could not save the Package settings";
+      error instanceof Error ? error.message : "Couldn't save those settings.";
   }
 }
 </script>
@@ -73,7 +71,7 @@ async function save(): Promise<void> {
         v-if="settingFieldKind(definition.schema) === 'enum'"
         v-model="draft[definition.id]"
       >
-        <option value="">Package default</option>
+        <option value="">Default</option>
         <option
           v-for="choice in definition.schema.enum ?? []"
           :key="String(choice)"

package/src/client/PackageSettingsSection.vue

@@ -35,7 +35,7 @@ const packages = computed(() =>
     </article>
   </div>
   <p v-else class="package-settings-empty">
-    No enabled Package has settings of its own.
+    None of your plugins have settings.
   </p>
 </template>
 

package/src/client/PluginsSurface.vue

@@ -60,11 +60,29 @@ onMounted(() => {
   void web.value.loadPluginCatalog();
 });
 
-/** What a Package offers, in the words its manifest uses. */
+/** Plain nouns for the manifest's capability kinds. */
+const CAPABILITY_NOUNS: Record<string, string> = {
+  tool: "Tools",
+  model: "Models",
+  memory: "Memory",
+  notification: "Notifications",
+  computer: "Computer",
+  ui: "Pages",
+  storage: "Storage",
+};
+
+function capabilityNoun(kind: string): string {
+  return CAPABILITY_NOUNS[kind] ?? kind;
+}
+
+/** What a plugin offers, in plain words. */
 function capabilitySummary(item: PluginCatalogItem): string {
   const kinds = [...new Set(item.capabilities.map((entry) => entry.kind))];
-  if (kinds.length === 0) return "No Capabilities";
-  return kinds.join(", ");
+  // A plugin can be worth turning on without contributing a capability of its
+  // own — Custom models is exactly that — so saying "no features" tells the
+  // User the one plugin they must enable does nothing.
+  if (kinds.length === 0) return "Adds settings";
+  return kinds.map(capabilityNoun).join(", ");
 }
 
 function installed(packageId: string): boolean {
@@ -111,13 +129,71 @@ function openPackageCatalog(): void {
   surfaces.open("package-catalog");
 }
 
+/**
+ * Refusals live on the row that was clicked, not in one panel-wide slot.
+ *
+ * The grid scrolls, so a message rendered above the list is off-screen for
+ * every row past the fold: the User sees the row unchanged and no explanation
+ * anywhere.
+ */
+const rowErrors = ref<Record<string, string>>({});
+
+function rowError(packageId: string): string | undefined {
+  return rowErrors.value[packageId];
+}
+
+function setRowError(packageId: string, message: string): void {
+  rowErrors.value = { ...rowErrors.value, [packageId]: message };
+}
+
+function clearRowError(packageId: string): void {
+  const { [packageId]: _cleared, ...rest } = rowErrors.value;
+  rowErrors.value = rest;
+}
+
+/**
+ * Say what a Package is called, not what its id is.
+ *
+ * The backend refuses in terms of ids because that is what it holds; the
+ * surface knows the display names, so it substitutes them before the User
+ * reads the message.
+ */
+function inPlainNames(message: string): string {
+  const dependency = message.match(
+    /^Package "([^"]+)" requires Package "([^"]+)" to be installed and enabled/,
+  );
+  if (dependency) {
+    return `${displayName(dependency[1]!)} needs ${displayName(
+      dependency[2]!,
+    )} turned on first.`;
+  }
+  return message.replace(/"([a-z0-9][a-z0-9-]*)"/g, (quoted, packageId) =>
+    displayName(packageId) === packageId
+      ? quoted
+      : `"${displayName(packageId)}"`,
+  );
+}
+
+function displayName(packageId: string): string {
+  return (
+    web.value.pluginCatalog.find(
+      (candidate) => candidate.packageId === packageId,
+    )?.displayName ?? packageId
+  );
+}
+
 async function install(item: PluginCatalogItem): Promise<void> {
   busyPackageId.value = item.packageId;
+  clearRowError(item.packageId);
   try {
     await web.value.installPackage(item.packageId, item.version);
   } catch (error) {
-    web.value.settingsError =
-      error instanceof Error ? error.message : "Could not add the Package";
+    setRowError(
+      item.packageId,
+      inPlainNames(
+        error instanceof Error ? error.message : "Couldn't add that plugin.",
+      ),
+    );
   } finally {
     busyPackageId.value = undefined;
   }
@@ -125,13 +201,18 @@ async function install(item: PluginCatalogItem): Promise<void> {
 
 async function setEnabled(packageId: string, next: boolean): Promise<void> {
   busyPackageId.value = packageId;
+  clearRowError(packageId);
   try {
     await web.value.setPackageEnabled(packageId, next);
   } catch (error) {
-    web.value.settingsError =
-      error instanceof Error
-        ? error.message
-        : "Could not change the Package state";
+    setRowError(
+      packageId,
+      inPlainNames(
+        error instanceof Error
+          ? error.message
+          : "Couldn't turn that plugin on or off.",
+      ),
+    );
   } finally {
     busyPackageId.value = undefined;
   }
@@ -146,14 +227,6 @@ async function setEnabled(packageId: string, next: boolean): Promise<void> {
       </span>
       {{ installedPluginCount }} installed
     </div>
-    <!--
-      A refused command is the answer to the click that caused it, so it is
-      shown above the list where the click happened, not below a long grid
-      where it scrolls out of view.
-    -->
-    <p v-if="web.settingsError" class="settings-error" role="alert">
-      {{ web.settingsError }}
-    </p>
     <label class="plugin-search">
       <UiIcon name="search" />
       <input
@@ -164,17 +237,17 @@ async function setEnabled(packageId: string, next: boolean): Promise<void> {
     </label>
     <UiAnchor
       anchor="user-packages"
-      label="Packages"
+      label="Plugins"
       :href="packagesLink"
       class="plugin-anchor"
     >
       <p class="plugin-intro">
-        Turn Packages on and off for your Bots. Set one up where it belongs:
+        Turn plugins on and off for your Bots. Set one up where it belongs:
         model providers in Models, accounts in Connectors.
       </p>
       <div class="plugin-catalog-link">
         <UiButton type="button" @click="openPackageCatalog">
-          Browse the Package Catalog
+          Browse all plugins
         </UiButton>
       </div>
     </UiAnchor>
@@ -227,6 +300,9 @@ async function setEnabled(packageId: string, next: boolean): Promise<void> {
             </UiButton>
           </span>
         </div>
+        <p v-if="rowError(item.packageId)" class="plugin-failure" role="alert">
+          {{ rowError(item.packageId) }}
+        </p>
         <p v-if="failure(item.packageId)" class="plugin-failure" role="alert">
           {{ failure(item.packageId) }}
         </p>
@@ -237,10 +313,10 @@ async function setEnabled(packageId: string, next: boolean): Promise<void> {
       v-if="userPackages.length === 0 && !web.settingsError"
       class="plugin-empty"
     >
-      This application ships no Packages.
+      This deployment ships no plugins.
     </p>
     <p v-else-if="filteredCatalog.length === 0" class="plugin-empty">
-      No Package matches that search.
+      No plugin matches that search.
     </p>
   </div>
 </template>

package/src/client/UserProfileTrigger.vue

@@ -120,7 +120,7 @@ onBeforeUnmount(() => window.removeEventListener("pointerdown", closeMenu));
         {{ auth.signingOut.value ? "Signing out…" : "Sign out" }}
       </button>
       <p v-if="developmentIdentity" class="profile-menu-hint">
-        Local development identity is selected by the development login URL.
+        You're signed in as a local developer.
       </p>
       <p v-if="signOutError" class="profile-menu-error" role="alert">
         {{ signOutError }}

package/src/client/UserSettingsSurface.vue

@@ -70,7 +70,7 @@ async function save(): Promise<void> {
         <span class="profile-face" aria-hidden="true" />
         <div>
           <strong>Your profile</strong>
-          <p>This identity is shared across your Bots.</p>
+          <p>How your Bots refer to you.</p>
         </div>
       </div>
       <UiField label="Name">
@@ -82,13 +82,13 @@ async function save(): Promise<void> {
     </UiAnchor>
     <UiAnchor
       anchor="user-package-settings"
-      label="Package settings"
+      label="Plugin settings"
       :href="packageSettingsLink"
       class="settings-row"
     >
       <p class="field-hint">
-        Settings of the Packages you have enabled. Model providers are
-        configured in Models and accounts in Connectors.
+        Settings for the plugins you've turned on. Model providers are set up in
+        Models, and accounts in Connectors.
       </p>
       <PackageSettingsSection />
       <UiButton type="button" @click="surfaces.open('plugins')">

package/src/client/index.ts

@@ -45,12 +45,12 @@ export const settingsClientPlugin: ClientPlugin = (ctx) => {
     }),
     surfaces.register({
       id: "package-catalog",
-      title: "Package Catalog",
+      title: "All plugins",
       component: PackageCatalogSurface,
     }),
     surfaces.register({
       id: "user-settings",
-      title: "Application settings",
+      title: "Settings",
       component: UserSettingsSurface,
     }),
     ctx.slot({

package/src/client/package-surfaces.test.ts

@@ -165,9 +165,7 @@ describe("Package configuration homes", () => {
   test("names the surface a Plugins row points at", () => {
     expect(configurationHomeLabel("models")).toBe("Models");
     expect(configurationHomeLabel("connections")).toBe("Connectors");
-    expect(configurationHomeLabel("user-settings")).toBe(
-      "Application settings",
-    );
+    expect(configurationHomeLabel("user-settings")).toBe("Settings");
     expect(configurationHomeLabel("none")).toBeUndefined();
   });
 });

package/src/client/package-surfaces.ts

@@ -97,6 +97,6 @@ export function configurationHomeLabel(
 ): string | undefined {
   if (home === "models") return "Models";
   if (home === "connections") return "Connectors";
-  if (home === "user-settings") return "Application settings";
+  if (home === "user-settings") return "Settings";
   return undefined;
 }