@frockbot/plugin-settings 0.0.0 → 0.1.0

package/src/client/UserProfileTrigger.vue

@@ -0,0 +1,223 @@
+<script setup lang="ts">
+import { clientSurfaceRegistryKey } from "@frockbot/client-core";
+import { authSessionClientKey } from "@frockbot/plugin-auth/shared";
+import { frockBotWebDataKey } from "@frockbot/plugin-shell/shared";
+import { computed, inject, onBeforeUnmount, onMounted, ref } from "vue";
+import { resolveUserDisplayName } from "./user-display-name.js";
+
+const providedAuth = inject(authSessionClientKey);
+const surfaces = inject(clientSurfaceRegistryKey);
+const web = inject(frockBotWebDataKey);
+if (!providedAuth || !surfaces || !web)
+  throw new Error("settings client services were not provided");
+const auth = providedAuth;
+const menuOpen = ref(false);
+const signOutError = ref<string>();
+const sessionUser = computed(() =>
+  auth.projection.value.status === "authenticated"
+    ? auth.projection.value.user
+    : undefined,
+);
+const displayName = computed(() =>
+  resolveUserDisplayName({
+    savedName: web.value.userSettings?.profile.name,
+    sessionName: sessionUser.value?.name,
+    sessionEmail: sessionUser.value?.email,
+  }),
+);
+const developmentIdentity = computed(
+  () =>
+    auth.projection.value.status === "authenticated" &&
+    auth.projection.value.mode === "development",
+);
+const isAdmin = computed(
+  () =>
+    auth.projection.value.status === "authenticated" &&
+    auth.projection.value.user.isAdmin,
+);
+
+function closeMenu(): void {
+  menuOpen.value = false;
+}
+
+function openSurface(id: string): void {
+  closeMenu();
+  surfaces?.open(id);
+}
+
+function openAdmin(): void {
+  closeMenu();
+  surfaces?.open("admin");
+}
+
+async function signOut(): Promise<void> {
+  signOutError.value = undefined;
+  try {
+    await auth.signOut();
+    closeMenu();
+  } catch (error) {
+    signOutError.value =
+      error instanceof Error ? error.message : "Could not sign out";
+  }
+}
+
+onMounted(() => window.addEventListener("pointerdown", closeMenu));
+onBeforeUnmount(() => window.removeEventListener("pointerdown", closeMenu));
+</script>
+
+<template>
+  <div class="profile-area" @pointerdown.stop>
+    <button
+      class="profile-trigger"
+      type="button"
+      :aria-expanded="menuOpen"
+      :title="sessionUser?.email"
+      aria-haspopup="menu"
+      @click="menuOpen = !menuOpen"
+    >
+      <span class="profile-face" aria-hidden="true" />
+      {{ displayName }}
+    </button>
+    <div v-if="menuOpen" class="profile-menu" role="menu">
+      <button v-if="isAdmin" type="button" role="menuitem" @click="openAdmin">
+        Admin
+      </button>
+      <button
+        type="button"
+        role="menuitem"
+        @click="openSurface('user-settings')"
+      >
+        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
+           without the Connection protocol shows none of them. -->
+      <template v-if="web.connectionsAvailable">
+        <button type="button" role="menuitem" @click="openSurface('models')">
+          Models
+        </button>
+        <button type="button" role="menuitem" @click="openSurface('plugins')">
+          Plugins
+        </button>
+        <button
+          type="button"
+          role="menuitem"
+          @click="openSurface('connections')"
+        >
+          Connections
+        </button>
+      </template>
+      <button v-if="developmentIdentity" type="button" role="menuitem" disabled>
+        Sign out unavailable
+      </button>
+      <button
+        v-else
+        type="button"
+        role="menuitem"
+        :disabled="auth.signingOut.value"
+        @click="signOut"
+      >
+        {{ 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.
+      </p>
+      <p v-if="signOutError" class="profile-menu-error" role="alert">
+        {{ signOutError }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.profile-area {
+  position: relative;
+}
+
+.profile-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);
+}
+
+.profile-trigger:hover,
+.profile-trigger[aria-expanded="true"] {
+  background: var(--frock-fill-hover);
+}
+
+.profile-trigger:active {
+  background: var(--frock-fill-pressed);
+}
+
+.profile-face {
+  width: var(--frock-avatar-sm);
+  height: var(--frock-avatar-sm);
+  flex: 0 0 auto;
+  border-radius: 50%;
+  background: linear-gradient(
+    135deg,
+    var(--frock-surface-accent),
+    var(--frock-action-primary)
+  );
+}
+
+.profile-menu {
+  position: absolute;
+  z-index: var(--frock-layer-menu);
+  right: 0;
+  bottom: 44px;
+  left: 0;
+  padding: 6px;
+  border: 1px solid var(--frock-border);
+  border-radius: var(--frock-radius-control);
+  background: var(--frock-surface-raised);
+  box-shadow: var(--frock-shadow-floating);
+  animation: frock-rise-in var(--frock-motion-fast) both;
+}
+
+.profile-menu button {
+  width: 100%;
+  padding: 8px 10px;
+  border-radius: 7px;
+  background: transparent;
+  font-size: var(--frock-text-base);
+  text-align: left;
+  cursor: pointer;
+  transition: background-color var(--frock-motion-fast);
+}
+
+.profile-menu button:hover:not(:disabled) {
+  background: var(--frock-fill-hover);
+}
+
+.profile-menu button:disabled {
+  color: var(--frock-text-muted);
+  cursor: not-allowed;
+}
+
+.profile-menu-hint,
+.profile-menu-error {
+  margin: 5px 10px;
+  font-size: var(--frock-text-xs);
+  line-height: var(--frock-leading-snug);
+}
+
+.profile-menu-hint {
+  color: var(--frock-text-muted);
+}
+
+.profile-menu-error {
+  color: var(--frock-danger-text);
+}
+</style>

package/src/client/UserSettingsSurface.vue

@@ -0,0 +1,242 @@
+<script setup lang="ts">
+import { clientSurfaceRegistryKey } from "@frockbot/client-core";
+import { UiAnchor, UiButton, UiField, UiIcon } from "@frockbot/client-ui";
+import { authSessionClientKey } from "@frockbot/plugin-auth/shared";
+import { frockBotWebDataKey } from "@frockbot/plugin-shell/shared";
+import { settingsLinkV1 } from "@frockbot/plugin-shell/settings-links";
+import { inject, onMounted, ref } from "vue";
+import PackageSettingsSection from "./PackageSettingsSection.vue";
+import { resolveUserDisplayName } from "./user-display-name.js";
+
+const providedSurfaces = inject(clientSurfaceRegistryKey);
+const providedAuth = inject(authSessionClientKey);
+const providedWeb = inject(frockBotWebDataKey);
+if (!providedSurfaces || !providedAuth || !providedWeb) {
+  throw new Error("settings client services were not provided");
+}
+const surfaces = providedSurfaces;
+const auth = providedAuth;
+const web = providedWeb;
+// Application settings rows are User-scoped, so their links name no Bot.
+const profileLink = settingsLinkV1({ anchor: "user-profile" });
+const packageSettingsLink = settingsLinkV1({ anchor: "user-package-settings" });
+const name = ref("");
+const email = ref("");
+const saving = ref(false);
+
+onMounted(async () => {
+  await web.value.loadPluginCatalog();
+  await web.value.loadUserSettings();
+  const settings = web.value.userSettings;
+  if (!settings) return;
+  const sessionUser =
+    auth.projection.value.status === "authenticated"
+      ? auth.projection.value.user
+      : undefined;
+  name.value = resolveUserDisplayName({
+    savedName: settings.profile.name,
+    sessionName: sessionUser?.name,
+    sessionEmail: sessionUser?.email,
+  });
+  email.value = settings.profile.email ?? sessionUser?.email ?? "";
+});
+
+async function save(): Promise<void> {
+  saving.value = true;
+  try {
+    await web.value.saveUserProfile({
+      name: name.value,
+      email: email.value || undefined,
+    });
+    surfaces?.close();
+  } catch (error) {
+    web.value.settingsError =
+      error instanceof Error ? error.message : "Could not save settings";
+  } finally {
+    saving.value = false;
+  }
+}
+</script>
+
+<template>
+  <form class="settings-form" @submit.prevent="save">
+    <UiAnchor
+      anchor="user-profile"
+      label="Your profile"
+      :href="profileLink"
+      class="settings-row"
+    >
+      <div class="profile-intro">
+        <span class="profile-face" aria-hidden="true" />
+        <div>
+          <strong>Your profile</strong>
+          <p>This identity is shared across your Bots.</p>
+        </div>
+      </div>
+      <UiField label="Name">
+        <input v-model="name" maxlength="100" required />
+      </UiField>
+      <UiField label="Email" hint="optional">
+        <input v-model="email" maxlength="320" type="email" />
+      </UiField>
+    </UiAnchor>
+    <UiAnchor
+      anchor="user-package-settings"
+      label="Package 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 Connections.
+      </p>
+      <PackageSettingsSection />
+    </UiAnchor>
+    <p v-if="web.settingsError" class="settings-error" role="alert">
+      {{ web.settingsError }}
+    </p>
+    <div class="settings-actions">
+      <UiButton type="submit" variant="primary" :disabled="saving">
+        {{ saving ? "Saving…" : "Save settings" }}
+      </UiButton>
+    </div>
+    <details class="advanced">
+      <summary>
+        <span>Advanced</span>
+        <span class="advanced__marker" aria-hidden="true"
+          ><UiIcon name="arrow-down" size="sm"
+        /></span>
+      </summary>
+      <div class="advanced__body">
+        <k-slot name="frockbot.user-settings-sections" />
+      </div>
+    </details>
+  </form>
+</template>
+
+<style scoped>
+.settings-row {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding-right: var(--frock-control-sm);
+}
+
+.settings-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+}
+
+.profile-intro {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  border: 1px solid var(--frock-border);
+  border-radius: var(--frock-radius-card);
+  background: var(--frock-surface-subtle);
+}
+
+.profile-face {
+  width: var(--frock-avatar-md);
+  height: var(--frock-avatar-md);
+  flex: 0 0 auto;
+  border-radius: 50%;
+  background: linear-gradient(
+    135deg,
+    var(--frock-surface-accent),
+    var(--frock-action-primary)
+  );
+}
+
+.profile-intro strong,
+.profile-intro p {
+  display: block;
+  margin: 0;
+}
+
+.profile-intro strong {
+  font-size: var(--frock-text-lg);
+  font-weight: 600;
+}
+
+.profile-intro p {
+  margin-top: 4px;
+  color: var(--frock-text-muted);
+  font-size: var(--frock-text-sm);
+}
+
+.field-hint {
+  margin: -8px 0 0;
+  color: var(--frock-text-muted);
+  font-size: var(--frock-text-sm);
+}
+
+.model-empty {
+  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);
+}
+
+.model-empty p {
+  margin: 0;
+  color: var(--frock-text-muted);
+  font-size: var(--frock-text-sm);
+}
+
+.settings-error {
+  margin: 0;
+  color: var(--frock-danger-text);
+  font-size: var(--frock-text-sm);
+}
+
+.settings-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.advanced {
+  border-top: 1px solid var(--frock-border);
+  padding-top: 12px;
+}
+
+.advanced summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  color: var(--frock-text-muted);
+  font-size: var(--frock-text-sm);
+  font-weight: 600;
+  list-style: none;
+  cursor: pointer;
+}
+
+.advanced summary::-webkit-details-marker {
+  display: none;
+}
+
+.advanced__marker {
+  display: grid;
+  place-items: center;
+  transition: transform var(--frock-motion-fast);
+}
+
+.advanced[open] .advanced__marker {
+  transform: rotate(180deg);
+}
+
+.advanced__body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-top: 12px;
+}
+</style>

