arkaos 4.13.1 → 4.13.2

package/dashboard/app/components/ArkaConstellation.vue

@@ -0,0 +1,239 @@
+<script setup lang="ts">
+// Canvas particle field: 86 agents clustered around 17 department hubs.
+// Breathing amplitude scales with the department's calls_30d. Hover finds
+// the nearest node (tooltip); click navigates. rAF pauses when the tab is
+// hidden; prefers-reduced-motion renders one static frame.
+import { useDocumentVisibility, useElementSize } from '@vueuse/core'
+
+interface AgentNode {
+  id: string
+  name: string
+  department: string
+  tier: number
+}
+interface DeptMeta {
+  department: string
+  calls_30d: number
+}
+
+const props = withDefaults(defineProps<{
+  agents: AgentNode[]
+  departments: DeptMeta[]
+  height?: number
+}>(), {
+  height: 380
+})
+
+const router = useRouter()
+const wrap = ref<HTMLElement | null>(null)
+const canvas = ref<HTMLCanvasElement | null>(null)
+const { width } = useElementSize(wrap)
+const visibility = useDocumentVisibility()
+
+const hovered = ref<{ x: number, y: number, name: string, department: string } | null>(null)
+
+interface Star {
+  agent: AgentNode
+  cx: number
+  cy: number
+  baseR: number
+  phase: number
+  speed: number
+  intensity: number
+  x: number
+  y: number
+}
+
+let stars: Star[] = []
+let hubs: Record<string, { x: number, y: number }> = {}
+let frame = 0
+let time = 0
+
+// Canvas has no reliable color-mix() support below Chromium 119 /
+// Safari 17.2, so token hexes are resolved to rgba() strings instead.
+function cssVar(name: string, fallback: string) {
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback
+}
+function rgba(hex: string, alpha: number) {
+  const h = hex.replace('#', '')
+  if (!/^[0-9a-f]{3}$|^[0-9a-f]{6}$/i.test(h)) return hex
+  const n = h.length === 3 ? h.split('').map(c => c + c).join('') : h
+  const int = Number.parseInt(n, 16)
+  return `rgba(${(int >> 16) & 255}, ${(int >> 8) & 255}, ${int & 255}, ${alpha})`
+}
+
+function layoutHubs(w: number, h: number, depts: string[]) {
+  hubs = {}
+  depts.forEach((dept, i) => {
+    // Golden-angle spiral keeps 17 hubs evenly spread at any aspect ratio.
+    const angle = i * 2.399963
+    const radius = 0.16 + 0.34 * Math.sqrt((i + 0.5) / depts.length)
+    hubs[dept] = {
+      x: w / 2 + Math.cos(angle) * radius * w * 0.9,
+      y: h / 2 + Math.sin(angle) * radius * h * 0.85
+    }
+  })
+}
+
+function layoutStars(w: number, h: number) {
+  const maxCalls = Math.max(1, ...props.departments.map(d => d.calls_30d))
+  const callsByDept = Object.fromEntries(props.departments.map(d => [d.department, d.calls_30d]))
+  stars = props.agents.map((agent, i) => {
+    const hub = hubs[agent.department] ?? { x: w / 2, y: h / 2 }
+    const angle = (i * 2.399963) % (Math.PI * 2)
+    const spread = 18 + (i % 5) * 9
+    return {
+      agent,
+      cx: hub.x + Math.cos(angle) * spread,
+      cy: hub.y + Math.sin(angle) * spread * 0.7,
+      baseR: agent.tier === 0 ? 3.2 : agent.tier === 1 ? 2.6 : 2,
+      phase: Math.random() * Math.PI * 2,
+      speed: 0.4 + Math.random() * 0.5,
+      intensity: (callsByDept[agent.department] ?? 0) / maxCalls,
+      x: 0,
+      y: 0
+    }
+  })
+}
+
+function layout() {
+  const w = width.value || 800
+  const depts = [...new Set(props.agents.map(a => a.department))].sort()
+  layoutHubs(w, props.height, depts)
+  layoutStars(w, props.height)
+}
+
+function drawLinks(ctx: CanvasRenderingContext2D, gray: string, animate: boolean) {
+  ctx.lineWidth = 0.5
+  ctx.strokeStyle = rgba(gray, 0.12)
+  for (const s of stars) {
+    const hub = hubs[s.agent.department]
+    if (!hub) continue
+    const drift = animate ? Math.sin(time * s.speed + s.phase) * (2 + s.intensity * 4) : 0
+    s.x = s.cx + drift
+    s.y = s.cy + Math.cos(time * s.speed * 0.8 + s.phase) * (animate ? 2 + s.intensity * 3 : 0)
+    ctx.beginPath()
+    ctx.moveTo(hub.x, hub.y)
+    ctx.lineTo(s.x, s.y)
+    ctx.stroke()
+  }
+}
+
+function drawStars(ctx: CanvasRenderingContext2D, green: string, animate: boolean) {
+  for (const s of stars) {
+    const breath = animate ? (Math.sin(time * 1.4 * s.speed + s.phase) + 1) / 2 : 0.5
+    const r = s.baseR + breath * (0.6 + s.intensity * 1.6)
+    const alpha = Math.min(1, 0.45 + s.intensity * 0.4 + breath * 0.15)
+    ctx.beginPath()
+    ctx.arc(s.x, s.y, r, 0, Math.PI * 2)
+    ctx.fillStyle = rgba(green, alpha)
+    ctx.shadowColor = s.intensity > 0.15 ? green : 'transparent'
+    ctx.shadowBlur = s.intensity * 14
+    ctx.fill()
+    ctx.shadowBlur = 0
+  }
+}
+
+function drawHubLabels(ctx: CanvasRenderingContext2D, gray: string) {
+  ctx.font = '9px "JetBrains Mono", monospace'
+  ctx.fillStyle = rgba(gray, 0.65)
+  ctx.textAlign = 'center'
+  for (const [dept, hub] of Object.entries(hubs)) {
+    ctx.fillText(dept.toUpperCase(), hub.x, hub.y - 16)
+  }
+}
+
+function draw(animate: boolean) {
+  const el = canvas.value
+  const ctx = el?.getContext('2d')
+  if (!el || !ctx) return
+  const w = width.value || 800
+  const dpr = window.devicePixelRatio || 1
+  if (el.width !== w * dpr || el.height !== props.height * dpr) {
+    el.width = w * dpr
+    el.height = props.height * dpr
+  }
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+  ctx.clearRect(0, 0, w, props.height)
+  const green = cssVar('--ui-primary', '#00FF88')
+  const gray = cssVar('--ui-text-muted', '#8A958F')
+  drawLinks(ctx, gray, animate)
+  drawStars(ctx, green, animate)
+  drawHubLabels(ctx, gray)
+}
+
+function loop() {
+  time += 0.016
+  draw(true)
+  frame = requestAnimationFrame(loop)
+}
+
+function start() {
+  cancelAnimationFrame(frame)
+  layout()
+  const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+  if (reduce) {
+    draw(false)
+    return
+  }
+  loop()
+}
+
+watch([width, () => props.agents, visibility], () => {
+  cancelAnimationFrame(frame)
+  if (visibility.value !== 'visible') return
+  if (props.agents.length) start()
+}, { deep: false })
+
+onMounted(() => {
+  if (props.agents.length) start()
+})
+onUnmounted(() => cancelAnimationFrame(frame))
+
+function onMove(e: MouseEvent) {
+  const rect = canvas.value?.getBoundingClientRect()
+  if (!rect) return
+  const mx = e.clientX - rect.left
+  const my = e.clientY - rect.top
+  let best: Star | null = null
+  let bestDist = 18
+  for (const s of stars) {
+    const d = Math.hypot(s.x - mx, s.y - my)
+    if (d < bestDist) {
+      best = s
+      bestDist = d
+    }
+  }
+  hovered.value = best
+    ? { x: best.x, y: best.y, name: best.agent.name, department: best.agent.department }
+    : null
+}
+
+function onClick() {
+  if (hovered.value) router.push('/agents')
+}
+</script>
+
+<template>
+  <div ref="wrap" class="relative w-full" :style="{ height: `${height}px` }">
+    <canvas
+      ref="canvas"
+      class="size-full"
+      :class="hovered ? 'cursor-pointer' : ''"
+      :style="{ width: '100%', height: `${height}px` }"
+      role="img"
+      aria-label="Constellation of all agents grouped by department"
+      @mousemove="onMove"
+      @mouseleave="hovered = null"
+      @click="onClick"
+    />
+    <div
+      v-if="hovered"
+      class="pointer-events-none absolute z-10 -translate-x-1/2 rounded border border-default bg-elevated px-2 py-1"
+      :style="{ left: `${hovered.x}px`, top: `${hovered.y - 34}px` }"
+    >
+      <span class="text-xs font-medium">{{ hovered.name }}</span>
+      <span class="arka-data ml-1.5 text-[10px] text-muted uppercase">{{ hovered.department }}</span>
+    </div>
+  </div>
+</template>

