Spaces:

GaryLeckey
/

aureon-os

Running

aureon-os / frontend /src /components /generated /AureonGeneratedOperationalConsole.tsx
Deploy Aureon OS (deploy/selfhost stack: nginx edge + fusion API x2 + console + HNC organ + redis + postgres; paper mode) (part 18)
f568a4f verified 2 days ago
Raw History Blame Contribute Delete
34.1 kB
/* Generated by python -m aureon.autonomous.aureon_unified_ui_builder.
 * This component is data-driven. Re-run the builder after manifest or template changes.
 */

import { useEffect, useMemo, useState } from "react";
import { terminalStateUrls } from "@/config/serviceEndpoints";
import {
  Activity,
  AlertTriangle,
  BadgeCheck,
  Brain,
  Calculator,
  Code2,
  Database,
  FileText,
  Gauge,
  LineChart,
  Network,
  Radio,
  RefreshCw,
  Search,
  Server,
  ShieldCheck,
  Sparkles,
  Terminal,
  Zap,
} from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

type JsonMap = Record<string, any>;

const PUBLIC_ENDPOINTS: Record<string, string> = {
  uiSpec: "/aureon_operational_ui_spec.json",
  wake: "/aureon_wake_up_manifest.json",
  organism: "/aureon_organism_runtime_status.json",
  switchboard: "/aureon_autonomous_capability_switchboard.json",
  unification: "/aureon_frontend_unification_plan.json",
  evolution: "/aureon_frontend_evolution_queue.json",
  inventory: "/aureon_saas_system_inventory.json",
  tradeEvidence: "/aureon_cognitive_trade_evidence.json",
  harmonic: "/aureon_harmonic_affect_state.json",
  benchmark: "/aureon_live_cognition_benchmark.json",
  hncProof: "/aureon_hnc_cognitive_proof.json",
};

const RUNTIME_FALLBACKS = terminalStateUrls;

const EXCHANGES = ["kraken", "binance", "alpaca", "capital"];

interface OperationalSnapshot {
  loadedAt: string;
  loading: boolean;
  data: Record<string, JsonMap>;
  runtime: JsonMap | null;
  flight: JsonMap | null;
  reboot: JsonMap | null;
  runtimeEndpoint: string;
  errors: string[];
}

async function fetchJson<T = JsonMap>(url: string, signal?: AbortSignal): Promise<T | null> {
  try {
    const response = await fetch(url, { cache: "no-store", signal });
    if (!response.ok) return null;
    return (await response.json()) as T;
  } catch {
    return null;
  }
}

function uniqueStrings(values: Array<string | undefined>): string[] {
  return Array.from(new Set(values.map((value) => String(value || "").trim()).filter(Boolean)));
}

function asNumber(value: unknown, fallback = 0): number {
  const numeric = Number(value);
  return Number.isFinite(numeric) ? numeric : fallback;
}

function compact(value: unknown): string {
  if (value === null || value === undefined || value === "") return "unavailable";
  const numeric = typeof value === "number" ? value : Number(value);
  if (!Number.isFinite(numeric)) return "unavailable";
  return numeric.toLocaleString();
}

function percent(value: unknown): string {
  if (typeof value === "boolean" || value === null || value === undefined || value === "") return "unavailable";
  const numeric = typeof value === "number" ? value : Number(value);
  if (!Number.isFinite(numeric)) return "unavailable";
  if (numeric <= 1) return `${Math.round(numeric * 100)}%`;
  return `${Math.round(numeric)}%`;
}

function timeLabel(value: unknown): string {
  if (!value) return "pending";
  const date = new Date(String(value));
  if (Number.isNaN(date.getTime())) return String(value);
  return date.toLocaleTimeString();
}

function shortText(value: unknown, fallback = "unknown"): string {
  const text = String(value ?? "").trim();
  return text || fallback;
}

function derivedEndpoint(base: string, suffix: string): string {
  return base.replace(/\/api\/terminal-state$/, suffix);
}

