{"path":"apps/dashboard/src/pages/oracle.tsx","size":9233,"locked":false,"binary":false,"truncated":false,"content":"import { RefreshCw, Activity, Cpu, Network, BarChart3 } from \"lucide-react\";\nimport { useGetOracleHealth, useGetStats } from \"@workspace/api-client-react\";\nimport { formatLamports } from \"@/lib/format\";\n\nfunction StatusOrb({ ok, loading }: { ok: boolean | null; loading: boolean }) {\n  if (loading) return (\n    <div className=\"relative\">\n      <div className=\"w-3 h-3 rounded-full bg-white/20 animate-pulse\" />\n    </div>\n  );\n  if (ok === null) return (\n    <div className=\"relative\">\n      <div className=\"absolute inset-0 rounded-full bg-amber-400/30 animate-ping\" />\n      <div className=\"w-3 h-3 rounded-full bg-amber-400\" />\n    </div>\n  );\n  return (\n    <div className=\"relative\">\n      {ok && <div className=\"absolute inset-0 rounded-full bg-emerald-400/40 animate-ping\" />}\n      <div className={`w-3 h-3 rounded-full ${ok ? \"bg-emerald-400 shadow-[0_0_10px_rgba(20,241,149,0.6)]\" : \"bg-rose-500 shadow-[0_0_10px_rgba(239,68,68,0.5)]\"}`} />\n    </div>\n  );\n}\n\nfunction GlassPanel({\n  title,\n  icon: Icon,\n  children,\n}: {\n  title: string;\n  icon?: React.ElementType;\n  children: React.ReactNode;\n}) {\n  return (\n    <div className=\"glass rounded-2xl overflow-hidden\">\n      <div className=\"px-5 py-3.5 border-b border-white/[0.05] bg-white/[0.02] flex items-center gap-2.5\">\n        {Icon && <Icon className=\"w-3.5 h-3.5 text-white/30\" />}\n        <span className=\"text-[9px] font-mono text-white/30 uppercase tracking-[0.15em]\">{title}</span>\n      </div>\n      <div className=\"divide-y divide-white/[0.04]\">{children}</div>\n    </div>\n  );\n}\n\nfunction Row({\n  label,\n  value,\n  accent,\n  mono = true,\n}: {\n  label: string;\n  value: React.ReactNode;\n  accent?: boolean;\n  mono?: boolean;\n}) {\n  return (\n    <div className=\"flex flex-col sm:flex-row sm:items-start gap-1.5 sm:gap-6 px-5 py-3.5 group hover:bg-white/[0.02] transition-colors\">\n      <span className=\"text-[9px] font-mono text-white/25 uppercase tracking-widest shrink-0 sm:w-36 sm:pt-0.5\">\n        {label}\n      </span>\n      <span\n        className={`text-xs break-all leading-relaxed ${mono ? \"font-mono\" : \"\"} ${\n          accent ? \"text-emerald-400\" : \"text-white/60\"\n        }`}\n      >\n        {value}\n      </span>\n    </div>\n  );\n}\n\nexport default function Oracle() {\n  const {\n    data: health,\n    isLoading: healthLoading,\n    error: healthError,\n    refetch,\n    isFetching,\n  } = useGetOracleHealth({\n    query: { refetchInterval: 15_000, queryKey: [\"oracle-health\"] },\n  });\n  const { data: stats } = useGetStats();\n\n  const isUp = health?.status === \"ok\" || health?.status === \"healthy\";\n  const isUnreachable = !!healthError || health?.status === \"unreachable\";\n\n  const statusLabel = healthLoading\n    ? \"Checking…\"\n    : isUnreachable\n    ? \"Unreachable\"\n    : isUp\n    ? \"Online\"\n    : \"Degraded\";\n\n  return (\n    <div className=\"flex-1 flex flex-col\">\n      {/* Header */}\n      <div className=\"relative px-5 md:px-8 py-6 md:py-7 border-b border-white/[0.05] overflow-hidden\">\n        <div className=\"absolute inset-0 bg-gradient-to-r from-purple-500/[0.03] via-transparent to-emerald-500/[0.02]\" />\n        <div className=\"relative flex items-center justify-between gap-4\">\n          <div>\n            <h1 className=\"text-2xl md:text-3xl font-bold tracking-tight text-white\">Oracle Status</h1>\n            <p className=\"text-[10px] text-white/30 font-mono mt-1\">\n              AI consensus middleware · Gemini + Claude dual-model verification\n            </p>\n          </div>\n          <button\n            onClick={() => refetch()}\n            disabled={isFetching}\n            className=\"group flex items-center gap-2 px-4 py-2.5 text-xs font-mono glass rounded-xl text-white/40 hover:text-white/80 hover:border-white/15 active:scale-[0.97] disabled:opacity-40 disabled:cursor-not-allowed transition-all duration-200\"\n          >\n            <RefreshCw className={`w-3.5 h-3.5 ${isFetching ? \"animate-spin\" : \"group-hover:rotate-180 transition-transform duration-300\"}`} />\n            <span className=\"hidden sm:inline\">Refresh</span>\n          </button>\n        </div>\n      </div>\n\n      <div className=\"flex-1 overflow-y-auto p-5 md:p-8\">\n        <div className=\"max-w-2xl mx-auto space-y-5\">\n\n          {/* Big status card */}\n          <div className={`relative glass rounded-2xl overflow-hidden transition-all duration-500 ${\n            isUp ? \"hover:shadow-[0_8px_40px_rgba(20,241,149,0.1)]\" : \"\"\n          }`}>\n            {isUp && <div className=\"absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-emerald-500/40 to-transparent\" />}\n            {isUnreachable && <div className=\"absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-rose-500/40 to-transparent\" />}\n\n            <div className=\"px-5 py-3.5 border-b border-white/[0.05] bg-white/[0.02] flex items-center justify-between\">\n              <div className=\"flex items-center gap-2.5\">\n                <Activity className=\"w-3.5 h-3.5 text-white/30\" />\n                <span className=\"text-[9px] font-mono text-white/30 uppercase tracking-[0.15em]\">Oracle Middleware</span>\n              </div>\n              <div className=\"flex items-center gap-2.5\">\n                <StatusOrb\n                  ok={healthLoading ? null : isUnreachable ? false : isUp ? true : null}\n                  loading={healthLoading}\n                />\n                <span className={`text-[10px] font-mono font-semibold uppercase tracking-wide ${\n                  healthLoading ? \"text-white/25\"\n                  : isUnreachable ? \"text-rose-400\"\n                  : isUp ? \"text-emerald-400\"\n                  : \"text-amber-400\"\n                }`}>\n                  {statusLabel}\n                </span>\n              </div>\n            </div>\n            <div className=\"divide-y divide-white/[0.04]\">\n              <Row label=\"Status\" value={statusLabel} accent={isUp} />\n              <Row\n                label=\"Pending Jobs\"\n                value={healthLoading ? \"—\" : (health?.pendingJobs?.toString() ?? \"—\")}\n                accent={(health?.pendingJobs ?? 0) > 0}\n              />\n              <Row\n                label=\"Last Checked\"\n                value={health?.timestamp ? new Date(health.timestamp).toLocaleString() : \"—\"}\n              />\n            </div>\n          </div>\n\n          {/* Offline banner */}\n          {isUnreachable && (\n            <div className=\"glass rounded-2xl overflow-hidden border-rose-500/20\">\n              <div className=\"px-5 py-3.5 border-b border-rose-500/20 bg-rose-500/[0.06]\">\n                <p className=\"text-xs font-mono font-bold text-rose-400\">Oracle not reachable</p>\n              </div>\n              <div className=\"p-5 space-y-3\">\n                <p className=\"text-xs font-mono text-rose-400/60\">\n                  Start the oracle middleware to enable AI verification:\n                </p>\n                <pre className=\"bg-black/40 rounded-xl px-4 py-4 text-[10px] font-mono text-white/40 overflow-x-auto leading-relaxed border border-white/[0.05]\">\n{`cd oracle\nnpm install\ncp .env.example .env\n# Fill SOLANA_RPC_URL, PROGRAM_ID,\n# ORACLE_PRIVATE_KEY, HELIUS_GRPC_ENDPOINT,\n# HELIUS_API_KEY, GEMINI_API_KEY,\n# ANTHROPIC_API_KEY\nnpm run dev`}\n                </pre>\n              </div>\n            </div>\n          )}\n\n          {/* Protocol info */}\n          <GlassPanel title=\"Protocol\" icon={Network}>\n            <Row label=\"Program ID\" value=\"52yt1gCbPeiKP4JYjUVKmMJSgBMMcUx8xRGqozMKX2Mu\" accent />\n            <Row label=\"Network\" value=\"Solana Devnet\" />\n            <Row label=\"Framework\" value=\"Anchor 0.30 / SBF\" />\n            <Row label=\"PDA Seeds\" value='\"gig-escrow\" (escrow)  ·  \"vault\" (vault)' />\n          </GlassPanel>\n\n          {/* Consensus thresholds */}\n          <GlassPanel title=\"Consensus Thresholds\" icon={Cpu}>\n            <Row label=\"Release\" value=\"Both models ≥ 0.80 approval score\" accent />\n            <Row label=\"Refund\" value=\"Both models ≥ 0.75 rejection score\" />\n            <Row label=\"Escalate\" value=\"Divergent scores → human arbitration\" />\n            <Row label=\"Models\" value=\"Gemini (Google) + Claude (Anthropic) — no knowledge sharing\" />\n          </GlassPanel>\n\n          {/* Oracle endpoints */}\n          <GlassPanel title=\"Oracle Endpoints\" icon={Activity}>\n            <Row label=\"GET /health\" value=\"Liveness + pending job count\" />\n            <Row label=\"GET /jobs/:id\" value=\"Fetch tracked job state\" />\n            <Row label=\"POST /submit\" value=\"Trigger AI verification for a deliverable\" />\n          </GlassPanel>\n\n          {/* Protocol stats */}\n          {stats && (\n            <GlassPanel title=\"Protocol Stats\" icon={BarChart3}>\n              <Row label=\"Total Jobs\" value={stats.total.toString()} />\n              <Row label=\"Pending\" value={stats.pending.toString()} />\n              <Row label=\"Completed\" value={stats.completed.toString()} accent />\n              <Row label=\"Cancelled\" value={stats.cancelled.toString()} />\n              <Row\n                label=\"Escrowed SOL\"\n                value={`◎ ${formatLamports(stats.totalEscrowedLamports)}`}\n                accent\n              />\n            </GlassPanel>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n"}