kanban-lite 1.0.21 → 1.0.23

package/docs/plans/2026-02-27-zoom-settings.md

@@ -0,0 +1,395 @@
+# Zoom Settings Implementation Plan
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** Add two zoom settings (board zoom + card detail zoom) with sliders and keyboard shortcuts so users can scale font sizes in the kanban UI.
+
+**Architecture:** Two numeric settings (`boardZoom`, `cardZoom`) stored in `CardDisplaySettings` and `.kanban.json`. CSS custom properties `--board-zoom` and `--card-zoom` are set on `:root` and used in `calc()` multipliers on font-size rules. A `useEffect` in `App.tsx` syncs settings to CSS vars. Keyboard shortcuts adjust zoom by ±5%.
+
+**Tech Stack:** TypeScript, React, Zustand, Tailwind CSS, CSS custom properties
+
+---
+
+### Task 1: Add zoom fields to CardDisplaySettings type
+
+**Files:**
+- Modify: `src/shared/types.ts:230-253`
+
+**Step 1: Add boardZoom and cardZoom to CardDisplaySettings**
+
+In `src/shared/types.ts`, add two new fields at the end of the `CardDisplaySettings` interface (before the closing `}`):
+
+```typescript
+  /** Zoom level for the board view as a percentage (75–150). Default 100. */
+  boardZoom: number
+  /** Zoom level for the card detail panel as a percentage (75–150). Default 100. */
+  cardZoom: number
+```
+
+**Step 2: Verify types compile**
+
+Run: `npx tsc --noEmit 2>&1 | head -20`
+Expected: Type errors in files that construct `CardDisplaySettings` without the new fields (config.ts, store/index.ts). This is expected — we fix them in the next tasks.
+
+**Step 3: Commit**
+
+```bash
+git add src/shared/types.ts
+git commit -m "feat(types): add boardZoom and cardZoom to CardDisplaySettings"
+```
+
+---
+
+### Task 2: Add zoom defaults to config and store
+
+**Files:**
+- Modify: `src/shared/config.ts:54-95` (KanbanConfig interface)
+- Modify: `src/shared/config.ts:129-150` (DEFAULT_CONFIG)
+- Modify: `src/shared/config.ts:377-391` (configToSettings)
+- Modify: `src/shared/config.ts:406-419` (settingsToConfig)
+- Modify: `src/webview/store/index.ts:122-134` (initial cardSettings)
+
+**Step 1: Add zoom fields to KanbanConfig interface**
+
+In `src/shared/config.ts`, add after the `showDeletedColumn` field (line 86) in the `KanbanConfig` interface:
+
+```typescript
+  /** Zoom level for the board view (75–150). */
+  boardZoom: number
+  /** Zoom level for the card detail panel (75–150). */
+  cardZoom: number
+```
+
+**Step 2: Add defaults to DEFAULT_CONFIG**
+
+In `src/shared/config.ts`, add after `showDeletedColumn: false,` (line 147):
+
+```typescript
+  boardZoom: 100,
+  cardZoom: 100,
+```
+
+**Step 3: Add zoom to configToSettings**
+
+In `src/shared/config.ts`, in the `configToSettings` function, add after the `defaultStatus` line (line 389):
+
+```typescript
+    boardZoom: config.boardZoom,
+    cardZoom: config.cardZoom
+```
+
+**Step 4: Add zoom to settingsToConfig**
+
+In `src/shared/config.ts`, in the `settingsToConfig` function, add after the `defaultStatus` line (line 417):
+
+```typescript
+    boardZoom: settings.boardZoom,
+    cardZoom: settings.cardZoom
+```
+
+**Step 5: Add defaults to Zustand store**
+
+In `src/webview/store/index.ts`, add after `defaultStatus: 'backlog'` (line 133) in the initial `cardSettings`:
+
+```typescript
+    boardZoom: 100,
+    cardZoom: 100
+```
+
+**Step 6: Verify types compile**
+
+Run: `npx tsc --noEmit`
+Expected: Clean compile (0 errors)
+
+**Step 7: Commit**
+
+```bash
+git add src/shared/config.ts src/webview/store/index.ts
+git commit -m "feat(config): add boardZoom and cardZoom defaults"
+```
+
+---
+
+### Task 3: Add CSS zoom custom properties and calc() multipliers
+
+**Files:**
+- Modify: `src/webview/assets/main.css`
+- Modify: `src/webview/App.tsx`
+
+**Step 1: Add useEffect to App.tsx to sync CSS vars**
+
+In `src/webview/App.tsx`, add a new `useEffect` after the existing theme-change effect (after line 203):
+
+```typescript
+  // Sync zoom CSS custom properties
+  useEffect(() => {
+    const root = document.documentElement
+    root.style.setProperty('--board-zoom', String(cardSettings.boardZoom / 100))
+    root.style.setProperty('--card-zoom', String(cardSettings.cardZoom / 100))
+  }, [cardSettings.boardZoom, cardSettings.cardZoom])
+```
+
+**Step 2: Add zoom multipliers to comment-markdown in main.css**
+
+In `src/webview/assets/main.css`, change the `.comment-markdown` font-size (line 333) from:
+
+```css
+  font-size: 0.75rem;
+```
+
+to:
+
+```css
+  font-size: calc(0.75rem * var(--card-zoom, 1));
+```
+
+**Step 3: Add zoom multiplier to prose base**
+
+In `src/webview/assets/main.css`, add a font-size to the `.prose` rule (line 78), changing from:
+
+```css
+.prose {
+  line-height: 1.625;
+}
+```
+
+to:
+
+```css
+.prose {
+  font-size: calc(1rem * var(--card-zoom, 1));
+  line-height: 1.625;
+}
+```
+
+**Step 4: Add zoom multiplier to markdown editor textarea**
+
+In `src/webview/assets/main.css`, change the `.markdown-editor-textarea` font-size (line 284) from:
+
+```css
+  font-size: var(--vscode-editor-font-size, 13px);
+```
+
+to:
+
+```css
+  font-size: calc(var(--vscode-editor-font-size, 13px) * var(--card-zoom, 1));
+```
+
+**Step 5: Add board-zoom scoping class**
+
+In `src/webview/assets/main.css`, add at the end of the file:
+
+```css
+/* Board zoom scaling */
+.board-zoom-scope {
+  font-size: calc(1em * var(--board-zoom, 1));
+}
+```
+
+**Step 6: Apply board-zoom-scope class to board container**
+
+In `src/webview/App.tsx`, find the board container div (line 486):
+
+```tsx
+        <div className={editingFeature ? 'w-1/2' : 'w-full'}>
+```
+
+Change to:
+
+```tsx
+        <div className={`board-zoom-scope ${editingFeature ? 'w-1/2' : 'w-full'}`}>
+```
+
+**Step 7: Apply card-zoom scoping to card detail container**
+
+In `src/webview/App.tsx`, find the card detail container div (line 498):
+
+```tsx
+          <div className="w-1/2">
+```
+
+Change to:
+
+```tsx
+          <div className="w-1/2" style={{ fontSize: `calc(1em * var(--card-zoom, 1))` }}>
+```
+
+**Step 8: Build and verify**
+
+Run: `npm run build`
+Expected: Clean build. Open the board — everything should look the same at default zoom (100%).
+
+**Step 9: Commit**
+
+```bash
+git add src/webview/assets/main.css src/webview/App.tsx
+git commit -m "feat(zoom): add CSS custom properties and calc() multipliers for zoom"
+```
+
+---
+
+### Task 4: Add SettingsSlider component and Zoom section to Settings panel
+
+**Files:**
+- Modify: `src/webview/components/SettingsPanel.tsx`
+
+**Step 1: Add SettingsSlider component**
+
+In `src/webview/components/SettingsPanel.tsx`, add a new component after the `SettingsDropdown` component (after line 183):
+
+```typescript
+function SettingsSlider({ label, description, value, min, max, step, unit, onChange }: {
+  label: string
+  description?: string
+  value: number
+  min: number
+  max: number
+  step: number
+  unit?: string
+  onChange: (v: number) => void
+}) {
+  return (
+    <div
+      className="flex items-center justify-between gap-4 px-4 py-2 transition-colors"
+      onMouseEnter={e => e.currentTarget.style.background = 'var(--vscode-list-hoverBackground)'}
+      onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
+    >
+      <div className="flex-1 min-w-0">
+        <div className="text-sm" style={{ color: 'var(--vscode-foreground)' }}>{label}</div>
+        {description && (
+          <div className="text-xs mt-0.5" style={{ color: 'var(--vscode-descriptionForeground)' }}>{description}</div>
+        )}
+      </div>
+      <div className="flex items-center gap-2 shrink-0">
+        <input
+          type="range"
+          min={min}
+          max={max}
+          step={step}
+          value={value}
+          onChange={e => onChange(Number(e.target.value))}
+          className="w-20 h-1 rounded-full appearance-none cursor-pointer"
+          style={{
+            background: `linear-gradient(to right, var(--vscode-button-background) ${((value - min) / (max - min)) * 100}%, var(--vscode-badge-background, #6b7280) ${((value - min) / (max - min)) * 100}%)`,
+          }}
+        />
+        <span
+          className="text-xs font-mono w-10 text-right"
+          style={{ color: 'var(--vscode-foreground)' }}
+        >
+          {value}{unit || '%'}
+        </span>
+      </div>
+    </div>
+  )
+}
+```
+
+**Step 2: Add Zoom section to General tab**
+
+In `src/webview/components/SettingsPanel.tsx`, inside the General tab content (after the Card Display `SettingsSection` closing tag around line 647), add:
+
+```tsx
+              <div style={{ borderTop: '1px solid var(--vscode-panel-border)' }} />
+              <SettingsSection title="Zoom">
+                <SettingsSlider
+                  label="Board Zoom"
+                  description="Scale text size on the board view"
+                  value={local.boardZoom}
+                  min={75}
+                  max={150}
+                  step={5}
+                  onChange={v => update({ boardZoom: v })}
+                />
+                <SettingsSlider
+                  label="Card Detail Zoom"
+                  description="Scale text size in the card detail panel"
+                  value={local.cardZoom}
+                  min={75}
+                  max={150}
+                  step={5}
+                  onChange={v => update({ cardZoom: v })}
+                />
+              </SettingsSection>
+```
+
+**Step 3: Build and verify**
+
+Run: `npm run build`
+Expected: Clean build. Open Settings → General tab → see Zoom section with two sliders at 100%.
+
+**Step 4: Commit**
+
+```bash
+git add src/webview/components/SettingsPanel.tsx
+git commit -m "feat(settings): add zoom sliders to General tab"
+```
+
+---
+
+### Task 5: Add keyboard shortcuts for zoom
+
+**Files:**
+- Modify: `src/webview/App.tsx`
+
+**Step 1: Add zoom keyboard shortcuts**
+
+In `src/webview/App.tsx`, in the existing keyboard shortcuts `useEffect` (starting at line 109), add zoom handling inside the `handleKeyDown` function. Add this block **before** the `// Ignore if user is typing in an input` check (before line 134), right after the Ctrl+Z undo block:
+
+```typescript
+      // Ctrl/Cmd +/- for board zoom, Ctrl/Cmd+Shift +/- for card detail zoom
+      if ((e.key === '=' || e.key === '+' || e.key === '-') && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault()
+        const delta = (e.key === '-') ? -5 : 5
+        const { cardSettings } = useStore.getState()
+        if (e.shiftKey) {
+          const newZoom = Math.max(75, Math.min(150, cardSettings.cardZoom + delta))
+          if (newZoom !== cardSettings.cardZoom) {
+            const next = { ...cardSettings, cardZoom: newZoom }
+            setCardSettings(next)
+            vscode.postMessage({ type: 'saveSettings', settings: next })
+          }
+        } else {
+          const newZoom = Math.max(75, Math.min(150, cardSettings.boardZoom + delta))
+          if (newZoom !== cardSettings.boardZoom) {
+            const next = { ...cardSettings, boardZoom: newZoom }
+            setCardSettings(next)
+            vscode.postMessage({ type: 'saveSettings', settings: next })
+          }
+        }
+        return
+      }
+```
+
+**Step 2: Build and verify**
+
+Run: `npm run build`
+Expected: Clean build. Ctrl+= increases board zoom, Ctrl+- decreases it. Ctrl+Shift+= increases card detail zoom, Ctrl+Shift+- decreases it.
+
+**Step 3: Commit**
+
+```bash
+git add src/webview/App.tsx
+git commit -m "feat(zoom): add Ctrl+/- keyboard shortcuts for zoom"
+```
+
+---
+
+### Task 6: Type-check and final build
+
+**Files:** None (verification only)
+
+**Step 1: Type-check**
+
+Run: `npx tsc --noEmit`
+Expected: 0 errors
+
+**Step 2: Full build**
+
+Run: `npm run build`
+Expected: Clean build with no warnings related to zoom
+
+**Step 3: Final commit (if any fixups needed)**
+
+Only commit if fixes were needed. Otherwise, the feature is complete.

