claude-code-kanban 4.14.0 → 4.16.0

package/public/index.html

@@ -291,7 +291,7 @@
     </div>
   </div>
 
-  <!-- Markdown Preview Modal -->
+  <!-- File Preview Modal (markdown rendered inline, HTML in a sandboxed iframe) -->
   <div id="preview-modal" class="modal-overlay" style="z-index:10002;" onclick="closePreviewModal()">
     <div class="modal preview-modal-dialog" onclick="event.stopPropagation()">
       <div class="modal-header">
@@ -311,9 +311,9 @@
           </button>
         </div>
       </div>
-      <div class="modal-body" style="flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden;">
-        <div id="preview-modal-body" class="rendered-md" style="word-break: break-word; font-size: 13px; line-height: 1.6; overflow-y: auto; flex: 0 1 auto; min-height: 0; padding-right: 8px;"></div>
-        <div id="preview-modal-meta" style="margin-top: 12px; font-size: 11px; color: var(--text-muted); flex-shrink: 0;"></div>
+      <div class="modal-body">
+        <div id="preview-modal-body" class="rendered-md"></div>
+        <div id="preview-modal-meta"></div>
       </div>
     </div>
   </div>

package/public/style.css

@@ -31,6 +31,10 @@
   --plan-dim: rgba(134, 168, 134, 0.18);
   --mono: 'IBM Plex Mono', monospace;
   --serif: 'Playfair Display', serif;
+  --card-gap: 7px;
+  /* the name's supporting lines read as one unit with it, so they sit tighter
+     than the gap separating the card's independent rows */
+  --card-gap-tight: 3px;
   /* aliases: many rules reference --font-mono/--font-serif; keep them on-brand */
   --font-mono: var(--mono);
   --font-serif: var(--serif);
