From 25042fa8847f12dc1c2391e05e1ab4589baccfa0 Mon Sep 17 00:00:00 2001
From: Alex Soffronow Pagonidis
 <237136924+alex-clickhouse@users.noreply.github.com>
Date: Wed, 5 Aug 2026 08:59:38 +0000
Subject: [PATCH 1/3] Open tasks in a modal over the board
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Clicking a board card navigated to the full task page, tearing down the
board and losing its scroll position — for what is usually a glance at
the description.

/tasks/:taskId now renders either way depending on how it was reached.
Entered from the board it carries a `background` location in history
state, so App renders the board's route tree and overlays the task as a
dialog; a cold load, a refresh, or a shared link has no such state and
gets the ordinary full page. The URL is the same either way, so links
stay shareable and Back still means back. First use of location.state in
the app.

The editor itself moves into TaskDetailBody, shared by the page and the
modal so the two can't drift — only the surrounding chrome differs. One
behaviour change fell out of the extraction: content no longer resyncs
from the store while edits are unsaved, because a task_updated broadcast
arriving mid-typing would otherwise discard what you were writing.

Also adds page-scoped shortcuts (b/l to switch view, n for new, / to
focus search) and the Tasks section in ShortcutsModal — whose comment
says the list is manual and must be kept in sync. Card-level movement is
left to dnd-kit's own keyboard handling rather than reimplemented.

Deletes components/Tasks/TaskList.tsx: 89 lines, zero importers, dead
since the page was rewritten.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 web/src/App.tsx                              |  23 +++-
 web/src/components/ShortcutsModal.tsx        |  11 ++
 web/src/components/Tasks/TaskDetailBody.tsx  | 124 +++++++++++++++++++
 web/src/components/Tasks/TaskDetailModal.tsx |  76 ++++++++++++
 web/src/components/Tasks/TaskList.tsx        |  89 -------------
 web/src/pages/TasksPage.tsx                  |  42 ++++++-
 web/src/utils/keyboard.ts                    |   2 +-
 7 files changed, 274 insertions(+), 93 deletions(-)
 create mode 100644 web/src/components/Tasks/TaskDetailBody.tsx
 create mode 100644 web/src/components/Tasks/TaskDetailModal.tsx
 delete mode 100644 web/src/components/Tasks/TaskList.tsx

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 3c37a15e..c771d42a 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useMemo } from 'react';
-import { Routes, Route, Navigate, useNavigate } from 'react-router-dom';
+import { Routes, Route, Navigate, useNavigate, useLocation } from 'react-router-dom';
+import type { Location } from 'react-router-dom';
 import { useAuthStore } from './stores/authStore';
 import { ws } from './api/websocket';
 import { useChatStore } from './stores/chatStore';
@@ -12,6 +13,7 @@ import { ChatPage } from './pages/ChatPage';
 import { FilesPage } from './pages/FilesPage';
 import { TasksPage } from './pages/TasksPage';
 import { TaskDetailPage } from './pages/TaskDetailPage';
+import { TaskDetailModal } from './components/Tasks/TaskDetailModal';
 import { DiagnosticsPage } from './pages/DiagnosticsPage';
 import { MemuPage } from './pages/MemuPage';
 import { SourcesPage } from './pages/SourcesPage';
