claude-code-kanban 4.14.1 → 4.16.0

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);
@@ -3372,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 */
@@ -3592,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);

package/server.js

@@ -32,7 +32,8 @@ const {
 
 if (process.argv.includes("--install") || process.argv.includes("--uninstall")) {
   const { runInstall, runUninstall } = require("./install");
-  (process.argv.includes("--install") ? runInstall() : runUninstall())
+  const pluginOnly = process.argv.includes("--plugin-only");
+  (process.argv.includes("--install") ? runInstall({ pluginOnly }) : runUninstall())
     .then(() => process.exit(0))
     .catch(e => { console.error(e.message); process.exit(1); });
   return;
@@ -2612,23 +2613,52 @@ app.delete('/api/tasks/:sessionId/:taskId', async (req, res) => {
   }
 });
 
-// API: Markdown preview — read file and broadcast to clients
-async function readMarkdownFile(absPath) {
-  const ext = path.extname(absPath).toLowerCase();
-  if (ext !== '.md' && ext !== '.markdown') {
-    const err = new Error('Only .md/.markdown files are allowed');
-    err.status = 400;
-    throw err;
-  }
+// API: File preview — read file and broadcast to clients
+const PREVIEW_KINDS = { '.md': 'markdown', '.markdown': 'markdown', '.html': 'html', '.htm': 'html' };
+// Whole files are pushed into a modal, so anything huge freezes the tab regardless of kind.
+const PREVIEW_MAX_BYTES = 8 * 1024 * 1024;
+
+function previewError(status, message) {
+  const err = new Error(message);
+  err.status = status;
+  return err;
+}
+
+// Existence + kind of a file target, with the HTTP status codes both the preview and
+// the link-a-file endpoints report. `kind` is null for anything the previewer can't
+// render — the caller decides whether that disqualifies the path.
+async function statFileTarget(absPath) {
   try {
-    return await fs.readFile(absPath, 'utf8');
+    const stats = await fs.stat(absPath);
+    if (!stats.isFile()) throw previewError(400, 'Not a file');
+    return { size: stats.size, kind: PREVIEW_KINDS[path.extname(absPath).toLowerCase()] || null };
   } catch (e) {
-    if (e.code === 'ENOENT') { const err = new Error('File not found'); err.status = 404; throw err; }
-    if (e.code === 'EISDIR') { const err = new Error('Not a file'); err.status = 400; throw err; }
+    if (e.status) throw e;
+    if (e.code === 'ENOENT') throw previewError(404, 'File not found');
+    if (e.code === 'EISDIR') throw previewError(400, 'Not a file');
     throw e;
   }
 }
 
+// Checks the file is previewable without reading it — the broadcast path needs the
+// validation (and its status codes) but never the content.
+async function validatePreviewFile(absPath) {
+  const { kind, size } = await statFileTarget(absPath);
+  if (!kind) throw previewError(400, 'Only .md/.markdown/.html/.htm files are allowed');
+  if (size > PREVIEW_MAX_BYTES) {
+    throw previewError(
+      400,
+      `Preview too large (${Math.round(size / 1048576)}MB, max ${PREVIEW_MAX_BYTES / 1048576}MB)`
+    );
+  }
+  return { kind, size };
+}
+
+async function readPreviewFile(absPath) {
+  const { kind } = await validatePreviewFile(absPath);
+  return { content: await fs.readFile(absPath, 'utf8'), kind };
+}
+
 function resolvePreviewPath(filePath, base) {
   if (!filePath || typeof filePath !== 'string') return null;
   if (path.isAbsolute(filePath)) return filePath;
@@ -2650,8 +2680,10 @@ app.post('/api/preview', async (req, res) => {
     const { path: filePath, sessionId, base } = req.body || {};
     const abs = resolvePreviewPath(filePath, base);
     if (!abs) return res.status(400).json({ error: 'path is required' });
-    const content = await readMarkdownFile(abs);
-    broadcast({ type: 'preview:open', path: abs, content, sessionId: sessionId || null });
+    // Validate here so the CLI still gets 400/404, but broadcast the path only —
+    // each tab fetches the document itself instead of it being fanned out over SSE.
+    await validatePreviewFile(abs);
+    broadcast({ type: 'preview:open', path: abs, sessionId: sessionId || null });
     res.json({ success: true });
   } catch (error) {
     console.error('Error in /api/preview:', error);
@@ -2659,6 +2691,24 @@ app.post('/api/preview', async (req, res) => {
   }
 });
 
+// API: Link a file to a session's sidebar docs without opening the preview modal.
+// Not extension-restricted, matching /api/file/resolve — an unpreviewable link just
+// opens in the editor. Unlinking skips the stat so a deleted file can still be removed.
+app.post('/api/document/link', async (req, res) => {
+  try {
+    const { path: filePath, sessionId, unlink } = req.body || {};
+    if (typeof sessionId !== 'string' || !sessionId) return res.status(400).json({ error: 'sessionId is required' });
+    const abs = resolvePreviewPath(filePath);
+    if (!abs) return res.status(400).json({ error: 'path is required' });
+    if (!unlink) await statFileTarget(abs);
+    broadcast({ type: 'document:link', path: abs, sessionId, unlink: !!unlink });
+    res.json({ success: true });
+  } catch (error) {
+    console.error('Error in /api/document/link:', error);
+    res.status(error.status || 500).json({ error: error.message || 'Link failed' });
+  }
+});
+
 app.get('/api/session/resolve', (req, res) => {
   try {
     const idArg = (req.query.id || '').toString();
@@ -2731,14 +2781,29 @@ app.get('/api/preview', async (req, res) => {
   try {
     const abs = resolvePreviewPath(req.query.path, req.query.base);
     if (!abs) return res.status(400).json({ error: 'path is required' });
-    const content = await readMarkdownFile(abs);
-    res.json({ path: abs, content });
+    const { content, kind } = await readPreviewFile(abs);
+    res.json({ path: abs, content, kind });
   } catch (error) {
     console.error('Error in GET /api/preview:', error);
     res.status(error.status || 500).json({ error: error.message || 'Preview failed' });
   }
 });
 
+// API: Resolve a hand-typed path to an absolute one that exists. Deliberately not
+// extension-restricted — a linked file the previewer can't render (kind: null) is
+// still linkable, the client just opens it in the editor instead.
+app.get('/api/file/resolve', async (req, res) => {
+  try {
+    const abs = resolvePreviewPath(req.query.path, req.query.base);
+    if (!abs) return res.status(400).json({ error: 'path is required' });
+    // No size cap here — an unpreviewable file of any size is still linkable.
+    res.json({ path: abs, ...(await statFileTarget(abs)) });
+  } catch (error) {
+    console.error('Error in GET /api/file/resolve:', error);
+    res.status(error.status || 500).json({ error: error.message || 'Failed to resolve file' });
+  }
+});
+
 // SSE endpoint for live updates
 app.get('/api/events', (req, res) => {
   res.setHeader('Content-Type', 'text/event-stream');