claude-code-kanban 3.4.0 → 3.5.1

package/package.json

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

package/public/app.js

@@ -78,11 +78,34 @@ function updateUrl() {
   const qs = params.toString();
   const url = qs ? `?${qs}` : window.location.pathname;
   history.replaceState(null, '', url);
+  persistLastView();
+}
+
+const LAST_VIEW_KEY = 'lastView';
+function persistLastView() {
+  try {
+    const data = {
+      view: viewMode,
+      session: currentSessionId,
+      projectPath: viewMode === 'project' ? currentProjectPath : null,
+    };
+    localStorage.setItem(LAST_VIEW_KEY, JSON.stringify(data));
+  } catch (_) {}
+}
+function loadLastView() {
+  try {
+    return JSON.parse(localStorage.getItem(LAST_VIEW_KEY)) || null;
+  } catch (_) {
+    return null;
+  }
 }
 
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function resetState() {
   history.replaceState(null, '', window.location.pathname);
+  try {
+    localStorage.removeItem(LAST_VIEW_KEY);
+  } catch (_) {}
   sessionFilter = 'active';
   sessionLimit = '20';
   filterProject = '__recent__';
@@ -481,6 +504,7 @@ async function fetchTasks(sessionId) {
     resetAgentState();
     updateUrl();
     renderSession();
+    renderSessions();
     fetchAgents(sessionId);
     if (!agentLogMode) fetchMessages(sessionId);
   } catch (error) {
@@ -1999,34 +2023,35 @@ function showAgentModal(agentId) {
   const modalNameLabel = agent.agentName ? ` · ${escapeHtml(agent.agentName)}` : '';
   title.innerHTML = `${statusDot} ${escapeHtml(agent.type || 'unknown')}${modalNameLabel}`;
 
-  const rows = [
-    ['Status', agent.status],
-    ['Agent ID', `<code style="font-size:12px;color:var(--text-tertiary)">${escapeHtml(agent.agentId)}</code>`],
-    ['Duration', formatDuration(elapsed)],
-  ];
+  const shortModel = agent.model ? agent.model.replace(/^claude-/, '').replace(/-\d{8}$/, '') : null;
+  const shortId = agent.agentId ? agent.agentId.slice(0, 8) : '';
+  const chip = (label, value, opts = {}) => {
+    const cls = opts.cls ? ` ${opts.cls}` : '';
+    const style = opts.style ? ` style="${opts.style}"` : '';
+    const title = opts.title ? ` title="${escapeHtml(opts.title)}"` : '';
+    const labelHtml = label ? `<span class="agent-chip-label">${label}</span>` : '';
+    return `<span class="agent-chip${cls}"${style}${title}>${labelHtml}<span class="agent-chip-val">${value}</span></span>`;
+  };
+
+  const chips = [];
+  if (agent.agentId) chips.push(chip('id', escapeHtml(shortId), { cls: 'agent-chip-mono', title: agent.agentId }));
+  chips.push(chip('', escapeHtml(agent.status), { cls: `agent-chip-status agent-chip-${agent.status}` }));
+  chips.push(chip('⏱', formatDuration(elapsed)));
+  if (shortModel) chips.push(chip('model', escapeHtml(shortModel), { cls: 'agent-chip-mono' }));
   if (agent.agentName) {
-    const ownerColor = getOwnerColor(agent.agentName);
-    rows.push([
-      'Owner',
-      `<span class="task-owner-badge" style="background:${ownerColor.bg};color:${ownerColor.color}">${escapeHtml(agent.agentName)}</span>`,
-    ]);
+    const c = getOwnerColor(agent.agentName);
+    chips.push(
+      chip('owner', escapeHtml(agent.agentName), {
+        style: `background:${c.bg};color:${c.color};border-color:transparent;`,
+      }),
+    );
   }
-  if (agent.model)
-    rows.push(['Model', `<code style="font-size:12px;color:var(--text-tertiary)">${escapeHtml(agent.model)}</code>`]);
-  if (started) rows.push(['Started', started.toLocaleTimeString()]);
-  if (stopped) rows.push(['Stopped', stopped.toLocaleTimeString()]);
+  if (started) chips.push(chip('started', started.toLocaleTimeString()));
+  if (stopped) chips.push(chip('stopped', stopped.toLocaleTimeString()));
 
   const agentMsg = currentMessages.find((m) => m.tool === 'Agent' && m.agentId === agentId);
 
-  let html =
-    `<table style="width:100%;border-collapse:collapse;">` +
-    rows
-      .map(
-        ([k, v]) =>
-          `<tr><td style="padding:6px 12px 6px 0;color:var(--text-tertiary);white-space:nowrap;vertical-align:top;">${k}</td><td style="padding:6px 0;color:var(--text-primary);">${v}</td></tr>`,
-      )
-      .join('') +
-    `</table>`;
+  let html = `<div class="agent-chips">${chips.join('')}</div>`;
 
   const promptText = stripTeammateWrapper(agentMsg?.agentPrompt || agent.prompt || null);
   const responseText = agent.lastMessage ? stripAnsi(agent.lastMessage.trim()) : null;
@@ -4124,6 +4149,8 @@ document.addEventListener('keydown', (e) => {
     e.preventDefault();
     if (_manualRefreshing) return;
     _manualRefreshing = true;
+    lastSessionsHash = '';
+    lastTasksHash = '';
     const refreshes = [fetchSessions()];
     if (currentSessionId) refreshes.push(fetchTasks(currentSessionId));
     Promise.all(refreshes)
@@ -4955,11 +4982,18 @@ async function updateProjectDropdown() {
   projectsCacheDirty = false;
 
   const cutoff = Date.now() - 24 * 60 * 60 * 1000;
+  const prevRecent = recentProjects;
   recentProjects = new Set(
     projects.filter((p) => p.modifiedAt && new Date(p.modifiedAt).getTime() > cutoff).map((p) => p.path),
   );
 
   renderProjectDropdown(dropdown, projects);
+
+  // recentProjects was empty before — sidebar rendered with __recent__ filter
+  // dropping every session. Re-render now that we know which projects qualify.
+  if (filterProject === '__recent__' && prevRecent.size === 0 && recentProjects.size > 0) {
+    renderSessions();
+  }
 }
 
 function renderProjectDropdown(dropdown, projects) {
@@ -5753,8 +5787,21 @@ Promise.all([
       }
     } else if (urlState.session) {
       await fetchTasks(urlState.session);
-    } else {
+    } else if (urlState.view === 'all') {
       showAllTasks();
+    } else {
+      const last = loadLastView();
+      if (last?.view === 'project' && last.projectPath && sessions.some((s) => s.project === last.projectPath)) {
+        try {
+          await fetchProjectView(last.projectPath);
+        } catch (_) {
+          showAllTasks();
+        }
+      } else if (last?.view === 'session' && last.session && sessions.some((s) => s.id === last.session)) {
+        await fetchTasks(last.session);
+      } else {
+        showAllTasks();
+      }
     }
     if (urlState.messages && currentSessionId) {
       toggleMessagePanel();

package/public/style.css

@@ -1707,6 +1707,61 @@ body::before {
   flex-shrink: 0;
 }
 
+.agent-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 10px;
+}
+.agent-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 9px;
+  font-size: 11px;
+  font-weight: 500;
+  border-radius: 999px;
+  border: 1px solid var(--border-color, rgba(127, 127, 127, 0.25));
+  background: var(--bg-secondary, rgba(127, 127, 127, 0.08));
+  color: var(--text-secondary);
+  white-space: nowrap;
+  line-height: 1.4;
+}
+.agent-chip-label {
+  color: var(--text-tertiary);
+  text-transform: uppercase;
+  font-size: 9.5px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  opacity: 0.75;
+}
+.agent-chip-val {
+  color: inherit;
+}
+.agent-chip-mono .agent-chip-val {
+  font-family: var(--font-mono, monospace);
+  font-size: 10.5px;
+  letter-spacing: 0.2px;
+}
+.agent-chip-status {
+  text-transform: capitalize;
+}
+.agent-chip-running {
+  background: rgba(34, 197, 94, 0.15);
+  color: rgb(34, 160, 80);
+  border-color: rgba(34, 197, 94, 0.3);
+}
+.agent-chip-stopped {
+  background: rgba(127, 127, 127, 0.15);
+  color: var(--text-tertiary);
+  border-color: rgba(127, 127, 127, 0.3);
+}
+.agent-chip-error,
+.agent-chip-failed {
+  background: rgba(239, 68, 68, 0.15);
+  color: rgb(220, 60, 60);
+  border-color: rgba(239, 68, 68, 0.3);
+}
 .team-modal-desc {
   font-size: 12px;
   color: var(--text-secondary);