@nuxtagentic/agents 0.0.0-stage → 0.1.1

package/runtime/components/AgentsWorkspace.vue

@@ -0,0 +1,328 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import { CloudConfigClientError } from '@cloudconfig/core/client'
+import { createAgentDefinition, type AgentDefinition } from '@cloudconfig/core/agents'
+import { useWorkspaceRecord } from '@nuxtagentic/data/runtime/composables/useWorkspaceRecord'
+import type { WorkspaceEntryContext } from '@nuxtagentic/workspace/runtime/types'
+import { toAgentDefinition, useAgents, type AgentRecord } from '../composables/useAgents'
+import AgentEditor from './AgentEditor.vue'
+import AgentList from './AgentList.vue'
+import RunPanel from './RunPanel.vue'
+
+const { context, active } = defineProps<{ context: WorkspaceEntryContext; active: boolean }>()
+const { navigation } = context
+const selection = computed(() => navigation.read('agent'))
+const creating = computed(() => selection.value === 'new')
+const selectedId = computed(() => (/^\d+$/.test(selection.value) ? Number(selection.value) : null))
+const search = computed(
+  () =>
+    navigation.read('agentSearch') ||
+    (!navigation.module.value ? navigation.prompt.value.replace(/^agents?\s*/i, '') : ''),
+)
+const page = computed(() => Math.max(1, Number(navigation.read('agentPage')) || 1))
+const records = useAgents(computed(() => ({ search: search.value, page: page.value })))
+const detail = useWorkspaceRecord<AgentRecord>(
+  'agents',
+  { id: selectedId, scope: records.scope, get: (id) => records.api.get(id) },
+  { server: true },
+)
+const selected = computed(() =>
+  detail.data.value?.id === selectedId.value ? detail.data.value : null,
+)
+const definition = computed(() => (selected.value ? toAgentDefinition(selected.value) : null))
+const isBusy = ref(false)
+const error = ref('')
+const isDeleting = ref(false)
+const isTesting = ref(false)
+
+// `?agent=new` asks for a new agent; it is replaced by the created agent's id.
+onMounted(() => {
+  if (creating.value) {
+    void insert()
+  }
+})
+watch(selection, (value) => {
+  error.value = ''
+  isDeleting.value = false
+  if (value === 'new') {
+    void insert()
+  }
+})
+
+function setSearch(value: string | number) {
+  return navigation.navigate(
+    { agentSearch: String(value) || undefined, agentPage: undefined },
+    true,
+  )
+}
+function create() {
+  if (creating.value) {
+    return insert()
+  }
+  return navigation.navigate({ module: 'agents', agent: 'new', agentName: undefined })
+}
+function errorMessage(cause: unknown) {
+  if (cause instanceof CloudConfigClientError && cause.issues.length) {
+    return cause.issues.map((issue) => issue.message).join(' ')
+  }
+  return cause instanceof Error ? cause.message : 'Could not save this agent. Try again.'
+}
+async function run<T>(action: () => Promise<T>): Promise<T | undefined> {
+  if (isBusy.value) {
+    return
+  }
+  isBusy.value = true
+  error.value = ''
+  try {
+    return await action()
+  } catch (cause) {
+    error.value = errorMessage(cause)
+  } finally {
+    isBusy.value = false
+  }
+}
+function insert() {
+  return run(async () => {
+    const agent = await records.api.create(
+      createAgentDefinition(navigation.read('agentName') || 'Untitled agent'),
+    )
+    await navigation.navigate({ agent: String(agent.id), agentName: undefined }, true)
+    await records.refreshAll()
+  })
+}
+async function update(agent: AgentDefinition) {
+  const id = selectedId.value
+  if (id === null) {
+    return false
+  }
+  const saved = await run(async () => {
+    detail.data.value = await records.api.update(id, agent)
+    await records.refreshAll()
+    return true
+  })
+  return saved ?? false
+}
+function duplicate(agent: AgentDefinition) {
+  return run(async () => {
+    const copy = await records.api.create({
+      ...agent,
+      status: 'draft',
+      markdown: agent.markdown.replace(/^#\s+(.+)$/m, '# $1 copy'),
+    })
+    await navigation.navigate({ module: 'agents', agent: String(copy.id) })
+    await records.refreshAll()
+  })
+}
+function remove() {
+  const id = selectedId.value
+  if (id === null) {
+    return
+  }
+  return run(async () => {
+    await records.api.delete(id)
+    await navigation.closeDetail()
+    await records.refreshAll()
+  })
+}
+</script>
+
+<template>
+  <ClientOnly>
+    <Teleport
+      v-if="active"
+      defer
+      to="#workspace-navbar-actions"
+    >
+      <div class="flex items-center gap-2">
+        <UButton
+          v-if="selectedId"
+          label="Test agent"
+          icon="i-lucide-play"
+          color="neutral"
+          variant="outline"
+          size="sm"
+          class="h-8 w-28 justify-center rounded-lg px-3 text-[13px]"
+          :ui="{ leadingIcon: 'size-3.5' }"
+          @click="isTesting = true"
+        />
+        <UButton
+          label="New agent"
+          icon="i-lucide-plus"
+          color="neutral"
+          size="sm"
+          class="h-8 w-28 justify-center rounded-lg px-3 text-[13px]"
+          :ui="{ leadingIcon: 'size-3.5' }"
+          @click="create"
+        />
+      </div>
+    </Teleport>
+  </ClientOnly>
+  <div class="relative flex h-full min-h-0 bg-(--gray-200)">
+    <AgentList
+      :search="search"
+      :agents="records.rows.value"
+      :selected-id="selectedId"
+      :has-selection="!!selection"
+      :pending="records.isLoading.value"
+      :error="records.error.value?.message"
+      @update:search="setSearch"
+      @select="navigation.navigate({ agent: String($event) })"
+      @refresh="records.refresh()"
+    >
+      <template #footer>
+        <UPagination
+          v-if="records.totalCount.value > 50"
+          :page="page"
+          :total="records.totalCount.value"
+          :items-per-page="50"
+          :sibling-count="0"
+          :show-edges="false"
+          size="xs"
+          class="shrink-0 border-t border-default p-2"
+          @update:page="navigation.navigate({ agentPage: String($event) })"
+        />
+      </template>
+    </AgentList>
+    <div
+      class="min-h-0 min-w-0 flex-1"
+      :class="!selection && 'hidden md:block'"
+    >
+      <AgentEditor
+        v-if="definition"
+        :key="selection"
+        :agent="definition"
+        :active="active"
+        :busy="isBusy"
+        :error="error"
+        :save="update"
+        :removing="isDeleting"
+        @duplicate="duplicate"
+        @remove="isDeleting = true"
+        @close="navigation.closeDetail()"
+      />
+      <div
+        v-else-if="selection"
+        class="flex h-full flex-col items-center justify-center gap-3 p-6"
+      >
+        <p
+          v-if="creating"
+          :role="error ? 'alert' : undefined"
+          class="text-sm text-muted"
+        >
+          {{ error || 'Creating agent…' }}
+        </p>
+        <p
+          v-else
+          :role="detail.error.value ? 'alert' : undefined"
+          class="text-sm text-muted"
+        >
+          {{
+            detail.error.value?.message ||
+            (detail.status.value === 'success' ? 'Agent not found.' : 'Loading agent…')
+          }}
+        </p>
+        <div class="flex gap-2">
+          <UButton
+            v-if="creating && error"
+            label="Try again"
+            color="neutral"
+            @click="create"
+          />
+          <UButton
+            label="Back to agents"
+            color="neutral"
+            variant="outline"
+            @click="navigation.closeDetail()"
+          />
+        </div>
+      </div>
+      <div
+        v-else
+        class="pointer-events-none absolute inset-0 flex flex-col items-center justify-center px-6 pb-24 text-center"
+      >
+        <div class="pointer-events-auto flex max-w-80 flex-col items-center gap-3">
+          <p
+            v-if="records.isLoading.value && !records.rows.value.length"
+            role="status"
+            class="text-sm text-muted"
+          >
+            Loading agents…
+          </p>
+          <template v-else-if="records.error.value">
+            <p
+              role="alert"
+              class="text-sm text-error"
+            >
+              Could not load agents.
+            </p>
+            <UButton
+              label="Try again"
+              color="neutral"
+              variant="outline"
+              @click="records.refresh()"
+            />
+          </template>
+          <template v-else>
+            <p class="text-base text-highlighted">
+              {{ records.totalCount.value ? 'Select an agent' : 'No agents yet' }}
+            </p>
+            <p class="text-[13px] text-pretty text-muted">
+              An agent is a Markdown file: its scope, boundaries, decision-making and tool use.
+            </p>
+            <UButton
+              label="New agent"
+              class="h-8 rounded-lg px-3"
+              @click="create"
+            />
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+  <UModal
+    v-model:open="isTesting"
+    title="Test saved agent"
+  >
+    <template #body>
+      <RunPanel
+        v-if="selectedId"
+        :key="selectedId"
+        :agent-id="selectedId"
+      />
+    </template>
+  </UModal>
+  <UModal
+    v-model:open="isDeleting"
+    title="Delete agent?"
+    :dismissible="!isBusy"
+  >
+    <template #body>
+      <p class="text-sm text-muted">
+        {{ selected?.name }} and its tool declarations will be permanently deleted.
+      </p>
+      <UAlert
+        v-if="error"
+        :title="error"
+        color="error"
+        class="mt-3"
+      />
+    </template>
+    <template #footer>
+      <div class="flex w-full justify-end gap-2">
+        <UButton
+          label="Cancel"
+          color="neutral"
+          variant="outline"
+          :disabled="isBusy"
+          @click="isDeleting = false"
+        />
+        <UButton
+          label="Delete agent"
+          color="error"
+          :loading="isBusy"
+          @click="remove"
+        />
+      </div>
+    </template>
+  </UModal>
+</template>

package/runtime/components/ModelSelect.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type { DropdownMenuItem } from '@nuxt/ui'
+import type { AgentModelOption } from '../shared/runtime'
+import { MENU_UI, PILL_CLASS } from '../shared/presentation'
+
+const value = defineModel<string>({ required: true })
+const {
+  models: availableModels,
+  runtimeDefault,
+  loading,
+  field,
+} = defineProps<{
+  models: AgentModelOption[]
+  /** Offer the CLI's own default as the empty value. */
+  runtimeDefault?: boolean
+  loading?: boolean
+  /** Full-width form field instead of a toolbar pill. */
+  field?: boolean
+}>()
+const emit = defineEmits<{ open: [] }>()
+const isOpen = ref(false)
+const term = ref('')
+
+watch(isOpen, (isOpen) => {
+  if (isOpen) {
+    emit('open')
+  } else {
+    term.value = ''
+  }
+})
+const options = computed(() => {
+  const models = [...availableModels]
+  if (runtimeDefault && !models.some((model) => model.value === '')) {
+    models.unshift({ value: '', label: 'Runtime default' })
+  }
+  if (value.value && !models.some((model) => model.value === value.value)) {
+    models.unshift({ value: value.value, label: value.value })
+  }
+  return models
+})
+const label = computed(() => {
+  if (value.value) {
+    return value.value
+  }
+  if (runtimeDefault) {
+    return 'Default'
+  }
+  return loading ? 'Loading…' : 'Choose a model'
+})
+const items = computed<DropdownMenuItem[]>(() => {
+  const custom = term.value.trim()
+  return [
+    ...options.value.map((model) => ({
+      type: 'checkbox' as const,
+      label: model.label,
+      description: model.value && model.value !== model.label ? model.value : undefined,
+      id: model.value,
+      preferred: model.preferred,
+      checked: model.value === value.value,
+      onSelect: () => (value.value = model.value),
+    })),
+    ...(custom && !/[\r\n]/.test(custom) && !options.value.some((model) => model.value === custom)
+      ? [
+          {
+            label: `Use ${custom}`,
+            icon: 'i-lucide-corner-down-left',
+            onSelect: () => (value.value = custom),
+          },
+        ]
+      : []),
+  ]
+})
+</script>
+
+<template>
+  <UDropdownMenu
+    v-model:open="isOpen"
+    v-model:search-term="term"
+    :items="items"
+    :filter="{ placeholder: 'Search or enter a model ID', autofocus: true }"
+    :filter-fields="['label', 'id']"
+    :content="{ align: 'start', sideOffset: 6 }"
+    :ui="{ ...MENU_UI, content: `${MENU_UI.content} max-h-80` }"
+  >
+    <UButton
+      :label="label"
+      :title="value || 'Runtime default'"
+      trailing-icon="i-lucide-chevron-down"
+      variant="ghost"
+      :class="
+        field
+          ? 'h-8 w-full justify-between rounded-lg bg-transparent px-2.5 font-normal text-highlighted ring ring-inset ring-(--gray-500) hover:bg-(--gray-400) aria-expanded:bg-(--gray-400)'
+          : PILL_CLASS
+      "
+      :ui="{
+        label: value ? 'truncate font-mono text-xs' : 'truncate',
+        trailingIcon: 'size-3.5 text-muted',
+      }"
+    />
+    <template #item-trailing="{ item }">
+      <span
+        v-if="item.preferred"
+        class="text-xs text-dimmed"
+      >
+        CLI default
+      </span>
+    </template>
+    <template #empty>
+      <p class="px-2.5 py-2 text-[13px] text-dimmed">No models match.</p>
+    </template>
+  </UDropdownMenu>
+</template>

