@frockbot/plugin-settings 0.3.11 → 0.3.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frockbot/plugin-settings",
-  "version": "0.3.11",
+  "version": "0.3.13",
   "private": false,
   "type": "module",
   "exports": {
@@ -21,15 +21,15 @@
     "typecheck": "vue-tsc --noEmit -p tsconfig.json"
   },
   "dependencies": {
-    "@frockbot/catalog-core": "0.3.11",
-    "@frockbot/client-core": "0.3.11",
-    "@frockbot/client-ui": "0.3.11",
-    "@frockbot/configuration-core": "0.3.11",
-    "@frockbot/connection-core": "0.3.11",
-    "@frockbot/kernel-composition": "0.3.11",
-    "@frockbot/kernel-contracts": "0.3.11",
-    "@frockbot/plugin-auth": "0.3.11",
-    "@frockbot/plugin-shell": "0.3.11",
+    "@frockbot/catalog-core": "0.3.13",
+    "@frockbot/client-core": "0.3.13",
+    "@frockbot/client-ui": "0.3.13",
+    "@frockbot/configuration-core": "0.3.13",
+    "@frockbot/connection-core": "0.3.13",
+    "@frockbot/kernel-composition": "0.3.13",
+    "@frockbot/kernel-contracts": "0.3.13",
+    "@frockbot/plugin-auth": "0.3.13",
+    "@frockbot/plugin-shell": "0.3.13",
     "cordis": "4.0.0-rc.8",
     "vue": "3.5.41"
   },
@@ -37,7 +37,7 @@
     "@types/bun": "1.4.0",
     "@types/node": "26.2.0",
     "@vitejs/plugin-vue": "6.0.8",
-    "typescript": "5.9.3",
+    "typescript": "npm:typescript-native-bridge@6.0.3-bridge.16.tsgo.7.0.2",
     "vite": "8.2.2",
     "vue-tsc": "3.3.10"
   },

package/src/client/BotSettingsSurface.vue

