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,110 +215,191 @@ 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>
+            <div className="bg-white rounded-xl p-4 shadow-sm space-y-4">
-              <label className="block text-sm font-medium text-gray-700 mb-2">Icon</label>
+              <div>
-              <div className="flex flex-wrap gap-2">
+                <label className="block text-sm font-medium text-gray-700 mb-2">Icon</label>
-                {ICONS.map((i) => (
+                <div className="flex flex-wrap gap-2">
-                  <button
+                  {ICONS.map((i) => (
-                    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>
-              <label className="block text-sm font-medium text-gray-700 mb-1">Location</label>
-              <input
-                type="text"
-                value={editLocation}
-                onChange={(e) => setEditLocation(e.target.value)}
-                placeholder="Where do you do this? e.g., bathroom, kitchen"
-                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">Anchor habit</label>
-              <input
-                type="text"
-                value={editHabitStack}
-                onChange={(e) => setEditHabitStack(e.target.value)}
-                placeholder="What do you do right before? e.g., finish breakfast"
-                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">Environment prompts</label>
-              <p className="text-xs text-gray-500 mb-2">Quick checklist shown before starting</p>
-              <div className="space-y-2 mb-2">
-                {editEnvPrompts.map((prompt, i) => (
-                  <div key={i} className="flex items-center gap-2">
-                    <span className="flex-1 text-sm text-gray-700 bg-gray-50 px-3 py-2 rounded-lg">{prompt}</span>
                     <button
-                      onClick={() => setEditEnvPrompts(editEnvPrompts.filter((_, j) => j !== i))}
+                      key={i}
-                      className="text-red-500 text-sm px-2"
+                      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'
+                      }`}
                     >
-                      Remove
+                      {i}
                     </button>
-                  </div>
+                  ))}
-                ))}
+                </div>
               </div>
-              <div className="flex gap-2">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Name</label>
                 <input
                   type="text"
-                  value={newEnvPrompt}
+                  value={editName}
-                  onChange={(e) => setNewEnvPrompt(e.target.value)}
+                  onChange={(e) => setEditName(e.target.value)}
-                  placeholder="e.g., Water bottle nearby?"
+                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none"
-                  className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 outline-none"
-                  onKeyDown={(e) => {
-                    if (e.key === 'Enter' && newEnvPrompt.trim()) {
-                      setEditEnvPrompts([...editEnvPrompts, newEnvPrompt.trim()]);
-                      setNewEnvPrompt('');
-                    }
-                  }}
                 />
-                <button
+              </div>
-                  onClick={() => {
+              <div>
-                    if (newEnvPrompt.trim()) {
+                <label className="block text-sm font-medium text-gray-700 mb-1">Description</label>
-                      setEditEnvPrompts([...editEnvPrompts, newEnvPrompt.trim()]);
+                <input
-                      setNewEnvPrompt('');
+                  type="text"
-                    }
+                  value={editDescription}
-                  }}
+                  onChange={(e) => setEditDescription(e.target.value)}
-                  className="px-3 py-2 bg-gray-200 rounded-lg text-sm font-medium"
+                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none"
-                >
+                />
-                  Add
+              </div>
-                </button>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Location</label>
+                <input
+                  type="text"
+                  value={editLocation}
+                  onChange={(e) => setEditLocation(e.target.value)}
+                  placeholder="Where do you do this? e.g., bathroom, kitchen"
+                  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">Anchor habit</label>
+                <input
+                  type="text"
+                  value={editHabitStack}
+                  onChange={(e) => setEditHabitStack(e.target.value)}
+                  placeholder="What do you do right before? e.g., finish breakfast"
+                  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">Environment prompts</label>
+                <p className="text-xs text-gray-500 mb-2">Quick checklist shown before starting</p>
+                <div className="space-y-2 mb-2">
+                  {editEnvPrompts.map((prompt, i) => (
+                    <div key={i} className="flex items-center gap-2">
+                      <span className="flex-1 text-sm text-gray-700 bg-gray-50 px-3 py-2 rounded-lg">{prompt}</span>
+                      <button
+                        onClick={() => setEditEnvPrompts(editEnvPrompts.filter((_, j) => j !== i))}
+                        className="text-red-500 text-sm px-2"
+                      >
+                        Remove
+                      </button>
+                    </div>
+                  ))}
+                </div>
+                <div className="flex gap-2">
+                  <input
+                    type="text"
+                    value={newEnvPrompt}
+                    onChange={(e) => setNewEnvPrompt(e.target.value)}
+                    placeholder="e.g., Water bottle nearby?"
+                    className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 outline-none"
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' && newEnvPrompt.trim()) {
+                        setEditEnvPrompts([...editEnvPrompts, newEnvPrompt.trim()]);
+                        setNewEnvPrompt('');
+                      }
+                    }}
+                  />
+                  <button
+                    onClick={() => {
+                      if (newEnvPrompt.trim()) {
+                        setEditEnvPrompts([...editEnvPrompts, newEnvPrompt.trim()]);
+                        setNewEnvPrompt('');
+                      }
+                    }}
+                    className="px-3 py-2 bg-gray-200 rounded-lg text-sm font-medium"
+                  >
+                    Add
+                  </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,35 +411,53 @@ 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="bg-white rounded-xl p-4 shadow-sm">
-              <div className="w-16 h-16 bg-gradient-to-br from-indigo-100 to-pink-100 rounded-2xl flex items-center justify-center">
+              <div className="flex items-center gap-4">
-                <span className="text-4xl">{routine.icon || '✨'}</span>
+                <div className="w-16 h-16 bg-gradient-to-br from-indigo-100 to-pink-100 rounded-2xl flex items-center justify-center">
-              </div>
+                  <span className="text-4xl">{routine.icon || '✨'}</span>
-              <div className="flex-1">
+                </div>
-                <h2 className="text-xl font-bold text-gray-900">{routine.name}</h2>
+                <div className="flex-1">
-                {routine.description && (
+                  <h2 className="text-xl font-bold text-gray-900">{routine.name}</h2>
-                  <p className="text-gray-500">{routine.description}</p>
+                  {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">
+                  <div className="flex items-center gap-4 mt-2 text-sm text-gray-500">
-                    <ClockIcon size={14} />
+                    <span className="flex items-center gap-1">
-                    {totalDuration} min
+                      <ClockIcon size={14} />
-                  </span>
+                      {totalDuration} min
-                  <span>{steps.length} steps</span>
+                    </span>
+                    <span>{steps.length} steps</span>
+                  </div>
                 </div>
               </div>
+              <button
+                onClick={handleStart}
+                className="w-full mt-4 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-bold py-4 rounded-2xl flex items-center justify-center gap-2 text-lg shadow-lg shadow-indigo-500/25 active:scale-[0.98] transition-transform"
+              >
+                <PlayIcon size={24} />
+                Start Routine
+              </button>
             </div>
-            <button
+
-              onClick={handleStart}
+            {/* Schedule display (view mode) */}
-              className="w-full mt-4 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-bold py-4 rounded-2xl flex items-center justify-center gap-2 text-lg shadow-lg shadow-indigo-500/25 active:scale-[0.98] transition-transform"
+            {schedule && schedule.days.length > 0 && (
-            >
+              <div className="bg-white rounded-xl p-4 shadow-sm">
-              <PlayIcon size={24} />
+                <div className="flex items-center gap-2 mb-2">
-              Start Routine
+                  <ClockIcon size={16} className="text-indigo-500" />
-            </button>
+                  <h3 className="font-semibold text-gray-900">Schedule</h3>
-          </div>
+                </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 */}