package/runtime/components/RunPanel.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { ref, onBeforeUnmount } from 'vue'
+import type { AgentRunResult } from '@cloudconfig/core/agents/runs'
+const { agentId } = defineProps<{ agentId: number }>()
+const instructions = ref('')
+const payload = ref('{}')
+const runResult = ref<AgentRunResult | null>(null)
+const error = ref('')
+const isBusy = ref(false)
+let timer: ReturnType<typeof setTimeout> | undefined
+let isDisposed = false
+onBeforeUnmount(() => {
+  isDisposed = true
+  if (timer) {
+    clearTimeout(timer)
+  }
+})
+async function poll() {
+  if (!runResult.value || isDisposed) {
+    return
+  }
+  try {
+    runResult.value = await $fetch<AgentRunResult>(
+      `/api/agents/${agentId}/runs/${runResult.value.runId}`,
+    )
+    if (isDisposed) {
+      return
+    }
+    if (['queued', 'running', 'waiting'].includes(runResult.value.status)) {
+      timer = setTimeout(poll, 2000)
+    } else {
+      isBusy.value = false
+    }
+  } catch (cause) {
+    error.value = cause instanceof Error ? cause.message : 'Could not load the run.'
+    isBusy.value = false
+  }
+}
+async function run() {
+  error.value = ''
+  isBusy.value = true
+  try {
+    runResult.value = await $fetch<AgentRunResult>(`/api/agents/${agentId}/runs`, {
+      method: 'POST',
+      body: {
+        runId: crypto.randomUUID(),
+        instructions: instructions.value,
+        payload: JSON.parse(payload.value),
+      },
+    })
+    await poll()
+  } catch (cause) {
+    error.value = cause instanceof Error ? cause.message : 'Could not run the agent.'
+    isBusy.value = false
+  }
+}
+</script>
+<template>
+  <div class="space-y-4">
+    <UFormField label="Instructions">
+      <UTextarea
+        v-model="instructions"
+        placeholder="What should the agent do?"
+        class="w-full"
+      />
+    </UFormField>
+    <UFormField label="Input JSON">
+      <UTextarea
+        v-model="payload"
+        class="w-full font-mono"
+      />
+    </UFormField>
+    <UButton
+      label="Run saved agent"
+      color="neutral"
+      :loading="isBusy"
+      @click="run"
+    />
+    <UAlert
+      v-if="error"
+      color="error"
+      :title="error"
+    />
+    <div
+      v-if="runResult"
+      class="space-y-2"
+      aria-live="polite"
+    >
+      <UBadge
+        color="neutral"
+        variant="subtle"
+      >
+        {{ runResult.status }}
+      </UBadge>
+      <p
+        v-if="runResult.status === 'waiting'"
+        class="text-sm text-muted"
+      >
+        Approve or reject action #{{ runResult.approvalId }} in Integrations. This run resumes after
+        your response.
+      </p>
+      <p
+        v-else-if="runResult.error"
+        class="text-sm text-error"
+      >
+        {{ runResult.error }}
+      </p>
+      <pre
+        v-if="runResult.output"
+        class="max-h-80 overflow-auto text-sm whitespace-pre-wrap"
+        >{{ runResult.output }}</pre>
+    </div>
+  </div>
+</template>