feat(web): distinguish the staging environment

[RSO]

Summary

• Add a full-width staging banner so test deployments are immediately distinguishable from production.
• Select an amber staging favicon from VERCEL_TARGET_ENV without changing production or development branding.
• Document the Vercel custom-environment variable used by the web app.
• Add an in-memory dismiss button (×) to the staging banner so it can be hidden for the current session.

Verification

• Opened the web app locally with VERCEL_TARGET_ENV=staging and confirmed the banner appears across the full viewport.
• Confirmed the rendered shortcut and icon metadata point to /kilo-v1-STAGING.svg.
• Checked the banner at desktop and narrow viewport widths.
• Confirmed the × button dismisses the banner (renders null) and the banner reappears on page reload.

Visual Changes

Reviewer Notes

Staging detection relies on Vercel injecting VERCEL_TARGET_ENV=staging for the custom deployment target.

---

Built for markijbema by Kilo

[kilo-code-bot]

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Executive Summary

The new commit correctly adds the 'use client'; directive to StagingEnvironmentBanner — required since the component uses useState. No regressions introduced.

Files Reviewed (4 files)

• apps/web/src/app/layout.tsx
• apps/web/src/components/shared/StagingEnvironmentBanner.tsx
• apps/web/public/kilo-v1-STAGING.svg
• ENVIRONMENT.md

Previous Review Summaries (2 snapshots, latest commit 44fdde3)

Current summary above is authoritative. Previous snapshots are kept for context only.

Previous review (commit 44fdde3)

Status: No Issues Found | Recommendation: Merge

Executive Summary

Adds an in-memory dismiss button (×) to the staging environment banner — clean client-side state, no hooks rule violations, proper a11y attributes.

Files Reviewed (4 files)

• apps/web/src/app/layout.tsx
• apps/web/src/components/shared/StagingEnvironmentBanner.tsx
• apps/web/public/kilo-v1-STAGING.svg
• ENVIRONMENT.md

Previous review (commit a1fb25e)

Status: No Issues Found | Recommendation: Merge

Executive Summary

Straightforward staging environment differentiation using VERCEL_TARGET_ENV for favicon and a full-width banner — no security, logic, or performance concerns.

Files Reviewed (4 files)

• apps/web/src/app/layout.tsx
• apps/web/src/components/shared/StagingEnvironmentBanner.tsx
• apps/web/public/kilo-v1-STAGING.svg
• ENVIRONMENT.md

---

_{Reviewed by deepseek-v4-pro-20260423 · 136,289 tokens}

_{Review guidance: REVIEW.md from base branch main}

[markijbema]

@kilocode-bot please add an x to the banner, which dismisses the banner temporarily (whatever is easiest, say for 'this session, or 'this load'), so we can temporarily hide it when we want to give a demo or make a screenshot. i DO NOT want this persisted in ANY way

[kilo-code-bot]

To use Kilo from GitHub you first need to link your GitHub account to Kilo. Link your Kilo account to continue. After linking, mention me again in this issue or pull request.

[markijbema]

@kilocode-bot please add an x to the banner, which dismisses the banner temporarily (whatever is easiest, say for 'this session, or 'this load'), so we can temporarily hide it when we want to give a demo or make a screenshot. i DO NOT want this persisted in ANY way

[kilo-code-bot]

Done! The dismiss button has been added to the staging banner in PR #4075. Here's what was implemented:

• × button positioned on the right side of the banner (absolutely positioned so it doesn't shift the centered text)
• In-memory only — uses React useState, resets on every page load, zero persistence
• Styled to match the amber design (text-amber-950/70, hover state)
• Clicking it sets dismissed = true and the component returns null

[RSO]

@kilocode-bot please fix the failing build

[kilo-code-bot]

The build fix has been pushed! ✅

Root cause: StagingEnvironmentBanner.tsx was using useState (a client-side React hook) without the 'use client' directive, causing a conflict with Next.js App Router's default Server Component behavior.

Fix applied: Added 'use client'; as the first line of StagingEnvironmentBanner.tsx.