function pillTone(kind: "good" | "warn" | "bad" | "info" | "quiet" = "quiet"): string {
  if (kind === "good") return "border-success/30 bg-success/10 text-success";
  if (kind === "warn") return "border-warning/30 bg-warning/10 text-warning";
  if (kind === "bad") return "border-destructive/30 bg-destructive/10 text-destructive";
  if (kind === "info") return "border-primary/30 bg-primary/10 text-primary";
  return "border-border/60 bg-muted/20 text-muted-foreground";
}

function statusKind(value: unknown): "good" | "warn" | "bad" | "info" | "quiet" {
  const text = String(value ?? "").toLowerCase();
  if (text.includes("blocked") || text.includes("offline") || text.includes("missing") || text.includes("fail")) return "bad";
  if (text.includes("stale") || text.includes("guard") || text.includes("attention") || text.includes("pending")) return "warn";
  if (text.includes("live") || text.includes("ready") || text.includes("fresh") || text.includes("online") || text.includes("clear")) return "good";
  if (text.includes("observe") || text.includes("checking")) return "info";
  return "quiet";
}

function Pill({ label, kind = "quiet" }: { label: string; kind?: "good" | "warn" | "bad" | "info" | "quiet" }) {
  return <span className={`inline-flex min-h-6 items-center rounded-md border px-2 py-0.5 text-[11px] font-medium ${pillTone(kind)}`}>{label}</span>;
}

function Stat({ label, value, icon: Icon, kind = "quiet" }: { label: string; value: string; icon: typeof Activity; kind?: "good" | "warn" | "bad" | "info" | "quiet" }) {
  return (
    <div className="rounded-lg border border-border/50 bg-background/55 p-3">
      <div className="flex items-center justify-between gap-3">
        <div className="text-[11px] uppercase text-muted-foreground">{label}</div>
        <Icon className={`h-4 w-4 ${kind === "good" ? "text-success" : kind === "warn" ? "text-warning" : kind === "bad" ? "text-destructive" : "text-primary"}`} />
      </div>
      <div className="mt-3 truncate text-xl font-semibold">{value}</div>
    </div>
  );
}

function exchangeReady(runtime: JsonMap | null, name: string): boolean {
  if (!runtime) return false;
  return Boolean(
    runtime?.[`${name}_ready`] ||
    runtime?.exchanges?.[`${name}_ready`] ||
    runtime?.exchanges?.[name]?.ready ||
    runtime?.[name]?.ready ||
    runtime?.[name]?.connected
  );
}

function exchangeError(runtime: JsonMap | null, name: string): string {
  return String(runtime?.errors?.[name] || runtime?.exchanges?.[name]?.error || runtime?.[name]?.error || "");
}

function runtimeBlockers(runtime: JsonMap | null, flight: JsonMap | null, reboot: JsonMap | null): string[] {
  const blockers = new Set<string>();
  const watchdog = runtime?.runtime_watchdog || {};
  const checks = flight?.checks || {};
  if (runtime?.booting) blockers.add("runtime_booting");
  if (runtime?.stale || watchdog?.tick_stale) blockers.add("runtime_stale");
  if (runtime?.stale_reason) blockers.add(String(runtime.stale_reason));
  if (watchdog?.tick_stale_reason) blockers.add(String(watchdog.tick_stale_reason));
  if (asNumber(runtime?.combined?.open_positions || runtime?.open_positions) > 0 || checks?.open_positions === true) blockers.add("open_positions");
  if (checks?.downtime_window === false || checks?.downtime_window_open === false) blockers.add("downtime_window_false");
  if (flight?.reboot_advice?.can_reboot_now === false || reboot?.can_reboot_now === false) blockers.add("reboot_deferred");
  return Array.from(blockers).filter(Boolean);
}

