Skip to content

Local-Bench UI: ollama serve hint, branded PDF export, response comparison, editable prompts, collapsible sections#31

Merged
FzzySwtr merged 13 commits into
mainfrom
feat/ollama-serve-hint-ui-polish
Jun 16, 2026
Merged

Local-Bench UI: ollama serve hint, branded PDF export, response comparison, editable prompts, collapsible sections#31
FzzySwtr merged 13 commits into
mainfrom
feat/ollama-serve-hint-ui-polish

Conversation

@FzzySwtr

@FzzySwtr FzzySwtr commented Jun 16, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

What

UI/feature work on the Local-Bench landing page, layered in several commits.

Ollama guidance

  • Hero lede + the "Ollama unavailable" note tell users to run ollama serve in a terminal; rendered as a click-to-copy chip.
  • When Ollama is down, the amber status dot pulses in a slow breathing glow (honors prefers-reduced-motion).

Branded PDF export

  • "Export PDF" button in the Detailed results header (appears once a run has results). Builds a branded report with jsPDF (vendored locally): teal LOCAL-BENCH header, system summary, stat boxes, results table.
  • Now also appends a "Model responses" part on the last pages — the prompt then each model's full response, paginated, long responses truncated with a note.

Model responses + side-by-side comparison (new)

  • benchmark.ts now returns each run's response + prompt (previously fetched then discarded). In-memory per run — no DB migration.
  • New Response comparison section: two model selectors (left/right) from the last run, each showing that model's response beside the shared prompt. Failed runs show a clear "no response" note.

Test prompt section reworked

  • Prompt-library cards are clickable to select and expandable to preview the prompt text.
  • The "Current prompt" is now an editable textarea, pre-filled from the chosen base prompt and used verbatim as what's sent to the model (per-run editing of the default).

Collapsible Model intelligence

  • Chevron toggle in the section header; auto-collapses once results are ready.

Type-scale / brand tweaks

  • Hero title −30%; wordmark 41px → 34px; brand logo 30px → 40px.

Verification

  • tsc build clean; 117/117 jest tests pass; PDF (incl. responses) validated via Node dry-run → valid multi-page %PDF; inline scripts syntax-checked. Live end-to-end with real model output needs Ollama running.

🤖 Generated with Claude Code

@FzzySwtr @claude
Add ollama serve hint, breathing status dot, smaller hero title
57d8cfd 
- Hero title reduced ~30% (2.4rem -> 1.68rem; mobile 1.7rem -> 1.19rem)
- Amber "Ollama unavailable" status dot now pulses with a slow, calm
  breathing glow; respects prefers-reduced-motion
- Lede and the catalog "unavailable" note now tell users to run
  `ollama serve` in a terminal application; the command renders as a
  click-to-copy command chip

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Copilot AI review requested due to automatic review settings June 16, 2026 02:00
Copilot AI reviewed Jun 16, 2026
View reviewed changes

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR updates the Local-Bench landing page UI to better guide users when Ollama isn’t running, and adds small visual polish to the hero and status indicator.

Changes:

  • Added inline “run ollama serve” guidance (including click-to-copy command chips).
  • Added a slow “breathing” animation to the “Ollama unavailable” status dot (with reduced-motion support).
  • Reduced the hero title font size for a tighter layout.

Comment thread index.html
<section class="hero">
<h1>Local LLM benchmark<br />&amp; intelligence catalog</h1>
<p class="lede">Measure throughput for the models you run locally via Ollama, and compare their skills at various tasks.</p>
<p class="lede">Measure throughput for the models you run locally via Ollama, and compare their skills at various tasks. Run Ollama with <code class="cmd" title="Click to copy">ollama serve</code> in a terminal application.</p>
Comment thread index.html
const customInstalledCount = models.filter(m => m.installed && !m.supported).length;
const note = options.ollamaUnavailable
? '<span class="note warn" style="flex:1 1 100%;margin-top:8px">Ollama is currently unavailable — showing the curated catalog only. Start Ollama to enable benchmarking.</span>'
? '<span class="note warn" style="flex:1 1 100%;margin-top:8px">Ollama is currently unavailable — showing the curated catalog only. Open a terminal application and run <code class="cmd" title="Click to copy">ollama serve</code> to start it, then refresh to enable benchmarking.</span>'
Comment thread index.html
border-radius: 6px; padding: 1px 7px; color: var(--ink);
cursor: pointer; white-space: nowrap; transition: background .12s ease;
}
code.cmd:hover { background: var(--surface); }
Comment thread index.html
Comment on lines +614 to +627
// Click an inline command chip (e.g. `ollama serve`) to copy it to the clipboard.
document.addEventListener('click', (event) => {
const chip = event.target.closest('code.cmd');
if (!chip || chip.classList.contains('copied')) return;
const command = chip.textContent;
const showCopied = () => {
chip.classList.add('copied');
chip.textContent = 'Copied!';
setTimeout(() => { chip.textContent = command; chip.classList.remove('copied'); }, 1100);
};
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(command).then(showCopied).catch(() => {});
}
});
FzzySwtr and others added 4 commits June 15, 2026 19:05
@FzzySwtr @claude
Increase brand logo height to 40px
3122bab 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@FzzySwtr @claude
Add branded PDF export of benchmark results; shrink wordmark to 34px
fa8ca81 
- New "Export PDF" button in the Detailed results header, hidden until
  a benchmark has run (results present), then shown
