codex-linux 1.0.0 → 1.0.2

package/src/renderer/components/ui/Button.tsx

@@ -1,31 +1,29 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { Loader2 } from 'lucide-react';
-import { cn } from '@/lib/utils';
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-[var(--radius-sm)] font-medium transition-all duration-[180ms] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--teal-400)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-void)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer border-none',
   {
     variants: {
       variant: {
-        default: 'bg-neutral-900 text-white hover:bg-neutral-800 active:scale-[0.98]',
-        secondary: 'bg-neutral-100 text-neutral-900 hover:bg-neutral-200 active:scale-[0.98]',
-        outline: 'border border-neutral-200 bg-transparent hover:bg-neutral-50 hover:border-neutral-300',
-        ghost: 'hover:bg-neutral-100 hover:text-neutral-900',
-        link: 'text-neutral-900 underline-offset-4 hover:underline',
-        subtle: 'bg-neutral-50 text-neutral-700 hover:bg-neutral-100',
-        danger: 'bg-red-50 text-red-600 hover:bg-red-100',
+        primary: 'bg-[var(--teal-500)] text-[var(--bg-void)] hover:bg-[var(--teal-400)] active:scale-[0.98] font-medium',
+        secondary: 'bg-transparent text-[var(--teal-400)] border border-[var(--border-accent)] hover:bg-[rgba(0,200,168,0.06)] active:scale-[0.98]',
+        ghost: 'bg-transparent text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)] active:scale-[0.98]',
+        danger: 'bg-[rgba(232,90,106,0.1)] text-[var(--error)] border border-[rgba(232,90,106,0.2)] hover:bg-[rgba(232,90,106,0.15)]',
+        outline: 'bg-transparent text-[var(--text-secondary)] border border-[var(--border-default)] hover:border-[var(--border-accent)] hover:text-[var(--teal-400)]',
+        icon: 'bg-[var(--bg-elevated)] text-[var(--text-secondary)] border border-[var(--border-subtle)] hover:bg-[var(--bg-hover)] hover:text-[var(--teal-400)]',
       },
       size: {
-        default: 'h-10 px-4 py-2',
-        sm: 'h-8 px-3 text-xs',
-        lg: 'h-12 px-6',
-        icon: 'h-10 w-10',
-        'icon-sm': 'h-8 w-8',
+        default: 'h-10 px-4.5 py-2 text-[13px]',
+        sm: 'h-8 px-3 text-[11px] rounded-[var(--radius-sm)]',
+        lg: 'h-12 px-6 text-[14px]',
+        icon: 'h-10 w-10 p-2',
+        'icon-sm': 'h-8 w-8 p-2',
       },
     },
     defaultVariants: {
-      variant: 'default',
+      variant: 'primary',
       size: 'default',
     },
   }
