16 feat setup deltas

.env.example

@@ -4,3 +4,4 @@ WORKER_POLL_SECONDS=5
 DATABASE_PATH=/app/data/app.db
 GITHUB_API_BASE=https://api.github.com
 DEFAULT_RBAC_ROLE=viewer
+NEXT_PUBLIC_API_BASE=http://localhost:8080

.github/workflows/ci.yml

@@ -29,7 +29,7 @@ jobs:
         run: npx commitlint --from ${{ github.event.pull_request.base.sha }} --to ${{ github.sha }} --verbose
 
       - name: Lint commits (push)
-        if: ${{ github.event_name == 'push' }}
+        if: ${{ github.event_name == 'push' && github.ref != 'refs/heads/main' && github.event.before != '0000000000000000000000000000000000000000' }}
         run: npx commitlint --from ${{ github.event.before }} --to ${{ github.sha }} --verbose
 
   ui:
@@ -54,6 +54,10 @@ jobs:
         working-directory: apps/ui
         run: npm run typecheck
 
+      - name: Lint UI
+        working-directory: apps/ui
+        run: npm run lint
+
       - name: Build UI
         working-directory: apps/ui
         run: npm run build

apps/ui/app/activity/page.tsx

@@ -0,0 +1,27 @@
+import { PageHeader } from "@/components/page-header"
+import { Card, CardContent } from "@/components/ui/card"
+import { Activity } from "lucide-react"
+
+export default function ActivityPage() {
+  return (
+    <>
+      <PageHeader
+        title="Activity"
+        description="See what's happening across your repositories."
+      />
+      <Card className="glow-border">
+        <CardContent>
+          <div className="flex flex-col items-center justify-center py-16 text-center">
+            <div className="flex size-12 items-center justify-center rounded-full bg-primary/10 mb-3">
+              <Activity className="size-5 text-primary" />
+            </div>
+            <p className="text-sm font-medium">Activity feed coming soon</p>
+            <p className="mt-1 text-xs text-muted-foreground">
+              Event timeline, commit digests, and org pulse will appear here.
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    </>
+  )
+}

apps/ui/app/automation/page.tsx

@@ -0,0 +1,27 @@
+import { PageHeader } from "@/components/page-header"
+import { Card, CardContent } from "@/components/ui/card"
+import { Zap } from "lucide-react"
+
+export default function AutomationPage() {
+  return (
+    <>
+      <PageHeader
+        title="Automation"
+        description="Manage workflows and automated actions."
+      />
+      <Card className="glow-border">
+        <CardContent>
+          <div className="flex flex-col items-center justify-center py-16 text-center">
+            <div className="flex size-12 items-center justify-center rounded-full bg-primary/10 mb-3">
+              <Zap className="size-5 text-primary" />
+            </div>
+            <p className="text-sm font-medium">Automation coming soon</p>
+            <p className="mt-1 text-xs text-muted-foreground">
+              Workflow triggers, guarded dispatches, and repo scaffolding will appear here.
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    </>
+  )
+}

apps/ui/app/collaborators/page.tsx

@@ -0,0 +1,27 @@
+import { PageHeader } from "@/components/page-header"
+import { Card, CardContent } from "@/components/ui/card"
+import { Users } from "lucide-react"
+
+export default function CollaboratorsPage() {
+  return (
+    <>
+      <PageHeader
+        title="Collaborators"
+        description="Manage your organization's team and invitations."
+      />
+      <Card className="glow-border">
+        <CardContent>
+          <div className="flex flex-col items-center justify-center py-16 text-center">
+            <div className="flex size-12 items-center justify-center rounded-full bg-primary/10 mb-3">
+              <Users className="size-5 text-primary" />
+            </div>
+            <p className="text-sm font-medium">Collaborators coming soon</p>
+            <p className="mt-1 text-xs text-muted-foreground">
+              Team roster, pending invites, and permission management will appear here.
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    </>
+  )
+}

apps/ui/app/globals.css

@@ -45,85 +45,116 @@
     --radius-2xl: calc(var(--radius) * 1.8);
     --radius-3xl: calc(var(--radius) * 2.2);
     --radius-4xl: calc(var(--radius) * 2.6);