package/dashboard/app/components/ArkaCountUp.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  value: number
+  format?: 'currency' | 'number' | 'percent' | 'tokens'
+  decimals?: number
+  duration?: number
+}>(), {
+  format: 'number',
+  decimals: 0,
+  duration: 900
+})
+
+const target = computed(() => props.value ?? 0)
+const { display } = useCountUp(target, props.duration)
+
+const formatted = computed(() => {
+  const v = display.value
+  if (props.format === 'currency') {
+    return `$${v.toFixed(Math.max(props.decimals, 2))}`
+  }
+  if (props.format === 'percent') {
+    return `${(v * 100).toFixed(props.decimals)}%`
+  }
+  if (props.format === 'tokens') {
+    if (v >= 1_000_000) return `${(v / 1_000_000).toFixed(1)}M`
+    if (v >= 1_000) return `${(v / 1_000).toFixed(1)}k`
+    return Math.round(v).toString()
+  }
+  return Math.round(v).toLocaleString('en-US')
+})
+</script>
+
+<template>
+  <span class="arka-data">{{ formatted }}</span>
+</template>

package/dashboard/app/components/ArkaGlowCard.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+  live?: boolean
+  interactive?: boolean
+  as?: string
+  padded?: boolean
+}>(), {
+  live: false,
+  interactive: false,
+  as: 'div',
+  padded: true
+})
+</script>
+
+<template>
+  <component
+    :is="as"
+    class="arka-glow-card"
+    :class="padded ? 'p-4 sm:p-5' : ''"
+    :data-live="live || undefined"
+    :data-interactive="interactive || undefined"
+  >
+    <slot />
+  </component>
+</template>

