oikos/web/src/pages/Ops.svelte

<script lang="ts">
  import { onMount } from 'svelte'
  import {
    fetchApprovals,
    decideApproval,
    fetchExecutions,
    cancelExecution,
    type Approval,
    type Execution
  } 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 executions = $state<Execution[]>([])
  let deciding = $state<string | null>(null)

  async function loadApprovals() {
    approvals = await fetchApprovals()
  }
  async function loadExecutions() {
    executions = await fetchExecutions()
  }

  onMount(() => {
    loadApprovals()
    loadExecutions()
    const unsubscribe = subscribeEvents()
    return unsubscribe
  })

  $effect(() => {
    const ev = $liveEvents[0]
    if (!ev) return
    if (ev.type.startsWith('approval.')) loadApprovals()
    if (ev.type.startsWith('execution.')) loadExecutions()
  })

  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')
      loadExecutions()
    } else {
      toast.error('Cancel failed')
    }
  }

  function riskVariant(risk: string): 'default' | 'secondary' | 'destructive' {
    if (risk === 'high' || risk === 'critical') return 'destructive'
    if (risk === 'medium') return 'secondary'
    return 'default'
  }

  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'
    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">Executions</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>Status</Table.Head>
              <Table.Head>Correlation</Table.Head>
              <Table.Head>Started</Table.Head>
              <Table.Head class="text-right">Actions</Table.Head>
            </Table.Row>
          </Table.Header>
          <Table.Body>
            {#each executions as execution (execution.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="text-right">
                  {#if ['proposed', 'approved', 'auto_approved', 'executing'].includes(execution.status)}
                    <Button size="sm" variant="outline" onclick={() => cancel(execution.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.Row>
            {/each}
          </Table.Body>
        </Table.Root>
      </div>
    </Tabs.Content>
  </Tabs.Root>
</div>