From 13fd656e2b3981d6d6b5774b653819782d83b619 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Fri, 20 Mar 2026 13:10:45 -0500
Subject: [PATCH] Add Beta badge to Routines page and sidebar nav

Adds an amber "Beta" tag next to "Routines" in both the page heading
and the sidebar navigation item. Extends SidebarNavItem with textBadge
and textBadgeTone props for reusable text badges.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 ui/src/components/Sidebar.tsx        |  2 +-
 ui/src/components/SidebarNavItem.tsx | 16 ++++++++++++++++
 ui/src/pages/Routines.tsx            |  5 ++++-
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/Sidebar.tsx b/ui/src/components/Sidebar.tsx
index 14272454..b8cea2ca 100644
--- a/ui/src/components/Sidebar.tsx
+++ b/ui/src/components/Sidebar.tsx
@@ -99,7 +99,7 @@ export function Sidebar() {
 
         <SidebarSection label="Work">
           <SidebarNavItem to="/issues" label="Issues" icon={CircleDot} />
-          <SidebarNavItem to="/routines" label="Routines" icon={Repeat} />
+          <SidebarNavItem to="/routines" label="Routines" icon={Repeat} textBadge="Beta" textBadgeTone="amber" />
           <SidebarNavItem to="/goals" label="Goals" icon={Target} />
         </SidebarSection>
 
diff --git a/ui/src/components/SidebarNavItem.tsx b/ui/src/components/SidebarNavItem.tsx
index 18ba03f1..e0cd7f6f 100644
--- a/ui/src/components/SidebarNavItem.tsx
+++ b/ui/src/components/SidebarNavItem.tsx
@@ -11,6 +11,8 @@ interface SidebarNavItemProps {
   className?: string;
   badge?: number;
   badgeTone?: "default" | "danger";
+  textBadge?: string;
+  textBadgeTone?: "default" | "amber";
   alert?: boolean;
   liveCount?: number;
 }
@@ -23,6 +25,8 @@ export function SidebarNavItem({
   className,
   badge,
   badgeTone = "default",
+  textBadge,
+  textBadgeTone = "default",
   alert = false,
   liveCount,
 }: SidebarNavItemProps) {
@@ -50,6 +54,18 @@ export function SidebarNavItem({
         )}
       </span>
       <span className="flex-1 truncate">{label}</span>
+      {textBadge && (
+        <span
+          className={cn(
+            "ml-auto rounded-full px-1.5 py-0.5 text-[10px] font-medium leading-none",
+            textBadgeTone === "amber"
+              ? "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400"
+              : "bg-muted text-muted-foreground",
+          )}
+        >
+          {textBadge}
+        </span>
+      )}
       {liveCount != null && liveCount > 0 && (
         <span className="ml-auto flex items-center gap-1.5">
           <span className="relative flex h-2 w-2">
diff --git a/ui/src/pages/Routines.tsx b/ui/src/pages/Routines.tsx
index 2ca8a3f7..dcbdd1d6 100644
--- a/ui/src/pages/Routines.tsx
+++ b/ui/src/pages/Routines.tsx
@@ -229,7 +229,10 @@ export function Routines() {
     <div className="space-y-6">
       <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
         <div className="space-y-1">
-          <h1 className="text-2xl font-semibold tracking-tight">Routines</h1>
+          <h1 className="text-2xl font-semibold tracking-tight flex items-center gap-2">
+            Routines
+            <span className="rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-800 dark:bg-amber-900/30 dark:text-amber-400">Beta</span>
+          </h1>
           <p className="text-sm text-muted-foreground">
             Recurring work definitions that materialize into auditable execution issues.
           </p>