Link from avatar to user

VIBE/CHAT_LOG.md

@@ -226,6 +226,12 @@ Continue to log interactions to the VIBE directory.
 ### Assistant outcome
 Continued the append-only interaction logging convention by recording this prompt and outcome in both VIBE log files.
 
+### User
+On the home page, when clicking on the avatar or the user, show the profile information.
+
+### Assistant outcome
+Made each home-feed avatar and username link to the corresponding `/<username>/` profile page, added matching link layout styling, and added a regression assertion for the generated profile URL.
+
 ### User
 Show the avatar with each entry on the home page. On the specific /<user>/ page don't show the avatar and user name with each entry
 

VIBE/PROMPTS.md

@@ -124,6 +124,7 @@
 117. Change that location to be immediately below the edit and delete button
 116. When the user is authorized and on its /<user>/ page show a Mastodon post button with logo; after posting keep it functional but change its color.
 117. Continue to log interactions to the VIBE directory.
+118. On the home page, when clicking on the avatar or the user, show the profile information.
 
 ## Future entries
 

backend/tests/test_api.py

@@ -406,6 +406,7 @@ def test_public_and_admin_pages_render_html():
     assert 'postToMastodon(item, mastodonButton)' in feed_script
     assert 'tag.toLowerCase() === pref.tag.toLowerCase()' in feed_script
     assert 'return `${date.getFullYear()} ${months[date.getMonth()]} ${date.getDate()} - ${hours}:${minutes}`' in feed_script
+    assert 'profileLink.href = `/${encodeURIComponent(username)}/`' in feed_script
     assert 'edit-tag-options' in feed_script
     assert 'new_tags' in feed_script
     assert 'A link can have at most 10 tags.' in feed_script

frontend/static/feed.js

@@ -146,12 +146,17 @@ function renderFeed(items, showIdentity = true) {
     if (showIdentity) {
       const header = document.createElement('div');
       header.className = 'link-header';
-      header.appendChild(createAvatar(item.user));
+      const username = item.user?.username || 'unknown';
-
+      const profileLink = document.createElement('a');
+      profileLink.className = 'user-link';
+      profileLink.href = `/${encodeURIComponent(username)}/`;
+      profileLink.setAttribute('aria-label', `View ${username}'s profile`);
+      profileLink.appendChild(createAvatar(item.user));
       const userName = document.createElement('div');
       userName.className = 'user-name';
-      userName.textContent = item.user?.username || 'unknown';
+      userName.textContent = username;
-      header.appendChild(userName);
+      profileLink.appendChild(userName);
+      header.appendChild(profileLink);
       article.appendChild(header);
     }
     article.appendChild(title);

frontend/static/style.css

@@ -548,6 +548,12 @@ button:disabled {
   margin: 0 0 12px 18px;
 }
 
+.user-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+}
+
 .avatar {
   display: grid;
   width: 38px;
@@ -592,7 +598,7 @@ button:disabled {
 }
 
 .meta {
-  margin-top: 14px;
+  margin-top: 4px;
   color: var(--muted);
   font-size: 0.82rem;
 }