landing: rewrite to match current Speckl reality
Some checks failed
Deploy Landing Page to Storj / deploy (push) Failing after 2s
Some checks failed
Deploy Landing Page to Storj / deploy (push) Failing after 2s
Replace 'dark provenance' / constraint-based / Z3 messaging with what Speckl actually does: state machine compilation to 5 auditable artifacts (PROV-O, CycloneDX, SPDX, TypeScript, WASM). Update code example from old 'speck' syntax to current 'spec' / state / init / action keywords. Add pipeline grid, real examples (TwoPhaseCommit, Paxos, Raft, Forgejo workflow), strategy ladder with completion status, quickstart section with real CLI commands. The old landing page described a completely different product — one that didn't exist. This version accurately reflects the compiler, examples, and whitepaper v2 that are actually built and working.
This commit is contained in:
parent
65546fa6ba
commit
d6e8bf906a
1 changed files with 302 additions and 167 deletions
|
|
@ -3,26 +3,26 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Speckl — Spec-First Development with Dark Provenance</title>
|
||||
<meta name="description" content="Write what your system should do. Prove it. Ship with full traceability. Speckl is an open standard for specification-first development with dark provenance.">
|
||||
<title>Speckl — A Judgement Transport Utility for AI-Generated Specifications</title>
|
||||
<meta name="description" content="Speckl bridges the gap between what you specify and what gets built. State machine specs compile to auditable code — TypeScript, WASM, and provenance artifacts. NIST SA-11 human-in-the-loop for AI-generated outputs.">
|
||||
<link rel="icon" href="favicon.svg" type="image/svg+xml">
|
||||
<link rel="canonical" href="https://speckl.scoble.me/">
|
||||
<meta property="og:title" content="Speckl — Spec-First Development with Dark Provenance">
|
||||
<meta property="og:description" content="Write what your system should do. Prove it. Ship with full traceability.">
|
||||
<meta property="og:title" content="Speckl — Judgement Transport for AI Specifications">
|
||||
<meta property="og:description" content="State machine specs → auditable code. Compile SpeckDL to TypeScript + WASM + provenance artifacts. Open source (MIT).">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://speckl.scoble.me/">
|
||||
<meta property="og:image" content="https://speckl.scoble.me/docs/diagrams/architecture.svg">
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0a0a0f;
|
||||
--bg-elevated: #14141a;
|
||||
--bg-card: #1a1a22;
|
||||
--text: #e4e4e8;
|
||||
--text-muted: #8a8a95;
|
||||
--accent: #4a9eff;
|
||||
--accent-glow: rgba(74, 158, 255, 0.3);
|
||||
--border: #2a2a35;
|
||||
--code-bg: #0d0d12;
|
||||
--bg: #0a0f0a;
|
||||
--bg-elevated: #121a12;
|
||||
--bg-card: #1a241a;
|
||||
--text: #e4e8e4;
|
||||
--text-muted: #8a958a;
|
||||
--accent: #4ae64a;
|
||||
--accent-glow: rgba(74, 230, 74, 0.25);
|
||||
--accent2: #8be9fd;
|
||||
--border: #2a352a;
|
||||
--code-bg: #0d120d;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
}
|
||||
|
||||
.hero {
|
||||
padding: 8rem 1.5rem 6rem;
|
||||
padding: 6rem 1.5rem 4rem;
|
||||
text-align: center;
|
||||
background: linear-gradient(180deg, var(--bg) 0%, var(--bg-elevated) 100%);
|
||||
position: relative;
|
||||
|
|
@ -48,14 +48,14 @@
|
|||
position: absolute;
|
||||
top: -50%; left: -50%; width: 200%; height: 200%;
|
||||
background: radial-gradient(circle at 30% 30%, var(--accent-glow) 0%, transparent 50%),
|
||||
radial-gradient(circle at 70% 70%, rgba(100,100,255,0.1) 0%, transparent 40%);
|
||||
radial-gradient(circle at 70% 70%, rgba(74,230,180,0.08) 0%, transparent 40%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-content { position: relative; max-width: 800px; margin: 0 auto; }
|
||||
|
||||
.hero h1 {
|
||||
font-size: clamp(2.5rem, 8vw, 4.5rem);
|
||||
font-size: clamp(2.5rem, 8vw, 4rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 1rem;
|
||||
|
|
@ -64,133 +64,179 @@
|
|||
}
|
||||
|
||||
.hero-tagline {
|
||||
font-size: clamp(1.1rem, 3vw, 1.4rem);
|
||||
font-size: clamp(1rem, 2.5vw, 1.25rem);
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 2.5rem;
|
||||
margin-bottom: 2rem;
|
||||
font-weight: 300;
|
||||
max-width: 600px;
|
||||
margin-left: auto; margin-right: auto;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 0.95rem;
|
||||
color: var(--accent);
|
||||
margin-bottom: 2.5rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
|
||||
|
||||
.btn {
|
||||
display: inline-flex; align-items: center; gap: 0.5rem;
|
||||
padding: 0.875rem 1.75rem; border-radius: 0.5rem;
|
||||
font-size: 1rem; font-weight: 500; text-decoration: none;
|
||||
padding: 0.75rem 1.5rem; border-radius: 0.5rem;
|
||||
font-size: 0.95rem; font-weight: 500; text-decoration: none;
|
||||
transition: all 0.2s ease; border: none; cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-primary { background: var(--accent); color: var(--bg); }
|
||||
.btn-primary:hover { background: #3a8eef; transform: translateY(-1px); }
|
||||
.btn-primary { background: var(--accent); color: #0a0f0a; }
|
||||
.btn-primary:hover { background: #3dd63d; transform: translateY(-1px); }
|
||||
|
||||
.btn-secondary { background: var(--bg-card); color: var(--text); border: 1px solid var(--border); }
|
||||
.btn-secondary:hover { background: var(--border); }
|
||||
|
||||
section { padding: 5rem 1.5rem; max-width: 1100px; margin: 0 auto; }
|
||||
section { padding: 4rem 1.5rem; max-width: 1000px; margin: 0 auto; }
|
||||
section + section { border-top: 1px solid var(--border); }
|
||||
|
||||
h2 { font-size: 1.875rem; font-weight: 600; margin-bottom: 1.5rem; color: var(--text); }
|
||||
h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.75rem; color: var(--accent); }
|
||||
p { color: var(--text-muted); margin-bottom: 1rem; }
|
||||
h2 { font-size: 1.75rem; font-weight: 600; margin-bottom: 1rem; color: var(--text); }
|
||||
h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--accent); }
|
||||
p, li { color: var(--text-muted); margin-bottom: 0.75rem; }
|
||||
|
||||
.features {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
justify-content: center;
|
||||
.pipeline-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: 1rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
flex: 1 1 30%;
|
||||
min-width: 260px;
|
||||
max-width: 360px;
|
||||
background: var(--bg-card); border: 1px solid var(--border);
|
||||
border-radius: 0.75rem; padding: 1.5rem;
|
||||
transition: border-color 0.2s ease;
|
||||
.pipeline-step {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.25rem 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pipeline-step .icon {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.pipeline-step h4 {
|
||||
color: var(--accent2);
|
||||
font-size: 0.85rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.pipeline-step p {
|
||||
font-size: 0.85rem;
|
||||
margin: 0;
|
||||
}
|
||||
.feature-card:hover { border-color: var(--accent); }
|
||||
|
||||
.code-block {
|
||||
background: var(--code-bg); border: 1px solid var(--border);
|
||||
border-radius: 0.75rem; padding: 1.5rem; margin: 1.5rem 0;
|
||||
border-radius: 0.75rem; padding: 1.25rem; margin: 1.5rem 0;
|
||||
overflow-x: auto;
|
||||
font-family: 'SF Mono', Monaco, monospace;
|
||||
font-size: 0.875rem; line-height: 1.7;
|
||||
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
|
||||
font-size: 0.85rem; line-height: 1.7;
|
||||
}
|
||||
|
||||
.code-block pre {
|
||||
margin: 0; padding: 0; background: transparent; border: none;
|
||||
margin: 0; padding: 0; background: transparent;
|
||||
font-family: inherit; font-size: inherit; line-height: inherit;
|
||||
white-space: pre; overflow-x: auto;
|
||||
}
|
||||
.code-block .kw { color: #ff79c6; }
|
||||
.code-block .ty { color: #8be9fd; }
|
||||
.code-block .st { color: #f1fa8c; }
|
||||
.code-block .cm { color: #6272a4; }
|
||||
|
||||
.diagram-container { margin: 2rem 0; }
|
||||
.diagram-container h3 {
|
||||
text-align: center;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--text);
|
||||
}
|
||||
.kw { color: #ff79c6; }
|
||||
.ty { color: #8be9fd; }
|
||||
.st { color: #f1fa8c; }
|
||||
.cm { color: #6272a4; }
|
||||
.fn { color: #50fa7b; }
|
||||
.op { color: #ff79c6; }
|
||||
|
||||
.philosophy-grid {
|
||||
.examples-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 2rem; margin-top: 2rem;
|
||||
}
|
||||
.philosophy-item { text-align: center; }
|
||||
.philosophy-icon {
|
||||
width: 48px; height: 48px; margin: 0 auto 1rem;
|
||||
background: var(--bg-elevated); border: 1px solid var(--border);
|
||||
border-radius: 0.75rem; display: flex; align-items: center; justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 1.25rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.roadmap {
|
||||
display: flex; gap: 0; margin-top: 2rem; flex-wrap: wrap;
|
||||
.example-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
.roadmap-phase {
|
||||
flex: 1; min-width: 200px; padding: 1.5rem;
|
||||
background: var(--bg-card); border: 1px solid var(--border);
|
||||
|
||||
.example-card:hover { border-color: var(--accent); }
|
||||
|
||||
.example-card h4 { color: var(--accent2); margin-bottom: 0.35rem; }
|
||||
.example-card .meta {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.roadmap-phase:first-child { border-radius: 0.75rem 0 0 0.75rem; }
|
||||
.roadmap-phase:last-child { border-radius: 0 0.75rem 0.75rem 0; }
|
||||
.roadmap-phase + .roadmap-phase { border-left: none; }
|
||||
.roadmap-phase h4 {
|
||||
color: var(--accent); font-size: 0.875rem; text-transform: uppercase;
|
||||
letter-spacing: 0.05em; margin-bottom: 0.5rem;
|
||||
|
||||
.strategy-ladder {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.strategy-step {
|
||||
flex: 1 1 200px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.25rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.strategy-step .phase { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); }
|
||||
.strategy-step .label { font-weight: 600; margin-top: 0.25rem; }
|
||||
.strategy-step .status { font-size: 0.8rem; color: var(--accent); margin-top: 0.25rem; }
|
||||
|
||||
.check-list {
|
||||
list-style: none;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.check-list li {
|
||||
padding: 0.35rem 0;
|
||||
padding-left: 1.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.check-list li::before {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--accent);
|
||||
font-weight: bold;
|
||||
}
|
||||
.roadmap-phase p { font-size: 0.9rem; margin: 0; }
|
||||
|
||||
footer {
|
||||
text-align: center; padding: 3rem 1.5rem;
|
||||
border-top: 1px solid var(--border);
|
||||
color: var(--text-muted); font-size: 0.875rem;
|
||||
color: var(--text-muted); font-size: 0.85rem;
|
||||
}
|
||||
|
||||
footer a { color: var(--accent); text-decoration: none; }
|
||||
footer a:hover { text-decoration: underline; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.roadmap { flex-direction: column; }
|
||||
.roadmap-phase, .roadmap-phase:first-child, .roadmap-phase:last-child {
|
||||
border-radius: 0; border-left: 1px solid var(--border);
|
||||
}
|
||||
.roadmap-phase:first-child { border-radius: 0.75rem 0.75rem 0 0; }
|
||||
.roadmap-phase:last-child { border-radius: 0 0 0.75rem 0.75rem; }
|
||||
.hero { padding: 4rem 1rem 2.5rem; }
|
||||
.hero h1 { font-size: 2rem; }
|
||||
.pipeline-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.hero { padding: 4rem 1rem 3rem; }
|
||||
.hero h1 { font-size: 2rem; }
|
||||
.hero-tagline { font-size: 1rem; }
|
||||
.btn { padding: 0.75rem 1.25rem; font-size: 0.9rem; }
|
||||
section { padding: 3.5rem 1rem; }
|
||||
.code-block { padding: 1rem; }
|
||||
.code-block pre { font-size: 0.8rem; }
|
||||
h2 { font-size: 1.5rem; }
|
||||
@media (max-width: 480px) {
|
||||
.pipeline-grid { grid-template-columns: 1fr; }
|
||||
section { padding: 3rem 1rem; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
@ -199,111 +245,200 @@
|
|||
<header class="hero">
|
||||
<div class="hero-content">
|
||||
<h1>Speckl</h1>
|
||||
<p class="hero-tagline">Where humans and AI collaborate in the same language.<br>Spec-first development with dark provenance. Write what your system should do. Prove it. Ship with full traceability.</p>
|
||||
<p class="hero-subtitle">A Judgement Transport Utility</p>
|
||||
<p class="hero-tagline">
|
||||
Your specification is the source of truth. Speckl ensures what gets built — by humans or AI — stays faithful to what you specified. Compile state machine specs into auditable code with embedded provenance.
|
||||
</p>
|
||||
<div class="hero-cta">
|
||||
<a href="https://codeberg.org/sscoble/speckl" class="btn btn-primary">Source Code</a>
|
||||
<a href="https://codeberg.org/sscoble/speckl/src/branch/main/docs/whitepapers/dark-provenance.md" class="btn btn-secondary">Read the Whitepaper</a>
|
||||
|
||||
<a href="https://os.scoble.me/forgejo/sscoble/speckl" class="btn btn-primary">Source →</a>
|
||||
<a href="https://os.scoble.me/forgejo/sscoble/speckl/src/branch/main/docs/whitepaper-v2.md" class="btn btn-secondary">Whitepaper v2</a>
|
||||
<a href="https://os.scoble.me/forgejo/sscoble/speckl/src/branch/main/docs/speckl-by-example.md" class="btn btn-secondary">Tutorial</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section id="what">
|
||||
<h2>What is Speckl?</h2>
|
||||
<p>Speckl is an <strong>open standard</strong> for specification-first development with dark provenance. It defines how to write what a system should do — in a machine-verifiable format — before any code is written. Every behavior traces back to its source of intent.</p>
|
||||
|
||||
<p>Speckl is not a product or a platform. It is a <strong>methodology and language specification</strong>, published freely under MIT. The SpeckDL language, the Dark Provenance methodology, and the reference implementations define the standard. Products built on it — compilers, verification tools, compliance APIs — will come as the ecosystem grows.</p>
|
||||
|
||||
<div class="features">
|
||||
<div class="feature-card">
|
||||
<h3>SpeckDL Language</h3>
|
||||
<p>A constraint-based specification language that defines <em>what</em> a system does, not <em>how</em>. Specs are small, stable, and machine-verifiable — the audit surface for regulated systems.</p>
|
||||
<h2>What Speckl Does</h2>
|
||||
<p>Speckl is a <strong>compiler for state machine specifications</strong>. You write what your system should do in SpeckDL — a typed specification language with states, actions, invariants, and guard conditions. The compiler produces <strong>five auditable artifacts</strong> from a single spec:</p>
|
||||
|
||||
<div class="pipeline-grid">
|
||||
<div class="pipeline-step">
|
||||
<div class="icon">📜</div>
|
||||
<h4>PROV-O</h4>
|
||||
<p>W3C audit trail — who said what, when</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>Dark Provenance</h3>
|
||||
<p>A methodology where every behavior traces back to its source — a regulation, a design decision, a conversation. The provenance graph is always present, materialized on demand for audits or debugging.</p>
|
||||
<div class="pipeline-step">
|
||||
<div class="icon">📦</div>
|
||||
<h4>CycloneDX</h4>
|
||||
<p>Software Bill of Materials</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>Compiler</h3>
|
||||
<p>Compiles SpeckDL directly to Wasm through a deterministic pipeline — Z3 constraint solving, then code generation. No LLMs, no non-determinism. Same input, same output, every time.</p>
|
||||
<div class="pipeline-step">
|
||||
<div class="icon">📋</div>
|
||||
<h4>SPDX</h4>
|
||||
<p>License & compliance metadata</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>Reference Tools</h3>
|
||||
<p>Minimal implementations for SpeckDL parsing, Z3 verification, and provenance graph generation. The building blocks for tooling, not a production system.</p>
|
||||
<div class="pipeline-step">
|
||||
<div class="icon">⚡</div>
|
||||
<h4>TypeScript</h4>
|
||||
<p>Runnable state machine class</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>Ecosystem-First</h3>
|
||||
<p>The standard is the foundation. Consulting, SaaS tooling, and compliance APIs will build on it — validated through real-world use before they ship.</p>
|
||||
<div class="pipeline-step">
|
||||
<div class="icon">🔧</div>
|
||||
<h4>WASM</h4>
|
||||
<p>Verified WebAssembly binary</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p><strong>Fulfills NIST SA-11</strong> (human-in-the-loop for automated outputs) — every AI-generated or hand-written spec is compiled through a deterministic pipeline. No LLMs in the compiler. Same input, same output, every time.</p>
|
||||
|
||||
<ul class="check-list">
|
||||
<li>Provenance is <strong>embedded by construction</strong> — not bolted on after the fact</li>
|
||||
<li>41 tests passing, < 2 seconds to run the full suite</li>
|
||||
<li>11 example specks: ToggleSwitch → TwoPhaseCommit → Paxos → Raft</li>
|
||||
<li>Dual-target: TypeScript state machine classes + verified WASM from the same spec</li>
|
||||
<li>Zero external services — everything runs locally</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section id="speckdl">
|
||||
<h2>SpeckDL: A Specification Language</h2>
|
||||
<p>SpeckDL defines <em>what</em> a system does, not <em>how</em>. The compiler produces deterministic output: Z3 → Decision Structure → WASM. Same input, same output — every time. Every spec includes <strong>provenance</strong>: traceability to regulations, design decisions, and source conversations — embedded in the spec, not added later.</p>
|
||||
<h2>SpeckDL by Example</h2>
|
||||
<p>SpeckDL is a typed specification language for state machines. Define your states, actions, preconditions, and mutations — the compiler handles the rest.</p>
|
||||
|
||||
<div class="code-block"><pre><span class="kw">speck</span> <span class="ty">RetryHandler</span> {
|
||||
input: { operation: Operation, maxRetries: Nat }
|
||||
output: Result
|
||||
<span class="cm">// Constraints the compiler proves via Z3</span>
|
||||
constraint: maxRetries <= 5
|
||||
constraint: backoff(delay(n)) == delay(n-1) * 2
|
||||
constraint: totalDelay < 30s
|
||||
<span class="cm">// Always-verified properties</span>
|
||||
verify: always(implies(attempt > 1, delay > 0))
|
||||
<span class="cm">// Dark provenance: where did this intent come from?</span>
|
||||
provenance: { regulation: <span class="st">"DO-178C 6.4.2.2"</span> }
|
||||
provenance: { design_decision: <span class="st">"ADR-0042"</span> }
|
||||
source: conversation ref <span class="st">"slack://C123/456"</span>
|
||||
review: manual
|
||||
<div class="code-block"><pre><span class="cm">// A simple toggle switch — compiles to TypeScript + WASM + 3 provenance artifacts</span>
|
||||
<span class="kw">spec</span> <span class="ty">ToggleSwitch</span> {
|
||||
<span class="kw">type</span> <span class="ty">Status</span> = <span class="ty">enum</span> { <span class="st">On</span>, <span class="st">Off</span> }
|
||||
|
||||
<span class="kw">state</span> {
|
||||
<span class="fn">status</span>: <span class="ty">Status</span> = <span class="ty">Status</span>.<span class="st">Off</span>
|
||||
}
|
||||
|
||||
<span class="kw">init</span> <span class="fn">Start</span>() {
|
||||
<span class="kw">set</span> status = <span class="ty">Status</span>.<span class="st">On</span>
|
||||
}
|
||||
|
||||
<span class="kw">action</span> <span class="fn">Flip</span>() {
|
||||
<span class="kw">require</span> status == <span class="ty">Status</span>.<span class="st">On</span>
|
||||
<span class="kw">set</span> status = <span class="ty">Status</span>.<span class="st">Off</span>
|
||||
<span class="kw">emit</span> <span class="st">"TurnedOff"</span>
|
||||
}
|
||||
|
||||
<span class="kw">action</span> <span class="fn">FlipBack</span>() {
|
||||
<span class="kw">require</span> status == <span class="ty">Status</span>.<span class="st">Off</span>
|
||||
<span class="kw">set</span> status = <span class="ty">Status</span>.<span class="st">On</span>
|
||||
<span class="kw">emit</span> <span class="st">"TurnedOn"</span>
|
||||
}
|
||||
|
||||
<span class="kw">invariant</span> <span class="st">"At most one pending action"</span> {
|
||||
<span class="op">!</span>(status == <span class="ty">Status</span>.<span class="st">Flip</span> && <span class="op">!</span>(status == <span class="ty">Status</span>.<span class="st">FlipBack</span>))
|
||||
}
|
||||
}</pre></div>
|
||||
|
||||
<p style="text-align:center; margin-top:1rem;">
|
||||
<strong>Type system:</strong> Int · Float · Bool · String · Enum · Struct · List<T> · Set<T> · Map<K,V> |
|
||||
<strong>Keywords:</strong> spec · type · state · init · action · require · set · emit · invariant
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="philosophy">
|
||||
<h2>Why Specifications?</h2>
|
||||
|
||||
<div class="philosophy-grid">
|
||||
<div class="philosophy-item">
|
||||
<h3>Small and Stable</h3>
|
||||
<p>Specs are orders of magnitude smaller than the code they generate. They change less often. The audit surface stays tractable.</p>
|
||||
<section id="examples">
|
||||
<h2>Real Examples</h2>
|
||||
|
||||
<div class="examples-grid">
|
||||
<div class="example-card">
|
||||
<h4>Two-Phase Commit</h4>
|
||||
<div class="meta">45 lines · 5 actions</div>
|
||||
<p>Classic distributed transaction coordinator. Voting phase, commit phase, abort path — fully specified with guard conditions.</p>
|
||||
</div>
|
||||
<div class="philosophy-item">
|
||||
<h3>Review the Boundary</h3>
|
||||
<p>If Speck→WASM compilation preserves semantics, human review at the spec boundary satisfies assurance requirements.</p>
|
||||
<div class="example-card">
|
||||
<h4>Paxos</h4>
|
||||
<div class="meta">120 lines · 3 safety invariants</div>
|
||||
<p>Consensus for unreliable networks. Prepare, promise, accept, commit — with "only one value chosen" invariant.</p>
|
||||
</div>
|
||||
<div class="philosophy-item">
|
||||
<h3>Two-Species Collaboration</h3>
|
||||
<p>SpeckDL is the shared space humans and AI both work in — human-judgeable, AI-writable, and compiler-enforced to the binary.</p>
|
||||
<div class="example-card">
|
||||
<h4>Raft</h4>
|
||||
<div class="meta">230 lines · 8 actions · 3 invariants</div>
|
||||
<p>Leader election, log replication, safety. The largest SpeckDL spec — demonstrates composition at scale.</p>
|
||||
</div>
|
||||
<div class="example-card">
|
||||
<h4>Forgejo Issue Workflow</h4>
|
||||
<div class="meta">9 actions · 8 guard conditions</div>
|
||||
<p>Real-world state machine: create → assign → review → merge → close. 5 temporal verification conditions.</p>
|
||||
</div>
|
||||
<div class="example-card">
|
||||
<h4>Access Control</h4>
|
||||
<div class="meta">RBAC system · clean TS output</div>
|
||||
<p>Role-based access with role addition, removal, and permission checks. One of 5 examples with zero TypeScript errors.</p>
|
||||
</div>
|
||||
<div class="example-card">
|
||||
<h4>+ 6 more</h4>
|
||||
<div class="meta">DrugDosageCalculator · PaymentService · RetryHandler · TemperatureMonitor · AccountLedger · TigerBeetle</div>
|
||||
<p><a href="https://os.scoble.me/forgejo/sscoble/speckl/src/branch/main/examples">Browse all 11 examples →</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="roadmap">
|
||||
<h2>Roadmap</h2>
|
||||
|
||||
<div class="roadmap">
|
||||
<div class="roadmap-phase">
|
||||
<h4>Phase A — Now</h4>
|
||||
<p><strong>Open Standard:</strong> SpeckDL language, Dark Provenance methodology, reference implementations.</p>
|
||||
<section id="strategy">
|
||||
<h2>Strategy Ladder</h2>
|
||||
<p>Speckl follows a four-step strategy — each step validates the market before building the next:</p>
|
||||
|
||||
<div class="strategy-ladder">
|
||||
<div class="strategy-step">
|
||||
<div class="phase">Plan A</div>
|
||||
<div class="label">Open Standard</div>
|
||||
<div class="status">✅ Complete</div>
|
||||
<p style="font-size:0.8rem;">MIT license. SpeckDL language + compiler + whitepaper — all public.</p>
|
||||
</div>
|
||||
<div class="roadmap-phase">
|
||||
<h4>Phase B — Parallel</h4>
|
||||
<p><strong>Consulting:</strong> Hands-on engagements with regulated-industry teams.</p>
|
||||
<div class="strategy-step">
|
||||
<div class="phase">Plan B</div>
|
||||
<div class="label">Consulting</div>
|
||||
<div class="status">🔄 Drafted</div>
|
||||
<p style="font-size:0.8rem;">Help regulated teams adopt spec-first workflows. One-pager ready.</p>
|
||||
</div>
|
||||
<div class="roadmap-phase">
|
||||
<h4>Phase C — 3-9mo</h4>
|
||||
<p><strong>SaaS:</strong> Spec editor, live Z3 verification, provenance graph browser.</p>
|
||||
<div class="strategy-step">
|
||||
<div class="phase">Plan C</div>
|
||||
<div class="label">Developer Tool / SaaS</div>
|
||||
<div class="status">🔮 Future</div>
|
||||
<p style="font-size:0.8rem;">Self-serve spec validation, CI/CD integration, team collaboration.</p>
|
||||
</div>
|
||||
<div class="roadmap-phase">
|
||||
<h4>Phase D — 9-18mo</h4>
|
||||
<p><strong>Compliance API:</strong> Audit reports, traceability matrices.</p>
|
||||
<div class="strategy-step">
|
||||
<div class="phase">Plan D</div>
|
||||
<div class="label">Compliance API</div>
|
||||
<div class="status">🔮 Future</div>
|
||||
<p style="font-size:0.8rem;">Automated audit reports, traceability matrices, regulatory filings.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="quickstart">
|
||||
<h2>Try It</h2>
|
||||
|
||||
<div class="code-block"><pre><span class="cm"># Clone the repo</span>
|
||||
git clone https://os.scoble.me/forgejo/sscoble/speckl.git
|
||||
<span class="kw">cd</span> speckl/compiler
|
||||
|
||||
<span class="cm"># Build and run tests (41 tests, ~2s)</span>
|
||||
npm install
|
||||
npm test
|
||||
|
||||
<span class="cm"># Compile a spec to all 5 artifacts</span>
|
||||
node dist/index.js ../examples/TwoPhaseCommit.speck -o out/twophase
|
||||
|
||||
<span class="cm"># Check TypeScript validity</span>
|
||||
npx tsc --noEmit -p out/twophase
|
||||
|
||||
<span class="cm"># Validate WASM (requires wabt)</span>
|
||||
wat2wasm out/twophase/TwoPhaseCommit.wat</pre></div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<p>Speckl is open source under the <a href="https://codeberg.org/sscoble/speckl/src/branch/main/LICENSE">MIT License</a>.</p>
|
||||
<p>Hosted at <a href="https://os.scoble.me">os.scoble.me</a> · Built by Scott Scoble / Greybeard Holdings</p>
|
||||
<p>Speckl is open source under the <a href="https://os.scoble.me/forgejo/sscoble/speckl/src/branch/main/LICENSE">MIT License</a>.</p>
|
||||
<p>
|
||||
<a href="https://os.scoble.me/forgejo/sscoble/speckl">Forgejo</a> ·
|
||||
<a href="https://codeberg.org/sscoble/speckl">Codeberg mirror</a> ·
|
||||
<a href="https://os.scoble.me/forgejo/sscoble/speckl/src/branch/main/docs/whitepaper-v2.md">Whitepaper v2</a> ·
|
||||
<a href="https://os.scoble.me/forgejo/sscoble/speckl/src/branch/main/docs/speckl-by-example.md">Tutorial</a> ·
|
||||
<a href="https://os.scoble.me/forgejo/sscoble/speckl/src/branch/main/docs/distribution-strategy.md">Distribution Strategy</a>
|
||||
</p>
|
||||
<p>Built by Scott Scoble · Greybeard Holdings</p>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue