v1.9.2: UI polish, DnD rewrite, summary dashboard, performance

prih · prih · commit 133a7e6271ac · 2026-03-30T20:38:55.000+01:00
- Tasks tabs (Summary/List/Board/Epics), summary dashboard with stats
- Board &amp; list DnD rewrite with SortableContext + arrayMove
- Epic selector in forms, inline priority editing
- Attachments in edit forms, two-column epic detail
- React.memo + useCallback + teamMap performance optimizations
- Uppercase labels, vertical FieldRow, context-aware breadcrumbs
- Docker curl healthcheck, remove tag grouping
- Changelog for v1.9.1 and v1.9.2
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@graphmemory/server",
-  "version": "1.9.1",
+  "version": "1.9.2",
   "description": "MCP server for semantic graph memory from markdown files",
   "main": "dist/cli/index.js",
   "bin": {
diff --git a/site/src/pages/changelog.md b/site/src/pages/changelog.md
@@ -5,6 +5,51 @@ description: Graph Memory release history and version changes.
 
 # Changelog
 
+## v1.9.2
+
+**March 2026**
+
+### New
+
+- **Tasks tabs navigation** — Summary, List, Board, and Epics as tabs within a single Tasks section. Epics moved from top-level nav to Tasks tab at `/tasks/epics`
+- **Task Summary dashboard** — 6 stat cards (Total, Active, Completed, Overdue, In Review, Unassigned), breakdowns by status/priority, by assignee, by epic with progress bars, recently updated tasks, upcoming & overdue deadlines. All clickable with URL filters
+- **Epic selector in task forms** — single-select epic dropdown in create/edit forms with auto link/unlink on save
+- **Inline priority editing** — pill-badge priority selector on task detail view
+- **Attachments in edit forms** — upload/delete attachments during task, note, and skill editing (previously only on detail view)
+- **Skills grid layout** — 2-column card grid with 3-dot menu (Edit/Delete), matching Knowledge layout
+- **Epic detail two-column layout** — description + tasks list on left, progress bar + properties on right
+- **Context-aware breadcrumbs** — task pages show origin (Board/List) via URL `?from=` param, persists through navigation
+- **Column visibility from URL** — `/tasks/list?status=review` sets visible columns, `/tasks/list?group=assignee` sets grouping
+
+### Fixes
+
+- **Board drag & drop rewrite** — SortableContext per column with `useDroppable`, custom collision detection (cards over columns), `arrayMove` for correct position, live cross-column movement in `handleDragOver`, WebSocket refresh suppressed during drag
+- **List drag & drop rewrite** — migrated from `useDraggable`/`useDroppable` to `SortableContext`/`useSortable` with visual row displacement during drag, same `arrayMove` approach as board
+- **Docker healthcheck** — replaced `node -e "fetch(...)"` with `curl -f` (no Node process spawn)
+- **Duplicate submit buttons** — removed redundant Create/Save buttons from PageTopBar on all create/edit pages
+- **Attachments/relations in main column** — moved from sidebar to main content area on task, note, and skill detail views
+- **Uppercase status/priority labels** — consistent uppercase labels across all views (board, list, forms, badges, summary, epics)
+- **FieldRow vertical layout** — label above value with dividers (instead of side-by-side)
+
+### Performance
+
+- **React.memo on card/row components** — `SortableTaskCard` and `SortableTaskRow` wrapped in `memo`
+- **Stable callback props** — extracted inline callbacks to `useCallback` to prevent unnecessary re-renders
+- **Team lookup map** — replaced `team.find()` (O(n)) with `Map<id, TeamMember>` (O(1)) per card render
+- **Memoized activeTask** — `useMemo` instead of `.find()` on every render
+
+---
+
+## v1.9.1
+
+**March 2026**
+
+### Fixes
+
+- **npm ci dependencies** — resolved dependency installation issues
+
+---
+
 ## v1.9.0
 
 **March 2026**
diff --git a/ui/src/entities/task/groupConfig.ts b/ui/src/entities/task/groupConfig.ts
@@ -4,7 +4,7 @@ import type { Epic } from '@/entities/epic/api.ts';
 import { COLUMNS, PRIORITY_COLORS, priorityLabel } from './config.ts';
 import { updateTask } from './api.ts';
 
-export type GroupByField = 'status' | 'priority' | 'assignee' | 'tag' | 'epic' | 'none';
+export type GroupByField = 'status' | 'priority' | 'assignee' | 'epic' | 'none';
 
 export interface GroupDefinition {
   key: string;
@@ -97,26 +97,6 @@ export const GROUP_CONFIGS: Record<GroupByField, GroupConfig> = {
     },
   },
 
-  tag: {
-    field: 'tag',
-    getKeys: (task) => (task.tags && task.tags.length > 0 ? task.tags : []),
-    buildGroups: (tasks) => {
-      const tagSet = new Set<string>();
-      for (const t of tasks) {
-        if (t.tags) for (const tag of t.tags) tagSet.add(tag);
-      }
-      return [...tagSet].sort().map((tag, i) => ({
-        key: tag,
-        label: `#${tag}`,
-        color: '#7b1fa2',
-        sortOrder: i,
-      }));
-    },
-    nullGroupLabel: 'No tags',
-    nullGroupColor: '#616161',
-    dndEnabled: false,
-  },
-
   epic: {
     field: 'epic',
     getKeys: (_task, context) => {
@@ -156,7 +136,6 @@ export const GROUP_BY_OPTIONS: { value: GroupByField; label: string }[] = [
   { value: 'status', label: 'Status' },
   { value: 'priority', label: 'Priority' },
   { value: 'assignee', label: 'Assignee' },
-  { value: 'tag', label: 'Tag' },
   { value: 'epic', label: 'Epic' },
   { value: 'none', label: 'None' },
 ];
diff --git a/ui/src/pages/tasks/board.tsx b/ui/src/pages/tasks/board.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import { useState, useEffect, useCallback, useMemo, useRef, memo } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import {
   Box, Typography, Button, Paper, Stack, Chip,
@@ -57,10 +57,10 @@ function dueDateInfo(dueDate: number | null, status: TaskStatus): { label: strin
 // Sortable card wrapper
 // ---------------------------------------------------------------------------
 
-function SortableTaskCard({
-  task, team, canWrite, onNavigate, onEdit, onDelete, palette, taskEpics, onTagClick, activeTag, onAssigneeClick, onPriorityChange, onEpicClick,
+const SortableTaskCard = memo(function SortableTaskCard({
+  task, teamMap, canWrite, onNavigate, onEdit, onDelete, palette, taskEpics, onTagClick, activeTag, onAssigneeClick, onPriorityChange, onEpicClick,
 }: {
-  task: Task; team: TeamMember[]; canWrite: boolean;
+  task: Task; teamMap: Map<string, TeamMember>; canWrite: boolean;
   onNavigate: (id: string) => void; onEdit: (id: string) => void; onDelete: (t: Task) => void;
   palette: any; taskEpics?: Epic[]; onTagClick: (tag: string) => void; activeTag?: string; onAssigneeClick: (id: string) => void; onPriorityChange: (p: TaskPriority) => void; onEpicClick: (id: string) => void;
 }) {
@@ -159,7 +159,7 @@ function SortableTaskCard({
             onClick={(e: React.MouseEvent) => { e.stopPropagation(); onAssigneeClick(task.assignee!); }}
             sx={{ color: palette.custom.textMuted, cursor: 'pointer', '&:hover': { textDecoration: 'underline', color: palette.text.primary } }}
           >
-            @{team.find(m => m.id === task.assignee)?.name ?? task.assignee}
+            @{teamMap.get(task.assignee!)?.name ?? task.assignee}
           </Typography>
         )}
         {task.estimate != null && (
@@ -213,7 +213,7 @@ function SortableTaskCard({
       ) : null}
     </Paper>
   );
-}
+});
 
 // ---------------------------------------------------------------------------
 // Droppable column wrapper — makes the entire column a valid drop target
@@ -274,6 +274,15 @@ export default function TaskBoardPage() {
 
   const { filters, setFilter, clearAll } = useFilters<BoardFilterKey>(BOARD_FILTER_DEFS);
 
+  const teamMap = useMemo(() => new Map(team.map(m => [m.id, m])), [team]);
+
+  // Stable callbacks for card props
+  const handleCardNavigate = useCallback((id: string) => navigate(`/${projectId}/tasks/${id}?from=board`), [navigate, projectId]);
+  const handleCardEdit = useCallback((id: string) => navigate(`/${projectId}/tasks/${id}/edit?from=board`), [navigate, projectId]);
+  const handleTagClick = useCallback((t: string) => setFilter('tag', t), [setFilter]);
+  const handleAssigneeClick = useCallback((id: string) => setFilter('assignee', id), [setFilter]);
+  const handleEpicClick = useCallback((id: string) => setFilter('epic', id), [setFilter]);
+
   // DnD state
   const [activeId, setActiveId] = useState<string | null>(null);
   const [overColumn, setOverColumn] = useState<TaskStatus | null>(null);
@@ -510,7 +519,7 @@ export default function TaskBoardPage() {
       chips.push({ key: 'tag', label: `#${filters.tag}`, onClear: () => setFilter('tag', '') });
     }
     if (filters.assignee) {
-      const m = team.find(t => t.id === filters.assignee);
+      const m = teamMap.get(filters.assignee);
       chips.push({ key: 'assignee', label: `@${m?.name || filters.assignee}`, onClear: () => setFilter('assignee', '') });
     }
     if (filters.epic) {
@@ -520,7 +529,7 @@ export default function TaskBoardPage() {
     return chips;
   }, [filters, team, epics, setFilter]);
 
-  const activeTask = activeId ? tasks.find(t => t.id === activeId) : null;
+  const activeTask = useMemo(() => activeId ? tasks.find(t => t.id === activeId) : null, [activeId, tasks]);
 
   return (
     <Box>
@@ -704,17 +713,17 @@ export default function TaskBoardPage() {
                           <SortableTaskCard
                             key={task.id}
                             task={task}
-                            team={team}
+                            teamMap={teamMap}
                             canWrite={canWrite}
-                            onNavigate={(id) => navigate(`/${projectId}/tasks/${id}?from=board`)}
-                            onEdit={(id) => navigate(`/${projectId}/tasks/${id}/edit?from=board`)}
+                            onNavigate={handleCardNavigate}
+                            onEdit={handleCardEdit}
                             onDelete={setDeleteTarget}
                             palette={palette}
                             taskEpics={taskEpicMap.get(task.id)}
-                            onTagClick={t => setFilter('tag', t)}
+                            onTagClick={handleTagClick}
                             activeTag={filters.tag}
-                            onAssigneeClick={id => setFilter('assignee', id)}
-                            onEpicClick={id => setFilter('epic', id)}
+                            onAssigneeClick={handleAssigneeClick}
+                            onEpicClick={handleEpicClick}
                             onPriorityChange={async (p) => {
                               setTasks(prev => prev.map(t => t.id === task.id ? { ...t, priority: p } : t));
                               try { await updateTask(projectId!, task.id, { priority: p }); } catch { refresh(); }
diff --git a/ui/src/pages/tasks/list.tsx b/ui/src/pages/tasks/list.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import { Fragment, useState, useEffect, useCallback, useMemo, useRef, memo } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import {
   Box, Typography, Button, Paper, Chip, Alert, CircularProgress,
@@ -28,7 +28,6 @@ import { useCanWrite } from '@/shared/lib/AccessContext.tsx';
 import { StatusBadge, ConfirmDialog, PaginationBar, FilterBar, FilterControl } from '@/shared/ui/index.ts';
 import type { SortDir } from '@/shared/lib/useTableSort.ts';
 import { useFilters } from '@/shared/lib/useFilters.ts';
-import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import {
   listTasks, updateTask, reorderTask, bulkMoveTasks, bulkUpdatePriority, bulkDeleteTasks,
   COLUMNS, PRIORITY_COLORS, PRIORITY_BADGE_COLOR, priorityLabel, statusLabel,
@@ -158,11 +157,11 @@ function TailDropZone({ groupKey, color, dndEnabled }: { groupKey: string; color
 // Draggable + droppable task row
 // ---------------------------------------------------------------------------
 
-function SortableTaskRow({
-  task, team, canWrite, selected, onToggleSelect, onNavigate, palette,
+const SortableTaskRow = memo(function SortableTaskRow({
+  task, teamMap, canWrite, selected, onToggleSelect, onNavigate, palette,
   onInlineStatus, onInlinePriority, groupColor, taskEpics, onTagClick, activeTag, onAssigneeClick, onEpicClick,
 }: {
-  task: Task; team: TeamMember[]; canWrite: boolean; selected: boolean;
+  task: Task; teamMap: Map<string, TeamMember>; canWrite: boolean; selected: boolean;
   onToggleSelect: () => void; onNavigate: () => void; palette: any;
   onInlineStatus: (status: TaskStatus) => void; onInlinePriority: (priority: TaskPriority) => void;
   groupColor: string; taskEpics?: Epic[]; onTagClick: (tag: string) => void; activeTag?: string; onAssigneeClick: (id: string) => void; onEpicClick: (id: string) => void;
@@ -181,8 +180,8 @@ function SortableTaskRow({
       sx={{
         cursor: canWrite ? 'grab' : 'pointer',
         opacity: isDragging ? 0.35 : 1,
-        borderLeft: `3px solid ${alpha(groupColor, 0.5)}`,
-        bgcolor: alpha(groupColor, 0.03),
+        borderLeft: groupColor && groupColor !== 'transparent' ? `3px solid ${alpha(groupColor, 0.5)}` : undefined,
+        bgcolor: groupColor && groupColor !== 'transparent' ? alpha(groupColor, 0.03) : undefined,
         transition: 'opacity 0.15s',
         touchAction: 'none',
       }}
@@ -288,7 +287,7 @@ function SortableTaskRow({
             onClick={(e: React.MouseEvent) => { e.stopPropagation(); onAssigneeClick(task.assignee!); }}
             sx={{ color: palette.custom.textMuted, cursor: 'pointer', '&:hover': { textDecoration: 'underline', color: palette.text.primary } }}
           >
-            @{team.find(m => m.id === task.assignee)?.name ?? task.assignee}
+            @{teamMap.get(task.assignee!)?.name ?? task.assignee}
           </Typography>
         )}
       </TableCell>
@@ -305,7 +304,7 @@ function SortableTaskRow({
       </TableCell>
     </TableRow>
   );
-}
+});
 
 // ---------------------------------------------------------------------------
 // Main page
@@ -327,7 +326,7 @@ const GROUP_BY_STORAGE_KEY = 'tasks-list-group-by';
 function loadGroupBy(): GroupByField {
   try {
     const raw = localStorage.getItem(GROUP_BY_STORAGE_KEY);
-    if (raw && ['status', 'priority', 'assignee', 'tag', 'epic', 'none'].includes(raw)) return raw as GroupByField;
+    if (raw && ['status', 'priority', 'assignee', 'epic', 'none'].includes(raw)) return raw as GroupByField;
   } catch { /* ignore */ }
   return 'status';
 }
@@ -347,7 +346,7 @@ export default function TaskListPage() {
   const [groupBy, setGroupBy] = useState<GroupByField>(() => {
     const params = new URLSearchParams(window.location.search);
     const urlGroup = params.get('group');
-    if (urlGroup && ['status', 'priority', 'assignee', 'tag', 'epic', 'none'].includes(urlGroup)) return urlGroup as GroupByField;
+    if (urlGroup && ['status', 'priority', 'assignee', 'epic', 'none'].includes(urlGroup)) return urlGroup as GroupByField;
     return loadGroupBy();
   });
   const handleGroupByChange = useCallback((value: string) => {
@@ -358,6 +357,13 @@ export default function TaskListPage() {
 
   const { filters, setFilter, setFilters, clearAll } = useFilters<TaskFilterKey>(TASK_FILTER_DEFS);
 
+  const teamMap = useMemo(() => new Map(team.map(m => [m.id, m])), [team]);
+
+  // Stable callbacks for row props
+  const handleTagClick = useCallback((t: string) => setFilter('tag', t), [setFilter]);
+  const handleAssigneeClick = useCallback((id: string) => setFilter('assignee', id), [setFilter]);
+  const handleEpicClick = useCallback((id: string) => setFilter('epic', id), [setFilter]);
+
   const [epics, setEpics] = useState<Epic[]>([]);
   const [epicTaskIds, setEpicTaskIds] = useState<Set<string> | null>(null);
   const [taskEpicMap, setTaskEpicMap] = useState<Map<string, Epic[]>>(new Map());
@@ -616,7 +622,7 @@ export default function TaskListPage() {
       chips.push({ key: 'tag', label: `#${filters.tag}`, onClear: () => setFilter('tag', '') });
     }
     if (filters.assignee) {
-      const m = team.find(t => t.id === filters.assignee);
+      const m = teamMap.get(filters.assignee);
       chips.push({ key: 'assignee', label: `@${m?.name || filters.assignee}`, onClear: () => setFilter('assignee', '') });
     }
     if (filters.epic) {
@@ -627,7 +633,7 @@ export default function TaskListPage() {
   }, [filters, team, epics, setFilter]);
 
   const totalFiltered = filteredTasks.length;
-  const activeTask = activeId ? tasks.find(t => t.id === activeId) : null;
+  const activeTask = useMemo(() => activeId ? tasks.find(t => t.id === activeId) : null, [activeId, tasks]);
 
   const handleClearAll = () => { clearAll(); };
 
@@ -786,12 +792,7 @@ export default function TaskListPage() {
         </Box>
       ) : (
         <DndContext sensors={sensors} collisionDetection={listCollisionDetection} onDragStart={currentGroupConfig.dndEnabled ? handleDragStart : undefined} onDragOver={currentGroupConfig.dndEnabled ? handleDragOver : undefined} onDragEnd={currentGroupConfig.dndEnabled ? handleDragEnd : undefined}>
-          {groupBy === 'tag' && (
-            <Alert severity="info" icon={<InfoOutlinedIcon fontSize="small" />} sx={{ mb: 1, py: 0 }}>
-              Tasks may appear in multiple groups
-            </Alert>
-          )}
-          <TableContainer component={Paper} variant="outlined">
+<TableContainer component={Paper} variant="outlined">
             <Table size="small">
               <TableHead>
                 <TableRow>
@@ -817,7 +818,7 @@ export default function TaskListPage() {
                           <SortableTaskRow
                             key={task.id}
                             task={task}
-                            team={team}
+                            teamMap={teamMap}
                             canWrite={canWrite}
                             selected={selected.has(task.id)}
                             groupColor="transparent"
@@ -827,10 +828,10 @@ export default function TaskListPage() {
                             onInlinePriority={p => handleInlinePriority(task, p)}
                             palette={palette}
                             taskEpics={taskEpicMap.get(task.id)}
-                            onTagClick={t => setFilter('tag', t)}
+                            onTagClick={handleTagClick}
                             activeTag={filters.tag}
-                            onAssigneeClick={id => setFilter('assignee', id)}
-                            onEpicClick={id => setFilter('epic', id)}
+                            onAssigneeClick={handleAssigneeClick}
+                            onEpicClick={handleEpicClick}
                           />
                         ))}
                       </SortableContext>
@@ -859,7 +860,7 @@ export default function TaskListPage() {
                             <SortableTaskRow
                               key={task.id}
                               task={task}
-                              team={team}
+                              teamMap={teamMap}
                               canWrite={canWrite}
                               selected={selected.has(task.id)}
                               groupColor={color}
@@ -869,10 +870,10 @@ export default function TaskListPage() {
                               onInlinePriority={p => handleInlinePriority(task, p)}
                               palette={palette}
                               taskEpics={taskEpicMap.get(task.id)}
-                              onTagClick={t => setFilter('tag', t)}
+                              onTagClick={handleTagClick}
                               activeTag={filters.tag}
-                              onAssigneeClick={id => setFilter('assignee', id)}
-                              onEpicClick={id => setFilter('epic', id)}
+                              onAssigneeClick={handleAssigneeClick}
+                              onEpicClick={handleEpicClick}
                             />
                           ))}
                         </SortableContext>

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@graphmemory/server",`
`3`		`- "version": "1.9.1",`
	`3`	`+ "version": "1.9.2",`
`4`	`4`	`"description": "MCP server for semantic graph memory from markdown files",`
`5`	`5`	`"main": "dist/cli/index.js",`
`6`	`6`	`"bin": {`