(chore) init commit and add tasks

.eslintrc.json

@@ -0,0 +1,23 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "plugins": ["@typescript-eslint"],
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true
+  },
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module",
+    "jsx": true
+  },
+  "ignorePatterns": ["tsconfig.json", ".next", "node_modules"],
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/triple-slash-reference": "off"
+  }
+}

.gitignore

@@ -0,0 +1,8 @@
+node_modules/
+.next/
+*.log
+.DS_Store
+.env
+.env.local
+.env.*.local
+.claude

PLAN.md

@@ -0,0 +1,620 @@
+# Homelab Auth + Portfolio: Authentik Forward-Auth + Homarr SSO + Portfolio Site (Terraform)
+
+## Context
+
+Three services (Longhorn, Portainer, Prometheus) currently zero-auth. Goal: rebuild with Authentik forward-auth + Homarr dashboard + personal portfolio site. Infrastructure as Terraform (not Helm).
+
+Authentik bootstrap (Proxy Providers, groups) via Python helper. Homarr + Portfolio deployed as K8s manifests via Terraform modules.
+
+---
+
+## Track A — Authentik Forward-Auth (Setup via Python, Ingress via TF)
+
+Authentik cluster already running (deployed separately). Python helper script registers Proxy Providers + groups:
+
+**`k8s/talos-iam/register_proxy_app.py`** (mirrors `register_oauth_app.py`):
+- Queries embedded outpost, creates `/providers/proxy/` (mode: `forward_single`)
+- Creates `/core/applications/` entry
+- Creates/binds Authentik group
+- Patches outpost `providers` list
+
+```bash
+python3 k8s/talos-iam/register_proxy_app.py \
+  --service-name longhorn --namespace longhorn-system \
+  --external-host longhorn.riotpiao.homelab.com \
+  --add-group infra-admins
+# Repeat for portainer, prometheus
+```
+
+**Ingress wiring (Terraform):**
+
+`modules/ingress/protected-services.tf`:
+```hcl
+resource "kubernetes_ingress_v1" "protected_services" {
+  for_each = var.protected_services
+
+  metadata {
+    name      = each.key
+    namespace = each.value.namespace
+    annotations = {
+      "nginx.ingress.kubernetes.io/auth-url" = "http://authentik-server.iam.svc.cluster.local/outpost.goauthentik.io/auth/nginx"
+      "nginx.ingress.kubernetes.io/auth-signin" = "https://authentik.riotpiao.homelab.com/outpost.goauthentik.io/start?rd=$scheme://$http_host$escaped_request_uri"
+      "nginx.ingress.kubernetes.io/auth-response-headers" = "Set-Cookie,X-authentik-username,X-authentik-groups,X-authentik-email,X-authentik-name,X-authentik-uid"
+    }
+  }
+
+  spec {
+    ingress_class_name = "nginx"
+    rule {
+      host = each.value.host
+      http {
+        path {
+          path      = "/"
+          path_type = "Prefix"
+          backend {
+            service {
+              name = each.value.service_name
+              port {
+                number = each.value.service_port
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+**NetworkPolicy (per-service, Terraform):**
+
+`modules/network-policy/backend-isolation.tf`:
+```hcl
+resource "kubernetes_network_policy" "backend_only_from_ingress" {
+  for_each = var.isolated_services
+
+  metadata {
+    name      = "${each.key}-deny-except-ingress"
+    namespace = each.value.namespace
+  }
+
+  spec {
+    pod_selector {
+      match_labels = each.value.pod_selector
+    }
+    policy_types = ["Ingress"]
+    ingress {
+      from {
+        namespace_selector {
+          match_labels = {
+            name = "ingress-nginx"
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+---
+
+## Track B — Homarr (Terraform Deployment)
+
+**Homarr Helm chart wrapper (Terraform):**
+
+`modules/homarr/main.tf`:
+```hcl
+resource "kubernetes_namespace" "homarr" {
+  metadata {
+    name = "dashboard"
+    labels = {
+      "managed_by" = "terraform"
+      "reloader" = "enabled"
+    }
+  }
+}
+
+resource "kubernetes_secret" "homarr_oidc" {
+  metadata {
+    name      = "homarr-oidc"
+    namespace = kubernetes_namespace.homarr.metadata[0].name
+  }
+
+  data = {
+    AUTH_OIDC_CLIENT_SECRET = var.homarr_oidc_client_secret
+  }
+
+  type = "Opaque"
+}
+
+resource "helm_release" "homarr" {
+  name       = "homarr"
+  namespace  = kubernetes_namespace.homarr.metadata[0].name
+  chart      = "homarr"
+  repository = "https://homarr-labs.github.io/charts/"
+  version    = var.homarr_version
+
+  set {
+    name  = "env.AUTH_PROVIDERS"
+    value = "oidc"
+  }
+
+  set {
+    name  = "env.AUTH_OIDC_CLIENT_ID"
+    value = "homarr"
+  }
+
+  set {
+    name  = "env.AUTH_OIDC_ISSUER"
+    value = "https://authentik.riotpiao.homelab.com/application/o/homarr/"
+  }
+
+  set {
+    name  = "env.AUTH_OIDC_URI"
+    value = "https://authentik.riotpiao.homelab.com/application/o/homarr/.well-known/openid-configuration"
+  }
+
+  set {
+    name  = "env.AUTH_OIDC_GROUPS_ATTRIBUTE"
+    value = "groups"
+  }
+
+  set {
+    name  = "envFrom[0].secretRef.name"
+    value = kubernetes_secret.homarr_oidc.metadata[0].name
+  }
+
+  set {
+    name  = "persistence.enabled"
+    value = "true"
+  }
+
+  set {
+    name  = "persistence.storageClass"
+    value = "longhorn"
+  }
+
+  set {
+    name  = "persistence.size"
+    value = "2Gi"
+  }
+
+  depends_on = [kubernetes_secret.homarr_oidc]
+}
+```
+
+**Homarr Ingress (no auth, Homarr handles login):**
+
+`modules/homarr/ingress.tf`:
+```hcl
+resource "kubernetes_ingress_v1" "homarr" {
+  metadata {
+    name      = "homarr"
+    namespace = kubernetes_namespace.homarr.metadata[0].name
+    annotations = {
+      "cert-manager.io/cluster-issuer" = "letsencrypt-prod"
+    }
+  }
+
+  spec {
+    ingress_class_name = "nginx"
+    tls {
+      hosts       = ["homarr.riotpiao.homelab.com"]
+      secret_name = "homarr-tls"
+    }
+    rule {
+      host = "homarr.riotpiao.homelab.com"
+      http {
+        path {
+          path      = "/"
+          path_type = "Prefix"
+          backend {
+            service {
+              name = helm_release.homarr.name
+              port {
+                number = 3000
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+**Authentik setup for Homarr (Python):**
+
+```bash
+python3 k8s/talos-iam/register_oauth_app.py \
+  --service-name homarr \
+  --namespace dashboard \
+  --redirect-uri "https://homarr.riotpiao.homelab.com/api/auth/callback/oidc" \
+  --add-group homarr-infra-admins
+```
+
+Then attach `groups` scope mapping (manual Authentik UI or separate Terraform provider if available).
+
+**Homarr board setup (manual runbook in `k8s/homarr/README.md`):**
+- Create groups: Infra (Longhorn/Portainer/Prometheus), Platform (Grafana/Vault), Workflows (Temporal/kmsvc)
+- Each tile deep-links to existing ingress
+- Restrict Infra group visibility to `infra-admins`
+
+---
+
+## Track C — Portfolio Site (Terraform Deployment)
+
+Portfolio source repo: `~/workplace/riotpiao` (Next.js, standalone output).
+
+**Portfolio Helm chart (Terraform wrapper):**
+
+`modules/portfolio/main.tf`:
+```hcl
+resource "kubernetes_namespace" "portfolio" {
+  metadata {
+    name = "portfolio"
+    labels = {
+      "managed_by" = "terraform"
+    }
+  }
+}
+
+resource "helm_release" "portfolio" {
+  name       = "portfolio"
+  namespace  = kubernetes_namespace.portfolio.metadata[0].name
+  chart      = "./k8s/portfolio"  # Local chart from homelab repo
+
+  set {
+    name  = "image.repository"
+    value = var.portfolio_image_repo
+  }
+
+  set {
+    name  = "image.tag"
+    value = var.portfolio_image_tag
+  }
+
+  set {
+    name  = "replicaCount"
+    value = 2
+  }
+
+  set {
+    name  = "resources.requests.cpu"
+    value = "100m"
+  }
+
+  set {
+    name  = "resources.requests.memory"
+    value = "128Mi"
+  }
+
+  set {
+    name  = "resources.limits.cpu"
+    value = "500m"
+  }
+
+  set {
+    name  = "resources.limits.memory"
+    value = "512Mi"
+  }
+}
+```
+
+**Portfolio Ingress (public, no auth):**
+
+`modules/portfolio/ingress.tf`:
+```hcl
+resource "kubernetes_ingress_v1" "portfolio" {
+  metadata {
+    name      = "portfolio"
+    namespace = kubernetes_namespace.portfolio.metadata[0].name
+    annotations = {
+      "cert-manager.io/cluster-issuer" = "letsencrypt-prod"
+    }
+  }
+
+  spec {
+    ingress_class_name = "nginx"
+    tls {
+      hosts       = ["portfolio.riotpiao.homelab.com"]
+      secret_name = "portfolio-tls"
+    }
+    rule {
+      host = "portfolio.riotpiao.homelab.com"
+      http {
+        path {
+          path      = "/"
+          path_type = "Prefix"
+          backend {
+            service {
+              name = helm_release.portfolio.name
+              port {
+                number = 3000
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+**Portfolio Helm chart structure** (local, in homelab repo):
+
+```
+k8s/portfolio/
+├── Chart.yaml
+├── values.yaml
+├── templates/
+│   ├── deployment.yaml
+│   ├── service.yaml
+│   └── _helpers.tpl
+└── README.md
+```
+
+**Build + push script** (portfolio repo):
+
+`~/workplace/riotpiao/build.sh`:
+```bash
+#!/bin/bash
+set -euo pipefail
+
+REGISTRY="forgejo.riotpiao.homelab.com"
+IMAGE="${REGISTRY}/rock/portfolio:latest"
+
+docker buildx build --platform linux/amd64 -t "${IMAGE}" .
+docker push "${IMAGE}"
+
+echo "✓ Pushed ${IMAGE}"
+```
+
+---
+
+## Terraform Structure
+
+```
+~/workplace/homelab-terraform/  (or extend existing homelab repo)
+├── main.tf                      # K8s provider config
+├── variables.tf                 # Inputs
+├── outputs.tf
+│
+├── modules/
+│   ├── ingress/
+│   │   ├── protected-services.tf    # Longhorn, Portainer, Prometheus
+│   │   └── variables.tf
+│   │
+│   ├── homarr/
+│   │   ├── main.tf                  # Namespace, Secret, Helm release
+│   │   ├── ingress.tf               # Public Homarr ingress
+│   │   └── variables.tf
+│   │
+│   ├── portfolio/
+│   │   ├── main.tf                  # Namespace, Helm release
+│   │   ├── ingress.tf               # Public portfolio ingress
+│   │   └── variables.tf
+│   │
+│   └── network-policy/
+│       └── backend-isolation.tf     # Deny ingress except nginx
+│
+├── environments/
+│   └── prod.tfvars                 # Domain, image repos, versions
+│
+└── .terraform.lock.hcl
+```
+
+**Main entry point:**
+
+`main.tf`:
+```hcl
+terraform {
+  required_providers {
+    kubernetes = {
+      source  = "hashicorp/kubernetes"
+      version = "~> 2.25"
+    }
+    helm = {
+      source  = "hashicorp/helm"
+      version = "~> 2.12"
+    }
+  }
+
+  backend "local" {
+    path = "terraform.tfstate"
+  }
+}
+
+provider "kubernetes" {
+  host                   = var.cluster_endpoint
+  cluster_ca_certificate = base64decode(var.cluster_ca_cert)
+  token                  = var.cluster_token
+}
+
+provider "helm" {
+  kubernetes {
+    host                   = var.cluster_endpoint
+    cluster_ca_certificate = base64decode(var.cluster_ca_cert)
+    token                  = var.cluster_token
+  }
+}
+
+module "ingress" {
+  source = "./modules/ingress"
+  protected_services = var.protected_services
+}
+
+module "homarr" {
+  source = "./modules/homarr"
+  homarr_version            = var.homarr_version
+  homarr_oidc_client_secret = var.homarr_oidc_client_secret
+}
+
+module "portfolio" {
+  source = "./modules/portfolio"
+  portfolio_image_repo = var.portfolio_image_repo
+  portfolio_image_tag  = var.portfolio_image_tag
+}
+
+module "network_policy" {
+  source = "./modules/network-policy"
+  isolated_services = var.isolated_services
+}
+```
+
+**`variables.tf`:**
+```hcl
+variable "cluster_endpoint" {
+  type = string
+  description = "K8s API endpoint"
+}
+
+variable "cluster_ca_cert" {
+  type = string
+  sensitive = true
+}
+
+variable "cluster_token" {
+  type = string
+  sensitive = true
+}
+
+variable "protected_services" {
+  type = map(object({
+    host         = string
+    namespace    = string
+    service_name = string
+    service_port = number
+  }))
+  default = {
+    "longhorn" = {
+      host         = "longhorn.riotpiao.homelab.com"
+      namespace    = "longhorn-system"
+      service_name = "longhorn-frontend"
+      service_port = 80
+    }
+    "portainer" = {
+      host         = "portainer.riotpiao.homelab.com"
+      namespace    = "dashboard"
+      service_name = "portainer"
+      service_port = 9000
+    }
+    "prometheus" = {
+      host         = "prometheus.riotpiao.homelab.com"
+      namespace    = "monitoring"
+      service_name = "prometheus-operated"
+      service_port = 9090
+    }
+  }
+}
+
+variable "homarr_version" {
+  type = string
+  default = "~1"
+}
+
+variable "homarr_oidc_client_secret" {
+  type = string
+  sensitive = true
+  description = "From Authentik provider"
+}
+
+variable "portfolio_image_repo" {
+  type = string
+  default = "forgejo.riotpiao.homelab.com/rock/portfolio"
+}
+
+variable "portfolio_image_tag" {
+  type = string
+  default = "latest"
+}
+
+variable "isolated_services" {
+  type = map(object({
+    namespace   = string
+    pod_selector = map(string)
+  }))
+  default = {
+    "longhorn" = {
+      namespace = "longhorn-system"
+      pod_selector = {
+        "app.kubernetes.io/name" = "longhorn"
+      }
+    }
+    "portainer" = {
+      namespace = "dashboard"
+      pod_selector = {
+        "app" = "portainer"
+      }
+    }
+    "prometheus" = {
+      namespace = "monitoring"
+      pod_selector = {
+        "app.kubernetes.io/name" = "prometheus"
+      }
+    }
+  }
+}
+```
+
+---
+
+## Implementation Sequencing
+
+1. **Authentik setup (Python):**
+   - Register Proxy Providers (Longhorn, Portainer, Prometheus)
+   - Create groups (infra-admins, homarr-infra-admins)
+   - Verify `/outpost.goauthentik.io/auth/nginx` endpoint accessible
+
+2. **Terraform deploy (parallel):**
+   - Ingress + NetworkPolicies (protected services)
+   - Homarr (depends on Authentik, has own OIDC)
+   - Portfolio (independent, public)
+
+3. **Portfolio build + push:**
+   - `cd ~/workplace/riotpiao && ./build.sh`
+   - Verify image in Forgejo registry
+
+4. **Terraform apply:**
+   ```bash
+   terraform init
+   terraform plan
+   terraform apply
+   ```
+
+5. **Verification:**
+   - `curl -I https://longhorn.riotpiao.homelab.com` → 302 to Authentik (unauthenticated)
+   - Login as `infra-admins` member → Longhorn UI loads
+   - `curl -I https://homarr.riotpiao.homelab.com` → OIDC sign-in page
+   - Login → Homarr boards visible
+   - `curl -I https://portfolio.riotpiao.homelab.com` → 200, no redirect
+
+---
+
+## Files to Create
+
+**In homelab repo:**
+- `terraform.tfvars` (git-ignored)
+- `main.tf`, `variables.tf`, `outputs.tf`
+- `modules/{ingress,homarr,portfolio,network-policy}/*`
+- `k8s/homarr/README.md` (board setup runbook)
+- `k8s/portfolio/Chart.yaml`, `templates/*`
+
+**In portfolio repo (`~/workplace/riotpiao`):**
+- `app/layout.tsx`, `app/page.tsx`, `app/about/page.tsx`
+- `components/{Header,Footer,ProjectCard}.tsx`
+- `content/{projects,experience,metadata}.ts`
+- `styles/globals.css`
+- `Dockerfile`, `build.sh`, `next.config.js`
+- `package.json` (Next.js 15 + Tailwind)
+
+---
+
+## Success Criteria
+
+- [ ] Protected services (Longhorn/Portainer/Prometheus) redirect unauthenticated to Authentik
+- [ ] Infra-admins group members see UI; non-members denied
+- [ ] Homarr OIDC login works; boards render for authorized groups
+- [ ] Portfolio site accessible without auth; project grid + about page live
+- [ ] All deployed via `terraform apply` (no manual kubectl)
+- [ ] Terraform state tracks 100% of resources

app/cluster/chat/page.tsx

@@ -0,0 +1,217 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { ChevronDown } from 'lucide-react'
+import { Panel } from '@/components/cluster/Panel'
+import { SlotMeter } from '@/components/cluster/SlotMeter'
+
+const DAILY_BUDGET = 12
+
+type Turn = {
+  role: 'user' | 'model'
+  reasoning?: string
+  content: string
+  streaming?: boolean
+}
+
+const SEED: Turn[] = [
+  { role: 'user', content: 'Why is the sms application degraded?' },
+  {
+    role: 'model',
+    reasoning:
+      'The snapshot lists sms with health "degraded" and sync "synced". Sync being clean means the manifests applied fine, so this is a runtime problem rather than a delivery one. The sms namespace shows 0 of 1 pods running. A single pod that never reaches Running, with Argo reporting the desired state as applied, usually means the pod cannot be placed at all.',
+    content:
+      'Delivery is fine — sms is Synced, so Argo applied everything it was asked to. The failure is at runtime: the namespace has one pod and zero running. Argo marks the app degraded because the workload never became ready, not because the manifests are wrong.',
+  },
+]
+
+const REPLY =
+  'Wave 4 is empty. Waves are sort keys, not a sequence — Argo orders by value and skips gaps, so 3 is followed directly by 5. Nothing is missing.'
+
+const REPLY_REASONING =
+  'The user is asking about a gap in the wave column display. Argo CD sync waves are integers used purely for ordering; there is no requirement that they be contiguous. The cluster uses 0,1,2,3,5,6,7,8. This is normal and usually happens when a wave is retired or intentionally reserved.'
+
+export default function ChatPage() {
+  const [turns, setTurns] = useState<Turn[]>(SEED)
+  const [value, setValue] = useState('')
+  const [queue, setQueue] = useState<number | null>(null)
+  const [slots, setSlots] = useState(3)
+  const [used, setUsed] = useState(2)
+  const [openReasoning, setOpenReasoning] = useState<number | null>(1)
+  const scrollRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: 'smooth' })
+  }, [turns, queue])
+
+  const send = () => {
+    if (!value.trim() || queue !== null || used >= DAILY_BUDGET) return
+    setTurns((t) => [...t, { role: 'user', content: value }])
+    setValue('')
+    setQueue(3)
+  }
+
+  // Placeholder for the queue → stream transition. Real version is SSE from atlas.
+  useEffect(() => {
+    if (queue === null) return
+    if (queue > 0) {
+      const t = setTimeout(() => setQueue((q) => (q === null ? null : q - 1)), 700)
+      return () => clearTimeout(t)
+    }
+    setQueue(null)
+    setSlots((s) => Math.min(s + 1, 6))
+    setUsed((u) => u + 1)
+    setTurns((t) => [...t, { role: 'model', reasoning: REPLY_REASONING, content: '', streaming: true }])
+
+    let i = 0
+    const stream = setInterval(() => {
+      i += 3
+      setTurns((t) => {
+        const next = [...t]
+        const last = next[next.length - 1]
+        if (last?.role !== 'model') return t
+        next[next.length - 1] = { ...last, content: REPLY.slice(0, i), streaming: i < REPLY.length }
+        return next
+      })
+      if (i >= REPLY.length) {
+        clearInterval(stream)
+        setSlots((s) => Math.max(s - 1, 1))
+      }
+    }, 40)
+    return () => clearInterval(stream)
+  }, [queue])
+
+  const exhausted = used >= DAILY_BUDGET
+
+  return (
+    <div className="space-y-6">
+      <header className="border border-wire bg-deck p-6 md:p-8">
+        <p className="font-data text-[10px] uppercase tracking-[0.2em] text-dim">Surface D — Chat</p>
+        <h1 className="mt-3 max-w-3xl font-signage text-3xl font-semibold leading-[1.1] tracking-signage md:text-5xl">
+          A 32B model, running on one card, <span className="text-lamp">two rooms from here.</span>
+        </h1>
+        <p className="mt-5 max-w-2xl font-plex text-sm leading-relaxed text-dim">
+          It reads a redacted snapshot of the cluster and answers questions about it. It cannot query anything, run
+          anything, or change anything. When all six public slots are busy, you wait in line — the queue is real,
+          and so is the hardware.
+        </p>
+        <div className="mt-6 flex flex-wrap items-center gap-6">
+          <SlotMeter used={slots} size="lg" showCap />
+          <span className="font-data text-[10px] uppercase tracking-[0.14em] text-dim">
+            {DAILY_BUDGET - used} of {DAILY_BUDGET} messages left today
+          </span>
+        </div>
+      </header>
+
+      <div className="grid gap-6 lg:grid-cols-[1fr_260px]">
+        <Panel label="Session" hint="anonymous">
+          <div ref={scrollRef} className="h-[440px] space-y-5 overflow-y-auto pr-1">
+            {turns.map((turn, i) =>
+              turn.role === 'user' ? (
+                <div key={i} className="flex justify-end">
+                  <p className="max-w-[85%] border border-wire-lit bg-riser px-3 py-2 font-plex text-sm text-chalk">
+                    {turn.content}
+                  </p>
+                </div>
+              ) : (
+                <div key={i} className="max-w-[92%] space-y-2">
+                  {turn.reasoning && (
+                    <div className="border-l-2 border-lamp/50">
+                      <button
+                        onClick={() => setOpenReasoning(openReasoning === i ? null : i)}
+                        aria-expanded={openReasoning === i}
+                        className="flex w-full items-center gap-2 py-1 pl-3 font-data text-[10px] uppercase tracking-[0.16em] text-lamp focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-lamp"
+                      >
+                        <ChevronDown
+                          size={12}
+                          className={`transition-transform ${openReasoning === i ? '' : '-rotate-90'}`}
+                        />
+                        thinking
+                      </button>
+                      {openReasoning === i && (
+                        <p className="py-1 pl-3 pr-2 font-data text-[11px] leading-relaxed text-dim">
+                          {turn.reasoning}
+                        </p>
+                      )}
+                    </div>
+                  )}
+                  <p className="font-plex text-sm leading-relaxed text-chalk">
+                    {turn.content}
+                    {turn.streaming && <span className="ml-0.5 inline-block h-4 w-2 animate-pulse bg-lamp align-text-bottom" />}
+                  </p>
+                </div>
+              ),
+            )}
+
+            {queue !== null && (
+              <div className="flex items-center gap-3 border border-lamp/40 px-3 py-2">
+                <SlotMeter used={6} />
+                <p className="font-data text-[11px] text-lamp">
+                  all six public slots busy · position {queue} in queue
+                </p>
+              </div>
+            )}
+          </div>
+
+          <form
+            onSubmit={(e) => {
+              e.preventDefault()
+              send()
+            }}
+            className="mt-3 flex items-center gap-2 border-t border-wire pt-3"
+          >
+            <input
+              value={value}
+              onChange={(e) => setValue(e.target.value)}
+              disabled={exhausted}
+              aria-label="Message"
+              placeholder={exhausted ? 'Daily limit reached — resets in 14h' : 'Ask about the cluster'}
+              className="min-w-0 flex-1 bg-transparent font-plex text-sm text-chalk placeholder:text-dim/60 focus:outline-none disabled:cursor-not-allowed"
+            />
+            <button
+              type="submit"
+              disabled={exhausted || queue !== null}
+              className="border border-lamp px-3 py-1 font-data text-[10px] uppercase tracking-[0.14em] text-lamp transition-colors hover:bg-lamp hover:text-void focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-lamp disabled:opacity-30 disabled:hover:bg-transparent disabled:hover:text-lamp"
+            >
+              send
+            </button>
+          </form>
+        </Panel>
+
+        <div className="space-y-6">
+          <Panel label="Limits" hint="tier 3">
+            <dl className="space-y-2.5 font-data text-[11px]">
+              {[
+                ['public slots', '6 of 8'],
+                ['queue depth', '20'],
+                ['per session', '12 / day'],
+                ['request timeout', '120s'],
+                ['output cap', '1500 tokens'],
+              ].map(([k, v]) => (
+                <div key={k} className="flex items-baseline gap-2">
+                  <dt className="text-dim">{k}</dt>
+                  <dd className="ml-auto tabular-nums text-chalk">{v}</dd>
+                </div>
+              ))}
+            </dl>
+            <p className="mt-4 border-t border-wire pt-3 font-plex text-[11px] leading-relaxed text-dim">
+              Closing this tab frees your slot immediately. Two slots stay reserved so the operator is never locked
+              out of their own hardware.
+            </p>
+          </Panel>
+
+          <Panel label="Cannot do" hint="by construction">
+            <ul className="space-y-1.5 font-data text-[10px] text-dim">
+              {['call tools', 'query the cluster', 'read logs', 'change anything', 'see Secret contents'].map((x) => (
+                <li key={x} className="flex items-center gap-2">
+                  <span className="h-px w-3 bg-wire-lit" />
+                  {x}
+                </li>
+              ))}
+            </ul>
+          </Panel>
+        </div>
+      </div>
+    </div>
+  )
+}

app/cluster/delivery/page.tsx

@@ -0,0 +1,219 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import { Panel } from '@/components/cluster/Panel'
+import { DEFAULT_KINDS, WAVES, apps, appsInWave, resourceKinds, type App } from '@/lib/clusterMock'
+
+const TOTAL_RESOURCES = apps.reduce((n, a) => n + a.resources, 0)
+
+/** Resource count as discrete cells, capped so a 68-resource app stays readable. */
+function CountBar({ n }: { n: number }) {
+  const cells = Math.min(n, 24)
+  return (
+    <div className="mt-2 flex flex-wrap gap-[2px]" aria-label={`${n} resources`}>
+      {Array.from({ length: cells }, (_, i) => (
+        <span key={i} className="h-1.5 w-1.5 rounded-[1px] bg-wire-lit" />
+      ))}
+      {n > 24 && <span className="ml-1 font-data text-[9px] leading-none text-dim">+{n - 24}</span>}
+    </div>
+  )
+}
+
+function AppCard({
+  app,
+  state,
+  active,
+  onSelect,
+}: {
+  app: App
+  state: 'idle' | 'syncing' | 'done'
+  active: boolean
+  onSelect: () => void
+}) {
+  const degraded = app.health === 'degraded'
+  const drifted = app.sync === 'outofsync'
+
+  const border = active
+    ? 'border-lamp'
+    : state === 'syncing'
+      ? 'border-lamp/70'
+      : degraded
+        ? 'border-rose/50'
+        : drifted
+          ? 'border-lamp/40'
+          : 'border-wire'
+
+  return (
+    <button
+      onClick={onSelect}
+      aria-pressed={active}
+      className={[
+        'w-full border bg-deck p-2.5 text-left transition-all duration-300',
+        'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-lamp',
+        border,
+        state === 'syncing' ? 'bg-riser' : '',
+        active ? 'bg-riser' : 'hover:border-wire-lit',
+      ].join(' ')}
+    >
+      <div className="flex items-start justify-between gap-2">
+        <span className="font-data text-[11px] leading-tight text-chalk">{app.name}</span>
+        <span
+          className={[
+            'mt-1 h-1.5 w-1.5 shrink-0 rounded-full transition-colors',
+            state === 'syncing' ? 'bg-lamp' : degraded ? 'bg-rose' : drifted ? 'bg-lamp' : 'bg-flux',
+          ].join(' ')}
+        />
+      </div>
+      <CountBar n={app.resources} />
+      {(degraded || drifted) && (
+        <p className={`mt-2 font-data text-[9px] uppercase tracking-[0.14em] ${degraded ? 'text-rose' : 'text-lamp'}`}>
+          {degraded ? 'degraded' : 'out of sync'}
+        </p>
+      )}
+    </button>
+  )
+}
+
+export default function DeliveryPage() {
+  const [selected, setSelected] = useState<string | null>('prometheus')
+  const [front, setFront] = useState<number | null>(null)
+
+  const replay = useCallback(() => setFront(0), [])
+
+  useEffect(() => {
+    if (front === null) return
+    if (front > 8) {
+      const done = setTimeout(() => setFront(null), 700)
+      return () => clearTimeout(done)
+    }
+    const next = setTimeout(() => setFront((w) => (w === null ? null : w + 1)), 520)
+    return () => clearTimeout(next)
+  }, [front])
+
+  const selectedApp = apps.find((a) => a.name === selected) ?? null
+  const kinds = selectedApp ? (resourceKinds[selectedApp.name] ?? DEFAULT_KINDS) : []
+
+  return (
+    <div className="space-y-6">
+      <header className="border border-wire bg-deck p-6 md:p-8">
+        <p className="font-data text-[10px] uppercase tracking-[0.2em] text-dim">Surface E — Delivery</p>
+        <h1 className="mt-3 max-w-3xl font-signage text-3xl font-semibold leading-[1.1] tracking-signage md:text-5xl">
+          Nothing starts until the thing it needs is already running.
+        </h1>
+        <p className="mt-5 max-w-2xl font-plex text-sm leading-relaxed text-dim">
+          {apps.length} applications, {TOTAL_RESOURCES} resources, applied in nine ordered waves. Certificates
+          before issuers, issuers before ingress, storage before the databases that sit on it. The order is the
+          design.
+        </p>
+        <button
+          onClick={replay}
+          disabled={front !== null}
+          className="mt-6 border border-lamp px-4 py-2 font-data text-[11px] uppercase tracking-[0.16em] text-lamp transition-colors hover:bg-lamp hover:text-void focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-lamp disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-lamp"
+        >
+          {front !== null ? `syncing wave ${Math.min(front, 8)}` : 'Replay sync'}
+        </button>
+      </header>
+
+      <div className="grid gap-6 xl:grid-cols-[1fr_340px]">
+        <Panel label="Sync waves" hint="0 → 8, left to right" className="min-w-0">
+          <div className="-mx-4 overflow-x-auto px-4 pb-2">
+            <div className="flex min-w-max gap-3">
+              {WAVES.map((wave) => {
+                const inWave = appsInWave(wave)
+                const state = front === null ? 'idle' : front === wave ? 'syncing' : front > wave ? 'done' : 'idle'
+
+                return (
+                  <div key={wave} className="w-[168px] shrink-0">
+                    <div
+                      className={[
+                        'mb-3 flex items-baseline justify-between border-b pb-1.5 transition-colors',
+                        state === 'syncing' ? 'border-lamp' : 'border-wire',
+                      ].join(' ')}
+                    >
+                      <span
+                        className={[
+                          'font-signage text-2xl font-semibold leading-none transition-colors',
+                          state === 'syncing' ? 'text-lamp' : inWave.length ? 'text-chalk' : 'text-wire-lit',
+                        ].join(' ')}
+                      >
+                        {wave}
+                      </span>
+                      <span className="font-data text-[9px] uppercase tracking-[0.14em] text-dim">
+                        {inWave.length || '—'}
+                      </span>
+                    </div>
+
+                    {inWave.length === 0 ? (
+                      <p className="border border-dashed border-wire p-2.5 font-data text-[10px] leading-relaxed text-dim">
+                        unused — waves are sparse by design, not sequential
+                      </p>
+                    ) : (
+                      <div className="space-y-2">
+                        {inWave.map((app) => (
+                          <AppCard
+                            key={app.name}
+                            app={app}
+                            state={state}
+                            active={selected === app.name}
+                            onSelect={() => setSelected(app.name)}
+                          />
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+        </Panel>
+
+        <Panel
+          label={selectedApp ? selectedApp.name : 'No selection'}
+          hint={selectedApp ? `wave ${selectedApp.wave ?? '—'} · ${selectedApp.resources} resources` : 'pick an app'}
+        >
+          {selectedApp ? (
+            <div className="space-y-4">
+              <dl className="grid grid-cols-2 gap-3 font-data text-[11px]">
+                <div>
+                  <dt className="text-dim">sync</dt>
+                  <dd className={selectedApp.sync === 'synced' ? 'text-flux' : 'text-lamp'}>{selectedApp.sync}</dd>
+                </div>
+                <div>
+                  <dt className="text-dim">health</dt>
+                  <dd className={selectedApp.health === 'healthy' ? 'text-flux' : 'text-rose'}>
+                    {selectedApp.health}
+                  </dd>
+                </div>
+              </dl>
+
+              <div>
+                <p className="mb-2 font-data text-[10px] uppercase tracking-[0.16em] text-dim">Resources by kind</p>
+                <ul className="space-y-1.5">
+                  {kinds.map((k) => (
+                    <li key={k.kind} className="flex items-center gap-3 font-data text-[11px]">
+                      <span className={k.named ? 'text-chalk' : 'text-dim'}>{k.kind}</span>
+                      <span className="h-px flex-1 bg-wire" />
+                      <span className="tabular-nums text-dim">{k.count}</span>
+                      {!k.named && (
+                        <span className="border border-wire-lit px-1 text-[9px] uppercase tracking-[0.1em] text-dim">
+                          count only
+                        </span>
+                      )}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+
+              <p className="border-t border-wire pt-3 font-plex text-[11px] leading-relaxed text-dim">
+                Secrets appear as counts. Names, source repositories, and condition messages are never sent to the
+                browser.
+              </p>
+            </div>
+          ) : (
+            <p className="font-plex text-sm text-dim">Select an application to inspect its resources.</p>
+          )}
+        </Panel>
+      </div>
+    </div>
+  )
+}

app/cluster/layout.tsx

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react'
+import { IBM_Plex_Mono, IBM_Plex_Sans, IBM_Plex_Sans_Condensed } from 'next/font/google'
+import { Rail } from '@/components/cluster/Rail'
+import { Ribbon } from '@/components/cluster/Ribbon'
+
+const signage = IBM_Plex_Sans_Condensed({
+  subsets: ['latin'],
+  weight: ['600', '700'],
+  variable: '--font-signage',
+})
+
+const plex = IBM_Plex_Sans({
+  subsets: ['latin'],
+  weight: ['400', '500', '600'],
+  variable: '--font-plex',
+})
+
+const data = IBM_Plex_Mono({
+  subsets: ['latin'],
+  weight: ['400', '500'],
+  variable: '--font-data',
+})
+
+export const metadata = {
+  title: 'Cluster — Rock Liang',
+  description: 'Live view of a Talos Kubernetes cluster: topology, GitOps delivery, and GPU inference.',
+}
+
+export default function ClusterLayout({ children }: { children: ReactNode }) {
+  return (
+    <div className={`${signage.variable} ${plex.variable} ${data.variable} min-h-screen bg-void font-plex text-chalk`}>
+      <Ribbon />
+      <div className="flex min-h-[calc(100vh-42px)] flex-col md:flex-row">
+        <Rail />
+        <main className="min-w-0 flex-1 p-4 md:p-6">{children}</main>
+      </div>
+    </div>
+  )
+}

app/cluster/page.tsx

@@ -0,0 +1,147 @@
+'use client'
+
+import { useState } from 'react'
+import { Panel } from '@/components/cluster/Panel'
+import { SlotMeter } from '@/components/cluster/SlotMeter'
+import { models, namespaces, nodes, type Node } from '@/lib/clusterMock'
+
+function Cells({ filled, total, tone = 'flux' }: { filled: number; total: number; tone?: 'flux' | 'rose' }) {
+  return (
+    <div className="flex gap-[2px]" aria-label={`${filled} of ${total} running`}>
+      {Array.from({ length: total }, (_, i) => (
+        <span
+          key={i}
+          className={`h-2.5 w-[5px] rounded-[1px] ${i < filled ? (tone === 'rose' ? 'bg-rose' : 'bg-flux') : 'bg-wire'}`}
+        />
+      ))}
+    </div>
+  )
+}
+
+function NodeCard({ node, active, onSelect }: { node: Node; active: boolean; onSelect: () => void }) {
+  const isGpu = node.gpu > 0
+  return (
+    <button
+      onClick={onSelect}
+      aria-pressed={active}
+      className={[
+        'group relative border p-4 text-left transition-colors',
+        'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-lamp',
+        active ? 'border-lamp bg-riser' : 'border-wire bg-deck hover:border-wire-lit',
+      ].join(' ')}
+    >
+      {isGpu && <span className="absolute right-0 top-0 h-6 w-px bg-lamp" />}
+      <div className="flex items-baseline justify-between">
+        <h3 className="font-signage text-xl font-semibold tracking-signage">{node.name}</h3>
+        <span className={`h-1.5 w-1.5 rounded-full ${node.health === 'healthy' ? 'bg-flux' : 'bg-rose'}`} />
+      </div>
+      <p className={`mt-1 font-data text-[10px] uppercase tracking-[0.14em] ${isGpu ? 'text-lamp' : 'text-dim'}`}>
+        {node.role}
+      </p>
+
+      <dl className="mt-4 space-y-1.5 font-data text-[11px]">
+        <div className="flex justify-between">
+          <dt className="text-dim">cpu</dt>
+          <dd className="tabular-nums">{node.cpu}</dd>
+        </div>
+        <div className="flex justify-between">
+          <dt className="text-dim">mem</dt>
+          <dd className="tabular-nums">{node.memoryGi} Gi</dd>
+        </div>
+        <div className="flex justify-between">
+          <dt className="text-dim">gpu</dt>
+          <dd className={`tabular-nums ${isGpu ? 'text-lamp' : 'text-dim'}`}>{node.gpu}</dd>
+        </div>
+        <div className="flex justify-between">
+          <dt className="text-dim">pods</dt>
+          <dd className="tabular-nums">{node.pods}</dd>
+        </div>
+      </dl>
+    </button>
+  )
+}
+
+export default function TopologyPage() {
+  const [selected, setSelected] = useState('worker-1')
+
+  return (
+    <div className="space-y-6">
+      {/* Thesis: the constraint that shaped everything downstream. */}
+      <header className="border border-wire bg-deck p-6 md:p-8">
+        <p className="font-data text-[10px] uppercase tracking-[0.2em] text-dim">Surface B — Topology</p>
+        <h1 className="mt-3 max-w-3xl font-signage text-3xl font-semibold leading-[1.1] tracking-signage md:text-5xl">
+          Four nodes. One GPU. <span className="text-lamp">Eight sequence slots</span> for everything that thinks.
+        </h1>
+        <div className="mt-6 flex flex-wrap items-center gap-4">
+          <SlotMeter used={3} size="lg" showCap />
+        </div>
+        <p className="mt-6 max-w-2xl font-plex text-sm leading-relaxed text-dim">
+          Every workload below runs on hardware sitting in one room. The scarcest thing in it is inference
+          capacity, so that is the number this page keeps in front of you.
+        </p>
+      </header>
+
+      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+        {nodes.map((n) => (
+          <NodeCard key={n.name} node={n} active={selected === n.name} onSelect={() => setSelected(n.name)} />
+        ))}
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-[1.4fr_1fr]">
+        <Panel label="Namespaces" hint="pods running / scheduled">
+          <ul className="space-y-1.5">
+            {namespaces.map((ns) => {
+              const short = ns.running < ns.total
+              return (
+                <li key={ns.name} className="flex items-center gap-4 py-0.5">
+                  <span className="w-40 shrink-0 truncate font-data text-[11px] text-chalk">{ns.name}</span>
+                  <Cells filled={ns.running} total={ns.total} tone={ns.running === 0 ? 'rose' : 'flux'} />
+                  <span
+                    className={`ml-auto shrink-0 font-data text-[11px] tabular-nums ${short ? 'text-lamp' : 'text-dim'}`}
+                  >
+                    {ns.running}/{ns.total}
+                  </span>
+                </li>
+              )
+            })}
+          </ul>
+        </Panel>
+
+        <div className="space-y-6">
+          <Panel label="Inference" hint="KServe · worker-1">
+            <ul className="space-y-3">
+              {models.map((m) => (
+                <li key={m.name} className="border-b border-wire pb-3 last:border-0 last:pb-0">
+                  <div className="flex items-baseline justify-between">
+                    <span className="font-signage text-base font-semibold tracking-signage">{m.name}</span>
+                    <span className={`font-data text-[10px] uppercase tracking-[0.14em] ${m.ready ? 'text-flux' : 'text-rose'}`}>
+                      {m.ready ? 'ready' : 'down'}
+                    </span>
+                  </div>
+                  <p className="mt-1 font-data text-[10px] text-dim">
+                    {m.replicas}× replica · {m.seqPerReplica} seq · {m.contextTokens.toLocaleString()} ctx
+                  </p>
+                </li>
+              ))}
+            </ul>
+          </Panel>
+
+          <Panel label="Withheld" hint="redaction allowlist">
+            <ul className="space-y-1.5 font-data text-[10px] text-dim">
+              {['node and pod addresses', 'container arguments', 'image tags and digests', 'source repository URLs', 'Secret names', 'condition messages'].map((x) => (
+                <li key={x} className="flex items-center gap-2">
+                  <span className="h-px w-3 bg-wire-lit" />
+                  {x}
+                </li>
+              ))}
+            </ul>
+            <p className="mt-4 font-plex text-[11px] leading-relaxed text-dim">
+              Fields are built by explicit construction, so anything not listed as public never enters the
+              response.
+            </p>
+          </Panel>
+        </div>
+      </div>
+    </div>
+  )
+}

app/cluster/terminal/page.tsx

@@ -0,0 +1,173 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { Panel } from '@/components/cluster/Panel'
+import { namespaces, nodes, apps } from '@/lib/clusterMock'
+
+const COMMANDS = [
+  'get nodes',
+  'get pods <ns>',
+  'get apps',
+  'top nodes',
+  'describe pod <ns> <name>',
+  'help',
+]
+
+type Line = { kind: 'input' | 'output' | 'reject'; text: string }
+
+const pad = (s: string, n: number) => s.padEnd(n, ' ')
+
+function run(raw: string): Line[] {
+  const cmd = raw.trim().toLowerCase()
+
+  if (cmd === 'help') {
+    return [{ kind: 'output', text: COMMANDS.map((c) => `  ${c}`).join('\n') }]
+  }
+
+  if (cmd === 'get nodes') {
+    const head = `${pad('NAME', 14)}${pad('ROLE', 16)}${pad('CPU', 6)}${pad('MEM', 8)}GPU`
+    const rows = nodes.map((n) => `${pad(n.name, 14)}${pad(n.role, 16)}${pad(String(n.cpu), 6)}${pad(`${n.memoryGi}Gi`, 8)}${n.gpu}`)
+    return [{ kind: 'output', text: [head, ...rows].join('\n') }]
+  }
+
+  if (cmd === 'get apps') {
+    const head = `${pad('NAME', 24)}${pad('WAVE', 7)}${pad('SYNC', 12)}HEALTH`
+    const rows = apps.map((a) => `${pad(a.name, 24)}${pad(String(a.wave ?? '-'), 7)}${pad(a.sync, 12)}${a.health}`)
+    return [{ kind: 'output', text: [head, ...rows].join('\n') }]
+  }
+
+  if (cmd === 'top nodes') {
+    const head = `${pad('NAME', 14)}${pad('CPU%', 8)}MEM%`
+    const rows = nodes.map((n) => `${pad(n.name, 14)}${pad(n.gpu ? '61%' : '18%', 8)}${n.gpu ? '74%' : '42%'}`)
+    return [{ kind: 'output', text: [head, ...rows].join('\n') }]
+  }
+
+  if (cmd.startsWith('get pods')) {
+    const ns = cmd.split(/\s+/)[2]
+    if (!ns) return [{ kind: 'reject', text: 'get pods requires a namespace. Try: get pods llm-serving' }]
+    const known = namespaces.find((n) => n.name === ns)
+    if (!known) {
+      return [
+        {
+          kind: 'reject',
+          text: `unknown namespace "${ns}" — rejected on snapshot membership, no lookup performed`,
+        },
+      ]
+    }
+    const rows = Array.from({ length: Math.min(known.total, 8) }, (_, i) => {
+      const running = i < known.running
+      return `${pad(`${ns}-workload-${i + 1}`, 30)}${pad(running ? '1/1' : '0/1', 6)}${running ? 'Running' : 'Pending'}`
+    })
+    return [{ kind: 'output', text: [`${pad('NAME', 30)}${pad('READY', 6)}STATUS`, ...rows].join('\n') }]
+  }
+
+  if (cmd.startsWith('describe pod')) {
+    return [{ kind: 'output', text: 'phase: Running\nrestarts: 0\nage: 17h\nnode: worker-1\nready: true' }]
+  }
+
+  return [
+    {
+      kind: 'reject',
+      text: `"${raw.trim()}" is not in the command set. Input parses to a closed enum; nothing else reaches the cluster. Type help.`,
+    },
+  ]
+}
+
+const BOOT: Line[] = [
+  { kind: 'output', text: 'atlas read-only shell. Six commands, no shell, no exec.\nType help to list them.' },
+]
+
+export default function TerminalPage() {
+  const [lines, setLines] = useState<Line[]>(BOOT)
+  const [value, setValue] = useState('')
+  const scrollRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight })
+  }, [lines])
+
+  const submit = (raw: string) => {
+    if (!raw.trim()) return
+    setLines((prev) => [...prev, { kind: 'input', text: raw }, ...run(raw)])
+    setValue('')
+  }
+
+  return (
+    <div className="space-y-6">
+      <header className="border border-wire bg-deck p-6 md:p-8">
+        <p className="font-data text-[10px] uppercase tracking-[0.2em] text-dim">Surface C — Terminal</p>
+        <h1 className="mt-3 max-w-3xl font-signage text-3xl font-semibold leading-[1.1] tracking-signage md:text-5xl">
+          Six commands. <span className="text-lamp">Everything else is rejected</span> before it reaches anything.
+        </h1>
+        <p className="mt-5 max-w-2xl font-plex text-sm leading-relaxed text-dim">
+          Input parses to a closed enum. Namespace and pod arguments are checked against the current snapshot by
+          membership, not by pattern matching. There is no shell in the container. Try to break it.
+        </p>
+      </header>
+
+      <div className="grid gap-6 lg:grid-cols-[1fr_260px]">
+        <Panel label="Shell" hint="read-only">
+          <div ref={scrollRef} className="h-[420px] overflow-y-auto font-data text-[12px] leading-relaxed">
+            {lines.map((line, i) => (
+              <div key={i} className="whitespace-pre-wrap">
+                {line.kind === 'input' && (
+                  <p className="mt-3 text-chalk">
+                    <span className="text-lamp">$ </span>
+                    {line.text}
+                  </p>
+                )}
+                {line.kind === 'output' && <p className="text-dim">{line.text}</p>}
+                {line.kind === 'reject' && (
+                  <p className="mt-1 border-l-2 border-rose pl-3 text-rose">{line.text}</p>
+                )}
+              </div>
+            ))}
+          </div>
+
+          <form
+            onSubmit={(e) => {
+              e.preventDefault()
+              submit(value)
+            }}
+            className="mt-3 flex items-center gap-2 border-t border-wire pt-3"
+          >
+            <span className="font-data text-[12px] text-lamp">$</span>
+            <input
+              value={value}
+              onChange={(e) => setValue(e.target.value)}
+              spellCheck={false}
+              autoComplete="off"
+              aria-label="Cluster command"
+              placeholder="get pods llm-serving"
+              className="min-w-0 flex-1 bg-transparent font-data text-[12px] text-chalk placeholder:text-dim/60 focus:outline-none"
+            />
+            <button
+              type="submit"
+              className="border border-wire-lit px-3 py-1 font-data text-[10px] uppercase tracking-[0.14em] text-dim transition-colors hover:border-lamp hover:text-lamp focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-lamp"
+            >
+              run
+            </button>
+          </form>
+        </Panel>
+
+        <Panel label="Command set" hint="allowlist">
+          <ul className="space-y-2">
+            {COMMANDS.map((c) => (
+              <li key={c}>
+                <button
+                  onClick={() => submit(c.replace('<ns>', 'llm-serving').replace('<name>', 'ornith-predictor'))}
+                  className="w-full border border-wire px-2.5 py-2 text-left font-data text-[11px] text-chalk transition-colors hover:border-lamp hover:text-lamp focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-lamp"
+                >
+                  {c}
+                </button>
+              </li>
+            ))}
+          </ul>
+          <p className="mt-4 border-t border-wire pt-3 font-plex text-[11px] leading-relaxed text-dim">
+            Every rejected input is logged with its source address. The allowlist is the whole security model.
+          </p>
+        </Panel>
+      </div>
+    </div>
+  )
+}

app/globals.css

@@ -0,0 +1,11 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}

app/layout.tsx

@@ -0,0 +1,22 @@
+import './globals.css'
+import Header from '@/components/Header'
+
+export const metadata = {
+  title: 'Rock Liang — Portfolio & Live Infrastructure',
+  description: 'Personal portfolio showcasing Kubernetes, Terraform, and cloud-native systems.',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className="bg-white dark:bg-gray-950 text-gray-900 dark:text-white">
+        <Header />
+        {children}
+      </body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,182 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { FeatureCard } from '@/components/FeatureCard'
+import { HeroBlobFlow } from '@/components/HeroBlobFlow'
+import { InteractiveTerminal } from '@/components/InteractiveTerminal'
+import { ExperienceTimeline } from '@/components/ExperienceTimeline'
+import {
+  GitBranch,
+  Database,
+  BarChart3,
+  MessageSquare,
+  Cpu,
+  Layers,
+} from 'lucide-react'
+
+const features = [
+  {
+    icon: GitBranch,
+    title: 'Infrastructure Platform',
+    description: 'Multi-region Terraform + Argo CD GitOps on Kubernetes',
+    href: '/infrastructure',
+    stat: '40% CPU reduction',
+    status: 'live' as const,
+  },
+  {
+    icon: Cpu,
+    title: 'Distributed Systems',
+    description: 'gRPC, Kafka, AWS Step Functions across 57+ regions',
+    href: '/systems',
+    stat: 'Mission-critical',
+    status: 'live' as const,
+  },
+  {
+    icon: MessageSquare,
+    title: 'LLM Systems',
+    description: 'CPU-bound inference optimization, INT4/INT8 quantization',
+    href: '/llm',
+    stat: '60% latency cut',
+    status: 'live' as const,
+  },
+  {
+    icon: Database,
+    title: 'Kafka Cluster',
+    description: 'Strimzi KRaft cluster with auto-scaling brokers',
+    href: '/kafka',
+    stat: '3 brokers',
+    status: 'live' as const,
+  },
+  {
+    icon: Layers,
+    title: 'Open Source',
+    description: 'go-flink: distributed DataLakeHouse in Go',
+    href: '/opensource',
+    stat: 'Public repo',
+    status: 'live' as const,
+  },
+  {
+    icon: BarChart3,
+    title: 'Observability',
+    description: 'Prometheus, Grafana, Dynatrace — live metrics',
+    href: '/infrastructure',
+    stat: '99.2% uptime',
+    status: 'live' as const,
+  },
+]
+
+export default function Home() {
+  return (
+    <main className="min-h-screen">
+      {/* Hero */}
+      <section className="bg-gradient-to-br from-blue-50 to-purple-50 dark:from-gray-950 dark:to-gray-900 py-24 px-6">
+        <div className="max-w-4xl mx-auto">
+          {/* Avatar with flowing outcomes */}
+          <HeroBlobFlow />
+
+          {/* Description */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 1 }}
+            className="text-center mt-16"
+          >
+            <h1 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-2">
+              Full-Stack Systems Engineer
+            </h1>
+            <p className="text-xl text-gray-700 dark:text-gray-300 mb-6 font-medium">
+              Infrastructure × Backend × LLM Systems
+            </p>
+            <p className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto mb-10">
+              Building observable, fault-tolerant systems from bare metal to cloud. Optimizing cost (infrastructure) × performance (inference) × reliability (SRE).
+            </p>
+
+            <div className="flex gap-4 justify-center flex-wrap mb-8">
+              <a
+                href="#features"
+                className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold transition"
+              >
+                Explore Systems
+              </a>
+              <a
+                href="https://github.com/rockliang"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="border-2 border-gray-300 dark:border-gray-700 text-gray-900 dark:text-white px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 dark:hover:bg-gray-800 transition"
+              >
+                GitHub
+              </a>
+            </div>
+
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ duration: 0.8, delay: 1.2 }}
+              className="text-sm text-gray-600 dark:text-gray-400"
+            >
+              💡 Press <kbd className="bg-gray-200 dark:bg-gray-800 px-2 py-1 rounded">Cmd+K</kbd> to explore via terminal
+            </motion.div>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Experience Timeline */}
+      <ExperienceTimeline />
+
+      {/* Features Grid */}
+      <section id="features" className="max-w-6xl mx-auto px-6 py-20">
+        <motion.div
+          initial={{ opacity: 0 }}
+          whileInView={{ opacity: 1 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.6 }}
+          className="mb-16"
+        >
+          <h2 className="text-4xl font-bold mb-4">What I Build</h2>
+          <p className="text-lg text-gray-600 dark:text-gray-400">
+            Production systems spanning infrastructure, distributed backends, and LLM optimization. Click any domain to explore.
+          </p>
+        </motion.div>
+
+        <motion.div
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true }}
+          variants={{
+            hidden: { opacity: 0 },
+            visible: {
+              opacity: 1,
+              transition: {
+                staggerChildren: 0.1,
+              },
+            },
+          }}
+          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
+        >
+          {features.map((feature) => (
+            <FeatureCard key={feature.title} {...feature} />
+          ))}
+        </motion.div>
+      </section>
+
+      {/* Footer */}
+      <footer className="border-t border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900 py-12 px-6">
+        <div className="max-w-6xl mx-auto text-center text-sm text-gray-600 dark:text-gray-400">
+          <p>© 2025 Rock Liang. Deployed on homelab Kubernetes cluster (3-node Talos).</p>
+          <p className="mt-2">
+            <a href="https://github.com" target="_blank" rel="noopener noreferrer" className="hover:text-blue-600 dark:hover:text-blue-400">
+              GitHub
+            </a>
+            {' • '}
+            <a href="mailto:[email protected]" className="hover:text-blue-600 dark:hover:text-blue-400">
+              Email
+            </a>
+          </p>
+        </div>
+      </footer>
+
+      {/* Interactive Terminal */}
+      <InteractiveTerminal />
+    </main>
+  )
+}

components/AnimatedRoles.tsx

@@ -0,0 +1,62 @@
+'use client'
+
+import { motion } from 'framer-motion'
+
+interface AnimatedRolesProps {
+  roles: string[]
+  className?: string
+}
+
+export function AnimatedRoles({ roles, className }: AnimatedRolesProps) {
+  const animations = [
+    {
+      initial: { opacity: 0, x: -20 },
+      animate: { opacity: 1, x: 0 },
+    },
+    {
+      initial: { opacity: 0, y: 20 },
+      animate: { opacity: 1, y: 0 },
+    },
+    {
+      initial: { opacity: 0, x: 20 },
+      animate: { opacity: 1, x: 0 },
+    },
+    {
+      initial: { opacity: 0, scale: 0.8 },
+      animate: { opacity: 1, scale: 1 },
+    },
+  ]
+
+  return (
+    <div className={className}>
+      {roles.map((role, index) => {
+        const animation = animations[index % animations.length]
+        return (
+          <motion.span
+            key={index}
+            initial={animation.initial}
+            animate={animation.animate}
+            transition={{
+              duration: 0.6,
+              delay: 0.2 + index * 0.15,
+              ease: 'easeOut',
+            }}
+            className="inline-block"
+          >
+            {role}
+            {index < roles.length - 1 && (
+              <motion.span
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ delay: 0.2 + index * 0.15 + 0.3 }}
+                className="mx-2"
+              >
+                •
+              </motion.span>
+            )}
+          </motion.span>
+        )
+      })}
+    </div>
+  )
+}

components/AvatarWithBlob.tsx

@@ -0,0 +1,87 @@
+'use client'
+
+import { motion } from 'framer-motion'
+
+interface AvatarWithBlobProps {
+  roles: string[]
+}
+
+export function AvatarWithBlob({ roles }: AvatarWithBlobProps) {
+  // Floating animation variants for each role blob
+  const getBlobVariants = (index: number) => ({
+    animate: {
+      y: [0, -20, 0],
+      x: [0, Math.cos((index * 2 * Math.PI) / roles.length) * 10, 0],
+      rotate: [0, 5, -5, 0],
+      transition: {
+        duration: 4 + index * 0.5,
+        repeat: Infinity,
+        ease: 'easeInOut',
+      },
+    },
+  })
+
+  return (
+    <div className="relative w-full max-w-md mx-auto aspect-square flex items-center justify-center">
+      {/* Animated background blobs */}
+      <div className="absolute inset-0">
+        {/* Center circle glow */}
+        <motion.div
+          animate={{
+            scale: [1, 1.1, 1],
+            opacity: [0.3, 0.5, 0.3],
+          }}
+          transition={{
+            duration: 4,
+            repeat: Infinity,
+          }}
+          className="absolute inset-0 bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 rounded-full blur-3xl"
+        />
+      </div>
+
+      {/* Avatar center */}
+      <motion.div
+        initial={{ scale: 0, opacity: 0 }}
+        animate={{ scale: 1, opacity: 1 }}
+        transition={{ duration: 0.8, delay: 0.2 }}
+        className="relative z-10 w-32 h-32 mx-auto"
+      >
+        <div className="w-full h-full rounded-full bg-gradient-to-br from-blue-600 to-purple-600 flex items-center justify-center text-white font-bold text-4xl border-4 border-white dark:border-gray-950 shadow-lg">
+          RL
+        </div>
+      </motion.div>
+
+      {/* Floating role blobs */}
+      {roles.map((role, index) => {
+        const angle = (index * 2 * Math.PI) / roles.length
+        const radius = 120
+        const x = Math.cos(angle) * radius
+        const y = Math.sin(angle) * radius
+
+        return (
+          <motion.div
+            key={role}
+            variants={getBlobVariants(index)}
+            animate="animate"
+            className="absolute z-20"
+            style={{
+              left: '50%',
+              top: '50%',
+              marginLeft: x,
+              marginTop: y,
+            }}
+          >
+            <motion.div
+              initial={{ scale: 0, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              transition={{ delay: 0.4 + index * 0.15 }}
+              className="px-4 py-2 rounded-full bg-white dark:bg-gray-900 border-2 border-blue-400 dark:border-blue-600 shadow-lg whitespace-nowrap text-sm font-semibold text-gray-900 dark:text-white"
+            >
+              {role}
+            </motion.div>
+          </motion.div>
+        )
+      })}
+    </div>
+  )
+}

components/ExperienceTimeline.tsx

@@ -0,0 +1,150 @@
+'use client'
+
+import { motion } from 'framer-motion'
+
+interface TimelineItem {
+  company: string
+  role: string
+  period: string
+  description: string
+  impact: string
+  skills: string[]
+  color: string
+}
+
+const timeline: TimelineItem[] = [
+  {
+    company: 'RBC',
+    role: 'Infrastructure Platform Architect',
+    period: '2020 — Present',
+    description: 'Leading multi-region infrastructure platform on Kubernetes. Building GitOps workflows with Terraform and Argo CD across 4 global regions.',
+    impact: '40% CPU reduction, 99.2% uptime',
+    skills: ['Kubernetes', 'Terraform', 'Argo CD', 'Go', 'AWS', 'Cilium', 'Prometheus', 'Grafana'],
+    color: 'from-blue-500 to-blue-600',
+  },
+  {
+    company: 'AWS',
+    role: 'Senior Software Engineer (Step Functions)',
+    period: '2019 — 2020',
+    description: 'Designed and optimized distributed orchestration platform. Built fault-tolerant task scheduling across 57+ regions serving mission-critical workloads.',
+    impact: '8 core components, 57+ regions',
+    skills: ['AWS', 'Java', 'gRPC', 'Distributed Systems', 'DynamoDB', 'CloudWatch'],
+    color: 'from-orange-500 to-orange-600',
+  },
+  {
+    company: 'Homelab',
+    role: 'DevOps / SRE / SDE',
+    period: '2021 — Present',
+    description: 'Production-grade bare-metal K8s cluster (Talos + Cilium). Built Temporal-based LLM inference pipeline with CPU-bound optimization and quantization.',
+    impact: '60% latency cut, 75% memory saved',
+    skills: ['LangGraph', 'Temporal', 'LLM Ops', 'PyTorch', 'Kafka', 'Observability'],
+    color: 'from-green-500 to-green-600',
+  },
+  {
+    company: 'Open Source',
+    role: 'Maintainer — go-flink',
+    period: '2022 — Present',
+    description: 'Building distributed DataLakeHouse framework in Go. Fault-tolerant task scheduling, streaming semantics, and efficient data processing.',
+    impact: 'Public repository, active development',
+    skills: ['Go', 'Distributed Systems', 'Data Pipeline', 'Testing', 'Architecture'],
+    color: 'from-purple-500 to-purple-600',
+  },
+]
+
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.2,
+    },
+  },
+}
+
+const itemVariants = {
+  hidden: { opacity: 0, x: -20 },
+  visible: {
+    opacity: 1,
+    x: 0,
+    transition: { duration: 0.6, ease: 'easeOut' },
+  },
+}
+
+export function ExperienceTimeline() {
+  return (
+    <section className="max-w-4xl mx-auto px-6 py-20">
+      <motion.div
+        initial={{ opacity: 0 }}
+        whileInView={{ opacity: 1 }}
+        viewport={{ once: true }}
+        transition={{ duration: 0.6 }}
+        className="mb-16"
+      >
+        <h2 className="text-4xl font-bold mb-4">Explore Experience</h2>
+        <p className="text-lg text-gray-600 dark:text-gray-400">
+          From AWS to RBC. Building systems at scale. Skills acquired along the journey.
+        </p>
+      </motion.div>
+
+      <motion.div
+        variants={containerVariants}
+        initial="hidden"
+        whileInView="visible"
+        viewport={{ once: true }}
+        className="relative"
+      >
+        {/* Timeline line */}
+        <div className="absolute left-0 md:left-1/2 top-0 bottom-0 w-1 bg-gradient-to-b from-blue-500 via-purple-500 to-green-500 md:transform md:-translate-x-1/2" />
+
+        {/* Timeline items */}
+        <div className="space-y-12">
+          {timeline.map((item, index) => (
+            <motion.div
+              key={item.company}
+              variants={itemVariants}
+              className="relative pl-8 md:pl-0"
+            >
+              {/* Timeline dot */}
+              <div className={`absolute left-0 md:left-1/2 top-2 w-4 h-4 rounded-full bg-gradient-to-br ${item.color} transform md:-translate-x-1/2 -translate-x-1.5 border-4 border-white dark:border-gray-950 shadow-lg`} />
+
+              {/* Content card */}
+              <div className={index % 2 === 0 ? 'md:w-1/2 md:pr-8' : 'md:w-1/2 md:ml-auto md:pl-8'}>
+                <div className="bg-white dark:bg-gray-900 rounded-lg p-6 border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-shadow">
+                  <div className="flex items-start justify-between mb-3">
+                    <div>
+                      <h3 className="text-xl font-bold text-gray-900 dark:text-white">
+                        {item.company}
+                      </h3>
+                      <p className="text-sm font-semibold text-blue-600 dark:text-blue-400">
+                        {item.role}
+                      </p>
+                    </div>
+                    <span className="text-xs font-mono text-gray-500 dark:text-gray-400 whitespace-nowrap ml-4">
+                      {item.period}
+                    </span>
+                  </div>
+
+                  <p className="text-sm text-gray-700 dark:text-gray-300 mb-3">
+                    {item.description}
+                  </p>
+
+                  <div className="bg-gradient-to-r from-blue-50 to-purple-50 dark:from-gray-800 dark:to-gray-800 rounded px-3 py-2 mb-4 text-sm font-semibold text-blue-600 dark:text-blue-400">
+                    📊 {item.impact}
+                  </div>
+
+                  <div className="flex flex-wrap gap-2">
+                    {item.skills.map((skill) => (
+                      <span key={skill} className="text-xs px-3 py-1 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300">
+                        {skill}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </motion.div>
+    </section>
+  )
+}

components/FeatureCard.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+import Link from 'next/link'
+import { motion } from 'framer-motion'
+import { LucideIcon } from 'lucide-react'
+import { LiveIndicator } from './LiveIndicator'
+
+interface FeatureCardProps {
+  icon: LucideIcon
+  title: string
+  description: string
+  href: string
+  stat?: string
+  status?: 'live' | 'offline' | 'pending'
+}
+
+export function FeatureCard({
+  icon: Icon,
+  title,
+  description,
+  href,
+  stat,
+  status = 'live',
+}: FeatureCardProps) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true }}
+      transition={{ duration: 0.5 }}
+    >
+      <Link href={href}>
+        <motion.div
+          whileHover={{ y: -8, boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1)' }}
+          className="h-full border border-gray-200 dark:border-gray-700 rounded-lg p-6 hover:shadow-lg transition-shadow cursor-pointer bg-white dark:bg-gray-900"
+        >
+          <div className="flex items-start justify-between mb-4">
+            <Icon className="w-8 h-8 text-blue-600 dark:text-blue-400" />
+            <LiveIndicator status={status} />
+          </div>
+          <h3 className="text-lg font-bold mb-2">{title}</h3>
+          <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+            {description}
+          </p>
+          {stat && (
+            <div className="text-xs font-mono text-blue-600 dark:text-blue-400">
+              {stat}
+            </div>
+          )}
+        </motion.div>
+      </Link>
+    </motion.div>
+  )
+}

components/Header.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import Link from 'next/link'
+import { Menu, X, Moon, Sun } from 'lucide-react'
+import { useState, useEffect } from 'react'
+
+export default function Header() {
+  const [open, setOpen] = useState(false)
+  const [dark, setDark] = useState(false)
+
+  useEffect(() => {
+    const isDark = document.documentElement.classList.contains('dark')
+    setDark(isDark)
+  }, [])
+
+  const toggleDark = () => {
+    document.documentElement.classList.toggle('dark')
+    setDark(!dark)
+  }
+
+  return (
+    <header className="sticky top-0 z-50 border-b border-gray-200 dark:border-gray-800 bg-white/95 dark:bg-gray-950/95 backdrop-blur">
+      <div className="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center">
+        <Link href="/" className="flex items-center gap-2">
+          <div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-600 to-purple-600 flex items-center justify-center text-white font-bold text-sm">
+            RL
+          </div>
+          <div>
+            <div className="text-sm font-bold text-gray-900 dark:text-white">Rock Liang</div>
+            <div className="text-xs text-gray-600 dark:text-gray-400">Software Engineer Lead</div>
+          </div>
+        </Link>
+
+        <nav className="hidden md:flex gap-8 items-center">
+          <Link href="/" className="text-sm hover:text-blue-600 dark:hover:text-blue-400">Home</Link>
+          <Link href="/cluster" className="text-sm hover:text-blue-600 dark:hover:text-blue-400">Cluster</Link>
+          <Link href="/infrastructure" className="text-sm hover:text-blue-600 dark:hover:text-blue-400">Infrastructure</Link>
+          <Link href="/kafka" className="text-sm hover:text-blue-600 dark:hover:text-blue-400">Kafka</Link>
+          <Link href="/cicd" className="text-sm hover:text-blue-600 dark:hover:text-blue-400">CI/CD</Link>
+          <Link href="/agent" className="text-sm hover:text-blue-600 dark:hover:text-blue-400">Agent</Link>
+          <button onClick={toggleDark} className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded">
+            {dark ? <Sun size={20} /> : <Moon size={20} />}
+          </button>
+        </nav>
+
+        <button
+          onClick={() => setOpen(!open)}
+          className="md:hidden p-2"
+        >
+          {open ? <X size={24} /> : <Menu size={24} />}
+        </button>
+      </div>
+
+      {open && (
+        <div className="md:hidden border-t border-gray-200 dark:border-gray-800 p-4 space-y-2">
+          <Link href="/" className="block py-2 text-sm hover:text-blue-600">Home</Link>
+          <Link href="/infrastructure" className="block py-2 text-sm hover:text-blue-600">Infrastructure</Link>
+          <Link href="/kafka" className="block py-2 text-sm hover:text-blue-600">Kafka</Link>
+          <Link href="/cicd" className="block py-2 text-sm hover:text-blue-600">CI/CD</Link>
+          <Link href="/agent" className="block py-2 text-sm hover:text-blue-600">Agent</Link>
+        </div>
+      )}
+    </header>
+  )
+}

components/HeroBlobFlow.tsx

@@ -0,0 +1,80 @@
+'use client'
+
+import { motion, AnimatePresence } from 'framer-motion'
+import { useState, useEffect } from 'react'
+import { Code, Network, Zap, Sparkles, Github } from 'lucide-react'
+import { TypewriterText } from './TypewriterText'
+
+const roles = [
+  { text: 'Software Engineer Lead', icon: Code },
+  { text: 'Infrastructure Architect', icon: Network },
+  { text: 'Distributed Systems Builder', icon: Zap },
+  { text: 'LLM Systems Optimizer', icon: Sparkles },
+  { text: 'Open Source Developer', icon: Github },
+]
+
+export function HeroBlobFlow() {
+  const [index, setIndex] = useState(0)
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setIndex((prev) => (prev + 1) % roles.length)
+    }, 2000)
+    return () => clearInterval(interval)
+  }, [])
+
+  return (
+    <div className="relative w-full max-w-md mx-auto aspect-square flex flex-col items-center justify-center">
+      {/* Background glow */}
+      <div className="absolute inset-0">
+        <motion.div
+          animate={{
+            scale: [1, 1.15, 1],
+            opacity: [0.25, 0.4, 0.25],
+          }}
+          transition={{
+            duration: 6,
+            repeat: Infinity,
+            ease: 'easeInOut',
+          }}
+          className="absolute inset-0 bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 rounded-full blur-3xl"
+        />
+      </div>
+
+      {/* Avatar center */}
+      <motion.div
+        initial={{ scale: 0, opacity: 0 }}
+        animate={{ scale: 1, opacity: 1 }}
+        transition={{ duration: 0.8, delay: 0.2 }}
+        className="relative z-10 w-32 h-32"
+      >
+        <div className="w-full h-full rounded-full bg-gradient-to-br from-blue-600 to-purple-600 flex items-center justify-center text-white font-bold text-4xl border-4 border-white dark:border-gray-950 shadow-xl">
+          RL
+        </div>
+      </motion.div>
+
+      {/* Typewriter text below avatar */}
+      <TypewriterText />
+
+      {/* Rotating role text */}
+      <div className="relative z-10 mt-12 px-6 w-full flex items-center justify-center">
+        <AnimatePresence mode="wait">
+          <motion.div
+            key={index}
+            initial={{ opacity: 0, y: 20, scale: 0.95 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, y: -20, scale: 0.95 }}
+            transition={{ duration: 0.6, ease: 'easeInOut' }}
+            className="absolute text-2xl font-semibold text-gray-900 dark:text-white text-center px-6 flex items-center gap-3 justify-center"
+          >
+            {(() => {
+              const Icon = roles[index].icon
+              return <Icon size={28} className="text-blue-600 dark:text-blue-400 flex-shrink-0" />
+            })()}
+            {roles[index].text}
+          </motion.div>
+        </AnimatePresence>
+      </div>
+    </div>
+  )
+}

components/InteractiveTerminal.tsx

@@ -0,0 +1,148 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { useEffect, useRef, useState } from 'react'
+
+const commands: Record<string, string> = {
+  help: `Available commands:
+  ls              - List services
+  kubectl         - Cluster info
+  terraform       - Infrastructure
+  argocd          - Deployments
+  kafka           - Message broker
+  about           - About me
+  clear           - Clear terminal`,
+  ls: `storage/
+monitoring/
+cicd/
+sqs/
+temporal/
+iam/`,
+  kubectl: `Nodes: 3 (talos-cp-1, talos-worker-1, talos-worker-2)
+Pods: 42 running
+Uptime: 99.2%
+Cluster Version: v1.36.1`,
+  terraform: `Modules: 18 deployed
+Services: Kafka, PostgreSQL, MinIO, Grafana
+Storage: Longhorn (3-replica)
+Network: Cilium eBPF CNI`,
+  argocd: `Applications: 12
+Synced: 11/12
+Last Sync: 2 min ago
+Health: Healthy`,
+  kafka: `Brokers: 3 (KRaft)
+Replication Factor: 3
+Min ISR: 2
+Topics: 5 active
+Throughput: ~1K msgs/sec`,
+  about: `Rock Liang - Senior Full-Stack Systems Engineer
+Experience: 5+ years (AWS, RBC, Homelab)
+Focus: Infrastructure × Backend × LLM Systems
+Tech: Go, Java, Python, C++ | Kubernetes, Terraform, gRPC
+Current: Building production homelab + LLM inference optimization
+Open Source: go-flink (distributed DataLakeHouse)`,
+}
+
+export function InteractiveTerminal() {
+  const [input, setInput] = useState('')
+  const [history, setHistory] = useState<{ cmd: string; output: string }[]>([])
+  const [isOpen, setIsOpen] = useState(false)
+  const terminalRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault()
+        setIsOpen(!isOpen)
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [isOpen])
+
+  const handleCommand = (cmd: string) => {
+    const trimmed = cmd.trim().toLowerCase()
+    if (trimmed === 'clear') {
+      setHistory([])
+      setInput('')
+      return
+    }
+
+    const output = commands[trimmed] || `command not found: ${cmd}`
+    setHistory([...history, { cmd, output }])
+    setInput('')
+
+    setTimeout(() => {
+      terminalRef.current?.scrollTo(0, terminalRef.current.scrollHeight)
+    }, 0)
+  }
+
+  return (
+    <motion.div
+      className="fixed bottom-6 right-6 z-40"
+      initial={{ opacity: 0, scale: 0.9 }}
+      animate={{ opacity: 1, scale: 1 }}
+    >
+      {!isOpen ? (
+        <button
+          onClick={() => setIsOpen(true)}
+          className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-mono text-sm shadow-lg"
+        >
+          Terminal (Cmd+K)
+        </button>
+      ) : (
+        <motion.div
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="bg-gray-950 border border-gray-700 rounded-lg shadow-2xl w-96 h-96 flex flex-col"
+        >
+          <div className="bg-gray-900 border-b border-gray-700 px-4 py-3 flex justify-between items-center">
+            <span className="text-gray-300 font-mono text-xs">ZSH_THEME="robbyrussell"</span>
+            <button
+              onClick={() => setIsOpen(false)}
+              className="text-gray-400 hover:text-white"
+            >
+              ✕
+            </button>
+          </div>
+
+          <div
+            ref={terminalRef}
+            className="flex-1 overflow-y-auto px-4 py-3 font-mono text-sm text-gray-200 space-y-2"
+          >
+            {history.length === 0 && (
+              <div className="text-gray-500">type 'help' for commands</div>
+            )}
+            {history.map((entry, i) => (
+              <div key={i}>
+                <div className="text-green-400"><span className="text-red-400">➜</span> % {entry.cmd}</div>
+                <div className="text-gray-300 whitespace-pre-wrap text-xs mt-1">
+                  {entry.output}
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <div className="border-t border-gray-700 px-4 py-2">
+            <div className="flex items-center">
+              <span className="text-red-400 font-mono text-sm">➜</span>
+              <span className="text-green-400 font-mono text-sm ml-2">% </span>
+              <input
+                type="text"
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+                onKeyPress={(e) => {
+                  if (e.key === 'Enter') handleCommand(input)
+                }}
+                placeholder=""
+                className="flex-1 bg-transparent text-green-400 font-mono text-sm outline-none ml-1"
+                autoFocus
+              />
+            </div>
+          </div>
+        </motion.div>
+      )}
+    </motion.div>
+  )
+}

components/LiveIndicator.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+import { motion } from 'framer-motion'
+
+interface LiveIndicatorProps {
+  status: 'live' | 'offline' | 'pending'
+  label?: string
+}
+
+export function LiveIndicator({ status, label }: LiveIndicatorProps) {
+  const colors = {
+    live: 'bg-green-500',
+    offline: 'bg-red-500',
+    pending: 'bg-yellow-500',
+  }
+
+  const labels = {
+    live: 'Live',
+    offline: 'Offline',
+    pending: 'Pending',
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+      <motion.div
+        animate={status === 'live' ? { scale: [1, 1.3, 1] } : {}}
+        transition={{ duration: 2, repeat: Infinity }}
+        className={`w-2 h-2 rounded-full ${colors[status]}`}
+      />
+      <span className="text-xs font-semibold text-gray-600 dark:text-gray-400">
+        {label || labels[status]}
+      </span>
+    </div>
+  )
+}

components/ProgressiveText.tsx

@@ -0,0 +1,43 @@
+'use client'
+
+import { motion } from 'framer-motion'
+
+interface ProgressiveTextProps {
+  texts: string[]
+  className?: string
+}
+
+export function ProgressiveText({ texts, className }: ProgressiveTextProps) {
+  const container = {
+    hidden: { opacity: 0 },
+    visible: (i = 1) => ({
+      opacity: 1,
+      transition: { staggerChildren: 0.12, delayChildren: 0.04 * i },
+    }),
+  }
+
+  const child = {
+    hidden: { opacity: 0, y: 10 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: 0.5 },
+    },
+  }
+
+  return (
+    <motion.div
+      className={className}
+      variants={container}
+      initial="hidden"
+      animate="visible"
+    >
+      {texts.map((text, i) => (
+        <motion.div key={i} variants={child} className="inline">
+          {text}
+          {i < texts.length - 1 && ' '}
+        </motion.div>
+      ))}
+    </motion.div>
+  )
+}

components/TypewriterText.tsx

@@ -0,0 +1,55 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { useState, useEffect } from 'react'
+
+const phrases = [
+  'a Senior Systems engineer',
+  'Rock Liang',
+  'a Senior Full-stack builder',
+  'a Senior Infrastructure architect',
+  'a Senior Backend SDE',
+]
+
+export function TypewriterText() {
+  const [currentPhrase, setCurrentPhrase] = useState(0)
+  const [displayText, setDisplayText] = useState('')
+  const [isDeleting, setIsDeleting] = useState(false)
+
+  useEffect(() => {
+    const phrase = phrases[currentPhrase]
+    const delay = isDeleting ? 50 : 100
+
+    const timer = setTimeout(() => {
+      if (!isDeleting) {
+        if (displayText.length < phrase.length) {
+          setDisplayText(phrase.substring(0, displayText.length + 1))
+        } else {
+          setTimeout(() => setIsDeleting(true), 1500)
+        }
+      } else {
+        if (displayText.length > 0) {
+          setDisplayText(phrase.substring(0, displayText.length - 1))
+        } else {
+          setIsDeleting(false)
+          setCurrentPhrase((prev) => (prev + 1) % phrases.length)
+        }
+      }
+    }, delay)
+
+    return () => clearTimeout(timer)
+  }, [displayText, isDeleting, currentPhrase])
+
+  return (
+    <div className="relative z-10 mt-6 h-10 flex items-center justify-center">
+      <span className="text-2xl font-semibold text-gray-800 dark:text-gray-200">
+        I'm <span className="text-blue-600 dark:text-blue-400">{displayText}</span>
+        <motion.span
+          animate={{ opacity: [1, 0] }}
+          transition={{ duration: 0.6, repeat: Infinity }}
+          className="inline-block w-0.5 h-7 ml-1 bg-blue-600 dark:bg-blue-400"
+        />
+      </span>
+    </div>
+  )
+}

components/cluster/Panel.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react'
+
+type Props = {
+  label: string
+  hint?: string
+  right?: ReactNode
+  children: ReactNode
+  className?: string
+}
+
+/** Instrument panel chrome: hairline frame, corner ticks, eyebrow label. */
+export function Panel({ label, hint, right, children, className = '' }: Props) {
+  return (
+    <section className={`relative border border-wire bg-deck ${className}`}>
+      <span className="pointer-events-none absolute -left-px -top-px h-2 w-2 border-l border-t border-wire-lit" />
+      <span className="pointer-events-none absolute -right-px -top-px h-2 w-2 border-r border-t border-wire-lit" />
+      <span className="pointer-events-none absolute -bottom-px -left-px h-2 w-2 border-b border-l border-wire-lit" />
+      <span className="pointer-events-none absolute -bottom-px -right-px h-2 w-2 border-b border-r border-wire-lit" />
+
+      <header className="flex items-baseline justify-between gap-4 border-b border-wire px-4 py-2.5">
+        <div className="flex items-baseline gap-3">
+          <h2 className="font-data text-[11px] uppercase tracking-[0.18em] text-chalk">{label}</h2>
+          {hint && <p className="font-data text-[10px] text-dim">{hint}</p>}
+        </div>
+        {right}
+      </header>
+
+      <div className="p-4">{children}</div>
+    </section>
+  )
+}

components/cluster/Rail.tsx

@@ -0,0 +1,43 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+
+const SURFACES = [
+  { code: 'B', href: '/cluster', label: 'Topology' },
+  { code: 'E', href: '/cluster/delivery', label: 'Delivery' },
+  { code: 'C', href: '/cluster/terminal', label: 'Terminal' },
+  { code: 'D', href: '/cluster/chat', label: 'Chat' },
+]
+
+export function Rail() {
+  const pathname = usePathname()
+
+  return (
+    <nav
+      aria-label="Cluster surfaces"
+      className="flex shrink-0 gap-px overflow-x-auto border-b border-wire bg-void md:w-16 md:flex-col md:overflow-visible md:border-b-0 md:border-r"
+    >
+      {SURFACES.map((s) => {
+        const active = pathname === s.href
+        return (
+          <Link
+            key={s.href}
+            href={s.href}
+            aria-current={active ? 'page' : undefined}
+            className={[
+              'group flex flex-1 flex-row items-center gap-2 px-4 py-3 transition-colors md:flex-none md:flex-col md:gap-1 md:px-0 md:py-4',
+              'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-lamp',
+              active ? 'bg-deck text-lamp' : 'text-dim hover:bg-riser hover:text-chalk',
+            ].join(' ')}
+          >
+            <span className="font-signage text-lg font-semibold leading-none">{s.code}</span>
+            <span className="font-data text-[9px] uppercase tracking-[0.14em] md:[writing-mode:vertical-rl]">
+              {s.label}
+            </span>
+          </Link>
+        )
+      })}
+    </nav>
+  )
+}

components/cluster/Ribbon.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { cluster, nodes } from '@/lib/clusterMock'
+import { SlotMeter } from './SlotMeter'
+
+/** Fake liveness so the layout can be judged in motion. Replaced by SSE in Phase 2. */
+function useDrift() {
+  const [age, setAge] = useState<number>(cluster.snapshotAge)
+  const [slots, setSlots] = useState(3)
+
+  useEffect(() => {
+    const tick = setInterval(() => setAge((a) => (a > 6 ? 0.4 : +(a + 0.9).toFixed(1))), 900)
+    const churn = setInterval(() => setSlots(() => 1 + Math.floor(Math.random() * 5)), 3400)
+    return () => {
+      clearInterval(tick)
+      clearInterval(churn)
+    }
+  }, [])
+
+  return { age, slots }
+}
+
+export function Ribbon() {
+  const { age, slots } = useDrift()
+
+  return (
+    <div className="flex flex-wrap items-center gap-x-6 gap-y-2 border-b border-wire bg-void px-4 py-2.5 font-data text-[11px]">
+      <span className="flex items-center gap-2 text-chalk">
+        <span className="h-1.5 w-1.5 rounded-full bg-flux" />
+        {cluster.distro}
+      </span>
+      <span className="text-dim">
+        k8s <span className="text-chalk">{cluster.kubernetes}</span>
+      </span>
+      <span className="text-dim">
+        nodes <span className="text-chalk">{nodes.length}</span>
+      </span>
+      <span className="text-dim">
+        snapshot <span className="text-chalk">{age.toFixed(1)}s</span>
+      </span>
+
+      <span className="ml-auto flex items-center gap-3">
+        <span className="uppercase tracking-[0.16em] text-dim">seq</span>
+        <SlotMeter used={slots} />
+        <span className="tabular-nums text-chalk">{slots}/8</span>
+      </span>
+
+      <span className="border border-lamp/40 px-1.5 py-0.5 uppercase tracking-[0.16em] text-lamp">
+        placeholder data
+      </span>
+    </div>
+  )
+}

components/cluster/SlotMeter.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import { SEQUENCE_SLOTS, PUBLIC_SLOT_CAP } from '@/lib/clusterMock'
+
+type Props = {
+  used: number
+  size?: 'sm' | 'lg'
+  showCap?: boolean
+}
+
+/**
+ * The signature element. Eight discrete cells, one per vLLM sequence slot.
+ * Cells past PUBLIC_SLOT_CAP are operator headroom and read as reserved.
+ */
+export function SlotMeter({ used, size = 'sm', showCap = false }: Props) {
+  const cell = size === 'lg' ? 'h-6 w-3' : 'h-3 w-[7px]'
+
+  return (
+    <div className="flex items-center gap-2">
+      <div className="flex gap-[3px]" role="img" aria-label={`${used} of ${SEQUENCE_SLOTS} sequence slots in use`}>
+        {Array.from({ length: SEQUENCE_SLOTS }, (_, i) => {
+          const reserved = i >= PUBLIC_SLOT_CAP
+          const active = i < used
+          return (
+            <span
+              key={i}
+              className={[
+                cell,
+                'rounded-[1px] transition-colors duration-500',
+                active ? 'bg-lamp' : reserved ? 'bg-wire' : 'bg-wire-lit/40',
+                reserved && !active ? 'opacity-50' : '',
+              ].join(' ')}
+            />
+          )
+        })}
+      </div>
+      {showCap && (
+        <span className="font-data text-[10px] uppercase tracking-widest text-dim">
+          {used}/{PUBLIC_SLOT_CAP} public · {SEQUENCE_SLOTS} total
+        </span>
+      )}
+    </div>
+  )
+}

docs/PLAN-atlas.md

@@ -0,0 +1,327 @@
+# Implementation Plan: `atlas` — Interactive Cluster Visualization
+
+**Status**: For review — no code written yet
+**Companion ADR**: [ADR-0001](adr/ADR-0001-atlas-cluster-visualization.md)
+**Supersedes**: `PLAN.md`, `IMPLEMENTATION.md` (Homarr + Terraform — abandoned)
+
+---
+
+## 1. Scope
+
+### In scope
+
+| ID | Surface | Description |
+|---|---|---|
+| B | Cluster topology | Live node → namespace → workload graph, health-colored, drill-down |
+| E | Delivery tree | Argo CD app-of-apps as a sync-wave-ordered DAG, live sync animation |
+| C | Terminal | Read-only, enum-dispatched cluster queries in the browser |
+| D | Chat | Streaming ChatGPT-style session against the `reasoning` model |
+
+### Out of scope (v1)
+
+- Any write operation against the cluster
+- LLM tool-calling / agentic loops against live infrastructure
+- Forgejo CI half of the pipeline view (`forgejo-gitea` is currently stuck `Init:0/3`)
+- Log streaming to the browser (Loki content is unredactable in practice)
+- Authenticated / operator-only views — Grafana already serves that need
+
+### Non-goals
+
+- Replacing Grafana
+- Multi-cluster support
+- Historical / time-travel views
+
+---
+
+## 2. Phase 0 — Unblock (blocking; nothing ships until done)
+
+Verified problems, in the order they must be fixed:
+
+| # | Problem | Evidence |
+|---|---|---|
+| 0.1 | `portfolio` namespace is empty; `portfolio` and `auth-infra` Applications do not exist in the cluster | `kubectl get pods -n portfolio` → no resources; neither name appears in `kubectl get app -n argocd` |
+| 0.2 | `infra/argocd-apps.yaml` `repoURL` = `forgejo.riotpiao.homelab.com` — NXDOMAIN | `dig` |
+| 0.3 | Deployment image `forgejo.riotpiao.homelab.com/rock/portfolio:latest` — dead host, and `:latest` + `imagePullPolicy: IfNotPresent` means a pushed image will never roll out | `infra/portfolio/base/deployment.yaml` |
+| 0.4 | `forgejo-gitea` stuck `Init:0/3` for 3h — no image builds possible | `kubectl get pods -n cicd` |
+| 0.5 | `riotpiao.com` returns HTTP 403 from the Cloudflare edge; no origin headers present | `curl -I https://riotpiao.com` |
+| 0.6 | No test framework installed — TDD is impossible as the repo stands | `package.json` has no test script or runner |
+| 0.7 | `sms` Application Degraded (`macos-bluebubbles` Pending 3h); `longhorn-config` OutOfSync | `kubectl get app -n argocd` |
+
+**Decisions required from you before 0.1–0.3 can be actioned** — see ADR open questions 1 and 2.
+
+**Actions**
+
+1. Resolve which GitOps repo owns the portfolio; delete or correct the losing manifest
+2. Point `repoURL` and the image reference at real hostnames
+3. Replace `:latest` with a commit-SHA tag; set `imagePullPolicy: IfNotPresent` (correct once tags are immutable)
+4. Diagnose `forgejo-gitea` init containers — read the actual init container logs before changing anything
+5. Diagnose the apex 403 — check the tunnel's Public Hostnames list and Cloudflare WAF events; the event log names the blocking rule
+6. Add Vitest + Testing Library + `msw`; add `test` and `test:watch` scripts
+7. Triage 0.7 separately — unrelated to this work, but the delivery tree will render both as red on day one
+
+**Verify**
+
+```bash
+kubectl get pods -n portfolio                     # 2/2 Running
+curl -sS -o /dev/null -w '%{http_code}\n' https://riotpiao.com   # 200
+pnpm test                                          # runner executes, 0 tests, exit 0
+```
+
+---
+
+## 3. Architecture
+
+```
+kube API (client-go informers)  ─┐
+Prometheus /api/v1/query         ├──> atlas (Go, ns: portfolio, RO ServiceAccount)
+Argo CD Application CRs          ┘         │
+                                           ├─ snapshot (in-memory, redacted at write)
+                                           ├─ Redis pub/sub (kmsvc-redis-master.sqs:6379)
+                                           └─ HTTP
+                                               GET  /api/topology
+                                               GET  /api/delivery
+                                               GET  /api/stream      (SSE)
+                                               POST /api/exec
+                                               POST /api/chat        (SSE)
+                                                      └──> reasoning-predictor.llm-serving:80
+```
+
+Event-driven, per project architectural preference: informers push to a reducer, the reducer publishes deltas to Redis, SSE handlers subscribe. No request-triggered upstream calls anywhere in the read path.
+
+Snapshot is redacted **at write time**, not at serialization time. A field that never enters the snapshot cannot leak from any surface.
+
+### Language
+
+Go, for `client-go` informers and because it matches the rest of the platform. Follow the repo's Go skill set (`go-naming`, `go-concurrency`, `go-error-handling`, `go-context`) — notably: every upstream call carries a context, no naked returns, no `_ =` on errors.
+
+---
+
+## 4. API contract
+
+Envelope for all non-stream responses:
+
+```json
+{ "data": { }, "meta": { "snapshotAge": 3.2, "generation": 88412 } }
+```
+
+Errors follow RFC 9457 (`application/problem+json`):
+
+```json
+{ "type": "https://riotpiao.com/errors/rate-limited",
+  "title": "Rate limit exceeded",
+  "status": 429, "detail": "12 of 12 messages used", "retryAfter": 3600 }
+```
+
+| Method | Path | Auth | Limit | Response |
+|---|---|---|---|---|
+| GET | `/api/topology` | none | 60/min/IP | Nodes, namespaces, workload summaries |
+| GET | `/api/delivery` | none | 60/min/IP | Argo apps, wave-grouped; resource children lazy |
+| GET | `/api/delivery/{app}/resources` | none | 60/min/IP | Virtualized child list for one app |
+| GET | `/api/stream` | session cookie | 2 concurrent/IP | SSE deltas, `topology` + `delivery` event types |
+| POST | `/api/exec` | session cookie | 20/min/session | Enum command result |
+| POST | `/api/chat` | session + Turnstile | 12/day/session, 6 global concurrent | SSE token stream |
+
+**Pagination**: `/api/delivery/{app}/resources` is cursor-paginated at 100 items. `prometheus` has 68 resources today, but `homelab-root`'s tree will grow.
+
+**Payload budget**: topology response capped at 256 KB, delivery at 256 KB. Exceeding the cap truncates and sets `meta.truncated: true` — never a silent drop.
+
+---
+
+## 5. Security
+
+Mapped against OWASP Top 10 (2021). Every item is a Phase gate, not a wish list.
+
+### A01 Broken Access Control
+
+- `atlas` ServiceAccount: one ClusterRole, verbs `get,list,watch` only, explicit resource list. **No `secrets`. No `*`. No wildcards on apiGroups.**
+- NetworkPolicy on `atlas`: egress restricted to kube API, `prometheus-operated.monitoring`, `reasoning-predictor.llm-serving`, `kmsvc-redis-master.sqs`. Ingress from `ingress-nginx` only.
+- Test: an integration test asserting the SA receives 403 on `get secrets` in every namespace.
+
+### A02 Cryptographic Failures
+
+- Session cookie: signed (HMAC), `HttpOnly`, `Secure`, `SameSite=Lax`, 24h expiry. No PII in the payload — a random session ID only.
+- Signing key from a Kubernetes Secret via SOPS (`sops-secrets` app already exists), never an env literal in a manifest.
+
+### A03 Injection
+
+The primary risk on surface C. Mitigation is structural, not filtering:
+
+- Input parses to a closed command enum. Anything unmatched is rejected before any lookup.
+- Namespace and resource-name arguments are validated by **set membership against the current snapshot**, not by regex or escaping.
+- No shell, no `exec`, no `kubectl` binary present in the container image.
+- Test: fuzz the parser; assert every input outside the allowlist returns a rejection and performs zero upstream calls.
+
+### A04 Insecure Design — information disclosure
+
+The core risk of the whole project. Redaction allowlist, enforced by DTO construction:
+
+**Emitted**: name, namespace, kind, phase, ready counts, restart count, age, node name, health status, sync status, sync wave, an explicit label subset.
+
+**Never emitted**: container env, container args, image digests, image tags, `spec.source.repoURL`, full `spec.source.path`, annotations, pod IPs, cluster IPs, Secret names, `status.conditions[].message`, node internal IPs.
+
+Specific known leaks in current data:
+- `reasoning` container args disclose the entire model and quantization strategy
+- `spec.source.repoURL` discloses a private GitHub repository
+- 21 `Secret` resources appear in Argo trees — render **kind and count only, never names**; `sops-secrets` included
+- `status.conditions[].message` echoes raw errors containing internal hostnames — emit condition **type** only
+
+Test: golden test asserting the serialized snapshot contains none of the denied field names, run against a fixture captured from the real cluster.
+
+### A05 Security Misconfiguration
+
+- Container: `runAsNonRoot`, read-only root filesystem, all capabilities dropped, `seccompProfile: RuntimeDefault`
+- Security headers on all responses: `Content-Security-Policy` (no `unsafe-inline`), `X-Content-Type-Options: nosniff`, `Referrer-Policy: no-referrer`, `Strict-Transport-Security`
+- CORS: same-origin only. No wildcard.
+
+### A07 Authentication Failures
+
+- Anonymous by design; Cloudflare Turnstile gates the first chat message
+- Session rotation on issue; no session fixation vector since there is no login
+
+### A08 Software and Data Integrity
+
+- Image tags are commit SHAs, never `:latest` (fixes Phase 0.3)
+- `pnpm audit` and `govulncheck` in CI, failing the build on high severity
+
+### A09 Logging and Monitoring
+
+- Structured logs: every rejected `/api/exec` input, every rate-limit trip, every chat queue rejection
+- Prometheus metrics from `atlas`: `atlas_chat_concurrent`, `atlas_chat_queue_depth`, `atlas_ratelimit_rejections_total`, `atlas_snapshot_age_seconds`
+- Alertmanager rule: chat queue saturated > 5 min, snapshot age > 60s
+
+### A10 SSRF
+
+- `atlas` calls a fixed, compile-time list of upstream URLs. No user input reaches any URL construction, on any path.
+
+### LLM-specific: prompt injection
+
+- System prompt is a compile-time constant, unreachable by user input
+- Cluster snapshot digest is injected in a delimited block explicitly labelled untrusted data
+- User message is always last
+- **No tool-calling.** The model reads a pre-built digest and cannot query anything. This removes the entire agentic attack surface for v1.
+- Output capped at `max_tokens: 1500` — DeepSeek-R1 will otherwise reason for minutes
+
+---
+
+## 6. Rate limiting
+
+Sized against the verified hard ceiling: **8 concurrent sequences** (`--max-num-seqs=4` × 2 replicas), single GPU node.
+
+**Tier 1 — Cloudflare edge.** WAF, Bot Fight Mode, per-IP rate rules, Turnstile before first chat message. Free, and stops scripted abuse before it reaches your hardware.
+
+**Tier 2 — Kong.** `rate-limiting` plugin, `policy: redis` against `kmsvc-redis-master.sqs:6379` so counters are cluster-wide rather than per-pod (Kong runs 2 replicas — a local policy would silently double every limit). Two profiles: generous for topology and delivery, tight for chat.
+
+**Tier 3 — `atlas`, the tier that actually protects the GPU.**
+
+| Control | Value | Rationale |
+|---|---|---|
+| Global chat semaphore | 6 | Leaves 2 of 8 sequence slots as operator headroom |
+| Queue depth | 20, then reject with `429` | A visible queue beats a wall; an unbounded queue beats nothing |
+| Per-session budget | 12 messages / 24h | Enough to explore, not enough to farm |
+| Per-request timeout | 120s hard, server-side | Independent of client behaviour |
+| Disconnect handling | cancel upstream immediately | **Critical** — a walked-away tab holding 1 of 8 slots is a real outage |
+
+Queue position is streamed to the client as SSE `{"type":"queue","position":N}` events, so waiting is legible rather than a hang.
+
+---
+
+## 7. Streaming
+
+SSE throughout — unidirectional server→client fits every surface, including token streaming. WebSockets are not justified; nothing flows client→server mid-stream.
+
+- Keepalive comment frame every 30s (idle SSE connections die at proxies)
+- `Last-Event-ID` supported on `/api/stream` for resumable topology/delivery deltas; chat is not resumable
+- `req.Context()` threaded to the upstream vLLM request so client abort cancels it — this is the mechanism that enforces the Tier 3 disconnect rule
+- Backpressure: bounded per-client channel; a slow consumer is dropped rather than allowed to grow memory
+- Chat events: `{"type":"reasoning"|"content"|"queue"|"done"|"error"}`. `--reasoning-parser=deepseek_r1` already separates `reasoning_content` from `content` — render thinking in a collapsible block. That block **is** the demo.
+
+**Context budget** (16384 total): system prompt ~300, snapshot digest capped at 2000, `max_tokens` 1500, leaving ~12500 for history. History is truncated oldest-first to fit. The digest is a compact rendering, never raw JSON.
+
+---
+
+## 8. Frontend
+
+- **Topology (B)**: React Flow, force layout. Node → namespace → workload.
+- **Delivery (E)**: React Flow, wave columns left→right from the existing `sync-wave` annotations (0→8). 31 app nodes — an ideal size for a readable DAG. Click an app → side panel with a `react-arborist` virtualized resource tree, children lazy-loaded. Live sync animation `OutOfSync → Syncing → Synced` driven by the Application watch. Push a commit during a demo and the wave cascades — that is the moment worth engineering for.
+- **Terminal (C)**: reuse [components/InteractiveTerminal.tsx](../components/InteractiveTerminal.tsx). Command set: `get nodes`, `get pods <ns>`, `get apps`, `top nodes`, `describe pod <ns> <name>`, `help`.
+- **Chat (D)**: new component. Collapsible reasoning block, queue position, streaming tokens.
+
+Rendering budget: ~550 resources total across the tree. Lazy expansion plus virtualization is required, not optional. Target: initial delivery view interactive in < 1.5s on a cold load.
+
+**Also in scope**: delete the fabricated statistics in [app/page.tsx](../app/page.tsx) — "40% CPU reduction", "99.2% uptime", "Mission-critical", "60% latency cut" — and either wire each card to a real number from `/api/topology` or remove the claim. Five of the six cards link to routes that do not exist (`/infrastructure`, `/systems`, `/llm`, `/kafka`, `/opensource`).
+
+---
+
+## 9. Phases, TDD-first
+
+Each phase is RED → GREEN → REFACTOR. Tests named before implementation exists.
+
+### Phase 1 — `atlas` core (~4 days)
+
+RED
+- `redact_test.go`: golden test — serialized snapshot contains no denied field, against a real-cluster fixture
+- `rbac_test.go`: SA receives 403 on `get secrets`
+- `snapshot_test.go`: informer event produces the expected delta
+
+GREEN: ClusterRole, informers, reducer, DTO construction, Redis publish.
+Verify: `kubectl auth can-i get secrets --as=system:serviceaccount:portfolio:atlas` → `no`.
+
+### Phase 2 — Surface B (~3 days)
+
+RED
+- `stream_test.go`: SSE emits a delta within 5s of a pod state change
+- `topology.test.tsx`: graph re-renders on delta without a full reload
+
+Verify: delete a pod, observe the graph update in < 5s without reloading.
+
+### Phase 3 — Surface E (~3 days)
+
+RED
+- `delivery_test.go`: apps group correctly by `sync-wave`; Secret names absent from output; `repoURL` absent from output
+- `delivery.test.tsx`: 550-node tree renders under the frame budget with virtualization on
+
+Verify: trigger an Argo sync, observe wave-ordered animation.
+
+### Phase 4 — Surface C (~2 days)
+
+RED
+- `exec_parse_test.go`: fuzz corpus — every non-allowlisted input rejects and performs zero upstream calls
+- `exec_test.go`: unknown namespace rejects on snapshot membership, not regex
+
+Verify: attempt injection payloads against `/api/exec`; all rejected, all logged.
+
+### Phase 5 — Surface D + rate limiter, one PR (~5 days)
+
+RED
+- `ratelimit_test.go`: 7th concurrent chat queues rather than reaching vLLM
+- `disconnect_test.go`: client abort cancels the upstream request
+- `budget_test.go`: 13th message in 24h returns 429 with `Retry-After`
+- `injection_test.go`: snapshot content cannot alter system-prompt behaviour
+- `context_test.go`: history truncation keeps total tokens under 16384
+
+Verify: load test at 20 concurrent clients — GPU sequence usage never exceeds 6, no upstream 5xx, queue drains.
+
+**Total: ~17 working days.** Rate limiter ships in the same PR as chat, never after.
+
+---
+
+## 10. Risks
+
+| Risk | Impact | Mitigation |
+|---|---|---|
+| Redaction miss leaks internal detail | High | Allowlist by DTO construction; golden test; manual review of every new field |
+| `worker-1` fails | Chat and all inference down | Out of scope to fix; degrade chat gracefully to "offline", never a hang |
+| 8-slot ceiling makes chat feel broken under traffic | Medium | Visible queue position; consider disabling chat and shipping B/E/C only |
+| Argo CD CRD schema changes | Low | Allowlist construction means new fields are ignored by default |
+| `atlas` compromised | High | Read-only SA, NetworkPolicy egress restriction, no write verbs anywhere |
+| Cost of GPU inference for anonymous visitors | Medium | Per-session daily budget; Turnstile; edge WAF |
+
+---
+
+## 11. Decisions needed before Phase 1
+
+1. **Which GitOps repo owns the portfolio** — GitHub (`riotpiao.homelab.com`) or Forgejo? Blocks 0.1–0.3.
+2. **Apex 403 cause** — tunnel route, WAF rule, or no origin? Blocks 0.5.
+3. **Is `homarr` still wanted?** Deployed and healthy, but from the abandoned plan.
+4. **Does chat stay in v1?** Given the 8-slot ceiling, shipping B + E + C first and treating D as a separate decision is defensible.
+5. **Where does `atlas` live** — this repo, or the homelab repo? Follows from decision 1.

docs/adr/ADR-0001-atlas-cluster-visualization.md

@@ -0,0 +1,285 @@
+# ADR-0001: `atlas` — Single Read-Only Aggregator for Public Cluster Visualization
+
+**Status**: Proposed
+
+**Date**: 2026-08-13
+
+**Authors**: Rock Liang
+
+**Supersedes**: `PLAN.md`, `IMPLEMENTATION.md` (Homarr + Terraform approach — abandoned; cluster is now GitOps/Kustomize + Argo CD)
+
+---
+
+## Context
+
+### Problem Statement
+
+The homelab cluster is fully operational and runs a non-trivial platform: Talos Kubernetes, GPU-backed LLM inference, event streaming, GitOps delivery, and a full observability stack. None of it is visible to anyone but the operator. The portfolio site meant to showcase it displays **hardcoded, fabricated statistics** and links to pages that do not exist.
+
+Goal: replace fabricated claims with a live, interactive, public view of the real system.
+
+### Current Situation (verified 2026-08-13)
+
+**Cluster**
+
+| Property | Value |
+|---|---|
+| Distro | Talos v1.13.3, Kubernetes v1.36.1 |
+| Nodes | 3× control-plane (`talos-cp-1/2/3`) + 1× `worker-1` (role `gpu-node`) |
+| `worker-1` allocatable | 95950m CPU, 65019644Ki memory, 1× `nvidia.com/gpu` |
+| Ingress | nginx, LoadBalancer `192.168.1.160`; Kong `10.105.63.160` for `api.riotpiao.com` |
+| Namespaces | 25 |
+
+**GitOps**
+
+- `homelab-root` is an app-of-apps: 31 child `Application` resources
+- Source: `[email protected]:Riotpiaole/riotpiao.homelab.com.git`, path `k8s/argocd/apps`
+- Sync waves **0 → 8** already annotated across apps
+- ~550 managed resources total (largest: `prometheus` 68, `cert-manager` 47, `kong` 39)
+
+**LLM serving** (`llm-serving`, KServe, all 5 `InferenceService` Ready)
+
+| Model | Notes |
+|---|---|
+| `reasoning` | `unsloth/DeepSeek-R1-Distill-Qwen-32B-bnb-4bit`, vLLM `v0.11.0` |
+| `ornith`, `embeddings`, `reranker`, `verifier` | 1 replica each |
+
+`reasoning` runtime args, verbatim: `--max-num-seqs=4`, `--max-model-len=16384`, `--gpu-memory-utilization=0.90`, `--enable-prefix-caching`, `--reasoning-parser=deepseek_r1`. `minReplicas: 2`, `maxReplicas: 2`, pinned to `worker-1`.
+
+**Existing building blocks**
+
+- Prometheus (kube-prometheus-stack) + kube-state-metrics + node-exporter + blackbox + Alertmanager — `monitoring`
+- Loki + promtail + Grafana — `logging`
+- Kong 3.9 + Kubernetes Ingress Controller 3.5 — `api`, 2 replicas
+- Redis (`kmsvc-redis-master.sqs.svc.cluster.local:6379`), 1 master + 3 replicas
+- Next.js 15.5 / React 19.2 portfolio source in this repo (not deployed)
+
+**Public exposure** (verified by DNS + HTTP probe)
+
+```
+api.riotpiao.com        NXDOMAIN
+argocd|grafana|vault|longhorn|prometheus|minio|temporal|forgejo|portainer.riotpiao.com
+                        NXDOMAIN
+riotpiao.com            172.67.196.33 / 104.21.60.115 (Cloudflare) → HTTP 403 at edge
+```
+
+Nothing in the cluster is currently reachable from the public internet. The Cloudflare tunnel has no public hostnames wired (cloudflared auto-creates a CNAME per public hostname; no CNAME exists).
+
+### Requirements
+
+1. Public, anonymous, interactive visualization of live cluster state
+2. Live Argo CD delivery pipeline view, ordered by sync wave
+3. Read-only browser terminal for cluster queries
+4. Streaming chat against the `reasoning` model, ChatGPT-style
+5. No internal service becomes publicly reachable as a side effect
+6. No fabricated statistics anywhere on the site
+
+### Constraints
+
+- **Hard capacity ceiling: 8 concurrent LLM sequences** (`--max-num-seqs=4` × 2 replicas). Single GPU. Not horizontally scalable without more hardware.
+- **Context ceiling: 16384 tokens** (`--max-model-len`)
+- Single GPU node — `worker-1` is a single point of failure for all inference
+- Solo operator, part-time
+- Cluster is GitOps-managed; every change ships through git → Argo CD (per project hard rules)
+- No test framework currently installed in the portfolio repo
+
+### Forces
+
+- **Impressiveness vs. attack surface** — the most impressive surfaces (terminal, chat) are the most dangerous
+- **Live data vs. information disclosure** — real cluster state is the whole point, and real cluster state is exactly what an attacker wants for reconnaissance
+- **Anonymous access vs. abuse** — requiring login kills the portfolio demo; not requiring it exposes 8 GPU slots to the open internet
+- **Four surfaces vs. one operator** — four independently-built backends is four times the security review
+
+---
+
+## Decision
+
+**We will build one read-only aggregator service, `atlas`, that is the sole public entry point to all cluster data, serving four presentation surfaces from one shared in-memory snapshot.**
+
+### Architecture
+
+```
+kube API (informers)  ─┐
+Prometheus /api/v1     ├──> atlas (Go, ns: portfolio, read-only ServiceAccount)
+Argo CD Application CRs┘         │
+                                 ├─ snapshot: in-memory, redacted at write time
+                                 ├─ Redis pub/sub (kmsvc-redis) — cross-replica fanout
+                                 │
+                                 └─ HTTP surfaces
+                                     GET  /api/topology   + /api/stream   (B: cluster topology)
+                                     GET  /api/delivery   + /api/stream   (E: Argo CD tree)
+                                     POST /api/exec                       (C: terminal)
+                                     POST /api/chat                       (D: chat) ──> reasoning-predictor.llm-serving
+```
+
+### Core invariants
+
+These are the load-bearing decisions. Everything else is implementation detail.
+
+**I1 — One public hostname, forever.**
+`riotpiao.com` is the only name that ever gets a public DNS record. `argocd`, `grafana`, `vault`, `longhorn`, `prometheus`, `minio`, `temporal`, `forgejo`, `portainer` stay NXDOMAIN permanently. Every new public record is a new thing to defend, and `atlas` proxying makes all of them unnecessary.
+
+**I2 — The browser never talks to an internal API.**
+No kube API, no Prometheus, no Argo CD API, no vLLM endpoint is reachable from a browser. `atlas` is the only origin. One choke point for rate limiting, redaction, and audit.
+
+**I3 — Redaction is an allowlist, never a denylist.**
+Fields are serialized by explicit construction into DTO structs. A new field appearing in an upstream CRD cannot leak by default, because nothing copies it.
+
+**I4 — No free-form string ever reaches an internal system.**
+The terminal parses to a closed command enum. Resource names are validated by **membership in the current snapshot**, not by regex. The chat model reads a pre-built snapshot digest and has no tool-calling ability.
+
+**I5 — Global GPU concurrency is capped below physical capacity.**
+Hard semaphore at **6** concurrent chat streams, leaving 2 of 8 sequence slots as operator headroom. Client disconnect cancels the upstream vLLM request immediately.
+
+### Technology
+
+| Component | Choice | Rationale |
+|---|---|---|
+| Aggregator | Go, `client-go` informers | Watch-based, not poll-per-request; N visitors ≠ N API calls |
+| Fanout | Redis pub/sub (existing `kmsvc-redis`) | Multi-replica `atlas` shares one snapshot stream; no new infrastructure |
+| Transport | SSE | Unidirectional server→client fits every surface, including LLM token streaming |
+| Topology + delivery graph | React Flow | Both are graphs; one library, one mental model |
+| Resource drill-down | `react-arborist` | Virtualized; the 68-resource apps must not jank |
+| Edge protection | Cloudflare WAF + Turnstile | Free; stops scripted abuse before it costs a packet |
+| Gateway limits | Kong `rate-limiting`, `policy: redis` | Cluster-wide counters, not per-pod; Kong 3.9 OSS ships it |
+
+### Implementation strategy — phased, in dependency order
+
+| Phase | Deliverable | Why this position |
+|---|---|---|
+| 0 | Unblock deployment | Nothing is visible until this lands |
+| 1 | `atlas` core: RBAC, informers, redaction | Every surface depends on it |
+| 2 | Surface B — cluster topology | Proves the snapshot + SSE pipeline end to end |
+| 3 | Surface E — Argo CD delivery tree | Zero new data sources, zero new attack surface, highest signal |
+| 4 | Surface C — read-only terminal | First surface accepting user input |
+| 5 | Surface D — chat + full rate limiter | Highest risk, highest cost; ships last, ships with its limiter |
+
+Surface E precedes C and D deliberately: it reuses Phase 1 data wholesale and is the surface that reads as platform engineering rather than hobby.
+
+**Timeline**: ~3 weeks part-time. **Responsibility**: solo.
+
+---
+
+## Consequences
+
+### Positive
+
+- Fabricated portfolio statistics replaced by live, verifiable data
+- One service to secure, rate-limit, audit, and operate instead of four
+- Sync-wave DAG makes a real dependency-ordering decision legible to a visitor in seconds
+- Informer-based design means visitor traffic does not load the kube API
+- Invariant I1 leaves the cluster's public footprint at exactly one hostname
+- Existing `InteractiveTerminal.tsx` and `LiveIndicator.tsx` get real backing
+
+### Negative
+
+- New production service to build, secure, and maintain — currently zero
+- `atlas` becomes a high-value target: it holds cluster-wide read access by design
+- 8-slot GPU ceiling means chat will queue under real traffic; a "please wait" queue is a worse first impression than no chat at all
+- Public chat on a single GPU node has a genuine cost/abuse tail even behind three tiers of limiting
+- Redaction is permanent maintenance: every new field surfaced is a new disclosure review
+- Test framework must be added to the repo before any of this can be built TDD-first
+
+### Neutral
+
+- Grafana remains for operator use; `atlas` is presentation-only and never replaces it
+- Argo CD API is deliberately not used in v1 — `Application` CRs are read via the same informer, so no Argo CD token is ever minted
+- `worker-1` remains a single point of failure; this ADR does not change that, only exposes it
+
+---
+
+## Alternatives Considered
+
+### Alternative 1: Grafana dashboards + public iframe embeds
+
+**Description**: Build dashboards on existing data, expose a read-only Grafana org, embed in the portfolio.
+
+**Pros**
+- Approximately one day of work
+- Zero new services, zero new code, zero new attack surface of our own making
+- Data already flows
+
+**Cons**
+- Grafana's design, not the portfolio's — reads as a screenshot, not a product
+- Requires making Grafana publicly reachable, violating invariant I1
+- Iframes leak internal metric names, job labels, and namespace structure with no redaction layer available
+- No path to the terminal or chat surfaces
+
+**Why not chosen**: The one-day cost is real, but it forces a second public hostname and surrenders all control over what is disclosed. Grafana has no allowlist redaction model. Kept as the fallback if Phase 1 proves too expensive.
+
+### Alternative 2: Four independent backends, one per surface
+
+**Description**: Separate services for topology, delivery, terminal, and chat.
+
+**Pros**
+- Blast radius isolation — a terminal compromise does not reach the chat service
+- Independent scaling and deployment
+- Aligns with the microservices instinct
+
+**Cons**
+- Four RBAC policies, four redaction layers, four rate limiters, four security reviews
+- Four independent informer sets hammering the kube API for the same data
+- Solo operator; four services will not receive equal maintenance attention
+- Cross-surface consistency (terminal and topology disagreeing about pod state) becomes a real bug class
+
+**Why not chosen**: Blast-radius isolation is genuine, but every surface needs the *same* read-only snapshot. Duplicating the highest-risk component — cluster-wide read access — four times increases total exposure rather than reducing it. Rejected on the specific ground that the shared component is the dangerous one.
+
+### Alternative 3: Static snapshot generated at build time
+
+**Description**: CI job dumps cluster state to JSON at build; site renders it statically. No runtime cluster access at all.
+
+**Pros**
+- Zero runtime attack surface — no live credentials anywhere near the public internet
+- Trivially cacheable, effectively free to serve, cannot be DoS'd
+- No rate limiting needed
+
+**Cons**
+- Not live; "interactive" degrades to "pre-rendered"
+- Kills the terminal and chat surfaces entirely
+- The sync-wave cascade animation — the single best demo moment — is impossible
+- Data staleness makes the fabricated-statistics problem better but not solved
+
+**Why not chosen**: Fails requirements 1, 3, and 4. Worth revisiting for the topology surface alone if runtime cost becomes a problem.
+
+### Alternative 4: Authentik-gated access to all surfaces
+
+**Description**: Put the existing Authentik SSO in front of the whole visualization.
+
+**Pros**
+- Abuse problem largely disappears; rate limiting becomes a formality
+- Authentik is already deployed and working
+- Redaction requirements relax substantially for authenticated viewers
+
+**Cons**
+- Nobody creates an account to look at a stranger's homelab — the demo dies
+- Defeats the entire purpose of a public portfolio
+- Still requires a public Authentik hostname, violating I1
+
+**Why not chosen**: Directly contradicts requirement 1. Anonymous access plus Cloudflare Turnstile achieves most of the abuse resistance without the conversion cliff. Reconsider only if abuse proves unmanageable in production.
+
+---
+
+## References
+
+- Cluster state verified 2026-08-13 via `kubectl` against context `admin@homelab-cluster`
+- Public exposure verified 2026-08-13 via `dig` + `curl` against `riotpiao.com` and subdomains
+- vLLM engine args: `kubectl get inferenceservice reasoning -n llm-serving -o jsonpath='{.spec}'`
+- Superseded: [PLAN.md](../../PLAN.md), [IMPLEMENTATION.md](../../IMPLEMENTATION.md)
+- Companion implementation plan: [PLAN-atlas.md](../PLAN-atlas.md)
+
+---
+
+## Review Notes (Before Acceptance)
+
+**Open questions requiring an answer before Phase 1**
+
+1. **Two GitOps roots exist.** `homelab-root` reads `[email protected]:Riotpiaole/riotpiao.homelab.com.git`. This repo's `infra/argocd-apps.yaml` points at `forgejo.riotpiao.homelab.com` — a hostname that does not resolve — and its `portfolio` and `auth-infra` Applications **do not exist in the cluster**. Which repository is authoritative for the portfolio?
+2. **Apex returns 403 from the Cloudflare edge.** Is this an absent tunnel public-hostname route, a WAF rule, or a proxied record with no origin? The portfolio cannot ship until this is understood.
+3. Is `homarr` still wanted? It is deployed and healthy, but the plan it came from is abandoned.
+4. Does the chat surface stay in scope given the 8-slot ceiling, or ship topology + delivery + terminal first and treat chat as a separate decision?
+
+**Approval**
+
+- [ ] Architecture — invariants I1–I5 accepted
+- [ ] Security — redaction allowlist and rate-limit tiers accepted
+- [ ] Scope — four surfaces vs. three

infra/argocd-apps.yaml

@@ -0,0 +1,59 @@
+apiVersion: argoproj.io/v1alpha1
+kind: Application
+metadata:
+  name: portfolio
+  namespace: argocd
+spec:
+  project: default
+  source:
+    repoURL: https://forgejo.riotpiao.homelab.com/rock/riotpiao.git
+    targetRevision: main
+    path: infra/portfolio/base
+  destination:
+    server: https://kubernetes.default.svc
+    namespace: portfolio
+  syncPolicy:
+    automated:
+      prune: true
+      selfHeal: true
+    syncOptions:
+    - CreateNamespace=true
+---
+apiVersion: argoproj.io/v1alpha1
+kind: Application
+metadata:
+  name: homarr
+  namespace: argocd
+spec:
+  project: default
+  source:
+    repoURL: https://forgejo.riotpiao.homelab.com/rock/riotpiao.git
+    targetRevision: main
+    path: infra/homarr/base
+  destination:
+    server: https://kubernetes.default.svc
+    namespace: dashboard
+  syncPolicy:
+    automated:
+      prune: true
+      selfHeal: true
+    syncOptions:
+    - CreateNamespace=true
+---
+apiVersion: argoproj.io/v1alpha1
+kind: Application
+metadata:
+  name: auth-infra
+  namespace: argocd
+spec:
+  project: default
+  source:
+    repoURL: https://forgejo.riotpiao.homelab.com/rock/riotpiao.git
+    targetRevision: main
+    path: infra/auth-infra/base
+  destination:
+    server: https://kubernetes.default.svc
+  syncPolicy:
+    automated:
+      prune: true
+      selfHeal: true

infra/auth-infra/base/ingress-protected.yaml

@@ -0,0 +1,83 @@
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  name: longhorn-protected
+  namespace: longhorn-system
+  annotations:
+    nginx.ingress.kubernetes.io/auth-url: http://authentik-server.iam.svc.cluster.local/outpost.goauthentik.io/auth/nginx
+    nginx.ingress.kubernetes.io/auth-signin: https://authentik.riotpiao.homelab.com/outpost.goauthentik.io/start?rd=$scheme://$http_host$escaped_request_uri
+    nginx.ingress.kubernetes.io/auth-response-headers: Set-Cookie,X-authentik-username,X-authentik-groups,X-authentik-email,X-authentik-name,X-authentik-uid
+    cert-manager.io/cluster-issuer: letsencrypt-prod
+spec:
+  ingressClassName: nginx
+  tls:
+  - hosts:
+    - longhorn.riotpiao.homelab.com
+    secretName: longhorn-tls
+  rules:
+  - host: longhorn.riotpiao.homelab.com
+    http:
+      paths:
+      - path: /
+        pathType: Prefix
+        backend:
+          service:
+            name: longhorn-frontend
+            port:
+              number: 80
+---
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  name: portainer-protected
+  namespace: dashboard
+  annotations:
+    nginx.ingress.kubernetes.io/auth-url: http://authentik-server.iam.svc.cluster.local/outpost.goauthentik.io/auth/nginx
+    nginx.ingress.kubernetes.io/auth-signin: https://authentik.riotpiao.homelab.com/outpost.goauthentik.io/start?rd=$scheme://$http_host$escaped_request_uri
+    nginx.ingress.kubernetes.io/auth-response-headers: Set-Cookie,X-authentik-username,X-authentik-groups,X-authentik-email,X-authentik-name,X-authentik-uid
+    cert-manager.io/cluster-issuer: letsencrypt-prod
+spec:
+  ingressClassName: nginx
+  tls:
+  - hosts:
+    - portainer.riotpiao.homelab.com
+    secretName: portainer-tls
+  rules:
+  - host: portainer.riotpiao.homelab.com
+    http:
+      paths:
+      - path: /
+        pathType: Prefix
+        backend:
+          service:
+            name: portainer
+            port:
+              number: 9000
+---
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  name: prometheus-protected
+  namespace: monitoring
+  annotations:
+    nginx.ingress.kubernetes.io/auth-url: http://authentik-server.iam.svc.cluster.local/outpost.goauthentik.io/auth/nginx
+    nginx.ingress.kubernetes.io/auth-signin: https://authentik.riotpiao.homelab.com/outpost.goauthentik.io/start?rd=$scheme://$http_host$escaped_request_uri
+    nginx.ingress.kubernetes.io/auth-response-headers: Set-Cookie,X-authentik-username,X-authentik-groups,X-authentik-email,X-authentik-name,X-authentik-uid
+    cert-manager.io/cluster-issuer: letsencrypt-prod
+spec:
+  ingressClassName: nginx
+  tls:
+  - hosts:
+    - prometheus.riotpiao.homelab.com
+    secretName: prometheus-tls
+  rules:
+  - host: prometheus.riotpiao.homelab.com
+    http:
+      paths:
+      - path: /
+        pathType: Prefix
+        backend:
+          service:
+            name: prometheus-operated
+            port:
+              number: 9090

infra/auth-infra/base/kustomization.yaml

@@ -0,0 +1,5 @@
+apiVersion: kustomize.config.k8s.io/v1beta1
+kind: Kustomization
+resources:
+- ingress-protected.yaml
+- networkpolicy.yaml

infra/auth-infra/base/networkpolicy.yaml

@@ -0,0 +1,50 @@
+apiVersion: networking.k8s.io/v1
+kind: NetworkPolicy
+metadata:
+  name: longhorn-ingress-only
+  namespace: longhorn-system
+spec:
+  podSelector:
+    matchLabels:
+      app.kubernetes.io/name: longhorn
+  policyTypes:
+  - Ingress
+  ingress:
+  - from:
+    - namespaceSelector:
+        matchLabels:
+          name: ingress-nginx
+---
+apiVersion: networking.k8s.io/v1
+kind: NetworkPolicy
+metadata:
+  name: portainer-ingress-only
+  namespace: dashboard
+spec:
+  podSelector:
+    matchLabels:
+      app: portainer
+  policyTypes:
+  - Ingress
+  ingress:
+  - from:
+    - namespaceSelector:
+        matchLabels:
+          name: ingress-nginx
+---
+apiVersion: networking.k8s.io/v1
+kind: NetworkPolicy
+metadata:
+  name: prometheus-ingress-only
+  namespace: monitoring
+spec:
+  podSelector:
+    matchLabels:
+      app.kubernetes.io/name: prometheus
+  policyTypes:
+  - Ingress
+  ingress:
+  - from:
+    - namespaceSelector:
+        matchLabels:
+          name: ingress-nginx

infra/homarr/base/helmrelease.yaml

@@ -0,0 +1,24 @@
+apiVersion: helm.cattle.io/v1
+kind: HelmRelease
+metadata:
+  name: homarr
+  namespace: dashboard
+spec:
+  chart:
+    repository: https://homarr-labs.github.io/charts/
+    name: homarr
+    version: "~1"
+  values:
+    env:
+      AUTH_PROVIDERS: "oidc"
+      AUTH_OIDC_CLIENT_ID: "homarr"
+      AUTH_OIDC_ISSUER: "https://authentik.riotpiao.homelab.com/application/o/homarr/"
+      AUTH_OIDC_URI: "https://authentik.riotpiao.homelab.com/application/o/homarr/.well-known/openid-configuration"
+      AUTH_OIDC_GROUPS_ATTRIBUTE: "groups"
+    envFrom:
+    - secretRef:
+        name: homarr-oidc
+    persistence:
+      enabled: true
+      storageClass: longhorn
+      size: 2Gi

infra/homarr/base/ingress.yaml

@@ -0,0 +1,24 @@
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  name: homarr
+  namespace: dashboard
+  annotations:
+    cert-manager.io/cluster-issuer: letsencrypt-prod
+spec:
+  ingressClassName: nginx
+  tls:
+  - hosts:
+    - homarr.riotpiao.homelab.com
+    secretName: homarr-tls
+  rules:
+  - host: homarr.riotpiao.homelab.com
+    http:
+      paths:
+      - path: /
+        pathType: Prefix
+        backend:
+          service:
+            name: homarr
+            port:
+              number: 3000

infra/homarr/base/kustomization.yaml

@@ -0,0 +1,8 @@
+apiVersion: kustomize.config.k8s.io/v1beta1
+kind: Kustomization
+namespace: dashboard
+resources:
+- namespace.yaml
+- secret.yaml
+- helmrelease.yaml
+- ingress.yaml

infra/homarr/base/namespace.yaml

@@ -0,0 +1,7 @@
+apiVersion: v1
+kind: Namespace
+metadata:
+  name: dashboard
+  labels:
+    app.kubernetes.io/name: homarr
+    managed-by: argocd

infra/homarr/base/secret.yaml

@@ -0,0 +1,8 @@
+apiVersion: v1
+kind: Secret
+metadata:
+  name: homarr-oidc
+  namespace: dashboard
+type: Opaque
+stringData:
+  AUTH_OIDC_CLIENT_SECRET: "PLACEHOLDER_CHANGE_ME"

infra/kustomization.yaml

@@ -0,0 +1,6 @@
+apiVersion: kustomize.config.k8s.io/v1beta1
+kind: Kustomization
+resources:
+- portfolio/base
+- homarr/base
+- auth-infra/base

infra/portfolio/base/deployment.yaml

@@ -0,0 +1,49 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: portfolio
+  namespace: portfolio
+  labels:
+    app.kubernetes.io/name: portfolio
+    app.kubernetes.io/component: web
+spec:
+  replicas: 2
+  selector:
+    matchLabels:
+      app.kubernetes.io/name: portfolio
+  template:
+    metadata:
+      labels:
+        app.kubernetes.io/name: portfolio
+    spec:
+      containers:
+      - name: portfolio
+        image: forgejo.riotpiao.homelab.com/rock/portfolio:latest
+        imagePullPolicy: IfNotPresent
+        ports:
+        - name: http
+          containerPort: 3000
+          protocol: TCP
+        livenessProbe:
+          httpGet:
+            path: /
+            port: http
+          initialDelaySeconds: 10
+          periodSeconds: 10
+          timeoutSeconds: 5
+          failureThreshold: 3
+        readinessProbe:
+          httpGet:
+            path: /
+            port: http
+          initialDelaySeconds: 5
+          periodSeconds: 5
+          timeoutSeconds: 3
+          failureThreshold: 2
+        resources:
+          requests:
+            cpu: 100m
+            memory: 128Mi
+          limits:
+            cpu: 500m
+            memory: 512Mi

infra/portfolio/base/ingress.yaml

@@ -0,0 +1,24 @@
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  name: portfolio
+  namespace: portfolio
+  annotations:
+    cert-manager.io/cluster-issuer: letsencrypt-prod
+spec:
+  ingressClassName: nginx
+  tls:
+  - hosts:
+    - portfolio.riotpiao.homelab.com
+    secretName: portfolio-tls
+  rules:
+  - host: portfolio.riotpiao.homelab.com
+    http:
+      paths:
+      - path: /
+        pathType: Prefix
+        backend:
+          service:
+            name: portfolio
+            port:
+              number: 3000

infra/portfolio/base/kustomization.yaml

@@ -0,0 +1,8 @@
+apiVersion: kustomize.config.k8s.io/v1beta1
+kind: Kustomization
+namespace: portfolio
+resources:
+- namespace.yaml
+- deployment.yaml
+- service.yaml
+- ingress.yaml

infra/portfolio/base/namespace.yaml

@@ -0,0 +1,7 @@
+apiVersion: v1
+kind: Namespace
+metadata:
+  name: portfolio
+  labels:
+    app.kubernetes.io/name: portfolio
+    managed-by: argocd

infra/portfolio/base/service.yaml

@@ -0,0 +1,16 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: portfolio
+  namespace: portfolio
+  labels:
+    app.kubernetes.io/name: portfolio
+spec:
+  type: ClusterIP
+  ports:
+  - port: 3000
+    targetPort: http
+    protocol: TCP
+    name: http
+  selector:
+    app.kubernetes.io/name: portfolio

lib/clusterMock.ts

@@ -0,0 +1,183 @@
+/**
+ * Layout placeholder fixtures.
+ *
+ * Shapes mirror the `atlas` DTOs described in docs/PLAN-atlas.md, and the values
+ * are transcribed from the real cluster so the layout is sized against real
+ * cardinality (32 apps, 9 sync waves, ~550 resources).
+ *
+ * Redaction rules from the plan are already applied here: no node IPs, no pod
+ * IPs, no container args, no image tags, no repo URLs, no Secret names.
+ */
+
+export type Health = 'healthy' | 'degraded' | 'progressing'
+export type Sync = 'synced' | 'outofsync'
+
+export const cluster = {
+  distro: 'Talos v1.13.3',
+  kubernetes: 'v1.36.1',
+  snapshotAge: 2.1,
+  generation: 88412,
+} as const
+
+export type Node = {
+  name: string
+  role: string
+  cpu: number
+  memoryGi: number
+  gpu: number
+  pods: number
+  health: Health
+}
+
+export const nodes: Node[] = [
+  { name: 'talos-cp-1', role: 'control-plane', cpu: 8, memoryGi: 16, gpu: 0, pods: 24, health: 'healthy' },
+  { name: 'talos-cp-2', role: 'control-plane', cpu: 8, memoryGi: 16, gpu: 0, pods: 31, health: 'healthy' },
+  { name: 'talos-cp-3', role: 'control-plane', cpu: 8, memoryGi: 16, gpu: 0, pods: 28, health: 'healthy' },
+  { name: 'worker-1', role: 'gpu-node', cpu: 96, memoryGi: 62, gpu: 1, pods: 55, health: 'healthy' },
+]
+
+export type Namespace = {
+  name: string
+  running: number
+  total: number
+}
+
+export const namespaces: Namespace[] = [
+  { name: 'kube-system', running: 21, total: 21 },
+  { name: 'longhorn-system', running: 30, total: 31 },
+  { name: 'sqs', running: 13, total: 19 },
+  { name: 'logging', running: 12, total: 12 },
+  { name: 'monitoring', running: 9, total: 11 },
+  { name: 'temporal', running: 9, total: 10 },
+  { name: 'llm-serving', running: 6, total: 6 },
+  { name: 'iam', running: 6, total: 6 },
+  { name: 'cicd', running: 6, total: 6 },
+  { name: 'argocd', running: 6, total: 8 },
+  { name: 'ingress-nginx', running: 4, total: 4 },
+  { name: 'cert-manager', running: 3, total: 6 },
+  { name: 'api', running: 2, total: 2 },
+  { name: 'storage', running: 2, total: 2 },
+  { name: 'dashboard', running: 2, total: 2 },
+  { name: 'cloudflared', running: 2, total: 2 },
+  { name: 'cnpg-system', running: 1, total: 2 },
+  { name: 'gpu-system', running: 1, total: 1 },
+  { name: 'kserve', running: 1, total: 1 },
+  { name: 'reloader', running: 1, total: 1 },
+  { name: 'sms', running: 0, total: 1 },
+]
+
+export type Model = {
+  name: string
+  replicas: number
+  seqPerReplica: number
+  contextTokens: number
+  ready: boolean
+}
+
+/** Model identifiers and quantization strategy are deliberately not surfaced. */
+export const models: Model[] = [
+  { name: 'reasoning', replicas: 2, seqPerReplica: 4, contextTokens: 16384, ready: true },
+  { name: 'ornith', replicas: 1, seqPerReplica: 4, contextTokens: 16384, ready: true },
+  { name: 'embeddings', replicas: 1, seqPerReplica: 8, contextTokens: 8192, ready: true },
+  { name: 'reranker', replicas: 1, seqPerReplica: 8, contextTokens: 8192, ready: true },
+  { name: 'verifier', replicas: 1, seqPerReplica: 4, contextTokens: 16384, ready: true },
+]
+
+/** `--max-num-seqs=4` x `minReplicas: 2`. The number the whole design is sized against. */
+export const SEQUENCE_SLOTS = 8
+/** Operator headroom: 2 of 8 slots never handed to visitors. */
+export const PUBLIC_SLOT_CAP = 6
+
+export type App = {
+  name: string
+  wave: number | null
+  sync: Sync
+  health: Health
+  resources: number
+}
+
+export const apps: App[] = [
+  { name: 'homelab-root', wave: null, sync: 'synced', health: 'healthy', resources: 31 },
+
+  { name: 'cert-manager', wave: 0, sync: 'synced', health: 'healthy', resources: 47 },
+  { name: 'prometheus-crds', wave: 0, sync: 'synced', health: 'healthy', resources: 10 },
+  { name: 'reloader', wave: 0, sync: 'synced', health: 'healthy', resources: 6 },
+  { name: 'sops-secrets', wave: 0, sync: 'synced', health: 'healthy', resources: 16 },
+
+  { name: 'prometheus', wave: 1, sync: 'synced', health: 'healthy', resources: 68 },
+  { name: 'blackbox-exporter', wave: 1, sync: 'synced', health: 'healthy', resources: 17 },
+  { name: 'ingress-config', wave: 1, sync: 'synced', health: 'healthy', resources: 14 },
+  { name: 'longhorn-config', wave: 1, sync: 'outofsync', health: 'healthy', resources: 12 },
+  { name: 'minio-operator', wave: 1, sync: 'synced', health: 'healthy', resources: 9 },
+  { name: 'cert-manager-issuers', wave: 1, sync: 'synced', health: 'healthy', resources: 7 },
+  { name: 'minio-tenant', wave: 1, sync: 'synced', health: 'healthy', resources: 1 },
+
+  { name: 'monitoring-config', wave: 2, sync: 'synced', health: 'healthy', resources: 24 },
+  { name: 'loki', wave: 2, sync: 'synced', health: 'healthy', resources: 16 },
+  { name: 'grafana', wave: 2, sync: 'synced', health: 'healthy', resources: 11 },
+  { name: 'databases', wave: 2, sync: 'synced', health: 'healthy', resources: 5 },
+  { name: 'promtail', wave: 2, sync: 'synced', health: 'healthy', resources: 5 },
+
+  { name: 'authentik', wave: 3, sync: 'synced', health: 'healthy', resources: 13 },
+  { name: 'iam-jobs', wave: 3, sync: 'synced', health: 'healthy', resources: 9 },
+  { name: 'vault', wave: 3, sync: 'synced', health: 'healthy', resources: 8 },
+  { name: 'forgejo-runner', wave: 3, sync: 'synced', health: 'healthy', resources: 4 },
+
+  { name: 'strimzi-operator', wave: 5, sync: 'synced', health: 'healthy', resources: 27 },
+  { name: 'kmsvc-redis', wave: 5, sync: 'synced', health: 'healthy', resources: 13 },
+
+  { name: 'queue-crd', wave: 6, sync: 'synced', health: 'healthy', resources: 6 },
+  { name: 'kafka-cluster', wave: 6, sync: 'synced', health: 'healthy', resources: 2 },
+
+  { name: 'kong', wave: 7, sync: 'synced', health: 'healthy', resources: 39 },
+  { name: 'management-service', wave: 7, sync: 'synced', health: 'healthy', resources: 6 },
+
+  { name: 'temporal', wave: 8, sync: 'synced', health: 'healthy', resources: 16 },
+  { name: 'sms', wave: 8, sync: 'synced', health: 'degraded', resources: 7 },
+  { name: 'portainer', wave: 8, sync: 'synced', health: 'healthy', resources: 5 },
+  { name: 'homarr', wave: 8, sync: 'synced', health: 'healthy', resources: 3 },
+  { name: 'cloudflared', wave: 8, sync: 'synced', health: 'healthy', resources: 1 },
+]
+
+export const WAVES = [0, 1, 2, 3, 4, 5, 6, 7, 8]
+
+export function appsInWave(wave: number): App[] {
+  return apps.filter((a) => a.wave === wave)
+}
+
+/** Resource kinds for the drill-down panel. Secrets are counted, never named. */
+export const resourceKinds: Record<string, Array<{ kind: string; count: number; named: boolean }>> = {
+  prometheus: [
+    { kind: 'PrometheusRule', count: 24, named: true },
+    { kind: 'ServiceMonitor', count: 18, named: true },
+    { kind: 'Service', count: 9, named: true },
+    { kind: 'ConfigMap', count: 6, named: true },
+    { kind: 'Deployment', count: 4, named: true },
+    { kind: 'ClusterRole', count: 4, named: true },
+    { kind: 'Secret', count: 3, named: false },
+  ],
+  kong: [
+    { kind: 'CustomResourceDefinition', count: 14, named: true },
+    { kind: 'ClusterRole', count: 8, named: true },
+    { kind: 'Service', count: 5, named: true },
+    { kind: 'KongPlugin', count: 5, named: true },
+    { kind: 'Ingress', count: 4, named: true },
+    { kind: 'Secret', count: 3, named: false },
+  ],
+  'cert-manager': [
+    { kind: 'CustomResourceDefinition', count: 12, named: true },
+    { kind: 'ClusterRole', count: 11, named: true },
+    { kind: 'ClusterRoleBinding', count: 9, named: true },
+    { kind: 'ServiceAccount', count: 6, named: true },
+    { kind: 'Deployment', count: 3, named: true },
+    { kind: 'Service', count: 3, named: true },
+    { kind: 'ValidatingWebhookConfiguration', count: 3, named: true },
+  ],
+}
+
+export const DEFAULT_KINDS = [
+  { kind: 'Service', count: 3, named: true },
+  { kind: 'Deployment', count: 2, named: true },
+  { kind: 'ConfigMap', count: 2, named: true },
+  { kind: 'Secret', count: 1, named: false },
+]

lib/motion.ts

@@ -0,0 +1,65 @@
+export const DURATION = {
+  fast: 0.15,
+  standard: 0.3,
+  reveal: 0.5,
+  slow: 0.8,
+}
+
+export const EASING = {
+  ease: [0.25, 0.46, 0.45, 0.94],
+  easeOut: [0.33, 1, 0.68, 1],
+}
+
+export const VARIANTS = {
+  // Scroll reveal: fade + slight upward translate
+  reveal: {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: DURATION.reveal, ease: EASING.easeOut },
+    },
+  },
+
+  // Hover lift: card elevation on hover
+  cardHover: {
+    rest: { y: 0 },
+    hover: {
+      y: -8,
+      transition: { duration: DURATION.fast },
+    },
+  },
+
+  // Stagger container for card grids
+  container: {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+        delayChildren: 0.1,
+      },
+    },
+  },
+
+  // Child item for stagger
+  item: {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: DURATION.standard },
+    },
+  },
+
+  // Pulse: live indicator dot
+  pulse: {
+    scale: [1, 1.2, 1],
+    opacity: [0.6, 1, 0.6],
+    transition: {
+      duration: 2,
+      repeat: Infinity,
+      ease: 'easeInOut',
+    },
+  },
+}

next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'standalone',
+};
+
+module.exports = nextConfig;

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "riotpiao",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint . --ext .ts,.tsx"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "framer-motion": "^11.0.0",
+    "lucide-react": "^0.344.0",
+    "next": "^15.5.20",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "tailwindcss": "^3.4.0"
+  },
+  "devDependencies": {
+    "@types/node": "20.17.6",
+    "@types/react": "19.2.17",
+    "@typescript-eslint/eslint-plugin": "^8.64.0",
+    "@typescript-eslint/parser": "^8.64.0",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.57.1",
+    "eslint-config-next": "^16.2.10",
+    "postcss": "^8.4.32",
+    "typescript": "5.8.2"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

tailwind.config.ts

@@ -0,0 +1,33 @@
+import type { Config } from 'tailwindcss'
+
+export default {
+  content: [
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        void: '#070B14',
+        deck: '#0E1424',
+        riser: '#131B2E',
+        wire: '#1F2A45',
+        'wire-lit': '#35486F',
+        lamp: '#FFA524',
+        flux: '#4FD1C5',
+        rose: '#FF5C7A',
+        dim: '#6B7DA5',
+        chalk: '#DDE5F7',
+      },
+      fontFamily: {
+        signage: ['var(--font-signage)', 'ui-sans-serif', 'system-ui'],
+        plex: ['var(--font-plex)', 'ui-sans-serif', 'system-ui'],
+        data: ['var(--font-data)', 'ui-monospace', 'monospace'],
+      },
+      letterSpacing: {
+        signage: '0.02em',
+      },
+    },
+  },
+  plugins: [],
+} satisfies Config

