sea-dev 1.0.0

package/libs/ui/src/components/chart-viz/types.ts

@@ -0,0 +1,95 @@
+export interface ChartConfig {
+  type?: string;
+  props?: unknown;
+  title?: string | { text: string };
+  [key: string]: unknown;
+}
+
+export interface DashboardConfig {
+  type: "Dashboard";
+  title: string | { text: string };
+  components: ComponentConfig[];
+}
+
+export interface ComponentConfig {
+  type: string;
+  props: unknown;
+}
+
+export interface MetricCardProps {
+  label: string;
+  value: number;
+  format?: "currency" | "percent" | "number";
+}
+
+export interface WaterfallItem {
+  name: string;
+  value: number;
+  type?: "start" | "positive" | "negative" | "subtotal" | "total";
+}
+
+export interface BulletItem {
+  name: string;
+  value: number;
+  threshold: number;
+  max?: number;
+  ranges?: number[];
+}
+
+export interface HeatmapProps {
+  title: string;
+  matrix: number[][];
+  xLabels: string[];
+  yLabels: string[];
+  xVariable?: string;
+  yVariable?: string;
+  min?: number;
+  max?: number;
+  colorRange?: string[];
+  showLabels?: boolean;
+  format?: "percent" | "currency" | "number";
+}
+
+// Table types
+export interface TableColumn {
+  header: string;
+  field: string;
+  format?: "currency" | "percent" | "date" | "number";
+  frozen?: boolean;
+  width?: number;
+}
+
+export interface TableConfig {
+  type: "Table";
+  title?: string;
+  columns: TableColumn[];
+  data: unknown[];
+  tree?: {
+    enabled: boolean;
+    childrenField: string;
+  };
+  features?: {
+    sorting?: boolean;
+    filtering?: boolean;
+  };
+}
+
+// Markdown types
+export interface InlineChartConfig {
+  type: "bar" | "line" | "pie" | "gauge" | "sparkline";
+  data: number[] | { name: string; value: number }[];
+  height?: number;
+  color?: string;
+}
+
+export interface MarkdownConfig {
+  type: "Markdown";
+  title?: string;
+  content: string;
+  metadata?: {
+    type?: "credit_summary" | "analysis" | "report";
+    score?: number;
+    recommendation?: string;
+  };
+  inlineCharts?: Record<string, InlineChartConfig>;
+}

package/libs/ui/src/components/doc-viewers/excel/index.tsx

