kanban-lite 1.0.9 → 1.0.13

package/src/standalone/server.ts

@@ -3,13 +3,14 @@ import * as fs from 'fs'
 import * as path from 'path'
 import { WebSocketServer, WebSocket } from 'ws'
 import chokidar from 'chokidar'
-import type { Comment, Feature, FeatureStatus, Priority, KanbanColumn, FeatureFrontmatter, CardDisplaySettings } from '../shared/types'
+import { generateSlug, type Comment, type Feature, type Priority, type KanbanColumn, type FeatureFrontmatter, type CardDisplaySettings } from '../shared/types'
 import { KanbanSDK } from '../sdk/KanbanSDK'
 import { serializeFeature } from '../sdk/parser'
+import { readConfig } from '../shared/config'
 import { fireWebhooks, loadWebhooks, createWebhook, deleteWebhook } from './webhooks'
 
 interface CreateFeatureData {
-  status: FeatureStatus
+  status: string
   priority: Priority
   content: string
   assignee: string | null
@@ -35,6 +36,7 @@ export function startServer(featuresDir: string, port: number, webviewDir?: stri
   let migrating = false
   let currentEditingFeatureId: string | null = null
   let lastWrittenContent = ''
+  let currentBoardId: string | undefined
 
   // Resolve webview static files directory
   const resolvedWebviewDir = webviewDir || path.join(__dirname, 'standalone-webview')
@@ -121,20 +123,23 @@ export function startServer(featuresDir: string, port: number, webviewDir?: stri
   // --- Feature loading ---
 
   async function loadFeatures(): Promise<void> {
-    features = await sdk.listCards(sdk.listColumns().map(c => c.id))
+    features = await sdk.listCards(sdk.listColumns(currentBoardId).map(c => c.id), currentBoardId)
   }
 
   // --- Message building & broadcast ---
 
   function buildInitMessage(): unknown {
+    const config = readConfig(workspaceRoot)
     const settings = sdk.getSettings()
     settings.showBuildWithAI = false
     settings.markdownEditorMode = false
     return {
       type: 'init',
       features,
-      columns: sdk.listColumns(),
-      settings
+      columns: sdk.listColumns(currentBoardId),
+      settings,
+      boards: sdk.listBoards(),
+      currentBoard: currentBoardId || config.defaultBoard
     }
   }
 
@@ -160,6 +165,7 @@ export function startServer(featuresDir: string, port: number, webviewDir?: stri
         assignee: data.assignee,
         dueDate: data.dueDate,
         labels: data.labels,
+        boardId: currentBoardId,
       })
       await loadFeatures()
       broadcast(buildInitMessage())
@@ -177,7 +183,7 @@ export function startServer(featuresDir: string, port: number, webviewDir?: stri
 
     migrating = true
     try {
-      const updated = await sdk.moveCard(featureId, newStatus as FeatureStatus, newOrder)
+      const updated = await sdk.moveCard(featureId, newStatus, newOrder, currentBoardId)
       await loadFeatures()
       broadcast(buildInitMessage())
       fireWebhooks(workspaceRoot, 'task.moved', {
@@ -196,7 +202,7 @@ export function startServer(featuresDir: string, port: number, webviewDir?: stri
 
     migrating = true
     try {
-      const updated = await sdk.updateCard(featureId, updates)
+      const updated = await sdk.updateCard(featureId, updates, currentBoardId)
       lastWrittenContent = serializeFeature(updated)
       await loadFeatures()
       broadcast(buildInitMessage())
@@ -213,7 +219,7 @@ export function startServer(featuresDir: string, port: number, webviewDir?: stri
 
     try {
       const deleted = sanitizeFeature(feature)
-      await sdk.deleteCard(featureId)
+      await sdk.deleteCard(featureId, currentBoardId)
       await loadFeatures()
       broadcast(buildInitMessage())
       fireWebhooks(workspaceRoot, 'task.deleted', deleted)
@@ -225,7 +231,7 @@ export function startServer(featuresDir: string, port: number, webviewDir?: stri
   }
 
   function doAddColumn(name: string, color: string): KanbanColumn {
-    const existingColumns = sdk.listColumns()
+    const existingColumns = sdk.listColumns(currentBoardId)
     const id = name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '')
     let uniqueId = id
     let counter = 1
@@ -233,7 +239,7 @@ export function startServer(featuresDir: string, port: number, webviewDir?: stri
       uniqueId = `${id}-${counter++}`
     }
     const column: KanbanColumn = { id: uniqueId, name, color }
-    sdk.addColumn(column)
+    sdk.addColumn(column, currentBoardId)
     broadcast(buildInitMessage())
     fireWebhooks(workspaceRoot, 'column.created', column)
     return column
@@ -241,7 +247,7 @@ export function startServer(featuresDir: string, port: number, webviewDir?: stri
 
   function doEditColumn(columnId: string, updates: { name: string; color: string }): KanbanColumn | null {
     try {
-      const columns = sdk.updateColumn(columnId, { name: updates.name, color: updates.color })
+      const columns = sdk.updateColumn(columnId, { name: updates.name, color: updates.color }, currentBoardId)
       const updated = columns.find(c => c.id === columnId) ?? null
       broadcast(buildInitMessage())
       if (updated) fireWebhooks(workspaceRoot, 'column.updated', updated)
@@ -253,11 +259,11 @@ export function startServer(featuresDir: string, port: number, webviewDir?: stri
 
   async function doRemoveColumn(columnId: string): Promise<{ removed: boolean; error?: string }> {
     try {
-      const columns = sdk.listColumns()
+      const columns = sdk.listColumns(currentBoardId)
       if (columns.length <= 1) return { removed: false, error: 'Cannot remove last column' }
       const col = columns.find(c => c.id === columnId)
       if (!col) return { removed: false, error: 'Column not found' }
-      await sdk.removeColumn(columnId)
+      await sdk.removeColumn(columnId, currentBoardId)
       broadcast(buildInitMessage())
       fireWebhooks(workspaceRoot, 'column.deleted', col)
       return { removed: true }
@@ -282,7 +288,7 @@ export function startServer(featuresDir: string, port: number, webviewDir?: stri
     // Register attachment via SDK (skips copy since file is already in place)
     migrating = true
     try {
-      const updated = await sdk.addAttachment(featureId, path.join(featureDir, filename))
+      const updated = await sdk.addAttachment(featureId, path.join(featureDir, filename), currentBoardId)
       lastWrittenContent = serializeFeature(updated)
       await loadFeatures()
     } finally {
@@ -297,7 +303,7 @@ export function startServer(featuresDir: string, port: number, webviewDir?: stri
 
     migrating = true
     try {
-      const updated = await sdk.removeAttachment(featureId, attachment)
+      const updated = await sdk.removeAttachment(featureId, attachment, currentBoardId)
       lastWrittenContent = serializeFeature(updated)
       await loadFeatures()
       broadcast(buildInitMessage())
@@ -312,7 +318,7 @@ export function startServer(featuresDir: string, port: number, webviewDir?: stri
   async function doAddComment(featureId: string, author: string, content: string): Promise<Comment | null> {
     migrating = true
     try {
-      const updated = await sdk.addComment(featureId, author, content)
+      const updated = await sdk.addComment(featureId, author, content, currentBoardId)
       lastWrittenContent = serializeFeature(updated)
       const comment = updated.comments[updated.comments.length - 1]
       await loadFeatures()
@@ -329,7 +335,7 @@ export function startServer(featuresDir: string, port: number, webviewDir?: stri
   async function doUpdateComment(featureId: string, commentId: string, content: string): Promise<Comment | null> {
     migrating = true
     try {
-      const updated = await sdk.updateComment(featureId, commentId, content)
+      const updated = await sdk.updateComment(featureId, commentId, content, currentBoardId)
       lastWrittenContent = serializeFeature(updated)
       const comment = (updated.comments || []).find(c => c.id === commentId)
       await loadFeatures()
@@ -351,7 +357,7 @@ export function startServer(featuresDir: string, port: number, webviewDir?: stri
 
     migrating = true
     try {
-      const updated = await sdk.deleteComment(featureId, commentId)
+      const updated = await sdk.deleteComment(featureId, commentId, currentBoardId)
       lastWrittenContent = serializeFeature(updated)
       await loadFeatures()
       broadcast(buildInitMessage())
@@ -519,6 +525,36 @@ export function startServer(featuresDir: string, port: number, webviewDir?: stri
         break
       }
 
+      case 'switchBoard':
+        currentBoardId = msg.boardId as string
+        migrating = true
+        try {
+          await loadFeatures()
+          broadcast(buildInitMessage())
+        } finally {
+          migrating = false
+        }
+        break
+
+      case 'createBoard': {
+        const boardName = msg.name as string
+        const boardId = generateSlug(boardName) || 'board'
+        try {
+          sdk.createBoard(boardId, boardName)
+          currentBoardId = boardId
+          migrating = true
+          try {
+            await loadFeatures()
+            broadcast(buildInitMessage())
+          } finally {
+            migrating = false
+          }
+        } catch (err) {
+          console.error('Failed to create board:', err)
+        }
+        break
+      }
+
       // VSCode-specific actions — no-ops in standalone
       case 'openFile':
       case 'focusMenuBar':
@@ -552,9 +588,191 @@ export function startServer(featuresDir: string, port: number, webviewDir?: stri
     const route = (expectedMethod: string, pattern: string): Record<string, string> | null =>
       matchRoute(expectedMethod, method, pathname, pattern)
 
+    // ==================== BOARDS API ====================
+
+    let params = route('GET', '/api/boards')
+    if (params) {
+      return jsonOk(res, sdk.listBoards())
+    }
+
+    params = route('POST', '/api/boards')
+    if (params) {
+      try {
+        const body = await readBody(req)
+        const id = body.id as string
+        const name = body.name as string
+        if (!id) return jsonError(res, 400, 'id is required')
+        if (!name) return jsonError(res, 400, 'name is required')
+        const board = sdk.createBoard(id, name, {
+          description: body.description as string | undefined,
+          columns: body.columns as KanbanColumn[] | undefined,
+        })
+        return jsonOk(res, board, 201)
+      } catch (err) {
+        return jsonError(res, 400, String(err))
+      }
+    }
+
+    params = route('GET', '/api/boards/:boardId')
+    if (params) {
+      try {
+        const { boardId } = params
+        const board = sdk.getBoard(boardId)
+        return jsonOk(res, board)
+      } catch (err) {
+        return jsonError(res, 404, String(err))
+      }
+    }
+
+    params = route('PUT', '/api/boards/:boardId')
+    if (params) {
+      try {
+        const { boardId } = params
+        const body = await readBody(req)
+        const board = sdk.updateBoard(boardId, body as Record<string, unknown>)
+        return jsonOk(res, board)
+      } catch (err) {
+        return jsonError(res, 400, String(err))
+      }
+    }
+
+    params = route('DELETE', '/api/boards/:boardId')
+    if (params) {
+      try {
+        const { boardId } = params
+        await sdk.deleteBoard(boardId)
+        return jsonOk(res, { deleted: true })
+      } catch (err) {
+        return jsonError(res, 400, String(err))
+      }
+    }
+
+    // Transfer a task between boards
+    params = route('POST', '/api/boards/:boardId/tasks/:id/transfer')
+    if (params) {
+      try {
+        const { boardId, id } = params
+        const body = await readBody(req)
+        const config = readConfig(workspaceRoot)
+        const fromBoard = currentBoardId || config.defaultBoard
+        const targetStatus = body.targetStatus as string | undefined
+        const card = await sdk.transferCard(id, fromBoard, boardId, targetStatus)
+        return jsonOk(res, sanitizeFeature(card))
+      } catch (err) {
+        return jsonError(res, 400, String(err))
+      }
+    }
+
+    // ==================== BOARD-SCOPED TASKS API ====================
+
+    params = route('GET', '/api/boards/:boardId/tasks')
+    if (params) {
+      try {
+        const { boardId } = params
+        const boardColumns = sdk.listColumns(boardId)
+        const boardTasks = await sdk.listCards(boardColumns.map(c => c.id), boardId)
+        let result = boardTasks.map(sanitizeFeature)
+        const status = url.searchParams.get('status')
+        if (status) result = result.filter(f => f.status === status)
+        const priority = url.searchParams.get('priority')
+        if (priority) result = result.filter(f => f.priority === priority)
+        const assignee = url.searchParams.get('assignee')
+        if (assignee) result = result.filter(f => f.assignee === assignee)
+        const label = url.searchParams.get('label')
+        if (label) result = result.filter(f => f.labels.includes(label))
+        return jsonOk(res, result)
+      } catch (err) {
+        return jsonError(res, 400, String(err))
+      }
+    }
+
+    params = route('POST', '/api/boards/:boardId/tasks')
+    if (params) {
+      try {
+        const { boardId } = params
+        const body = await readBody(req)
+        const content = (body.content as string) || ''
+        if (!content) return jsonError(res, 400, 'content is required')
+        const feature = await sdk.createCard({
+          content,
+          status: (body.status as string) || 'backlog',
+          priority: (body.priority as Priority) || 'medium',
+          assignee: (body.assignee as string) || null,
+          dueDate: (body.dueDate as string) || null,
+          labels: (body.labels as string[]) || [],
+          boardId,
+        })
+        return jsonOk(res, sanitizeFeature(feature), 201)
+      } catch (err) {
+        return jsonError(res, 400, String(err))
+      }
+    }
+
+    params = route('GET', '/api/boards/:boardId/tasks/:id')
+    if (params) {
+      try {
+        const { boardId, id } = params
+        const card = await sdk.getCard(id, boardId)
+        if (!card) return jsonError(res, 404, 'Task not found')
+        return jsonOk(res, sanitizeFeature(card))
+      } catch (err) {
+        return jsonError(res, 400, String(err))
+      }
+    }
+
+    params = route('PUT', '/api/boards/:boardId/tasks/:id')
+    if (params) {
+      try {
+        const { boardId, id } = params
+        const body = await readBody(req)
+        const feature = await sdk.updateCard(id, body as Partial<Feature>, boardId)
+        return jsonOk(res, sanitizeFeature(feature))
+      } catch (err) {
+        return jsonError(res, 400, String(err))
+      }
+    }
+
+    params = route('PATCH', '/api/boards/:boardId/tasks/:id/move')
+    if (params) {
+      try {
+        const { boardId, id } = params
+        const body = await readBody(req)
+        const newStatus = body.status as string
+        const position = body.position as number ?? 0
+        if (!newStatus) return jsonError(res, 400, 'status is required')
+        const feature = await sdk.moveCard(id, newStatus, position, boardId)
+        return jsonOk(res, sanitizeFeature(feature))
+      } catch (err) {
+        return jsonError(res, 400, String(err))
+      }
+    }
+
+    params = route('DELETE', '/api/boards/:boardId/tasks/:id')
+    if (params) {
+      try {
+        const { boardId, id } = params
+        await sdk.deleteCard(id, boardId)
+        return jsonOk(res, { deleted: true })
+      } catch (err) {
+        return jsonError(res, 400, String(err))
+      }
+    }
+
+    // ==================== BOARD-SCOPED COLUMNS API ====================
+
+    params = route('GET', '/api/boards/:boardId/columns')
+    if (params) {
+      try {
+        const { boardId } = params
+        return jsonOk(res, sdk.listColumns(boardId))
+      } catch (err) {
+        return jsonError(res, 400, String(err))
+      }
+    }
+
     // ==================== TASKS API ====================
 
-    let params = route('GET', '/api/tasks')
+    params = route('GET', '/api/tasks')
     if (params) {
       await loadFeatures()
       let result = features.map(sanitizeFeature)
@@ -575,7 +793,7 @@ export function startServer(featuresDir: string, port: number, webviewDir?: stri
         const body = await readBody(req)
         const data: CreateFeatureData = {
           content: (body.content as string) || '',
-          status: (body.status as FeatureStatus) || 'backlog',
+          status: (body.status as string) || 'backlog',
           priority: (body.priority as Priority) || 'medium',
           assignee: (body.assignee as string) || null,
           dueDate: (body.dueDate as string) || null,
@@ -744,7 +962,7 @@ export function startServer(featuresDir: string, port: number, webviewDir?: stri
 
     params = route('GET', '/api/columns')
     if (params) {
-      return jsonOk(res, sdk.listColumns())
+      return jsonOk(res, sdk.listColumns(currentBoardId))
     }
 
     params = route('POST', '/api/columns')

package/src/webview/App.tsx

@@ -8,7 +8,7 @@ import { Toolbar } from './components/Toolbar'
 import { UndoToast } from './components/UndoToast'
 import { SettingsPanel } from './components/SettingsPanel'
 import { ColumnDialog } from './components/ColumnDialog'
-import type { Comment, Feature, FeatureStatus, KanbanColumn, Priority, ExtensionMessage, FeatureFrontmatter, CardDisplaySettings } from '../shared/types'
+import type { Comment, Feature, KanbanColumn, Priority, ExtensionMessage, FeatureFrontmatter, CardDisplaySettings } from '../shared/types'
 import { getTitleFromContent } from '../shared/types'
 
 // Declare vscode API type
@@ -28,13 +28,15 @@ function App(): React.JSX.Element {
     settingsOpen,
     setFeatures,
     setColumns,
+    setBoards,
+    setCurrentBoard,
     setIsDarkMode,
     setCardSettings,
     setSettingsOpen
   } = useStore()
 
   const [createFeatureOpen, setCreateFeatureOpen] = useState(false)
-  const [createFeatureStatus, setCreateFeatureStatus] = useState<FeatureStatus>('backlog')
+  const [createFeatureStatus, setCreateFeatureStatus] = useState<string>('backlog')
 
   // Column dialog state
   const [columnDialogOpen, setColumnDialogOpen] = useState(false)
@@ -206,6 +208,8 @@ function App(): React.JSX.Element {
         case 'init':
           setFeatures(message.features)
           setColumns(message.columns)
+          if (message.boards) setBoards(message.boards)
+          if (message.currentBoard) setCurrentBoard(message.currentBoard)
           if (message.settings) {
             if (message.settings.markdownEditorMode && editingFeature) {
               setEditingFeature(null)
@@ -246,7 +250,7 @@ function App(): React.JSX.Element {
     vscode.postMessage({ type: 'ready' })
 
     return () => window.removeEventListener('message', handleMessage)
-  }, [setFeatures, setColumns, setCardSettings, setSettingsOpen])
+  }, [setFeatures, setColumns, setBoards, setCurrentBoard, setCardSettings, setSettingsOpen])
 
   const handleFeatureClick = (feature: Feature): void => {
     // Request feature content for inline editing
@@ -354,12 +358,12 @@ function App(): React.JSX.Element {
   }
 
   const handleAddFeatureInColumn = (status: string): void => {
-    setCreateFeatureStatus(status as FeatureStatus)
+    setCreateFeatureStatus(status)
     setCreateFeatureOpen(true)
   }
 
   const handleCreateFeature = (data: {
-    status: FeatureStatus
+    status: string
     priority: Priority
     content: string
   }): void => {
@@ -390,7 +394,7 @@ function App(): React.JSX.Element {
 
       const updated = features.map(f =>
         f.id === featureId
-          ? { ...f, status: newStatus as FeatureStatus, order: newOrderKey }
+          ? { ...f, status: newStatus, order: newOrderKey }
           : f
       )
       setFeatures(updated)
@@ -416,7 +420,13 @@ function App(): React.JSX.Element {
 
   return (
     <div className="h-full w-full flex flex-col bg-[var(--vscode-editor-background)]">
-      <Toolbar onOpenSettings={() => vscode.postMessage({ type: 'openSettings' })} onAddColumn={handleAddColumn} onToggleTheme={() => vscode.postMessage({ type: 'toggleTheme' })} />
+      <Toolbar
+        onOpenSettings={() => vscode.postMessage({ type: 'openSettings' })}
+        onAddColumn={handleAddColumn}
+        onToggleTheme={() => vscode.postMessage({ type: 'toggleTheme' })}
+        onSwitchBoard={(boardId) => vscode.postMessage({ type: 'switchBoard', boardId })}
+        onCreateBoard={(name) => vscode.postMessage({ type: 'createBoard', name })}
+      />
       <div className="flex-1 flex overflow-hidden">
         <div className={editingFeature ? 'w-1/2' : 'w-full'}>
           <KanbanBoard

package/src/webview/components/Toolbar.tsx

@@ -1,4 +1,5 @@
-import { Search, X, Columns, Rows, Settings, Plus, Moon, Sun } from 'lucide-react'
+import { useState, useRef, useEffect } from 'react'
+import { Search, X, Columns, Rows, Settings, Plus, Moon, Sun, ChevronDown, Check } from 'lucide-react'
 import { useStore, type DueDateFilter } from '../store'
 import type { Priority } from '../../shared/types'
 
@@ -21,7 +22,7 @@ const dueDateOptions: { value: DueDateFilter; label: string }[] = [
 const selectClassName =
   'text-sm bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-600 rounded-md px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500 text-zinc-900 dark:text-zinc-100'
 
-export function Toolbar({ onOpenSettings, onAddColumn, onToggleTheme }: { onOpenSettings: () => void; onAddColumn: () => void; onToggleTheme: () => void }) {
+export function Toolbar({ onOpenSettings, onAddColumn, onToggleTheme, onSwitchBoard, onCreateBoard }: { onOpenSettings: () => void; onAddColumn: () => void; onToggleTheme: () => void; onSwitchBoard: (boardId: string) => void; onCreateBoard: (name: string) => void }) {
   const {
     searchQuery,
     setSearchQuery,
@@ -40,15 +41,110 @@ export function Toolbar({ onOpenSettings, onAddColumn, onToggleTheme }: { onOpen
     layout,
     toggleLayout,
     isDarkMode,
-    cardSettings
+    cardSettings,
+    boards,
+    currentBoard
   } = useStore()
 
   const assignees = getUniqueAssignees()
   const labels = getUniqueLabels()
   const filtersActive = hasActiveFilters()
 
+  const [boardDropdownOpen, setBoardDropdownOpen] = useState(false)
+  const [creatingBoard, setCreatingBoard] = useState(false)
+  const [newBoardName, setNewBoardName] = useState('')
+  const dropdownRef = useRef<HTMLDivElement>(null)
+  const newBoardInputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+        setBoardDropdownOpen(false)
+        setCreatingBoard(false)
+        setNewBoardName('')
+      }
+    }
+    if (boardDropdownOpen) {
+      document.addEventListener('mousedown', handleClickOutside)
+    }
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [boardDropdownOpen])
+
+  useEffect(() => {
+    if (creatingBoard && newBoardInputRef.current) {
+      newBoardInputRef.current.focus()
+    }
+  }, [creatingBoard])
+
+  const currentBoardName = boards.find(b => b.id === currentBoard)?.name || currentBoard
+
+  const handleCreateBoard = () => {
+    const name = newBoardName.trim()
+    if (!name) return
+    onCreateBoard(name)
+    setNewBoardName('')
+    setCreatingBoard(false)
+    setBoardDropdownOpen(false)
+  }
+
   return (
     <div className="flex items-center gap-2 px-4 py-2 border-b border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-900/50 flex-wrap">
+      {/* Board Selector */}
+      <div className="relative" ref={dropdownRef}>
+        <button
+          type="button"
+          onClick={() => setBoardDropdownOpen(!boardDropdownOpen)}
+          className="flex items-center gap-1.5 px-2 py-1.5 text-sm bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-600 rounded-md hover:bg-zinc-50 dark:hover:bg-zinc-700 text-zinc-900 dark:text-zinc-100 transition-colors"
+        >
+          <span className="max-w-[120px] truncate">{currentBoardName}</span>
+          <ChevronDown size={14} className={`text-zinc-400 transition-transform ${boardDropdownOpen ? 'rotate-180' : ''}`} />
+        </button>
+        {boardDropdownOpen && (
+          <div className="absolute top-full left-0 mt-1 min-w-[180px] bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-600 rounded-md shadow-lg z-50 py-1">
+            {boards.map((b) => (
+              <button
+                key={b.id}
+                type="button"
+                onClick={() => {
+                  onSwitchBoard(b.id)
+                  setBoardDropdownOpen(false)
+                }}
+                className="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left hover:bg-zinc-100 dark:hover:bg-zinc-700 text-zinc-900 dark:text-zinc-100 transition-colors"
+              >
+                <Check size={14} className={b.id === currentBoard ? 'text-blue-500' : 'invisible'} />
+                <span className="truncate">{b.name}</span>
+              </button>
+            ))}
+            <div className="border-t border-zinc-200 dark:border-zinc-600 my-1" />
+            {creatingBoard ? (
+              <div className="px-3 py-1.5">
+                <input
+                  ref={newBoardInputRef}
+                  type="text"
+                  value={newBoardName}
+                  onChange={(e) => setNewBoardName(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') handleCreateBoard()
+                    if (e.key === 'Escape') { setCreatingBoard(false); setNewBoardName('') }
+                  }}
+                  placeholder="Board name..."
+                  className="w-full px-2 py-1 text-sm bg-zinc-50 dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-500 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 text-zinc-900 dark:text-zinc-100 placeholder-zinc-400"
+                />
+              </div>
+            ) : (
+              <button
+                type="button"
+                onClick={() => setCreatingBoard(true)}
+                className="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left hover:bg-zinc-100 dark:hover:bg-zinc-700 text-blue-600 dark:text-blue-400 transition-colors"
+              >
+                <Plus size={14} />
+                <span>New Board</span>
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+
       {/* Search */}
       <div className="relative flex-1 min-w-[180px] max-w-xs">
         <Search

package/src/webview/store/index.ts

@@ -1,5 +1,5 @@
 import { create } from 'zustand'
-import type { Feature, FeatureStatus, KanbanColumn, Priority, CardDisplaySettings } from '../../shared/types'
+import type { Feature, KanbanColumn, Priority, CardDisplaySettings, BoardInfo } from '../../shared/types'
 
 export type DueDateFilter = 'all' | 'overdue' | 'today' | 'this-week' | 'no-date'
 export type LayoutMode = 'horizontal' | 'vertical'
@@ -7,6 +7,8 @@ export type LayoutMode = 'horizontal' | 'vertical'
 interface KanbanState {
   features: Feature[]
   columns: KanbanColumn[]
+  boards: BoardInfo[]
+  currentBoard: string
   isDarkMode: boolean
   searchQuery: string
   priorityFilter: Priority | 'all'
@@ -19,6 +21,8 @@ interface KanbanState {
 
   setFeatures: (features: Feature[]) => void
   setColumns: (columns: KanbanColumn[]) => void
+  setBoards: (boards: BoardInfo[]) => void
+  setCurrentBoard: (boardId: string) => void
   setIsDarkMode: (dark: boolean) => void
   setCardSettings: (settings: CardDisplaySettings) => void
   setSettingsOpen: (open: boolean) => void
@@ -34,8 +38,8 @@ interface KanbanState {
   addFeature: (feature: Feature) => void
   updateFeature: (id: string, updates: Partial<Feature>) => void
   removeFeature: (id: string) => void
-  getFeaturesByStatus: (status: FeatureStatus) => Feature[]
-  getFilteredFeaturesByStatus: (status: FeatureStatus) => Feature[]
+  getFeaturesByStatus: (status: string) => Feature[]
+  getFilteredFeaturesByStatus: (status: string) => Feature[]
   getUniqueAssignees: () => string[]
   getUniqueLabels: () => string[]
   hasActiveFilters: () => boolean
@@ -80,6 +84,8 @@ const isOverdue = (date: Date): boolean => {
 export const useStore = create<KanbanState>((set, get) => ({
   features: [],
   columns: [],
+  boards: [],
+  currentBoard: 'default',
   isDarkMode: getInitialDarkMode(),
   searchQuery: '',
   priorityFilter: 'all',
@@ -103,6 +109,8 @@ export const useStore = create<KanbanState>((set, get) => ({
 
   setFeatures: (features) => set({ features }),
   setColumns: (columns) => set({ columns }),
+  setBoards: (boards) => set({ boards }),
+  setCurrentBoard: (boardId) => set({ currentBoard: boardId }),
   setIsDarkMode: (dark) => set({ isDarkMode: dark }),
   setCardSettings: (settings) => set({ cardSettings: settings }),
   setSettingsOpen: (open) => set({ settingsOpen: open }),