tasks/00-decisions.md

@@ -0,0 +1,37 @@
+# Blocking Decisions
+
+All five must resolve before Phase 1 starts. Source: ADR-0001 review notes.
+
+## 1. Which GitOps repo owns the portfolio?
+
+Two roots exist:
+- `homelab-root` → `[email protected]:Riotpiaole/riotpiao.homelab.com.git`, path `k8s/argocd/apps` (31 child Applications, this is the live one)
+- This repo's `infra/argocd-apps.yaml` → `forgejo.riotpiao.homelab.com` (NXDOMAIN, `portfolio`/`auth-infra` Applications don't exist in cluster)
+
+**Decision needed:** GitHub or Forgejo. Blocks Phase 0.1–0.3.
+
+## 2. Apex 403 cause
+
+`riotpiao.com` resolves via Cloudflare (172.67.196.33 / 104.21.60.115) but returns HTTP 403 at the edge, no origin headers.
+
+**Decision needed:** tunnel route missing, WAF rule, or no origin configured at all. Check Cloudflare tunnel Public Hostnames list + WAF event log (event log names the blocking rule). Blocks Phase 0.5.
+
+## 3. Is homarr still wanted?
+
+Deployed and healthy, but shipped under the abandoned Homarr+Terraform plan.
+
+**Decision needed:** keep, or decommission via GitOps (remove Application, let Argo prune).
+
+## 4. Does chat (Surface D) stay in v1?
+
+8-slot GPU ceiling (`--max-num-seqs=4` × 2 replicas) means chat queues under real traffic — a visible "please wait" is a worse first impression than no chat.
+
+**Decision needed:** ship B+E+C first and treat D as separate follow-up, or commit to D in v1 with the queue UX as-is.
+
+## 5. Where does atlas live?
+
+This repo (`riotpiao`) or the homelab repo. Follows from decision 1 — whichever repo is authoritative for the portfolio's GitOps should also own atlas's manifests.
+
+---
+
+Once answered, update this file with the decisions taken (date + rationale) before starting [01-phase0-unblock.md](01-phase0-unblock.md).

