Platform detail

Live

Six fixtures across UXV domains (UAV / UGV / UUV / USV), then a lost-link state and a strike platform demonstrating the indicator alphabet. Each section renders only when its props are passed.

Anatomy

Header + three labelled sections (Comms, Telemetry, Mission), plus an optional last- contact footer. Each row is a label + value pair in mono. The header carries the Ember platform marker; rows stay neutral except for semantic-coded link / battery values.

Indicators

Four pack-internal primitives extend the indicator alphabet beyond the built-in signal / battery / heading. Pass them through extras[].value so payload, endurance, sensor, and safety-critical rows read as instruments rather than flat text. Imported from @/components/rc3/indicators.

Pick the indicator that matches the data's shape — pips for discrete countable quantities, capacity bar for continuous percentages, dots for ternary state, semantic text for binary safety-critical state. Don't reach for chrome decoration (corner brackets, bordered pills, glow) to signal “tactical”; the instrument reads tactical because the encoding is honest.

Props

Types

interface MissionStep {
  current: number;   // current step, 1-indexed
  total: number;     // total steps
  label?: string;    // optional step label, e.g. "WPT-04"
}

interface PlatformDetailExtra {
  section?: string;     // section header (consecutive same-section entries group)
  label: string;        // row label
  value: ReactNode;     // row value
}

Wiring

Read-only. Pass the active platform's deep state. Compose to the right of platform roster — roster passes the selected id up to the consumer's state machine, the consumer looks up the platform's full record and passes the fields to this organism. Pass `extras` for domain-specific rows (payload, sensors, fuel) that the base props don't cover.

import {
  CapacityBar,
  PipCount,
  StateDot,
  StateText,
} from "@/components/rc3/indicators";

const active = fleet.find((p) => p.id === activeId);

<div className="flex gap-4">
  <PlatformRoster
    platforms={fleet.map(toRosterEntry)}
    activeId={activeId}
    onSelect={setActiveId}
  />
  {active && (
    <PlatformDetail
      platform={active.id}
      klass={active.klass}
      domain={active.domain}
      link={active.link}
      signal={active.signal}
      battery={active.battery}
      autonomy={active.autonomy}
      position={active.coords}
      heading={active.heading}
      speed={active.speed}
      speedUnit={active.speedUnit}
      vertical={active.altitude}
      verticalUnit={active.altitudeUnit}
      verticalRef={active.altitudeRef}
      mission={active.mission}
      operator={active.operator}
      lastContact={active.lastContact}
      extras={[
        {
          section: "Payload",
          label: "Munition",
          value: <PipCount filled={4} total={4} suffix="AGM-114" />,
        },
        {
          section: "Payload",
          label: "Status",
          value: <StateText tone="danger">ARMED</StateText>,
        },
        {
          section: "Endurance",
          label: "Fuel",
          value: <CapacityBar pct={62} suffix="62%" />,
        },
        {
          section: "Sensors",
          label: "EO/IR",
          value: <StateDot state="active">Tracking</StateDot>,
        },
      ]}
      fillHeight
    />
  )}
</div>

Signal bars, battery gauge, and heading dial appear automatically next to their text values when signal, battery, and heading are passed — no separate prop. Text stays as the primary read; the indicators are a glanceable secondary read.

Set fillHeight when composing inside a height-constrained container (e.g. a sidebar column with flex-1 min-h-0): the card grows to fill the available height and the body section scrolls within the frame, so a card with many extras doesn't push the parent layout. Without it the card stays intrinsic-height.

Behavioural rule

Accessibility

JavaFX

Ships in the PRIZM JavaFX library for thick-client C3 apps as Rc3PlatformDetail (extends VBox). Run the gallery to see it natively.

import design.prizm.fx.rc3.Rc3PlatformDetail;

Rc3PlatformDetail()
Rc3PlatformDetail(String platform)

Master-detail companion to Rc3PlatformRoster; honours invariant 3. The Rc3Indicators alphabet (pipCount / capacityBar / stateDot / stateText) composes into extra values so payload / sensor state reads as instruments. Mirrors components/rc3/platform-detail.tsx.