feat(native-el-ui): convert all component files to el-html vessel API
Dev — Build & local smoke test / build-smoke (pull_request) Failing after 4m48s

Replaced raw HTML heredoc returns with native el_ function calls across
all 21 component files. styles.el intentionally excluded.
This commit is contained in:
2026-05-08 22:35:41 -05:00
parent f2ab12e65b
commit 2553a6b7ac
21 changed files with 2550 additions and 2105 deletions
+141 -107
View File
@@ -2,6 +2,15 @@
// Accepts the founding counter values as parameters so main.el can inject
// server-side rendered counts without JS.
extern fn el_section(attrs: String, children: String) -> String
extern fn el_div(attrs: String, children: String) -> String
extern fn el_span(attrs: String, children: String) -> String
extern fn el_h2(attrs: String, text: String) -> String
extern fn el_p(attrs: String, children: String) -> String
extern fn el_ul(attrs: String, children: String) -> String
extern fn el_li(attrs: String, children: String) -> String
extern fn el_button(attrs: String, label: String) -> String
fn founding_spots_html(sold: Int, total: Int) -> String {
let remaining: Int = total - sold
let pct: Int = (sold * 100) / total
@@ -9,11 +18,47 @@ fn founding_spots_html(sold: Int, total: Int) -> String {
let remaining_str: String = int_to_str(remaining)
let sold_str: String = int_to_str(sold)
let total_str: String = int_to_str(total)
return <div class="founding-spots">
<p class="founding-spots-label">Only {remaining_str} left</p>
<div class="founding-spots-bar"><div class="founding-spots-fill" style="width:{pct_str}%"></div></div>
<p class="founding-spots-sub">{sold_str} of {total_str} claimed</p>
</div>
el_div(
"class=\"founding-spots\"",
el_p("class=\"founding-spots-label\"", "Only " + remaining_str + " left") +
el_div(
"class=\"founding-spots-bar\"",
el_div("class=\"founding-spots-fill\" style=\"width:" + pct_str + "%\"", "")
) +
el_p("class=\"founding-spots-sub\"", sold_str + " of " + total_str + " claimed")
)
}
fn pricing_free_features() -> String {
el_li("", el_span("class=\"dash\"", "-") + el_span("", "Persistent memory - never resets")) +
el_li("", el_span("class=\"dash\"", "-") + el_span("", "Bring your own API keys (OpenAI, Anthropic, Grok...)")) +
el_li("", el_span("class=\"dash\"", "-") + el_span("", "Local inference via Ollama (coming)")) +
el_li("", el_span("class=\"dash\"", "-") + el_span("", "Neuron Inference included when it launches - Q3 2026")) +
el_li("", el_span("class=\"dash\"", "-") + el_span("", "Unlimited projects")) +
el_li("", el_span("class=\"dash\"", "-") + el_span("", "3 marketplace plugins included")) +
el_li("", el_span("class=\"dash\"", "-") + el_span("", "Core built-in capabilities"))
}
fn pricing_pro_features() -> String {
el_li("", el_span("class=\"dash\"", "-") + el_span("", "Bring your own API keys - use any model, any provider")) +
el_li("", el_span("class=\"dash\"", "-") + el_span("", "Neuron Inference - Q3 2026, priced below OpenAI and Anthropic")) +
el_li("", el_span("class=\"dash\"", "-") + el_span("", "Everything in Free")) +
el_li("", el_span("class=\"dash\"", "-") + el_span("", "Unlimited projects")) +
el_li("", el_span("class=\"dash\"", "-") + el_span("", "Full plugin marketplace")) +
el_li("", el_span("class=\"dash\"", "-") + el_span("", "Advanced integrations - IDE, Slack, and more")) +
el_li("", el_span("class=\"dash\"", "-") + el_span("", "Early access to new features"))
}
fn pricing_founding_features() -> String {
el_li("", el_span("class=\"dash\"", "-") + el_span("", "Neuron Inference (Q3 2026) - founding member rate, priced below the major APIs")) +
el_li("", el_span("class=\"dash\"", "-") + el_span("", "Everything in Professional - forever")) +
el_li("", el_span("class=\"dash\"", "-") + el_span("", "Never pay again - lifetime updates included")) +
el_li("", el_span("class=\"dash\"", "-") + el_span("", "Founding member badge in the app")) +
el_li("", el_span("class=\"dash\"", "-") + el_span("", "Private founding member community")) +
el_li("", el_span("class=\"dash\"", "-") + el_span("", "Shape the roadmap - your votes carry more weight")) +
el_li("", el_span("class=\"dash\"", "-") + el_span("", "Beta features before general release")) +
el_li("", el_span("class=\"dash\"", "-") + el_span("", "Name in the credits"))
}
fn pricing(sold: Int, total: Int) -> String {
@@ -24,113 +69,102 @@ fn pricing(sold: Int, total: Int) -> String {
let remaining_str: String = int_to_str(remaining)
let total_str: String = int_to_str(total)
return <section id="pricing" aria-label="Pricing">
<div class="container">
let header: String = el_div(
"class=\"pricing-header\"",
el_div(
"class=\"pricing-label-row reveal\"",
el_div("style=\"height:1px;width:4rem;background:linear-gradient(to right,transparent,rgba(0,82,160,.35))\"", "") +
el_span("class=\"label\" style=\"color:var(--navy-85)\"", "Pricing") +
el_div("style=\"height:1px;width:4rem;background:linear-gradient(to left,transparent,rgba(0,82,160,.35))\"", "")
) +
el_h2("class=\"display-lg pricing-headline reveal\" style=\"transition-delay:80ms\"", "Own it. Don&#39;t rent it.") +
el_p("class=\"pricing-sub reveal\" style=\"transition-delay:160ms\"",
"Bring your own API keys on day one. Neuron Inference - our own model layer, priced below the major APIs - launches Q3 2026."
)
)
<div class="pricing-header">
<div class="pricing-label-row reveal">
<div style="height:1px;width:4rem;background:linear-gradient(to right,transparent,rgba(0,82,160,.35))"></div>
<span class="label" style="color:var(--navy-85)">Pricing</span>
<div style="height:1px;width:4rem;background:linear-gradient(to left,transparent,rgba(0,82,160,.35))"></div>
</div>
<h2 class="display-lg pricing-headline reveal" style="transition-delay:80ms">Own it. Don&#39;t rent it.</h2>
<p class="pricing-sub reveal" style="transition-delay:160ms">Bring your own API keys on day one. Neuron Inference - our own model layer, priced below the major APIs - launches Q3 2026.</p>
</div>
let card_free: String = el_div(
"class=\"pricing-card card-dark reveal\"",
el_p("class=\"pricing-tier\"", "Free") +
el_div(
"class=\"pricing-price-row\"",
el_span("class=\"pricing-price\"", "$0") +
el_span("class=\"pricing-cadence\"", "forever")
) +
el_p("class=\"pricing-tagline\"", "Start building your memory. No card required.") +
el_ul("class=\"pricing-features\"", pricing_free_features()) +
el_div("style=\"flex:1\"", "") +
el_div(
"class=\"pricing-cta pricing-cta-ghost\"",
el_button("class=\"pricing-cta-ghost\" data-checkout=\"free\"", "Preorder free tier &#8594;")
)
)
<div class="pricing-grid">
let card_pro: String = el_div(
"class=\"pricing-card card-dark reveal\" style=\"transition-delay:150ms\"",
el_p("class=\"pricing-tier\"", "Professional") +
el_div(
"class=\"pricing-price-row\"",
el_span("class=\"pricing-price\"", "$19") +
el_span("class=\"pricing-cadence\"", "/ month")
) +
el_p("class=\"pricing-tagline\"", "Full access. Use your own API keys now. Neuron Inference when it launches.") +
el_ul("class=\"pricing-features\"", pricing_pro_features()) +
el_div("style=\"flex:1\"", "") +
el_div(
"class=\"pricing-cta pricing-cta-navy\"",
el_button("class=\"pricing-cta-navy\" data-checkout=\"professional\"", "Preorder &#8594;")
)
)
<div class="pricing-card card-dark reveal">
<p class="pricing-tier">Free</p>
<div class="pricing-price-row">
<span class="pricing-price">$0</span>
<span class="pricing-cadence">forever</span>
</div>
<p class="pricing-tagline">Start building your memory. No card required.</p>
<ul class="pricing-features">
<li><span class="dash">-</span><span>Persistent memory - never resets</span></li>
<li><span class="dash">-</span><span>Bring your own API keys (OpenAI, Anthropic, Grok...)</span></li>
<li><span class="dash">-</span><span>Local inference via Ollama (coming)</span></li>
<li><span class="dash">-</span><span>Neuron Inference included when it launches - Q3 2026</span></li>
<li><span class="dash">-</span><span>Unlimited projects</span></li>
<li><span class="dash">-</span><span>3 marketplace plugins included</span></li>
<li><span class="dash">-</span><span>Core built-in capabilities</span></li>
</ul>
<div style="flex:1"></div>
<div class="pricing-cta pricing-cta-ghost">
<button class="pricing-cta-ghost" data-checkout="free">Preorder free tier &#8594;</button>
</div>
</div>
let card_founding: String = el_div(
"class=\"pricing-card featured reveal\" style=\"transition-delay:300ms\"",
el_p("class=\"pricing-tier\"", "Founding Member") +
el_div(
"class=\"pricing-price-row\"",
el_span("class=\"pricing-price\"", "$199") +
el_span("class=\"pricing-cadence\"", "lifetime")
) +
el_p("class=\"pricing-tagline\"", "Pay once. Everything, forever. Including Neuron Inference when it launches.") +
spots_html +
el_ul("class=\"pricing-features\"", pricing_founding_features()) +
el_div("style=\"flex:1\"", "") +
el_div(
"class=\"pricing-cta pricing-cta-solid\"",
el_button("class=\"pricing-cta-solid\" data-checkout=\"founding\"", "Preorder &#8212; claim your spot &#8594;")
)
)
<div class="pricing-card card-dark reveal" style="transition-delay:150ms">
<p class="pricing-tier">Professional</p>
<div class="pricing-price-row">
<span class="pricing-price">$19</span>
<span class="pricing-cadence">/ month</span>
</div>
<p class="pricing-tagline">Full access. Use your own API keys now. Neuron Inference when it launches.</p>
<ul class="pricing-features">
<li><span class="dash">-</span><span>Bring your own API keys - use any model, any provider</span></li>
<li><span class="dash">-</span><span>Neuron Inference - Q3 2026, priced below OpenAI and Anthropic</span></li>
<li><span class="dash">-</span><span>Everything in Free</span></li>
<li><span class="dash">-</span><span>Unlimited projects</span></li>
<li><span class="dash">-</span><span>Full plugin marketplace</span></li>
<li><span class="dash">-</span><span>Advanced integrations - IDE, Slack, and more</span></li>
<li><span class="dash">-</span><span>Early access to new features</span></li>
</ul>
<div style="flex:1"></div>
<div class="pricing-cta pricing-cta-navy">
<button class="pricing-cta-navy" data-checkout="professional">Preorder &#8594;</button>
</div>
</div>
let grid: String = el_div("class=\"pricing-grid\"", card_free + card_pro + card_founding)
<div class="pricing-card featured reveal" style="transition-delay:300ms">
<p class="pricing-tier">Founding Member</p>
<div class="pricing-price-row">
<span class="pricing-price">$199</span>
<span class="pricing-cadence">lifetime</span>
</div>
<p class="pricing-tagline">Pay once. Everything, forever. Including Neuron Inference when it launches.</p>
let banner_fill: String = el_div(
"class=\"founding-banner-fill\" style=\"width:" + pct_str + "%\"",
""
)
let banner: String = el_div(
"class=\"founding-banner reveal\"",
el_div(
"",
el_p("class=\"founding-banner-label\"", "Founding Member Spots") +
el_div(
"style=\"display:flex;align-items:baseline;gap:.5rem;margin:.25rem 0\"",
el_span("class=\"founding-banner-count\"", remaining_str) +
el_span("class=\"founding-banner-sub\"", "remaining of " + el_span("", total_str))
) +
el_div("class=\"founding-banner-bar\"", banner_fill)
) +
el_button("class=\"btn-primary\" data-checkout=\"founding\" style=\"white-space:nowrap\"", "Preorder &#8594;")
)
{raw(spots_html)}
let fine1: String = el_p("class=\"pricing-fine reveal\" style=\"margin-top:2.5rem\"",
"Bring your own API keys &nbsp;&middot;&nbsp; Local inference via Ollama (coming) &nbsp;&middot;&nbsp; Neuron Inference - Q3 2026 &nbsp;&middot;&nbsp; Your data stays yours"
)
let fine2: String = el_p("class=\"pricing-fine reveal\" style=\"margin-top:1rem;font-size:0.8rem\"",
"Includes 2 devices per plan &nbsp;&middot;&nbsp; Additional devices available at a small extra cost &nbsp;&middot;&nbsp; We&#39;re not greedy"
)
<ul class="pricing-features">
<li><span class="dash">-</span><span>Neuron Inference (Q3 2026) - founding member rate, priced below the major APIs</span></li>
<li><span class="dash">-</span><span>Everything in Professional - forever</span></li>
<li><span class="dash">-</span><span>Never pay again - lifetime updates included</span></li>
<li><span class="dash">-</span><span>Founding member badge in the app</span></li>
<li><span class="dash">-</span><span>Private founding member community</span></li>
<li><span class="dash">-</span><span>Shape the roadmap - your votes carry more weight</span></li>
<li><span class="dash">-</span><span>Beta features before general release</span></li>
<li><span class="dash">-</span><span>Name in the credits</span></li>
</ul>
<div style="flex:1"></div>
<div class="pricing-cta pricing-cta-solid">
<button class="pricing-cta-solid" data-checkout="founding">Preorder claim your spot &#8594;</button>
</div>
</div>
</div>
<div class="founding-banner reveal">
<div>
<p class="founding-banner-label">Founding Member Spots</p>
<div style="display:flex;align-items:baseline;gap:.5rem;margin:.25rem 0">
<span class="founding-banner-count">{remaining_str}</span>
<span class="founding-banner-sub">remaining of <span>{total_str}</span></span>
</div>
<div class="founding-banner-bar"><div class="founding-banner-fill" style="width:{pct_str}%"></div></div>
</div>
<button class="btn-primary" data-checkout="founding" style="white-space:nowrap">Preorder &#8594;</button>
</div>
<p class="pricing-fine reveal" style="margin-top:2.5rem">
Bring your own API keys &nbsp;&middot;&nbsp; Local inference via Ollama (coming) &nbsp;&middot;&nbsp; Neuron Inference - Q3 2026 &nbsp;&middot;&nbsp; Your data stays yours
</p>
<p class="pricing-fine reveal" style="margin-top:1rem;font-size:0.8rem">
Includes 2 devices per plan &nbsp;&middot;&nbsp; Additional devices available at a small extra cost &nbsp;&middot;&nbsp; We&#39;re not greedy
</p>
</div>
</section>
el_section(
"id=\"pricing\" aria-label=\"Pricing\"",
el_div("class=\"container\"", header + grid + banner + fine1 + fine2)
)
}