Robot mission queue

Shows supplied mission order and recorded step states, with keyboard reorder requests and explicit host actions separate from pending and confirmed records.

Preview

Inspection mission

Inspect station
Recorded: Not started
Return to dock
Recorded: Not started

Reordering and actions request host changes. Reported mission state remains supplied by the host.

In action

Inspection mission

Inspect station
Recorded: Not started
Station 4, supplied inspection plan
Records a local planning review without executing a mission
Return to dock
Recorded: Not started
Dock A

Reordering and actions request host changes. Reported mission state remains supplied by the host.

When to use

Use it for

A caller-owned ordered step list, explicit recorded statuses, and only those actions the host makes available.
onOrderChange receives step identifiers in the proposed order. The host supplies the resulting records; the queue never rewrites status on a reorder request.
onAction receives a step identifier and supplied action identifier. pending and confirmedLabel remain separate host records.
Pending steps lock their own actions and adjacent reorder controls. readOnly keeps all request controls disabled.
Named hidden inputs submit the supplied step identifiers in order; invalid duplicate step or action identifiers suppress ambiguous controls.

Not for

Assuming a request starts, cancels, schedules, or confirms physical execution.
Using display order as an execution dependency graph or deriving allowed actions from a status string.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { RobotMissionQueue } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/robot-mission-queue.

2. Vendor the source

npx @noorddev/vlak-cli add robot-mission-queue

The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/robot-mission-queue.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { RobotMissionQueue } from "@noorddev/vlak-react";

<RobotMissionQueue label="Inspection mission" name="mission"
  steps={[{ id: "inspect", label: "Inspect station", status: "Not started", actions: [{ id: "review", label: "Review plan" }] }, { id: "return", label: "Return to dock", status: "Not started" }]}
  onOrderChange={ids => console.log("Requested order", ids)}
  onAction={(stepId, actionId) => console.log("Requested action", stepId, actionId)} />

Props

RobotMissionQueue

A supplied mission order, recorded step states, and explicit host request actions.

Prop	Type	Default	Description
`label`required	`string`
`steps`required	`readonly RobotMissionStep[]`
`onOrderChange`	`(stepIds: readonly string[]) => void`		Proposed step identifiers in order; the host confirms and supplies the resulting records.
`onAction`	`(stepId: string, actionId: string) => void`
`readOnly`	`boolean`	`false`
`description`	`ReactNode`

Also accepts FieldsetHTMLAttributes<HTMLFieldSetElement>.

Keyboard

Keys	Does
`Tab`	Moves through enabled reorder and host-action buttons.
`Enter, Space`	Requests the focused reorder or supplied host action.

Accessibility

The fieldset and legend name the mission, and a native ordered list conveys its supplied order.
Vlak Button actions name both the step number and label. Reorder buttons state their direction and disable at list boundaries.
Recorded status, host confirmation, and request-pending text remain distinct; pending feedback uses a status role.
Action descriptions are connected to the corresponding button, including its recorded status.
The ref and native fieldset attributes reach the root, and read-only ordered records remain available to forms.

Markup

<fieldset class="rs-robot-mission-queue"><legend class="rs-robot-mission-queue-legend">Inspection mission</legend><ol class="rs-robot-mission-queue-list"><li class="rs-robot-mission-queue-step"><div class="rs-robot-mission-queue-head"><p class="rs-robot-mission-queue-title">Inspect station</p><p class="rs-robot-mission-queue-status">Recorded: Not started</p></div><div class="rs-robot-mission-queue-actions"><button class="rs-btn-ghost rs-robot-mission-queue-button" type="button" aria-label="Review plan: step 1, Inspect station">Review plan</button></div></li></ol><p class="rs-robot-mission-queue-copy">Reordering and actions request host changes. Reported mission state remains supplied by the host.</p></fieldset>

Classes

.rs-robot-mission-queue.rs-robot-mission-queue-legend.rs-robot-mission-queue-list.rs-robot-mission-queue-step.rs-robot-mission-queue-head.rs-robot-mission-queue-title.rs-robot-mission-queue-copy.rs-robot-mission-queue-status.rs-robot-mission-queue-actions.rs-robot-mission-queue-button

Depends on

/button