+    --color-glow: var(--glow);
 }
 
 :root {
-    --background: oklch(1 0 0);
-    --foreground: oklch(0.145 0 0);
-    --card: oklch(1 0 0);
-    --card-foreground: oklch(0.145 0 0);
-    --popover: oklch(1 0 0);
-    --popover-foreground: oklch(0.145 0 0);
-    --primary: oklch(0.205 0 0);
-    --primary-foreground: oklch(0.985 0 0);
-    --secondary: oklch(0.97 0 0);
-    --secondary-foreground: oklch(0.205 0 0);
-    --muted: oklch(0.97 0 0);
-    --muted-foreground: oklch(0.556 0 0);
-    --accent: oklch(0.97 0 0);
-    --accent-foreground: oklch(0.205 0 0);
+    --background: oklch(0.98 0.005 230);
+    --foreground: oklch(0.15 0.02 250);
+    --card: oklch(0.96 0.005 230);
+    --card-foreground: oklch(0.15 0.02 250);
+    --popover: oklch(0.96 0.005 230);
+    --popover-foreground: oklch(0.15 0.02 250);
+    --primary: oklch(0.65 0.15 195);
+    --primary-foreground: oklch(0.98 0.005 230);
+    --secondary: oklch(0.92 0.01 240);
+    --secondary-foreground: oklch(0.2 0.02 250);
+    --muted: oklch(0.93 0.008 240);
+    --muted-foreground: oklch(0.45 0.02 250);
+    --accent: oklch(0.7 0.17 160);
+    --accent-foreground: oklch(0.15 0.02 250);
     --destructive: oklch(0.577 0.245 27.325);
-    --border: oklch(0.922 0 0);
-    --input: oklch(0.922 0 0);
-    --ring: oklch(0.708 0 0);
-    --chart-1: oklch(0.87 0 0);
-    --chart-2: oklch(0.556 0 0);
-    --chart-3: oklch(0.439 0 0);
-    --chart-4: oklch(0.371 0 0);
-    --chart-5: oklch(0.269 0 0);
+    --border: oklch(0.88 0.01 240);
+    --input: oklch(0.88 0.01 240);
+    --ring: oklch(0.65 0.15 195);
+    --chart-1: oklch(0.72 0.15 195);
+    --chart-2: oklch(0.7 0.17 160);
+    --chart-3: oklch(0.65 0.15 290);
+    --chart-4: oklch(0.75 0.15 85);
+    --chart-5: oklch(0.65 0.2 15);
     --radius: 0.625rem;
-    --sidebar: oklch(0.985 0 0);
-    --sidebar-foreground: oklch(0.145 0 0);
-    --sidebar-primary: oklch(0.205 0 0);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.97 0 0);
-    --sidebar-accent-foreground: oklch(0.205 0 0);
-    --sidebar-border: oklch(0.922 0 0);
-    --sidebar-ring: oklch(0.708 0 0);
+    --glow: oklch(0.65 0.15 195 / 0.15);
+    --sidebar: oklch(0.95 0.005 230);
+    --sidebar-foreground: oklch(0.15 0.02 250);
+    --sidebar-primary: oklch(0.65 0.15 195);
+    --sidebar-primary-foreground: oklch(0.98 0.005 230);
+    --sidebar-accent: oklch(0.92 0.01 240);
+    --sidebar-accent-foreground: oklch(0.2 0.02 250);
+    --sidebar-border: oklch(0.88 0.01 240);
+    --sidebar-ring: oklch(0.65 0.15 195);
 }
 
 .dark {
-    --background: oklch(0.145 0 0);
-    --foreground: oklch(0.985 0 0);
-    --card: oklch(0.205 0 0);
-    --card-foreground: oklch(0.985 0 0);
-    --popover: oklch(0.205 0 0);
-    --popover-foreground: oklch(0.985 0 0);
-    --primary: oklch(0.922 0 0);
-    --primary-foreground: oklch(0.205 0 0);
-    --secondary: oklch(0.269 0 0);
-    --secondary-foreground: oklch(0.985 0 0);
-    --muted: oklch(0.269 0 0);
-    --muted-foreground: oklch(0.708 0 0);
-    --accent: oklch(0.269 0 0);
-    --accent-foreground: oklch(0.985 0 0);
-    --destructive: oklch(0.704 0.191 22.216);
-    --border: oklch(1 0 0 / 10%);
-    --input: oklch(1 0 0 / 15%);
-    --ring: oklch(0.556 0 0);
-    --chart-1: oklch(0.87 0 0);
-    --chart-2: oklch(0.556 0 0);
-    --chart-3: oklch(0.439 0 0);
-    --chart-4: oklch(0.371 0 0);
-    --chart-5: oklch(0.269 0 0);
-    --sidebar: oklch(0.205 0 0);
-    --sidebar-foreground: oklch(0.985 0 0);
-    --sidebar-primary: oklch(0.488 0.243 264.376);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.269 0 0);
-    --sidebar-accent-foreground: oklch(0.985 0 0);
-    --sidebar-border: oklch(1 0 0 / 10%);
-    --sidebar-ring: oklch(0.556 0 0);
+    --background: oklch(0.14 0.02 260);
+    --foreground: oklch(0.93 0.01 240);
+    --card: oklch(0.18 0.02 260);
+    --card-foreground: oklch(0.93 0.01 240);
+    --popover: oklch(0.18 0.02 260);
+    --popover-foreground: oklch(0.93 0.01 240);
+    --primary: oklch(0.72 0.15 195);
+    --primary-foreground: oklch(0.12 0.02 260);
+    --secondary: oklch(0.22 0.02 260);
+    --secondary-foreground: oklch(0.88 0.01 240);
+    --muted: oklch(0.22 0.015 260);
+    --muted-foreground: oklch(0.6 0.02 250);
+    --accent: oklch(0.7 0.17 160);
+    --accent-foreground: oklch(0.12 0.02 260);
+    --destructive: oklch(0.65 0.22 25);
+    --border: oklch(1 0 0 / 8%);
+    --input: oklch(1 0 0 / 10%);
+    --ring: oklch(0.72 0.15 195);
+    --chart-1: oklch(0.72 0.15 195);
+    --chart-2: oklch(0.7 0.17 160);
+    --chart-3: oklch(0.65 0.15 290);
+    --chart-4: oklch(0.75 0.15 85);
+    --chart-5: oklch(0.65 0.2 15);
+    --glow: oklch(0.72 0.15 195 / 0.12);
+    --sidebar: oklch(0.12 0.02 260);
+    --sidebar-foreground: oklch(0.88 0.01 240);
+    --sidebar-primary: oklch(0.72 0.15 195);
+    --sidebar-primary-foreground: oklch(0.12 0.02 260);
+    --sidebar-accent: oklch(0.2 0.02 260);
+    --sidebar-accent-foreground: oklch(0.88 0.01 240);
+    --sidebar-border: oklch(1 0 0 / 8%);
+    --sidebar-ring: oklch(0.72 0.15 195);
 }
 
 @layer base {
   * {
     @apply border-border outline-ring/50;
-    }
+  }
   body {
     @apply bg-background text-foreground;
-    }
+  }
   html {
     @apply font-sans;
-    }
-}
+  }
+}
+
+@layer utilities {
+  .glass {
+    @apply backdrop-blur-xl bg-card/60 border border-border;
+  }
+  .glow-border {
+    box-shadow: 0 0 0 1px var(--border), 0 0 12px -2px var(--glow);
+  }
+  .glow-sm {
+    box-shadow: 0 0 8px -2px var(--glow);
+  }
+  .text-gradient {
+    @apply bg-clip-text text-transparent;
+    background-image: linear-gradient(135deg, oklch(0.72 0.15 195), oklch(0.7 0.17 160));
+  }
+  .bg-grid {
+    background-image:
+      linear-gradient(oklch(1 0 0 / 3%) 1px, transparent 1px),
+      linear-gradient(90deg, oklch(1 0 0 / 3%) 1px, transparent 1px);
+    background-size: 40px 40px;
+  }
+  .dark .bg-grid {
+    background-image:
+      linear-gradient(oklch(1 0 0 / 4%) 1px, transparent 1px),
+      linear-gradient(90deg, oklch(1 0 0 / 4%) 1px, transparent 1px);
+    background-size: 40px 40px;
+  }
+}

apps/ui/app/layout.tsx

@@ -15,16 +15,16 @@ export const metadata = {
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en" className={cn("font-sans", geist.variable)}>
-      <body className="min-h-screen">
+    <html lang="en" className={cn("dark font-sans", geist.variable)}>
+      <body className="min-h-screen bg-grid">
         <TooltipProvider>
           <SidebarProvider>
             <AppSidebar />
             <SidebarInset>
-              <header className="flex h-14 items-center gap-2 border-b px-6">
+              <header className="flex h-14 items-center gap-2 border-b border-border/50 px-6 backdrop-blur-sm bg-background/80">
                 <SidebarTrigger className="-ml-2" />
                 <Separator orientation="vertical" className="h-4" />
-                <span className="text-sm font-medium text-muted-foreground">clevis</span>
+                <span className="text-sm font-medium text-primary">clevis</span>
               </header>
               <main className="flex-1 p-6">
                 {children}