kernelci · alanpeixinho · Aug 11, 2026
diff --git a/dashboard/src/components/Cards/DetailsInfoCard.tsx b/dashboard/src/components/Cards/DetailsInfoCard.tsx
@@ -1,4 +1,4 @@
-import type { JSX } from 'react';
+import type { JSX, ReactNode } from 'react';
 import { useMemo } from 'react';
 import type { ColumnDef } from '@tanstack/react-table';
 import {
@@ -41,15 +41,17 @@ const columns: ColumnDef<DetailRow>[] = [
 
 export const DetailsInfoCard = ({
   cardTitle,
+  title,
   data,
 }: {
-  cardTitle: MessagesKey;
+  cardTitle?: MessagesKey;
+  title?: ReactNode;
   data: ILinkWithIcon[];
 }): JSX.Element => {
   const sanitizedData: DetailRow[] = useMemo(
     () =>
-      data.map(({ title, ...value }) => ({
-        title,
+      data.map(({ title: fieldTitle, ...value }) => ({
+        title: fieldTitle,
         value: { ...value },
       })),
     [data],
@@ -93,7 +95,7 @@ export const DetailsInfoCard = ({
 
   return (
     <BaseCard
-      title={<FormattedMessage id={cardTitle} />}
+      title={title ?? (cardTitle ? <FormattedMessage id={cardTitle} /> : null)}
       className="mb-0 gap-0"
     >
       <DumbBaseTable containerClassName="rounded-none border-0 border-x-0">

diff --git a/dashboard/src/components/HardwareRegistry/HardwareRegistry.tsx b/dashboard/src/components/HardwareRegistry/HardwareRegistry.tsx
@@ -0,0 +1,213 @@
+import type { JSX, ReactNode } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import { MdDeveloperBoard } from 'react-icons/md';
+
+import { valueOrEmpty } from '@/lib/string';
+import type { MessagesKey } from '@/locales/messages';
+import type { HardwareRegistryInfo } from '@/lib/hardwareRegistryMock';
+
+import BaseCard from '@/components/Cards/BaseCard';
+import { DetailsInfoCard } from '@/components/Cards/DetailsInfoCard';
+import LinkWithIcon, {
+  type ILinkWithIcon,
+} from '@/components/LinkWithIcon/LinkWithIcon';
+import { LinkIcon } from '@/components/Icons/Link';
+
+const humanize = (text?: string): string | undefined =>
+  text?.replace(/_/g, ' ');
+
+const processorFields = (info: HardwareRegistryInfo): ILinkWithIcon[] => {
+  const clock = info.processor?.maxClockSpeedMhz;
+  return [
+    {
+      title: 'global.soc',
+      linkText: valueOrEmpty(info.processor?.id),
+      link: info.processor?.url,
+    },
+    {
+      title: 'global.architecture',
+      linkText: valueOrEmpty(info.processor?.architecture),
+    },
+    {
+      title: 'global.cores',
+      linkText: valueOrEmpty(info.processor?.cores?.toString()),
+    },
+    {
+      title: 'global.maxClockSpeed',
+      linkText: valueOrEmpty(clock ? `${clock} MHz` : undefined),
+    },
+    {
+      title: 'global.siliconVendor',
+      linkText: valueOrEmpty(info.siliconVendor?.id),
+      link: info.siliconVendor?.url,
+    },
+  ];
+};
+
+const boardFields = (info: HardwareRegistryInfo): ILinkWithIcon[] => [
+  {
+    title: 'global.boardType',
+    linkText: valueOrEmpty(humanize(info.boardType)),
+  },
+  {
+    title: 'global.formFactor',
+    linkText: valueOrEmpty(humanize(info.formFactor)),
+  },
+  ...(info.systemModule
+    ? [
+        {
+          title: 'global.systemModule' as MessagesKey,
+          linkText: valueOrEmpty(info.systemModule.id),
+          link: info.systemModule.url,
+        },
+      ]
+    : []),
+  {
+    title: 'global.vendor',
+    linkText: valueOrEmpty(info.vendor?.id),
+    link: info.vendor?.url,
+  },
+];
+
+const fieldByTitle = (
+  fields: ILinkWithIcon[],
+  title: MessagesKey,
+): ILinkWithIcon | undefined => fields.find(field => field.title === title);
+
+const listingFields = (info: HardwareRegistryInfo): ILinkWithIcon[] => {
+  const processor = processorFields(info);
+  const board = boardFields(info);
+  return [
+    {
+      title: 'global.platform',
+      linkText: valueOrEmpty(info.platformId),
+      link: info.url,
+    },
+    fieldByTitle(processor, 'global.soc'),
+    fieldByTitle(processor, 'global.architecture'),
+    fieldByTitle(board, 'global.vendor'),
+    fieldByTitle(board, 'global.boardType'),
+    fieldByTitle(board, 'global.formFactor'),
+  ].filter((field): field is ILinkWithIcon => field !== undefined);
+};
+
+const SpecGroup = ({
+  label,
+  children,
+}: {
+  label: MessagesKey;
+  children: ReactNode;
+}): JSX.Element => (
+  <div className="flex flex-col gap-2">
+    <span className="text-dark-gray2 text-xs font-medium tracking-wide uppercase">
+      <FormattedMessage id={label} />
+    </span>
+    <div className="flex flex-wrap items-start gap-x-8 gap-y-3">{children}</div>
+  </div>
+);
+
+const specs = (fields: ILinkWithIcon[]): JSX.Element[] =>
+  fields.map(field => (
+    <LinkWithIcon
+      key={field.title}
+      titleClassName="text-dark-gray2 text-xs font-normal"
+      {...field}
+    />
+  ));
+
+const RegistryTitle = ({
+  info,
+}: {
+  info: HardwareRegistryInfo;
+}): JSX.Element => (
+  <div className="flex flex-col gap-1">
+    <div className="flex flex-wrap items-center gap-2">
+      <MdDeveloperBoard className="text-blue text-xl" />
+      <LinkWithIcon linkText={info.platformId} link={info.url} />
+    </div>
+    {info.description && (
+      <span className="text-dark-gray2 text-sm font-normal">
+        {info.description}
+      </span>
+    )}
+  </div>
+);
+
+export const HardwareRegistryListingDetails = ({
+  info,
+}: {
+  info: HardwareRegistryInfo;
+}): JSX.Element => (
+  <div className="bg-light-gray flex flex-col gap-3 py-4 pr-4 pl-12">
+    {info.description && (
+      <span className="text-dark-gray2 text-sm">{info.description}</span>
+    )}
+    <div className="flex flex-wrap items-start gap-x-8 gap-y-3">
+      {specs(listingFields(info))}
+    </div>
+  </div>
+);
+
+export const HardwareRegistryStrip = ({
+  info,
+  className,
+}: {
+  info?: HardwareRegistryInfo;
+  className?: string;
+}): JSX.Element | null => {
+  if (!info) {
+    return null;
+  }
+
+  return (
+    <BaseCard className={className} title={<RegistryTitle info={info} />}>
+      <div className="flex flex-col gap-4 px-3 pb-4">
+        <SpecGroup label="global.processor">
+          {specs(processorFields(info))}
+        </SpecGroup>
+        <div className="border-dark-gray border-t" />
+        <SpecGroup label="global.board">{specs(boardFields(info))}</SpecGroup>
+      </div>
+    </BaseCard>
+  );
+};
+
+export const HardwareRegistryCard = ({
+  info,
+}: {
+  info?: HardwareRegistryInfo;
+}): JSX.Element | null => {
+  if (!info) {
+    return null;
+  }
+
+  return (
+    <DetailsInfoCard
+      title={
+        <div className="flex items-center gap-2">
+          <MdDeveloperBoard className="text-blue text-xl" />
+          <FormattedMessage id="testDetails.hardwareInfo" />
+        </div>
+      }
+      data={[
+        {
+          title: 'global.platform' as MessagesKey,
+          linkText: valueOrEmpty(info.platformId),
+          link: info.url,
+        },
+        {
+          title: 'global.description' as MessagesKey,
+          linkText: valueOrEmpty(info.description),
+        },
+        ...processorFields(info),
+        ...boardFields(info),
+      ].map(field =>
+        field.link
+          ? { ...field, icon: <LinkIcon className="text-blue text-xl" /> }
+          : field,
+      )}
+    />
+  );
+};
diff --git a/dashboard/src/components/LinkWithIcon/LinkWithIcon.tsx b/dashboard/src/components/LinkWithIcon/LinkWithIcon.tsx
@@ -14,6 +14,7 @@ export interface ILinkWithIcon {
   onClick?: () => void;
   unformattedTitle?: string;
   titleIcon?: JSX.Element;
+  titleClassName?: string;
 }
 
 const LinkWithIcon = ({
@@ -25,6 +26,7 @@ const LinkWithIcon = ({
   onClick,
   unformattedTitle,
   titleIcon,
+  titleClassName,
 }: ILinkWithIcon): JSX.Element => {
   const WrapperLink = link ? 'a' : 'div';
 
@@ -40,8 +42,10 @@ const LinkWithIcon = ({
   return (
     <div className="flex flex-col items-start gap-1 text-[16px]">
       {(titleText || titleIcon) && (
-        <div className="flex flex-row gap-[5px]">
-          {titleText && <span className="font-bold">{titleText}</span>}
+        <div className="flex flex-row items-center gap-[5px]">
+          {titleText && (
+            <span className={titleClassName ?? 'font-bold'}>{titleText}</span>
+          )}
           {titleIcon}
         </div>
       )}

diff --git a/dashboard/src/components/TestDetails/TestDetails.tsx b/dashboard/src/components/TestDetails/TestDetails.tsx
@@ -78,6 +78,10 @@ import { DetailsInfoCard } from '@/components/Cards/DetailsInfoCard';
 
 import CopyButton from '@/components/Button/CopyButton';
 
+import { getMockHardwareRegistryInfo } from '@/lib/hardwareRegistryMock';
+
+import { HardwareRegistryCard } from '@/components/HardwareRegistry/HardwareRegistry';
+
 import { StatusHistoryItem } from './StatusHistoryItem';
 
 const TestDetailsSections = ({
@@ -198,6 +202,14 @@ const TestDetailsSections = ({
     endTimestampInSeconds,
   ]);
 
+  const registryInfo = useMemo(() => {
+    const platform =
+      typeof test.environment_misc?.['platform'] === 'string'
+        ? test.environment_misc['platform']
+        : undefined;
+    return getMockHardwareRegistryInfo(platform);
+  }, [test.environment_misc]);
+
   const setSheetToLog = useCallback(
     (): void => setSheetType('log'),
     [setSheetType],
@@ -443,6 +455,7 @@ const TestDetailsSections = ({
                       },
                     ]}
                   />
+                  <HardwareRegistryCard info={registryInfo} />
                 </div>
               ),
             },
@@ -457,6 +470,7 @@ const TestDetailsSections = ({
     hardwareDetailsLink,
     buildDetailsLink,
     compatiblesLink,
+    registryInfo,
   ]);
 
   const miscSection: ISection | undefined = useMemo(():

diff --git a/dashboard/src/lib/hardwareRegistryMock.ts b/dashboard/src/lib/hardwareRegistryMock.ts
@@ -0,0 +1,53 @@
+// MOCK ONLY — frontend preview. Real API later.
+
+export interface HardwareRegistryInfo {
+  platformId: string;
+  boardType?: string;
+  formFactor?: string;
+  description?: string;
+  url?: string;
+  vendor?: { id: string; url?: string };
+  siliconVendor?: { id: string; url?: string };
+  systemModule?: { id: string; formFactor?: string; url?: string };
+  processor?: {
+    id: string;
+    architecture?: string;
+    cores?: number;
+    maxClockSpeedMhz?: number;
+    url?: string;
+    description?: string;
+  };
+}
+
+const MOCK: HardwareRegistryInfo = {
+  platformId: 'am335x-bone-black',
+  boardType: 'single_board_computer',
+  formFactor: 'board',
+  description: 'BeagleBone Black open-source single-board computer',
+  url: 'https://beagleboard.org/black',
+  vendor: { id: 'beagleboard', url: 'https://beagleboard.org' },
+  siliconVendor: { id: 'ti', url: 'https://www.ti.com' },
+  systemModule: {
+    id: 'osd335x',
+    formFactor: 'system-on-module',
+    url: 'https://octavosystems.com/octavo_products/osd335x/',
+  },
+  processor: {
+    id: 'am3358',
+    architecture: 'arm',
+    cores: 1,
+    maxClockSpeedMhz: 800,
+    url: 'https://www.ti.com/product/AM3358',
+    description: 'Arm Cortex-A8, 3D graphics, PRU-ICSS, CAN',
+  },
+};
+
+export const getMockHardwareRegistryInfo = (
+  _platform?: string,
+): HardwareRegistryInfo => MOCK;
+
+export const getMockHardwareRegistryListingInfo = (
+  platform: string,
+  index: number,
+): HardwareRegistryInfo | undefined =>
+  index === 0 ? { ...MOCK, platformId: platform } : undefined;