refactor(ui): update user profile display to use new data structure

Update preferences, patterns, and workflows sections to align with the new structured profile system. Replace frequency-based displays with category-based organization. Simplify pattern display by removing frequency bars and timestamps. Update workflow steps to remove step numbering. Adjust CSS styling to support new category badges and simplify confidence bar gradient.

Author: tickernelz

src/web/app.js

@@ -764,14 +764,14 @@ function renderUserProfile() {
               (p) => `
             <div class="preference-item">
               <div class="preference-header">
-                <span class="preference-name">${escapeHtml(p.preference)}</span>
+                <span class="preference-name">${escapeHtml(p.description)}</span>
                 <span class="confidence-badge">${Math.round(p.confidence * 100)}%</span>
               </div>
               <div class="confidence-bar">
                 <div class="confidence-fill" style="width: ${p.confidence * 100}%"></div>
               </div>
-              <p class="preference-evidence">${escapeHtml(p.evidence)}</p>
-              <p class="preference-meta">Updated: ${formatDate(p.lastUpdated)}</p>
+              <p class="preference-evidence">${escapeHtml(Array.isArray(p.evidence) ? p.evidence.join(", ") : p.evidence)}</p>
+              <p class="preference-meta">Category: ${escapeHtml(p.category)}</p>
             </div>
           `
             )
@@ -793,13 +793,9 @@ function renderUserProfile() {
               (p) => `
             <div class="pattern-item">
               <div class="pattern-header">
-                <span class="pattern-name">${escapeHtml(p.pattern)}</span>
-                <span class="frequency-badge">${p.frequency}x</span>
+                <span class="pattern-name">${escapeHtml(p.description)}</span>
+                <span class="category-badge">${escapeHtml(p.category)}</span>
               </div>
-              <div class="frequency-bar">
-                <div class="frequency-fill" style="width: ${Math.min(p.frequency * 10, 100)}%"></div>
-              </div>
-              <p class="pattern-meta">Last seen: ${formatDate(p.lastSeen)}</p>
             </div>
           `
             )
@@ -821,15 +817,13 @@ function renderUserProfile() {
               (w) => `
             <div class="workflow-item">
               <div class="workflow-header">
-                <span class="workflow-name">${escapeHtml(w.workflow)}</span>
-                <span class="frequency-badge">${w.frequency}x</span>
+                <span class="workflow-name">${escapeHtml(w.description)}</span>
               </div>
               <div class="workflow-steps">
                 ${w.steps
                   .map(
-                    (step, i) => `
+                    (step) => `
                   <div class="workflow-step">
-                    <span class="step-number">${i + 1}</span>
                     <span class="step-text">${escapeHtml(step)}</span>
                   </div>
                 `

src/web/styles.css

@@ -1291,7 +1291,7 @@ textarea:focus-visible {
 
 .confidence-fill {
   height: 100%;
-  background: linear-gradient(90deg, #00ccff, #00ff00);
+  background: #00ccff;
   transition: width 0.3s;
 }
 
@@ -1474,3 +1474,12 @@ textarea:focus-visible {
   height: 14px;
   vertical-align: middle;
 }
+
+.category-badge {
+  background: #00ccff;
+  color: #0a0a0a;
+  padding: 4px 10px;
+  border-radius: 3px;
+  font-size: 11px;
+  font-weight: bold;
+}