@industry-theme/backlogmd-kanban-panel 1.0.2 → 1.0.4

package/dist/panels.bundle.js

@@ -526,10 +526,32 @@ function extractIdFromPath(filePath) {
   }
   return filename.replace(/\.md$/, "");
 }
+function extractTitleFromPath(filePath) {
+  const filename = filePath.split("/").pop() || "";
+  const match = filename.match(/^(?:task-)?\d+(?:\.\d+)?\s*-\s*(.+)\.md$/);
+  if (match) {
+    return match[1].trim();
+  }
+  return filename.replace(/\.md$/, "");
+}
+function extractSourceFromPath(filePath) {
+  if (filePath.includes("/completed/") || filePath.includes("\\completed\\")) {
+    return "completed";
+  }
+  return "tasks";
+}
+function extractTaskIndexFromPath(filePath) {
+  return {
+    id: extractIdFromPath(filePath),
+    filePath,
+    title: extractTitleFromPath(filePath),
+    source: extractSourceFromPath(filePath)
+  };
+}
 function escapeRegex(str) {
   return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
-const DEFAULT_STATUSES$1 = ["To Do", "In Progress", "Done"];
+const DEFAULT_STATUSES = ["To Do", "In Progress", "Done"];
 function parseBacklogConfig(content) {
   const config = {};
   const lines = content.split("\n");
@@ -609,10 +631,10 @@ function parseBacklogConfig(content) {
   }
   return {
     projectName: config.projectName || "Backlog",
-    statuses: config.statuses || [...DEFAULT_STATUSES$1],
+    statuses: config.statuses || [...DEFAULT_STATUSES],
     labels: config.labels || [],
     milestones: config.milestones || [],
-    defaultStatus: config.defaultStatus || DEFAULT_STATUSES$1[0],
+    defaultStatus: config.defaultStatus || DEFAULT_STATUSES[0],
     dateFormat: config.dateFormat || "YYYY-MM-DD",
     defaultAssignee: config.defaultAssignee,
     defaultReporter: config.defaultReporter,
@@ -684,6 +706,28 @@ const PRIORITY_ORDER = {
   medium: 1,
   low: 2
 };
+function sortTasksByTitle(tasks, direction = "asc") {
+  return [...tasks].sort((a, b) => {
+    const cmp = a.title.localeCompare(b.title);
+    return direction === "asc" ? cmp : -cmp;
+  });
+}
+function sortTasksBy(tasks, sortBy = "title", direction = "asc") {
+  switch (sortBy) {
+    case "title":
+      return sortTasksByTitle(tasks, direction);
+    case "createdDate":
+      return [...tasks].sort((a, b) => {
+        const cmp = a.createdDate.localeCompare(b.createdDate);
+        return direction === "asc" ? cmp : -cmp;
+      });
+    case "priority":
+    case "ordinal":
+    default:
+      const sorted = sortTasks(tasks);
+      return direction === "desc" ? sorted.reverse() : sorted;
+  }
+}
 function sortTasks(tasks) {
   return [...tasks].sort((a, b) => {
     if (a.ordinal !== void 0 && b.ordinal !== void 0) {
@@ -725,6 +769,9 @@ class Core {
     __publicField(this, "config", null);
     __publicField(this, "tasks", /* @__PURE__ */ new Map());
     __publicField(this, "initialized", false);
+    /** Lightweight task index for lazy loading (no file reads) */
+    __publicField(this, "taskIndex", /* @__PURE__ */ new Map());
+    __publicField(this, "lazyInitialized", false);
     this.projectRoot = options.projectRoot;
     this.fs = options.adapters.fs;
   }
@@ -806,6 +853,173 @@ class Core {
     }
     this.initialized = true;
   }
+  /**
+   * Initialize with lazy loading (no file content reads)
+   *
+   * Only loads config and builds task index from file paths.
+   * Task content is loaded on-demand via loadTask().
+   * Use this for web/panel contexts where file reads are expensive.
+   *
+   * @param filePaths - Array of all file paths in the project
+   */
+  async initializeLazy(filePaths) {
+    if (this.lazyInitialized)
+      return;
+    const configPath = this.fs.join(this.projectRoot, "backlog", "config.yml");
+    const configExists = await this.fs.exists(configPath);
+    if (!configExists) {
+      throw new Error(`Not a Backlog.md project: config.yml not found at ${configPath}`);
+    }
+    const configContent = await this.fs.readFile(configPath);
+    this.config = parseBacklogConfig(configContent);
+    this.taskIndex.clear();
+    for (const filePath of filePaths) {
+      if (!filePath.endsWith(".md"))
+        continue;
+      const isTaskFile = filePath.includes("backlog/tasks/") || filePath.includes("backlog\\tasks\\");
+      const isCompletedFile = filePath.includes("backlog/completed/") || filePath.includes("backlog\\completed\\");
+      if (!isTaskFile && !isCompletedFile)
+        continue;
+      if (filePath.endsWith("config.yml"))
+        continue;
+      const indexEntry = extractTaskIndexFromPath(filePath);
+      this.taskIndex.set(indexEntry.id, indexEntry);
+    }
+    this.lazyInitialized = true;
+  }
+  /**
+   * Check if lazy initialization is complete
+   */
+  isLazyInitialized() {
+    return this.lazyInitialized;
+  }
+  /**
+   * Get the task index (lightweight entries)
+   */
+  getTaskIndex() {
+    if (!this.lazyInitialized) {
+      throw new Error("Core not lazy initialized. Call initializeLazy() first.");
+    }
+    return this.taskIndex;
+  }
+  /**
+   * Load a single task by ID (on-demand loading)
+   *
+   * @param id - Task ID
+   * @returns Task or undefined if not found
+   */
+  async loadTask(id) {
+    if (this.tasks.has(id)) {
+      return this.tasks.get(id);
+    }
+    const indexEntry = this.taskIndex.get(id);
+    if (!indexEntry) {
+      return void 0;
+    }
+    try {
+      const content = await this.fs.readFile(indexEntry.filePath);
+      const task = parseTaskMarkdown(content, indexEntry.filePath);
+      task.source = indexEntry.source === "completed" ? "completed" : "local";
+      this.tasks.set(task.id, task);
+      return task;
+    } catch (error) {
+      console.warn(`Failed to load task ${id} from ${indexEntry.filePath}:`, error);
+      return void 0;
+    }
+  }
+  /**
+   * Load multiple tasks by ID (on-demand loading)
+   *
+   * @param ids - Array of task IDs to load
+   * @returns Array of loaded tasks (undefined entries filtered out)
+   */
+  async loadTasks(ids) {
+    const tasks = await Promise.all(ids.map((id) => this.loadTask(id)));
+    return tasks.filter((t) => t !== void 0);
+  }
+  /**
+   * Get tasks by source (tasks/completed) with pagination
+   *
+   * This is a lazy-loading alternative to getTasksByStatusPaginated().
+   * Groups by directory (tasks/ or completed/) instead of status.
+   * Only loads task content for items in the requested page.
+   *
+   * @param pagination - Pagination options (applied per source)
+   * @returns Paginated tasks grouped by source
+   */
+  async getTasksBySourcePaginated(pagination) {
+    if (!this.lazyInitialized) {
+      throw new Error("Core not lazy initialized. Call initializeLazy() first.");
+    }
+    const limit = (pagination == null ? void 0 : pagination.limit) ?? 10;
+    const offset = (pagination == null ? void 0 : pagination.offset) ?? 0;
+    const sortBy = (pagination == null ? void 0 : pagination.sortBy) ?? "title";
+    const sortDirection = (pagination == null ? void 0 : pagination.sortDirection) ?? "asc";
+    const sources = ["tasks", "completed"];
+    const bySource = /* @__PURE__ */ new Map();
+    for (const source of sources) {
+      let entries = Array.from(this.taskIndex.values()).filter((e) => e.source === source);
+      entries = entries.sort((a, b) => {
+        const cmp = a.title.localeCompare(b.title);
+        return sortDirection === "asc" ? cmp : -cmp;
+      });
+      const total = entries.length;
+      const pageEntries = entries.slice(offset, offset + limit);
+      const items = await this.loadTasks(pageEntries.map((e) => e.id));
+      if (sortBy !== "title" && items.length > 0) {
+        const sorted = sortTasksBy(items, sortBy, sortDirection);
+        bySource.set(source, {
+          items: sorted,
+          total,
+          hasMore: offset + limit < total,
+          offset,
+          limit
+        });
+      } else {
+        bySource.set(source, {
+          items,
+          total,
+          hasMore: offset + limit < total,
+          offset,
+          limit
+        });
+      }
+    }
+    return {
+      bySource,
+      sources
+    };
+  }
+  /**
+   * Load more tasks for a specific source (lazy loading)
+   *
+   * @param source - Source to load more from ("tasks" or "completed")
+   * @param currentOffset - Current offset (items already loaded)
+   * @param pagination - Pagination options
+   * @returns Paginated result for the source
+   */
+  async loadMoreForSource(source, currentOffset, pagination) {
+    if (!this.lazyInitialized) {
+      throw new Error("Core not lazy initialized. Call initializeLazy() first.");
+    }
+    const limit = (pagination == null ? void 0 : pagination.limit) ?? 10;
+    const sortDirection = (pagination == null ? void 0 : pagination.sortDirection) ?? "asc";
+    let entries = Array.from(this.taskIndex.values()).filter((e) => e.source === source);
+    entries = entries.sort((a, b) => {
+      const cmp = a.title.localeCompare(b.title);
+      return sortDirection === "asc" ? cmp : -cmp;
+    });
+    const total = entries.length;
+    const pageEntries = entries.slice(currentOffset, currentOffset + limit);
+    const items = await this.loadTasks(pageEntries.map((e) => e.id));
+    return {
+      items,
+      total,
+      hasMore: currentOffset + limit < total,
+      offset: currentOffset,
+      limit
+    };
+  }
   /**
    * Get the loaded configuration
    *
@@ -863,6 +1077,99 @@ class Core {
     this.ensureInitialized();
     return this.tasks.get(id);
   }
+  /**
+   * List tasks with pagination
+   *
+   * @param filter - Filter and pagination options
+   * @returns Paginated result with tasks
+   */
+  listTasksPaginated(filter) {
+    this.ensureInitialized();
+    let tasks = this.applyFilters(Array.from(this.tasks.values()), filter);
+    const pagination = (filter == null ? void 0 : filter.pagination) ?? {};
+    const sortBy = pagination.sortBy ?? "title";
+    const sortDirection = pagination.sortDirection ?? "asc";
+    tasks = sortTasksBy(tasks, sortBy, sortDirection);
+    const limit = pagination.limit ?? 10;
+    const offset = pagination.offset ?? 0;
+    const total = tasks.length;
+    const items = tasks.slice(offset, offset + limit);
+    return {
+      items,
+      total,
+      hasMore: offset + limit < total,
+      offset,
+      limit
+    };
+  }
+  /**
+   * Get tasks by status with pagination per column
+   *
+   * @param pagination - Pagination options (applied per status)
+   * @returns Paginated tasks grouped by status
+   */
+  getTasksByStatusPaginated(pagination) {
+    this.ensureInitialized();
+    const limit = (pagination == null ? void 0 : pagination.limit) ?? 10;
+    const offset = (pagination == null ? void 0 : pagination.offset) ?? 0;
+    const sortBy = (pagination == null ? void 0 : pagination.sortBy) ?? "title";
+    const sortDirection = (pagination == null ? void 0 : pagination.sortDirection) ?? "asc";
+    const byStatus = /* @__PURE__ */ new Map();
+    const allGrouped = /* @__PURE__ */ new Map();
+    for (const status of this.config.statuses) {
+      allGrouped.set(status, []);
+    }
+    for (const task of this.tasks.values()) {
+      const list = allGrouped.get(task.status);
+      if (list) {
+        list.push(task);
+      } else {
+        allGrouped.set(task.status, [task]);
+      }
+    }
+    for (const status of this.config.statuses) {
+      let tasks = allGrouped.get(status) ?? [];
+      tasks = sortTasksBy(tasks, sortBy, sortDirection);
+      const total = tasks.length;
+      const items = tasks.slice(offset, offset + limit);
+      byStatus.set(status, {
+        items,
+        total,
+        hasMore: offset + limit < total,
+        offset,
+        limit
+      });
+    }
+    return {
+      byStatus,
+      statuses: this.config.statuses
+    };
+  }
+  /**
+   * Load more tasks for a specific status
+   *
+   * @param status - Status column to load more from
+   * @param currentOffset - Current offset (items already loaded)
+   * @param pagination - Pagination options (limit, sortBy, sortDirection)
+   * @returns Paginated result for the status
+   */
+  loadMoreForStatus(status, currentOffset, pagination) {
+    this.ensureInitialized();
+    const limit = (pagination == null ? void 0 : pagination.limit) ?? 10;
+    const sortBy = (pagination == null ? void 0 : pagination.sortBy) ?? "title";
+    const sortDirection = (pagination == null ? void 0 : pagination.sortDirection) ?? "asc";
+    let tasks = Array.from(this.tasks.values()).filter((t) => t.status === status);
+    tasks = sortTasksBy(tasks, sortBy, sortDirection);
+    const total = tasks.length;
+    const items = tasks.slice(currentOffset, currentOffset + limit);
+    return {
+      items,
+      total,
+      hasMore: currentOffset + limit < total,
+      offset: currentOffset,
+      limit
+    };
+  }
   /**
    * Reload all tasks from disk
    *
@@ -879,6 +1186,27 @@ class Core {
       throw new Error("Core not initialized. Call initialize() first.");
     }
   }
+  applyFilters(tasks, filter) {
+    if (!filter)
+      return tasks;
+    let result = tasks;
+    if (filter.status) {
+      result = result.filter((t) => t.status === filter.status);
+    }
+    if (filter.assignee) {
+      result = result.filter((t) => t.assignee.includes(filter.assignee));
+    }
+    if (filter.priority) {
+      result = result.filter((t) => t.priority === filter.priority);
+    }
+    if (filter.labels && filter.labels.length > 0) {
+      result = result.filter((t) => filter.labels.some((label) => t.labels.includes(label)));
+    }
+    if (filter.parentTaskId) {
+      result = result.filter((t) => t.parentTaskId === filter.parentTaskId);
+    }
+    return result;
+  }
   async loadTasksFromDirectory(dir, source) {
     const entries = await this.fs.readDir(dir);
     for (const entry of entries) {
@@ -1019,17 +1347,26 @@ class PanelFileSystemAdapter {
     return path.replace(/^\/+/, "").replace(/\/+$/, "").replace(/\/+/g, "/");
   }
 }
-const DEFAULT_STATUSES = ["To Do", "In Progress", "Done"];
+const SOURCE_DISPLAY_LABELS = {
+  tasks: "Active",
+  completed: "Completed"
+};
+const DEFAULT_SOURCES = ["tasks", "completed"];
+const DEFAULT_PAGE_SIZE = 10;
 function useKanbanData(options) {
-  const { context, actions } = options || {};
+  const { context, actions, pageSize = DEFAULT_PAGE_SIZE } = options || {};
   const [tasks, setTasks] = useState([]);
-  const [statuses, setStatuses] = useState(DEFAULT_STATUSES);
+  const [sources] = useState(DEFAULT_SOURCES);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
   const [isBacklogProject, setIsBacklogProject] = useState(false);
-  const [tasksByStatus, setTasksByStatus] = useState(
+  const [tasksBySource, setTasksBySource] = useState(
+    /* @__PURE__ */ new Map()
+  );
+  const [columnStates, setColumnStates] = useState(
     /* @__PURE__ */ new Map()
   );
+  const coreRef = useRef(null);
   const activeFilePathRef = useRef(null);
   const contextRef = useRef(context);
   const actionsRef = useRef(actions);
@@ -1072,9 +1409,10 @@ function useKanbanData(options) {
       console.log("[useKanbanData] No context provided");
       setIsBacklogProject(false);
       setTasks([]);
-      setStatuses(DEFAULT_STATUSES);
-      setTasksByStatus(/* @__PURE__ */ new Map());
+      setTasksBySource(/* @__PURE__ */ new Map());
+      setColumnStates(/* @__PURE__ */ new Map());
       setIsLoading(false);
+      coreRef.current = null;
       return;
     }
     setIsLoading(true);
@@ -1085,8 +1423,9 @@ function useKanbanData(options) {
         console.log("[useKanbanData] FileTree not available");
         setIsBacklogProject(false);
         setTasks([]);
-        setStatuses(DEFAULT_STATUSES);
-        setTasksByStatus(/* @__PURE__ */ new Map());
+        setTasksBySource(/* @__PURE__ */ new Map());
+        setColumnStates(/* @__PURE__ */ new Map());
+        coreRef.current = null;
         return;
       }
       const files = fileTreeSlice.data.allFiles;
@@ -1104,36 +1443,139 @@ function useKanbanData(options) {
         console.log("[useKanbanData] Not a Backlog.md project");
         setIsBacklogProject(false);
         setTasks([]);
-        setStatuses(DEFAULT_STATUSES);
-        setTasksByStatus(/* @__PURE__ */ new Map());
+        setTasksBySource(/* @__PURE__ */ new Map());
+        setColumnStates(/* @__PURE__ */ new Map());
+        coreRef.current = null;
         return;
       }
-      console.log("[useKanbanData] Loading Backlog.md data...");
+      console.log("[useKanbanData] Loading Backlog.md data with lazy loading...");
       setIsBacklogProject(true);
-      await core.initialize();
-      const config = core.getConfig();
-      const grouped = core.getTasksByStatus();
-      const allTasks = core.listTasks();
+      await core.initializeLazy(filePaths);
+      coreRef.current = core;
+      const paginatedResult = await core.getTasksBySourcePaginated({
+        limit: pageSize,
+        offset: 0,
+        sortBy: "title",
+        sortDirection: "asc"
+      });
+      const newTasksBySource = /* @__PURE__ */ new Map();
+      const newColumnStates = /* @__PURE__ */ new Map();
+      let allTasks = [];
+      for (const source of paginatedResult.sources) {
+        const columnResult = paginatedResult.bySource.get(source);
+        if (columnResult) {
+          newTasksBySource.set(source, columnResult.items);
+          newColumnStates.set(source, {
+            tasks: columnResult.items,
+            total: columnResult.total,
+            hasMore: columnResult.hasMore,
+            isLoadingMore: false
+          });
+          allTasks = allTasks.concat(columnResult.items);
+        } else {
+          newTasksBySource.set(source, []);
+          newColumnStates.set(source, {
+            tasks: [],
+            total: 0,
+            hasMore: false,
+            isLoadingMore: false
+          });
+        }
+      }
+      const totalTasks = Array.from(paginatedResult.bySource.values()).reduce(
+        (sum, col) => sum + col.total,
+        0
+      );
       console.log(
-        `[useKanbanData] Loaded ${allTasks.length} tasks with ${config.statuses.length} statuses`
+        `[useKanbanData] Loaded ${allTasks.length}/${totalTasks} tasks (page size: ${pageSize})`
       );
-      setStatuses(config.statuses);
       setTasks(allTasks);
-      setTasksByStatus(grouped);
+      setTasksBySource(newTasksBySource);
+      setColumnStates(newColumnStates);
     } catch (err) {
       console.error("[useKanbanData] Failed to load Backlog.md data:", err);
       setError(err instanceof Error ? err.message : "Failed to load backlog data");
       setIsBacklogProject(false);
       setTasks([]);
-      setStatuses(DEFAULT_STATUSES);
-      setTasksByStatus(/* @__PURE__ */ new Map());
+      setTasksBySource(/* @__PURE__ */ new Map());
+      setColumnStates(/* @__PURE__ */ new Map());
+      coreRef.current = null;
     } finally {
       setIsLoading(false);
     }
-  }, [context, actions, fetchFileContent]);
+  }, [context, actions, fetchFileContent, pageSize]);
   useEffect(() => {
     loadBacklogData();
   }, [loadBacklogData]);
