claude-code-kanban 4.24.0 → 4.25.0

package/public/index.html

@@ -22,6 +22,7 @@
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/styles/github.min.css" id="hljs-theme-light" disabled>
   <script defer src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/highlight.min.js"></script>
   <script defer src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+  <script>window.__STORAGE_NS__ = null;</script>
   <script defer src="/app.js"></script>
 </head>
 <body>
@@ -355,7 +356,7 @@
           </svg>
         </button>
       </div>
-      <div class="modal-body modal-zoomable">
+      <div class="modal-body">
         <dl class="shortcuts" id="help-shortcuts"></dl>
       </div>
     </div>
@@ -611,8 +612,11 @@
   <div id="session-picker-modal" class="modal-overlay top-aligned" onclick="closeSessionPicker()">
     <div class="modal session-picker" onclick="event.stopPropagation()">
       <input type="text" id="session-picker-input" class="form-input sp-input" placeholder="Jump to session..." autocomplete="off" spellcheck="false">
-      <div id="session-picker-list" class="sp-list"></div>
-      <div class="sp-hint"><kbd>&uarr;</kbd><kbd>&darr;</kbd> move &middot; <kbd>Enter</kbd> open &middot; <kbd>Esc</kbd> close</div>
+      <div class="sp-body">
+        <div id="session-picker-list" class="sp-list"></div>
+        <div id="session-picker-peek" class="sp-peek"></div>
+      </div>
+      <div class="sp-hint"><kbd>&uarr;</kbd><kbd>&darr;</kbd> move &middot; <kbd>Enter</kbd> open &middot; <kbd>Ctrl</kbd><kbd>Space</kbd> peek &middot; <kbd>Esc</kbd> close</div>
     </div>
   </div>
 

package/public/style.css

@@ -2264,7 +2264,8 @@ body::before {
   flex-direction: column;
 }
 #team-modal .modal-body,
-#agent-modal .modal-body {
+#agent-modal .modal-body,
+.modal-help .modal-body {
   flex: 1 1 auto;
   overflow-y: auto;
   min-height: 0;
@@ -2349,7 +2350,6 @@ body::before {
   padding: 10px 14px;
   background: var(--bg-elevated);
   border: 1px solid var(--border);
-  border-left: 3px solid var(--warning);
   border-radius: 8px;
 }
 .info-goal-head {
@@ -4519,8 +4519,21 @@ body.light .msg-assistant .msg-text {
   max-width: 440px;
 }
 
+/* Reference card, not reading material: it stays out of the modal zoom, uses the app's
+   small type, and scrolls its body (rule shared with #team-modal) instead of growing past
+   the viewport cap. */
 .modal-help {
-  max-width: 960px;
+  max-width: 900px;
+  padding: 16px 20px 20px;
+  display: flex;
+  flex-direction: column;
+  font-size: 13px;
+}
+.modal-help .modal-header {
+  margin-bottom: 8px;
+}
+.modal-help .modal-title {
+  font-size: 14px;
 }
 
 /* One shared grid for both halves (key | label | spacer | key | label): each key
@@ -4844,13 +4857,59 @@ select.form-input option:checked {
   font-size: 13px;
 }
 
+.modal.session-picker.peeking {
+  max-width: 1240px;
+}
+
+.sp-body {
+  display: flex;
+  gap: 10px;
+  min-height: 0;
+}
+
+.sp-body > * {
+  min-width: 0;
+}
+
 .sp-list {
+  flex: 1;
   overflow-y: auto;
   display: flex;
   flex-direction: column;
   gap: 2px;
 }
 
+.sp-peek {
+  flex: 0 0 42%;
+  overflow-y: auto;
+  border-left: 1px solid var(--border);
+  padding-left: 10px;
+}
+
+.modal.session-picker:not(.peeking) .sp-peek {
+  display: none;
+}
+
+.sp-peek-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 6px;
+  font-family: var(--mono);
+  font-size: 11px;
+  color: var(--text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Row clicks open the live panel's detail modal by index, which means nothing
+   for a peeked session. The renderer's readOnly mode already drops the buttons. */
+.sp-peek-items {
+  pointer-events: none;
+}
+
 .sp-row {
   display: flex;
   align-items: center;

package/server.js

@@ -34,6 +34,7 @@ const {
 } = require('./lib/parsers');
 const { inlineHtmlAssets } = require('./lib/inline-assets');
 const { buildDecision, decisionFileName, isDecisionFile, waitSecondsFrom, isLapsed } = require('./lib/approvals');
+const { getClaudeDir, getArgValue, storageNamespace } = require('./lib/claude-dir');
 
 if (process.argv.includes("--install") || process.argv.includes("--uninstall")) {
   const { runInstall, runUninstall } = require("./install");
@@ -56,30 +57,8 @@ app.use(net.hostGuard);
 app.use(net.frameGuard);
 app.use(net.originGuard);
 
-// Parse --dir flag for custom Claude directory
-function getClaudeDir() {
-  const dirIndex = process.argv.findIndex(arg => arg.startsWith('--dir'));
-  if (dirIndex !== -1) {
-    const arg = process.argv[dirIndex];
-    if (arg.includes('=')) {
-      const dir = arg.split('=')[1];
-      return dir.startsWith('~') ? dir.replace('~', os.homedir()) : dir;
-    } else if (process.argv[dirIndex + 1]) {
-      const dir = process.argv[dirIndex + 1];
-      return dir.startsWith('~') ? dir.replace('~', os.homedir()) : dir;
-    }
-  }
-  return process.env.CLAUDE_CONFIG_DIR || process.env.CLAUDE_DIR || path.join(os.homedir(), '.claude');
-}
-
 function getArgUrl(argName, envName) {
-  const idx = process.argv.findIndex(arg => arg.startsWith(`--${argName}`));
-  if (idx !== -1) {
-    const arg = process.argv[idx];
-    if (arg.includes('=')) return arg.split('=').slice(1).join('=');
-    if (process.argv[idx + 1]) return process.argv[idx + 1];
-  }
-  return process.env[envName] || null;
+  return getArgValue(argName) || process.env[envName] || null;
 }
 
 const MARKETPLACE_URL = getArgUrl('marketplace-url', 'MARKETPLACE_URL');
@@ -516,6 +495,18 @@ app.get('/hub-config', (_req, res) => {
   res.json({ enabled: !!process.env.CLAUDE_HUB, url: process.env.HUB_URL || null });
 });
 
+// app.js reads localStorage synchronously at startup, before any fetch could deliver the
+// namespace, so it is injected into the page instead of served from /hub-config.
+const STORAGE_NS = storageNamespace(CLAUDE_DIR);
+const NS_DECL = 'window.__STORAGE_NS__ = null;';
+const RAW_INDEX = readFileSync(path.join(__dirname, 'public', 'index.html'), 'utf8');
+if (!RAW_INDEX.includes(NS_DECL)) throw new Error(`public/index.html is missing "${NS_DECL}"`);
+const INDEX_HTML = RAW_INDEX.replace(NS_DECL, `window.__STORAGE_NS__ = ${JSON.stringify(STORAGE_NS)};`);
+app.get(['/', '/index.html'], (_req, res) => {
+  res.setHeader('Cache-Control', 'no-cache');
+  res.type('html').send(INDEX_HTML);
+});
+
 // Serve static files
 app.get('/sw.js', (_req, res) => {
   res.setHeader('Cache-Control', 'no-cache');