Re-sync frontend UI primitives with the @Nebari registry (#565)

* Move app-owned components and helpers out of registry-managed paths

confirm-dialog, split-button and user-badge are nebi-specific wrappers, not
@Nebari registry items, so they now live in src/components/ instead of
src/components/ui/. Likewise capitalize and the status colour helpers move
from src/lib/utils.ts (registry-owned, cn() only) into src/lib/strings.ts and
src/lib/status.ts. Importers and tests follow; split-button gains the explicit
button type Biome requires now that it is linted.

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

* Re-sync frontend UI primitives with the @Nebari registry

Re-add every installed registry item with --overwrite (code-block, select and
table had drifted; the rest were already current), re-apply @nebari/theme
(adds the --info tokens) and install the @nebari/claude-skill so Claude Code
sessions in frontend/ get the nebari-ui skill. The repo-wide .claude/ ignore
now lets .claude/skills/ through so the installed skill is tracked.

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

* Adopt the @Nebari theme hook and align the header with the Nebari recipe

Replace the hand-rolled useThemePreference/useLocalStorageState pair with the
registry's use-theme-preference + theme-provider, mounted once in main.tsx with
the existing nebi:themeMode storage key so saved preferences survive. App reads
theme state via useTheme(); Layout/ProfileMenu take ThemeMode from the registry
hook. index.html gains the pre-paint bootstrap script generated by
themeBootstrapScript('nebi:themeMode') so dark users no longer see a light
flash. The registry hook files are excluded from Biome like components/ui.

Header: drop the last hard-coded rgba shadows in favour of shadow-sm and
shadow-primary/40, size the profile menu at the recipe's 248px, and label the
brand link "Go to homepage".

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

* Fix theme picker overflow in the profile menu

Drop the horizontal padding around the Light/Dark/System control so it
matches the Nebari header recipe. The extra 16px left the muted track too
narrow for the three pills and the System option ran past its edge.

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

* Move the Nebari skill to .agents/skills with a .claude symlink

Store the registry-installed skill at frontend/.agents/skills so it is
agent-agnostic, and track frontend/.claude/skills as a symlink to it so
Claude Code (and shadcn re-syncs, which target .claude/skills) still
find it. Only the skills directory is linked so per-directory
settings.local.json files stay out of the tracked tree.

Generalize the .gitignore rules to **/.claude/* and **/.agents/*; the
previous .claude/* pattern was root-anchored and never applied to
frontend/.claude/.

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

---------

Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>

Author: jbouder

.gitignore

@@ -68,9 +68,15 @@ dist/
 go.work
 go.work.sum
 
-# Claude
+# AI agents (any directory level)
 CLAUDE.md
-.claude/
+**/.claude/*
+**/.agents/*
+# Keep registry-installed agent skills (e.g. frontend/.agents/skills/nebari-ui).
+# Claude Code reads .claude/skills, so frontend/.claude/skills is a symlink to
+# ../.agents/skills; the symlink itself is tracked.
+!**/.agents/skills/
+!**/.claude/skills
 
 # Git worktrees
 .worktrees/

frontend/.agents/skills/nebari-ui/SKILL.md

@@ -0,0 +1 @@
+../.agents/skills

frontend/.claude/skills

@@ -17,7 +17,9 @@
       "vite.config.ts",
       "!!**/dist",
       "!wailsjs",
-      "!src/components/ui"
+      "!src/components/ui",
+      "!src/hooks/use-theme-preference.ts",
+      "!src/hooks/theme-provider.tsx"
     ]
   },
 

frontend/biome.json

@@ -5,6 +5,26 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="referrer" content="no-referrer-when-downgrade" />
 
+    <!-- Apply the saved (or OS) theme before first paint. Generated by
+         themeBootstrapScript('nebi:themeMode') from src/hooks/use-theme-preference.ts;
+         regenerate rather than hand-editing if the storage key changes. -->
+    <script>
+      (function () {
+        var mode = null;
+        var prefersDark = false;
+        try {
+          mode = localStorage.getItem("nebi:themeMode");
+        } catch (e) {}
+        try {
+          prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        } catch (e) {}
+        var isDark = mode === 'dark' || (mode !== 'light' && prefersDark);
+        try {
+          document.documentElement.classList.toggle('dark', isDark);
+        } catch (e) {}
+      })();
+    </script>
+
     <!-- Favicons -->
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />

frontend/index.html

