backlog-mcp 0.26.1 → 0.27.0

package/dist/server/viewer-routes.mjs

@@ -20,8 +20,7 @@ function registerViewerRoutes(app) {
 				"in_progress",
 				"blocked"
 			] },
-			done: { status: ["done"] },
-			cancelled: { status: ["cancelled"] },
+			completed: { status: ["done", "cancelled"] },
 			all: {}
 		};
 		const filterConfig = statusMap[filter || "active"] || statusMap.active;

package/dist/server/viewer-routes.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"viewer-routes.mjs","names":[],"sources":["../../src/server/viewer-routes.ts"],"sourcesContent":["import type { FastifyInstance } from 'fastify';\nimport fastifyStatic from '@fastify/static';\nimport { exec } from 'node:child_process';\nimport { existsSync, readFileSync } from 'node:fs';\nimport matter from 'gray-matter';\nimport { storage } from '../storage/backlog.js';\nimport { resourceManager } from '../resources/manager.js';\nimport { paths } from '../utils/paths.js';\n\nexport function registerViewerRoutes(app: FastifyInstance) {\n  // Static files - serve from dist/viewer (built assets)\n  app.register(fastifyStatic, {\n    root: paths.viewerDist,\n    prefix: '/',\n  });\n\n  // List tasks\n  app.get('/tasks', async (request) => {\n    const { filter, limit } = request.query as { filter?: string; limit?: string };\n    \n    const statusMap: Record<string, any> = {\n      active: { status: ['open', 'in_progress', 'blocked'] },\n      done: { status: ['done'] },\n      cancelled: { status: ['cancelled'] },\n      all: {},\n    };\n    \n    const filterConfig = statusMap[filter || 'active'] || statusMap.active;\n    const tasks = storage.list({ ...filterConfig, limit: limit ? parseInt(limit) : 100 });\n    \n    return tasks;\n  });\n\n  // Get single task\n  app.get('/tasks/:id', async (request, reply) => {\n    const { id } = request.params as { id: string };\n    const task = storage.get(id);\n    \n    if (!task) {\n      return reply.code(404).send({ error: 'Task not found' });\n    }\n    \n    // Include raw markdown for copy button\n    const raw = storage.getMarkdown(id);\n    \n    return { ...task, raw };\n  });\n\n  // System status\n  app.get('/api/status', async () => {\n    const tasks = storage.list({ limit: 10000 });\n    const address = app.server.address();\n    const port = typeof address === 'object' && address ? address.port : 3030;\n    \n    return {\n      version: paths.getVersion(),\n      port,\n      dataDir: paths.backlogDataDir,\n      taskCount: tasks.length,\n      uptime: Math.floor(process.uptime())\n    };\n  });\n\n  // Open task in editor\n  app.get('/open/:id', async (request, reply) => {\n    const { id } = request.params as { id: string };\n    const filePath = storage.getFilePath(id);\n    \n    if (!filePath) {\n      return reply.code(404).send({ error: 'Task not found' });\n    }\n    \n    exec(`open \"${filePath}\"`);\n    return { status: 'Opening...' };\n  });\n\n  // Resource proxy\n  app.get('/resource', async (request, reply) => {\n    const { path: filePath } = request.query as { path?: string };\n    \n    if (!filePath) {\n      return reply.code(400).send({ error: 'Missing path parameter' });\n    }\n    \n    if (!existsSync(filePath)) {\n      return reply.code(404).send({ error: 'File not found', path: filePath });\n    }\n    \n    try {\n      const content = readFileSync(filePath, 'utf-8');\n      const ext = filePath.split('.').pop()?.toLowerCase() || 'txt';\n      const mimeMap: Record<string, string> = {\n        md: 'text/markdown',\n        ts: 'text/typescript',\n        js: 'text/javascript',\n        json: 'application/json',\n        txt: 'text/plain',\n      };\n      \n      let frontmatter = {};\n      let bodyContent = content;\n      \n      // Parse frontmatter for markdown files\n      if (ext === 'md') {\n        const parsed = matter(content);\n        frontmatter = parsed.data;\n        bodyContent = parsed.content;\n      }\n      \n      return {\n        content: bodyContent,\n        frontmatter,\n        type: mimeMap[ext] || 'text/plain',\n        path: filePath,\n        fileUri: `file://${filePath}`,\n        mcpUri: resourceManager.toUri(filePath),\n        ext\n      };\n    } catch (error: any) {\n      return reply.code(500).send({ error: 'Failed to read file', message: error.message });\n    }\n  });\n\n  // MCP resource proxy\n  app.get('/mcp/resource', async (request, reply) => {\n    const { uri } = request.query as { uri?: string };\n    \n    if (!uri || !uri.startsWith('mcp://backlog/')) {\n      return reply.code(400).send({ error: 'Invalid MCP URI' });\n    }\n    \n    try {\n      const resource = resourceManager.read(uri);\n      const filePath = resourceManager.resolve(uri);\n      const ext = filePath.split('.').pop()?.toLowerCase() || 'txt';\n      \n      return {\n        content: resource.content,\n        frontmatter: resource.frontmatter || {},\n        type: resource.mimeType,\n        path: filePath,\n        fileUri: `file://${filePath}`,\n        mcpUri: uri,\n        ext\n      };\n    } catch (error: any) {\n      return reply.code(404).send({ error: 'Resource not found', uri, message: error.message });\n    }\n  });\n\n  // Open resource in viewer\n  app.get('/open', async (request, reply) => {\n    const { uri } = request.query as { uri?: string };\n    \n    if (!uri) {\n      return reply.code(400).send({ error: 'Missing uri parameter' });\n    }\n    \n    return reply.redirect(`/?resource=${encodeURIComponent(uri)}`);\n  });\n}\n"],"mappings":"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"}
+{"version":3,"file":"viewer-routes.mjs","names":[],"sources":["../../src/server/viewer-routes.ts"],"sourcesContent":["import type { FastifyInstance } from 'fastify';\nimport fastifyStatic from '@fastify/static';\nimport { exec } from 'node:child_process';\nimport { existsSync, readFileSync } from 'node:fs';\nimport matter from 'gray-matter';\nimport { storage } from '../storage/backlog.js';\nimport { resourceManager } from '../resources/manager.js';\nimport { paths } from '../utils/paths.js';\n\nexport function registerViewerRoutes(app: FastifyInstance) {\n  // Static files - serve from dist/viewer (built assets)\n  app.register(fastifyStatic, {\n    root: paths.viewerDist,\n    prefix: '/',\n  });\n\n  // List tasks\n  app.get('/tasks', async (request) => {\n    const { filter, limit } = request.query as { filter?: string; limit?: string };\n    \n    const statusMap: Record<string, any> = {\n      active: { status: ['open', 'in_progress', 'blocked'] },\n      completed: { status: ['done', 'cancelled'] },\n      all: {},\n    };\n    \n    const filterConfig = statusMap[filter || 'active'] || statusMap.active;\n    const tasks = storage.list({ ...filterConfig, limit: limit ? parseInt(limit) : 100 });\n    \n    return tasks;\n  });\n\n  // Get single task\n  app.get('/tasks/:id', async (request, reply) => {\n    const { id } = request.params as { id: string };\n    const task = storage.get(id);\n    \n    if (!task) {\n      return reply.code(404).send({ error: 'Task not found' });\n    }\n    \n    // Include raw markdown for copy button\n    const raw = storage.getMarkdown(id);\n    \n    return { ...task, raw };\n  });\n\n  // System status\n  app.get('/api/status', async () => {\n    const tasks = storage.list({ limit: 10000 });\n    const address = app.server.address();\n    const port = typeof address === 'object' && address ? address.port : 3030;\n    \n    return {\n      version: paths.getVersion(),\n      port,\n      dataDir: paths.backlogDataDir,\n      taskCount: tasks.length,\n      uptime: Math.floor(process.uptime())\n    };\n  });\n\n  // Open task in editor\n  app.get('/open/:id', async (request, reply) => {\n    const { id } = request.params as { id: string };\n    const filePath = storage.getFilePath(id);\n    \n    if (!filePath) {\n      return reply.code(404).send({ error: 'Task not found' });\n    }\n    \n    exec(`open \"${filePath}\"`);\n    return { status: 'Opening...' };\n  });\n\n  // Resource proxy\n  app.get('/resource', async (request, reply) => {\n    const { path: filePath } = request.query as { path?: string };\n    \n    if (!filePath) {\n      return reply.code(400).send({ error: 'Missing path parameter' });\n    }\n    \n    if (!existsSync(filePath)) {\n      return reply.code(404).send({ error: 'File not found', path: filePath });\n    }\n    \n    try {\n      const content = readFileSync(filePath, 'utf-8');\n      const ext = filePath.split('.').pop()?.toLowerCase() || 'txt';\n      const mimeMap: Record<string, string> = {\n        md: 'text/markdown',\n        ts: 'text/typescript',\n        js: 'text/javascript',\n        json: 'application/json',\n        txt: 'text/plain',\n      };\n      \n      let frontmatter = {};\n      let bodyContent = content;\n      \n      // Parse frontmatter for markdown files\n      if (ext === 'md') {\n        const parsed = matter(content);\n        frontmatter = parsed.data;\n        bodyContent = parsed.content;\n      }\n      \n      return {\n        content: bodyContent,\n        frontmatter,\n        type: mimeMap[ext] || 'text/plain',\n        path: filePath,\n        fileUri: `file://${filePath}`,\n        mcpUri: resourceManager.toUri(filePath),\n        ext\n      };\n    } catch (error: any) {\n      return reply.code(500).send({ error: 'Failed to read file', message: error.message });\n    }\n  });\n\n  // MCP resource proxy\n  app.get('/mcp/resource', async (request, reply) => {\n    const { uri } = request.query as { uri?: string };\n    \n    if (!uri || !uri.startsWith('mcp://backlog/')) {\n      return reply.code(400).send({ error: 'Invalid MCP URI' });\n    }\n    \n    try {\n      const resource = resourceManager.read(uri);\n      const filePath = resourceManager.resolve(uri);\n      const ext = filePath.split('.').pop()?.toLowerCase() || 'txt';\n      \n      return {\n        content: resource.content,\n        frontmatter: resource.frontmatter || {},\n        type: resource.mimeType,\n        path: filePath,\n        fileUri: `file://${filePath}`,\n        mcpUri: uri,\n        ext\n      };\n    } catch (error: any) {\n      return reply.code(404).send({ error: 'Resource not found', uri, message: error.message });\n    }\n  });\n\n  // Open resource in viewer\n  app.get('/open', async (request, reply) => {\n    const { uri } = request.query as { uri?: string };\n    \n    if (!uri) {\n      return reply.code(400).send({ error: 'Missing uri parameter' });\n    }\n    \n    return reply.redirect(`/?resource=${encodeURIComponent(uri)}`);\n  });\n}\n"],"mappings":"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"}

