From 64dc6beb11ddeeb844f71b1887eb2abb7ad72765 Mon Sep 17 00:00:00 2001
From: Jason Staack <jason@staack.com>
Date: Mon, 16 Mar 2026 17:44:18 -0500
Subject: [PATCH] feat(ui): polish Config Editor with Deep Space styling

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/config-editor/CommandExecutor.tsx | 2 +-
 frontend/src/components/config-editor/EntryTable.tsx      | 6 +++---
 frontend/src/components/config-editor/MenuTree.tsx        | 6 +++---
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/config-editor/CommandExecutor.tsx b/frontend/src/components/config-editor/CommandExecutor.tsx
index 0869359..b7fba44 100644
--- a/frontend/src/components/config-editor/CommandExecutor.tsx
+++ b/frontend/src/components/config-editor/CommandExecutor.tsx
@@ -136,7 +136,7 @@ export function CommandExecutor({ tenantId, deviceId, currentPath }: CommandExec
           {results.length > 0 && (
             <div className="max-h-48 overflow-y-auto space-y-2">
               {results.map((r, i) => (
-                <div key={i} className="rounded border border-border bg-surface/50 p-2">
+                <div key={i} className="bg-surface border-border rounded-md font-mono text-xs p-2 border">
                   <div className="flex items-center gap-2 mb-1">
                     <span className="text-[10px] text-text-muted">{r.timestamp}</span>
                     <span className="text-xs font-mono text-text-secondary">{r.command}</span>
diff --git a/frontend/src/components/config-editor/EntryTable.tsx b/frontend/src/components/config-editor/EntryTable.tsx
index 0a3c83a..efe4d91 100644
--- a/frontend/src/components/config-editor/EntryTable.tsx
+++ b/frontend/src/components/config-editor/EntryTable.tsx
@@ -107,17 +107,17 @@ export function EntryTable({
         <div className="overflow-x-auto rounded-lg border border-border">
           <table className="w-full text-xs">
             <thead>
-              <tr className="border-b border-border bg-surface">
+              <tr className="border-b border-border">
                 {columns.map((col) => (
                   <th
                     key={col}
-                    className="text-left px-3 py-2 text-text-secondary font-medium whitespace-nowrap"
+                    className="text-left px-3 py-2 text-[10px] uppercase tracking-wider font-semibold text-text-muted whitespace-nowrap"
                   >
                     {col}
                   </th>
                 ))}
                 {writable && (
-                  <th className="text-right px-3 py-2 text-text-secondary font-medium w-20">
+                  <th className="text-right px-3 py-2 text-[10px] uppercase tracking-wider font-semibold text-text-muted w-20">
                     Actions
                   </th>
                 )}
diff --git a/frontend/src/components/config-editor/MenuTree.tsx b/frontend/src/components/config-editor/MenuTree.tsx
index e95a6e7..10dcde7 100644
--- a/frontend/src/components/config-editor/MenuTree.tsx
+++ b/frontend/src/components/config-editor/MenuTree.tsx
@@ -157,7 +157,7 @@ function TreeItem({
         className={cn(
           'flex items-center gap-1.5 w-full px-2 py-1 text-xs rounded transition-colors',
           isActive
-            ? 'bg-elevated text-text-primary'
+            ? 'bg-[hsl(var(--accent-muted))] text-accent'
             : 'text-text-secondary hover:text-text-primary hover:bg-elevated/50',
         )}
         style={{ paddingLeft: `${depth * 12 + 8}px` }}
@@ -205,7 +205,7 @@ export function MenuTree({ onPathSelect, currentPath }: MenuTreeProps) {
   return (
     <div className="flex flex-col h-full">
       <div className="px-2 py-2 border-b border-border">
-        <div className="text-[10px] uppercase tracking-wider text-text-muted mb-1">Menu</div>
+        <div className="text-[10px] uppercase tracking-wider font-semibold text-text-muted mb-1">Menu</div>
       </div>
       <div className="flex-1 overflow-y-auto py-1">
         {MENU_TREE.map((node) => (
@@ -218,7 +218,7 @@ export function MenuTree({ onPathSelect, currentPath }: MenuTreeProps) {
         ))}
       </div>
       <div className="px-2 py-2 border-t border-border">
-        <div className="text-[10px] uppercase tracking-wider text-text-muted mb-1">Custom path</div>
+        <div className="text-[10px] uppercase tracking-wider font-semibold text-text-muted mb-1">Custom path</div>
         <Input
           value={customPath}
           onChange={(e) => setCustomPath(e.target.value)}