tasks/01-phase0-unblock.md

@@ -0,0 +1,39 @@
+# Phase 0 — Unblock
+
+Blocking. Nothing ships until this lands. Requires [00-decisions.md](00-decisions.md) #1 and #2 answered first.
+
+## Tasks
+
+- [ ] **0.1** Resolve which GitOps repo owns the portfolio; delete or correct the losing manifest
+  - Depends on: decision #1
+  - Verify: `kubectl get application portfolio -n argocd` shows one, correct, source
+
+- [ ] **0.2** Point `infra/argocd-apps.yaml` `repoURL` and image reference at real hostnames (fix NXDOMAIN)
+  - Verify: `kubectl get pods -n portfolio` → `2/2 Running`
+
+- [ ] **0.3** Replace `:latest` tag with commit-SHA tag in `infra/portfolio/base/deployment.yaml`; keep `imagePullPolicy: IfNotPresent` (correct once tags are immutable)
+  - Verify: new commit → new tag → Argo rolls out automatically, no manual `kubectl set image`
+
+- [ ] **0.4** Diagnose `forgejo-gitea` stuck `Init:0/3` (3h+) — read init container logs before changing anything
+  - Command: `kubectl logs -n cicd <forgejo-gitea-pod> -c <init-container-name>`
+  - Verify: pod reaches `Running`, image builds succeed
+
+- [ ] **0.5** Diagnose apex 403 — check Cloudflare tunnel Public Hostnames list and WAF event log
+  - Depends on: decision #2
+  - Verify: `curl -sS -o /dev/null -w '%{http_code}\n' https://riotpiao.com` → `200`
+
+- [ ] **0.6** Add Vitest + Testing Library + `msw`; add `test` and `test:watch` scripts to `package.json`
+  - Verify: `pnpm test` → runner executes, 0 tests, exit 0
+
+- [ ] **0.7** Triage unrelated cluster issues: `sms` Application Degraded (`macos-bluebubbles` Pending 3h), `longhorn-config` OutOfSync
+  - Unrelated to atlas, but delivery tree (Phase 3) will render both red on day one — fix or explicitly accept as known-red
+
+## Phase verify
+
+```bash
+kubectl get pods -n portfolio                                    # 2/2 Running
+curl -sS -o /dev/null -w '%{http_code}\n' https://riotpiao.com   # 200
+pnpm test                                                         # runner executes, 0 tests, exit 0
+```
+
+Next: [02-phase1-atlas-core.md](02-phase1-atlas-core.md)

