iris: add IP cp buttons (#3655)

Add Iris copy IP buttons, to make it easier to SSH into stuff.

---------

Co-authored-by: claude[bot] <41898282+claude[bot]@users.noreply.github.com>
Co-authored-by: Russell Power <rjpower@users.noreply.github.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: 4 people

lib/iris/dashboard/src/components/controller/EndpointsTab.vue

@@ -5,6 +5,7 @@ import { useControllerRpc } from '@/composables/useRpc'
 import { useAutoRefresh } from '@/composables/useAutoRefresh'
 import type { EndpointInfo, ListEndpointsResponse } from '@/types/rpc'
 import EmptyState from '@/components/shared/EmptyState.vue'
+import CopyButton from '@/components/shared/CopyButton.vue'
 
 const SHOW_ALL_THRESHOLD = 100
 
@@ -143,7 +144,13 @@ function jobIdFromTaskId(taskId?: string): string | null {
           class="border-b border-surface-border-subtle hover:bg-surface-raised transition-colors"
         >
           <td class="px-3 py-2 text-[13px] font-mono">{{ ep.name }}</td>
-          <td class="px-3 py-2 text-[13px] font-mono text-text-secondary">{{ ep.address }}</td>
+          <td class="px-3 py-2 text-[13px] font-mono text-text-secondary">
+            <span v-if="ep.address" class="group/addr inline-flex items-center gap-1">
+              {{ ep.address }}
+              <CopyButton :value="ep.address" />
+            </span>
+            <span v-else>-</span>
+          </td>
           <td class="px-3 py-2 text-[13px]">
             <RouterLink
               v-if="ep.taskId && jobIdFromTaskId(ep.taskId)"

lib/iris/dashboard/src/components/controller/FleetTab.vue

@@ -8,6 +8,7 @@ import { timestampMs, formatRelativeTime, formatBytes, formatWorkerDevice } from
 
 import DataTable, { type Column } from '@/components/shared/DataTable.vue'
 import EmptyState from '@/components/shared/EmptyState.vue'
+import CopyButton from '@/components/shared/CopyButton.vue'
 
 const { data, loading, error, refresh } = useControllerRpc<ListWorkersResponse>('ListWorkers')
 
@@ -70,7 +71,11 @@ const columns: Column[] = [
         </template>
 
         <template #cell-address="{ row }">
-          {{ (row as WorkerHealthStatus).address ?? '-' }}
+          <span v-if="(row as WorkerHealthStatus).address" class="group/addr inline-flex items-center gap-1">
+            {{ (row as WorkerHealthStatus).address }}
+            <CopyButton :value="(row as WorkerHealthStatus).address!" />
+          </span>
+          <span v-else>-</span>
         </template>
 
         <template #cell-device="{ row }">

lib/iris/dashboard/src/components/controller/WorkerDetail.vue

@@ -19,6 +19,7 @@ import InfoRow from '@/components/shared/InfoRow.vue'
 import MetricCard from '@/components/shared/MetricCard.vue'
 import Sparkline from '@/components/shared/Sparkline.vue'
 import DataTable, { type Column } from '@/components/shared/DataTable.vue'
+import CopyButton from '@/components/shared/CopyButton.vue'
 
 const props = defineProps<{
   workerId: string
@@ -118,8 +119,9 @@ function attributeDisplay(val: { stringValue?: string; intValue?: string; floatV
           />
           {{ worker?.healthy ? 'Healthy' : 'Unhealthy' }}
         </span>
-        <span v-if="worker?.address" class="text-sm text-text-muted font-mono">
+        <span v-if="worker?.address" class="group/addr text-sm text-text-muted font-mono inline-flex items-center gap-1">
           {{ worker.address }}
+          <CopyButton :value="worker.address" />
         </span>
         <button
           class="ml-auto px-3 py-1.5 text-xs border border-surface-border rounded hover:bg-surface-sunken"
@@ -148,7 +150,11 @@ function attributeDisplay(val: { stringValue?: string; intValue?: string; floatV
             <span class="font-mono">{{ worker?.workerId }}</span>
           </InfoRow>
           <InfoRow label="Address">
-            <span class="font-mono">{{ worker?.address ?? '-' }}</span>
+            <span v-if="worker?.address" class="group/addr inline-flex items-center gap-1">
+              <CopyButton :value="worker.address" />
+              <span class="font-mono">{{ worker.address }}</span>
+            </span>
+            <span v-else class="font-mono">-</span>
           </InfoRow>
           <InfoRow v-if="worker?.metadata?.attributes?.zone" label="Zone">
             <span class="font-mono">{{ worker.metadata.attributes.zone.stringValue }}</span>

lib/iris/dashboard/src/components/shared/CopyButton.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = defineProps<{
+  /** The raw value to copy (e.g. "https://10.0.0.1:8080"). Protocol and port are stripped before copying. */
+  value: string
+  /** Tooltip text shown on hover. */
+  title?: string
+}>()
+
+const copied = ref(false)
+
+async function copy() {
+  const ip = props.value.replace(/^https?:\/\//, '').replace(/:\d+$/, '')
+  await navigator.clipboard.writeText(ip)
+  copied.value = true
+  setTimeout(() => { copied.value = false }, 1500)
+}
+</script>
+
+<template>
+  <button
+    class="text-text-muted hover:text-text opacity-0 group-hover/addr:opacity-100 transition-opacity"
+    :title="title ?? 'Copy IP'"
+    @click="copy"
+  >
+    <svg v-if="copied" class="w-3.5 h-3.5 text-status-success" viewBox="0 0 20 20" fill="currentColor">
+      <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+    </svg>
+    <svg v-else class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+      <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
+    </svg>
+  </button>
+</template>