or1-design / monitor / frontend / src / style.ts

import { baseStylesheet } from "@common/style";
import type cytoscape from "cytoscape";
import { rp, rpMoon } from "./palette";

const monitorDarkModeOverrides: cytoscape.StylesheetStyle[] = [
  // Base node: rosé pine dark background
  {
    selector: "node",
    style: {
      "background-color": rp.surface,
      "background-opacity": 1,
      color: rp.text,
      "border-color": rp.highlightMed,
      "text-outline-width": 0,
    },
  },
  // Per-category border colours (override data(colour) from server)
  {
    selector: 'node[category = "arithmetic"]',
    style: { "border-color": rp.foam },
  },
  {
    selector: 'node[category = "logic"]',
    style: { "border-color": rp.pine },
  },
  {
    selector: 'node[category = "comparison"]',
    style: { "border-color": rp.gold },
  },
  {
    selector: 'node[category = "routing"]',
    style: { "border-color": rp.iris },
  },
  {
    selector: 'node[category = "memory"]',
    style: { "border-color": rpMoon.rose },
  },
  {
    selector: 'node[category = "io"]',
    style: { "border-color": rpMoon.pine },
  },
  {
    selector: 'node[category = "config"]',
    style: { "border-color": rp.muted },
  },
  // SM node: warm gold/rose tones
  {
    selector: 'node[category = "structure_memory"]',
    style: {
      "background-color": rp.overlay,
      "background-opacity": 0.9,
      "border-color": rp.gold,
      color: rp.rose,
    },
  },
  // Compound node (PE clusters): rosé pine overlay
  {
    selector: "$node > node",
    style: {
      "background-color": rp.overlay,
      "background-opacity": 0.4,
      "border-color": rp.iris,
      "border-style": "dashed",
      "border-width": 1,
      color: rp.iris,
    },
  },
  // Base edge: muted on dark
  {
    selector: "edge",
    style: {
      "line-color": rp.subtle,
      "target-arrow-color": rp.subtle,
      color: rp.muted,
      "text-background-color": rp.base,
      "text-background-opacity": 0.9,
    },
  },
  // Error node
  {
    selector: "node.error",
    style: {
      "border-color": rp.love,
    },
  },
  // Error edge
  {
    selector: "edge.error",
    style: {
      "line-color": rp.love,
      "target-arrow-color": rp.love,
    },
  },
  // Synthetic edge (SM request/return)
  {
    selector: "edge.synthetic",
    style: {
      "line-color": rp.gold,
      "target-arrow-color": rp.gold,
    },
  },
];

const monitorOverlayStyles: cytoscape.StylesheetStyle[] = [
  // Active node: bright gold border when token received
  {
    selector: "node.active",
    style: {
      "border-color": rp.gold,
      "border-width": 4,
    },
  },
  // Executed node: pine green highlight
  {
    selector: "node.executed",
    style: {
      "background-color": rp.pine,
      "background-opacity": 0.3,
    },
  },
  // Matched node: foam cyan border
  {
    selector: "node.matched",
    style: {
      "border-color": rp.foam,
      "border-width": 3,
    },
  },
  // Half-matched node: one operand waiting
  {
    selector: "node.half-matched",
    style: {
      "border-style": "dashed",
      "border-width": 2,
      "border-color": rp.foam,
      "background-opacity": 0.5,
    },
  },
  // Token flow edge: animated gold dashed line
  {
    selector: "edge.token-flow",
    style: {
      "line-color": rp.gold,
      "line-dash-pattern": [6, 3],
      width: 3,
    },
  },
  // SM cell written: rose highlight
  {
    selector: "node.cell-written",
    style: {
      "border-color": rp.rose,
      "border-width": 3,
      "background-opacity": 0.6,
    },
  },
  // Finished indicator: dim all nodes
  {
    selector: "node.finished",
    style: {
      opacity: 0.5,
    },
  },
];

const physicalEdgeStyles: cytoscape.StylesheetStyle[] = [
  // PE cluster node
  {
    selector: "node.pe-cluster",
    style: {
      shape: "roundrectangle",
      width: "label",
      height: "label",
      "border-width": 1.5,
      "border-color": rp.iris,
      "background-color": rp.overlay,
      "background-opacity": 0.4,
      padding: "16px",
      "text-valign": "top",
      "text-halign": "center",
      label: "data(label)",
      "font-size": 9,
      "font-weight": "bold",
      color: rp.iris,
    },
  },
  // Port node (bus topology endpoints)
  {
    selector: "node.port-node",
    style: {
      shape: "ellipse",
      width: 10,
      height: 10,
      "background-color": rp.love,
      "background-opacity": 1,
      "border-width": 0,
      label: "",
    },
  },
  // Intra-PE edge
  {
    selector: "edge.intra-pe",
    style: {
      width: 0.75,
      "line-color": rp.subtle,
      "target-arrow-color": rp.subtle,
      "source-label": "",
      "target-label": "data(targetLabel)",
      "target-text-offset": 5,
      "target-text-margin-y": -6,
      "font-size": 7,
      "font-family": "monospace",
      color: rp.muted,
      "text-background-color": rp.base,
      "text-background-opacity": 0.9,
      "text-background-padding": "1px",
    },
  },
  // Exit segment (node to exit port, no arrow)
  {
    selector: "edge.exit-segment",
    style: {
      width: 0.75,
      "line-color": rp.subtle,
      "target-arrow-shape": "none",
      "target-label": "",
      "source-label": "",
    },
  },
  // Entry segment (entry port to destination)
  {
    selector: "edge.entry-segment",
    style: {
      width: 0.75,
      "line-color": rp.subtle,
      "target-arrow-color": rp.subtle,
      "target-arrow-shape": "triangle",
      "source-label": "",
      "target-label": "data(targetLabel)",
      "target-text-offset": 5,
      "target-text-margin-y": -6,
      "font-size": 7,
      "font-family": "monospace",
      color: rp.muted,
      "text-background-color": rp.base,
      "text-background-opacity": 0.9,
      "text-background-padding": "1px",
    },
  },
  // Bus segment (cross-PE thick edge)
  {
    selector: "edge.bus-segment",
    style: {
      width: 2,
      "line-color": rp.love,
      "target-arrow-color": rp.love,
      "target-arrow-shape": "triangle",
      "arrow-scale": 0.8,
      label: "data(label)",
      "target-label": "",
      "source-label": "",
      "text-margin-y": -8,
      "font-size": 7,
      "font-family": "monospace",
      color: rp.love,
      "text-background-color": rp.base,
      "text-background-opacity": 0.9,
      "text-background-padding": "1px",
    },
  },
  // Seed edge (dashed, muted)
  {
    selector: "edge.seed-edge",
    style: {
      width: 1,
      "line-style": "dashed",
      "line-color": rp.muted,
      "target-arrow-color": rp.muted,
      "target-text-offset": 5,
      "target-text-margin-y": -6,
    },
  },
  // Physical edges default to bezier
  {
    selector: "edge.physical",
    style: {
      "curve-style": "bezier",
    },
  },
];

export const monitorStylesheet: ReadonlyArray<cytoscape.StylesheetStyle> = [
  ...baseStylesheet,
  ...monitorDarkModeOverrides,
  ...physicalEdgeStyles,
  ...monitorOverlayStyles,
];