@nuxtagentic/agents 0.0.0-stage → 0.1.1

package/runtime/components/RuntimeModelPicker.vue

@@ -0,0 +1,276 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { DropdownMenuItem } from '@nuxt/ui'
+import { AGENT_PROVIDERS, type AgentDefinition, type AgentProvider } from '@cloudconfig/core/agents'
+import { useAgentRuntimes } from '../composables/useAgentRuntimes'
+import {
+  LOCAL_RUNTIMES,
+  PROVIDER_LABELS,
+  isLocalRuntime,
+  type AgentRuntimeCatalog,
+} from '../shared/runtime'
+import { MENU_UI, PILL_CLASS, PROVIDER_DOTS } from '../shared/presentation'
+import ModelSelect from './ModelSelect.vue'
+
+const { catalog } = defineProps<{ catalog?: AgentRuntimeCatalog }>()
+const agent = defineModel<AgentDefinition>({ required: true })
+const runtimes = catalog ? undefined : useAgentRuntimes()
+const runtimeCatalog = computed(() => catalog ?? runtimes?.data.value)
+const error = computed(() => runtimes?.error.value)
+const isLoading = computed(() => runtimes?.status.value === 'pending' && !runtimeCatalog.value)
+function revalidate() {
+  runtimes?.revalidate()
+}
+function refresh() {
+  return runtimes?.refresh()
+}
+// Deployed hosts always run the production API configuration.
+const isUsingLocalRuntime = computed(
+  () => runtimeCatalog.value?.localEnabled !== false && isLocalRuntime(agent.value.runtime),
+)
+const localRuntime = computed(() =>
+  isLocalRuntime(agent.value.runtime) ? agent.value.runtime : null,
+)
+const provider = computed(() =>
+  isUsingLocalRuntime.value && localRuntime.value
+    ? LOCAL_RUNTIMES[localRuntime.value].provider
+    : agent.value.provider,
+)
+const runtimeLabel = computed(() =>
+  isUsingLocalRuntime.value && localRuntime.value
+    ? LOCAL_RUNTIMES[localRuntime.value].label
+    : `${PROVIDER_LABELS[agent.value.provider]} API`,
+)
+const apiRuntime = (value: AgentProvider) =>
+  runtimeCatalog.value?.api.find((runtime) => runtime.value === value)
+const models = computed(
+  () =>
+    (isUsingLocalRuntime.value
+      ? runtimeCatalog.value?.local.find((runtime) => runtime.value === agent.value.runtime)
+      : apiRuntime(agent.value.provider)
+    )?.models ?? [],
+)
+const isApiKeyMissing = computed(
+  () =>
+    !isUsingLocalRuntime.value &&
+    !!runtimeCatalog.value &&
+    !apiRuntime(agent.value.provider)?.available,
+)
+const runtimeItems = computed<DropdownMenuItem[]>(() => {
+  // Like Open Run, list installed CLIs only, keeping a saved choice visible.
+  const installed = (runtimeCatalog.value?.local ?? []).filter(
+    (runtime) => runtime.available || runtime.value === agent.value.runtime,
+  )
+  return [
+    ...(installed.length
+      ? [
+          { type: 'label' as const, label: 'Local' },
+          ...installed.map((runtime) => ({
+            type: 'checkbox' as const,
+            label: runtime.label,
+            dot: PROVIDER_DOTS[runtime.provider],
+            hint: runtime.available ? '' : 'Not installed',
+            checked: isUsingLocalRuntime.value && agent.value.runtime === runtime.value,
+            onSelect: () => setRuntime(runtime.value),
+          })),
+          { type: 'separator' as const },
+        ]
+      : []),
+    { type: 'label' as const, label: 'API' },
+    ...AGENT_PROVIDERS.map((value) => ({
+      type: 'checkbox' as const,
+      label: `${PROVIDER_LABELS[value]} API`,
+      dot: PROVIDER_DOTS[value],
+      hint: runtimeCatalog.value && !apiRuntime(value)?.available ? 'No key' : '',
+      checked: !isUsingLocalRuntime.value && agent.value.provider === value,
+      onSelect: () => setRuntime(value),
+    })),
+  ]
+})
+const productionItems = computed<DropdownMenuItem[]>(() =>
+  AGENT_PROVIDERS.map((value) => ({
+    type: 'checkbox' as const,
+    label: `${PROVIDER_LABELS[value]} API`,
+    dot: PROVIDER_DOTS[value],
+    hint: runtimeCatalog.value && !apiRuntime(value)?.available ? 'No key' : '',
+    checked: agent.value.provider === value,
+    onSelect: () => setProvider(value),
+  })),
+)
+const modelValue = computed({
+  get: () => (isUsingLocalRuntime.value ? (agent.value.localModel ?? '') : agent.value.model),
+  set: (value: string) => {
+    agent.value = {
+      ...agent.value,
+      ...(isUsingLocalRuntime.value ? { localModel: value } : { model: value }),
+    }
+  },
+})
+const productionModel = computed({
+  get: () => agent.value.model,
+  set: (model: string) => (agent.value = { ...agent.value, model }),
+})
+function setProvider(value: AgentProvider) {
+  if (agent.value.provider === value) {
+    return
+  }
+  agent.value = {
+    ...agent.value,
+    provider: value,
+    model: apiRuntime(value)?.models[0]?.value ?? '',
+  }
+}
+function setRuntime(value: string) {
+  if (isLocalRuntime(value)) {
+    agent.value = {
+      ...agent.value,
+      runtime: value,
+      localModel: agent.value.runtime === value ? agent.value.localModel : '',
+    }
+    return
+  }
+  setProvider(value as AgentProvider)
+  agent.value = { ...agent.value, runtime: 'api' }
+}
+</script>
+
+<template>
+  <UDropdownMenu
+    :items="runtimeItems"
+    :content="{ align: 'start', sideOffset: 6 }"
+    :ui="MENU_UI"
+    @update:open="$event && revalidate()"
+  >
+    <UButton
+      :label="runtimeLabel"
+      trailing-icon="i-lucide-chevron-down"
+      variant="ghost"
+      :class="PILL_CLASS"
+      :ui="{ label: 'truncate', trailingIcon: 'size-3.5 text-muted' }"
+    >
+      <template #leading>
+        <span
+          aria-hidden="true"
+          class="size-1.5 shrink-0 rounded-full"
+          :class="PROVIDER_DOTS[provider]"
+        />
+      </template>
+    </UButton>
+    <template #item-leading="{ item }">
+      <span
+        aria-hidden="true"
+        class="size-1.5 shrink-0 rounded-full"
+        :class="item.dot"
+      />
+    </template>
+    <template #item-trailing="{ item }">
+      <span
+        v-if="item.hint"
+        class="text-xs text-dimmed"
+      >
+        {{ item.hint }}
+      </span>
+    </template>
+    <template #content-bottom>
+      <div
+        v-if="error"
+        class="mt-1 flex items-center gap-2 rounded-lg bg-(--gray-400) px-2.5 py-2"
+      >
+        <p
+          role="alert"
+          class="flex-1 text-xs text-error"
+        >
+          Could not load runtimes.
+        </p>
+        <UButton
+          label="Retry"
+          size="xs"
+          @click="refresh()"
+        />
+      </div>
+      <p
+        v-else-if="isApiKeyMissing"
+        class="mt-1 flex items-center gap-2 rounded-lg bg-(--gray-400) px-2.5 py-2 text-xs text-toned"
+      >
+        <span class="size-1.5 shrink-0 rounded-full bg-warning" />
+        {{ apiRuntime(agent.provider)?.hint }}
+      </p>
+    </template>
+  </UDropdownMenu>
+  <ModelSelect
+    v-model="modelValue"
+    :models="models"
+    :loading="isLoading"
+    :runtime-default="isUsingLocalRuntime"
+    @open="revalidate"
+  />
+  <slot />
+  <UPopover
+    v-if="isUsingLocalRuntime"
+    :content="{ align: 'start', sideOffset: 6 }"
+    :ui="{ content: 'w-72 rounded-[10px] p-3 ring-(--gray-500)' }"
+  >
+    <UButton
+      icon="i-lucide-cloud"
+      aria-label="Production API configuration"
+      title="Production API configuration"
+      variant="ghost"
+      square
+      class="size-7.5 rounded-full aria-expanded:bg-(--gray-400) aria-expanded:text-highlighted hover:bg-(--gray-400)"
+    />
+    <template #content>
+      <div class="space-y-3">
+        <p class="text-xs text-muted">
+          Deployed hosts run this API configuration instead of the local CLI.
+        </p>
+        <UFormField label="Provider">
+          <UDropdownMenu
+            :items="productionItems"
+            :content="{ align: 'start', sideOffset: 6 }"
+            :ui="MENU_UI"
+          >
+            <UButton
+              :label="`${PROVIDER_LABELS[agent.provider]} API`"
+              trailing-icon="i-lucide-chevron-down"
+              variant="ghost"
+              class="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)"
+              :ui="{ trailingIcon: 'size-3.5 text-muted' }"
+            >
+              <template #leading>
+                <span
+                  aria-hidden="true"
+                  class="size-1.5 shrink-0 rounded-full"
+                  :class="PROVIDER_DOTS[agent.provider]"
+                />
+              </template>
+            </UButton>
+            <template #item-leading="{ item }">
+              <span
+                aria-hidden="true"
+                class="size-1.5 shrink-0 rounded-full"
+                :class="item.dot"
+              />
+            </template>
+            <template #item-trailing="{ item }">
+              <span
+                v-if="item.hint"
+                class="text-xs text-dimmed"
+              >
+                {{ item.hint }}
+              </span>
+            </template>
+          </UDropdownMenu>
+        </UFormField>
+        <UFormField label="Model">
+          <ModelSelect
+            v-model="productionModel"
+            :models="apiRuntime(agent.provider)?.models ?? []"
+            :loading="isLoading"
+            field
+            @open="revalidate"
+          />
+        </UFormField>
+      </div>
+    </template>
+  </UPopover>
+</template>

