@eqtylab/explorer 0.0.0

package/src/app/components/manifestViewer/components/ManifestButtons.tsx

@@ -0,0 +1,215 @@
+import { useMemo, useState } from "react";
+import { Upload } from "lucide-react";
+import {
+    Badge,
+    Button,
+    IconButton,
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+    Dialog,
+    DialogContainer,
+    DialogHeader,
+    DialogTitle,
+    DialogContent,
+} from "@eqtylab/equality";
+
+import { Config } from "@/app/config";
+import { cn } from "@/lib/utils";
+import { detectUploadsFromFile, UploadsMap, UploadValue, UploadKey } from "@/v-comp-viewer/utils";
+
+interface ManifestButtonsProps {
+    config: Config;
+    handleSampleManifestSelected: (event: string) => void;
+    handleFileChange: (file: File) => void;
+    allowArtifactsUploads: boolean;
+    handleDetectedUploads: (detected: UploadValue[]) => void;
+    onFilesSelected: (files: FileList | null) => void;
+    uploads: UploadsMap;
+    hasManifest: boolean;
+    handleDeleteManifest: () => void;
+    handleDeleteUpload: (kind: Exclude<UploadKey, "manifest">) => void;
+}
+
+const ManifestButtons = ({
+    config,
+    handleSampleManifestSelected,
+    handleFileChange,
+    allowArtifactsUploads,
+    handleDetectedUploads,
+    onFilesSelected,
+    uploads,
+    hasManifest,
+    handleDeleteManifest,
+    handleDeleteUpload,
+}: ManifestButtonsProps) => {
+    const [selectedManifest, setSelectedManifest] = useState<string>("");
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [isDragOver, setIsDragOver] = useState(false);
+
+    const labels = useMemo(
+        () => [
+            { key: "compose" as const, label: "Docker Compose (.yaml)", isUploaded: !!uploads.compose },
+            { key: "cmdline" as const, label: "Kernel Command Line (.txt, .cmdline)", isUploaded: !!uploads.cmdline },
+            { key: "ovmf" as const, label: "Firmware (.ovmf)", isUploaded: !!uploads.ovmf },
+            { key: "initrd" as const, label: "Initial Ram Disk (.gz, .initrd, .img)", isUploaded: !!uploads.initrd },
+            { key: "kernel" as const, label: "Kernel (.bin, .img)", isUploaded: !!uploads.kernel },
+        ],
+        [uploads],
+    );
+
+    return (
+        <div className="flex gap-2">
+            {config.manifests && config.manifests.length > 0 && (
+                <Select
+                    value={selectedManifest}
+                    onValueChange={(value) => {
+                        setSelectedManifest(value);
+                        handleSampleManifestSelected(value);
+                    }}
+                >
+                    <SelectTrigger id="select-default" className="min-w-52">
+                        <SelectValue placeholder="Select a sample manifest" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        {config.manifests.map((file) => (
+                            <SelectItem key={file} value={file}>
+                                {file}
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+            )}
+            <Button variant="primary" onClick={() => setIsModalOpen(true)} prefix={<Upload />}>
+                Upload Files
+            </Button>
+            <Dialog open={isModalOpen} onOpenChange={() => setIsModalOpen(false)}>
+                <DialogContainer className="max-w-4xl!">
+                    <DialogHeader>
+                        <DialogTitle>Upload Files</DialogTitle>
+                    </DialogHeader>
+                    <DialogContent className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                        <div
+                            className={cn(
+                                "flex relative flex-col items-center justify-center gap-4 bg-background/60 border border-dashed border-border rounded-md px-4 py-8",
+                                isDragOver ? "bg-card-background" : "",
+                            )}
+                            onDragOver={(e) => {
+                                e.preventDefault();
+                                setIsDragOver(true);
+                            }}
+                            onDragLeave={() => setIsDragOver(false)}
+                            onDrop={(e) => {
+                                e.preventDefault();
+                                setIsDragOver(false);
+                                const files = Array.from(e.dataTransfer.files);
+                                if (files.length > 0) {
+                                    if (allowArtifactsUploads) {
+                                        // Process each file
+                                        files.forEach(async (file) => {
+                                            const detected = await detectUploadsFromFile(file);
+                                            handleDetectedUploads(detected);
+                                        });
+                                    } else {
+                                        handleFileChange(files[0]);
+                                    }
+                                }
+                            }}
+                        >
+                            <input
+                                type="file"
+                                id="file-input"
+                                className="absolute inset-0 opacity-0 cursor-pointer"
+                                onChange={(e) => {
+                                    const files = e.target.files;
+
+                                    if (!files) return;
+
+                                    if (allowArtifactsUploads) {
+                                        handleFileChange(files[0]);
+                                        onFilesSelected(files);
+                                    } else {
+                                        handleFileChange(files[0]);
+                                    }
+                                }}
+                                multiple={allowArtifactsUploads}
+                            />
+                            <div className="space-y-2">
+                                <div className="rounded-full bg-text-primary/10 p-3 mx-auto w-max">
+                                    <Upload className="size-5" />
+                                </div>
+                                <p className="text-sm font-medium">Drag Files Here to Upload</p>
+                            </div>
+                            <div className="flex items-center gap-2">
+                                <p className="text-sm font-medium">or</p>
+                                <Button variant="primary" size="sm" prefix={<Upload />}>
+                                    Choose Files
+                                </Button>
+                            </div>
+                        </div>
+                        <div className="space-y-2">
+                            <h4 className="text-sm font-medium">Uploaded Files</h4>
+                            <div className="space-y-2">
+                                <UploadLabel
+                                    label="Eqty Manifest (.json)"
+                                    isUploaded={hasManifest}
+                                    handleDeleteUpload={() => {
+                                        setSelectedManifest("");
+                                        handleDeleteManifest();
+                                    }}
+                                />
+                                <div className={cn("h-px bg-border", !allowArtifactsUploads ? "opacity-20" : "")} />
+                                {labels.map((item) => (
+                                    <UploadLabel
+                                        key={item.label}
+                                        label={item.label}
+                                        isUploaded={item.isUploaded}
+                                        handleDeleteUpload={() => handleDeleteUpload(item.key)}
+                                        className={!allowArtifactsUploads ? "opacity-20" : ""}
+                                    />
+                                ))}
+                            </div>
+                        </div>
+                    </DialogContent>
+                </DialogContainer>
+            </Dialog>
+        </div>
+    );
+};
+
+export default ManifestButtons;
+
+const UploadLabel = ({
+    label,
+    isUploaded,
+    handleDeleteUpload,
+    className,
+}: {
+    label: string;
+    isUploaded: boolean;
+    handleDeleteUpload: () => void;
+    className?: string;
+}) => {
+    return (
+        <div
+            className={cn(
+                "flex items-center justify-between gap-4 border border-border rounded-md py-1 pl-2 pr-1 bg-background/60 transition-all duration-300",
+                className,
+            )}
+        >
+            <div className="flex items-center gap-2">
+                {isUploaded && <Badge variant="success" display="icon-only" />}
+                <p className="text-sm font-medium">{label}</p>
+            </div>
+            <IconButton
+                name="Trash2"
+                size="sm"
+                onClick={handleDeleteUpload}
+                variant="danger"
+                disabled={!isUploaded}
+            ></IconButton>
+        </div>
+    );
+};

package/src/app/config.json

@@ -0,0 +1,23 @@
+{
+    "display": {
+        "logo": "logos/eqty.svg"
+    },
+    "manifests": [
+        "amd-sev",
+        "anchors",
+        "association-no-metadata",
+        "association",
+        "B-200-merged",
+        "eqty-docker",
+        "governance",
+        "intel-tdx-with-nvidia",
+        "intel-tdx",
+        "iroh-collections",
+        "model-signing",
+        "multiple-registrations",
+        "no-vcs",
+        "storage",
+        "sub-graphs"
+    ],
+    "nodeOverrides": {}
+}

package/src/app/config.ts

@@ -0,0 +1,28 @@
+import type { NodeConfig } from "@/explorer-component";
+import { ExplorerConfig, buildNodeConfig } from "@/explorer-component";
+
+import appConfigRaw from "./config.json";
+const appConfig = appConfigRaw as JsonConfig;
+
+export type JsonConfig = {
+    display: { logo: string };
+    manifests: string[];
+    nodeOverrides?: { [key: string]: Partial<NodeConfig> };
+};
+
+export type Config = ExplorerConfig & {
+    display: {
+        logo: string;
+    };
+    manifests: string[];
+};
+
+export function loadConfig(): Config {
+    const nodesConfig = buildNodeConfig(appConfig.nodeOverrides);
+
+    return {
+        ...nodesConfig,
+        display: appConfig.display,
+        manifests: appConfig.manifests,
+    };
+}

package/src/app/pages/index.tsx

@@ -0,0 +1,34 @@
+import { useSearchParams } from "react-router-dom";
+
+import ManifestViewer from "@/app/components/manifestViewer/ManifestViewer.tsx";
+import IntegrityService from "@/app/components/integrityService/IntegrityService.tsx";
+import { getEnvVarAppMode, AppMode } from "@/app/utils/appMode.ts";
+import { Auth0Provider } from "@auth0/auth0-react";
+import { loadConfig } from "@/app/config";
+
+const Component = () => {
+    const [searchParams] = useSearchParams();
+
+    const appMode = getEnvVarAppMode(searchParams.get("appmode"));
+    const config = loadConfig();
+
+    if (appMode === AppMode.INTEGRITY_SERVICE) {
+        return (
+            <Auth0Provider
+                domain={import.meta.env.VITE_AUTH0_DOMAIN}
+                clientId={import.meta.env.VITE_AUTH0_CLIENT_ID}
+                authorizationParams={{
+                    redirect_uri: window.location.origin,
+                }}
+                useRefreshTokens={true}
+                cacheLocation="localstorage"
+            >
+                <IntegrityService searchParams={searchParams} config={config} />
+            </Auth0Provider>
+        );
+    } else {
+        return <ManifestViewer config={config} />;
+    }
+};
+
+export { Component };

package/src/app/stores/manifestStore.ts

@@ -0,0 +1,19 @@
+import { create } from "zustand";
+
+export type ManifestStore = {
+    manifest: any | null;
+    setManifest: (manifestJson: any) => void;
+    getManifest: () => any | null;
+};
+
+export const useManifestStore = create<ManifestStore>()((set, get) => ({
+    manifest: null,
+    setManifest: (manifestJson) => {
+        set({ manifest: manifestJson });
+    },
+
+    getManifest: () => {
+        const manifest = get().manifest;
+        return manifest;
+    },
+}));

package/src/app/utils/appMode.ts

@@ -0,0 +1,37 @@
+enum AppMode {
+    MANIFEST_VIEWER = "manifestviewer",
+    INTEGRITY_SERVICE = "integrityservice",
+    EMBEDDED_IFRAME = "iframe",
+}
+
+const appModeValues = Object.values(AppMode);
+
+// Type guard to check if a string is a valid AppMode
+const isAppMode = (value: string): value is AppMode => {
+    return appModeValues.includes(value as AppMode);
+};
+
+// Pass an appmode string to get the AppMode enum value, or use appmode env var
+const getEnvVarAppMode = (urlAppMode: string | null): AppMode => {
+    if (urlAppMode) {
+        const appMode = strToAppMode(urlAppMode);
+        return appMode;
+    } else {
+        const appMode = strToAppMode(import.meta.env.VITE_APP_MODE);
+        return appMode;
+    }
+};
+
+const strToAppMode = (appMode: string | undefined): AppMode => {
+    if (!appMode) {
+        return AppMode.EMBEDDED_IFRAME;
+    }
+
+    const appModeLower = appMode.toLowerCase();
+
+    const mode: AppMode = isAppMode(appModeLower) ? appModeLower : AppMode.MANIFEST_VIEWER;
+
+    return mode;
+};
+
+export { AppMode, getEnvVarAppMode };

package/src/assets/vectors/eqtylab.svg

@@ -0,0 +1,6 @@
+<svg width="100" height="20" viewBox="0 0 100 20" fill="#0D0D0D" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.1556 11.8551H12.479V7.86308H4.1556V4.40998H13.0578V0.417969H0.00390625V19.9988H13.3572V15.9868H4.1556V11.8551Z" />
+<path d="M58.8646 0.419162L54.4135 7.48503L49.9624 0.419162H31.4395V4.41118H37.188V15.9681H31.0802C31.3996 15.5689 31.6591 15.1497 31.8986 14.7106C32.6171 13.3134 32.9964 11.7166 32.9964 9.98004C32.9964 8.56287 32.7369 7.20559 32.2579 6.00798C31.7589 4.79042 31.0602 3.71258 30.182 2.83433C29.3038 1.93613 28.2459 1.23753 27.0283 0.738523C25.8307 0.239521 24.5133 0 23.1361 0C21.7589 0 20.4215 0.259481 19.2239 0.738523C18.0263 1.23753 16.9684 1.93613 16.0702 2.83433C15.192 3.73254 14.4934 4.79042 13.9944 6.00798C13.4954 7.22555 13.2559 8.56287 13.2559 9.98004C13.2559 11.3972 13.5153 12.7545 13.9944 13.9521C14.4934 15.1697 15.192 16.2475 16.0702 17.1258C16.9485 18.024 18.0064 18.7226 19.2239 19.2216C20.4215 19.7206 21.7389 19.9601 23.1361 19.9601H41.3397V4.39122H47.5074L52.3377 11.7166V19.9601H56.4894V11.7565L63.9345 0.419162H58.8646ZM28.2858 12.3154C28.0263 13.0339 27.667 13.6727 27.188 14.2116C26.709 14.7505 26.1301 15.1896 25.4515 15.509C24.7728 15.8283 23.9944 15.988 23.1161 15.988C22.2379 15.988 21.4395 15.8283 20.7608 15.509C20.0822 15.1896 19.4834 14.7505 19.0243 14.2116C18.5453 13.6727 18.166 13.0339 17.9265 12.3154C17.667 11.5768 17.5273 10.7984 17.5273 9.98004C17.5273 9.16168 17.667 8.38323 17.9265 7.64471C18.186 6.92615 18.5453 6.28743 19.0243 5.7485C19.5034 5.20958 20.0822 4.77046 20.7608 4.4511C21.4395 4.13174 22.2379 3.97206 23.1161 3.97206C23.9944 3.97206 24.7728 4.13174 25.4515 4.4511C26.1301 4.77046 26.7289 5.20958 27.188 5.7485C27.667 6.28743 28.0463 6.92615 28.2858 7.64471C28.5453 8.38323 28.685 9.16168 28.685 9.98004C28.685 10.7984 28.5453 11.5768 28.2858 12.3154Z" />
+<path d="M78.687 1.61719L71.8406 17.3457H64.8546V1.61719H63.2578V18.8028H72.8985L74.8347 14.232H83.9365L85.8127 18.8028H87.6091L80.3836 1.61719H78.687ZM75.4534 12.7749L79.4654 3.35371L83.3576 12.7749H75.4534Z" />
+<path d="M99.1846 12.3353C99.005 11.8363 98.7455 11.3972 98.3862 11.0379C98.0469 10.6786 97.6477 10.3792 97.1687 10.1597C96.6896 9.94011 96.1906 9.80039 95.6118 9.76047V9.72055C96.6298 9.50099 97.4082 9.08183 97.9072 8.44311C98.4262 7.80438 98.6856 7.02594 98.6856 6.16766C98.6856 5.18961 98.526 4.41117 98.1866 3.83233C97.8473 3.23353 97.4282 2.77444 96.9092 2.45508C96.3902 2.11576 95.7914 1.8962 95.1328 1.7964C94.4741 1.6966 93.8154 1.63672 93.1767 1.63672H88.2266V18.8223H93.7156C94.2944 18.8223 94.9331 18.7625 95.5918 18.6227C96.2705 18.503 96.8892 18.2435 97.4681 17.9042C98.0469 17.5449 98.526 17.0659 98.9052 16.4271C99.2844 15.8084 99.484 14.99 99.484 14.012C99.4641 13.3932 99.3643 12.8343 99.1846 12.3353ZM93.3763 3.07384C93.8753 3.07384 94.3543 3.11376 94.8134 3.21357C95.2725 3.31337 95.6717 3.47305 96.011 3.71257C96.3503 3.95209 96.6298 4.27145 96.8294 4.65069C97.029 5.04989 97.1288 5.54889 97.1288 6.1477C97.1288 6.42714 97.0888 6.72654 96.989 7.06586C96.8892 7.40518 96.6896 7.70458 96.4102 8.00398C96.1108 8.30338 95.7116 8.54291 95.1926 8.74251C94.6737 8.94211 93.995 9.04191 93.1767 9.04191H89.8433L89.8234 3.07384H93.3763ZM97.7076 15.0699C97.6078 15.4491 97.3882 15.8084 97.0888 16.1477C96.7894 16.487 96.3304 16.7665 95.7715 17.006C95.1926 17.2255 94.4341 17.3453 93.496 17.3453H89.8234V10.499H93.7355C94.2345 10.499 94.7335 10.5589 95.2326 10.6986C95.7316 10.8184 96.1707 11.0379 96.5499 11.3174C96.9292 11.5968 97.2485 11.976 97.488 12.4152C97.7276 12.8742 97.8473 13.4132 97.8473 14.0319C97.8673 14.3513 97.8074 14.6906 97.7076 15.0699Z" />
+</svg>

package/src/components/app-header.tsx

@@ -0,0 +1,61 @@
+import ManifestButtons from "@/app/components/manifestViewer/components/ManifestButtons";
+import EQTYLabLogo from "@/assets/vectors/eqtylab.svg";
+import { DarkModeSwitch } from "@/components/dark-mode-switch";
+import { Config } from "@/app/config";
+import { UploadsMap, UploadValue, UploadKey } from "@/v-comp-viewer/utils";
+
+interface AppHeaderProps {
+    config: Config;
+    useSampleManifest: (event: string) => void;
+    handleFileChange: (file: File) => void;
+    allowArtifactsUploads: boolean;
+    handleDetectedUploads: (detected: UploadValue[]) => void;
+    onFilesSelected: (files: FileList | null) => void;
+    uploads: UploadsMap;
+    hasManifest: boolean;
+    handleDeleteManifest: () => void;
+    handleDeleteUpload: (kind: Exclude<UploadKey, "manifest">) => void;
+}
+
+export function AppHeader({
+    config,
+    useSampleManifest,
+    handleFileChange,
+    allowArtifactsUploads,
+    handleDetectedUploads,
+    onFilesSelected,
+    uploads,
+    hasManifest,
+    handleDeleteManifest,
+    handleDeleteUpload,
+}: AppHeaderProps) {
+    return (
+        <header className="w-full border-b border-border bg-background py-3.5 px-4 z-50">
+            <div className="flex w-full items-center justify-between">
+                <div className="flex items-center gap-3">
+                    <div className="[&>svg]:h-auto [&>svg]:w-28 [&>svg]:fill-text-primary">
+                        <EQTYLabLogo />
+                    </div>
+                    <div className="h-6 w-px bg-text-primary/20" />
+                    <span className="text-lg text-brand-lineage-explorer">Lineage Explorer</span>
+                </div>
+
+                <div className="flex items-center gap-4">
+                    <DarkModeSwitch />
+                    <ManifestButtons
+                        config={config}
+                        handleSampleManifestSelected={useSampleManifest}
+                        handleFileChange={handleFileChange}
+                        allowArtifactsUploads={allowArtifactsUploads}
+                        handleDetectedUploads={handleDetectedUploads}
+                        onFilesSelected={onFilesSelected}
+                        uploads={uploads}
+                        hasManifest={hasManifest}
+                        handleDeleteManifest={handleDeleteManifest}
+                        handleDeleteUpload={handleDeleteUpload}
+                    />
+                </div>
+            </div>
+        </header>
+    );
+}

package/src/components/dark-mode-switch.tsx

@@ -0,0 +1,16 @@
+import { Switch, useTheme } from "@eqtylab/equality";
+import { Moon, Sun } from "lucide-react";
+
+export function DarkModeSwitch() {
+    const [theme, setTheme] = useTheme();
+    const displayToggle = !!theme; // Only display the toggle once the theme has initialised, to avoid rendering incorrect state initially
+
+    return displayToggle ? (
+        <Switch
+            checked={theme === "dark"}
+            size="sm"
+            onCheckedChange={(checked) => setTheme(checked ? "dark" : "light")}
+            thumbIcon={theme === "dark" ? <Moon /> : <Sun />}
+        />
+    ) : null;
+}

package/src/components/ui/accordion.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface AccordionTriggerProps extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {
+    children: React.ReactNode;
+    className?: string;
+}
+
+const AccordionTrigger = React.forwardRef<HTMLButtonElement, AccordionTriggerProps>(
+    ({ children, className, ...props }, forwardedRef) => (
+        <AccordionPrimitive.Header>
+            <AccordionPrimitive.Trigger
+                className={cn(
+                    "flex gap-2 group items-center text-sm w-full data-[state=open]:[&_svg]:rotate-0 data-[state=closed]:[&_svg]:-rotate-90",
+                    className,
+                )}
+                {...props}
+                ref={forwardedRef}
+            >
+                <div className="group-hover:bg-lilac-button rounded-md p-1 transition-all duration-300">
+                    <ChevronDown aria-hidden className="size-4 transition-all duration-300" />
+                </div>
+                {children}
+                <div className="flex-1 h-px bg-border w-full ml-2" />
+            </AccordionPrimitive.Trigger>
+        </AccordionPrimitive.Header>
+    ),
+);
+
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+interface AccordionContentProps extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> {
+    children: React.ReactNode;
+    className?: string;
+}
+
+const AccordionContent = React.forwardRef<HTMLDivElement, AccordionContentProps>(
+    ({ children, className, ...props }, forwardedRef) => (
+        <AccordionPrimitive.Content className={cn("", className)} {...props} ref={forwardedRef}>
+            <div>{children}</div>
+        </AccordionPrimitive.Content>
+    ),
+);
+
+export { AccordionPrimitive as Accordion, AccordionTrigger, AccordionContent };

package/src/components/ui/certificate-chain.tsx

@@ -0,0 +1,60 @@
+import { SectionListWrapper, TwoColumnListItem } from "@/explorer-component/components/sidebar/SectionList";
+import { formatInTimeZone } from "date-fns-tz";
+
+const CerificateChain = ({ chainItems }: { chainItems: unknown[] }) => {
+    return (
+        <div className="space-y-4 my-4">
+            {chainItems.map((cert: unknown) => {
+                const c = cert as {
+                    subject: { attributes: Array<{ shortName: string; value: string }> };
+                    issuer: { attributes: Array<{ shortName: string; value: string }> };
+                    validity: { notBefore: Date; notAfter: Date };
+                    signature: string;
+                };
+                const subject = c.subject.attributes.map((attr) => `${attr.shortName}=${attr.value}`).join(", ");
+                const issuer = c.issuer.attributes.map((attr) => `${attr.shortName}=${attr.value}`).join(", ");
+                const validFrom = c.validity.notBefore.toISOString();
+                const validTo = c.validity.notAfter.toISOString();
+
+                const items = [
+                    {
+                        label: "Subject",
+                        value: (
+                            <div className="rounded-md border border-border bg-foreground/5 px-2 py-1">
+                                <code className="whitespace-pre-wrap break-words text-xs">{subject}</code>
+                            </div>
+                        ),
+                    },
+                    {
+                        label: "Issuer",
+                        value: (
+                            <div className="rounded-md border border-border bg-foreground/5 px-2 py-1">
+                                <code className="whitespace-pre-wrap break-words text-xs">{issuer}</code>
+                            </div>
+                        ),
+                    },
+                    {
+                        label: "Valid From",
+                        value: <p>{formatInTimeZone(validFrom, "UTC", "HH:mm:ss MMMM d, yyyy")}</p>,
+                    },
+                    {
+                        label: "Valid To",
+                        value: <p>{formatInTimeZone(validTo, "UTC", "HH:mm:ss MMMM d, yyyy")}</p>,
+                    },
+                ];
+
+                return (
+                    <div key={c.signature} className="border-b border-border pb-4 last:border-b-0">
+                        <SectionListWrapper>
+                            {items.map((item) => (
+                                <TwoColumnListItem key={item.label} {...item} />
+                            ))}
+                        </SectionListWrapper>
+                    </div>
+                );
+            })}
+        </div>
+    );
+};
+
+export default CerificateChain;

package/src/components/ui/certificate-code.tsx

@@ -0,0 +1,39 @@
+import { CopyButton } from "@eqtylab/equality";
+
+import { cn } from "@/lib/utils";
+import { Validated } from "@/v-comp-viewer/utils";
+import VerifyStateBadge, { VerificationStateType } from "./verify-state-badge";
+
+interface CertificateCodeProps {
+    className?: string;
+    code: string;
+    validated?: Validated;
+}
+
+const CertificateCode = ({ className, code, validated }: CertificateCodeProps) => {
+    const validatedState: Partial<Record<Validated, VerificationStateType>> = {
+        valid: "verified",
+        partial: "partial",
+        invalid: "unverified",
+    };
+
+    return (
+        <div className={cn("space-y-2", className)}>
+            <div className="grid grid-cols-[1fr_auto] justify-between">
+                {validated && (
+                    <div>
+                        <VerifyStateBadge state={validatedState[validated]!} displayText={true} />
+                    </div>
+                )}
+                <CopyButton value={code} className="col-start-2" />
+            </div>
+            <div className="overflow-hidden rounded-md border border-border bg-foreground/5 p-2 text-xs">
+                <div className="styled-vertical-scrollbar max-h-24 overflow-y-auto">
+                    <code className="whitespace-pre-wrap break-all">{code}</code>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CertificateCode;

package/src/components/ui/details.tsx

@@ -0,0 +1,20 @@
+import { Accordion, AccordionTrigger, AccordionContent } from "@/components/ui/accordion";
+import { cn } from "@/lib/utils";
+
+interface DetailsProps {
+    className?: string;
+    innerClassName?: string;
+    title: string;
+    content: React.ReactNode;
+}
+
+const Details = ({ title, content, className, innerClassName }: DetailsProps) => (
+    <Accordion.Root type="single" collapsible className={className}>
+        <Accordion.Item value={title} className={cn("data-[state=open]:border-b border-border", innerClassName)}>
+            <AccordionTrigger className="font-medium text-sm">{title}</AccordionTrigger>
+            <AccordionContent>{content}</AccordionContent>
+        </Accordion.Item>
+    </Accordion.Root>
+);
+
+export default Details;