@qiaolei81/copilot-session-viewer 0.2.6 → 0.2.7

package/CHANGELOG.md

@@ -5,6 +5,31 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.2.6] - 2026-03-05
+
+### Fixed
+- **304 Caching on Live Sessions** - Disabled ETag on events API (`Cache-Control: no-store`) so active/WIP sessions always return fresh data on page refresh
+- **Updated Time Inaccuracy** - Session detail page now shows last event timestamp as "Updated" time instead of file mtime
+- **E2E CI Stability** - `#loading-indicator` is always in DOM regardless of session count; removed conditional session count check that caused false negatives
+
+## [0.2.5] - 2026-03-04
+
+### Fixed
+- **Flaky Unit Tests** - Upload directory now isolated per test via `UPLOAD_DIR` env var to prevent cross-test pollution
+- **Timing Variance in Tests** - `ageMs` threshold relaxed from `>= 0` to `>= -100` to tolerate clock precision on fast CI runners
+
+## [0.2.4] - 2026-03-04
+
+### Fixed
+- **E2E Skip on Empty Environment** - Tests now skip gracefully when no sessions exist in CI (no `~/.copilot/session-state/` data)
+- **VSCode Filter Pill** - Temporarily hidden in UI (feature in progress)
+
+## [0.2.3] - 2026-03-04
+
+### Fixed
+- **Lint Errors** - Fixed unused variable warnings in `vscode-parser.js` (`canParse`, `agentName`, `itemIdx`) and `sessionRepository.js` (unused `VsCodeParser` import)
+- **Stale Unit Tests** - Updated test expectations to match current API signatures (`getPaginatedSessions(1, 20, "copilot")`)
+
 ## [0.2.2] - 2026-02-27
 
 ### Fixed
@@ -190,6 +215,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - CORS restricted to localhost
 - File upload size limits (50MB)
 
+[0.2.6]: https://github.com/qiaolei81/copilot-session-viewer/releases/tag/v0.2.6
+[0.2.5]: https://github.com/qiaolei81/copilot-session-viewer/releases/tag/v0.2.5
+[0.2.4]: https://github.com/qiaolei81/copilot-session-viewer/releases/tag/v0.2.4
+[0.2.3]: https://github.com/qiaolei81/copilot-session-viewer/releases/tag/v0.2.3
 [0.1.7]: https://github.com/qiaolei81/copilot-session-viewer/releases/tag/v0.1.7
 [0.1.6]: https://github.com/qiaolei81/copilot-session-viewer/releases/tag/v0.1.6
 [0.1.3]: https://github.com/qiaolei81/copilot-session-viewer/releases/tag/v0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qiaolei81/copilot-session-viewer",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "Web UI for viewing GitHub Copilot CLI session logs",
   "author": "Lei Qiao <qiaolei81@gmail.com>",
   "license": "MIT",

package/src/app.js

@@ -15,6 +15,7 @@ const { requestTimeout, developmentCors, errorHandler, notFoundHandler } = requi
 const SessionController = require('./controllers/sessionController');
 const InsightController = require('./controllers/insightController');
 const UploadController = require('./controllers/uploadController');
