v0.16.0 - Complete Flow: Job Click → Job Details

[rogermt]

Complete Flow: Job Click → Job Details

---

🖥️ Frontend Files

┌───┬──────────────────────────────────────────┬────────────────────────────────────────────────────────┐
│ # │ File                                     │ Purpose                                                │
├───┼──────────────────────────────────────────┼────────────────────────────────────────────────────────┤
│ 1 │ web-ui/src/components/JobList.tsx        │ Renders jobs list, onClick={() => onJobSelect(job)}    │
│ 2 │ web-ui/src/App.tsx:616                   │ onJobSelect={setSelectedJob} - sets selected job state │
│ 3 │ web-ui/src/App.tsx:498-511               │ Polling effect - calls getJob() every 1s               │
│ 4 │ web-ui/src/api/client.ts:88-94           │ getJob(jobId) - fetches job details                    │
│ 5 │ web-ui/src/components/JobStatus.tsx      │ Displays job status and progress                       │
│ 6 │ web-ui/src/hooks/useJobProgress.ts       │ WebSocket hook for real-time updates                   │
│ 7 │ web-ui/src/components/ResultsPanel.tsx   │ Renders job summary                                    │
│ 8 │ web-ui/src/components/ArtifactViewer.tsx │ Paginated results viewer                               │
└───┴──────────────────────────────────────────┴────────────────────────────────────────────────────────┘

---

🛠️ Backend Files (in order)

┌───┬──────────────────────────────────────────┬─────────────────────────────────────────────┐
│ # │ File                                     │ Purpose                                     │
├───┼──────────────────────────────────────────┼─────────────────────────────────────────────┤
│ 1 │ server/app/api_routes/routes/jobs.py:222 │ GET /v1/jobs/{job_id} endpoint              │
│ 2 │ server/app/api_routes/routes/jobs.py:399 │ GET /v1/jobs/{job_id}/result lazy load      │
│ 3 │ server/app/api_routes/routes/jobs.py:477 │ GET /v1/jobs/{job_id}/result/page paginated │
│ 4 │ server/app/models/job.py                 │ Job SQLAlchemy model                        │
│ 5 │ server/app/schemas/job.py                │ Pydantic response schemas                   │
│ 6 │ server/app/realtime/job_progress_router.py │ WebSocket /v1/ws/jobs/{job_id}            │
└───┴──────────────────────────────────────────┴─────────────────────────────────────────────┘

Flow

✦ User clicks job in JobList
↓
App.tsx setSelectedJob(job)
↓
Polling effect triggers getJob(id) every 1s
↓
GET /v1/jobs/{job_id} → jobs.py:get_job()
↓
DB query → JobResultsResponse
↓
JobStatus.tsx displays status
↓
ResultsPanel.tsx displays results

[rogermt]

user selcts job from job list

h0ttps://forgetunnel.loca.lt/v1/jobs?limit=10&skip=0

response
{
"jobs": [
{
"job_id": "e440aa89-c3ab-4a4f-8364-0a75145c7950",
"status": "completed",
"plugin": "yolo-tracker",
"created_at": "2026-03-22T11:56:47.119605",
"completed_at": "2026-03-22T11:59:13.700223",
"result_url": "/v1/jobs/e440aa89-c3ab-4a4f-8364-0a75145c7950/result?mode=stream",
"summary": {
"frame_count": 449,
"detection_count": 0,
"classes": []
},
"error": null,
"progress": 100
}
],
"count": 1
}

then
equest URL
https://forgetunnel.loca.lt/v1/jobs/e440aa89-c3ab-4a4f-8364-0a75145c7950?_t=1774185095143
Request Method
GET
Status Code
502 Bad Gateway
Referrer Policy
strict-origin-when-cross-origin
content-type
text/plain
date
Sun, 22 Mar 2026 13:11:46 GMT
keep-alive
timeout=5
transfer-encoding
chunked
accept
/
accept-encoding
gzip, deflate, br, zstd
accept-language
en-GB,en-US;q=0.9,en;q=0.8,zh-TW;q=0.7,zh-CN;q=0.6,zh;q=0.5,ja;q=0.4
cache-control
no-cache
connection
keep-alive
content-type
application/json
dnt
1
host
forgetunnel.loca.lt
origin
http://localhost:3000
pragma
no-cache
referer
http://localhost:3000/
sec-ch-ua
"Chromium";v="146", "Not-A.Brand";v="24", "Google Chrome";v="146"
sec-ch-ua-mobile
?0
sec-ch-ua-platform
"Windows"
sec-fetch-dest
empty
sec-fetch-mode
cors
sec-fetch-site
cross-site
user-agent
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36