@@ -89,7 +93,7 @@ body::before {
 
 /* #region SIDEBAR */
 .sidebar {
-  width: var(--sidebar-width, 300px);
+  width: var(--sidebar-width, 310px);
   background: var(--bg-surface);
   border-right: 1px solid color-mix(in srgb, var(--border) 35%, transparent);
   box-shadow: 1px 0 12px rgba(0, 0, 0, 0.04);
@@ -451,11 +455,11 @@ body::before {
 .session-item {
   display: block;
   width: 100%;
-  padding: 12px 14px;
-  margin-bottom: 4px;
+  padding: 13px 15px;
+  margin-bottom: 6px;
   background: transparent;
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: 9px;
   text-align: left;
   cursor: pointer;
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
@@ -467,7 +471,7 @@ body::before {
 }
 
 .session-name {
-  font-size: 14px;
+  font-size: 13px;
   color: var(--text-primary);
   white-space: nowrap;
   overflow: hidden;
@@ -501,7 +505,7 @@ body::before {
   font-size: 12px;
   font-weight: 450;
   color: var(--text-tertiary);
-  margin-top: 2px;
+  margin-top: var(--card-gap-tight);
   white-space: nowrap;
   overflow: hidden;
 }
@@ -509,7 +513,7 @@ body::before {
 .session-branch {
   font-size: 10px;
   color: var(--text-secondary);
-  margin-top: 2px;
+  margin-top: var(--card-gap-tight);
   display: block;
   font-family: var(--mono);
   white-space: nowrap;
@@ -520,7 +524,7 @@ body::before {
 .session-plan {
   font-size: 10px;
   color: var(--plan);
-  margin-top: 2px;
+  margin-top: var(--card-gap-tight);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -528,7 +532,7 @@ body::before {
 
 .session-goal {
   font-size: 10px;
-  margin-top: 2px;
+  margin-top: var(--card-gap-tight);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -552,8 +556,9 @@ body::before {
 .session-progress {
   display: flex;
   align-items: center;
-  gap: 8px;
-  margin-top: 8px;
+  gap: 9px;
+  margin-top: var(--card-gap);
+  line-height: 1;
 }
 
 .progress-bar {
@@ -579,7 +584,7 @@ body::before {
 
 .context-bar {
   display: none;
-  margin-top: 6px;
+  margin-top: var(--card-gap);
 }
 .has-context .context-bar {
   display: block;
@@ -682,7 +687,7 @@ body::before {
   font-size: 11px;
   font-weight: 450;
   color: var(--text-tertiary);
-  margin-top: 6px;
+  margin-top: var(--card-gap);
 }
 
 .session-latest-msg {
@@ -947,8 +952,11 @@ body::before {
   background: var(--bg-hover);
   color: var(--text-primary);
 }
+/* Highlighted with the row's *own* theme accent rather than the active theme's, so the selected
+   row previews the theme it names. --sw-accent comes from the theme-swatch-<id> class on the row. */
 .theme-menu-item.on {
-  color: var(--accent-text);
+  color: var(--sw-accent, var(--accent-text));
+  background: color-mix(in srgb, var(--sw-accent, var(--accent-text)) 16%, transparent);
 }
 /* 3-dot palette preview: surface, accent, ink (colors from themes.css vars) */
 .theme-swatch {
@@ -1573,7 +1581,7 @@ body::before {
 .session-indicators {
   display: flex;
   align-items: center;
-  gap: 2px;
+  gap: 5px;
   flex-shrink: 0;
 }
 
@@ -1598,13 +1606,18 @@ body::before {
   flex-shrink: 0;
 }
 
-.team-info-btn {
-  width: 24px;
-  height: 24px;
+/* Every clickable session-card icon shares one box so they blend into a single row;
+   resizing the row means editing this rule, not four. Per-icon rules below override
+   only what actually differs (color, glyph size). */
+.team-info-btn,
+.plan-indicator,
+.loop-badge,
+.workflow-badge {
+  width: 18px;
+  height: 18px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: 11px;
   background: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
@@ -1614,76 +1627,39 @@ body::before {
   transition: all 0.15s ease;
 }
 
-.team-info-btn:hover {
+.team-info-btn:hover,
+.loop-badge:hover,
+.workflow-badge:hover {
   background: var(--bg-hover);
   border-color: var(--border);
   color: var(--text-secondary);
 }
 
+/* The boxes are wider than their 12px glyphs, so the leading icon would sit inset
+   from the card text above it. Cancel that inset — but only when a boxed icon leads;
+   the pill badges and .team-badge have a different inset and must not be shifted. */
+.session-indicators > .team-info-btn:first-child,
+.session-indicators > .plan-indicator:first-child,
+.session-indicators > .loop-badge:first-child,
+.session-indicators > .workflow-badge:first-child {
+  margin-left: -3px;
+}
+
+.team-info-btn {
+  font-size: 11px;
+}
+
 .plan-indicator {
-  width: 24px;
-  height: 24px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
   background: var(--plan-dim);
-  border: 1px solid transparent;
-  border-radius: 4px;
   color: var(--plan);
-  cursor: pointer;
-  flex-shrink: 0;
-  transition: all 0.15s ease;
 }
 
 .plan-indicator:hover {
-  background: var(--plan-dim);
   border-color: var(--plan);
 }
 
-/* Match .team-info-btn so the wakeups clock blends with the other session-card icons. */
-.loop-badge {
-  width: 24px;
-  height: 24px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  color: var(--text-muted);
-  cursor: pointer;
-  flex-shrink: 0;
-  transition: all 0.15s ease;
-}
-
-.loop-badge:hover {
-  background: var(--bg-hover);
-  border-color: var(--border);
-  color: var(--text-secondary);
-}
-
 /* #region WORKFLOW */
-/* Match .team-info-btn so the gear blends with the other session-card icons. */
-.workflow-badge {
-  width: 24px;
-  height: 24px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  color: var(--text-muted);
-  cursor: pointer;
-  flex-shrink: 0;
-  transition: all 0.15s ease;
-}
-
-.workflow-badge:hover {
-  background: var(--bg-hover);
-  border-color: var(--border);
-  color: var(--text-secondary);
-}
+/* .workflow-badge's box is defined with the other session-card icons in TEAM_BADGE. */
 
 .workflow-row {
   border: 1px solid var(--border);
@@ -1723,6 +1699,13 @@ body::before {
   color: var(--text-secondary);
 }
 
+.workflow-row-desc {
+  margin-top: 4px;
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--text-secondary);
+}
+
 .workflow-row-meta {
   margin-top: 2px;
   font-size: 11px;
@@ -1748,6 +1731,150 @@ body::before {
   border-radius: 6px;
 }
 
+/* Run state view */
+.wf-back {
+  font-size: 12px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  margin-bottom: 10px;
+}
+
+.wf-back:hover {
+  color: var(--text-primary);
+}
+
+.wf-run-desc {
+  color: var(--text-secondary);
+  font-size: 13px;
+  line-height: 1.5;
+  margin-bottom: 8px;
+}
+
+.wf-run-stats {
+  font-size: 12px;
+  color: var(--text-secondary);
+  margin-bottom: 4px;
+}
+
+.wf-run-stats code {
+  font-size: 11px;
+}
+
+.wf-section-title {
+  margin: 16px 0 8px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-secondary);
+}
+
+.wf-phases {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.wf-phase {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 3px 0;
+  font-size: 13px;
+}
+
+.wf-phase-mark {
+  flex-shrink: 0;
+  width: 12px;
+  color: var(--text-muted);
+}
+
+.wf-phase-mark.done {
+  color: var(--ok, #3fb950);
+}
+
+.wf-phase-title {
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.wf-phase-detail {
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+.wf-agents {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.wf-agent {
+  display: grid;
+  grid-template-columns: 1fr auto auto auto 16px;
+  align-items: center;
+  gap: 12px;
+  padding: 6px 10px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 12px;
+  transition: border-color 0.15s ease;
+}
+
+.wf-agent:hover {
+  border-color: var(--accent, var(--plan));
+}
+
+.wf-agent-type {
+  font-weight: 500;
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wf-agent-model,
+.wf-agent-tok,
+.wf-agent-dur {
+  font-family: var(--font-mono, monospace);
+  color: var(--text-secondary);
+  white-space: nowrap;
+}
+
+.wf-agent-status {
+  text-align: center;
+}
+
+.wf-agent-status.done {
+  color: var(--ok, #3fb950);
+}
+
+.wf-agent-status.running {
+  color: var(--accent, var(--plan));
+}
+
+.wf-empty {
+  font-size: 12px;
+  color: var(--text-muted);
+  padding: 4px 0;
+}
+
+.wf-source {
+  margin-top: 16px;
+}
+
+.wf-source > summary {
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--text-secondary);
+  padding: 4px 0;
+}
+
+.wf-source > summary:hover {
+  color: var(--text-primary);
+}
+
 /* #endregion */
 
 .loop-section-title {
@@ -3221,6 +3348,113 @@ 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 {
+  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 {
+  opacity: 1;
+}
+
+.linked-doc-remove:hover {
+  background: var(--danger-dim);
+  color: var(--danger);
+}
+
+/* A linked file the previewer can't render opens in the editor — the dashed
+   underline keeps that different destination visible before the click. */
+.linked-doc-item.is-editor .linked-doc-link {
+  color: var(--text-secondary);
+  text-decoration-style: dashed;
+}
+
+.linked-docs-empty {
+  color: var(--text-muted);
+  font-size: 11px;
+  font-style: italic;
+}
+
+.linked-docs-add-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  line-height: 1;
+  flex-shrink: 0;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--text-muted);
+  font-family: var(--mono);
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.linked-docs-add-btn:hover {
+  border-color: var(--accent);
+  color: var(--accent-text);
+}
+
+.linked-doc-editor-slot:not(:empty) {
+  margin-bottom: 8px;
+}
+
+.linked-doc-input {
+  width: 100%;
+  padding: 6px 8px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--accent);
+  border-radius: 4px;
+  color: var(--text-primary);
+  font-family: var(--mono);
+  font-size: 12px;
+  box-shadow: 0 0 0 2px var(--accent-dim);
+  outline: none;
+}
+
+.linked-doc-hint {
+  color: var(--text-muted);
+  font-size: 10px;
+  margin-top: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Present but empty until a path fails to resolve. */
+.linked-doc-error:empty {
+  display: none;
+}
+
+.linked-doc-error {
+  color: var(--danger);
+  font-size: 11px;
+  margin-top: 4px;
+}
+
 /* #endregion */
 
 /* #region PERMISSION_PENDING */
@@ -3441,6 +3675,62 @@ body.light .msg-assistant .msg-text {
   max-height: 90vh;
 }
 
+.preview-modal-dialog .modal-body {
+  flex: 0 1 auto;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+#preview-modal-body {
+  word-break: break-word;
+  font-size: 13px;
+  line-height: 1.6;
+  overflow-y: auto;
+  flex: 0 1 auto;
+  min-height: 0;
+  padding-right: 8px;
+}
+
+#preview-modal-meta {
+  margin-top: 12px;
+  font-size: 11px;
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+/* Rendered HTML pages need far more room than a markdown doc. */
+.modal.preview-modal-dialog.preview-html {
+  width: 96vw;
+  max-width: 96vw;
+  height: 92vh;
+  max-height: 92vh;
+}
+
+/* Keeps the fullscreen button meaningful — the generic .fullscreen rule is smaller than this. */
+.modal.preview-modal-dialog.preview-html.fullscreen {
+  width: 98vw;
+  max-width: 98vw;
+  height: 98vh;
+  max-height: 98vh;
+}
+
+.preview-html .modal-body,
+.preview-html #preview-modal-body {
+  flex: 1 1 auto;
+  overflow: hidden;
+  padding-right: 0;
+}
+
+.preview-html-frame {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  border-radius: 6px;
+  /* Pages authored for a light page default would be unreadable on the dark theme. */
+  background: #fff;
+}
+
 .preview-fm {
   margin: 0 0 14px;
   border: 1px solid var(--border);