From fd1621707604ea6442e5516bd4c9d949b6cabfa7 Mon Sep 17 00:00:00 2001
From: "Gan, Jimmy" <jimmy.gan@adidas.com>
Date: Sun, 12 Jul 2026 00:15:31 +0800
Subject: [PATCH] agent frontend: Agents tab UI + sprint 003.5 spec

---
 docs/specs/sprint-003.5-agent-frontend.md | 13 ++++++
 frontend/src/routes/Agents.svelte         | 48 +++++++++++++++++++++++
 2 files changed, 61 insertions(+)
 create mode 100644 docs/specs/sprint-003.5-agent-frontend.md
 create mode 100644 frontend/src/routes/Agents.svelte

diff --git a/docs/specs/sprint-003.5-agent-frontend.md b/docs/specs/sprint-003.5-agent-frontend.md
new file mode 100644
index 0000000..bcfed40
--- /dev/null
+++ b/docs/specs/sprint-003.5-agent-frontend.md
@@ -0,0 +1,13 @@
+# Sprint 003.5: Agent Queue Frontend Tab
+
+## T3.5 Agent Queue Frontend Tab
+- **Status Filtering:** Add filter buttons (All, Pending, Processing, Done, Failed).
+- **Queue Table:** Display ID, Video Title, User Prompt, Status, Result, and Created At.
+- **Delete/Retry Actions:** Provide buttons to remove items or retry (if failed).
+- **Auto-Refresh:** Poll /api/agent-queue every 10s.
+
+## ACs
+- [ ] Users can see 'Agents' tab in the dashboard.
+- [ ] Tab displays agent_queue items fetched from backend.
+- [ ] Status filtering works as expected.
+- [ ] Auto-refresh updates the table live.
diff --git a/frontend/src/routes/Agents.svelte b/frontend/src/routes/Agents.svelte
new file mode 100644
index 0000000..f8bd7ee
--- /dev/null
+++ b/frontend/src/routes/Agents.svelte
@@ -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>