no response

Request URL
https://forgetunnel.loca.lt/v1/jobs/e440aa89-c3ab-4a4f-8364-0a75145c7950?_t=1774185095145
Request Method
GET
Status Code
200 OK
Remote Address
193.34.76.44:443
Referrer Policy
strict-origin-when-cross-origin
access-control-allow-credentials
true
access-control-allow-origin
*
content-length
529
content-type
application/json
date
Sun, 22 Mar 2026 13:11:35 GMT
keep-alive
timeout=5
server
uvicorn
vary
Origin
x-localtunnel-agent-ips
["34.138.215.152"]
x-robots-tag
noindex, nofollow, noarchive, nosnippet, nositelinksearchbox, noimageindex
accept
/
accept-encoding
gzip, deflate, br, zstd
accept-language
en-GB,en-US;q=0.9,en;q=0.8,zh-TW;q=0.7,zh-CN;q=0.6,zh;q=0.5,ja;q=0.4
cache-control
no-cache
connection
keep-alive
content-type
application/json
dnt
1
host
forgetunnel.loca.lt
origin
http://localhost:3000
pragma
no-cache
referer
http://localhost:3000/
sec-ch-ua
"Chromium";v="146", "Not-A.Brand";v="24", "Google Chrome";v="146"
sec-ch-ua-mobile
?0
sec-ch-ua-platform
"Windows"
sec-fetch-dest
empty
sec-fetch-mode
cors
sec-fetch-site
cross-site
user-agent
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36
with response
{
"job_id": "e440aa89-c3ab-4a4f-8364-0a75145c7950",
"status": "completed",
"plugin_id": "yolo-tracker",
"result_url": "/v1/jobs/e440aa89-c3ab-4a4f-8364-0a75145c7950/result?mode=stream",
"summary": {
"frame_count": 449,
"detection_count": 0,
"classes": []
},
"tool": "video_player_tracking",
"tools": [
"video_player_tracking",
"video_ball_detection"
],
"job_type": "video_multi",
"error_message": null,
"progress": 100,
"current_tool": null,
"tools_total": 2,
"tools_completed": 2,
"created_at": "2026-03-22T11:56:47.119605",
"updated_at": "2026-03-22T11:59:13.700223"
}

next

Request URL
https://forgetunnel.loca.lt/v1/jobs/e440aa89-c3ab-4a4f-8364-0a75145c7950/result/page?offset=0&limit=200
Request Method
GET
Status Code
502 Bad Gateway
Referrer Policy
strict-origin-when-cross-origin

next
Request URL
https://forgetunnel.loca.lt/v1/jobs/e440aa89-c3ab-4a4f-8364-0a75145c7950?_t=1774185095610
Request Method
GET
Status Code
200 OK
Remote Address
193.34.76.44:443
Referrer Policy
strict-origin-when-cross-origin
response
{
"job_id": "e440aa89-c3ab-4a4f-8364-0a75145c7950",
"status": "completed",
"plugin_id": "yolo-tracker",
"result_url": "/v1/jobs/e440aa89-c3ab-4a4f-8364-0a75145c7950/result?mode=stream",
"summary": {
"frame_count": 449,
"detection_count": 0,
"classes": []
},
"tool": "video_player_tracking",
"tools": [
"video_player_tracking",
"video_ball_detection"
],
"job_type": "video_multi",
"error_message": null,
"progress": 100,
"current_tool": null,
"tools_total": 2,
"tools_completed": 2,
"created_at": "2026-03-22T11:56:47.119605",
"updated_at": "2026-03-22T11:59:13.700223"
}

