Skip to content

Landing: framed demo video; drop Clients and Surfaces mocks #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
makefunstuff merged 2 commits into from
Sep 20, 2026
Merged

Landing: framed demo video; drop Clients and Surfaces mocks #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0805a2d
Landing: video-only demo in CSS window; drop Clients/Surfaces mocks
makefunstuff Sep 20, 2026
e1ec0d8
Landing: video-only demo in CSS window; drop Clients/Surfaces mocks
makefunstuff Sep 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
213 changes: 16 additions & 197 deletions site/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@
<nav class="toc" aria-label="Primary">
<a href="#loop">How it works</a>
<a href="#demo">Demo</a>
<a href="#clients">Clients</a>
<a href="#start">Start</a>
<a class="toc-gh" href="https://github.com/makefunstuff/jev-lsp">GitHub</a>
</nav>
Expand Down Expand Up @@ -99,71 +98,27 @@ <h1>Steer code with rules, not with token maxxing.</h1>


<!-- ========== DEMO: silent slop-detection triptych ========== -->
<section id="demo" class="sec">
<section id="demo" class="sec sec-demo">
<div class="shell">
<header class="sec-head">
<p class="eyebrow"><span class="eyebrow-dot" aria-hidden="true"></span>Demo</p>
<h2>Same <code>no-ai-slop</code> hit in three clients</h2>
<p class="sec-lead">OpenCode writes a matching comment and gets the diagnostic. Neovim shows it as virtual text. VS Code clears it with a code action. Silent, ~32s.</p>
</header>

<figure class="demo-frame">
<video controls playsinline preload="metadata" width="100%"
poster="./assets/demo-slop-triptych-poster.jpg"
aria-label="Silent screencap: OpenCode, Neovim, and VS Code on the same no-ai-slop finding">
<source src="./assets/demo-slop-triptych.mp4" type="video/mp4">
</video>
<figcaption>OpenCode → Neovim → VS Code · ordinary LSP diagnostic</figcaption>
</figure>
</div>
</section>

<!-- ========== SEE: full-bleed machine demo ========== -->
<section id="see" class="sec sec-machine">
<div class="shell">
<header class="sec-head">
<p class="eyebrow"><span class="eyebrow-dot" aria-hidden="true"></span>Surfaces</p>
<h2>Findings on the line: same surfaces your client already has</h2>
<p class="sec-lead">On save, matching lines become diagnostics a harness or editor already understands. No custom <code>jev/…</code> methods.</p>
</header>

<figure class="demo-frame">
<div class="win win-lg mock-harness" aria-label="Harness write loop mockup">
<div class="win-chrome">
<span class="traffic" aria-hidden="true"><i></i><i></i><i></i></span>
<span class="win-title">harness · write loop</span>
<span class="win-meta">OMP · ordinary diagnostic</span>
</div>
<div class="term">
<div class="term-line"><span class="prompt">$</span> agent write crates/jev-lsp/src/server.rs</div>
<div class="term-line dim">… generating handler …</div>
<div class="term-line"><span class="ok">✓</span> wrote 24 lines</div>
<div class="term-sep"></div>
<div class="editor-pane embedded">
<div class="ed-gutter" aria-hidden="true">
<span>410</span><span>411</span><span class="g-warn">412</span><span>413</span><span>414</span>
</div>
<div class="ed-lines">
<div class="ed-row"><span class="tok">fn</span> <span class="fn">handle_request</span>(msg: Request) {</div>
<div class="ed-row"> <span class="tok">let</span> body = msg.payload();</div>
<div class="ed-row find">
<span class="find-bar" aria-hidden="true"></span>
<span> <span class="tok">let</span> data = body.<span class="fn">unwrap</span>();</span>
<span class="virt">// jev · fail · p=0.91</span>
</div>
<div class="ed-row"> process(data);</div>
<div class="ed-row">}</div>
</div>
</div>
<div class="term-line"><span class="amb">← finding on generated line</span> · harness reads it like any diagnostic</div>
<div class="term-line"><span class="prompt">$</span> agent fix --from-diagnostics</div>
</div>
<p class="eyebrow"><span class="eyebrow-dot" aria-hidden="true"></span>Demo</p>
<div class="win win-lg demo-screen" aria-label="Product demo">
<div class="win-chrome">
<span class="traffic" aria-hidden="true"><i></i><i></i><i></i></span>
<span class="win-title">demo · OpenCode → Neovim → VS Code</span>
<span class="win-meta">silent · ~32s</span>
</div>
<div class="demo-video">
<video controls playsinline preload="metadata"
poster="./assets/demo-slop-triptych-poster.jpg"
aria-label="Silent screencap across OpenCode, Neovim, and VS Code">
<source src="./assets/demo-slop-triptych.mp4" type="video/mp4">
</video>
</div>
<figcaption>Harness write → jev finding on the generated line → fix. Ordinary diagnostic.</figcaption>
</figure>
</div>
</div>
</section>


