Add notes preview/edit toggle to group session dialog

- Notes now default to a rendered markdown preview instead of the raw
  editor, reducing visual noise when scanning group context.
- A pencil/eye icon button next to the label flips between the two modes.
- Preview panel is styled with the group tint and a distinct border so it
  reads as group-level notes rather than another to-do row.
- Todo row edit toggle also swaps to an Eye icon while editing for
  consistent affordance.

components/board/group-session-dialog.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useCallback, useEffect, useRef, useState } from "react";
-import { ChevronDown, ChevronRight, Pencil, Plus, Sparkles, Trash2, X, XIcon } from "lucide-react";
+import { ChevronDown, ChevronRight, Eye, Pencil, Plus, Sparkles, Trash2, X, XIcon } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
@@ -113,6 +113,10 @@ export function GroupSessionDialog({
 
   const [noteDraft, setNoteDraft] = useState(group.noteContent);
   const [todoDrafts, setTodoDrafts] = useState<TodoDraft[]>(() => toDrafts(group.todos));
+  // Notes default to a rendered markdown preview; the pencil by the label
+  // flips into the full editor (and back). Kept out of the todo row state
+  // so it never collides with per-row edit toggles.
+  const [notesEditing, setNotesEditing] = useState(false);
   const [aiOpen, setAiOpen] = useState(false);
   const [todoAiOpen, setTodoAiOpen] = useState(false);
   const [savingAll, setSavingAll] = useState(false);
@@ -133,6 +137,7 @@ export function GroupSessionDialog({
     if (next) {
       setNoteDraft(group.noteContent);
       setTodoDrafts(toDrafts(group.todos));
+      setNotesEditing(false);
     } else {
       // Fire-and-forget: close immediately, flush any pending autosaves in
       // the background. board-context's mutators already toast on failure,
@@ -247,13 +252,45 @@ export function GroupSessionDialog({
 
           <div className="flex-1 space-y-6 overflow-y-auto overscroll-contain p-4">
             <div className="space-y-2">
+              <div className="flex items-center gap-2">
                 <Label className="text-sm font-medium">Notes</Label>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon-sm"
+                  onClick={() => setNotesEditing((v) => !v)}
+                  aria-label={notesEditing ? "Preview notes" : "Edit notes"}
+                >
+                  {notesEditing ? <Eye className="size-4" /> : <Pencil className="size-4" />}
+                </Button>
+              </div>
+              {notesEditing ? (
                 <MDEditor
                   value={noteDraft}
                   onChange={(v) => setNoteDraft(v ?? "")}
                   height={280}
                   preview="edit"
                 />
+              ) : (
+                // Rendered as a distinct group-note panel -- full group tint,
+                // stronger rule, no indent -- so it reads as notes for the
+                // whole group rather than another to-do row.
+                <div
+                  className="max-h-72 overflow-y-auto rounded-lg border p-4"
+                  style={{
+                    borderColor: ruleColor,
+                    backgroundColor: panelBackground,
+                  }}
+                >
+                  {noteDraft.trim() ? (
+                    <MarkdownPreview source={noteDraft} />
+                  ) : (
+                    <p className="text-sm text-muted-foreground">
+                      No notes yet — use the pencil above to add some.
+                    </p>
+                  )}
+                </div>
+              )}
             </div>
 
             <div className="space-y-2">
@@ -556,7 +593,7 @@ function SessionTodoRow({
           onClick={() => setEditingDetails((v) => !v)}
           aria-label={`${editingDetails ? "Preview" : "Edit"} details for "${draft.title || "new to-do"}"`}
         >
-          <Pencil className="size-4" />
+          {editingDetails ? <Eye className="size-4" /> : <Pencil className="size-4" />}
         </Button>
         {onCollapse && (
           <Button