feat: Phase 3 - Habits + Projects CRUD API, frontend, completions, sections

Habits REST API:
- GET/POST /api/domains/[domainId]/habits (list with filters, create)
- GET/PATCH/DELETE /api/domains/[domainId]/habits/[id] (detail, update, soft delete)
- POST /api/domains/[domainId]/habits/[id]/complete (completion + streak calc)
- GET /api/domains/[domainId]/habits/[id]/completions (list with date range)
- POST/DELETE /api/domains/[domainId]/habits/[id]/tags

Projects REST API:
- GET/POST /api/domains/[domainId]/projects (list with task counts, create)
- GET/PATCH/DELETE /api/domains/[domainId]/projects/[id] (detail with sections/tasks, update, soft delete)

Sections REST API:
- GET/POST /api/domains/[domainId]/projects/[projectId]/sections (list, create)
- GET/PATCH/DELETE /api/domains/[domainId]/projects/[projectId]/sections/[id]

Frontend:
- Habits page: checklist view, difficulty badges, streak display, filter
- Habit create dialog: name, description, frequency, difficulty, goal, unit, reminder, mood toggle
- Habit completion dialog: value, mood (1-5 emoji), notes
- Calendar heatmap: 365-day grid, color by value, hover tooltip
- Projects page: grid of cards with progress bars, status badges, tags
- Project detail page: sections board, drag tasks between sections
- Project create dialog: name, description, status, color picker, target date
- Section dialog: name, kind (section/milestone), status, target date

Keyboard shortcuts: c h (new habit), c p (new project), c s (new section)

All write routes follow AGENTS.md contract (Drizzle + recordActivity + pg_notify).
Build, typecheck, and 15 new tests pass.

apps/web/components/habits/habit-completion-dialog.tsx

@@ -1,14 +1,15 @@
 'use client';
 
 import { useState } from 'react';
+import { Button } from '@/components/ui/button';
 import {
   Dialog,
   DialogContent,
+  DialogDescription,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
-  DialogDescription,
 } from '@/components/ui/dialog';
-import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
@@ -16,111 +17,99 @@ import { Textarea } from '@/components/ui/textarea';
 interface Habit {
   id: string;
   name: string;
+  unit: string | null;
+  moodTracking: boolean;
 }
 
 interface HabitCompletionDialogProps {
-  habit: Habit;
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  onSubmit: (data: { mood?: number; value?: number; notes?: string }) => void;
+  habit: Habit;
+  onComplete: (value: number, mood?: number, notes?: string) => void;
 }
 
-const moods = [
-  { value: 5, label: 'Great' },
-  { value: 4, label: 'Good' },
-  { value: 3, label: 'Okay' },
-  { value: 2, label: 'Meh' },
-  { value: 1, label: 'Bad' },
+const moodEmojis = [
+  { value: 1, emoji: '😞', label: 'Bad' },
+  { value: 2, emoji: '😐', label: 'Okay' },
+  { value: 3, emoji: '🙂', label: 'Good' },
+  { value: 4, emoji: '😊', label: 'Great' },
+  { value: 5, emoji: '🤩', label: 'Amazing' },
 ];
 
 export function HabitCompletionDialog({
-  habit,
   open,
   onOpenChange,
-  onSubmit,
+  habit,
+  onComplete,
 }: HabitCompletionDialogProps) {
-  const [mood, setMood] = useState<number | undefined>();
-  const [quantity, setQuantity] = useState<number | undefined>();
+  const [value, setValue] = useState('1');
+  const [mood, setMood] = useState<number | null>(null);
   const [notes, setNotes] = useState('');
 
-  function handleSubmit() {
-    onSubmit({
-      mood,
-      value: quantity,
-      notes: notes || undefined,
-    });
-    setMood(undefined);
-    setQuantity(undefined);
-    setNotes('');
-  }
-
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[425px]">
+      <DialogContent className="sm:max-w-[400px]">
         <DialogHeader>
-          <DialogTitle>Log {habit.name}</DialogTitle>
-          <DialogDescription>
-            How did it go? (optional — you can skip and just log completion)
-          </DialogDescription>
+          <DialogTitle>Log &quot;{habit.name}&quot;</DialogTitle>
+          <DialogDescription>Record your progress for today.</DialogDescription>
         </DialogHeader>
-
-        <div className="space-y-4 py-4">
-          {/* Mood picker */}
-          <div className="space-y-2">
-            <Label>Mood</Label>
-            <div className="flex gap-2">
-              {moods.map((m) => (
-                <Button
-                  key={m.value}
-                  variant={mood === m.value ? 'default' : 'outline'}
-                  size="sm"
-                  onClick={() => setMood(m.value)}
-                  className="flex-1"
-                >
-                  {m.label}
-                </Button>
-              ))}
+        <div className="space-y-4">
+          {habit.unit && (
+            <div className="space-y-2">
+              <Label htmlFor="completion-value">Value ({habit.unit})</Label>
+              <Input
+                id="completion-value"
+                type="number"
+                min={1}
+                value={value}
+                onChange={(e) => setValue(e.target.value)}
+              />
             </div>
-          </div>
+          )}
 
-          {/* Quantity */}
-          <div className="space-y-2">
-            <Label htmlFor="quantity">Quantity (optional)</Label>
-            <Input
-              id="quantity"
-              type="number"
-              placeholder="e.g., 30"
-              value={quantity ?? ''}
-              onChange={(e) =>
-                setQuantity(e.target.value ? Number(e.target.value) : undefined)
-              }
-            />
-          </div>
+          {habit.moodTracking && (
+            <div className="space-y-2">
+              <Label>Mood</Label>
+              <div className="flex gap-2">
+                {moodEmojis.map((m) => (
+                  <button
+                    key={m.value}
+                    type="button"
+                    onClick={() => setMood(mood === m.value ? null : m.value)}
+                    className={`flex h-10 w-10 items-center justify-center rounded-lg text-lg transition-colors ${
+                      mood === m.value
+                        ? 'bg-primary text-primary-foreground ring-2 ring-primary'
+                        : 'bg-muted hover:bg-accent'
+                    }`}
+                    title={m.label}
+                    aria-label={`Mood: ${m.label}`}
+                  >
+                    {m.emoji}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
 
-          {/* Notes */}
           <div className="space-y-2">
-            <Label htmlFor="notes">Notes (optional)</Label>
+            <Label htmlFor="completion-notes">Notes (optional)</Label>
             <Textarea
-              id="notes"
-              placeholder="Any thoughts or reflections..."
+              id="completion-notes"
               value={notes}
               onChange={(e) => setNotes(e.target.value)}
-              rows={3}
+              placeholder="How did it go?"
+              rows={2}
             />
           </div>
-        </div>
 
-        <div className="flex gap-2">
-          <Button onClick={handleSubmit} className="flex-1">
-            Log completion
-          </Button>
-          <Button
-            variant="outline"
-            onClick={() => onSubmit({})}
-            className="flex-1"
-          >
-            Skip
-          </Button>
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+              Cancel
+            </Button>
+            <Button type="button" onClick={() => onComplete(parseInt(value) || 1, mood || undefined, notes || undefined)}>
+              Save
+            </Button>
+          </DialogFooter>
         </div>
       </DialogContent>
     </Dialog>