@@ -365,12 +365,18 @@ async function save(): Promise<void> {
 
 .bot-members {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   padding: 12px;
 }
 
+.bot-members > div {
+  min-width: 0;
+  flex: 1 1 14rem;
+}
+
 .bot-members strong,
 .bot-members p {
   display: block;
@@ -389,10 +395,19 @@ async function save(): Promise<void> {
   font-size: var(--frock-text-sm);
 }
 
+/*
+ * A status, not a button. It sat in the slot every other section fills with an
+ * action, ragged-right over three lines at 120px, and read as a broken
+ * control; a single-line pill is what it is.
+ */
 .bot-members > span {
-  max-width: 120px;
   flex: 0 0 auto;
-  text-align: right;
+  align-self: center;
+  border: 1px solid var(--frock-border);
+  border-radius: 999px;
+  padding: 2px 10px;
+  margin-top: 0;
+  white-space: nowrap;
 }
 
 .notification-setting {

package/src/client/PackageSettingsForm.vue

@@ -65,7 +65,13 @@ async function save(): Promise<void> {
     class="package-settings-form"
     @submit.prevent="save"
   >
-    <label v-for="definition in definitions" :key="definition.id">
+    <label
+      v-for="definition in definitions"
+      :key="definition.id"
+      :class="{
+        'field-toggle': settingFieldKind(definition.schema) === 'boolean',
+      }"
+    >
       <span>{{ settingLabel(definition) }}</span>
       <select
         v-if="settingFieldKind(definition.schema) === 'enum'"
@@ -140,6 +146,34 @@ async function save(): Promise<void> {
   font-size: var(--frock-text-base);
 }
 
+/*
+ * A checkbox reads beside its label, not under it. Sized and padded like a
+ * text field it drew as an empty box centred in the card with nothing next to
+ * it, and nothing on screen said what ticking it would do.
+ */
+.package-settings-form label.field-toggle {
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 4px 8px;
+}
+
+.package-settings-form label.field-toggle span {
+  order: 2;
+  color: var(--frock-text);
+}
+
+.package-settings-form label.field-toggle input[type="checkbox"] {
+  order: 1;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+}
+
+.package-settings-form label.field-toggle .field-hint {
+  order: 3;
+  grid-column: 1 / -1;
+}
+
 .field-hint {
   color: var(--frock-text-muted);
   font-size: var(--frock-text-sm);

package/src/client/PluginsSurface.vue

@@ -8,7 +8,11 @@
  * all of it and simply stops being available to any Bot. Installing something
  * new is the Package Catalog, one surface over.
  */
-import { clientSurfaceRegistryKey } from "@frockbot/client-core";
+import {
+  classifyClientFailureV1,
+  clientSurfaceRegistryKey,
+  presentClientFailureV1,
+} from "@frockbot/client-core";
 import { UiAnchor, UiButton, UiIcon } from "@frockbot/client-ui";
 import {
   frockBotWebDataKey,
@@ -129,6 +133,11 @@ function openPackageCatalog(): void {
   surfaces.open("package-catalog");
 }
 
+/** The read the error banner offers again. */
+async function reload(): Promise<void> {
+  await web.value.loadPluginCatalog();
+}
+
 /**
  * Refusals live on the row that was clicked, not in one panel-wide slot.
  *
@@ -182,18 +191,30 @@ function displayName(packageId: string): string {
   );
 }
 
+/**
+ * What the row says about a click that did not work.
+ *
+ * A refusal is the deployment explaining an invariant it holds, in terms this
+ * surface can turn into names — "X needs Y turned on first" — so its text is
+ * worth reading. Everything else is a transport failure, whose text is about
+ * this client's own plumbing and is never the User's to read: it becomes the
+ * shared sentence and the detail goes to the console.
+ */
+function rowFailure(error: unknown, action: string): string {
+  const classified = classifyClientFailureV1(error);
+  console.debug("plugin action failed", classified.detail);
+  return classified.serverMessage
+    ? inPlainNames(classified.serverMessage)
+    : presentClientFailureV1(error, action);
+}
+
 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) {
-    setRowError(
-      item.packageId,
-      inPlainNames(
-        error instanceof Error ? error.message : "Couldn't add that plugin.",
-      ),
-    );
+    setRowError(item.packageId, rowFailure(error, `add ${item.displayName}`));
   } finally {
     busyPackageId.value = undefined;
   }
@@ -207,11 +228,7 @@ async function setEnabled(packageId: string, next: boolean): Promise<void> {
   } catch (error) {
     setRowError(
       packageId,
-      inPlainNames(
-        error instanceof Error
-          ? error.message
-          : "Couldn't turn that plugin on or off.",
-      ),
+      rowFailure(error, next ? "turn that plugin on" : "turn that plugin off"),
     );
   } finally {
     busyPackageId.value = undefined;
@@ -227,6 +244,15 @@ async function setEnabled(packageId: string, next: boolean): Promise<void> {
       </span>
       {{ installedPluginCount }} installed
     </div>
+    <!--
+      A refused click belongs on its own row; this slot is for the read that
+      draws the whole list. A failed read leaves the last-known list on screen
+      — dimmed, because it is no longer confirmed — and offers the read again.
+    -->
+    <p v-if="web.settingsError" class="settings-error" role="alert">
+      {{ web.settingsError }}
+      <UiButton type="button" @click="reload">Retry</UiButton>
+    </p>
     <label class="plugin-search">
       <UiIcon name="search" />
       <input
@@ -251,7 +277,10 @@ async function setEnabled(packageId: string, next: boolean): Promise<void> {
         </UiButton>
       </div>
     </UiAnchor>
-    <div class="plugin-grid">
+    <div
+      class="plugin-grid"
+      :class="{ 'plugin-grid--stale': Boolean(web.settingsError) }"
+    >
       <article
         v-for="item in filteredCatalog"
         :key="item.packageId"
@@ -409,11 +438,19 @@ async function setEnabled(packageId: string, next: boolean): Promise<void> {
   box-shadow: var(--frock-shadow-control);
 }
 
+/*
+ * The name is the only thing in the row that identifies what a click will
+ * change, so it is the one thing that may not be the first to shrink. A grid
+ * gave the actions a min-content column and let the title collapse to an
+ * ellipsis — on a phone, to nothing at all — so the row wraps instead: the
+ * copy keeps a readable basis and the buttons drop to their own line when
+ * they no longer fit beside it.
+ */
 .plugin-summary {
-  display: grid;
+  display: flex;
   width: 100%;
   min-width: 0;
-  grid-template-columns: 44px minmax(0, 1fr) auto auto;
+  flex-wrap: wrap;
   align-items: center;
   gap: 12px;
   padding: 8px;
@@ -426,6 +463,7 @@ async function setEnabled(packageId: string, next: boolean): Promise<void> {
 
 .plugin-logo {
   display: grid;
+  flex: 0 0 auto;
   width: 44px;
   height: 44px;
   place-items: center;
@@ -437,6 +475,7 @@ async function setEnabled(packageId: string, next: boolean): Promise<void> {
 
 .plugin-card-copy {
   min-width: 0;
+  flex: 1 1 12rem;
 }
 
 .plugin-card-copy strong,
@@ -460,6 +499,8 @@ async function setEnabled(packageId: string, next: boolean): Promise<void> {
 }
 
 .plugin-state {
+  flex: 0 0 auto;
+  margin-left: auto;
   color: var(--frock-text-muted);
   font-size: var(--frock-text-sm);
   font-weight: 700;
@@ -472,7 +513,9 @@ async function setEnabled(packageId: string, next: boolean): Promise<void> {
 
 .plugin-actions {
   display: flex;
+  flex: 0 0 auto;
   flex-wrap: wrap;
+  margin-left: auto;
   justify-content: flex-end;
   gap: 8px;
 }
@@ -490,7 +533,20 @@ async function setEnabled(packageId: string, next: boolean): Promise<void> {
 }
 
 .settings-error {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
   color: var(--frock-danger-text);
   font-size: var(--frock-text-sm);
 }
+
+/*
+ * What is on screen after a failed read is the last thing known, not the
+ * current thing. Dimming it says so, so a toggle is not made against a list
+ * the deployment has just refused to confirm.
+ */
+.plugin-grid--stale {
+  opacity: 0.55;
+}
 </style>

package/src/client/UserProfileTrigger.vue

@@ -11,6 +11,7 @@ const web = inject(frockBotWebDataKey);
 if (!providedAuth || !surfaces || !web)
   throw new Error("settings client services were not provided");
 const auth = providedAuth;
+const shell = web;
 const menuOpen = ref(false);
 const signOutError = ref<string>();
 const sessionUser = computed(() =>
@@ -54,6 +55,9 @@ async function signOut(): Promise<void> {
   signOutError.value = undefined;
   try {
     await auth.signOut();
+    // Held conversations belong to the User who was signed in. Nothing of
+    // theirs is carried into whoever signs in next.
+    shell.value.transcripts.forget();
     closeMenu();
   } catch (error) {
     signOutError.value =
@@ -61,13 +65,36 @@ async function signOut(): Promise<void> {
   }
 }
 
-onMounted(() => window.addEventListener("pointerdown", closeMenu));
-onBeforeUnmount(() => window.removeEventListener("pointerdown", closeMenu));
+/*
+ * Escape closes this menu, as it closes every other overlay in the product.
+ * It is bound on the window rather than on the element because the menu can
+ * be open while focus is still on the trigger, and because a menu that only
+ * an outside click dismisses is a trap for anyone not using a mouse. Focus
+ * goes back to the trigger, which is where it came from.
+ */
+const trigger = ref<HTMLButtonElement>();
+
+function onWindowKeydown(event: KeyboardEvent): void {
+  if (event.key !== "Escape" || !menuOpen.value) return;
+  event.preventDefault();
+  closeMenu();
+  trigger.value?.focus();
+}
+
+onMounted(() => {
+  window.addEventListener("pointerdown", closeMenu);
+  window.addEventListener("keydown", onWindowKeydown);
+});
+onBeforeUnmount(() => {
+  window.removeEventListener("pointerdown", closeMenu);
+  window.removeEventListener("keydown", onWindowKeydown);
+});
 </script>
 
 <template>
   <div class="profile-area" @pointerdown.stop>
     <button
+      ref="trigger"
       class="profile-trigger"
       type="button"
       :aria-expanded="menuOpen"

package/src/user.test.ts

@@ -833,7 +833,7 @@ describe("User settings backend Contribution", () => {
           expectedRevision: 2,
           model: {
             connectionId: "flock-default",
-            providerModelId: "@flock/auto",
+            providerModelId: "@frock/auto",
           },
         },
         storage,
@@ -841,7 +841,7 @@ describe("User settings backend Contribution", () => {
     ).resolves.toMatchObject({ status: "applied", revision: 3 });
     expect((await settings.read("user-1")).platformModel).toEqual({
       connectionId: "flock-default",
-      providerModelId: "@flock/auto",
+      providerModelId: "@frock/auto",
     });
   });