+  const loadMore = useCallback(
+    async (source) => {
+      const core = coreRef.current;
+      if (!core) {
+        console.warn("[useKanbanData] Core not available for loadMore");
+        return;
+      }
+      const currentState = columnStates.get(source);
+      if (!currentState || !currentState.hasMore || currentState.isLoadingMore) {
+        return;
+      }
+      setColumnStates((prev) => {
+        const newStates = new Map(prev);
+        const state = newStates.get(source);
+        if (state) {
+          newStates.set(source, { ...state, isLoadingMore: true });
+        }
+        return newStates;
+      });
+      try {
+        const currentOffset = currentState.tasks.length;
+        const result = await core.loadMoreForSource(
+          source,
+          currentOffset,
+          {
+            limit: pageSize,
+            sortBy: "title",
+            sortDirection: "asc"
+          }
+        );
+        console.log(
+          `[useKanbanData] Loaded ${result.items.length} more tasks for "${source}" (${currentOffset + result.items.length}/${result.total})`
+        );
+        setColumnStates((prev) => {
+          const newStates = new Map(prev);
+          const state = newStates.get(source);
+          if (state) {
+            const newTasks = [...state.tasks, ...result.items];
+            newStates.set(source, {
+              tasks: newTasks,
+              total: result.total,
+              hasMore: result.hasMore,
+              isLoadingMore: false
+            });
+          }
+          return newStates;
+        });
+        setTasksBySource((prev) => {
+          const newMap = new Map(prev);
+          const currentTasks = newMap.get(source) || [];
+          newMap.set(source, [...currentTasks, ...result.items]);
+          return newMap;
+        });
+        setTasks((prev) => [...prev, ...result.items]);
+      } catch (err) {
+        console.error(`[useKanbanData] Failed to load more for "${source}":`, err);
+        setError(err instanceof Error ? err.message : "Failed to load more tasks");
+        setColumnStates((prev) => {
+          const newStates = new Map(prev);
+          const state = newStates.get(source);
+          if (state) {
+            newStates.set(source, { ...state, isLoadingMore: false });
+          }
+          return newStates;
+        });
+      }
+    },
+    [columnStates, pageSize]
+  );
   const refreshData = useCallback(async () => {
     await loadBacklogData();
   }, [loadBacklogData]);
