claude-code-kanban 7.20.0 → 7.21.0

package/lib/parent-cache.js

@@ -24,6 +24,10 @@ function getParentVerdict(sessionId, meta) {
   return v.result;
 }
 
+// No staleness check, so no file access: for the session list's fork badge, where a stale
+// verdict costs a wrong icon until the next lookup.
+const peekParentVerdict = (sessionId) => verdicts.get(sessionId)?.result || null;
+
 // self: the child's stat from the lookup. parentIno: null when no parent was found.
 function setParentVerdict(sessionId, meta, self, parentIno, result) {
   verdicts.set(sessionId, {
@@ -55,4 +59,4 @@ function importParentVerdicts(entries) {
   }
 }
 
-module.exports = { getParentVerdict, setParentVerdict, parentVerdictsDirty, exportParentVerdicts, importParentVerdicts };
+module.exports = { getParentVerdict, setParentVerdict, peekParentVerdict, parentVerdictsDirty, exportParentVerdicts, importParentVerdicts };

package/package.json

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

package/public/app.js

@@ -1939,6 +1939,8 @@ const ICON_AGENT_ACTIVE =
 const ICON_TERMINAL =
   '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>';
 const TERMINAL_TITLE = 'Running in a terminal here';
+const ICON_FORK =
+  '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><circle cx="18" cy="6" r="3"/><path d="M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9"/><path d="M12 12v3"/></svg>';
 const ICON_DISPATCHED =
   '<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.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/><path d="m21.854 2.147-10.94 10.939"/></svg>';
 const ICON_CHAT =
@@ -3982,16 +3984,15 @@ function renderSessions() {
     return out;
   };
 
-  const renderSessionCard = (session) => {
-    if (session.placeholder) return renderPlaceholderCard(session, childDepth.get(session.id));
+  const renderSessionCard = (session, hostProject = null) => {
+    if (session.placeholder) return renderPlaceholderCard(session, childDepth.get(session.id), hostProject);
     const total = session.taskCount;
     const pct = (n) => Math.round((n / total) * 100);
     const isActive = session.id === currentSessionId && viewMode === 'session';
     const isLive = isSessionLive(session);
     const sessionName = sessionDisplayName(session);
-    const projectHtml = renderProjectIdentity(session);
+    const projectHtml = renderProjectIdentity(session, hostProject);
 
-    const gitBranch = session.gitBranch ? escapeHtml(session.gitBranch) : null;
     const isTeam = session.isTeam;
     const memberCount = session.memberCount || 0;
 
@@ -4025,8 +4026,7 @@ function renderSessions() {
           <button onclick="openSession('${sid}')" draggable="true" data-session-id="${escapeHtml(session.id)}" class="session-item ${isActive ? 'active' : ''} ${sessionBarClass(session)} ${tempClass} ${idleClass} ${justFinishedClass}${childDepthClass(childDepth.get(session.id))}">
             <span class="session-pin-btn${pinClass}" onclick="event.stopPropagation();toggleSessionPin('${sid}')" title="${pinTitle} session">${pinState === 'sticky' ? SESSION_STAR_SVG : SESSION_PIN_SVG}</span>
             <div class="session-name">${escapeHtml(sessionName)}</div>
-            ${projectHtml ? `<div class="session-secondary">${projectHtml}</div>` : ''}
-            ${gitBranch ? `<div class="session-branch">${gitBranch}</div>` : ''}
+            ${renderSessionIdentity(projectHtml, session.gitBranch)}
             ${metricsHtml ? `<div class="session-metrics">${metricsHtml}</div>` : ''}
             <div class="session-footer">
               <div class="session-time">${formatDate(session.modifiedAt)}</div>
@@ -4042,6 +4042,7 @@ function renderSessions() {
                 ${session.planSourceSessionId ? `<span class="plan-indicator" title="Implements plan — click to reveal plan session" onclick="event.stopPropagation(); revealPlanSession('${escAttrJs(session.planSourceSessionId)}')">${ICON_PLAN}</span>` : ''}
                 ${session.sharedTaskList ? `<span class="shared-tasklist-badge" title="Shared task list: ${escapeHtml(session.sharedTaskList)}">${linkSvg(12)}</span>` : ''}
                 ${session.dispatched ? `<span class="dispatched-badge"${session.dispatched.parent ? ` onclick="event.stopPropagation(); revealSession('${escAttrJs(session.dispatched.parent)}')"` : ''} title="${escapeHtml(dispatchedTitle(session.dispatched))}">${ICON_DISPATCHED}</span>` : ''}
+                ${session.forkedFromSessionId ? `<span class="fork-badge" onclick="event.stopPropagation(); revealSession('${escAttrJs(session.forkedFromSessionId)}')" title="Forked from ${escapeHtml(session.forkedFromSessionId)}, click to reveal">${ICON_FORK}</span>` : ''}
                 ${runningTerminals.has(session.id) ? `<span class="terminal-badge" onclick="event.stopPropagation(); showSessionTerminal('${escAttrJs(session.id)}')" title="${TERMINAL_TITLE}">${ICON_TERMINAL}</span>` : ''}
                 ${isWaitingSession(session) ? `<span class="agent-badge agent-badge-waiting" title="Waiting for user">${ICON_AGENT_WAITING}</span>` : ''}
                 ${session.hasRunningAgents && !isWaitingSession(session) ? `<span class="agent-badge agent-badge-active" title="Agents running">${ICON_AGENT_ACTIVE}</span>` : ''}
@@ -4072,7 +4073,7 @@ function renderSessions() {
         SECTION_OUTSIDE,
         `Outside current filters ${countHtml(outside.rows)}`,
         false,
-        collapsedProjectGroups.has(SECTION_OUTSIDE) ? '' : outside.rows.map(renderSessionCard).join(''),
+        collapsedProjectGroups.has(SECTION_OUTSIDE) ? '' : outside.rows.map((s) => renderSessionCard(s)).join(''),
       )
     : '';
 
@@ -4134,10 +4135,11 @@ function renderSessions() {
   const groupPinned = store.getItem(GROUP_PINNED_KEY) !== 'false';
   const pinWeight = (s) => (isPlacedSticky(s.id) ? 2 : isInPinnedGroup(s) ? 1 : 0);
   const pinSort = (a, b) => pinWeight(b) - pinWeight(a);
-  const renderGroupSessions = (list, pinKey) => {
-    if (!groupPinned || pinnedSessionIds.size === 0) return nestChildren(list).map(renderSessionCard).join('');
+  const renderGroupSessions = (list, pinKey, hostProject = null) => {
+    const card = (s) => renderSessionCard(s, hostProject);
+    if (!groupPinned || pinnedSessionIds.size === 0) return nestChildren(list).map(card).join('');
     const gPinned = nestChildren(list.filter(isInPinnedGroup));
-    if (gPinned.length === 0) return nestChildren(list).map(renderSessionCard).join('');
+    if (gPinned.length === 0) return nestChildren(list).map(card).join('');
     const gUnpinned = nestChildren(list.filter((s) => !isInPinnedGroup(s)));
     const pinCollapsed = collapsedProjectGroups.has(pinKey);
     return (
@@ -4157,10 +4159,10 @@ function renderSessions() {
       '<div class="pinned-sub-items' +
       (pinCollapsed ? ' collapsed' : '') +
       '">' +
-      gPinned.map(renderSessionCard).join('') +
+      gPinned.map(card).join('') +
       '</div>' +
       '</div>' +
-      gUnpinned.map(renderSessionCard).join('')
+      gUnpinned.map(card).join('')
     );
   };
 
@@ -4192,7 +4194,7 @@ function renderSessions() {
             </div>
             <div class="project-group-breadcrumb${nestedCls}" data-full-path="${escapedPath}" title="Click to copy path">${breadcrumbHtml}</div>
             <div class="project-group-sessions${isCollapsed ? ' collapsed' : ''}${nestedCls}" data-project-path="${escapedPath}">
-              ${renderGroupSessions(projectSessions, pinKey(projectPath))}
+              ${renderGroupSessions(projectSessions, pinKey(projectPath), projectPath)}
             </div>
           `;
   };
@@ -4255,7 +4257,7 @@ function renderSessions() {
     let body = '';
     if (flat) {
       body = nestChildren([...bucket].sort(byMemberOrder))
-        .map(renderSessionCard)
+        .map((s) => renderSessionCard(s))
         .join('');
     } else {
       const loose = [];
@@ -4361,7 +4363,7 @@ function renderSessions() {
             </div>
           `;
       } else {
-        projectsHtml += ungrouped.map(renderSessionCard).join('');
+        projectsHtml += ungrouped.map((s) => renderSessionCard(s)).join('');
       }
     }
 
@@ -4372,7 +4374,7 @@ function renderSessions() {
   } else {
     const sectioned = sessionGroups.length > 0;
     const restHtml =
-      sectioned && collapsedProjectGroups.has(SECTION_SESSIONS) ? '' : sgRest.map(renderSessionCard).join('');
+      sectioned && collapsedProjectGroups.has(SECTION_SESSIONS) ? '' : sgRest.map((s) => renderSessionCard(s)).join('');
     const tail = sectioned ? sectionHtml(SECTION_SESSIONS, 'Sessions', true, restHtml, sgRest.length === 0) : restHtml;
     sessionsList.innerHTML = html + sgSectionHtml(true) + tail + outsideHtml;
   }
@@ -4444,7 +4446,7 @@ function renderSession() {
   const completed = currentTasks.filter((t) => t.status === 'completed').length;
   const percent = currentTasks.length > 0 ? Math.round((completed / currentTasks.length) * 100) : 0;
 
-  progressPercent.textContent = `${percent}%`;
+  progressPercent.textContent = `${percent}% done`;
   progressBar.style.width = `${percent}%`;
   const hasInProgress = currentTasks.some((t) => t.status === 'in_progress');
   progressBar.classList.toggle('shimmer', hasInProgress && percent < 100);
@@ -4468,7 +4470,7 @@ function renderProjectView() {
   const completed = currentTasks.filter((t) => t.status === 'completed').length;
   const percent = currentTasks.length > 0 ? Math.round((completed / currentTasks.length) * 100) : 0;
 
-  progressPercent.textContent = `${percent}%`;
+  progressPercent.textContent = `${percent}% done`;
   progressBar.style.width = `${percent}%`;
   const hasInProgress = currentTasks.some((t) => t.status === 'in_progress');
   progressBar.classList.toggle('shimmer', hasInProgress && percent < 100);
@@ -9447,7 +9449,7 @@ async function openPreviewByPath(filePath, base, onUnsupported, sessionId = prev
   try {
     const r = await api('/api/preview', { query: { path: filePath, base: base || null } });
     if (!r.ok) {
-      showToast('Preview file unavailable', 'error');
+      showToast('Preview file unavailable', 'error', { label: 'Copy path', onClick: () => copyText(filePath, 'path') });
       return;
     }
     const data = await r.json();
@@ -10371,6 +10373,8 @@ const CONTEXT_COLORS = {
   red: 'var(--danger)',
 };
 const COST_THRESHOLDS = { green: 0.5, yellow: 2, orange: 5 };
+// Status colors as small text measure 3.7–3.9:1 on light surfaces; bars and dots keep the pure color.
+const textTone = (color) => `color-mix(in srgb, ${color} 70%, var(--text-primary))`;
 const MODEL_THRESHOLDS = [
   { match: /sonnet/i, yellow: 120000, orange: 200000, red: 300000 },
   { match: /haiku/i, yellow: 100000, orange: 130000, red: 150000 },
@@ -10477,7 +10481,7 @@ function renderContextBar(session) {
             ${renderMarkers(ctx.markers)}
           </div>
           <div class="context-bar-labels">
-            <span style="color:${color}">${Math.round(ctx.pct)}% (${used})</span>
+            <span>ctx <span style="color:${textTone(color)}">${Math.round(ctx.pct)}% (${used})</span></span>
             <span>${Math.round(ctx.remaining)}% free</span>
           </div>
         </div>`;
@@ -10518,7 +10522,7 @@ function formatCacheLeft(expiresAt, expiredText) {
   if (left === 0) return { text: expiredText, color: 'var(--text-muted)' };
   const text = `${Math.floor(left / 60)}:${String(left % 60).padStart(2, '0')}`;
   const color = left < 120 ? CONTEXT_COLORS.red : left < 300 ? CONTEXT_COLORS.orange : CONTEXT_COLORS.green;
-  return { text, color };
+  return { text, color: textTone(color) };
 }
 
 let cacheTimerInterval = null;
@@ -10587,7 +10591,7 @@ function renderContextDetail(session, { tokens = true } = {}) {
             </div>
           </div>
           <div class="detail-context-summary">
-            <span style="color:${color}">${Math.round(ctx.pct)}% used</span>
+            <span style="color:${textTone(color)}">${Math.round(ctx.pct)}% used</span>
             <span${ctx.compacts ? ` title="Auto-compact window · model window ${escapeHtml(formatTokens(ctx.modelSize / 1000))}"` : ''}>${formatTokens(ctx.usedTokens / 1000)} / ${formatTokens(ctx.size / 1000)}</span>
           </div>`
     : '';
@@ -10599,11 +10603,11 @@ function renderContextDetail(session, { tokens = true } = {}) {
           <div class="detail-context-stats">
             ${usageRows}
             ${totalRows}
-            ${ctx ? `<div class="stat-item"><span class="stat-label">Cost</span><span class="stat-value" style="color:${getCostColor(cost.total_cost_usd)}">${formatCost(cost.total_cost_usd)}</span></div>` : ''}
+            ${ctx ? `<div class="stat-item"><span class="stat-label">Cost</span><span class="stat-value" style="color:${textTone(getCostColor(cost.total_cost_usd))}">${formatCost(cost.total_cost_usd)}</span></div>` : ''}
             ${reply ? renderCacheTimer(reply) : ''}
             ${cost.total_duration_ms != null ? `<div class="stat-item"><span class="stat-label">Duration</span><span class="stat-value">${formatDuration(cost.total_duration_ms)}</span></div>` : ''}
             ${cost.total_api_duration_ms != null ? `<div class="stat-item"><span class="stat-label">API time</span><span class="stat-value">${formatDuration(cost.total_api_duration_ms)}</span></div>` : ''}
-            ${cost.total_lines_added != null ? `<div class="stat-item"><span class="stat-label">Lines</span><span class="stat-value"><span style="color:${CONTEXT_COLORS.green}">+${(cost.total_lines_added || 0).toLocaleString()}</span> / <span style="color:${CONTEXT_COLORS.red}">-${(cost.total_lines_removed || 0).toLocaleString()}</span></span></div>` : ''}
+            ${cost.total_lines_added != null ? `<div class="stat-item"><span class="stat-label">Lines</span><span class="stat-value"><span style="color:${textTone(CONTEXT_COLORS.green)}">+${(cost.total_lines_added || 0).toLocaleString()}</span> / <span style="color:${textTone(CONTEXT_COLORS.red)}">-${(cost.total_lines_removed || 0).toLocaleString()}</span></span></div>` : ''}
           </div>
         </div>`;
 }
@@ -10876,8 +10880,8 @@ function showWaitingDetail() {
   // With actions on screen the form/buttons are the content — tuck the raw
   // JSON behind a toggle, but keep what the user is approving visible: for a
   // permission ask surface the command (or description) as a one-line summary
+  let summaryHtml = '';
   if ((actionsHtml || footerHtml) && inputHtml) {
-    let summaryHtml = '';
     if (currentWaiting.kind === 'plan' && typeof params?.plan === 'string' && params.plan) {
       // A plan ask IS the plan — render it in full so it can be reviewed and
       // approved right here (follow mode included) instead of a JSON dump. The
@@ -10900,7 +10904,8 @@ function showWaitingDetail() {
   autoSizeModal(modal, body);
   setMsgDetailFollow(msgDetailFollowLatest);
   const overlay = document.getElementById('msg-detail-modal');
-  const meta = [formatDate(currentWaiting.timestamp), 'waiting'];
+  // The permission card's header already shows how long the ask has waited.
+  const meta = summaryHtml ? [] : [formatDate(currentWaiting.timestamp), 'waiting'];
   document.getElementById('msg-detail-meta').textContent = meta.join(' · ');
   currentPinDetailId = null;
   updateMsgDetailPinState();
@@ -10930,17 +10935,34 @@ function pathBasename(p) {
 
 // `session.worktree` is resolved server-side from the `.git` pointer file, so it holds for a
 // worktree parked beside its repo as well as one under <repo>/.claude/worktrees/.
-function renderProjectIdentity(session) {
+// Under its own project group the card leaves the repo name out: the group header shows it.
+function renderProjectIdentity(session, hostProject) {
   if (!session.project) return null;
+  const underHost = !!hostProject && sessionProjectKey(session) === hostProject;
   const wt = session.worktree;
-  if (!wt) return escapeHtml(pathBasename(session.project));
+  if (!wt) {
+    return underHost ? null : `<span class="session-project">${escapeHtml(pathBasename(session.project))}</span>`;
+  }
   const repo = pathBasename(wt.repo);
   // Worktrees beside the repo are conventionally named `<repo>-<branch>`, and repeating the
   // repo inside a chip that already sits next to it wastes the whole width of the card.
   const name = wt.name.startsWith(repo) ? wt.name.slice(repo.length).replace(/^[-._]/, '') || wt.name : wt.name;
-  return `${escapeHtml(repo)}<span class="wt-chip" title="Worktree of ${escapeHtml(wt.repo)}">⑂ ${escapeHtml(name)}</span>`;
+  const chip = `<span class="wt-chip" title="Worktree of ${escapeHtml(wt.repo)}">⑂ ${escapeHtml(name)}</span>`;
+  return underHost ? chip : `<span class="session-project">${escapeHtml(repo)}</span>${chip}`;
+}
+
+function renderSessionIdentity(projectHtml, gitBranch) {
+  if (!projectHtml && !gitBranch) return '';
+  const branch = gitBranch
+    ? `<span class="session-branch" title="${escapeHtml(gitBranch)}">${escapeHtml(gitBranch)}</span>`
+    : '';
+  const sep = projectHtml && branch ? '<span class="agent-ident-sep">·</span>' : '';
+  return `<div class="session-secondary">${projectHtml || ''}${sep}${branch}</div>`;
 }
 
+const SHORT_DATE = new Intl.DateTimeFormat(undefined, { month: 'short', day: 'numeric' });
+const SHORT_DATE_YEAR = new Intl.DateTimeFormat(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
+
 function formatDate(dateStr) {
   const date = new Date(dateStr);
   const now = new Date();
@@ -10949,7 +10971,8 @@ function formatDate(dateStr) {
   if (diff < JUST_NOW_MS) return 'just now';
   if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
   if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;
-  return date.toLocaleDateString();
+  if (diff < 7 * 86400000) return `${Math.floor(diff / 86400000)}d ago`;
+  return (date.getFullYear() === now.getFullYear() ? SHORT_DATE : SHORT_DATE_YEAR).format(date);
 }
 
 // Terminal output reaches the transcript raw. A CSI-only pattern left OSC
@@ -11275,8 +11298,9 @@ function loadMermaid() {
 }
 
 let mermaidQueue = Promise.resolve();
+let mermaidSeq = 0;
 
-// mermaid.run is async, and two runs that overlap draw diagrams over each other.
+// mermaid.render is async, and two renders that overlap draw diagrams over each other.
 function queueMermaid(work) {
   mermaidQueue = mermaidQueue.then(work).catch((err) => console.warn(err.message));
 }
@@ -11303,10 +11327,15 @@ function initMermaidBlocks(container) {
     return;
   }
   queueMermaid(async () => {
-    // One block per run, so a bad diagram shows its own error and the others still render.
+    // One block per render, so a bad diagram shows its own error and the others still render.
+    // render, not run: run measures labels in place, and under a modal's CSS zoom the measured
+    // widths are off, so node boxes clip their text.
     for (const b of stampPending()) {
       try {
-        await mermaid.run({ nodes: [b] });
+        const { svg, bindFunctions } = await mermaid.render(`mermaid-${++mermaidSeq}`, b.textContent.trim());
+        b.innerHTML = svg;
+        b.setAttribute('data-processed', 'true');
+        bindFunctions?.(b);
       } catch (err) {
         showMermaidError(b, err);
       }
@@ -12363,8 +12392,8 @@ function updateDismissBtnState() {
   const btn = document.getElementById('session-info-dismiss-btn');
   if (!btn || !_infoModalSessionId) return;
   const isDismissed = dismissedSessionIds.has(_infoModalSessionId);
-  btn.textContent = isDismissed ? 'Restore' : 'Dismiss';
-  btn.title = isDismissed ? 'Restore — show in active list again' : 'Dismiss — hide from active list';
+  btn.textContent = isDismissed ? 'Show session' : 'Hide session';
+  btn.title = isDismissed ? 'Show in the active list again' : 'Hide from the active list';
 }
 
 let _planSessionId = null;
@@ -17468,13 +17497,13 @@ function forgetPlaceholder(id) {
   return true;
 }
 
-function renderPlaceholderCard(session, depth) {
+function renderPlaceholderCard(session, depth, hostProject) {
   const isActive = session.id === currentSessionId && viewMode === 'session';
-  const projectHtml = renderProjectIdentity(session);
+  const projectHtml = renderProjectIdentity(session, hostProject);
   return `
           <button onclick="openSession('${escAttrJs(session.id)}')" data-session-id="${escapeHtml(session.id)}" class="session-item session-placeholder ${isActive ? 'active' : ''}${childDepthClass(depth)}" title="${escapeHtml(`${session.id} | ${session.project}`)}">
             <div class="session-name">${escapeHtml(session.name)}</div>
-            ${projectHtml ? `<div class="session-secondary">${projectHtml}</div>` : ''}
+            ${renderSessionIdentity(projectHtml, null)}
             ${
               trustWaiting.has(session.id)
                 ? `<div class="session-waiting"><span class="agent-badge agent-badge-waiting" title="Waiting for user">${ICON_AGENT_WAITING}</span>trust this folder?</div>`
@@ -18187,7 +18216,13 @@ function makeLimitCell(label, bucket) {
 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));
+  span.title = 'Plan usage: 5-hour and 7-day limits, used % (time until reset)';
+  span.append(
+    'Usage ',
+    makeLimitCell('5h', rl?.five_hour),
+    document.createTextNode(' · '),
+    makeLimitCell('7d', rl?.seven_day),
+  );
   return span;
 }
 function renderSidebarFooter(rateLimits) {

package/public/index.html

@@ -243,7 +243,7 @@
               <div class="progress-bar">
                 <div id="progress-bar" class="progress-fill" style="width: 0%"></div>
               </div>
-              <span id="progress-percent" class="progress-text">0%</span>
+              <span id="progress-percent" class="progress-text">0% done</span>
             </div>
             <button id="terminal-toggle" class="icon-btn" onclick="event.shiftKey ? openTerminalManager() : toggleTerminal()" title="Show / hide terminal (Ctrl+`) · Focus (Alt+`) · End (Alt+Shift+`) · Shift+click or Ctrl+Shift+` for all terminals" aria-label="Toggle terminal" style="display: none;">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -596,7 +596,7 @@
       </div>
       <div id="team-modal-body" class="modal-body modal-zoomable"></div>
       <div class="modal-footer">
-        <button id="session-info-dismiss-btn" class="btn btn-secondary" onclick="toggleDismissSession(_infoModalSessionId); closeTeamModal()">Dismiss</button>
+        <button id="session-info-dismiss-btn" class="btn btn-secondary" onclick="toggleDismissSession(_infoModalSessionId); closeTeamModal()">Hide session</button>
         <button class="btn btn-secondary" onclick="showToolStatsModal(_infoModalSessionId)" title="Tool invocation statistics">Tool Stats</button>
         <button class="btn btn-secondary" onclick="closeTeamModal()">Close</button>
       </div>
@@ -727,7 +727,7 @@
       </div>
       <div id="agent-modal-body" class="modal-body modal-zoomable" style="overflow-y: auto; overflow-x: hidden; flex: 0 1 auto; min-height: 0;"></div>
       <div class="modal-footer">
-        <button id="agent-modal-dismiss-btn" class="btn agent-dismiss-btn" style="display:none" onclick="dismissAgent(currentAgentModalId);closeAgentModal()">Dismiss</button>
+        <button id="agent-modal-dismiss-btn" class="btn btn-secondary" style="display:none" onclick="dismissAgent(currentAgentModalId);closeAgentModal()" title="Mark this agent as stopped">Mark stopped</button>
         <button class="btn btn-secondary" onclick="closeAgentModal()">Close</button>
       </div>
     </div>