package/runtime/components/SourceEditor.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, useTemplateRef, watch } from 'vue'
+import { defaultKeymap, history, historyKeymap } from '@codemirror/commands'
+import { markdown } from '@codemirror/lang-markdown'
+import { yamlFrontmatter } from '@codemirror/lang-yaml'
+import { EditorState } from '@codemirror/state'
+import { EditorView, keymap } from '@codemirror/view'
+import { sourceEditorTheme, sourceSyntaxHighlighting } from '../shared/editorTheme'
+
+const { modelValue, label } = defineProps<{ modelValue: string; label: string }>()
+const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
+const root = useTemplateRef('root')
+let view: EditorView | undefined
+
+onMounted(() => {
+  view = new EditorView({
+    parent: root.value!,
+    state: EditorState.create({
+      doc: modelValue,
+      extensions: [
+        history(),
+        // Mod-Enter saves the agent.
+        keymap.of([
+          ...defaultKeymap.filter((binding) => binding.key !== 'Mod-Enter'),
+          ...historyKeymap,
+        ]),
+        yamlFrontmatter({ content: markdown() }),
+        sourceEditorTheme,
+        sourceSyntaxHighlighting,
+        EditorView.lineWrapping,
+        EditorView.contentAttributes.of({ 'aria-label': label, spellcheck: 'false' }),
+        EditorView.updateListener.of((update) => {
+          if (!update.docChanged) {
+            return
+          }
+          const value = update.state.doc.toString()
+          if (value !== modelValue) {
+            emit('update:modelValue', value)
+          }
+        }),
+      ],
+    }),
+  })
+})
+onBeforeUnmount(() => view?.destroy())
+
+// Replace only the changed span so the caret stays put when settings rewrite the frontmatter.
+watch(
+  () => modelValue,
+  (value) => {
+    const current = view?.state.doc.toString()
+    if (!view || current === undefined || value === current) {
+      return
+    }
+    let from = 0
+    while (from < current.length && from < value.length && current[from] === value[from]) {
+      from++
+    }
+    let end = 0
+    while (
+      end < current.length - from &&
+      end < value.length - from &&
+      current[current.length - 1 - end] === value[value.length - 1 - end]
+    ) {
+      end++
+    }
+    view.dispatch({
+      changes: { from, to: current.length - end, insert: value.slice(from, value.length - end) },
+    })
+  },
+)
+
+defineExpose({ focus: () => view?.focus() })
+</script>
+
+<template>
+  <div ref="root" />
+</template>