@@ -46,7 +44,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, loading, children, disabled, ariaLabel, ariaDescribedBy, ariaExpanded, ariaPressed, ...props }, ref) => {
     return (
       <button
-        className={cn(buttonVariants({ variant, size, className }))}
+        className={buttonVariants({ variant, size, className })}
         ref={ref}
         disabled={disabled || loading}
         aria-label={ariaLabel}
@@ -56,7 +54,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         {...props}
       >
         {loading && (
-          <Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
+          <Loader2 className="w-4 h-4 animate-spin" aria-hidden="true" />
         )}
         {children}
       </button>
@@ -65,4 +63,4 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 );
 Button.displayName = 'Button';
 
-export { Button, buttonVariants };
+export { Button, buttonVariants };

package/src/renderer/components/ui/Card.tsx

@@ -1,22 +1,21 @@
 import React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
 
 const cardVariants = cva(
-  'rounded-xl bg-white border border-neutral-200 shadow-sm transition-all duration-200',
+  'rounded-[var(--radius-lg)] bg-[var(--bg-card)] border transition-all duration-[200ms]',
   {
     variants: {
       variant: {
-        default: 'hover:shadow-md hover:border-neutral-300',
-        ghost: 'border-transparent shadow-none hover:bg-neutral-50',
-        elevated: 'shadow-md hover:shadow-lg hover:-translate-y-0.5',
-        interactive: 'cursor-pointer hover:shadow-md hover:border-neutral-300 active:scale-[0.99]',
+        default: 'border-[var(--border-subtle)] hover:border-[var(--border-accent)] hover:translate-y-[-2px]',
+        ghost: 'border-transparent shadow-none hover:bg-[var(--bg-hover)]',
+        elevated: 'border-[var(--border-subtle)] shadow-[var(--shadow-md)] hover:shadow-[var(--shadow-lg)] hover:translate-y-[-2px]',
+        interactive: 'border-[var(--border-subtle)] cursor-pointer hover:border-[var(--border-accent)] hover:translate-y-[-2px] active:scale-[0.99]',
       },
       padding: {
         none: '',
         sm: 'p-4',
-        default: 'p-6',
-        lg: 'p-8',
+        default: 'p-5',
+        lg: 'p-7',
       },
     },
     defaultVariants: {
@@ -35,7 +34,7 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(
     return (
       <div
         ref={ref}
-        className={cn(cardVariants({ variant, padding, className }))}
+        className={cardVariants({ variant, padding, className })}
         {...props}
       />
     );
@@ -49,7 +48,7 @@ const CardHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn('flex flex-col space-y-1.5 pb-4', className)}
+    className={`flex flex-col space-y-1.5 pb-4 ${className || ''}`}
     {...props}
   />
 ));
@@ -61,7 +60,7 @@ const CardTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <h3
     ref={ref}
-    className={cn('font-semibold leading-none tracking-tight text-neutral-900', className)}
+    className={`font-medium leading-none tracking-tight text-[var(--text-primary)] text-[13px] ${className || ''}`}
     {...props}
   />
 ));
@@ -73,7 +72,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn('text-sm text-neutral-500', className)}
+    className={`text-[11px] text-[var(--text-muted)] ${className || ''}`}
     {...props}
   />
 ));
@@ -83,7 +82,7 @@ const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('', className)} {...props} />
+  <div ref={ref} className={className || ''} {...props} />
 ));
 CardContent.displayName = 'CardContent';
 
@@ -93,10 +92,10 @@ const CardFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn('flex items-center pt-4 mt-4 border-t border-neutral-100', className)}
+    className={`flex items-center pt-4 mt-4 border-t border-[var(--border-faint)] ${className || ''}`}
     {...props}
   />
 ));
 CardFooter.displayName = 'CardFooter';
 
-export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };

package/src/renderer/components/ui/Input.tsx