<!-- ========== NOT CHAT: asymmetric compare ========== -->
<section id="not-chat" class="sec">
<div class="shell split">
Expand Down Expand Up @@ -272,142 +227,6 @@ <h2>One line costs less than a whole-file chat</h2>
</div>
</section>

<!-- ========== CLIENTS: one-at-a-time showcase (CSS radio tabs) ========== -->
<section id="clients" class="sec sec-clients">
<div class="shell">
<header class="sec-head">
<p class="eyebrow"><span class="eyebrow-dot" aria-hidden="true"></span>Clients</p>
<h2>Same findings in a harness, Neovim, or VS Code</h2>
<p class="sec-lead">No custom methods. Neovim is primary (<code>nvim/</code>). Anything that starts a language server works, harnesses included. VS Code / Cursor via <code>editors/cursor/</code>.</p>
<p class="chips" aria-label="LSP surfaces">
<span class="chip">diagnostics</span>
<span class="chip">code actions</span>
<span class="chip">code lens</span>
</p>
</header>

<div class="client-showcase">
<input class="client-radio" type="radio" name="client-view" id="client-harness" checked>
<input class="client-radio" type="radio" name="client-view" id="client-nvim">
<input class="client-radio" type="radio" name="client-view" id="client-vsc">

<div class="client-seg" role="tablist" aria-label="Client">
<label class="client-seg-btn" for="client-harness" role="tab">Harness</label>
<label class="client-seg-btn" for="client-nvim" role="tab">Neovim</label>
<label class="client-seg-btn" for="client-vsc" role="tab">VS Code</label>
</div>

<div class="client-stage">
<!-- Harness -->
<figure class="client-panel panel-harness">
<div class="win mock-harness" aria-label="Harness client mockup">
<div class="win-chrome">
<span class="traffic" aria-hidden="true"><i></i><i></i><i></i></span>
<span class="win-title">Harness</span>
<span class="win-meta">agent · diagnostics</span>
</div>
<div class="term">
<div class="term-line dim">lsp publishDiagnostics · server.rs</div>
<div class="editor-pane embedded">
<div class="ed-gutter" aria-hidden="true">
<span>411</span><span class="g-warn">412</span><span>413</span>
</div>
<div class="ed-lines">
<div class="ed-row"> <span class="tok">let</span> body = msg.payload();</div>
<div class="ed-row find">
<span class="find-bar" aria-hidden="true"></span>
<span> <span class="tok">let</span> data = body.<span class="fn">unwrap</span>();</span>
</div>
<div class="ed-row"> process(data);</div>
</div>
</div>
<div class="diag-pill">jev · fail · p=0.91 · no-unwrap</div>
<div class="term-line dim">harness reads Diagnostic[] → steers next write</div>
</div>
</div>
<figcaption>Terminal / agent loop: finding on the generated line, ordinary diagnostic payload.</figcaption>
</figure>