async function loadSnapshot(): Promise<OperationalSnapshot> {
  const controller = new AbortController();
  const timeout = window.setTimeout(() => controller.abort(), 2200);
  const errors: string[] = [];
  const data: Record<string, JsonMap> = {};

  try {
    await Promise.all(Object.entries(PUBLIC_ENDPOINTS).map(async ([key, url]) => {
      const payload = await fetchJson<JsonMap>(url, controller.signal);
      if (payload) data[key] = payload;
      else errors.push(`${key} unavailable`);
    }));

    const runtimeEndpoints = uniqueStrings([data.wake?.runtime_feed_url, ...RUNTIME_FALLBACKS]);
    let runtime: JsonMap | null = null;
    let runtimeEndpoint = "";
    for (const endpoint of runtimeEndpoints) {
      const payload = await fetchJson<JsonMap>(endpoint, controller.signal);
      if (payload) {
        runtime = payload;
        runtimeEndpoint = endpoint;
        break;
      }
    }

    const flightUrl = data.wake?.runtime_flight_test_url || (runtimeEndpoint ? derivedEndpoint(runtimeEndpoint, "/api/flight-test") : "");
    const rebootUrl = data.wake?.runtime_reboot_advice_url || (runtimeEndpoint ? derivedEndpoint(runtimeEndpoint, "/api/reboot-advice") : "");
    const flight = flightUrl ? await fetchJson<JsonMap>(flightUrl, controller.signal) : null;
    const reboot = rebootUrl ? await fetchJson<JsonMap>(rebootUrl, controller.signal) : null;

    return {
      loadedAt: new Date().toISOString(),
      loading: false,
      data,
      runtime,
      flight,
      reboot,
      runtimeEndpoint,
      errors,
    };
  } finally {
    window.clearTimeout(timeout);
  }
}

