From c9cff5f22e7f5e29449e6fdd2c3947b95c77c939 Mon Sep 17 00:00:00 2001
From: Harshit Singh Bhandari <dev@theharshitsingh.com>
Date: Fri, 3 Jul 2026 22:29:07 +0530
Subject: [PATCH] feat(sidebar): nightly channel badge on the wordmark (#2379)

* feat(sidebar): purple nightly badge on the wordmark

Add a small purple pill labeled "nightly" next to the "Agent Orchestrator"
wordmark in the sidebar header. The badge:
- is derived from the running app version string (contains "-nightly."),
  not the update-channel setting, so it reflects the actual binary identity
- is hidden in the collapsed icon rail (group-data-[collapsible=icon]:hidden)
- uses a new --purple CSS token added to both dark (#a78bfa) and light
  (#7c3aed) palette blocks in styles.css, styled via color-mix following
  the existing reviewer-status idiom
- is shrink-0 so it does not crowd the flex-1 truncate wordmark span

Stable builds show no badge. Dev builds ("0.0.0-preview") show no badge.

Part of AgentWrapper/agent-orchestrator#2377.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* chore: format with prettier [skip ci]

---------

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 frontend/src/renderer/components/Sidebar.tsx | 25 ++++++++++++++++++--
 frontend/src/renderer/styles.css             |  2 ++
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/frontend/src/renderer/components/Sidebar.tsx b/frontend/src/renderer/components/Sidebar.tsx
index c9567db77..81f8a9bc3 100644
--- a/frontend/src/renderer/components/Sidebar.tsx
+++ b/frontend/src/renderer/components/Sidebar.tsx
@@ -1,4 +1,4 @@
-import { useQueryClient } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useNavigate, useParams, useRouterState } from "@tanstack/react-router";
 import {
 	ChevronRight,
@@ -151,7 +151,17 @@ export function Sidebar({
 			next.has(id) ? next.delete(id) : next.add(id);
 			return next;
 		});
-	// agent-orchestrator's sidebar resize: drag the right edge (200–420px,
+	// Fetch the running app version to derive the build channel. Channel is
+	// identity: derived from the version string, not the update-channel setting
+	// (the setting can be changed mid-session; the binary cannot).
+	const { data: appVersion } = useQuery({
+		queryKey: ["app-version"],
+		queryFn: () => aoBridge.app.getVersion(),
+		staleTime: Infinity,
+	});
+	const isNightly = typeof appVersion === "string" && appVersion.includes("-nightly.");
+
+	// agent-orchestrator's sidebar resize: drag the right edge (200-420px,
 	// persisted), double-click to reset to 240px. Drives --ao-sidebar-w on :root,
 	// which the provider forwards into shadcn's --sidebar-width.
 	const { onPointerDown: onResizePointerDown, onDoubleClick: onResizeDoubleClick } = useResizable({
@@ -199,6 +209,17 @@ export function Sidebar({
 					<span className="min-w-0 flex-1 truncate text-[14px] font-bold tracking-[-0.015em] text-foreground group-data-[collapsible=icon]:hidden">
 						Agent Orchestrator
 					</span>
+					{isNightly && (
+						<span
+							className="shrink-0 rounded-full px-1.5 py-0.5 text-[10px] font-semibold leading-none group-data-[collapsible=icon]:hidden"
+							style={{
+								color: "var(--purple)",
+								background: "color-mix(in srgb, var(--purple) 12%, transparent)",
+							}}
+						>
+							nightly
+						</span>
+					)}
 					{/* On macOS the toggle lives in the titlebar cluster instead. */}
 					{!isMac && (
 						<Tooltip>
diff --git a/frontend/src/renderer/styles.css b/frontend/src/renderer/styles.css
index 10c3b4f51..eb419dde5 100644
--- a/frontend/src/renderer/styles.css
+++ b/frontend/src/renderer/styles.css
@@ -111,6 +111,7 @@
 	--green-strong: #74b98a;
 	--amber: #e8c14a;
 	--red: #ef6b6b;
+	--purple: #a78bfa;
 	/* Terminal — dark palette (light override below). */
 	--term-bg: #15171b;
 	--term-fg: #d7d7d2;
@@ -148,6 +149,7 @@
 	--green-strong: #1a7f37;
 	--amber: #9a6b00;
 	--red: #c0392b;
+	--purple: #7c3aed;
 	--interactive-hover: rgb(0 0 0 / 0.04);
 	--interactive-active: rgb(0 0 0 / 0.07);
 	--kanban-column-bg: rgb(0 0 0 / 0.02);