claude-code-kanban 3.7.0 → 3.9.0

package/cli.js

@@ -14,13 +14,14 @@ const COMMANDS = {
     summary: 'List or open Claude Code sessions',
     verbs: {
       list: {
-        summary: 'List sessions',
-        usage: 'claude-code-kanban session list [--active] [--days <n>] [--project <name>] [--limit <n|all>] [--json]',
+        summary: 'List sessions (pinned/sticky always included)',
+        usage: 'claude-code-kanban session list [--active] [--days <n>] [--project <name>] [--limit <n|all>] [--no-pins] [--json]',
         flags: {
           '--active': 'Only sessions with recent activity (sidebar-style filter)',
           '--days <n>': 'Only sessions modified within the last N days (fractional ok, e.g. 0.5)',
           '--project <name>': 'Filter by project name (substring match)',
           '--limit <n|all>': 'Max rows to display (default: 10). Use "all" for no cap.',
+          '--no-pins': 'Disable always-include and sticky-first ordering for pinned sessions',
           '--json': 'Output JSON instead of a table',
         },
         run: runSessionListCli,
@@ -52,6 +53,15 @@ const COMMANDS = {
         },
         run: runSessionPinCli,
       },
+      pins: {
+        summary: 'List sessions pinned/stickied via the dashboard or CLI',
+        usage: 'claude-code-kanban session pins [--sticky] [--json]',
+        flags: {
+          '--sticky': 'Only sessions in sticky state',
+          '--json': 'Output JSON instead of a table',
+        },
+        run: runSessionPinsCli,
+      },
       peek: {
         summary: 'Show the last N messages from a session',
         usage: 'claude-code-kanban session peek <id> [--limit <n>] [--json]',
@@ -239,13 +249,23 @@ function parseLimit(args, { fallback, allowAll = false }) {
   return { ok: true, limit: n };
 }
 
-async function fetchSessionsList(limit) {
+async function fetchSessionsList(limit, pinnedIds = []) {
   const q = limit === null ? 'all' : String(limit);
-  const res = await cliFetch(`/api/sessions?limit=${q}`);
+  const pinnedQ = pinnedIds.length ? `&pinned=${pinnedIds.join(',')}` : '';
+  const res = await cliFetch(`/api/sessions?limit=${q}${pinnedQ}`);
   if (!res.ok) throw new Error(`Failed to fetch sessions (${res.status})`);
   return res.json();
 }
 
+async function fetchPinsMap() {
+  try {
+    const res = await cliFetch('/api/session/pins');
+    if (!res.ok) return {};
+    const { pins = {} } = await res.json();
+    return pins;
+  } catch { return {}; }
+}
+
 async function resolveSessionByIdOrPrefix(idArg) {
   let res;
   try {
@@ -273,6 +293,7 @@ async function resolveSessionByIdOrPrefix(idArg) {
 
 async function runSessionListCli(args) {
   const activeOnly = args.includes('--active');
+  const noPins = args.includes('--no-pins');
   const projectFilter = getArgValue(args, 'project');
   const daysArg = getArgValue(args, 'days');
   const days = daysArg !== null ? parseFloat(daysArg) : null;
@@ -284,27 +305,40 @@ async function runSessionListCli(args) {
   if (!parsed.ok) { console.error(parsed.error); return 1; }
   const limit = parsed.limit;
   const asJson = args.includes('--json');
+  const pinsMap = noPins ? {} : await fetchPinsMap();
+  const pinnedIds = Object.keys(pinsMap);
   const hasClientFilter = activeOnly || days !== null || projectFilter;
   let list;
   try {
-    list = await fetchSessionsList(hasClientFilter ? null : limit);
+    list = await fetchSessionsList(hasClientFilter ? null : limit, pinnedIds);
   } catch (e) {
     reportCliError(e);
     return 1;
   }
-  if (activeOnly) list = list.filter(isSessionActive);
+  const pinOf = id => pinsMap[id] || null;
+  if (activeOnly) list = list.filter(s => pinOf(s.id) || isSessionActive(s));
   if (days !== null) {
     const cutoff = Date.now() - days * 86_400_000;
-    list = list.filter(s => s.modifiedAt && new Date(s.modifiedAt).getTime() >= cutoff);
+    list = list.filter(s => pinOf(s.id) || (s.modifiedAt && new Date(s.modifiedAt).getTime() >= cutoff));
   }
   if (projectFilter) {
     const needle = projectFilter.toLowerCase();
     list = list.filter(s => (s.project || '').toLowerCase().includes(needle));
   }
-  const totalMatched = list.length;
-  if (limit !== null && list.length > limit) list = list.slice(0, limit);
+  const pinRank = id => pinOf(id) === 'sticky' ? 0 : pinOf(id) === 'pinned' ? 1 : 2;
+  list.sort((a, b) => {
+    const r = pinRank(a.id) - pinRank(b.id);
+    if (r !== 0) return r;
+    return new Date(b.modifiedAt || 0) - new Date(a.modifiedAt || 0);
+  });
+  if (limit !== null && list.length > limit) {
+    const top = list.slice(0, limit);
+    const topIds = new Set(top.map(s => s.id));
+    const extraPinned = list.filter(s => pinOf(s.id) && !topIds.has(s.id));
+    list = [...top, ...extraPinned];
+  }
   if (asJson) {
-    console.log(JSON.stringify(list, null, 2));
+    console.log(JSON.stringify(list.map(s => ({ ...s, pinState: pinOf(s.id) })), null, 2));
     return 0;
   }
   if (!list.length) {
@@ -313,6 +347,7 @@ async function runSessionListCli(args) {
   }
   const rows = list.map(s => ({
     id: s.id.slice(0, 8),
+    pin: pinOf(s.id) || '',
     status: sessionStatus(s),
     age: s.modifiedAt ? formatAge(Date.now() - new Date(s.modifiedAt).getTime()) : '-',
     tasks: `${s.completed}/${s.taskCount}`,
@@ -321,17 +356,15 @@ async function runSessionListCli(args) {
   }));
   const w = {
     id: 8,
+    pin: Math.max(3, ...rows.map(r => r.pin.length)),
     status: Math.max(6, ...rows.map(r => r.status.length)),
     age: Math.max(3, ...rows.map(r => r.age.length)),
     tasks: Math.max(5, ...rows.map(r => r.tasks.length)),
     project: Math.max(7, ...rows.map(r => r.project.length)),
   };
-  console.log(`${'ID'.padEnd(w.id)}  ${'STATUS'.padEnd(w.status)}  ${'AGE'.padEnd(w.age)}  ${'TASKS'.padEnd(w.tasks)}  ${'PROJECT'.padEnd(w.project)}  TITLE`);
+  console.log(`${'ID'.padEnd(w.id)}  ${'PIN'.padEnd(w.pin)}  ${'STATUS'.padEnd(w.status)}  ${'AGE'.padEnd(w.age)}  ${'TASKS'.padEnd(w.tasks)}  ${'PROJECT'.padEnd(w.project)}  TITLE`);
   for (const r of rows) {
-    console.log(`${r.id.padEnd(w.id)}  ${r.status.padEnd(w.status)}  ${r.age.padEnd(w.age)}  ${r.tasks.padEnd(w.tasks)}  ${r.project.padEnd(w.project)}  ${r.title}`);
-  }
-  if (limit !== null && totalMatched > limit) {
-    console.log(`\n... ${totalMatched - limit} more. Use --limit <n> or --limit all to see them.`);
+    console.log(`${r.id.padEnd(w.id)}  ${r.pin.padEnd(w.pin)}  ${r.status.padEnd(w.status)}  ${r.age.padEnd(w.age)}  ${r.tasks.padEnd(w.tasks)}  ${r.project.padEnd(w.project)}  ${r.title}`);
   }
   return 0;
 }
@@ -396,6 +429,53 @@ async function runSessionPinCli(args) {
   } catch (e) { reportCliError(e); return 1; }
 }
 
+async function runSessionPinsCli(args) {
+  const stickyOnly = args.includes('--sticky');
+  const asJson = args.includes('--json');
+  const pinsMap = await fetchPinsMap();
+  const items = Object.entries(pinsMap)
+    .filter(([, state]) => !stickyOnly || state === 'sticky')
+    .map(([id, state]) => ({ id, state }));
+  if (!items.length) {
+    if (asJson) console.log('[]'); else console.log('No pinned sessions.');
+    return 0;
+  }
+  let sessions;
+  try {
+    sessions = await fetchSessionsList(items.length, items.map(p => p.id));
+  } catch (e) { reportCliError(e); return 1; }
+  const byId = new Map(sessions.map(s => [s.id, s]));
+  let rows = items
+    .map(p => {
+      const s = byId.get(p.id) || {};
+      return {
+        id: p.id,
+        state: p.state,
+        status: s.id ? sessionStatus(s) : '-',
+        age: s.modifiedAt ? formatAge(Date.now() - new Date(s.modifiedAt).getTime()) : '-',
+        project: path.basename(s.project || ''),
+        title: s.customTitle || s.name || s.slug || '',
+      };
+    })
+    .sort((a, b) => (a.state === b.state ? 0 : a.state === 'sticky' ? -1 : 1));
+  if (asJson) {
+    console.log(JSON.stringify(rows, null, 2));
+    return 0;
+  }
+  const w = {
+    id: 8,
+    state: Math.max(5, ...rows.map(r => r.state.length)),
+    status: Math.max(6, ...rows.map(r => r.status.length)),
+    age: Math.max(3, ...rows.map(r => r.age.length)),
+    project: Math.max(7, ...rows.map(r => r.project.length)),
+  };
+  console.log(`${'ID'.padEnd(w.id)}  ${'STATE'.padEnd(w.state)}  ${'STATUS'.padEnd(w.status)}  ${'AGE'.padEnd(w.age)}  ${'PROJECT'.padEnd(w.project)}  TITLE`);
+  for (const r of rows) {
+    console.log(`${r.id.slice(0, 8).padEnd(w.id)}  ${r.state.padEnd(w.state)}  ${r.status.padEnd(w.status)}  ${r.age.padEnd(w.age)}  ${r.project.padEnd(w.project)}  ${r.title}`);
+  }
+  return 0;
+}
+
 async function runSessionViewCli(args) {
   const idArg = args.find(a => !a.startsWith('--'));
   if (!idArg) {

package/lib/parsers.js

@@ -552,14 +552,15 @@ function readRecentMessages(jsonlPath, limit = 10) {
       readSize *= 4;
     }
 
-    // Attach tool results to their corresponding tool_use messages
+    // Attach tool results to their corresponding tool_use messages.
+    // For perf, we never ship the full text in the messages payload — when
+    // truncated, the client lazy-fetches via /api/sessions/:id/tool-result/:toolUseId.
     for (const msg of messages) {
       if (msg.type === 'tool_use' && msg.toolUseId && toolResults.has(msg.toolUseId)) {
         const full = toolResults.get(msg.toolUseId);
         const truncated = full.length > TOOL_RESULT_MAX;
         msg.toolResult = truncated ? full.slice(0, TOOL_RESULT_MAX) + '\n... (truncated)' : full;
         msg.toolResultTruncated = truncated;
-        if (truncated) msg.toolResultFull = full;
       }
     }
 
@@ -578,6 +579,34 @@ function readRecentMessages(jsonlPath, limit = 10) {
   }
 }
 
+function readFullToolResult(jsonlPath, toolUseId) {
+  if (!toolUseId || !jsonlPath || !existsSync(jsonlPath)) return null;
+  try {
+    const content = readFileSync(jsonlPath, 'utf8');
+    const lines = content.split('\n');
+    for (const line of lines) {
+      if (!line || line.indexOf(toolUseId) === -1) continue;
+      try {
+        const obj = JSON.parse(line);
+        if (obj?.message?.content && Array.isArray(obj.message.content)) {
+          for (const block of obj.message.content) {
+            if (block.type === 'tool_result' && block.tool_use_id === toolUseId) {
+              if (typeof block.content === 'string') return block.content;
+              if (Array.isArray(block.content)) {
+                return block.content
+                  .filter((c) => c.type === 'text' && c.text)
+                  .map((c) => c.text)
+                  .join('\n');
+              }
+            }
+          }
+        }
+      } catch (_) {}
+    }
+  } catch (_) {}
+  return null;
+}
+
 function readMessagesPage(jsonlPath, limit = 10, beforeTimestamp = null) {
   const fetchLimit = limit + 1;
   const applyFilter = beforeTimestamp
@@ -850,6 +879,7 @@ module.exports = {
   readSessionInfoFromJsonl,
   readRecentMessages,
   readMessagesPage,
+  readFullToolResult,
   buildAgentProgressMap,
   buildSessionDigest,
   readCompactSummaries,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-kanban",
-  "version": "3.7.0",
+  "version": "3.9.0",
   "description": "A web-based Kanban board for viewing Claude Code tasks with agent teams support",
   "main": "server.js",
   "bin": {

package/plugin/plugins/claude-code-kanban/.claude-plugin/plugin.json

@@ -1,5 +1,5 @@
 {
   "name": "claude-code-kanban",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "Agent activity tracking for claude-code-kanban dashboard"
 }

package/plugin/plugins/claude-code-kanban/skills/kanban/SKILL.md

@@ -32,10 +32,18 @@ claude-code-kanban session pin ${CLAUDE_SESSION_ID} --sticky   # sticky at top
 claude-code-kanban session pin ${CLAUDE_SESSION_ID} --unpin    # clear
 ```
 
-State applies to every connected browser tab (broadcast via SSE) and persists in each tab's localStorage. With no tabs open the command is a no-op.
-
 Trigger phrases: "pin this session", "pin in kanban", "make this session sticky", "unpin session".
 
+## List pinned sessions
+
+```bash
+claude-code-kanban session pins              # all pinned/sticky sessions
+claude-code-kanban session pins --sticky     # sticky only
+claude-code-kanban session pins --json       # JSON output
+```
+
+Trigger phrases: "show pinned sessions", "what's pinned", "list pins".
+
 ## Preview a file in kanban
 
 Opens a markdown file in the preview modal:

package/public/app.js

@@ -496,6 +496,7 @@ async function fetchTasks(sessionId) {
     if (revealedStorageSessionId && sessionId !== revealedStorageSessionId) {
       revealedStorageSessionId = null;
     }
+    if (currentSessionId && currentSessionId !== sessionId) deferredPinPlacement.delete(currentSessionId);
     currentSessionId = sessionId;
     currentPins = loadPins(sessionId);
     ownerFilter = '';
@@ -1206,6 +1207,9 @@ function togglePin(msgIndex) {
       text: m.text || null,
       fullText: m.fullText || null,
       tool: m.tool || null,
+      toolUseId: m.toolUseId || null,
+      toolResult: m.toolResult || null,
+      toolResultTruncated: m.toolResultTruncated || false,
       detail: m.detail || null,
       fullDetail: m.fullDetail || null,
       description: m.description || null,
@@ -1294,6 +1298,8 @@ function togglePinnedCollapse() {
 //#region PINNING
 let pinnedSessionIds = new Set();
 let stickySessionIds = new Set();
+// Pinning the currently-selected session keeps it in place until deselected (less UI movement).
+const deferredPinPlacement = new Set();
 
 function loadPinnedSessions() {
   try {
@@ -1316,35 +1322,57 @@ function savePinnedSessions() {
   localStorage.setItem('sticky-sessions', JSON.stringify([...stickySessionIds]));
 }
 
-// biome-ignore lint/correctness/noUnusedVariables: used in HTML
+// Mirror pin state to server so it can be queried by the CLI. UI remains source of truth for itself.
+function offloadSessionPin(sessionId) {
+  const state = getSessionPinState(sessionId);
+  fetch('/api/session/pin', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ id: sessionId, state }),
+  }).catch(() => {});
+}
+
 function toggleSessionPin(sessionId) {
   if (pinnedSessionIds.has(sessionId)) {
     pinnedSessionIds.delete(sessionId);
     stickySessionIds.delete(sessionId);
+    deferredPinPlacement.delete(sessionId);
   } else {
     pinnedSessionIds.add(sessionId);
+    if (sessionId === currentSessionId) deferredPinPlacement.add(sessionId);
   }
   savePinnedSessions();
+  offloadSessionPin(sessionId);
   renderSessions();
 }
 
-// biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function toggleSessionSticky(sessionId) {
   if (stickySessionIds.has(sessionId)) {
     stickySessionIds.delete(sessionId);
     pinnedSessionIds.delete(sessionId);
+    deferredPinPlacement.delete(sessionId);
   } else {
     pinnedSessionIds.add(sessionId);
     stickySessionIds.add(sessionId);
+    if (sessionId === currentSessionId) deferredPinPlacement.add(sessionId);
   }
   savePinnedSessions();
+  offloadSessionPin(sessionId);
   renderSessions();
 }
 
+function isPlacedPinned(id) {
+  return pinnedSessionIds.has(id) && !deferredPinPlacement.has(id);
+}
+function isPlacedSticky(id) {
+  return stickySessionIds.has(id) && !deferredPinPlacement.has(id);
+}
+
 function handleSessionPinEvent({ id, state }) {
   if (!id) return;
   pinnedSessionIds.delete(id);
   stickySessionIds.delete(id);
+  deferredPinPlacement.delete(id);
   if (state === 'pinned') pinnedSessionIds.add(id);
   if (state === 'sticky') {
     pinnedSessionIds.add(id);
@@ -1372,11 +1400,16 @@ function _renderPinToDetail(pin) {
     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 pinResultHtml = renderToolResultHtml(
+      pin.toolResult,
+      pin.toolResultTruncated,
+      pin.toolResultFull,
+      pin.toolUseId,
+    );
     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>') +
+      (fullText ? `<pre class="${TINTED_PRE_CLASS}">${pinDetailRendered}</pre>` : '<em>No details</em>') +
       pinParamsHtml +
       pinResultHtml;
   } else if (pin.type === 'agent') {
@@ -1437,7 +1470,7 @@ function showMsgDetail(idx) {
     const taskResultHtml = TASK_TOOLS.has(m.tool) ? renderTaskResult(m.toolResult) : '';
     const toolResultHtml = hideResult
       ? ''
-      : renderToolResultHtml(m.toolResult, m.toolResultTruncated, m.toolResultFull);
+      : renderToolResultHtml(m.toolResult, m.toolResultTruncated, m.toolResultFull, m.toolUseId);
     const hasAgentTabs = m.tool === 'Agent' && m.agentId && (m.agentLastMessage || m.agentPrompt);
     let mainHtml;
     if (sendProto) {
@@ -1451,7 +1484,7 @@ function showMsgDetail(idx) {
     } else if (fullText) {
       const detailEscaped = escapeHtml(fullText);
       const detailRendered = m.tool === 'Bash' ? highlightBash(detailEscaped) : detailEscaped;
-      mainHtml = `${descHtml}<pre class="msg-detail-pre">${detailRendered}</pre>`;
+      mainHtml = `${descHtml}<pre class="${TINTED_PRE_CLASS}">${detailRendered}</pre>`;
     } else {
       mainHtml = TASK_TOOLS.has(m.tool) ? '' : '<em>No details</em>';
     }
@@ -1698,11 +1731,11 @@ function renderToolParamsHtml(params) {
     html += `<div style="margin-top:8px;padding-top:6px;border-top:1px solid var(--border)">`;
     if (params.old_string) {
       html += `<div style="font-size:0.75rem;color:var(--text-muted);margin-bottom:2px">old_string</div>
-            <pre class="msg-detail-pre" style="max-height:200px;overflow:auto;border-left:3px solid #e55;padding-left:8px">${escapeHtml(params.old_string)}</pre>`;
+            <pre class="${TINTED_PRE_CLASS}" style="max-height:200px;overflow:auto;border-left:3px solid #e55;padding-left:8px">${escapeHtml(params.old_string)}</pre>`;
     }
     if (params.new_string) {
       html += `<div style="font-size:0.75rem;color:var(--text-muted);margin-bottom:2px;margin-top:6px">new_string</div>
-            <pre class="msg-detail-pre" style="max-height:200px;overflow:auto;border-left:3px solid #5b5;padding-left:8px">${escapeHtml(params.new_string)}</pre>`;
+            <pre class="${TINTED_PRE_CLASS}" style="max-height:200px;overflow:auto;border-left:3px solid #5b5;padding-left:8px">${escapeHtml(params.new_string)}</pre>`;
     }
     html += `</div>`;
   }
@@ -1717,13 +1750,14 @@ function renderToolParamsHtml(params) {
       const toggle = makeExpandToggle(escapeHtml(truncContent), escapeHtml(params.content), {
         fontSize: '0.75rem',
         maxHeight: '500px',
+        tinted: true,
       });
       writeMoreBtn = ` ${toggle.btn}`;
       fullBlock = toggle.full;
     }
     html += `<div style="margin-top:8px;padding-top:6px;border-top:1px solid var(--border)">
           <div style="font-size:0.75rem;color:var(--text-muted);margin-bottom:2px">content${writeMoreBtn}</div>
-          <pre class="msg-detail-pre" style="max-height:300px;overflow:auto">${escapeHtml(truncContent)}</pre>
+          <pre class="${TINTED_PRE_CLASS}" style="max-height:300px;overflow:auto">${escapeHtml(truncContent)}</pre>
           ${fullBlock}
         </div>`;
   }
@@ -1757,26 +1791,31 @@ function highlightBash(escaped) {
     .replace(/((?:^|\s)(?:&amp;&amp;|\|\||[|;])(?:\s|$))/g, '<span style="color:#d4d4d4;font-weight:bold">$1</span>');
 }
 
+const TINTED_PRE_CLASS = 'msg-detail-pre msg-detail-pre-tinted';
 let _expandIdCounter = 0;
-function _toggleExpand(btn) {
-  const f = document.getElementById(btn.dataset.expandId);
-  const t = btn.parentElement.nextElementSibling;
-  const expand = f.style.display === 'none';
-  f.style.display = expand ? 'block' : 'none';
-  t.style.display = expand ? 'none' : 'block';
+function _applyExpandToggle(btn, fullEl) {
+  const truncEl = btn.parentElement.nextElementSibling;
+  const expand = fullEl.style.display === 'none';
+  fullEl.style.display = expand ? 'block' : 'none';
+  if (truncEl) truncEl.style.display = expand ? 'none' : 'block';
   btn.textContent = expand ? 'Show less' : 'Show more';
   const panel = btn.closest('.message-panel');
   if (panel) panel.classList.toggle('msg-expanded-wide', expand);
   const modal = btn.closest('.modal');
   if (modal) _setModalWidth(modal, 'Expand', expand, '60vw', '60vw');
 }
+function _toggleExpand(btn) {
+  const f = document.getElementById(btn.dataset.expandId);
+  if (f) _applyExpandToggle(btn, f);
+}
 function makeExpandToggle(_truncatedHtml, fullHtml, opts = {}) {
   const id = `expand-${++_expandIdCounter}`;
   const fontSize = opts.fontSize || '0.8rem';
   const maxHeight = opts.maxHeight || '';
-  const btn = `<button data-expand-id="${id}" onclick="_toggleExpand(this)" style="background:none;border:none;color:var(--accent);cursor:pointer;font-size:${fontSize};text-decoration:underline;margin-left:6px">Show more</button>`;
+  const cls = opts.tinted ? TINTED_PRE_CLASS : 'msg-detail-pre';
+  const btn = `<button data-expand-id="${id}" onclick="_toggleExpand(this)" class="expand-toggle-btn" style="font-size:${fontSize}">Show more</button>`;
   const mhStyle = maxHeight ? `max-height:${maxHeight};` : '';
-  const full = `<pre id="${id}" class="msg-detail-pre" style="${mhStyle}overflow:auto;display:none">${fullHtml}</pre>`;
+  const full = `<pre id="${id}" class="${cls}" style="${mhStyle}overflow:auto;display:none">${fullHtml}</pre>`;
   return { btn, full };
 }
 
@@ -1796,7 +1835,7 @@ function autoSizeModal(modal, body) {
   if (desired > current) modal.style.maxWidth = `${desired}px`;
 }
 
-function renderToolResultHtml(toolResult, isTruncated, fullResult) {
+function renderToolResultHtml(toolResult, isTruncated, fullResult, toolUseId) {
   if (!toolResult) return '';
   const stripped = stripLineNumbers(toolResult);
   const escaped = escapeHtml(stripped);
@@ -1806,6 +1845,10 @@ function renderToolResultHtml(toolResult, isTruncated, fullResult) {
     const toggle = makeExpandToggle(escaped, escapeHtml(stripLineNumbers(fullResult)));
     truncLabel = toggle.btn;
     fullBlock = toggle.full;
+  } else if (isTruncated && toolUseId) {
+    const id = `expand-${++_expandIdCounter}`;
+    truncLabel = `<button data-expand-id="${id}" data-tool-use-id="${escapeHtml(toolUseId)}" onclick="_toggleToolResultExpand(this)" class="expand-toggle-btn" style="font-size:0.8rem">Show more</button>`;
+    fullBlock = `<pre id="${id}" class="msg-detail-pre" style="overflow:auto;display:none"></pre>`;
   } else if (isTruncated) {
     truncLabel = '<span style="color:var(--text-muted);font-size:0.8rem;margin-left:6px">(truncated)</span>';
   }
@@ -1816,12 +1859,42 @@ function renderToolResultHtml(toolResult, isTruncated, fullResult) {
       </div>`;
 }
 
+async function _toggleToolResultExpand(btn) {
+  const f = document.getElementById(btn.dataset.expandId);
+  if (!f) return;
+  if (!btn.dataset.loaded) {
+    if (!currentSessionId || !btn.dataset.toolUseId) return;
+    btn.disabled = true;
+    btn.textContent = 'Loading…';
+    try {
+      const r = await fetch(
+        `/api/sessions/${encodeURIComponent(currentSessionId)}/tool-result/${encodeURIComponent(btn.dataset.toolUseId)}`,
+      );
+      if (!r.ok) throw new Error(`HTTP ${r.status}`);
+      const { content } = await r.json();
+      f.textContent = stripLineNumbers(content);
+      btn.dataset.loaded = '1';
+    } catch (_e) {
+      btn.textContent = 'Show more';
+      btn.disabled = false;
+      showToast('Failed to load full output');
+      return;
+    }
+    btn.disabled = false;
+  }
+  _applyExpandToggle(btn, f);
+}
+
 function buildToolContent(m) {
   let content = m.fullDetail || m.detail || '';
   if (m.toolResult) content += `\n\n--- Output ---\n\n${m.toolResultFull || m.toolResult}`;
   return content;
 }
 
+function getMessageDisplayContent(m) {
+  return m.type === 'tool_use' ? buildToolContent(m) : m.compactSummary || stripAnsi(m.fullText || m.text);
+}
+
 function getDetailMsg() {
   if (currentMsgDetailIdx != null) return currentMessages[currentMsgDetailIdx];
   if (currentPinDetailId) return currentPins.find((p) => p.id === currentPinDetailId);
@@ -1832,8 +1905,7 @@ function getDetailMsg() {
 async function copyMsgToClipboard(btn) {
   const m = getDetailMsg();
   if (!m) return;
-  const content = m.type === 'tool_use' ? buildToolContent(m) : stripAnsi(m.fullText || m.text);
-  copyWithFeedback(content, btn);
+  copyWithFeedback(getMessageDisplayContent(m), btn);
 }
 
 async function postAndToast(url, body, label) {
@@ -1853,9 +1925,8 @@ async function postAndToast(url, body, label) {
 async function openMsgInEditor() {
   const m = getDetailMsg();
   if (!m) return;
-  const content = m.type === 'tool_use' ? buildToolContent(m) : stripAnsi(m.fullText || m.text);
-  const title = m.type === 'tool_use' ? m.tool : m.type;
-  postAndToast('/api/open-in-editor', { content, title }, 'in editor');
+  const title = m.type === 'tool_use' ? m.tool : m.compactSummary ? 'compact-summary' : m.type;
+  postAndToast('/api/open-in-editor', { content: getMessageDisplayContent(m), title }, 'in editor');
 }
 
 function formatDuration(ms) {
@@ -2332,7 +2403,8 @@ function renderSessions() {
 
     const pinState = getSessionPinState(session.id);
     const pinClass = pinState === 'sticky' ? ' sticky' : pinState === 'pinned' ? ' pinned' : '';
-    const pinTitle = pinState === 'pinned' || pinState === 'sticky' ? 'Unpin' : 'Pin';
+    const pinTitle =
+      pinState === 'pinned' || pinState === 'sticky' ? 'Unpin session (.)' : 'Pin session (. · > sticky)';
     const showCtx = !!session.contextStatus;
     const linkedDocsCount = getSessionPreviewPaths(session.id).length;
     const bookmarksCount = loadPins(session.id).length;
@@ -2383,12 +2455,10 @@ 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) && !stickySessionIds.has(s.id));
+      const gPinned = sessions.filter((s) => isPlacedPinned(s.id) && !isPlacedSticky(s.id));
       if (gPinned.length === 0) return sessions.map(renderSessionCard).join('');
       const gIdlePinned = gPinned.filter((s) => !isSessionActive(s));
-      const gUnpinned = sessions.filter(
-        (s) => !pinnedSessionIds.has(s.id) || isSessionActive(s) || stickySessionIds.has(s.id),
-      );
+      const gUnpinned = sessions.filter((s) => !isPlacedPinned(s.id) || isSessionActive(s) || isPlacedSticky(s.id));
       const pinCollapsed = collapsedProjectGroups.has(pinKey);
       if (gIdlePinned.length === 0 && !pinCollapsed) return gUnpinned.map(renderSessionCard).join('');
       return (
@@ -2415,8 +2485,7 @@ function renderSessions() {
       );
     };
     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 pinWeight = (s) => (isPlacedSticky(s.id) ? 2 : isPlacedPinned(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);
@@ -2492,12 +2561,10 @@ function renderSessions() {
 
     sessionsList.innerHTML = html;
   } else {
-    const sticky = filteredSessions.filter((s) => stickySessionIds.has(s.id));
-    const idlePinned = filteredSessions.filter((s) => pinnedSessionIds.has(s.id) && !isSessionActive(s));
+    const sticky = filteredSessions.filter((s) => isPlacedSticky(s.id));
+    const idlePinned = filteredSessions.filter((s) => isPlacedPinned(s.id) && !isSessionActive(s));
     const rest = filteredSessions.filter(
-      (s) =>
-        (!pinnedSessionIds.has(s.id) && !stickySessionIds.has(s.id)) ||
-        (pinnedSessionIds.has(s.id) && isSessionActive(s)),
+      (s) => (!isPlacedPinned(s.id) && !isPlacedSticky(s.id)) || (isPlacedPinned(s.id) && isSessionActive(s)),
     );
     let html = '';
     if (sticky.length > 0) {
@@ -2860,17 +2927,26 @@ function getGroupSessionsContainer(header) {
 
 function getNavigableItems() {
   const items = [];
+  const walkGroupContainer = (container) => {
+    if (!container) return;
+    for (const child of container.children) {
+      if (child.classList.contains('pinned-sub-section')) {
+        const subHeader = child.querySelector('.pinned-sub-header');
+        if (subHeader) items.push(subHeader);
+        const subItems = child.querySelector('.pinned-sub-items');
+        if (subItems && !subItems.classList.contains('collapsed')) {
+          for (const s of subItems.querySelectorAll(':scope > .session-item')) items.push(s);
+        }
+      } else if (child.classList.contains('session-item')) {
+        items.push(child);
+      }
+    }
+  };
   for (const el of sessionsList.children) {
     if (el.classList.contains('project-group-header')) {
       items.push(el);
       if (!collapsedProjectGroups.has(el.dataset.groupPath)) {
-        const container = getGroupSessionsContainer(el);
-        if (container) {
-          for (const s of container.querySelectorAll('.session-item')) {
-            if (s.closest('.pinned-sub-items.collapsed')) continue;
-            items.push(s);
-          }
-        }
+        walkGroupContainer(getGroupSessionsContainer(el));
       }
     } else if (el.classList.contains('session-item')) {
       items.push(el);
@@ -2931,49 +3007,57 @@ function setGroupCollapsed(header, collapsed) {
   } catch (_) {}
 }
 
+function isGroupHeader(el) {
+  return el.classList.contains('project-group-header') || el.classList.contains('pinned-sub-header');
+}
+
+function findParentHeader(el) {
+  const subContainer = el.closest('.pinned-sub-items');
+  if (subContainer?.previousElementSibling?.classList.contains('pinned-sub-header')) {
+    return subContainer.previousElementSibling;
+  }
+  const container = el.closest('.project-group-sessions');
+  if (!container) return null;
+  let header = container.previousElementSibling;
+  while (header && !header.classList.contains('project-group-header')) header = header.previousElementSibling;
+  return header;
+}
+
 function handleSidebarHorizontal(direction) {
   const items = getNavigableItems();
   if (selectedSessionIdx < 0 || selectedSessionIdx >= items.length) return;
   const el = items[selectedSessionIdx];
-  const isHeader = el.classList.contains('project-group-header');
   const collapse = direction < 0;
 
-  if (isHeader) {
-    const groupPath = el.dataset.groupPath;
-    const isCollapsed = collapsedProjectGroups.has(groupPath);
+  if (isGroupHeader(el)) {
+    const isCollapsed = collapsedProjectGroups.has(el.dataset.groupPath);
     if (collapse) {
       if (!isCollapsed) setGroupCollapsed(el, true);
+    } else if (isCollapsed) {
+      setGroupCollapsed(el, false);
     } else {
-      if (isCollapsed) {
-        setGroupCollapsed(el, false);
-      } else {
-        navigateSession(1);
-      }
-    }
-  } else {
-    if (collapse) {
-      const container = el.closest('.project-group-sessions');
-      if (container) {
-        let header = container.previousElementSibling;
-        while (header && !header.classList.contains('project-group-header')) header = header.previousElementSibling;
-        if (header) {
-          const headerIdx = items.indexOf(header);
-          if (headerIdx >= 0) selectSessionByIndex(headerIdx, items);
-        }
-      }
-    } else {
-      activateSelectedSession(items);
+      navigateSession(1);
     }
+    return;
+  }
+
+  if (!collapse) {
+    activateSelectedSession(items);
+    return;
   }
+
+  const header = findParentHeader(el);
+  if (!header) return;
+  const headerIdx = items.indexOf(header);
+  if (headerIdx >= 0) selectSessionByIndex(headerIdx, items);
 }
 
 function activateSelectedSession(items) {
   items = items || getNavigableItems();
   if (selectedSessionIdx < 0 || selectedSessionIdx >= items.length) return;
   const el = items[selectedSessionIdx];
-  if (el.classList.contains('project-group-header')) {
-    const groupPath = el.dataset.groupPath;
-    setGroupCollapsed(el, !collapsedProjectGroups.has(groupPath));
+  if (isGroupHeader(el)) {
+    setGroupCollapsed(el, !collapsedProjectGroups.has(el.dataset.groupPath));
   } else {
     el.click();
   }
@@ -4082,6 +4166,14 @@ document.addEventListener('keydown', (e) => {
     showStorageManager();
     return;
   }
+  if (e.key === '.' || e.key === '>') {
+    const sid = sessionsList.querySelector('.kb-selected')?.dataset.sessionId || currentSessionId;
+    if (sid) {
+      e.preventDefault();
+      (e.shiftKey ? toggleSessionSticky : toggleSessionPin)(sid);
+      return;
+    }
+  }
 
   // Tab toggles focus zone
   if (e.key === 'Tab') {
@@ -4213,6 +4305,18 @@ document.addEventListener('keydown', (e) => {
     hubNavigate('memory', mSession?.project ? `?project=${encodeURIComponent(mSession.project)}` : undefined);
     return;
   }
+  if (e.code === 'KeyC' && e.shiftKey) {
+    e.preventDefault();
+    if (!contextSid) {
+      showToast('No session selected');
+      return;
+    }
+    navigator.clipboard
+      .writeText(contextSid)
+      .then(() => showToast(`Copied session id: ${contextSid.slice(0, 8)}`, 'success'))
+      .catch(() => showToast('Failed to copy session id'));
+    return;
+  }
   if (matchKey(e, 'KeyR')) {
     e.preventDefault();
     if (_manualRefreshing) return;
@@ -5986,4 +6090,24 @@ window.hubNavigate = function hubNavigate(app, url) {
   if (!window.__HUB__?.enabled) return;
   window.parent?.postMessage({ type: 'hub:navigate', app, url }, '*');
 };
+
+(function initHubTheme() {
+  const getTheme = () => (document.body.classList.contains('light') ? 'light' : 'dark');
+  const hubOrigin = () => (window.__HUB__?.url ? new URL(window.__HUB__.url).origin : null);
+  let lastTheme = getTheme();
+  window.addEventListener('message', (e) => {
+    if (e.source !== window.parent || e.origin !== hubOrigin()) return;
+    if (e.data?.type !== 'hub:theme') return;
+    if (getTheme() === e.data.theme) return;
+    window.toggleTheme();
+    lastTheme = getTheme();
+  });
+  new MutationObserver(() => {
+    const t = getTheme();
+    if (t === lastTheme) return;
+    lastTheme = t;
+    const origin = hubOrigin();
+    if (origin) window.parent.postMessage({ type: 'hub:theme', theme: t }, origin);
+  }).observe(document.body, { attributes: true, attributeFilter: ['class'] });
+})();
 // #endregion HUB_INTEGRATION

package/public/index.html

@@ -421,6 +421,14 @@
                 <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;">.</kbd></td>
+                <td style="padding: 4px 0; color: var(--text-primary);">Pin/unpin selected session</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;">&gt;</kbd></td>
+                <td style="padding: 4px 0; color: var(--text-primary);">Toggle sticky on selected session</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;">T</kbd></td>
                 <td style="padding: 4px 0; color: var(--text-primary);">Toggle theme</td>
@@ -445,6 +453,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;">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;">Shift+C</kbd></td>
+                <td style="padding: 4px 0; color: var(--text-primary);">Copy session id</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>

package/public/style.css

@@ -2236,6 +2236,19 @@ body::before {
   font-family: var(--font-mono);
   font-size: 0.85rem;
 }
+.msg-detail-pre-tinted {
+  background: rgba(127, 127, 127, 0.15);
+  border-radius: 4px;
+  padding: 8px 10px;
+}
+.expand-toggle-btn {
+  background: none;
+  border: none;
+  color: var(--accent);
+  cursor: pointer;
+  text-decoration: underline;
+  margin-left: 6px;
+}
 .msg-cmd .msg-text code {
   background: var(--bg-hover);
   padding: 2px 6px;
@@ -3488,7 +3501,8 @@ pre.mermaid svg {
   color: var(--text-primary);
 }
 
-.project-group-header.kb-selected {
+.project-group-header.kb-selected,
+.pinned-sub-header.kb-selected {
   color: var(--text-primary);
   background: var(--bg-hover);
   border-radius: 4px;

package/server.js

@@ -3,7 +3,7 @@
 const express = require('express');
 const path = require('path');
 const fs = require('fs').promises;
-const { existsSync, readdirSync, readFileSync, writeFileSync, statSync, createReadStream, unlinkSync } = require('fs');
+const { existsSync, readdirSync, readFileSync, writeFileSync, statSync, createReadStream, unlinkSync, mkdirSync, renameSync } = require('fs');
 const readline = require('readline');
 const chokidar = require('chokidar');
 const os = require('os');
@@ -19,7 +19,8 @@ const {
   readCompactSummaries,
   findTerminatedTeammates,
   extractPromptFromTranscript,
-  extractModelFromTranscript
+  extractModelFromTranscript,
+  readFullToolResult
 } = require('./lib/parsers');
 
 if (process.argv.includes("--install") || process.argv.includes("--uninstall")) {
@@ -72,6 +73,27 @@ const PLANS_DIR = path.join(CLAUDE_DIR, 'plans');
 const CCK_DIR = path.join(CLAUDE_DIR, '.cck');
 const AGENT_ACTIVITY_DIR = path.join(CCK_DIR, 'agent-activity');
 const CONTEXT_STATUS_DIR = path.join(CCK_DIR, 'context-status');
+const PINS_FILE = path.join(CCK_DIR, 'pins.json');
+
+// Server-side pin mirror (UI authoritative, server stores latest pushed state for CLI queries).
+function readPins() {
+  try {
+    const obj = JSON.parse(readFileSync(PINS_FILE, 'utf8'));
+    if (obj && typeof obj === 'object' && !Array.isArray(obj)) return obj;
+  } catch (_) {}
+  return {};
+}
+
+function writePins(pins) {
+  try {
+    mkdirSync(CCK_DIR, { recursive: true });
+    const tmp = `${PINS_FILE}.${process.pid}.${Date.now()}.tmp`;
+    writeFileSync(tmp, JSON.stringify(pins, null, 2), 'utf8');
+    renameSync(tmp, PINS_FILE);
+  } catch (e) {
+    console.error('Failed to write pins.json:', e.message);
+  }
+}
 
 const PERMISSION_TTL_MS = 1800000;
 const AGENT_TTL_MS = 3600000;
@@ -1293,12 +1315,23 @@ app.get('/api/sessions/:sessionId/messages', (req, res) => {
     }
   }
   for (const msg of messages) {
-    if (msg.toolUseId) delete msg.toolUseId;
+    // Keep toolUseId on truncated tool results so the client can lazy-fetch the full text
+    if (msg.toolUseId && !msg.toolResultTruncated) delete msg.toolUseId;
     delete msg.promptId;
   }
   res.json({ messages, hasMore, sessionId: req.params.sessionId });
 });
 
+app.get('/api/sessions/:sessionId/tool-result/:toolUseId', (req, res) => {
+  const metadata = loadSessionMetadata();
+  const meta = metadata[req.params.sessionId];
+  const jsonlPath = meta?.jsonlPath;
+  if (!jsonlPath) return res.status(404).json({ error: 'session not found' });
+  const content = readFullToolResult(jsonlPath, req.params.toolUseId);
+  if (content == null) return res.status(404).json({ error: 'tool result not found' });
+  res.json({ toolUseId: req.params.toolUseId, content });
+});
+
 app.get('/api/version', (req, res) => {
   const pkg = require('./package.json');
   res.json({ version: pkg.version });
@@ -1549,6 +1582,10 @@ app.post('/api/session/pin', async (req, res) => {
     if (!['none', 'pinned', 'sticky'].includes(state)) {
       return res.status(400).json({ error: 'state must be none|pinned|sticky' });
     }
+    const pins = readPins();
+    if (state === 'none') delete pins[id];
+    else pins[id] = state;
+    writePins(pins);
     broadcast({ type: 'session:pin', id, state });
     res.json({ success: true, id, state });
   } catch (error) {
@@ -1557,6 +1594,18 @@ app.post('/api/session/pin', async (req, res) => {
   }
 });
 
+app.get('/api/session/pins', (req, res) => {
+  res.setHeader('Cache-Control', 'no-store');
+  try {
+    const pins = readPins();
+    const items = Object.entries(pins).map(([id, state]) => ({ id, state }));
+    res.json({ pins, items });
+  } catch (error) {
+    console.error('Error in GET /api/session/pins:', error);
+    res.status(500).json({ error: error.message || 'Failed' });
+  }
+});
+
 app.get('/api/preview', async (req, res) => {
   try {
     const abs = resolvePreviewPath(req.query.path, req.query.base);