kanban-lite 1.0.21 → 1.0.23

package/src/sdk/__tests__/multi-board.test.ts

@@ -32,6 +32,8 @@ function createV2Config(overrides?: Partial<KanbanConfig>): KanbanConfig {
     compactMode: false,
     markdownEditorMode: false,
     showDeletedColumn: false,
+    boardZoom: 100,
+    cardZoom: 100,
     port: 3000,
     ...overrides
   }

package/src/sdk/parser.ts

@@ -50,45 +50,25 @@ export function parseFeatureFile(content: string, filePath: string): Feature | n
   const frontmatter = frontmatterMatch[1]
   const rest = frontmatterMatch[2] || ''
 
-  const getValue = (key: string): string => {
-    const match = frontmatter.match(new RegExp(`^${key}:\\s*(.*)$`, 'm'))
-    if (!match) return ''
-    const value = match[1].trim().replace(/^["']|["']$/g, '')
-    return value === 'null' ? '' : value
+  let parsed: Record<string, unknown>
+  try {
+    const loaded = yaml.load(frontmatter, { schema: yaml.JSON_SCHEMA })
+    if (!loaded || typeof loaded !== 'object' || Array.isArray(loaded)) return null
+    parsed = loaded as Record<string, unknown>
+  } catch {
+    return null
   }
 
-  const getArrayValue = (key: string): string[] => {
-    const match = frontmatter.match(new RegExp(`^${key}:\\s*\\[([^\\]]*)\\]`, 'm'))
-    if (!match) return []
-    return match[1].split(',').map(s => s.trim().replace(/^["']|["']$/g, '')).filter(Boolean)
+  const str = (key: string): string => {
+    const val = parsed[key]
+    if (val == null) return ''
+    return String(val)
   }
 
-  const getMetadata = (): Record<string, any> | undefined => {
-    const lines = frontmatter.split('\n')
-    let metaStart = -1
-    for (let j = 0; j < lines.length; j++) {
-      if (/^metadata:\s*$/.test(lines[j])) {
-        metaStart = j + 1
-        break
-      }
-    }
-    if (metaStart === -1) return undefined
-    const indentedLines: string[] = []
-    for (let j = metaStart; j < lines.length; j++) {
-      if (/^\s/.test(lines[j]) || lines[j].trim() === '') {
-        indentedLines.push(lines[j])
-      } else {
-        break
-      }
-    }
-    if (indentedLines.length === 0) return undefined
-    try {
-      const parsed = yaml.load(indentedLines.join('\n'))
-      if (parsed && typeof parsed === 'object') return parsed as Record<string, any>
-      return undefined
-    } catch {
-      return undefined
-    }
+  const arr = (key: string): string[] => {
+    const val = parsed[key]
+    if (!Array.isArray(val)) return []
+    return val.filter(v => v != null).map(String)
   }
 
   // Split rest into card body and comment sections
@@ -111,23 +91,26 @@ export function parseFeatureFile(content: string, filePath: string): Feature | n
     }
   }
 
-  const meta = getMetadata()
-  const actions = getArrayValue('actions')
+  const actions = arr('actions')
+  const rawMeta = parsed.metadata
+  const meta = rawMeta != null && typeof rawMeta === 'object' && !Array.isArray(rawMeta)
+    ? rawMeta as Record<string, unknown>
+    : undefined
 
   return {
-    version: parseInt(getValue('version'), 10) || 0,
-    id: getValue('id') || extractIdFromFilename(filePath),
-    status: (getValue('status') as FeatureStatus) || 'backlog',
-    priority: (getValue('priority') as Priority) || 'medium',
-    assignee: getValue('assignee') || null,
-    dueDate: getValue('dueDate') || null,
-    created: getValue('created') || new Date().toISOString(),
-    modified: getValue('modified') || new Date().toISOString(),
-    completedAt: getValue('completedAt') || null,
-    labels: getArrayValue('labels'),
-    attachments: getArrayValue('attachments'),
+    version: typeof parsed.version === 'number' ? parsed.version : parseInt(str('version'), 10) || 0,
+    id: str('id') || extractIdFromFilename(filePath),
+    status: (str('status') as FeatureStatus) || 'backlog',
+    priority: (str('priority') as Priority) || 'medium',
+    assignee: parsed.assignee != null ? String(parsed.assignee) : null,
+    dueDate: parsed.dueDate != null ? String(parsed.dueDate) : null,
+    created: str('created') || new Date().toISOString(),
+    modified: str('modified') || new Date().toISOString(),
+    completedAt: parsed.completedAt != null ? String(parsed.completedAt) : null,
+    labels: arr('labels'),
+    attachments: arr('attachments'),
     comments,
-    order: getValue('order') || 'a0',
+    order: str('order') || 'a0',
     content: body.trim(),
     ...(meta ? { metadata: meta } : {}),
     ...(actions.length > 0 ? { actions } : {}),
@@ -146,43 +129,27 @@ export function parseFeatureFile(content: string, filePath: string): Feature | n
  * @returns The complete markdown string ready to be written to a `.md` file.
  */
 export function serializeFeature(feature: Feature): string {
-  const lines = [
-    '---',
-    `version: ${feature.version ?? CARD_FORMAT_VERSION}`,
-    `id: "${feature.id}"`,
-    `status: "${feature.status}"`,
-    `priority: "${feature.priority}"`,
-    `assignee: ${feature.assignee ? `"${feature.assignee}"` : 'null'}`,
-    `dueDate: ${feature.dueDate ? `"${feature.dueDate}"` : 'null'}`,
-    `created: "${feature.created}"`,
-    `modified: "${feature.modified}"`,
-    `completedAt: ${feature.completedAt ? `"${feature.completedAt}"` : 'null'}`,
-    `labels: [${feature.labels.map(l => `"${l}"`).join(', ')}]`,
-    `attachments: [${(feature.attachments || []).map(a => `"${a}"`).join(', ')}]`,
-    `order: "${feature.order}"`,
-  ]
-
-  if (feature.actions && feature.actions.length > 0) {
-    lines.push(`actions: [${feature.actions.map(a => `"${a}"`).join(', ')}]`)
+  const frontmatterObj: Record<string, unknown> = {
+    version: feature.version ?? CARD_FORMAT_VERSION,
+    id: feature.id,
+    status: feature.status,
+    priority: feature.priority,
+    assignee: feature.assignee ?? null,
+    dueDate: feature.dueDate ?? null,
+    created: feature.created,
+    modified: feature.modified,
+    completedAt: feature.completedAt ?? null,
+    labels: feature.labels,
+    attachments: feature.attachments || [],
+    order: feature.order,
+    ...(feature.actions?.length ? { actions: feature.actions } : {}),
+    ...(feature.metadata && Object.keys(feature.metadata).length > 0 ? { metadata: feature.metadata } : {}),
   }
 
-  if (feature.metadata && Object.keys(feature.metadata).length > 0) {
-    const metaYaml = yaml.dump(feature.metadata, { indent: 2, lineWidth: -1 })
-    lines.push('metadata:')
-    for (const line of metaYaml.trimEnd().split('\n')) {
-      lines.push('  ' + line)
-    }
-  }
-
-  lines.push('---')
-  lines.push('')
-
-  const frontmatter = lines.join('\n')
-
-  let result = frontmatter + feature.content
+  const yamlStr = yaml.dump(frontmatterObj, { lineWidth: -1, quotingType: '"', forceQuotes: true })
+  let result = `---\n${yamlStr}---\n\n${feature.content}`
 
-  const comments = feature.comments || []
-  for (const comment of comments) {
+  for (const comment of feature.comments || []) {
     result += '\n\n---\n'
     result += `comment: true\n`
     result += `id: "${comment.id}"\n`

package/src/shared/config.ts

@@ -84,6 +84,10 @@ export interface KanbanConfig {
   markdownEditorMode: boolean
   /** Whether to show the deleted column in the UI. */
   showDeletedColumn: boolean
+  /** Zoom level for the board view (75–150). */
+  boardZoom: number
+  /** Zoom level for the card detail panel (75–150). */
+  cardZoom: number
   /** Port number for the standalone HTTP server. */
   port: number
   /** Registered webhook endpoints for event notifications. */
@@ -145,6 +149,8 @@ export const DEFAULT_CONFIG: KanbanConfig = {
   compactMode: false,
   markdownEditorMode: false,
   showDeletedColumn: false,
+  boardZoom: 100,
+  cardZoom: 100,
   port: 3000,
   labels: {}
 }
@@ -211,6 +217,8 @@ function migrateConfigV1ToV2(raw: Record<string, unknown>): KanbanConfig {
     compactMode: v1.compactMode,
     markdownEditorMode: v1.markdownEditorMode,
     showDeletedColumn: false,
+    boardZoom: 100,
+    cardZoom: 100,
     port: 3000
   }
 }
@@ -386,7 +394,9 @@ export function configToSettings(config: KanbanConfig): CardDisplaySettings {
     markdownEditorMode: config.markdownEditorMode,
     showDeletedColumn: config.showDeletedColumn,
     defaultPriority: config.defaultPriority,
-    defaultStatus: config.defaultStatus
+    defaultStatus: config.defaultStatus,
+    boardZoom: config.boardZoom ?? 100,
+    cardZoom: config.cardZoom ?? 100
   }
 }
 
@@ -414,6 +424,8 @@ export function settingsToConfig(config: KanbanConfig, settings: CardDisplaySett
     compactMode: settings.compactMode,
     showDeletedColumn: settings.showDeletedColumn,
     defaultPriority: settings.defaultPriority,
-    defaultStatus: settings.defaultStatus
+    defaultStatus: settings.defaultStatus,
+    boardZoom: settings.boardZoom,
+    cardZoom: settings.cardZoom
   }
 }

package/src/shared/types.ts

@@ -250,6 +250,10 @@ export interface CardDisplaySettings {
   defaultPriority: Priority
   /** The default column/status assigned to newly created cards. */
   defaultStatus: string
+  /** 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
 }
 
 export interface LabelDefinition {

package/src/standalone/__tests__/server.integration.test.ts

@@ -376,7 +376,7 @@ describe('Standalone Server Integration', () => {
       expect(fileContent).toContain('status: "todo"')
       expect(fileContent).toContain('priority: "high"')
       expect(fileContent).toContain('# My New Feature')
-      expect(fileContent).toContain('labels: ["frontend"]')
+      expect(fileContent).toContain('- "frontend"')
     })
 
     it('should create feature in its status subfolder', async () => {
@@ -710,7 +710,7 @@ describe('Standalone Server Integration', () => {
       const fileContent = fs.readFileSync(path.join(tempDir, 'boards', 'default', 'backlog', 'update-me.md'), 'utf-8')
       expect(fileContent).toContain('priority: "critical"')
       expect(fileContent).toContain('assignee: "alice"')
-      expect(fileContent).toContain('labels: ["urgent"]')
+      expect(fileContent).toContain('- "urgent"')
     })
 
     it('should set completedAt when status changes to done', async () => {

package/src/standalone/index.ts

@@ -1,8 +1,9 @@
+import { readConfig } from '../shared/config'
 import { startServer } from './server'
 
-function parseArgs(args: string[]): { dir: string; port: number; noBrowser: boolean } {
+function parseArgs(args: string[], defaultPort: number): { dir: string; port: number; noBrowser: boolean } {
   let dir = '.kanban'
-  let port = 3000
+  let port = defaultPort
   let noBrowser = false
 
   for (let i = 0; i < args.length; i++) {
@@ -25,7 +26,7 @@ Usage: kanban-md [options]
 
 Options:
   -d, --dir <path>    Features directory (default: .kanban)
-  -p, --port <number> Port to listen on (default: 3000)
+  -p, --port <number> Port to listen on (default: .kanban.json port or 3000)
   --no-browser        Don't open browser automatically
   -h, --help          Show this help message
 
@@ -43,7 +44,9 @@ REST API available at http://localhost:<port>/api
   return { dir, port, noBrowser }
 }
 
-const { dir, port, noBrowser } = parseArgs(process.argv.slice(2))
+// Read config from cwd to get the configured port default
+const configPort = readConfig(process.cwd()).port
+const { dir, port, noBrowser } = parseArgs(process.argv.slice(2), configPort)
 
 const server = startServer(dir, port)
 

package/src/standalone/server.ts

@@ -260,10 +260,7 @@ export function startServer(featuresDir: string, port: number, webviewDir?: stri
 
   async function doPurgeDeletedCards(): Promise<boolean> {
     try {
-      const deletedCards = features.filter(f => f.status === 'deleted')
-      for (const card of deletedCards) {
-        await sdk.permanentlyDeleteCard(card.id, currentBoardId)
-      }
+      await sdk.purgeDeletedCards(currentBoardId)
       await loadFeatures()
       broadcast(buildInitMessage())
       return true
@@ -312,6 +309,21 @@ export function startServer(featuresDir: string, port: number, webviewDir?: stri
     }
   }
 
+  async function doCleanupColumn(columnId: string): Promise<boolean> {
+    try {
+      migrating = true
+      await sdk.cleanupColumn(columnId, currentBoardId)
+      await loadFeatures()
+      broadcast(buildInitMessage())
+      return true
+    } catch (err) {
+      console.error('Failed to cleanup column:', err)
+      return false
+    } finally {
+      migrating = false
+    }
+  }
+
   function doSaveSettings(newSettings: CardDisplaySettings): void {
     sdk.updateSettings(newSettings)
     broadcast(buildInitMessage())
@@ -518,6 +530,10 @@ export function startServer(featuresDir: string, port: number, webviewDir?: stri
         await doRemoveColumn(msg.columnId as string)
         break
 
+      case 'cleanupColumn':
+        await doCleanupColumn(msg.columnId as string)
+        break
+
       case 'removeAttachment': {
         const featureId = msg.featureId as string
         const feature = await doRemoveAttachment(featureId, msg.attachment as string)
@@ -643,14 +659,17 @@ export function startServer(featuresDir: string, port: number, webviewDir?: stri
 
       case 'renameLabel': {
         await sdk.renameLabel(msg.oldName as string, msg.newName as string)
+        await loadFeatures()
         broadcast({ type: 'labelsUpdated', labels: sdk.getLabels() })
         broadcast(buildInitMessage())
         break
       }
 
       case 'deleteLabel': {
-        sdk.deleteLabel(msg.name as string)
+        await sdk.deleteLabel(msg.name as string)
+        await loadFeatures()
         broadcast({ type: 'labelsUpdated', labels: sdk.getLabels() })
+        broadcast(buildInitMessage())
         break
       }
 
@@ -1291,6 +1310,9 @@ export function startServer(featuresDir: string, port: number, webviewDir?: stri
         const newName = body.newName as string
         if (!newName) return jsonError(res, 400, 'newName is required')
         await sdk.renameLabel(name, newName)
+        await loadFeatures()
+        broadcast({ type: 'labelsUpdated', labels: sdk.getLabels() })
+        broadcast(buildInitMessage())
         return jsonOk(res, sdk.getLabels())
       } catch (err) {
         return jsonError(res, 400, String(err))
@@ -1301,7 +1323,10 @@ export function startServer(featuresDir: string, port: number, webviewDir?: stri
     if (params) {
       try {
         const name = decodeURIComponent(params.name)
-        sdk.deleteLabel(name)
+        await sdk.deleteLabel(name)
+        await loadFeatures()
+        broadcast({ type: 'labelsUpdated', labels: sdk.getLabels() })
+        broadcast(buildInitMessage())
         return jsonOk(res, { success: true })
       } catch (err) {
         return jsonError(res, 400, String(err))

package/src/webview/App.tsx

@@ -131,6 +131,29 @@ function App(): React.JSX.Element {
         return
       }
 
+      // 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
+      }
+
       // Ignore if user is typing in an input or contentEditable (e.g. TipTap editor)
       if (
         e.target instanceof HTMLInputElement ||
@@ -178,7 +201,7 @@ function App(): React.JSX.Element {
       window.removeEventListener('mousedown', handleMouseDown)
       if (altDownTimer) clearTimeout(altDownTimer)
     }
-  }, [createFeatureOpen, handleUndoLatest])
+  }, [createFeatureOpen, handleUndoLatest, setCardSettings])
 
   // Listen for VSCode theme changes
   useEffect(() => {
@@ -202,6 +225,13 @@ function App(): React.JSX.Element {
     return () => observer.disconnect()
   }, [setIsDarkMode])
 
+  // 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])
+
   // Listen for messages from extension
   useEffect(() => {
     const handleMessage = (event: MessageEvent<ExtensionMessage>) => {
@@ -387,6 +417,14 @@ function App(): React.JSX.Element {
     vscode.postMessage({ type: 'removeColumn', columnId })
   }
 
+  const handleCleanupColumn = (columnId: string): void => {
+    const col = columns.find(c => c.id === columnId)
+    if (!col) return
+    const featuresInColumn = useStore.getState().features.filter(f => f.status === columnId)
+    if (featuresInColumn.length === 0) return
+    vscode.postMessage({ type: 'cleanupColumn', columnId })
+  }
+
   const handleSaveColumn = (data: { name: string; color: string }): void => {
     if (editingColumn) {
       vscode.postMessage({ type: 'editColumn', columnId: editingColumn.id, updates: data })
@@ -483,19 +521,20 @@ function App(): React.JSX.Element {
         onCreateBoard={(name) => vscode.postMessage({ type: 'createBoard', name })}
       />
       <div className="flex-1 flex overflow-hidden">
-        <div className={editingFeature ? 'w-1/2' : 'w-full'}>
+        <div className={`board-zoom-scope ${editingFeature ? 'w-1/2' : 'w-full'}`}>
           <KanbanBoard
             onFeatureClick={handleFeatureClick}
             onAddFeature={handleAddFeatureInColumn}
             onMoveFeature={handleMoveFeature}
             onEditColumn={handleEditColumn}
             onRemoveColumn={handleRemoveColumn}
+            onCleanupColumn={handleCleanupColumn}
             onPurgeDeletedCards={handlePurgeDeletedCards}
             selectedFeatureId={editingFeature?.id}
           />
         </div>
         {editingFeature && (
-          <div className="w-1/2">
+          <div className="w-1/2" style={{ fontSize: `calc(1em * var(--card-zoom, 1))` }}>
             <FeatureEditor
               featureId={editingFeature.id}
               content={editingFeature.content}

package/src/webview/assets/main.css

@@ -76,6 +76,7 @@ input:focus-visible {
 
 /* Prose (markdown) styling for editor */
 .prose {
+  font-size: calc(1rem * var(--card-zoom, 1));
   line-height: 1.625;
 }
 
@@ -281,7 +282,7 @@ input:focus-visible {
   background: transparent;
   color: var(--vscode-foreground);
   font-family: var(--vscode-editor-font-family, 'SF Mono', Monaco, Menlo, Consolas, monospace);
-  font-size: var(--vscode-editor-font-size, 13px);
+  font-size: calc(var(--vscode-editor-font-size, 13px) * var(--card-zoom, 1));
   line-height: 1.6;
   tab-size: 2;
 }
@@ -330,7 +331,7 @@ input:focus-visible {
 
 /* Comment markdown styling - compact prose for comment bubbles */
 .comment-markdown {
-  font-size: 0.75rem;
+  font-size: calc(0.75rem * var(--card-zoom, 1));
   line-height: 1.5;
 }
 
@@ -432,3 +433,31 @@ input:focus-visible {
 .comment-markdown em {
   font-style: italic;
 }
+
+/* Board zoom scaling */
+.board-zoom-scope {
+  font-size: calc(1em * var(--board-zoom, 1));
+}
+
+/* Settings slider */
+.settings-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 5rem;
+  height: 4px;
+  border-radius: 2px;
+  outline: none;
+  cursor: pointer;
+}
+
+.settings-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--vscode-button-background);
+  border: 2px solid var(--vscode-editor-background);
+  box-shadow: 0 0 0 1px var(--vscode-button-background);
+  cursor: pointer;
+}

package/src/webview/components/KanbanBoard.tsx

@@ -1,6 +1,7 @@
-import { useState, useCallback } from 'react'
+import { useState, useCallback, useRef, useEffect } from 'react'
 import { KanbanColumn } from './KanbanColumn'
 import { useStore } from '../store'
+import type { SortOrder } from '../store'
 import type { Feature, FeatureStatus } from '../../shared/types'
 import { DELETED_COLUMN } from '../../shared/types'
 
@@ -15,16 +16,41 @@ interface KanbanBoardProps {
   onMoveFeature: (featureId: string, newStatus: string, newOrder: number) => void
   onEditColumn: (columnId: string) => void
   onRemoveColumn: (columnId: string) => void
+  onCleanupColumn: (columnId: string) => void
   onPurgeDeletedCards: () => void
   selectedFeatureId?: string
 }
 
-export function KanbanBoard({ onFeatureClick, onAddFeature, onMoveFeature, onEditColumn, onRemoveColumn, onPurgeDeletedCards, selectedFeatureId }: KanbanBoardProps) {
+export function KanbanBoard({ onFeatureClick, onAddFeature, onMoveFeature, onEditColumn, onRemoveColumn, onCleanupColumn, onPurgeDeletedCards, selectedFeatureId }: KanbanBoardProps) {
+  const scrollContainerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!selectedFeatureId) return
+    const container = scrollContainerRef.current
+    if (!container) return
+    // Wait a frame so the panel layout transition has started and the board has shrunk
+    requestAnimationFrame(() => {
+      const cardEl = container.querySelector<HTMLElement>(`[data-card-id="${selectedFeatureId}"]`)
+      if (!cardEl) return
+      const containerRect = container.getBoundingClientRect()
+      const cardRect = cardEl.getBoundingClientRect()
+      // Check if the card is fully visible horizontally inside the scroll container
+      const isFullyVisible = cardRect.left >= containerRect.left && cardRect.right <= containerRect.right
+      if (!isFullyVisible) {
+        // Scroll so the card's right edge is visible with 10px breathing room
+        const overflow = cardRect.right - containerRect.right
+        container.scrollBy({ left: overflow + 10, behavior: 'smooth' })
+      }
+    })
+  }, [selectedFeatureId])
+
   const columns = useStore((s) => s.columns)
   const cardSettings = useStore((s) => s.cardSettings)
   const getFilteredFeaturesByStatus = useStore((s) => s.getFilteredFeaturesByStatus)
   const getFeaturesByStatus = useStore((s) => s.getFeaturesByStatus)
   const layout = useStore((s) => s.layout)
+  const columnSorts = useStore((s) => s.columnSorts)
+  const setColumnSort = useStore((s) => s.setColumnSort)
   const [draggedFeature, setDraggedFeature] = useState<Feature | null>(null)
   const [dropTarget, setDropTarget] = useState<DropTarget | null>(null)
 
@@ -121,7 +147,7 @@ export function KanbanBoard({ onFeatureClick, onAddFeature, onMoveFeature, onEdi
   const isVertical = layout === 'vertical'
 
   return (
-    <div className={isVertical ? "h-full overflow-y-auto p-4" : "h-full overflow-x-auto p-4"}>
+    <div ref={scrollContainerRef} className={isVertical ? "h-full overflow-y-auto p-4" : "h-full overflow-x-auto p-4"}>
       <div className={isVertical ? "flex flex-col gap-4" : "flex gap-4 h-full min-w-max"}>
         {columns.map((column) => (
           <KanbanColumn
@@ -132,6 +158,7 @@ export function KanbanBoard({ onFeatureClick, onAddFeature, onMoveFeature, onEdi
             onAddFeature={onAddFeature}
             onEditColumn={onEditColumn}
             onRemoveColumn={onRemoveColumn}
+            onCleanupColumn={onCleanupColumn}
             onDragStart={handleDragStart}
             onDragOver={handleDragOver}
             onDragOverCard={handleDragOverCard}
@@ -141,6 +168,8 @@ export function KanbanBoard({ onFeatureClick, onAddFeature, onMoveFeature, onEdi
             dropTarget={dropTarget}
             layout={layout}
             selectedFeatureId={selectedFeatureId}
+            sort={(columnSorts[column.id] || 'order') as SortOrder}
+            onSortChange={(s) => setColumnSort(column.id, s)}
           />
         ))}
         {cardSettings.showDeletedColumn && (
@@ -152,6 +181,7 @@ export function KanbanBoard({ onFeatureClick, onAddFeature, onMoveFeature, onEdi
             onAddFeature={onAddFeature}
             onEditColumn={onEditColumn}
             onRemoveColumn={onRemoveColumn}
+            onCleanupColumn={onCleanupColumn}
             onDragStart={handleDragStart}
             onDragOver={handleDragOver}
             onDragOverCard={handleDragOverCard}
@@ -163,6 +193,8 @@ export function KanbanBoard({ onFeatureClick, onAddFeature, onMoveFeature, onEdi
             isDeletedColumn
             onPurgeColumn={onPurgeDeletedCards}
             selectedFeatureId={selectedFeatureId}
+            sort={(columnSorts[DELETED_COLUMN.id] || 'order') as SortOrder}
+            onSortChange={(s) => setColumnSort(DELETED_COLUMN.id, s)}
           />
         )}
       </div>