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>
This commit is contained in:
Harshit Singh Bhandari 2026-07-03 22:29:07 +05:30 committed by GitHub
parent 6f09a1fc78
commit c9cff5f22e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 25 additions and 2 deletions

View File

@ -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 { useNavigate, useParams, useRouterState } from "@tanstack/react-router";
import { import {
ChevronRight, ChevronRight,
@ -151,7 +151,17 @@ export function Sidebar({
next.has(id) ? next.delete(id) : next.add(id); next.has(id) ? next.delete(id) : next.add(id);
return next; return next;
}); });
// agent-orchestrator's sidebar resize: drag the right edge (200420px, // 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, // persisted), double-click to reset to 240px. Drives --ao-sidebar-w on :root,
// which the provider forwards into shadcn's --sidebar-width. // which the provider forwards into shadcn's --sidebar-width.
const { onPointerDown: onResizePointerDown, onDoubleClick: onResizeDoubleClick } = useResizable({ 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"> <span className="min-w-0 flex-1 truncate text-[14px] font-bold tracking-[-0.015em] text-foreground group-data-[collapsible=icon]:hidden">
Agent Orchestrator Agent Orchestrator
</span> </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. */} {/* On macOS the toggle lives in the titlebar cluster instead. */}
{!isMac && ( {!isMac && (
<Tooltip> <Tooltip>

View File

@ -111,6 +111,7 @@
--green-strong: #74b98a; --green-strong: #74b98a;
--amber: #e8c14a; --amber: #e8c14a;
--red: #ef6b6b; --red: #ef6b6b;
--purple: #a78bfa;
/* Terminal — dark palette (light override below). */ /* Terminal — dark palette (light override below). */
--term-bg: #15171b; --term-bg: #15171b;
--term-fg: #d7d7d2; --term-fg: #d7d7d2;
@ -148,6 +149,7 @@
--green-strong: #1a7f37; --green-strong: #1a7f37;
--amber: #9a6b00; --amber: #9a6b00;
--red: #c0392b; --red: #c0392b;
--purple: #7c3aed;
--interactive-hover: rgb(0 0 0 / 0.04); --interactive-hover: rgb(0 0 0 / 0.04);
--interactive-active: rgb(0 0 0 / 0.07); --interactive-active: rgb(0 0 0 / 0.07);
--kanban-column-bg: rgb(0 0 0 / 0.02); --kanban-column-bg: rgb(0 0 0 / 0.02);