@frockbot/plugin-settings 0.0.0 → 0.1.0

package/src/client/PackageSettingsForm.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+/**
+ * The knobs one Package declares, wherever that Package's configuration lives.
+ * Rendered from the manifest, so a Package that adds a setting needs no edit
+ * here and none to the surface that hosts this form.
+ */
+import { UiButton } from "@frockbot/client-ui";
+import {
+  frockBotWebDataKey,
+  type PluginCatalogItem,
+} from "@frockbot/plugin-shell/shared";
+import { computed, inject, ref, watch } from "vue";
+import {
+  collectSettingsValues,
+  seedSettingsDraft,
+  settingFieldKind,
+  settingLabel,
+} from "./package-settings.js";
+
+const props = defineProps<{ item: PluginCatalogItem }>();
+
+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 draft = ref<Record<string, string | number | boolean>>({});
+
+/** The stored values of this Package, as the User settings hold them. */
+const stored = computed<Record<string, unknown>>(() => {
+  const installation = web.value.userSettings?.packages.find(
+    (candidate) => candidate.packageId === props.item.packageId,
+  );
+  return (installation?.values ?? {}) as Record<string, unknown>;
+});
+
+watch(
+  [definitions, stored],
+  () => {
+    draft.value = seedSettingsDraft(definitions.value, stored.value);
+  },
+  { immediate: true },
+);
+
+async function save(): Promise<void> {
+  const values = collectSettingsValues(definitions.value, draft.value);
+  if (Object.keys(values).length === 0) return;
+  try {
+    await web.value.savePackageSettings(props.item.packageId, values);
+  } catch (error) {
+    web.value.settingsError =
+      error instanceof Error
+        ? error.message
+        : "Could not save the Package settings";
+  }
+}
+</script>
+
+<template>
+  <form
+    v-if="definitions.length > 0"
+    class="package-settings-form"
+    @submit.prevent="save"
+  >
+    <label v-for="definition in definitions" :key="definition.id">
+      <span>{{ settingLabel(definition) }}</span>
+      <select
+        v-if="settingFieldKind(definition.schema) === 'enum'"
+        v-model="draft[definition.id]"
+      >
+        <option value="">Package default</option>
+        <option
+          v-for="choice in definition.schema.enum ?? []"
+          :key="String(choice)"
+          :value="choice ?? ''"
+        >
+          {{ String(choice) }}
+        </option>
+      </select>
+      <input
+        v-else-if="settingFieldKind(definition.schema) === 'boolean'"
+        v-model="draft[definition.id]"
+        type="checkbox"
+      />
+      <input
+        v-else-if="settingFieldKind(definition.schema) === 'number'"
+        v-model="draft[definition.id]"
+        type="number"
+        inputmode="numeric"
+        :min="definition.schema.minimum"
+        :max="definition.schema.maximum"
+        :step="definition.schema.type === 'integer' ? 1 : 'any'"
+      />
+      <input
+        v-else
+        v-model="draft[definition.id]"
+        type="text"
+        :maxlength="definition.schema.maxLength"
+      />
+      <small v-if="definition.schema.description" class="field-hint">
+        {{ definition.schema.description }}
+      </small>
+    </label>
+    <div class="package-settings-actions">
+      <UiButton type="submit" variant="primary">Save settings</UiButton>
+    </div>
+  </form>
+</template>
+
+<style scoped>
+.package-settings-form {
+  display: grid;
+  gap: 12px;
+  margin: 0 8px;
+  padding: 12px 0 8px;
+  border-top: 1px solid var(--frock-border);
+}
+
+.package-settings-form label {
+  display: grid;
+  gap: 6px;
+}
+
+.package-settings-form span {
+  color: var(--frock-text-muted);
+  font-size: var(--frock-text-sm);
+}
+
+.package-settings-form input,
+.package-settings-form select {
+  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);
+}
+
+.field-hint {
+  color: var(--frock-text-muted);
+  font-size: var(--frock-text-sm);
+}
+
+.package-settings-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+</style>

