feat(ui): ErrorDetailModal — click error → flat-text modal with copy button (replaces unusable :title tooltip for multi-line SQLAlchemy tracebacks) — Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/src/components/settings/SystemActivityTab.vue

@@ -59,8 +59,12 @@
               <td>{{ r.queue }}</td>
               <td><code>{{ shortTaskName(r.task_name) }}</code></td>
               <td class="fc-tabular">{{ r.target_id ?? '—' }}</td>
-              <td class="fc-err" :title="r.error_message">
-                {{ r.error_type }}
+              <td>
+                <button
+                  type="button" class="fc-err-link"
+                  @click="openError(r.error_type, r.error_message)"
+                  :title="'Click for full error'"
+                >{{ r.error_type }}</button>
               </td>
             </tr>
             <tr v-if="!filteredFailures.length">
@@ -138,6 +142,12 @@
         </div>
       </v-card-text>
     </v-card>
+
+    <ErrorDetailModal
+      v-model="showErrorModal"
+      :title="errorModalTitle"
+      :message="errorModalMessage"
+    />
   </div>
 </template>
 
@@ -145,8 +155,23 @@
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 
 import { useSystemActivityStore } from '../../stores/systemActivity.js'
+import ErrorDetailModal from '../common/ErrorDetailModal.vue'
 import QueuesTable from './QueuesTable.vue'
 
+// Click-to-open modal for full error text. Replaces the unusable
+// :title="..." tooltip (operator-flagged 2026-05-26: SQLAlchemy
+// rollback + traceback content rendered as a cramped browser tooltip
+// you couldn't copy from or scroll within).
+const showErrorModal = ref(false)
+const errorModalTitle = ref('')
+const errorModalMessage = ref('')
+
+function openError(title, message) {
+  errorModalTitle.value = title || 'Error details'
+  errorModalMessage.value = message || ''
+  showErrorModal.value = true
+}
+
 const store = useSystemActivityStore()
 
 const filterQueue = ref(null)
@@ -276,5 +301,18 @@ function formatRelative(iso) {
   font-feature-settings: 'tnum';
 }
 .fc-err { color: rgb(var(--v-theme-error, 220 80 80)); }
+.fc-err-link {
+  /* Styled as a text-only button so the error_type cell stays
+     visually identical to the prior tooltip-bearing row, but is
+     now a real clickable target with hover affordance. */
+  color: rgb(var(--v-theme-error, 220 80 80));
+  background: transparent;
+  border: 0;
+  padding: 0;
+  font: inherit;
+  text-decoration: underline dotted;
+  cursor: pointer;
+}
+.fc-err-link:hover { text-decoration: underline; }
 .fc-muted { color: rgb(var(--v-theme-on-surface-variant)); }
 </style>