claude-code-kanban 7.17.0 → 7.19.0

package/public/style.css

@@ -834,6 +834,111 @@ body::before {
   padding: 0 14px 12px;
 }
 
+.sessions-list.zen {
+  --zen-dot: var(--border);
+  display: flex;
+  flex-direction: column;
+}
+
+.sessions-list.zen[data-zen-state='working'] {
+  --zen-dot: color-mix(in srgb, var(--success) 45%, var(--border));
+}
+
+.sessions-list.zen[data-zen-state='waiting'] {
+  --zen-dot: color-mix(in srgb, var(--warning) 55%, var(--border));
+}
+
+/* The spacers fill the free space. Centered, they split it 1:2, so a growing panel moves the card up by a third of the growth, not a half. With no free space they are 0 and the list scrolls from the top. */
+.sessions-list.zen::after,
+.sessions-list.zen.zen-centered::before {
+  content: '';
+  flex: 1 0 0;
+}
+
+/* Dots unless the hub's zenPattern setting names another pattern. Line patterns use a lighter color, because a line has more ink than a dot. */
+.sessions-list.zen {
+  --zen-line: color-mix(in srgb, var(--zen-dot) 50%, transparent);
+  --zen-fill: radial-gradient(circle, var(--zen-dot) 1px, transparent 1.5px) 0 0 / 20px 20px;
+  --zen-glow-y: 0;
+}
+
+.sessions-list.zen[data-zen-pattern='diagonal'] {
+  --zen-fill: repeating-linear-gradient(-45deg, var(--zen-line) 0 1px, transparent 1px 14px);
+}
+
+.sessions-list.zen[data-zen-pattern='rings'] {
+  --zen-fill: radial-gradient(circle, transparent 2.5px, var(--zen-line) 3px 3.5px, transparent 4px) 0 0 / 28px 28px;
+}
+
+.sessions-list.zen[data-zen-pattern='grid'] {
+  --zen-fill:
+    linear-gradient(var(--zen-line) 1px, transparent 1px) 0 0 / 24px 24px,
+    linear-gradient(90deg, var(--zen-line) 1px, transparent 1px) 0 0 / 24px 24px;
+}
+
+/* The pattern glows out from the card. The glow has a fixed height, so it looks the same in a short space and a tall one. */
+.sessions-list.zen:not([data-zen-pattern='none'])::after,
+.sessions-list.zen.zen-centered:not([data-zen-pattern='none'])::before {
+  background: var(--zen-fill);
+  mask-image: radial-gradient(110% 260px at 50% var(--zen-glow-y), rgb(0 0 0 / 0.9), transparent);
+}
+
+.sessions-list.zen.zen-centered::before {
+  --zen-glow-y: 100%;
+}
+
+.sessions-list.zen.zen-centered::after {
+  flex-grow: 2;
+}
+
+.sessions-list.zen > * {
+  flex-shrink: 0;
+}
+
+/* After the ::after spacer, so the agents sit at the bottom of the free space. */
+.zen-agents {
+  order: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-top: 6px;
+}
+.zen-agents:empty {
+  display: none;
+}
+.zen-agent {
+  display: grid;
+  grid-template-columns: 5px 1fr auto;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 8px;
+  background: none;
+  border: none;
+  border-radius: 6px;
+  font: inherit;
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+}
+.zen-agent:hover {
+  background: var(--bg-hover);
+}
+.zen-agent-text {
+  min-width: 0;
+}
+.zen-agent-task {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-primary);
+}
+.zen-agent-time {
+  font-size: 10.5px;
+  font-variant-numeric: tabular-nums;
+  color: var(--text-tertiary);
+}
+
 .session-item {
   position: relative;
   display: block;
@@ -4953,7 +5058,7 @@ body.show-resizing iframe {
   color: var(--accent);
 }
 
-.pane-view.frame-focus .pane-keys {
+.pane-view.frame-focus:not(.keys-bridged) .pane-keys {
   display: flex;
 }
 

package/public/vendor/claude-hub-sdk.js

@@ -1,4 +1,4 @@
-// claude-hub-sdk 1.6.0 (sha256 71a58022516d). Copied by npm run sdk:sync in claude-code-hub. Do not edit.
+// claude-hub-sdk 1.8.0 (sha256 9a67dd2aa534). Copied by npm run sdk:sync in claude-code-hub. Do not edit.
 // Claude Code Hub SDK: the one rule that names a key press, shared by the hub page, client.js and
 // stub.js. The hub serves it to its page as /sdk/keys.js; mount() and sdk:sync put it in front of
 // client.js and stub.js, so an app still loads one file.
@@ -33,7 +33,21 @@ var ClaudeHubKeys = (() => {
     return combo.split('+').map((k) => mods[k] ?? named[k] ?? (k.length === 1 ? k.toUpperCase() : k));
   }
 
-  return { comboOf, keyParts };
+  // A host claim (protocol §5.2) names a press by its physical code, or by its character when the layout
+  // moves the key: {ctrlKey?, altKey?, shiftKey?, metaKey?, code, key: 'Unidentified'} or {…, key, code: ''}.
+  // A press matches a claim when one of its two signatures is the claim's first. AltGr types a
+  // character, so its press matches by character only. cck's frames use the same format.
+  function keySigs(e) {
+    const mods = [e.ctrlKey && 'ctrl', e.altKey && 'alt', e.shiftKey && 'shift', e.metaKey && 'meta']
+      .filter(Boolean)
+      .join('+');
+    return [
+      e.code && !e.getModifierState?.('AltGraph') && `${mods}|c:${e.code}`,
+      typeof e.key === 'string' && e.key !== 'Unidentified' && `${mods}|k:${e.key.toLowerCase()}`,
+    ].filter(Boolean);
+  }
+
+  return { comboOf, keyParts, keySigs };
 })();
 
 if (typeof module === 'object' && module.exports) module.exports = ClaudeHubKeys;
@@ -60,6 +74,8 @@ if (typeof module === 'object' && module.exports) module.exports = ClaudeHubKeys
         status: 'standalone',
         themes: [],
         inHub: false,
+        settings: null,
+        onSettings: () => off,
         onStatus: () => off,
         onActive: () => off,
         onThemes: () => off,
@@ -67,9 +83,10 @@ if (typeof module === 'object' && module.exports) module.exports = ClaudeHubKeys
         bindTheme: () => off,
         handle() {},
         publish() {},
-        invoke(action, params = {}) {
+        invoke(action, params = {}, opts = {}) {
           const target = standaloneFn(action)?.(params);
           if (!target) return Promise.resolve({ ok: false, reason: 'unhandled' });
+          if (opts.open === 'pane') return Promise.resolve({ ok: true, handledBy: 'standalone', url: target });
           win.open(target, '_blank', 'noopener');
           return Promise.resolve({ ok: true, handledBy: 'standalone' });
         },