aimeat 1.16.2 → 1.18.0

package/dist/public/css/views/agents-detail.css

@@ -4,6 +4,18 @@
  *   Uses agd- prefix to avoid collisions with other profile styles.
  *   All colors use CSS variables from theme.css.
  * @version-history
+ *   v1.9.0 -- 2026-06-02 -- Component unification (#24 search bar): tokenize the
+ *     hardcoded hex fallbacks in .pf-agd-search-input (var(--border, #E5E7EB) ->
+ *     var(--border); var(--card-bg, #FFFFFF) -> var(--card); var(--text, #1A1A2E)
+ *     -> var(--text)) so the task search input flips in dark mode. Markup left in
+ *     place (view-scoped task filter state; not migrated to canonical SearchBar).
+ *   v1.8.0 -- 2026-06-02 -- Component unification (#21 key/value rows): tokenize the
+ *     hardcoded hex fallbacks in .pf-agd-info-label/.pf-agd-info-value
+ *     (var(--text-dim, #6B7280) -> var(--text-dim); var(--text, #1A1A2E) ->
+ *     var(--text)) so the agent-detail info rows flip in dark mode. Markup left
+ *     in place (borderless look differs from canonical .kv-row).
+ *   v1.7.0 -- 2026-06-02 -- Component unification (#6 stat cards): remove .agd-stat*/
+ *     .pf-agd-stat*; agent activity/quality stats use canonical .stat-card family.
  *   v1.0.0 -- 2026-05-21 -- Initial creation for Agent Dashboard Phase 1
  *   v1.1.0 -- 2026-05-22 -- Add capability badge styles for Capabilities sub-tab
  *   v1.2.0 -- 2026-05-22 -- Add Activity sub-tab styles (stats cards, chart, jobs, event log)
@@ -27,6 +39,16 @@
  *   v2.12.0 -- 2026-05-31 -- Add deliverable rating control styles (star picker, current-rating row, rate modal fields)
  *   v2.13.0 -- 2026-05-31 -- Add Quality-tab "Rate deliverables" pending-list row styles
  *   v2.14.0 -- 2026-06-01 -- Add Tasks-tab max-concurrent-tasks config row styles
+ *   v2.15.0 -- 2026-06-01 -- Blur-title eye is now hover-only (revealed on task-row hover/focus) to de-clutter the list; blurred rows keep their eye visible
+ *   v2.16.0 -- 2026-06-01 -- Add Tasks-tab triage UI styles (bucket segments + counts, search bar, time chips, per-task triage buttons)
+ *   v2.17.0 -- 2026-06-01 -- Add per-task memory entries list styles (expanded task)
+ *   v2.18.0 -- 2026-06-01 -- Per-task memory entries are collapsible with pretty-printed JSON bodies
+ *   v2.19.0 -- 2026-06-01 -- Structured JSON view for memory values (key/value rows, indented nested blocks, type colours)
+ *   v2.20.0 -- 2026-06-01 -- Tab bar wraps (flex-wrap) instead of horizontal scroll so all 10 tabs stay visible on two rows
+ *   v2.21.0 -- 2026-06-02 -- Unseen-change badges: collapsed-card mini-badge (pf-agd-change-badge) + per-tab number badges (pf-agd-tab-badge)
+ *   v2.22.0 -- 2026-06-02 -- Add divider line above the tab bar (border-top + spacing) so tabs don't blend with the status row above
+ *   v2.23.0 -- 2026-06-02 -- Compact .md-body styles for agent message bubbles (Markdown-rendered outbound replies)
+ *   v2.24.0 -- 2026-06-02 -- Compact .md-body styles for Markdown-rendered non-JSON task memory values (pf-agd-task-memory-md)
  *   v2.11.0 -- 2026-05-31 -- Widen the solo pop-out window (and pf-agd-solo max-width) so the agent card matches the list-view width and the full tab bar fits
  *   v2.12.0 -- 2026-05-31 -- Add completed-task deliverable styles (pf-agd-deliverable*) linking a task to its agent-memory output key
  *   v2.13.0 -- 2026-05-31 -- Add per-task blur-title toggle styles (pf-agd-blur-toggle, pf-agd-task-title--blurred) for hiding sensitive titles in screen recordings
@@ -267,7 +289,7 @@
   margin-top: 0.15rem;
 }
 .pf .agd-task-actions ,
-.pf .pf-agd-task-actions  { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
+.pf .pf-agd-task-actions  { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
 
 .pf .agd-event-log ,
 .pf .pf-agd-event-log  { max-height: 200px; overflow-y: auto; margin-top: 0.5rem; }
@@ -570,15 +592,9 @@
 
 /* ── Activity sub-tab ── */
 
-/* Activity stats cards */
-.pf .agd-stats-grid ,
-.pf .pf-agd-stats-grid  { display: flex; gap: 8px; margin-bottom: 16px; }
-.pf .agd-stat-card ,
-.pf .pf-agd-stat-card  { flex: 1; background: var(--card-bg, #FFFFFF); border: 1px solid var(--border, #E5E7EB); border-radius: 8px; padding: 12px; text-align: center; }
-.pf .agd-stat-value ,
-.pf .pf-agd-stat-value  { font-size: 1.5rem; font-weight: 600; color: var(--text, #1A1A2E); }
-.pf .agd-stat-label ,
-.pf .pf-agd-stat-label  { font-size: 0.75rem; color: var(--text-muted, #9CA3AF); }
+/* Activity stats cards — .agd-stat*/.pf-agd-stat* removed; agent activity/quality
+   stats use canonical .stat-grid / .stat-card / .stat-card-value / .stat-card-label.
+   Unified 2026-06-02 (#6). */
 
 /* Activity chart area */
 .pf .agd-chart-container ,
@@ -1699,9 +1715,19 @@
 
 .pf .pf-agd-tabs {
   display: flex;
+  /* Wrap to a second row instead of scrolling horizontally: with 10 tabs the
+     bar no longer fits one line on the card width. TABS (agent-card.js) is
+     ordered by owner usage frequency so the most-used tabs land on the top row
+     and the rarely-touched setup tabs fall to the second. */
+  flex-wrap: wrap;
   gap: 0;
+  row-gap: 2px;
+  /* Divider above the bar too, so the tabs read as their own block and don't
+     blend into the status row (Polling | Last seen | Today: N done) above. */
+  border-top: 1px solid var(--border, #E5E7EB);
+  margin-top: 0.5rem;
+  padding-top: 0.25rem;
   border-bottom: 1px solid var(--border, #E5E7EB);
-  overflow-x: auto;
 }
 .pf .pf-agd-tab {
   padding: 0.5rem 0.875rem;
@@ -1726,6 +1752,47 @@
   min-height: 150px;
 }
 
+/* ── Unseen-change badges ──
+   Collapsed-card mini-badge (total new across Tasks/Messages/Memory) + per-tab
+   number badges. Both use the accent colour so "something changed" reads at a
+   glance. Counts come from the localStorage last-seen baseline (agents-tab.js). */
+.pf .pf-agd-change-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  margin-left: 6px;
+  border-radius: 9px;
+  background: var(--accent, #E8564A);
+  color: #fff;
+  font-size: 0.68rem;
+  font-weight: 700;
+  line-height: 1;
+  flex-shrink: 0;
+}
+.pf .pf-agd-tab {
+  /* allow the inline count badge to sit beside the label */
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+.pf .pf-agd-tab-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border-radius: 8px;
+  background: var(--accent, #E8564A);
+  color: #fff;
+  font-size: 0.62rem;
+  font-weight: 700;
+  line-height: 1;
+}
+
 /* ── README tab (rendered from agents.<name>.readme markdown) ── */
 .pf .pf-agd-readme {
   /* Comfortable reading width that still fits ~80-col ASCII art in code fences. */
@@ -1793,6 +1860,75 @@
   color: var(--text, #1A1A2E);
 }
 
+/* ── Markdown inside agent (outbound) message bubbles ──
+   Agent replies render through the shared Markdown component. The README
+   .md-body rules are scoped to .pf-agd-readme only, so message bubbles need
+   their own compact variant: no outer margins (the bubble padding handles
+   spacing), modest headings, bordered code chips (the bubble surface is grey,
+   so a plain grey code background would blend). */
+.pf .pf-agd-msg-bubble .md-body > :first-child { margin-top: 0; }
+.pf .pf-agd-msg-bubble .md-body > :last-child { margin-bottom: 0; }
+.pf .pf-agd-msg-bubble .md-body p { margin: 0.35rem 0; }
+.pf .pf-agd-msg-bubble .md-body h1,
+.pf .pf-agd-msg-bubble .md-body h2,
+.pf .pf-agd-msg-bubble .md-body h3,
+.pf .pf-agd-msg-bubble .md-body h4 {
+  margin: 0.5rem 0 0.25rem;
+  line-height: 1.3;
+  font-size: 0.95rem;
+}
+.pf .pf-agd-msg-bubble .md-body h1 { font-size: 1.05rem; }
+.pf .pf-agd-msg-bubble .md-body h2 { font-size: 1rem; }
+.pf .pf-agd-msg-bubble .md-body ul,
+.pf .pf-agd-msg-bubble .md-body ol { margin: 0.35rem 0; padding-left: 1.4rem; }
+.pf .pf-agd-msg-bubble .md-body li { margin: 0.15rem 0; }
+.pf .pf-agd-msg-bubble .md-body a { color: var(--accent, #E8564A); }
+.pf .pf-agd-msg-bubble .md-body blockquote {
+  margin: 0.4rem 0;
+  padding: 0.2rem 0.6rem;
+  border-left: 3px solid var(--border, #E5E7EB);
+  color: var(--text-dim, #6B7280);
+}
+.pf .pf-agd-msg-bubble .md-body .md-code {
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  font-size: 0.8rem;
+  background: var(--card, #FFFFFF);
+  border: 1px solid var(--border, #E5E7EB);
+  padding: 0.02rem 0.3rem;
+  border-radius: 4px;
+}
+.pf .pf-agd-msg-bubble .md-body .md-pre {
+  margin: 0.45rem 0;
+  padding: 0.6rem;
+  background: var(--card, #FFFFFF);
+  border: 1px solid var(--border, #E5E7EB);
+  border-radius: 6px;
+  overflow-x: auto;
+}
+.pf .pf-agd-msg-bubble .md-body .md-pre .md-code {
+  display: block;
+  white-space: pre;
+  background: none;
+  border: none;
+  padding: 0;
+  tab-size: 4;
+  font-size: 0.78rem;
+  line-height: 1.35;
+  color: var(--text, #1A1A2E);
+}
+.pf .pf-agd-msg-bubble .md-body table {
+  border-collapse: collapse;
+  margin: 0.4rem 0;
+  font-size: 0.8rem;
+}
+.pf .pf-agd-msg-bubble .md-body th,
+.pf .pf-agd-msg-bubble .md-body td {
+  border: 1px solid var(--border, #E5E7EB);
+  padding: 0.25rem 0.5rem;
+  text-align: left;
+}
+.pf .pf-agd-msg-bubble .md-body th { background: var(--card-bg-alt, #F3F4F6); }
+
 /* ── Integration tab: Onboarding checklist ── */
 
 .pf .pf-agd-checklist {
@@ -1859,11 +1995,11 @@
 .pf .pf-agd-info-label {
   font-weight: 500;
   min-width: 120px;
-  color: var(--text-dim, #6B7280);
+  color: var(--text-dim);
   flex-shrink: 0;
 }
 .pf .pf-agd-info-value {
-  color: var(--text, #1A1A2E);
+  color: var(--text);
   word-break: break-all;
 }
 
@@ -2545,11 +2681,19 @@
   font-size: 0.95rem;
   line-height: 1;
   cursor: pointer;
-  opacity: 0.45;
+  /* Hidden by default to keep the task list uncluttered; revealed when the row
+     is hovered or the button is focused. opacity (not display) so the title
+     never shifts when the eye appears. A row whose title is currently hidden
+     keeps its eye visible (see --on) so the hidden state stays discoverable. */
+  opacity: 0;
   transition: opacity 0.15s ease;
 }
+.pf .pf-agd-task-item:hover .pf-agd-blur-toggle  { opacity: 0.55; }
 .pf .pf-agd-blur-toggle:hover  { opacity: 0.9; }
+.pf .pf-agd-blur-toggle:focus-visible  { opacity: 0.9; }
+/* A blurred (hidden-title) row shows its 🙈 at all times, hover or not. */
 .pf .pf-agd-blur-toggle--on  { opacity: 0.85; }
+.pf .pf-agd-task-item:hover .pf-agd-blur-toggle--on  { opacity: 0.95; }
 
 .pf .pf-agd-task-title--blurred  {
   filter: blur(5px);
@@ -2934,3 +3078,247 @@
   color: var(--text-muted, #9CA3AF);
   font-size: 0.75rem;
 }
+
+/* ── Tasks-tab triage: bucket segments + search + time chips ── */
+.pf .pf-agd-bucket-bar {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  border-bottom: 1px solid var(--border, #E5E7EB);
+  margin: 0.25rem 0 0.75rem;
+}
+.pf .pf-agd-bucket {
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  padding: 0.35rem 0.75rem;
+  font-size: 0.85rem;
+  color: var(--text-dim, #6B7280);
+  cursor: pointer;
+  transition: color 0.15s, border-color 0.15s;
+}
+.pf .pf-agd-bucket:hover { color: var(--text, #1A1A2E); }
+.pf .pf-agd-bucket--active {
+  color: var(--accent, #E8564A);
+  border-bottom-color: var(--accent, #E8564A);
+  font-weight: 600;
+}
+.pf .pf-agd-bucket-count {
+  display: inline-block;
+  min-width: 1.1rem;
+  font-size: 0.7rem;
+  color: var(--text-muted, #9CA3AF);
+}
+.pf .pf-agd-bucket--active .pf-agd-bucket-count { color: var(--accent, #E8564A); }
+.pf .pf-agd-bucket-spacer { flex: 1; }
+.pf .pf-agd-search-toggle {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 0.95rem;
+  padding: 0.25rem 0.4rem;
+  opacity: 0.6;
+  border-radius: 6px;
+}
+.pf .pf-agd-search-toggle:hover { opacity: 1; }
+.pf .pf-agd-search-toggle--on { opacity: 1; background: var(--bg-dim, #F3F4F6); }
+
+.pf .pf-agd-search-bar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+.pf .pf-agd-search-input {
+  flex: 1;
+  min-width: 12rem;
+  padding: 0.35rem 0.6rem;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--card);
+  color: var(--text);
+  font-size: 0.85rem;
+}
+.pf .pf-agd-time-chips { display: flex; gap: 0.25rem; }
+.pf .pf-agd-time-chip {
+  background: var(--bg-dim, #F3F4F6);
+  border: 1px solid var(--border, #E5E7EB);
+  border-radius: 999px;
+  padding: 0.15rem 0.6rem;
+  font-size: 0.75rem;
+  color: var(--text-dim, #6B7280);
+  cursor: pointer;
+}
+.pf .pf-agd-time-chip--on {
+  background: var(--accent, #E8564A);
+  border-color: var(--accent, #E8564A);
+  color: #fff;
+}
+
+/* Triage buttons pushed to the right of the task action row */
+.pf .pf-agd-task-actions-spacer { flex: 1; }
+
+/* Per-task memory entries (expanded task) -- collapsible per entry */
+.pf .pf-agd-task-memory { margin: 0.5rem 0; }
+.pf .pf-agd-task-memory-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  margin-top: 0.4rem;
+}
+.pf .pf-agd-task-memory-entry {
+  border: 1px solid var(--border, #E5E7EB);
+  border-radius: 8px;
+  background: var(--card-bg, #FFFFFF);
+  overflow: hidden;
+}
+.pf .pf-agd-task-memory-head {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  width: 100%;
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  padding: 0.4rem 0.55rem;
+  font-size: 0.78rem;
+}
+.pf .pf-agd-task-memory-head:hover { background: var(--bg-dim, #F3F4F6); }
+.pf .pf-agd-task-memory-caret {
+  color: var(--text-muted, #9CA3AF);
+  font-size: 0.65rem;
+  flex-shrink: 0;
+}
+.pf .pf-agd-task-memory-key {
+  color: var(--text-dim, #6B7280);
+  font-family: var(--font-mono, monospace);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+}
+.pf .pf-agd-task-memory-badge {
+  flex-shrink: 0;
+  font-size: 0.62rem;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  color: var(--accent, #E8564A);
+  border: 1px solid var(--accent, #E8564A);
+  border-radius: 4px;
+  padding: 0.02rem 0.3rem;
+}
+.pf .pf-agd-task-memory-body {
+  padding: 0.5rem 0.6rem;
+  border-top: 1px solid var(--border, #E5E7EB);
+  background: var(--bg-dim, #F3F4F6);
+  color: var(--text, #1A1A2E);
+  font-size: 0.75rem;
+  line-height: 1.5;
+  max-height: 340px;
+  overflow: auto;
+}
+/* Raw (non-JSON) memory value: keep formatting, wrap long lines. */
+.pf .pf-agd-task-memory-raw {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: var(--font-mono, monospace);
+}
+
+/* Markdown-rendered non-JSON memory values (e.g. an agent's latest_output).
+   Compact, mirroring the message-bubble .md-body variant. The memory body
+   background is grey (--bg-dim), so code chips get a border + light fill for
+   contrast. */
+.pf .pf-agd-task-memory-md .md-body > :first-child { margin-top: 0; }
+.pf .pf-agd-task-memory-md .md-body > :last-child { margin-bottom: 0; }
+.pf .pf-agd-task-memory-md .md-body p { margin: 0.3rem 0; }
+.pf .pf-agd-task-memory-md .md-body h1,
+.pf .pf-agd-task-memory-md .md-body h2,
+.pf .pf-agd-task-memory-md .md-body h3,
+.pf .pf-agd-task-memory-md .md-body h4 {
+  margin: 0.45rem 0 0.2rem;
+  line-height: 1.3;
+  font-size: 0.85rem;
+}
+.pf .pf-agd-task-memory-md .md-body h1 { font-size: 0.95rem; }
+.pf .pf-agd-task-memory-md .md-body h2 { font-size: 0.9rem; }
+.pf .pf-agd-task-memory-md .md-body ul,
+.pf .pf-agd-task-memory-md .md-body ol { margin: 0.3rem 0; padding-left: 1.3rem; }
+.pf .pf-agd-task-memory-md .md-body li { margin: 0.12rem 0; }
+.pf .pf-agd-task-memory-md .md-body a { color: var(--accent, #E8564A); }
+.pf .pf-agd-task-memory-md .md-body blockquote {
+  margin: 0.35rem 0;
+  padding: 0.15rem 0.55rem;
+  border-left: 3px solid var(--border, #E5E7EB);
+  color: var(--text-dim, #6B7280);
+}
+.pf .pf-agd-task-memory-md .md-body .md-code {
+  font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
+  font-size: 0.72rem;
+  background: var(--card-bg, #FFFFFF);
+  border: 1px solid var(--border, #E5E7EB);
+  padding: 0.02rem 0.3rem;
+  border-radius: 4px;
+}
+.pf .pf-agd-task-memory-md .md-body .md-pre {
+  margin: 0.4rem 0;
+  padding: 0.55rem;
+  background: var(--card-bg, #FFFFFF);
+  border: 1px solid var(--border, #E5E7EB);
+  border-radius: 6px;
+  overflow-x: auto;
+}
+.pf .pf-agd-task-memory-md .md-body .md-pre .md-code {
+  display: block;
+  white-space: pre;
+  background: none;
+  border: none;
+  padding: 0;
+  tab-size: 4;
+  font-size: 0.72rem;
+  line-height: 1.35;
+  color: var(--text, #1A1A2E);
+}
+.pf .pf-agd-task-memory-md .md-body table {
+  border-collapse: collapse;
+  margin: 0.35rem 0;
+  font-size: 0.72rem;
+}
+.pf .pf-agd-task-memory-md .md-body th,
+.pf .pf-agd-task-memory-md .md-body td {
+  border: 1px solid var(--border, #E5E7EB);
+  padding: 0.2rem 0.45rem;
+  text-align: left;
+}
+.pf .pf-agd-task-memory-md .md-body th { background: var(--card-bg, #FFFFFF); }
+
+/* Structured JSON view: key/value rows, nested blocks indented with a guide line. */
+.pf .pf-agd-json-block { display: flex; flex-direction: column; gap: 0.05rem; }
+.pf .pf-agd-json-row {
+  display: flex;
+  gap: 0.45rem;
+  align-items: baseline;
+  padding: 0.05rem 0;
+}
+.pf .pf-agd-json-row--nested { display: block; }
+.pf .pf-agd-json-row--nested > .pf-agd-json-block {
+  margin: 0.1rem 0 0.2rem 0.3rem;
+  padding-left: 0.65rem;
+  border-left: 1px solid var(--border, #E5E7EB);
+}
+.pf .pf-agd-json-key {
+  font-weight: 600;
+  color: var(--text-dim, #6B7280);
+  font-family: var(--font-mono, monospace);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.pf .pf-agd-json-key::after { content: ':'; color: var(--text-muted, #9CA3AF); font-weight: 400; }
+.pf .pf-agd-json-str { color: var(--text, #1A1A2E); word-break: break-word; }
+.pf .pf-agd-json-num { color: var(--info, #3B82F6); font-family: var(--font-mono, monospace); }
+.pf .pf-agd-json-bool { color: var(--accent, #E8564A); font-family: var(--font-mono, monospace); }
+.pf .pf-agd-json-null,
+.pf .pf-agd-json-empty { color: var(--text-muted, #9CA3AF); font-style: italic; }

package/dist/public/css/views/help.css

@@ -4,6 +4,7 @@
  *   DM Sans body text, JetBrains Mono for the prompt code block.
  * @version-history
  *   v1.0.0 — 2026-03-23 — Initial implementation
+ *   v1.1.0 — 2026-06-02 — Copied-state selector .hlp-copied → .copied (CopyButton component migration)
  */
 
 /* ── Container ── */
@@ -114,7 +115,7 @@
 }
 
 /* ── Copied state ── */
-.hlp-copy-btn.hlp-copied {
+.hlp-copy-btn.copied {
   background: linear-gradient(135deg, #10B981, #059669);
   box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
 }

package/dist/public/css/views/hobbies.css

@@ -1,67 +1,87 @@
+/**
+ * @file hobbies.css
+ * @description Styles for the Hobbies directory view (home, search, profile, join, me, matches). All classes scoped under the .hb- prefix.
+ * @version-history
+ *   v1.1.0 — 2026-06-02 — Phase 5: tokenize for dark mode (replaced bare light-only color literals with theme tokens)
+ *   v1.2.0 — 2026-06-02 — Component unification (#4 buttons): remove .hb-btn* family;
+ *     hobbies buttons use canonical theme.css .btn-primary / .btn-outline / .btn-danger / .btn-sm.
+ *   v1.3.0 — 2026-06-02 — Component unification (#5 inputs): remove .hb-form-input/
+ *     -textarea/-select; fields use canonical .input-field (kept hb-form-group/-label/-hint).
+ *   v1.4.0 — 2026-06-02 — Component unification (#6 stat cards): remove .hb-stat*;
+ *     stats use canonical .stat-grid / .stat-card / .stat-card-value.accent / .stat-card-label.
+ *   v1.5.0 — 2026-06-02 — Component unification (#19): tokenize .hb-alert-success/-error
+ *     (hardcoded rgba/#ef4444 → --success/-danger -bg/-fg/-border) — dark-mode fix.
+ *   v1.6.0 — 2026-06-02 — Component unification (#15 headers): tokenize .hb-page-title
+ *     gradient (hardcoded #E8564A → var(--accent-deep)); now token-equivalent to
+ *     canonical theme.css .page-title/.page-subtitle (candidates for future deletion).
+ *   v1.7.0 — 2026-06-02 — Component unification (#18 category cards): remove .hb-category-card/
+ *     -icon/-name/-count; tiles use canonical theme.css .category-card (kept .hb-categories-grid
+ *     wrapper — 200px columns differ from marketplace's 160px). Removed hardcoded hover #E8564A
+ *     and rgba(0,0,0,0.06) shadow (now tokenized in the canonical class) — dark-mode fix.
+ *   v1.8.0 — 2026-06-02 — Component unification (#17 pagination): tokenize
+ *     .hb-pagination .active background (hardcoded rgba(232,86,74,0.06) →
+ *     var(--accent-subtle)) — dark-mode fix. Numbered markup left in place (scoped
+ *     .hb-, different UI from the canonical prev/page/next Pagination).
+ *   v1.9.0 — 2026-06-02 — Component unification (#16 tags): tokenize .hb-tag
+ *     (rgba(232,86,74,0.06)/0.2 + #E8564A → --accent-subtle/--accent-border/--accent)
+ *     and .hb-tag-shared (rgba(34,197,94,.12)/.3 → --success-bg/-border/-fg) —
+ *     dark-mode fix. Markup left as .hb-tag (rounded-20px pill, bespoke vs .tag-pill).
+ */
 /* hobbies view — scoped under .hb */
 .hb-wrap { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; padding: 24px 16px 80px; }
-  .hb-nav { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; margin-bottom: 24px; border-bottom: 1px solid #E5E7EB; }
+  .hb-nav { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; margin-bottom: 24px; border-bottom: 1px solid var(--border); }
   .hb-nav-brand { color: var(--accent); font-weight: 700; font-size: 1rem; cursor: pointer; letter-spacing: .05em; }
   .hb-nav-brand:hover { color: #E8564A; }
   .hb-nav-links { display: flex; gap: 16px; align-items: center; }
   .hb-nav-links a { color: var(--text-dim); text-decoration: none; font-size: .85rem; cursor: pointer; transition: color .2s; }
   .hb-nav-links a:hover { color: var(--accent); }
   .hb-lang-toggle { display: flex; margin-left: 8px; }
-  .hb-lang-btn { padding: 4px 10px; border: 1px solid #E5E7EB; background: transparent; color: var(--text-muted); cursor: pointer; font-size: .75rem; font-weight: 700; transition: all .2s; }
+  .hb-lang-btn { padding: 4px 10px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; font-size: .75rem; font-weight: 700; transition: all .2s; }
   .hb-lang-btn:first-child { border-radius: 4px 0 0 4px; }
   .hb-lang-btn:last-child { border-radius: 0 4px 4px 0; }
   .hb-lang-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
-  .hb-page-title { font-size: 1.8rem; font-weight: 700; background: linear-gradient(135deg, var(--accent), #E8564A); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 8px; }
+  /* hb-page-title is token-equivalent to canonical theme.css .page-title (candidate for future deletion → use .page-title). */
+  .hb-page-title { font-size: 1.8rem; font-weight: 700; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 8px; }
   .hb-page-subtitle { color: var(--text-dim); font-size: 1rem; margin-bottom: 32px; }
-  .hb-card { background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: var(--radius); padding: 24px; margin-bottom: 16px; transition: background .2s, border-color .2s, box-shadow .2s; }
-  .hb-card:hover { background: #F3F4F6; border-color: #E8564A; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
+  .hb-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 16px; transition: background .2s, border-color .2s, box-shadow .2s; }
+  .hb-card:hover { background: var(--bg-surface); border-color: #E8564A; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
   .hb-card-link { display: block; text-decoration: none; color: inherit; cursor: pointer; }
   .hb-card-title { font-size: 1.1rem; font-weight: 600; color: var(--text); margin-bottom: 8px; }
   .hb-card-meta { color: var(--text-dim); font-size: .85rem; margin-bottom: 8px; }
   .hb-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
-  .hb-tag { display: inline-block; padding: 4px 12px; background: rgba(232,86,74,0.06); border: 1px solid rgba(232,86,74,0.2); border-radius: 20px; font-size: .8rem; color: #E8564A; white-space: nowrap; }
-  .hb-tag-shared { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.3); color: var(--success); }
-  .hb-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 24px; border: none; border-radius: var(--radius-sm); font-size: .9rem; font-weight: 600; cursor: pointer; transition: all .2s; text-decoration: none; }
-  .hb-btn-primary { background: linear-gradient(135deg, var(--accent), #E8564A); color: #fff; }
-  .hb-btn-primary:hover { opacity: .9; box-shadow: 0 2px 8px rgba(232,86,74,0.2); }
-  .hb-btn-secondary { background: #F3F4F6; border: 1px solid #E5E7EB; color: var(--text); }
-  .hb-btn-secondary:hover { background: #E5E7EB; border-color: var(--accent); color: var(--accent); }
-  .hb-btn-danger { background: rgba(239,68,68,.15); border: 1px solid rgba(239,68,68,.3); color: #ef4444; }
-  .hb-btn-danger:hover { background: rgba(239,68,68,.25); }
-  .hb-btn-sm { padding: 6px 14px; font-size: .8rem; }
+  .hb-tag { display: inline-block; padding: 4px 12px; background: var(--accent-subtle); border: 1px solid var(--accent-border); border-radius: 20px; font-size: .8rem; color: var(--accent); white-space: nowrap; }
+  .hb-tag-shared { background: var(--success-bg); border-color: var(--success-border); color: var(--success-fg); }
+  /* .hb-btn* removed — hobbies uses canonical theme.css .btn-primary / .btn-outline /
+     .btn-danger (tokenized) / .btn-sm (anchor-safe). Unified 2026-06-02 (#4 buttons). */
   .hb-form-group { margin-bottom: 16px; }
   .hb-form-label { display: block; font-size: .85rem; color: var(--text-dim); margin-bottom: 6px; font-weight: 500; }
-  .hb-form-input, .hb-form-textarea, .hb-form-select { width: 100%; padding: 10px 14px; background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: var(--radius-sm); color: #1A1A2E; font-size: .9rem; font-family: var(--font); transition: border-color .2s; }
-  .hb-form-input:focus, .hb-form-textarea:focus, .hb-form-select:focus { outline: none; border-color: var(--accent); }
-  .hb-form-textarea { min-height: 80px; resize: vertical; }
-  .hb-form-select { appearance: auto; }
+  /* .hb-form-input/-textarea/-select removed — hobbies form fields use canonical
+     theme.css .input-field (focus ring added). Unified 2026-06-02 (#5). */
   .hb-form-hint { font-size: .78rem; color: var(--text-muted); margin-top: 4px; }
-  .hb-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 32px; }
-  .hb-stat-card { background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: var(--radius-sm); padding: 16px; text-align: center; }
-  .hb-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--accent); }
-  .hb-stat-label { font-size: .78rem; color: var(--text-muted); margin-top: 4px; }
+  /* .hb-stat* removed — hobbies stats use canonical .stat-grid / .stat-card /
+     .stat-card-value.accent / .stat-card-label. Unified 2026-06-02 (#6). */
+  /* Grid wrapper kept per-view: hobbies uses 200px min-width columns (marketplace 160px). */
   .hb-categories-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 32px; }
-  .hb-category-card { background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: var(--radius); padding: 20px; text-align: center; cursor: pointer; transition: all .2s; }
-  .hb-category-card:hover { background: #F3F4F6; border-color: #E8564A; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
-  .hb-category-icon { font-size: 2rem; margin-bottom: 8px; }
-  .hb-category-name { font-size: .95rem; font-weight: 600; color: var(--text); }
-  .hb-category-count { font-size: .78rem; color: var(--text-muted); margin-top: 4px; }
+  /* .hb-category-card/-icon/-name/-count removed — hobbies interest tiles use canonical
+     theme.css .category-card / -icon / -name / -count. The former rules were token-
+     equivalent; the hover #E8564A and rgba(0,0,0,0.06) shadow are now tokenized
+     (var(--accent)/var(--shadow-md)) — dark-mode fix. Unified 2026-06-02 (#18). */
   .hb-empty { text-align: center; padding: 48px 16px; }
   .hb-empty-icon { font-size: 3rem; margin-bottom: 16px; opacity: .4; }
   .hb-empty-text { color: var(--text-dim); font-size: 1rem; }
   .hb-alert { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: .9rem; }
-  .hb-alert-success { background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.3); color: var(--success); }
-  .hb-alert-error { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3); color: #ef4444; }
+  .hb-alert-success { background: var(--success-bg); border: 1px solid var(--success-border); color: var(--success-fg); }
+  .hb-alert-error { background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--danger-fg); }
   .hb-facets { margin-bottom: 24px; }
   .hb-facet-group { margin-bottom: 12px; }
   .hb-facet-label { font-size: .78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
   .hb-facet-items { display: flex; flex-wrap: wrap; gap: 6px; }
-  .hb-facet-item { padding: 4px 10px; background: #F3F4F6; border: 1px solid #E5E7EB; border-radius: 20px; font-size: .78rem; color: var(--text-dim); cursor: pointer; transition: all .2s; }
+  .hb-facet-item { padding: 4px 10px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 20px; font-size: .78rem; color: var(--text-dim); cursor: pointer; transition: all .2s; }
   .hb-facet-item:hover { border-color: var(--accent); color: var(--accent); }
   .hb-pagination { display: flex; gap: 8px; justify-content: center; margin-top: 24px; }
-  .hb-pagination a { padding: 8px 16px; background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-size: .85rem; cursor: pointer; }
+  .hb-pagination a { padding: 8px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-size: .85rem; cursor: pointer; }
   .hb-pagination a:hover { border-color: var(--accent); color: var(--accent); }
-  .hb-pagination .active { border-color: var(--accent); color: var(--accent); background: rgba(232,86,74,0.06); }
+  .hb-pagination .active { border-color: var(--accent); color: var(--accent); background: var(--accent-subtle); }
   .hb-profile-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
   .hb-profile-avatar { font-size: 2.5rem; }
   .hb-profile-name { font-size: 1.5rem; font-weight: 700; color: var(--text); }