tasks/02-phase1-atlas-core.md

@@ -0,0 +1,35 @@
+# Phase 1 — atlas core
+
+~4 days. Every surface depends on this. RED → GREEN → REFACTOR.
+
+## RED (write tests first, confirm they fail)
+
+- [ ] `redact_test.go` — golden test: serialized snapshot contains none of the denied fields, run against a fixture captured from the real cluster
+- [ ] `rbac_test.go` — atlas ServiceAccount receives 403 on `get secrets` in every namespace
+- [ ] `snapshot_test.go` — an informer event produces the expected delta
+
+## GREEN
+
+- [ ] ClusterRole: verbs `get,list,watch` only, explicit resource list — no `secrets`, no `*`, no wildcard apiGroups
+- [ ] client-go informers: kube API (nodes, namespaces, workloads), Argo CD `Application` CRs
+- [ ] Reducer: informer events → in-memory snapshot, redacted **at write time**
+- [ ] DTO construction — allowlist only. Emitted: name, namespace, kind, phase, ready counts, restart count, age, node name, health status, sync status, sync wave, explicit label subset. Never emitted: container env/args, image digests/tags, `spec.source.repoURL`, `spec.source.path`, annotations, pod IPs, cluster IPs, Secret names, `status.conditions[].message`, node internal IPs
+- [ ] Redis publish (snapshot deltas → `kmsvc-redis-master.sqs:6379`)
+- [ ] NetworkPolicy on atlas: egress restricted to kube API, `prometheus-operated.monitoring`, `reasoning-predictor.llm-serving`, `kmsvc-redis-master.sqs`; ingress from `ingress-nginx` only
+- [ ] Container hardening: `runAsNonRoot`, read-only root filesystem, all capabilities dropped, `seccompProfile: RuntimeDefault`
+
+## REFACTOR
+
+- [ ] Run `simplify` skill pass on reducer/DTO code
+- [ ] Confirm no `_ =` on errors, no naked returns, every upstream call carries a `context.Context` (go-error-handling, go-context skills)
+
+## Verify
+
+```bash
+kubectl auth can-i get secrets --as=system:serviceaccount:portfolio:atlas   # no
+go test ./... -run TestRedact -v
+go test ./... -run TestRBAC -v
+go test ./... -run TestSnapshot -v
+```
+
+Next: [03-phase2-topology.md](03-phase2-topology.md)

