File size: 3,654 Bytes
6a7089a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 | import type { Profile, Instance } from "../../generated/types";
interface Props {
profile: Profile;
instance?: Instance;
}
function MetaBlock({
label,
children,
}: {
label: string;
children: React.ReactNode;
}) {
return (
<div className="rounded-xl border border-border-subtle bg-black/10 p-4">
<div className="dashboard-section-title mb-2 text-[0.68rem]">{label}</div>
{children}
</div>
);
}
export default function ProfileMetaInfoPanel({ profile, instance }: Props) {
const accountText = profile.accountEmail || profile.accountName || "";
const sizeText = profile.sizeMB ? `${profile.sizeMB.toFixed(0)} MB` : "—";
const browserType = instance?.attached
? "Attached via CDP"
: instance?.headless
? "Headless"
: "Headed";
return (
<MetaBlock label="Profile panel">
<div className="space-y-3 text-sm text-text-secondary">
<div className="flex items-center justify-between gap-3">
<span className="dashboard-section-title text-[0.68rem]">Status</span>
<span className="text-right">{instance?.status || "stopped"}</span>
</div>
{instance?.port && (
<div className="flex items-center justify-between gap-3">
<span className="dashboard-section-title text-[0.68rem]">Port</span>
<span className="text-right">{instance.port}</span>
</div>
)}
<div className="flex items-center justify-between gap-3">
<span className="dashboard-section-title text-[0.68rem]">
Browser
</span>
<span className="text-right">{browserType}</span>
</div>
<div className="flex items-center justify-between gap-3">
<span className="dashboard-section-title text-[0.68rem]">Size</span>
<span className="text-right">{sizeText}</span>
</div>
{accountText && (
<div className="flex items-center justify-between gap-3">
<span className="dashboard-section-title text-[0.68rem]">
Account
</span>
<span className="text-right">{accountText}</span>
</div>
)}
{profile.chromeProfileName && (
<div className="flex items-center justify-between gap-3">
<span className="dashboard-section-title text-[0.68rem]">
Identity
</span>
<span className="text-right">{profile.chromeProfileName}</span>
</div>
)}
{instance?.attached && (
<div className="flex items-center justify-between gap-3">
<span className="dashboard-section-title text-[0.68rem]">
Connection
</span>
<span className="text-right">CDP attached</span>
</div>
)}
{instance?.cdpUrl && (
<div>
<div className="dashboard-section-title mb-1 text-[0.68rem]">
CDP URL
</div>
<code className="dashboard-mono block break-all text-xs text-text-secondary">
{instance.cdpUrl}
</code>
</div>
)}
{profile.path && (
<div>
<div className="dashboard-section-title mb-1 text-[0.68rem]">
Path
</div>
<code
className={`dashboard-mono block break-all text-xs ${
profile.pathExists ? "text-text-secondary" : "text-destructive"
}`}
>
{profile.path}
{!profile.pathExists && " (not found)"}
</code>
</div>
)}
</div>
</MetaBlock>
);
}
|