Implement v1 multi-agent task board with workflow visualization
This commit is contained in:
Chen Gu
@@ -9,3 +9,4 @@
|
|||||||
- 新增互动偏好：希望 Val 利用 heartbeat 主动发起对话；初始策略为“超过 1 小时未聊天则主动轻聊一次”，后续可按作息自适应调整。
|
- 新增互动偏好：希望 Val 利用 heartbeat 主动发起对话；初始策略为“超过 1 小时未聊天则主动轻聊一次”，后续可按作息自适应调整。
|
||||||
- 多智能体治理边界：Val 对“明显不应认可”的动作可直接否决；重大/不明确决策需上报谷老板最终拍板，谷老板保留最终否决权。
|
- 多智能体治理边界：Val 对“明显不应认可”的动作可直接否决；重大/不明确决策需上报谷老板最终拍板，谷老板保留最终否决权。
|
||||||
- 已根据《宪章v1》完成初版组织落地文档：`org/CONSTITUTION_v1.md`、`org/ROLE_CARDS.md`、`org/VAL_RUNBOOK.md`。
|
- 已根据《宪章v1》完成初版组织落地文档：`org/CONSTITUTION_v1.md`、`org/ROLE_CARDS.md`、`org/VAL_RUNBOOK.md`。
|
||||||
|
- 已完成“多 Agent 任务看板（状态流转可视化）”首版实现：`org/dashboard/index.html` + `tasks.sample.json` + `README.md`，支持样例加载与自定义 JSON 导入。
|
||||||
|
|||||||
@@ -0,0 +1,35 @@
|
|||||||
|
# 多 Agent 任务看板（状态流转可视化）
|
||||||
|
|
||||||
|
## 快速使用
|
||||||
|
|
||||||
|
1. 打开 `index.html`（直接双击或本地静态服务）
|
||||||
|
2. 默认加载 `tasks.sample.json`
|
||||||
|
3. 也可点击右上角上传你自己的 JSON 数据
|
||||||
|
|
||||||
|
## 数据格式
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"boardName": "看板名称",
|
||||||
|
"updatedAt": "2026-03-08T11:45:00+08:00",
|
||||||
|
"columns": ["Intake", "Draft", "Audit", "Approve/Reject", "Dispatch", "Execute", "Verify", "Report", "Archive"],
|
||||||
|
"tasks": [
|
||||||
|
{
|
||||||
|
"id": "T-001",
|
||||||
|
"title": "任务标题",
|
||||||
|
"owner": "工部",
|
||||||
|
"priority": "high",
|
||||||
|
"state": "Execute",
|
||||||
|
"risk": "low",
|
||||||
|
"tags": ["dashboard"],
|
||||||
|
"summary": "一句话描述"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 说明
|
||||||
|
|
||||||
|
- 看板内置三省六部状态流转提示
|
||||||
|
- 显示进行中、待审计、已完成、高风险四项统计
|
||||||
|
- 适合作为 Val 进行任务总调度时的可视化面板
|
||||||
@@ -0,0 +1,187 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Val 多 Agent 任务看板</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--bg: #0b1020;
|
||||||
|
--panel: #121933;
|
||||||
|
--panel2: #171f3d;
|
||||||
|
--text: #e8ecff;
|
||||||
|
--muted: #9aa7d6;
|
||||||
|
--ok: #22c55e;
|
||||||
|
--warn: #f59e0b;
|
||||||
|
--danger: #ef4444;
|
||||||
|
--accent: #60a5fa;
|
||||||
|
--border: #25315f;
|
||||||
|
}
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||||
|
background: linear-gradient(160deg, #080c1c, #101735 35%, #0a1126);
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
.wrap { max-width: 1320px; margin: 20px auto; padding: 0 16px 28px; }
|
||||||
|
.header {
|
||||||
|
display: flex; justify-content: space-between; gap: 16px; align-items: center;
|
||||||
|
background: rgba(18,25,51,.75); border: 1px solid var(--border);
|
||||||
|
border-radius: 14px; padding: 16px;
|
||||||
|
}
|
||||||
|
.title h1 { margin: 0; font-size: 20px; }
|
||||||
|
.title p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
|
||||||
|
.controls { display: flex; gap: 10px; align-items: center; }
|
||||||
|
input[type=file] { color: var(--muted); font-size: 12px; }
|
||||||
|
button {
|
||||||
|
border: 1px solid #3b4b86; background: #1a2550; color: #dce6ff;
|
||||||
|
border-radius: 10px; padding: 8px 12px; cursor: pointer;
|
||||||
|
}
|
||||||
|
.grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; margin-top: 14px; }
|
||||||
|
.panel {
|
||||||
|
background: rgba(18,25,51,.75); border: 1px solid var(--border);
|
||||||
|
border-radius: 14px; padding: 14px;
|
||||||
|
}
|
||||||
|
.panel h2 { margin: 0 0 10px; font-size: 15px; color: #c8d7ff; }
|
||||||
|
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
|
||||||
|
.stat { background: var(--panel2); border: 1px solid var(--border); border-radius: 10px; padding: 10px; }
|
||||||
|
.stat .k { color: var(--muted); font-size: 12px; }
|
||||||
|
.stat .v { font-size: 20px; margin-top: 4px; }
|
||||||
|
.flow {
|
||||||
|
display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
|
||||||
|
font-size: 12px; color: #b5c3ee;
|
||||||
|
}
|
||||||
|
.node { border: 1px solid #355; background: #18264d; padding: 5px 8px; border-radius: 999px; }
|
||||||
|
.arrow { color: #6e83c8; }
|
||||||
|
.kanban {
|
||||||
|
display: grid; grid-template-columns: repeat(9, minmax(220px, 1fr));
|
||||||
|
gap: 10px; overflow-x: auto; padding-bottom: 8px;
|
||||||
|
}
|
||||||
|
.col { background: #101735; border: 1px solid var(--border); border-radius: 10px; min-height: 140px; }
|
||||||
|
.col-head {
|
||||||
|
padding: 8px 10px; border-bottom: 1px solid var(--border);
|
||||||
|
display: flex; justify-content: space-between; color: #c5d4ff; font-size: 13px;
|
||||||
|
}
|
||||||
|
.col-body { padding: 8px; display: grid; gap: 8px; }
|
||||||
|
.card {
|
||||||
|
background: #162043; border: 1px solid #2f3f7a; border-radius: 10px;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
.card h4 { margin: 0; font-size: 13px; line-height: 1.35; }
|
||||||
|
.meta { margin-top: 6px; color: var(--muted); font-size: 11px; display: flex; flex-wrap: wrap; gap: 6px; }
|
||||||
|
.pill { border: 1px solid #3c4f93; border-radius: 999px; padding: 2px 6px; }
|
||||||
|
.risk-low { color: var(--ok); }
|
||||||
|
.risk-medium { color: var(--warn); }
|
||||||
|
.risk-high { color: var(--danger); }
|
||||||
|
.hint { margin-top: 10px; color: var(--muted); font-size: 12px; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="header">
|
||||||
|
<div class="title">
|
||||||
|
<h1 id="boardName">Val 多 Agent 任务看板</h1>
|
||||||
|
<p id="updatedAt">等待加载数据...</p>
|
||||||
|
</div>
|
||||||
|
<div class="controls">
|
||||||
|
<input id="fileInput" type="file" accept="application/json" />
|
||||||
|
<button id="loadSample">加载样例数据</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid">
|
||||||
|
<div class="panel">
|
||||||
|
<h2>状态总览</h2>
|
||||||
|
<div class="stats" id="stats"></div>
|
||||||
|
</div>
|
||||||
|
<div class="panel">
|
||||||
|
<h2>三省六部流转图</h2>
|
||||||
|
<div class="flow">
|
||||||
|
<span class="node">Intake</span><span class="arrow">→</span>
|
||||||
|
<span class="node">中书 Draft</span><span class="arrow">→</span>
|
||||||
|
<span class="node">门下 Audit</span><span class="arrow">→</span>
|
||||||
|
<span class="node">尚书 Dispatch</span><span class="arrow">→</span>
|
||||||
|
<span class="node">六部 Execute</span><span class="arrow">→</span>
|
||||||
|
<span class="node">Verify</span><span class="arrow">→</span>
|
||||||
|
<span class="node">Report</span><span class="arrow">→</span>
|
||||||
|
<span class="node">Archive</span>
|
||||||
|
</div>
|
||||||
|
<div class="hint">铁律：工部执行前需要门下+兵部双签；失败先进入刑部。</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel" style="margin-top: 14px;">
|
||||||
|
<h2>任务看板</h2>
|
||||||
|
<div class="kanban" id="kanban"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const state = { data: null };
|
||||||
|
|
||||||
|
function riskClass(risk) {
|
||||||
|
return risk === 'high' ? 'risk-high' : risk === 'medium' ? 'risk-medium' : 'risk-low';
|
||||||
|
}
|
||||||
|
|
||||||
|
function render(data) {
|
||||||
|
state.data = data;
|
||||||
|
const columns = data.columns || [];
|
||||||
|
const tasks = data.tasks || [];
|
||||||
|
|
||||||
|
document.getElementById('boardName').textContent = data.boardName || '多 Agent 任务看板';
|
||||||
|
document.getElementById('updatedAt').textContent = `更新时间：${data.updatedAt || '未知'} · 任务数 ${tasks.length}`;
|
||||||
|
|
||||||
|
const statsWrap = document.getElementById('stats');
|
||||||
|
const running = tasks.filter(t => ['Dispatch','Execute','Verify'].includes(t.state)).length;
|
||||||
|
const blocked = tasks.filter(t => t.state === 'Audit').length;
|
||||||
|
const done = tasks.filter(t => ['Report','Archive'].includes(t.state)).length;
|
||||||
|
const highRisk = tasks.filter(t => t.risk === 'high').length;
|
||||||
|
const statList = [
|
||||||
|
['进行中', running],
|
||||||
|
['待审计', blocked],
|
||||||
|
['已完成', done],
|
||||||
|
['高风险', highRisk]
|
||||||
|
];
|
||||||
|
statsWrap.innerHTML = statList.map(([k,v]) => `<div class="stat"><div class="k">${k}</div><div class="v">${v}</div></div>`).join('');
|
||||||
|
|
||||||
|
const kanban = document.getElementById('kanban');
|
||||||
|
kanban.innerHTML = columns.map(col => {
|
||||||
|
const list = tasks.filter(t => t.state === col);
|
||||||
|
return `<div class="col">
|
||||||
|
<div class="col-head"><span>${col}</span><span>${list.length}</span></div>
|
||||||
|
<div class="col-body">
|
||||||
|
${list.length ? list.map(t => `
|
||||||
|
<div class="card">
|
||||||
|
<h4>${t.id} · ${t.title}</h4>
|
||||||
|
<div class="meta">
|
||||||
|
<span class="pill">${t.owner || '未分配'}</span>
|
||||||
|
<span class="pill">P:${t.priority || 'n/a'}</span>
|
||||||
|
<span class="pill ${riskClass(t.risk)}">Risk:${t.risk || 'low'}</span>
|
||||||
|
</div>
|
||||||
|
<div class="meta">${t.summary || ''}</div>
|
||||||
|
</div>
|
||||||
|
`).join('') : `<div class="meta">暂无任务</div>`}
|
||||||
|
</div>
|
||||||
|
</div>`;
|
||||||
|
}).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadSample() {
|
||||||
|
const res = await fetch('./tasks.sample.json');
|
||||||
|
const data = await res.json();
|
||||||
|
render(data);
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById('loadSample').addEventListener('click', loadSample);
|
||||||
|
document.getElementById('fileInput').addEventListener('change', async (e) => {
|
||||||
|
const file = e.target.files?.[0];
|
||||||
|
if (!file) return;
|
||||||
|
const text = await file.text();
|
||||||
|
render(JSON.parse(text));
|
||||||
|
});
|
||||||
|
|
||||||
|
loadSample();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,53 @@
|
|||||||
|
{
|
||||||
|
"boardName": "Val 多 Agent 任务看板",
|
||||||
|
"updatedAt": "2026-03-08T11:45:00+08:00",
|
||||||
|
"columns": [
|
||||||
|
"Intake",
|
||||||
|
"Draft",
|
||||||
|
"Audit",
|
||||||
|
"Approve/Reject",
|
||||||
|
"Dispatch",
|
||||||
|
"Execute",
|
||||||
|
"Verify",
|
||||||
|
"Report",
|
||||||
|
"Archive"
|
||||||
|
],
|
||||||
|
"tasks": [
|
||||||
|
{
|
||||||
|
"id": "T-001",
|
||||||
|
"title": "实现多 Agent 任务看板（状态流转可视化）",
|
||||||
|
"owner": "工部",
|
||||||
|
"priority": "high",
|
||||||
|
"state": "Execute",
|
||||||
|
"risk": "low",
|
||||||
|
"tags": ["dashboard", "workflow"],
|
||||||
|
"summary": "前端页面 + 状态统计 + 流转图",
|
||||||
|
"createdAt": "2026-03-08 11:42",
|
||||||
|
"updatedAt": "2026-03-08 11:46"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "T-002",
|
||||||
|
"title": "审查执行前安全红线",
|
||||||
|
"owner": "兵部",
|
||||||
|
"priority": "high",
|
||||||
|
"state": "Audit",
|
||||||
|
"risk": "medium",
|
||||||
|
"tags": ["security"],
|
||||||
|
"summary": "确认无外发、无不可逆破坏动作",
|
||||||
|
"createdAt": "2026-03-08 11:43",
|
||||||
|
"updatedAt": "2026-03-08 11:44"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "T-003",
|
||||||
|
"title": "定义汇报模板并统一输出格式",
|
||||||
|
"owner": "礼部",
|
||||||
|
"priority": "medium",
|
||||||
|
"state": "Verify",
|
||||||
|
"risk": "low",
|
||||||
|
"tags": ["style", "report"],
|
||||||
|
"summary": "结论优先 + 风险提示 + 选项推荐",
|
||||||
|
"createdAt": "2026-03-08 11:44",
|
||||||
|
"updatedAt": "2026-03-08 11:46"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user