export function AureonGeneratedOperationalConsole() {
  const [snapshot, setSnapshot] = useState<OperationalSnapshot>({
    loadedAt: "",
    loading: true,
    data: {},
    runtime: null,
    flight: null,
    reboot: null,
    runtimeEndpoint: "",
    errors: [],
  });
  const [active, setActive] = useState("live");

  const refresh = async () => {
    setSnapshot((current) => ({ ...current, loading: true }));
    setSnapshot(await loadSnapshot());
  };

  useEffect(() => {
    refresh();
    const timer = window.setInterval(refresh, 8000);
    return () => window.clearInterval(timer);
  }, []);

  const { data, runtime, flight, reboot } = snapshot;
  const uiSpec = data.uiSpec || {};
  const organism = data.organism || {};
  const switchboard = data.switchboard || {};
  const unification = data.unification || {};
  const evolution = data.evolution || {};
  const inventory = data.inventory || {};
  const tradeEvidence = data.tradeEvidence || {};
  const harmonic = data.harmonic || {};
  const benchmark = data.benchmark || {};
  const hncProof = data.hncProof || {};
  const blockers = runtimeBlockers(runtime, flight, reboot);

  const capabilityModes = Array.isArray(switchboard.capability_modes) ? switchboard.capability_modes : [];
  const screens = Array.isArray(unification.canonical_screens) ? unification.canonical_screens : [];
  const workOrders = Array.isArray(evolution.work_orders) ? evolution.work_orders : [];
  const templates = Array.isArray(uiSpec.templates_used) ? uiSpec.templates_used : [];
  const domains = Array.isArray(organism.domains) ? organism.domains : [];
  const blindSpots = Array.isArray(organism.blind_spots) ? organism.blind_spots : [];

  const actionMode = organism.mode || (runtime?.ok === false ? "guarded_observe_plan" : runtime ? "guarded_live_action" : "safe_observation");
  const runtimeConnected = Boolean(runtime);
  const guarded = blockers.length > 0 || runtime?.ok === false || String(actionMode).includes("guard");
  const tradingAllowed = Boolean(organism?.summary?.trading_action_allowed || runtime?.trading_action_allowed);

  const exchangeRows = useMemo(() => EXCHANGES.map((name) => ({
    name,
    ready: exchangeReady(runtime, name),
    error: exchangeError(runtime, name),
    governor: runtime?.api_governor?.exchanges?.[name] || {},
    equity: runtime?.[name]?.equity ?? runtime?.combined?.[`${name}_equity`] ?? runtime?.combined?.[`${name}_equity_gbp`] ?? runtime?.exchanges?.[name]?.equity ?? null,
  })), [runtime]);

  return (
    <section className="mb-5 space-y-4">
      <Card className="overflow-hidden border-primary/20 bg-card/90">
        <CardHeader className="border-b border-border/50 pb-4">
          <div className="flex flex-col justify-between gap-4 lg:flex-row lg:items-start">
            <div>
              <div className="flex flex-wrap items-center gap-2">
                <CardTitle className="flex items-center gap-2 text-xl">
                  <Sparkles className="h-5 w-5 text-primary" />
                  Aureon Designed Live Operations Interface
                </CardTitle>
                <Badge variant={runtimeConnected ? (guarded ? "warning" : "success") : "destructive"}>
                  {runtimeConnected ? (guarded ? "connected guarded" : "connected live") : "runtime offline"}
                </Badge>
                <Badge variant={tradingAllowed ? "success" : "outline"}>{tradingAllowed ? "action path clear" : "action path waiting"}</Badge>
                <Badge variant="outline">{shortText(uiSpec.status, "builder spec pending")}</Badge>
              </div>
              <p className="mt-2 max-w-5xl text-sm text-muted-foreground">
                This surface is generated from Aureon's own frontend inventory, unification plan, evolution queue, capability switchboard, runtime feed, HNC/Auris evidence, and existing dashboard templates.
              </p>
            </div>
            <div className="flex flex-wrap gap-2">
              <Button onClick={refresh} size="sm" variant="outline" disabled={snapshot.loading}>
                <RefreshCw className={`mr-2 h-4 w-4 ${snapshot.loading ? "animate-spin" : ""}`} />
                Refresh
              </Button>
              {snapshot.runtimeEndpoint ? (
                <Button size="sm" variant="ghost" asChild>
                  <a href={snapshot.runtimeEndpoint} target="_blank" rel="noreferrer">
                    <Terminal className="mr-2 h-4 w-4" />
                    Runtime
                  </a>
                </Button>
              ) : null}
            </div>
          </div>
        </CardHeader>
        <CardContent className="space-y-4 p-4">
          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-6">
            <Stat label="runtime" value={runtimeConnected ? (guarded ? "guarded" : "live") : "offline"} icon={Radio} kind={runtimeConnected ? (guarded ? "warn" : "good") : "bad"} />
            <Stat label="exchanges" value={`${exchangeRows.filter((row) => row.ready).length}/4`} icon={LineChart} kind={exchangeRows.every((row) => row.ready) ? "good" : "warn"} />
            <Stat label="capabilities" value={compact(switchboard?.summary?.capability_count)} icon={Brain} kind="info" />
            <Stat label="screens" value={compact(unification?.summary?.screen_count)} icon={Server} kind="info" />
            <Stat label="work orders" value={compact(evolution?.summary?.queue_count)} icon={Code2} kind={asNumber(evolution?.summary?.blocked_count) ? "warn" : "good"} />
            <Stat label="blind spots" value={compact(organism?.summary?.blind_spot_count)} icon={AlertTriangle} kind={asNumber(organism?.summary?.blind_spot_count) ? "warn" : "good"} />
          </div>

          <div className="flex flex-wrap gap-2">
            <Pill label={`mode ${shortText(actionMode)}`} kind={statusKind(actionMode)} />
            <Pill label={`feed ${snapshot.runtimeEndpoint ? snapshot.runtimeEndpoint.replace("http://127.0.0.1:", "") : "not connected"}`} kind={runtimeConnected ? "info" : "bad"} />
            <Pill label={`updated ${timeLabel(runtime?.generated_at || runtime?.dashboard_generated_at || snapshot.loadedAt)}`} kind="quiet" />
            <Pill label={`builder evidence ${shortText(uiSpec.expression_context?.ok, "pending")}`} kind={uiSpec.expression_context?.ok ? "good" : "warn"} />
            {blockers.slice(0, 7).map((blocker) => <Pill key={blocker} label={blocker} kind="warn" />)}
          </div>

          <Tabs value={active} onValueChange={setActive}>
            <ScrollArea className="w-full">
              <TabsList className="h-auto min-w-max justify-start gap-1 bg-muted/40 p-1">
                <TabsTrigger value="live" className="gap-2"><Gauge className="h-4 w-4" />Live</TabsTrigger>
                <TabsTrigger value="trading" className="gap-2"><LineChart className="h-4 w-4" />Trading Mesh</TabsTrigger>
                <TabsTrigger value="mind" className="gap-2"><Brain className="h-4 w-4" />Whole Mind</TabsTrigger>
                <TabsTrigger value="hnc" className="gap-2"><Network className="h-4 w-4" />HNC/Auris</TabsTrigger>
                <TabsTrigger value="operations" className="gap-2"><Database className="h-4 w-4" />Operations</TabsTrigger>
                <TabsTrigger value="build" className="gap-2"><Code2 className="h-4 w-4" />Self-Build</TabsTrigger>
                <TabsTrigger value="evidence" className="gap-2"><FileText className="h-4 w-4" />Evidence</TabsTrigger>
              </TabsList>
            </ScrollArea>

            <TabsContent value="live" className="mt-4">
              <div className="grid gap-4 xl:grid-cols-[0.9fr_1.1fr]">
                <Panel title="Runtime Flight Deck" icon={Activity}>
                  <div className="grid gap-2 sm:grid-cols-2">
                    <Datum label="trading ready" value={String(Boolean(runtime?.trading_ready))} />
                    <Datum label="data ready" value={String(Boolean(runtime?.data_ready))} />
                    <Datum label="stale" value={String(Boolean(runtime?.stale || runtime?.runtime_watchdog?.tick_stale))} />
                    <Datum label="tick age" value={runtime?.runtime_watchdog?.last_tick_age_sec !== undefined ? `${compact(runtime.runtime_watchdog.last_tick_age_sec)}s` : "unknown"} />
                    <Datum label="positions" value={compact(runtime?.combined?.open_positions ?? runtime?.open_positions ?? null)} />
                    <Datum label="runtime minutes" value={compact(runtime?.runtime_minutes)} />
                  </div>
                  <LineList items={[
                    `flight test: ${shortText(flight?.status || flight?.ok, "pending")}`,
                    `reboot decision: ${shortText(reboot?.decision || flight?.reboot_advice?.decision, "pending")}`,
                    `can reboot now: ${shortText(reboot?.can_reboot_now ?? flight?.reboot_advice?.can_reboot_now, "unknown")}`,
                    `preflight: ${shortText(runtime?.preflight_overall, "unknown")}`,
                  ]} />
                </Panel>
                <Panel title="Live Interfaces" icon={Terminal}>
                  <div className="grid gap-2 md:grid-cols-2">
                    {Object.entries(uiSpec.live_interfaces || {}).map(([name, url]) => (
                      <a key={name} href={String(url)} target="_blank" rel="noreferrer" className="rounded-lg border border-border/50 bg-background/50 p-3 text-sm hover:border-primary/50">
                        <div className="text-xs uppercase text-muted-foreground">{name.replace(/_/g, " ")}</div>
                        <div className="mt-1 truncate font-mono text-xs">{String(url)}</div>
                      </a>
                    ))}
                  </div>
                  <LineList items={(organism.status_lines || runtime?.status_lines || ["Waiting for live status."]).slice(0, 8)} />
                </Panel>
              </div>
            </TabsContent>

            <TabsContent value="trading" className="mt-4">
              <div className="grid gap-4 xl:grid-cols-[1fr_0.9fr]">
                <Panel title="Four-Exchange Coverage" icon={LineChart}>
                  <div className="grid gap-3 md:grid-cols-2">
                    {exchangeRows.map((row) => (
                      <div key={row.name} className="rounded-lg border border-border/50 bg-background/50 p-3">
                        <div className="flex items-center justify-between gap-2">
                          <div className="font-semibold capitalize">{row.name}</div>
                          <Pill label={row.ready ? "ready" : "attention"} kind={row.ready ? "good" : "warn"} />
                        </div>
                        <div className="mt-3 grid grid-cols-2 gap-2 text-xs">
                          <Datum label="equity" value={row.equity == null || row.equity === '' ? 'unavailable' : compact(row.equity)} />
                          <Datum label="api use" value={row.governor?.utilization !== undefined ? percent(row.governor.utilization) : "unknown"} />
                        </div>
                        {row.error ? <div className="mt-2 text-xs text-destructive">{row.error}</div> : null}
                      </div>
                    ))}
                  </div>
                </Panel>
                <Panel title="Signal And Intent Path" icon={Zap}>
                  <div className="grid gap-2 sm:grid-cols-2">
                    <Datum label="order intents" value={compact(runtime?.exchange_action_plan?.order_intents_published ?? runtime?.exchange_action_plan?.latest_published?.intent_count ?? null)} />
                    <Datum label="executor sent" value={compact(runtime?.exchange_action_plan?.latest_execution?.submitted_count ?? null)} />
                    <Datum label="executor held" value={compact(runtime?.exchange_action_plan?.latest_execution?.held_count ?? runtime?.exchange_action_plan?.latest_execution?.blocked_count ?? null)} />
                    <Datum label="shadow active" value={compact(runtime?.shadow_trading?.active_shadow_count ?? runtime?.exchange_action_plan?.shadow_trading?.active_shadow_count ?? null)} />
                  </div>
                  <LineList items={[
                    `trade path: ${shortText(runtime?.exchange_action_plan?.trade_path_state, "unknown")}`,
                    `intent mode: ${shortText(runtime?.exchange_action_plan?.mode, "unknown")}`,
                    `cognitive evidence: ${shortText(tradeEvidence.status, "pending")}`,
                    `benchmark: ${shortText(benchmark.status, "pending")}`,
                  ]} />
                </Panel>
              </div>
            </TabsContent>

            <TabsContent value="mind" className="mt-4">
              <div className="grid gap-4 xl:grid-cols-[1fr_0.9fr]">
                <Panel title="Autonomous Capability Modes" icon={Brain}>
                  <ScrollArea className="h-[390px] pr-3">
                    <div className="space-y-2">
                      {capabilityModes.map((mode: JsonMap) => (
                        <div key={String(mode.id)} className="rounded-lg border border-border/50 bg-background/50 p-3">
                          <div className="flex flex-wrap items-start justify-between gap-2">
                            <div>
                              <div className="font-medium">{shortText(mode.title)}</div>
                              <div className="mt-1 text-xs text-muted-foreground">{shortText(mode.authority_level).replace(/_/g, " ")}</div>
                            </div>
                            <div className="flex flex-wrap gap-1">
                              <Pill label={shortText(mode.domain)} kind="quiet" />
                              <Pill label={shortText(mode.status)} kind={statusKind(mode.status)} />
                              <Pill label={mode.autonomous_allowed ? "autonomous" : "manual"} kind={mode.autonomous_allowed ? "good" : "warn"} />
                            </div>
                          </div>
                          <div className="mt-2 flex flex-wrap gap-1">
                            {(mode.systems || []).slice(0, 7).map((system: string) => <Pill key={system} label={system} kind="info" />)}
                          </div>
                        </div>
                      ))}
                    </div>
                  </ScrollArea>
                </Panel>
                <Panel title="Mind Hub And Self-Report" icon={Radio}>
                  <LineList items={[
                    `mind hub: ${shortText(data.wake?.mind_hub_url || "http://127.0.0.1:13002/api/thoughts")}`,
                    `voice profile: ${shortText(uiSpec.expression_context?.voice_summary, "pending")}`,
                    `runtime translation: ${shortText(uiSpec.expression_context?.runtime_summary, "pending")}`,
                    `source count: ${compact(uiSpec.expression_context?.source_count)}`,
                  ]} />
                  <div className="mt-4 grid gap-2">
                    {domains.slice(0, 8).map((domain: JsonMap) => (
                      <div key={String(domain.id)} className="flex items-center justify-between rounded-lg border border-border/50 bg-background/50 px-3 py-2 text-sm">
                        <span>{shortText(domain.label || domain.id)}</span>
                        <Pill label={shortText(domain.status || domain.freshness)} kind={statusKind(domain.status || domain.freshness)} />
                      </div>
                    ))}
                  </div>
                </Panel>
              </div>
            </TabsContent>

            <TabsContent value="hnc" className="mt-4">
              <div className="grid gap-4 xl:grid-cols-3">
                <Panel title="HNC Proof Flow" icon={Network}>
                  <LineList items={[
                    `status: ${shortText(hncProof.status, "pending")}`,
                    `steps: ${compact(hncProof.summary?.passed_count || hncProof.passed_count)}/${compact(hncProof.summary?.step_count || hncProof.step_count)}`,
                    `master formula: ${percent(hncProof.master_formula?.score)}`,
                    `Auris coherence: ${percent(hncProof.auris_nodes?.coherence)}`,
                  ]} />
                </Panel>
                <Panel title="Harmonic Affect" icon={Sparkles}>
                  <div className="grid gap-2">
                    <Datum label="phase" value={shortText(harmonic.affect_phase || harmonic.phase)} />
                    <Datum label="coherence" value={percent(harmonic.hnc_coherence_score || harmonic.coherence)} />
                    <Datum label="frequency" value={harmonic.resonance_frequency_hz ? `${harmonic.resonance_frequency_hz} Hz` : "unknown"} />
                    <Datum label="inner peace candidate" value={String(Boolean(harmonic.inner_peace_candidate))} />
                  </div>
                </Panel>
                <Panel title="Cognitive Trade Evidence" icon={BadgeCheck}>
                  <LineList items={[
                    `status: ${shortText(tradeEvidence.status, "pending")}`,
                    `runtime stale: ${shortText(tradeEvidence.attention_runtime_stale || tradeEvidence.runtime_stale, "unknown")}`,
                    `signals: ${compact(tradeEvidence.summary?.signal_count || tradeEvidence.signal_count)}`,
                    `validated: ${compact(tradeEvidence.summary?.validated_count || tradeEvidence.validated_count)}`,
                  ]} />
                </Panel>
              </div>
            </TabsContent>

            <TabsContent value="operations" className="mt-4">
              <div className="grid gap-4 xl:grid-cols-[1fr_0.9fr]">
                <Panel title="Whole-System Capability Map" icon={Database}>
                  <div className="grid gap-2 md:grid-cols-2">
                    {(uiSpec.capability_labels || []).map((label: string) => (
                      <div key={label} className="flex items-center gap-2 rounded-lg border border-border/50 bg-background/50 px-3 py-2 text-sm">
                        <ShieldCheck className="h-4 w-4 text-success" />
                        <span>{label}</span>
                      </div>
                    ))}
                  </div>
                </Panel>
                <Panel title="Canonical Screens" icon={Server}>
                  <ScrollArea className="h-[330px] pr-3">
                    <div className="space-y-2">
                      {screens.map((screen: JsonMap) => (
                        <div key={String(screen.id)} className="rounded-lg border border-border/50 bg-background/50 p-3">
                          <div className="flex items-center justify-between gap-2">
                            <div className="font-medium">{shortText(screen.title)}</div>
                            <Pill label={`${compact(screen.source_surface_count)} sources`} kind="info" />
                          </div>
                          <div className="mt-1 text-xs text-muted-foreground">{shortText(screen.goal)}</div>
                        </div>
                      ))}
                    </div>
                  </ScrollArea>
                </Panel>
              </div>
            </TabsContent>

            <TabsContent value="build" className="mt-4">
              <div className="grid gap-4 xl:grid-cols-[0.95fr_1.05fr]">
                <Panel title="Aureon UI Builder Evidence" icon={Code2}>
                  <div className="grid gap-2 sm:grid-cols-2">
                    <Datum label="templates read" value={compact(uiSpec.capability_coverage?.template_count)} />
                    <Datum label="surfaces counted" value={compact(uiSpec.capability_coverage?.surface_count)} />
                    <Datum label="ready adapters" value={compact(uiSpec.capability_coverage?.ready_adapter_count)} />
                    <Datum label="blocked work" value={compact(uiSpec.capability_coverage?.blocked_work_order_count)} />
                  </div>
                  <LineList items={(uiSpec.notes || []).slice(0, 6)} />
                </Panel>
                <Panel title="Evolution Queue" icon={Code2}>
                  <ScrollArea className="h-[330px] pr-3">
                    <div className="space-y-2">
                      {workOrders.slice(0, 12).map((order: JsonMap) => (
                        <div key={String(order.id)} className="rounded-lg border border-border/50 bg-background/50 p-3">
                          <div className="flex flex-wrap items-start justify-between gap-2">
                            <div>
                              <div className="font-medium">{shortText(order.title)}</div>
                              <div className="mt-1 font-mono text-[11px] text-muted-foreground">{shortText(order.source_path)}</div>
                            </div>
                            <div className="flex flex-wrap gap-1">
                              <Pill label={`P${compact(order.priority)}`} kind="info" />
                              <Pill label={shortText(order.status)} kind={statusKind(order.status)} />
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </ScrollArea>
                </Panel>
              </div>
            </TabsContent>

            <TabsContent value="evidence" className="mt-4">
              <div className="grid gap-4 xl:grid-cols-[0.9fr_1.1fr]">
                <Panel title="Manifest Evidence" icon={FileText}>
                  <div className="grid gap-2 md:grid-cols-2">
                    {Object.entries(PUBLIC_ENDPOINTS).map(([key, url]) => (
                      <div key={key} className="rounded-lg border border-border/50 bg-background/50 p-3">
                        <div className="flex items-center justify-between gap-2">
                          <div className="font-mono text-xs">{url}</div>
                          <Pill label={data[key] ? "loaded" : "missing"} kind={data[key] ? "good" : "warn"} />
                        </div>
                        <div className="mt-1 text-xs text-muted-foreground">{shortText(data[key]?.status || data[key]?.generated_at, "no status")}</div>
                      </div>
                    ))}
                  </div>
                </Panel>
                <Panel title="Templates Aureon Used" icon={Search}>
                  <ScrollArea className="h-[360px] pr-3">
                    <div className="space-y-2">
                      {templates.slice(0, 32).map((template: string) => (
                        <div key={template} className="rounded-lg border border-border/50 bg-background/50 px-3 py-2 font-mono text-xs">
                          {template}
                        </div>
                      ))}
                    </div>
                  </ScrollArea>
                </Panel>
              </div>
            </TabsContent>
          </Tabs>

          {snapshot.errors.length ? (
            <div className="rounded-lg border border-warning/30 bg-warning/10 p-3 text-xs text-warning">
              {snapshot.errors.slice(0, 8).join(" | ")}
            </div>
          ) : null}
        </CardContent>
      </Card>
    </section>
  );
}

export const AureonCodingOrganismConsole = AureonGeneratedOperationalConsole;

function Panel({ title, icon: Icon, children }: { title: string; icon: typeof Activity; children: React.ReactNode }) {
  return (
    <div className="rounded-lg border border-border/50 bg-muted/10">
      <div className="flex items-center gap-2 border-b border-border/50 px-4 py-3">
        <Icon className="h-4 w-4 text-primary" />
        <div className="text-sm font-semibold">{title}</div>
      </div>
      <div className="space-y-4 p-4">{children}</div>
    </div>
  );
}

function Datum({ label, value }: { label: string; value: string }) {
  return (
    <div className="rounded-md border border-border/40 bg-background/45 p-2">
      <div className="text-[10px] uppercase text-muted-foreground">{label}</div>
      <div className="mt-1 truncate font-mono text-xs font-semibold">{value}</div>
    </div>
  );
}

function LineList({ items }: { items: unknown[] }) {
  const lines = (items || []).map((item) => String(item || "").trim()).filter(Boolean);
  return (
    <div className="space-y-2">
      {lines.length ? lines.map((line) => (
        <div key={line} className="rounded-md border border-border/40 bg-background/45 px-3 py-2 text-sm">
          {line}
        </div>
      )) : (
        <div className="rounded-md border border-border/40 bg-background/45 px-3 py-2 text-sm text-muted-foreground">Waiting for evidence.</div>
      )}
    </div>
  );
}