next
Request URL
https://forgetunnel.loca.lt/v1/jobs/e440aa89-c3ab-4a4f-8364-0a75145c7950/result/page?offset=0&limit=200
Request Method
GET
Status Code
200 OK
Remote Address
193.34.76.44:443
Referrer Policy
strict-origin-when-cross-origin
response

"offset": 0,
"limit": 200,
"total": 449,
"frames": [
    {
        "frame_idx": 0,
        "video_player_tracking": {
            "frame_index": 0,
            "detections": {
                "tracked_objects": [
                    {
                        "track_id": 1,
                        "class_id": 2,
                        "xyxy": [
                            548.4329833984375,
                            388.4827880859375,
                            575.5069580078125,
                            440.85955810546875
                        ],
                        "center": [
                            561.969970703125,
                            414.6711730957031
                        ]
                    },
                    {
                        "track_id": 2,
                        "class_id": 2,
                        "xyxy": [
                            668.4775390625,
                            483.9709777832031,
                            696.111328125,
                            538.502685546875
                        ],
                        "center": [
                            682.29443359375,
                            511.23681640625
                        ]
                    },
                    {
                        "track_id": 3,
                        "class_id": 2,
                        "xyxy": [
                            1065.01171875,
                            216.05331420898438,
                            1094.37060546875,
                            256.3343505859375
                        ],
                        "center": [
                            1079.691162109375,
                            236.19383239746094
                        ]
                    },
                    {
                        "track_id": 4,
                        "class_id": 2,
                        "xyxy": [
                            1062.025390625,
                            398.60943603515625,
                            1101.38232421875,
                            445.45220947265625
                        ],
                        "center": [
                            1081.703857421875,
                            422.03082275390625
                        ]
                    },
                    {
                        "track_id": 5,
                        "class_id": 2,
                        "xyxy": [
                            824.6934814453125,
                            287.8988037109375,
                            856.9310302734375,
                            336.4979248046875
                        ],
                        "center": [
                            840.812255859375,
                            312.1983642578125
                        ]
                    },
                    {
                        "track_id": 6,
                        "class_id": 2,
                        "xyxy": [
                            270.27642822265625,
                            311.74615478515625,
                            290.32550048828125,
                            362.35491943359375
                        ],
                        "center": [
                            280.30096435546875,
                            337.050537109375
                        ]
                    },
                    {
                        "track_id": 7,
                        "class_id": 2,
                        "xyxy": [
                            577.0958251953125,
                            333.10791015625,
                            607.7581787109375,
                            382.1663818359375
                        ],
                        "center": [
                            592.427001953125,
                            357.63714599609375
                        ]
                    },
                    {
                        "track_id": 8,
                        "class_id": 2,
                        "xyxy": [
                            127.37098693847656,
                            232.09103393554688,
                            144.3157196044922,
                            276.8793029785156
                        ],
                        "center": [
                            135.84335327148438,
                            254.48516845703125
                        ]
                    },
                    {
                        "track_id": 9,
                        "class_id": 2,
                        "xyxy": [
                            583.8217163085938,
                            236.4513702392578,
                            607.6723022460938,
                            279.48138427734375
                        ],
                        "center": [
                            595.7470092773438,
                            257.96636962890625
                        ]
                    },
                    {
                        "track_id": 10,
                        "class_id": 2,
                        "xyxy": [
                            236.48284912109375,
                            335.3328857421875,
                            254.12890625,
                            384.1748046875
                        ],
                        "center": [
                            245.30587768554688,
                            359.75384521484375
                        ]
                    },
                    {
                        "track_id": 11,
                        "class_id": 2,
                        "xyxy": [
                            44.51732635498047,
                            383.1563720703125,
                            65.2127456665039,
                            432.7894287109375
                        ],
                        "center": [
                            54.86503601074219,
                            407.972900390625
                        ]
                    },
                    {
                        "track_id": 12,
                        "class_id": 2,
                        "xyxy": [
                            1083.644775390625,
                            303.9503173828125,
                            1110.235107421875,
                            351.3203125
                        ],
                        "center": [
                            1096.93994140625,
                            327.63531494140625
                        ]
                    },
                    {
                        "track_id": 13,
                        "class_id": 2,
                        "xyxy": [
                            313.0872497558594,
                            268.3066711425781,
                            330.1491394042969,
                            309.1896667480469
                        ],
                        "center": [
                            321.6181945800781,
                            288.7481689453125
                        ]
                    },
                    {
                        "track_id": 14,
                        "class_id": 2,
                        "xyxy": [
                            1113.070556640625,
                            284.84942626953125,
                            1140.971435546875,
                            330.56134033203125
                        ],
                        "center": [
                            1127.02099609375,
                            307.70538330078125
                        ]
                    },
                    {
                        "track_id": 15,
                        "class_id": 2,
                        "xyxy": [
                            605.554443359375,
                            103.29057312011719,
                            625.743896484375,
                            142.28138732910156
                        ],
                        "center": [
                            615.649169921875,
                            122.78598022460938
                        ]
                    },
                    {
                        "track_id": 16,
                        "class_id": 2,
                        "xyxy": [
                            780.9368896484375,
                            107.07008361816406,
                            794.4908447265625,
                            143.44764709472656
                        ],
                        "center": [
                            787.7138671875,
                            125.25886535644531
                        ]
                    },
                    {
                        "track_id": 17,
                        "class_id": 2,
                        "xyxy": [
                            396.86944580078125,
                            104.2353515625,
                            409.08319091796875,
                            141.52365112304688
                        ],
                        "center": [
                            402.976318359375,
                            122.87950134277344
                        ]
                    },
                    {
                        "track_id": 18,
                        "class_id": 2,
                        "xyxy": [
                            315.56121826171875,
                            202.91250610351562,
                            335.40191650390625,
                            240.97686767578125
                        ],
                        "center": [
                            325.4815673828125,
                            221.94468688964844
                        ]
                    },
                    {
                        "track_id": 19,
                        "class_id": 2,
                        "xyxy": [
                            741.659912109375,
                            202.4625244140625,
                            758.02783203125,
                            248.44793701171875
                        ],
                        "center": [
                            749.8438720703125,
                            225.45523071289062
                        ]
                    },
                    {
                        "track_id": 20,
                        "class_id": 0,
                        "xyxy": [
                            1092.38134765625,
                            439.2234802246094,
                            1102.6962890625,
                            449.1188659667969
                        ],
                        "center": [
                            1097.538818359375,
                            444.1711730957031
                        ]
                    },
                    {
                        "track_id": 21,
                        "class_id": 2,
                        "xyxy": [
                            451.5355529785156,
                            249.0704345703125,
                            470.5884704589844,
                            289.158447265625
                        ],
                        "center": [
                            461.06201171875,
                            269.11444091796875
                        ]
                    },
                    {
                        "track_id": 22,
                        "class_id": 2,
                        "xyxy": [
                            893.3648681640625,
                            71.6260986328125,
                            911.6014404296875,
                            104.6632080078125
                        ],
                        "center": [
                            902.483154296875,
                            88.1446533203125
                        ]
                    },
                    {
                        "track_id": 23,
                        "class_id": 2,
                        "xyxy": [
                            581.16796875,
                            219.13558959960938,
                            599.003173828125,
                            257.030426Request URL

https://forgetunnel.loca.lt/v1/jobs/e440aa89-c3ab-4a4f-8364-0a75145c7950?_t=1774185150983
Request Method
GET
Status Code
200 OK
Remote Address
193.34.76.44:443
Referrer Policy
strict-origin-when-cross-origin
....................
rsponse
{
"job_id": "e440aa89-c3ab-4a4f-8364-0a75145c7950",
"status": "completed",
"plugin_id": "yolo-tracker",
"result_url": "/v1/jobs/e440aa89-c3ab-4a4f-8364-0a75145c7950/result?mode=stream",
"summary": {
"frame_count": 449,
"detection_count": 0,
"classes": []
},
"tool": "video_player_tracking",
"tools": [
"video_player_tracking",
"video_ball_detection"
],
"job_type": "video_multi",
"error_message": null,
"progress": 100,
"current_tool": null,
"tools_total": 2,
"tools_completed": 2,
"created_at": "2026-03-22T11:56:47.119605",
"updated_at": "2026-03-22T11:59:13.700223"
}