npm install
npm run dev          # http://localhost:5173/src/  (unbundled ES modules)
npm run build        # -> dist/index.html  (one self-contained file)
npm start            # MCP server, Streamable HTTP: http://127.0.0.1:3000/mcp
npm run start:stdio  # MCP server over stdio (Claude Desktop / Claude Code)
npm test             # unit tests (node:test, no browser)
npm run test:e2e     # build + browser tests in headless Chrome

ngrok http 3000                             # terminal 1 -> https://abc123.ngrok.app
HOST=:: ALLOWED_HOSTS=abc123.ngrok.app npm start   # terminal 2, with the ngrok host allowed

{
  "mcpServers": {
    "kanban": { "command": "node", "args": ["/absolute/path/to/kanban/server/stdio.js"] }
  }
}

kanban/
├── manifest.json            app metadata: entry, icon, storage key
├── src/
│   ├── index.html           markup: header, board root, dialogs, live region
│   ├── style.css            tokens (light + dark), layout, column, card, dialog, drag states
│   ├── app.js               boot: load → store → wire UI → subscribe(render, save) → render
│   ├── kanban/              core — pure, no DOM, tested in Node
│   │   ├── constants.js     schema version, storage key, labels, default board
│   │   ├── board.js         queries: findColumnOf, clamp
│   │   ├── actions.js       action creators (make ids + timestamps)
│   │   ├── reducer.js       (state, action) → newState, all business rules
│   │   ├── schema.js        migrate + invariant checks for stored / imported boards
│   │   ├── store.js         state, dispatch, subscribe, undo/redo history
│   │   └── persistence.js   debounced localStorage save, load, export/import
│   └── ui/                  browser only
│       ├── dom.js           h() element builder, focus helpers
│       ├── board-ui.js      renderer: the only code that writes board DOM
│       ├── controls.js      toolbar + board clicks / add-card / add-column forms
│       ├── dialogs.js       card, column, and confirm dialogs
│       ├── drag.js          pointer + touch drag and drop
│       ├── keyboard.js      keyboard moves, arrow focus, shortcuts
│       ├── status.js        aria-live announcements, toasts, "Not saved" badge
│       ├── icons.js         inline SVG icons + empty-state illustrations
│       ├── theme.js         light / dark switch (remembered; follows OS / host until used)
│       └── host.js          MCP Apps host bridge: handshake, auto-resize, host theme
├── server/                  MCP server (Node)
│   ├── kanban.js            tool show_kanban_board + resource ui://kanban/board.html
│   ├── html.js              loads dist/index.html
│   ├── http.js              Streamable HTTP entry (ChatGPT, claude.ai)
│   └── stdio.js             stdio entry (Claude Desktop, Claude Code)
├── assets/
│   └── icons/kanban.svg
├── scripts/
│   ├── build.js             esbuild bundle + inline CSS/JS/icon → dist/index.html
│   └── serve.js             zero-dependency dev server
├── tests/
│   ├── reducer.test.js
│   ├── schema.test.js
│   ├── store.test.js
│   ├── persistence.test.js
│   └── e2e/
│       ├── board.e2e.js     headless Chrome against dist/index.html
│       └── host.e2e.js      board inside a minimal MCP Apps host (handshake, resize, theme)
├── dist/index.html          build output
├── package.json
└── README.md

event → controller → dispatch(action) → reducer (pure) → store (history) → render + debounced save