feat(tools): improve result previews and outage diagnostics

Author: bigsk1

docs/JARVIS_WEB_UI.md

@@ -187,12 +187,17 @@ A **standalone web application** (`jarvis-web`) providing the full Jarvis experi
   crypto charts.
 - The renderer uses a registry of tool adapters. Each adapter maps its tool's
   payload onto the same bounded presentation model; the shared renderer then
-  handles escaping, safe HTTP links, responsive horizontal scrolling, images,
-  metadata chips, and actions. Overflowing rails expose previous/next controls
-  in the preview header without covering card content; touch swiping and the
-  native scrollbar remain available.
-- Current adapters cover focused Amazon, Home Depot, and eBay products plus
-  Google Hotels, Yelp, Google Flights, and Google Maps results.
+  handles escaping, safe HTTP links, images, metadata chips, and actions. The
+  presentation model supports `rail` for visual browsing, `list` for dense
+  records, and `metrics` for compact measurements. Overflowing rails expose
+  previous/next controls in the preview header without covering card content;
+  touch swiping and the native scrollbar remain available.
+- Current adapters cover Amazon and Google Shopping, Home Depot, eBay search
+  and product details, Google Hotels, Yelp, Google Flights, Google Maps,
+  SerpApi YouTube search, and weather forecasts.
+- YouTube search uses the compact rail for the complete shortlist while Jarvis
+  Web keeps one large playable top-result embed. Direct YouTube detail and
+  downloaded-media results retain their existing specialized players.
 - Add a future structured display with
   `window.structuredResultsRenderer.register(toolName, adapter)`. Keep provider
   payload parsing inside the adapter and return only the small shared

docs/tools/serp-api-tool/README.md

