Refresh the viewer shell with Stitch redesign#26
Merged
Conversation
- Rework the landing page, link creator, and artifact viewer - Update shell styling and theme toggle to match the new visual direction
Contributor
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughAdds a factory settings file, many Playwright UI snapshot fixtures, multiple static landing and artifact-viewer HTML variants (light/dark, desktop/mobile), two design-spec docs, a large global CSS theme overhaul, small visual tweaks to a few components, and increases MAX_FRAGMENT_LENGTH to 8192. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
Deploying agent-render with
|
| Latest commit: |
278e37f
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://bc2d0209.agent-render.pages.dev |
| Branch Preview URL: | https://stitch-redesign.agent-render.pages.dev |
![chatgpt-codex-connector[bot]](https://waps.l3s.uni-hannover.de/live/im_/https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 89a8ee07fe
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| @@ -0,0 +1,274 @@ | |||
| - generic [active] [ref=e1]: | |||
There was a problem hiding this comment.
This file is a generated Playwright MCP UI snapshot (timestamped filename with serialized page state and full fragment URLs), not source code consumed by the app or tests, so keeping it in git will bloat history and create constant churn/conflicts every time local captures are regenerated. These artifacts should be kept untracked and excluded from commits.
Useful? React with 👍 / 👎.
![coderabbitai[bot]](https://waps.l3s.uni-hannover.de/live/im_/https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 17
🧹 Nitpick comments (16)
Stitch/landing_page_mobile_dark/code.html (2)
10-11: Duplicate Material Symbols stylesheet request.Line 10 already includes
Material Symbols Outlined; Line 11 requests it again. This adds unnecessary network work.Suggested cleanup
-<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Stitch/landing_page_mobile_dark/code.html` around lines 10 - 11, The page loads the same Material Symbols Outlined font twice—remove the duplicate <link> element whose href starts with "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" (the second occurrence) so the stylesheet is only requested once; keep the combined multi-font <link> (the one that already includes Material Symbols Outlined) and delete the redundant separate Material Symbols <link>.
109-109: Conflicting nav background classes reduce style clarity.Line 109 has both
bg-[#0B0C1F]/60andbg-[#0B0C1F]/10; the latter wins, so the first is effectively dead and makes intent ambiguous.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Stitch/landing_page_mobile_dark/code.html` at line 109, The nav element's class string contains two conflicting background utility classes (bg-[`#0B0C1F`]/60 and bg-[`#0B0C1F`]/10) making intent ambiguous; edit the nav element's class attribute to remove the unwanted duplicate and leave a single bg[`#0B0C1F`]/<opacity> utility that matches the intended opacity (either /60 or /10), ensuring you update only the class list on the nav tag so the final markup contains one background class.Stitch/landing_page_dark/code.html (5)
245-245: Consider moving inline style to CSS class.The Material Symbols icon uses an inline style for font variation settings. For consistency and maintainability, consider defining this in a CSS class.
♻️ Optional refactor
Add to the
<style>block:.material-symbols-filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }Then update the HTML:
-<span class="material-symbols-outlined text-primary mb-8" style="font-variation-settings: 'FILL' 1;">format_quote</span> +<span class="material-symbols-outlined material-symbols-filled text-primary mb-8">format_quote</span>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Stitch/landing_page_dark/code.html` at line 245, The span using inline style "font-variation-settings: 'FILL' 1;" should be refactored into a CSS class for maintainability: add a class (e.g., .material-symbols-filled) in the page's <style> block that defines the desired font-variation-settings (and any other standard symbol variations), then remove the inline style from the span with classes "material-symbols-outlined text-primary mb-8" and add the new class to that element so the style is applied via CSS rather than inline.
12-12: Consider externalizing Tailwind configuration for production.Using the Tailwind CDN with inline configuration is acceptable for prototypes and demos, but for production deployments you should consider:
- Installing Tailwind via npm and using a build process for smaller bundle sizes and better performance
- Moving the configuration to a
tailwind.config.jsfile for maintainability- Enabling JIT mode and purging unused styles
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Stitch/landing_page_dark/code.html` at line 12, Replace the inline Tailwind CDN usage (<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>) with a production build: install tailwindcss via npm, add a tailwind.config.js (move any inline config there), wire Tailwind into your build pipeline (PostCSS/Vite/Webpack) to generate a bundled CSS file, enable JIT/purge/content settings in tailwind.config.js to remove unused styles, and update the HTML to reference the compiled CSS instead of the CDN script.
184-187: Add accessibility attributes to decorative SVG.The SVG "thinking indicator" is decorative and should be hidden from assistive technologies to avoid confusion.
♿ Proposed accessibility enhancement
-<svg class="stroke-primary fill-none opacity-40" height="100" viewbox="0 0 100 100" width="100"> +<svg class="stroke-primary fill-none opacity-40" height="100" viewBox="0 0 100 100" width="100" aria-hidden="true" role="presentation"> <circle cx="50" cy="50" r="40" stroke-dasharray="10 5"></circle> <path d="M50 10 A40 40 0 0 1 90 50" stroke-width="2"></path> </svg>Note: Also corrected
viewboxtoviewBox(camelCase) for SVG spec compliance.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Stitch/landing_page_dark/code.html` around lines 184 - 187, The decorative SVG (the <svg> element containing the <circle> and <path> used as the "thinking indicator") should be hidden from assistive tech and use correct SVG attribute casing: change viewbox to viewBox and add accessibility attributes aria-hidden="true" and focusable="false" on the <svg> element (do not add an accessible title/role since it's decorative); ensure the inner <circle> and <path> remain unchanged.
154-154: Consider overflow handling for fixed-height console.The console panel has a fixed height of
400pxwithoverflow-hidden. If the content exceeds this height, it will be clipped without scrolling capability. Consider addingoverflow-y-autoor ensuring content fits within the height constraint.💡 Suggested enhancement
-<div class="bg-surface-container-lowest p-6 font-label text-[11px] text-primary/80 leading-relaxed overflow-hidden h-[400px] w-full lg:w-[380px]"> +<div class="bg-surface-container-lowest p-6 font-label text-[11px] text-primary/80 leading-relaxed overflow-y-auto h-[400px] w-full lg:w-[380px]">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Stitch/landing_page_dark/code.html` at line 154, The fixed-height console div with class "bg-surface-container-lowest p-6 font-label text-[11px] text-primary/80 leading-relaxed overflow-hidden h-[400px] w-full lg:w-[380px]" currently clips overflowing content; replace or augment the "overflow-hidden" utility with a scrolling behavior (e.g., "overflow-y-auto" or "overflow-auto") on that div so content can be scrolled within the 400px container and optionally keep "overflow-hidden" only for x-axis if intended.
105-111: Prefer Tailwind color tokens over hardcoded hex values.Multiple instances use hardcoded colors like
#FF8757,#0B0C1F, and#F1E7FFinstead of the defined Tailwind tokens (text-primary,bg-background,text-tertiary). This reduces maintainability and breaks design system consistency.Consider updating all hardcoded color references to use tokens from your Tailwind configuration. For example:
#FF8757→primary#0B0C1F→background#F1E7FF→tertiary🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Stitch/landing_page_dark/code.html` around lines 105 - 111, Replace hardcoded hex colors in the navbar markup with your Tailwind tokens: swap bg-[`#0B0C1F`] usages to bg-background (including any repeated backdrop/opacity classes), change text-[`#FF8757`] to text-primary (for the "Agent Render" span and active nav link and border-b color), and change text-[`#F1E7FF`] to text-tertiary (for the non-active links). Update the nav element, the span with "Agent Render", and the three anchor tags (the active Docs link uses border-b) to use text-primary, bg-background, text-tertiary and their appropriate border-{color} token equivalents so styling follows the design tokens rather than hex values.Stitch/artifact_viewer_dark/code.html (2)
215-217: Copyright year may be outdated.The copyright shows "© 2024" but the current year is 2026. If this showcase page will be published, consider updating to the current year or using a dynamic range.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Stitch/artifact_viewer_dark/code.html` around lines 215 - 217, Update the hardcoded copyright year shown in the div with class "font-['IBM_Plex_Mono'] text-[0.6875rem] uppercase tracking-tighter text-[`#F1E7FF`] opacity-60" (the line containing "© 2024 AGENT RENDER PROTOCOL") to use the current year (2026) or replace it with a dynamic solution that computes the current year at runtime (e.g., via a small JS snippet that inserts new Date().getFullYear()) so the displayed year stays up to date.
8-9: Duplicate Google Fonts link.The Material Symbols Outlined font is linked twice (lines 8-9). Consider removing the duplicate.
🧹 Remove duplicate link
<link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&family=Space+Grotesk:wght@300..700&family=IBM+Plex+Mono:wght@300;400;600&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/> -<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Stitch/artifact_viewer_dark/code.html` around lines 8 - 9, There are two identical <link> tags referencing the Material Symbols Outlined font (the href containing "family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"); remove the duplicate link so only one <link href="https://fonts.googleapis.com/...Material+Symbols+Outlined..." rel="stylesheet"/> remains, leaving the other distinct Newsreader/Space+Grotesk/IBM+Plex+Mono combined link untouched.Stitch/artifact_viewer_mobile_light/code.html (2)
7-8: Duplicate Google Fonts link.The Material Symbols Outlined font is linked twice (lines 7-8). Consider removing the duplicate.
🧹 Remove duplicate link
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/> -<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Stitch/artifact_viewer_mobile_light/code.html` around lines 7 - 8, Remove the duplicated Google Fonts <link> tag that imports "Material+Symbols+Outlined" (the two identical <link href="https://fonts.googleapis.com/...Material+Symbols+Outlined..."> entries); keep a single instance of that <link> and delete the redundant one so the font is only loaded once.
229-229: External image URLs may be unstable.The showcase uses
lh3.googleusercontent.comURLs for images. These URLs may be temporary or subject to change. For a more durable design showcase, consider hosting images locally or using stable CDN URLs.Also applies to: 262-262
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Stitch/artifact_viewer_mobile_light/code.html` at line 229, The image element using src="https://lh3.googleusercontent.com/..." (the <img> with class "w-full h-full object-cover grayscale opacity-50 contrast-125") relies on an unstable external Googleusercontent URL; replace it with a durable source by either adding a local asset path or a stable CDN URL, update any references to the same image (also at line ~262), and provide a fallback strategy (e.g., use a local copy or <picture> with a fallback src) so the showcase does not break if the external URL expires.Stitch/artifact_viewer_light/code.html (2)
271-273: Copyright year may be outdated.Similar to the dark theme showcase, the copyright shows "© 2024" but the current year is 2026.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Stitch/artifact_viewer_light/code.html` around lines 271 - 273, The copyright line currently hardcodes "© 2024" inside the paragraph element (the <p class="font-['IBM_Plex_Mono'] text-[12px] uppercase text-[`#1c1c18`'] opacity-60"> node); update it to use the current year instead of 2024—either replace the hardcoded "2024" with the correct year (2026) or, preferably, render the year dynamically (e.g., using new Date().getFullYear()) wherever the template is generated so the paragraph always shows the current year.
7-8: Duplicate Google Fonts link.The Material Symbols Outlined font is linked twice (lines 7-8). This pattern appears in all three static HTML showcase files.
🧹 Remove duplicate link
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/> -<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Stitch/artifact_viewer_light/code.html` around lines 7 - 8, Remove the duplicate Google Fonts link tag: eliminate one of the identical <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/> entries in the artifact_viewer_light code.html (the duplicate <link ... rel="stylesheet"/> for Material Symbols Outlined). Do the same cleanup in the other two static HTML showcase files so each file includes the font link only once..playwright-mcp/page-2026-04-01T07-26-40-717Z.yml (1)
274-281: Capture the shell without the dev-only route indicator.These lines include framework chrome (
Static routeplus the alert region), so the artifact depends on the capture environment instead of just the viewer shell. If you keep this snapshot, generate it with that overlay disabled.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In @.playwright-mcp/page-2026-04-01T07-26-40-717Z.yml around lines 274 - 281, The snapshot includes framework chrome (the "Static route" text, the "Hide static indicator" button and the alert region) which makes the artifact environment-dependent; update the test before capturing to remove or hide these elements by either (a) programmatically disabling the dev overlay in the viewer/test harness, (b) clicking the "Hide static indicator" button (button "Hide static indicator" / img refs e328/e329) so the "Static route" node (ref e327/e323) is gone, or (c) mask/remove the alert node (ref e332) from the DOM before taking the snapshot so the captured shell contains only the viewer content.src/app/globals.css (1)
709-717: Use an inset accent instead of a real left border.The
3pxleft border changes the active card’s inner width, so longer titles can reflow as selection changes. An inset shadow or pseudo-element gives the same emphasis without moving content.🪄 Non-jittering accent treatment
.dark .artifact-switcher.is-active { - border-left: 3px solid var(--accent); + box-shadow: + inset 3px 0 0 var(--accent), + inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent); }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app/globals.css` around lines 709 - 717, The active state uses a real left border (.dark .artifact-switcher.is-active) which shifts inner width and causes title reflow; replace that physical border with a non-intrusive inset accent (e.g., use an inset box-shadow or a ::before pseudo-element positioned on the left with the same color/width) so the visual emphasis remains but layout and content width don't change — update the .dark .artifact-switcher.is-active rule to remove border-left and apply an inset shadow or add a left-positioned pseudo-element for the accent instead..playwright-mcp/page-2026-04-01T07-26-25-621Z.yml (1)
1-272: Consider keeping Playwright-MCP page dumps out of git.This looks like a generated inspection artifact rather than a stable regression asset. The timestamped filename and embedded fragment payloads will churn on nearly every copy/layout tweak, while the real contract still lives in the app and Playwright assertions.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In @.playwright-mcp/page-2026-04-01T07-26-25-621Z.yml around lines 1 - 272, This review flags a generated Playwright-MCP page dump being committed; remove the specific generated artifact (the Playwright-MCP page dump) from the repo, add a gitignore rule to exclude future Playwright-MCP dumps, and update the Playwright/test config that emits MCP page dumps (the MCP/page-dump output settings in your Playwright configuration) to write to a dedicated artifacts directory that is not committed (and/or to upload to CI artifacts if you need retention); if the file has already landed on the default branch, use git rm --cached and a history-rewrite procedure (or coordinate a revert) to remove it from tracked history.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/app/globals.css`:
- Around line 98-115: The CSS blocks are missing required blank lines between
custom-property declarations and regular declarations, causing stylelint's
declaration-empty-line-before to fail; update both the root-like block where
--font-display / --font-sans are defined (and the following
font-family/background) and the .dark body block (where --font-display /
--font-sans are set before font-family/background) by inserting a single empty
line between the custom-property group and the subsequent non-custom-property
declarations so the linter recognizes the separator.
- Around line 1434-1444: The CSS is forcing a grayscale filter on all markdown
images (.markdown-article img) and only restoring color on hover, which alters
screenshots/diagrams and never restores color for non-hover contexts
(print/touch); remove the global filter rules or scope them to a deliberate
decorative class instead—e.g., stop applying filter: grayscale(0.2) and the
.markdown-article img:hover rule, or change the selector to target only images
with a specific class like .markdown-article img.decorative so artifact images
remain faithful by default while still allowing a styled subset to use the
grayscale hover effect.
In `@Stitch/artifact_viewer_mobile_dark/code.html`:
- Around line 9-10: The file contains a duplicated Material Symbols stylesheet
link (two identical <link
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined...">
entries); remove one of the duplicate <link> elements so only a single
stylesheet import remains (leave the remaining <link> with the Material Symbols
href intact).
- Line 116: The header element's class list contains two overlapping background
utilities (bg-[`#0B0C1F`]/60 and bg-[`#0B0C1F`]/10) where the latter overrides the
former; edit the header element's class attribute (the <header ...> with the
fixed top-0 ... classes) to remove the unwanted bg-[`#0B0C1F`]/10 (or
bg-[`#0B0C1F`]/60 if that was unintended) so only a single bg-[`#0B0C1F`]/<opacity>
class remains, preserving the intended background opacity.
In `@Stitch/landing_page_dark/code.html`:
- Line 231: The <img> element uses a nonstandard data-alt attribute which
prevents screen readers from seeing the alternative text; update the <img> tag
in Stitch/landing_page_dark/code.html (the image element with class "absolute
inset-0 w-full h-full object-cover opacity-40 mix-blend-overlay") to replace
data-alt with the standard alt attribute (preserve the existing descriptive
text) and remove the data-alt attribute so the image has a proper alt="" value
for accessibility.
- Around line 10-11: Remove the duplicate Google Fonts Material Symbols
stylesheet link in the HTML so the same href
"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
appears only once; locate the two identical <link> tags in
Stitch/landing_page_dark/code.html and delete one of them to avoid the redundant
HTTP request.
- Around line 278-289: Replace all placeholder href="#" anchors with the real
destination URLs: find the nav anchors labeled "Docs", "GitHub", and "About"
(the anchors in the header/navigation block) and update their href attributes to
the correct docs, repo, and about page URLs; also update the footer anchors for
"GitHub" and "Wiki" (the <a> elements shown next to the Repository/Documentation
labels) with their production GitHub repo and documentation/wiki URLs so no
href="#" placeholders remain.
- Line 119: The aside element's class list declares flex twice ("lg:flex" and an
unconditional "flex"), so remove the redundant unconditional "flex" token from
the class attribute on the <aside> element (the element starting with <aside
class="hidden lg:flex fixed ...">) so that it only uses the responsive "lg:flex"
variant; ensure spacing in the class string remains correct after removal.
- Line 105: The nav element's class list contains two conflicting background
utilities (bg-[`#0B0C1F`]/60 and bg-[`#0B0C1F`]/10) so Tailwind will only apply the
latter; edit the <nav> class attribute (the nav element with classes shown) to
keep the intended background opacity by removing the unwanted bg utility, or
replace both with a single Tailwind color token/variable (e.g., a single bg-...
or bg-[color]/<opacity>) so only one background rule is present.
In `@Stitch/landing_page_light/code.html`:
- Around line 10-11: The file includes the same Google Fonts stylesheet link
twice
("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap");
remove the duplicate <link> element so only one import of the Material Symbols
stylesheet remains to avoid redundant network requests and rendering work.
In `@Stitch/landing_page_mobile_dark/code.html`:
- Line 298: The footer currently hardcodes "© 2024 AGENT RENDER PROTOCOL" which
is stale; update the footer to use the current year instead of a fixed value by
replacing that static string (search for the exact text "© 2024 AGENT RENDER
PROTOCOL") with a dynamic solution — either update the hardcoded year to 2026 if
you want a one-off fix, or better add a small client-side render that computes
new Date().getFullYear() and inserts it into the footer element (give the footer
span or container a stable id/class like footer-year so the script can target it
on load) so the year stays correct going forward.
- Around line 120-123: The mobile menu button (the element with class "md:hidden
text-[`#FF8757`] p-2 …" containing the material-icons "menu") does not control the
sidebar (the sidebar element currently always rendered with the "hidden" class
around Line 275), so add a stable id/attributes to both elements (e.g.,
id="mobile-menu-btn" on the button and id="mobile-sidebar" on the sidebar) and
include accessible attributes (aria-controls="mobile-sidebar" and
aria-expanded="false" on the button). Then implement a small toggle handler
(attached to the button's click) that toggles the sidebar's "hidden" class and
updates aria-expanded accordingly so the button actually shows/hides the mobile
navigation; ensure the sidebar has a start state of hidden for desktop and
visible when toggled on mobile.
- Around line 120-123: The icon-only menu button (<button class="md:hidden ...">
with the <span class="material-symbols-outlined">menu</span>) needs an
accessible name and expanded state; add an aria-label (e.g., "Open main menu" /
"Close main menu"), add aria-expanded="false" initially, and add aria-controls
pointing to the mobile menu panel's id (create or use an id on the menu
container). Update the button's aria-expanded and aria-label when the toggle
handler that opens/closes the menu runs (ensure the same toggle code that
adds/removes the visible class on the menu panel also updates these attributes).
- Around line 258-313: The marquee animation (.animate-marquee and `@keyframes`
marquee) ignores users' prefers-reduced-motion setting; update the CSS to
respect reduced-motion by adding a prefers-reduced-motion media query that
disables the animation (e.g., remove or set animation: none and stop transforms)
and provide a non-animated fallback (static horizontal overflow) for
.animate-marquee so motion-sensitive users see the content without motion.
In `@Stitch/landing_page_mobile_light/code.html`:
- Around line 9-10: Remove the duplicated Material Symbols stylesheet include:
locate the two identical <link> tags that reference
"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
in the HTML and delete one of them so the stylesheet is only included once.
- Line 244: The user-facing sentence containing "We believe that information
density is a virtue. We reject the simplification of technical complexites. This
interface is built to be read, analyzed, and mastered." has a typo: change
"complexites" to "complexities" (update the string in the HTML template where
that paragraph appears, e.g., the element containing that exact sentence).
In `@Stitch/monolith_ember/DESIGN.md`:
- Line 1: Remove the outer markdown code fences that are causing the whole
DESIGN.md to render as a code block: delete the opening "```markdown" fence and
the trailing "```" fence so the content (headings, lists, and prose) renders as
normal markdown; ensure you remove both occurrences of the triple-backtick
fences (the "```markdown" start marker and the closing "```" marker) so the
Director's Final Note and the rest of the document are not locked in a code
block.
---
Nitpick comments:
In @.playwright-mcp/page-2026-04-01T07-26-25-621Z.yml:
- Around line 1-272: This review flags a generated Playwright-MCP page dump
being committed; remove the specific generated artifact (the Playwright-MCP page
dump) from the repo, add a gitignore rule to exclude future Playwright-MCP
dumps, and update the Playwright/test config that emits MCP page dumps (the
MCP/page-dump output settings in your Playwright configuration) to write to a
dedicated artifacts directory that is not committed (and/or to upload to CI
artifacts if you need retention); if the file has already landed on the default
branch, use git rm --cached and a history-rewrite procedure (or coordinate a
revert) to remove it from tracked history.
In @.playwright-mcp/page-2026-04-01T07-26-40-717Z.yml:
- Around line 274-281: The snapshot includes framework chrome (the "Static
route" text, the "Hide static indicator" button and the alert region) which
makes the artifact environment-dependent; update the test before capturing to
remove or hide these elements by either (a) programmatically disabling the dev
overlay in the viewer/test harness, (b) clicking the "Hide static indicator"
button (button "Hide static indicator" / img refs e328/e329) so the "Static
route" node (ref e327/e323) is gone, or (c) mask/remove the alert node (ref
e332) from the DOM before taking the snapshot so the captured shell contains
only the viewer content.
In `@src/app/globals.css`:
- Around line 709-717: The active state uses a real left border (.dark
.artifact-switcher.is-active) which shifts inner width and causes title reflow;
replace that physical border with a non-intrusive inset accent (e.g., use an
inset box-shadow or a ::before pseudo-element positioned on the left with the
same color/width) so the visual emphasis remains but layout and content width
don't change — update the .dark .artifact-switcher.is-active rule to remove
border-left and apply an inset shadow or add a left-positioned pseudo-element
for the accent instead.
In `@Stitch/artifact_viewer_dark/code.html`:
- Around line 215-217: Update the hardcoded copyright year shown in the div with
class "font-['IBM_Plex_Mono'] text-[0.6875rem] uppercase tracking-tighter
text-[`#F1E7FF`] opacity-60" (the line containing "© 2024 AGENT RENDER PROTOCOL")
to use the current year (2026) or replace it with a dynamic solution that
computes the current year at runtime (e.g., via a small JS snippet that inserts
new Date().getFullYear()) so the displayed year stays up to date.
- Around line 8-9: There are two identical <link> tags referencing the Material
Symbols Outlined font (the href containing
"family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap");
remove the duplicate link so only one <link
href="https://fonts.googleapis.com/...Material+Symbols+Outlined..."
rel="stylesheet"/> remains, leaving the other distinct
Newsreader/Space+Grotesk/IBM+Plex+Mono combined link untouched.
In `@Stitch/artifact_viewer_light/code.html`:
- Around line 271-273: The copyright line currently hardcodes "© 2024" inside
the paragraph element (the <p class="font-['IBM_Plex_Mono'] text-[12px]
uppercase text-[`#1c1c18`'] opacity-60"> node); update it to use the current year
instead of 2024—either replace the hardcoded "2024" with the correct year (2026)
or, preferably, render the year dynamically (e.g., using new
Date().getFullYear()) wherever the template is generated so the paragraph always
shows the current year.
- Around line 7-8: Remove the duplicate Google Fonts link tag: eliminate one of
the identical <link
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
rel="stylesheet"/> entries in the artifact_viewer_light code.html (the duplicate
<link ... rel="stylesheet"/> for Material Symbols Outlined). Do the same cleanup
in the other two static HTML showcase files so each file includes the font link
only once.
In `@Stitch/artifact_viewer_mobile_light/code.html`:
- Around line 7-8: Remove the duplicated Google Fonts <link> tag that imports
"Material+Symbols+Outlined" (the two identical <link
href="https://fonts.googleapis.com/...Material+Symbols+Outlined..."> entries);
keep a single instance of that <link> and delete the redundant one so the font
is only loaded once.
- Line 229: The image element using src="https://lh3.googleusercontent.com/..."
(the <img> with class "w-full h-full object-cover grayscale opacity-50
contrast-125") relies on an unstable external Googleusercontent URL; replace it
with a durable source by either adding a local asset path or a stable CDN URL,
update any references to the same image (also at line ~262), and provide a
fallback strategy (e.g., use a local copy or <picture> with a fallback src) so
the showcase does not break if the external URL expires.
In `@Stitch/landing_page_dark/code.html`:
- Line 245: The span using inline style "font-variation-settings: 'FILL' 1;"
should be refactored into a CSS class for maintainability: add a class (e.g.,
.material-symbols-filled) in the page's <style> block that defines the desired
font-variation-settings (and any other standard symbol variations), then remove
the inline style from the span with classes "material-symbols-outlined
text-primary mb-8" and add the new class to that element so the style is applied
via CSS rather than inline.
- Line 12: Replace the inline Tailwind CDN usage (<script
src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>)
with a production build: install tailwindcss via npm, add a tailwind.config.js
(move any inline config there), wire Tailwind into your build pipeline
(PostCSS/Vite/Webpack) to generate a bundled CSS file, enable JIT/purge/content
settings in tailwind.config.js to remove unused styles, and update the HTML to
reference the compiled CSS instead of the CDN script.
- Around line 184-187: The decorative SVG (the <svg> element containing the
<circle> and <path> used as the "thinking indicator") should be hidden from
assistive tech and use correct SVG attribute casing: change viewbox to viewBox
and add accessibility attributes aria-hidden="true" and focusable="false" on the
<svg> element (do not add an accessible title/role since it's decorative);
ensure the inner <circle> and <path> remain unchanged.
- Line 154: The fixed-height console div with class "bg-surface-container-lowest
p-6 font-label text-[11px] text-primary/80 leading-relaxed overflow-hidden
h-[400px] w-full lg:w-[380px]" currently clips overflowing content; replace or
augment the "overflow-hidden" utility with a scrolling behavior (e.g.,
"overflow-y-auto" or "overflow-auto") on that div so content can be scrolled
within the 400px container and optionally keep "overflow-hidden" only for x-axis
if intended.
- Around line 105-111: Replace hardcoded hex colors in the navbar markup with
your Tailwind tokens: swap bg-[`#0B0C1F`] usages to bg-background (including any
repeated backdrop/opacity classes), change text-[`#FF8757`] to text-primary (for
the "Agent Render" span and active nav link and border-b color), and change
text-[`#F1E7FF`] to text-tertiary (for the non-active links). Update the nav
element, the span with "Agent Render", and the three anchor tags (the active
Docs link uses border-b) to use text-primary, bg-background, text-tertiary and
their appropriate border-{color} token equivalents so styling follows the design
tokens rather than hex values.
In `@Stitch/landing_page_mobile_dark/code.html`:
- Around line 10-11: The page loads the same Material Symbols Outlined font
twice—remove the duplicate <link> element whose href starts with
"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" (the second
occurrence) so the stylesheet is only requested once; keep the combined
multi-font <link> (the one that already includes Material Symbols Outlined) and
delete the redundant separate Material Symbols <link>.
- Line 109: The nav element's class string contains two conflicting background
utility classes (bg-[`#0B0C1F`]/60 and bg-[`#0B0C1F`]/10) making intent ambiguous;
edit the nav element's class attribute to remove the unwanted duplicate and
leave a single bg[`#0B0C1F`]/<opacity> utility that matches the intended opacity
(either /60 or /10), ensuring you update only the class list on the nav tag so
the final markup contains one background class.
🪄 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: c01d93f8-b2ab-49d0-a451-8ec3253f85e3
⛔ Files ignored due to path filters (10)
.DS_Storeis excluded by!**/.DS_StoreStitch/.DS_Storeis excluded by!**/.DS_StoreStitch/artifact_viewer_dark/screen.pngis excluded by!**/*.pngStitch/artifact_viewer_light/screen.pngis excluded by!**/*.pngStitch/artifact_viewer_mobile_dark/screen.pngis excluded by!**/*.pngStitch/artifact_viewer_mobile_light/screen.pngis excluded by!**/*.pngStitch/landing_page_dark/screen.pngis excluded by!**/*.pngStitch/landing_page_light/screen.pngis excluded by!**/*.pngStitch/landing_page_mobile_dark/screen.pngis excluded by!**/*.pngStitch/landing_page_mobile_light/screen.pngis excluded by!**/*.png
📒 Files selected for processing (22)
.factory/settings.json.playwright-mcp/page-2026-04-01T07-24-40-568Z.yml.playwright-mcp/page-2026-04-01T07-25-05-464Z.yml.playwright-mcp/page-2026-04-01T07-25-29-779Z.yml.playwright-mcp/page-2026-04-01T07-25-49-995Z.yml.playwright-mcp/page-2026-04-01T07-26-25-621Z.yml.playwright-mcp/page-2026-04-01T07-26-40-717Z.ymlStitch/artifact_viewer_dark/code.htmlStitch/artifact_viewer_light/code.htmlStitch/artifact_viewer_mobile_dark/code.htmlStitch/artifact_viewer_mobile_light/code.htmlStitch/landing_page_dark/code.htmlStitch/landing_page_light/code.htmlStitch/landing_page_mobile_dark/code.htmlStitch/landing_page_mobile_light/code.htmlStitch/monolith_ember/DESIGN.mdStitch/sunset_archive/DESIGN.mdsrc/app/globals.csssrc/app/layout.tsxsrc/components/home/link-creator.tsxsrc/components/theme-toggle.tsxsrc/components/viewer-shell.tsx
src/app/globals.css
Outdated
Comment on lines
+98
to
+115
| /* Theme-switching font aliases: light → Inter body, dark → Space Grotesk body */ | ||
| --font-display: var(--font-headline); | ||
| --font-sans: var(--font-body); | ||
| font-family: var(--font-sans), sans-serif; | ||
| background: | ||
| radial-gradient(circle at top left, var(--page-bg-secondary), transparent 36%), | ||
| radial-gradient(circle at top right, var(--page-bg-accent), transparent 28%), | ||
| linear-gradient(180deg, color-mix(in srgb, var(--page-bg) 92%, white 8%), var(--page-bg)); | ||
| linear-gradient(180deg, color-mix(in srgb, var(--page-bg) 94%, white 6%), var(--page-bg)); | ||
| } | ||
|
|
||
| .dark body { | ||
| /* Dark: Newsreader for display, Space Grotesk for body */ | ||
| --font-display: var(--font-editorial); | ||
| --font-sans: var(--font-headline); | ||
| background: | ||
| linear-gradient(180deg, color-mix(in srgb, var(--page-bg) 94%, #0e141d 6%), var(--page-bg)); | ||
| radial-gradient(circle at 30% 10%, rgba(255, 135, 87, 0.04), transparent 40%), | ||
| radial-gradient(circle at 80% 60%, rgba(241, 231, 255, 0.02), transparent 35%), | ||
| linear-gradient(180deg, #0b0c1f, #080919); |
Contributor
There was a problem hiding this comment.
Add the missing blank lines so stylelint passes.
declaration-empty-line-before is already firing here because font-family / background follow the custom-property aliases without a separator, so this block will stay red in lint as-is.
🧰 Tools
🪛 Stylelint (17.5.0)
[error] 101-101: Expected empty line before declaration (declaration-empty-line-before)
(declaration-empty-line-before)
[error] 112-115: Expected empty line before declaration (declaration-empty-line-before)
(declaration-empty-line-before)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/app/globals.css` around lines 98 - 115, The CSS blocks are missing
required blank lines between custom-property declarations and regular
declarations, causing stylelint's declaration-empty-line-before to fail; update
both the root-like block where --font-display / --font-sans are defined (and the
following font-family/background) and the .dark body block (where --font-display
/ --font-sans are set before font-family/background) by inserting a single empty
line between the custom-property group and the subsequent non-custom-property
declarations so the linter recognizes the separator.
Comment on lines
+9
to
+10
| <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/> | ||
| <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/> |
Contributor
There was a problem hiding this comment.
Deduplicate the Material Symbols import.
The stylesheet is linked twice; keep only one entry.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@Stitch/artifact_viewer_mobile_dark/code.html` around lines 9 - 10, The file
contains a duplicated Material Symbols stylesheet link (two identical <link
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined...">
entries); remove one of the duplicate <link> elements so only a single
stylesheet import remains (leave the remaining <link> with the Material Symbols
href intact).
| </head> | ||
| <body class="flex flex-col min-h-screen"> | ||
| <!-- TopNavBar: Fixed for mobile context --> | ||
| <header class="fixed top-0 w-full z-50 flex justify-between items-center px-6 h-16 bg-[#0B0C1F]/60 backdrop-blur-xl bg-[#0B0C1F]/10 border-b border-[#FF8757]/15"> |
Contributor
There was a problem hiding this comment.
Use a single background opacity class for the header.
Line 116 applies two bg-[#0B0C1F]/... classes; the latter overrides the former and obscures intent. Keep only the intended value.
Suggested fix
-<header class="fixed top-0 w-full z-50 flex justify-between items-center px-6 h-16 bg-[`#0B0C1F`]/60 backdrop-blur-xl bg-[`#0B0C1F`]/10 border-b border-[`#FF8757`]/15">
+<header class="fixed top-0 w-full z-50 flex justify-between items-center px-6 h-16 bg-[`#0B0C1F`]/60 backdrop-blur-xl border-b border-[`#FF8757`]/15">📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <header class="fixed top-0 w-full z-50 flex justify-between items-center px-6 h-16 bg-[#0B0C1F]/60 backdrop-blur-xl bg-[#0B0C1F]/10 border-b border-[#FF8757]/15"> | |
| <header class="fixed top-0 w-full z-50 flex justify-between items-center px-6 h-16 bg-[`#0B0C1F`]/60 backdrop-blur-xl border-b border-[`#FF8757`]/15"> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@Stitch/artifact_viewer_mobile_dark/code.html` at line 116, The header
element's class list contains two overlapping background utilities
(bg-[`#0B0C1F`]/60 and bg-[`#0B0C1F`]/10) where the latter overrides the former;
edit the header element's class attribute (the <header ...> with the fixed top-0
... classes) to remove the unwanted bg-[`#0B0C1F`]/10 (or bg-[`#0B0C1F`]/60 if that
was unintended) so only a single bg-[`#0B0C1F`]/<opacity> class remains,
preserving the intended background opacity.
Stitch/landing_page_dark/code.html
Outdated
Comment on lines
+10
to
+11
| <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/> | ||
| <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/> |
Contributor
There was a problem hiding this comment.
Remove duplicate Material Symbols stylesheet link.
The same Google Fonts Material Symbols stylesheet is loaded twice on lines 10 and 11, resulting in an unnecessary HTTP request.
🔧 Proposed fix
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
-<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/> | |
| <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/> | |
| <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@Stitch/landing_page_dark/code.html` around lines 10 - 11, Remove the
duplicate Google Fonts Material Symbols stylesheet link in the HTML so the same
href
"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
appears only once; locate the two identical <link> tags in
Stitch/landing_page_dark/code.html and delete one of them to avoid the redundant
HTTP request.
Comment on lines
+258
to
+313
| <section class="mt-20 border-y border-outline-variant/10"> | ||
| <div class="flex overflow-hidden py-4 whitespace-nowrap bg-surface-container-lowest font-label text-[0.6875rem] text-primary/40 uppercase tracking-[0.3em]"> | ||
| <div class="flex animate-marquee"> | ||
| <span class="mx-8">System Ready</span> | ||
| <span class="mx-8 text-primary">Initialize Protocol</span> | ||
| <span class="mx-8">Architectural Intelligence</span> | ||
| <span class="mx-8 text-primary">Artifact Render</span> | ||
| <span class="mx-8">System Ready</span> | ||
| <span class="mx-8 text-primary">Initialize Protocol</span> | ||
| <span class="mx-8">Architectural Intelligence</span> | ||
| <span class="mx-8 text-primary">Artifact Render</span> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| </main> | ||
| <!-- SideNavBar (Hidden by default, triggered by mobile menu) --> | ||
| <!-- Shown here for structural reference as per JSON --> | ||
| <aside class="hidden fixed left-0 top-16 h-[calc(100vh-64px)] z-40 flex flex-col py-8 bg-[#0B0C1F] tonal-shift bg-surface-container-low w-64"> | ||
| <div class="px-6 mb-12"> | ||
| <div class="text-[#FF8757] font-['IBM_Plex_Mono'] text-xs tracking-widest mb-1">INDEX</div> | ||
| <div class="text-[#F1E7FF]/40 font-['Space_Grotesk'] text-[0.6875rem]">v4.0.1-alpha</div> | ||
| </div> | ||
| <div class="flex flex-col gap-2"> | ||
| <div class="px-6 py-4 flex items-center gap-4 text-[#FF8757] bg-[#FF8757]/5 font-bold border-l-4 border-[#FF8757] transition-all duration-200 ease-in-out"> | ||
| <span class="material-symbols-outlined">folder</span> | ||
| <span class="font-['Space_Grotesk'] text-[1.125rem] uppercase tracking-widest">Artifacts</span> | ||
| </div> | ||
| <div class="px-6 py-4 flex items-center gap-4 text-[#F1E7FF]/60 hover:text-[#F1E7FF] hover:bg-[#F1E7FF]/5 transition-all duration-200 ease-in-out"> | ||
| <span class="material-symbols-outlined">database</span> | ||
| <span class="font-['Space_Grotesk'] text-[1.125rem] uppercase tracking-widest">Metadata</span> | ||
| </div> | ||
| <div class="px-6 py-4 flex items-center gap-4 text-[#F1E7FF]/60 hover:text-[#F1E7FF] hover:bg-[#F1E7FF]/5 transition-all duration-200 ease-in-out"> | ||
| <span class="material-symbols-outlined">terminal</span> | ||
| <span class="font-['Space_Grotesk'] text-[1.125rem] uppercase tracking-widest">Log</span> | ||
| </div> | ||
| </div> | ||
| </aside> | ||
| <!-- Footer Implementation --> | ||
| <footer class="w-full py-4 px-8 flex justify-between items-center border-t border-[#F1E7FF]/10 bg-[#0B0C1F]"> | ||
| <div class="font-['IBM_Plex_Mono'] text-[0.6875rem] uppercase tracking-tighter text-[#F1E7FF] opacity-60"> | ||
| © 2024 AGENT RENDER PROTOCOL | ||
| </div> | ||
| <div class="flex gap-6"> | ||
| <a class="font-['IBM_Plex_Mono'] text-[0.6875rem] uppercase tracking-tighter text-[#F1E7FF] opacity-60 hover:opacity-100 hover:text-[#FF8757] transition-opacity duration-200 underline decoration-[#FF8757]" href="#">GitHub</a> | ||
| <a class="font-['IBM_Plex_Mono'] text-[0.6875rem] uppercase tracking-tighter text-[#F1E7FF] opacity-60 hover:opacity-100 hover:text-[#FF8757] transition-opacity duration-200" href="#">Wiki</a> | ||
| </div> | ||
| </footer> | ||
| <style> | ||
| @keyframes marquee { | ||
| 0% { transform: translateX(0); } | ||
| 100% { transform: translateX(-50%); } | ||
| } | ||
| .animate-marquee { | ||
| display: flex; | ||
| animation: marquee 30s linear infinite; | ||
| } |
Contributor
There was a problem hiding this comment.
Respect reduced-motion preference for marquee animation.
The marquee at Line 312 is infinite and lacks a prefers-reduced-motion fallback. This can be problematic for motion-sensitive users.
Suggested CSS fallback
.animate-marquee {
display: flex;
animation: marquee 30s linear infinite;
}
+@media (prefers-reduced-motion: reduce) {
+ .animate-marquee {
+ animation: none;
+ transform: none;
+ }
+}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <section class="mt-20 border-y border-outline-variant/10"> | |
| <div class="flex overflow-hidden py-4 whitespace-nowrap bg-surface-container-lowest font-label text-[0.6875rem] text-primary/40 uppercase tracking-[0.3em]"> | |
| <div class="flex animate-marquee"> | |
| <span class="mx-8">System Ready</span> | |
| <span class="mx-8 text-primary">Initialize Protocol</span> | |
| <span class="mx-8">Architectural Intelligence</span> | |
| <span class="mx-8 text-primary">Artifact Render</span> | |
| <span class="mx-8">System Ready</span> | |
| <span class="mx-8 text-primary">Initialize Protocol</span> | |
| <span class="mx-8">Architectural Intelligence</span> | |
| <span class="mx-8 text-primary">Artifact Render</span> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- SideNavBar (Hidden by default, triggered by mobile menu) --> | |
| <!-- Shown here for structural reference as per JSON --> | |
| <aside class="hidden fixed left-0 top-16 h-[calc(100vh-64px)] z-40 flex flex-col py-8 bg-[#0B0C1F] tonal-shift bg-surface-container-low w-64"> | |
| <div class="px-6 mb-12"> | |
| <div class="text-[#FF8757] font-['IBM_Plex_Mono'] text-xs tracking-widest mb-1">INDEX</div> | |
| <div class="text-[#F1E7FF]/40 font-['Space_Grotesk'] text-[0.6875rem]">v4.0.1-alpha</div> | |
| </div> | |
| <div class="flex flex-col gap-2"> | |
| <div class="px-6 py-4 flex items-center gap-4 text-[#FF8757] bg-[#FF8757]/5 font-bold border-l-4 border-[#FF8757] transition-all duration-200 ease-in-out"> | |
| <span class="material-symbols-outlined">folder</span> | |
| <span class="font-['Space_Grotesk'] text-[1.125rem] uppercase tracking-widest">Artifacts</span> | |
| </div> | |
| <div class="px-6 py-4 flex items-center gap-4 text-[#F1E7FF]/60 hover:text-[#F1E7FF] hover:bg-[#F1E7FF]/5 transition-all duration-200 ease-in-out"> | |
| <span class="material-symbols-outlined">database</span> | |
| <span class="font-['Space_Grotesk'] text-[1.125rem] uppercase tracking-widest">Metadata</span> | |
| </div> | |
| <div class="px-6 py-4 flex items-center gap-4 text-[#F1E7FF]/60 hover:text-[#F1E7FF] hover:bg-[#F1E7FF]/5 transition-all duration-200 ease-in-out"> | |
| <span class="material-symbols-outlined">terminal</span> | |
| <span class="font-['Space_Grotesk'] text-[1.125rem] uppercase tracking-widest">Log</span> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Footer Implementation --> | |
| <footer class="w-full py-4 px-8 flex justify-between items-center border-t border-[#F1E7FF]/10 bg-[#0B0C1F]"> | |
| <div class="font-['IBM_Plex_Mono'] text-[0.6875rem] uppercase tracking-tighter text-[#F1E7FF] opacity-60"> | |
| © 2024 AGENT RENDER PROTOCOL | |
| </div> | |
| <div class="flex gap-6"> | |
| <a class="font-['IBM_Plex_Mono'] text-[0.6875rem] uppercase tracking-tighter text-[#F1E7FF] opacity-60 hover:opacity-100 hover:text-[#FF8757] transition-opacity duration-200 underline decoration-[#FF8757]" href="#">GitHub</a> | |
| <a class="font-['IBM_Plex_Mono'] text-[0.6875rem] uppercase tracking-tighter text-[#F1E7FF] opacity-60 hover:opacity-100 hover:text-[#FF8757] transition-opacity duration-200" href="#">Wiki</a> | |
| </div> | |
| </footer> | |
| <style> | |
| @keyframes marquee { | |
| 0% { transform: translateX(0); } | |
| 100% { transform: translateX(-50%); } | |
| } | |
| .animate-marquee { | |
| display: flex; | |
| animation: marquee 30s linear infinite; | |
| } | |
| <style> | |
| `@keyframes` marquee { | |
| 0% { transform: translateX(0); } | |
| 100% { transform: translateX(-50%); } | |
| } | |
| .animate-marquee { | |
| display: flex; | |
| animation: marquee 30s linear infinite; | |
| } | |
| `@media` (prefers-reduced-motion: reduce) { | |
| .animate-marquee { | |
| animation: none; | |
| transform: none; | |
| } | |
| } | |
| </style> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@Stitch/landing_page_mobile_dark/code.html` around lines 258 - 313, The
marquee animation (.animate-marquee and `@keyframes` marquee) ignores users'
prefers-reduced-motion setting; update the CSS to respect reduced-motion by
adding a prefers-reduced-motion media query that disables the animation (e.g.,
remove or set animation: none and stop transforms) and provide a non-animated
fallback (static horizontal overflow) for .animate-marquee so motion-sensitive
users see the content without motion.
| <!-- Footer Implementation --> | ||
| <footer class="w-full py-4 px-8 flex justify-between items-center border-t border-[#F1E7FF]/10 bg-[#0B0C1F]"> | ||
| <div class="font-['IBM_Plex_Mono'] text-[0.6875rem] uppercase tracking-tighter text-[#F1E7FF] opacity-60"> | ||
| © 2024 AGENT RENDER PROTOCOL |
Contributor
There was a problem hiding this comment.
Footer copyright year is stale.
Line 298 hardcodes © 2024 while this PR is dated 2026. Consider dynamic year rendering or updating the static text.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@Stitch/landing_page_mobile_dark/code.html` at line 298, The footer currently
hardcodes "© 2024 AGENT RENDER PROTOCOL" which is stale; update the footer to
use the current year instead of a fixed value by replacing that static string
(search for the exact text "© 2024 AGENT RENDER PROTOCOL") with a dynamic
solution — either update the hardcoded year to 2026 if you want a one-off fix,
or better add a small client-side render that computes new Date().getFullYear()
and inserts it into the footer element (give the footer span or container a
stable id/class like footer-year so the script can target it on load) so the
year stays correct going forward.
Comment on lines
+9
to
+10
| <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/> | ||
| <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/> |
Contributor
There was a problem hiding this comment.
Drop the duplicate Material Symbols stylesheet include.
The same font stylesheet is declared twice; one should be removed.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@Stitch/landing_page_mobile_light/code.html` around lines 9 - 10, Remove the
duplicated Material Symbols stylesheet include: locate the two identical <link>
tags that reference
"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
in the HTML and delete one of them so the stylesheet is only included once.
| <div class="p-6 bg-surface-container-lowest shadow-sm"> | ||
| <h4 class="font-editorial italic text-lg mb-4">The Brutalist Manifesto</h4> | ||
| <p class="text-xs text-on-surface-variant leading-relaxed font-body"> | ||
| We believe that information density is a virtue. We reject the simplification of technical complexites. This interface is built to be read, analyzed, and mastered. |
Contributor
There was a problem hiding this comment.
Fix typo in user-facing copy.
“complexites” should be “complexities”.
Suggested fix
- We believe that information density is a virtue. We reject the simplification of technical complexites. This interface is built to be read, analyzed, and mastered.
+ We believe that information density is a virtue. We reject the simplification of technical complexities. This interface is built to be read, analyzed, and mastered.📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| We believe that information density is a virtue. We reject the simplification of technical complexites. This interface is built to be read, analyzed, and mastered. | |
| We believe that information density is a virtue. We reject the simplification of technical complexities. This interface is built to be read, analyzed, and mastered. |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@Stitch/landing_page_mobile_light/code.html` at line 244, The user-facing
sentence containing "We believe that information density is a virtue. We reject
the simplification of technical complexites. This interface is built to be read,
analyzed, and mastered." has a typo: change "complexites" to "complexities"
(update the string in the HTML template where that paragraph appears, e.g., the
element containing that exact sentence).
Stitch/monolith_ember/DESIGN.md
Outdated
| @@ -0,0 +1,82 @@ | |||
| ```markdown | |||
Contributor
There was a problem hiding this comment.
Remove the outer markdown code fences.
The opening ```markdown and trailing closing fence make the entire document render as a code block, breaking heading/list semantics and navigability.
Suggested fix
-```markdown
# Design System Documentation: Technical Editorial Excellence
...
-**Director's Final Note:** This system is about the tension between the "soft" background and the "hard" technical data. Keep the backgrounds warm and the typography sharp. If the layout feels too much like a standard dashboard, increase the type scale of your headlines and remove more lines.```
+**Director's Final Note:** This system is about the tension between the "soft" background and the "hard" technical data. Keep the backgrounds warm and the typography sharp. If the layout feels too much like a standard dashboard, increase the type scale of your headlines and remove more lines.Also applies to: 82-82
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@Stitch/monolith_ember/DESIGN.md` at line 1, Remove the outer markdown code
fences that are causing the whole DESIGN.md to render as a code block: delete
the opening "```markdown" fence and the trailing "```" fence so the content
(headings, lists, and prose) renders as normal markdown; ensure you remove both
occurrences of the triple-backtick fences (the "```markdown" start marker and
the closing "```" marker) so the Director's Final Note and the rest of the
document are not locked in a code block.
- Swap layout fonts to Fraunces, IBM Plex Sans, and IBM Plex Mono - Remove theme-specific font alias overrides in global styles
- Use an inset accent bar for the active artifact switcher in dark mode - Remove grayscale hover styling from markdown images
- Refresh the home view and artifact staging layout - Update fragment protocol schema and supporting UI copy
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/app/globals.css (1)
400-410:⚠️ Potential issue | 🟡 MinorReset the hover background on static hero cards.
.hero-link-card.is-static:hoverturns off the lift, border, and shadow, but it still inherits the brighter background from.hero-link-card:hover. The “static” card will still read as interactive on hover.💡 Suggested fix
.hero-link-card.is-static:hover { transform: none; border-color: var(--border); + background: color-mix(in srgb, var(--surface-elevated) 80%, transparent); box-shadow: none; }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app/globals.css` around lines 400 - 410, The static hero card still receives the hover background from .hero-link-card:hover; update .hero-link-card.is-static:hover to explicitly reset the background (e.g., set background to the non-hover value such as var(--surface) or revert) so the card does not look interactive on hover, keeping the existing resets for transform, border-color, and box-shadow in .hero-link-card.is-static:hover.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In @.playwright-mcp/page-2026-04-01T16-47-20-387Z.yml:
- Around line 29-30: The UI incorrectly lists "auto" as a wire-format codec;
update the YAML page content (the paragraphs referencing e34/e35 and the block
around lines 101-107) to remove or reword any "auto" codec examples so they only
show actual allowed codecs (plain | lz | deflate | arx) — note that
src/lib/payload/schema.ts restricts codecs to plain|lz|deflate|arx and
src/lib/payload/link-creator.ts (around the strip logic) removes "auto" before
encoding, so ensure the UI does not present v1.auto.* as part of the protocol
(either delete "auto" occurrences or explicitly state "auto is a link-creator
choice, not a wire-format codec").
- Around line 171-180: The fixture labelled "arx showcase" still uses the
deflate codec in the URL fragment (`#agent-render`=v1.deflate...), so update the
link fragment used in the link node whose text/heading are "json" and "arx
showcase" to a correct ARX-encoded fragment (e.g., change the v1.deflate prefix
and regenerate the payload so the fragment begins with v1.arx or the correct ARX
marker), ensuring the URL and any related generic/text nodes that reference that
fragment are replaced with the newly generated ARX hash so the preset proves the
ARX codec end-to-end.
---
Outside diff comments:
In `@src/app/globals.css`:
- Around line 400-410: The static hero card still receives the hover background
from .hero-link-card:hover; update .hero-link-card.is-static:hover to explicitly
reset the background (e.g., set background to the non-hover value such as
var(--surface) or revert) so the card does not look interactive on hover,
keeping the existing resets for transform, border-color, and box-shadow in
.hero-link-card.is-static:hover.
🪄 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: b5bd4689-a5a7-4f20-ab04-d6f495b7769d
📒 Files selected for processing (8)
.playwright-mcp/page-2026-04-01T16-43-50-224Z.yml.playwright-mcp/page-2026-04-01T16-44-29-341Z.yml.playwright-mcp/page-2026-04-01T16-47-20-387Z.yml.playwright-mcp/page-2026-04-01T16-47-40-032Z.ymlsrc/app/globals.csssrc/components/home/link-creator.tsxsrc/components/viewer-shell.tsxsrc/lib/payload/schema.ts
✅ Files skipped from review due to trivial changes (6)
- .playwright-mcp/page-2026-04-01T16-43-50-224Z.yml
- .playwright-mcp/page-2026-04-01T16-44-29-341Z.yml
- src/lib/payload/schema.ts
- src/components/home/link-creator.tsx
- .playwright-mcp/page-2026-04-01T16-47-40-032Z.yml
- src/components/viewer-shell.tsx
Comment on lines
+171
to
+180
| - link "json 4,770 chars arx showcase Dictionary substitution, Brotli, and high-density Unicode encoding compress 5 rich artifacts into a single URL fragment." [ref=e199] [cursor=pointer]: | ||
| - /url: "#agent-render=v1.deflate.tVrpcttGEn6VWXq3ipRACAApHsoqsSxLZW0S2yXJOVbUMiA4FBGBAA2AOmxrK7_yf4-qPFDexE-yX88BDEhKsZ0NE4vATE_f093Tw7e1eW3HtWpX4m9Q26mN-STyc16zajne_PSGZdPkOvAzGvIxNPPjcMKzHK9pbefsbS3EYMojDpBmnOQ8w8ylAEwvx8l1rFBdebbDFBzTcBNMHB98dbB3cmDPxhggFh4x_4LHeTPl8ZinTCx8_9N_GTETJLN5yrMsTOIB_vucbWwcXPH0Np-G8QW7TRYs45xNecpZmDEeB8mYj1kYs3zK2avjr9gk9S9mwG5vbLDnCaBTLGec_qQ84OEVzwCLtUES5wRHZB49Yt9O_ZxQgokvaIiYqe8Rn-xY8sm_y1M-4w0BxWaLKA-bWQ5RTKbZPJzzKIw5iABh9nrB-RuQzPJ0EeSLFMzO_dso8ccZuM4T4rmZ-RNeMJ7Z7CgnlCNgyXaIF9eGGp6GQQ4CfnrLssUoy8N8Qe8Qk3QH-BmoS66CqZ_6QQ6e536Or5jE4pB_HvkBOLgO8ynLoNCIeI_zNInY6BYWG8QekXqSJnkUmmKBSv31wo_C_Ja5bkOQ_Kfn_IVlMz-KQAjSxkz51iBuEZZn4cW0OeZxRotexSGZSloMlBXb-TSFOfOQpxlLJgwiQ75mnjRzfpMXwEIJ79iBemXv2H4hYcZzvD8J84zN8VqK_o6d3s7DwI_YAg75jhA0m00Mr_ylqRG8ttvByN7J_tERm6cwjj-Cft6xju118fW1fxPOFjOhFT8PR6FQRrHYvQTMq03H2XPf__QfPHQPDzHiOna3Twz6kR-T7rPwDWdbCku5_MnXL6vrDw8PxPptu-_h-0ToOcvZPIFBiDHtL4RDePC-4YUjqG5KGzRj9R778gnTm7UhVbkPWwRAe6iRRDy-gFO8Y1fQY-RjQ63XGA3K-Tqx3Wkv0qgh5LS6ra5Qf0avtuP8-osEV16B0bbVgjAaxrPbbQ1Du22zNELLarluAdiyvTWAQuGu1fdaBeC2vd1bBZSqda2W0ykgNzZ6tuf9-gvcUKvvlILCaBGPodsxx2bClgXb2BODuMnObs7ZcRhMC0XKTSR8JLPwnV2yKMxyPAs_n8AANOHHYzaKkuDy9YJCokZ1cgv3umlOsUUi_MvJMZJFGtB-xGqBW0SReDEbYXPodV-L_T0JweNFmLNxOJlkajvP4Y-C3ALxOwTCq5BfFwtP_dEi8lO2f_ING_u5rxYlqfTyIIkWs7hkr4xWfzt58VwCAyby59L5EAnBm38VXmAryFD9CDp8llwzcHGdwPFo7IcffhjEAoMKeuz9z_8G12sjmZhToYcete3o2Yzsg5j9rs_7n__1UShkCslYLJIIpR-RP-Z-ClaEhIN4L4rYBLkFbpeHEwQgdhnGY7I_Jows5euwC4Fs9nee6gzVzELYPcsTCMltdrjAuiAKKU2KGZkrsdau3VkyJxPSoJmlgcrH9F6m9aaYthEW6_wm4Ok8b6h8bE6qjLy1sQGVbKgMTKGBgvO67FdN0Ewue6ly3o70lo-0cbezJfez-ILFCecWaTWczeGgLL-dc_aW7aU3Rg68gz8kMzao2VtZMOUzf1D7jNYgnyFKPjvYe3pwPNw7_g7xhO0y58ZxP2NbWzK8y4Qraa-ucL9UKzyxQmcuFXPqSzEeAXUZATmtQNASCIQtaYwwVNZTjBcBmd8IQZFzeArv4SSrDufHPMOmZ2_JZ5Un7VA5AV-AwGqMkiR0oUSqIcLJF_fSeCHVkpJYYUQ-fkJpf0eFGTGHoBcmxsidwaCf3cYBmyxiYQZyF81lnZb-mCWx5s2iAfKCnarhMN7YYS9huzDjf12R83MpKNR2Ikord4fdU_gQWITkX4xhh-0KFoQYkyRldWmZM1UFWboCoihyTvUG8WfjJQ151pCUsd8rCI03Wy3HZq-vQ9kQhIW-DAm8He3wZploVlPSIsRpGM8XOYjG_JqdogISFQ9P6w0wSU91gxtJTa4r7YnF_rWPGDwSNAvzCMwWdpGiuwPC7I5wVJht7bBT6JmilizNtHchlKGYuqTDQgqPEUFY0UbOCZFSyI1WzHl2DobOpF7flu6bJ0-Ep8JAmvGGtd6VMbzireWALesWmEF6rcPuhOOtoeZe_gY12iv_N2rYa1Vyy9TEZqRi4aOpnRtGw3ELuYbOPtowRbYBEhhA2KmwkE0Jv173LTZqsN3Pma_8StNiTTZaGjLdbET4dw18Zw4xw8SELdhUW1Dj25JTVZQyzHDUF1SoZvlvBpmnXGtFhBldCHxcqJGwKr5Ieabcp9S2Wx4aqT6k2ngvrzvG5njKc9KztqFMPWo1HZzu2Yka_-7uUnb4QmDQfqKpi0Cw8tlZj4ayVIkGzv1bWB74aCzYkAUWU3gtlApkpbSoFO6LPIbNjH0gTE9Rm5zECHQELQMdoUSgMzEbvBxTDYYsek958cGB_8y2bTP4nyO2C8z1RpEHFIvCnY3Ib6BCTJQEKpFfebbKRHcosSKUWFTEZEEazvOigJuFF2LPxE2q41UVpx5FR8UVNdKVxwpIVcIV_ioqOLR4xDKc0OhQ4G-hJtyKwtGWKrq3DHA2emgWJReKvRvm-76Lj22PRiMPHxzvnE67jeMBzoAP4h_Em5s4dj0M8vgxa7qW22ObrtX22OPHQKxqvbf6uIgTUmAhIRYvZcU3kV0GKmXKZdpdThOZNMevjo8oFyWxMFTpT4dAsgakRB-9QVuHYoWgsPlpjJXL_njGjDIMBw4zXJpVclH2L60m89xbWtOicq_J6hFal9tr_8XTg_3hy-OjF8dHp9-LRK_bi5TaiGH5LRoGg9o5QrsMHMSAxHHy_fP9oUB0QlX3J2DYM1EIDGBarvpgVJCJqexT5B2Zsw7iKx4lc17n6gEJRbq0nkGKkVahuNHUkVEFDzoP2XI6nNwWSCheFKBlOsWCqk7tmT-vI5jBaiJf10Fis4gwksMTlfgL5JapVKK0icC0if_X59eqnHs0-aCwa_LpB7BkWsnkaYmNlZUrHMj-SoBKKUVaTOIIGUBwcnZesQR4-lBLFKAVS0gy6ywgcqYYQoUBM5oViRTjW_RL6kRYcdsAIKh8GCDA7hoyozxYuhUh1ajdlsYUFmWcSt1WgBIIjEHbenkLyFyse4T11L_WGiY_qNpF6Hy9h1XRSA9bwqV8agmndi5pnZmfo_-2i3L4GlbBc33rH-ZFwu6VOxjY9cHgerNBD_Zm489byr7hhNX_JBY16GCDNhVVHgdpmqT1Qe0ovsKhaFy2VFFDAHhQq3jHmbIRZX3BJp1tBE6CKsjI_gkVayoSiYJCWF_hoYD6DYoN6MZiKEQQqVGV7Gq0tmjlgS27YKCot7CyqLNWAnfdQLy0UG0CubBaURN1-8ckjBVFpCSgKdYr3xHbBy0vVEiES02rTVxArTrMmvjzye5VSPPJngAMv8MTSgs-5AkoyK5RkKkubFnscUgW6LuzILtSRd4T2XEup6m-K9v3toSkJp2iNaTOoqVfxLWNJXLaUDS3LZX01BtsPZRH6aUB93JpACcRNUJnsqGoNwexbncPe5cjq-f2Pct10Oi32ujkWy106S2MtSwXzXWLWurUDRvzYZ7dDNtY0Xb6HWu73XEtz-u1LbfreFa_17M63RbAXWcQkzcN9Z3j0MMaz2n3LK_bAmqn37N6bRSJvT6ItWlJDxSyq6HS19DFAtfxgLrV2bY6YKXdpdU98IUrCQFPtfEQlXowHXYA3nHbwESitBy3Dca6oNRy-1av37f6gilxjTaUlwFDlxa5nRb499xee9vq9vqutd0HllZ727O8Fv70bQ-tRBhdiD8Lb_h4WQHbbhc1L15d13Gt7jb-4WZpEONAwXGAQfd4KJSxpGmXFNfvdK3tDjjutSyvZ7f74DGUHoZFQ5f05kLFEFswut3B-rbX61heG3pwO_0uWOxsD-JpPouGOZ_BZeAkVRbdXhfctV3YxoOEHQdrutulC5c3w-TDxKxy4j3d9TZAyI_1q61gyY3FRh7UYn-Gwoy6IebORYkmp-kwRgc6AYELYtsppsbqHFVM6wjSnCfXuBgel014ugLByVlcXyzfLmt0uOWJMwpMhExl9wFt12kylvhxxdUsLh_kMgIBpkmI-L4sA0WfEkqWEQSFylTVnmY5WqlRRb44r1DgKSRSRERdW3Do32jB6TZUkOg5jmMCyGP1uJj3MO_AvxG5lfQCpyG3vr5WDJe1f7NyzhbcyoN-87VL8tJ75fbWFKToIhq0aFw3-TBIqiI2ubADGMuCMNR48-wlT0kKmqP7WBqGfHTsoeiMrlu64EU3TqOmjt4a1LID35T9-7Uk5K3tMjrRsnsIH_Xz1-OjW1wal9flaJ8WLEsSmpSp8SVdGTvCNRhTDQwx7PWMidxPLzhO29KQtAHp9Civ9SST8jcDTdzWjQFGIxQcmsCIaEQoJdCYN_XPCGBTxW_Vh-R2M607qIkLMEVdZ5ESpXJ-RGY1ll3JB2LUdB26a5M5UuJS8pERQrUvKj9OkViIuJyskoZkEhH0ufJ7FVyVlCY3CRQ3bcvIS0kMxOsv3-5FXu0CLVMox0zWVxtD96OXiXKFc61vA221FLkfowrqyyil5ZZwrmQGQiuxClfSPjThPjlm1YXe4H70GK1XOKR0fNoyhWfIi9Pn1Lc74TxTBeMKmLxFPcEl6gscFtdgiSbPEvyOB9faK5MoPOMTcS-vp1Sf7652d373Pw" | ||
| - generic [ref=e200]: | ||
| - generic [ref=e201]: | ||
| - generic [ref=e202]: | ||
| - img [ref=e203] | ||
| - text: json | ||
| - generic [ref=e208]: 4,770 chars | ||
| - heading "arx showcase" [level=4] [ref=e209] | ||
| - paragraph [ref=e210]: Dictionary substitution, Brotli, and high-density Unicode encoding compress 5 rich artifacts into a single URL fragment. |
Contributor
There was a problem hiding this comment.
The “arx showcase” preset is still encoded as deflate.
The sample name/description says this is the ARX path, but the captured hash begins #agent-render=v1.deflate.... That leaves the fixture misleading and means this preset no longer proves the ARX codec end to end.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In @.playwright-mcp/page-2026-04-01T16-47-20-387Z.yml around lines 171 - 180,
The fixture labelled "arx showcase" still uses the deflate codec in the URL
fragment (`#agent-render`=v1.deflate...), so update the link fragment used in the
link node whose text/heading are "json" and "arx showcase" to a correct
ARX-encoded fragment (e.g., change the v1.deflate prefix and regenerate the
payload so the fragment begins with v1.arx or the correct ARX marker), ensuring
the URL and any related generic/text nodes that reference that fragment are
replaced with the newly generated ARX hash so the preset proves the ARX codec
end-to-end.
- Rework the hero, link creator, and fragment inspector - Polish the shared shell styles for the redesign
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
src/app/globals.css (4)
76-79: Dark mode uses 0px radius while light uses 2px — verify this is intentional.The radius tokens differ between themes: light mode uses
2pxfor all radius values while dark mode uses0px. This creates a subtle visual inconsistency between themes. If this is an intentional design choice for a "sharper" dark mode aesthetic, consider adding a brief comment to document this.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app/globals.css` around lines 76 - 79, The dark theme CSS radius tokens (--radius-xl, --radius-lg, --radius-md, --radius-sm) are set to 0px while the light theme uses 2px; either update the dark theme tokens to 2px to match light mode or, if the 0px choice is intentional, add a short comment above these variables explaining the deliberate "sharper" dark-mode design decision; locate the variables in globals.css (the block defining --radius-xl/--lg/--md/--sm) and make the change or add the comment accordingly.
165-182: Consider adding Firefox scrollbar styling for cross-browser consistency.The custom scrollbar styles only use WebKit prefixes. For Firefox support, you could add:
♻️ Optional: Add Firefox scrollbar support
/* ── Custom scrollbars ── */ +* { + scrollbar-width: thin; + scrollbar-color: var(--surface-elevated) transparent; +} + ::-webkit-scrollbar { width: 4px; height: 4px; }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app/globals.css` around lines 165 - 182, The CSS only targets WebKit scrollbars (:: -webkit-scrollbar / ::-webkit-scrollbar-thumb); add Firefox-compatible rules by setting scrollbar-width: thin and scrollbar-color using the same theme variables (e.g., scrollbar-width: thin; scrollbar-color: var(--surface-elevated) transparent) on the same scope (body or :root) and optionally add a hover state using a selector (e.g., body:hover { scrollbar-color: var(--accent) transparent } or via a utility class) so Firefox renders a thin thumb with the same colors as ::-webkit-scrollbar and ::-webkit-scrollbar-thumb.
497-509: Budget progress bar is quite thin at 3px (2px on mobile).The progress indicator track is very slim. While this fits the minimal aesthetic, ensure the visual feedback is sufficient for users to notice their fragment budget usage. Consider if the accent color provides enough contrast against the muted track background.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app/globals.css` around lines 497 - 509, The budget progress track (.budget-track) is too thin to be noticeable; increase its height (e.g., from 3px to a more visible value like ~6–8px) and use a responsive override for smaller viewports (replace the 2px mobile rule with a proportional min-height via a media query) so the bar remains tappable/visible; also ensure the fill (.budget-fill) contrast against the muted background is sufficient by favouring a stronger accent or slightly darker gradient stops and keep the existing transition; update .budget-track to use min-height and adjust border-radius if needed for better visibility.
99-103: Consider browser support if targeting legacy versions.The
color-mix(in srgb, ...)function is widely supported in modern browsers (Chrome 111+, Firefox 113+, Safari 16.2+, Opera 97+), with ~93%+ global coverage as of 2026. A fallback gradient is only necessary if your target audience requires IE or browsers older than 2023.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app/globals.css` around lines 99 - 103, The background uses color-mix(in srgb, var(--page-bg) 97%, `#f0e8f4` 3%) which may not exist in legacy browsers—add a fallback by placing a compatible linear-gradient before the color-mix declaration (so it will be used by UAs that don't understand color-mix) or compute the mixed color into a CSS variable (e.g., precompute rgba hex) and reference that fallback; update the same background declaration (the lines with radial-gradient(...) and linear-gradient(180deg, var(--page-bg), ...)) so older browsers pick the fallback gradient while modern browsers will use the color-mix entry.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/app/globals.css`:
- Around line 669-673: The .creator-input:focus and .creator-textarea:focus
rules remove the browser focus ring (outline: none) and only change
border-bottom-color, which may not meet WCAG 2.1 contrast for focus; update the
focus styling for .creator-input and .creator-textarea so that :focus preserves
an accessible visible indicator (e.g., reinstate a high-contrast outline or add
a clearly visible box-shadow or thicker border with sufficient contrast) and
ensure :focus and :focus-visible behave consistently for keyboard and mouse
users by applying the accessible indicator in :focus-visible for keyboard focus
and a fallback on :focus when needed; target the selectors .creator-input,
.creator-textarea, :focus, and :focus-visible when making these changes.
---
Nitpick comments:
In `@src/app/globals.css`:
- Around line 76-79: The dark theme CSS radius tokens (--radius-xl, --radius-lg,
--radius-md, --radius-sm) are set to 0px while the light theme uses 2px; either
update the dark theme tokens to 2px to match light mode or, if the 0px choice is
intentional, add a short comment above these variables explaining the deliberate
"sharper" dark-mode design decision; locate the variables in globals.css (the
block defining --radius-xl/--lg/--md/--sm) and make the change or add the
comment accordingly.
- Around line 165-182: The CSS only targets WebKit scrollbars (::
-webkit-scrollbar / ::-webkit-scrollbar-thumb); add Firefox-compatible rules by
setting scrollbar-width: thin and scrollbar-color using the same theme variables
(e.g., scrollbar-width: thin; scrollbar-color: var(--surface-elevated)
transparent) on the same scope (body or :root) and optionally add a hover state
using a selector (e.g., body:hover { scrollbar-color: var(--accent) transparent
} or via a utility class) so Firefox renders a thin thumb with the same colors
as ::-webkit-scrollbar and ::-webkit-scrollbar-thumb.
- Around line 497-509: The budget progress track (.budget-track) is too thin to
be noticeable; increase its height (e.g., from 3px to a more visible value like
~6–8px) and use a responsive override for smaller viewports (replace the 2px
mobile rule with a proportional min-height via a media query) so the bar remains
tappable/visible; also ensure the fill (.budget-fill) contrast against the muted
background is sufficient by favouring a stronger accent or slightly darker
gradient stops and keep the existing transition; update .budget-track to use
min-height and adjust border-radius if needed for better visibility.
- Around line 99-103: The background uses color-mix(in srgb, var(--page-bg) 97%,
`#f0e8f4` 3%) which may not exist in legacy browsers—add a fallback by placing a
compatible linear-gradient before the color-mix declaration (so it will be used
by UAs that don't understand color-mix) or compute the mixed color into a CSS
variable (e.g., precompute rgba hex) and reference that fallback; update the
same background declaration (the lines with radial-gradient(...) and
linear-gradient(180deg, var(--page-bg), ...)) so older browsers pick the
fallback gradient while modern browsers will use the color-mix entry.
🪄 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: 1f740512-da09-4aac-94d4-32960513c2fc
⛔ Files ignored due to path filters (2)
final-light-v2.pngis excluded by!**/*.pngfinal-light.pngis excluded by!**/*.png
📒 Files selected for processing (7)
.playwright-mcp/page-2026-04-01T17-03-44-594Z.yml.playwright-mcp/page-2026-04-01T17-04-17-397Z.yml.playwright-mcp/page-2026-04-01T17-07-49-879Z.yml.playwright-mcp/page-2026-04-01T17-08-11-220Z.ymlsrc/app/globals.csssrc/components/home/link-creator.tsxsrc/components/viewer-shell.tsx
✅ Files skipped from review due to trivial changes (1)
- .playwright-mcp/page-2026-04-01T17-04-17-397Z.yml
🚧 Files skipped from review as they are similar to previous changes (2)
- src/components/home/link-creator.tsx
- src/components/viewer-shell.tsx
src/app/globals.css
Outdated
Comment on lines
669
to
673
| .creator-input:focus, | ||
| .creator-textarea:focus { | ||
| border-bottom-color: var(--accent); | ||
| outline: none; | ||
| } |
Contributor
There was a problem hiding this comment.
Focus indicator relies solely on border-bottom color change.
Setting outline: none removes the default focus ring. While the border-bottom-color change provides visual feedback, ensure this meets WCAG 2.1 focus indicator requirements (at least 3:1 contrast ratio). The :focus-visible rules elsewhere help for keyboard navigation, but :focus also fires on mouse clicks in some browsers.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/app/globals.css` around lines 669 - 673, The .creator-input:focus and
.creator-textarea:focus rules remove the browser focus ring (outline: none) and
only change border-bottom-color, which may not meet WCAG 2.1 contrast for focus;
update the focus styling for .creator-input and .creator-textarea so that :focus
preserves an accessible visible indicator (e.g., reinstate a high-contrast
outline or add a clearly visible box-shadow or thicker border with sufficient
contrast) and ensure :focus and :focus-visible behave consistently for keyboard
and mouse users by applying the accessible indicator in :focus-visible for
keyboard focus and a fallback on :focus when needed; target the selectors
.creator-input, .creator-textarea, :focus, and :focus-visible when making these
changes.
- Add compact toolbar ribbon and editorial content spacing - Rework selector, preview, and metadata presentation
- Rework global chrome styling for the new look - Simplify the header and theme toggle - Remove the promo quote and status badge
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
.impeccable.md (1)
43-56: Add blank lines before tables to satisfy markdownlint.The color token tables are missing required blank lines before them, which will cause markdownlint MD058 violations.
📝 Proposed fix
## Color Tokens ### Light + | Token | Value | Role | |-------|-------|------| | `--page-bg` | `#faf8f4` | Canvas |### Dark + | Token | Value | Role | |-------|-------|------| | `--page-bg` | `#0e0b14` | Canvas (deep dusk) |🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In @.impeccable.md around lines 43 - 56, The tables under the "### Light" and "### Dark" sections lack the required blank line before the table header (causing markdownlint MD058); add a single blank line immediately before each table so there is an empty line between the preceding heading/paragraph and the table header (locate the tables by the headers "### Light"/"### Dark" or token names like `--page-bg`, `--text-primary` to apply the fix).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In @.impeccable.md:
- Around line 43-56: The tables under the "### Light" and "### Dark" sections
lack the required blank line before the table header (causing markdownlint
MD058); add a single blank line immediately before each table so there is an
empty line between the preceding heading/paragraph and the table header (locate
the tables by the headers "### Light"/"### Dark" or token names like
`--page-bg`, `--text-primary` to apply the fix).
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 80c33aa5-25f9-4319-98ac-3684b77dd7ec
📒 Files selected for processing (7)
.impeccable.md.playwright-mcp/page-2026-04-01T17-25-08-008Z.yml.playwright-mcp/page-2026-04-01T17-25-28-520Z.yml.playwright-mcp/page-2026-04-01T17-56-15-721Z.ymlsrc/app/globals.csssrc/components/theme-toggle.tsxsrc/components/viewer-shell.tsx
✅ Files skipped from review due to trivial changes (4)
- .playwright-mcp/page-2026-04-01T17-25-28-520Z.yml
- .playwright-mcp/page-2026-04-01T17-25-08-008Z.yml
- .playwright-mcp/page-2026-04-01T17-56-15-721Z.yml
- src/components/viewer-shell.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- src/components/theme-toggle.tsx
- Remove decorative body gradients in light and dark modes - Keep the page background driven by `var(--page-bg)`
- Remove the light-mode grid overlay - Use a dark-mode hex grid background instead
![kilo-code-bot[bot]](https://waps.l3s.uni-hannover.de/live/im_/https://avatars.githubusercontent.com/in/2193792?s=60&v=4){kind=small}
| <span className="mono-pill">{activeArtifact.kind}</span> | ||
| </div> | ||
| ) : null} | ||
| <button type="button" className="artifact-action is-primary" onClick={handleArtifactDownload}> |
There was a problem hiding this comment.
WARNING: Duplicate download button — both lines 480-483 (Download) and 490-493 (Save) call handleArtifactDownload with identical behavior. The Save button with is-primary styling appears intentional as the primary CTA, but having two buttons for the same action is confusing UX. Either remove the first Download button or give Save a distinct behavior.
Code Review SummaryStatus: No Issues Found | Recommendation: Merge Overview
Resolved Issues (click to expand)RESOLVED
Incremental Changes (click to expand)Since the previous review (
Files Reviewed (5 files)
Diff SummaryThe increment since the previous review includes:
Reviewed by minimax-m2.5-20260211 · 588,421 tokens |
- Add subtle radial gradients for light and dark themes - Remove the fixed overlay hex grid
- Increase the ambient color washes on the shell background - Add a third gradient layer for more depth
- Swap the page accents to warmer radial tones - Keep the rest of the viewer shell unchanged
- soften the light theme backdrop - deepen the dark theme gradients
- Align mobile layout checks with renamed home and viewer sections - Use the first download button to avoid ambiguous selector matches
- Tighten empty-state and status wording - Update fragment disclosure expectations
- Add a compact two-column bento grid for artifact metadata - Keep the viewer shell metadata section tighter on screen
Owner
Author
|
@chatgpt-codex-connector review |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: a4a98637cb
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| @@ -1,4 +1,4 @@ | |||
| export const MAX_FRAGMENT_LENGTH = 8000; | |||
| export const MAX_FRAGMENT_LENGTH = 8192; | |||
There was a problem hiding this comment.
Changing MAX_FRAGMENT_LENGTH from 8000 to 8192 silently changes the public payload protocol and allows generating links that exceed the documented 8000-character contract used elsewhere in the repo (for example, AGENTS.md specifies an 8000-char budget and requires docs/examples/skill updates when protocol semantics change). As shipped, this creates contract drift between runtime validation and published guidance/sample data, so clients or users following the documented budget can no longer rely on a single canonical limit.
Useful? React with 👍 / 👎.
- Raise documented fragment budget to 8,192 characters - Rename viewer actions to Download and Print
- Update payload docs and example envelopes for the redesign - Ignore generated design references and Playwright snapshots
The redesign renamed "Print / PDF" to "Print" but the e2e test wasn't updated. Also bumps waitForViewerState timeout from 5s to 15s to reduce flakiness in CI where fragment decoding can be slow. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
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
Testing
Summary by CodeRabbit
New Features
Style
Documentation
Chores