@nuxtagentic/agents 0.0.0-stage → 0.1.0

package/runtime/components/AgentList.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { AgentSummary } from '../shared/agent-summary'
+import { getAgentAvatarClass, getAgentInitials } from '../shared/presentation'
+import { PROVIDER_LABELS } from '../shared/runtime'
+
+const { agents, selectedId, hasSelection, pending, error } = defineProps<{
+  agents: AgentSummary[]
+  selectedId: number | null
+  hasSelection?: boolean
+  pending?: boolean
+  error?: string
+}>()
+
+const emit = defineEmits<{
+  select: [id: number]
+  refresh: []
+}>()
+
+const search = defineModel<string>('search', { required: true })
+
+const isHiddenOnMobile = computed(() => hasSelection ?? selectedId !== null)
+const isLoading = computed(() => pending && !agents.length)
+const isEmpty = computed(() => !pending && !error && !agents.length)
+const emptyMessage = computed(() =>
+  search.value ? 'No agents match.' : 'Your agents will appear here.',
+)
+</script>
+
+<template>
+  <aside
+    class="flex w-full shrink-0 flex-col border-r border-default md:w-60"
+    :class="isHiddenOnMobile ? 'hidden md:flex' : 'flex'"
+  >
+    <div class="px-3 pt-3 pb-2">
+      <UInput
+        v-model="search"
+        icon="i-lucide-search"
+        placeholder="Search agents"
+        aria-label="Search agents"
+        class="w-full"
+        :ui="{
+          base: 'rounded-lg text-[13px] ring-(--gray-500)',
+          leadingIcon: 'size-3.5 text-dimmed',
+        }"
+      />
+    </div>
+    <div class="min-h-0 flex-1 space-y-0.5 overflow-auto px-2 pb-30">
+      <div
+        v-if="error"
+        class="space-y-2 px-2 py-6"
+      >
+        <p
+          role="alert"
+          class="text-[13px] text-error"
+        >
+          {{ error }}
+        </p>
+        <UButton
+          label="Retry"
+          color="neutral"
+          variant="outline"
+          size="xs"
+          @click="emit('refresh')"
+        />
+      </div>
+      <p
+        v-else-if="isLoading"
+        role="status"
+        class="px-2 py-6 text-center text-[13px] text-muted"
+      >
+        Loading agents…
+      </p>
+      <button
+        v-for="agent in agents"
+        :key="agent.id"
+        type="button"
+        :aria-current="selectedId === agent.id ? 'true' : undefined"
+        class="flex h-13 w-full cursor-pointer items-center gap-2.5 rounded-lg pr-2.5 pl-2 text-left transition-[background-color,transform] duration-160 ease-[cubic-bezier(.2,0,0,1)] hover:bg-(--gray-400) focus-visible:outline-2 focus-visible:outline-accented active:scale-[0.98] motion-reduce:transition-none"
+        :class="selectedId === agent.id && 'bg-(--gray-400)'"
+        @click="emit('select', agent.id)"
+      >
+        <span
+          class="grid size-8 shrink-0 place-items-center rounded-full text-xs font-semibold text-black"
+          :class="getAgentAvatarClass(agent.id)"
+        >
+          {{ getAgentInitials(agent.name) }}
+        </span>
+        <span class="flex min-w-0 flex-1 flex-col gap-0.5">
+          <span class="truncate text-sm leading-4.5 text-highlighted">{{ agent.name }}</span>
+          <span class="truncate text-xs leading-4 text-dimmed">
+            {{ PROVIDER_LABELS[agent.provider] }} · {{ agent.model }}
+          </span>
+        </span>
+        <span
+          class="size-1.5 shrink-0 rounded-full transition-colors duration-240"
+          :class="agent.status === 'active' ? 'bg-success' : 'bg-(--gray-600)'"
+          :aria-label="agent.status === 'active' ? 'Active' : 'Draft'"
+        />
+      </button>
+      <p
+        v-if="isEmpty"
+        class="px-2 py-6 text-center text-[13px] text-muted"
+      >
+        {{ emptyMessage }}
+      </p>
+    </div>
+    <slot name="footer" />
+  </aside>
+</template>

package/runtime/components/AgentToolPicker.vue