- exportResultsPdf() builds a branded PDF via jsPDF: a teal LOCAL-BENCH /
  Companion Intelligence header band, system summary, summary stat boxes,
  top-performer line, and a paginated results table (Model, IQ, Tokens/s,
  Total tokens, Duration, Timestamp, colored Status) with a confidential
  footer and page numbers
- Vendor jsPDF 2.5.2 UMD locally in assets/ (same pattern as Chart.js)
- Reduce top-bar wordmark (.brand-app) from 41px to 34px

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@FzzySwtr @claude
Make Model intelligence section collapsible; auto-collapse on results
c1409a7 
- Add a chevron toggle in the section header (upper right), wired to
  toggleIntelligence(); collapsing hides the card via a .collapsed class
  and flips the chevron
- Auto-collapse the section once when benchmark results become ready, so
  focus shifts to the run output; manual toggles afterward are preserved
- aria-expanded / aria-label kept in sync for accessibility

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@FzzySwtr @claude
Add model-response capture, side-by-side viewer, editable prompts
1ffea4d 
Backend:
- benchmark.ts: stop discarding the Ollama response — return `response`
  and `prompt` on each result (optional fields; no DB change, in-memory
  per run as decided)

Front end (index.html):
- Response comparison section: two model selectors (left/right) populated
  from the last run; shows each model's response and the shared prompt.
  Failed runs render a clear "no response" note. Driven by in-memory lastRun
- PDF export: append a "Model responses" part on fresh last pages — prompt
  then each model's response, paginated, long responses truncated with a note
- Test prompt section reworked: prompt-library cards are now clickable to
  select and expandable to preview the prompt text; the "Current prompt" is an
  editable textarea pre-filled from the chosen base prompt and is the single
  source of truth sent to the model (per-run default editing)

Verified: tsc build clean, 117/117 jest tests pass, PDF responses dry-run
produces a valid multi-page PDF, inline scripts syntax-checked.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@FzzySwtr FzzySwtr changed the title UI: add ollama serve hint, breathing status dot, smaller hero title Local-Bench UI: ollama serve hint, branded PDF export, response comparison, editable prompts, collapsible sections Jun 16, 2026
FzzySwtr and others added 8 commits June 15, 2026 22:42
@FzzySwtr @claude
Add docs/Discord footer links; rewrite README to be concise and plain
c6a71bb 
- Footer: link to Companion Intelligence docs (docs.ci.computer) and the
  Discord community, with hover styling
- README: rewritten to be user friendly and concise, no emoji or dashes,
  with a clear explanation of what the tool is and five examples of why it
  is useful; dropped the long catalog and API tables in favor of pointers

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@FzzySwtr @claude
Pad the header area 20px so the logo is not on the edge
632b17d 
.topbar-inner shares the .wrap class but its padding shorthand (14px 0)
was overriding .wrap's horizontal padding, leaving 0px left/right and
pushing the logo to the screen edge. Set padding to 20px.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@FzzySwtr @claude
Header padding: 14px vertical, 20px horizontal
beb7578 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@FzzySwtr @claude
Add in-app wiki-style docs with a Docs link in the main navigation
0a28741 
- New "Docs" link in the top bar navigation; toggles an in-page docs view
  via the #docs hash (deep-linkable, back link returns to the dashboard)
- Wiki-style page explaining what Local Bench shows and why, the types of
  prompts, and a brief guide to planning multi-agent systems, plus learn-more
  links to the CI docs and GitHub
- Reuses the existing design system and light/dark theme; no emoji or dashes

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@FzzySwtr @claude
Restyle in-app docs to CI-Import-Tools pattern (sidebar, tab per topic)
b140b32 
Replace the single scrolling docs page with the shared CI docs pattern: a
left sidebar listing each topic as a selectable item and a content pane that
shows one topic at a time. Topics: Overview, What it shows and why, Types of
prompts, Building multi-agent systems, Learn more. Styling maps the
CI-Import-Tools doc tokens onto the Local-Bench design system (light/dark).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@FzzySwtr @claude
Footer: rename link to Ecosystem, state AGPL-3.0 license, drop confid…
e73603b 
…ential line

- "Documentation" footer link renamed to "Ecosystem" (points to ci.computer)
- Replace the "Private & Confidential" line with the license: open source
  under the GNU Affero General Public License v3.0 (AGPL-3.0), matching CI-Hub
- Remove the em dash from the footer tagline

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@FzzySwtr @claude
License: add AGPL-3.0 LICENSE.md (matching CI-Hub); set package.json …
dfb4446 
…license

- Add LICENSE.md with the GNU Affero General Public License v3.0, copied from
  CI-Hub, so the repo license matches the footer claim
- Set package.json "license" to the SPDX id AGPL-3.0-only (was ISC)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@FzzySwtr @claude
Revert to CI-Commercial-1.0 license
06cc99b 
- Restore the Commercial Standard License (CI-Commercial-1.0) in LICENSE.md
- package.json license: "SEE LICENSE IN LICENSE.md" (custom proprietary license)
- Footer states the Companion Intelligence Commercial Standard License

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@FzzySwtr FzzySwtr merged commit 70e1102 into main Jun 16, 2026
1 check passed
@mrhegemon mrhegemon deleted the feat/ollama-serve-hint-ui-polish branch June 19, 2026 19:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@FzzySwtr