package/docs/sdk.md

@@ -730,11 +730,8 @@ sdk.setLabel('docs', { color: '#16a34a' })
 <a name="KanbanSDK+deleteLabel"></a>
 
 #### kanbanSDK.deleteLabel(name)
-Removes a label definition from the workspace configuration.
-
-This only removes the color/group definition — cards that use this
-label keep their label strings. Those labels will render with default
-gray styling in the UI.
+Removes a label definition from the workspace configuration and cascades
+the deletion to all cards by removing the label from their `labels` array.
 
 **Kind**: instance method of [<code>KanbanSDK</code>](#KanbanSDK)  
 
@@ -744,7 +741,7 @@ gray styling in the UI.
 
 **Example**  
 ```ts
-sdk.deleteLabel('bug')
+await sdk.deleteLabel('bug')
 ```
 
 * * *

package/package.json

@@ -2,7 +2,7 @@
   "name": "kanban-lite",
   "displayName": "Kanban Lite",
   "description": "A kanban board for your codebase. Features stored as markdown.",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "publisher": "borgius",
   "license": "MIT",
   "repository": {

package/src/cli/index.ts

@@ -825,9 +825,19 @@ async function cmdColumns(sdk: KanbanSDK, positional: string[], flags: Flags): P
       if (flags.json) console.log(JSON.stringify(columns, null, 2))
       break
     }
+    case 'cleanup': {
+      const columnId = positional[1]
+      if (!columnId) {
+        console.error(red('Usage: kl columns cleanup <id>'))
+        process.exit(1)
+      }
+      const moved = await sdk.cleanupColumn(columnId, boardId)
+      console.log(green(`Moved ${moved} card${moved === 1 ? '' : 's'} from "${columnId}" to deleted`))
+      break
+    }
     default:
       console.error(red(`Unknown columns subcommand: ${subcommand}`))
-      console.error('Available: list, add, update, remove')
+      console.error('Available: list, add, update, remove, cleanup')
       process.exit(1)
   }
 }