package/dashboard/app/components/ArkaLiveFeed.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+// One stream, two sources: /api/audit (poll) for enforcement events and
+// /ws/tasks for job lifecycle. WS failure degrades to poll-only.
+import { useDocumentVisibility } from '@vueuse/core'
+
+interface AuditEvent {
+  ts: string
+  tool: string
+  reason: string
+  kind: string
+}
+interface FeedItem {
+  id: string
+  ts: number
+  icon: string
+  tone: 'primary' | 'warning' | 'error' | 'neutral'
+  title: string
+  detail: string
+}
+
+const props = withDefaults(defineProps<{
+  limit?: number
+  pollInterval?: number
+}>(), {
+  limit: 12,
+  pollInterval: 15_000
+})
+
+const { apiBase } = useApi()
+const visibility = useDocumentVisibility()
+const items = ref<FeedItem[]>([])
+let timer: ReturnType<typeof setInterval> | undefined
+
+function pushItems(next: FeedItem[]) {
+  const seen = new Set(items.value.map(i => i.id))
+  const fresh = next.filter(i => !seen.has(i.id))
+  if (!fresh.length) return
+  items.value = [...fresh, ...items.value]
+    .sort((a, b) => b.ts - a.ts)
+    .slice(0, props.limit)
+}
+
+async function pollAudit() {
+  try {
+    const res = await $fetch<{ events: AuditEvent[] }>(`${apiBase}/api/audit`, { query: { limit: props.limit } })
+    pushItems((res.events || []).map(e => ({
+      id: `audit-${e.ts}-${e.tool}-${(e.reason || '').slice(0, 32)}`,
+      ts: Date.parse(e.ts) || Date.now(),
+      icon: e.kind === 'bypass' ? 'i-lucide-shield-off' : 'i-lucide-shield',
+      tone: e.kind === 'bypass' ? 'warning' : 'neutral',
+      title: e.tool || e.kind,
+      detail: e.reason || e.kind
+    })))
+  } catch {
+    // API down — keep whatever we have
+  }
+}
+
+useTaskStream((e) => {
+  const toneMap = { job_complete: 'primary', job_failed: 'error', job_cancelled: 'warning', job_progress: 'neutral' } as const
+  const iconMap = {
+    job_complete: 'i-lucide-check-circle',
+    job_failed: 'i-lucide-x-circle',
+    job_cancelled: 'i-lucide-circle-slash',
+    job_progress: 'i-lucide-loader'
+  } as const
+  pushItems([{
+    id: `job-${e.job_id}-${e.type}-${e.ts}`,
+    ts: e.ts,
+    icon: iconMap[e.type],
+    tone: toneMap[e.type],
+    title: e.type.replace('job_', 'job '),
+    detail: e.message || e.error || e.job_id
+  }])
+})
+
+onMounted(() => {
+  pollAudit()
+  timer = setInterval(() => {
+    if (visibility.value === 'visible') pollAudit()
+  }, props.pollInterval)
+})
+onUnmounted(() => clearInterval(timer))
+
+function timeLabel(ts: number) {
+  return new Date(ts).toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', second: '2-digit' })
+}
+const toneClass = { primary: 'text-primary', warning: 'text-warning', error: 'text-error', neutral: 'text-muted' }
+</script>
+
+<template>
+  <ArkaGlowCard :padded="false">
+    <div v-if="!items.length" class="p-6 text-center">
+      <p class="arka-data text-xs text-muted">
+        listening for signals…
+      </p>
+    </div>
+    <TransitionGroup
+      v-else
+      tag="ul"
+      class="divide-y divide-default"
+      enter-active-class="arka-stream-in"
+    >
+      <li
+        v-for="item in items"
+        :key="item.id"
+        class="flex items-center gap-3 px-4 py-2.5"
+      >
+        <UIcon :name="item.icon" class="size-4 shrink-0" :class="toneClass[item.tone]" />
+        <div class="min-w-0 flex-1">
+          <p class="truncate text-sm">
+            {{ item.title }}
+          </p>
+          <p class="truncate text-xs text-muted">
+            {{ item.detail }}
+          </p>
+        </div>
+        <span class="arka-data shrink-0 text-[10px] text-muted">{{ timeLabel(item.ts) }}</span>
+      </li>
+    </TransitionGroup>
+  </ArkaGlowCard>
+</template>

