added routine timeline thingy

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

@@ -131,7 +131,7 @@ export default function LaunchScreen() {
         </div>
 
         {/* Implementation Intention */}
-        {(routine.habit_stack_after || (schedule && routine.location)) && (
+        {(routine.habit_stack_after || schedule) && (
           <div className="bg-indigo-50 border border-indigo-200 rounded-2xl p-4">
             {routine.habit_stack_after && (
               <p className="text-indigo-800 text-sm mb-2">
@@ -139,10 +139,21 @@ export default function LaunchScreen() {
                 <span className="font-semibold">{routine.name}</span>
               </p>
             )}
-            {schedule && routine.location && (
+            {schedule && (
               <p className="text-indigo-700 text-sm">
-                at <span className="font-semibold">{schedule.time}</span> in{' '}
+                {schedule.days.length > 0 && (
-                <span className="font-semibold">{routine.location}</span>
+                  <span className="font-semibold">
+                    {schedule.days.length === 7 ? 'Every day' :
+                     schedule.days.length === 5 && ['mon','tue','wed','thu','fri'].every(d => schedule.days.includes(d)) ? 'Weekdays' :
+                     schedule.days.map(d => d.charAt(0).toUpperCase() + d.slice(1)).join(', ')}
+                  </span>
+                )}
+                {schedule.time && (
+                  <>{schedule.days.length > 0 ? ' at ' : 'At '}<span className="font-semibold">{schedule.time}</span></>
+                )}
+                {routine.location && (
+                  <> in <span className="font-semibold">{routine.location}</span></>
+                )}
               </p>
             )}
           </div>

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

@@ -25,8 +25,31 @@ interface Routine {
   habit_stack_after?: string;
 }
 
+interface Schedule {
+  days: string[];
+  time: string;
+  remind: boolean;
+}
+
 const ICONS = ['✨', '🌅', '🌙', '☀️', '💪', '🧘', '📚', '🍳', '🏃', '💼', '🎯', '⭐', '🔥', '💤', '🧠'];
 
+const DAY_OPTIONS = [
+  { value: 'mon', label: 'Mon' },
+  { value: 'tue', label: 'Tue' },
+  { value: 'wed', label: 'Wed' },
+  { value: 'thu', label: 'Thu' },
+  { value: 'fri', label: 'Fri' },
+  { value: 'sat', label: 'Sat' },
+  { value: 'sun', label: 'Sun' },
+];
+
+function formatDays(days: string[]): string {
+  if (days.length === 7) return 'Every day';
+  if (days.length === 5 && ['mon', 'tue', 'wed', 'thu', 'fri'].every(d => days.includes(d))) return 'Weekdays';
+  if (days.length === 2 && ['sat', 'sun'].every(d => days.includes(d))) return 'Weekends';
+  return days.map(d => DAY_OPTIONS.find(o => o.value === d)?.label || d).join(', ');
+}
+
 export default function RoutineDetailPage() {
   const router = useRouter();
   const params = useParams();
@@ -46,10 +69,19 @@ export default function RoutineDetailPage() {
   const [newStepName, setNewStepName] = useState('');
   const [newStepDuration, setNewStepDuration] = useState(5);
 
+  // Schedule state
+  const [schedule, setSchedule] = useState<Schedule | null>(null);
+  const [editDays, setEditDays] = useState<string[]>([]);
+  const [editTime, setEditTime] = useState('08:00');
+  const [editRemind, setEditRemind] = useState(true);
+
   useEffect(() => {
     const fetchRoutine = async () => {
       try {
-        const data = await api.routines.get(routineId);
+        const [data, scheduleData] = await Promise.all([
+          api.routines.get(routineId),
+          api.routines.getSchedule(routineId).catch(() => null),
+        ]);
         setRoutine(data.routine);
         setSteps(data.steps);
         setEditName(data.routine.name);
@@ -58,6 +90,12 @@ export default function RoutineDetailPage() {
         setEditLocation((data.routine as Routine).location || '');
         setEditHabitStack((data.routine as Routine).habit_stack_after || '');
         setEditEnvPrompts((data.routine as Routine).environment_prompts || []);
+        if (scheduleData) {
+          setSchedule(scheduleData);
+          setEditDays(scheduleData.days || []);
+          setEditTime(scheduleData.time || '08:00');
+          setEditRemind(scheduleData.remind ?? true);
+        }
       } catch (err) {
         console.error('Failed to fetch routine:', err);
         router.push('/dashboard/routines');
@@ -82,6 +120,20 @@ export default function RoutineDetailPage() {
         habit_stack_after: editHabitStack || null,
         environment_prompts: editEnvPrompts,
       });
+
+      // Save or delete schedule
+      if (editDays.length > 0) {
+        await api.routines.setSchedule(routineId, {
+          days: editDays,
+          time: editTime,
+          remind: editRemind,
+        });
+        setSchedule({ days: editDays, time: editTime, remind: editRemind });
+      } else if (schedule) {
+        await api.routines.deleteSchedule(routineId);
+        setSchedule(null);
+      }
+
       setRoutine({
         ...routine!,
         name: editName,
@@ -120,6 +172,12 @@ export default function RoutineDetailPage() {
     }
   };
 
+  const toggleDay = (day: string) => {
+    setEditDays(prev =>
+      prev.includes(day) ? prev.filter(d => d !== day) : [...prev, day]
+    );
+  };
+
   const totalDuration = steps.reduce((acc, s) => acc + (s.duration_minutes || 0), 0);
 
   if (isLoading) {
@@ -157,6 +215,7 @@ export default function RoutineDetailPage() {
 
       <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>
@@ -258,9 +317,89 @@ export default function RoutineDetailPage() {
                   </button>
                 </div>
               </div>
+            </div>
+
+            {/* Schedule Editor */}
+            <div className="bg-white rounded-xl p-4 shadow-sm space-y-4">
+              <h2 className="text-lg font-semibold text-gray-900">Schedule</h2>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-2">Days</label>
+                <div className="flex gap-2 flex-wrap">
+                  {DAY_OPTIONS.map((day) => (
+                    <button
+                      key={day.value}
+                      type="button"
+                      onClick={() => toggleDay(day.value)}
+                      className={`px-3 py-2 rounded-lg text-sm font-medium border transition-colors ${
+                        editDays.includes(day.value)
+                          ? 'bg-indigo-600 text-white border-indigo-600'
+                          : 'bg-white text-gray-700 border-gray-300'
+                      }`}
+                    >
+                      {day.label}
+                    </button>
+                  ))}
+                </div>
+              </div>
+              {editDays.length > 0 && (
+                <>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">Time</label>
+                    <input
+                      type="time"
+                      value={editTime}
+                      onChange={(e) => setEditTime(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 items-center justify-between">
+                    <div>
+                      <p className="font-medium text-gray-900">Send reminder</p>
+                      <p className="text-sm text-gray-500">Get notified when it's time</p>
+                    </div>
+                    <button
+                      onClick={() => setEditRemind(!editRemind)}
+                      className={`w-12 h-7 rounded-full transition-colors ${
+                        editRemind ? 'bg-indigo-500' : 'bg-gray-300'
+                      }`}
+                    >
+                      <div className={`w-5 h-5 bg-white rounded-full shadow transition-transform ml-1 ${
+                        editRemind ? 'translate-x-5' : ''
+                      }`} />
+                    </button>
+                  </div>
+                </>
+              )}
+              {schedule && (
+                <button
+                  onClick={() => {
+                    setEditDays([]);
+                    setEditTime('08:00');
+                    setEditRemind(true);
+                  }}
+                  className="text-red-500 text-sm font-medium"
+                >
+                  Remove schedule
+                </button>
+              )}
+            </div>
+
+            {/* Save/Cancel */}
             <div className="flex gap-3">
               <button
-                onClick={() => setIsEditing(false)}
+                onClick={() => {
+                  setIsEditing(false);
+                  // Reset schedule edits
+                  if (schedule) {
+                    setEditDays(schedule.days);
+                    setEditTime(schedule.time);
+                    setEditRemind(schedule.remind);
+                  } else {
+                    setEditDays([]);
+                    setEditTime('08:00');
+                    setEditRemind(true);
+                  }
+                }}
                 className="flex-1 px-4 py-2 border border-gray-300 rounded-lg font-medium"
               >
                 Cancel
@@ -272,8 +411,9 @@ export default function RoutineDetailPage() {
                 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">
@@ -301,6 +441,23 @@ export default function RoutineDetailPage() {
                 Start Routine
               </button>
             </div>
+
+            {/* Schedule display (view mode) */}
+            {schedule && schedule.days.length > 0 && (
+              <div className="bg-white rounded-xl p-4 shadow-sm">
+                <div className="flex items-center gap-2 mb-2">
+                  <ClockIcon size={16} className="text-indigo-500" />
+                  <h3 className="font-semibold text-gray-900">Schedule</h3>
+                </div>
+                <p className="text-gray-700">
+                  {formatDays(schedule.days)} at {schedule.time}
+                </p>
+                {schedule.remind && (
+                  <p className="text-sm text-gray-500 mt-1">Reminders on</p>
+                )}
+              </div>
+            )}
+          </>
         )}
 
         {/* Steps */}