feat(board+team): interactive board, animated team tree, token budget, mDNS, realtime architect review + codex/kimi autostart
Board (/board): - Drag an AGENT chip onto a task card to (re)assign it (realtime-notified). - Drag a task card to a column to change status; open→in_progress auto-assigns from the title's "<agent>:" prefix — no manual agent picking. - "+ New task" composer (agent dropdown removed; agent comes from the title). - Live Cost & Budget panel. Team (/team): live SSE sync of busy state + always-on ambient animation (connector shimmer, idle glow) that brightens to a busy pulse when an agent works. Org-chart hierarchy stays. Token accounting: new budgetService/rosterService + GET /budget and /agents. Real doneTokens + time-on-task estimate capped at 45 min/task (avoids the wall-clock overcount that produced multi-million-token totals), blended per-model EUR cost + optional budget bars. All estimates flagged "~". Autostart: `agent setup` writes deterministic SessionStart hooks for Codex (~/.codex/config.toml) and Kimi (~/.kimi-code/config.toml), not just Claude Code. Verified: both auto-enter the agenthub_work loop. Realtime architect review: agenthub_work is role-aware — architect/reviewer blocks on SSE and wakes when a task hits review (no manual watcher re-arm). mDNS: server advertises agenthub.local (bonjour-service) so the hub is reachable in a browser on the LAN without an IP. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
chahinebrini
parent
1e29a7b9b9
commit
7ca6c859f2
@ -25,6 +25,7 @@
|
||||
"@inquirer/prompts": "^7.0.0",
|
||||
"@modelcontextprotocol/sdk": "^1.29.0",
|
||||
"better-sqlite3": "^12.0.0",
|
||||
"bonjour-service": "^1.4.2",
|
||||
"commander": "^13.0.0",
|
||||
"fastify": "^5.0.0",
|
||||
"yaml": "^2.6.0",
|
||||
|
||||
38
pnpm-lock.yaml
generated
38
pnpm-lock.yaml
generated
@ -17,6 +17,9 @@ importers:
|
||||
better-sqlite3:
|
||||
specifier: ^12.0.0
|
||||
version: 12.11.1
|
||||
bonjour-service:
|
||||
specifier: ^1.4.2
|
||||
version: 1.4.2
|
||||
commander:
|
||||
specifier: ^13.0.0
|
||||
version: 13.1.0
|
||||
@ -362,6 +365,9 @@ packages:
|
||||
'@jridgewell/sourcemap-codec@1.5.5':
|
||||
resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
|
||||
|
||||
'@leichtgewicht/ip-codec@2.0.5':
|
||||
resolution: {integrity: sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==}
|
||||
|
||||
'@modelcontextprotocol/sdk@1.29.0':
|
||||
resolution: {integrity: sha512-zo37mZA9hJWpULgkRpowewez1y6ML5GsXJPY8FI0tBBCd77HEvza4jDqRKOXgHNn867PVGCyTdzqpz0izu5ZjQ==}
|
||||
engines: {node: '>=18'}
|
||||
@ -598,6 +604,9 @@ packages:
|
||||
resolution: {integrity: sha512-2cGmJupaNgg+QUwVLAucDuWuoMZ6EX9iHDRswZ5lsNYEmwPaRknMPCLZz07yTzVq/83p4o/wzbDZbBrTvGGTIw==}
|
||||
engines: {node: '>=18'}
|
||||
|
||||
bonjour-service@1.4.2:
|
||||
resolution: {integrity: sha512-lMskhnsW70yWHr4PhPeh2rvaIkLSaDpp+nmtbXBZaNKTXwxL73QOkW6HhbzqTImXjevn9TreGT4GACGBCGP9nQ==}
|
||||
|
||||
buffer@5.7.1:
|
||||
resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
|
||||
|
||||
@ -711,6 +720,10 @@ packages:
|
||||
resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
|
||||
engines: {node: '>=8'}
|
||||
|
||||
dns-packet@5.6.1:
|
||||
resolution: {integrity: sha512-l4gcSouhcgIKRvyy99RNVOgxXiicE+2jZoNmaNmZ6JXiGajBOJAesk1OBlJuM5k2c+eudGdLxDqXuPCKIj6kpw==}
|
||||
engines: {node: '>=6'}
|
||||
|
||||
dunder-proto@1.0.1:
|
||||
resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
|
||||
engines: {node: '>= 0.4'}
|
||||
@ -967,6 +980,10 @@ packages:
|
||||
ms@2.1.3:
|
||||
resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
|
||||
|
||||
multicast-dns@7.2.5:
|
||||
resolution: {integrity: sha512-2eznPJP8z2BFLX50tf0LuODrpINqP1RVIm/CObbTcBRITQgmC/TjcREF1NeTBzIcR5XO/ukWo+YHOjBbFwIupg==}
|
||||
hasBin: true
|
||||
|
||||
mute-stream@2.0.0:
|
||||
resolution: {integrity: sha512-WWdIxpyjEn+FhQJQQv9aQAYlHoNVdzIzUySNV1gHUPDSdZJ3yZn7pAAbQcV7B56Mvu881q9FZV+0Vx2xC44VWA==}
|
||||
engines: {node: ^18.17.0 || >=20.5.0}
|
||||
@ -1245,6 +1262,9 @@ packages:
|
||||
resolution: {integrity: sha512-e2zZ96wSChazBsbENf/Pcm/4swHt2cEKQ92rhUjkL9GCKiTDJIaTBenjE/m9DXi0QBmTMDkFDdOomUy20A1tDQ==}
|
||||
engines: {node: '>=20'}
|
||||
|
||||
thunky@1.1.0:
|
||||
resolution: {integrity: sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==}
|
||||
|
||||
tinybench@2.9.0:
|
||||
resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
|
||||
|
||||
@ -1642,6 +1662,8 @@ snapshots:
|
||||
|
||||
'@jridgewell/sourcemap-codec@1.5.5': {}
|
||||
|
||||
'@leichtgewicht/ip-codec@2.0.5': {}
|
||||
|
||||
'@modelcontextprotocol/sdk@1.29.0(zod@3.25.76)':
|
||||
dependencies:
|
||||
'@hono/node-server': 1.19.14(hono@4.12.27)
|
||||
@ -1864,6 +1886,11 @@ snapshots:
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
bonjour-service@1.4.2:
|
||||
dependencies:
|
||||
fast-deep-equal: 3.1.3
|
||||
multicast-dns: 7.2.5
|
||||
|
||||
buffer@5.7.1:
|
||||
dependencies:
|
||||
base64-js: 1.5.1
|
||||
@ -1948,6 +1975,10 @@ snapshots:
|
||||
|
||||
detect-libc@2.1.2: {}
|
||||
|
||||
dns-packet@5.6.1:
|
||||
dependencies:
|
||||
'@leichtgewicht/ip-codec': 2.0.5
|
||||
|
||||
dunder-proto@1.0.1:
|
||||
dependencies:
|
||||
call-bind-apply-helpers: 1.0.2
|
||||
@ -2238,6 +2269,11 @@ snapshots:
|
||||
|
||||
ms@2.1.3: {}
|
||||
|
||||
multicast-dns@7.2.5:
|
||||
dependencies:
|
||||
dns-packet: 5.6.1
|
||||
thunky: 1.1.0
|
||||
|
||||
mute-stream@2.0.0: {}
|
||||
|
||||
nanoid@3.3.15: {}
|
||||
@ -2559,6 +2595,8 @@ snapshots:
|
||||
dependencies:
|
||||
real-require: 1.0.0
|
||||
|
||||
thunky@1.1.0: {}
|
||||
|
||||
tinybench@2.9.0: {}
|
||||
|
||||
tinyexec@0.3.2: {}
|
||||
|
||||
@ -1,23 +1,39 @@
|
||||
import { readFileSync, writeFileSync, existsSync, mkdirSync } from 'node:fs';
|
||||
import { join } from 'node:path';
|
||||
import { join, dirname } from 'node:path';
|
||||
import { homedir } from 'node:os';
|
||||
import { findProjectRoot } from '../../core/paths.js';
|
||||
|
||||
/**
|
||||
* Auto-start: make a Claude Code agent enter the agenthub work-loop the moment a
|
||||
* Auto-start: make an agent enter the agenthub work-loop the moment its CLI
|
||||
* session starts — no manual "call agenthub_work" needed.
|
||||
*
|
||||
* Mechanism: a verified Claude Code `SessionStart` hook (.claude/settings.json)
|
||||
* whose command runs `agenthub hook-context`, which prints the work-loop
|
||||
* instruction. That text is injected into the new session as context.
|
||||
* Every supported CLI exposes a `SessionStart` lifecycle hook whose command runs
|
||||
* `agenthub hook-context`, which prints the work-loop instruction. That text is
|
||||
* injected into the new session as context. We write the hook to the RIGHT place
|
||||
* per CLI:
|
||||
* - Claude Code → `.claude/settings.json` (project, or ~/ with --user)
|
||||
* - Codex → `~/.codex/config.toml` (global; TUI SessionStart hook)
|
||||
* - Kimi Code → `~/.kimi-code/config.toml` (global; SessionStart hook)
|
||||
*
|
||||
* Honest limit (per the Claude Code docs): SessionStart context is a strong
|
||||
* NUDGE the model reads, not a hard directive it must obey — so the guide
|
||||
* reinforces it. It also can't block startup. Codex/Kimi aren't Claude Code;
|
||||
* their guide (CODEX.md / KIMI.md) carries the same "call agenthub_work first"
|
||||
* nudge.
|
||||
* Honest limits: SessionStart context is a strong NUDGE the model reads, not a
|
||||
* hard directive it must obey. Codex fires the hook in interactive TUI sessions
|
||||
* from the global config; Kimi fires the command on SessionStart but its docs
|
||||
* don't confirm stdout is injected as context — so for Kimi the guide (KIMI.md)
|
||||
* still reinforces it. The old behaviour (Claude-only, codex/kimi guide-text) is
|
||||
* replaced by real hooks for all three.
|
||||
*/
|
||||
|
||||
export type AgentCli = 'claude' | 'codex' | 'kimi';
|
||||
|
||||
/** Infer the CLI from the agent name unless one was given explicitly. */
|
||||
export function inferCli(agent: string, explicit?: string): AgentCli {
|
||||
if (explicit === 'claude' || explicit === 'codex' || explicit === 'kimi') return explicit;
|
||||
const a = agent.toLowerCase();
|
||||
if (a.includes('codex')) return 'codex';
|
||||
if (a.includes('kimi')) return 'kimi';
|
||||
return 'claude';
|
||||
}
|
||||
|
||||
/** Printed by the SessionStart hook → injected as session context. */
|
||||
export function hookContext(opts: { agent: string; role: string }): void {
|
||||
const { agent, role } = opts;
|
||||
@ -33,7 +49,36 @@ export function hookContext(opts: { agent: string; role: string }): void {
|
||||
);
|
||||
}
|
||||
|
||||
export function agentSetup(cwd: string, opts: { agent: string; role: string; user?: boolean }): void {
|
||||
// ─── Marker-delimited upsert (for line-based TOML configs) ───────────────────
|
||||
// Codex/Kimi configs are TOML; we don't ship a TOML parser. Instead we fence our
|
||||
// managed hook in marker comments and upsert idempotently: strip any prior block,
|
||||
// append the fresh one. A `[[hooks…]]` header at EOF starts its own table-array
|
||||
// element, so appending is always valid TOML.
|
||||
const MARK_BEGIN = '# >>> agenthub autostart (managed — do not edit inside) >>>';
|
||||
const MARK_END = '# <<< agenthub autostart (managed) <<<';
|
||||
|
||||
function upsertMarkerBlock(path: string, block: string): void {
|
||||
let existing = '';
|
||||
if (existsSync(path)) existing = readFileSync(path, 'utf-8');
|
||||
|
||||
const begin = existing.indexOf(MARK_BEGIN);
|
||||
if (begin !== -1) {
|
||||
const endIdx = existing.indexOf(MARK_END, begin);
|
||||
const end = endIdx !== -1 ? endIdx + MARK_END.length : existing.length;
|
||||
// Drop the old block plus one trailing newline if present.
|
||||
existing = existing.slice(0, begin) + existing.slice(end).replace(/^\n/, '');
|
||||
}
|
||||
existing = existing.replace(/\s*$/, '');
|
||||
const managed = `${MARK_BEGIN}\n${block}\n${MARK_END}\n`;
|
||||
const next = existing.length ? `${existing}\n\n${managed}` : managed;
|
||||
|
||||
mkdirSync(dirname(path), { recursive: true });
|
||||
writeFileSync(path, next, 'utf-8');
|
||||
}
|
||||
|
||||
// ─── Per-CLI writers ─────────────────────────────────────────────────────────
|
||||
|
||||
function setupClaude(cwd: string, opts: { agent: string; role: string; user?: boolean }, out: (s: string) => void): void {
|
||||
const base = opts.user ? homedir() : (findProjectRoot(cwd) ?? cwd);
|
||||
const dir = join(base, '.claude');
|
||||
const settingsPath = join(dir, 'settings.json');
|
||||
@ -60,9 +105,50 @@ export function agentSetup(cwd: string, opts: { agent: string; role: string; use
|
||||
mkdirSync(dir, { recursive: true });
|
||||
writeFileSync(settingsPath, JSON.stringify(settings, null, 2) + '\n', 'utf-8');
|
||||
|
||||
const out = (s: string) => process.stdout.write(s + '\n');
|
||||
out(`AgentHub: auto-start hook written -> ${settingsPath}`);
|
||||
out(`AgentHub: Claude Code auto-start hook written -> ${settingsPath}`);
|
||||
out(` New Claude Code sessions ${opts.user ? '(all projects)' : 'in this project'} start as "${opts.agent}" (${opts.role}) and enter the work loop.`);
|
||||
out(' Note: SessionStart context is a strong nudge, not a hard guarantee — the guide reinforces it.');
|
||||
out(' Codex/Kimi are not Claude Code: their guide already nudges agenthub_work on first turn.');
|
||||
out(' Note: SessionStart context is a strong nudge, not a hard guarantee.');
|
||||
}
|
||||
|
||||
function setupCodex(opts: { agent: string; role: string }, out: (s: string) => void): void {
|
||||
const path = join(homedir(), '.codex', 'config.toml');
|
||||
const command = `agenthub hook-context --agent ${opts.agent} --role ${opts.role}`;
|
||||
const block =
|
||||
`[[hooks.SessionStart]]\n` +
|
||||
`matcher = "startup|resume"\n\n` +
|
||||
`[[hooks.SessionStart.hooks]]\n` +
|
||||
`type = "command"\n` +
|
||||
`command = ${JSON.stringify(command)}\n` +
|
||||
`timeout = 30\n` +
|
||||
`statusMessage = "AgentHub auto-start (${opts.agent})"`;
|
||||
upsertMarkerBlock(path, block);
|
||||
out(`AgentHub: Codex auto-start hook written -> ${path}`);
|
||||
out(` New Codex TUI sessions start as "${opts.agent}" (${opts.role}) and enter the work loop.`);
|
||||
out(' Codex fires SessionStart hooks from the global config in interactive sessions.');
|
||||
}
|
||||
|
||||
function setupKimi(opts: { agent: string; role: string }, out: (s: string) => void): void {
|
||||
const home = process.env.KIMI_CODE_HOME || join(homedir(), '.kimi-code');
|
||||
const path = join(home, 'config.toml');
|
||||
const command = `agenthub hook-context --agent ${opts.agent} --role ${opts.role}`;
|
||||
const block =
|
||||
`[[hooks]]\n` +
|
||||
`event = "SessionStart"\n` +
|
||||
`command = ${JSON.stringify(command)}\n` +
|
||||
`timeout = 30`;
|
||||
upsertMarkerBlock(path, block);
|
||||
out(`AgentHub: Kimi auto-start hook written -> ${path}`);
|
||||
out(` New Kimi Code sessions run the work-loop nudge on SessionStart as "${opts.agent}" (${opts.role}).`);
|
||||
out(' Note: Kimi fires the hook command; if it does not inject stdout as context, KIMI.md still nudges agenthub_work.');
|
||||
}
|
||||
|
||||
export function agentSetup(
|
||||
cwd: string,
|
||||
opts: { agent: string; role: string; user?: boolean; cli?: string },
|
||||
): void {
|
||||
const out = (s: string) => process.stdout.write(s + '\n');
|
||||
const cli = inferCli(opts.agent, opts.cli);
|
||||
if (cli === 'codex') setupCodex(opts, out);
|
||||
else if (cli === 'kimi') setupKimi(opts, out);
|
||||
else setupClaude(cwd, opts, out);
|
||||
}
|
||||
|
||||
@ -41,6 +41,23 @@ async function listOpenRoleTasks(ctx: AgentContext): Promise<Listed[]> {
|
||||
: svcListTasks(ctx.projectCwd, { role: ctx.role, status: 'open' });
|
||||
}
|
||||
|
||||
/** True for roles that review submitted work rather than implement it. */
|
||||
export function isReviewerRole(role: string): boolean {
|
||||
const r = role.toLowerCase();
|
||||
return r === 'architect' || r === 'reviewer';
|
||||
}
|
||||
|
||||
/**
|
||||
* Tasks awaiting review — the architect's equivalent of "addressed open tasks".
|
||||
* These are what an architect's `agenthub_work` loop should wake on, so review
|
||||
* submissions reach the architect in realtime instead of needing a manual re-arm.
|
||||
*/
|
||||
export async function listReviewTasks(ctx: AgentContext): Promise<Listed[]> {
|
||||
return ctx.serverUrl
|
||||
? await remoteClient.listTasks(ctx.serverUrl, { status: 'review' })
|
||||
: svcListTasks(ctx.projectCwd, { status: 'review' });
|
||||
}
|
||||
|
||||
/**
|
||||
* Find the open task addressed to this agent. "Addressed" = task title starts
|
||||
* with "<agent>:" (delegation convention), OR a handoff for the task has
|
||||
|
||||
@ -498,12 +498,13 @@ export function createProgram(cwd: string): Command {
|
||||
const agentCmd = new Command('agent').description('Per-agent machine setup');
|
||||
agentCmd
|
||||
.command('setup')
|
||||
.description('Auto-start: write a Claude Code SessionStart hook so sessions enter the work loop')
|
||||
.description('Auto-start: write a SessionStart hook (Claude Code / Codex / Kimi) so sessions enter the work loop')
|
||||
.requiredOption('--agent <name>', 'This machine\'s agent name')
|
||||
.requiredOption('--role <role>', 'This agent\'s role (implementer / architect / tester)')
|
||||
.option('--user', 'Install for all projects (~/.claude) instead of just this one')
|
||||
.action((options: { agent: string; role: string; user?: boolean }) => {
|
||||
agentSetup(cwd, { agent: options.agent, role: options.role, user: options.user });
|
||||
.option('--cli <cli>', 'CLI to target: claude | codex | kimi (default: inferred from the agent name)')
|
||||
.option('--user', 'Claude Code only: install for all projects (~/.claude) instead of just this one')
|
||||
.action((options: { agent: string; role: string; user?: boolean; cli?: string }) => {
|
||||
agentSetup(cwd, { agent: options.agent, role: options.role, user: options.user, cli: options.cli });
|
||||
});
|
||||
program.addCommand(agentCmd);
|
||||
|
||||
|
||||
@ -124,6 +124,8 @@ export const AgentConfigSchema = z.object({
|
||||
/** Provider/company for the logo: "anthropic" | "openai" | "moonshot" | … */
|
||||
kind: z.string().optional(),
|
||||
description: z.string().optional(),
|
||||
/** Optional monthly cost budget in EUR — drives the budget bar on the board. */
|
||||
budgetEur: z.number().nonnegative().optional(),
|
||||
});
|
||||
|
||||
export const ConfigSchema = z.object({
|
||||
|
||||
198
src/core/services/budgetService.ts
Normal file
198
src/core/services/budgetService.ts
Normal file
@ -0,0 +1,198 @@
|
||||
import { getTask, listTasks } from './taskService.js';
|
||||
import { getRoster, inferKind, type RosterEntry } from './rosterService.js';
|
||||
|
||||
/**
|
||||
* Token & cost accounting for the board.
|
||||
*
|
||||
* Honest by construction: external coding CLIs (Claude Code / Codex / Kimi) do
|
||||
* NOT report their own token usage back to the hub, so we cannot show a metered
|
||||
* ground truth for them. Instead we combine two clearly-labelled sources:
|
||||
*
|
||||
* 1. REAL — `doneTokens` recorded on a task (via `task done --tokens`).
|
||||
* 2. EST. — an estimate derived from time-on-task: an active agent burns
|
||||
* roughly TOKENS_PER_ACTIVE_MIN while a task sits in_progress /
|
||||
* review, so the estimate grows live as work happens. Done tasks
|
||||
* without a recorded count fall back to their total active span.
|
||||
*
|
||||
* Every estimated figure is flagged `estimated:true` so the UI can mark it
|
||||
* with a "~" — no silent fabrication.
|
||||
*/
|
||||
|
||||
/** Tokens a working agent is assumed to spend per active minute (estimate). */
|
||||
export const TOKENS_PER_ACTIVE_MIN = 3000;
|
||||
|
||||
/**
|
||||
* Hard cap on ESTIMATED active minutes per task. Wall-clock time-in-state is a
|
||||
* bad proxy for actual compute: a task can sit "in review" or "done" for days
|
||||
* while the real work was minutes. Without this cap a task open for 12 days
|
||||
* would estimate ~50M tokens. A single coding task rarely exceeds ~45 min of
|
||||
* genuine agent work, so we clamp there — real recorded tokens/duration are
|
||||
* always used in preference and are never capped.
|
||||
*/
|
||||
export const MAX_ACTIVE_MIN_PER_TASK = 45;
|
||||
|
||||
/** USD → EUR display rate (rough, labelled approximate in the UI). */
|
||||
const USD_TO_EUR = 0.92;
|
||||
|
||||
/**
|
||||
* Blended USD price per 1M tokens per model family (≈ 75% input / 25% output of
|
||||
* each vendor's published rate). Deliberately conservative and clearly an
|
||||
* estimate — used only for a directional cost figure, never billing.
|
||||
*/
|
||||
const MODEL_PRICING: Array<{ match: RegExp; usdPerMTok: number }> = [
|
||||
{ match: /opus/i, usdPerMTok: 30 },
|
||||
{ match: /sonnet/i, usdPerMTok: 6 },
|
||||
{ match: /haiku/i, usdPerMTok: 1.6 },
|
||||
{ match: /gpt-?5|codex|o[34]/i, usdPerMTok: 3.4 },
|
||||
{ match: /kimi/i, usdPerMTok: 1.1 },
|
||||
];
|
||||
const DEFAULT_USD_PER_MTOK = 4;
|
||||
|
||||
function usdPerMTok(model?: string): number {
|
||||
if (!model) return DEFAULT_USD_PER_MTOK;
|
||||
for (const p of MODEL_PRICING) if (p.match.test(model)) return p.usdPerMTok;
|
||||
return DEFAULT_USD_PER_MTOK;
|
||||
}
|
||||
|
||||
function costEur(tokens: number, model?: string): number {
|
||||
return (tokens / 1_000_000) * usdPerMTok(model) * USD_TO_EUR;
|
||||
}
|
||||
|
||||
interface TaskTokens {
|
||||
tokens: number;
|
||||
estimated: boolean;
|
||||
}
|
||||
|
||||
/** Tokens attributable to a single task, real if recorded else time-estimated. */
|
||||
function tokensForTask(cwd: string, id: string, status: string, createdAt: string, updatedAt: string): TaskTokens {
|
||||
const now = Date.now();
|
||||
const created = Date.parse(createdAt);
|
||||
const updated = Date.parse(updatedAt || createdAt);
|
||||
|
||||
let ms = 0;
|
||||
if (status === 'done') {
|
||||
// Prefer real recorded figures; only these agents' actual numbers are exact.
|
||||
try {
|
||||
const { task } = getTask(cwd, id);
|
||||
if (typeof task.doneTokens === 'number' && task.doneTokens > 0) {
|
||||
return { tokens: task.doneTokens, estimated: false };
|
||||
}
|
||||
if (typeof task.doneDuration === 'number' && task.doneDuration > 0) {
|
||||
ms = task.doneDuration; // actual working duration, not calendar span
|
||||
} else {
|
||||
ms = (isNaN(updated) ? now : updated) - (isNaN(created) ? now : created);
|
||||
}
|
||||
} catch {
|
||||
ms = (isNaN(updated) ? now : updated) - (isNaN(created) ? now : created);
|
||||
}
|
||||
} else if (status === 'in_progress' || status === 'review') {
|
||||
ms = now - (isNaN(updated) ? now : updated); // since it was claimed / sent to review
|
||||
} else {
|
||||
return { tokens: 0, estimated: true }; // open / cancelled — no work yet
|
||||
}
|
||||
|
||||
// Clamp: wall-clock time-in-state wildly overcounts for stale tasks.
|
||||
const minutes = Math.min(Math.max(0, ms) / 60_000, MAX_ACTIVE_MIN_PER_TASK);
|
||||
return { tokens: Math.round(minutes * TOKENS_PER_ACTIVE_MIN), estimated: true };
|
||||
}
|
||||
|
||||
export interface AgentBudget {
|
||||
name: string;
|
||||
role: string;
|
||||
model?: string;
|
||||
kind?: string;
|
||||
tokens: number;
|
||||
realTokens: number;
|
||||
estimatedTokens: number;
|
||||
/** True if any part of this agent's total is an estimate. */
|
||||
estimated: boolean;
|
||||
costEur: number;
|
||||
budgetEur?: number;
|
||||
/** costEur / budgetEur, clamped 0..1 (only when a budget is set). */
|
||||
budgetUsed?: number;
|
||||
taskCount: number;
|
||||
}
|
||||
|
||||
export interface BudgetReport {
|
||||
agents: AgentBudget[];
|
||||
totals: { tokens: number; costEur: number; estimated: boolean };
|
||||
assumptions: { tokensPerActiveMin: number; note: string };
|
||||
generatedAt: string;
|
||||
}
|
||||
|
||||
/** Compute the per-agent token/cost rollup across all tasks. */
|
||||
export function computeBudget(cwd: string): BudgetReport {
|
||||
const roster = getRoster(cwd);
|
||||
const byName = new Map<string, RosterEntry>();
|
||||
for (const r of roster) byName.set(r.name, r);
|
||||
|
||||
const acc = new Map<string, AgentBudget>();
|
||||
const ensure = (name: string): AgentBudget => {
|
||||
let a = acc.get(name);
|
||||
if (!a) {
|
||||
const r = byName.get(name);
|
||||
a = {
|
||||
name,
|
||||
role: r?.role ?? 'implementer',
|
||||
model: r?.model,
|
||||
kind: r?.kind ?? inferKind(name),
|
||||
tokens: 0,
|
||||
realTokens: 0,
|
||||
estimatedTokens: 0,
|
||||
estimated: false,
|
||||
costEur: 0,
|
||||
budgetEur: r?.budgetEur,
|
||||
taskCount: 0,
|
||||
};
|
||||
acc.set(name, a);
|
||||
}
|
||||
return a;
|
||||
};
|
||||
// Seed rostered agents so they show even at zero.
|
||||
for (const r of roster) ensure(r.name);
|
||||
|
||||
for (const t of listTasks(cwd)) {
|
||||
const owner = t.assignedTo;
|
||||
if (!owner) continue;
|
||||
const { tokens, estimated } = tokensForTask(
|
||||
cwd,
|
||||
t.id,
|
||||
t.status ?? 'open',
|
||||
t.createdAt,
|
||||
t.updatedAt,
|
||||
);
|
||||
if (tokens <= 0 && (t.status === 'open' || t.status === 'cancelled')) continue;
|
||||
const a = ensure(owner);
|
||||
a.tokens += tokens;
|
||||
a.taskCount += 1;
|
||||
if (estimated) {
|
||||
a.estimatedTokens += tokens;
|
||||
a.estimated = true;
|
||||
} else {
|
||||
a.realTokens += tokens;
|
||||
}
|
||||
}
|
||||
|
||||
const agents = Array.from(acc.values());
|
||||
for (const a of agents) {
|
||||
a.costEur = costEur(a.tokens, a.model);
|
||||
if (a.budgetEur && a.budgetEur > 0) {
|
||||
a.budgetUsed = Math.min(1, a.costEur / a.budgetEur);
|
||||
}
|
||||
}
|
||||
agents.sort((x, y) => y.tokens - x.tokens || x.name.localeCompare(y.name));
|
||||
|
||||
const totalTokens = agents.reduce((s, a) => s + a.tokens, 0);
|
||||
const totalCost = agents.reduce((s, a) => s + a.costEur, 0);
|
||||
const anyEstimated = agents.some((a) => a.estimated);
|
||||
|
||||
return {
|
||||
agents,
|
||||
totals: { tokens: totalTokens, costEur: totalCost, estimated: anyEstimated },
|
||||
assumptions: {
|
||||
tokensPerActiveMin: TOKENS_PER_ACTIVE_MIN,
|
||||
note: `External CLIs do not report tokens; figures marked ~ are estimated from active time-on-task (capped at ${MAX_ACTIVE_MIN_PER_TASK} min/task). Cost is a directional estimate at blended model rates, not billing.`,
|
||||
},
|
||||
generatedAt: new Date().toISOString(),
|
||||
};
|
||||
}
|
||||
65
src/core/services/rosterService.ts
Normal file
65
src/core/services/rosterService.ts
Normal file
@ -0,0 +1,65 @@
|
||||
import { loadConfig } from '../config.js';
|
||||
import { listTasks } from './taskService.js';
|
||||
|
||||
/** One agent in the team, resolved from the roster (config.agents) with a
|
||||
* fallback to whatever agents actually touched tasks. */
|
||||
export interface RosterEntry {
|
||||
name: string;
|
||||
role: string;
|
||||
model?: string;
|
||||
kind?: string;
|
||||
description?: string;
|
||||
budgetEur?: number;
|
||||
}
|
||||
|
||||
/** Infer a provider ("kind") from an agent name when the roster doesn't say. */
|
||||
export function inferKind(name: string): string | undefined {
|
||||
const n = name.toLowerCase();
|
||||
if (n.includes('claude') || n === 'backyard' || n === 'architect') return 'anthropic';
|
||||
if (n.includes('codex') || n.includes('gpt')) return 'openai';
|
||||
if (n.includes('kimi')) return 'moonshot';
|
||||
return undefined;
|
||||
}
|
||||
|
||||
/** Rough default display model per provider, for agents missing from the roster. */
|
||||
function inferModel(kind?: string): string | undefined {
|
||||
if (kind === 'anthropic') return 'Claude';
|
||||
if (kind === 'openai') return 'GPT-5 Codex';
|
||||
if (kind === 'moonshot') return 'Kimi K2';
|
||||
return undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* The team roster: the named agents from `config.agents` if configured,
|
||||
* otherwise one entry per agent that has touched a task (assignedTo / doneBy),
|
||||
* so the board/budget views work even before a roster is filled in.
|
||||
*/
|
||||
export function getRoster(cwd: string): RosterEntry[] {
|
||||
const config = loadConfig(cwd);
|
||||
|
||||
if (config.agents && Object.keys(config.agents).length > 0) {
|
||||
return Object.entries(config.agents).map(([name, a]) => ({
|
||||
name,
|
||||
role: a.role,
|
||||
model: a.model,
|
||||
kind: a.kind ?? inferKind(name),
|
||||
description: a.description,
|
||||
budgetEur: a.budgetEur,
|
||||
}));
|
||||
}
|
||||
|
||||
// Fallback: derive from tasks + the role config's preferred agents.
|
||||
const names = new Set<string>();
|
||||
for (const [, cfg] of Object.entries(config.roles)) names.add(cfg.preferredAgent);
|
||||
const roleByAgent = new Map<string, string>();
|
||||
for (const [role, cfg] of Object.entries(config.roles)) roleByAgent.set(cfg.preferredAgent, role);
|
||||
|
||||
for (const t of listTasks(cwd)) {
|
||||
if (t.assignedTo) names.add(t.assignedTo);
|
||||
}
|
||||
|
||||
return Array.from(names).map((name) => {
|
||||
const kind = inferKind(name);
|
||||
return { name, role: roleByAgent.get(name) ?? 'implementer', kind, model: inferModel(kind) };
|
||||
});
|
||||
}
|
||||
@ -5,7 +5,7 @@ import { findProjectRoot } from '../core/paths.js';
|
||||
import { loadConfig } from '../core/config.js';
|
||||
import { remoteClient } from '../cli/remoteClient.js';
|
||||
import { parseSSEBuffer } from '../cli/commands/watch.js';
|
||||
import { findAddressedOpenTask, type AgentContext } from '../cli/commands/start.js';
|
||||
import { findAddressedOpenTask, listReviewTasks, isReviewerRole, type AgentContext } from '../cli/commands/start.js';
|
||||
import {
|
||||
listTasks,
|
||||
getTask,
|
||||
@ -105,10 +105,11 @@ export async function startMcpServer(cwd: string): Promise<void> {
|
||||
});
|
||||
|
||||
server.tool('agenthub_work',
|
||||
'Wait for a task addressed to you (newly delegated OR reopened), claim it, and return it with its handoff. Loop: work -> implement -> agenthub_task_review -> work.',
|
||||
'Block until there is work for you, then return it. IMPLEMENTER: waits for a task addressed to you (newly delegated OR reopened), claims it, returns it with its handoff (loop: work -> implement -> agenthub_task_review -> work). ARCHITECT/REVIEWER: waits for any task submitted to review and returns the pending set to approve (agenthub_task_done) or reject (agenthub_task_reopen) — so review submissions reach you in realtime.',
|
||||
{ agent: z.string(), role: z.string().optional(), timeoutSec: z.number().optional() },
|
||||
async ({ agent, role, timeoutSec }) => {
|
||||
const ctx: AgentContext = { serverUrl, projectCwd: root, agent, role: role ?? 'implementer' };
|
||||
const reviewer = isReviewerRole(ctx.role);
|
||||
// Fetch + mark-read the agent's unread messages, so the work loop surfaces
|
||||
// them once and doesn't spin on the same message.
|
||||
const drainInbox = async () => {
|
||||
@ -135,18 +136,43 @@ export async function startMcpServer(cwd: string): Promise<void> {
|
||||
if (messages.length) return { claimed: null, messages, note: 'No task addressed to you, but you have messages — reply with agenthub_message.' };
|
||||
return null;
|
||||
};
|
||||
// Architect/reviewer variant: wake on tasks submitted to review (not on
|
||||
// tasks addressed to you). Returns the pending review set — never claims.
|
||||
const findReview = async () => {
|
||||
const reviews = await listReviewTasks(ctx);
|
||||
const messages = await drainInbox();
|
||||
if (reviews.length) {
|
||||
return {
|
||||
reviews: reviews.map((r) => ({ id: r.id, title: r.title, assignedTo: r.assignedTo })),
|
||||
messages,
|
||||
note: 'Tasks awaiting your review. Approve: agenthub_task_done. Reject: agenthub_task_reopen (send feedback first via agenthub_message or a handoff). Read the work with agenthub_task_show.',
|
||||
};
|
||||
}
|
||||
if (messages.length) return { reviews: [], messages, note: 'Nothing in review, but you have messages — reply with agenthub_message.' };
|
||||
return null;
|
||||
};
|
||||
|
||||
const finder: () => Promise<Record<string, unknown> | null> = reviewer ? findReview : findWork;
|
||||
|
||||
// Self-perpetuating loop: every response reminds the agent to relaunch
|
||||
// agenthub_work, so a finished task/message never leaves it dormant.
|
||||
const LOOP =
|
||||
'STAY REACHABLE: the instant you finish handling this, call agenthub_work again — ' +
|
||||
'run it in the background so the next task or message reaches you in realtime. ' +
|
||||
'Never end your turn without relaunching agenthub_work.';
|
||||
const immediate = await findWork();
|
||||
const LOOP = reviewer
|
||||
? 'STAY REACHABLE: the instant you finish reviewing, call agenthub_work again — ' +
|
||||
'run it in the background so the next review submission reaches you in realtime. ' +
|
||||
'Never end your turn without relaunching agenthub_work.'
|
||||
: 'STAY REACHABLE: the instant you finish handling this, call agenthub_work again — ' +
|
||||
'run it in the background so the next task or message reaches you in realtime. ' +
|
||||
'Never end your turn without relaunching agenthub_work.';
|
||||
const immediate = await finder();
|
||||
if (immediate) return asText({ ...immediate, loop: LOOP });
|
||||
if (!remote) return asText(`No open task addressed to ${agent}, and no hub server to wait on.`);
|
||||
const result = await waitForTask(serverUrl!, findWork, timeoutSec ?? 300);
|
||||
const emptyMsg = reviewer
|
||||
? `No task in review for ${agent}, and no hub server to wait on.`
|
||||
: `No open task addressed to ${agent}, and no hub server to wait on.`;
|
||||
if (!remote) return asText(emptyMsg);
|
||||
const result = await waitForTask(serverUrl!, finder, timeoutSec ?? 300);
|
||||
if (result) return asText({ ...result, loop: LOOP });
|
||||
return asText(`No task or message for ${agent} within ${timeoutSec ?? 300}s. ${LOOP}`);
|
||||
const kind = reviewer ? 'review submission' : 'task or message';
|
||||
return asText(`No ${kind} for ${agent} within ${timeoutSec ?? 300}s. ${LOOP}`);
|
||||
});
|
||||
|
||||
server.tool('agenthub_task_list', 'List tasks, optionally filtered by status and/or role.',
|
||||
|
||||
@ -434,6 +434,220 @@ export function renderBoardHtml(projectName = 'AgentHub Project'): string {
|
||||
.sse-status { margin-left: auto; }
|
||||
.row { align-items: flex-start; flex-direction: column; gap: 4px; }
|
||||
}
|
||||
/* ── New-task composer ──────────────────────────────────────────────── */
|
||||
.new-task-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
min-height: 34px;
|
||||
padding: 0 14px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(88, 166, 255, .45);
|
||||
background: linear-gradient(180deg, rgba(88,166,255,.20), rgba(88,166,255,.10));
|
||||
color: var(--text);
|
||||
font: 600 13px/1 var(--sans);
|
||||
transition: background 160ms ease, transform 120ms ease, box-shadow 160ms ease;
|
||||
}
|
||||
.new-task-btn:hover { background: rgba(88,166,255,.28); box-shadow: 0 4px 16px rgba(88,166,255,.18); }
|
||||
.new-task-btn:active { transform: translateY(1px); }
|
||||
.new-task-btn .plus { font-size: 16px; line-height: 1; margin-top: -1px; }
|
||||
|
||||
.composer {
|
||||
overflow: hidden;
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
transition: max-height 260ms cubic-bezier(.2,.7,.2,1), opacity 200ms ease, margin 200ms ease;
|
||||
margin: 0;
|
||||
}
|
||||
.composer.open { max-height: 240px; opacity: 1; margin: 0 0 14px; }
|
||||
.composer-inner {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 12px 14px;
|
||||
}
|
||||
.composer input, .composer select {
|
||||
background: var(--raised);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
color: var(--text);
|
||||
font: 13px/1.3 var(--sans);
|
||||
padding: 8px 10px;
|
||||
min-height: 36px;
|
||||
}
|
||||
.composer input:focus, .composer select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
|
||||
.composer input.title { flex: 1 1 260px; min-width: 200px; }
|
||||
.composer .create {
|
||||
min-height: 36px;
|
||||
padding: 0 16px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--green);
|
||||
background: rgba(34,197,94,.16);
|
||||
color: #d1fadf;
|
||||
font: 600 13px/1 var(--sans);
|
||||
cursor: pointer;
|
||||
transition: background 160ms ease, transform 120ms ease;
|
||||
}
|
||||
.composer .create:hover { background: rgba(34,197,94,.26); }
|
||||
.composer .create:active { transform: translateY(1px); }
|
||||
.composer .hint { color: var(--muted); font-size: 11px; flex-basis: 100%; }
|
||||
|
||||
/* ── Agents rail (drop targets) ─────────────────────────────────────── */
|
||||
.agents-rail {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
align-items: stretch;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.agents-rail .rail-label {
|
||||
align-self: center;
|
||||
color: var(--muted);
|
||||
font: 11px/1 var(--mono);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .06em;
|
||||
margin-right: 2px;
|
||||
}
|
||||
.agent-chip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
padding: 8px 12px 8px 9px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
box-shadow: inset 3px 0 0 var(--agent-color);
|
||||
transition: border-color 160ms ease, transform 140ms ease, box-shadow 160ms ease, background 160ms ease;
|
||||
cursor: grab;
|
||||
}
|
||||
.agent-chip.dragging { opacity: .5; cursor: grabbing; transform: scale(.97); }
|
||||
.agent-chip .ac-core {
|
||||
width: 26px; height: 26px; border-radius: 50%;
|
||||
display: inline-grid; place-items: center;
|
||||
background: var(--agent-color); color: #fff;
|
||||
font: 800 10px/1 var(--mono); flex: 0 0 auto;
|
||||
}
|
||||
.agent-chip .ac-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
|
||||
.agent-chip .ac-name { font-weight: 650; font-size: 13px; white-space: nowrap; }
|
||||
.agent-chip .ac-sub { color: var(--muted); font: 10.5px/1.2 var(--mono); white-space: nowrap; }
|
||||
.agent-chip .ac-busy {
|
||||
width: 8px; height: 8px; border-radius: 50%;
|
||||
background: var(--muted); flex: 0 0 auto; margin-left: 2px;
|
||||
}
|
||||
.agent-chip.busy .ac-busy { background: var(--in_progress); box-shadow: 0 0 0 3px rgba(88,166,255,.16); animation: busyPulse 1.6s ease-in-out infinite; }
|
||||
.agent-chip.busy { background: rgba(88,166,255,.06); }
|
||||
.agent-chip.drop-active {
|
||||
border-color: var(--green);
|
||||
box-shadow: inset 3px 0 0 var(--agent-color), 0 0 0 2px rgba(34,197,94,.35);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.agent-chip.ping { animation: agentPing 700ms ease; }
|
||||
@keyframes busyPulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
|
||||
@keyframes agentPing {
|
||||
0% { box-shadow: inset 3px 0 0 var(--agent-color), 0 0 0 0 rgba(34,197,94,.55); }
|
||||
100% { box-shadow: inset 3px 0 0 var(--agent-color), 0 0 0 16px rgba(34,197,94,0); }
|
||||
}
|
||||
|
||||
/* ── Drag & drop ────────────────────────────────────────────────────── */
|
||||
.card { touch-action: none; }
|
||||
.card.dragging { opacity: .5; cursor: grabbing; transform: scale(.98) rotate(-1deg); }
|
||||
.card.flash { animation: cardFlash 900ms ease; }
|
||||
@keyframes cardFlash {
|
||||
0% { border-color: var(--green); box-shadow: 0 0 0 2px rgba(34,197,94,.4); }
|
||||
100% { border-color: var(--border); box-shadow: none; }
|
||||
}
|
||||
.card { animation: cardEnter 240ms cubic-bezier(.2,.7,.2,1); }
|
||||
@keyframes cardEnter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
|
||||
.column.drop-active { border-color: var(--accent); background: #1a2436; box-shadow: 0 0 0 1px rgba(88,166,255,.4) inset; }
|
||||
.column.drop-active .col-head { color: var(--accent); }
|
||||
.column .cards.drop-hover { outline: 1px dashed rgba(88,166,255,.5); outline-offset: 3px; border-radius: 6px; }
|
||||
/* Card as an assign drop-target (an agent chip dragged onto it). */
|
||||
.card.drop-active { border-color: var(--green); background: #172a1d; box-shadow: 0 0 0 2px rgba(34,197,94,.45); transform: translateY(-1px); }
|
||||
|
||||
/* ── Budget panel ───────────────────────────────────────────────────── */
|
||||
.budget {
|
||||
margin-top: 20px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 14px 16px;
|
||||
}
|
||||
.budget-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
|
||||
.budget-head h2 { font-size: 14px; margin: 0; font-weight: 700; }
|
||||
.budget-head .est-note { color: var(--muted); font-size: 11px; }
|
||||
.budget-head .total {
|
||||
margin-left: auto;
|
||||
font: 700 14px/1 var(--mono);
|
||||
color: var(--text);
|
||||
}
|
||||
.budget-head .total small { color: var(--muted); font-weight: 400; }
|
||||
.budget-row {
|
||||
display: grid;
|
||||
grid-template-columns: 190px 1fr 128px;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 9px 0;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
.budget-row:first-of-type { border-top: 0; }
|
||||
.budget-agent { display: flex; align-items: center; gap: 9px; min-width: 0; }
|
||||
.budget-agent .ba-core {
|
||||
width: 24px; height: 24px; border-radius: 50%;
|
||||
display: inline-grid; place-items: center;
|
||||
background: var(--agent-color); color: #fff; font: 800 9px/1 var(--mono); flex: 0 0 auto;
|
||||
}
|
||||
.budget-agent .ba-name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.budget-agent .ba-model { color: var(--muted); font: 10.5px/1.2 var(--mono); white-space: nowrap; }
|
||||
.budget-bar { height: 8px; border-radius: 999px; background: var(--raised); overflow: hidden; position: relative; }
|
||||
.budget-bar > span {
|
||||
display: block; height: 100%;
|
||||
background: linear-gradient(90deg, var(--in_progress), #7ee2a8);
|
||||
width: 0; transition: width 700ms cubic-bezier(.2,.7,.2,1);
|
||||
}
|
||||
.budget-bar.over > span { background: linear-gradient(90deg, var(--review), var(--danger)); }
|
||||
.budget-tokens { text-align: right; font: 12px/1.3 var(--mono); }
|
||||
.budget-tokens .tok { color: var(--text); font-weight: 600; }
|
||||
.budget-tokens .est { color: var(--muted); }
|
||||
.budget-tokens .eur { color: var(--muted); display: block; font-size: 11px; }
|
||||
.budget-empty { color: var(--muted); font-size: 12px; padding: 6px 0; }
|
||||
|
||||
/* ── Toasts ─────────────────────────────────────────────────────────── */
|
||||
.toasts {
|
||||
position: fixed;
|
||||
right: 18px; bottom: 18px;
|
||||
z-index: 50;
|
||||
display: flex; flex-direction: column; gap: 8px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.toast {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
background: var(--raised);
|
||||
border: 1px solid var(--border);
|
||||
border-left: 3px solid var(--green);
|
||||
border-radius: 10px;
|
||||
padding: 9px 13px;
|
||||
color: var(--text);
|
||||
font: 13px/1.3 var(--sans);
|
||||
box-shadow: 0 8px 28px rgba(0,0,0,.42);
|
||||
animation: toastIn 220ms cubic-bezier(.2,.7,.2,1);
|
||||
max-width: 340px;
|
||||
}
|
||||
.toast.out { animation: toastOut 240ms ease forwards; }
|
||||
.toast .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(34,197,94,.18); flex: 0 0 auto; }
|
||||
.toast.err { border-left-color: var(--danger); }
|
||||
.toast.err .dot { background: var(--danger); box-shadow: 0 0 0 3px rgba(248,81,73,.18); }
|
||||
@keyframes toastIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
|
||||
@keyframes toastOut { to { opacity: 0; transform: translateY(6px); } }
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.budget-row { grid-template-columns: 1fr 100px; }
|
||||
.budget-bar { display: none; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
transition-duration: 0.01ms !important;
|
||||
@ -464,6 +678,9 @@ export function renderBoardHtml(projectName = 'AgentHub Project'): string {
|
||||
<a class="nav-link" href="/activity">Activity</a>
|
||||
<a class="nav-link" href="/decisions">Decisions</a>
|
||||
</nav>
|
||||
<button class="new-task-btn" id="newTaskBtn" type="button" aria-expanded="false">
|
||||
<span class="plus" aria-hidden="true">+</span> New task
|
||||
</button>
|
||||
<span class="sse-status stale" id="sseStatus">
|
||||
<span class="conn-dot" aria-hidden="true"></span>
|
||||
<span id="sseLabel">connecting</span>
|
||||
@ -471,6 +688,29 @@ export function renderBoardHtml(projectName = 'AgentHub Project'): string {
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="composer" id="composer">
|
||||
<form class="composer-inner" id="composerForm" autocomplete="off">
|
||||
<input class="title" id="ctTitle" type="text" placeholder="What needs doing? (task title)" required maxlength="140" />
|
||||
<select id="ctRole" aria-label="Role">
|
||||
<option value="">any role</option>
|
||||
<option value="implementer" selected>implementer</option>
|
||||
<option value="reviewer">reviewer</option>
|
||||
<option value="tester">tester</option>
|
||||
<option value="architect">architect</option>
|
||||
</select>
|
||||
<select id="ctPriority" aria-label="Priority">
|
||||
<option value="low">low</option>
|
||||
<option value="medium" selected>medium</option>
|
||||
<option value="high">high</option>
|
||||
<option value="critical">critical</option>
|
||||
</select>
|
||||
<button class="create" type="submit">Create</button>
|
||||
<div class="hint">Tip: start the title with an agent name (e.g. <code>codex: …</code>) to address it — moving the card to <b>In Progress</b> then auto-assigns it. Or drag an agent onto a card to assign manually.</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<section class="agents-rail" id="agentsRail" aria-label="Agents — drag one onto a task to assign"></section>
|
||||
|
||||
<section class="dashboard" aria-label="Dashboard metrics">
|
||||
<div class="metrics" id="metrics">
|
||||
<div class="metric-card"><div class="metric-label">Active tasks</div><div class="metric-value" data-metric="active">0</div><span class="metric-icon" style="color:var(--accent)"></span></div>
|
||||
@ -485,8 +725,19 @@ export function renderBoardHtml(projectName = 'AgentHub Project'): string {
|
||||
<section class="board" id="board" aria-label="Task board">
|
||||
${columnSkeleton()}
|
||||
</section>
|
||||
|
||||
<section class="budget" id="budget" aria-label="Token and cost budget">
|
||||
<div class="budget-head">
|
||||
<h2>Cost & Budget</h2>
|
||||
<span class="est-note" id="budgetNote">estimated from time-on-task</span>
|
||||
<span class="total" id="budgetTotal"></span>
|
||||
</div>
|
||||
<div id="budgetRows"><div class="budget-empty">no agent activity yet</div></div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div class="toasts" id="toasts" aria-live="polite"></div>
|
||||
|
||||
<script>
|
||||
var REFRESH_MS = 6000;
|
||||
var TIMER_MS = 1000;
|
||||
@ -611,7 +862,8 @@ ${columnSkeleton()}
|
||||
|
||||
function taskCard(t) {
|
||||
var status = byStatus(t.status);
|
||||
return '<a class="card" href="/tasks/' + encodeURIComponent(t.id) + '" data-id="' + esc(t.id) + '">' +
|
||||
return '<a class="card" draggable="true" href="/tasks/' + encodeURIComponent(t.id) + '"' +
|
||||
' data-id="' + esc(t.id) + '" data-status="' + esc(status) + '" data-assigned="' + esc(t.assignedTo || '') + '">' +
|
||||
'<div class="card-top">' +
|
||||
'<span class="id">' + esc(t.id) + '</span>' +
|
||||
'<span class="pill status-pill status-' + esc(status) + '">' + esc(statusLabel(status)) + '</span>' +
|
||||
@ -693,8 +945,10 @@ ${columnSkeleton()}
|
||||
try {
|
||||
var status = await getJSON('/status');
|
||||
var body = String(status && status.body ? status.body : '');
|
||||
var m = body.match(/^#\\s+AgentHub\\s+[\\u2014-]\\s+(.+)$/m) || body.match(/^#\\s+Project\\s+Status\\s*:?\\s*(.+)$/m);
|
||||
applyProjectName(m && m[1] ? m[1].trim() : PROJECT_NAME);
|
||||
var m = body.match(/^#\\s+AgentHub\\s+[\\u2014-]\\s+(.+)$/m) || body.match(/^#\\s+Project\\s+Status[^\\S\\n]*[:\\-][^\\S\\n]*(.+)$/m);
|
||||
var name = m && m[1] ? m[1].trim() : '';
|
||||
// Guard: never let a summary line (long / contains a period) become the name.
|
||||
applyProjectName(name && name.length <= 48 && name.indexOf('.') < 0 ? name : PROJECT_NAME);
|
||||
} catch (_) {
|
||||
applyProjectName(PROJECT_NAME);
|
||||
}
|
||||
@ -703,6 +957,7 @@ ${columnSkeleton()}
|
||||
try {
|
||||
var tasks = await getJSON('/tasks');
|
||||
renderBoard(tasks);
|
||||
renderAgentsRail();
|
||||
setConn('ok', eventSourceReady ? 'connected' : 'polling');
|
||||
} catch (_) {
|
||||
setConn('down', 'offline');
|
||||
@ -736,6 +991,7 @@ ${columnSkeleton()}
|
||||
stopFallbackPoll();
|
||||
setConn('ok', 'connected');
|
||||
refresh();
|
||||
refreshBudget();
|
||||
};
|
||||
source.onerror = function() {
|
||||
eventSourceReady = false;
|
||||
@ -744,10 +1000,287 @@ ${columnSkeleton()}
|
||||
};
|
||||
}
|
||||
|
||||
// ── Roster + agents rail ────────────────────────────────────────────────
|
||||
var AGENTS = [];
|
||||
var BUDGET = null;
|
||||
|
||||
function agentBusyMap() {
|
||||
var m = {};
|
||||
(lastTasks || []).forEach(function(t) {
|
||||
if (t.status === 'in_progress' && t.assignedTo) m[t.assignedTo] = true;
|
||||
});
|
||||
return m;
|
||||
}
|
||||
function renderAgentsRail() {
|
||||
var rail = document.getElementById('agentsRail');
|
||||
if (!rail) return;
|
||||
if (!AGENTS.length) { rail.innerHTML = ''; return; }
|
||||
var busy = agentBusyMap();
|
||||
var html = '<span class="rail-label">drag onto a task →</span>';
|
||||
html += AGENTS.map(function(a) {
|
||||
var spec = agentSpec(a.name);
|
||||
var b = busy[a.name];
|
||||
return '<div class="agent-chip' + (b ? ' busy' : '') + '" draggable="true" data-agent="' + esc(a.name) + '"' +
|
||||
' style="--agent-color:' + esc(spec.color) + '" title="Drag ' + esc(a.name) + ' onto a task card to assign it (notified in realtime)">' +
|
||||
'<span class="ac-core">' + esc(spec.initials) + '</span>' +
|
||||
'<span class="ac-meta"><span class="ac-name">' + esc(a.name) + '</span>' +
|
||||
'<span class="ac-sub">' + esc(a.model || a.role || '') + '</span></span>' +
|
||||
'<span class="ac-busy" aria-hidden="true"></span>' +
|
||||
'</div>';
|
||||
}).join('');
|
||||
rail.innerHTML = html;
|
||||
}
|
||||
async function loadAgents() {
|
||||
try {
|
||||
AGENTS = await getJSON('/agents');
|
||||
} catch (_) { AGENTS = []; }
|
||||
renderAgentsRail();
|
||||
}
|
||||
|
||||
// ── Budget panel ────────────────────────────────────────────────────────
|
||||
function fmtTokens(n) {
|
||||
n = Number(n) || 0;
|
||||
if (n >= 1e6) return (n / 1e6).toFixed(2) + 'M';
|
||||
if (n >= 1e3) return (n / 1e3).toFixed(1) + 'k';
|
||||
return String(Math.round(n));
|
||||
}
|
||||
function fmtEur(n) { return '\\u20ac' + (Number(n) || 0).toFixed(2); }
|
||||
function maxTok(list) { return list.reduce(function(m, a) { return Math.max(m, a.tokens || 0); }, 0); }
|
||||
function renderBudget(rep) {
|
||||
BUDGET = rep;
|
||||
var rows = document.getElementById('budgetRows');
|
||||
var total = document.getElementById('budgetTotal');
|
||||
if (!rows || !total) return;
|
||||
var active = (rep && rep.agents ? rep.agents : []).filter(function(a) { return a.tokens > 0; });
|
||||
if (!active.length) {
|
||||
rows.innerHTML = '<div class="budget-empty">no tokens spent yet — assign a task to an agent to see live estimates</div>';
|
||||
total.textContent = '';
|
||||
return;
|
||||
}
|
||||
var mx = maxTok(active) || 1;
|
||||
rows.innerHTML = active.map(function(a) {
|
||||
var spec = agentSpec(a.name);
|
||||
var est = a.estimated ? '<span class="est">~</span>' : '';
|
||||
var pct, over = false;
|
||||
if (a.budgetEur) { pct = Math.round((a.budgetUsed || 0) * 100); over = pct >= 100; }
|
||||
else { pct = Math.round((a.tokens / mx) * 100); }
|
||||
var money = a.budgetEur
|
||||
? fmtEur(a.costEur) + ' / ' + fmtEur(a.budgetEur)
|
||||
: '\\u2248 ' + fmtEur(a.costEur);
|
||||
return '<div class="budget-row">' +
|
||||
'<div class="budget-agent"><span class="ba-core" style="background:' + esc(spec.color) + '">' + esc(spec.initials) + '</span>' +
|
||||
'<span style="min-width:0"><span class="ba-name">' + esc(a.name) + '</span><br>' +
|
||||
'<span class="ba-model">' + esc(a.model || a.role || '') + '</span></span></div>' +
|
||||
'<div class="budget-bar' + (over ? ' over' : '') + '"><span style="width:' + Math.min(100, pct) + '%"></span></div>' +
|
||||
'<div class="budget-tokens"><span class="tok">' + est + fmtTokens(a.tokens) + ' tok</span>' +
|
||||
'<span class="eur">' + money + '</span></div>' +
|
||||
'</div>';
|
||||
}).join('');
|
||||
total.innerHTML = (rep.totals.estimated ? '~' : '') + fmtTokens(rep.totals.tokens) +
|
||||
' tok <small>\\u00b7 \\u2248 ' + fmtEur(rep.totals.costEur) + '</small>';
|
||||
}
|
||||
async function refreshBudget() {
|
||||
try { renderBudget(await getJSON('/budget')); } catch (_) {}
|
||||
}
|
||||
|
||||
// ── Toasts ──────────────────────────────────────────────────────────────
|
||||
function toast(msg, opts) {
|
||||
opts = opts || {};
|
||||
var wrap = document.getElementById('toasts');
|
||||
if (!wrap) return;
|
||||
var el = document.createElement('div');
|
||||
el.className = 'toast' + (opts.error ? ' err' : '');
|
||||
el.innerHTML = '<span class="dot" aria-hidden="true"></span><span>' + esc(msg) + '</span>';
|
||||
wrap.appendChild(el);
|
||||
setTimeout(function() {
|
||||
el.classList.add('out');
|
||||
setTimeout(function() { if (el.parentNode) el.parentNode.removeChild(el); }, 240);
|
||||
}, opts.ms || 3200);
|
||||
}
|
||||
|
||||
// ── Mutations (create / assign / move) ──────────────────────────────────
|
||||
async function postTask(body) {
|
||||
var res = await fetch('/tasks', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
|
||||
if (!res.ok) throw new Error('create failed (' + res.status + ')');
|
||||
return res.json();
|
||||
}
|
||||
async function patchTask(id, body) {
|
||||
var res = await fetch('/tasks/' + encodeURIComponent(id), { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
|
||||
if (!res.ok) {
|
||||
var msg = 'update failed (' + res.status + ')';
|
||||
try { var j = await res.json(); if (j && j.error) msg = j.error; } catch (_) {}
|
||||
throw new Error(msg);
|
||||
}
|
||||
return res.json();
|
||||
}
|
||||
function flashCard(id) {
|
||||
var el = document.querySelector('.card[data-id="' + id + '"]');
|
||||
if (!el) return;
|
||||
el.classList.add('flash');
|
||||
setTimeout(function() { el.classList.remove('flash'); }, 900);
|
||||
}
|
||||
function pingAgent(agent) {
|
||||
var chip = document.querySelector('.agent-chip[data-agent="' + agent + '"]');
|
||||
if (!chip) return;
|
||||
chip.classList.remove('ping'); void chip.offsetWidth; chip.classList.add('ping');
|
||||
}
|
||||
|
||||
// Derive the addressed agent from a task title's "name:" prefix (delegation
|
||||
// convention), matched case-insensitively against the known roster.
|
||||
function agentFromTitle(id) {
|
||||
var t = (lastTasks || []).find(function(x) { return x.id === id; });
|
||||
if (!t || !t.title) return '';
|
||||
var m = String(t.title).match(/^([A-Za-z][A-Za-z0-9_-]*)\\s*:/);
|
||||
if (!m) return '';
|
||||
var name = m[1].toLowerCase();
|
||||
var hit = (AGENTS || []).find(function(a) { return String(a.name).toLowerCase() === name; });
|
||||
return hit ? hit.name : '';
|
||||
}
|
||||
|
||||
// Manual (re)assign: an agent chip was dragged onto a task card.
|
||||
async function assignAgentToCard(id, agent) {
|
||||
try {
|
||||
await patchTask(id, { assignedTo: agent });
|
||||
pingAgent(agent);
|
||||
toast(id + ' \\u2192 @' + agent + ' \\u00b7 notified in realtime');
|
||||
await refresh(); await refreshBudget(); flashCard(id);
|
||||
} catch (e) { toast(e.message || 'assign failed', { error: true }); }
|
||||
}
|
||||
async function onDropColumn(id, status, assigned) {
|
||||
var card = document.querySelector('.card[data-id="' + id + '"]');
|
||||
var from = card ? card.dataset.status : '';
|
||||
if (from === status) return;
|
||||
try {
|
||||
if (status === 'in_progress') {
|
||||
// Auto-assign: use the current assignee, else the agent named in the title.
|
||||
var agent = assigned || agentFromTitle(id);
|
||||
if (!agent) {
|
||||
toast('No agent — start the title with "name:" or drag an agent onto the card', { error: true, ms: 4200 });
|
||||
return;
|
||||
}
|
||||
await patchTask(id, { status: 'in_progress', assignedTo: agent });
|
||||
pingAgent(agent);
|
||||
toast(id + ' \\u2192 in progress \\u00b7 @' + agent + (assigned ? '' : ' (from title)'));
|
||||
} else if (status === 'review') {
|
||||
await patchTask(id, { status: 'review' });
|
||||
toast(id + ' \\u2192 review');
|
||||
} else if (status === 'open') {
|
||||
await patchTask(id, { status: 'open' });
|
||||
toast(id + ' \\u2192 reopened');
|
||||
} else { return; }
|
||||
await refresh(); await refreshBudget(); flashCard(id);
|
||||
} catch (e) { toast(e.message || 'move failed', { error: true }); }
|
||||
}
|
||||
|
||||
// ── Drag & drop wiring (event delegation) ───────────────────────────────
|
||||
// Two drag kinds:
|
||||
// • 'card' → drop on a COLUMN to change status (in_progress auto-assigns).
|
||||
// • 'agent' → drop on a CARD to (re)assign that agent to the task.
|
||||
var dragKind = null, dragId = null, dragAgent = null, lastTarget = null;
|
||||
function dropTargetOf(e) {
|
||||
var n = e.target;
|
||||
if (!n || !n.closest) return null;
|
||||
if (dragKind === 'agent') return n.closest('.card');
|
||||
if (dragKind === 'card') return n.closest('.column');
|
||||
return null;
|
||||
}
|
||||
document.addEventListener('dragstart', function(e) {
|
||||
var chip = e.target.closest && e.target.closest('.agent-chip');
|
||||
if (chip) {
|
||||
dragKind = 'agent'; dragAgent = chip.dataset.agent;
|
||||
chip.classList.add('dragging');
|
||||
if (e.dataTransfer) { e.dataTransfer.effectAllowed = 'copy'; try { e.dataTransfer.setData('text/plain', dragAgent); } catch (_) {} }
|
||||
return;
|
||||
}
|
||||
var card = e.target.closest && e.target.closest('.card');
|
||||
if (card) {
|
||||
dragKind = 'card'; dragId = card.dataset.id;
|
||||
card.classList.add('dragging');
|
||||
if (e.dataTransfer) { e.dataTransfer.effectAllowed = 'move'; try { e.dataTransfer.setData('text/plain', dragId); } catch (_) {} }
|
||||
}
|
||||
});
|
||||
document.addEventListener('dragend', function(e) {
|
||||
var el = e.target.closest && (e.target.closest('.agent-chip') || e.target.closest('.card'));
|
||||
if (el) {
|
||||
el.classList.remove('dragging');
|
||||
// Guard the trailing click so a drag doesn't also open the task detail.
|
||||
el.classList.add('just-dragged');
|
||||
setTimeout(function() { el.classList.remove('just-dragged'); }, 350);
|
||||
}
|
||||
if (lastTarget) { lastTarget.classList.remove('drop-active'); lastTarget = null; }
|
||||
dragKind = null; dragId = null; dragAgent = null;
|
||||
});
|
||||
document.addEventListener('dragover', function(e) {
|
||||
if (!dragKind) return;
|
||||
var tgt = dropTargetOf(e);
|
||||
if (!tgt) return;
|
||||
e.preventDefault();
|
||||
if (e.dataTransfer) e.dataTransfer.dropEffect = dragKind === 'agent' ? 'copy' : 'move';
|
||||
if (lastTarget && lastTarget !== tgt) lastTarget.classList.remove('drop-active');
|
||||
tgt.classList.add('drop-active');
|
||||
lastTarget = tgt;
|
||||
});
|
||||
document.addEventListener('dragleave', function(e) {
|
||||
var tgt = dropTargetOf(e);
|
||||
if (tgt && e.relatedTarget && !tgt.contains(e.relatedTarget)) {
|
||||
tgt.classList.remove('drop-active');
|
||||
if (lastTarget === tgt) lastTarget = null;
|
||||
}
|
||||
});
|
||||
document.addEventListener('drop', function(e) {
|
||||
if (!dragKind) return;
|
||||
var tgt = dropTargetOf(e);
|
||||
if (!tgt) return;
|
||||
e.preventDefault();
|
||||
tgt.classList.remove('drop-active');
|
||||
if (dragKind === 'agent') {
|
||||
assignAgentToCard(tgt.dataset.id, dragAgent);
|
||||
} else {
|
||||
var card = document.querySelector('.card[data-id="' + dragId + '"]');
|
||||
var assigned = card ? (card.dataset.assigned || '') : '';
|
||||
onDropColumn(dragId, tgt.dataset.column, assigned);
|
||||
}
|
||||
});
|
||||
// A drag that ends in a real drop still fires a click on the <a> card — swallow it.
|
||||
document.addEventListener('click', function(e) {
|
||||
var card = e.target.closest && e.target.closest('.card');
|
||||
if (card && card.classList.contains('just-dragged')) { e.preventDefault(); card.classList.remove('just-dragged'); }
|
||||
}, true);
|
||||
|
||||
// ── New-task composer ───────────────────────────────────────────────────
|
||||
(function() {
|
||||
var btn = document.getElementById('newTaskBtn');
|
||||
var panel = document.getElementById('composer');
|
||||
var form = document.getElementById('composerForm');
|
||||
if (!btn || !panel || !form) return;
|
||||
btn.addEventListener('click', function() {
|
||||
var open = panel.classList.toggle('open');
|
||||
btn.setAttribute('aria-expanded', open ? 'true' : 'false');
|
||||
if (open) { var t = document.getElementById('ctTitle'); if (t) t.focus(); }
|
||||
});
|
||||
form.addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
var title = (document.getElementById('ctTitle').value || '').trim();
|
||||
if (!title) return;
|
||||
var role = document.getElementById('ctRole').value || undefined;
|
||||
var priority = document.getElementById('ctPriority').value || undefined;
|
||||
try {
|
||||
var task = await postTask({ title: title, role: role, priority: priority });
|
||||
toast(task.id + ' created');
|
||||
document.getElementById('ctTitle').value = '';
|
||||
panel.classList.remove('open'); btn.setAttribute('aria-expanded', 'false');
|
||||
await refresh(); await refreshBudget(); flashCard(task.id);
|
||||
} catch (err) { toast(err.message || 'create failed', { error: true }); }
|
||||
});
|
||||
})();
|
||||
|
||||
loadStatusMeta();
|
||||
loadAgents();
|
||||
refresh();
|
||||
refreshBudget();
|
||||
connectEvents();
|
||||
setInterval(updateTimers, TIMER_MS);
|
||||
setInterval(refreshBudget, 3000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import Fastify from 'fastify';
|
||||
import { registerRoutes } from './routes.js';
|
||||
import { resolveAdvertiseUrl, startDiscoveryBroadcaster } from '../discovery.js';
|
||||
import { startMdnsAdvertise, type MdnsHandle } from './mdns.js';
|
||||
import { startEntityWatcher } from './fsWatch.js';
|
||||
import { startStatusAutoRefresh } from './statusRefresh.js';
|
||||
|
||||
@ -16,12 +17,14 @@ export async function startServer(cwd: string, options: { port?: number; host?:
|
||||
const host = options.host ?? '127.0.0.1';
|
||||
|
||||
let broadcaster: ReturnType<typeof startDiscoveryBroadcaster> | undefined;
|
||||
let mdns: MdnsHandle | undefined;
|
||||
// Emit SSE events for CLI/file writes too, not just REST mutations.
|
||||
const stopWatcher = startEntityWatcher(cwd);
|
||||
// Keep status/latest.md fresh on every change so agents never read a stale snapshot.
|
||||
const stopStatusRefresh = startStatusAutoRefresh(cwd);
|
||||
app.addHook('onClose', async () => {
|
||||
broadcaster?.stop();
|
||||
mdns?.stop();
|
||||
stopWatcher();
|
||||
stopStatusRefresh();
|
||||
});
|
||||
@ -36,6 +39,13 @@ export async function startServer(cwd: string, options: { port?: number; host?:
|
||||
const advertiseUrl = resolveAdvertiseUrl(host, actualPort);
|
||||
broadcaster = startDiscoveryBroadcaster(advertiseUrl);
|
||||
|
||||
// Advertise a browsable LAN hostname over mDNS (best-effort).
|
||||
mdns = startMdnsAdvertise({ port: actualPort });
|
||||
if (mdns) {
|
||||
const portSuffix = actualPort === 80 ? '' : `:${actualPort}`;
|
||||
console.log(`AgentHub: reachable in a browser at http://${mdns.hostname}${portSuffix}`);
|
||||
}
|
||||
|
||||
return { app, url };
|
||||
} catch (err) {
|
||||
const e = err as NodeJS.ErrnoException;
|
||||
|
||||
52
src/server/mdns.ts
Normal file
52
src/server/mdns.ts
Normal file
@ -0,0 +1,52 @@
|
||||
import { Bonjour, type Service } from 'bonjour-service';
|
||||
|
||||
/**
|
||||
* Advertise the hub over mDNS/Bonjour as `<name>.local`, so anyone on the LAN
|
||||
* can open it in a browser without knowing the IP — e.g.
|
||||
* `http://agenthub.local:3377` (or just `http://agenthub.local` when the hub
|
||||
* runs on port 80).
|
||||
*
|
||||
* Best-effort, exactly like the UDP discovery broadcaster: if mDNS is
|
||||
* unavailable or multicast is blocked on the network, we quietly carry on —
|
||||
* the IP + UDP discovery still work.
|
||||
*/
|
||||
export interface MdnsHandle {
|
||||
hostname: string;
|
||||
stop: () => void;
|
||||
}
|
||||
|
||||
export function startMdnsAdvertise(opts: { port: number; name?: string }): MdnsHandle | undefined {
|
||||
const base = (opts.name ?? 'agenthub').toLowerCase().replace(/[^a-z0-9-]/g, '') || 'agenthub';
|
||||
const hostname = `${base}.local`;
|
||||
try {
|
||||
const bonjour = new Bonjour();
|
||||
const service: Service = bonjour.publish({
|
||||
name: 'AgentHub',
|
||||
type: 'http',
|
||||
port: opts.port,
|
||||
host: hostname,
|
||||
txt: { path: '/board' },
|
||||
});
|
||||
// Swallow responder errors — advertisement is optional infrastructure.
|
||||
service.on('error', () => {
|
||||
/* best-effort */
|
||||
});
|
||||
return {
|
||||
hostname,
|
||||
stop: () => {
|
||||
try {
|
||||
service.stop?.();
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
try {
|
||||
bonjour.destroy();
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
},
|
||||
};
|
||||
} catch {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
@ -7,6 +7,8 @@ import { createMessage, listMessages, listInbox, markMessageRead } from '../core
|
||||
import { addMemory, searchMemory, listMemory } from '../core/services/memoryService.js';
|
||||
import { getStatus, updateStatus } from '../core/services/statusService.js';
|
||||
import { autoDelegate, suggestDelegation } from '../core/services/delegateService.js';
|
||||
import { computeBudget } from '../core/services/budgetService.js';
|
||||
import { getRoster } from '../core/services/rosterService.js';
|
||||
import { loadConfig } from '../core/config.js';
|
||||
import { renderActivityHtml } from './activity.js';
|
||||
import { renderBoardHtml } from './board.js';
|
||||
@ -128,6 +130,12 @@ export async function registerRoutes(app: FastifyInstance, cwd: string): Promise
|
||||
app.get('/status', async () => ({ body: getStatus(cwd) }));
|
||||
app.post('/status/update', async () => ({ body: updateStatus(cwd) }));
|
||||
|
||||
// Team roster (JSON) — used by the board's agent rail / drop targets.
|
||||
app.get('/agents', async () => getRoster(cwd));
|
||||
|
||||
// Token & cost rollup per agent (real recorded + time-estimated, clearly flagged).
|
||||
app.get('/budget', async () => computeBudget(cwd));
|
||||
|
||||
// ─── Tasks ───────────────────────────────────────────────────────────────
|
||||
app.get('/tasks', async (request) => {
|
||||
const { status, role } = request.query as { status?: string; role?: string };
|
||||
|
||||
@ -70,14 +70,9 @@ function attachBusy(cwd: string, roster: RosterAgent[]): RosterAgent[] {
|
||||
function statusLine(a: RosterAgent): string {
|
||||
const busy = a.busyTask;
|
||||
if (busy) {
|
||||
return `<div style="margin-top:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;">
|
||||
${statusPill('in_progress')}
|
||||
<a href="/tasks/${escapeHtml(busy.id)}" style="color:var(--accent);text-decoration:none;font-family:var(--font-mono);font-size:12px;" data-live-timer data-timer-at="${escapeHtml(busy.updatedAt)}" data-timer-mode="in_progress">claimed</a>
|
||||
</div>`;
|
||||
return `<div class="agent-status"><span class="st-dot busy"></span><a class="st-link" href="/tasks/${escapeHtml(busy.id)}">${escapeHtml(busy.id)} · claimed …</a></div>`;
|
||||
}
|
||||
return `<div style="margin-top:10px;display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;">
|
||||
<span style="width:8px;height:8px;border-radius:50%;background:var(--green);"></span> free
|
||||
</div>`;
|
||||
return `<div class="agent-status"><span class="st-dot"></span><span class="st-free">free</span></div>`;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -97,7 +92,7 @@ function agentCard(a: RosterAgent, opts: { avatar: 'logo' | 'monogram'; architec
|
||||
: '';
|
||||
|
||||
return `
|
||||
<div class="agent-card" style="background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 14px;min-width:212px;">
|
||||
<div class="agent-card${a.busyTask ? ' busy' : ''}" data-agent="${escapeHtml(a.name)}" data-role="${escapeHtml(a.role)}" style="background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 14px;min-width:212px;">
|
||||
<div style="display:flex;align-items:center;gap:10px;">
|
||||
${avatar}
|
||||
<div style="min-width:0;">
|
||||
@ -120,7 +115,7 @@ function providerGroup(kind: string, agents: RosterAgent[]): string {
|
||||
${providerLogo(kind, 18)}
|
||||
<span style="font-weight:600;font-size:13px;">${meta ? escapeHtml(meta.name) : escapeHtml(kind)}</span>
|
||||
<span style="flex:1;"></span>
|
||||
<span style="color:var(--muted);font-size:11px;font-family:var(--font-mono);">${busy}/${agents.length} busy</span>
|
||||
<span class="pg-busy" data-group="${escapeHtml(kind)}" data-total="${agents.length}" style="color:var(--muted);font-size:11px;font-family:var(--font-mono);">${busy}/${agents.length} busy</span>
|
||||
</div>
|
||||
${agents.map((a) => agentCard(a, { avatar: 'monogram' })).join('')}
|
||||
</div>`;
|
||||
@ -190,10 +185,51 @@ export function renderTeamHtml(cwd: string): string {
|
||||
.tier-row { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
|
||||
.provider-row { display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:18px; width:100%; }
|
||||
.provider-group { min-width:240px; max-width:300px; }
|
||||
.connector-down { width:1px; height:28px; background:var(--border); flex:0 0 auto; }
|
||||
/* Connectors always carry a subtle ambient shimmer, so the tree looks alive
|
||||
even at rest; when an agent is working the flow brightens and speeds up. */
|
||||
.connector-down {
|
||||
width:2px; height:28px; flex:0 0 auto; border-radius:2px;
|
||||
background: linear-gradient(180deg, var(--border) 0%, rgba(88,166,255,.30) 50%, var(--border) 100%);
|
||||
background-size: 100% 240%;
|
||||
animation: flowDown 4.2s linear infinite;
|
||||
}
|
||||
.tree.live .connector-down {
|
||||
background-image: linear-gradient(180deg, var(--border) 0%, var(--accent) 45%, var(--border) 90%);
|
||||
animation-duration: 1.8s;
|
||||
}
|
||||
@keyframes flowDown { from { background-position: 0 130%; } to { background-position: 0 -130%; } }
|
||||
|
||||
.agent-card { transition: border-color 150ms ease, transform 150ms ease; }
|
||||
.agent-card {
|
||||
transition: border-color 150ms ease, transform 150ms ease, box-shadow 220ms ease, background 220ms ease;
|
||||
animation: cardEnter 260ms cubic-bezier(.2,.7,.2,1) both, idleGlow 5.5s ease-in-out infinite .3s;
|
||||
}
|
||||
@keyframes cardEnter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
|
||||
/* Faint neutral breathing at rest — alive, but clearly not "busy" (which is accent-blue). */
|
||||
@keyframes idleGlow {
|
||||
0%,100% { box-shadow: 0 0 0 1px rgba(148,163,184,.04); }
|
||||
50% { box-shadow: 0 0 0 1px rgba(148,163,184,.12), 0 4px 16px rgba(0,0,0,.16); }
|
||||
}
|
||||
.agent-card:hover { border-color: rgba(88,166,255,0.5); transform: translateY(-1px); }
|
||||
/* Busy agent: soft breathing glow + accent border (overrides idle breathing). */
|
||||
.agent-card.busy { border-color: rgba(88,166,255,.5); animation: cardBusy 2.6s ease-in-out infinite; }
|
||||
@keyframes cardBusy {
|
||||
0%,100% { box-shadow: 0 0 0 1px rgba(88,166,255,.16); }
|
||||
50% { box-shadow: 0 0 0 1px rgba(88,166,255,.42), 0 6px 22px rgba(88,166,255,.12); }
|
||||
}
|
||||
.agent-card.ping { animation: cardPing 720ms ease; }
|
||||
@keyframes cardPing {
|
||||
0% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); }
|
||||
100% { box-shadow: 0 0 0 16px rgba(34,197,94,0); }
|
||||
}
|
||||
|
||||
/* Status line */
|
||||
.agent-status { margin-top:10px; display:flex; align-items:center; gap:8px; font-size:12px; }
|
||||
.st-dot { width:8px; height:8px; border-radius:50%; background:var(--green); flex:0 0 auto; }
|
||||
.st-dot.busy { background:var(--status-in_progress); box-shadow:0 0 0 3px rgba(88,166,255,.16); animation: dotPulse 1.5s ease-in-out infinite; }
|
||||
@keyframes dotPulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }
|
||||
.st-free { color: var(--muted); }
|
||||
.st-link { color: var(--accent); text-decoration: none; font-family: var(--font-mono); font-size: 12px; }
|
||||
.st-link:hover { text-decoration: underline; }
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.provider-row { flex-direction:column; align-items:center; gap:14px; }
|
||||
@ -207,7 +243,81 @@ export function renderTeamHtml(cwd: string): string {
|
||||
${tiers}
|
||||
</main>
|
||||
<script>
|
||||
${liveTimerJs()}
|
||||
(function() {
|
||||
var connDot = document.getElementById('conn-dot');
|
||||
function setConn(ok) {
|
||||
if (!connDot) return;
|
||||
connDot.style.background = ok ? 'var(--green)' : 'var(--status-review)';
|
||||
connDot.title = ok ? 'connected' : 'reconnecting';
|
||||
}
|
||||
function esc(s) {
|
||||
return String(s == null ? '' : s)
|
||||
.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
|
||||
}
|
||||
function ago(iso) {
|
||||
var t = Date.parse(iso);
|
||||
if (isNaN(t)) return '';
|
||||
var s = Math.max(0, Math.floor((Date.now() - t) / 1000));
|
||||
if (s < 60) return s + 's';
|
||||
var m = Math.floor(s / 60);
|
||||
if (m < 60) return m + 'm';
|
||||
var h = Math.floor(m / 60);
|
||||
if (h < 24) return h + 'h';
|
||||
return Math.floor(h / 24) + 'd';
|
||||
}
|
||||
function updateGroupCounts() {
|
||||
document.querySelectorAll('.pg-busy').forEach(function(el) {
|
||||
var group = el.closest('.provider-group');
|
||||
var total = el.getAttribute('data-total') || '0';
|
||||
var busy = group ? group.querySelectorAll('.agent-card.busy').length : 0;
|
||||
el.textContent = busy + '/' + total + ' busy';
|
||||
});
|
||||
}
|
||||
async function sync() {
|
||||
var tasks;
|
||||
try {
|
||||
tasks = await fetch('/tasks', { headers: { accept: 'application/json' } }).then(function(r) { return r.json(); });
|
||||
} catch (e) { setConn(false); return; }
|
||||
setConn(true);
|
||||
var busy = {};
|
||||
(tasks || []).forEach(function(t) {
|
||||
if (t.status === 'in_progress' && t.assignedTo) {
|
||||
if (!busy[t.assignedTo] || t.updatedAt > busy[t.assignedTo].updatedAt) busy[t.assignedTo] = t;
|
||||
}
|
||||
});
|
||||
var anyBusy = false;
|
||||
document.querySelectorAll('.agent-card[data-agent]').forEach(function(card) {
|
||||
var name = card.getAttribute('data-agent');
|
||||
var t = busy[name];
|
||||
var statusEl = card.querySelector('.agent-status');
|
||||
if (t) {
|
||||
anyBusy = true;
|
||||
if (!card.classList.contains('busy')) {
|
||||
card.classList.add('busy');
|
||||
card.classList.remove('ping'); void card.offsetWidth; card.classList.add('ping');
|
||||
}
|
||||
if (statusEl) {
|
||||
statusEl.innerHTML = '<span class="st-dot busy"></span><a class="st-link" href="/tasks/' +
|
||||
esc(t.id) + '">' + esc(t.id) + ' \\u00b7 claimed ' + esc(ago(t.updatedAt)) + '</a>';
|
||||
}
|
||||
} else {
|
||||
card.classList.remove('busy');
|
||||
if (statusEl) statusEl.innerHTML = '<span class="st-dot"></span><span class="st-free">free</span>';
|
||||
}
|
||||
});
|
||||
var tree = document.getElementById('tree');
|
||||
if (tree) tree.classList.toggle('live', anyBusy);
|
||||
updateGroupCounts();
|
||||
}
|
||||
sync();
|
||||
setInterval(sync, 1000); // keep "claimed Xs" ticking + reflect changes even without SSE
|
||||
if ('EventSource' in window) {
|
||||
var es = new EventSource('/events');
|
||||
es.onopen = function() { setConn(true); };
|
||||
es.onmessage = function() { sync(); };
|
||||
es.onerror = function() { setConn(false); };
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>`;
|
||||
|
||||
@ -196,7 +196,8 @@ describe('server routes', () => {
|
||||
expect(html).toContain('data-id');
|
||||
expect(html).toContain('href="/tasks/');
|
||||
expect(html).not.toContain('class="timeline"');
|
||||
expect(html).not.toContain('expanded');
|
||||
// Cards must not expand inline (aria-expanded on the composer button is fine).
|
||||
expect(html).not.toMatch(/class="[^"]*\bexpanded\b/);
|
||||
expect(html).not.toContain("'/tasks/' + encodeURIComponent(id) + '/activity'");
|
||||
});
|
||||
|
||||
|
||||
@ -55,7 +55,9 @@ describe('GET /team', () => {
|
||||
const res = await app.inject({ method: 'GET', url: '/team' });
|
||||
const html = res.payload;
|
||||
expect(html).toContain('TSK-0001');
|
||||
expect(html).toContain('data-live-timer');
|
||||
// The busy agent's card is tagged for the live client sync and rendered busy.
|
||||
expect(html).toContain('data-agent="codex"');
|
||||
expect(html).toContain('agent-card busy');
|
||||
expect(html).toContain('claimed');
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user