package/src/client/PackageSettingsSection.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+/**
+ * The knobs of enabled Packages that configure nothing external — no model
+ * provider account, no Connection — and so have no surface of their own. They
+ * are still configuration, and configuration never lives in Plugins, so their
+ * home is Application settings.
+ */
+import { frockBotWebDataKey } from "@frockbot/plugin-shell/shared";
+import { computed, inject } from "vue";
+import { configurablePackages } from "./package-surfaces.js";
+import PackageSettingsForm from "./PackageSettingsForm.vue";
+
+const providedWeb = inject(frockBotWebDataKey);
+if (!providedWeb) throw new Error("shell client data was not provided");
+const web = providedWeb;
+
+const packages = computed(() =>
+  configurablePackages({
+    catalog: web.value.pluginCatalog,
+    packages: web.value.userSettings?.packages ?? [],
+    home: "user-settings",
+  }),
+);
+</script>
+
+<template>
+  <div v-if="packages.length > 0" class="package-settings">
+    <article
+      v-for="item in packages"
+      :key="item.packageId"
+      class="package-settings-card"
+    >
+      <strong>{{ item.displayName }}</strong>
+      <PackageSettingsForm :item="item" />
+    </article>
+  </div>
+  <p v-else class="package-settings-empty">
+    No enabled Package has settings of its own.
+  </p>
+</template>
+
+<style scoped>
+.package-settings {
+  display: grid;
+  gap: 12px;
+}
+
+.package-settings-card {
+  padding: 12px 8px 4px;
+  border: 1px solid var(--frock-border);
+  border-radius: var(--frock-radius-card);
+  background: var(--frock-surface-raised);
+}
+
+.package-settings-card strong {
+  padding-left: 8px;
+  font-size: var(--frock-text-md);
+  font-weight: 600;
+}
+
+.package-settings-empty {
+  margin: 0;
+  color: var(--frock-text-muted);
+  font-size: var(--frock-text-sm);
+}
+</style>

package/src/client/PluginsSurface.vue