package/dashboard/app/components/ArkaNavGroupLabel.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineProps<{
+  label: string
+}>()
+</script>
+
+<template>
+  <p class="arka-eyebrow px-2.5 pt-4 pb-1 text-[10px]">
+    {{ label }}
+  </p>
+</template>

package/dashboard/app/components/ArkaPageHero.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { useTimestamp } from '@vueuse/core'
+
+withDefaults(defineProps<{
+  numeral: string
+  label: string
+  title: string
+  subtitle?: string
+  clock?: boolean
+}>(), {
+  subtitle: '',
+  clock: true
+})
+
+const timestamp = useTimestamp({ interval: 1000 })
+const clockLabel = computed(() =>
+  new Date(timestamp.value).toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' })
+)
+</script>
+
+<template>
+  <header class="space-y-3">
+    <div class="flex items-center gap-3">
+      <span class="arka-numeral text-2xl leading-none">{{ numeral }}.</span>
+      <span class="h-px w-10 bg-[var(--ui-border)]" aria-hidden="true" />
+      <span class="arka-eyebrow">{{ label }}</span>
+      <div class="ml-auto flex items-center gap-2">
+        <slot name="actions" />
+      </div>
+    </div>
+    <h1 class="arka-serif-title text-4xl sm:text-5xl">
+      {{ title }}
+    </h1>
+    <p v-if="subtitle" class="max-w-2xl text-muted">
+      {{ subtitle }}
+    </p>
+    <p v-if="clock" class="arka-data text-xs text-muted uppercase tracking-wide">
+      {{ clockLabel }} · local · studio
+    </p>
+    <slot name="stats" />
+  </header>
+</template>

