@frockbot/plugin-settings 0.1.3 → 0.1.4

package/src/client/BotSettingsSurface.vue

@@ -13,24 +13,12 @@ import { settingsLinkV1 } from "@frockbot/plugin-shell/settings-links";
 import {
   computed,
   inject,
+  nextTick,
   onBeforeUnmount,
   onMounted,
-  reactive,
   ref,
-  nextTick,
   watch,
 } from "vue";
-import {
-  assignmentHasPendingOperation,
-  projectAssignmentOperations,
-} from "./assignment-operations.js";
-import {
-  describeModelAssignment,
-  eligibleModelConnections,
-  encodeModelSelection,
-  modelSelectOptions,
-  resolveBotSettingsModel,
-} from "./bot-settings.js";
 
 const providedSurfaces = inject(clientSurfaceRegistryKey);
 const providedWeb = inject(frockBotWebDataKey);
@@ -40,26 +28,13 @@ if (!providedSurfaces || !providedWeb) {
 const surfaces = providedSurfaces;
 const web = providedWeb;
 
-/*
- * Every row below is deep-linkable. The scheme and the anchor table live in
- * `@frockbot/plugin-shell/settings-links`, so a Bot citing a row and the panel
- * rendering it read the same list — a link nobody registered does not resolve,
- * and a row nobody linked has no link to copy.
- */
 function link(anchor: string): string {
   return settingsLinkV1({ anchor, botId: web.value.activeBotId });
 }
 
-/*
- * Model and Assignments live under the Advanced disclosure, and a collapsed
- * `details` cannot be scrolled to. A link into either opens it first; the User
- * can still close it, and the `toggle` handler keeps their choice.
- */
 const ADVANCED_ANCHORS = new Set([
   "bot-title",
   "bot-hidden-from-sidebar",
-  "bot-model",
-  "bot-capabilities",
   "bot-routines",
   "bot-audit",
   "bot-info-identity",
@@ -85,15 +60,11 @@ const description = ref("");
 const title = ref("");
 const hiddenFromSidebar = ref(false);
 const notifications = ref(false);
-/**
- * The Bot's undecided approval cards. Read from the same backend state the
- * conversation renders, so the two surfaces cannot disagree about what is
- * still waiting.
- */
 const pendingApprovals = computed(() =>
   web.value.approvals.filter((approval) => approval.decision === "pending"),
 );
 const decidingApproval = ref<string>();
+const saving = ref(false);
 
 async function decideApproval(
   approvalId: string,
@@ -106,91 +77,6 @@ async function decideApproval(
     decidingApproval.value = undefined;
   }
 }
-const saving = ref(false);
-const modelMode = ref<"default" | "custom">("default");
-const assignmentBusy = ref<string>();
-const selectedConnections = reactive<Record<string, string>>({});
-
-const capabilityItems = computed(() =>
-  web.value.pluginCatalog.flatMap((pkg) =>
-    web.value.userSettings?.packages.some(
-      (installation) =>
-        installation.packageId === pkg.packageId &&
-        installation.version === pkg.version &&
-        installation.state === "installed",
-    )
-      ? pkg.capabilities.map((capability) => {
-          const existing = web.value.botSettings?.assignments.find(
-            (assignment) =>
-              assignment.packageId === pkg.packageId &&
-              assignment.capabilityId === capability.id,
-          );
-          const pending = web.value.botSettings?.assignmentOperations.find(
-            (operation) =>
-              operation.assignmentId === existing?.assignmentId ||
-              (operation.target?.packageId === pkg.packageId &&
-                operation.target.capabilityId === capability.id),
-          );
-          const connections =
-            web.value.userSettings?.connections.filter(
-              (connection) =>
-                connection.packageId === pkg.packageId &&
-                connection.state === "ready" &&
-                capability.connectionTypes.includes(
-                  connection.connectionTypeId,
-                ),
-            ) ?? [];
-          const key = `${pkg.packageId}:${capability.id}`;
-          if (!(key in selectedConnections) && existing?.connectionId) {
-            selectedConnections[key] = existing.connectionId;
-          }
-          return { key, pkg, capability, existing, pending, connections };
-        })
-      : [],
-  ),
-);
-
-const assignmentOperations = computed(() =>
-  projectAssignmentOperations(web.value.botSettings),
-);
-
-const orphanAssignments = computed(
-  () =>
-    web.value.botSettings?.assignments.filter(
-      (assignment) =>
-        !capabilityItems.value.some(
-          (item) => item.existing?.assignmentId === assignment.assignmentId,
-        ),
-    ) ?? [],
-);
-
-function assignmentOperationPending(assignmentId: string): boolean {
-  return assignmentHasPendingOperation(
-    assignmentOperations.value,
-    assignmentId,
-  );
-}
-
-const selectedModel = ref("");
-const useExactModel = ref(false);
-const exactConnectionId = ref("");
-const exactProviderModelId = ref("");
-const readyConnections = computed(() =>
-  eligibleModelConnections({
-    connections: web.value.userSettings?.connections ?? [],
-    packages: web.value.userSettings?.packages ?? [],
-    catalog: web.value.pluginCatalog,
-  }),
-);
-const modelOptions = computed(() => modelSelectOptions(readyConnections.value));
-const defaultModelName = computed(
-  () =>
-    describeModelAssignment(
-      web.value.userSettings?.newBotModelTemplate,
-      web.value.userSettings?.connections ?? [],
-    ) ?? "none set",
-);
-const overriding = computed(() => Boolean(web.value.botSettings?.model));
 
 onMounted(() => {
   window.addEventListener(UI_ANCHOR_EVENT, onAnchorAnnounced);
@@ -200,13 +86,6 @@ onMounted(() => {
   void web.value.loadUserSettings();
 });
 
-/*
- * The form fills itself from whichever Bot's durable settings arrive, rather
- * than from whatever had loaded by the time this panel mounted. A deep link
- * opens the panel before the Flock has selected a Bot, and a User can switch
- * Bots with the panel open; both used to leave the fields on screen belonging
- * to nobody.
- */
 const hydratedBotId = ref<string>();
 
 watch(
@@ -220,53 +99,17 @@ watch(
     title.value = settings.profile.title ?? "";
     hiddenFromSidebar.value = settings.profile.hiddenFromSidebar === true;
     notifications.value = settings.notifications.enabled;
-    modelMode.value = settings.model ? "custom" : "default";
-    selectedModel.value = encodeModelSelection(settings.model);
-    exactConnectionId.value =
-      settings.model?.connectionId ??
-      readyConnections.value[0]?.connectionId ??
-      "";
-    exactProviderModelId.value = settings.model?.providerModelId ?? "";
-    useExactModel.value = Boolean(
-      settings.model &&
-      !modelOptions.value.some((model) => model.value === selectedModel.value),
-    );
   },
   { immediate: true },
 );
 
-// The Connections may land after the Bot did; an empty exact-model Connection
-// takes the first ready one the moment there is one.
-watch(readyConnections, (connections) => {
-  if (!exactConnectionId.value && connections[0]) {
-    exactConnectionId.value = connections[0].connectionId;
-  }
-});
-
 onBeforeUnmount(() =>
   window.removeEventListener(UI_ANCHOR_EVENT, onAnchorAnnounced),
 );
 
-async function saveModel(): Promise<void> {
-  if (modelMode.value === "default") {
-    // Following the default means holding no Bot binding at all.
-    if (web.value.botSettings?.model) await web.value.clearBotModel();
-    return;
-  }
-  const selected = resolveBotSettingsModel({
-    current: web.value.botSettings?.model,
-    useExactModel: useExactModel.value,
-    selectedModel: selectedModel.value,
-    exactConnectionId: exactConnectionId.value,
-    exactProviderModelId: exactProviderModelId.value,
-  });
-  if (selected) await web.value.saveBotModel(selected);
-}
-
 async function save(): Promise<void> {
   saving.value = true;
   try {
-    // A partial update: the empty string clears an optional field.
     await web.value.setBotProfile({
       name: name.value,
       label: label.value,
@@ -274,7 +117,6 @@ async function save(): Promise<void> {
       title: title.value,
       hiddenFromSidebar: hiddenFromSidebar.value,
     });
-    await saveModel();
     await web.value.saveBotNotifications({ enabled: notifications.value });
     surfaces.close();
   } catch (error) {
@@ -284,70 +126,6 @@ async function save(): Promise<void> {
     saving.value = false;
   }
 }
-
-async function assign(
-  item: (typeof capabilityItems.value)[number],
-): Promise<void> {
-  assignmentBusy.value = item.key;
-  try {
-    await web.value.assignCapability({
-      assignmentId: crypto.randomUUID(),
-      packageId: item.pkg.packageId,
-      capabilityId: item.capability.id,
-      connectionId: selectedConnections[item.key] || undefined,
-    });
-  } catch (error) {
-    web.value.settingsError =
-      error instanceof Error ? error.message : "Could not assign Capability";
-    await web.value.loadBotSettings();
-  } finally {
-    assignmentBusy.value = undefined;
-  }
-}
-
-async function replace(
-  item: (typeof capabilityItems.value)[number],
-): Promise<void> {
-  if (!item.existing) return;
-  assignmentBusy.value = item.key;
-  try {
-    await web.value.replaceCapability({
-      assignmentId: item.existing.assignmentId,
-      packageId: item.pkg.packageId,
-      capabilityId: item.capability.id,
-      connectionId: selectedConnections[item.key] || undefined,
-    });
-  } catch (error) {
-    web.value.settingsError =
-      error instanceof Error ? error.message : "Could not replace Assignment";
-    await web.value.loadBotSettings();
-  } finally {
-    assignmentBusy.value = undefined;
-  }
-}
-
-async function unassignAssignment(
-  assignmentId: string,
-  key: string,
-): Promise<void> {
-  assignmentBusy.value = key;
-  try {
-    await web.value.unassignCapability(assignmentId);
-  } catch (error) {
-    web.value.settingsError =
-      error instanceof Error ? error.message : "Could not unassign Capability";
-    await web.value.loadBotSettings();
-  } finally {
-    assignmentBusy.value = undefined;
-  }
-}
-
-async function unassign(
-  item: (typeof capabilityItems.value)[number],
-): Promise<void> {
-  if (!item.existing) return;
-  await unassignAssignment(item.existing.assignmentId, item.key);
-}
 </script>
 
 <template>
@@ -410,12 +188,6 @@ async function unassign(
         </label>
       </UiAnchor>
     </div>
-    <!--
-      Pending decisions. The card in the conversation is where a decision is
-      normally answered; this is where the ones nobody scrolled back to are
-      still findable, because "a request for more authority becomes a durable
-      pending decision for the User" is only true if the User can find it.
-    -->
     <UiAnchor
       v-if="pendingApprovals.length > 0"
       anchor="bot-approvals"
@@ -496,9 +268,7 @@ async function unassign(
             <strong>Identity</strong>
             <p>{{ name || "This Bot" }} · Bot {{ web.activeBotId }}</p>
           </div>
-          <span>
-            Named by {{ web.botSettings?.profile.namedBy ?? "user" }}
-          </span>
+          <span>Named by {{ web.botSettings?.profile.namedBy ?? "user" }}</span>
         </UiAnchor>
         <UiAnchor
           anchor="bot-info-members"
@@ -508,214 +278,9 @@ async function unassign(
         >
           <div>
             <strong>Members</strong>
-            <p>This Bot and the authority explicitly assigned to it.</p>
+            <p>This Bot uses what you enable for all of your Bots.</p>
           </div>
-          <span>
-            {{ web.botSettings?.assignments.length ?? 0 }} Capability
-            Assignment(s)
-          </span>
-        </UiAnchor>
-        <p v-if="overriding" class="model-note">Overrides default model</p>
-        <UiAnchor
-          anchor="bot-model"
-          label="Model"
-          :href="link('bot-model')"
-          class="settings-row"
-        >
-          <fieldset class="model-mode">
-            <legend>Model</legend>
-            <label>
-              <input v-model="modelMode" type="radio" value="default" />
-              <span>Use default model ({{ defaultModelName }})</span>
-            </label>
-            <label>
-              <input v-model="modelMode" type="radio" value="custom" />
-              <span>Custom model</span>
-            </label>
-          </fieldset>
-        </UiAnchor>
-        <template v-if="modelMode === 'custom'">
-          <label class="exact-model-setting">
-            <span>
-              <strong>Use exact model ID</strong>
-              <small>Choose a model not listed in the advisory catalog.</small>
-            </span>
-            <input v-model="useExactModel" type="checkbox" />
-          </label>
-          <template v-if="useExactModel">
-            <UiField label="Connection">
-              <select v-model="exactConnectionId">
-                <option disabled value="">Select a Connection</option>
-                <option
-                  v-for="connection in readyConnections"
-                  :key="connection.connectionId"
-                  :value="connection.connectionId"
-                >
-                  {{ connection.displayName }}
-                </option>
-              </select>
-            </UiField>
-            <UiField label="Exact provider model ID">
-              <input
-                v-model="exactProviderModelId"
-                maxlength="256"
-                placeholder="model-name:cloud"
-              />
-            </UiField>
-          </template>
-          <UiField v-else label="Model">
-            <select v-model="selectedModel">
-              <option disabled value="">Select a connected model</option>
-              <option
-                v-for="model in modelOptions"
-                :key="model.value"
-                :value="model.value"
-              >
-                {{ model.label }}
-              </option>
-            </select>
-          </UiField>
-        </template>
-        <UiAnchor
-          anchor="bot-capabilities"
-          label="Capability Assignments"
-          :href="link('bot-capabilities')"
-          class="settings-row"
-        >
-          <section class="assignment-settings">
-            <div>
-              <strong>Capability Assignments</strong>
-              <p>
-                Grant this Bot an installed Capability and required Connection.
-              </p>
-            </div>
-            <article
-              v-for="item in capabilityItems"
-              :key="item.key"
-              class="assignment-card"
-            >
-              <div>
-                <strong
-                  >{{ item.pkg.displayName }} · {{ item.capability.id }}</strong
-                >
-                <small v-if="item.pending">
-                  {{ item.pending.kind }} · {{ item.pending.state }}
-                </small>
-                <small v-else-if="item.existing">
-                  {{ item.existing.state }}
-                </small>
-                <small v-else>Not assigned</small>
-              </div>
-              <select
-                v-if="item.capability.connectionTypes.length > 0"
-                v-model="selectedConnections[item.key]"
-                :disabled="Boolean(item.pending)"
-                :aria-label="`Connection for ${item.capability.id}`"
-              >
-                <option value="">Choose a ready Connection</option>
-                <option
-                  v-for="connection in item.connections"
-                  :key="connection.connectionId"
-                  :value="connection.connectionId"
-                >
-                  {{ connection.displayName }}
-                </option>
-              </select>
-              <div class="assignment-actions">
-                <UiButton
-                  v-if="!item.existing"
-                  type="button"
-                  :disabled="
-                    Boolean(item.pending) ||
-                    assignmentBusy === item.key ||
-                    (item.capability.connectionTypes.length > 0 &&
-                      !selectedConnections[item.key])
-                  "
-                  @click="assign(item)"
-                >
-                  Assign
-                </UiButton>
-                <template v-else>
-                  <UiButton
-                    type="button"
-                    :disabled="
-                      Boolean(item.pending) || assignmentBusy === item.key
-                    "
-                    @click="replace(item)"
-                  >
-                    Replace
-                  </UiButton>
-                  <UiButton
-                    type="button"
-                    variant="danger"
-                    :disabled="
-                      Boolean(item.pending) || assignmentBusy === item.key
-                    "
-                    @click="unassign(item)"
-                  >
-                    Unassign
-                  </UiButton>
-                </template>
-              </div>
-            </article>
-            <article
-              v-for="operation in assignmentOperations"
-              :key="`operation:${operation.commandId}`"
-              class="assignment-card"
-              data-assignment-operation
-            >
-              <div>
-                <strong>
-                  {{ operation.target?.packageId ?? "Unavailable Package" }} ·
-                  {{ operation.target?.capabilityId ?? operation.assignmentId }}
-                </strong>
-                <small>{{ operation.kind }} · {{ operation.state }}</small>
-              </div>
-            </article>
-            <article
-              v-for="assignment in orphanAssignments"
-              :key="assignment.assignmentId"
-              class="assignment-card"
-            >
-              <div>
-                <strong
-                  >{{ assignment.packageId }} ·
-                  {{ assignment.capabilityId }}</strong
-                >
-                <small
-                  >{{ assignment.state }} · no longer available in the
-                  catalog</small
-                >
-              </div>
-              <div class="assignment-actions">
-                <UiButton
-                  type="button"
-                  variant="danger"
-                  :disabled="
-                    assignmentBusy === assignment.assignmentId ||
-                    assignmentOperationPending(assignment.assignmentId)
-                  "
-                  @click="
-                    unassignAssignment(
-                      assignment.assignmentId,
-                      assignment.assignmentId,
-                    )
-                  "
-                >
-                  Unassign
-                </UiButton>
-              </div>
-            </article>
-            <p
-              v-if="
-                capabilityItems.length === 0 && orphanAssignments.length === 0
-              "
-              class="assignment-empty"
-            >
-              No assignable Capabilities are available in the production
-              catalog.
-            </p>
-          </section>
+          <span>Packages and Connections are shared</span>
         </UiAnchor>
         <k-slot name="frockbot.bot-settings-sections" />
       </div>
@@ -735,10 +300,6 @@ async function unassign(
 </template>
 
 <style scoped>
-/*
- * A deep-linkable row. The anchor floats its copy control in the top-right
- * corner, so every row keeps that corner clear.
- */
 .settings-row {
   display: flex;
   flex-direction: column;
@@ -753,7 +314,6 @@ async function unassign(
   padding: 16px;
 }
 
-.assignment-card,
 .notification-setting,
 .bot-members {
   border: 1px solid var(--frock-border);
@@ -769,19 +329,6 @@ async function unassign(
   padding-right: 0;
 }
 
-.assignment-settings p,
-.assignment-card small {
-  margin-top: 4px;
-  color: var(--frock-text-muted);
-  font-size: var(--frock-text-sm);
-  line-height: var(--frock-leading-normal);
-}
-
-.assignment-settings {
-  display: grid;
-  gap: 10px;
-}
-
 .bot-members {
   display: flex;
   align-items: center;
@@ -809,91 +356,35 @@ async function unassign(
 }
 
 .bot-members > span {
-  max-width: 110px;
+  max-width: 120px;
   flex: 0 0 auto;
   text-align: right;
 }
 
-.assignment-settings strong {
-  font-size: var(--frock-text-md);
-  font-weight: 600;
-}
-
-.assignment-card {
-  display: grid;
-  gap: 8px;
-  padding: 12px;
-}
-
-.assignment-card strong {
-  font-size: var(--frock-text-md);
-  font-weight: 600;
-  overflow-wrap: anywhere;
-}
-
-.assignment-card small {
-  display: block;
-}
-
-.assignment-card select {
-  width: 100%;
-}
-
-.assignment-actions {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: 8px;
-}
-
-/* The right panel is ~360px wide, so Assignment controls stay compact. */
-.assignment-actions :deep(.ui-button) {
-  min-height: 30px;
-  padding: 0 10px;
-  font-size: var(--frock-text-sm);
-}
-
-.assignment-empty {
-  padding: 12px;
-  color: var(--frock-text-muted);
-  font-size: var(--frock-text-sm);
-  border: 1px dashed var(--frock-border);
-  border-radius: var(--frock-radius-card);
-}
-
-.exact-model-setting,
 .notification-setting {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   padding: 12px;
-  border: 1px solid var(--frock-border);
-  border-radius: var(--frock-radius-card);
-  background: var(--frock-surface-subtle);
 }
 
-.exact-model-setting strong,
-.exact-model-setting small,
 .notification-setting strong,
 .notification-setting small {
   display: block;
 }
 
-.notification-setting strong,
-.exact-model-setting strong {
+.notification-setting strong {
   font-size: var(--frock-text-md);
   font-weight: 600;
 }
 
-.exact-model-setting small,
 .notification-setting small {
   margin-top: 4px;
   color: var(--frock-text-muted);
   font-size: var(--frock-text-sm);
 }
 
-.exact-model-setting input[type="checkbox"],
 .notification-setting input[type="checkbox"] {
   position: relative;
   width: 38px;
@@ -907,7 +398,6 @@ async function unassign(
   transition: background-color var(--frock-motion-fast);
 }
 
-.exact-model-setting input[type="checkbox"]::before,
 .notification-setting input[type="checkbox"]::before {
   position: absolute;
   top: 2px;
@@ -921,18 +411,15 @@ async function unassign(
   transition: transform var(--frock-motion-fast);
 }
 
-.exact-model-setting input[type="checkbox"]:checked,
 .notification-setting input[type="checkbox"]:checked {
   border-color: var(--frock-action-primary);
   background: var(--frock-action-primary);
 }
 
-.exact-model-setting input[type="checkbox"]:checked::before,
 .notification-setting input[type="checkbox"]:checked::before {
   transform: translateX(16px);
 }
 
-.exact-model-setting input[type="checkbox"]:focus-visible,
 .notification-setting input[type="checkbox"]:focus-visible {
   outline: 2px solid var(--frock-focus-ring);
   outline-offset: 2px;
@@ -978,12 +465,24 @@ async function unassign(
   gap: 0.5rem;
 }
 
-.model-note {
+.primary-contributions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.settings-error {
   margin: 0;
-  color: var(--frock-text-muted);
+  color: var(--frock-danger-text);
   font-size: var(--frock-text-sm);
 }
 
+.settings-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
 .advanced {
   border-top: 1px solid var(--frock-border);
   padding-top: 12px;
@@ -1018,59 +517,7 @@ async function unassign(
 .advanced__body {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 16px;
   padding-top: 12px;
 }
-
-.model-mode {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  margin: 0;
-  border: 0;
-  padding: 0;
-}
-
-.model-mode legend {
-  float: left;
-  width: 100%;
-  margin-bottom: 4px;
-  padding: 0;
-  color: var(--frock-text);
-  font-size: var(--frock-text-md);
-  font-weight: 600;
-}
-
-.model-mode label {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: var(--frock-text);
-  font-size: var(--frock-text-md);
-  cursor: pointer;
-}
-
-.model-mode input {
-  width: 17px;
-  height: 17px;
-  flex: 0 0 auto;
-  accent-color: var(--frock-action-primary);
-}
-
-.settings-error {
-  margin: 0;
-  color: var(--frock-danger-text);
-  font-size: var(--frock-text-sm);
-}
-
-.settings-actions {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.primary-contributions {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
 </style>