Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |
| <meta name="description" content="Interactive map of the runtime infrastructure behind Super Intelligence Agents."> | |
| <title>Agent Runtime Map</title> | |
| <style> | |
| :root{ | |
| --bg:#f6fbff;--panel:#fff;--line:#d2e2ee;--text:#102033;--muted:#647b90; | |
| --cyan:#00b8e6;--blue:#3477ff;--violet:#755cff;--soft:#eef7ff; | |
| } | |
| *{box-sizing:border-box} | |
| body{ | |
| margin:0; | |
| background: | |
| radial-gradient(circle at 13% 0,rgba(0,184,230,.15),transparent 28%), | |
| radial-gradient(circle at 90% 0,rgba(117,92,255,.11),transparent 25%), | |
| var(--bg); | |
| color:var(--text); | |
| font:15px/1.55 Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; | |
| } | |
| .wrap{max-width:1200px;margin:auto;padding:0 22px} | |
| .hero{text-align:center;padding:62px 0 26px} | |
| .kicker{display:inline-block;border:1px solid #bddce8;border-radius:999px;padding:7px 12px;background:#ffffffd9;color:#1687a8;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.1em} | |
| h1{font-size:clamp(44px,8vw,76px);line-height:1;margin:18px 0 12px;letter-spacing:-.055em} | |
| .grad{background:linear-gradient(90deg,var(--cyan),var(--blue),var(--violet));background-clip:text;-webkit-background-clip:text;color:transparent} | |
| .hero p{max-width:820px;margin:auto;color:var(--muted);font-size:18px} | |
| .runtime{ | |
| display:grid;grid-template-columns:repeat(6,1fr);gap:9px;padding:18px 0 22px | |
| } | |
| .runtime button{ | |
| min-height:78px;border:1px solid var(--line);border-radius:14px;background:#fff; | |
| color:var(--text);padding:10px;text-align:left;cursor:pointer | |
| } | |
| .runtime button b{display:block;font-size:11px} | |
| .runtime button span{display:block;color:var(--muted);font-size:9px;margin-top:3px} | |
| .runtime button.on{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,184,230,.1);background:#f2fbff} | |
| .layout{display:grid;grid-template-columns:1.12fr .88fr;gap:15px;padding-bottom:50px} | |
| .panel{border:1px solid var(--line);border-radius:18px;background:#ffffffed;padding:18px;box-shadow:0 18px 44px rgba(38,76,112,.08)} | |
| .ey{font-size:10px;color:#1687a8;font-weight:900;text-transform:uppercase;letter-spacing:.08em} | |
| h2{margin:3px 0 7px;font-size:25px;letter-spacing:-.03em} | |
| .desc{color:var(--muted);font-size:13px} | |
| .flow{margin:16px 0;padding:15px;border:1px solid #d6e6ef;border-radius:14px;background:#f9fcff;display:flex;align-items:center;gap:7px;flex-wrap:wrap} | |
| .node{border:1px solid #bfd9e6;border-radius:9px;background:#fff;padding:8px 10px;font-size:10px;font-weight:900} | |
| .node.focus{border-color:var(--violet);background:#f4f1ff} | |
| .arrow{color:var(--cyan);font-weight:900} | |
| .cards{display:grid;grid-template-columns:repeat(2,1fr);gap:9px} | |
| .card{border:1px solid #d5e4ed;border-radius:12px;background:#fbfdff;padding:11px} | |
| .card b{display:block;font-size:11px}.card span{font-size:10px;color:var(--muted)} | |
| .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} | |
| .tag{border:1px solid #cfe0eb;border-radius:999px;background:#f6fbff;padding:5px 7px;font-size:10px;color:#50697d} | |
| .metric{margin:11px 0} | |
| .mt{display:flex;justify-content:space-between;font-size:11px;font-weight:800} | |
| .bar{height:7px;background:#e6eef4;border-radius:99px;overflow:hidden;margin-top:5px} | |
| .fill{height:100%;background:linear-gradient(90deg,var(--cyan),var(--blue),var(--violet))} | |
| .failure{margin-top:14px;padding:12px;border:1px solid #e3d9f6;border-radius:12px;background:#fbf8ff} | |
| .failure b{display:block;font-size:11px} | |
| .failure span{font-size:10px;color:var(--muted)} | |
| .note{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);color:var(--muted);font-size:11px} | |
| footer{border-top:1px solid var(--line);padding:28px 0 44px;color:var(--muted);font-size:13px} | |
| footer strong{color:var(--text)} | |
| @media(max-width:980px){.runtime{grid-template-columns:repeat(3,1fr)}.layout{grid-template-columns:1fr}} | |
| @media(max-width:560px){.runtime{grid-template-columns:repeat(2,1fr)}.cards{grid-template-columns:1fr}} | |
| </style> | |
| </head> | |
| <body> | |
| <header class="hero"> | |
| <div class="wrap"> | |
| <span class="kicker">Super Intelligence Agent Infrastructure</span> | |
| <h1>Agent Runtime <span class="grad">Map</span></h1> | |
| <p>Explore the runtime layers that turn models into reliable, observable and controllable advanced agents.</p> | |
| </div> | |
| </header> | |
| <main class="wrap"> | |
| <section class="runtime" id="runtime"></section> | |
| <section class="layout"> | |
| <div class="panel"> | |
| <div class="ey" id="category"></div> | |
| <h2 id="name"></h2> | |
| <div class="desc" id="desc"></div> | |
| <div class="flow" id="flow"></div> | |
| <div class="cards" id="cards"></div> | |
| <div class="ey" style="margin-top:16px">Dependencies</div> | |
| <div class="tags" id="deps"></div> | |
| </div> | |
| <aside class="panel"> | |
| <div class="ey">Operational profile</div> | |
| <h2 style="font-size:21px">Runtime importance</h2> | |
| <div class="desc">Conceptual profile for production-grade advanced agents.</div> | |
| <div id="metrics"></div> | |
| <div class="failure"> | |
| <b>Typical failure mode</b> | |
| <span id="failure"></span> | |
| </div> | |
| <div class="note"> | |
| Agent Runtime Map is a vendor-neutral educational reference. Scores are conceptual, not benchmarks. | |
| </div> | |
| </aside> | |
| </section> | |
| </main> | |
| <footer> | |
| <div class="wrap"> | |
| <strong>Agent Runtime Map</strong> — an independent Hugging Face Space.<br> | |
| Collaboration and partnerships: <strong>agenten@magenta.de</strong> | |
| </div> | |
| </footer> | |
| <script> | |
| const layers = [ | |
| { | |
| n:"Identity",cat:"Access", | |
| d:"Establishes who initiated the task, which agent is acting and which credentials apply.", | |
| f:["User","Identity","Agent","Credential Context"], | |
| cards:[ | |
| ["Core function","Bind users, agents and service identities to execution."], | |
| ["Why it matters","Permissions and auditability depend on reliable identity."], | |
| ["Evaluation","Identity continuity, credential scope and attribution."], | |
| ["SI Agent role","Keeps long-running actions tied to explicit authority."] | |
| ], | |
| deps:["Authentication","Credentials","Audit"], | |
| m:{ProductionImportance:96,SecurityImpact:100,LongHorizonImpact:90,Verifiability:98}, | |
| fail:"Identity is lost or confused across tools, users or sub-agents." | |
| }, | |
| { | |
| n:"Permissions",cat:"Control", | |
| d:"Defines what resources and actions the agent is authorized to access.", | |
| f:["Identity","Policy","Permission Check","Approve","Action"], | |
| cards:[ | |
| ["Core function","Enforce least-privilege access."], | |
| ["Why it matters","Capability should not imply unrestricted authority."], | |
| ["Evaluation","Violation rate, escalation quality and scope correctness."], | |
| ["SI Agent role","Constrains autonomy as capability grows."] | |
| ], | |
| deps:["Identity","Authorization","Policy Engine","Audit Logs"], | |
| m:{ProductionImportance:100,SecurityImpact:100,LongHorizonImpact:97,Verifiability:100}, | |
| fail:"The agent can perform actions outside the intended scope." | |
| }, | |
| { | |
| n:"Controller",cat:"Execution", | |
| d:"Manages the lifecycle of the task and decides when execution continues, retries, escalates or stops.", | |
| f:["Start","Run","Monitor","Retry / Escalate","Stop"], | |
| cards:[ | |
| ["Core function","Task lifecycle, limits, retries and termination."], | |
| ["Why it matters","Prevents unbounded or unmanaged execution."], | |
| ["Evaluation","Completion, stopping quality and retry behavior."], | |
| ["SI Agent role","Acts as the operational backbone of the runtime."] | |
| ], | |
| deps:["State","Policies","Timeouts","Budgets"], | |
| m:{ProductionImportance:100,SecurityImpact:86,LongHorizonImpact:100,Verifiability:88}, | |
| fail:"Execution continues too long, stops too early or loops without progress." | |
| }, | |
| { | |
| n:"Memory & State",cat:"State", | |
| d:"Maintains persistent task context, checkpoints, history and structured memory.", | |
| f:["Observe","Store","Retrieve","Update","Checkpoint"], | |
| cards:[ | |
| ["Core function","Preserve execution state across many steps."], | |
| ["Why it matters","Long-running agents cannot rely only on context windows."], | |
| ["Evaluation","Freshness, consistency, recovery and provenance."], | |
| ["SI Agent role","Supports continuity across long-horizon workflows."] | |
| ], | |
| deps:["Database","Retrieval","Provenance","Checkpointing"], | |
| m:{ProductionImportance:96,SecurityImpact:80,LongHorizonImpact:100,Verifiability:82}, | |
| fail:"The runtime restores stale or incomplete state and the agent acts on the wrong context." | |
| }, | |
| { | |
| n:"Model Routing",cat:"Intelligence", | |
| d:"Selects the best model for each task based on capability, latency, cost, modality and policy.", | |
| f:["Task","Classify","Route","Model","Result"], | |
| cards:[ | |
| ["Core function","Dynamic selection of models and providers."], | |
| ["Why it matters","One model rarely optimizes every objective."], | |
| ["Evaluation","Routing accuracy, cost, latency and fallback quality."], | |
| ["SI Agent role","Combines specialized capabilities into one system."] | |
| ], | |
| deps:["Model Registry","Evaluation","Inference","Fallbacks"], | |
| m:{ProductionImportance:90,SecurityImpact:62,LongHorizonImpact:88,Verifiability:86}, | |
| fail:"A difficult task is routed to a model that is cheap or fast but insufficiently capable." | |
| }, | |
| { | |
| n:"Tool Registry",cat:"Action", | |
| d:"Defines available tools, schemas, credentials, policies and execution constraints.", | |
| f:["Discover","Select","Authorize","Call","Parse"], | |
| cards:[ | |
| ["Core function","Structured access to external capabilities."], | |
| ["Why it matters","Tool metadata determines safe and correct use."], | |
| ["Evaluation","Call validity, tool selection and failure rate."], | |
| ["SI Agent role","Connects reasoning to external systems."] | |
| ], | |
| deps:["Interoperability","Schemas","Credentials","Rate Limits"], | |
| m:{ProductionImportance:95,SecurityImpact:93,LongHorizonImpact:92,Verifiability:94}, | |
| fail:"The right tool exists but cannot be discovered, authorized or called correctly." | |
| }, | |
| { | |
| n:"Orchestration",cat:"Coordination", | |
| d:"Coordinates models, tools, agents, verifiers and workflows across the execution graph.", | |
| f:["Task","Route","Coordinate","Merge","Continue"], | |
| cards:[ | |
| ["Core function","Manage dependencies and distributed work."], | |
| ["Why it matters","Advanced systems contain many specialized components."], | |
| ["Evaluation","Coordination efficiency, duplicate work and routing quality."], | |
| ["SI Agent role","Turns components into a coherent agent system."] | |
| ], | |
| deps:["Agents","Workflow Engine","Routing","Interoperability"], | |
| m:{ProductionImportance:97,SecurityImpact:72,LongHorizonImpact:99,Verifiability:84}, | |
| fail:"Components execute in the wrong order or duplicate work." | |
| }, | |
| { | |
| n:"Verification",cat:"Reliability", | |
| d:"Checks outputs, actions and intermediate states before they are accepted.", | |
| f:["Output","Check","Compare","Approve","Continue"], | |
| cards:[ | |
| ["Core function","Independent correctness checks."], | |
| ["Why it matters","Small errors compound across long workflows."], | |
| ["Evaluation","Coverage, false acceptance and test success."], | |
| ["SI Agent role","Creates trust gates before consequential actions."] | |
| ], | |
| deps:["Tests","Critics","External Tools","Human Review"], | |
| m:{ProductionImportance:100,SecurityImpact:90,LongHorizonImpact:100,Verifiability:100}, | |
| fail:"A wrong result is accepted and becomes input to later steps." | |
| }, | |
| { | |
| n:"Observability",cat:"Operations", | |
| d:"Captures traces, logs, metrics, tool calls, costs, errors and routing decisions.", | |
| f:["Execute","Trace","Measure","Inspect","Improve"], | |
| cards:[ | |
| ["Core function","Make execution visible and auditable."], | |
| ["Why it matters","Invisible autonomous systems are difficult to operate."], | |
| ["Evaluation","Trace completeness, debugging speed and audit coverage."], | |
| ["SI Agent role","Provides operational understanding of complex behavior."] | |
| ], | |
| deps:["Tracing","Logs","Metrics","Audit"], | |
| m:{ProductionImportance:96,SecurityImpact:82,LongHorizonImpact:96,Verifiability:100}, | |
| fail:"The system fails but there is not enough information to reconstruct what happened." | |
| }, | |
| { | |
| n:"Recovery",cat:"Resilience", | |
| d:"Chooses how to respond to failure through retry, fallback, checkpoint restore, replanning or escalation.", | |
| f:["Failure","Diagnose","Retry / Fallback","Verify","Resume"], | |
| cards:[ | |
| ["Core function","Restore progress after failure."], | |
| ["Why it matters","Long-horizon execution guarantees occasional failures."], | |
| ["Evaluation","Recovery rate, repeated error rate and time to recovery."], | |
| ["SI Agent role","Transforms brittle autonomy into resilient operation."] | |
| ], | |
| deps:["Checkpoints","Fallbacks","Observability","Replanning"], | |
| m:{ProductionImportance:98,SecurityImpact:78,LongHorizonImpact:100,Verifiability:90}, | |
| fail:"The runtime repeats the same failed action instead of changing strategy." | |
| }, | |
| { | |
| n:"Human Approval",cat:"Oversight", | |
| d:"Introduces explicit human decision points before selected high-impact actions.", | |
| f:["Proposed Action","Risk Check","Human Review","Approve / Reject"], | |
| cards:[ | |
| ["Core function","Escalate consequential actions to a person."], | |
| ["Why it matters","Not every decision should be fully automated."], | |
| ["Evaluation","Escalation precision, response time and policy compliance."], | |
| ["SI Agent role","Provides a configurable boundary around autonomy."] | |
| ], | |
| deps:["Risk Policy","Identity","Notifications","Audit"], | |
| m:{ProductionImportance:92,SecurityImpact:100,LongHorizonImpact:90,Verifiability:100}, | |
| fail:"High-impact actions proceed without the required approval." | |
| }, | |
| { | |
| n:"Cost & Limits",cat:"Operations", | |
| d:"Constrains tokens, time, tool calls, money, retries and compute resources.", | |
| f:["Budget","Execute","Measure","Limit","Stop / Continue"], | |
| cards:[ | |
| ["Core function","Keep resource use bounded."], | |
| ["Why it matters","Autonomous loops can create runaway cost."], | |
| ["Evaluation","Budget compliance, efficiency and limit behavior."], | |
| ["SI Agent role","Makes persistent autonomy economically controllable."] | |
| ], | |
| deps:["Usage Metering","Budgets","Timeouts","Policies"], | |
| m:{ProductionImportance:94,SecurityImpact:72,LongHorizonImpact:97,Verifiability:100}, | |
| fail:"The agent remains technically functional but consumes excessive resources." | |
| } | |
| ]; | |
| const runtime=document.getElementById("runtime"); | |
| let selected=0; | |
| function buttons(){ | |
| runtime.innerHTML=layers.map((x,i)=>` | |
| <button class="${i===selected?'on':''}" data-i="${i}"> | |
| <b>${x.n}</b><span>${x.cat}</span> | |
| </button>`).join(""); | |
| runtime.querySelectorAll("button").forEach(b=>b.onclick=()=>{ | |
| selected=Number(b.dataset.i);buttons();render(); | |
| }); | |
| } | |
| function render(){ | |
| const x=layers[selected]; | |
| category.textContent=x.cat; | |
| name.textContent=x.n; | |
| desc.textContent=x.d; | |
| flow.innerHTML=x.f.map((v,i)=>`<span class="node ${i===x.f.length-1?'focus':''}">${v}</span>${i<x.f.length-1?'<span class="arrow">→</span>':''}`).join(""); | |
| cards.innerHTML=x.cards.map(v=>`<div class="card"><b>${v[0]}</b><span>${v[1]}</span></div>`).join(""); | |
| deps.innerHTML=x.deps.map(v=>`<span class="tag">${v}</span>`).join(""); | |
| const labels={ProductionImportance:"Production importance",SecurityImpact:"Security impact",LongHorizonImpact:"Long-horizon impact",Verifiability:"Verifiability"}; | |
| metrics.innerHTML=Object.entries(x.m).map(([k,v])=>` | |
| <div class="metric"> | |
| <div class="mt"><span>${labels[k]}</span><span>${v}</span></div> | |
| <div class="bar"><div class="fill" style="width:${v}%"></div></div> | |
| </div>`).join(""); | |
| failure.textContent=x.fail; | |
| } | |
| buttons();render(); | |
| </script> | |
| </body> | |
| </html> | |