Skip to content

feat(web): distinguish the staging environment #4075

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
RSO merged 4 commits into from
Jun 18, 2026
+66 −16
Merged

feat(web): distinguish the staging environment #4075

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a1fb25e
feat(web): distinguish staging environment
RSO Jun 17, 2026
44fdde3
feat(staging): add dismiss button to staging environment banner
kilo-code-bot[bot] Jun 17, 2026
dbd89eb
fix(web): add 'use client' directive to StagingEnvironmentBanner
kilo-code-bot[bot] Jun 17, 2026
8db4982
Merge branch 'main' into humorous-bergamot
RSO Jun 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ENVIRONMENT.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ This document lists all environment variables used in the Kilo Code cloud monore
### Vercel & Build Info

- `VERCEL_ENV` - Vercel environment (`development`, `preview`, `production`); used in `apps/web/next.config.mjs`, `apps/web/src/lib/constants.ts`, and `apps/web/.env.test`. [SERVER]
- `VERCEL_TARGET_ENV` - Vercel system or custom target environment; `apps/web/src/lib/constants.ts` uses the `staging` target to select `https://staging-app.kilo.ai`. [SERVER]
- `VERCEL_TARGET_ENV` - Vercel system or custom deployment environment (`development`, `preview`, `production`, `staging`, etc.); used in `apps/web/src/app/layout.tsx` to identify staging UI. [SERVER]
- `VERCEL_URL` - Auto-injected by Vercel; current deployment URL. Used in `apps/web/src/lib/buildInfo.ts`. [SERVER]
- `VERCEL_GIT_COMMIT_SHA` - Auto-injected by Vercel; Git commit SHA of the current deployment. Used in `apps/web/src/lib/buildInfo.ts`. [SERVER]
- `NEXT_PUBLIC_VERCEL_URL` - Client-exposed Vercel deployment URL from build info. [PUBLIC]
Expand Down
13 changes: 13 additions & 0 deletions apps/web/public/kilo-v1-STAGING.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
40 changes: 25 additions & 15 deletions apps/web/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { PostHogProvider } from '../components/PostHogProvider';
import { Providers } from '../components/Providers';
import { DataLayerProvider } from '../components/DataLayerProvider';
import { ImpactIdentify } from '@/components/ImpactIdentify';
import { StagingEnvironmentBanner } from '@/components/shared/StagingEnvironmentBanner';
import { APP_URL } from '@/lib/constants';

const inter = Inter({
Expand All @@ -26,6 +27,9 @@ const jetbrainsMono = JetBrains_Mono({
variable: '--font-jetbrains',
});

const isStagingEnvironment = process.env.VERCEL_TARGET_ENV === 'staging';
const stagingFavicon = '/kilo-v1-STAGING.svg';

export const metadata: Metadata = {
title: 'Kilo Code - Open source AI agent VS Code extension',
description:
Expand All @@ -47,8 +51,9 @@ export const metadata: Metadata = {
'Write code more efficiently by generating code, automating tasks, and providing suggestions',
},
icons: {
icon:
process.env.NODE_ENV !== 'production'
icon: isStagingEnvironment
? [{ url: stagingFavicon, type: 'image/svg+xml' }]
: process.env.NODE_ENV !== 'production'
? [{ url: '/kilo-v1-DEV.svg', type: 'image/svg+xml' }]
: [
{ url: '/favicon.ico', sizes: '48x48', type: 'image/x-icon' },
Expand All @@ -59,24 +64,28 @@ export const metadata: Metadata = {
sizes: '180x180',
type: 'image/png',
},
shortcut: { url: '/favicon.ico' },
shortcut: { url: isStagingEnvironment ? stagingFavicon : '/favicon.ico' },
other: [
{
rel: 'manifest',
url: '/site.webmanifest',
},
{
rel: 'icon',
type: 'image/png',
sizes: '192x192',
url: '/favicon/android-chrome-192x192.png',
},
{
rel: 'icon',
type: 'image/png',
sizes: '512x512',
url: '/favicon/android-chrome-512x512.png',
},
...(isStagingEnvironment
? []
: [
{
rel: 'icon',
type: 'image/png',
sizes: '192x192',
url: '/favicon/android-chrome-192x192.png',
},
{
rel: 'icon',
type: 'image/png',
sizes: '512x512',
url: '/favicon/android-chrome-512x512.png',
},
]),
],
},
other: {
Expand Down Expand Up @@ -107,6 +116,7 @@ export default function RootLayout({
>
<head />
<body>
{isStagingEnvironment ? <StagingEnvironmentBanner /> : null}
<Providers>
<DataLayerProvider />
<ImpactIdentify />
Expand Down
27 changes: 27 additions & 0 deletions apps/web/src/components/shared/StagingEnvironmentBanner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
'use client';

import { useState } from 'react';
import { FlaskConical } from 'lucide-react';

export function StagingEnvironmentBanner() {
const [dismissed, setDismissed] = useState(false);

if (dismissed) return null;

return (
<aside className="relative z-50 flex min-h-9 w-full shrink-0 items-center justify-center gap-2 border-b border-amber-300 bg-amber-400 px-3 py-2 text-center text-xs font-medium text-amber-950 sm:text-sm">
<FlaskConical aria-hidden="true" className="size-4 shrink-0" />
<span className="font-bold tracking-wider uppercase">Staging</span>
<span aria-hidden="true" className="h-3 w-px bg-amber-950/30" />
<span>This is a test environment.</span>
<button
type="button"
aria-label="Dismiss staging banner"
onClick={() => setDismissed(true)}
className="absolute right-3 font-bold text-amber-950/70 hover:text-amber-950"
>
×
</button>
</aside>
);
}
Loading