agent frontend: Agents tab UI + sprint 003.5 spec

2026-07-12 00:15:31 +08:00
parent 757c4b29c8
commit fd16217076
2 changed files with 61 additions and 0 deletions
@@ -0,0 +1,48 @@
+<script>
+  import { onMount } from 'svelte';
+  let queue = $state([]);
+  let filter = $state('all');
+
+  async function fetchQueue() {
+    const res = await fetch('/api/agent-queue');
+    if (res.ok) queue = await res.json();
+  }
+
+  onMount(() => {
+    fetchQueue();
+    const interval = setInterval(fetchQueue, 10000);
+    return () => clearInterval(interval);
+  });
+
+  const filteredQueue = $derived(
+    filter === 'all' ? queue : queue.filter(item => item.status === filter)
+  );
+</script>
+
+<div class="p-4">
+  <div class="flex gap-2 mb-4">
+    {#each ['all', 'pending', 'processing', 'done', 'failed'] as f}
+      <button 
+        class="px-3 py-1 rounded {filter === f ? 'bg-blue-600' : 'bg-gray-700'}"
+        onclick={() => filter = f}>
+        {f.toUpperCase()}
+      </button>
+    {/each}
+  </div>
+
+  <table class="w-full text-left">
+    <thead>
+      <tr><th>ID</th><th>Prompt</th><th>Status</th><th>Result</th></tr>
+    </thead>
+    <tbody>
+      {#each filteredQueue as item}
+        <tr class="border-b border-gray-700">
+          <td>{item.id}</td>
+          <td>{item.user_prompt}</td>
+          <td>{item.status}</td>
+          <td class="text-xs text-gray-400">{item.result || ''}</td>
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</div>