@work-graph/cli 0.2.0

package/vendor/src/graphCanvasLitFlow/client/graphCardNode.ts

@@ -0,0 +1,328 @@
+import { css, html } from 'lit';
+import { FlowNode } from 'lit-flow';
+
+const KIND_LAYER_TONE: Record<string, string> = {
+  intent_question: 'tone-question',
+  intent_analysis: 'tone-analysis',
+  intent_option: 'tone-option',
+  intent_decision: 'tone-decision',
+  work_item: 'tone-work',
+  work_epic: 'tone-epic',
+  architecture_block: 'tone-architecture',
+  schematic_block: 'tone-schematic',
+};
+
+function statusBadgeClass(status: unknown): string {
+  const value = String(status ?? '').trim().toLowerCase();
+  if (value === 'done' || value === 'verified') {
+    return 'is-done';
+  }
+  if (value === 'blocked') {
+    return 'is-blocked';
+  }
+  if (value === 'doing' || value === 'in_progress' || value === 'claimed') {
+    return 'is-doing';
+  }
+  if (value === 'ready') {
+    return 'is-ready';
+  }
+  return 'is-neutral';
+}
+
+export class GraphCardNode extends FlowNode {
+  static styles = [
+    ...(Array.isArray(FlowNode.styles) ? FlowNode.styles : [FlowNode.styles]),
+    css`
+      :host {
+        --node-background: var(--wg-graph-node-bg, #ffffff);
+        --node-border: var(--wg-graph-node-border, #dfe1e6);
+        --node-text: var(--wg-graph-node-text, #172b4d);
+        --node-subtext: var(--wg-graph-node-subtext, #5e6c84);
+        --node-selected-border: var(--wg-graph-node-selected-border, #0052cc);
+        background: transparent;
+        border: none;
+        border-radius: 0;
+        box-shadow: none;
+        font-family: "Segoe UI", system-ui, sans-serif;
+        padding: 0;
+      }
+
+      :host(:hover),
+      :host([selected]),
+      :host([dragging]) {
+        box-shadow: none;
+      }
+
+      .graph-card {
+        box-sizing: border-box;
+        width: 100%;
+        height: 100%;
+        padding: 10px 12px 11px;
+        border: 1px solid var(--node-border);
+        border-radius: 10px;
+        background: var(--node-background);
+        color: var(--node-text);
+        text-align: left;
+        cursor: pointer;
+        box-shadow: 0 1px 2px rgba(9, 30, 66, 0.08);
+        transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
+      }
+
+      .graph-card:hover {
+        border-color: var(--wg-graph-node-hover-border, #c1c7d0);
+      }
+
+      :host([selected]) .graph-card,
+      .graph-card.is-focused,
+      .graph-card.is-selected:not(.is-rejected) {
+        border-color: var(--node-selected-border);
+        box-shadow: none;
+      }
+
+      .graph-card.is-rejected {
+        opacity: 0.58;
+        border-style: dashed;
+        background: var(--wg-graph-node-rejected-bg, #f4f5f7);
+        box-shadow: none;
+      }
+
+      .graph-card.tone-question {
+        border-left: 3px solid var(--wg-graph-tone-question, #0052cc);
+      }
+
+      .graph-card.tone-analysis {
+        border-left: 3px solid var(--wg-graph-tone-analysis, #5b21b6);
+      }
+
+      .graph-card.tone-option.is-selected:not(.is-rejected) {
+        background: var(--wg-graph-node-selected-bg, linear-gradient(180deg, #deebff 0%, #ffffff 72%));
+      }
+
+      .graph-card.tone-decision {
+        border-left: 3px solid var(--wg-graph-tone-decision, #9a6700);
+      }
+
+      .graph-card.tone-work.is-done {
+        border-color: var(--wg-graph-tone-work, #1a7f37);
+      }
+
+      .graph-card.tone-epic {
+        border-left: 3px solid var(--wg-graph-tone-epic, #8250df);
+      }
+
+      .graph-card.tone-epic.is-done {
+        border-color: var(--wg-graph-tone-work, #1a7f37);
+      }
+
+      .graph-card.tone-epic:not(.is-done) .status-badge.is-ready {
+        background: rgba(130, 80, 223, 0.18);
+      }
+
+      .graph-card.tone-architecture,
+      .graph-card.tone-schematic {
+        border-left: 3px solid var(--wg-graph-tone-architecture, #0052cc);
+      }
+
+      .layer {
+        display: inline-block;
+        font-size: 10px;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+        color: var(--node-subtext);
+        margin-bottom: 7px;
+        padding: 2px 7px;
+        border-radius: 999px;
+        background: var(--wg-graph-layer-bg, rgba(9, 30, 66, 0.05));
+        border: 1px solid var(--wg-graph-layer-border, rgba(9, 30, 66, 0.1));
+      }
+
+      .tone-question .layer {
+        color: var(--wg-graph-tone-question, #0052cc);
+      }
+
+      .tone-analysis .layer {
+        color: var(--wg-graph-tone-analysis, #5b21b6);
+      }
+
+      .tone-option.is-selected:not(.is-rejected) .layer {
+        color: var(--wg-graph-tone-question, #0052cc);
+      }
+
+      .tone-decision .layer {
+        color: var(--wg-graph-tone-decision, #9a6700);
+      }
+
+      .tone-work .layer {
+        color: var(--wg-graph-tone-work, #1a7f37);
+      }
+
+      .tone-epic .layer {
+        color: var(--wg-graph-tone-epic, #8250df);
+      }
+
+      .title {
+        font-size: 13px;
+        line-height: 1.35;
+        font-weight: 600;
+        margin: 0;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+
+      .summary {
+        font-size: 12px;
+        line-height: 1.35;
+        color: var(--node-subtext);
+        margin: 6px 0 0;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+
+      .status-row {
+        margin-top: 9px;
+      }
+
+      .status-badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        padding: 2px 8px;
+        border-radius: 999px;
+        font-size: 10px;
+        line-height: 1.4;
+        text-transform: lowercase;
+        border: 1px solid var(--wg-graph-badge-border, #dfe1e6);
+        color: var(--node-subtext);
+        background: var(--wg-graph-badge-bg, #f4f5f7);
+      }
+
+      .status-badge.is-done {
+        border-color: var(--wg-graph-badge-done-border, #abf5d1);
+        color: var(--wg-graph-badge-done-text, #006644);
+        background: var(--wg-graph-badge-done-bg, #e3fcef);
+      }
+
+      .status-badge.is-doing {
+        border-color: var(--wg-graph-badge-doing-border, #f0c36d);
+        color: var(--wg-graph-badge-doing-text, #7a4f01);
+        background: var(--wg-graph-badge-doing-bg, #fff7d6);
+      }
+
+      .status-badge.is-ready {
+        border-color: var(--wg-graph-badge-ready-border, #85b8ff);
+        color: var(--wg-graph-badge-ready-text, #0052cc);
+        background: var(--wg-graph-badge-ready-bg, #deebff);
+      }
+
+      .status-badge.is-blocked {
+        border-color: var(--wg-graph-badge-blocked-border, #ffbdad);
+        color: var(--wg-graph-badge-blocked-text, #bf2600);
+        background: var(--wg-graph-badge-blocked-bg, #ffebe6);
+      }
+
+      .graph-card-wrap {
+        position: relative;
+        width: 100%;
+        height: 100%;
+      }
+
+      .edge-port {
+        position: absolute;
+        width: 8px;
+        height: 8px;
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      .edge-port.target {
+        left: -4px;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+
+      .edge-port.source {
+        right: -4px;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+
+      .edge-port.target-top {
+        top: -4px;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      .edge-port.source-bottom {
+        bottom: -4px;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+    `,
+  ];
+
+  override render() {
+    const data = (this.data ?? {}) as Record<string, unknown>;
+    const kind = String(data.kind ?? '');
+    const tone = KIND_LAYER_TONE[kind] ?? '';
+    const rejected = data.rejected === true || (kind === 'intent_option' && data.selected !== true);
+    const done = data.status === 'done' || data.status === 'verified';
+    const classes = [
+      'graph-card',
+      tone,
+      data.selected === true ? 'is-selected' : '',
+      rejected ? 'is-rejected' : '',
+      data.focused === true ? 'is-focused' : '',
+      done ? 'is-done' : '',
+    ].filter(Boolean).join(' ');
+
+    const progress = Number(data.childCount) > 0
+      ? ` ${data.doneChildCount ?? 0}/${data.childCount}`
+      : '';
+
+    const statusText = data.status ? `${String(data.status)}${progress}` : '';
+
+    return html`
+      <div class="graph-card-wrap">
+        <button type="button" class=${classes} @click=${this.onCardClick}>
+          <div class="layer">${String(data.layer ?? kind)}</div>
+          <p class="title">${String(data.title ?? this.id)}</p>
+          ${data.summary ? html`<p class="summary">${String(data.summary)}</p>` : null}
+          ${statusText ? html`
+            <div class="status-row">
+              <span class="status-badge ${statusBadgeClass(data.status)}">${statusText}</span>
+            </div>
+          ` : null}
+        </button>
+        <div class="edge-port target" data-handle-id="target"></div>
+        <div class="edge-port source" data-handle-id="source"></div>
+        <div class="edge-port target-top" data-handle-id="target-top"></div>
+        <div class="edge-port source-bottom" data-handle-id="source-bottom"></div>
+      </div>
+    `;
+  }
+
+  private onCardClick(event: Event) {
+    event.stopPropagation();
+    const data = (this.data ?? {}) as Record<string, unknown>;
+    this.dispatchEvent(new CustomEvent('graph-node-click', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        nodeId: this.id,
+        kind: data.kind,
+        taskId: data.taskId || undefined,
+        intentNodeId: data.intentNodeId || undefined,
+        blockId: data.blockId || undefined,
+        schematicId: data.schematicId || undefined,
+      },
+    }));
+  }
+}
+
+if (!customElements.get('graph-card-node')) {
+  customElements.define('graph-card-node', GraphCardNode);
+}

