feat: add two-panel card detail modal with markdown, checklist, labels, dates, attachments

- CardDetailModal: two-panel layout (60/40) with inline title editing
- MarkdownEditor: edit/preview toggle with react-markdown + remark-gfm
- ChecklistSection: add/toggle/edit/delete items with progress counter
- LabelPicker: toggle labels + create new labels with color swatches
- DueDatePicker: date input with relative time and overdue styling
- AttachmentSection: list with remove, placeholder add button
- Wired into BoardView via selectedCardId state

src/components/board/BoardView.tsx

@@ -23,6 +23,7 @@ import {
   CardOverlay,
   ColumnOverlay,
 } from "@/components/board/DragOverlayContent";
+import { CardDetailModal } from "@/components/card-detail/CardDetailModal";
 import type { Board } from "@/types/board";
 
 function findColumnByCardId(board: Board, cardId: string) {
@@ -35,6 +36,7 @@ export function BoardView() {
   const moveCard = useBoardStore((s) => s.moveCard);
   const moveColumn = useBoardStore((s) => s.moveColumn);
 
+  const [selectedCardId, setSelectedCardId] = useState<string | null>(null);
   const [addingColumn, setAddingColumn] = useState(false);
   const [newColumnTitle, setNewColumnTitle] = useState("");
   const inputRef = useRef<HTMLInputElement>(null);
@@ -233,6 +235,7 @@ export function BoardView() {
   const columnIds = board.columns.map((c) => c.id);
 
   return (
+    <>
     <DndContext
       sensors={sensors}
       collisionDetection={closestCorners}
@@ -246,7 +249,11 @@ export function BoardView() {
       >
         <div className="flex h-full gap-6 overflow-x-auto p-6">
           {board.columns.map((column) => (
-            <KanbanColumn key={column.id} column={column} />
+            <KanbanColumn
+              key={column.id}
+              column={column}
+              onCardClick={setSelectedCardId}
+            />
           ))}
 
           {/* Add column button / inline input */}
@@ -307,5 +314,11 @@ export function BoardView() {
         ) : null}
       </DragOverlay>
     </DndContext>
+
+    <CardDetailModal
+      cardId={selectedCardId}
+      onClose={() => setSelectedCardId(null)}
+    />
+    </>
   );
 }

src/components/board/CardThumbnail.tsx

@@ -9,9 +9,10 @@ interface CardThumbnailProps {
   card: Card;
   boardLabels: Label[];
   columnId: string;
+  onCardClick?: (cardId: string) => void;
 }
 
-export function CardThumbnail({ card, boardLabels, columnId }: CardThumbnailProps) {
+export function CardThumbnail({ card, boardLabels, columnId, onCardClick }: CardThumbnailProps) {
   const {
     attributes,
     listeners,
@@ -35,8 +36,7 @@ export function CardThumbnail({ card, boardLabels, columnId }: CardThumbnailProp
   const overdue = dueDate != null && isPast(dueDate) && !isToday(dueDate);
 
   function handleClick() {
-    // Card detail modal will be wired in Task 11
+    onCardClick?.(card.id);
-    console.log("Card clicked:", card.id);
   }
 
   return (

src/components/board/KanbanColumn.tsx

@@ -23,9 +23,10 @@ const WIDTH_MAP = {
 
 interface KanbanColumnProps {
   column: Column;
+  onCardClick?: (cardId: string) => void;
 }
 
-export function KanbanColumn({ column }: KanbanColumnProps) {
+export function KanbanColumn({ column, onCardClick }: KanbanColumnProps) {
   const [showAddCard, setShowAddCard] = useState(false);
   const board = useBoardStore((s) => s.board);
 
@@ -85,6 +86,7 @@ export function KanbanColumn({ column }: KanbanColumnProps) {
                   card={card}
                   boardLabels={board?.labels ?? []}
                   columnId={column.id}
+                  onCardClick={onCardClick}
                 />
               );
             })}

src/components/card-detail/AttachmentSection.tsx

@@ -0,0 +1,69 @@
+import { FileIcon, X, Plus } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useBoardStore } from "@/stores/board-store";
+import type { Attachment } from "@/types/board";
+
+interface AttachmentSectionProps {
+  cardId: string;
+  attachments: Attachment[];
+  attachmentMode: "link" | "copy";
+}
+
+export function AttachmentSection({
+  cardId,
+  attachments,
+}: AttachmentSectionProps) {
+  const removeAttachment = useBoardStore((s) => s.removeAttachment);
+
+  function handleAdd() {
+    // Placeholder: Tauri file dialog will be wired in a later task
+    console.log("Add attachment (file dialog not yet wired)");
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <h4 className="font-mono text-xs uppercase tracking-widest text-pylon-text-secondary">
+          Attachments
+        </h4>
+        <Button
+          variant="ghost"
+          size="icon-xs"
+          onClick={handleAdd}
+          className="text-pylon-text-secondary hover:text-pylon-text"
+        >
+          <Plus className="size-3.5" />
+        </Button>
+      </div>
+
+      {/* Attachment list */}
+      {attachments.length > 0 ? (
+        <div className="flex flex-col gap-1">
+          {attachments.map((att) => (
+            <div
+              key={att.id}
+              className="group/att flex items-center gap-2 rounded px-1 py-1 hover:bg-pylon-column/60"
+            >
+              <FileIcon className="size-3.5 shrink-0 text-pylon-text-secondary" />
+              <span className="flex-1 truncate text-sm text-pylon-text">
+                {att.name}
+              </span>
+              <button
+                onClick={() => removeAttachment(cardId, att.id)}
+                className="shrink-0 rounded p-0.5 text-pylon-text-secondary opacity-0 transition-opacity hover:bg-pylon-danger/10 hover:text-pylon-danger group-hover/att:opacity-100"
+                aria-label="Remove attachment"
+              >
+                <X className="size-3" />
+              </button>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <p className="text-xs italic text-pylon-text-secondary/60">
+          No attachments
+        </p>
+      )}
+    </div>
+  );
+}

src/components/card-detail/CardDetailModal.tsx

@@ -0,0 +1,162 @@
+import { useState, useEffect, useRef } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { Separator } from "@/components/ui/separator";
+import { useBoardStore } from "@/stores/board-store";
+import { MarkdownEditor } from "@/components/card-detail/MarkdownEditor";
+import { ChecklistSection } from "@/components/card-detail/ChecklistSection";
+import { LabelPicker } from "@/components/card-detail/LabelPicker";
+import { DueDatePicker } from "@/components/card-detail/DueDatePicker";
+import { AttachmentSection } from "@/components/card-detail/AttachmentSection";
+
+interface CardDetailModalProps {
+  cardId: string | null;
+  onClose: () => void;
+}
+
+export function CardDetailModal({ cardId, onClose }: CardDetailModalProps) {
+  const card = useBoardStore((s) =>
+    cardId ? s.board?.cards[cardId] ?? null : null
+  );
+  const boardLabels = useBoardStore((s) => s.board?.labels ?? []);
+  const attachmentMode = useBoardStore(
+    (s) => s.board?.settings.attachmentMode ?? "link"
+  );
+  const updateCard = useBoardStore((s) => s.updateCard);
+
+  const open = cardId != null && card != null;
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
+      <DialogContent className="max-w-3xl gap-0 overflow-hidden p-0">
+        {card && cardId && (
+          <>
+            {/* Hidden accessible description */}
+            <DialogDescription className="sr-only">
+              Card detail editor
+            </DialogDescription>
+
+            <div className="flex max-h-[80vh] flex-col sm:flex-row">
+              {/* Left panel: Title + Markdown (60%) */}
+              <div className="flex flex-1 flex-col overflow-y-auto p-6 sm:w-[60%]">
+                <DialogHeader className="mb-4">
+                  <InlineTitle
+                    cardId={cardId}
+                    title={card.title}
+                    updateCard={updateCard}
+                  />
+                </DialogHeader>
+
+                <MarkdownEditor cardId={cardId} value={card.description} />
+              </div>
+
+              {/* Vertical separator */}
+              <Separator orientation="vertical" className="hidden sm:block" />
+
+              {/* Right sidebar (40%) */}
+              <div className="flex flex-col gap-5 overflow-y-auto border-t border-border p-5 sm:w-[40%] sm:border-t-0">
+                <LabelPicker
+                  cardId={cardId}
+                  cardLabelIds={card.labels}
+                  boardLabels={boardLabels}
+                />
+
+                <Separator />
+
+                <DueDatePicker cardId={cardId} dueDate={card.dueDate} />
+
+                <Separator />
+
+                <ChecklistSection
+                  cardId={cardId}
+                  checklist={card.checklist}
+                />
+
+                <Separator />
+
+                <AttachmentSection
+                  cardId={cardId}
+                  attachments={card.attachments}
+                  attachmentMode={attachmentMode}
+                />
+              </div>
+            </div>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+/* ---------- Inline editable title ---------- */
+
+interface InlineTitleProps {
+  cardId: string;
+  title: string;
+  updateCard: (cardId: string, updates: { title: string }) => void;
+}
+
+function InlineTitle({ cardId, title, updateCard }: InlineTitleProps) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(title);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Sync when title changes externally
+  useEffect(() => {
+    setDraft(title);
+  }, [title]);
+
+  useEffect(() => {
+    if (editing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [editing]);
+
+  function handleSave() {
+    const trimmed = draft.trim();
+    if (trimmed && trimmed !== title) {
+      updateCard(cardId, { title: trimmed });
+    } else {
+      setDraft(title);
+    }
+    setEditing(false);
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleSave();
+    } else if (e.key === "Escape") {
+      setDraft(title);
+      setEditing(false);
+    }
+  }
+
+  if (editing) {
+    return (
+      <input
+        ref={inputRef}
+        value={draft}
+        onChange={(e) => setDraft(e.target.value)}
+        onBlur={handleSave}
+        onKeyDown={handleKeyDown}
+        className="font-heading text-xl text-pylon-text bg-transparent outline-none border-b border-pylon-accent pb-0.5"
+      />
+    );
+  }
+
+  return (
+    <DialogTitle
+      onClick={() => setEditing(true)}
+      className="cursor-pointer font-heading text-xl text-pylon-text transition-colors hover:text-pylon-accent"
+    >
+      {title}
+    </DialogTitle>
+  );
+}

src/components/card-detail/ChecklistSection.tsx

@@ -0,0 +1,156 @@
+import { useState, useRef } from "react";
+import { X } from "lucide-react";
+import { useBoardStore } from "@/stores/board-store";
+import type { ChecklistItem } from "@/types/board";
+
+interface ChecklistSectionProps {
+  cardId: string;
+  checklist: ChecklistItem[];
+}
+
+export function ChecklistSection({ cardId, checklist }: ChecklistSectionProps) {
+  const toggleChecklistItem = useBoardStore((s) => s.toggleChecklistItem);
+  const updateChecklistItem = useBoardStore((s) => s.updateChecklistItem);
+  const deleteChecklistItem = useBoardStore((s) => s.deleteChecklistItem);
+  const addChecklistItem = useBoardStore((s) => s.addChecklistItem);
+
+  const [newItemText, setNewItemText] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const checked = checklist.filter((item) => item.checked).length;
+
+  function handleAddItem() {
+    const trimmed = newItemText.trim();
+    if (trimmed) {
+      addChecklistItem(cardId, trimmed);
+      setNewItemText("");
+      inputRef.current?.focus();
+    }
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleAddItem();
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <h4 className="font-mono text-xs uppercase tracking-widest text-pylon-text-secondary">
+          Checklist
+        </h4>
+        {checklist.length > 0 && (
+          <span className="font-mono text-xs text-pylon-text-secondary">
+            {checked}/{checklist.length}
+          </span>
+        )}
+      </div>
+
+      {/* Items */}
+      <div className="flex flex-col gap-1">
+        {checklist.map((item) => (
+          <ChecklistRow
+            key={item.id}
+            cardId={cardId}
+            item={item}
+            onToggle={() => toggleChecklistItem(cardId, item.id)}
+            onUpdate={(text) => updateChecklistItem(cardId, item.id, text)}
+            onDelete={() => deleteChecklistItem(cardId, item.id)}
+          />
+        ))}
+      </div>
+
+      {/* Add item */}
+      <div className="flex gap-2">
+        <input
+          ref={inputRef}
+          value={newItemText}
+          onChange={(e) => setNewItemText(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder="Add item..."
+          className="h-7 flex-1 rounded-md bg-pylon-column px-2 text-sm text-pylon-text outline-none placeholder:text-pylon-text-secondary/60 focus:ring-1 focus:ring-pylon-accent"
+        />
+      </div>
+    </div>
+  );
+}
+
+interface ChecklistRowProps {
+  cardId: string;
+  item: ChecklistItem;
+  onToggle: () => void;
+  onUpdate: (text: string) => void;
+  onDelete: () => void;
+}
+
+function ChecklistRow({ item, onToggle, onUpdate, onDelete }: ChecklistRowProps) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(item.text);
+
+  function handleSave() {
+    const trimmed = draft.trim();
+    if (trimmed && trimmed !== item.text) {
+      onUpdate(trimmed);
+    } else {
+      setDraft(item.text);
+    }
+    setEditing(false);
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleSave();
+    } else if (e.key === "Escape") {
+      setDraft(item.text);
+      setEditing(false);
+    }
+  }
+
+  return (
+    <div className="group/item flex items-center gap-2 rounded px-1 py-0.5 hover:bg-pylon-column/60">
+      <input
+        type="checkbox"
+        checked={item.checked}
+        onChange={onToggle}
+        className="size-3.5 shrink-0 cursor-pointer accent-pylon-accent"
+      />
+
+      {editing ? (
+        <input
+          autoFocus
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          onBlur={handleSave}
+          onKeyDown={handleKeyDown}
+          className="h-6 flex-1 rounded bg-pylon-surface px-1 text-sm text-pylon-text outline-none focus:ring-1 focus:ring-pylon-accent"
+        />
+      ) : (
+        <span
+          onClick={() => {
+            setDraft(item.text);
+            setEditing(true);
+          }}
+          className={`flex-1 cursor-pointer text-sm ${
+            item.checked
+              ? "line-through text-pylon-text-secondary"
+              : "text-pylon-text"
+          }`}
+        >
+          {item.text}
+        </span>
+      )}
+
+      <button
+        onClick={onDelete}
+        className="shrink-0 rounded p-0.5 text-pylon-text-secondary opacity-0 transition-opacity hover:bg-pylon-danger/10 hover:text-pylon-danger group-hover/item:opacity-100"
+        aria-label="Delete item"
+      >
+        <X className="size-3" />
+      </button>
+    </div>
+  );
+}

src/components/card-detail/DueDatePicker.tsx

@@ -0,0 +1,82 @@
+import { format, formatDistanceToNow, isPast, isToday } from "date-fns";
+import { Button } from "@/components/ui/button";
+import { useBoardStore } from "@/stores/board-store";
+
+interface DueDatePickerProps {
+  cardId: string;
+  dueDate: string | null;
+}
+
+export function DueDatePicker({ cardId, dueDate }: DueDatePickerProps) {
+  const updateCard = useBoardStore((s) => s.updateCard);
+
+  const dateObj = dueDate ? new Date(dueDate) : null;
+  const overdue = dateObj != null && isPast(dateObj) && !isToday(dateObj);
+
+  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const val = e.target.value;
+    updateCard(cardId, { dueDate: val || null });
+  }
+
+  function handleClear() {
+    updateCard(cardId, { dueDate: null });
+  }
+
+  // Format the date value for the HTML date input (YYYY-MM-DD)
+  const inputValue = dateObj
+    ? format(dateObj, "yyyy-MM-dd")
+    : "";
+
+  return (
+    <div className="flex flex-col gap-2">
+      {/* Header */}
+      <h4 className="font-mono text-xs uppercase tracking-widest text-pylon-text-secondary">
+        Due Date
+      </h4>
+
+      {/* Current date display */}
+      {dateObj && (
+        <div className="flex items-center gap-2">
+          <span
+            className={`text-sm font-medium ${
+              overdue ? "text-pylon-danger" : "text-pylon-text"
+            }`}
+          >
+            {format(dateObj, "MMM d, yyyy")}
+          </span>
+          <span
+            className={`text-xs ${
+              overdue ? "text-pylon-danger" : "text-pylon-text-secondary"
+            }`}
+          >
+            {overdue
+              ? `overdue by ${formatDistanceToNow(dateObj)}`
+              : isToday(dateObj)
+                ? "today"
+                : `in ${formatDistanceToNow(dateObj)}`}
+          </span>
+        </div>
+      )}
+
+      {/* Date input + clear */}
+      <div className="flex items-center gap-2">
+        <input
+          type="date"
+          value={inputValue}
+          onChange={handleChange}
+          className="h-7 rounded-md border border-pylon-text-secondary/20 bg-pylon-column px-2 text-xs text-pylon-text outline-none focus:border-pylon-accent focus:ring-1 focus:ring-pylon-accent"
+        />
+        {dueDate && (
+          <Button
+            variant="ghost"
+            size="xs"
+            onClick={handleClear}
+            className="text-pylon-text-secondary hover:text-pylon-danger"
+          >
+            Clear
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/card-detail/LabelPicker.tsx

@@ -0,0 +1,186 @@
+import { useState } from "react";
+import { Plus, Check } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { useBoardStore } from "@/stores/board-store";
+import type { Label } from "@/types/board";
+
+interface LabelPickerProps {
+  cardId: string;
+  cardLabelIds: string[];
+  boardLabels: Label[];
+}
+
+const COLOR_SWATCHES = [
+  "#ef4444", // red
+  "#f97316", // orange
+  "#eab308", // yellow
+  "#22c55e", // green
+  "#06b6d4", // cyan
+  "#3b82f6", // blue
+  "#8b5cf6", // violet
+  "#ec4899", // pink
+];
+
+export function LabelPicker({
+  cardId,
+  cardLabelIds,
+  boardLabels,
+}: LabelPickerProps) {
+  const toggleCardLabel = useBoardStore((s) => s.toggleCardLabel);
+  const addLabel = useBoardStore((s) => s.addLabel);
+
+  const [newLabelName, setNewLabelName] = useState("");
+  const [newLabelColor, setNewLabelColor] = useState(COLOR_SWATCHES[0]);
+  const [showCreate, setShowCreate] = useState(false);
+
+  const currentLabels = boardLabels.filter((l) => cardLabelIds.includes(l.id));
+
+  function handleCreateLabel() {
+    const trimmed = newLabelName.trim();
+    if (trimmed) {
+      addLabel(trimmed, newLabelColor);
+      setNewLabelName("");
+      setShowCreate(false);
+    }
+  }
+
+  function handleCreateKeyDown(e: React.KeyboardEvent) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleCreateLabel();
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <h4 className="font-mono text-xs uppercase tracking-widest text-pylon-text-secondary">
+          Labels
+        </h4>
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon-xs"
+              className="text-pylon-text-secondary hover:text-pylon-text"
+            >
+              <Plus className="size-3.5" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent align="end" className="w-64 bg-pylon-surface p-3">
+            <div className="flex flex-col gap-2">
+              <p className="font-mono text-xs uppercase tracking-widest text-pylon-text-secondary">
+                Toggle labels
+              </p>
+
+              {/* Existing labels */}
+              {boardLabels.length > 0 && (
+                <div className="flex max-h-40 flex-col gap-1 overflow-y-auto">
+                  {boardLabels.map((label) => {
+                    const isSelected = cardLabelIds.includes(label.id);
+                    return (
+                      <button
+                        key={label.id}
+                        onClick={() => toggleCardLabel(cardId, label.id)}
+                        className="flex items-center gap-2 rounded px-2 py-1 text-left text-sm transition-colors hover:bg-pylon-column"
+                      >
+                        <span
+                          className="size-3 shrink-0 rounded-full"
+                          style={{ backgroundColor: label.color }}
+                        />
+                        <span className="flex-1 truncate text-pylon-text">
+                          {label.name}
+                        </span>
+                        {isSelected && (
+                          <Check className="size-3.5 shrink-0 text-pylon-accent" />
+                        )}
+                      </button>
+                    );
+                  })}
+                </div>
+              )}
+
+              {/* Create new label */}
+              {showCreate ? (
+                <div className="flex flex-col gap-2 border-t border-pylon-text-secondary/20 pt-2">
+                  <input
+                    autoFocus
+                    value={newLabelName}
+                    onChange={(e) => setNewLabelName(e.target.value)}
+                    onKeyDown={handleCreateKeyDown}
+                    placeholder="Label name..."
+                    className="h-7 rounded-md bg-pylon-column px-2 text-sm text-pylon-text outline-none placeholder:text-pylon-text-secondary/60 focus:ring-1 focus:ring-pylon-accent"
+                  />
+                  <div className="flex flex-wrap gap-1.5">
+                    {COLOR_SWATCHES.map((color) => (
+                      <button
+                        key={color}
+                        onClick={() => setNewLabelColor(color)}
+                        className="size-5 rounded-full transition-transform hover:scale-110"
+                        style={{
+                          backgroundColor: color,
+                          outline:
+                            newLabelColor === color
+                              ? "2px solid var(--pylon-accent)"
+                              : "none",
+                          outlineOffset: "1px",
+                        }}
+                      />
+                    ))}
+                  </div>
+                  <div className="flex gap-1">
+                    <Button size="xs" onClick={handleCreateLabel}>
+                      Add
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="xs"
+                      onClick={() => {
+                        setShowCreate(false);
+                        setNewLabelName("");
+                      }}
+                    >
+                      Cancel
+                    </Button>
+                  </div>
+                </div>
+              ) : (
+                <button
+                  onClick={() => setShowCreate(true)}
+                  className="border-t border-pylon-text-secondary/20 pt-2 text-left text-xs text-pylon-text-secondary transition-colors hover:text-pylon-text"
+                >
+                  + Create label
+                </button>
+              )}
+            </div>
+          </PopoverContent>
+        </Popover>
+      </div>
+
+      {/* Current labels display */}
+      {currentLabels.length > 0 ? (
+        <div className="flex flex-wrap gap-1.5">
+          {currentLabels.map((label) => (
+            <span
+              key={label.id}
+              className="inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium text-white"
+              style={{ backgroundColor: label.color }}
+            >
+              {label.name}
+            </span>
+          ))}
+        </div>
+      ) : (
+        <p className="text-xs italic text-pylon-text-secondary/60">
+          No labels
+        </p>
+      )}
+    </div>
+  );
+}

src/components/card-detail/MarkdownEditor.tsx

@@ -0,0 +1,121 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { Button } from "@/components/ui/button";
+import { useBoardStore } from "@/stores/board-store";
+
+interface MarkdownEditorProps {
+  cardId: string;
+  value: string;
+}
+
+export function MarkdownEditor({ cardId, value }: MarkdownEditorProps) {
+  const [mode, setMode] = useState<"edit" | "preview">("preview");
+  const [draft, setDraft] = useState(value);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const updateCard = useBoardStore((s) => s.updateCard);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Sync draft when value changes externally (e.g. undo)
+  useEffect(() => {
+    setDraft(value);
+  }, [value]);
+
+  // Auto-focus textarea when switching to edit mode
+  useEffect(() => {
+    if (mode === "edit" && textareaRef.current) {
+      textareaRef.current.focus();
+    }
+  }, [mode]);
+
+  const save = useCallback(
+    (text: string) => {
+      if (text !== value) {
+        updateCard(cardId, { description: text });
+      }
+    },
+    [cardId, value, updateCard]
+  );
+
+  function handleChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
+    const text = e.target.value;
+    setDraft(text);
+
+    // Debounced auto-save
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => {
+      save(text);
+    }, 300);
+  }
+
+  function handleBlur() {
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+      debounceRef.current = null;
+    }
+    save(draft);
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      {/* Mode toggle */}
+      <div className="flex gap-1">
+        <Button
+          variant={mode === "edit" ? "secondary" : "ghost"}
+          size="xs"
+          onClick={() => setMode("edit")}
+          className="font-mono text-xs"
+        >
+          Edit
+        </Button>
+        <Button
+          variant={mode === "preview" ? "secondary" : "ghost"}
+          size="xs"
+          onClick={() => {
+            // Save before switching to preview
+            if (mode === "edit") {
+              if (debounceRef.current) {
+                clearTimeout(debounceRef.current);
+                debounceRef.current = null;
+              }
+              save(draft);
+            }
+            setMode("preview");
+          }}
+          className="font-mono text-xs"
+        >
+          Preview
+        </Button>
+      </div>
+
+      {/* Editor / Preview */}
+      {mode === "edit" ? (
+        <textarea
+          ref={textareaRef}
+          value={draft}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          placeholder="Add a description... (Markdown supported)"
+          className="min-h-[200px] w-full resize-y rounded-md border border-pylon-text-secondary/20 bg-pylon-surface px-3 py-2 text-sm text-pylon-text outline-none placeholder:text-pylon-text-secondary/60 focus:border-pylon-accent focus:ring-1 focus:ring-pylon-accent"
+        />
+      ) : (
+        <div
+          className="min-h-[200px] cursor-pointer rounded-md border border-transparent px-1 py-1 transition-colors hover:border-pylon-text-secondary/20"
+          onClick={() => setMode("edit")}
+        >
+          {draft ? (
+            <div className="prose prose-sm max-w-none text-pylon-text prose-headings:text-pylon-text prose-p:text-pylon-text prose-strong:text-pylon-text prose-a:text-pylon-accent prose-code:rounded prose-code:bg-pylon-column prose-code:px-1 prose-code:py-0.5 prose-code:text-pylon-text prose-pre:bg-pylon-column prose-pre:text-pylon-text">
+              <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                {draft}
+              </ReactMarkdown>
+            </div>
+          ) : (
+            <p className="text-sm italic text-pylon-text-secondary/60">
+              Click to add a description...
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}