@mndrk/agx 2.0.22 → 2.0.24

package/cloud-runtime/standalone/app/globals.css

@@ -1,81 +1,82 @@
 @import "tailwindcss";
 
 :root {
+  color-scheme: light;
   /* Core palette - Clean, professional */
-  --background: #FAFAFA;
-  --foreground: #171717;
+  --background: #ffffff;
+  --foreground: #0f172a; /* slate-900 */
 
   /* Primary - Muted, professional blue-gray */
-  --primary: #2563EB;
-  --primary-foreground: #FFFFFF;
-  --primary-hover: #1D4ED8;
-  --primary-muted: rgba(37, 99, 235, 0.08);
+  --primary: #6366f1; /* indigo-500 */
+  --primary-foreground: #ffffff;
+  --primary-hover: #4f46e5; /* indigo-600 */
+  --primary-muted: rgba(99, 102, 241, 0.1);
 
   /* Secondary - Neutral */
-  --secondary: #FFFFFF;
-  --secondary-foreground: #525252;
-  --secondary-hover: #F5F5F5;
-  --secondary-muted: #FAFAFA;
+  --secondary: #f8fafc; /* slate-50 */
+  --secondary-foreground: #334155; /* slate-700 */
+  --secondary-hover: #f1f5f9; /* slate-100 */
+  --secondary-muted: #f8fafc;
 
   /* Accent - Subtle violet */
-  --accent: #7C3AED;
-  --accent-foreground: #FFFFFF;
-  --accent-hover: #6D28D9;
-  --accent-muted: rgba(124, 58, 237, 0.08);
+  --accent: #6366f1;
+  --accent-foreground: #ffffff;
+  --accent-hover: #4f46e5;
+  --accent-muted: rgba(99, 102, 241, 0.1);
 
   /* UI Elements */
-  --card-bg: #FFFFFF;
-  --card-border: #E5E5E5;
-  --card-hover-border: #D4D4D4;
+  --card-bg: #ffffff;
+  --card-border: rgba(0, 0, 0, 0.05); /* black/5 */
+  --card-hover-border: rgba(0, 0, 0, 0.1); /* black/10 */
   
-  --column-bg: #F5F5F5;
-  --column-header-bg: #F5F5F5;
+  --column-bg: #f8fafc;
+  --column-header-bg: #f8fafc;
 
   /* Item hover for task lists */
-  --item-hover-bg: #F5F5F5;
+  --item-hover-bg: rgba(0, 0, 0, 0.05); /* black/5 */
 
   /* Muted */
-  --muted: #F5F5F5;
-  --muted-foreground: #737373;
+  --muted: rgba(0, 0, 0, 0.05); /* black/5 */
+  --muted-foreground: #64748b; /* slate-500 */
 
   /* Status Colors - Functional, not flashy */
-  --status-queued: #737373;
-  --status-queued-bg: #F5F5F5;
-  --status-queued-border: #E5E5E5;
+  --status-queued: #64748b;
+  --status-queued-bg: #f8fafc;
+  --status-queued-border: rgba(0, 0, 0, 0.05);
 
-  --status-in-progress: #2563EB;
-  --status-in-progress-bg: #EFF6FF;
-  --status-in-progress-border: #BFDBFE;
+  --status-in-progress: #6366f1; /* indigo-500 */
+  --status-in-progress-bg: rgba(99, 102, 241, 0.1);
+  --status-in-progress-border: rgba(99, 102, 241, 0.2);
 
-  --status-blocked: #DC2626;
-  --status-blocked-bg: #FEF2F2;
-  --status-blocked-border: #FECACA;
+  --status-blocked: #f59e0b; /* amber-500 */
+  --status-blocked-bg: rgba(245, 158, 11, 0.1);
+  --status-blocked-border: rgba(245, 158, 11, 0.2);
 
-  --status-completed: #16A34A;
-  --status-completed-bg: #F0FDF4;
-  --status-completed-border: #BBF7D0;
+  --status-completed: #10b981; /* emerald-500 */
+  --status-completed-bg: rgba(16, 185, 129, 0.05);
+  --status-completed-border: rgba(16, 185, 129, 0.1);
 
-  --status-failed: #DC2626;
-  --status-failed-bg: #FEF2F2;
-  --status-failed-border: #FECACA;
+  --status-failed: #ef4444; /* red-500 */
+  --status-failed-bg: rgba(239, 68, 68, 0.1);
+  --status-failed-border: rgba(239, 68, 68, 0.2);
 
   /* Semantic colors */
-  --success: #16A34A;
-  --success-muted: #F0FDF4;
-  --warning: #CA8A04;
-  --warning-muted: #FEFCE8;
-  --info: #0284C7;
-  --info-muted: #F0F9FF;
+  --success: #10b981;
+  --success-muted: rgba(16, 185, 129, 0.05);
+  --warning: #f59e0b;
+  --warning-muted: rgba(245, 158, 11, 0.1);
+  --info: #3b82f6; /* blue-500 */
+  --info-muted: rgba(59, 130, 246, 0.1);
 
-  --destructive: #DC2626;
-  --destructive-muted: #FEF2F2;
-  --destructive-foreground: #FFFFFF;
+  --destructive: #ef4444;
+  --destructive-muted: rgba(239, 68, 68, 0.1);
+  --destructive-foreground: #ffffff;
 
   /* Borders & Inputs */
-  --border: #E5E5E5;
-  --input: #FFFFFF;
-  --input-focus: #2563EB;
-  --ring: rgba(37, 99, 235, 0.3);
+  --border: rgba(0, 0, 0, 0.05); /* black/5 */
+  --input: rgba(0, 0, 0, 0.05); /* bg-black/5 */
+  --input-focus: #ffffff;
+  --ring: rgba(99, 102, 241, 0.3); /* indigo-500/30 */
 
   /* Shadows - Subtle */
   --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
@@ -95,6 +96,86 @@
   --radius-md: 0.5rem;
   --radius-lg: 0.625rem;
   --radius-xl: 0.75rem;
+
+  /* App shell */
+  --app-shell-bg: #fbfbfb;
+  --app-shell-pane: #f3f3f3;
+  --app-shell-surface: #ffffff;
+  --app-shell-elevated: #ffffff;
+  --app-shell-subtle: #f8fafc;
+  --app-shell-border: rgba(0, 0, 0, 0.05); /* black/5 */
+  --app-shell-border-strong: rgba(0, 0, 0, 0.1); /* black/10 */
+  --app-shell-muted: #64748b; /* slate-500 */
+  --app-shell-soft-text: #94a3b8; /* slate-400 */
+}
+
+.dark {
+  color-scheme: dark;
+  /* VS Code Dark theme palette */
+  --background: #1e1e1e;
+  --foreground: #cccccc;
+  --primary: #569cd6; /* VS Code blue */
+  --primary-foreground: #ffffff;
+  --primary-hover: #6cb6ff;
+  --primary-muted: rgba(86, 156, 214, 0.12);
+  --secondary: #2d2d2d;
+  --secondary-foreground: #cccccc;
+  --secondary-hover: #333333;
+  --secondary-muted: #252526;
+  --accent: #569cd6;
+  --accent-foreground: #ffffff;
+  --accent-hover: #6cb6ff;
+  --accent-muted: rgba(86, 156, 214, 0.12);
+  --card-bg: #252526;
+  --card-border: #3c3c3c;
+  --card-hover-border: #4f4f4f;
+  --column-bg: #1e1e1e;
+  --column-header-bg: #252526;
+  --item-hover-bg: #2a2d2e;
+  --muted: #2a2d2e;
+  --muted-foreground: #858585;
+  --status-queued: #858585;
+  --status-queued-bg: #2a2d2e;
+  --status-queued-border: #3c3c3c;
+  --status-in-progress: #569cd6;
+  --status-in-progress-bg: rgba(86, 156, 214, 0.12);
+  --status-in-progress-border: rgba(86, 156, 214, 0.25);
+  --status-blocked: #ce9178; /* VS Code orange */
+  --status-blocked-bg: rgba(206, 145, 120, 0.12);
+  --status-blocked-border: rgba(206, 145, 120, 0.25);
+  --status-completed: #6a9955; /* VS Code green */
+  --status-completed-bg: rgba(106, 153, 85, 0.12);
+  --status-completed-border: rgba(106, 153, 85, 0.25);
+  --status-failed: #f44747; /* VS Code red */
+  --status-failed-bg: rgba(244, 71, 71, 0.12);
+  --status-failed-border: rgba(244, 71, 71, 0.25);
+  --success: #6a9955;
+  --success-muted: rgba(106, 153, 85, 0.12);
+  --warning: #ce9178;
+  --warning-muted: rgba(206, 145, 120, 0.12);
+  --info: #569cd6;
+  --info-muted: rgba(86, 156, 214, 0.12);
+  --destructive: #f44747;
+  --destructive-muted: rgba(244, 71, 71, 0.12);
+  --destructive-foreground: #ffffff;
+  --border: #3c3c3c;
+  --input: #3c3c3c;
+  --input-focus: #4f4f4f;
+  --ring: rgba(86, 156, 214, 0.5);
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 1px 2px -1px rgba(0, 0, 0, 0.5);
+  --shadow-md: 0 6px 12px -2px rgba(0, 0, 0, 0.5), 0 3px 6px -3px rgba(0, 0, 0, 0.5);
+  --shadow-lg: 0 16px 24px -8px rgba(0, 0, 0, 0.6), 0 8px 12px -8px rgba(0, 0, 0, 0.5);
+  --shadow-xl: 0 24px 40px -12px rgba(0, 0, 0, 0.7), 0 10px 16px -10px rgba(0, 0, 0, 0.6);
+  --app-shell-bg: #1e1e1e;
+  --app-shell-pane: #252526;
+  --app-shell-surface: #252526;
+  --app-shell-elevated: #2d2d2d;
+  --app-shell-subtle: #2a2d2e;
+  --app-shell-border: #3c3c3c;
+  --app-shell-border-strong: #4f4f4f;
+  --app-shell-muted: #858585;
+  --app-shell-soft-text: #6e6e6e;
 }
 
 body {
@@ -103,14 +184,15 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
 }
 
 /* ========================================
    Scrollbar Styling
    ======================================== */
 ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+  width: 10px;