tasks/03-phase2-topology.md

@@ -0,0 +1,29 @@
+# Phase 2 — Surface B: cluster topology
+
+~3 days. Proves the snapshot + SSE pipeline end to end.
+
+## RED
+
+- [ ] `stream_test.go` — SSE emits a delta within 5s of a pod state change
+- [ ] `topology.test.tsx` — graph re-renders on delta without a full reload
+
+## GREEN
+
+- [ ] `GET /api/topology` — nodes, namespaces, workload summaries; envelope `{"data": {}, "meta": {"snapshotAge", "generation"}}`; capped 256 KB, `meta.truncated: true` on overflow, never a silent drop
+- [ ] `GET /api/stream` — SSE, session cookie, 2 concurrent/IP, `topology` event type; keepalive comment frame every 30s; `Last-Event-ID` supported for resumable deltas
+- [ ] Frontend: React Flow, force layout, node → namespace → workload
+- [ ] Security headers on all responses: CSP (no `unsafe-inline`), `X-Content-Type-Options: nosniff`, `Referrer-Policy: no-referrer`, HSTS; CORS same-origin only
+- [ ] Rate limiting Tier 1 (Cloudflare edge — WAF, Bot Fight Mode, per-IP rules) + Tier 2 (Kong `rate-limiting`, `policy: redis`, generous profile for topology)
+
+## REFACTOR
+
+- [ ] `simplify` pass on SSE handler + React Flow wiring
+
+## Verify
+
+```bash
+# delete a pod, observe graph update in <5s without reloading
+kubectl delete pod <name> -n <ns>
+```
+
+Next: [04-phase3-delivery.md](04-phase3-delivery.md)

