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/ImportTaskList.vue

@@ -45,9 +45,11 @@
       <template #item.size_bytes="{ item }">{{ formatBytes(item.size_bytes) }}</template>
       <template #item.created_at="{ item }">{{ formatDate(item.created_at) }}</template>
       <template #item.error="{ item }">
-        <span v-if="item.error" :title="item.error" class="text-caption">
-          {{ shorten(item.error, 60) }}
-        </span>
+        <button
+          v-if="item.error" type="button" class="fc-err-link text-caption"
+          @click="openError(`Task ${item.id} failed`, item.error)"
+          title="Click for full error"
+        >{{ shorten(item.error, 60) }}</button>
       </template>
     </v-data-table-virtual>
     <div v-if="store.hasMore" class="d-flex justify-center py-3">
@@ -100,16 +102,35 @@
         </v-card-actions>
       </v-card>
     </v-dialog>
+
+    <ErrorDetailModal
+      v-model="showErrorModal"
+      :title="errorModalTitle"
+      :message="errorModalMessage"
+    />
   </v-card>
 </template>
 
 <script setup>
 import { computed, ref } from 'vue'
 import { useImportStore } from '../../stores/import.js'
+import ErrorDetailModal from '../common/ErrorDetailModal.vue'
 
 const store = useImportStore()
 const statusFilter = ref(null)
 const clearDialog = ref(false)
+// Click-to-open modal for full error text (operator-flagged 2026-05-26
+// — the prior :title="..." tooltip cramped multi-line SQLAlchemy
+// tracebacks into an unusable popup with no copy-paste affordance).
+const showErrorModal = ref(false)
+const errorModalTitle = ref('')
+const errorModalMessage = ref('')
+
+function openError(title, message) {
+  errorModalTitle.value = title
+  errorModalMessage.value = message || ''
+  showErrorModal.value = true
+}
 const clearAgeDays = ref(7)
 const clearStuckDialog = ref(false)
 
@@ -179,3 +200,21 @@ async function onClearStuckConfirm() {
   clearStuckDialog.value = false
 }
 </script>
+
+<style scoped>
+.fc-err-link {
+  /* Truncated error preview as a clickable button — opens
+     ErrorDetailModal with the full text. Inherits the row's font
+     sizing so it doesn't visually drift from the prior tooltip-bearing
+     span. */
+  color: rgb(var(--v-theme-error, 220 80 80));
+  background: transparent;
+  border: 0;
+  padding: 0;
+  font: inherit;
+  text-align: left;
+  text-decoration: underline dotted;
+  cursor: pointer;
+}
+.fc-err-link:hover { text-decoration: underline; }
+</style>

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>