@@ -905,7 +915,7 @@ async function cmdLabels(sdk: KanbanSDK, positional: string[], flags: Flags): Pr
         console.error(red('Usage: kl labels delete <name>'))
         process.exit(1)
       }
-      sdk.deleteLabel(name)
+      await sdk.deleteLabel(name)
       if (flags.json) {
         console.log(JSON.stringify({ deleted: name }, null, 2))
       } else {

package/src/extension/KanbanPanel.ts

@@ -204,6 +204,9 @@ export class KanbanPanel {
           case 'removeColumn':
             await this._removeColumn(message.columnId)
             break
+          case 'cleanupColumn':
+            await this._cleanupColumn(message.columnId)
+            break
           case 'transferCard': {
             const sdk = this._getSDK()
             if (!sdk || !this._currentBoardId) break
@@ -265,7 +268,8 @@ export class KanbanPanel {
           case 'deleteLabel': {
             const sdk = this._getSDK()
             if (!sdk) break
-            sdk.deleteLabel(message.name)
+            await sdk.deleteLabel(message.name)
+            await this._loadFeatures()
             this._sendFeaturesToWebview()
             this._panel.webview.postMessage({ type: 'labelsUpdated', labels: sdk.getLabels() })
             break
@@ -560,10 +564,7 @@ export class KanbanPanel {
     if (!sdk) return
 
     try {
-      const deletedCards = this._features.filter(f => f.status === 'deleted')
-      for (const card of deletedCards) {
-        await sdk.permanentlyDeleteCard(card.id, this._currentBoardId)
-      }
+      await sdk.purgeDeletedCards(this._currentBoardId)
       this._features = this._features.filter(f => f.status !== 'deleted')
       this._sendFeaturesToWebview()
     } catch (err) {
@@ -939,4 +940,23 @@ export class KanbanPanel {
     sdk.removeColumn(columnId, this._currentBoardId)
     this._sendFeaturesToWebview()
   }
+
+  private async _cleanupColumn(columnId: string): Promise<void> {
+    const sdk = this._getSDK()
+    if (!sdk) return
+
+    this._migrating = true
+    try {
+      await sdk.cleanupColumn(columnId, this._currentBoardId)
+      // Update in-memory cache: mark all column cards as deleted
+      this._features = this._features.map(f =>
+        f.status === columnId ? { ...f, status: 'deleted' } : f
+      )
+      this._sendFeaturesToWebview()
+    } catch (err) {
+      vscode.window.showErrorMessage(`Failed to cleanup list: ${err}`)
+    } finally {
+      this._migrating = false
+    }
+  }
 }

package/src/mcp-server/index.ts

@@ -829,6 +829,24 @@ async function main(): Promise<void> {
     }
   )
 
+  server.tool(
+    'cleanup_column',
+    'Move all cards in a column to the deleted (soft-delete) column. The column itself is kept.',
+    {
+      boardId: z.string().optional().describe('Board ID (uses default board if omitted)'),
+      columnId: z.string().describe('Column ID to clean up'),
+    },
+    async ({ boardId, columnId }) => {
+      const moved = await sdk.cleanupColumn(columnId, boardId)
+      return {
+        content: [{
+          type: 'text' as const,
+          text: `Moved ${moved} card${moved === 1 ? '' : 's'} from "${columnId}" to deleted`,
+        }],
+      }
+    }
+  )
+
   // --- Label Tools ---
 
   server.tool('list_labels', 'List all label definitions with colors and groups', {
@@ -855,10 +873,10 @@ async function main(): Promise<void> {
     return { content: [{ type: 'text' as const, text: `Label "${oldName}" renamed to "${newName}"` }] }
   })
 
-  server.tool('delete_label', 'Remove a label definition (cards keep the label text)', {
+  server.tool('delete_label', 'Remove a label definition and remove it from all cards', {
     name: z.string().describe('Label name to remove')
   }, async ({ name }) => {
-    sdk.deleteLabel(name)
+    await sdk.deleteLabel(name)
     return { content: [{ type: 'text' as const, text: `Label "${name}" definition removed` }] }
   })
 

package/src/sdk/KanbanSDK.ts

@@ -983,25 +983,30 @@ export class KanbanSDK {
   }
 
   /**
-   * Removes a label definition from the workspace configuration.
-   *
-   * This only removes the color/group definition — cards that use this
-   * label keep their label strings. Those labels will render with default
-   * gray styling in the UI.
+   * Removes a label definition from the workspace configuration and cascades
+   * the deletion to all cards by removing the label from their `labels` array.
    *
    * @param name - The label name to remove.
    *
    * @example
    * ```ts
-   * sdk.deleteLabel('bug')
+   * await sdk.deleteLabel('bug')
    * ```
    */
-  deleteLabel(name: string): void {
+  async deleteLabel(name: string): Promise<void> {
     const config = readConfig(this.workspaceRoot)
     if (config.labels) {
       delete config.labels[name]
       writeConfig(this.workspaceRoot, config)
     }
+
+    // Cascade to all cards
+    const cards = await this.listCards()
+    for (const card of cards) {
+      if (card.labels.includes(name)) {
+        await this.updateCard(card.id, { labels: card.labels.filter(l => l !== name) })
+      }
+    }
   }
 
   /**
@@ -1452,6 +1457,58 @@ export class KanbanSDK {
     return board.columns
   }
 
+  /**
+   * Moves all cards in the specified column to the `deleted` (soft-delete) column.
+   *
+   * This is a non-destructive operation — cards are moved to the reserved
+   * `deleted` status and can be restored or permanently deleted later.
+   * The column itself is not removed.
+   *
+   * @param columnId - The ID of the column whose cards should be moved to `deleted`.
+   * @param boardId - Optional board ID. Defaults to the workspace's default board.
+   * @returns A promise resolving to the number of cards that were moved.
+   * @throws {Error} If the column is `'deleted'` (no-op protection).
+   *
+   * @example
+   * ```ts
+   * const moved = await sdk.cleanupColumn('blocked')
+   * console.log(`Moved ${moved} cards to deleted`)
+   * ```
+   */
+  async cleanupColumn(columnId: string, boardId?: string): Promise<number> {
+    if (columnId === DELETED_STATUS_ID) return 0
+    const cards = await this.listCards(undefined, boardId)
+    const cardsToMove = cards.filter(c => c.status === columnId)
+    for (const card of cardsToMove) {
+      await this.moveCard(card.id, DELETED_STATUS_ID, 0, boardId)
+    }
+    return cardsToMove.length
+  }
+
+  /**
+   * Permanently deletes all cards currently in the `deleted` column.
+   *
+   * This is equivalent to "empty trash". All soft-deleted cards are
+   * removed from disk. This operation cannot be undone.
+   *
+   * @param boardId - Optional board ID. Defaults to the workspace's default board.
+   * @returns A promise resolving to the number of cards that were permanently deleted.
+   *
+   * @example
+   * ```ts
+   * const count = await sdk.purgeDeletedCards()
+   * console.log(`Permanently deleted ${count} cards`)
+   * ```
+   */
+  async purgeDeletedCards(boardId?: string): Promise<number> {
+    const cards = await this.listCards(undefined, boardId)
+    const deleted = cards.filter(c => c.status === DELETED_STATUS_ID)
+    for (const card of deleted) {
+      await this.permanentlyDeleteCard(card.id, boardId)
+    }
+    return deleted.length
+  }
+
   /**
    * Reorders the columns of a board.
    *

package/src/sdk/__tests__/KanbanSDK.test.ts

@@ -379,11 +379,27 @@ describe('KanbanSDK', () => {
 
     it('deleteLabel removes label definition from config', async () => {
       sdk.setLabel('bug', { color: '#e11d48' })
-      sdk.deleteLabel('bug')
+      await sdk.deleteLabel('bug')
       const labels = sdk.getLabels()
       expect(labels['bug']).toBeUndefined()
     })
 
+    it('deleteLabel cascades to all cards removing the label', async () => {
+      writeCardFile(tempDir, '1-card.md', makeCardContent({
+        id: '1-card', status: 'backlog', labels: ['bug', 'frontend']
+      }), 'backlog')
+      sdk.setLabel('bug', { color: '#e11d48', group: 'Type' })
+
+      await sdk.deleteLabel('bug')
+
+      const labels = sdk.getLabels()
+      expect(labels['bug']).toBeUndefined()
+
+      const cards = await sdk.listCards()
+      expect(cards[0].labels).not.toContain('bug')
+      expect(cards[0].labels).toContain('frontend')
+    })
+
     it('renameLabel updates config key and cascades to all cards', async () => {
       writeCardFile(tempDir, '1-card.md', makeCardContent({
         id: '1-card', status: 'backlog', labels: ['bug', 'frontend']

package/src/sdk/__tests__/metadata.test.ts

@@ -34,6 +34,8 @@ function createV2Config(overrides?: Partial<KanbanConfig>): KanbanConfig {
     compactMode: false,
     markdownEditorMode: false,
     showDeletedColumn: false,
+    boardZoom: 100,
+    cardZoom: 100,
     port: 3000,
     ...overrides
   }
@@ -271,7 +273,7 @@ describe('SDK integration - metadata', () => {
     const fileContent = fs.readFileSync(card.filePath, 'utf-8')
     expect(fileContent).toContain('metadata:')
     expect(fileContent).toContain('  sprint: 5')
-    expect(fileContent).toContain('  team: backend')
+    expect(fileContent).toContain('  team: "backend"')
 
     // Verify round-trip through listCards
     const cards = await sdk.listCards()