Add simple dark mode

components/frontend/package.json

@@ -29,8 +29,9 @@
     "highlight.js": "^11.11.1",
     "lucide-react": "^0.542.0",
     "next": "15.5.2",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
+    "next-themes": "^0.4.6",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "react-hook-form": "^7.62.0",
     "react-markdown": "^10.1.0",
     "react-resizable-panels": "^3.0.6",

components/frontend/src/app/globals.css

@@ -1,6 +1,6 @@
 @import "tailwindcss";
 @import "tw-animate-css";
-@import "highlight.js/styles/github-dark.css";
+@import "../styles/syntax-highlighting.css";
 
 @custom-variant dark (&:is(.dark *));
 
@@ -38,6 +38,26 @@
   --color-popover: var(--popover);
   --color-card-foreground: var(--card-foreground);
   --color-card: var(--card);
+  --color-status-success: var(--status-success);
+  --color-status-success-foreground: var(--status-success-foreground);
+  --color-status-success-border: var(--status-success-border);
+  --color-status-error: var(--status-error);
+  --color-status-error-foreground: var(--status-error-foreground);
+  --color-status-error-border: var(--status-error-border);
+  --color-status-warning: var(--status-warning);
+  --color-status-warning-foreground: var(--status-warning-foreground);
+  --color-status-warning-border: var(--status-warning-border);
+  --color-status-info: var(--status-info);
+  --color-status-info-foreground: var(--status-info-foreground);
+  --color-status-info-border: var(--status-info-border);
+  --color-link: var(--link);
+  --color-link-hover: var(--link-hover);
+  --color-role-view: var(--role-view);
+  --color-role-view-foreground: var(--role-view-foreground);
+  --color-role-edit: var(--role-edit);
+  --color-role-edit-foreground: var(--role-edit-foreground);
+  --color-role-admin: var(--role-admin);
+  --color-role-admin-foreground: var(--role-admin-foreground);
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
@@ -77,6 +97,32 @@
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
+
+  /* Status badge semantic colors - Light theme (pastel backgrounds) */
+  --status-success: oklch(0.95 0.05 145);
+  --status-success-foreground: oklch(0.35 0.15 145);
+  --status-success-border: oklch(0.85 0.08 145);
+  --status-error: oklch(0.95 0.05 27);
+  --status-error-foreground: oklch(0.45 0.2 27);
+  --status-error-border: oklch(0.85 0.08 27);
+  --status-warning: oklch(0.95 0.1 85);
+  --status-warning-foreground: oklch(0.4 0.15 85);
+  --status-warning-border: oklch(0.85 0.12 85);
+  --status-info: oklch(0.95 0.05 240);
+  --status-info-foreground: oklch(0.45 0.15 240);
+  --status-info-border: oklch(0.85 0.08 240);
+
+  /* Semantic link colors - Light theme */
+  --link: oklch(0.45 0.15 240);           /* Blue link color */
+  --link-hover: oklch(0.35 0.18 240);     /* Darker blue on hover */
+
+  /* Role badge colors - Light theme (pastel backgrounds) */
+  --role-view: oklch(0.95 0.05 240);           /* Blue for view role */
+  --role-view-foreground: oklch(0.45 0.15 240);
+  --role-edit: oklch(0.95 0.05 145);           /* Green for edit role */
+  --role-edit-foreground: oklch(0.35 0.15 145);
+  --role-admin: oklch(0.95 0.1 290);           /* Purple for admin role */
+  --role-admin-foreground: oklch(0.4 0.15 290);
 }
 
 .dark {
@@ -111,6 +157,32 @@
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.556 0 0);
+
+  /* Status badge semantic colors - Dark theme (solid backgrounds with white text) */
+  --status-success: oklch(0.35 0.15 145);
+  --status-success-foreground: oklch(0.985 0 0);
+  --status-success-border: oklch(0.35 0.15 145);
+  --status-error: oklch(0.45 0.2 27);
+  --status-error-foreground: oklch(0.985 0 0);
+  --status-error-border: oklch(0.45 0.2 27);
+  --status-warning: oklch(0.5 0.15 85);
+  --status-warning-foreground: oklch(0.985 0 0);
+  --status-warning-border: oklch(0.5 0.15 85);
+  --status-info: oklch(0.5 0.15 240);
+  --status-info-foreground: oklch(0.985 0 0);
+  --status-info-border: oklch(0.5 0.15 240);
+
+  /* Semantic link colors - Dark theme */
+  --link: oklch(0.65 0.15 240);           /* Lighter blue for dark mode */
+  --link-hover: oklch(0.75 0.12 240);     /* Even lighter on hover */
+
+  /* Role badge colors - Dark theme (solid backgrounds with white text) */
+  --role-view: oklch(0.5 0.15 240);           /* Solid blue for view role */
+  --role-view-foreground: oklch(0.985 0 0);
+  --role-edit: oklch(0.35 0.15 145);          /* Solid green for edit role */
+  --role-edit-foreground: oklch(0.985 0 0);
+  --role-admin: oklch(0.5 0.15 290);          /* Solid purple for admin role */
+  --role-admin-foreground: oklch(0.985 0 0);
 }
 
 @layer base {
@@ -122,8 +194,47 @@
   }
 }
 