@@ -1149,11 +1591,13 @@ function useKanbanData(options) {
   );
   return {
     tasks,
-    statuses,
+    sources,
     isLoading,
     error,
     isBacklogProject,
-    tasksByStatus,
+    tasksBySource,
+    columnStates,
+    loadMore,
     refreshData,
     updateTaskStatus
   };
@@ -1161,6 +1605,10 @@ function useKanbanData(options) {
 const KanbanColumn = ({
   status,
   tasks,
+  total,
+  hasMore = false,
+  isLoadingMore = false,
+  onLoadMore,
   onTaskClick
 }) => {
   const { theme: theme2 } = useTheme();
@@ -1176,6 +1624,7 @@ const KanbanColumn = ({
         return theme2.colors.border;
     }
   };
+  const remaining = total !== void 0 ? total - tasks.length : 0;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -1224,13 +1673,13 @@ const KanbanColumn = ({
                     padding: "2px 8px",
                     borderRadius: theme2.radii[1]
                   },
-                  children: tasks.length
+                  children: total !== void 0 ? `${tasks.length}/${total}` : tasks.length
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(
           "div",
           {
             style: {
@@ -1241,131 +1690,190 @@ const KanbanColumn = ({
               overflowY: "auto",
               WebkitOverflowScrolling: "touch"
             },
-            children: tasks.map((task) => /* @__PURE__ */ jsxs(
-              "div",
-              {
-                onClick: () => onTaskClick == null ? void 0 : onTaskClick(task),
-                style: {
-                  background: theme2.colors.surface,
-                  borderRadius: theme2.radii[2],
-                  padding: "12px",
-                  border: `1px solid ${theme2.colors.border}`,
-                  borderLeft: `4px solid ${getPriorityColor(task.priority)}`,
-                  cursor: onTaskClick ? "pointer" : "default",
-                  transition: "all 0.2s ease",
-                  minHeight: "44px"
-                  // Minimum touch target size for mobile
-                },
-                onMouseEnter: (e) => {
-                  if (onTaskClick) {
-                    e.currentTarget.style.transform = "translateY(-2px)";
-                    e.currentTarget.style.boxShadow = `0 4px 8px ${theme2.colors.border}`;
-                  }
-                },
-                onMouseLeave: (e) => {
-                  if (onTaskClick) {
-                    e.currentTarget.style.transform = "translateY(0)";
-                    e.currentTarget.style.boxShadow = "none";
-                  }
-                },
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "h4",
-                    {
-                      style: {
-                        margin: "0 0 8px 0",
-                        fontSize: theme2.fontSizes[2],
-                        color: theme2.colors.text,
-                        fontWeight: theme2.fontWeights.medium
-                      },
-                      children: task.title
+            children: [
+              tasks.map((task) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  onClick: () => onTaskClick == null ? void 0 : onTaskClick(task),
+                  style: {
+                    background: theme2.colors.surface,
+                    borderRadius: theme2.radii[2],
+                    padding: "12px",
+                    border: `1px solid ${theme2.colors.border}`,
+                    borderLeft: `4px solid ${getPriorityColor(task.priority)}`,
+                    cursor: onTaskClick ? "pointer" : "default",
+                    transition: "all 0.2s ease",
+                    minHeight: "44px"
+                    // Minimum touch target size for mobile
+                  },
+                  onMouseEnter: (e) => {
+                    if (onTaskClick) {
+                      e.currentTarget.style.transform = "translateY(-2px)";
+                      e.currentTarget.style.boxShadow = `0 4px 8px ${theme2.colors.border}`;
                     }
-                  ),
-                  task.description && /* @__PURE__ */ jsx(
-                    "p",
-                    {
-                      style: {
-                        margin: "0 0 8px 0",
-                        fontSize: theme2.fontSizes[1],
-                        color: theme2.colors.textSecondary,
-                        overflow: "hidden",
-                        textOverflow: "ellipsis",
-                        display: "-webkit-box",
-                        WebkitLineClamp: 2,
-                        WebkitBoxOrient: "vertical",
-                        lineHeight: "1.4"
-                      },
-                      children: task.description
+                  },
+                  onMouseLeave: (e) => {
+                    if (onTaskClick) {
+                      e.currentTarget.style.transform = "translateY(0)";
+                      e.currentTarget.style.boxShadow = "none";
                     }
-                  ),
-                  task.labels && task.labels.length > 0 && /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      style: {
-                        display: "flex",
-                        gap: "4px",
-                        flexWrap: "wrap",
-                        marginBottom: "8px"
-                      },
-                      children: task.labels.map((label) => /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          style: {
-                            fontSize: theme2.fontSizes[0],
-                            color: theme2.colors.primary,
-                            background: `${theme2.colors.primary}20`,
-                            padding: "2px 8px",
-                            borderRadius: theme2.radii[1],
-                            fontWeight: theme2.fontWeights.medium
-                          },
-                          children: label
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "h4",
+                      {
+                        style: {
+                          margin: "0 0 8px 0",
+                          fontSize: theme2.fontSizes[2],
+                          color: theme2.colors.text,
+                          fontWeight: theme2.fontWeights.medium
                         },
-                        label
-                      ))
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs(
-                    "div",
-                    {
-                      style: {
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "space-between",
-                        fontSize: theme2.fontSizes[0],
-                        color: theme2.colors.textMuted
-                      },
-                      children: [
-                        /* @__PURE__ */ jsx(
-                          "span",
-                          {
-                            style: {
-                              fontFamily: theme2.fonts.monospace
-                            },
-                            children: task.id
-                          }
-                        ),
-                        task.assignee && task.assignee.length > 0 && /* @__PURE__ */ jsxs(
+                        children: task.title
+                      }
+                    ),
+                    task.description && /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        style: {
+                          margin: "0 0 8px 0",
+                          fontSize: theme2.fontSizes[1],
+                          color: theme2.colors.textSecondary,
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          display: "-webkit-box",
+                          WebkitLineClamp: 2,
+                          WebkitBoxOrient: "vertical",
+                          lineHeight: "1.4"
+                        },
+                        children: task.description
+                      }
+                    ),
+                    task.labels && task.labels.length > 0 && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          gap: "4px",
+                          flexWrap: "wrap",
+                          marginBottom: "8px"
+                        },
+                        children: task.labels.map((label) => /* @__PURE__ */ jsx(
                           "span",
                           {
                             style: {
-                              color: theme2.colors.textSecondary
+                              fontSize: theme2.fontSizes[0],
+                              color: theme2.colors.primary,
+                              background: `${theme2.colors.primary}20`,
+                              padding: "2px 8px",
+                              borderRadius: theme2.radii[1],
+                              fontWeight: theme2.fontWeights.medium
                             },
-                            children: [
-                              task.assignee.length,
-                              " assignee",
-                              task.assignee.length !== 1 ? "s" : ""
-                            ]
-                          }
-                        )
-                      ]
+                            children: label
+                          },
+                          label
+                        ))
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "space-between",
+                          fontSize: theme2.fontSizes[0],
+                          color: theme2.colors.textMuted
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              style: {
+                                fontFamily: theme2.fonts.monospace
+                              },
+                              children: task.id
+                            }
+                          ),
+                          task.assignee && task.assignee.length > 0 && /* @__PURE__ */ jsxs(
+                            "span",
+                            {
+                              style: {
+                                color: theme2.colors.textSecondary
+                              },
+                              children: [
+                                task.assignee.length,
+                                " assignee",
+                                task.assignee.length !== 1 ? "s" : ""
+                              ]
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                },
+                task.id
+              )),
+              hasMore && onLoadMore && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: onLoadMore,
+                  disabled: isLoadingMore,
+                  style: {
+                    background: theme2.colors.background,
+                    border: `1px dashed ${theme2.colors.border}`,
+                    borderRadius: theme2.radii[2],
+                    padding: "12px",
+                    cursor: isLoadingMore ? "wait" : "pointer",
+                    color: theme2.colors.textSecondary,
+                    fontSize: theme2.fontSizes[1],
+                    fontWeight: theme2.fontWeights.medium,
+                    transition: "all 0.2s ease",
+                    minHeight: "44px",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: "8px"
+                  },
+                  onMouseEnter: (e) => {
+                    if (!isLoadingMore) {
+                      e.currentTarget.style.background = theme2.colors.backgroundSecondary;
+                      e.currentTarget.style.borderColor = theme2.colors.primary;
+                      e.currentTarget.style.color = theme2.colors.primary;
                     }
-                  )
-                ]
-              },
-              task.id
-            ))
+                  },
+                  onMouseLeave: (e) => {
+                    e.currentTarget.style.background = theme2.colors.background;
+                    e.currentTarget.style.borderColor = theme2.colors.border;
+                    e.currentTarget.style.color = theme2.colors.textSecondary;
+                  },
+                  children: isLoadingMore ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          display: "inline-block",
+                          width: "14px",
+                          height: "14px",
+                          border: `2px solid ${theme2.colors.border}`,
+                          borderTopColor: theme2.colors.primary,
+                          borderRadius: "50%",
+                          animation: "spin 1s linear infinite"
+                        }
+                      }
+                    ),
+                    "Loading..."
+                  ] }) : `Load more (${remaining} remaining)`
+                }
+              )
+            ]
           }
