claude-code-kanban 4.0.0 → 4.2.0

package/public/index.html

@@ -527,6 +527,12 @@
           <button id="session-info-cost-btn" class="icon-btn" style="display:none" title="Open in Cost" onclick="openCost(_infoModalSessionId)">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"/><path d="M12 18V6"/></svg>
           </button>
+          <button id="session-info-marketplace-btn" class="icon-btn" style="display:none" title="Open in Marketplace" onclick="openMarketplaceForInfoModal()">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 01-8 0"/></svg>
+          </button>
+          <button id="session-info-memory-btn" class="icon-btn" style="display:none" title="Open in Memory" onclick="openMemoryForInfoModal()">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>
+          </button>
           <button class="modal-close" aria-label="Close dialog" onclick="closeTeamModal()">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
               <path d="M18 6L6 18M6 6l12 12"/>
@@ -598,6 +604,25 @@
     </div>
   </div>
 
+  <!-- Loop Wakeups Modal -->
+  <div id="loop-modal" class="modal-overlay" onclick="closeLoopModal()">
+    <div class="modal plan-modal" onclick="event.stopPropagation()">
+      <div class="modal-header">
+        <h3 id="loop-modal-title" class="modal-title" style="display:flex;align-items:center;gap:8px;">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:18px;height:18px;"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+          Loop activity
+        </h3>
+        <button class="modal-close" aria-label="Close dialog" onclick="closeLoopModal()">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
+        </button>
+      </div>
+      <div id="loop-modal-body" class="modal-body" style="overflow-y:auto;flex:0 1 auto;min-height:0;"></div>
+      <div class="modal-footer">
+        <button class="btn btn-primary" onclick="closeLoopModal()">Close</button>
+      </div>
+    </div>
+  </div>
+
   <div id="agent-modal" class="modal-overlay plan-modal-overlay" onclick="closeAgentModal()">
     <div class="modal plan-modal" onclick="event.stopPropagation()">
       <div class="modal-header">

package/public/style.css

@@ -724,6 +724,12 @@ body::before {
   font-weight: 600;
 }
 
+.sidebar-footer .footer-limits .footer-limit-reset {
+  color: var(--text-tertiary);
+  font-weight: 400;
+  opacity: 0.75;
+}
+
 .sidebar-footer a:hover {
   color: var(--text-secondary);
 }
@@ -1609,6 +1615,136 @@ body::before {
   border-color: var(--plan);
 }
 
