From 2cd8f8bb28e7012be53360d8b914cbf19154f1e5 Mon Sep 17 00:00:00 2001
From: Max Mykal <mykalmax@yahoo.com>
Date: Thu, 9 Oct 2025 16:39:14 -0700
Subject: [PATCH] make simpler includeing common package directly

---
 web/common/src/components/Badge/Badge.css     |   2 +-
 .../src/components/Badge/Badge.stories.tsx    |   2 +-
 web/common/src/components/Badge/Badge.tsx     |   4 +-
 web/common/src/components/Button/Button.css   |   2 +-
 .../src/components/Button/Button.stories.tsx  |   2 +-
 web/common/src/components/Button/Button.tsx   |   4 +-
 .../src/components/CopyButton/CopyButton.tsx  |   7 +-
 .../HorizontalContainer.tsx                   |   2 +-
 web/common/src/components/Input/Input.css     |   2 +-
 web/common/src/components/Input/Input.tsx     |   4 +-
 .../LineageColumnLevel/FactoryColumn.css      |   2 +-
 .../LineageColumnLevel/FactoryColumn.tsx      |  12 +-
 .../src/components/Lineage/LineageContext.ts  |  10 +-
 .../Lineage/LineageControlButton.tsx          |   2 +-
 .../components/Lineage/LineageControlIcon.tsx |   2 +-
 .../src/components/Lineage/LineageLayout.tsx  |   9 +
 .../components/Lineage/LineageLayoutBase.tsx  | 173 ++++++++----------
 .../Lineage/LineageLayoutContainer.tsx        |   2 +-
 .../components/Lineage/layout/dagreLayout.ts  |  11 +-
 .../components/Lineage/node/NodeAppendix.tsx  |   2 +-
 .../src/components/Lineage/node/NodeBadge.tsx |   4 +-
 .../src/components/Lineage/node/NodeBase.tsx  |   4 +-
 .../components/Lineage/node/NodeContainer.tsx |   4 +-
 .../components/Lineage/node/NodeDetail.tsx    |   2 +-
 .../components/Lineage/node/NodeHandle.tsx    |   2 +-
 .../Lineage/node/NodeHandleIcon.tsx           |   2 +-
 .../components/Lineage/node/NodeHandles.tsx   |   4 +-
 .../components/Lineage/node/NodeHeader.tsx    |   2 +-
 .../src/components/Lineage/node/NodePort.tsx  |  12 +-
 .../src/components/Lineage/node/NodePorts.tsx |   6 +-
 .../components/Lineage/node/base-handle.tsx   |   2 +-
 .../src/components/Lineage/node/base-node.tsx |   2 +-
 .../Lineage/stories/Lineage.stories.tsx       |   2 +-
 .../Lineage/stories/ModelLineage.tsx          |  21 ++-
 .../Lineage/stories/ModelLineageContext.ts    |   2 +-
 .../components/Lineage/stories/ModelNode.tsx  |  14 +-
 .../Lineage/stories/dagreLayout.worker.ts     |   4 +-
 web/common/src/components/Lineage/utils.ts    |   2 +-
 .../LoadingContainer.stories.tsx              |   2 +-
 .../LoadingContainer/LoadingContainer.tsx     |   4 +-
 .../LoadingContainer/LoadingIcon.tsx          |   2 +-
 .../MessageContainer/MessageContainer.css     |   2 +-
 .../MessageContainer/MessageContainer.tsx     |   2 +-
 .../src/components/Metadata/Metadata.css      |   2 +-
 .../src/components/Metadata/Metadata.tsx      |   2 +-
 .../src/components/ModelName/ModelName.css    |   4 +-
 .../src/components/ModelName/ModelName.tsx    |   4 +-
 .../ScrollContainer/ScrollContainer.css       |   2 +-
 .../ScrollContainer/ScrollContainer.tsx       |   4 +-
 web/common/src/components/Tooltip/Tooltip.css |   2 +-
 .../components/Tooltip/Tooltip.stories.tsx    |   4 +-
 web/common/src/components/Tooltip/Tooltip.tsx |   2 +-
 .../src/components/Typography/Description.tsx |   2 +-
 .../src/components/Typography/Headline.tsx    |   4 +-
 .../src/components/Typography/Information.tsx |   4 +-
 .../src/components/Typography/Tagline.tsx     |   2 +-
 web/common/src/components/Typography/Text.tsx |   2 +-
 web/common/src/components/Typography/help.ts  |   2 +-
 .../VerticalContainer/VerticalContainer.tsx   |   2 +-
 .../components/VirtualList/FilterableList.css |   2 +-
 .../components/VirtualList/FilterableList.tsx |   2 +-
 .../components/VirtualList/VirtualList.tsx    |   2 +-
 web/common/src/index.ts                       |  50 ++---
 web/common/src/styles/design/index.css        |   1 -
 web/common/tsconfig.base.json                 |   2 +-
 web/common/vite.config.js                     |   4 +-
 66 files changed, 238 insertions(+), 228 deletions(-)

