@nuxtagentic/integrations 0.0.0-stage → 0.1.0

package/runtime/components/IntegrationConnectionPanel.vue

@@ -0,0 +1,589 @@
+<script setup lang="ts">
+import { computed, useTemplateRef } from 'vue'
+import type {
+  IntegrationConnection,
+  IntegrationProvider,
+  McpServerTool,
+  PendingAccount,
+} from '../../client'
+import type { IntegrationDefinition, IntegrationScope } from '../shared/catalog'
+import IntegrationLogo from './IntegrationLogo.vue'
+
+const permissions = defineModel<string[]>('permissions', { required: true })
+const approvals = defineModel<string[]>('approvals', { default: () => [] })
+const credentials = defineModel<Record<string, string>>('credentials', { required: true })
+const settings = defineModel<Record<string, string>>('settings', { default: () => ({}) })
+const scope = defineModel<IntegrationScope>('scope', { required: true })
+const server = defineModel<string>('server', { default: '' })
+const {
+  integration,
+  connections,
+  active,
+  adding,
+  provider,
+  manager,
+  organization,
+  pending,
+  tools,
+  endpoint,
+  busy,
+  message,
+} = defineProps<{
+  integration: IntegrationDefinition
+  /** This integration's connections the viewer can see. */
+  connections: IntegrationConnection[]
+  /** The connection being managed; none means the account list or the add form. */
+  active?: IntegrationConnection
+  adding?: boolean
+  provider?: IntegrationProvider
+  manager: boolean
+  organization: boolean
+  pending?: PendingAccount
+  tools?: McpServerTool[]
+  endpoint?: { url: string; secret: string }
+  busy?: boolean
+  message?: string
+}>()
+const emit = defineEmits<{
+  close: []
+  add: []
+  back: []
+  manage: [connection: IntegrationConnection]
+  connect: []
+  apiKey: []
+  save: []
+  disconnect: [connection: IntegrationConnection]
+  reconnect: [connection: IntegrationConnection]
+  endpoint: [rotate: boolean]
+  copy: [value: string]
+  choose: [target: string]
+}>()
+const element = useTemplateRef('element')
+defineExpose({ element })
+
+const auth = computed(() => integration.auth)
+const oauthReady = computed(() => !!auth.value.oauth && !!provider?.configured)
+/** Without a registered OAuth app, providers that take a token still connect. */
+const tokenForm = computed(() => !!auth.value.apiKey && !oauthReady.value)
+const mode = computed(() => {
+  if (pending?.targets?.length) {
+    return 'choose'
+  }
+  if (active) {
+    return 'manage'
+  }
+  if (adding || !connections.length) {
+    return 'add'
+  }
+  return 'list'
+})
+const canShare = computed(() => organization && integration.ownership.includes('workspace'))
+const canPersonal = computed(() => integration.ownership.includes('user'))
+const settingFields = computed(() =>
+  integration.fields.filter((field) => !field.secret && !field.apiKeyOnly),
+)
+const tokenFields = computed(() => integration.fields)
+const actionItems = computed(() =>
+  auth.value.mcp
+    ? (tools ?? []).map((tool) => ({
+        id: tool.name,
+        label: tool.title,
+        hint: tool.description,
+        write: tool.write,
+      }))
+    : integration.actions.map((action) => ({ ...action, hint: '', write: false })),
+)
+const isReadOnly = computed(() => !!active && !active.canManage)
+const setupCommand = computed(() =>
+  auth.value.oauth ? `pnpm exec cloudconfig connect add ${auth.value.oauth.provider}` : '',
+)
+const accountSummary = computed(() => {
+  if (active) {
+    const { label, account, scope } = active
+    return `${label || account} · ${scopeLabel(scope)}`
+  }
+  if (connections.length) {
+    return `${connections.length} connected ${connections.length === 1 ? 'account' : 'accounts'}`
+  }
+  return integration.category
+})
+const scopeDescription = computed(() => {
+  if (scope.value === 'workspace') {
+    return 'Shared with every member’s agents. It keeps working when you leave.'
+  }
+  return manager || !canShare.value
+    ? 'Only your own agents and automations can use it.'
+    : 'Only your own agents can use it. Admins add workspace connections.'
+})
+const permissionDescription = computed(() => {
+  if (isReadOnly.value) {
+    return 'Workspace admins manage this connection.'
+  }
+  if (auth.value.mcp) {
+    return 'Tools marked “Ask first” wait for your approval.'
+  }
+  switch (integration.id) {
+    case 'stripe':
+      return 'Refunds require your approval.'
+    case 'intercom':
+      return 'Reply drafts require your approval before sending.'
+    default:
+      return 'Only the actions you allow can be used by agents.'
+  }
+})
+
+function getConnectionStatusClass({ status, enabled }: IntegrationConnection) {
+  if (status === 'error') {
+    return 'bg-error'
+  }
+  return enabled ? 'bg-success' : 'bg-(--gray-600)'
+}
+
+function toggle(list: string[], id: string, value: boolean | 'indeterminate') {
+  return value === true ? [...new Set([...list, id])] : list.filter((entry) => entry !== id)
+}
+function scopeLabel(value: IntegrationScope) {
+  return value === 'workspace' ? 'Workspace' : 'Just me'
+}
+</script>
+
+<template>
+  <div
+    ref="element"
+    class="flex max-h-[min(760px,calc(100dvh-48px))] flex-col"
+  >
+    <div class="flex shrink-0 items-start gap-3.5 px-5 pt-5">
+      <UButton
+        v-if="mode === 'manage' || (mode === 'add' && connections.length)"
+        icon="i-lucide-arrow-left"
+        aria-label="Back to accounts"
+        color="neutral"
+        variant="ghost"
+        class="-ms-1.5 mt-2 size-8 rounded-md"
+        @click="emit('back')"
+      />
+      <span
+        class="grid size-12 shrink-0 place-items-center rounded-xl border border-(--gray-400) bg-(--gray-300)"
+      >
+        <IntegrationLogo
+          :name="integration.logo"
+          class="size-6"
+        />
+      </span>
+      <div class="min-w-0 flex-1">
+        <h2 class="text-lg leading-6 font-medium">{{ integration.name }}</h2>
+        <p class="mt-1 truncate text-[13px] text-dimmed">
+          {{ accountSummary }}
+        </p>
+      </div>
+      <UButton
+        icon="i-lucide-x"
+        aria-label="Close connection"
+        color="neutral"
+        variant="ghost"
+        class="size-8 rounded-md"
+        @click="emit('close')"
+      />
+    </div>
+
+    <div class="flex min-h-0 flex-col gap-5 overflow-y-auto px-5 py-4">
+      <p
+        v-if="mode !== 'manage'"
+        class="text-sm leading-5 text-toned"
+      >
+        {{ integration.details }}
+      </p>
+
+      <!-- Accounts -->
+      <div
+        v-if="mode === 'list'"
+        class="flex flex-col gap-2"
+      >
+        <span class="text-xs text-dimmed">Connected accounts</span>
+        <div class="divide-y divide-(--gray-400) rounded-[10px] border border-(--gray-400)">
+          <button
+            v-for="entry in connections"
+            :key="entry.id"
+            type="button"
+            class="flex min-h-12 w-full items-center gap-3 px-3 text-start hover:bg-(--gray-300) focus-visible:outline-2"
+            @click="emit('manage', entry)"
+          >
+            <span
+              class="size-1.5 shrink-0 rounded-full"
+              :class="getConnectionStatusClass(entry)"
+            />
+            <span class="min-w-0 flex-1">
+              <span class="block truncate text-[13px] text-highlighted">
+                {{ entry.label || entry.account }}
+              </span>
+              <span class="block truncate text-xs text-dimmed">
+                {{
+                  entry.status === 'error'
+                    ? 'Needs to be reconnected'
+                    : `${entry.permissions.length} allowed · ${entry.mine ? 'added by you' : 'shared'}`
+                }}
+              </span>
+            </span>
+            <UBadge
+              :label="scopeLabel(entry.scope)"
+              color="neutral"
+              variant="subtle"
+              size="sm"
+            />
+            <UIcon
+              name="i-lucide-chevron-right"
+              class="size-4 text-dimmed"
+            />
+          </button>
+        </div>
+      </div>
+
+      <!-- Choose an installation or site -->
+      <div
+        v-if="mode === 'choose' && pending"
+        class="flex flex-col gap-2"
+      >
+        <span class="text-xs text-dimmed">Choose what this connection covers</span>
+        <div class="divide-y divide-(--gray-400) rounded-[10px] border border-(--gray-400)">
+          <button
+            v-for="target in pending.targets"
+            :key="target.id"
+            type="button"
+            class="flex min-h-11 w-full items-center gap-3 px-3 text-start hover:bg-(--gray-300) focus-visible:outline-2"
+            :disabled="busy"
+            @click="emit('choose', target.id)"
+          >
+            <span class="min-w-0 flex-1 truncate text-[13px] text-highlighted">
+              {{ target.name }}
+            </span>
+            <span class="truncate text-xs text-dimmed">{{ target.hint }}</span>
+          </button>
+        </div>
+      </div>
+
+      <!-- Add an account -->
+      <template v-if="mode === 'add'">
+        <div
+          v-if="integration.triggers.length"
+          class="flex flex-col gap-2"
+        >
+          <span class="text-xs text-dimmed">Can start an agent when</span>
+          <div class="divide-y divide-(--gray-400) rounded-[10px] border border-(--gray-400)">
+            <div
+              v-for="trigger in integration.triggers"
+              :key="trigger.id"
+              class="flex min-h-10 items-center gap-2.5 px-3 text-[13px]"
+            >
+              <UIcon
+                name="i-lucide-zap"
+                class="size-3.5 text-muted"
+              />
+              {{ trigger.label }}
+            </div>
+          </div>
+        </div>
+        <div
+          v-if="canShare && canPersonal"
+          class="flex flex-col gap-2"
+        >
+          <span class="text-xs text-dimmed">Who agents act as</span>
+          <div
+            class="grid grid-cols-2 gap-1 rounded-lg border border-(--gray-500) bg-(--gray-200) p-0.5"
+            role="radiogroup"
+            aria-label="Connection owner"
+          >
+            <UButton
+              v-for="value in ['user', 'workspace'] as const"
+              :key="value"
+              :label="value === 'user' ? 'Just me' : 'Whole workspace'"
+              :icon="value === 'user' ? 'i-lucide-user' : 'i-lucide-users'"
+              color="neutral"
+              :variant="scope === value ? 'soft' : 'ghost'"
+              role="radio"
+              :aria-checked="scope === value"
+              :disabled="value === 'workspace' && !manager"
+              class="h-8 justify-center rounded-md text-[13px]"
+              :class="scope === value ? 'bg-(--gray-400) text-highlighted' : ''"
+              @click="scope = value"
+            />
+          </div>
+          <p class="text-xs leading-4 text-dimmed">
+            {{ scopeDescription }}
+          </p>
+        </div>
+
+        <UFormField
+          v-if="auth.mcp && !auth.mcp.server"
+          label="Server URL"
+        >
+          <UInput
+            v-model="server"
+            type="url"
+            placeholder="https://mcp.example.com/mcp"
+            autocomplete="off"
+            class="w-full"
+          />
+        </UFormField>
+
+        <UAlert
+          v-if="auth.oauth && !oauthReady"
+          color="neutral"
+          variant="subtle"
+          icon="i-lucide-key-round"
+          :title="`${provider?.label ?? integration.name} sign-in isn’t set up here yet`"
+          :description="
+            auth.apiKey
+              ? `Paste an access token below, or register the OAuth app: ${setupCommand}`
+              : `Register the OAuth app: ${setupCommand}`
+          "
+        />
+        <template v-if="tokenForm">
+          <UFormField label="Access token">
+            <UInput
+              v-model="credentials.token"
+              type="password"
+              autocomplete="off"
+              placeholder="Paste your API token"
+              class="w-full"
+            />
+          </UFormField>
+          <UFormField
+            v-for="field in tokenFields"
+            :key="field.key"
+            :label="field.label"
+          >
+            <UInput
+              v-model="credentials[field.key]"
+              :type="field.secret ? 'password' : 'text'"
+              :placeholder="field.placeholder"
+              autocomplete="off"
+              class="w-full"
+            />
+          </UFormField>
+        </template>
+        <UFormField
+          v-for="field in oauthReady ? (provider?.startFields ?? []) : []"
+          :key="field.key"
+          :label="field.label"
+        >
+          <UInput
+            v-model="credentials[field.key]"
+            :placeholder="field.placeholder"
+            autocomplete="off"
+            class="w-full"
+          />
+        </UFormField>
+      </template>
+
+      <!-- Manage one account -->
+      <template v-if="mode === 'manage' && active">
+        <UAlert
+          v-if="active.status === 'error'"
+          color="error"
+          variant="subtle"
+          title="This account needs to be reconnected"
+          :description="active.statusMessage || 'Its access was revoked or expired.'"
+          :actions="
+            active.canManage && (auth.oauth || auth.mcp)
+              ? [
+                  {
+                    label: 'Reconnect',
+                    color: 'neutral',
+                    onClick: () => emit('reconnect', active!),
+                  },
+                ]
+              : []
+          "
+        />
+        <div class="flex flex-col gap-2">
+          <span class="text-xs text-dimmed">
+            {{ auth.mcp ? 'Tools agents may use' : 'Allow agents to' }}
+          </span>
+          <div
+            v-if="auth.mcp && !tools"
+            class="flex items-center gap-2 text-[13px] text-muted"
+          >
+            <UIcon
+              name="i-lucide-loader-circle"
+              class="size-4 animate-spin"
+            />
+            Loading the server’s tools…
+          </div>
+          <div
+            v-else
+            class="max-h-72 divide-y divide-(--gray-400) overflow-y-auto rounded-[10px] border border-(--gray-400)"
+          >
+            <div
+              v-for="action in actionItems"
+              :key="action.id"
+              class="flex min-h-10 items-center gap-3 px-3"
+            >
+              <UCheckbox
+                :model-value="permissions.includes(action.id)"
+                :label="action.label"
+                :description="action.hint"
+                :disabled="isReadOnly"
+                color="neutral"
+                class="min-w-0 flex-1 py-2"
+                :ui="{
+                  label: 'text-[13px] font-normal',
+                  description: 'line-clamp-1 text-xs',
+                  base: 'size-4 rounded',
+                }"
+                @update:model-value="
+                  (value) => (permissions = toggle(permissions, action.id, value))
+                "
+              />
+              <USwitch
+                v-if="auth.mcp && permissions.includes(action.id)"
+                :model-value="approvals.includes(action.id)"
+                :disabled="isReadOnly"
+                size="sm"
+                label="Ask first"
+                :ui="{ label: 'text-xs font-normal text-dimmed' }"
+                @update:model-value="(value) => (approvals = toggle(approvals, action.id, value))"
+              />
+            </div>
+            <p
+              v-if="!actionItems.length"
+              class="px-3 py-2.5 text-[13px] text-dimmed"
+            >
+              This server offers no tools.
+            </p>
+          </div>
+        </div>
+        <UFormField
+          v-for="field in settingFields"
+          :key="field.key"
+          :label="field.label"
+        >
+          <UInput
+            v-model="settings[field.key]"
+            :placeholder="field.placeholder"
+            :disabled="isReadOnly"
+            autocomplete="off"
+            class="w-full"
+          />
+        </UFormField>
+        <div
+          v-if="integration.triggers.length && active.canManage"
+          class="flex flex-col gap-2"
+        >
+          <UButton
+            label="Event endpoint"
+            icon="i-lucide-webhook"
+            color="neutral"
+            variant="ghost"
+            class="self-start text-xs"
+            @click="emit('endpoint', false)"
+          />
+          <template v-if="endpoint">
+            <p class="text-xs text-muted">
+              POST a normalized event to this URL, signed with the secret: send it as a bearer
+              token, or as the secret of a GitHub repository webhook. Events start active
+              automations that can see this connection.
+            </p>
+            <UInput
+              :model-value="endpoint.url"
+              readonly
+              aria-label="Event endpoint"
+              class="w-full"
+            />
+            <UInput
+              :model-value="endpoint.secret"
+              readonly
+              type="password"
+              aria-label="Event secret"
+              class="w-full"
+            />
+            <div class="flex gap-2">
+              <UButton
+                label="Copy URL"
+                color="neutral"
+                variant="outline"
+                size="xs"
+                @click="emit('copy', endpoint.url)"
+              />
+              <UButton
+                label="Copy secret"
+                color="neutral"
+                variant="outline"
+                size="xs"
+                @click="emit('copy', endpoint.secret)"
+              />
+              <UButton
+                label="Rotate secret"
+                color="neutral"
+                variant="ghost"
+                size="xs"
+                @click="emit('endpoint', true)"
+              />
+            </div>
+          </template>
+        </div>
+      </template>
+
+      <UAlert
+        v-if="message"
+        color="error"
+        variant="subtle"
+        :title="message"
+      />
+    </div>
+
+    <div class="flex shrink-0 items-center gap-2 border-t border-(--gray-400) px-5 py-3.5">
+      <p class="min-w-0 flex-1 text-xs leading-4 text-dimmed">
+        {{ permissionDescription }}
+      </p>
+      <template v-if="mode === 'list'">
+        <UButton
+          label="Add account"
+          icon="i-lucide-plus"
+          color="neutral"
+          class="h-8 rounded-lg px-3.5 text-[13px]"
+          @click="emit('add')"
+        />
+      </template>
+      <template v-else-if="mode === 'manage' && active">
+        <UButton
+          v-if="active.canManage"
+          label="Disconnect"
+          color="neutral"
+          variant="outline"
+          class="h-8 rounded-lg px-3 text-[13px]"
+          :disabled="busy"
+          @click="emit('disconnect', active)"
+        />
+        <UButton
+          v-if="!isReadOnly"
+          label="Save"
+          color="neutral"
+          class="h-8 rounded-lg px-3.5 text-[13px]"
+          :loading="busy"
+          @click="emit('save')"
+        />
+      </template>
+      <template v-else-if="mode === 'add'">
+        <UButton
+          v-if="oauthReady || auth.mcp"
+          :label="
+            auth.mcp ? 'Sign in to server' : `Connect with ${provider?.label ?? integration.name}`
+          "
+          color="neutral"
+          class="h-8 rounded-lg px-3.5 text-[13px]"
+          :loading="busy"
+          :disabled="!!auth.mcp && !auth.mcp.server && !server"
+          @click="emit('connect')"
+        />
+        <UButton
+          v-else-if="tokenForm"
+          :label="`Connect ${integration.name}`"
+          color="neutral"
+          class="h-8 rounded-lg px-3.5 text-[13px]"
+          :loading="busy"
+          @click="emit('apiKey')"
+        />
+      </template>
+    </div>
+  </div>
+</template>

package/runtime/components/IntegrationLogo.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const { name } = defineProps<{ name: string }>()
+
+const logos = import.meta.glob<string>('../assets/logos/*.svg', {
+  eager: true,
+  query: '?url',
+  import: 'default',
+})
+const monochrome = ['github', 'linear', 'vercel', 'intercom', 'notion', 'x', 'mcp', 'sentry']
+</script>
+
+<template>
+  <span
+    aria-hidden="true"
+    class="inline-flex shrink-0"
+  >
+    <UIcon
+      v-if="!logos[`../assets/logos/${name}.svg`]"
+      name="i-lucide-plug"
+      class="size-full text-muted"
+    />
+    <img
+      v-else
+      :src="logos[`../assets/logos/${name}.svg`]"
+      alt=""
+      :draggable="false"
+      class="size-full object-contain"
+      :class="[
+        monochrome.includes(name) ? 'dark:invert' : '',
+        name === 'tiktok' ? 'dark:hidden' : '',
+      ]"
+    />
+    <img
+      v-if="name === 'tiktok'"
+      :src="logos['../assets/logos/tiktok-dark.svg']"
+      alt=""
+      :draggable="false"
+      class="hidden size-full object-contain dark:block"
+    />
+  </span>
+</template>