package/runtime/composables/useAgentIntegrationTools.ts

@@ -0,0 +1,24 @@
+import { useAsyncData, useRequestFetch } from '#imports'
+import { useWorkspaceModules } from '@nuxtagentic/workspace/runtime/composables/useWorkspaceModules'
+import type { AgentIntegrationTool } from '../shared/integration-tool'
+
+export function useAgentIntegrationTools() {
+  const modules = useWorkspaceModules()
+  const fetcher = useRequestFetch()
+
+  return useAsyncData(
+    'agents:integration-tools',
+    () =>
+      modules.isInstalled('integrations')
+        ? fetcher<AgentIntegrationTool[]>('/api/integrations/catalog/tools')
+        : Promise.resolve([]),
+    {
+      server: false,
+      lazy: true,
+      deep: false,
+      dedupe: 'defer',
+      getCachedData: (key, nuxtApp, { cause }) =>
+        cause === 'initial' ? nuxtApp.payload.data[key] : undefined,
+    },
+  )
+}

package/runtime/composables/useAgentRuntimes.ts

@@ -0,0 +1,32 @@
+import { useAsyncData, useRequestFetch } from '#imports'
+import type { AgentRuntimeCatalog } from '../shared/runtime'
+
+const STALE_AFTER = 60_000
+
+/** One runtime catalog per session; editors reuse it instead of refetching on mount. */
+export function useAgentRuntimes() {
+  const fetcher = useRequestFetch()
+  const catalog = useAsyncData(
+    'agents:runtimes',
+    async () => ({
+      ...(await fetcher<AgentRuntimeCatalog>('/api/agents/runtimes')),
+      loadedAt: Date.now(),
+    }),
+    {
+      server: false,
+      lazy: true,
+      deep: false,
+      dedupe: 'defer',
+      getCachedData: (key, nuxtApp, { cause }) =>
+        cause === 'initial' ? nuxtApp.payload.data[key] : undefined,
+    },
+  )
+  /** Picks up a newly installed CLI or API key when a menu opens. */
+  function revalidate() {
+    const loadedAt = catalog.data.value?.loadedAt ?? 0
+    if (catalog.status.value !== 'pending' && Date.now() - loadedAt > STALE_AFTER) {
+      void catalog.refresh()
+    }
+  }
+  return { ...catalog, revalidate }
+}

