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:
parent
6f09a1fc78
commit
c9cff5f22e
|
|
@ -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 (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,
|
// 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>
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue