claude-code-kanban 4.26.0 → 4.27.0

package/public/index.html

@@ -5,6 +5,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>CC Kanban</title>
   <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%231a1a1a'/%3E%3Crect x='4' y='6' width='7' height='20' rx='2' fill='%23e8927c'/%3E%3Crect x='13' y='6' width='7' height='14' rx='2' fill='%23e8927c'/%3E%3Crect x='22' y='6' width='7' height='8' rx='2' fill='%23e8927c'/%3E%3C/svg%3E">
+  <!-- Chrome uses the SVG only in the tab strip; app windows, shortcuts and the
+       history list need a raster icon or they fall back to /favicon.ico and then to
+       whatever icon localhost was last seen with, which is a sibling app's. -->
+  <link rel="icon" type="image/png" sizes="192x192" href="/icons/icon-192.png">
+  <link rel="icon" type="image/png" sizes="512x512" href="/icons/icon-512.png">
   <link rel="manifest" href="/manifest.json">
   <meta name="theme-color" content="#101114" media="(prefers-color-scheme: dark)">
   <meta name="theme-color" content="#e8e6e3" media="(prefers-color-scheme: light)">

package/public/style.css

@@ -588,6 +588,9 @@ body::before {
 
 .session-item.kb-selected {
   border-color: var(--accent);
+  box-shadow:
+    inset 0 0 0 1px var(--accent),
+    0 0 10px var(--accent-glow);
 }
 
 .session-item.stale {
@@ -645,7 +648,9 @@ body::before {
   padding-right: 22px;
 }
 
-.session-indicators .pulse {
+.session-indicators .pulse,
+.wf-live-name .pulse {
+  flex: none;
   width: 6px;
   height: 6px;
   background: var(--accent);
@@ -769,7 +774,10 @@ body::before {
   transition: width 0.5s ease-out;
 }
 
-.session-item:not(.active) .progress-fill {
+/* The live-workflow bar takes the muted fill too: its card already carries a pulsing
+   accent dot, and a second accent bar under it shouts. */
+.session-item:not(.active) .progress-fill,
+.wf-live-bar .progress-fill {
   background: color-mix(in srgb, var(--text-tertiary) 55%, transparent);
 }
 
@@ -900,17 +908,6 @@ body::before {
   gap: 3px 10px;
 }
 
-.zen-panel .linked-docs-section {
-  margin-top: 12px;
-  padding-top: 10px;
-  border-top: 1px solid var(--border);
-}
-
-.zen-panel .artifacts-section {
-  padding-top: 10px;
-  border-top: 1px solid var(--border);
-}
-
 .zen-scratchpad {
   display: flex;
   align-items: center;
@@ -3904,6 +3901,7 @@ body::before {
 }
 
 .linked-doc-list,
+.scratch-file-list,
 .artifact-list {
   list-style: none;
   padding: 0;
@@ -3914,6 +3912,7 @@ body::before {
 }
 
 .linked-doc-item,
+.scratch-file-item,
 .artifact-item {
   display: flex;
   align-items: baseline;
@@ -3922,11 +3921,16 @@ body::before {
 }
 
 .linked-doc-link,
+.scratch-file-link,
 .artifact-link {
   color: var(--accent-text);
   text-decoration: underline;
   text-decoration-style: dotted;
   text-underline-offset: 3px;
+}
+
+.linked-doc-link,
+.artifact-link {
   flex-shrink: 0;
 }
 
@@ -3940,21 +3944,87 @@ body::before {
   min-width: 0;
 }
 
+.scratch-file-time {
+  color: var(--text-muted);
+  font-size: 11px;
+  opacity: 0.7;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
 /* 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,
+.scratch-file-actions,
 .artifact-actions {
   margin-left: auto;
   align-self: center;
   flex-shrink: 0;
+  /* Two .row-actions buttons wide (22px each, 4px gap), filled from the left, so a
+     row with one action puts it in the same column as the rows that have two. */
+  min-width: 48px;
+  justify-content: flex-start;
 }
 
 .linked-doc-item:hover .linked-doc-actions,
+.scratch-file-item:hover .scratch-file-actions,
 .artifact-item:hover .artifact-actions {
   opacity: 1;
 }
 
+/* Hangs off the Scratchpad path row, so it carries no header of its own. */
+.scratch-files-section {
+  margin-top: 6px;
+  font-size: 11px;
+}
+
+.scratch-file-link {
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  text-align: left;
+  /* A scratch name can be longer than the zen panel is wide; without this it pushes
+     the action buttons out of their column. The full path is on the title. */
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.scratch-files-more {
+  margin: 6px 0 0;
+  font-size: 11px;
+}
+
+/* A folder row wraps so its child list lands on its own full-width line under the
+   name, indented one chevron in. */
+.scratch-folder-item {
+  flex-wrap: wrap;
+}
+
+.scratch-folder-item > .scratch-file-list,
+.scratch-folder-item > .scratch-folder-empty {
+  flex-basis: 100%;
+  margin-top: 4px;
+  padding-left: 14px;
+}
+
+.scratch-folder-empty {
+  color: var(--text-muted);
+  opacity: 0.7;
+}
+
+.scratch-folder-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  text-decoration: none;
+  color: var(--text-secondary);
+}
+
 /* The × is a glyph, not an svg, so .row-actions button svg does not size it. */
 .linked-doc-remove {
   font-family: var(--mono);
@@ -3978,15 +4048,107 @@ body::before {
 /* A section of the session panel: linked documents, artifacts. */
 .panel-section {
   margin-bottom: 16px;
-  font-size: 12px;
+  padding-top: 10px;
+  border-top: 1px solid var(--border);
+  font-size: 11px;
+}
+
+.linked-docs-section {
+  margin-top: 12px;
 }
 
 /* Artifacts are read out of the transcript, so the section renders before the
    list arrives and stays in the DOM as the patch target when there is none. */
-.artifacts-section:empty {
+.artifacts-section:empty,
+.scratch-files-section:empty,
+.workflow-live-section:empty {
   display: none;
 }
 
+/* Its own card below the zen panel — the run is live state, not session detail, so it
+   comes and goes on its own while the panel above stays put. */
+.workflow-live-section {
+  margin-top: 10px;
+  padding: 10px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  font-size: 11px;
+}
+
+.wf-live {
+  cursor: pointer;
+}
+
+.wf-live-name {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wf-live-bar {
+  margin: 6px 0;
+}
+
+.wf-live-phases {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+/* A phase reads as one chip, so the dot goes in ::before rather than costing a span. */
+.wf-live-phase {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 1px 6px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  font-size: 10px;
+  color: var(--text-secondary);
+}
+
+.wf-live-phase::before {
+  content: '';
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--text-muted);
+}
+
+.wf-live-phase.running::before {
+  background: var(--accent);
+  animation: pulse 2s ease-in-out infinite;
+}
+
+.wf-live-phase.done::before {
+  background: var(--ok, #3fb950);
+}
+
+.wf-live-phase.done {
+  color: var(--text-muted);
+}
+
+.wf-live-phase-count {
+  font-family: var(--font-mono);
+}
+
+.wf-live-running {
+  margin-top: 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-muted);
+}
+
 .panel-section-header {
   display: flex;
   align-items: center;
@@ -4555,6 +4717,16 @@ body.light .msg-assistant .msg-text {
   padding-right: 8px;
 }
 
+#preview-modal-body .preview-image {
+  display: block;
+  max-width: 100%;
+  max-height: 70vh;
+  margin: 0 auto;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--bg-hover);
+}
+
 #preview-modal-meta {
   margin-top: 12px;
   font-size: 11px;
@@ -4598,6 +4770,29 @@ body.light .msg-assistant .msg-text {
   padding-right: 0;
 }
 
+/* Source is read line by line, so it keeps its own line breaks and scrolls sideways
+   instead of inheriting the body's `word-break: break-word`. */
+.preview-source {
+  margin: 0;
+  padding: 10px 12px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  overflow-x: auto;
+  font-family: var(--mono);
+  font-size: 12px;
+  line-height: 1.55;
+  white-space: pre;
+  word-break: normal;
+  tab-size: 4;
+}
+
+.preview-source code {
+  background: none;
+  padding: 0;
+  font: inherit;
+}
+
 .preview-html-frame {
   width: 100%;
   height: 100%;
@@ -5753,7 +5948,8 @@ pre.mermaid svg {
 
 .project-group-header .group-chevron,
 .session-group-header .group-chevron,
-.sg-section-toggle .group-chevron {
+.sg-section-toggle .group-chevron,
+.scratch-folder-toggle .group-chevron {
   transition: transform 0.15s ease;
   flex-shrink: 0;
   display: block;
@@ -5761,7 +5957,8 @@ pre.mermaid svg {
 
 .project-group-header.collapsed .group-chevron,
 .session-group-header.collapsed .group-chevron,
-.sg-section-toggle.collapsed .group-chevron {
+.sg-section-toggle.collapsed .group-chevron,
+.scratch-folder-toggle.collapsed .group-chevron {
   transform: rotate(-90deg);
 }