claude-code-kanban 4.21.0 → 4.22.0

package/public/style.css

@@ -29,6 +29,22 @@
   --team-dim: rgba(96, 165, 250, 0.18);
   --plan: #86a886;
   --plan-dim: rgba(134, 168, 134, 0.18);
+  --ansi-black: var(--text-muted);
+  --ansi-red: #e06c66;
+  --ansi-green: #3ecf8e;
+  --ansi-yellow: #e0b04a;
+  --ansi-blue: #60a5fa;
+  --ansi-magenta: #c98ce0;
+  --ansi-cyan: #4dc9c9;
+  --ansi-white: var(--text-secondary);
+  --ansi-bright-black: var(--text-tertiary);
+  --ansi-bright-red: #ff8a84;
+  --ansi-bright-green: #5ee3a8;
+  --ansi-bright-yellow: #f0c56a;
+  --ansi-bright-blue: #8bbdfb;
+  --ansi-bright-magenta: #e0a8f0;
+  --ansi-bright-cyan: #7ddede;
+  --ansi-bright-white: var(--text-primary);
   --mono: 'IBM Plex Mono', monospace;
   --serif: 'Playfair Display', serif;
   --card-gap: 7px;
@@ -623,7 +639,12 @@ body::before {
   text-overflow: ellipsis;
 }
 