@@ -0,0 +1,412 @@
+<script setup lang="ts">
+/**
+ * Plugins: what a User has, and whether it is on.
+ *
+ * Enablement only. Nothing a Package declares — its accounts, its credentials,
+ * its settings — is edited here: each of those lives on the surface that owns
+ * what it configures, and this surface links to it. A disabled Package keeps
+ * 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 { UiAnchor, UiButton, UiIcon } from "@frockbot/client-ui";
+import {
+  frockBotWebDataKey,
+  type PluginCatalogItem,
+} from "@frockbot/plugin-shell/shared";
+import { settingsLinkV1 } from "@frockbot/plugin-shell/settings-links";
+import { computed, inject, onMounted, ref } from "vue";
+import {
+  configurationHomeLabel,
+  isPackageEnabled,
+  isPackageInstalled,
+  packageConfigurationHome,
+  type PackageConfigurationHome,
+} from "./package-surfaces.js";
+
+const providedSurfaces = inject(clientSurfaceRegistryKey);
+const providedWeb = inject(frockBotWebDataKey);
+if (!providedSurfaces || !providedWeb) {
+  throw new Error("settings client services were not provided");
+}
+const surfaces = providedSurfaces;
+const web = providedWeb;
+// Packages are User-scoped, so the row's link names no Bot.
+const packagesLink = settingsLinkV1({ anchor: "user-packages" });
+const search = ref("");
+const busyPackageId = ref<string>();
+
+const installations = computed(() => web.value.userSettings?.packages ?? []);
+const installedPluginCount = computed(
+  () =>
+    web.value.pluginCatalog.filter((item) =>
+      isPackageInstalled(installations.value, item.packageId),
+    ).length,
+);
+const filteredCatalog = computed(() => {
+  const query = search.value.trim().toLocaleLowerCase();
+  if (!query) return web.value.pluginCatalog;
+  return web.value.pluginCatalog.filter(
+    (item) =>
+      item.displayName.toLocaleLowerCase().includes(query) ||
+      item.packageId.toLocaleLowerCase().includes(query),
+  );
+});
+
+onMounted(() => {
+  void web.value.loadPluginCatalog();
+});
+
+/** What a Package offers, in the words its manifest uses. */
+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(", ");
+}
+
+function installed(packageId: string): boolean {
+  return isPackageInstalled(installations.value, packageId);
+}
+
+function enabled(packageId: string): boolean {
+  return isPackageEnabled(installations.value, packageId);
+}
+
+function failure(packageId: string): string | undefined {
+  return installations.value.find(
+    (candidate) => candidate.packageId === packageId,
+  )?.failure;
+}
+
+function stateLabel(packageId: string): string {
+  if (!installed(packageId)) return "Not installed";
+  if (enabled(packageId)) return "Enabled";
+  const installation = installations.value.find(
+    (candidate) => candidate.packageId === packageId,
+  );
+  return installation?.state === "failed" ? "Failed" : "Disabled";
+}
+
+function home(item: PluginCatalogItem): PackageConfigurationHome {
+  return packageConfigurationHome(item);
+}
+
+/** The surface that owns this Package's configuration, when it has one. */
+function homeLabel(item: PluginCatalogItem): string | undefined {
+  return enabled(item.packageId)
+    ? configurationHomeLabel(home(item))
+    : undefined;
+}
+
+function openHome(item: PluginCatalogItem): void {
+  const target = home(item);
+  if (target === "none") return;
+  surfaces.open(target);
+}
+
+function openPackageCatalog(): void {
+  surfaces.open("package-catalog");
+}
+
+async function install(item: PluginCatalogItem): Promise<void> {
+  busyPackageId.value = 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";
+  } finally {
+    busyPackageId.value = undefined;
+  }
+}
+
+async function setEnabled(packageId: string, next: boolean): Promise<void> {
+  busyPackageId.value = packageId;
+  try {
+    await web.value.setPackageEnabled(packageId, next);
+  } catch (error) {
+    web.value.settingsError =
+      error instanceof Error
+        ? error.message
+        : "Could not change the Package state";
+  } finally {
+    busyPackageId.value = undefined;
+  }
+}
+</script>
+
+<template>
+  <div class="plugins-surface">
+    <div class="installed-strip" aria-live="polite">
+      <span class="plugin-status-badge" aria-hidden="true">
+        <UiIcon name="check" :size="12" :weight="2.5" />
+      </span>
+      {{ installedPluginCount }} installed
+    </div>
+    <label class="plugin-search">
+      <UiIcon name="search" />
+      <input
+        v-model="search"
+        placeholder="Search Plugins"
+        aria-label="Search Plugins"
+      />
+    </label>
+    <UiAnchor
+      anchor="user-packages"
+      label="Packages"
+      :href="packagesLink"
+      class="plugin-anchor"
+    >
+      <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.
+      </p>
+      <div class="plugin-catalog-link">
+        <UiButton type="button" @click="openPackageCatalog">
+          Browse the Package Catalog
+        </UiButton>
+      </div>
+    </UiAnchor>
+    <div class="plugin-grid">
+      <article
+        v-for="item in filteredCatalog"
+        :key="item.packageId"
+        class="plugin-card"
+      >
+        <div class="plugin-summary">
+          <span class="plugin-logo" aria-hidden="true">
+            {{ item.displayName.slice(0, 1) }}
+          </span>
+          <span class="plugin-card-copy">
+            <strong>{{ item.displayName }}</strong>
+            <small>{{ capabilitySummary(item) }}</small>
+          </span>
+          <span
+            class="plugin-state"
+            :class="{ 'plugin-state--on': enabled(item.packageId) }"
+          >
+            {{ stateLabel(item.packageId) }}
+          </span>
+          <span class="plugin-actions">
+            <UiButton v-if="homeLabel(item)" @click="openHome(item)">
+              Set up in {{ homeLabel(item) }}
+            </UiButton>
+            <UiButton
+              v-if="!installed(item.packageId)"
+              variant="primary"
+              :disabled="busyPackageId === item.packageId"
+              @click="install(item)"
+            >
+              Add
+            </UiButton>
+            <UiButton
+              v-else-if="enabled(item.packageId)"
+              :disabled="busyPackageId === item.packageId"
+              @click="setEnabled(item.packageId, false)"
+            >
+              Disable
+            </UiButton>
+            <UiButton
+              v-else
+              variant="primary"
+              :disabled="busyPackageId === item.packageId"
+              @click="setEnabled(item.packageId, true)"
+            >
+              Enable
+            </UiButton>
+          </span>
+        </div>
+        <p v-if="failure(item.packageId)" class="plugin-failure" role="alert">
+          {{ failure(item.packageId) }}
+        </p>
+      </article>
+    </div>
+
+    <p
+      v-if="web.pluginCatalog.length === 0 && !web.settingsError"
+      class="plugin-empty"
+    >
+      This application ships no Packages.
+    </p>
+    <p v-else-if="filteredCatalog.length === 0" class="plugin-empty">
+      No Package matches that search.
+    </p>
+    <p v-if="web.settingsError" class="settings-error" role="alert">
+      {{ web.settingsError }}
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.plugins-surface {
+  padding: 24px;
+}
+
+.installed-strip {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 10px;
+  color: var(--frock-text-muted);
+  font-size: var(--frock-text-sm);
+  font-weight: 600;
+}
+
+.plugin-status-badge {
+  display: grid;
+  width: 18px;
+  height: 18px;
+  place-items: center;
+  border-radius: 999px;
+  color: var(--frock-on-accent);
+  background: var(--frock-success);
+}
+
+.plugin-anchor {
+  padding-right: var(--frock-control-sm);
+}
+
+.plugin-search {
+  display: flex;
+  height: 42px;
+  align-items: center;
+  gap: 9px;
+  padding: 0 13px;
+  border: 1px solid var(--frock-border);
+  border-radius: 999px;
+  color: var(--frock-text-subtle);
+  background: var(--frock-surface-raised);
+}
+
+.plugin-search:focus-within {
+  border-color: var(--frock-border-focus);
+  box-shadow: 0 0 0 3px var(--frock-focus-ring);
+}
+
+.plugin-search input {
+  min-width: 0;
+  flex: 1;
+  border: 0;
+  outline: 0;
+  background: transparent;
+}
+
+.plugin-intro,
+.plugin-empty {
+  margin: 14px 0 0;
+  color: var(--frock-text-muted);
+  font-size: var(--frock-text-base);
+}
+
+.plugin-catalog-link {
+  margin-top: 12px;
+}
+
+.plugin-grid {
+  display: grid;
+  gap: 12px;
+  margin-top: 18px;
+}
+
+.plugin-card {
+  min-width: 0;
+  padding: 8px;
+  border: 1px solid var(--frock-border);
+  border-radius: var(--frock-radius-card);
+  background: var(--frock-surface-raised);
+  box-shadow: var(--frock-shadow-card);
+  transition:
+    transform var(--frock-motion-fast),
+    box-shadow var(--frock-motion-fast);
+}
+
+.plugin-card:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--frock-shadow-control);
+}
+
+.plugin-summary {
+  display: grid;
+  width: 100%;
+  min-width: 0;
+  grid-template-columns: 44px minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: 12px;
+  padding: 8px;
+  border: 0;
+  border-radius: var(--frock-radius-control);
+  color: inherit;
+  background: transparent;
+  text-align: left;
+}
+
+.plugin-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;
+}
+
+.plugin-card-copy {
+  min-width: 0;
+}
+
+.plugin-card-copy strong,
+.plugin-card-copy small {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.plugin-card-copy strong {
+  font-size: var(--frock-text-md);
+  font-weight: 600;
+}
+
+.plugin-card-copy small {
+  margin-top: 4px;
+  color: var(--frock-text-muted);
+  font-size: var(--frock-text-sm);
+  text-transform: capitalize;
+}
+
+.plugin-state {
+  color: var(--frock-text-muted);
+  font-size: var(--frock-text-sm);
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.plugin-state--on {
+  color: var(--frock-success);
+}
+
+.plugin-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.plugin-actions :deep(.ui-button) {
+  min-height: 28px;
+  padding: 0 10px;
+  font-size: var(--frock-text-sm);
+}
+
+.plugin-failure {
+  margin: 0 8px 8px;
+  color: var(--frock-danger-text);
+  font-size: var(--frock-text-sm);
+}
+
+.settings-error {
+  color: var(--frock-danger-text);
+  font-size: var(--frock-text-sm);
+}
+</style>

package/src/client/PluginsTrigger.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { clientSurfaceRegistryKey } from "@frockbot/client-core";
+import { UiIcon } from "@frockbot/client-ui";
+import { frockBotWebDataKey } from "@frockbot/plugin-shell/shared";
+import { inject } from "vue";
+
+const surfaces = inject(clientSurfaceRegistryKey);
+const web = inject(frockBotWebDataKey);
+if (!surfaces || !web)
+  throw new Error("settings client services were not provided");
+</script>
+
+<template>
+  <button
+    v-if="web.connectionsAvailable"
+    class="settings-trigger"
+    type="button"
+    @click="surfaces.open('plugins')"
+  >
+    <span class="settings-trigger__icon"><UiIcon name="plugins" /></span>
+    Plugins
+  </button>
+</template>
+
+<style scoped>
+.settings-trigger {
+  display: flex;
+  width: 100%;
+  height: 40px;
+  align-items: center;
+  gap: 10px;
+  padding: 0 8px;
+  border-radius: var(--frock-radius-control);
+  color: var(--frock-text);
+  background: transparent;
+  font-size: var(--frock-text-md);
+  font-weight: 500;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color var(--frock-motion-fast);
+}
+
+.settings-trigger:hover {
+  background: var(--frock-fill-hover);
+}
+
+.settings-trigger:active {
+  background: var(--frock-fill-pressed);
+}
+
+.settings-trigger__icon {
+  display: grid;
+  width: var(--frock-avatar-sm);
+  height: var(--frock-avatar-sm);
+  flex: 0 0 auto;
+  place-items: center;
+  border-radius: 8px;
+  color: var(--frock-action-primary);
+  background: var(--frock-surface);
+  box-shadow: inset 0 0 0 1px var(--frock-border);
+}
+</style>