package/src/client/assignment-operations.ts

@@ -0,0 +1,22 @@
+import type {
+  BotSettingsViewV1,
+  CapabilityAssignmentOperationViewV1,
+} from "@frockbot/configuration-core";
+
+/** Projects every durable Assignment operation without requiring catalog state. */
+export function projectAssignmentOperations(
+  settings: Pick<BotSettingsViewV1, "assignmentOperations"> | undefined,
+): CapabilityAssignmentOperationViewV1[] {
+  return (settings?.assignmentOperations ?? []).map((operation) =>
+    structuredClone(operation),
+  );
+}
+
+export function assignmentHasPendingOperation(
+  operations: readonly CapabilityAssignmentOperationViewV1[],
+  assignmentId: string,
+): boolean {
+  return operations.some(
+    (operation) => operation.assignmentId === assignmentId,
+  );
+}

package/src/client/bot-settings.test.ts

@@ -0,0 +1,218 @@
+import { describe, expect, test } from "bun:test";
+import {
+  decodeModelSelection,
+  describeModelAssignment,
+  encodeModelSelection,
+  eligibleModelConnections,
+  isModelConnectionEligible,
+  modelSelectOptions,
+  resolveBotSettingsModel,
+} from "./bot-settings.js";
+
+describe("Bot settings model selection", () => {
+  test("excludes model Connections owned by disabled Packages", () => {
+    const connection = {
+      connectionId: "ollama-1",
+      packageId: "provider-ollama-cloud",
+      connectionTypeId: "ollama-cloud-account",
+      displayName: "Work",
+      state: "ready" as const,
+      providerType: "ollama-cloud",
+      generation: "generation-1",
+      safeMetadata: {},
+    };
+    const catalog = [
+      {
+        packageId: "provider-ollama-cloud",
+        displayName: "Ollama Cloud",
+        version: "0.0.1",
+        capabilities: [
+          {
+            id: "ollama-cloud-models",
+            kind: "model" as const,
+            connectionTypes: ["ollama-cloud-account"],
+          },
+        ],
+        connectionTypes: [
+          {
+            id: "ollama-cloud-account",
+            displayName: "Ollama Cloud account",
+            allowMultiple: true,
+            authorizationKind: "api-key" as const,
+            capabilities: ["ollama-cloud-models"],
+          },
+        ],
+      },
+    ];
+
+    expect(
+      isModelConnectionEligible({
+        connection,
+        packages: [
+          {
+            packageId: "provider-ollama-cloud",
+            version: "0.0.1",
+            state: "disabled",
+          },
+        ],
+        catalog,
+      }),
+    ).toBe(false);
+    expect(
+      isModelConnectionEligible({
+        connection,
+        packages: [
+          {
+            packageId: "provider-ollama-cloud",
+            version: "0.0.1",
+            state: "installed",
+          },
+        ],
+        catalog,
+      }),
+    ).toBe(true);
+  });
+
+  test("preserves a model-less Bot while unrelated settings save", () => {
+    expect(
+      resolveBotSettingsModel({
+        useExactModel: false,
+        selectedModel: "",
+        exactConnectionId: "",
+        exactProviderModelId: "",
+      }),
+    ).toBeUndefined();
+  });
+
+  test("rejects malformed model selections before settings mutate", () => {
+    expect(() =>
+      resolveBotSettingsModel({
+        useExactModel: false,
+        selectedModel: "not-json",
+        exactConnectionId: "",
+        exactProviderModelId: "",
+      }),
+    ).toThrow("A Connection and model ID are required");
+  });
+
+  test("preserves an existing binding without a new selection", () => {
+    expect(
+      resolveBotSettingsModel({
+        current: {
+          connectionId: "ollama-1",
+          providerModelId: "glm:cloud",
+        },
+        useExactModel: false,
+        selectedModel: "",
+        exactConnectionId: "",
+        exactProviderModelId: "",
+      }),
+    ).toEqual({
+      connectionId: "ollama-1",
+      providerModelId: "glm:cloud",
+    });
+  });
+});
+
+describe("shared model option building", () => {
+  const catalog = [
+    {
+      packageId: "provider-ollama-cloud",
+      displayName: "Ollama Cloud",
+      version: "0.0.1",
+      capabilities: [
+        {
+          id: "ollama-cloud-models",
+          kind: "model" as const,
+          connectionTypes: ["ollama-cloud-account"],
+        },
+      ],
+      connectionTypes: [
+        {
+          id: "ollama-cloud-account",
+          displayName: "Ollama Cloud account",
+          allowMultiple: true,
+          authorizationKind: "api-key" as const,
+          capabilities: ["ollama-cloud-models"],
+        },
+      ],
+    },
+  ];
+  const packages = [
+    {
+      packageId: "provider-ollama-cloud",
+      version: "0.0.1",
+      state: "installed" as const,
+    },
+  ];
+  const connections = [
+    {
+      connectionId: "ollama-1",
+      packageId: "provider-ollama-cloud",
+      connectionTypeId: "ollama-cloud-account",
+      displayName: "Work",
+      state: "ready" as const,
+      providerType: "ollama-cloud",
+      modelCatalog: {
+        schemaVersion: 1 as const,
+        generation: "catalog-1",
+        state: "fresh" as const,
+        models: [
+          {
+            providerModelId: "llama-3:cloud",
+            displayName: "Llama 3",
+            capabilities: { tools: true, vision: false, reasoning: false },
+            source: "discovered" as const,
+          },
+        ],
+      },
+      safeMetadata: {},
+    },
+    {
+      connectionId: "ollama-2",
+      packageId: "provider-ollama-cloud",
+      connectionTypeId: "ollama-cloud-account",
+      displayName: "Revoked",
+      state: "revoked" as const,
+      safeMetadata: {},
+    },
+  ];
+
+  test("offers one option per advertised model of an eligible Connection", () => {
+    const eligible = eligibleModelConnections({
+      connections,
+      packages,
+      catalog,
+    });
+    expect(eligible.map((connection) => connection.connectionId)).toEqual([
+      "ollama-1",
+    ]);
+    expect(modelSelectOptions(eligible)).toEqual([
+      {
+        value: JSON.stringify(["ollama-1", "llama-3:cloud"]),
+        label: "Llama 3 — Work",
+      },
+    ]);
+  });
+
+  test("round-trips a selection and names it for prose", () => {
+    const model = {
+      connectionId: "ollama-1",
+      providerModelId: "llama-3:cloud",
+    };
+    expect(decodeModelSelection(encodeModelSelection(model))).toEqual(model);
+    expect(encodeModelSelection(undefined)).toBe("");
+    expect(decodeModelSelection("")).toBeUndefined();
+    expect(() => decodeModelSelection("not-json")).toThrow(
+      "A Connection and model ID are required",
+    );
+    expect(describeModelAssignment(model, connections)).toBe("Llama 3 — Work");
+    expect(
+      describeModelAssignment(
+        { connectionId: "ollama-1", providerModelId: "custom:cloud" },
+        connections,
+      ),
+    ).toBe("custom:cloud — Work");
+    expect(describeModelAssignment(undefined, connections)).toBeUndefined();
+  });
+});