refactor: migrate remaining components to Design System v4

111 files across 14 directories: common, tree-editor, kb-accelerator,
copilot, assistant, analytics, library, procedural, procedural-editor,
public, script-editor, ui, admin, step-library.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/components/ui/Button.tsx

@@ -3,25 +3,25 @@ import { cn } from '@/lib/utils'
 import { Spinner } from '@/components/common/Spinner'
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 font-medium transition-all duration-200 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[0.97]',
+  'inline-flex items-center justify-center gap-2 font-medium transition-all duration-200 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98]',
   {
     variants: {
       variant: {
         primary:
-          'bg-gradient-brand text-brand-dark font-semibold shadow-lg shadow-primary/20 hover:opacity-90',
+          'bg-[#22d3ee] text-brand-dark font-semibold hover:brightness-110',
         secondary:
-          'bg-white/[0.04] border border-brand-border text-foreground hover:border-white/[0.12] hover:bg-brand-border',
+          'bg-white/[0.04] border border-brand-border text-[#e2e5eb] hover:border-white/[0.12] hover:bg-brand-border',
         destructive:
           'bg-red-400/10 text-red-400 border border-red-400/20 hover:bg-red-400/20',
         ghost:
-          'text-muted-foreground hover:bg-accent hover:text-foreground',
+          'text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]',
         link:
-          'text-primary underline-offset-4 hover:underline p-0 h-auto',
+          'text-[#22d3ee] underline-offset-4 hover:underline p-0 h-auto',
       },
       size: {
         sm: 'h-8 px-3 text-xs rounded-lg',
-        md: 'h-9 px-4 text-sm rounded-[10px]',
-        lg: 'h-10 px-6 text-sm rounded-[10px]',
+        md: 'h-9 px-4 text-sm rounded-lg',
+        lg: 'h-10 px-6 text-sm rounded-lg',
         icon: 'size-9 rounded-lg',
         'icon-sm': 'size-8 rounded-lg',
       },

frontend/src/components/ui/FormField.tsx

@@ -11,13 +11,13 @@ interface FormFieldProps {
 export function FormField({ label, htmlFor, required, hint, children }: FormFieldProps) {
   return (
     <div className="space-y-1.5">
-      <label htmlFor={htmlFor} className="text-sm font-medium text-foreground">
+      <label htmlFor={htmlFor} className="text-sm font-medium text-[#e2e5eb]">
         {label}
         {required && <span className="ml-0.5 text-red-400">*</span>}
       </label>
       {children}
       {hint && (
-        <p className="text-xs text-muted-foreground">{hint}</p>
+        <p className="text-xs text-[#848b9b]">{hint}</p>
       )}
     </div>
   )

frontend/src/components/ui/Input.tsx

@@ -10,8 +10,8 @@ export function Input({ className, error, id, ...props }: InputProps) {
       <input
         id={id}
         className={cn(
-          'flex h-9 w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-          'placeholder:text-muted-foreground',
+          'flex h-9 w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb]',
+          'placeholder:text-[#848b9b]',
           'focus:border-primary/30 focus:outline-hidden focus:ring-1 focus:ring-primary/20',
           'disabled:cursor-not-allowed disabled:opacity-50',
           error && 'border-red-400/50 focus:border-red-400 focus:ring-red-400/20',

frontend/src/components/ui/MarkdownContent.tsx

@@ -21,7 +21,7 @@ export function MarkdownContent({ content, className }: MarkdownContentProps) {
         ),
         // Style bold text
         strong: ({ children }) => (
-          <strong className="font-semibold text-foreground">{children}</strong>
+          <strong className="font-semibold text-[#e2e5eb]">{children}</strong>
         ),
         // Style ordered lists
         ol: ({ children }) => (
@@ -33,7 +33,7 @@ export function MarkdownContent({ content, className }: MarkdownContentProps) {
         ),
         // Style list items
         li: ({ children }) => (
-          <li className="text-muted-foreground">{children}</li>
+          <li className="text-[#848b9b]">{children}</li>
         ),
         // Style inline code
         code: ({ className, children, ...props }) => {
@@ -69,19 +69,19 @@ export function MarkdownContent({ content, className }: MarkdownContentProps) {
         ),
         // Style headers
         h1: ({ children }) => (
-          <h1 className="mb-3 text-lg font-bold text-foreground">{children}</h1>
+          <h1 className="mb-3 text-lg font-bold text-[#e2e5eb]">{children}</h1>
         ),
         h2: ({ children }) => (
-          <h2 className="mb-2 text-base font-bold text-foreground">{children}</h2>
+          <h2 className="mb-2 text-base font-bold text-[#e2e5eb]">{children}</h2>
         ),
         h3: ({ children }) => (
-          <h3 className="mb-2 text-sm font-bold text-foreground">{children}</h3>
+          <h3 className="mb-2 text-sm font-bold text-[#e2e5eb]">{children}</h3>
         ),
         // Style horizontal rules
-        hr: () => <hr className="my-4 border-border" />,
+        hr: () => <hr className="my-4 border-[#1e2130]" />,
         // Style blockquotes
         blockquote: ({ children }) => (
-          <blockquote className="mb-3 border-l-4 border-border pl-4 italic text-muted-foreground last:mb-0">
+          <blockquote className="mb-3 border-l-4 border-[#1e2130] pl-4 italic text-[#848b9b] last:mb-0">
             {children}
           </blockquote>
         ),

frontend/src/components/ui/Skeleton.tsx

@@ -16,7 +16,7 @@ export function Skeleton({ className, ...props }: SkeletonProps) {
 
 export function CardSkeleton({ className }: { className?: string }) {
   return (
-    <div className={cn('glass-card-static p-5 space-y-3', className)}>
+    <div className={cn('card-flat p-5 space-y-3', className)}>
       <Skeleton className="h-5 w-3/4" />
       <Skeleton className="h-4 w-1/2" />
       <div className="flex gap-2 mt-4">

frontend/src/components/ui/Textarea.tsx

@@ -10,8 +10,8 @@ export function Textarea({ className, error, id, ...props }: TextareaProps) {
       <textarea
         id={id}
         className={cn(
-          'flex w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-          'placeholder:text-muted-foreground',
+          'flex w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb]',
+          'placeholder:text-[#848b9b]',
           'focus:border-primary/30 focus:outline-hidden focus:ring-1 focus:ring-primary/20',
           'disabled:cursor-not-allowed disabled:opacity-50',
           error && 'border-red-400/50 focus:border-red-400 focus:ring-red-400/20',