feat(run-history): per-run insights on expanded row

Expandable rows now cover more than just FAILURE. Clicking the
expander on any SUCCESS / FAILURE / RETRY / REVOKED run opens an
insights panel that reads as an extension of the row:

- Status header with a tinted icon (green check for success, red
  cross for failure, etc.), start_time, and duration.
- Scope tag (Single model vs Full job) plus the list of models
  attempted. Model list is derived from kwargs.models_override for
  scoped runs or from kwargs.model_configs.enabled for full runs.
  Back-compat handling for legacy kwargs.source === "quick_deploy".
- For FAILURE runs, the error_message renders in a preformatted,
  scrollable Alert so stack traces preserve whitespace and don't
  blow out the page.
- Whole panel uses theme tokens (colorSuccessBg / colorErrorBg /
  colorInfoBg etc.) so light and dark both track.

Runtime-captured metrics (rows processed, tables written, schemas
touched) are not yet surfaced because the scheduler pipeline doesn't
persist them to TaskRunHistory.result today. Documented in the PR
for follow-up instrumentation.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: abhizipstack

frontend/src/ide/run-history/Runhistory.jsx

@@ -1,8 +1,10 @@
 import { useEffect, useState, useMemo, useCallback } from "react";
 import {
+  Alert,
   Select,
   Table,
   Tag,
+  theme,
   Typography,
   Empty,
   Button,
@@ -13,6 +15,10 @@ import {
   ReloadOutlined,
   CalendarOutlined,
   DatabaseOutlined,
+  CheckCircleFilled,
+  CloseCircleFilled,
+  ClockCircleOutlined,
+  SyncOutlined,
 } from "@ant-design/icons";
 import { useSearchParams } from "react-router-dom";
 
@@ -87,6 +93,7 @@ const Runhistory = () => {
   const { selectedOrgId } = orgStore();
   const { notify } = useNotificationService();
   const [searchParams, setSearchParams] = useSearchParams();
+  const { token } = theme.useToken();
 
   /* ─── API calls ─── */
   const getRunHistoryList = async (
@@ -268,6 +275,62 @@ const Runhistory = () => {
     []
   );
 
+  /* ─── derive scope summary from a run row ─── */
+  const getRunInsights = (record) => {
+    const kw = record?.kwargs || {};
+    const modelsOverride = kw.models_override || [];
+    const legacyQuick = kw.source === "quick_deploy";
+    const scope =
+      kw.scope || (modelsOverride.length > 0 || legacyQuick ? "model" : "job");
+    let models = modelsOverride;
+    if (!models.length && scope === "job") {
+      const configs = kw.model_configs || {};
+      models = Object.entries(configs)
+        .filter(([, cfg]) => cfg?.enabled !== false)
+        .map(([name]) => name);
+    }
+    return { scope, models };
+  };
+
+  const STATUS_META = {
+    SUCCESS: {
+      icon: <CheckCircleFilled />,
+      label: "Succeeded",
+      color: token.colorSuccess,
+      bg: token.colorSuccessBg,
+    },
+    FAILURE: {
+      icon: <CloseCircleFilled />,
+      label: "Failed",
+      color: token.colorError,
+      bg: token.colorErrorBg,
+    },
+    STARTED: {
+      icon: <SyncOutlined spin />,
+      label: "Running",
+      color: token.colorInfo,
+      bg: token.colorInfoBg,
+    },
+    RETRY: {
+      icon: <SyncOutlined spin />,
+      label: "Retrying",
+      color: token.colorWarning,
+      bg: token.colorWarningBg,
+    },
+    REVOKED: {
+      icon: <ClockCircleOutlined />,
+      label: "Revoked",
+      color: token.colorTextSecondary,
+      bg: token.colorFillQuaternary,
+    },
+    PENDING: {
+      icon: <ClockCircleOutlined />,
+      label: "Pending",
+      color: token.colorTextSecondary,
+      bg: token.colorFillQuaternary,
+    },
+  };
+
   /* ─── empty text ─── */
   const emptyDescription = useMemo(() => {
     if (!jobListItems.length) return "No jobs created yet";
@@ -344,15 +407,89 @@ const Runhistory = () => {
           size="small"
           bordered
           expandable={{
-            expandedRowRender: (record) => (
-              <div className="runhistory-error-row">
-                <Typography.Text type="danger">
-                  {record.error_message}
-                </Typography.Text>
-              </div>
-            ),
+            expandedRowRender: (record) => {
+              const meta = STATUS_META[record.status] || STATUS_META.PENDING;
+              const { scope, models } = getRunInsights(record);
+              const isFailure = record.status === "FAILURE";
+              return (
+                <div
+                  style={{
+                    borderLeft: `3px solid ${meta.color}`,
+                    padding: "10px 12px",
+                    background: meta.bg,
+                  }}
+                >
+                  <div
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 8,
+                      marginBottom: 8,
+                    }}
+                  >
+                    <span style={{ color: meta.color }}>{meta.icon}</span>
+                    <Typography.Text strong style={{ color: meta.color }}>
+                      {meta.label}
+                    </Typography.Text>
+                    {record.start_time && (
+                      <Typography.Text
+                        type="secondary"
+                        style={{ fontSize: 12 }}
+                      >
+                        · {record.start_time}
+                      </Typography.Text>
+                    )}
+                    {record.duration && (
+                      <Typography.Text
+                        type="secondary"
+                        style={{ fontSize: 12 }}
+                      >
+                        · {formatDuration(record.duration)}
+                      </Typography.Text>
+                    )}
+                  </div>
+                  <Space
+                    size={8}
+                    wrap
+                    style={{ marginBottom: isFailure ? 8 : 0 }}
+                  >
+                    <Tag color={scope === "model" ? "purple" : "default"}>
+                      {scope === "model" ? "Single model" : "Full job"}
+                    </Tag>
+                    <Typography.Text type="secondary" style={{ fontSize: 12 }}>
+                      {models.length > 0
+                        ? `Models attempted: ${models.join(", ")}`
+                        : "No model configuration recorded for this run."}
+                    </Typography.Text>
+                  </Space>
+                  {isFailure && record.error_message && (
+                    <Alert
+                      type="error"
+                      showIcon={false}
+                      message={
+                        <pre
+                          style={{
+                            margin: 0,
+                            maxHeight: 240,
+                            overflow: "auto",
+                            whiteSpace: "pre-wrap",
+                            wordBreak: "break-word",
+                            fontFamily: token.fontFamilyCode,
+                            fontSize: 12,
+                          }}
+                        >
+                          {record.error_message}
+                        </pre>
+                      }
+                    />
+                  )}
+                </div>
+              );
+            },
             rowExpandable: (record) =>
-              record.status === "FAILURE" && !!record.error_message,
+              ["SUCCESS", "FAILURE", "RETRY", "REVOKED"].includes(
+                record.status
+              ),
             expandedRowKeys,
             onExpand: handleExpand,
           }}