package/runtime/composables/useAgents.ts

@@ -0,0 +1,24 @@
+import { computed, type Ref } from 'vue'
+import { useCloudConfig } from '#imports'
+import type { AgentsConfig } from '@cloudconfig/core/agents'
+import { useWorkspaceQuery } from '@nuxtagentic/data/runtime/composables/useWorkspaceQuery'
+
+export { toAgentDefinition, type AgentRecord } from '../shared/definition'
+
+export function useAgents(query: Ref<{ search?: string; page?: number }> = computed(() => ({}))) {
+  const api = useCloudConfig<AgentsConfig>().agent
+  const resource = useWorkspaceQuery('agents', query, (query, signal) =>
+    api.list({ ...query, pageSize: 50, sortBy: 'name', sortDir: 'asc' }, { signal }),
+  )
+  const meta = computed(() => {
+    if (resource.error.value) {
+      return 'Unavailable'
+    }
+    if (resource.status.value !== 'success') {
+      return 'Loading…'
+    }
+    const count = resource.totalCount.value
+    return `${count} ${count === 1 ? 'agent' : 'agents'}`
+  })
+  return { ...resource, api, meta }
+}

package/runtime/index.ts

@@ -0,0 +1,71 @@
+import { computed } from 'vue'
+import type { WorkspaceFeature } from '@nuxtagentic/workspace/runtime/types'
+import AgentsWorkspace from './components/AgentsWorkspace.vue'
+import { useAgents } from './composables/useAgents'
+import { createAgentsPromptParser } from './shared/prompt'
+import { actions } from './actions'
+
+export const agentsFeature = {
+  id: 'agents',
+  label: 'Agents',
+  icon: 'i-lucide-bot',
+  matchesRoute: (route) => route.path === '/dashboard/agents',
+  collectionLocation: (query) => ({
+    path: '/dashboard/agents',
+    query: {
+      ...query,
+      module: undefined,
+      agentSearch:
+        query.agentSearch ??
+        (typeof query.q === 'string' && /^agents?\b/i.test(query.q)
+          ? query.q.replace(/^agents?\s*/i, '') || undefined
+          : undefined),
+    },
+  }),
+  recordLocation: (id, query) => ({
+    path: '/dashboard/agents',
+    query: { project: query.project, agent: String(id) },
+  }),
+  navigation: { order: 10 },
+  layout: { navbar: true, expand: true, edgeToEdge: true, ownsDetailAside: true, hideExpand: true },
+  prompt: { query: 'agents ', useMeta: () => useAgents().meta },
+  urlKeys: ['agent', 'agentSearch', 'agentPage'],
+  selectionKey: 'agent',
+  draftKeys: ['agentName'],
+  backKeys: ['agentSearch', 'agentPage'],
+  component: AgentsWorkspace,
+  actions,
+  createPromptParser: createAgentsPromptParser,
+  reviewIntent: (intent) => ({
+    module: 'agents',
+    agent: 'new',
+    agentName: 'name' in intent && typeof intent.name === 'string' ? intent.name : undefined,
+  }),
+  useSearch({ text }) {
+    const agentLink = (extra = {}) => ({
+      path: '/dashboard/agents',
+      query: { agentSearch: text.value, ...extra },
+    })
+    const agents = useAgents(computed(() => ({ search: text.value })))
+    return {
+      featureId: 'agents',
+      meta: agents.meta,
+      refresh: agents.refreshAll,
+      group: computed(() => ({
+        count: text.value ? agents.totalCount.value : 0,
+        to: agentLink(),
+        loading: agents.isLoading.value,
+        error: agents.error.value?.message ?? '',
+        items: text.value
+          ? agents.rows.value.slice(0, 3).map((agent) => ({
+              id: agent.id,
+              label: agent.name,
+              description: agent.model,
+              icon: 'i-lucide-bot',
+              to: agentLink({ agent: String(agent.id) }),
+            }))
+          : [],
+      })),
+    }
+  },
+} satisfies WorkspaceFeature

