Rebuild agent-render UI in Bench Instrument design language - #112
Conversation
Deploying agent-render with
|
| Latest commit: |
b013dd0
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://862143ef.agent-render.pages.dev |
| Branch Preview URL: | https://sol-rebuild.agent-render.pages.dev |
|
| Filename | Overview |
|---|---|
| src/components/viewer-shell.tsx | Replaces the homepage and viewer-shell hierarchy while preserving fragment synchronization, decoding, self-hosted payload injection, and bundle-selection behavior. |
| src/components/home/link-creator.tsx | Reorganizes the existing local link-generation workflow into five procedural steps without changing generation, stale-result, preview, or copy behavior. |
| src/components/viewer/artifact-stage.tsx | Promotes filename, status, limits, and diagnostics while retaining renderer dispatch and copy, download, raw-view, and markdown-print actions. |
| src/app/globals.css | Rebuilds global tokens, responsive layouts, renderer chrome, dark styling, and print presentation around the new design language. |
| src/components/viewer/fragment-details-disclosure.tsx | Restyles fragment diagnostics and intentionally opens the native disclosure by default; no new security boundary violation was established. |
| src/app/layout.tsx | Replaces the font stack and adds inert design-contract metadata while preserving metadata and pre-hydration theme initialization. |
Flowchart
%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[Browser shell] --> B{Fragment present?}
B -->|No| C[Five-step link creator]
C --> D[Generate fragment link locally]
D --> A
B -->|Yes| E[Decode and validate fragment]
E -->|Invalid| F[Fragment fault placard]
E -->|Valid| G[Artifact viewer]
G --> H[Limits and fragment diagnostics]
G --> I[Artifact selector]
G --> J[Deferred renderer]
J --> K[Copy, download, print, or raw view]
Reviews (1): Last reviewed commit: "Rebuild UI in bench instrument design la..." | Re-trigger Greptile
![kilo-code-bot[bot]](https://avatars.githubusercontent.com/in/2193792?s=60&v=4){kind=small}
| codec, | ||
| hashPreview, | ||
| }: FragmentDetailsDisclosureProps) { | ||
| const statusColor = statusLabel === "FAULT" ? "var(--alert)" : "var(--confirmation)"; |
There was a problem hiding this comment.
[SUGGESTION]: Re-derive the status color from statusLabel instead of receiving it from the parent
ArtifactStage already computes statusTone.color (via getStatusTone) and passes statusTone.label/statusTone.message down, but not statusTone.color. This line re-derives the color from a hardcoded statusLabel === "FAULT" check, which duplicates the parent's tone logic. If getStatusTone ever returns a third label value (note parsed.code === "empty" used to return "Empty"), this hardcoded ternary would silently render it as confirmation (var(--confirmation)) even though the parent would color it differently. Passing statusTone.color down as a prop keeps a single source of truth.
Code Review SummaryStatus: 1 Issue Found | Recommendation: Address before merge Overview
Issue Details (click to expand)SUGGESTION
Files Reviewed (22 files)
Fix these issues in Kilo Cloud Reviewed by deepseek-v4-flash · Input: 41K · Output: 7.6K · Cached: 536.8K |
|
Warning Review limit reached
Next review available in: 1 minute You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (8)
📒 Files selected for processing (21)
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 |
1 participant
What changed
Why
The existing page structure could not express the requested procedural grammar, dense instrument layout, and functional material depth as a token-only reskin. This rebuild makes those requirements structural while keeping the product contract intact.
Impact
This is a chrome and information-hierarchy rebuild. Fragment transport, codecs, payload schemas, renderer dynamic imports, behavior, accessibility attributes, and test identifiers remain unchanged. Mobile ordering, two-column metadata, toolbar target widths, and the deferred renderer class contracts are preserved.
Validation
npm run lint && npm run test && npm run typechecknpm run build && npm run check:build-budgets— homepage 106.5 KiB / 115 KiBCI=1 npx playwright test tests/e2e/viewer.spec.ts --project=chromium— 28 passednpx playwright test --project=chromium— 49 passed, including regenerated visual baselinesgit diff --checkpublic/vendor/diff-view-pure.cssremains byte-identical to the package copyWebKit snapshot execution was unavailable on this host because its Playwright system libraries require privileged installation; the Chromium suite and committed Chromium baselines are green.