+/* inline-flex so only the text takes the click — a full-width row would swallow clicks
+   meant for the card itself */
 .session-goal {
+  display: inline-flex;
+  align-items: baseline;
+  max-width: 100%;
   font-size: 10px;
   margin-top: var(--card-gap-tight);
   white-space: nowrap;
@@ -635,8 +656,13 @@ body::before {
 .session-goal .session-goal-icon {
   margin-right: 3px;
   font-weight: 700;
+  flex-shrink: 0;
+}
+.session-goal .session-goal-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-.session-goal:hover {
+.session-goal:hover .session-goal-text {
   text-decoration: underline;
   text-underline-offset: 2px;
 }
@@ -2299,16 +2325,18 @@ body::before {
   align-items: center;
   margin-bottom: 16px;
 }
-.info-row-actions {
+/* Shared hover-reveal icon-button group, also used by the linked-doc rows. Each host
+   supplies its own reveal trigger — the base only sets the resting opacity. */
+.row-actions {
   display: flex;
   gap: 4px;
   opacity: 0.3;
   transition: opacity 0.15s ease;
 }
-.info-grid:hover .info-row-actions {
+.info-grid:hover .row-actions {
   opacity: 1;
 }
-.info-row-actions button {
+.row-actions button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -2325,18 +2353,18 @@ body::before {
     border-color 0.1s ease,
     color 0.1s ease;
 }
-.info-row-actions button:hover {
+.row-actions button:hover {
   background: var(--bg-hover);
   border-color: var(--accent);
   color: var(--accent-text);
 }
-.info-row-actions button svg {
+.row-actions button svg {
   width: 12px;
   height: 12px;
   display: block;
 }
 @media (hover: none) {
-  .info-row-actions {
+  .row-actions {
     opacity: 1;
   }
 }
@@ -3735,36 +3763,29 @@ body::before {
   min-width: 0;
 }
 
-/* margin-left:auto pins every × to the same right edge, so they read as a column
-   however long the names in between are. */
-.linked-doc-remove {
+/* 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 {
   margin-left: auto;
   align-self: center;
   flex-shrink: 0;
-  width: 16px;
-  height: 16px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  background: none;
-  border: none;
-  border-radius: 3px;
-  color: var(--text-muted);
-  font-family: var(--mono);
-  font-size: 14px;
-  line-height: 1;
-  cursor: pointer;
-  opacity: 0.45;
-  transition: all 0.15s ease;
 }
 
-.linked-doc-item:hover .linked-doc-remove {
+.linked-doc-item:hover .linked-doc-actions {
   opacity: 1;
 }
 
-.linked-doc-remove:hover {
+/* The × is a glyph, not an svg, so .row-actions button svg does not size it. */
+.linked-doc-remove {
+  font-family: var(--mono);
+  font-size: 15px;
+  line-height: 1;
+}
+
+.linked-doc-actions .linked-doc-remove:hover {
   background: var(--danger-dim);
+  border-color: var(--danger);
   color: var(--danger);
 }
 
@@ -3876,6 +3897,136 @@ body::before {
 
 /* #endregion */
 
+/* #region ANSI */
+
+/* SGR colours from terminal output, consumed by every pane that renders it.
+   The palette itself lives with the other colour tokens in VARIABLES /
+   LIGHT_THEME / MEDIA_QUERIES, so it flips with the theme like everything else. */
+.ansi-fg-black {
+  color: var(--ansi-black);
+}
+.ansi-fg-red {
+  color: var(--ansi-red);
+}
+.ansi-fg-green {
+  color: var(--ansi-green);
+}
+.ansi-fg-yellow {
+  color: var(--ansi-yellow);
+}
+.ansi-fg-blue {
+  color: var(--ansi-blue);
+}
+.ansi-fg-magenta {
+  color: var(--ansi-magenta);
+}
+.ansi-fg-cyan {
+  color: var(--ansi-cyan);
+}
+.ansi-fg-white {
+  color: var(--ansi-white);
+}
+.ansi-fg-bright-black {
+  color: var(--ansi-bright-black);
+}
+.ansi-fg-bright-red {
+  color: var(--ansi-bright-red);
+}
+.ansi-fg-bright-green {
+  color: var(--ansi-bright-green);
+}
+.ansi-fg-bright-yellow {
+  color: var(--ansi-bright-yellow);
+}
+.ansi-fg-bright-blue {
+  color: var(--ansi-bright-blue);
+}
+.ansi-fg-bright-magenta {
+  color: var(--ansi-bright-magenta);
+}
+.ansi-fg-bright-cyan {
+  color: var(--ansi-bright-cyan);
+}
+.ansi-fg-bright-white {
+  color: var(--ansi-bright-white);
+}
+.ansi-bg-black {
+  background: var(--ansi-black);
+}
+.ansi-bg-red {
+  background: var(--ansi-red);
+}
+.ansi-bg-green {
+  background: var(--ansi-green);
+}
+.ansi-bg-yellow {
+  background: var(--ansi-yellow);
+}
+.ansi-bg-blue {
+  background: var(--ansi-blue);
+}
+.ansi-bg-magenta {
+  background: var(--ansi-magenta);
+}
+.ansi-bg-cyan {
+  background: var(--ansi-cyan);
+}
+.ansi-bg-white {
+  background: var(--ansi-white);
+}
+.ansi-bg-bright-black {
+  background: var(--ansi-bright-black);
+}
+.ansi-bg-bright-red {
+  background: var(--ansi-bright-red);
+}
+.ansi-bg-bright-green {
+  background: var(--ansi-bright-green);
+}
+.ansi-bg-bright-yellow {
+  background: var(--ansi-bright-yellow);
+}
+.ansi-bg-bright-blue {
+  background: var(--ansi-bright-blue);
+}
+.ansi-bg-bright-magenta {
+  background: var(--ansi-bright-magenta);
+}
+.ansi-bg-bright-cyan {
+  background: var(--ansi-bright-cyan);
+}
+.ansi-bg-bright-white {
+  background: var(--ansi-bright-white);
+}
+.ansi-bg {
+  padding: 0 1px;
+  border-radius: 2px;
+}
+.ansi-inverse {
+  background: var(--text-primary);
+  color: var(--bg-deep);
+}
+.ansi-bold {
+  font-weight: 700;
+}
+.ansi-dim {
+  opacity: 0.65;
+}
+.ansi-italic {
+  font-style: italic;
+}
+.ansi-underline {
+  text-decoration: underline;
+}
+.ansi-strike {
+  text-decoration: line-through;
+}
+.ansi-underline.ansi-strike {
+  text-decoration: underline line-through;
+}
+
+/* #endregion */
+
 /* #region LIGHT_THEME */
 body.light {
   --bg-deep: #e8e6e3;
@@ -3898,6 +4049,18 @@ body.light {
   --danger: #c0392b;
   --danger-dim: rgba(192, 57, 43, 0.15);
   --plan: #5a7a5a;
+  --ansi-red: #c0392b;
+  --ansi-green: #1a8a5a;
+  --ansi-yellow: #a8791a;
+  --ansi-blue: #2b6cb0;
+  --ansi-magenta: #8e44ad;
+  --ansi-cyan: #1a7a7a;
+  --ansi-bright-red: #e05548;
+  --ansi-bright-green: #25a86f;
+  --ansi-bright-yellow: #c2921f;
+  --ansi-bright-blue: #3b82d6;
+  --ansi-bright-magenta: #a855c9;
+  --ansi-bright-cyan: #2a9a9a;
   --plan-dim: rgba(90, 122, 90, 0.15);
 }
 
@@ -4827,6 +4990,14 @@ select.form-input option:checked {
   transition: all 0.15s;
 }
 
+/* Icon buttons sit beside text ones here, and copyWithFeedback swaps the glyph for a
+   checkmark, so both svgs need a size or the button jumps on click. */
+.storage-item-actions button svg {
+  width: 12px;
+  height: 12px;
+  display: block;
+}
+
 .storage-item-actions button:hover {
   background: var(--bg-hover);
   color: var(--text-primary);
@@ -4915,6 +5086,18 @@ select.form-input option:checked {
     --danger: #c0392b;
     --danger-dim: rgba(192, 57, 43, 0.15);
     --plan: #5a7a5a;
+    --ansi-red: #c0392b;
+    --ansi-green: #1a8a5a;
+    --ansi-yellow: #a8791a;
+    --ansi-blue: #2b6cb0;
+    --ansi-magenta: #8e44ad;
+    --ansi-cyan: #1a7a7a;
+    --ansi-bright-red: #e05548;
+    --ansi-bright-green: #25a86f;
+    --ansi-bright-yellow: #c2921f;
+    --ansi-bright-blue: #3b82d6;
+    --ansi-bright-magenta: #a855c9;
+    --ansi-bright-cyan: #2a9a9a;
     --plan-dim: rgba(90, 122, 90, 0.15);
   }
 
@@ -5048,23 +5231,29 @@ pre.mermaid svg {
   border-radius: 4px;
 }
 
-.project-group-header .group-chevron {
+.project-group-header .group-chevron,
+.session-group-header .group-chevron {
   transition: transform 0.15s ease;
   flex-shrink: 0;
   display: block;
 }
 
-.project-group-header.collapsed .group-chevron {
+.project-group-header.collapsed .group-chevron,
+.session-group-header.collapsed .group-chevron {
   transform: rotate(-90deg);
 }
 
-.project-group-header .group-name {
-  flex: 1;
+.project-group-header .group-name,
+.session-group-header .group-name {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.project-group-header .group-name {
+  flex: 1;
+}
+
 .project-view-btn {
   color: var(--text-muted);
   cursor: pointer;
@@ -5179,24 +5368,30 @@ pre.mermaid svg {
   letter-spacing: 0.3px;
 }
 
-.pinned-ungroup-btn {
-  margin-left: auto;
-  font-size: 14px;
-  line-height: 1;
+.pinned-ungroup-btn,
+.sg-action {
   color: var(--text-muted);
   cursor: pointer;
-  padding: 0 2px;
+  line-height: 1;
   opacity: 0;
   transition:
     opacity 0.15s,
     color 0.15s;
 }
 
-.pinned-sub-header:hover .pinned-ungroup-btn {
+.pinned-ungroup-btn {
+  margin-left: auto;
+  font-size: 14px;
+  padding: 0 2px;
+}
+
+.pinned-sub-header:hover .pinned-ungroup-btn,
+.session-group-header:hover .sg-action {
   opacity: 1;
 }
 
-.pinned-ungroup-btn:hover {
+.pinned-ungroup-btn:hover,
+.sg-action:hover {
   color: var(--accent);
 }
 
@@ -5294,3 +5489,168 @@ pre.mermaid svg {
   border: 1px solid var(--text-muted);
 }
 /* #endregion */
+
+/* #region SESSION_GROUPS */
+.sg-section-label {
+  padding: 10px 10px 2px;
+  margin-top: 10px;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.6px;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  user-select: none;
+}
+
+.sg-section-label:first-child {
+  margin-top: 0;
+}
+
+.session-group-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 10px;
+  margin-top: 2px;
+  cursor: pointer;
+  user-select: none;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-primary);
+  border-radius: 4px;
+  background: transparent;
+}
+
+.session-group-header:hover {
+  background: var(--bg-hover);
+}
+
+.session-group-header.kb-selected {
+  outline: 1px solid var(--accent);
+  outline-offset: -1px;
+}
+
+.sg-sub-label {
+  padding: 8px 10px 2px 8px;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  user-select: none;
+}
+
+.sg-name-input {
+  flex: 1;
+  min-width: 0;
+  padding: 1px 4px;
+  font: inherit;
+  color: var(--text-primary);
+  background: var(--bg-deep);
+  border: 1px solid var(--accent);
+  border-radius: 3px;
+  outline: none;
+}
+
+.sg-action.sg-rename {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+}
+
+.sg-action.sg-delete {
+  font-size: 15px;
+  padding: 0 2px;
+}
+
+.session-group-sessions {
+  display: block;
+  margin-left: 6px;
+}
+
+.session-group-sessions.collapsed {
+  display: none;
+}
+
+.sg-empty {
+  padding: 10px 8px;
+  font-size: 11px;
+  color: var(--text-muted);
+  border: 1px dashed var(--border);
+  border-radius: 4px;
+  margin: 4px 2px;
+  text-align: center;
+}
+
+.project-group-header.sg-nested {
+  margin-top: 4px;
+  padding-top: 4px;
+}
+
+/* Drag feedback */
+.session-item.sg-dragging,
+.project-group-header.sg-dragging,
+.session-group-header.sg-dragging {
+  opacity: 0.45;
+}
+
+.sg-drop-over {
+  outline: 1px dashed var(--accent);
+  outline-offset: -1px;
+  background: var(--accent-dim);
+}
+
+.sessions-list.sg-dragging-active .sg-ungroup-zone {
+  border: 1px dashed var(--accent);
+  border-radius: 4px;
+  color: var(--text-primary);
+}
+
+/* Move-to-group menu (right-click / long-press) */
+.sg-menu {
+  position: fixed;
+  z-index: 3000;
+  min-width: 180px;
+  max-width: 260px;
+  padding: 4px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  box-shadow: 0 8px 24px rgb(0 0 0 / 35%);
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.sg-menu-label {
+  padding: 6px 8px 4px;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-muted);
+}
+
+.sg-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 6px 8px;
+  border: none;
+  background: none;
+  border-radius: 4px;
+  font: inherit;
+  font-size: 12px;
+  color: var(--text-primary);
+  text-align: left;
+  cursor: pointer;
+}
+
+.sg-menu-item:hover {
+  background: var(--bg-hover);
+}
+
+.sg-menu-remove {
+  color: var(--text-secondary);
+}
+/* #endregion */