package/vendor/src/graphCanvasLitFlow/client/mountGraphCanvasLitFlow.ts

@@ -0,0 +1,322 @@
+import 'lit-flow/dist/style.css';
+import './graphCanvasTheme.css';
+import {
+  FlowBackground,
+  FlowCanvas,
+  FlowControls,
+} from 'lit-flow';
+import { mountGraphCanvasMinimap, unmountGraphCanvasMinimap } from './graphCanvasMinimap.js';
+import {
+  injectFlowCanvasNativeEdgeHide,
+  mountGraphCanvasSvgEdges,
+  repaintGraphCanvasSvgEdges,
+  unmountGraphCanvasSvgEdges,
+} from './graphCanvasSvgEdges.js';
+import { graphCanvasProjectionToFlow } from '../graphCanvasProjectionToFlow.mjs';
+import {
+  getDownstreamNodeIds,
+  getIncomingNodeIds,
+  getOutgoingNodeIds,
+  getSiblingNodeIds,
+  getUpstreamNodeIds,
+  sortNodeIdsByVerticalPosition,
+} from '../graphCanvasTraversal.mjs';
+import './graphCardNode.js';
+
+type GraphCanvasProjection = {
+  schema: string;
+  layoutDirection?: string;
+  viewId?: string;
+  nodes: Array<{ id: string; y?: number }>;
+  edges: Array<{ id: string; from: string; to: string }>;
+};
+
+type MountOptions = {
+  height?: number;
+  fill?: boolean;
+};
+
+const mountedHosts = new WeakMap<HTMLElement, FlowCanvas>();
+const themeObservers = new WeakMap<HTMLElement, MutationObserver>();
+const resizeObservers = new WeakMap<HTMLElement, ResizeObserver>();
+const minimapHosts = new WeakMap<HTMLElement, HTMLElement>();
+
+function resolveGraphCanvasTheme(): 'dark' | 'light' {
+  return document.body?.dataset?.theme === 'dark' ? 'dark' : 'light';
+}
+
+function applyGraphCanvasHostTheme(host: HTMLElement, theme: 'dark' | 'light') {
+  host.dataset.graphTheme = theme;
+}
+
+function applyFlowCanvasTheme(
+  canvas: FlowCanvas,
+  background: FlowBackground,
+  theme: 'dark' | 'light',
+) {
+  canvas.setAttribute('theme', theme);
+  background.setAttribute('variant', 'dots');
+  background.setAttribute('gap', theme === 'dark' ? '20' : '18');
+  background.setAttribute('color', theme === 'dark' ? '#3c3c3c' : '#dfe1e6');
+}
+
+function watchGraphCanvasTheme(
+  host: HTMLElement,
+  canvas: FlowCanvas,
+  background: FlowBackground,
+  projection: GraphCanvasProjection,
+  getSelectedNodeId: () => string,
+) {
+  themeObservers.get(host)?.disconnect();
+
+  const observer = new MutationObserver(() => {
+    const theme = resolveGraphCanvasTheme();
+    applyGraphCanvasHostTheme(host, theme);
+    applyFlowCanvasTheme(canvas, background, theme);
+    minimapHosts.get(host)?.setAttribute('data-theme', theme);
+    const { nodes } = graphCanvasProjectionToFlow(projection, { theme });
+    const selectedNodeId = getSelectedNodeId();
+    canvas.setNodes(nodes.map((node) => ({
+      ...node,
+      selected: node.id === selectedNodeId,
+    })));
+    canvas.setEdges([]);
+    repaintGraphCanvasSvgEdges(canvas, projection);
+    canvas.requestUpdate();
+  });
+
+  observer.observe(document.body, { attributes: true, attributeFilter: ['data-theme'] });
+  themeObservers.set(host, observer);
+}
+
+function ensureFlowTagsRegistered() {
+  if (!customElements.get('flow-canvas')) {
+    customElements.define('flow-background', FlowBackground);
+    customElements.define('flow-controls', FlowControls);
+    customElements.define('flow-canvas', FlowCanvas);
+  }
+}
+
+function parseProjection(host: HTMLElement): GraphCanvasProjection | null {
+  const raw = host.getAttribute('data-graph-canvas-projection');
+  if (!raw) {
+    return null;
+  }
+  try {
+    return JSON.parse(raw) as GraphCanvasProjection;
+  } catch {
+    return null;
+  }
+}
+
+function selectNode(canvas: FlowCanvas, nodeId: string) {
+  const nodes = canvas.nodes.map((node) => ({
+    ...node,
+    selected: node.id === nodeId,
+  }));
+  canvas.setNodes(nodes);
+}
+
+function focusNodeByKeyboard(canvas: FlowCanvas, projection: GraphCanvasProjection, nodeId: string) {
+  selectNode(canvas, nodeId);
+  canvas.instance.updateNode(nodeId, { selected: true });
+  canvas.requestUpdate();
+}
+
+function injectFlowCanvasChromeReset(canvas: FlowCanvas) {
+  const root = canvas.shadowRoot;
+  if (!root || root.querySelector('[data-wg-flow-chrome-reset]')) {
+    return;
+  }
+  const style = document.createElement('style');
+  style.setAttribute('data-wg-flow-chrome-reset', 'true');
+  style.textContent = `
+    .edge-label {
+      background: transparent !important;
+      border: none !important;
+      border-radius: 0 !important;
+      box-shadow: none !important;
+      padding: 0 !important;
+    }
+  `;
+  root.appendChild(style);
+}
+
+export function mountGraphCanvasLitFlow(host: HTMLElement, options: MountOptions = {}) {
+  const previous = mountedHosts.get(host);
+  if (previous) {
+    unmountGraphCanvasSvgEdges(previous);
+    previous.instance?.destroy();
+  }
+  themeObservers.get(host)?.disconnect();
+  themeObservers.delete(host);
+  resizeObservers.get(host)?.disconnect();
+  resizeObservers.delete(host);
+  const previousMinimapHost = minimapHosts.get(host);
+  if (previousMinimapHost) {
+    unmountGraphCanvasMinimap(previousMinimapHost);
+    minimapHosts.delete(host);
+  }
+  mountedHosts.delete(host);
+
+  ensureFlowTagsRegistered();
+
+  const projection = parseProjection(host);
+  if (!projection?.nodes?.length) {
+    host.innerHTML = '<div class="empty">Graph projection пуст</div>';
+    return;
+  }
+
+  const fill = options.fill === true || host.dataset.graphCanvasFill === 'true';
+  host.innerHTML = '';
+  host.classList.add('graph-canvas-lit-flow-host');
+  host.style.position = fill ? 'absolute' : 'relative';
+  host.style.width = '100%';
+  if (fill) {
+    host.style.inset = '0';
+    host.style.height = '100%';
+    host.style.minHeight = '0';
+  } else {
+    const height = options.height ?? Number(host.dataset.graphCanvasHeight ?? 480);
+    host.style.minHeight = `${height}px`;
+    host.style.height = `${height}px`;
+  }
+
+  const shell = document.createElement('div');
+  shell.className = 'graph-canvas-lit-flow-shell';
+  shell.style.width = '100%';
+  shell.style.height = '100%';
+  shell.style.position = 'relative';
+
+  const canvas = document.createElement('flow-canvas') as FlowCanvas;
+  canvas.style.display = 'block';
+  canvas.style.width = '100%';
+  canvas.style.height = '100%';
+  canvas.nodeTypes = { 'graph-card': 'graph-card-node' };
+
+  const background = document.createElement('flow-background');
+  background.setAttribute('slot', 'background');
+
+  const theme = resolveGraphCanvasTheme();
+  applyGraphCanvasHostTheme(host, theme);
+  applyFlowCanvasTheme(canvas, background, theme);
+
+  const controls = document.createElement('flow-controls');
+  const minimapHost = document.createElement('div');
+  minimapHost.className = 'graph-canvas-minimap-host';
+
+  canvas.appendChild(background);
+  canvas.appendChild(controls);
+  canvas.appendChild(minimapHost);
+  shell.appendChild(canvas);
+  host.appendChild(shell);
+  minimapHosts.set(host, minimapHost);
+
+  const { nodes } = graphCanvasProjectionToFlow(projection, { theme });
+  let selectedNodeId = projection.nodes[0]?.id ?? '';
+
+  const applyGraph = () => {
+    canvas.setNodes(nodes.map((node) => ({
+      ...node,
+      selected: node.id === selectedNodeId,
+    })));
+    canvas.setEdges([]);
+  };
+
+  customElements.whenDefined('flow-canvas').then(() => {
+    injectFlowCanvasChromeReset(canvas);
+    injectFlowCanvasNativeEdgeHide(canvas);
+    applyGraph();
+    mountGraphCanvasSvgEdges(canvas, projection);
+    controls.instance = canvas.instance;
+    mountGraphCanvasMinimap(minimapHost, () => canvas, {
+      width: 168,
+      height: 108,
+      theme,
+    });
+    watchGraphCanvasTheme(host, canvas, background, projection, () => selectedNodeId);
+    window.requestAnimationFrame(() => {
+      canvas.instance.fitView();
+    });
+    if (fill) {
+      const resizeTarget = host.parentElement ?? host;
+      const observer = new ResizeObserver(() => {
+        window.requestAnimationFrame(() => {
+          canvas.instance?.fitView({ padding: 0.12, duration: 0 });
+        });
+      });
+      observer.observe(resizeTarget);
+      resizeObservers.set(host, observer);
+    }
+  });
+
+  host.addEventListener('graph-node-click', (event) => {
+    const detail = (event as CustomEvent).detail ?? {};
+    if (detail.nodeId) {
+      selectedNodeId = detail.nodeId;
+      selectNode(canvas, selectedNodeId);
+    }
+    host.dispatchEvent(new CustomEvent('workgraph-graph-node-click', {
+      bubbles: true,
+      detail,
+    }));
+  });
+
+  host.tabIndex = 0;
+  host.addEventListener('keydown', (event) => {
+    if (!selectedNodeId) {
+      return;
+    }
+
+    let nextId = selectedNodeId;
+    if (event.key === 'ArrowRight') {
+      const outgoing = getOutgoingNodeIds(selectedNodeId, projection.edges);
+      nextId = outgoing[0] ?? selectedNodeId;
+    } else if (event.key === 'ArrowLeft') {
+      const incoming = getIncomingNodeIds(selectedNodeId, projection.edges);
+      nextId = incoming[0] ?? selectedNodeId;
+    } else if (event.key === 'ArrowDown') {
+      const siblings = getSiblingNodeIds(selectedNodeId, projection.edges, projection.nodes);
+      const downstream = getDownstreamNodeIds(selectedNodeId, projection.edges);
+      const candidates = sortNodeIdsByVerticalPosition([...siblings, ...downstream], projection.nodes)
+        .filter((id) => id !== selectedNodeId);
+      nextId = candidates[0] ?? selectedNodeId;
+    } else if (event.key === 'ArrowUp') {
+      const upstream = getUpstreamNodeIds(selectedNodeId, projection.edges);
+      nextId = upstream[0] ?? selectedNodeId;
+    } else if (event.key === 'Enter') {
+      host.dispatchEvent(new CustomEvent('workgraph-graph-node-click', {
+        bubbles: true,
+        detail: {
+          nodeId: selectedNodeId,
+          ...(nodes.find((node) => node.id === selectedNodeId)?.data ?? {}),
+        },
+      }));
+      return;
+    } else {
+      return;
+    }
+
+    event.preventDefault();
+    if (nextId !== selectedNodeId) {
+      selectedNodeId = nextId;
+      focusNodeByKeyboard(canvas, projection, selectedNodeId);
+    }
+  });
+
+  mountedHosts.set(host, canvas);
+}
+
+export function mountAllGraphCanvasLitFlowHosts(root: ParentNode = document) {
+  for (const host of root.querySelectorAll<HTMLElement>('[data-graph-canvas-projection]')) {
+    mountGraphCanvasLitFlow(host);
+  }
+}
+
+declare global {
+  interface Window {
+    __WORKGRAPH_MOUNT_GRAPH_CANVAS__?: typeof mountAllGraphCanvasLitFlowHosts;
+  }
+}
+
+window.__WORKGRAPH_MOUNT_GRAPH_CANVAS__ = mountAllGraphCanvasLitFlowHosts;

