claude-code-kanban 4.25.0 → 4.27.0

package/public/index.html

@@ -5,6 +5,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>CC Kanban</title>
   <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%231a1a1a'/%3E%3Crect x='4' y='6' width='7' height='20' rx='2' fill='%23e8927c'/%3E%3Crect x='13' y='6' width='7' height='14' rx='2' fill='%23e8927c'/%3E%3Crect x='22' y='6' width='7' height='8' rx='2' fill='%23e8927c'/%3E%3C/svg%3E">
+  <!-- Chrome uses the SVG only in the tab strip; app windows, shortcuts and the
+       history list need a raster icon or they fall back to /favicon.ico and then to
+       whatever icon localhost was last seen with, which is a sibling app's. -->
+  <link rel="icon" type="image/png" sizes="192x192" href="/icons/icon-192.png">
+  <link rel="icon" type="image/png" sizes="512x512" href="/icons/icon-512.png">
   <link rel="manifest" href="/manifest.json">
   <meta name="theme-color" content="#101114" media="(prefers-color-scheme: dark)">
   <meta name="theme-color" content="#e8e6e3" media="(prefers-color-scheme: light)">
@@ -60,6 +65,20 @@
           <span class="section-header-label">Sessions</span>
           <span id="filter-summary" class="filter-summary" title=""></span>
           <span class="section-header-actions">
+            <button
+              id="zen-mode-btn"
+              class="icon-btn section-btn"
+              onclick="event.stopPropagation(); toggleZenMode()"
+              title="Zen mode: current session only (Shift+Z)"
+              aria-label="Zen mode: current session only"
+              aria-pressed="false"
+            >
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="12" cy="12" r="7"/>
+                <circle cx="12" cy="12" r="2"/>
+                <path d="M12 1v3M12 20v3M1 12h3M20 12h3"/>
+              </svg>
+            </button>
             <button
               id="filter-menu-btn"
               class="icon-btn section-btn"

package/public/style.css

@@ -9,6 +9,9 @@
   --bg-surface: #16181c;
   --bg-elevated: #1e2025;
   --bg-hover: #282a30;
+  /* Selection reads as a recess against the darker surface here, but light theme's deep tone
+     sits within a shade of the sidebar, so there it has to rise instead. */
+  --session-active-bg: var(--bg-deep);
   --border: #363840;
   --text-primary: #f0f1f3;
   --text-secondary: #c2c4c9;
@@ -440,7 +443,8 @@ body::before {
 }
 
 /* Ember only while something is actually filtered — at rest the funnel is just chrome. */