@@ -12,7 +12,7 @@ import {
 import { adminApi } from './api/admin';
 import { AdminLayout } from './components/layout/AdminLayout';
 import { Layout } from './components/layout/Layout';
-import { useThemePreference } from './hooks/useThemePreference';
+import { useTheme } from './hooks/theme-provider';
 import { getBasePath } from './lib/basePath';
 import { queryClient } from './lib/queryClient';
 import { AdminDashboard } from './pages/admin/AdminDashboard';
@@ -88,7 +88,7 @@ const AdminRoute = () => {
 };
 
 function App() {
-  const { themeMode, isDarkMode, setThemeMode } = useThemePreference();
+  const { themeMode, isDarkMode, setThemeMode } = useTheme();
 
   return (
     <QueryClientProvider client={queryClient}>

frontend/src/App.tsx

@@ -1,10 +1,12 @@
-import { describe, it, expect, vi } from 'vitest';
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { ConfirmDialog } from './confirm-dialog';
+import { describe, expect, it, vi } from 'vitest';
 import { renderWithProviders } from '@/test/utils';
+import { ConfirmDialog } from './confirm-dialog';
 
-function renderDialog(overrides?: Partial<Parameters<typeof ConfirmDialog>[0]>) {
+function renderDialog(
+  overrides?: Partial<Parameters<typeof ConfirmDialog>[0]>,
+) {
   const props = {
     open: true,
     onOpenChange: vi.fn(),
@@ -26,7 +28,9 @@ describe('ConfirmDialog', () => {
 
   it('shows default button labels', () => {
     renderDialog();
-    expect(screen.getByRole('button', { name: 'Continue' })).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Continue' }),
+    ).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
   });
 

…rc/components/ui/confirm-dialog.test.tsx …d/src/components/confirm-dialog.test.tsxfrontend/src/components/ui/confirm-dialog.test.tsx renamed to frontend/src/components/confirm-dialog.test.tsx frontend/src/components/ui/confirm-dialog.test.tsx renamed to frontend/src/components/confirm-dialog.test.tsx

@@ -40,11 +40,7 @@ export const ConfirmDialog = ({
   };
 
   return (
-    <Dialog
-      open={open}
-      onOpenChange={onOpenChange}
-      disablePointerDismissal
-    >
+    <Dialog open={open} onOpenChange={onOpenChange} disablePointerDismissal>
       <DialogContent role="alertdialog" showCloseButton={false}>
         <DialogHeader>
           <DialogTitle>{title}</DialogTitle>

…end/src/components/ui/confirm-dialog.tsx …ontend/src/components/confirm-dialog.tsxfrontend/src/components/ui/confirm-dialog.tsx renamed to frontend/src/components/confirm-dialog.tsx frontend/src/components/ui/confirm-dialog.tsx renamed to frontend/src/components/confirm-dialog.tsx

@@ -7,7 +7,7 @@ import { CodeBlock, CodeBlockBody } from '@/components/ui/code-block';
 import { useJobLogStream } from '@/hooks/useJobLogStream';
 import { useJobs } from '@/hooks/useJobs';
 import { useRemoteJobs, useRemoteView } from '@/hooks/useRemote';
-import { capitalize } from '@/lib/utils';
+import { capitalize } from '@/lib/strings';
 import type { Job, JobType } from '@/types';
 
 const statusColors = {

frontend/src/components/jobs/Jobs.tsx

@@ -13,10 +13,10 @@ import {
   NavigationMenu,
   NavLink,
 } from '@/components/ui/navigation-menu';
+import type { ThemeMode } from '@/hooks/use-theme-preference';
 import { useIsAdmin } from '@/hooks/useAdmin';
 import { useHostJobNotifications } from '@/hooks/useHostJobNotifications';
 import { useRemoteView } from '@/hooks/useRemote';
-import type { ThemeMode } from '@/hooks/useThemePreference';
 import { useVersion } from '@/hooks/useVersion';
 import { getBrandingLogoUrl } from '@/lib/brandingConfig';
 import { openExternal } from '@/lib/openExternal';
@@ -91,7 +91,7 @@ export const Layout = ({
       <NavigationMenu className="h-14 shrink-0 justify-between border-border bg-header pl-4 text-header-foreground">
         <MenuBarBrand
           href="/workspaces"
-          aria-label="Go to workspaces"
+          aria-label="Go to homepage"
           onClick={(event) => {
             event.preventDefault();
             navigate('/workspaces');
@@ -144,7 +144,7 @@ export const Layout = ({
                 <span
                   className={`w-1.5 h-1.5 rounded-full transition-all ${
                     viewMode === 'local'
-                      ? 'bg-primary shadow-[0_0_6px_rgba(155,61,204,0.4)]'
+                      ? 'bg-primary shadow-[0_0_6px] shadow-primary/40'
                       : 'bg-muted-foreground/50'
                   }`}
                 />
@@ -162,7 +162,7 @@ export const Layout = ({
                 <span
                   className={`w-1.5 h-1.5 rounded-full transition-all ${
                     viewMode === 'remote'
-                      ? 'bg-primary shadow-[0_0_6px_rgba(155,61,204,0.4)]'
+                      ? 'bg-primary shadow-[0_0_6px] shadow-primary/40'
                       : 'bg-muted-foreground/50'
                   }`}
                 />