feat: global activity feed + session digest
Ops "Executions" tab showed raw target UUIDs, alphabetical (not
recency) order, and a stale status vocabulary from an earlier schema
iteration — never actually usable as a live "what's happening" view.
Replaced with a new recency-ordered /api/v1/activity/recent endpoint
and matching table (human-readable action summaries, risk/status
badges, duration, inline error preview).
Also added /api/v1/activity/session/{id} + a collapsible SessionDigest
panel in the chat rail, answering "what did this session actually do"
(executions by status, entities touched, knowledge written) — the
missing piece for proactive outcome reporting to be visible in the UI,
not just in the chat transcript.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -2,6 +2,7 @@
|
||||
import { messages, streaming, sendMessage, cancelStream, error } from '$lib/stores/chat'
|
||||
import SessionRail from '$lib/components/SessionRail.svelte'
|
||||
import SessionGraph from '$lib/components/SessionGraph.svelte'
|
||||
import SessionDigest from '$lib/components/SessionDigest.svelte'
|
||||
import ToolCallGroup from '$lib/components/ToolCallGroup.svelte'
|
||||
import InlineApproval from '$lib/components/InlineApproval.svelte'
|
||||
import { Button } from '$lib/components/ui/button'
|
||||
@@ -188,8 +189,11 @@
|
||||
: 'bg-border group-hover/rz:bg-primary/50'}"
|
||||
></span>
|
||||
</button>
|
||||
<div class="min-w-0 flex-1">
|
||||
<SessionGraph />
|
||||
<div class="flex min-w-0 flex-1 flex-col">
|
||||
<SessionDigest />
|
||||
<div class="min-h-0 flex-1">
|
||||
<SessionGraph />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -3,10 +3,10 @@
|
||||
import {
|
||||
fetchApprovals,
|
||||
decideApproval,
|
||||
fetchExecutions,
|
||||
fetchRecentActivity,
|
||||
cancelExecution,
|
||||
type Approval,
|
||||
type Execution
|
||||
type ActivityItem
|
||||
} from '$lib/api'
|
||||
import { liveEvents, subscribeEvents } from '$lib/stores/events'
|
||||
import * as Tabs from '$lib/components/ui/tabs'
|
||||
@@ -16,30 +16,55 @@
|
||||
import { toast } from 'svelte-sonner'
|
||||
|
||||
let approvals = $state<Approval[]>([])
|
||||
let executions = $state<Execution[]>([])
|
||||
let activity = $state<ActivityItem[]>([])
|
||||
let deciding = $state<string | null>(null)
|
||||
|
||||
async function loadApprovals() {
|
||||
approvals = await fetchApprovals()
|
||||
}
|
||||
async function loadExecutions() {
|
||||
executions = await fetchExecutions()
|
||||
async function loadActivity() {
|
||||
activity = await fetchRecentActivity()
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
loadApprovals()
|
||||
loadExecutions()
|
||||
loadActivity()
|
||||
const unsubscribe = subscribeEvents()
|
||||
return unsubscribe
|
||||
// The activity feed has no dedicated SSE event type yet — a light poll
|
||||
// keeps it live without waiting for that wiring. Cheap: one query, only
|
||||
// while this page is open.
|
||||
const interval = setInterval(loadActivity, 5000)
|
||||
return () => {
|
||||
unsubscribe()
|
||||
clearInterval(interval)
|
||||
}
|
||||
})
|
||||
|
||||
$effect(() => {
|
||||
const ev = $liveEvents[0]
|
||||
if (!ev) return
|
||||
if (ev.type.startsWith('approval.')) loadApprovals()
|
||||
if (ev.type.startsWith('execution.')) loadExecutions()
|
||||
if (ev.type.startsWith('execution.')) loadActivity()
|
||||
})
|
||||
|
||||
function fmtDuration(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`
|
||||
return `${Math.floor(s / 60)}m ${s % 60}s`
|
||||
}
|
||||
|
||||
function fmtWhen(iso: string): string {
|
||||
const d = new Date(iso).getTime()
|
||||
if (!d) return ''
|
||||
const s = Math.round((Date.now() - d) / 1000)
|
||||
if (s < 60) return 'just now'
|
||||
if (s < 3600) return `${Math.floor(s / 60)}m ago`
|
||||
if (s < 86400) return `${Math.floor(s / 3600)}h ago`
|
||||
return `${Math.floor(s / 86400)}d ago`
|
||||
}
|
||||
|
||||
async function decide(id: string, decision: 'approve' | 'deny') {
|
||||
deciding = id
|
||||
const result = await decideApproval(id, decision)
|
||||
@@ -56,22 +81,26 @@
|
||||
const result = await cancelExecution(id)
|
||||
if (result) {
|
||||
toast.success('Execution cancelled')
|
||||
loadExecutions()
|
||||
loadActivity()
|
||||
} else {
|
||||
toast.error('Cancel failed')
|
||||
}
|
||||
}
|
||||
|
||||
function riskVariant(risk: string): 'default' | 'secondary' | 'destructive' {
|
||||
if (risk === 'high' || risk === 'critical') return 'destructive'
|
||||
if (risk === 'medium') return 'secondary'
|
||||
if (risk === 'destructive') return 'destructive'
|
||||
if (risk === 'config_mutation') return 'secondary'
|
||||
return 'default'
|
||||
}
|
||||
|
||||
// Real status vocabulary (internal/httpapi/phase3.go, cmd/nomos): the
|
||||
// previous version checked statuses ('proposed', 'auto_approved',
|
||||
// 'verified', 'executing'...) that don't exist anywhere in the actual
|
||||
// schema — this table was never actually color-coding correctly.
|
||||
function execStatusVariant(status: string): 'default' | 'secondary' | 'destructive' | 'outline' {
|
||||
if (['failed', 'timed_out', 'rollback_failed', 'denied'].includes(status)) return 'destructive'
|
||||
if (['verified', 'auto_approved'].includes(status)) return 'default'
|
||||
if (['executing', 'verifying'].includes(status)) return 'secondary'
|
||||
if (['failed', 'denied', 'revoked', 'cancelled'].includes(status)) return 'destructive'
|
||||
if (status === 'completed') return 'default'
|
||||
if (['running', 'approved'].includes(status)) return 'secondary'
|
||||
return 'outline'
|
||||
}
|
||||
|
||||
@@ -87,7 +116,7 @@
|
||||
<Tabs.Trigger value="approvals">
|
||||
Approvals {#if pendingApprovals.length}<Badge variant="destructive" class="ml-1">{pendingApprovals.length}</Badge>{/if}
|
||||
</Tabs.Trigger>
|
||||
<Tabs.Trigger value="executions">Executions</Tabs.Trigger>
|
||||
<Tabs.Trigger value="executions">Activity</Tabs.Trigger>
|
||||
</Tabs.List>
|
||||
|
||||
<Tabs.Content value="approvals" class="flex-1 overflow-auto">
|
||||
@@ -168,31 +197,39 @@
|
||||
<Table.Row>
|
||||
<Table.Head>Target</Table.Head>
|
||||
<Table.Head>Action</Table.Head>
|
||||
<Table.Head>Risk</Table.Head>
|
||||
<Table.Head>Status</Table.Head>
|
||||
<Table.Head>Correlation</Table.Head>
|
||||
<Table.Head>Started</Table.Head>
|
||||
<Table.Head>Duration</Table.Head>
|
||||
<Table.Head>When</Table.Head>
|
||||
<Table.Head class="text-right">Actions</Table.Head>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{#each executions as execution (execution.id)}
|
||||
{#each activity as item (item.id)}
|
||||
<Table.Row>
|
||||
<Table.Cell class="font-mono text-xs">{execution.target ?? '—'}</Table.Cell>
|
||||
<Table.Cell>{execution.action}</Table.Cell>
|
||||
<Table.Cell><Badge variant={execStatusVariant(execution.status)}>{execution.status}</Badge></Table.Cell>
|
||||
<Table.Cell class="font-mono text-xs text-muted-foreground">{execution.correlation_id}</Table.Cell>
|
||||
<Table.Cell class="text-xs text-muted-foreground"
|
||||
>{execution.started_at ? new Date(execution.started_at).toLocaleString() : '—'}</Table.Cell
|
||||
>
|
||||
<Table.Cell class="font-mono text-xs">{item.target ?? '—'}</Table.Cell>
|
||||
<Table.Cell>
|
||||
<div>{item.verb}</div>
|
||||
{#if item.summary}
|
||||
<div class="text-xs text-muted-foreground">{item.summary}</div>
|
||||
{/if}
|
||||
{#if item.error}
|
||||
<div class="text-xs text-destructive">{item.error}</div>
|
||||
{/if}
|
||||
</Table.Cell>
|
||||
<Table.Cell><Badge variant={riskVariant(item.risk_class)}>{item.risk_class}</Badge></Table.Cell>
|
||||
<Table.Cell><Badge variant={execStatusVariant(item.status)}>{item.status}</Badge></Table.Cell>
|
||||
<Table.Cell class="text-xs text-muted-foreground">{fmtDuration(item.duration_ms)}</Table.Cell>
|
||||
<Table.Cell class="text-xs text-muted-foreground">{fmtWhen(item.created_at)}</Table.Cell>
|
||||
<Table.Cell class="text-right">
|
||||
{#if ['proposed', 'approved', 'auto_approved', 'executing'].includes(execution.status)}
|
||||
<Button size="sm" variant="outline" onclick={() => cancel(execution.id)}>Cancel</Button>
|
||||
{#if ['pending_approval', 'approved', 'running'].includes(item.status)}
|
||||
<Button size="sm" variant="outline" onclick={() => cancel(item.id)}>Cancel</Button>
|
||||
{/if}
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
{:else}
|
||||
<Table.Row>
|
||||
<Table.Cell colspan={6} class="text-center text-muted-foreground">No executions yet.</Table.Cell>
|
||||
<Table.Cell colspan={7} class="text-center text-muted-foreground">No activity yet.</Table.Cell>
|
||||
</Table.Row>
|
||||
{/each}
|
||||
</Table.Body>
|
||||
|
||||
Reference in New Issue
Block a user