forked from emre/www_projectmycelium_com
76 lines
2.6 KiB
TypeScript
76 lines
2.6 KiB
TypeScript
|
|
import { Container } from '@/components/Container'
|
|
import { Eyebrow, SectionHeader } from '@/components/Texts'
|
|
|
|
const components = [
|
|
{
|
|
component: 'Long-Term Memory (FungiStor)',
|
|
purpose: 'Durable, distributed memory with erasure-coded resilience',
|
|
backedBy: 'Mycelium Storage',
|
|
},
|
|
{
|
|
component: 'Active Retrieval (HeroDB)',
|
|
purpose: 'Fast multimodal vector + keyword retrieval',
|
|
backedBy: 'Compute + Storage',
|
|
},
|
|
{
|
|
component: 'Secure Agent Workspaces (MOS Sandboxes)',
|
|
purpose: 'Ephemeral, isolated execution for agent actions',
|
|
backedBy: 'Mycelium Compute',
|
|
},
|
|
{
|
|
component: 'Private Communication (Mycelium Mesh)',
|
|
purpose: 'Peer-to-peer encrypted network',
|
|
backedBy: 'Mycelium Network',
|
|
},
|
|
{
|
|
component: 'Verifiable Execution (Deterministic Deploy)',
|
|
purpose: 'Ensure the code running is exactly what you signed',
|
|
backedBy: 'The Stack',
|
|
},
|
|
{
|
|
component: 'Agent Coordination Engine (coming online next)',
|
|
purpose: 'Orchestrate multi-step workflows and tool use',
|
|
backedBy: 'Hero Orchestrator',
|
|
},
|
|
]
|
|
|
|
export function AgentComponents() {
|
|
return (
|
|
<section className="bg-white py-24 sm:py-32">
|
|
<Container>
|
|
<div className="mx-auto max-w-3xl text-center">
|
|
<Eyebrow>AGENT COMPONENTS</Eyebrow>
|
|
<SectionHeader as="h2" className="mt-6 text-gray-900">
|
|
The Building Blocks of Sovereign Agents
|
|
</SectionHeader>
|
|
</div>
|
|
|
|
<div className="mx-auto mt-16 max-w-6xl overflow-x-auto">
|
|
<table className="w-full table-auto border-collapse text-left text-sm text-gray-700">
|
|
<thead>
|
|
<tr className="bg-cyan-50 border-b border-gray-100">
|
|
<th className="py-3 px-4 font-semibold text-gray-900">Component</th>
|
|
<th className="py-3 px-4 font-semibold text-gray-900">Purpose</th>
|
|
<th className="py-3 px-4 font-semibold text-gray-900">Backed By</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{components.map((item) => (
|
|
<tr
|
|
key={item.component}
|
|
className="border-b border-gray-100 hover:bg-cyan-50/40 transition"
|
|
>
|
|
<td className="py-4 px-4 font-medium text-gray-900">{item.component}</td>
|
|
<td className="py-4 px-4">{item.purpose}</td>
|
|
<td className="py-4 px-4 text-cyan-700 font-medium">{item.backedBy}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
)
|
|
}
|