package/dist/viewer/index.html

@@ -20,7 +20,7 @@
     <!-- Left Pane: Task List -->
     <div class="left-pane" id="left-pane">
       <div class="pane-header">
-        <div class="pane-title">
+        <div class="pane-title" id="home-button" style="cursor: pointer;" title="Go to All Tasks">
           <img src="./logo.svg" class="logo" alt="">
           Backlog
         </div>

package/dist/viewer/main.css

@@ -134,7 +134,7 @@ body {
 }
 task-filter-bar {
   display: block;
-  margin-bottom: 16px;
+  margin-bottom: 0;
   padding: 12px;
   background: #252526;
   border-radius: 8px;
@@ -175,6 +175,41 @@ task-filter-bar {
   border-color: #007acc;
   color: white;
 }
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 0;
+  margin-bottom: 8px;
+  border-bottom: 1px solid #3e3e42;
+  font-size: 13px;
+}
+.breadcrumb-segment {
+  background: none;
+  border: none;
+  color: #888;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: all 0.2s;
+  font-size: 13px;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.breadcrumb-segment:hover {
+  background: #2d2d30;
+  color: #d4d4d4;
+}
+.breadcrumb-segment:last-child {
+  color: #d4d4d4;
+  font-weight: 500;
+}
+.breadcrumb-separator {
+  color: #555;
+  user-select: none;
+}
 .task-list {
   display: flex;
   flex-direction: column;
@@ -209,10 +244,6 @@ task-filter-bar {
   width: 1px;
   background: #3e3e42;
 }
-.task-item-wrapper.pinned .task-item {
-  border-color: #f0b429;
-  background: #3d3522;
-}
 .task-item {
   flex: 1;
   display: flex;
@@ -251,6 +282,17 @@ task-filter-bar {
   padding: 2px 6px;
   border-radius: 10px;
 }
+.enter-icon {
+  font-size: 14px;
+  color: #888;
+  margin-left: auto;
+  opacity: 0.6;
+  transition: opacity 0.2s;
+}
+.task-item.type-epic:hover .enter-icon {
+  opacity: 1;
+  color: #007acc;
+}
 .task-item:hover {
   background: #2d2d30;
   border-color: #007acc;
@@ -259,26 +301,50 @@ task-filter-bar {
   background: #094771;
   border-color: #007acc;
 }
-.task-item-wrapper > .pin-btn {
-  background: #252526;
-  border: 1px solid #3e3e42;
-  border-radius: 6px;
-  padding: 0 8px;
-  cursor: pointer;
-  color: #888;
+.task-item.current-epic {
+}
+.epic-separator {
   display: flex;
   align-items: center;
-  transition: all 0.2s;
+  margin: 12px 0;
+  gap: 12px;
 }
-.task-item-wrapper > .pin-btn:hover {
-  background: #2d2d30;
-  border-color: #f0b429;
-  color: #f0b429;
+.epic-separator::before,
+.epic-separator::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background:
+    linear-gradient(
+      90deg,
+      transparent,
+      rgba(9, 105, 218, 0.3),
+      transparent);
 }
-.task-item-wrapper > .pin-btn.pinned {
-  background: #3d3522;
-  border-color: #f0b429;
-  color: #f0b429;
+.epic-separator::before {
+  background:
+    linear-gradient(
+      90deg,
+      transparent,
+      rgba(9, 105, 218, 0.3));
+}
+.epic-separator::after {
+  background:
+    linear-gradient(
+      90deg,
+      rgba(9, 105, 218, 0.3),
+      transparent);
+}
+.separator-icon {
+  width: 10px !important;
+  height: 10px !important;
+  flex-shrink: 0;
+  background:
+    linear-gradient(
+      135deg,
+      #00d4ff,
+      #7b2dff,
+      #ff2d7b) !important;
 }
 .task-id {
   font-size: 11px;
@@ -462,6 +528,11 @@ task-filter-bar {
   padding: 60px 20px;
   color: #888;
 }
+.empty-state-inline {
+  text-align: center;
+  padding: 40px 20px;
+  color: #888;
+}
 .empty-state-icon {
   font-size: 48px;
   margin-bottom: 16px;

package/dist/viewer/main.js

@@ -2527,31 +2527,85 @@ async function fetchTask(taskId) {
   return response.json();
 }
 
+// viewer/components/breadcrumb.ts
+var Breadcrumb = class extends HTMLElement {
+  currentEpicId = null;
+  tasks = [];
+  setData(currentEpicId, tasks) {
+    this.currentEpicId = currentEpicId;
+    this.tasks = tasks;
+    this.render();
+  }
+  buildPath() {
+    if (!this.currentEpicId) return [];
+    const path = [];
+    let currentId = this.currentEpicId;
+    while (currentId) {
+      const epic = this.tasks.find((t) => t.id === currentId);
+      if (!epic) break;
+      path.unshift(epic);
+      currentId = epic.epic_id || null;
+    }
+    return path;
+  }
+  render() {
+    const path = this.buildPath();
+    this.innerHTML = `
+      <div class="breadcrumb">
+        <button class="breadcrumb-segment" data-epic-id="" title="All Tasks">All Tasks</button>
+        ${path.map((epic) => `
+          <span class="breadcrumb-separator">\u203A</span>
+          <button class="breadcrumb-segment" data-epic-id="${epic.id}" title="${epic.title}">${epic.title}</button>
+        `).join("")}
+      </div>
+    `;
+    this.querySelectorAll(".breadcrumb-segment").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        const epicId = btn.dataset.epicId || null;
+        document.dispatchEvent(new CustomEvent("epic-navigate", { detail: { epicId } }));
+      });
+    });
+  }
+};
+customElements.define("epic-breadcrumb", Breadcrumb);
+
+// viewer/icons/copy.svg
+var copy_default = "./copy-3LO2VTYZ.svg";
+
+// viewer/icons/epic.svg
+var epic_default = "./epic-OFTO5ZU3.svg";
+
+// viewer/icons/task.svg
+var task_default = "./task-QBLM24U4.svg";
+
+// viewer/icons/settings.svg
+var settings_default = "./settings-3ELIWNF4.svg";
+
+// viewer/icons/ring.svg
+var ring_default = "./ring-IUCBBGZ6.svg";
+
+// viewer/icons/index.ts
+var copyIcon = copy_default;
+var epicIcon = epic_default;
+var taskIcon = task_default;
+var settingsIcon = settings_default;
+var ringIcon = ring_default;
+
 // viewer/components/task-list.ts
 function escapeAttr(text2) {
   if (!text2) return "";
   return text2.replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function getCollapsedEpics() {
-  try {
-    return new Set(JSON.parse(localStorage.getItem("collapsed-epics") || "[]"));
-  } catch {
-    return /* @__PURE__ */ new Set();
-  }
-}
-function setCollapsedEpics(ids) {
-  localStorage.setItem("collapsed-epics", JSON.stringify([...ids]));
-}
 var TaskList = class extends HTMLElement {
   currentFilter = "active";
   currentType = "all";
-  pinnedEpicId = null;
+  currentEpicId = null;
   selectedTaskId = null;
-  collapsedEpics = getCollapsedEpics();
+  allTasks = [];
   connectedCallback() {
     const params = new URLSearchParams(window.location.search);
     this.selectedTaskId = params.get("task");
-    this.pinnedEpicId = params.get("epic");
+    this.currentEpicId = params.get("epic");
     this.loadTasks();
     setInterval(() => this.loadTasks(), 5e3);
     document.addEventListener("filter-change", ((e) => {
@@ -2562,87 +2616,102 @@ var TaskList = class extends HTMLElement {
     document.addEventListener("task-selected", ((e) => {
       this.setSelected(e.detail.taskId);
     }));
-    document.addEventListener("epic-pin", ((e) => {
-      this.pinnedEpicId = e.detail.epicId;
-      this.loadTasks();
-    }));
-    document.addEventListener("epic-toggle", ((e) => {
-      const { epicId } = e.detail;
-      if (this.collapsedEpics.has(epicId)) {
-        this.collapsedEpics.delete(epicId);
-      } else {
-        this.collapsedEpics.add(epicId);
+    document.addEventListener("epic-navigate", ((e) => {
+      this.currentEpicId = e.detail.epicId;
+      if (e.detail.epicId) {
+        this.selectedTaskId = e.detail.epicId;
+        document.dispatchEvent(new CustomEvent("task-selected", { detail: { taskId: e.detail.epicId } }));
       }
-      setCollapsedEpics(this.collapsedEpics);
       this.loadTasks();
     }));
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape" && this.currentEpicId) {
+        const currentEpic = this.allTasks.find((t) => t.id === this.currentEpicId);
+        const parentEpicId = currentEpic?.epic_id || null;
+        document.dispatchEvent(new CustomEvent("epic-navigate", { detail: { epicId: parentEpicId } }));
+      }
+    });
   }
   setState(filter, type, epicId, taskId) {
     this.currentFilter = filter;
     this.currentType = type;
-    this.pinnedEpicId = epicId;
+    this.currentEpicId = epicId;
     this.selectedTaskId = taskId;
     this.loadTasks();
   }
   async loadTasks() {
     try {
       let tasks = await fetchTasks(this.currentFilter);
+      this.allTasks = tasks;
       if (this.currentType !== "all") {
         tasks = tasks.filter((t) => (t.type ?? "task") === this.currentType);
       }
-      if (this.pinnedEpicId) {
-        const pinnedEpic = tasks.find((t) => t.id === this.pinnedEpicId);
-        const children = tasks.filter((t) => t.epic_id === this.pinnedEpicId);
-        tasks = pinnedEpic ? [pinnedEpic, ...children] : children;
+      if (this.currentEpicId) {
+        const currentEpic = tasks.find((t) => t.id === this.currentEpicId);
+        const children = tasks.filter((t) => t.epic_id === this.currentEpicId);
+        tasks = currentEpic ? [currentEpic, ...children] : children;
+      } else {
+        const rootEpics = tasks.filter((t) => (t.type ?? "task") === "epic" && !t.epic_id);
+        const orphanTasks = tasks.filter((t) => (t.type ?? "task") === "task" && !t.epic_id);
+        tasks = [...rootEpics, ...orphanTasks];
       }
       this.render(tasks);
+      const breadcrumb = this.querySelector("epic-breadcrumb");
+      if (breadcrumb) {
+        breadcrumb.setData(this.currentEpicId, this.allTasks);
+      }
     } catch (error) {
       this.innerHTML = `<div class="error">Failed to load tasks: ${error.message}</div>`;
     }
   }
   render(tasks) {
-    if (tasks.length === 0) {
+    const isEmpty = tasks.length === 0;
+    const isInsideEpic = !!this.currentEpicId;
+    const currentEpic = isInsideEpic ? tasks.find((t) => t.id === this.currentEpicId) : null;
+    const hasOnlyEpic = isInsideEpic && tasks.length === 1 && currentEpic;
+    if (isEmpty) {
       this.innerHTML = `
+        <epic-breadcrumb></epic-breadcrumb>
         <div class="empty-state">
           <div class="empty-state-icon">\u2014</div>
           <div>No tasks found</div>
         </div>
       `;
+      const breadcrumb2 = this.querySelector("epic-breadcrumb");
+      if (breadcrumb2) {
+        breadcrumb2.setData(this.currentEpicId, this.allTasks);
+      }
       return;
     }
     const epics = tasks.filter((t) => (t.type ?? "task") === "epic");
-    const rootEpics = epics.filter((e) => !e.epic_id);
-    const childTasks = tasks.filter((t) => t.epic_id && epics.some((e) => e.id === t.epic_id));
-    const orphanTasks = tasks.filter((t) => (t.type ?? "task") === "task" && !childTasks.includes(t));
-    const grouped = [];
-    for (const epic of rootEpics) {
-      const children = childTasks.filter((t) => t.epic_id === epic.id);
-      const isCollapsed = this.collapsedEpics.has(epic.id);
-      grouped.push({ ...epic, childCount: children.length });
-      if (!isCollapsed) {
-        for (const child of children) {
-          grouped.push({ ...child, isChild: true });
-        }
-      }
-    }
-    grouped.push(...orphanTasks);
+    const regularTasks = tasks.filter((t) => (t.type ?? "task") === "task");
+    const grouped = [...epics, ...regularTasks];
     this.innerHTML = `
+      <epic-breadcrumb></epic-breadcrumb>
       <div class="task-list">
-        ${grouped.map((task) => `
-          <task-item 
-            data-id="${task.id}"
-            data-title="${escapeAttr(task.title)}"
-            data-status="${task.status}"
-            data-type="${task.type ?? "task"}"
-            ${task.isChild ? 'data-child="true"' : ""}
-            ${task.childCount !== void 0 ? `data-child-count="${task.childCount}"` : ""}
-            ${this.collapsedEpics.has(task.id) ? 'data-collapsed="true"' : ""}
-            ${this.selectedTaskId === task.id ? "selected" : ""}
-            ${this.pinnedEpicId === task.id ? "pinned" : ""}
-          ></task-item>
-        `).join("")}
+        ${grouped.map((task, index) => {
+      const childCount = (task.type ?? "task") === "epic" ? this.allTasks.filter((t) => t.epic_id === task.id).length : 0;
+      const isCurrentEpic = this.currentEpicId === task.id;
+      return `
+            <task-item 
+              data-id="${task.id}"
+              data-title="${escapeAttr(task.title)}"
+              data-status="${task.status}"
+              data-type="${task.type ?? "task"}"
+              data-child-count="${childCount}"
+              ${this.selectedTaskId === task.id ? "selected" : ""}
+              ${isCurrentEpic ? 'data-current-epic="true"' : ""}
+            ></task-item>
+            ${isCurrentEpic ? `<div class="epic-separator"><svg-icon class="separator-icon" src="${ringIcon}"></svg-icon></div>` : ""}
+          `;
+    }).join("")}
+        ${hasOnlyEpic ? '<div class="empty-state-inline"><div class="empty-state-icon">\u2014</div><div>No tasks in this epic</div></div>' : ""}
       </div>
     `;
+    const breadcrumb = this.querySelector("epic-breadcrumb");
+    if (breadcrumb) {
+      breadcrumb.setData(this.currentEpicId, this.allTasks);
+    }
   }
   setSelected(taskId) {
     this.selectedTaskId = taskId;
@@ -2650,32 +2719,6 @@ var TaskList = class extends HTMLElement {
 };
 customElements.define("task-list", TaskList);
 
-// viewer/icons/copy.svg
-var copy_default = "./copy-3LO2VTYZ.svg";
-
-// viewer/icons/pin.svg
-var pin_default = "./pin-CTBSQJY3.svg";
-
-// viewer/icons/epic.svg
-var epic_default = "./epic-OFTO5ZU3.svg";
-
-// viewer/icons/task.svg
-var task_default = "./task-QBLM24U4.svg";
-
-// viewer/icons/chevron.svg
-var chevron_default = "./chevron-CBYYYF2L.svg";
-
-// viewer/icons/settings.svg
-var settings_default = "./settings-3ELIWNF4.svg";
-
-// viewer/icons/index.ts
-var copyIcon = copy_default;
-var pinIcon = pin_default;
-var epicIcon = epic_default;
-var taskIcon = task_default;
-var chevronIcon = chevron_default;
-var settingsIcon = settings_default;
-
 // viewer/components/task-item.ts
 var TaskItem = class extends HTMLElement {
   connectedCallback() {
@@ -2687,29 +2730,31 @@ var TaskItem = class extends HTMLElement {
     const title = this.dataset.title || "";
     const status = this.dataset.status || "open";
     const type = this.dataset.type || "task";
-    const isChild = this.dataset.child === "true";
-    const isPinned = this.hasAttribute("pinned");
+    const isCurrentEpic = this.dataset.currentEpic === "true";
     const isSelected = this.hasAttribute("selected");
-    const isCollapsed = this.dataset.collapsed === "true";
-    const childCount = this.dataset.childCount;
-    this.className = `task-item-wrapper ${isPinned ? "pinned" : ""} ${isChild ? "child" : ""}`;
+    const childCount = this.dataset.childCount || "0";
+    this.className = "task-item-wrapper";
     this.innerHTML = `
-      <div class="task-item ${isSelected ? "selected" : ""} type-${type}">
-        ${type === "epic" ? `<button class="collapse-btn ${isCollapsed ? "collapsed" : ""}" title="${isCollapsed ? "Expand" : "Collapse"}"><svg-icon src="${chevronIcon}"></svg-icon></button>` : ""}
+      <div class="task-item ${isSelected ? "selected" : ""} ${isCurrentEpic ? "current-epic" : ""} type-${type}">
         <task-badge task-id="${id}" type="${type}"></task-badge>
         <span class="task-title">${title}</span>
-        ${isCollapsed && childCount ? `<span class="child-count">${childCount}</span>` : ""}
+        ${type === "epic" ? `<span class="child-count">${childCount}</span>` : ""}
+        ${type === "epic" && !isCurrentEpic ? '<span class="enter-icon">\u2192</span>' : ""}
         <span class="status-badge status-${status}">${status.replace("_", " ")}</span>
       </div>
-      ${type === "epic" ? `<button class="pin-btn ${isPinned ? "pinned" : ""}" title="${isPinned ? "Unpin" : "Pin to filter"}"><svg-icon src="${pinIcon}"></svg-icon></button>` : ""}
     `;
   }
   attachListeners() {
     const taskItem = this.querySelector(".task-item");
+    const type = this.dataset.type || "task";
+    const isCurrentEpic = this.dataset.currentEpic === "true";
     taskItem?.addEventListener("click", (e) => {
-      if (e.target.closest(".collapse-btn")) return;
       const taskId = this.dataset.id;
       if (!taskId) return;
+      if (type === "epic" && !isCurrentEpic) {
+        document.dispatchEvent(new CustomEvent("epic-navigate", { detail: { epicId: taskId } }));
+        return;
+      }
       document.querySelectorAll("task-item .task-item").forEach((item) => {
         item.classList.toggle("selected", item.closest("task-item")?.dataset.id === taskId);
       });
@@ -2723,26 +2768,6 @@ var TaskItem = class extends HTMLElement {
         taskList.setSelected(taskId);
       }
     });
-    const collapseBtn = this.querySelector(".collapse-btn");
-    if (collapseBtn) {
-      collapseBtn.addEventListener("click", (e) => {
-        e.stopPropagation();
-        const epicId = this.dataset.id;
-        if (epicId) {
-          document.dispatchEvent(new CustomEvent("epic-toggle", { detail: { epicId } }));
-        }
-      });
-    }
-    const pinBtn = this.querySelector(".pin-btn");
-    if (pinBtn) {
-      pinBtn.addEventListener("click", (e) => {
-        e.stopPropagation();
-        const epicId = this.dataset.id;
-        if (!epicId) return;
-        const isPinned = this.hasAttribute("pinned");
-        document.dispatchEvent(new CustomEvent("epic-pin", { detail: { epicId: isPinned ? null : epicId } }));
-      });
-    }
   }
 };
 customElements.define("task-item", TaskItem);
@@ -3534,6 +3559,9 @@ document.addEventListener("DOMContentLoaded", () => {
   }
   const modal = document.querySelector("system-info-modal");
   systemInfoBtn?.addEventListener("click", () => modal?.open());
+  document.getElementById("home-button")?.addEventListener("click", () => {
+    urlState.set({ epic: null, task: null });
+  });
   const savedResource = localStorage.getItem("openResource");
   if (savedResource) {
     if (savedResource.startsWith("mcp://")) {
@@ -3549,6 +3577,9 @@ document.addEventListener("filter-change", ((e) => {
 document.addEventListener("task-selected", ((e) => {
   urlState.set({ task: e.detail.taskId });
 }));
+document.addEventListener("epic-navigate", ((e) => {
+  urlState.set({ epic: e.detail.epicId });
+}));
 document.addEventListener("epic-pin", ((e) => {
   urlState.set({ epic: e.detail.epicId });
 }));

package/dist/viewer/ring-IUCBBGZ6.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
+  <circle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='3'/>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "backlog-mcp",
-  "version": "0.26.1",
+  "version": "0.27.0",
   "description": "Minimal task backlog MCP server for Claude and AI agents",
   "keywords": [
     "mcp",

package/viewer/components/breadcrumb.ts

@@ -0,0 +1,52 @@
+import type { Task } from '../utils/api.js';
+
+export class Breadcrumb extends HTMLElement {
+  private currentEpicId: string | null = null;
+  private tasks: Task[] = [];
+
+  setData(currentEpicId: string | null, tasks: Task[]) {
+    this.currentEpicId = currentEpicId;
+    this.tasks = tasks;
+    this.render();
+  }
+
+  private buildPath(): Task[] {
+    if (!this.currentEpicId) return [];
+    
+    const path: Task[] = [];
+    let currentId: string | null = this.currentEpicId;
+    
+    while (currentId) {
+      const epic = this.tasks.find(t => t.id === currentId);
+      if (!epic) break;
+      path.unshift(epic);
+      currentId = epic.epic_id || null;
+    }
+    
+    return path;
+  }
+
+  private render() {
+    const path = this.buildPath();
+    
+    // Always render breadcrumb, even at root
+    this.innerHTML = `
+      <div class="breadcrumb">
+        <button class="breadcrumb-segment" data-epic-id="" title="All Tasks">All Tasks</button>
+        ${path.map(epic => `
+          <span class="breadcrumb-separator">›</span>
+          <button class="breadcrumb-segment" data-epic-id="${epic.id}" title="${epic.title}">${epic.title}</button>
+        `).join('')}
+      </div>
+    `;
+
+    this.querySelectorAll('.breadcrumb-segment').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const epicId = (btn as HTMLElement).dataset.epicId || null;
+        document.dispatchEvent(new CustomEvent('epic-navigate', { detail: { epicId } }));
+      });
+    });
+  }
+}
+
+customElements.define('epic-breadcrumb', Breadcrumb);

package/viewer/components/task-item.ts

@@ -1,5 +1,3 @@
-import { pinIcon, chevronIcon } from '../icons/index.js';
-
 export class TaskItem extends HTMLElement {
   connectedCallback() {
     this.render();
@@ -11,32 +9,38 @@ export class TaskItem extends HTMLElement {
     const title = this.dataset.title || '';
     const status = this.dataset.status || 'open';
     const type = this.dataset.type || 'task';
-    const isChild = this.dataset.child === 'true';
-    const isPinned = this.hasAttribute('pinned');
+    const isCurrentEpic = this.dataset.currentEpic === 'true';
     const isSelected = this.hasAttribute('selected');
-    const isCollapsed = this.dataset.collapsed === 'true';
-    const childCount = this.dataset.childCount;
+    const childCount = this.dataset.childCount || '0';
     
-    this.className = `task-item-wrapper ${isPinned ? 'pinned' : ''} ${isChild ? 'child' : ''}`;
+    this.className = 'task-item-wrapper';
     this.innerHTML = `
-      <div class="task-item ${isSelected ? 'selected' : ''} type-${type}">
-        ${type === 'epic' ? `<button class="collapse-btn ${isCollapsed ? 'collapsed' : ''}" title="${isCollapsed ? 'Expand' : 'Collapse'}"><svg-icon src="${chevronIcon}"></svg-icon></button>` : ''}
+      <div class="task-item ${isSelected ? 'selected' : ''} ${isCurrentEpic ? 'current-epic' : ''} type-${type}">
         <task-badge task-id="${id}" type="${type}"></task-badge>
         <span class="task-title">${title}</span>
-        ${isCollapsed && childCount ? `<span class="child-count">${childCount}</span>` : ''}
+        ${type === 'epic' ? `<span class="child-count">${childCount}</span>` : ''}
+        ${type === 'epic' && !isCurrentEpic ? '<span class="enter-icon">→</span>' : ''}
         <span class="status-badge status-${status}">${status.replace('_', ' ')}</span>
       </div>
-      ${type === 'epic' ? `<button class="pin-btn ${isPinned ? 'pinned' : ''}" title="${isPinned ? 'Unpin' : 'Pin to filter'}"><svg-icon src="${pinIcon}"></svg-icon></button>` : ''}
     `;
   }
   
   attachListeners() {
     const taskItem = this.querySelector('.task-item');
+    const type = this.dataset.type || 'task';
+    const isCurrentEpic = this.dataset.currentEpic === 'true';
+    
     taskItem?.addEventListener('click', (e) => {
-      if ((e.target as HTMLElement).closest('.collapse-btn')) return;
       const taskId = this.dataset.id;
       if (!taskId) return;
       
+      // If epic and not current epic, navigate into it
+      if (type === 'epic' && !isCurrentEpic) {
+        document.dispatchEvent(new CustomEvent('epic-navigate', { detail: { epicId: taskId } }));
+        return;
+      }
+      
+      // Otherwise, select and show detail
       document.querySelectorAll('task-item .task-item').forEach(item => {
         item.classList.toggle('selected', (item.closest('task-item') as HTMLElement)?.dataset.id === taskId);
       });
@@ -53,28 +57,6 @@ export class TaskItem extends HTMLElement {
         (taskList as any).setSelected(taskId);
       }
     });
-    
-    const collapseBtn = this.querySelector('.collapse-btn');
-    if (collapseBtn) {
-      collapseBtn.addEventListener('click', (e) => {
-        e.stopPropagation();
-        const epicId = this.dataset.id;
-        if (epicId) {
-          document.dispatchEvent(new CustomEvent('epic-toggle', { detail: { epicId } }));
-        }
-      });
-    }
-    
-    const pinBtn = this.querySelector('.pin-btn');
-    if (pinBtn) {
-      pinBtn.addEventListener('click', (e) => {
-        e.stopPropagation();
-        const epicId = this.dataset.id;
-        if (!epicId) return;
-        const isPinned = this.hasAttribute('pinned');
-        document.dispatchEvent(new CustomEvent('epic-pin', { detail: { epicId: isPinned ? null : epicId } }));
-      });
-    }
   }
 }
 

package/viewer/components/task-list.ts

@@ -1,31 +1,23 @@
 import { fetchTasks, type Task } from '../utils/api.js';
+import './breadcrumb.js';
+import { ringIcon } from '../icons/index.js';
 
 function escapeAttr(text: string | undefined): string {
   if (!text) return '';
   return text.replace(/"/g, '"').replace(/'/g, ''');
 }
 
-function getCollapsedEpics(): Set<string> {
-  try {
-    return new Set(JSON.parse(localStorage.getItem('collapsed-epics') || '[]'));
-  } catch { return new Set(); }
-}
-
-function setCollapsedEpics(ids: Set<string>) {
-  localStorage.setItem('collapsed-epics', JSON.stringify([...ids]));
-}
-
 export class TaskList extends HTMLElement {
   private currentFilter: string = 'active';
   private currentType: string = 'all';
-  private pinnedEpicId: string | null = null;
+  private currentEpicId: string | null = null;
   private selectedTaskId: string | null = null;
-  private collapsedEpics: Set<string> = getCollapsedEpics();
+  private allTasks: Task[] = [];
   
   connectedCallback() {
     const params = new URLSearchParams(window.location.search);
     this.selectedTaskId = params.get('task');
-    this.pinnedEpicId = params.get('epic');
+    this.currentEpicId = params.get('epic');
     
     this.loadTasks();
     setInterval(() => this.loadTasks(), 5000);
@@ -40,27 +32,29 @@ export class TaskList extends HTMLElement {
       this.setSelected(e.detail.taskId);
     }) as EventListener);
     
-    document.addEventListener('epic-pin', ((e: CustomEvent) => {
-      this.pinnedEpicId = e.detail.epicId;
-      this.loadTasks();
-    }) as EventListener);
-    
-    document.addEventListener('epic-toggle', ((e: CustomEvent) => {
-      const { epicId } = e.detail;
-      if (this.collapsedEpics.has(epicId)) {
-        this.collapsedEpics.delete(epicId);
-      } else {
-        this.collapsedEpics.add(epicId);
+    document.addEventListener('epic-navigate', ((e: CustomEvent) => {
+      this.currentEpicId = e.detail.epicId;
+      // Auto-select epic when navigating into it
+      if (e.detail.epicId) {
+        this.selectedTaskId = e.detail.epicId;
+        document.dispatchEvent(new CustomEvent('task-selected', { detail: { taskId: e.detail.epicId } }));
       }
-      setCollapsedEpics(this.collapsedEpics);
       this.loadTasks();
     }) as EventListener);
+
+    document.addEventListener('keydown', (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && this.currentEpicId) {
+        const currentEpic = this.allTasks.find(t => t.id === this.currentEpicId);
+        const parentEpicId = currentEpic?.epic_id || null;
+        document.dispatchEvent(new CustomEvent('epic-navigate', { detail: { epicId: parentEpicId } }));
+      }
+    });
   }
   
   setState(filter: string, type: string, epicId: string | null, taskId: string | null) {
     this.currentFilter = filter;
     this.currentType = type;
-    this.pinnedEpicId = epicId;
+    this.currentEpicId = epicId;
     this.selectedTaskId = taskId;
     this.loadTasks();
   }
@@ -68,72 +62,91 @@ export class TaskList extends HTMLElement {
   async loadTasks() {
     try {
       let tasks = await fetchTasks(this.currentFilter as any);
+      this.allTasks = tasks;
       
       // Type filter
       if (this.currentType !== 'all') {
         tasks = tasks.filter(t => (t.type ?? 'task') === this.currentType);
       }
       
-      // Epic pin filter
-      if (this.pinnedEpicId) {
-        const pinnedEpic = tasks.find(t => t.id === this.pinnedEpicId);
-        const children = tasks.filter(t => t.epic_id === this.pinnedEpicId);
-        tasks = pinnedEpic ? [pinnedEpic, ...children] : children;
+      // Epic navigation filter
+      if (this.currentEpicId) {
+        const currentEpic = tasks.find(t => t.id === this.currentEpicId);
+        const children = tasks.filter(t => t.epic_id === this.currentEpicId);
+        tasks = currentEpic ? [currentEpic, ...children] : children;
+      } else {
+        // Home page: only root epics and orphan tasks
+        const rootEpics = tasks.filter(t => (t.type ?? 'task') === 'epic' && !t.epic_id);
+        const orphanTasks = tasks.filter(t => (t.type ?? 'task') === 'task' && !t.epic_id);
+        tasks = [...rootEpics, ...orphanTasks];
       }
       
       this.render(tasks);
+      
+      const breadcrumb = this.querySelector('epic-breadcrumb');
+      if (breadcrumb) {
+        (breadcrumb as any).setData(this.currentEpicId, this.allTasks);
+      }
     } catch (error) {
       this.innerHTML = `<div class="error">Failed to load tasks: ${(error as Error).message}</div>`;
     }
   }
   
   render(tasks: Task[]) {
-    if (tasks.length === 0) {
+    const isEmpty = tasks.length === 0;
+    const isInsideEpic = !!this.currentEpicId;
+    const currentEpic = isInsideEpic ? tasks.find(t => t.id === this.currentEpicId) : null;
+    const hasOnlyEpic = isInsideEpic && tasks.length === 1 && currentEpic;
+    
+    if (isEmpty) {
       this.innerHTML = `
+        <epic-breadcrumb></epic-breadcrumb>
         <div class="empty-state">
           <div class="empty-state-icon">—</div>
           <div>No tasks found</div>
         </div>
       `;
+      const breadcrumb = this.querySelector('epic-breadcrumb');
+      if (breadcrumb) {
+        (breadcrumb as any).setData(this.currentEpicId, this.allTasks);
+      }
       return;
     }
     
-    // Group: epics first with their children, then orphan tasks
+    // Group: epics first, then tasks
     const epics = tasks.filter(t => (t.type ?? 'task') === 'epic');
-    const rootEpics = epics.filter(e => !e.epic_id); // Only root epics for iteration
-    const childTasks = tasks.filter(t => t.epic_id && epics.some(e => e.id === t.epic_id));
-    const orphanTasks = tasks.filter(t => (t.type ?? 'task') === 'task' && !childTasks.includes(t));
-    
-    const grouped: Array<Task & { isChild?: boolean; childCount?: number }> = [];
-    for (const epic of rootEpics) {
-      const children = childTasks.filter(t => t.epic_id === epic.id);
-      const isCollapsed = this.collapsedEpics.has(epic.id);
-      grouped.push({ ...epic, childCount: children.length });
-      if (!isCollapsed) {
-        for (const child of children) {
-          grouped.push({ ...child, isChild: true });
-        }
-      }
-    }
-    grouped.push(...orphanTasks);
+    const regularTasks = tasks.filter(t => (t.type ?? 'task') === 'task');
+    const grouped = [...epics, ...regularTasks];
     
     this.innerHTML = `
+      <epic-breadcrumb></epic-breadcrumb>
       <div class="task-list">
-        ${grouped.map(task => `
-          <task-item 
-            data-id="${task.id}"
-            data-title="${escapeAttr(task.title)}"
-            data-status="${task.status}"
-            data-type="${task.type ?? 'task'}"
-            ${task.isChild ? 'data-child="true"' : ''}
-            ${task.childCount !== undefined ? `data-child-count="${task.childCount}"` : ''}
-            ${this.collapsedEpics.has(task.id) ? 'data-collapsed="true"' : ''}
-            ${this.selectedTaskId === task.id ? 'selected' : ''}
-            ${this.pinnedEpicId === task.id ? 'pinned' : ''}
-          ></task-item>
-        `).join('')}
+        ${grouped.map((task, index) => {
+          const childCount = (task.type ?? 'task') === 'epic' 
+            ? this.allTasks.filter(t => t.epic_id === task.id).length 
+            : 0;
+          const isCurrentEpic = this.currentEpicId === task.id;
+          return `
+            <task-item 
+              data-id="${task.id}"
+              data-title="${escapeAttr(task.title)}"
+              data-status="${task.status}"
+              data-type="${task.type ?? 'task'}"
+              data-child-count="${childCount}"
+              ${this.selectedTaskId === task.id ? 'selected' : ''}
+              ${isCurrentEpic ? 'data-current-epic="true"' : ''}
+            ></task-item>
+            ${isCurrentEpic ? `<div class="epic-separator"><svg-icon class="separator-icon" src="${ringIcon}"></svg-icon></div>` : ''}
+          `;
+        }).join('')}
+        ${hasOnlyEpic ? '<div class="empty-state-inline"><div class="empty-state-icon">—</div><div>No tasks in this epic</div></div>' : ''}
       </div>
     `;
+    
+    const breadcrumb = this.querySelector('epic-breadcrumb');
+    if (breadcrumb) {
+      (breadcrumb as any).setData(this.currentEpicId, this.allTasks);
+    }
   }
   
   setSelected(taskId: string) {

package/viewer/icons/index.ts

@@ -5,6 +5,7 @@ import epicIconSvg from './epic.svg';
 import taskIconSvg from './task.svg';
 import chevronIconSvg from './chevron.svg';
 import settingsIconSvg from './settings.svg';
+import ringIconSvg from './ring.svg';
 
 export const copyIcon = copyIconSvg;
 export const pinIcon = pinIconSvg;
@@ -12,3 +13,4 @@ export const epicIcon = epicIconSvg;
 export const taskIcon = taskIconSvg;
 export const chevronIcon = chevronIconSvg;
 export const settingsIcon = settingsIconSvg;
+export const ringIcon = ringIconSvg;

package/viewer/index.html

@@ -20,7 +20,7 @@
     <!-- Left Pane: Task List -->
     <div class="left-pane" id="left-pane">
       <div class="pane-header">
-        <div class="pane-title">
+        <div class="pane-title" id="home-button" style="cursor: pointer;" title="Go to All Tasks">
           <img src="./logo.svg" class="logo" alt="">
           Backlog
         </div>

package/viewer/main.ts

@@ -47,6 +47,11 @@ document.addEventListener('DOMContentLoaded', () => {
   const modal = document.querySelector('system-info-modal') as any;
   systemInfoBtn?.addEventListener('click', () => modal?.open());
   
+  // Wire up home button
+  document.getElementById('home-button')?.addEventListener('click', () => {
+    urlState.set({ epic: null, task: null });
+  });
+  
   // Restore resource from localStorage
   const savedResource = localStorage.getItem('openResource');
   if (savedResource) {
@@ -67,6 +72,10 @@ document.addEventListener('task-selected', ((e: CustomEvent) => {
   urlState.set({ task: e.detail.taskId });
 }) as EventListener);
 
+document.addEventListener('epic-navigate', ((e: CustomEvent) => {
+  urlState.set({ epic: e.detail.epicId });
+}) as EventListener);
+
 document.addEventListener('epic-pin', ((e: CustomEvent) => {
   urlState.set({ epic: e.detail.epicId });
 }) as EventListener);

package/viewer/styles.css

@@ -151,7 +151,7 @@
     
     task-filter-bar {
       display: block;
-      margin-bottom: 16px;
+      margin-bottom: 0;
       padding: 12px;
       background: #252526;
       border-radius: 8px;
@@ -200,6 +200,47 @@
       color: white;
     }
     
+    /* Breadcrumb */
+    .breadcrumb {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 12px 0;
+      margin-bottom: 8px;
+      border-bottom: 1px solid #3e3e42;
+      font-size: 13px;
+    }
+    
+    .breadcrumb-segment {
+      background: none;
+      border: none;
+      color: #888;
+      cursor: pointer;
+      padding: 4px 8px;
+      border-radius: 4px;
+      transition: all 0.2s;
+      font-size: 13px;
+      max-width: 200px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    
+    .breadcrumb-segment:hover {
+      background: #2d2d30;
+      color: #d4d4d4;
+    }
+    
+    .breadcrumb-segment:last-child {
+      color: #d4d4d4;
+      font-weight: 500;
+    }
+    
+    .breadcrumb-separator {
+      color: #555;
+      user-select: none;
+    }
+    
     /* Task List */
     .task-list {
       display: flex;
@@ -240,11 +281,6 @@
       background: #3e3e42;
     }
     
-    .task-item-wrapper.pinned .task-item {
-      border-color: #f0b429;
-      background: #3d3522;
-    }
-    
     .task-item {
       flex: 1;
       display: flex;
@@ -288,6 +324,19 @@
       border-radius: 10px;
     }
     
+    .enter-icon {
+      font-size: 14px;
+      color: #888;
+      margin-left: auto;
+      opacity: 0.6;
+      transition: opacity 0.2s;
+    }
+    
+    .task-item.type-epic:hover .enter-icon {
+      opacity: 1;
+      color: #007acc;
+    }
+    
     .task-item:hover {
       background: #2d2d30;
       border-color: #007acc;
@@ -298,28 +347,38 @@
       border-color: #007acc;
     }
     
-    .task-item-wrapper > .pin-btn {
-      background: #252526;
-      border: 1px solid #3e3e42;
-      border-radius: 6px;
-      padding: 0 8px;
-      cursor: pointer;
-      color: #888;
+    .task-item.current-epic {
+      /* Separator below provides visual distinction */
+    }
+    
+    .epic-separator {
       display: flex;
       align-items: center;
-      transition: all 0.2s;
+      margin: 12px 0;
+      gap: 12px;
     }
     
-    .task-item-wrapper > .pin-btn:hover {
-      background: #2d2d30;
-      border-color: #f0b429;
-      color: #f0b429;
+    .epic-separator::before,
+    .epic-separator::after {
+      content: '';
+      flex: 1;
+      height: 1px;
+      background: linear-gradient(90deg, transparent, rgba(9, 105, 218, 0.3), transparent);
     }
     
-    .task-item-wrapper > .pin-btn.pinned {
-      background: #3d3522;
-      border-color: #f0b429;
-      color: #f0b429;
+    .epic-separator::before {
+      background: linear-gradient(90deg, transparent, rgba(9, 105, 218, 0.3));
+    }
+    
+    .epic-separator::after {
+      background: linear-gradient(90deg, rgba(9, 105, 218, 0.3), transparent);
+    }
+    
+    .separator-icon {
+      width: 10px !important;
+      height: 10px !important;
+      flex-shrink: 0;
+      background: linear-gradient(135deg, #00d4ff, #7b2dff, #ff2d7b) !important;
     }
     
     .task-id {
@@ -491,6 +550,12 @@
       color: #888;
     }
     
+    .empty-state-inline {
+      text-align: center;
+      padding: 40px 20px;
+      color: #888;
+    }
+    
     .empty-state-icon {
       font-size: 48px;
       margin-bottom: 16px;

package/dist/viewer/chevron-CBYYYF2L.svg

@@ -1,3 +0,0 @@
-<svg viewBox="0 0 16 16" width="12" height="12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-  <path d="M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z"/>
-</svg>

package/dist/viewer/pin-CTBSQJY3.svg

@@ -1,3 +0,0 @@
-<svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-  <path d="M4.456.734a1.75 1.75 0 012.826.504l.613 1.327a3.08 3.08 0 002.084 1.707l2.454.584c1.332.317 1.8 1.972.832 2.94L11.06 10l3.72 3.72a.75.75 0 11-1.06 1.06L10 11.06l-2.204 2.205c-.968.968-2.623.5-2.94-.832l-.584-2.454a3.08 3.08 0 00-1.707-2.084l-1.327-.613a1.75 1.75 0 01-.504-2.826L4.456.734z"/>
-</svg>