From 4dfd6ce11f4ad2121f0120624418f16e7e4bc8e0 Mon Sep 17 00:00:00 2001
From: DBT <nvue.dev@gmail.com>
Date: Sat, 28 Feb 2026 02:34:20 +0000
Subject: [PATCH] webui: add bilingual task audit split-view page and backend
 task audit API; final-result only long-run flow

---
 webui/src/App.tsx                |   2 +
 webui/src/components/Sidebar.tsx |   3 +-
 webui/src/i18n/index.ts          |  12 ++++
 webui/src/pages/TaskAudit.tsx    | 118 +++++++++++++++++++++++++++++++
 4 files changed, 134 insertions(+), 1 deletion(-)
 create mode 100644 webui/src/pages/TaskAudit.tsx

diff --git a/webui/src/App.tsx b/webui/src/App.tsx
index 78b9ccc..935a941 100644
--- a/webui/src/App.tsx
+++ b/webui/src/App.tsx
@@ -11,6 +11,7 @@ import Nodes from './pages/Nodes';
 import Logs from './pages/Logs';
 import Skills from './pages/Skills';
 import Memory from './pages/Memory';
+import TaskAudit from './pages/TaskAudit';
 
 export default function App() {
   return (
@@ -27,6 +28,7 @@ export default function App() {
               <Route path="cron" element={<Cron />} />
               <Route path="nodes" element={<Nodes />} />
               <Route path="memory" element={<Memory />} />
+              <Route path="task-audit" element={<TaskAudit />} />
             </Route>
           </Routes>
         </BrowserRouter>
diff --git a/webui/src/components/Sidebar.tsx b/webui/src/components/Sidebar.tsx
index c20e75b..e220102 100644
--- a/webui/src/components/Sidebar.tsx
+++ b/webui/src/components/Sidebar.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { LayoutDashboard, MessageSquare, Settings, Clock, Server, Terminal, Zap, FolderOpen } from 'lucide-react';
+import { LayoutDashboard, MessageSquare, Settings, Clock, Server, Terminal, Zap, FolderOpen, ClipboardList } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useAppContext } from '../context/AppContext';
 import NavItem from './NavItem';
@@ -21,6 +21,7 @@ const Sidebar: React.FC = () => {
         <NavItem icon={<Clock className="w-5 h-5" />} label={t('cronJobs')} to="/cron" />
         <NavItem icon={<Server className="w-5 h-5" />} label={t('nodes')} to="/nodes" />
         <NavItem icon={<FolderOpen className="w-5 h-5" />} label={t('memory')} to="/memory" />
+        <NavItem icon={<ClipboardList className="w-5 h-5" />} label={t('taskAudit')} to="/task-audit" />
       </nav>
 
       <div className="p-4 border-t border-zinc-800 bg-zinc-900/50">
diff --git a/webui/src/i18n/index.ts b/webui/src/i18n/index.ts
index 8314692..d2e2454 100644
--- a/webui/src/i18n/index.ts
+++ b/webui/src/i18n/index.ts
@@ -13,6 +13,12 @@ const resources = {
       logs: 'Real-time Logs',
       skills: 'Skills',
       memory: 'Memory',
+      taskAudit: 'Task Audit',
+      taskList: 'Task List',
+      taskDetail: 'Task Detail',
+      noTaskAudit: 'No task audit records',
+      selectTask: 'Select a task from the left list',
+      loading: 'Loading...',
       gatewayStatus: 'Gateway Status',
       online: 'Online',
       offline: 'Offline',
@@ -156,6 +162,12 @@ const resources = {
       logs: '实时日志',
       skills: '技能管理',
       memory: '记忆文件',
+      taskAudit: '任务审计',
+      taskList: '任务列表',
+      taskDetail: '任务详情',
+      noTaskAudit: '暂无任务审计记录',
+      selectTask: '请从左侧选择任务',
+      loading: '加载中...',
       gatewayStatus: '网关状态',
       online: '在线',
       offline: '离线',
diff --git a/webui/src/pages/TaskAudit.tsx b/webui/src/pages/TaskAudit.tsx
new file mode 100644
index 0000000..87ffc0f
--- /dev/null
+++ b/webui/src/pages/TaskAudit.tsx
@@ -0,0 +1,118 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useAppContext } from '../context/AppContext';
+
+type TaskAuditItem = {
+  task_id?: string;
+  time?: string;
+  channel?: string;
+  session?: string;
+  chat_id?: string;
+  sender_id?: string;
+  status?: string;
+  duration_ms?: number;
+  error?: string;
+  input_preview?: string;
+  [key: string]: any;
+};
+
+const TaskAudit: React.FC = () => {
+  const { t } = useTranslation();
+  const { q } = useAppContext();
+  const [items, setItems] = useState<TaskAuditItem[]>([]);
+  const [selected, setSelected] = useState<TaskAuditItem | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const fetchData = async () => {
+    setLoading(true);
+    try {
+      const url = `/webui/api/task_audit${q ? `${q}&limit=300` : '?limit=300'}`;
+      const r = await fetch(url);
+      if (!r.ok) throw new Error(await r.text());
+      const j = await r.json();
+      const arr = Array.isArray(j.items) ? j.items : [];
+      setItems(arr.reverse());
+      if (arr.length > 0) setSelected(arr[arr.length - 1]);
+    } catch (e) {
+      console.error(e);
+      setItems([]);
+      setSelected(null);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => { fetchData(); }, [q]);
+
+  const selectedPretty = useMemo(() => selected ? JSON.stringify(selected, null, 2) : '', [selected]);
+
+  return (
+    <div className="h-full p-4 md:p-6 flex flex-col gap-4">
+      <div className="flex items-center justify-between">
+        <h1 className="text-xl md:text-2xl font-semibold">{t('taskAudit')}</h1>
+        <button onClick={fetchData} className="px-3 py-1.5 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-sm">{loading ? t('loading') : t('refresh')}</button>
+      </div>
+
+      <div className="flex-1 min-h-0 grid grid-cols-1 lg:grid-cols-[360px_1fr] gap-4">
+        <div className="border border-zinc-800 rounded-xl bg-zinc-900/40 overflow-hidden flex flex-col min-h-0">
+          <div className="px-3 py-2 border-b border-zinc-800 text-xs text-zinc-400 uppercase tracking-wider">{t('taskList')}</div>
+          <div className="overflow-y-auto min-h-0">
+            {items.length === 0 ? (
+              <div className="p-4 text-sm text-zinc-500">{t('noTaskAudit')}</div>
+            ) : items.map((it, idx) => {
+              const active = selected?.task_id === it.task_id && selected?.time === it.time;
+              return (
+                <button
+                  key={`${it.task_id || idx}-${it.time || idx}`}
+                  onClick={() => setSelected(it)}
+                  className={`w-full text-left px-3 py-2 border-b border-zinc-800/60 hover:bg-zinc-800/40 ${active ? 'bg-indigo-500/15' : ''}`}
+                >
+                  <div className="text-sm font-medium text-zinc-100 truncate">{it.task_id || `task-${idx + 1}`}</div>
+                  <div className="text-xs text-zinc-400 truncate">{it.channel} · {it.status} · {it.duration_ms || 0}ms</div>
+                  <div className="text-[11px] text-zinc-500 truncate">{it.time}</div>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+
+        <div className="border border-zinc-800 rounded-xl bg-zinc-900/40 overflow-hidden flex flex-col min-h-0">
+          <div className="px-3 py-2 border-b border-zinc-800 text-xs text-zinc-400 uppercase tracking-wider">{t('taskDetail')}</div>
+          <div className="p-4 overflow-y-auto min-h-0 space-y-3 text-sm">
+            {!selected ? (
+              <div className="text-zinc-500">{t('selectTask')}</div>
+            ) : (
+              <>
+                <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
+                  <div><div className="text-zinc-500 text-xs">Task ID</div><div className="font-mono break-all">{selected.task_id}</div></div>
+                  <div><div className="text-zinc-500 text-xs">Status</div><div>{selected.status}</div></div>
+                  <div><div className="text-zinc-500 text-xs">Duration</div><div>{selected.duration_ms || 0}ms</div></div>
+                  <div><div className="text-zinc-500 text-xs">Channel</div><div>{selected.channel}</div></div>
+                  <div><div className="text-zinc-500 text-xs">Session</div><div className="font-mono break-all">{selected.session}</div></div>
+                  <div><div className="text-zinc-500 text-xs">Time</div><div>{selected.time}</div></div>
+                </div>
+
+                <div>
+                  <div className="text-zinc-500 text-xs mb-1">Input Preview</div>
+                  <div className="p-2 rounded bg-zinc-950/60 border border-zinc-800 whitespace-pre-wrap">{selected.input_preview || '-'}</div>
+                </div>
+
+                <div>
+                  <div className="text-zinc-500 text-xs mb-1">Error</div>
+                  <div className="p-2 rounded bg-zinc-950/60 border border-zinc-800 whitespace-pre-wrap text-red-300">{selected.error || '-'}</div>
+                </div>
+
+                <div>
+                  <div className="text-zinc-500 text-xs mb-1">Raw JSON</div>
+                  <pre className="p-2 rounded bg-zinc-950/60 border border-zinc-800 text-xs overflow-auto">{selectedPretty}</pre>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TaskAudit;