claude-code-kanban 4.29.0 → 4.31.0

package/public/style.css

@@ -16,7 +16,7 @@
   --text-muted: #7d808a;
   --accent: #e86f33;
   --accent-text: #f0a070;
-  --accent-dim: rgba(232, 111, 51, 0.22);
+  --accent-dim: rgba(232, 111, 51, 0.25);
   --accent-glow: rgba(232, 111, 51, 0.55);
   --gold: #d9b667;
   --success: #3ecf8e;
@@ -456,14 +456,14 @@ body::before {
   gap: 8px;
   padding: 14px 16px 10px 20px;
   font-size: 11px;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.12em;
   color: var(--text-muted);
 }
 
 .section-header-label {
   flex: 0 0 auto;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
 }
 
 /* Non-default filters, spelled out in the header so folding them into the popover
@@ -475,9 +475,7 @@ body::before {
   white-space: nowrap;
   text-overflow: ellipsis;
   font-size: 10px;
-  font-weight: 400;
   letter-spacing: 0.02em;
-  text-transform: none;
   color: var(--accent-text);
 }
 
@@ -545,15 +543,6 @@ body::before {
   display: block;
 }
 
-.filter-row {
-  display: flex;
-  gap: 5px;
-}
-
-.filter-row + .filter-row {
-  margin-top: 5px;
-}
-
 .filter-dropdown {
   flex: 1;
   appearance: none;
@@ -577,28 +566,182 @@ body::before {
   border-color: var(--border);
 }
 
-/* A filter holding a non-default value tints toward the ember, so it reads as "active"
-   before you read the value. Border and text only — the fill never floods. */
-.filter-dropdown.non-default {
-  color: var(--accent-text);
-  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
+.filter-dropdown option {
+  background: var(--bg-surface);
+  color: var(--text-primary);
 }
 
-.filter-dropdown.non-default:hover {
-  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
+.filter-dropdown:focus,
+.pf-field:focus-within {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px var(--accent-dim);
 }
 
-.filter-dropdown option {
-  background: var(--bg-surface);
+/* The project box: path field with the 24h switch set into its right end. */
+.pf-field {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 4px 0 9px;
+  background: var(--bg-deep);
+  border: 1px solid transparent;
+  border-radius: 6px;
+}
+
+.pf-icon {
+  flex: none;
+  width: 14px;
+  height: 14px;
+  color: var(--text-muted);
+}
+
+.pf-input {
+  flex: 1;
+  min-width: 0;
+  padding: 8px 0;
+  background: none;
+  border: none;
+  outline: none;
+  font-family: var(--mono);
+  font-size: 12px;
   color: var(--text-primary);
 }
 
-.filter-dropdown:focus {
+.pf-input::placeholder {
+  color: var(--text-muted);
+}
+
+.pf-recent {
+  flex: none;
+  padding: 3px 7px;
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  font-family: var(--mono);
+  font-size: 10.5px;
+  color: var(--text-muted);
+  cursor: pointer;
+}
+
+.pf-recent:hover {
+  color: var(--text-secondary);
+}
+
+.pf-recent[aria-pressed='true'] {
+  background: var(--accent-dim);
+  border-color: transparent;
+  color: var(--accent-text);
+}
+
+.pf-recent:focus-visible,
+.pf-seg button:focus-visible {
   outline: none;
-  border-color: var(--accent);
   box-shadow: 0 0 0 2px var(--accent-dim);
 }
 
+/* Name first, folder after it, age last. The folder clips from its left end, so the part
+   next to the name stays readable. */
+.pf-list {
+  list-style: none;
+  margin: 4px 0 0;
+  padding: 0;
+}
+
+.pf-opt {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: baseline;
+  gap: 8px;
+  padding: 5px 8px;
+  border-radius: 5px;
+  font-family: var(--mono);
+  cursor: pointer;
+}
+
+.pf-opt:hover,
+.pf-opt.hl {
+  background: var(--bg-hover);
+}
+
+.pf-name {
+  font-size: 12px;
+  color: var(--text-primary);
+  white-space: nowrap;
+}
+
+.pf-dir,
+.pf-age {
+  font-size: 10.5px;
+  color: var(--text-muted);
+  white-space: nowrap;
+}
+
+.pf-dir {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  direction: rtl;
+  text-align: left;
+}
+
+.pf-opt mark {
+  background: none;
+  color: var(--accent-text);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+}
+
+.pf-opt[aria-selected='true']::before {
+  content: '';
+  position: absolute;
+  top: 5px;
+  bottom: 5px;
+  left: 0;
+  width: 2px;
+  background: var(--accent);
+}
+
+.pf-opt[aria-selected='true'] .pf-name {
+  color: var(--accent-text);
+}
+
+.pf-empty {
+  padding: 8px;
+  font-size: 11.5px;
+  color: var(--text-muted);
+}
+
+.pf-seg {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 4px;
+  margin-top: 6px;
+  padding-top: 6px;
+  border-top: 1px solid var(--border);
+}
+
+.pf-seg button {
+  padding: 6px;
+  background: none;
+  border: none;
+  border-radius: 5px;
+  font-family: var(--mono);
+  font-size: 11.5px;
+  color: var(--text-muted);
+  cursor: pointer;
+}
+
+.pf-seg button:hover {
+  color: var(--text-secondary);
+}
+
+.pf-seg button[aria-checked='true'] {
+  background: var(--bg-deep);
+  color: var(--text-primary);
+}
+
 /* #endregion */
 
 /* #region COLLAPSIBLE */
@@ -904,34 +1047,6 @@ body.booting .boot-splash {
   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;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  cursor: pointer;
-  color: var(--warning);
-}
-.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-text {
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}
-
 .session-item.plan-reveal {
   outline: 1.5px solid var(--plan);
   background: var(--plan-dim);
@@ -1189,6 +1304,28 @@ body.booting .boot-splash {
   color: var(--text-secondary);
 }
 
+.sidebar-footer .footer-version {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.sidebar-footer .footer-plugin-warning {
+  padding: 0;
+  border: none;
+  background: none;
+  font: inherit;
+  font-size: 11px;
+  line-height: 1;
+  color: var(--warning);
+  cursor: pointer;
+}
+
+.sidebar-footer .footer-plugin-warning:hover,
+.sidebar-footer .footer-plugin-warning:focus-visible {
+  filter: brightness(1.2);
+}
+
 .sidebar.collapsed {
   width: 48px;
 }
@@ -1231,14 +1368,140 @@ body.booting .boot-splash {
   color: var(--text-muted);
 }
 
-.empty-state svg {
-  width: 48px;
-  height: 48px;
+.idle-board {
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
+}
+
+.idle-ghost {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+  padding: 28px;
+  opacity: 0.55;
+  mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, transparent 25%, #000 75%);
+}
+
+.idle-ghost > div {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 44px 12px 12px;
+  border: 1px dashed var(--border);
+  border-radius: 12px;
+}
+
+.idle-ghost span {
+  height: 64px;
+  border: 1px solid var(--border);
+  border-radius: 9px;
+  background: var(--bg-surface);
+}
+
+.idle-ghost span:nth-child(2n) {
+  height: 92px;
+}
+
+.idle-glow {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+}
+
+.idle-glow span {
+  position: absolute;
+  width: 460px;
+  height: 460px;
+  border-radius: 50%;
+  background: radial-gradient(circle, var(--accent-dim), transparent 65%);
+  animation: idle-drift 22s ease-in-out infinite alternate;
+}
+
+.idle-glow span:first-child {
+  top: 12%;
+  left: 18%;
+}
+
+.idle-glow span + span {
+  right: 14%;
+  bottom: 8%;
+  width: 360px;
+  height: 360px;
+  animation-duration: 28s;
+  animation-direction: alternate-reverse;
+}
+
+@keyframes idle-drift {
+  to {
+    transform: translate(90px, 50px) scale(1.15);
+  }
+}
+
+.idle-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+
+.idle-clawd {
+  position: relative;
+  padding-bottom: 10px;
+  margin-bottom: 6px;
+}
+
+.idle-clawd .clawd {
+  display: block;
+  animation: idle-float 3.2s ease-in-out infinite;
+}
+
+.idle-clawd::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  width: 44px;
+  height: 6px;
+  margin-left: -22px;
+  border-radius: 50%;
+  background: var(--text-muted);
+  opacity: 0.25;
+  animation: idle-shadow 3.2s ease-in-out infinite;
+}
+
+@keyframes idle-float {
+  50% {
+    transform: translateY(-6px);
+  }
+}
+
+@keyframes idle-shadow {
+  50% {
+    transform: scaleX(0.75);
+    opacity: 0.15;
+  }
+}
+
+.idle-title {
+  font-size: 14px;
+  color: var(--text-secondary);
+}
+
+.idle-hint span {
   opacity: 0.5;
 }
 
-.empty-state p {
-  font-size: 13px;
+@media (prefers-reduced-motion: reduce) {
+  .idle-glow span,
+  .idle-clawd .clawd,
+  .idle-clawd::after {
+    animation: none;
+  }
 }
 
 /* #endregion */
@@ -1681,12 +1944,6 @@ body.booting .boot-splash {
   color: var(--text-tertiary);
 }
 
-.task-session {
-  font-size: 12px;
-  color: var(--accent);
-  margin-top: 4px;
-}
-
 .task-active {
   display: flex;
   align-items: center;
@@ -2613,35 +2870,6 @@ body.booting .boot-splash {
   border-top: 1px solid var(--border);
 }
 
-.info-goal-card {
-  margin: 12px 0;
-  padding: 10px 14px;
-  background: var(--bg-elevated);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-}
-.info-goal-head {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: var(--text-muted);
-}
-.info-goal-icon {
-  color: var(--warning);
-}
-.info-goal-text {
-  margin-top: 6px;
-  font-size: 13px;
-  line-height: 1.45;
-  color: var(--text-primary);
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
 .info-grid {
   display: grid;
   grid-template-columns: auto 1fr auto;
@@ -3002,6 +3230,16 @@ body.booting .boot-splash {
 .message-panel.msg-expanded-wide {
   width: 60vw;
 }
+.message-panel.full-width {
+  left: var(--sidebar-edge, 0);
+  width: auto;
+}
+.message-panel.full-width .panel-resize-handle {
+  display: none;
+}
+#message-panel-full-btn.active {
+  color: var(--accent);
+}
 .message-panel-header {
   padding: 16px 20px;
   display: flex;
@@ -3421,6 +3659,28 @@ body.booting .boot-splash {
   opacity: 1;
   transform: translateY(0);
 }
+.toast.has-action.visible {
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  max-width: min(480px, calc(100vw - 32px));
+  overflow-wrap: anywhere;
+}
+.toast-action {
+  flex-shrink: 0;
+  font: inherit;
+  font-weight: 600;
+  color: var(--accent-text);
+  background: transparent;
+  border: 1px solid var(--accent);
+  border-radius: 4px;
+  padding: 2px 10px;
+  cursor: pointer;
+}
+.toast-action:hover {
+  background: var(--accent-dim);
+}
 .toast.toast-success {
   border-color: var(--success);
   color: var(--success);
@@ -4499,6 +4759,21 @@ body.booting .boot-splash {
   text-decoration-style: dashed;
 }
 
+.linked-doc-item.is-url .linked-doc-link {
+  flex-shrink: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.linked-doc-external {
+  flex-shrink: 0;
+  color: var(--text-muted);
+  font-size: 10px;
+  margin-left: -4px;
+}
+
 /* A section of the session panel: linked documents, artifacts. */
 .panel-section {
   margin-bottom: 16px;
@@ -4879,11 +5154,11 @@ body.light {
   --session-active-bg: var(--bg-elevated);
   --border: #cfcbc4;
   --text-primary: #0a0a0a;
-  --text-secondary: #444444;
-  --text-tertiary: #666666;
-  --text-muted: #888888;
+  --text-secondary: #2c2c2c;
+  --text-tertiary: #565656;
+  --text-muted: #767676;
   --accent-text: #a0501c;
-  --accent-dim: rgba(232, 111, 51, 0.18);
+  --accent-dim: rgba(184, 90, 32, 0.18);
   --accent-glow: rgba(232, 111, 51, 0.5);
   --gold: #a8842f;
   --success: #1a8a5a;
@@ -5749,6 +6024,10 @@ select.form-input option:checked {
   color: var(--text-primary);
 }
 
+.sp-row:not(.outside) + .sp-row.outside {
+  margin-top: 8px;
+}
+
 .sp-row.current .sp-name {
   color: var(--accent-text);
 }
@@ -6467,10 +6746,11 @@ select.form-input option:checked {
     --session-active-bg: var(--bg-elevated);
     --border: #cfcbc4;
     --text-primary: #0a0a0a;
-    --text-secondary: #444444;
-    --text-tertiary: #666666;
-    --text-muted: #888888;
-    --accent-dim: rgba(232, 111, 51, 0.18);
+    --text-secondary: #2c2c2c;
+    --text-tertiary: #565656;
+    --text-muted: #767676;
+    --accent-text: #a0501c;
+    --accent-dim: rgba(184, 90, 32, 0.18);
     --accent-glow: rgba(232, 111, 51, 0.5);
     --gold: #a8842f;
     --success: #1a8a5a;
@@ -7024,8 +7304,10 @@ pre.mermaid svg {
   cursor: pointer;
 }
 
-.sg-menu-item:hover {
+.sg-menu-item:hover,
+.sg-menu-item:focus-visible {
   background: var(--bg-hover);
+  outline: none;
 }
 
 .sg-menu-remove {

package/public/sw.js

@@ -1,5 +1,5 @@
 const CACHE_NAME = 'cc-kanban-v2';
-const PRECACHE_URLS = ['/', '/style.css', '/app.js'];
+const PRECACHE_URLS = ['/', '/style.css', '/project-match.js', '/link-url.js', '/app.js'];
 
 let cachePromise = null;
 function getCache() {

package/public/themes.css

@@ -38,6 +38,55 @@ body.light .theme-swatch-vitesse { --sw-bg: #f7f7f7; --sw-accent: #1c6b48; --sw-
 .theme-swatch-synthwave { --sw-bg: #262335; --sw-accent: #ff7edb; --sw-ink: #ffffff; --sw-border: #495495; }
 body.light .theme-swatch-synthwave { --sw-bg: #efecf6; --sw-accent: #c936a6; --sw-ink: #241b2f; --sw-border: #c5bcdd; }
 
+/* Ember */
+body:not([data-color-theme]):not(.light) {
+  --accent: #e86f33;
+  --accent-text: #f0a070;
+  --accent-dim: rgba(232,111,51,0.25);
+  --accent-glow: rgba(232, 111, 51, 0.55);
+  --bg-deep: #101114;
+  --bg-surface: #16181c;
+  --bg-elevated: #1e2025;
+  --bg-hover: #282a30;
+  --border: #363840;
+  --text-primary: #f0f1f3;
+  --text-secondary: #c2c4c9;
+  --text-tertiary: #9a9da5;
+  --text-muted: #7d808a;
+}
+body.light:not([data-color-theme]) {
+  --accent: #e86f33;
+  --accent-text: #a0501c;
+  --accent-dim: rgba(184,90,32,0.18);
+  --accent-glow: rgba(232, 111, 51, 0.5);
+  --bg-deep: #e8e6e3;
+  --bg-surface: #efede9;
+  --bg-elevated: #fbfaf9;
+  --bg-hover: #d2d0cc;
+  --border: #cfcbc4;
+  --text-primary: #0a0a0a;
+  --text-secondary: #2c2c2c;
+  --text-tertiary: #565656;
+  --text-muted: #767676;
+}
+@media (prefers-color-scheme: light) {
+body:not(.dark-forced):not([data-color-theme]) {
+  --accent: #e86f33;
+  --accent-text: #a0501c;
+  --accent-dim: rgba(184,90,32,0.18);
+  --accent-glow: rgba(232, 111, 51, 0.5);
+  --bg-deep: #e8e6e3;
+  --bg-surface: #efede9;
+  --bg-elevated: #fbfaf9;
+  --bg-hover: #d2d0cc;
+  --border: #cfcbc4;
+  --text-primary: #0a0a0a;
+  --text-secondary: #2c2c2c;
+  --text-tertiary: #565656;
+  --text-muted: #767676;
+}
+}
+
 /* Gruvbox */
 body[data-color-theme="gruvbox"]:not(.light) {
   --accent: #fe8019;