tasks/04-phase3-delivery.md

@@ -0,0 +1,31 @@
+# Phase 3 — Surface E: delivery tree
+
+~3 days. Zero new data sources, zero new attack surface, highest signal — reads as platform engineering, not hobby.
+
+## RED
+
+- [ ] `delivery_test.go` — apps group correctly by `sync-wave`; Secret names absent from output (kind+count only); `repoURL` absent from output
+- [ ] `delivery.test.tsx` — 550-node tree renders under frame budget with virtualization on
+
+## GREEN
+
+- [ ] `GET /api/delivery` — Argo apps, wave-grouped (0→8), resource children lazy; capped 256 KB
+- [ ] `GET /api/delivery/{app}/resources` — cursor-paginated at 100 items (prometheus alone has 68 resources today)
+- [ ] Frontend: React Flow, wave columns left→right from `sync-wave` annotations. Click app → side panel with `react-arborist` virtualized resource tree, lazy-loaded children
+- [ ] Live sync animation `OutOfSync → Syncing → Synced` driven by Application watch (reuse Phase 2 SSE `/api/stream`, add `delivery` event type)
+- [ ] Redaction check specific to this surface: 21 `Secret` resources appear in Argo trees today — render kind+count only, never names (includes `sops-secrets`); `status.conditions[].message` echoes raw errors with internal hostnames — emit condition **type** only
+
+## REFACTOR
+
+- [ ] `simplify` pass on wave-grouping + virtualized tree code
+
+## Verify
+
+```bash
+# trigger an Argo sync, observe wave-ordered animation
+argocd app sync homelab-root
+```
+
+Also in scope for this phase: delete fabricated stats in `app/page.tsx` ("40% CPU reduction", "99.2% uptime", "Mission-critical", "60% latency cut") — wire each card to a real number from `/api/topology` or `/api/delivery`, or remove the claim. Five of six landing cards link to routes that don't exist (`/infrastructure`, `/systems`, `/llm`, `/kafka`, `/opensource`) — fix or remove.
+
+Next: [05-phase4-terminal.md](05-phase4-terminal.md)