package/vendor/src/graphCanvasLitFlow/graphCanvasEdgeLabels.mjs

@@ -0,0 +1,58 @@
+/**
+ * @param {string} value
+ */
+function escapeHtml(value) {
+  return String(value ?? '')
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
+
+/**
+ * @param {string} label
+ * @param {'dark' | 'light'} theme
+ * @param {{ rejected?: boolean }} [options]
+ */
+export function buildGraphCanvasEdgeLabelHtml(label, theme, options = {}) {
+  const text = String(label ?? '').trim();
+  if (text === '') {
+    return '';
+  }
+
+  const rejected = options.rejected === true;
+  const palette = theme === 'light'
+    ? {
+      bg: rejected ? '#f4f5f7' : '#ffffff',
+      border: rejected ? '#dfe1e6' : '#c1c7d0',
+      color: rejected ? '#97a0af' : '#5e6c84',
+    }
+    : {
+      bg: rejected ? '#2a2a2a' : '#2d2d30',
+      border: rejected ? '#3c3c3c' : '#4a4a4a',
+      color: rejected ? '#6e6e6e' : '#9d9d9d',
+    };
+
+  return `<span style="display:inline-block;padding:2px 7px;border-radius:4px;font-size:11px;line-height:1.25;font-family:Segoe UI,system-ui,sans-serif;background:${palette.bg};border:1px solid ${palette.border};color:${palette.color};${rejected ? 'opacity:0.75;font-style:italic;' : ''}">${escapeHtml(text)}</span>`;
+}
+
+/**
+ * @param {object} edge
+ * @param {'dark' | 'light'} theme
+ */
+export function buildGraphCanvasEdgeStrokeStyle(edge, theme) {
+  const rejected = edge.rejected === true;
+  const upstream = edge.upstream === true;
+  const stroke = rejected
+    ? (theme === 'light' ? '#c1c7d0' : '#555555')
+    : upstream
+      ? (theme === 'light' ? '#97a0af' : '#6e6e6e')
+      : (theme === 'light' ? '#8b8b95' : '#858585');
+
+  return {
+    stroke,
+    strokeWidth: rejected ? 1.5 : 2,
+    ...(rejected ? { strokeDasharray: '6 4', opacity: 0.42 } : {}),
+    ...(upstream && !rejected ? { strokeDasharray: '5 4', opacity: 0.72 } : {}),
+  };
+}