From 5abbffca9bf9d86a6c0ace990654541c2442c8d0 Mon Sep 17 00:00:00 2001
From: Vantz Stockwell <vstockwell@predator-mini.local>
Date: Sat, 14 Mar 2026 16:01:58 -0400
Subject: [PATCH] feat(ui): add color accents across the connection manager
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Default protocol color strips on all host cards (wraith-blue for SSH, purple for RDP)
- Deterministic tag colors from 8-color palette (teal, amber, violet, rose, emerald, sky, orange, indigo)
- Last-connected recency coloring (green=today, amber=this week, gray=older)
- Section header dots (wraith-400 for Recent, gray for All Hosts)
- Active nav link highlighting (wraith-400)
- Group headers get subtle wraith-500 left border accent
- Tree host dots default to protocol color instead of gray
- Fixed rogue modal using hardcoded #1a1a2e/#e94560 — now uses design system
- Fixed sky-600 save buttons → wraith-600 for brand consistency
- Credential type badges: SSH Key=wraith, Password=amber (was purple/blue)
- Colored tags in right sidebar detail panel

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/components/connections/HostCard.vue | 46 ++++++++++++++++----
 frontend/components/connections/HostTree.vue | 26 +++++++++--
 frontend/layouts/default.vue                 |  8 ++--
 frontend/pages/index.vue                     | 36 +++++++++++----
 4 files changed, 91 insertions(+), 25 deletions(-)

diff --git a/frontend/components/connections/HostCard.vue b/frontend/components/connections/HostCard.vue
index 4dbb4c0..5ee5cd3 100644
--- a/frontend/components/connections/HostCard.vue
+++ b/frontend/components/connections/HostCard.vue
@@ -34,6 +34,36 @@ function formatLastConnected(ts: string | null): string {
   if (diffDays < 30) return `${diffDays}d ago`
   return d.toLocaleDateString()
 }
+
+function recencyClass(ts: string | null): string {
+  if (!ts) return 'text-gray-600'
+  const diffDays = Math.floor((Date.now() - new Date(ts).getTime()) / 86400000)
+  if (diffDays === 0) return 'text-emerald-400'
+  if (diffDays <= 7) return 'text-amber-400'
+  return 'text-gray-600'
+}
+
+// Deterministic tag color from string hash
+const TAG_COLORS = [
+  'bg-teal-900/40 text-teal-300 border-teal-700/50',
+  'bg-amber-900/40 text-amber-300 border-amber-700/50',
+  'bg-violet-900/40 text-violet-300 border-violet-700/50',
+  'bg-rose-900/40 text-rose-300 border-rose-700/50',
+  'bg-emerald-900/40 text-emerald-300 border-emerald-700/50',
+  'bg-sky-900/40 text-sky-300 border-sky-700/50',
+  'bg-orange-900/40 text-orange-300 border-orange-700/50',
+  'bg-indigo-900/40 text-indigo-300 border-indigo-700/50',
+]
+
+function tagColor(tag: string): string {
+  let hash = 0
+  for (let i = 0; i < tag.length; i++) hash = ((hash << 5) - hash + tag.charCodeAt(i)) | 0
+  return TAG_COLORS[Math.abs(hash) % TAG_COLORS.length]
+}
+
+function defaultStrip(protocol: string): string {
+  return protocol === 'rdp' ? '#a855f7' : '#5c7cfa'
+}
 </script>
 
 <template>
