claude-code-kanban 4.7.1 → 4.9.0

package/public/style.css

@@ -472,6 +472,8 @@ body::before {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  /* reserve room for the absolutely-positioned pin button at top-right */
+  padding-right: 22px;
 }
 
 .session-indicators .pulse {
@@ -900,6 +902,76 @@ body::before {
   border-color: #ef4444;
 }
 
+/* theme picker: palette icon button + custom popover with per-theme swatches
+   (swatch colors are generated into themes.css) */
+.theme-picker {
+  position: relative;
+}
+.theme-menu {
+  display: none;
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 100;
+  min-width: 170px;
+  max-height: 70vh;
+  overflow-y: auto;
+  padding: 4px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+}
+.theme-menu.open {
+  display: block;
+}
+.theme-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 8px;
+  border: 0;
+  border-radius: 6px;
+  background: none;
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  text-align: left;
+  cursor: pointer;
+}
+.theme-menu-item:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+.theme-menu-item.on {
+  color: var(--accent-text);
+}
+/* 3-dot palette preview: surface, accent, ink (colors from themes.css vars) */
+.theme-swatch {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  flex: 0 0 auto;
+}
+.theme-swatch i {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  border: 1px solid var(--sw-border);
+}
+.theme-swatch .sw-bg {
+  background: var(--sw-bg);
+}
+.theme-swatch .sw-accent {
+  background: var(--sw-accent);
+}
+.theme-swatch .sw-ink {
+  background: var(--sw-ink);
+}
+
 /* #endregion */
 
 /* #region KANBAN */
@@ -2101,7 +2173,63 @@ body::before {
   overflow: hidden;
 }
 .msg-assistant .msg-text {
-  color: var(--accent-text);
+  color: var(--text-primary);
+}
+.msg-text-md {
+  display: block; /* override .msg-text -webkit-box clamp */
+  -webkit-line-clamp: none;
+  white-space: normal; /* override .msg-text pre-wrap */
+  font-size: 12px;
+}
+/* Element spacing/borders come from .rendered-md (also on .msg-md-content);
+   these are only the compact-feed deltas: smaller type + code/quote chrome. */
+.msg-text-md table,
+.msg-text-md pre,
+.msg-text-md code {
+  font-size: 11px;
+}
+.msg-text-md h1,
+.msg-text-md h2,
+.msg-text-md h3,
+.msg-text-md h4,
+.msg-text-md h5,
+.msg-text-md h6 {
+  font-size: 12px;
+  font-weight: 600;
+}
+.msg-text-md pre {
+  padding: 6px 8px;
+  background: var(--bg-hover);
+  border-radius: 4px;
+  overflow-x: auto;
+}
+.msg-text-md blockquote {
+  padding-left: 8px;
+  border-left: 2px solid var(--border);
+  color: var(--text-secondary);
+}
+.msg-md-content > :first-child {
+  margin-top: 0;
+}
+.msg-md-content > :last-child {
+  margin-bottom: 0;
+}
+/* Soften just the bottom edge of a truncated preview so it reads as "continues"
+   without obscuring the last line of text. */
+.msg-md-content.is-truncated {
+  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 0.85em), transparent);
+  mask-image: linear-gradient(to bottom, #000 calc(100% - 0.85em), transparent);
+}
+.msg-md-more {
+  display: block;
+  width: fit-content;
+  margin: 3px auto 0 0;
+  padding: 1px 8px;
+  font-size: 10px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  background: var(--bg-hover);
+  border-radius: 9px;
 }
 .msg-tool .msg-text {
   color: var(--text-secondary);
@@ -2147,6 +2275,12 @@ body::before {
 .msg-agent-link:hover {
   opacity: 1;
 }
+.msg-agent-usage {
+  color: var(--text-muted);
+  font-size: 10px;
+  opacity: 0.55;
+  margin-left: 6px;
+}
 .msg-pin-btn {
   flex-shrink: 0;
   background: none;
@@ -2820,9 +2954,7 @@ body::before {
 .agent-card.selected:hover {
   background: var(--bg-elevated);
   border-color: var(--accent);
-  box-shadow:
-    0 0 0 1px var(--accent-dim),
-    0 0 12px var(--accent-dim);
+  box-shadow: 0 0 0 1px var(--accent-dim);
 }
 .agent-card.fading {
   opacity: 0.4;
@@ -2858,18 +2990,18 @@ body::before {
   gap: 5px;
 }
 .agent-dot {
-  width: 7px;
-  height: 7px;
+  width: 5px;
+  height: 5px;
   border-radius: 50%;
   flex-shrink: 0;
 }
 .agent-dot.active {
   background: var(--success);
-  box-shadow: 0 0 6px var(--success);
+  box-shadow: 0 0 4px color-mix(in srgb, var(--success) 50%, transparent);
 }
 .agent-dot.idle {
   background: var(--warning);
-  box-shadow: 0 0 6px var(--warning);
+  box-shadow: 0 0 4px color-mix(in srgb, var(--warning) 50%, transparent);
 }
 .agent-dot.stopped {
   background: var(--text-muted);
@@ -2912,6 +3044,10 @@ body::before {
   color: var(--warning);
   animation: agent-badge-pulse 1.6s ease-in-out infinite;
 }
+.agent-badge-active {
+  color: var(--accent, var(--text-secondary));
+  animation: agent-badge-pulse 1.6s ease-in-out infinite;
+}
 @keyframes agent-badge-pulse {
   0%,
   100% {