@lumea/agent-teams

Tier 1 pure-UI agent teams package for React. Team management, member lists, and interactive org charts -- all adapter-driven with zero SDK or agent framework dependencies.

Quick start

import {
 TeamsProvider,
 TeamsBrowser,
 type TeamsAdapter,
} from "@lumea/agent-teams";

const adapter: TeamsAdapter = {
 listTeams: async () => [{ id: "eng", name: "Engineering" }],
 getMembers: async (teamId) => { /* ... */ },
 // Every method is optional -- capabilities auto-derive.
};

export default function TeamsPage() {
 return (
 <TeamsProvider adapter={adapter}>
 <TeamsBrowser />
 </TeamsProvider>
 );
}

Capabilities

Every adapter method is optional. The UI auto-hides controls when a capability is missing -- no broken buttons, no consumer-side guards.

| Capability | Adapter method | UI gated | |---|---|---| | canBrowse | listTeams | Team sidebar | | canViewMembers | getMembers | Member list | | canCreate | createTeam | "New team" button | | canUpdate | updateTeam | "Edit team" action | | canDelete | deleteTeam | "Delete team" action | | canAddMember | addMember | "Add member" button | | canRemoveMember | removeMember | "Remove" action in member row | | canSetLead | setLead | "Set as lead" action | | canMoveAgent | moveAgent | Drag-drop reorg (future) | | canBuildGraph | buildOrgGraph or listTeams + getMembers | Org chart tab |

OrgChart standalone usage

<OrgChart> can be used outside <TeamsProvider> by passing data directly:

import { OrgChart } from "@lumea/agent-teams";

<OrgChart
 agents={[{ id: "a1", name: "Alice", role: "Lead", teamId: "eng" }]}
 teams={[{ id: "eng", name: "Engineering" }]}
 onAgentClick={(id) => console.log("clicked", id)}
/>

Labels

All user-facing strings are overridable via the labels prop on <TeamsProvider>. Spread defaultTeamsLabels and override what you need:

import { defaultTeamsLabels } from "@lumea/agent-teams";

<TeamsProvider
 adapter={adapter}
 labels={{ ...defaultTeamsLabels, title: "My Teams" }}
>