claude-code-kanban 7.22.0 → 7.24.0

package/public/index.html

@@ -814,6 +814,10 @@
     <div class="modal new-session-modal" onclick="event.stopPropagation()" role="dialog" aria-labelledby="ns-title">
       <div class="modal-header">
         <h3 class="modal-title" id="ns-title">New session</h3>
+        <span id="ns-voice" class="voice-mic" role="status" hidden>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M5 10a7 7 0 0 0 14 0M12 17v5"/></svg>
+          <span>Listening</span>
+        </span>
         <button class="modal-close" aria-label="Close dialog" onclick="closeNewSession()">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
         </button>
@@ -883,6 +887,10 @@
             </div>
           </div>
         </div>
+        <div id="ns-args-row" class="ns-row" hidden>
+          <span class="ns-label">Args</span>
+          <div class="ns-field"><code id="ns-args" class="ns-hint" title="Claude arguments this session starts with"></code></div>
+        </div>
         <div id="ns-error" class="ns-error" hidden></div>
       </div>
       <div class="modal-footer ns-footer">
@@ -895,6 +903,41 @@
     </div>
   </div>
 
+  <div id="task-modal" class="modal-overlay top-aligned" onclick="closeTaskDialog()">
+    <div class="modal task-modal" onclick="event.stopPropagation()" role="dialog" aria-labelledby="task-modal-title">
+      <div class="modal-header">
+        <h3 class="modal-title" id="task-modal-title">Add task <span id="task-modal-session" class="task-modal-session"></span></h3>
+        <span id="task-modal-mic" class="voice-mic" role="status" hidden>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M5 10a7 7 0 0 0 14 0M12 17v5"/></svg>
+          <span id="task-modal-mic-label">Listening</span>
+        </span>
+        <button class="modal-close" aria-label="Close dialog" onclick="closeTaskDialog()">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
+        </button>
+      </div>
+      <div class="modal-body ns-body">
+        <div class="ns-row">
+          <label class="ns-label" for="task-subject">Title</label>
+          <div class="ns-field">
+            <input type="text" id="task-subject" class="form-input" placeholder="What to do" autocomplete="off" data-bwignore data-1p-ignore data-lpignore="true">
+          </div>
+        </div>
+        <div class="ns-row">
+          <label class="ns-label" for="task-description">Description</label>
+          <div class="ns-field">
+            <textarea id="task-description" class="form-input" rows="4" placeholder="Optional"></textarea>
+          </div>
+        </div>
+        <div id="task-error" class="ns-error" hidden></div>
+      </div>
+      <div class="modal-footer ns-footer">
+        <span class="task-modal-hint"><kbd>Enter</kbd> adds &middot; <kbd>Shift</kbd>+<kbd>Enter</kbd> new line</span>
+        <button type="button" class="btn btn-secondary" onclick="closeTaskDialog()">Cancel</button>
+        <button type="button" id="task-save" class="btn btn-primary" onclick="saveTaskDialog()" disabled>Add</button>
+      </div>
+    </div>
+  </div>
+
   <div id="pane-pop" class="modal-overlay" onclick="closePanePop()">
     <div class="modal pane-pop-dialog" role="dialog" aria-labelledby="pane-pop-title" onclick="event.stopPropagation()">
       <div class="modal-header">

package/public/style.css

