Agents

EquipmentBadge

A small chip showing one piece of a Digital Worker's desk equipment as an emoji, with or without its label.

Usage#

Use it for the equipment row on worker cards in the Crew OS control centre (icons only there) and in room or desk views.

What you provide: type (required: screen, phone, desk, whiteboard, camera, printer, coffee, couch, server), color (optional 6-digit hex, the worker's colour), showLabel (default true). Labels and emoji come from EQUIPMENT_CATALOG: Monitor 🖥️, Phone 📞, Desk 🪑, Whiteboard 📋, Camera 📷, Printer 🖨️, Coffee Machine ☕, Couch 🛋️, Server Rack 🖧.

Anatomy: inline-flex, 4px gap, px-2 py-0.5, rounded-md, 12px medium text, 1px border. With color the text takes the colour, the background alpha 10 (about 6%) and the border alpha 30 (about 19%); without it the chip keeps the default border and text colours.

Behaviour: static.

Don't rely on the emoji alone for meaning when showLabel is false (add a tooltip or a visible list elsewhere), or pass non-hex colours.

Facts#

ProductCrew OS

FamilyAgents

Globalwindow.DigitalCrew.EquipmentBadge

Sourcedigitalcrew-orchestrator: components/dc/index.ts

Import in the appimport { EquipmentBadge } from "@/components/dc";

API#

TypeScript declarations emitted from components/dc/index.ts.

interface EquipmentBadgeProps {
    type: EquipmentType;
    color?: string;
    showLabel?: boolean;
}
export declare function EquipmentBadge({ type, color, showLabel }: EquipmentBadgeProps): any;

Code#

The preview above, as plain React.createElement against window.DigitalCrew with realistic data. Copy it into a page that loads the bundle.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
  function tok(name) { return getComputedStyle(document.documentElement).getPropertyValue("--dc-" + name).trim(); }
  var all = ["screen", "phone", "desk", "whiteboard", "camera", "printer", "coffee", "couch", "server"];
  function App() {
    return h("div", { className: "grid gap-3" },
      h("div", { className: "flex flex-wrap gap-1" }, all.map(function (t) { return h(DC.EquipmentBadge, { key: t, type: t, color: tok("andre") }); })),
      h("div", { className: "flex flex-wrap items-center gap-1" },
        h("span", { className: "text-muted-foreground mr-2 text-xs" }, "Sophie's desk, icons only"),
        ["screen", "phone", "desk", "camera"].map(function (t) { return h(DC.EquipmentBadge, { key: t, type: t, color: tok("sophie"), showLabel: false }); })),
      h("div", { className: "flex flex-wrap items-center gap-1" },
        h("span", { className: "text-muted-foreground mr-2 text-xs" }, "No colour"),
        ["whiteboard", "coffee"].map(function (t) { return h(DC.EquipmentBadge, { key: t, type: t }); })));
  }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>