ADD CROSS DOMAIN SUPPORT

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/event-list/event-details.tsx

@@ -33,6 +33,10 @@ export function EventDetails({ event, open, setOpen }: Props) {
   const [, setEvents] = useEventQueryNamesFilter({ shallow: false });
 
   const common = [
+    {
+      name: 'Origin',
+      value: event.origin,
+    },
     {
       name: 'Duration',
       value: event.duration ? round(event.duration / 1000, 1) : undefined,
@@ -154,7 +158,7 @@ export function EventDetails({ event, open, setOpen }: Props) {
                     {properties.map((item) => (
                       <KeyValue
                         key={item.name}
-                        name={item.name}
+                        name={item.name.replace(/^__/, '')}
                         value={item.value}
                         onClick={() => {
                           setFilter(

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/projects/list-projects.tsx

@@ -83,9 +83,9 @@ export default function ListProjects({ projects, clients }: ListProjectsProps) {
                               Client ID: ...{item.id.slice(-12)}
                             </Tooltiper>
                             <div className="text-muted-foreground">
-                              {item.secret
-                                ? 'Secret: Hidden'
-                                : `Website: ${item.cors}`}
+                              {item.cors &&
+                                item.cors !== '*' &&
+                                `Website: ${item.cors}`}
                             </div>
                             <div className="absolute right-4 top-4">
                               <ClientActions {...item} />

apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/onboarding-connect.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { ButtonContainer } from '@/components/button-container';
-import { InputWithLabel } from '@/components/forms/input-with-label';
+import CopyInput from '@/components/forms/copy-input';
 import { LinkButton } from '@/components/ui/button';
 import { useClientSecret } from '@/hooks/useClientSecret';
 import { LockIcon } from 'lucide-react';
@@ -36,13 +36,13 @@ const Connect = ({ project }: Props) => {
         </OnboardingDescription>
       }
     >
-      <div className="bg-def-200 flex flex-col gap-4 rounded-xl border p-4 md:p-6">
+      <div className="flex flex-col gap-4 rounded-xl border p-4 md:p-6">
         <div className="flex items-center gap-2 text-2xl capitalize">
           <LockIcon />
           Credentials
         </div>
-        <InputWithLabel label="Client ID" disabled value={client.id} />
-        <InputWithLabel label="Client Secret" disabled value={secret} />
+        <CopyInput label="Client ID" value={client.id} />
+        <CopyInput label="Secret" value={secret} />
       </div>
       {project.types.map((type) => {
         const Component = {

apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/page.tsx

@@ -1,5 +1,3 @@
-import { cookies } from 'next/headers';
-
 import { getCurrentOrganizations, getProjectWithClients } from '@openpanel/db';
 
 import OnboardingConnect from './onboarding-connect';

apps/dashboard/src/app/(onboarding)/onboarding/onboarding-tracking.tsx

@@ -4,7 +4,8 @@ import { useEffect } from 'react';
 import AnimateHeight from '@/components/animate-height';
 import { ButtonContainer } from '@/components/button-container';
 import { CheckboxItem } from '@/components/forms/checkbox-item';
-import { InputWithLabel } from '@/components/forms/input-with-label';
+import { InputWithLabel, WithLabel } from '@/components/forms/input-with-label';
+import TagInput from '@/components/forms/tag-input';
 import { Button } from '@/components/ui/button';
 import { Combobox } from '@/components/ui/combobox';
 import { Label } from '@/components/ui/label';
@@ -155,11 +156,41 @@ const Tracking = ({
               >
                 <AnimateHeight open={isWebsite && !isApp}>
                   <div className="p-4 pl-14">
-                    <InputWithLabel
-                      label="Domain"
-                      placeholder="https://example.com"
-                      error={form.formState.errors.domain?.message}
-                      {...form.register('domain')}
+                    <Controller
+                      name="domain"
+                      control={form.control}
+                      render={({ field }) => (
+                        <WithLabel
+                          label="Domain(s)"
+                          error={form.formState.errors.domain?.message}
+                        >
+                          <TagInput
+                            {...field}
+                            placeholder="Add a domain"
+                            value={field.value?.split(',') ?? []}
+                            renderTag={(tag) =>
+                              tag === '*' ? 'Allow domains' : tag
+                            }
+                            onChange={(newValue) => {
+                              field.onChange(
+                                newValue
+                                  .map((item) => {
+                                    const trimmed = item.trim();
+                                    if (
+                                      trimmed.startsWith('http://') ||
+                                      trimmed.startsWith('https://') ||
+                                      trimmed === '*'
+                                    ) {
+                                      return trimmed;
+                                    }
+                                    return `https://${trimmed}`;
+                                  })
+                                  .join(',')
+                              );
+                            }}
+                          />
+                        </WithLabel>
+                      )}
                     />
                   </div>
                 </AnimateHeight>