openvibers/openvibe.codes Commits

Home: a taste and a door on phones (#154)

OP OpenVibers committed 15 days ago · 308575a56d · 4 files, +40 −17

The agents are one row that scrolls sideways on a phone (all of them still
there), how a task finds its agent, the quick start and what works today fold
under one heading, four repositories show (all are a link away), the questions
are closed (each keeps its <h3>; the first is open), the closing call that
repeated the network block goes, and the hero has two actions. CSS budgets raw
36 -> 37 and brotli 7.3 -> 7.9 (measured 36.4 and 7.7).

Changes

ddiff --git a/public/css/codes.css b/public/css/codes.css
iindex c5ccea7..24dd4a2 100644
---- a/public/css/codes.css
++++ b/public/css/codes.css
@@@ -94,3 +94,24 @@ meter.headroom { width: 8rem; max-width: 100%; vertical-align: middle; }
.codes-faq > div { padding: 16px 18px; border-radius: 16px; border: 1px solid var(--border, #1f2d47); background: var(--bg-secondary, #101828); }
.codes-faq h3 { margin: 0 0 6px; font-size: 15.5px; line-height: 1.35; }
.codes-faq p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-secondary, #96a7c2); }
++
++/* The home on phones (2026-10-29): a taste and a door. The agents are one sideways row (all of them still there), four
++ repositories show, how it works is one fold under its heading, the questions are closed. */
++.codes-fold { border: 1px solid var(--border, #1f2d47); border-radius: 16px; background: var(--bg-secondary, #101828); }
++.codes-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 18px; cursor: pointer; list-style: none; }
++.codes-fold > summary::-webkit-details-marker { display: none; }
++.codes-fold > summary h2 { margin: 0; }
++.codes-fold > summary span { color: var(--text-muted, #7386a3); font-weight: 600; font-size: .86rem; text-align: right; }
++.codes-fold > summary:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: -2px; border-radius: 16px; }
++.codes-fold .sc-sec { max-width: none; margin: 0; padding: 0 18px 18px; }
++.codes-faq details > summary { list-style: none; cursor: pointer; }
++.codes-faq details > summary::-webkit-details-marker { display: none; }
++.codes-faq details > summary h3::after { content: '+'; float: right; margin-left: 10px; color: var(--text-muted, #7386a3); font-weight: 400; }
++.codes-faq details[open] > summary h3::after { content: '\2212'; }
++@media (max-width: 599px) {
++ #agents .sc-grid { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; gap: 10px; margin-left: -16px; margin-right: -16px; padding: 0 16px 4px; }
++ #agents .sc-grid::-webkit-scrollbar { display: none; }
++ #agents .sc-grid > * { flex: 0 0 78%; min-width: 0; scroll-snap-align: start; }
++ .codes-repos > li:nth-child(n+5) { display: none; }
++ .codes-fold > summary span { display: none; }
++}
ddiff --git a/server/http/home.js b/server/http/home.js
iindex d7c5bfd..a12896b 100644
---- a/server/http/home.js
++++ b/server/http/home.js
@@@ -117,6 +117,6 @@ function faqPairs() {
const seen = new Set();
return [...own, ...EXTRA_FAQ].filter((p) => !seen.has(p.q) && seen.add(p.q));
}
--const faq = () => `<section class="sc-sec" id="faq" aria-labelledby="h-faq"><h2 id="h-faq">Questions people ask</h2><div class="codes-faq">${faqPairs().map((p) => `<div><h3>${esc(p.q)}</h3><p>${esc(p.a)}</p></div>`).join('')}</div></section>`;
++const faq = () => `<section class="sc-sec" id="faq" aria-labelledby="h-faq"><h2 id="h-faq">Questions people ask</h2><div class="codes-faq">${faqPairs().map((p, i) => `<details${i === 0 ? ' open' : ''}><summary><h3>${esc(p.q)}</h3></summary><p>${esc(p.a)}</p></details>`).join('')}</div></section>`;
module.exports = { createGitReader, gitSection, quickStart, faq, faqPairs, ago };
ddiff --git a/server/http/pages.js b/server/http/pages.js
iindex 560d262..e81b6bc 100644
---- a/server/http/pages.js
++++ b/server/http/pages.js
@@@ -100,6 +100,16 @@ run run_20261008… · ~/my-project
→ Edit test/date.test.js
Added test/date.test.js: three cases, all pass.
✔ done (48 s · $0.0400 · 31k in / 1.2k out)`;
++ // What works today: the state of each piece, read with how it works.
++ const statusTable = table(['Piece', 'State'], [
++ [html`<a href="/start">The harness on your machine</a> (<code>openvibe-codes</code>)`, `Live, ${VERSION}: runs a task on any of the eight agents with your CLIs and keys, streams one event format, keeps every run to show or resume.`],
++ ['Hand-offs between agents', 'Live: a failed, rate-limited or silent agent hands the task to the next one with a note on what was done.'],
++ [html`<a href="/run">Run on your machine</a>: start a task in any browser, your phone included; your own computer runs it`, 'Live: add your machine on openvibe.bot/machines (one command), then watch the task live here and get the patch, a branch or a pull request. It runs only on your own machines, in the Node\'s job sandbox.'],
++ [html`<a href="/harnesses">The agent catalog</a>`, 'Live: every harness and model with its capabilities, prices and limits.'],
++ [html`<code>GET /api/v1/harnesses</code>, <code>POST /api/v1/harnesses/route</code>`, 'Live: public, no key needed; per-address and per-caller limits.'],
++ [html`<a href="/improve">Improve OpenVibe</a>: a repository, a change on a branch with its test, a pull request that CI checks and a maintainer reviews`, 'Live: pick a repository, describe the change, and start a guided run on your machine.'],
++ [html`<a href="${config.git.publicUrl}/">OpenVibe Git</a>: OpenVibe's own code forge`, 'Live: every public OpenVibe repository, mirrored from GitHub hourly, with OpenVibe sign-in and HTTPS cloning. GitHub stays canonical until a repository moves here.'],
++ ]);
return {
agent: true, index: true, cache: PUBLIC_CACHE,
jsonLd: [...homeJsonLd(config), seo.jsonLd.faq(home.faqPairs())],
@@@ -108,7 +118,8 @@ Added test/date.test.js: three cases, all pass.
eyebrow: 'OpenVibe.Codes · the open coding-agent harness · alpha',
title: 'Code with', accent: 'any agent',
lede: 'One open harness for Claude Code, Codex, OpenCode, Command Code, Aider, the DeepSeek API and models you host yourself: send a coding task to the agent that fits it, hand it over when one gets stuck, and keep the whole run in one place. Then point it at OpenVibe itself.',
-- actions: [{ label: 'Install the harness', href: '/start', primary: true }, { label: 'Run on your machine from the web', href: '/run' }, { label: 'Meet the agents', href: '/harnesses' }],
++ // Two, so they sit side by side on a phone; the agents are the next section.
++ actions: [{ label: 'Install the harness', href: '/start', primary: true }, { label: 'Run on your machine from the web', href: '/run' }],
note: `Open source (AGPL-3.0). Version ${VERSION} runs on your machine with the agents and keys you already have, from your terminal or started from this site in any browser; the list below says exactly what works.`,
aside: { html: `<pre tabindex="0" class="codes-hero-code"><code>${showcase.esc(snippet)}</code></pre>` },
}))}
@@@ -116,7 +127,7 @@ ${raw(showcase.features({
id: 'agents', title: 'The agents', lede: `${offers.length} harnesses in the catalog, each with the models it runs. Routing picks one by what the task needs first, then by cost.`,
items: offers.map((o) => ({ title: o.name, text: [o.provider, ...flagsOf(o.capabilities).slice(0, 3)].join(' · '), href: `/harnesses#${o.id}` })),
}))}
--${raw(showcase.steps({
++<section class="sc-sec" aria-labelledby="h-how"><details class="codes-fold"><summary><h2 id="h-how">How it works</h2><span>routing, the quick start, what works today</span></summary>${raw(showcase.steps({
title: 'How a task finds its agent',
items: [
{ title: 'Describe the task', text: `One of ${tasks.join(', ')}, plus anything it must have: a capability, a runtime, a ceiling on cost.` },
@@@ -126,23 +137,14 @@ ${raw(showcase.steps({
],
}))}
${raw(home.quickStart({ install: INSTALL }))}
++<section class="sc-sec" aria-labelledby="h-status"><h3 id="h-status">What works today</h3>
++${raw(statusTable)}</section></details></section>
${raw(home.gitSection((ctx.git || gitReader).peek()))}
<section class="sc-sec" aria-labelledby="h-improve"><h2 id="h-improve">Improve OpenVibe</h2>
<p class="sc-lede">OpenVibe is built in the open, ${repositories().running.length} services and their shared libraries, every one on GitHub. Pick a repository, describe the change, and send a pull request; the harness's job is to make that one step.</p>
<p><a class="sc-btn sc-primary" href="/improve">Start contributing</a> <a class="sc-btn" href="/policy/contributing">Read the guide</a></p></section>
--<section class="sc-sec" aria-labelledby="h-status"><h2 id="h-status">What works today</h2>
--${table(['Piece', 'State'], [
-- [html`<a href="/start">The harness on your machine</a> (<code>openvibe-codes</code>)`, `Live, ${VERSION}: runs a task on any of the eight agents with your CLIs and keys, streams one event format, keeps every run to show or resume.`],
-- ['Hand-offs between agents', 'Live: a failed, rate-limited or silent agent hands the task to the next one with a note on what was done.'],
-- [html`<a href="/run">Run on your machine</a>: start a task in any browser, your phone included; your own computer runs it`, 'Live: add your machine on openvibe.bot/machines (one command), then watch the task live here and get the patch, a branch or a pull request. It runs only on your own machines, in the Node\'s job sandbox.'],
-- [html`<a href="/harnesses">The agent catalog</a>`, 'Live: every harness and model with its capabilities, prices and limits.'],
-- [html`<code>GET /api/v1/harnesses</code>, <code>POST /api/v1/harnesses/route</code>`, 'Live: public, no key needed; per-address and per-caller limits.'],
-- [html`<a href="/improve">Improve OpenVibe</a>: a repository, a change on a branch with its test, a pull request that CI checks and a maintainer reviews`, 'Live: pick a repository, describe the change, and start a guided run on your machine.'],
-- [html`<a href="${config.git.publicUrl}/">OpenVibe Git</a>: OpenVibe's own code forge`, 'Live: every public OpenVibe repository, mirrored from GitHub hourly, with OpenVibe sign-in and HTTPS cloning. GitHub stays canonical until a repository moves here.'],
-- ])}</section>
${raw(home.faq())}
--${raw(showcase.network({ service: 'codes' }))}
--${raw(showcase.cta({ title: 'Building an app instead?', text: 'Projects, keys, grants and the API docs of every OpenVibe service live on OpenVibe.Services.', actions: [{ label: 'Open the developer platform', href: SERVICES_ORIGIN, primary: true }, { label: 'Meet the agents', href: '/harnesses' }] }))}`,
++${raw(showcase.network({ service: 'codes' }))}`,
};
}
r.get('/', (req, res) => page(req, res, homePage()));
ddiff --git a/test/perf-budget.test.js b/test/perf-budget.test.js
iindex 70e9d6e..bf2dc91 100644
---- a/test/perf-budget.test.js
++++ b/test/perf-budget.test.js
@@@ -18,8 +18,8 @@ const BUDGETS = {
jsRawKB: 308, // 307.8 with openvibe-shared 4.43.0 (room.css carries the kit tokens, 4.39.1; the kit's 4.39.0 rules); 300.5 openvibe-shared 4.25.0: the menu's orb beside the brand, both balances on phones, messages, the account sheet on phones and the bar stepping away on phones; 293 openvibe-shared 4.22.0: the navbar's magnifier search button and More dropdown (search.js and loading.js load only when used); 287.2 Shared 4.17.0: OpenCoins and Vibes chips (wallet: true) in the navbar; 273.2 openvibe-shared 4.15 footer: the compact footer opens into the whole one, and the pulse line; 263.4 with shared 4.11.0's seasonal navbar; 254.1 with openvibe-shared 4.9.0 (status text twins in every theme, 2026-10-23); 246.2 with openvibe-shared 4.2.x (Ask Actor in the navbar, 2026-10-15); 239.1 (212.2 before openvibe-shared/shell's web-runtime.js)
jsBrotliKB: 77, // 76.1 with openvibe-shared 4.43.0 (room.css carries the kit tokens, 4.39.1; the kit's 4.39.0 rules); 74.2 openvibe-shared 4.25.0: the menu's orb beside the brand, both balances on phones, messages, the account sheet on phones and the bar stepping away on phones; 70.5 Shared 4.17.0: OpenCoins and Vibes chips (wallet: true) in the navbar; 67.9 openvibe-shared 4.15 footer: the compact footer opens into the whole one, and the pulse line; 65.3 Shared 4.12.0: the light/dark switch, the seasonal mark and the theme pairs; 61.7 with shared 4.11.0's seasonal navbar; 59.1 with openvibe-shared 4.4.0 (every site in the launcher, 2026-10-17); 56.3 (49.9 before web-runtime.js)
cssFiles: 2, // 1
-- cssRawKB: 36, // 32 openvibe-shared 4.26.1 (hero visual); 26.5 with Shared 4.13.0 (2026-10-26: account links); about 19.2 with the repository cards and FAQ styles (2026-10-22); 17.3 (codes.css + the cached /shared/showcase.css)
-- cssBrotliKB: 7.3, // raised for openvibe-shared v4.39.0 (+1.5 KB raw of kit/room/showcase CSS); measured 7.3
++ cssRawKB: 37, // 36.4 the home's phone row, fold and closed questions (2026-10-29); 32 openvibe-shared 4.26.1 (hero visual); 26.5 with Shared 4.13.0 (2026-10-26: account links); about 19.2 with the repository cards and FAQ styles (2026-10-22); 17.3 (codes.css + the cached /shared/showcase.css)
++ cssBrotliKB: 7.9, // 7.7 the home's phone row, fold and closed questions (2026-10-29); raised for openvibe-shared v4.39.0 (+1.5 KB raw of kit/room/showcase CSS); measured 7.3
externalFiles: 2, // 0
};