+  height: 10px;
 }
 
 ::-webkit-scrollbar-track {
@@ -118,26 +200,50 @@ body {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: var(--card-border);
-  border-radius: 4px;
+  background: rgba(15, 23, 42, 0.14);
+  border-radius: 999px;
+  border: 3px solid transparent;
+  background-clip: content-box;
   transition: background var(--transition-fast);
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: var(--muted-foreground);
+  background: rgba(15, 23, 42, 0.24);
+  border: 3px solid transparent;
+  background-clip: content-box;
 }
 
 .scrollbar-thin::-webkit-scrollbar {
-  width: 4px;
+  width: 8px;
 }
 
 .scrollbar-thin::-webkit-scrollbar-thumb {
-  background: var(--card-border);
-  border-radius: 2px;
+  background: rgba(15, 23, 42, 0.14);
+  border-radius: 999px;
+  border: 2px solid transparent;
+  background-clip: content-box;
 }
 
 .scrollbar-thin::-webkit-scrollbar-thumb:hover {
-  background: var(--muted-foreground);
+  background: rgba(15, 23, 42, 0.24);
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+
+.dark ::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.dark ::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.dark .scrollbar-thin::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.dark .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.2);
 }
 
 .scrollbar-hide {

package/cloud-runtime/standalone/app/layout.tsx

@@ -20,6 +20,20 @@ export const metadata: Metadata = {
   description: "Agent task orchestration and group chat",
 };
 
+const themeBootstrapScript = `
+(() => {
+  try {
+    const storedTheme = localStorage.getItem("agx-theme");
+    const theme = storedTheme === "dark" || storedTheme === "light"
+      ? storedTheme
+      : (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+    const root = document.documentElement;
+    root.classList.toggle("dark", theme === "dark");
+    root.style.colorScheme = theme;
+  } catch {}
+})();
+`;
+
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -27,6 +41,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: themeBootstrapScript }} />
+      </head>
       <body className={`${geistSans.variable} ${geistMono.variable} antialiased h-screen overflow-hidden bg-[var(--background)] text-[var(--foreground)] selection:bg-[var(--primary)] selection:text-[var(--primary-foreground)]`}>
         <StartupGuard>{children}</StartupGuard>
         <GoogleAnalytics />

package/cloud-runtime/standalone/app/projects/[slug]/layout.tsx

@@ -148,7 +148,7 @@ export default function ProjectLayout({
   params: Promise<{ slug: string }>;
 }) {
   return (
-    <Suspense fallback={<div className="flex h-full items-center justify-center text-sm text-slate-500">Loading project…</div>}>
+    <Suspense fallback={<div className="flex h-full items-center justify-center text-sm text-[var(--muted-foreground)]">Loading project…</div>}>
       <ProjectLayoutContent params={params}>{children}</ProjectLayoutContent>
     </Suspense>
   );