Fix medication system and rename to Synculous.

- Add all 14 missing database tables (medications, med_logs, routines, etc.)
- Rewrite medication scheduling: support specific days, every N days, as-needed (PRN)
- Fix taken_times matching: match by created_at date, not scheduled_time string
- Fix adherence calculation: taken / expected doses, not taken / (taken + skipped)
- Add formatSchedule() helper for readable display
- Update client types and API layer
- Rename brilli-ins-client → synculous-client
- Make client PWA: add manifest, service worker, icons
- Bind dev server to 0.0.0.0 for network access
- Fix SVG icon bugs in Icons.tsx
- Add .dockerignore for client npm caching

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

synculous-client/src/app/dashboard/routines/[id]/page.tsx

@@ -0,0 +1,294 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter, useParams } from 'next/navigation';
+import api from '@/lib/api';
+import { ArrowLeftIcon, PlayIcon, PlusIcon, TrashIcon, GripVerticalIcon, ClockIcon } from '@/components/ui/Icons';
+import Link from 'next/link';
+
+interface Step {
+  id: string;
+  name: string;
+  instructions?: string;
+  step_type: string;
+  duration_minutes?: number;
+  position: number;
+}
+
+interface Routine {
+  id: string;
+  name: string;
+  description?: string;
+  icon?: string;
+}
+
+const ICONS = ['✨', '🌅', '🌙', '☀️', '💪', '🧘', '📚', '🍳', '🏃', '💼', '🎯', '⭐', '🔥', '💤', '🧠'];
+
+export default function RoutineDetailPage() {
+  const router = useRouter();
+  const params = useParams();
+  const routineId = params.id as string;
+
+  const [routine, setRoutine] = useState<Routine | null>(null);
+  const [steps, setSteps] = useState<Step[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isEditing, setIsEditing] = useState(false);
+  const [editName, setEditName] = useState('');
+  const [editDescription, setEditDescription] = useState('');
+  const [editIcon, setEditIcon] = useState('✨');
+  const [newStepName, setNewStepName] = useState('');
+  const [newStepDuration, setNewStepDuration] = useState(5);
+
+  useEffect(() => {
+    const fetchRoutine = async () => {
+      try {
+        const data = await api.routines.get(routineId);
+        setRoutine(data.routine);
+        setSteps(data.steps);
+        setEditName(data.routine.name);
+        setEditDescription(data.routine.description || '');
+        setEditIcon(data.routine.icon || '✨');
+      } catch (err) {
+        console.error('Failed to fetch routine:', err);
+        router.push('/dashboard/routines');
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchRoutine();
+  }, [routineId, router]);
+
+  const handleStart = async () => {
+    try {
+      await api.sessions.start(routineId);
+      router.push(`/dashboard/routines/${routineId}/run`);
+    } catch (err) {
+      console.error('Failed to start routine:', err);
+    }
+  };
+
+  const handleSaveBasicInfo = async () => {
+    try {
+      await api.routines.update(routineId, {
+        name: editName,
+        description: editDescription,
+        icon: editIcon,
+      });
+      setRoutine({ ...routine!, name: editName, description: editDescription, icon: editIcon });
+      setIsEditing(false);
+    } catch (err) {
+      console.error('Failed to update routine:', err);
+    }
+  };
+
+  const handleAddStep = async () => {
+    if (!newStepName.trim()) return;
+    try {
+      const step = await api.routines.addStep(routineId, {
+        name: newStepName,
+        duration_minutes: newStepDuration,
+      });
+      setSteps([...steps, { ...step, position: steps.length + 1 }]);
+      setNewStepName('');
+    } catch (err) {
+      console.error('Failed to add step:', err);
+    }
+  };
+
+  const handleDeleteStep = async (stepId: string) => {
+    try {
+      await api.routines.deleteStep(routineId, stepId);
+      setSteps(steps.filter(s => s.id !== stepId).map((s, i) => ({ ...s, position: i + 1 })));
+    } catch (err) {
+      console.error('Failed to delete step:', err);
+    }
+  };
+
+  const totalDuration = steps.reduce((acc, s) => acc + (s.duration_minutes || 0), 0);
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-[50vh]">
+        <div className="w-8 h-8 border-4 border-indigo-500 border-t-transparent rounded-full animate-spin"></div>
+      </div>
+    );
+  }
+
+  if (!routine) return null;
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <header className="bg-white border-b border-gray-200 sticky top-0 z-10">
+        <div className="flex items-center justify-between px-4 py-3">
+          <div className="flex items-center gap-3">
+            <button onClick={() => router.back()} className="p-1">
+              <ArrowLeftIcon size={24} />
+            </button>
+            <h1 className="text-xl font-bold text-gray-900">
+              {isEditing ? 'Edit Routine' : routine.name}
+            </h1>
+          </div>
+          {!isEditing && (
+            <button
+              onClick={() => setIsEditing(true)}
+              className="text-indigo-600 font-medium"
+            >
+              Edit
+            </button>
+          )}
+        </div>
+      </header>
+
+      <div className="p-4 space-y-6">
+        {isEditing ? (
+          <div className="bg-white rounded-xl p-4 shadow-sm space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">Icon</label>
+              <div className="flex flex-wrap gap-2">
+                {ICONS.map((i) => (
+                  <button
+                    key={i}
+                    type="button"
+                    onClick={() => setEditIcon(i)}
+                    className={`w-10 h-10 rounded-lg text-xl flex items-center justify-center transition ${
+                      editIcon === i 
+                        ? 'bg-indigo-100 ring-2 ring-indigo-600' 
+                        : 'bg-gray-100 hover:bg-gray-200'
+                    }`}
+                  >
+                    {i}
+                  </button>
+                ))}
+              </div>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Name</label>
+              <input
+                type="text"
+                value={editName}
+                onChange={(e) => setEditName(e.target.value)}
+                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Description</label>
+              <input
+                type="text"
+                value={editDescription}
+                onChange={(e) => setEditDescription(e.target.value)}
+                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none"
+              />
+            </div>
+            <div className="flex gap-3">
+              <button
+                onClick={() => setIsEditing(false)}
+                className="flex-1 px-4 py-2 border border-gray-300 rounded-lg font-medium"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleSaveBasicInfo}
+                className="flex-1 px-4 py-2 bg-indigo-600 text-white rounded-lg font-medium"
+              >
+                Save
+              </button>
+            </div>
+          </div>
+        ) : (
+          <div className="bg-white rounded-xl p-4 shadow-sm">
+            <div className="flex items-center gap-4">
+              <div className="w-16 h-16 bg-gradient-to-br from-indigo-100 to-pink-100 rounded-2xl flex items-center justify-center">
+                <span className="text-4xl">{routine.icon || '✨'}</span>
+              </div>
+              <div className="flex-1">
+                <h2 className="text-xl font-bold text-gray-900">{routine.name}</h2>
+                {routine.description && (
+                  <p className="text-gray-500">{routine.description}</p>
+                )}
+                <div className="flex items-center gap-4 mt-2 text-sm text-gray-500">
+                  <span className="flex items-center gap-1">
+                    <ClockIcon size={14} />
+                    {totalDuration} min
+                  </span>
+                  <span>{steps.length} steps</span>
+                </div>
+              </div>
+            </div>
+            <button
+              onClick={handleStart}
+              className="w-full mt-4 bg-indigo-600 text-white font-semibold py-3 rounded-xl flex items-center justify-center gap-2"
+            >
+              <PlayIcon size={20} />
+              Start Routine
+            </button>
+          </div>
+        )}
+
+        {/* Steps */}
+        <div>
+          <h2 className="text-lg font-semibold text-gray-900 mb-3">Steps</h2>
+          
+          <div className="bg-white rounded-xl p-4 shadow-sm space-y-3 mb-4">
+            <div className="flex gap-2">
+              <input
+                type="text"
+                value={newStepName}
+                onChange={(e) => setNewStepName(e.target.value)}
+                placeholder="New step name"
+                className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none"
+              />
+              <select
+                value={newStepDuration}
+                onChange={(e) => setNewStepDuration(Number(e.target.value))}
+                className="px-3 py-2 border border-gray-300 rounded-lg"
+              >
+                <option value={1}>1m</option>
+                <option value={5}>5m</option>
+                <option value={10}>10m</option>
+                <option value={15}>15m</option>
+                <option value={30}>30m</option>
+              </select>
+              <button
+                onClick={handleAddStep}
+                className="bg-indigo-600 text-white px-4 py-2 rounded-lg"
+              >
+                <PlusIcon size={20} />
+              </button>
+            </div>
+          </div>
+
+          {steps.length === 0 ? (
+            <div className="bg-white rounded-xl p-8 shadow-sm text-center">
+              <p className="text-gray-500">No steps yet</p>
+            </div>
+          ) : (
+            <div className="space-y-2">
+              {steps.map((step, index) => (
+                <div
+                  key={step.id}
+                  className="bg-white rounded-xl p-4 shadow-sm flex items-center gap-3"
+                >
+                  <div className="w-8 h-8 bg-indigo-100 text-indigo-600 rounded-full flex items-center justify-center font-semibold text-sm">
+                    {index + 1}
+                  </div>
+                  <div className="flex-1">
+                    <h3 className="font-medium text-gray-900">{step.name}</h3>
+                    {step.duration_minutes && (
+                      <p className="text-sm text-gray-500">{step.duration_minutes} min</p>
+                    )}
+                  </div>
+                  <button
+                    onClick={() => handleDeleteStep(step.id)}
+                    className="text-red-500 p-2"
+                  >
+                    <TrashIcon size={18} />
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

synculous-client/src/app/dashboard/routines/[id]/run/page.tsx

@@ -0,0 +1,321 @@
+'use client';
+
+import { useEffect, useState, useCallback, useRef } from 'react';
+import { useRouter, useParams } from 'next/navigation';
+import api from '@/lib/api';
+import { ArrowLeftIcon, PauseIcon, PlayIcon, StopIcon, SkipForwardIcon, CheckIcon, XIcon } from '@/components/ui/Icons';
+
+interface Step {
+  id: string;
+  name: string;
+  instructions?: string;
+  step_type: string;
+  duration_minutes?: number;
+  position: number;
+}
+
+interface Routine {
+  id: string;
+  name: string;
+  icon?: string;
+}
+
+interface Session {
+  id: string;
+  routine_id: string;
+  status: string;
+  current_step_index: number;
+}
+
+export default function SessionRunnerPage() {
+  const router = useRouter();
+  const params = useParams();
+  const routineId = params.id as string;
+
+  const [routine, setRoutine] = useState<Routine | null>(null);
+  const [steps, setSteps] = useState<Step[]>([]);
+  const [session, setSession] = useState<Session | null>(null);
+  const [currentStep, setCurrentStep] = useState<Step | null>(null);
+  const [currentStepIndex, setCurrentStepIndex] = useState(0);
+  const [status, setStatus] = useState<'loading' | 'active' | 'paused' | 'completed'>('loading');
+  
+  const [timerSeconds, setTimerSeconds] = useState(0);
+  const [isTimerRunning, setIsTimerRunning] = useState(false);
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const [swipeDirection, setSwipeDirection] = useState<'left' | 'right' | null>(null);
+  const touchStartX = useRef<number | null>(null);
+  const touchStartY = useRef<number | null>(null);
+
+  // Fetch session data
+  useEffect(() => {
+    const fetchSession = async () => {
+      try {
+        const sessionData = await api.sessions.getActive();
+        setSession(sessionData.session);
+        setRoutine(sessionData.routine);
+        setSteps(await api.routines.getSteps(sessionData.routine.id).then(s => s));
+        setCurrentStep(sessionData.current_step);
+        setCurrentStepIndex(sessionData.session.current_step_index);
+        setStatus(sessionData.session.status === 'paused' ? 'paused' : 'active');
+        
+        if (sessionData.current_step?.duration_minutes) {
+          setTimerSeconds(sessionData.current_step.duration_minutes * 60);
+        }
+      } catch (err) {
+        router.push('/dashboard');
+      }
+    };
+    fetchSession();
+  }, [router]);
+
+  // Timer logic
+  useEffect(() => {
+    if (isTimerRunning && timerSeconds > 0) {
+      timerRef.current = setInterval(() => {
+        setTimerSeconds(s => Math.max(0, s - 1));
+      }, 1000);
+    }
+    return () => {
+      if (timerRef.current) clearInterval(timerRef.current);
+    };
+  }, [isTimerRunning, timerSeconds]);
+
+  const formatTime = (seconds: number) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+  };
+
+  // Touch handlers for swipe
+  const handleTouchStart = (e: React.TouchEvent) => {
+    touchStartX.current = e.touches[0].clientX;
+    touchStartY.current = e.touches[0].clientY;
+  };
+
+  const handleTouchEnd = (e: React.TouchEvent) => {
+    if (touchStartX.current === null || touchStartY.current === null) return;
+    
+    const touchEndX = e.changedTouches[0].clientX;
+    const touchEndY = e.changedTouches[0].clientY;
+    const diffX = touchEndX - touchStartX.current;
+    const diffY = touchEndY - touchStartY.current;
+
+    // Only trigger if horizontal swipe is dominant
+    if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 50) {
+      if (diffX < 0) {
+        // Swipe left - complete
+        handleComplete();
+      } else {
+        // Swipe right - skip
+        handleSkip();
+      }
+    }
+
+    touchStartX.current = null;
+    touchStartY.current = null;
+  };
+
+  const handleComplete = async () => {
+    if (!session || !currentStep) return;
+    
+    setSwipeDirection('left');
+    setTimeout(() => setSwipeDirection(null), 300);
+
+    try {
+      const result = await api.sessions.completeStep(session.id, currentStep.id);
+      if (result.next_step) {
+        setCurrentStep(result.next_step);
+        setCurrentStepIndex(result.session.current_step_index!);
+        setTimerSeconds((result.next_step.duration_minutes || 5) * 60);
+        setIsTimerRunning(true);
+      } else {
+        setStatus('completed');
+        setIsTimerRunning(false);
+      }
+    } catch (err) {
+      console.error('Failed to complete step:', err);
+    }
+  };
+
+  const handleSkip = async () => {
+    if (!session || !currentStep) return;
+    
+    setSwipeDirection('right');
+    setTimeout(() => setSwipeDirection(null), 300);
+
+    try {
+      const result = await api.sessions.skipStep(session.id, currentStep.id);
+      if (result.next_step) {
+        setCurrentStep(result.next_step);
+        setCurrentStepIndex(result.session.current_step_index!);
+        setTimerSeconds((result.next_step.duration_minutes || 5) * 60);
+        setIsTimerRunning(true);
+      } else {
+        setStatus('completed');
+        setIsTimerRunning(false);
+      }
+    } catch (err) {
+      console.error('Failed to skip step:', err);
+    }
+  };
+
+  const handlePause = async () => {
+    if (!session) return;
+    try {
+      await api.sessions.pause(session.id);
+      setStatus('paused');
+      setIsTimerRunning(false);
+    } catch (err) {
+      console.error('Failed to pause:', err);
+    }
+  };
+
+  const handleResume = async () => {
+    if (!session) return;
+    try {
+      await api.sessions.resume(session.id);
+      setStatus('active');
+      setIsTimerRunning(true);
+    } catch (err) {
+      console.error('Failed to resume:', err);
+    }
+  };
+
+  const handleCancel = async () => {
+    if (!session) return;
+    try {
+      await api.sessions.cancel(session.id);
+      router.push('/dashboard');
+    } catch (err) {
+      console.error('Failed to cancel:', err);
+    }
+  };
+
+  if (status === 'loading' || !currentStep) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-900">
+        <div className="w-8 h-8 border-4 border-indigo-500 border-t-transparent rounded-full animate-spin"></div>
+      </div>
+    );
+  }
+
+  if (status === 'completed') {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 flex flex-col items-center justify-center p-6">
+        <div className="w-24 h-24 bg-white rounded-full flex items-center justify-center mb-6">
+          <CheckIcon className="text-green-500" size={48} />
+        </div>
+        <h1 className="text-3xl font-bold text-white mb-2">Great job!</h1>
+        <p className="text-white/80 text-lg mb-8">You completed your routine</p>
+        <button
+          onClick={() => router.push('/dashboard')}
+          className="bg-white text-indigo-600 px-8 py-3 rounded-full font-semibold"
+        >
+          Done
+        </button>
+      </div>
+    );
+  }
+
+  const progress = ((currentStepIndex + 1) / steps.length) * 100;
+
+  return (
+    <div 
+      className="min-h-screen bg-gray-900 text-white flex flex-col"
+      onTouchStart={handleTouchStart}
+      onTouchEnd={handleTouchEnd}
+    >
+      {/* Header */}
+      <header className="flex items-center justify-between px-4 py-4">
+        <button onClick={handleCancel} className="p-2">
+          <XIcon size={24} />
+        </button>
+        <div className="text-center">
+          <p className="text-white/60 text-sm">{routine?.name}</p>
+          <p className="font-semibold">Step {currentStepIndex + 1} of {steps.length}</p>
+        </div>
+        <button onClick={status === 'paused' ? handleResume : handlePause} className="p-2">
+          {status === 'paused' ? <PlayIcon size={24} /> : <PauseIcon size={24} />}
+        </button>
+      </header>
+
+      {/* Progress bar */}
+      <div className="px-4">
+        <div className="h-1 bg-gray-700 rounded-full overflow-hidden">
+          <div 
+            className="h-full bg-indigo-500 transition-all duration-500"
+            style={{ width: `${progress}%` }}
+          />
+        </div>
+      </div>
+
+      {/* Main Card */}
+      <div className="flex-1 flex flex-col items-center justify-center p-6">
+        <div 
+          className={`
+            w-full max-w-md bg-gray-800 rounded-3xl p-8 text-center
+            transition-transform duration-300
+            ${swipeDirection === 'left' ? 'translate-x-20 opacity-50' : ''}
+            ${swipeDirection === 'right' ? '-translate-x-20 opacity-50' : ''}
+          `}
+        >
+          {/* Step Type Badge */}
+          <div className="inline-block px-3 py-1 bg-indigo-600 rounded-full text-sm mb-4">
+            {currentStep.step_type || 'Generic'}
+          </div>
+
+          {/* Timer */}
+          <div className="mb-6">
+            <div className="text-7xl font-bold font-mono mb-2">
+              {formatTime(timerSeconds)}
+            </div>
+            <p className="text-white/60">remaining</p>
+          </div>
+
+          {/* Step Name */}
+          <h2 className="text-3xl font-bold mb-4">{currentStep.name}</h2>
+
+          {/* Instructions */}
+          {currentStep.instructions && (
+            <p className="text-white/80 text-lg mb-6">{currentStep.instructions}</p>
+          )}
+
+          {/* Timer Controls */}
+          <div className="flex justify-center gap-4 mt-8">
+            <button
+              onClick={handleSkip}
+              className="w-16 h-16 bg-gray-700 rounded-full flex items-center justify-center hover:bg-gray-600 transition"
+            >
+              <SkipForwardIcon size={28} />
+            </button>
+            <button
+              onClick={status === 'paused' ? handleResume : handlePause}
+              className="w-20 h-20 bg-indigo-600 rounded-full flex items-center justify-center hover:bg-indigo-500 transition"
+            >
+              {status === 'paused' ? <PlayIcon size={32} /> : <PauseIcon size={32} />}
+            </button>
+            <button
+              onClick={handleComplete}
+              className="w-16 h-16 bg-green-600 rounded-full flex items-center justify-center hover:bg-green-500 transition"
+            >
+              <CheckIcon size={28} />
+            </button>
+          </div>
+        </div>
+
+        {/* Swipe Hints */}
+        <div className="flex justify-between w-full max-w-md mt-8 text-white/40 text-sm">
+          <div className="flex items-center gap-2">
+            <ArrowLeftIcon size={16} />
+            <span>Swipe left to complete</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <span>Swipe right to skip</span>
+            <ArrowLeftIcon size={16} className="rotate-180" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

synculous-client/src/app/dashboard/routines/new/page.tsx

@@ -0,0 +1,236 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import api from '@/lib/api';
+import { ArrowLeftIcon, PlusIcon, TrashIcon, GripVerticalIcon } from '@/components/ui/Icons';
+
+interface Step {
+  id: string;
+  name: string;
+  duration_minutes?: number;
+  position: number;
+}
+
+const ICONS = ['✨', '🌅', '🌙', '☀️', '💪', '🧘', '📚', '🍳', '🏃', '💼', '🎯', '⭐', '🔥', '💤', '🧠'];
+
+const STEP_TYPES = [
+  { value: 'generic', label: 'Generic' },
+  { value: 'timer', label: 'Timer' },
+  { value: 'checklist', label: 'Checklist' },
+  { value: 'meditation', label: 'Meditation' },
+  { value: 'exercise', label: 'Exercise' },
+];
+
+export default function NewRoutinePage() {
+  const router = useRouter();
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [icon, setIcon] = useState('✨');
+  const [steps, setSteps] = useState<Step[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleAddStep = () => {
+    const newStep: Step = {
+      id: `temp-${Date.now()}`,
+      name: '',
+      duration_minutes: 5,
+      position: steps.length + 1,
+    };
+    setSteps([...steps, newStep]);
+  };
+
+  const handleUpdateStep = (index: number, updates: Partial<Step>) => {
+    const newSteps = [...steps];
+    newSteps[index] = { ...newSteps[index], ...updates };
+    setSteps(newSteps);
+  };
+
+  const handleDeleteStep = (index: number) => {
+    const newSteps = steps.filter((_, i) => i !== index);
+    setSteps(newSteps.map((s, i) => ({ ...s, position: i + 1 })));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!name.trim()) {
+      setError('Please enter a routine name');
+      return;
+    }
+    const validSteps = steps.filter(s => s.name.trim());
+    if (validSteps.length === 0) {
+      setError('Please add at least one step');
+      return;
+    }
+
+    setIsLoading(true);
+    setError('');
+
+    try {
+      const routine = await api.routines.create({ name, description, icon });
+      
+      for (const step of validSteps) {
+        await api.routines.addStep(routine.id, {
+          name: step.name,
+          duration_minutes: step.duration_minutes,
+        });
+      }
+
+      router.push('/dashboard/routines');
+    } catch (err) {
+      setError((err as Error).message || 'Failed to create routine');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <header className="bg-white border-b border-gray-200 sticky top-0 z-10">
+        <div className="flex items-center gap-3 px-4 py-3">
+          <button onClick={() => router.back()} className="p-1">
+            <ArrowLeftIcon size={24} />
+          </button>
+          <h1 className="text-xl font-bold text-gray-900">New Routine</h1>
+        </div>
+      </header>
+
+      <form onSubmit={handleSubmit} className="p-4 space-y-6">
+        {error && (
+          <div className="bg-red-50 text-red-600 px-4 py-3 rounded-lg text-sm">
+            {error}
+          </div>
+        )}
+
+        {/* Basic Info */}
+        <div className="bg-white rounded-xl p-4 shadow-sm space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">Icon</label>
+            <div className="flex flex-wrap gap-2">
+              {ICONS.map((i) => (
+                <button
+                  key={i}
+                  type="button"
+                  onClick={() => setIcon(i)}
+                  className={`w-10 h-10 rounded-lg text-xl flex items-center justify-center transition ${
+                    icon === i 
+                      ? 'bg-indigo-100 ring-2 ring-indigo-600' 
+                      : 'bg-gray-100 hover:bg-gray-200'
+                  }`}
+                >
+                  {i}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Name</label>
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Morning Routine"
+              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Description (optional)</label>
+            <input
+              type="text"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="Start your day right"
+              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none"
+            />
+          </div>
+        </div>
+
+        {/* Steps */}
+        <div>
+          <div className="flex items-center justify-between mb-3">
+            <h2 className="text-lg font-semibold text-gray-900">Steps</h2>
+            <button
+              type="button"
+              onClick={handleAddStep}
+              className="text-indigo-600 text-sm font-medium flex items-center gap-1"
+            >
+              <PlusIcon size={16} />
+              Add Step
+            </button>
+          </div>
+
+          {steps.length === 0 ? (
+            <div className="bg-white rounded-xl p-8 shadow-sm text-center">
+              <p className="text-gray-500 mb-4">Add steps to your routine</p>
+              <button
+                type="button"
+                onClick={handleAddStep}
+                className="text-indigo-600 font-medium"
+              >
+                + Add your first step
+              </button>
+            </div>
+          ) : (
+            <div className="space-y-3">
+              {steps.map((step, index) => (
+                <div
+                  key={step.id}
+                  className="bg-white rounded-xl p-4 shadow-sm flex items-start gap-3"
+                >
+                  <div className="pt-3 text-gray-400 cursor-grab">
+                    <GripVerticalIcon size={20} />
+                  </div>
+                  <div className="flex-1 space-y-3">
+                    <input
+                      type="text"
+                      value={step.name}
+                      onChange={(e) => handleUpdateStep(index, { name: e.target.value })}
+                      placeholder="Step name"
+                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none"
+                    />
+                    <div className="flex items-center gap-3">
+                      <label className="text-sm text-gray-500">Duration:</label>
+                      <select
+                        value={step.duration_minutes || 5}
+                        onChange={(e) => handleUpdateStep(index, { duration_minutes: Number(e.target.value) })}
+                        className="px-3 py-1 border border-gray-300 rounded-lg text-sm"
+                      >
+                        <option value={1}>1 min</option>
+                        <option value={2}>2 min</option>
+                        <option value={5}>5 min</option>
+                        <option value={10}>10 min</option>
+                        <option value={15}>15 min</option>
+                        <option value={20}>20 min</option>
+                        <option value={30}>30 min</option>
+                        <option value={45}>45 min</option>
+                        <option value={60}>60 min</option>
+                      </select>
+                    </div>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => handleDeleteStep(index)}
+                    className="text-red-500 p-2"
+                  >
+                    <TrashIcon size={18} />
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <button
+          type="submit"
+          disabled={isLoading}
+          className="w-full bg-indigo-600 text-white font-semibold py-4 rounded-xl hover:bg-indigo-700 disabled:opacity-50"
+        >
+          {isLoading ? 'Creating...' : 'Create Routine'}
+        </button>
+      </form>
+    </div>
+  );
+}

synculous-client/src/app/dashboard/routines/page.tsx

@@ -0,0 +1,157 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import api from '@/lib/api';
+import { PlusIcon, PlayIcon, EditIcon, TrashIcon, FlameIcon } from '@/components/ui/Icons';
+import Link from 'next/link';
+
+interface Routine {
+  id: string;
+  name: string;
+  description?: string;
+  icon?: string;
+}
+
+export default function RoutinesPage() {
+  const router = useRouter();
+  const [routines, setRoutines] = useState<Routine[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [deleteModal, setDeleteModal] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchRoutines = async () => {
+      try {
+        const data = await api.routines.list();
+        setRoutines(data);
+      } catch (err) {
+        console.error('Failed to fetch routines:', err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchRoutines();
+  }, []);
+
+  const handleDelete = async (routineId: string) => {
+    try {
+      await api.routines.delete(routineId);
+      setRoutines(routines.filter(r => r.id !== routineId));
+      setDeleteModal(null);
+    } catch (err) {
+      console.error('Failed to delete routine:', err);
+    }
+  };
+
+  const handleStartRoutine = async (routineId: string) => {
+    try {
+      await api.sessions.start(routineId);
+      router.push(`/dashboard/routines/${routineId}/run`);
+    } catch (err) {
+      console.error('Failed to start routine:', err);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-[50vh]">
+        <div className="w-8 h-8 border-4 border-indigo-500 border-t-transparent rounded-full animate-spin"></div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-4 space-y-4">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold text-gray-900">Routines</h1>
+        <Link
+          href="/dashboard/routines/new"
+          className="bg-indigo-600 text-white p-2 rounded-full"
+        >
+          <PlusIcon size={24} />
+        </Link>
+      </div>
+
+      {routines.length === 0 ? (
+        <div className="bg-white rounded-xl p-8 shadow-sm text-center mt-4">
+          <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
+            <FlameIcon className="text-gray-400" size={32} />
+          </div>
+          <h3 className="font-semibold text-gray-900 mb-1">No routines yet</h3>
+          <p className="text-gray-500 text-sm mb-4">Create your first routine to get started</p>
+          <Link
+            href="/dashboard/routines/new"
+            className="inline-block bg-indigo-600 text-white px-4 py-2 rounded-lg font-medium"
+          >
+            Create Routine
+          </Link>
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {routines.map((routine) => (
+            <div
+              key={routine.id}
+              className="bg-white rounded-xl p-4 shadow-sm"
+            >
+              <div className="flex items-center gap-3">
+                <div className="w-12 h-12 bg-gradient-to-br from-indigo-100 to-pink-100 rounded-xl flex items-center justify-center flex-shrink-0">
+                  <span className="text-2xl">{routine.icon || '✨'}</span>
+                </div>
+                <div className="flex-1 min-w-0">
+                  <h3 className="font-semibold text-gray-900 truncate">{routine.name}</h3>
+                  {routine.description && (
+                    <p className="text-gray-500 text-sm truncate">{routine.description}</p>
+                  )}
+                </div>
+                <div className="flex items-center gap-2">
+                  <button
+                    onClick={() => handleStartRoutine(routine.id)}
+                    className="bg-indigo-600 text-white p-2 rounded-full"
+                  >
+                    <PlayIcon size={18} />
+                  </button>
+                  <Link
+                    href={`/dashboard/routines/${routine.id}`}
+                    className="text-gray-500 p-2"
+                  >
+                    <EditIcon size={18} />
+                  </Link>
+                  <button
+                    onClick={() => setDeleteModal(routine.id)}
+                    className="text-red-500 p-2"
+                  >
+                    <TrashIcon size={18} />
+                  </button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Delete Modal */}
+      {deleteModal && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-2xl p-6 max-w-sm w-full">
+            <h3 className="text-lg font-semibold text-gray-900 mb-2">Delete Routine?</h3>
+            <p className="text-gray-500 mb-4">This action cannot be undone.</p>
+            <div className="flex gap-3">
+              <button
+                onClick={() => setDeleteModal(null)}
+                className="flex-1 px-4 py-2 border border-gray-300 rounded-lg font-medium"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={() => handleDelete(deleteModal)}
+                className="flex-1 px-4 py-2 bg-red-600 text-white rounded-lg font-medium"
+              >
+                Delete
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}