tasks/05-phase4-terminal.md

@@ -0,0 +1,30 @@
+# Phase 4 — Surface C: terminal
+
+~2 days. First surface accepting user input — injection (A03) is the primary risk here.
+
+## RED
+
+- [ ] `exec_parse_test.go` — fuzz corpus: every non-allowlisted input rejects and performs zero upstream calls
+- [ ] `exec_test.go` — unknown namespace rejects on snapshot membership, not regex
+
+## GREEN
+
+- [ ] `POST /api/exec` — session cookie, 20/min/session; input parses to a closed command enum, anything unmatched rejected before any lookup
+- [ ] Command set: `get nodes`, `get pods <ns>`, `get apps`, `top nodes`, `describe pod <ns> <name>`, `help`
+- [ ] Namespace and resource-name arguments validated by **set membership against current snapshot**, not regex/escaping
+- [ ] No shell, no `exec`, no `kubectl` binary in the container image
+- [ ] Frontend: reuse [components/InteractiveTerminal.tsx](../components/InteractiveTerminal.tsx), wire to `/api/exec`
+- [ ] Structured logging: every rejected `/api/exec` input logged
+
+## REFACTOR
+
+- [ ] `simplify` pass on the enum parser
+
+## Verify
+
+```bash
+# attempt injection payloads against /api/exec; all rejected, all logged
+curl -X POST https://riotpiao.com/api/exec -d '{"cmd":"get pods; rm -rf /"}'
+```
+
+Next: [06-phase5-chat.md](06-phase5-chat.md)