@@ -1,38 +1,37 @@
 import React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
 
 const inputVariants = cva(
-  'flex w-full rounded-lg border border-neutral-200 bg-transparent px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-neutral-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all duration-200',
+  'flex w-full rounded-[var(--radius-md)] border bg-[var(--bg-elevated)] px-3.5 py-2.5 text-[13px] font-[var(--font-body)] text-[var(--text-primary)] placeholder:text-[var(--text-disabled)] focus-visible:outline-none focus-visible:border-[var(--teal-500)] focus-visible:shadow-[0_0_0_3px_rgba(0,158,136,0.15)] disabled:cursor-not-allowed disabled:opacity-50 transition-all duration-[150ms]',
   {
     variants: {
       variant: {
-        default: 'focus:border-neutral-400',
-        error: 'border-red-300 focus:border-red-500 focus:ring-red-200',
-        success: 'border-green-300 focus:border-green-500 focus:ring-green-200',
+        default: 'border-[var(--border-subtle)]',
+        error: 'border-[rgba(232,90,106,0.3)] focus:border-[var(--error)] focus-visible:shadow-[0_0_0_3px_rgba(232,90,106,0.15)]',
+        success: 'border-[rgba(60,200,120,0.3)] focus:border-[var(--success)] focus-visible:shadow-[0_0_0_3px_rgba(60,200,120,0.15)]',
       },
-      size: {
+      inputSize: {
         default: 'h-10',
-        sm: 'h-8 text-xs',
-        lg: 'h-12 text-base',
+        sm: 'h-8 text-[11px] px-3',
+        lg: 'h-12 text-[14px] px-4',
       },
     },
     defaultVariants: {
       variant: 'default',
-      size: 'default',
+      inputSize: 'default',
     },
   }
 );
 
 export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement>,
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,
     VariantProps<typeof inputVariants> {}
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, variant, size, ...props }, ref) => {
+  ({ className, variant, inputSize, ...props }, ref) => {
     return (
       <input
-        className={cn(inputVariants({ variant, size, className }))}
+        className={inputVariants({ variant, inputSize, className })}
         ref={ref}
         {...props}
       />
@@ -41,4 +40,4 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 );
 Input.displayName = 'Input';
 
-export { Input };
+export { Input };

package/src/renderer/index.css

@@ -4,62 +4,40 @@
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --ring: 240 5.9% 10%;
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --ring: 240 4.9% 83.9%;
+    --background: 210 50% 3%;
+    --foreground: 160 30% 85%;
+    --card: 200 35% 6%;
+    --card-foreground: 160 30% 85%;
+    --popover: 200 35% 6%;
+    --popover-foreground: 160 30% 85%;
+    --primary: 165 100% 39%;
+    --primary-foreground: 210 50% 3%;
+    --secondary: 200 30% 10%;
+    --secondary-foreground: 160 30% 85%;
+    --muted: 200 30% 10%;
+    --muted-foreground: 165 30% 35%;
+    --accent: 165 100% 39%;
+    --accent-foreground: 210 50% 3%;
+    --destructive: 0 70% 55%;
+    --destructive-foreground: 160 30% 85%;
+    --border: 200 30% 10%;
+    --input: 200 30% 10%;
+    --ring: 165 100% 39%;
+    --radius: 0.625rem;
   }
 }
 
 @layer base {
   * {
-    @apply border-border;
+    border-color: var(--border-faint, rgba(0,200,168,0.06));
   }
   body {
-    @apply bg-background text-foreground;
+    background-color: var(--bg-void, #030709);
+    color: var(--text-primary, #D8EEE8);
     font-feature-settings: "rlig" 1, "calt" 1;
   }
 }
 
-/* Custom scrollbar */
 ::-webkit-scrollbar {
   width: 8px;
   height: 8px;
@@ -70,49 +48,49 @@
 }
 
 ::-webkit-scrollbar-thumb {
-  background: hsl(var(--muted-foreground) / 0.3);
+  background: var(--border-default, #1B3040);
   border-radius: 4px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: hsl(var(--muted-foreground) / 0.5);
+  background: var(--teal-700, #005C4E);
 }
 
-/* Code blocks */
 pre {
-  background: hsl(var(--muted));
-  border-radius: var(--radius);
+  background: var(--bg-card, #0A1318);
+  border-radius: var(--radius-md, 10px);
   padding: 1rem;
   overflow-x: auto;
+  border: 1px solid var(--border-subtle, #102028);
 }
 
 code {
-  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
+  font-family: var(--font-mono, 'JetBrains Mono', monospace);
   font-size: 0.875em;
+  color: var(--teal-300, #00DFC0);
 }
 
-/* Agent status indicators */
 .agent-status-idle {
-  @apply text-yellow-500;
+  color: var(--warning, #E6B94A);
 }
 
 .agent-status-running {
-  @apply text-green-500 animate-pulse;
+  color: var(--success, #3CC878);
+  animation: pulse 2s ease-in-out infinite;
 }
 
 .agent-status-paused {
-  @apply text-orange-500;
+  color: var(--warning, #E6B94A);
 }
 
 .agent-status-error {
-  @apply text-red-500;
+  color: var(--error, #E85A6A);
 }
 
 .agent-status-completed {
-  @apply text-blue-500;
+  color: var(--info, #6890F4);
 }
 
-/* Animations */
 @keyframes slideIn {
   from {
     opacity: 0;
@@ -126,4 +104,4 @@ code {
 
 .animate-slide-in {
   animation: slideIn 0.3s ease-out;
-}
+}