Implementer agent-oversikt i admin (/admin/agents)

Ny admin-side som viser registrerte AI-agenter med status, token-forbruk,
aktive jobber og kjørehistorikk. Støtter kill switch for å aktivere/deaktivere.
This commit is contained in:
vegard 2026-03-19 19:13:04 +00:00
parent 819afb6f61
commit a50245d0ac
4 changed files with 664 additions and 0 deletions

View file

@ -1544,6 +1544,87 @@ export function setWebhookTemplate(
});
}
// =============================================================================
// Agent-oversikt (oppgave 063)
// =============================================================================
export interface AgentInfo {
node_id: string;
agent_key: string;
agent_type: string;
is_active: boolean;
config: Record<string, unknown>;
created_at: string;
}
export interface TokenStats {
prompt_tokens: number;
completion_tokens: number;
estimated_cost: number;
}
export interface AgentUsageStats {
usage_last_hour: number;
usage_last_24h: number;
usage_total: number;
tokens_last_24h: TokenStats;
}
export interface AgentCurrentJob {
job_id: string;
job_type: string;
status: string;
started_at: string | null;
communication_id: string | null;
}
export interface AgentDetail {
agent: AgentInfo;
usage: AgentUsageStats;
current_jobs: AgentCurrentJob[];
}
export interface AgentHistoryEntry {
job_id: string;
status: string;
started_at: string | null;
completed_at: string | null;
duration_ms: number | null;
error_msg: string | null;
communication_id: string | null;
result_status: string | null;
}
export interface AgentsOverviewResponse {
agents: AgentDetail[];
history: AgentHistoryEntry[];
}
export interface ToggleAgentResponse {
node_id: string;
is_active: boolean;
}
/** Hent agent-oversikt med status, forbruk og historikk. */
export async function fetchAgentsOverview(accessToken: string): Promise<AgentsOverviewResponse> {
const res = await fetch(`${BASE_URL}/admin/agents`, {
headers: { Authorization: `Bearer ${accessToken}` }
});
if (!res.ok) {
const body = await res.text();
throw new Error(`agents overview failed (${res.status}): ${body}`);
}
return res.json();
}
/** Aktiver/deaktiver en agent (kill switch toggle). */
export function toggleAgent(
accessToken: string,
nodeId: string
): Promise<ToggleAgentResponse> {
return post(accessToken, '/admin/agents/toggle', { node_id: nodeId });
}
export async function setMixerRole(
accessToken: string,
roomId: string,

View file

@ -0,0 +1,291 @@
<script lang="ts">
/**
* Admin — Agent-oversikt (oppgave 063)
*
* Viser registrerte agenter med status, token-forbruk, aktive jobber
* og kjørehistorikk. Støtter kill switch (aktiver/deaktiver).
*/
import { page } from '$app/stores';
import {
fetchAgentsOverview,
toggleAgent,
type AgentsOverviewResponse,
type AgentDetail,
type AgentHistoryEntry
} from '$lib/api';
const session = $derived($page.data.session as Record<string, unknown> | undefined);
const accessToken = $derived(session?.accessToken as string | undefined);
let data = $state<AgentsOverviewResponse | null>(null);
let loading = $state(false);
let error = $state<string | null>(null);
let actionLoading = $state<string | null>(null);
// Poll hvert 5. sekund
$effect(() => {
if (!accessToken) return;
loadData();
const interval = setInterval(loadData, 5000);
return () => clearInterval(interval);
});
async function loadData() {
if (!accessToken) return;
try {
data = await fetchAgentsOverview(accessToken);
error = null;
} catch (e) {
error = String(e);
}
}
async function handleToggle(nodeId: string) {
if (!accessToken || actionLoading) return;
actionLoading = nodeId;
try {
await toggleAgent(accessToken, nodeId);
await loadData();
} catch (e) {
error = String(e);
} finally {
actionLoading = null;
}
}
function formatTime(iso: string | null): string {
if (!iso) return '-';
return new Date(iso).toLocaleString('nb-NO', {
day: '2-digit', month: '2-digit',
hour: '2-digit', minute: '2-digit', second: '2-digit'
});
}
function formatDuration(ms: number | null): string {
if (ms === null) return '-';
if (ms < 1000) return `${ms}ms`;
const s = Math.round(ms / 1000);
if (s < 60) return `${s}s`;
const m = Math.floor(s / 60);
return `${m}m ${s % 60}s`;
}
function formatTokens(n: number): string {
if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`;
return String(n);
}
function modelAlias(agent: AgentDetail): string {
return (agent.agent.config?.model_alias as string) ?? 'ukjent';
}
function rateLimit(agent: AgentDetail): number {
return (agent.agent.config?.rate_limit_per_hour as number) ?? 60;
}
function statusColor(status: string): string {
switch (status) {
case 'running': return 'bg-blue-100 text-blue-700';
case 'pending': return 'bg-yellow-100 text-yellow-700';
case 'completed': return 'bg-green-100 text-green-700';
case 'error': return 'bg-red-100 text-red-700';
case 'retry': return 'bg-amber-100 text-amber-700';
default: return 'bg-gray-100 text-gray-700';
}
}
function statusDot(status: string): string {
switch (status) {
case 'running': return 'bg-blue-500';
case 'pending': return 'bg-yellow-500';
case 'completed': return 'bg-green-500';
case 'error': return 'bg-red-500';
case 'retry': return 'bg-amber-500';
default: return 'bg-gray-500';
}
}
function resultStatusLabel(entry: AgentHistoryEntry): string {
if (entry.status === 'error') return entry.error_msg?.slice(0, 60) ?? 'Feil';
if (entry.result_status === 'skipped') return 'Hoppet over';
if (entry.result_status === 'ok' || entry.status === 'completed') return 'OK';
return entry.result_status ?? entry.status;
}
</script>
<div class="min-h-screen bg-gray-50">
<header class="border-b border-gray-200 bg-white">
<div class="mx-auto flex max-w-5xl items-center justify-between px-4 py-3">
<div class="flex items-center gap-3">
<a href="/admin" class="text-sm text-gray-500 hover:text-gray-700">Admin</a>
<span class="text-gray-300">/</span>
<h1 class="text-lg font-semibold text-gray-900">Agenter</h1>
</div>
</div>
</header>
<main class="mx-auto max-w-5xl px-4 py-6">
{#if !accessToken}
<p class="text-sm text-gray-400">Logg inn for tilgang.</p>
{:else if !data}
<p class="text-sm text-gray-400">Laster agenter...</p>
{:else}
<!-- Feilmelding -->
{#if error}
<div class="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700">
{error}
</div>
{/if}
<!-- Agent-kort -->
<section class="mb-8 space-y-4">
<h2 class="text-sm font-medium text-gray-600">Registrerte agenter</h2>
{#each data.agents as detail (detail.agent.node_id)}
<div class="rounded-lg border border-gray-200 bg-white p-4 shadow-sm">
<div class="flex flex-wrap items-start justify-between gap-3">
<!-- Agent-info -->
<div class="min-w-0 flex-1">
<div class="flex items-center gap-2">
<span class="font-mono text-sm font-semibold text-gray-900">
{detail.agent.agent_key}
</span>
{#if detail.agent.is_active}
<span class="inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700">
<span class="h-1.5 w-1.5 rounded-full bg-green-500"></span>
Aktiv
</span>
{:else}
<span class="inline-flex items-center gap-1 rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700">
<span class="h-1.5 w-1.5 rounded-full bg-red-500"></span>
Deaktivert
</span>
{/if}
</div>
<div class="mt-1 flex flex-wrap gap-4 text-xs text-gray-500">
<span>Type: <span class="font-medium text-gray-700">{detail.agent.agent_type}</span></span>
<span>Modell: <span class="font-medium text-gray-700">{modelAlias(detail)}</span></span>
<span>Rate: <span class="font-medium text-gray-700">{detail.usage.usage_last_hour}/{rateLimit(detail)} per time</span></span>
</div>
<div class="mt-1 font-mono text-xs text-gray-400" title={detail.agent.node_id}>
{detail.agent.node_id}
</div>
</div>
<!-- Kill switch -->
<button
onclick={() => handleToggle(detail.agent.node_id)}
disabled={actionLoading === detail.agent.node_id}
class="shrink-0 rounded px-3 py-1.5 text-xs font-medium transition-colors disabled:opacity-50 {detail.agent.is_active ? 'bg-red-50 text-red-700 hover:bg-red-100' : 'bg-green-50 text-green-700 hover:bg-green-100'}"
>
{detail.agent.is_active ? 'Deaktiver' : 'Aktiver'}
</button>
</div>
<!-- Statistikk -->
<div class="mt-3 grid grid-cols-2 gap-3 sm:grid-cols-4">
<div class="rounded border border-gray-100 bg-gray-50 p-2 text-center">
<div class="text-lg font-bold text-gray-900">{detail.usage.usage_last_hour}</div>
<div class="text-xs text-gray-500">Siste time</div>
</div>
<div class="rounded border border-gray-100 bg-gray-50 p-2 text-center">
<div class="text-lg font-bold text-gray-900">{detail.usage.usage_last_24h}</div>
<div class="text-xs text-gray-500">Siste 24t</div>
</div>
<div class="rounded border border-gray-100 bg-gray-50 p-2 text-center">
<div class="text-lg font-bold text-gray-900">{formatTokens(detail.usage.tokens_last_24h.prompt_tokens + detail.usage.tokens_last_24h.completion_tokens)}</div>
<div class="text-xs text-gray-500">Tokens 24t</div>
</div>
<div class="rounded border border-gray-100 bg-gray-50 p-2 text-center">
<div class="text-lg font-bold text-gray-900">{detail.usage.usage_total}</div>
<div class="text-xs text-gray-500">Totalt</div>
</div>
</div>
<!-- Token-detaljer 24t -->
{#if detail.usage.tokens_last_24h.prompt_tokens > 0 || detail.usage.tokens_last_24h.completion_tokens > 0}
<div class="mt-2 flex flex-wrap gap-4 text-xs text-gray-500">
<span>Inn: {formatTokens(detail.usage.tokens_last_24h.prompt_tokens)}</span>
<span>Ut: {formatTokens(detail.usage.tokens_last_24h.completion_tokens)}</span>
{#if detail.usage.tokens_last_24h.estimated_cost > 0}
<span>Kostnad: ${detail.usage.tokens_last_24h.estimated_cost.toFixed(4)}</span>
{/if}
</div>
{/if}
<!-- Aktive jobber -->
{#if detail.current_jobs.length > 0}
<div class="mt-3 rounded border border-blue-100 bg-blue-50 p-2">
<div class="mb-1 text-xs font-medium text-blue-700">Aktive jobber</div>
{#each detail.current_jobs as job}
<div class="flex items-center gap-2 text-xs text-blue-600">
<span class="inline-flex items-center gap-1 rounded-full {statusColor(job.status)} px-1.5 py-0.5 text-xs">
<span class="h-1 w-1 rounded-full {statusDot(job.status)}"></span>
{job.status}
</span>
<span class="font-mono">{job.job_id.slice(0, 8)}</span>
{#if job.started_at}
<span class="text-blue-400">{formatTime(job.started_at)}</span>
{/if}
</div>
{/each}
</div>
{/if}
</div>
{:else}
<div class="rounded-lg border border-gray-200 bg-white p-6 text-center text-sm text-gray-400">
Ingen agenter registrert.
</div>
{/each}
</section>
<!-- Historikk -->
<section>
<h2 class="mb-3 text-sm font-medium text-gray-600">Siste kjøringer</h2>
<div class="overflow-x-auto rounded-lg border border-gray-200 bg-white shadow-sm">
<table class="w-full text-sm">
<thead>
<tr class="border-b border-gray-100 bg-gray-50 text-left text-xs font-medium text-gray-500">
<th class="px-3 py-2">Status</th>
<th class="px-3 py-2">Jobb</th>
<th class="px-3 py-2">Startet</th>
<th class="px-3 py-2">Varighet</th>
<th class="px-3 py-2">Resultat</th>
</tr>
</thead>
<tbody>
{#each data.history as entry (entry.job_id)}
<tr class="border-b border-gray-50 hover:bg-gray-50">
<td class="px-3 py-2">
<span class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium {statusColor(entry.status)}">
<span class="h-1.5 w-1.5 rounded-full {statusDot(entry.status)}"></span>
{entry.status}
</span>
</td>
<td class="px-3 py-2 font-mono text-xs text-gray-500" title={entry.job_id}>
{entry.job_id.slice(0, 8)}
</td>
<td class="px-3 py-2 text-xs text-gray-400">
{formatTime(entry.started_at)}
</td>
<td class="px-3 py-2 text-xs text-gray-500">
{formatDuration(entry.duration_ms)}
</td>
<td class="max-w-[200px] truncate px-3 py-2 text-xs {entry.status === 'error' ? 'text-red-600' : 'text-gray-600'}" title={entry.error_msg ?? entry.result_status ?? ''}>
{resultStatusLabel(entry)}
</td>
</tr>
{:else}
<tr>
<td colspan="5" class="px-3 py-8 text-center text-sm text-gray-400">
Ingen agent-kjøringer funnet.
</td>
</tr>
{/each}
</tbody>
</table>
</div>
</section>
{/if}
</main>
</div>

View file

@ -0,0 +1,288 @@
// Admin-API for agent-oversikt (oppgave 063)
//
// Viser registrerte agenter, deres status, token-forbruk og kjørehistorikk.
// Støtter aktivering/deaktivering (kill switch) og visning av aktive jobber.
use axum::{extract::State, http::StatusCode, Json};
use chrono::{DateTime, Utc};
use serde::{Deserialize, Serialize};
use uuid::Uuid;
use crate::auth::AdminUser;
use crate::AppState;
#[derive(Serialize)]
pub struct ErrorResponse {
pub error: String,
}
fn internal_error(msg: &str) -> (StatusCode, Json<ErrorResponse>) {
(StatusCode::INTERNAL_SERVER_ERROR, Json(ErrorResponse { error: msg.to_string() }))
}
// =============================================================================
// GET /admin/agents — agent-oversikt
// =============================================================================
#[derive(Serialize, sqlx::FromRow)]
pub struct AgentInfo {
pub node_id: Uuid,
pub agent_key: String,
pub agent_type: String,
pub is_active: bool,
pub config: serde_json::Value,
pub created_at: DateTime<Utc>,
}
#[derive(Serialize)]
pub struct AgentUsageStats {
pub usage_last_hour: i64,
pub usage_last_24h: i64,
pub usage_total: i64,
pub tokens_last_24h: TokenStats,
}
#[derive(Serialize)]
pub struct TokenStats {
pub prompt_tokens: i64,
pub completion_tokens: i64,
pub estimated_cost: f64,
}
#[derive(Serialize)]
pub struct AgentCurrentJob {
pub job_id: Uuid,
pub job_type: String,
pub status: String,
pub started_at: Option<DateTime<Utc>>,
pub communication_id: Option<String>,
}
#[derive(Serialize)]
pub struct AgentDetail {
pub agent: AgentInfo,
pub usage: AgentUsageStats,
pub current_jobs: Vec<AgentCurrentJob>,
}
#[derive(Serialize)]
pub struct AgentHistoryEntry {
pub job_id: Uuid,
pub status: String,
pub started_at: Option<DateTime<Utc>>,
pub completed_at: Option<DateTime<Utc>>,
pub duration_ms: Option<i64>,
pub error_msg: Option<String>,
pub communication_id: Option<String>,
pub result_status: Option<String>,
}
#[derive(Serialize)]
pub struct AgentsOverviewResponse {
pub agents: Vec<AgentDetail>,
pub history: Vec<AgentHistoryEntry>,
}
pub async fn agents_overview(
State(state): State<AppState>,
_admin: AdminUser,
) -> Result<Json<AgentsOverviewResponse>, (StatusCode, Json<ErrorResponse>)> {
// Hent alle registrerte agenter
let agents = sqlx::query_as::<_, AgentInfo>(
r#"SELECT node_id, agent_key, agent_type, is_active, config, created_at
FROM agent_identities
ORDER BY agent_key"#,
)
.fetch_all(&state.db)
.await
.map_err(|e| internal_error(&format!("Feil ved henting av agenter: {e}")))?;
let mut agent_details = Vec::new();
for agent in agents {
// Bruksstatistikk
let usage_last_hour: i64 = sqlx::query_scalar::<_, Option<i64>>(
"SELECT COUNT(*) FROM ai_usage_log WHERE agent_node_id = $1 AND created_at > now() - interval '1 hour'",
)
.bind(agent.node_id)
.fetch_one(&state.db)
.await
.map_err(|e| internal_error(&format!("DB-feil: {e}")))?.unwrap_or(0);
let usage_last_24h: i64 = sqlx::query_scalar::<_, Option<i64>>(
"SELECT COUNT(*) FROM ai_usage_log WHERE agent_node_id = $1 AND created_at > now() - interval '24 hours'",
)
.bind(agent.node_id)
.fetch_one(&state.db)
.await
.map_err(|e| internal_error(&format!("DB-feil: {e}")))?.unwrap_or(0);
let usage_total: i64 = sqlx::query_scalar::<_, Option<i64>>(
"SELECT COUNT(*) FROM ai_usage_log WHERE agent_node_id = $1",
)
.bind(agent.node_id)
.fetch_one(&state.db)
.await
.map_err(|e| internal_error(&format!("DB-feil: {e}")))?.unwrap_or(0);
// Token-statistikk siste 24 timer
#[derive(sqlx::FromRow)]
struct TokenRow {
prompt_tokens: i64,
completion_tokens: i64,
estimated_cost: f64,
}
let token_row = sqlx::query_as::<_, TokenRow>(
r#"SELECT
COALESCE(SUM(prompt_tokens), 0)::BIGINT as prompt_tokens,
COALESCE(SUM(completion_tokens), 0)::BIGINT as completion_tokens,
COALESCE(SUM(estimated_cost)::FLOAT8, 0.0) as estimated_cost
FROM ai_usage_log
WHERE agent_node_id = $1 AND created_at > now() - interval '24 hours'"#,
)
.bind(agent.node_id)
.fetch_one(&state.db)
.await
.map_err(|e| internal_error(&format!("DB-feil: {e}")))?;
// Aktive jobber for denne agenten
#[derive(sqlx::FromRow)]
struct CurrentJobRow {
id: Uuid,
job_type: String,
status: String,
started_at: Option<DateTime<Utc>>,
payload: serde_json::Value,
}
let current_jobs = sqlx::query_as::<_, CurrentJobRow>(
r#"SELECT id, job_type, status::text as status, started_at, payload
FROM job_queue
WHERE job_type = 'agent_respond'
AND payload->>'agent_node_id' = $1::text
AND status IN ('running', 'pending')
ORDER BY created_at DESC"#,
)
.bind(agent.node_id)
.fetch_all(&state.db)
.await
.map_err(|e| internal_error(&format!("DB-feil: {e}")))?;
let current_jobs: Vec<AgentCurrentJob> = current_jobs.into_iter().map(|j| {
AgentCurrentJob {
job_id: j.id,
job_type: j.job_type,
status: j.status,
started_at: j.started_at,
communication_id: j.payload.get("communication_id").and_then(|v| v.as_str()).map(String::from),
}
}).collect();
agent_details.push(AgentDetail {
agent,
usage: AgentUsageStats {
usage_last_hour,
usage_last_24h,
usage_total,
tokens_last_24h: TokenStats {
prompt_tokens: token_row.prompt_tokens,
completion_tokens: token_row.completion_tokens,
estimated_cost: token_row.estimated_cost,
},
},
current_jobs,
});
}
// Historikk: siste 50 agent_respond-jobber
#[derive(sqlx::FromRow)]
struct HistoryRow {
id: Uuid,
status: String,
started_at: Option<DateTime<Utc>>,
completed_at: Option<DateTime<Utc>>,
error_msg: Option<String>,
payload: serde_json::Value,
result: Option<serde_json::Value>,
}
let history_rows = sqlx::query_as::<_, HistoryRow>(
r#"SELECT id, status::text as status, started_at, completed_at,
error_msg, payload, result
FROM job_queue
WHERE job_type = 'agent_respond'
ORDER BY created_at DESC
LIMIT 50"#,
)
.fetch_all(&state.db)
.await
.map_err(|e| internal_error(&format!("DB-feil: {e}")))?;
let history: Vec<AgentHistoryEntry> = history_rows.into_iter().map(|h| {
let duration_ms = match (h.started_at, h.completed_at) {
(Some(start), Some(end)) => Some((end - start).num_milliseconds()),
_ => None,
};
AgentHistoryEntry {
job_id: h.id,
status: h.status,
started_at: h.started_at,
completed_at: h.completed_at,
duration_ms,
error_msg: h.error_msg,
communication_id: h.payload.get("communication_id").and_then(|v| v.as_str()).map(String::from),
result_status: h.result.as_ref().and_then(|r| r.get("status")).and_then(|s| s.as_str()).map(String::from),
}
}).collect();
Ok(Json(AgentsOverviewResponse { agents: agent_details, history }))
}
// =============================================================================
// POST /admin/agents/toggle — aktiver/deaktiver agent (kill switch)
// =============================================================================
#[derive(Deserialize)]
pub struct ToggleAgentRequest {
pub node_id: Uuid,
}
#[derive(Serialize)]
pub struct ToggleAgentResponse {
pub node_id: Uuid,
pub is_active: bool,
}
pub async fn toggle_agent(
State(state): State<AppState>,
_admin: AdminUser,
Json(req): Json<ToggleAgentRequest>,
) -> Result<Json<ToggleAgentResponse>, (StatusCode, Json<ErrorResponse>)> {
let result = sqlx::query(
"UPDATE agent_identities SET is_active = NOT is_active WHERE node_id = $1",
)
.bind(req.node_id)
.execute(&state.db)
.await
.map_err(|e| internal_error(&format!("DB-feil: {e}")))?;
if result.rows_affected() == 0 {
return Err((StatusCode::NOT_FOUND, Json(ErrorResponse {
error: "Agent finnes ikke".to_string(),
})));
}
let is_active: bool = sqlx::query_scalar("SELECT is_active FROM agent_identities WHERE node_id = $1")
.bind(req.node_id)
.fetch_one(&state.db)
.await
.map_err(|e| internal_error(&format!("DB-feil: {e}")))?;
tracing::info!(agent_node_id = %req.node_id, is_active, "Agent-status endret");
Ok(Json(ToggleAgentResponse {
node_id: req.node_id,
is_active,
}))
}

View file

@ -1,4 +1,5 @@
pub mod agent;
mod agents_admin;
pub mod ai_admin;
mod api_keys_admin;
pub mod crypto;
@ -317,6 +318,9 @@ async fn main() {
.route("/intentions/set_mute", post(mixer::set_mute))
.route("/intentions/toggle_effect", post(mixer::toggle_effect))
.route("/intentions/set_mixer_role", post(mixer::set_mixer_role))
// Agent-oversikt (oppgave 063)
.route("/admin/agents", get(agents_admin::agents_overview))
.route("/admin/agents/toggle", post(agents_admin::toggle_agent))
// API-nøkler (oppgave 060)
.route("/admin/api-keys", get(api_keys_admin::list_keys))
.route("/admin/api-keys/create", post(api_keys_admin::create_key))