qarpeo 0.0.0-alpha.10

package/dist/runtime/app/pages/devtools/agents.vue

@@ -0,0 +1,717 @@
+<script setup lang="ts">
+import type { NavigationMenuItem } from "@nuxt/ui"
+import { computed, nextTick, onMounted, ref, watch } from "vue"
+
+definePageMeta({ layout: false })
+
+const route = useRoute()
+
+const {
+  data: agentsData,
+  status: agentsStatus,
+  pending: agentsPending,
+  execute: executeLoadAgents,
+} = useFetch<any>("/_qarpeo/api/agents/list", {
+  immediate: false,
+  lazy: true,
+  default: () => ({ agents: [] }),
+})
+
+const agentsLoading = computed(
+  () => agentsPending.value || agentsStatus.value === "idle" || agentsStatus.value === "pending",
+)
+const agents = computed(() => agentsData.value?.agents || [])
+const agentSearch = ref("")
+
+const inputMessage = ref("")
+const chatRunning = ref(false)
+const historyLoading = ref(false)
+const clearingChat = ref(false)
+const showClearModal = ref(false)
+const chatScrollRef = ref<HTMLElement | null>(null)
+
+// Create Agent modal state
+const showCreateModal = ref(false)
+const creatingAgent = ref(false)
+const newAgentName = ref("")
+const newAgentDesc = ref("")
+const newAgentModel = ref("@cf/meta/llama-3.3-70b-instruct")
+const newAgentSystem = ref(
+  "You are an autonomous AI agent running on Cloudflare Workers edge runtime.",
+)
+const newAgentTools = ref("searchDocs, fetchContext")
+
+// Model options
+const availableModels = [
+  { label: "Llama 3.3 70B (Recommended)", value: "@cf/meta/llama-3.3-70b-instruct" },
+  { label: "Llama 3.1 8B (Fast / Lightweight)", value: "@cf/meta/llama-3.1-8b-instruct" },
+  { label: "Mistral 7B Instruct v0.2", value: "@cf/mistral/mistral-7b-instruct-v0.2" },
+  { label: "Qwen 2.5 Coder 32B (Coding)", value: "@cf/qwen/qwen2.5-coder-32b-instruct" },
+]
+
+const selectedModelOverride = ref("")
+
+// Copy feedback state
+const copiedMsgIndex = ref<number | null>(null)
+
+interface ChatMessage {
+  id?: string
+  role: "user" | "assistant" | "system"
+  content: string
+  timestamp?: string
+  model?: string
+  latencyMs?: number
+}
+
+const messages = ref<ChatMessage[]>([])
+
+// selectedAgentId is derived from the ?agent= query param
+const selectedAgentId = computed({
+  get: () => (route.query.agent as string) || (agents.value[0]?.id ?? null),
+  set: (val: string | null) => {
+    navigateTo({ query: { ...route.query, agent: val ?? undefined } })
+  },
+})
+
+const selectedAgent = computed(
+  () => agents.value.find((a) => a.id === selectedAgentId.value) || null,
+)
+
+const defaultPrompts = [
+  "Hello! What can you help me with?",
+  "What tools and context do you have access to?",
+  "Give me an example of an edge agent query in Qarpeo.",
+]
+
+const filteredAgents = computed(() => {
+  if (!agentSearch.value.trim()) return agents.value
+  const q = agentSearch.value.toLowerCase()
+  return agents.value.filter(
+    (a) =>
+      a.name?.toLowerCase().includes(q) ||
+      a.id?.toLowerCase().includes(q) ||
+      a.description?.toLowerCase().includes(q),
+  )
+})
+
+const agentNavItems = computed<NavigationMenuItem[]>(() =>
+  filteredAgents.value.map((a) => ({
+    label: a.name || a.id,
+    icon: "i-lucide-bot",
+    value: a.id,
+    badge: {
+      label: a.status || "idle",
+      size: "xs" as const,
+      color: a.status === "busy" ? ("warning" as const) : ("success" as const),
+      variant: "subtle" as const,
+    },
+    class: "text-xs",
+    to: { query: { ...route.query, agent: a.id } },
+    active: selectedAgentId.value === a.id,
+  })),
+)
+
+function scrollToBottom() {
+  nextTick(() => {
+    if (chatScrollRef.value) {
+      chatScrollRef.value.scrollTop = chatScrollRef.value.scrollHeight
+    }
+  })
+}
+
+async function loadAgents() {
+  await executeLoadAgents()
+  if (selectedAgentId.value) {
+    loadHistory(selectedAgentId.value)
+  } else if (agents.value[0]?.id) {
+    selectedAgentId.value = agents.value[0].id
+  }
+}
+
+async function loadHistory(agentId: string | null) {
+  if (!agentId) {
+    messages.value = []
+    return
+  }
+  historyLoading.value = true
+  try {
+    const res = await $fetch<any>("/_qarpeo/api/agents/history", {
+      query: { agent: agentId },
+    }).catch(() => null)
+
+    if (res?.messages && Array.isArray(res.messages)) {
+      messages.value = res.messages.map((m: any) => ({
+        id: m.id,
+        role: m.role || "assistant",
+        content: m.content || m.text || "",
+        model: m.model,
+        latencyMs: m.latencyMs,
+        timestamp: m.timestamp
+          ? new Date(m.timestamp).toLocaleTimeString([], {
+              hour: "2-digit",
+              minute: "2-digit",
+            })
+          : undefined,
+      }))
+    } else {
+      messages.value = []
+    }
+  } finally {
+    historyLoading.value = false
+    scrollToBottom()
+  }
+}
+
+watch(selectedAgentId, (newId) => {
+  if (newId) {
+    loadHistory(newId)
+    selectedModelOverride.value = ""
+  }
+})
+
+async function sendMessage() {
+  const text = inputMessage.value.trim()
+  const agentId = selectedAgentId.value
+  if (!text || !agentId || chatRunning.value) return
+
+  inputMessage.value = ""
+  messages.value.push({
+    role: "user",
+    content: text,
+    timestamp: new Date().toLocaleTimeString([], {
+      hour: "2-digit",
+      minute: "2-digit",
+    }),
+  })
+  scrollToBottom()
+
+  chatRunning.value = true
+  try {
+    const res = await $fetch<any>("/_qarpeo/api/agents/chat", {
+      method: "POST",
+      body: {
+        agent: agentId,
+        message: text,
+        model: selectedModelOverride.value || undefined,
+      },
+    })
+
+    messages.value.push({
+      id: res.id,
+      role: "assistant",
+      content: res.reply || res.message || "",
+      model: res.model,
+      latencyMs: res.latencyMs,
+      timestamp: new Date().toLocaleTimeString([], {
+        hour: "2-digit",
+        minute: "2-digit",
+      }),
+    })
+  } catch (err: any) {
+    messages.value.push({
+      role: "assistant",
+      content: `Error: ${err?.message || "Failed to reach agent"}`,
+      timestamp: new Date().toLocaleTimeString([], {
+        hour: "2-digit",
+        minute: "2-digit",
+      }),
+    })
+  } finally {
+    chatRunning.value = false
+    scrollToBottom()
+  }
+}
+
+async function handleClearConversation() {
+  const agentId = selectedAgentId.value
+  if (!agentId) return
+  clearingChat.value = true
+  try {
+    await $fetch("/_qarpeo/api/agents/clear", {
+      method: "POST",
+      body: { agent: agentId },
+    }).catch(() => {})
+    messages.value = []
+    showClearModal.value = false
+  } finally {
+    clearingChat.value = false
+  }
+}
+
+async function handleCreateAgent() {
+  if (!newAgentName.value.trim()) return
+  creatingAgent.value = true
+  try {
+    const tools = newAgentTools.value
+      .split(",")
+      .map((t) => t.trim())
+      .filter(Boolean)
+
+    const res = await $fetch<any>("/_qarpeo/api/agents/create", {
+      method: "POST",
+      body: {
+        name: newAgentName.value.trim(),
+        description: newAgentDesc.value.trim() || undefined,
+        model: newAgentModel.value,
+        systemPrompt: newAgentSystem.value.trim(),
+        tools,
+      },
+    })
+
+    showCreateModal.value = false
+    newAgentName.value = ""
+    newAgentDesc.value = ""
+    await loadAgents()
+    if (res?.agent?.id) {
+      selectedAgentId.value = res.agent.id
+    }
+  } catch (err) {
+    console.error("Create agent failed", err)
+  } finally {
+    creatingAgent.value = false
+  }
+}
+
+function copyMessageContent(content: string, index: number) {
+  if (typeof navigator !== "undefined") {
+    navigator.clipboard?.writeText(content)
+    copiedMsgIndex.value = index
+    setTimeout(() => {
+      copiedMsgIndex.value = null
+    }, 1500)
+  }
+}
+
+function selectPrompt(prompt: string) {
+  inputMessage.value = prompt
+  sendMessage()
+}
+
+onMounted(() => {
+  loadAgents()
+})
+</script>
+
+<template>
+  <!-- ── Panel 1: Agent List ─────────────────────────────────────────── -->
+  <UDashboardPanel id="agents-list" :default-size="25" :min-size="20" :max-size="40" resizable>
+    <template #header>
+      <UDashboardNavbar>
+        <template #title>
+          <div class="flex items-center gap-2">
+            <UIcon name="i-lucide-bot" class="w-4 h-4 text-primary" />
+            <span class="font-bold text-sm text-highlighted">Edge Agents</span>
+            <UBadge size="xs" color="neutral" variant="subtle">
+              {{ filteredAgents.length }}
+            </UBadge>
+          </div>
+        </template>
+        <template #right>
+          <div class="flex items-center gap-1.5">
+            <UButton
+              icon="i-lucide-plus"
+              label="New Agent"
+              size="xs"
+              color="primary"
+              @click="showCreateModal = true"
+            />
+            <UButton
+              icon="i-lucide-refresh-cw"
+              size="xs"
+              color="neutral"
+              variant="ghost"
+              title="Refresh agents"
+              :loading="agentsLoading"
+              @click="loadAgents"
+            />
+          </div>
+        </template>
+      </UDashboardNavbar>
+
+      <UDashboardToolbar>
+        <UInput
+          v-model="agentSearch"
+          icon="i-lucide-search"
+          placeholder="Filter agents…"
+          class="w-full"
+        />
+      </UDashboardToolbar>
+    </template>
+
+    <template #body>
+      <!-- Loading Skeleton/State -->
+      <div v-if="agentsLoading" class="p-3 space-y-2">
+        <div
+          v-for="i in 4"
+          :key="i"
+          class="h-8 rounded bg-muted/60 animate-pulse flex items-center justify-between px-3"
+        >
+          <div class="flex items-center gap-2">
+            <div class="h-3.5 w-3.5 rounded bg-muted/40"></div>
+            <div class="h-3 w-24 rounded bg-muted/40"></div>
+          </div>
+          <div class="h-3 w-8 rounded-full bg-muted/40"></div>
+        </div>
+      </div>
+
+      <template v-else>
+        <UNavigationMenu
+          v-model="selectedAgentId"
+          :items="agentNavItems"
+          orientation="vertical"
+          variant="pill"
+        />
+
+        <div v-if="!filteredAgents.length" class="text-xs text-muted p-6 text-center">
+          No agents found
+        </div>
+      </template>
+    </template>
+  </UDashboardPanel>
+
+  <!-- ── Panel 2: Agent Chat Console ─────────────────────────────────── -->
+  <UDashboardPanel id="agent-chat" class="hidden lg:flex flex-1">
+    <template #header>
+      <UDashboardNavbar>
+        <template #title>
+          <div v-if="selectedAgent" class="flex items-center gap-2.5 min-w-0">
+            <div class="relative">
+              <UIcon name="i-lucide-bot" class="w-4 h-4 text-primary shrink-0" />
+              <span
+                class="absolute -top-0.5 -right-0.5 w-1.5 h-1.5 rounded-full"
+                :class="selectedAgent.status === 'busy' ? 'bg-warning' : 'bg-success'"
+              ></span>
+            </div>
+            <span class="font-bold text-sm text-highlighted truncate">{{
+              selectedAgent.name || selectedAgent.id
+            }}</span>
+            <UBadge size="xs" color="neutral" variant="subtle">
+              {{ selectedAgent.id }}
+            </UBadge>
+          </div>
+          <span v-else class="text-sm font-semibold text-muted">Select an agent</span>
+        </template>
+
+        <template #right>
+          <div v-if="selectedAgent" class="flex items-center gap-2">
+            <!-- Model Selector Dropdown -->
+            <USelect
+              v-model="selectedModelOverride"
+              :items="[
+                {
+                  label: `Default: ${selectedAgent.model?.split('/').pop() || 'Llama 3.3'}`,
+                  value: '',
+                },
+                ...availableModels,
+              ]"
+              size="xs"
+              class="font-mono text-[11px]"
+            />
+
+            <UButton
+              label="Clear Chat"
+              icon="i-lucide-trash"
+              size="xs"
+              color="error"
+              variant="subtle"
+              @click="showClearModal = true"
+            />
+            <UButton
+              icon="i-lucide-refresh-cw"
+              size="xs"
+              color="neutral"
+              variant="ghost"
+              title="Refresh conversation"
+              :loading="historyLoading"
+              @click="loadHistory(selectedAgent.id)"
+            />
+          </div>
+        </template>
+      </UDashboardNavbar>
+    </template>
+
+    <template #body>
+      <div v-if="selectedAgent" class="flex flex-col h-full overflow-hidden">
+        <!-- Messages Area -->
+        <div ref="chatScrollRef" class="flex-1 overflow-y-auto p-6 space-y-4">
+          <!-- Agent Info Header in Chat -->
+          <div class="p-4 bg-muted/30 border border-default rounded-lg text-xs space-y-2">
+            <div class="flex items-center justify-between">
+              <div class="flex items-center gap-2 font-semibold text-highlighted">
+                <UIcon name="i-lucide-sparkles" class="w-3.5 h-3.5 text-primary" />
+                {{ selectedAgent.name || selectedAgent.id }}
+              </div>
+              <UBadge size="xs" color="neutral" variant="subtle" class="font-mono">
+                {{ selectedAgent.model || "@cf/meta/llama-3.3-70b-instruct" }}
+              </UBadge>
+            </div>
+            <div class="text-muted">{{ selectedAgent.description }}</div>
+            <div
+              v-if="selectedAgent.systemPrompt"
+              class="bg-elevated/40 border border-default/60 rounded p-2 text-[11px] font-mono text-muted"
+            >
+              <span class="text-primary font-semibold">System:</span>
+              {{ selectedAgent.systemPrompt }}
+            </div>
+          </div>
+
+          <!-- Conversation Message List -->
+          <div v-if="messages.length" class="space-y-4">
+            <div
+              v-for="(msg, idx) in messages"
+              :key="idx"
+              class="flex gap-3 text-xs group"
+              :class="msg.role === 'user' ? 'justify-end' : 'justify-start'"
+            >
+              <!-- Agent Icon (if assistant) -->
+              <div
+                v-if="msg.role !== 'user'"
+                class="w-7 h-7 rounded-full bg-primary/10 border border-primary/20 flex items-center justify-center shrink-0 text-primary mt-0.5"
+              >
+                <UIcon name="i-lucide-bot" class="w-4 h-4" />
+              </div>
+
+              <!-- Bubble -->
+              <div
+                class="max-w-[75%] rounded-2xl p-3.5 space-y-1 relative"
+                :class="
+                  msg.role === 'user'
+                    ? 'bg-primary text-inverted rounded-tr-xs'
+                    : 'bg-elevated border border-default text-default rounded-tl-xs shadow-xs'
+                "
+              >
+                <div class="whitespace-pre-wrap break-words leading-relaxed">
+                  {{ msg.content }}
+                </div>
+                <div
+                  class="flex items-center justify-between gap-2 text-[10px] opacity-70 select-none pt-1"
+                >
+                  <div class="flex items-center gap-1.5 font-mono">
+                    <span v-if="msg.model" class="truncate max-w-[140px]">{{
+                      msg.model.split("/").pop()
+                    }}</span>
+                    <span v-if="msg.latencyMs" class="text-primary font-semibold"
+                      >{{ msg.latencyMs }}ms</span
+                    >
+                  </div>
+                  <div class="flex items-center gap-1">
+                    <UButton
+                      :icon="copiedMsgIndex === idx ? 'i-lucide-check' : 'i-lucide-copy'"
+                      :color="copiedMsgIndex === idx ? 'success' : 'neutral'"
+                      variant="ghost"
+                      size="xs"
+                      title="Copy message"
+                      class="opacity-0 group-hover:opacity-100 transition-opacity"
+                      @click="copyMessageContent(msg.content, idx)"
+                    />
+                    <span v-if="msg.timestamp">{{ msg.timestamp }}</span>
+                  </div>
+                </div>
+              </div>
+
+              <!-- User Icon (if user) -->
+              <div
+                v-if="msg.role === 'user'"
+                class="w-7 h-7 rounded-full bg-muted border border-default flex items-center justify-center shrink-0 text-muted mt-0.5"
+              >
+                <UIcon name="i-lucide-user" class="w-4 h-4" />
+              </div>
+            </div>
+          </div>
+
+          <!-- Empty Conversation / Suggested Prompts -->
+          <div v-else-if="!historyLoading" class="py-8 text-center space-y-4">
+            <div
+              class="w-12 h-12 rounded-full bg-primary/10 border border-primary/20 flex items-center justify-center text-primary mx-auto"
+            >
+              <UIcon name="i-lucide-message-square" class="w-6 h-6" />
+            </div>
+            <div>
+              <div class="font-bold text-sm text-highlighted">No messages yet</div>
+              <div class="text-xs text-muted mt-1">
+                Start a live conversation with this edge agent below.
+              </div>
+            </div>
+
+            <div class="flex flex-wrap justify-center gap-2 max-w-md mx-auto pt-2">
+              <UButton
+                v-for="(p, i) in defaultPrompts"
+                :key="i"
+                :label="p"
+                size="xs"
+                color="neutral"
+                variant="subtle"
+                class="text-left"
+                @click="selectPrompt(p)"
+              />
+            </div>
+          </div>
+
+          <!-- Typing / Running Indicator -->
+          <div v-if="chatRunning" class="flex items-center gap-3 text-xs">
+            <div
+              class="w-7 h-7 rounded-full bg-primary/10 border border-primary/20 flex items-center justify-center shrink-0 text-primary"
+            >
+              <UIcon name="i-lucide-bot" class="w-4 h-4" />
+            </div>
+            <div
+              class="bg-elevated border border-default rounded-2xl rounded-tl-xs px-4 py-2 text-muted flex items-center gap-2"
+            >
+              <UIcon name="i-lucide-loader-2" class="w-3.5 h-3.5 animate-spin text-primary" />
+              <span
+                >Thinking with
+                {{
+                  selectedModelOverride.split("/").pop() ||
+                  selectedAgent.model?.split("/").pop() ||
+                  "Edge AI"
+                }}…</span
+              >
+            </div>
+          </div>
+        </div>
+
+        <!-- Chat Input Bar -->
+        <div class="p-3 border-t border-default bg-elevated/40">
+          <form class="flex items-center gap-2" @submit.prevent="sendMessage">
+            <UInput
+              v-model="inputMessage"
+              placeholder="Type a message… (Press Enter to send)"
+              class="flex-1 text-xs"
+              :disabled="chatRunning"
+              @keydown.enter.prevent="sendMessage"
+            />
+            <UButton
+              type="submit"
+              icon="i-lucide-send"
+              color="primary"
+              size="sm"
+              :loading="chatRunning"
+              :disabled="!inputMessage.trim()"
+            />
+          </form>
+        </div>
+      </div>
+
+      <div
+        v-else
+        class="flex-1 flex flex-col items-center justify-center text-muted text-xs p-12 text-center"
+      >
+        <UIcon name="i-lucide-bot" class="w-8 h-8 mb-2 opacity-50 text-muted" />
+        Select an agent from the list to start a conversation.
+      </div>
+    </template>
+  </UDashboardPanel>
+
+  <!-- Clear Conversation Modal -->
+  <UModal v-model:open="showClearModal" title="Clear Conversation">
+    <template #body>
+      <div class="space-y-3">
+        <p class="text-xs text-default">
+          Are you sure you want to clear conversation history for
+          <span class="font-bold text-highlighted">{{
+            selectedAgent?.name || selectedAgent?.id
+          }}</span
+          >?
+        </p>
+        <p class="text-xs text-muted">
+          All stored messages in this agent's stateful memory will be wiped.
+        </p>
+      </div>
+    </template>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <UButton
+          label="Cancel"
+          color="neutral"
+          variant="ghost"
+          size="xs"
+          @click="showClearModal = false"
+        />
+        <UButton
+          label="Clear History"
+          color="error"
+          size="xs"
+          icon="i-lucide-trash"
+          :loading="clearingChat"
+          @click="handleClearConversation"
+        />
+      </div>
+    </template>
+  </UModal>
+
+  <!-- Create New Agent Modal -->
+  <UModal v-model:open="showCreateModal" title="Create Edge Agent">
+    <template #body>
+      <div class="space-y-3 text-xs">
+        <div>
+          <div class="text-muted mb-1 font-medium">Agent Name</div>
+          <UInput
+            v-model="newAgentName"
+            placeholder="e.g. Code Reviewer"
+            class="w-full font-sans"
+          />
+        </div>
+
+        <div>
+          <div class="text-muted mb-1 font-medium">Description</div>
+          <UInput
+            v-model="newAgentDesc"
+            placeholder="Brief summary of agent role"
+            class="w-full font-sans"
+          />
+        </div>
+
+        <div>
+          <div class="text-muted mb-1 font-medium">Model</div>
+          <USelect
+            v-model="newAgentModel"
+            :items="
+              availableModels.map((m) => ({ label: `${m.label} (${m.value})`, value: m.value }))
+            "
+            size="xs"
+            class="w-full font-mono text-xs"
+          />
+        </div>
+
+        <div>
+          <div class="text-muted mb-1 font-medium">System Instructions</div>
+          <UTextarea
+            v-model="newAgentSystem"
+            placeholder="You are an autonomous AI agent..."
+            :rows="3"
+            class="w-full font-mono text-xs"
+          />
+        </div>
+
+        <div>
+          <div class="text-muted mb-1 font-medium">Tools (Comma-separated)</div>
+          <UInput
+            v-model="newAgentTools"
+            placeholder="e.g. searchDocs, runQuery"
+            class="w-full font-mono text-xs"
+          />
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <UButton
+          label="Cancel"
+          color="neutral"
+          variant="ghost"
+          size="xs"
+          @click="showCreateModal = false"
+        />
+        <UButton
+          label="Create Agent"
+          color="primary"
+          size="xs"
+          icon="i-lucide-plus"
+          :loading="creatingAgent"
+          :disabled="!newAgentName.trim()"
+          @click="handleCreateAgent"
+        />
+      </div>
+    </template>
+  </UModal>
+</template>