@@ -31,6 +33,8 @@ import { ShortcutsModal } from './components/ShortcutsModal';
 function App() {
   const { authenticated, checking, checkAuth } = useAuthStore();
   const { handleWSMessage, loadSessions } = useChatStore();
+  // Above the early returns — hooks can't run conditionally.
+  const location = useLocation();
 
   useEffect(() => { checkAuth(); }, []);
 
@@ -45,10 +49,18 @@ function App() {
   if (checking) return null;
   if (!authenticated) return <LoginPage />;
 
+  // Background-location routing: when a route is entered with a
+  // `background` location in history state, render *that* location's route
+  // tree and overlay the real one as a modal. Reaching the same URL
+  // directly — a cold load, a refresh, a shared link — carries no such
+  // state and renders the ordinary full page. Used by the task board so
+  // opening a card doesn't tear the board down.
+  const background = (location.state as { background?: Location } | null)?.background;
+
   return (
     <>
       <GlobalShortcuts />
-      <Routes>
+      <Routes location={background ?? location}>
         <Route element={<AppShell />}>
           <Route path="/" element={<Navigate to="/chat" replace />} />
           <Route path="/chat/:sessionId?" element={<ChatPage />} />
@@ -70,6 +82,13 @@ function App() {
           <Route path="/diagnostics" element={<DiagnosticsPage />} />
         </Route>
       </Routes>
+
+      {background && (
+        <Routes>
+          <Route path="/tasks/:taskId" element={<TaskDetailModal />} />
+        </Routes>
+      )}
+
       <NotificationToast />
       <ShortcutsModal />
     </>
diff --git a/web/src/components/ShortcutsModal.tsx b/web/src/components/ShortcutsModal.tsx
index 50697b0b..b0d1b4d2 100644
--- a/web/src/components/ShortcutsModal.tsx
+++ b/web/src/components/ShortcutsModal.tsx
@@ -44,6 +44,17 @@ const SECTIONS: Section[] = [
       { combo: { shift: true, key: 'Enter' }, description: 'New line' },
     ],
   },
+  {
+    title: 'Tasks',
+    items: [
+      { combo: { key: 'b' }, description: 'Board view' },
+      { combo: { key: 'l' }, description: 'List view' },
+      { combo: { key: 'n' }, description: 'New task' },
+      { combo: { key: '/' }, description: 'Focus task search' },
+      { combo: { key: 'Space' }, description: 'Pick up / drop a focused card' },
+      { combo: { key: 'ArrowUp' }, description: 'Move a picked-up card (with arrows)' },
+    ],
+  },
 ];
 
 export function ShortcutsModal() {
diff --git a/web/src/components/Tasks/TaskDetailBody.tsx b/web/src/components/Tasks/TaskDetailBody.tsx
new file mode 100644
index 00000000..30e5804c
--- /dev/null
+++ b/web/src/components/Tasks/TaskDetailBody.tsx
@@ -0,0 +1,124 @@
+import { useCallback, useEffect, useState } from 'react';
+import { Calendar, Edit3, ExternalLink, Eye, Save } from 'lucide-react';
+import type { Task } from '../../api/client';
+import { useTaskStore } from '../../stores/taskStore';
+import { StatusBadge, StatusSelect } from './StatusControls';
+import { MarkdownContent } from '../Chat/MarkdownContent';
+
+/**
+ * The task editor itself — metadata row, edit/preview toggle, markdown
+ * body, save.
+ *
+ * Shared by the full page and the board's modal so the two can't drift.
+ * Only the surrounding chrome differs: the page supplies a back button and
+ * heading, the modal supplies the dialog frame.
+ */
+export function TaskDetailBody({ task }: { task: Task }) {
+  const saving = useTaskStore((s) => s.saving);
+  const saveTaskContent = useTaskStore((s) => s.saveTaskContent);
+  const updateStatus = useTaskStore((s) => s.updateStatus);
+
+  const [mode, setMode] = useState<'edit' | 'preview'>('preview');
+  const [localContent, setLocalContent] = useState('');
+  const [dirty, setDirty] = useState(false);
+
+  // Adopt the loaded markdown, but never clobber unsaved edits — a
+  // task_updated broadcast can land mid-typing.
+  useEffect(() => {
+    if (task.content != null && !dirty) {
+      setLocalContent(task.content);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [task.content]);
+
+  const handleSave = useCallback(async () => {
+    if (!dirty) return;
+    await saveTaskContent(task.id, localContent);
+    setDirty(false);
+  }, [task.id, dirty, localContent, saveTaskContent]);
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === 's') {
+      e.preventDefault();
+      void handleSave();
+    }
+  }, [handleSave]);
+
+  return (
+    <div className="flex flex-col h-full min-h-0">
+      <div className="flex items-center gap-3 px-5 py-2.5 text-[12px] border-b border-border-subtle shrink-0 flex-wrap">
+        <StatusBadge status={task.status} />
+        <StatusSelect
+          value={task.status}
+          onChange={(status) => updateStatus(task.id, status)}
+          className="text-[12px] px-2 py-1 bg-surface-raised border border-border rounded text-text-muted outline-none cursor-pointer"
+        />
+        {task.deadline && (
+          <span className="flex items-center gap-1 text-text-dim">
+            <Calendar size={11} /> {task.deadline}
+          </span>
+        )}
+        {task.source && <span className="text-text-faint">from {task.source}</span>}
+        {task.source_url && (
+          <a
+            href={task.source_url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-1 text-accent hover:underline"
+          >
+            <ExternalLink size={11} /> source
+          </a>
+        )}
+
+        <div className="ml-auto flex items-center gap-2">
+          {dirty && (
+            <button
+              onClick={handleSave}
+              disabled={saving}
+              className="flex items-center gap-1.5 px-3 py-1 text-[12px] bg-accent hover:bg-accent-hover text-white rounded-md cursor-pointer disabled:opacity-50"
+            >
+              <Save size={12} /> {saving ? 'Saving...' : 'Save'}
+            </button>
+          )}
+          <div className="flex bg-surface-raised rounded-md border border-border">
+            <button
+              onClick={() => setMode('edit')}
+              aria-pressed={mode === 'edit'}
+              title="Edit"
+              className={`px-2.5 py-1 rounded-l-md cursor-pointer transition-colors
+                ${mode === 'edit' ? 'text-text' : 'text-text-dim hover:text-text-muted'}`}
+            >
+              <Edit3 size={13} />
+            </button>
+            <button
+              onClick={() => setMode('preview')}
+              aria-pressed={mode === 'preview'}
+              title="Preview"
+              className={`px-2.5 py-1 rounded-r-md cursor-pointer transition-colors
+                ${mode === 'preview' ? 'text-text' : 'text-text-dim hover:text-text-muted'}`}
+            >
+              <Eye size={13} />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {mode === 'edit' ? (
+        <textarea
+          value={localContent}
+          onChange={(e) => { setLocalContent(e.target.value); setDirty(true); }}
+          onKeyDown={handleKeyDown}
+          className="flex-1 min-h-0 p-5 bg-bg-sunken text-[13px] text-text font-mono leading-relaxed outline-none resize-none"
+          spellCheck={false}
+          placeholder="Task content..."
+        />
+      ) : (
+        <div className="flex-1 min-h-0 overflow-y-auto p-5">
+          {localContent
+            ? <MarkdownContent content={localContent} />
+            : <span className="text-text-faint italic">No content</span>}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/web/src/components/Tasks/TaskDetailModal.tsx b/web/src/components/Tasks/TaskDetailModal.tsx
new file mode 100644
index 00000000..20704a8b
--- /dev/null
+++ b/web/src/components/Tasks/TaskDetailModal.tsx
@@ -0,0 +1,76 @@
+import { useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { Maximize2 } from 'lucide-react';
+import { useTaskStore } from '../../stores/taskStore';
+import { useTaskStatusStore } from '../../stores/taskStatusStore';
+import { Modal } from '../ui/Modal';
+import { TaskDetailBody } from './TaskDetailBody';
+
+/**
+ * `/tasks/:taskId` rendered over the board.
+ *
+ * Mounted only when the route was reached with a `background` location in
+ * history state (see `TasksPage.openTask`). A cold load or a refresh of
+ * the same URL has no such state and falls through to the full
+ * `TaskDetailPage` — so the URL stays shareable and the back button still
+ * means "back", while clicking a card doesn't tear down the board.
+ */
+export function TaskDetailModal() {
+  const { taskId } = useParams<{ taskId: string }>();
+  const navigate = useNavigate();
+
+  const selectedTask = useTaskStore((s) => s.selectedTask);
+  const detailLoading = useTaskStore((s) => s.detailLoading);
+  const loadTask = useTaskStore((s) => s.loadTask);
+  const clearSelectedTask = useTaskStore((s) => s.clearSelectedTask);
+  const loadStatuses = useTaskStatusStore((s) => s.load);
+
+  useEffect(() => {
+    if (taskId) void loadTask(taskId);
+    void loadStatuses();
+    return () => clearSelectedTask();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [taskId]);
+
+  // -1 rather than navigate('/tasks'): the board is still mounted behind
+  // this, so going back restores it with its scroll position intact.
+  const close = () => navigate(-1);
+
+  const title = detailLoading
+    ? 'Loading...'
+    : selectedTask?.title ?? 'Task not found';
+
+  return (
+    <Modal
+      open
+      onClose={close}
+      title={
+        <span className="flex items-center gap-2 min-w-0">
+          <span className="truncate">{title}</span>
+          {taskId && (
+            <button
+              onClick={() => navigate(`/tasks/${taskId}`, { replace: true })}
+              title="Open as full page"
+              aria-label="Open as full page"
+              className="shrink-0 text-text-faint hover:text-text-muted cursor-pointer"
+            >
+              <Maximize2 size={13} />
+            </button>
+          )}
+        </span>
+      }
+      size="xl"
+      // Markdown editing behind a backdrop click is too much to lose.
+      closeOnBackdrop={false}
+      className="h-[80vh]"
+    >
+      {detailLoading && (
+        <div className="p-8 text-center text-text-faint text-[13px]">Loading...</div>
+      )}
+      {!detailLoading && !selectedTask && (
+        <div className="p-8 text-center text-text-faint text-[13px]">Task not found.</div>
+      )}
+      {!detailLoading && selectedTask && <TaskDetailBody task={selectedTask} />}
+    </Modal>
+  );
+}
diff --git a/web/src/components/Tasks/TaskList.tsx b/web/src/components/Tasks/TaskList.tsx
deleted file mode 100644
index ebe8d4f4..00000000
--- a/web/src/components/Tasks/TaskList.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { useEffect, useState } from 'react';
-import { api } from '../../api/client';
-import { useTaskStatusStore } from '../../stores/taskStatusStore';
-import { StatusBadge, StatusSelect } from './StatusControls';
-
-interface Task {
-  id: string;
-  title: string;
-  status: string;
-  deadline: string | null;
-  source: string;
-  created_at: string;
-}
-
-export function TaskList() {
-  const [tasks, setTasks] = useState<Task[]>([]);
-  const [filter, setFilter] = useState('');
-  const [loading, setLoading] = useState(true);
-  const statuses = useTaskStatusStore((s) => s.statuses);
-  const loadStatuses = useTaskStatusStore((s) => s.load);
-
-  const loadTasks = async () => {
-    try {
-      const { tasks } = await api.listTasks({ status: filter || undefined });
-      setTasks(tasks);
-    } catch (e) {
-      console.error('Failed to load tasks:', e);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => { loadStatuses(); }, []);
-  useEffect(() => { loadTasks(); }, [filter]);
-
-  const handleStatusChange = async (id: string, newStatus: string) => {
-    await api.updateTask(id, { status: newStatus });
-    loadTasks();
-  };
-
-  return (
-    <div className="p-4">
-      <div className="flex items-center gap-2 mb-4">
-        <h2 className="text-lg font-semibold">Tasks</h2>
-        <select
-          value={filter}
-          onChange={(e) => setFilter(e.target.value)}
-          className="text-sm px-2 py-1 bg-surface-raised border border-border-subtle rounded text-text outline-none"
-        >
-          <option value="">Active</option>
-          {statuses.map((s) => (
-            <option key={s.name} value={s.name}>{s.label}</option>
-          ))}
-        </select>
-      </div>
-
-      {loading ? (
-        <div className="text-text-faint">Loading...</div>
-      ) : tasks.length === 0 ? (
-        <div className="text-text-faint">No tasks</div>
-      ) : (
-        <div className="space-y-2">
-          {tasks.map((task) => (
-            <div
-              key={task.id}
-              className="p-3 bg-surface-raised border border-border-subtle rounded"
-            >
-              <div className="flex items-start justify-between">
-                <div>
-                  <div className="font-medium">{task.title}</div>
-                  <div className="text-xs text-text-dim mt-1 flex items-center gap-2">
-                    <StatusBadge status={task.status} />
-                    {task.deadline && <span>Due: {task.deadline}</span>}
-                    {task.source && <span>from {task.source}</span>}
-                  </div>
-                </div>
-                <StatusSelect
-                  value={task.status}
-                  onChange={(status) => handleStatusChange(task.id, status)}
-                  className="text-xs px-1.5 py-0.5 bg-surface-raised border border-border-subtle rounded text-text-muted outline-none"
-                />
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/web/src/pages/TasksPage.tsx b/web/src/pages/TasksPage.tsx
index 04f349f5..e8dcbd6b 100644
--- a/web/src/pages/TasksPage.tsx
+++ b/web/src/pages/TasksPage.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState, useCallback } from 'react';
+import { useEffect, useRef, useState, useCallback, useMemo } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { ChevronLeft, ChevronRight, Columns3, List, Plus, Search, SlidersHorizontal, X } from 'lucide-react';
 import { useTaskStore, TASKS_PAGE_SIZE, type TaskSort, type TaskViewMode } from '../stores/taskStore';
@@ -9,6 +9,8 @@ import { TaskCreateDialog } from '../components/Tasks/TaskCreateDialog';
 import { TaskStatusManager } from '../components/Tasks/TaskStatusManager';
 import { TaskBoard } from '../components/Tasks/Board/TaskBoard';
 import { BoardFilterBar } from '../components/Tasks/Board/BoardFilterBar';
+import { useKeyboardShortcuts } from '../hooks/useKeyboardShortcuts';
+import type { ShortcutDef } from '../utils/keyboard';
 
 const SORT_OPTIONS: { value: TaskSort; label: string }[] = [
   { value: 'deadline', label: 'Deadline' },
@@ -36,6 +38,7 @@ export function TasksPage() {
   const [localQuery, setLocalQuery] = useState(searchQuery);
   const [showStatusManager, setShowStatusManager] = useState(false);
   const debounceRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const searchRef = useRef<HTMLInputElement>(null);
 
   const isBoard = viewMode === 'board';
 
@@ -75,6 +78,42 @@ export function TasksPage() {
     navigate(`/tasks/${task.id}`, { state: { background: location } });
   }, [navigate, location]);
 
+  // Page-scoped, like ChatPage's — they only bind while /tasks is mounted.
+  // Card-level navigation is dnd-kit's (Tab to a card, Space to pick up,
+  // arrows to move), so these cover only what the page itself owns.
+  const shortcuts = useMemo<ShortcutDef[]>(() => [
+    {
+      id: 'tasks-board-view',
+      combo: { key: 'b' },
+      description: 'Board view',
+      section: 'tasks',
+      action: () => setViewMode('board'),
+    },
+    {
+      id: 'tasks-list-view',
+      combo: { key: 'l' },
+      description: 'List view',
+      section: 'tasks',
+      action: () => setViewMode('list'),
+    },
+    {
+      id: 'tasks-new',
+      combo: { key: 'n' },
+      description: 'New task',
+      section: 'tasks',
+      action: () => setShowCreateDialog(true),
+    },
+    {
+      id: 'tasks-focus-search',
+      combo: { key: '/' },
+      description: 'Focus task search',
+      section: 'tasks',
+      action: () => searchRef.current?.focus(),
+    },
+  ], [setViewMode, setShowCreateDialog]);
+
+  useKeyboardShortcuts(shortcuts);
+
   return (
     <div className="h-full flex flex-col min-w-0">
       <div className="border-b border-border-subtle px-4 py-3 flex items-center justify-between gap-4 bg-bg shrink-0">
@@ -105,6 +144,7 @@ export function TasksPage() {
           <div className="relative ml-2 shrink-0">
             <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-text-faint" />
             <input
+              ref={searchRef}
               type="text"
               value={localQuery}
               onChange={e => handleSearchChange(e.target.value)}
diff --git a/web/src/utils/keyboard.ts b/web/src/utils/keyboard.ts
index 39526cfd..4bd43c31 100644
--- a/web/src/utils/keyboard.ts
+++ b/web/src/utils/keyboard.ts
@@ -57,7 +57,7 @@ export interface ShortcutDef {
   combo: ShortcutCombo;
   /** Section + description shown in the modal. */
   description: string;
-  section: 'global' | 'chat' | 'input';
+  section: 'global' | 'chat' | 'input' | 'tasks';
   /** Only fire when this returns true (e.g. only on /chat). */
   when?: () => boolean;
   /**

From 9d23184e8b798e32d42f0cad5c5324827f808ab1 Mon Sep 17 00:00:00 2001
From: Alex Soffronow Pagonidis
 <237136924+alex-clickhouse@users.noreply.github.com>
Date: Wed, 5 Aug 2026 10:50:14 +0000
Subject: [PATCH 2/3] Widen the task detail modal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

At 620px the markdown body wrapped prose into a column too narrow to read
comfortably, let alone edit — the dialog was sized like a form when it
holds a document.

Adds a `wide` size to Modal (min(1100px, 94vw)) rather than a one-off
override, since any future document-shaped dialog wants the same thing,
and takes the task modal to 85vh so the editor has vertical room too.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 web/src/components/Tasks/TaskDetailBody.tsx  | 2 +-
 web/src/components/Tasks/TaskDetailModal.tsx | 5 +++--
 web/src/components/ui/Modal.tsx              | 5 ++++-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/web/src/components/Tasks/TaskDetailBody.tsx b/web/src/components/Tasks/TaskDetailBody.tsx
index 30e5804c..4fc395d3 100644
--- a/web/src/components/Tasks/TaskDetailBody.tsx
+++ b/web/src/components/Tasks/TaskDetailBody.tsx
@@ -113,7 +113,7 @@ export function TaskDetailBody({ task }: { task: Task }) {
           placeholder="Task content..."
         />
       ) : (
-        <div className="flex-1 min-h-0 overflow-y-auto p-5">
+        <div className="flex-1 min-h-0 overflow-y-auto px-6 py-5">
           {localContent
             ? <MarkdownContent content={localContent} />
             : <span className="text-text-faint italic">No content</span>}
diff --git a/web/src/components/Tasks/TaskDetailModal.tsx b/web/src/components/Tasks/TaskDetailModal.tsx
index 20704a8b..5a11bd24 100644
--- a/web/src/components/Tasks/TaskDetailModal.tsx
+++ b/web/src/components/Tasks/TaskDetailModal.tsx
@@ -59,10 +59,11 @@ export function TaskDetailModal() {
           )}
         </span>
       }
-      size="xl"
+      // The task body is a document, not a form — it needs room to read.
+      size="wide"
       // Markdown editing behind a backdrop click is too much to lose.
       closeOnBackdrop={false}
-      className="h-[80vh]"
+      className="h-[85vh] max-h-[85vh]"
     >
       {detailLoading && (
         <div className="p-8 text-center text-text-faint text-[13px]">Loading...</div>
diff --git a/web/src/components/ui/Modal.tsx b/web/src/components/ui/Modal.tsx
index fcd9d46b..e5fce332 100644
--- a/web/src/components/ui/Modal.tsx
+++ b/web/src/components/ui/Modal.tsx
@@ -75,13 +75,16 @@ const FOCUSABLE = [
   '[tabindex]:not([tabindex="-1"])',
 ].join(',');
 
-export type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
+export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'wide';
 
 const SIZES: Record<ModalSize, string> = {
   sm: 'w-[360px] max-w-[90vw]',
   md: 'w-[480px] max-w-[90vw]',
   lg: 'w-[520px] max-w-[90vw]',
   xl: 'w-[620px] max-w-[92vw]',
+  // For dialogs holding a document rather than a form — a markdown editor
+  // at 620px wraps prose into a column too narrow to read or edit.
+  wide: 'w-[min(1100px,94vw)]',
 };
 
 export interface ModalProps {

From 7384d6d177d4975126e1ab74a2753df997640217 Mon Sep 17 00:00:00 2001
From: Alex Soffronow Pagonidis
 <237136924+alex-clickhouse@users.noreply.github.com>
Date: Wed, 5 Aug 2026 11:28:07 +0000
Subject: [PATCH 3/3] Finish the detail-body extraction and stop shortcuts
 firing under a dialog
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Five review findings on the task modal.

TaskDetailBody said it was shared by the full page and the modal, and it was
not — TaskDetailPage still hand-rolled its own copy of the same editor, so
the claim was false and the two had already drifted: the status-history
button lands on the body only, leaving the full page quietly missing a
shipped feature. The page now renders TaskDetailBody and keeps just the
chrome the modal has no use for, a back button and a heading. That is a
visible change to the full page — the textarea and preview take the body's
metrics, and the meta row, edit/preview toggle and Save move out of the page
header into the body's single row.

Page shortcuts kept firing while a dialog was open. /tasks stays mounted
behind the task modal by design, so its document listener stayed live: `n`
opened a second dialog on top of the first, and `/` moved focus out of an
aria-modal dialog into a search box behind the backdrop, where typing edits
something the user cannot see. Gating on the URL would only cover the task
modal, and the same leak reproduces under the shortcuts dialog with no
background routing at all, so the gate is "is any dialog open" — the modal
stack Modal already keeps, moved to its own module so a page can read it
without turning Modal.tsx into a mixed component/util file.

The shortcuts list rendered ArrowUp for a binding that is all four arrows,
and its file comment still claimed the only handlers were in App.tsx and
ChatPage.tsx.

The dirty guard gets the unit test it warrants now that two surfaces depend
on it, and an honest comment: it is defensive, not a fix for something
reachable today, because a task_updated broadcast carries the tasks row and
that table has no content column.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 web/src/components/ShortcutsModal.tsx         |  18 +-
 .../components/Tasks/TaskDetailBody.test.tsx  |  68 ++++++++
 web/src/components/Tasks/TaskDetailBody.tsx   |   9 +-
 web/src/components/ui/Modal.tsx               |   7 +-
 web/src/components/ui/modalStack.ts           |  21 +++
 web/src/pages/TaskDetailPage.tsx              | 162 +++---------------
 web/src/pages/TasksPage.tsx                   |  14 +-
 7 files changed, 149 insertions(+), 150 deletions(-)
 create mode 100644 web/src/components/Tasks/TaskDetailBody.test.tsx
 create mode 100644 web/src/components/ui/modalStack.ts

diff --git a/web/src/components/ShortcutsModal.tsx b/web/src/components/ShortcutsModal.tsx
index b0d1b4d2..b1f88052 100644
--- a/web/src/components/ShortcutsModal.tsx
+++ b/web/src/components/ShortcutsModal.tsx
@@ -5,6 +5,12 @@ import { Modal } from './ui/Modal';
 interface DisplayShortcut {
   combo: ShortcutCombo;
   description: string;
+  /**
+   * Override the rendered key label. For a binding that is a *set* of keys
+   * rather than one combo — the arrow cluster — formatting a single combo
+   * would document a quarter of it.
+   */
+  label?: string;
 }
 
 interface Section {
@@ -14,7 +20,9 @@ interface Section {
 
 /**
  * Static display of every keyboard binding. The runtime handlers live in
- * App.tsx (global) and ChatPage.tsx (chat-scoped) — keep this list in sync
+ * App.tsx (global), ChatPage.tsx (chat-scoped) and TasksPage.tsx
+ * (tasks-scoped), with Enter/Shift+Enter owned by ChatInput and the board's
+ * Space/arrow bindings by dnd-kit's keyboard sensor — keep this list in sync
  * with those when bindings change.
  */
 const SECTIONS: Section[] = [
@@ -52,7 +60,7 @@ const SECTIONS: Section[] = [
       { combo: { key: 'n' }, description: 'New task' },
       { combo: { key: '/' }, description: 'Focus task search' },
       { combo: { key: 'Space' }, description: 'Pick up / drop a focused card' },
-      { combo: { key: 'ArrowUp' }, description: 'Move a picked-up card (with arrows)' },
+      { combo: { key: 'ArrowUp' }, label: '↑ ↓ ← →', description: 'Move a picked-up card' },
     ],
   },
 ];
@@ -78,7 +86,7 @@ export function ShortcutsModal() {
                   className="flex items-center justify-between gap-4 py-1"
                 >
                   <span className="text-[13px] text-text-secondary">{item.description}</span>
-                  <Kbd combo={item.combo} />
+                  <Kbd combo={item.combo} label={item.label} />
                 </div>
               ))}
             </div>
@@ -89,10 +97,10 @@ export function ShortcutsModal() {
   );
 }
 
-function Kbd({ combo }: { combo: ShortcutCombo }) {
+function Kbd({ combo, label }: { combo: ShortcutCombo; label?: string }) {
   return (
     <kbd className="px-2 py-1 text-[11px] font-mono text-text-secondary bg-surface border border-border-subtle rounded shrink-0 tabular-nums">
-      {formatCombo(combo)}
+      {label ?? formatCombo(combo)}
     </kbd>
   );
 }
diff --git a/web/src/components/Tasks/TaskDetailBody.test.tsx b/web/src/components/Tasks/TaskDetailBody.test.tsx
new file mode 100644
index 00000000..3bc9aa1e
--- /dev/null
+++ b/web/src/components/Tasks/TaskDetailBody.test.tsx
@@ -0,0 +1,68 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+
+import type { Task } from '../../api/client';
+import { TaskDetailBody } from './TaskDetailBody';
+
+vi.mock('../../api/client', () => ({
+  api: { updateTask: vi.fn() },
+}));
+
+/**
+ * The dirty guard is the one piece of behaviour here that a reader cannot
+ * verify by looking: it only shows itself when a re-render arrives while the
+ * textarea holds unsaved text. Now that the full page and the board's modal
+ * both render this component, a regression would silently discard typing in
+ * two places at once.
+ */
+
+function task(content: string): Task & { content: string } {
+  return {
+    id: 't1', title: 'Fix the encoder', status: 'pending', position: 1024,
+    deadline: null, source: 'manual', source_url: null, tags: '',
+    created_at: '2026-08-05T00:00:00Z', updated_at: '2026-08-05T00:00:00Z',
+    content,
+  };
+}
+
+const editor = () => screen.getByPlaceholderText('Task content...');
+
+async function startEditing() {
+  await userEvent.click(screen.getByTitle('Edit'));
+}
+
+describe('TaskDetailBody content sync', () => {
+  it('adopts the task content when nothing has been typed', async () => {
+    const { rerender } = render(<TaskDetailBody task={task('# original')} />);
+    await startEditing();
+    expect(editor()).toHaveValue('# original');
+
+    rerender(<TaskDetailBody task={task('# rewritten elsewhere')} />);
+
+    // Clean editor: the newer content is strictly better than what is shown.
+    expect(editor()).toHaveValue('# rewritten elsewhere');
+  });
+
+  it('keeps unsaved edits when the task content changes underneath', async () => {
+    const { rerender } = render(<TaskDetailBody task={task('# original')} />);
+    await startEditing();
+    await userEvent.type(editor(), ' plus my notes');
+    expect(editor()).toHaveValue('# original plus my notes');
+
+    rerender(<TaskDetailBody task={task('# rewritten elsewhere')} />);
+
+    // The whole point: an incoming update must not throw away typing.
+    expect(editor()).toHaveValue('# original plus my notes');
+  });
+
+  it('offers Save only once something has been typed', async () => {
+    render(<TaskDetailBody task={task('# original')} />);
+    await startEditing();
+    expect(screen.queryByRole('button', { name: /save/i })).not.toBeInTheDocument();
+
+    await userEvent.type(editor(), '!');
+
+    expect(screen.getByRole('button', { name: /save/i })).toBeInTheDocument();
+  });
+});
diff --git a/web/src/components/Tasks/TaskDetailBody.tsx b/web/src/components/Tasks/TaskDetailBody.tsx
index 4fc395d3..dee04e70 100644
--- a/web/src/components/Tasks/TaskDetailBody.tsx
+++ b/web/src/components/Tasks/TaskDetailBody.tsx
@@ -22,8 +22,13 @@ export function TaskDetailBody({ task }: { task: Task }) {
   const [localContent, setLocalContent] = useState('');
   const [dirty, setDirty] = useState(false);
 
-  // Adopt the loaded markdown, but never clobber unsaved edits — a
-  // task_updated broadcast can land mid-typing.
+  // Adopt the loaded markdown, but never clobber unsaved edits.
+  //
+  // Defensive rather than a fix for something reachable today: the only
+  // writers of `content` are the initial fetch and the user's own save,
+  // because a task_updated broadcast carries the `tasks` row and that table
+  // has no content column. The guard is here so that stops being a thing
+  // anyone has to know before adding one.
   useEffect(() => {
     if (task.content != null && !dirty) {
       setLocalContent(task.content);
diff --git a/web/src/components/ui/Modal.tsx b/web/src/components/ui/Modal.tsx
index e5fce332..c224a4d7 100644
--- a/web/src/components/ui/Modal.tsx
+++ b/web/src/components/ui/Modal.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useId, useRef, type ReactNode } from 'react';
 import { createPortal } from 'react-dom';
 import { X } from 'lucide-react';
+import { modalStack } from './modalStack';
 
 /**
  * The app's one dialog primitive.
@@ -29,12 +30,6 @@ import { X } from 'lucide-react';
  * document.
  */
 
-/**
- * Open dialogs, oldest first. Module-level rather than context so a dialog
- * rendered anywhere in the tree participates without a provider.
- */
-const modalStack: string[] = [];
-
 /**
  * Body scroll lock, refcounted so stacked dialogs don't unlock early.
  *
diff --git a/web/src/components/ui/modalStack.ts b/web/src/components/ui/modalStack.ts
new file mode 100644
index 00000000..92c55c70
--- /dev/null
+++ b/web/src/components/ui/modalStack.ts
@@ -0,0 +1,21 @@
+/**
+ * Open dialogs, oldest first. Module-level rather than context so a dialog
+ * rendered anywhere in the tree participates without a provider.
+ *
+ * Its own module rather than an export from Modal.tsx so that reading the
+ * stack from a page doesn't turn that file into a mixed component/util
+ * module — which react-refresh treats as an error.
+ */
+export const modalStack: string[] = [];
+
+/**
+ * Is any dialog currently open?
+ *
+ * Page-level keyboard shortcuts gate on this. A page behind a backdrop stays
+ * mounted and keeps its `document` listener, so without the gate a printable
+ * key like `n` opens a second dialog on top of the first, and `/` pulls focus
+ * out of an `aria-modal` dialog into a box the user can no longer see.
+ */
+export function isModalOpen(): boolean {
+  return modalStack.length > 0;
+}
diff --git a/web/src/pages/TaskDetailPage.tsx b/web/src/pages/TaskDetailPage.tsx
index 512b02bf..2719e8bc 100644
--- a/web/src/pages/TaskDetailPage.tsx
+++ b/web/src/pages/TaskDetailPage.tsx
@@ -1,58 +1,31 @@
-import { useEffect, useState, useCallback, useRef } from 'react';
+import { useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
-import { ArrowLeft, Edit3, Eye, Save, Calendar, ExternalLink } from 'lucide-react';
+import { ArrowLeft } from 'lucide-react';
 import { useTaskStore } from '../stores/taskStore';
 import { useTaskStatusStore } from '../stores/taskStatusStore';
-import { StatusBadge, StatusSelect } from '../components/Tasks/StatusControls';
-import { MarkdownContent } from '../components/Chat/MarkdownContent';
+import { TaskDetailBody } from '../components/Tasks/TaskDetailBody';
 
+/**
+ * The full-page task route. Everything below the heading is `TaskDetailBody`,
+ * the same component the board's modal renders — this page owns only the
+ * chrome the modal doesn't have: a back button and a title.
+ */
 export function TaskDetailPage() {
   const { taskId } = useParams<{ taskId: string }>();
   const navigate = useNavigate();
-  const {
-    selectedTask, detailLoading, saving,
-    loadTask, saveTaskContent, updateStatus, clearSelectedTask,
-  } = useTaskStore();
+  const selectedTask = useTaskStore((s) => s.selectedTask);
+  const detailLoading = useTaskStore((s) => s.detailLoading);
+  const loadTask = useTaskStore((s) => s.loadTask);
+  const clearSelectedTask = useTaskStore((s) => s.clearSelectedTask);
   const loadStatuses = useTaskStatusStore((s) => s.load);
 
-  const [mode, setMode] = useState<'edit' | 'preview'>('preview');
-  const [localContent, setLocalContent] = useState('');
-  const [dirty, setDirty] = useState(false);
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
   useEffect(() => {
     if (taskId) loadTask(taskId);
     loadStatuses();
     return () => clearSelectedTask();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [taskId]);
 
-  // Sync local content when task loads
-  useEffect(() => {
-    if (selectedTask?.content != null) {
-      setLocalContent(selectedTask.content);
-      setDirty(false);
-    }
-  }, [selectedTask?.content]);
-
-  const handleContentChange = useCallback((value: string) => {
-    setLocalContent(value);
-    setDirty(true);
-  }, []);
-
-  const handleSave = useCallback(async () => {
-    if (taskId && dirty) {
-      await saveTaskContent(taskId, localContent);
-      setDirty(false);
-    }
-  }, [taskId, dirty, localContent, saveTaskContent]);
-
-  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
-    if ((e.metaKey || e.ctrlKey) && e.key === 's') {
-      e.preventDefault();
-      handleSave();
-    }
-  }, [handleSave]);
-
   if (detailLoading) {
     return (
       <div className="h-full flex items-center justify-center text-text-faint">
@@ -76,104 +49,21 @@ export function TaskDetailPage() {
   }
 
   return (
-    <div className="h-full flex flex-col">
-      {/* Header */}
-      <div className="border-b border-border-subtle px-6 py-3 bg-bg shrink-0">
-        <div className="flex items-center justify-between mb-2">
-          <div className="flex items-center gap-3 min-w-0">
-            <button
-              onClick={() => navigate('/tasks')}
-              className="p-1.5 text-text-dim hover:text-text-muted hover:bg-surface-raised rounded cursor-pointer shrink-0"
-            >
-              <ArrowLeft size={18} />
-            </button>
-            <h1 className="text-lg font-semibold text-text truncate">{selectedTask.title}</h1>
-          </div>
-
-          <div className="flex items-center gap-2 shrink-0">
-            {/* Edit / Preview toggle */}
-            <div className="flex bg-surface-raised rounded-md border border-border">
-              <button
-                onClick={() => setMode('edit')}
-                className={`px-2.5 py-1.5 text-[12px] rounded-l-md cursor-pointer transition-colors
-                  ${mode === 'edit' ? 'bg-surface-raised text-text' : 'text-text-dim hover:text-text-muted'}`}
-              >
-                <Edit3 size={14} />
-              </button>
-              <button
-                onClick={() => setMode('preview')}
-                className={`px-2.5 py-1.5 text-[12px] rounded-r-md cursor-pointer transition-colors
-                  ${mode === 'preview' ? 'bg-surface-raised text-text' : 'text-text-dim hover:text-text-muted'}`}
-              >
-                <Eye size={14} />
-              </button>
-            </div>
-
-            {/* Save button */}
-            {dirty && (
-              <button
-                onClick={handleSave}
-                disabled={saving}
-                className="flex items-center gap-1.5 px-3 py-1.5 text-[12px] bg-accent hover:bg-accent-hover text-white rounded-md cursor-pointer disabled:opacity-50"
-              >
-                <Save size={12} />
-                {saving ? 'Saving...' : 'Save'}
-              </button>
-            )}
-          </div>
-        </div>
-
-        {/* Meta row */}
-        <div className="flex items-center gap-3 ml-9 text-[12px]">
-          <StatusBadge status={selectedTask.status} />
-          <StatusSelect
-            value={selectedTask.status}
-            onChange={(status) => updateStatus(selectedTask.id, status)}
-            className="text-[12px] px-2 py-1 bg-surface-raised border border-border rounded text-text-muted outline-none cursor-pointer"
-          />
-          {selectedTask.deadline && (
-            <span className="flex items-center gap-1 text-text-dim">
-              <Calendar size={11} /> {selectedTask.deadline}
-            </span>
-          )}
-          {selectedTask.source && (
-            <span className="text-text-faint">from {selectedTask.source}</span>
-          )}
-          {selectedTask.source_url && (
-            <a
-              href={selectedTask.source_url}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="flex items-center gap-1 text-accent hover:underline"
-            >
-              <ExternalLink size={11} /> source
-            </a>
-          )}
-        </div>
+    // min-h-0 so the body's flex-1 can size against this column rather than
+    // overflowing it.
+    <div className="h-full flex flex-col min-h-0">
+      <div className="border-b border-border-subtle px-6 py-3 bg-bg shrink-0 flex items-center gap-3 min-w-0">
+        <button
+          onClick={() => navigate('/tasks')}
+          aria-label="Back to tasks"
+          className="p-1.5 text-text-dim hover:text-text-muted hover:bg-surface-raised rounded cursor-pointer shrink-0"
+        >
+          <ArrowLeft size={18} />
+        </button>
+        <h1 className="text-lg font-semibold text-text truncate">{selectedTask.title}</h1>
       </div>
 
-      {/* Content area */}
-      {mode === 'edit' ? (
-        <textarea
-          ref={textareaRef}
-          value={localContent}
-          onChange={e => handleContentChange(e.target.value)}
-          onKeyDown={handleKeyDown}
-          className="flex-1 p-6 bg-bg-sunken text-[14px] text-text font-mono leading-relaxed outline-none resize-none"
-          spellCheck={false}
-          placeholder="Task content..."
-        />
-      ) : (
-        <div className="flex-1 overflow-y-auto p-6">
-          <div className="max-w-3xl mx-auto">
-            {localContent ? (
-              <MarkdownContent content={localContent} />
-            ) : (
-              <span className="text-text-faint italic">No content</span>
-            )}
-          </div>
-        </div>
-      )}
+      <TaskDetailBody task={selectedTask} />
     </div>
   );
 }
diff --git a/web/src/pages/TasksPage.tsx b/web/src/pages/TasksPage.tsx
index e8dcbd6b..934625d0 100644
--- a/web/src/pages/TasksPage.tsx
+++ b/web/src/pages/TasksPage.tsx
@@ -10,6 +10,7 @@ import { TaskStatusManager } from '../components/Tasks/TaskStatusManager';
 import { TaskBoard } from '../components/Tasks/Board/TaskBoard';
 import { BoardFilterBar } from '../components/Tasks/Board/BoardFilterBar';
 import { useKeyboardShortcuts } from '../hooks/useKeyboardShortcuts';
+import { isModalOpen } from '../components/ui/modalStack';
 import type { ShortcutDef } from '../utils/keyboard';
 
 const SORT_OPTIONS: { value: TaskSort; label: string }[] = [
@@ -78,6 +79,13 @@ export function TasksPage() {
     navigate(`/tasks/${task.id}`, { state: { background: location } });
   }, [navigate, location]);
 
+  // A dialog on top owns the keyboard. This page stays mounted behind one —
+  // always behind the task modal, which is the whole point of the background
+  // location, and behind every other dialog too. Ungated, `n` opens a second
+  // dialog over the first and `/` moves focus out of an aria-modal dialog
+  // into a search box hidden behind the backdrop.
+  const noDialogOpen = useCallback(() => !isModalOpen(), []);
+
   // Page-scoped, like ChatPage's — they only bind while /tasks is mounted.
   // Card-level navigation is dnd-kit's (Tab to a card, Space to pick up,
   // arrows to move), so these cover only what the page itself owns.
@@ -87,6 +95,7 @@ export function TasksPage() {
       combo: { key: 'b' },
       description: 'Board view',
       section: 'tasks',
+      when: noDialogOpen,
       action: () => setViewMode('board'),
     },
     {
@@ -94,6 +103,7 @@ export function TasksPage() {
       combo: { key: 'l' },
       description: 'List view',
       section: 'tasks',
+      when: noDialogOpen,
       action: () => setViewMode('list'),
     },
     {
@@ -101,6 +111,7 @@ export function TasksPage() {
       combo: { key: 'n' },
       description: 'New task',
       section: 'tasks',
+      when: noDialogOpen,
       action: () => setShowCreateDialog(true),
     },
     {
@@ -108,9 +119,10 @@ export function TasksPage() {
       combo: { key: '/' },
       description: 'Focus task search',
       section: 'tasks',
+      when: noDialogOpen,
       action: () => searchRef.current?.focus(),
     },
-  ], [setViewMode, setShowCreateDialog]);
+  ], [setViewMode, setShowCreateDialog, noDialogOpen]);
 
   useKeyboardShortcuts(shortcuts);