Enhance spec-driven coding workflow

webui/src/components/NavItem.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
-import { Check } from 'lucide-react';
 
 interface NavItemProps {
   icon: React.ReactNode;
@@ -23,11 +22,6 @@ const NavItem: React.FC<NavItemProps> = ({ icon, label, to, collapsed = false })
       <>
         <span className="shrink-0">{icon}</span>
         {!collapsed && <span className="min-w-0 flex-1 truncate">{label}</span>}
-        {!collapsed && isActive && (
-          <span className="ml-auto inline-flex h-5 w-5 items-center justify-center rounded-full bg-indigo-500/15 text-indigo-300">
-            <Check className="w-3.5 h-3.5" />
-          </span>
-        )}
       </>
     )}
   </NavLink>

webui/src/components/Sidebar.tsx

@@ -58,11 +58,11 @@ const Sidebar: React.FC = () => {
 
   return (
     <aside className={`sidebar-shell fixed md:static inset-y-14 md:inset-y-16 left-0 z-40 ${sidebarCollapsed ? 'md:w-20' : 'md:w-64'} w-[86vw] max-w-72 border-r border-zinc-800 backdrop-blur-xl flex flex-col shrink-0 transform transition-all duration-200 ${sidebarOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'}`}>
-      <nav className={`flex-1 ${sidebarCollapsed ? 'px-2' : 'px-3'} py-4 space-y-3 overflow-y-auto`}>
+      <nav className={`flex-1 ${sidebarCollapsed ? 'px-2' : 'px-3'} py-3 space-y-2 overflow-y-auto`}>
         {sections.map((sec) => (
-          <div key={sec.title} className={`sidebar-section rounded-2xl border border-zinc-800/60 ${sidebarCollapsed ? 'p-2' : 'p-2.5'}`}>
-            {!sidebarCollapsed && <div className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest px-2 pb-2">{sec.title}</div>}
-            <div className="space-y-1">
+          <div key={sec.title} className={`sidebar-section rounded-2xl border border-zinc-800/60 ${sidebarCollapsed ? 'p-2' : 'p-2'}`}>
+            {!sidebarCollapsed && <div className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest px-2 pb-1.5">{sec.title}</div>}
+            <div className="space-y-0.5">
               {sec.items.map((it) => (
                 <NavItem key={it.to} icon={it.icon} label={it.label} to={it.to} collapsed={sidebarCollapsed} />
               ))}
@@ -87,7 +87,7 @@ const Sidebar: React.FC = () => {
           <div className="w-2.5 h-2.5 rounded-full bg-indigo-500 shadow-[0_0_14px_rgba(240,90,40,0.38)]" title={t('gatewayToken')} />
         </div>
       )}
-      <div className={`hidden md:flex border-t border-zinc-800 bg-zinc-900/20 ${sidebarCollapsed ? 'justify-center p-3' : 'p-3'}`}>
+      <div className={`hidden md:flex border-t border-zinc-800 bg-zinc-900/20 ${sidebarCollapsed ? 'justify-center p-3' : 'justify-end p-3'}`}>
         <button
           onClick={() => setSidebarCollapsed((prev) => !prev)}
           className="flex h-11 w-11 items-center justify-center rounded-2xl border border-zinc-800 brand-card-subtle hover:bg-zinc-900/40 text-zinc-300 transition-colors"

webui/src/pages/Nodes.tsx

@@ -248,9 +248,9 @@ const Nodes: React.FC = () => {
                 <button
                   key={nodeID}
                   onClick={() => setSelectedNodeID(nodeID)}
-                  className={`w-full text-left px-3 py-3 border-b border-zinc-800/60 transition-colors ${active ? 'bg-indigo-500/15' : ''}`}
+                  className="w-full text-left px-3 py-3 border-b border-zinc-800/60 transition-colors"
                 >
-                  <div className="flex items-start gap-3">
+                  <div className="flex items-center gap-3">
                     <div className="min-w-0 flex-1">
                       <div className="text-sm font-medium text-zinc-100 truncate">{String(node?.name || nodeID)}</div>
                       <div className="text-xs text-zinc-400 truncate">{nodeID} · {String(node?.os || '-')} / {String(node?.arch || '-')}</div>
@@ -266,7 +266,7 @@ const Nodes: React.FC = () => {
                       )}
                     </div>
                     {active && (
-                      <span className="mt-0.5 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-indigo-500/15 text-indigo-300">
+                      <span className="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-indigo-500/15 text-indigo-300 self-center">
                         <Check className="w-3.5 h-3.5" />
                       </span>
                     )}

webui/src/pages/SubagentProfiles.tsx

@@ -291,9 +291,9 @@ const SubagentProfiles: React.FC = () => {
               <button
                 key={it.agent_id}
                 onClick={() => onSelect(it)}
-                className={`w-full text-left px-3 py-2 border-b border-zinc-800/50 transition-colors ${selectedId === it.agent_id ? 'bg-indigo-500/15' : ''}`}
+                className="w-full text-left px-3 py-2 border-b border-zinc-800/50 transition-colors"
               >
-                <div className="flex items-start gap-3">
+                <div className="flex items-center gap-3">
                   <div className="min-w-0 flex-1">
                     <div className="text-sm text-zinc-100 truncate">{it.agent_id || '-'}</div>
                     <div className="text-xs text-zinc-400 truncate">
@@ -301,7 +301,7 @@ const SubagentProfiles: React.FC = () => {
                     </div>
                   </div>
                   {selectedId === it.agent_id && (
-                    <span className="mt-0.5 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-indigo-500/15 text-indigo-300">
+                    <span className="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-indigo-500/15 text-indigo-300 self-center">
                       <Check className="w-3.5 h-3.5" />
                     </span>
                   )}
@@ -482,28 +482,28 @@ const SubagentProfiles: React.FC = () => {
             <button
               onClick={save}
               disabled={saving}
-              className="px-3 py-1.5 text-xs rounded bg-indigo-700/80 hover:bg-indigo-600 disabled:opacity-60"
+              className="px-3 py-1.5 text-xs rounded-xl border border-indigo-400/30 bg-indigo-500/14 text-indigo-100 hover:bg-indigo-500/22 disabled:opacity-60"
             >
               {selected ? t('update') : t('create')}
             </button>
             <button
               onClick={() => setStatus('active')}
               disabled={!draft.agent_id}
-              className="px-3 py-1.5 text-xs rounded bg-emerald-700/70 hover:bg-emerald-600 disabled:opacity-50"
+              className="px-3 py-1.5 text-xs rounded-xl border border-emerald-400/30 bg-emerald-500/14 text-emerald-100 hover:bg-emerald-500/22 disabled:opacity-50"
             >
               {t('enable')}
             </button>
             <button
               onClick={() => setStatus('disabled')}
               disabled={!draft.agent_id}
-              className="px-3 py-1.5 text-xs rounded bg-amber-700/70 hover:bg-amber-600 disabled:opacity-50"
+              className="px-3 py-1.5 text-xs rounded-xl border border-amber-400/30 bg-amber-500/14 text-amber-100 hover:bg-amber-500/22 disabled:opacity-50"
             >
               {t('disable')}
             </button>
             <button
               onClick={remove}
               disabled={!draft.agent_id}
-              className="px-3 py-1.5 text-xs rounded bg-red-700/70 hover:bg-red-600 disabled:opacity-50"
+              className="px-3 py-1.5 text-xs rounded-xl border border-rose-400/30 bg-rose-500/14 text-rose-100 hover:bg-rose-500/22 disabled:opacity-50"
             >
               {t('delete')}
             </button>

webui/src/pages/TaskAudit.tsx

@@ -144,16 +144,16 @@ const TaskAudit: React.FC = () => {
                 <button
                   key={`${it.task_id || idx}-${it.time || idx}`}
                   onClick={() => setSelected(it)}
-                  className={`w-full text-left px-3 py-2 border-b border-zinc-800/60 transition-colors ${active ? 'bg-indigo-500/15' : ''}`}
+                  className="w-full text-left px-3 py-2 border-b border-zinc-800/60 transition-colors"
                 >
-                  <div className="flex items-start gap-3">
+                  <div className="flex items-center gap-3">
                     <div className="min-w-0 flex-1">
                       <div className="text-sm font-medium text-zinc-100 truncate">{it.task_id || `task-${idx + 1}`}</div>
                       <div className="text-xs text-zinc-400 truncate">{it.channel || '-'} · {it.status} · attempts:{it.attempts || 1} · {it.duration_ms || 0}ms · retry:{it.retry_count || 0} · {it.source || '-'} · {it.provider || '-'} / {it.model || '-'}</div>
                       <div className="text-[11px] text-zinc-500 truncate">{formatLocalDateTime(it.time)}</div>
                     </div>
                     {active && (
-                      <span className="mt-0.5 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-indigo-500/15 text-indigo-300">
+                      <span className="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-indigo-500/15 text-indigo-300 self-center">
                         <Check className="w-3.5 h-3.5" />
                       </span>
                     )}