claude-code-kanban 3.2.4 → 3.4.0

package/public/app.js

@@ -135,7 +135,11 @@ async function fetchSessions(includeTasks = true) {
     if (revealedPlanSessionId) allPinnedIds.add(revealedPlanSessionId);
     if (revealedStorageSessionId) allPinnedIds.add(revealedStorageSessionId);
     const pinnedParam = allPinnedIds.size > 0 ? `&pinned=${[...allPinnedIds].join(',')}` : '';
-    const sessionsPromise = fetch(`/api/sessions?limit=${sessionLimit}${pinnedParam}`).then((r) => r.json());
+    const projectParam =
+      filterProject && filterProject !== '__recent__' ? `&project=${encodeURIComponent(filterProject)}` : '';
+    const sessionsPromise = fetch(`/api/sessions?limit=${sessionLimit}${pinnedParam}${projectParam}`).then((r) =>
+      r.json(),
+    );
 
     let newSessions, newTasks;
     if (includeTasks) {
@@ -474,9 +478,10 @@ async function fetchTasks(sessionId) {
     for (const k of Object.keys(ownerColorCache)) delete ownerColorCache[k];
     for (const k of Object.keys(teamColorMap)) delete teamColorMap[k];
     sessionJustSelected = true;
+    resetAgentState();
     updateUrl();
     renderSession();
-    await fetchAgents(sessionId);
+    fetchAgents(sessionId);
     if (!agentLogMode) fetchMessages(sessionId);
   } catch (error) {
     console.error('Failed to fetch tasks:', error);
@@ -493,13 +498,18 @@ const _AGENT_STALE_MS = 5 * 60 * 1000; // kept for reference; no longer used for
 const WAITING_TTL_MS = 30 * 60 * 1000;
 const AGENT_LOG_MAX = 8;
 
+function resetAgentState() {
+  currentAgents = [];
+  currentWaiting = null;
+  lastAgentsHash = '';
+  renderAgentFooter();
+}
+
 async function fetchAgents(sessionId) {
   try {
     const res = await fetch(`/api/sessions/${sessionId}/agents`);
     if (!res.ok) {
-      currentAgents = [];
-      currentWaiting = null;
-      renderAgentFooter();
+      resetAgentState();
       return;
     }
     const data = await res.json();
@@ -628,6 +638,17 @@ function toggleMessagePanel() {
   updateUrl();
 }
 
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML onclick
+async function openSessionWithBookmarks(sessionId) {
+  if (!messagePanelOpen) {
+    const panel = document.getElementById('message-panel');
+    messagePanelOpen = true;
+    panel.classList.add('visible');
+    document.getElementById('message-toggle')?.classList.add('active');
+  }
+  await fetchTasks(sessionId);
+}
+
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
 async function viewAgentLog(agentId) {
   let agent = findAgentById(agentId);
@@ -1332,6 +1353,10 @@ const MARKETPLACE_SVG =
   '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 01-8 0"/></svg>';
 const MEMORY_SVG =
   '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>';
+const LINK_SVG_PATHS =
+  '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>';
+const linkSvg = (size) =>
+  `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${LINK_SVG_PATHS}</svg>`;
 
 //#endregion
 
@@ -2060,10 +2085,7 @@ async function showAllTasks() {
     if (agentLogMode) exitAgentLogMode();
     currentSessionId = null;
     ownerFilter = '';
-    currentAgents = [];
-    currentWaiting = null;
-    lastAgentsHash = '';
-    renderAgentFooter();
+    resetAgentState();
     const res = await fetch('/api/tasks/all');
     allTasksCache = await res.json();
     let tasks = allTasksCache;
@@ -2237,6 +2259,8 @@ function renderSessions() {
     const pinClass = pinState === 'sticky' ? ' sticky' : pinState === 'pinned' ? ' pinned' : '';
     const pinTitle = pinState === 'pinned' || pinState === 'sticky' ? 'Unpin' : 'Pin';
     const showCtx = !!session.contextStatus;
+    const linkedDocsCount = getSessionPreviewPaths(session.id).length;
+    const bookmarksCount = loadPins(session.id).length;
     return `
           <button onclick="fetchTasks('${session.id}')" data-session-id="${session.id}" class="session-item ${isActive ? 'active' : ''} ${session.hasWaitingForUser ? 'permission-pending' : ''} ${!session.hasRecentLog && !session.inProgress && !session.hasWaitingForUser ? 'stale' : ''} ${showCtx ? 'has-context' : ''}" title="${tooltip}">
             <span class="session-pin-btn${pinClass}" onclick="event.stopPropagation();toggleSessionPin('${escapeHtml(session.id)}')" title="${pinTitle} session">${SESSION_PIN_SVG}</span>
@@ -2247,9 +2271,11 @@ function renderSessions() {
             <div class="session-progress">
               <span class="session-indicators">
                 ${isTeam ? `<span class="team-badge" title="${memberCount} team members"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>${memberCount}</span>` : ''}
-                ${session.sharedTaskList ? `<span class="shared-tasklist-badge" title="Shared task list: ${escapeHtml(session.sharedTaskList)}"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg></span>` : ''}
+                ${session.sharedTaskList ? `<span class="shared-tasklist-badge" title="Shared task list: ${escapeHtml(session.sharedTaskList)}">${linkSvg(12)}</span>` : ''}
                 ${isTeam || session.project || showCtx ? `<span class="team-info-btn" onclick="event.stopPropagation(); showSessionInfoModal('${session.id}')" title="View session info">ℹ</span>` : ''}
                 ${session.hasPlan ? `<span class="plan-indicator" onclick="event.stopPropagation(); openPlanForSession('${session.id}')" title="View plan"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg></span>` : ''}
+                ${linkedDocsCount > 0 ? `<span class="linked-docs-badge" onclick="event.stopPropagation(); showSessionInfoModal('${session.id}')" title="${linkedDocsCount} linked document${linkedDocsCount > 1 ? 's' : ''}">${linkSvg(10)}${linkedDocsCount}</span>` : ''}
+                ${bookmarksCount > 0 ? `<span class="bookmarks-badge" onclick="event.stopPropagation(); openSessionWithBookmarks('${session.id}')" title="${bookmarksCount} bookmarked message${bookmarksCount > 1 ? 's' : ''}"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>${bookmarksCount}</span>` : ''}
                 ${session.hasRunningAgents ? '<span class="agent-badge" title="Active agents">🤖</span>' : ''}
                 ${session.planSourceSessionId ? `<span class="plan-indicator" title="Implements plan — click to reveal plan session" onclick="event.stopPropagation(); revealPlanSession('${escapeHtml(session.planSourceSessionId)}')">📋</span>` : ''}
                 ${session.hasWaitingForUser ? '<span class="agent-badge" title="Waiting for user">❓</span>' : ''}
@@ -3527,6 +3553,7 @@ function _renderStorageTab() {
   const tab = document.querySelector('.storage-tab.active')?.dataset.tab || 'sessions';
   if (tab === 'sessions') body.innerHTML = _renderStorageSessions();
   else if (tab === 'scratchpads') body.innerHTML = _renderStorageScratchpads();
+  else if (tab === 'linked-docs') body.innerHTML = _renderStorageLinkedDocs();
 }
 
 function _renderStorageSessions() {
@@ -3749,6 +3776,87 @@ function _storageDeleteScratchpad(key) {
   _updateStorageTotal();
 }
 
+function _renderStorageLinkedDocs() {
+  const entries = [];
+  for (let i = 0; i < localStorage.length; i++) {
+    const key = localStorage.key(i);
+    if (!key.startsWith(PREVIEW_STORAGE_PREFIX)) continue;
+    try {
+      const arr = JSON.parse(localStorage.getItem(key)) || [];
+      if (Array.isArray(arr) && arr.length) {
+        entries.push({ sessionId: key.slice(PREVIEW_STORAGE_PREFIX.length), paths: arr });
+      }
+    } catch {}
+  }
+  if (!entries.length) return '<div class="storage-empty">No linked documents</div>';
+
+  const byId = new Map(entries.map((e) => [e.sessionId, e]));
+  const { groups, orphans } = _groupByProject(entries.map((e) => e.sessionId));
+
+  function renderDocRow(sessionId, p) {
+    const name = p.split(/[\\/]/).pop();
+    const sid = _escapeForJsAttr(sessionId);
+    const jsPath = _escapeForJsAttr(p);
+    return `<div class="storage-item" style="padding-left:24px;">
+      <span class="storage-item-id" title="${escapeHtml(p)}">${escapeHtml(name)}</span>
+      <div class="storage-item-actions">
+        <button onclick="_storagePreviewLinkedDoc('${jsPath}')">View</button>
+        <button class="danger" onclick="_storageUnlinkDoc('${sid}','${jsPath}')">Unlink</button>
+      </div>
+    </div>`;
+  }
+
+  function renderSessionItem({ id, session }) {
+    const entry = byId.get(id);
+    if (!entry) return '';
+    const eid = escapeHtml(id);
+    const count = entry.paths.length;
+    const header = `<div class="storage-group-header">
+      <span>${_sessionLabel(session, id)} <span class="storage-item-badge">${count} doc${count > 1 ? 's' : ''}</span></span>
+      <div class="storage-item-actions">
+        <button class="danger" onclick="_storageClearLinkedDocs('${eid}')">Clear All</button>
+      </div>
+    </div>`;
+    const rows = entry.paths.map((p) => renderDocRow(id, p)).join('');
+    return header + rows;
+  }
+
+  let html = '';
+  for (const [project, items] of groups) {
+    const count = items.length;
+    html += _renderProjectGroup(
+      escapeHtml(_projectLabel(project)),
+      `${count} session${count > 1 ? 's' : ''}`,
+      items.map(renderSessionItem).join(''),
+    );
+  }
+  if (orphans.length) {
+    html += _renderOrphanGroup(orphans.length, orphans.map(renderSessionItem).join(''));
+  }
+  return html;
+}
+
+function _storagePreviewLinkedDoc(path) {
+  closeStorageManager();
+  openPreviewByPath(path);
+}
+
+function _storageUnlinkDoc(sessionId, path) {
+  removeSessionPreviewPath(sessionId, path);
+  if (sessionId === _infoModalSessionId) refreshInfoModalLinkedDocs();
+  renderSessions();
+  _renderStorageTab();
+  _updateStorageTotal();
+}
+
+function _storageClearLinkedDocs(sessionId) {
+  localStorage.removeItem(PREVIEW_STORAGE_PREFIX + sessionId);
+  if (sessionId === _infoModalSessionId) refreshInfoModalLinkedDocs();
+  renderSessions();
+  _renderStorageTab();
+  _updateStorageTotal();
+}
+
 function _findOrphanedKeys() {
   const known = _getKnownSessionIds();
   if (!known.size) return [];
@@ -3761,6 +3869,8 @@ function _findOrphanedKeys() {
       if (!known.has(key.slice('pinned-messages-'.length))) orphaned.push(key);
     } else if (key.startsWith('scratchpad-') && !key.startsWith('scratchpad-project:')) {
       if (!known.has(key.slice('scratchpad-'.length))) orphaned.push(key);
+    } else if (key.startsWith(PREVIEW_STORAGE_PREFIX)) {
+      if (!known.has(key.slice(PREVIEW_STORAGE_PREFIX.length))) orphaned.push(key);
     }
   }
   return orphaned;
@@ -4036,6 +4146,224 @@ document.addEventListener('keydown', (e) => {
 
 //#endregion
 
+//#region MARKDOWN_PREVIEW
+const PREVIEW_STORAGE_PREFIX = 'preview-paths-';
+let currentPreviewPath = null;
+
+function getSessionPreviewPaths(sessionId) {
+  if (!sessionId) return [];
+  try {
+    const raw = localStorage.getItem(PREVIEW_STORAGE_PREFIX + sessionId);
+    const arr = raw ? JSON.parse(raw) : [];
+    return Array.isArray(arr) ? arr : [];
+  } catch {
+    return [];
+  }
+}
+
+function addSessionPreviewPath(sessionId, filePath) {
+  if (!sessionId || !filePath) return;
+  const paths = getSessionPreviewPaths(sessionId).filter((p) => p !== filePath);
+  paths.unshift(filePath);
+  localStorage.setItem(PREVIEW_STORAGE_PREFIX + sessionId, JSON.stringify(paths.slice(0, 20)));
+}
+
+function removeSessionPreviewPath(sessionId, filePath) {
+  if (!sessionId) return;
+  const paths = getSessionPreviewPaths(sessionId).filter((p) => p !== filePath);
+  if (paths.length) localStorage.setItem(PREVIEW_STORAGE_PREFIX + sessionId, JSON.stringify(paths));
+  else localStorage.removeItem(PREVIEW_STORAGE_PREFIX + sessionId);
+}
+
+function splitFrontmatter(text) {
+  const m = text.match(/^---\r?\n([\s\S]*?)\r?\n---\r?\n?([\s\S]*)$/);
+  if (!m) return { fm: null, body: text };
+  const fm = {};
+  for (const line of m[1].split(/\r?\n/)) {
+    const kv = line.match(/^([A-Za-z0-9_.-]+)\s*:\s*(.*)$/);
+    if (kv) fm[kv[1]] = kv[2].replace(/^['"]|['"]$/g, '');
+  }
+  return { fm, body: m[2] };
+}
+
+function renderFrontmatterBlock(fm) {
+  const rows = Object.entries(fm)
+    .map(
+      ([k, v]) =>
+        `<div class="fm-row"><span class="fm-k">${escapeHtml(k)}</span><span class="fm-v">${escapeHtml(String(v))}</span></div>`,
+    )
+    .join('');
+  return `<details class="preview-fm" open><summary>frontmatter</summary><div class="fm-grid">${rows}</div></details>`;
+}
+
+function openPreviewModal(filePath, content) {
+  currentPreviewPath = filePath;
+  document.getElementById('preview-modal-title').textContent = filePath.split(/[\\/]/).pop();
+  const { fm, body } = /\.(md|markdown)$/i.test(filePath) ? splitFrontmatter(content) : { fm: null, body: content };
+  document.getElementById('preview-modal-body').innerHTML =
+    (fm ? renderFrontmatterBlock(fm) : '') + renderMarkdown(body);
+  document.getElementById('preview-modal-meta').textContent = filePath;
+  document.getElementById('preview-modal').classList.add('visible');
+  updatePreviewLinkBtn();
+}
+
+function isPreviewLinkedToCurrentSession() {
+  if (!currentPreviewPath || !currentSessionId) return false;
+  return getSessionPreviewPaths(currentSessionId).includes(currentPreviewPath);
+}
+
+function updatePreviewLinkBtn() {
+  const btn = document.getElementById('preview-link-btn');
+  if (!btn) return;
+  if (!currentSessionId) {
+    btn.style.display = 'none';
+    return;
+  }
+  btn.style.display = '';
+  const linked = isPreviewLinkedToCurrentSession();
+  btn.title = linked ? 'Unlink from current session' : 'Link to current session';
+  btn.style.color = linked ? 'var(--accent, #5b9a6b)' : '';
+}
+
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML
+function togglePreviewSessionLink() {
+  if (!currentPreviewPath || !currentSessionId) {
+    showToast('Select a session first');
+    return;
+  }
+  if (isPreviewLinkedToCurrentSession()) {
+    removeSessionPreviewPath(currentSessionId, currentPreviewPath);
+    showToast('Unlinked from session');
+  } else {
+    addSessionPreviewPath(currentSessionId, currentPreviewPath);
+    showToast('Linked to session');
+  }
+  updatePreviewLinkBtn();
+  if (_infoModalSessionId === currentSessionId) {
+    refreshInfoModalLinkedDocs();
+  }
+  renderSessions();
+}
+
+function refreshInfoModalLinkedDocs() {
+  const bodyEl = document.getElementById('team-modal-body');
+  if (!bodyEl) return;
+  const existing = bodyEl.querySelector('.linked-docs-section');
+  const html = renderLinkedDocsHtml(_infoModalSessionId);
+  if (!existing) {
+    if (!html) return;
+    const planCard = bodyEl.querySelector('[data-plan-card]');
+    const wrap = document.createElement('div');
+    wrap.innerHTML = html;
+    const node = wrap.firstElementChild;
+    if (planCard?.nextSibling) planCard.parentNode.insertBefore(node, planCard.nextSibling);
+    else bodyEl.appendChild(node);
+    bindLinkedDocsHandlers(node, _infoModalSessionId);
+    return;
+  }
+  if (!html) {
+    existing.remove();
+    return;
+  }
+  const wrap = document.createElement('div');
+  wrap.innerHTML = html;
+  const node = wrap.firstElementChild;
+  existing.replaceWith(node);
+  bindLinkedDocsHandlers(node, _infoModalSessionId);
+}
+
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML
+function closePreviewModal() {
+  resetModalFullscreen('preview-modal');
+  currentPreviewPath = null;
+}
+
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML
+function openPreviewInEditor() {
+  if (!currentPreviewPath) return;
+  postAndToast('/api/open-in-editor', { file: currentPreviewPath }, 'in editor');
+}
+
+async function openPreviewByPath(filePath) {
+  if (!filePath) return;
+  try {
+    const r = await fetch(`/api/preview?path=${encodeURIComponent(filePath)}`);
+    if (!r.ok) {
+      showToast('Preview file unavailable');
+      return;
+    }
+    const data = await r.json();
+    openPreviewModal(data.path, data.content);
+  } catch {
+    showToast('Failed to load preview');
+  }
+}
+
+function handleSessionOpenEvent(data) {
+  const { id } = data;
+  if (!id) return;
+  const target = sessions.find((s) => s.id === id);
+  if (!target) {
+    showToast(`Session not found: ${id.slice(0, 8)}`);
+    return;
+  }
+  if (sessionFilter !== 'active') {
+    sessionFilter = 'active';
+    const sel = document.getElementById('session-filter');
+    if (sel) sel.value = 'active';
+    updateUrl();
+  }
+  if (!isSessionActive(target)) {
+    stickySessionIds.add(id);
+  }
+  fetchTasks(id);
+}
+
+async function handlePreviewOpenEvent(data) {
+  const { path: filePath, content, sessionId } = data;
+  if (sessionId && sessionId !== currentSessionId) {
+    if (sessions.find((s) => s.id === sessionId)) {
+      await fetchTasks(sessionId);
+    } else {
+      showToast(`Preview received for unknown session ${sessionId.slice(0, 8)}`);
+    }
+  }
+  openPreviewModal(filePath, content);
+}
+
+function renderLinkedDocsHtml(sessionId) {
+  const paths = getSessionPreviewPaths(sessionId);
+  if (!paths.length) return '';
+  const items = paths
+    .map((p, i) => {
+      const name = p.split(/[\\/]/).pop();
+      return `<a href="#" class="linked-doc-link" data-idx="${i}" title="${escapeHtml(p)}" style="color:var(--accent-text);text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;">${escapeHtml(name)}</a>`;
+    })
+    .join(', ');
+  return `<div class="linked-docs-section" style="margin-bottom:16px;font-size:12px;">
+    <div style="font-size:11px;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px;display:flex;align-items:center;gap:6px;">
+      ${linkSvg(12)}
+      <span>Linked documents</span>
+      <span style="background:var(--bg-elevated);border:1px solid var(--border);border-radius:10px;padding:0 6px;font-size:10px;color:var(--text-secondary);">${paths.length}</span>
+    </div>
+    <div>${items}</div>
+  </div>`;
+}
+
+function bindLinkedDocsHandlers(container, sessionId) {
+  if (!container) return;
+  const links = container.querySelectorAll('.linked-doc-link');
+  if (!links.length) return;
+  const paths = getSessionPreviewPaths(sessionId);
+  for (const link of links) {
+    link.addEventListener('click', (e) => {
+      e.preventDefault();
+      openPreviewByPath(paths[+link.dataset.idx]);
+    });
+  }
+}
+//#endregion
+
 //#region SSE
 function setupEventSource() {
   let retryDelay = 1000;
@@ -4149,6 +4477,15 @@ function setupEventSource() {
 
       if (data.type === 'context-update') {
         debouncedRefresh(data.sessionId, true);
+        refreshRateLimits();
+      }
+
+      if (data.type === 'preview:open') {
+        handlePreviewOpenEvent(data);
+      }
+
+      if (data.type === 'session:open') {
+        handleSessionOpenEvent(data);
       }
 
       if (data.type === 'team-update') {
@@ -4590,7 +4927,7 @@ document.addEventListener('click', (e) => {
 function filterByProject(project) {
   filterProject = project || null;
   updateUrl();
-  renderSessions();
+  fetchSessions(false);
   showAllTasks();
 }
 
@@ -4936,7 +5273,7 @@ function showInfoModal(session, teamConfig, tasks, planContent) {
     _pendingPlanContent = planContent;
     const titleMatch = planContent.match(/^#\s+(.+)$/m);
     const planTitle = titleMatch ? titleMatch[1].trim() : null;
-    html += `<div onclick="openPlanModal()" style="margin-bottom: 16px; padding: 10px 14px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: all 0.15s ease;" onmouseover="this.style.borderColor='var(--accent)';this.style.background='var(--bg-hover)'" onmouseout="this.style.borderColor='var(--border)';this.style.background='var(--bg-elevated)'">
+    html += `<div data-plan-card="1" onclick="openPlanModal()" style="margin-bottom: 16px; padding: 10px 14px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: all 0.15s ease;" onmouseover="this.style.borderColor='var(--accent)';this.style.background='var(--bg-hover)'" onmouseout="this.style.borderColor='var(--border)';this.style.background='var(--bg-elevated)'">
           <span style="font-size: 14px;">📋</span>
           <div style="flex: 1; min-width: 0;">
             <div style="font-size: 11px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px;">Plan</div>
@@ -4946,6 +5283,8 @@ function showInfoModal(session, teamConfig, tasks, planContent) {
         </div>`;
   }
 
+  html += renderLinkedDocsHtml(session.id);
+
   // Team info section
   if (teamConfig) {
     const ownerCounts = {};
@@ -5000,6 +5339,7 @@ function showInfoModal(session, teamConfig, tasks, planContent) {
   }
 
   bodyEl.innerHTML = html;
+  bindLinkedDocsHandlers(bodyEl, session.id);
   const alreadyVisible = modal.classList.contains('visible');
   _infoModalSessionId = session.id;
   updateStickyBtnState();
@@ -5298,10 +5638,76 @@ msgContentEl.addEventListener('wheel', function (e) {
   }
 });
 
+const footerState = { version: null, limitsKey: null, timer: null };
+function formatResetIn(epochSec) {
+  if (!epochSec) return null;
+  const ms = epochSec * 1000 - Date.now();
+  if (ms <= 0) return 'now';
+  const m = Math.round(ms / 60000);
+  if (m < 60) return `${m}m`;
+  const h = Math.floor(m / 60);
+  const rm = m % 60;
+  if (h < 24) return rm ? `${h}h ${rm}m` : `${h}h`;
+  const d = Math.floor(h / 24);
+  const rh = h % 24;
+  return rh ? `${d}d ${rh}h` : `${d}d`;
+}
+function makeLimitCell(label, bucket) {
+  const pct = bucket?.used_percentage;
+  const cell = document.createElement('span');
+  cell.className = 'footer-limit-cell';
+  const reset = formatResetIn(bucket?.resets_at);
+  if (reset) cell.title = `${label}: resets in ${reset}`;
+  cell.append(document.createTextNode(`${label} `));
+  const strong = document.createElement('strong');
+  strong.textContent = pct == null ? '-%' : `${Math.ceil(pct)}%`;
+  cell.appendChild(strong);
+  return cell;
+}
+function makeLimitSpan(rl) {
+  const span = document.createElement('span');
+  span.className = 'footer-limits';
+  span.append(makeLimitCell('5h', rl?.five_hour), document.createTextNode(' · '), makeLimitCell('7d', rl?.seven_day));
+  return span;
+}
+function renderSidebarFooter(rateLimits) {
+  const el = document.getElementById('sidebar-footer');
+  if (!el) return;
+  const fh = rateLimits?.five_hour?.used_percentage ?? null;
+  const sd = rateLimits?.seven_day?.used_percentage ?? null;
+  const children = [];
+  if (footerState.version) {
+    const v = document.createElement('span');
+    v.textContent = `v${footerState.version}`;
+    children.push(v);
+  }
+  if (fh != null || sd != null) children.push(makeLimitSpan(rateLimits));
+  el.replaceChildren(...children);
+}
+function refreshRateLimits() {
+  if (footerState.timer) return;
+  footerState.timer = setTimeout(() => {
+    footerState.timer = null;
+    fetch('/api/context-status')
+      .then((r) => r.json())
+      .then((all) => {
+        const rl = Object.values(all || {}).find((e) => e?.rate_limits)?.rate_limits || null;
+        const fh = rl?.five_hour?.used_percentage ?? null;
+        const sd = rl?.seven_day?.used_percentage ?? null;
+        const key = `${fh}|${sd}`;
+        if (key === footerState.limitsKey) return;
+        footerState.limitsKey = key;
+        renderSidebarFooter(rl);
+      })
+      .catch(() => {});
+  }, 1500);
+}
 fetch('/api/version')
   .then((r) => r.json())
   .then((d) => {
-    document.getElementById('sidebar-footer').textContent = `v${d.version}`;
+    footerState.version = d.version;
+    renderSidebarFooter(null);
+    refreshRateLimits();
   })
   .catch(() => {});
 

package/public/index.html

@@ -310,6 +310,33 @@
     </div>
   </div>
 
+  <!-- Markdown Preview Modal -->
+  <div id="preview-modal" class="modal-overlay" style="z-index:10002;" onclick="closePreviewModal()">
+    <div class="modal preview-modal-dialog" onclick="event.stopPropagation()">
+      <div class="modal-header">
+        <h3 class="modal-title" id="preview-modal-title">Preview</h3>
+        <div style="display:flex;gap:4px;align-items:center;">
+          <button id="preview-link-btn" class="icon-btn" aria-label="Link to current session" title="Link to current session" onclick="togglePreviewSessionLink()">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
+          </button>
+          <button class="icon-btn" aria-label="Open in editor" title="Open in editor" onclick="openPreviewInEditor()">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
+          </button>
+          <button id="preview-modal-fullscreen-btn" class="icon-btn" aria-label="Toggle fullscreen" title="Toggle fullscreen" onclick="toggleModalFullscreen('preview-modal')">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
+          </button>
+          <button class="modal-close" aria-label="Close" onclick="closePreviewModal()">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
+          </button>
+        </div>
+      </div>
+      <div class="modal-body" style="flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden;">
+        <div id="preview-modal-body" class="rendered-md" style="word-break: break-word; font-size: 13px; line-height: 1.6; overflow-y: auto; flex: 0 1 auto; min-height: 0; padding-right: 8px;"></div>
+        <div id="preview-modal-meta" style="margin-top: 12px; font-size: 11px; color: var(--text-muted); flex-shrink: 0;"></div>
+      </div>
+    </div>
+  </div>
+
   <!-- Help Modal -->
   <div id="help-modal" class="modal-overlay" onclick="closeHelpModal()">
     <div class="modal" onclick="event.stopPropagation()">
@@ -517,7 +544,7 @@
       </div>
       <div id="team-modal-body" class="modal-body"></div>
       <div class="modal-footer">
-        <button id="session-info-dismiss-btn" class="btn btn-secondary" onclick="toggleDismissSession(_infoModalSessionId)">Dismiss</button>
+        <button id="session-info-dismiss-btn" class="btn btn-secondary" onclick="toggleDismissSession(_infoModalSessionId); closeTeamModal()">Dismiss</button>
         <button class="btn btn-primary" onclick="closeTeamModal()">Close</button>
       </div>
     </div>
@@ -644,6 +671,7 @@
       <div class="storage-tabs">
         <button class="storage-tab active" data-tab="sessions" onclick="switchStorageTab('sessions')">Sessions</button>
         <button class="storage-tab" data-tab="scratchpads" onclick="switchStorageTab('scratchpads')">Scratchpads</button>
+        <button class="storage-tab" data-tab="linked-docs" onclick="switchStorageTab('linked-docs')">Linked Docs</button>
       </div>
       <div class="modal-body" id="storage-modal-body" style="overflow-y:auto;min-height:200px;max-height:60vh;padding-top:16px;padding-right:8px;"></div>
       <div class="modal-footer">