@@ -69,9 +69,10 @@
 /* Tokens derived from theme colors live on body, where color themes set those colors;
    on :root they would resolve to the defaults before a theme applies. */
 body {
-  /* Selection reads as a recess against the darker surface here, but light theme's deep tone
-     sits within a shade of the sidebar, so there it has to rise instead. */
-  --session-active-bg: var(--bg-deep);
+  /* bg-deep and bg-elevated sit within a few shades of the dark sidebar, so dark themes raise
+     the open session to the hover tone; light themes use bg-elevated. */
+  --session-active-bg: var(--bg-hover);
+  --session-active-border: color-mix(in srgb, var(--text-primary) 30%, transparent);
   --ansi-black: var(--text-muted);
   --ansi-white: var(--text-secondary);
   --ansi-bright-black: var(--text-tertiary);
@@ -1059,7 +1060,7 @@ body.booting .boot-splash {
 
 .session-item.active {
   background: var(--session-active-bg);
-  border-color: var(--border);
+  border-color: var(--session-active-border);
 }
 
 .session-item.kb-selected,
@@ -4125,14 +4126,16 @@ code.ct .ct-has[aria-expanded='false'] .ct-name::after {
 }
 
 /* Stops above the prompt rows, as the expanded show card does. */
-.dock-addon.expanded {
+.dock-addon.expanded,
+.show-card.docked.expanded {
   left: 0;
   bottom: calc(7.2 * var(--show-term-font, 13px));
   width: auto;
   border-bottom: 1px solid var(--border);
 }
 
-.dock-addon.expanded .show-dock-edge {
+.dock-addon.expanded .show-dock-edge,
+.show-card.docked.expanded .show-dock-edge {
   display: none;
 }
 
@@ -7994,6 +7997,7 @@ body.light {
   --bg-elevated: #fbfaf9;
   --bg-hover: #d2d0cc;
   --session-active-bg: var(--bg-elevated);
+  --session-active-border: var(--border);
   --border: #cfcbc4;
   --text-primary: #0a0a0a;
   --text-secondary: #2c2c2c;
@@ -8671,7 +8675,8 @@ body.light .msg-assistant .msg-text {
   color: var(--text-muted);
 }
 
-.confirm-hint kbd {
+.confirm-hint kbd,
+.task-modal-hint kbd {
   font-family: var(--mono);
   font-size: 10px;
   border: 1px solid var(--border);
@@ -9619,6 +9624,10 @@ select.form-input option:checked {
   gap: 12px;
 }
 
+.ns-row[hidden] {
+  display: none;
+}
+
 .new-session-modal.ns-resume .ns-extra {
   display: none;
 }
@@ -9793,7 +9802,9 @@ select.form-input option:checked {
 }
 
 .ns-body textarea.form-input {
-  min-height: 0;
+  field-sizing: content;
+  min-height: 86px;
+  max-height: 50vh;
 }
 
 .ns-prompt-field {
@@ -9973,6 +9984,132 @@ select.form-input option:checked {
 }
 /* #endregion */
 
+/* #region TASK_DIALOG */
+.modal.task-modal {
+  width: 560px;
+  max-width: calc(100vw - 32px);
+}
+
+.task-modal-session {
+  margin-left: 6px;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--text-tertiary);
+}
+
+.task-modal .ns-label {
+  white-space: nowrap;
+}
+
+.modal[data-voice] {
+  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
+  animation: voice-glow 1.6s ease-in-out infinite;
+}
+
+@keyframes voice-glow {
+  0%,
+  100% {
+    box-shadow:
+      0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
+      0 0 18px color-mix(in srgb, var(--accent) 18%, transparent);
+  }
+  50% {
+    box-shadow:
+      0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent),
+      0 0 34px color-mix(in srgb, var(--accent) 35%, transparent);
+  }
+}
+
+.voice-mic {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: auto;
+  margin-right: 8px;
+  padding: 3px 10px 3px 8px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--accent) 14%, transparent);
+  color: var(--accent);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.voice-mic[hidden] {
+  display: none;
+}
+
+.voice-mic svg {
+  width: 14px;
+  height: 14px;
+  animation: voice-mic 1.2s ease-in-out infinite;
+}
+
+@keyframes voice-mic {
+  50% {
+    opacity: 0.4;
+  }
+}
+
+.modal[data-voice] .form-input[readonly] {
+  cursor: default;
+}
+
+.task-modal-hint {
+  margin-right: auto;
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.task-modal .form-input.task-filled {
+  animation: task-filled 0.6s ease-out;
+}
+
+@keyframes task-filled {
+  from {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
+  }
+}
+
+.task-modal .form-input.task-moved {
+  animation: task-moved 0.35s ease-out;
+}
+
+@keyframes task-moved {
+  from {
+    opacity: 0.2;
+    transform: translateY(48px);
+  }
+}
+
+.task-modal .form-input.task-titling {
+  background:
+    linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--accent) 14%, transparent) 50%, transparent 100%) 0 0
+    / 200% 100% var(--bg-elevated);
+  animation: task-titling 1.2s linear infinite;
+  cursor: progress;
+}
+
+@keyframes task-titling {
+  from {
+    background-position: 100% 0;
+  }
+  to {
+    background-position: -100% 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .task-modal .form-input.task-filled,
+  .task-modal .form-input.task-moved,
+  .task-modal .form-input.task-titling,
+  .modal[data-voice],
+  .voice-mic svg {
+    animation: none;
+  }
+}
+/* #endregion */
+
 /* #region TOOL_STATS */
 .modal.tool-stats-modal {
   width: 90%;
@@ -10526,6 +10663,7 @@ select.form-input option:checked {
     --bg-elevated: #fbfaf9;
     --bg-hover: #d2d0cc;
     --session-active-bg: var(--bg-elevated);
+    --session-active-border: var(--border);
     --border: #cfcbc4;
     --text-primary: #0a0a0a;
     --text-secondary: #2c2c2c;

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

@@ -1,4 +1,4 @@
-// claude-hub-sdk 1.8.0 (sha256 9a67dd2aa534). Copied by npm run sdk:sync in claude-code-hub. Do not edit.
+// claude-hub-sdk 1.9.0 (sha256 537745aa3415). 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.
@@ -18,7 +18,7 @@ var ClaudeHubKeys = (() => {
   function comboOf(e) {
     const lower = typeof e.key === 'string' ? e.key.toLowerCase() : '';
     const m = !e.getModifierState?.('AltGraph') && /^(?:Key|Digit)([A-Z1-9])$/.exec(e.code || '');
-    const key = /^[a-z1-9]$/.test(lower) ? lower : m ? m[1].toLowerCase() : e.key;
+    const key = /^[a-z1-9]$/.test(lower) ? lower : m ? m[1].toLowerCase() : e.key === ' ' ? 'Space' : e.key;
     const mods = [e.ctrlKey && 'ctrl', e.altKey && 'alt', e.shiftKey && 'shift', e.metaKey && 'meta'];
     return [...mods, key].filter(Boolean).join('+');
   }

package/server.js

@@ -1,5 +1,19 @@
 #!/usr/bin/env node
 
+if (process.argv.includes("--install") || process.argv.includes("--uninstall")) {
+  const { runInstall, runUninstall } = require("./install");
+  const yes = process.argv.includes("--yes");
+  (process.argv.includes("--install") ? runInstall({ yes }) : runUninstall())
+    .then(() => process.exit(0))
+    .catch(e => { console.error(e.message); process.exit(1); });
+} else if (!require("./cli").runCli(process.argv)) {
+  startServer();
+}
+
+// Not indented: the formatter is off for this file, and a reindent would rewrite every line.
+// The requires sit inside, so a CLI call does not load the server's modules.
+function startServer() {
+
 // #region SETUP
 const express = require('express');
 const path = require('node:path');
@@ -79,19 +93,6 @@ const { foldAgentLines } = require('./lib/agent-log');
 const { projectMatcher, normalizeProjectPath, sessionProjectKey } = require('./public/project-match');
 const { getParentVerdict, setParentVerdict, peekParentVerdict } = require('./lib/parent-cache');
 
-if (process.argv.includes("--install") || process.argv.includes("--uninstall")) {
-  const { runInstall, runUninstall } = require("./install");
-  const yes = process.argv.includes("--yes");
-  (process.argv.includes("--install") ? runInstall({ yes }) : runUninstall())
-    .then(() => process.exit(0))
-    .catch(e => { console.error(e.message); process.exit(1); });
-} else if (!require("./cli").runCli(process.argv)) {
-  startServer();
-}
-
-// Not indented: the formatter is off for this file, and a reindent would rewrite every line.
-function startServer() {
-
 const app = express();
 const PORT = parseInt(getArgValue('port') || process.env.PORT || '3541', 10);
 
@@ -3392,6 +3393,35 @@ app.post('/api/terminal/launched/:id', (req, res) => {
   res.status(204).end();
 });
 
+// The hub's session.paste action: text into a session's input box, with Enter when `submit`.
+// claude queues a prompt sent while it works. Refused (409) only on a dialog, where the keys would answer it:
+// the screen check misses a permission prompt with no "Enter to confirm", so the waiting marker is checked too.
+app.post('/api/terminal/paste/:id', terminalRoute(async (req, res) => {
+  if (!terminal.authorized(req.get('x-terminal-token'))) return res.status(401).json({ error: 'invalid terminal token' });
+  const { text, submit } = req.body || {};
+  if (typeof text !== 'string' || !text.trim()) return res.status(400).json({ error: 'text is required' });
+  const id = req.params.id;
+  if (!terminal.isRunning(id)) return res.status(404).json({ error: 'no running terminal for this session' });
+  if (isWaitingOnUser(id) || !(await terminal.paste(id, text, submit === true))) {
+    return res.status(409).json({ error: 'the session shows a dialog' });
+  }
+  res.status(204).end();
+}));
+
+// The hub's session.live action: dictated words typed into the input box as they come.
+// `from` is what the last call typed; the box loses what differs and gets the rest.
+app.post('/api/terminal/type/:id', terminalRoute(async (req, res) => {
+  if (!terminal.authorized(req.get('x-terminal-token'))) return res.status(401).json({ error: 'invalid terminal token' });
+  const { from = '', text, submit } = req.body || {};
+  if (typeof text !== 'string' || typeof from !== 'string') return res.status(400).json({ error: 'text is required' });
+  const id = req.params.id;
+  if (!terminal.isRunning(id)) return res.status(404).json({ error: 'no running terminal for this session' });
+  if (isWaitingOnUser(id) || !(await terminal.type(id, from, text, submit === true))) {
+    return res.status(409).json({ error: 'the session shows a dialog' });
+  }
+  res.status(204).end();
+}));
+
 // The New session dialog's "Stay here": the PTY starts headless and the board keeps its view.
 // `show` is `claude-code-kanban new` from a shell outside the board: a board tab adds its card
 // and attaches, and with no tab to claim it the PTY is ended, because no one would see it.