From 1dbde36b534f174bbaedccaf8e81da12ce7e4d82 Mon Sep 17 00:00:00 2001
From: Jordan Ramos <jordan.ramos@spectrum.com>
Date: Wed, 10 Jun 2026 09:31:21 -0600
Subject: [PATCH] =?UTF-8?q?Improve=20update=5Ftoken=20error=20=E2=80=94=20?=
 =?UTF-8?q?show=20CARD=20link=20for=20assets=20that=20cant=20be=20actioned?=
 =?UTF-8?q?=20via=20API?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When a CARD action fails with 'update_token not found', display a clear
message explaining the asset cannot be actioned via API, with a prominent
'Open in CARD (ID copied)' button that copies the host ID to clipboard and
opens card.charter.com/ipn-search in a new tab.

Applied to both CardDetailModal (reporting page) and CardActionModal (queue).
---
 frontend/src/components/CardActionModal.js | 48 ++++++++++++++++++--
 frontend/src/components/CardDetailModal.js | 51 ++++++++++++++++++++--
 2 files changed, 92 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/CardActionModal.js b/frontend/src/components/CardActionModal.js
index 90b99ad..69d21aa 100644
--- a/frontend/src/components/CardActionModal.js
+++ b/frontend/src/components/CardActionModal.js
@@ -353,9 +353,51 @@ export default function CardActionModal({ isOpen, onClose, item, initialAction,
 
             {/* Execution error */}
             {execError && (
-              <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', padding: '0.5rem 0.75rem', background: 'rgba(239, 68, 68, 0.1)', border: '1px solid rgba(239, 68, 68, 0.3)', borderRadius: '0.375rem', marginBottom: '0.75rem' }}>
-                <AlertCircle style={{ width: '13px', height: '13px', color: '#EF4444', flexShrink: 0 }} />
-                <span style={{ fontSize: '0.7rem', color: '#FCA5A5' }}>{execError}</span>
+              <div style={{ padding: '0.5rem 0.75rem', background: 'rgba(239, 68, 68, 0.1)', border: '1px solid rgba(239, 68, 68, 0.3)', borderRadius: '0.375rem', marginBottom: '0.75rem' }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                  <AlertCircle style={{ width: '13px', height: '13px', color: '#EF4444', flexShrink: 0 }} />
+                  <span style={{ fontSize: '0.7rem', color: '#FCA5A5' }}>
+                    {execError.includes('update_token') ? 'Cannot action via API — this asset has no update token.' : execError}
+                  </span>
+                </div>
+                {execError.includes('update_token') && item?.host_id && (
+                  <div style={{ marginTop: '0.4rem', paddingTop: '0.4rem', borderTop: '1px solid rgba(239, 68, 68, 0.2)' }}>
+                    <span style={{ fontSize: '0.65rem', color: '#94A3B8', display: 'block', marginBottom: '0.3rem' }}>
+                      Action this asset directly in CARD instead:
+                    </span>
+                    <button
+                      onClick={() => {
+                        try {
+                          const ta = document.createElement('textarea');
+                          ta.value = String(item.host_id);
+                          ta.style.position = 'fixed';
+                          ta.style.opacity = '0';
+                          document.body.appendChild(ta);
+                          ta.select();
+                          document.execCommand('copy');
+                          document.body.removeChild(ta);
+                        } catch (_) { /* best effort */ }
+                        window.open('https://card.charter.com/ipn-search', '_blank');
+                      }}
+                      style={{
+                        display: 'inline-flex', alignItems: 'center', gap: '0.35rem',
+                        padding: '0.35rem 0.75rem',
+                        background: 'rgba(14, 165, 233, 0.15)',
+                        border: '1px solid rgba(14, 165, 233, 0.5)',
+                        borderRadius: '0.3rem',
+                        color: '#7DD3FC',
+                        fontSize: '0.7rem', fontWeight: '600', fontFamily: 'monospace',
+                        cursor: 'pointer',
+                        transition: 'all 0.12s',
+                      }}
+                      onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(14, 165, 233, 0.3)'; }}
+                      onMouseLeave={(e) => { e.currentTarget.style.background = 'rgba(14, 165, 233, 0.15)'; }}
+                    >
+                      <ExternalLink style={{ width: 12, height: 12 }} />
+                      Open in CARD (ID copied)
+                    </button>
+                  </div>
+                )}
               </div>
             )}
 
diff --git a/frontend/src/components/CardDetailModal.js b/frontend/src/components/CardDetailModal.js
index fdb8700..5896d00 100644
--- a/frontend/src/components/CardDetailModal.js
+++ b/frontend/src/components/CardDetailModal.js
@@ -7,7 +7,7 @@
  */
 
 import React, { useState, useEffect, useCallback } from 'react';
-import { X, Loader, AlertCircle, CheckCircle, XCircle, ArrowRightLeft } from 'lucide-react';
+import { X, Loader, AlertCircle, CheckCircle, XCircle, ArrowRightLeft, ExternalLink } from 'lucide-react';
 
 // ⚠️ CONVENTION: Prefer using REACT_APP_API_BASE without an absolute URL fallback — other components use relative paths via the env var (e.g. '' default) rather than hardcoding http://localhost:3001/api
 const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
@@ -338,9 +338,52 @@ export default function CardDetailModal({ isOpen, onClose, ip, ownerData: initia
 
                         {/* Execution error */}
                         {execError && (
-                            <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', padding: '0.5rem 0.75rem', background: 'rgba(239, 68, 68, 0.1)', border: '1px solid rgba(239, 68, 68, 0.3)', borderRadius: '0.375rem', marginBottom: '0.75rem' }}>
-                                <AlertCircle style={{ width: '13px', height: '13px', color: '#EF4444', flexShrink: 0 }} />
-                                <span style={{ fontSize: '0.7rem', color: '#FCA5A5' }}>{execError}</span>
+                            <div style={{ padding: '0.5rem 0.75rem', background: 'rgba(239, 68, 68, 0.1)', border: '1px solid rgba(239, 68, 68, 0.3)', borderRadius: '0.375rem', marginBottom: '0.75rem' }}>
+                                <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                                    <AlertCircle style={{ width: '13px', height: '13px', color: '#EF4444', flexShrink: 0 }} />
+                                    <span style={{ fontSize: '0.7rem', color: '#FCA5A5' }}>
+                                        {execError.includes('update_token') ? 'Cannot action via API — this asset has no update token.' : execError}
+                                    </span>
+                                </div>
+                                {execError.includes('update_token') && (
+                                    <div style={{ marginTop: '0.4rem', paddingTop: '0.4rem', borderTop: '1px solid rgba(239, 68, 68, 0.2)' }}>
+                                        <span style={{ fontSize: '0.65rem', color: '#94A3B8', display: 'block', marginBottom: '0.3rem' }}>
+                                            Action this asset directly in CARD instead:
+                                        </span>
+                                        <button
+                                            onClick={() => {
+                                                const hostId = ownerData?.asset_id ? ownerData.asset_id.replace(/-[A-Z]+$/i, '') : ip;
+                                                try {
+                                                    const ta = document.createElement('textarea');
+                                                    ta.value = String(hostId);
+                                                    ta.style.position = 'fixed';
+                                                    ta.style.opacity = '0';
+                                                    document.body.appendChild(ta);
+                                                    ta.select();
+                                                    document.execCommand('copy');
+                                                    document.body.removeChild(ta);
+                                                } catch (_) { /* best effort */ }
+                                                window.open('https://card.charter.com/ipn-search', '_blank');
+                                            }}
+                                            style={{
+                                                display: 'inline-flex', alignItems: 'center', gap: '0.35rem',
+                                                padding: '0.35rem 0.75rem',
+                                                background: 'rgba(14, 165, 233, 0.15)',
+                                                border: '1px solid rgba(14, 165, 233, 0.5)',
+                                                borderRadius: '0.3rem',
+                                                color: '#7DD3FC',
+                                                fontSize: '0.7rem', fontWeight: '600', fontFamily: 'monospace',
+                                                cursor: 'pointer',
+                                                transition: 'all 0.12s',
+                                            }}
+                                            onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(14, 165, 233, 0.3)'; }}
+                                            onMouseLeave={(e) => { e.currentTarget.style.background = 'rgba(14, 165, 233, 0.15)'; }}
+                                        >
+                                            <ExternalLink style={{ width: 12, height: 12 }} />
+                                            Open in CARD (ID copied)
+                                        </button>
+                                    </div>
+                                )}
                             </div>
                         )}