dashboard versioning and deps

Author: timgit

packages/dashboard/app/app.css

@@ -231,11 +231,14 @@ export function AppSidebar () {
   return (
     <Sidebar>
       <SidebarHeader>
-        <div className="flex items-center gap-2 px-2 py-2">
-          <div className="w-8 h-8 rounded-lg bg-primary-600 flex items-center justify-center shrink-0">
-            <span className="text-white font-bold text-sm">PG</span>
+        <div className="flex items-center gap-2.5 pl-1.5 pr-3 py-2">
+          <div className="w-8 h-8 rounded-[9px] bg-primary-600 flex items-center justify-center shrink-0">
+            <span className="text-white font-bold text-sm tracking-tight">PG</span>
+          </div>
+          <div className="leading-tight whitespace-nowrap group-data-[state=collapsed]:hidden">
+            <div className="font-semibold text-sm text-sidebar-accent-foreground">pg-boss</div>
+            <div className="font-mono text-[9px] tracking-[0.15em] text-sidebar-foreground/60">CONSOLE</div>
           </div>
-          <span className="font-semibold text-sidebar-foreground group-data-[state=collapsed]:hidden">pg-boss</span>
         </div>
         {databases && currentDb && databases.length > 1 && (
           <div className="group-data-[state=collapsed]:hidden">
@@ -262,7 +265,7 @@ export function AppSidebar () {
                     {({ isActive }: { isActive: boolean }) => (
                       <SidebarMenuButton isActive={isActive} tooltip={item.name}>
                         <item.icon className="h-5 w-5 flex-shrink-0" />
-                        <span className="group-data-[state=collapsed]:hidden">{item.name}</span>
+                        <span className="whitespace-nowrap group-data-[state=collapsed]:hidden">{item.name}</span>
                       </SidebarMenuButton>
                     )}
                   </NavLink>

packages/dashboard/app/components/queue-stats-cards.tsx

@@ -1,88 +1,29 @@
 import type { QueueStats } from '~/lib/types'
-import { cn } from '~/lib/utils'
+import { StatCard } from '~/components/ui/stat-card'
 
 interface StatsCardsProps {
   stats: QueueStats
 }
 
 const statCards = [
-  {
-    name: 'Queued Jobs',
-    key: 'totalQueued' as const,
-    description: 'Jobs waiting to be processed',
-    color: 'text-gray-600 dark:text-gray-400',
-    bgColor: 'bg-gray-50 dark:bg-gray-800',
-  },
-  {
-    name: 'Active Jobs',
-    key: 'totalActive' as const,
-    description: 'Jobs currently processing',
-    color: 'text-gray-600 dark:text-gray-400',
-    bgColor: 'bg-gray-50 dark:bg-gray-800',
-  },
-  {
-    name: 'Deferred Jobs',
-    key: 'totalDeferred' as const,
-    description: 'Jobs scheduled for later',
-    color: 'text-gray-600 dark:text-gray-400',
-    bgColor: 'bg-gray-50 dark:bg-gray-800',
-  },
-  {
-    name: 'Total Jobs',
-    key: 'totalJobs' as const,
-    description: 'All jobs across queues',
-    color: 'text-gray-600 dark:text-gray-400',
-    bgColor: 'bg-gray-50 dark:bg-gray-800',
-  },
+  { name: 'Queued Jobs', key: 'totalQueued' as const, hint: 'waiting to process', accent: 'neutral' as const },
+  { name: 'Active', key: 'totalActive' as const, hint: 'processing now', accent: 'primary' as const },
+  { name: 'Deferred', key: 'totalDeferred' as const, hint: 'scheduled for later', accent: 'neutral' as const },
+  { name: 'Total Jobs', key: 'totalJobs' as const, hint: 'all-time across queues', accent: 'neutral' as const },
 ]
 
 export function StatsCards ({ stats }: StatsCardsProps) {
   return (
     <>
       {statCards.map((stat) => (
-        <div
+        <StatCard
           key={stat.key}
-          className={cn(
-            'overflow-hidden rounded-xl border shadow-sm',
-            'bg-white border-gray-200',
-            'dark:bg-gray-900 dark:border-gray-800'
-          )}
-        >
-          <div className="p-5">
-            <div className="flex items-center">
-              <div className={cn('flex-shrink-0 rounded-lg p-3', stat.bgColor)}>
-                <StatIcon className={cn('h-6 w-6', stat.color)} />
-              </div>
-              <div className="ml-4 flex-1">
-                <p className="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">
-                  {stat.name}
-                </p>
-                <p className={cn('text-2xl font-semibold', stat.color)}>
-                  {stats[stat.key].toLocaleString()}
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
+          label={stat.name}
+          value={stats[stat.key].toLocaleString()}
+          hint={stat.hint}
+          accent={stat.accent}
+        />
       ))}
     </>
   )
 }
-
-function StatIcon ({ className }: { className?: string }) {
-  return (
-    <svg
-      className={className}
-      fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth={1.5}
-      stroke="currentColor"
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z"
-      />
-    </svg>
-  )
-}

packages/dashboard/app/components/sidebar.tsx

@@ -2,15 +2,16 @@ import { createContext, useContext, useEffect, useState } from 'react'
 
 type Theme = 'light' | 'dark' | 'system'
 
-export type ColorTheme = 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple'
+export type ColorTheme = 'cobalt' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple'
 
-// Ordered by hue (warm to cool to warm)
+// Cobalt is the console's signature primary; the rest follow by hue.
 export const COLOR_THEMES: ColorTheme[] = [
-  'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple'
+  'cobalt', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple'
 ]
 
-// Tailwind color-600 hex values for favicon
+// Color-600 hex values for favicon
 const COLOR_HEX: Record<ColorTheme, string> = {
+  cobalt: '#284fe0',
   emerald: '#059669',
   teal: '#0d9488',
   cyan: '#0891b2',
@@ -54,7 +55,7 @@ function getStoredColorTheme (): ColorTheme {
   if (stored && COLOR_THEMES.includes(stored as ColorTheme)) {
     return stored as ColorTheme
   }
-  return 'violet'
+  return 'cobalt'
 }
 
 export function ThemeProvider ({ children }: { children: React.ReactNode }) {

packages/dashboard/app/components/stats-cards.tsx

@@ -2,19 +2,22 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { type ReactNode } from 'react'
 import { cn } from '~/lib/utils'
 
+// Variants map onto the pg-boss job-lifecycle palette (--state-*), which is
+// theme-aware (solid tints in light, translucent on dark), so the same five
+// variants render correctly in both modes without per-mode classes.
 const badgeVariants = cva(
-  'inline-flex items-center gap-1.5 rounded-full font-medium ring-1 ring-inset',
+  'inline-flex items-center gap-1.5 rounded-full font-medium',
   {
     variants: {
       variant: {
-        gray: 'bg-gray-100 text-gray-700 ring-gray-500/10 dark:bg-gray-800 dark:text-gray-300 dark:ring-gray-500/20',
-        primary: 'bg-primary-50 text-primary-700 ring-primary-600/10 dark:bg-primary-950 dark:text-primary-300 dark:ring-primary-400/20',
-        success: 'bg-green-50 text-green-700 ring-green-600/10 dark:bg-green-950 dark:text-green-300 dark:ring-green-400/20',
-        warning: 'bg-warning-50 text-amber-700 ring-warning-600/10 dark:bg-warning-950 dark:text-amber-300 dark:ring-warning-400/20',
-        error: 'bg-red-50 text-red-700 ring-red-600/10 dark:bg-red-950 dark:text-red-300 dark:ring-red-400/20',
+        gray: 'bg-[var(--state-created-bg)] text-[var(--state-created-fg)]',
+        primary: 'bg-[var(--state-active-bg)] text-[var(--state-active-fg)]',
+        success: 'bg-[var(--state-completed-bg)] text-[var(--state-completed-fg)]',
+        warning: 'bg-[var(--state-retry-bg)] text-[var(--state-retry-fg)]',
+        error: 'bg-[var(--state-failed-bg)] text-[var(--state-failed-fg)]',
       },
       size: {
-        sm: 'px-2 py-0.5 text-xs',
+        sm: 'px-2 py-0.5 text-[11px]',
         md: 'px-2.5 py-1 text-xs',
         lg: 'px-3 py-1 text-sm',
       },
@@ -27,11 +30,11 @@ const badgeVariants = cva(
 )
 
 const dotVariants: Record<NonNullable<VariantProps<typeof badgeVariants>['variant']>, string> = {
-  gray: 'bg-gray-500',
-  primary: 'bg-primary-500 dark:bg-primary-400',
-  success: 'bg-green-500',
-  warning: 'bg-warning-500',
-  error: 'bg-red-500',
+  gray: 'bg-[var(--state-created-dot)]',
+  primary: 'bg-[var(--state-active-dot)]',
+  success: 'bg-[var(--state-completed-dot)]',
+  warning: 'bg-[var(--state-retry-dot)]',
+  error: 'bg-[var(--state-failed-dot)]',
 }
 
 interface BadgeProps extends VariantProps<typeof badgeVariants> {

packages/dashboard/app/components/theme-provider.tsx

@@ -26,14 +26,14 @@ interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
   className?: string
 }
 
-export function Card ({ children, className, ...props }: CardProps) {
+export function Card ({ children, className, style, ...props }: CardProps) {
   return (
     <div
       className={cn(
-        'bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden',
-        'dark:bg-gray-900 dark:border-gray-800',
+        'rounded-[10px] border border-[var(--border-default)] shadow-sm overflow-hidden',
         className
       )}
+      style={{ background: 'var(--surface-card-grad)', ...style }}
       {...props}
     >
       {children}
@@ -45,7 +45,7 @@ export function CardHeader ({ children, className, ...props }: CardHeaderProps)
   return (
     <div
       className={cn(
-        'px-6 py-5 border-b border-gray-200 dark:border-gray-800',
+        'flex items-center justify-between gap-3 px-5 py-4 border-b border-[var(--border-subtle)]',
         className
       )}
       {...props}
@@ -59,7 +59,7 @@ export function CardTitle ({ children, className, ...props }: CardTitleProps) {
   return (
     <h3
       className={cn(
-        'text-lg font-semibold text-gray-900 dark:text-gray-100',
+        'text-base font-semibold tracking-[-0.01em] text-[var(--text-primary)]',
         className
       )}
       {...props}
@@ -76,7 +76,7 @@ export function CardDescription ({
 }: CardDescriptionProps) {
   return (
     <p
-      className={cn('mt-1 text-sm text-gray-500 dark:text-gray-400', className)}
+      className={cn('mt-1 text-sm text-[var(--text-tertiary)]', className)}
       {...props}
     >
       {children}
@@ -86,7 +86,7 @@ export function CardDescription ({
 
 export function CardContent ({ children, className, ...props }: CardContentProps) {
   return (
-    <div className={cn('px-6 py-5', className)} {...props}>
+    <div className={cn('px-5 py-5', className)} {...props}>
       {children}
     </div>
   )

packages/dashboard/app/components/ui/badge.tsx

@@ -4,6 +4,7 @@ import { cn } from '~/lib/utils'
 
 // Map color names to their Tailwind CSS variable for the 500 shade
 const colorSwatchStyles: Record<ColorTheme, string> = {
+  cobalt: 'bg-[#3b66f5]',
   emerald: 'bg-emerald-500',
   teal: 'bg-teal-500',
   cyan: 'bg-cyan-500',
@@ -15,6 +16,7 @@ const colorSwatchStyles: Record<ColorTheme, string> = {
 }
 
 const colorLabels: Record<ColorTheme, string> = {
+  cobalt: 'Cobalt',
   emerald: 'Emerald',
   teal: 'Teal',
   cyan: 'Cyan',

packages/dashboard/app/components/ui/card.tsx

@@ -0,0 +1,25 @@
+import { type ReactNode } from 'react'
+
+interface PageHeaderProps {
+  title: ReactNode
+  subtitle?: ReactNode
+  action?: ReactNode
+}
+
+// Route header — title + optional subtitle on the left, a primary action on
+// the right. Leads every console view.
+export function PageHeader ({ title, subtitle, action }: PageHeaderProps) {
+  return (
+    <div className="flex items-start justify-between gap-4 mb-6">
+      <div>
+        <h1 className="text-2xl font-semibold tracking-[-0.02em] text-[var(--text-primary)]">
+          {title}
+        </h1>
+        {subtitle && (
+          <p className="mt-1 text-sm text-[var(--text-tertiary)]">{subtitle}</p>
+        )}
+      </div>
+      {action}
+    </div>
+  )
+}