Add Review mode calendar retrospective

CLAUDE.md

@@ -41,8 +41,9 @@ A Vue 3 Kanban board whose "database" is one or more plain markdown files. Every
   - `useTaskDisplay.js` — task filtering and display helpers.
   - `useTaskSelection.js` — multi-select set of task ids and click handler (normal click, cmd/ctrl click, shift click).
 - Components (`src/components/`):
-  - `FileTabBar.vue` — tabs, view-mode buttons (Triage/Plan/Focus), undo/redo, History button.
+  - `FileTabBar.vue` — tabs, view-mode buttons (Triage/Plan/Focus/Review), undo/redo, History button. The full-screen modes have no close button of their own; the view-mode buttons are the only way in and out.
   - `KanbanBoard.vue` — renders the five column stacks, owns drag/drop glue, date-picker, archive-confirm modal, context menu, multi-drag handler. Drawer presets per view mode: `triage` (expand TODO/PROJECTS, collapse WIP/DONE) and `plan` (expand SELECTED/WIP, collapse the rest).
+  - `ReviewMode.vue` — full-screen Review retrospective: a month calendar of what was completed, dropped, and is still due, topped by a clickable Jan–Dec bar chart of its calendar year. The chart spans the calendar's width with the stat tiles in the rail-width slot beside it. The rail carries the selected day's detail, an 8-week throughput trend, section ranking, and still-overdue work, each card shrinking with its own internal scroll so no card header falls below the fold. Read-only.
   - `FocusMode.vue` — full-screen Focus execution view. Its product behavior and interaction contract live in `docs/focus-mode-spec.md`; read that spec before changing Focus UX or routing.
   - `KanbanColumn.vue` — single column stack (TODO/PROJECTS/SELECTED/WIP/DONE); tri-state collapse caret; passes multi-drag through.
   - `KanbanSection.vue` — an H2/H3 section inside a column; hosts `vuedraggable`; handles multi-drag stacking (clones `.task-card.selected` into the drag wrapper, hides originals with `.multi-drag-hidden`).
@@ -54,6 +55,7 @@ A Vue 3 Kanban board whose "database" is one or more plain markdown files. Every
 - Utils (`src/utils/`):
   - `TodoMdParser.js` — `parseTodoMdFile` / `renderTodoMdFile`, and `COLUMNSTACK_CATEGORIES` (H1 → column-stack keyword mapping).
   - `focusModeHelpers.js` — pure derivation for Focus mode (`deriveFocusModel`, `findActiveWipSection`, `findQuickAddTarget`).
+  - `reviewModeHelpers.js` — pure derivation for Review mode (`deriveReviewModel`, `deriveCalendarYearBars`, `deriveWeeklyTrend`, `anchorForTask`, `shiftAnchor`).
   - `dateHelpers.js`, `completionDateHelpers.js` — date parsing/formatting.
   - `sectionHelpers.js`, `sortHelpers.js`, `taskTextHelpers.js` — section/task manipulation helpers.
 
@@ -125,7 +127,7 @@ The HistoryPanel uses `GET /api/history` and `GET /api/history/version` to surfa
 - Drag/drop updates are optimistic (UI first, save follows).
 - All parse/render logic lives in `TodoMdParser.js`.
 - Date logic lives in `dateHelpers.js` / `completionDateHelpers.js`.
-- Selected-file persistence is in `localStorage` (`selectedTodoFilePath`); view mode is in `localStorage.viewMode` (`normal` / `triage` / `plan` / `focus`).
+- Selected-file persistence is in `localStorage` (`selectedTodoFilePath`); view mode is in `localStorage.viewMode` (`normal` / `triage` / `plan` / `focus` / `review`).
 - WebSocket client uses a checksum comparison against its own `renderTodoMdFile` output to avoid reload storms on self-initiated saves.
 
 ## Testing Approach

src/App.vue

@@ -41,6 +41,13 @@
         @set-view-mode="setViewMode"
     />
 
+    <ReviewMode
+        v-else-if="viewMode === 'review'"
+        :todo-data="todoData"
+        :theme="resolvedTheme"
+        @set-view-mode="setViewMode"
+    />
+
     <KanbanBoard
         v-else
         :todo-data="todoData"
@@ -57,6 +64,7 @@ import { onMounted, onUnmounted, computed, ref } from 'vue';
 import FileTabBar from './components/FileTabBar.vue';
 import KanbanBoard from './components/KanbanBoard.vue';
 import FocusMode from './components/FocusMode.vue';
+import ReviewMode from './components/ReviewMode.vue';
 import HistoryPanel from './components/HistoryPanel.vue';
 import { useTodoData } from './composables/useTodoData';
 import { useUndoRedo } from './composables/useUndoRedo';
@@ -76,8 +84,9 @@ const {
   registerAfterLoad
 } = useTodoData();
 
-// View mode state - load from localStorage ('normal', 'triage', 'plan', 'focus')
-// 'plan' arranges the board drawers for planning; 'focus' is the full-screen execute-today view
+// View mode state - load from localStorage ('normal', 'triage', 'plan', 'focus', 'review')
+// 'plan' arranges the board drawers for planning; 'focus' is the full-screen
+// execute-today view; 'review' is the full-screen calendar retrospective
 const viewMode = ref(
   localStorage.getItem('viewMode') || 'normal'
 );

src/components/FileTabBar.vue

@@ -154,6 +154,14 @@
         >
           Focus
         </button>
+        <button
+            class="view-mode-btn review-mode-btn"
+            :class="{ active: viewMode === 'review' }"
+            @click="$emit('set-view-mode', 'review')"
+            title="Review Mode: Week or month calendar of what was completed, dropped, and still due, over a year of monthly bars"
+        >
+          Review
+        </button>
       </div>
     </div>
     <Teleport to="body">

src/components/FocusMode.vue

@@ -17,7 +17,6 @@
       </div>
       <button v-if="quickAddTarget" class="focus-quick-add-btn" :class="{ active: showQuickAdd }"
               title="Add something for this week" @click="toggleQuickAdd">+ Add</button>
-      <button class="focus-exit-btn" title="Back to board" @click="$emit('set-view-mode', 'normal')">✕</button>
       <div v-if="showQuickAdd && quickAddTarget" class="focus-quick-add-popover" @click.stop>
         <div class="focus-quick-add-row">
           <input
@@ -1942,25 +1941,6 @@ const toggleQuickAdd = async () => {
   background: #4caf50;
 }
 
-.focus-exit-btn {
-  background: transparent;
-  border: 1px solid #333c49;
-  border-radius: 6px;
-  color: #9aa4b2;
-  width: 30px;
-  height: 30px;
-  cursor: pointer;
-  font-size: 14px;
-  margin-bottom: 2px;
-  transition: all 0.2s ease;
-}
-
-.focus-exit-btn:hover {
-  color: #f4f6f8;
-  border-color: #556070;
-  background: #262c36;
-}
-
 /* ========================= */
 /* Stage + panels            */
 /* ========================= */
@@ -3404,17 +3384,6 @@ button.focus-week-clock:hover::after {
   background: #e0e0e0;
 }
 
-.theme-light .focus-exit-btn {
-  border-color: #ccc;
-  color: #666;
-}
-
-.theme-light .focus-exit-btn:hover {
-  color: #333;
-  border-color: #aaa;
-  background: #e8e8e8;
-}
-
 .theme-light .focus-quick-add-btn {
   color: #666;
   border-color: #ccc;