From e10513373e21682b7ca9408ed82a620bb87f912c Mon Sep 17 00:00:00 2001
From: nazarli-shabnam <shabnamnezerli@gmail.com>
Date: Mon, 15 Jun 2026 08:13:07 +0400
Subject: [PATCH 01/12] chore(ui): add @phosphor-icons/react

---
 apps/ui/package-lock.json | 14 ++++++++++++++
 apps/ui/package.json      |  1 +
 2 files changed, 15 insertions(+)

diff --git a/apps/ui/package-lock.json b/apps/ui/package-lock.json
index 19f47eb..aedddc2 100644
--- a/apps/ui/package-lock.json
+++ b/apps/ui/package-lock.json
@@ -7,6 +7,7 @@
       "name": "clevis-ui",
       "dependencies": {
         "@base-ui/react": "^1.3.0",
+        "@phosphor-icons/react": "^2.1.10",
         "@tanstack/react-query": "^5.100.10",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
@@ -2211,6 +2212,19 @@
         "url": "https://github.com/sponsors/Boshen"
       }
     },
+    "node_modules/@phosphor-icons/react": {
+      "version": "2.1.10",
+      "resolved": "https://registry.npmjs.org/@phosphor-icons/react/-/react-2.1.10.tgz",
+      "integrity": "sha512-vt8Tvq8GLjheAZZYa+YG/pW7HDbov8El/MANW8pOAz4eGxrwhnbfrQZq0Cp4q8zBEu8NIhHdnr+r8thnfRSNYA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8",
+        "react-dom": ">= 16.8"
+      }
+    },
     "node_modules/@reduxjs/toolkit": {
       "version": "2.12.0",
       "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.12.0.tgz",
diff --git a/apps/ui/package.json b/apps/ui/package.json
index 7b84f80..d52fbde 100644
--- a/apps/ui/package.json
+++ b/apps/ui/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.3.0",
+    "@phosphor-icons/react": "^2.1.10",
     "@tanstack/react-query": "^5.100.10",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

From 9296ce96b1435c12588be1b7376133e0f28da7cb Mon Sep 17 00:00:00 2001
From: nazarli-shabnam <shabnamnezerli@gmail.com>
Date: Mon, 15 Jun 2026 08:17:16 +0400
Subject: [PATCH 02/12] feat(ui): tactical-telemetry foundation (fonts, tokens,
 motion, texture)

---
 apps/ui/app/globals.css              | 175 +++++++++++++++++++++++++--
 apps/ui/app/layout.tsx               |  46 +++++--
 apps/ui/components/icon-provider.tsx |  16 +++
 3 files changed, 216 insertions(+), 21 deletions(-)
 create mode 100644 apps/ui/components/icon-provider.tsx

diff --git a/apps/ui/app/globals.css b/apps/ui/app/globals.css
index 666bb1c..ef96d92 100644
--- a/apps/ui/app/globals.css
+++ b/apps/ui/app/globals.css
@@ -7,7 +7,7 @@
 @theme inline {
   --font-sans: var(--font-sans);
   --font-mono: var(--font-mono);
-  --font-heading: var(--font-sans);
+  --font-heading: var(--font-heading);
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -45,6 +45,11 @@
   --color-subtle-foreground: var(--subtle-foreground);
   --color-border-muted:      var(--border-muted);
   --color-warning:           var(--warning);
+  --color-alert:             var(--alert);
+  /* Motion — strong custom easings (built-in CSS easings are too weak) */
+  --ease-out:    var(--ease-out);
+  --ease-in-out: var(--ease-in-out);
+  --ease-drawer: var(--ease-drawer);
   --radius-sm: calc(var(--radius) * 0.5);
   --radius-md: var(--radius);
   --radius-lg: calc(var(--radius) * 2);
@@ -78,8 +83,9 @@
   /* Semantic */
   --accent:             #22c55e;
   --accent-foreground:  #0a0a0a;
-  --destructive:        #ef4444;
+  --destructive:        #e61919;   /* aviation / hazard red — critical + alert accent */
   --warning:            #f59e0b;
+  --alert:              var(--destructive);   /* structural critical accent (dividers, failed status) */
 
   /* Sidebar */
   --sidebar:                    #060606;
@@ -107,11 +113,16 @@
   --chart-4: #ef4444;   /* red    — negative */
   --chart-5: #a78bfa;   /* violet — tertiary (charts only, not UI) */
 
-  /* Sharp corners — terminal tools don't have soft corners */
-  --radius: 0.1875rem;   /* 3px */
+  /* Square corners — tactical-telemetry surfaces reject border-radius */
+  --radius: 0;
 
-  /* Mono stack — system fonts, no custom load */
-  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Fira Code", Consolas, "Courier New", monospace;
+  /* Motion — strong custom easing curves (emil-design-eng / impeccable: exponential ease-out) */
+  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);     /* enter/exit, press release */
+  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);    /* on-screen morph (sidebar collapse) */
+  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);     /* drawer / sheet slide */
+
+  /* Mono stack — JetBrains Mono (loaded in layout) with system fallbacks */
+  --font-mono: var(--font-jetbrains-mono), ui-monospace, "SF Mono", "Cascadia Code", "Fira Code", Consolas, "Courier New", monospace;
 }
 
 /*
@@ -220,7 +231,7 @@
   --ring: #2563eb;
   --accent: #16a34a;
   --accent-foreground: #ffffff;
-  --destructive: #dc2626;
+  --destructive: #e61919;
   --warning: #d97706;
   --card-foreground: #18181b;
   --popover: #ffffff;
@@ -255,7 +266,7 @@
   --ring: #2563eb;
   --accent: #16a34a;
   --accent-foreground: #ffffff;
-  --destructive: #dc2626;
+  --destructive: #e61919;
   --warning: #d97706;
   --card-foreground: #1e2630;
   --popover: #f8fafc;
@@ -288,6 +299,25 @@
   html {
     @apply font-sans;
   }
+
+  /*
+   * Reduced motion is not optional (emil-design-eng / impeccable / redesign skills).
+   * Suppress movement + analog texture; keep opacity/content legible.
+   */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+    .scanlines::after,
+    .noise-overlay {
+      display: none !important;
+    }
+  }
 }
 
 @layer utilities {
@@ -313,9 +343,9 @@
     font-size: 0.6875rem;
     font-weight: 500;
     text-transform: uppercase;
-    letter-spacing: 0.08em;
+    letter-spacing: 0.1em;
     color: var(--muted-foreground);
-    font-family: var(--font-sans);
+    font-family: var(--font-mono);
   }
 
   /* Keep old name as alias during the transition */
@@ -323,9 +353,9 @@
     font-size: 0.6875rem;
     font-weight: 500;
     text-transform: uppercase;
-    letter-spacing: 0.08em;
+    letter-spacing: 0.1em;
     color: var(--muted-foreground);
-    font-family: var(--font-sans);
+    font-family: var(--font-mono);
   }
 
   .card {
@@ -335,4 +365,125 @@
   .stat-chip {
     @apply inline-flex items-center gap-1 text-xs border border-border px-1.5 py-0.5 text-muted-foreground font-mono;
   }
+
+  /*
+   * Telemetry label — monospace uppercase metadata (unit IDs, coordinates, field
+   * labels). The brutalist micro-typography register.
+   */
+  .telemetry-label {
+    font-family: var(--font-mono);
+    font-size: 0.6875rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--muted-foreground);
+  }
+
+  /*
+   * Macro heading — heavy neo-grotesque (Archivo) at structural scale, tight
+   * tracking, compressed leading. The "telemetry header" moment on page headers.
+   */
+  .macro-heading {
+    font-family: var(--font-heading);
+    font-weight: 800;
+    letter-spacing: -0.03em;
+    line-height: 0.95;
+    text-wrap: balance;
+  }
+
+  /* ASCII data framing — [ LABEL ]. Decorative; purely cosmetic brackets. */
+  .bracket::before {
+    content: "[ ";
+    color: var(--subtle-foreground);
+  }
+  .bracket::after {
+    content: " ]";
+    color: var(--subtle-foreground);
+  }
+
+  /*
+   * Blueprint grid — razor-thin 1px dividers via grid gap + contrasting bg.
+   * Children sit on --card; the gap reveals --border. (brutalist grid determinism)
+   */
+  .grid-hairline {
+    display: grid;
+    gap: 1px;
+    background-color: var(--border);
+  }
+  .grid-hairline > * {
+    background-color: var(--card);
+  }
+
+  /* Press feedback — subtle scale, instant-feeling release (emil-design-eng). */
+  .press {
+    transition: transform 160ms var(--ease-out);
+  }
+  .press:active {
+    transform: scale(0.97);
+  }
+
+  /*
+   * Card hover elevation — gated to real pointers so touch taps don't false-trigger.
+   * Apply only to clickable/navigational cards (impeccable: cards = hierarchy).
+   */
+  @media (hover: hover) and (pointer: fine) {
+    .card-interactive {
+      transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out);
+    }
+    .card-interactive:hover {
+      border-color: var(--border);
+      background-color: var(--elevated);
+    }
+  }
+
+  /* Staggered list entrance — opacity + small rise, short per-item delay. */
+  .stagger-item {
+    opacity: 0;
+    animation: stagger-in 320ms var(--ease-out) forwards;
+  }
+  @keyframes stagger-in {
+    from {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
+
+  /*
+   * CRT scanlines — applied to specific terminal panels only (Job Queue / Activity),
+   * never global scroll containers. Suppressed under reduced motion (see base layer).
+   */
+  .scanlines {
+    position: relative;
+  }
+  .scanlines::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background: repeating-linear-gradient(
+      0deg,
+      transparent,
+      transparent 2px,
+      color-mix(in srgb, var(--foreground) 3%, transparent) 2px,
+      color-mix(in srgb, var(--foreground) 3%, transparent) 4px
+    );
+    z-index: 1;
+  }
+
+  /*
+   * Global mechanical noise — single fixed, pointer-events-none grain overlay
+   * rendered once in layout.tsx. Low opacity to break digital flatness.
+   */
+  .noise-overlay {
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 100;
+    opacity: 0.025;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  }
 }
diff --git a/apps/ui/app/layout.tsx b/apps/ui/app/layout.tsx
index 6e0599b..f47a37c 100644
--- a/apps/ui/app/layout.tsx
+++ b/apps/ui/app/layout.tsx
@@ -1,18 +1,32 @@
 import "@/app/globals.css"
-import { Inter } from "next/font/google"
+import { Geist, Archivo, JetBrains_Mono } from "next/font/google"
 import { cn } from "@/lib/utils"
 import { TooltipProvider } from "@/components/ui/tooltip"
 import { QueryProvider } from "@/components/query-provider"
 import { AuthProvider } from "@/lib/auth-context"
 import { AuthGuard } from "@/components/auth-guard"
 import { ShellRouter } from "@/components/shell-router"
+import { IconProvider } from "@/components/icon-provider"
 
