fix: restore Enabled/Paused status badges on schedule jobs

Author: chriswritescode-dev

frontend/src/components/schedules/JobDetailTab.tsx

@@ -1,9 +1,11 @@
 import type { ScheduleJob } from '@opencode-manager/shared/types'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
 import {
   formatScheduleSummary,
   formatTimestamp,
+  getJobStatusTone,
   hasSkillMetadata,
 } from '@/components/schedules/schedule-utils'
 import { Bot, CalendarClock, Clock3, History, Loader2, Pencil, Play, Sparkles, Trash2 } from 'lucide-react'
@@ -49,7 +51,10 @@ export function JobDetailTab({
         <div className="border-b border-border/60 bg-card px-3 py-4 sm:px-6 sm:py-5">
           <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
             <div className="space-y-2">
-              <h3 className="text-xl font-semibold tracking-tight">{selectedJob.name}</h3>
+              <div className="flex flex-wrap items-center gap-2">
+                <h3 className="text-xl font-semibold tracking-tight">{selectedJob.name}</h3>
+                <Badge className={getJobStatusTone(selectedJob)}>{selectedJob.enabled ? 'Enabled' : 'Paused'}</Badge>
+              </div>
               <p className="text-sm text-muted-foreground">{selectedJob.description || 'No description provided.'}</p>
               <div className="flex flex-wrap gap-2 text-xs text-muted-foreground">
                 <span className="inline-flex items-center gap-1"><Clock3 className="h-3.5 w-3.5" /> {formatTimestamp(selectedJob.nextRunAt)}</span>

frontend/src/components/schedules/JobsTab.tsx

@@ -1,5 +1,6 @@
 import type { ScheduleJob } from '@opencode-manager/shared/types'
-import { formatScheduleShortLabel } from '@/components/schedules/schedule-utils'
+import { Badge } from '@/components/ui/badge'
+import { formatScheduleShortLabel, getJobStatusTone } from '@/components/schedules/schedule-utils'
 import { Bot, Clock3 } from 'lucide-react'
 import { cn } from '@/lib/utils'
 
@@ -24,9 +25,12 @@ export function JobsTab({ jobs, selectedJobId, onSelectJob }: JobsTabProps) {
               : 'border-border/70 bg-background/60 hover:bg-accent/40'
           )}
         >
-          <div>
-            <p className="font-medium truncate">{job.name}</p>
-            <p className="mt-1 truncate text-xs text-muted-foreground">{job.description || 'No description yet'}</p>
+          <div className="flex items-start justify-between gap-2">
+            <div className="min-w-0">
+              <p className="font-medium truncate">{job.name}</p>
+              <p className="mt-1 truncate text-xs text-muted-foreground">{job.description || 'No description yet'}</p>
+            </div>
+            <Badge className={getJobStatusTone(job)}>{job.enabled ? 'Enabled' : 'Paused'}</Badge>
           </div>
           <div className="mt-2 flex flex-wrap gap-2 text-xs text-muted-foreground">
             <span className="inline-flex items-center gap-1"><Clock3 className="h-3.5 w-3.5" /> {formatScheduleShortLabel(job)}</span>

frontend/src/pages/GlobalSchedules.tsx

@@ -4,11 +4,12 @@ import { useAllSchedules, useAllScheduleRuns, useCancelRepoScheduleRun } from '@
 import { useDeleteRepoSchedule, useRunRepoSchedule, useUpdateRepoSchedule, useCreateRepoSchedule } from '@/hooks/useSchedules'
 import { ScheduleJobDialog, RunHistoryCards, PromptsTab } from '@/components/schedules'
 import type { CreateScheduleJobRequest } from '@opencode-manager/shared/types'
-import { toUpdateScheduleRequest, formatScheduleShortLabel, formatTimestamp } from '@/components/schedules/schedule-utils'
+import { toUpdateScheduleRequest, formatScheduleShortLabel, formatTimestamp, getJobStatusTone } from '@/components/schedules/schedule-utils'
 import { Header } from '@/components/ui/header'
 import { Button } from '@/components/ui/button'
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuCheckboxItem, DropdownMenuItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator } from '@/components/ui/dropdown-menu'
 import { Card, CardContent } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
 import { DeleteDialog } from '@/components/ui/delete-dialog'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { CalendarClock, Loader2, Plus, ArrowLeft, Play, Pencil, Trash2, Pause, PlayCircle, Clock3, History, SlidersHorizontal } from 'lucide-react'
@@ -553,21 +554,24 @@ export function GlobalSchedules() {
                     onClick={() => navigate(`/repos/${job.repoId}/schedules`)}
                   >
                     <CardContent className="p-4 space-y-3">
-                      <div className="min-w-0">
-                        <button
-                          type="button"
-                          onClick={(e) => {
-                            e.stopPropagation()
-                            handleNavigateToRepo(job.repoPath)
-                          }}
-                          className="text-xs text-muted-foreground hover:text-foreground hover:underline truncate block mb-1"
-                        >
-                          {job.repoName}
-                        </button>
-                        <h3 className="font-medium truncate">{job.name}</h3>
-                        <p className="mt-1 text-xs text-muted-foreground line-clamp-2">
-                          {job.description || 'No description'}
-                        </p>
+                      <div className="flex items-start justify-between gap-2">
+                        <div className="min-w-0 flex-1">
+                          <button
+                            type="button"
+                            onClick={(e) => {
+                              e.stopPropagation()
+                              handleNavigateToRepo(job.repoPath)
+                            }}
+                            className="text-xs text-muted-foreground hover:text-foreground hover:underline truncate block mb-1"
+                          >
+                            {job.repoName}
+                          </button>
+                          <h3 className="font-medium truncate">{job.name}</h3>
+                          <p className="mt-1 text-xs text-muted-foreground line-clamp-2">
+                            {job.description || 'No description'}
+                          </p>
+                        </div>
+                        <Badge className={getJobStatusTone(job)}>{job.enabled ? 'Enabled' : 'Paused'}</Badge>
                       </div>
 
                       <div className="space-y-2 text-xs text-muted-foreground">