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/admin/ActionMenu.tsx

@@ -53,8 +53,8 @@ export function ActionMenu({ items }: ActionMenuProps) {
         ref={buttonRef}
         onClick={() => setOpen(!open)}
         className={cn(
-          'rounded-md p-1.5 text-muted-foreground transition-colors',
-          'hover:bg-accent hover:text-foreground'
+          'rounded-md p-1.5 text-[#848b9b] transition-colors',
+          'hover:bg-accent hover:text-[#e2e5eb]'
         )}
       >
         <MoreHorizontal className="h-4 w-4" />
@@ -63,8 +63,8 @@ export function ActionMenu({ items }: ActionMenuProps) {
         <div
           ref={menuRef}
           className={cn(
-            'fixed z-50 min-w-[160px] rounded-md border border-border',
-            'bg-card py-1 shadow-lg animate-scale-in'
+            'fixed z-50 min-w-[160px] rounded-md border border-[#1e2130]',
+            'bg-[#14161d] py-1 shadow-lg animate-scale-in'
           )}
           style={{
             top: `${menuPosition.top}px`,
@@ -81,7 +81,7 @@ export function ActionMenu({ items }: ActionMenuProps) {
                 'disabled:opacity-50 disabled:pointer-events-none',
                 item.destructive
                   ? 'text-red-400 hover:bg-red-400/10'
-                  : 'text-muted-foreground hover:bg-accent'
+                  : 'text-[#848b9b] hover:bg-accent'
               )}
             >
               {item.icon}

frontend/src/components/admin/AdminLayout.tsx

@@ -36,7 +36,7 @@ export function AdminLayout() {
   return (
     <div className="flex h-full">
       {/* Desktop sidebar */}
-      <div className="hidden w-60 shrink-0 border-r border-border bg-card md:block">
+      <div className="hidden w-60 shrink-0 border-r border-[#1e2130] bg-[#14161d] md:block">
         <AdminSidebar />
       </div>
 
@@ -44,14 +44,14 @@ export function AdminLayout() {
       {mobileOpen && (
         <div className="fixed inset-0 z-40 md:hidden">
           <div
-            className="absolute inset-0 bg-card/80 backdrop-blur-xs"
+            className="absolute inset-0 bg-[#14161d]/80"
             onClick={() => setMobileOpen(false)}
           />
-          <div className="absolute inset-y-0 left-0 w-60 border-r border-border bg-card shadow-xl">
+          <div className="absolute inset-y-0 left-0 w-60 border-r border-[#1e2130] bg-[#14161d] shadow-xl">
             <div className="flex h-12 items-center justify-end px-3">
               <button
                 onClick={() => setMobileOpen(false)}
-                className="rounded-md p-1.5 text-muted-foreground hover:bg-accent"
+                className="rounded-md p-1.5 text-[#848b9b] hover:bg-accent"
               >
                 <X className="h-4 w-4" />
               </button>
@@ -67,7 +67,7 @@ export function AdminLayout() {
           {/* Mobile menu button */}
           <button
             onClick={() => setMobileOpen(true)}
-            className="mb-4 rounded-md p-2 text-muted-foreground hover:bg-accent md:hidden"
+            className="mb-4 rounded-md p-2 text-[#848b9b] hover:bg-accent md:hidden"
           >
             <Menu className="h-5 w-5" />
           </button>

frontend/src/components/admin/AdminSidebar.tsx

@@ -45,7 +45,7 @@ export function AdminSidebar({ className, onNavigate }: AdminSidebarProps) {
   return (
     <aside className={cn('flex h-full flex-col', className)}>
       <div className="p-4">
-        <h2 className="text-lg font-bold text-foreground">Admin Panel</h2>
+        <h2 className="text-lg font-bold text-[#e2e5eb]">Admin Panel</h2>
       </div>
       <nav className="flex-1 space-y-1 px-3">
         {navItems.map((item) => (
@@ -56,8 +56,8 @@ export function AdminSidebar({ className, onNavigate }: AdminSidebarProps) {
             className={cn(
               'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
               isActive(item.path, item.end)
-                ? 'bg-accent text-foreground'
-                : 'text-muted-foreground hover:bg-accent hover:text-foreground'
+                ? 'bg-accent text-[#e2e5eb]'
+                : 'text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]'
             )}
           >
             <item.icon className="h-4 w-4" />
@@ -65,13 +65,13 @@ export function AdminSidebar({ className, onNavigate }: AdminSidebarProps) {
           </Link>
         ))}
       </nav>
-      <div className="border-t border-border p-3">
+      <div className="border-t border-[#1e2130] p-3">
         <Link
           to="/trees"
           onClick={onNavigate}
           className={cn(
             'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium',
-            'text-muted-foreground hover:bg-accent hover:text-foreground'
+            'text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]'
           )}
         >
           <ArrowLeft className="h-4 w-4" />

frontend/src/components/admin/CategoryRow.tsx

@@ -38,7 +38,7 @@ export function CategoryRow({
       ref={setNodeRef}
       style={style}
       className={cn(
-        'flex items-center gap-3 bg-card border border-border rounded-xl p-4',
+        'flex items-center gap-3 bg-[#14161d] border border-[#1e2130] rounded-xl p-4',
         isDragging && 'opacity-50'
       )}
     >
@@ -47,7 +47,7 @@ export function CategoryRow({
         type="button"
         {...attributes}
         {...listeners}
-        className="cursor-grab touch-none text-muted-foreground hover:text-foreground active:cursor-grabbing"
+        className="cursor-grab touch-none text-[#848b9b] hover:text-[#e2e5eb] active:cursor-grabbing"
         aria-label="Drag to reorder"
       >
         <GripVertical className="h-5 w-5" />
@@ -56,17 +56,17 @@ export function CategoryRow({
       {/* Category Info */}
       <div className="flex-1">
         <div className="flex items-center gap-2">
-          <h3 className="font-medium text-foreground">{category.name}</h3>
+          <h3 className="font-medium text-[#e2e5eb]">{category.name}</h3>
           {!category.is_active && (
-            <span className="rounded-full bg-accent px-2 py-0.5 text-xs font-medium text-muted-foreground">
+            <span className="rounded-full bg-accent px-2 py-0.5 text-xs font-medium text-[#848b9b]">
               Archived
             </span>
           )}
         </div>
         {category.description && (
-          <p className="mt-1 text-sm text-muted-foreground">{category.description}</p>
+          <p className="mt-1 text-sm text-[#848b9b]">{category.description}</p>
         )}
-        <p className="mt-1 text-xs text-muted-foreground">
+        <p className="mt-1 text-xs text-[#848b9b]">
           {stepCount} step{stepCount !== 1 ? 's' : ''}
         </p>
       </div>
@@ -77,8 +77,8 @@ export function CategoryRow({
           type="button"
           onClick={() => onEdit(category)}
           className={cn(
-            'rounded-md border border-border bg-card p-2 text-muted-foreground',
-            'hover:bg-accent hover:text-foreground'
+            'rounded-md border border-[#1e2130] bg-[#14161d] p-2 text-[#848b9b]',
+            'hover:bg-accent hover:text-[#e2e5eb]'
           )}
           title="Edit category"
           aria-label="Edit category"
@@ -91,7 +91,7 @@ export function CategoryRow({
             type="button"
             onClick={() => onArchive(category.id)}
             className={cn(
-              'rounded-md border border-input bg-background p-2 text-muted-foreground',
+              'rounded-md border border-input bg-[#0c0d10] p-2 text-[#848b9b]',
               'hover:bg-accent hover:text-accent-foreground'
             )}
             title="Archive category"
@@ -104,7 +104,7 @@ export function CategoryRow({
             type="button"
             onClick={() => onRestore(category.id)}
             className={cn(
-              'rounded-md border border-input bg-background p-2 text-muted-foreground',
+              'rounded-md border border-input bg-[#0c0d10] p-2 text-[#848b9b]',
               'hover:bg-accent hover:text-accent-foreground'
             )}
             title="Restore category"

frontend/src/components/admin/CreateCategoryModal.tsx

@@ -91,7 +91,7 @@ export function CreateCategoryModal({
         )}
 
         <div>
-          <label htmlFor="name" className="mb-1 block text-sm font-medium text-foreground">
+          <label htmlFor="name" className="mb-1 block text-sm font-medium text-[#e2e5eb]">
             Category Name <span className="text-red-400">*</span>
           </label>
           <Input
@@ -104,14 +104,14 @@ export function CreateCategoryModal({
             placeholder="e.g., Network Troubleshooting"
             required
           />
-          <p className="mt-1 text-xs text-muted-foreground">
+          <p className="mt-1 text-xs text-[#848b9b]">
             {name.length}/100 characters
           </p>
         </div>
 
         <div>
-          <label htmlFor="description" className="mb-1 block text-sm font-medium text-foreground">
-            Description <span className="text-muted-foreground">(optional)</span>
+          <label htmlFor="description" className="mb-1 block text-sm font-medium text-[#e2e5eb]">
+            Description <span className="text-[#848b9b]">(optional)</span>
           </label>
           <Textarea
             id="description"

frontend/src/components/admin/DataTable.tsx

@@ -50,16 +50,16 @@ export function DataTable<T>({
   }
 
   return (
-    <div className="overflow-x-auto rounded-lg border border-border">
+    <div className="overflow-x-auto rounded-lg border border-[#1e2130]">
       <table className="w-full text-sm">
         <thead>
-          <tr className="border-b border-border bg-accent">
+          <tr className="border-b border-[#1e2130] bg-accent">
             {columns.map((col) => (
               <th
                 key={col.key}
                 className={cn(
-                  'px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-muted-foreground',
-                  col.sortable && 'cursor-pointer select-none hover:text-foreground',
+                  'px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-[#848b9b]',
+                  col.sortable && 'cursor-pointer select-none hover:text-[#e2e5eb]',
                   col.className
                 )}
                 onClick={col.sortable ? () => handleSort(col.key) : undefined}
@@ -87,7 +87,7 @@ export function DataTable<T>({
         <tbody>
           {isLoading ? (
             Array.from({ length: skeletonRows }).map((_, i) => (
-              <tr key={i} className="border-b border-border last:border-0">
+              <tr key={i} className="border-b border-[#1e2130] last:border-0">
                 {columns.map((col) => (
                   <td key={col.key} className="px-4 py-3">
                     <div className="h-4 w-3/4 animate-pulse rounded bg-accent" />
@@ -99,7 +99,7 @@ export function DataTable<T>({
             <tr>
               <td colSpan={columns.length} className="px-4 py-12 text-center">
                 {emptyState || (
-                  <span className="text-muted-foreground">No data found</span>
+                  <span className="text-[#848b9b]">No data found</span>
                 )}
               </td>
             </tr>
@@ -107,7 +107,7 @@ export function DataTable<T>({
             data.map((item) => (
               <tr
                 key={keyExtractor(item)}
-                className="border-b border-border last:border-0 hover:bg-accent transition-colors"
+                className="border-b border-[#1e2130] last:border-0 hover:bg-accent transition-colors"
               >
                 {columns.map((col) => (
                   <td key={col.key} className={cn('px-4 py-3', col.className)}>

frontend/src/components/admin/EditCategoryModal.tsx

@@ -103,7 +103,7 @@ export function EditCategoryModal({
         )}
 
         <div>
-          <label htmlFor="edit-name" className="mb-1 block text-sm font-medium text-foreground">
+          <label htmlFor="edit-name" className="mb-1 block text-sm font-medium text-[#e2e5eb]">
             Category Name <span className="text-red-400">*</span>
           </label>
           <Input
@@ -116,14 +116,14 @@ export function EditCategoryModal({
             placeholder="e.g., Network Troubleshooting"
             required
           />
-          <p className="mt-1 text-xs text-muted-foreground">
+          <p className="mt-1 text-xs text-[#848b9b]">
             {name.length}/100 characters
           </p>
         </div>
 
         <div>
-          <label htmlFor="edit-description" className="mb-1 block text-sm font-medium text-foreground">
-            Description <span className="text-muted-foreground">(optional)</span>
+          <label htmlFor="edit-description" className="mb-1 block text-sm font-medium text-[#e2e5eb]">
+            Description <span className="text-[#848b9b]">(optional)</span>
           </label>
           <Textarea
             id="edit-description"

frontend/src/components/admin/Pagination.tsx

@@ -36,20 +36,20 @@ export function Pagination({ page, totalPages, total, pageSize, onPageChange }:
 
   return (
     <div className="flex items-center justify-between gap-4 pt-4">
-      <span className="text-sm text-muted-foreground">
+      <span className="text-sm text-[#848b9b]">
         Showing {start}-{end} of {total}
       </span>
       <div className="flex items-center gap-1">
         <button
           onClick={() => onPageChange(page - 1)}
           disabled={page <= 1}
-          className={cn(btnBase, 'px-2 text-muted-foreground hover:bg-accent hover:text-foreground')}
+          className={cn(btnBase, 'px-2 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]')}
         >
           <ChevronLeft className="h-4 w-4" />
         </button>
         {getPageNumbers().map((p, i) =>
           p === 'ellipsis' ? (
-            <span key={`e${i}`} className="px-1 text-muted-foreground">...</span>
+            <span key={`e${i}`} className="px-1 text-[#848b9b]">...</span>
           ) : (
             <button
               key={p}
@@ -58,8 +58,8 @@ export function Pagination({ page, totalPages, total, pageSize, onPageChange }:
                 btnBase,
                 'px-2',
                 p === page
-                  ? 'bg-gradient-brand text-white shadow-lg shadow-primary/20'
-                  : 'text-muted-foreground hover:bg-accent hover:text-foreground'
+                  ? 'bg-[#22d3ee] text-white'
+                  : 'text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]'
               )}
             >
               {p}
@@ -69,7 +69,7 @@ export function Pagination({ page, totalPages, total, pageSize, onPageChange }:
         <button
           onClick={() => onPageChange(page + 1)}
           disabled={page >= totalPages}
-          className={cn(btnBase, 'px-2 text-muted-foreground hover:bg-accent hover:text-foreground')}
+          className={cn(btnBase, 'px-2 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]')}
         >
           <ChevronRight className="h-4 w-4" />
         </button>

frontend/src/components/admin/SearchInput.tsx

@@ -40,21 +40,21 @@ export function SearchInput({ value = '', onSearch, placeholder = 'Search...', c
 
   return (
     <div className={cn('relative', className)}>
-      <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+      <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#848b9b]" />
       <input
         type="text"
         value={localValue}
         onChange={handleChange}
         placeholder={placeholder}
         className={cn(
-          'h-9 w-full rounded-md border border-border bg-card pl-9 pr-8 text-sm text-foreground',
-          'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
+          'h-9 w-full rounded-md border border-[#1e2130] bg-[#14161d] pl-9 pr-8 text-sm text-[#e2e5eb]',
+          'placeholder:text-[#848b9b] focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
         )}
       />
       {localValue && (
         <button
           onClick={handleClear}
-          className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-muted-foreground hover:text-foreground"
+          className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-[#848b9b] hover:text-[#e2e5eb]"
         >
           <X className="h-3.5 w-3.5" />
         </button>

frontend/src/components/admin/StatusBadge.tsx

@@ -12,7 +12,7 @@ const variantClasses: Record<BadgeVariant, string> = {
   success: 'bg-emerald-400/10 text-emerald-400',
   destructive: 'bg-red-400/10 text-red-400',
   warning: 'bg-yellow-400/10 text-yellow-400',
-  default: 'bg-accent text-muted-foreground',
+  default: 'bg-accent text-[#848b9b]',
 }
 
 export function StatusBadge({ variant = 'default', children, className }: StatusBadgeProps) {