-const inter = Inter({
+// Body / UI — Geist replaces Inter (an AI default per the design skills).
+const geist = Geist({
   subsets: ["latin"],
-  weight: ["300", "400", "500", "600", "700"],
   variable: "--font-sans",
 })
 
+// Macro-typography — heavy neo-grotesque for telemetry headers (Archivo Black-ish).
+const archivo = Archivo({
+  subsets: ["latin"],
+  weight: ["500", "600", "700", "800", "900"],
+  variable: "--font-heading",
+})
+
+// Data / telemetry — JetBrains Mono for stat values, IDs, timestamps, code.
+const jetbrainsMono = JetBrains_Mono({
+  subsets: ["latin"],
+  variable: "--font-jetbrains-mono",
+})
+
 export const metadata = {
   title: "Overview · clevis",
   description: "GitHub analytics and cache management",
@@ -24,18 +38,32 @@ const themeScript = `(function(){try{var t=localStorage.getItem('clevis:theme')|
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en" className={cn("dark font-sans", inter.variable)} data-theme="midnight" suppressHydrationWarning>
+    <html
+      lang="en"
+      className={cn(
+        "dark font-sans",
+        geist.variable,
+        archivo.variable,
+        jetbrainsMono.variable
+      )}
+      data-theme="midnight"
+      suppressHydrationWarning
+    >
       <head>
         <script dangerouslySetInnerHTML={{ __html: themeScript }} />
       </head>
       <body className="min-h-screen bg-background">
+        {/* Mechanical grain — single fixed overlay; suppressed under reduced motion */}
+        <div className="noise-overlay" aria-hidden="true" />
         <QueryProvider>
           <TooltipProvider>
-            <AuthProvider>
-              <AuthGuard>
-                <ShellRouter>{children}</ShellRouter>
-              </AuthGuard>
-            </AuthProvider>
+            <IconProvider>
+              <AuthProvider>
+                <AuthGuard>
+                  <ShellRouter>{children}</ShellRouter>
+                </AuthGuard>
+              </AuthProvider>
+            </IconProvider>
           </TooltipProvider>
         </QueryProvider>
       </body>
diff --git a/apps/ui/components/icon-provider.tsx b/apps/ui/components/icon-provider.tsx
new file mode 100644
index 0000000..1ddb8b8
--- /dev/null
+++ b/apps/ui/components/icon-provider.tsx
@@ -0,0 +1,16 @@
+"use client"
+
+import { IconContext } from "@phosphor-icons/react"
+
+/**
+ * Standardizes Phosphor icon rendering app-wide: one weight, currentColor fill.
+ * Size is left at the Phosphor default (1em) so existing `size-*` utility classes
+ * continue to control dimensions per call site.
+ */
+export function IconProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <IconContext.Provider value={{ weight: "regular", color: "currentColor" }}>
+      {children}
+    </IconContext.Provider>
+  )
+}

From 3a3862480e8c96ad022b250661d8c2454d2b62ec Mon Sep 17 00:00:00 2001
From: nazarli-shabnam <shabnamnezerli@gmail.com>
Date: Mon, 15 Jun 2026 08:17:23 +0400
Subject: [PATCH 03/12] feat(ui): square primitives, custom easing, scale press
 feedback

---
 apps/ui/components/ui/badge.tsx   |  2 +-
 apps/ui/components/ui/button.tsx  |  2 +-
 apps/ui/components/ui/card.tsx    |  6 +++---
 apps/ui/components/ui/input.tsx   |  2 +-
 apps/ui/components/ui/sheet.tsx   |  9 ++++-----
 apps/ui/components/ui/sidebar.tsx | 22 +++++++++++-----------
 apps/ui/components/ui/tooltip.tsx |  4 ++--
 7 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/apps/ui/components/ui/badge.tsx b/apps/ui/components/ui/badge.tsx
index b20959d..a8323b5 100644
--- a/apps/ui/components/ui/badge.tsx
+++ b/apps/ui/components/ui/badge.tsx
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const badgeVariants = cva(
-  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-none border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-colors duration-150 ease-(--ease-out) focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
   {
     variants: {
       variant: {
diff --git a/apps/ui/components/ui/button.tsx b/apps/ui/components/ui/button.tsx
index 6d911dd..7c32f4c 100644
--- a/apps/ui/components/ui/button.tsx
+++ b/apps/ui/components/ui/button.tsx
@@ -7,7 +7,7 @@ import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
   // Sharp corners (--radius = 3px) throughout. No rounded-lg overrides.
-  "group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-40 aria-invalid:border-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-[transform,background-color,border-color,color,box-shadow] duration-150 ease-(--ease-out) outline-none select-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 active:not-aria-[haspopup]:scale-[0.97] disabled:pointer-events-none disabled:opacity-40 aria-invalid:border-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
diff --git a/apps/ui/components/ui/card.tsx b/apps/ui/components/ui/card.tsx
index 40cac5f..4c675c6 100644
--- a/apps/ui/components/ui/card.tsx
+++ b/apps/ui/components/ui/card.tsx
@@ -12,7 +12,7 @@ function Card({
       data-slot="card"
       data-size={size}
       className={cn(
-        "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        "group/card flex flex-col gap-4 overflow-hidden rounded-none border border-border bg-card py-4 text-sm text-card-foreground has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0",
         className
       )}
       {...props}
@@ -25,7 +25,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-header"
       className={cn(
-        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-none px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
         className
       )}
       {...props}
@@ -84,7 +84,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-footer"
       className={cn(
-        "flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
+        "flex items-center rounded-none border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
         className
       )}
       {...props}
diff --git a/apps/ui/components/ui/input.tsx b/apps/ui/components/ui/input.tsx
index 7d21bab..ec02d7d 100644
--- a/apps/ui/components/ui/input.tsx
+++ b/apps/ui/components/ui/input.tsx
@@ -9,7 +9,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        "h-8 w-full min-w-0 rounded-none border border-input bg-transparent px-2.5 py-1 text-base transition-[color,background-color,border-color,box-shadow] duration-150 ease-(--ease-out) outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className
       )}
       {...props}
diff --git a/apps/ui/components/ui/sheet.tsx b/apps/ui/components/ui/sheet.tsx
index 78c0a76..ac6b3f3 100644
--- a/apps/ui/components/ui/sheet.tsx
+++ b/apps/ui/components/ui/sheet.tsx
@@ -5,7 +5,7 @@ import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
-import { XIcon } from "lucide-react"
+import { X } from "@phosphor-icons/react"
 
 function Sheet({ ...props }: SheetPrimitive.Root.Props) {
   return <SheetPrimitive.Root data-slot="sheet" {...props} />
@@ -28,7 +28,7 @@ function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
     <SheetPrimitive.Backdrop
       data-slot="sheet-overlay"
       className={cn(
-        "fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs",
+        "fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 ease-(--ease-out) data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs",
         className
       )}
       {...props}
@@ -53,7 +53,7 @@ function SheetContent({
         data-slot="sheet-content"
         data-side={side}
         className={cn(
-          "fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+          "fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition-[transform,opacity] duration-200 ease-(--ease-drawer) data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
           className
         )}
         {...props}
@@ -70,8 +70,7 @@ function SheetContent({
               />
             }
           >
-            <XIcon
-            />
+            <X />
             <span className="sr-only">Close</span>
           </SheetPrimitive.Close>
         )}
diff --git a/apps/ui/components/ui/sidebar.tsx b/apps/ui/components/ui/sidebar.tsx
index e2a75a6..48de0ef 100644
--- a/apps/ui/components/ui/sidebar.tsx
+++ b/apps/ui/components/ui/sidebar.tsx
@@ -218,7 +218,7 @@ function Sidebar({
       <div
         data-slot="sidebar-gap"
         className={cn(
-          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-(--ease-in-out)",
           "group-data-[collapsible=offcanvas]:w-0",
           "group-data-[side=right]:rotate-180",
           variant === "floating" || variant === "inset"
@@ -230,7 +230,7 @@ function Sidebar({
         data-slot="sidebar-container"
         data-side={side}
         className={cn(
-          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-(--ease-in-out) data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
           // Adjust the padding for floating and inset variants.
           variant === "floating" || variant === "inset"
             ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
@@ -289,7 +289,7 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
       onClick={toggleSidebar}
       title="Toggle Sidebar"
       className={cn(
-        "absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
+        "absolute inset-y-0 z-20 hidden w-4 transition-all duration-150 ease-(--ease-out) group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
         "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
         "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
         "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
@@ -400,7 +400,7 @@ function SidebarGroupLabel({
     props: mergeProps<"div">(
       {
         className: cn(
-          "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+          "flex h-8 shrink-0 items-center rounded-none px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-(--ease-in-out) group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
           className
         ),
       },
@@ -424,7 +424,7 @@ function SidebarGroupAction({
     props: mergeProps<"button">(
       {
         className: cn(
-          "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+          "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-none p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform duration-150 ease-(--ease-out) group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
           className
         ),
       },
@@ -475,7 +475,7 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
 }
 
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
+  "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-none p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding,background-color,color] duration-150 ease-(--ease-out) group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
   {
     variants: {
       variant: {
@@ -564,7 +564,7 @@ function SidebarMenuAction({
     props: mergeProps<"button">(
       {
         className: cn(
-          "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+          "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-none p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
           showOnHover &&
             "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0",
           className
@@ -589,7 +589,7 @@ function SidebarMenuBadge({
       data-slot="sidebar-menu-badge"
       data-sidebar="menu-badge"
       className={cn(
-        "pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground",
+        "pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-none px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground",
         className
       )}
       {...props}
@@ -613,12 +613,12 @@ function SidebarMenuSkeleton({
     <div
       data-slot="sidebar-menu-skeleton"
       data-sidebar="menu-skeleton"
-      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      className={cn("flex h-8 items-center gap-2 rounded-none px-2", className)}
       {...props}
     >
       {showIcon && (
         <Skeleton
-          className="size-4 rounded-md"
+          className="size-4 rounded-none"
           data-sidebar="menu-skeleton-icon"
         />
       )}
@@ -679,7 +679,7 @@ function SidebarMenuSubButton({
     props: mergeProps<"a">(
       {
         className: cn(
-          "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+          "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-none px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
           className
         ),
       },
diff --git a/apps/ui/components/ui/tooltip.tsx b/apps/ui/components/ui/tooltip.tsx
index 69e8a82..cc66c4d 100644
--- a/apps/ui/components/ui/tooltip.tsx
+++ b/apps/ui/components/ui/tooltip.tsx
@@ -50,13 +50,13 @@ function TooltipContent({
         <TooltipPrimitive.Popup
           data-slot="tooltip-content"
           className={cn(
-            "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-none ease-(--ease-out) data-open:duration-150 data-closed:duration-100 bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           )}
           {...props}
         >
           {children}
-          <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+          <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
         </TooltipPrimitive.Popup>
       </TooltipPrimitive.Positioner>
     </TooltipPrimitive.Portal>

From 1aeeafb89ea7288b1287b0ffce2a40c17442bd00 Mon Sep 17 00:00:00 2001
From: nazarli-shabnam <shabnamnezerli@gmail.com>
Date: Mon, 15 Jun 2026 08:49:34 +0400
Subject: [PATCH 04/12] feat(ui): telemetry composites, stagger, square
 skeletons

---
 apps/ui/components/activity-list.tsx | 14 +++++++++-----
 apps/ui/components/empty-state.tsx   |  2 +-
 apps/ui/components/page-header.tsx   | 29 ++++++++++++++++------------
 apps/ui/components/stat-card.tsx     |  2 +-
 apps/ui/components/ui/skeleton.tsx   |  2 +-
 5 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/apps/ui/components/activity-list.tsx b/apps/ui/components/activity-list.tsx
index ed93de4..2ec3d26 100644
--- a/apps/ui/components/activity-list.tsx
+++ b/apps/ui/components/activity-list.tsx
@@ -24,10 +24,10 @@ export function ActivityList({ jobs, isLoading, limit }: ActivityListProps) {
         {Array.from({ length: 3 }).map((_, i) => (
           <div key={i} className="px-4 py-3 flex items-center justify-between gap-4 animate-pulse">
             <div className="flex flex-col gap-1.5">
-              <div className="h-3 w-40 bg-muted rounded-sm" />
-              <div className="h-2.5 w-24 bg-muted/60 rounded-sm" />
+              <div className="h-3 w-40 bg-muted rounded-none" />
+              <div className="h-2.5 w-24 bg-muted/60 rounded-none" />
             </div>
-            <div className="h-2.5 w-14 bg-muted/60 rounded-sm" />
+            <div className="h-2.5 w-14 bg-muted/60 rounded-none" />
           </div>
         ))}
       </div>
@@ -46,8 +46,12 @@ export function ActivityList({ jobs, isLoading, limit }: ActivityListProps) {
 
   return (
     <div className="divide-y divide-border">
-      {visible.map((job) => (
-        <div key={job.id} className="px-4 py-3 flex items-start justify-between gap-4 hover:bg-elevated transition-colors">
+      {visible.map((job, i) => (
+        <div
+          key={job.id}
+          className="stagger-item px-4 py-3 flex items-start justify-between gap-4 hover:bg-elevated transition-colors duration-150 ease-(--ease-out)"
+          style={{ animationDelay: `${Math.min(i, 6) * 45}ms` }}
+        >
           <div className="min-w-0">
             <div className="flex items-center gap-2 flex-wrap">
               <span className="text-xs font-mono text-muted-foreground shrink-0">#{job.id}</span>
diff --git a/apps/ui/components/empty-state.tsx b/apps/ui/components/empty-state.tsx
index 91f1f34..eebb5e9 100644
--- a/apps/ui/components/empty-state.tsx
+++ b/apps/ui/components/empty-state.tsx
@@ -28,7 +28,7 @@ interface EmptyStatePageProps {
 export function EmptyStatePage({ message, action }: EmptyStatePageProps) {
   return (
     <div className="border border-dashed border-border px-6 py-12">
-      <p className="text-sm text-muted-foreground">
+      <p className="text-sm text-muted-foreground font-mono">
         {message}
         {action && (
           <>
diff --git a/apps/ui/components/page-header.tsx b/apps/ui/components/page-header.tsx
index 610bbab..7f4c655 100644
--- a/apps/ui/components/page-header.tsx
+++ b/apps/ui/components/page-header.tsx
@@ -5,24 +5,29 @@ interface PageHeaderProps {
 }
 
 /**
- * Inverted label pattern: small muted category label on top, larger value below.
- * Bottom border separates the header zone from page content.
- * Actions slot for per-page CTAs (e.g. "Run Scan" button).
+ * Telemetry header: a directional marker + heavy macro-typography page label,
+ * with a monospace supporting line beneath. Bottom border separates the header
+ * zone from page content. Actions slot for per-page CTAs (e.g. "Run Scan").
  */
 export function PageHeader({ title, description, actions }: PageHeaderProps) {
   return (
-    <div className="flex items-end justify-between pb-4 mb-6 border-b border-border/60">
-      <div className="flex flex-col gap-1">
-        <p className="text-[0.6875rem] font-medium text-muted-foreground uppercase tracking-[0.08em]">
-          {title}
-        </p>
+    <header className="flex items-end justify-between pb-4 mb-6 border-b border-border/60">
+      <div className="flex flex-col gap-1.5">
+        <div className="flex items-baseline gap-2.5">
+          <span className="font-mono text-sm text-subtle-foreground leading-none select-none">
+            {"///"}
+          </span>
+          <h1 className="macro-heading text-2xl md:text-[1.75rem] uppercase text-foreground">
+            {title}
+          </h1>
+        </div>
         {description && (
-          <h1 className="text-xl font-semibold text-foreground leading-tight">
+          <p className="text-[0.8125rem] text-muted-foreground font-mono leading-snug">
             {description}
-          </h1>
+          </p>
         )}
       </div>
-      {actions && <div className="flex items-center gap-2">{actions}</div>}
-    </div>
+      {actions && <div className="flex items-center gap-2 shrink-0">{actions}</div>}
+    </header>
   )
 }
diff --git a/apps/ui/components/stat-card.tsx b/apps/ui/components/stat-card.tsx
index ea40609..70c1895 100644
--- a/apps/ui/components/stat-card.tsx
+++ b/apps/ui/components/stat-card.tsx
@@ -12,7 +12,7 @@ interface StatCardProps {
 export function StatCard({ label, value, delta }: StatCardProps) {
   return (
     <div className="bg-card border border-border px-4 py-4">
-      <p className="text-[0.6875rem] font-medium font-mono text-muted-foreground uppercase tracking-[0.1em] mb-3">
+      <p className="telemetry-label bracket mb-3 block">
         {label}
       </p>
       <p className="text-3xl font-semibold font-mono tabular-nums text-foreground leading-none data-value">
diff --git a/apps/ui/components/ui/skeleton.tsx b/apps/ui/components/ui/skeleton.tsx
index 0118624..302639b 100644
--- a/apps/ui/components/ui/skeleton.tsx
+++ b/apps/ui/components/ui/skeleton.tsx
@@ -4,7 +4,7 @@ function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="skeleton"
-      className={cn("animate-pulse rounded-md bg-muted", className)}
+      className={cn("animate-pulse rounded-none bg-muted", className)}
       {...props}
     />
   )

From 38978993e895bad96abcc02d82c3b18b6f2e67e3 Mon Sep 17 00:00:00 2001
From: nazarli-shabnam <shabnamnezerli@gmail.com>
Date: Mon, 15 Jun 2026 08:49:57 +0400
Subject: [PATCH 05/12] feat(ui): migrate icons from lucide to phosphor

---
 apps/ui/app/automation/page.tsx         |  4 ++--
 apps/ui/app/collaborators/page.tsx      |  2 +-
 apps/ui/app/login/page.tsx              |  6 +++---
 apps/ui/app/page.tsx                    |  2 +-
 apps/ui/app/repos/[repo]/cache/page.tsx | 18 +++++++++---------
 apps/ui/app/security/page.tsx           |  8 ++++----
 apps/ui/app/settings/page.tsx           | 22 +++++++++++-----------
 apps/ui/app/setup/page.tsx              |  4 ++--
 apps/ui/components/app-sidebar.tsx      |  8 ++++----
 apps/ui/components/check-card.tsx       | 10 +++++-----
 apps/ui/components/ui/sidebar.tsx       |  4 ++--
 apps/ui/package-lock.json               | 10 ----------
 apps/ui/package.json                    |  1 -
 13 files changed, 44 insertions(+), 55 deletions(-)

diff --git a/apps/ui/app/automation/page.tsx b/apps/ui/app/automation/page.tsx
index ca8947e..01bff48 100644
--- a/apps/ui/app/automation/page.tsx
+++ b/apps/ui/app/automation/page.tsx
@@ -2,7 +2,7 @@ export const metadata = { title: "Automation · clevis" }
 
 import { PageHeader } from "@/components/page-header"
 import { EmptyState } from "@/components/empty-state"
-import { Zap } from "lucide-react"
+import { Lightning } from "@phosphor-icons/react"
 
 export default function AutomationPage() {
   return (
@@ -13,7 +13,7 @@ export default function AutomationPage() {
       />
       <div className="bg-card border border-border">
         <EmptyState
-          icon={Zap}
+          icon={Lightning}
           title="Automation coming soon"
           description="Trigger GitHub Actions workflows, dispatch events, and automate repo hygiene tasks — all from one place."
         />
diff --git a/apps/ui/app/collaborators/page.tsx b/apps/ui/app/collaborators/page.tsx
index efd4e0f..1a170ae 100644
--- a/apps/ui/app/collaborators/page.tsx
+++ b/apps/ui/app/collaborators/page.tsx
@@ -2,7 +2,7 @@ export const metadata = { title: "Collaborators · clevis" }
 
 import { PageHeader } from "@/components/page-header"
 import { EmptyState } from "@/components/empty-state"
-import { Users } from "lucide-react"
+import { Users } from "@phosphor-icons/react"
 
 export default function CollaboratorsPage() {
   return (
diff --git a/apps/ui/app/login/page.tsx b/apps/ui/app/login/page.tsx
index eaa51c8..1e860c0 100644
--- a/apps/ui/app/login/page.tsx
+++ b/apps/ui/app/login/page.tsx
@@ -6,11 +6,11 @@ import { useAuth } from "@/lib/auth-context"
 import { api } from "@/lib/api/client"
 import { Input } from "@/components/ui/input"
 import { Button } from "@/components/ui/button"
-import { Loader2 } from "lucide-react"
+import { CircleNotch } from "@phosphor-icons/react"
 
 const API_BASE = process.env.NEXT_PUBLIC_API_BASE || "http://localhost:8080"
 
-// lucide-react v1 dropped brand marks; inline the GitHub logo.
+// Inline GitHub logo — keeps the mark on-brand and avoids depending on an icon set's brand glyphs.
 function GithubMark() {
   return (
     <svg viewBox="0 0 16 16" className="size-3.5" fill="currentColor" aria-hidden="true">
@@ -98,7 +98,7 @@ export default function LoginPage() {
 
           <Button type="submit" disabled={isSubmitting} className="mt-2">
             {isSubmitting ? (
-              <><Loader2 className="size-3.5 animate-spin" />Signing in…</>
+              <><CircleNotch className="size-3.5 animate-spin" />Signing in…</>
             ) : (
               "Sign in"
             )}
diff --git a/apps/ui/app/page.tsx b/apps/ui/app/page.tsx
index db8d737..bef765c 100644
--- a/apps/ui/app/page.tsx
+++ b/apps/ui/app/page.tsx
@@ -5,7 +5,7 @@ import { useQuery } from "@tanstack/react-query"
 import { PageHeader } from "@/components/page-header"
 import { StatCard } from "@/components/stat-card"
 import { ActivityList } from "@/components/activity-list"
-import { ArrowRight } from "lucide-react"
+import { ArrowRight } from "@phosphor-icons/react"
 import { api } from "@/lib/api/client"
 
 const stats = [
diff --git a/apps/ui/app/repos/[repo]/cache/page.tsx b/apps/ui/app/repos/[repo]/cache/page.tsx
index fb72e51..4274ff5 100644
--- a/apps/ui/app/repos/[repo]/cache/page.tsx
+++ b/apps/ui/app/repos/[repo]/cache/page.tsx
@@ -11,7 +11,7 @@ import { PageHeader } from "@/components/page-header"
 import { Input } from "@/components/ui/input"
 import { Button } from "@/components/ui/button"
 import { Skeleton } from "@/components/ui/skeleton"
-import { AlertTriangle, Eye, KeyRound, Loader2, Trash2 } from "lucide-react"
+import { Warning, Eye, Key, CircleNotch, Trash } from "@phosphor-icons/react"
 import { api } from "@/lib/api/client"
 import { BarGroupChart } from "@/components/charts/bar-group-chart"
 import { CHART_COLORS } from "@/lib/charts/theme"
@@ -86,7 +86,7 @@ export default function CachePage() {
                 GitHub Token
                 {tokenSaved && (
                   <span className="inline-flex items-center gap-1 text-[0.6875rem] text-primary">
-                    <KeyRound className="size-3" />saved
+                    <Key className="size-3" />saved
                   </span>
                 )}
               </label>
@@ -105,13 +105,13 @@ export default function CachePage() {
                 disabled={saveTokenMutation.isPending}
                 className="w-full"
               >
-                <KeyRound className="size-3.5" />
+                <Key className="size-3.5" />
                 {saveTokenMutation.isPending ? "Saving…" : "Save token for this org"}
               </Button>
             )}
             {saveTokenMutation.isError && (
               <p className="text-xs text-destructive flex items-center gap-1.5">
-                <AlertTriangle className="size-3 shrink-0" />
+                <Warning className="size-3 shrink-0" />
                 {saveTokenMutation.error.message}
               </p>
             )}
@@ -129,14 +129,14 @@ export default function CachePage() {
               className="mt-1"
             >
               {listMutation.isPending ? (
-                <><Loader2 className="size-3.5 animate-spin" />Loading…</>
+                <><CircleNotch className="size-3.5 animate-spin" />Loading…</>
               ) : (
                 "Load caches"
               )}
             </Button>
             {listMutation.isError && (
               <p className="text-xs text-destructive flex items-center gap-1.5">
-                <AlertTriangle className="size-3 shrink-0" />
+                <Warning className="size-3 shrink-0" />
                 {listMutation.error.message}
               </p>
             )}
@@ -154,13 +154,13 @@ export default function CachePage() {
                 onClick={() => clearMutation.mutate(false)}
                 disabled={isLoading || !token || !actor}
               >
-                <Trash2 className="size-3.5" />
+                <Trash className="size-3.5" />
                 Clear
               </Button>
             </div>
             {clearMutation.isError && (
               <p className="text-xs text-destructive flex items-center gap-1.5">
-                <AlertTriangle className="size-3 shrink-0" />
+                <Warning className="size-3 shrink-0" />
                 {clearMutation.error.message}
               </p>
             )}
@@ -293,7 +293,7 @@ export default function CachePage() {
                 </Link>
               </div>
             ) : (
-              <pre className="font-mono text-xs text-muted-foreground leading-relaxed overflow-auto bg-muted/30 rounded-md p-3 border border-border/50">
+              <pre className="font-mono text-xs text-muted-foreground leading-relaxed overflow-auto bg-muted/30 rounded-none p-3 border border-border/50">
                 {JSON.stringify(clearMutation.data, null, 2)}
               </pre>
             )}
diff --git a/apps/ui/app/security/page.tsx b/apps/ui/app/security/page.tsx
index fa311f7..880774d 100644
--- a/apps/ui/app/security/page.tsx
+++ b/apps/ui/app/security/page.tsx
@@ -8,7 +8,7 @@ import { CheckCard } from "@/components/check-card"
 import { Skeleton } from "@/components/ui/skeleton"
 import { Input } from "@/components/ui/input"
 import { Button } from "@/components/ui/button"
-import { AlertTriangle, KeyRound } from "lucide-react"
+import { Warning, Key } from "@phosphor-icons/react"
 import { api } from "@/lib/api/client"
 import { DonutChart } from "@/components/charts/donut-chart"
 import type { CheckResult } from "@/lib/api/types"
@@ -149,7 +149,7 @@ export default function SecurityPage() {
                 GitHub Token
                 {tokenSaved && (
                   <span className="inline-flex items-center gap-1 text-[0.6875rem] text-primary">
-                    <KeyRound className="size-3" />saved
+                    <Key className="size-3" />saved
                   </span>
                 )}
               </label>
@@ -175,13 +175,13 @@ export default function SecurityPage() {
                 onClick={() => saveTokenMutation.mutate()}
                 disabled={saveTokenMutation.isPending}
               >
-                <KeyRound className="size-3.5" />
+                <Key className="size-3.5" />
                 {saveTokenMutation.isPending ? "Saving…" : "Save token for this org"}
               </Button>
             )}
             {scan.isError && (
               <div className="flex items-start gap-2 text-xs text-destructive">
-                <AlertTriangle className="size-3.5 mt-0.5 shrink-0" />
+                <Warning className="size-3.5 mt-0.5 shrink-0" />
                 {scan.error.message}
               </div>
             )}
diff --git a/apps/ui/app/settings/page.tsx b/apps/ui/app/settings/page.tsx
index 4457071..bb4ad2d 100644
--- a/apps/ui/app/settings/page.tsx
+++ b/apps/ui/app/settings/page.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from "react"
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
-import { Trash2, Plus, Loader2, Check, ExternalLink } from "lucide-react"
+import { Trash, Plus, CircleNotch, Check, ArrowSquareOut } from "@phosphor-icons/react"
 import { PageHeader } from "@/components/page-header"
 import { Input } from "@/components/ui/input"
 import { Button } from "@/components/ui/button"
@@ -71,7 +71,7 @@ function ProfileSection() {
           </p>
         </div>
         <Button onClick={save} disabled={isSaving} className="mt-1 w-fit">
-          {saved ? <><Check className="size-3.5" />Saved</> : isSaving ? <><Loader2 className="size-3.5 animate-spin" />Saving…</> : "Save profile"}
+          {saved ? <><Check className="size-3.5" />Saved</> : isSaving ? <><CircleNotch className="size-3.5 animate-spin" />Saving…</> : "Save profile"}
         </Button>
       </div>
     </div>
@@ -104,7 +104,7 @@ function AppearanceSection() {
             >
               <span
                 data-theme={t.name}
-                className="flex shrink-0 overflow-hidden rounded-sm border border-border/60"
+                className="flex shrink-0 overflow-hidden rounded-none border border-border/60"
               >
                 <span className="size-3.5 bg-background" />
                 <span className="size-3.5 bg-card" />
@@ -127,7 +127,7 @@ function SectionError({ message, onRetry, retrying }: { message: string; onRetry
     <div className="px-4 py-6 flex items-center justify-between gap-3">
       <p className="text-sm text-destructive">{message}</p>
       <Button size="sm" variant="outline" onClick={onRetry} disabled={retrying}>
-        {retrying ? <Loader2 className="size-3 animate-spin" /> : "Retry"}
+        {retrying ? <CircleNotch className="size-3 animate-spin" /> : "Retry"}
       </Button>
     </div>
   )
@@ -152,7 +152,7 @@ function ConnectedOrgsSection() {
 
       {isLoading ? (
         <div className="px-4 py-6 flex items-center gap-2 text-sm text-muted-foreground">
-          <Loader2 className="size-3.5 animate-spin" /> Loading…
+          <CircleNotch className="size-3.5 animate-spin" /> Loading…
         </div>
       ) : isError ? (
         <SectionError
@@ -194,7 +194,7 @@ function ConnectedOrgsSection() {
       <div className="border-t border-border p-4">
         {installUrl ? (
           <Button onClick={() => { window.location.href = installUrl }}>
-            <ExternalLink className="size-3.5" />Install GitHub App
+            <ArrowSquareOut className="size-3.5" />Install GitHub App
           </Button>
         ) : (
           <p className="text-xs text-muted-foreground">
@@ -252,7 +252,7 @@ function SavedTokensSection() {
 
       {isLoading ? (
         <div className="px-4 py-6 flex items-center gap-2 text-sm text-muted-foreground">
-          <Loader2 className="size-3.5 animate-spin" /> Loading…
+          <CircleNotch className="size-3.5 animate-spin" /> Loading…
         </div>
       ) : isError ? (
         <SectionError
@@ -292,7 +292,7 @@ function SavedTokensSection() {
                       className="text-muted-foreground hover:text-destructive transition-colors"
                       aria-label={`Delete token for ${t.org}`}
                     >
-                      <Trash2 className="size-3.5" />
+                      <Trash className="size-3.5" />
                     </button>
                   </td>
                 </tr>
@@ -329,7 +329,7 @@ function SavedTokensSection() {
           className="mt-2"
         >
           {upsert.isPending ? (
-            <><Loader2 className="size-3.5 animate-spin" />Saving…</>
+            <><CircleNotch className="size-3.5 animate-spin" />Saving…</>
           ) : (
             <><Plus className="size-3.5" />Save token</>
           )}
@@ -378,7 +378,7 @@ function InstanceConfigSection() {
   if (isLoading) {
     return (
       <div className="bg-card border border-border px-4 py-6 flex items-center gap-2 text-sm text-muted-foreground">
-        <Loader2 className="size-3.5 animate-spin" /> Loading config…
+        <CircleNotch className="size-3.5 animate-spin" /> Loading config…
       </div>
     )
   }
@@ -408,7 +408,7 @@ function InstanceConfigSection() {
                 className="font-mono text-xs"
               />
               <Button size="sm" variant="outline" onClick={() => saveKey(field.key)} disabled={saving === field.key}>
-                {saving === field.key ? <Loader2 className="size-3 animate-spin" /> : "Save"}
+                {saving === field.key ? <CircleNotch className="size-3 animate-spin" /> : "Save"}
               </Button>
             </div>
             {errors[field.key] && (
diff --git a/apps/ui/app/setup/page.tsx b/apps/ui/app/setup/page.tsx
index 3b015b7..e9bbb57 100644
--- a/apps/ui/app/setup/page.tsx
+++ b/apps/ui/app/setup/page.tsx
@@ -6,7 +6,7 @@ import { useAuth } from "@/lib/auth-context"
 import { api } from "@/lib/api/client"
 import { Input } from "@/components/ui/input"
 import { Button } from "@/components/ui/button"
-import { Loader2 } from "lucide-react"
+import { CircleNotch } from "@phosphor-icons/react"
 
 export default function SetupPage() {
   const { user, setSession, isLoading } = useAuth()
@@ -121,7 +121,7 @@ export default function SetupPage() {
 
           <Button type="submit" disabled={isSubmitting} className="mt-2">
             {isSubmitting ? (
-              <><Loader2 className="size-3.5 animate-spin" />Creating account…</>
+              <><CircleNotch className="size-3.5 animate-spin" />Creating account…</>
             ) : (
               "Create account →"
             )}
diff --git a/apps/ui/components/app-sidebar.tsx b/apps/ui/components/app-sidebar.tsx
index f7d8228..f8a2011 100644
--- a/apps/ui/components/app-sidebar.tsx
+++ b/apps/ui/components/app-sidebar.tsx
@@ -3,7 +3,7 @@
 import { usePathname, useRouter } from "next/navigation"
 import { useEffect, useRef, useState } from "react"
 import Link from "next/link"
-import { Settings, Check, LogOut, UserPlus } from "lucide-react"
+import { GearSix, Check, SignOut, UserPlus } from "@phosphor-icons/react"
 import {
   Sidebar,
   SidebarContent,
@@ -99,7 +99,7 @@ function ProfileDropdown({
           onClick={onClose}
           className="flex items-center gap-1.5 px-2.5 py-1.5 text-[0.75rem] font-medium text-sidebar-foreground/70 hover:text-sidebar-foreground bg-sidebar-accent/60 hover:bg-sidebar-accent border border-sidebar-border/60 transition-colors flex-1 justify-center"
         >
-          <Settings className="size-3" />
+          <GearSix className="size-3" />
           Settings
         </Link>
         <button
@@ -118,7 +118,7 @@ function ProfileDropdown({
           onClick={onSignOut}
           className="flex w-full items-center gap-2 px-2.5 py-1.5 text-[0.8125rem] text-destructive/70 hover:text-destructive hover:bg-sidebar-accent/60 transition-colors"
         >
-          <LogOut className="size-3.5" />
+          <SignOut className="size-3.5" />
           Sign out
         </button>
       </div>
@@ -179,7 +179,7 @@ export function AppSidebar() {
               {profile.org}
             </p>
           </div>
-          <Settings className="size-3 text-sidebar-foreground/20 group-hover:text-sidebar-foreground/50 transition-colors shrink-0" />
+          <GearSix className="size-3 text-sidebar-foreground/20 group-hover:text-sidebar-foreground/50 transition-colors shrink-0" />
         </button>
 
         {open && (
diff --git a/apps/ui/components/check-card.tsx b/apps/ui/components/check-card.tsx
index a1fc8f8..517faae 100644
--- a/apps/ui/components/check-card.tsx
+++ b/apps/ui/components/check-card.tsx
@@ -1,4 +1,4 @@
-import { CheckCircle2, XCircle } from "lucide-react"
+import { CheckCircle, XCircle } from "@phosphor-icons/react"
 import type { CheckResult, CheckValue } from "@/lib/api/types"
 
 interface CheckCardProps {
@@ -58,14 +58,14 @@ export function CheckCard({ check }: CheckCardProps) {
   const pass = check.status === "pass"
   return (
     <div
-      className={`bg-card border p-3.5 flex items-start gap-3 transition-colors ${
-        pass ? "border-green-500/20 hover:border-green-500/35" : "border-red-500/20 hover:border-red-500/35"
+      className={`bg-card border p-3.5 flex items-start gap-3 transition-colors duration-200 ease-(--ease-out) ${
+        pass ? "border-green-500/20 hover:border-green-500/35" : "border-destructive/25 hover:border-destructive/45"
       }`}
     >
       {pass ? (
-        <CheckCircle2 className="size-4 shrink-0 mt-0.5 text-green-400" />
+        <CheckCircle className="size-4 shrink-0 mt-0.5 text-green-400" />
       ) : (
-        <XCircle className="size-4 shrink-0 mt-0.5 text-red-400" />
+        <XCircle className="size-4 shrink-0 mt-0.5 text-destructive" />
       )}
       <div className="min-w-0 flex-1">
         <div className="flex items-center gap-2 mb-0.5 flex-wrap">
diff --git a/apps/ui/components/ui/sidebar.tsx b/apps/ui/components/ui/sidebar.tsx
index 48de0ef..f0c3ad8 100644
--- a/apps/ui/components/ui/sidebar.tsx
+++ b/apps/ui/components/ui/sidebar.tsx
@@ -23,7 +23,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip"
-import { PanelLeftIcon } from "lucide-react"
+import { SidebarSimple } from "@phosphor-icons/react"
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state"
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
@@ -271,7 +271,7 @@ function SidebarTrigger({
       }}
       {...props}
     >
-      <PanelLeftIcon />
+      <SidebarSimple />
       <span className="sr-only">Toggle Sidebar</span>
     </Button>
   )
diff --git a/apps/ui/package-lock.json b/apps/ui/package-lock.json
index aedddc2..3bc3222 100644
--- a/apps/ui/package-lock.json
+++ b/apps/ui/package-lock.json
@@ -11,7 +11,6 @@
         "@tanstack/react-query": "^5.100.10",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
-        "lucide-react": "^1.7.0",
         "next": "^15.5.14",
         "react": "19.1.0",
         "react-dom": "19.1.0",
@@ -8287,15 +8286,6 @@
         "yallist": "^3.0.2"
       }
     },
-    "node_modules/lucide-react": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.7.0.tgz",
-      "integrity": "sha512-yI7BeItCLZJTXikmK4KNUGCKoGzSvbKlfCvw44bU4fXAL6v3gYS4uHD1jzsLkfwODYwI6Drw5Tu9Z5ulDe0TSg==",
-      "license": "ISC",
-      "peerDependencies": {
-        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    },
     "node_modules/lz-string": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
diff --git a/apps/ui/package.json b/apps/ui/package.json
index d52fbde..521d9a5 100644
--- a/apps/ui/package.json
+++ b/apps/ui/package.json
@@ -16,7 +16,6 @@
     "@tanstack/react-query": "^5.100.10",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^1.7.0",
     "next": "^15.5.14",
     "react": "19.1.0",
     "react-dom": "19.1.0",

From 32400bca7154b9c90f8d72ebb1df20210d33d197 Mon Sep 17 00:00:00 2001
From: nazarli-shabnam <shabnamnezerli@gmail.com>
Date: Mon, 15 Jun 2026 08:57:27 +0400
Subject: [PATCH 06/12] fix(ui): keep phosphor out of server components; square
 avatars

---
 apps/ui/app/automation/page.tsx    | 2 --
 apps/ui/app/collaborators/page.tsx | 2 --
 apps/ui/components/app-sidebar.tsx | 6 +++---
 apps/ui/components/ui/button.tsx   | 2 +-
 apps/ui/components/ui/sidebar.tsx  | 4 ++--
 5 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/apps/ui/app/automation/page.tsx b/apps/ui/app/automation/page.tsx
index 01bff48..4f0d4bc 100644
--- a/apps/ui/app/automation/page.tsx
+++ b/apps/ui/app/automation/page.tsx
@@ -2,7 +2,6 @@ export const metadata = { title: "Automation · clevis" }
 
 import { PageHeader } from "@/components/page-header"
 import { EmptyState } from "@/components/empty-state"
-import { Lightning } from "@phosphor-icons/react"
 
 export default function AutomationPage() {
   return (
@@ -13,7 +12,6 @@ export default function AutomationPage() {
       />
       <div className="bg-card border border-border">
         <EmptyState
-          icon={Lightning}
           title="Automation coming soon"
           description="Trigger GitHub Actions workflows, dispatch events, and automate repo hygiene tasks — all from one place."
         />
diff --git a/apps/ui/app/collaborators/page.tsx b/apps/ui/app/collaborators/page.tsx
index 1a170ae..f9e595f 100644
--- a/apps/ui/app/collaborators/page.tsx
+++ b/apps/ui/app/collaborators/page.tsx
@@ -2,7 +2,6 @@ export const metadata = { title: "Collaborators · clevis" }
 
 import { PageHeader } from "@/components/page-header"
 import { EmptyState } from "@/components/empty-state"
-import { Users } from "@phosphor-icons/react"
 
 export default function CollaboratorsPage() {
   return (
@@ -13,7 +12,6 @@ export default function CollaboratorsPage() {
       />
       <div className="bg-card border border-border">
         <EmptyState
-          icon={Users}
           title="Collaborators coming soon"
           description="View your organization roster, manage pending invitations, and fix member permissions from a single dashboard."
         />
diff --git a/apps/ui/components/app-sidebar.tsx b/apps/ui/components/app-sidebar.tsx
index f8a2011..9b0bc7c 100644
--- a/apps/ui/components/app-sidebar.tsx
+++ b/apps/ui/components/app-sidebar.tsx
@@ -74,8 +74,8 @@ function ProfileDropdown({
 
       {/* Workspace row */}
       <div className="p-1.5">
-        <div className="flex items-center gap-2.5 px-2 py-2 rounded-sm">
-          <div className="size-7 rounded-sm bg-primary/15 border border-primary/20 flex items-center justify-center shrink-0">
+        <div className="flex items-center gap-2.5 px-2 py-2">
+          <div className="size-7 rounded-none bg-primary/15 border border-primary/20 flex items-center justify-center shrink-0">
             <span className="text-[0.6875rem] font-semibold text-primary leading-none">
               {initials}
             </span>
@@ -168,7 +168,7 @@ export function AppSidebar() {
           onClick={() => setOpen((v) => !v)}
           className="flex w-full items-center gap-2.5 px-3.5 py-3 hover:bg-sidebar-accent/60 transition-colors group text-left"
         >
-          <div className="size-7 rounded-full bg-primary/15 border border-primary/25 flex items-center justify-center shrink-0">
+          <div className="size-7 rounded-none bg-primary/15 border border-primary/25 flex items-center justify-center shrink-0">
             <span className="text-[0.6875rem] font-semibold text-primary leading-none">{initials}</span>
           </div>
           <div className="min-w-0 flex-1">
diff --git a/apps/ui/components/ui/button.tsx b/apps/ui/components/ui/button.tsx
index 7c32f4c..08a6017 100644
--- a/apps/ui/components/ui/button.tsx
+++ b/apps/ui/components/ui/button.tsx
@@ -6,7 +6,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  // Sharp corners (--radius = 3px) throughout. No rounded-lg overrides.
+  // Square corners (--radius = 0) throughout. No rounded-* overrides.
   "group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-[transform,background-color,border-color,color,box-shadow] duration-150 ease-(--ease-out) outline-none select-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 active:not-aria-[haspopup]:scale-[0.97] disabled:pointer-events-none disabled:opacity-40 aria-invalid:border-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
diff --git a/apps/ui/components/ui/sidebar.tsx b/apps/ui/components/ui/sidebar.tsx
index f0c3ad8..f33109c 100644
--- a/apps/ui/components/ui/sidebar.tsx
+++ b/apps/ui/components/ui/sidebar.tsx
@@ -242,7 +242,7 @@ function Sidebar({
         <div
           data-sidebar="sidebar"
           data-slot="sidebar-inner"
-          className="flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border"
+          className="flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-none group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border"
         >
           {children}
         </div>
@@ -307,7 +307,7 @@ function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
     <main
       data-slot="sidebar-inset"
       className={cn(
-        "relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        "relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-none md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
         className
       )}
       {...props}

From d2c042a999165f1eb99bfa423c023983ce738fed Mon Sep 17 00:00:00 2001
From: nazarli-shabnam <shabnamnezerli@gmail.com>
Date: Mon, 6 Jul 2026 22:04:37 +0400
Subject: [PATCH 07/12] fix(ui): resolve CI test failure and CodeRabbit review
 comments

Update stale page-header test assertion (title is the h1, not description),
fix noise-overlay z-index over Sheet/Tooltip, add aria-hidden to the decorative
marker, fix unsupported not-aria-[haspopup] variant, align sidebar icon color
with label state, use accent token instead of hardcoded green, dedupe
section-label/section-title, and enable optimizePackageImports for phosphor icons.
---
 apps/ui/app/globals.css                       | 14 +++-----------
 apps/ui/components/check-card.tsx             |  4 ++--
 apps/ui/components/page-header.tsx            |  2 +-
 apps/ui/components/ui/button.tsx              |  2 +-
 apps/ui/components/ui/sidebar.tsx             |  2 +-
 apps/ui/next.config.mjs                       |  3 +++
 apps/ui/tests/components/page-header.test.tsx |  5 ++---
 7 files changed, 13 insertions(+), 19 deletions(-)

diff --git a/apps/ui/app/globals.css b/apps/ui/app/globals.css
index ef96d92..0fffcc3 100644
--- a/apps/ui/app/globals.css
+++ b/apps/ui/app/globals.css
@@ -339,16 +339,8 @@
    * Replaces the old .section-title. Used across Linear, Vercel, Raycast.
    * Reads "engineering dashboard", not "generic page".
    */
-  .section-label {
-    font-size: 0.6875rem;
-    font-weight: 500;
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    color: var(--muted-foreground);
-    font-family: var(--font-mono);
-  }
-
-  /* Keep old name as alias during the transition */
+  /* .section-title kept as an alias during the transition */
+  .section-label,
   .section-title {
     font-size: 0.6875rem;
     font-weight: 500;
@@ -482,7 +474,7 @@
     position: fixed;
     inset: 0;
     pointer-events: none;
-    z-index: 100;
+    z-index: 40;
     opacity: 0.025;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
   }
diff --git a/apps/ui/components/check-card.tsx b/apps/ui/components/check-card.tsx
index 517faae..f8d57b8 100644
--- a/apps/ui/components/check-card.tsx
+++ b/apps/ui/components/check-card.tsx
@@ -59,11 +59,11 @@ export function CheckCard({ check }: CheckCardProps) {
   return (
     <div
       className={`bg-card border p-3.5 flex items-start gap-3 transition-colors duration-200 ease-(--ease-out) ${
-        pass ? "border-green-500/20 hover:border-green-500/35" : "border-destructive/25 hover:border-destructive/45"
+        pass ? "border-accent/20 hover:border-accent/35" : "border-destructive/25 hover:border-destructive/45"
       }`}
     >
       {pass ? (
-        <CheckCircle className="size-4 shrink-0 mt-0.5 text-green-400" />
+        <CheckCircle className="size-4 shrink-0 mt-0.5 text-accent" />
       ) : (
         <XCircle className="size-4 shrink-0 mt-0.5 text-destructive" />
       )}
diff --git a/apps/ui/components/page-header.tsx b/apps/ui/components/page-header.tsx
index 7f4c655..738387b 100644
--- a/apps/ui/components/page-header.tsx
+++ b/apps/ui/components/page-header.tsx
@@ -14,7 +14,7 @@ export function PageHeader({ title, description, actions }: PageHeaderProps) {
     <header className="flex items-end justify-between pb-4 mb-6 border-b border-border/60">
       <div className="flex flex-col gap-1.5">
         <div className="flex items-baseline gap-2.5">
-          <span className="font-mono text-sm text-subtle-foreground leading-none select-none">
+          <span aria-hidden="true" className="font-mono text-sm text-subtle-foreground leading-none select-none">
             {"///"}
           </span>
           <h1 className="macro-heading text-2xl md:text-[1.75rem] uppercase text-foreground">
diff --git a/apps/ui/components/ui/button.tsx b/apps/ui/components/ui/button.tsx
index 08a6017..9f87008 100644
--- a/apps/ui/components/ui/button.tsx
+++ b/apps/ui/components/ui/button.tsx
@@ -7,7 +7,7 @@ import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
   // Square corners (--radius = 0) throughout. No rounded-* overrides.
-  "group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-[transform,background-color,border-color,color,box-shadow] duration-150 ease-(--ease-out) outline-none select-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 active:not-aria-[haspopup]:scale-[0.97] disabled:pointer-events-none disabled:opacity-40 aria-invalid:border-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-[transform,background-color,border-color,color,box-shadow] duration-150 ease-(--ease-out) outline-none select-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 [&:not([aria-haspopup])]:active:scale-[0.97] disabled:pointer-events-none disabled:opacity-40 aria-invalid:border-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
diff --git a/apps/ui/components/ui/sidebar.tsx b/apps/ui/components/ui/sidebar.tsx
index f33109c..83a8e0b 100644
--- a/apps/ui/components/ui/sidebar.tsx
+++ b/apps/ui/components/ui/sidebar.tsx
@@ -679,7 +679,7 @@ function SidebarMenuSubButton({
     props: mergeProps<"a">(
       {
         className: cn(
-          "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-none px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+          "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-none px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-foreground hover:[&>svg]:text-sidebar-accent-foreground active:[&>svg]:text-sidebar-accent-foreground data-active:[&>svg]:text-sidebar-accent-foreground",
           className
         ),
       },
diff --git a/apps/ui/next.config.mjs b/apps/ui/next.config.mjs
index e066770..44e4502 100644
--- a/apps/ui/next.config.mjs
+++ b/apps/ui/next.config.mjs
@@ -4,6 +4,9 @@ const nextConfig = {
   // Avoid Next.js workspace-root inference issues when multiple lockfiles exist.
   // This keeps file tracing scoped to the monorepo root.
   outputFileTracingRoot: new URL("..", import.meta.url).pathname,
+  experimental: {
+    optimizePackageImports: ["@phosphor-icons/react"],
+  },
 };
 
 export default nextConfig;
diff --git a/apps/ui/tests/components/page-header.test.tsx b/apps/ui/tests/components/page-header.test.tsx
index 9895fe3..5059476 100644
--- a/apps/ui/tests/components/page-header.test.tsx
+++ b/apps/ui/tests/components/page-header.test.tsx
@@ -9,10 +9,9 @@ describe("PageHeader", () => {
       <PageHeader title="Repositories" description="Manage GitHub repos." />,
     );
 
-    // description is now the h1; title is a small label above it
     expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
-      "Manage GitHub repos.",
+      "Repositories",
     );
-    expect(screen.getByText("Repositories")).toBeInTheDocument();
+    expect(screen.getByText("Manage GitHub repos.")).toBeInTheDocument();
   });
 });

From c040cdcfd135a34b8d61311b0da3914e9d8bb177 Mon Sep 17 00:00:00 2001
From: nazarli-shabnam <shabnamnezerli@gmail.com>
Date: Thu, 9 Jul 2026 11:42:28 +0400
Subject: [PATCH 08/12] chore(skills): add emil-design-eng skill to lockfile

---
 skills-lock.json | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/skills-lock.json b/skills-lock.json
index 709d97e..69b6c98 100644
--- a/skills-lock.json
+++ b/skills-lock.json
@@ -19,6 +19,12 @@
       "skillPath": "skills/caveman-review/SKILL.md",
       "computedHash": "fb7214a1c5793bae6ba8b1be4329e2e6f40dbec6dd911dfb335ad29f09c316a1"
     },
+    "emil-design-eng": {
+      "source": "emilkowalski/skill",
+      "sourceType": "github",
+      "skillPath": "skills/emil-design-eng/SKILL.md",
+      "computedHash": "8bdf9e4e6de7a4969147bf4828a4ad2c5aacd9fba4b690b250a85e0467ca387d"
+    },
     "karpathy-guidelines": {
       "source": "forrestchang/andrej-karpathy-skills",
       "sourceType": "github",

From bc7b18cadcc6a0c7ddb38a6b6ad729b11a70328f Mon Sep 17 00:00:00 2001
From: Tarek Lokal <tarek@example.com>
Date: Sat, 11 Jul 2026 12:41:12 +0200
Subject: [PATCH 09/12] fix(ui): regenerate bun.lock after phosphor icon
 migration

package.json swapped lucide-react for @phosphor-icons/react but bun.lock
was never updated, causing CI and Docker builds to fail at
`bun install --frozen-lockfile`.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 apps/ui/bun.lock | 56 +++---------------------------------------------
 1 file changed, 3 insertions(+), 53 deletions(-)

diff --git a/apps/ui/bun.lock b/apps/ui/bun.lock
index ea85cdc..d44ff33 100644
--- a/apps/ui/bun.lock
+++ b/apps/ui/bun.lock
@@ -6,10 +6,10 @@
       "name": "clevis-ui",
       "dependencies": {
         "@base-ui/react": "^1.3.0",
+        "@phosphor-icons/react": "^2.1.10",
         "@tanstack/react-query": "^5.100.10",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
-        "lucide-react": "^1.7.0",
         "next": "^15.5.14",
         "react": "19.1.0",
         "react-dom": "19.1.0",
@@ -290,6 +290,8 @@
 
     "@oxc-project/types": ["@oxc-project/types@0.124.0", "", {}, "sha512-VBFWMTBvHxS11Z5Lvlr3IWgrwhMTXV+Md+EQF0Xf60+wAdsGFTBx7X7K/hP4pi8N7dcm1RvcHwDxZ16Qx8keUg=="],
 
+    "@phosphor-icons/react": ["@phosphor-icons/react@2.1.10", "", { "peerDependencies": { "react": ">= 16.8", "react-dom": ">= 16.8" } }, "sha512-vt8Tvq8GLjheAZZYa+YG/pW7HDbov8El/MANW8pOAz4eGxrwhnbfrQZq0Cp4q8zBEu8NIhHdnr+r8thnfRSNYA=="],
+
     "@reduxjs/toolkit": ["@reduxjs/toolkit@2.12.0", "", { "dependencies": { "@standard-schema/spec": "^1.0.0", "@standard-schema/utils": "^0.3.0", "immer": "^11.0.0", "redux": "^5.0.1", "redux-thunk": "^3.1.0", "reselect": "^5.1.0" }, "peerDependencies": { "react": "^16.9.0 || ^17.0.0 || ^18 || ^19", "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0" } }, "sha512-KiT+RzZbp6mQET+Mg+h2c97+9j1sNflUxQkIHI7Yuzf6Peu+OYpmkn6nbHWmLLWj+1ZODUJFwGZ7gx3L9R9EOw=="],
 
     "@rolldown/binding-android-arm64": ["@rolldown/binding-android-arm64@1.0.0-rc.15", "", { "os": "android", "cpu": "arm64" }, "sha512-YYe6aWruPZDtHNpwu7+qAHEMbQ/yRl6atqb/AhznLTnD3UY99Q1jE7ihLSahNWkF4EqRPVC4SiR4O0UkLK02tA=="],
@@ -1088,8 +1090,6 @@
 
     "lru-cache": ["lru-cache@11.3.3", "", {}, "sha512-JvNw9Y81y33E+BEYPr0U7omo+U9AySnsMsEiXgwT6yqd31VQWTLNQqmT4ou5eqPFUrTfIDFta2wKhB1hyohtAQ=="],
 
-    "lucide-react": ["lucide-react@1.7.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-yI7BeItCLZJTXikmK4KNUGCKoGzSvbKlfCvw44bU4fXAL6v3gYS4uHD1jzsLkfwODYwI6Drw5Tu9Z5ulDe0TSg=="],
-
     "lz-string": ["lz-string@1.5.0", "", { "bin": "bin/bin.js" }, "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ=="],
 
     "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
@@ -1538,14 +1538,8 @@
 
     "zod-to-json-schema": ["zod-to-json-schema@3.25.2", "", { "peerDependencies": { "zod": "^3.25.28 || ^4" } }, "sha512-O/PgfnpT1xKSDeQYSCfRI5Gy3hPf91mKVDuYLUHZJMiDFptvP41MSnWofm8dnCm0256ZNfZIM7DSzuSMAFnjHA=="],
 
-    "@babel/core/semver": ["semver@6.3.1", "", { "bin": "bin/semver.js" }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
-
     "@babel/helper-compilation-targets/lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "^3.0.2" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="],
 
-    "@babel/helper-compilation-targets/semver": ["semver@6.3.1", "", { "bin": "bin/semver.js" }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
-
-    "@babel/helper-create-class-features-plugin/semver": ["semver@6.3.1", "", { "bin": "bin/semver.js" }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
-
     "@dotenvx/dotenvx/commander": ["commander@11.1.0", "", {}, "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ=="],
 
     "@dotenvx/dotenvx/execa": ["execa@5.1.1", "", { "dependencies": { "cross-spawn": "^7.0.3", "get-stream": "^6.0.0", "human-signals": "^2.1.0", "is-stream": "^2.0.0", "merge-stream": "^2.0.0", "npm-run-path": "^4.0.1", "onetime": "^5.1.2", "signal-exit": "^3.0.3", "strip-final-newline": "^2.0.0" } }, "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg=="],
@@ -1554,8 +1548,6 @@
 
     "@eslint-community/eslint-utils/eslint-visitor-keys": ["eslint-visitor-keys@3.4.3", "", {}, "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag=="],
 
-    "@eslint/config-array/minimatch": ["minimatch@3.1.5", "", { "dependencies": { "brace-expansion": "^1.1.7" } }, "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w=="],
-
     "@modelcontextprotocol/sdk/ajv": ["ajv@8.18.0", "", { "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", "json-schema-traverse": "^1.0.0", "require-from-string": "^2.0.2" } }, "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A=="],
 
     "@next/eslint-plugin-next/fast-glob": ["fast-glob@3.3.1", "", { "dependencies": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", "glob-parent": "^5.1.2", "merge2": "^1.3.0", "micromatch": "^4.0.4" } }, "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg=="],
@@ -1586,26 +1578,14 @@
 
     "cliui/wrap-ansi": ["wrap-ansi@7.0.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", "strip-ansi": "^6.0.0" } }, "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q=="],
 
-    "eslint/ajv": ["ajv@6.14.0", "", { "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", "json-schema-traverse": "^0.4.1", "uri-js": "^4.2.2" } }, "sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw=="],
-
-    "eslint/minimatch": ["minimatch@3.1.5", "", { "dependencies": { "brace-expansion": "^1.1.7" } }, "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w=="],
-
     "eslint-import-resolver-node/debug": ["debug@3.2.7", "", { "dependencies": { "ms": "^2.1.1" } }, "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ=="],
 
     "eslint-module-utils/debug": ["debug@3.2.7", "", { "dependencies": { "ms": "^2.1.1" } }, "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ=="],
 
     "eslint-plugin-import/debug": ["debug@3.2.7", "", { "dependencies": { "ms": "^2.1.1" } }, "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ=="],
 
-    "eslint-plugin-import/minimatch": ["minimatch@3.1.5", "", { "dependencies": { "brace-expansion": "^1.1.7" } }, "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w=="],
-
     "eslint-plugin-import/tsconfig-paths": ["tsconfig-paths@3.15.0", "", { "dependencies": { "@types/json5": "^0.0.29", "json5": "^1.0.2", "minimist": "^1.2.6", "strip-bom": "^3.0.0" } }, "sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg=="],
 
-    "eslint-plugin-jsx-a11y/minimatch": ["minimatch@3.1.5", "", { "dependencies": { "brace-expansion": "^1.1.7" } }, "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w=="],
-
-    "eslint-plugin-react/minimatch": ["minimatch@3.1.5", "", { "dependencies": { "brace-expansion": "^1.1.7" } }, "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w=="],
-
-    "eslint-plugin-react/semver": ["semver@6.3.1", "", { "bin": "bin/semver.js" }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
-
     "express/cookie": ["cookie@0.7.2", "", {}, "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w=="],
 
     "fast-glob/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
@@ -1620,8 +1600,6 @@
 
     "next/postcss": ["postcss@8.4.31", "", { "dependencies": { "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" } }, "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ=="],
 
-    "node-exports-info/semver": ["semver@6.3.1", "", { "bin": "bin/semver.js" }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
-
     "npm-run-path/path-key": ["path-key@4.0.0", "", {}, "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ=="],
 
     "ora/chalk": ["chalk@5.6.2", "", {}, "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA=="],
@@ -1664,8 +1642,6 @@
 
     "@dotenvx/dotenvx/which/isexe": ["isexe@3.1.5", "", {}, "sha512-6B3tLtFqtQS4ekarvLVMZ+X+VlvQekbe4taUkf/rhVO3d/h0M2rfARm/pXLcPEsjjMsFgrFgSrhQIxcSVrBz8w=="],
 
-    "@eslint/config-array/minimatch/brace-expansion": ["brace-expansion@1.1.13", "", { "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, "sha512-9ZLprWS6EENmhEOpjCYW2c8VkmOvckIJZfkr7rBW6dObmfgJ/L1GpSYW5Hpo9lDz4D1+n0Ckz8rU7FwHDQiG/w=="],
-
     "@modelcontextprotocol/sdk/ajv/json-schema-traverse": ["json-schema-traverse@1.0.0", "", {}, "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="],
 
     "@next/eslint-plugin-next/fast-glob/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
@@ -1678,42 +1654,16 @@
 
     "cliui/string-width/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
 
-    "cliui/strip-ansi/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
-
-    "eslint-plugin-import/minimatch/brace-expansion": ["brace-expansion@1.1.13", "", { "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, "sha512-9ZLprWS6EENmhEOpjCYW2c8VkmOvckIJZfkr7rBW6dObmfgJ/L1GpSYW5Hpo9lDz4D1+n0Ckz8rU7FwHDQiG/w=="],
-
     "eslint-plugin-import/tsconfig-paths/json5": ["json5@1.0.2", "", { "dependencies": { "minimist": "^1.2.0" }, "bin": "lib/cli.js" }, "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA=="],
 
-    "eslint-plugin-jsx-a11y/minimatch/brace-expansion": ["brace-expansion@1.1.13", "", { "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, "sha512-9ZLprWS6EENmhEOpjCYW2c8VkmOvckIJZfkr7rBW6dObmfgJ/L1GpSYW5Hpo9lDz4D1+n0Ckz8rU7FwHDQiG/w=="],
-
-    "eslint-plugin-react/minimatch/brace-expansion": ["brace-expansion@1.1.13", "", { "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, "sha512-9ZLprWS6EENmhEOpjCYW2c8VkmOvckIJZfkr7rBW6dObmfgJ/L1GpSYW5Hpo9lDz4D1+n0Ckz8rU7FwHDQiG/w=="],
-
-    "eslint/ajv/json-schema-traverse": ["json-schema-traverse@0.4.1", "", {}, "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="],
-
-    "eslint/minimatch/brace-expansion": ["brace-expansion@1.1.13", "", { "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, "sha512-9ZLprWS6EENmhEOpjCYW2c8VkmOvckIJZfkr7rBW6dObmfgJ/L1GpSYW5Hpo9lDz4D1+n0Ckz8rU7FwHDQiG/w=="],
-
     "wrap-ansi/string-width/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
 
-    "wrap-ansi/strip-ansi/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
-
     "yargs/string-width/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
 
     "yargs/string-width/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
 
-    "@eslint/config-array/minimatch/brace-expansion/balanced-match": ["balanced-match@1.0.2", "", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="],
-
     "@ts-morph/common/minimatch/brace-expansion/balanced-match": ["balanced-match@4.0.4", "", {}, "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA=="],
 
     "@typescript-eslint/typescript-estree/minimatch/brace-expansion/balanced-match": ["balanced-match@4.0.4", "", {}, "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA=="],
-
-    "eslint-plugin-import/minimatch/brace-expansion/balanced-match": ["balanced-match@1.0.2", "", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="],
-
-    "eslint-plugin-jsx-a11y/minimatch/brace-expansion/balanced-match": ["balanced-match@1.0.2", "", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="],
-
-    "eslint-plugin-react/minimatch/brace-expansion/balanced-match": ["balanced-match@1.0.2", "", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="],
-
-    "eslint/minimatch/brace-expansion/balanced-match": ["balanced-match@1.0.2", "", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="],
-
-    "yargs/string-width/strip-ansi/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
   }
 }

From 091460d269d289ecdd786829a0a6f920eb94f2d3 Mon Sep 17 00:00:00 2001
From: Tarek Lokal <tarek@example.com>
Date: Sat, 11 Jul 2026 12:42:38 +0200
Subject: [PATCH 10/12] fix(ui): migrate register page spinner to phosphor

The register page came from main with a lucide-react import, but PR #61
removed that dependency. Use CircleNotch to match login/setup.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 apps/ui/app/register/page.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/ui/app/register/page.tsx b/apps/ui/app/register/page.tsx
index 6109884..541c1b2 100644
--- a/apps/ui/app/register/page.tsx
+++ b/apps/ui/app/register/page.tsx
@@ -6,7 +6,7 @@ import { useAuth } from "@/lib/auth-context"
 import { api } from "@/lib/api/client"
 import { Input } from "@/components/ui/input"
 import { Button } from "@/components/ui/button"
-import { Loader2 } from "lucide-react"
+import { CircleNotch } from "@phosphor-icons/react"
 
 export default function RegisterPage() {
   const { user, setSession, isLoading } = useAuth()
@@ -109,7 +109,7 @@ export default function RegisterPage() {
 
           <Button type="submit" disabled={isSubmitting} className="mt-2">
             {isSubmitting ? (
-              <><Loader2 className="size-3.5 animate-spin" />Creating account…</>
+              <><CircleNotch className="size-3.5 animate-spin" />Creating account…</>
             ) : (
               "Create account →"
             )}

From 4eaf5410406714b9ef7741cad321c53ba3be3ff7 Mon Sep 17 00:00:00 2001
From: nazarli-shabnam <shabnamnezerli@gmail.com>
Date: Sun, 12 Jul 2026 18:37:55 +0400
Subject: [PATCH 11/12] fix(ui): satisfy CI after main merge

Fix a stale e2e assertion (login heading moved from description to
title in the tactical-telemetry redesign of PageHeader), migrate two
lucide-react icon usages that landed from main's org-invite/members
pages to phosphor-icons, and add unit tests plus small refactors
(hoisting inline JSX ternaries to statements) so the new/changed UI
lines introduced by the merge clear CI's diff-coverage gate.
---
 .gitignore                                    |  1 +
 apps/ui/app/settings/page.tsx                 | 26 ++++--
 apps/ui/e2e/auth.spec.ts                      |  6 +-
 .../tests/components/activity-list.test.tsx   | 27 ++++++
 apps/ui/tests/components/check-card.test.tsx  | 37 ++++++++
 .../tests/components/icon-provider.test.tsx   | 16 ++++
 apps/ui/tests/components/layout.test.tsx      | 17 ++++
 apps/ui/tests/components/page-header.test.tsx |  8 ++
 .../tests/components/settings-page.test.tsx   | 91 +++++++++++++++++++
 9 files changed, 220 insertions(+), 9 deletions(-)
 create mode 100644 apps/ui/tests/components/activity-list.test.tsx
 create mode 100644 apps/ui/tests/components/check-card.test.tsx
 create mode 100644 apps/ui/tests/components/icon-provider.test.tsx
 create mode 100644 apps/ui/tests/components/layout.test.tsx
 create mode 100644 apps/ui/tests/components/settings-page.test.tsx

diff --git a/.gitignore b/.gitignore
index 275d61d..aacec0e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -67,6 +67,7 @@ coverage.xml
 *.cover
 *.py.cover
 .hypothesis/
+apps/ui/coverage/
 .pytest_cache/
 cover/
 
diff --git a/apps/ui/app/settings/page.tsx b/apps/ui/app/settings/page.tsx
index ab8bb59..c4fb6f8 100644
--- a/apps/ui/app/settings/page.tsx
+++ b/apps/ui/app/settings/page.tsx
@@ -42,6 +42,13 @@ function ProfileSection() {
     }
   }
 
+  let buttonContent: React.ReactNode = "Save profile"
+  if (saved) {
+    buttonContent = <><Check className="size-3.5" />Saved</>
+  } else if (isSaving) {
+    buttonContent = <><CircleNotch className="size-3.5 animate-spin" />Saving…</>
+  }
+
   return (
     <div className="bg-card border border-border">
       <div className="px-4 py-3 border-b border-border">
@@ -73,7 +80,7 @@ function ProfileSection() {
           </p>
         </div>
         <Button onClick={save} disabled={isSaving} className="mt-1 w-fit">
-          {saved ? <><Check className="size-3.5" />Saved</> : isSaving ? <><CircleNotch className="size-3.5 animate-spin" />Saving…</> : "Save profile"}
+          {buttonContent}
         </Button>
       </div>
     </div>
@@ -125,11 +132,13 @@ function AppearanceSection() {
 // ── Shared inline error state ────────────────────────────────────────────────
 
 function SectionError({ message, onRetry, retrying }: { message: string; onRetry: () => void; retrying?: boolean }) {
+  const retryContent: React.ReactNode = retrying ? <CircleNotch className="size-3 animate-spin" /> : "Retry"
+
   return (
     <div className="px-4 py-6 flex items-center justify-between gap-3">
       <p className="text-sm text-destructive">{message}</p>
       <Button size="sm" variant="outline" onClick={onRetry} disabled={retrying}>
-        {retrying ? <CircleNotch className="size-3 animate-spin" /> : "Retry"}
+        {retryContent}
       </Button>
     </div>
   )
@@ -471,7 +480,11 @@ function InstanceConfigSection() {
         />
       )}
       <div className="divide-y divide-border">
-        {CONFIG_FIELDS.map((field) => (
+        {CONFIG_FIELDS.map((field) => {
+          const isSavingField = saving === field.key
+          const saveContent: React.ReactNode = isSavingField ? <CircleNotch className="size-3 animate-spin" /> : "Save"
+
+          return (
           <div key={field.key} className="p-4 max-w-lg">
             <label className="text-xs font-medium text-foreground block mb-1">{field.label}</label>
             <div className="flex items-center gap-2">
@@ -492,8 +505,8 @@ function InstanceConfigSection() {
                   className="font-mono text-xs"
                 />
               )}
-              <Button size="sm" variant="outline" onClick={() => saveKey(field.key)} disabled={saving === field.key}>
-                {saving === field.key ? <CircleNotch className="size-3 animate-spin" /> : "Save"}
+              <Button size="sm" variant="outline" onClick={() => saveKey(field.key)} disabled={isSavingField}>
+                {saveContent}
               </Button>
             </div>
             {errors[field.key] && (
@@ -501,7 +514,8 @@ function InstanceConfigSection() {
             )}
             <p className="text-xs text-muted-foreground mt-1">{field.description}</p>
           </div>
-        ))}
+          )
+        })}
       </div>
     </div>
   )
diff --git a/apps/ui/e2e/auth.spec.ts b/apps/ui/e2e/auth.spec.ts
index 148049d..41fccce 100644
--- a/apps/ui/e2e/auth.spec.ts
+++ b/apps/ui/e2e/auth.spec.ts
@@ -15,7 +15,7 @@ test.describe("Login", () => {
     await login(page)
 
     await expect(page).toHaveURL((url) => !url.pathname.startsWith("/login"))
-    await expect(page.getByRole("heading", { level: 1, name: "Your GitHub organization at a glance." })).toBeVisible()
+    await expect(page.getByRole("heading", { level: 1, name: "Overview" })).toBeVisible()
   })
 
   test("invalid password shows an error and stays on /login", async ({ page }) => {
@@ -42,7 +42,7 @@ test.describe("GitHub OAuth error redirect", () => {
 test.describe("Logout", () => {
   test("manual sign-out clears the session and returns to /login", async ({ page }) => {
     await login(page)
-    await expect(page.getByRole("heading", { level: 1, name: "Your GitHub organization at a glance." })).toBeVisible()
+    await expect(page.getByRole("heading", { level: 1, name: "Overview" })).toBeVisible()
 
     // Sidebar header button shows the user's name (see components/app-sidebar.tsx);
     // clicking it opens ProfileDropdown, whose "Sign out" button calls logout().
@@ -61,7 +61,7 @@ test.describe("Logout", () => {
 test.describe("Mid-session 401", () => {
   test("a 401 from the API redirects to /login without a loop", async ({ page }) => {
     await login(page)
-    await expect(page.getByRole("heading", { level: 1, name: "Your GitHub organization at a glance." })).toBeVisible()
+    await expect(page.getByRole("heading", { level: 1, name: "Overview" })).toBeVisible()
 
     // Force the next API call to look like an expired/revoked session. /jobs auto-fetches
     // GET /jobs on mount (see app/jobs/page.tsx), so navigating there reliably triggers it.
diff --git a/apps/ui/tests/components/activity-list.test.tsx b/apps/ui/tests/components/activity-list.test.tsx
new file mode 100644
index 0000000..a9883d0
--- /dev/null
+++ b/apps/ui/tests/components/activity-list.test.tsx
@@ -0,0 +1,27 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+
+import { ActivityList } from "@/components/activity-list";
+import type { JobOut } from "@/lib/api/types";
+
+const jobs: JobOut[] = [
+  { id: 1, job_type: "clear_actions_cache", status: "done", result: null, created_at: new Date().toISOString(), updated_at: new Date().toISOString() },
+  { id: 2, job_type: "clear_actions_cache", status: "failed", result: "boom", created_at: new Date().toISOString(), updated_at: new Date().toISOString() },
+];
+
+describe("ActivityList", () => {
+  it("renders each job's id and status", () => {
+    render(<ActivityList jobs={jobs} isLoading={false} />);
+
+    expect(screen.getByText("#1")).toBeInTheDocument();
+    expect(screen.getByText("#2")).toBeInTheDocument();
+    expect(screen.getByText("done")).toBeInTheDocument();
+    expect(screen.getByText("failed")).toBeInTheDocument();
+  });
+
+  it("shows a 'View all' link when limited and there are more jobs than the limit", () => {
+    render(<ActivityList jobs={jobs} isLoading={false} limit={1} />);
+
+    expect(screen.getByRole("link", { name: /View all 2 jobs/ })).toBeInTheDocument();
+  });
+});
diff --git a/apps/ui/tests/components/check-card.test.tsx b/apps/ui/tests/components/check-card.test.tsx
new file mode 100644
index 0000000..84528a2
--- /dev/null
+++ b/apps/ui/tests/components/check-card.test.tsx
@@ -0,0 +1,37 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+
+import { CheckCard } from "@/components/check-card";
+import type { CheckResult } from "@/lib/api/types";
+
+const baseCheck: CheckResult = {
+  id: "mfa",
+  title: "MFA enforced",
+  severity: "high",
+  remediation: "Require two-factor authentication for all members.",
+  status: "pass",
+  value: { type: "boolean", enabled: true },
+};
+
+describe("CheckCard", () => {
+  it("renders a passing check with its boolean value", () => {
+    render(<CheckCard check={baseCheck} />);
+
+    expect(screen.getByText("MFA enforced")).toBeInTheDocument();
+    expect(screen.getByText("✓ Enabled")).toBeInTheDocument();
+  });
+
+  it("renders a failing check with a ratio value", () => {
+    render(
+      <CheckCard
+        check={{
+          ...baseCheck,
+          status: "fail",
+          value: { type: "ratio", numerator: 2, denominator: 10 },
+        }}
+      />,
+    );
+
+    expect(screen.getByText(/2 \/ 10/)).toBeInTheDocument();
+  });
+});
diff --git a/apps/ui/tests/components/icon-provider.test.tsx b/apps/ui/tests/components/icon-provider.test.tsx
new file mode 100644
index 0000000..5c10df6
--- /dev/null
+++ b/apps/ui/tests/components/icon-provider.test.tsx
@@ -0,0 +1,16 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+
+import { IconProvider } from "@/components/icon-provider";
+
+describe("IconProvider", () => {
+  it("renders its children", () => {
+    render(
+      <IconProvider>
+        <span>child content</span>
+      </IconProvider>,
+    );
+
+    expect(screen.getByText("child content")).toBeInTheDocument();
+  });
+});
diff --git a/apps/ui/tests/components/layout.test.tsx b/apps/ui/tests/components/layout.test.tsx
new file mode 100644
index 0000000..1846092
--- /dev/null
+++ b/apps/ui/tests/components/layout.test.tsx
@@ -0,0 +1,17 @@
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("@/app/globals.css", () => ({}));
+
+vi.mock("next/font/google", () => ({
+  Geist: () => ({ variable: "--font-sans" }),
+  Archivo: () => ({ variable: "--font-heading" }),
+  JetBrains_Mono: () => ({ variable: "--font-jetbrains-mono" }),
+}));
+
+describe("RootLayout module", () => {
+  it("configures the Geist, Archivo, and JetBrains Mono fonts at import time", async () => {
+    const mod = await import("@/app/layout");
+
+    expect(mod.default).toBeInstanceOf(Function);
+  }, 30000);
+});
diff --git a/apps/ui/tests/components/page-header.test.tsx b/apps/ui/tests/components/page-header.test.tsx
index 5059476..7b4ad29 100644
--- a/apps/ui/tests/components/page-header.test.tsx
+++ b/apps/ui/tests/components/page-header.test.tsx
@@ -14,4 +14,12 @@ describe("PageHeader", () => {
     );
     expect(screen.getByText("Manage GitHub repos.")).toBeInTheDocument();
   });
+
+  it("renders actions when provided", () => {
+    render(
+      <PageHeader title="Repositories" actions={<button>Run Scan</button>} />,
+    );
+
+    expect(screen.getByRole("button", { name: "Run Scan" })).toBeInTheDocument();
+  });
 });
diff --git a/apps/ui/tests/components/settings-page.test.tsx b/apps/ui/tests/components/settings-page.test.tsx
new file mode 100644
index 0000000..da5ff7e
--- /dev/null
+++ b/apps/ui/tests/components/settings-page.test.tsx
@@ -0,0 +1,91 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const orgsMineMock = vi.fn();
+const installationsListMock = vi.fn();
+const tokensListMock = vi.fn();
+const configGetAllMock = vi.fn();
+
+vi.mock("@/lib/api/client", () => ({
+  api: {
+    orgs: { mine: (...args: unknown[]) => orgsMineMock(...args) },
+    installations: { list: (...args: unknown[]) => installationsListMock(...args) },
+    tokens: { list: (...args: unknown[]) => tokensListMock(...args) },
+    config: { getAll: (...args: unknown[]) => configGetAllMock(...args) },
+    auth: { patchMe: vi.fn() },
+  },
+}));
+
+import { AuthProvider } from "@/lib/auth-context";
+import SettingsPage from "@/app/settings/page";
+
+const TOKEN_KEY = "clevis:token";
+
+function b64url(value: object): string {
+  return btoa(JSON.stringify(value))
+    .replace(/\+/g, "-")
+    .replace(/\//g, "_")
+    .replace(/=+$/, "");
+}
+
+function makeAdminJwt(): string {
+  const header = b64url({ alg: "none", typ: "JWT" });
+  const payload = b64url({
+    sub: "1",
+    email: "admin@example.com",
+    name: "Admin",
+    is_workspace_admin: true,
+    exp: Math.floor(Date.now() / 1000) + 3600,
+  });
+  return `${header}.${payload}.`;
+}
+
+function renderPage() {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+  });
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <AuthProvider>
+        <SettingsPage />
+      </AuthProvider>
+    </QueryClientProvider>,
+  );
+}
+
+describe("SettingsPage", () => {
+  beforeEach(() => {
+    orgsMineMock.mockReset();
+    installationsListMock.mockReset();
+    tokensListMock.mockReset();
+    configGetAllMock.mockReset();
+    localStorage.clear();
+    localStorage.setItem(TOKEN_KEY, makeAdminJwt());
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("renders the profile section and surfaces a retry when a section errors, and shows instance config for admins", async () => {
+    orgsMineMock.mockRejectedValue(new Error("Failed to load organizations."));
+    installationsListMock.mockResolvedValue([]);
+    tokensListMock.mockResolvedValue([]);
+    configGetAllMock.mockResolvedValue({ worker_poll_seconds: "5", registration_enabled: "true" });
+
+    renderPage();
+
+    expect(screen.getByRole("button", { name: "Save profile" })).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(screen.getByText("Failed to load organizations.")).toBeInTheDocument();
+    });
+    expect(screen.getByRole("button", { name: "Retry" })).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(screen.getByText("Instance configuration")).toBeInTheDocument();
+    });
+    expect(screen.getAllByRole("button", { name: "Save" }).length).toBeGreaterThan(0);
+  });
+});

From ff0752891d21092b283f3bdb7a55a3319d0e4a7f Mon Sep 17 00:00:00 2001
From: nazarli-shabnam <shabnamnezerli@gmail.com>
Date: Sun, 12 Jul 2026 18:42:38 +0400
Subject: [PATCH 12/12] test(ui): cover ProfileSection/InstanceConfigSection
 saving states

Exercises the remaining diff-coverage gaps: profile save spinner/saved
confirmation, and the per-field instance-config saving spinner.
---
 .../tests/components/settings-page.test.tsx   | 79 ++++++++++++++++++-
 1 file changed, 76 insertions(+), 3 deletions(-)

diff --git a/apps/ui/tests/components/settings-page.test.tsx b/apps/ui/tests/components/settings-page.test.tsx
index da5ff7e..b5983cd 100644
--- a/apps/ui/tests/components/settings-page.test.tsx
+++ b/apps/ui/tests/components/settings-page.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen, waitFor } from "@testing-library/react";
+import { act, cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
@@ -6,17 +6,30 @@ const orgsMineMock = vi.fn();
 const installationsListMock = vi.fn();
 const tokensListMock = vi.fn();
 const configGetAllMock = vi.fn();
+const patchMeMock = vi.fn();
+const configUpdateMock = vi.fn();
 
 vi.mock("@/lib/api/client", () => ({
   api: {
     orgs: { mine: (...args: unknown[]) => orgsMineMock(...args) },
     installations: { list: (...args: unknown[]) => installationsListMock(...args) },
     tokens: { list: (...args: unknown[]) => tokensListMock(...args) },
-    config: { getAll: (...args: unknown[]) => configGetAllMock(...args) },
-    auth: { patchMe: vi.fn() },
+    config: {
+      getAll: (...args: unknown[]) => configGetAllMock(...args),
+      update: (...args: unknown[]) => configUpdateMock(...args),
+    },
+    auth: { patchMe: (...args: unknown[]) => patchMeMock(...args) },
   },
 }));
 
+function deferred<T>() {
+  let resolve!: (value: T) => void;
+  const promise = new Promise<T>((res) => {
+    resolve = res;
+  });
+  return { promise, resolve };
+}
+
 import { AuthProvider } from "@/lib/auth-context";
 import SettingsPage from "@/app/settings/page";
 
@@ -60,11 +73,14 @@ describe("SettingsPage", () => {
     installationsListMock.mockReset();
     tokensListMock.mockReset();
     configGetAllMock.mockReset();
+    patchMeMock.mockReset();
+    configUpdateMock.mockReset();
     localStorage.clear();
     localStorage.setItem(TOKEN_KEY, makeAdminJwt());
   });
 
   afterEach(() => {
+    cleanup();
     vi.restoreAllMocks();
   });
 
@@ -88,4 +104,61 @@ describe("SettingsPage", () => {
     });
     expect(screen.getAllByRole("button", { name: "Save" }).length).toBeGreaterThan(0);
   });
+
+  it("shows a saving spinner then a saved confirmation when the profile is updated", async () => {
+    orgsMineMock.mockResolvedValue([]);
+    installationsListMock.mockResolvedValue([]);
+    tokensListMock.mockResolvedValue([]);
+    configGetAllMock.mockResolvedValue({ worker_poll_seconds: "5", registration_enabled: "true" });
+
+    const patchGate = deferred<{ id: number; email: string; name: string | null; is_workspace_admin: boolean }>();
+    patchMeMock.mockReturnValue(patchGate.promise);
+
+    renderPage();
+
+    const nameInput = screen.getByPlaceholderText("Your name");
+    fireEvent.change(nameInput, { target: { value: "New Name" } });
+    fireEvent.click(screen.getByRole("button", { name: "Save profile" }));
+
+    await waitFor(() => {
+      expect(screen.getByRole("button", { name: /Saving…/ })).toBeInTheDocument();
+    });
+
+    await act(async () => {
+      patchGate.resolve({ id: 1, email: "admin@example.com", name: "New Name", is_workspace_admin: true });
+      await patchGate.promise;
+    });
+
+    await waitFor(() => {
+      expect(screen.getByRole("button", { name: /Saved/ })).toBeInTheDocument();
+    });
+  });
+
+  it("shows a saving spinner on the instance config field being saved", async () => {
+    orgsMineMock.mockResolvedValue([]);
+    installationsListMock.mockResolvedValue([]);
+    tokensListMock.mockResolvedValue([]);
+    configGetAllMock.mockResolvedValue({ worker_poll_seconds: "5", registration_enabled: "true" });
+
+    const updateGate = deferred<Record<string, string>>();
+    configUpdateMock.mockReturnValue(updateGate.promise);
+
+    renderPage();
+
+    await waitFor(() => {
+      expect(screen.getByText("Instance configuration")).toBeInTheDocument();
+    });
+
+    const saveButtons = screen.getAllByRole("button", { name: "Save" });
+    fireEvent.click(saveButtons[0]);
+
+    await waitFor(() => {
+      expect(saveButtons[0]).toBeDisabled();
+    });
+
+    await act(async () => {
+      updateGate.resolve({ worker_poll_seconds: "5", registration_enabled: "true" });
+      await updateGate.promise;
+    });
+  });
 });