package/runtime/middleware/agents-route.ts

@@ -0,0 +1,10 @@
+import { defineNuxtRouteMiddleware, navigateTo } from '#imports'
+
+export default defineNuxtRouteMiddleware((to) => {
+  if (to.path === '/dashboard' && (to.query.module === 'agents' || to.query.agent)) {
+    return navigateTo(
+      { path: '/dashboard/agents', query: { ...to.query, module: undefined } },
+      { replace: true },
+    )
+  }
+})

package/runtime/pages/agents.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { definePageMeta, useHead } from '#imports'
+import { useWorkspaceContext } from '@nuxtagentic/workspace/runtime/composables/useWorkspaceContext'
+import { useWorkspaceRoute } from '@nuxtagentic/workspace/runtime/composables/useWorkspaceRoute'
+import type { WorkspaceEntryContext } from '@nuxtagentic/workspace/runtime/types'
+import AgentsWorkspace from '../components/AgentsWorkspace.vue'
+
+definePageMeta({ layout: 'dashboard', middleware: ['auth'], title: 'Agents' })
+useHead({ title: 'Agents · Agent UI' })
+
+const workspace = useWorkspaceContext()
+const navigation = useWorkspaceRoute()
+// Page route state is available before the persistent layout finishes navigation.
+const context: WorkspaceEntryContext = { ...workspace.entryContext, navigation }
+const isActive = computed(() => workspace.activeFeature.value?.id === 'agents')
+</script>
+
+<template>
+  <div class="min-h-0 flex-1 overflow-hidden">
+    <AgentsWorkspace
+      :context="context"
+      :active="isActive"
+    />
+  </div>
+</template>