@@ -0,0 +1,371 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue'
+import {
+  AGENT_PARAMETER_TYPES,
+  agentToolSchema,
+  type AgentDefinition,
+  type AgentTool,
+} from '@cloudconfig/core/agents'
+import { PROVIDER_LABELS } from '../shared/runtime'
+import type { AgentIntegrationTool } from '../shared/integration-tool'
+import { useAgentIntegrationTools } from '../composables/useAgentIntegrationTools'
+
+const { integrationTools } = defineProps<{ integrationTools?: AgentIntegrationTool[] }>()
+const agent = defineModel<AgentDefinition>({ required: true })
+defineEmits<{ close: [] }>()
+const CHOICES = [
+  { value: 'auto', label: 'Auto', hint: 'The model decides when to call a tool.' },
+  {
+    value: 'required',
+    label: 'Required',
+    hint: 'The model must call at least one tool each turn.',
+  },
+  { value: 'none', label: 'None', hint: 'Tools are described but never called.' },
+] as const
+const expanded = ref<string | null>(null)
+// Forms render once a tool is first opened, so long tool lists stay cheap to mount.
+const opened = reactive(new Set<string>())
+const copied = ref<string | null>(null)
+const copyError = ref('')
+let copiedTimer: ReturnType<typeof setTimeout> | undefined
+const integrations = integrationTools ? undefined : useAgentIntegrationTools()
+const integrationError = computed(() => integrations?.error.value)
+const enabled = computed(() => agent.value.tools.filter((tool) => tool.enabled).length)
+const choice = computed(() =>
+  Math.max(
+    0,
+    CHOICES.findIndex((item) => item.value === agent.value.toolChoice),
+  ),
+)
+const suggestions = computed(() =>
+  (integrationTools ?? integrations?.data.value ?? []).filter(
+    (item) => !agent.value.tools.some((tool) => tool.name === item.name),
+  ),
+)
+const fieldUi = {
+  base: 'h-8 rounded-lg px-2.5 text-[13px] ring-(--gray-500) focus-visible:ring-(--gray-800)',
+}
+
+function toggle(tool: AgentTool) {
+  opened.add(tool.id)
+  expanded.value = expanded.value === tool.id ? null : tool.id
+}
+function addTool(tool: AgentTool) {
+  agent.value.tools.push(tool)
+  opened.add(tool.id)
+  expanded.value = tool.id
+}
+function addBlankTool() {
+  let name = 'new_tool'
+  for (let index = 2; agent.value.tools.some((tool) => tool.name === name); index++) {
+    name = `new_tool_${index}`
+  }
+  addTool({ id: crypto.randomUUID(), name, description: '', enabled: true, parameters: [] })
+}
+function addIntegrationTool(item: AgentIntegrationTool) {
+  addTool({
+    id: crypto.randomUUID(),
+    name: item.name,
+    description: item.description,
+    enabled: true,
+    parameters: Object.entries(item.parameters.properties).map(([name, field]) => ({
+      name,
+      type: field.type,
+      description: field.description ?? '',
+      required: item.parameters.required.includes(name),
+    })),
+  })
+}
+function addParameter(tool: AgentTool) {
+  let name = 'parameter'
+  for (let index = 2; tool.parameters.some((parameter) => parameter.name === name); index++) {
+    name = `parameter_${index}`
+  }
+  tool.parameters.push({ name, type: 'string', description: '', required: false })
+}
+function identifier(value: string) {
+  return value.replace(/\s+/g, '_').replace(/[^\w-]/g, '')
+}
+function schema(tool: AgentTool) {
+  return JSON.stringify(agentToolSchema(tool, agent.value.provider), null, 2)
+}
+async function copy(tool: AgentTool) {
+  copyError.value = ''
+  try {
+    await navigator.clipboard.writeText(schema(tool))
+    copied.value = tool.id
+    clearTimeout(copiedTimer)
+    copiedTimer = setTimeout(() => (copied.value = null), 1400)
+  } catch {
+    copyError.value = 'Could not copy. Select the schema text and copy it.'
+  }
+}
+</script>
+
+<template>
+  <div class="flex h-full min-h-0 w-full flex-col">
+    <div class="flex h-13 shrink-0 items-center gap-2.5 pr-2 pl-4">
+      <span class="text-[15px] text-highlighted">Tools</span>
+      <span class="flex-1 text-xs text-dimmed">
+        {{ enabled }} of {{ agent.tools.length }} enabled
+      </span>
+      <UButton
+        icon="i-lucide-x"
+        aria-label="Close tools"
+        variant="ghost"
+        square
+        class="size-7.5 hover:bg-(--gray-400)"
+        @click="$emit('close')"
+      />
+    </div>
+    <div class="flex shrink-0 flex-col gap-1.5 border-b border-default px-4 pb-3">
+      <div
+        class="relative grid h-7.5 grid-cols-3 rounded-lg border border-(--gray-500) p-0.5"
+        role="group"
+        aria-label="Tool choice"
+      >
+        <span
+          class="pointer-events-none absolute top-0.5 bottom-0.5 left-0.5 w-[calc((100%-4px)/3)] rounded-md bg-(--gray-400) transition-transform duration-240 ease-[cubic-bezier(.2,0,0,1)] motion-reduce:transition-none"
+          :class="['translate-x-0', 'translate-x-full', 'translate-x-[200%]'][choice]"
+        />
+        <button
+          v-for="item in CHOICES"
+          :key="item.value"
+          type="button"
+          class="relative cursor-pointer rounded-md text-xs transition-colors duration-200 focus-visible:outline-2 focus-visible:outline-accented motion-reduce:transition-none"
+          :class="
+            agent.toolChoice === item.value
+              ? 'text-highlighted'
+              : 'text-muted hover:text-highlighted'
+          "
+          :aria-pressed="agent.toolChoice === item.value"
+          @click="agent.toolChoice = item.value"
+        >
+          {{ item.label }}
+        </button>
+      </div>
+      <p class="text-xs text-dimmed">{{ CHOICES[choice]!.hint }}</p>
+    </div>
+    <div class="min-h-0 flex-1 overflow-y-auto">
+      <div
+        v-for="tool in agent.tools"
+        :key="tool.id"
+        class="border-b border-default transition-colors duration-220 motion-reduce:transition-none"
+        :class="expanded === tool.id && 'bg-(--gray-300)'"
+      >
+        <div class="flex h-14 items-center gap-2.5 pr-2 pl-4">
+          <USwitch
+            v-model="tool.enabled"
+            :aria-label="`Enable ${tool.name}`"
+            size="xs"
+          />
+          <button
+            type="button"
+            class="flex h-11 min-w-0 flex-1 cursor-pointer items-center gap-2.5 rounded-lg px-1.5 text-left transition-colors hover:bg-(--gray-400) focus-visible:outline-2 focus-visible:outline-accented motion-reduce:transition-none"
+            :aria-expanded="expanded === tool.id"
+            @click="toggle(tool)"
+          >
+            <span class="flex min-w-0 flex-1 flex-col gap-0.5">
+              <span
+                class="truncate font-mono text-[13px] leading-4.5 transition-colors"
+                :class="tool.enabled ? 'text-highlighted' : 'text-dimmed'"
+              >
+                {{ tool.name || 'untitled_tool' }}
+              </span>
+              <span class="truncate text-xs leading-4 text-dimmed">
+                {{ tool.description || 'No description' }}
+              </span>
+            </span>
+            <UIcon
+              name="i-lucide-chevron-down"
+              class="size-4 shrink-0 text-muted transition-transform duration-240 ease-[cubic-bezier(.2,0,0,1)] motion-reduce:transition-none"
+              :class="expanded === tool.id && 'rotate-180'"
+            />
+          </button>
+        </div>
+        <div
+          class="grid transition-[grid-template-rows] duration-260 ease-[cubic-bezier(.2,0,0,1)] motion-reduce:transition-none"
+          :class="expanded === tool.id ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'"
+          :inert="expanded !== tool.id"
+        >
+          <div class="min-h-0 overflow-hidden">
+            <div
+              v-if="opened.has(tool.id)"
+              class="flex flex-col gap-3.5 px-4 pt-0.5 pb-4"
+            >
+              <UFormField
+                label="Name"
+                :ui="{ label: 'text-xs', container: 'mt-1.5' }"
+              >
+                <UInput
+                  :model-value="tool.name"
+                  placeholder="tool_name"
+                  class="w-full"
+                  :ui="{ base: `${fieldUi.base} font-mono text-xs` }"
+                  @update:model-value="tool.name = identifier(String($event))"
+                />
+              </UFormField>
+              <UFormField
+                label="Description"
+                :ui="{ label: 'text-xs', container: 'mt-1.5' }"
+              >
+                <UInput
+                  v-model="tool.description"
+                  placeholder="What the tool does and when to call it"
+                  class="w-full"
+                  :ui="fieldUi"
+                />
+              </UFormField>
+              <div class="flex flex-col gap-1.5">
+                <span class="text-xs text-muted">Parameters</span>
+                <div
+                  v-for="(parameter, index) in tool.parameters"
+                  :key="index"
+                  class="flex flex-col gap-1.5 rounded-[10px] border border-default p-1.5"
+                >
+                  <div class="grid grid-cols-[minmax(0,1fr)_72px_76px_28px] items-center gap-1.5">
+                    <UInput
+                      :model-value="parameter.name"
+                      aria-label="Parameter name"
+                      placeholder="name"
+                      :ui="{ base: `${fieldUi.base} font-mono text-xs` }"
+                      @update:model-value="parameter.name = identifier(String($event))"
+                    />
+                    <USelect
+                      v-model="parameter.type"
+                      :items="[...AGENT_PARAMETER_TYPES]"
+                      aria-label="Parameter type"
+                      :ui="{
+                        base: `${fieldUi.base} px-2 font-mono text-xs`,
+                        trailingIcon: 'hidden',
+                        content: 'min-w-28',
+                      }"
+                    />
+                    <button
+                      type="button"
+                      class="h-8 cursor-pointer rounded-lg border border-(--gray-500) text-xs transition-colors duration-180 hover:text-highlighted motion-reduce:transition-none"
+                      :class="
+                        parameter.required ? 'bg-(--gray-500) text-highlighted' : 'text-dimmed'
+                      "
+                      :aria-pressed="parameter.required"
+                      @click="parameter.required = !parameter.required"
+                    >
+                      {{ parameter.required ? 'Required' : 'Optional' }}
+                    </button>
+                    <UButton
+                      icon="i-lucide-x"
+                      aria-label="Remove parameter"
+                      variant="ghost"
+                      square
+                      class="hover:bg-(--gray-400)"
+                      @click="tool.parameters.splice(index, 1)"
+                    />
+                  </div>
+                  <UInput
+                    v-model="parameter.description"
+                    aria-label="Parameter description"
+                    placeholder="Description"
+                    variant="none"
+                    :ui="{ base: 'h-7 px-1 text-[13px] text-default' }"
+                  />
+                  <p
+                    v-if="parameter.type === 'array'"
+                    class="px-1 text-xs text-dimmed"
+                  >
+                    A list of strings.
+                  </p>
+                </div>
+                <p
+                  v-if="!tool.parameters.length"
+                  class="text-xs text-dimmed"
+                >
+                  No parameters. The tool is called with an empty object.
+                </p>
+                <div>
+                  <UButton
+                    label="Add parameter"
+                    icon="i-lucide-plus"
+                    variant="ghost"
+                    size="xs"
+                    class="-ml-2 h-7 px-2 font-normal hover:bg-(--gray-400)"
+                    @click="addParameter(tool)"
+                  />
+                </div>
+              </div>
+              <div class="flex flex-col gap-1.5">
+                <div class="flex items-center justify-between">
+                  <span class="text-xs text-muted">
+                    Schema · {{ PROVIDER_LABELS[agent.provider] }} format
+                  </span>
+                  <UButton
+                    :label="copied === tool.id ? 'Copied' : 'Copy'"
+                    variant="ghost"
+                    size="xs"
+                    class="font-normal hover:bg-(--gray-400)"
+                    @click="copy(tool)"
+                  />
+                </div>
+                <pre
+                  class="max-h-60 overflow-auto rounded-lg border border-default bg-(--gray-100) px-3.5 py-3 font-mono text-xs leading-4.5 text-default"
+                  >{{ schema(tool) }}</pre>
+                <p
+                  v-if="copyError"
+                  role="alert"
+                  class="text-xs text-error"
+                >
+                  {{ copyError }}
+                </p>
+              </div>
+              <div class="flex justify-end">
+                <UButton
+                  label="Remove tool"
+                  variant="outline"
+                  size="xs"
+                  class="h-7 rounded-lg px-2.5 font-normal text-muted ring-(--gray-500) hover:bg-(--gray-400)"
+                  @click="agent.tools = agent.tools.filter((item) => item.id !== tool.id)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <p
+        v-if="!agent.tools.length"
+        class="px-4 py-6 text-center text-[13px] text-dimmed"
+      >
+        No tools yet. The agent can only reply with text.
+      </p>
+    </div>
+    <div class="flex shrink-0 flex-wrap items-center gap-1.5 border-t border-default p-2">
+      <UButton
+        label="Add tool"
+        icon="i-lucide-plus"
+        variant="ghost"
+        class="h-7.5 rounded-lg px-2.5 font-normal text-highlighted hover:bg-(--gray-400)"
+        @click="addBlankTool"
+      />
+      <button
+        v-for="item in suggestions"
+        :key="item.name"
+        type="button"
+        :title="item.description"
+        class="h-6.5 cursor-pointer rounded-full border border-(--gray-500) px-2.5 font-mono text-xs whitespace-nowrap text-muted transition-colors hover:bg-(--gray-400) hover:text-highlighted focus-visible:outline-2 focus-visible:outline-accented active:scale-[0.97] motion-reduce:transition-none"
+        @click="addIntegrationTool(item)"
+      >
+        + {{ item.name }}
+      </button>
+      <p
+        v-if="integrationError"
+        class="flex items-center gap-2 px-2 text-xs text-error"
+      >
+        Could not load integration tools.
+        <UButton
+          label="Retry"
+          variant="link"
+          size="xs"
+          @click="integrations?.refresh()"
+        />
+      </p>
+    </div>
+  </div>
+</template>