W2: Editorial layer + Svelte islands + 3 issues ported#8
Merged
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (7)
🚧 Files skipped from review as they are similar to previous changes (7)
📝 WalkthroughWalkthroughAdds pagefind to the build, creates Astro and Svelte component libraries, implements field-notes and recipes content with layouts and routing, introduces trace-replay JSON sessions and an interactive replay island, and updates the homepage to surface dynamic content. ChangesContent, Components, and Trace Replay
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Warning Review ran into problems🔥 ProblemsStopped waiting for pipeline failures after 30000ms. One of your pipelines takes longer than our 30000ms fetch window to run, so review may not consider pipeline-failure results for inline comments if any failures occurred after the fetch window. Increase the timeout if you want to wait longer or run a Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (2)
src/components/islands/ArchitectureToggle.svelte (1)
22-49: ⚡ Quick winComplete the ARIA tabs pattern (or remove tab roles).
This uses
tablist/tabroles but misses associated tabpanel wiring and roving focus semantics, which can cause inconsistent keyboard and screen-reader behavior.Proposed accessibility-focused adjustment
<figure class="arch-toggle"> <div class="arch-toggle__tabs" role="tablist" aria-label="Architecture comparison"> <button + id="arch-tab-a" + type="button" role="tab" + tabindex={active === 'a' ? 0 : -1} + aria-controls="arch-panel" aria-selected={active === 'a'} class="arch-toggle__tab" class:arch-toggle__tab--active={active === 'a'} onclick={() => (active = 'a')} > {a.label} </button> <button + id="arch-tab-b" + type="button" role="tab" + tabindex={active === 'b' ? 0 : -1} + aria-controls="arch-panel" aria-selected={active === 'b'} class="arch-toggle__tab" class:arch-toggle__tab--active={active === 'b'} onclick={() => (active = 'b')} > {b.label} </button> </div> - <div class="arch-toggle__viewport"> + <div + id="arch-panel" + role="tabpanel" + aria-labelledby={active === 'a' ? 'arch-tab-a' : 'arch-tab-b'} + class="arch-toggle__viewport" + > {`#key` active} <img class="arch-toggle__img" src={current.src} alt={current.alt} /> {/key} </div>🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/islands/ArchitectureToggle.svelte` around lines 22 - 49, The component currently uses role="tablist" and role="tab" without tabpanel linkage or keyboard roving — either implement the full ARIA Tabs pattern or remove the tab roles: add unique ids to each tab button (e.g., the two buttons where onclick sets active), add a corresponding container for the image/figcaption with role="tabpanel" and aria-labelledby pointing to the active tab's id (use the existing current variable to render the panel), ensure tab buttons manage focus/keyboard (ArrowLeft/ArrowRight/Home/End) and update aria-selected and tabindex (0 for active, -1 for others) when active changes, or alternatively remove role="tablist" and role="tab" attributes to avoid exposing a broken tabs pattern.src/pages/recipes/index.astro (1)
33-36: ⚡ Quick winUse
import.meta.env.BASE_URLfor dynamic path construction instead of hard-coded/agentic-aiprefix.Lines 33 and 35 will break if the
baseconfig inastro.config.mjschanges. Replace with:
href={${import.meta.env.BASE_URL}recipes/${e.id}/}src={${import.meta.env.BASE_URL}assets/banners/${e.data.id}.png}This removes the coupling and makes the component portable across environments.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/pages/recipes/index.astro` around lines 33 - 36, The links and image paths in the recipes listing use a hard-coded "/agentic-ai" prefix which will break if astro.config.mjs base changes; update the href and src construction for the anchor and img in src/pages/recipes/index.astro (the anchor using e.id and the img using e.data.id and alt using e.data.title) to prepend import.meta.env.BASE_URL instead of "/agentic-ai" so the paths become base-aware and portable across environments.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/islands/ArchitectureToggle.svelte`:
- Around line 23-24: The tab buttons in ArchitectureToggle.svelte are missing an
explicit type and may act as form submit buttons; update both button elements
(the ones with role="tab" around the toggles) to include type="button" so they
do not trigger form submission—locate the two <button role="tab"> elements (the
one near the first toggle and the one around line ~32) and add type="button" to
each.
In `@src/components/islands/EvalRubric.svelte`:
- Line 56: The width calculation for the score bar in EvalRubric.svelte uses
(dim.score / dim.maxScore) * 100 and can produce Infinity/NaN when dim.maxScore
is 0 or negative; update the logic that renders the eval-rubric__bar-fill style
so it first checks dim.maxScore > 0, computes percentage = clamp((dim.score /
dim.maxScore) * 100, 0, 100) when valid, and falls back to 0% when dim.maxScore
is <= 0 (also ensure dim.score is coerced to a number before division).
In `@src/components/islands/TraceReplay.svelte`:
- Line 29: The code currently ignores a custom manifestUrl by building session
fetch paths against a hardcoded "/agentic-ai/trace-replay/" base; update the
session URL construction to resolve relative to the manifestUrl prop instead
(use the manifestUrl value passed into TraceReplay.svelte). Locate where session
fetches are built (references to manifestUrl and the session base path string or
the function that fetches sessions) and replace concatenation with a proper URL
resolution such as new URL(sessionPath, manifestUrl).toString() so all session
URLs are derived from the provided manifestUrl rather than the hardcoded path.
In `@src/components/islands/TraceViewer.svelte`:
- Line 8: The component expects loadedTrace.steps but incoming JSON uses trace;
update TraceViewer.svelte to normalize both shapes before rendering by mapping
either loadedTrace.trace or loadedTrace.steps into a single canonical array
(e.g., normalizedSteps) used throughout the component (references: loadedTrace,
steps, any iteration on loadedTrace.steps); perform this normalization as soon
as the prop is received or in onMount (or a helper function like normalizeTrace)
so all uses (including the loop around line 66 and code at 22-29) read from the
canonical normalizedSteps array instead of loadedTrace.steps.
In `@src/components/universal/Callout.astro`:
- Around line 10-21: The Callout component assumes Astro.props.type is valid;
normalize and validate it before use by defining the allowed keys (gotcha, warn,
tip) and mapping incoming type to one of them, e.g. sanitize the incoming type
string and if it isn't in the set fallback to 'tip'; then compute displayLabel
using defaultLabels[normalizedType] (with a fallback) and use normalizedType for
the modifier class (`callout--${normalizedType}`) so unknown or misspelled types
won't produce undefined labels or invalid classes.
In `@src/components/universal/Footer3Col.astro`:
- Around line 37-40: The "Read next" column (the div with class footer-3col__col
that contains the label and link) is rendered even when readNext is undefined,
producing an empty column; change the template in Footer3Col.astro to render
that entire div only when readNext is truthy (i.e., wrap or gate the whole
column containing the footer-3col__label and anchor with a conditional that
checks readNext so the label and link are omitted when readNext is missing).
In `@src/layouts/FieldNoteLayout.astro`:
- Around line 59-64: The "Cited by" list currently renders plain text; wrap each
entry in a navigable anchor that links to the referenced resource using its
collection and id (the items come from links.referencedBy and links.citedBy in
FieldNoteLayout.astro). Update the map that iterates over
[...links.referencedBy, ...links.citedBy] to return an anchor element per item
(instead of plain text) with accessible link text showing collection/id and an
href constructed from the item's collection and id so users can click through to
the citing content.
---
Nitpick comments:
In `@src/components/islands/ArchitectureToggle.svelte`:
- Around line 22-49: The component currently uses role="tablist" and role="tab"
without tabpanel linkage or keyboard roving — either implement the full ARIA
Tabs pattern or remove the tab roles: add unique ids to each tab button (e.g.,
the two buttons where onclick sets active), add a corresponding container for
the image/figcaption with role="tabpanel" and aria-labelledby pointing to the
active tab's id (use the existing current variable to render the panel), ensure
tab buttons manage focus/keyboard (ArrowLeft/ArrowRight/Home/End) and update
aria-selected and tabindex (0 for active, -1 for others) when active changes, or
alternatively remove role="tablist" and role="tab" attributes to avoid exposing
a broken tabs pattern.
In `@src/pages/recipes/index.astro`:
- Around line 33-36: The links and image paths in the recipes listing use a
hard-coded "/agentic-ai" prefix which will break if astro.config.mjs base
changes; update the href and src construction for the anchor and img in
src/pages/recipes/index.astro (the anchor using e.id and the img using e.data.id
and alt using e.data.title) to prepend import.meta.env.BASE_URL instead of
"/agentic-ai" so the paths become base-aware and portable across environments.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 4dd23cfb-f787-4c6c-806a-1b40f6e98f4c
⛔ Files ignored due to path filters (9)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yamlpublic/assets/banners/fn-001.pngis excluded by!**/*.pngpublic/assets/banners/fn-002.pngis excluded by!**/*.pngpublic/assets/banners/r-001.pngis excluded by!**/*.pngpublic/assets/illustrations/fn-001.pngis excluded by!**/*.pngpublic/assets/illustrations/fn-002.pngis excluded by!**/*.pngpublic/assets/illustrations/r-001.pngis excluded by!**/*.pngpublic/assets/images/logo.svgis excluded by!**/*.svgpublic/og-default.pngis excluded by!**/*.png
📒 Files selected for processing (29)
package.jsonpublic/trace-replay/how-do-i-evaluate-an-agent.jsonpublic/trace-replay/manifest.jsonpublic/trace-replay/multi-agent-got-worse.jsonpublic/trace-replay/should-i-use-an-agent.jsonsrc/components/homepage/WhatsNewStrip.astrosrc/components/islands/ArchitectureToggle.sveltesrc/components/islands/EvalRubric.sveltesrc/components/islands/TraceReplay.sveltesrc/components/islands/TraceViewer.sveltesrc/components/universal/Banner.astrosrc/components/universal/Callout.astrosrc/components/universal/Footer3Col.astrosrc/components/universal/Prerequisites.astrosrc/components/universal/RunItCTA.astrosrc/components/universal/Sources.astrosrc/components/universal/VerifiedStamp.astrosrc/content/fieldNotes/001-multi-agent-papers-nobody-cites.mdxsrc/content/fieldNotes/002-eval-rubric-failure-buckets.mdxsrc/content/recipes/001-strands-on-agentcore-runtime.mdxsrc/layouts/FieldNoteLayout.astrosrc/layouts/RecipeLayout.astrosrc/lib/content-helpers.test.tssrc/lib/content-helpers.tssrc/pages/field-notes/[...slug].astrosrc/pages/field-notes/index.astrosrc/pages/index.astrosrc/pages/recipes/[...slug].astrosrc/pages/recipes/index.astro
This was referenced May 13, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Week 2 of the mkdocs → Astro 5 migration. Builds on W1 (PR #7) which scaffolded the site + new homepage + manifesto. This PR:
$state,$props,$derived,$effect): TraceViewer, EvalRubric, ArchitectureToggle, TraceReplay.public/trace-replay/. Chip picker UI → loads selected session → replays response token-by-token with brick-red blinking cursor and final cost display. No live agent invocation, no proxy server, zero runtime cost./field-notes/and/recipes/with cadence pills, sorted by date desc.docs/assets/topublic/assets/.What's NOT in this PR (intentional)
docs/,mkdocs.yml, and.github/workflows/deploy.ymlare untouched. Live site continues to serve via mkdocs.Test Plan
pnpm install && pnpm test— expect 11/11 passing (3 new content-helpers + 8 existing)pnpm astro check— expect 0 errors, 0 warningspnpm build— expect 7 pages built + 5 redirect stubs + Pagefind index indist/pagefind/pnpm devand visit:http://localhost:4321/agentic-ai/— homepage, dynamic WhatsNewStrip shows FN-001, FN-002, R-001 cards, TraceReplay band at bottom with 3 chipshttp://localhost:4321/agentic-ai/field-notes/— magazine grid with both FN cards/field-notes/001-multi-agent-papers-nobody-cites/— full FN: banner with parallax, meta strip, kinetic heading, italic dek, body with pullquote + figures, sources list, 3-col footer/field-notes/002-eval-rubric-failure-buckets/— full FN with same anatomy/recipes/— magazine grid with R-001 card/recipes/001-strands-on-agentcore-runtime/— full Recipe: verified stamp, prerequisites with brick-red bullets, dark "Run it locally" CTA, Shiki-highlighted code blocks, Callout boxes (5 gotchas + 1 tip + 1 warning)prefers-reduced-motion: reduce— confirm banner parallax stops, hero kinetic fade-in is instant, TraceReplay cursor doesn't blink@scroll-timelinesupport), Houdini stamp still renders via SVG fallback/field-notes/001-multi-agent-papers-nobody-cites/— expect ≥ 95 on Performance, Accessibility, SEOSummary by CodeRabbit
New Features
New Content
Chores