+.loop-badge {
+  width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-deep);
+  border: 1px solid transparent;
+  border-radius: 4px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: all 0.15s ease;
+}
+
+.loop-badge:hover {
+  border-color: var(--accent, var(--plan));
+  color: var(--accent, var(--plan));
+}
+
+.loop-section-title {
+  margin: 14px 0 8px;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.loop-section-title:first-child {
+  margin-top: 4px;
+}
+
+.loop-count {
+  font-size: 11px;
+  font-weight: 500;
+  padding: 1px 6px;
+  border-radius: 10px;
+  background: var(--bg-elevated);
+  color: var(--text-secondary);
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+.loop-row {
+  padding: 12px 14px;
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg-elevated);
+  margin-bottom: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.loop-row:has(.loop-fire-pending) {
+  border-left-color: var(--accent, var(--plan));
+}
+
+.loop-headline {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.loop-headline-rel {
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.loop-headline-abs {
+  font-size: 12px;
+  color: var(--text-secondary);
+  margin-left: auto;
+}
+
+.loop-fire-pending {
+  color: var(--accent, var(--plan));
+}
+.loop-fire-fired {
+  color: var(--text-secondary);
+}
+.loop-fire-fired .loop-headline-rel {
+  font-weight: 500;
+}
+
+.loop-field {
+  display: grid;
+  grid-template-columns: 80px 1fr;
+  gap: 10px;
+  align-items: start;
+  font-size: 13px;
+  line-height: 1.45;
+}
+
+.loop-field-label {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-secondary);
+  padding-top: 3px;
+}
+
+.loop-field-val {
+  color: var(--text-primary);
+  word-break: break-word;
+}
+
+.loop-field-val code {
+  background: var(--bg);
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+}
+
+.loop-foot {
+  font-size: 11px;
+  color: var(--text-secondary);
+  padding-top: 6px;
+  border-top: 1px dashed var(--border);
+  font-variant-numeric: tabular-nums;
+}
+
 /* #endregion */
 
 /* #region OWNER_BADGE */
@@ -1743,6 +1879,55 @@ body::before {
   border-top: 1px solid var(--border);
 }
 
+.info-grid {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: 6px 12px;
+  align-items: center;
+  margin-bottom: 16px;
+}
+.info-row-actions {
+  display: flex;
+  gap: 4px;
+  opacity: 0.3;
+  transition: opacity 0.15s ease;
+}
+.info-grid:hover .info-row-actions {
+  opacity: 1;
+}
+.info-row-actions button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition:
+    background 0.1s ease,
+    border-color 0.1s ease,
+    color 0.1s ease;
+}
+.info-row-actions button:hover {
+  background: var(--bg-hover);
+  border-color: var(--accent);
+  color: var(--accent-text);
+}
+.info-row-actions button svg {
+  width: 12px;
+  height: 12px;
+  display: block;
+}
+@media (hover: none) {
+  .info-row-actions {
+    opacity: 1;
+  }
+}
+
 /* #endregion */
 
 /* #region OWNER_FILTER */
@@ -2107,6 +2292,11 @@ body::before {
   opacity: 1;
   color: var(--text-primary);
 }
+.agent-tab-copy svg {
+  width: 14px;
+  height: 14px;
+  display: block;
+}
 .toast {
   position: fixed;
   bottom: 16px;
@@ -2222,6 +2412,59 @@ body::before {
   border-radius: 3px;
   font-size: 11px;
 }
+.user-attach-chips {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+  margin-top: 4px;
+}
+.user-attach-chip {
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 10px;
+  background: var(--bg-hover);
+  color: var(--text-secondary);
+}
+.msg-text-muted {
+  color: var(--text-secondary);
+  font-size: 12px;
+}
+.user-attach-section {
+  margin-top: 12px;
+  padding-top: 10px;
+  border-top: 1px solid var(--border);
+}
+.user-attach-label {
+  font-size: 11px;
+  color: var(--text-secondary);
+  margin-bottom: 6px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.user-attach-images {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.user-attach-image {
+  max-width: 100%;
+  max-height: 480px;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+  background: var(--bg-hover);
+}
+.user-attach-toolresult {
+  margin-top: 6px;
+}
+.user-attach-toolresult > summary {
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--text-secondary);
+  padding: 4px 0;
+}
+.user-attach-toolresult > summary code {
+  font-size: 10px;
+}
 .msg-item.msg-system {
   border-left: 3px solid var(--border);
 }
@@ -2241,6 +2484,52 @@ body::before {
   border-left: 3px solid var(--border);
   opacity: 0.75;
 }
+.msg-item.msg-waiting {
+  border-left: 3px solid var(--warning, #f5a623);
+  background: color-mix(in srgb, var(--warning, #f5a623) 8%, transparent);
+  animation: msg-waiting-pulse 2s ease-in-out infinite;
+  cursor: pointer;
+}
+.msg-waiting-discard {
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  padding: 2px;
+  opacity: 0;
+  transition: opacity 0.15s;
+  margin-left: auto;
+  align-self: flex-start;
+  line-height: 0;
+}
+.msg-item.msg-waiting:hover .msg-waiting-discard {
+  opacity: 0.6;
+}
+.msg-waiting-discard:hover {
+  /* biome-ignore lint/complexity/noImportantStyles: override parent hover opacity */
+  opacity: 1 !important;
+  color: var(--danger, #e54d4d);
+}
+.msg-waiting .msg-text {
+  font-weight: 600;
+}
+.msg-waiting-preview {
+  font-size: 11px;
+  opacity: 0.85;
+  margin-top: 2px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+@keyframes msg-waiting-pulse {
+  0%,
+  100% {
+    background: color-mix(in srgb, var(--warning, #f5a623) 8%, transparent);
+  }
+  50% {
+    background: color-mix(in srgb, var(--warning, #f5a623) 16%, transparent);
+  }
+}
 .msg-item.msg-idle .msg-icon {
   width: 12px;
   height: 12px;
@@ -2531,8 +2820,26 @@ body::before {
   border: 1px solid var(--border);
 }
 .agent-badge {
-  font-size: 12px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   cursor: default;
+  line-height: 1;
+  flex-shrink: 0;
+  color: var(--text-secondary);
+}
+.agent-badge-waiting {
+  color: var(--warning);
+  animation: agent-badge-pulse 1.6s ease-in-out infinite;
+}
+@keyframes agent-badge-pulse {
+  0%,
+  100% {
+    opacity: 0.65;
+  }
+  50% {
+    opacity: 1;
+  }
 }
 
 .linked-docs-badge,
@@ -3502,22 +3809,6 @@ pre.mermaid svg {
   color: var(--accent);
 }
 
-.marketplace-btn {
-  color: #888;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  transition:
-    color 0.15s,
-    filter 0.15s;
-  border-radius: 3px;
-}
-
-.marketplace-btn:hover {
-  color: var(--accent);
-  filter: drop-shadow(0 0 3px var(--accent));
-}
-
 .project-group-header .group-count {
   font-weight: 400;
   color: var(--text-muted);