@@ -73,6 +73,16 @@ Standard tool contract:
 }
 ```
 
+### Incident-aware failures
+
+After a final transient SerpApi failure or tool-process timeout, Jarvis makes one
+short, bounded request to SerpApi's public unresolved-incidents JSON endpoint.
+If an active incident specifically matches the engine that failed, the error
+response includes `data.serpapi_incident`, `failure_reason=active_provider_incident`,
+the provider's latest update, its status-page URL, and a recommendation to retry
+later. Unrelated incidents do not replace the original tool error, validation
+errors do not trigger the lookup, and a failed status lookup is ignored.
+
 ## Parameters
 
 | Parameter | Type | Required | Notes |

jarvis-web/client/css/main.css

@@ -2166,6 +2166,24 @@ body {
   background: rgba(255, 255, 255, 0.34);
 }
 
+.structured-results-layout-list .structured-results-track {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-bottom: 0;
+  overflow: visible;
+  scroll-snap-type: none;
+}
+
+.structured-results-layout-metrics .structured-results-track {
+  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
+  grid-auto-flow: row;
+  gap: 8px;
+  padding-bottom: 0;
+  overflow: visible;
+  scroll-snap-type: none;
+}
+
 .structured-result-card {
   display: flex;
   min-width: 0;
@@ -2180,6 +2198,15 @@ body {
   border-top: 2px solid var(--accent-primary, #8ec5ff);
 }
 
+.structured-result-card-video {
+  flex-direction: column;
+}
+
+.structured-result-card-weather {
+  min-height: 118px;
+  border-top: 2px solid #38bdf8;
+}
+
 .structured-result-image {
   display: block;
   width: 96px;
@@ -2195,6 +2222,19 @@ body {
   display: block;
 }
 
+.structured-result-card-video .structured-result-image {
+  width: 100%;
+  min-width: 0;
+  aspect-ratio: 16 / 9;
+}
+
+.structured-result-card-video .structured-result-image img {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  object-fit: cover;
+}
+
 .structured-result-body {
   display: flex;
   flex: 1;
@@ -2205,6 +2245,10 @@ body {
 }
 
 .structured-result-title {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
   color: var(--text-primary);
   font-weight: 700;
   line-height: 1.3;
@@ -2241,6 +2285,17 @@ body {
   line-height: 1.3;
 }
 
+.structured-result-card-video .structured-result-detail {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.structured-result-card-weather .structured-result-detail {
+  text-transform: capitalize;
+}
+
 .structured-result-link {
   margin-top: auto;
   font-size: 0.78rem;
@@ -2263,9 +2318,13 @@ body {
     gap: 10px;
   }
 
-  .structured-results-track {
+  .structured-results-layout-rail .structured-results-track {
     grid-auto-columns: minmax(235px, 82vw);
   }
+
+  .structured-results-layout-metrics .structured-results-track {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }
 
 .product-preview-image {

jarvis-web/client/js/chat.js

@@ -4517,7 +4517,7 @@ class ChatUI {
     return null;
   }
 
-  /** Pull SerpApi YouTube tool payloads (possibly arrays) for iframe embedding. */
+  /** Pull SerpApi YouTube payloads with tool provenance for iframe embedding. */
   _youtubeToolPayloadsForEmbeds(toolResultsData = {}) {
     const out = [];
     if (!toolResultsData || typeof toolResultsData !== 'object') return out;
@@ -4526,10 +4526,14 @@ class ChatUI {
       if (!tr) continue;
       if (Array.isArray(tr)) {
         for (const item of tr) {
-          if (item && typeof item === 'object') out.push(item);
+          if (item && typeof item === 'object') {
+            const payload = item.data && typeof item.data === 'object' ? item.data : item;
+            out.push({toolName: key, payload});
+          }
         }
       } else if (typeof tr === 'object') {
-        out.push(tr);
+        const payload = tr.data && typeof tr.data === 'object' ? tr.data : tr;
+        out.push({toolName: key, payload});
       }
     }
     return out;
@@ -4553,6 +4557,7 @@ class ChatUI {
 
     const embeds = [];
     const seenIds = new Set();
+    const youtubeSearchResultIds = new Set();
 
     const pushEmbed = (videoId, titleHint = '') => {
       if (!videoId || seenIds.has(videoId) || downloadedIds.has(videoId)) return;
@@ -4567,18 +4572,26 @@ class ChatUI {
       });
     };
 
-    for (const payload of this._youtubeToolPayloadsForEmbeds(toolResultsData)) {
+    for (const {toolName, payload} of this._youtubeToolPayloadsForEmbeds(toolResultsData)) {
       const primaryTitle = typeof payload.title === 'string' ? payload.title.trim() : '';
+      const candidates = new Map();
+      const addCandidate = (videoId, titleHint = '') => {
+        if (!videoId) return;
+        const id = String(videoId).trim();
+        if (!id) return;
+        const title = typeof titleHint === 'string' ? titleHint.trim() : '';
+        if (!candidates.has(id) || (!candidates.get(id) && title)) candidates.set(id, title);
+      };
       if (payload.top_url) {
         const vid = this._extractYouTubeVideoId(payload.top_url);
-        if (vid) pushEmbed(vid, primaryTitle);
+        if (vid) addCandidate(vid, primaryTitle);
       }
       if (typeof payload.url === 'string') {
         const vid = this._extractYouTubeVideoId(payload.url);
-        if (vid) pushEmbed(vid, primaryTitle);
+        if (vid) addCandidate(vid, primaryTitle);
       }
       if (payload.video_id != null && String(payload.video_id).trim()) {
-        pushEmbed(String(payload.video_id).trim(), primaryTitle);
+        addCandidate(String(payload.video_id).trim(), primaryTitle);
       }
       for (const listKey of ['results', 'top_results', 'candidates']) {
         const list = payload[listKey];
@@ -4589,12 +4602,19 @@ class ChatUI {
           const hint = itemTitle || primaryTitle;
           if (typeof item.url === 'string') {
             const vid = this._extractYouTubeVideoId(item.url);
-            if (vid) pushEmbed(vid, hint);
+            if (vid) addCandidate(vid, hint);
           } else if (item.video_id != null && String(item.video_id).trim()) {
-            pushEmbed(String(item.video_id).trim(), hint);
+            addCandidate(String(item.video_id).trim(), hint);
           }
         }
       }
+      if (toolName === 'serpapi_youtube_search') {
+        for (const videoId of candidates.keys()) youtubeSearchResultIds.add(videoId);
+        const first = candidates.entries().next().value;
+        if (first) pushEmbed(first[0], first[1]);
+      } else {
+        for (const [videoId, title] of candidates.entries()) pushEmbed(videoId, title);
+      }
     }
 
     const sources = [displayText, rawResponse];
@@ -4607,7 +4627,12 @@ class ChatUI {
         if (embeds.length >= maxEmbeds) break;
 
         const videoId = this._extractYouTubeVideoId(rawUrl);
-        if (!videoId || seenIds.has(videoId) || downloadedIds.has(videoId)) continue;
+        if (
+          !videoId
+          || seenIds.has(videoId)
+          || downloadedIds.has(videoId)
+          || youtubeSearchResultIds.has(videoId)
+        ) continue;
 
         pushEmbed(videoId, '');
       }