Changed to using the job slug in the urls

apps/webapp/app/models/job.server.ts

@@ -6,13 +6,13 @@ export type { JobRunStatus } from ".prisma/client";
 
 export function getJob({
   userId,
-  id,
-}: Pick<Job, "id"> & {
+  slug,
+}: Pick<Job, "slug"> & {
   userId: User["id"];
 }) {
   //just the very basic info because we already fetched it for the Jobs list
   return prisma.job.findFirst({
     select: { id: true, title: true },
-    where: { id, organization: { members: { some: { userId } } } },
+    where: { slug, organization: { members: { some: { userId } } } },
   });
 }

apps/webapp/app/presenters/RunListPresenter.server.ts

@@ -6,7 +6,7 @@ export type Direction = z.infer<typeof DirectionSchema>;
 
 type RunListOptions = {
   userId: string;
-  jobId: string;
+  jobSlug: string;
   direction?: Direction;
   cursor?: string;
 };
@@ -24,7 +24,7 @@ export class RunListPresenter {
 
   public async call({
     userId,
-    jobId,
+    jobSlug,
     direction = "forward",
     cursor,
   }: RunListOptions) {
@@ -57,7 +57,9 @@ export class RunListPresenter {
         },
       },
       where: {
-        jobId,
+        job: {
+          slug: jobSlug,
+        },
         organization: { members: { some: { userId } } },
         environment: {
           OR: [

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam._index/route.tsx

@@ -9,9 +9,6 @@ import { Handle } from "~/utils/handle";
 import { ListPagination } from "./ListPagination";
 import { useNavigation } from "@remix-run/react";
 
-//todo defer the run list query
-//todo live show when there are new items in the list
-
 export const DirectionSchema = z.union([
   z.literal("forward"),
   z.literal("backward"),
@@ -35,7 +32,7 @@ export const loader = async ({ request, params }: LoaderArgs) => {
   const presenter = new RunListPresenter();
   const list = await presenter.call({
     userId,
-    jobId: jobParam,
+    jobSlug: jobParam,
     direction: searchParams.direction,
     cursor: searchParams.cursor,
   });

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam.runs.$runParam.stream/route.tsx

@@ -25,6 +25,9 @@ export async function loader({ request, params }: LoaderArgs) {
   if (run.completedAt) {
     return new Response(null, {
       status: 200,
+      headers: {
+        "Content-Type": "text/event-stream",
+      },
     });
   }
 

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam.runs.$runParam/TaskCardSkeleton.tsx

@@ -1,20 +1,24 @@
+import { RunPanel, RunPanelBody, RunPanelHeader } from "./RunCard";
+
 export function TaskCardSkeleton() {
   return (
-    <div className={"flex w-full gap-x-4 bg-midnight-850 p-4 pr-5 "}>
-      <div className="aspect-square h-6 w-6 rounded border border-slate-800 bg-slate-900 p-1.5 md:h-10 md:w-10 lg:h-12 lg:w-12" />
-      <div className="flex w-full">
+    <RunPanel>
+      <RunPanelHeader
+        icon={undefined}
+        title={
+          <div className="h-5 w-36 max-w-full rounded border bg-slate-800" />
+        }
+      />
+      <RunPanelBody>
         <div className="flex w-full flex-col justify-between gap-y-1">
           <div className="flex items-baseline justify-between gap-x-3 pr-3 md:justify-start md:pr-0">
-            <div className="h-5 w-1/4 rounded border border-slate-800 bg-slate-900" />
+            <div className="h-5 w-1/4 rounded border bg-slate-800" />
           </div>
           <div className="flex flex-wrap items-center gap-x-4 gap-y-1">
-            <div className="h-2.5 w-1/2 rounded border border-slate-800 bg-slate-900" />
-          </div>
-          <div className="flex flex-wrap gap-x-4 gap-y-1">
-            <div className="h-1 w-1/5 rounded border border-slate-800 bg-slate-900" />
+            <div className="h-2.5 w-1/2 rounded border bg-slate-800" />
           </div>
         </div>
-      </div>
-    </div>
+      </RunPanelBody>
+    </RunPanel>
   );
 }

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam.runs.$runParam/route.tsx

@@ -92,7 +92,7 @@ export const loader = async ({ request, params }: LoaderArgs) => {
       runEventPath(
         { slug: organizationSlug },
         { slug: projectParam },
-        { id: jobParam },
+        { slug: jobParam },
         { id: runParam },
         run.event.id
       )
@@ -391,7 +391,14 @@ function BlankTasks({
     case "WAITING":
     case "PENDING":
     case "RUNNING":
-      return <TaskCardSkeleton />;
+      return (
+        <div>
+          <Paragraph variant="small" className="mb-4">
+            Waiting for tasks…
+          </Paragraph>
+          <TaskCardSkeleton />
+        </div>
+      );
     default:
       return (
         <Paragraph variant="small">There were no tasks for this run.</Paragraph>

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam/route.tsx

@@ -37,7 +37,7 @@ export const loader = async ({ request, params }: LoaderArgs) => {
 
   const job = await getJob({
     userId,
-    id: jobParam,
+    slug: jobParam,
   });
 
   if (job === null) {

apps/webapp/app/utils/pathBuilder.ts

@@ -5,7 +5,7 @@ import type { Project } from "~/models/project.server";
 
 type OrgForPath = Pick<Organization, "slug">;
 type ProjectForPath = Pick<Project, "slug">;
-type JobForPath = Pick<Job, "id">;
+type JobForPath = Pick<Job, "slug">;
 type RunForPath = Pick<Job, "id">;
 type ApiConnectionClientForPath = Pick<ApiConnectionClient, "id">;
 
@@ -135,7 +135,7 @@ export function jobSettingsPath(
 }
 
 export function jobParam(job: JobForPath) {
-  return job.id;
+  return job.slug;
 }
 
 // Run