Label jobs that have not started as In flight, in the GPU-chart yellow (#141)

## Description

Jobs that have not started yet are easier to read on **Overview**.

- The card's time line reads **In flight since <time>** instead of
"Waiting since".
- Once the job has been sent to a node, the card says **Sent to
<node>**. It used to say "Ran on <node>", which is wrong for a job that
has not run.
- A job that fails or is cancelled before it starts keeps **Sent to
<node>**. The proxy keeps the node on the final event, so the card
decides between "Sent to" and "Ran on" from `startedAt`, not from the
state. `workloadNodeLabel` in `ui/utils/workload-labels.ts` holds that
rule.
- In-flight cards and their connection lines use the GPU chart's yellow
(`#f9b400`). The card corner used the KUI `--color-yellow-500`
(`#d73d00`, an orange), and the lines used `#F5A623`. One `GPU_YELLOW`
constant feeds both the GPU palette and `WORKLOAD_COLOR_MAP`, and the
card passes it to `sheen.css` as `--workload-in-flight-color`, so the
corner and the line cannot drift apart.
- The getting-started guide and the troubleshooting page say a job's
card shows **Sent to** once it has been sent to a node, next to
**Running on** and **Ran on**.

This is the first of three pull requests that make job states accurate.
This one changes copy and color only. The second fixes job identity on
the desktop and event ordering in the broker and proxy. The third makes
In flight and Running reflect engine slots.

## Release intent

<!-- pair-release-intent:v1 -->
### Changelog title
Clearer in-flight jobs

### Changelog body
- Jobs that have not started yet are labeled In flight, and they and
their connection lines use the same yellow as the GPU chart.
- A job's card names the node it was sent to with "Sent to" until the
job starts, including a job that fails or is cancelled before it starts,
instead of "Ran on".

### Bumps
- services: patch
- nvpair-cluster-manager: none
- nvpair-engine-manager: none
- nvpair-errors: none
- nvpair-job-scheduler: none
- nvpair-manual-nodes: none
- nvpair-node-info: none
- nvpair-node-scanner: none
- nvpair-node-settings: none
- nvpair-proxy: none
- nvpair-tui: none
- nvpair-ui-broker: none
- nvpair-workload-manager: none
<!-- /pair-release-intent:v1 -->

`services` is a patch for the user-facing note; no service binary
changes, so every component is `none`.

## Scope

Included: the job card's copy and the in-flight color.

Unchanged:
- **The state itself.** The wire and internal value is still `queued`:
the JSON-RPC payloads, `WorkloadState`, the `workload-card-queued`
class, the Go services, and the specs.
- **When a job counts as in flight.** A non-streaming job still stays in
flight until its response completes. The third pull request changes
that.
- **The terminal UI,** which still prints `queued` in its STATE column.
- **The hidden `workload-badge` bar** on the card, which still gets a
color but is never displayed.

The getting-started screenshots need no update: neither shows an
in-flight card.

## Validation

From `desktop/`, all passing:
- `npm run typecheck`
- `npm run lint`
- `npm run dead-code:check`
- `npm run test:unit` (238 passed, 2 skipped)
- `npm run service-contracts:check`

`node scripts/spdx-headers.mjs` from the repository root also passes.

`tests/modular/workload-card-labels.test.ts` covers the node label for
every state, with and without `startedAt`. It also checks that every
`WORKLOAD_COLOR_MAP` value is six-digit hex and that the in-flight color
is in the GPU palette.

Still to do: run the Inference Demo and confirm that an in-flight card
shows a yellow corner and "In flight since <time>", that its connection
line is yellow, and that the card reads "Sent to <node>" once the job is
dispatched, then "Running on <node>", then "Ran on <node>".

## Risk

Display only: no backend, IPC, or payload change. `WORKLOAD_COLOR_MAP`
values must stay six-digit hex because the connection lines append a
two-digit alpha; the new test enforces it.

## Checklist

- [x] I have read the [Contributing
Guidelines](https://github.com/NVIDIA/Personal-AI-Router/blob/main/CONTRIBUTING.md).
- [x] Every commit is signed off (`git commit -s`), certifying the
[Developer Certificate of Origin](https://developercertificate.org/).
- [x] New or existing tests cover the change.
- [x] Relevant documentation is updated.
- [x] I checked the diff, changed filenames, and commit messages for
credentials, private data, internal URLs, internal issue identifiers,
and generated artifacts.
- [x] I recorded the validation commands and results above.
- [x] I declared version bumps in the release-intent block above.
`services/versions.json` is written by automation — do not edit it by
hand.

---------

Signed-off-by: Chris Kelsey <ckelsey@nvidia.com>

Author: ckelseynv

desktop/src/ui/components/Workloads/WorkloadItemCard.tsx

@@ -1,13 +1,15 @@
 // SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import { useMemo, memo } from 'react'
+import { useMemo, memo, type CSSProperties } from 'react'
 import { Card, Flex, Stack, Text } from '@nvidia/foundations-react-core'
 import type { Workload } from '@/shared/types/workloads'
 import { workloadExecutionNodeId } from '@/shared/utils/workloads'
 import { useNodesStore } from '@/ui/stores/nodes.store'
+import { WORKLOAD_COLOR_MAP } from '@/ui/constants/colors'
 import { formatModelDisplayName } from '@/ui/utils/format-model-display-name'
 import { getWorkloadColorBar } from '@/ui/utils/colors'
+import { workloadNodeLabel } from '@/ui/utils/workload-labels'
 import EngineIcon from '@/ui/components/EngineIcon'
 
 const formatDate = (timestamp: number) => {
@@ -40,10 +42,17 @@ const formatDate = (timestamp: number) => {
     }
 }
 
+// sheen.css paints the in-flight card's corner from this property, so the card
+// and its connection line share one color.
+const CARD_STYLE: CSSProperties & { '--workload-in-flight-color': string } = {
+    direction: 'ltr',
+    '--workload-in-flight-color': WORKLOAD_COLOR_MAP.yellow
+}
+
 function WorkloadItemCard({ workload }: { workload: Workload }) {
     // Subscribe to only this workload's execution node name. Selecting the whole
     // nodes array re-rendered every job card on any node/metrics update.
-    const ranOnNodeText = useNodesStore(state => {
+    const executionNodeText = useNodesStore(state => {
         const executionNodeId = workloadExecutionNodeId(workload)
         if (!executionNodeId) return ''
         return state.nodes.get(executionNodeId)?.name ?? ''
@@ -54,7 +63,6 @@ function WorkloadItemCard({ workload }: { workload: Workload }) {
         if (!workload.originatedFrom) return ''
         return state.nodes.get(workload.originatedFrom)?.name ?? ''
     })
-    const ranOnLabel = workload.state === 'running' ? 'Running on' : 'Ran on'
     const barColor = useMemo(() => getWorkloadColorBar(workload.state), [workload.state])
 
     const subtext = useMemo(() => {
@@ -65,10 +73,11 @@ function WorkloadItemCard({ workload }: { workload: Workload }) {
         switch (state) {
             case 'queued':
                 value = workload.createdAt
-                // Not "Queued at": PAIR runs no queue of its own, and the
-                // elapsed wait is the useful part for a job that has been
-                // accepted but is not generating yet.
-                label = 'Waiting since'
+                // "In flight", not "Queued": PAIR runs no queue of its own, and
+                // a job that has not started may be waiting for a node, waiting
+                // in an engine's queue, or already being processed where PAIR
+                // cannot see it.
+                label = 'In flight since'
                 break
             case 'running':
                 value = workload.startedAt ?? 0
@@ -120,7 +129,7 @@ function WorkloadItemCard({ workload }: { workload: Workload }) {
         <Card
             className={className}
             density="compact"
-            style={{ direction: 'ltr' }}
+            style={CARD_STYLE}
             data-workload-id={workload.id}
             data-workload-origin={workload.originatedFrom ?? ''}
             attributes={{ CardContent: { className: 'workload-card-content' } }}
@@ -134,7 +143,7 @@ function WorkloadItemCard({ workload }: { workload: Workload }) {
                     </Text>
                 </Flex>
 
-                {(requestedFromNodeText || ranOnNodeText) && (
+                {(requestedFromNodeText || executionNodeText) && (
                     <Stack gap="0" className="mt-1">
                         {requestedFromNodeText && (
                             <Flex align="center" wrap="wrap" gap="1">
@@ -146,13 +155,13 @@ function WorkloadItemCard({ workload }: { workload: Workload }) {
                                 </Text>
                             </Flex>
                         )}
-                        {ranOnNodeText && (
+                        {executionNodeText && (
                             <Flex align="center" wrap="wrap" gap="1">
                                 <Text kind="body/regular/sm" className="text-subtle-color">
-                                    {ranOnLabel}
+                                    {workloadNodeLabel(workload)}
                                 </Text>
                                 <Text kind="body/regular/sm" className="text-subtle-color">
-                                    {ranOnNodeText}
+                                    {executionNodeText}
                                 </Text>
                             </Flex>
                         )}

desktop/src/ui/constants/colors.ts

@@ -3,9 +3,13 @@
 
 import type { BadgeColor } from '@/ui/types/types'
 
-// Color mapping for CSS
-export const WORKLOAD_COLOR_MAP: Record<BadgeColor, string> = {
-    yellow: '#F5A623',
+// The GPU chart's yellow, which in-flight jobs also use.
+const GPU_YELLOW = '#f9b400'
+
+// Color mapping for CSS. Values must stay six-digit hex: connection lines
+// append a two-digit alpha.
+export const WORKLOAD_COLOR_MAP: Record<BadgeColor, `#${string}`> = {
+    yellow: GPU_YELLOW,
     blue: '#4A90E2',
     green: '#7ED321',
     gray: '#9B9B9B',
@@ -44,7 +48,7 @@ export const CHART_COLORS = {
  */
 export const GPU_COLOR_PALETTE = [
     '#0074df', // GPU3 - Dark Blue
-    '#f9b400', // GPU2 - Yellow
+    GPU_YELLOW, // GPU2 - Yellow
     '#8689ff', // GPU1 - Blue
     '#ff8181' // GPU4 - Red
 ] as const

desktop/src/ui/styles/sheen.css

@@ -144,11 +144,12 @@
     );
 }
 
+/* WorkloadItemCard sets --workload-in-flight-color from WORKLOAD_COLOR_MAP. */
 .pair-paper.workload-card-queued {
     background-image: radial-gradient(
         143% 109% at 0% 73%,
         transparent 62%,
-        var(--color-yellow-500) 105%
+        var(--workload-in-flight-color) 105%
     );
 }
 

desktop/src/ui/utils/workload-labels.ts

@@ -0,0 +1,14 @@
+// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Workload } from '@/shared/types/workloads'
+
+/**
+ * The verb before a job card's execution node. A job that ends before it
+ * starts keeps the node it was sent to, so whether it ran is decided by
+ * `startedAt`, not by its state.
+ */
+export function workloadNodeLabel(workload: Pick<Workload, 'state' | 'startedAt'>): string {
+    if (workload.state === 'running') return 'Running on'
+    return workload.startedAt === null ? 'Sent to' : 'Ran on'
+}

desktop/tests/modular/workload-card-labels.test.ts

@@ -0,0 +1,53 @@
+// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { describe, expect, it } from 'vitest'
+import { GPU_COLOR_PALETTE, WORKLOAD_COLOR_MAP } from '@/ui/constants/colors'
+import { workloadNodeLabel } from '@/ui/utils/workload-labels'
+
+const STARTED_AT = 1_700_000_000_000
+
+describe('workloadNodeLabel', () => {
+    it('says Sent to for an in-flight job', () => {
+        expect(workloadNodeLabel({ state: 'queued', startedAt: null })).toBe('Sent to')
+    })
+
+    it('says Running on for a running job', () => {
+        expect(workloadNodeLabel({ state: 'running', startedAt: STARTED_AT })).toBe('Running on')
+    })
+
+    it('says Ran on for a completed job', () => {
+        expect(workloadNodeLabel({ state: 'completed', startedAt: STARTED_AT })).toBe('Ran on')
+    })
+
+    // The proxy keeps scheduledOn on the terminal event, so a job that ends
+    // before it starts still names the node it was sent to.
+    it('says Sent to for a job that failed before it started', () => {
+        expect(workloadNodeLabel({ state: 'failed', startedAt: null })).toBe('Sent to')
+    })
+
+    it('says Sent to for a job that was cancelled before it started', () => {
+        expect(workloadNodeLabel({ state: 'cancelled', startedAt: null })).toBe('Sent to')
+    })
+
+    it('says Ran on for a job that failed after it started', () => {
+        expect(workloadNodeLabel({ state: 'failed', startedAt: STARTED_AT })).toBe('Ran on')
+    })
+
+    it('says Ran on for a job that was cancelled after it started', () => {
+        expect(workloadNodeLabel({ state: 'cancelled', startedAt: STARTED_AT })).toBe('Ran on')
+    })
+})
+
+describe('WORKLOAD_COLOR_MAP', () => {
+    // Connection lines append a two-digit alpha to these values.
+    it('holds only six-digit hex colors', () => {
+        for (const [name, color] of Object.entries(WORKLOAD_COLOR_MAP)) {
+            expect(color, name).toMatch(/^#[0-9a-f]{6}$/i)
+        }
+    })
+
+    it('colors in-flight jobs with the GPU chart yellow', () => {
+        expect(GPU_COLOR_PALETTE).toContain(WORKLOAD_COLOR_MAP.yellow)
+    })
+})

docs/getting-started.mdx

@@ -265,8 +265,9 @@ curl -N <PAIR_BASE_URL>/api/chat \
 ```
 
 Then confirm the request was routed: open **Overview**, use the **Jobs** filter in
-the left column, and read **Ran on** or **Running on** on the job card to identify
-the serving node.
+the left column, and read **Running on** or **Ran on** on the job card to identify
+the serving node. Once a job has been sent to a node, its card shows **Sent to**
+until the job starts, and keeps it if the job ends without starting.
 
 ![A job card under the Jobs filter naming the node that served the request.](assets/onboarding/getting-started/09-job-served-by-node.png)
 
@@ -487,7 +488,8 @@ A reply alone does not prove routing. To identify the serving node:
 
 1. Open **Overview**.
 2. Use the **Jobs** filter in the left column.
-3. Read **Ran on** or **Running on** on the job card.
+3. Read **Running on** or **Ran on** on the job card. Once a job has been sent
+   to a node, its card shows **Sent to** until the job starts.
 
 ### 5. Verify Cluster Routing
 

docs/troubleshooting.mdx

@@ -144,8 +144,10 @@ Routing confirmation happens on **Overview**:
 
 1. Use the **Jobs** filter in the left column to show active, completed, or
    failed requests.
-2. Open a job card and read **Ran on** or **Running on** to see which node
-   served the request.
+2. Open a job card and read **Running on** or **Ran on** to see which node
+   served the request. Once a job has been sent to a node, its card shows
+   **Sent to** until the job starts, and keeps it if the job ends without
+   starting.
 
 Send several independent requests to observe multi-node routing. One request
 runs on one selected node.