package/dashboard/app/components/ArkaSection.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+defineProps<{
+  numeral: string
+  label: string
+}>()
+</script>
+
+<template>
+  <section class="space-y-5">
+    <div class="flex items-center gap-3">
+      <span class="arka-numeral text-xl leading-none">{{ numeral }}.</span>
+      <span class="h-px w-8 bg-[var(--ui-border)]" aria-hidden="true" />
+      <span class="arka-eyebrow">{{ label }}</span>
+      <div class="ml-auto flex items-center gap-2">
+        <slot name="actions" />
+      </div>
+    </div>
+    <slot />
+  </section>
+</template>

package/dashboard/app/components/ArkaStarfield.vue

@@ -0,0 +1,3 @@
+<template>
+  <div class="arka-starfield" aria-hidden="true" />
+</template>

package/dashboard/app/components/ArkaStatCard.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+  label: string
+  value: number | null
+  format?: 'currency' | 'number' | 'percent' | 'tokens'
+  decimals?: number
+  accent?: boolean
+  hint?: string
+}>(), {
+  format: 'number',
+  decimals: 0,
+  accent: false,
+  hint: ''
+})
+</script>
+
+<template>
+  <ArkaGlowCard :live="accent" class="min-w-0">
+    <div class="space-y-2" :class="accent ? 'border-l-2 border-primary -ml-4 pl-4 sm:-ml-5 sm:pl-5' : ''">
+      <p class="arka-eyebrow">
+        {{ label }}
+      </p>
+      <p class="text-3xl font-medium leading-none">
+        <ArkaCountUp
+          v-if="value !== null"
+          :value="value"
+          :format="format"
+          :decimals="decimals"
+        />
+        <span v-else class="arka-data text-muted">—</span>
+      </p>
+      <p v-if="hint" class="text-xs text-muted">
+        {{ hint }}
+      </p>
+      <slot name="sparkline" />
+    </div>
+  </ArkaGlowCard>
+</template>