@@ -0,0 +1,431 @@
+import type { ExtractionInfo, SourceAnnotation } from "@sea/core/data-extraction/types";
+import { Button } from "@sea/ui/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@sea/ui/components/ui/dropdown-menu";
+import { formatISODate } from "@sea/util/fmt";
+import ExcelJS from "exceljs";
+import { ChevronDownIcon } from "lucide-react";
+import type { CSSProperties } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { resolveExcelColor } from "./themes";
+
+export interface ExcelCell {
+  value: string;
+  colNumber: number;
+  rowspan?: number;
+  colspan?: number;
+  backgroundColor?: string;
+  textColor?: string;
+  fontWeight?: string;
+  fontStyle?: string;
+  textAlign?: string;
+  verticalAlign?: string;
+}
+
+export interface ExcelRow {
+  rowNumber: number;
+  cells: ExcelCell[];
+}
+
+export interface ExcelSheet {
+  name: string;
+  rows: ExcelRow[];
+}
+
+export interface ExcelWorkbook {
+  sheets: Record<number, ExcelSheet>;
+}
+
+function parseCell(cell: ExcelJS.Cell, colNumber: number): ExcelCell | null {
+  const value = getCellValueAsString(cell);
+  const excelCell: ExcelCell = { value, colNumber };
+
+  if (cell.isMerged) {
+    const master = cell.master;
+
+    // if this cell is not the master cell of the merge, return null to skip it
+    // (it will be covered by the master cell's rowspan/colspan)
+    if (master && (master.row !== cell.row || master.col !== cell.col)) return null;
+
+    // othewise find its range and update rowspan/colspan
+    const worksheet = cell.worksheet;
+    const merges = worksheet.model.merges || [];
+    for (const mergeString of merges) {
+      const [startAddr, endAddr] = mergeString.split(":");
+
+      if (startAddr === master.address && endAddr) {
+        const endCell = worksheet.getCell(endAddr);
+        const rowspan = Number(endCell.row) - Number(cell.row) + 1;
+        const colspan = Number(endCell.col) - Number(cell.col) + 1;
+
+        if (rowspan > 1) excelCell.rowspan = rowspan;
+        if (colspan > 1) excelCell.colspan = colspan;
+        break;
+      }
+    }
+  }
+
+  if (cell.style.fill?.type === "pattern" && cell.style.fill.pattern !== "none") {
+    const color = cell.style.fill.fgColor;
+    if (color) {
+      const backgroundColor = resolveExcelColor(color);
+      if (backgroundColor) {
+        excelCell.backgroundColor = backgroundColor;
+      }
+    }
+  }
+
+  if (cell.style?.font) {
+    const fontColor = cell.style.font.color;
+    const fontWeight = cell.style.font.bold;
+    const fontStyle = cell.style.font.italic;
+
+    if (fontColor) {
+      const textColor = resolveExcelColor(fontColor);
+      if (textColor) {
+        excelCell.textColor = textColor;
+      }
+    }
+
+    if (fontWeight) {
+      excelCell.fontWeight = "bold";
+    }
+    if (fontStyle) {
+      excelCell.fontStyle = "italic";
+    }
+  }
+
+  if (cell.style?.alignment?.horizontal) {
+    excelCell.textAlign = cell.style.alignment.horizontal;
+  }
+
+  if (cell.style?.alignment?.vertical) {
+    excelCell.verticalAlign = cell.style.alignment.vertical;
+  }
+
+  return excelCell;
+}
+
+function getCellValueAsString(cell: ExcelJS.Cell): string {
+  if (!cell.value) return "";
+  if (cell.type === ExcelJS.ValueType.Date) {
+    return formatISODate(cell.value as Date);
+  }
+  if (cell.type === ExcelJS.ValueType.RichText) {
+    const richText = cell.value as ExcelJS.CellRichTextValue;
+    return richText.richText?.map((rt) => rt.text).join("") ?? "";
+  }
+  // Ensure we always return a string, not an object
+  const text = cell.text;
+  if (typeof text === "string") return text;
+  if (typeof text === "number") return String(text);
+  return String(cell.value);
+}
+
+export const ExcelViewer = ({
+  excelFile,
+  boundingKey,
+  activeCitationId,
+  onSelectCitation,
+}: {
+  excelFile: ExtractionInfo;
+  boundingKey: string | undefined;
+  activeCitationId: string | undefined;
+  onSelectCitation: (citationId: string, key: string) => void;
+}) => {
+  const [excelData, setExcelData] = useState<ExcelWorkbook | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedSheet, setSelectedSheet] = useState<number | null>(null);
+  const [annotations, setAnnotations] = useState<SourceAnnotation[]>([]);
+
+  const loadSheetData = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      const response = await fetch(excelFile.url ?? "");
+      if (!response.ok) {
+        throw new Error(`Failed to fetch Excel file: ${response.statusText}`);
+      }
+      const arrayBuffer = await response.arrayBuffer();
+      const workbook = new ExcelJS.Workbook();
+      await workbook.xlsx.load(arrayBuffer);
+
+      const sheets: Record<number, ExcelSheet> = {};
+      workbook.eachSheet((worksheet, id) => {
+        const sheetName = worksheet.name;
+        const rows: ExcelRow[] = [];
+
+        worksheet.eachRow({ includeEmpty: false }, (row, rowNumber) => {
+          if (row.hidden) return;
+
+          const cells: ExcelCell[] = [];
+          row.eachCell({ includeEmpty: true }, (cell, colNumber) => {
+            const column = worksheet.getColumn(cell.col);
+            if (column.hidden) return;
+
+            const parsedCell = parseCell(cell, colNumber);
+            if (parsedCell) {
+              cells.push(parsedCell);
+            }
+          });
+          rows.push({ cells, rowNumber });
+        });
+
+        sheets[id] = { name: sheetName, rows };
+      });
+
+      setExcelData({ sheets });
+      // Set first sheet as selected by default if none selected
+      if (Object.keys(sheets).length > 0) {
+        setSelectedSheet((prev) => (prev ? prev : Number(Object.keys(sheets)[0])));
+      }
+    } catch (err) {
+      console.error("Failed to load Excel file:", err);
+      setError(err instanceof Error ? err.message : "Failed to load Excel file");
+    } finally {
+      setLoading(false);
+    }
+  }, [excelFile.url, setLoading, setError, setExcelData, setSelectedSheet]);
+
+  useEffect(() => {
+    loadSheetData();
+  }, [loadSheetData]);
+
+  useEffect(() => {
+    const { citations } = excelFile;
+    const annotationsBySource: { [key: string]: SourceAnnotation } = {};
+
+    for (const c of citations) {
+      for (const [key, boundingRegions] of Object.entries(c.boundingRegions)) {
+        if (annotationsBySource[key]) {
+          annotationsBySource[key].linkedCitations.push(c);
+        } else {
+          annotationsBySource[key] = {
+            key,
+            boundingRegions,
+            linkedCitations: [c],
+          };
+        }
+      }
+    }
+
+    setAnnotations(Object.values(annotationsBySource));
+  }, [excelFile]);
+
+  useEffect(() => {
+    if (activeCitationId) {
+      const annotation = annotations.find((a) =>
+        a.linkedCitations.some((c) => c.id === activeCitationId),
+      );
+      if (annotation) {
+        const sheetId = annotation.boundingRegions[0]?.pageNumber;
+        if (sheetId) {
+          setSelectedSheet(sheetId);
+        }
+      }
+    }
+  }, [activeCitationId, annotations, setSelectedSheet]);
+
+  if (error) {
+    return loading ? (
+      <div className="flex h-full items-center justify-center">
+        <div className="text-center">
+          <div className="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-blue-600" />
+          <p>Loading Excel file...</p>
+        </div>
+      </div>
+    ) : (
+      <div className="flex h-full items-center justify-center">
+        <div className="text-center text-red-600">
+          <p className="mb-2">Error loading Excel file:</p>
+          <p className="text-sm">{error}</p>
+          <Button variant="outline" onClick={loadSheetData} className="mt-4">
+            Retry
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  if (!excelData || Object.keys(excelData.sheets).length === 0) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <p>No data found in Excel file</p>
+      </div>
+    );
+  }
+
+  const currentSheet = selectedSheet ? excelData.sheets[selectedSheet] : null;
+
+  return (
+    <div className="flex h-full flex-col">
+      {Object.keys(excelData.sheets).length > 1 && (
+        <div className="border-b p-4">
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-medium">Sheet:</span>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="sm">
+                  {currentSheet?.name}
+                  <ChevronDownIcon className="ml-2 h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent>
+                {Object.entries(excelData.sheets).map(([id, sheet]) => (
+                  <DropdownMenuItem key={id} onClick={() => setSelectedSheet(Number(id))}>
+                    {sheet.name}
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+      )}
+
+      {/* Sheet content */}
+      <div className="flex-1 overflow-auto p-4">
+        {currentSheet && (
+          <ExcelSheetComponent
+            sheet={currentSheet}
+            sheetIndex={selectedSheet ?? 0}
+            annotations={annotations}
+            boundingKey={boundingKey}
+            onSelectCitation={onSelectCitation}
+            documentId={excelFile.documentId}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+const ExcelSheetComponent = ({
+  sheet,
+  sheetIndex,
+  annotations,
+  boundingKey,
+  onSelectCitation,
+  documentId,
+}: {
+  sheet: ExcelSheet;
+  sheetIndex: number;
+  annotations?: SourceAnnotation[];
+  boundingKey?: string;
+  onSelectCitation?: (citationId: string, key: string) => void;
+  documentId: string;
+}) => {
+  const activeCellRef = useRef<HTMLTableCellElement | null>(null);
+
+  if (!sheet.rows || sheet.rows.length === 0) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <p>No data in this sheet</p>
+      </div>
+    );
+  }
+
+  // Build a map of cell highlights: Map<"rowIndex-cellIndex", annotation>
+  const cellHighlights = useMemo(() => {
+    const map = new Map<string, { annotation: SourceAnnotation; isActive: boolean }>();
+    annotations?.forEach((a) => {
+      a.boundingRegions.forEach((r) => {
+        if (r.pageNumber === sheetIndex) {
+          const [rowIdx, colIdx] = r.polygon;
+          const isActive = a.key === boundingKey;
+          map.set(`/s${sheetIndex}/t0/${rowIdx}/${colIdx}`, { annotation: a, isActive });
+        }
+      });
+    });
+
+    return map;
+  }, [annotations, documentId, sheetIndex, boundingKey]);
+
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (boundingKey && activeCellRef.current) {
+      activeCellRef.current.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+        inline: "center",
+      });
+    }
+  }, [boundingKey]);
+
+  // TODO: ideally we render the grid on a canvas, but this will do for now
+  return (
+    <div className="overflow-auto" ref={containerRef}>
+      <table className="min-w-full border-collapse">
+        <tbody>
+          {sheet.rows.map((row) => (
+            <tr key={row.rowNumber}>
+              {row.cells.map((cell) => {
+                const style: CSSProperties = {};
+                if (cell.backgroundColor) style.backgroundColor = cell.backgroundColor;
+                if (cell.textColor) style.color = cell.textColor;
+                if (cell.fontWeight) style.fontWeight = cell.fontWeight;
+                if (cell.fontStyle) style.fontStyle = cell.fontStyle;
+                if (cell.textAlign) style.textAlign = cell.textAlign as CSSProperties["textAlign"];
+                if (cell.verticalAlign)
+                  style.verticalAlign = cell.verticalAlign as CSSProperties["verticalAlign"];
+
+                const cellKey = `/s${sheetIndex}/t0/${row.rowNumber}/${cell.colNumber}`;
+                const highlight = cellHighlights.get(cellKey);
+                if (highlight) {
+                  if (highlight.isActive) {
+                    style.backgroundColor = "rgba(244, 63, 94, 0.25)";
+                    style.border = "2px solid rgba(225, 29, 72, 0.9)";
+                  } else {
+                    style.backgroundColor = "rgba(0, 191, 255, 0.18)";
+                  }
+                }
+
+                const handleClick = () => {
+                  if (highlight && onSelectCitation && highlight.annotation.linkedCitations[0]) {
+                    onSelectCitation(
+                      highlight.annotation.linkedCitations[0].id,
+                      highlight.annotation.key,
+                    );
+                  }
+                };
+
+                return highlight?.isActive ? (
+                  <td
+                    key={cell.colNumber}
+                    rowSpan={cell.rowspan}
+                    colSpan={cell.colspan}
+                    className={`border border-gray-300 px-2 py-1 text-sm ${highlight ? "cursor-pointer" : ""}`}
+                    style={style}
+                    title={cell.value}
+                    onClick={handleClick}
+                    ref={activeCellRef}
+                  >
+                    {cell.value}
+                  </td>
+                ) : (
+                  <td
+                    key={cell.colNumber}
+                    rowSpan={cell.rowspan}
+                    colSpan={cell.colspan}
+                    className={`border border-gray-300 px-2 py-1 text-sm ${highlight ? "cursor-pointer" : ""}`}
+                    style={style}
+                    title={cell.value}
+                    onClick={handleClick}
+                  >
+                    {cell.value}
+                  </td>
+                );
+              })}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};

package/libs/ui/src/components/doc-viewers/excel/themes.ts

@@ -0,0 +1,160 @@
+/**
+ * Excel theme colors (Office 2007+ default theme)
+ * These are the default color scheme used when theme colors are referenced
+ */
+const EXCEL_THEME_COLORS = [
+  "FFFFFF", // 0: Light 1 (White)
+  "000000", // 1: Dark 1 (Black)
+  "E7E6E6", // 2: Light 2
+  "44546A", // 3: Dark 2
+  "4472C4", // 4: Accent 1 (Blue)
+  "ED7D31", // 5: Accent 2 (Orange)
+  "A5A5A5", // 6: Accent 3 (Gray)
+  "FFC000", // 7: Accent 4 (Gold)
+  "5B9BD5", // 8: Accent 5 (Light Blue)
+  "70AD47", // 9: Accent 6 (Green)
+  "264478", // 10: Hyperlink (Dark Blue)
+  "9C5700", // 11: Followed Hyperlink (Brown)
+];
+
+/**
+ * Excel indexed colors (legacy color palette)
+ */
+const EXCEL_INDEXED_COLORS: Record<number, string> = {
+  0: "000000", // Black
+  1: "FFFFFF", // White
+  2: "FF0000", // Red
+  3: "00FF00", // Green
+  4: "0000FF", // Blue
+  5: "FFFF00", // Yellow
+  6: "FF00FF", // Magenta
+  7: "00FFFF", // Cyan
+  8: "000000", // Black
+  9: "FFFFFF", // White
+  10: "FF0000", // Red
+  11: "00FF00", // Green
+  12: "0000FF", // Blue
+  13: "FFFF00", // Yellow
+  14: "FF00FF", // Magenta
+  15: "00FFFF", // Cyan
+  16: "800000", // Dark Red
+  17: "008000", // Dark Green
+  18: "000080", // Dark Blue
+  19: "808000", // Olive
+  20: "800080", // Purple
+  21: "008080", // Teal
+  22: "C0C0C0", // Silver
+  23: "808080", // Gray
+  24: "9999FF", // Periwinkle
+  25: "993366", // Plum
+  26: "FFFFCC", // Ivory
+  27: "CCFFFF", // Light Turquoise
+  28: "660066", // Dark Purple
+  29: "FF8080", // Coral
+  30: "0066CC", // Ocean Blue
+  31: "CCCCFF", // Ice Blue
+  32: "000080", // Dark Blue
+  33: "FF00FF", // Magenta
+  34: "FFFF00", // Yellow
+  35: "00FFFF", // Cyan
+  36: "800080", // Purple
+  37: "800000", // Maroon
+  38: "008080", // Teal
+  39: "0000FF", // Blue
+  40: "00CCFF", // Sky Blue
+  41: "CCFFFF", // Light Turquoise
+  42: "CCFFCC", // Light Green
+  43: "FFFF99", // Light Yellow
+  44: "99CCFF", // Pale Blue
+  45: "FF99CC", // Rose
+  46: "CC99FF", // Lavender
+  47: "FFCC99", // Tan
+  48: "3366FF", // Light Blue
+  49: "33CCCC", // Aqua
+  50: "99CC00", // Lime
+  51: "FFCC00", // Gold
+  52: "FF9900", // Orange
+  53: "FF6600", // Orange Red
+  54: "666699", // Blue Gray
+  55: "969696", // Gray 40%
+  56: "003366", // Dark Teal
+  57: "339966", // Sea Green
+  58: "003300", // Dark Green
+  59: "333300", // Olive Green
+  60: "993300", // Brown
+  61: "993366", // Plum
+  62: "333399", // Indigo
+  63: "333333", // Gray 80%
+  64: "000000", // Auto/System (treated as black)
+};
+
+/**
+ * Apply tint to an RGB color
+ * Tint is a value between -1 and 1:
+ * - Positive values lighten the color
+ * - Negative values darken the color
+ */
+function applyTint(rgb: string, tint: number): string {
+  // parse rgb components
+  const r = parseInt(rgb.substring(0, 2), 16);
+  const g = parseInt(rgb.substring(2, 4), 16);
+  const b = parseInt(rgb.substring(4, 6), 16);
+
+  // convert to hsl for tint application
+  const rNorm = r / 255;
+  const gNorm = g / 255;
+  const bNorm = b / 255;
+
+  if (tint < 0) {
+    // darken: multiply by (1 + tint)
+    const factor = 1 + tint;
+    const newR = Math.round(rNorm * factor * 255);
+    const newG = Math.round(gNorm * factor * 255);
+    const newB = Math.round(bNorm * factor * 255);
+    return toHex(newR) + toHex(newG) + toHex(newB);
+  } else {
+    // lighten: interpolate towards white
+    const newR = Math.round((rNorm + (1 - rNorm) * tint) * 255);
+    const newG = Math.round((gNorm + (1 - gNorm) * tint) * 255);
+    const newB = Math.round((bNorm + (1 - bNorm) * tint) * 255);
+    return toHex(newR) + toHex(newG) + toHex(newB);
+  }
+}
+
+/**
+ * Convert number to 2-digit hex
+ */
+function toHex(n: number): string {
+  const clamped = Math.max(0, Math.min(255, Math.round(n)));
+  return clamped.toString(16).padStart(2, "0").toUpperCase();
+}
+
+/**
+ * Convert Excel color reference to hex color string
+ */
+export function resolveExcelColor(color: {
+  argb?: string;
+  theme?: number;
+  indexed?: number;
+  tint?: number;
+}): string | undefined {
+  // direct argb color
+  if (color.argb) {
+    // remove alpha channel (first 2 chars) if present
+    return `#${color.argb.length === 8 ? color.argb.substring(2) : color.argb}`;
+  }
+
+  // otherwise get predefined base color from array
+  const baseColor = color.theme
+    ? EXCEL_THEME_COLORS[color.theme]
+    : color.indexed
+      ? EXCEL_INDEXED_COLORS[color.indexed]
+      : undefined;
+
+  // apply tint if present, otherwise return base color
+  if (baseColor) {
+    return color.tint ? `#${applyTint(baseColor, color.tint)}` : `#${baseColor}`;
+  }
+
+  return undefined;
+}