<!-- Neovim -->
<figure class="client-panel panel-nvim">
<div class="win mock-nvim" aria-label="Neovim client mockup">
<div class="win-chrome">
<span class="traffic" aria-hidden="true"><i></i><i></i><i></i></span>
<span class="win-title">Neovim</span>
<span class="win-meta">primary client</span>
</div>
<div class="nvim-status">
<span class="nvim-mode">NORMAL</span>
<span class="dim">server.rs</span>
<span class="nvim-right">utf-8 · rust</span>
</div>
<div class="editor-pane nvim-pane">
<div class="ed-gutter" aria-hidden="true">
<span>410</span><span>411</span><span class="g-warn">412</span><span>413</span><span>414</span>
</div>
<div class="ed-lines">
<div class="ed-row"><span class="tok">fn</span> <span class="fn">handle_request</span>(msg: Request) {</div>
<div class="ed-row"> <span class="tok">let</span> body = msg.payload();</div>
<div class="ed-row find">
<span class="find-bar" aria-hidden="true"></span>
<span> <span class="tok">let</span> data = body.<span class="fn">unwrap</span>();</span>
<span class="virt">■ jev: fail p=0.91</span>
</div>
<div class="ed-row"> process(data);</div>
<div class="ed-row">}</div>
</div>
</div>
</div>
<figcaption>Gutter sign + virtual text beside the line, next to clangd or your other LS.</figcaption>
</figure>

<!-- VS Code -->
<figure class="client-panel panel-vsc">
<div class="win mock-vsc" aria-label="VS Code client mockup">
<div class="win-chrome">
<span class="traffic" aria-hidden="true"><i></i><i></i><i></i></span>
<span class="win-title">VS Code</span>
<span class="win-meta">editors/cursor/</span>
</div>
<div class="vsc-tabs">
<span class="vsc-tab on">server.rs</span>
<span class="vsc-tab">mod.rs</span>
</div>
<div class="vsc-body">
<div class="vsc-rail" aria-hidden="true"></div>
<div class="editor-pane vsc-pane">
<div class="ed-gutter" aria-hidden="true">
<span>410</span><span>411</span><span class="g-warn">412</span><span>413</span><span>414</span>
</div>
<div class="ed-lines">
<div class="ed-row"><span class="tok">fn</span> <span class="fn">handle_request</span>(msg: Request) {</div>
<div class="ed-row"> <span class="tok">let</span> body = msg.payload();</div>
<div class="ed-row find">
<span class="find-bar" aria-hidden="true"></span>
<span class="squiggle"> <span class="tok">let</span> data = body.<span class="fn">unwrap</span>();</span>
<span class="bulb" title="code action">💡</span>
</div>
<div class="ed-row"> process(data);</div>
<div class="ed-row">}</div>
</div>
<div class="vsc-hover">
<div class="hover-title">jev · no-unwrap</div>
<div class="hover-body"><span class="amb">fail</span> · p=0.91</div>
<div class="hover-lens">jev: explain</div>
</div>
</div>
</div>
<div class="vsc-problems">
<span class="prob-label">Problems</span>
<span class="prob-item"><span class="amb">●</span> unwrap may fail · server.rs:412</span>
</div>
</div>
<figcaption>Squiggle + hover + lightbulb; explain as code lens. Problems panel lists the finding.</figcaption>
</figure>
</div>
</div>
</div>
</section>

<!-- ========== START: sticky-feeling install ========== -->
<section id="start" class="sec sec-start">
Expand Down
27 changes: 26 additions & 1 deletion site/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -988,4 +988,29 @@ tr.mark strong { color: var(--accent); }
border-right: 1px solid var(--line-strong);
}
.fact-strip li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.fact-strip strong { color: var(--ink-soft); font-weight: 600; }
.fact-strip strong { color: var(--ink-soft); font-weight: 600; }

/* ---------- demo video frame ---------- */
.sec-demo {
padding-block: clamp(2.5rem, 6vw, 4rem);
}
.sec-demo .eyebrow { margin-bottom: 1.1rem; }
.demo-screen {
overflow: hidden;
box-shadow: var(--shadow-float);
max-width: 56rem;
}
.demo-video {
background: #000;
line-height: 0;
}
.demo-video video {
display: block;
width: 100%;
height: auto;
vertical-align: top;
background: #000;
}
@media (max-width: 719px) {
.demo-screen .win-meta { display: none; }
}
Loading