-.icon-btn.section-btn.has-filters {
+.icon-btn.section-btn.has-filters,
+.icon-btn.section-btn.active {
   color: var(--accent-text);
 }
 
@@ -575,17 +579,18 @@ body::before {
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-/* `.active` is the open session, `.kb-selected` the keyboard cursor. The cursor
-   must win when both land on one card, which is why it is ordered second. */
+/* `.active` is the open session, `.kb-selected` the keyboard cursor. They own different
+   properties — fill and border — so the cursor landing on the open session adds to it
+   instead of replacing how it looks. */
 .session-item.active {
-  background: var(--bg-deep);
-  border-color: var(--accent);
+  background: var(--session-active-bg);
 }
 
 .session-item.kb-selected {
-  background: var(--bg-elevated);
   border-color: var(--accent);
-  box-shadow: 0 0 0 1px var(--accent-dim);
+  box-shadow:
+    inset 0 0 0 1px var(--accent),
+    0 0 10px var(--accent-glow);
 }
 
 .session-item.stale {
@@ -633,7 +638,8 @@ body::before {
 }
 
 .session-name {
-  font-size: 13px;
+  font-size: 14px;
+  font-weight: 500;
   color: var(--text-primary);
   white-space: nowrap;
   overflow: hidden;
@@ -642,7 +648,9 @@ body::before {
   padding-right: 22px;
 }
 
-.session-indicators .pulse {
+.session-indicators .pulse,
+.wf-live-name .pulse {
+  flex: none;
   width: 6px;
   height: 6px;
   background: var(--accent);
@@ -671,6 +679,26 @@ body::before {
   overflow: hidden;
 }
 
+/* inline-block, not inline-flex: a flex box ignores text-overflow, so a long worktree name
+   ran past the card edge instead of truncating. */
+.wt-chip {
+  display: inline-block;
+  max-width: 60%;
+  margin-left: 5px;
+  padding: 0 5px;
+  border: 1px solid var(--accent-dim);
+  border-radius: 999px;
+  background: var(--accent-dim);
+  color: var(--accent-text);
+  font-family: var(--mono);
+  font-size: 9px;
+  line-height: 14px;
+  vertical-align: middle;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .session-branch {
   font-size: 10px;
   color: var(--text-secondary);
@@ -746,7 +774,10 @@ body::before {
   transition: width 0.5s ease-out;
 }
 
-.session-item:not(.active) .progress-fill {
+/* The live-workflow bar takes the muted fill too: its card already carries a pulsing
+   accent dot, and a second accent bar under it shouts. */
+.session-item:not(.active) .progress-fill,
+.wf-live-bar .progress-fill {
   background: color-mix(in srgb, var(--text-tertiary) 55%, transparent);
 }
 
@@ -858,6 +889,57 @@ body::before {
   color: var(--text-secondary);
 }
 
+/* Zen view: the sidebar holds one card, so the usage detail that normally lives behind the
+   info modal gets rendered underneath it. */
+.zen-panel {
+  margin-top: 10px;
+  /* No bottom padding: the linked-docs section that always closes the panel carries its own. */
+  padding: 10px 10px 0;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+}
+
+.zen-panel .detail-context {
+  margin-bottom: 0;
+}
+
+.zen-panel .detail-context-stats {
+  gap: 3px 10px;
+}
+
+.zen-scratchpad {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 12px;
+  padding-top: 10px;
+  border-top: 1px solid var(--border);
+  font-size: 11px;
+}
+
+.zen-scratchpad-label {
+  font-weight: 500;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  white-space: nowrap;
+}
+
+.zen-scratchpad-path {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--font-mono);
+  color: var(--text-secondary);
+}
+
+.zen-panel:hover .row-actions {
+  opacity: 1;
+}
+
 .session-time {
   font-size: 11px;
   font-weight: 450;
@@ -3818,7 +3900,9 @@ body::before {
   color: var(--text-primary);
 }
 
-.linked-doc-list {
+.linked-doc-list,
+.scratch-file-list,
+.artifact-list {
   list-style: none;
   padding: 0;
   margin: 0;
@@ -3827,18 +3911,26 @@ body::before {
   gap: 4px;
 }
 
-.linked-doc-item {
+.linked-doc-item,
+.scratch-file-item,
+.artifact-item {
   display: flex;
   align-items: baseline;
   gap: 8px;
   min-width: 0;
 }
 
-.linked-doc-link {
+.linked-doc-link,
+.scratch-file-link,
+.artifact-link {
   color: var(--accent-text);
   text-decoration: underline;
   text-decoration-style: dotted;
   text-underline-offset: 3px;
+}
+
+.linked-doc-link,
+.artifact-link {
   flex-shrink: 0;
 }
 
@@ -3852,19 +3944,87 @@ body::before {
   min-width: 0;
 }
 
+.scratch-file-time {
+  color: var(--text-muted);
+  font-size: 11px;
+  opacity: 0.7;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
 /* Rides on the shared .row-actions group; only the reveal trigger differs — per row
    here, per grid in the session info. margin-left:auto pins the group to the same
    right edge however long the names in between are. */
-.linked-doc-actions {
+.linked-doc-actions,
+.scratch-file-actions,
+.artifact-actions {
   margin-left: auto;
   align-self: center;
   flex-shrink: 0;
+  /* Two .row-actions buttons wide (22px each, 4px gap), filled from the left, so a
+     row with one action puts it in the same column as the rows that have two. */
+  min-width: 48px;
+  justify-content: flex-start;
 }
 
-.linked-doc-item:hover .linked-doc-actions {
+.linked-doc-item:hover .linked-doc-actions,
+.scratch-file-item:hover .scratch-file-actions,
+.artifact-item:hover .artifact-actions {
   opacity: 1;
 }
 
+/* Hangs off the Scratchpad path row, so it carries no header of its own. */
+.scratch-files-section {
+  margin-top: 6px;
+  font-size: 11px;
+}
+
+.scratch-file-link {
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  text-align: left;
+  /* A scratch name can be longer than the zen panel is wide; without this it pushes
+     the action buttons out of their column. The full path is on the title. */
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.scratch-files-more {
+  margin: 6px 0 0;
+  font-size: 11px;
+}
+
+/* A folder row wraps so its child list lands on its own full-width line under the
+   name, indented one chevron in. */
+.scratch-folder-item {
+  flex-wrap: wrap;
+}
+
+.scratch-folder-item > .scratch-file-list,
+.scratch-folder-item > .scratch-folder-empty {
+  flex-basis: 100%;
+  margin-top: 4px;
+  padding-left: 14px;
+}
+
+.scratch-folder-empty {
+  color: var(--text-muted);
+  opacity: 0.7;
+}
+
+.scratch-folder-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  text-decoration: none;
+  color: var(--text-secondary);
+}
+
 /* The × is a glyph, not an svg, so .row-actions button svg does not size it. */
 .linked-doc-remove {
   font-family: var(--mono);
@@ -3885,7 +4045,147 @@ body::before {
   text-decoration-style: dashed;
 }
 
-.linked-docs-empty {
+/* A section of the session panel: linked documents, artifacts. */
+.panel-section {
+  margin-bottom: 16px;
+  padding-top: 10px;
+  border-top: 1px solid var(--border);
+  font-size: 11px;
+}
+
+.linked-docs-section {
+  margin-top: 12px;
+}
+
+/* Artifacts are read out of the transcript, so the section renders before the
+   list arrives and stays in the DOM as the patch target when there is none. */
+.artifacts-section:empty,
+.scratch-files-section:empty,
+.workflow-live-section:empty {
+  display: none;
+}
+
+/* Its own card below the zen panel — the run is live state, not session detail, so it
+   comes and goes on its own while the panel above stays put. */
+.workflow-live-section {
+  margin-top: 10px;
+  padding: 10px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  font-size: 11px;
+}
+
+.wf-live {
+  cursor: pointer;
+}
+
+.wf-live-name {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wf-live-bar {
+  margin: 6px 0;
+}
+
+.wf-live-phases {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+/* A phase reads as one chip, so the dot goes in ::before rather than costing a span. */
+.wf-live-phase {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 1px 6px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  font-size: 10px;
+  color: var(--text-secondary);
+}
+
+.wf-live-phase::before {
+  content: '';
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--text-muted);
+}
+
+.wf-live-phase.running::before {
+  background: var(--accent);
+  animation: pulse 2s ease-in-out infinite;
+}
+
+.wf-live-phase.done::before {
+  background: var(--ok, #3fb950);
+}
+
+.wf-live-phase.done {
+  color: var(--text-muted);
+}
+
+.wf-live-phase-count {
+  font-family: var(--font-mono);
+}
+
+.wf-live-running {
+  margin-top: 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-muted);
+}
+
+.panel-section-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 6px;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.panel-section-header svg {
+  width: 12px;
+  height: 12px;
+}
+
+.panel-section-count {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 0 6px;
+  font-size: 10px;
+  color: var(--text-secondary);
+}
+
+/* The artifact title is a URL away from the reader, so it truncates where a file
+   name, which the linked-doc row shows in full, does not. */
+.artifact-link {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.linked-docs-empty,
+.zen-panel-empty {
   color: var(--text-muted);
   font-size: 11px;
   font-style: italic;
@@ -4122,6 +4422,7 @@ body.light {
   --bg-surface: #efede9;
   --bg-elevated: #fbfaf9;
   --bg-hover: #d2d0cc;
+  --session-active-bg: var(--bg-elevated);
   --border: #cfcbc4;
   --text-primary: #0a0a0a;
   --text-secondary: #444444;
@@ -4416,6 +4717,16 @@ body.light .msg-assistant .msg-text {
   padding-right: 8px;
 }
 
+#preview-modal-body .preview-image {
+  display: block;
+  max-width: 100%;
+  max-height: 70vh;
+  margin: 0 auto;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--bg-hover);
+}
+
 #preview-modal-meta {
   margin-top: 12px;
   font-size: 11px;
@@ -4459,6 +4770,29 @@ body.light .msg-assistant .msg-text {
   padding-right: 0;
 }
 
+/* Source is read line by line, so it keeps its own line breaks and scrolls sideways
+   instead of inheriting the body's `word-break: break-word`. */
+.preview-source {
+  margin: 0;
+  padding: 10px 12px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  overflow-x: auto;
+  font-family: var(--mono);
+  font-size: 12px;
+  line-height: 1.55;
+  white-space: pre;
+  word-break: normal;
+  tab-size: 4;
+}
+
+.preview-source code {
+  background: none;
+  padding: 0;
+  font: inherit;
+}
+
 .preview-html-frame {
   width: 100%;
   height: 100%;
@@ -5450,6 +5784,7 @@ select.form-input option:checked {
     --bg-surface: #efede9;
     --bg-elevated: #fbfaf9;
     --bg-hover: #d2d0cc;
+    --session-active-bg: var(--bg-elevated);
     --border: #cfcbc4;
     --text-primary: #0a0a0a;
     --text-secondary: #444444;
@@ -5613,7 +5948,8 @@ pre.mermaid svg {
 
 .project-group-header .group-chevron,
 .session-group-header .group-chevron,
-.sg-section-toggle .group-chevron {
+.sg-section-toggle .group-chevron,
+.scratch-folder-toggle .group-chevron {
   transition: transform 0.15s ease;
   flex-shrink: 0;
   display: block;
@@ -5621,7 +5957,8 @@ pre.mermaid svg {
 
 .project-group-header.collapsed .group-chevron,
 .session-group-header.collapsed .group-chevron,
-.sg-section-toggle.collapsed .group-chevron {
+.sg-section-toggle.collapsed .group-chevron,
+.scratch-folder-toggle.collapsed .group-chevron {
   transform: rotate(-90deg);
 }