diff --git a/web/common/src/components/Badge/Badge.css b/web/common/src/components/Badge/Badge.css
index 582a1264fb..0efef35e41 100644
--- a/web/common/src/components/Badge/Badge.css
+++ b/web/common/src/components/Badge/Badge.css
@@ -1,4 +1,4 @@
-:root {
+:where(:root) {
   --color-badge-background: var(--color-neutral-100);
   --color-badge-foreground: var(--color-prose);
 }
diff --git a/web/common/src/components/Badge/Badge.stories.tsx b/web/common/src/components/Badge/Badge.stories.tsx
index 09754d29a8..143440037e 100644
--- a/web/common/src/components/Badge/Badge.stories.tsx
+++ b/web/common/src/components/Badge/Badge.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 
-import type { Shape, Size } from '@/types'
+import type { Shape, Size } from '@sqlmesh-common/types'
 import { Badge } from './Badge'
 
 const meta: Meta<typeof Badge> = {
diff --git a/web/common/src/components/Badge/Badge.tsx b/web/common/src/components/Badge/Badge.tsx
index cd6df21c26..2bc23940ad 100644
--- a/web/common/src/components/Badge/Badge.tsx
+++ b/web/common/src/components/Badge/Badge.tsx
@@ -1,8 +1,8 @@
 import { Slot } from '@radix-ui/react-slot'
 import React from 'react'
 
-import type { Shape, Size } from '@/types'
-import { cn } from '@/utils'
+import type { Shape, Size } from '@sqlmesh-common/types'
+import { cn } from '@sqlmesh-common/utils'
 import { cva } from 'class-variance-authority'
 
 import './Badge.css'
diff --git a/web/common/src/components/Button/Button.css b/web/common/src/components/Button/Button.css
index 7e8b856bf3..a95397dabb 100644
--- a/web/common/src/components/Button/Button.css
+++ b/web/common/src/components/Button/Button.css
@@ -1,4 +1,4 @@
-:root {
+:where(:root) {
   --color-button-primary-background: var(--color-action);
   --color-button-primary-foreground: var(--color-light);
   --color-button-primary-hover: var(--color-action-hover);
diff --git a/web/common/src/components/Button/Button.stories.tsx b/web/common/src/components/Button/Button.stories.tsx
index 57fb9f26e2..8836a35a5c 100644
--- a/web/common/src/components/Button/Button.stories.tsx
+++ b/web/common/src/components/Button/Button.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import type { Size } from '@/types'
+import type { Size } from '@sqlmesh-common/types'
 import { Button, type ButtonVariant } from './Button'
 import { fn, expect, userEvent, within } from 'storybook/test'
 
diff --git a/web/common/src/components/Button/Button.tsx b/web/common/src/components/Button/Button.tsx
index cc34ce192a..fd9baebdf2 100644
--- a/web/common/src/components/Button/Button.tsx
+++ b/web/common/src/components/Button/Button.tsx
@@ -2,8 +2,8 @@ import React from 'react'
 import { Slot } from '@radix-ui/react-slot'
 import { cva } from 'class-variance-authority'
 
-import { cn } from '@/utils'
-import type { Shape, Size } from '@/types'
+import { cn } from '@sqlmesh-common/utils'
+import type { Shape, Size } from '@sqlmesh-common/types'
 
 import './Button.css'
 
diff --git a/web/common/src/components/CopyButton/CopyButton.tsx b/web/common/src/components/CopyButton/CopyButton.tsx
index 3647121f82..1e5ba2580e 100644
--- a/web/common/src/components/CopyButton/CopyButton.tsx
+++ b/web/common/src/components/CopyButton/CopyButton.tsx
@@ -1,7 +1,10 @@
 import React from 'react'
 
-import { Button, type ButtonProps } from '@/components/Button/Button'
-import { useCopyClipboard } from '@/hooks/useCopyClipboard'
+import {
+  Button,
+  type ButtonProps,
+} from '@sqlmesh-common/components/Button/Button'
+import { useCopyClipboard } from '@sqlmesh-common/hooks/useCopyClipboard'
 
 export interface CopyButtonProps extends Omit<ButtonProps, 'children'> {
   text: string
diff --git a/web/common/src/components/HorizontalContainer/HorizontalContainer.tsx b/web/common/src/components/HorizontalContainer/HorizontalContainer.tsx
index c1e2c66ed0..b92eaa418b 100644
--- a/web/common/src/components/HorizontalContainer/HorizontalContainer.tsx
+++ b/web/common/src/components/HorizontalContainer/HorizontalContainer.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { cn } from '@/utils'
+import { cn } from '@sqlmesh-common/utils'
 import { ScrollContainer } from '../ScrollContainer/ScrollContainer'
 
 export interface HorizontalContainerProps
diff --git a/web/common/src/components/Input/Input.css b/web/common/src/components/Input/Input.css
index 0baae3c6bb..2cb6ab9695 100644
--- a/web/common/src/components/Input/Input.css
+++ b/web/common/src/components/Input/Input.css
@@ -1,4 +1,4 @@
-:root {
+:where(:root) {
   --color-input-background: var(--color-light);
   --color-input-background-translucid: var(--color-neutral-5);
   --color-input-foreground: var(--color-prose);
diff --git a/web/common/src/components/Input/Input.tsx b/web/common/src/components/Input/Input.tsx
index 10ba151ab4..8d5c6fc7e4 100644
--- a/web/common/src/components/Input/Input.tsx
+++ b/web/common/src/components/Input/Input.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
-import { cn } from '@/utils'
-import type { Size } from '@/types'
+import { cn } from '@sqlmesh-common/utils'
+import type { Size } from '@sqlmesh-common/types'
 import { cva } from 'class-variance-authority'
 
 import './Input.css'
diff --git a/web/common/src/components/Lineage/LineageColumnLevel/FactoryColumn.css b/web/common/src/components/Lineage/LineageColumnLevel/FactoryColumn.css
index d6eea6674a..8da848c684 100644
--- a/web/common/src/components/Lineage/LineageColumnLevel/FactoryColumn.css
+++ b/web/common/src/components/Lineage/LineageColumnLevel/FactoryColumn.css
@@ -1,4 +1,4 @@
-:root {
+:where(:root) {
   --color-lineage-model-column-badge-background: var(
     --color-lineage-node-badge-background
   );
diff --git a/web/common/src/components/Lineage/LineageColumnLevel/FactoryColumn.tsx b/web/common/src/components/Lineage/LineageColumnLevel/FactoryColumn.tsx
index 350437c16e..294d3ca462 100644
--- a/web/common/src/components/Lineage/LineageColumnLevel/FactoryColumn.tsx
+++ b/web/common/src/components/Lineage/LineageColumnLevel/FactoryColumn.tsx
@@ -7,7 +7,7 @@ import {
 } from 'lucide-react'
 import React from 'react'
 
-import { cn } from '@/utils'
+import { cn } from '@sqlmesh-common/utils'
 import { NodeBadge } from '../node/NodeBadge'
 import { NodePort } from '../node/NodePort'
 import { type NodeId, type PortHandleId, type PortId } from '../utils'
@@ -15,11 +15,11 @@ import {
   type ColumnLevelLineageAdjacencyList,
   type ColumnLevelLineageContextHook,
 } from './ColumnLevelLineageContext'
-import { Tooltip } from '@/components/Tooltip/Tooltip'
-import { Metadata } from '@/components/Metadata/Metadata'
-import { HorizontalContainer } from '@/components/HorizontalContainer/HorizontalContainer'
-import { Information } from '@/components/Typography/Information'
-import { LoadingContainer } from '@/components/LoadingContainer/LoadingContainer'
+import { Tooltip } from '@sqlmesh-common/components/Tooltip/Tooltip'
+import { Metadata } from '@sqlmesh-common/components/Metadata/Metadata'
+import { HorizontalContainer } from '@sqlmesh-common/components/HorizontalContainer/HorizontalContainer'
+import { Information } from '@sqlmesh-common/components/Typography/Information'
+import { LoadingContainer } from '@sqlmesh-common/components/LoadingContainer/LoadingContainer'
 
 import './FactoryColumn.css'
 
diff --git a/web/common/src/components/Lineage/LineageContext.ts b/web/common/src/components/Lineage/LineageContext.ts
index 4a90031217..7c76c2cfd4 100644
--- a/web/common/src/components/Lineage/LineageContext.ts
+++ b/web/common/src/components/Lineage/LineageContext.ts
@@ -59,7 +59,11 @@ export interface LineageContextValue<
   >
   nodes: LineageNode<TNodeData, TNodeID>[]
   nodesMap: LineageNodesMap<TNodeData, TNodeID>
-  setNodesMap: React.Dispatch<React.SetStateAction<LineageNodesMap<TNodeData>>>
+  setNodesMap: React.Dispatch<
+    React.SetStateAction<LineageNodesMap<TNodeData, TNodeID>>
+  >
+  currentNodeId: TNodeID | null
+  selectedNode: LineageNode<TNodeData, TNodeID> | null
   currentNode: LineageNode<TNodeData, TNodeID> | null
 }
 
@@ -74,7 +78,6 @@ export function getInitial<
     setSelectedNodes: () => {},
     selectedEdges: new Set<TEdgeID>(),
     setSelectedEdges: () => {},
-    selectedNodeId: null,
     setSelectedNodeId: () => {},
     zoom: ZOOM_THRESHOLD,
     setZoom: () => {},
@@ -83,6 +86,9 @@ export function getInitial<
     nodes: [],
     nodesMap: {},
     setNodesMap: () => {},
+    selectedNodeId: null,
+    selectedNode: null,
+    currentNodeId: null,
     currentNode: null,
   }
 }
diff --git a/web/common/src/components/Lineage/LineageControlButton.tsx b/web/common/src/components/Lineage/LineageControlButton.tsx
index d3f3d5d215..14c7a6f2de 100644
--- a/web/common/src/components/Lineage/LineageControlButton.tsx
+++ b/web/common/src/components/Lineage/LineageControlButton.tsx
@@ -1,6 +1,6 @@
 import { ControlButton } from '@xyflow/react'
 
-import { cn } from '@/utils'
+import { cn } from '@sqlmesh-common/utils'
 import { Tooltip } from '../Tooltip/Tooltip'
 
 export function LineageControlButton({
diff --git a/web/common/src/components/Lineage/LineageControlIcon.tsx b/web/common/src/components/Lineage/LineageControlIcon.tsx
index f8bc679c6d..a16f611a63 100644
--- a/web/common/src/components/Lineage/LineageControlIcon.tsx
+++ b/web/common/src/components/Lineage/LineageControlIcon.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { cn } from '@/utils'
+import { cn } from '@sqlmesh-common/utils'
 
 export interface LineageControlIconProps extends React.SVGProps<SVGSVGElement> {
   Icon: React.ElementType
diff --git a/web/common/src/components/Lineage/LineageLayout.tsx b/web/common/src/components/Lineage/LineageLayout.tsx
index a9b5ec512f..e19046780a 100644
--- a/web/common/src/components/Lineage/LineageLayout.tsx
+++ b/web/common/src/components/Lineage/LineageLayout.tsx
@@ -41,6 +41,9 @@ export function LineageLayout<
   useLineage,
   onNodeClick,
   onNodeDoubleClick,
+  showControlOnlySelectedNodes,
+  showControlZoomToCurrentNode,
+  showControlZoomToSelectedNode,
 }: {
   useLineage: LineageContextHook<
     TNodeData,
@@ -58,6 +61,9 @@ export function LineageLayout<
   className?: string
   nodesDraggable?: boolean
   nodesConnectable?: boolean
+  showControlOnlySelectedNodes?: boolean
+  showControlZoomToCurrentNode?: boolean
+  showControlZoomToSelectedNode?: boolean
   controls?:
     | React.ReactNode
     | (({ setCenter }: { setCenter: SetCenter }) => React.ReactNode)
@@ -85,6 +91,9 @@ export function LineageLayout<
           useLineage={useLineage}
           onNodeClick={onNodeClick}
           onNodeDoubleClick={onNodeDoubleClick}
+          showControlOnlySelectedNodes={showControlOnlySelectedNodes}
+          showControlZoomToCurrentNode={showControlZoomToCurrentNode}
+          showControlZoomToSelectedNode={showControlZoomToSelectedNode}
         />
       </LineageLayoutContainer>
     </ReactFlowProvider>
diff --git a/web/common/src/components/Lineage/LineageLayoutBase.tsx b/web/common/src/components/Lineage/LineageLayoutBase.tsx
index 6d3975d19a..93a55858bb 100644
--- a/web/common/src/components/Lineage/LineageLayoutBase.tsx
+++ b/web/common/src/components/Lineage/LineageLayoutBase.tsx
@@ -44,7 +44,7 @@ import {
 
 import '@xyflow/react/dist/style.css'
 import './Lineage.css'
-import { cn } from '@/utils'
+import { cn } from '@sqlmesh-common/utils'
 
 export function LineageLayoutBase<
   TNodeData extends LineageNodeData = LineageNodeData,
@@ -65,6 +65,9 @@ export function LineageLayoutBase<
   useLineage,
   onNodeClick,
   onNodeDoubleClick,
+  showControlOnlySelectedNodes = true,
+  showControlZoomToCurrentNode = true,
+  showControlZoomToSelectedNode = true,
 }: {
   useLineage: LineageContextHook<
     TNodeData,
@@ -81,6 +84,9 @@ export function LineageLayoutBase<
   nodeTypes?: NodeTypes
   edgeTypes?: EdgeTypes
   className?: string
+  showControlOnlySelectedNodes?: boolean
+  showControlZoomToCurrentNode?: boolean
+  showControlZoomToSelectedNode?: boolean
   controls?:
     | React.ReactNode
     | (({ setCenter }: { setCenter: SetCenter }) => React.ReactNode)
@@ -100,8 +106,9 @@ export function LineageLayoutBase<
     currentNode,
     zoom,
     nodes: initialNodes,
-    edges: initialEdges,
-    nodesMap,
+    edges,
+    setEdges,
+    selectedNode,
     showOnlySelectedNodes,
     selectedNodeId,
     setZoom,
@@ -111,27 +118,14 @@ export function LineageLayoutBase<
     setSelectedEdges,
   } = useLineage()
 
-  const [nodes, setNodes] = React.useState<LineageNode<TNodeData, TNodeID>[]>(
-    [],
-  )
-  const [edges, setEdges] = React.useState<
-    LineageEdge<
-      TEdgeData,
-      TEdgeID,
-      TSourceID,
-      TTargetID,
-      TSourceHandleID,
-      TTargetHandleID
-    >[]
-  >([])
+  const [nodes, setNodes] =
+    React.useState<LineageNode<TNodeData, TNodeID>[]>(initialNodes)
 
   const onNodesChange = React.useCallback(
     (changes: NodeChange<LineageNode<TNodeData, TNodeID>>[]) => {
-      setNodes(
-        applyNodeChanges<LineageNode<TNodeData, TNodeID>>(changes, nodes),
-      )
+      setNodes(applyNodeChanges(changes, nodes))
     },
-    [nodes, setNodes],
+    [nodes],
   )
 
   const onEdgesChange = React.useCallback(
@@ -160,7 +154,7 @@ export function LineageLayoutBase<
         >(changes, edges),
       )
     },
-    [edges, setEdges],
+    [edges],
   )
 
   const updateZoom = React.useMemo(() => debounce(setZoom, 200), [setZoom])
@@ -174,20 +168,19 @@ export function LineageLayoutBase<
         })
       }
     },
-    [currentNode, setCenter],
+    [currentNode?.position.x, currentNode?.position.y],
   )
 
   const zoomToSelectedNode = React.useCallback(
     (zoom: number = DEFAULT_ZOOM) => {
-      const node = selectedNodeId ? nodesMap[selectedNodeId] : null
-      if (node) {
-        setCenter(node.position.x, node.position.y, {
+      if (selectedNode) {
+        setCenter(selectedNode.position.x, selectedNode.position.y, {
           zoom,
           duration: 0,
         })
       }
     },
-    [nodesMap, selectedNodeId, setCenter],
+    [selectedNode?.position.x, selectedNode?.position.y],
   )
 
   const getAllIncomers = React.useCallback(
@@ -202,13 +195,13 @@ export function LineageLayoutBase<
       return Array.from(
         new Set<LineageNode<TNodeData, TNodeID>>([
           node,
-          ...getIncomers(node, nodes, edges)
+          ...getIncomers(node, initialNodes, edges)
             .map(n => getAllIncomers(n, visited))
             .flat(),
         ]),
       )
     },
-    [nodes, edges],
+    [initialNodes, edges],
   )
 
   const getAllOutgoers = React.useCallback(
@@ -223,48 +216,32 @@ export function LineageLayoutBase<
       return Array.from(
         new Set<LineageNode<TNodeData, TNodeID>>([
           node,
-          ...getOutgoers(node, nodes, edges)
+          ...getOutgoers(node, initialNodes, edges)
             .map(n => getAllOutgoers(n, visited))
             .flat(),
         ]),
       )
     },
-    [nodes, edges],
+    [initialNodes, edges],
   )
 
-  React.useEffect(() => {
-    setNodes(initialNodes)
-  }, [initialNodes])
+  const connectedNodes = React.useMemo(() => {
+    if (selectedNode == null) return []
 
-  React.useEffect(() => {
-    setEdges(initialEdges)
-  }, [initialEdges])
-
-  React.useEffect(() => {
-    if (selectedNodeId == null) {
-      setShowOnlySelectedNodes(false)
-      setSelectedNodes(new Set())
-      setSelectedEdges(new Set())
-
-      return
-    }
-
-    const node = selectedNodeId ? nodesMap[selectedNodeId] : null
-
-    if (node == null) {
-      setSelectedNodeId(null)
-      return
-    }
-
-    const incomers = getAllIncomers(node)
-    const outgoers = getAllOutgoers(node)
-    const connectedNodes = [...incomers, ...outgoers]
+    const all = [
+      ...getAllIncomers(selectedNode),
+      ...getAllOutgoers(selectedNode),
+    ]
 
     if (currentNode) {
-      connectedNodes.push(currentNode)
+      all.push(currentNode)
     }
 
-    const connectedEdges = getConnectedEdges<
+    return all
+  }, [selectedNode, currentNode, getAllIncomers, getAllOutgoers])
+
+  const connectedEdges = React.useMemo(() => {
+    return getConnectedEdges<
       LineageNode<TNodeData, TNodeID>,
       LineageEdge<
         TEdgeData,
@@ -275,6 +252,25 @@ export function LineageLayoutBase<
         TTargetHandleID
       >
     >(connectedNodes, edges)
+  }, [connectedNodes, edges])
+
+  React.useEffect(() => {
+    setNodes(initialNodes)
+  }, [initialNodes])
+
+  React.useEffect(() => {
+    if (selectedNodeId == null) {
+      setShowOnlySelectedNodes(false)
+      setSelectedNodes(new Set())
+      setSelectedEdges(new Set())
+    } else {
+      if (selectedNode == null) {
+        setSelectedNodeId(null)
+      }
+    }
+  }, [selectedNodeId, selectedNode])
+
+  React.useEffect(() => {
     const selectedNodes = new Set<TNodeID>(connectedNodes.map(node => node.id))
     const selectedEdges = new Set(
       connectedEdges.reduce((acc, edge) => {
@@ -294,24 +290,11 @@ export function LineageLayoutBase<
 
     setSelectedNodes(selectedNodes)
     setSelectedEdges(selectedEdges)
-  }, [
-    currentNode,
-    selectedNodeId,
-    setSelectedNodes,
-    setSelectedEdges,
-    getAllIncomers,
-    getAllOutgoers,
-    setShowOnlySelectedNodes,
-    setSelectedNodeId,
-  ])
+  }, [connectedNodes, connectedEdges])
 
   React.useEffect(() => {
-    if (selectedNodeId) {
-      zoomToSelectedNode(zoom)
-    } else {
-      zoomToCurrentNode(zoom)
-    }
-  }, [zoomToCurrentNode, zoomToSelectedNode])
+    zoomToSelectedNode()
+  }, [zoomToSelectedNode])
 
   React.useEffect(() => {
     updateZoom(viewportZoom)
@@ -363,7 +346,7 @@ export function LineageLayoutBase<
         position="top-right"
         className="m-1 border-2 border-lineage-control-border rounded-sm overflow-hidden"
       >
-        {currentNode && (
+        {currentNode && showControlZoomToCurrentNode && (
           <LineageControlButton
             text="Zoom to current node"
             onClick={() => zoomToCurrentNode(DEFAULT_ZOOM)}
@@ -373,24 +356,28 @@ export function LineageLayoutBase<
         )}
         {selectedNodeId && (
           <>
-            <LineageControlButton
-              text={
-                showOnlySelectedNodes
-                  ? 'Rebuild with all nodes'
-                  : 'Only selected nodes'
-              }
-              onClick={() => setShowOnlySelectedNodes(!showOnlySelectedNodes)}
-            >
-              <LineageControlIcon
-                Icon={showOnlySelectedNodes ? RotateCcw : CircuitBoard}
-              />
-            </LineageControlButton>
-            <LineageControlButton
-              text="Zoom to selected node"
-              onClick={() => zoomToSelectedNode(DEFAULT_ZOOM)}
-            >
-              <LineageControlIcon Icon={LocateFixed} />
-            </LineageControlButton>
+            {showControlOnlySelectedNodes && (
+              <LineageControlButton
+                text={
+                  showOnlySelectedNodes
+                    ? 'Rebuild with all nodes'
+                    : 'Only selected nodes'
+                }
+                onClick={() => setShowOnlySelectedNodes(!showOnlySelectedNodes)}
+              >
+                <LineageControlIcon
+                  Icon={showOnlySelectedNodes ? RotateCcw : CircuitBoard}
+                />
+              </LineageControlButton>
+            )}
+            {showControlZoomToSelectedNode && (
+              <LineageControlButton
+                text="Zoom to selected node"
+                onClick={() => zoomToSelectedNode(DEFAULT_ZOOM)}
+              >
+                <LineageControlIcon Icon={LocateFixed} />
+              </LineageControlButton>
+            )}
           </>
         )}
         {controls && typeof controls === 'function'
diff --git a/web/common/src/components/Lineage/LineageLayoutContainer.tsx b/web/common/src/components/Lineage/LineageLayoutContainer.tsx
index 4bd0d42402..2ba0e00d56 100644
--- a/web/common/src/components/Lineage/LineageLayoutContainer.tsx
+++ b/web/common/src/components/Lineage/LineageLayoutContainer.tsx
@@ -1,4 +1,4 @@
-import { cn } from '@/utils'
+import { cn } from '@sqlmesh-common/utils'
 
 import React from 'react'
 
diff --git a/web/common/src/components/Lineage/layout/dagreLayout.ts b/web/common/src/components/Lineage/layout/dagreLayout.ts
index 554d427f03..d7a5c01e2e 100644
--- a/web/common/src/components/Lineage/layout/dagreLayout.ts
+++ b/web/common/src/components/Lineage/layout/dagreLayout.ts
@@ -36,11 +36,7 @@ export function buildLayout<
   const nodeCount = nodes.length
   const edgeCount = edges.length
 
-  if (nodeCount === 0)
-    return {
-      edges: [],
-      nodesMap: {},
-    }
+  if (nodeCount === 0) return {}
 
   const g = new dagre.graphlib.Graph({
     compound: true,
@@ -92,8 +88,5 @@ export function buildLayout<
     }
   }
 
-  return {
-    edges,
-    nodesMap,
-  }
+  return { ...nodesMap }
 }
diff --git a/web/common/src/components/Lineage/node/NodeAppendix.tsx b/web/common/src/components/Lineage/node/NodeAppendix.tsx
index 5a703a468f..48194c1442 100644
--- a/web/common/src/components/Lineage/node/NodeAppendix.tsx
+++ b/web/common/src/components/Lineage/node/NodeAppendix.tsx
@@ -1,7 +1,7 @@
 import { cva, type VariantProps } from 'class-variance-authority'
 import { forwardRef, type HTMLAttributes } from 'react'
 
-import { cn } from '@/utils'
+import { cn } from '@sqlmesh-common/utils'
 
 const appendixVariants = cva(
   'node-appendix absolute flex w-full flex-col items-center',
diff --git a/web/common/src/components/Lineage/node/NodeBadge.tsx b/web/common/src/components/Lineage/node/NodeBadge.tsx
index 8c894ecca2..b05283dfa8 100644
--- a/web/common/src/components/Lineage/node/NodeBadge.tsx
+++ b/web/common/src/components/Lineage/node/NodeBadge.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
-import { cn } from '@/utils'
-import { Badge, type BadgeProps } from '@/components/Badge/Badge'
+import { cn } from '@sqlmesh-common/utils'
+import { Badge, type BadgeProps } from '@sqlmesh-common/components/Badge/Badge'
 
 export const NodeBadge = React.forwardRef<HTMLSpanElement, BadgeProps>(
   ({ className, children, ...props }, ref) => {
diff --git a/web/common/src/components/Lineage/node/NodeBase.tsx b/web/common/src/components/Lineage/node/NodeBase.tsx
index 78033a4099..89342d83c8 100644
--- a/web/common/src/components/Lineage/node/NodeBase.tsx
+++ b/web/common/src/components/Lineage/node/NodeBase.tsx
@@ -1,8 +1,8 @@
 import { type NodeProps } from '@xyflow/react'
 import React from 'react'
 
-import { BaseNode } from '@/components/Lineage/node/base-node'
-import { cn } from '@/utils'
+import { BaseNode } from '@sqlmesh-common/components/Lineage/node/base-node'
+import { cn } from '@sqlmesh-common/utils'
 
 export interface NodeBaseProps extends NodeProps {
   className?: string
diff --git a/web/common/src/components/Lineage/node/NodeContainer.tsx b/web/common/src/components/Lineage/node/NodeContainer.tsx
index 0506771eae..c72d60e4ed 100644
--- a/web/common/src/components/Lineage/node/NodeContainer.tsx
+++ b/web/common/src/components/Lineage/node/NodeContainer.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
-import { cn } from '@/utils'
-import { VerticalContainer } from '@/components/VerticalContainer/VerticalContainer'
+import { cn } from '@sqlmesh-common/utils'
+import { VerticalContainer } from '@sqlmesh-common/components/VerticalContainer/VerticalContainer'
 
 export const NodeContainer = React.forwardRef<
   HTMLDivElement,
diff --git a/web/common/src/components/Lineage/node/NodeDetail.tsx b/web/common/src/components/Lineage/node/NodeDetail.tsx
index 61e22d169c..f57978d865 100644
--- a/web/common/src/components/Lineage/node/NodeDetail.tsx
+++ b/web/common/src/components/Lineage/node/NodeDetail.tsx
@@ -1,4 +1,4 @@
-import { Metadata, cn } from '@tobikodata/sqlmesh-common'
+import { Metadata, cn } from '@sqlmesh-common/index'
 
 import { NodeDivider } from './NodeDivider'
 
diff --git a/web/common/src/components/Lineage/node/NodeHandle.tsx b/web/common/src/components/Lineage/node/NodeHandle.tsx
index d50d90422a..6e7aa4dd22 100644
--- a/web/common/src/components/Lineage/node/NodeHandle.tsx
+++ b/web/common/src/components/Lineage/node/NodeHandle.tsx
@@ -1,7 +1,7 @@
 import { Position } from '@xyflow/react'
 import React from 'react'
 
-import { cn } from '@/utils'
+import { cn } from '@sqlmesh-common/utils'
 import { BaseHandle } from './base-handle'
 import type { HandleId } from '../utils'
 
diff --git a/web/common/src/components/Lineage/node/NodeHandleIcon.tsx b/web/common/src/components/Lineage/node/NodeHandleIcon.tsx
index b55d96a041..caafa617a9 100644
--- a/web/common/src/components/Lineage/node/NodeHandleIcon.tsx
+++ b/web/common/src/components/Lineage/node/NodeHandleIcon.tsx
@@ -1,6 +1,6 @@
 import { ArrowRight } from 'lucide-react'
 
-import { cn } from '@/utils'
+import { cn } from '@sqlmesh-common/utils'
 
 export function NodeHandleIcon({
   className,
diff --git a/web/common/src/components/Lineage/node/NodeHandles.tsx b/web/common/src/components/Lineage/node/NodeHandles.tsx
index 453ff74317..3d7d6e08ab 100644
--- a/web/common/src/components/Lineage/node/NodeHandles.tsx
+++ b/web/common/src/components/Lineage/node/NodeHandles.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
-import { cn } from '@/utils'
-import { HorizontalContainer } from '@/components/HorizontalContainer/HorizontalContainer'
+import { cn } from '@sqlmesh-common/utils'
+import { HorizontalContainer } from '@sqlmesh-common/components/HorizontalContainer/HorizontalContainer'
 import { NodeHandle } from './NodeHandle'
 import type { HandleId } from '../utils'
 
diff --git a/web/common/src/components/Lineage/node/NodeHeader.tsx b/web/common/src/components/Lineage/node/NodeHeader.tsx
index 154dc166de..41e83aaa4e 100644
--- a/web/common/src/components/Lineage/node/NodeHeader.tsx
+++ b/web/common/src/components/Lineage/node/NodeHeader.tsx
@@ -1,6 +1,6 @@
 import { type HTMLAttributes, forwardRef } from 'react'
 
-import { cn } from '@/utils'
+import { cn } from '@sqlmesh-common/utils'
 
 /* NODE HEADER -------------------------------------------------------------- */
 
diff --git a/web/common/src/components/Lineage/node/NodePort.tsx b/web/common/src/components/Lineage/node/NodePort.tsx
index 7380716f02..207be24576 100644
--- a/web/common/src/components/Lineage/node/NodePort.tsx
+++ b/web/common/src/components/Lineage/node/NodePort.tsx
@@ -1,7 +1,7 @@
-import { useNodeConnections, useUpdateNodeInternals } from '@xyflow/react'
+import { useNodeConnections } from '@xyflow/react'
 import React from 'react'
 
-import { cn } from '@/utils'
+import { cn } from '@sqlmesh-common/utils'
 import { type NodeId, type PortHandleId } from '../utils'
 import { NodeHandles } from './NodeHandles'
 
@@ -21,8 +21,6 @@ export function NodePort<
   className?: string
   children: React.ReactNode
 }) {
-  const updateNodeInternals = useUpdateNodeInternals()
-
   const sources = useNodeConnections({
     id: nodeId,
     handleType: 'source',
@@ -45,12 +43,6 @@ export function NodePort<
   const leftId = isLeftHandleId(id) ? id : undefined
   const rightId = isRightHandleId(id) ? id : undefined
 
-  React.useEffect(() => {
-    if (leftId || rightId) {
-      updateNodeInternals(nodeId)
-    }
-  }, [updateNodeInternals, nodeId, leftId, rightId])
-
   return (
     <NodeHandles<TLeftPortHandleId, TRightPortHandleId>
       data-component="NodePort"
diff --git a/web/common/src/components/Lineage/node/NodePorts.tsx b/web/common/src/components/Lineage/node/NodePorts.tsx
index f417dea9e4..1f40dc764f 100644
--- a/web/common/src/components/Lineage/node/NodePorts.tsx
+++ b/web/common/src/components/Lineage/node/NodePorts.tsx
@@ -1,6 +1,6 @@
-import { cn } from '@/utils'
-import { VirtualList } from '@/components/VirtualList/VirtualList'
-import { FilterableList } from '@/components/VirtualList/FilterableList'
+import { cn } from '@sqlmesh-common/utils'
+import { VirtualList } from '@sqlmesh-common/components/VirtualList/VirtualList'
+import { FilterableList } from '@sqlmesh-common/components/VirtualList/FilterableList'
 import type { IFuseOptions } from 'fuse.js'
 
 export function NodePorts<TPort>({
diff --git a/web/common/src/components/Lineage/node/base-handle.tsx b/web/common/src/components/Lineage/node/base-handle.tsx
index e6b8f0c24b..0ce6a98745 100644
--- a/web/common/src/components/Lineage/node/base-handle.tsx
+++ b/web/common/src/components/Lineage/node/base-handle.tsx
@@ -2,7 +2,7 @@ import { Handle, type HandleProps } from '@xyflow/react'
 import { forwardRef } from 'react'
 import type { ForwardRefExoticComponent, RefAttributes } from 'react'
 
-import { cn } from '@/utils'
+import { cn } from '@sqlmesh-common/utils'
 
 export const BaseHandle: ForwardRefExoticComponent<
   HandleProps & RefAttributes<HTMLDivElement>
diff --git a/web/common/src/components/Lineage/node/base-node.tsx b/web/common/src/components/Lineage/node/base-node.tsx
index d349ca601a..f1b5c7d509 100644
--- a/web/common/src/components/Lineage/node/base-node.tsx
+++ b/web/common/src/components/Lineage/node/base-node.tsx
@@ -1,6 +1,6 @@
 import { type HTMLAttributes, forwardRef } from 'react'
 
-import { cn } from '@/utils'
+import { cn } from '@sqlmesh-common/utils'
 
 export const BaseNode = forwardRef<
   HTMLDivElement,
diff --git a/web/common/src/components/Lineage/stories/Lineage.stories.tsx b/web/common/src/components/Lineage/stories/Lineage.stories.tsx
index 115be3c2c0..76c4229250 100644
--- a/web/common/src/components/Lineage/stories/Lineage.stories.tsx
+++ b/web/common/src/components/Lineage/stories/Lineage.stories.tsx
@@ -129,7 +129,7 @@ export const LineageModel = () => {
       }}
     >
       <style>{`
-        :root {
+        :where(:root) {
           --color-metadata-label: rgba(100, 100, 100, 1);
           --color-metadata-value: rgba(10, 10, 10, 1);
 
diff --git a/web/common/src/components/Lineage/stories/ModelLineage.tsx b/web/common/src/components/Lineage/stories/ModelLineage.tsx
index 3df85ea1a5..215ebb1f84 100644
--- a/web/common/src/components/Lineage/stories/ModelLineage.tsx
+++ b/web/common/src/components/Lineage/stories/ModelLineage.tsx
@@ -55,7 +55,7 @@ import { EdgeWithGradient } from '../edge/EdgeWithGradient'
 import { cleanupLayoutWorker, getLayoutedGraph } from '../layout/help'
 import { LineageControlButton } from '../LineageControlButton'
 import { LineageControlIcon } from '../LineageControlIcon'
-import type { BrandedRecord } from '@/types'
+import type { BrandedRecord } from '@sqlmesh-common/types'
 
 const nodeTypes = {
   node: ModelNode,
@@ -76,6 +76,10 @@ export const ModelLineage = ({
   selectedModelName?: ModelName
   className?: string
 }) => {
+  const currentNodeId = selectedModelName
+    ? toNodeID<ModelNodeId>(selectedModelName)
+    : null
+
   const [zoom, setZoom] = React.useState(ZOOM_THRESHOLD)
   const [isBuildingLayout, setIsBuildingLayout] = React.useState(false)
   const [nodesDraggable, setNodesDraggable] = React.useState(false)
@@ -101,7 +105,7 @@ export const ModelLineage = ({
     new Set(),
   )
   const [selectedNodeId, setSelectedNodeId] =
-    React.useState<ModelNodeId | null>(null)
+    React.useState<ModelNodeId | null>(currentNodeId)
 
   const [showColumns, setShowColumns] = React.useState(false)
   const [columnLevelLineage, setColumnLevelLineage] = React.useState<
@@ -320,11 +324,8 @@ export const ModelLineage = ({
     return Object.values(nodesMap)
   }, [nodesMap])
 
-  const currentNode = React.useMemo(() => {
-    return selectedModelName
-      ? nodesMap[toNodeID<LeftHandleId | RightHandleId>(selectedModelName)]
-      : null
-  }, [selectedModelName, nodesMap])
+  const currentNode = currentNodeId ? nodesMap[currentNodeId] : null
+  const selectedNode = selectedNodeId ? nodesMap[selectedNodeId] : null
 
   const handleReset = React.useCallback(() => {
     setShowColumns(false)
@@ -354,6 +355,10 @@ export const ModelLineage = ({
     }
   }, [showOnlySelectedNodes, transformedEdges, transformedNodesMap])
 
+  React.useEffect(() => {
+    setSelectedNodeId(currentNodeId)
+  }, [currentNodeId])
+
   // Cleanup worker on unmount
   React.useEffect(() => () => cleanupLayoutWorker(), [])
 
@@ -373,6 +378,8 @@ export const ModelLineage = ({
         selectedNodes,
         selectedEdges,
         selectedNodeId,
+        selectedNode,
+        currentNodeId,
         zoom,
         edges,
         nodes,
diff --git a/web/common/src/components/Lineage/stories/ModelLineageContext.ts b/web/common/src/components/Lineage/stories/ModelLineageContext.ts
index 745d9c2636..00fa62563a 100644
--- a/web/common/src/components/Lineage/stories/ModelLineageContext.ts
+++ b/web/common/src/components/Lineage/stories/ModelLineageContext.ts
@@ -1,4 +1,4 @@
-import type { Branded, BrandedRecord } from '@/types'
+import type { Branded, BrandedRecord } from '@sqlmesh-common/types'
 import {
   type ColumnLevelLineageAdjacencyList,
   type ColumnLevelLineageContextValue,
diff --git a/web/common/src/components/Lineage/stories/ModelNode.tsx b/web/common/src/components/Lineage/stories/ModelNode.tsx
index b0bd2f7867..8dbcc5fc19 100644
--- a/web/common/src/components/Lineage/stories/ModelNode.tsx
+++ b/web/common/src/components/Lineage/stories/ModelNode.tsx
@@ -1,7 +1,7 @@
 import cronstrue from 'cronstrue'
 import React from 'react'
 
-import { cn } from '@/utils'
+import { cn } from '@sqlmesh-common/utils'
 import { HorizontalContainer } from '../../HorizontalContainer/HorizontalContainer'
 import { VerticalContainer } from '../../VerticalContainer/VerticalContainer'
 import {
@@ -37,10 +37,10 @@ import {
   getNodeTypeColor,
   getNodeTypeTextColor,
 } from './help'
-import { Tooltip } from '@/components/Tooltip/Tooltip'
+import { Tooltip } from '@sqlmesh-common/components/Tooltip/Tooltip'
 import type { ColumnLevelLineageAdjacencyList } from '../LineageColumnLevel/ColumnLevelLineageContext'
-import { ModelName } from '@/components/ModelName/ModelName'
-import { Badge } from '@/components/Badge/Badge'
+import { ModelName } from '@sqlmesh-common/components/ModelName/ModelName'
+import { Badge } from '@sqlmesh-common/components/Badge/Badge'
 import { NodePorts } from '../node/NodePorts'
 
 export const ModelNode = React.memo(function ModelNode({
@@ -67,6 +67,7 @@ export const ModelNode = React.memo(function ModelNode({
   const {
     leftId,
     rightId,
+    isCurrent,
     isSelected, // if selected from inside the lineage and node is selcted
     isActive, // if selected from inside the lineage and node is not selected but in path
   } = useNodeMetadata(nodeId, currentNode, selectedNodeId, selectedNodes)
@@ -146,6 +147,11 @@ export const ModelNode = React.memo(function ModelNode({
         className="bg-lineage-node-appendix-background"
       >
         <HorizontalContainer className="gap-1 items-center overflow-visible h-5">
+          {isCurrent && (
+            <NodeBadge className="bg-lineage-node-current-background text-lineage-node-current-foreground">
+              current
+            </NodeBadge>
+          )}
           {zoom > ZOOM_THRESHOLD && (
             <>
               <NodeBadge>{data.kind?.toUpperCase()}</NodeBadge>
diff --git a/web/common/src/components/Lineage/stories/dagreLayout.worker.ts b/web/common/src/components/Lineage/stories/dagreLayout.worker.ts
index ce452f4808..7ca75c60c2 100644
--- a/web/common/src/components/Lineage/stories/dagreLayout.worker.ts
+++ b/web/common/src/components/Lineage/stories/dagreLayout.worker.ts
@@ -20,7 +20,7 @@ self.onmessage = <
   >,
 ) => {
   try {
-    const { edges, nodesMap } = buildLayout<
+    const nodesMap = buildLayout<
       TNodeData,
       TEdgeData,
       TNodeID,
@@ -29,7 +29,7 @@ self.onmessage = <
     >(event.data)
 
     self.postMessage({
-      edges,
+      edges: event.data.edges,
       nodesMap,
     } satisfies LayoutedGraph<TNodeData, TEdgeData, TNodeID, TEdgeID, TPortID>)
   } catch (error) {
diff --git a/web/common/src/components/Lineage/utils.ts b/web/common/src/components/Lineage/utils.ts
index 4e2d55a5a0..5914686f0e 100644
--- a/web/common/src/components/Lineage/utils.ts
+++ b/web/common/src/components/Lineage/utils.ts
@@ -1,4 +1,4 @@
-import type { Branded } from '@/types'
+import type { Branded } from '@sqlmesh-common/types'
 import { type Edge, type Node } from '@xyflow/react'
 
 export type NodeId = Branded<string, 'NodeId'>
diff --git a/web/common/src/components/LoadingContainer/LoadingContainer.stories.tsx b/web/common/src/components/LoadingContainer/LoadingContainer.stories.tsx
index 80c978a905..a37c26c337 100644
--- a/web/common/src/components/LoadingContainer/LoadingContainer.stories.tsx
+++ b/web/common/src/components/LoadingContainer/LoadingContainer.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import type { Side } from '@/types'
+import type { Side } from '@sqlmesh-common/types'
 import { LoadingContainer } from './LoadingContainer'
 import { expect, within } from 'storybook/test'
 
diff --git a/web/common/src/components/LoadingContainer/LoadingContainer.tsx b/web/common/src/components/LoadingContainer/LoadingContainer.tsx
index bba205ae6a..3b7d84fdaa 100644
--- a/web/common/src/components/LoadingContainer/LoadingContainer.tsx
+++ b/web/common/src/components/LoadingContainer/LoadingContainer.tsx
@@ -1,5 +1,5 @@
-import type { Side } from '@/types'
-import { cn } from '@/utils'
+import type { Side } from '@sqlmesh-common/types'
+import { cn } from '@sqlmesh-common/utils'
 import React from 'react'
 import { LoadingIcon } from './LoadingIcon'
 
diff --git a/web/common/src/components/LoadingContainer/LoadingIcon.tsx b/web/common/src/components/LoadingContainer/LoadingIcon.tsx
index b683929f8f..57566b683e 100644
--- a/web/common/src/components/LoadingContainer/LoadingIcon.tsx
+++ b/web/common/src/components/LoadingContainer/LoadingIcon.tsx
@@ -1,4 +1,4 @@
-import { cn } from '@/utils'
+import { cn } from '@sqlmesh-common/utils'
 import React from 'react'
 
 export const LoadingIcon = React.forwardRef<
diff --git a/web/common/src/components/MessageContainer/MessageContainer.css b/web/common/src/components/MessageContainer/MessageContainer.css
index f632bc791f..7b438abda6 100644
--- a/web/common/src/components/MessageContainer/MessageContainer.css
+++ b/web/common/src/components/MessageContainer/MessageContainer.css
@@ -1,3 +1,3 @@
-:root {
+:where(:root) {
   --color-message-translucid: var(--color-neutral-3);
 }
diff --git a/web/common/src/components/MessageContainer/MessageContainer.tsx b/web/common/src/components/MessageContainer/MessageContainer.tsx
index 16d35ea47d..84ba3b5245 100644
--- a/web/common/src/components/MessageContainer/MessageContainer.tsx
+++ b/web/common/src/components/MessageContainer/MessageContainer.tsx
@@ -1,4 +1,4 @@
-import { cn } from '@/utils'
+import { cn } from '@sqlmesh-common/utils'
 import { LoadingContainer } from '../LoadingContainer/LoadingContainer'
 import { HorizontalContainer } from '../HorizontalContainer/HorizontalContainer'
 
diff --git a/web/common/src/components/Metadata/Metadata.css b/web/common/src/components/Metadata/Metadata.css
index b1f5f0dfeb..5d3390ab46 100644
--- a/web/common/src/components/Metadata/Metadata.css
+++ b/web/common/src/components/Metadata/Metadata.css
@@ -1,4 +1,4 @@
-:root {
+:where(:root) {
   --color-metadata-label: var(--color-neutral-600);
   --color-metadata-value: var(--color-prose);
 }
diff --git a/web/common/src/components/Metadata/Metadata.tsx b/web/common/src/components/Metadata/Metadata.tsx
index 546107b078..ff55c18e73 100644
--- a/web/common/src/components/Metadata/Metadata.tsx
+++ b/web/common/src/components/Metadata/Metadata.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { HorizontalContainer } from '../HorizontalContainer/HorizontalContainer'
-import { cn } from '@/utils'
+import { cn } from '@sqlmesh-common/utils'
 
 export interface MetadataProps extends React.HTMLAttributes<HTMLDivElement> {
   label: React.ReactNode
diff --git a/web/common/src/components/ModelName/ModelName.css b/web/common/src/components/ModelName/ModelName.css
index 8615f3c6df..e2bffa927e 100644
--- a/web/common/src/components/ModelName/ModelName.css
+++ b/web/common/src/components/ModelName/ModelName.css
@@ -1,4 +1,4 @@
-:root {
+:where(:root) {
   --color-model-name-grayscale-link-underline: var(--color-neutral-125);
   --color-model-name-grayscale-link-underline-hover: var(--color-neutral-500);
   --color-model-name-link-underline: var(--color-link-underline);
@@ -6,7 +6,7 @@
 
   --color-model-name-grayscale-catalog: var(--color-neutral-400);
   --color-model-name-grayscale-schema: var(--color-neutral-600);
-  --color-model-name-grayscale-model: var(--color-neutral-800);
+  /* --color-model-name-grayscale-model: var(--color-model-name-grayscale-model, var(--color-neutral-800)); */
 
   --color-model-name-catalog: var(--color-catalog);
   --color-model-name-schema: var(--color-schema);
diff --git a/web/common/src/components/ModelName/ModelName.tsx b/web/common/src/components/ModelName/ModelName.tsx
index 7c7f50789d..dd86e5737d 100644
--- a/web/common/src/components/ModelName/ModelName.tsx
+++ b/web/common/src/components/ModelName/ModelName.tsx
@@ -1,8 +1,8 @@
 import { Box, Check, Copy } from 'lucide-react'
 import { useMemo } from 'react'
 
-import { cn, truncate } from '@/utils'
-import { Tooltip } from '@/components/Tooltip/Tooltip'
+import { cn, truncate } from '@sqlmesh-common/utils'
+import { Tooltip } from '@sqlmesh-common/components/Tooltip/Tooltip'
 import React from 'react'
 
 import './ModelName.css'
diff --git a/web/common/src/components/ScrollContainer/ScrollContainer.css b/web/common/src/components/ScrollContainer/ScrollContainer.css
index 0ab7dd033f..d5c01a1c9f 100644
--- a/web/common/src/components/ScrollContainer/ScrollContainer.css
+++ b/web/common/src/components/ScrollContainer/ScrollContainer.css
@@ -1,4 +1,4 @@
-:root {
+:where(:root) {
   --scrollbar-thumb: var(--color-neutral-300);
   --scrollbar-track: var(--color-transparent);
 }
diff --git a/web/common/src/components/ScrollContainer/ScrollContainer.tsx b/web/common/src/components/ScrollContainer/ScrollContainer.tsx
index 19ce969e2f..942b42d06b 100644
--- a/web/common/src/components/ScrollContainer/ScrollContainer.tsx
+++ b/web/common/src/components/ScrollContainer/ScrollContainer.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
-import { cn } from '@/utils'
-import type { LayoutDirection } from '@/types'
+import { cn } from '@sqlmesh-common/utils'
+import type { LayoutDirection } from '@sqlmesh-common/types'
 
 import './ScrollContainer.css'
 
diff --git a/web/common/src/components/Tooltip/Tooltip.css b/web/common/src/components/Tooltip/Tooltip.css
index ba080f6974..9a0da07b41 100644
--- a/web/common/src/components/Tooltip/Tooltip.css
+++ b/web/common/src/components/Tooltip/Tooltip.css
@@ -1,4 +1,4 @@
-:root {
+:where(:root) {
   --color-tooltip-background: var(--color-dark);
   --color-tooltip-foreground: var(--color-light);
 }
diff --git a/web/common/src/components/Tooltip/Tooltip.stories.tsx b/web/common/src/components/Tooltip/Tooltip.stories.tsx
index 37f76f7e27..3a876f1da2 100644
--- a/web/common/src/components/Tooltip/Tooltip.stories.tsx
+++ b/web/common/src/components/Tooltip/Tooltip.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { Tooltip } from '@/components/Tooltip/Tooltip'
-import { Button } from '@/components/Button/Button'
+import { Tooltip } from '@sqlmesh-common/components/Tooltip/Tooltip'
+import { Button } from '@sqlmesh-common/components/Button/Button'
 
 const meta: Meta<typeof Tooltip> = {
   title: 'Components/Tooltip',
diff --git a/web/common/src/components/Tooltip/Tooltip.tsx b/web/common/src/components/Tooltip/Tooltip.tsx
index c28d960bc9..1417f9fe17 100644
--- a/web/common/src/components/Tooltip/Tooltip.tsx
+++ b/web/common/src/components/Tooltip/Tooltip.tsx
@@ -7,7 +7,7 @@ import {
 } from '@radix-ui/react-tooltip'
 import React from 'react'
 
-import { cn } from '@/utils'
+import { cn } from '@sqlmesh-common/utils'
 
 import './Tooltip.css'
 
diff --git a/web/common/src/components/Typography/Description.tsx b/web/common/src/components/Typography/Description.tsx
index 512a216fac..3cae951c30 100644
--- a/web/common/src/components/Typography/Description.tsx
+++ b/web/common/src/components/Typography/Description.tsx
@@ -1,4 +1,4 @@
-import { cn } from '@/utils'
+import { cn } from '@sqlmesh-common/utils'
 import React from 'react'
 
 export interface DescriptionProps {
diff --git a/web/common/src/components/Typography/Headline.tsx b/web/common/src/components/Typography/Headline.tsx
index 1978751a44..6bead184fa 100644
--- a/web/common/src/components/Typography/Headline.tsx
+++ b/web/common/src/components/Typography/Headline.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { getHeadlineTextSize } from './help'
-import type { HeadlineLevel } from '@/types'
-import { cn } from '@/utils'
+import type { HeadlineLevel } from '@sqlmesh-common/types'
+import { cn } from '@sqlmesh-common/utils'
 
 export interface HeadlineProps {
   level: HeadlineLevel
diff --git a/web/common/src/components/Typography/Information.tsx b/web/common/src/components/Typography/Information.tsx
index d4fc0f2b83..ce7301673c 100644
--- a/web/common/src/components/Typography/Information.tsx
+++ b/web/common/src/components/Typography/Information.tsx
@@ -1,9 +1,9 @@
 import { Info } from 'lucide-react'
 import React from 'react'
 
-import { cn } from '@/utils'
+import { cn } from '@sqlmesh-common/utils'
 import { getTextSize } from './help'
-import type { Size } from '@/types'
+import type { Size } from '@sqlmesh-common/types'
 import { Tooltip } from '../Tooltip/Tooltip'
 
 export interface InformationProps {
diff --git a/web/common/src/components/Typography/Tagline.tsx b/web/common/src/components/Typography/Tagline.tsx
index 87a7ed29f6..46a69ee7ac 100644
--- a/web/common/src/components/Typography/Tagline.tsx
+++ b/web/common/src/components/Typography/Tagline.tsx
@@ -1,4 +1,4 @@
-import { cn } from '@/utils'
+import { cn } from '@sqlmesh-common/utils'
 
 export interface TaglineProps {
   className?: string
diff --git a/web/common/src/components/Typography/Text.tsx b/web/common/src/components/Typography/Text.tsx
index de9233e296..a06b0f6d24 100644
--- a/web/common/src/components/Typography/Text.tsx
+++ b/web/common/src/components/Typography/Text.tsx
@@ -1,4 +1,4 @@
-import { cn } from '@/utils'
+import { cn } from '@sqlmesh-common/utils'
 
 export interface TextProps {
   className?: string
diff --git a/web/common/src/components/Typography/help.ts b/web/common/src/components/Typography/help.ts
index 429c6f3852..1d18db2f06 100644
--- a/web/common/src/components/Typography/help.ts
+++ b/web/common/src/components/Typography/help.ts
@@ -1,4 +1,4 @@
-import type { HeadlineLevel, Size } from '@/types'
+import type { HeadlineLevel, Size } from '@sqlmesh-common/types'
 
 export function getHeadlineTextSize(level: HeadlineLevel) {
   return {
diff --git a/web/common/src/components/VerticalContainer/VerticalContainer.tsx b/web/common/src/components/VerticalContainer/VerticalContainer.tsx
index e592265dca..2532bad847 100644
--- a/web/common/src/components/VerticalContainer/VerticalContainer.tsx
+++ b/web/common/src/components/VerticalContainer/VerticalContainer.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { cn } from '@/utils'
+import { cn } from '@sqlmesh-common/utils'
 import { ScrollContainer } from '../ScrollContainer/ScrollContainer'
 
 export interface VerticalContainerProps
diff --git a/web/common/src/components/VirtualList/FilterableList.css b/web/common/src/components/VirtualList/FilterableList.css
index 3b1a8f8c3d..7cc60e51f9 100644
--- a/web/common/src/components/VirtualList/FilterableList.css
+++ b/web/common/src/components/VirtualList/FilterableList.css
@@ -1,4 +1,4 @@
-:root {
+:where(:root) {
   --color-filterable-list-counter-background: var(--color-badge-background);
   --color-filterable-list-counter-foreground: var(--color-badge-foreground);
 
diff --git a/web/common/src/components/VirtualList/FilterableList.tsx b/web/common/src/components/VirtualList/FilterableList.tsx
index 16a243eb0e..169fb916d9 100644
--- a/web/common/src/components/VirtualList/FilterableList.tsx
+++ b/web/common/src/components/VirtualList/FilterableList.tsx
@@ -4,7 +4,7 @@ import React from 'react'
 import { VerticalContainer } from '../VerticalContainer/VerticalContainer'
 import { HorizontalContainer } from '../HorizontalContainer/HorizontalContainer'
 import { Badge } from '../Badge/Badge'
-import { cn } from '@/utils'
+import { cn } from '@sqlmesh-common/utils'
 import { MessageContainer } from '../MessageContainer/MessageContainer'
 import { Input } from '../Input/Input'
 
diff --git a/web/common/src/components/VirtualList/VirtualList.tsx b/web/common/src/components/VirtualList/VirtualList.tsx
index adf1010508..c266d9eaac 100644
--- a/web/common/src/components/VirtualList/VirtualList.tsx
+++ b/web/common/src/components/VirtualList/VirtualList.tsx
@@ -5,7 +5,7 @@ import {
 } from '@tanstack/react-virtual'
 import React from 'react'
 import { HorizontalContainer } from '../HorizontalContainer/HorizontalContainer'
-import { cn } from '@/utils'
+import { cn } from '@sqlmesh-common/utils'
 import { Button } from '../Button/Button'
 import { ScrollContainer } from '../ScrollContainer/ScrollContainer'
 import { VerticalContainer } from '../VerticalContainer/VerticalContainer'
diff --git a/web/common/src/index.ts b/web/common/src/index.ts
index c3c65a8e77..c4f1e39f38 100644
--- a/web/common/src/index.ts
+++ b/web/common/src/index.ts
@@ -1,66 +1,72 @@
 // Components
-export { Badge, type BadgeProps } from '@/components/Badge/Badge'
+export { Badge, type BadgeProps } from '@sqlmesh-common/components/Badge/Badge'
 export {
   Button,
   type ButtonProps,
   type ButtonVariant,
-} from '@/components/Button/Button'
+} from '@sqlmesh-common/components/Button/Button'
 export {
   CopyButton,
   type CopyButtonProps,
-} from '@/components/CopyButton/CopyButton'
+} from '@sqlmesh-common/components/CopyButton/CopyButton'
 export {
   HorizontalContainer,
   type HorizontalContainerProps,
-} from '@/components/HorizontalContainer/HorizontalContainer'
+} from '@sqlmesh-common/components/HorizontalContainer/HorizontalContainer'
 export {
   ScrollContainer,
   type ScrollContainerProps,
-} from '@/components/ScrollContainer/ScrollContainer'
+} from '@sqlmesh-common/components/ScrollContainer/ScrollContainer'
 export {
   VerticalContainer,
   type VerticalContainerProps,
-} from '@/components/VerticalContainer/VerticalContainer'
+} from '@sqlmesh-common/components/VerticalContainer/VerticalContainer'
 export {
   ModelName,
   type ModelNameProps,
-} from '@/components/ModelName/ModelName'
-export { Tooltip, type TooltipProps } from '@/components/Tooltip/Tooltip'
+} from '@sqlmesh-common/components/ModelName/ModelName'
+export { Tooltip, type TooltipProps } from './components/Tooltip/Tooltip'
 export {
   VirtualList,
   type VirtualListProps,
-} from '@/components/VirtualList/VirtualList'
+} from '@sqlmesh-common/components/VirtualList/VirtualList'
 export {
   FilterableList,
   type FilterableListProps,
-} from '@/components/VirtualList/FilterableList'
+} from '@sqlmesh-common/components/VirtualList/FilterableList'
 export {
   MessageContainer,
   type MessageContainerProps,
-} from '@/components/MessageContainer/MessageContainer'
-export { Input, type InputProps } from '@/components/Input/Input'
+} from '@sqlmesh-common/components/MessageContainer/MessageContainer'
+export { Input, type InputProps } from './components/Input/Input'
 export {
   LoadingContainer,
   type LoadingContainerProps,
-} from '@/components/LoadingContainer/LoadingContainer'
-export { Metadata, type MetadataProps } from '@/components/Metadata/Metadata'
+} from '@sqlmesh-common/components/LoadingContainer/LoadingContainer'
+export { Metadata, type MetadataProps } from './components/Metadata/Metadata'
 export {
   Description,
   type DescriptionProps,
-} from '@/components/Typography/Description'
-export { Headline, type HeadlineProps } from '@/components/Typography/Headline'
+} from '@sqlmesh-common/components/Typography/Description'
+export { Headline, type HeadlineProps } from './components/Typography/Headline'
 export {
   Information,
   type InformationProps,
-} from '@/components/Typography/Information'
-export { Tagline, type TaglineProps } from '@/components/Typography/Tagline'
-export { Text, type TextProps } from '@/components/Typography/Text'
+} from '@sqlmesh-common/components/Typography/Information'
+export {
+  Tagline,
+  type TaglineProps,
+} from '@sqlmesh-common/components/Typography/Tagline'
+export {
+  Text,
+  type TextProps,
+} from '@sqlmesh-common/components/Typography/Text'
 
 // Hooks
-export { useCopyClipboard } from '@/hooks/useCopyClipboard'
+export { useCopyClipboard } from '@sqlmesh-common/hooks/useCopyClipboard'
 
 // Utils
-export { cn, truncate } from '@/utils'
+export { cn, truncate } from '@sqlmesh-common/utils'
 
 // Types
 export type {
@@ -75,4 +81,4 @@ export type {
   Shape,
   Position,
   Callback,
-} from '@/types'
+} from '@sqlmesh-common/types'
diff --git a/web/common/src/styles/design/index.css b/web/common/src/styles/design/index.css
index 167e403244..5d9bd65a72 100644
--- a/web/common/src/styles/design/index.css
+++ b/web/common/src/styles/design/index.css
@@ -1,5 +1,4 @@
 @import url('./fonts.css');
-@import url('./palette.css');
 @import url('./semantic-colors.css');
 @import url('./typography.css');
 @import url('./space.css');
diff --git a/web/common/tsconfig.base.json b/web/common/tsconfig.base.json
index ca7c1e0785..68b9b27a73 100644
--- a/web/common/tsconfig.base.json
+++ b/web/common/tsconfig.base.json
@@ -28,7 +28,7 @@
     /* Paths */
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"]
+      "@sqlmesh-common/*": ["./src/*"]
     }
   }
 }
diff --git a/web/common/vite.config.js b/web/common/vite.config.js
index f123507484..e9e2641fda 100644
--- a/web/common/vite.config.js
+++ b/web/common/vite.config.js
@@ -31,7 +31,7 @@ export default defineConfig({
   ],
   resolve: {
     alias: {
-      '@': path.resolve(__dirname, './src'),
+      '@sqlmesh-common': path.resolve(__dirname, './src'),
     },
   },
   build: {
@@ -61,6 +61,7 @@ export default defineConfig({
         '@radix-ui/react-slot',
         'tailwindcss',
         '@tailwindcss/typography',
+        '@xyflow/react',
       ],
       output: {
         globals: {
@@ -70,6 +71,7 @@ export default defineConfig({
           'tailwind-merge': 'tailwindMerge',
           'class-variance-authority': 'classVarianceAuthority',
           '@radix-ui/react-slot': 'radixSlot',
+          '@xyflow/react': 'xyflowReact',
         },
         assetFileNames: assetInfo => {
           if (assetInfo.name && assetInfo.name.endsWith('.css')) {