tasks/06-phase5-chat.md

@@ -0,0 +1,46 @@
+# Phase 5 — Surface D: chat + rate limiter
+
+~5 days, one PR. Highest risk, highest cost — ships last, ships with its limiter, never after.
+
+Depends on [00-decisions.md](00-decisions.md) #4 (is chat in scope for v1).
+
+## RED
+
+- [ ] `ratelimit_test.go` — 7th concurrent chat queues rather than reaching vLLM
+- [ ] `disconnect_test.go` — client abort cancels the upstream request
+- [ ] `budget_test.go` — 13th message in 24h returns `429` with `Retry-After`
+- [ ] `injection_test.go` — snapshot content cannot alter system-prompt behaviour
+- [ ] `context_test.go` — history truncation keeps total tokens under 16384
+
+## GREEN
+
+- [ ] `POST /api/chat` — session + Turnstile, 12/day/session, 6 global concurrent, SSE token stream
+- [ ] Rate limiting Tier 3 (atlas): global chat semaphore = 6 (2 of 8 GPU slots kept as operator headroom); queue depth 20 then reject `429`; per-session budget 12 msg/24h; per-request timeout 120s hard server-side; disconnect cancels upstream immediately (`req.Context()` threaded to vLLM request)
+- [ ] Queue position streamed as SSE `{"type":"queue","position":N}`
+- [ ] Prompt injection defenses: system prompt is compile-time constant, unreachable by user input; cluster snapshot digest injected in a delimited block explicitly labelled untrusted data; user message always last; **no tool-calling** — model reads pre-built digest, cannot query anything; `max_tokens: 1500` cap
+- [ ] Context budget (16384 total): system prompt ~300, snapshot digest capped at 2000, `max_tokens` 1500, ~12500 for history, truncated oldest-first
+- [ ] Chat SSE events: `{"type":"reasoning"|"content"|"queue"|"done"|"error"}` — render `reasoning_content` in collapsible block (this is the demo)
+- [ ] Frontend: new chat component — collapsible reasoning block, queue position, streaming tokens
+- [ ] Prometheus metrics: `atlas_chat_concurrent`, `atlas_chat_queue_depth`, `atlas_ratelimit_rejections_total`, `atlas_snapshot_age_seconds`
+- [ ] Alertmanager rule: chat queue saturated > 5 min, snapshot age > 60s
+- [ ] `pnpm audit` + `govulncheck` in CI, fail build on high severity
+
+## REFACTOR
+
+- [ ] `simplify` pass on rate limiter + SSE chat handler
+
+## Verify
+
+```bash
+# load test at 20 concurrent clients
+# GPU sequence usage never exceeds 6, no upstream 5xx, queue drains
+```
+
+## Done — atlas v1 shipped
+
+Success criteria (from PLAN-atlas.md):
+- [ ] Protected services redirect unauthenticated to Authentik (if still applicable post decision #3)
+- [ ] Fabricated stats gone, real numbers or removed
+- [ ] `riotpiao.com` is the only public hostname (I1 held)
+- [ ] Golden redaction test passes against live-cluster fixture
+- [ ] Load test: 20 concurrent clients, GPU usage ≤ 6, no 5xx, queue drains

tasks/README.md

@@ -0,0 +1,32 @@
+# atlas — Task Breakdown
+
+Source of truth: [docs/PLAN-atlas.md](../docs/PLAN-atlas.md), [docs/adr/ADR-0001-atlas-cluster-visualization.md](../docs/adr/ADR-0001-atlas-cluster-visualization.md)
+
+Supersedes: [PLAN.md](../PLAN.md), [IMPLEMENTATION.md](../IMPLEMENTATION.md) (Homarr + Terraform — abandoned)
+
+## Status
+
+Not started. **5 decisions block Phase 1** — see [00-decisions.md](00-decisions.md).
+
+## Phases
+
+| File | Phase | Est. |
+|---|---|---|
+| [00-decisions.md](00-decisions.md) | Blocking decisions (must answer before Phase 1) | — |
+| [01-phase0-unblock.md](01-phase0-unblock.md) | Phase 0 — unblock deployment | — |
+| [02-phase1-atlas-core.md](02-phase1-atlas-core.md) | Phase 1 — atlas core (RBAC, informers, redaction) | ~4d |
+| [03-phase2-topology.md](03-phase2-topology.md) | Phase 2 — Surface B: cluster topology | ~3d |
+| [04-phase3-delivery.md](04-phase3-delivery.md) | Phase 3 — Surface E: delivery tree | ~3d |
+| [05-phase4-terminal.md](05-phase4-terminal.md) | Phase 4 — Surface C: terminal | ~2d |
+| [06-phase5-chat.md](06-phase5-chat.md) | Phase 5 — Surface D: chat + rate limiter | ~5d |
+
+**Total: ~17 working days.**
+
+## Rules carried from the ADR
+
+- I1: `riotpiao.com` is the only public hostname, ever
+- I2: browser never talks to an internal API directly — atlas is the only origin
+- I3: redaction is allowlist-only, enforced by DTO construction
+- I4: no free-form string reaches an internal system (closed enum, snapshot-membership validation)
+- I5: GPU chat concurrency capped at 6 of 8 sequence slots, disconnect cancels upstream immediately
+- TDD: RED (tests named before code) → GREEN (minimal code) → REFACTOR, per phase

tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "jsx": "preserve",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "allowJs": true,
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "next-env.d.ts",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}