oikos/web/src/pages/Ops.svelte

<script lang="ts">
  import { onMount } from 'svelte'
  import {
    fetchApprovals,
    decideApproval,
    fetchRecentActivity,
    cancelExecution,
    type Approval,
    type ActivityItem
  } from '$lib/api'
  import { liveEvents, subscribeEvents } from '$lib/stores/events'
  import * as Tabs from '$lib/components/ui/tabs'
  import * as Table from '$lib/components/ui/table'
  import { Badge } from '$lib/components/ui/badge'
  import { Button } from '$lib/components/ui/button'
  import { toast } from 'svelte-sonner'

  let approvals = $state<Approval[]>([])
  let activity = $state<ActivityItem[]>([])
  let deciding = $state<string | null>(null)

  async function loadApprovals() {
    approvals = await fetchApprovals()
  }
  async function loadActivity() {
    activity = await fetchRecentActivity()
  }

  onMount(() => {
    loadApprovals()
    loadActivity()
    const unsubscribe = subscribeEvents()
    // 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.')) 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)
    deciding = null
    if (result) {
      toast.success(`Approval ${decision === 'approve' ? 'approved' : 'denied'}`)
      loadApprovals()
    } else {
      toast.error('Decision failed')
    }
  }

  async function cancel(id: string) {
    const result = await cancelExecution(id)
    if (result) {
      toast.success('Execution cancelled')
      loadActivity()
    } else {
      toast.error('Cancel failed')
    }
  }

  function riskVariant(risk: string): 'default' | 'secondary' | 'destructive' {
    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', 'denied', 'revoked', 'cancelled'].includes(status)) return 'destructive'
    if (status === 'completed') return 'default'
    if (['running', 'approved'].includes(status)) return 'secondary'
    return 'outline'
  }

  const pendingApprovals = $derived(approvals.filter((a) => a.status === 'pending'))
  const decidedApprovals = $derived(approvals.filter((a) => a.status !== 'pending'))
</script>

<div class="flex h-full flex-col gap-4 p-4 md:p-6">
  <h1 class="text-lg font-semibold">Operations ledger</h1>

  <Tabs.Root value="approvals" class="flex flex-1 flex-col overflow-hidden">
    <Tabs.List>
      <Tabs.Trigger value="approvals">
        Approvals {#if pendingApprovals.length}<Badge variant="destructive" class="ml-1">{pendingApprovals.length}</Badge>{/if}
      </Tabs.Trigger>
      <Tabs.Trigger value="executions">Activity</Tabs.Trigger>
    </Tabs.List>

    <Tabs.Content value="approvals" class="flex-1 overflow-auto">
      <div class="rounded-md border">
        <Table.Root>
          <Table.Header>
            <Table.Row>
              <Table.Head>Subject</Table.Head>
              <Table.Head>Action</Table.Head>
              <Table.Head>Risk</Table.Head>
              <Table.Head>Status</Table.Head>
              <Table.Head>Expires</Table.Head>
              <Table.Head class="text-right">Decision</Table.Head>
            </Table.Row>
          </Table.Header>
          <Table.Body>
            {#each pendingApprovals as approval (approval.id)}
              <Table.Row>
                <Table.Cell class="font-mono text-xs">{approval.subject ?? '—'}</Table.Cell>
                <Table.Cell>{approval.action}</Table.Cell>
                <Table.Cell><Badge variant={riskVariant(approval.risk_class)}>{approval.risk_class}</Badge></Table.Cell>
                <Table.Cell><Badge variant="outline">{approval.status}</Badge></Table.Cell>
                <Table.Cell class="text-xs text-muted-foreground"
                  >{new Date(approval.expires_at).toLocaleString()}</Table.Cell
                >
                <Table.Cell class="flex justify-end gap-2">
                  <Button
                    size="sm"
                    disabled={deciding === approval.id}
                    onclick={() => decide(approval.id, 'approve')}
                  >
                    Approve
                  </Button>
                  <Button
                    size="sm"
                    variant="destructive"
                    disabled={deciding === approval.id}
                    onclick={() => decide(approval.id, 'deny')}
                  >
                    Deny
                  </Button>
                </Table.Cell>
              </Table.Row>
            {:else}
              <Table.Row>
                <Table.Cell colspan={6} class="text-center text-muted-foreground">No pending approvals.</Table.Cell>
              </Table.Row>
            {/each}
          </Table.Body>
        </Table.Root>
      </div>

      {#if decidedApprovals.length}
        <p class="mt-4 text-xs text-muted-foreground">Recently decided</p>
        <div class="mt-1 rounded-md border">
          <Table.Root>
            <Table.Body>
              {#each decidedApprovals.slice(0, 20) as approval (approval.id)}
                <Table.Row>
                  <Table.Cell class="font-mono text-xs">{approval.subject ?? '—'}</Table.Cell>
                  <Table.Cell>{approval.action}</Table.Cell>
                  <Table.Cell><Badge variant="outline">{approval.status}</Badge></Table.Cell>
                  <Table.Cell class="text-xs text-muted-foreground"
                    >{approval.decided_at ? new Date(approval.decided_at).toLocaleString() : '—'}</Table.Cell
                  >
                </Table.Row>
              {/each}
            </Table.Body>
          </Table.Root>
        </div>
      {/if}
    </Tabs.Content>

    <Tabs.Content value="executions" class="flex-1 overflow-auto">
      <div class="rounded-md border">
        <Table.Root>
          <Table.Header>
            <Table.Row>
              <Table.Head>Target</Table.Head>
              <Table.Head>Action</Table.Head>
              <Table.Head>Risk</Table.Head>
              <Table.Head>Status</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 activity as item (item.id)}
              <Table.Row>
                <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 ['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={7} class="text-center text-muted-foreground">No activity yet.</Table.Cell>
              </Table.Row>
            {/each}
          </Table.Body>
        </Table.Root>
      </div>
    </Tabs.Content>
  </Tabs.Root>
</div>