feat: fully functioning ALB

packages/frontend/src/components/ResourceTable.tsx

@@ -5,6 +5,7 @@ import type {CloudResource} from '@/types/resource';
 import type {ServiceSchema} from '@/types/schema';
 import {getPath} from '@/lib/resourcePath';
 import {renderColumnValue} from '@/lib/columnFormat';
+import {CopyValueButton} from '@/components/CopyValueButton';
 
 interface ResourceTableProps {
   schema: ServiceSchema;
@@ -102,7 +103,7 @@ export function ResourceTable({
               )}
               {schema.columns.map((column) => (
                 <td key={column.name} onClick={() => onSelect(resource)}>
-                  {renderColumnValue(getPath(resource, column.path ?? column.name), column)}
+                  <CopyableColumnValue resource={resource} column={column} />
                 </td>
               ))}
               {hasActions && (
@@ -188,3 +189,21 @@ export function ResourceTable({
     </table>
   );
 }
+
+function CopyableColumnValue({resource, column}: {resource: CloudResource; column: ServiceSchema['columns'][number]}) {
+  const value = getPath(resource, column.path ?? column.name);
+  const copyable = typeof value === 'string' && (
+    column.format === 'code' || /(^id$|id$|arn|ip|endpoint|url|uri|key)/i.test(column.name)
+  );
+
+  if (!copyable) {
+    return renderColumnValue(value, column);
+  }
+
+  return (
+    <span className="copy-value">
+      {renderColumnValue(value, column)}
+      <CopyValueButton value={value} label={column.label} />
+    </span>
+  );
+}