@@ -41,11 +71,10 @@ function formatLastConnected(ts: string | null): string {
     class="relative bg-gray-900 border rounded-lg p-4 hover:border-wraith-700 transition-colors group cursor-pointer"
     :class="selected ? 'border-wraith-600 ring-1 ring-wraith-600/30' : 'border-gray-800'"
   >
-    <!-- Color indicator strip -->
+    <!-- Color indicator strip — always visible, defaults to protocol color -->
     <div
-      v-if="host.color"
       class="absolute top-0 left-0 w-1 h-full rounded-l-lg"
-      :style="{ backgroundColor: host.color }"
+      :style="{ backgroundColor: host.color || defaultStrip(host.protocol) }"
     />
 
     <!-- Header row -->
@@ -65,10 +94,10 @@ function formatLastConnected(ts: string | null): string {
     </div>
 
     <!-- Group + last connected -->
-    <div class="mt-2 pl-2 flex items-center justify-between text-xs text-gray-600">
-      <span v-if="host.group" class="truncate">{{ host.group.name }}</span>
-      <span v-else class="italic">Ungrouped</span>
-      <span>{{ formatLastConnected(host.lastConnectedAt) }}</span>
+    <div class="mt-2 pl-2 flex items-center justify-between text-xs">
+      <span v-if="host.group" class="truncate text-gray-600">{{ host.group.name }}</span>
+      <span v-else class="italic text-gray-600">Ungrouped</span>
+      <span :class="recencyClass(host.lastConnectedAt)">{{ formatLastConnected(host.lastConnectedAt) }}</span>
     </div>
 
     <!-- Tags -->
@@ -76,7 +105,8 @@ function formatLastConnected(ts: string | null): string {
       <span
         v-for="tag in host.tags"
         :key="tag"
-        class="text-xs bg-gray-800 text-gray-400 px-1.5 py-0.5 rounded"
+        class="text-xs px-1.5 py-0.5 rounded border"
+        :class="tagColor(tag)"
       >{{ tag }}</span>
     </div>
 
diff --git a/frontend/components/connections/HostTree.vue b/frontend/components/connections/HostTree.vue
index c3e9bc4..2c86499 100644
--- a/frontend/components/connections/HostTree.vue
+++ b/frontend/components/connections/HostTree.vue
@@ -49,6 +49,24 @@ function countHosts(group: HostGroup): number {
   }
   return count
 }
+
+// Tag color — same algorithm as HostCard
+const TAG_COLORS = [
+  'bg-teal-900/40 text-teal-300',
+  'bg-amber-900/40 text-amber-300',
+  'bg-violet-900/40 text-violet-300',
+  'bg-rose-900/40 text-rose-300',
+  'bg-emerald-900/40 text-emerald-300',
+  'bg-sky-900/40 text-sky-300',
+  'bg-orange-900/40 text-orange-300',
+  'bg-indigo-900/40 text-indigo-300',
+]
+
+function tagColor(tag: string): string {
+  let hash = 0
+  for (let i = 0; i < tag.length; i++) hash = ((hash << 5) - hash + tag.charCodeAt(i)) | 0
+  return TAG_COLORS[Math.abs(hash) % TAG_COLORS.length]
+}
 </script>
 
 <template>
@@ -58,7 +76,7 @@ function countHosts(group: HostGroup): number {
       <div>
         <!-- Group header -->
         <div
-          class="flex items-center gap-1 px-3 py-1.5 cursor-pointer hover:bg-gray-800 text-gray-400 hover:text-gray-200 select-none group/grp"
+          class="flex items-center gap-1 px-3 py-1.5 cursor-pointer hover:bg-gray-800 text-gray-400 hover:text-gray-200 select-none group/grp border-l-2 border-wraith-500/30"
           @click="toggleGroup(group.id)"
         >
           <span class="text-xs w-3">{{ isExpanded(group.id) ? '▾' : '▸' }}</span>
@@ -96,8 +114,7 @@ function countHosts(group: HostGroup): number {
           >
             <span
               class="w-2 h-2 rounded-full shrink-0"
-              :style="host.color ? { backgroundColor: host.color } : {}"
-              :class="!host.color ? 'bg-gray-600' : ''"
+              :style="{ backgroundColor: host.color || (host.protocol === 'rdp' ? '#a855f7' : '#5c7cfa') }"
             />
             <div class="min-w-0 flex-1">
               <span class="truncate block">{{ host.name }}</span>
@@ -105,7 +122,8 @@ function countHosts(group: HostGroup): number {
                 <span
                   v-for="tag in host.tags.slice(0, 3)"
                   :key="tag"
-                  class="text-[10px] leading-tight px-1 py-px rounded bg-gray-800 text-gray-500"
+                  class="text-[10px] leading-tight px-1 py-px rounded"
+                  :class="tagColor(tag)"
                 >{{ tag }}</span>
                 <span v-if="host.tags.length > 3" class="text-[10px] text-gray-600">+{{ host.tags.length - 3 }}</span>
               </div>
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index d852e4f..de58ea4 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -67,10 +67,10 @@ const fontSize = computed({
         <img src="/wraith-logo.png" alt="Wraith" class="h-8" />
       </div>
       <div class="flex items-center gap-3">
-        <NuxtLink to="/" class="text-sm text-gray-400 hover:text-white" @click="sessions.goHome()">Home</NuxtLink>
-        <NuxtLink to="/vault" class="text-sm text-gray-400 hover:text-white" @click="sessions.goHome()">Vault</NuxtLink>
-        <NuxtLink v-if="auth.isAdmin" to="/admin/users" class="text-sm text-gray-400 hover:text-white" @click="sessions.goHome()">Users</NuxtLink>
-        <NuxtLink to="/profile" class="text-sm text-gray-400 hover:text-white" @click="sessions.goHome()">Profile</NuxtLink>
+        <NuxtLink to="/" class="text-sm hover:text-white" :class="$route.path === '/' ? 'text-wraith-400' : 'text-gray-400'" @click="sessions.goHome()">Home</NuxtLink>
+        <NuxtLink to="/vault" class="text-sm hover:text-white" :class="$route.path.startsWith('/vault') ? 'text-wraith-400' : 'text-gray-400'" @click="sessions.goHome()">Vault</NuxtLink>
+        <NuxtLink v-if="auth.isAdmin" to="/admin/users" class="text-sm hover:text-white" :class="$route.path.startsWith('/admin') ? 'text-wraith-400' : 'text-gray-400'" @click="sessions.goHome()">Users</NuxtLink>
+        <NuxtLink to="/profile" class="text-sm hover:text-white" :class="$route.path === '/profile' ? 'text-wraith-400' : 'text-gray-400'" @click="sessions.goHome()">Profile</NuxtLink>
         <button @click="showSettings = !showSettings" class="text-sm text-gray-400 hover:text-white" :class="showSettings ? 'text-white' : ''">Settings</button>
         <button @click="auth.logout()" class="text-sm text-gray-500 hover:text-red-400">Logout</button>
       </div>
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 58e8251..01c4c6b 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -24,6 +24,23 @@ const allSshKeys = ref<any[]>([])
 // Terminal composable for connect-on-click
 const { createTerminal, connectToHost } = useTerminal()
 
+// Deterministic tag color from string hash
+const TAG_COLORS = [
+  'bg-teal-900/40 text-teal-300 border-teal-700/50',
+  'bg-amber-900/40 text-amber-300 border-amber-700/50',
+  'bg-violet-900/40 text-violet-300 border-violet-700/50',
+  'bg-rose-900/40 text-rose-300 border-rose-700/50',
+  'bg-emerald-900/40 text-emerald-300 border-emerald-700/50',
+  'bg-sky-900/40 text-sky-300 border-sky-700/50',
+  'bg-orange-900/40 text-orange-300 border-orange-700/50',
+  'bg-indigo-900/40 text-indigo-300 border-indigo-700/50',
+]
+function tagColor(tag: string): string {
+  let hash = 0
+  for (let i = 0; i < tag.length; i++) hash = ((hash << 5) - hash + tag.charCodeAt(i)) | 0
+  return TAG_COLORS[Math.abs(hash) % TAG_COLORS.length]
+}
+
 onMounted(async () => {
   await Promise.all([connections.fetchHosts(), connections.fetchTree()])
 })
@@ -259,7 +276,7 @@ async function deleteSelectedHost() {
 
         <!-- Recent connections -->
         <div v-if="!searchQuery && recentHosts.length > 0" class="mb-6">
-          <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Recent</h3>
+          <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2 flex items-center gap-1.5"><span class="w-1.5 h-1.5 rounded-full bg-wraith-400" />Recent</h3>
           <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-2">
             <button
               v-for="host in recentHosts"
@@ -279,8 +296,8 @@ async function deleteSelectedHost() {
         <!-- All hosts grid -->
         <div>
           <h3 v-if="!searchQuery && recentHosts.length > 0"
-            class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">
-            All Hosts
+            class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2 flex items-center gap-1.5">
+            <span class="w-1.5 h-1.5 rounded-full bg-gray-500" />All Hosts
           </h3>
           <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
             <ConnectionsHostCard
@@ -352,8 +369,8 @@ async function deleteSelectedHost() {
               <p class="text-sm text-white">{{ hostCredential.name }}</p>
               <p class="text-xs text-gray-400">{{ hostCredential.username || 'No username' }}</p>
               <span
-                class="text-[10px] mt-1 inline-block px-1.5 py-0.5 rounded"
-                :class="hostCredential.type === 'ssh_key' ? 'bg-purple-900/40 text-purple-300' : 'bg-blue-900/40 text-blue-300'"
+                class="text-[10px] mt-1 inline-block px-1.5 py-0.5 rounded border"
+                :class="hostCredential.type === 'ssh_key' ? 'bg-wraith-900/40 text-wraith-300 border-wraith-700/50' : 'bg-amber-900/40 text-amber-300 border-amber-700/50'"
               >{{ hostCredential.type === 'ssh_key' ? 'SSH Key' : 'Password' }}</span>
             </div>
             <p v-else class="text-xs text-gray-600 mt-0.5 italic">None assigned</p>
@@ -366,7 +383,8 @@ async function deleteSelectedHost() {
               <span
                 v-for="tag in selectedHost.tags"
                 :key="tag"
-                class="text-xs bg-gray-800 text-gray-300 px-2 py-0.5 rounded border border-gray-700"
+                class="text-xs px-2 py-0.5 rounded border"
+                :class="tagColor(tag)"
               >{{ tag }}</span>
             </div>
             <p v-else class="text-xs text-gray-600 mt-0.5 italic">No tags</p>
@@ -419,7 +437,7 @@ async function deleteSelectedHost() {
     <!-- Inline modal for New Group / New Host -->
     <div v-if="showGroupDialog || showHostDialog" class="fixed inset-0 z-[9999] flex items-center justify-center" style="z-index: 99999;">
       <div class="absolute inset-0 bg-black bg-opacity-70" @click="showGroupDialog = false; showHostDialog = false" />
-      <div class="relative bg-gray-900 border border-gray-700 rounded-lg shadow-2xl p-6 w-96" style="background: #1a1a2e; border: 2px solid #e94560;">
+      <div class="relative bg-gray-900 border border-wraith-600 rounded-lg shadow-2xl p-6 w-96">
         <h3 class="text-lg font-bold text-white mb-4">{{ showGroupDialog ? 'New Group' : (editingHost?.id ? 'Edit Host' : 'New Host') }}</h3>
         <div v-if="showGroupDialog" class="space-y-3">
           <div>
@@ -429,7 +447,7 @@ async function deleteSelectedHost() {
           </div>
           <div class="flex justify-end gap-2 pt-2">
             <button @click="showGroupDialog = false" class="px-4 py-2 text-sm text-gray-400 hover:text-white">Cancel</button>
-            <button @click="createGroupInline()" class="px-4 py-2 text-sm bg-sky-600 hover:bg-sky-700 text-white rounded">Save</button>
+            <button @click="createGroupInline()" class="px-4 py-2 text-sm bg-wraith-600 hover:bg-wraith-700 text-white rounded">Save</button>
           </div>
         </div>
         <div v-else class="space-y-3">
@@ -481,7 +499,7 @@ async function deleteSelectedHost() {
           </div>
           <div class="flex justify-end gap-2 pt-2">
             <button @click="showHostDialog = false" class="px-4 py-2 text-sm text-gray-400 hover:text-white">Cancel</button>
-            <button @click="saveHostInline()" class="px-4 py-2 text-sm bg-sky-600 hover:bg-sky-700 text-white rounded">{{ editingHost?.id ? 'Update' : 'Save' }}</button>
+            <button @click="saveHostInline()" class="px-4 py-2 text-sm bg-wraith-600 hover:bg-wraith-700 text-white rounded">{{ editingHost?.id ? 'Update' : 'Save' }}</button>
           </div>
         </div>
       </div>