From 433a867d3f111e1eb873a69e2961436c090105b2 Mon Sep 17 00:00:00 2001
From: DBT <nvue.dev@gmail.com>
Date: Sat, 28 Feb 2026 09:00:27 +0000
Subject: [PATCH] webui split: separate task management page from task audit
 (audit-only)

---
 webui/src/App.tsx                |  2 +
 webui/src/components/Sidebar.tsx |  3 +-
 webui/src/i18n/index.ts          |  2 +
 webui/src/pages/TaskAudit.tsx    | 35 +------------
 webui/src/pages/Tasks.tsx        | 90 ++++++++++++++++++++++++++++++++
 5 files changed, 98 insertions(+), 34 deletions(-)
 create mode 100644 webui/src/pages/Tasks.tsx

diff --git a/webui/src/App.tsx b/webui/src/App.tsx
index 935a941..a52f129 100644
--- a/webui/src/App.tsx
+++ b/webui/src/App.tsx
@@ -12,6 +12,7 @@ import Logs from './pages/Logs';
 import Skills from './pages/Skills';
 import Memory from './pages/Memory';
 import TaskAudit from './pages/TaskAudit';
+import Tasks from './pages/Tasks';
 
 export default function App() {
   return (
@@ -29,6 +30,7 @@ export default function App() {
               <Route path="nodes" element={<Nodes />} />
               <Route path="memory" element={<Memory />} />
               <Route path="task-audit" element={<TaskAudit />} />
+              <Route path="tasks" element={<Tasks />} />
             </Route>
           </Routes>
         </BrowserRouter>
diff --git a/webui/src/components/Sidebar.tsx b/webui/src/components/Sidebar.tsx
index e220102..d87003a 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, ClipboardList } from 'lucide-react';
+import { LayoutDashboard, MessageSquare, Settings, Clock, Server, Terminal, Zap, FolderOpen, ClipboardList, ListTodo } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useAppContext } from '../context/AppContext';
 import NavItem from './NavItem';
@@ -22,6 +22,7 @@ const Sidebar: React.FC = () => {
         <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" />
+        <NavItem icon={<ListTodo className="w-5 h-5" />} label={t('tasks')} to="/tasks" />
       </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 d5c64b1..7e7e9fb 100644
--- a/webui/src/i18n/index.ts
+++ b/webui/src/i18n/index.ts
@@ -14,6 +14,7 @@ const resources = {
       skills: 'Skills',
       memory: 'Memory',
       taskAudit: 'Task Audit',
+      tasks: 'Tasks',
       taskList: 'Task List',
       taskDetail: 'Task Detail',
       taskQueue: 'Task Queue',
@@ -183,6 +184,7 @@ const resources = {
       skills: '技能管理',
       memory: '记忆文件',
       taskAudit: '任务审计',
+      tasks: '任务管理',
       taskList: '任务列表',
       taskDetail: '任务详情',
       taskQueue: '任务队列',
diff --git a/webui/src/pages/TaskAudit.tsx b/webui/src/pages/TaskAudit.tsx
index 043ba7f..e00c2bf 100644
--- a/webui/src/pages/TaskAudit.tsx
+++ b/webui/src/pages/TaskAudit.tsx
@@ -32,7 +32,6 @@ const TaskAudit: React.FC = () => {
   const [loading, setLoading] = useState(false);
   const [sourceFilter, setSourceFilter] = useState('all');
   const [statusFilter, setStatusFilter] = useState('all');
-  const [draft, setDraft] = useState<any>({ id: '', content: '', priority: 'normal', status: 'todo', source: 'manual', due_at: '' });
   const [dailyReport, setDailyReport] = useState<string>('');
   const [reportDate, setReportDate] = useState<string>(new Date().toISOString().slice(0,10));
 
@@ -101,20 +100,6 @@ const TaskAudit: React.FC = () => {
     setSelected(null);
     setDraft({ id: '', content: '', priority: 'normal', status: 'todo', source: 'manual', due_at: '' });
   };
-  const saveTask = async (action: 'create'|'update'|'delete') => {
-    try {
-      const url = `/webui/api/tasks${q}`;
-      const payload: any = { action };
-      if (action === 'create') payload.item = draft;
-      if (action === 'update') { payload.id = draft.id; payload.item = draft; }
-      if (action === 'delete') payload.id = draft.id;
-      const r = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
-      if (!r.ok) throw new Error(await r.text());
-      await fetchData();
-    } catch (e) {
-      console.error(e);
-    }
-  };
   const selectedPretty = useMemo(() => selected ? JSON.stringify(selected, null, 2) : '', [selected]);
 
   return (
@@ -138,7 +123,6 @@ const TaskAudit: React.FC = () => {
             <option value="error">error</option>
             <option value="suppressed">suppressed</option>
           </select>
-          <button onClick={resetDraftForNew} className="px-3 py-1.5 rounded-lg bg-emerald-700/80 hover:bg-emerald-600 text-sm">{t('newTask')}</button>
           <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>
@@ -165,7 +149,7 @@ const TaskAudit: React.FC = () => {
               return (
                 <button
                   key={`${it.task_id || idx}-${it.time || idx}`}
-                  onClick={() => { setSelected(it); setDraft({ id: it.task_id || it.id || '', content: it.input_preview || it.content || '', priority: it.priority || 'normal', status: it.status || 'todo', source: it.source || 'manual', due_at: it.due_at || '' }); }}
+                  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>
@@ -188,22 +172,7 @@ const TaskAudit: React.FC = () => {
                 <button onClick={()=>taskAction('ignore')} className="px-2 py-1 text-xs rounded bg-zinc-700 hover:bg-zinc-600">{t('ignoreTask')}</button>
               </div>
             )}
-            <div className="p-3 border border-zinc-800 rounded-lg bg-zinc-950/40 space-y-2">
-              <div className="text-xs text-zinc-400 uppercase tracking-wider">{t('taskCrud')} {selected ? `(${selected.task_id || selected.id || ''})` : '(new)'}</div>
-              <input value={draft.id} onChange={(e)=>setDraft({ ...draft, id: e.target.value })} placeholder="id" className="w-full px-2 py-1 text-xs bg-zinc-900 border border-zinc-700 rounded" />
-              <textarea value={draft.content} onChange={(e)=>setDraft({ ...draft, content: e.target.value })} placeholder="content" className="w-full px-2 py-1 text-xs bg-zinc-900 border border-zinc-700 rounded min-h-[70px]" />
-              <div className="grid grid-cols-3 gap-2">
-                <input value={draft.priority} onChange={(e)=>setDraft({ ...draft, priority: e.target.value })} placeholder="priority" className="px-2 py-1 text-xs bg-zinc-900 border border-zinc-700 rounded" />
-                <input value={draft.status} onChange={(e)=>setDraft({ ...draft, status: e.target.value })} placeholder="status" className="px-2 py-1 text-xs bg-zinc-900 border border-zinc-700 rounded" />
-                <input value={draft.source} onChange={(e)=>setDraft({ ...draft, source: e.target.value })} placeholder="source" className="px-2 py-1 text-xs bg-zinc-900 border border-zinc-700 rounded" />
-              </div>
-              <div className="flex items-center gap-2 flex-wrap">
-                <button onClick={()=>saveTask('create')} className="px-2 py-1 text-xs rounded bg-emerald-700/70 hover:bg-emerald-600">{t('createTask')}</button>
-                <button onClick={()=>saveTask('update')} className="px-2 py-1 text-xs rounded bg-indigo-700/70 hover:bg-indigo-600">{t('updateTask')}</button>
-                <button onClick={()=>saveTask('delete')} className="px-2 py-1 text-xs rounded bg-red-700/70 hover:bg-red-600">{t('deleteTask')}</button>
-              </div>
-            </div>
-            {!selected ? (
+                        {!selected ? (
               <div className="text-zinc-500">{t('selectTask')}</div>
             ) : (
               <>
diff --git a/webui/src/pages/Tasks.tsx b/webui/src/pages/Tasks.tsx
new file mode 100644
index 0000000..b7e5bd5
--- /dev/null
+++ b/webui/src/pages/Tasks.tsx
@@ -0,0 +1,90 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useAppContext } from '../context/AppContext';
+
+type TaskItem = {
+  id?: string;
+  content?: string;
+  priority?: string;
+  status?: string;
+  source?: string;
+  due_at?: string;
+  updated_at?: string;
+};
+
+const Tasks: React.FC = () => {
+  const { t } = useTranslation();
+  const { q } = useAppContext();
+  const [items, setItems] = useState<TaskItem[]>([]);
+  const [selected, setSelected] = useState<TaskItem | null>(null);
+  const [draft, setDraft] = useState<TaskItem>({ id: '', content: '', priority: 'normal', status: 'todo', source: 'manual', due_at: '' });
+
+  const load = async () => {
+    const r = await fetch(`/webui/api/tasks${q}`);
+    if (!r.ok) return;
+    const j = await r.json();
+    const arr = Array.isArray(j.items) ? j.items : [];
+    setItems(arr);
+    if (arr.length > 0) {
+      setSelected(arr[0]);
+      setDraft(arr[0]);
+    }
+  };
+
+  useEffect(() => { load(); }, [q]);
+
+  const save = async (action: 'create' | 'update' | 'delete') => {
+    const payload: any = { action };
+    if (action === 'create') payload.item = draft;
+    if (action === 'update') { payload.id = draft.id; payload.item = draft; }
+    if (action === 'delete') payload.id = draft.id;
+    const r = await fetch(`/webui/api/tasks${q}`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload),
+    });
+    if (!r.ok) return;
+    await load();
+  };
+
+  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('tasks')}</h1>
+        <button onClick={() => setDraft({ id: '', content: '', priority: 'normal', status: 'todo', source: 'manual', due_at: '' })} className="px-3 py-1.5 rounded-lg bg-emerald-700/80 hover:bg-emerald-600 text-sm">{t('newTask')}</button>
+      </div>
+
+      <div className="flex-1 min-h-0 grid grid-cols-1 lg:grid-cols-[340px_1fr] gap-4">
+        <div className="border border-zinc-800 rounded-xl bg-zinc-900/40 overflow-hidden">
+          <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 max-h-[70vh]">
+            {items.map((it, idx) => (
+              <button key={it.id || idx} onClick={() => { setSelected(it); setDraft(it); }} className={`w-full text-left px-3 py-2 border-b border-zinc-800/50 hover:bg-zinc-800/40 ${selected?.id === it.id ? 'bg-indigo-500/15' : ''}`}>
+                <div className="text-sm text-zinc-100 truncate">{it.id || '-'}</div>
+                <div className="text-xs text-zinc-400 truncate">{it.status} · {it.priority} · {it.source}</div>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <div className="border border-zinc-800 rounded-xl bg-zinc-900/40 p-4 space-y-3">
+          <div className="text-xs text-zinc-400 uppercase tracking-wider">{t('taskCrud')}</div>
+          <input value={draft.id || ''} onChange={(e)=>setDraft({ ...draft, id: e.target.value })} placeholder="id" className="w-full px-2 py-1 text-xs bg-zinc-900 border border-zinc-700 rounded" />
+          <textarea value={draft.content || ''} onChange={(e)=>setDraft({ ...draft, content: e.target.value })} placeholder="content" className="w-full px-2 py-1 text-xs bg-zinc-900 border border-zinc-700 rounded min-h-[120px]" />
+          <div className="grid grid-cols-3 gap-2">
+            <input value={draft.priority || ''} onChange={(e)=>setDraft({ ...draft, priority: e.target.value })} placeholder="priority" className="px-2 py-1 text-xs bg-zinc-900 border border-zinc-700 rounded" />
+            <input value={draft.status || ''} onChange={(e)=>setDraft({ ...draft, status: e.target.value })} placeholder="status" className="px-2 py-1 text-xs bg-zinc-900 border border-zinc-700 rounded" />
+            <input value={draft.source || ''} onChange={(e)=>setDraft({ ...draft, source: e.target.value })} placeholder="source" className="px-2 py-1 text-xs bg-zinc-900 border border-zinc-700 rounded" />
+          </div>
+          <div className="flex items-center gap-2">
+            <button onClick={()=>save('create')} className="px-2 py-1 text-xs rounded bg-emerald-700/70 hover:bg-emerald-600">{t('createTask')}</button>
+            <button onClick={()=>save('update')} className="px-2 py-1 text-xs rounded bg-indigo-700/70 hover:bg-indigo-600">{t('updateTask')}</button>
+            <button onClick={()=>save('delete')} className="px-2 py-1 text-xs rounded bg-red-700/70 hover:bg-red-600">{t('deleteTask')}</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Tasks;