-/* Thin scrollbar styling */
+/* Thin scrollbar styling - Cross-browser support */
 .scrollbar-thin {
+  /* Firefox */
   scrollbar-width: thin;
-  scrollbar-color: #d1d5db #f3f4f6;
+  scrollbar-color: hsl(var(--muted-foreground)) hsl(var(--muted));
+}
+
+.dark .scrollbar-thin {
+  /* Firefox dark mode */
+  scrollbar-color: hsl(var(--muted-foreground)) hsl(var(--background));
+}
+
+/* WebKit browsers (Chrome, Safari, Edge) */
+.scrollbar-thin::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.scrollbar-thin::-webkit-scrollbar-track {
+  background: hsl(var(--muted));
+  border-radius: 4px;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  background: hsl(var(--muted-foreground));
+  border-radius: 4px;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--foreground));
+}
+
+/* WebKit dark mode */
+.dark .scrollbar-thin::-webkit-scrollbar-track {
+  background: hsl(var(--background));
+}
+
+.dark .scrollbar-thin::-webkit-scrollbar-thumb {
+  background: hsl(var(--muted-foreground));
+}
+
+.dark .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--foreground));
 }

components/frontend/src/app/integrations/IntegrationsClient.tsx

@@ -8,9 +8,9 @@ type Props = { appSlug?: string }
 
 export default function IntegrationsClient({ appSlug }: Props) {
   return (
-    <div className="min-h-screen bg-[#f8fafc]">
+    <div className="min-h-screen bg-background">
       {/* Sticky header */}
-      <div className="sticky top-0 z-20 bg-white border-b">
+      <div className="sticky top-0 z-20 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80 border-b">
         <div className="container mx-auto px-6 py-6">
           <PageHeader
             title="Integrations"

components/frontend/src/app/integrations/github/setup/page.tsx

@@ -41,7 +41,7 @@ export default function GitHubSetupPage() {
       {error ? (
         <Alert variant="destructive"><AlertDescription>{error}</AlertDescription></Alert>
       ) : (
-        <div className="text-sm text-gray-700">{message}</div>
+        <div className="text-sm text-foreground/80">{message}</div>
       )}
       <div className="mt-4">
         <Button variant="ghost" onClick={() => window.location.replace('/integrations')}>Back to Integrations</Button>

components/frontend/src/app/layout.tsx

@@ -3,6 +3,8 @@ import { Inter } from "next/font/google";
 import "./globals.css";
 import { Navigation } from "@/components/navigation";
 import { QueryProvider } from "@/components/providers/query-provider";
+import { ThemeProvider } from "@/components/providers/theme-provider";
+import { SyntaxThemeProvider } from "@/components/providers/syntax-theme-provider";
 import { Toaster } from "@/components/ui/toaster";
 import { env } from "@/lib/env";
 
@@ -14,6 +16,8 @@ export const metadata: Metadata = {
     "ACP is an AI-native agentic-powered enterprise software development platform",
 };
 
+// Force rebuild timestamp: 2025-11-20T16:38:00
+
 export default function RootLayout({
   children,
 }: {
@@ -22,16 +26,27 @@ export default function RootLayout({
   const wsBase = env.BACKEND_URL.replace(/^http:/, 'ws:').replace(/^https:/, 'wss:')
   const feedbackUrl = env.FEEDBACK_URL
   return (
+    // suppressHydrationWarning is required for next-themes to prevent hydration mismatch
+    // between server-rendered content and client-side theme application
     <html lang="en" suppressHydrationWarning>
       <head>
         <meta name="backend-ws-base" content={wsBase} />
       </head>
+      {/* suppressHydrationWarning is needed here as well since ThemeProvider modifies the class attribute */}
       <body className={`${inter.className} min-h-screen flex flex-col`} suppressHydrationWarning>
-        <QueryProvider>
-          <Navigation feedbackUrl={feedbackUrl} />
-          <main className="flex-1 bg-background overflow-auto">{children}</main>
-          <Toaster />
-        </QueryProvider>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <SyntaxThemeProvider />
+          <QueryProvider>
+            <Navigation feedbackUrl={feedbackUrl} />
+            <main className="flex-1 bg-background overflow-auto">{children}</main>
+            <Toaster />
+          </QueryProvider>
+        </ThemeProvider>
       </body>
     </html>
   );

components/frontend/src/app/projects/[name]/keys/page.tsx

@@ -3,7 +3,7 @@
 import { useCallback, useState } from 'react';
 import { useParams } from 'next/navigation';
 import { formatDistanceToNow } from 'date-fns';
-import { Copy, KeyRound, Loader2, Plus, RefreshCw, Trash2, Eye, Edit, Shield } from 'lucide-react';
+import { Copy, KeyRound, Loader2, Plus, RefreshCw, Trash2 } from 'lucide-react';
 
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
@@ -21,27 +21,7 @@ import { Breadcrumbs } from '@/components/breadcrumbs';
 import { useKeys, useCreateKey, useDeleteKey } from '@/services/queries';
 import { successToast, errorToast } from '@/hooks/use-toast';
 import type { CreateKeyRequest } from '@/services/api/keys';
-
-const ROLE_DEFINITIONS = {
-  view: {
-    label: 'View',
-    description: 'Can see sessions and duplicate to their own project',
-    color: 'bg-blue-100 text-blue-800',
-    icon: Eye,
-  },
-  edit: {
-    label: 'Edit',
-    description: 'Can create sessions in the project',
-    color: 'bg-green-100 text-green-800',
-    icon: Edit,
-  },
-  admin: {
-    label: 'Admin',
-    description: 'Full project management access',
-    color: 'bg-purple-100 text-purple-800',
-    icon: Shield,
-  },
-} as const;
+import { ROLE_DEFINITIONS } from '@/lib/role-colors';
 
 export default function ProjectKeysPage() {
   const params = useParams();

components/frontend/src/app/projects/[name]/page.tsx

@@ -56,9 +56,9 @@ export default function ProjectDetailsPage() {
   }
 
   return (
-    <div className="min-h-screen bg-[#f8fafc]">
+    <div className="min-h-screen bg-background">
       {/* Sticky header */}
-      <div className="sticky top-0 z-20 bg-white border-b">
+      <div className="sticky top-0 z-20 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80 border-b">
         <div className="container mx-auto px-6 py-4">
           <Breadcrumbs
             items={[

components/frontend/src/app/projects/[name]/sessions/[sessionName]/components/accordions/artifacts-accordion.tsx

@@ -34,7 +34,7 @@ export function ArtifactsAccordion({
   onNavigateBack,
 }: ArtifactsAccordionProps) {
   return (
-    <AccordionItem value="artifacts" className="border rounded-lg px-3 bg-white">
+    <AccordionItem value="artifacts" className="border rounded-lg px-3 bg-card">
       <AccordionTrigger className="text-base font-semibold hover:no-underline py-3">
         <div className="flex items-center gap-2">
           <NotepadText className="h-4 w-4" />

components/frontend/src/app/projects/[name]/sessions/[sessionName]/components/accordions/repositories-accordion.tsx

@@ -38,7 +38,7 @@ export function RepositoriesAccordion({
   };
 
   return (
-    <AccordionItem value="context" className="border rounded-lg px-3 bg-white">
+    <AccordionItem value="context" className="border rounded-lg px-3 bg-card">
       <AccordionTrigger className="text-base font-semibold hover:no-underline py-3">
         <div className="flex items-center gap-2">
           <Link className="h-4 w-4" />
@@ -59,8 +59,8 @@ export function RepositoriesAccordion({
           {/* Repository List */}
           {repositories.length === 0 ? (
             <div className="text-center py-6">
-              <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-gray-100 mb-2">
-                <Link className="h-5 w-5 text-gray-400" />
+              <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-muted mb-2">
+                <Link className="h-5 w-5 text-muted-foreground/60" />
               </div>
               <p className="text-sm text-muted-foreground mb-3">No context added yet</p>
               <Button size="sm" variant="outline" onClick={onAddRepository}>

components/frontend/src/app/projects/[name]/sessions/[sessionName]/components/accordions/workflows-accordion.tsx

@@ -54,13 +54,13 @@ export function WorkflowsAccordion({
   const isSessionStopped = sessionPhase === 'Stopped' || sessionPhase === 'Error' || sessionPhase === 'Completed';
 
   return (
-    <AccordionItem value="workflows" className="border rounded-lg px-3 bg-white">
+    <AccordionItem value="workflows" className="border rounded-lg px-3 bg-card">
       <AccordionTrigger className="text-base font-semibold hover:no-underline py-3">
         <div className="flex items-center gap-2">
           <Workflow className="h-4 w-4" />
           <span>Workflows</span>
           {activeWorkflow && !isExpanded && (
-            <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
+            <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200 dark:bg-green-950/50 dark:text-green-300 dark:border-green-800">
               {ootbWorkflows.find(w => w.id === activeWorkflow)?.name || "Custom Workflow"}
             </Badge>
           )}
@@ -296,7 +296,7 @@ export function WorkflowsAccordion({
                                     <Popover>
                                       <PopoverTrigger asChild>
                                         <button
-                                          className="p-0.5 hover:bg-gray-100 rounded flex-shrink-0"
+                                          className="p-0.5 hover:bg-muted rounded flex-shrink-0"
                                           onClick={(e) => {
                                             e.preventDefault();
                                             e.stopPropagation();