@frockbot/plugin-bot-template 0.0.0 → 0.1.0

package/src/client/BotTemplateImportSection.vue

@@ -0,0 +1,325 @@
+<script setup lang="ts">
+// Importing a Bot from a shared template.
+//
+// The review card is the whole point of this surface. A template is prose from
+// a stranger, and it names Packages, Skills and Routines that are about to
+// become durable state in this User's account — so it is shown as four honest
+// sections before anything happens, and `Create the Bot` is the only control
+// that writes. Planning is a read; the record stays `planned` until it is
+// pressed.
+//
+// What the card never offers is a way to connect anything. An import creates no
+// Connection and no Assignment, so "Needs your own Connection" is a list of
+// things the User must go and do themselves, not a checkbox.
+import { UiButton, UiField, UiIcon } from "@frockbot/client-ui";
+import { computed, inject, ref } from "vue";
+import { botTemplateStateKey } from "./state.js";
+
+const providedState = inject(botTemplateStateKey);
+if (!providedState) {
+  throw new Error("Bot template client services were not provided");
+}
+const templates = providedState;
+const shareLink = ref("");
+
+const review = computed(() => templates.value.reviewing);
+
+const willInstall = computed(() =>
+  (review.value?.packages ?? []).filter(
+    (entry) => entry.status === "will-install",
+  ),
+);
+const alreadyInstalled = computed(() =>
+  (review.value?.packages ?? []).filter(
+    (entry) => entry.status === "already-installed",
+  ),
+);
+const missing = computed(() =>
+  (review.value?.packages ?? []).filter((entry) => entry.status === "missing"),
+);
+
+const failedStep = computed(() =>
+  review.value?.steps.find((step) => step.status === "failed"),
+);
+
+/**
+ * A pasted link carries the share id in its last path segment. Anything else is
+ * handed over untouched, so a bare share id works too.
+ */
+function shareIdFrom(value: string): string {
+  const trimmed = value.trim();
+  if (!trimmed) return "";
+  const url = URL.parse(trimmed);
+  if (!url) return trimmed;
+  const last = url.pathname.split("/").filter(Boolean).at(-1);
+  return last ? decodeURIComponent(last) : trimmed;
+}
+
+async function plan(): Promise<void> {
+  const shareId = shareIdFrom(shareLink.value);
+  if (!shareId) return;
+  await templates.value.planImport(shareId);
+}
+</script>
+
+<template>
+  <section class="import">
+    <header class="import__header">
+      <span class="import__icon" aria-hidden="true"
+        ><UiIcon name="plus"
+      /></span>
+      <span class="import__intro">
+        <strong>Import a Bot template</strong>
+        <small>
+          Paste a template link to see exactly what it would create before
+          anything happens. Importing never brings across Memory, credentials,
+          Connections or Assignments.
+        </small>
+      </span>
+    </header>
+
+    <p v-if="templates.importError" class="import__error" role="alert">
+      {{ templates.importError }}
+    </p>
+
+    <div v-if="!review" class="import__form">
+      <UiField label="Template link">
+        <input
+          v-model="shareLink"
+          maxlength="500"
+          placeholder="https://…/templates/v1/…"
+        />
+      </UiField>
+      <UiButton
+        type="button"
+        :disabled="templates.busy || !shareLink.trim()"
+        @click="plan"
+      >
+        {{ templates.busy ? "Reading…" : "Review the template" }}
+      </UiButton>
+    </div>
+
+    <article v-else class="review">
+      <div class="review__head">
+        <span class="review__text">
+          <strong>{{ review.botName }}</strong>
+          <small>
+            {{
+              review.status === "planned"
+                ? "Nothing has been created yet."
+                : `Import ${review.status}.`
+            }}
+          </small>
+        </span>
+      </div>
+
+      <section class="review__section">
+        <h4>Will create</h4>
+        <ul>
+          <li>The Bot “{{ review.botName }}”</li>
+          <li v-if="review.skills.length > 0">
+            {{ review.skills.length }} Skill(s):
+            {{ review.skills.join(", ") }}
+          </li>
+          <li v-for="routine in review.routines" :key="routine.slug">
+            Routine “{{ routine.slug }}”{{
+              routine.disabled ? " — created paused, with no webhook key" : ""
+            }}
+          </li>
+        </ul>
+      </section>
+
+      <section v-if="willInstall.length > 0" class="review__section">
+        <h4>Will install</h4>
+        <ul>
+          <li v-for="entry in willInstall" :key="entry.catalogId">
+            {{ entry.displayName }} ({{ entry.version }})
+          </li>
+        </ul>
+      </section>
+
+      <section v-if="alreadyInstalled.length > 0" class="review__section">
+        <h4>Already installed</h4>
+        <ul>
+          <li v-for="entry in alreadyInstalled" :key="entry.catalogId">
+            {{ entry.displayName }}
+          </li>
+        </ul>
+      </section>
+
+      <section v-if="missing.length > 0" class="review__section">
+        <h4>Missing from your catalog</h4>
+        <ul>
+          <li v-for="entry in missing" :key="entry.catalogId">
+            {{ entry.displayName }} — not in the Catalog generation you are
+            pinned to, so it will be skipped.
+          </li>
+        </ul>
+      </section>
+
+      <section v-if="review.connections.length > 0" class="review__section">
+        <h4>Needs your own Connection</h4>
+        <ul>
+          <li v-for="entry in review.connections" :key="entry.name">
+            {{ entry.name
+            }}<template v-if="entry.url"> — {{ entry.url }}</template>
+            <small v-if="entry.hint"> {{ entry.hint }}</small>
+          </li>
+        </ul>
+        <p class="import__note">
+          None of these is created for you. Add each one yourself, then assign
+          it to the Bot.
+        </p>
+      </section>
+
+      <p v-if="review.failure" class="import__error" role="alert">
+        {{ review.failure }}
+      </p>
+      <p v-if="failedStep" class="import__note">
+        The import stopped at “{{ failedStep.key }}”. Everything before it is
+        already in place; confirming again retries from there.
+      </p>
+
+      <div class="review__actions">
+        <UiButton
+          v-if="review.status !== 'applied'"
+          type="button"
+          variant="primary"
+          :disabled="templates.busy"
+          @click="templates.applyImport(review.importId)"
+        >
+          {{
+            templates.busy
+              ? "Creating…"
+              : review.status === "failed"
+                ? "Retry the import"
+                : "Create the Bot"
+          }}
+        </UiButton>
+        <UiButton type="button" @click="templates.dismissReview()">
+          {{ review.status === "applied" ? "Done" : "Cancel" }}
+        </UiButton>
+      </div>
+    </article>
+  </section>
+</template>
+
+<style scoped>
+.import {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.import__header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.import__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);
+}
+
+.import__intro {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+
+.import__intro strong {
+  color: var(--frock-text);
+  font-size: var(--frock-text-md);
+  font-weight: 600;
+}
+
+.import__intro small,
+.import__note {
+  color: var(--frock-text-muted);
+  font-size: var(--frock-text-sm);
+}
+
+.import__error {
+  color: var(--frock-danger-text);
+  font-size: var(--frock-text-sm);
+}
+
+.import__form {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.review {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  border: 1px solid var(--frock-border);
+  border-radius: var(--frock-radius-card);
+  padding: 12px;
+  background: var(--frock-surface-subtle);
+}
+
+.review__head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.review__text {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+
+.review__text strong {
+  color: var(--frock-text);
+  font-size: var(--frock-text-md);
+  font-weight: 600;
+}
+
+.review__text small {
+  color: var(--frock-text-muted);
+  font-size: var(--frock-text-sm);
+}
+
+.review__section h4 {
+  margin: 0 0 4px;
+  color: var(--frock-text-subtle);
+  font-size: var(--frock-text-sm);
+  font-weight: 600;
+}
+
+.review__section ul {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: 0;
+  padding-left: 18px;
+}
+
+.review__section li {
+  color: var(--frock-text);
+  font-size: var(--frock-text-sm);
+}
+
+.review__section li small {
+  color: var(--frock-text-muted);
+}
+
+.review__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+</style>

package/src/client/BotTemplateSection.vue

@@ -0,0 +1,338 @@
+<script setup lang="ts">
+// Bot templates, in Bot settings.
+//
+// The User half of the export: staging packs a recipe privately, and choosing
+// a visibility is a separate, deliberate click here — "Publication beyond the
+// authoring User is a User action." The link is only shown once a share is
+// actually `link` or `public`, so a copied URL always resolves.
+import { UiButton } from "@frockbot/client-ui";
+import { frockBotWebDataKey } from "@frockbot/plugin-shell/shared";
+import type {
+  TemplateShareRecordV1,
+  TemplateVisibilityV1,
+} from "@frockbot/template-core";
+import { computed, inject, ref, watch } from "vue";
+import { templateSharePathV1 } from "../shared.js";
+import { botTemplateStateKey } from "./state.js";
+
+const providedWeb = inject(frockBotWebDataKey);
+const providedState = inject(botTemplateStateKey);
+if (!providedWeb || !providedState) {
+  throw new Error("Bot template client services were not provided");
+}
+const web = providedWeb;
+const templates = providedState;
+const copied = ref<string>();
+const flowOpen = ref(false);
+
+const botId = computed(() => web.value.activeBotId);
+
+const shares = computed(() =>
+  templates.value.shares.filter((share) => share.botId === botId.value),
+);
+
+const visibilities: {
+  value: TemplateVisibilityV1;
+  label: string;
+  hint: string;
+}[] = [
+  {
+    value: "private",
+    label: "Private",
+    hint: "Only you. The recipe is staged and shared with nobody.",
+  },
+  {
+    value: "link",
+    label: "Anyone with the link",
+    hint: "Unlisted. Anyone holding the link can read the recipe.",
+  },
+  {
+    value: "public",
+    label: "Public",
+    hint: "Readable by anyone, and listable.",
+  },
+];
+
+watch(
+  botId,
+  (id) => {
+    if (id && !templates.value.loaded) void templates.value.load();
+  },
+  { immediate: true },
+);
+
+function shareUrl(share: TemplateShareRecordV1): string {
+  return `${globalThis.location?.origin ?? ""}${templateSharePathV1(share.shareId)}`;
+}
+
+function describe(share: TemplateShareRecordV1): string {
+  if (share.revokedAt) return `Revoked ${share.revokedAt}`;
+  return (
+    visibilities.find((option) => option.value === share.visibility)?.label ??
+    share.visibility
+  );
+}
+
+async function copyLink(share: TemplateShareRecordV1): Promise<void> {
+  try {
+    await navigator.clipboard.writeText(shareUrl(share));
+    copied.value = share.shareId;
+  } catch {
+    // Clipboard access is a progressive enhancement; the link is on screen
+    // either way, so a refusal costs the convenience and nothing else.
+    copied.value = undefined;
+  }
+}
+</script>
+
+<template>
+  <section class="templates">
+    <UiButton
+      class="templates__open"
+      type="button"
+      :aria-expanded="flowOpen"
+      @click="flowOpen = !flowOpen"
+    >
+      Share as template
+    </UiButton>
+
+    <div v-if="flowOpen" class="templates__flow">
+      <header class="templates__header">
+        <span class="templates__intro">
+          <strong>Share this Bot</strong>
+          <small>
+            Packs the profile, Bot-authored Skills, Routines, and required
+            Packages. Memory, credentials, Connections, Assignments, and
+            Computer files stay private.
+          </small>
+        </span>
+        <UiButton
+          type="button"
+          :disabled="!botId || templates.busy"
+          @click="botId && templates.stage(botId)"
+        >
+          {{ templates.busy ? "Packing…" : "Pack template" }}
+        </UiButton>
+      </header>
+
+      <p v-if="templates.error" class="templates__error" role="alert">
+        {{ templates.error }}
+      </p>
+
+      <p
+        v-if="templates.summary && templates.openShareId"
+        class="templates__summary"
+      >
+        Packed {{ templates.summary.skills }} Skill(s),
+        {{ templates.summary.routines }} Routine(s),
+        {{ templates.summary.packages }} Package(s) and
+        {{ templates.summary.publicServers }} public MCP server(s).
+        <template v-if="templates.summary.needsConnection > 0">
+          {{ templates.summary.needsConnection }} server(s) are left as a
+          placeholder the importer fills with their own Connection.
+        </template>
+        Memory, credentials, Connections and Assignments were not included.
+      </p>
+
+      <p
+        v-if="templates.loaded && shares.length === 0"
+        class="templates__empty"
+      >
+        No template has been shared from this Bot yet.
+      </p>
+
+      <article
+        v-for="share in shares"
+        :key="share.shareId"
+        class="template-card"
+      >
+        <div class="template-card__head">
+          <span class="template-card__text">
+            <strong>{{ describe(share) }}</strong>
+            <small>Packed {{ share.createdAt }}</small>
+          </span>
+        </div>
+
+        <fieldset v-if="!share.revokedAt" class="template-card__visibility">
+          <legend>Who can read it</legend>
+          <label v-for="option in visibilities" :key="option.value">
+            <input
+              type="radio"
+              :name="`visibility-${share.shareId}`"
+              :value="option.value"
+              :checked="share.visibility === option.value"
+              :disabled="templates.busy"
+              @change="templates.setVisibility(share.shareId, option.value)"
+            />
+            <span>
+              <strong>{{ option.label }}</strong>
+              <small>{{ option.hint }}</small>
+            </span>
+          </label>
+        </fieldset>
+
+        <p
+          v-if="!share.revokedAt && share.visibility !== 'private'"
+          class="template-card__link"
+        >
+          <code>{{ shareUrl(share) }}</code>
+        </p>
+
+        <div class="template-card__actions">
+          <UiButton
+            v-if="!share.revokedAt && share.visibility !== 'private'"
+            type="button"
+            @click="copyLink(share)"
+          >
+            {{ copied === share.shareId ? "Copied" : "Copy link" }}
+          </UiButton>
+          <UiButton
+            v-if="!share.revokedAt"
+            type="button"
+            variant="danger"
+            :disabled="templates.busy"
+            @click="templates.revoke(share.shareId)"
+          >
+            Revoke
+          </UiButton>
+        </div>
+      </article>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.templates {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.templates__open {
+  width: 100%;
+}
+
+.templates__flow {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding-top: 4px;
+}
+
+.templates__header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.templates__intro {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+
+.templates__intro strong {
+  color: var(--frock-text);
+  font-size: var(--frock-text-md);
+  font-weight: 600;
+}
+
+.templates__intro small,
+.templates__empty,
+.templates__summary {
+  color: var(--frock-text-muted);
+  font-size: var(--frock-text-sm);
+}
+
+.templates__error {
+  color: var(--frock-danger-text);
+  font-size: var(--frock-text-sm);
+}
+
+.template-card {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  border: 1px solid var(--frock-border);
+  border-radius: var(--frock-radius-card);
+  padding: 12px;
+  background: var(--frock-surface-subtle);
+}
+
+.template-card__head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.template-card__text {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+
+.template-card__text strong {
+  color: var(--frock-text);
+  font-size: var(--frock-text-md);
+  font-weight: 600;
+}
+
+.template-card__text small {
+  color: var(--frock-text-muted);
+  font-size: var(--frock-text-sm);
+}
+
+.template-card__visibility {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.template-card__visibility legend {
+  color: var(--frock-text-subtle);
+  font-size: var(--frock-text-sm);
+}
+
+.template-card__visibility label {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.template-card__visibility label span {
+  display: flex;
+  flex-direction: column;
+}
+
+.template-card__visibility label strong {
+  color: var(--frock-text);
+  font-size: var(--frock-text-sm);
+  font-weight: 600;
+}
+
+.template-card__visibility label small {
+  color: var(--frock-text-muted);
+  font-size: var(--frock-text-sm);
+}
+
+.template-card__link {
+  overflow-x: auto;
+  margin: 0;
+}
+
+.template-card__link code {
+  color: var(--frock-text-muted);
+  font-size: var(--frock-text-sm);
+}
+
+.template-card__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+</style>