Does Nodeterm Offer a Trello-Like Kanban Board for Visualizing Terminal Sessions?

Yes, nodeterm includes a full-featured kanban board that lets you view, organize, and interact with terminal sessions as draggable cards, mirroring the Trello experience while maintaining deep integration with the terminal canvas.

Nodeterm is an open-source terminal workspace manager that bridges the gap between traditional grid-based layouts and modern project management workflows. The application provides a Trello-like kanban board for visualizing terminal sessions, enabling developers to organize AI agents, shell sessions, and background tasks through an intuitive card-based interface that persists alongside project files.

Architecture of the Kanban Board System

The kanban implementation in eneskirca/nodeterm follows a layered React architecture that sits as an overlay on top of the terminal canvas, ensuring seamless synchronization between visual board state and underlying session management.

UI Layer and Component Structure

The board renders as a React overlay above the main canvas through three primary components:

• KanbanView.tsx – The main container that renders the board overlay, manages column layouts, and handles board-level actions like filtering and view toggling.
• KanbanColumn.tsx – Individual column components that contain card lists, render headers with filter UI, and manage column-specific interactions.
• KanbanSourceFilter.tsx – The filter interface allowing users to switch between viewing All cards, Sessions only, or GitHub issue cards.

State Persistence and Project Integration

Unlike ephemeral view states, the kanban layout is project-local and version-controlled. The board configuration stores in the project.kanban field within workspace JSON files, capturing column order, card assignments, and column identities. This persistence mechanism ensures that when you reopen a project, your terminal organization—columns, card positions, and workflows—restores exactly as you left it.

Session Integration with Live Status

Cards on the board represent live terminal sessions sourced from the agentStatus store (src/renderer/state/agentStatus.ts). Each card displays:

• The session title and unique identifier
• Model usage pills indicating AI agent activity
• Status badges showing running or idle states
• Real-time updates as the underlying terminal state changes

When you click a card, the focusNodeById function from src/renderer/state/projects.ts pans and zooms the canvas to the corresponding terminal node, creating bidirectional navigation between board and canvas views.

Key Features and Interactions

Toggling the Board View

Users can toggle the kanban overlay through multiple input methods. The viewMode.kanban flag in src/renderer/state/viewMode.ts controls visibility, triggered by:

• A dedicated button in the tab bar UI
• The keyboard shortcut Cmd+Shift+B (macOS) or Ctrl+Shift+B (Linux/Windows), registered in src/shared/keybindings.ts

// src/shared/keybindings.ts – shortcut registration
{
  id: 'view.kanbanToggle',
  default: ['Meta+Shift+B', 'Control+Shift+B'],
  description: 'Toggle the kanban board',
}

Managing Session Cards

The board supports creating new terminal sessions directly from columns. The "New session" verb in column menus triggers createAgentNode followed by addCardToColumn, immediately placing the new terminal in your workflow:

// In KanbanColumn.tsx – column menu handler
import { createAgentNode } from '@/renderer/state/workspace';
import { addCardToColumn } from '@/state/kanban';

function onAddSession() {
  const nodeId = createAgentNode({ agentId: 'claude' }); // creates a terminal node
  addCardToColumn(nodeId, columnId);                      // assigns to this column
}

This integration ensures that card creation and terminal instantiation remain atomic operations.

Drag-and-Drop Organization

Cards support full drag-and-drop functionality within and between columns. The system persists these movements immediately to project.kanban, maintaining your organizational structure across application restarts. This behavior is tested in KanbanColumn.test.tsx, which validates card assignment logic and reordering algorithms.

Implementation Deep Dive

Focusing Terminals from Board Cards

Clicking a session card executes canvas navigation without leaving the board view:

// In KanbanView.tsx – card click handler
import { focusNodeById } from '@/renderer/state/projects';

function onCardClick(nodeId: string) {
  focusNodeById(nodeId);   // pans/zooms canvas to node and selects it
}

This function bridges the kanban abstraction back to the spatial canvas, ensuring you never lose context when switching between organizational paradigms.

UI Toggle Implementation

The tab bar component dispatches the toggle action through zustand state management:

// Tab bar component (simplified)
import { useCallback } from 'react';
import { useDispatch } from 'zustand';
import { toggleKanban } from '@/state/viewMode';

const TabBar = () => {
  const dispatch = useDispatch();

  const onKanbanToggle = useCallback(() => {
    dispatch(toggleKanban());   // flips the `viewMode.kanban` flag
  }, [dispatch]);

  return (
    <button onClick={onKanbanToggle} title="Kanban (⌘⇧B)">
      {/* kanban icon */}
    </button>
  );
};

Core Files and Source Locations

Understanding the kanban system requires familiarity with these key files in the eneskirca/nodeterm repository:

• src/renderer/components/kanban/KanbanView.tsx – Main board overlay; renders columns, cards, and handles board-level actions.
• src/renderer/components/kanban/KanbanColumn.tsx – Column component managing card ordering and column-specific menus.
• src/renderer/components/kanban/KanbanSourceFilter.tsx – Filter UI for toggling between All, Sessions, and GitHub views.
• src/renderer/state/agentStatus.ts – Live session state store providing data for session cards.
• src/renderer/state/viewMode.ts – Holds the viewMode.kanban visibility flag.
• src/renderer/state/projects.ts – Contains focusNodeById for canvas navigation from cards.
• src/shared/keybindings.ts – Registers the Cmd+Shift+B toggle shortcut.
• src/renderer/components/kanban/KanbanColumn.test.tsx – Test coverage for drag-and-drop and card assignment.

Summary

• Nodeterm provides a first-class Trello-like kanban board built as a React overlay on the terminal canvas, supporting drag-and-drop organization and real-time session visualization.
• Project persistence stores board layouts in the project.kanban field, making organizational structures version-controllable and portable.
• Bidirectional integration allows cards to control canvas focus and canvas nodes to populate board columns through the agentStatus store.
• Keyboard accessibility includes the Cmd+Shift+B (or Ctrl+Shift+B) shortcut for instant board toggling.
• Cross-platform consistency ensures the kanban experience works identically in both Desktop and Server Edition builds, excluding only mobile variants that lack canvas support.

Frequently Asked Questions

How do I enable the kanban board in nodeterm?

Press Cmd+Shift+B on macOS or Ctrl+Shift+B on Linux and Windows, or click the kanban icon in the tab bar. This toggles the viewMode.kanban flag in the view state, rendering the board overlay above your terminal canvas.

Can I customize the columns in the nodeterm kanban board?

Yes. The board supports custom column creation and ordering through drag-and-drop interactions. Column configurations and card assignments persist in the project.kanban field of your workspace JSON file, allowing you to define workflows like "To Do," "In Progress," and "Completed" that match your development process.

Does the kanban board work in nodeterm's Server Edition?

Yes. The kanban components reside in the shared React codebase and function identically in both Desktop (Electron) and Server Edition builds. The system imports only core services available across platforms, ensuring consistent behavior whether running locally or on a remote server. Mobile builds exclude the feature due to the absence of a canvas surface.

How does drag-and-drop persistence work in nodeterm's kanban system?

When you reorder cards or move them between columns, the system immediately writes the new layout to the project.kanban object in your project file. This happens through the addCardToColumn and related state management functions, ensuring your organizational structure survives application restarts and can be shared across team members through version control.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}