+const TagController = require('./controllers/tagController');
 
 function createApp(options = {}) {
   const app = express();
@@ -26,6 +27,7 @@ function createApp(options = {}) {
   const sessionController = new SessionController(options.sessionService);
   const insightController = new InsightController(options.insightService, options.sessionService);
   const uploadController = new UploadController();
+  const tagController = new TagController(options.tagService);
 
   // Minimal security headers for local development tool
   // Custom CSP without upgrade-insecure-requests
@@ -96,6 +98,11 @@ function createApp(options = {}) {
   app.get('/api/sessions/:id/events', sessionController.getSessionEvents.bind(sessionController));
   app.get('/api/sessions/:id/timeline', sessionController.getTimeline.bind(sessionController));
 
+  // Tag routes
+  app.get('/api/tags', tagController.getAllTags.bind(tagController));
+  app.get('/api/sessions/:id/tags', tagController.getSessionTags.bind(tagController));
+  app.put('/api/sessions/:id/tags', tagController.setSessionTags.bind(tagController));
+
   // Upload routes
   app.get('/session/:id/share', uploadController.shareSession.bind(uploadController));
   app.post('/session/import',

package/src/controllers/tagController.js

@@ -0,0 +1,105 @@
+const TagService = require('../services/tagService');
+const SessionRepository = require('../services/sessionRepository');
+const { isValidSessionId } = require('../utils/helpers');
+
+class TagController {
+  constructor(tagService = null, sessionRepository = null) {
+    this.tagService = tagService || new TagService();
+    this.sessionRepository = sessionRepository || new SessionRepository();
+  }
+
+  /**
+   * GET /api/tags
+   * Get all unique tags across all sessions (for autocomplete)
+   */
+  async getAllTags(req, res) {
+    try {
+      const tags = await this.tagService.getAllKnownTags();
+      res.json({ tags });
+    } catch (err) {
+      console.error('Error getting all tags:', err);
+      res.status(500).json({ error: 'Error loading tags' });
+    }
+  }
+
+  /**
+   * GET /api/sessions/:id/tags
+   * Get tags for a specific session
+   */
+  async getSessionTags(req, res) {
+    try {
+      const sessionId = req.params.id;
+
+      if (!isValidSessionId(sessionId)) {
+        return res.status(400).json({ error: 'Invalid session ID' });
+      }
+
+      // Find session by ID
+      const session = await this.sessionRepository.findById(sessionId);
+      if (!session) {
+        return res.status(404).json({ error: 'Session not found' });
+      }
+
+      const tags = await this.tagService.getSessionTags(session);
+      res.json({ tags });
+    } catch (err) {
+      console.error('Error getting session tags:', err);
+      res.status(500).json({ error: 'Error loading session tags' });
+    }
+  }
+
+  /**
+   * PUT /api/sessions/:id/tags
+   * Set tags for a specific session
+   * Body: { tags: ["tag1", "tag2"] }
+   */
+  async setSessionTags(req, res) {
+    try {
+      const sessionId = req.params.id;
+      const { tags } = req.body;
+
+      if (!isValidSessionId(sessionId)) {
+        return res.status(400).json({ error: 'Invalid session ID' });
+      }
+
+      if (!Array.isArray(tags)) {
+        return res.status(400).json({ error: 'Tags must be an array' });
+      }
+
+      // Validate tag count
+      if (tags.length > 10) {
+        return res.status(400).json({ error: 'Maximum 10 tags per session' });
+      }
+
+      // Validate tag length
+      for (const tag of tags) {
+        if (typeof tag !== 'string' || tag.trim().length === 0) {
+          return res.status(400).json({ error: 'Tags must be non-empty strings' });
+        }
+        if (tag.length > 30) {
+          return res.status(400).json({ error: 'Tag length must not exceed 30 characters' });
+        }
+      }
+
+      // Find session by ID
+      const session = await this.sessionRepository.findById(sessionId);
+      if (!session) {
+        return res.status(404).json({ error: 'Session not found' });
+      }
+
+      const savedTags = await this.tagService.setSessionTags(session, tags);
+      res.json({ tags: savedTags });
+    } catch (err) {
+      console.error('Error setting session tags:', err);
+      if (err.message === 'Maximum 10 tags per session') {
+        return res.status(400).json({ error: err.message });
+      }
+      if (err.message === 'Session must have a directory field') {
+        return res.status(400).json({ error: 'Session does not support tagging' });
+      }
+      res.status(500).json({ error: 'Error saving session tags' });
+    }
+  }
+}
+
+module.exports = TagController;

package/src/services/tagService.js

@@ -0,0 +1,195 @@
+const fs = require('fs').promises;
+const path = require('path');
+const os = require('os');
+
+/**
+ * Service for managing session tags
+ * - Per-session tags: stored in {session.directory}/tags.json as ["tag1", "tag2"]
+ * - Global known tags: stored in ~/.session-viewer/known-tags.json as ["tag1", "tag2", ...]
+ */
+class TagService {
+  constructor() {
+    this.knownTagsDir = path.join(os.homedir(), '.session-viewer');
+    this.knownTagsFilePath = path.join(this.knownTagsDir, 'known-tags.json');
+  }
+
+  /**
+   * Ensure known-tags directory and file exist
+   */
+  async ensureKnownTagsFile() {
+    try {
+      await fs.access(this.knownTagsFilePath);
+    } catch (err) {
+      // File doesn't exist, create directory and empty array
+      await fs.mkdir(this.knownTagsDir, { recursive: true });
+      await fs.writeFile(this.knownTagsFilePath, JSON.stringify([]), 'utf8');
+    }
+  }
+
+  /**
+   * Read known tags from global file
+   * @returns {Promise<string[]>} Array of known tags
+   */
+  async readKnownTagsFile() {
+    await this.ensureKnownTagsFile();
+    try {
+      const content = await fs.readFile(this.knownTagsFilePath, 'utf8');
+      return JSON.parse(content);
+    } catch (err) {
+      console.error('Error reading known tags file:', err);
+      return [];
+    }
+  }
+
+  /**
+   * Write known tags to global file
+   * @param {string[]} tags - Array of known tags
+   */
+  async writeKnownTagsFile(tags) {
+    await this.ensureKnownTagsFile();
+    await fs.writeFile(this.knownTagsFilePath, JSON.stringify(tags, null, 2), 'utf8');
+  }
+
+  /**
+   * Get tags file path for a session
+   * @param {Session} session - Session object with directory field
+   * @returns {string} Path to tags.json
+   */
+  getSessionTagsFilePath(session) {
+    if (!session.directory) {
+      throw new Error('Session must have a directory field');
+    }
+    return path.join(session.directory, 'tags.json');
+  }
+
+  /**
+   * Normalize tag name (lowercase, trim, max 30 chars)
+   * @param {string} tag - Tag name
+   * @returns {string} Normalized tag
+   */
+  normalizeTag(tag) {
+    return tag.trim().toLowerCase().substring(0, 30);
+  }
+
+  /**
+   * Get all known tags for autocomplete
+   * @returns {Promise<string[]>} Array of unique tags
+   */
+  async getAllKnownTags() {
+    const tags = await this.readKnownTagsFile();
+    return tags.sort();
+  }
+
+  /**
+   * Get tags for a specific session
+   * @param {Session} session - Session object with directory field
+   * @returns {Promise<string[]>} Array of tags
+   */
+  async getSessionTags(session) {
+    const tagsFilePath = this.getSessionTagsFilePath(session);
+
+    try {
+      await fs.access(tagsFilePath);
+      const content = await fs.readFile(tagsFilePath, 'utf8');
+      return JSON.parse(content);
+    } catch (err) {
+      // File doesn't exist or can't be read, return empty array
+      return [];
+    }
+  }
+
+  /**
+   * Set tags for a specific session
+   * @param {Session} session - Session object with directory field
+   * @param {string[]} tags - Array of tag names
+   * @returns {Promise<string[]>} Normalized and saved tags
+   */
+  async setSessionTags(session, tags) {
+    if (!Array.isArray(tags)) {
+      throw new Error('Tags must be an array');
+    }
+
+    // Normalize tags (lowercase, trim, max 30 chars)
+    const normalizedTags = tags
+      .map(tag => this.normalizeTag(tag))
+      .filter(tag => tag.length > 0)
+      .filter((tag, index, self) => self.indexOf(tag) === index); // Remove duplicates
+
+    // Enforce max 10 tags per session
+    if (normalizedTags.length > 10) {
+      throw new Error('Maximum 10 tags per session');
+    }
+
+    const tagsFilePath = this.getSessionTagsFilePath(session);
+
+    if (normalizedTags.length === 0) {
+      // Remove tags file if no tags
+      try {
+        await fs.unlink(tagsFilePath);
+      } catch (err) {
+        // File doesn't exist, ignore
+      }
+    } else {
+      // Write tags to session directory
+      await fs.writeFile(tagsFilePath, JSON.stringify(normalizedTags, null, 2), 'utf8');
+
+      // Update known tags (append and deduplicate)
+      await this.updateKnownTags(normalizedTags);
+    }
+
+    return normalizedTags;
+  }
+
+  /**
+   * Update known tags by appending new tags and deduplicating
+   * @param {string[]} newTags - New tags to add to known tags
+   */
+  async updateKnownTags(newTags) {
+    const knownTags = await this.readKnownTagsFile();
+    const allTags = [...knownTags, ...newTags];
+    const uniqueTags = [...new Set(allTags)];
+    await this.writeKnownTagsFile(uniqueTags);
+  }
+
+  /**
+   * Add tags to a session (merge with existing)
+   * @param {Session} session - Session object with directory field
+   * @param {string[]} newTags - Tags to add
+   * @returns {Promise<string[]>} Updated tags array
+   */
+  async addSessionTags(session, newTags) {
+    const existingTags = await this.getSessionTags(session);
+    const mergedTags = [...existingTags, ...newTags];
+    return await this.setSessionTags(session, mergedTags);
+  }
+
+  /**
+   * Remove tags from a session
+   * @param {Session} session - Session object with directory field
+   * @param {string[]} tagsToRemove - Tags to remove
+   * @returns {Promise<string[]>} Updated tags array
+   */
+  async removeSessionTags(session, tagsToRemove) {
+    const existingTags = await this.getSessionTags(session);
+    const normalizedToRemove = tagsToRemove.map(tag => this.normalizeTag(tag));
+    const updatedTags = existingTags.filter(tag => !normalizedToRemove.includes(tag));
+    return await this.setSessionTags(session, updatedTags);
+  }
+
+  /**
+   * Get tags for multiple sessions (batch)
+   * @param {Session[]} sessions - Array of session objects
+   * @returns {Promise<Object>} Map of sessionId -> tags array
+   */
+  async getMultipleSessionTags(sessions) {
+    const result = {};
+
+    for (const session of sessions) {
+      result[session.id] = await this.getSessionTags(session);
+    }
+
+    return result;
+  }
+}
+
+module.exports = TagService;

package/views/index.ejs

@@ -161,7 +161,6 @@
       align-items: center;
       gap: 4px;
       flex-shrink: 0;
-      margin-left: 12px;
     }
     .session-summary {
       color: #e6edf3;
@@ -216,7 +215,46 @@
     .session-info-item.workspace .session-info-value {
       font-weight: 500;
     }
-    
+
+    /* Session tags */
+    .session-badges-tags {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: flex-start;
+      gap: 4px;
+      margin-top: 4px;
+    }
+    .session-badges-tags .session-badges {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+    }
+    .session-badges-tags .session-tags {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+      margin-top: 0;
+      padding-top: 0;
+      border-top: none;
+    }
+    .session-tags {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+      margin-top: 8px;
+      padding-top: 8px;
+      border-top: 1px solid #21262d;
+    }
+    .session-tag {
+      display: inline-block;
+      padding: 3px 8px;
+      border-radius: 10px;
+      font-size: 11px;
+      font-weight: 500;
+      color: #fff;
+    }
+
     .status-badge {
       display: inline-block;
       font-size: 14px;
@@ -548,12 +586,19 @@
 
         const data = await response.json();
         const existingIds = new Set(allSessions.map(s => s.id));
+        const newSessions = [];
         for (const s of data.sessions) {
-          if (!existingIds.has(s.id)) allSessions.push(s);
+          if (!existingIds.has(s.id)) {
+            allSessions.push(s);
+            newSessions.push(s);
+          }
         }
         currentState().offset += data.sessions.length;
         currentState().hasMore = data.hasMore;
 
+        // Load tags for new sessions
+        await attachTagsToSessions(newSessions);
+
         renderAllSessions();
       } catch (err) {
         console.error('Error loading more sessions:', err);
@@ -819,11 +864,24 @@
       
       const wipClass = session.sessionStatus === 'wip' ? ' recent-item-wip' : '';
 
+      // Render tags
+      let tagsHtml = '';
+      if (session.tags && session.tags.length > 0) {
+        const tagsItems = session.tags.map(tag => {
+          const color = getTagColor(tag);
+          return `<span class="session-tag" style="background-color: ${color}" title="${escapeHtml(tag)}">${escapeHtml(tag)}</span>`;
+        }).join('');
+        tagsHtml = `<div class="session-tags">${tagsItems}</div>`;
+      }
+
       return `
         <a href="/session/${session.id}" class="recent-item${wipClass}">
           <div class="session-id">
             <span class="session-id-text" title="${escapeHtml(session.id)}">${escapeHtml(session.id)}</span>
+          </div>
+          <div class="session-badges-tags">
             <div class="session-badges">${badges}</div>
+            ${tagsHtml}
           </div>
           ${summaryHtml}
           <div class="session-divider"></div>
@@ -849,6 +907,56 @@
       return div.innerHTML;
     }
 
+    // Tag colors (same as session-vue.ejs)
+    const tagColors = [
+      '#3b82f6', // blue
+      '#10b981', // green
+      '#f59e0b', // amber
+      '#ef4444', // red
+      '#8b5cf6', // purple
+      '#ec4899', // pink
+      '#06b6d4', // cyan
+      '#f97316'  // orange
+    ];
+
+    function getTagColor(tag) {
+      let hash = 0;
+      for (let i = 0; i < tag.length; i++) {
+        hash = tag.charCodeAt(i) + ((hash << 5) - hash);
+      }
+      return tagColors[Math.abs(hash) % tagColors.length];
+    }
+
+    // Load tags for sessions
+    async function loadSessionTags(sessionIds) {
+      try {
+        const tagPromises = sessionIds.map(id =>
+          fetch(`/api/sessions/${id}/tags`)
+            .then(r => r.ok ? r.json() : { tags: [] })
+            .then(data => ({ id, tags: data.tags || [] }))
+            .catch(() => ({ id, tags: [] }))
+        );
+        const results = await Promise.all(tagPromises);
+        const tagsMap = {};
+        results.forEach(({ id, tags }) => {
+          tagsMap[id] = tags;
+        });
+        return tagsMap;
+      } catch (err) {
+        console.error('Error loading session tags:', err);
+        return {};
+      }
+    }
+
+    // Attach tags to sessions
+    async function attachTagsToSessions(sessions) {
+      const sessionIds = sessions.map(s => s.id);
+      const tagsMap = await loadSessionTags(sessionIds);
+      sessions.forEach(session => {
+        session.tags = tagsMap[session.id] || [];
+      });
+    }
+
     // Filter pill click handler
     function setupFilterPills() {
       const filterPills = document.querySelectorAll('.filter-pill');
@@ -875,11 +983,18 @@
               if (resp.ok) {
                 const data = await resp.json();
                 const existingIds = new Set(allSessions.map(s => s.id));
+                const newSessions = [];
                 for (const s of (data.sessions || [])) {
-                  if (!existingIds.has(s.id)) allSessions.push(s);
+                  if (!existingIds.has(s.id)) {
+                    allSessions.push(s);
+                    newSessions.push(s);
+                  }
                 }
                 sourceState[currentSourceFilter].offset = (data.sessions || []).length;
                 sourceState[currentSourceFilter].hasMore = data.hasMore;
+
+                // Load tags for new sessions
+                await attachTagsToSessions(newSessions);
               }
             } catch (e) {
               console.error('Failed to load sessions for source:', currentSourceFilter, e);
@@ -894,7 +1009,10 @@
     }
 
     // Render grouped sessions
-    document.addEventListener('DOMContentLoaded', function() {
+    document.addEventListener('DOMContentLoaded', async function() {
+      // Load tags for initial sessions
+      await attachTagsToSessions(allSessions);
+
       renderAllSessions();
 
       // Infinite scroll

package/views/session-vue.ejs

@@ -330,7 +330,149 @@
       background: #161b22;
       color: #6e7681;
     }
-    
+
+    /* Session Tags */
+    .session-tags-container {
+      margin-top: 16px;
+    }
+    .tags-display {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+      min-height: 28px;
+      align-items: flex-start;
+    }
+    .tag-label {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 4px 10px;
+      border-radius: 12px;
+      font-size: 12px;
+      font-weight: 500;
+      color: #fff;
+      cursor: default;
+      transition: opacity 0.2s;
+    }
+    .tag-label:hover {
+      opacity: 0.8;
+    }
+    .tag-remove {
+      background: none;
+      border: none;
+      color: rgba(255, 255, 255, 0.7);
+      cursor: pointer;
+      font-size: 14px;
+      line-height: 1;
+      padding: 0;
+      margin-left: 2px;
+      transition: color 0.2s;
+    }
+    .tag-remove:hover {
+      color: #fff;
+    }
+    .tags-edit-btn {
+      background: none;
+      border: 1px solid #30363d;
+      border-radius: 4px;
+      color: #8b949e;
+      cursor: pointer;
+      padding: 4px 8px;
+      font-size: 12px;
+      transition: all 0.2s;
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+    }
+    .tags-edit-btn:hover {
+      border-color: #58a6ff;
+      color: #58a6ff;
+    }
+    .tags-dropdown {
+      position: relative;
+      margin-top: 8px;
+    }
+    .tags-input-container {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+      padding: 8px;
+      background: #161b22;
+      border: 1px solid #30363d;
+      border-radius: 6px;
+      min-height: 38px;
+    }
+    .tags-input-container:focus-within {
+      border-color: #58a6ff;
+    }
+    .tag-input-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 4px 8px;
+      border-radius: 12px;
+      font-size: 12px;
+      font-weight: 500;
+      color: #fff;
+    }
+    .tag-input-chip button {
+      background: none;
+      border: none;
+      color: rgba(255, 255, 255, 0.7);
+      cursor: pointer;
+      font-size: 12px;
+      padding: 0;
+      margin-left: 2px;
+    }
+    .tag-input-chip button:hover {
+      color: #fff;
+    }
+    .tags-text-input {
+      flex: 1;
+      min-width: 120px;
+      background: transparent;
+      border: none;
+      outline: none;
+      color: #c9d1d9;
+      font-size: 13px;
+      padding: 4px;
+    }
+    .tags-text-input::placeholder {
+      color: #6e7681;
+    }
+    .tags-autocomplete {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      right: 0;
+      background: #161b22;
+      border: 1px solid #30363d;
+      border-radius: 6px;
+      margin-top: 4px;
+      max-height: 200px;
+      overflow-y: auto;
+      z-index: 100;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    }
+    .tags-autocomplete-item {
+      padding: 8px 12px;
+      font-size: 13px;
+      color: #c9d1d9;
+      cursor: pointer;
+      transition: background 0.2s;
+    }
+    .tags-autocomplete-item:hover {
+      background: rgba(88, 166, 255, 0.15);
+    }
+    .tags-autocomplete-item.selected {
+      background: rgba(88, 166, 255, 0.25);
+    }
+    .tags-error {
+      margin-top: 6px;
+      font-size: 12px;
+      color: #f85149;
+    }
+
     /* Content */
     .content {
       flex: 1;
@@ -2041,7 +2183,190 @@
             markdownCache.clear();
           });
         });
-        
+
+        // Session Tags
+        const sessionTags = ref([]);
+        const allTags = ref([]);
+        const tagsEditing = ref(false);
+        const editingTags = ref([]);
+        const tagInputValue = ref('');
+        const tagInputRef = ref(null);
+        const tagsError = ref('');
+        const showAutocomplete = ref(false);
+        const autocompleteOptions = ref([]);
+        const autocompleteSelectedIndex = ref(0);
+
+        // Tag colors (6 colors cycling based on hash)
+        const tagColors = [
+          '#3b82f6', // blue
+          '#10b981', // green
+          '#f59e0b', // amber
+          '#ef4444', // red
+          '#8b5cf6', // purple
+          '#ec4899', // pink
+          '#06b6d4', // cyan
+          '#f97316'  // orange
+        ];
+
+        const getTagColor = (tag) => {
+          let hash = 0;
+          for (let i = 0; i < tag.length; i++) {
+            hash = tag.charCodeAt(i) + ((hash << 5) - hash);
+          }
+          return tagColors[Math.abs(hash) % tagColors.length];
+        };
+
+        const loadTags = async () => {
+          try {
+            const response = await fetch(`/api/sessions/${sessionId.value}/tags`);
+            if (response.ok) {
+              const data = await response.json();
+              sessionTags.value = data.tags || [];
+            }
+          } catch (err) {
+            console.error('Error loading tags:', err);
+          }
+        };
+
+        const loadAllTags = async () => {
+          try {
+            const response = await fetch('/api/tags');
+            if (response.ok) {
+              const data = await response.json();
+              allTags.value = data.tags || [];
+            }
+          } catch (err) {
+            console.error('Error loading all tags:', err);
+          }
+        };
+
+        const saveTags = async (tags) => {
+          try {
+            const response = await fetch(`/api/sessions/${sessionId.value}/tags`, {
+              method: 'PUT',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ tags })
+            });
+            if (response.ok) {
+              const data = await response.json();
+              sessionTags.value = data.tags || [];
+              tagsError.value = '';
+              return true;
+            } else {
+              const error = await response.json();
+              tagsError.value = error.error || 'Failed to save tags';
+              return false;
+            }
+          } catch (err) {
+            console.error('Error saving tags:', err);
+            tagsError.value = 'Network error';
+            return false;
+          }
+        };
+
+        const startEditTags = () => {
+          editingTags.value = [...sessionTags.value];
+          tagsEditing.value = true;
+          tagsError.value = '';
+          setTimeout(() => {
+            if (tagInputRef.value) {
+              tagInputRef.value.focus();
+            }
+          }, 10);
+        };
+
+        const cancelEditTags = () => {
+          tagsEditing.value = false;
+          editingTags.value = [];
+          tagInputValue.value = '';
+          showAutocomplete.value = false;
+          tagsError.value = '';
+        };
+
+        const addTag = () => {
+          const tag = tagInputValue.value.trim().toLowerCase();
+          if (!tag) return;
+
+          if (tag.length > 30) {
+            tagsError.value = 'Tag must be 30 characters or less';
+            return;
+          }
+
+          if (editingTags.value.length >= 10) {
+            tagsError.value = 'Maximum 10 tags per session';
+            return;
+          }
+
+          if (editingTags.value.includes(tag)) {
+            tagsError.value = 'Tag already added';
+            tagInputValue.value = '';
+            return;
+          }
+
+          editingTags.value.push(tag);
+          tagInputValue.value = '';
+          showAutocomplete.value = false;
+          tagsError.value = '';
+        };
+
+        const removeTagFromEdit = (tag) => {
+          editingTags.value = editingTags.value.filter(t => t !== tag);
+          tagsError.value = '';
+        };
+
+        const updateAutocomplete = () => {
+          const input = tagInputValue.value.trim().toLowerCase();
+          if (!input) {
+            showAutocomplete.value = false;
+            autocompleteOptions.value = [];
+            return;
+          }
+
+          const filtered = allTags.value
+            .filter(tag =>
+              tag.toLowerCase().includes(input) &&
+              !editingTags.value.includes(tag)
+            )
+            .slice(0, 5);
+
+          if (filtered.length > 0) {
+            showAutocomplete.value = true;
+            autocompleteOptions.value = filtered;
+            autocompleteSelectedIndex.value = 0;
+          } else {
+            showAutocomplete.value = false;
+            autocompleteOptions.value = [];
+          }
+        };
+
+        const selectAutocompleteOption = (option) => {
+          tagInputValue.value = option;
+          addTag();
+        };
+
+        const saveTagsOnBlur = async () => {
+          // Small delay to allow click events on autocomplete
+          setTimeout(async () => {
+            if (!tagsEditing.value) return;
+
+            const success = await saveTags(editingTags.value);
+            if (success) {
+              tagsEditing.value = false;
+              editingTags.value = [];
+              tagInputValue.value = '';
+              showAutocomplete.value = false;
+              // Reload all tags for autocomplete
+              await loadAllTags();
+            }
+          }, 200);
+        };
+
+        // Load tags on mount
+        onMounted(async () => {
+          await loadTags();
+          await loadAllTags();
+        });
+
         return {
           sessionId,
           metadata,
@@ -2087,7 +2412,27 @@
           jumpToTurn,
           getTurnNumber,
           escapeHtml,
-          exportSession
+          exportSession,
+          searchResultCount,
+          // Tags
+          sessionTags,
+          allTags,
+          tagsEditing,
+          editingTags,
+          tagInputValue,
+          tagInputRef,
+          tagsError,
+          showAutocomplete,
+          autocompleteOptions,
+          autocompleteSelectedIndex,
+          getTagColor,
+          startEditTags,
+          cancelEditTags,
+          addTag,
+          removeTagFromEdit,
+          updateAutocomplete,
+          selectAutocompleteOption,
+          saveTagsOnBlur
         };
       },
       
@@ -2170,8 +2515,62 @@
                   </button>
                 </div>
               </div>
+
+              <!-- Session Tags -->
+              <div class="sidebar-section session-tags-container">
+                <div class="sidebar-section-title">Tags</div>
+                <div v-if="!tagsEditing" class="tags-display">
+                  <span
+                    v-for="tag in sessionTags"
+                    :key="tag"
+                    class="tag-label"
+                    :style="{ backgroundColor: getTagColor(tag) }"
+                  >
+                    {{ tag }}
+                  </span>
+                  <button class="tags-edit-btn" @click="startEditTags" title="Edit tags">
+                    ✏️
+                  </button>
+                </div>
+                <div v-else class="tags-dropdown">
+                  <div class="tags-input-container">
+                    <span
+                      v-for="tag in editingTags"
+                      :key="tag"
+                      class="tag-input-chip"
+                      :style="{ backgroundColor: getTagColor(tag) }"
+                    >
+                      {{ tag }}
+                      <button @click="removeTagFromEdit(tag)" title="Remove tag">×</button>
+                    </span>
+                    <input
+                      ref="tagInputRef"
+                      v-model="tagInputValue"
+                      @keydown.enter.prevent="addTag"
+                      @keydown.escape="cancelEditTags"
+                      @blur="saveTagsOnBlur"
+                      @input="updateAutocomplete"
+                      class="tags-text-input"
+                      placeholder="Type tag name..."
+                      maxlength="30"
+                    />
+                  </div>
+                  <div v-if="showAutocomplete && autocompleteOptions.length > 0" class="tags-autocomplete">
+                    <div
+                      v-for="(option, index) in autocompleteOptions"
+                      :key="option"
+                      :class="['tags-autocomplete-item', { selected: index === autocompleteSelectedIndex }]"
+                      @click="selectAutocompleteOption(option)"
+                      @mouseenter="autocompleteSelectedIndex = index"
+                    >
+                      {{ option }}
+                    </div>
+                  </div>
+                  <div v-if="tagsError" class="tags-error">{{ tagsError }}</div>
+                </div>
+              </div>
             </div>
-            
+
             <div class="content">
               <div class="scroll-indicator">
                 <div class="content-toolbar-left">