claude-code-kanban 2.2.0-rc.6 → 2.2.0-rc.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-kanban",
-  "version": "2.2.0-rc.6",
+  "version": "2.2.0-rc.8",
   "description": "A web-based Kanban board for viewing Claude Code tasks with agent teams support",
   "main": "server.js",
   "bin": {
@@ -8,7 +8,7 @@
   },
   "scripts": {
     "start": "node server.js",
-    "dev": "node server.js --open",
+    "dev": "node --watch server.js",
     "test": "node --test test/contracts.test.js",
     "test:hooks": "bash tests/test-agent-spy.sh",
     "validate:schemas": "node test/validate-live-schemas.js",

package/public/app.js

@@ -114,7 +114,8 @@ let lastTasksHash = '';
 //#region DATA_FETCHING
 async function fetchSessions() {
   try {
-    const pinnedParam = pinnedSessionIds.size > 0 ? `&pinned=${[...pinnedSessionIds].join(',')}` : '';
+    const allPinnedIds = new Set([...pinnedSessionIds, ...stickySessionIds]);
+    const pinnedParam = allPinnedIds.size > 0 ? `&pinned=${[...allPinnedIds].join(',')}` : '';
     const [newSessions, newTasks] = await Promise.all([
       fetch(`/api/sessions?limit=${sessionLimit}${pinnedParam}`).then((r) => r.json()),
       fetch('/api/tasks/all').then((r) => r.json()),
@@ -435,6 +436,10 @@ async function fetchTasks(sessionId) {
     if (agentLogMode && sessionId !== currentSessionId) exitAgentLogMode();
     if (sessionId !== currentSessionId && document.getElementById('scratchpad-modal').classList.contains('visible'))
       closeScratchpad();
+    if (revealedPlanSessionId && sessionId !== revealedPlanSessionId) {
+      revealedPlanSessionId = null;
+      renderSessions();
+    }
     currentSessionId = sessionId;
     currentPins = loadPins(sessionId);
     ownerFilter = '';
@@ -500,9 +505,7 @@ async function fetchProjectView(projectPath) {
   if (msgPinned) msgPinned.innerHTML = '';
   const projectSessions = sessions.filter((s) => s.project === projectPath);
   currentProjectSessionIds = projectSessions.map((s) => s.id);
-  const activeSessionIds = projectSessions
-    .filter((s) => isSessionActive(s) || pinnedSessionIds.has(s.id))
-    .map((s) => s.id);
+  const activeSessionIds = projectSessions.filter((s) => isSessionActive(s) || isAnyPinned(s.id)).map((s) => s.id);
 
   const encoded = btoa(projectPath);
   const [tasksResult, agentResults] = await Promise.all([
@@ -551,9 +554,7 @@ async function fetchProjectView(projectPath) {
 async function refreshProjectAgents() {
   if (!currentProjectPath) return;
   const projectSessions = sessions.filter((s) => s.project === currentProjectPath);
-  const activeSessionIds = projectSessions
-    .filter((s) => isSessionActive(s) || pinnedSessionIds.has(s.id))
-    .map((s) => s.id);
+  const activeSessionIds = projectSessions.filter((s) => isSessionActive(s) || isAnyPinned(s.id)).map((s) => s.id);
   const agentResults = await Promise.all(
     activeSessionIds.map((id) =>
       fetch(`/api/sessions/${id}/agents`)
@@ -758,7 +759,6 @@ function renderPinnedSection() {
             <div class="msg-body"><div class="msg-text">${escapeHtml(p.tool || '')}${toolDetail}</div><div class="msg-time">${formatDate(p.timestamp)}</div></div>${pinnedAgentLogBtn}${unpin}
           </div>`;
       } else if (p.type === 'agent') {
-        const agentClick = `onclick="showAgentModal('${escapeHtml(p.agentId)}')" style="cursor:pointer"`;
         const agentLogBtn = agentLogButton(p.agentId);
         const msgTrunc = p.lastMessage
           ? escapeHtml(
@@ -768,7 +768,7 @@ function renderPinnedSection() {
             )
           : '';
         const agentDetail = msgTrunc ? ` <span style="color:var(--text-muted)">${msgTrunc}</span>` : '';
-        return `<div class="msg-item msg-tool" ${agentClick}>
+        return `<div class="msg-item msg-tool" ${click}>
             ${MSG_ICON_TOOL}
             <div class="msg-body"><div class="msg-text">${escapeHtml(p.agentType || 'Agent')}${agentDetail}</div><div class="msg-time">${formatDate(p.timestamp)}</div></div>${agentLogBtn}${unpin}
           </div>`;
@@ -1019,27 +1019,8 @@ function showPinnedMsgDetail(pinIdx) {
   }
   currentMsgDetailIdx = null;
   currentPinDetailId = pin.id;
+  _renderPinToDetail(pin);
   const body = document.getElementById('msg-detail-body');
-  const agentBtn = document.getElementById('msg-detail-agent-btn');
-  if (pin.type === 'tool_use') {
-    document.getElementById('msg-detail-title').textContent = pin.tool || 'Tool';
-    const fullText = pin.fullDetail || pin.detail || '';
-    const pinParamsHtml = renderToolParamsHtml(pin.params);
-    const pinResultHtml = renderToolResultHtml(pin.toolResult, pin.toolResultTruncated, pin.toolResultFull);
-    const pinDetailEscaped = escapeHtml(fullText);
-    const pinDetailRendered = pin.tool === 'Bash' ? highlightBash(pinDetailEscaped) : pinDetailEscaped;
-    body.innerHTML =
-      (fullText ? `<pre class="msg-detail-pre">${pinDetailRendered}</pre>` : '<em>No details</em>') +
-      pinParamsHtml +
-      pinResultHtml;
-    agentBtn.style.display = 'none';
-  } else {
-    const text = stripAnsi(pin.fullText || pin.text || '');
-    document.getElementById('msg-detail-title').textContent = pin.type === 'assistant' ? 'Claude' : 'User';
-    agentBtn.style.display = 'none';
-    body.innerHTML = renderMarkdown(text);
-  }
-  document.getElementById('msg-detail-meta').textContent = formatDate(pin.timestamp);
   const pinModal = document.getElementById('msg-detail-modal').querySelector('.modal');
   autoSizeModal(pinModal, body);
   const pinBtn = document.getElementById('msg-detail-pin-btn');
@@ -1073,6 +1054,7 @@ function togglePinnedCollapse() {
 
 //#region PINNING
 let pinnedSessionIds = new Set();
+let stickySessionIds = new Set();
 
 function loadPinnedSessions() {
   try {
@@ -1082,18 +1064,72 @@ function loadPinnedSessions() {
   }
 }
 
+function loadStickySessions() {
+  try {
+    return new Set(JSON.parse(localStorage.getItem('sticky-sessions')) || []);
+  } catch {
+    return new Set();
+  }
+}
+
 function savePinnedSessions() {
   localStorage.setItem('pinned-sessions', JSON.stringify([...pinnedSessionIds]));
+  localStorage.setItem('sticky-sessions', JSON.stringify([...stickySessionIds]));
 }
 
+// unpinned → pinned → sticky → unpinned
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function toggleSessionPin(sessionId) {
-  if (pinnedSessionIds.has(sessionId)) pinnedSessionIds.delete(sessionId);
-  else pinnedSessionIds.add(sessionId);
+  if (stickySessionIds.has(sessionId)) {
+    stickySessionIds.delete(sessionId);
+    pinnedSessionIds.delete(sessionId);
+  } else if (pinnedSessionIds.has(sessionId)) {
+    pinnedSessionIds.delete(sessionId);
+    stickySessionIds.add(sessionId);
+  } else {
+    pinnedSessionIds.add(sessionId);
+  }
   savePinnedSessions();
   renderSessions();
 }
 
+function getSessionPinState(sessionId) {
+  if (stickySessionIds.has(sessionId)) return 'sticky';
+  if (pinnedSessionIds.has(sessionId)) return 'pinned';
+  return 'none';
+}
+
+function isAnyPinned(sessionId) {
+  return pinnedSessionIds.has(sessionId) || stickySessionIds.has(sessionId);
+}
+
+function _renderPinToDetail(pin) {
+  const body = document.getElementById('msg-detail-body');
+  const agentBtn = document.getElementById('msg-detail-agent-btn');
+  agentBtn.style.display = 'none';
+  if (pin.type === 'tool_use') {
+    document.getElementById('msg-detail-title').textContent = pin.tool || 'Tool';
+    const fullText = pin.fullDetail || pin.detail || '';
+    const pinParamsHtml = renderToolParamsHtml(pin.params);
+    const pinResultHtml = renderToolResultHtml(pin.toolResult, pin.toolResultTruncated, pin.toolResultFull);
+    const pinDetailEscaped = escapeHtml(fullText);
+    const pinDetailRendered = pin.tool === 'Bash' ? highlightBash(pinDetailEscaped) : pinDetailEscaped;
+    body.innerHTML =
+      (fullText ? `<pre class="msg-detail-pre">${pinDetailRendered}</pre>` : '<em>No details</em>') +
+      pinParamsHtml +
+      pinResultHtml;
+  } else if (pin.type === 'agent') {
+    document.getElementById('msg-detail-title').textContent = pin.agentType || 'Agent';
+    const lastMsg = stripAnsi(pin.lastMessage || '');
+    body.innerHTML = lastMsg ? renderMarkdown(lastMsg) : '<em>No agent message</em>';
+  } else {
+    const text = stripAnsi(pin.fullText || pin.text || '');
+    document.getElementById('msg-detail-title').textContent = pin.type === 'assistant' ? 'Claude' : 'User';
+    body.innerHTML = renderMarkdown(text);
+  }
+  document.getElementById('msg-detail-meta').textContent = formatDate(pin.timestamp);
+}
+
 const SESSION_PIN_SVG = PIN_SVG.replace('width="14" height="14"', 'width="12" height="12"');
 
 //#endregion
@@ -1737,6 +1773,22 @@ function closeAgentModal() {
 //#endregion
 
 //#region RENDERING
+let revealedPlanSessionId = null;
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML
+function revealPlanSession(planSessionId) {
+  if (revealedPlanSessionId === planSessionId) {
+    revealedPlanSessionId = null;
+  } else {
+    revealedPlanSessionId = planSessionId;
+  }
+  renderSessions();
+  if (revealedPlanSessionId) {
+    fetchTasks(planSessionId);
+    const el = document.querySelector(`.session-item[data-session-id="${CSS.escape(planSessionId)}"]`);
+    if (el) el.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+  }
+}
+
 async function showAllTasks() {
   try {
     viewMode = 'all';
@@ -1810,16 +1862,9 @@ function renderSessions() {
       if (isActive) activeSessionIds.add(s.id);
       return isActive;
     });
-    // Include plan sessions whose implementation is active
-    const planSessions = sessions.filter(
-      (s) =>
-        s.planImplementationSessionId &&
-        activeSessionIds.has(s.planImplementationSessionId) &&
-        !activeSessionIds.has(s.id),
-    );
-    if (planSessions.length) {
-      filteredSessions = filteredSessions.concat(planSessions);
-      filteredSessions.sort((a, b) => new Date(b.modifiedAt) - new Date(a.modifiedAt));
+    if (revealedPlanSessionId && !filteredSessions.some((s) => s.id === revealedPlanSessionId)) {
+      const planSession = sessions.find((s) => s.id === revealedPlanSessionId);
+      if (planSession) filteredSessions.push(planSession);
     }
   }
   if (filterProject) {
@@ -1850,10 +1895,10 @@ function renderSessions() {
     });
   }
 
-  // Always include pinned sessions even if they don't match filters
-  if (pinnedSessionIds.size > 0 && !searchQuery) {
+  // Always include pinned/sticky sessions even if they don't match filters
+  if ((pinnedSessionIds.size > 0 || stickySessionIds.size > 0) && !searchQuery) {
     const filteredIds = new Set(filteredSessions.map((s) => s.id));
-    const missingPinned = sessions.filter((s) => pinnedSessionIds.has(s.id) && !filteredIds.has(s.id));
+    const missingPinned = sessions.filter((s) => isAnyPinned(s.id) && !filteredIds.has(s.id));
     if (missingPinned.length) filteredSessions = [...missingPinned, ...filteredSessions];
   }
 
@@ -1907,11 +1952,13 @@ function renderSessions() {
     const isTeam = session.isTeam;
     const memberCount = session.memberCount || 0;
 
-    const isSessionPinned = pinnedSessionIds.has(session.id);
+    const pinState = getSessionPinState(session.id);
+    const pinClass = pinState === 'sticky' ? ' sticky' : pinState === 'pinned' ? ' pinned' : '';
+    const pinTitle = pinState === 'sticky' ? 'Unpin' : pinState === 'pinned' ? 'Sticky pin' : 'Pin';
     const showCtx = !!session.contextStatus;
     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${isSessionPinned ? ' pinned' : ''}" onclick="event.stopPropagation();toggleSessionPin('${escapeHtml(session.id)}')" title="${isSessionPinned ? 'Unpin' : 'Pin'} session">${SESSION_PIN_SVG}</span>
+            <span class="session-pin-btn${pinClass}" onclick="event.stopPropagation();toggleSessionPin('${escapeHtml(session.id)}')" title="${pinTitle} session">${SESSION_PIN_SVG}</span>
             <div class="session-name">${escapeHtml(primaryName)}</div>
             ${secondaryName ? `<div class="session-secondary">${escapeHtml(secondaryName)}</div>` : ''}
             ${gitBranch ? `<div class="session-branch">${gitBranch}</div>` : ''}
@@ -1923,7 +1970,7 @@ function renderSessions() {
                 ${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>` : ''}
                 ${session.hasRunningAgents ? '<span class="agent-badge" title="Active agents">🤖</span>' : ''}
-                ${session.planSourceSessionId ? `<span class="plan-indicator" title="Implements plan — click to view plan session" onclick="event.stopPropagation(); fetchTasks('${escapeHtml(session.planSourceSessionId)}')">📋</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>' : ''}
                 ${isLive ? '<span class="pulse"></span>' : ''}
               </span>
@@ -1951,10 +1998,14 @@ function renderSessions() {
     const groupPinned = localStorage.getItem('groupPinnedSessions') !== 'false';
     const renderGroupSessions = (sessions, pinKey) => {
       if (!groupPinned || pinnedSessionIds.size === 0) return sessions.map(renderSessionCard).join('');
-      const gPinned = sessions.filter((s) => pinnedSessionIds.has(s.id));
+      const gPinned = sessions.filter((s) => pinnedSessionIds.has(s.id) && !stickySessionIds.has(s.id));
       if (gPinned.length === 0) return sessions.map(renderSessionCard).join('');
-      const gUnpinned = sessions.filter((s) => !pinnedSessionIds.has(s.id));
+      const gIdlePinned = gPinned.filter((s) => !isSessionActive(s));
+      const gUnpinned = sessions.filter(
+        (s) => !pinnedSessionIds.has(s.id) || isSessionActive(s) || stickySessionIds.has(s.id),
+      );
       const pinCollapsed = collapsedProjectGroups.has(pinKey);
+      if (gIdlePinned.length === 0 && !pinCollapsed) return gUnpinned.map(renderSessionCard).join('');
       return (
         '<div class="pinned-sub-section">' +
         '<div class="pinned-sub-header' +
@@ -1965,21 +2016,23 @@ function renderSessions() {
         '<svg class="group-chevron" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>' +
         '<span class="pinned-sub-label">Pinned</span>' +
         '<span class="group-count">' +
-        gPinned.length +
+        gIdlePinned.length +
         '</span>' +
         '<span class="pinned-ungroup-btn" title="Ungroup pinned sessions">&times;</span>' +
         '</div>' +
         '<div class="pinned-sub-items' +
         (pinCollapsed ? ' collapsed' : '') +
         '">' +
-        gPinned.map(renderSessionCard).join('') +
+        gIdlePinned.map(renderSessionCard).join('') +
         '</div>' +
         '</div>' +
         gUnpinned.map(renderSessionCard).join('')
       );
     };
-    if (!groupPinned && pinnedSessionIds.size > 0) {
-      const pinSort = (a, b) => (pinnedSessionIds.has(b.id) ? 1 : 0) - (pinnedSessionIds.has(a.id) ? 1 : 0);
+    if (!groupPinned && (pinnedSessionIds.size > 0 || stickySessionIds.size > 0)) {
+      const pinWeight = (s) =>
+        stickySessionIds.has(s.id) ? 2 : pinnedSessionIds.has(s.id) && !isSessionActive(s) ? 1 : 0;
+      const pinSort = (a, b) => pinWeight(b) - pinWeight(a);
       for (const [, arr] of groups) arr.sort(pinSort);
       ungrouped.sort(pinSort);
     }
@@ -2054,19 +2107,28 @@ function renderSessions() {
 
     sessionsList.innerHTML = html;
   } else {
-    const pinned = filteredSessions.filter((s) => pinnedSessionIds.has(s.id));
-    const rest = filteredSessions.filter((s) => !pinnedSessionIds.has(s.id));
+    const sticky = filteredSessions.filter((s) => stickySessionIds.has(s.id));
+    const idlePinned = filteredSessions.filter((s) => pinnedSessionIds.has(s.id) && !isSessionActive(s));
+    const rest = filteredSessions.filter(
+      (s) =>
+        (!pinnedSessionIds.has(s.id) && !stickySessionIds.has(s.id)) ||
+        (pinnedSessionIds.has(s.id) && isSessionActive(s)),
+    );
     let html = '';
-    if (pinned.length > 0) {
-      const isCollapsed = collapsedProjectGroups.has('__pinned__');
+    if (sticky.length > 0) {
+      html += sticky.map(renderSessionCard).join('');
+    }
+    const isCollapsed = collapsedProjectGroups.has('__pinned__');
+    const hasPinned = pinnedSessionIds.size > 0 && filteredSessions.some((s) => pinnedSessionIds.has(s.id));
+    if (idlePinned.length > 0 || (hasPinned && isCollapsed)) {
       html += `
             <div class="project-group-header${isCollapsed ? ' collapsed' : ''}" data-group-path="__pinned__">
               <svg class="group-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
               <span class="group-name">Pinned</span>
-              <span class="group-count">${pinned.length}</span>
+              <span class="group-count">${idlePinned.length}</span>
             </div>
             <div class="project-group-sessions${isCollapsed ? ' collapsed' : ''}">
-              ${pinned.map(renderSessionCard).join('')}
+              ${idlePinned.map(renderSessionCard).join('')}
             </div>
           `;
     }
@@ -3031,7 +3093,10 @@ const _scratchpadModal = document.getElementById('scratchpad-modal');
 const _scratchpadTextarea = document.getElementById('scratchpad-textarea');
 const _scratchpadCharcount = document.getElementById('scratchpad-charcount');
 
+let _scratchpadKeyOverride = null;
+
 function _scratchpadKey() {
+  if (_scratchpadKeyOverride) return _scratchpadKeyOverride;
   if (currentSessionId) return `scratchpad-${currentSessionId}`;
   if (currentProjectPath) return `scratchpad-project:${currentProjectPath}`;
   return null;
@@ -3045,7 +3110,8 @@ function toggleScratchpad() {
   }
 }
 
-function showScratchpad() {
+function showScratchpad(keyOverride) {
+  _scratchpadKeyOverride = keyOverride || null;
   const key = _scratchpadKey();
   if (!key) return;
   _scratchpadTextarea.value = localStorage.getItem(key) || '';
@@ -3060,13 +3126,19 @@ function closeScratchpad() {
     _scratchpadSaveTimer = null;
   }
   saveScratchpad();
+  _scratchpadKeyOverride = null;
   _scratchpadModal.classList.remove('visible');
 }
 
 function saveScratchpad() {
   const key = _scratchpadKey();
   if (!key) return;
-  localStorage.setItem(key, _scratchpadTextarea.value);
+  const val = _scratchpadTextarea.value;
+  if (val.trim()) {
+    localStorage.setItem(key, val);
+  } else {
+    localStorage.removeItem(key);
+  }
 }
 
 _scratchpadTextarea.addEventListener('input', () => {
@@ -3080,6 +3152,367 @@ _scratchpadTextarea.addEventListener('input', () => {
 
 //#endregion
 
+//#region STORAGE_MANAGER
+
+function _getStorageTotalSize() {
+  let bytes = 0;
+  for (let i = 0; i < localStorage.length; i++) {
+    const k = localStorage.key(i);
+    bytes += k.length + localStorage.getItem(k).length;
+  }
+  return bytes * 2; // UTF-16
+}
+
+function _updateStorageTotal() {
+  const el = document.getElementById('storage-total');
+  if (el) el.textContent = `${(_getStorageTotalSize() / 1024).toFixed(1)} KB`;
+}
+
+function _getKnownSessionIds() {
+  return new Set(sessions.map((s) => s.id));
+}
+
+function _sessionLabel(session, id) {
+  return session ? escapeHtml(session.name || session.slug || id.slice(0, 12)) : escapeHtml(id.slice(0, 12));
+}
+
+function _groupByProject(sessionIds) {
+  const sessionMap = new Map(sessions.map((s) => [s.id, s]));
+  const groups = new Map();
+  const orphans = [];
+  for (const id of sessionIds) {
+    const session = sessionMap.get(id);
+    if (!session) {
+      orphans.push({ id, session: null });
+      continue;
+    }
+    const project = session.project || '(no project)';
+    if (!groups.has(project)) groups.set(project, []);
+    groups.get(project).push({ id, session });
+  }
+  return { groups, orphans };
+}
+
+function _projectLabel(project) {
+  if (project === '(no project)') return '(no project)';
+  return project.split(/[/\\]/).pop() || project;
+}
+
+function _escapeForJsAttr(str) {
+  const jsEscaped = str.replace(/\\/g, '\\\\').replace(/'/g, "\\'").replace(/\n/g, '\\n').replace(/\r/g, '\\r');
+  return escapeHtml(jsEscaped);
+}
+
+function _renderProjectGroup(label, meta, innerHtml) {
+  return `<div class="storage-project-group">
+    <div class="storage-project-header">
+      <span>${label}</span>
+      <span class="storage-item-meta">${meta}</span>
+    </div>
+    <div class="storage-session-group">${innerHtml}</div>
+  </div>`;
+}
+
+function _renderOrphanGroup(count, innerHtml) {
+  return _renderProjectGroup('Orphaned', `<span class="storage-item-badge orphan">${count}</span>`, innerHtml);
+}
+
+function showStorageManager() {
+  _updateStorageTotal();
+  _updateOrphanedCount();
+  document.querySelectorAll('.storage-tab').forEach((t) => {
+    t.classList.toggle('active', t.dataset.tab === 'sessions');
+  });
+  _renderStorageTab();
+  document.getElementById('storage-modal').classList.add('visible');
+}
+
+function closeStorageManager() {
+  document.getElementById('storage-modal').classList.remove('visible');
+}
+
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML
+function switchStorageTab(tab) {
+  document.querySelectorAll('.storage-tab').forEach((t) => {
+    t.classList.toggle('active', t.dataset.tab === tab);
+  });
+  _renderStorageTab();
+}
+
+function _renderStorageTab() {
+  const body = document.getElementById('storage-modal-body');
+  const tab = document.querySelector('.storage-tab.active')?.dataset.tab || 'sessions';
+  if (tab === 'sessions') body.innerHTML = _renderStorageSessions();
+  else if (tab === 'scratchpads') body.innerHTML = _renderStorageScratchpads();
+}
+
+function _renderStorageSessions() {
+  const pinnedIds = [...new Set([...pinnedSessionIds, ...stickySessionIds])];
+
+  const msgMap = new Map();
+  for (let i = 0; i < localStorage.length; i++) {
+    const key = localStorage.key(i);
+    if (!key.startsWith('pinned-messages-')) continue;
+    const sid = key.slice('pinned-messages-'.length);
+    try {
+      const pins = JSON.parse(localStorage.getItem(key)) || [];
+      if (pins.length) msgMap.set(sid, { pins, key });
+    } catch {}
+  }
+
+  const allIds = [...new Set([...pinnedIds, ...msgMap.keys()])];
+  if (!allIds.length) return '<div class="storage-empty">No pinned sessions or messages</div>';
+  const { groups, orphans } = _groupByProject(allIds);
+
+  function renderMessageItems(id) {
+    const g = msgMap.get(id);
+    if (!g) return '';
+    const eid = escapeHtml(id);
+    const header = `<div class="storage-group-header" style="padding-left:12px;">
+      <span>${g.pins.length} pinned message${g.pins.length > 1 ? 's' : ''}</span>
+      <div class="storage-item-actions">
+        <button class="danger" onclick="_storageClearSessionPins('${eid}')">Clear All</button>
+      </div>
+    </div>`;
+    const items = g.pins
+      .map((p) => {
+        const type = escapeHtml(p.type || '?');
+        const text = escapeHtml((p.text || p.tool || p.agentType || '').slice(0, 60));
+        const pinId = _escapeForJsAttr(p.id || '');
+        const sid = _escapeForJsAttr(id);
+        return `<div class="storage-item storage-item-clickable" style="padding-left:24px;" onclick="_storagePreviewPin('${sid}','${pinId}')">
+        <span class="storage-item-badge">${type}</span>
+        <span class="storage-item-id">${text}</span>
+        <span class="storage-item-meta">${formatDate(p.timestamp)}</span>
+        <div class="storage-item-actions">
+          <button onclick="event.stopPropagation();_storagePreviewPin('${sid}','${pinId}')">View</button>
+          <button class="danger" onclick="event.stopPropagation();_storageUnpinMessage('${sid}','${pinId}')">Unpin</button>
+        </div>
+      </div>`;
+      })
+      .join('');
+    return header + items;
+  }
+
+  function renderSessionItem({ id, session }) {
+    const isPinned = isAnyPinned(id);
+    const eid = escapeHtml(id);
+    const actions = isPinned
+      ? `<button onclick="_storageViewSession('${eid}')">View</button>
+         <button class="danger" onclick="_storageUnpinSession('${eid}')">Unpin</button>`
+      : `<button onclick="_storageViewSession('${eid}')">View</button>`;
+    return `<div class="storage-group-header">
+      <span>${_sessionLabel(session, id)}</span>
+      <div class="storage-item-actions">${actions}</div>
+    </div>${renderMessageItems(id)}`;
+  }
+
+  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 _storageViewSession(id) {
+  closeStorageManager();
+  fetchTasks(id);
+}
+
+function _storageUnpinSession(id) {
+  pinnedSessionIds.delete(id);
+  stickySessionIds.delete(id);
+  savePinnedSessions();
+  renderSessions();
+  _renderStorageTab();
+  _updateStorageTotal();
+}
+
+function _storageClearSessionPins(sessionId) {
+  localStorage.removeItem(`pinned-messages-${sessionId}`);
+  if (currentSessionId === sessionId) {
+    currentPins = [];
+    const el = document.getElementById('message-panel-pinned');
+    if (el) el.innerHTML = '';
+  }
+  _renderStorageTab();
+  _updateStorageTotal();
+}
+
+function _storageUnpinMessage(sessionId, pinId) {
+  const key = `pinned-messages-${sessionId}`;
+  try {
+    const pins = JSON.parse(localStorage.getItem(key)) || [];
+    const idx = pins.findIndex((p) => p.id === pinId);
+    if (idx < 0) return;
+    pins.splice(idx, 1);
+    if (pins.length) localStorage.setItem(key, JSON.stringify(pins));
+    else localStorage.removeItem(key);
+    if (currentSessionId === sessionId) {
+      currentPins = pins;
+      const el = document.getElementById('message-panel-pinned');
+      if (el) el.innerHTML = renderPinnedSection();
+    }
+  } catch {}
+  _renderStorageTab();
+  _updateStorageTotal();
+}
+
+function _renderStorageScratchpads() {
+  const allItems = [];
+  for (let i = 0; i < localStorage.length; i++) {
+    const key = localStorage.key(i);
+    if (!key.startsWith('scratchpad-')) continue;
+    const val = localStorage.getItem(key) || '';
+    const isProject = key.startsWith('scratchpad-project:');
+    const id = isProject ? key.slice('scratchpad-project:'.length) : key.slice('scratchpad-'.length);
+    allItems.push({ key, id, isProject, chars: val.length });
+  }
+  if (!allItems.length) return '<div class="storage-empty">No scratchpads</div>';
+
+  const projectItems = allItems.filter((i) => i.isProject);
+  const sessionItems = allItems.filter((i) => !i.isProject);
+  const sessionIds = sessionItems.map((i) => i.id);
+  const { groups: projectGroups, orphans } = _groupByProject(sessionIds);
+  const scratchBySession = new Map(sessionItems.map((i) => [i.id, i]));
+
+  function renderScratchItem(item) {
+    const session = !item.isProject ? sessions.find((s) => s.id === item.id) : null;
+    const typeBadge = item.isProject
+      ? '<span class="storage-item-badge">project</span>'
+      : '<span class="storage-item-badge">session</span>';
+    const jsKey = _escapeForJsAttr(item.key);
+    const label = item.isProject ? escapeHtml(_projectLabel(item.id)) : _sessionLabel(session, item.id);
+    return `<div class="storage-item">
+      <span class="storage-item-id" title="${escapeHtml(item.id)}">${label}</span>
+      ${typeBadge}
+      <span class="storage-item-meta">${item.chars} chars</span>
+      <div class="storage-item-actions">
+        <button onclick="_storagePreviewScratchpad('${jsKey}')">View</button>
+        <button class="danger" onclick="_storageDeleteScratchpad('${jsKey}')">Delete</button>
+      </div>
+    </div>`;
+  }
+
+  let html = '';
+
+  if (projectItems.length) {
+    html += _renderProjectGroup(
+      'Project Scratchpads',
+      `${projectItems.length}`,
+      projectItems.map(renderScratchItem).join(''),
+    );
+  }
+
+  for (const [project, items] of projectGroups) {
+    const matching = items.map((i) => scratchBySession.get(i.id)).filter(Boolean);
+    if (!matching.length) continue;
+    html += _renderProjectGroup(
+      escapeHtml(_projectLabel(project)),
+      `${matching.length} scratchpad${matching.length > 1 ? 's' : ''}`,
+      matching.map(renderScratchItem).join(''),
+    );
+  }
+
+  if (orphans.length) {
+    const orphanItems = orphans.map((i) => scratchBySession.get(i.id)).filter(Boolean);
+    if (orphanItems.length) {
+      html += _renderOrphanGroup(orphanItems.length, orphanItems.map(renderScratchItem).join(''));
+    }
+  }
+  return html;
+}
+
+function _storagePreviewScratchpad(key) {
+  closeStorageManager();
+  showScratchpad(key);
+}
+
+function _storagePreviewPin(sessionId, pinId) {
+  closeStorageManager();
+  const key = `pinned-messages-${sessionId}`;
+  try {
+    const pins = JSON.parse(localStorage.getItem(key)) || [];
+    const pin = pins.find((p) => p.id === pinId);
+    if (!pin) return;
+    document.getElementById('msg-detail-pin-btn').style.display = 'none';
+    currentMsgDetailIdx = null;
+    currentPinDetailId = null;
+    _renderPinToDetail(pin);
+    document.getElementById('msg-detail-modal').classList.add('visible');
+  } catch (e) {
+    console.error('_storagePreviewPin error:', e);
+  }
+}
+
+function _storageDeleteScratchpad(key) {
+  localStorage.removeItem(key);
+  _renderStorageTab();
+  _updateStorageTotal();
+}
+
+function _findOrphanedKeys() {
+  const known = _getKnownSessionIds();
+  if (!known.size) return [];
+  const orphaned = [];
+  for (const id of pinnedSessionIds) if (!known.has(id)) orphaned.push(`__pinned__${id}`);
+  for (const id of stickySessionIds) if (!known.has(id)) orphaned.push(`__sticky__${id}`);
+  for (let i = 0; i < localStorage.length; i++) {
+    const key = localStorage.key(i);
+    if (key.startsWith('pinned-messages-')) {
+      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);
+    }
+  }
+  return orphaned;
+}
+
+function _updateOrphanedCount() {
+  const btn = document.getElementById('storage-cleanup-btn');
+  if (!btn) return;
+  const count = _findOrphanedKeys().length;
+  btn.textContent = count ? `Clean Orphaned (${count})` : 'Clean Orphaned';
+}
+
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML onclick
+function cleanupOrphanedStorage() {
+  if (!sessions.length) {
+    showToast('Sessions not loaded yet — try again after they appear');
+    return;
+  }
+  const orphaned = _findOrphanedKeys();
+  let pinsChanged = false;
+  for (const key of orphaned) {
+    if (key.startsWith('__pinned__')) {
+      pinnedSessionIds.delete(key.slice('__pinned__'.length));
+      pinsChanged = true;
+    } else if (key.startsWith('__sticky__')) {
+      stickySessionIds.delete(key.slice('__sticky__'.length));
+      pinsChanged = true;
+    } else {
+      localStorage.removeItem(key);
+    }
+  }
+  if (pinsChanged) savePinnedSessions();
+  const removed = orphaned.length;
+
+  showToast(removed ? `Cleaned ${removed} orphaned item${removed > 1 ? 's' : ''}` : 'No orphaned items found');
+  renderSessions();
+  _renderStorageTab();
+  _updateStorageTotal();
+  _updateOrphanedCount();
+}
+//#endregion
+
 //#region KEYBOARD_SHORTCUTS
 function matchKey(e, ...keys) {
   if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return false;
@@ -3151,6 +3584,11 @@ document.addEventListener('keydown', (e) => {
     }
     return;
   }
+  if (e.code === 'KeyS' && e.shiftKey) {
+    e.preventDefault();
+    showStorageManager();
+    return;
+  }
 
   // Tab toggles focus zone
   if (e.key === 'Tab') {
@@ -4098,7 +4536,7 @@ function showInfoModal(session, teamConfig, tasks, planContent) {
     } else {
       html += `<span style="${plainStyle}" title="${copyVal}">${escapeHtml(value)}</span>`;
     }
-    const jsCopyVal = copyVal.replace(/\\/g, '\\\\').replace(/'/g, "\\'");
+    const jsCopyVal = _escapeForJsAttr(copyVal);
     html += `<button onclick="navigator.clipboard.writeText('${jsCopyVal}'); this.textContent='✓'; setTimeout(() => this.textContent='Copy', 1000)" style="padding: 2px 8px; font-size: 11px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 4px; color: var(--text-secondary); cursor: pointer; white-space: nowrap;">Copy</button>`;
   });
   html += `</div>`;
@@ -4376,6 +4814,7 @@ searchQuery = urlState.search || '';
 
 loadPreferences();
 pinnedSessionIds = loadPinnedSessions();
+stickySessionIds = loadStickySessions();
 setupEventSource();
 
 if (urlState.search) {

package/public/index.html

@@ -161,6 +161,11 @@
                 <path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
               </svg>
             </button>
+            <button class="icon-btn" onclick="showStorageManager()" title="Storage manager (Shift+S)" aria-label="Storage manager">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <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>
+            </button>
             <button id="theme-toggle" class="icon-btn" onclick="toggleTheme()" title="Toggle theme" aria-label="Toggle theme">
               <svg id="theme-icon-dark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <path d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
@@ -390,6 +395,10 @@
                 <td style="padding: 4px 0; color: var(--text-secondary);"><kbd style="background: var(--bg-hover); padding: 2px 6px; border-radius: 4px; font-family: monospace;">N</kbd></td>
                 <td style="padding: 4px 0; color: var(--text-primary);">Toggle scratchpad</td>
               </tr>
+              <tr>
+                <td style="padding: 4px 0; color: var(--text-secondary);"><kbd style="background: var(--bg-hover); padding: 2px 6px; border-radius: 4px; font-family: monospace;">Shift+S</kbd></td>
+                <td style="padding: 4px 0; color: var(--text-primary);">Storage manager</td>
+              </tr>
               <tr>
                 <td style="padding: 4px 0; color: var(--text-secondary);"><kbd style="background: var(--bg-hover); padding: 2px 6px; border-radius: 4px; font-family: monospace;">J/K</kbd></td>
                 <td style="padding: 4px 0; color: var(--text-primary);">Navigate messages in detail modal</td>
@@ -406,7 +415,7 @@
 
   <!-- Delete Confirmation Modal -->
   <div id="delete-confirm-modal" class="modal-overlay" onclick="closeDeleteConfirmModal()">
-    <div class="modal" onclick="event.stopPropagation()" style="max-width: 400px;">
+    <div class="modal modal-sm" onclick="event.stopPropagation()">
       <div class="modal-header">
         <h3 class="modal-title">Delete Task</h3>
         <button class="modal-close" aria-label="Close dialog" onclick="closeDeleteConfirmModal()">
@@ -427,7 +436,7 @@
 
   <!-- Delete All Session Tasks Confirmation Modal -->
   <div id="delete-session-tasks-modal" class="modal-overlay" onclick="closeDeleteSessionTasksModal()">
-    <div class="modal" onclick="event.stopPropagation()" style="max-width: 500px;">
+    <div class="modal" onclick="event.stopPropagation()">
       <div class="modal-header">
         <h3 class="modal-title">Delete All Tasks</h3>
         <button class="modal-close" aria-label="Close dialog" onclick="closeDeleteSessionTasksModal()">
@@ -449,7 +458,7 @@
 
   <!-- Delete Result Modal -->
   <div id="delete-result-modal" class="modal-overlay" onclick="closeDeleteResultModal()">
-    <div class="modal" onclick="event.stopPropagation()" style="max-width: 500px;">
+    <div class="modal" onclick="event.stopPropagation()">
       <div class="modal-header">
         <h3 class="modal-title">Deletion Result</h3>
         <button class="modal-close" aria-label="Close dialog" onclick="closeDeleteResultModal()">
@@ -517,7 +526,7 @@
 
   <!-- Blocked Task Warning Modal -->
   <div id="blocked-task-modal" class="modal-overlay" onclick="closeBlockedTaskModal()">
-    <div class="modal" onclick="event.stopPropagation()" style="max-width: 450px;">
+    <div class="modal modal-sm" onclick="event.stopPropagation()">
       <div class="modal-header">
         <h3 class="modal-title" style="display: flex; align-items: center; gap: 8px;">
           <svg viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2" style="width: 20px; height: 20px;">
@@ -593,6 +602,29 @@
     </div>
   </div>
 
+  <div id="storage-modal" class="modal-overlay" onclick="closeStorageManager()">
+    <div class="modal storage-modal" onclick="event.stopPropagation()">
+      <div class="modal-header">
+        <h3 class="modal-title">Storage Manager</h3>
+        <div style="display:flex;align-items:center;gap:8px;">
+          <span id="storage-total" class="storage-total"></span>
+          <button class="modal-close" aria-label="Close dialog" onclick="closeStorageManager()">
+            <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="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>
+      </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">
+        <button id="storage-cleanup-btn" class="btn btn-secondary" onclick="cleanupOrphanedStorage()">Clean Orphaned</button>
+        <button class="btn btn-primary" onclick="closeStorageManager()">Close</button>
+      </div>
+    </div>
+  </div>
+
   <div id="toast" class="toast"></div>
 </body>
 </html>

package/public/style.css

@@ -568,6 +568,11 @@ body::before {
   text-overflow: ellipsis;
 }
 
+.session-item.plan-reveal {
+  outline: 1.5px solid var(--plan);
+  background: var(--plan-dim);
+}
+
 .session-progress {
   display: flex;
   align-items: center;
@@ -1962,6 +1967,14 @@ body::before {
   fill: var(--accent);
   stroke: var(--accent);
 }
+.session-pin-btn.sticky {
+  opacity: 1;
+  color: var(--warning);
+}
+.session-pin-btn.sticky svg {
+  fill: var(--warning);
+  stroke: var(--warning);
+}
 .pinned-sessions-divider {
   height: 1px;
   margin: 4px 8px;
@@ -2570,10 +2583,10 @@ body.light .msg-assistant .msg-text {
 }
 
 .modal.fullscreen {
-  width: 76vw;
-  max-width: 76vw;
-  height: 85vh;
-  max-height: 85vh;
+  width: 90vw;
+  max-width: 90vw;
+  height: 92vh;
+  max-height: 92vh;
 }
 
 .modal.plan-modal {
@@ -2584,6 +2597,17 @@ body.light .msg-assistant .msg-text {
   flex-direction: column;
 }
 
+.modal.plan-modal.fullscreen {
+  width: 90vw;
+  max-width: 90vw;
+  height: 92vh;
+  max-height: 92vh;
+}
+
+.modal-sm {
+  max-width: 440px;
+}
+
 @keyframes live-border-pulse {
   0%,
   100% {
@@ -2822,6 +2846,196 @@ select.form-input option:checked {
 }
 /* #endregion */
 
+/* #region STORAGE_MANAGER */
+.storage-modal {
+  width: 90%;
+  max-width: 860px;
+  max-height: 85vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.storage-project-group {
+  margin-bottom: 12px;
+}
+
+.storage-project-header {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  padding: 8px 10px;
+  background: var(--bg-elevated);
+  border-radius: 6px;
+  margin-bottom: 4px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.storage-project-header .storage-item-meta {
+  font-weight: 400;
+}
+
+.storage-session-group {
+  padding-left: 12px;
+  border-left: 2px solid color-mix(in srgb, var(--border) 60%, transparent);
+  margin-left: 8px;
+  margin-bottom: 8px;
+}
+
+.storage-total {
+  font-size: 11px;
+  color: var(--text-muted);
+  font-family: var(--mono);
+}
+
+.storage-tabs {
+  display: flex;
+  gap: 0;
+  border-bottom: 1px solid var(--border);
+  margin: -4px -24px 0;
+  padding: 0 24px;
+  flex-shrink: 0;
+}
+
+.storage-tab {
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  padding: 8px 16px;
+  font-size: 13px;
+  font-family: var(--mono);
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  transition:
+    color 0.15s,
+    border-color 0.15s;
+}
+
+.storage-tab:hover {
+  color: var(--text-primary);
+}
+
+.storage-tab.active {
+  color: var(--accent);
+  border-bottom-color: var(--accent);
+}
+
+.storage-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 0;
+  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
+  gap: 8px;
+}
+
+.storage-item:last-child {
+  border-bottom: none;
+}
+
+.storage-item-clickable {
+  cursor: pointer;
+}
+
+.storage-item-clickable:hover {
+  background: var(--bg-hover);
+  border-radius: 4px;
+}
+
+.storage-item-id {
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+}
+
+.storage-item-meta {
+  font-size: 11px;
+  color: var(--text-muted);
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.storage-item-badge {
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: var(--bg-hover);
+  color: var(--text-secondary);
+  flex-shrink: 0;
+  font-family: var(--mono);
+}
+
+.storage-item-badge.orphan {
+  background: rgba(239, 68, 68, 0.15);
+  color: #ef4444;
+}
+
+.storage-item-badge.pinned {
+  background: color-mix(in srgb, var(--accent) 15%, transparent);
+  color: var(--accent);
+}
+
+.storage-item-badge.sticky {
+  background: rgba(234, 179, 8, 0.15);
+  color: #eab308;
+}
+
+.storage-item-actions {
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.storage-item-actions button {
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--text-secondary);
+  padding: 2px 8px;
+  font-size: 11px;
+  cursor: pointer;
+  font-family: var(--mono);
+  transition: all 0.15s;
+}
+
+.storage-item-actions button:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.storage-item-actions button.danger:hover {
+  background: rgba(239, 68, 68, 0.15);
+  color: #ef4444;
+}
+
+.storage-group-header {
+  font-size: 12px;
+  color: var(--text-muted);
+  padding: 12px 0 4px;
+  font-weight: 600;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.storage-group-header:first-child {
+  padding-top: 0;
+}
+
+.storage-empty {
+  text-align: center;
+  padding: 32px 0;
+  color: var(--text-muted);
+  font-size: 13px;
+}
+/* #endregion */
+
 /* #region A11Y */
 .skip-link {
   position: absolute;