feat(frontend): Agora 2026 design exploration at /agora-2026#482
feat(frontend): Agora 2026 design exploration at /agora-2026#482arn0ld87 wants to merge 2 commits into
Conversation
Vue port of the Claude Design handoff bundle (Agora 2026.html) — an editorial Data-Room aesthetic with persistent model pill and per-step model strip that solves the recurring "LLM-Anbieter zwischen Schritten händisch eingeben" pain. - Opt-in via [data-theme="agora-2026"] on route mount; leaves the production v4 shell (Sidebar/Topbar/AppShell) untouched. - Two screens at full fidelity from the bundle: Dashboard (Operator Workbench with hero + per-step model strip + stats + active runs + system health) and Runs (editorial hero band + registry table). - Tokens, fonts (Geist + Newsreader + JetBrains Mono), shell, model pill ported scoped under .a26-root to avoid global FOUC.
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces the 'Agora 2026' design exploration, featuring a new editorial-style theme using OKLCH color tokens and custom typography. The changes include a new route, a layout shell with a sidebar and topbar, and several screens such as a Dashboard and a Runs history view. Feedback was provided to address security concerns regarding the use of v-html for SVG rendering, the need for internationalization of hardcoded strings, and the removal of inline styles in favor of CSS classes. Additionally, a suggestion was made to improve type safety within the navigation logic.
| </script> | ||
|
|
||
| <template> | ||
| <span class="a26-icon" v-html="svg" aria-hidden="true" /> |
There was a problem hiding this comment.
Using v-html to render SVG strings is a security risk as it can lead to Cross-Site Scripting (XSS) if the content is not properly sanitized or if it becomes dynamic in the future. While the current icons are static constants, it is better to use a safer approach, such as rendering the SVG elements directly or using a dedicated icon component library.
| </div> | ||
| </div> | ||
|
|
||
| <div class="a26-rail-section">Arbeitsbereich</div> |
There was a problem hiding this comment.
The application uses i18n for translations, but several new components in the Agora 2026 exploration contain hardcoded German strings. These should be moved to the locale files and accessed via $t() to maintain consistency and support internationalization. This applies to all user-facing text in the new screens.
<div class="a26-rail-section">{{ $t('agora2026.shell.workspace') }}</div>
There was a problem hiding this comment.
Skipping for this PR — /agora-2026 is a design exploration with the handoff bundle's literal German fixture copy ("DACH · Tech-Adoption", "Workbench", "Run-Center · gesamt", etc.) which is the design's intent, not user-facing production strings. Threading 30+ keys through vue-i18n for an exploration that may still be iterated on is premature; we'll i18n once concrete screens land in the production v4 shell. The opt-in route gate ([data-theme="agora-2026"]) keeps this isolated from translated production views.
Generated by Claude Code
|
|
||
| <template> | ||
| <Shell active="dashboard" :crumbs="['Workbench', 'Dashboard']" @nav="emit('nav', $event)"> | ||
| <div class="dash-stack" style="max-width: 1280px"> |
There was a problem hiding this comment.
There are numerous inline styles used throughout this component. For better maintainability and to adhere to the project's styling patterns, these should be moved to the scoped <style> block. For example, the max-width on line 67 can be added to the .dash-stack class.
<div class="dash-stack">
| function onNav(key: string): void { | ||
| if (key === 'dashboard' || key === 'runs') { | ||
| active.value = key | ||
| } | ||
| } |
There was a problem hiding this comment.
The onNav function uses a manual string check which is brittle. Since ScreenKey is already defined, you can improve type safety by using a type guard or checking against a list of valid keys. This ensures that adding new screens in the future won't require manual updates to this logic.
function onNav(key: string): void {
const validScreens: ScreenKey[] = ['dashboard', 'runs']
if (validScreens.includes(key as ScreenKey)) {
active.value = key as ScreenKey
}
}
- Icon.vue: render each icon as a Vue functional component via h() + <component :is>, eliminating v-html. Icons stay static, but the pattern is now safe-by-construction if any icon ever takes input. - Agora2026View.vue: replace string-equality check on screen keys with a type-guard against a SCREEN_KEYS tuple. Adding a new screen now only needs the tuple update. - DashboardScreen.vue: lift the structural inline styles (max-width on .dash-stack, .hero-title margin, .hero-meta width, hero-actions flex) into the scoped <style>.
Summary
Vue port of the Claude Design handoff bundle
Agora 2026.html— aneditorial Data-Room aesthetic (Geist + Newsreader serif + JetBrains Mono,
warm oklch + cobalt indigo) with the design's key innovation: a
persistent model pill in the topbar and a per-step model strip
on the run-creation hero that solves the recurring "LLM-Anbieter zwischen
Schritten händisch eingeben" pain.
[data-theme="agora-2026"]set on route mount;production v4 shell (Sidebar/Topbar/AppShell) is untouched. All tokens,
fonts, and components are scoped under
.a26-root.dropzone + template/language/question fields, per-step model strip
(inherit/override badges), stats row with sparklines, active runs
table with progress bars, system health panel.
headline), filter bar with tabs, full registry table with
status/confidence/model/branch columns.
Shell.vue(sidebar + topbar + model pill),ModelPill.vue(3-segment: Workspace · Provider · Model + pulse-livedot),
ProvMark.vue(per-provider color marks).index.html; only rendered under theopt-in theme attribute.
Out of scope (left for follow-up)
(3 of the 5 design artboards). Land these as separate slices once
the design direction is validated.
Current implementation uses the design's reference fixtures so the
visual fidelity matches the handoff 1:1.
Test plan
bun run typecheckclean (verified locally, exit 0)bun run buildclean (verified locally, exit 0; Agora2026Viewships as its own ~24 kB chunk)
bun run lintclean (verified locally, exit 0)/agora-2026: verify editorial theme renders,sidebar+topbar+model pill present, switching Dashboard ↔ Runs via
the sidebar works.
/agora-2026: verify the rest of the appstill renders in the v4 (Apple-style) theme.
https://claude.ai/code/session_01B4vgeCveko3hu3jzhrbvzq
Generated by Claude Code