-        )
+        ),
+        /* @__PURE__ */ jsx("style", { children: `
+          @keyframes spin {
+            to { transform: rotate(360deg); }
+          }
+        ` })
       ]
     }
   );
@@ -1626,9 +2134,10 @@ const KanbanPanelContent = ({
   var _a, _b;
   const { theme: theme2 } = useTheme();
   const [_selectedTask, setSelectedTask] = useState(null);
-  const { statuses, tasksByStatus, error, isBacklogProject, refreshData } = useKanbanData({
+  const { sources, tasksBySource, columnStates, loadMore, error, isBacklogProject, refreshData } = useKanbanData({
     context,
-    actions
+    actions,
+    pageSize: 3
   });
   const handleTaskClick = (task) => {
     setSelectedTask(task);
@@ -1772,16 +2281,21 @@ const KanbanPanelContent = ({
               WebkitOverflowScrolling: "touch"
               // Smooth scrolling on iOS
             },
-            children: statuses.map((status) => {
-              const columnTasks = tasksByStatus.get(status) || [];
+            children: sources.map((source) => {
+              const columnTasks = tasksBySource.get(source) || [];
+              const columnState = columnStates.get(source);
               return /* @__PURE__ */ jsx(
                 KanbanColumn,
                 {
-                  status,
+                  status: SOURCE_DISPLAY_LABELS[source],
                   tasks: columnTasks,
+                  total: columnState == null ? void 0 : columnState.total,
+                  hasMore: columnState == null ? void 0 : columnState.hasMore,
+                  isLoadingMore: columnState == null ? void 0 : columnState.isLoadingMore,
+                  onLoadMore: () => loadMore(source),
                   onTaskClick: handleTaskClick
                 },
-                status
+                source
               );
             })
           }