package/runtime/server/api/agents/[id]/runs/[run].get.ts

@@ -0,0 +1,11 @@
+import { defineEventHandler, getRouterParam, createError } from 'h3'
+import { connectAgentGateway } from '../../../../utils/agent-gateway'
+
+export default defineEventHandler(async (event) => {
+  const gateway = await connectAgentGateway(event, Number(getRouterParam(event, 'id')))
+  const result = await gateway.runtime.status(String(getRouterParam(event, 'run')))
+  if (!result) {
+    throw createError({ statusCode: 404, statusMessage: 'Agent run not found.' })
+  }
+  return result
+})

package/runtime/server/api/agents/[id]/runs.post.ts

@@ -0,0 +1,33 @@
+import { defineEventHandler, getRouterParam, getHeader, getRequestURL, createError } from 'h3'
+import { readCommandBody } from '@nuxtagentic/integrations/runtime/server/utils/request-body'
+import { connectAgentGateway } from '../../../utils/agent-gateway'
+import { isLocalAgentRuntimeEnabled } from '../../../utils/local-agent-runtime'
+
+export default defineEventHandler(async (event) => {
+  if (getHeader(event, 'origin') !== getRequestURL(event).origin) {
+    throw createError({ statusCode: 403, statusMessage: 'Run agents from this application.' })
+  }
+  const body = await readCommandBody<{ runId?: string; payload?: unknown; instructions?: string }>(
+    event,
+    64_000,
+  )
+  const runId = body.runId ?? crypto.randomUUID()
+  if (
+    !/^[a-zA-Z0-9_-]{1,100}$/.test(runId) ||
+    typeof body.instructions !== 'string' ||
+    body.instructions.length > 20_000
+  ) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: 'Use a valid run ID and instructions of at most 20,000 characters.',
+    })
+  }
+  const gateway = await connectAgentGateway(event, Number(getRouterParam(event, 'id')))
+  return gateway.runtime.start({
+    runId,
+    scope: gateway.scope,
+    payload: body.payload ?? {},
+    instructions: body.instructions,
+    context: { localCli: isLocalAgentRuntimeEnabled(event) },
+  })
+})

package/runtime/server/api/agents/runtimes.get.ts

@@ -0,0 +1,37 @@
+import { createError, defineEventHandler } from 'h3'
+import { AGENT_PROVIDERS } from '@cloudconfig/core/agents'
+import { useAgentSession } from '@nuxtagentic/prompt/runtime/server/utils/agent-session'
+import { PROVIDER_LABELS, type AgentRuntimeCatalog } from '../../../shared/runtime'
+import { getAgentProviderKeysForEvent } from '../../utils/agent-provider-keys'
+import { listApiAgentModels } from '../../utils/agent-model-catalog'
+import { isLocalAgentRuntimeEnabled } from '../../utils/local-agent-runtime'
+
+export default defineEventHandler(async (event): Promise<AgentRuntimeCatalog> => {
+  if (!(await useAgentSession(event))?.user) {
+    throw createError({ statusCode: 401, statusMessage: 'Sign in to choose an agent runtime.' })
+  }
+  const keys = getAgentProviderKeysForEvent(event)
+  const localEnabled = isLocalAgentRuntimeEnabled(event)
+  const [local, api] = await Promise.all([
+    localEnabled
+      ? import('../../utils/local-agent-catalog').then((module) => module.getLocalAgentCatalog())
+      : [],
+    Promise.all(
+      AGENT_PROVIDERS.map(async (value) => {
+        let hint = `Set the ${PROVIDER_LABELS[value]} API key on the server to run this agent.`
+        if (keys[value]) {
+          hint = 'API key configured on the server.'
+        }
+        return {
+          value,
+          label: `${PROVIDER_LABELS[value]} API`,
+          provider: value,
+          available: !!keys[value],
+          hint,
+          models: await listApiAgentModels(value, keys[value]),
+        }
+      }),
+    ),
+  ])
+  return { localEnabled, local, api }
+})