feat: fully functioning ALB

packages/frontend/src/components/ResourceInspector.tsx

@@ -5,6 +5,7 @@ import { LogsQueryPanel } from "@/components/LogsQueryPanel";
 import type { CloudProvider } from "@/types/cloud";
 import type { CloudResource, StorageObject } from "@/types/resource";
 import {formatBytes} from "@/lib/format";
+import {CopyValueButton} from "@/components/CopyValueButton";
 
 interface ResourceInspectorProps {
   resource?: CloudResource;
@@ -82,6 +83,7 @@ export function ResourceInspector({
       </div>
       <div className="inspector-grid">
         <InspectorItem label="Cloud" value={resource.cloud} />
+        <InspectorItem label="Resource ID" value={resource.id} copyable />
         <InspectorItem label="Service" value={serviceName ?? resource.service} />
         <InspectorItem label="Region" value={resource.region ?? "-"} />
         <InspectorItem label="Created At" value={resource.createdAt ?? "-"} />
@@ -163,6 +165,7 @@ export function ResourceInspector({
             <InspectorItem
               label="ARN"
               value={getStringMetadata(resource.metadata.arn) ?? "-"}
+              copyable
             />
             <InspectorItem
               label="Last Modified"
@@ -343,11 +346,14 @@ function DatabaseLifecycleSection({ status }: { status?: string | null }) {
 }
 
 
-function InspectorItem({ label, value }: { label: string; value: string }) {
+function InspectorItem({ label, value, copyable = false }: { label: string; value: string; copyable?: boolean }) {
   return (
     <div>
       <p className="metric-label">{label}</p>
-      <p className="metric-value mono">{value}</p>
+      <p className="metric-value mono copy-value">
+        {value}
+        {copyable && value !== "-" && <CopyValueButton value={value} label={label} />}
+      </p>
     </div>
   );
 }
@@ -370,13 +376,20 @@ function MetadataPanel({ metadata }: { metadata: Record<string, unknown> }) {
       {rows.map(([key, value]) => (
         <div key={key}>
           <span>{humanizeKey(key)}</span>
-          <code>{formatMetadataValue(value)}</code>
+          <span className="copy-value">
+            <code>{formatMetadataValue(value)}</code>
+            {isCopyableMetadata(key, value) && <CopyValueButton value={formatMetadataValue(value)} label={humanizeKey(key)} />}
+          </span>
         </div>
       ))}
     </div>
   );
 }
 
+function isCopyableMetadata(key: string, value: unknown): value is string | number {
+  return (typeof value === "string" || typeof value === "number") && /id$|arn|ip|endpoint|url|uri|key|hash|token/i.test(key);
+}
+
 function formatMetadataValue(value: unknown): string {
   return typeof value === "object" ? JSON.stringify(value) : String(value);
 }