wehub-resource-sync
e7738de6d2
CI / Deep Native Runtime Cases (1/6) (push) Has been skipped
CI / Native Preflight (push) Failing after 1s
CI / Native Runtime Cases (1/2) (push) Failing after 0s
CI / Native Runtime Cases (2/2) (push) Failing after 1s
CI / Native Metadata Reports (push) Failing after 0s
CI / Native Direct Backend Artifacts (push) Failing after 0s
CI / Native Sanitizer Smoke (push) Failing after 1s
CI / Command Contract Snapshots (push) Failing after 1s
CI / Deep Conformance Suite (push) Has been skipped
CI / Graph Build Perf (push) Failing after 1s
CI / Deep Native Preflight (push) Has been skipped
CI / Deep Native Runtime Cases (2/6) (push) Has been skipped
CI / Deep Native Runtime Cases (3/6) (push) Has been skipped
CI / Conformance Suite (push) Failing after 1s
CI / Workspace Checks (push) Failing after 0s
CI / Deep Native Runtime Cases (5/6) (push) Has been skipped
CI / Deep Native Runtime Cases (6/6) (push) Has been skipped
CI / Deep Native Runtime Cases (4/6) (push) Has been skipped
CI / Deep Graph Build Perf (push) Has been skipped
401 lines
15 KiB
TypeScript
401 lines
15 KiB
TypeScript
import { ArrowRightIcon, LogoIcon } from "@/components/icons";
|
|
import type { CSSProperties, ReactNode } from "react";
|
|
import { ButtonLink } from "@/components/button";
|
|
import { InstallCopy } from "@/components/install-copy";
|
|
import { HomeChatViewport } from "@/components/home-chat-viewport";
|
|
import { ChatToolRuns } from "@/components/home-chat-tools";
|
|
import { LoopDiagram } from "@/components/loop-diagram";
|
|
import { highlight } from "@/lib/highlight";
|
|
import { pageMetadata } from "@/lib/page-metadata";
|
|
|
|
export const metadata = pageMetadata("");
|
|
|
|
const CODE_EXAMPLE = `<span class="hl-keyword">pub</span> <span class="hl-keyword">fn</span> <span class="hl-variable">main</span>(world: <span class="hl-type">World</span>) -> <span class="hl-type">Void</span> <span class="hl-keyword">raises</span> {
|
|
<span class="hl-keyword">check</span> world.out.<span class="hl-variable">write</span>(<span class="hl-string">"hello from zero\\n"</span>)
|
|
}`;
|
|
|
|
const GRAPH_EXAMPLE = `zero-graph v1
|
|
origin source-text
|
|
module "hello"
|
|
hash "graph:a7f7e6899a73f3b4"
|
|
|
|
node #decl_ad8d9028 Function name:"main" type:"Void" public:true fallible:true
|
|
node #param_4610ae76 Param name:"world" type:"World"
|
|
node #expr_c403020c MethodCall name:"write" type:"Void"
|
|
node #expr_653eeb6e Literal type:"String" value:"hello from zero\\n"
|
|
edge #expr_c403020c arg #expr_653eeb6e order:0`;
|
|
|
|
const PATCH_EXAMPLE = `zero patch \\
|
|
--expect-graph-hash graph:a7f7e6899a73f3b4 \\
|
|
--op 'set node="#expr_653eeb6e" \\
|
|
field="value" \\
|
|
expect="hello from zero\\n" \\
|
|
value="hello graph\\n"'`;
|
|
|
|
const CONSTRAINTS = [
|
|
"Token efficiency",
|
|
"Low memory",
|
|
"Fast startup",
|
|
"Fast builds",
|
|
"Low latency",
|
|
"Zero dependencies",
|
|
];
|
|
|
|
const ARCHITECTURE_STEPS = [
|
|
{
|
|
label: "Human",
|
|
title: "Asks for an outcome",
|
|
body: "Build a CRM API, add auth, or fix a failing route",
|
|
},
|
|
{
|
|
label: "Agent",
|
|
title: "Uses Graph",
|
|
body: "Symbols, calls, types, effects, node IDs, and graph hashes",
|
|
},
|
|
{
|
|
label: "Compiler",
|
|
title: "Checks patches",
|
|
body: "Shape, type, stale-state, and repository metadata checks",
|
|
},
|
|
{
|
|
label: "Human",
|
|
title: "Reviews projection",
|
|
body: "Readable .0 projections stay available for review and rare manual edits",
|
|
},
|
|
];
|
|
|
|
/* ─── Primitives ──────────────────────────────────── */
|
|
|
|
function GridGlow() {
|
|
return (
|
|
<div aria-hidden className="pointer-events-none absolute inset-0 -z-10 overflow-hidden">
|
|
<div
|
|
className="absolute inset-0 opacity-[0.4] dark:opacity-[0.25]"
|
|
style={{
|
|
backgroundImage:
|
|
"linear-gradient(to right, var(--color-border) 1px, transparent 1px), linear-gradient(to bottom, var(--color-border) 1px, transparent 1px)",
|
|
backgroundSize: "64px 64px",
|
|
maskImage:
|
|
"radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%)",
|
|
WebkitMaskImage:
|
|
"radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%)",
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function SectionHeader({
|
|
title,
|
|
description,
|
|
}: {
|
|
title: string;
|
|
description: string;
|
|
}) {
|
|
return (
|
|
<div className="mb-12 max-w-[44rem]">
|
|
<h2 className="m-0 max-w-[14ch] text-[clamp(2.25rem,6vw,4.25rem)] font-semibold leading-[0.98] tracking-[-0.045em]">
|
|
{title}
|
|
</h2>
|
|
<p className="mt-6 max-w-[34rem] text-pretty text-[1.0625rem] leading-[1.65] text-muted">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function VisualGlow({ className = "", children }: { className?: string; children: ReactNode }) {
|
|
return <div className={className}>{children}</div>;
|
|
}
|
|
|
|
function Panel({ className = "", children }: { className?: string; children: ReactNode }) {
|
|
return (
|
|
<div
|
|
className={`relative overflow-hidden rounded-2xl border border-fg/30 ${className}`}
|
|
style={{ boxShadow: "0 1px 0 0 color-mix(in srgb, var(--color-fg) 4%, transparent)" }}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function WindowBar({ title }: { title: string }) {
|
|
return (
|
|
<div className="relative flex items-center border-b border-fg/30 px-4 py-3">
|
|
<div className="flex gap-1.5">
|
|
<span className="h-2.5 w-2.5 rounded-full bg-border" />
|
|
<span className="h-2.5 w-2.5 rounded-full bg-border" />
|
|
<span className="h-2.5 w-2.5 rounded-full bg-border" />
|
|
</div>
|
|
<span className="absolute left-1/2 -translate-x-1/2 font-mono text-xs font-medium text-muted">
|
|
{title}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function CodeWindow({
|
|
title,
|
|
html,
|
|
className = "",
|
|
}: {
|
|
title: string;
|
|
html: string;
|
|
className?: string;
|
|
}) {
|
|
return (
|
|
<Panel className={`bg-bg ${className}`}>
|
|
<WindowBar title={title} />
|
|
<pre className="m-0 overflow-x-auto bg-bg p-5 text-[0.8125rem] leading-[1.7]">
|
|
<code className="text-code-fg" dangerouslySetInnerHTML={{ __html: html }} />
|
|
</pre>
|
|
</Panel>
|
|
);
|
|
}
|
|
|
|
function ArchitectureDiagram() {
|
|
return (
|
|
<div className="mt-12 w-full text-left">
|
|
<div className="grid grid-cols-1 gap-px overflow-hidden rounded-2xl border border-border bg-border sm:grid-cols-2 lg:grid-cols-4">
|
|
{ARCHITECTURE_STEPS.map((item, index) => (
|
|
<div
|
|
key={item.title}
|
|
className="group relative flex flex-col bg-bg p-7 transition-colors duration-200 hover:bg-surface-muted"
|
|
>
|
|
<div className="mb-7 flex items-center gap-2.5">
|
|
<span className="flex h-6 w-6 items-center justify-center rounded-md border border-border font-mono text-[0.6875rem] tabular-nums text-muted transition-colors group-hover:border-fg/40 group-hover:text-fg">
|
|
{index + 1}
|
|
</span>
|
|
<span className="font-mono text-[0.6875rem] font-semibold uppercase tracking-[0.16em] text-muted">
|
|
{item.label}
|
|
</span>
|
|
</div>
|
|
<h2 className="m-0 text-[1.0625rem] font-semibold leading-snug tracking-[-0.02em] text-fg">
|
|
{item.title}
|
|
</h2>
|
|
<p className="m-0 mt-2.5 text-[0.8125rem] leading-[1.65] text-muted">
|
|
{item.body}
|
|
</p>
|
|
<span
|
|
aria-hidden
|
|
className="pointer-events-none absolute right-0 top-1/2 z-10 hidden -translate-y-1/2 translate-x-[calc(50%+1px)] lg:flex"
|
|
>
|
|
{index < ARCHITECTURE_STEPS.length - 1 ? (
|
|
<span className="flex h-6 w-6 items-center justify-center rounded-full border border-border bg-bg text-muted">
|
|
<ArrowRightIcon width={12} height={12} />
|
|
</span>
|
|
) : null}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/* ─── Chat mockup ─────────────────────────────────── */
|
|
|
|
function chatRevealStyle(delay: string): CSSProperties {
|
|
return { "--chat-delay": delay } as CSSProperties;
|
|
}
|
|
|
|
function ChatMockup() {
|
|
return (
|
|
<HomeChatViewport>
|
|
<Panel className="home-chat-shell bg-bg shadow-card">
|
|
<WindowBar title="your agent" />
|
|
|
|
<div className="flex flex-col gap-5 p-5 sm:p-6">
|
|
<div className="home-chat-reveal flex justify-end" style={chatRevealStyle("80ms")}>
|
|
<div className="max-w-[82%] rounded-2xl rounded-br-md bg-fg px-4 py-2.5 text-[0.875rem] leading-relaxed text-bg">
|
|
build hello world in zerolang
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className="home-chat-reveal max-w-[92%] text-[0.875rem] leading-[1.65] text-fg"
|
|
style={chatRevealStyle("360ms")}
|
|
>
|
|
I'll set up the package, patch the graph, and run it.
|
|
</div>
|
|
|
|
<ChatToolRuns startDelayMs={640} />
|
|
|
|
<div
|
|
className="home-chat-reveal max-w-[92%] text-[0.875rem] leading-[1.65] text-fg"
|
|
style={chatRevealStyle("1320ms")}
|
|
>
|
|
Done. <code className="home-chat-code">zero.graph</code> validated at{" "}
|
|
<code className="home-chat-code">graph:a7f7e689</code> with symbol{" "}
|
|
<code className="home-chat-code">main</code>. It prints:
|
|
</div>
|
|
|
|
<div
|
|
className="home-chat-reveal home-chat-output rounded-lg border border-border bg-code-bg px-4 py-3 font-mono text-[0.8125rem] text-code-fg"
|
|
style={chatRevealStyle("1520ms")}
|
|
>
|
|
hello from zero
|
|
</div>
|
|
</div>
|
|
</Panel>
|
|
</HomeChatViewport>
|
|
);
|
|
}
|
|
|
|
/* ─── Section wrapper ─────────────────────────────── */
|
|
|
|
function Section({ children }: { children: ReactNode }) {
|
|
return (
|
|
<section className="relative z-10 mx-auto w-[min(100%-3rem,var(--container-content))] border-t border-border py-[clamp(5rem,11vh,8rem)]">
|
|
{children}
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default function HomePage() {
|
|
return (
|
|
<div className="relative min-h-screen overflow-hidden">
|
|
<main>
|
|
{/* Hero */}
|
|
<section className="relative overflow-hidden px-6 pb-24 pt-[clamp(4rem,11vh,7rem)]">
|
|
<GridGlow />
|
|
<div className="relative z-10 mx-auto flex max-w-[54rem] flex-col items-center text-center">
|
|
<div className="mb-7 inline-flex items-center rounded-full border border-border bg-surface/70 px-3.5 py-1 font-mono text-[0.6875rem] uppercase tracking-[0.16em] text-muted backdrop-blur">
|
|
Experimental
|
|
</div>
|
|
<h1 className="m-0 text-[clamp(2.5rem,7vw,5rem)] font-semibold leading-[0.98] tracking-[-0.05em]">
|
|
The Programming
|
|
<br />
|
|
Language for Agents
|
|
</h1>
|
|
<p className="mt-7 max-w-[40rem] text-pretty text-[clamp(1.0625rem,2vw,1.25rem)] leading-[1.6] text-muted">
|
|
A programming language where the graph is the program. Humans ask
|
|
for outcomes. Agents query the program graph, submit checked
|
|
edits, and prove the result.
|
|
</p>
|
|
<InstallCopy />
|
|
<ArchitectureDiagram />
|
|
<p className="mt-5 max-w-[34rem] text-[0.8125rem] leading-relaxed text-muted">
|
|
Expect breaking changes. Run it in a safe environment, not against
|
|
production systems.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* 01 — Chat */}
|
|
<Section>
|
|
<SectionHeader
|
|
title="Start with a request."
|
|
description="The expected workflow is a normal conversation. The graph discipline lives in the agent skills and compiler commands, not in stiff human prompts."
|
|
/>
|
|
<VisualGlow className="mx-auto max-w-[40rem]">
|
|
<ChatMockup />
|
|
</VisualGlow>
|
|
</Section>
|
|
|
|
{/* 02 — Loop */}
|
|
<Section>
|
|
<SectionHeader
|
|
title="Tighter agent loop."
|
|
description="A traditional loop writes text, then runs tools to learn what the edit meant. Zerolang puts the compiler in the loop, so an edit is a checked change to the graph."
|
|
/>
|
|
<LoopDiagram />
|
|
</Section>
|
|
|
|
{/* 03 — Patch */}
|
|
<Section>
|
|
<SectionHeader
|
|
title="Checked by default."
|
|
description="Graph patches target semantic nodes and fields, guarded by graph hashes and expected values. Stale or invalid edits fail before they touch the store."
|
|
/>
|
|
<VisualGlow className="grid grid-cols-1 gap-5 lg:grid-cols-[1.4fr_1fr]">
|
|
<CodeWindow title="zero patch" html={highlight(PATCH_EXAMPLE, "sh")} />
|
|
<Panel className="bg-bg">
|
|
<dl className="m-0 divide-y divide-border/50 font-mono text-[0.8125rem]">
|
|
{[
|
|
["graph hash", "graph:b3c1d04f"],
|
|
["node", "#expr_653eeb6e"],
|
|
["field", "value"],
|
|
["symbols", "main"],
|
|
["projection", "src/main.0"],
|
|
].map(([k, v]) => (
|
|
<div key={k} className="flex items-center justify-between gap-4 px-5 py-3">
|
|
<dt className="text-muted">{k}</dt>
|
|
<dd className="m-0 truncate text-code-fg">{v}</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
</Panel>
|
|
</VisualGlow>
|
|
</Section>
|
|
|
|
{/* 04 — Graph */}
|
|
<Section>
|
|
<SectionHeader
|
|
title="The program database."
|
|
description="Readable text stays useful for review. The compiler-owned graph is the program database agents edit and the compiler consumes."
|
|
/>
|
|
<VisualGlow className="grid grid-cols-1 gap-5 lg:grid-cols-2">
|
|
<CodeWindow title="zero query · graph" html={highlight(GRAPH_EXAMPLE, "zero-graph")} />
|
|
<CodeWindow title="src/main.0 · projection" html={CODE_EXAMPLE} />
|
|
</VisualGlow>
|
|
</Section>
|
|
|
|
{/* 04 — Constraints */}
|
|
<Section>
|
|
<SectionHeader
|
|
title="Built for runtime constraints."
|
|
description="The graph model should reduce guessing without relaxing the runtime goals. Zerolang still aims to stay small, fast, explicit, and dependency-free."
|
|
/>
|
|
<VisualGlow>
|
|
<div className="grid grid-cols-2 gap-px overflow-hidden rounded-2xl border border-border bg-border md:grid-cols-3">
|
|
{CONSTRAINTS.map((c) => (
|
|
<div
|
|
key={c}
|
|
className="flex items-center gap-3 bg-bg px-6 py-7 text-[0.9375rem] font-medium tracking-[-0.01em] transition-colors hover:bg-surface-muted"
|
|
>
|
|
<span className="h-1.5 w-1.5 shrink-0 rounded-full bg-fg/30" />
|
|
{c}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</VisualGlow>
|
|
</Section>
|
|
|
|
{/* CTA */}
|
|
<section className="relative z-10 border-t border-border">
|
|
<div className="mx-auto flex w-[min(100%-3rem,var(--container-content))] flex-col items-center px-6 py-[clamp(6rem,14vh,9rem)] text-center">
|
|
<h2 className="m-0 text-[clamp(2rem,6vw,3.5rem)] font-semibold leading-[1.02] tracking-[-0.045em]">
|
|
Explore with us.
|
|
</h2>
|
|
<p className="mx-auto mt-6 max-w-[38rem] text-pretty text-[1.0625rem] leading-[1.6] text-muted">
|
|
Start with the getting started guide, then read the graph architecture
|
|
and compile-path pages to see why the program database matters.
|
|
</p>
|
|
<div className="mt-9 flex flex-wrap items-center justify-center gap-3">
|
|
<ButtonLink href="/getting-started" variant="primary" size="lg">
|
|
Get started <ArrowRightIcon />
|
|
</ButtonLink>
|
|
<ButtonLink href="/concepts/graph-architecture" variant="default" size="lg">
|
|
Graph architecture <ArrowRightIcon />
|
|
</ButtonLink>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer className="relative z-10 border-t border-border py-8">
|
|
<div className="mx-auto flex w-[min(100%-3rem,var(--container-content))] flex-col items-center gap-2 text-center md:flex-row md:justify-between md:text-left">
|
|
<div className="flex items-center gap-2 text-sm font-semibold text-fg">
|
|
<LogoIcon width="14" height="12" />
|
|
<span>zerolang</span>
|
|
</div>
|
|
<p className="m-0 text-[0.8125rem] text-muted">
|
|
Experimental graph-first language design.
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|