package/dashboard/app/components/ArkaSystemPill.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+// "all systems live" — the shell's heartbeat. Polls /api/health (30s),
+// pauses while the tab is hidden.
+import { useDocumentVisibility } from '@vueuse/core'
+
+interface HealthPayload {
+  healthy: boolean
+  passed: number
+  total: number
+  failed_blocking: number
+}
+
+const { apiBase } = useApi()
+const health = ref<HealthPayload | null>(null)
+const visibility = useDocumentVisibility()
+let timer: ReturnType<typeof setInterval> | undefined
+
+async function poll() {
+  try {
+    health.value = await $fetch<HealthPayload>(`${apiBase}/api/health`)
+  } catch {
+    health.value = null
+  }
+}
+
+onMounted(() => {
+  poll()
+  timer = setInterval(() => {
+    if (visibility.value === 'visible') poll()
+  }, 30_000)
+})
+onUnmounted(() => clearInterval(timer))
+
+const label = computed(() => {
+  if (!health.value) return 'link down'
+  if (health.value.healthy) return 'all systems live'
+  return `${health.value.failed_blocking || health.value.total - health.value.passed} degraded`
+})
+const tone = computed(() => {
+  if (!health.value) return 'text-muted'
+  return health.value.healthy ? 'text-primary' : 'text-warning'
+})
+</script>
+
+<template>
+  <NuxtLink
+    to="/health"
+    class="flex items-center gap-2 rounded-full border border-default bg-elevated px-3 py-1.5 transition-colors hover:border-primary/40"
+  >
+    <span v-if="health?.healthy" class="arka-live-dot" />
+    <span v-else class="size-2 rounded-full" :class="health ? 'bg-warning' : 'bg-carbon-500'" />
+    <span class="arka-data text-xs" :class="tone">{{ label }}</span>
+  </NuxtLink>
+</template>

package/dashboard/app/components/ArkaTrendChart.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { VisXYContainer, VisArea, VisLine, VisAxis } from '@unovis/vue'
+
+interface TrendPoint {
+  date: string
+  value: number
+}
+
+const props = withDefaults(defineProps<{
+  series: TrendPoint[]
+  height?: number
+}>(), {
+  height: 160
+})
+
+const x = (_: TrendPoint, i: number) => i
+const y = (d: TrendPoint) => d.value
+
+const tickValues = computed(() => {
+  const n = props.series.length
+  if (n <= 7) return props.series.map((_, i) => i)
+  const step = Math.ceil(n / 6)
+  return props.series.map((_, i) => i).filter(i => i % step === 0)
+})
+
+function tickFormat(i: number) {
+  const point = props.series[Math.round(i)]
+  if (!point) return ''
+  return point.date.slice(5)
+}
+</script>
+
+<template>
+  <div class="arka-trend-chart">
+    <VisXYContainer :data="series" :height="height">
+      <VisArea
+        :x="x"
+        :y="y"
+        color="var(--ui-primary)"
+        :opacity="0.12"
+        curve-type="monotoneX"
+      />
+      <VisLine
+        :x="x"
+        :y="y"
+        color="var(--ui-primary)"
+        :line-width="1.5"
+        curve-type="monotoneX"
+      />
+      <VisAxis
+        type="x"
+        :tick-values="tickValues"
+        :tick-format="tickFormat"
+        :grid-line="false"
+        :domain-line="false"
+        :tick-line="false"
+      />
+    </VisXYContainer>
+  </div>
+</template>
+
+<style scoped>
+.arka-trend-chart :deep(text) {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  fill: var(--ui-text-muted);
+}
+</style>

package/dashboard/app/composables/useCountUp.ts

@@ -0,0 +1,30 @@
+// rAF count-up on the shared motion rhythm. Reduced-motion (or a zero
+// duration) jumps straight to the target so numbers are never withheld.
+export function useCountUp(target: Ref<number>, duration = 900) {
+  const display = ref(0)
+  let frame = 0
+
+  const run = (to: number) => {
+    cancelAnimationFrame(frame)
+    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+    if (reduce || duration <= 0 || !Number.isFinite(to)) {
+      display.value = to
+      return
+    }
+    const from = display.value
+    const start = performance.now()
+    const tick = (now: number) => {
+      const t = Math.min((now - start) / duration, 1)
+      const eased = 1 - Math.pow(1 - t, 3)
+      display.value = from + (to - from) * eased
+      if (t < 1) frame = requestAnimationFrame(tick)
+      else display.value = to
+    }
+    frame = requestAnimationFrame(tick)
+  }
+
+  watch(target, run, { immediate: true })
+  onUnmounted(() => cancelAnimationFrame(frame))
+
+  return { display }
+}