show domain and destination with port in table

server/routers/resource/getUserResources.ts

@@ -144,7 +144,7 @@ export async function getUserResources(
             name: string;
             destination: string;
             mode: string;
-            protocol: string | null;
+            scheme: string | null;
             enabled: boolean;
             alias: string | null;
             aliasAddress: string | null;
@@ -156,7 +156,7 @@ export async function getUserResources(
                     name: siteResources.name,
                     destination: siteResources.destination,
                     mode: siteResources.mode,
-                    protocol: siteResources.protocol,
+                    scheme: siteResources.scheme,
                     enabled: siteResources.enabled,
                     alias: siteResources.alias,
                     aliasAddress: siteResources.aliasAddress
@@ -240,7 +240,7 @@ export async function getUserResources(
                 name: siteResource.name,
                 destination: siteResource.destination,
                 mode: siteResource.mode,
-                protocol: siteResource.protocol,
+                protocol: siteResource.scheme,
                 enabled: siteResource.enabled,
                 alias: siteResource.alias,
                 aliasAddress: siteResource.aliasAddress,
@@ -289,7 +289,7 @@ export type GetUserResourcesResponse = {
             enabled: boolean;
             alias: string | null;
             aliasAddress: string | null;
-            type: 'site';
+            type: "site";
         }>;
     };
 };

server/routers/siteResource/listAllSiteResourcesByOrg.ts

@@ -88,7 +88,7 @@ function querySiteResourcesBase() {
             niceId: siteResources.niceId,
             name: siteResources.name,
             mode: siteResources.mode,
-            protocol: siteResources.protocol,
+            scheme: siteResources.scheme,
             proxyPort: siteResources.proxyPort,
             destinationPort: siteResources.destinationPort,
             destination: siteResources.destination,

src/app/[orgId]/settings/resources/client/page.tsx

@@ -67,7 +67,7 @@ export default async function ClientResourcesPage(
                 // proxyPort: siteResource.proxyPort,
                 siteId: siteResource.siteId,
                 destination: siteResource.destination,
-                // destinationPort: siteResource.destinationPort,
+                httpHttpsPort: siteResource.destinationPort ?? null,
                 alias: siteResource.alias || null,
                 aliasAddress: siteResource.aliasAddress || null,
                 siteNiceId: siteResource.siteNiceId,

src/components/ClientResourcesTable.tsx

@@ -52,7 +52,7 @@ export type InternalResourceRow = {
     siteId: number;
     siteNiceId: string;
     destination: string;
-    // destinationPort: number | null;
+    httpHttpsPort: number | null;
     alias: string | null;
     aliasAddress: string | null;
     niceId: string;
@@ -63,6 +63,42 @@ export type InternalResourceRow = {
     authDaemonPort?: number | null;
 };
 
+function resolveHttpHttpsDisplayPort(
+    mode: "http" | "https",
+    httpHttpsPort: number | null
+): number {
+    if (httpHttpsPort != null) {
+        return httpHttpsPort;
+    }
+    return mode === "https" ? 443 : 80;
+}
+
+function formatDestinationDisplay(row: InternalResourceRow): string {
+    const { mode, destination, httpHttpsPort } = row;
+    if (mode !== "http" && mode !== "https") {
+        return destination;
+    }
+    const port = resolveHttpHttpsDisplayPort(mode, httpHttpsPort);
+    const hostPart =
+        destination.includes(":") && !destination.startsWith("[")
+            ? `[${destination}]`
+            : destination;
+    return `${hostPart}:${port}`;
+}
+
+function formatHttpHttpsAliasUrl(mode: "http" | "https", alias: string): string {
+    return `${mode}://${alias}`;
+}
+
+function isSafeUrlForLink(href: string): boolean {
+    try {
+        void new URL(href);
+        return true;
+    } catch {
+        return false;
+    }
+}
+
 type ClientResourcesTableProps = {
     internalResources: InternalResourceRow[];
     orgId: string;
@@ -256,11 +292,12 @@ export default function ClientResourcesTable({
             ),
             cell: ({ row }) => {
                 const resourceRow = row.original;
+                const display = formatDestinationDisplay(resourceRow);
                 return (
                     <CopyToClipboard
-                        text={resourceRow.destination}
+                        text={display}
                         isLink={false}
-                        displayText={resourceRow.destination}
+                        displayText={display}
                     />
                 );
             }
@@ -273,15 +310,33 @@ export default function ClientResourcesTable({
             ),
             cell: ({ row }) => {
                 const resourceRow = row.original;
-                return resourceRow.mode === "host" && resourceRow.alias ? (
-                    <CopyToClipboard
-                        text={resourceRow.alias}
-                        isLink={false}
-                        displayText={resourceRow.alias}
-                    />
-                ) : (
-                    <span>-</span>
-                );
+                if (resourceRow.mode === "host" && resourceRow.alias) {
+                    return (
+                        <CopyToClipboard
+                            text={resourceRow.alias}
+                            isLink={false}
+                            displayText={resourceRow.alias}
+                        />
+                    );
+                }
+                if (
+                    (resourceRow.mode === "http" ||
+                        resourceRow.mode === "https") &&
+                    resourceRow.alias
+                ) {
+                    const url = formatHttpHttpsAliasUrl(
+                        resourceRow.mode,
+                        resourceRow.alias
+                    );
+                    return (
+                        <CopyToClipboard
+                            text={url}
+                            isLink={isSafeUrlForLink(url)}
+                            displayText={url}
+                        />
+                    );
+                }
+                return <span>-</span>;
             }
         },
         {